From 24a1b1d50f32a093d7aad34e2608d839dd51d86b Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Tue, 2 May 2023 21:37:49 -0600
Subject: [PATCH] Include storage in tooltips

---
 web/src/routes/Storage.jsx | 40 ++++++++++++++++++++++++++++++++++----
 1 file changed, 36 insertions(+), 4 deletions(-)

diff --git a/web/src/routes/Storage.jsx b/web/src/routes/Storage.jsx
index 4539df6f1..dd7f969c7 100644
--- a/web/src/routes/Storage.jsx
+++ b/web/src/routes/Storage.jsx
@@ -5,6 +5,8 @@ import { useWs } from '../api/ws';
 import useSWR from 'swr';
 import { Table, Tbody, Thead, Tr, Th, Td } from '../components/Table';
 import Link from '../components/Link';
+import Button from '../components/Button';
+import { About } from '../icons/About';
 
 const emptyObject = Object.freeze({});
 
@@ -66,9 +68,19 @@ export default function Storage() {
 
       <Fragment>
         <Heading size="lg">Overview</Heading>
-        <div data-testid="detectors" className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div data-testid="overview-types" className="grid grid-cols-1 md:grid-cols-2 gap-4">
           <div className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow">
-            <div className="text-lg flex justify-between p-4">Data</div>
+            <div className="flex justify-start">
+              <div className="text-lg flex justify-between p-4">Data</div>
+              <Button
+                className="rounded-full"
+                type="text"
+                color="gray"
+                aria-label="Overview of total used storage and total capacity of the drives that hold the recordings and snapshots directories."
+              >
+                <About className="w-5" />
+              </Button>
+            </div>
             <div className="p-2">
               <Table className="w-full">
                 <Thead>
@@ -83,7 +95,17 @@ export default function Storage() {
             </div>
           </div>
           <div className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow">
-            <div className="text-lg flex justify-between p-4">Memory</div>
+            <div className="flex justify-start">
+              <div className="text-lg flex justify-between p-4">Memory</div>
+              <Button
+                className="rounded-full"
+                type="text"
+                color="gray"
+                aria-label="Overview of used and total memory in frigate process."
+              >
+                <About className="w-5" />
+              </Button>
+            </div>
             <div className="p-2">
               <Table className="w-full">
                 <Thead>
@@ -110,7 +132,17 @@ export default function Storage() {
           </div>
         </div>
 
-        <Heading size="lg">Cameras</Heading>
+        <div className="flex justify-start">
+          <Heading size="lg">Cameras</Heading>
+          <Button
+            className="rounded-full"
+            type="text"
+            color="gray"
+            aria-label="Overview of per-camera storage usage and bandwidth."
+          >
+            <About className="w-5" />
+          </Button>
+        </div>
         <div data-testid="detectors" className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4">
           {Object.entries(storage).map(([name, camera]) => (
             <div key={name} className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow">