126 lines
4.0 KiB
TypeScript
126 lines
4.0 KiB
TypeScript
import DropdownButtons from '@/components/drop-down-buttons';
|
|
import RowChildren from '@/components/seal-table/components/row-children';
|
|
import StatusTag from '@/components/status-tag';
|
|
import { DeleteOutlined, FieldTimeOutlined } from '@ant-design/icons';
|
|
import { useIntl } from '@umijs/max';
|
|
import { Col, Row, Space } from 'antd';
|
|
import dayjs from 'dayjs';
|
|
import _ from 'lodash';
|
|
import React from 'react';
|
|
import { InstanceStatusMap, status } from '../config';
|
|
import { ModelInstanceListItem } from '../config/types';
|
|
|
|
interface InstanceItemProps {
|
|
list: ModelInstanceListItem[];
|
|
handleChildSelect: (
|
|
val: string,
|
|
item: ModelInstanceListItem,
|
|
list: ModelInstanceListItem[]
|
|
) => void;
|
|
}
|
|
|
|
const InstanceItem: React.FC<InstanceItemProps> = ({
|
|
list,
|
|
handleChildSelect
|
|
}) => {
|
|
console.log('instance item====');
|
|
const intl = useIntl();
|
|
const childActionList = [
|
|
{
|
|
label: intl.formatMessage({ id: 'common.button.viewlog' }),
|
|
key: 'viewlog',
|
|
status: [
|
|
InstanceStatusMap.Running,
|
|
InstanceStatusMap.Error,
|
|
InstanceStatusMap.Downloading
|
|
],
|
|
icon: <FieldTimeOutlined />
|
|
},
|
|
{
|
|
label: intl.formatMessage({ id: 'common.button.delete' }),
|
|
key: 'delete',
|
|
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 getWorkerIp = (item: ModelInstanceListItem) => {
|
|
if (item.worker_ip) {
|
|
return item.port ? `${item.worker_ip}:${item.port}` : item.worker_ip;
|
|
}
|
|
return '-';
|
|
};
|
|
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={4}>{item.name}</Col>
|
|
<Col span={3}>{item.worker_name || '-'}</Col>
|
|
<Col span={4}>
|
|
<span>
|
|
{item.source === 'huggingface'
|
|
? item.huggingface_filename
|
|
: item.ollama_library_model_name}
|
|
</span>
|
|
</Col>
|
|
|
|
<Col span={3}>
|
|
<span
|
|
style={{ paddingLeft: '0px' }}
|
|
className="flex justify-center"
|
|
>
|
|
{item.state && (
|
|
<StatusTag
|
|
download={
|
|
item.state === InstanceStatusMap.Downloading
|
|
? { percent: item.download_progress }
|
|
: undefined
|
|
}
|
|
statusValue={{
|
|
status: status[item.state] as any,
|
|
text: item.state
|
|
}}
|
|
></StatusTag>
|
|
)}
|
|
</span>
|
|
</Col>
|
|
<Col span={5}>
|
|
<span style={{ paddingLeft: 36 }}>
|
|
{dayjs(item.updated_at).format('YYYY-MM-DD HH:mm:ss')}
|
|
</span>
|
|
</Col>
|
|
<Col span={5}>
|
|
<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);
|