fix: model edit

2 years ago · bb41a78d40
parent 9edce7116e
commit bb41a78d40
9 changed files with 90 additions and 45 deletions
--- a/config/routes.ts
+++ b/config/routes.ts
@ -26,6 +26,7 @@ export default [
    path: '/models',
    key: 'models',
    icon: 'Block',
+    access: 'canSeeAdmin',
    component: './llmodels'
  },
  {
@ -33,6 +34,7 @@ export default [
    path: '/resources',
    key: 'resources',
    icon: 'CloudServer',
+    access: 'canSeeAdmin',
    component: './resources'
  },
  {
--- a/src/layouts/Exception.tsx
+++ b/src/layouts/Exception.tsx
@ -1,9 +1,9 @@
 // @ts-nocheck
 // This file is generated by Umi automatically
 // DO NOT CHANGE IT MANUALLY!
+import { history, useIntl, type IRoute } from '@umijs/max';
+import { Button, Result } from 'antd';
 import React from 'react';
-import { history, type IRoute } from '@umijs/max';
-import { Result, Button } from 'antd';

 const Exception: React.FC<{
  children: React.ReactNode;
@ -12,27 +12,33 @@ const Exception: React.FC<{
  noAccessible?: React.ReactNode;
  unAccessible?: React.ReactNode;
  noFound?: React.ReactNode;
-}> = (props) => (
-  console.log('Exception========', props),
+}> = (props) => {
+  const intl = useIntl();
  // render custom 404
-  (!props.route && (props.noFound || props.notFound)) ||
-  // render custom 403
-  (props.route?.unaccessible && (props.unAccessible || props.noAccessible)) ||
-  // render default exception
-  ((!props.route || props.route?.unaccessible) && (
-    <Result
-      status={props.route ? '403' : '404'}
-      title={props.route ? '403' : '404'}
-      subTitle={props.route ? '抱歉，你无权访问该页面' : '抱歉，你访问的页面不存在'}
-      extra={
-        <Button type="primary" onClick={() => history.push('/')}>
-          返回首页
-        </Button>
-      }
-    />
-  )) ||
-  // normal render
-  props.children
-);
+  return (
+    (!props.route && (props.noFound || props.notFound)) ||
+    // render custom 403
+    (props.route?.unaccessible && (props.unAccessible || props.noAccessible)) ||
+    // render default exception
+    ((!props.route || props.route?.unaccessible) && (
+      <Result
+        status={props.route ? '403' : '404'}
+        title={props.route ? '403' : '404'}
+        subTitle={
+          props.route
+            ? intl.formatMessage({ id: 'common.permission.403' })
+            : intl.formatMessage({ id: 'common.permission.404' })
+        }
+        extra={
+          <Button type="primary" onClick={() => history.push('/')}>
+            {intl.formatMessage({ id: 'common.button.back' })}
+          </Button>
+        }
+      />
+    )) ||
+    // normal render
+    props.children
+  );
+};

 export default Exception;
--- a/src/locales/en-US/common.ts
+++ b/src/locales/en-US/common.ts
@ -112,7 +112,10 @@ export default {
  'common.chart.filter.holder': 'filter data items',
  'common.chart.filter.tips': 'View more by filter',
  'common.permission.401': 'Not logged in',
-  'common.permission.403': 'Permission Denied',
+  'common.permission.403':
+    'Sorry, you do not have permission to access this page.',
+  'common.permission.404':
+    'Sorry, the page you are trying to access does not exist.',
  'common.permission.action.post': 'Create',
  'common.permission.action.get': 'Search',
  'common.permission.action.delete': 'Delete',
--- a/src/locales/en-US/models.ts
+++ b/src/locales/en-US/models.ts
@ -1,6 +1,7 @@
 export default {
  'models.button.deploy': 'Deploy Model',
  'models.title': 'Models',
+  'models.title.edit': 'Edit Model',
  'models.table.models': 'models',
  'models.table.name': 'Model Name',
  'models.form.source': 'Source',
--- a/src/locales/zh-CN/common.ts
+++ b/src/locales/zh-CN/common.ts
@ -107,7 +107,8 @@ export default {
  'common.chart.filter.holder': '过滤数据项',
  'common.chart.filter.tips': '过滤查看更多数据项',
  'common.permission.401': '未登录',
-  'common.permission.403': '权限不足',
+  'common.permission.403': '抱歉，你无权访问该页面',
+  'common.permission.404': '抱歉，你访问的页面不存在',
  'common.permission.action.post': '新增',
  'common.permission.action.get': '查询',
  'common.permission.action.delete': '删除',
--- a/src/locales/zh-CN/models.ts
+++ b/src/locales/zh-CN/models.ts
@ -1,6 +1,7 @@
 export default {
  'models.button.deploy': '部署模型',
  'models.title': '模型',
+  'models.title.edit': '编辑模型',
  'models.table.models': '模型',
  'models.table.name': '模型名称',
  'models.form.source': '来源',
--- a/src/pages/llmodels/components/add-modal.tsx
+++ b/src/pages/llmodels/components/add-modal.tsx
@ -13,12 +13,13 @@ import {
  callHuggingfaceQuickSearch,
  queryHuggingfaceModelFiles
 } from '../apis';
-import { FormData } from '../config/types';
+import { FormData, ListItem } from '../config/types';

 type AddModalProps = {
  title: string;
  action: PageActionType;
  open: boolean;
+  data?: ListItem;
  onOk: (values: FormData) => void;
  onCancel: () => void;
 };
@ -48,6 +49,11 @@ const AddModal: React.FC<AddModalProps> = (props) => {
        replicas: 1
      });
    }
+    if (action === PageAction.EDIT && open) {
+      form.setFieldsValue({
+        ...props.data
+      });
+    }
  };

  useEffect(() => {
@ -68,7 +74,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
      </span>
    );
  };
-  const handleRepoSelect = async (repo: string) => {
+  const handleFetchModelFiles = async (repo: string) => {
    try {
      const res = await queryHuggingfaceModelFiles({ repo });
      const list = _.filter(res, (file: any) => {
@ -88,7 +94,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {

  const handleRepoOnBlur = (e: any) => {
    const repo = form.getFieldValue('huggingface_repo_id');
-    handleRepoSelect(repo);
+    handleFetchModelFiles(repo);
  };

  const handleOnSearchRepo = async (text: string) => {
@ -163,6 +169,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
            label={intl.formatMessage({ id: 'models.form.filename' })}
            required
            options={fileOptions}
+            onFocus={handleRepoOnBlur}
          ></SealAutoComplete>
        </Form.Item>
      </>
--- a/src/pages/llmodels/index.tsx
+++ b/src/pages/llmodels/index.tsx
@ -14,6 +14,7 @@ import useUpdateChunkedList from '@/hooks/use-update-chunk-list';
 import { handleBatchRequest } from '@/utils';
 import {
  DeleteOutlined,
+  EditOutlined,
  FieldTimeOutlined,
  PlusOutlined,
  SyncOutlined,
@ -44,7 +45,8 @@ import {
  deleteModelInstance,
  queryModelInstanceLogs,
  queryModelInstancesList,
-  queryModelsList
+  queryModelsList,
+  updateModel
 } from './apis';
 import AddModal from './components/add-modal';
 import ViewLogsModal from './components/view-logs-modal';
@ -70,6 +72,9 @@ const Models: React.FC = () => {
  const [action, setAction] = useState<PageActionType>(PageAction.CREATE);
  const [title, setTitle] = useState<string>('');
  const [dataSource, setDataSource] = useState<ListItem[]>([]);
+  const [currentData, setCurrentData] = useState<ListItem | undefined>(
+    undefined
+  );
  const timer = useRef<any>();
  let axiosToken = createAxiosToken();
  const [queryParams, setQueryParams] = useState({
@ -164,7 +169,6 @@ const Models: React.FC = () => {
  };

  const handleSearch = (e: any) => {
-    console.log('request==========');
    fetchData();
  };

@ -178,16 +182,20 @@ const Models: React.FC = () => {
  const handleAddModal = () => {
    setOpenAddModal(true);
    setAction(PageAction.CREATE);
-  };
-
-  const handleClickMenu = (e: any) => {
-    console.log('click', e);
+    setTitle(intl.formatMessage({ id: 'models.button.deploy' }));
  };

  const handleModalOk = async (data: FormData) => {
-    await createModel({ data });
-    setOpenAddModal(false);
-    message.success(intl.formatMessage({ id: 'common.message.success' }));
+    try {
+      if (action === PageAction.CREATE) {
+        await createModel({ data });
+      }
+      if (action === PageAction.EDIT) {
+        await updateModel({ data, id: currentData?.id as number });
+      }
+      setOpenAddModal(false);
+      message.success(intl.formatMessage({ id: 'common.message.success' }));
+    } catch (error) {}
  };

  const handleModalCancel = () => {
@ -295,6 +303,13 @@ const Models: React.FC = () => {
    return data.items || [];
  };

+  const handleEdit = (row: ListItem) => {
+    setCurrentData(row);
+    setOpenAddModal(true);
+    setAction(PageAction.EDIT);
+    setTitle(intl.formatMessage({ id: 'models.title.edit' }));
+  };
+
  useEffect(() => {
    fetchData();
  }, [queryParams]);
@ -493,6 +508,18 @@ const Models: React.FC = () => {
            render={(text, record) => {
              return !record.transition ? (
                <Space size={20}>
+                  <Tooltip
+                    title={intl.formatMessage({
+                      id: 'common.button.edit'
+                    })}
+                  >
+                    <Button
+                      size="small"
+                      type="primary"
+                      onClick={() => handleEdit(record)}
+                      icon={<EditOutlined></EditOutlined>}
+                    ></Button>
+                  </Tooltip>
                  <Tooltip
                    title={intl.formatMessage({
                      id: 'models.openinplayground'
@ -525,7 +552,8 @@ const Models: React.FC = () => {
      <AddModal
        open={openAddModal}
        action={action}
-        title={intl.formatMessage({ id: 'models.button.deploy' })}
+        title={title}
+        data={currentData}
        onCancel={handleModalCancel}
        onOk={handleModalOk}
      ></AddModal>
--- a/src/pages/users/components/add-modal.tsx
+++ b/src/pages/users/components/add-modal.tsx
@ -1,7 +1,7 @@
 import ModalFooter from '@/components/modal-footer';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
-import { PageAction } from '@/config';
+import { PageAction, PasswordReg } from '@/config';
 import { PageActionType } from '@/config/types';
 import {
  SyncOutlined,
@ -122,12 +122,8 @@ const AddModal: React.FC<AddModalProps> = ({
          rules={[
            {
              required: true,
-              message: intl.formatMessage(
-                { id: 'common.form.rule.input' },
-                {
-                  name: intl.formatMessage({ id: 'common.form.password' })
-                }
-              )
+              pattern: PasswordReg,
+              message: intl.formatMessage({ id: 'users.form.rule.password' })
            }
          ]}
        >