chore: download progress

2025-02-27 18:03:28 +08:00
parent 8464e0ea3f
commit 295b4b3b72
14 changed files with 441 additions and 289 deletions
@@ -4,10 +4,9 @@ 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 { HandlerOptions } from '@/hooks/use-chunk-fetch';
+import useDownloadStream from '@/hooks/use-download-stream';
+import { ListItem as WorkerListItem } from '@/pages/resources/config/types';
 import {
  DeleteOutlined,
  DownloadOutlined,
@@ -16,24 +15,29 @@ import {
  ThunderboltFilled
 } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Col, Divider, Row, Space, Tag, Tooltip } from 'antd';
+import {
+  Button,
+  Col,
+  Divider,
+  Progress,
+  Row,
+  Tag,
+  Tooltip,
+  notification
+} from 'antd';
 import dayjs from 'dayjs';
 import _ from 'lodash';
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
+import { MODEL_INSTANCE_API } from '../apis';
 import { InstanceStatusMap, InstanceStatusMapValue, status } from '../config';
 import { ModelInstanceListItem } from '../config/types';
 import '../style/instance-item.less';

 interface InstanceItemProps {
-  list: ModelInstanceListItem[];
-  gpuDeviceList: GPUDeviceItem[];
+  instanceData: ModelInstanceListItem;
  workerList: WorkerListItem[];
  modelData?: any;
-  handleChildSelect: (
-    val: string,
-    item: ModelInstanceListItem,
-    list: ModelInstanceListItem[]
-  ) => void;
+  handleChildSelect: (val: string, item: ModelInstanceListItem) => void;
 }

 const childActionList = [
@@ -71,49 +75,87 @@ const childActionList = [
  }
 ];

-const setChildActionList = (item: ModelInstanceListItem) => {
-  return _.filter(childActionList, (action: any) => {
-    if (action.key === 'viewlog' || action.key === 'download') {
-      return action.status.includes(item.state);
+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;
    }
-    return true;
-  });
+  },
+  {
+    title: 'models.table.gpuindex',
+    locale: true,
+    key: 'gpu_index'
+  }
+];
+
+const renderMessage = (title: string) => {
+  return (
+    <div
+      style={{
+        width: 300,
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden'
+      }}
+    >
+      {title}
+    </div>
+  );
 };

 const InstanceItem: React.FC<InstanceItemProps> = ({
-  list,
+  instanceData,
  workerList,
  modelData,
  handleChildSelect
 }) => {
+  const [api, contextHolder] = notification.useNotification();
+  const { downloadStream } = useDownloadStream();
  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;
+  const actionItems = useMemo(() => {
+    return _.filter(childActionList, (action: any) => {
+      if (action.key === 'viewlog' || action.key === 'download') {
+        return action.status.includes(instanceData.state);
      }
-    },
-    {
-      title: intl.formatMessage({ id: 'models.table.gpuindex' }),
-      key: 'gpu_index'
-    }
-  ];
+      return true;
+    });
+  }, [instanceData]);

-  const renderWorkerInfo = (item: ModelInstanceListItem) => {
+  const createFileName = (name: string) => {
+    const timestamp = dayjs().format('YYYY-MM-DD_HH-mm-ss');
+    const fileName = `${name}_${timestamp}.txt`;
+    return fileName;
+  };
+
+  const downloadNotification = useCallback(
+    (data: HandlerOptions & { filename: string; duration?: number }) => {
+      api.open({
+        duration: data.duration,
+        message: renderMessage(data.filename),
+        key: data.filename,
+        description: <Progress percent={data.percent} size="small"></Progress>
+      });
+    },
+    []
+  );
+
+  const renderWorkerInfo = useMemo(() => {
    let workerIp = '-';
-    if (item.worker_ip) {
-      workerIp = item.port ? `${item.worker_ip}:${item.port}` : item.worker_ip;
+    if (instanceData.worker_ip) {
+      workerIp = instanceData.port
+        ? `${instanceData.worker_ip}:${instanceData.port}`
+        : instanceData.worker_ip;
    }
    return (
      <div>
-        <div>{item.worker_name}</div>
+        <div>{instanceData.worker_name}</div>
        <div className="flex-center">
          <HddFilled className="m-r-5" />
          {workerIp}
@@ -121,7 +163,7 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
        <div className="flex-center">
          <IconFont type="icon-filled-gpu" className="m-r-5" />
          {intl.formatMessage({ id: 'models.table.gpuindex' })}: [
-          {_.join(item.gpu_indexes?.sort?.(), ',')}]
+          {_.join(instanceData.gpu_indexes?.sort?.(), ',')}]
        </div>
        <div className="flex-center">
          <ThunderboltFilled className="m-r-5" />
@@ -131,10 +173,10 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
        </div>
      </div>
    );
-  };
+  }, [modelData, instanceData, intl]);

-  const renderDistributionInfo = (row: ModelInstanceListItem) => {
-    const rpcServerList = row.distributed_servers?.rpc_servers || [];
+  const renderDistributionInfo = useMemo(() => {
+    const rpcServerList = instanceData.distributed_servers?.rpc_servers || [];
    const list = _.map(rpcServerList, (item: any) => {
      const data = _.find(workerList, { id: item.worker_id });
      return {
@@ -147,10 +189,10 @@ const InstanceItem: React.FC<InstanceItemProps> = ({

    const mainWorker = [
      {
-        worker_name: `${row.worker_name}`,
-        worker_ip: `${row.worker_ip}`,
+        worker_name: `${instanceData.worker_name}`,
+        worker_ip: `${instanceData.worker_ip}`,
        port: '',
-        gpu_index: `${row.gpu_indexes?.sort?.()} (main)`
+        gpu_index: `${instanceData.gpu_indexes?.sort?.()} (main)`
      }
    ];

@@ -165,194 +207,202 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
        ></SimpleTabel>
      </div>
    );
-  };
+  }, [workerList, instanceData, intl]);
+
+  const handleOnSelect = useCallback(
+    (val: string) => {
+      console.log('handleOnSelect', val);
+      if (val === 'download') {
+        downloadStream({
+          url: `${MODEL_INSTANCE_API}/${instanceData.id}/logs`,
+          filename: createFileName(instanceData.name),
+          downloadNotification
+        });
+      } else {
+        handleChildSelect(val, instanceData);
+      }
+    },
+    [handleChildSelect, instanceData]
+  );

  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 />
+    <>
+      {contextHolder}
+      <div style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}>
+        <RowChildren>
+          <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={instanceData.name} ghost>
+                  <span className="m-r-5">{instanceData.name}</span>
+                </AutoTooltip>
+                <Tooltip title={renderWorkerInfo}>
+                  <span className="server-info">
+                    <InfoCircleOutlined />
+                  </span>
+                </Tooltip>
+              </span>
+            </Col>
+            <Col span={6}>
+              <span
+                style={{
+                  paddingLeft: '58px',
+                  flexWrap: 'wrap',
+                  gap: '5px'
+                }}
+                className="flex align-center"
+              >
+                {instanceData.computed_resource_claim?.total_layers !==
+                  instanceData.computed_resource_claim?.offload_layers && (
+                  <Tooltip
+                    title={
+                      <span className="flex flex-center">
+                        <span>
+                          CPU:{' '}
+                          {_.subtract(
+                            instanceData.computed_resource_claim?.total_layers,
+                            instanceData.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:{' '}
+                          {instanceData.computed_resource_claim?.offload_layers}{' '}
+                          {intl.formatMessage({
+                            id: 'models.table.layers'
+                          })}
+                        </span>
                      </span>
-                    </Tooltip>
-                  </span>
-                </Col>
-                <Col span={6}>
-                  <span
-                    style={{
-                      paddingLeft: '58px',
-                      flexWrap: 'wrap',
-                      gap: '5px'
+                    }
+                  >
+                    <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>
+                )}
+                {instanceData?.distributed_servers?.rpc_servers?.length && (
+                  <Tooltip
+                    overlayInnerStyle={{
+                      width: '400px'
                    }}
-                    className="flex align-center"
+                    title={renderDistributionInfo}
                  >
-                    {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
-                          }}
+                    <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"
+              >
+                {instanceData.state && (
+                  <StatusTag
+                    download={
+                      instanceData.state === InstanceStatusMap.Downloading
+                        ? { percent: instanceData.download_progress }
+                        : undefined
+                    }
+                    extra={
+                      instanceData.state === InstanceStatusMap.Error &&
+                      instanceData.worker_id ? (
+                        <Button
+                          type="link"
+                          size="small"
+                          style={{ paddingLeft: 0 }}
+                          onClick={() =>
+                            handleChildSelect('viewlog', instanceData)
+                          }
                        >
-                          <InfoCircleOutlined className="m-r-5" />
                          {intl.formatMessage({
-                            id: 'models.table.cpuoffload'
+                            id: 'models.list.more.logs'
                          })}
-                        </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 &&
-                          item.worker_id ? (
-                            <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>
+                        </Button>
+                      ) : null
+                    }
+                    statusValue={{
+                      status:
+                        instanceData.state === InstanceStatusMap.Downloading &&
+                        instanceData.download_progress === 100
+                          ? status[InstanceStatusMap.Running]
+                          : (status[instanceData.state] as any),
+                      text: InstanceStatusMapValue[instanceData.state],
+                      message:
+                        instanceData.state === InstanceStatusMap.Downloading &&
+                        instanceData.download_progress === 100
+                          ? ''
+                          : instanceData.state_message
+                    }}
+                  ></StatusTag>
+                )}
+              </span>
+            </Col>
+            <Col span={5}>
+              <span style={{ paddingLeft: 45 }} className="flex">
+                {dayjs(instanceData.created_at).format('YYYY-MM-DD HH:mm:ss')}
+              </span>
+            </Col>
+            <Col span={4}>
+              <div style={{ paddingLeft: 39 }}>
+                <DropdownButtons
+                  items={actionItems}
+                  onSelect={handleOnSelect}
+                ></DropdownButtons>
+              </div>
+            </Col>
+          </Row>
+        </RowChildren>
+      </div>
+    </>
  );
 };
 export default React.memo(InstanceItem);
@@ -0,0 +1,38 @@
+import { ListItem as WorkerListItem } from '@/pages/resources/config/types';
+import { Space } from 'antd';
+import _ from 'lodash';
+import React from 'react';
+import { ModelInstanceListItem } from '../config/types';
+import '../style/instance-item.less';
+import InstanceItem from './instance-item';
+
+interface InstanceItemProps {
+  list: ModelInstanceListItem[];
+  workerList: WorkerListItem[];
+  modelData?: any;
+  handleChildSelect: (val: string, item: ModelInstanceListItem) => void;
+}
+
+const Instances: React.FC<InstanceItemProps> = ({
+  list,
+  workerList,
+  modelData,
+  handleChildSelect
+}) => {
+  return (
+    <Space size={16} direction="vertical" style={{ width: '100%' }}>
+      {_.map(list, (item: ModelInstanceListItem, index: number) => {
+        return (
+          <InstanceItem
+            key={item.name}
+            modelData={modelData}
+            workerList={workerList}
+            instanceData={item}
+            handleChildSelect={handleChildSelect}
+          ></InstanceItem>
+        );
+      })}
+    </Space>
+  );
+};
+export default Instances;
@@ -10,7 +10,6 @@ import { SealColumnProps } from '@/components/seal-table/types';
 import { PageAction } from '@/config';
 import HotKeys from '@/config/hotkeys';
 import useBodyScroll from '@/hooks/use-body-scroll';
-import useDownloadStream from '@/hooks/use-download-stream';
 import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
 import useTableRowSelection from '@/hooks/use-table-row-selection';
 import useTableSort from '@/hooks/use-table-sort';
@@ -71,7 +70,7 @@ import { FormData, ListItem, ModelInstanceListItem } from '../config/types';
 import { useGenerateFormEditInitialValues } from '../hooks';
 import DeployDropdown from './deploy-dropdown';
 import DeployModal from './deploy-modal';
-import InstanceItem from './instance-item';
+import Instances from './instances';
 import ModelTag from './model-tag';
 import UpdateModel from './update-modal';
 import ViewLogsModal from './view-logs-modal';
@@ -182,7 +181,6 @@ const Models: React.FC<ModelsProps> = ({
  loadend,
  total
 }) => {
-  const { downloadStream } = useDownloadStream();
  const { getGPUList, generateFormValues, gpuDeviceList } =
    useGenerateFormEditInitialValues();
  const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
@@ -566,7 +564,7 @@ const Models: React.FC<ModelsProps> = ({
    [onViewLogs]
  );
  const handleDeleteInstace = useCallback(
-    (row: any, list: ModelInstanceListItem[]) => {
+    (row: any) => {
      modalRef.current.show({
        content: 'models.instances',
        okText: 'common.button.delrecreate',
@@ -643,23 +641,17 @@ const Models: React.FC<ModelsProps> = ({
        });
      }
    },
-    [handleEdit, handleOpenPlayGround, handleDelete]
+    [handleEdit, handleOpenPlayGround, handleDelete, expandedRowKeys]
  );

  const handleChildSelect = useCallback(
-    (val: any, row: ModelInstanceListItem, list: ModelInstanceListItem[]) => {
+    (val: any, row: ModelInstanceListItem) => {
      if (val === 'delete') {
-        handleDeleteInstace(row, list);
+        handleDeleteInstace(row);
      }
      if (val === 'viewlog') {
        handleViewLogs(row);
      }
-      if (val === 'download') {
-        downloadStream({
-          url: `${MODEL_INSTANCE_API}/${row.id}/logs`,
-          filename: row.name
-        });
-      }
    },
    [handleViewLogs, handleDeleteInstace]
  );
@@ -667,13 +659,12 @@ const Models: React.FC<ModelsProps> = ({
  const renderChildren = useCallback(
    (list: any, parent?: any) => {
      return (
-        <InstanceItem
+        <Instances
          list={list}
          modelData={parent}
-          gpuDeviceList={[]}
          workerList={workerList}
          handleChildSelect={handleChildSelect}
-        ></InstanceItem>
+        ></Instances>
      );
    },
    [workerList]