fix: backend selection

src/pages/backends/forms/basic.tsx

@@ -1,3 +1,4 @@
+import LabelSelector from '@/components/label-selector';
 import ListInput from '@/components/list-input';
 import SealInput from '@/components/seal-form/seal-input';
 import SealTextArea from '@/components/seal-form/seal-textarea';
@@ -6,7 +7,8 @@ import { PageActionType } from '@/config/types';
 import useAppUtils from '@/hooks/use-app-utils';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
-import React from 'react';
+import React, { useEffect } from 'react';
+import { BackendSourceValueMap } from '../config';
 import { FormData, ListItem } from '../config/types';
 
 type AddModalProps = {
@@ -17,6 +19,17 @@ const BasicForm: React.FC<AddModalProps> = ({ action, currentData }) => {
   const form = Form.useFormInstance();
   const intl = useIntl();
   const { getRuleMessage } = useAppUtils();
+  const defaultEnvs = Form.useWatch('default_environment', form);
+
+  const handleEnviromentVarsChange = (labels: Record<string, any>) => {
+    form.setFieldValue('env', labels);
+  };
+
+  useEffect(() => {
+    if (action === PageAction.CREATE) {
+      form.setFieldValue('backend_source', BackendSourceValueMap.CUSTOM);
+    }
+  }, [action]);
 
   return (
     <>
@@ -37,6 +50,11 @@ const BasicForm: React.FC<AddModalProps> = ({ action, currentData }) => {
           required
         ></SealInput.Input>
       </Form.Item>
+      {action === PageAction.CREATE && (
+        <Form.Item<FormData> hidden name="backend_source">
+          <SealInput.Input></SealInput.Input>
+        </Form.Item>
+      )}
       {!currentData?.is_built_in && (
         <>
           <Form.Item<FormData>
@@ -86,6 +104,16 @@ const BasicForm: React.FC<AddModalProps> = ({ action, currentData }) => {
           })}
         ></ListInput>
       </Form.Item>
+      <Form.Item<FormData> name="default_environment">
+        <LabelSelector
+          label={intl.formatMessage({
+            id: 'backend.form.defaultEnvironment'
+          })}
+          labels={defaultEnvs}
+          btnText={intl.formatMessage({ id: 'common.button.vars' })}
+          onChange={handleEnviromentVarsChange}
+        ></LabelSelector>
+      </Form.Item>
 
       <Form.Item<FormData> name="description" rules={[{ required: false }]}>
         <SealInput.TextArea

src/pages/backends/forms/version-info.tsx

@@ -5,7 +5,13 @@ import { useIntl } from '@umijs/max';
 import { Empty } from 'antd';
 import { useState } from 'react';
 import styled from 'styled-components';
-import { frameworks, getGpuColor } from '../config';
+import {
+  BackendSourceLabelMap,
+  BackendSourceValueMap,
+  frameworks,
+  getGpuColor,
+  TagColorMap
+} from '../config';
 import { VersionListItem } from '../config/types';
 
 const ItemWrapper = styled.div`
@@ -76,19 +82,43 @@ interface VersionItemProps {
 
 export const VersionItem: React.FC<VersionItemProps> = ({ data }) => {
   const intl = useIntl();
+
+  const renderSource = () => {
+    console.log('data.is_built_in', data.is_built_in);
+    const source = data.is_built_in
+      ? BackendSourceLabelMap[BackendSourceValueMap.BUILTIN] || ''
+      : BackendSourceLabelMap[data.backend_source || ''] || '';
+    if (!source) {
+      return null;
+    }
+    return (
+      <ThemeTag
+        color={
+          TagColorMap[
+            data.is_built_in
+              ? BackendSourceValueMap.BUILTIN
+              : data.backend_source || ''
+          ]
+        }
+        className="font-400"
+        variant="outlined"
+        style={{
+          borderRadius: 'var(--ant-border-radius)',
+          margin: 0,
+          width: 'max-content'
+        }}
+      >
+        {intl.formatMessage({
+          id: source
+        })}
+      </ThemeTag>
+    );
+  };
   return (
     <ItemWrapper>
       <div className="title">
         <span>{data.version_no}</span>
-        {data.is_built_in && (
-          <ThemeTag
-            color="geekblue"
-            className="font-400"
-            style={{ marginRight: 0 }}
-          >
-            {intl.formatMessage({ id: 'backend.builtin' })}
-          </ThemeTag>
-        )}
+        {renderSource()}
         {!data.is_built_in && data.is_default && (
           <ThemeTag
             color="geekblue"

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

@@ -1,4 +1,5 @@
 import CollapsibleContainer from '@/components/collapse-container';
+import LabelSelector from '@/components/label-selector';
 import BaseSelect from '@/components/seal-form/base/select';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
@@ -75,7 +76,8 @@ const VersionsForm: React.FC<AddModalProps> = ({
       run_command: '',
       entrypoint: '',
       isBuiltin: false,
-      is_default: false
+      is_default: false,
+      environment: {}
     }
   ];
 
@@ -102,7 +104,8 @@ const VersionsForm: React.FC<AddModalProps> = ({
       run_command: '',
       entrypoint: '',
       isBuiltin: false,
-      is_default: false
+      is_default: false,
+      environment: {}
     };
     form.setFieldValue('version_configs', [...versions, newVersion]);
   };
@@ -136,6 +139,25 @@ const VersionsForm: React.FC<AddModalProps> = ({
     setDefaultVersion(value);
   };
 
+  const handleEnviromentVarsChange = (
+    envs: Record<string, any>,
+    name: number
+  ) => {
+    const versions = form.getFieldValue('version_configs') || [];
+    const updatedVersions = versions.map((version: any, idx: number) => {
+      if (idx === name) {
+        return {
+          ...version,
+          environment: {
+            ...envs
+          }
+        };
+      }
+      return version;
+    });
+    form.setFieldValue('version_configs', updatedVersions);
+  };
+
   useEffect(() => {
     const versions = form.getFieldValue('version_configs') || [];
 
@@ -227,6 +249,7 @@ const VersionsForm: React.FC<AddModalProps> = ({
             { add, remove }
           ) => {
             const versionConfigs = form.getFieldValue('version_configs');
+            console.log('versionConfigs', versionConfigs);
             return fields?.map(({ key, name }) => (
               <div
                 key={name}
@@ -356,10 +379,7 @@ const VersionsForm: React.FC<AddModalProps> = ({
                       })}
                     ></SealInput.TextArea>
                   </Form.Item>
-                  <Form.Item
-                    name={[name, 'run_command']}
-                    style={{ marginBottom: 0 }}
-                  >
+                  <Form.Item name={[name, 'run_command']}>
                     <SealTextArea
                       allowClear
                       alwaysFocus={true}
@@ -376,6 +396,18 @@ const VersionsForm: React.FC<AddModalProps> = ({
                       label={intl.formatMessage({ id: 'backend.runCommand' })}
                     ></SealTextArea>
                   </Form.Item>
+                  <Form.Item name={[name, 'environment']}>
+                    <LabelSelector
+                      label={intl.formatMessage({
+                        id: 'models.form.env'
+                      })}
+                      labels={versionConfigs.environment}
+                      btnText={intl.formatMessage({ id: 'common.button.vars' })}
+                      onChange={(envs) =>
+                        handleEnviromentVarsChange(envs, name)
+                      }
+                    ></LabelSelector>
+                  </Form.Item>
                 </CollapsibleContainer>
               </div>
             ));