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/hooks.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import { VMDetails, GainBeforeData, MigrationAdviceData } from './types';
 import { config } from '../../config/env';
 
@@ -15,6 +15,76 @@ interface GainAfterData {
   val_difference: number;
 }
 
+// Smart polling hook
+export const useSmartPolling = <T>(
+  fetchFunction: () => Promise<T>,
+  initialState: T | null,
+  minInterval: number = 5000,
+  maxInterval: number = 30000
+) => {
+  const [data, setData] = useState<T | null>(initialState);
+  const [pollingInterval, setPollingInterval] = useState(minInterval);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isInitialLoad, setIsInitialLoad] = useState(true);
+  const lastDataRef = useRef<string>('');
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  const poll = useCallback(async () => {
+    try {
+      if (isInitialLoad) {
+        setIsLoading(true);
+      }
+      const newData = await fetchFunction();
+      const newDataString = JSON.stringify(newData);
+      
+      // Only update if data actually changed
+      if (lastDataRef.current !== newDataString) {
+        console.log('Data changed, resetting polling interval to', minInterval, 'ms');
+        setData(newData);
+        setPollingInterval(minInterval);
+        lastDataRef.current = newDataString;
+      } else {
+        // Gradually increase interval when data is stable
+        setPollingInterval(prevInterval => {
+          const newInterval = Math.min(prevInterval * 1.5, maxInterval);
+          if (newInterval !== prevInterval) {
+            console.log('Data stable, increasing polling interval to', newInterval, 'ms');
+          }
+          return newInterval;
+        });
+      }
+    } catch (error) {
+      console.error('Error in smart polling:', error);
+      // On error, keep current interval
+    } finally {
+      setIsLoading(false);
+      setIsInitialLoad(false);
+    }
+  }, [fetchFunction, minInterval, maxInterval, isInitialLoad]);
+
+  useEffect(() => {
+    // Initial fetch
+    poll();
+
+    // Clear any existing interval
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+    }
+
+    // Set new interval
+    intervalRef.current = setInterval(poll, pollingInterval);
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, [poll, pollingInterval]);
+
+  return { data, isLoading, pollingInterval };
+};
+
 export const useMigrationData = () => {
   const [gainBeforeData, setGainBeforeData] = useState<GainBeforeData | null>(null);
   const [migrationAdviceData, setMigrationAdviceData] = useState<MigrationAdviceData | null>(null);
@@ -125,7 +195,7 @@ export const useMonitoringData = () => {
 };
 
 export const useVMDetails = () => {
-  const [vmDetails, setVmDetails] = useState<Record<string, VMDetails>>({});
+  const [vmDetails, setVmDetails] = useState<VMDetails | null>(null);
   const [expandedVMs, setExpandedVMs] = useState<Record<string, boolean>>({});
 
   const toggleVMDetails = (vmId: string) => {
@@ -135,28 +205,21 @@ export const useVMDetails = () => {
     }));
   };
 
-  useEffect(() => {
-    const fetchVMDetails = async () => {
-      try {
-        const response = await fetch(`${API_BASE_URL}/prom/vm_mac_details`);
-        if (!response.ok) {
-          throw new Error('Failed to fetch VM details');
-        }
-        const data = await response.json();
-        if (data?.res) {
-          setVmDetails(data.res);
-        }
-      } catch (error) {
-        console.error('Error fetching VM details:', error);
+  const fetchVMDetails = async (vmName: string) => {
+    try {
+      const response = await fetch(`${API_BASE_URL}/prom/vm_details/${vmName}`);
+      if (!response.ok) {
+        throw new Error('Failed to fetch VM details');
       }
-    };
+      const data = await response.json();
+      setVmDetails(data);
+    } catch (error) {
+      console.error('Error fetching VM details:', error);
+      setVmDetails(null);
+    }
+  };
 
-    fetchVMDetails();
-    const interval = setInterval(fetchVMDetails, REFRESH_INTERVAL);
-    return () => clearInterval(interval);
-  }, []);
-
-  return { vmDetails, expandedVMs, toggleVMDetails };
+  return { vmDetails, expandedVMs, toggleVMDetails, fetchVMDetails };
 };
 
 export const useGainAfterData = () => {
@@ -167,19 +230,18 @@ export const useGainAfterData = () => {
     try {
       setIsLoading(true);
       const response = await fetch(`${API_BASE_URL}/prom/get_chart_data/gain_after`);
-      
       if (!response.ok) {
-        throw new Error('Failed to fetch gain-after data');
+        throw new Error('Failed to fetch gain after data');
       }
-
       const data = await response.json();
       setGainAfterData(data);
     } catch (error) {
-      console.error('Error fetching gain-after data:', error);
+      console.error('Error fetching gain after data:', error);
+      setGainAfterData(null);
     } finally {
       setIsLoading(false);
     }
   };
 
-  return { gainAfterData, isLoading, fetchGainAfterData };
+  return { gainAfterData, isLoading: isLoading, fetchGainAfterData };
 };