This is an automated email from the ASF dual-hosted git repository. ytykhun pushed a commit to branch DATALAB-2353 in repository https://gitbox.apache.org/repos/asf/incubator-datalab.git
commit 8c5350c7cac9eb5110c5df481f488a0c1917eafe Author: Yurii Tykhun <[email protected]> AuthorDate: Mon May 31 10:06:26 2021 +0300 [DATALAB-2353] retrieved the list of available GPU during endpoint deployment --- .../create-environment.component.html | 29 ++++++++++++---- .../create-environment.component.ts | 40 +++++++++++++++++----- 2 files changed, 53 insertions(+), 16 deletions(-) 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 96b5bd6..a08ff84 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 @@ -166,7 +166,7 @@ <mat-select formControlName="shape" disableOptionCentering [disabled]="!currentTemplate || !areShapes && currentTemplate" panelClass="create-resources-shapes scrolling" placeholder="Instance size"> <mat-optgroup *ngFor="let item of (shapes | keys)" [label]="item.key | underscoreless"> - <mat-option *ngFor="let list_item of item.value" [value]="list_item.Type"> + <mat-option *ngFor="let list_item of item.value" [value]="list_item.Type" (click)="setInstanceSize()"> <strong class="highlight icon-label">{{ list_item.Size }}</strong> {{ list_item.Type }} </mat-option> </mat-optgroup> @@ -190,15 +190,28 @@ </div> <div *ngIf="currentTemplate"> - <ng-template [ngIf]="selectedCloud === 'gcp' && currentTemplate?.image === 'docker.datalab-jupyter'"> + <ng-template + [ngIf]="selectedCloud === 'gcp' && + (currentTemplate?.image === 'docker.datalab-jupyter' || + currentTemplate?.image === 'docker.datalab-deeplearning' || + currentTemplate?.image === 'docker.datalab-tensor')" + > <div class="checkbox-group"> - <div class="d-flex cursor-pointer label m-bott-20" (click)="addGpuFields()"> + <div + class="d-flex cursor-pointer label m-bott-20" + *ngIf="currentTemplate?.image === 'docker.datalab-jupyter'" + (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"> + <ng-template + [ngIf]="this.additionalParams.gpu || + currentTemplate?.image === 'docker.datalab-deeplearning' || + currentTemplate?.image === 'docker.datalab-tensor'" + > <div class="control-group"> <label class="label">GPU type</label> <div class="control selector-wrapper" @@ -212,10 +225,12 @@ <mat-label>Select GPU type</mat-label> <mat-select formControlName="gpuType" disableOptionCentering [disabled]="!createExploratoryForm.controls['shape'].value" panelClass="create-resources-dialog" 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 *ngFor="let list_item of gpuTypes" [value]="list_item" (click)="setCount('', list_item)"> + {{ list_item}} + </mat-option> + <mat-option *ngIf="!gpuTypes.length" class="multiple-select ml-10" disabled> + GPU list is empty </mat-option> - </mat-select> <button class="caret"> <i class="material-icons">keyboard_arrow_down</i> 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 779dd1e..0acb47f 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 @@ -53,10 +53,7 @@ export class ExploratoryEnvironmentCreateComponent implements OnInit { public areShapes: boolean; public selectedCloud: string = ''; public gpuCount: Array<number>; - public gpuTypes = [ - {Size: 'S', Gpu_type: 'nvidia-tesla-t4'}, - {Size: 'M', Gpu_type: 'nvidia-tesla-v100'} - ]; + public gpuTypes: Array<string> = []; public additionalParams = { configurationNode: false, @@ -155,7 +152,8 @@ export class ExploratoryEnvironmentCreateComponent implements OnInit { public getShapes(template) { this.selectedImage = null; - const controls = ['notebook_image_name', 'shape', 'gpuType', 'gpuCount'] + const controls = ['notebook_image_name', 'shape', 'gpuType', 'gpuCount']; + controls.forEach(control => { this.createExploratoryForm.controls[control].setValue(null); if (control === 'gpuType' || control === 'gpuCount') { @@ -163,16 +161,26 @@ export class ExploratoryEnvironmentCreateComponent implements OnInit { this.createExploratoryForm.controls[control].updateValueAndValidity(); } }); + if (this.additionalParams.gpu) { this.additionalParams.gpu = !this.additionalParams.gpu; this.createExploratoryForm.controls['gpu_enabled'].setValue(this.additionalParams.gpu); } - // if (this.selectedCloud === 'gcp' && template.image === 'docker.datalab-jupyter') { - // this.gpuTypes = template.gpu_types; - // } + if (this.selectedCloud === 'gcp' && + (template?.image === 'docker.datalab-jupyter' || + template?.image === 'docker.datalab-deeplearning' || + template?.image === 'docker.datalab-tensor')) { + this.gpuTypes = template?.computationGPU ? template.computationGPU : []; + + if(template?.image === 'docker.datalab-tensor' || template?.image === 'docker.datalab-deeplearning') { + this.addGpuFields(); + } + } + this.currentTemplate = template; const allowed: any = ['GPU optimized']; + if (template.exploratory_environment_versions[0].template_name.toLowerCase().indexOf('tensorflow') === -1 && template.exploratory_environment_versions[0].template_name.toLowerCase().indexOf('deeplearning notebook') === -1 ) { @@ -200,6 +208,7 @@ export class ExploratoryEnvironmentCreateComponent implements OnInit { }; data.cluster_config = data.cluster_config ? JSON.parse(data.cluster_config) : null; + this.userResourceService.createExploratoryEnvironment({ ...parameters, ...data }).subscribe((response: any) => { if (response.status === HTTP_STATUS_CODES.OK) this.dialogRef.close(); }, error => this.toastr.error(error.message || 'Exploratory creation failed!', 'Oops!')); @@ -241,12 +250,25 @@ export class ExploratoryEnvironmentCreateComponent implements OnInit { this.createExploratoryForm.controls[control].updateValueAndValidity(); }); timer(500).subscribe(_ => { - document.querySelector('#buttons').scrollIntoView({ block: 'end', behavior: 'smooth' }); + document.querySelector('#buttons').scrollIntoView({ block: 'center', behavior: 'smooth' }); }); } } + public setInstanceSize() { + const controls = ['gpuType', 'gpuCount']; + controls.forEach(control => { + this.createExploratoryForm.controls[control].setValue(null); + }); + } + public setCount(type: any, gpuType: any): void { + if (gpuType && this.currentTemplate.image === 'docker.datalab-deeplearning') { + this.additionalParams.gpu = true; + this.createExploratoryForm.controls['gpu_enabled'].setValue(this.additionalParams.gpu); + this.createExploratoryForm.controls['gpuCount'].setValidators([Validators.required]); + this.createExploratoryForm.controls['gpuCount'].updateValueAndValidity(); + } // if (type === 'master') { const masterShape = this.createExploratoryForm.controls['shape'].value; this.gpuCount = HelpUtils.setGPUCount(masterShape, gpuType); --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
