mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-09-24 18:26:51 +03:00
Josh HawkinsandGitHub
caa6edecac
* migrate web to eslint 10 flat config ESLint 10 dropped `.eslintrc` support, so `.eslintrc.cjs` is replaced with `eslint.config.js` and the lint scripts no longer pass `--ext` or `--ignore-path`. typescript-eslint moves to 8, react-hooks to 7, and react-refresh to 0.5, and the unused jest and vitest-globals plugins are removed. Lint behaves as it did before: catch variables aren't checked, unused disable directives aren't reported, and rules newly added to the recommended sets are off until the code passes them. typescript-eslint 8 flags constants used only in `typeof`, so those are now exported, or replaced with a union type where the export would trip react-refresh. * fix lint findings from the eslint 10 recommended rules Remove the rule overrides from the flat config migration and fix what they were hiding. Unused catch bindings are dropped, 20 disable directives that suppressed nothing are removed (react-hooks 5.2 and 7.1.1 report identical exhaustive-deps findings with inline config ignored), dead initial values are dropped, short-circuit calls become if statements or optional calls, rethrown errors pass `cause`, and the disabled "No recordings" tooltip in `ReviewTimeline` is removed along with its memo and the `getRecordingAvailability` prop. The 3 react-refresh warnings for files that export contexts or classes are left for a later refactor.
1054 lines
31 KiB
TypeScript
1054 lines
31 KiB
TypeScript
import useSWR from "swr";
|
|
import { FrigateStats, GpuInfo, GpuStats } from "@/types/stats";
|
|
import { startTransition, useEffect, useMemo, useState } from "react";
|
|
import { useFrigateStats } from "@/api/ws";
|
|
import {
|
|
DetectorCpuThreshold,
|
|
DetectorMemThreshold,
|
|
DetectorTempThreshold,
|
|
GPUMemThreshold,
|
|
GPUUsageThreshold,
|
|
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;
|
|
setLastUpdated: (last: number) => void;
|
|
isActive: boolean;
|
|
};
|
|
export default function GeneralMetrics({
|
|
lastUpdated,
|
|
setLastUpdated,
|
|
isActive,
|
|
}: GeneralMetricsProps) {
|
|
// extra info
|
|
const { t } = useTranslation(["views/system"]);
|
|
const [showVainfo, setShowVainfo] = useState(false);
|
|
|
|
// stats
|
|
|
|
const { data: initialStats, mutate: refreshStats } = useSWR<FrigateStats[]>(
|
|
[
|
|
"stats/history",
|
|
{
|
|
keys: "detectors.inference_speed,detectors.temperature,detectors.cpu,detectors.mem,gpu_usages,npu_usages,processes.cpu,processes.mem,service.last_updated",
|
|
},
|
|
],
|
|
{
|
|
revalidateOnFocus: false,
|
|
},
|
|
);
|
|
|
|
const [statsHistory, setStatsHistory] = useState<FrigateStats[]>([]);
|
|
const updatedStats = useFrigateStats();
|
|
|
|
useEffect(() => {
|
|
if (initialStats == undefined || initialStats.length == 0) {
|
|
return;
|
|
}
|
|
|
|
if (statsHistory.length == 0) {
|
|
startTransition(() => setStatsHistory(initialStats));
|
|
return;
|
|
}
|
|
|
|
if (!isActive || !updatedStats) {
|
|
return;
|
|
}
|
|
|
|
if (updatedStats.service.last_updated > lastUpdated) {
|
|
setStatsHistory([...statsHistory.slice(1), updatedStats]);
|
|
setLastUpdated(updatedStats.service.last_updated);
|
|
}
|
|
}, [
|
|
initialStats,
|
|
updatedStats,
|
|
statsHistory,
|
|
lastUpdated,
|
|
setLastUpdated,
|
|
isActive,
|
|
]);
|
|
|
|
useEffect(() => {
|
|
if (isActive && statsHistory.length > 0) {
|
|
refreshStats().then((freshStats) => {
|
|
if (freshStats && freshStats.length > 0) {
|
|
setStatsHistory(freshStats);
|
|
}
|
|
});
|
|
}
|
|
// only re-fetch when tab becomes active, not on data changes
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [isActive]);
|
|
|
|
const [canGetGpuInfo, gpuType] = useMemo<[boolean, GpuInfo]>(() => {
|
|
let vaCount = 0;
|
|
let nvCount = 0;
|
|
|
|
Object.values(statsHistory[0]?.gpu_usages ?? {}).forEach((stats) => {
|
|
if (stats.vendor === "nvidia") {
|
|
nvCount += 1;
|
|
} else if (stats.vendor === "intel" || stats.vendor === "amd") {
|
|
vaCount += 1;
|
|
}
|
|
});
|
|
|
|
return [vaCount > 0 || nvCount > 0, nvCount > 0 ? "nvinfo" : "vainfo"];
|
|
}, [statsHistory]);
|
|
|
|
// timestamps
|
|
|
|
const updateTimes = useMemo(
|
|
() => statsHistory.map((stats) => stats.service.last_updated),
|
|
[statsHistory],
|
|
);
|
|
|
|
// detectors stats
|
|
|
|
const detInferenceTimeSeries = useMemo(() => {
|
|
if (!statsHistory) {
|
|
return [];
|
|
}
|
|
|
|
const series: {
|
|
[key: string]: { name: string; data: { x: number; y: number }[] };
|
|
} = {};
|
|
|
|
statsHistory.forEach((stats, statsIdx) => {
|
|
if (!stats) {
|
|
return;
|
|
}
|
|
|
|
Object.entries(stats.detectors).forEach(([key, stats]) => {
|
|
if (!(key in series)) {
|
|
series[key] = { name: key, data: [] };
|
|
}
|
|
|
|
series[key].data.push({ x: statsIdx + 1, y: stats.inference_speed });
|
|
});
|
|
});
|
|
return Object.values(series);
|
|
}, [statsHistory]);
|
|
|
|
const detTempSeries = useMemo(() => {
|
|
if (!statsHistory) {
|
|
return undefined;
|
|
}
|
|
|
|
const series: {
|
|
[key: string]: { name: string; data: { x: number; y: number }[] };
|
|
} = {};
|
|
|
|
statsHistory.forEach((stats, statsIdx) => {
|
|
if (!stats) {
|
|
return;
|
|
}
|
|
|
|
Object.entries(stats.detectors).forEach(([key, detectorStats]) => {
|
|
if (detectorStats.temperature === undefined) {
|
|
return;
|
|
}
|
|
|
|
if (!(key in series)) {
|
|
series[key] = {
|
|
name: key,
|
|
data: [],
|
|
};
|
|
}
|
|
|
|
series[key].data.push({
|
|
x: statsIdx + 1,
|
|
y: Math.round(detectorStats.temperature),
|
|
});
|
|
});
|
|
});
|
|
|
|
if (Object.keys(series).length > 0) {
|
|
return Object.values(series);
|
|
}
|
|
|
|
return undefined;
|
|
}, [statsHistory]);
|
|
|
|
const detCpuSeries = useMemo(() => {
|
|
if (!statsHistory) {
|
|
return [];
|
|
}
|
|
|
|
const series: {
|
|
[key: string]: { name: string; data: { x: number; y: string }[] };
|
|
} = {};
|
|
|
|
statsHistory.forEach((stats, statsIdx) => {
|
|
if (!stats) {
|
|
return;
|
|
}
|
|
|
|
Object.entries(stats.detectors).forEach(([key, detStats]) => {
|
|
if (!(key in series)) {
|
|
series[key] = { name: key, data: [] };
|
|
}
|
|
|
|
const data = detStats.cpu;
|
|
|
|
if (data != undefined) {
|
|
series[key].data.push({
|
|
x: statsIdx + 1,
|
|
y: data,
|
|
});
|
|
}
|
|
});
|
|
});
|
|
return Object.values(series);
|
|
}, [statsHistory]);
|
|
|
|
const detMemSeries = useMemo(() => {
|
|
if (!statsHistory) {
|
|
return [];
|
|
}
|
|
|
|
const series: {
|
|
[key: string]: { name: string; data: { x: number; y: string }[] };
|
|
} = {};
|
|
|
|
statsHistory.forEach((stats, statsIdx) => {
|
|
if (!stats) {
|
|
return;
|
|
}
|
|
|
|
Object.entries(stats.detectors).forEach(([key, detStats]) => {
|
|
if (!(key in series)) {
|
|
series[key] = { name: key, data: [] };
|
|
}
|
|
|
|
if (detStats.mem != undefined) {
|
|
series[key].data.push({
|
|
x: statsIdx + 1,
|
|
y: detStats.mem,
|
|
});
|
|
}
|
|
});
|
|
});
|
|
return Object.values(series);
|
|
}, [statsHistory]);
|
|
|
|
// gpu stats
|
|
|
|
const gpuSeries = useMemo(() => {
|
|
if (!statsHistory) {
|
|
return [];
|
|
}
|
|
|
|
const series: {
|
|
[key: string]: { name: string; data: { x: number; y: string }[] };
|
|
} = {};
|
|
let hasValidGpu = false;
|
|
|
|
statsHistory.forEach((stats, statsIdx) => {
|
|
if (!stats) {
|
|
return;
|
|
}
|
|
|
|
Object.entries(stats.gpu_usages || {}).forEach(([key, stats]) => {
|
|
if (!(key in series)) {
|
|
series[key] = { name: key, data: [] };
|
|
}
|
|
|
|
if (stats.gpu) {
|
|
hasValidGpu = true;
|
|
series[key].data.push({ x: statsIdx + 1, y: stats.gpu.slice(0, -1) });
|
|
}
|
|
});
|
|
});
|
|
|
|
if (!hasValidGpu) {
|
|
return [];
|
|
}
|
|
|
|
return Object.keys(series).length > 0 ? Object.values(series) : [];
|
|
}, [statsHistory]);
|
|
|
|
const gpuMemSeries = useMemo(() => {
|
|
if (!statsHistory) {
|
|
return [];
|
|
}
|
|
|
|
// Intel doesn't expose VRAM usage, so hide the memory section
|
|
// entirely when every reporting GPU is Intel.
|
|
const firstEntries: GpuStats[] = Object.values(
|
|
statsHistory[0]?.gpu_usages ?? {},
|
|
);
|
|
if (
|
|
firstEntries.length > 0 &&
|
|
firstEntries.every((s) => s.vendor === "intel")
|
|
) {
|
|
return undefined;
|
|
}
|
|
|
|
const series: {
|
|
[key: string]: { name: string; data: { x: number; y: string }[] };
|
|
} = {};
|
|
let hasValidGpu = false;
|
|
|
|
statsHistory.forEach((stats, statsIdx) => {
|
|
if (!stats) {
|
|
return;
|
|
}
|
|
|
|
Object.entries(stats.gpu_usages || {}).forEach(([key, stats]) => {
|
|
if (stats.vendor === "intel") {
|
|
return;
|
|
}
|
|
|
|
if (!(key in series)) {
|
|
series[key] = { name: key, data: [] };
|
|
}
|
|
|
|
if (stats.mem) {
|
|
hasValidGpu = true;
|
|
series[key].data.push({ x: statsIdx + 1, y: stats.mem.slice(0, -1) });
|
|
}
|
|
});
|
|
});
|
|
|
|
if (!hasValidGpu) {
|
|
return [];
|
|
}
|
|
|
|
return Object.values(series);
|
|
}, [statsHistory]);
|
|
|
|
const gpuEncSeries = useMemo(() => {
|
|
if (!statsHistory) {
|
|
return [];
|
|
}
|
|
|
|
const series: {
|
|
[key: string]: { name: string; data: { x: number; y: string }[] };
|
|
} = {};
|
|
let hasValidGpu = false;
|
|
|
|
statsHistory.forEach((stats, statsIdx) => {
|
|
if (!stats) {
|
|
return;
|
|
}
|
|
|
|
Object.entries(stats.gpu_usages || {}).forEach(([key, stats]) => {
|
|
if (!(key in series)) {
|
|
series[key] = { name: key, data: [] };
|
|
}
|
|
|
|
if (stats.enc) {
|
|
hasValidGpu = true;
|
|
series[key].data.push({ x: statsIdx + 1, y: stats.enc.slice(0, -1) });
|
|
}
|
|
});
|
|
});
|
|
|
|
if (!hasValidGpu) {
|
|
return [];
|
|
}
|
|
|
|
return Object.keys(series).length > 0 ? Object.values(series) : undefined;
|
|
}, [statsHistory]);
|
|
|
|
const gpuComputeSeries = useMemo(() => {
|
|
if (!statsHistory) {
|
|
return [];
|
|
}
|
|
|
|
const series: {
|
|
[key: string]: { name: string; data: { x: number; y: string }[] };
|
|
} = {};
|
|
let hasValidGpu = false;
|
|
|
|
statsHistory.forEach((stats, statsIdx) => {
|
|
if (!stats) {
|
|
return;
|
|
}
|
|
|
|
Object.entries(stats.gpu_usages || {}).forEach(([key, stats]) => {
|
|
if (!(key in series)) {
|
|
series[key] = { name: key, data: [] };
|
|
}
|
|
|
|
if (stats.compute) {
|
|
hasValidGpu = true;
|
|
series[key].data.push({
|
|
x: statsIdx + 1,
|
|
y: stats.compute.slice(0, -1),
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
if (!hasValidGpu) {
|
|
return [];
|
|
}
|
|
|
|
return Object.keys(series).length > 0 ? Object.values(series) : undefined;
|
|
}, [statsHistory]);
|
|
|
|
const gpuDecSeries = useMemo(() => {
|
|
if (!statsHistory) {
|
|
return [];
|
|
}
|
|
|
|
const series: {
|
|
[key: string]: { name: string; data: { x: number; y: string }[] };
|
|
} = {};
|
|
let hasValidGpu = false;
|
|
|
|
statsHistory.forEach((stats, statsIdx) => {
|
|
if (!stats) {
|
|
return;
|
|
}
|
|
|
|
Object.entries(stats.gpu_usages || {}).forEach(([key, stats]) => {
|
|
if (!(key in series)) {
|
|
series[key] = { name: key, data: [] };
|
|
}
|
|
|
|
if (stats.dec) {
|
|
hasValidGpu = true;
|
|
series[key].data.push({ x: statsIdx + 1, y: stats.dec.slice(0, -1) });
|
|
}
|
|
});
|
|
});
|
|
|
|
if (!hasValidGpu) {
|
|
return [];
|
|
}
|
|
|
|
return Object.keys(series).length > 0 ? Object.values(series) : undefined;
|
|
}, [statsHistory]);
|
|
|
|
const gpuTempSeries = useMemo(() => {
|
|
if (!statsHistory) {
|
|
return [];
|
|
}
|
|
|
|
const series: {
|
|
[key: string]: { name: string; data: { x: number; y: number }[] };
|
|
} = {};
|
|
let hasValidGpu = false;
|
|
|
|
statsHistory.forEach((stats, statsIdx) => {
|
|
if (!stats) {
|
|
return;
|
|
}
|
|
|
|
Object.entries(stats.gpu_usages || {}).forEach(([key, stats]) => {
|
|
if (!(key in series)) {
|
|
series[key] = { name: key, data: [] };
|
|
}
|
|
|
|
if (stats?.temp !== undefined) {
|
|
hasValidGpu = true;
|
|
series[key].data.push({ x: statsIdx + 1, y: stats.temp });
|
|
}
|
|
});
|
|
});
|
|
|
|
if (!hasValidGpu) {
|
|
return [];
|
|
}
|
|
|
|
return Object.keys(series).length > 0 ? Object.values(series) : undefined;
|
|
}, [statsHistory]);
|
|
|
|
// npu stats
|
|
|
|
const npuSeries = useMemo(() => {
|
|
if (!statsHistory) {
|
|
return [];
|
|
}
|
|
|
|
const series: {
|
|
[key: string]: { name: string; data: { x: number; y: number }[] };
|
|
} = {};
|
|
let hasValidNpu = false;
|
|
|
|
statsHistory.forEach((stats, statsIdx) => {
|
|
if (!stats) {
|
|
return;
|
|
}
|
|
|
|
Object.entries(stats.npu_usages || {}).forEach(([key, stats]) => {
|
|
if (!(key in series)) {
|
|
series[key] = { name: key, data: [] };
|
|
}
|
|
|
|
if (stats?.npu) {
|
|
hasValidNpu = true;
|
|
series[key].data.push({ x: statsIdx + 1, y: stats.npu });
|
|
}
|
|
});
|
|
});
|
|
|
|
if (!hasValidNpu) {
|
|
return [];
|
|
}
|
|
|
|
return Object.keys(series).length > 0 ? Object.values(series) : [];
|
|
}, [statsHistory]);
|
|
|
|
const npuTempSeries = useMemo(() => {
|
|
if (!statsHistory) {
|
|
return [];
|
|
}
|
|
|
|
const series: {
|
|
[key: string]: { name: string; data: { x: number; y: number }[] };
|
|
} = {};
|
|
let hasValidNpu = false;
|
|
|
|
statsHistory.forEach((stats, statsIdx) => {
|
|
if (!stats) {
|
|
return;
|
|
}
|
|
|
|
Object.entries(stats.npu_usages || {}).forEach(([key, stats]) => {
|
|
if (!(key in series)) {
|
|
series[key] = { name: key, data: [] };
|
|
}
|
|
|
|
if (stats?.temp !== undefined) {
|
|
hasValidNpu = true;
|
|
series[key].data.push({ x: statsIdx + 1, y: stats.temp });
|
|
}
|
|
});
|
|
});
|
|
|
|
if (!hasValidNpu) {
|
|
return [];
|
|
}
|
|
|
|
return Object.keys(series).length > 0 ? Object.values(series) : undefined;
|
|
}, [statsHistory]);
|
|
|
|
// Number of cards the hardware grid renders. Which ones appear depends on
|
|
// the vendor, so the column count follows the count rather than assuming a
|
|
// fixed set is present.
|
|
const hardwareCardCount = useMemo(() => {
|
|
if (!statsHistory[0]?.gpu_usages) {
|
|
return 0;
|
|
}
|
|
|
|
const hasNpu = statsHistory[0].npu_usages != undefined;
|
|
|
|
return (
|
|
1 + // gpu usage always renders alongside gpu_usages
|
|
(gpuMemSeries ? 1 : 0) +
|
|
(gpuEncSeries?.length ? 1 : 0) +
|
|
(gpuComputeSeries?.length ? 1 : 0) +
|
|
(gpuDecSeries?.length ? 1 : 0) +
|
|
(gpuTempSeries?.length ? 1 : 0) +
|
|
(hasNpu ? 1 : 0) +
|
|
(hasNpu && npuTempSeries?.length ? 1 : 0)
|
|
);
|
|
}, [
|
|
statsHistory,
|
|
gpuMemSeries,
|
|
gpuEncSeries,
|
|
gpuComputeSeries,
|
|
gpuDecSeries,
|
|
gpuTempSeries,
|
|
npuTempSeries,
|
|
]);
|
|
|
|
// other processes stats
|
|
|
|
const hardwareType = useMemo(() => {
|
|
const hasGpu = gpuSeries.length > 0;
|
|
const hasNpu = npuSeries.length > 0;
|
|
|
|
if (hasGpu && !hasNpu) {
|
|
return "GPUs";
|
|
} else if (!hasGpu && hasNpu) {
|
|
return "NPUs";
|
|
} else {
|
|
return "GPUs / NPUs";
|
|
}
|
|
}, [gpuSeries, npuSeries]);
|
|
|
|
const otherProcessCpuSeries = useMemo(() => {
|
|
if (!statsHistory) {
|
|
return [];
|
|
}
|
|
|
|
const series: {
|
|
[key: string]: { name: string; data: { x: number; y: string }[] };
|
|
} = {};
|
|
|
|
statsHistory.forEach((stats, statsIdx) => {
|
|
if (!stats) {
|
|
return;
|
|
}
|
|
|
|
Object.entries(stats.processes).forEach(([key, procStats]) => {
|
|
if (!(key in series)) {
|
|
series[key] = {
|
|
name: t(`general.otherProcesses.series.${key}`),
|
|
data: [],
|
|
};
|
|
}
|
|
|
|
if (procStats.cpu != undefined) {
|
|
series[key].data.push({
|
|
x: statsIdx + 1,
|
|
y: procStats.cpu,
|
|
});
|
|
}
|
|
});
|
|
});
|
|
return Object.keys(series).length > 0 ? Object.values(series) : [];
|
|
}, [statsHistory, t]);
|
|
|
|
const otherProcessMemSeries = useMemo(() => {
|
|
if (!statsHistory) {
|
|
return [];
|
|
}
|
|
|
|
const series: {
|
|
[key: string]: { name: string; data: { x: number; y: string }[] };
|
|
} = {};
|
|
|
|
statsHistory.forEach((stats, statsIdx) => {
|
|
if (!stats) {
|
|
return;
|
|
}
|
|
|
|
Object.entries(stats.processes).forEach(([key, procStats]) => {
|
|
if (!(key in series)) {
|
|
series[key] = {
|
|
name: t(`general.otherProcesses.series.${key}`),
|
|
data: [],
|
|
};
|
|
}
|
|
|
|
if (procStats.mem) {
|
|
series[key].data.push({
|
|
x: statsIdx + 1,
|
|
y: procStats.mem,
|
|
});
|
|
}
|
|
});
|
|
});
|
|
return Object.values(series);
|
|
}, [statsHistory, t]);
|
|
|
|
return (
|
|
<>
|
|
<GPUInfoDialog
|
|
showGpuInfo={showVainfo}
|
|
gpuType={gpuType}
|
|
setShowGpuInfo={setShowVainfo}
|
|
/>
|
|
|
|
<div className="scrollbar-container mt-4 flex size-full flex-col overflow-y-auto">
|
|
<div className="text-sm font-medium text-muted-foreground">
|
|
{t("general.detector.title")}
|
|
</div>
|
|
<div
|
|
className={cn(
|
|
"mt-4 grid w-full grid-cols-1 gap-2 sm:grid-cols-3",
|
|
detTempSeries && "sm:grid-cols-4",
|
|
)}
|
|
>
|
|
{statsHistory.length != 0 ? (
|
|
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
|
|
<div className="mb-5">{t("general.detector.inferenceSpeed")}</div>
|
|
{detInferenceTimeSeries.map((series) => (
|
|
<ThresholdBarGraph
|
|
key={series.name}
|
|
graphId={`${series.name}-inference`}
|
|
name={series.name}
|
|
unit="ms"
|
|
threshold={InferenceThreshold}
|
|
updateTimes={updateTimes}
|
|
data={[series]}
|
|
isActive={isActive}
|
|
/>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<Skeleton className="aspect-video w-full rounded-lg md:rounded-2xl" />
|
|
)}
|
|
{statsHistory.length != 0 && (
|
|
<>
|
|
{detTempSeries && (
|
|
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
|
|
<div className="mb-5">
|
|
{t("general.detector.temperature")}
|
|
</div>
|
|
{detTempSeries.map((series) => (
|
|
<ThresholdBarGraph
|
|
key={series.name}
|
|
graphId={`${series.name}-temp`}
|
|
name={series.name}
|
|
unit="°C"
|
|
threshold={DetectorTempThreshold}
|
|
updateTimes={updateTimes}
|
|
data={[series]}
|
|
isActive={isActive}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
{statsHistory.length != 0 ? (
|
|
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
|
|
<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}
|
|
graphId={`${series.name}-cpu`}
|
|
unit="%"
|
|
name={series.name}
|
|
threshold={DetectorCpuThreshold}
|
|
updateTimes={updateTimes}
|
|
data={[series]}
|
|
isActive={isActive}
|
|
/>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<Skeleton className="aspect-video w-full" />
|
|
)}
|
|
{statsHistory.length != 0 ? (
|
|
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
|
|
<div className="mb-5">{t("general.detector.memoryUsage")}</div>
|
|
{detMemSeries.map((series) => (
|
|
<ThresholdBarGraph
|
|
key={series.name}
|
|
graphId={`${series.name}-mem`}
|
|
unit="%"
|
|
name={series.name}
|
|
threshold={DetectorMemThreshold}
|
|
updateTimes={updateTimes}
|
|
data={[series]}
|
|
isActive={isActive}
|
|
/>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<Skeleton className="aspect-video w-full" />
|
|
)}
|
|
</div>
|
|
|
|
{(statsHistory.length == 0 ||
|
|
gpuSeries.length > 0 ||
|
|
npuSeries.length > 0) && (
|
|
<>
|
|
<div className="mt-4 flex items-center justify-between">
|
|
<div className="text-sm font-medium text-muted-foreground">
|
|
{hardwareType}
|
|
</div>
|
|
{canGetGpuInfo && (
|
|
<Button
|
|
className="cursor-pointer"
|
|
aria-label={t("general.hardwareInfo.title")}
|
|
size="sm"
|
|
onClick={() => setShowVainfo(true)}
|
|
>
|
|
{t("general.hardwareInfo.title")}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<div
|
|
className={cn(
|
|
"mt-4 grid grid-cols-1 gap-2 sm:grid-cols-2",
|
|
hardwareCardCount >= 3 && "lg:grid-cols-3",
|
|
hardwareCardCount >= 4 && "xl:grid-cols-4",
|
|
hardwareCardCount >= 5 && "3xl:grid-cols-5",
|
|
)}
|
|
>
|
|
{statsHistory[0]?.gpu_usages && (
|
|
<>
|
|
{statsHistory.length != 0 ? (
|
|
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
|
|
<div className="mb-5">
|
|
{t("general.hardwareInfo.gpuUsage")}
|
|
</div>
|
|
{gpuSeries.map((series) => (
|
|
<ThresholdBarGraph
|
|
key={series.name}
|
|
graphId={`${series.name}-gpu`}
|
|
name={series.name}
|
|
unit="%"
|
|
threshold={GPUUsageThreshold}
|
|
updateTimes={updateTimes}
|
|
data={[series]}
|
|
isActive={isActive}
|
|
/>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<Skeleton className="aspect-video w-full" />
|
|
)}
|
|
{statsHistory.length != 0 ? (
|
|
<>
|
|
{gpuMemSeries && (
|
|
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
|
|
<div className="mb-5">
|
|
{t("general.hardwareInfo.gpuMemory")}
|
|
</div>
|
|
{gpuMemSeries.map((series) => (
|
|
<ThresholdBarGraph
|
|
key={series.name}
|
|
graphId={`${series.name}-mem`}
|
|
unit="%"
|
|
name={series.name}
|
|
threshold={GPUMemThreshold}
|
|
updateTimes={updateTimes}
|
|
data={[series]}
|
|
isActive={isActive}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</>
|
|
) : (
|
|
<Skeleton className="aspect-video w-full" />
|
|
)}
|
|
{statsHistory.length != 0 ? (
|
|
<>
|
|
{gpuEncSeries && gpuEncSeries?.length != 0 && (
|
|
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
|
|
<div className="mb-5">
|
|
{t("general.hardwareInfo.gpuEncoder")}
|
|
</div>
|
|
{gpuEncSeries.map((series) => (
|
|
<ThresholdBarGraph
|
|
key={series.name}
|
|
graphId={`${series.name}-enc`}
|
|
unit="%"
|
|
name={series.name}
|
|
threshold={GPUMemThreshold}
|
|
updateTimes={updateTimes}
|
|
data={[series]}
|
|
isActive={isActive}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</>
|
|
) : (
|
|
<Skeleton className="aspect-video w-full" />
|
|
)}
|
|
{statsHistory.length != 0 ? (
|
|
<>
|
|
{gpuComputeSeries && gpuComputeSeries?.length != 0 && (
|
|
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
|
|
<div className="mb-5">
|
|
{t("general.hardwareInfo.gpuCompute")}
|
|
</div>
|
|
{gpuComputeSeries.map((series) => (
|
|
<ThresholdBarGraph
|
|
key={series.name}
|
|
graphId={`${series.name}-compute`}
|
|
unit="%"
|
|
name={series.name}
|
|
threshold={GPUMemThreshold}
|
|
updateTimes={updateTimes}
|
|
data={[series]}
|
|
isActive={isActive}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</>
|
|
) : (
|
|
<Skeleton className="aspect-video w-full" />
|
|
)}
|
|
{statsHistory.length != 0 ? (
|
|
<>
|
|
{gpuDecSeries && gpuDecSeries?.length != 0 && (
|
|
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
|
|
<div className="mb-5">
|
|
{t("general.hardwareInfo.gpuDecoder")}
|
|
</div>
|
|
{gpuDecSeries.map((series) => (
|
|
<ThresholdBarGraph
|
|
key={series.name}
|
|
graphId={`${series.name}-dec`}
|
|
unit="%"
|
|
name={series.name}
|
|
threshold={GPUMemThreshold}
|
|
updateTimes={updateTimes}
|
|
data={[series]}
|
|
isActive={isActive}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</>
|
|
) : (
|
|
<Skeleton className="aspect-video w-full" />
|
|
)}
|
|
{statsHistory.length != 0 ? (
|
|
<>
|
|
{gpuTempSeries && gpuTempSeries?.length != 0 && (
|
|
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
|
|
<div className="mb-5">
|
|
{t("general.hardwareInfo.gpuTemperature")}
|
|
</div>
|
|
{gpuTempSeries.map((series) => (
|
|
<ThresholdBarGraph
|
|
key={series.name}
|
|
graphId={`${series.name}-temp`}
|
|
name={series.name}
|
|
unit="°C"
|
|
threshold={DetectorTempThreshold}
|
|
updateTimes={updateTimes}
|
|
data={[series]}
|
|
isActive={isActive}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</>
|
|
) : (
|
|
<Skeleton className="aspect-video w-full" />
|
|
)}
|
|
|
|
{statsHistory[0]?.npu_usages && (
|
|
<>
|
|
{statsHistory.length != 0 ? (
|
|
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
|
|
<div className="mb-5">
|
|
{t("general.hardwareInfo.npuUsage")}
|
|
</div>
|
|
{npuSeries.map((series) => (
|
|
<ThresholdBarGraph
|
|
key={series.name}
|
|
graphId={`${series.name}-npu`}
|
|
name={series.name}
|
|
unit="%"
|
|
threshold={GPUUsageThreshold}
|
|
updateTimes={updateTimes}
|
|
data={[series]}
|
|
isActive={isActive}
|
|
/>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<Skeleton className="aspect-video w-full" />
|
|
)}
|
|
{statsHistory.length != 0 ? (
|
|
<>
|
|
{npuTempSeries && npuTempSeries?.length != 0 && (
|
|
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
|
|
<div className="mb-5">
|
|
{t("general.hardwareInfo.npuTemperature")}
|
|
</div>
|
|
{npuTempSeries.map((series) => (
|
|
<ThresholdBarGraph
|
|
key={series.name}
|
|
graphId={`${series.name}-temp`}
|
|
name={series.name}
|
|
unit="°C"
|
|
threshold={DetectorTempThreshold}
|
|
updateTimes={updateTimes}
|
|
data={[series]}
|
|
isActive={isActive}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</>
|
|
) : (
|
|
<Skeleton className="aspect-video w-full" />
|
|
)}
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
<div className="mt-4 text-sm font-medium text-muted-foreground">
|
|
{t("general.otherProcesses.title")}
|
|
</div>
|
|
<div className="mt-4 grid grid-cols-1 gap-2 sm:grid-cols-2">
|
|
{statsHistory.length != 0 ? (
|
|
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
|
|
<div className="mb-5">
|
|
{t("general.otherProcesses.processCpuUsage")}
|
|
</div>
|
|
{otherProcessCpuSeries.map((series, index) => (
|
|
<ThresholdBarGraph
|
|
key={`other-process-cpu-${index}`}
|
|
graphId={`other-process-cpu-${index}`}
|
|
unit="%"
|
|
threshold={DetectorCpuThreshold}
|
|
updateTimes={updateTimes}
|
|
data={[series]}
|
|
isActive={isActive}
|
|
/>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<Skeleton className="aspect-tall w-full" />
|
|
)}
|
|
{statsHistory.length != 0 ? (
|
|
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
|
|
<div className="mb-5">
|
|
{t("general.otherProcesses.processMemoryUsage")}
|
|
</div>
|
|
{otherProcessMemSeries.map((series, index) => (
|
|
<ThresholdBarGraph
|
|
key={`other-process-mem-${index}`}
|
|
graphId={`other-process-mem-${index}`}
|
|
unit="%"
|
|
threshold={DetectorMemThreshold}
|
|
updateTimes={updateTimes}
|
|
data={[series]}
|
|
isActive={isActive}
|
|
/>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<Skeleton className="aspect-tall w-full" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|