mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-01-22 20:18:30 +03:00
frontend
This commit is contained in:
Josh Hawkins
parent
ef409896da
commit
eea708780e
@ -36,6 +36,7 @@ import NotificationView from "@/views/settings/NotificationsSettingsView";
|
||||
import EnrichmentsSettingsView from "@/views/settings/EnrichmentsSettingsView";
|
||||
import UiSettingsView from "@/views/settings/UiSettingsView";
|
||||
import FrigatePlusSettingsView from "@/views/settings/FrigatePlusSettingsView";
|
||||
import MaintenanceSettingsView from "@/views/settings/MaintenanceSettingsView";
|
||||
import { useSearchEffect } from "@/hooks/use-overlay-state";
|
||||
import { useNavigate, useSearchParams } from "react-router-dom";
|
||||
import { useInitialCameraState } from "@/api/ws";
|
||||
@ -81,6 +82,7 @@ const allSettingsViews = [
|
||||
"roles",
|
||||
"notifications",
|
||||
"frigateplus",
|
||||
"maintenance",
|
||||
] as const;
|
||||
type SettingsType = (typeof allSettingsViews)[number];
|
||||
|
||||
@ -120,6 +122,10 @@ const settingsGroups = [
|
||||
label: "frigateplus",
|
||||
items: [{ key: "frigateplus", component: FrigatePlusSettingsView }],
|
||||
},
|
||||
{
|
||||
label: "maintenance",
|
||||
items: [{ key: "maintenance", component: MaintenanceSettingsView }],
|
||||
},
|
||||
];
|
||||
|
||||
const CAMERA_SELECT_BUTTON_PAGES = [
|
||||
|
||||
442
web/src/views/settings/MaintenanceSettingsView.tsx
Normal file
442
web/src/views/settings/MaintenanceSettingsView.tsx
Normal file
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user