chore: add worker notes

2025-11-04 17:19:20 +08:00
parent 23b7936924
commit e5733a7f6e
15 changed files with 318 additions and 137 deletions
@@ -1,4 +1,9 @@
-import { BulbOutlined } from '@ant-design/icons';
+import AlertInfoBlock from '@/components/alert-info/block';
+import {
+  AddWorkerDockerNotes,
+  GPUDriverMap
+} from '@/pages/resources/config/gpu-driver';
+import { BulbOutlined, ExclamationCircleFilled } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Alert } from 'antd';
 import React from 'react';
@@ -9,6 +14,26 @@ import CheckEnvCommand from './check-env-command';
 import RegisterClusterInner from './register-cluster-inner';
 import SupportedGPUs from './support-gpus';

+const StyledTag = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 8px;
+`;
+
+const NotesWrapper = styled.ol`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-weight: 400;
+  margin: 0 !important;
+  padding: 0 !important;
+  line-height: 1.2;
+  li {
+    margin-left: 12px !important;
+  }
+`;
+
 const Title = styled.div`
  font-size: 16px;
  font-weight: 600;
@@ -40,7 +65,6 @@ const Container = styled.div`
  .command-info {
    margin-top: 24px;
    margin-bottom: 8px;
-    color: var(--ant-color-text-secondary);
  }
 `;

@@ -63,16 +87,20 @@ const AddWorkerStep: React.FC<AddModalProps> = ({
  registrationInfo
 }) => {
  const intl = useIntl();
-  const [currentGPU, setCurrentGPU] = React.useState<string>('cuda');
-  React.useState<string>('cuda');
+  const [currentGPU, setCurrentGPU] = React.useState<string>(
+    GPUDriverMap.NVIDIA
+  );
+  React.useState<string>(GPUDriverMap.NVIDIA);
  const [workerCommand, setWorkerCommand] = React.useState<Record<string, any>>(
    {
      label: 'NVIDIA',
-      link: 'https://docs.gpustack.ai/latest/installation/installation-requirements/#nvidia-cuda'
+      link: 'https://docs.gpustack.ai/latest/installation/installation-requirements/#nvidia-cuda',
+      notes: AddWorkerDockerNotes[GPUDriverMap.NVIDIA]
    }
  );

  const handleSelectProvider = (value: string, item: any) => {
+    console.log('selected gpu driver:', value, item);
    setCurrentGPU(value);
    setWorkerCommand(item);
  };
@@ -108,22 +136,44 @@ const AddWorkerStep: React.FC<AddModalProps> = ({
      </Content>

      <div className="command-info">
-        1. {intl.formatMessage({ id: 'cluster.create.checkEnv.tips' })}
+        <StyledTag>1.</StyledTag>
+        {intl.formatMessage({ id: 'cluster.create.checkEnv.tips' })}
      </div>
      <CheckEnvCommand provider={provider} currentGPU={currentGPU} />

      {provider === ProviderValueMap.Kubernetes ? (
        <>
          <div className="command-info">
-            2. {intl.formatMessage({ id: 'clusters.create.register.tips' })}
+            <StyledTag>2.</StyledTag>
+            {intl.formatMessage({ id: 'clusters.create.register.tips' })}
          </div>
          <RegisterClusterInner registrationInfo={registrationInfo} />
        </>
      ) : (
        <>
          <div className="command-info">
-            2. {intl.formatMessage({ id: 'clusters.create.addCommand.tips' })}
+            <StyledTag>2.</StyledTag>
+            {intl.formatMessage({ id: 'clusters.create.addCommand.tips' })}
          </div>
+          <AlertInfoBlock
+            style={{ marginBottom: 16 }}
+            type="warning"
+            icon={<ExclamationCircleFilled />}
+            message={
+              workerCommand.notes?.length > 0 ? (
+                <NotesWrapper>
+                  {workerCommand.notes.map((note: string, index: number) => (
+                    <li
+                      key={index}
+                      dangerouslySetInnerHTML={{
+                        __html: intl.formatMessage({ id: note })
+                      }}
+                    ></li>
+                  ))}
+                </NotesWrapper>
+              ) : null
+            }
+          ></AlertInfoBlock>
          <AddWorkerCommand
            registrationInfo={registrationInfo}
            currentGPU={currentGPU}
@@ -5,10 +5,25 @@ import iluvatarWEBP from '@/assets/logo/Iluvatar.png';
 import metaxLogo from '@/assets/logo/metax.png';
 import moorePNG from '@/assets/logo/moore _threads.png';
 import IconFont from '@/components/icon-font';
-import { GPUDriverMap } from '@/pages/resources/config/gpu-driver';
+import {
+  AddWorkerDockerNotes,
+  GPUDriverMap
+} from '@/pages/resources/config/gpu-driver';
 import { useIntl } from '@umijs/max';
+import styled from 'styled-components';
 import ProviderCatalog from './provider-catalog';

+const Box = styled.div`
+  .template-card-wrapper {
+    .template-card-inner {
+      line-height: 1;
+      .template-card-content {
+        font-size: 13px;
+      }
+    }
+  }
+`;
+
 const ProviderImage = ({ src, showBg }: { src: string; showBg?: boolean }) => {
  return (
    <img
@@ -41,6 +56,7 @@ const SupportedHardware: React.FC<SupportedHardwareProps> = ({
      description: '',
      key: GPUDriverMap.NVIDIA,
      locale: false,
+      notes: AddWorkerDockerNotes[GPUDriverMap.NVIDIA],
      link: 'https://docs.gpustack.ai/latest/installation/installation-requirements/#nvidia-cuda',
      icon: <IconFont type="icon-nvidia2" style={{ fontSize: 32 }} />
    },
@@ -50,6 +66,7 @@ const SupportedHardware: React.FC<SupportedHardwareProps> = ({
      value: GPUDriverMap.AMD,
      key: GPUDriverMap.AMD,
      locale: false,
+      notes: AddWorkerDockerNotes[GPUDriverMap.AMD],
      link: 'https://docs.gpustack.ai/latest/installation/installation-requirements/#amd-rocm',
      icon: (
        <IconFont
@@ -64,61 +81,72 @@ const SupportedHardware: React.FC<SupportedHardwareProps> = ({
      value: GPUDriverMap.ASCEND,
      key: GPUDriverMap.ASCEND,
      locale: false,
+      notes: AddWorkerDockerNotes[GPUDriverMap.ASCEND],
      link: 'https://docs.gpustack.ai/latest/installation/installation-requirements/#ascend-cann',
      icon: <ProviderImage src={ascendLogo} showBg />
    },
    {
      label: intl.formatMessage({ id: 'vendor.hygon' }),
-      description: '',
+      description: 'common.tag.experimental',
      value: GPUDriverMap.HYGON,
      key: GPUDriverMap.HYGON,
      locale: false,
+      notes: AddWorkerDockerNotes[GPUDriverMap.HYGON],
      link: 'https://docs.gpustack.ai/latest/installation/installation-requirements/#hygon-dtk',
      icon: <ProviderImage src={hyponPNG} />
    },
    {
      label: intl.formatMessage({ id: 'vendor.moorthreads' }),
-      description: '',
+      description: 'common.tag.experimental',
      value: GPUDriverMap.MOORE_THREADS,
      key: GPUDriverMap.MOORE_THREADS,
      locale: false,
+      notes: AddWorkerDockerNotes[GPUDriverMap.MOORE_THREADS],
      link: 'https://docs.gpustack.ai/latest/installation/installation-requirements/#moore-threads-musa',
      icon: <ProviderImage src={moorePNG} />
    },
    {
      label: intl.formatMessage({ id: 'vendor.iluvatar' }),
-      description: '',
+      description: 'common.tag.experimental',
      value: GPUDriverMap.ILUVATAR,
      key: GPUDriverMap.ILUVATAR,
      locale: false,
+      notes: AddWorkerDockerNotes[GPUDriverMap.ILUVATAR],
      link: 'https://docs.gpustack.ai/latest/installation/installation-requirements/#iluvatar-corex',
      icon: <ProviderImage src={iluvatarWEBP} showBg />
    },
    {
      label: intl.formatMessage({ id: 'vendor.cambricon' }),
+      description: 'common.tag.experimental',
      value: GPUDriverMap.CAMBRICON,
      key: GPUDriverMap.CAMBRICON,
      locale: false,
+      notes: AddWorkerDockerNotes[GPUDriverMap.CAMBRICON],
      link: 'https://docs.gpustack.ai/latest/installation/installation-requirements/#cambricon-mlu',
      icon: <ProviderImage src={CambriconPNG} />
    },
    {
      label: intl.formatMessage({ id: 'vendor.metax' }),
+      description: 'common.tag.experimental',
      value: GPUDriverMap.METAX,
      key: GPUDriverMap.METAX,
      locale: false,
+      notes: AddWorkerDockerNotes[GPUDriverMap.METAX],
      icon: <ProviderImage src={metaxLogo} showBg />
    }
  ];
+
  return (
-    <ProviderCatalog
-      onSelect={onSelect}
-      height={60}
-      current={current}
-      dataList={supportedHardPlatforms}
-      clickable={clickable}
-      cols={4}
-    />
+    <Box>
+      <ProviderCatalog
+        onSelect={onSelect}
+        height={60}
+        current={current}
+        dataList={supportedHardPlatforms}
+        clickable={clickable}
+        cols={4}
+      />
+    </Box>
  );
 };