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 ad5f06b16c1140874a96b25e5414db9de5dae01b Author: Andriana Kovalyshyn <[email protected]> AuthorDate: Fri May 31 16:04:39 2019 +0300 [DLAB-655]: added projects to exploratory creation --- .../util/patterns.ts} | 33 ++-------------------- .../create-environment.component.scss | 8 ++++++ ...ratory-environment-create-dialog.component.html | 20 ++++++------- ...loratory-environment-create-dialog.component.ts | 24 ++++++---------- .../webapp/src/assets/styles/_general.scss | 9 ++++++ .../resources/webapp/src/assets/styles/_theme.scss | 10 +++++-- .../src/main/resources/webapp/src/styles.scss | 5 ++++ 7 files changed, 50 insertions(+), 59 deletions(-) diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/exploratory-environment-create-dialog/create-environment.component.scss b/services/self-service/src/main/resources/webapp/src/app/core/util/patterns.ts similarity index 59% copy from services/self-service/src/main/resources/webapp/src/app/resources/exploratory/exploratory-environment-create-dialog/create-environment.component.scss copy to services/self-service/src/main/resources/webapp/src/app/core/util/patterns.ts index 2eb2014..3cb9b12 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/exploratory-environment-create-dialog/create-environment.component.scss +++ b/services/self-service/src/main/resources/webapp/src/app/core/util/patterns.ts @@ -1,4 +1,4 @@ -/*! +/* * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file * distributed with this work for additional information @@ -17,33 +17,6 @@ * under the License. */ -.checkbox-group { - .config-details { - height: 0; - opacity: 0; - visibility: hidden; - text-align: left; - &.show { - height: 200px; - visibility: visible; - opacity: 1; - position: relative; - margin-top: 10px; - } - textarea { - height: 100%; - background: #f8f8f8 !important; - resize: none; - font-size: 14px; - line-height: 1.5; - font-family: Consolas, monospace; - } - span { - &.danger_color { - position: absolute; - bottom: -20px; - left: 0; - } - } - } +export const PATTERNS = { + } diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/exploratory-environment-create-dialog/create-environment.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/exploratory-environment-create-dialog/create-environment.component.scss index 2eb2014..f5b20c8 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/exploratory-environment-create-dialog/create-environment.component.scss +++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/exploratory-environment-create-dialog/create-environment.component.scss @@ -47,3 +47,11 @@ } } } + +.control-group { + .error { + position: absolute; + right: 0; + bottom: 3px; + } +} \ No newline at end of file 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 4759788..fa55bc9 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 @@ -45,10 +45,10 @@ <div class="control-group"> <label class="label">Select template</label> - <div class="control selector-wrapper"> + <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> + <mat-select formControlName="template_name" disableOptionCentering [disabled]="!templates.length"> <mat-option *ngFor="let template of templates" [value]="template.exploratory_environment_versions[0].version" (click)="getShapes($event, template)"> @@ -65,10 +65,10 @@ <div class="control-group" *ngIf="images && images.length > 0"> <label class="label">Select {{ DICTIONARY.image }}</label> <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 [value]="null">None</mat-option> <mat-option *ngFor="let image of images" [value]="image.name">{{ image.name }}</mat-option> </mat-select> <button class="caret"> @@ -85,8 +85,8 @@ && 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="createExploratoryForm?.controls['environment_name'].hasError('duplication')">This name already exists.</span> - <span class="danger_color" *ngIf="!createExploratoryForm?.controls.environment_name.valid + <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 <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 @@ -96,13 +96,13 @@ <div class="control-group"> <label class="label">{{ DICTIONARY.notebook_instance_size }}</label> - <div class="control selector-wrapper"> + <div class="control selector-wrapper" [ngClass]="{ 'not-active': !currentTemplate }"> <mat-form-field> <mat-label>Select {{ DICTIONARY.notebook_instance_size }}</mat-label> - <mat-select formControlName="shape" disableOptionCentering> + <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"> - <strong>{{ list_item.Size }}</strong> {{ list_item.Type }} + <strong class="highlight icon-label">{{ list_item.Size }}</strong> {{ list_item.Type }} </mat-option> </mat-optgroup> </mat-select> @@ -119,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="!createExploratoryForm?.controls.configuration_parameters.valid && createExploratoryForm?.controls['configuration_parameters'].dirty">Configuration parameters is not in a valid format</span> + <span class="error" *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> @@ -130,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]="!createExploratoryForm?.valid || !this.environment_shape" class="butt butt-success action">Create</button> + <button mat-raised-button type="submit" [disabled]="!createExploratoryForm?.valid" 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 f591005..ea04b92 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 @@ -77,7 +77,6 @@ export class ExploratoryEnvironmentCreateComponent implements OnInit { this.getProjects(); this.initFormModel(); - // this.open(); } initFormModel(): void { @@ -104,7 +103,6 @@ export class ExploratoryEnvironmentCreateComponent implements OnInit { this.currentTemplate = template; this.shapes = template.exploratory_environment_shapes; this.getImagesList(); - debugger; } providerMaxLength(control) { @@ -156,8 +154,9 @@ export class ExploratoryEnvironmentCreateComponent implements OnInit { // this.environment_shape = $event.model.value.type; // } - selectImage($event): void { - this.model.notebookImage = $event.model.value ? $event.model.value.fullName : null; + public selectImage($event): void { + debugger; + // this.model.notebookImage = $event.model.value ? $event.model.value.fullName : null; } createExploratoryEnvironment_btnClick($event, data) { @@ -186,22 +185,15 @@ export class ExploratoryEnvironmentCreateComponent implements OnInit { // } public selectConfiguration() { - if (this.configuration.nativeElement.checked && this.createExploratoryForm) { - this.createExploratoryForm.controls['configuration_parameters'] - .setValue(JSON.stringify(CLUSTER_CONFIGURATION.SPARK, undefined, 2)); - } else { - this.createExploratoryForm.controls['configuration_parameters'].setValue(''); - } + const value = (this.configuration.nativeElement.checked && this.createExploratoryForm) + ? JSON.stringify(CLUSTER_CONFIGURATION.SPARK, undefined, 2) : ''; + + this.createExploratoryForm.controls['configuration_parameters'].setValue(value); } private getImagesList() { this.userResourceService.getUserImages(this.currentTemplate.image) - .subscribe((res: any) => { - this.images = res.filter(el => el.status === 'CREATED'); - - // this.changeDetector.detectChanges(); - // this.setDefaultParams(); - }, + .subscribe((res: any) => this.images = res.filter(el => el.status === 'CREATED'), error => this.toastr.error(error.message || 'Images list loading failed!', 'Oops!')); } } diff --git a/services/self-service/src/main/resources/webapp/src/assets/styles/_general.scss b/services/self-service/src/main/resources/webapp/src/assets/styles/_general.scss index 718da2e..ad9a551 100644 --- a/services/self-service/src/main/resources/webapp/src/assets/styles/_general.scss +++ b/services/self-service/src/main/resources/webapp/src/assets/styles/_general.scss @@ -156,4 +156,13 @@ button { padding-right: 5px; overflow: hidden; } +} + +.icon-label { + display: inline-block; + width: 30px; + text-align: center; + vertical-align: middle; + color: #35afd5; + line-height: 26px; } \ No newline at end of file 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 ab6949a..1c69be9 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 @@ -88,6 +88,7 @@ } .caret { width: 40px; + height: 40px; color: #4ab8dc; border: none; border-left: 1px solid #ececec; @@ -95,7 +96,6 @@ position: absolute; right: 0; top: 0px; - height: 36px; cursor: pointer; &.not-allowed { background-color: #dcdcdc; @@ -144,6 +144,10 @@ .mat-option { font-family: 'Open Sans', sans-serif; + .mat-option-text { + color: #607D8B; + font-size: 15px; + } } .mat-option.mat-selected { @@ -256,7 +260,7 @@ .mat-reset { .mat-form-field-type-mat-select:not(.mat-form-field-disabled) { .mat-form-field-flex { - line-height: 20px; + line-height: 18px; } } .mat-form-field { @@ -266,7 +270,7 @@ width: 275px; border: 0; font-family: 'Open Sans', sans-serif; - font-size: 16px; + font-size: 15px; font-weight: 300; .mat-select-value-text { span { diff --git a/services/self-service/src/main/resources/webapp/src/styles.scss b/services/self-service/src/main/resources/webapp/src/styles.scss index a6ff705..78972f4 100644 --- a/services/self-service/src/main/resources/webapp/src/styles.scss +++ b/services/self-service/src/main/resources/webapp/src/styles.scss @@ -134,6 +134,11 @@ mat-chip.mat-chip strong { pointer-events: none; } +.not-active { + cursor: not-allowed; + opacity: .6; +} + .message { padding: 40px 20px; text-align: center; --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
