chore: model instance show gpu info
This commit is contained in:
jialin
@@ -1,13 +1,18 @@
|
||||
import DropdownButtons from '@/components/drop-down-buttons';
|
||||
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,
|
||||
FieldTimeOutlined,
|
||||
InfoCircleOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Col, Row, Space, Tooltip } from 'antd';
|
||||
import { Col, Divider, Row, Space, Tag, Tooltip } from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
import _ from 'lodash';
|
||||
import React, { useCallback } from 'react';
|
||||
@@ -16,6 +21,8 @@ import { ModelInstanceListItem } from '../config/types';
|
||||
|
||||
interface InstanceItemProps {
|
||||
list: ModelInstanceListItem[];
|
||||
gpuDeviceList: GPUDeviceItem[];
|
||||
workerList: WorkerListItem[];
|
||||
handleChildSelect: (
|
||||
val: string,
|
||||
item: ModelInstanceListItem,
|
||||
@@ -25,12 +32,29 @@ interface InstanceItemProps {
|
||||
|
||||
const InstanceItem: React.FC<InstanceItemProps> = ({
|
||||
list,
|
||||
workerList,
|
||||
handleChildSelect
|
||||
}) => {
|
||||
console.log('instance item====');
|
||||
|
||||
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 childActionList = [
|
||||
{
|
||||
label: 'common.button.viewlog',
|
||||
@@ -70,6 +94,44 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
|
||||
<div>
|
||||
<div>{item.worker_name}</div>
|
||||
<div>{workerIp}</div>
|
||||
<div>
|
||||
{intl.formatMessage({ id: 'models.table.gpuindex' })}: [
|
||||
{_.join(item.gpu_indexes, ',')}]
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const renderDistributionInfo = (item: ModelInstanceListItem) => {
|
||||
const rpcServerList = item.distributed_servers?.rpc_servers || [];
|
||||
const list = _.map(rpcServerList, (item: any) => {
|
||||
const data = _.find(workerList, { id: item.worker_id });
|
||||
return {
|
||||
woker_name: data?.name,
|
||||
work_ip: data.ip,
|
||||
port: item.port,
|
||||
gpu_index: item.gpu_index
|
||||
};
|
||||
});
|
||||
|
||||
const mainWorker = [
|
||||
{
|
||||
worker_name: `${item.worker_name}`,
|
||||
worker_ip: `${item.worker_ip}`,
|
||||
port: item.port,
|
||||
gpu_index: `${item.gpu_indexes} (main)`
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h3 style={{ margin: 0 }}>
|
||||
{intl.formatMessage({ id: 'models.table.backend' })}
|
||||
</h3>
|
||||
<SimpleTabel
|
||||
columns={distributeCols}
|
||||
dataSource={[...mainWorker, ...list]}
|
||||
></SimpleTabel>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -95,10 +157,81 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
|
||||
<InfoCircleOutlined />
|
||||
</Tooltip>
|
||||
</Col>
|
||||
<Col span={6}></Col>
|
||||
<Col span={6}>
|
||||
<span
|
||||
style={{ paddingLeft: '58px' }}
|
||||
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={{
|
||||
opacity: 0.75
|
||||
}}
|
||||
>
|
||||
<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={{
|
||||
opacity: 0.75
|
||||
}}
|
||||
>
|
||||
<InfoCircleOutlined className="m-r-5" />
|
||||
{intl.formatMessage({
|
||||
id: 'models.table.acrossworker'
|
||||
})}
|
||||
</Tag>
|
||||
</Tooltip>
|
||||
)}
|
||||
</span>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<span
|
||||
style={{ paddingLeft: '68px' }}
|
||||
style={{ paddingLeft: '62px' }}
|
||||
className="flex justify-center"
|
||||
>
|
||||
{item.state && (
|
||||
|
||||
@@ -10,7 +10,11 @@ import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
|
||||
import useTableRowSelection from '@/hooks/use-table-row-selection';
|
||||
import useTableSort from '@/hooks/use-table-sort';
|
||||
import ViewCodeModal from '@/pages/playground/components/view-code-modal';
|
||||
import { handleBatchRequest, platformCall } from '@/utils';
|
||||
import {
|
||||
GPUDeviceItem,
|
||||
ListItem as WorkerListItem
|
||||
} from '@/pages/resources/config/types';
|
||||
import { handleBatchRequest } from '@/utils';
|
||||
import {
|
||||
DeleteOutlined,
|
||||
DownOutlined,
|
||||
@@ -51,22 +55,24 @@ interface ModelsProps {
|
||||
perPage: number;
|
||||
query?: string;
|
||||
};
|
||||
gpuDeviceList: GPUDeviceItem[];
|
||||
workerList: WorkerListItem[];
|
||||
dataSource: ListItem[];
|
||||
loading: boolean;
|
||||
total: number;
|
||||
}
|
||||
|
||||
const Models: React.FC<ModelsProps> = ({
|
||||
dataSource,
|
||||
handleNameChange,
|
||||
handleSearch,
|
||||
handlePageChange,
|
||||
dataSource,
|
||||
gpuDeviceList,
|
||||
workerList,
|
||||
queryParams,
|
||||
loading,
|
||||
total
|
||||
}) => {
|
||||
console.log('model list====2');
|
||||
const platform = platformCall();
|
||||
const access = useAccess();
|
||||
const intl = useIntl();
|
||||
const navigate = useNavigate();
|
||||
@@ -80,6 +86,7 @@ const Models: React.FC<ModelsProps> = ({
|
||||
params: {},
|
||||
show: false
|
||||
});
|
||||
|
||||
const [openLogModal, setOpenLogModal] = useState(false);
|
||||
const [openAddModal, setOpenAddModal] = useState(false);
|
||||
const [openDeployModal, setOpenDeployModal] = useState<any>({
|
||||
@@ -194,7 +201,6 @@ const Models: React.FC<ModelsProps> = ({
|
||||
}, []);
|
||||
|
||||
const handleOnSort = (dataIndex: string, order: any) => {
|
||||
console.log('handleTableChange=======', dataIndex, order);
|
||||
setSortOrder(order);
|
||||
};
|
||||
|
||||
@@ -213,15 +219,9 @@ const Models: React.FC<ModelsProps> = ({
|
||||
message.success(intl.formatMessage({ id: 'common.message.success' }));
|
||||
};
|
||||
|
||||
const handleAddModal = () => {
|
||||
setOpenAddModal(true);
|
||||
setTitle(intl.formatMessage({ id: 'models.button.deploy' }));
|
||||
};
|
||||
|
||||
const handleModalOk = useCallback(
|
||||
async (data: FormData) => {
|
||||
try {
|
||||
console.log('data:', data);
|
||||
await updateModel({ data, id: currentData?.id as number });
|
||||
setOpenAddModal(false);
|
||||
message.success(intl.formatMessage({ id: 'common.message.success' }));
|
||||
@@ -242,18 +242,21 @@ const Models: React.FC<ModelsProps> = ({
|
||||
});
|
||||
};
|
||||
|
||||
const handleCreateModel = useCallback(async (data: FormData) => {
|
||||
try {
|
||||
console.log('data:', data, openDeployModal);
|
||||
const handleCreateModel = useCallback(
|
||||
async (data: FormData) => {
|
||||
try {
|
||||
console.log('data:', data, openDeployModal);
|
||||
|
||||
await createModel({ data });
|
||||
setOpenDeployModal({
|
||||
...openDeployModal,
|
||||
show: false
|
||||
});
|
||||
message.success(intl.formatMessage({ id: 'common.message.success' }));
|
||||
} catch (error) {}
|
||||
}, []);
|
||||
await createModel({ data });
|
||||
setOpenDeployModal({
|
||||
...openDeployModal,
|
||||
show: false
|
||||
});
|
||||
message.success(intl.formatMessage({ id: 'common.message.success' }));
|
||||
} catch (error) {}
|
||||
},
|
||||
[openDeployModal]
|
||||
);
|
||||
|
||||
const handleLogModalCancel = useCallback(() => {
|
||||
setOpenLogModal(false);
|
||||
@@ -327,7 +330,6 @@ const Models: React.FC<ModelsProps> = ({
|
||||
|
||||
const handleSelect = useCallback((val: any, row: ListItem) => {
|
||||
if (val === 'edit') {
|
||||
console.log('row=======', row);
|
||||
handleEdit(row);
|
||||
}
|
||||
if (val === 'chat') {
|
||||
@@ -363,6 +365,8 @@ const Models: React.FC<ModelsProps> = ({
|
||||
return (
|
||||
<InstanceItem
|
||||
list={list}
|
||||
gpuDeviceList={gpuDeviceList}
|
||||
workerList={workerList}
|
||||
handleChildSelect={handleChildSelect}
|
||||
></InstanceItem>
|
||||
);
|
||||
@@ -502,7 +506,7 @@ const Models: React.FC<ModelsProps> = ({
|
||||
}}
|
||||
render={(text, record: ListItem) => {
|
||||
return (
|
||||
<span>
|
||||
<span style={{ paddingLeft: 7 }}>
|
||||
{record.ready_replicas} / {record.replicas}
|
||||
</span>
|
||||
);
|
||||
|
||||
@@ -2,7 +2,7 @@ import LogsViewer from '@/components/logs-viewer';
|
||||
import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Button, Modal } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
type ViewModalProps = {
|
||||
open: boolean;
|
||||
@@ -11,7 +11,6 @@ type ViewModalProps = {
|
||||
};
|
||||
|
||||
const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
|
||||
console.log('viewlogs======');
|
||||
const { open, url, onCancel } = props || {};
|
||||
const [modalSize, setModalSize] = useState<any>({
|
||||
width: 600,
|
||||
@@ -29,6 +28,16 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
isFullScreenRef.current = false;
|
||||
setModalSize({
|
||||
width: '100%',
|
||||
height: 'calc(100vh - 100px)'
|
||||
});
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={
|
||||
@@ -49,7 +58,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
|
||||
destroyOnClose={true}
|
||||
closeIcon={true}
|
||||
maskClosable={false}
|
||||
keyboard={false}
|
||||
keyboard={true}
|
||||
width={modalSize.width}
|
||||
footer={null}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user