UI & Cluster Enhancements + Test Coverage Improvements

src/components/App.jsx

@@ -31,6 +31,7 @@ const ObjectDetails = lazy(() => import("./ObjectDetails"));
 const ObjectInstanceView = lazy(() => import("./ObjectInstanceView"));
 const ClusterOverview = lazy(() => import("./Cluster"));
 const Namespaces = lazy(() => import("./Namespaces"));
+const Kinds = lazy(() => import("./Kinds"));
 const Heartbeats = lazy(() => import("./Heartbeats"));
 const Pools = lazy(() => import("./Pools"));
 const Network = lazy(() => import("./Network"));
@@ -350,9 +351,11 @@ const App = () => {
                                     <Route path="/cluster"
                                            element={<ProtectedRoute><ClusterOverview/></ProtectedRoute>}/>
                                     <Route path="/namespaces" element={<ProtectedRoute><Namespaces/></ProtectedRoute>}/>
+                                    <Route path="/kinds"
+                                           element={<ProtectedRoute><Kinds/></ProtectedRoute>}/> {/* <-- AJOUT */}
                                     <Route path="/heartbeats" element={<Heartbeats/>}/>
                                     <Route path="/nodes" element={<ProtectedRoute><NodesTable/></ProtectedRoute>}/>
-                                    <Route path="/storage-pools" element={<ProtectedRoute><Pools/></ProtectedRoute>}/>
+                                    <Route path="/pools" element={<ProtectedRoute><Pools/></ProtectedRoute>}/>
                                     <Route path="/network" element={<ProtectedRoute><Network/></ProtectedRoute>}/>
                                     <Route path="/network/:networkName"
                                            element={<ProtectedRoute><NetworkDetails/></ProtectedRoute>}/>

src/components/Cluster.jsx

@@ -9,28 +9,14 @@ import {
     GridNamespaces,
     GridHeartbeats,
     GridPools,
-    GridNetworks
-} from "./ClusterStatGrids.jsx";
+    GridNetworks,
+    GridKinds
+} from "../components/ClusterStatGrids.jsx";
 import {URL_POOL, URL_NETWORK} from "../config/apiPath.js";
 import {startEventReception, DEFAULT_FILTERS} from "../eventSourceManager";
 import EventLogger from "../components/EventLogger";
 import {useNodeStats, useObjectStats, useHeartbeatStats} from "../hooks/useClusterData";
-
-const CLUSTER_EVENT_TYPES = [
-    "NodeStatusUpdated",
-    "NodeMonitorUpdated",
-    "NodeStatsUpdated",
-    "DaemonHeartbeatUpdated",
-    "ObjectStatusUpdated",
-    "InstanceStatusUpdated",
-    "ObjectDeleted",
-    "InstanceMonitorUpdated",
-    "CONNECTION_OPENED",
-    "CONNECTION_ERROR",
-    "RECONNECTION_ATTEMPT",
-    "MAX_RECONNECTIONS_REACHED",
-    "CONNECTION_CLOSED"
-];
+import {useKindData} from "../hooks/useKindData";
 
 const InitialLoader = memo(() => (
     <Box sx={{
@@ -54,11 +40,13 @@ const ClusterOverview = () => {
     const nodeStats = useNodeStats();
     const objectStats = useObjectStats();
     const heartbeatStats = useHeartbeatStats();
+    const {statusByKind, kinds} = useKindData();
 
     const deferredNodeStats = useDeferredValue(nodeStats);
     const deferredObjectStats = useDeferredValue(objectStats);
     const deferredHeartbeatStats = useDeferredValue(heartbeatStats);
 
+    const [pools, setPools] = useState([]);
     const [poolCount, setPoolCount] = useState(0);
     const [networks, setNetworks] = useState([]);
     const [isLoading, setIsLoading] = useState(true);
@@ -71,10 +59,11 @@ const ClusterOverview = () => {
         navigate(globalState ? `/objects?globalState=${globalState}` : '/objects');
     }, [navigate]);
 
-    const handleHeartbeatsClick = useCallback((status, state) => {
+    const handleHeartbeatsClick = useCallback((status, state, id) => {
         const params = new URLSearchParams();
         if (status) params.append('status', status);
         if (state) params.append('state', state);
+        if (id) params.append('id', id);
         navigate(`/heartbeats${params.toString() ? `?${params.toString()}` : ''}`);
     }, [navigate]);
 
@@ -105,13 +94,15 @@ const ClusterOverview = () => {
             const poolItems = poolsRes.data?.items || [];
             const networkItems = networksRes.data?.items || [];
 
+            setPools(poolItems);
             setPoolCount(poolItems.length);
             setNetworks(networkItems);
             setIsLoading(false);
         } catch (error) {
             if (!isMounted.current || error.name === 'AbortError') return;
 
             logger.error('Failed to fetch cluster data:', error.message);
+            setPools([]);
             setPoolCount(0);
             setNetworks([]);
             setIsLoading(false);
@@ -138,9 +129,8 @@ const ClusterOverview = () => {
     const gridNodesProps = useMemo(() => ({
         nodeCount: deferredNodeStats.count,
         frozenCount: deferredNodeStats.frozen,
-        unfrozenCount: deferredNodeStats.unfrozen,
         onClick: handleNavigate("/nodes")
-    }), [deferredNodeStats.count, deferredNodeStats.frozen, deferredNodeStats.unfrozen, handleNavigate]);
+    }), [deferredNodeStats.count, deferredNodeStats.frozen, handleNavigate]);
 
     const gridObjectsProps = useMemo(() => ({
         objectCount: deferredObjectStats.objectCount,
@@ -150,9 +140,8 @@ const ClusterOverview = () => {
 
     const gridHeartbeatsProps = useMemo(() => ({
         heartbeatCount: deferredHeartbeatStats.count,
-        beatingCount: deferredHeartbeatStats.beating,
-        nonBeatingCount: deferredHeartbeatStats.stale,
-        stateCount: deferredHeartbeatStats.stateCount,
+        runningCount: deferredHeartbeatStats.running,
+        perHeartbeatStats: deferredHeartbeatStats.perHeartbeatStats,
         nodeCount: deferredNodeStats.count,
         onClick: handleHeartbeatsClick
     }), [deferredHeartbeatStats, deferredNodeStats.count, handleHeartbeatsClick]);
@@ -163,10 +152,24 @@ const ClusterOverview = () => {
         onClick: (url) => navigate(url || "/namespaces")
     }), [deferredObjectStats.namespaceCount, deferredObjectStats.namespaceSubtitle, navigate]);
 
+    const kindSubtitle = useMemo(() => {
+        return kinds.map(kind => ({
+            kind,
+            status: statusByKind[kind]
+        }));
+    }, [kinds, statusByKind]);
+
+    const gridKindsProps = useMemo(() => ({
+        kindCount: kinds.length,
+        kindSubtitle,
+        onClick: (url) => navigate(url || "/kinds")
+    }), [kinds.length, kindSubtitle, navigate]);
+
     const gridPoolsProps = useMemo(() => ({
         poolCount,
-        onClick: handleNavigate("/storage-pools")
-    }), [poolCount, handleNavigate]);
+        pools,
+        onClick: handleNavigate("/pools")
+    }), [poolCount, pools, handleNavigate]);
 
     const gridNetworksProps = useMemo(() => ({
         networks,
@@ -245,8 +248,10 @@ const ClusterOverview = () => {
                         </Box>
                     </Box>
 
-                    <Box sx={{flex: 1}}>
+                    {/* Colonne de droite : Namespaces et Kinds l'un en dessous de l'autre */}
+                    <Box sx={{flex: 1, display: 'flex', flexDirection: 'column', gap: 3}}>
                         <GridNamespaces {...gridNamespacesProps} />
+                        <GridKinds {...gridKindsProps} />
                     </Box>
                 </Box>
                 {/* <EventLogger eventTypes={CLUSTER_EVENT_TYPES} title="Cluster Events Logger" buttonLabel="Cluster Events"/> */}