This is an automated email from the ASF dual-hosted git repository. ankovalyshyn pushed a commit to branch DLAB-537 in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit 8ee12bb1b35a9117eccc31933621928e0c94291b Author: Andriana Kovalyshyn <[email protected]> AuthorDate: Wed Mar 27 13:27:38 2019 +0200 [DLAB-573]: fixed preemptible node validation --- ...utational-resource-create-dialog.component.html | 9 +- ...utational-resource-create-dialog.component.scss | 3 + ...mputational-resource-create-dialog.component.ts | 13 ++- .../resources/webapp/src/assets/styles/_theme.scss | 101 +++++++++++++++++---- 4 files changed, 103 insertions(+), 23 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 aaeb933..dffcb07 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 @@ -91,7 +91,7 @@ </div> </div> - <div class="checkbox-group m-top-30" *ngIf="PROVIDER === 'gcp' && model.selectedImage?.image === 'docker.dlab-dataengine-service'"> + <div class="checkbox-group m-top-30 m-bott-10" *ngIf="PROVIDER === 'gcp' && model.selectedImage?.image === 'docker.dlab-dataengine-service'"> <label> <input #preemptibleNode type="checkbox" (change)="selectPreemptibleNodes($event)" /> Preemptible nodes </label> @@ -99,7 +99,12 @@ <div *ngIf="preemptible?.nativeElement['checked']" class="control-group"> <label class="label">Preemptible node count</label> <div class="control"> - <input type="number" class="form-control" min="{{minPreemptibleInstanceNumber}}" max="{{maxPreemptibleInstanceNumber}}" formControlName="preemptible_instance_number" (keypress)="isNumberKey($event)" /> + <input type="text" class="form-control" + formControlName="preemptible_instance_number" + (keypress)="isNumberKey($event)" + (keydown.arrowup)="preemptibleCounter($event, 'increment')" + (keydown.arrowdown)="preemptibleCounter($event, 'decrement')" /> + <!-- <input type="number" class="form-control" min="{{minPreemptibleInstanceNumber}}" max="{{maxPreemptibleInstanceNumber}}" formControlName="preemptible_instance_number" (keypress)="isNumberKey($event)" /> --> <span class="danger_color" *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 diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.scss index 88048f6..78cb72e 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.scss +++ b/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.scss @@ -74,6 +74,9 @@ } } .preemptible-details { + .label { + padding-left: 10px; + } .control { position: relative; } 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 777c10e..6e9c991 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 @@ -48,6 +48,7 @@ export class ComputationalResourceCreateDialogComponent implements OnInit { clusterNamePattern: string = '[-_a-zA-Z0-9]*[_-]*[a-zA-Z0-9]+'; nodeCountPattern: string = '^[1-9]\\d*$'; delimitersRegex = /[-_]?/g; + integerRegex = '^[0-9]*$'; public minInstanceNumber: number; public maxInstanceNumber: number; @@ -177,7 +178,7 @@ export class ComputationalResourceCreateDialogComponent implements OnInit { } public selectConfiguration() { - if (this.configuration.nativeElement.checked) { + if (this.configuration && this.configuration.nativeElement.checked) { const template = (this.model.selectedImage.image === 'docker.dlab-dataengine-service') ? CLUSTER_CONFIGURATION.EMR : CLUSTER_CONFIGURATION.SPARK; @@ -229,6 +230,14 @@ export class ComputationalResourceCreateDialogComponent implements OnInit { } } + public preemptibleCounter($event, action): void { + $event.preventDefault(); + + const value = this.resourceForm.controls['preemptible_instance_number'].value; + const newValue = (action === 'increment' ? Number(value) + 1 : Number(value) - 1); + this.resourceForm.controls.preemptible_instance_number.setValue(newValue); + } + public close(): void { if (this.bindDialog.isOpened) this.bindDialog.close(); @@ -239,7 +248,7 @@ export class ComputationalResourceCreateDialogComponent implements OnInit { 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)]], - preemptible_instance_number: [0, [this.validPreemptibleRange.bind(this)]], + preemptible_instance_number: [0, Validators.compose([Validators.pattern(this.integerRegex), this.validPreemptibleRange.bind(this)])], instance_price: [0, [this.validInstanceSpotRange.bind(this)]], configuration_parameters: ['', [this.validConfiguration.bind(this)]] }); 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 c6be268..7b9ad7e 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 @@ -27,7 +27,7 @@ font-style: normal; font-weight: 600; font-size: 16px; - font-family:'Open Sans', sans-serif; + font-family: 'Open Sans', sans-serif; color: #577289; i { margin: 0 5px 0 0; @@ -58,13 +58,13 @@ } &:disabled { cursor: not-allowed; - opacity: .6; + opacity: 0.6; } } } .mat-button-focus-overlay { - background-color: rgba(255, 0, 0, 0)!important; + background-color: rgba(255, 0, 0, 0) !important; } .mat-button-ripple.mat-button-ripple-round.mat-ripple { @@ -84,8 +84,7 @@ /*.mat-input-placeholder.mat-focused, */ .mat-input-underline .mat-input-ripple, .mat-form-field-underline .mat-form-field-ripple, -.mat-select-underline -.mat-input-underline { +.mat-select-underline .mat-input-underline { background-color: #35afd5 !important; } .mat-input-placeholder.mat-focused, @@ -101,7 +100,7 @@ font-size: 14px; } .mat-input-placeholder { -font-weight: 400; + font-weight: 400; } .mat-datepicker-toggle-active { color: #2dadd7; @@ -109,7 +108,7 @@ font-weight: 400; /* grid filtering */ .filter-row .dropdown-multiselect button, -.filter-row input[type=text] { +.filter-row input[type='text'] { font-size: 14px; height: 34px; } @@ -121,7 +120,7 @@ font-weight: 400; font-weight: 100; font-size: 16px; line-height: 24px; - font-family:'Open Sans', sans-serif; + font-family: 'Open Sans', sans-serif; } .backup-dialog .mat-slide-toggle, .scheduler-dialog .mat-slide-toggle { @@ -134,17 +133,27 @@ font-weight: 400; justify-content: flex-end; } -.backup-dialog .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb, -.scheduler-dialog .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb { +.backup-dialog + .mat-slide-toggle.mat-checked:not(.mat-disabled) + .mat-slide-toggle-thumb, +.scheduler-dialog + .mat-slide-toggle.mat-checked:not(.mat-disabled) + .mat-slide-toggle-thumb { background-color: #36afd5; } -.backup-dialog .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar, -.scheduler-dialog .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar { +.backup-dialog + .mat-slide-toggle.mat-checked:not(.mat-disabled) + .mat-slide-toggle-bar, +.scheduler-dialog + .mat-slide-toggle.mat-checked:not(.mat-disabled) + .mat-slide-toggle-bar { background-color: rgba(54, 175, 213, 0.3); } -.scheduler-dialog .mat-fab.mat-accent, .mat-mini-fab.mat-accent, .mat-raised-button.mat-accent { +.scheduler-dialog .mat-fab.mat-accent, +.mat-mini-fab.mat-accent, +.mat-raised-button.mat-accent { background-color: #36afd5; } @@ -169,6 +178,14 @@ font-weight: 400; width: 96%; } } + .list-selected { + .mat-chip-list { + .mat-chip-list-wrapper { + overflow-y: auto; + max-height: 110px; + } + } + } .mat-reset { .mat-form-field-type-mat-select:not(.mat-form-field-disabled) { .mat-form-field-flex { @@ -186,7 +203,7 @@ font-weight: 400; font-weight: 300; .mat-select-value-text { span { - color: #607D8B; + color: #607d8b; } } } @@ -200,7 +217,7 @@ font-weight: 400; padding-top: 0; color: #607d8b; } - .mat-select{ + .mat-select { &:focus { .mat-input-underline { .mat-input-ripple { @@ -212,7 +229,7 @@ font-weight: 400; color: transparent; } } - } + } } } .mat-input-wrapper.mat-form-field-wrapper .mat-form-field-underline { @@ -221,7 +238,7 @@ font-weight: 400; } } .mat-form-field-type-mat-chip-list { - width: 100%; + width: 100%; } .mat-step-header { .mat-step-icon { @@ -254,17 +271,63 @@ font-weight: 400; .mat-primary { .mat-pseudo-checkbox-checked { - background: #00BCD4; + background: #00bcd4; } } -.mat-icon-button .mat-icon, .mat-icon-button i { +.mat-icon-button .mat-icon, +.mat-icon-button i { line-height: 1 !important; font-size: 18px; } .error-modalbox { + overflow: hidden; .mat-dialog-container { padding: 0; + .content { + color: #718ba6; + padding: 20px 0; + font-size: 14px; + font-weight: 400; + text-align: center; + margin: 0; + } + .dialog-header { + position: relative; + top: 0; + padding-left: 30px; + background: #f6fafe; + height: 54px; + line-height: 54px; + } + .dialog-header h4 { + color: #455c74; + font-size: 18px; + font-weight: 600; + i { + vertical-align: sub; + } + } + .close { + position: absolute; + top: 0; + right: 0; + height: 50px; + width: 50px; + font-size: 24px; + border: 0; + background: none; + color: #577289; + outline: none; + cursor: pointer; + transition: all 0.45s ease-in-out; + } + .close:hover { + color: #36afd5; + } + .text-center button { + margin-bottom: 25px; + } } } --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
