fix: custom backend and versions ux

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

@@ -53,7 +53,8 @@ const AddModal: React.FC<AddModalProps> = (props) => {
   const [yamlContent, setYamlContent] = useState<string>('');
   const [formContent, setFormContent] = useState<FormData>({} as FormData);
 
-  const genertateCurrentData = (values: ListItem): ListItem => {
+  // remove '-custom' suffix from version_no in currentData, when action is EDIT
+  const genertateCurrentVersionData = (values: ListItem): ListItem => {
     const data = { ...values };
     data.version_configs = Object.entries(data.version_configs || {}).reduce(
       (acc, [key, value]) => {
@@ -105,7 +106,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
 
   useEffect(() => {
     const iniFormContent = (data: ListItem) => {
-      const values: any = genertateCurrentData(data);
+      const values: any = genertateCurrentVersionData(data);
 
       // custom versions
       const versionConfigs = Object.keys(values.version_configs || {}).map(
@@ -133,6 +134,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
 
       return {
         ...values,
+        backend_name: values.backend_name.replace(/-custom$/, ''),
         version_configs: versionConfigs,
         built_in_version_configs: builtInVersions
       };
@@ -158,7 +160,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
 
     if (action === PageAction.EDIT && open) {
       const yaml = initYamlContent(currentData || {});
-      const formData = iniFormContent(currentData || {});
+      const formData = iniFormContent(currentData || ({} as ListItem));
       setYamlContent(yaml);
       setFormContent(formData);
       formRef.current?.setFieldsValue?.(formData);

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

@@ -104,13 +104,22 @@ const ImportYAML: React.FC<ImportYAMLProps> = forwardRef(
 
         const jsonData = yaml2Json(content);
         const exsistingVersions = Object.keys(jsonData.version_configs || {});
-        const invalidVersion = exsistingVersions.find(
-          (v) => !v.endsWith('-custom')
-        );
-        if (invalidVersion) {
+
+        if (
+          actionStatus.isBuiltIn &&
+          exsistingVersions.find((v) => !v.endsWith('-custom'))
+        ) {
           setError(intl.formatMessage({ id: 'backend.version.no.tips' }));
           return false;
         }
+        if (
+          !actionStatus.isBuiltIn &&
+          actionStatus.action === PageAction.CREATE &&
+          !jsonData.backend_name.endsWith('-custom')
+        ) {
+          setError(intl.formatMessage({ id: 'backend.backend.rules.custom' }));
+          return false;
+        }
 
         return content;
       } catch (error) {

src/pages/backends/config/index.ts

@@ -144,7 +144,7 @@ export const frameworks = [
 ];
 
 export const yamlTemplate = `# backend configuration template
-backend_name: my-backend
+backend_name: my-backend-custom
 description: this is my-backend
 default_version: v0.5.1
 health_check_path: /v1/models
@@ -152,11 +152,11 @@ default_backend_param:
   - --host
 default_run_command: myBackend serve {{model_path}} --port {{port}}
 version_configs:
-  v0.0.1-custom:
+  v0.0.1:
     image_name: lm/mybackend:latest
     run_command: myBackend serve {{model_path}} --port {{port}}
     custom_framework: cuda
-  v0.0.2-custom:
+  v0.0.2:
     image_name: lm/mybackend:test
     run_command:
     custom_framework:

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

@@ -3,6 +3,7 @@
   "properties": {
     "backend_name": {
       "type": "string",
+      "pattern": "^-custom$",
       "description": "backend name",
       "severity": "error"
     },

src/pages/backends/forms/basic.tsx

@@ -7,12 +7,13 @@ import useAppUtils from '@/hooks/use-app-utils';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import React from 'react';
-import { FormData } from '../config/types';
+import { FormData, ListItem } from '../config/types';
 
 type AddModalProps = {
   action: PageActionType;
+  currentData?: ListItem;
 };
-const BasicForm: React.FC<AddModalProps> = ({ action }) => {
+const BasicForm: React.FC<AddModalProps> = ({ action, currentData }) => {
   const form = Form.useFormInstance();
   const intl = useIntl();
   const { getRuleMessage } = useAppUtils();
@@ -30,6 +31,7 @@ const BasicForm: React.FC<AddModalProps> = ({ action }) => {
       >
         <SealInput.Input
           trim
+          addAfter={currentData?.is_built_in ? null : '-custom'}
           disabled={action === PageAction.EDIT}
           label={intl.formatMessage({ id: 'common.table.name' })}
           required

src/pages/backends/forms/index.tsx

@@ -34,12 +34,19 @@ const BackendForm: React.FC<AddModalProps> = forwardRef(
     };
 
     const handleOnFinish = (values: FormData) => {
-      const data = { ...values };
+      const data = {
+        ...values,
+        backend_name: currentData?.is_built_in
+          ? values.backend_name
+          : `${values.backend_name}-custom`
+      };
       data.version_configs = data.version_configs?.map((item) => {
         if (item.version_no) {
           return {
             ...item,
-            version_no: `${item.version_no}-custom`
+            version_no: currentData?.is_built_in
+              ? `${item.version_no}-custom`
+              : item.version_no
           };
         }
         return item;
@@ -82,7 +89,7 @@ const BackendForm: React.FC<AddModalProps> = forwardRef(
         initialValues={_.omit(currentData, ['version_configs'])}
         onFinishFailed={onFinishFailed}
       >
-        <BasicForm action={action}></BasicForm>
+        <BasicForm action={action} currentData={currentData}></BasicForm>
         <VersionsForm
           action={action}
           currentData={currentData}

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

@@ -283,7 +283,7 @@ const VersionsForm: React.FC<AddModalProps> = ({
                     >
                       <SealInput.Input
                         trim
-                        addAfter="-custom"
+                        addAfter={currentData?.is_built_in ? '-custom' : null}
                         onChange={handleVersionChange}
                         label={intl.formatMessage({ id: 'backend.version' })}
                         required