diff --git a/src/pages/resources/hooks/use-worker-columns.tsx b/src/pages/resources/hooks/use-worker-columns.tsx
index 203f27c1..e85e6a6a 100644
--- a/src/pages/resources/hooks/use-worker-columns.tsx
+++ b/src/pages/resources/hooks/use-worker-columns.tsx
@@ -26,7 +26,7 @@ import { Tooltip } from 'antd';
import { ColumnsType } from 'antd/lib/table';
import { useAtom, useAtomValue } from 'jotai';
import _ from 'lodash';
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
import semverCoerce from 'semver/functions/coerce';
import semverGt from 'semver/functions/gt';
import { status, WorkerStatusMap, WorkerStatusMapValue } from '../config';
@@ -143,15 +143,57 @@ const GPUCell = ({ devices }: { devices: GPUDeviceItem[] }) => (
);
+// index + ProgressBar
+const VRAMItem = ({
+ item,
+ autoOpen
+}: {
+ item: GPUDeviceItem;
+ autoOpen: boolean;
+}) => {
+ const [open, setOpen] = useState(false);
+
+ useEffect(() => {
+ setOpen(autoOpen);
+ }, [autoOpen]);
+
+ const percent = item.memory?.used
+ ? _.round(item.memory?.utilization_rate, 0)
+ : _.round((item.memory?.allocated / item.memory?.total) * 100, 0);
+
+ return (
+ }
+ open={open}
+ onOpenChange={setOpen}
+ >
+
+
+
+ [{item.index}]
+
+
+
+
+
+ );
+};
+
const VRAMCell = ({
devices,
- intl,
rIndex,
loadend,
firstLoad
}: {
devices: GPUDeviceItem[];
- intl: any;
rIndex: number;
loadend: boolean;
firstLoad: boolean;
@@ -160,36 +202,11 @@ const VRAMCell = ({
{_.map(
_.sortBy(devices || [], ['index']),
(item: GPUDeviceItem, index: number) => (
-
-
- [{item.index}]
-
- }
- />
- {item.memory.is_unified_memory && (
-
-
-
- )}
-
+
)
)}
@@ -498,6 +515,7 @@ const useWorkerColumns = ({
{
title: 'GPU',
dataIndex: 'gpu',
+ minWidth: 100,
render: (_, record) =>
statusAvailable(record) ? (
@@ -508,11 +526,11 @@ const useWorkerColumns = ({
{
title: intl.formatMessage({ id: 'resources.table.vram' }),
dataIndex: 'vram',
+ minWidth: 100,
render: (_, record, rIndex) =>
statusAvailable(record) ? (
(
{statusAvailable(record) ? (