7373ccfa1d
Some checks failed
Integration Tests / integration-tests (push) Failing after 20s
Integration Tests / performance-tests (push) Has been skipped
Service Adapters (Python FastAPI) / test (3.11) (push) Failing after 23s
Frontend (React) / test (20) (push) Failing after 1m3s
Frontend (React) / build (push) Has been skipped
Frontend (React) / lighthouse (push) Has been skipped
Service Adapters (Python FastAPI) / test (3.12) (push) Failing after 23s
Service Adapters (Python FastAPI) / test (3.13) (push) Failing after 20s
Service Adapters (Python FastAPI) / build (push) Has been skipped
### Summary of Changes - Removed proxy configuration in `rsbuild.config.js` as the API Gateway is not running. - Added smooth transitions and gentle loading overlays in CSS for improved user experience during data loading. - Updated `Dashboard` component to conditionally display loading spinner and gentle loading overlay based on data fetching state. - Enhanced `useOfflineAwareServiceStatus` and `useOfflineAwareSystemData` hooks to manage loading states and service status more effectively. - Increased refresh intervals for service status and system data to reduce API call frequency. ### Expected Results - Improved user experience with smoother loading transitions and better feedback during data refreshes. - Enhanced handling of service status checks, providing clearer information when services are unavailable. - Streamlined code for managing loading states, making it easier to maintain and extend in the future.
67 lines
2.0 KiB
JavaScript
67 lines
2.0 KiB
JavaScript
import { ERROR_MESSAGES } from '../constants';
|
|
|
|
/**
|
|
* Handles API request errors and returns user-friendly messages
|
|
* @param {Error} error - The error object from axios
|
|
* @returns {Object} - Error object with user-friendly message
|
|
*/
|
|
export const handleRequestError = (error) => {
|
|
if (error.code === 'ECONNABORTED') {
|
|
return { error: ERROR_MESSAGES.CONNECTION_TIMEOUT };
|
|
}
|
|
if (error.response) {
|
|
return { error: `${ERROR_MESSAGES.SERVICE_ERROR}: ${error.response.status}` };
|
|
}
|
|
if (error.request) {
|
|
return { error: ERROR_MESSAGES.SERVICE_UNAVAILABLE };
|
|
}
|
|
return { error: ERROR_MESSAGES.UNKNOWN_ERROR };
|
|
};
|
|
|
|
/**
|
|
* Determines service status based on availability count
|
|
* @param {number} availableCount - Number of available services
|
|
* @param {number} totalCount - Total number of services
|
|
* @returns {string} - Service status
|
|
*/
|
|
export const determineServiceStatus = (availableCount, totalCount) => {
|
|
if (availableCount === 0) return 'offline';
|
|
if (availableCount === totalCount) return 'online';
|
|
return 'partial';
|
|
};
|
|
|
|
/**
|
|
* Formats service data for display
|
|
* @param {Object} serviceData - Raw service data
|
|
* @returns {Array} - Formatted service array
|
|
*/
|
|
export const formatServiceData = (serviceData) => {
|
|
if (!serviceData || typeof serviceData !== 'object') {
|
|
return [];
|
|
}
|
|
|
|
return Object.entries(serviceData).map(([key, service]) => ({
|
|
name: service.name || key.charAt(0).toUpperCase() + key.slice(1).replace('_', ' '),
|
|
status: service.status === 'healthy' ? 'online' :
|
|
service.status === 'unknown' ? (service.enabled ? 'offline' : 'disabled') : 'offline',
|
|
uptime: service.uptime || '0d 0h'
|
|
}));
|
|
};
|
|
|
|
/**
|
|
* Formats event data for display
|
|
* @param {Array} events - Raw event data
|
|
* @returns {Array} - Formatted event array
|
|
*/
|
|
export const formatEventData = (events) => {
|
|
if (!Array.isArray(events)) {
|
|
return [];
|
|
}
|
|
|
|
return events.map(event => ({
|
|
time: new Date(event.timestamp).toLocaleString(),
|
|
event: `${event.event_type} from ${event.service}`,
|
|
service: event.service
|
|
}));
|
|
};
|