docker, infra, and pagespeed

client/src/pages/docker/DockerMonitors.tsx

@@ -61,6 +61,7 @@ const DockerMonitorsPage = () => {
     }
   );
   const monitors: IMonitor[] = response?.data?.monitors ?? ([] as IMonitor[]);
+  const checksMap = response?.data?.checksMap || {};
   const count = response?.data?.count || 0;
   const upCount = response?.data?.upCount || 0;
   const downCount = response?.data?.downCount || 0;
@@ -107,6 +108,7 @@ const DockerMonitorsPage = () => {
       </Stack>
       <DockerMonitorsTable
         monitors={monitors}
+        checksMap={checksMap}
         refetch={refetch}
         setSelectedMonitor={setSelectedMonitor}
         count={count}

client/src/pages/docker/DockerMonitorsTable.tsx

@@ -1,15 +1,19 @@
 import Typography from "@mui/material/Typography";
 import { Table, Pagination, StatusLabel } from "@/components/design-elements";
 import { ActionsMenu } from "@/components/actions-menu";
+
 import { usePatch } from "@/hooks/UseApi";
 import { useNavigate } from "react-router-dom";
+
 import { useTheme } from "@mui/material/styles";
+import type { ICheck } from "@/types/check";
 import type { Header } from "@/components/design-elements/Table";
 import type { IMonitor } from "@/types/monitor";
 import { useTranslation } from "react-i18next";
 
 export const DockerMonitorsTable = ({
   monitors,
+  checksMap,
   count,
   page,
   setPage,
@@ -19,6 +23,7 @@ export const DockerMonitorsTable = ({
   setSelectedMonitor,
 }: {
   monitors: IMonitor[];
+  checksMap: Record<string, ICheck[]>;
   count: number;
   page: number;
   setPage: (page: number) => void;
@@ -119,7 +124,7 @@ export const DockerMonitorsTable = ({
       ),
       render: (row) => {
         const containerCount = (
-          row.latestChecks?.[0]?.dockerContainers || []
+          checksMap[row._id]?.[0]?.dockerContainers || []
         ).filter((c: any) => c?.running).length;
         return containerCount;
       },

client/src/pages/infrastructure/InfraMonitors.tsx

@@ -61,6 +61,7 @@ const InfraMonitorsPage = () => {
     }
   );
   const monitors: IMonitor[] = response?.data?.monitors ?? ([] as IMonitor[]);
+  const checksMap = response?.data?.checksMap || {};
   const count = response?.data?.count || 0;
   const upCount = response?.data?.upCount || 0;
   const downCount = response?.data?.downCount || 0;
@@ -107,6 +108,7 @@ const InfraMonitorsPage = () => {
       </Stack>
       <InfraMonitorsTable
         monitors={monitors}
+        checksMap={checksMap}
         refetch={refetch}
         setSelectedMonitor={setSelectedMonitor}
         sortField={sortField}

client/src/pages/infrastructure/InfraMonitorsTable.tsx

@@ -12,11 +12,13 @@ import { useTheme } from "@mui/material/styles";
 import { useNavigate } from "react-router-dom";
 import { usePatch } from "@/hooks/UseApi";
 
+import type { ICheck } from "@/types/check";
 import type { IMonitor } from "@/types/monitor";
 import type { ActionMenuItem } from "@/components/actions-menu";
 
 export const InfraMonitorsTable = ({
   monitors,
+  checksMap,
   refetch,
   setSelectedMonitor,
   sortField,
@@ -30,6 +32,7 @@ export const InfraMonitorsTable = ({
   setRowsPerPage,
 }: {
   monitors: IMonitor[];
+  checksMap: Record<string, ICheck[]>;
   refetch: Function;
   setSelectedMonitor: Function;
   sortField: string;
@@ -194,7 +197,9 @@ export const InfraMonitorsTable = ({
         ),
         render: (row) => {
           return (
-            <StatusLabel status={(row.status as any) ?? ("initializing" as any)} />
+            <StatusLabel
+              status={(row.status as any) ?? ("initializing" as any)}
+            />
           );
         },
       },
@@ -203,7 +208,7 @@ export const InfraMonitorsTable = ({
         content: t("monitors.infrastructure.table.headers.cpu"),
         render: (row) => {
           const cpuUsage =
-            (row.latestChecks?.[0]?.system?.cpu?.usage_percent || 0) * 100;
+            (checksMap[row._id]?.[0]?.system?.cpu?.usage_percent || 0) * 100;
           return <Gauge progress={cpuUsage} />;
         },
       },
@@ -212,7 +217,7 @@ export const InfraMonitorsTable = ({
         content: t("monitors.infrastructure.table.headers.memory"),
         render: (row) => {
           const memoryUsage =
-            (row.latestChecks?.[0]?.system?.memory?.usage_percent || 0) * 100;
+            (checksMap[row._id]?.[0]?.system?.memory?.usage_percent || 0) * 100;
           return <Gauge progress={memoryUsage} />;
         },
       },
@@ -220,11 +225,11 @@ export const InfraMonitorsTable = ({
         id: "disk",
         content: t("monitors.infrastructure.table.headers.disk"),
         render: (row) => {
-          const totalDiskUsage = row.latestChecks?.[0]?.system?.disk?.reduce(
+          const totalDiskUsage = checksMap[row._id]?.[0]?.system?.disk?.reduce(
             (acc, disk) => acc + disk.usage_percent,
             0
           );
-          const diskCount = row.latestChecks?.[0]?.system?.disk?.length || 1;
+          const diskCount = checksMap[row._id]?.[0]?.system?.disk?.length || 1;
           const diskUsage = ((totalDiskUsage || 0) / diskCount) * 100;
           return <Gauge progress={diskUsage} />;
         },

client/src/pages/pagespeed/PageSpeedMonitorTable.tsx

@@ -13,11 +13,13 @@ import { useTheme } from "@mui/material/styles";
 import { useNavigate } from "react-router-dom";
 import { usePatch } from "@/hooks/UseApi";
 
+import type { ICheck } from "@/types/check";
 import type { IMonitor } from "@/types/monitor";
 import type { ActionMenuItem } from "@/components/actions-menu";
 
 export const PageSpeedMonitorTable = ({
   monitors,
+  checksMap,
   refetch,
   setSelectedMonitor,
   sortField,
@@ -31,6 +33,7 @@ export const PageSpeedMonitorTable = ({
   setRowsPerPage,
 }: {
   monitors: IMonitor[];
+  checksMap: Record<string, ICheck[]>;
   refetch: Function;
   setSelectedMonitor: Function;
   sortField: string;
@@ -204,7 +207,7 @@ export const PageSpeedMonitorTable = ({
           return (
             <Stack alignItems={"center"}>
               <HistogramPageSpeed
-                checks={row.latestChecks ?? []}
+                checks={checksMap[row._id] ?? []}
                 status={row.status}
               />
             </Stack>

client/src/pages/pagespeed/PageSpeedMonitors.tsx

@@ -62,6 +62,7 @@ const PageSpeedMonitorsPage = () => {
     }
   );
   const monitors: IMonitor[] = response?.data?.monitors ?? ([] as IMonitor[]);
+  const checksMap = response?.data?.checksMap || {};
   const count = response?.data?.count || 0;
   const upCount = response?.data?.upCount || 0;
   const downCount = response?.data?.downCount || 0;
@@ -108,6 +109,7 @@ const PageSpeedMonitorsPage = () => {
       </Stack>
       <PageSpeedMonitorTable
         monitors={monitors}
+        checksMap={checksMap}
         refetch={refetch}
         setSelectedMonitor={setSelectedMonitor}
         sortField={sortField}