feat: duplicate deployment

2026-02-04 14:58:48 +08:00
parent 5ad9ac277c
commit 05c05419fc
25 changed files with 366 additions and 220 deletions
@@ -15,6 +15,9 @@ import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
 import useTableRowSelection from '@/hooks/use-table-row-selection';
 import PageBox from '@/pages/_components/page-box';
 import useNoResourceResult from '@/pages/llmodels/hooks/use-no-resource-result';
+import { TargetStatusValueMap } from '@/pages/model-routes/config';
+import useOpenPlayground from '@/pages/model-routes/hooks/use-open-playground';
+import useQueryTargets from '@/pages/model-routes/services/use-query-targets';
 import { handleBatchRequest } from '@/utils';
 import { DownOutlined, SearchOutlined, SyncOutlined } from '@ant-design/icons';
 import { useIntl, useNavigate, useSearchParams } from '@umijs/max';
@@ -54,11 +57,10 @@ import {
  ModelInstanceListItem,
  SourceType
 } from '../config/types';
+import useEditDeployment from '../hooks/use-edit-deployment';
 import useFilterStatus from '../hooks/use-filter-status';
 import useFormInitialValues from '../hooks/use-form-initial-values';
 import useModelsColumns from '../hooks/use-models-columns';
-import AccessControlModal from './access-control-modal';
-import APIAccessInfoModal from './api-access-info';
 import DeployModal from './deploy-modal';
 import Instances from './instances';
 import UpdateModelModal from './update-modal';
@@ -140,13 +142,12 @@ const Models: React.FC<ModelsProps> = ({
  const [searchParams] = useSearchParams();
  const page = searchParams.get('page');
  const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
-  const [updateFormInitials, setUpdateFormInitials] = useState<{
-    data: any;
-    isGGUF: boolean;
-  }>({
-    data: {},
-    isGGUF: false
-  });
+  const {
+    openEditModalStatus,
+    openEditModal,
+    openDuplicateModal,
+    closeEditModal
+  } = useEditDeployment();
  const [expandAtom, setExpandAtom] = useAtom(modelsExpandKeysAtom);
  const [modelsSession, setModelsSession] = useAtom(modelsSessionAtom);
  const intl = useIntl();
@@ -159,17 +160,18 @@ const Models: React.FC<ModelsProps> = ({
    removeExpandedRowKey,
    expandedRowKeys
  } = useExpandedRowKeys(expandAtom);
+  const { handleOpenPlayGround } = useOpenPlayground();
  const { labelRender, optionRender, handleStatusChange, statusOptions } =
    useFilterStatus({
      onStatusChange: onStatusChange
    });
+  const { fetchData: fetchTargets, dataList: targetList } = useQueryTargets();
+
+  useEffect(() => {
+    fetchTargets({});
+  }, []);

-  const [apiAccessInfo, setAPIAccessInfo] = useState<any>({
-    show: false,
-    data: {}
-  });
  const [openLogModal, setOpenLogModal] = useState(false);
-  const [openAddModal, setOpenAddModal] = useState(false);
  const [openDeployModal, setOpenDeployModal] = useState<{
    show: boolean;
    width: number | string;
@@ -183,7 +185,6 @@ const Models: React.FC<ModelsProps> = ({
    isGGUF: false,
    source: modelSourceMap.huggingface_value as SourceType
  });
-  const currentData = useRef<ListItem>({} as ListItem);
  const [currentInstance, setCurrentInstance] = useState<{
    url: string;
    status: string;
@@ -194,17 +195,6 @@ const Models: React.FC<ModelsProps> = ({
    url: '',
    status: ''
  });
-  const [openAccessControlModal, setOpenAccessControlModal] = useState<{
-    open: boolean;
-    currentData: ListItem | null;
-    title: string;
-    action: PageActionType;
-  }>({
-    open: false,
-    currentData: null,
-    title: '',
-    action: PageAction.CREATE
-  });
  const modalRef = useRef<any>(null);

  useEffect(() => {
@@ -223,10 +213,6 @@ const Models: React.FC<ModelsProps> = ({
    };
  }, []);

-  const setCurrentData = (data: ListItem) => {
-    currentData.current = data;
-  };
-
  const handleOnSort = (order: TableOrder | Array<TableOrder>) => {
    onTableSort?.(order);
  };
@@ -253,16 +239,29 @@ const Models: React.FC<ModelsProps> = ({
  };

  const handleModalOk = async (data: FormData) => {
+    const currentData = openEditModalStatus.currentData;
    try {
-      await updateModel({
-        data,
-        id: currentData.current?.id as number
-      });
-      setOpenAddModal(false);
-      message.success(intl.formatMessage({ id: 'common.message.success' }));
-      if (data.replicas > currentData.current?.replicas) {
-        updateExpandedRowKeys([currentData.current?.id, ...expandedRowKeys]);
+      if (currentData.realAction === PageAction.COPY) {
+        const modelData = await createModel({
+          data
+        });
+
+        if (data.replicas > 0) {
+          updateExpandedRowKeys([modelData.id, ...expandedRowKeys]);
+        }
      }
+      if (currentData.realAction === PageAction.EDIT) {
+        await updateModel({
+          data,
+          id: currentData.row.id as number
+        });
+
+        if (data.replicas > currentData.row.replicas) {
+          updateExpandedRowKeys([currentData.row.id, ...expandedRowKeys]);
+        }
+      }
+      closeEditModal();
+      message.success(intl.formatMessage({ id: 'common.message.success' }));
      setTimeout(() => {
        handleSearch();
      }, 150);
@@ -271,7 +270,7 @@ const Models: React.FC<ModelsProps> = ({
  };

  const handleModalCancel = useCallback(() => {
-    setOpenAddModal(false);
+    closeEditModal();
    restoreScrollHeight();
  }, []);

@@ -282,29 +281,28 @@ const Models: React.FC<ModelsProps> = ({
    });
  };

-  const handleCreateModel = useCallback(
-    async (data: FormData) => {
-      try {
-        console.log('data:', data, openDeployModal);
+  const refreshListStatus = (modelData: ListItem) => {
+    setTimeout(() => {
+      updateExpandedRowKeys([modelData.id, ...expandedRowKeys]);
+    }, 300);
+    message.success(intl.formatMessage({ id: 'common.message.success' }));
+    setTimeout(() => {
+      handleSearch?.();
+    }, 150);
+  };

-        const modelData = await createModel({
-          data
-        });
-        setOpenDeployModal({
-          ...openDeployModal,
-          show: false
-        });
-        setTimeout(() => {
-          updateExpandedRowKeys([modelData.id, ...expandedRowKeys]);
-        }, 300);
-        message.success(intl.formatMessage({ id: 'common.message.success' }));
-        setTimeout(() => {
-          handleSearch?.();
-        }, 150);
-      } catch (error) {}
-    },
-    [openDeployModal]
-  );
+  const handleCreateModel = async (data: FormData) => {
+    try {
+      const modelData = await createModel({
+        data
+      });
+      setOpenDeployModal({
+        ...openDeployModal,
+        show: false
+      });
+      refreshListStatus(modelData);
+    } catch (error) {}
+  };

  const handleLogModalCancel = useCallback(() => {
    setOpenLogModal(false);
@@ -400,28 +398,23 @@ const Models: React.FC<ModelsProps> = ({
    return `${MODELS_API}/${params.id}/instances`;
  }, []);

-  const handleEdit = async (row: ListItem) => {
+  const handleEdit = async (row: ListItem, realAction: PageActionType) => {
    const initialValues = generateFormValues(row, []);
-    setUpdateFormInitials({
-      data: initialValues,
-      isGGUF: false
-    });
-    setCurrentData(row);
-    setOpenAddModal(true);
+    if (realAction === PageAction.EDIT) {
+      openEditModal(initialValues, row);
+    } else if (realAction === PageAction.COPY) {
+      openDuplicateModal(initialValues, row);
+    }
    saveScrollHeight();
  };

-  const handleViewAPIInfo = useCallback((row: ListItem) => {
-    setAPIAccessInfo({
-      show: true,
-      data: row
-    });
-  }, []);
-
  const handleSelect = useMemoizedFn(async (val: any, row: ListItem) => {
    try {
      if (val === 'edit') {
-        handleEdit(row);
+        handleEdit(row, PageAction.EDIT);
+      }
+      if (val === 'copy') {
+        handleEdit(row, PageAction.COPY);
      }
      if (val === 'delete') {
        handleDelete(row);
@@ -433,10 +426,6 @@ const Models: React.FC<ModelsProps> = ({
        onStart?.();
      }

-      if (val === 'api') {
-        handleViewAPIInfo(row);
-      }
-
      if (val === 'stop') {
        modalRef.current?.show({
          content: 'models.instances',
@@ -450,13 +439,16 @@ const Models: React.FC<ModelsProps> = ({
          }
        });
      }
+      if (val === 'chat') {
+        const targetRoute = targetList.find(
+          (target) =>
+            target.model_id === row.id &&
+            target.state === TargetStatusValueMap.Active
+        );

-      if (val === 'accessControl') {
-        setOpenAccessControlModal({
-          title: intl.formatMessage({ id: 'models.button.accessSettings' }),
-          action: PageAction.EDIT,
-          currentData: row,
-          open: true
+        handleOpenPlayGround({
+          categories: row.categories || [],
+          name: targetRoute?.route_name || ''
        });
      }
    } catch (error) {
@@ -551,7 +543,8 @@ const Models: React.FC<ModelsProps> = ({
    return {
      handleSelect,
      clusterList,
-      sortOrder
+      sortOrder,
+      targetList: targetList
    };
  }, [handleSelect, clusterList, sortOrder]);

@@ -565,14 +558,6 @@ const Models: React.FC<ModelsProps> = ({
    }
  });

-  const handleCancelAccessControl = () => {
-    setOpenAccessControlModal({
-      ...openAccessControlModal,
-      currentData: null,
-      open: false
-    });
-  };
-
  const { noResourceResult } = useNoResourceResult({
    loadend: loadend,
    loading: loading,
@@ -735,10 +720,10 @@ const Models: React.FC<ModelsProps> = ({
        ></SealTable>
      </PageBox>
      <UpdateModelModal
-        open={openAddModal}
-        action={PageAction.EDIT}
-        title={intl.formatMessage({ id: 'models.title.edit' })}
-        updateFormInitials={updateFormInitials}
+        open={openEditModalStatus.open}
+        action={openEditModalStatus.action}
+        title={openEditModalStatus.title}
+        currentData={openEditModalStatus.currentData}
        clusterList={clusterList}
        onCancel={handleModalCancel}
        onOk={handleModalOk}
@@ -765,23 +750,6 @@ const Models: React.FC<ModelsProps> = ({
        onCancel={handleLogModalCancel}
      ></ViewLogsModal>
      <DeleteModal ref={modalRef}></DeleteModal>
-      <APIAccessInfoModal
-        open={apiAccessInfo.show}
-        data={apiAccessInfo.data}
-        onClose={() => {
-          setAPIAccessInfo({
-            ...apiAccessInfo,
-            show: false
-          });
-        }}
-      ></APIAccessInfoModal>
-      <AccessControlModal
-        onCancel={handleCancelAccessControl}
-        title={openAccessControlModal.title}
-        open={openAccessControlModal.open}
-        currentData={openAccessControlModal.currentData}
-        action={openAccessControlModal.action}
-      ></AccessControlModal>
    </>
  );
 };