Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

Add icon to explain in more detail the system stats / storage info (#6358)

Browse Source 
* Add info icon with additional info for each process.

* Specify single CPU core

* Include storage in tooltips
This commit is contained in:
Nicolas Mowen 2023-05-04 17:01:27 -06:00 committed by GitHub
parent 02f577347d
commit ef50af03f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 110 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
web/src/icons/About.jsx Normal file
View File

@ -0,0 +1,20 @@
import { h } from 'preact';
import { memo } from 'preact/compat';
export function About({ className = '' }) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className={`${className}`}
>
<path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
</svg>
);
}
export default memo(About);

34
web/src/routes/Storage.jsx
View File

@ -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="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="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>
<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">

59
web/src/routes/System.jsx
View File

@ -11,6 +11,7 @@ import { useState } from 'preact/hooks';
import Dialog from '../components/Dialog';
import TimeAgo from '../components/TimeAgo';
import copy from 'copy-to-clipboard';
import { About } from '../icons/About';
const emptyObject = Object.freeze({});
@ -208,7 +209,19 @@ export default function System() {
</div>
) : (
<Fragment>
<Heading size="lg">Detectors</Heading>
<div className="flex justify-start">
<Heading className="self-center" size="lg">
Detectors
</Heading>
<Button
className="rounded-full"
type="text"
color="gray"
aria-label="Momentary resource usage of each process that is controlling the object detector. CPU % is for a single core."
>
<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">
{detectorNames.map((detector) => (
<div key={detector} className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow">
@ -237,8 +250,20 @@ export default function System() {
))}
</div>
<div className="text-lg flex justify-between p-4">
<Heading size="lg">GPUs</Heading>
<div className="text-lg flex justify-between">
<div className="flex justify-start">
<Heading className="self-center" size="lg">
GPUs
</Heading>
<Button
className="rounded-full"
type="text"
color="gray"
aria-label="Momentary resource usage of each GPU. Intel GPUs do not support memory stats."
>
<About className="w-5" />
</Button>
</div>
<Button onClick={(e) => onHandleVainfo(e)}>vainfo</Button>
</div>
@ -282,7 +307,19 @@ export default function System() {
</div>
)}
<Heading size="lg">Cameras</Heading>
<div className="flex justify-start">
<Heading className="self-center" size="lg">
Cameras
</Heading>
<Button
className="rounded-full"
type="text"
color="gray"
aria-label="Momentary resource usage of each process interacting with the camera stream. CPU % is for a single core."
>
<About className="w-5" />
</Button>
</div>
{!cameras ? (
<ActivityIndicator />
) : (
@ -347,7 +384,19 @@ export default function System() {
</div>
)}
<Heading size="lg">Other Processes</Heading>
<div className="flex justify-start">
<Heading className="self-center" size="lg">
Other Processes
</Heading>
<Button
className="rounded-full"
type="text"
color="gray"
aria-label="Momentary resource usage for other important processes. CPU % is for a single core."
>
<About className="w-5" />
</Button>
</div>
<div data-testid="cameras" className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4">
{processesNames.map((process) => (
<div key={process} className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow">