administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-10 21:25:24 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Rename graph

Browse Source
This commit is contained in:
Nicolas Mowen 2024-04-04 07:54:37 -06:00
parent fbc0da6016
commit 09f2f01319
2 changed files with 16 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/components/graph/SystemGraph.tsx
View File

@ -5,7 +5,7 @@ import { useCallback, useEffect, useMemo } from "react";
import Chart from "react-apexcharts"; import Chart from "react-apexcharts";
import useSWR from "swr"; import useSWR from "swr";
type SystemGraphProps = { type ThresholdBarGraphProps = {
graphId: string; graphId: string;
name: string; name: string;
unit: string; unit: string;
@ -13,14 +13,14 @@ type SystemGraphProps = {
updateTimes: number[]; updateTimes: number[];
data: ApexAxisChartSeries; data: ApexAxisChartSeries;
}; };
export default function SystemGraph({ export function ThresholdBarGraph({
graphId, graphId,
name, name,
unit, unit,
threshold, threshold,
updateTimes, updateTimes,
data, data,
}: SystemGraphProps) { }: ThresholdBarGraphProps) {
const { data: config } = useSWR<FrigateConfig>("config", { const { data: config } = useSWR<FrigateConfig>("config", {
revalidateOnFocus: false, revalidateOnFocus: false,
}); });

24
web/src/pages/System.tsx
View File

@ -1,7 +1,6 @@
import useSWR from "swr"; import useSWR from "swr";
import { FrigateStats } from "@/types/stats"; import { FrigateStats } from "@/types/stats";
import { useEffect, useMemo, useState } from "react"; import { useEffect, useMemo, useState } from "react";
import SystemGraph from "@/components/graph/SystemGraph";
import { useFrigateStats } from "@/api/ws"; import { useFrigateStats } from "@/api/ws";
import TimeAgo from "@/components/dynamic/TimeAgo"; import TimeAgo from "@/components/dynamic/TimeAgo";
import { import {
@ -14,6 +13,8 @@ import {
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import VainfoDialog from "@/components/overlay/VainfoDialog"; import VainfoDialog from "@/components/overlay/VainfoDialog";
import { isDesktop } from "react-device-detect";
import { ThresholdBarGraph } from "@/components/graph/SystemGraph";
const metrics = ["general", "storage", "cameras"] as const; const metrics = ["general", "storage", "cameras"] as const;
type SystemMetric = (typeof metrics)[number]; type SystemMetric = (typeof metrics)[number];
@ -59,7 +60,8 @@ function System() {
<div className="h-full flex items-center"> <div className="h-full flex items-center">
{lastUpdated && ( {lastUpdated && (
<div className="h-full text-muted-foreground text-sm content-center"> <div className="h-full text-muted-foreground text-sm content-center">
Last refreshed: <TimeAgo time={lastUpdated * 1000} dense /> {isDesktop && "Last refreshed: "}
<TimeAgo time={lastUpdated * 1000} dense />
</div> </div>
)} )}
</div> </div>
@ -182,13 +184,13 @@ export default System;
if (camera.enabled) { if (camera.enabled) {
return ( return (
<div key={camera.name} className="grid grid-cols-2"> <div key={camera.name} className="grid grid-cols-2">
<SystemGraph <ThresholdBarGraph
graphId={`${camera.name}-cpu`} graphId={`${camera.name}-cpu`}
title={`${camera.name.replaceAll("_", " ")} CPU`} title={`${camera.name.replaceAll("_", " ")} CPU`}
unit="%" unit="%"
data={Object.values(cameraCpuSeries[camera.name] || {})} data={Object.values(cameraCpuSeries[camera.name] || {})}
/> />
<SystemGraph <ThresholdBarGraph
graphId={`${camera.name}-fps`} graphId={`${camera.name}-fps`}
title={`${camera.name.replaceAll("_", " ")} FPS`} title={`${camera.name.replaceAll("_", " ")} FPS`}
unit="" unit=""
@ -467,7 +469,7 @@ function GeneralMetrics({ lastUpdated, setLastUpdated }: GeneralMetricsProps) {
<div className="p-2.5 bg-primary rounded-2xl flex-col"> <div className="p-2.5 bg-primary rounded-2xl flex-col">
<div className="mb-5">Detector Inference Speed</div> <div className="mb-5">Detector Inference Speed</div>
{detInferenceTimeSeries.map((series) => ( {detInferenceTimeSeries.map((series) => (
<SystemGraph <ThresholdBarGraph
key={series.name} key={series.name}
graphId={`${series.name}-inference`} graphId={`${series.name}-inference`}
name={series.name} name={series.name}
@ -481,7 +483,7 @@ function GeneralMetrics({ lastUpdated, setLastUpdated }: GeneralMetricsProps) {
<div className="p-2.5 bg-primary rounded-2xl flex-col"> <div className="p-2.5 bg-primary rounded-2xl flex-col">
<div className="mb-5">Detector CPU Usage</div> <div className="mb-5">Detector CPU Usage</div>
{detCpuSeries.map((series) => ( {detCpuSeries.map((series) => (
<SystemGraph <ThresholdBarGraph
key={series.name} key={series.name}
graphId={`${series.name}-cpu`} graphId={`${series.name}-cpu`}
unit="%" unit="%"
@ -495,7 +497,7 @@ function GeneralMetrics({ lastUpdated, setLastUpdated }: GeneralMetricsProps) {
<div className="p-2.5 bg-primary rounded-2xl flex-col"> <div className="p-2.5 bg-primary rounded-2xl flex-col">
<div className="mb-5">Detector Memory Usage</div> <div className="mb-5">Detector Memory Usage</div>
{detMemSeries.map((series) => ( {detMemSeries.map((series) => (
<SystemGraph <ThresholdBarGraph
key={series.name} key={series.name}
graphId={`${series.name}-mem`} graphId={`${series.name}-mem`}
unit="%" unit="%"
@ -534,7 +536,7 @@ function GeneralMetrics({ lastUpdated, setLastUpdated }: GeneralMetricsProps) {
<div className="p-2.5 bg-primary rounded-2xl flex-col"> <div className="p-2.5 bg-primary rounded-2xl flex-col">
<div className="mb-5">GPU Usage</div> <div className="mb-5">GPU Usage</div>
{gpuSeries.map((series) => ( {gpuSeries.map((series) => (
<SystemGraph <ThresholdBarGraph
key={series.name} key={series.name}
graphId={`${series.name}-gpu`} graphId={`${series.name}-gpu`}
name={series.name} name={series.name}
@ -548,7 +550,7 @@ function GeneralMetrics({ lastUpdated, setLastUpdated }: GeneralMetricsProps) {
<div className="p-2.5 bg-primary rounded-2xl flex-col"> <div className="p-2.5 bg-primary rounded-2xl flex-col">
<div className="mb-5">GPU Memory</div> <div className="mb-5">GPU Memory</div>
{gpuMemSeries.map((series) => ( {gpuMemSeries.map((series) => (
<SystemGraph <ThresholdBarGraph
key={series.name} key={series.name}
graphId={`${series.name}-mem`} graphId={`${series.name}-mem`}
unit="" unit=""
@ -570,7 +572,7 @@ function GeneralMetrics({ lastUpdated, setLastUpdated }: GeneralMetricsProps) {
<div className="p-2.5 bg-primary rounded-2xl flex-col"> <div className="p-2.5 bg-primary rounded-2xl flex-col">
<div className="mb-5">Process CPU Usage</div> <div className="mb-5">Process CPU Usage</div>
{otherProcessCpuSeries.map((series) => ( {otherProcessCpuSeries.map((series) => (
<SystemGraph <ThresholdBarGraph
key={series.name} key={series.name}
graphId={`${series.name}-cpu`} graphId={`${series.name}-cpu`}
name={series.name.replaceAll("_", " ")} name={series.name.replaceAll("_", " ")}
@ -584,7 +586,7 @@ function GeneralMetrics({ lastUpdated, setLastUpdated }: GeneralMetricsProps) {
<div className="p-2.5 bg-primary rounded-2xl flex-col"> <div className="p-2.5 bg-primary rounded-2xl flex-col">
<div className="mb-5">Process Memory Usage</div> <div className="mb-5">Process Memory Usage</div>
{otherProcessMemSeries.map((series) => ( {otherProcessMemSeries.map((series) => (
<SystemGraph <ThresholdBarGraph
key={series.name} key={series.name}
graphId={`${series.name}-mem`} graphId={`${series.name}-mem`}
unit="%" unit="%"