Validation on Deploy Page: Labels -> Label Key and Label Value. All synchronous validation moved to custom directives.

Author: digitalfishpond

src/app/frontend/common/validators/types/integertype.js renamed to src/app/frontend/common/validators/integervalidator.js

@@ -12,13 +12,13 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {Type} from './type';
+import {Validator} from './validator';
 
 /**
  * @final
- * @extends {Type}
+ * @extends {Validator}
  */
-export class IntegerType extends Type {
+export class IntegerValidator extends Validator {
   constructor() { super(); }
 
   /**

src/app/frontend/common/validators/validate_directive.js

@@ -23,13 +23,18 @@
  *
  * usage:
  *  `<input type="number" kd-validate="integer">`
+ *  `<input type="string" kd-validate="labelKeyNameLength">`
+ *  `<input type="string" kd-validate="labelKeyNamePattern">`
+ *  `<input type="string" kd-validate="labelKeyPrefixLength">`
+ *  `<input type="string" kd-validate="labelKeyPrefixPattern">`
+ *  `<input type="string" kd-validate="labelKeyNameLength">`
  *
- * @param {!./types/type_factory.TypeFactory} kdTypeFactory
+ * @param {!./validator_factory.ValidatorFactory} kdValidatorFactory
  * @return {!angular.Directive}
  * @ngInject
  */
-export default function validateDirective(kdTypeFactory) {
-  const validateType = 'kdValidate';
+export default function validateDirective(kdValidatorFactory) {
+  const validateValidator = 'kdValidate';
 
   return {
     restrict: 'A',
@@ -41,10 +46,18 @@ export default function validateDirective(kdTypeFactory) {
      * @param {!angular.NgModelController} ctrl
      */
     link: (scope, element, attrs, ctrl) => {
-      /** @type {!./types/type.Type} */
-      let type = kdTypeFactory.getType(attrs[validateType]);
+      let validateValidatorNames = attrs[validateValidator].split(',');
 
-      ctrl.$validators['kdValid'] = (value) => { return type.isValid(value); };
+      validateValidatorNames.forEach((validateValidatorName) => {
+        validateValidatorName = validateValidatorName.trim();
+        /** @type {!./validator.Validator} */
+        let validator = kdValidatorFactory.getValidator(validateValidatorName);
+        // To preserve camel case on validator name
+        let validatorName =
+            `kdValid${validateValidatorName[0].toUpperCase()}${validateValidatorName.substr(1)}`;
+
+        ctrl.$validators[validatorName] = (value) => { return validator.isValid(value); };
+      });
     },
   };
 }

src/app/frontend/common/validators/types/type.js renamed to src/app/frontend/common/validators/validator.js

@@ -20,10 +20,10 @@
  *
  * @class
  */
-export class Type {
+export class Validator {
   constructor() {
-    if (this.constructor === Type) {
-      throw new TypeError('Abstract class "Type" cannot be instantiated directly.');
+    if (this.constructor === Validator) {
+      throw new TypeError('Abstract class "Validator" cannot be instantiated directly.');
     }
   }
 

src/app/frontend/common/validators/validator_factory.js

@@ -0,0 +1,58 @@
+// 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 {IntegerValidator} from './integervalidator';
+import {LabelKeyNameLengthValidator} from 'deploy/validators/labelkeynamelengthvalidator';
+import {LabelKeyPrefixLengthValidator} from 'deploy/validators/labelkeyprefixlengthvalidator';
+import {LabelKeyNamePatternValidator} from 'deploy/validators/labelkeynamepatternvalidator';
+import {LabelKeyPrefixPatternValidator} from 'deploy/validators/labelkeyprefixpatternvalidator';
+import {LabelValuePatternValidator} from 'deploy/validators/labelvaluepatternvalidator';
+
+/**
+ * @final
+ */
+export class ValidatorFactory {
+  /**
+   * @constructs ValidatorFactory
+   */
+  constructor() {
+    /** @private {Map<Array<string, !./validator.Validator>>} */
+    this.validatorMap_ = new Map();
+
+    // Initialize map with supported types
+    this.validatorMap_.set('integer', new IntegerValidator());
+    this.validatorMap_.set('labelKeyNameLength', new LabelKeyNameLengthValidator());
+    this.validatorMap_.set('labelKeyPrefixLength', new LabelKeyPrefixLengthValidator());
+    this.validatorMap_.set('labelKeyNamePattern', new LabelKeyNamePatternValidator());
+    this.validatorMap_.set('labelKeyPrefixPattern', new LabelKeyPrefixPatternValidator());
+    this.validatorMap_.set('labelValuePattern', new LabelValuePatternValidator());
+  }
+
+  /**
+   * Returns specific Type class based on given type name.
+   *
+   * @method
+   * @param validatorName
+   * @returns {!./validator.Validator}
+   */
+  getValidator(validatorName) {
+    let validatorObject = this.validatorMap_.get(validatorName);
+
+    if (!validatorObject) {
+      throw new Error(`Given validator '${validatorName}' is not supported.`);
+    }
+
+    return validatorObject;
+  }
+}

src/app/frontend/common/validators/validators_module.js

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import validateDirective from './validate_directive';
-import {TypeFactory} from './types/type_factory';
+import {ValidatorFactory} from './validator_factory';
 
 /**
  * Module containing validators for the application.
@@ -24,5 +24,5 @@ export default angular
         [
           'ngMaterial',
         ])
-    .service('kdTypeFactory', TypeFactory)
+    .service('kdValidatorFactory', ValidatorFactory)
     .directive('kdValidate', validateDirective);

src/app/frontend/deploy/deployfromsettings.html

@@ -80,7 +80,7 @@
            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="number, kdValidInteger">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">

src/app/frontend/deploy/deploylabel.html

@@ -17,25 +17,34 @@
 <ng-form layout="row" flex="auto" name="labelForm">
   <md-input-container md-no-float class="kd-deploy-input-row" flex="45">
     <input name="key" ng-model="labelCtrl.label.key" ng-change="labelCtrl.check(labelForm)"
-           placeholder="{{labelCtrl.label.key}}" ng-disabled="!labelCtrl.label.editable">
-    <ng-messages for="labelForm.key.$error" ng-if="labelForm.key.$invalid">
+           placeholder="{{labelCtrl.label.key}}" ng-disabled="!labelCtrl.label.editable"
+           kd-validate="labelKeyNameLength,labelKeyPrefixLength,labelKeyNamePattern,labelKeyPrefixPattern"
+           ng-model-options="{allowInvalid: true}">
+    <ng-messages for="labelForm.key.$error" ng-if="labelForm.key.$touched && labelForm.key.$invalid">
       <ng-message when="unique">{{labelCtrl.label.key}} is not unique.</ng-message>
-      <ng-message when="prefixPattern">
-        Prefix (before slash) is not a valid DNS subdomain prefix. Example: my-domain.com
+      <ng-message when="kdValidLabelKeyPrefixPattern">
+        Prefix is not a valid DNS subdomain prefix. Example: my-domain.com
       </ng-message>
-      <ng-message when="namePattern">
-        Label key name should be lower or upper-case alphanumeric with '-', '_' and '.' between words only
+      <ng-message when="kdValidLabelKeyNamePattern">
+        Label key name must be alphanumeric separated by '-', '_' or '.',
+        optionally prefixed by a DNS subdomain and '/'
       </ng-message>
-      <ng-message when="prefixLength">Prefix should not exceed 253 characters</ng-message>
-      <ng-message when="nameLength">Label Key name should not exceed 63 characters</ng-message>
+      <ng-message when="kdValidLabelKeyPrefixLength">Prefix should not exceed 253 characters</ng-message>
+      <ng-message when="kdValidLabelKeyNameLength">Label Key name should not exceed 63 characters</ng-message>
     </ng-messages>
   </md-input-container>
   <p flex="5"></p>
   <md-input-container md-no-float class="kd-deploy-input-row" flex="40">
-    <input ng-model="labelCtrl.label.value" ng-change="labelCtrl.check()"
+    <input name="value" ng-model="labelCtrl.label.value"
            placeholder="{{labelCtrl.label.value}}" ng-disabled="!labelCtrl.label.editable"
-           ng-model-options="{ getterSetter: true }">
-    <ng-messages ng-if="labelForm.key.$error.unique"></ng-messages>
+           kd-validate="labelValuePattern" ng-change="labelCtrl.check()" md-maxlength="253"
+           ng-model-options="{ getterSetter: true, allowInvalid: true }">
+    <ng-messages for="labelForm.value.$error" ng-if="labelForm.value.$touched && labelForm.value.$invalid">
+      <ng-message when="kdValidLabelValuePattern">
+        Label value must be alphanumeric separated by '.' , '-' or '_'
+      </ng-message>
+      <ng-message when="maxlength">Label Value must not exceed 253 characters</ng-message>
+    </ng-messages>
   </md-input-container>
   <md-button type="button" ng-show="labelCtrl.isRemovable()"
              ng-click="labelCtrl.deleteLabel()"

src/app/frontend/deploy/deploylabel_controller.js

@@ -75,7 +75,6 @@ export default class DeployLabelController {
   addIfNeeded_() {
     /** @type {!DeployLabel} */
     let lastLabel = this.labels[this.labels.length - 1];
-
     if (this.isFilled_(lastLabel)) {
       this.addNewLabel_();
     }
@@ -91,41 +90,18 @@ export default class DeployLabelController {
    * Validates label within label form.
    * Current checks:
    *  - duplicated key
-   *  - key prefix pattern
-   *  - key name pattern
-   *  - key prefix length
-   *  - key name length
    * @param {!angular.FormController|undefined} labelForm
    * @private
    */
-  // TODO: @digitalfishpond Move these validations to directives
   validateKey_(labelForm) {
     if (angular.isDefined(labelForm)) {
       /** @type {!angular.NgModelController} */
       let elem = labelForm.key;
-      /** @type {!RegExp} */
-      let PrefixPattern = /^(.*\/.*)$/;
-      /** @type {boolean} */
-      let isPrefixed = PrefixPattern.test(this.label.key);
-      /** @type {number} */
-      let slashPosition = isPrefixed ? this.label.key.indexOf('/') : -1;
 
       /** @type {boolean} */
       let isUnique = !this.isKeyDuplicated_();
-      /** @type {boolean} */
-      let isKeyPrefixPatternOk = this.matchesKeyPrefixPattern_(isPrefixed, slashPosition);
-      /** @type {boolean} */
-      let isKeyNamePatternOk = this.matchesKeyNamePattern_(isPrefixed, slashPosition);
-      /** @type {boolean} */
-      let isKeyPrefixLengthOk = this.matchesKeyPrefixLength_(isPrefixed, slashPosition);
-      /** @type {boolean} */
-      let isKeyNameLengthOk = this.matchesKeyNameLength_(isPrefixed, slashPosition);
 
       elem.$setValidity('unique', isUnique);
-      elem.$setValidity('prefixPattern', isKeyPrefixPatternOk);
-      elem.$setValidity('namePattern', isKeyNamePatternOk);
-      elem.$setValidity('prefixLength', isKeyPrefixLengthOk);
-      elem.$setValidity('nameLength', isKeyNameLengthOk);
     }
   }
 
@@ -148,84 +124,6 @@ export default class DeployLabelController {
     return duplications > 1;
   }
 
-  /**
-   * Returns true if the label key prefix (before the "/" if there is one) matches a lowercase
-   * alphanumeric character
-   * optionally followed by lowercase alphanumeric or '-' or '.' and ending with a lower case
-   * alphanumeric character,
-   * with '.' only permitted if surrounded by lowercase alphanumeric characters (eg:
-   * 'good.prefix-pattern',
-   * otherwise returns false.
-   * @return {boolean}
-   * @param {boolean} isPrefixed
-   * @param {number} slashPosition
-   * @private
-   */
-  matchesKeyPrefixPattern_(isPrefixed, slashPosition) {
-    /** @type {!RegExp} */
-    let labelKeyPrefixPattern = /^[a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*$/;
-    /** @type {string} */
-    let labelPrefix = isPrefixed ? this.label.key.substring(0, slashPosition) : 'valid-pattern';
-
-    return (labelKeyPrefixPattern.test(labelPrefix));
-  }
-
-  /**
-   * Returns true if the label key name (after the "/" if there is one) matches an alphanumeric
-   * character (upper
-   * or lower case) optionally followed by alphanumeric or -_. and ending with an alphanumeric
-   * character
-   * (upper or lower case), otherwise returns false.
-   * @return {boolean}
-   * @param {boolean} isPrefixed
-   * @param {number} slashPosition
-   * @private
-   */
-  matchesKeyNamePattern_(isPrefixed, slashPosition) {
-    /** @type {!RegExp} */
-    let labelKeyNamePattern = /^([A-Za-z0-9][-A-Za-z0-9_.]*)?[A-Za-z0-9]$/;
-    /** @type {string} */
-    let labelName = isPrefixed ? this.label.key.substring(slashPosition + 1) : this.label.key;
-
-    return (labelKeyNamePattern.test(labelName));
-  }
-
-  /**
-   * Returns true if the label key name (after the "/" if there is one) is equal or shorter than 253
-   * characters,
-   * otherwise returns false.
-   * @return {boolean}
-   * @param {boolean} isPrefixed
-   * @param {number} slashPosition
-   * @private
-   */
-  matchesKeyPrefixLength_(isPrefixed, slashPosition) {
-    /** @type {number} */
-    let maxLength = 253;
-    /** @type {string} */
-    let labelPrefix = isPrefixed ? this.label.key.substring(0, slashPosition) : '';
-
-    return (labelPrefix.length <= maxLength);
-  }
-
-  /**
-   * Returns true if the label key name (after the "/" if there is one) is equal or shorter than 63
-   * characters,
-   * otherwise returns false.
-   * @return {boolean}
-   * @param {boolean} isPrefixed
-   * @param {number} slashPosition
-   * @private
-   */
-  matchesKeyNameLength_(isPrefixed, slashPosition) {
-    /** @type {number} */
-    let maxLength = 63;
-    /** @type {string} */
-    let labelName = isPrefixed ? this.label.key.substring(slashPosition + 1) : this.label.key;
-
-    return (labelName.length <= maxLength);
-  }
-
   /**
    * Returns true if label key and value are not empty, false otherwise.
    * @param {!DeployLabel} label

src/app/frontend/deploy/validators/labelkeynamelengthvalidator.js

@@ -0,0 +1,42 @@
+// 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 {Validator} from 'common/validators/validator';
+
+/**
+ * @final
+ * @extends {Validator}
+ */
+export class LabelKeyNameLengthValidator extends Validator {
+  constructor() {
+    super();
+    /** @type {number} */
+    this.maxKeyLength = 63;
+  }
+
+  /**
+   * Returns true if the label key name (after the "/" if there is one) is equal or shorter than 63
+   * characters, otherwise returns false.
+   *
+   * @override
+   */
+  isValid(value) {
+    /** @type {number} */
+    let slashPosition = value.indexOf('/');
+    /** @type {string} */
+    let labelKeyName = slashPosition > -1 ? value.substring(slashPosition + 1) : value;
+
+    return labelKeyName.length <= this.maxKeyLength;
+  }
+}