mirror of
https://github.com/blakeblackshear/frigate.git
synced 2024-11-21 19:07:46 +01:00
Implement alerts when a potential problem is detected (#10734)
* Implement alerts on statusbar when a potential problem is detected * Add alert to mobile
This commit is contained in:
Nicolas Mowen
GitHub
parent
190cdc471a
commit
89f843cf95
@ -1,6 +1,8 @@
|
||||
import { useFrigateStats } from "@/api/ws";
|
||||
import useStats from "@/hooks/use-stats";
|
||||
import { FrigateStats } from "@/types/stats";
|
||||
import { useMemo } from "react";
|
||||
import { IoIosWarning } from "react-icons/io";
|
||||
import { MdCircle } from "react-icons/md";
|
||||
import useSWR from "swr";
|
||||
|
||||
@ -27,58 +29,70 @@ export default function Statusbar() {
|
||||
return parseInt(systemCpu);
|
||||
}, [stats]);
|
||||
|
||||
const { potentialProblems } = useStats(stats);
|
||||
|
||||
return (
|
||||
<div className="absolute left-0 bottom-0 right-0 w-full h-8 flex items-center px-4 bg-primary z-10 text-secondary-foreground border-t border-secondary-highlight">
|
||||
{cpuPercent && (
|
||||
<div className="flex items-center text-sm mr-4">
|
||||
<MdCircle
|
||||
className={`w-2 h-2 mr-2 ${
|
||||
cpuPercent < 50
|
||||
? "text-green-500"
|
||||
: cpuPercent < 80
|
||||
? "text-orange-400"
|
||||
: "text-danger"
|
||||
}`}
|
||||
/>
|
||||
CPU {cpuPercent}%
|
||||
</div>
|
||||
)}
|
||||
{Object.entries(stats?.gpu_usages || {}).map(([name, stats]) => {
|
||||
if (name == "error-gpu") {
|
||||
return;
|
||||
}
|
||||
|
||||
let gpuTitle;
|
||||
switch (name) {
|
||||
case "amd-vaapi":
|
||||
gpuTitle = "AMD GPU";
|
||||
break;
|
||||
case "intel-vaapi":
|
||||
case "intel-qsv":
|
||||
gpuTitle = "Intel GPU";
|
||||
break;
|
||||
default:
|
||||
gpuTitle = name;
|
||||
break;
|
||||
}
|
||||
|
||||
const gpu = parseInt(stats.gpu);
|
||||
|
||||
return (
|
||||
<div key={gpuTitle} className="flex items-center text-sm">
|
||||
<div className="absolute left-0 bottom-0 right-0 w-full h-8 flex justify-between items-center px-4 bg-primary z-10 text-secondary-foreground border-t border-secondary-highlight">
|
||||
<div className="h-full flex items-center gap-2">
|
||||
{cpuPercent && (
|
||||
<div className="flex items-center text-sm gap-2">
|
||||
<MdCircle
|
||||
className={`w-2 h-2 mr-2 ${
|
||||
gpu < 50
|
||||
? "text-green-500"
|
||||
: gpu < 80
|
||||
className={`size-2 ${
|
||||
cpuPercent < 50
|
||||
? "text-success"
|
||||
: cpuPercent < 80
|
||||
? "text-orange-400"
|
||||
: "text-danger"
|
||||
}`}
|
||||
/>
|
||||
{gpuTitle} {gpu}%
|
||||
CPU {cpuPercent}%
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
)}
|
||||
{Object.entries(stats?.gpu_usages || {}).map(([name, stats]) => {
|
||||
if (name == "error-gpu") {
|
||||
return;
|
||||
}
|
||||
|
||||
let gpuTitle;
|
||||
switch (name) {
|
||||
case "amd-vaapi":
|
||||
gpuTitle = "AMD GPU";
|
||||
break;
|
||||
case "intel-vaapi":
|
||||
case "intel-qsv":
|
||||
gpuTitle = "Intel GPU";
|
||||
break;
|
||||
default:
|
||||
gpuTitle = name;
|
||||
break;
|
||||
}
|
||||
|
||||
const gpu = parseInt(stats.gpu);
|
||||
|
||||
return (
|
||||
<div key={gpuTitle} className="flex items-center text-sm gap-2">
|
||||
<MdCircle
|
||||
className={`size-2 ${
|
||||
gpu < 50
|
||||
? "text-success"
|
||||
: gpu < 80
|
||||
? "text-orange-400"
|
||||
: "text-danger"
|
||||
}`}
|
||||
/>
|
||||
{gpuTitle} {gpu}%
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="h-full flex items-center gap-2">
|
||||
{potentialProblems.map((prob) => (
|
||||
<div className="flex items-center text-sm gap-2 capitalize">
|
||||
<IoIosWarning className={`size-5 ${prob.color}`} />
|
||||
{prob.text}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,6 +1,13 @@
|
||||
import { navbarLinks } from "@/pages/site-navigation";
|
||||
import NavItem from "./NavItem";
|
||||
import SettingsNavItems from "../settings/SettingsNavItems";
|
||||
import { IoIosWarning } from "react-icons/io";
|
||||
import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
|
||||
import useSWR from "swr";
|
||||
import { FrigateStats } from "@/types/stats";
|
||||
import { useFrigateStats } from "@/api/ws";
|
||||
import { useMemo } from "react";
|
||||
import useStats from "@/hooks/use-stats";
|
||||
|
||||
function Bottombar() {
|
||||
return (
|
||||
@ -17,10 +24,46 @@ function Bottombar() {
|
||||
/>
|
||||
))}
|
||||
<SettingsNavItems className="flex flex-shrink-0 justify-between gap-4" />
|
||||
<StatusAlertNav />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
//
|
||||
function StatusAlertNav() {
|
||||
const { data: initialStats } = useSWR<FrigateStats>("stats", {
|
||||
revalidateOnFocus: false,
|
||||
});
|
||||
const { payload: latestStats } = useFrigateStats();
|
||||
const stats = useMemo(() => {
|
||||
if (latestStats) {
|
||||
return latestStats;
|
||||
}
|
||||
|
||||
return initialStats;
|
||||
}, [initialStats, latestStats]);
|
||||
const { potentialProblems } = useStats(stats);
|
||||
|
||||
if (!potentialProblems || potentialProblems.length == 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<Drawer>
|
||||
<DrawerTrigger>
|
||||
<IoIosWarning className="size-5 text-danger" />
|
||||
</DrawerTrigger>
|
||||
<DrawerContent className="max-h-[75dvh] px-2 mx-1 rounded-t-2xl overflow-hidden">
|
||||
<div className="w-full h-auto py-4 overflow-y-auto overflow-x-hidden flex flex-col items-center gap-2">
|
||||
{potentialProblems.map((prob) => (
|
||||
<div className="w-full flex items-center text-xs gap-2 capitalize">
|
||||
<IoIosWarning className={`size-5 ${prob.color}`} />
|
||||
{prob.text}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
|
||||
export default Bottombar;
|
||||
|
||||
63
web/src/hooks/use-stats.ts
Normal file
63
web/src/hooks/use-stats.ts
Normal file
@ -0,0 +1,63 @@
|
||||
import { FrigateStats, PotentialProblem } from "@/types/stats";
|
||||
import { useMemo } from "react";
|
||||
|
||||
export default function useStats(stats: FrigateStats | undefined) {
|
||||
const potentialProblems = useMemo<PotentialProblem[]>(() => {
|
||||
const problems: PotentialProblem[] = [];
|
||||
|
||||
if (!stats) {
|
||||
return problems;
|
||||
}
|
||||
|
||||
// check detectors for high inference speeds
|
||||
Object.entries(stats["detectors"]).forEach(([key, det]) => {
|
||||
if (det["inference_speed"] > 100) {
|
||||
problems.push({
|
||||
text: `${key} is very slow (${det["inference_speed"]} ms)`,
|
||||
color: "text-danger",
|
||||
});
|
||||
} else if (det["inference_speed"] > 50) {
|
||||
problems.push({
|
||||
text: `${key} is slow (${det["inference_speed"]} ms)`,
|
||||
color: "text-orange-400",
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// check for offline cameras
|
||||
Object.entries(stats["cameras"]).forEach(([name, cam]) => {
|
||||
if (cam["camera_fps"] == 0) {
|
||||
problems.push({
|
||||
text: `${name.replaceAll("_", " ")} is offline`,
|
||||
color: "text-danger",
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// check camera cpu usages
|
||||
Object.entries(stats["cameras"]).forEach(([name, cam]) => {
|
||||
const ffmpegAvg = parseFloat(
|
||||
stats["cpu_usages"][cam["ffmpeg_pid"]].cpu_average,
|
||||
);
|
||||
const detectAvg = parseFloat(stats["cpu_usages"][cam["pid"]].cpu_average);
|
||||
|
||||
if (!isNaN(ffmpegAvg) && ffmpegAvg >= 20.0) {
|
||||
problems.push({
|
||||
text: `${name.replaceAll("_", " ")} has high FFMPEG CPU usage (${ffmpegAvg}%)`,
|
||||
color: "text-danger",
|
||||
});
|
||||
}
|
||||
|
||||
if (!isNaN(detectAvg) && detectAvg >= 40.0) {
|
||||
problems.push({
|
||||
text: `${name.replaceAll("_", " ")} has high detect CPU usage (${detectAvg}%)`,
|
||||
color: "text-danger",
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return problems;
|
||||
}, [stats]);
|
||||
|
||||
return { potentialProblems };
|
||||
}
|
||||
@ -58,3 +58,8 @@ export type StorageStats = {
|
||||
used: number;
|
||||
mount_type: string;
|
||||
};
|
||||
|
||||
export type PotentialProblem = {
|
||||
text: string;
|
||||
color: string;
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user