chore: access form

config/routes.ts

@@ -119,9 +119,9 @@ export default [
         name: 'accesses',
         path: '/models/accesses',
         key: 'accesses',
-        icon: 'icon-extension-outline',
+        icon: 'icon-captive_portal',
-        selectedIcon: 'icon-extension-filled',
+        selectedIcon: 'icon-captive_portal',
-        defaultIcon: 'icon-extension-outline',
+        defaultIcon: 'icon-captive_portal',
         access: 'canSeeAdmin',
         component: './model-access/index'
       },

src/components/label-selector/autocomplete-item.tsx

@@ -38,7 +38,7 @@ const LabelItem: React.FC<LabelItemProps> = ({
 }) => {
   const intl = useIntl();
   const [open, setOpen] = useState(false);
-  const { options } = useLabelSelectorContext();
+  const { options, placeholder = [] } = useLabelSelectorContext();
 
   const keyOptions = useMemo(() => {
     return options?.filter(
@@ -98,7 +98,10 @@ const LabelItem: React.FC<LabelItemProps> = ({
               options={keyOptions}
               disabled={disabled}
               checkStatus="success"
-              label={intl.formatMessage({ id: 'common.input.key' })}
+              label={
+                placeholder?.[0] ||
+                intl.formatMessage({ id: 'common.input.key' })
+              }
               value={label.key}
               onChange={handleOnKeyChange}
               onBlur={(e: any) => handleKeyOnBlur(e, 'key')}
@@ -113,7 +116,10 @@ const LabelItem: React.FC<LabelItemProps> = ({
             options={valueOptions}
             disabled={disabled}
             checkStatus={label.value ? 'success' : ''}
-            label={intl.formatMessage({ id: 'common.input.value' })}
+            label={
+              placeholder?.[1] ||
+              intl.formatMessage({ id: 'common.input.value' })
+            }
             value={label.value}
             onChange={handleOnValueChange}
             onBlur={(e: any) => onBlur?.(e, 'value')}

src/components/label-selector/context.ts

@@ -6,6 +6,7 @@ interface LabelSelectorContextProps {
     value: string | number;
     children?: { label: string; value: string | number }[];
   }>;
+  placeholder?: string[];
   currentData?: Record<string, any>;
 }
 

src/components/label-selector/index.tsx

@@ -10,6 +10,7 @@ interface LabelSelectorProps {
   description?: React.ReactNode;
   disabled?: boolean;
   isAutoComplete?: boolean;
+  enablePaste?: boolean;
   onChange?: (labels: Record<string, any>) => void;
   onBlur?: (e: any, type: string, index: number) => void;
   onDelete?: (index: number) => void;
@@ -24,7 +25,8 @@ const LabelSelector: React.FC<LabelSelectorProps> = ({
   label,
   btnText,
   description,
-  isAutoComplete
+  isAutoComplete,
+  enablePaste = true
 }) => {
   const intl = useIntl();
   const [labelsData, setLabelsData] = useState({});
@@ -73,6 +75,7 @@ const LabelSelector: React.FC<LabelSelectorProps> = ({
     e: React.ClipboardEvent<HTMLTextAreaElement>,
     index: number
   ) => {
+    if (!enablePaste) return;
     const clipboardText = e.clipboardData.getData('text');
     if (!clipboardText || clipboardText.indexOf('=') === -1) return;
     e.preventDefault();

src/components/label-selector/inner.tsx

@@ -1,6 +1,5 @@
-import { useIntl } from '@umijs/max';
 import _ from 'lodash';
-import React, { useEffect } from 'react';
+import React from 'react';
 import AutoCompleteItem from './autocomplete-item';
 import LabelItem from './label-item';
 import Wrapper from './wrapper';
@@ -33,12 +32,6 @@ const Inner: React.FC<LabelSelectorProps> = ({
   description,
   isAutoComplete
 }) => {
-  const intl = useIntl();
-
-  useEffect(() => {
-    console.log('labels changed in Inner', labels);
-  }, [labels]);
-
   const updateLabels = (list: { key: string; value: string }[]) => {
     const newLabels = _.reduce(
       list,

src/components/label-selector/label-item.tsx

@@ -1,5 +1,4 @@
 import SealInput from '@/components/seal-form/seal-input';
-import { Global } from '@/config/global';
 import { MinusOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Tooltip } from 'antd';

src/pages/_components/transfer.tsx

@@ -6,10 +6,10 @@ import styled from 'styled-components';
 type TransferKey = string | number | bigint;
 
 const TransferWrap = styled.div`
-  .ant-transfer-list {
+  .ant-transfer-section {
     width: 100%;
     height: 300px;
-    .ant-transfer-list-header-dropdown {
+    .anticon-more {
       display: none;
     }
     .ant-input-outlined {
@@ -18,7 +18,7 @@ const TransferWrap = styled.div`
       border-radius: 4px;
     }
   }
-  .ant-transfer-operation {
+  .ant-transfer-actions {
     margin: 0 16px;
     gap: 12px;
     .ant-btn-icon-only {

src/pages/maas-provider/forms/advance-config.tsx

@@ -5,7 +5,7 @@ import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import React, { forwardRef, useImperativeHandle } from 'react';
 import { maasProviderType } from '../config';
-import ProxyConfig from './proxy_config';
+import ProxyConfig from './proxy-config';
 
 const AdvanceConfig: React.FC<{
   action: PageActionType;

src/pages/maas-provider/forms/index.tsx

@@ -15,7 +15,7 @@ import {
 } from 'react';
 import { maasProviderType } from '../config';
 import FormContext from '../config/form-context';
-import { MaasProviderItem as ListItem } from '../config/types';
+import { FormData, MaasProviderItem as ListItem } from '../config/types';
 import AccessToken from './access-token';
 import AdvanceConfig from './advance-config';
 import Basic from './basic';
@@ -26,7 +26,7 @@ interface ProviderFormProps {
   action: PageActionType;
   provider?: maasProviderType;
   currentData?: ListItem; // Used when action is EDIT
-  onFinish: (values: FormData) => void;
+  onFinish: (values: FormData) => Promise<void>;
 }
 
 const TABKeysMap = {

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
+          <AccessItem data={item} key={index} onSelect={onSelect}></AccessItem>
-            data={item}
-            key={index}
-            onSelect={(val, record) => {
-              console.log('Selected action:', val, 'on record:', record);
-            }}
-          ></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 ModelAccessForm from '../forms';
-import ProviderForm 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">
+      <LabelSelectorContext.Provider
-        <SealInput.Input
+        value={{
-          required
+          placeholder: ['Model', 'Weight'],
-          label={intl.formatMessage({
+          options: [
-            id: 'common.table.name'
+            {
-          })}
+              label: 'max_token_len',
-        />
+              value: 'max_token_len'
-      </Form.Item>
+            },
-      <Form.Item name="provider" hidden>
+            {
-        <SealInput.Input
+              label: 'max_context_len',
-          label={intl.formatMessage({
+              value: 'max_context_len'
-            id: 'providers.table.providerName'
+            }
-          })}
+          ]
-        />
+        }}
-      </Form.Item>
+      >
-      <Form.Item name="description">
+        <Form.Item
-        <SealInput.TextArea
+          name="endpoints"
-          scaleSize={true}
+          data-field="endpoints"
-          label={intl.formatMessage({
+          rules={[
-            id: 'common.table.description'
+            ({ getFieldValue }) => ({
-          })}
+              validator(rule, value) {
-        ></SealInput.TextArea>
+                if (_.keys(value).length > 0) {
-      </Form.Item>
+                  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 { FormData, AccessItem as ListItem } from '../config/types';
-import { 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 AccessForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
-  const { action, provider, currentData, onFinish } = props;
+  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: (
+              children: <Endpoints></Endpoints>
-                <Endpoints action={action} provider={provider}></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">
+      <LabelSelectorContext.Provider
-        <SealInput.Input
+        value={{
-          required
+          options: [
-          label={intl.formatMessage({
+            {
-            id: 'common.table.name'
+              label: 'max_token_len',
-          })}
+              value: 'max_token_len'
-        />
+            },
-      </Form.Item>
+            {
-      <Form.Item name="provider" hidden>
+              label: 'max_context_len',
-        <SealInput.Input
+              value: 'max_context_len'
-          label={intl.formatMessage({
+            }
-            id: 'providers.table.providerName'
+          ]
-          })}
+        }}
-        />
+      >
-      </Form.Item>
+        <Form.Item
-      <Form.Item name="description">
+          name="meta"
-        <SealInput.TextArea
+          data-field="metadata"
-          scaleSize={true}
+          rules={[
-          label={intl.formatMessage({
+            ({ getFieldValue }) => ({
-            id: 'common.table.description'
+              validator(rule, value) {
-          })}
+                if (_.keys(value).length > 0) {
-        ></SealInput.TextArea>
+                  if (_.some(_.keys(value), (k: string) => !value[k])) {
-      </Form.Item>
+                    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: '',
+    title: ''
-    provider: null
   });
 
-  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 });
+    setOpenModalStatus({
-    options.refresh();
+      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,
+    openFallbackSettingsModalStatus,
-    setOpenAccessModalStatus,
+    openFallbackSettingsModal,
-    openAccessModal,
+    closeFallbackSettingsModal
-    closeAccessModal
+  } = useFallbackSettings();
-  } = useCreateAccess({
-    refresh: handleSearch
-  });
 
   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({
+      closeAccessModal();
-        open: false,
-        action: PageAction.CREATE,
-        currentData: undefined,
-        title: '',
-        provider: null
-      });
       message.success(intl.formatMessage({ id: 'common.message.success' }));
     } catch (error) {}
   };
 
   const handleModalCancel = () => {
     console.log('handleModalCancel');
-    setOpenAccessModalStatus({
+    closeAccessModal();
-      open: false,
-      action: PageAction.CREATE,
-      currentData: undefined,
-      title: '',
-      provider: null
-    });
   };
 
   const handleEditProvider = (row: ListItem) => {
-    setOpenAccessModalStatus({
+    openAccessModal(
-      open: true,
+      PageAction.EDIT,
-      action: PageAction.EDIT,
+      intl.formatMessage(
-      currentData: row,
-      title: 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>
     </>
   );