Update README and documentation; refactor frontend components for improved structure and resilience

frontend/src/utils/errorHandling.js

@@ -0,0 +1,65 @@
+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,
+    status: service.status === 'healthy' ? 'online' : 'offline',
+    uptime: service.responseTime || '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
+  }));
+};