implimented the new Vm-placement data strcuture, fixed 8/9 designs issue from last meeting written in the group blc - in 7/8/2025

src/components/Migration/SummaryStats.tsx

@@ -1,54 +1,33 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { Grid, Paper, Typography, Box, Divider } from '@mui/material';
 import StorageIcon from '@mui/icons-material/Storage';
 import ComputerIcon from '@mui/icons-material/Computer';
 import { config } from '../../config/env';
-
-interface VM {
-  name: string;
-  power: number;
-}
-
-interface VMPlacementData {
-  data_center: string;
-  id: number;
-  physical_machines: Array<{
-    name: string;
-    power_consumption: number;
-    vms: {
-      active: VM[];
-      inactive: VM[];
-    };
-  }>;
-}
+import { VMPlacementData } from './types';
+import { useSmartPolling } from './hooks';
 
 const ENDPOINT = `${config.apiUrl}/prom/get_chart_data/vm_placement`;
-const REFRESH_INTERVAL = 30000; // 30 seconds
 
 const SummaryStats: React.FC = () => {
-  const [data, setData] = useState<VMPlacementData | null>(null);
-
-  const fetchData = async () => {
-    try {
-      const response = await fetch(ENDPOINT);
-      if (!response.ok) {
-        throw new Error(`Failed to fetch data: ${response.status}`);
-      }
-      const jsonData = await response.json();
-      setData(jsonData);
-    } catch (err) {
-      console.error('Error fetching VM placement data:', err);
+  const fetchData = useCallback(async (): Promise<VMPlacementData> => {
+    const response = await fetch(ENDPOINT);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch data: ${response.status}`);
     }
-  };
-
-  useEffect(() => {
-    fetchData();
-    const interval = setInterval(fetchData, REFRESH_INTERVAL);
-    return () => clearInterval(interval);
+    const jsonData = await response.json();
+    console.log('SummaryStats - Raw API response:', jsonData);
+    return jsonData;
   }, []);
 
+  const { data, pollingInterval } = useSmartPolling<VMPlacementData>(
+    fetchData,
+    null,
+    5000, // min interval: 5 seconds
+    30000 // max interval: 30 seconds
+  );
+
   const stats = React.useMemo(() => {
-    if (!data?.physical_machines) {
+    if (!data) {
       return {
         activeComputes: 0,
         totalComputes: 0,
@@ -57,30 +36,28 @@ const SummaryStats: React.FC = () => {
       };
     }
 
-    const activeComputes = data.physical_machines.filter(
-      pm => pm.power_consumption > 0 || pm.vms.active.length > 0
-    ).length;
+    // Count from vm_placement object
+    let totalPMs = Object.keys(data.vm_placement).length;
+    let activePMs = Object.values(data.vm_placement).filter(pm => pm.power > 0).length;
+    let totalActiveVMs = 0;
+    let totalInactiveVMs = 0;
 
-    const totalActiveVMs = data.physical_machines.reduce(
-      (sum, pm) => sum + pm.vms.active.length,
-      0
-    );
-
-    const totalInactiveVMs = data.physical_machines.reduce(
-      (sum, pm) => sum + pm.vms.inactive.length,
-      0
-    );
+    Object.values(data.vm_placement).forEach(pm => {
+      const vms = Object.values(pm.vms);
+      totalActiveVMs += vms.filter(vm => vm.state === 'active').length;
+      totalInactiveVMs += vms.filter(vm => vm.state === 'inactive').length;
+    });
 
     return {
-      activeComputes,
-      totalComputes: data.physical_machines.length,
+      activeComputes: activePMs,
+      totalComputes: totalPMs,
       activeVMs: totalActiveVMs,
       inactiveVMs: totalInactiveVMs,
     };
   }, [data]);
 
   return (
-    <Grid item xs={12}>
+    <Grid item xs={12} md={8}>
       <Paper 
         sx={{ 
           p: 2,
@@ -112,23 +89,9 @@ const SummaryStats: React.FC = () => {
             <Typography variant="body2" color="textSecondary" sx={{ mb: 0.5 }}>
               Virtual Machines
             </Typography>
-            <Box sx={{ display: 'flex', alignItems: 'baseline', gap: 0.5 }}>
-              <Typography variant="h6" sx={{ lineHeight: 1, fontWeight: 500 }}>
-                {stats.activeVMs}
-              </Typography>
-              <Typography variant="body2" color="success.main" sx={{ fontWeight: 500 }}>
-                active
-              </Typography>
-              <Typography variant="body2" color="text.secondary">
-                /
-              </Typography>
-              <Typography variant="h6" sx={{ lineHeight: 1, fontWeight: 500 }}>
-                {stats.activeVMs + stats.inactiveVMs}
-              </Typography>
-              <Typography variant="body2" color="text.secondary" sx={{ fontWeight: 500 }}>
-                total
-              </Typography>
-            </Box>
+            <Typography variant="h6" sx={{ lineHeight: 1, fontWeight: 500 }}>
+              {stats.activeVMs}/{stats.activeVMs + stats.inactiveVMs}
+            </Typography>
           </Box>
         </Box>
       </Paper>