Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

Add link to system stats from status bar (#11303)

Browse Source
This commit is contained in:
Nicolas Mowen 2024-05-09 07:19:41 -06:00 committed by GitHub
parent 2be15b6c01
commit e1cbefb692
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 32 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
web/src/components/Statusbar.tsx
View File

@ -58,18 +58,20 @@ export default function Statusbar() {
<div className="absolute left-0 bottom-0 right-0 w-full h-8 flex justify-between items-center px-4 bg-background_alt z-10 dark: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={`size-2 ${
cpuPercent < 50
? "text-success"
: cpuPercent < 80
? "text-orange-400"
: "text-danger"
}`}
/>
CPU {cpuPercent}%
</div>
<Link to="/system#general">
<div className="flex items-center text-sm gap-2 cursor-pointer hover:underline">
<MdCircle
className={`size-2 ${
cpuPercent < 50
? "text-success"
: cpuPercent < 80
? "text-orange-400"
: "text-danger"
}`}
/>
CPU {cpuPercent}%
</div>
</Link>
)}
{Object.entries(stats?.gpu_usages || {}).map(([name, stats]) => {
if (name == "error-gpu") {
@ -93,18 +95,24 @@ export default function Statusbar() {
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>
<Link key={gpuTitle} to="/system#general">
{" "}
<div
key={gpuTitle}
className="flex items-center text-sm gap-2 cursor-pointer hover:underline"
>
<MdCircle
className={`size-2 ${
gpu < 50
? "text-success"
: gpu < 80
? "text-orange-400"
: "text-danger"
}`}
/>
{gpuTitle} {gpu}%
</div>
</Link>
);
})}
</div>