diff --git a/web/containers/Layout/BottomBar/SystemMonitor/index.tsx b/web/containers/Layout/BottomBar/SystemMonitor/index.tsx index aec91bf6e..90510aae7 100644 --- a/web/containers/Layout/BottomBar/SystemMonitor/index.tsx +++ b/web/containers/Layout/BottomBar/SystemMonitor/index.tsx @@ -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 (
{
-
+
Memory
- - {toGibibytes(usedRam)} of {toGibibytes(totalRam)} used + + {toGibibytes(usedRam, { hideUnit: true })}/ + {toGibibytes(totalRam, { hideUnit: true })} GB
@@ -148,30 +138,29 @@ const SystemMonitor = () => {
{gpus.length > 0 && ( -
-
GPU
-
- - - {calculateUtilization()}% - -
+
{gpus.map((gpu, index) => ( -
- - {gpu.name} - -
- +
+
+ + {gpu.name} + +
+
+ + {gpu.memoryTotal - gpu.memoryFree}/ + {gpu.memoryTotal} + + MB +
+
+
+ +
+ + {gpu.utilization}% -
- {gpu.vram} - MB VRAM -
))} diff --git a/web/utils/converter.ts b/web/utils/converter.ts index 3e8cf21cd..a0b05c9dd 100644 --- a/web/utils/converter.ts +++ b/web/utils/converter.ts @@ -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') } }