From 8f9fae92101cf1e246e7d702fa535a3caeaf7717 Mon Sep 17 00:00:00 2001 From: jialin Date: Tue, 6 Jan 2026 17:19:09 +0800 Subject: [PATCH] style: use drawer for adding worker --- src/locales/en-US/clusters.ts | 10 ++- src/locales/ja-JP/clusters.ts | 18 ++++- src/locales/ru-RU/clusters.ts | 18 ++++- src/locales/zh-CN/clusters.ts | 8 +- .../cluster-management/cluster-create.tsx | 3 - .../components/add-worker/index.tsx | 80 +++++++++++-------- .../components/success-result.tsx | 30 ++++--- .../components/support-gpus.tsx | 10 +-- .../hooks/use-cluster-list.ts | 47 +---------- .../step-forms/use-step-list.tsx | 2 +- 10 files changed, 118 insertions(+), 108 deletions(-) diff --git a/src/locales/en-US/clusters.ts b/src/locales/en-US/clusters.ts index ba8eb8d3..ca8447bc 100644 --- a/src/locales/en-US/clusters.ts +++ b/src/locales/en-US/clusters.ts @@ -116,5 +116,13 @@ 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 clusters', + 'clusters.create.complete.tips': 'Cluster created successfully!', + 'clusters.create.complete': 'Completed', + 'clusters.create.dockerTips1': 'Next, add worker to this cluster.', + 'clusters.create.dockerTips2': + 'You can also skip this step and add them later from the cluster list.', + 'clusters.create.k8sTips1': 'Next, register existing Kubernetes cluster.', + 'clusters.create.k8sTips2': + 'You can also skip this step and register it later from the cluster list.' }; diff --git a/src/locales/ja-JP/clusters.ts b/src/locales/ja-JP/clusters.ts index cdf967b7..8dd95983 100644 --- a/src/locales/ja-JP/clusters.ts +++ b/src/locales/ja-JP/clusters.ts @@ -116,7 +116,15 @@ 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 clusters', + 'clusters.create.complete.tips': 'Cluster created successfully!', + 'clusters.create.complete': 'Completed', + 'clusters.create.dockerTips1': 'Next, add worker to this cluster.', + 'clusters.create.dockerTips2': + 'You can also skip this step and add them later from the cluster list.', + 'clusters.create.k8sTips1': 'Next, register existing Kubernetes cluster.', + 'clusters.create.k8sTips2': + 'You can also skip this step and register it later from the cluster list.' }; // ========== To-Do: Translate Keys (Remove After Translation) ========== @@ -210,5 +218,11 @@ 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 clusters', +// 88. 'clusters.create.complete.tips': 'Cluster created successfully!', +// 89. 'clusters.create.complete': 'Completed', +// 90. 'clusters.create.dockerTips1': 'Next, add worker to this cluster.', +// 91. 'clusters.create.dockerTips2': 'You can also skip this step and add them later from the cluster list.', +// 92. 'clusters.create.k8sTips1': 'Next, register existing Kubernetes cluster.', +// 93. 'clusters.create.k8sTips2': 'You can also skip this step and register it later from the cluster list.' // ========== End of To-Do List ========== diff --git a/src/locales/ru-RU/clusters.ts b/src/locales/ru-RU/clusters.ts index 0c8b91ea..5aacb51c 100644 --- a/src/locales/ru-RU/clusters.ts +++ b/src/locales/ru-RU/clusters.ts @@ -117,10 +117,24 @@ export default { 'clusters.form.setDefault': 'Установить по умолчанию', 'clusters.form.setDefault.tips': 'Использовать по умолчанию для развертывания.', - 'clusters.addworker.noClusters': 'No available clusters' + 'clusters.addworker.noClusters': 'No available clusters', + 'clusters.create.complete.tips': 'Cluster created successfully!', + 'clusters.create.complete': 'Completed', + 'clusters.create.dockerTips1': 'Next, add worker to this cluster.', + 'clusters.create.dockerTips2': + 'You can also skip this step and add them later from the cluster list.', + 'clusters.create.k8sTips1': 'Next, register existing Kubernetes cluster.', + 'clusters.create.k8sTips2': + 'You can also skip this step and register it later from the cluster list.' }; // ========== 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' +// 2. 'clusters.addworker.noClusters': 'No available clusters', +// 3. 'clusters.create.complete.tips': 'Cluster created successfully!', +// 4. 'clusters.create.complete': 'Completed', +// 5. 'clusters.create.dockerTips1': 'Next, add worker to this cluster.', +// 6. 'clusters.create.dockerTips2': 'You can also skip this step and add them later from the cluster list.', +// 7. 'clusters.create.k8sTips1': 'Next, register existing Kubernetes cluster.', +// 8. 'clusters.create.k8sTips2': 'You can also skip this step and register it later from the cluster list.' // ================================================================ diff --git a/src/locales/zh-CN/clusters.ts b/src/locales/zh-CN/clusters.ts index 246e9727..45f10a7e 100644 --- a/src/locales/zh-CN/clusters.ts +++ b/src/locales/zh-CN/clusters.ts @@ -113,5 +113,11 @@ export default { 'clusters.form.serverUrl.tips': '指定可从您的云服务提供商访问的服务器地址。', 'clusters.form.setDefault': '设为默认', 'clusters.form.setDefault.tips': '部署时的默认集群。', - 'clusters.addworker.noClusters': '无可用集群' + 'clusters.addworker.noClusters': '无可用集群', + 'clusters.create.complete.tips': '集群创建成功！', + 'clusters.create.complete': '完成', + 'clusters.create.dockerTips1': '接下来，为该集群添加节点。', + 'clusters.create.dockerTips2': '你也可以跳过此步骤，稍后在集群列表中添加。', + 'clusters.create.k8sTips1': '接下来，注册已有的 Kubernetes 集群。', + 'clusters.create.k8sTips2': '你也可以跳过此步骤，稍后在集群列表中进行注册。' }; diff --git a/src/pages/cluster-management/cluster-create.tsx b/src/pages/cluster-management/cluster-create.tsx index 59d3bc82..4d04b48a 100644 --- a/src/pages/cluster-management/cluster-create.tsx +++ b/src/pages/cluster-management/cluster-create.tsx @@ -3,7 +3,6 @@ import { PageAction } from '@/config'; import { PageActionType } from '@/config/types'; import ColumnWrapper from '@/pages/_components/column-wrapper'; import { useIntl, useSearchParams } from '@umijs/max'; -import { Typography } from 'antd'; import { useAtom } from 'jotai'; import _ from 'lodash'; import React, { useEffect, useMemo, useRef, useState } from 'react'; @@ -30,8 +29,6 @@ import useSystemConfig from './services/use-system-config'; import { moduleMap, moduleRegistry } from './step-forms/module-registry'; import useStepList from './step-forms/use-step-list'; -const { Title, Text } = Typography; - const Container = styled.div` width: 100%; display: flex; diff --git a/src/pages/cluster-management/components/add-worker/index.tsx b/src/pages/cluster-management/components/add-worker/index.tsx index a3296c6f..5e57f275 100644 --- a/src/pages/cluster-management/components/add-worker/index.tsx +++ b/src/pages/cluster-management/components/add-worker/index.tsx @@ -1,4 +1,5 @@ -import ScrollerModal from '@/components/scroller-modal'; +import GSDrawer from '@/components/scroller-modal/gs-drawer'; +import ColumnWrapper from '@/pages/_components/column-wrapper'; import useAddWorkerMessage from '@/pages/cluster-management/hooks/use-add-worker-message'; import { useIntl } from '@umijs/max'; import { Alert } from 'antd'; @@ -118,46 +119,55 @@ const AddWorker: React.FC = (props) => { }; return ( - - {addedCount > 0 && ( - - )} - - } + styles={{ + body: { + paddingBlock: 0 + }, + wrapper: { width: 865 } + }} + footer={false} > - - + + {addedCount > 0 && ( + + )} + + } + > + + + ); }; diff --git a/src/pages/cluster-management/components/success-result.tsx b/src/pages/cluster-management/components/success-result.tsx index fd12e41a..96d8bfa5 100644 --- a/src/pages/cluster-management/components/success-result.tsx +++ b/src/pages/cluster-management/components/success-result.tsx @@ -1,4 +1,5 @@ import { CheckCircleFilled } from '@ant-design/icons'; +import { useIntl } from '@umijs/max'; import { Button, Flex, Result } from 'antd'; import React from 'react'; import { ProviderValueMap } from '../config'; @@ -8,14 +9,19 @@ const SuccessResult: React.FC<{ onSkip: () => void; onAddWorker: () => void; }> = ({ provider, onSkip, onAddWorker }) => { - const k8sTips = - 'Next, register this Kubernetes cluster. You can also skip this step and register it later from the cluster list.'; + const intl = useIntl(); + + const k8sTips = ( +
+ {intl.formatMessage({ id: 'clusters.create.k8sTips1' })} + {intl.formatMessage({ id: 'clusters.create.k8sTips2' })} +
+ ); + const dockerTips = (
- Next, add worker to this cluster. - - You can also skip this step and add them later from the cluster list. - + {intl.formatMessage({ id: 'clusters.create.dockerTips1' })} + {intl.formatMessage({ id: 'clusters.create.dockerTips2' })}
); @@ -33,17 +39,17 @@ const SuccessResult: React.FC<{ /> } status="success" - title="Cluster Created Successfully!" + title={intl.formatMessage({ id: 'clusters.create.complete.tips' })} subTitle={provider === ProviderValueMap.Kubernetes ? k8sTips : dockerTips} extra={[ - - ]} diff --git a/src/pages/cluster-management/components/support-gpus.tsx b/src/pages/cluster-management/components/support-gpus.tsx index 758e522a..2e7d32c2 100644 --- a/src/pages/cluster-management/components/support-gpus.tsx +++ b/src/pages/cluster-management/components/support-gpus.tsx @@ -110,7 +110,7 @@ const SupportedHardware: React.FC = ({ locale: false, notes: AddWorkerDockerNotes[GPUDriverMap.ASCEND], link: 'https://docs.gpustack.ai/latest/installation/requirements/#ascend-npu', - icon: + icon: }, { label: intl.formatMessage({ id: 'vendor.hygon' }), @@ -121,7 +121,7 @@ const SupportedHardware: React.FC = ({ locale: false, notes: AddWorkerDockerNotes[GPUDriverMap.HYGON], link: 'https://docs.gpustack.ai/latest/installation/requirements/#hygon-dcu', - icon: + icon: }, { label: intl.formatMessage({ id: 'vendor.moorthreads' }), @@ -133,7 +133,7 @@ const SupportedHardware: React.FC = ({ locale: false, notes: AddWorkerDockerNotes[GPUDriverMap.MOORE_THREADS], link: 'https://docs.gpustack.ai/latest/installation/requirements/#mthreads-gpu', - icon: + icon: }, { label: intl.formatMessage({ id: 'vendor.iluvatar' }), @@ -145,7 +145,7 @@ const SupportedHardware: React.FC = ({ locale: false, notes: AddWorkerDockerNotes[GPUDriverMap.ILUVATAR], link: 'https://docs.gpustack.ai/latest/installation/requirements/#iluvatar-gpu', - icon: + icon: }, { label: intl.formatMessage({ id: 'vendor.cambricon' }), @@ -157,7 +157,7 @@ const SupportedHardware: React.FC = ({ locale: false, notes: AddWorkerDockerNotes[GPUDriverMap.CAMBRICON], link: 'https://docs.gpustack.ai/latest/installation/requirements/#cambricon-mlu', - icon: + icon: }, { label: intl.formatMessage({ id: 'vendor.metax' }), diff --git a/src/pages/cluster-management/hooks/use-cluster-list.ts b/src/pages/cluster-management/hooks/use-cluster-list.ts index b337f598..680e72e0 100644 --- a/src/pages/cluster-management/hooks/use-cluster-list.ts +++ b/src/pages/cluster-management/hooks/use-cluster-list.ts @@ -1,8 +1,4 @@ -import { - clusterListAtom, - resourceOverviewAtom, - workerListAtom -} from '@/atoms/models'; +import { resourceOverviewAtom } from '@/atoms/models'; import { queryClusterList } from '@/pages/cluster-management/apis'; import { queryWorkersList } from '@/pages/resources/apis'; import { useAtom } from 'jotai'; @@ -15,28 +11,6 @@ import { queryDashboardData } from '../../dashboard/apis'; * @returns */ export default function useClusterList() { - const [clusterList, setClusterList] = useState< - { - label: string; - value: number; - id: number; - state: string; - provider: string; - }[] - >([]); - const [workerList, setWorkerList] = useState< - { - cluster_id: number; - state: string; - label: string; - value: number; - id: number; - labels: { [key: string]: string }; - name: string; - }[] - >([]); - const [clustersAtom, setClusterListAtom] = useAtom(clusterListAtom); - const [workersAtom, setWorkerListAtom] = useAtom(workerListAtom); const [resourceAtom, setResourceOverview] = useAtom(resourceOverviewAtom); const [resourceCount, setResourceCount] = useState>({ cluster_count: 0, @@ -77,21 +51,6 @@ export default function useClusterList() { } }; - const fetchData = async () => { - const [clusters, workers] = await Promise.all([ - fetchClusterList(), - fetchWorkerList() - ]); - setClusterList(clusters); - setWorkerList(workers); - setClusterListAtom(clusters); - setWorkerListAtom(workers); - return { - hasClusters: clusters.length > 0, - hasWorkers: workers.length > 0 - }; - }; - const fetchResource = async () => { try { const res = await queryDashboardData(); @@ -112,10 +71,6 @@ export default function useClusterList() { }; return { - clusterList, - workerList, - clustersAtom, - workersAtom, resourceAtom, resourceCount, fetchResource, diff --git a/src/pages/cluster-management/step-forms/use-step-list.tsx b/src/pages/cluster-management/step-forms/use-step-list.tsx index ea83f083..956fc98a 100644 --- a/src/pages/cluster-management/step-forms/use-step-list.tsx +++ b/src/pages/cluster-management/step-forms/use-step-list.tsx @@ -72,7 +72,7 @@ export default function useStepList() { beforeNext: handleBack }, { - title: 'Completed', + title: intl.formatMessage({ id: 'clusters.create.complete' }), content: '', description: '', showButtons: (provider?: ProviderType) => {