Add gpu on the create cluster page

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',

frontend/src/app/view/federation/cluster-new/cluster-new.component.html

@@ -9,6 +9,7 @@ <h2>{{'NewCluster.name'| translate}}</h2>
     <clr-stepper-panel formGroupName="info">
       <clr-step-title>{{'NewCluster.basicInformation'| translate}}</clr-step-title>
       <clr-step-description></clr-step-description>
+
       <clr-step-content *clrIfExpanded>
         <clr-radio-container clrInline class="no-warp">
           <label>{{'CommonlyUse.type'| translate}}</label>
@@ -326,6 +327,37 @@ <h5>2. {{'NewCluster.certificate'|translate}}:</h5>
         <button clrStepButton="next" [disabled]="persistence_disabled">{{'CommonlyUse.next' | translate}}</button>
       </clr-stepper-panel>
 
+      <!-- Step gpu -->
+      <clr-stepper-panel formGroupName="deviceConfiguration">
+        <clr-step-title>{{'NewCluster.deviceConfiguration'|translate}}</clr-step-title>
+        <clr-step-description></clr-step-description>
+        <clr-step-content *clrIfExpanded>
+          <ul class="list gpu-list">
+            <clr-toggle-container clrInline class="no-warp no-warp2">
+              <label>{{'NewCluster.enableGPU'|translate}}:</label>
+              <clr-toggle-wrapper>
+                <input type="checkbox" clrToggle name="enableGPU" value="enablePersistence"
+                  formControlName="enableGPU" />
+              </clr-toggle-wrapper>
+            </clr-toggle-container>
+            <div class="gpu-number-warp" *ngIf="form.get('deviceConfiguration')?.get('enableGPU')?.value">
+              <label>{{'NewCluster.gpuNumber'|translate}}:</label>
+              <div class="gpu-number">    
+                <button type="button" (click)="gpuActions(-1)" class="minus">
+                  <cds-icon shape="minus"></cds-icon>
+                </button>
+                <input name="gpuNumber" formControlName="gpuNumber" type="number" >
+                <button type="button" class="plus" (click)="gpuActions(1)">
+                  <cds-icon shape="plus" ></cds-icon>
+                </button>
+              </div>
+            </div>
+          </ul>
+        </clr-step-content>
+        <button clrStepButton="next" [disabled]="deviceConfiguration_disabled">{{'CommonlyUse.next' | translate}}</button>
+      </clr-stepper-panel>
+
+
       <!-- Step 10 -->
       <clr-stepper-panel formGroupName="registry">
         <clr-step-title>{{'InfraProvider.configuration' | translate}}</clr-step-title>

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;
+                    }
+                }
+            }
+        }
     }
 }

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)
+    }
+  }
 }
 

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",

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",