style: large modal height responsive

src/components/scroller-modal/index.tsx

@@ -4,14 +4,16 @@ import { Modal, type ModalProps } from 'antd';
 import React from 'react';
 import styled from 'styled-components';
 
-const Wrapper = styled.div<{ $maxHeight?: number }>`
+const Wrapper = styled.div<{ $maxHeight?: number | string }>`
   max-height: ${({ $maxHeight }) =>
     typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};
   overflow-y: auto;
   width: 100%;
 `;
 
-const ScrollerModal = (props: ModalProps & { maxContentHeight?: number }) => {
+const ScrollerModal = (
+  props: ModalProps & { maxContentHeight?: number | string }
+) => {
   const scroller = React.useRef<any>(null);
   const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
   const { initialize, destroyInstance } = useOverlayScroller();

src/locales/en-US/clusters.ts

@@ -39,11 +39,11 @@ export default {
   'clusters.workerpool.batchSize.desc':
     'Number of workers created simultaneously in the Worker pool',
   'clusters.create.addworker.tips':
-    ' Please make sure the prerequisites for <a href={link} target="_blank">{label}</a> are met before executing the following command.',
+    'Please make sure the <a href={link} target="_blank">prerequisites</a> for {label} are met before executing the following command.',
   'clusters.create.addCommand.tips':
     'On the Worker that needs to be added, run the following command to join it to the cluster.',
   'clusters.create.register.tips':
-    ' On the Kubernetes cluster that needs to be added, run the following command to join its nodes to the cluster.',
+    'On the Kubernetes cluster that needs to be added, run the following command to join its nodes to the cluster.',
   'cluster.create.checkEnv.tips':
     'Use the following command to check if the environment is ready',
   'cluster.provider.comingsoon': 'Coming soon',

src/locales/ja-JP/clusters.ts

@@ -39,7 +39,7 @@ export default {
   'clusters.workerpool.batchSize.desc':
     'Number of workers created simultaneously in the Worker pool',
   'clusters.create.addworker.tips':
-    ' Please make sure the prerequisites for <a href={link} target="_blank">{label}</a> are met before executing the following command.',
+    'Please make sure the <a href={link} target="_blank">prerequisites</a> for {label} are met before executing the following command.',
   'clusters.create.addCommand.tips':
     'On the Worker that needs to be added, run the following command to join it to the cluster.',
   'cluster.create.checkEnv.tips':
@@ -100,7 +100,7 @@ export default {
 // 36. 'clusters.create.noInstanceTypes': 'No instance types available',
 // 37. 'clusters.create.noRegions': 'No regions available',
 // 38. 'clusters.workerpool.batchSize.desc': 'Number of workers created simultaneously in the Worker pool',
-// 39. 'clusters.create.addworker.tips': ' Please make sure the prerequisites for <a href={link} target="_blank">{label}</a> are met before executing the following command.',
+// 39. 'clusters.create.addworker.tips': 'Please make sure the <a href={link} target="_blank">prerequisites</a> for {label} are met before executing the following command.',
 // 40. 'clusters.create.addCommand.tips': 'On the Worker that needs to be added, run the following command to join it to the cluster.',
 // 41. 'cluster.create.checkEnv.tips': 'Use the following command to check if the environment is ready',
 // 42. 'clusters.create.register.tips': ' On the Kubernetes cluster that needs to be added, run the following command to join its nodes to the cluster.',

src/locales/ru-RU/clusters.ts

@@ -39,7 +39,7 @@ export default {
   'clusters.workerpool.batchSize.desc':
     'Количество воркеров, создаваемых одновременно в пуле воркеров',
   'clusters.create.addworker.tips':
-    'Перед выполнением следующей команды убедитесь, что выполнены предварительные требования для <a href={link} target="_blank">{label}</a>.',
+    'Пожалуйста, убедитесь, что выполнены <a href={link} target="_blank">предварительные условия</a> для {label} перед выполнением следующей команды.',
   'clusters.create.addCommand.tips':
     'На воркере, который необходимо добавить, выполните следующую команду, чтобы присоединить его к кластеру.',
   'cluster.create.checkEnv.tips':
@@ -47,12 +47,18 @@ export default {
   'clusters.create.register.tips':
     'На Kubernetes кластере, который необходимо добавить, выполните следующую команду, чтобы присоединить его узлы к кластеру.',
   'cluster.provider.comingsoon': 'Скоро будет',
-  'clusters.addworker.nvidiaNotes-01': 'Если рабочий узел имеет несколько исходящих IP-адресов, укажите <span class="bold-text">WORKER_IP</span>, чтобы гарантировать использование узлом нужного IP. Перепроверьте с помощью команды <span class="bold-text">hostname -I | xargs -n1</span>.',
-  'clusters.addworker.nvidiaNotes-02': 'Если директория с моделью уже существует на рабочем узле, добавьте директиву <span class="bold-text">--volume</span> для её монтирования.',
-  'clusters.addworker.hygonNotes': 'Если директория <span class="bold-text">/opt/hyhal</span> не существует, создайте символическую ссылку на путь установки Hygon: <span class="bold-text">/opt/hyhal</span>. Аналогично для директории <span class="bold-text">/opt/dtk</span>.',
-  'clusters.addworker.corexNotes': 'Если директория <span class="bold-text">/lib/modules</span> не существует, создайте символическую ссылку на путь установки Iluvatar: <span class="bold-text">ln -s /path/to/corex /lib/modules</span>. Аналогично для директории <span class="bold-text">/usr/local/corex</span>.',
-  'clusters.addworker.metaxNotes': 'Если директория <span class="bold-text">/opt/mxdriver</span> не существует, создайте символическую ссылку на путь установки MetaX: <span class="bold-text">ln -s /path/to/metax /opt/mxdriver</span>. Аналогично для директории <span class="bold-text">/opt/maca</span>.',
-  'clusters.addworker.cambriconNotes': 'Если директория <span class="bold-text">/usr/local/neuware</span> не существует, создайте символическую ссылку на путь установки Cambricon: <span class="bold-text">ln -s /path/to/neuware /usr/local/neuware</span>.'
+  'clusters.addworker.nvidiaNotes-01':
+    'Если рабочий узел имеет несколько исходящих IP-адресов, укажите <span class="bold-text">WORKER_IP</span>, чтобы гарантировать использование узлом нужного IP. Перепроверьте с помощью команды <span class="bold-text">hostname -I | xargs -n1</span>.',
+  'clusters.addworker.nvidiaNotes-02':
+    'Если директория с моделью уже существует на рабочем узле, добавьте директиву <span class="bold-text">--volume</span> для её монтирования.',
+  'clusters.addworker.hygonNotes':
+    'Если директория <span class="bold-text">/opt/hyhal</span> не существует, создайте символическую ссылку на путь установки Hygon: <span class="bold-text">/opt/hyhal</span>. Аналогично для директории <span class="bold-text">/opt/dtk</span>.',
+  'clusters.addworker.corexNotes':
+    'Если директория <span class="bold-text">/lib/modules</span> не существует, создайте символическую ссылку на путь установки Iluvatar: <span class="bold-text">ln -s /path/to/corex /lib/modules</span>. Аналогично для директории <span class="bold-text">/usr/local/corex</span>.',
+  'clusters.addworker.metaxNotes':
+    'Если директория <span class="bold-text">/opt/mxdriver</span> не существует, создайте символическую ссылку на путь установки MetaX: <span class="bold-text">ln -s /path/to/metax /opt/mxdriver</span>. Аналогично для директории <span class="bold-text">/opt/maca</span>.',
+  'clusters.addworker.cambriconNotes':
+    'Если директория <span class="bold-text">/usr/local/neuware</span> не существует, создайте символическую ссылку на путь установки Cambricon: <span class="bold-text">ln -s /path/to/neuware /usr/local/neuware</span>.'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========

src/locales/zh-CN/clusters.ts

@@ -38,11 +38,11 @@ export default {
   'clusters.create.noRegions': '无可用的区域',
   'clusters.workerpool.batchSize.desc': '节点池中同时创建的节点数量',
   'clusters.create.addworker.tips':
-    '在执行以下命令之前，请确保已满足 <a href={link} target="_blank">{label}</a> 的先决条件。',
+    '在执行以下命令之前，请确保已满足 {label} 的<a href={link} target="_blank">先决条件</a>。',
   'clusters.create.addCommand.tips':
-    ' 在需要添加的节点上运行以下命令，将其加入到集群中',
+    '在需要添加的节点上运行以下命令，将其加入到集群中',
   'clusters.create.register.tips':
-    ' 在需要添加的 Kubernetes 集群上运行以下命令，将其中的节点加入到集群中',
+    '在需要添加的 Kubernetes 集群上运行以下命令，将其中的节点加入到集群中',
   'cluster.create.checkEnv.tips': '使用以下命令检查环境是否准备妥当',
   'cluster.provider.comingsoon': '即将推出',
   'clusters.addworker.nvidiaNotes-01':

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

@@ -67,9 +67,11 @@ const AddPool: React.FC<AddModalProps> = ({
       onCancel={handleCancel}
       destroyOnHidden={true}
       closeIcon={true}
+      centered={true}
       maskClosable={false}
       keyboard={false}
       width={600}
+      maxContentHeight={'max(calc(100vh - 300px), 500px)'}
       footer={
         <ModalFooter onOk={handleSubmit} onCancel={onCancel}></ModalFooter>
       }

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

@@ -62,7 +62,7 @@ const Container = styled.div`
   width: 800px;
   margin: 0 auto;
   .command-info {
-    margin-top: 24px;
+    margin-top: 16px;
     margin-bottom: 8px;
   }
 `;

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

@@ -24,17 +24,15 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
     <ScrollerModal
       title={intl.formatMessage({ id: 'resources.button.create' })}
       open={open}
-      centered={false}
+      centered={true}
       onCancel={onCancel}
       destroyOnHidden={true}
       closeIcon={true}
       maskClosable={false}
       keyboard={false}
       width={860}
-      style={{
-        top: 100
-      }}
-      maxContentHeight={600}
+      style={{}}
+      maxContentHeight={'max(calc(100vh - 200px), 600px)'}
       footer={null}
     >
       <AddWorkerStep registrationInfo={registrationInfo} provider={provider} />

src/pages/cluster-management/components/provider-catalog.tsx

@@ -10,7 +10,7 @@ const Wrapper = styled.div<{ $cols?: number }>`
   grid-template-columns: repeat(${(props) => props.$cols || 3}, 1fr);
   gap: 16px;
   .template-card-wrapper {
-    padding: 16px;
+    padding: 10px;
   }
   .template-card-inner {
     justify-content: center;

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

@@ -140,7 +140,7 @@ const SupportedHardware: React.FC<SupportedHardwareProps> = ({
     <Box>
       <ProviderCatalog
         onSelect={onSelect}
-        height={60}
+        height={50}
         current={current}
         dataList={supportedHardPlatforms}
         clickable={clickable}

src/pages/resources/components/update-labels.tsx

@@ -47,7 +47,7 @@ const UpdateLabels: React.FC<ViewModalProps> = (props) => {
       maskClosable={false}
       keyboard={false}
       width={600}
-      maxContentHeight={550}
+      maxContentHeight={'max(calc(100vh - 300px), 500px)'}
       footer={
         <ModalFooter onOk={handleSumit} onCancel={onCancel}></ModalFooter>
       }

src/pages/resources/components/workers.tsx

@@ -11,7 +11,6 @@ import { Button, ConfigProvider, Table, message } from 'antd';
 import { useAtom } from 'jotai';
 import React, { useEffect, useState } from 'react';
 import NoResult from '../../_components/no-result';
-import TerminalTabs from '../../_components/terminal-tabs';
 import {
   WORKERS_API,
   deleteWorker,
@@ -71,16 +70,6 @@ const Workers: React.FC = () => {
     open: false,
     currentData: null
   });
-  const [terminals, setTerminals] = useState<{ url: string; name: string }[]>(
-    []
-  );
-  const [terminalModalStatus, setTerminalModalStatus] = useState<{
-    open: boolean;
-    currentActive: string;
-  }>({
-    open: false,
-    currentActive: ''
-  });
 
   const getClusterList = async () => {
     try {
@@ -165,19 +154,6 @@ const Workers: React.FC = () => {
         name: record.name
       });
     }
-    if (val === 'terminal') {
-      const url = `/api/workers/${record.id}/terminal`;
-      setTerminals((prev) => {
-        return [
-          ...prev,
-          {
-            url,
-            name: record.name
-          }
-        ];
-      });
-      setTerminalModalStatus({ open: true, currentActive: url });
-    }
   });
 
   const handleAddWorker = () => {
@@ -212,11 +188,6 @@ const Workers: React.FC = () => {
     });
   };
 
-  const handleTerminalClose = () => {
-    setTerminalModalStatus({ open: false, currentActive: '' });
-    setTerminals([]);
-  };
-
   const columns = useWorkerColumns({
     clusterData,
     loadend: dataSource.loadend,
@@ -282,14 +253,6 @@ const Workers: React.FC = () => {
             setWorkerDetailStatus({ currentData: null, open: false })
           }
         />
-        <TerminalTabs
-          height={300}
-          key="terminal-tabs"
-          terminals={terminals}
-          open={terminalModalStatus.open}
-          currentActive={terminalModalStatus.currentActive}
-          onClose={handleTerminalClose}
-        />
       </PageBox>
     </>
   );

src/pages/resources/hooks/use-terminal-tabs.tsx

@@ -0,0 +1,52 @@
+import { useState } from 'react';
+import TerminalTabs from '../../_components/terminal-tabs';
+
+const useTerminalTabs = () => {
+  const [terminals, setTerminals] = useState<{ url: string; name: string }[]>(
+    []
+  );
+  const [terminalModalStatus, setTerminalModalStatus] = useState<{
+    open: boolean;
+    currentActive: string;
+  }>({
+    open: false,
+    currentActive: ''
+  });
+
+  const handleTerminalClose = () => {
+    setTerminalModalStatus({ open: false, currentActive: '' });
+    setTerminals([]);
+  };
+
+  const handleAddTerminal = (record: { id: number; name: string }) => {
+    const url = `/api/workers/${record.id}/terminal`;
+    setTerminals((prev) => {
+      return [
+        ...prev,
+        {
+          url,
+          name: record.name
+        }
+      ];
+    });
+    setTerminalModalStatus({ open: true, currentActive: url });
+  };
+
+  const TerminalPanel = (
+    <TerminalTabs
+      height={300}
+      key="terminal-tabs"
+      terminals={terminals}
+      open={terminalModalStatus.open}
+      currentActive={terminalModalStatus.currentActive}
+      onClose={handleTerminalClose}
+    />
+  );
+
+  return {
+    TerminalPanel,
+    handleAddTerminal
+  };
+};
+
+export default useTerminalTabs;