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

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

@ -58,7 +58,8 @@ 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">
<div className="flex items-center text-sm gap-2 cursor-pointer hover:underline">
<MdCircle <MdCircle
className={`size-2 ${ className={`size-2 ${
cpuPercent < 50 cpuPercent < 50
@ -70,6 +71,7 @@ export default function Statusbar() {
/> />
CPU {cpuPercent}% CPU {cpuPercent}%
</div> </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,7 +95,12 @@ 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">
{" "}
<div
key={gpuTitle}
className="flex items-center text-sm gap-2 cursor-pointer hover:underline"
>
<MdCircle <MdCircle
className={`size-2 ${ className={`size-2 ${
gpu < 50 gpu < 50
@ -105,6 +112,7 @@ export default function Statusbar() {
/> />
{gpuTitle} {gpu}% {gpuTitle} {gpu}%
</div> </div>
</Link>
); );
})} })}
</div> </div>