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
}, [])
const calculateUtilization = () => {
let sum = 0
const util = gpus.map((x) => {
return Number(x['utilization'])
})
util.forEach((num) => {
sum += num
})
return sum
}
return (
<Fragment>
<div
@ -131,10 +120,11 @@ const SystemMonitor = () => {
</div>
</div>
<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>
<span className="text-xs text-muted-foreground">
{toGibibytes(usedRam)} of {toGibibytes(totalRam)} used
<span className="text-sm text-muted-foreground">
{toGibibytes(usedRam, { hideUnit: true })}/
{toGibibytes(totalRam, { hideUnit: true })} GB
</span>
</div>
<div className="flex items-center gap-x-4">
@ -148,30 +138,29 @@ const SystemMonitor = () => {
</div>
</div>
{gpus.length > 0 && (
<div className="mb-4 border-b border-border pb-4">
<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>
<div className="mb-4 border-b border-border pb-4 last:border-none">
{gpus.map((gpu, index) => (
<div
key={index}
className="mt-4 flex items-start justify-between gap-4"
>
<span className="line-clamp-1 w-1/2 font-medium text-muted-foreground">
{gpu.name}
</span>
<div className="flex gap-x-2">
<span className="font-semibold">
<div key={index} className="mt-4 flex flex-col gap-2">
<div className="flex w-full items-start justify-between">
<span className="line-clamp-1 w-1/2 font-bold">
{gpu.name}
</span>
<div className="flex gap-x-2">
<div className="text-muted-foreground">
<span>
{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}%
</span>
<div>
<span className="font-semibold">{gpu.vram}</span>
<span>MB VRAM</span>
</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 > 1024 ** 3) {
return (input / 1024 ** 3).toFixed(2) + 'GB'
return (input / 1024 ** 3).toFixed(2) + (options?.hideUnit ? '' : 'GB')
} 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) {
return (input / 1024).toFixed(2) + 'KB'
return (input / 1024).toFixed(2) + (options?.hideUnit ? '' : 'KB')
} else {
return input + 'B'
return input + (options?.hideUnit ? '' : 'B')
}
}