Add kd-warn-threshold directive to show warning on input field when threshold is reached

Author: Sebastian Florek

src/app/frontend/common/components/components_module.js

@@ -16,6 +16,7 @@ import filtersModule from '../filters/filters_module';
 import labelsDirective from './labels/labels_directive';
 import middleEllipsisDirective from './middleellipsis/middleellipsis_directive';
 import sparklineDirective from './sparkline/sparkline_directive';
+import warnThresholdDirective from './warnthreshold/warnthreshold_directive';
 
 /**
  * Module containing common components for the application.
@@ -29,4 +30,5 @@ export default angular
         ])
     .directive('kdLabels', labelsDirective)
     .directive('kdMiddleEllipsis', middleEllipsisDirective)
-    .directive('kdSparkline', sparklineDirective);
+    .directive('kdSparkline', sparklineDirective)
+    .directive('kdWarnThreshold', warnThresholdDirective);

src/app/frontend/common/components/warnthreshold/warnthreshold.js

@@ -0,0 +1,79 @@
+// Copyright 2015 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+const kdWarnThresholdAttr = 'kdWarnThreshold';
+export const hasWarningAttr = 'kdWarnThresholdBind';
+// CSS class that is added to input container when field value meets warning condition
+const kdWarningClass = 'kd-warning';
+
+/**
+ * Returns true if input number is larger than max allowed number provided as attribute and
+ * there is no warning already set, false otherwise.
+ *
+ * @param {!angular.NgModelController} inputCtrl
+ * @param {!angular.Attributes} attributes - directive attributes (have to contain kdWarnThreshold)
+ * @return {boolean}
+ */
+export function shouldSetWarning(inputCtrl, attributes) {
+  /** @type {number} */
+  let number = parseInt(inputCtrl.$viewValue, 10);
+
+  return number > attributes[kdWarnThresholdAttr];
+}
+
+/**
+ * Returns true if input number is lower or equal to max allowed number provided as attribute
+ * and there is still a warning set, false otherwise.
+ *
+ * @param {!angular.NgModelController} inputCtrl
+ * @param {!angular.Attributes} attributes - directive attributes (have to contain kdWarnThreshold)
+ * @param {!angular.Scope} scope
+ * @return {boolean}
+ */
+export function shouldRemoveWarning(inputCtrl, attributes, scope) {
+  return hasWarning(scope) && !shouldSetWarning(inputCtrl, attributes);
+}
+
+/**
+ * Sets warning attribute on input controller and adds kd-warning css class to input container.
+ *
+ * @param {!angular.JQLite} inputContainer
+ * @param {!angular.Scope} scope
+ */
+export function setWarning(inputContainer, scope) {
+  scope[hasWarningAttr] = true;
+  inputContainer.addClass(kdWarningClass);
+}
+
+/**
+ * Removes warning attribute from input controller and removes kd-warning class from input
+ * container.
+ *
+ * @param {!angular.JQLite} inputContainer
+ * @param {!angular.Scope} scope
+ */
+export function removeWarning(inputContainer, scope) {
+  scope[hasWarningAttr] = false;
+  inputContainer.removeClass(kdWarningClass);
+}
+
+/**
+ * Returns true if kdWarnThreshold attribute is set to true on input controller, false otherwise.
+ *
+ * @param {!angular.Scope} scope
+ * @return {boolean}
+ */
+function hasWarning(scope) {
+  return scope[hasWarningAttr];
+}

src/app/frontend/common/components/warnthreshold/warnthreshold.scss

@@ -0,0 +1,57 @@
+// Copyright 2015 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+@import '../../../variables';
+
+input {
+  // When there is other error on field hide warning
+  &.ng-invalid {
+    ~ span {
+      &.kd-warn-threshold {
+        display: none;
+      }
+    }
+  }
+
+  //When there are no errors on field show warning
+  &.ng-valid {
+    ~ span {
+      &.kd-warn-threshold {
+        color: $warning;
+        display: inherit;
+        font-size: $caption-font-size-base;
+      }
+    }
+  }
+}
+
+md-input-container {
+  &.kd-warning {
+    // Color input container label when there are no errors
+    &:not(.md-input-invalid) {
+      label {
+        color: $warning;
+      }
+    }
+
+    > input {
+      // Color input bottom line when it's dirty and there are no errors
+      &.ng-dirty {
+        &:not(.ng-invalid) {
+          border-color: $warning;
+        }
+      }
+    }
+  }
+}

src/app/frontend/common/components/warnthreshold/warnthreshold_directive.js

@@ -0,0 +1,68 @@
+// Copyright 2015 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import {shouldSetWarning, setWarning, shouldRemoveWarning, removeWarning} from './warnthreshold';
+import {hasWarningAttr} from './warnthreshold';
+
+/**
+ * Description:
+ *    Directive can be used to warn user that some number may be too big for given input field
+ *    but not block the actual form submit.
+ *
+ * Params:
+ *    - kdWarnThreshold - Max number that is allowed before input field will be marked with
+ *      a warning.
+ *    - kdWarnThresholdBind - boolean page scope variable that should be bound to directive. Warning
+ *      state change will be populated to this variable.
+ *
+ * Usage:
+ *    <md-input-container>
+ *      <input type="number" name="maxInput" kd-warn-threshold="100"
+ *             kd-warn-threshold-bind="showWarning">
+ *      <span class="kd-warn-threshold" ng-show="showWarning">Warning message</span>
+ *    </md-input-container>
+ *
+ * @return {!angular.Directive}
+ */
+export default function warnThresholdDirective() {
+  return {
+    restrict: 'A',
+    require: ['^mdInputContainer', 'ngModel'],
+    scope: {
+      [hasWarningAttr]: '=',
+    },
+    /**
+     * @param {!angular.Scope} scope
+     * @param {!angular.JQLite} element
+     * @param {!angular.Attributes} attrs
+     * @param {!Array<!angular.NgModelController>} ctrl
+     */
+    link: (scope, element, attrs, ctrl) => {
+      /** @type {!angular.JQLite} - MdInputContainer element */
+      let inputContainer = element.parent();
+      /** @type {!angular.NgModelController} */
+      let inputCtrl = ctrl[1];
+
+      inputCtrl.$viewChangeListeners.push(() => {
+        if (shouldSetWarning(inputCtrl, attrs)) {
+          setWarning(inputContainer, scope);
+        }
+
+        if (shouldRemoveWarning(inputCtrl, attrs, scope)) {
+          removeWarning(inputContainer, scope);
+        }
+      });
+    },
+  };
+}

src/app/frontend/deploy/deployfromsettings.html

@@ -77,12 +77,15 @@
   <md-input-container class="md-block">
     <label>Number of pods</label>
     <input ng-model="ctrl.replicas" type="number" required min="1" name="replicas"
-           kd-validate="integer">
+           kd-validate="integer" kd-warn-threshold="100" kd-warn-threshold-bind="showWarning">
     <ng-messages for="ctrl.form.replicas.$error" role="alert" multiple>
       <ng-message when="required">Number of pods is required.</ng-message>
       <ng-message when="number, kdValid">Number of pods must be a positive integer.</ng-message>
       <ng-message when="min">Number of pods must be at least 1.</ng-message>
     </ng-messages>
+    <span class="kd-warn-threshold" ng-show="showWarning">
+      Setting high number of pods may cause performance issues of the cluster and Dashboard UI.
+    </span>
   </md-input-container>
   <kd-user-help>
     A Replication Controller will be created to maintain the desired number of pods across your

src/app/frontend/replicationcontrollerdetail/updatereplicas.html

@@ -28,11 +28,14 @@ <h4 class="md-title">Set desired number of pods</h4>
       <md-input-container class="md-block">
         <label>Number of pods</label>
         <input name="podCount" type="number" kd-validate="integer" min="1" ng-model="ctrl.replicas"
-               required>
+               required kd-warn-threshold="100" kd-warn-threshold-bind="showWarning">
         <ng-messages for="ctrl.updateReplicasForm.podCount.$error" role="alert">
           <ng-message when="required">Number of pods is required.</ng-message>
           <ng-message when="number,kdValid">Must be a positive integer.</ng-message>
         </ng-messages>
+        <span class="kd-warn-threshold" ng-show="showWarning">
+          Setting high number of pods may cause performance issues of the cluster and Dashboard UI.
+        </span>
       </md-input-container>
       <md-dialog-actions layout="row">
         <md-button class="md-primary" ng-click="ctrl.cancel()">Cancel</md-button>

src/test/frontend/common/components/warnthreshold/warnthreshold_directive_test.js

@@ -0,0 +1,72 @@
+// Copyright 2015 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import componentsModule from 'common/components/components_module';
+
+describe('Warn threshold directive', () => {
+  /** @type {!angular.Scope} */
+  let scope;
+  /** @type {function(!angular.Scope):!angular.JQLite} */
+  let compileFn;
+
+  beforeEach(() => {
+    angular.mock.module(componentsModule.name);
+
+    angular.mock.inject(($rootScope, $compile) => {
+      scope = $rootScope.$new();
+      compileFn = $compile(
+          '<form name="inputForm">' +
+          '<md-input-container>' +
+          '<input type="number" ng-model="maxInput" name="inputField" kd-warn-threshold="100"' +
+          'kd-warn-threshold-bind="showWarning">' +
+          '<span class="kd-warn-threshold" ng-show="showWarning">Error</span>' +
+          '</md-input-container>' +
+          '</form>');
+    });
+  });
+
+  it('should show warning when threshold is breached', () => {
+    // given
+    let element = compileFn(scope);
+    let inputContainer = element.find('md-input-container')[0];
+    let errMessageElement = element.find('span')[0];
+    let inputValue = 101;
+
+    // when
+    scope.inputForm.inputField.$setViewValue(inputValue);
+    scope.$digest();
+
+    // then
+    expect(inputContainer.classList).toContain('kd-warning');
+    expect(errMessageElement.classList).not.toContain('ng-hide');
+  });
+
+  it('should remove warning when value has been changed to lower than threshold', () => {
+    let element = compileFn(scope);
+    let inputContainer = element.find('md-input-container')[0];
+    let errMessageElement = element.find('span')[0];
+
+    scope.inputForm.inputField.$setViewValue(105);
+    scope.$digest();
+
+    expect(inputContainer.classList).toContain('kd-warning');
+    expect(errMessageElement.classList).not.toContain('ng-hide');
+
+    scope.inputForm.inputField.$setViewValue(100);
+    scope.$digest();
+
+    expect(inputContainer.classList).not.toContain('kd-warning');
+    expect(errMessageElement.classList).toContain('ng-hide');
+  });
+});