Small fix in monitoring and useAsync

src/app/monitoring/page.tsx

@@ -29,20 +29,13 @@ const networkChartConfig = {
 } satisfies ChartConfig;
 
 export default function MonitoringPage() {
-  const [data, setData] = useState<
-    { time: string; cpu: number; memory: number; in: number; out: number }[]
-  >([]);
   const isMobile = useIsMobile();
-  const [liveData, setLiveData] = useState<{
+
-    cpuUsage: number;
+  // Metrics polling every 30 seconds
-    ramUsage: number;
+  const { value: metrics } = useAsyncInterval([], getMetrics, 30000, []);
-  }>();
-  const [containerStats, setContainerStats] = useState<
-    (SimpleStats & { name: string })[]
-  >([]);
 
   // Live nodes polling every 3 seconds
-  const { value: liveNodes } = useAsyncInterval(
+  const { value: liveData } = useAsyncInterval(
     { cpuUsage: 0, ramUsage: 0 },
     async () => {
       const nodes = await getLiveNodes();
@@ -55,27 +48,9 @@ export default function MonitoringPage() {
     []
   );
 
-  // Update liveData state
+  // Container stats
-  useEffect(() => {
+  const { value: containerStats } = useAsync(
-    setLiveData(liveNodes);
+    [],
-  }, [liveNodes]);
-
-  // Metrics polling every 30 seconds
-  const { value: metrics } = useAsyncInterval(
-    [] as typeof data,
-    getMetrics,
-    30000,
-    []
-  );
-
-  // Update data state
-  useEffect(() => {
-    setData(metrics);
-  }, [metrics]);
-
-  // Container stats fetched once
-  const { value: containers } = useAsync(
-    [] as typeof containerStats,
     async () => {
       const nodes = await getNodes();
       const dockerNodes = await getDocker(nodes);
@@ -95,10 +70,6 @@ export default function MonitoringPage() {
     []
   );
 
-  useEffect(() => {
-    setContainerStats(containers);
-  }, [containers]);
-
   return (
     <DashboardLayout
       title="Monitoring"
@@ -169,13 +140,13 @@ export default function MonitoringPage() {
       <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
         <GradientAreaChart
           title="CPU Usage"
-          data={data}
+          data={metrics}
           config={cpuChartConfig}
           max={100}
         />
         <GradientAreaChart
           title="Memory Usage"
-          data={data}
+          data={metrics}
           config={memoryChartConfig}
           max={100}
         />
@@ -185,7 +156,7 @@ export default function MonitoringPage() {
       <div className="mb-6">
         <GradientAreaChart
           title="Network I/O"
-          data={data}
+          data={metrics}
           config={networkChartConfig}
         />
       </div>

src/hooks/use-async.ts

@@ -44,7 +44,7 @@ export function useAsyncInterval<T>(
   useEffect(() => {
     let isMounted = true;
 
-    const iid = setInterval(() => {
+    const run = () => {
       setLoading(true);
       asyncFunction()
         .then((result) => {
@@ -56,7 +56,11 @@ export function useAsyncInterval<T>(
         .finally(() => {
           if (isMounted) setLoading(false);
         });
-    }, interval);
+    };
+
+    const iid = setInterval(run, interval);
+
+    run();
 
     return () => {
       isMounted = false;