You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@datalab.apache.org by dg...@apache.org on 2021/02/02 14:44:42 UTC

[incubator-datalab] 03/05: add gpu tag

This is an automated email from the ASF dual-hosted git repository.

dgnatyshyn pushed a commit to branch DATALAB-2246
in repository https://gitbox.apache.org/repos/asf/incubator-datalab.git

commit 2387e4ccb46dc4868b80d7cf62f2d0d4c8d1a0de
Author: Dmytro_Gnatyshyn <di...@ukr.net>
AuthorDate: Tue Feb 2 13:35:53 2021 +0200

    add gpu tag
---
 ...mputational-resource-create-dialog.component.ts |  4 +-
 .../create-environment.component.html              | 63 +++++++++++-----------
 .../create-environment.component.ts                | 18 ++++---
 .../resources-grid/resources-grid.component.html   |  3 ++
 4 files changed, 47 insertions(+), 41 deletions(-)

diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.ts
index 9411daa..24df808 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.ts
@@ -163,9 +163,9 @@ export class ComputationalResourceCreateDialogComponent implements OnInit {
       instance_price: [0, [this.validInstanceSpotRange.bind(this)]],
       configuration_parameters: ['', [this.validConfiguration.bind(this)]],
       custom_tag: [this.notebook_instance.tags.custom_tag],
-      master_GPU_type: [''],
+      gpuType: [''],
       slave_GPU_type: [''],
-      master_GPU_count: [''],
+      gpuCount: [''],
       slave_GPU_count: [''],
     });
   }
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/create-environment/create-environment.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/create-environment/create-environment.component.html
index 9cd1c8c..11e853f 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/create-environment/create-environment.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/create-environment/create-environment.component.html
@@ -162,26 +162,7 @@
         </div>
 
         <div *ngIf="currentTemplate">
-          <div class="checkbox-group"
-               *ngIf="currentTemplate?.image !== 'docker.datalab-zeppelin' && currentTemplate?.image !== 'docker.datalab-superset' && currentTemplate?.image !== 'docker.datalab-jupyterlab'">
-<!--            <label>-->
-<!--              <input #configurationNode type="checkbox" (change)="selectConfiguration()"/> Spark configurations-->
-<!--            </label>-->
-            <div class="d-flex cursor-pointer label m-bott-20" (click)="selectConfiguration()">
-              <div class="empty-checkbox" [ngClass]="{'checked': this.additionalParams.configurationNode}">
-                <span class="checked-checkbox" *ngIf="this.additionalParams.configurationNode"></span>
-              </div>
-              <span class=" pl-5">Spark configurations</span>
-            </div>
-            <div class="config-details" [ngClass]="{ show: this.additionalParams.configurationNode}">
-              <textarea formControlName="cluster_config" placeholder="Cluster configuration template, JSON"
-                        data-gramm_editor="false" id="config"></textarea>
-              <span class="error spark-config"
-                    *ngIf="!createExploratoryForm?.controls.cluster_config.valid && createExploratoryForm?.controls['cluster_config'].dirty">Configuration
-                parameters is not in a valid format.</span>
-            </div>
-          </div>
-          <ng-template [ngIf]="selectedCloud === 'gcp'">
+          <ng-template [ngIf]="selectedCloud === 'gcp' && currentTemplate?.image === 'docker.datalab-jupyter'">
             <div class="checkbox-group">
               <div class="d-flex cursor-pointer label m-bott-20" (click)="addGpuFields()">
                 <div class="empty-checkbox" [ngClass]="{'checked': this.additionalParams.gpu}">
@@ -191,7 +172,7 @@
               </div>
               <ng-template [ngIf]="this.additionalParams.gpu">
                 <div class="control-group">
-                  <label class="label">Master GPU type</label>
+                  <label class="label">GPU type</label>
                   <div class="control selector-wrapper"
                        [matTooltip]="'Please, select instance size.'"
                        matTooltipPosition="above"
@@ -200,10 +181,10 @@
                   >
                 <span class="form-field-wrapper" [ngClass]="{ 'not-active': !createExploratoryForm.controls['shape'].value}">
                 <mat-form-field>
-                  <mat-label>Select master GPU type</mat-label>
-                  <mat-select formControlName="master_GPU_type" disableOptionCentering [disabled]="!createExploratoryForm.controls['shape'].value"
-                              panelClass="create-resources-shapes" placeholder="Master GPU type">
-                      <mat-option *ngFor="let list_item of masterGPUtype" [value]="list_item.Gpu_type" (click)="setCount('', list_item.Gpu_type)">
+                  <mat-label>Select GPU type</mat-label>
+                  <mat-select formControlName="gpuType" disableOptionCentering [disabled]="!createExploratoryForm.controls['shape'].value"
+                              panelClass="create-resources-shapes" placeholder="GPU type">
+                      <mat-option *ngFor="let list_item of gpuTypes" [value]="list_item.Gpu_type" (click)="setCount('', list_item.Gpu_type)">
                         <strong class="highlight icon-label">{{ list_item.Size }}</strong> {{ list_item.Gpu_type }}
                       </mat-option>
 
@@ -216,19 +197,19 @@
                   </div>
                 </div>
                 <div class="control-group">
-                  <label class="label">Master GPU count</label>
+                  <label class="label">GPU count</label>
                   <div class="control selector-wrapper"
-                       [matTooltip]="'Please, select master GPU type.'"
+                       [matTooltip]="'Please, select GPU type.'"
                        matTooltipPosition="above"
                        [matTooltipClass]="'full-size-tooltip'"
-                       [matTooltipDisabled]="!!createExploratoryForm.controls['master_GPU_type'].value"
+                       [matTooltipDisabled]="!!createExploratoryForm.controls['gpuType'].value"
                   >
-                <span class="form-field-wrapper" [ngClass]="{ 'not-active': !createExploratoryForm.controls['master_GPU_type'].value}">
+                <span class="form-field-wrapper" [ngClass]="{ 'not-active': !createExploratoryForm.controls['gpuType'].value}">
                 <mat-form-field>
-                  <mat-label>Select master GPU count</mat-label>
-                  <mat-select formControlName="master_GPU_count" disableOptionCentering [disabled]="!createExploratoryForm.controls['master_GPU_type'].value"
-                              panelClass="create-resources-shapes" placeholder="Master GPU count">
-                      <mat-option *ngFor="let list_item of masterGPUcount" [value]="list_item">
+                  <mat-label>Select GPU count</mat-label>
+                  <mat-select formControlName="gpuCount" disableOptionCentering [disabled]="!createExploratoryForm.controls['gpuType'].value"
+                              panelClass="create-resources-shapes" placeholder="GPU count">
+                      <mat-option *ngFor="let list_item of gpuCount" [value]="list_item">
                         {{ list_item }}
                       </mat-option>
                   </mat-select>
@@ -242,6 +223,22 @@
               </ng-template>
           </div>
           </ng-template>
+          <div class="checkbox-group"
+               *ngIf="currentTemplate?.image !== 'docker.datalab-zeppelin' && currentTemplate?.image !== 'docker.datalab-superset' && currentTemplate?.image !== 'docker.datalab-jupyterlab'">
+            <div class="d-flex cursor-pointer label m-bott-20" (click)="selectConfiguration()">
+              <div class="empty-checkbox" [ngClass]="{'checked': this.additionalParams.configurationNode}">
+                <span class="checked-checkbox" *ngIf="this.additionalParams.configurationNode"></span>
+              </div>
+              <span class=" pl-5">Spark configurations</span>
+            </div>
+            <div class="config-details" [ngClass]="{ show: this.additionalParams.configurationNode}">
+              <textarea formControlName="cluster_config" placeholder="Cluster configuration template, JSON"
+                        data-gramm_editor="false" id="config"></textarea>
+              <span class="error spark-config"
+                    *ngIf="!createExploratoryForm?.controls.cluster_config.valid && createExploratoryForm?.controls['cluster_config'].dirty">Configuration
+                parameters is not in a valid format.</span>
+            </div>
+          </div>
             <small *ngIf="currentTemplate?.image === 'docker.datalab-zeppelin'">
                 Spark default configuration for Apache Zeppelin can not be changed from DataLab UI. Currently it can be
                 done directly through Apache Zeppelin interpreter menu.
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/create-environment/create-environment.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/create-environment/create-environment.component.ts
index 1c50761..4368e99 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/create-environment/create-environment.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/create-environment/create-environment.component.ts
@@ -51,8 +51,8 @@ export class ExploratoryEnvironmentCreateComponent implements OnInit {
   maxNotebookLength: number = 14;
   public areShapes: boolean;
   public selectedCloud: string = '';
-  public masterGPUcount: Array<number>;
-  public masterGPUtype = [
+  public gpuCount: Array<number>;
+  public gpuTypes = [
     {Size: 'S', Gpu_type: 'nvidia-tesla-t4'},
     {Size: 'M', Gpu_type: 'nvidia-tesla-v100'}
   ];
@@ -124,11 +124,15 @@ export class ExploratoryEnvironmentCreateComponent implements OnInit {
       }))
       .subscribe(templates =>  {
         this.templates = templates;
-      }
+        }
       );
+
   }
 
   public getShapes(template) {
+    if (this.selectedCloud === 'gcp' && template.image === 'docker.datalab-jupyter') {
+      this.gpuTypes = template.gpu_types;
+    }
     this.currentTemplate = template;
     const allowed: any = ['GPU optimized'];
     if (template.exploratory_environment_versions[0].template_name.toLowerCase().indexOf('tensorflow') === -1
@@ -183,6 +187,7 @@ export class ExploratoryEnvironmentCreateComponent implements OnInit {
 
   public addGpuFields() {
     this.additionalParams.gpu = !this.additionalParams.gpu;
+    this.createExploratoryForm.controls['gpu_enabled'].setValue(this.additionalParams.gpu);
 
     const controls = ['master_GPU_type', 'master_GPU_count'];
     if (!this.additionalParams.gpu) {
@@ -206,7 +211,7 @@ export class ExploratoryEnvironmentCreateComponent implements OnInit {
   public setCount(type: any, gpuType: any): void {
     // if (type === 'master') {
       const masterShape = this.createExploratoryForm.controls['shape'].value;
-      this.masterGPUcount = HelpUtils.setGPUCount(masterShape, gpuType);
+      this.gpuCount = HelpUtils.setGPUCount(masterShape, gpuType);
     // } else {
     //   const slaveShape = this.resourceForm.controls['shape_slave'].value;
     //   this.slaveGPUcount = HelpUtils.setGPUCount(slaveShape, gpuType);
@@ -228,8 +233,9 @@ export class ExploratoryEnvironmentCreateComponent implements OnInit {
       ]],
       cluster_config: ['', [this.validConfiguration.bind(this)]],
       custom_tag: ['', [Validators.pattern(PATTERNS.namePattern)]],
-      master_GPU_type: [null],
-      master_GPU_count: [null],
+      gpuType: [null],
+      gpuCount: [null],
+      gpu_enabled: [false]
     });
   }
 
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.html
index ac7311b..94ccc97 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.html
@@ -140,6 +140,9 @@
                 <mat-chip matTooltip="Project tag: {{ element.tags.project_tag }}" matTooltipPosition="above">
                   {{ element.tags.project_tag }}
                 </mat-chip>
+                <mat-chip matTooltip="Gpu tag: {{ element.tags.gpu_tag }}" matTooltipPosition="above" *ngIf="element.tags.gpu_tag">
+                  {{ element.tags.gpu_tag }}
+                </mat-chip>
               </mat-chip-list>
             </td>
 


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@datalab.apache.org
For additional commands, e-mail: commits-help@datalab.apache.org