refactor: resource table columns
This commit is contained in:
jialin
@@ -1,44 +1,13 @@
|
||||
import AutoTooltip from '@/components/auto-tooltip';
|
||||
import { FilterBar } from '@/components/page-tools';
|
||||
import ProgressBar from '@/components/progress-bar';
|
||||
import InfoColumn from '@/components/simple-table/info-column';
|
||||
import useTableFetch from '@/hooks/use-table-fetch';
|
||||
import { convertFileSize } from '@/utils';
|
||||
import { queryClusterList } from '@/pages/cluster-management/apis';
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { ConfigProvider, Empty, Table } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import React from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { GPU_DEVICES_API, queryGpuDevicesList } from '../apis';
|
||||
import { GPUDeviceItem } from '../config/types';
|
||||
const { Column } = Table;
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
];
|
||||
import useGPUColumns from '../hooks/use-gpu-columns';
|
||||
|
||||
const GPUList: React.FC = () => {
|
||||
const {
|
||||
@@ -56,6 +25,22 @@ const GPUList: React.FC = () => {
|
||||
});
|
||||
|
||||
const intl = useIntl();
|
||||
const [clusterList, setClusterList] = useState<Global.BaseOption<number>[]>(
|
||||
[]
|
||||
);
|
||||
|
||||
const getClusterList = async () => {
|
||||
try {
|
||||
const res = await queryClusterList({ page: 1, perPage: 100 });
|
||||
const list = res.items?.map((item) => ({
|
||||
label: item.name,
|
||||
value: item.id
|
||||
}));
|
||||
setClusterList(list || []);
|
||||
} catch (error) {
|
||||
setClusterList([]);
|
||||
}
|
||||
};
|
||||
|
||||
const renderEmpty = (type?: string) => {
|
||||
if (type !== 'Table') return;
|
||||
@@ -69,6 +54,20 @@ const GPUList: React.FC = () => {
|
||||
return <div></div>;
|
||||
};
|
||||
|
||||
const columns = useGPUColumns({
|
||||
clusterList,
|
||||
loadend: dataSource.loadend,
|
||||
firstLoad: extraStatus.firstLoad
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
console.log('columns changed!');
|
||||
}, [columns]);
|
||||
|
||||
useEffect(() => {
|
||||
getClusterList();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageContainer
|
||||
@@ -94,6 +93,8 @@ const GPUList: React.FC = () => {
|
||||
></FilterBar>
|
||||
<ConfigProvider renderEmpty={renderEmpty}>
|
||||
<Table
|
||||
columns={columns}
|
||||
style={{ width: '100%' }}
|
||||
tableLayout={dataSource.loadend ? 'auto' : 'fixed'}
|
||||
dataSource={dataSource.dataList}
|
||||
loading={dataSource.loading}
|
||||
@@ -107,109 +108,7 @@ const GPUList: React.FC = () => {
|
||||
hideOnSinglePage: queryParams.perPage === 10,
|
||||
onChange: handlePageChange
|
||||
}}
|
||||
>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'common.table.name' })}
|
||||
dataIndex="name"
|
||||
key="name"
|
||||
width={240}
|
||||
render={(text, record) => {
|
||||
return (
|
||||
<AutoTooltip ghost maxWidth={240}>
|
||||
{text}
|
||||
</AutoTooltip>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'resources.table.index' })}
|
||||
dataIndex="index"
|
||||
key="index"
|
||||
render={(text, record: GPUDeviceItem) => {
|
||||
return <span>{record.index}</span>;
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'resources.table.workername' })}
|
||||
dataIndex="worker_name"
|
||||
key="worker_name"
|
||||
width={200}
|
||||
render={(text, record: GPUDeviceItem) => {
|
||||
return (
|
||||
<span style={{ display: 'flex', width: '100%' }}>
|
||||
<AutoTooltip ghost maxWidth={340}>
|
||||
{text}
|
||||
</AutoTooltip>
|
||||
</span>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'resources.table.vender' })}
|
||||
dataIndex="vendor"
|
||||
key="vendor"
|
||||
/>
|
||||
|
||||
<Column
|
||||
title={`${intl.formatMessage({ id: 'resources.table.temperature' })} (°C)`}
|
||||
dataIndex="temperature"
|
||||
key="Temperature"
|
||||
render={(text, record: GPUDeviceItem) => {
|
||||
return <span>{text ? _.round(text, 1) : '-'}</span>;
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({
|
||||
id: 'resources.table.gpuutilization'
|
||||
})}
|
||||
dataIndex="gpuUtil"
|
||||
key="gpuUtil"
|
||||
render={(text, record: GPUDeviceItem) => {
|
||||
return (
|
||||
<>
|
||||
{record.core ? (
|
||||
<ProgressBar
|
||||
percent={_.round(record.core?.utilization_rate, 2)}
|
||||
></ProgressBar>
|
||||
) : (
|
||||
'-'
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
|
||||
<Column
|
||||
title={intl.formatMessage({
|
||||
id: 'resources.table.vramutilization'
|
||||
})}
|
||||
dataIndex="VRAM"
|
||||
key="VRAM"
|
||||
render={(text, record: GPUDeviceItem, index: number) => {
|
||||
return (
|
||||
<ProgressBar
|
||||
defaultOpen={
|
||||
index === 0 && dataSource.loadend && extraStatus.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>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Table>
|
||||
></Table>
|
||||
</ConfigProvider>
|
||||
</PageContainer>
|
||||
</>
|
||||
|
||||
@@ -1,10 +1,6 @@
|
||||
import { modelsExpandKeysAtom } from '@/atoms/models';
|
||||
import AutoTooltip from '@/components/auto-tooltip';
|
||||
import DeleteModal from '@/components/delete-modal';
|
||||
import DropdownButtons from '@/components/drop-down-buttons';
|
||||
import { TooltipOverlayScroller } from '@/components/overlay-scroller';
|
||||
import { FilterBar } from '@/components/page-tools';
|
||||
import StatusTag from '@/components/status-tag';
|
||||
import { PageAction } from '@/config';
|
||||
import useAppUtils from '@/hooks/use-app-utils';
|
||||
import useBodyScroll from '@/hooks/use-body-scroll';
|
||||
@@ -15,26 +11,18 @@ import { backendOptionsMap, modelSourceMap } from '@/pages/llmodels/config';
|
||||
import { identifyModelTask } from '@/pages/llmodels/config/audio-catalog';
|
||||
import {
|
||||
modalConfig,
|
||||
modelFileActions,
|
||||
onLineSourceOptions
|
||||
} from '@/pages/llmodels/config/button-actions';
|
||||
import { SourceType } from '@/pages/llmodels/config/types';
|
||||
import DownloadModal from '@/pages/llmodels/download';
|
||||
import { useGenerateWorkerOptions } from '@/pages/llmodels/hooks/use-form-initial-values';
|
||||
import { convertFileSize } from '@/utils';
|
||||
import {
|
||||
CheckCircleFilled,
|
||||
CopyOutlined,
|
||||
InfoCircleOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { useIntl, useNavigate } from '@umijs/max';
|
||||
import { ConfigProvider, Empty, Table, Tag, Typography, message } from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
import { useMemoizedFn } from 'ahooks';
|
||||
import { ConfigProvider, Empty, Table, message } from 'antd';
|
||||
import { useAtom } from 'jotai';
|
||||
import _ from 'lodash';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { checkCurrentbackend } from '../../llmodels/hooks';
|
||||
import {
|
||||
MODEL_FILES_API,
|
||||
@@ -43,242 +31,12 @@ import {
|
||||
queryModelFilesList,
|
||||
retryDownloadModelFile
|
||||
} from '../apis';
|
||||
import {
|
||||
ModelfileState,
|
||||
ModelfileStateMap,
|
||||
ModelfileStateMapValue,
|
||||
WorkerStatusMap
|
||||
} from '../config';
|
||||
import { WorkerStatusMap } from '../config';
|
||||
import { ModelFile as ListItem } from '../config/types';
|
||||
|
||||
const { Paragraph } = Typography;
|
||||
import useFilesColumns from '../hooks/use-files-columns';
|
||||
|
||||
const filterPattern = /^(.*?)(?:-\d+-of-\d+)?(\.gguf)?$/;
|
||||
|
||||
const PathWrapper = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
height: 100%;
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.btn-wrapper {
|
||||
display: flex;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
align-items: center;
|
||||
}
|
||||
&:hover {
|
||||
.btn-wrapper {
|
||||
width: auto;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const ItemWrapper = styled.ul`
|
||||
max-width: 300px;
|
||||
margin: 0;
|
||||
padding-inline: 13px 0;
|
||||
word-break: break-word;
|
||||
li {
|
||||
line-height: 1.6;
|
||||
}
|
||||
`;
|
||||
|
||||
const FilesTag = styled(Tag)`
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-inline: 4px 0;
|
||||
height: 22px;
|
||||
border-radius: var(--border-radius-base);
|
||||
`;
|
||||
|
||||
const TextWrapper = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
`;
|
||||
|
||||
const TypographyPara = styled(Paragraph)`
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
margin-bottom: 0;
|
||||
font-size: 13px;
|
||||
`;
|
||||
|
||||
const TooltipTitle: React.FC<{ path: string }> = ({ path }) => {
|
||||
const intl = useIntl();
|
||||
return (
|
||||
<TypographyPara
|
||||
style={{ margin: 0 }}
|
||||
copyable={{
|
||||
icon: [
|
||||
<CopyOutlined key="copy-icon" />,
|
||||
<CheckCircleFilled key="copied-icon" />
|
||||
],
|
||||
text: path,
|
||||
tooltips: [
|
||||
intl.formatMessage({ id: 'common.button.copy' }),
|
||||
intl.formatMessage({ id: 'common.button.copied' })
|
||||
]
|
||||
}}
|
||||
>
|
||||
{path}
|
||||
</TypographyPara>
|
||||
);
|
||||
};
|
||||
|
||||
const getWorkerName = (
|
||||
id: number,
|
||||
workersList: Global.BaseOption<number>[]
|
||||
) => {
|
||||
const worker = workersList.find((item) => item.value === id);
|
||||
return worker?.label || '';
|
||||
};
|
||||
|
||||
const getModelInfo = (record: ListItem) => {
|
||||
const source = _.get(modelSourceMap, record.source, '');
|
||||
if (record.source === modelSourceMap.huggingface_value) {
|
||||
return {
|
||||
source: `${source}/${record.huggingface_repo_id}`,
|
||||
repo_id: record.huggingface_repo_id,
|
||||
title: `${record.huggingface_repo_id}/${record.huggingface_filename}`,
|
||||
filename: record.huggingface_filename || record.huggingface_repo_id
|
||||
};
|
||||
}
|
||||
if (record.source === modelSourceMap.modelscope_value) {
|
||||
return {
|
||||
source: `${source}/${record.model_scope_model_id}`,
|
||||
repo_id: record.model_scope_model_id,
|
||||
title: `${record.model_scope_model_id}/${record.model_scope_file_path}`,
|
||||
filename: record.model_scope_file_path || record.model_scope_model_id
|
||||
};
|
||||
}
|
||||
if (record.source === modelSourceMap.ollama_library_value) {
|
||||
return {
|
||||
source: `${source}/${record.ollama_library_model_name}`,
|
||||
repo_id: record.ollama_library_model_name,
|
||||
title: record.ollama_library_model_name,
|
||||
filename: record.ollama_library_model_name
|
||||
};
|
||||
}
|
||||
return {
|
||||
source: `${source}${record.local_path}`,
|
||||
repo_id: record.local_path,
|
||||
title: record.local_path,
|
||||
filename: _.split(record.local_path, /[\\/]/).pop()
|
||||
};
|
||||
};
|
||||
|
||||
const getResolvedPath = (pathList: string[]) => {
|
||||
return _.split(pathList?.[0], /[\\/]/).pop();
|
||||
};
|
||||
|
||||
const InstanceStatusTag = (props: { data: ListItem }) => {
|
||||
const { data } = props;
|
||||
if (!data.state) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<StatusTag
|
||||
download={
|
||||
data.state === ModelfileStateMap.Downloading
|
||||
? { percent: data.download_progress }
|
||||
: undefined
|
||||
}
|
||||
statusValue={{
|
||||
status:
|
||||
data.state === ModelfileStateMap.Downloading &&
|
||||
data.download_progress === 100
|
||||
? ModelfileState[ModelfileStateMap.Ready]
|
||||
: ModelfileState[data.state],
|
||||
text: ModelfileStateMapValue[data.state],
|
||||
message:
|
||||
data.state === ModelfileStateMap.Downloading &&
|
||||
data.download_progress === 100
|
||||
? ''
|
||||
: data.state_message
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const RenderParts = (props: { record: ListItem }) => {
|
||||
const { record } = props;
|
||||
const intl = useIntl();
|
||||
const parts = record.resolved_paths || [];
|
||||
if (parts.length <= 1) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const renderItem = () => {
|
||||
return (
|
||||
<ItemWrapper>
|
||||
{parts.map((item: string, index: number) => {
|
||||
return <li key={index}>{_.split(item, /[\\/]/).pop()}</li>;
|
||||
})}
|
||||
</ItemWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<TooltipOverlayScroller title={renderItem()}>
|
||||
<FilesTag color="purple" icon={<InfoCircleOutlined />}>
|
||||
<span style={{ opacity: 1 }}>
|
||||
{record.resolved_paths?.length}{' '}
|
||||
{intl.formatMessage({ id: 'models.form.files' })}
|
||||
</span>
|
||||
</FilesTag>
|
||||
</TooltipOverlayScroller>
|
||||
);
|
||||
};
|
||||
|
||||
const ResolvedPathColumn = (props: { record: ListItem }) => {
|
||||
const { record } = props;
|
||||
const intl = useIntl();
|
||||
if (
|
||||
!record.resolved_paths.length &&
|
||||
record.state === ModelfileStateMap.Downloading
|
||||
) {
|
||||
return (
|
||||
<span>
|
||||
{intl.formatMessage({
|
||||
id: 'resources.modelfiles.storagePath.holder'
|
||||
})}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return (
|
||||
record.resolved_paths?.length > 0 && (
|
||||
<PathWrapper>
|
||||
<TextWrapper>
|
||||
<AutoTooltip
|
||||
ghost
|
||||
showTitle
|
||||
title={
|
||||
<TooltipTitle path={record.resolved_paths?.[0]}></TooltipTitle>
|
||||
}
|
||||
>
|
||||
<span>{getResolvedPath(record.resolved_paths)}</span>
|
||||
</AutoTooltip>
|
||||
</TextWrapper>
|
||||
<RenderParts record={record}></RenderParts>
|
||||
</PathWrapper>
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const ModelFiles = () => {
|
||||
const { getWorkerOptionList, workerOptions, clusterList, workersList } =
|
||||
useGenerateWorkerOptions();
|
||||
@@ -387,7 +145,7 @@ const ModelFiles = () => {
|
||||
};
|
||||
};
|
||||
|
||||
const handleSelect = async (val: any, record: ListItem) => {
|
||||
const handleSelect = useMemoizedFn(async (val: any, record: ListItem) => {
|
||||
try {
|
||||
if (val === 'delete') {
|
||||
handleDelete(
|
||||
@@ -419,7 +177,7 @@ const ModelFiles = () => {
|
||||
} catch (error) {
|
||||
// console.log('error', error);
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const renderEmpty = (type?: string) => {
|
||||
if (type !== 'Table') return;
|
||||
@@ -464,14 +222,6 @@ const ModelFiles = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const setActionList = (record: ListItem) => {
|
||||
return _.filter(modelFileActions, (item: { key: string }) => {
|
||||
if (item.key === 'deploy') {
|
||||
return record.state === ModelfileStateMap.Ready;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
};
|
||||
const handleDeployModalCancel = () => {
|
||||
setOpenDeployModal({
|
||||
...openDeployModal,
|
||||
@@ -506,104 +256,19 @@ const ModelFiles = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const columns: any[] = [
|
||||
{
|
||||
title: intl.formatMessage({ id: 'models.form.source' }),
|
||||
dataIndex: 'source',
|
||||
ellipsis: {
|
||||
showTitle: false
|
||||
},
|
||||
render: (text: string, record: ListItem) => {
|
||||
const modelInfo = getModelInfo(record);
|
||||
const { repo_id, source } = modelInfo;
|
||||
return (
|
||||
<TextWrapper style={{ paddingRight: 8 }}>
|
||||
<AutoTooltip ghost title={source}>
|
||||
{source}
|
||||
</AutoTooltip>
|
||||
</TextWrapper>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Worker',
|
||||
dataIndex: 'worker_name',
|
||||
ellipsis: {
|
||||
showTitle: false
|
||||
},
|
||||
render: (text: string, record: ListItem) => {
|
||||
return (
|
||||
<AutoTooltip ghost>
|
||||
<span>{getWorkerName(record.worker_id, workersList)}</span>
|
||||
</AutoTooltip>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'common.table.status' }),
|
||||
dataIndex: 'state',
|
||||
width: 132,
|
||||
render: (text: string, record: ListItem) => {
|
||||
return <InstanceStatusTag data={record} />;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'resources.modelfiles.form.path' }),
|
||||
dataIndex: 'resolved_paths',
|
||||
width: '30%',
|
||||
ellipsis: {
|
||||
showTitle: false
|
||||
},
|
||||
render: (text: string, record: ListItem) => (
|
||||
<ResolvedPathColumn record={record} />
|
||||
)
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'resources.modelfiles.size' }),
|
||||
dataIndex: 'size',
|
||||
width: 110,
|
||||
align: 'right',
|
||||
ellipsis: {
|
||||
showTitle: false
|
||||
},
|
||||
render: (text: string, record: ListItem) => {
|
||||
return (
|
||||
<AutoTooltip ghost>
|
||||
<span>{convertFileSize(record.size, 1, true)}</span>
|
||||
</AutoTooltip>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'common.table.createTime' }),
|
||||
dataIndex: 'created_at',
|
||||
sorter: false,
|
||||
width: 180,
|
||||
ellipsis: {
|
||||
showTitle: false
|
||||
},
|
||||
render: (text: number) => (
|
||||
<AutoTooltip ghost minWidth={20}>
|
||||
{dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
|
||||
</AutoTooltip>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'common.table.operation' }),
|
||||
dataIndex: 'operation',
|
||||
width: 120,
|
||||
render: (text: string, record: ListItem) => (
|
||||
<DropdownButtons
|
||||
items={setActionList(record)}
|
||||
onSelect={(val) => handleSelect(val, record)}
|
||||
></DropdownButtons>
|
||||
)
|
||||
}
|
||||
];
|
||||
const columns = useFilesColumns({
|
||||
handleSelect,
|
||||
workersList
|
||||
});
|
||||
|
||||
const readyWorkers = useMemo(() => {
|
||||
return workersList.filter((item) => item.state === WorkerStatusMap.ready);
|
||||
}, [workersList]);
|
||||
return workerOptions.map((item) => {
|
||||
item.children = item.children?.filter(
|
||||
(child) => child.state === WorkerStatusMap.ready
|
||||
);
|
||||
return item;
|
||||
});
|
||||
}, [workerOptions]);
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -622,8 +287,8 @@ const ModelFiles = () => {
|
||||
marginBottom={22}
|
||||
marginTop={30}
|
||||
actionType="dropdown"
|
||||
selectHolder="resources.filter.worker"
|
||||
inputHolder="resources.filter.path"
|
||||
selectHolder={intl.formatMessage({ id: 'resources.filter.worker' })}
|
||||
inputHolder={intl.formatMessage({ id: 'resources.filter.path' })}
|
||||
buttonText={intl.formatMessage({
|
||||
id: 'resources.modelfiles.download'
|
||||
})}
|
||||
@@ -666,8 +331,7 @@ const ModelFiles = () => {
|
||||
source={downloadModalStatus.source}
|
||||
width={downloadModalStatus.width}
|
||||
hasLinuxWorker={downloadModalStatus.hasLinuxWorker}
|
||||
workersList={readyWorkers}
|
||||
workerOptions={workerOptions}
|
||||
workerOptions={readyWorkers}
|
||||
></DownloadModal>
|
||||
<DeployModal
|
||||
deploymentType="modelFiles"
|
||||
|
||||
@@ -1,24 +1,11 @@
|
||||
import AutoTooltip from '@/components/auto-tooltip';
|
||||
import DeleteModal from '@/components/delete-modal';
|
||||
import DropdownButtons from '@/components/drop-down-buttons';
|
||||
import IconFont from '@/components/icon-font';
|
||||
import { FilterBar } from '@/components/page-tools';
|
||||
import ProgressBar from '@/components/progress-bar';
|
||||
import InfoColumn from '@/components/simple-table/info-column';
|
||||
import StatusTag from '@/components/status-tag';
|
||||
import useTableFetch from '@/hooks/use-table-fetch';
|
||||
import { queryClusterList } from '@/pages/cluster-management/apis';
|
||||
import { convertFileSize } from '@/utils';
|
||||
import {
|
||||
CodeOutlined,
|
||||
DeleteOutlined,
|
||||
EditOutlined,
|
||||
InfoCircleOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { ConfigProvider, Empty, Table, Tooltip, message } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import { useMemoizedFn } from 'ahooks';
|
||||
import { ConfigProvider, Empty, Table, message } from 'antd';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
WORKERS_API,
|
||||
@@ -26,82 +13,10 @@ import {
|
||||
queryWorkersList,
|
||||
updateWorker
|
||||
} from '../apis';
|
||||
import { WorkerStatusMapValue, status } from '../config';
|
||||
import { Filesystem, GPUDeviceItem, ListItem } from '../config/types';
|
||||
import { ListItem } from '../config/types';
|
||||
import useWorkerColumns from '../hooks/use-worker-columns';
|
||||
import UpdateLabels from './update-labels';
|
||||
|
||||
const { Column } = Table;
|
||||
|
||||
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 ActionList = [
|
||||
{
|
||||
label: 'common.button.edit',
|
||||
key: 'edit',
|
||||
icon: <EditOutlined />
|
||||
},
|
||||
{
|
||||
label: 'common.button.logs',
|
||||
locale: false,
|
||||
key: 'logs',
|
||||
icon: <IconFont type="icon-logs" />
|
||||
},
|
||||
{
|
||||
label: 'Terminal',
|
||||
locale: false,
|
||||
key: 'terminal',
|
||||
icon: <CodeOutlined />
|
||||
},
|
||||
{
|
||||
label: 'common.button.delete',
|
||||
key: 'delete',
|
||||
props: {
|
||||
danger: true
|
||||
},
|
||||
icon: <DeleteOutlined />
|
||||
}
|
||||
];
|
||||
|
||||
const formateUtilazation = (val1: number, val2: number): number => {
|
||||
if (!val2 || !val1) {
|
||||
return 0;
|
||||
}
|
||||
return _.round((val1 / val2) * 100, 0);
|
||||
};
|
||||
|
||||
const calcStorage = (files: Filesystem[]) => {
|
||||
const mountRoot = _.find(
|
||||
files,
|
||||
(item: Filesystem) => item.mount_point === '/'
|
||||
);
|
||||
return mountRoot ? formateUtilazation(mountRoot.used, mountRoot.total) : 0;
|
||||
};
|
||||
|
||||
const Workers: React.FC = () => {
|
||||
const {
|
||||
dataSource,
|
||||
@@ -203,7 +118,7 @@ const Workers: React.FC = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const handleSelect = (val: any, record: ListItem) => {
|
||||
const handleSelect = useMemoizedFn((val: any, record: ListItem) => {
|
||||
if (val === 'edit') {
|
||||
handleUpdateLabels(record);
|
||||
return;
|
||||
@@ -211,7 +126,7 @@ const Workers: React.FC = () => {
|
||||
if (val === 'delete') {
|
||||
handleDelete(record);
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const renderEmpty = (type?: string) => {
|
||||
if (type !== 'Table') return;
|
||||
@@ -225,21 +140,6 @@ const Workers: React.FC = () => {
|
||||
return <div></div>;
|
||||
};
|
||||
|
||||
const renderStorageTooltip = (files: Filesystem[]) => {
|
||||
const mountRoot = _.find(
|
||||
files,
|
||||
(item: Filesystem) => item.mount_point === '/'
|
||||
);
|
||||
return mountRoot ? (
|
||||
<InfoColumn
|
||||
fieldList={fieldList.filter((item) => item.key !== 'allocated')}
|
||||
data={mountRoot}
|
||||
></InfoColumn>
|
||||
) : (
|
||||
0
|
||||
);
|
||||
};
|
||||
|
||||
const handleClusterChange = (value: number) => {
|
||||
handleQueryChange({
|
||||
page: 1,
|
||||
@@ -247,6 +147,13 @@ const Workers: React.FC = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const columns = useWorkerColumns({
|
||||
clusterData,
|
||||
dataSource,
|
||||
extraStatus,
|
||||
handleSelect
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
getClusterList();
|
||||
}, []);
|
||||
@@ -267,7 +174,7 @@ const Workers: React.FC = () => {
|
||||
<FilterBar
|
||||
showSelect={true}
|
||||
showPrimaryButton={false}
|
||||
selectHolder="Filter by cluster"
|
||||
selectHolder={intl.formatMessage({ id: 'clusters.filterBy.cluster' })}
|
||||
marginBottom={22}
|
||||
marginTop={30}
|
||||
buttonText={intl.formatMessage({ id: 'resources.button.create' })}
|
||||
@@ -281,6 +188,7 @@ const Workers: React.FC = () => {
|
||||
></FilterBar>
|
||||
<ConfigProvider renderEmpty={renderEmpty}>
|
||||
<Table
|
||||
columns={columns}
|
||||
tableLayout={dataSource.loadend ? 'auto' : 'fixed'}
|
||||
style={{ width: '100%' }}
|
||||
dataSource={dataSource.dataList}
|
||||
@@ -296,246 +204,7 @@ const Workers: React.FC = () => {
|
||||
hideOnSinglePage: queryParams.perPage === 10,
|
||||
onChange: handlePageChange
|
||||
}}
|
||||
>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'common.table.name' })}
|
||||
dataIndex="name"
|
||||
key="name"
|
||||
width={100}
|
||||
render={(text, record: ListItem) => {
|
||||
return (
|
||||
<AutoTooltip ghost maxWidth={240}>
|
||||
<span>{record.name}</span>
|
||||
</AutoTooltip>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'resources.table.labels' })}
|
||||
dataIndex="labels"
|
||||
key="labels"
|
||||
width={200}
|
||||
render={(text, record: ListItem) => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
gap: 6
|
||||
}}
|
||||
>
|
||||
{_.map(record.labels, (value: any, key: string) => {
|
||||
return (
|
||||
<AutoTooltip
|
||||
key={key}
|
||||
className="m-r-0"
|
||||
maxWidth={155}
|
||||
style={{
|
||||
paddingInline: 8,
|
||||
borderRadius: 12
|
||||
}}
|
||||
>
|
||||
<span>{key}</span>
|
||||
<span>:{value}</span>
|
||||
</AutoTooltip>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title="Cluster"
|
||||
dataIndex="cluster"
|
||||
key="cluster"
|
||||
render={(text, record: ListItem) => {
|
||||
return (
|
||||
<AutoTooltip ghost maxWidth={240}>
|
||||
<span>{clusterData.data[record.cluster_id]}</span>
|
||||
</AutoTooltip>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'common.table.status' })}
|
||||
dataIndex="state"
|
||||
key="state"
|
||||
render={(text, record: ListItem) => {
|
||||
return (
|
||||
<StatusTag
|
||||
maxTooltipWidth={400}
|
||||
statusValue={{
|
||||
status: status[record.state] as any,
|
||||
text: WorkerStatusMapValue[record.state],
|
||||
message: record.state_message
|
||||
}}
|
||||
></StatusTag>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column title="IP" dataIndex="ip" key="address" />
|
||||
<Column
|
||||
title="CPU"
|
||||
dataIndex="CPU"
|
||||
key="CPU"
|
||||
render={(text, record: ListItem) => {
|
||||
return (
|
||||
<ProgressBar
|
||||
percent={_.round(record?.status?.cpu?.utilization_rate, 0)}
|
||||
></ProgressBar>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'resources.table.memory' })}
|
||||
dataIndex="memory"
|
||||
key="Memory"
|
||||
render={(text, record: ListItem) => {
|
||||
return (
|
||||
<ProgressBar
|
||||
percent={formateUtilazation(
|
||||
record?.status?.memory?.used,
|
||||
record?.status?.memory?.total
|
||||
)}
|
||||
label={
|
||||
<InfoColumn
|
||||
fieldList={fieldList}
|
||||
data={record.status.memory}
|
||||
></InfoColumn>
|
||||
}
|
||||
></ProgressBar>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title="GPU"
|
||||
dataIndex="GPU"
|
||||
key="GPU"
|
||||
render={(text, record: ListItem) => {
|
||||
return (
|
||||
<span className="flex-column flex-gap-2">
|
||||
{_.map(
|
||||
_.sortBy(record?.status?.gpu_devices || [], ['index']),
|
||||
(item: GPUDeviceItem, index: string) => {
|
||||
return (
|
||||
<span className="flex-center" key={index}>
|
||||
<span
|
||||
className="m-r-5"
|
||||
style={{ display: 'flex', width: 25 }}
|
||||
>
|
||||
[{item.index}]
|
||||
</span>
|
||||
{item.core ? (
|
||||
<ProgressBar
|
||||
key={index}
|
||||
percent={_.round(
|
||||
item.core?.utilization_rate,
|
||||
0
|
||||
)}
|
||||
></ProgressBar>
|
||||
) : (
|
||||
'-'
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'resources.table.vram' })}
|
||||
dataIndex="VRAM"
|
||||
key="VRAM"
|
||||
render={(text, record: ListItem, rIndex) => {
|
||||
return (
|
||||
<span className="flex-column flex-gap-2">
|
||||
{_.map(
|
||||
_.sortBy(record?.status?.gpu_devices || [], ['index']),
|
||||
(item: GPUDeviceItem, index: number) => {
|
||||
return (
|
||||
<span key={index}>
|
||||
<span className="flex-center">
|
||||
<span
|
||||
className="m-r-5"
|
||||
style={{ display: 'flex', width: 25 }}
|
||||
>
|
||||
[{item.index}]
|
||||
</span>
|
||||
<ProgressBar
|
||||
defaultOpen={
|
||||
rIndex === 0 &&
|
||||
index === 0 &&
|
||||
dataSource.loadend &&
|
||||
extraStatus.firstLoad
|
||||
}
|
||||
key={index}
|
||||
percent={
|
||||
item.memory?.used
|
||||
? _.round(item.memory?.utilization_rate, 0)
|
||||
: _.round(
|
||||
(item.memory?.allocated /
|
||||
item.memory?.total) *
|
||||
100,
|
||||
0
|
||||
)
|
||||
}
|
||||
label={
|
||||
<InfoColumn
|
||||
fieldList={fieldList}
|
||||
data={item.memory}
|
||||
></InfoColumn>
|
||||
}
|
||||
></ProgressBar>
|
||||
{item.memory.is_unified_memory && (
|
||||
<Tooltip
|
||||
title={intl.formatMessage({
|
||||
id: 'resources.table.unified'
|
||||
})}
|
||||
>
|
||||
<InfoCircleOutlined
|
||||
className="m-l-5"
|
||||
style={{ color: 'var(--ant-blue-5)' }}
|
||||
/>
|
||||
</Tooltip>
|
||||
)}
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'resources.table.disk' })}
|
||||
dataIndex="storage"
|
||||
key="storage"
|
||||
render={(text, record: ListItem, index) => {
|
||||
return (
|
||||
<ProgressBar
|
||||
percent={calcStorage(record.status?.filesystem)}
|
||||
label={renderStorageTooltip(record.status.filesystem)}
|
||||
></ProgressBar>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title={intl.formatMessage({ id: 'common.table.operation' })}
|
||||
key="operation"
|
||||
render={(text, record: ListItem) => {
|
||||
return (
|
||||
<DropdownButtons
|
||||
items={ActionList}
|
||||
onSelect={(val) => handleSelect(val, record)}
|
||||
></DropdownButtons>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Table>
|
||||
></Table>
|
||||
</ConfigProvider>
|
||||
<DeleteModal ref={modalRef}></DeleteModal>
|
||||
<UpdateLabels
|
||||
|
||||
@@ -0,0 +1,366 @@
|
||||
import AutoTooltip from '@/components/auto-tooltip';
|
||||
import DropdownButtons from '@/components/drop-down-buttons';
|
||||
import { TooltipOverlayScroller } from '@/components/overlay-scroller';
|
||||
import StatusTag from '@/components/status-tag';
|
||||
import { modelSourceMap } from '@/pages/llmodels/config';
|
||||
import { modelFileActions } from '@/pages/llmodels/config/button-actions';
|
||||
import { convertFileSize } from '@/utils';
|
||||
import {
|
||||
CheckCircleFilled,
|
||||
CopyOutlined,
|
||||
InfoCircleOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Tag, Typography } from 'antd';
|
||||
import { ColumnsType } from 'antd/lib/table';
|
||||
import dayjs from 'dayjs';
|
||||
import _ from 'lodash';
|
||||
import { useMemo } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import {
|
||||
ModelfileState,
|
||||
ModelfileStateMap,
|
||||
ModelfileStateMapValue
|
||||
} from '../config';
|
||||
import { ModelFile as ListItem } from '../config/types';
|
||||
const { Paragraph } = Typography;
|
||||
|
||||
const TextWrapper = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
`;
|
||||
|
||||
const PathWrapper = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
height: 100%;
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.btn-wrapper {
|
||||
display: flex;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
align-items: center;
|
||||
}
|
||||
&:hover {
|
||||
.btn-wrapper {
|
||||
width: auto;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const FilesTag = styled(Tag)`
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-inline: 4px 0;
|
||||
height: 22px;
|
||||
border-radius: var(--border-radius-base);
|
||||
`;
|
||||
|
||||
const TypographyPara = styled(Paragraph)`
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
margin-bottom: 0;
|
||||
font-size: 13px;
|
||||
`;
|
||||
|
||||
const ItemWrapper = styled.ul`
|
||||
max-width: 300px;
|
||||
margin: 0;
|
||||
padding-inline: 13px 0;
|
||||
word-break: break-word;
|
||||
li {
|
||||
line-height: 1.6;
|
||||
}
|
||||
`;
|
||||
|
||||
const getResolvedPath = (pathList: string[]) => {
|
||||
return _.split(pathList?.[0], /[\\/]/).pop();
|
||||
};
|
||||
|
||||
const setActionList = (record: ListItem) => {
|
||||
return _.filter(modelFileActions, (item: { key: string }) => {
|
||||
if (item.key === 'deploy') {
|
||||
return record.state === ModelfileStateMap.Ready;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
};
|
||||
|
||||
const TooltipTitle: React.FC<{ path: string }> = ({ path }) => {
|
||||
const intl = useIntl();
|
||||
return (
|
||||
<TypographyPara
|
||||
style={{ margin: 0 }}
|
||||
copyable={{
|
||||
icon: [
|
||||
<CopyOutlined key="copy-icon" />,
|
||||
<CheckCircleFilled key="copied-icon" />
|
||||
],
|
||||
text: path,
|
||||
tooltips: [
|
||||
intl.formatMessage({ id: 'common.button.copy' }),
|
||||
intl.formatMessage({ id: 'common.button.copied' })
|
||||
]
|
||||
}}
|
||||
>
|
||||
{path}
|
||||
</TypographyPara>
|
||||
);
|
||||
};
|
||||
|
||||
const InstanceStatusTag = (props: { data: ListItem }) => {
|
||||
const { data } = props;
|
||||
if (!data.state) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<StatusTag
|
||||
download={
|
||||
data.state === ModelfileStateMap.Downloading
|
||||
? { percent: data.download_progress }
|
||||
: undefined
|
||||
}
|
||||
statusValue={{
|
||||
status:
|
||||
data.state === ModelfileStateMap.Downloading &&
|
||||
data.download_progress === 100
|
||||
? ModelfileState[ModelfileStateMap.Ready]
|
||||
: ModelfileState[data.state],
|
||||
text: ModelfileStateMapValue[data.state],
|
||||
message:
|
||||
data.state === ModelfileStateMap.Downloading &&
|
||||
data.download_progress === 100
|
||||
? ''
|
||||
: data.state_message
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const getModelInfo = (record: ListItem) => {
|
||||
const source = _.get(modelSourceMap, record.source, '');
|
||||
if (record.source === modelSourceMap.huggingface_value) {
|
||||
return {
|
||||
source: `${source}/${record.huggingface_repo_id}`,
|
||||
repo_id: record.huggingface_repo_id,
|
||||
title: `${record.huggingface_repo_id}/${record.huggingface_filename}`,
|
||||
filename: record.huggingface_filename || record.huggingface_repo_id
|
||||
};
|
||||
}
|
||||
if (record.source === modelSourceMap.modelscope_value) {
|
||||
return {
|
||||
source: `${source}/${record.model_scope_model_id}`,
|
||||
repo_id: record.model_scope_model_id,
|
||||
title: `${record.model_scope_model_id}/${record.model_scope_file_path}`,
|
||||
filename: record.model_scope_file_path || record.model_scope_model_id
|
||||
};
|
||||
}
|
||||
if (record.source === modelSourceMap.ollama_library_value) {
|
||||
return {
|
||||
source: `${source}/${record.ollama_library_model_name}`,
|
||||
repo_id: record.ollama_library_model_name,
|
||||
title: record.ollama_library_model_name,
|
||||
filename: record.ollama_library_model_name
|
||||
};
|
||||
}
|
||||
return {
|
||||
source: `${source}${record.local_path}`,
|
||||
repo_id: record.local_path,
|
||||
title: record.local_path,
|
||||
filename: _.split(record.local_path, /[\\/]/).pop()
|
||||
};
|
||||
};
|
||||
|
||||
const RenderParts = (props: { record: ListItem }) => {
|
||||
const { record } = props;
|
||||
const intl = useIntl();
|
||||
const parts = record.resolved_paths || [];
|
||||
if (parts.length <= 1) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const renderItem = () => {
|
||||
return (
|
||||
<ItemWrapper>
|
||||
{parts.map((item: string, index: number) => {
|
||||
return <li key={index}>{_.split(item, /[\\/]/).pop()}</li>;
|
||||
})}
|
||||
</ItemWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<TooltipOverlayScroller title={renderItem()}>
|
||||
<FilesTag color="purple" icon={<InfoCircleOutlined />}>
|
||||
<span style={{ opacity: 1 }}>
|
||||
{record.resolved_paths?.length}{' '}
|
||||
{intl.formatMessage({ id: 'models.form.files' })}
|
||||
</span>
|
||||
</FilesTag>
|
||||
</TooltipOverlayScroller>
|
||||
);
|
||||
};
|
||||
|
||||
const ResolvedPathColumn = (props: { record: ListItem }) => {
|
||||
const { record } = props;
|
||||
const intl = useIntl();
|
||||
if (
|
||||
!record.resolved_paths.length &&
|
||||
record.state === ModelfileStateMap.Downloading
|
||||
) {
|
||||
return (
|
||||
<span>
|
||||
{intl.formatMessage({
|
||||
id: 'resources.modelfiles.storagePath.holder'
|
||||
})}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return (
|
||||
record.resolved_paths?.length > 0 && (
|
||||
<PathWrapper>
|
||||
<TextWrapper>
|
||||
<AutoTooltip
|
||||
ghost
|
||||
showTitle
|
||||
title={
|
||||
<TooltipTitle path={record.resolved_paths?.[0]}></TooltipTitle>
|
||||
}
|
||||
>
|
||||
<span>{getResolvedPath(record.resolved_paths)}</span>
|
||||
</AutoTooltip>
|
||||
</TextWrapper>
|
||||
<RenderParts record={record}></RenderParts>
|
||||
</PathWrapper>
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const getWorkerName = (
|
||||
id: number,
|
||||
workersList: Global.BaseOption<number>[]
|
||||
) => {
|
||||
const worker = workersList.find((item) => item.value === id);
|
||||
return worker?.label || '';
|
||||
};
|
||||
|
||||
const useFilesColumns = (props: {
|
||||
handleSelect: (action: string, record: ListItem) => void;
|
||||
workersList: Global.BaseOption<number>[];
|
||||
}): ColumnsType<ListItem> => {
|
||||
const { workersList, handleSelect } = props;
|
||||
const intl = useIntl();
|
||||
|
||||
return useMemo(() => {
|
||||
return [
|
||||
{
|
||||
title: intl.formatMessage({ id: 'models.form.source' }),
|
||||
dataIndex: 'source',
|
||||
ellipsis: {
|
||||
showTitle: false
|
||||
},
|
||||
render: (text: string, record: ListItem) => {
|
||||
const modelInfo = getModelInfo(record);
|
||||
const { repo_id, source } = modelInfo;
|
||||
return (
|
||||
<TextWrapper style={{ paddingRight: 8 }}>
|
||||
<AutoTooltip ghost title={source}>
|
||||
{source}
|
||||
</AutoTooltip>
|
||||
</TextWrapper>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Worker',
|
||||
dataIndex: 'worker_name',
|
||||
ellipsis: {
|
||||
showTitle: false
|
||||
},
|
||||
render: (text: string, record: ListItem) => {
|
||||
return (
|
||||
<AutoTooltip ghost>
|
||||
<span>{getWorkerName(record.worker_id, workersList)}</span>
|
||||
</AutoTooltip>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'common.table.status' }),
|
||||
dataIndex: 'state',
|
||||
width: 132,
|
||||
render: (text: string, record: ListItem) => {
|
||||
return <InstanceStatusTag data={record} />;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'resources.modelfiles.form.path' }),
|
||||
dataIndex: 'resolved_paths',
|
||||
width: '30%',
|
||||
ellipsis: {
|
||||
showTitle: false
|
||||
},
|
||||
render: (text: string, record: ListItem) => (
|
||||
<ResolvedPathColumn record={record} />
|
||||
)
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'resources.modelfiles.size' }),
|
||||
dataIndex: 'size',
|
||||
width: 110,
|
||||
align: 'right',
|
||||
ellipsis: {
|
||||
showTitle: false
|
||||
},
|
||||
render: (text: string, record: ListItem) => {
|
||||
return (
|
||||
<AutoTooltip ghost>
|
||||
<span>{convertFileSize(record.size, 1, true)}</span>
|
||||
</AutoTooltip>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'common.table.createTime' }),
|
||||
dataIndex: 'created_at',
|
||||
sorter: false,
|
||||
width: 180,
|
||||
ellipsis: {
|
||||
showTitle: false
|
||||
},
|
||||
render: (text: number) => (
|
||||
<AutoTooltip ghost minWidth={20}>
|
||||
{dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
|
||||
</AutoTooltip>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'common.table.operation' }),
|
||||
dataIndex: 'operation',
|
||||
width: 120,
|
||||
render: (text: string, record: ListItem) => (
|
||||
<DropdownButtons
|
||||
items={setActionList(record)}
|
||||
onSelect={(val) => handleSelect(val, record)}
|
||||
></DropdownButtons>
|
||||
)
|
||||
}
|
||||
];
|
||||
}, [workersList, handleSelect]);
|
||||
};
|
||||
|
||||
export default useFilesColumns;
|
||||
@@ -0,0 +1,138 @@
|
||||
import AutoTooltip from '@/components/auto-tooltip';
|
||||
import ProgressBar from '@/components/progress-bar';
|
||||
import InfoColumn from '@/components/simple-table/info-column';
|
||||
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>[];
|
||||
}): ColumnsType<GPUDeviceItem> => {
|
||||
const { clusterList, loadend, firstLoad } = props;
|
||||
const intl = useIntl();
|
||||
|
||||
return useMemo(() => {
|
||||
return [
|
||||
{
|
||||
title: intl.formatMessage({ id: 'common.table.name' }),
|
||||
dataIndex: 'name',
|
||||
width: 240,
|
||||
render: (text: string, record: GPUDeviceItem) => (
|
||||
<AutoTooltip ghost maxWidth={240}>
|
||||
{text}
|
||||
</AutoTooltip>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'resources.table.index' }),
|
||||
dataIndex: 'index',
|
||||
render: (text: string, record: GPUDeviceItem) => <span>{text}</span>
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'clusters.title' }),
|
||||
dataIndex: 'cluster_id',
|
||||
render: (text: number, record: GPUDeviceItem) => (
|
||||
<AutoTooltip ghost>
|
||||
{clusterList.find((item) => item.value === text)?.label}
|
||||
</AutoTooltip>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'resources.table.workername' }),
|
||||
dataIndex: 'worker_name',
|
||||
render: (text: string, record: GPUDeviceItem) => (
|
||||
<AutoTooltip ghost>{text}</AutoTooltip>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'resources.table.vender' }),
|
||||
dataIndex: 'vendor'
|
||||
},
|
||||
{
|
||||
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: 'gpuUtil',
|
||||
key: 'gpuUtil',
|
||||
render: (text: number, record: GPUDeviceItem) => {
|
||||
return (
|
||||
<>
|
||||
{record.core ? (
|
||||
<ProgressBar
|
||||
percent={_.round(record.core?.utilization_rate, 2)}
|
||||
></ProgressBar>
|
||||
) : (
|
||||
'-'
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'resources.table.vramutilization' }),
|
||||
dataIndex: 'VRAM',
|
||||
key: 'VRAM',
|
||||
render: (text: number, record: GPUDeviceItem, index: number) => {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
}, [clusterList, loadend, firstLoad]);
|
||||
};
|
||||
|
||||
export default useGPUColumns;
|
||||
@@ -0,0 +1,318 @@
|
||||
import AutoTooltip from '@/components/auto-tooltip';
|
||||
import DropdownButtons from '@/components/drop-down-buttons';
|
||||
import IconFont from '@/components/icon-font';
|
||||
import ProgressBar from '@/components/progress-bar';
|
||||
import InfoColumn from '@/components/simple-table/info-column';
|
||||
import StatusTag from '@/components/status-tag';
|
||||
import { convertFileSize } from '@/utils';
|
||||
import {
|
||||
CodeOutlined,
|
||||
DeleteOutlined,
|
||||
EditOutlined,
|
||||
InfoCircleOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Tooltip } from 'antd';
|
||||
import { ColumnsType } from 'antd/lib/table';
|
||||
import _ from 'lodash';
|
||||
import { useMemo } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { WorkerStatusMapValue, status } from '../config';
|
||||
import { Filesystem, GPUDeviceItem, ListItem } from '../config/types';
|
||||
|
||||
const LabelsWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
`;
|
||||
|
||||
const ActionList = [
|
||||
{ label: 'common.button.edit', key: 'edit', icon: <EditOutlined /> },
|
||||
{
|
||||
label: 'common.button.logs',
|
||||
locale: false,
|
||||
key: 'logs',
|
||||
icon: <IconFont type="icon-logs" />
|
||||
},
|
||||
{ label: 'Terminal', locale: false, key: 'terminal', icon: <CodeOutlined /> },
|
||||
{
|
||||
label: 'common.button.delete',
|
||||
key: 'delete',
|
||||
props: { danger: true },
|
||||
icon: <DeleteOutlined />
|
||||
}
|
||||
];
|
||||
|
||||
const fieldList = [
|
||||
{
|
||||
label: 'resources.table.total',
|
||||
key: 'total',
|
||||
locale: true,
|
||||
render: (val: any) => convertFileSize(val, 0)
|
||||
},
|
||||
{
|
||||
label: 'resources.table.used',
|
||||
key: 'used',
|
||||
locale: true,
|
||||
render: (val: any) => convertFileSize(val, 0)
|
||||
},
|
||||
{
|
||||
label: 'resources.table.allocated',
|
||||
key: 'allocated',
|
||||
locale: true,
|
||||
render: (val: any) => convertFileSize(val, 0)
|
||||
}
|
||||
];
|
||||
|
||||
const formateUtilization = (val1: number, val2: number): number =>
|
||||
val1 && val2 ? _.round((val1 / val2) * 100, 0) : 0;
|
||||
|
||||
const calcStorage = (files: Filesystem[]) => {
|
||||
const mountRoot = _.find(
|
||||
files,
|
||||
(item: Filesystem) => item.mount_point === '/'
|
||||
);
|
||||
return mountRoot ? formateUtilization(mountRoot.used, mountRoot.total) : 0;
|
||||
};
|
||||
|
||||
const LabelsCell = ({ labels }: { labels: Record<string, any> }) => (
|
||||
<LabelsWrapper>
|
||||
{_.map(labels, (value: string, key: string) => (
|
||||
<AutoTooltip
|
||||
key={key}
|
||||
className="m-r-0"
|
||||
maxWidth={155}
|
||||
style={{ paddingInline: 8, borderRadius: 12 }}
|
||||
>
|
||||
<span>{key}</span>
|
||||
<span>:{value}</span>
|
||||
</AutoTooltip>
|
||||
))}
|
||||
</LabelsWrapper>
|
||||
);
|
||||
|
||||
const GPUCell = ({ devices }: { devices: GPUDeviceItem[] }) => (
|
||||
<span className="flex-column flex-gap-2">
|
||||
{_.map(
|
||||
_.sortBy(devices || [], ['index']),
|
||||
(item: GPUDeviceItem, index: number) => (
|
||||
<span className="flex-center" key={index}>
|
||||
<span className="m-r-5" style={{ display: 'flex', width: 25 }}>
|
||||
[{item.index}]
|
||||
</span>
|
||||
{item.core ? (
|
||||
<ProgressBar percent={_.round(item.core?.utilization_rate, 0)} />
|
||||
) : (
|
||||
'-'
|
||||
)}
|
||||
</span>
|
||||
)
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
|
||||
const VRAMCell = ({
|
||||
devices,
|
||||
intl,
|
||||
rIndex,
|
||||
dataSource,
|
||||
extraStatus
|
||||
}: {
|
||||
devices: GPUDeviceItem[];
|
||||
intl: any;
|
||||
rIndex: number;
|
||||
dataSource: any;
|
||||
extraStatus: any;
|
||||
}) => (
|
||||
<span className="flex-column flex-gap-2">
|
||||
{_.map(
|
||||
_.sortBy(devices || [], ['index']),
|
||||
(item: GPUDeviceItem, index: number) => (
|
||||
<span key={index} className="flex-center">
|
||||
<span className="m-r-5" style={{ display: 'flex', width: 25 }}>
|
||||
[{item.index}]
|
||||
</span>
|
||||
<ProgressBar
|
||||
defaultOpen={
|
||||
rIndex === 0 &&
|
||||
index === 0 &&
|
||||
dataSource.loadend &&
|
||||
extraStatus.firstLoad
|
||||
}
|
||||
percent={
|
||||
item.memory?.used
|
||||
? _.round(item.memory?.utilization_rate, 0)
|
||||
: _.round(
|
||||
(item.memory?.allocated / item.memory?.total) * 100,
|
||||
0
|
||||
)
|
||||
}
|
||||
label={<InfoColumn fieldList={fieldList} data={item.memory} />}
|
||||
/>
|
||||
{item.memory.is_unified_memory && (
|
||||
<Tooltip
|
||||
title={intl.formatMessage({ id: 'resources.table.unified' })}
|
||||
>
|
||||
<InfoCircleOutlined
|
||||
className="m-l-5"
|
||||
style={{ color: 'var(--ant-blue-5)' }}
|
||||
/>
|
||||
</Tooltip>
|
||||
)}
|
||||
</span>
|
||||
)
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
|
||||
const StorageCell = ({ files }: { files: Filesystem[] }) => {
|
||||
const mountRoot = _.find(
|
||||
files,
|
||||
(item: Filesystem) => item.mount_point === '/'
|
||||
);
|
||||
return (
|
||||
<ProgressBar
|
||||
percent={calcStorage(files)}
|
||||
label={
|
||||
mountRoot ? (
|
||||
<InfoColumn
|
||||
fieldList={fieldList.filter((f) => f.key !== 'allocated')}
|
||||
data={mountRoot}
|
||||
/>
|
||||
) : (
|
||||
0
|
||||
)
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const useWorkerColumns = ({
|
||||
clusterData,
|
||||
dataSource,
|
||||
extraStatus,
|
||||
handleSelect
|
||||
}: {
|
||||
clusterData: {
|
||||
list: Global.BaseOption<number>[];
|
||||
data: Record<number, string>;
|
||||
};
|
||||
dataSource: any;
|
||||
extraStatus: any;
|
||||
handleSelect: (action: string, record: ListItem) => void;
|
||||
}): ColumnsType<ListItem> => {
|
||||
const intl = useIntl();
|
||||
|
||||
return useMemo<ColumnsType<ListItem>>(
|
||||
() => [
|
||||
{
|
||||
title: intl.formatMessage({ id: 'common.table.name' }),
|
||||
dataIndex: 'name',
|
||||
width: 100,
|
||||
render: (text: string) => (
|
||||
<AutoTooltip ghost maxWidth={240}>
|
||||
{text}
|
||||
</AutoTooltip>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'resources.table.labels' }),
|
||||
dataIndex: 'labels',
|
||||
width: 200,
|
||||
render: (_, record) => <LabelsCell labels={record.labels} />
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'clusters.title' }),
|
||||
dataIndex: 'cluster_id',
|
||||
render: (id: number) => (
|
||||
<AutoTooltip ghost maxWidth={240}>
|
||||
{_.get(clusterData.data, id, '')}
|
||||
</AutoTooltip>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'common.table.status' }),
|
||||
dataIndex: 'state',
|
||||
render: (_, record) => (
|
||||
<StatusTag
|
||||
maxTooltipWidth={400}
|
||||
statusValue={{
|
||||
status: status[record.state] as any,
|
||||
text: WorkerStatusMapValue[record.state],
|
||||
message: record.state_message
|
||||
}}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: 'IP',
|
||||
dataIndex: 'ip',
|
||||
render: (text: string) => (
|
||||
<AutoTooltip ghost maxWidth={240}>
|
||||
{text}
|
||||
</AutoTooltip>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: 'CPU',
|
||||
dataIndex: 'cpu',
|
||||
render: (text: string, record) => (
|
||||
<ProgressBar
|
||||
percent={_.round(record?.status?.cpu?.utilization_rate, 0)}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'resources.table.memory' }),
|
||||
dataIndex: 'memory',
|
||||
render: (_, record) => (
|
||||
<ProgressBar
|
||||
percent={formateUtilization(
|
||||
record?.status?.memory?.used,
|
||||
record?.status?.memory?.total
|
||||
)}
|
||||
label={
|
||||
<InfoColumn fieldList={fieldList} data={record.status.memory} />
|
||||
}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: 'GPU',
|
||||
dataIndex: 'gpu',
|
||||
render: (_, record) => <GPUCell devices={record?.status?.gpu_devices} />
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'resources.table.vram' }),
|
||||
dataIndex: 'vram',
|
||||
render: (_, record, rIndex) => (
|
||||
<VRAMCell
|
||||
devices={record?.status?.gpu_devices}
|
||||
intl={intl}
|
||||
rIndex={rIndex}
|
||||
dataSource={dataSource}
|
||||
extraStatus={extraStatus}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'resources.table.disk' }),
|
||||
dataIndex: 'storage',
|
||||
render: (_, record) => <StorageCell files={record.status?.filesystem} />
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage({ id: 'common.table.operation' }),
|
||||
key: 'operation',
|
||||
render: (_, record) => (
|
||||
<DropdownButtons
|
||||
items={ActionList}
|
||||
onSelect={(val) => handleSelect(val, record)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
],
|
||||
[intl, clusterData, dataSource, extraStatus, handleSelect]
|
||||
);
|
||||
};
|
||||
|
||||
export default useWorkerColumns;
|
||||
Reference in New Issue
Block a user