UI Improvements (#10972)

* Update web deps

* Fix tooltip on storage page

* Always show video controls even when zooming

* Get video controls working when video is paused

* Fix control hovering

* Add loading indicator to logs tab

* Show metrics correctly when hovering graph

* Show loading indicators for previews on recordings page

* Remove vitest update

* remove unused

* Make volume props optional

web/src/views/events/RecordingView.tsx

@@ -364,11 +364,11 @@ export function RecordingView({
           >
             <div
               key={mainCamera}
-              className={
+              className={`relative ${
                 isDesktop
                   ? `${mainCameraAspect == "tall" ? "h-[50%] md:h-[60%] lg:h-[75%] xl:h-[90%]" : mainCameraAspect == "wide" ? "w-full" : "w-[78%]"} px-4 flex justify-center`
                   : `portrait:w-full pt-2 ${mainCameraAspect == "wide" ? "landscape:w-full aspect-wide" : "landscape:h-[94%] aspect-video"}`
-              }
+              }`}
               style={{
                 aspectRatio: isDesktop
                   ? mainCameraAspect == "tall"

web/src/views/system/GeneralMetrics.tsx

@@ -182,7 +182,7 @@ export default function GeneralMetrics({
           series[key] = { name: key, data: [] };
         }
 
-        series[key].data.push({ x: statsIdx + 1, y: stats.gpu });
+        series[key].data.push({ x: statsIdx + 1, y: stats.gpu.slice(0, -1) });
       });
     });
     return Object.keys(series).length > 0 ? Object.values(series) : [];
@@ -215,7 +215,7 @@ export default function GeneralMetrics({
           series[key] = { name: key, data: [] };
         }
 
-        series[key].data.push({ x: statsIdx + 1, y: stats.mem });
+        series[key].data.push({ x: statsIdx + 1, y: stats.mem.slice(0, -1) });
       });
     });
     return Object.values(series);
@@ -373,7 +373,7 @@ export default function GeneralMetrics({
                       key={series.name}
                       graphId={`${series.name}-gpu`}
                       name={series.name}
-                      unit=""
+                      unit="%"
                       threshold={GPUUsageThreshold}
                       updateTimes={updateTimes}
                       data={[series]}
@@ -392,7 +392,7 @@ export default function GeneralMetrics({
                         <ThresholdBarGraph
                           key={series.name}
                           graphId={`${series.name}-mem`}
-                          unit=""
+                          unit="%"
                           name={series.name}
                           threshold={GPUMemThreshold}
                           updateTimes={updateTimes}