From 1e7dbe84860c8c0adef345adb6b57ed057342e12 Mon Sep 17 00:00:00 2001 From: qjianshuai Date: Fri, 12 May 2023 15:27:40 +0800 Subject: [PATCH] Add gpu on the create cluster page (#53) Signed-off-by: qijianshuai --- frontend/src/app/app.component.ts | 4 +- .../cluster-new/cluster-new.component.html | 32 ++++++++++++ .../cluster-new/cluster-new.component.scss | 51 +++++++++++++++++++ .../cluster-new/cluster-new.component.ts | 49 +++++++++++++++++- frontend/src/assets/i18n/en.json | 5 +- frontend/src/assets/i18n/zh_CN.json | 5 +- 6 files changed, 141 insertions(+), 5 deletions(-) diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index e012e6f..eb50e70 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -10,10 +10,10 @@ // limitations under the License. import { Component } from '@angular/core'; -import { addTextIcon, ClarityIcons, userIcon, vmBugIcon, alignBottomIcon, barsIcon, certificateIcon, cogIcon, nodeGroupIcon, organizationIcon, usersIcon, hostGroupIcon, trashIcon, checkCircleIcon, angleIcon, plusCircleIcon, clusterIcon, routerIcon, cloudTrafficIcon, nvmeIcon, refreshIcon, worldIcon, detailsIcon, popOutIcon, timesCircleIcon, searchIcon, recycleIcon, nodesIcon, infoCircleIcon, uploadIcon, warningStandardIcon} from '@cds/core/icon'; +import { addTextIcon, ClarityIcons, userIcon, vmBugIcon, alignBottomIcon, barsIcon, certificateIcon, cogIcon, nodeGroupIcon, organizationIcon, usersIcon, hostGroupIcon, trashIcon, checkCircleIcon, angleIcon, plusCircleIcon, clusterIcon, routerIcon, cloudTrafficIcon, nvmeIcon, refreshIcon, worldIcon, detailsIcon, popOutIcon, timesCircleIcon, searchIcon, recycleIcon, nodesIcon, infoCircleIcon, uploadIcon, warningStandardIcon, minusCircleIcon, minusIcon, plusIcon} from '@cds/core/icon'; import { thinClientIcon } from '@cds/core/icon/shapes/thin-client'; import { updateIcon } from '@cds/core/icon/shapes/update'; -ClarityIcons.addIcons(addTextIcon, vmBugIcon, userIcon, alignBottomIcon, cogIcon, certificateIcon, organizationIcon, barsIcon, nodeGroupIcon, usersIcon, hostGroupIcon, trashIcon, checkCircleIcon, angleIcon, plusCircleIcon, clusterIcon, routerIcon, cloudTrafficIcon, nvmeIcon, updateIcon, refreshIcon, worldIcon, detailsIcon, popOutIcon, timesCircleIcon, searchIcon, recycleIcon, nodesIcon, thinClientIcon,infoCircleIcon, uploadIcon, warningStandardIcon); +ClarityIcons.addIcons(addTextIcon, vmBugIcon, userIcon, alignBottomIcon, cogIcon, certificateIcon, organizationIcon, barsIcon, nodeGroupIcon, usersIcon, hostGroupIcon, trashIcon, checkCircleIcon, angleIcon, plusCircleIcon, clusterIcon, routerIcon, cloudTrafficIcon, nvmeIcon, updateIcon, refreshIcon, worldIcon, detailsIcon, popOutIcon, timesCircleIcon, searchIcon, recycleIcon, nodesIcon, thinClientIcon,infoCircleIcon, uploadIcon, warningStandardIcon, minusCircleIcon, minusIcon, plusIcon); @Component({ selector: 'app-root', diff --git a/frontend/src/app/view/federation/cluster-new/cluster-new.component.html b/frontend/src/app/view/federation/cluster-new/cluster-new.component.html index eaa8eaf..28d58fe 100644 --- a/frontend/src/app/view/federation/cluster-new/cluster-new.component.html +++ b/frontend/src/app/view/federation/cluster-new/cluster-new.component.html @@ -9,6 +9,7 @@

{{'NewCluster.name'| translate}}

{{'NewCluster.basicInformation'| translate}} + @@ -326,6 +327,37 @@
2. {{'NewCluster.certificate'|translate}}:
 + + + {{'NewCluster.deviceConfiguration'|translate}} + + +
    + + + + + + +
    + +
    + + + +
    +
    +
+ + + + + {{'InfraProvider.configuration' | translate}} diff --git a/frontend/src/app/view/federation/cluster-new/cluster-new.component.scss b/frontend/src/app/view/federation/cluster-new/cluster-new.component.scss index c877fa2..240b501 100644 --- a/frontend/src/app/view/federation/cluster-new/cluster-new.component.scss +++ b/frontend/src/app/view/federation/cluster-new/cluster-new.component.scss @@ -84,5 +84,56 @@ clr-stepper-panel{ align-items: center; } } + .gpu-list { + display: flex; + .gpu-number-warp { + display: flex; + align-items: center; + margin-top: 24px; + label { + display: block; + color: #454545; + font-size: .65rem; + font-weight: 600; + font-weight: var(--clr-forms-label-font-weight, 600); + line-height: .9rem; + margin-right: 10px; + } + .gpu-number { + display: flex; + button { + outline: none; + color: #0072A3; + border: 1px solid #0072A3; + width: 25px; + height: 25px; + background-color: transparent; + cursor: pointer; + cds-icon{ + position: relative; + left: -2px; + top: -2px; + } + &.minus{ + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + &.plus { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + } + input { + width: 40px; + height: 25px; + outline: none; + border: none; + border-top: 1px solid #0072A3; + border-bottom: 1px solid #0072A3; + text-align: center; + } + } + } + } } } \ No newline at end of file diff --git a/frontend/src/app/view/federation/cluster-new/cluster-new.component.ts b/frontend/src/app/view/federation/cluster-new/cluster-new.component.ts index 32bd2bf..4084fa6 100644 --- a/frontend/src/app/view/federation/cluster-new/cluster-new.component.ts +++ b/frontend/src/app/view/federation/cluster-new/cluster-new.component.ts @@ -112,6 +112,18 @@ export class ClusterNewComponent implements OnInit { }, ]) ), + deviceConfiguration:this.formBuilder.group(ValidatorGroup([ + { + name: 'enableGPU', + type: ['notRequired'], + value: false + }, + { + name: 'gpuNumber', + type: ['number'], + value: 1 + }, + ])), registry: this.formBuilder.group( ValidatorGroup([ { @@ -281,6 +293,14 @@ export class ClusterNewComponent implements OnInit { return false } } + // deviceConfiguration_disabled returns true when the input provided for adding external spark is invalid + get deviceConfiguration_disabled () { + let result = false + if (this.form.get('deviceConfiguration')?.get('enableGPU')?.value) { + this.form.get('deviceConfiguration')?.get('gpuNumber')?.value > 0 ? result = false : result = true + } + return result + } // external_spark_disabled returns true when the input provided for adding external spark is invalid get external_spark_disabled() { @@ -811,6 +831,8 @@ export class ClusterNewComponent implements OnInit { const spark = this.form.get('externalSpark')?.get('enable_external_spark')?.value const hdfs = this.form.get('externalSpark')?.get('enable_external_hdfs')?.value const pulsar = this.form.get('externalSpark')?.get('enable_external_pulsar')?.value + const gpu = this.form.get('deviceConfiguration')?.get('enableGPU')?.value + const {sparkValuess, hdfsValues, pulsarValues} = this.extractSparkHandler(true) // Build the passed query parameter list const queryList: any = [ @@ -890,6 +912,17 @@ export class ClusterNewComponent implements OnInit { queryList.push(item) }) } + if (gpu) { + queryList.push({ + key: 'fateflow_gpu_num', + value : this.form.get('deviceConfiguration')?.get('gpuNumber')?.value ? this.form.get('deviceConfiguration')?.get('gpuNumber')?.value : 1 + }) + } else { + queryList.push({ + key: 'fateflow_gpu_num', + value : 0 + }) + } this.fedservice.getClusterYaml(queryList). subscribe( @@ -1022,7 +1055,11 @@ export class ClusterNewComponent implements OnInit { binding_mode: Number(this.form.controls['certificate'].get('site_portal_server_cert_mode')?.value), common_name: "", uuid: this.form.controls['certificate'].get('site_portal_server_cert_uuid')?.value - } + }, + fateflow_gpu_num: 0 + } + if (this.form.get('deviceConfiguration')?.get('enableGPU')?.value) { + clusterInfo.fateflow_gpu_num = this.form.get('deviceConfiguration')?.get('gpuNumber')?.value ? this.form.get('deviceConfiguration')?.get('gpuNumber')?.value : 1 } @@ -1076,5 +1113,15 @@ export class ClusterNewComponent implements OnInit { } + // gpuActions user increase or decrease the number of gpu + gpuActions(num: number) { + let value = this.form.get('deviceConfiguration')?.get('gpuNumber')?.value + value +=num + if (value <= 1) { + this.form.get('deviceConfiguration')?.get('gpuNumber')?.setValue(1) + } else { + this.form.get('deviceConfiguration')?.get('gpuNumber')?.setValue(value) + } + } } diff --git a/frontend/src/assets/i18n/en.json b/frontend/src/assets/i18n/en.json index dbc2ef5..54a03e7 100644 --- a/frontend/src/assets/i18n/en.json +++ b/frontend/src/assets/i18n/en.json @@ -270,7 +270,10 @@ "pulsarMngPort": "Manager Port", "pulsarPort": "Port", "sslPort": "SSL Port", - "coresPerNode": "Cores Per Node" + "coresPerNode": "Cores Per Node", + "deviceConfiguration": "Device Configuration", + "enableGPU": "Enabled GPU Support for FATE-Flow (FATE 1.11 and Later) ", + "gpuNumber": "Number of GPU" }, "ExchangeNew": { "name": "Create a New Exchange", diff --git a/frontend/src/assets/i18n/zh_CN.json b/frontend/src/assets/i18n/zh_CN.json index 0d09d1c..48d44b9 100644 --- a/frontend/src/assets/i18n/zh_CN.json +++ b/frontend/src/assets/i18n/zh_CN.json @@ -270,7 +270,10 @@ "pulsarMngPort": "管理端口", "pulsarPort": "端口", "sslPort": "SSL 端口", - "coresPerNode": "单个节点核心数" + "coresPerNode": "单个节点核心数", + "deviceConfiguration": "设备配置", + "enableGPU": "为FATE-Flow启用GPU支持(FATE版本需不低于1.11）", + "gpuNumber": "GPU数量" }, "ExchangeNew": { "name": "创建Exchange",