fix(style): cluster state do not display

src/pages/llmodels/catalog.tsx

@@ -59,29 +59,6 @@ const Catalog: React.FC = () => {
 
   const categoryOptions = [...modelCategories.filter((item) => item.value)];
 
-  const filterData = useCallback(
-    (data: { search: string; categories: string }) => {
-      const { search, categories } = data;
-      const dataList = cacheData.current.filter((item) => {
-        if (search && categories) {
-          return (
-            _.toLower(item.name).includes(search) &&
-            item.categories.includes(categories)
-          );
-        }
-        if (search) {
-          return _.toLower(item.name).includes(_.toLower(search));
-        }
-        if (categories) {
-          return item.categories.includes(categories);
-        }
-        return true;
-      });
-      return dataList;
-    },
-    [cacheData.current]
-  );
-
   const fetchData = useCallback(
     async (query?: any) => {
       const searchQuery = {

src/pages/llmodels/components/search-input.tsx

@@ -1,5 +1,6 @@
 import IconFont from '@/components/icon-font';
 import hotkeys from '@/config/hotkeys';
+import { SearchOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Input } from 'antd';
 import React, { useRef } from 'react';
@@ -61,6 +62,12 @@ const SearchInput: React.FC<{
           e.stopPropagation();
         }}
         allowClear
+        suffix={
+          <SearchOutlined
+            className="font-size-16"
+            style={{ color: 'var(--ant-color-text-placeholder)' }}
+          />
+        }
         prefix={
           <IconFont
             className="font-size-16"

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

@@ -36,7 +36,7 @@ interface SearchInputProps {
   modelSource: string;
   isDownload?: boolean;
   gpuOptions?: any[];
-  clusterId: number;
+  clusterId?: number;
   setLoadingModel?: (flag: boolean) => void;
   onSourceChange?: (source: string) => void;
   onSelectModel: (model: any, manul?: boolean) => void;
@@ -547,7 +547,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
               options={filterOptions}
               size="middle"
               placeholder={intl.formatMessage({ id: 'common.input.type' })}
-              style={{ width: 150 }}
+              style={{ width: 120 }}
             ></BaseSelect>
           </span>
           <PaginationMain

src/pages/llmodels/download/index.tsx

@@ -4,6 +4,7 @@ import { ProviderValueMap } from '@/pages/cluster-management/config';
 import { useIntl } from '@umijs/max';
 import { debounce } from 'lodash';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
 import ColumnWrapper from '../../_components/column-wrapper';
 import CompatibilityAlert from '../components/compatible-alert';
 import ModelCard from '../components/model-card';
@@ -25,6 +26,18 @@ type AddModalProps = {
   onCancel: () => void;
 };
 
+const ColWrapper = styled.div`
+  display: flex;
+  flex: 1;
+  max-width: 33.33%;
+`;
+
+const FormWrapper = styled.div`
+  display: flex;
+  flex: 1;
+  maxwidth: 100%;
+`;
+
 const DownloadModel: React.FC<AddModalProps> = (props) => {
   const {
     title,
@@ -155,31 +168,17 @@ const DownloadModel: React.FC<AddModalProps> = (props) => {
       <div style={{ display: 'flex', height: '100%' }}>
         {SEARCH_SOURCE.includes(props.source) && (
           <>
-            <div
-              style={{
-                display: 'flex',
-                flex: 1,
-                maxWidth: '33.33%'
-              }}
-            >
-              <ColumnWrapper>
-                <SearchModel
-                  hasLinuxWorker={hasLinuxWorker}
-                  modelSource={props.source}
-                  onSelectModel={handleOnSelectModel}
-                  isDownload={true}
-                ></SearchModel>
-              </ColumnWrapper>
+            <ColWrapper>
+              <SearchModel
+                hasLinuxWorker={hasLinuxWorker}
+                modelSource={props.source}
+                onSelectModel={handleOnSelectModel}
+                isDownload={true}
+              ></SearchModel>
               <Separator></Separator>
-            </div>
-            <div
-              style={{
-                display: 'flex',
-                flex: 1,
-                maxWidth: '33.33%'
-              }}
-            >
-              <ColumnWrapper>
+            </ColWrapper>
+            <ColWrapper>
+              <ColumnWrapper styles={{ container: { paddingTop: 0 } }}>
                 <ModelCard
                   selectedModel={selectedModel}
                   onCollapse={setCollapsed}
@@ -189,12 +188,15 @@ const DownloadModel: React.FC<AddModalProps> = (props) => {
                 ></ModelCard>
               </ColumnWrapper>
               <Separator></Separator>
-            </div>
+            </ColWrapper>
           </>
         )}
-        <div style={{ display: 'flex', flex: 1, maxWidth: '100%' }}>
+        <FormWrapper>
           <ColumnWrapper
             paddingBottom={50}
+            styles={{
+              container: { paddingTop: 0 }
+            }}
             footer={
               <>
                 <CompatibilityAlert
@@ -238,7 +240,7 @@ const DownloadModel: React.FC<AddModalProps> = (props) => {
               ></TargetForm>
             </>
           </ColumnWrapper>
-        </div>
+        </FormWrapper>
       </div>
     </GSDrawer>
   );

src/pages/llmodels/forms/backend.tsx

@@ -4,6 +4,7 @@ import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import TooltipList from '@/components/tooltip-list';
 import { PageAction } from '@/config';
+import useAppUtils from '@/hooks/use-app-utils';
 import { useIntl } from '@umijs/max';
 import { Form, Typography } from 'antd';
 import React, { useMemo } from 'react';
@@ -19,6 +20,7 @@ import { FormData } from '../config/types';
 
 const BackendFields: React.FC = () => {
   const intl = useIntl();
+  const { getRuleMessage } = useAppUtils();
   const form = Form.useFormInstance();
   const {
     isGGUF,
@@ -51,7 +53,15 @@ const BackendFields: React.FC = () => {
 
   return (
     <>
-      <Form.Item name="backend" rules={[{ required: true }]}>
+      <Form.Item
+        name="backend"
+        rules={[
+          {
+            required: true,
+            message: getRuleMessage('select', 'models.form.backend')
+          }
+        ]}
+      >
         <SealSelect
           required
           onChange={onBackendChange}
@@ -109,7 +119,15 @@ const BackendFields: React.FC = () => {
       )}
       {backend === backendOptionsMap.custom && (
         <>
-          <Form.Item<FormData> name="image_name" rules={[{ required: true }]}>
+          <Form.Item<FormData>
+            name="image_name"
+            rules={[
+              {
+                required: true,
+                message: getRuleMessage('input', 'backend.imageName')
+              }
+            ]}
+          >
             <SealInput.Input
               required
               allowClear
@@ -117,7 +135,15 @@ const BackendFields: React.FC = () => {
               label={intl.formatMessage({ id: 'backend.imageName' })}
             ></SealInput.Input>
           </Form.Item>
-          <Form.Item<FormData> name="run_command" rules={[{ required: true }]}>
+          <Form.Item<FormData>
+            name="run_command"
+            rules={[
+              {
+                required: true,
+                message: getRuleMessage('input', 'backend.runCommand')
+              }
+            ]}
+          >
             <SealInput.TextArea
               required
               scaleSize={true}

src/pages/llmodels/forms/index.tsx

@@ -63,6 +63,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
   const [form] = Form.useForm();
   const intl = useIntl();
   const [activeKey, setActiveKey] = React.useState<string[]>([]);
+  const scheduleType = Form.useWatch('scheduleType', form);
 
   const handleSumit = () => {
     form.submit();
@@ -112,6 +113,11 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
   const handleClusterChange = (value: number) => {
     getGPUOptionList({ clusterId: value });
     getBackendOptions({ cluster_id: value });
+    if (scheduleType === ScheduleValueMap.Manual) {
+      form.setFieldsValue({
+        gpu_selector: { gpu_ids: [] }
+      });
+    }
   };
 
   const handleOnValuesChange = async (changedValues: any, allValues: any) => {

src/pages/llmodels/forms/performance.tsx

@@ -1,4 +1,5 @@
 import SealCascader from '@/components/seal-form/seal-cascader';
+import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import TooltipList from '@/components/tooltip-list';
 import useAppUtils from '@/hooks/use-app-utils';
@@ -9,6 +10,7 @@ import GPUCard from '../components/gpu-card';
 import { scheduleList, ScheduleValueMap } from '../config';
 import { backendOptionsMap } from '../config/backend-parameters';
 import { useCatalogFormContext, useFormContext } from '../config/form-context';
+import { FormData } from '../config/types';
 
 const scheduleTypeTips = [
   {
@@ -54,6 +56,28 @@ const Performance: React.FC = () => {
 
   return (
     <>
+      <Form.Item<FormData>
+        name="replicas"
+        rules={[
+          {
+            required: true,
+            message: getRuleMessage('input', 'models.form.replicas')
+          }
+        ]}
+      >
+        <SealInput.Number
+          style={{ width: '100%' }}
+          label={intl.formatMessage({
+            id: 'models.form.replicas'
+          })}
+          required
+          description={intl.formatMessage(
+            { id: 'models.form.replicas.tips' },
+            { api: `${window.location.origin}/v1` }
+          )}
+          min={0}
+        ></SealInput.Number>
+      </Form.Item>
       <Form.Item name="scheduleType">
         <SealSelect
           onChange={handleScheduleTypeChange}
@@ -73,24 +97,7 @@ const Performance: React.FC = () => {
           <Form.Item name={['gpu_selector', 'gpu_count']}>
             <SealSelect
               label={intl.formatMessage({ id: 'models.form.gpuCount' })}
-              options={[
-                {
-                  label: 'Auto',
-                  value: 'auto'
-                },
-                {
-                  label: '1',
-                  value: 1
-                },
-                {
-                  label: '2',
-                  value: 2
-                },
-                {
-                  label: '4',
-                  value: 4
-                }
-              ]}
+              options={[]}
             ></SealSelect>
           </Form.Item>
         </>

src/pages/llmodels/style/title-wrapper.less

@@ -1,4 +1,4 @@
-@padding: 16px 24px;
+@padding: 16px 0px;
 
 .h3 {
   position: sticky;

src/pages/llmodels/user-models.tsx

@@ -27,7 +27,8 @@ const UserModels: React.FC = () => {
   } = useTableFetch<any>({
     fetchAPI: queryMyModels,
     API: MY_MODELS_API,
-    watch: false
+    watch: false,
+    isInfiniteScroll: true
   });
   const intl = useIntl();