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/13 15:20:33 UTC
[incubator-dlab] 03/03: [DLAB-805]: replaced shapes controls
selector
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 0022849c5e217ee6e66d997b0814cad7b2c0621a
Author: Andriana Kovalyshyn <An...@epam.com>
AuthorDate: Thu Jun 13 18:20:18 2019 +0300
[DLAB-805]: replaced shapes controls selector
---
...utational-resource-create-dialog.component.html | 144 ++++++++++++++-------
...mputational-resource-create-dialog.component.ts | 21 +--
.../computational-resource-create-dialog/index.ts | 3 +
3 files changed, 114 insertions(+), 54 deletions(-)
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.html
index b8232cd..a879139 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.html
@@ -24,56 +24,71 @@
</header>
<div class="dialog-content selection">
<div class="content-box mat-reset">
- <form [formGroup]="resourceForm" *ngIf="templates.length && resourceForm; else empty">
+ <form [formGroup]="resourceForm" *ngIf="cluster_types.length && resourceForm; else empty">
<div class="form-wrapper" [ngClass]="{ compress: selectedImage.image === 'docker.dlab-dataengine' }">
<div class="col">
- <!-- <div class="control-group" *ngIf="PROVIDER !== 'azure'" [hidden]="model.resourceImages.length === 1">
- <label class="label">Select cluster type</label>
- <div class="control">
- <dropdown-list #clusterType (selectedItem)="onUpdate($event)"></dropdown-list>
- </div>
- </div> -->
-
- <div class="control-group" *ngIf="PROVIDER !== 'azure'" [hidden]="templates.length === 1">
- <label class="label">Select cluster type</label>
- <div class="control selector-wrapper">
- <mat-form-field>
- <mat-label>Select project</mat-label>
- <mat-select formControlName="template_name" disableOptionCentering>
- <mat-option *ngFor="let template of templates" [value]="template.template_name" (click)="selectedImage = template">{{ template.template_name }}</mat-option>
- <mat-option *ngIf="!templates.length" class="multiple-select ml-10" disabled>Templates list is empty</mat-option>
- </mat-select>
- <button class="caret">
- <i class="material-icons">keyboard_arrow_down</i>
- </button>
- </mat-form-field>
- </div>
+ <!-- <div class="control-group" *ngIf="PROVIDER !== 'azure'" [hidden]="model.resourceImages.length === 1">
+ <label class="label">Select cluster type</label>
+ <div class="control">
+ <dropdown-list #clusterType (selectedItem)="onUpdate($event)"></dropdown-list>
</div>
+ </div>
- <div class="control-group" *ngIf="PROVIDER !== 'azure'" [hidden]="!selectedImage.templates.length">
- <label class="label">Select template</label>
- <div class="control">
- <dropdown-list #templatesList (selectedItem)="onUpdate($event)"></dropdown-list>
- </div>
+ <div class="control-group" *ngIf="PROVIDER !== 'azure'" [hidden]="!selectedImage.templates.length">
+ <label class="label">Select template</label>
+ <div class="control">
+ <dropdown-list #templatesList (selectedItem)="onUpdate($event)"></dropdown-list>
</div>
+ </div> -->
+
+ <div class="control-group" *ngIf="PROVIDER !== 'azure'" [hidden]="cluster_types.length === 1">
+ <label class="label">Select cluster type</label>
+ <div class="control selector-wrapper">
+ <mat-form-field>
+ <mat-label>Select cluster type</mat-label>
+ <mat-select formControlName="template_name" disableOptionCentering>
+ <mat-option *ngFor="let type of cluster_types" [value]="type.template_name" (click)="selectedImage = type">{{ type.template_name }}</mat-option>
+ <mat-option *ngIf="!cluster_types.length" class="multiple-select ml-10" disabled>Clusters types list is empty</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 alias-name" *ngIf="selectedImage?.image">
- <label class="label">Cluster alias</label>
- <div class="control">
- <input [class.danger_field]="computationalResourceExist || !resourceForm?.controls['cluster_alias_name'].valid
- && resourceForm?.controls['cluster_alias_name'].dirty && resourceForm?.controls['cluster_alias_name'].hasError('duplication')"
- type="text" class="form-control" placeholder="Enter cluster alias" formControlName="cluster_alias_name" />
- <span class="danger_color" *ngIf="resourceForm?.controls['cluster_alias_name'].hasError('duplication')">This cluster name already exists.</span>
- <span class="danger_color" *ngIf="!resourceForm?.controls.cluster_alias_name.valid
- && resourceForm?.controls['cluster_alias_name'].dirty
- && !resourceForm?.controls['cluster_alias_name'].hasError('duplication')">
- Cluster 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 class="control-group" *ngIf="PROVIDER !== 'azure'" [hidden]="!selectedImage.templates.length">
+ <label class="label">Select template</label>
+ <div class="control selector-wrapper">
+ <mat-form-field>
+ <mat-label>Select template</mat-label>
+ <mat-select formControlName="version" disableOptionCentering>
+ <mat-option *ngFor="let template of selectedImage.templates" [value]="template.version">{{ template.version }}</mat-option>
+ <mat-option *ngIf="!selectedImage.templates" class="multiple-select ml-10" disabled>Templates list is empty</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 alias-name" *ngIf="selectedImage?.image">
+ <label class="label">Cluster alias</label>
+ <div class="control">
+ <input [class.danger_field]="computationalResourceExist || !resourceForm?.controls['cluster_alias_name'].valid
+ && resourceForm?.controls['cluster_alias_name'].dirty && resourceForm?.controls['cluster_alias_name'].hasError('duplication')"
+ type="text" class="form-control" placeholder="Enter cluster alias" formControlName="cluster_alias_name" />
+ <span class="danger_color" *ngIf="resourceForm?.controls['cluster_alias_name'].hasError('duplication')">This cluster name already exists.</span>
+ <span class="danger_color" *ngIf="!resourceForm?.controls.cluster_alias_name.valid
+ && resourceForm?.controls['cluster_alias_name'].dirty
+ && !resourceForm?.controls['cluster_alias_name'].hasError('duplication')">
+ Cluster 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>
<div class="col">
@@ -87,19 +102,58 @@
</span>
</div>
</div>
- <div class="control-group" *ngIf="selectedImage?.image">
- <label class="label" *ngIf="selectedImage">{{ DICTIONARY[selectedImage.image].data_engine_master_instance_size}}</label>
+ <!-- <div class="control-group" *ngIf="selectedImage?.image">
+ <label class="label" *ngIf="selectedImage">{{ DICTIONARY[selectedImage.image].data_engine_master_instance_size }}</label>
<div class="control">
<dropdown-list #masterShapesList (selectedItem)="onUpdate($event)"></dropdown-list>
</div>
- </div>
+ </div> -->
- <div class="control-group" *ngIf="selectedImage?.image" [hidden]="selectedImage?.image === 'docker.dlab-dataengine'">
+ <!-- <div class="control-group" *ngIf="selectedImage?.image" [hidden]="selectedImage?.image === 'docker.dlab-dataengine'">
<label class="label">{{ DICTIONARY[selectedImage.image].data_engine_slave_instance_size }}</label>
<div class="control">
<dropdown-list #shapesSlaveList (selectedItem)="onUpdate($event)"></dropdown-list>
</div>
+ </div> -->
+
+ <div class="control-group" *ngIf="selectedImage?.image">
+ <label class="label">{{ DICTIONARY[selectedImage.image].data_engine_master_instance_size }}</label>
+ <div class="control selector-wrapper">
+ <mat-form-field>
+ <mat-label>Select {{ DICTIONARY.notebook_instance_size }}</mat-label>
+ <mat-select formControlName="shape_master" disableOptionCentering>
+ <mat-optgroup *ngFor="let item of (selectedImage.computation_resources_shapes | keys)" [label]="item.key | underscoreless">
+ <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>
+ </mat-select>
+ <button class="caret">
+ <i class="material-icons">keyboard_arrow_down</i>
+ </button>
+ </mat-form-field>
+ </div>
</div>
+
+ <div class="control-group" *ngIf="selectedImage?.image" [hidden]="selectedImage?.image === 'docker.dlab-dataengine'">
+ <label class="label">{{ DICTIONARY.notebook_instance_size }}</label>
+ <div class="control selector-wrapper">
+ <mat-form-field>
+ <mat-label>Select {{ DICTIONARY.notebook_instance_size }}</mat-label>
+ <mat-select formControlName="shape_slave" disableOptionCentering>
+ <mat-optgroup *ngFor="let item of (selectedImage.computation_resources_shapes | keys)" [label]="item.key | underscoreless">
+ <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>
+ </mat-select>
+ <button class="caret">
+ <i class="material-icons">keyboard_arrow_down</i>
+ </button>
+ </mat-form-field>
+ </div>
+ </div>
+
</div>
</div>
@@ -127,7 +181,7 @@
</div>
<div class="checkbox-group control-group m-top-15" *ngIf="PROVIDER === 'aws'"
- [hidden]="!model.templates.length || !isAvailableSpots()">
+ [hidden]="!selectedImage.templates.length || !isAvailableSpots()">
<label class="spot-label label">
<input #spotInstancesCheck type="checkbox" (change)="selectSpotInstances($event)" />
<span>Spot instance</span>
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.ts
index 727e44b..5f1a385 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.ts
@@ -45,7 +45,7 @@ export class ComputationalResourceCreateDialogComponent implements OnInit {
notebook_instance: any;
full_list: any;
- templates = [];
+ cluster_types = [];
selectedImage: any;
shapes: any;
@@ -64,7 +64,7 @@ export class ComputationalResourceCreateDialogComponent implements OnInit {
public resourceForm: FormGroup;
@ViewChild('name') name;
- @ViewChild('clusterType') cluster_type;
+ // @ViewChild('clusterType') cluster_type;
@ViewChild('templatesList') templates_list;
@ViewChild('masterShapesList') master_shapes_list;
@ViewChild('shapesSlaveList') slave_shapes_list;
@@ -247,6 +247,9 @@ export class ComputationalResourceCreateDialogComponent implements OnInit {
private initFormModel(): void {
this.resourceForm = this._fb.group({
template_name: ['', [Validators.required]],
+ version: [''],
+ shape_master: [''],
+ shape_slave: [''],
cluster_alias_name: ['', [Validators.required, Validators.pattern(this.clusterNamePattern),
this.providerMaxLength, this.checkDuplication.bind(this)]],
instance_number: ['', [Validators.required, Validators.pattern(this.nodeCountPattern), this.validInstanceNumberRange.bind(this)]],
@@ -261,7 +264,7 @@ export class ComputationalResourceCreateDialogComponent implements OnInit {
}
private getComputationalResourceLimits(): void {
- if (this.templates.length && this.selectedImage && this.selectedImage.image) {
+ if (this.cluster_types.length && this.selectedImage && this.selectedImage.image) {
const activeImage = DICTIONARY[this.selectedImage.image];
this.minInstanceNumber = this.selectedImage.limits[activeImage.total_instance_number_min];
@@ -279,7 +282,7 @@ export class ComputationalResourceCreateDialogComponent implements OnInit {
this.spotInstancesSelect.nativeElement['checked'] = true;
this.selectSpotInstances();
}
-
+ debugger;
this.resourceForm.controls['instance_number'].setValue(this.minInstanceNumber);
this.resourceForm.controls['preemptible_instance_number'].setValue(this.minPreemptibleInstanceNumber);
}
@@ -373,8 +376,8 @@ export class ComputationalResourceCreateDialogComponent implements OnInit {
}, {});
if (DICTIONARY.cloud_provider !== 'azure') {
- const images = this.templates.filter(image => image.image === 'docker.dlab-dataengine');
- this.templates = images;
+ const images = this.cluster_types.filter(image => image.image === 'docker.dlab-dataengine');
+ this.cluster_types = images;
// (images.length > 0) ? this.model.setSelectedClusterType(0) : this.model.availableTemplates = false;
}
this.selectedImage.shapes.resourcesShapeTypes = filtered;
@@ -383,9 +386,9 @@ export class ComputationalResourceCreateDialogComponent implements OnInit {
private getTemplates(project) {
this.userResourceService.getComputationalTemplates(project).subscribe(
- templates => {
- this.templates = templates;
- this.selectedImage = templates[0];
+ cluster_types => {
+ this.cluster_types = cluster_types;
+ this.selectedImage = cluster_types[0];
this.filterShapes();
this.resourceForm.get('template_name').setValue(this.selectedImage.template_name)
});
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/index.ts b/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/index.ts
index 5b449b4..5de1037 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/index.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/index.ts
@@ -24,6 +24,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MaterialModule } from '../../../shared/material.module';
import { FormControlsModule } from '../../../shared/form-controls';
import { ComputationalResourceCreateDialogComponent } from './computational-resource-create-dialog.component';
+import { KeysPipeModule, UnderscorelessPipeModule } from '../../../core/pipes';
@NgModule({
imports: [
@@ -31,6 +32,8 @@ import { ComputationalResourceCreateDialogComponent } from './computational-reso
FormsModule,
ReactiveFormsModule,
FormControlsModule,
+ KeysPipeModule,
+ UnderscorelessPipeModule,
MaterialModule
],
declarations: [ComputationalResourceCreateDialogComponent],
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org