151 lines
4.5 KiB
TypeScript
151 lines
4.5 KiB
TypeScript
import AutoTooltip from '@/components/auto-tooltip';
|
|
import ProgressBar from '@/components/progress-bar';
|
|
import InfoColumn from '@/components/simple-table/info-column';
|
|
import { tableSorter } from '@/config/settings';
|
|
import { convertFileSize } from '@/utils';
|
|
import { useIntl } from '@umijs/max';
|
|
import { ColumnsType } from 'antd/lib/table';
|
|
import _ from 'lodash';
|
|
import { useMemo } from 'react';
|
|
import { GPUDeviceItem } from '../config/types';
|
|
|
|
const fieldList = [
|
|
{
|
|
label: 'resources.table.total',
|
|
key: 'total',
|
|
locale: true,
|
|
render: (val: any) => {
|
|
return convertFileSize(val, 0);
|
|
}
|
|
},
|
|
{
|
|
label: 'resources.table.used',
|
|
key: 'used',
|
|
locale: true,
|
|
render: (val: any) => {
|
|
return convertFileSize(val, 0);
|
|
}
|
|
},
|
|
{
|
|
label: 'resources.table.allocated',
|
|
key: 'allocated',
|
|
locale: true,
|
|
render: (val: any) => {
|
|
return convertFileSize(val, 0);
|
|
}
|
|
}
|
|
];
|
|
|
|
const useGPUColumns = (props: {
|
|
loadend: boolean;
|
|
firstLoad: boolean;
|
|
clusterList: Global.BaseOption<number>[];
|
|
sortOrder: string[];
|
|
}): ColumnsType<GPUDeviceItem> => {
|
|
const { clusterList, loadend, firstLoad, sortOrder } = props;
|
|
const intl = useIntl();
|
|
|
|
return useMemo(() => {
|
|
return [
|
|
{
|
|
title: intl.formatMessage({ id: 'common.table.name' }),
|
|
dataIndex: 'name',
|
|
width: 240,
|
|
minWidth: 32,
|
|
sorter: tableSorter(1),
|
|
render: (text: string, record: GPUDeviceItem) => (
|
|
<AutoTooltip ghost maxWidth={240}>
|
|
<span className="text-primary">{text}</span>
|
|
</AutoTooltip>
|
|
)
|
|
},
|
|
{
|
|
title: intl.formatMessage({ id: 'resources.table.index' }),
|
|
dataIndex: 'index',
|
|
sorter: tableSorter(2),
|
|
render: (text: string, record: GPUDeviceItem) => <span>{text}</span>
|
|
},
|
|
{
|
|
title: intl.formatMessage({ id: 'clusters.title' }),
|
|
dataIndex: 'cluster_id',
|
|
sorter: tableSorter(3),
|
|
render: (text: number, record: GPUDeviceItem) => (
|
|
<AutoTooltip ghost>
|
|
{clusterList.find((item) => item.value === text)?.label}
|
|
</AutoTooltip>
|
|
)
|
|
},
|
|
{
|
|
title: intl.formatMessage({ id: 'resources.worker' }),
|
|
dataIndex: 'worker_name',
|
|
sorter: tableSorter(4),
|
|
render: (text: string, record: GPUDeviceItem) => (
|
|
<AutoTooltip ghost>{text}</AutoTooltip>
|
|
)
|
|
},
|
|
{
|
|
title: intl.formatMessage({ id: 'resources.table.vendor' }),
|
|
dataIndex: 'vendor',
|
|
sorter: tableSorter(5)
|
|
},
|
|
{
|
|
title: `${intl.formatMessage({ id: 'resources.table.temperature' })} (°C)`,
|
|
dataIndex: 'temperature',
|
|
render: (text: number, record: GPUDeviceItem) => (
|
|
<span>{text ? _.round(text, 1) : '-'}</span>
|
|
)
|
|
},
|
|
{
|
|
title: `${intl.formatMessage({ id: 'resources.table.utilization' })}`,
|
|
dataIndex: 'core.utilization_rate',
|
|
key: 'core.utilization_rate',
|
|
sorter: tableSorter(6),
|
|
render: (text: number, record: GPUDeviceItem) => {
|
|
return (
|
|
<span className="flex-center flex-full">
|
|
{record.core ? (
|
|
<ProgressBar
|
|
percent={_.round(record.core?.utilization_rate, 2)}
|
|
></ProgressBar>
|
|
) : (
|
|
'-'
|
|
)}
|
|
</span>
|
|
);
|
|
}
|
|
},
|
|
{
|
|
title: intl.formatMessage({ id: 'resources.table.vramutilization' }),
|
|
dataIndex: 'memory.utilization_rate',
|
|
key: 'memory.utilization_rate',
|
|
sorter: tableSorter(7),
|
|
render: (text: number, record: GPUDeviceItem, index: number) => {
|
|
return (
|
|
<span className="flex-center flex-full">
|
|
<ProgressBar
|
|
defaultOpen={index === 0 && loadend && firstLoad}
|
|
percent={
|
|
record.memory?.used
|
|
? _.round(record.memory?.utilization_rate, 0)
|
|
: _.round(
|
|
record.memory?.allocated / record.memory?.total,
|
|
0
|
|
) * 100
|
|
}
|
|
label={
|
|
<InfoColumn
|
|
fieldList={fieldList}
|
|
data={record.memory}
|
|
></InfoColumn>
|
|
}
|
|
></ProgressBar>
|
|
</span>
|
|
);
|
|
}
|
|
}
|
|
];
|
|
}, [intl, clusterList, loadend, firstLoad]);
|
|
};
|
|
|
|
export default useGPUColumns;
|