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/03/27 11:48:03 UTC

[incubator-dlab] branch DLAB-537 created (now 8ee12bb)

This is an automated email from the ASF dual-hosted git repository.

ankovalyshyn pushed a change to branch DLAB-537
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git.


      at 8ee12bb  [DLAB-573]: fixed preemptible node validation

This branch includes the following new commits:

     new 8ee12bb  [DLAB-573]: fixed preemptible node validation

The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org


[incubator-dlab] 01/01: [DLAB-573]: fixed preemptible node validation

Posted by an...@apache.org.
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 <An...@epam.com>
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: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org