chore: merge fetch data request

2025-03-12 16:53:43 +08:00
parent e04874d074
commit a7170a4eee
4 changed files with 229 additions and 218 deletions
@@ -232,7 +232,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
        )}
        <div style={{ display: 'flex', flex: 1, maxWidth: '100%' }}>
          <ColumnWrapper
-            paddingBottom={warningStatus.show ? 125 : 50}
+            paddingBottom={warningStatus.show ? 140 : 50}
            footer={
              <>
                {warningStatus.show && (
@@ -29,7 +29,6 @@ import {
 import dayjs from 'dayjs';
 import _ from 'lodash';
 import React, { useCallback, useEffect, useMemo } from 'react';
-import styled from 'styled-components';
 import { MODEL_INSTANCE_API } from '../apis';
 import { InstanceStatusMap, InstanceStatusMapValue, status } from '../config';
 import { ModelInstanceListItem } from '../config/types';
@@ -65,6 +64,52 @@ const WorkerInfo = (props: {
    </span>
  );
 };
+
+const InstanceStatusTag = (
+  props: Pick<InstanceItemProps, 'instanceData' | 'handleChildSelect'>
+) => {
+  const intl = useIntl();
+  const { instanceData, handleChildSelect } = props;
+  if (!instanceData.state) {
+    return null;
+  }
+  return (
+    <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)}
+          >
+            {intl.formatMessage({ id: 'models.list.more.logs' })}
+          </Button>
+        ) : null
+      }
+      statusValue={{
+        status:
+          instanceData.state === InstanceStatusMap.Downloading &&
+          instanceData.download_progress === 100
+            ? status[InstanceStatusMap.Running]
+            : status[instanceData.state],
+        text: InstanceStatusMapValue[instanceData.state],
+        message:
+          instanceData.state === InstanceStatusMap.Downloading &&
+          instanceData.download_progress === 100
+            ? ''
+            : instanceData.state_message
+      }}
+    />
+  );
+};
+
 interface InstanceItemProps {
  instanceData: ModelInstanceListItem;
  workerList: WorkerListItem[];
@@ -129,9 +174,6 @@ const distributeCols: ColumnProps[] = [
    title: 'models.table.vram.allocated',
    locale: true,
    key: 'vram',
-    // rowSpan: ({ row, rowIndex, colIndex, dataIndex, dataList }) => {
-    //   return rowIndex === 0 ? dataList.length : 0;
-    // },
    render: ({ rowIndex, row, dataList }) => {
      return convertFileSize(row.vram, 1);
    }
@@ -153,40 +195,6 @@ const renderMessage = (title: string) => {
  );
 };

-const InfoItem = (props: { label: string; value: any; width?: number }) => {
-  const { label, value, width } = props;
-  const Wrapper = styled.div`
-    .info-item {
-      width: ${width ? `${width}px` : '100%'};
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      padding: 4px 8px;
-      background-color: var(--color-gray-fill-3);
-      border-radius: 4px;
-      .value {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-        flex-wrap: wrap;
-        color: var(--color-white-quaternary);
-        .index {
-          color: var(--ant-color-text-light-solid);
-        }
-      }
-    }
-  `;
-  return (
-    <Wrapper>
-      <div className="info-item">
-        <span className="label">{label}</span>
-        <span className="value">{value}</span>
-      </div>
-    </Wrapper>
-  );
-};
-
 const InstanceItem: React.FC<InstanceItemProps> = ({
  instanceData,
  workerList,
@@ -206,7 +214,7 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
      }
      return true;
    });
-  }, [instanceData]);
+  }, [instanceData.state]);

  const createFileName = (name: string) => {
    const timestamp = dayjs().format('YYYY-MM-DD_HH-mm-ss');
@@ -239,23 +247,6 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
    []
  );

-  const displayGPUs = (vrams: Record<string, number>) => {
-    return (
-      <span className="flex-column">
-        {Object.keys(vrams)
-          ?.sort?.()
-          .map((index) => {
-            return (
-              <span key={index}>
-                [{index}] {''}
-                {convertFileSize(vrams?.[index], 0)}
-              </span>
-            );
-          })}
-      </span>
-    );
-  };
-
  const renderWorkerInfo = useMemo(() => {
    let workerIp = '-';
    if (instanceData.worker_ip) {
@@ -283,85 +274,87 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
        </div>
      </div>
    );
-  }, [modelData, instanceData, intl]);
+  }, [
+    instanceData.worker_name,
+    instanceData.worker_ip,
+    instanceData.port,
+    instanceData.gpu_indexes,
+    modelData?.backend,
+    modelData?.backend_version,
+    intl
+  ]);

  const calcTotalVram = (vram: Record<string, number>) => {
    return _.sum(_.values(vram));
  };

-  const renderDistributedServer = useCallback(
-    (severList: any[]) => {
-      const list = _.map(severList, (item: any) => {
-        const data = _.find(workerList, { id: item.worker_id });
-        return {
-          worker_name: data?.name,
-          worker_ip: data?.ip,
-          port: '',
-          vram: calcTotalVram(item.computed_resource_claim?.vram || {}),
-          gpu_index: _.keys(item.computed_resource_claim?.vram).join(',')
-        };
-      });
+  const renderDistributedServer = (severList: any[]) => {
+    const list = _.map(severList, (item: any) => {
+      const data = _.find(workerList, { id: item.worker_id });
+      return {
+        worker_name: data?.name,
+        worker_ip: data?.ip,
+        port: '',
+        vram: calcTotalVram(item.computed_resource_claim?.vram || {}),
+        gpu_index: _.keys(item.computed_resource_claim?.vram).join(',')
+      };
+    });

-      const mainWorker = [
-        {
-          worker_name: `${instanceData.worker_name}`,
-          worker_ip: `${instanceData.worker_ip}`,
-          port: '',
-          vram: calcTotalVram(instanceData.computed_resource_claim?.vram || {}),
-          gpu_index: `${instanceData.gpu_indexes?.join?.(',')}(main)`
-        }
-      ];
-
-      return (
-        <div>
-          <SimpleTabel
-            columns={distributeCols}
-            dataSource={[...mainWorker, ...list]}
-          ></SimpleTabel>
-        </div>
-      );
-    },
-    [workerList, instanceData, intl]
-  );
-
-  const renderDistributionInfo = useCallback(
-    (severList: any[]) => {
-      if (!severList.length) {
-        return null;
+    const mainWorker = [
+      {
+        worker_name: `${instanceData.worker_name}`,
+        worker_ip: `${instanceData.worker_ip}`,
+        port: '',
+        vram: calcTotalVram(instanceData.computed_resource_claim?.vram || {}),
+        gpu_index: `${instanceData.gpu_indexes?.join?.(',')}(main)`
      }
-      return (
-        <Tooltip
-          overlayInnerStyle={{
-            width: 'max-content',
-            maxWidth: '500px',
-            minWidth: '400px'
+    ];
+
+    return (
+      <div>
+        <SimpleTabel
+          columns={distributeCols}
+          dataSource={[...mainWorker, ...list]}
+        ></SimpleTabel>
+      </div>
+    );
+  };
+
+  const renderDistributionInfo = (severList: any[]) => {
+    if (!severList.length) {
+      return null;
+    }
+    return (
+      <Tooltip
+        overlayInnerStyle={{
+          width: 'max-content',
+          maxWidth: '500px',
+          minWidth: '400px'
+        }}
+        title={renderDistributedServer(severList)}
+      >
+        <Tag
+          color="processing"
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            maxWidth: '100%',
+            minWidth: 50,
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            opacity: 0.75,
+            borderRadius: 12
          }}
-          title={renderDistributedServer(severList)}
        >
-          <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>
-      );
-    },
-    [renderDistributedServer]
-  );
+          <InfoCircleOutlined className="m-r-5" />
+          {intl.formatMessage({
+            id: 'models.table.acrossworker'
+          })}
+        </Tag>
+      </Tooltip>
+    );
+  };

  const renderOffloadInfo = useMemo(() => {
    const total_layers = instanceData.computed_resource_claim?.total_layers;
@@ -425,21 +418,17 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
    instanceData.computed_resource_claim?.offload_layers
  ]);

-  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]
-  );
+  const handleOnSelect = (val: string) => {
+    if (val === 'download') {
+      downloadStream({
+        url: `${MODEL_INSTANCE_API}/${instanceData.id}/logs`,
+        filename: createFileName(instanceData.name),
+        downloadNotification
+      });
+    } else {
+      handleChildSelect(val, instanceData);
+    }
+  };

  return (
    <>
@@ -487,45 +476,10 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
                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)
-                          }
-                        >
-                          {intl.formatMessage({
-                            id: 'models.list.more.logs'
-                          })}
-                        </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>
-                )}
+                <InstanceStatusTag
+                  instanceData={instanceData}
+                  handleChildSelect={handleChildSelect}
+                />
              </span>
            </Col>
            <Col span={5}>
@@ -81,16 +81,6 @@ const Models: React.FC = () => {
    setDataList: setModelInstances
  });

-  const getWorkerList = async () => {
-    try {
-      const data = await queryWorkersList({ page: 1, perPage: 100 });
-      setWorkerList(data.items || []);
-    } catch (error) {
-      // ingore
-      setWorkerList([]);
-    }
-  };
-
  const getAllModelInstances = useCallback(async () => {
    try {
      instancesToken.current?.cancel?.();
@@ -110,7 +100,16 @@ const Models: React.FC = () => {
  }, []);

  const fetchData = useCallback(
-    async (loadingVal?: boolean) => {
+    async (params?: {
+      loadingVal?: boolean;
+      query?: {
+        page: number;
+        perPage: number;
+        search: string;
+        categories: any[];
+      };
+    }) => {
+      const { loadingVal, query } = params || {};
      axiosToken?.cancel?.();
      axiosToken = createAxiosToken();
      setDataSource((pre) => {
@@ -119,7 +118,7 @@ const Models: React.FC = () => {
      });
      try {
        const params = {
-          ..._.pickBy(queryParams, (val: any) => !!val)
+          ..._.pickBy(query || queryParams, (val: any) => !!val)
        };
        const res: any = await queryModelsList(params, {
          cancelToken: axiosToken.token
@@ -153,6 +152,13 @@ const Models: React.FC = () => {
        page: page,
        perPage: pageSize || 10
      });
+      fetchData({
+        query: {
+          ...queryParams,
+          page: page,
+          perPage: pageSize || 10
+        }
+      });
    },
    [queryParams]
  );
@@ -213,7 +219,9 @@ const Models: React.FC = () => {
    await getAllModelInstances();
    await createModelsInstanceChunkRequest();
    await createModelsChunkRequest();
-    fetchData(false);
+    fetchData({
+      loadingVal: false
+    });
  }, [fetchData, createModelsChunkRequest, createModelsInstanceChunkRequest]);

  const handleSearch = useCallback(async () => {
@@ -226,29 +234,69 @@ const Models: React.FC = () => {
      page: 1,
      search: e.target.value
    });
+    fetchData({
+      query: {
+        ...queryParams,
+        page: 1,
+        search: e.target.value
+      }
+    });
  }, 350);

  const handleNameChange = useCallback(debounceUpdateFilter, [queryParams]);

  const handleCategoryChange = useCallback(
-    (value: any) => {
+    async (value: any) => {
      setQueryParams({
        ...queryParams,
        page: 1,
        categories: value
      });
+      fetchData({
+        query: {
+          ...queryParams,
+          page: 1,
+          categories: value
+        }
+      });
    },
    [queryParams]
  );

  useEffect(() => {
-    fetchData();
-    return () => {
+    // fetch data first time
+    const getTableData = async (loadingVal?: boolean) => {
      axiosToken?.cancel?.();
+      axiosToken = createAxiosToken();
+      setDataSource((pre) => {
+        pre.loading = loadingVal ?? true;
+        return { ...pre };
+      });
+      try {
+        const params = {
+          ..._.pickBy(queryParams, (val: any) => !!val)
+        };
+        const res: any = await queryModelsList(params, {
+          cancelToken: axiosToken.token
+        });
+        return res;
+      } catch (error) {
+        return {};
+      }
    };
-  }, [queryParams]);

-  useEffect(() => {
+    // get worker list
+    const getWorkerList = async (): Promise<any> => {
+      try {
+        const data = await queryWorkersList({ page: 1, perPage: 100 });
+        return data;
+      } catch (error) {
+        // ingore
+        return {};
+      }
+    };
+
+    // get catalog list
    const getCataLogList = async () => {
      const isFirstLogin = readState(IS_FIRST_LOGIN);
      if (!isFirstLogin) {
@@ -260,8 +308,7 @@ const Models: React.FC = () => {
          page: 1
        });
        if (!res?.items?.length) {
-          setCatalogList([]);
-          return;
+          return [];
        }
        const name = _.toLower(res?.items[0]?.name).replace(/\s/g, '-') || '';
        const catalogSpecs: any = await queryCatalogItemSpec({
@@ -281,24 +328,36 @@ const Models: React.FC = () => {
                -1)
          );
        });
-        setCatalogList(resultList || []);
+        return resultList || [];
      } catch (error) {
        // ignore
-        setCatalogList([]);
+        return [];
      }
    };
-    getCataLogList();
-  }, []);

-  useEffect(() => {
-    createModelsChunkRequest();
-  }, [createModelsChunkRequest]);
-
-  useEffect(() => {
-    getWorkerList();
-    createModelsInstanceChunkRequest();
+    const init = async () => {
+      const [modelRes, workerRes, cList] = await Promise.all([
+        getTableData(),
+        getWorkerList(),
+        getCataLogList()
+      ]);
+      setDataSource({
+        dataList: modelRes.items || [],
+        loading: false,
+        loadend: true,
+        total: modelRes.pagination?.total || 0,
+        deletedIds: []
+      });
+      setWorkerList(workerRes.items || []);
+      setCatalogList(cList);

+      setTimeout(() => {
+        createModelsInstanceChunkRequest();
+      }, 500);
+    };
+    init();
    return () => {
+      axiosToken?.cancel?.();
      chunkRequedtRef.current?.current?.cancel?.();
      cacheDataListRef.current = [];
      cacheInsDataListRef.current = [];
@@ -307,10 +366,6 @@ const Models: React.FC = () => {
    };
  }, []);

-  useEffect(() => {
-    console.log('modelInstances====', modelInstances);
-  }, [modelInstances]);
-
  useEffect(() => {
    const handleVisibilityChange = async () => {
      if (document.visibilityState === 'visible') {
@@ -318,7 +373,9 @@ const Models: React.FC = () => {
        await getAllModelInstances();
        await createModelsInstanceChunkRequest();
        await createModelsChunkRequest();
-        fetchData(false);
+        fetchData({
+          loadingVal: false
+        });
      } else {
        isPageHidden.current = true;
        chunkRequedtRef.current?.current?.cancel?.();