Some checks failed
LabFusion CI/CD Pipeline / api-gateway (push) Failing after 34s
Docker Build and Push / build-and-push (push) Failing after 42s
LabFusion CI/CD Pipeline / service-adapters (push) Successful in 1m2s
LabFusion CI/CD Pipeline / frontend (push) Failing after 1m5s
Integration Tests / integration-tests (push) Failing after 38s
Integration Tests / performance-tests (push) Has been skipped
LabFusion CI/CD Pipeline / api-docs (push) Successful in 1m47s
Frontend (React) / test (latest) (push) Failing after 1m14s
LabFusion CI/CD Pipeline / integration-tests (push) Has been skipped
Frontend (React) / build (push) Has been skipped
Frontend (React) / lighthouse (push) Has been skipped
### Summary of Changes - Replaced `react-query` with `@tanstack/react-query` in `package.json` and updated related imports. - Updated frontend CI workflow to use `vitest` for testing instead of Jest, modifying test commands accordingly. - Removed the `App.js`, `Dashboard.js`, `Settings.js`, and other component files, transitioning to a new structure. - Enhanced error handling in the `useServiceStatus` hook to provide more informative error messages. ### Expected Results - Improved performance and modernized the frontend build process with Vite. - Streamlined testing setup with `vitest`, enhancing test execution speed and reliability. - Increased clarity and maintainability of the codebase by adhering to clean code principles and removing unused components.
130 lines
4.1 KiB
JavaScript
130 lines
4.1 KiB
JavaScript
import { useState, useEffect } from 'react';
|
|
import { apiGateway, serviceAdapters, apiDocs, fallbackData } from '../services/api';
|
|
import { API_CONFIG, SERVICE_STATUS } from '../constants';
|
|
import { determineServiceStatus, formatServiceData, formatEventData } from '../utils/errorHandling';
|
|
|
|
export const useServiceStatus = () => {
|
|
const [status, setStatus] = useState({
|
|
loading: true,
|
|
apiGateway: { available: false, error: null },
|
|
serviceAdapters: { available: false, error: null },
|
|
apiDocs: { available: false, error: null },
|
|
overall: SERVICE_STATUS.CHECKING
|
|
});
|
|
|
|
useEffect(() => {
|
|
const checkServices = async () => {
|
|
setStatus(prev => ({ ...prev, loading: true }));
|
|
|
|
// Check all services in parallel
|
|
const [apiGatewayResult, adaptersResult, docsResult] = await Promise.allSettled([
|
|
apiGateway.health(),
|
|
serviceAdapters.health(),
|
|
apiDocs.health()
|
|
]);
|
|
|
|
const newStatus = {
|
|
loading: false,
|
|
apiGateway: {
|
|
available: apiGatewayResult.status === 'fulfilled' && apiGatewayResult.value.success,
|
|
error: apiGatewayResult.status === 'rejected' ? 'Connection failed' :
|
|
(apiGatewayResult.value?.error || null)
|
|
},
|
|
serviceAdapters: {
|
|
available: adaptersResult.status === 'fulfilled' && adaptersResult.value.success,
|
|
error: adaptersResult.status === 'rejected' ? 'Connection failed' :
|
|
(adaptersResult.value?.error || null)
|
|
},
|
|
apiDocs: {
|
|
available: docsResult.status === 'fulfilled' && docsResult.value.success,
|
|
error: docsResult.status === 'rejected' ? 'Connection failed' :
|
|
(docsResult.value?.error || null)
|
|
},
|
|
overall: SERVICE_STATUS.CHECKING
|
|
};
|
|
|
|
// Determine overall status
|
|
const availableServices = [
|
|
newStatus.apiGateway.available,
|
|
newStatus.serviceAdapters.available,
|
|
newStatus.apiDocs.available
|
|
].filter(Boolean).length;
|
|
|
|
newStatus.overall = determineServiceStatus(availableServices, 3);
|
|
|
|
setStatus(newStatus);
|
|
};
|
|
|
|
checkServices();
|
|
|
|
// Check services every 30 seconds
|
|
const interval = setInterval(checkServices, API_CONFIG.REFRESH_INTERVALS.SERVICE_STATUS);
|
|
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
return status;
|
|
};
|
|
|
|
export const useSystemData = () => {
|
|
const [data, setData] = useState({
|
|
loading: true,
|
|
systemStats: fallbackData.systemStats,
|
|
services: fallbackData.services,
|
|
events: fallbackData.events,
|
|
error: null
|
|
});
|
|
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
setData(prev => ({ ...prev, loading: true }));
|
|
|
|
try {
|
|
// Try to fetch real data from services
|
|
const [metricsResult, servicesResult, eventsResult] = await Promise.allSettled([
|
|
apiGateway.getSystemMetrics(),
|
|
serviceAdapters.getServices(),
|
|
serviceAdapters.getEvents(10)
|
|
]);
|
|
|
|
const systemStats = metricsResult.status === 'fulfilled' && metricsResult.value.success
|
|
? metricsResult.value.data
|
|
: fallbackData.systemStats;
|
|
|
|
const services = servicesResult.status === 'fulfilled' && servicesResult.value.success
|
|
? formatServiceData(servicesResult.value.data)
|
|
: fallbackData.services;
|
|
|
|
const events = eventsResult.status === 'fulfilled' && eventsResult.value.success
|
|
? formatEventData(eventsResult.value.data.events)
|
|
: fallbackData.events;
|
|
|
|
setData({
|
|
loading: false,
|
|
systemStats,
|
|
services,
|
|
events,
|
|
error: null
|
|
});
|
|
} catch (error) {
|
|
setData({
|
|
loading: false,
|
|
systemStats: fallbackData.systemStats,
|
|
services: fallbackData.services,
|
|
events: fallbackData.events,
|
|
error: `Failed to fetch data from services: ${error.message}`
|
|
});
|
|
}
|
|
};
|
|
|
|
fetchData();
|
|
|
|
// Refresh data every 60 seconds
|
|
const interval = setInterval(fetchData, API_CONFIG.REFRESH_INTERVALS.SYSTEM_DATA);
|
|
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
return data;
|
|
};
|