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:39 UTC

[incubator-datalab] branch DATALAB-2246 updated (4313d3f -> fc9a452)

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

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


    from 4313d3f  [DATALAB-2233]: Fixed visibility of action menu on small screen
     new 47ef2be  [DATALAB-2233]: Add possibility to create jupiter with GPU
     add 8d8e207  DATALAB-2232 --  refactoring GPU for Jupyter.
     add 4a8169c  DATALAB-2232/DATALAB-2247
     new 63accf4  Merge branch 'DATALAB-2232' of github.com:apache/incubator-dlab into DATALAB-2246
     new 2387e4c  add gpu tag
     add 2543665  [DATALAB-2232] - show gpu for jupyter
     new a9d8089  Merge branch 'DATALAB-2232' of github.com:apache/incubator-dlab into DATALAB-2246
     new fc9a452  [DATALAB-2246]: Added GPU for jupyter on GCP

The 5 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.


Summary of changes:
 .../java/com/epam/datalab/dto/UserInstanceDTO.java |  21 ++++
 .../dto/imagemetadata/ExploratoryMetadataDTO.java  |   3 +
 .../datalab/model/exploratory/Exploratory.java     |   4 +
 .../backendapi/resources/ExploratoryResource.java  |   4 +-
 .../resources/dto/ExploratoryCreateFormDTO.java    | 115 ++-------------------
 .../service/impl/ExploratoryServiceImpl.java       |   6 +-
 .../webapp/src/app/core/util/helpUtils.ts          |  20 ++++
 ...mputational-resource-create-dialog.component.ts |  30 +-----
 .../create-environment.component.html              |  81 +++++++++++++--
 .../create-environment.component.scss              |   5 +
 .../create-environment.component.ts                |  83 +++++++++++++--
 .../detail-dialog/detail-dialog.component.html     |   5 +-
 .../detail-dialog/detail-dialog.component.ts       |   1 -
 .../resources-grid/resources-grid.component.html   |  26 ++++-
 .../resources-grid/resources-grid.component.scss   |   6 ++
 .../resources-grid/resources-grid.model.ts         |   6 +-
 16 files changed, 255 insertions(+), 161 deletions(-)


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


[incubator-datalab] 02/05: Merge branch 'DATALAB-2232' of github.com:apache/incubator-dlab into DATALAB-2246

Posted by dg...@apache.org.
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 63accf4a724dbbeb23c520fd186954dadcd875e6
Merge: 47ef2be 4a8169c
Author: Dmytro_Gnatyshyn <di...@ukr.net>
AuthorDate: Tue Feb 2 09:00:38 2021 +0200

    Merge branch 'DATALAB-2232' of github.com:apache/incubator-dlab into DATALAB-2246

 .../dto/imagemetadata/ExploratoryMetadataDTO.java  |   3 +
 .../datalab/model/exploratory/Exploratory.java     |   4 +
 .../backendapi/resources/ExploratoryResource.java  |   4 +-
 .../resources/dto/ExploratoryCreateFormDTO.java    | 115 ++-------------------
 .../service/impl/ExploratoryServiceImpl.java       |   2 +-
 5 files changed, 19 insertions(+), 109 deletions(-)


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


[incubator-datalab] 05/05: [DATALAB-2246]: Added GPU for jupyter on GCP

Posted by dg...@apache.org.
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 fc9a4525c1364253207267a51b108de071b37f18
Author: Dmytro_Gnatyshyn <di...@ukr.net>
AuthorDate: Tue Feb 2 16:44:11 2021 +0200

    [DATALAB-2246]: Added GPU for jupyter on GCP
---
 .../create-environment.component.ts                |  6 ++---
 .../detail-dialog/detail-dialog.component.html     |  5 +++-
 .../detail-dialog/detail-dialog.component.ts       |  1 -
 .../resources-grid/resources-grid.component.html   | 27 ++++++++++++++++++----
 .../resources-grid/resources-grid.component.scss   |  6 +++++
 .../resources-grid/resources-grid.model.ts         |  6 +++--
 6 files changed, 39 insertions(+), 12 deletions(-)

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 4368e99..08da61c 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
@@ -189,7 +189,7 @@ export class ExploratoryEnvironmentCreateComponent implements OnInit {
     this.additionalParams.gpu = !this.additionalParams.gpu;
     this.createExploratoryForm.controls['gpu_enabled'].setValue(this.additionalParams.gpu);
 
-    const controls = ['master_GPU_type', 'master_GPU_count'];
+    const controls = ['gpuType', 'gpuCount'];
     if (!this.additionalParams.gpu) {
       controls.forEach(control => {
         this.createExploratoryForm.controls[control].setValue(null);
@@ -202,8 +202,8 @@ export class ExploratoryEnvironmentCreateComponent implements OnInit {
         this.createExploratoryForm.controls[control].setValidators([Validators.required]);
         this.createExploratoryForm.controls[control].updateValueAndValidity();
       });
-      timer(100).subscribe(_ => {
-        document.querySelector('#buttons').scrollIntoView({ block: 'start', behavior: 'smooth' });
+      timer(500).subscribe(_ => {
+        document.querySelector('#buttons').scrollIntoView({ block: 'end', behavior: 'smooth' });
       });
     }
   }
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.html
index 3d2dfda..ffc8aab 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.html
@@ -45,7 +45,10 @@
               {{notebook.status}}
             </span>
           </td>
-          <td>{{notebook.shape}}</td>
+          <td>
+            <div>{{notebook.shape}}</div>
+            <div *ngIf="notebook.gpu_type">{{notebook.gpu_type}}</div>
+          </td>
         </tr>
       </table>
 
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.ts
index 5902275..f92bbd9 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.ts
@@ -77,7 +77,6 @@ export class DetailDialogComponent implements OnInit {
     this.notebook = this.data.notebook;
     if (this.notebook) {
       this.tooltip = false;
-
       this.upTimeInHours = (this.notebook.time) ? DateUtils.diffBetweenDatesInHours(this.notebook.time) : 0;
       this.initFormModel();
       this.getClusterConfiguration();
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 94ccc97..51ae9d7 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
@@ -117,13 +117,30 @@
 
           <tr *ngFor="let element of element.exploratory; let i = index" class="element-row mat-row">
             <td class="name-col">
-              <span *ngIf="element.shape !== 'odahu cluster'" matTooltip="{{ element.name }}" matTooltipPosition="above" (click)="printDetailEnvironmentModal(element)">{{ element.name }}</span>
-              <span *ngIf="element.shape === 'odahu cluster'" matTooltip="{{ element.name }}" matTooltipPosition="above" (click)="printDetailOdahuModal(element)">{{ element.name }}</span>
+              <span
+                *ngIf="element.shape !== 'odahu cluster';else odahu"
+                [matTooltip]="element.name"
+                matTooltipPosition="above"
+                (click)="printDetailEnvironmentModal(element)"
+              >
+                {{ element.name }}
+              </span>
+              <ng-template #odahu>
+                <span [matTooltip]=" element.name "
+                      matTooltipPosition="above"
+                      (click)="printDetailOdahuModal(element)"
+                >
+                  {{ element.name }}
+                </span>
+              </ng-template>
             </td>
             <td class="status-col status" ngClass="{{ element.status.toLowerCase() || ''}}">
               {{element.status | underscoreless }}
             </td>
-            <td class="shape-col">{{ element.shape }}</td>
+            <td class="shape-col">
+              <div>{{ element.shape }}</div>
+              <div *ngIf="element.gpu_type">{{ element.gpu_type }}</div>
+            </td>
 
             <td class="tag-col selection">
               <mat-chip-list aria-label="Tags">
@@ -140,8 +157,8 @@
                 <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 *ngIf="element.tags.gpu_tag">
+                  {{ element.tags.gpu_tag?.toUpperCase() }}
                 </mat-chip>
               </mat-chip-list>
             </td>
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.scss
index 50b7694..9de843d 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.scss
@@ -89,6 +89,12 @@ table.resources {
           //min-width: 187px;
         }
 
+        &.shape-col{
+          align-items: start;
+          flex-direction: column;
+          justify-content: center;
+        }
+
         &.resources-col {
           overflow: hidden;
           text-overflow: ellipsis;
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.model.ts b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.model.ts
index 1465199..146a5e7 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.model.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.model.ts
@@ -51,7 +51,8 @@ export class ExploratoryModel {
     public endpoint: string,
     public tags: any,
     public edgeNodeStatus: string,
-    public activeCompute: boolean
+    public activeCompute: boolean,
+    public gpu_type?: string
   ) { }
 
   public static loadEnvironments(data: Array<any>) {
@@ -180,7 +181,8 @@ export class ExploratoryModel {
               el.endpoint,
               el.tags,
               value.shared[el.endpoint].status,
-              !!el.computational_resources.filter(resource => resource.status !== 'terminated' && resource.status !== 'failed').length
+              !!el.computational_resources.filter(resource => resource.status !== 'terminated' && resource.status !== 'failed').length,
+              el.gpuType
             );
           })
         };


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


[incubator-datalab] 01/05: [DATALAB-2233]: Add possibility to create jupiter with GPU

Posted by dg...@apache.org.
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 47ef2bebb27ff756cb781cdb90849efa37f86f82
Author: Dmytro_Gnatyshyn <di...@ukr.net>
AuthorDate: Mon Feb 1 14:33:16 2021 +0200

    [DATALAB-2233]: Add possibility to create jupiter with GPU
---
 .../webapp/src/app/core/util/helpUtils.ts          | 20 ++++++
 ...mputational-resource-create-dialog.component.ts | 26 +------
 .../create-environment.component.html              | 82 +++++++++++++++++++---
 .../create-environment.component.scss              |  5 ++
 .../create-environment.component.ts                | 75 +++++++++++++++++---
 5 files changed, 167 insertions(+), 41 deletions(-)

diff --git a/services/self-service/src/main/resources/webapp/src/app/core/util/helpUtils.ts b/services/self-service/src/main/resources/webapp/src/app/core/util/helpUtils.ts
index 68178d5..edd51c9 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/util/helpUtils.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/util/helpUtils.ts
@@ -35,4 +35,24 @@ export class HelpUtils {
         return;
     }
   }
+
+  public static setGPUCount(type, gpuType): Array<number> {
+    let count = [];
+    switch (type) {
+      case 'n1-highmem-32' || 'n1-highcpu-32':
+        count = [4, 8];
+        break;
+      case 'n1-highmem-16':
+        count = [2, 4, 8];
+        break;
+      default:
+        count = [1, 2, 4, 8];
+        break;
+    }
+    if (gpuType === 'nvidia-tesla-t4') {
+      count.pop();
+    }
+
+    return count;
+  }
 }
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 4822dc0..9411daa 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
@@ -24,7 +24,7 @@ import { ToastrService } from 'ngx-toastr';
 
 import { ComputationalResourceModel } from './computational-resource-create.model';
 import { UserResourceService } from '../../../core/services';
-import { HTTP_STATUS_CODES, PATTERNS, CheckUtils, SortUtils } from '../../../core/util';
+import {HTTP_STATUS_CODES, PATTERNS, CheckUtils, SortUtils, HelpUtils} from '../../../core/util';
 
 import { DICTIONARY } from '../../../../dictionary/global.dictionary';
 import { CLUSTER_CONFIGURATION } from './cluster-configuration-templates';
@@ -350,33 +350,13 @@ export class ComputationalResourceCreateDialogComponent implements OnInit {
     }
   }
 
-  public setGPUCount(type, gpuType): Array<number> {
-    let count = [];
-    switch (type) {
-      case 'n1-highmem-32' || 'n1-highcpu-32':
-        count = [4, 8];
-        break;
-      case 'n1-highmem-16':
-        count = [2, 4, 8];
-        break;
-      default:
-        count = [1, 2, 4, 8];
-        break;
-    }
-    if (gpuType === 'nvidia-tesla-t4') {
-      count.pop();
-    }
-
-    return count;
-  }
-
   public setCount(type: any, gpuType: any): void {
     if (type === 'master') {
       const masterShape = this.resourceForm.controls['shape_master'].value;
-      this.masterGPUcount = this.setGPUCount(masterShape, gpuType);
+      this.masterGPUcount = HelpUtils.setGPUCount(masterShape, gpuType);
     } else {
       const slaveShape = this.resourceForm.controls['shape_slave'].value;
-      this.slaveGPUcount = this.setGPUCount(slaveShape, gpuType);
+      this.slaveGPUcount = HelpUtils.setGPUCount(slaveShape, gpuType);
     }
   }
 
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 eabff73..9cd1c8c 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
@@ -164,18 +164,84 @@
         <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="config-details" [ngClass]="{ show: configuration?.nativeElement['checked'] || false }">
+<!--            <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
+              <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>
           </div>
+          <ng-template [ngIf]="selectedCloud === 'gcp'">
+            <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}">
+                  <span class="checked-checkbox" *ngIf="this.additionalParams.gpu"></span>
+                </div>
+                <span class=" pl-5">GPU</span>
+              </div>
+              <ng-template [ngIf]="this.additionalParams.gpu">
+                <div class="control-group">
+                  <label class="label">Master GPU type</label>
+                  <div class="control selector-wrapper"
+                       [matTooltip]="'Please, select instance size.'"
+                       matTooltipPosition="above"
+                       [matTooltipClass]="'full-size-tooltip'"
+                       [matTooltipDisabled]="!!createExploratoryForm.controls['shape'].value"
+                  >
+                <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)">
+                        <strong class="highlight icon-label">{{ list_item.Size }}</strong> {{ list_item.Gpu_type }}
+                      </mat-option>
 
+                  </mat-select>
+                  <button class="caret">
+                    <i class="material-icons">keyboard_arrow_down</i>
+                  </button>
+                </mat-form-field>
+                </span>
+                  </div>
+                </div>
+                <div class="control-group">
+                  <label class="label">Master GPU count</label>
+                  <div class="control selector-wrapper"
+                       [matTooltip]="'Please, select master GPU type.'"
+                       matTooltipPosition="above"
+                       [matTooltipClass]="'full-size-tooltip'"
+                       [matTooltipDisabled]="!!createExploratoryForm.controls['master_GPU_type'].value"
+                  >
+                <span class="form-field-wrapper" [ngClass]="{ 'not-active': !createExploratoryForm.controls['master_GPU_type'].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">
+                        {{ list_item }}
+                      </mat-option>
+                  </mat-select>
+                  <button class="caret">
+                    <i class="material-icons">keyboard_arrow_down</i>
+                  </button>
+                </mat-form-field>
+                </span>
+                  </div>
+                </div>
+              </ng-template>
+          </div>
+          </ng-template>
             <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.
@@ -185,7 +251,7 @@
             </small>
         </div>
 
-        <div class="text-center m-top-30">
+        <div class="text-center m-top-30"  id="buttons">
           <button mat-raised-button type="button" class="butt action" (click)="dialogRef.close()">Cancel</button>
           <button mat-raised-button type="button" class="butt butt-success action"
             [disabled]="!createExploratoryForm?.valid"
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/create-environment/create-environment.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/create-environment/create-environment.component.scss
index aecad81..6baf727 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/create-environment/create-environment.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/create-environment/create-environment.component.scss
@@ -18,6 +18,11 @@
  */
 
 .checkbox-group {
+
+  .empty-checkbox{
+    margin: 0;
+  }
+
   .config-details {
     height: 0;
     opacity: 0;
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 f7cb25a..1c50761 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
@@ -24,10 +24,11 @@ import { ToastrService } from 'ngx-toastr';
 
 import { Project } from '../../../administration/project/project.component';
 import { UserResourceService, ProjectService } from '../../../core/services';
-import { CheckUtils, SortUtils, HTTP_STATUS_CODES, PATTERNS } from '../../../core/util';
+import {CheckUtils, SortUtils, HTTP_STATUS_CODES, PATTERNS, HelpUtils} from '../../../core/util';
 import { DICTIONARY } from '../../../../dictionary/global.dictionary';
 import { CLUSTER_CONFIGURATION } from '../../computational/computational-resource-create-dialog/cluster-configuration-templates';
 import {tap} from 'rxjs/operators';
+import {timer} from 'rxjs';
 
 @Component({
   selector: 'create-environment',
@@ -49,8 +50,19 @@ export class ExploratoryEnvironmentCreateComponent implements OnInit {
   images: Array<any>;
   maxNotebookLength: number = 14;
   public areShapes: boolean;
+  public selectedCloud: string = '';
+  public masterGPUcount: Array<number>;
+  public masterGPUtype = [
+    {Size: 'S', Gpu_type: 'nvidia-tesla-t4'},
+    {Size: 'M', Gpu_type: 'nvidia-tesla-v100'}
+  ];
+
+  public additionalParams = {
+    configurationNode: false,
+    gpu: false,
+  };
+
 
-  @ViewChild('configurationNode') configuration;
 
   constructor(
     @Inject(MAT_DIALOG_DATA) public data: any,
@@ -91,13 +103,18 @@ export class ExploratoryEnvironmentCreateComponent implements OnInit {
 
   public setEndpoints(project) {
     if (this.images) this.images = [];
-
+    if (this.selectedCloud) this.selectedCloud = '';
     this.endpoints = project.endpoints
       .filter(e => e.status === 'RUNNING')
       .map(e => e.name);
+
   }
 
   public getTemplates(project, endpoint) {
+    if (this.selectedCloud) this.selectedCloud = '';
+    const endpoints = this.data.environments.find(env => env.project === project).endpoints;
+    this.selectedCloud = endpoints.find(endp => endp.name === endpoint).cloudProvider.toLowerCase();
+
     this.userResourceService.getExploratoryTemplates(project, endpoint)
       .pipe(tap(results => {
 
@@ -153,11 +170,47 @@ export class ExploratoryEnvironmentCreateComponent implements OnInit {
   }
 
   public selectConfiguration() {
-    const value = (this.configuration.nativeElement.checked && this.createExploratoryForm)
-      ? JSON.stringify(CLUSTER_CONFIGURATION.SPARK, undefined, 2) : '';
+    this.additionalParams.configurationNode = !this.additionalParams.configurationNode;
+    if (this.additionalParams.configurationNode) {
+      const value = (this.additionalParams.configurationNode && this.createExploratoryForm)
+        ? JSON.stringify(CLUSTER_CONFIGURATION.SPARK, undefined, 2) : '';
+      timer(500).subscribe(_ => {
+        document.querySelector('#buttons').scrollIntoView({ block: 'start', behavior: 'smooth' });
+      });
+      this.createExploratoryForm.controls['cluster_config'].setValue(value);
+    }
+  }
+
+  public addGpuFields() {
+    this.additionalParams.gpu = !this.additionalParams.gpu;
+
+    const controls = ['master_GPU_type', 'master_GPU_count'];
+    if (!this.additionalParams.gpu) {
+      controls.forEach(control => {
+        this.createExploratoryForm.controls[control].setValue(null);
+        this.createExploratoryForm.controls[control].clearValidators();
+        this.createExploratoryForm.controls[control].updateValueAndValidity();
+      });
+
+    } else {
+      controls.forEach(control => {
+        this.createExploratoryForm.controls[control].setValidators([Validators.required]);
+        this.createExploratoryForm.controls[control].updateValueAndValidity();
+      });
+      timer(100).subscribe(_ => {
+        document.querySelector('#buttons').scrollIntoView({ block: 'start', behavior: 'smooth' });
+      });
+    }
+  }
 
-    document.querySelector('#config').scrollIntoView({ block: 'start', behavior: 'smooth' });
-    this.createExploratoryForm.controls['cluster_config'].setValue(value);
+  public setCount(type: any, gpuType: any): void {
+    // if (type === 'master') {
+      const masterShape = this.createExploratoryForm.controls['shape'].value;
+      this.masterGPUcount = HelpUtils.setGPUCount(masterShape, gpuType);
+    // } else {
+    //   const slaveShape = this.resourceForm.controls['shape_slave'].value;
+    //   this.slaveGPUcount = HelpUtils.setGPUCount(slaveShape, gpuType);
+    // }
   }
 
   private initFormModel(): void {
@@ -174,7 +227,9 @@ export class ExploratoryEnvironmentCreateComponent implements OnInit {
         this.checkDuplication.bind(this)
       ]],
       cluster_config: ['', [this.validConfiguration.bind(this)]],
-      custom_tag: ['', [Validators.pattern(PATTERNS.namePattern)]]
+      custom_tag: ['', [Validators.pattern(PATTERNS.namePattern)]],
+      master_GPU_type: [null],
+      master_GPU_count: [null],
     });
   }
 
@@ -193,8 +248,8 @@ export class ExploratoryEnvironmentCreateComponent implements OnInit {
   }
 
   private validConfiguration(control) {
-    if (this.configuration)
-      return this.configuration.nativeElement['checked']
+    if (this.additionalParams.configurationNode)
+      return this.additionalParams.configurationNode
         ? (control.value && control.value !== null && CheckUtils.isJSON(control.value) ? null : { valid: false })
         : null;
   }


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


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

Posted by dg...@apache.org.
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


[incubator-datalab] 04/05: Merge branch 'DATALAB-2232' of github.com:apache/incubator-dlab into DATALAB-2246

Posted by dg...@apache.org.
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 a9d80893d9e9e12e9869a6f07eceeb6bb613b3d5
Merge: 2387e4c 2543665
Author: Dmytro_Gnatyshyn <di...@ukr.net>
AuthorDate: Tue Feb 2 13:36:34 2021 +0200

    Merge branch 'DATALAB-2232' of github.com:apache/incubator-dlab into DATALAB-2246

 .../java/com/epam/datalab/dto/UserInstanceDTO.java  | 21 +++++++++++++++++++++
 .../service/impl/ExploratoryServiceImpl.java        |  6 +++++-
 2 files changed, 26 insertions(+), 1 deletion(-)


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