fix: re-request catalog specs after changing cluster

src/pages/backends/config/index.ts

@@ -1,6 +1,7 @@
 import MindIELogo from '@/assets/logo/ascend.png';
 import SGLangLogo from '@/assets/logo/sglang.png';
 import vLLMLogo from '@/assets/logo/vllm.png';
+import VoxBoxLogo from '@/assets/logo/voxbox.png';
 import icons from '@/components/icon-font/icons';
 import { GPUSTACK_API_BASE_URL } from '@/config/settings';
 import { backendOptionsMap } from '@/pages/llmodels/config/backend-parameters';
@@ -22,7 +23,7 @@ export const builtInBackendLogos: Record<string, string> = {
   [backendOptionsMap.SGLang]: SGLangLogo,
   [backendOptionsMap.vllm]: vLLMLogo,
   [backendOptionsMap.ascendMindie]: MindIELogo,
-  [backendOptionsMap.voxBox]: ''
+  [backendOptionsMap.voxBox]: VoxBoxLogo
 };
 
 export const backendActions = [

src/pages/llmodels/apis/index.ts

@@ -368,7 +368,7 @@ export async function queryCatalogList(
 }
 
 export async function queryCatalogItemSpec(
-  params: { id: number },
+  params: { id: number; cluster_id: number },
   options?: any
 ) {
   return request<Global.PageResponse<CatalogSpec>>(

src/pages/llmodels/components/api-access-info.tsx

@@ -136,22 +136,6 @@ const ApiAccessInfo = ({ open, data, onClose }: ApiAccessInfoProps) => {
       maskClosable={false}
       onOk={handleClose}
       onCancel={handleClose}
-      styles={{
-        content: {
-          padding: '0 0 16px 0'
-        },
-        header: {
-          padding: 'var(--ant-modal-content-padding)',
-          paddingBottom: '0'
-        },
-        body: {
-          padding: '16px 24px 32px'
-        },
-        footer: {
-          padding: '16px 24px',
-          margin: '0'
-        }
-      }}
       footer={null}
     >
       <Tips>
@@ -159,15 +143,17 @@ const ApiAccessInfo = ({ open, data, onClose }: ApiAccessInfoProps) => {
           <dt>
             <BulbOutlined />
           </dt>
-          <dd>
-            {data.generic_proxy
-              ? intl.formatMessage({
-                  id: 'models.table.genericProxy'
-                })
-              : intl.formatMessage({
-                  id: 'models.table.button.apiAccessInfo.tips'
-                })}
-          </dd>
+          <dd
+            dangerouslySetInnerHTML={{
+              __html: data.generic_proxy
+                ? intl.formatMessage({
+                    id: 'models.table.genericProxy'
+                  })
+                : intl.formatMessage({
+                    id: 'models.table.button.apiAccessInfo.tips'
+                  })
+            }}
+          ></dd>
         </dl>
       </Tips>
       <ApiAccessInfoWrapper>
@@ -175,7 +161,7 @@ const ApiAccessInfo = ({ open, data, onClose }: ApiAccessInfoProps) => {
           {intl.formatMessage({ id: 'models.table.apiAccessInfo.endpoint' })}
         </span>
         <span className="value">
-          <AutoTooltip ghost maxWidth={180}>
+          <AutoTooltip ghost maxWidth={data.generic_proxy ? 300 : 180}>
             {endPoint}
           </AutoTooltip>
           {!data.generic_proxy && (

src/pages/llmodels/components/deploy-builtin-modal.tsx

@@ -179,21 +179,22 @@ const AddModal: React.FC<AddModalProps> = (props) => {
     handleCheckFormData();
   };
 
-  const initClusterId = () => {
-    const cluster_id =
-      clusterList?.find((item) => item.state === ClusterStatusValueMap.Ready)
-        ?.value || '';
+  const initClusterId = (): number => {
+    const cluster_id = clusterList?.find(
+      (item) => item.state === ClusterStatusValueMap.Ready
+    )?.value;
 
-    return cluster_id;
+    return cluster_id as number;
   };
 
-  const fetchSpecData = async () => {
+  const fetchSpecData = async (clusterId: number) => {
     try {
       axiosToken.current?.cancel?.();
       axiosToken.current = createAxiosToken();
       const res: any = await queryCatalogItemSpec(
         {
-          id: current.id
+          id: current.id,
+          cluster_id: clusterId
         },
         {
           token: axiosToken.current.token
@@ -224,24 +225,18 @@ const AddModal: React.FC<AddModalProps> = (props) => {
 
       const list = _.sortBy(res.items, 'size');
 
-      hasF16Ref.current = _.some(res.items, (item: CatalogSpec) => {
-        return AscendNPUQuant_F16.includes(_.toUpper(item.quantization));
-      });
-
       const defaultSpec = _.find(
         list,
         (item: CatalogSpec) => item.mode === modeDataList[0]?.value
       );
 
-      console.log('default spec:', defaultSpec);
-
       selectSpecRef.current = defaultSpec;
 
       setModeList(modeDataList);
       setSourceList(sources);
       initFormDataBySource({
         ...defaultSpec,
-        cluster_id: initClusterId()
+        cluster_id: clusterId
       });
 
       const name = _.toLower(current.name).replace(/\s/g, '-') || '';
@@ -255,7 +250,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
       const allValues = generateSubmitData({
         ...defaultSpec,
         categories: _.get(current, 'categories.0', null),
-        cluster_id: initClusterId(),
+        cluster_id: clusterId,
         name
       });
       handleCheckCompatibility(allValues);
@@ -280,6 +275,10 @@ const AddModal: React.FC<AddModalProps> = (props) => {
     handleCheckFormData();
   };
 
+  const handleOnClusterChange = async (clusterId: number) => {
+    await fetchSpecData(clusterId);
+  };
+
   const handleOk = async (values: FormData) => {
     const data = {
       ..._.omit(selectSpecRef.current, ['name']),
@@ -297,15 +296,20 @@ const AddModal: React.FC<AddModalProps> = (props) => {
     return warningStatus.show && warningStatus.type !== 'success';
   }, [warningStatus.show, warningStatus.type]);
 
+  useEffect(() => {
+    getClusterList();
+  }, []);
+
   useEffect(() => {
     if (open) {
       setTimeout(() => {
-        fetchSpecData();
+        const clusterId = initClusterId();
+        fetchSpecData(clusterId);
         form.current?.getGPUOptionList?.({
-          clusterId: initClusterId()
+          clusterId: clusterId
         });
         form.current?.getBackendOptions?.({
-          cluster_id: initClusterId()
+          cluster_id: clusterId
         });
       }, 100);
     }
@@ -320,10 +324,6 @@ const AddModal: React.FC<AddModalProps> = (props) => {
     };
   }, [open, current]);
 
-  useEffect(() => {
-    getClusterList();
-  }, []);
-
   return (
     <GSDrawer
       title={title}
@@ -415,6 +415,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
                 sourceDisable={false}
                 sourceList={sourceList}
                 clusterList={clusterList}
+                onClusterChange={handleOnClusterChange}
                 onBackendChange={handleBackendChange}
                 onSourceChange={handleSourceChange}
                 onValuesChange={onValuesChange}

src/pages/llmodels/components/model-tag.tsx

@@ -15,7 +15,7 @@ export const categoryConfig = {
   },
   [modelCategoriesMap.embedding]: {
     icon: <IconFont type="icon-cube" />,
-    color: 'purple',
+    color: 'magenta',
     label: 'Embedding'
   },
   [modelCategoriesMap.text_to_speech]: {

src/pages/llmodels/forms/index.tsx

@@ -69,12 +69,13 @@ interface DataFormProps {
   sourceDisable?: boolean;
   sourceList?: Global.BaseOption<string>[];
   clusterList: Global.BaseOption<number>[];
-  fields?: string[];
+  fields?: string[]; // control some fields to show in the form
   clearCacheFormValues?: () => void;
   onValuesChange?: (changedValues: any, allValues: any) => void;
   onSourceChange?: (value: string) => void;
   onOk: (values: FormData) => void;
   onBackendChange?: (value: string) => void;
+  onClusterChange?: (value: number) => void;
 }
 
 const TABKeysMap = {
@@ -99,6 +100,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
     onBackendChange,
     onSourceChange,
     onValuesChange,
+    onClusterChange,
     onOk
   } = props;
   const {
@@ -259,6 +261,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
   };
 
   const handleClusterChange = async (value: number) => {
+    await onClusterChange?.(value);
     getGPUOptionList({ clusterId: value });
     getBackendOptions({ cluster_id: value });
     if (scheduleType === ScheduleValueMap.Manual) {