chore: built in versions

src/components/list-input/index.tsx

@@ -6,7 +6,7 @@ import ListItem from './list-item';
 
 interface ListInputProps {
   dataList: string[];
-  label: React.ReactNode;
+  label?: React.ReactNode;
   description?: React.ReactNode;
   btnText?: string;
   options?: Global.HintOptions[];

src/components/templates/card.tsx

@@ -12,6 +12,7 @@ interface CardProps {
   footer?: React.ReactNode;
   icon?: React.ReactNode;
   active?: boolean;
+  hoverable?: boolean;
   disabled?: boolean;
   onClick?: () => void;
 }
@@ -33,6 +34,11 @@ const CardWrapper = styled.div.attrs({
     transition: background-color 0.2s ease;
   }
 
+  &.hoverable:hover:not(.disabled) {
+    background-color: var(--ant-color-fill-tertiary);
+    transition: background-color 0.2s ease;
+  }
+
   &.ghost {
     background-color: transparent;
   }
@@ -102,19 +108,26 @@ const Card: React.FC<CardProps> = (props) => {
     icon,
     active,
     disabled,
+    hoverable,
     onClick
   } = props;
 
+  const handleClick = () => {
+    if (disabled || !clickable) return;
+    onClick?.();
+  };
+
   return (
     <CardWrapper
       className={classNames(className, {
         clickable: clickable,
+        hoverable: hoverable,
         active: active,
         disabled: disabled,
         ghost: ghost
       })}
       style={{ height: height || '180px' }}
-      onClick={onClick}
+      onClick={handleClick}
     >
       {icon && <Icon>{icon}</Icon>}
       <Inner>

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">
+          {renderDrivers()}
-            <DockerOutlined className="icon" />
-            <span>Default Image: </span>
-          </span>
-          <span className="text">
-            {_.get(data, [
-              'version_configs',
-              data.default_version,
-              'image_name'
-            ])}
-          </span>
         </div>
       </Content>
     </Card>

src/pages/backends/config/index.ts

@@ -38,6 +38,13 @@ export const backendActions = [
     icon: icons.EditOutlined,
     locale: false
   },
+  {
+    label: 'View Built-in Versions',
+    value: 'view_versions',
+    key: 'view_versions',
+    icon: icons.Version,
+    locale: false
+  },
   {
     label: 'Export YAML',
     value: 'yaml',
@@ -85,6 +92,15 @@ export const customColors = [
   'geekblue'
 ];
 
+export const gpuColorMap: Record<string, string> = {
+  cann: 'orange',
+  cuda: 'green',
+  rocm: 'volcano',
+  dtk: 'magenta',
+  musa: 'cyan',
+  corex: 'purple'
+};
+
 export const customIcons = ['∑', '∏', '∫', '∂', '∞', 'θ', '∆', '∇'];
 
 export const backendFields = [

src/pages/backends/config/types.ts

@@ -2,7 +2,9 @@ export interface VersionConfigs {
   image_name: string;
   run_command: string;
   is_default: boolean;
+  backend_list?: string[];
   version_no?: string;
+  is_built_in?: boolean;
 }
 
 export interface FormData {
@@ -22,4 +24,5 @@ export interface ListItem extends FormData {
   is_build_in?: boolean;
   created_at?: string;
   updated_at?: string;
+  build_in_version_configs?: Record<string, VersionConfigs>;
 }

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>
+                <ActionWrapper>
-                  <Checkbox></Checkbox>
-                </Form.Item>
-                <div className="flex justify-between items-center">
                   <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">
-                    <div className="flex-center gap-16">
+                    {(fields.length > 1 || currentData?.is_build_in) && (
-                      {fields.length > 1 && (
+                      <Button
-                        <Button
+                        size="small"
-                          size="small"
+                        onClick={() => remove(name)}
-                          onClick={() => remove(name)}
+                        shape="circle"
-                          shape="circle"
+                      >
-                        >
+                        <MinusOutlined />
-                          <MinusOutlined />
+                      </Button>
-                        </Button>
+                    )}
-                      )}
+                  </div>
-                    </div>
+                </ActionWrapper>
-                  }
-                </div>
                 <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>
         );
       }}

src/pages/backends/list.tsx

@@ -4,6 +4,7 @@ import { PageActionType } from '@/config/types';
 import useTableFetch from '@/hooks/use-table-fetch';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
+import _ from 'lodash';
 import { useState } from 'react';
 import {
   createBackend,
@@ -53,6 +54,7 @@ const BackendList = () => {
     currentData?: Partial<ListItem>;
   }>({ open: false, action: 'create' });
 
+  // build_in_version_configs is read-only, but needs to be included when updating
   const handleOnSubmit = async (values: FormData) => {
     try {
       if (openModalStatus.action === 'create') {
@@ -60,7 +62,9 @@ const BackendList = () => {
       } else {
         await updateBackend(openModalStatus.currentData!.id!, {
           data: {
-            ...values
+            build_in_version_configs:
+              openModalStatus.currentData?.build_in_version_configs,
+            ..._.omit(values, ['build_in_version_configs'])
           }
         });
       }
@@ -73,6 +77,7 @@ const BackendList = () => {
     } catch (error) {}
   };
 
+  // build_in_version_configs needs to be included when updating from YAML, but not allowed to be changed
   const handleOnSubmitYaml = async (values: { content: string }) => {
     try {
       if (openModalStatus.action === 'create') {
@@ -82,6 +87,8 @@ const BackendList = () => {
         const yamlContent = json2Yaml({
           backend_name: openModalStatus.currentData?.backend_name,
           default_version: openModalStatus.currentData?.default_version,
+          build_in_version_configs:
+            openModalStatus.currentData?.build_in_version_configs,
           ...jsonData
         });
         await updateBackendFromYAML(openModalStatus.currentData!.id!, {

src/pages/cluster-management/components/cloud-options.tsx

@@ -22,18 +22,6 @@ const Title = styled.div`
   font-weight: 600;
 `;
 
-const ButtonWrapper = styled.span`
-  display: flex;
-  align-items: center;
-  height: 100%;
-  font-weight: 400;
-  cursor: pointer;
-  gap: 8px;
-  &:hover {
-    color: var(--ant-color-text-secondary);
-  }
-`;
-
 const CloudOptions: React.FC<{
   ref?: any;
 }> = forwardRef((props, ref) => {

src/pages/cluster-management/components/support-gpus.tsx

@@ -35,7 +35,7 @@ const SupportedHardware: React.FC<SupportedHardwareProps> = ({
 
   const supportedHardPlatforms = [
     {
-      label: intl.formatMessage({ id: 'vendor.nividia' }),
+      label: 'Nvidia',
       value: 'cuda',
       description: '',
       key: 'cuda',