You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dlab.apache.org by an...@apache.org on 2019/06/03 10:52:08 UTC
[incubator-dlab] 05/11: [DLAB-631]: added projects to exploratory
creation
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 <An...@epam.com>
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: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org