fix: ui issues

src/components/seal-form/auto-complete.tsx

@@ -29,6 +29,7 @@ const SealAutoComplete: React.FC<
     extra,
     style,
     addAfter,
+    suffixIcon,
     loading,
     allowClear,
     clearSpaceOnBlur,
@@ -103,7 +104,7 @@ const SealAutoComplete: React.FC<
         </Link>
       );
     }
-    return null;
+    return suffixIcon || null;
   };
 
   const popupRender = (originNode: React.ReactElement): React.ReactElement => {

src/components/seal-form/input-number.tsx

@@ -22,7 +22,7 @@ const SealInputNumber: React.FC<InputNumberProps & SealFormItemProps> = (
   let status = '';
   if (isInFormItems) {
     const statusData = Form?.Item?.useStatus?.();
-    status = statusData?.status || '';
+    status = props.status || statusData?.status || '';
   } else {
     status = props.status || '';
   }

src/components/seal-form/password.tsx

@@ -51,8 +51,8 @@ const SealPassword: React.FC<InputProps & SealFormItemProps> = (props) => {
     e.target.value = e.target.value?.trim?.();
     if (!inputRef.current?.input?.value) {
       setIsFocus(false);
-      props.onBlur?.(e);
     }
+    props.onBlur?.(e);
   };
 
   return (

src/components/seal-form/seal-cascader.tsx

@@ -106,7 +106,9 @@ const SealCascader: React.FC<
   // the status can be controlled by Form.Item
   if (isInFormItems) {
     const statusData = Form?.Item?.useStatus?.();
-    status = statusData?.status || '';
+    status = props.status || statusData?.status || '';
+  } else {
+    status = props.status || '';
   }
 
   const _options = useMemo(() => {

src/components/seal-form/seal-input.tsx

@@ -30,7 +30,7 @@ const SealInput: React.FC<InputProps & SealFormItemProps> = (props) => {
   let status = '';
   if (isInFormItems) {
     const statusData = Form?.Item?.useStatus?.();
-    status = statusData?.status || '';
+    status = props.status || statusData?.status || '';
   } else {
     status = props.status || '';
   }

src/components/seal-form/wrapper/select.ts

@@ -181,8 +181,11 @@ const SelectWrapper = styled.div`
     }
 
     &.validate-status-error {
-      &.dropdown-visible {
+      .ant-select-dropdown {
-        .ant-select-dropdown {
+        border-color: var(--ant-color-error) !important;
+      }
+      .__wrapper__ {
+        .ant-cascader.ant-select.ant-select-outlined {
           border-color: var(--ant-color-error) !important;
         }
       }

src/hooks/use-table-fetch.ts

@@ -283,7 +283,7 @@ export default function useTableFetch<T>(
     }
   ) => {
     loadendRef.current = false;
-    const newQueryParams = { ...queryParams, ...params };
+    const newQueryParams = { ...queryParams, ...params, page: 1 };
     setQueryParams(newQueryParams);
     await fetchData({ query: newQueryParams });
     if (watch && !options?.paginate) {

src/locales/en-US/benchmark.ts

@@ -80,5 +80,8 @@ export default {
   'benchmark.env.system': 'System',
   'benchmark.env.runtimeVersion': 'Runtime Version',
   'benchmark.env.driverVersion': 'Driver Version',
-  'benchmark.env.cpuCounts': 'CPU Counts'
+  'benchmark.env.cpuCounts': 'CPU Cores',
+  'benchmark.table.export.results': 'Export Results',
+  'benchmark.form.nonLlmModel.tips':
+    'Benchmarking currently only supports LLM models'
 };

src/locales/en-US/provider.ts

@@ -15,5 +15,11 @@ export default {
   'providers.form.model.test': 'Test',
   'providers.form.model.test.tips': 'Test Connection',
   'providers.form.target.placeholder': 'provider/models',
-  'providers.form.fallback.token': 'Fallback API Keys'
+  'providers.form.fallback.token': 'Fallback API Keys',
+  'providers.form.custombeckendUrl': 'Custom Base URL',
+  'providers.form.more': '+{count} more',
+  'providers.form.addAll': 'Add All',
+  'providers.form.rules.models': 'Please select at least one model',
+  'providers.form.rules.tokens': 'Please enter a valid API Key',
+  'providers.form.rules.model': 'Please select a model'
 };

src/locales/ja-JP/benchmark.ts

@@ -80,5 +80,8 @@ export default {
   'benchmark.env.system': 'System',
   'benchmark.env.runtimeVersion': 'Runtime Version',
   'benchmark.env.driverVersion': 'Driver Version',
-  'benchmark.env.cpuCounts': 'CPU Counts'
+  'benchmark.env.cpuCounts': 'CPU Cores',
+  'benchmark.table.export.results': 'Export Results',
+  'benchmark.form.nonLlmModel.tips':
+    'Benchmarking currently only supports LLM models'
 };

src/locales/ja-JP/provider.ts

@@ -15,5 +15,11 @@ export default {
   'providers.form.model.test': 'Test',
   'providers.form.model.test.tips': 'Test Connection',
   'providers.form.target.placeholder': 'provider/models',
-  'providers.form.fallback.token': 'Fallback API Keys'
+  'providers.form.fallback.token': 'Fallback API Keys',
+  'providers.form.custombeckendUrl': 'Custom Base URL',
+  'providers.form.more': '+{count} more',
+  'providers.form.addAll': 'Add All',
+  'providers.form.rules.models': 'Please select at least one model',
+  'providers.form.rules.tokens': 'Please enter a valid API Key',
+  'providers.form.rules.model': 'Please select a model'
 };

src/locales/ru-RU/benchmark.ts

@@ -80,5 +80,8 @@ export default {
   'benchmark.env.system': 'System',
   'benchmark.env.runtimeVersion': 'Runtime Version',
   'benchmark.env.driverVersion': 'Driver Version',
-  'benchmark.env.cpuCounts': 'CPU Counts'
+  'benchmark.env.cpuCounts': 'CPU Cores',
+  'benchmark.table.export.results': 'Export Results',
+  'benchmark.form.nonLlmModel.tips':
+    'Benchmarking currently only supports LLM models'
 };

src/locales/ru-RU/provider.ts

@@ -15,5 +15,11 @@ export default {
   'providers.form.model.test': 'Test',
   'providers.form.model.test.tips': 'Test Connection',
   'providers.form.target.placeholder': 'provider/models',
-  'providers.form.fallback.token': 'Fallback API Keys'
+  'providers.form.fallback.token': 'Fallback API Keys',
+  'providers.form.custombeckendUrl': 'Custom Base URL',
+  'providers.form.more': '+{count} more',
+  'providers.form.addAll': 'Add All',
+  'providers.form.rules.models': 'Please select at least one model',
+  'providers.form.rules.tokens': 'Please enter a valid API Key',
+  'providers.form.rules.model': 'Please select a model'
 };

src/locales/zh-CN/benchmark.ts

@@ -80,5 +80,7 @@ export default {
   'benchmark.env.system': '系统',
   'benchmark.env.runtimeVersion': '运行时版本',
   'benchmark.env.driverVersion': '驱动版本',
-  'benchmark.env.cpuCounts': 'CPU 核心数'
+  'benchmark.env.cpuCounts': 'CPU 核心数',
+  'benchmark.table.export.results': '导出结果',
+  'benchmark.form.nonLlmModel.tips': '基准测试目前仅支持 LLM 模型'
 };

src/locales/zh-CN/provider.ts

@@ -15,5 +15,11 @@ export default {
   'providers.form.model.test': '测试',
   'providers.form.model.test.tips': '测试连接',
   'providers.form.target.placeholder': '提供商/模型',
-  'providers.form.fallback.token': '备用 API Key'
+  'providers.form.fallback.token': '备用 API Key',
+  'providers.form.custombeckendUrl': '自定义 Base URL',
+  'providers.form.more': '+{count} 更多',
+  'providers.form.addAll': '添加全部',
+  'providers.form.rules.models': '请选择至少一个模型',
+  'providers.form.rules.tokens': '请输入有效的 API Key',
+  'providers.form.rules.model': '请选择模型'
 };

src/pages/benchmark/components/right-actions.tsx

@@ -25,7 +25,7 @@ const RightActions: React.FC<RightActionsProps> = ({
 }) => {
   const ButtonList = [
     {
-      label: 'common.button.export',
+      label: 'benchmark.table.export.results',
       key: 'export',
       icon: (
         <IconFont type="icon-export" style={{ lineHeight: 1, fontSize: 16 }} />

src/pages/benchmark/components/row-actions.tsx

@@ -8,17 +8,6 @@ import { BenchmarkStatusValueMap } from '../config';
 import { BenchmarkListItem as ListItem } from '../config/types';
 
 const actionList = [
-  {
-    key: 'edit',
-    label: 'common.button.edit',
-    icon: icons.EditOutlined
-  },
-  {
-    label: 'common.button.stop',
-    key: 'stop',
-    icon: icons.Stop,
-    status: [BenchmarkStatusValueMap.QUEUED, BenchmarkStatusValueMap.Running]
-  },
   {
     label: 'common.button.viewlog',
     key: 'viewlog',
@@ -30,9 +19,20 @@ const actionList = [
     ],
     icon: <IconFont type="icon-logs" />
   },
+  {
+    key: 'edit',
+    label: 'common.button.edit',
+    icon: icons.EditOutlined
+  },
+  {
+    label: 'common.button.stop',
+    key: 'stop',
+    icon: icons.Stop,
+    status: [BenchmarkStatusValueMap.QUEUED, BenchmarkStatusValueMap.Running]
+  },
   {
     key: 'export',
-    label: 'common.button.export',
+    label: 'benchmark.table.export.results',
     icon: (
       <IconFont type="icon-export" style={{ lineHeight: 1, fontSize: 16 }} />
     )

src/pages/benchmark/forms/model-instance.tsx

@@ -3,19 +3,22 @@ import { PageAction } from '@/config';
 import useAppUtils from '@/hooks/use-app-utils';
 import {
   InstanceStatusMap,
-  InstanceStatusMapValue
+  InstanceStatusMapValue,
+  modelCategoriesMap
 } from '@/pages/llmodels/config';
 import { useBenchmarkTargetInstance } from '@/pages/llmodels/hooks/use-run-benchmark';
 import { useQueryModelInstancesList } from '@/pages/llmodels/services/use-query-model-instances';
 import { useQueryModelList } from '@/pages/llmodels/services/use-query-model-list';
 import { useIntl } from '@umijs/max';
-import { Form } from 'antd';
+import { Form, Tooltip } from 'antd';
 import React, { useEffect } from 'react';
 import { useFormContext } from '../config/form-context';
 import { FormData } from '../config/types';
 
+// benchmark.form.nonLlmModel.tips
 const InstanceNode = (props: any) => {
   const { data: instance } = props;
+  const intl = useIntl();
   return instance.isLeaf ? (
     <span className="flex-center">
       {instance.label}
@@ -24,7 +27,17 @@ const InstanceNode = (props: any) => {
       )}
     </span>
   ) : (
-    <span>{instance.label}</span>
+    <>
+      {instance.disabled ? (
+        <Tooltip
+          title={intl.formatMessage({ id: 'benchmark.form.nonLlmModel.tips' })}
+        >
+          <span>{instance.label}</span>
+        </Tooltip>
+      ) : (
+        <span>{instance.label}</span>
+      )}
+    </>
   );
 };
 
@@ -99,6 +112,7 @@ const ModelInstanceForm: React.FC = () => {
       .map((model: any) => ({
         label: model.name,
         value: model.name,
+        disabled: modelCategoriesMap.llm !== model.categories?.[0],
         id: model.id,
         isLeaf: false,
         children: []
@@ -109,12 +123,17 @@ const ModelInstanceForm: React.FC = () => {
     }
 
     // preload instances for the first model
-    const instanceList = await fetchInstanceList({ id: modelOptions[0]?.id });
+    const selectedllmModel = modelOptions.find((model) => !model.disabled);
+    if (!selectedllmModel) {
+      setModelList(modelOptions);
+      return;
+    }
+    const instanceList = await fetchInstanceList({ id: selectedllmModel.id });
     const instanceOptions = instanceList.map((instance: any) =>
       renderInstance(instance)
     );
-    if (modelOptions[0]) {
+    if (selectedllmModel) {
-      modelOptions[0].children = [...instanceOptions] as never[];
+      selectedllmModel.children = [...instanceOptions] as never[];
     }
 
     // init form value for model instance
@@ -127,8 +146,8 @@ const ModelInstanceForm: React.FC = () => {
       });
     } else {
       handleOnChange(
-        [modelOptions[0].value, instanceOptions[0]?.value],
+        [selectedllmModel.value, instanceOptions[0]?.value],
-        [modelOptions[0], instanceOptions[0]]
+        [selectedllmModel, instanceOptions[0]]
       );
     }
 

src/pages/benchmark/index.tsx

@@ -147,7 +147,7 @@ const Benchmark: React.FC = () => {
     } else if (val === 'stop') {
       handleStopBenchmark(row.id);
     } else if (val === 'export') {
-      exportData([row.id]);
+      exportData([row.id], row.name);
     }
   });
 
@@ -192,7 +192,11 @@ const Benchmark: React.FC = () => {
   });
 
   const handleExportData = () => {
-    exportData(rowSelection.selectedRowKeys);
+    const firstSelectedRow = dataSource.dataList.find(
+      (item) => item.id === rowSelection.selectedRowKeys[0]
+    );
+    const name = firstSelectedRow ? firstSelectedRow.name : 'benchmark';
+    exportData(rowSelection.selectedRowKeys, name);
   };
 
   return (

src/pages/benchmark/services/use-export-benchmark.ts

@@ -1,6 +1,7 @@
 import { GPUSTACK_API_BASE_URL } from '@/config/settings';
 import { downloadFile } from '@/utils/download-stream';
 import { message } from 'antd';
+import dayjs from 'dayjs';
 import { EXPORT_BENCHMARK_LIST } from '../apis';
 
 const matchFilename = (disposition: string | null): string | undefined => {
@@ -12,7 +13,9 @@ const matchFilename = (disposition: string | null): string | undefined => {
 };
 
 export function useExportBenchmark() {
-  const exportData = async (data: any[]) => {
+  const exportData = async (data: any[], name: string) => {
+    const date = dayjs().format('YYYYMMDD_HHmmss');
+    const fileName = `${name || 'benchmark'}_${date}`;
     try {
       const res = await fetch(
         `${GPUSTACK_API_BASE_URL}${EXPORT_BENCHMARK_LIST}`,
@@ -26,8 +29,7 @@ export function useExportBenchmark() {
       );
       // header
       const contentDispostion = res.headers.get('content-Disposition');
-      const filename =
+      const filename = matchFilename(contentDispostion) || `${fileName}.yml`;
-        matchFilename(contentDispostion) || `benchmark-export.yml`;
       if (res.ok) {
         const blob = await res.blob();
         downloadFile(blob, filename);

src/pages/cluster-management/components/volumes-config.tsx

@@ -15,7 +15,8 @@ const CloudOptions: React.FC<{
   const { disabled } = props;
   const intl = useIntl();
   const form = Form.useFormInstance();
-  const volumes = Form.useWatch(['cloud_options', volumeOptions.name], form);
+  const volumes =
+    Form.useWatch(['cloud_options', volumeOptions.name], form) || [];
   const [validateStatusList, setValidateStatusList] = useState<
     { [key: string]: statusType }[]
   >([]);
@@ -45,10 +46,15 @@ const CloudOptions: React.FC<{
     form.setFieldValue(['cloud_options', volumeOptions.name], data);
     toggleValidation(true);
   };
-  console.log('disabled=====', disabled);
   return (
     <Form.Item
       name={['cloud_options', volumeOptions.name as string]}
+      style={{
+        backgroundColor:
+          disabled && volumes?.length === 0
+            ? 'var(--ant-color-bg-container-disabled)'
+            : ''
+      }}
       rules={[
         {
           validator: listMapValidator

src/pages/maas-provider/components/provider-models.tsx

@@ -1,10 +1,8 @@
 import AutoTooltip from '@/components/auto-tooltip';
-import {
+import OverlayScroller from '@/components/overlay-scroller';
-  CheckCircleOutlined,
+import { CheckCircleOutlined } from '@ant-design/icons';
-  CloseCircleOutlined,
+import { useIntl } from '@umijs/max';
-  WarningOutlined
+import { Flex, Popover, Tag } from 'antd';
-} from '@ant-design/icons';
-import { Flex, Tag } from 'antd';
 import _ from 'lodash';
 import React from 'react';
 import { categoryConfig } from '../../_components/model-tag';
@@ -17,47 +15,101 @@ interface ProviderModelProps {
 const ProviderModels: React.FC<ProviderModelProps> = ({ dataList }) => {
   const iconsMap = {
     accessible: <CheckCircleOutlined />,
-    inaccessible: <CloseCircleOutlined />,
+    inaccessible: null,
-    none: <WarningOutlined />
+    none: null
+  };
+
+  const intl = useIntl();
+
+  const head12Items = dataList.slice(0, 8);
+  const restItems = dataList.slice(8);
+
+  const renderModels = (dataList: ProviderModel[]) => {
+    return (
+      <>
+        {dataList.map((model, index) => (
+          <Tag
+            key={index}
+            icon={
+              _.isBoolean(model.accessible)
+                ? iconsMap[model.accessible ? 'accessible' : 'inaccessible']
+                : iconsMap['none']
+            }
+            variant="outlined"
+            styles={{
+              root: {
+                backgroundColor: 'transparent',
+                display: 'flex',
+                alignItems: 'center',
+                borderRadius: 4
+              }
+            }}
+            color={
+              model.accessible === true ? 'var(--ant-color-success)' : 'default'
+            }
+          >
+            <span className="flex-center">
+              <AutoTooltip ghost maxWidth={'120px'}>
+                {model.name}
+              </AutoTooltip>
+              <span style={{ marginLeft: 8 }}>
+                {categoryConfig[model.category]?.icon}
+              </span>
+            </span>
+          </Tag>
+        ))}
+      </>
+    );
   };
   return (
-    <Flex gap="8px" wrap="wrap">
+    <div>
-      {dataList.map((model) => (
+      <Flex gap="8px" wrap="wrap">
-        <Tag
+        {renderModels(head12Items)}
-          key={model.name}
+        {restItems.length > 0 && (
-          icon={
+          <Popover
-            _.isBoolean(model.accessible)
+            placement="right"
-              ? iconsMap[model.accessible ? 'accessible' : 'inaccessible']
+            content={
-              : iconsMap['none']
+              <OverlayScroller
-          }
+                maxHeight={420}
-          variant="outlined"
+                styles={{
-          styles={{
+                  wrapper: {
-            root: {
+                    paddingInlineStart: 0
-              backgroundColor: 'transparent',
+                  }
-              display: 'flex',
+                }}
-              alignItems: 'center',
+              >
-              borderRadius: 4
+                <Flex gap="8px" wrap="wrap">
+                  {renderModels(restItems)}
+                </Flex>
+              </OverlayScroller>
             }
-          }}
+            styles={{
-          color={
+              root: { maxWidth: '400px' },
-            model.accessible === true
+              container: {
-              ? 'success'
+                paddingInlineEnd: 4
-              : model.accessible === false
+              }
-                ? 'error'
+            }}
-                : 'warning'
+          >
-          }
+            <Tag
-        >
+              variant="outlined"
-          <span className="flex-center">
+              styles={{
-            <AutoTooltip ghost maxWidth={'120px'}>
+                root: {
-              {model.name}
+                  width: 'fit-content',
-            </AutoTooltip>
+                  backgroundColor: 'transparent',
-            <span style={{ marginLeft: 8 }}>
+                  display: 'flex',
-              {categoryConfig[model.category]?.icon}
+                  alignItems: 'center',
-            </span>
+                  borderRadius: 4
-          </span>
+                }
-        </Tag>
+              }}
-      ))}
+            >
-    </Flex>
+              {intl.formatMessage(
+                { id: 'providers.form.more' },
+                { count: restItems.length }
+              )}
+            </Tag>
+          </Popover>
+        )}
+      </Flex>
+    </div>
   );
 };
 

src/pages/maas-provider/config/types.ts

@@ -12,6 +12,7 @@ export interface FormData {
   api_key: string;
   config: {
     type: maasProviderType;
+    openaiCustomUrl?: string;
     [key: string]: any;
   };
 }

src/pages/maas-provider/forms/api-keys.tsx

@@ -42,10 +42,7 @@ const AccessToken = () => {
         rules={[
           {
             required: false,
-            message: getRuleMessage(
+            message: getRuleMessage('input', 'providers.form.tokens.title')
-              'input',
-              intl.formatMessage({ id: 'providers.form.tokens.title' })
-            )
           }
         ]}
       >

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

@@ -4,12 +4,15 @@ import useAppUtils from '@/hooks/use-app-utils';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import ProviderLogo from '../components/provider-logo';
-import { maasProviderOptions } from '../config/providers';
+import { maasProviderOptions, ProviderEnum } from '../config/providers';
 import { FormData } from '../config/types';
 
-const Basic = () => {
+const Basic: React.FC<{
+  onAPIKeyBlur?: (e: any) => void;
+}> = ({ onAPIKeyBlur }) => {
   const intl = useIntl();
   const form = Form.useFormInstance<FormData>();
+  const providerType = Form.useWatch(['config', 'type'], form);
   const { getRuleMessage } = useAppUtils();
 
   const optionRender = (option: any) => {
@@ -30,7 +33,17 @@ const Basic = () => {
 
   return (
     <>
-      <Form.Item<FormData> name="name" data-field="name">
+      <Form.Item<FormData>
+        name="name"
+        data-field="name"
+        required
+        rules={[
+          {
+            required: true,
+            message: getRuleMessage('input', 'common.table.name')
+          }
+        ]}
+      >
         <SealInput.Input
           required
           label={intl.formatMessage({
@@ -43,10 +56,7 @@ const Basic = () => {
         rules={[
           {
             required: true,
-            message: getRuleMessage(
+            message: getRuleMessage('select', 'common.table.type')
-              'select',
-              intl.formatMessage({ id: 'common.table.type' })
-            )
           }
         ]}
       >
@@ -63,6 +73,16 @@ const Basic = () => {
           })}
         />
       </Form.Item>
+      {providerType === ProviderEnum.OPENAI && (
+        <Form.Item<FormData> name={['config', 'openaiCustomUrl']}>
+          <SealInput.Input
+            placeholder="http://<your-inference-server>/v1"
+            label={intl.formatMessage({
+              id: 'providers.form.custombeckendUrl'
+            })}
+          />
+        </Form.Item>
+      )}
       <Form.Item<FormData>
         name="api_key"
         rules={[
@@ -74,6 +94,7 @@ const Basic = () => {
       >
         <SealInput.Password
           required
+          onBlur={onAPIKeyBlur}
           label={intl.formatMessage({
             id: 'providers.form.tokens.title'
           })}

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

@@ -107,7 +107,9 @@ const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
         api_key: currentData.api_tokens?.[0] || '',
         api_tokens: currentData.api_tokens?.slice(1) || [],
         proxy_enabled: !!currentData.proxy_url,
-        custom_config: json2Yaml(_.omit(currentData.config, ['type']) || {})
+        custom_config: json2Yaml(
+          _.omit(currentData.config, ['type', 'openaiCustomUrl']) || {}
+        )
       });
     }
   }, [form, currentData, action]);

src/pages/maas-provider/forms/model-item.tsx

@@ -3,8 +3,8 @@ import SealSelect from '@/components/seal-form/seal-select';
 import { categoryOptions } from '@/pages/llmodels/config';
 import {
   CheckCircleFilled,
-  CloseCircleFilled,
+  LoadingOutlined,
-  LoadingOutlined
+  WarningFilled
 } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Form, Tooltip } from 'antd';
@@ -27,9 +27,15 @@ const SelectWrapper = styled.div`
 `;
 
 interface ModelItemProps {
-  onOpenChange: (open: boolean) => void;
+  onOpenChange?: (open: boolean) => void;
   onChange: (data: ProviderModel) => void;
-  providerModelList: Global.BaseOption<string>[];
+  providerModelList: Global.BaseOption<
+    string,
+    {
+      category: string;
+      accessible: boolean;
+    }
+  >[];
   selectedModelList: ProviderModel[];
   item: ProviderModel;
   loading?: boolean;
@@ -63,10 +69,9 @@ const ModelItem: React.FC<ModelItemProps> = ({
     });
   };
 
-  const handleOnChange = (value: string) => {
+  const handleOnChange = (value: string, option: any) => {
     onChange({
-      ...item,
+      ...option,
-      accessible: null,
       name: value
     });
   };
@@ -79,20 +84,26 @@ const ModelItem: React.FC<ModelItemProps> = ({
   };
 
   const renderSuffixIcon = () => {
+    console.log(
+      'testLoading',
+      testLoading,
+      item.accessible,
+      item.accessible === false
+    );
     if (testLoading) {
       return <LoadingOutlined />;
     }
     if (item.accessible === true) {
       return (
         <CheckCircleFilled
-          style={{ color: 'var(--ant-color-success)', fontSize: 16 }}
+          style={{ color: 'var(--ant-color-success)', fontSize: 14 }}
         />
       );
     }
     if (item.accessible === false) {
       return (
-        <CloseCircleFilled
+        <WarningFilled
-          style={{ color: 'var(--ant-color-error)', fontSize: 16 }}
+          style={{ color: 'var(--ant-color-error)', fontSize: 14 }}
         />
       );
     }

src/pages/maas-provider/forms/supported-models.tsx

@@ -1,6 +1,8 @@
 import MetadataList from '@/components/metadata-list';
+import useAppUtils from '@/hooks/use-app-utils';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
+import { useRef } from 'react';
 import { FormData, ProviderModel } from '../config/types';
 import { useQueryProviderModels } from '../hooks/use-query-provider-models';
 import ModelItem from './model-item';
@@ -11,15 +13,26 @@ const SupportedModels = () => {
     useQueryProviderModels();
   const form = Form.useFormInstance<FormData>();
   const modelList = Form.useWatch('models', form) || [];
+  const prevAPIKeyRef = useRef<string>('');
+  const { getRuleMessage } = useAppUtils();
 
   const handleOpenChange = async (open: boolean) => {
     try {
       await form.validateFields(['api_key']);
 
-      if (open && providerModelList.length === 0) {
+      const currentAPIKey = form.getFieldValue('api_key') || '';
+
+      // Avoid repeated requests with the same API key
+      if (
+        open &&
+        providerModelList.length === 0 &&
+        prevAPIKeyRef.current !== currentAPIKey &&
+        currentAPIKey
+      ) {
+        prevAPIKeyRef.current = currentAPIKey;
         fetchProviderModels({
           data: {
-            api_token: form.getFieldValue('api_key') || '',
+            api_token: currentAPIKey,
             config: {
               type: form.getFieldValue(['config', 'type']) || ''
             }
@@ -55,7 +68,33 @@ const SupportedModels = () => {
 
   return (
     <>
-      <Form.Item name="models" data-field="supportedModels">
+      <Form.Item
+        name="models"
+        data-field="supportedModels"
+        rules={[
+          {
+            required: true,
+            validator: async (_, value) => {
+              if (!value || value.length === 0) {
+                return Promise.reject(
+                  new Error(
+                    getRuleMessage('input', 'providers.form.rules.models')
+                  )
+                );
+              }
+
+              if (value.some((item: ProviderModel) => !item.name)) {
+                return Promise.reject(
+                  new Error(
+                    getRuleMessage('select', 'providers.form.rules.model')
+                  )
+                );
+              }
+              return Promise.resolve();
+            }
+          }
+        ]}
+      >
         <MetadataList
           styles={{
             wrapper: {

src/pages/maas-provider/hooks/use-query-provider-models.ts

@@ -33,7 +33,9 @@ export const useQueryProviderModels = () => {
         setProviderModelList(
           response.data?.map((item: any) => ({
             label: item.id,
-            value: item.id
+            value: item.id,
+            accessible: item.accessible,
+            category: item.categories?.[0] || ''
           })) || []
         );
       },

src/pages/model-routes/config/index.ts

@@ -14,7 +14,7 @@ export const TargetStatusLabelMap = {
 
 export const TargetStatus: Record<string, StatusType> = {
   [TargetStatusValueMap.Active]: StatusMaps.success,
-  [TargetStatusValueMap.Unavailable]: StatusMaps.error
+  [TargetStatusValueMap.Unavailable]: StatusMaps.warning
 };
 
 // actions for each row

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

@@ -43,5 +43,8 @@ export interface RouteTarget {
   name: string;
   route_name: string;
   route_id: number;
+  provider_id: number;
+  provider_model_name: string;
+  fallback_status_codes: string[];
   state: string;
 }

src/pages/model-routes/forms/targets.tsx

@@ -1,6 +1,7 @@
 import MetadataList from '@/components/metadata-list';
 import SealCascader from '@/components/seal-form/seal-cascader';
 import SealInput from '@/components/seal-form/seal-input';
+import useAppUtils from '@/hooks/use-app-utils';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import _ from 'lodash';
@@ -10,6 +11,7 @@ import useTargetSourceModels from '../hooks/use-target-source-models';
 
 const TargetsForm = forwardRef((props, ref) => {
   const intl = useIntl();
+  const { getRuleMessage } = useAppUtils();
   const { sourceModels, loading, fetchSourceModels } = useTargetSourceModels();
   const form = Form.useFormInstance<FormData>();
   const targets = Form.useWatch('targets', form) || [];
@@ -38,19 +40,11 @@ const TargetsForm = forwardRef((props, ref) => {
   }));
 
   const handleTargetsChange = (value: any[], index: number, options: any[]) => {
-    console.log(
-      'handleTargetsChange:',
-      value,
-      index,
-      options,
-      dataList,
-      sourceModels
-    );
     const selectedOption =
       options?.find?.((opt) => opt.value === value[1]) || {};
     const targetList = [...targets];
     targetList[index] = {
-      weight: targetList[index]?.weight || null,
+      weight: targetList[index]?.weight,
       ...selectedOption?.data
     };
 
@@ -68,11 +62,19 @@ const TargetsForm = forwardRef((props, ref) => {
     const newDataList = [
       ...dataList,
       {
-        weight: null,
+        weight: 100,
         value: []
       }
     ];
     setDataList(newDataList);
+    const newTargets = [
+      ...targets,
+      {
+        weight: 100,
+        value: []
+      }
+    ];
+    form.setFieldValue('targets', newTargets);
   };
 
   const handleOnDelete = (index: number, item: any) => {
@@ -85,13 +87,19 @@ const TargetsForm = forwardRef((props, ref) => {
   };
 
   const handleFallbackChange = (value: any[], options?: any[]) => {
+    if (!value || value.length === 0) {
+      form.setFieldValue('fallback_target', null);
+      setFallbackValues({
+        value: []
+      });
+      return;
+    }
     const selectedOption =
       options?.find?.((opt) => opt.value === value[1]) || {};
 
     form.setFieldValue('fallback_target', {
       ...selectedOption?.data
     });
-    console.log('handleFallbackChange:', value, dataList);
     setFallbackValues({
       value: value
     });
@@ -163,27 +171,29 @@ const TargetsForm = forwardRef((props, ref) => {
         name="targets"
         data-field="targets"
         rules={[
-          ({ getFieldValue }) => ({
+          {
             validator(rule, value) {
-              if (_.keys(value).length > 0) {
+              if (value && value?.length > 0) {
-                if (_.some(_.keys(value), (k: string) => !value[k])) {
+                if (_.some(value, (item: any) => !item.weight)) {
                   return Promise.reject(
-                    intl.formatMessage(
+                    getRuleMessage('input', 'routes.form.target.weight')
-                      {
+                  );
-                        id: 'common.validate.value'
+                }
-                      },
+
-                      {
+                if (
-                        name: intl.formatMessage({
+                  _.some(
-                          id: 'models.form.selector'
+                    dataList,
-                        })
+                    (item: any) => !item.value || item.value.length === 0
-                      }
+                  )
-                    )
+                ) {
+                  return Promise.reject(
+                    getRuleMessage('input', 'providers.form.target.placeholder')
                   );
                 }
               }
               return Promise.resolve();
             }
-          })
+          }
         ]}
       >
         <MetadataList
@@ -203,6 +213,9 @@ const TargetsForm = forwardRef((props, ref) => {
               <SealCascader
                 required
                 showSearch
+                status={
+                  !item.value || item.value.length === 0 ? 'error' : 'success'
+                }
                 expandTrigger="hover"
                 multiple={false}
                 alwaysFocus={true}
@@ -235,6 +248,8 @@ const TargetsForm = forwardRef((props, ref) => {
               <SealInput.Number
                 style={{ flex: 100 }}
                 min={0}
+                step={1}
+                status={item.weight === null ? 'error' : 'success'}
                 value={item.weight}
                 onChange={(value) => handleOnWeightChange(value, index)}
                 placeholder={intl.formatMessage({

src/pages/model-routes/hooks/use-access-control.ts

@@ -1,9 +1,11 @@
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
+import useBodyScroll from '@/hooks/use-body-scroll';
 import { useState } from 'react';
 import { RouteItem as ListItem } from '../config/types';
 
 const useAccessControl = () => {
+  const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
   const [openModalStatus, setOpenModalStatus] = useState<{
     open: boolean;
     action: PageActionType;
@@ -27,6 +29,7 @@ const useAccessControl = () => {
       currentData,
       title: title
     });
+    saveScrollHeight();
   };
 
   const closeModal = () => {
@@ -36,6 +39,7 @@ const useAccessControl = () => {
       currentData: undefined,
       title: ''
     });
+    restoreScrollHeight();
   };
 
   return {

src/pages/model-routes/hooks/use-create-route.ts

@@ -1,9 +1,11 @@
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
+import useBodyScroll from '@/hooks/use-body-scroll';
 import { useState } from 'react';
 import { RouteItem as ListItem } from '../config/types';
 
 const useCreateRoute = (options?: { refresh: () => void }) => {
+  const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
   const [openModalStatus, setOpenModalStatus] = useState<{
     open: boolean;
     action: PageActionType;
@@ -27,6 +29,7 @@ const useCreateRoute = (options?: { refresh: () => void }) => {
       currentData,
       title: title
     });
+    saveScrollHeight();
   };
 
   const closeModal = () => {
@@ -36,6 +39,7 @@ const useCreateRoute = (options?: { refresh: () => void }) => {
       currentData: undefined,
       title: ''
     });
+    restoreScrollHeight();
   };
 
   return {

src/pages/model-routes/index.tsx

@@ -275,7 +275,7 @@ const ModelRoutes: React.FC = () => {
             loadend={dataSource.loadend}
             rowSelection={rowSelection}
             columns={columns}
-            childParentKey="access_id"
+            childParentKey="route_id"
             expandable={true}
             empty={
               <NoResult