From 84064ea1c15055f8ead3f9fc8125fe9a4e14a48c Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Thu, 4 Apr 2024 13:02:49 -0600
Subject: [PATCH] Cleanup rendering

---
 web/src/views/system/CameraMetrics.tsx  | 57 ++++++++++++++-----------
 web/src/views/system/GeneralMetrics.tsx | 38 +++++++++--------
 2 files changed, 54 insertions(+), 41 deletions(-)

diff --git a/web/src/views/system/CameraMetrics.tsx b/web/src/views/system/CameraMetrics.tsx
index 3364ebe34..295c90e56 100644
--- a/web/src/views/system/CameraMetrics.tsx
+++ b/web/src/views/system/CameraMetrics.tsx
@@ -1,5 +1,6 @@
 import { useFrigateStats } from "@/api/ws";
 import { CameraLineGraph } from "@/components/graph/SystemGraph";
+import { Skeleton } from "@/components/ui/skeleton";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { FrigateStats } from "@/types/stats";
 import { useEffect, useMemo, useState } from "react";
@@ -148,36 +149,44 @@ export default function CameraMetrics({
   return (
     <div className="size-full mt-4 flex flex-col overflow-y-auto">
       <div className="mb-5">Cameras</div>
-      <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
         {config &&
           Object.values(config.cameras).map((camera) => {
             if (camera.enabled) {
               return (
-                <div key={camera.name} className="grid grid-cols-2 gap-2">
-                  <div className="p-2.5 bg-primary rounded-2xl flex-col">
-                    <div className="mb-5 capitalize">
-                      {camera.name.replaceAll("_", " ")} CPU
+                <div key={camera.name} className="grid sm:grid-cols-2 gap-2">
+                  {Object.keys(cameraCpuSeries).includes(camera.name) ? (
+                    <div className="p-2.5 bg-primary rounded-2xl flex-col">
+                      <div className="mb-5 capitalize">
+                        {camera.name.replaceAll("_", " ")} CPU
+                      </div>
+                      <CameraLineGraph
+                        graphId={`${camera.name}-cpu`}
+                        unit="%"
+                        dataLabels={["ffmpeg", "capture", "detect"]}
+                        updateTimes={updateTimes}
+                        data={Object.values(cameraCpuSeries[camera.name] || {})}
+                      />
                     </div>
-                    <CameraLineGraph
-                      graphId={`${camera.name}-cpu`}
-                      unit="%"
-                      dataLabels={["ffmpeg", "capture", "detect"]}
-                      updateTimes={updateTimes}
-                      data={Object.values(cameraCpuSeries[camera.name] || {})}
-                    />
-                  </div>
-                  <div className="p-2.5 bg-primary rounded-2xl flex-col">
-                    <div className="mb-5 capitalize">
-                      {camera.name.replaceAll("_", " ")} DPS
+                  ) : (
+                    <Skeleton className="size-full aspect-video" />
+                  )}
+                  {Object.keys(cameraFpsSeries).includes(camera.name) ? (
+                    <div className="p-2.5 bg-primary rounded-2xl flex-col">
+                      <div className="mb-5 capitalize">
+                        {camera.name.replaceAll("_", " ")} DPS
+                      </div>
+                      <CameraLineGraph
+                        graphId={`${camera.name}-dps`}
+                        unit=" DPS"
+                        dataLabels={["detect", "skipped"]}
+                        updateTimes={updateTimes}
+                        data={Object.values(cameraFpsSeries[camera.name] || {})}
+                      />
                     </div>
-                    <CameraLineGraph
-                      graphId={`${camera.name}-dps`}
-                      unit=" DPS"
-                      dataLabels={["detect", "skipped"]}
-                      updateTimes={updateTimes}
-                      data={Object.values(cameraFpsSeries[camera.name] || {})}
-                    />
-                  </div>
+                  ) : (
+                    <Skeleton className="size-full aspect-video" />
+                  )}
                 </div>
               );
             }
diff --git a/web/src/views/system/GeneralMetrics.tsx b/web/src/views/system/GeneralMetrics.tsx
index ba486b2e6..60312a377 100644
--- a/web/src/views/system/GeneralMetrics.tsx
+++ b/web/src/views/system/GeneralMetrics.tsx
@@ -61,6 +61,16 @@ export default function GeneralMetrics({
     }
   }, [initialStats, updatedStats, statsHistory, lastUpdated, setLastUpdated]);
 
+  const canGetGpuInfo = useMemo(
+    () =>
+      statsHistory.length > 0 &&
+      Object.keys(statsHistory[0]?.gpu_usages ?? {}).filter(
+        (key) =>
+          key == "amd-vaapi" || key == "intel-vaapi" || key == "intel-qsv",
+      ).length > 0,
+    [statsHistory],
+  );
+
   // timestamps
 
   const updateTimes = useMemo(
@@ -274,7 +284,7 @@ export default function GeneralMetrics({
           Detectors
         </div>
         <div className="w-full mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
-          {detInferenceTimeSeries.length != 0 ? (
+          {statsHistory.length != 0 ? (
             <div className="p-2.5 bg-primary rounded-2xl flex-col">
               <div className="mb-5">Detector Inference Speed</div>
               {detInferenceTimeSeries.map((series) => (
@@ -336,22 +346,16 @@ export default function GeneralMetrics({
               <div className="text-muted-foreground text-sm font-medium">
                 GPUs
               </div>
-              {statsHistory.length > 0 &&
-                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>
-                )}
+              {canGetGpuInfo && (
+                <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">
               {statsHistory.length != 0 ? (