mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-07-27 06:09:01 +03:00
Early 0.18 work (#22138)
* Update version * Create scaffolding for case management (#21293) * implement case management for export apis (#21295) * refactor vainfo to search for first GPU (#21296) use existing LibvaGpuSelector to pick appropritate libva device * Case management UI (#21299) * Refactor export cards to match existing cards in other UI pages * Show cases separately from exports * Add proper filtering and display of cases * Add ability to edit and select cases for exports * Cleanup typing * Hide if no unassigned * Cleanup hiding logic * fix scrolling * Improve layout * Camera connection quality indicator (#21297) * add camera connection quality metrics and indicator * formatting * move stall calcs to watchdog * clean up * change watchdog to 1s and separately track time for ffmpeg retry_interval * implement status caching to reduce message volume * Export filter UI (#21322) * Get started on export filters * implement basic filter * Implement filtering and adjust api * Improve filter handling * Improve navigation * Cleanup * handle scrolling * Refactor temperature reporting for detectors and implement Hailo temp reading (#21395) * Add Hailo temperature retrieval * Refactor `get_hailo_temps()` to use ctxmanager * Show Hailo temps in system UI * Move hailo_platform import to get_hailo_temps * Refactor temperatures calculations to use within detector block * Adjust webUI to handle new location --------- Co-authored-by: tigattack <10629864+tigattack@users.noreply.github.com> * Camera-specific hwaccel settings for timelapse exports (correct base) (#21386) * added hwaccel_args to camera.record.export config struct * populate camera.record.export.hwaccel_args with a cascade up to camera then global if 'auto' * use new hwaccel args in export * added documentation for camera-specific hwaccel export * fix c/p error * missed an import * fleshed out the docs and comments a bit * ruff lint * separated out the tips in the doc * fix documentation * fix and simplify reference config doc * Add support for GPU and NPU temperatures (#21495) * Add rockchip temps * Add support for GPU and NPU temperatures in the frontend * Add support for Nvidia temperature * Improve separation * Adjust graph scaling * Exports Improvements (#21521) * Add images to case folder view * Add ability to select case in export dialog * Add to mobile review too * Add API to handle deleting recordings (#21520) * Add recording delete API * Re-organize recordings apis * Fix import * Consolidate query types * Add media sync API endpoint (#21526) * add media cleanup functions * add endpoint * remove scheduled sync recordings from cleanup * move to utils dir * tweak import * remove sync_recordings and add config migrator * remove sync_recordings * docs * remove key * clean up docs * docs fix * docs tweak * Media sync API refactor and UI (#21542) * generic job infrastructure * types and dispatcher changes for jobs * save data in memory only for completed jobs * implement media sync job and endpoints * change logs to debug * websocket hook and types * frontend * i18n * docs tweaks * endpoint descriptions * tweak docs * use same logging pattern in sync_recordings as the other sync functions (#21625) * Fix incorrect counting in sync_recordings (#21626) * Update go2rtc to v1.9.13 (#21648) Co-authored-by: Eugeny Tulupov <eugeny.tulupov@spirent.com> * Refactor Time-Lapse Export (#21668) * refactor time lapse creation to be a separate API call with ability to pass arbitrary ffmpeg args * Add CPU fallback * Optimize empty directory cleanup for recordings (#21695) The previous empty directory cleanup did a full recursive directory walk, which can be extremely slow. This new implementation only removes directories which have a chance of being empty due to a recent file deletion. * Implement llama.cpp GenAI Provider (#21690) * Implement llama.cpp GenAI Provider * Add docs * Update links * Fix broken mqtt links * Fix more broken anchors * Remove parents in remove_empty_directories (#21726) The original implementation did a full directory tree walk to find and remove empty directories, so this implementation should remove the parents as well, like the original did. * Implement LLM Chat API with tool calling support (#21731) * Implement initial tools definiton APIs * Add initial chat completion API with tool support * Implement other providers * Cleanup * Offline preview image (#21752) * use latest preview frame for latest image when camera is offline * remove frame extraction logic * tests * frontend * add description to api endpoint * Update to ROCm 7.2.0 (#21753) * Update to ROCm 7.2.0 * ROCm now works properly with JinaV1 * Arcface has compilation error * Add live context tool to LLM (#21754) * Add live context tool * Improve handling of images in request * Improve prompt caching * Add networking options for configuring listening ports (#21779) * feat: add X-Frame-Time when returning snapshot (#21932) Co-authored-by: Florent MORICONI <170678386+fmcloudconsulting@users.noreply.github.com> * Improve jsmpeg player websocket handling (#21943) * improve jsmpeg player websocket handling prevent websocket console messages from appearing when player is destroyed * reformat files after ruff upgrade * Allow API Events to be Detections or Alerts, depending on the Event Label (#21923) * - API created events will be alerts OR detections, depending on the event label, defaulting to alerts - Indefinite API events will extend the recording segment until those events are ended - API event start time is the actual start time, instead of having a pre-buffer of record.event_pre_capture * Instead of checking for indefinite events on a camera before deciding if we should end the segment, only update last_detection_time and last_alert_time if frame_time is greater, which should have the same effect * Add the ability to set a pre_capture number of seconds when creating a manual event via the API. Default behavior unchanged * Remove unnecessary _publish_segment_start() call * Formatting * handle last_alert_time or last_detection_time being None when checking them against the frame_time * comment manual_info["label"].split(": ")[0] for clarity * ffmpeg Preview Segment Optimization for "high" and "very_high" (#21996) * Introduce qmax parameter for ffmpeg preview encoding Added PREVIEW_QMAX_PARAM to control ffmpeg encoding quality. * formatting * Fix spacing in qmax parameters for preview quality * Adapt to new Gemini format * Fix frame time access * Remove exceptions * Cleanup --------- Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> Co-authored-by: tigattack <10629864+tigattack@users.noreply.github.com> Co-authored-by: Andrew Roberts <adroberts@gmail.com> Co-authored-by: Eugeny Tulupov <zhekka3@gmail.com> Co-authored-by: Eugeny Tulupov <eugeny.tulupov@spirent.com> Co-authored-by: John Shaw <1753078+johnshaw@users.noreply.github.com> Co-authored-by: Eric Work <work.eric@gmail.com> Co-authored-by: FL42 <46161216+fl42@users.noreply.github.com> Co-authored-by: Florent MORICONI <170678386+fmcloudconsulting@users.noreply.github.com> Co-authored-by: nulledy <254504350+nulledy@users.noreply.github.com>
This commit is contained in:
Nicolas Mowen
co-authored by
Josh Hawkins
tigattack
Andrew Roberts
Eugeny Tulupov
Eugeny Tulupov
John Shaw
Eric Work
FL42
Florent MORICONI
nulledy
Josh Hawkins
tigattack
Andrew Roberts
Eugeny Tulupov
Eugeny Tulupov
John Shaw
Eric Work
FL42
Florent MORICONI
nulledy
parent
7df3622243
commit
d24b96d3bb
@@ -0,0 +1,442 @@
|
||||
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,6 +1,7 @@
|
||||
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";
|
||||
@@ -282,8 +283,37 @@ export default function CameraMetrics({
|
||||
)}
|
||||
<div className="flex w-full flex-col gap-3">
|
||||
<div className="flex flex-row items-center justify-between">
|
||||
<div className="text-sm font-medium text-muted-foreground smart-capitalize">
|
||||
<CameraNameLabel camera={camera} />
|
||||
<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>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
|
||||
@@ -127,13 +127,6 @@ 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 }[] };
|
||||
} = {};
|
||||
@@ -143,22 +136,22 @@ export default function GeneralMetrics({
|
||||
return;
|
||||
}
|
||||
|
||||
Object.entries(stats.detectors).forEach(([key], cIdx) => {
|
||||
if (!key.includes("coral")) {
|
||||
Object.entries(stats.detectors).forEach(([key, detectorStats]) => {
|
||||
if (detectorStats.temperature === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (cIdx <= Object.keys(stats.service.temperatures).length) {
|
||||
if (!(key in series)) {
|
||||
series[key] = {
|
||||
name: key,
|
||||
data: [],
|
||||
};
|
||||
}
|
||||
|
||||
const temp = Object.values(stats.service.temperatures)[cIdx];
|
||||
series[key].data.push({ x: statsIdx + 1, y: Math.round(temp) });
|
||||
if (!(key in series)) {
|
||||
series[key] = {
|
||||
name: key,
|
||||
data: [],
|
||||
};
|
||||
}
|
||||
|
||||
series[key].data.push({
|
||||
x: statsIdx + 1,
|
||||
y: Math.round(detectorStats.temperature),
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -375,6 +368,40 @@ 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) {
|
||||
@@ -455,6 +482,40 @@ 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(() => {
|
||||
@@ -676,7 +737,11 @@ export default function GeneralMetrics({
|
||||
<div
|
||||
className={cn(
|
||||
"mt-4 grid grid-cols-1 gap-2 sm:grid-cols-2",
|
||||
gpuEncSeries?.length && "md:grid-cols-4",
|
||||
gpuTempSeries?.length && "md:grid-cols-3",
|
||||
gpuEncSeries?.length && "xl:grid-cols-4",
|
||||
gpuEncSeries?.length &&
|
||||
gpuTempSeries?.length &&
|
||||
"3xl:grid-cols-5",
|
||||
)}
|
||||
>
|
||||
{statsHistory[0]?.gpu_usages && (
|
||||
@@ -811,6 +876,30 @@ 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 && (
|
||||
<>
|
||||
@@ -834,6 +923,30 @@ 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