Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: style list of gpu on system monitor (#2172)

Browse Source
This commit is contained in:
Faisal Amir 2024-02-27 16:55:01 +07:00 committed by GitHub
parent fbee753607
commit 45efcad233
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 32 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
web/containers/Layout/BottomBar/SystemMonitor/index.tsx
View File

@ -57,17 +57,6 @@ const SystemMonitor = () => {
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, []) }, [])
const calculateUtilization = () => {
let sum = 0
const util = gpus.map((x) => {
return Number(x['utilization'])
})
util.forEach((num) => {
sum += num
})
return sum
}
return ( return (
<Fragment> <Fragment>
<div <div
@ -131,10 +120,11 @@ const SystemMonitor = () => {
</div> </div>
</div> </div>
<div className="mb-4 border-b border-border pb-4"> <div className="mb-4 border-b border-border pb-4">
<div className="flex items-center gap-2"> <div className="flex items-center justify-between gap-2">
<h6 className="font-bold">Memory</h6> <h6 className="font-bold">Memory</h6>
<span className="text-xs text-muted-foreground"> <span className="text-sm text-muted-foreground">
{toGibibytes(usedRam)} of {toGibibytes(totalRam)} used {toGibibytes(usedRam, { hideUnit: true })}/
{toGibibytes(totalRam, { hideUnit: true })} GB
</span> </span>
</div> </div>
<div className="flex items-center gap-x-4"> <div className="flex items-center gap-x-4">
@ -148,30 +138,29 @@ const SystemMonitor = () => {
</div> </div>
</div> </div>
{gpus.length > 0 && ( {gpus.length > 0 && (
<div className="mb-4 border-b border-border pb-4"> <div className="mb-4 border-b border-border pb-4 last:border-none">
<h6 className="font-bold">GPU</h6>
<div className="flex items-center gap-x-4">
<Progress value={calculateUtilization()} className="h-2" />
<span className="flex-shrink-0 text-muted-foreground">
{calculateUtilization()}%
</span>
</div>
{gpus.map((gpu, index) => ( {gpus.map((gpu, index) => (
<div <div key={index} className="mt-4 flex flex-col gap-2">
key={index} <div className="flex w-full items-start justify-between">
className="mt-4 flex items-start justify-between gap-4" <span className="line-clamp-1 w-1/2 font-bold">
> {gpu.name}
<span className="line-clamp-1 w-1/2 font-medium text-muted-foreground"> </span>
{gpu.name} <div className="flex gap-x-2">
</span> <div className="text-muted-foreground">
<div className="flex gap-x-2"> <span>
<span className="font-semibold"> {gpu.memoryTotal - gpu.memoryFree}/
{gpu.memoryTotal}
</span>
<span> MB</span>
</div>
</div>
</div>
<div className="flex items-center gap-x-4">
<Progress value={gpu.utilization} className="h-2" />
<span className="flex-shrink-0 text-muted-foreground">
{gpu.utilization}% {gpu.utilization}%
</span> </span>
<div>
<span className="font-semibold">{gpu.vram}</span>
<span>MB VRAM</span>
</div>
</div> </div>
</div> </div>
))} ))}

13
web/utils/converter.ts
View File

@ -1,13 +1,16 @@
export const toGibibytes = (input: number) => { export const toGibibytes = (
input: number,
options?: { hideUnit?: boolean }
) => {
if (!input) return '' if (!input) return ''
if (input > 1024 ** 3) { if (input > 1024 ** 3) {
return (input / 1024 ** 3).toFixed(2) + 'GB' return (input / 1024 ** 3).toFixed(2) + (options?.hideUnit ? '' : 'GB')
} else if (input > 1024 ** 2) { } else if (input > 1024 ** 2) {
return (input / 1024 ** 2).toFixed(2) + 'MB' return (input / 1024 ** 2).toFixed(2) + (options?.hideUnit ? '' : 'MB')
} else if (input > 1024) { } else if (input > 1024) {
return (input / 1024).toFixed(2) + 'KB' return (input / 1024).toFixed(2) + (options?.hideUnit ? '' : 'KB')
} else { } else {
return input + 'B' return input + (options?.hideUnit ? '' : 'B')
} }
} }