chore: built in versions

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

@@ -92,31 +92,44 @@ const AddModal: React.FC<AddModalProps> = (props) => {
     });
   };
 
-  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 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
+        })
+      );
+
+      const builtInVersions = Object.keys(
+        values.build_in_version_configs || {}
+      ).map((key) => ({
+        version_no: key,
+        image_name: values.build_in_version_configs[key].image_name,
+        run_command: values.build_in_version_configs[key].run_command,
+        is_default: key === values.default_version,
+        backend_list: values.build_in_version_configs[key].backend_list || [],
+        is_built_in: true
+      }));
+
+      return {
+        ...values,
+        version_configs: versionConfigs,
+        build_in_version_configs: builtInVersions
+      };
+    };
+
+    // built-in backend does not allow to edit default_version
+    const initYamlContent = (values: any) => {
+      if (currentData?.is_build_in) {
+        return json2Yaml(_.pick(values, backendFields));
+      }
+      return json2Yaml(_.pick(values, [...backendFields, 'default_version']));
+    };
+
+    if (action === PageAction.EDIT && open) {
       const yaml = initYamlContent(currentData || {});
       const formData = iniFormContent(currentData || {});
       setYamlContent(yaml);
@@ -124,7 +137,15 @@ const AddModal: React.FC<AddModalProps> = (props) => {
       formRef.current?.setFieldsValue?.(formData);
       editorRef.current?.setContent?.(yaml);
     }
-  }, [action, currentData]);
+
+    if (!open) {
+      formRef.current?.resetFields?.();
+      editorRef.current?.setContent?.('');
+      setFormContent({} as FormData);
+      setYamlContent('');
+      setActiveKey('form');
+    }
+  }, [action, currentData, open]);
 
   return (
     <GSDrawer
@@ -169,7 +190,6 @@ const AddModal: React.FC<AddModalProps> = (props) => {
         />
       </SegmentedHeader>
       <ColumnWrapper
-        style={{ flex: 1 }}
         maxHeight={'calc(100vh - 123px)'}
         footer={
           <ModalFooter

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

@@ -1,5 +1,6 @@
 import DropDownActions from '@/components/drop-down-actions';
 import IconFont from '@/components/icon-font';
+import ThemeTag from '@/components/tags-wrapper/theme-tag';
 import Card from '@/components/templates/card';
 import { DockerOutlined, InfoCircleOutlined } from '@ant-design/icons';
 import { Button, Tag } from 'antd';
@@ -10,7 +11,8 @@ import {
   backendActions,
   builtInBackendLogos,
   customColors,
-  customIcons
+  customIcons,
+  gpuColorMap
 } from '../config';
 import { ListItem } from '../config/types';
 
@@ -84,6 +86,12 @@ const Content = styled.div`
   }
 `;
 
+const BackendBox = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
 interface BackendCardProps {
   onClick?: (data: any) => void;
   onSelect?: (item: any) => void;
@@ -120,17 +128,65 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
     return backendActions;
   }, [data.is_build_in]);
 
+  const onClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+  };
+
+  const renderDrivers = () => {
+    if (data.is_build_in) {
+      const backendList = _.get(
+        data,
+        ['build_in_version_configs', data.default_version, 'backend_list'],
+        []
+      );
+
+      return (
+        <>
+          <span className="label">
+            <IconFont className="icon" type="icon-gpu1" />
+            <span>Supported Frameworks: </span>
+          </span>
+          <BackendBox>
+            {backendList.map((item: string) => {
+              return (
+                <ThemeTag
+                  key={item}
+                  style={{ marginRight: 0 }}
+                  color={gpuColorMap[item] || 'default'}
+                >
+                  {item}
+                </ThemeTag>
+              );
+            })}
+          </BackendBox>
+        </>
+      );
+    }
+    return (
+      <>
+        <span className="label">
+          <DockerOutlined className="icon" />
+          <span>Default Image: </span>
+        </span>
+        <span className="text">
+          {_.get(data, ['version_configs', data.default_version, 'image_name'])}
+        </span>
+      </>
+    );
+  };
+
   return (
     <Card
       onClick={handleClick}
-      clickable={true}
+      clickable={false}
+      hoverable={true}
       disabled={false}
       height={160}
       ghost
       header={
         <Header>
           <div className="title">{renderIcon()}</div>
-          <span>
+          <span onClick={onClick}>
             <DropDownActions
               menu={{
                 items: actions,
@@ -167,17 +223,7 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
             <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">
-            {_.get(data, [
-              'version_configs',
-              data.default_version,
-              'image_name'
-            ])}
-          </span>
+          {renderDrivers()}
         </div>
       </Content>
     </Card>