Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-08-31 13:48:19 +02:00
Code Issues Projects Releases Wiki Activity

Add an icon and tooltip to explain detector CPU usage metric (#19825)

Browse Source
This commit is contained in:
Josh Hawkins 2025-08-28 17:15:00 -05:00 committed by GitHub
parent 92555eb835
commit c7231648eb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 28 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/public/locales/en/views/system.json
View File

@ -42,6 +42,7 @@
"inferenceSpeed": "Detector Inference Speed", "inferenceSpeed": "Detector Inference Speed",
"temperature": "Detector Temperature", "temperature": "Detector Temperature",
"cpuUsage": "Detector CPU Usage", "cpuUsage": "Detector CPU Usage",
"cpuUsageInformation": "CPU used in preparing input and output data to/from detection models. This value does not measure inference usage, even if using a GPU or accelerator.",
"memoryUsage": "Detector Memory Usage" "memoryUsage": "Detector Memory Usage"
}, },
"hardwareInfo": { "hardwareInfo": {

28
web/src/views/system/GeneralMetrics.tsx
View File

@ -11,11 +11,17 @@ import {
InferenceThreshold, InferenceThreshold,
} from "@/types/graph"; } from "@/types/graph";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import GPUInfoDialog from "@/components/overlay/GPUInfoDialog"; import GPUInfoDialog from "@/components/overlay/GPUInfoDialog";
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
import { ThresholdBarGraph } from "@/components/graph/SystemGraph"; import { ThresholdBarGraph } from "@/components/graph/SystemGraph";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { CiCircleAlert } from "react-icons/ci";
type GeneralMetricsProps = { type GeneralMetricsProps = {
lastUpdated: number; lastUpdated: number;
@ -548,7 +554,27 @@ export default function GeneralMetrics({
)} )}
{statsHistory.length != 0 ? ( {statsHistory.length != 0 ? (
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl"> <div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
<div className="mb-5">{t("general.detector.cpuUsage")}</div> <div className="mb-5 flex flex-row items-center justify-between">
{t("general.detector.cpuUsage")}
<Popover>
<PopoverTrigger asChild>
<button
className="focus:outline-none"
aria-label={t("general.detector.cpuUsage")}
>
<CiCircleAlert
className="size-5"
aria-label={t("general.detector.cpuUsage")}
/>
</button>
</PopoverTrigger>
<PopoverContent className="w-80">
<div className="space-y-2">
{t("general.detector.cpuUsageInformation")}
</div>
</PopoverContent>
</Popover>
</div>
{detCpuSeries.map((series) => ( {detCpuSeries.map((series) => (
<ThresholdBarGraph <ThresholdBarGraph
key={series.name} key={series.name}