fix: model edit

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'
   },
   {

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

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',

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',

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': '删除',

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': '来源',

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>
       </>

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);
-  };
+    setTitle(intl.formatMessage({ id: 'models.button.deploy' }));
-
-  const handleClickMenu = (e: any) => {
-    console.log('click', e);
   };
 
   const handleModalOk = async (data: FormData) => {
-    await createModel({ data });
+    try {
-    setOpenAddModal(false);
+      if (action === PageAction.CREATE) {
-    message.success(intl.formatMessage({ id: 'common.message.success' }));
+        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>

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(
+              pattern: PasswordReg,
-                { id: 'common.form.rule.input' },
+              message: intl.formatMessage({ id: 'users.form.rule.password' })
-                {
-                  name: intl.formatMessage({ id: 'common.form.password' })
-                }
-              )
             }
           ]}
         >