Storage Graphs (#10826)

* Rename graph

* Use separate view for general metrics

* Get storage graph formatted

* Show camera storage usage

* Cleanup ticks

* Remove storage link

* Add icons and frigate logo

* Undo

* Use optimistic state for metrics toggle

* Use optimistic state and skeletons for loading

web/src/pages/System.tsx

@@ -1,19 +1,15 @@
 import useSWR from "swr";
 import { FrigateStats } from "@/types/stats";
-import { useEffect, useMemo, useState } from "react";
-import SystemGraph from "@/components/graph/SystemGraph";
-import { useFrigateStats } from "@/api/ws";
+import { useState } from "react";
 import TimeAgo from "@/components/dynamic/TimeAgo";
-import {
-  DetectorCpuThreshold,
-  DetectorMemThreshold,
-  GPUMemThreshold,
-  GPUUsageThreshold,
-  InferenceThreshold,
-} from "@/types/graph";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
-import { Button } from "@/components/ui/button";
-import VainfoDialog from "@/components/overlay/VainfoDialog";
+import { isDesktop, isMobile } from "react-device-detect";
+import GeneralMetrics from "@/views/system/GeneralMetrics";
+import StorageMetrics from "@/views/system/StorageMetrics";
+import { LuActivity, LuHardDrive } from "react-icons/lu";
+import { FaVideo } from "react-icons/fa";
+import Logo from "@/components/Logo";
+import useOptimisticState from "@/hooks/use-optimistic-state";
 
 const metrics = ["general", "storage", "cameras"] as const;
 type SystemMetric = (typeof metrics)[number];
@@ -22,6 +18,7 @@ function System() {
   // stats page
 
   const [page, setPage] = useState<SystemMetric>("general");
+  const [pageToggle, setPageToggle] = useOptimisticState(page, setPage, 100);
   const [lastUpdated, setLastUpdated] = useState<number>(Date.now() / 1000);
 
   // stats collection
@@ -32,26 +29,32 @@ function System() {
 
   return (
     <div className="size-full p-2 flex flex-col">
-      <div className="w-full h-8 flex justify-between items-center">
+      <div className="w-full h-11 relative flex justify-between items-center">
+        {isMobile && (
+          <Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />
+        )}
         <ToggleGroup
           className="*:px-3 *:py-4 *:rounded-md"
           type="single"
           size="sm"
-          value={page}
+          value={pageToggle}
           onValueChange={(value: SystemMetric) => {
             if (value) {
-              setPage(value);
+              setPageToggle(value);
             }
           }} // don't allow the severity to be unselected
         >
           {Object.values(metrics).map((item) => (
             <ToggleGroupItem
               key={item}
-              className={`flex items-center justify-between gap-2 ${page == item ? "" : "text-gray-500"}`}
+              className={`flex items-center justify-between gap-2 ${pageToggle == item ? "" : "*:text-gray-500"}`}
               value={item}
               aria-label={`Select ${item}`}
             >
-              <div className="capitalize">{item}</div>
+              {item == "general" && <LuActivity className="size-4" />}
+              {item == "storage" && <LuHardDrive className="size-4" />}
+              {item == "cameras" && <FaVideo className="size-4" />}
+              {isDesktop && <div className="capitalize">{item}</div>}
             </ToggleGroupItem>
           ))}
         </ToggleGroup>
@@ -78,6 +81,7 @@ function System() {
           setLastUpdated={setLastUpdated}
         />
       )}
+      {page == "storage" && <StorageMetrics setLastUpdated={setLastUpdated} />}
     </div>
   );
 }
@@ -182,13 +186,13 @@ export default System;
             if (camera.enabled) {
               return (
                 <div key={camera.name} className="grid grid-cols-2">
-                  <SystemGraph
+                  <ThresholdBarGraph
                     graphId={`${camera.name}-cpu`}
                     title={`${camera.name.replaceAll("_", " ")} CPU`}
                     unit="%"
                     data={Object.values(cameraCpuSeries[camera.name] || {})}
                   />
-                  <SystemGraph
+                  <ThresholdBarGraph
                     graphId={`${camera.name}-fps`}
                     title={`${camera.name.replaceAll("_", " ")} FPS`}
                     unit=""
@@ -202,401 +206,3 @@ export default System;
           })}
       </div>
  */
-
-type GeneralMetricsProps = {
-  lastUpdated: number;
-  setLastUpdated: (last: number) => void;
-};
-function GeneralMetrics({ lastUpdated, setLastUpdated }: GeneralMetricsProps) {
-  // extra info
-
-  const [showVainfo, setShowVainfo] = useState(false);
-
-  // stats
-
-  const { data: initialStats } = useSWR<FrigateStats[]>(
-    [
-      "stats/history",
-      { keys: "cpu_usages,detectors,gpu_usages,processes,service" },
-    ],
-    {
-      revalidateOnFocus: false,
-    },
-  );
-
-  const [statsHistory, setStatsHistory] = useState<FrigateStats[]>([]);
-  const { payload: updatedStats } = useFrigateStats();
-
-  useEffect(() => {
-    if (initialStats == undefined || initialStats.length == 0) {
-      return;
-    }
-
-    if (statsHistory.length == 0) {
-      setStatsHistory(initialStats);
-      return;
-    }
-
-    if (!updatedStats) {
-      return;
-    }
-
-    if (updatedStats.service.last_updated > lastUpdated) {
-      setStatsHistory([...statsHistory, updatedStats]);
-      setLastUpdated(Date.now() / 1000);
-    }
-  }, [initialStats, updatedStats, statsHistory, lastUpdated, setLastUpdated]);
-
-  // timestamps
-
-  const updateTimes = useMemo(
-    () => statsHistory.map((stats) => stats.service.last_updated),
-    [statsHistory],
-  );
-
-  // detectors stats
-
-  const detInferenceTimeSeries = useMemo(() => {
-    if (!statsHistory) {
-      return [];
-    }
-
-    const series: {
-      [key: string]: { name: string; data: { x: number; y: number }[] };
-    } = {};
-
-    statsHistory.forEach((stats, statsIdx) => {
-      if (!stats) {
-        return;
-      }
-
-      Object.entries(stats.detectors).forEach(([key, stats]) => {
-        if (!(key in series)) {
-          series[key] = { name: key, data: [] };
-        }
-
-        series[key].data.push({ x: statsIdx, y: stats.inference_speed });
-      });
-    });
-    return Object.values(series);
-  }, [statsHistory]);
-
-  const detCpuSeries = useMemo(() => {
-    if (!statsHistory) {
-      return [];
-    }
-
-    const series: {
-      [key: string]: { name: string; data: { x: number; y: string }[] };
-    } = {};
-
-    statsHistory.forEach((stats, statsIdx) => {
-      if (!stats) {
-        return;
-      }
-
-      Object.entries(stats.detectors).forEach(([key, detStats]) => {
-        if (!(key in series)) {
-          series[key] = { name: key, data: [] };
-        }
-
-        series[key].data.push({
-          x: statsIdx,
-          y: stats.cpu_usages[detStats.pid.toString()].cpu,
-        });
-      });
-    });
-    return Object.values(series);
-  }, [statsHistory]);
-
-  const detMemSeries = useMemo(() => {
-    if (!statsHistory) {
-      return [];
-    }
-
-    const series: {
-      [key: string]: { name: string; data: { x: number; y: string }[] };
-    } = {};
-
-    statsHistory.forEach((stats, statsIdx) => {
-      if (!stats) {
-        return;
-      }
-
-      Object.entries(stats.detectors).forEach(([key, detStats]) => {
-        if (!(key in series)) {
-          series[key] = { name: key, data: [] };
-        }
-
-        series[key].data.push({
-          x: statsIdx,
-          y: stats.cpu_usages[detStats.pid.toString()].mem,
-        });
-      });
-    });
-    return Object.values(series);
-  }, [statsHistory]);
-
-  // gpu stats
-
-  const gpuSeries = useMemo(() => {
-    if (!statsHistory) {
-      return [];
-    }
-
-    const series: {
-      [key: string]: { name: string; data: { x: number; y: string }[] };
-    } = {};
-
-    statsHistory.forEach((stats, statsIdx) => {
-      if (!stats) {
-        return;
-      }
-
-      Object.entries(stats.gpu_usages || []).forEach(([key, stats]) => {
-        if (!(key in series)) {
-          series[key] = { name: key, data: [] };
-        }
-
-        series[key].data.push({ x: statsIdx, y: stats.gpu });
-      });
-    });
-    return Object.keys(series).length > 0 ? Object.values(series) : [];
-  }, [statsHistory]);
-
-  const gpuMemSeries = useMemo(() => {
-    if (!statsHistory) {
-      return [];
-    }
-
-    const series: {
-      [key: string]: { name: string; data: { x: number; y: string }[] };
-    } = {};
-
-    statsHistory.forEach((stats, statsIdx) => {
-      if (!stats) {
-        return;
-      }
-
-      Object.entries(stats.gpu_usages || {}).forEach(([key, stats]) => {
-        if (!(key in series)) {
-          series[key] = { name: key, data: [] };
-        }
-
-        series[key].data.push({ x: statsIdx, y: stats.mem });
-      });
-    });
-    return Object.values(series);
-  }, [statsHistory]);
-
-  // other processes stats
-
-  const otherProcessCpuSeries = useMemo(() => {
-    if (!statsHistory) {
-      return [];
-    }
-
-    const series: {
-      [key: string]: { name: string; data: { x: number; y: string }[] };
-    } = {};
-
-    statsHistory.forEach((stats, statsIdx) => {
-      if (!stats) {
-        return;
-      }
-
-      Object.entries(stats.processes).forEach(([key, procStats]) => {
-        if (procStats.pid.toString() in stats.cpu_usages) {
-          if (!(key in series)) {
-            series[key] = { name: key, data: [] };
-          }
-
-          series[key].data.push({
-            x: statsIdx,
-            y: stats.cpu_usages[procStats.pid.toString()].cpu,
-          });
-        }
-      });
-    });
-    return Object.keys(series).length > 0 ? Object.values(series) : [];
-  }, [statsHistory]);
-
-  const otherProcessMemSeries = useMemo(() => {
-    if (!statsHistory) {
-      return [];
-    }
-
-    const series: {
-      [key: string]: { name: string; data: { x: number; y: string }[] };
-    } = {};
-
-    statsHistory.forEach((stats, statsIdx) => {
-      if (!stats) {
-        return;
-      }
-
-      Object.entries(stats.processes).forEach(([key, procStats]) => {
-        if (procStats.pid.toString() in stats.cpu_usages) {
-          if (!(key in series)) {
-            series[key] = { name: key, data: [] };
-          }
-
-          series[key].data.push({
-            x: statsIdx,
-            y: stats.cpu_usages[procStats.pid.toString()].mem,
-          });
-        }
-      });
-    });
-    return Object.values(series);
-  }, [statsHistory]);
-
-  if (statsHistory.length == 0) {
-    return;
-  }
-
-  return (
-    <>
-      <VainfoDialog showVainfo={showVainfo} setShowVainfo={setShowVainfo} />
-
-      <div className="size-full mt-4 flex flex-col overflow-y-auto">
-        <div className="text-muted-foreground text-sm font-medium">
-          Detectors
-        </div>
-        <div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
-          <div className="p-2.5 bg-primary rounded-2xl flex-col">
-            <div className="mb-5">Detector Inference Speed</div>
-            {detInferenceTimeSeries.map((series) => (
-              <SystemGraph
-                key={series.name}
-                graphId={`${series.name}-inference`}
-                name={series.name}
-                unit="ms"
-                threshold={InferenceThreshold}
-                updateTimes={updateTimes}
-                data={[series]}
-              />
-            ))}
-          </div>
-          <div className="p-2.5 bg-primary rounded-2xl flex-col">
-            <div className="mb-5">Detector CPU Usage</div>
-            {detCpuSeries.map((series) => (
-              <SystemGraph
-                key={series.name}
-                graphId={`${series.name}-cpu`}
-                unit="%"
-                name={series.name}
-                threshold={DetectorCpuThreshold}
-                updateTimes={updateTimes}
-                data={[series]}
-              />
-            ))}
-          </div>
-          <div className="p-2.5 bg-primary rounded-2xl flex-col">
-            <div className="mb-5">Detector Memory Usage</div>
-            {detMemSeries.map((series) => (
-              <SystemGraph
-                key={series.name}
-                graphId={`${series.name}-mem`}
-                unit="%"
-                name={series.name}
-                threshold={DetectorMemThreshold}
-                updateTimes={updateTimes}
-                data={[series]}
-              />
-            ))}
-          </div>
-        </div>
-
-        {statsHistory.length > 0 && statsHistory[0].gpu_usages && (
-          <>
-            <div className="mt-4 flex items-center justify-between">
-              <div className="text-muted-foreground text-sm font-medium">
-                GPUs
-              </div>
-              {Object.keys(statsHistory[0].gpu_usages).filter(
-                (key) =>
-                  key == "amd-vaapi" ||
-                  key == "intel-vaapi" ||
-                  key == "intel-qsv",
-              ).length > 0 && (
-                <Button
-                  className="cursor-pointer"
-                  variant="secondary"
-                  size="sm"
-                  onClick={() => setShowVainfo(true)}
-                >
-                  Hardware Info
-                </Button>
-              )}
-            </div>
-            <div className=" mt-4 grid grid-cols-1 sm:grid-cols-2 gap-2">
-              <div className="p-2.5 bg-primary rounded-2xl flex-col">
-                <div className="mb-5">GPU Usage</div>
-                {gpuSeries.map((series) => (
-                  <SystemGraph
-                    key={series.name}
-                    graphId={`${series.name}-gpu`}
-                    name={series.name}
-                    unit=""
-                    threshold={GPUUsageThreshold}
-                    updateTimes={updateTimes}
-                    data={[series]}
-                  />
-                ))}
-              </div>
-              <div className="p-2.5 bg-primary rounded-2xl flex-col">
-                <div className="mb-5">GPU Memory</div>
-                {gpuMemSeries.map((series) => (
-                  <SystemGraph
-                    key={series.name}
-                    graphId={`${series.name}-mem`}
-                    unit=""
-                    name={series.name}
-                    threshold={GPUMemThreshold}
-                    updateTimes={updateTimes}
-                    data={[series]}
-                  />
-                ))}
-              </div>
-            </div>
-          </>
-        )}
-
-        <div className="mt-4 text-muted-foreground text-sm font-medium">
-          Other Processes
-        </div>
-        <div className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-2">
-          <div className="p-2.5 bg-primary rounded-2xl flex-col">
-            <div className="mb-5">Process CPU Usage</div>
-            {otherProcessCpuSeries.map((series) => (
-              <SystemGraph
-                key={series.name}
-                graphId={`${series.name}-cpu`}
-                name={series.name.replaceAll("_", " ")}
-                unit="%"
-                threshold={DetectorCpuThreshold}
-                updateTimes={updateTimes}
-                data={[series]}
-              />
-            ))}
-          </div>
-          <div className="p-2.5 bg-primary rounded-2xl flex-col">
-            <div className="mb-5">Process Memory Usage</div>
-            {otherProcessMemSeries.map((series) => (
-              <SystemGraph
-                key={series.name}
-                graphId={`${series.name}-mem`}
-                unit="%"
-                name={series.name.replaceAll("_", " ")}
-                threshold={DetectorMemThreshold}
-                updateTimes={updateTimes}
-                data={[series]}
-              />
-            ))}
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}