mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-08-02 09:02:15 +03:00
This reverts commit d24b96d3bb.
This commit is contained in:
Nicolas Mowen
@@ -1,442 +0,0 @@
|
||||
import Heading from "@/components/ui/heading";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Toaster } from "@/components/ui/sonner";
|
||||
import ActivityIndicator from "@/components/indicators/activity-indicator";
|
||||
import { useCallback, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import axios from "axios";
|
||||
import { toast } from "sonner";
|
||||
import { useJobStatus } from "@/api/ws";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { LuCheck, LuX } from "react-icons/lu";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
|
||||
import { MediaSyncStats } from "@/types/ws";
|
||||
|
||||
export default function MaintenanceSettingsView() {
|
||||
const { t } = useTranslation("views/settings");
|
||||
const [selectedMediaTypes, setSelectedMediaTypes] = useState<string[]>([
|
||||
"all",
|
||||
]);
|
||||
const [dryRun, setDryRun] = useState(true);
|
||||
const [force, setForce] = useState(false);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const MEDIA_TYPES = [
|
||||
{ id: "event_snapshots", label: t("maintenance.sync.event_snapshots") },
|
||||
{ id: "event_thumbnails", label: t("maintenance.sync.event_thumbnails") },
|
||||
{ id: "review_thumbnails", label: t("maintenance.sync.review_thumbnails") },
|
||||
{ id: "previews", label: t("maintenance.sync.previews") },
|
||||
{ id: "exports", label: t("maintenance.sync.exports") },
|
||||
{ id: "recordings", label: t("maintenance.sync.recordings") },
|
||||
];
|
||||
|
||||
// Subscribe to media sync status via WebSocket
|
||||
const { payload: currentJob } = useJobStatus("media_sync");
|
||||
|
||||
const isJobRunning = Boolean(
|
||||
currentJob &&
|
||||
(currentJob.status === "queued" || currentJob.status === "running"),
|
||||
);
|
||||
|
||||
const handleMediaTypeChange = useCallback((id: string, checked: boolean) => {
|
||||
setSelectedMediaTypes((prev) => {
|
||||
if (id === "all") {
|
||||
return checked ? ["all"] : [];
|
||||
}
|
||||
|
||||
let next = prev.filter((t) => t !== "all");
|
||||
if (checked) {
|
||||
next.push(id);
|
||||
} else {
|
||||
next = next.filter((t) => t !== id);
|
||||
}
|
||||
return next.length === 0 ? ["all"] : next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleStartSync = useCallback(async () => {
|
||||
setIsSubmitting(true);
|
||||
|
||||
try {
|
||||
const response = await axios.post(
|
||||
"/media/sync",
|
||||
{
|
||||
dry_run: dryRun,
|
||||
media_types: selectedMediaTypes,
|
||||
force: force,
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
if (response.status === 202) {
|
||||
toast.success(t("maintenance.sync.started"), {
|
||||
position: "top-center",
|
||||
closeButton: true,
|
||||
});
|
||||
} else if (response.status === 409) {
|
||||
toast.error(t("maintenance.sync.alreadyRunning"), {
|
||||
position: "top-center",
|
||||
closeButton: true,
|
||||
});
|
||||
}
|
||||
} catch {
|
||||
toast.error(t("maintenance.sync.error"), {
|
||||
position: "top-center",
|
||||
closeButton: true,
|
||||
});
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
}, [selectedMediaTypes, dryRun, force, t]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex size-full flex-col md:flex-row">
|
||||
<Toaster position="top-center" closeButton={true} />
|
||||
<div className="scrollbar-container order-last mb-2 mt-2 flex h-full w-full flex-col overflow-y-auto px-2 md:order-none">
|
||||
<div className="grid w-full grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div className="col-span-1">
|
||||
<Heading as="h4" className="mb-2">
|
||||
{t("maintenance.sync.title")}
|
||||
</Heading>
|
||||
|
||||
<div className="max-w-6xl">
|
||||
<div className="mb-5 mt-2 flex max-w-5xl flex-col gap-2 text-sm text-primary-variant">
|
||||
<p>{t("maintenance.sync.desc")}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Media Types Selection */}
|
||||
<div>
|
||||
<Label className="mb-2 flex flex-row items-center text-base">
|
||||
{t("maintenance.sync.mediaTypes")}
|
||||
</Label>
|
||||
<div className="max-w-md space-y-2 rounded-lg bg-secondary p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label
|
||||
htmlFor="all-media"
|
||||
className="cursor-pointer font-medium"
|
||||
>
|
||||
{t("maintenance.sync.allMedia")}
|
||||
</Label>
|
||||
<Switch
|
||||
id="all-media"
|
||||
checked={selectedMediaTypes.includes("all")}
|
||||
onCheckedChange={(checked) =>
|
||||
handleMediaTypeChange("all", checked)
|
||||
}
|
||||
disabled={isJobRunning}
|
||||
/>
|
||||
</div>
|
||||
<div className="ml-4 space-y-2">
|
||||
{MEDIA_TYPES.map((type) => (
|
||||
<div
|
||||
key={type.id}
|
||||
className="flex items-center justify-between"
|
||||
>
|
||||
<Label htmlFor={type.id} className="cursor-pointer">
|
||||
{type.label}
|
||||
</Label>
|
||||
<Switch
|
||||
id={type.id}
|
||||
checked={
|
||||
selectedMediaTypes.includes("all") ||
|
||||
selectedMediaTypes.includes(type.id)
|
||||
}
|
||||
onCheckedChange={(checked) =>
|
||||
handleMediaTypeChange(type.id, checked)
|
||||
}
|
||||
disabled={
|
||||
isJobRunning || selectedMediaTypes.includes("all")
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Options */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex flex-col">
|
||||
<div className="flex flex-row items-center">
|
||||
<Switch
|
||||
id="dry-run"
|
||||
className="mr-3"
|
||||
checked={dryRun}
|
||||
onCheckedChange={setDryRun}
|
||||
disabled={isJobRunning}
|
||||
/>
|
||||
<div className="space-y-0.5">
|
||||
<Label htmlFor="dry-run" className="cursor-pointer">
|
||||
{t("maintenance.sync.dryRun")}
|
||||
</Label>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{dryRun
|
||||
? t("maintenance.sync.dryRunEnabled")
|
||||
: t("maintenance.sync.dryRunDisabled")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<div className="flex flex-row items-center">
|
||||
<Switch
|
||||
id="force"
|
||||
className="mr-3"
|
||||
checked={force}
|
||||
onCheckedChange={setForce}
|
||||
disabled={isJobRunning}
|
||||
/>
|
||||
<div className="space-y-0.5">
|
||||
<Label htmlFor="force" className="cursor-pointer">
|
||||
{t("maintenance.sync.force")}
|
||||
</Label>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("maintenance.sync.forceDesc")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex w-full flex-row items-center gap-2 pt-2 md:w-[50%]">
|
||||
<Button
|
||||
onClick={handleStartSync}
|
||||
disabled={isJobRunning || isSubmitting}
|
||||
className="flex flex-1"
|
||||
variant={"select"}
|
||||
>
|
||||
{(isSubmitting || isJobRunning) && (
|
||||
<ActivityIndicator className="mr-2 size-6" />
|
||||
)}
|
||||
{isJobRunning
|
||||
? t("maintenance.sync.running")
|
||||
: t("maintenance.sync.start")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-span-1">
|
||||
<div className="mt-4 gap-2 space-y-3 md:mt-8">
|
||||
<Separator className="my-2 flex bg-secondary md:hidden" />
|
||||
<div className="flex flex-row items-center justify-between rounded-lg bg-card p-3 md:mr-2">
|
||||
<Heading as="h4" className="my-2">
|
||||
{t("maintenance.sync.currentStatus")}
|
||||
</Heading>
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-row items-center gap-2",
|
||||
currentJob?.status === "success" && "text-green-500",
|
||||
currentJob?.status === "failed" && "text-destructive",
|
||||
)}
|
||||
>
|
||||
{currentJob?.status === "success" && (
|
||||
<LuCheck className="size-5" />
|
||||
)}
|
||||
{currentJob?.status === "failed" && (
|
||||
<LuX className="size-5" />
|
||||
)}
|
||||
{(currentJob?.status === "running" ||
|
||||
currentJob?.status === "queued") && (
|
||||
<ActivityIndicator className="size-5" />
|
||||
)}
|
||||
{t(
|
||||
`maintenance.sync.status.${currentJob?.status ?? "notRunning"}`,
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Current Job Status */}
|
||||
<div className="space-y-2 text-sm">
|
||||
{currentJob?.start_time && (
|
||||
<div className="flex gap-1">
|
||||
<span className="text-muted-foreground">
|
||||
{t("maintenance.sync.startTime")}:
|
||||
</span>
|
||||
<span className="font-mono">
|
||||
{formatUnixTimestampToDateTime(
|
||||
currentJob?.start_time ?? "-",
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{currentJob?.end_time && (
|
||||
<div className="flex gap-1">
|
||||
<span className="text-muted-foreground">
|
||||
{t("maintenance.sync.endTime")}:
|
||||
</span>
|
||||
<span className="font-mono">
|
||||
{formatUnixTimestampToDateTime(currentJob?.end_time)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{currentJob?.results && (
|
||||
<div className="mt-2 space-y-2 md:mr-2">
|
||||
<p className="text-sm font-medium text-muted-foreground">
|
||||
{t("maintenance.sync.results")}
|
||||
</p>
|
||||
<div className="rounded-md border border-secondary">
|
||||
{/* Individual media type results */}
|
||||
<div className="divide-y divide-secondary">
|
||||
{Object.entries(currentJob.results)
|
||||
.filter(([key]) => key !== "totals")
|
||||
.map(([mediaType, stats]) => {
|
||||
const mediaStats = stats as MediaSyncStats;
|
||||
return (
|
||||
<div key={mediaType} className="p-3 pb-3">
|
||||
<p className="mb-1 font-medium capitalize">
|
||||
{t(`maintenance.sync.${mediaType}`)}
|
||||
</p>
|
||||
<div className="ml-2 space-y-0.5">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">
|
||||
{t(
|
||||
"maintenance.sync.resultsFields.filesChecked",
|
||||
)}
|
||||
</span>
|
||||
<span>{mediaStats.files_checked}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">
|
||||
{t(
|
||||
"maintenance.sync.resultsFields.orphansFound",
|
||||
)}
|
||||
</span>
|
||||
<span
|
||||
className={
|
||||
mediaStats.orphans_found > 0
|
||||
? "text-yellow-500"
|
||||
: ""
|
||||
}
|
||||
>
|
||||
{mediaStats.orphans_found}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">
|
||||
{t(
|
||||
"maintenance.sync.resultsFields.orphansDeleted",
|
||||
)}
|
||||
</span>
|
||||
<span
|
||||
className={cn(
|
||||
"text-muted-foreground",
|
||||
mediaStats.orphans_deleted > 0 &&
|
||||
"text-success",
|
||||
mediaStats.orphans_deleted === 0 &&
|
||||
mediaStats.aborted &&
|
||||
"text-destructive",
|
||||
)}
|
||||
>
|
||||
{mediaStats.orphans_deleted}
|
||||
</span>
|
||||
</div>
|
||||
{mediaStats.aborted && (
|
||||
<div className="flex items-center gap-2 text-destructive">
|
||||
<LuX className="size-4" />
|
||||
|
||||
{t(
|
||||
"maintenance.sync.resultsFields.aborted",
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{mediaStats.error && (
|
||||
<div className="text-destructive">
|
||||
{t(
|
||||
"maintenance.sync.resultsFields.error",
|
||||
)}
|
||||
{": "}
|
||||
{mediaStats.error}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{/* Totals */}
|
||||
{currentJob.results.totals && (
|
||||
<div className="border-t border-secondary bg-background_alt p-3">
|
||||
<p className="mb-1 font-medium">
|
||||
{t("maintenance.sync.resultsFields.totals")}
|
||||
</p>
|
||||
<div className="ml-2 space-y-0.5">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">
|
||||
{t(
|
||||
"maintenance.sync.resultsFields.filesChecked",
|
||||
)}
|
||||
</span>
|
||||
<span className="font-medium">
|
||||
{currentJob.results.totals.files_checked}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">
|
||||
{t(
|
||||
"maintenance.sync.resultsFields.orphansFound",
|
||||
)}
|
||||
</span>
|
||||
<span
|
||||
className={
|
||||
currentJob.results.totals.orphans_found > 0
|
||||
? "font-medium text-yellow-500"
|
||||
: "font-medium"
|
||||
}
|
||||
>
|
||||
{currentJob.results.totals.orphans_found}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">
|
||||
{t(
|
||||
"maintenance.sync.resultsFields.orphansDeleted",
|
||||
)}
|
||||
</span>
|
||||
<span
|
||||
className={cn(
|
||||
"text-medium",
|
||||
currentJob.results.totals.orphans_deleted >
|
||||
0
|
||||
? "text-success"
|
||||
: "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{currentJob.results.totals.orphans_deleted}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{currentJob?.error_message && (
|
||||
<div className="text-destructive">
|
||||
<p className="text-muted-foreground">
|
||||
{t("maintenance.sync.errorLabel")}
|
||||
</p>
|
||||
<p>{currentJob?.error_message}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +1,6 @@
|
||||
import { useFrigateStats } from "@/api/ws";
|
||||
import { CameraLineGraph } from "@/components/graph/LineGraph";
|
||||
import CameraInfoDialog from "@/components/overlay/CameraInfoDialog";
|
||||
import { ConnectionQualityIndicator } from "@/components/camera/ConnectionQualityIndicator";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { FrigateConfig } from "@/types/frigateConfig";
|
||||
import { FrigateStats } from "@/types/stats";
|
||||
@@ -283,37 +282,8 @@ export default function CameraMetrics({
|
||||
)}
|
||||
<div className="flex w-full flex-col gap-3">
|
||||
<div className="flex flex-row items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="text-sm font-medium text-muted-foreground smart-capitalize">
|
||||
<CameraNameLabel camera={camera} />
|
||||
</div>
|
||||
{statsHistory.length > 0 &&
|
||||
statsHistory[statsHistory.length - 1]?.cameras[
|
||||
camera.name
|
||||
] && (
|
||||
<ConnectionQualityIndicator
|
||||
quality={
|
||||
statsHistory[statsHistory.length - 1]?.cameras[
|
||||
camera.name
|
||||
]?.connection_quality
|
||||
}
|
||||
expectedFps={
|
||||
statsHistory[statsHistory.length - 1]?.cameras[
|
||||
camera.name
|
||||
]?.expected_fps || 0
|
||||
}
|
||||
reconnects={
|
||||
statsHistory[statsHistory.length - 1]?.cameras[
|
||||
camera.name
|
||||
]?.reconnects_last_hour || 0
|
||||
}
|
||||
stalls={
|
||||
statsHistory[statsHistory.length - 1]?.cameras[
|
||||
camera.name
|
||||
]?.stalls_last_hour || 0
|
||||
}
|
||||
/>
|
||||
)}
|
||||
<div className="text-sm font-medium text-muted-foreground smart-capitalize">
|
||||
<CameraNameLabel camera={camera} />
|
||||
</div>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
|
||||
@@ -127,6 +127,13 @@ export default function GeneralMetrics({
|
||||
return undefined;
|
||||
}
|
||||
|
||||
if (
|
||||
statsHistory.length > 0 &&
|
||||
Object.keys(statsHistory[0].service.temperatures).length == 0
|
||||
) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const series: {
|
||||
[key: string]: { name: string; data: { x: number; y: number }[] };
|
||||
} = {};
|
||||
@@ -136,22 +143,22 @@ export default function GeneralMetrics({
|
||||
return;
|
||||
}
|
||||
|
||||
Object.entries(stats.detectors).forEach(([key, detectorStats]) => {
|
||||
if (detectorStats.temperature === undefined) {
|
||||
Object.entries(stats.detectors).forEach(([key], cIdx) => {
|
||||
if (!key.includes("coral")) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!(key in series)) {
|
||||
series[key] = {
|
||||
name: key,
|
||||
data: [],
|
||||
};
|
||||
}
|
||||
if (cIdx <= Object.keys(stats.service.temperatures).length) {
|
||||
if (!(key in series)) {
|
||||
series[key] = {
|
||||
name: key,
|
||||
data: [],
|
||||
};
|
||||
}
|
||||
|
||||
series[key].data.push({
|
||||
x: statsIdx + 1,
|
||||
y: Math.round(detectorStats.temperature),
|
||||
});
|
||||
const temp = Object.values(stats.service.temperatures)[cIdx];
|
||||
series[key].data.push({ x: statsIdx + 1, y: Math.round(temp) });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@@ -368,40 +375,6 @@ export default function GeneralMetrics({
|
||||
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]);
|
||||
|
||||
// Check if Intel GPU has all 0% usage values (known bug)
|
||||
const showIntelGpuWarning = useMemo(() => {
|
||||
if (!statsHistory || statsHistory.length < 3) {
|
||||
@@ -482,40 +455,6 @@ export default function GeneralMetrics({
|
||||
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]);
|
||||
|
||||
// other processes stats
|
||||
|
||||
const hardwareType = useMemo(() => {
|
||||
@@ -737,11 +676,7 @@ export default function GeneralMetrics({
|
||||
<div
|
||||
className={cn(
|
||||
"mt-4 grid grid-cols-1 gap-2 sm:grid-cols-2",
|
||||
gpuTempSeries?.length && "md:grid-cols-3",
|
||||
gpuEncSeries?.length && "xl:grid-cols-4",
|
||||
gpuEncSeries?.length &&
|
||||
gpuTempSeries?.length &&
|
||||
"3xl:grid-cols-5",
|
||||
gpuEncSeries?.length && "md:grid-cols-4",
|
||||
)}
|
||||
>
|
||||
{statsHistory[0]?.gpu_usages && (
|
||||
@@ -876,30 +811,6 @@ export default function GeneralMetrics({
|
||||
) : (
|
||||
<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]}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Skeleton className="aspect-video w-full" />
|
||||
)}
|
||||
|
||||
{statsHistory[0]?.npu_usages && (
|
||||
<>
|
||||
@@ -923,30 +834,6 @@ export default function GeneralMetrics({
|
||||
) : (
|
||||
<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]}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Skeleton className="aspect-video w-full" />
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user