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 27db2a71906ca0803b1b276df4f7e53725fbd629
Author: Andriana Kovalyshyn <andriana_kovalys...@epam.com>
AuthorDate: Mon Jun 3 11:29:30 2019 +0300
[DLAB-655]: added projects during env creation; 1 by 1 loading
---
...ratory-environment-create-dialog.component.html | 60 +++++----
...loratory-environment-create-dialog.component.ts | 146 ++++++---------------
2 files changed, 73 insertions(+), 133 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 fa55bc9..0ff5bbd 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
@@ -24,10 +24,7 @@
</header>
<div class="dialog-content selection">
<div class="content-box mat-reset">
- <form [formGroup]="createExploratoryForm"
- (submit)="createExploratoryEnvironment_btnClick($event,
createExploratoryForm.value)"
- *ngIf="createExploratoryForm" novalidate>
-
+ <form [formGroup]="createExploratoryForm" *ngIf="createExploratoryForm"
novalidate>
<div class="control-group">
<label class="label">Select project</label>
<div class="control selector-wrapper">
@@ -48,10 +45,10 @@
<div class="control selector-wrapper" [ngClass]="{ 'not-active' :
!templates.length }">
<mat-form-field>
<mat-label>Select template</mat-label>
- <mat-select formControlName="template_name"
disableOptionCentering [disabled]="!templates.length">
+ <mat-select formControlName="version" disableOptionCentering
[disabled]="!templates.length">
<mat-option *ngFor="let template of templates"
[value]="template.exploratory_environment_versions[0].version"
- (click)="getShapes($event, template)">
+ (click)="getShapes(template)">
{{
template.exploratory_environment_versions[0].template_name }}
</mat-option>
</mat-select>
@@ -67,7 +64,7 @@
<div class="control selector-wrapper">
<mat-form-field>
<mat-label>Select {{ DICTIONARY.image }}</mat-label>
- <mat-select formControlName="image"
(selectionChange)="selectImage($event)" disableOptionCentering>
+ <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-select>
@@ -81,14 +78,14 @@
<div class="control-group">
<label class="label">Name</label>
<div class="control">
- <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="error"
*ngIf="createExploratoryForm?.controls['environment_name'].hasError('duplication')">This
name already exists.</span>
- <span class="error"
*ngIf="!createExploratoryForm?.controls.environment_name.valid
- &&
createExploratoryForm?.controls['environment_name'].dirty
- &&
!createExploratoryForm?.controls['environment_name'].hasError('duplication')">Name
+ <input [class.danger_field]="notebookExist ||
!createExploratoryForm?.controls['name'].valid
+ && createExploratoryForm?.controls['name'].dirty
+ &&
createExploratoryForm?.controls['name'].hasError('duplication')" type="text"
+ class="form-control" placeholder="Enter Name"
formControlName="name">
+ <span class="error"
*ngIf="createExploratoryForm?.controls['name'].hasError('duplication')">This
name already exists.</span>
+ <span class="error"
*ngIf="!createExploratoryForm?.controls.name.valid
+ &&
createExploratoryForm?.controls['name'].dirty
+ &&
!createExploratoryForm?.controls['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>
@@ -101,7 +98,7 @@
<mat-label>Select {{ DICTIONARY.notebook_instance_size
}}</mat-label>
<mat-select formControlName="shape" disableOptionCentering
[disabled]="!currentTemplate">
<mat-optgroup *ngFor="let item of (shapes | keys)"
[label]="item.key | underscoreless">
- <mat-option *ngFor="let list_item of item.value"
[value]="item.value">
+ <mat-option *ngFor="let list_item of item.value"
[value]="list_item.Type">
<strong class="highlight icon-label">{{ list_item.Size
}}</strong> {{ list_item.Type }}
</mat-option>
</mat-optgroup>
@@ -113,24 +110,29 @@
</div>
</div>
- <div class="checkbox-group" *ngIf="model.selectedItem.image !==
'docker.dlab-zeppelin'; else not_support">
- <label>
- <input #configurationNode type="checkbox"
(change)="selectConfiguration()" /> Spark configurations
- </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="error"
*ngIf="!createExploratoryForm?.controls.configuration_parameters.valid &&
createExploratoryForm?.controls['configuration_parameters'].dirty">Configuration
parameters is not in a valid format</span>
+ <div *ngIf="currentTemplate">
+ <div class="checkbox-group" *ngIf="currentTemplate?.image !==
'docker.dlab-zeppelin'; else not_support">
+ <label>
+ <input #configurationNode type="checkbox"
(change)="selectConfiguration()" /> Spark configurations
+ </label>
+ <div class="config-details" [ngClass]="{ show:
configuration?.nativeElement['checked'] || false }">
+ <textarea formControlName="cluster_config" placeholder="Cluster
configuration template, JSON" data-gramm_editor="false"></textarea>
+ <span class="error"
*ngIf="!createExploratoryForm?.controls.cluster_config.valid &&
createExploratoryForm?.controls['cluster_config'].dirty">Configuration
parameters is not in a valid format</span>
+ </div>
</div>
+ <ng-template #not_support>
+ <small>Spark default configuration for Apache Zeppelin can not be
changed from DLab UI. Currently it can be done directly through Apache
Zeppelin interpreter menu.
+ For more details please refer for Apache Zeppelin <a
href="https://zeppelin.apache.org/docs/0.8.0/usage/interpreter/overview.html";
target="_blank">official documentation</a>.
+ </small>
+ </ng-template>
</div>
- <ng-template #not_support>
- <small>Spark default configuration for Apache Zeppelin can not be
changed from DLab UI. Currently it can be done directly through Apache
Zeppelin interpreter menu.
- For more details please refer for Apache Zeppelin <a
href="https://zeppelin.apache.org/docs/0.8.0/usage/interpreter/overview.html";
target="_blank">official documentation</a>.
- </small>
- </ng-template>
<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]="!createExploratoryForm?.valid" class="butt butt-success
action">Create</button>
+ <button mat-raised-button type="button"
+ class="butt butt-success action"
+ [disabled]="!createExploratoryForm?.valid"
+
(click)="createExploratoryEnvironment(createExploratoryForm.value)">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 ea04b92..54e22de 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
@@ -17,14 +17,13 @@
* under the License.
*/
-import { Component, OnInit, EventEmitter, Output, ViewChild,
ChangeDetectorRef, Inject } from '@angular/core';
+import { Component, OnInit, ViewChild, ChangeDetectorRef, Inject } from
'@angular/core';
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, ProjectService } from '../../../core/services';
import { CheckUtils, HTTP_STATUS_CODES } from '../../../core/util';
import { DICTIONARY } from '../../../../dictionary/global.dictionary';
@@ -38,28 +37,17 @@ import { CLUSTER_CONFIGURATION } from
'../../computational/computational-resourc
export class ExploratoryEnvironmentCreateComponent implements OnInit {
readonly DICTIONARY = DICTIONARY;
- projects: Project[] =[];
+ projects: Project[] = [];
templates = [];
currentTemplate: any;
shapes: Array<any> = [];
-
- model: ExploratoryEnvironmentCreateModel;
- templateDescription: string;
namePattern = '[-_a-zA-Z0-9]*[_-]*[a-zA-Z0-9]+';
resourceGrid: any;
images: Array<any>;
- environment_shape: string;
-
public createExploratoryForm: FormGroup;
- // @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,
@@ -69,28 +57,14 @@ export class ExploratoryEnvironmentCreateComponent
implements OnInit {
private changeDetector: ChangeDetectorRef,
private projectService: ProjectService
) {
- this.model =
ExploratoryEnvironmentCreateModel.getDefault(userResourceService);
this.resourceGrid = data;
}
ngOnInit() {
this.getProjects();
-
this.initFormModel();
}
- initFormModel(): void {
- 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);
}
@@ -99,90 +73,24 @@ export class ExploratoryEnvironmentCreateComponent
implements OnInit {
this.userResourceService.getExploratoryTemplates($event.value).subscribe(templates
=> this.templates = templates);
}
- public getShapes($event, template) {
+ public getShapes(template) {
this.currentTemplate = template;
this.shapes = template.exploratory_environment_shapes;
this.getImagesList();
}
- providerMaxLength(control) {
- if (DICTIONARY.cloud_provider !== 'aws')
- return control.value.length <= 10 ? null : { valid: false };
- }
+ public createExploratoryEnvironment(data) {
+ const parameters: any = {
+ image: this.currentTemplate.image,
+ template_name:
this.currentTemplate.exploratory_environment_versions[0].template_name
+ };
- private validConfiguration(control) {
- if (this.configuration)
- return this.configuration.nativeElement['checked']
- ? (control.value && control.value !== null &&
CheckUtils.isJSON(control.value) ? null : { valid: false })
- : null;
- }
-
- checkDuplication(control) {
- if (this.resourceGrid.containsNotebook(control.value))
- return { duplication: true };
+ 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!'));
}
- shapePlaceholder(resourceShapes, byField: string): string {
- for (const index in resourceShapes)
- return resourceShapes[index][0][byField];
- }
-
- // 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');
-
- // 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');
-
- // this.getImagesList();
- // }
-
- // if ($event.model.type === 'shape')
- // this.environment_shape = $event.model.value.type;
- // }
-
- public selectImage($event): void {
- debugger;
- // this.model.notebookImage = $event.model.value ?
$event.model.value.fullName : null;
- }
-
- createExploratoryEnvironment_btnClick($event, data) {
- this.model.setCreatingParams(
- data.environment_name,
- this.environment_shape,
- data.configuration_parameters ?
JSON.parse(data.configuration_parameters) : null);
- this.model.confirmAction();
- $event.preventDefault();
- 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);
- // }
public selectConfiguration() {
const value = (this.configuration.nativeElement.checked &&
this.createExploratoryForm)
@@ -191,9 +99,39 @@ export class ExploratoryEnvironmentCreateComponent
implements OnInit {
this.createExploratoryForm.controls['configuration_parameters'].setValue(value);
}
+ private initFormModel(): void {
+
+ this.createExploratoryForm = this._fb.group({
+ project: ['', Validators.required],
+ version: ['', Validators.required],
+ notebook_image_name: [''],
+ shape: ['', Validators.required],
+ name: ['', [Validators.required, Validators.pattern(this.namePattern),
+ this.providerMaxLength,
this.checkDuplication.bind(this)]],
+ cluster_config: ['', [this.validConfiguration.bind(this)]]
+ });
+ }
+
private getImagesList() {
this.userResourceService.getUserImages(this.currentTemplate.image)
.subscribe((res: any) => this.images = res.filter(el => el.status ===
'CREATED'),
error => this.toastr.error(error.message || 'Images list loading
failed!', 'Oops!'));
}
+
+ private checkDuplication(control) {
+ if (this.resourceGrid.containsNotebook(control.value))
+ return { duplication: true };
+ }
+
+ private providerMaxLength(control) {
+ if (DICTIONARY.cloud_provider !== 'aws')
+ return control.value.length <= 10 ? null : { valid: false };
+ }
+
+ private validConfiguration(control) {
+ if (this.configuration)
+ return this.configuration.nativeElement['checked']
+ ? (control.value && control.value !== null &&
CheckUtils.isJSON(control.value) ? null : { valid: false })
+ : null;
+ }
}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@dlab.apache.org
For additional commands, e-mail: commits-h...@dlab.apache.org
