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

frontend/src/hooks/useServiceStatus.js

@@ -0,0 +1,129 @@
+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'
+        });
+      }
+    };
+
+    fetchData();
+
+    // Refresh data every 60 seconds
+    const interval = setInterval(fetchData, API_CONFIG.REFRESH_INTERVALS.SYSTEM_DATA);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return data;
+};