style: backend list styles

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

@@ -1,3 +1,4 @@
+import AutoTooltip from '@/components/auto-tooltip';
 import DropDownActions from '@/components/drop-down-actions';
 import IconFont from '@/components/icon-font';
 import ThemeTag from '@/components/tags-wrapper/theme-tag';
@@ -12,7 +13,7 @@ import {
   builtInBackendLogos,
   customColors,
   customIcons,
-  gpuColorMap
+  getGpuColor
 } from '../config';
 import { ListItem } from '../config/types';
 
@@ -125,7 +126,7 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
     if (data.is_build_in) {
       return backendActions.filter((item) => item.key !== 'delete');
     }
-    return backendActions;
+    return backendActions.filter((item) => item.key !== 'view_versions');
   }, [data.is_build_in]);
 
   const onClick = (e: React.MouseEvent) => {
@@ -146,19 +147,21 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
             <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>
+          <AutoTooltip ghost maxWidth={'100%'}>
+            <BackendBox>
+              {_.take(backendList, 3).map((item: string) => {
+                return (
+                  <ThemeTag
+                    key={item}
+                    style={{ marginRight: 0 }}
+                    color={getGpuColor(item)}
+                  >
+                    {item}
+                  </ThemeTag>
+                );
+              })}
+            </BackendBox>
+          </AutoTooltip>
         </>
       );
     }
@@ -169,7 +172,13 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
           <span>Default Image: </span>
         </span>
         <span className="text">
-          {_.get(data, ['version_configs', data.default_version, 'image_name'])}
+          <AutoTooltip ghost maxWidth={'100%'}>
+            {_.get(data, [
+              'version_configs',
+              data.default_version,
+              'image_name'
+            ])}
+          </AutoTooltip>
         </span>
       </>
     );
@@ -178,7 +187,7 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
   return (
     <Card
       onClick={handleClick}
-      clickable={false}
+      clickable={true}
       hoverable={true}
       disabled={false}
       height={160}

src/pages/backends/components/view-builtin-versions-modal.tsx

@@ -0,0 +1,76 @@
+import ScrollerModal from '@/components/scroller-modal';
+import { Form } from 'antd';
+import { useEffect } from 'react';
+import BuiltinVersions from '../forms/built-in-versions';
+
+interface ViewBuiltinVersionsModalProps {
+  open?: boolean;
+  currentData?: any;
+  onClose?: () => void;
+}
+
+const ViewBuiltinVersionsModal: React.FC<ViewBuiltinVersionsModalProps> = ({
+  open,
+  currentData,
+  onClose
+}) => {
+  const [form] = Form.useForm();
+
+  useEffect(() => {
+    if (open && currentData) {
+      const builtInVersions = Object.keys(
+        currentData.build_in_version_configs || {}
+      ).map((key) => ({
+        version_no: key,
+        image_name: currentData.build_in_version_configs[key].image_name,
+        run_command: currentData.build_in_version_configs[key].run_command,
+        is_default: key === currentData.default_version,
+        backend_list:
+          currentData.build_in_version_configs[key].backend_list || [],
+        is_built_in: true
+      }));
+      form.setFieldsValue({
+        build_in_version_configs: builtInVersions
+      });
+    }
+  }, [open, currentData, form]);
+
+  return (
+    <ScrollerModal
+      open={open}
+      style={{
+        top: '20%'
+      }}
+      title="View Built-in Versions"
+      width={550}
+      destroyOnHidden
+      closable={true}
+      maskClosable={false}
+      onOk={onClose}
+      onCancel={onClose}
+      styles={{
+        content: {
+          padding: '0 0 16px 0'
+        },
+        header: {
+          padding: 'var(--ant-modal-content-padding)',
+          paddingBottom: '0'
+        },
+        body: {
+          padding: '16px 24px 32px'
+        },
+        footer: {
+          padding: '16px 24px',
+          margin: '0'
+        }
+      }}
+      footer={null}
+    >
+      <Form form={form}>
+        <BuiltinVersions />
+      </Form>
+    </ScrollerModal>
+  );
+};
+
+export default ViewBuiltinVersionsModal;