345 lines
12 KiB
TypeScript
345 lines
12 KiB
TypeScript
import AutoTooltip from '@/components/auto-tooltip';
|
|
import DropdownButtons from '@/components/drop-down-buttons';
|
|
import IconFont from '@/components/icon-font';
|
|
import RowChildren from '@/components/seal-table/components/row-children';
|
|
import SimpleTabel from '@/components/simple-table';
|
|
import StatusTag from '@/components/status-tag';
|
|
import {
|
|
GPUDeviceItem,
|
|
ListItem as WorkerListItem
|
|
} from '@/pages/resources/config/types';
|
|
import {
|
|
DeleteOutlined,
|
|
HddFilled,
|
|
InfoCircleOutlined,
|
|
ThunderboltFilled
|
|
} from '@ant-design/icons';
|
|
import { useIntl } from '@umijs/max';
|
|
import { Button, Col, Divider, Row, Space, Tag, Tooltip } from 'antd';
|
|
import dayjs from 'dayjs';
|
|
import _ from 'lodash';
|
|
import React from 'react';
|
|
import { InstanceStatusMap, InstanceStatusMapValue, status } from '../config';
|
|
import { ModelInstanceListItem } from '../config/types';
|
|
import '../style/instance-item.less';
|
|
|
|
interface InstanceItemProps {
|
|
list: ModelInstanceListItem[];
|
|
gpuDeviceList: GPUDeviceItem[];
|
|
workerList: WorkerListItem[];
|
|
modelData?: any;
|
|
handleChildSelect: (
|
|
val: string,
|
|
item: ModelInstanceListItem,
|
|
list: ModelInstanceListItem[]
|
|
) => void;
|
|
}
|
|
|
|
const childActionList = [
|
|
{
|
|
label: 'common.button.viewlog',
|
|
key: 'viewlog',
|
|
status: [
|
|
InstanceStatusMap.Initializing,
|
|
InstanceStatusMap.Running,
|
|
InstanceStatusMap.Error,
|
|
InstanceStatusMap.Starting,
|
|
InstanceStatusMap.Downloading
|
|
],
|
|
icon: <IconFont type="icon-logs" />
|
|
},
|
|
{
|
|
label: 'common.button.delrecreate',
|
|
key: 'delete',
|
|
props: {
|
|
danger: true
|
|
},
|
|
icon: <DeleteOutlined />
|
|
}
|
|
];
|
|
|
|
const setChildActionList = (item: ModelInstanceListItem) => {
|
|
return _.filter(childActionList, (action: any) => {
|
|
if (action.key === 'viewlog') {
|
|
return action.status.includes(item.state);
|
|
}
|
|
return true;
|
|
});
|
|
};
|
|
|
|
const InstanceItem: React.FC<InstanceItemProps> = ({
|
|
list,
|
|
workerList,
|
|
modelData,
|
|
handleChildSelect
|
|
}) => {
|
|
const intl = useIntl();
|
|
|
|
const distributeCols = [
|
|
{
|
|
title: 'Worker',
|
|
key: 'worker_name'
|
|
},
|
|
{
|
|
title: 'IP',
|
|
key: 'worker_ip',
|
|
render: ({ row }: { row: ModelInstanceListItem }) => {
|
|
return row.port ? `${row.worker_ip}:${row.port}` : row.worker_ip;
|
|
}
|
|
},
|
|
{
|
|
title: intl.formatMessage({ id: 'models.table.gpuindex' }),
|
|
key: 'gpu_index'
|
|
}
|
|
];
|
|
|
|
const renderWorkerInfo = (item: ModelInstanceListItem) => {
|
|
let workerIp = '-';
|
|
if (item.worker_ip) {
|
|
workerIp = item.port ? `${item.worker_ip}:${item.port}` : item.worker_ip;
|
|
}
|
|
return (
|
|
<div>
|
|
<div>{item.worker_name}</div>
|
|
<div className="flex-center">
|
|
<HddFilled className="m-r-5" />
|
|
{workerIp}
|
|
</div>
|
|
<div className="flex-center">
|
|
<IconFont type="icon-filled-gpu" className="m-r-5" />
|
|
{intl.formatMessage({ id: 'models.table.gpuindex' })}: [
|
|
{_.join(item.gpu_indexes?.sort?.(), ',')}]
|
|
</div>
|
|
<div className="flex-center">
|
|
<ThunderboltFilled className="m-r-5" />
|
|
{intl.formatMessage({ id: 'models.form.backend' })}:{' '}
|
|
{modelData?.backend || ''}
|
|
{modelData.backend_version ? `(${modelData.backend_version})` : ''}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const renderDistributionInfo = (row: ModelInstanceListItem) => {
|
|
const rpcServerList = row.distributed_servers?.rpc_servers || [];
|
|
const list = _.map(rpcServerList, (item: any) => {
|
|
const data = _.find(workerList, { id: item.worker_id });
|
|
return {
|
|
worker_name: data?.name,
|
|
worker_ip: data?.ip,
|
|
port: '',
|
|
gpu_index: item.gpu_index
|
|
};
|
|
});
|
|
|
|
const mainWorker = [
|
|
{
|
|
worker_name: `${row.worker_name}`,
|
|
worker_ip: `${row.worker_ip}`,
|
|
port: '',
|
|
gpu_index: `${row.gpu_indexes?.sort?.()} (main)`
|
|
}
|
|
];
|
|
|
|
return (
|
|
<div>
|
|
<h3 style={{ margin: 0 }}>
|
|
{intl.formatMessage({ id: 'models.table.backend' })}
|
|
</h3>
|
|
<SimpleTabel
|
|
columns={distributeCols}
|
|
dataSource={[...mainWorker, ...list]}
|
|
></SimpleTabel>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<Space size={16} direction="vertical" style={{ width: '100%' }}>
|
|
{_.map(list, (item: ModelInstanceListItem, index: number) => {
|
|
return (
|
|
<div
|
|
key={`${item.id}`}
|
|
style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}
|
|
>
|
|
<RowChildren key={`${item.id}_row`}>
|
|
<Row style={{ width: '100%' }} align="middle">
|
|
<Col
|
|
span={5}
|
|
style={{
|
|
paddingInline: 'var(--ant-table-cell-padding-inline)'
|
|
}}
|
|
>
|
|
<span className="flex-center instance-name">
|
|
<AutoTooltip title={item.name} ghost>
|
|
<span className="m-r-5">{item.name}</span>
|
|
</AutoTooltip>
|
|
<Tooltip title={renderWorkerInfo(item)}>
|
|
<span className="server-info">
|
|
<InfoCircleOutlined />
|
|
</span>
|
|
</Tooltip>
|
|
</span>
|
|
</Col>
|
|
<Col span={6}>
|
|
<span
|
|
style={{
|
|
paddingLeft: '58px',
|
|
flexWrap: 'wrap',
|
|
gap: '5px'
|
|
}}
|
|
className="flex align-center"
|
|
>
|
|
{item.computed_resource_claim?.total_layers !==
|
|
item.computed_resource_claim?.offload_layers && (
|
|
<Tooltip
|
|
title={
|
|
<span className="flex flex-center">
|
|
<span>
|
|
CPU:{' '}
|
|
{_.subtract(
|
|
item.computed_resource_claim?.total_layers,
|
|
item.computed_resource_claim?.offload_layers
|
|
) || 0}{' '}
|
|
{intl.formatMessage({
|
|
id: 'models.table.layers'
|
|
})}
|
|
</span>
|
|
<Divider
|
|
type="vertical"
|
|
style={{
|
|
borderColor: '#fff',
|
|
opacity: 0.5
|
|
}}
|
|
></Divider>
|
|
<span>
|
|
GPU:{' '}
|
|
{item.computed_resource_claim?.offload_layers}{' '}
|
|
{intl.formatMessage({
|
|
id: 'models.table.layers'
|
|
})}
|
|
</span>
|
|
</span>
|
|
}
|
|
>
|
|
<Tag
|
|
color="cyan"
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
maxWidth: '100%',
|
|
minWidth: 50,
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'nowrap',
|
|
overflow: 'hidden',
|
|
opacity: 0.75,
|
|
borderRadius: 12
|
|
}}
|
|
>
|
|
<InfoCircleOutlined className="m-r-5" />
|
|
{intl.formatMessage({
|
|
id: 'models.table.cpuoffload'
|
|
})}
|
|
</Tag>
|
|
</Tooltip>
|
|
)}
|
|
{item?.distributed_servers?.rpc_servers?.length && (
|
|
<Tooltip
|
|
overlayInnerStyle={{
|
|
width: '400px'
|
|
}}
|
|
title={renderDistributionInfo(item)}
|
|
>
|
|
<Tag
|
|
color="processing"
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
maxWidth: '100%',
|
|
minWidth: 50,
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'nowrap',
|
|
overflow: 'hidden',
|
|
opacity: 0.75,
|
|
borderRadius: 12
|
|
}}
|
|
>
|
|
<InfoCircleOutlined className="m-r-5" />
|
|
{intl.formatMessage({
|
|
id: 'models.table.acrossworker'
|
|
})}
|
|
</Tag>
|
|
</Tooltip>
|
|
)}
|
|
</span>
|
|
</Col>
|
|
<Col span={4}>
|
|
<span
|
|
style={{ paddingLeft: '62px' }}
|
|
className="flex justify-center"
|
|
>
|
|
{item.state && (
|
|
<StatusTag
|
|
download={
|
|
item.state === InstanceStatusMap.Downloading
|
|
? { percent: item.download_progress }
|
|
: undefined
|
|
}
|
|
extra={
|
|
item.state === InstanceStatusMap.Error ? (
|
|
<Button
|
|
type="link"
|
|
size="small"
|
|
style={{ paddingLeft: 0 }}
|
|
onClick={() =>
|
|
handleChildSelect('viewlog', item, list)
|
|
}
|
|
>
|
|
{intl.formatMessage({
|
|
id: 'models.list.more.logs'
|
|
})}
|
|
</Button>
|
|
) : null
|
|
}
|
|
statusValue={{
|
|
status:
|
|
item.state === InstanceStatusMap.Downloading &&
|
|
item.download_progress === 100
|
|
? status[InstanceStatusMap.Running]
|
|
: (status[item.state] as any),
|
|
text: InstanceStatusMapValue[item.state],
|
|
message:
|
|
item.state === InstanceStatusMap.Downloading &&
|
|
item.download_progress === 100
|
|
? ''
|
|
: item.state_message
|
|
}}
|
|
></StatusTag>
|
|
)}
|
|
</span>
|
|
</Col>
|
|
<Col span={5}>
|
|
<span style={{ paddingLeft: 45 }} className="flex">
|
|
{dayjs(item.created_at).format('YYYY-MM-DD HH:mm:ss')}
|
|
</span>
|
|
</Col>
|
|
<Col span={4}>
|
|
<div style={{ paddingLeft: 39 }}>
|
|
<DropdownButtons
|
|
items={setChildActionList(item)}
|
|
onSelect={(val: string) =>
|
|
handleChildSelect(val, item, list)
|
|
}
|
|
></DropdownButtons>
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
</RowChildren>
|
|
</div>
|
|
);
|
|
})}
|
|
</Space>
|
|
);
|
|
};
|
|
export default React.memo(InstanceItem);
|