fix: add worker ux when only DO cluster

src/components/collapse-container/index.tsx

@@ -39,7 +39,7 @@ const useStyles = createStyles(({ css, token }) => {
   return {
     title: css`
       font-weight: 400;
-      height: 56px;
+      min-height: 56px;
       font-size: var(--font-size-base);
       display: flex;
       justify-content: space-between;

src/locales/en-US/clusters.ts

@@ -62,7 +62,7 @@ export default {
     'If device detection fails, try removing <span class="bold-text">--env ROCM_SMI_LIB_PATH=/opt/hyhal/lib</span>.',
   'clusters.addworker.selectCluster': 'Select Cluster',
   'clusters.addworker.selectCluster.tips':
-    'For non-Docker clusters, please register clusters or manage worker pools from the Clusters page.',
+    'For <span class="bold-text">non-Docker</span> clusters, please register clusters or manage worker pools from the Clusters page.',
   'clusters.addworker.selectGPU': 'Select GPU Vendor',
   'clusters.addworker.checkEnv': 'Check Environment',
   'clusters.addworker.specifyArgs': 'Specify Arguments',
@@ -116,7 +116,7 @@ export default {
     'Specify the server URL accessible from your cloud provider.',
   'clusters.form.setDefault': 'Set as Default',
   'clusters.form.setDefault.tips': 'Default for deployment.',
-  'clusters.addworker.noClusters': 'No available clusters',
+  'clusters.addworker.noClusters': 'No available Docker clusters found',
   'clusters.create.steps.complete.tips': 'Cluster created successfully!',
   'clusters.create.steps.complete': 'Complete',
   'clusters.create.steps.configure': 'Configure',

src/locales/ja-JP/clusters.ts

@@ -62,7 +62,7 @@ export default {
     'If device detection fails, try removing <span class="bold-text">--env ROCM_SMI_LIB_PATH=/opt/hyhal/lib</span>.',
   'clusters.addworker.selectCluster': 'Select Cluster',
   'clusters.addworker.selectCluster.tips':
-    'For non-Docker clusters, please register clusters or manage worker pools from the Clusters page.',
+    'For <span class="bold-text">non-Docker</span> clusters, please register clusters or manage worker pools from the Clusters page.',
   'clusters.addworker.selectGPU': 'Select GPU Vendor',
   'clusters.addworker.checkEnv': 'Check Environment',
   'clusters.addworker.specifyArgs': 'Specify Arguments',
@@ -116,7 +116,7 @@ export default {
     'Specify the server URL accessible from your cloud provider.',
   'clusters.form.setDefault': 'Set as Default',
   'clusters.form.setDefault.tips': 'Default for deployment.',
-  'clusters.addworker.noClusters': 'No available clusters',
+  'clusters.addworker.noClusters': 'No available Docker clusters found',
   'clusters.create.steps.complete.tips': 'Cluster created successfully!',
   'clusters.create.steps.complete': 'Complete',
   'clusters.create.steps.configure': 'Configure',
@@ -180,7 +180,7 @@ export default {
 // 49. 'clusters.addworker.cambriconNotes': 'If the <span class="bold-text">/usr/local/neuware</span> directory does not exist, create a symbolic link to the Cambricon installation path: <span class="bold-text">ln -s /path/to/neuware /usr/local/neuware</span>.'
 // 50. 'clusters.addworker.hygonNotes-02': 'If device detection fails, try removing <span class="bold-text">--env ROCM_SMI_LIB_PATH=/opt/hyhal/lib</span>.',
 // 51.  'clusters.addworker.selectCluster': 'Select Cluster',
-// 52. 'clusters.addworker.selectCluster.tips': 'For non-Docker clusters, please register clusters or manage worker pools from the Clusters page.',
+// 52. 'clusters.addworker.selectCluster.tips': 'For <span class="bold-text">non-Docker</span> clusters, please register clusters or manage worker pools from the Clusters page.',
 // 53. 'clusters.addworker.selectGPU': 'Select GPU Vendor',
 // 54. 'clusters.addworker.checkEnv': 'Check Environment',
 // 55. 'clusters.addworker.specifyArgs': 'Specify Arguments',
@@ -219,7 +219,7 @@ export default {
 // 84. 'clusters.form.setDefault.tips': 'Default for deployment',
 // 85.  'clusters.addworker.enterWorkerAddress': 'Enter worker external address',
 // 86.  'clusters.addworker.enterWorkerAddress.error': 'Please enter the worker external address.',
-// 87. 'clusters.addworker.noClusters': 'No available clusters',
+// 87. 'clusters.addworker.noClusters': 'No available Docker clusters found',
 // 88. 'clusters.create.steps.complete.tips': 'Cluster created successfully!',
 // 89. 'clusters.create.steps.complete': 'Complete',
 // 90. 'clusters.create.dockerTips1': 'Next, add worker to this cluster.',

src/locales/ru-RU/clusters.ts

@@ -62,7 +62,7 @@ export default {
     'Если не удается обнаружить устройства, попробуйте удалить <span class="bold-text">--env ROCM_SMI_LIB_PATH=/opt/hyhal/lib</span>.',
   'clusters.addworker.selectCluster': 'Выбрать кластер',
   'clusters.addworker.selectCluster.tips':
-    'Для не-Docker кластеров, пожалуйста, регистрируйте кластеры или управляйте пулами воркеров на странице Кластеры.',
+    'Для <span class="bold-text">не-Docker</span> кластеров, пожалуйста, регистрируйте кластеры или управляйте пулами воркеров на странице Кластеры.',
   'clusters.addworker.selectGPU': 'Выбрать производителя GPU',
   'clusters.addworker.checkEnv': 'Проверить окружение',
   'clusters.addworker.specifyArgs': 'Указать аргументы',
@@ -117,7 +117,7 @@ export default {
   'clusters.form.setDefault': 'Установить по умолчанию',
   'clusters.form.setDefault.tips':
     'Использовать по умолчанию для развертывания.',
-  'clusters.addworker.noClusters': 'No available clusters',
+  'clusters.addworker.noClusters': 'No available Docker clusters found',
   'clusters.create.steps.complete.tips': 'Cluster created successfully!',
   'clusters.create.steps.complete': 'Complete',
   'clusters.create.steps.configure': 'Configure',
@@ -131,7 +131,7 @@ export default {
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
 // 1. 'clusters.addworker.hygonNotes': `If <span class="bold-text">/opt/hyhal</span> or <span class="bold-text">/opt/dtk</span> does not exist, create symbolic links pointing to the corresponding Hygon installation paths, for example: <span class="desc-fill">ln -s /path/to/hyhal /opt/hyhal</span> <span class="desc-fill">ln -s /path/to/dtk /opt/dtk</span>.`,
-// 2. 'clusters.addworker.noClusters': 'No available clusters',
+// 2. 'clusters.addworker.noClusters': 'No available Docker clusters found',
 // 3. 'clusters.create.steps.complete.tips': 'Cluster created successfully!',
 // 4. 'clusters.create.steps.complete': 'Complete',
 // 5. 'clusters.create.dockerTips1': 'Next, add worker to this cluster.',

src/locales/zh-CN/clusters.ts

@@ -62,7 +62,7 @@ export default {
     '如果未能检测到设备，请尝试移除 <span class="bold-text">--env ROCM_SMI_LIB_PATH=/opt/hyhal/lib</span>。',
   'clusters.addworker.selectCluster': '选择集群',
   'clusters.addworker.selectCluster.tips':
-    '非 Docker 集群请前往集群页面注册集群或管理节点池。',
+    '<span class="bold-text">非 Docker</span> 集群请前往集群页面注册集群或管理节点池。',
   'clusters.addworker.selectGPU': '选择 GPU 厂商',
   'clusters.addworker.checkEnv': '检查环境',
   'clusters.addworker.specifyArgs': '指定参数',
@@ -113,7 +113,7 @@ export default {
   'clusters.form.serverUrl.tips': '指定可从您的云服务提供商访问的服务器地址。',
   'clusters.form.setDefault': '设为默认',
   'clusters.form.setDefault.tips': '部署时的默认集群。',
-  'clusters.addworker.noClusters': '无可用集群',
+  'clusters.addworker.noClusters': '无可用的 Docker 集群',
   'clusters.create.steps.complete.tips': '集群创建成功！',
   'clusters.create.steps.complete': '完成',
   'clusters.create.steps.configure': '配置',

src/pages/cluster-management/cluster-create.tsx

@@ -236,8 +236,12 @@ const ClusterCreate: React.FC<{
 
   // add worker or cluster registration step
   const handleAddWorker = () => {
+    const currentTitle =
+      extraData.provider === ProviderValueMap.Docker
+        ? 'resources.button.create'
+        : 'clusters.button.register';
     setIsAddWorkerStep(true);
-    setCurrentTitle?.(intl.formatMessage({ id: 'resources.button.create' }));
+    setCurrentTitle?.(intl.formatMessage({ id: currentTitle }));
     onNext();
   };
 

src/pages/cluster-management/cluster-modal.tsx

@@ -32,7 +32,7 @@ const ClusterModal: React.FC<ClusterModalProps> = ({
         body: {
           paddingBlock: 0
         },
-        wrapper: { width: 700 }
+        wrapper: { width: 710 }
       }}
       footer={false}
     >

src/pages/cluster-management/components/add-cluster.tsx

@@ -52,7 +52,7 @@ const AddCluster: React.FC<AddModalProps> = ({
       open={open}
       onCancel={handleCancel}
       onSubmit={handleSubmit}
-      width={700}
+      width={710}
     >
       <ClusterForm
         ref={form}

src/pages/cluster-management/components/add-worker/add-worker-step.tsx

@@ -1,6 +1,4 @@
-import AlertBlockInfo from '@/components/alert-info/block';
 import useAddWorkerMessage from '@/pages/cluster-management/hooks/use-add-worker-message';
-import { ExclamationCircleFilled } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Alert } from 'antd';
 import React, { useMemo } from 'react';
@@ -135,18 +133,6 @@ const AddWorkerSteps: React.FC<AddWorkerProps> = (props) => {
         {stepList.includes(StepNamesMap.SelectCluster) && (
           <SelectCluster disabled={disabled}></SelectCluster>
         )}
-        {stepList.includes(StepNamesMap.SelectCluster) &&
-          !clusterList?.length && (
-            <AlertBlockInfo
-              maxHeight={200}
-              style={{ marginBottom: 8 }}
-              type="warning"
-              icon={<ExclamationCircleFilled />}
-              message={intl.formatMessage({
-                id: 'resources.worker.noCluster.tips'
-              })}
-            ></AlertBlockInfo>
-          )}
         {/* render the steps only when there is at least one cluster available or cluster selection is not required */}
         {((clusterList && clusterList.length > 0) ||
           !stepList.includes(StepNamesMap.SelectCluster)) && (

src/pages/cluster-management/components/add-worker/index.tsx

@@ -131,7 +131,7 @@ const AddWorker: React.FC<AddWorkerProps> = (props) => {
         body: {
           paddingBlock: 0
         },
-        wrapper: { width: 700 }
+        wrapper: { width: 710 }
       }}
       footer={false}
     >

src/pages/cluster-management/components/add-worker/select-cluster.tsx

@@ -50,11 +50,24 @@ const SelectCluster: React.FC<AddWorkerStepProps> = ({ disabled }) => {
             {stepIndex}.{' '}
             {intl.formatMessage({ id: 'clusters.addworker.selectCluster' })}
           </Title>
-          <span style={{ color: 'var(--ant-color-text-tertiary)' }}>
+          <Typography.Paragraph
-            {intl.formatMessage({
+            type="secondary"
-              id: 'clusters.addworker.selectCluster.tips'
+            style={{
-            })}
+              marginBottom: 0,
-          </span>
+              whiteSpace: 'pre-wrap',
+              lineHeight: 1.2,
+              paddingBlock: 4
+            }}
+            ellipsis={{ rows: 2 }}
+          >
+            <span
+              dangerouslySetInnerHTML={{
+                __html: intl.formatMessage({
+                  id: 'clusters.addworker.selectCluster.tips'
+                })
+              }}
+            ></span>
+          </Typography.Paragraph>
         </div>
       }
     >

src/pages/cluster-management/hooks/use-add-worker.tsx

@@ -69,15 +69,29 @@ const useAddWorker = (props: {
             item.provider !== ProviderValueMap.Docker
         };
       })
-      .filter((item) => item.state === ClusterStatusValueMap.Ready);
+      .filter(
+        (item) =>
+          item.state === ClusterStatusValueMap.Ready &&
+          item.provider === ProviderValueMap.Docker
+      );
   }, [clusterList]);
 
+  /**
+   * Add Worker only for Docker clusters,  for k8s and digitalocean do something in the cluster list page.
+   * @param clusterList
+   * @param includeDigitalOcean
+   * @returns
+   */
   const checkDefaultCluster = (
-    clusterList: Global.BaseOption<number, ClusterListItem>[]
+    clusterList: Global.BaseOption<number, ClusterListItem>[],
+    includeDigitalOcean?: boolean
   ) => {
     // select default and ready cluster first, digitalocean no READY state
     let currentData = clusterList.find(
-      (item) => item.is_default && item.state === ClusterStatusValueMap.Ready
+      (item) =>
+        item.is_default &&
+        item.state === ClusterStatusValueMap.Ready &&
+        item.provider === ProviderValueMap.Docker
     );
 
     if (!currentData) {