This is an automated email from the ASF dual-hosted git repository. ankovalyshyn pushed a commit to branch feature/projects in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit 69effa790c543341de18e44d2579b7f43c1f9cf7 Author: Andriana Kovalyshyn <[email protected]> AuthorDate: Fri May 31 14:03:27 2019 +0300 [DLAB-631]: added projects to exploratory creation --- ...ratory-environment-create-dialog.component.html | 98 +++++++++---- ...loratory-environment-create-dialog.component.ts | 151 ++++++++++++--------- .../exploratory-environment-create.model.ts | 53 ++++---- .../notification-dialog.component.ts | 2 +- .../resources/webapp/src/assets/styles/_theme.scss | 3 +- 5 files changed, 185 insertions(+), 122 deletions(-) diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/exploratory-environment-create-dialog/exploratory-environment-create-dialog.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/exploratory-environment-create-dialog/exploratory-environment-create-dialog.component.html index 45ee4bf..4759788 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/exploratory-environment-create-dialog/exploratory-environment-create-dialog.component.html +++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/exploratory-environment-create-dialog/exploratory-environment-create-dialog.component.html @@ -22,50 +22,94 @@ <h4 class="modal-title">Create analytical tool</h4> <button type="button" class="close" (click)="dialogRef.close()">×</button> </header> - <div class="dialog-content"> - <div class="content-box"> - <form [formGroup]="createExploratoryEnvironmentForm" - (submit)="createExploratoryEnvironment_btnClick($event, createExploratoryEnvironmentForm.value)" - *ngIf="createExploratoryEnvironmentForm" novalidate> + <div class="dialog-content selection"> + <div class="content-box mat-reset"> + <form [formGroup]="createExploratoryForm" + (submit)="createExploratoryEnvironment_btnClick($event, createExploratoryForm.value)" + *ngIf="createExploratoryForm" novalidate> + <div class="control-group"> - <label class="label">Select template</label> - <div class="control"> - <dropdown-list #templatesList (selectedItem)="onUpdate($event)"></dropdown-list> + <label class="label">Select project</label> + <div class="control selector-wrapper"> + <mat-form-field> + <mat-label>Select project</mat-label> + <mat-select (selectionChange)="getTemplates($event)" formControlName="project" disableOptionCentering> + <mat-option *ngFor="let project of projects" [value]="project.name">{{ project.name }}</mat-option> + </mat-select> + <button class="caret"> + <i class="material-icons">keyboard_arrow_down</i> + </button> + </mat-form-field> </div> - <div *ngIf="model.exploratoryEnvironmentTemplates" class="mt-5"> - <small *ngIf="model.exploratoryEnvironmentTemplates && model.exploratoryEnvironmentTemplates.length > 0 && !templateDescription"> - {{ model.exploratoryEnvironmentTemplates[0].description }} - </small> - <small *ngIf="templateDescription">{{ templateDescription }}</small> + </div> + + <div class="control-group"> + <label class="label">Select template</label> + <div class="control selector-wrapper"> + <mat-form-field> + <mat-label>Select template</mat-label> + <mat-select formControlName="template_name" disableOptionCentering> + <mat-option *ngFor="let template of templates" + [value]="template.exploratory_environment_versions[0].version" + (click)="getShapes($event, template)"> + {{ template.exploratory_environment_versions[0].template_name }} + </mat-option> + </mat-select> + <button class="caret"> + <i class="material-icons">keyboard_arrow_down</i> + </button> + </mat-form-field> </div> </div> - <div class="control-group" *ngIf="userImages && userImages.length > 0"> + <div class="control-group" *ngIf="images && images.length > 0"> <label class="label">Select {{ DICTIONARY.image }}</label> - <div class="control"> - <dropdown-list #imagesList (selectedItem)="selectImage($event)"></dropdown-list> + <div class="control selector-wrapper"> + <!-- <dropdown-list #imagesList (selectedItem)="selectImage($event)"></dropdown-list> --> + <mat-form-field> + <mat-label>Select {{ DICTIONARY.image }}</mat-label> + <mat-select formControlName="image" (selectionChange)="selectImage($event)" disableOptionCentering> + <mat-option *ngFor="let image of images" [value]="image.name">{{ image.name }}</mat-option> + </mat-select> + <button class="caret"> + <i class="material-icons">keyboard_arrow_down</i> + </button> + </mat-form-field> </div> </div> <div class="control-group"> <label class="label">Name</label> <div class="control"> - <input [class.danger_field]="notebookExist || !createExploratoryEnvironmentForm?.controls['environment_name'].valid - && createExploratoryEnvironmentForm?.controls['environment_name'].dirty - && createExploratoryEnvironmentForm?.controls['environment_name'].hasError('duplication')" type="text" + <input [class.danger_field]="notebookExist || !createExploratoryForm?.controls['environment_name'].valid + && createExploratoryForm?.controls['environment_name'].dirty + && createExploratoryForm?.controls['environment_name'].hasError('duplication')" type="text" class="form-control" placeholder="Enter Name" formControlName="environment_name"> - <span class="danger_color" *ngIf="createExploratoryEnvironmentForm?.controls['environment_name'].hasError('duplication')">This name already exists.</span> - <span class="danger_color" *ngIf="!createExploratoryEnvironmentForm?.controls.environment_name.valid - && createExploratoryEnvironmentForm?.controls['environment_name'].dirty - && !createExploratoryEnvironmentForm?.controls['environment_name'].hasError('duplication')">Name + <span class="danger_color" *ngIf="createExploratoryForm?.controls['environment_name'].hasError('duplication')">This name already exists.</span> + <span class="danger_color" *ngIf="!createExploratoryForm?.controls.environment_name.valid + && createExploratoryForm?.controls['environment_name'].dirty + && !createExploratoryForm?.controls['environment_name'].hasError('duplication')">Name <span *ngIf="DICTIONARY.cloud_provider !== 'aws'">cannot be longer than 10 characters and</span> can only contain letters, numbers, hyphens and '_' but can not end with special characters </span> </div> </div> + <div class="control-group"> <label class="label">{{ DICTIONARY.notebook_instance_size }}</label> - <div class="control"> - <dropdown-list #shapesList (selectedItem)="onUpdate($event)"></dropdown-list> + <div class="control selector-wrapper"> + <mat-form-field> + <mat-label>Select {{ DICTIONARY.notebook_instance_size }}</mat-label> + <mat-select formControlName="shape" disableOptionCentering> + <mat-optgroup *ngFor="let item of (shapes | keys)" [label]="item.key | underscoreless"> + <mat-option *ngFor="let list_item of item.value" [value]="item.value"> + <strong>{{ list_item.Size }}</strong> {{ list_item.Type }} + </mat-option> + </mat-optgroup> + </mat-select> + <button class="caret"> + <i class="material-icons">keyboard_arrow_down</i> + </button> + </mat-form-field> </div> </div> @@ -75,7 +119,7 @@ </label> <div class="config-details" [ngClass]="{ show: configuration?.nativeElement['checked'] || false }"> <textarea formControlName="configuration_parameters" placeholder="Cluster configuration template, JSON" data-gramm_editor="false"></textarea> - <span class="danger_color" *ngIf="!createExploratoryEnvironmentForm?.controls.configuration_parameters.valid && createExploratoryEnvironmentForm?.controls['configuration_parameters'].dirty">Configuration parameters is not in a valid format</span> + <span class="danger_color" *ngIf="!createExploratoryForm?.controls.configuration_parameters.valid && createExploratoryForm?.controls['configuration_parameters'].dirty">Configuration parameters is not in a valid format</span> </div> </div> <ng-template #not_support> @@ -86,7 +130,7 @@ <div class="text-center m-top-30"> <button mat-raised-button type="button" class="butt action" (click)="dialogRef.close()">Cancel</button> - <button mat-raised-button type="submit" [disabled]="!createExploratoryEnvironmentForm?.valid || !this.environment_shape" class="butt butt-success action">Create</button> + <button mat-raised-button type="submit" [disabled]="!createExploratoryForm?.valid || !this.environment_shape" class="butt butt-success action">Create</button> </div> </form> </div> diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/exploratory-environment-create-dialog/exploratory-environment-create-dialog.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/exploratory-environment-create-dialog/exploratory-environment-create-dialog.component.ts index c0f7e5f..f591005 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/exploratory-environment-create-dialog/exploratory-environment-create-dialog.component.ts +++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/exploratory-environment-create-dialog/exploratory-environment-create-dialog.component.ts @@ -22,8 +22,10 @@ import { FormGroup, FormBuilder, Validators } from '@angular/forms'; import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'; import { ToastrService } from 'ngx-toastr'; +import { Project } from '../../../administration/project/project.component'; + import { ExploratoryEnvironmentCreateModel } from './exploratory-environment-create.model'; -import { UserResourceService } from '../../../core/services'; +import { UserResourceService, ProjectService } from '../../../core/services'; import { CheckUtils, HTTP_STATUS_CODES } from '../../../core/util'; import { DICTIONARY } from '../../../../dictionary/global.dictionary'; import { CLUSTER_CONFIGURATION } from '../../computational/computational-resource-create-dialog/cluster-configuration-templates'; @@ -36,50 +38,75 @@ import { CLUSTER_CONFIGURATION } from '../../computational/computational-resourc export class ExploratoryEnvironmentCreateComponent implements OnInit { readonly DICTIONARY = DICTIONARY; + projects: Project[] =[]; + templates = []; + currentTemplate: any; + shapes: Array<any> = []; model: ExploratoryEnvironmentCreateModel; templateDescription: string; namePattern = '[-_a-zA-Z0-9]*[_-]*[a-zA-Z0-9]+'; resourceGrid: any; - userImages: Array<any>; + images: Array<any>; environment_shape: string; - public createExploratoryEnvironmentForm: FormGroup; + public createExploratoryForm: FormGroup; - @ViewChild('environment_name') environment_name; - @ViewChild('templatesList') templates_list; - @ViewChild('shapesList') shapes_list; - @ViewChild('imagesList') userImagesList; + // @ViewChild('environment_name') environment_name; + // @ViewChild('templatesList') templates_list; + // @ViewChild('shapesList') shapes_list; + // @ViewChild('imagesList') userImagesList; @ViewChild('configurationNode') configuration; @Output() buildGrid: EventEmitter<{}> = new EventEmitter(); constructor( @Inject(MAT_DIALOG_DATA) public data: any, + public toastr: ToastrService, + public dialogRef: MatDialogRef<ExploratoryEnvironmentCreateComponent>, private userResourceService: UserResourceService, private _fb: FormBuilder, private changeDetector: ChangeDetectorRef, - public toastr: ToastrService, - public dialogRef: MatDialogRef<ExploratoryEnvironmentCreateComponent>, + private projectService: ProjectService ) { this.model = ExploratoryEnvironmentCreateModel.getDefault(userResourceService); this.resourceGrid = data; } ngOnInit() { + this.getProjects(); + this.initFormModel(); - // this.bindDialog.onClosing = () => this.resetDialog(); - this.open(); + // this.open(); } initFormModel(): void { - this.createExploratoryEnvironmentForm = this._fb.group({ + this.createExploratoryForm = this._fb.group({ + project: [''], + template_name: [''], + image: [''], + shape: [''], environment_name: ['', [Validators.required, Validators.pattern(this.namePattern), this.providerMaxLength, this.checkDuplication.bind(this)]], configuration_parameters: ['', [this.validConfiguration.bind(this)]] }); } + public getProjects() { + this.projectService.getProjectsList().subscribe((projects: any) => this.projects = projects); + } + + public getTemplates($event) { + this.userResourceService.getExploratoryTemplates($event.value).subscribe(templates => this.templates = templates); + } + + public getShapes($event, template) { + this.currentTemplate = template; + this.shapes = template.exploratory_environment_shapes; + this.getImagesList(); + debugger; + } + providerMaxLength(control) { if (DICTIONARY.cloud_provider !== 'aws') return control.value.length <= 10 ? null : { valid: false }; @@ -102,32 +129,32 @@ export class ExploratoryEnvironmentCreateComponent implements OnInit { return resourceShapes[index][0][byField]; } - setDefaultParams(): void { - this.environment_shape = this.shapePlaceholder(this.model.selectedItem.shapes.resourcesShapeTypes, 'type'); + // setDefaultParams(): void { + // this.environment_shape = this.shapePlaceholder(this.model.selectedItem.shapes.resourcesShapeTypes, 'type'); - this.templates_list.setDefaultOptions(this.model.exploratoryEnvironmentTemplates, - this.model.selectedItem.template_name, 'template', 'template_name', 'array'); - this.shapes_list.setDefaultOptions(this.model.selectedItem.shapes.resourcesShapeTypes, - this.shapePlaceholder(this.model.selectedItem.shapes.resourcesShapeTypes, 'description'), 'shape', 'description', 'json'); + // this.templates_list.setDefaultOptions(this.model.exploratoryEnvironmentTemplates, + // this.model.selectedItem.template_name, 'template', 'template_name', 'array'); + // this.shapes_list.setDefaultOptions(this.model.selectedItem.shapes.resourcesShapeTypes, + // this.shapePlaceholder(this.model.selectedItem.shapes.resourcesShapeTypes, 'description'), 'shape', 'description', 'json'); - if (this.userImages && this.userImages.length > 0) { - this.userImagesList.setDefaultOptions(this.userImages, 'Select existing ' + DICTIONARY.image, 'ami', 'name', 'array', null, true); - } - } + // if (this.userImages && this.userImages.length > 0) { + // this.userImagesList.setDefaultOptions(this.userImages, 'Select existing ' + DICTIONARY.image, 'ami', 'name', 'array', null, true); + // } + // } - onUpdate($event): void { - if ($event.model.type === 'template') { - this.model.setSelectedTemplate($event.model.index); - this.shapes_list.setDefaultOptions(this.model.selectedItem.shapes.resourcesShapeTypes, - this.shapePlaceholder(this.model.selectedItem.shapes.resourcesShapeTypes, 'description'), 'shape', 'description', 'json'); - this.environment_shape = this.shapePlaceholder(this.model.selectedItem.shapes.resourcesShapeTypes, 'type'); + // onUpdate($event): void { + // if ($event.model.type === 'template') { + // this.model.setSelectedTemplate($event.model.index); + // this.shapes_list.setDefaultOptions(this.model.selectedItem.shapes.resourcesShapeTypes, + // this.shapePlaceholder(this.model.selectedItem.shapes.resourcesShapeTypes, 'description'), 'shape', 'description', 'json'); + // this.environment_shape = this.shapePlaceholder(this.model.selectedItem.shapes.resourcesShapeTypes, 'type'); - this.getImagesList(); - } + // this.getImagesList(); + // } - if ($event.model.type === 'shape') - this.environment_shape = $event.model.value.type; - } + // if ($event.model.type === 'shape') + // this.environment_shape = $event.model.value.type; + // } selectImage($event): void { this.model.notebookImage = $event.model.value ? $event.model.value.fullName : null; @@ -143,46 +170,38 @@ export class ExploratoryEnvironmentCreateComponent implements OnInit { return false; } - public open(params?): void { - this.model = new ExploratoryEnvironmentCreateModel('', '', '', '', '', - response => { - if (response.status === HTTP_STATUS_CODES.OK) this.dialogRef.close(); - }, - error => this.toastr.error(error.message || 'Exploratory creation failed!', 'Oops!'), - () => this.templateDescription = this.model.selectedItem.description, - () => { - this.initFormModel(); - this.setDefaultParams(); - this.getImagesList(); - }, - this.userResourceService); - } - - getImagesList() { - const image = this.model.selectedItem.image; - this.userResourceService.getUserImages(image) - .subscribe((res: any) => { - this.userImages = res.filter(el => el.status === 'CREATED'); - - this.changeDetector.detectChanges(); - this.setDefaultParams(); - }, - error => this.toastr.error(error.message || 'Images list loading failed!', 'Oops!')); - } + // public open(params?): void { + // this.model = new ExploratoryEnvironmentCreateModel('', '', '', '', '', + // response => { + // if (response.status === HTTP_STATUS_CODES.OK) this.dialogRef.close(); + // }, + // error => this.toastr.error(error.message || 'Exploratory creation failed!', 'Oops!'), + // () => this.templateDescription = this.model.selectedItem.description, + // () => { + // this.initFormModel(); + // // this.setDefaultParams(); + // this.getImagesList(); + // }, + // this.userResourceService); + // } public selectConfiguration() { - if (this.configuration.nativeElement.checked && this.createExploratoryEnvironmentForm) { - this.createExploratoryEnvironmentForm.controls['configuration_parameters'] + if (this.configuration.nativeElement.checked && this.createExploratoryForm) { + this.createExploratoryForm.controls['configuration_parameters'] .setValue(JSON.stringify(CLUSTER_CONFIGURATION.SPARK, undefined, 2)); } else { - this.createExploratoryEnvironmentForm.controls['configuration_parameters'].setValue(''); + this.createExploratoryForm.controls['configuration_parameters'].setValue(''); } } - private resetDialog(): void { - this.initFormModel(); - this.model.resetModel(); + private getImagesList() { + this.userResourceService.getUserImages(this.currentTemplate.image) + .subscribe((res: any) => { + this.images = res.filter(el => el.status === 'CREATED'); - if (this.configuration) this.configuration.nativeElement['checked'] = false; + // this.changeDetector.detectChanges(); + // this.setDefaultParams(); + }, + error => this.toastr.error(error.message || 'Images list loading failed!', 'Oops!')); } } diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/exploratory-environment-create-dialog/exploratory-environment-create.model.ts b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/exploratory-environment-create-dialog/exploratory-environment-create.model.ts index 39430b5..a22262c 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/exploratory-environment-create-dialog/exploratory-environment-create.model.ts +++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/exploratory-environment-create-dialog/exploratory-environment-create.model.ts @@ -70,7 +70,6 @@ export class ExploratoryEnvironmentCreateModel { environment_shape, fnProcessResults, fnProcessErrors); - this.loadTemplates(); } public setSelectedItem(item: ExploratoryEnvironmentVersionModel): void { @@ -94,32 +93,32 @@ export class ExploratoryEnvironmentCreateModel { this.config = config; } - public loadTemplates(): void { - if (this.exploratoryEnvironmentTemplates.length === 0) - this.userResourceService.getExploratoryEnvironmentTemplates() - .subscribe( - data => { - for (let parentIndex = 0; parentIndex < data.length; parentIndex++) { - - const shapeJson = data[parentIndex].exploratory_environment_shapes; - const exploratoryJson = data[parentIndex].exploratory_environment_versions; - const shapeObj: ResourceShapeTypesModel = new ResourceShapeTypesModel(SortUtil.shapesSort(shapeJson)); - - for (let index = 0; index < exploratoryJson.length; index++) - this.exploratoryEnvironmentTemplates.push( - new ExploratoryEnvironmentVersionModel(data[parentIndex].image, exploratoryJson[index], shapeObj)); - } - if (this.exploratoryEnvironmentTemplates.length > 0) { - this.exploratoryEnvironmentTemplates.sort(function(t1, t2) { - return ((t1.template_name < t2.template_name) ? -1 : ((t1.template_name > t2.template_name) ? 1 : 0)); - }); - this.setSelectedTemplate(0); - } - - if (this.continueWith) - this.continueWith(); - }); - } + // public loadTemplates(): void { + // if (this.exploratoryEnvironmentTemplates.length === 0) + // this.userResourceService.getExploratoryEnvironmentTemplates() + // .subscribe( + // data => { + // for (let parentIndex = 0; parentIndex < data.length; parentIndex++) { + + // const shapeJson = data[parentIndex].exploratory_environment_shapes; + // const exploratoryJson = data[parentIndex].exploratory_environment_versions; + // const shapeObj: ResourceShapeTypesModel = new ResourceShapeTypesModel(SortUtil.shapesSort(shapeJson)); + + // for (let index = 0; index < exploratoryJson.length; index++) + // this.exploratoryEnvironmentTemplates.push( + // new ExploratoryEnvironmentVersionModel(data[parentIndex].image, exploratoryJson[index], shapeObj)); + // } + // if (this.exploratoryEnvironmentTemplates.length > 0) { + // this.exploratoryEnvironmentTemplates.sort(function(t1, t2) { + // return ((t1.template_name < t2.template_name) ? -1 : ((t1.template_name > t2.template_name) ? 1 : 0)); + // }); + // this.setSelectedTemplate(0); + // } + + // if (this.continueWith) + // this.continueWith(); + // }); + // } public resetModel(): void { this.setSelectedTemplate(0); diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/notification-dialog/notification-dialog.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/notification-dialog/notification-dialog.component.ts index 073b5e9..d4a70ad 100644 --- a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/notification-dialog/notification-dialog.component.ts +++ b/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/notification-dialog/notification-dialog.component.ts @@ -61,7 +61,7 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'; </div> `, styles: [` - .content { color: #718ba6; padding: 20px 50px; font-size: 14px; font-weight: 400 } + .content { color: #718ba6; padding: 20px 50px; font-size: 14px; font-weight: 400; margin: 0; } .info { color: #35afd5; } .info .confirm-dialog { color: #607D8B; } header { display: flex; justify-content: space-between; color: #607D8B; } diff --git a/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss b/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss index b34ca96..ab6949a 100644 --- a/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss +++ b/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss @@ -235,7 +235,8 @@ word-break: break-all; } .manage-roles, -.project-form { +.project-form, +.selection { .mat-form-field { width: 100%; } --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
