From 0ba8300959b58e7f412ecaf1425e932f88e3d3a9 Mon Sep 17 00:00:00 2001 From: jialin Date: Mon, 5 Jan 2026 18:59:28 +0800 Subject: [PATCH] fix: no clusters tips in adding worker modal --- src/components/collapse-container/index.tsx | 6 ++++ src/locales/en-US/clusters.ts | 3 +- src/locales/ja-JP/clusters.ts | 4 ++- src/locales/ru-RU/clusters.ts | 4 ++- src/locales/zh-CN/clusters.ts | 3 +- .../components/add-worker/add-worker-step.tsx | 21 +++++++----- .../add-worker/check-environment.tsx | 13 ++++---- .../components/add-worker/config.ts | 4 +++ .../components/add-worker/constainers.tsx | 2 +- .../add-worker/docker-run-command.tsx | 15 +++++---- .../components/add-worker/k8s-run-command.tsx | 15 +++++---- .../components/add-worker/network-config.tsx | 5 +-- .../components/add-worker/select-cluster.tsx | 12 +++++-- .../components/add-worker/select-vendor.tsx | 5 +-- .../add-worker/specify-arguments.tsx | 33 +++++++++---------- .../components/add-worker/step-collapse.tsx | 5 ++- .../components/register-cluster-inner.tsx | 2 +- .../components/support-gpus.tsx | 2 +- 18 files changed, 91 insertions(+), 63 deletions(-) diff --git a/src/components/collapse-container/index.tsx b/src/components/collapse-container/index.tsx index 5a497535..286d991f 100644 --- a/src/components/collapse-container/index.tsx +++ b/src/components/collapse-container/index.tsx @@ -27,6 +27,12 @@ const CardStyled = styled(Card)` } } } + &.disabled { + .ant-card-head { + cursor: not-allowed; + background-color: var(--ant-color-fill-quaternary) !important; + } + } `; const useStyles = createStyles(({ css, token }) => { diff --git a/src/locales/en-US/clusters.ts b/src/locales/en-US/clusters.ts index 31656304..ba8eb8d3 100644 --- a/src/locales/en-US/clusters.ts +++ b/src/locales/en-US/clusters.ts @@ -115,5 +115,6 @@ export default { 'clusters.form.serverUrl.tips': 'Specify the server URL accessible from your cloud provider.', 'clusters.form.setDefault': 'Set as Default', - 'clusters.form.setDefault.tips': 'Default for deployment.' + 'clusters.form.setDefault.tips': 'Default for deployment.', + 'clusters.addworker.noClusters': 'No available clusters' }; diff --git a/src/locales/ja-JP/clusters.ts b/src/locales/ja-JP/clusters.ts index 403fbc10..cdf967b7 100644 --- a/src/locales/ja-JP/clusters.ts +++ b/src/locales/ja-JP/clusters.ts @@ -115,7 +115,8 @@ export default { 'clusters.form.serverUrl.tips': 'Specify the server URL accessible from your cloud provider.', 'clusters.form.setDefault': 'Set as Default', - 'clusters.form.setDefault.tips': 'Default for deployment.' + 'clusters.form.setDefault.tips': 'Default for deployment.', + 'clusters.addworker.noClusters': 'No available clusters' }; // ========== To-Do: Translate Keys (Remove After Translation) ========== @@ -209,4 +210,5 @@ 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' // ========== End of To-Do List ========== diff --git a/src/locales/ru-RU/clusters.ts b/src/locales/ru-RU/clusters.ts index 9c053c70..0c8b91ea 100644 --- a/src/locales/ru-RU/clusters.ts +++ b/src/locales/ru-RU/clusters.ts @@ -116,9 +116,11 @@ export default { 'Укажите URL сервера, доступный из вашего облачного провайдера.', 'clusters.form.setDefault': 'Установить по умолчанию', 'clusters.form.setDefault.tips': - 'Использовать по умолчанию для развертывания.' + 'Использовать по умолчанию для развертывания.', + 'clusters.addworker.noClusters': 'No available clusters' }; // ========== To-Do: Translate Keys (Remove After Translation) ========== // 1. 'clusters.addworker.hygonNotes': `If /opt/hyhal or /opt/dtk does not exist, create symbolic links pointing to the corresponding Hygon installation paths, for example: ln -s /path/to/hyhal /opt/hyhal ln -s /path/to/dtk /opt/dtk.`, +// 2. 'clusters.addworker.noClusters': 'No available clusters' // ================================================================ diff --git a/src/locales/zh-CN/clusters.ts b/src/locales/zh-CN/clusters.ts index 17c778dc..246e9727 100644 --- a/src/locales/zh-CN/clusters.ts +++ b/src/locales/zh-CN/clusters.ts @@ -112,5 +112,6 @@ export default { 'clusters.table.ip.external': '外', 'clusters.form.serverUrl.tips': '指定可从您的云服务提供商访问的服务器地址。', 'clusters.form.setDefault': '设为默认', - 'clusters.form.setDefault.tips': '部署时的默认集群。' + 'clusters.form.setDefault.tips': '部署时的默认集群。', + 'clusters.addworker.noClusters': '无可用集群' }; diff --git a/src/pages/cluster-management/components/add-worker/add-worker-step.tsx b/src/pages/cluster-management/components/add-worker/add-worker-step.tsx index da10ea01..40ef14b7 100644 --- a/src/pages/cluster-management/components/add-worker/add-worker-step.tsx +++ b/src/pages/cluster-management/components/add-worker/add-worker-step.tsx @@ -3,7 +3,7 @@ import useAddWorkerMessage from '@/pages/cluster-management/hooks/use-add-worker import { ExclamationCircleFilled } from '@ant-design/icons'; import { useIntl } from '@umijs/max'; import { Alert } from 'antd'; -import React from 'react'; +import React, { useMemo } from 'react'; import styled from 'styled-components'; import { ProviderType, ProviderValueMap } from '../../config'; import { ClusterListItem } from '../../config/types'; @@ -107,6 +107,12 @@ const AddWorkerSteps: React.FC = (props) => { ); }; + const disabled = useMemo(() => { + return ( + stepList.includes(StepNamesMap.SelectCluster) && !clusterList?.length + ); + }, [clusterList, stepList, StepNamesMap]); + return ( = (props) => { > {stepList.includes(StepNamesMap.SelectCluster) && ( - + )} {stepList.includes(StepNamesMap.SelectCluster) && !clusterList?.length && ( @@ -141,22 +147,21 @@ const AddWorkerSteps: React.FC = (props) => { })} > )} - {/* 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)) && ( <> - - + + {provider === ProviderValueMap.Kubernetes && ( - + )} {provider === ProviderValueMap.Docker && ( <> - - + + )} diff --git a/src/pages/cluster-management/components/add-worker/check-environment.tsx b/src/pages/cluster-management/components/add-worker/check-environment.tsx index a2d1db69..6eea1ece 100644 --- a/src/pages/cluster-management/components/add-worker/check-environment.tsx +++ b/src/pages/cluster-management/components/add-worker/check-environment.tsx @@ -1,13 +1,13 @@ import { BulbOutlined } from '@ant-design/icons'; import { useIntl } from '@umijs/max'; -import { Alert } from 'antd'; +import { Alert, Typography } from 'antd'; import CheckEnvCommand from '../check-env-command'; import { useAddWorkerContext } from './add-worker-context'; -import { StepNamesMap } from './config'; -import { Tips, Title } from './constainers'; +import { AddWorkerStepProps, StepNamesMap } from './config'; +import { Title } from './constainers'; import StepCollapse from './step-collapse'; -const CheckEnvironment = () => { +const CheckEnvironment: React.FC = ({ disabled }) => { const { stepList, summary, provider } = useAddWorkerContext(); const intl = useIntl(); const currentGPU = summary.get('currentGPU'); @@ -21,6 +21,7 @@ const CheckEnvironment = () => { return ( @@ -47,9 +48,9 @@ const CheckEnvironment = () => { > } > - + {intl.formatMessage({ id: 'cluster.create.checkEnv.tips' })} - + ); diff --git a/src/pages/cluster-management/components/add-worker/config.ts b/src/pages/cluster-management/components/add-worker/config.ts index d2ec6eb5..fc29beb3 100644 --- a/src/pages/cluster-management/components/add-worker/config.ts +++ b/src/pages/cluster-management/components/add-worker/config.ts @@ -71,3 +71,7 @@ export type SummaryDataMap = { }; export type SummaryDataKey = keyof SummaryDataKeys; + +export interface AddWorkerStepProps { + disabled?: boolean; +} diff --git a/src/pages/cluster-management/components/add-worker/constainers.tsx b/src/pages/cluster-management/components/add-worker/constainers.tsx index 850e9df9..afd1aad7 100644 --- a/src/pages/cluster-management/components/add-worker/constainers.tsx +++ b/src/pages/cluster-management/components/add-worker/constainers.tsx @@ -48,7 +48,7 @@ export const SwitchWrapper = styled.div` export const Tips = styled.div` margin-top: 0px; - color: var(--ant-color-text-secondary); + color: var(--ant-color-text-tertiary); `; export const NotesWrapper = styled.ol` diff --git a/src/pages/cluster-management/components/add-worker/docker-run-command.tsx b/src/pages/cluster-management/components/add-worker/docker-run-command.tsx index 425f494d..3084c0ec 100644 --- a/src/pages/cluster-management/components/add-worker/docker-run-command.tsx +++ b/src/pages/cluster-management/components/add-worker/docker-run-command.tsx @@ -1,13 +1,14 @@ import { useIntl } from '@umijs/max'; +import { Typography } from 'antd'; import AddWorkerCommand from '../add-worker-command'; import { useAddWorkerContext } from './add-worker-context'; -import { StepNamesMap } from './config'; -import { Tips, Title } from './constainers'; +import { AddWorkerStepProps, StepNamesMap } from './config'; +import { Title } from './constainers'; import StepCollapse from './step-collapse'; import SummaryData from './summary-data'; import VendorNotes from './vendor-notes'; -const DockerRunCommand = () => { +const DockerRunCommand: React.FC = ({ disabled }) => { const intl = useIntl(); const { registrationInfo, stepList, summary } = useAddWorkerContext(); const workerIPConfig = summary.get('workerIPConfig') || { @@ -44,6 +45,7 @@ const DockerRunCommand = () => { return ( @@ -54,16 +56,15 @@ const DockerRunCommand = () => { > - {intl.formatMessage({ id: 'clusters.create.addCommand.tips' })} - + { +const K8sRunCommand: React.FC = ({ disabled }) => { const { registrationInfo, stepList } = useAddWorkerContext(); const intl = useIntl(); @@ -13,6 +14,7 @@ const K8sRunCommand = () => { return ( @@ -21,16 +23,15 @@ const K8sRunCommand = () => { } > - {intl.formatMessage({ id: 'clusters.create.addCommand.tips' })} - + ); diff --git a/src/pages/cluster-management/components/add-worker/network-config.tsx b/src/pages/cluster-management/components/add-worker/network-config.tsx index 3d33860e..0201a9db 100644 --- a/src/pages/cluster-management/components/add-worker/network-config.tsx +++ b/src/pages/cluster-management/components/add-worker/network-config.tsx @@ -1,7 +1,7 @@ import { useIntl } from '@umijs/max'; import { Input, Switch } from 'antd'; import React from 'react'; -import { SwitchWrapper, Tips } from './constainers'; +import { SwitchWrapper } from './constainers'; const NetworkConfig = () => { const intl = useIntl(); @@ -28,9 +28,6 @@ const NetworkConfig = () => { } > - - Enter the NIC name to use for distributed inference (e.g., mlx5_0). - {networkInterface.enable && ( <> { +const SelectCluster: React.FC = ({ disabled }) => { const { clusterList, clusterLoading, @@ -42,6 +42,7 @@ const SelectCluster = () => { return ( @@ -65,6 +66,11 @@ const SelectCluster = () => { onChange={onClusterChange} style={{ width: '100%' }} /> + {!clusterLoading && !clusterList?.length && ( + + {intl.formatMessage({ id: 'clusters.addworker.noClusters' })} + + )} ); diff --git a/src/pages/cluster-management/components/add-worker/select-vendor.tsx b/src/pages/cluster-management/components/add-worker/select-vendor.tsx index 8c69ad6c..ef770991 100644 --- a/src/pages/cluster-management/components/add-worker/select-vendor.tsx +++ b/src/pages/cluster-management/components/add-worker/select-vendor.tsx @@ -6,11 +6,11 @@ import { useIntl } from '@umijs/max'; import React, { useEffect } from 'react'; import SupportedGPUs from '../support-gpus'; import { useAddWorkerContext } from './add-worker-context'; -import { StepNamesMap } from './config'; +import { AddWorkerStepProps, StepNamesMap } from './config'; import { Title } from './constainers'; import StepCollapse from './step-collapse'; -const SelectVendor = () => { +const SelectVendor: React.FC = ({ disabled }) => { const { stepList, registerField, updateField } = useAddWorkerContext(); const intl = useIntl(); @@ -52,6 +52,7 @@ const SelectVendor = () => { return ( diff --git a/src/pages/cluster-management/components/add-worker/specify-arguments.tsx b/src/pages/cluster-management/components/add-worker/specify-arguments.tsx index 9d12e571..1cfaa448 100644 --- a/src/pages/cluster-management/components/add-worker/specify-arguments.tsx +++ b/src/pages/cluster-management/components/add-worker/specify-arguments.tsx @@ -1,12 +1,12 @@ import AlertInfoBlock from '@/components/alert-info/block'; import { ExclamationCircleFilled } from '@ant-design/icons'; import { useIntl } from '@umijs/max'; -import { Input, Switch } from 'antd'; +import { Input, Switch, Typography } from 'antd'; import React, { useEffect } from 'react'; import styled from 'styled-components'; import { useAddWorkerContext } from './add-worker-context'; -import { StepNamesMap } from './config'; -import { NotesWrapper, SwitchWrapper, Tips, Title } from './constainers'; +import { AddWorkerStepProps, StepNamesMap } from './config'; +import { NotesWrapper, SwitchWrapper, Title } from './constainers'; import StepCollapse from './step-collapse'; const ButtonWrapper = styled.div` @@ -47,14 +47,16 @@ const SwitchSetting: React.FC<{ {showSwitch && } {tips && ( - + +
+ )} {checked && ( - <> +
onInputChange?.(e.target.value)} /> {errorMessage && ( - - {errorMessage} - + {errorMessage} )} - +
)} {extra} ); }; -const SpecifyArguments = () => { +const SpecifyArguments: React.FC = ({ disabled }) => { const intl = useIntl(); const { stepList, summary, updateField, registerField } = useAddWorkerContext(); @@ -215,6 +211,7 @@ const SpecifyArguments = () => { return ( Promise | void; } @@ -39,6 +40,7 @@ const StepCollapse: React.FC = ({ title, children, name = '', + disabled = false, beforeNext = async () => true, ...rest }) => { @@ -82,6 +84,7 @@ const StepCollapse: React.FC = ({ } }} title={title} + disabled={disabled} onToggle={(open) => onToggle?.(open, name || '')} {...rest} > @@ -95,7 +98,7 @@ const StepCollapse: React.FC = ({ )} {!isLastStep && ( - )} diff --git a/src/pages/cluster-management/components/register-cluster-inner.tsx b/src/pages/cluster-management/components/register-cluster-inner.tsx index 186d5ff4..4a19bd26 100644 --- a/src/pages/cluster-management/components/register-cluster-inner.tsx +++ b/src/pages/cluster-management/components/register-cluster-inner.tsx @@ -7,7 +7,7 @@ type AddModalProps = { token: string; image: string; server_url: string; - cluster_id: number; + cluster_id: number | null; }; }; const AddCluster: React.FC = ({ registrationInfo }) => { diff --git a/src/pages/cluster-management/components/support-gpus.tsx b/src/pages/cluster-management/components/support-gpus.tsx index a937e3fc..9f43d281 100644 --- a/src/pages/cluster-management/components/support-gpus.tsx +++ b/src/pages/cluster-management/components/support-gpus.tsx @@ -98,7 +98,7 @@ const SupportedHardware: React.FC = ({ icon: ( ) },