Implemented Sensors page with VueQuery and Composition API

Introduce reusable Redfish API infrastructure and modernize the Sensors
page to use Vue 3 Composition API with TanStack Query, eliminating

Implemented Sensors page with VueQuery and Composition API

Introduce reusable Redfish API infrastructure and modernize the Sensors
page to use Vue 3 Composition API with TanStack Query, eliminating the
need for Vuex store patterns for server state management.

This change provides a foundation for migrating other hardware status
pages (Memory, Processors, Drives, etc.) to a more maintainable and
performant architecture.

Key changes:

1. Generic Redfish composables (src/api/composables/):
- useRedfishRoot.ts: Caches ServiceRoot and detects OData support
- useRedfishCollection.ts: Smart collection fetcher with OData
$expand/$select support and graceful fallback
- useAllSubResources.ts: Generic pattern for fetching nested
resources from parent collections

2. Sensors page modernization:
- Migrated from Vuex store to TanStack Query (Vue Query)
- Created useSensors.ts composable for data fetching
- Removed legacy Thermal and PowerSubsystem endpoints
- Now uses only modern /Chassis/{id}/Sensors collection
- Maintains existing UI/UX with Bootstrap Vue table

3. TypeScript support:
- Added tsconfig.json and webpack ts-loader configuration
- Created required Redfish type definitions
- Preserves Redfish PascalCase property names

4. Performance optimizations:
- Auto-detects and uses OData $expand for fewer API calls
- Implements automatic caching and deduplication
- Smart retry logic with exponential backoff
- 30-second stale time with 5-minute garbage collection

Benefits for future development:

- The generic composables are designed for reuse across components:
// Fetch all Memory from all Systems
useAllSubResources<Memory>('/redfish/v1/Systems', 'Memory')

// Fetch all Drives from all Storage
useAllSubResources<Drive>('/redfish/v1/Storage', 'Drives')

- Implemented TypeScript types
- Reuses existing Bootstrap table components
- Preserves existing UI/UX
- Focuses on infrastructure reusability

This pattern eliminates boilerplate Vuex store code and provides
better developer experience with automatic loading states, error
handling, and background refetching.

Tested-by: Manual testing on development server
- Sensors page loads correctly
- OData optimization works when supported
- Graceful fallback when OData unavailable
- All table functionality preserved (sorting, filtering,
export, cancel and searching)

Change-Id: Id605319140f607b295d24085f3681f09ac0d5ebd
Signed-off-by: Nishant Tiwari <tiwari.nishant@ibm.com>

show more ...