chore: access form

src/pages/model-access/components/access-points.tsx

@@ -19,6 +19,7 @@ interface ProviderModelProps {
   dataList: any[];
   provider: string;
   providerId: number;
+  onSelect: (val: any, record: any) => void;
 }
 
 interface AccessItemProps {
@@ -32,6 +33,12 @@ export const childActionList = [
     label: 'common.button.viewlog',
     icon: <IconFont type="icon-logs" />
   },
+  {
+    key: 'fallback',
+    label: 'Fallback settings',
+    localel: false,
+    icon: <IconFont type="icon-captive_portal" />
+  },
   {
     key: 'delete',
     label: 'common.button.delete',
@@ -95,20 +102,14 @@ const AccessItem: React.FC<AccessItemProps> = ({ onSelect, data }) => {
   );
 };
 
-const AccessPoints: React.FC<ProviderModelProps> = ({ dataList }) => {
+const AccessPoints: React.FC<ProviderModelProps> = ({ dataList, onSelect }) => {
   console.log('AccessPoints dataList:', dataList);
   return (
     <div>
       {Array(2)
         .fill(1)
         .map((item, index) => (
-          <AccessItem
-            data={item}
-            key={index}
-            onSelect={(val, record) => {
-              console.log('Selected action:', val, 'on record:', record);
-            }}
-          ></AccessItem>
+          <AccessItem data={item} key={index} onSelect={onSelect}></AccessItem>
         ))}
     </div>
   );

src/pages/model-access/components/add-access-modal.tsx

@@ -3,15 +3,13 @@ import FormDrawer from '@/pages/_components/form-drawer';
 import React, { useRef } from 'react';
 import { FormData, AccessItem as ListItem } from '../config/types';
 
-import { maasProviderType } from '../config';
-import ProviderForm from '../forms';
+import ModelAccessForm from '../forms';
 
 type AddModalProps = {
   title: string;
   action: PageActionType;
   open: boolean;
   currentData?: ListItem; // Used when action is EDIT
-  provider: maasProviderType | null;
   onOk: (values: FormData) => void;
   onCancel: () => void;
 };
@@ -19,7 +17,6 @@ const AddProvider: React.FC<AddModalProps> = ({
   title,
   action,
   open,
-  provider,
   currentData,
   onOk,
   onCancel
@@ -30,7 +27,7 @@ const AddProvider: React.FC<AddModalProps> = ({
     form.current?.submit();
   };
 
-  const handleOk = async (data: FormData) => {
+  const onFinish = async (data: FormData) => {
     onOk({
       ...data
     });
@@ -49,11 +46,11 @@ const AddProvider: React.FC<AddModalProps> = ({
       onSubmit={handleSubmit}
       width={600}
     >
-      <ProviderForm
+      <ModelAccessForm
         ref={form}
         action={action}
         currentData={currentData}
-        onFinish={handleOk}
+        onFinish={onFinish}
       />
     </FormDrawer>
   );

src/pages/model-access/components/fallback-modal.tsx

@@ -0,0 +1,50 @@
+import FormDrawer from '@/pages/_components/form-drawer';
+import React, { useRef } from 'react';
+import { FormData, AccessItem as ListItem } from '../config/types';
+import FallbackSettings from '../forms/fallback-settings';
+
+type AddModalProps = {
+  title: string;
+  open: boolean;
+  currentData?: ListItem; // Used when action is EDIT
+  onOk: (values: FormData) => void;
+  onCancel: () => void;
+};
+const AddProvider: React.FC<AddModalProps> = ({
+  title,
+  open,
+  currentData,
+  onOk,
+  onCancel
+}) => {
+  const form = useRef<any>(null);
+
+  const handleSubmit = () => {
+    form.current?.submit();
+  };
+
+  const onFinish = async (data: FormData) => {
+    onOk({
+      ...data
+    });
+  };
+
+  const handleCancel = () => {
+    form.current?.resetFields();
+    onCancel();
+  };
+
+  return (
+    <FormDrawer
+      title={title}
+      open={open}
+      onCancel={handleCancel}
+      onSubmit={handleSubmit}
+      width={600}
+    >
+      <FallbackSettings currentData={currentData} onFinish={onFinish} />
+    </FormDrawer>
+  );
+};
+
+export default AddProvider;

src/pages/model-access/config/types.ts

@@ -7,6 +7,13 @@ export interface AccessItem {
 
 export interface FormData {
   name: string;
-  category: string;
   description: string;
+  categories: any[];
+  meta: Record<string, any>;
+  endpoints: {
+    provider_model_name: string;
+    weight: number;
+    model_id: number;
+    provider_id: number;
+  }[];
 }

src/pages/model-access/forms/basic.tsx

@@ -1,6 +1,6 @@
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
-import { categoryOptions } from '@/pages/llmodels/config';
+import { modelCategories } from '@/pages/llmodels/config';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import { FormData } from '../config/types';
@@ -14,7 +14,11 @@ const Basic = () => {
         <SealInput.Input required label={'Model Name'} />
       </Form.Item>
       <Form.Item name="category">
-        <SealSelect options={categoryOptions} label="Category"></SealSelect>
+        <SealSelect
+          options={modelCategories}
+          label="Category"
+          allowNull
+        ></SealSelect>
       </Form.Item>
       <Form.Item name="description">
         <SealInput.TextArea

src/pages/model-access/forms/endpoints.tsx

@@ -1,36 +1,72 @@
-import SealInput from '@/components/seal-form/seal-input';
+import LabelSelector from '@/components/label-selector';
+import { LabelSelectorContext } from '@/components/label-selector/context';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
+import _ from 'lodash';
 import { FormData } from '../config/types';
 
 const Endpoints = () => {
   const intl = useIntl();
   const form = Form.useFormInstance<FormData>();
+  const endpoints = Form.useWatch('endpoints', form);
+
+  const handleEndpointsChange = (labels: Record<string, any>) => {
+    form.setFieldValue('endpoints', labels);
+  };
+
   return (
     <>
-      <Form.Item name="name" data-field="endpoints">
-        <SealInput.Input
-          required
-          label={intl.formatMessage({
-            id: 'common.table.name'
-          })}
-        />
-      </Form.Item>
-      <Form.Item name="provider" hidden>
-        <SealInput.Input
-          label={intl.formatMessage({
-            id: 'providers.table.providerName'
-          })}
-        />
-      </Form.Item>
-      <Form.Item name="description">
-        <SealInput.TextArea
-          scaleSize={true}
-          label={intl.formatMessage({
-            id: 'common.table.description'
-          })}
-        ></SealInput.TextArea>
-      </Form.Item>
+      <LabelSelectorContext.Provider
+        value={{
+          placeholder: ['Model', 'Weight'],
+          options: [
+            {
+              label: 'max_token_len',
+              value: 'max_token_len'
+            },
+            {
+              label: 'max_context_len',
+              value: 'max_context_len'
+            }
+          ]
+        }}
+      >
+        <Form.Item
+          name="endpoints"
+          data-field="endpoints"
+          rules={[
+            ({ getFieldValue }) => ({
+              validator(rule, value) {
+                if (_.keys(value).length > 0) {
+                  if (_.some(_.keys(value), (k: string) => !value[k])) {
+                    return Promise.reject(
+                      intl.formatMessage(
+                        {
+                          id: 'common.validate.value'
+                        },
+                        {
+                          name: intl.formatMessage({
+                            id: 'models.form.selector'
+                          })
+                        }
+                      )
+                    );
+                  }
+                }
+                return Promise.resolve();
+              }
+            })
+          ]}
+        >
+          <LabelSelector
+            isAutoComplete
+            label={'Endpoints'}
+            labels={endpoints}
+            btnText="Add Endpoint"
+            onChange={handleEndpointsChange}
+          ></LabelSelector>
+        </Form.Item>
+      </LabelSelectorContext.Provider>
     </>
   );
 };

src/pages/model-access/forms/fallback-settings.tsx

@@ -0,0 +1,49 @@
+import SealInput from '@/components/seal-form/seal-input';
+import { Checkbox, Form, Typography } from 'antd';
+
+const FallbackSettings: React.FC<{
+  currentData?: any;
+  onFinish: (data: any) => void;
+}> = ({ currentData, onFinish }) => {
+  const [form] = Form.useForm();
+
+  return (
+    <Form
+      form={form}
+      onFinish={onFinish}
+      initialValues={currentData}
+      layout="vertical"
+    >
+      <Form.Item name="name">
+        <SealInput.Input disabled label="Model Name"></SealInput.Input>
+      </Form.Item>
+      <Form.Item name="endpoint">
+        <SealInput.Input disabled label="Endpoint"></SealInput.Input>
+      </Form.Item>
+      <Form.Item name="endpoint">
+        <SealInput.Input disabled label="Endpoint Target"></SealInput.Input>
+      </Form.Item>
+      <Form.Item name="fallback_endpoint">
+        <Typography.Title
+          level={5}
+          style={{ fontSize: 14, fontWeight: 500, marginBottom: 16 }}
+        >
+          Fallback Status
+        </Typography.Title>
+        <Checkbox.Group
+          options={[
+            {
+              label: '4xx',
+              value: '4xx'
+            },
+            {
+              label: '5xx',
+              value: '5xx'
+            }
+          ]}
+        />
+      </Form.Item>
+    </Form>
+  );
+};
+export default FallbackSettings;

src/pages/model-access/forms/index.tsx

@@ -6,8 +6,7 @@ import ScrollSpyTabs from '@/pages/_components/scroll-spy-tabs';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
-import { maasProviderType } from '../config';
-import { AccessItem as ListItem } from '../config/types';
+import { FormData, AccessItem as ListItem } from '../config/types';
 import Basic from './basic';
 import Endpoints from './endpoints';
 import MetaData from './meta-data';
@@ -15,9 +14,8 @@ import MetaData from './meta-data';
 interface ProviderFormProps {
   ref?: any;
   action: PageActionType;
-  provider?: maasProviderType;
   currentData?: ListItem; // Used when action is EDIT
-  onFinish: (values: FormData) => void;
+  onFinish: (values: FormData) => Promise<void>;
 }
 
 const TABKeysMap = {
@@ -27,8 +25,8 @@ const TABKeysMap = {
   ADVANCED: 'advanced'
 };
 
-const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
-  const { action, provider, currentData, onFinish } = props;
+const AccessForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
+  const { action, currentData, onFinish } = props;
   const intl = useIntl();
   const { getScrollElementScrollableHeight } = useWrapperContext();
   const [activeKey, setActiveKey] = useState<string[]>([TABKeysMap.BASIC]);
@@ -86,7 +84,7 @@ const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
       }}
       getScrollElementScrollableHeight={getScrollElementScrollableHeight}
     >
-      <Form form={form}>
+      <Form form={form} onFinish={onFinish}>
         <Basic />
         <CollapsePanel
           activeKey={activeKey}
@@ -103,9 +101,7 @@ const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
               key: TABKeysMap.ENDPOINTS,
               label: 'Endpoints',
               forceRender: true,
-              children: (
-                <Endpoints action={action} provider={provider}></Endpoints>
-              )
+              children: <Endpoints></Endpoints>
             }
           ]}
         ></CollapsePanel>
@@ -114,4 +110,4 @@ const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
   );
 });
 
-export default ProviderForm;
+export default AccessForm;

src/pages/model-access/forms/meta-data.tsx

@@ -1,36 +1,71 @@
-import SealInput from '@/components/seal-form/seal-input';
+import LabelSelector from '@/components/label-selector';
+import { LabelSelectorContext } from '@/components/label-selector/context';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
+import _ from 'lodash';
 import { FormData } from '../config/types';
 
 const MetaData = () => {
   const intl = useIntl();
   const form = Form.useFormInstance<FormData>();
+  const metadata = Form.useWatch('meta', form);
+
+  const handleMetadataChange = (labels: Record<string, any>) => {
+    form.setFieldValue('meta', labels);
+  };
+
   return (
     <>
-      <Form.Item name="name" data-field="metadata">
-        <SealInput.Input
-          required
-          label={intl.formatMessage({
-            id: 'common.table.name'
-          })}
-        />
-      </Form.Item>
-      <Form.Item name="provider" hidden>
-        <SealInput.Input
-          label={intl.formatMessage({
-            id: 'providers.table.providerName'
-          })}
-        />
-      </Form.Item>
-      <Form.Item name="description">
-        <SealInput.TextArea
-          scaleSize={true}
-          label={intl.formatMessage({
-            id: 'common.table.description'
-          })}
-        ></SealInput.TextArea>
-      </Form.Item>
+      <LabelSelectorContext.Provider
+        value={{
+          options: [
+            {
+              label: 'max_token_len',
+              value: 'max_token_len'
+            },
+            {
+              label: 'max_context_len',
+              value: 'max_context_len'
+            }
+          ]
+        }}
+      >
+        <Form.Item
+          name="meta"
+          data-field="metadata"
+          rules={[
+            ({ getFieldValue }) => ({
+              validator(rule, value) {
+                if (_.keys(value).length > 0) {
+                  if (_.some(_.keys(value), (k: string) => !value[k])) {
+                    return Promise.reject(
+                      intl.formatMessage(
+                        {
+                          id: 'common.validate.value'
+                        },
+                        {
+                          name: intl.formatMessage({
+                            id: 'models.form.selector'
+                          })
+                        }
+                      )
+                    );
+                  }
+                }
+                return Promise.resolve();
+              }
+            })
+          ]}
+        >
+          <LabelSelector
+            isAutoComplete
+            label={'Metadatas'}
+            labels={metadata}
+            btnText="Add Metadata"
+            onChange={handleMetadataChange}
+          ></LabelSelector>
+        </Form.Item>
+      </LabelSelectorContext.Provider>
     </>
   );
 };

src/pages/model-access/hooks/use-create-access.ts

@@ -1,37 +1,41 @@
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import { useState } from 'react';
-import { maasProviderType } from '../config';
 import { AccessItem as ListItem } from '../config/types';
 
-const useCreateAccess = (options: { refresh: () => void }) => {
+const useCreateAccess = (options?: { refresh: () => void }) => {
   const [openModalStatus, setOpenModalStatus] = useState<{
     open: boolean;
     action: PageActionType;
     currentData?: ListItem;
     title: string;
-    provider: maasProviderType | null;
   }>({
     open: false,
     action: PageAction.CREATE,
     currentData: undefined,
-    title: '',
-    provider: null
+    title: ''
   });
 
-  const openModal = (action: PageActionType, currentData?: ListItem) => {
+  const openModal = (
+    action: PageActionType,
+    title: string,
+    currentData?: ListItem
+  ) => {
     setOpenModalStatus({
-      ...openModalStatus,
       open: true,
       action,
       currentData,
-      title: action === PageAction.CREATE ? 'Create Access' : 'Edit Access'
+      title: title
     });
   };
 
   const closeModal = () => {
-    setOpenModalStatus({ ...openModalStatus, open: false });
-    options.refresh();
+    setOpenModalStatus({
+      open: false,
+      action: PageAction.CREATE,
+      currentData: undefined,
+      title: ''
+    });
   };
 
   return {

src/pages/model-access/hooks/use-fallback-settings.ts

@@ -0,0 +1,49 @@
+import { PageAction } from '@/config';
+import { PageActionType } from '@/config/types';
+import { useState } from 'react';
+import { AccessItem as ListItem } from '../config/types';
+
+const useFallbackSettings = (options?: { refresh: () => void }) => {
+  const [openModalStatus, setOpenModalStatus] = useState<{
+    open: boolean;
+    action: PageActionType;
+    currentData?: ListItem;
+    title: string;
+  }>({
+    open: false,
+    action: PageAction.CREATE,
+    currentData: undefined,
+    title: ''
+  });
+
+  const openModal = (
+    action: PageActionType,
+    title: string,
+    currentData?: ListItem
+  ) => {
+    setOpenModalStatus({
+      open: true,
+      action,
+      currentData,
+      title: title
+    });
+  };
+
+  const closeModal = () => {
+    setOpenModalStatus({
+      open: false,
+      action: PageAction.CREATE,
+      currentData: undefined,
+      title: ''
+    });
+  };
+
+  return {
+    openFallbackSettingsModalStatus: openModalStatus,
+    setOpenFallbackSettingsModalStatus: setOpenModalStatus,
+    openFallbackSettingsModal: openModal,
+    closeFallbackSettingsModal: closeModal
+  };
+};
+
+export default useFallbackSettings;

src/pages/model-access/index.tsx

@@ -26,11 +26,13 @@ import {
 } from './apis';
 import AccessPoints from './components/access-points';
 import AddAccessModal from './components/add-access-modal';
+import FallbackModal from './components/fallback-modal';
 import { maasProviderOptions } from './config';
 import { mockDataList } from './config/mock';
 import { FormData, AccessItem as ListItem } from './config/types';
 import useAccessColumns from './hooks/use-access-columns';
 import useCreateAccess from './hooks/use-create-access';
+import useFallbackSettings from './hooks/use-fallback-settings';
 
 const Accesses: React.FC = () => {
   const {
@@ -57,17 +59,20 @@ const Accesses: React.FC = () => {
   const { handleExpandChange, handleExpandAll, expandedRowKeys } =
     useExpandedRowKeys(expandAtom);
   const intl = useIntl();
+  const { openAccessModalStatus, openAccessModal, closeAccessModal } =
+    useCreateAccess();
+
   const {
-    openAccessModalStatus,
-    setOpenAccessModalStatus,
-    openAccessModal,
-    closeAccessModal
-  } = useCreateAccess({
-    refresh: handleSearch
-  });
+    openFallbackSettingsModalStatus,
+    openFallbackSettingsModal,
+    closeFallbackSettingsModal
+  } = useFallbackSettings();
 
   const handleClickDropdown = () => {
-    openAccessModal('create');
+    openAccessModal(
+      PageAction.CREATE,
+      intl.formatMessage({ id: 'accesses.button.add' })
+    );
   };
 
   const handleModalOk = async (data: FormData) => {
@@ -82,39 +87,25 @@ const Accesses: React.FC = () => {
         });
       }
       fetchData();
-      setOpenAccessModalStatus({
-        open: false,
-        action: PageAction.CREATE,
-        currentData: undefined,
-        title: '',
-        provider: null
-      });
+      closeAccessModal();
       message.success(intl.formatMessage({ id: 'common.message.success' }));
     } catch (error) {}
   };
 
   const handleModalCancel = () => {
     console.log('handleModalCancel');
-    setOpenAccessModalStatus({
-      open: false,
-      action: PageAction.CREATE,
-      currentData: undefined,
-      title: '',
-      provider: null
-    });
+    closeAccessModal();
   };
 
   const handleEditProvider = (row: ListItem) => {
-    setOpenAccessModalStatus({
-      open: true,
-      action: PageAction.EDIT,
-      currentData: row,
-      title: intl.formatMessage(
+    openAccessModal(
+      PageAction.EDIT,
+      intl.formatMessage(
         { id: 'clusters.edit.cluster' },
         { cluster: row.name }
       ),
-      provider: row.provider
-    });
+      row
+    );
   };
 
   const handleSelect = useMemoizedFn((val: any, row: ListItem) => {
@@ -154,6 +145,12 @@ const Accesses: React.FC = () => {
     handleTableChange({}, {}, order, { action: 'sort' });
   };
 
+  const onChildSelect = useMemoizedFn((val: any, record: any) => {
+    if (val === 'fallback') {
+      openFallbackSettingsModal(PageAction.EDIT, 'Fallback Settings', record);
+    }
+  });
+
   const renderChildren = (
     list: any,
     options: { parent?: any; [key: string]: any }
@@ -163,6 +160,7 @@ const Accesses: React.FC = () => {
         dataList={list}
         provider={options.parent?.provider}
         providerId={options.parent?.id}
+        onSelect={onChildSelect}
       />
     );
   };
@@ -173,7 +171,6 @@ const Accesses: React.FC = () => {
     <>
       <PageBox>
         <FilterBar
-          actionType="dropdown"
           showSelect={false}
           marginBottom={22}
           marginTop={30}
@@ -243,7 +240,6 @@ const Accesses: React.FC = () => {
         </TableContext.Provider>
       </PageBox>
       <AddAccessModal
-        provider={openAccessModalStatus.provider}
         open={openAccessModalStatus.open}
         action={openAccessModalStatus.action}
         title={openAccessModalStatus.title}
@@ -251,6 +247,12 @@ const Accesses: React.FC = () => {
         onCancel={handleModalCancel}
         onOk={handleModalOk}
       ></AddAccessModal>
+      <FallbackModal
+        title={openFallbackSettingsModalStatus.title}
+        open={openFallbackSettingsModalStatus.open}
+        onCancel={closeFallbackSettingsModal}
+        onOk={closeFallbackSettingsModal}
+      ></FallbackModal>
       <DeleteModal ref={modalRef}></DeleteModal>
     </>
   );