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/24 10:56:36 UTC
[incubator-dlab] 01/07: [DLAB-787]: added custom tag on exploratory
env
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 d28fe2f942e1d90afacb6ee3701cc53b7ef8accd
Author: Andriana Kovalyshyn <An...@epam.com>
AuthorDate: Wed Jun 19 16:43:31 2019 +0300
[DLAB-787]: added custom tag on exploratory env
---
.../create-environment.component.html | 58 ++++++++++++++--------
.../create-environment.component.ts | 12 ++---
2 files changed, 44 insertions(+), 26 deletions(-)
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/create-environment/create-environment.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/create-environment/create-environment.component.html
index 432e71d..771d325 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/create-environment/create-environment.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/create-environment/create-environment.component.html
@@ -31,8 +31,10 @@
<mat-form-field>
<mat-label>Select project</mat-label>
<mat-select formControlName="project" disableOptionCentering>
- <mat-option *ngFor="let project of projects" [value]="project.name" (click)="getTemplates($event, project)">{{ project.name }}</mat-option>
- <mat-option *ngIf="!projects.length" class="multiple-select ml-10" disabled>Projects list is empty</mat-option>
+ <mat-option *ngFor="let project of projects" [value]="project.name"
+ (click)="getTemplates($event, project)">{{ project.name }}</mat-option>
+ <mat-option *ngIf="!projects.length" class="multiple-select ml-10" disabled>Projects list is empty
+ </mat-option>
</mat-select>
<button class="caret">
<i class="material-icons">keyboard_arrow_down</i>
@@ -46,9 +48,10 @@
<div class="control selector-wrapper" [ngClass]="{ 'not-active' : !endpoints.length }">
<mat-form-field>
<mat-label>Select endpoint</mat-label>
- <mat-select formControlName="endpoint" disableOptionCentering>
+ <mat-select formControlName="endpoint" disableOptionCentering [disabled]="!endpoints.length">
<mat-option *ngFor="let endpoint of endpoints" [value]="endpoint">{{ endpoint }}</mat-option>
- <mat-option *ngIf="!endpoints.length" class="multiple-select ml-10" disabled>Endpoints list is empty</mat-option>
+ <mat-option *ngIf="!endpoints.length" class="multiple-select ml-10" disabled>Endpoints list is empty
+ </mat-option>
</mat-select>
<button class="caret">
<i class="material-icons">keyboard_arrow_down</i>
@@ -64,11 +67,11 @@
<mat-label>Select template</mat-label>
<mat-select formControlName="version" disableOptionCentering [disabled]="!templates.length">
<mat-option *ngFor="let template of templates"
- [value]="template.exploratory_environment_versions[0].version"
- (click)="getShapes(template)">
+ [value]="template.exploratory_environment_versions[0].version" (click)="getShapes(template)">
{{ template.exploratory_environment_versions[0].template_name }}
</mat-option>
- <mat-option *ngIf="!templates.length" class="multiple-select ml-10" disabled>Templates list is empty</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>
@@ -85,7 +88,8 @@
<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-option *ngIf="!images.length" class="multiple-select ml-10" disabled>Images list is empty</mat-option>
+ <mat-option *ngIf="!images.length" class="multiple-select ml-10" disabled>Images list is empty
+ </mat-option>
</mat-select>
<button class="caret">
<i class="material-icons">keyboard_arrow_down</i>
@@ -100,12 +104,14 @@
<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>
+ 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 *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>
@@ -129,29 +135,41 @@
</div>
</div>
+ <div class="control-group">
+ <label class="label">Custom tag</label>
+ <div class="control">
+ <input type="text" class="form-control" placeholder="Enter custom tag" formControlName="custom_tag">
+ </div>
+ </div>
+
<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" id="config"></textarea>
- <span class="error" *ngIf="!createExploratoryForm?.controls.cluster_config.valid && createExploratoryForm?.controls['cluster_config'].dirty">Configuration parameters is not in a valid format</span>
+ <textarea formControlName="cluster_config" placeholder="Cluster configuration template, JSON"
+ data-gramm_editor="false" id="config"></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>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>
-
+
<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="button"
- class="butt butt-success action"
- [disabled]="!createExploratoryForm?.valid"
- (click)="createExploratoryEnvironment(createExploratoryForm.value)">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/create-environment/create-environment.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/create-environment/create-environment.component.ts
index 0dca14b..8eb8f9b 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/create-environment/create-environment.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/create-environment/create-environment.component.ts
@@ -86,7 +86,7 @@ export class ExploratoryEnvironmentCreateComponent implements OnInit {
};
data.cluster_config = data.cluster_config ? JSON.parse(data.cluster_config) : null
- this.userResourceService.createExploratoryEnvironment({...parameters, ...data}).subscribe((response: any) => {
+ 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!'));
}
@@ -101,23 +101,23 @@ export class ExploratoryEnvironmentCreateComponent implements OnInit {
}
private initFormModel(): void {
-
+
this.createExploratoryForm = this._fb.group({
project: ['', Validators.required],
endpoint: ['', Validators.required],
version: ['', Validators.required],
notebook_image_name: [''],
shape: ['', Validators.required],
- name: ['', [Validators.required, Validators.pattern(PATTERNS.namePattern),
- this.providerMaxLength, this.checkDuplication.bind(this)]],
- cluster_config: ['', [this.validConfiguration.bind(this)]]
+ name: ['', [Validators.required, Validators.pattern(PATTERNS.namePattern), this.providerMaxLength, this.checkDuplication.bind(this)]],
+ cluster_config: ['', [this.validConfiguration.bind(this)]],
+ custom_tag: ['', [Validators.pattern(PATTERNS.namePattern)]]
});
}
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!'));
+ error => this.toastr.error(error.message || 'Images list loading failed!', 'Oops!'));
}
private checkDuplication(control) {
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org