mirror of
https://github.com/blakeblackshear/frigate.git
synced 2025-08-31 13:48:19 +02:00
Add an icon and tooltip to explain detector CPU usage metric (#19825)
This commit is contained in:
parent
92555eb835
commit
c7231648eb
@ -42,6 +42,7 @@
|
||||
"inferenceSpeed": "Detector Inference Speed",
|
||||
"temperature": "Detector Temperature",
|
||||
"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"
|
||||
},
|
||||
"hardwareInfo": {
|
||||
|
@ -11,11 +11,17 @@ import {
|
||||
InferenceThreshold,
|
||||
} from "@/types/graph";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import GPUInfoDialog from "@/components/overlay/GPUInfoDialog";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { ThresholdBarGraph } from "@/components/graph/SystemGraph";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { CiCircleAlert } from "react-icons/ci";
|
||||
|
||||
type GeneralMetricsProps = {
|
||||
lastUpdated: number;
|
||||
@ -548,7 +554,27 @@ export default function GeneralMetrics({
|
||||
)}
|
||||
{statsHistory.length != 0 ? (
|
||||
<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) => (
|
||||
<ThresholdBarGraph
|
||||
key={series.name}
|
||||
|
Loading…
Reference in New Issue
Block a user