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) ? (