This is an automated email from the ASF dual-hosted git repository. ytykhun pushed a commit to branch DATALAB-2362 in repository https://gitbox.apache.org/repos/asf/incubator-datalab.git
commit be427c7054697693f1fb990fd90bb78851e0f6b2 Author: Yurii Tykhun <[email protected]> AuthorDate: Wed May 26 12:36:45 2021 +0300 [DATLAB-2362] Showed image list and description on Web DataLab UI --- .../create-environment.component.html | 36 +++++++++++-- .../create-environment.component.scss | 8 +++ .../create-environment.component.ts | 63 +++++++++++++++++++--- 3 files changed, 95 insertions(+), 12 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 27f817d..96b5bd6 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 @@ -87,15 +87,32 @@ </div> </div> + <div + class="image-description control-group" + *ngIf="selectedCloud !== 'gcp' && currentTemplate?.image === 'docker.datalab-deeplearning'" + > + <label class="label"></label> + <div class="control"> + <i class="material-icons" >info</i> + {{currentTemplate?.exploratory_environment_versions[0]?.description}} + </div> + </div> + <div class="control-group" *ngIf="images && images.length > 0"> <label class="label">Select image</label> <div class="control selector-wrapper"> <mat-form-field> <mat-label>Select image</mat-label> - <mat-select formControlName="notebook_image_name" disableOptionCentering> - <mat-option [value]="null">None</mat-option> - <mat-option *ngFor="let image of images" [value]="image.name">{{ image.name }}</mat-option> - <mat-option *ngIf="!images.length" class="multiple-select ml-10" disabled>Images list is empty + <mat-select formControlName="notebook_image_name" panelClass="create-resources-dialog scrolling" disableOptionCentering> + <mat-option [value]="null" (click)="selectedImage = null">None</mat-option> + <mat-option + *ngFor="let image of images" + [value]="image?.name" + (click)="setImage(image)" + > + {{ image?.status ? image?.name + ' (custom image)' : image?.name }} + </mat-option> + <mat-option *ngIf="!images?.length" class="multiple-select ml-10" disabled>Images list is empty </mat-option> </mat-select> <button class="caret"> @@ -105,6 +122,17 @@ </div> </div> + <div + class="image-description control-group" + *ngIf="selectedImage?.description" + > + <label class="label"></label> + <div class="control"> + <i class="material-icons" >info</i> + {{selectedImage?.description}} + </div> + </div> + <div class="control-group name-control"> <label class="label">Name</label> <div class="control"> 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 6baf727..e0af77e 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 @@ -74,6 +74,14 @@ } } +.image-description { + font-size: 12.5px; + + i { + font-size: 14px; + } +} + .content-box { max-height: 580px; overflow-y: auto; 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 7dbf226..779dd1e 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 @@ -17,7 +17,7 @@ * under the License. */ -import { Component, OnInit, ViewChild, Inject } from '@angular/core'; +import { Component, OnInit, Inject } from '@angular/core'; import { FormGroup, FormBuilder, Validators } from '@angular/forms'; import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { ToastrService } from 'ngx-toastr'; @@ -48,6 +48,7 @@ export class ExploratoryEnvironmentCreateComponent implements OnInit { shapes = [] || {}; resourceGrid: any; images: Array<any>; + selectedImage: any; maxNotebookLength: number = 14; public areShapes: boolean; public selectedCloud: string = ''; @@ -62,8 +63,6 @@ export class ExploratoryEnvironmentCreateComponent implements OnInit { gpu: false, }; - - constructor( @Inject(MAT_DIALOG_DATA) public data: any, public toastr: ToastrService, @@ -101,17 +100,42 @@ export class ExploratoryEnvironmentCreateComponent implements OnInit { }); } + public setImage(image) { + this.selectedImage = image; + timer(500).subscribe(_ => { + document.querySelector('#buttons').scrollIntoView({ block: 'center', behavior: 'smooth' }); + }); + } + public setEndpoints(project) { - if (this.images) this.images = []; - if (this.selectedCloud) this.selectedCloud = ''; + const controls = ['endpoint', 'version', 'shape', 'gpuType', 'gpuCount']; + this.resetSelections(controls); + this.endpoints = project.endpoints .filter(e => e.status === 'RUNNING') .map(e => e.name); + } + public resetSelections(controls: Array<string>) { + if (this.images) this.images = []; + if (this.selectedCloud) this.selectedCloud = ''; + if (this.additionalParams.gpu) { + this.additionalParams.gpu = !this.additionalParams.gpu; + this.createExploratoryForm.controls['gpu_enabled'].setValue(this.additionalParams.gpu); + } + this.selectedImage = null; + this.areShapes = false; + this.templates = []; + this.currentTemplate = []; + controls.forEach(control => { + this.createExploratoryForm.controls[control].setValue(null); + }); } public getTemplates(project, endpoint) { - if (this.selectedCloud) this.selectedCloud = ''; + const controls = ['version', 'shape']; + this.resetSelections(controls); + const endpoints = this.data.environments.find(env => env.project === project).endpoints; this.selectedCloud = endpoints.find(endp => endp.name === endpoint).cloudProvider.toLowerCase(); @@ -130,13 +154,27 @@ export class ExploratoryEnvironmentCreateComponent implements OnInit { } public getShapes(template) { + this.selectedImage = null; + const controls = ['notebook_image_name', 'shape', 'gpuType', 'gpuCount'] + controls.forEach(control => { + this.createExploratoryForm.controls[control].setValue(null); + if (control === 'gpuType' || control === 'gpuCount') { + this.createExploratoryForm.controls[control].clearValidators(); + 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; // } 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('deep learning') === -1 + && template.exploratory_environment_versions[0].template_name.toLowerCase().indexOf('deeplearning notebook') === -1 ) { const filtered = Object.keys( SortUtils.shapesSort(template.exploratory_environment_shapes)) @@ -242,7 +280,16 @@ export class ExploratoryEnvironmentCreateComponent implements OnInit { private getImagesList() { this.userResourceService.getUserImages(this.currentTemplate.image, this.createExploratoryForm.controls['project'].value, this.createExploratoryForm.controls['endpoint'].value) - .subscribe((res: any) => this.images = res.filter(el => el.status === 'CREATED'), + .subscribe((res: any) => { + this.images = res.filter(el => el.status === 'CREATED'); + + if(this.selectedCloud === 'gcp' && this.currentTemplate.image === 'docker.datalab-deeplearning') { + this.currentTemplate.exploratory_environment_images = this.currentTemplate.exploratory_environment_images.map(image => { + return {name: image['Image family'] ?? image.name, description: image['Description'] ?? image.description} + }); + this.images.push(...this.currentTemplate.exploratory_environment_images); + } + }, error => this.toastr.error(error.message || 'Images list loading failed!', 'Oops!')); } --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
