chore: test by api

src/components/icon-font/index.tsx

@@ -2,7 +2,7 @@ import { createFromIconfontCN } from '@ant-design/icons';
 // import './iconfont/iconfont.js';
 
 const IconFont = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_4613488_c06q7b0n32v.js'
+  scriptUrl: '//at.alicdn.com/t/c/font_4613488_gacm1yqzw1w.js'
 });
 
 export default IconFont;

src/components/templates/card.tsx

@@ -21,7 +21,7 @@ const CardWrapper = styled.div.attrs({
 })`
   overflow: hidden;
   display: flex;
-  padding: 22px;
+  padding: 16px 20px;
   justify-content: flex-start;
   align-items: center;
   border: 1px solid var(--ant-color-border);

src/locales/en-US/backends.ts

@@ -0,0 +1,3 @@
+export default {
+  'backends.title': 'Backends'
+};

src/locales/ja-JP/backends.ts

@@ -0,0 +1,3 @@
+export default {
+  'backends.title': 'Backends'
+};

src/locales/ru-RU/backends.ts

@@ -0,0 +1,3 @@
+export default {
+  'backends.title': 'Backends'
+};

src/locales/zh-CN/backends.ts

@@ -0,0 +1,3 @@
+export default {
+  'backends.title': '后端'
+};

src/pages/_components/collapse-panel/index.tsx

@@ -30,15 +30,20 @@ const CollapseInner = styled(Collapse)`
   }
 `;
 
-const CollapsePanel: React.FC<{ items: CollapseProps['items'] }> = ({
+const CollapsePanel: React.FC<{
-  items
+  items: CollapseProps['items'];
-}) => {
+  activeKey: string | string[];
+  accordion?: boolean;
+  onChange?: (key: string | string[]) => void;
+}> = ({ items, activeKey, accordion, onChange }) => {
   return (
     <CollapseInner
       expandIconPosition="start"
       bordered={false}
       ghost
-      accordion
+      accordion={accordion}
+      activeKey={activeKey}
+      onChange={onChange}
       destroyOnHidden={false}
       expandIcon={({ isActive }) => (
         <IconFont

src/pages/api-keys/index.tsx

@@ -5,7 +5,12 @@ import { PageAction } from '@/config';
 import HotKeys from '@/config/hotkeys';
 import type { PageActionType } from '@/config/types';
 import useTableFetch from '@/hooks/use-table-fetch';
-import { DeleteOutlined, PlusOutlined, SyncOutlined } from '@ant-design/icons';
+import {
+  DeleteOutlined,
+  PlusOutlined,
+  SearchOutlined,
+  SyncOutlined
+} from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
 import {
@@ -110,6 +115,11 @@ const APIKeys: React.FC = () => {
           left={
             <Space>
               <Input
+                prefix={
+                  <SearchOutlined
+                    style={{ color: 'var(--ant-color-text-placeholder)' }}
+                  ></SearchOutlined>
+                }
                 placeholder={intl.formatMessage({ id: 'common.filter.name' })}
                 style={{ width: 300 }}
                 allowClear

src/pages/backends/apis/index.ts

@@ -1,7 +1,7 @@
 import { request } from '@umijs/max';
 import { FormData, ListItem } from '../config/types';
 
-export const INFERENCE_BACKEND_API = '/inference-backend';
+export const INFERENCE_BACKEND_API = '/inference-backends';
 
 export const FROM_YAML_API = '/from-yaml';
 

src/pages/backends/components/add-modal.tsx

@@ -1,12 +1,15 @@
 import IconFont from '@/components/icon-font';
 import ModalFooter from '@/components/modal-footer';
 import GSDrawer from '@/components/scroller-modal/gs-drawer';
+import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import { useIntl } from '@umijs/max';
 import { Segmented, Tabs } from 'antd';
-import React, { useRef, useState } from 'react';
+import _ from 'lodash';
+import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import ColumnWrapper from '../../_components/column-wrapper';
+import { backendFields, json2Yaml } from '../config';
 import { FormData, ListItem } from '../config/types';
 import BackendForm from '../forms';
 import ImportYAML from './import-yaml';
@@ -35,23 +38,28 @@ interface AddModalProps {
   currentData?: ListItem; // Used when action is EDIT
   onClose: () => void;
   onSubmit: (values: FormData) => void;
+  onSubmitYaml: (values: { content: string }) => void;
   open: boolean;
   title?: string;
 }
 
 const AddModal: React.FC<AddModalProps> = (props) => {
-  const { action, currentData, onClose, onSubmit, open, title } = props;
+  const { action, currentData, onClose, onSubmit, onSubmitYaml, open, title } =
+    props;
   const formRef = useRef<any>(null);
   const editorRef = useRef<any>(null);
   const intl = useIntl();
   const [activeKey, setActiveKey] = useState<string>('form');
+  const [yamlContent, setYamlContent] = useState<string>('');
+  const [formContent, setFormContent] = useState<FormData>({} as FormData);
+  const tabsRef = useRef<any>(null);
 
   const onOk = () => {
     if (activeKey === 'yaml') {
       const content = editorRef.current?.getContent();
       const valid = editorRef.current?.validate();
       if (valid) {
-        onSubmit({ content: content });
+        onSubmitYaml({ content: content });
       }
     } else {
       formRef.current?.submit();
@@ -59,9 +67,64 @@ const AddModal: React.FC<AddModalProps> = (props) => {
   };
 
   const onFinish = (values: FormData) => {
-    onSubmit(values);
+    console.log('Form values:', values);
+    const versionConfigs = values.version_configs?.reduce(
+      (acc: Record<string, any>, curr) => {
+        if (curr.version_no) {
+          acc[curr.version_no] = {
+            image_name: curr.image_name,
+            run_command: curr.run_command
+          };
+        }
+        return acc;
+      },
+      {}
+    );
+
+    const defaultVersion = values.version_configs?.find((v) => v.is_default);
+
+    onSubmit({
+      ...values,
+      default_version: defaultVersion?.version_no || '',
+      // @ts-ignore
+      version_configs: versionConfigs
+    });
   };
 
+  const iniFormContent = (values: any) => {
+    const versionConfigs = Object.keys(values.version_configs || {}).map(
+      (key) => ({
+        version_no: key,
+        image_name: values.version_configs[key].image_name,
+        run_command: values.version_configs[key].run_command,
+        is_default: key === values.default_version,
+        isBuiltin: true
+      })
+    );
+    return {
+      ...values,
+      version_configs: versionConfigs
+    };
+  };
+
+  const initYamlContent = (values: any) => {
+    if (currentData?.is_build_in) {
+      return json2Yaml(_.pick(values, backendFields));
+    }
+    return json2Yaml(_.pick(values, [...backendFields, 'default_version']));
+  };
+
+  useEffect(() => {
+    if (action === PageAction.EDIT) {
+      const yaml = initYamlContent(currentData || {});
+      const formData = iniFormContent(currentData || {});
+      setYamlContent(yaml);
+      setFormContent(formData);
+      formRef.current?.setFieldsValue?.(formData);
+      editorRef.current?.setValue?.(yaml);
+    }
+  }, [action, currentData]);
+
   return (
     <GSDrawer
       title={title}
@@ -115,7 +178,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
         }
       >
         <Tabs
-          renderTabBar={() => <></>}
+          renderTabBar={(agrs, tab) => <></>}
           activeKey={activeKey}
           defaultActiveKey={activeKey}
           items={[
@@ -126,7 +189,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
                 <BackendForm
                   onFinish={onFinish}
                   action={action}
-                  currentData={currentData}
+                  currentData={formContent as ListItem}
                   ref={formRef}
                 />
               )
@@ -135,7 +198,14 @@ const AddModal: React.FC<AddModalProps> = (props) => {
               key: 'yaml',
               label: 'YAML',
               children: (
-                <ImportYAML action={action} ref={editorRef}></ImportYAML>
+                <ImportYAML
+                  actionStatus={{
+                    action: action,
+                    isBuiltIn: currentData?.is_build_in || false
+                  }}
+                  ref={editorRef}
+                  content={yamlContent}
+                />
               )
             }
           ]}

src/pages/backends/components/backend-card.tsx

@@ -1,12 +1,30 @@
 import DropDownActions from '@/components/drop-down-actions';
 import IconFont from '@/components/icon-font';
 import Card from '@/components/templates/card';
-import { DockerOutlined } from '@ant-design/icons';
+import { DockerOutlined, InfoCircleOutlined } from '@ant-design/icons';
-import { Button } from 'antd';
+import { Button, Tag } from 'antd';
+import _ from 'lodash';
+import { useMemo } from 'react';
 import styled from 'styled-components';
-import { backendActions } from '../config';
+import {
+  backendActions,
+  builtInBackendLogos,
+  customColors,
+  customIcons
+} from '../config';
 import { ListItem } from '../config/types';
 
+const TagInner = styled(Tag)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  height: 28px;
+  width: 28px;
+  border-radius: 6px;
+  font-weight: 400;
+`;
+
 const Header = styled.div`
   display: flex;
   align-items: center;
@@ -15,16 +33,26 @@ const Header = styled.div`
   .title {
     display: flex;
     align-items: center;
-    gap: 16px;
+    gap: 24px;
   }
 `;
 
+const CardName = styled.div`
+  font-weight: 500;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  color: var(--ant-color-text);
+  margin-bottom: 4px;
+  gap: 16px;
+`;
+
 const Content = styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  margin-top: 8px;
+  margin-top: 12px;
-  gap: 12px;
+  gap: 16px;
   color: var(--ant-color-text-secondary);
   .description {
     margin-block: 12px;
@@ -32,44 +60,81 @@ const Content = styled.div`
   }
   .text {
     margin-left: 4px;
-    color: var(--ant-color-text-secondary);
+    color: var(--ant-color-text);
   }
   .title {
     color: var(--ant-color-text);
     font-weight: 500;
     line-height: 1.5;
   }
+  .info {
+    display: grid;
+    grid-template-columns: max-content 1fr;
+    align-items: center;
+    gap: 8px;
+    color: var(--ant-color-text-tertiary);
+    .icon {
+      color: var(--ant-color-text-tertiary);
+    }
+    .label {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+  }
 `;
 
 interface BackendCardProps {
-  onClick: (data: any) => void;
+  onClick?: (data: any) => void;
   onSelect?: (item: any) => void;
   data: ListItem;
 }
 
-const BackendCard: React.FC<BackendCardProps> = ({
+const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
-  onClick,
+  const handleOnSelect = (item: any) => {
-  data,
+    onSelect?.({ action: item.key, data: data });
-  onSelect
+  };
-}) => {
+
+  const handleClick = () => {
+    onSelect?.({ action: 'edit', data: data });
+  };
+
+  const renderIcon = () => {
+    if (builtInBackendLogos[data.backend_name]) {
+      return <img src={builtInBackendLogos[data.backend_name]} height={20} />;
+    }
+    const color = customColors[data.id % customColors.length];
+    const icon = customIcons[data.id % customIcons.length];
+
+    return (
+      <TagInner color={color} bordered={false}>
+        {icon}
+      </TagInner>
+    );
+  };
+
+  const actions = useMemo(() => {
+    if (data.is_build_in) {
+      return backendActions.filter((item) => item.key !== 'delete');
+    }
+    return backendActions;
+  }, [data.is_build_in]);
+
   return (
     <Card
-      onClick={() => onClick(data)}
+      onClick={handleClick}
       clickable={true}
       disabled={false}
-      height={'auto'}
+      height={160}
       ghost
       header={
         <Header>
-          <div className="title">
+          <div className="title">{renderIcon()}</div>
-            <img src={data.icon} alt={data.backend_name} height={20} />
-            <span>{data.backend_name}</span>
-          </div>
           <span>
             <DropDownActions
               menu={{
-                items: backendActions,
+                items: actions,
-                onClick: onSelect
+                onClick: handleOnSelect
               }}
             >
               <Button
@@ -83,15 +148,35 @@ const BackendCard: React.FC<BackendCardProps> = ({
       }
     >
       <Content>
-        <div className="description">This is a description</div>
+        <CardName>
-        <div>
+          <span>{data.backend_name}</span>
-          <IconFont type="icon-version" style={{ marginRight: 4 }} /> Default
+          {data.is_build_in && (
-          version: <span className="text">{data.default_version}</span>
+            <Tag
-        </div>
+              color="geekblue"
-        <div>
+              className="font-400"
-          <DockerOutlined style={{ marginRight: 4 }} /> Default Image:{' '}
+              bordered={false}
+              style={{ borderRadius: 'var(--ant-border-radius)' }}
+            >
+              Built-in
+            </Tag>
+          )}
+        </CardName>
+        <div className="info">
+          <span className="label">
+            <InfoCircleOutlined className="icon" />
+            <span>Default Version: </span>
+          </span>
+          <span className="text">{data.default_version}</span>
+          <span className="label">
+            <DockerOutlined className="icon" />
+            <span>Default Image: </span>
+          </span>
           <span className="text">
-            {data.version_configs?.[data.default_version]?.image_name}
+            {_.get(data, [
+              'version_configs',
+              data.default_version,
+              'image_name'
+            ])}
           </span>
         </div>
       </Content>

src/pages/backends/components/backend-list.tsx

@@ -29,6 +29,7 @@ interface BackendListProps {
   loading: boolean;
   activeId: Global.WithFalse<number>;
   isFirst: boolean;
+  onSelect?: (item: any) => void;
 }
 
 const InnerSkeleton: React.FC<{
@@ -66,15 +67,16 @@ const CardList: React.FC<BackendListProps> = (props) => {
     dataList,
     loading,
     isFirst,
-    defaultSpan = 6,
+    defaultSpan = 8,
-    resizable = true
+    resizable = true,
+    onSelect
   } = props;
   const [span, setSpan] = React.useState(defaultSpan);
 
   const getSpanByWidth = (width: number) => {
     if (width < breakpoints.md) return 24;
     if (width < breakpoints.lg) return 12;
-    return 6;
+    return 8;
   };
 
   const handleResize = useCallback(
@@ -92,7 +94,7 @@ const CardList: React.FC<BackendListProps> = (props) => {
             {dataList.map((item: any) => {
               return (
                 <Col span={span} key={item.id}>
-                  <BackendCard onClick={() => {}} data={item} />
+                  <BackendCard data={item} onSelect={onSelect} />
                 </Col>
               );
             })}

src/pages/backends/components/import-yaml.tsx

@@ -49,18 +49,21 @@ const Container = styled.div`
 
 interface ImportYAMLProps {
   ref?: any;
-  action: PageActionType;
+  actionStatus: {
+    action: PageActionType;
+    isBuiltIn: boolean;
+  };
   content?: string;
   onSubmit?: (content: string) => void;
 }
 
 const ImportYAML: React.FC<ImportYAMLProps> = forwardRef(
-  ({ action, content = '' }, ref) => {
+  ({ actionStatus, content = '' }, ref) => {
     const intl = useIntl();
     const { userSettings } = useUserSettings();
     const editorRef = useRef<any>(null);
     const [fileContent, setFileContent] = useState<string>(
-      action === PageAction.CREATE ? yamlTemplate : content
+      actionStatus.action === PageAction.CREATE ? yamlTemplate : content
     );
     const [error, setError] = useState<string>('');
 
@@ -131,6 +134,7 @@ const ImportYAML: React.FC<ImportYAMLProps> = forwardRef(
         <YamlEditor
           ref={editorRef}
           lang="yaml"
+          actionStatus={actionStatus}
           theme={userSettings?.isDarkTheme ? 'vs-dark' : 'vs-light'}
           value={fileContent}
           height={'calc(100vh - 255px)'}

src/pages/backends/components/yaml-editor.tsx

@@ -1,4 +1,6 @@
 import EditorWrap from '@/components/editor-wrap';
+import { PageAction } from '@/config';
+import { PageActionType } from '@/config/types';
 import { LoadingOutlined } from '@ant-design/icons';
 import Editor, { loader } from '@monaco-editor/react';
 import * as monaco from 'monaco-editor';
@@ -9,7 +11,9 @@ import React, {
   useImperativeHandle,
   useRef
 } from 'react';
-import schema from '../config/schema.json';
+import createSchema from '../config/schema/create.json';
+import updateBuiltinSchema from '../config/schema/update-builtin.json';
+import udpateCustomSchema from '../config/schema/update-custom.json';
 
 loader.config({ monaco });
 
@@ -24,20 +28,22 @@ interface ViewerProps {
   header?: React.ReactNode;
   placeholder?: string;
   variant?: 'bordered' | 'borderless';
+  actionStatus: {
+    action: PageActionType;
+    isBuiltIn: boolean;
+  };
 }
 
 const path = 'inmemory://model/config.yaml';
 
 const ViewerEditor: React.FC<ViewerProps> = forwardRef((props, ref) => {
   const {
-    lang,
     value,
-    config,
-    defaultLang,
     height = 380,
     theme = 'vs-dark',
     header,
     variant = 'borderless',
+    actionStatus,
     placeholder
   } = props;
 
@@ -53,7 +59,12 @@ const ViewerEditor: React.FC<ViewerProps> = forwardRef((props, ref) => {
         {
           uri: 'http://example.com/schema-name.json',
           fileMatch: [yamlUri.toString()],
-          schema
+          schema:
+            actionStatus.action === PageAction.CREATE
+              ? createSchema
+              : actionStatus.isBuiltIn
+                ? updateBuiltinSchema
+                : udpateCustomSchema
         }
       ]
     });

src/pages/backends/config/index.ts

@@ -1,24 +1,47 @@
+import MindIELogo from '@/assets/logo/ascend.png';
+import SGLangLogo from '@/assets/logo/sglang.png';
+import vLLMLogo from '@/assets/logo/vllm.png';
 import icons from '@/components/icon-font/icons';
+import jsYaml from 'js-yaml';
+import { trim } from 'lodash';
+
+const SealYamlType = new jsYaml.Type('!seal', {
+  kind: 'sequence', // See node kinds in YAML spec: http://www.yaml.org/spec/1.2/spec.html#kind//
+  construct(data: any) {
+    return data.map(function (str: string) {
+      return `seal${str}`;
+    });
+  }
+});
+
+const SEAL_SCHEMA = jsYaml.DEFAULT_SCHEMA.extend([SealYamlType]);
+
+export const builtInBackends = {
+  SGLang: 'SGLang',
+  vLLM: 'vllm',
+  MindIE: 'mindie',
+  VoxBox: 'voxbox'
+};
+
+export const builtInBackendLogos: Record<string, string> = {
+  [builtInBackends.SGLang]: SGLangLogo,
+  [builtInBackends.vLLM]: vLLMLogo,
+  [builtInBackends.MindIE]: MindIELogo,
+  [builtInBackends.VoxBox]: ''
+};
 
 export const backendActions = [
   {
-    label: 'Edit Versions',
+    label: 'Edit',
-    value: 'version',
+    value: 'edit',
-    key: 'version',
-    icon: icons.EditContent,
-    locale: false
-  },
-  {
-    label: 'Edit Parameters',
-    value: 'parameter',
-    key: 'parameter',
-    icon: icons.Parameter,
-    locale: false
-  },
-  {
-    label: 'Edit by Yaml',
-    value: 'yaml',
     key: 'edit',
+    icon: icons.EditOutlined,
+    locale: false
+  },
+  {
+    label: 'Export YAML',
+    value: 'yaml',
+    key: 'export',
     icon: icons.Yaml,
     locale: false
   },
@@ -32,20 +55,59 @@ export const backendActions = [
   }
 ];
 
-export const yamlTemplate = `
+export const json2Yaml = (obj: Record<string, any>) => {
-name: SGLang
+  if (!obj || !Object.keys(obj).length) return '';
+  const res = jsYaml.dump(JSON.parse(JSON.stringify(obj)));
+  return res;
+};
+
+export const yaml2Json = (input: string) => {
+  const str = trim(input);
+  const obj = jsYaml.load(str, { schema: SEAL_SCHEMA });
+  if (typeof obj !== 'object' || obj === null) {
+    return {};
+  }
+  const jsonStr = JSON.stringify(obj);
+  return JSON.parse(jsonStr);
+};
+
+export const customColors = [
+  'red',
+  'orange',
+  'gold',
+  'lime',
+  'volcano',
+  'green',
+  'magenta',
+  'cyan',
+  'purple',
+  'blue',
+  'geekblue'
+];
+
+export const customIcons = ['∑', '∏', '∫', '∂', '∞', 'θ', '∆', '∇'];
+
+export const backendFields = [
+  'description',
+  'health_check_path',
+  'default_run_command',
+  'version_configs',
+  'default_backend_parameters'
+];
+
+export const yamlTemplate = `# backend configuration template
+backend_name: SGLang
+description: SGLang backend
 default_version: v0.5.1
 health_check_path: /health
-allowed_proxy_uris:
+default_run_command: run sglang
-  - api/chat
+version_configs:
-  - api/v1
-versions:
   v0.0.1:
-    image: lm/sglang
+    image_name: lm/sglang
-    command: run sglang
+    run_command: run sglang
   v0.0.2:
-    image: lm/sglang
+    image_name: lm/sglang
-    command: run sglang
+    run_command: run sglang
 default_backend_parameters:
   - --host
   `;

src/pages/backends/config/schema/create.json

@@ -1,42 +1,43 @@
 {
   "type": "object",
   "properties": {
-    "name": {
+    "backend_name": {
       "type": "string",
       "description": "backend name",
       "severity": "error"
     },
+    "description": {
+      "type": ["string", "null"],
+      "description": "backend description"
+    },
     "default_version": {
       "type": "string",
       "description": "default backend version"
     },
+    "default_run_command": {
+      "type": ["string", "null"],
+      "description": "default start command"
+    },
     "health_check_path": {
-      "type": "string",
+      "type": ["string", "null"],
       "description": "health check path"
     },
-    "allowed_proxy_uris": {
+    "version_configs": {
-      "type": "array",
-      "items": {
-        "type": "string"
-      },
-      "description": "allowed proxy URIs"
-    },
-    "versions": {
       "type": "object",
       "patternProperties": {
         "^[a-zA-Z0-9._-]+$": {
           "type": "object",
           "properties": {
-            "image": {
+            "image_name": {
               "type": "string",
               "description": "image name"
             },
-            "command": {
+            "run_command": {
-              "type": "string",
+              "type": ["string", "null"],
               "description": "start command"
             }
           },
-          "required": ["image", "command"],
+          "required": ["image_name", "run_command"],
           "additionalProperties": false
         }
       },
@@ -51,6 +52,6 @@
       "description": "default backend parameters"
     }
   },
-  "required": ["name", "default_version", "health_check_path", "versions"],
+  "required": ["backend_name", "default_version", "version_configs"],
   "additionalProperties": false
 }

src/pages/backends/config/schema/update-builtin.json

@@ -0,0 +1,48 @@
+{
+  "type": "object",
+  "properties": {
+    "description": {
+      "type": ["string", "null"],
+      "description": "backend description"
+    },
+    "default_run_command": {
+      "type": ["string", "null"],
+      "description": "default start command"
+    },
+    "health_check_path": {
+      "type": ["string", "null"],
+      "description": "health check path"
+    },
+    "version_configs": {
+      "type": "object",
+      "patternProperties": {
+        "^[a-zA-Z0-9._-]+$": {
+          "type": "object",
+          "properties": {
+            "image_name": {
+              "type": "string",
+              "description": "image name"
+            },
+            "run_command": {
+              "type": ["string", "null"],
+              "description": "start command"
+            }
+          },
+          "required": ["image_name", "run_command"],
+          "additionalProperties": false
+        }
+      },
+      "additionalProperties": false,
+      "description": "multiple backend versions"
+    },
+    "default_backend_parameters": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      },
+      "description": "default backend parameters"
+    }
+  },
+  "required": ["version_configs"],
+  "additionalProperties": false
+}

src/pages/backends/config/schema/update-custom.json

@@ -0,0 +1,52 @@
+{
+  "type": "object",
+  "properties": {
+    "description": {
+      "type": ["string", "null"],
+      "description": "backend description"
+    },
+    "default_version": {
+      "type": "string",
+      "description": "default backend version"
+    },
+    "default_run_command": {
+      "type": ["string", "null"],
+      "description": "default start command"
+    },
+    "health_check_path": {
+      "type": ["string", "null"],
+      "description": "health check path"
+    },
+    "version_configs": {
+      "type": "object",
+      "patternProperties": {
+        "^[a-zA-Z0-9._-]+$": {
+          "type": "object",
+          "properties": {
+            "image_name": {
+              "type": "string",
+              "description": "image name"
+            },
+            "run_command": {
+              "type": ["string", "null"],
+              "description": "start command"
+            }
+          },
+          "required": ["image_name", "run_command"],
+          "additionalProperties": false
+        }
+      },
+      "additionalProperties": false,
+      "description": "multiple backend versions"
+    },
+    "default_backend_parameters": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      },
+      "description": "default backend parameters"
+    }
+  },
+  "required": ["default_version", "version_configs"],
+  "additionalProperties": false
+}

src/pages/backends/config/test.ts

@@ -1,54 +0,0 @@
-import lmDeployLogo from '@/assets/logo/lmdeploy.png';
-import SGLangLogo from '@/assets/logo/sglang.png';
-import vLLMLogo from '@/assets/logo/vllm.png';
-
-export default [
-  {
-    id: 1,
-    backend_name: 'SGlang',
-    icon: SGLangLogo,
-    version_configs: {
-      'v1.0': {
-        image_name: 'example/image:v1.0',
-        run_command: 'run.sh'
-      }
-    },
-    compatibility_type: 'template_string',
-    health_check_path: '/v1/models',
-    default_version: 'v1.0',
-    default_backend_param: ['--param1', '--param2'],
-    description: 'sglang description'
-  },
-  {
-    id: 2,
-    backend_name: 'vLLM',
-    icon: vLLMLogo,
-    version_configs: {
-      'v1.0': {
-        image_name: 'example/image:v1.0',
-        run_command: 'run.sh'
-      }
-    },
-    compatibility_type: 'template_string',
-    health_check_path: '/v1/models',
-    default_version: 'v1.0',
-    default_backend_param: ['--param1', '--param2'],
-    description: 'vllm description'
-  },
-  {
-    id: 3,
-    backend_name: 'LMDeploy',
-    icon: lmDeployLogo,
-    version_configs: {
-      'v1.0': {
-        image_name: 'example/image:v1.0',
-        run_command: 'run.sh'
-      }
-    },
-    compatibility_type: 'template_string',
-    health_check_path: '/v1/models',
-    default_version: 'v1.0',
-    default_backend_param: ['--param1', '--param2'],
-    description: 'LMDeploy description'
-  }
-];

src/pages/backends/config/types.ts

@@ -1,15 +1,15 @@
 export interface VersionConfigs {
-  [key: string]: {
+  image_name: string;
-    image_name: string;
+  run_command: string;
-    run_command: string;
+  is_default: boolean;
-  };
+  version_no?: string;
 }
 
 export interface FormData {
-  backend_name?: string;
+  backend_name: string;
   description?: string;
-  version_configs?: VersionConfigs;
+  version_configs?: VersionConfigs[];
-  compatibility_type?: string;
+  default_run_command?: string;
   health_check_path?: string;
   default_version?: string;
   default_backend_param?: string[];
@@ -18,7 +18,8 @@ export interface FormData {
 }
 
 export interface ListItem extends FormData {
-  id?: number;
+  id: number;
+  is_build_in?: boolean;
   created_at?: string;
   updated_at?: string;
 }

src/pages/backends/forms/basic.tsx

@@ -1,6 +1,5 @@
-import ListInput from '@/components/list-input';
 import SealInput from '@/components/seal-form/seal-input';
-import SealSelect from '@/components/seal-form/seal-select';
+import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import useAppUtils from '@/hooks/use-app-utils';
 import { useIntl } from '@umijs/max';
@@ -28,43 +27,23 @@ const BasicForm: React.FC<AddModalProps> = ({ action }) => {
         ]}
       >
         <SealInput.Input
+          trim
+          disabled={action === PageAction.EDIT}
           label={intl.formatMessage({ id: 'common.table.name' })}
           required
         ></SealInput.Input>
       </Form.Item>
-
       <Form.Item<FormData>
-        name="compatibility_type"
+        name="health_check_path"
-        rules={[
-          {
-            required: true,
-            message: getRuleMessage('select', 'template', false)
-          }
-        ]}
-      >
-        <SealSelect
-          label={'Compatibility Template'}
-          required
-          options={[
-            { label: 'Template 1', value: 'tensorflow' },
-            { label: 'Template 2', value: 'torchserve' }
-          ]}
-        ></SealSelect>
-      </Form.Item>
-
-      <Form.Item<FormData>
-        name="allowed_proxy_uris"
         rules={[{ required: false }]}
       >
-        <ListInput
+        <SealInput.Input trim label={'Health Check Path'}></SealInput.Input>
-          dataList={form.getFieldValue('allowed_proxy_uris') || []}
-          onChange={(data: string[]) => {
-            form.setFieldValue('allowed_proxy_uris', data);
-          }}
-          btnText={'Add Allowed Proxy URI'}
-          label={'Proxy URI'}
-        ></ListInput>
       </Form.Item>
+
+      <Form.Item name="default_run_command">
+        <SealInput.TextArea label="Default Execution Command"></SealInput.TextArea>
+      </Form.Item>
+
       <Form.Item<FormData> name="description" rules={[{ required: false }]}>
         <SealInput.TextArea
           label={intl.formatMessage({ id: 'common.table.description' })}

src/pages/backends/forms/index.tsx

@@ -1,6 +1,7 @@
 import { PageActionType } from '@/config/types';
 import CollapsePanel from '@/pages/_components/collapse-panel';
 import { Form } from 'antd';
+import _ from 'lodash';
 import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
 import { FormData, ListItem } from '../config/types';
 import BasicForm from './basic';
@@ -9,16 +10,34 @@ import VersionsForm from './versions-config';
 
 type AddModalProps = {
   action: PageActionType;
-  currentData?: ListItem; // Used when action is EDIT
+  currentData?: ListItem;
   onFinish: (values: FormData) => void;
   ref?: any;
 };
 const BackendForm: React.FC<AddModalProps> = forwardRef(
   ({ action, currentData, onFinish }, ref) => {
     const [form] = Form.useForm();
+    const [activeKey, setActiveKey] = React.useState<string[]>([]);
+
+    const onFinishFailed = (errorInfo: any) => {
+      const errorFields = errorInfo.errorFields || [];
+      if (errorFields.length > 0) {
+        const hasVersionsError = errorFields.some((field: any) =>
+          field.name.includes('version_configs')
+        );
+        if (hasVersionsError) {
+          setActiveKey([...new Set([...activeKey, 'version_configs'])]);
+        }
+      }
+    };
+
+    const handleOnCollapseChange = (keys: string | string[]) => {
+      setActiveKey(Array.isArray(keys) ? keys : [keys]);
+    };
 
     useEffect(() => {
       if (currentData) {
+        console.log('currentData:', currentData);
         form.setFieldsValue(currentData);
       }
     }, [currentData]);
@@ -48,15 +67,25 @@ const BackendForm: React.FC<AddModalProps> = forwardRef(
         onFinish={onFinish}
         preserve={false}
         scrollToFirstError={true}
-        initialValues={currentData}
+        initialValues={_.omit(currentData, ['version_configs'])}
+        onFinishFailed={onFinishFailed}
       >
         <BasicForm action={action}></BasicForm>
         <CollapsePanel
+          activeKey={activeKey}
+          accordion={false}
+          onChange={handleOnCollapseChange}
           items={[
             {
-              key: 'versions',
+              key: 'version_configs',
               label: 'Versions',
-              children: <VersionsForm action={action}></VersionsForm>
+              forceRender: true,
+              children: (
+                <VersionsForm
+                  action={action}
+                  currentData={currentData}
+                ></VersionsForm>
+              )
             },
             {
               key: 'parameters',

src/pages/backends/forms/versions-config.tsx

@@ -1,9 +1,10 @@
 import SealInput from '@/components/seal-form/seal-input';
 import { PageActionType } from '@/config/types';
 import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
-import { Button, Checkbox, Divider, Form } from 'antd';
+import { Button, Checkbox, Divider, Form, Radio } from 'antd';
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
+import { ListItem } from '../config/types';
 
 const Box = styled.div`
   display: grid;
@@ -12,36 +13,36 @@ const Box = styled.div`
   align-items: center;
 `;
 
-const ItemWrapper = styled.div`
+const ItemWrapper = styled.div``;
-  &:hover {
-    .divider {
-      border-top: 1px dashed var(--ant-color-primary) !important;
-    }
-  }
-`;
-
-const Label = styled.div`
-  color: var(--ant-color-text-tertiary);
-  font-size: var(--font-size-base);
-  margin-bottom: 10px;
-`;
 
 type AddModalProps = {
   action: PageActionType;
+  currentData?: ListItem;
 };
-const VersionsForm: React.FC<AddModalProps> = ({ action }) => {
+const VersionsForm: React.FC<AddModalProps> = ({ action, currentData }) => {
   const form = Form.useFormInstance();
   const versionList = [
     {
       version_no: '',
       image_name: '',
       run_command: '',
-      is_default: false
+      isBuiltin: false,
+      is_default: true
     }
   ];
 
+  const handleSetDefaultVersion = (e: any, index: number) => {
+    const versions = form.getFieldValue('version_configs') || [];
+    const updatedVersions = versions.map((version: any, idx: number) => ({
+      ...version,
+      is_default: idx === index
+    }));
+    form.setFieldValue('version_configs', updatedVersions);
+  };
+
   useEffect(() => {
     const versions = form.getFieldValue('version_configs') || [];
+    console.log('versions:', versions);
     if (Array.isArray(versions) && versions.length === 0) {
       form.setFieldValue('version_configs', versionList);
     }
@@ -64,12 +65,11 @@ const VersionsForm: React.FC<AddModalProps> = ({ action }) => {
                   <Form.Item
                     {...restField}
                     name={[name, 'version_no']}
-                    rules={[
+                    rules={[{ required: true, message: 'Version is required' }]}
-                      { required: true, message: 'Version No. is required' }
-                    ]}
                   >
                     <SealInput.Input
-                      label="Version No."
+                      trim
+                      label="Version"
                       required
                     ></SealInput.Input>
                   </Form.Item>
@@ -81,6 +81,7 @@ const VersionsForm: React.FC<AddModalProps> = ({ action }) => {
                     ]}
                   >
                     <SealInput.Input
+                      trim
                       label="Image Name"
                       required
                     ></SealInput.Input>
@@ -89,29 +90,42 @@ const VersionsForm: React.FC<AddModalProps> = ({ action }) => {
                 <Form.Item name={[name, 'run_command']} {...restField}>
                   <SealInput.TextArea label="Execution Command"></SealInput.TextArea>
                 </Form.Item>
+                <Form.Item name={[name, 'isBuiltin']} {...restField} hidden>
+                  <Checkbox></Checkbox>
+                </Form.Item>
                 <div className="flex justify-between items-center">
                   <span className="flex-center">
-                    <Form.Item
+                    {!currentData?.is_build_in && (
-                      {...restField}
+                      <Form.Item
-                      name={[name, 'is_default']}
+                        {...restField}
-                      valuePropName="checked"
+                        name={[name, 'is_default']}
-                      initialValue={false}
+                        valuePropName="checked"
-                      noStyle
+                        initialValue={false}
-                    >
+                        noStyle
-                      <Checkbox>Set as Default Version</Checkbox>
-                    </Form.Item>
-                  </span>
-                  <div className="flex-center gap-16">
-                    {fields.length > 1 && (
-                      <Button
-                        size="small"
-                        onClick={() => remove(name)}
-                        shape="circle"
                       >
-                        <MinusOutlined />
+                        <Radio
-                      </Button>
+                          onChange={(e: any) =>
+                            handleSetDefaultVersion(e, index)
+                          }
+                        >
+                          Set as Default Version
+                        </Radio>
+                      </Form.Item>
                     )}
-                  </div>
+                  </span>
+                  {
+                    <div className="flex-center gap-16">
+                      {fields.length > 1 && (
+                        <Button
+                          size="small"
+                          onClick={() => remove(name)}
+                          shape="circle"
+                        >
+                          <MinusOutlined />
+                        </Button>
+                      )}
+                    </div>
+                  }
                 </div>
                 <Divider
                   className="divider"

src/pages/backends/hooks/use-export-yaml.ts

@@ -0,0 +1,14 @@
+import { downloadFile } from '@/utils/download-stream';
+import { json2Yaml } from '../config';
+
+const useExportYAML = () => {
+  const exportYAML = (currentData?: any) => {
+    const yaml = json2Yaml(currentData || {});
+    const blob = new Blob([yaml], { type: 'text/yaml;charset=utf-8' });
+    downloadFile(blob, `${currentData.backend_name}.yml`);
+  };
+
+  return { exportYAML };
+};
+
+export default useExportYAML;

src/pages/backends/list.tsx

@@ -1,3 +1,4 @@
+import DeleteModal from '@/components/delete-modal';
 import { FilterBar } from '@/components/page-tools';
 import { PageActionType } from '@/config/types';
 import useTableFetch from '@/hooks/use-table-fetch';
@@ -5,14 +6,19 @@ import { PageContainer } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
 import { useState } from 'react';
 import {
+  createBackend,
+  createBackendFromYAML,
   deleteBackend,
   INFERENCE_BACKEND_API,
-  queryBackendsList
+  queryBackendsList,
+  updateBackend,
+  updateBackendFromYAML
 } from './apis';
 import AddModal from './components/add-modal';
 import BackendCardList from './components/backend-list';
-import dataList from './config/test';
+import { json2Yaml, yaml2Json } from './config';
 import { FormData, ListItem } from './config/types';
+import useExportYAML from './hooks/use-export-yaml';
 
 const BackendList = () => {
   const intl = useIntl();
@@ -35,21 +41,62 @@ const BackendList = () => {
     deleteAPI: deleteBackend,
     API: INFERENCE_BACKEND_API,
     watch: false,
-    contentForDelete: 'resources.modelfiles.modelfile'
+    contentForDelete: 'backends.title',
+    defaultQueryParams: {
+      perPage: 100
+    }
   });
+  const { exportYAML } = useExportYAML();
   const [openModalStatus, setOpenModalStatus] = useState<{
     open: boolean;
     action: PageActionType;
-    currentData?: Partial<FormData>;
+    currentData?: Partial<ListItem>;
   }>({ open: false, action: 'create' });
 
-  const handleOnSubmit = (values: FormData) => {
+  const handleOnSubmit = async (values: FormData) => {
-    console.log('yaml content:', values);
+    try {
-    setOpenModalStatus({
+      if (openModalStatus.action === 'create') {
-      open: false,
+        await createBackend({ data: values });
-      action: 'create',
+      } else {
-      currentData: undefined
+        await updateBackend(openModalStatus.currentData!.id!, {
-    });
+          data: {
+            ...values
+          }
+        });
+      }
+      setOpenModalStatus({
+        open: false,
+        action: 'create',
+        currentData: undefined
+      });
+      handleSearch();
+    } catch (error) {}
+  };
+
+  const handleOnSubmitYaml = async (values: { content: string }) => {
+    try {
+      if (openModalStatus.action === 'create') {
+        await createBackendFromYAML({ data: values });
+      } else {
+        const jsonData = yaml2Json(values.content);
+        const yamlContent = json2Yaml({
+          backend_name: openModalStatus.currentData?.backend_name,
+          default_version: openModalStatus.currentData?.default_version,
+          ...jsonData
+        });
+        await updateBackendFromYAML(openModalStatus.currentData!.id!, {
+          data: {
+            content: yamlContent
+          }
+        });
+      }
+      setOpenModalStatus({
+        open: false,
+        action: 'create',
+        currentData: undefined
+      });
+      handleSearch();
+    } catch (error) {}
   };
 
   const handleAddBackend = () => {
@@ -59,6 +106,25 @@ const BackendList = () => {
     });
   };
 
+  const handleOnSelect = (item: any) => {
+    console.log('selected item:', item);
+    if (item.action === 'edit') {
+      setOpenModalStatus({
+        open: true,
+        action: 'edit',
+        currentData: item.data
+      });
+    } else if (item.action === 'delete') {
+      handleDelete(item.data, {
+        name: item.data.backend_name
+      });
+    } else if (item.action === 'export') {
+      // Export YAML action
+      console.log('Export YAML for:', item.data);
+      exportYAML(item.data);
+    }
+  };
+
   return (
     <PageContainer
       ghost
@@ -88,16 +154,18 @@ const BackendList = () => {
       ></FilterBar>
 
       <BackendCardList
-        dataList={dataList}
+        dataList={dataSource.dataList}
         loading={dataSource.loading}
         activeId={false}
         isFirst={!dataSource.loadend}
+        onSelect={handleOnSelect}
       ></BackendCardList>
       <AddModal
         action={openModalStatus.action}
         onClose={() => setOpenModalStatus({ open: false, action: 'create' })}
         onSubmit={handleOnSubmit}
-        currentData={openModalStatus.currentData}
+        onSubmitYaml={handleOnSubmitYaml}
+        currentData={openModalStatus.currentData as ListItem}
         open={openModalStatus.open}
         title={
           openModalStatus.action === 'create'
@@ -105,6 +173,7 @@ const BackendList = () => {
             : 'Edit Backend'
         }
       ></AddModal>
+      <DeleteModal ref={modalRef}></DeleteModal>
     </PageContainer>
   );
 };

src/pages/llmodels/apis/index.ts

@@ -20,7 +20,7 @@ export const MODEL_INSTANCE_API = '/model-instances';
 
 export const MODEL_EVALUATIONS = '/model-evaluations';
 
-export const BACKEND_LIST_API = '/inference-backend/list';
+export const BACKEND_LIST_API = '/inference-backends/list';
 
 const setProxyUrl = (url: string) => {
   return `/proxy?url=${encodeURIComponent(url)}`;
@@ -400,52 +400,16 @@ export async function evaluationsModelSpec(
 }
 
 export async function queryBackendList() {
-  // return request<{
+  return request<{
-  //   items: {
+    items: {
-  //     backend_name: string;
+      backend_name: string;
-  //     backend_show_name: string;
+      backend_show_name: string;
-  //     from_config: boolean;
+      from_config: boolean;
-  //     default_version: string;
+      default_version: string;
-  //     default_backend_param: string[];
+      default_backend_param: string[];
-  //     versions: string[];
+      versions: string[];
-  //   }[];
+    }[];
-  // }>(BACKEND_LIST_API, {
+  }>(BACKEND_LIST_API, {
-  //   method: 'GET'
+    method: 'GET'
-  // });
+  });
-  return {
-    items: [
-      {
-        backend_name: 'vllm',
-        backend_show_name: 'vLLM',
-        from_config: false,
-        default_version: '0.10.1.1',
-        default_backend_param: null,
-        versions: ['0.10.1.1', '0.10.0', '0.9.2', '0.8.5', '0.8.3']
-      },
-      {
-        backend_name: 'ascend-mindie',
-        backend_show_name: 'Ascend MindIE',
-        from_config: false,
-        default_version: null,
-        default_backend_param: null,
-        versions: null
-      },
-      {
-        backend_name: 'custom',
-        backend_show_name: 'Custom',
-        from_config: false,
-        default_version: null,
-        default_backend_param: null,
-        versions: null
-      },
-      {
-        backend_name: 'test',
-        backend_show_name: null,
-        from_config: true,
-        default_version: 'v1',
-        default_backend_param: ['--host=0.0.0.0'],
-        versions: ['v1']
-      }
-    ]
-  };
 }

src/pages/llmodels/components/table-list.tsx

@@ -61,7 +61,7 @@ import useQueryBackends from '../hooks/use-query-backends';
 import APIAccessInfoModal from './api-access-info';
 import DeployModal from './deploy-modal';
 import Instances from './instances';
-import UpdateModel from './update-modal';
+import UpdateModelModal from './update-modal';
 import ViewLogsModal from './view-logs-modal';
 interface ModelsProps {
   handleSearch: (params?: any) => void;
@@ -685,7 +685,7 @@ const Models: React.FC<ModelsProps> = ({
           }}
         ></SealTable>
       </PageContainer>
-      <UpdateModel
+      <UpdateModelModal
         open={openAddModal}
         action={PageAction.EDIT}
         title={intl.formatMessage({ id: 'models.title.edit' })}
@@ -694,7 +694,7 @@ const Models: React.FC<ModelsProps> = ({
         onCancel={handleModalCancel}
         onOk={handleModalOk}
         backendOptions={backendOptions}
-      ></UpdateModel>
+      ></UpdateModelModal>
       <DeployModal
         open={openDeployModal.show}
         action={PageAction.CREATE}

src/pages/users/index.tsx

@@ -11,6 +11,7 @@ import {
   DeleteOutlined,
   EditOutlined,
   PlusOutlined,
+  SearchOutlined,
   SyncOutlined
 } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
@@ -195,6 +196,11 @@ const Users: React.FC = () => {
           left={
             <Space>
               <Input
+                prefix={
+                  <SearchOutlined
+                    style={{ color: 'var(--ant-color-text-placeholder)' }}
+                  ></SearchOutlined>
+                }
                 placeholder={intl.formatMessage({ id: 'common.filter.name' })}
                 style={{ width: 300 }}
                 allowClear

typings.d.ts

@@ -27,5 +27,6 @@ declare module 'node-vibrant';
 declare module 'lamejs';
 declare module 'file-saver';
 declare module 'tinycolor2';
+declare module 'js-yaml';
 
 declare const REACT_APP_ENV: 'test' | 'dev' | 'pre' | false;