chore: built in versions

src/pages/backends/forms/built-in-versions.tsx

@@ -0,0 +1,114 @@
+import ThemeTag from '@/components/tags-wrapper/theme-tag';
+import { Divider, Form } from 'antd';
+import styled from 'styled-components';
+import { gpuColorMap } from '../config';
+
+const ItemWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  .title {
+    width: 100%;
+    justify-content: space-between;
+    display: flex;
+    align-items: center;
+    font-weight: 600;
+    margin-bottom: 8px;
+  }
+`;
+
+const RowWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  .label {
+    color: var(--ant-color-text-tertiary);
+  }
+  .drivers {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+`;
+
+interface VersionItemProps {
+  data: {
+    backend_list: string[];
+    version_no: string;
+    image_name: string;
+    run_command: string;
+    isBuiltin: boolean;
+    is_default: boolean;
+  };
+}
+
+const VersionItem: React.FC<VersionItemProps> = ({ data }) => {
+  return (
+    <ItemWrapper>
+      <div className="title">
+        <span>{data.version_no}</span>
+        {data.is_default && (
+          <ThemeTag color="geekblue" className="font-400">
+            Default
+          </ThemeTag>
+        )}
+      </div>
+      <RowWrapper>
+        <span className="text drivers">
+          {data.backend_list?.map((item) => {
+            return (
+              <ThemeTag
+                key={item}
+                style={{ marginRight: 0 }}
+                color={gpuColorMap[item] || 'default'}
+              >
+                {item}
+              </ThemeTag>
+            );
+          })}
+        </span>
+      </RowWrapper>
+    </ItemWrapper>
+  );
+};
+
+const BuiltInVersionsForm = () => {
+  const form = Form.useFormInstance();
+  const versionList = Form.useWatch('build_in_version_configs', form) || [];
+  return (
+    <Form.List name="build_in_version_configs">
+      {() => {
+        return (
+          <div
+            style={{
+              border: '1px solid var(--ant-color-border)',
+              borderRadius: 'var(--border-radius-base)',
+              padding: '14px'
+            }}
+          >
+            {versionList.map((version: any, index: number) => {
+              return (
+                <>
+                  <VersionItem key={index} data={version} />
+                  {index < versionList.length - 1 && (
+                    <Divider
+                      className="divider"
+                      style={{
+                        marginBlock: 16,
+                        borderTop: '1px  dashed var(--ant-color-border)'
+                      }}
+                    />
+                  )}
+                </>
+              );
+            })}
+          </div>
+        );
+      }}
+    </Form.List>
+  );
+};
+
+export default BuiltInVersionsForm;

src/pages/backends/forms/index.tsx

@@ -5,6 +5,7 @@ import _ from 'lodash';
 import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
 import { FormData, ListItem } from '../config/types';
 import BasicForm from './basic';
+import BuiltInVersionsForm from './built-in-versions';
 import ParametersForm from './parameters';
 import VersionsForm from './versions-config';
 
@@ -76,9 +77,19 @@ const BackendForm: React.FC<AddModalProps> = forwardRef(
           accordion={false}
           onChange={handleOnCollapseChange}
           items={[
+            ...(currentData?.is_build_in
+              ? [
+                  {
+                    key: 'builtin_version_configs',
+                    label: 'Built-in Versions',
+                    forceRender: true,
+                    children: <BuiltInVersionsForm></BuiltInVersionsForm>
+                  }
+                ]
+              : []),
             {
               key: 'version_configs',
-              label: 'Versions',
+              label: 'Custom Versions',
               forceRender: true,
               children: (
                 <VersionsForm

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

@@ -1,7 +1,7 @@
 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, Radio } from 'antd';
+import { Button, Divider, Form, Radio } from 'antd';
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import { ListItem } from '../config/types';
@@ -13,6 +13,13 @@ const Box = styled.div`
   align-items: center;
 `;
 
+const ActionWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 24px;
+`;
+
 const ItemWrapper = styled.div``;
 
 type AddModalProps = {
@@ -51,6 +58,7 @@ const VersionsForm: React.FC<AddModalProps> = ({ action, currentData }) => {
   return (
     <Form.List name="version_configs">
       {(fields, { add, remove }) => {
+        console.log('fields:', fields);
         return (
           <div
             style={{
@@ -87,13 +95,10 @@ const VersionsForm: React.FC<AddModalProps> = ({ action, currentData }) => {
                     ></SealInput.Input>
                   </Form.Item>
                 </Box>
-                <Form.Item name={[name, 'run_command']} {...restField}>
+                <Form.Item name={[name, 'run_command']} {...restField} noStyle>
                   <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">
+                <ActionWrapper>
                   <span className="flex-center">
                     {!currentData?.is_build_in && (
                       <Form.Item
@@ -113,36 +118,32 @@ const VersionsForm: React.FC<AddModalProps> = ({ action, currentData }) => {
                       </Form.Item>
                     )}
                   </span>
-                  {
-                    <div className="flex-center gap-16">
-                      {fields.length > 1 && (
-                        <Button
-                          size="small"
-                          onClick={() => remove(name)}
-                          shape="circle"
-                        >
-                          <MinusOutlined />
-                        </Button>
-                      )}
-                    </div>
-                  }
-                </div>
+                  <div className="flex-center gap-16">
+                    {(fields.length > 1 || currentData?.is_build_in) && (
+                      <Button
+                        size="small"
+                        onClick={() => remove(name)}
+                        shape="circle"
+                      >
+                        <MinusOutlined />
+                      </Button>
+                    )}
+                  </div>
+                </ActionWrapper>
                 <Divider
                   className="divider"
                   style={{ borderTop: '1px  dashed var(--ant-color-border)' }}
                 />
-                {index === fields.length - 1 && (
-                  <Button
-                    onClick={() => add()}
-                    block
-                    variant="filled"
-                    color="default"
-                  >
-                    <PlusOutlined /> Add Version
-                  </Button>
-                )}
               </ItemWrapper>
             ))}
+            <Button
+              onClick={() => add()}
+              block
+              variant="filled"
+              color="default"
+            >
+              <PlusOutlined /> Add Version
+            </Button>
           </div>
         );
       }}