From 921a2a0d81e0b0608489405b4d657171d24b004e Mon Sep 17 00:00:00 2001 From: jialin Date: Tue, 19 May 2026 20:22:19 +0800 Subject: [PATCH] fix: instance form ux --- src/locales/en-US/clusters.ts | 2 + src/locales/ja-JP/clusters.ts | 2 + src/locales/ru-RU/clusters.ts | 2 + src/locales/tr-TR/clusters.ts | 2 + src/locales/zh-CN/clusters.ts | 2 + .../_components/number-selection/index.tsx | 2 +- .../components/add-worker/k8s-run-command.tsx | 2 +- .../components/instance-type-item.tsx | 8 ++- .../gpu-service/instances/config/types.ts | 1 + .../gpu-service/instances/forms/index.tsx | 71 +++++++++++++------ .../instances/forms/storage-volume.tsx | 6 +- .../instances/styles/instances.module.less | 8 +++ .../templates/components/template-card.tsx | 15 +--- .../gpu-service/templates/config/index.tsx | 13 ++++ 14 files changed, 92 insertions(+), 44 deletions(-) diff --git a/src/locales/en-US/clusters.ts b/src/locales/en-US/clusters.ts index 9844d063..38cb2d01 100644 --- a/src/locales/en-US/clusters.ts +++ b/src/locales/en-US/clusters.ts @@ -42,6 +42,8 @@ export default { 'Please make sure the prerequisites 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.addCommand.k8s.tips': + 'On the Kubernetes cluster that needs to be registered, run the following command to create the Kubernetes resources and register 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.', 'cluster.create.checkEnv.tips': diff --git a/src/locales/ja-JP/clusters.ts b/src/locales/ja-JP/clusters.ts index 3942d629..b5dba540 100644 --- a/src/locales/ja-JP/clusters.ts +++ b/src/locales/ja-JP/clusters.ts @@ -42,6 +42,8 @@ export default { 'Please make sure the prerequisites 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.addCommand.k8s.tips': + '登録する Kubernetes クラスターで以下のコマンドを実行し、Kubernetes リソースを作成してクラスターを登録します。', 'cluster.create.checkEnv.tips': 'Use the following command to check if the environment is ready.', 'clusters.create.register.tips': diff --git a/src/locales/ru-RU/clusters.ts b/src/locales/ru-RU/clusters.ts index 4ce79d48..01981fb6 100644 --- a/src/locales/ru-RU/clusters.ts +++ b/src/locales/ru-RU/clusters.ts @@ -42,6 +42,8 @@ export default { 'Пожалуйста, убедитесь, что выполнены предварительные условия для {label} перед выполнением следующей команды.', 'clusters.create.addCommand.tips': 'На воркере, который необходимо добавить, выполните следующую команду, чтобы присоединить его к кластеру.', + 'clusters.create.addCommand.k8s.tips': + 'На Kubernetes-кластере, который необходимо зарегистрировать, выполните следующую команду, чтобы создать ресурсы Kubernetes и зарегистрировать этот кластер.', 'cluster.create.checkEnv.tips': 'Используйте следующую команду для проверки готовности окружения', 'clusters.create.register.tips': diff --git a/src/locales/tr-TR/clusters.ts b/src/locales/tr-TR/clusters.ts index 3f154324..805e430e 100644 --- a/src/locales/tr-TR/clusters.ts +++ b/src/locales/tr-TR/clusters.ts @@ -42,6 +42,8 @@ export default { 'Aşağıdaki komutu çalıştırmadan önce lütfen {label} için ön koşulların karşılandığından emin olun.', 'clusters.create.addCommand.tips': 'Eklenmesi gereken İşçi Düğümde, kümeye katılması için aşağıdaki komutu çalıştırın.', + 'clusters.create.addCommand.k8s.tips': + 'Kaydedilmesi gereken Kubernetes kümesinde, Kubernetes kaynaklarını oluşturmak ve kümeyi kaydetmek için aşağıdaki komutu çalıştırın.', 'clusters.create.register.tips': 'Eklenmesi gereken Kubernetes kümesinde, düğümlerini kümeye katılması için aşağıdaki komutu çalıştırın.', 'cluster.create.checkEnv.tips': diff --git a/src/locales/zh-CN/clusters.ts b/src/locales/zh-CN/clusters.ts index 934f30f8..ca327c2b 100644 --- a/src/locales/zh-CN/clusters.ts +++ b/src/locales/zh-CN/clusters.ts @@ -41,6 +41,8 @@ export default { '在执行以下命令之前，请确保已满足 {label} 的先决条件。', 'clusters.create.addCommand.tips': '在需要添加的节点上运行以下命令，将其加入到集群中。', + 'clusters.create.addCommand.k8s.tips': + '在需要注册的 Kubernetes 集群中运行以下命令，创建 Kubernetes 资源，注册该集群。', 'clusters.create.register.tips': '在需要添加的 Kubernetes 集群上运行以下命令，将其中的节点加入到集群中。', 'cluster.create.checkEnv.tips': '使用以下命令检查环境是否准备妥当。', diff --git a/src/pages/_components/number-selection/index.tsx b/src/pages/_components/number-selection/index.tsx index 58630913..16a3baec 100644 --- a/src/pages/_components/number-selection/index.tsx +++ b/src/pages/_components/number-selection/index.tsx @@ -113,7 +113,7 @@ const NumberSelection: React.FC = ({ aria-disabled={disabled} tabIndex={disabled ? -1 : 0} className={classNames(styles.numberItem, { - [styles.active]: num === value + [styles.active]: num === value && !!value })} onClick={() => handleSelect(num)} onKeyDown={(e) => { diff --git a/src/pages/cluster-management/components/add-worker/k8s-run-command.tsx b/src/pages/cluster-management/components/add-worker/k8s-run-command.tsx index f6af580c..b5ba538f 100644 --- a/src/pages/cluster-management/components/add-worker/k8s-run-command.tsx +++ b/src/pages/cluster-management/components/add-worker/k8s-run-command.tsx @@ -30,7 +30,7 @@ const K8sRunCommand: React.FC = ({ disabled }) => { }} > {intl.formatMessage({ - id: 'clusters.create.addCommand.tips' + id: 'clusters.create.addCommand.k8s.tips' })} = ({ const name = item.metadata?.name; const acceleratable = item.spec?.acceleratable; - const manufacturer = item.spec?.manufacturer?.toUpperCase(); + const manufacturerKey = item.spec?.manufacturer; + const manufacturer = manufacturerKey?.toUpperCase(); + const manufacturerColor = + (manufacturerKey && manufactureColorMap[manufacturerKey]) ?? 'purple'; const renderName = () => { const product = item.spec?.product; @@ -91,7 +95,7 @@ const InstanceTypeItem: React.FC = ({ fontWeight: 400 }} > - {manufacturer} + {manufacturer} )} diff --git a/src/pages/gpu-service/instances/config/types.ts b/src/pages/gpu-service/instances/config/types.ts index ae7b215d..6b6f5ccf 100644 --- a/src/pages/gpu-service/instances/config/types.ts +++ b/src/pages/gpu-service/instances/config/types.ts @@ -6,6 +6,7 @@ export interface FormData { name: string; namespace: string; }; + enable_ssh?: boolean; spec: { type: string; image: string; diff --git a/src/pages/gpu-service/instances/forms/index.tsx b/src/pages/gpu-service/instances/forms/index.tsx index 6fa2f02c..6a9e3d05 100644 --- a/src/pages/gpu-service/instances/forms/index.tsx +++ b/src/pages/gpu-service/instances/forms/index.tsx @@ -4,8 +4,8 @@ import { CheckboxField, CollapsePanel, IconFont, + MultipleSelect, ScrollSpyTabs, - Select, useFinishFailed, useScrollActiveChange, useWrapperContext @@ -25,6 +25,7 @@ import TemplateBasicForm, { BasicResourceMax } from '../../templates/forms/basic'; import { FormData, InstanceTypeItem, ListItem } from '../config/types'; +import instanceStyles from '../styles/instances.module.less'; import Basic from './basic'; import InstanceTypeFormItem from './instance-type'; import StorageVolume from './storage-volume'; @@ -123,6 +124,22 @@ const GPUServiceInstanceForm: React.FC = forwardRef( } }, [open, action]); + const handleSSHEnableChange = (e: any) => { + if (!e?.target?.checked) { + return; + } + const currentPorts = form.getFieldValue(['spec', 'ports']) || []; + const hasSSHPort = currentPorts.some( + (item: any) => item?.protocol === 'TCP' && item?.port === SSH_PORT + ); + if (!hasSSHPort) { + form.setFieldValue( + ['spec', 'ports'], + [...currentPorts, { protocol: 'TCP', port: SSH_PORT, name: 'SSH' }] + ); + } + }; + const segmentOptions = useMemo( () => [ { @@ -363,31 +380,39 @@ const GPUServiceInstanceForm: React.FC = forwardRef( {sshEnabled && ( - name={['spec', 'sshPublicKey', 'name']}> - - +
+ name={['spec', 'sshPublicKey', 'name']}> + + +
)} diff --git a/src/pages/gpu-service/instances/forms/storage-volume.tsx b/src/pages/gpu-service/instances/forms/storage-volume.tsx index 4c037642..1b91db71 100644 --- a/src/pages/gpu-service/instances/forms/storage-volume.tsx +++ b/src/pages/gpu-service/instances/forms/storage-volume.tsx @@ -87,7 +87,8 @@ const StorageVolume = ({ }; return ( - + <> +
)} -
{storageMode === StorageModeValueMap.Existing && ( setOverlayOpen(false)} onSubmit={handleCreateStorage} /> - + ); }; diff --git a/src/pages/gpu-service/instances/styles/instances.module.less b/src/pages/gpu-service/instances/styles/instances.module.less index 4fbd4b14..a0a10bbe 100644 --- a/src/pages/gpu-service/instances/styles/instances.module.less +++ b/src/pages/gpu-service/instances/styles/instances.module.less @@ -32,3 +32,11 @@ } } } + +.sshkeySelection { + :global { + .ant-select-content .ant-tag { + font-size: 12px !important; + } + } +} diff --git a/src/pages/gpu-service/templates/components/template-card.tsx b/src/pages/gpu-service/templates/components/template-card.tsx index 96041476..cddf54dc 100644 --- a/src/pages/gpu-service/templates/components/template-card.tsx +++ b/src/pages/gpu-service/templates/components/template-card.tsx @@ -27,7 +27,7 @@ import { import { useIntl } from '@umijs/max'; import { Button, Tag } from 'antd'; import styled from 'styled-components'; -import { templateActions } from '../config'; +import { manufactureColorMap, templateActions } from '../config'; import { ListItem } from '../config/types'; const imageLogoMap = { @@ -40,19 +40,6 @@ const imageLogoMap = { ubuntu: ubuntuLogo } as const; -export const manufactureColorMap: Record = { - nvidia: 'green', - amd: 'volcano', - ascend: 'orange', - hygon: 'magenta', - moorthreads: 'cyan', - iluvatar: 'purple', - metax: 'geekblue', - cambricon: 'gold', - thead: 'red', - cpu: 'blue' -}; - const manufacturerLabelMap: Record = Object.values( GPUsConfigs ).reduce( diff --git a/src/pages/gpu-service/templates/config/index.tsx b/src/pages/gpu-service/templates/config/index.tsx index db1c142f..87366e17 100644 --- a/src/pages/gpu-service/templates/config/index.tsx +++ b/src/pages/gpu-service/templates/config/index.tsx @@ -35,6 +35,19 @@ export const ImagePullPolicyOptions: { export const DefaultImagePullPolicy: ImagePullPolicy = 'IfNotPresent'; +export const manufactureColorMap: Record = { + nvidia: 'green', + amd: 'volcano', + ascend: 'orange', + hygon: 'magenta', + moorthreads: 'cyan', + iluvatar: 'purple', + metax: 'geekblue', + cambricon: 'gold', + thead: 'red', + cpu: 'blue' +}; + export const normalizeCommand = (value: string): string[] => { if (!value) return []; const tokens: string[] = [];