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/19 12:56:14 UTC
[incubator-dlab] 01/03: [DLAB-805]: spot instance limits fixes
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 a072c13b02fd35ea3c3b3af6983f26dc47cd8f2c
Author: Andriana Kovalyshyn <kv...@kvellia-MBP.kyiv.epam.com>
AuthorDate: Wed Jun 19 14:48:48 2019 +0300
[DLAB-805]: spot instance limits fixes
---
...utational-resource-create-dialog.component.html | 110 +++++++++++++--------
...mputational-resource-create-dialog.component.ts | 29 +++---
2 files changed, 85 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 db45e21..f63602d 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
@@ -18,7 +18,7 @@
-->
<div class="create-cluster" id="dialog-box">
- <header class="dialog-header">
+ <header class="dialog-header">
<h4 class="modal-title">Add computational resources</h4>
<button type="button" class="close" (click)="dialogRef.close()">×</button>
</header>
@@ -26,10 +26,10 @@
<div class="content-box mat-reset">
<form [formGroup]="resourceForm" *ngIf="cluster_types.length && resourceForm; else empty">
- <div class="form-wrapper" [ngClass]="{ compress: selectedImage.image === 'docker.dlab-dataengine' }">
+ <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">
+ <!-- <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>
@@ -49,8 +49,10 @@
<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-option *ngFor="let type of cluster_types" [value]="type.template_name"
+ (click)="selectImage(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>
@@ -65,8 +67,10 @@
<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-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>
@@ -78,15 +82,20 @@
<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
+ <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="error" *ngIf="resourceForm?.controls['cluster_alias_name'].hasError('duplication')">This cluster name already exists.</span>
- <span class="error" *ngIf="!resourceForm?.controls.cluster_alias_name.valid
+ type="text" class="form-control" placeholder="Enter cluster alias"
+ formControlName="cluster_alias_name" />
+ <span class="error" *ngIf="resourceForm?.controls['cluster_alias_name'].hasError('duplication')">This
+ cluster name already exists.</span>
+ <span class="error" *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>
+ 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>
@@ -96,9 +105,10 @@
<label class="label">{{ DICTIONARY[selectedImage.image].instance_number }}</label>
<div class="control">
<input type="number" class="form-control" min="{{minInstanceNumber}}" max="{{maxInstanceNumber}}"
- formControlName="instance_number" (keypress)="CheckUtils.isNumberKey($event)" />
+ formControlName="instance_number" (keypress)="CheckUtils.isNumberKey($event)" />
<span class="error" *ngIf="!resourceForm?.controls.instance_number.valid">
- <span>Only integer values greater than or equal to {{ minInstanceNumber }} and less than {{ maxInstanceNumber }} are allowed</span>
+ <span>Only integer values greater than or equal to {{ minInstanceNumber }} and less than
+ {{ maxInstanceNumber }} are allowed</span>
</span>
</div>
</div>
@@ -122,7 +132,8 @@
<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-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>
@@ -135,13 +146,15 @@
</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 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-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>
@@ -157,23 +170,22 @@
</div>
</div>
- <div class="preemptible checkbox-group control-group m-top-30 m-bott-10" *ngIf="PROVIDER === 'gcp' && selectedImage?.image === 'docker.dlab-dataengine-service'">
+ <div class="preemptible checkbox-group control-group m-top-30 m-bott-10"
+ *ngIf="PROVIDER === 'gcp' && selectedImage?.image === 'docker.dlab-dataengine-service'">
<label class="label">
<input #preemptibleNode type="checkbox" (change)="selectPreemptibleNodes($event)" />
<span>Preemptible node</span>
<span class="align" *ngIf="preemptible?.nativeElement['checked'] || false"> count</span>
</label>
- <div *ngIf="preemptible?.nativeElement['checked']"
- class="preemptible-details control"
- [ngClass]="{ show: preemptible?.nativeElement['checked'] || false}">
- <input type="text" class="form-control"
- formControlName="preemptible_instance_number"
- (keypress)="CheckUtils.isNumberKey($event)"
- (keydown.arrowup)="preemptibleCounter($event, 'increment')"
+ <div *ngIf="preemptible?.nativeElement['checked']" class="preemptible-details control"
+ [ngClass]="{ show: preemptible?.nativeElement['checked'] || false}">
+ <input type="text" class="form-control" formControlName="preemptible_instance_number"
+ (keypress)="CheckUtils.isNumberKey($event)" (keydown.arrowup)="preemptibleCounter($event, 'increment')"
(keydown.arrowdown)="preemptibleCounter($event, 'decrement')" />
<span class="error" *ngIf="!resourceForm?.controls.preemptible_instance_number.valid">
<span *ngIf="minPreemptibleInstanceNumber !== maxPreemptibleInstanceNumber; else equal">
- Only integer values greater than or equal to {{ minPreemptibleInstanceNumber }} and less than {{ maxPreemptibleInstanceNumber }} are allowed
+ Only integer values greater than or equal to {{ minPreemptibleInstanceNumber }} and less than
+ {{ maxPreemptibleInstanceNumber }} are allowed
</span>
<ng-template #equal>Please manage total machines count</ng-template>
</span>
@@ -181,54 +193,68 @@
</div>
<div class="checkbox-group control-group m-top-15" *ngIf="PROVIDER === 'aws'"
- [hidden]="!selectedImage.templates.length">
+ [hidden]="!selectedImage.templates.length">
<label class="spot-label label">
<input #spotInstancesCheck type="checkbox" (change)="selectSpotInstances($event)" />
<span>Spot instance</span>
<span *ngIf="spotInstancesSelect?.nativeElement['checked'] || false"> bit, %</span>
</label>
- <div class="control spot-details" [ngClass]="{ show: spotInstancesSelect?.nativeElement['checked'] || false }" *ngIf="spotInstancesSelect?.nativeElement['checked'] || false">
- <input type="number" class="form-control" step="5" min="{{minSpotPrice}}" max="{{maxSpotPrice}}" formControlName="instance_price" (keypress)="CheckUtils.isNumberKey($event)">
+ <div class="control spot-details" [ngClass]="{ show: spotInstancesSelect?.nativeElement['checked'] || false }"
+ *ngIf="spotInstancesSelect?.nativeElement['checked'] || false">
+ <input type="number" class="form-control" step="5" min="{{minSpotPrice}}" max="{{maxSpotPrice}}"
+ formControlName="instance_price" (keypress)="CheckUtils.isNumberKey($event)">
<span class="error" *ngIf="!resourceForm?.controls.instance_price.valid">
Only integer values greater than or equal to {{minSpotPrice}} and less than {{maxSpotPrice}} are allowed
</span>
</div>
- <span class="info" *ngIf="spotInstancesSelect?.nativeElement['checked'] || false">When the current Spot price rises above your bid price, the Spot instance is reclaimed by AWS so that it can be given to another customer. Make sure to backup your data on periodic basis.</span>
+ <span class="info" *ngIf="spotInstancesSelect?.nativeElement['checked'] || false">When the current Spot price
+ rises above your bid price, the Spot instance is reclaimed by AWS so that it can be given to another
+ customer. Make sure to backup your data on periodic basis.</span>
</div>
- <div class="checkbox-group m-top-20" [hidden]="PROVIDER === 'gcp' && selectedImage?.image === 'docker.dlab-dataengine-service'"
- *ngIf="notebook_instance?.image !== 'docker.dlab-zeppelin'">
+ <div class="checkbox-group m-top-20"
+ [hidden]="PROVIDER === 'gcp' && selectedImage?.image === 'docker.dlab-dataengine-service'"
+ *ngIf="notebook_instance?.image !== 'docker.dlab-zeppelin'">
<label>
- <input #configurationNode type="checkbox" (change)="selectConfiguration()"/> Cluster configurations
+ <input #configurationNode type="checkbox" (change)="selectConfiguration()" /> Cluster configurations
</label>
<div class="config-link" *ngIf="(configuration?.nativeElement['checked'] || false)
&& selectedImage?.image === 'docker.dlab-dataengine-service'
&& DICTIONARY.cloud_provider === 'aws'">
- To view example JSON of configurations refer for <a href="https://docs.aws.amazon.com/emr/latest/ReleaseGuide/emr-configure-apps.html" target="_blank">AWS official documentation</a>
+ To view example JSON of configurations refer for <a
+ href="https://docs.aws.amazon.com/emr/latest/ReleaseGuide/emr-configure-apps.html" target="_blank">AWS
+ official documentation</a>
</div>
</div>
<div class="checkbox-group">
<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="!resourceForm?.controls.configuration_parameters.valid && resourceForm?.controls['configuration_parameters'].dirty">Configuration parameters is not in a valid format</span>
+ <textarea formControlName="configuration_parameters" placeholder="Cluster configuration template, JSON"
+ data-gramm_editor="false"></textarea>
+ <span class="error"
+ *ngIf="!resourceForm?.controls.configuration_parameters.valid && resourceForm?.controls['configuration_parameters'].dirty">Configuration
+ parameters is not in a valid format</span>
</div>
</div>
<div *ngIf="notebook_instance?.image === 'docker.dlab-zeppelin'">
- <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>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>
</div>
<div class="text-center m-top-30">
<button mat-raised-button type="button" (click)="dialogRef.close()" class="butt action">Cancel</button>
<button mat-raised-button type="button" [disabled]="!resourceForm?.valid"
- (click)="createComputationalResource(resourceForm.value)"
- class="butt butt-success action" [ngClass]="{'not-allowed': !resourceForm?.valid}">Create</button>
+ (click)="createComputationalResource(resourceForm.value)" class="butt butt-success action"
+ [ngClass]="{'not-allowed': !resourceForm?.valid}">Create</button>
</div>
</form>
<ng-template #empty>
- <div class="info message">Computational resource creations are not available.<br>Please, check your permissions.</div>
+ <div class="info message">Computational resource creations are not available.<br>Please, check your permissions.
+ </div>
</ng-template>
</div>
</div>
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 7a96dc8..b7b77fe 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
@@ -62,10 +62,10 @@ export class ComputationalResourceCreateDialogComponent implements OnInit {
public maxSpotPrice: number = 0;
public resourceForm: FormGroup;
- @ViewChild('name') name;
- @ViewChild('templatesList') templates_list;
- @ViewChild('masterShapesList') master_shapes_list;
- @ViewChild('shapesSlaveList') slave_shapes_list;
+ // @ViewChild('name') name;
+ // @ViewChild('templatesList') templates_list;
+ // @ViewChild('masterShapesList') master_shapes_list;
+ // @ViewChild('shapesSlaveList') slave_shapes_list;
@ViewChild('spotInstancesCheck') spotInstancesSelect;
@ViewChild('preemptibleNode') preemptible;
@ViewChild('configurationNode') configuration;
@@ -158,6 +158,11 @@ export class ComputationalResourceCreateDialogComponent implements OnInit {
if (DICTIONARY.cloud_provider === 'aws') this.spotInstancesSelect.nativeElement['checked'];
}
+ public selectImage($event) {
+ this.selectedImage = $event;
+ this.getComputationalResourceLimits();
+ }
+
public selectPreemptibleNodes($event) {
if ($event.target.checked)
this.resourceForm.controls['preemptible_instance_number'].setValue(this.minPreemptibleInstanceNumber);
@@ -177,10 +182,10 @@ export class ComputationalResourceCreateDialogComponent implements OnInit {
private filterAvailableSpots() {
const filtered = JSON.parse(JSON.stringify(this.selectedImage.computation_resources_shapes));
for (const item in this.selectedImage.computation_resources_shapes) {
- filtered[item] = filtered[item].filter(el => el.spot);
- if (filtered[item].length <= 0) {
- delete filtered[item];
- }
+ filtered[item] = filtered[item].filter(el => el.spot);
+ if (filtered[item].length <= 0) {
+ delete filtered[item];
+ }
}
return filtered;
}
@@ -207,7 +212,7 @@ export class ComputationalResourceCreateDialogComponent implements OnInit {
shape_master: ['', Validators.required],
shape_slave: [''],
cluster_alias_name: ['', [Validators.required, Validators.pattern(this.clusterNamePattern),
- this.providerMaxLength, this.checkDuplication.bind(this)]],
+ this.providerMaxLength, this.checkDuplication.bind(this)]],
instance_number: ['', [Validators.required, Validators.pattern(this.nodeCountPattern), this.validInstanceNumberRange.bind(this)]],
preemptible_instance_number: [0, Validators.compose([Validators.pattern(this.integerRegex), this.validPreemptibleRange.bind(this)])],
instance_price: [0, [this.validInstanceSpotRange.bind(this)]],
@@ -324,10 +329,10 @@ export class ComputationalResourceCreateDialogComponent implements OnInit {
if (this.notebook_instance.template_name.toLowerCase().indexOf('tensorflow') !== -1
|| this.notebook_instance.template_name.toLowerCase().indexOf('deep learning') !== -1) {
const allowed: any = ['GPU optimized'];
- const filtered = Object.keys(this.selectedImage.shapes.resourcesShapeTypes)
+ const filtered = Object.keys(this.selectedImage.computation_resources_shapes)
.filter(key => allowed.includes(key))
.reduce((obj, key) => {
- obj[key] = this.selectedImage.shapes.resourcesShapeTypes[key];
+ obj[key] = this.selectedImage.computation_resources_shapes[key];
return obj;
}, {});
@@ -336,7 +341,7 @@ export class ComputationalResourceCreateDialogComponent implements OnInit {
this.cluster_types = images;
// (images.length > 0) ? this.model.setSelectedClusterType(0) : this.model.availableTemplates = false;
}
- this.selectedImage.shapes.resourcesShapeTypes = filtered;
+ this.selectedImage.computation_resources_shapes = filtered;
}
}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org