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="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"> <div className="h-full flex items-center gap-2">
{cpuPercent && ( {cpuPercent && (
<div className="flex items-center text-sm gap-2"> <Link to="/system#general">
<MdCircle <div className="flex items-center text-sm gap-2 cursor-pointer hover:underline">
className={`size-2 ${ <MdCircle
cpuPercent < 50 className={`size-2 ${
? "text-success" cpuPercent < 50
: cpuPercent < 80 ? "text-success"
? "text-orange-400" : cpuPercent < 80
: "text-danger" ? "text-orange-400"
}`} : "text-danger"
/> }`}
CPU {cpuPercent}% />
</div> CPU {cpuPercent}%
</div>
</Link>
)} )}
{Object.entries(stats?.gpu_usages || {}).map(([name, stats]) => { {Object.entries(stats?.gpu_usages || {}).map(([name, stats]) => {
if (name == "error-gpu") { if (name == "error-gpu") {
@ -93,18 +95,24 @@ export default function Statusbar() {
const gpu = parseInt(stats.gpu); const gpu = parseInt(stats.gpu);
return ( return (
<div key={gpuTitle} className="flex items-center text-sm gap-2"> <Link key={gpuTitle} to="/system#general">
<MdCircle {" "}
className={`size-2 ${ <div
gpu < 50 key={gpuTitle}
? "text-success" className="flex items-center text-sm gap-2 cursor-pointer hover:underline"
: gpu < 80 >
? "text-orange-400" <MdCircle
: "text-danger" className={`size-2 ${
}`} gpu < 50
/> ? "text-success"
{gpuTitle} {gpu}% : gpu < 80
</div> ? "text-orange-400"
: "text-danger"
}`}
/>
{gpuTitle} {gpu}%
</div>
</Link>
); );
})} })}
</div> </div>