UX improvements to the enroll-node dialog

Made the following improvements based on UX review:
- Added "X" button to explicity close the dialog
- Clicking on the backdrop no longer closes the dialog
- The dialog is now draggable from the header
- Required form fields are indicated using an asterisk
- Added supoort for boolean attributes as True/False selections
- Default values when available are used as placeholders
- Added input validation for port, address, node name, and
  deploy_kernel/ramdisk properties
- Order driver properties in form based on several rules

Change-Id: I4780de2aa49503073bc4d63ec212c4d949b4b2cf

ironic_ui/static/dashboard/admin/ironic/empty-to-pristine.directive.js

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2016 Cray Inc.
+ *
+ * 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.
+ */
+(function () {
+  'use strict';
+
+  angular
+    .module('horizon.dashboard.admin.ironic')
+    .directive('emptyToPristine', EmptyToPristine);
+
+  function EmptyToPristine() {
+    return {
+      restrict: 'A',
+      require: 'ngModel',
+      link: function(scope, elem, attrs, ctrl) {
+        ctrl.$parsers.push(function(viewValue) {
+          if (viewValue === "") {
+            ctrl.$setPristine();
+          }
+          return viewValue;
+        });
+      }
+    };
+  }
+})();

ironic_ui/static/dashboard/admin/ironic/enroll-node/enroll-node.controller.js

@@ -29,6 +29,7 @@
     'horizon.app.core.openstack-service-api.ironic',
     'horizon.app.core.openstack-service-api.glance',
     'horizon.dashboard.admin.ironic.enroll-node.service',
+    'horizon.dashboard.admin.ironic.validHostNamePattern',
     '$log'
   ];
 
@@ -37,17 +38,20 @@
                                 ironic,
                                 glance,
                                 enrollNodeService,
+                                validHostNamePattern,
                                 $log) {
     var ctrl = this;
 
+    ctrl.validHostNameRegex = new RegExp(validHostNamePattern);
     ctrl.drivers = null;
     ctrl.images = null;
     ctrl.loadingDriverProperties = false;
     // Object containing the set of properties associated with the currently
     // selected driver
     ctrl.driverProperties = null;
+    ctrl.driverPropertyGroups = null;
 
-    // Paramater object that defines the node to be enrolled
+    // Parameter object that defines the node to be enrolled
     ctrl.node = {
       name: null,
       driver: null,
@@ -64,7 +68,7 @@
     }
 
     /**
-     * Get the list of currently active Ironic drivers
+     * @description Get the list of currently active Ironic drivers
      *
      * @return {void}
      */
@@ -75,7 +79,7 @@
     }
 
     /**
-     * Get the list of images from Glance
+     * @description Get the list of images from Glance
      *
      * @return {void}
      */
@@ -86,7 +90,133 @@
     }
 
     /**
-     * Get the properties associated with a specified driver
+     * @description Check whether a group contains required properties
+     *
+     * @param {DriverProperty[]} group - Property group
+     * @return {boolean} Return true if the group contains required
+     * properties, false otherwise
+     */
+    function driverPropertyGroupHasRequired(group) {
+      var hasRequired = false;
+      for (var i = 0; i < group.length; i++) {
+        if (group[i].required) {
+          hasRequired = true;
+          break;
+        }
+      }
+      return hasRequired;
+    }
+
+    /**
+     * @description Convert array of driver property groups to a string
+     *
+     * @param {array[]} groups - Array for driver property groups
+     * @return {string} Output string
+     */
+    function driverPropertyGroupsToString(groups) {
+      var output = [];
+      angular.forEach(groups, function(group) {
+        var groupStr = [];
+        angular.forEach(group, function(property) {
+          groupStr.push(property.name);
+        });
+        groupStr = groupStr.join(", ");
+        output.push(['[', groupStr, ']'].join(""));
+      });
+      output = output.join(", ");
+      return ['[', output, ']'].join("");
+    }
+
+    /**
+     * @description Comaprison function used to sort driver property groups
+     *
+     * @param {DriverProperty[]} group1 - First group
+     * @param {DriverProperty[]} group2 - Second group
+     * @return {integer} Return:
+     * < 0 if group1 should precede group2 in an ascending ordering
+     * > 0 if group2 should precede group1
+     * 0 if group1 and group2 are considered equal from ordering perpsective
+     */
+    function compareDriverPropertyGroups(group1, group2) {
+      var group1HasRequired = driverPropertyGroupHasRequired(group1);
+      var group2HasRequired = driverPropertyGroupHasRequired(group2);
+
+      if (group1HasRequired === group2HasRequired) {
+        if (group1.length === group2.length) {
+          return group1[0].name.localeCompare(group2[0].name);
+        } else {
+          return group1.length - group2.length;
+        }
+      } else {
+        return group1HasRequired ? -1 : 1;
+      }
+      return 0;
+    }
+
+    /**
+     * @description Order driver properties in the form using the following
+     * rules:
+     *
+     * (1) Properties that are related to one another should occupy adjacent
+     * locations in the form
+     *
+     * (2) Required properties with no dependents should be located at the
+     * top of the form
+     *
+     * @return {void}
+     */
+    ctrl._sortDriverProperties = function() {
+      // Build dependency graph between driver properties
+      var graph = new enrollNodeService.Graph();
+
+      // Create vertices
+      angular.forEach(ctrl.driverProperties, function(property, name) {
+        graph.addVertex(name, property);
+      });
+
+      /* eslint-disable no-unused-vars */
+
+      // Create edges
+      angular.forEach(ctrl.driverProperties,
+                      function(property, name) {
+                        var activators = property.getActivators();
+                        if (activators) {
+                          angular.forEach(activators,
+                                          function(unused, activatorName) {
+                                            graph.addEdge(name, activatorName);
+                                          });
+                        }
+                      });
+
+      /* eslint-enable no-unused-vars */
+
+      // Perform depth-first-search to find groups of related properties
+      var groups = [];
+      graph.dfs(
+        function(vertexList, components) {
+          // Sort properties so that those with the largest number of
+          // immediate dependents are the top of the list
+          vertexList.sort(function(vertex1, vertex2) {
+            return vertex2.adjacents.length - vertex1.adjacents.length;
+          });
+
+          // Build component and add to list
+          var component = new Array(vertexList.length);
+          angular.forEach(vertexList, function(vertex, index) {
+            component[index] = vertex.data;
+          });
+          components.push(component);
+        },
+        groups);
+      groups.sort(compareDriverPropertyGroups);
+
+      $log.debug("Found the following property groups: " +
+                 driverPropertyGroupsToString(groups));
+      return groups;
+    };
+
+    /**
+     * @description Get the properties associated with a specified driver
      *
      * @param {string} driverName - Name of driver
      * @return {void}
@@ -97,6 +227,7 @@
 
       ctrl.loadingDriverProperties = true;
       ctrl.driverProperties = null;
+      ctrl.driverPropertyGroups = null;
 
       ironic.getDriverProperties(driverName).then(function(response) {
         ctrl.driverProperties = {};
@@ -106,12 +237,13 @@
                                                  desc,
                                                  ctrl.driverProperties);
         });
+        ctrl.driverPropertyGroups = ctrl._sortDriverProperties();
         ctrl.loadingDriverProperties = false;
       });
     };
 
     /**
-     * Cancel the node enrollment process
+     * @description Cancel the node enrollment process
      *
      * @return {void}
      */
@@ -120,7 +252,7 @@
     };
 
     /**
-     * Enroll the defined node
+     * @description Enroll the defined node
      *
      * @return {void}
      */
@@ -130,8 +262,11 @@
         $log.debug(name +
                    ", required = " + property.isRequired() +
                    ", active = " + property.isActive() +
-                   ", input value = " + property.inputValue);
+                   ", input-value = " + property.getInputValue() +
-        if (property.isActive() && property.inputValue) {
+                   ", default-value = " + property.getDefaultValue());
+        if (property.isActive() &&
+            property.getInputValue() &&
+            property.getInputValue() !== property.getDefaultValue()) {
           $log.debug("Setting driver property " + name + " to " +
                      property.inputValue);
           ctrl.node.driver_info[name] = property.inputValue;
@@ -150,7 +285,7 @@
     };
 
     /**
-     * Delete a node property
+     * @desription Delete a node property
      *
      * @param {string} propertyName - Name of the property
      * @return {void}
@@ -160,7 +295,7 @@
     };
 
     /**
-     * Check whether the specified node property already exists
+     * @description Check whether the specified node property already exists
      *
      * @param {string} propertyName - Name of the property
      * @return {boolean} True if the property already exists,
@@ -171,7 +306,7 @@
     };
 
     /**
-     * Delete a node metadata property
+     * @description Delete a node metadata property
      *
      * @param {string} propertyName - Name of the property
      * @return {void}
@@ -181,7 +316,8 @@
     };
 
     /**
-     * Check whether the specified node metadata property already exists
+     * @description Check whether the specified node metadata property
+     * already exists
      *
      * @param {string} propertyName - Name of the metadata property
      * @return {boolean} True if the property already exists,
@@ -190,5 +326,16 @@
     ctrl.checkExtraUnique = function(propertyName) {
       return !(propertyName in ctrl.node.extra);
     };
+
+    /**
+     * @description Check whether a specified driver property is
+     * currently active
+     *
+     * @param {string} property - Driver property
+     * @return {boolean} True if the property is active, false otherwise
+     */
+    ctrl.isDriverPropertyActive = function(property) {
+      return property.isActive();
+    };
   }
 })();

ironic_ui/static/dashboard/admin/ironic/enroll-node/enroll-node.html

@@ -1,4 +1,11 @@
-<div class="modal-header">
+<div class="modal-header" modal-draggable>
+  <button type="button"
+          class="close"
+          ng-click="$dismiss()"
+          aria-hidden="true"
+          aria-label="Close">
+    <span aria-hidden="true" class="fa fa-times"></span>
+  </button>
   <h3 class="modal-title" translate>Enroll Node</h3>
 </div>
 <!-- begin general node info modal -->
@@ -30,7 +37,9 @@
         <!-- node info tab-->
         <div class="tab-pane active" id="nodeInfo">
           <!--node name-->
-          <div class="form-group">
+          <div class="form-group"
+               ng-class="{'has-error': enrollNodeForm.name.$invalid &&
+                         enrollNodeForm.name.$dirty}">
             <label for="name"
                    class="control-label"
                    translate>Node Name</label>
@@ -40,6 +49,7 @@
                      ng-model="ctrl.node.name"
                      id="name"
                      name="name"
+                     ng-pattern="ctrl.validHostNameRegex"
                      placeholder="{$ 'A unique node name. Optional.' | translate $}"/>
             </div>
           </div>
@@ -48,6 +58,7 @@
             <label for="driver"
                    class="control-label"
                    translate>Node Driver</label>
+            <span class="hz-icon-required fa fa-asterisk"></span>
             <div>
               <select id="driver"
                       class="form-control"
@@ -90,8 +101,7 @@
             <div class="input-group input-group-sm"
                  ng-repeat="(propertyName, propertyValue) in ctrl.node.properties">
               <span class="input-group-addon"
-                    style="width:25%;text-align:right"
+                    style="width:25%;text-align:right">
-                    translate>
                 {$ propertyName $}
               </span>
               <input class="form-control"
@@ -138,8 +148,7 @@
           <div class="input-group input-group-sm"
                ng-repeat="(propertyName, propertyValue) in ctrl.node.extra">
             <span class="input-group-addon"
-                  style="width:25%;text-align:right"
+                  style="width:25%;text-align:right">
-                  translate>
               {$ propertyName $}
             </span>
             <input class="form-control"
@@ -163,14 +172,20 @@
              ng-if="ctrl.loadingDriverProperties">
             <small><em><i class="fa fa-spin fa-refresh"></i></em></small>
           </p>
+          <div ng-repeat="propertyGroup in ctrl.driverPropertyGroups"
+               ng-class="{'well': propertyGroup.length > 1}">
             <div class="form-group"
-               ng-repeat="(name, property) in ctrl.driverProperties"
+               ng-repeat="property in propertyGroup | filter:ctrl.isDriverPropertyActive"
-               ng-show="property.isActive()">
+               ng-init="name = property.name;
+                        selectOptions = property.getSelectOptions()"
+               ng-class="{'has-error': enrollNodeForm.{$ name $}.$invalid &&
+                         enrollNodeForm.{$ name $}.$dirty}">
             <label for="{$ name $}"
                    class="control-label"
-                   style="white-space: nowrap"
+                   style="white-space: nowrap">
-                   translate>
               {$ name $}
+              <span ng-if="property.isRequired()"
+                    class="hz-icon-required fa fa-asterisk"></span>
               <span class="help-icon"
                     data-container="body"
                     title=""
@@ -179,16 +194,20 @@
                 <span class="fa fa-question-circle"></span>
               </span>
             </label>
-            <div ng-if="!property.getSelectOptions()"
+            <div ng-if="!selectOptions"
-                 ng-class="name === 'deploy_kernel' ||
+                 ng-class="{'input-group': name === 'deploy_kernel' ||
-                           name === 'deploy_ramdisk' ? 'input-group' : ''">
+                           name === 'deploy_ramdisk'}">
               <input type="text"
                      class="form-control"
                      id="{$ name $}"
                      name="{$ name $}"
                      ng-model="property.inputValue"
-                     placeholder="{$ property.getDescription() | translate $}"
+                     ng-pattern="property.getValidValueRegex()"
-                     ng-required="property.isRequired()"/>
+                     placeholder="{$ property.defaultValue !== undefined ?
+                                  property.defaultValue :
+                                  property.getDescription() $}"
+                     ng-required="property.isRequired()"
+                     empty-to-pristine/>
               <div ng-if="name === 'deploy_kernel' ||
                           name === 'deploy_ramdisk'"
                    class="input-group-btn">
@@ -208,17 +227,27 @@
                 </ul>
               </div>
             </div>
-            <div ng-if="property.getSelectOptions()" class="">
+            <div ng-if="selectOptions" class="">
-              <select id="{$ name $}"
+              <select ng-if="selectOptions.length > 4"
+                      id="{$ name $}"
                       class="form-control"
-                      ng-options="opt for opt in property.getSelectOptions()"
+                      ng-options="opt for opt in selectOptions"
                       ng-model="property.inputValue"
                       ng-required="property.isRequired()">
-                <option value=""
+                <option ng-if="property.defaultValue === undefined"
+                        value=""
                         disabled
                         selected
                         translate>{$ property.getDescription() $}</option>
               </select>
+              <div ng-if="selectOptions.length <= 4"
+                   class="btn-group">
+                <label class="btn btn-default"
+                       ng-repeat="opt in selectOptions"
+                       ng-model="property.inputValue"
+                       btn-radio="opt">{$ opt $}</label>
+              </div>
+            </div>
           </div>
           </div>
         </div>

ironic_ui/static/dashboard/admin/ironic/enroll-node/enroll-node.service.js

@@ -17,13 +17,33 @@
   'use strict';
 
   var REQUIRED = " " + gettext("Required") + ".";
-  var selectOptionsRegexp =
+
+  var SELECT_OPTIONS_REGEX =
     new RegExp(
-        gettext('(?:[Oo]ne of )(?!this)((?:(?:"[^"]+"|[^,\. ]+)(?:, |\.))+)'));
+      gettext('(?:[Oo]ne of )(?!this)((?:(?:"[^"]+"|[^,\\. ]+)(?:, |\\.))+)'));
-  var defaultValueRegexp = new RegExp(gettext('default is ([^". ]+|"[^"]+")'));
+
-  var oneOfRegexp =
+  var DEFAULT_IS_REGEX =
-      new RegExp(gettext('One of this, (.*) must be specified\.'));
+      new RegExp(gettext('default (?:value )?is ([^"\\. ]+|"[^"]+")'));
-  var notInsideMatch = -1;
+
+  var DEFAULTS_TO_REGEX =
+      new RegExp(gettext('Defaults to ([^"\\. ]+|"[^"]+")'));
+
+  var DEFAULT_IN_PARENS_REGEX =
+      new RegExp(gettext(' ([^" ]+|"[^"]+") \\(Default\\)'));
+
+  var DEFAULT_REGEX_LIST = [DEFAULT_IS_REGEX,
+                            DEFAULTS_TO_REGEX,
+                            DEFAULT_IN_PARENS_REGEX];
+  var ONE_OF_REGEX =
+      new RegExp(gettext('One of this, (.*) must be specified\\.'));
+
+  var NOT_INSIDE_MATCH = -1;
+
+  var VALID_PORT_REGEX = new RegExp('^\\d+$');
+
+  var VALID_IPV4_ADDRESS = "^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$"; // eslint-disable-line max-len
+
+  var VALID_IPV6_ADDRESS = "^\\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:)))(%.+)?\\s*$"; // eslint-disable-line max-len
 
   angular
     .module('horizon.dashboard.admin.ironic')
@@ -33,25 +53,95 @@
   enrollNodeService.$inject = [
     '$modal',
     'horizon.dashboard.admin.basePath',
-    '$log'
+    '$log',
+    'horizon.dashboard.admin.ironic.validHostNamePattern',
+    'horizon.dashboard.admin.ironic.validUuidPattern'
   ];
 
-  function enrollNodeService($modal, basePath, $log) {
+  function enrollNodeService($modal,
+                             basePath,
+                             $log,
+                             validHostNamePattern,
+                             validUuidPattern) {
     var service = {
       modal: modal,
-      DriverProperty: DriverProperty
+      DriverProperty: DriverProperty,
+      Graph: Graph
     };
 
+    var VALID_ADDRESS_HOSTNAME_REGEX = new RegExp(VALID_IPV4_ADDRESS + "|" +
+                                                  VALID_IPV6_ADDRESS + "|" +
+                                                  validHostNamePattern);
+
+    var VALID_IMAGE_REGEX = new RegExp(validUuidPattern + "|" +
+                                       "^(https?|file)://.+$");
+
     function modal() {
       var options = {
         controller: 'EnrollNodeController as ctrl',
+        backdrop: 'static',
         templateUrl: basePath + '/ironic/enroll-node/enroll-node.html'
       };
       return $modal.open(options);
     }
 
     /**
-     * Construct a new driver property
+       The DriverProperty class is used to represent an ironic driver
+       property. It is currently used by the enroll-node form to
+       support property display, value assignment and validation.
+
+       The following rules are used to extract information about a property
+       from the description returned by the driver.
+
+       1. If the description ends with " Required." a value must be
+       supplied for the property.
+
+       2. The following syntax is used to extract default values
+       from property descriptions.
+
+       Default is <value>(<space>|.)
+       default is “<value>”
+       default value is <value>(<space>|.)
+       default value is “<value>”
+       Defaults to <value>(<space>|.)
+       Defaults to “<value>”
+       <value> (Default)
+
+       3. The following syntax is used to determine whether a property
+       is considered active. In the example below if the user specifies
+       a value for <property-name-1>, properties 2 to n will be tagged
+       inactive, and hidden from view. All properties are considered
+       to be required.
+
+       One of this, <property-name-1>, <property-name-2>, …, or
+       <property-name-n> must be specified.
+
+       4. The following syntax is used to determine whether a property
+       is restricted to a set of enumerated values. The property will
+       be displayed as an HTML select element.
+
+       [Oo]ne of <value-1>, "<value-2>", …, <value-n>.
+
+       5. The following syntax is used to determine whether a property is
+       active and required based on the value of another property.
+       If the property is not active it will not be displayed.
+
+       Required|Used only if <property-name> is set to <value-1>
+       (or "<value-2>")*.
+
+       Notes:
+       1. The properties "deploy_kernel" and "deploy_ramdisk" are
+       assumed to accept Glance image uuids as valid values.
+
+       2. Property names ending in _port are assumed to only accept
+       postive integer values
+
+       3. Property names ending in _address are assumed to only accept
+       valid IPv4 and IPv6 addresses; and hostnames
+    */
+
+    /**
+     * @description Construct a new driver property
      *
      * @class DriverProperty
      * @param {string} name - Name of property
@@ -60,21 +150,28 @@
      *
      * @property {string} defaultValue - Default value of the property
      * @property {string[]} selectOptions - If the property is limited to a
-     * set of enumerted values then selectOptions will be an array of those
+     * set of enumerated values then selectOptions will be an array of those
      * values, otherwise null
      * @property {boolean} required - Boolean value indicating whether a value
      * must be supplied for this property if it is active
      * @property {PostfixExpr} isActiveExpr - Null if this property is always
      * active; otherwise, a boolean expression that when evaluated will
-     * return whether this variable is active
+     * return whether this variable is active. A property is considered
-     * @propery {string} inputValue User assigned value for this property
+     * active if its role is not eliminated by the values of other
+     * properties in the property-set.
+     * @property {string} inputValue - User assigned value for this property
+     * @property {regexp} validValueRegex - Regular expression used to
+     * determine whether an input value is valid.
+     * @returns {object} Driver property
      */
     function DriverProperty(name, desc, propertySet) {
       this.name = name;
       this.desc = desc;
       this.propertySet = propertySet;
+
       // Determine whether this property should be presented as a selection
       this.selectOptions = this._analyzeSelectOptions();
+
       this.required = null;  // Initialize to unknown
       // Expression to be evaluated to determine whether property is active.
       // By default the property is considered active.
@@ -94,8 +191,40 @@
       if (this.required === null) {
         this.required = desc.endsWith(REQUIRED);
       }
+
       this.defaultValue = this._getDefaultValue();
-      this.inputValue = null;
+      this.inputValue = this.defaultValue;
+
+      // Infer that property is a boolean that can be represented as a
+      // True/False selection
+      if (this.selectOptions === null &&
+          (this.defaultValue === "True" || this.defaultValue === "False")) {
+        this.selectOptions = ["True", "False"];
+      }
+
+      this.validValueRegex = _determineValidValueRegex(this.name);
+    }
+
+    /**
+     * @description Return a regular expression that can be used to
+     * validate the value of a specified property
+     *
+     * @param {string} propertyName - Name of property
+     * @return {regexp} Regular expression object or undefined
+     */
+    function _determineValidValueRegex(propertyName) {
+      var regex;
+      if (propertyName.endsWith("_port")) {
+        regex = VALID_PORT_REGEX;
+      } else if (propertyName.endsWith("_address")) {
+        regex = VALID_ADDRESS_HOSTNAME_REGEX;
+      } else if (propertyName === "deploy_kernel") {
+        regex = VALID_IMAGE_REGEX;
+      } else if (propertyName === "deploy_ramdisk") {
+        regex = VALID_IMAGE_REGEX;
+      }
+
+      return regex;
     }
 
     DriverProperty.prototype.isActive = function() {
@@ -107,17 +236,27 @@
         typeof ret[1] === "boolean" ? ret[1] : true;
     };
 
-    /*
+    /**
-     * Must a value be provided for this property
+     * @description Get a regular expression object that can be used to
+     * determine whether a value is valid for this property
+     *
+     * @return {regexp} Regular expression object or undefined
+     */
+    DriverProperty.prototype.getValidValueRegex = function() {
+      return this.validValueRegex;
+    };
+
+    /**
+     * @description Must a value be provided for this property
      *
      * @return {boolean} True if a value must be provided for this property
      */
     DriverProperty.prototype.isRequired = function() {
-      return this.required && this.isActive();
+      return this.required;
     };
 
     DriverProperty.prototype._analyzeSelectOptions = function() {
-      var match = this.desc.match(selectOptionsRegexp);
+      var match = this.desc.match(SELECT_OPTIONS_REGEX);
       if (!match) {
         return null;
       }
@@ -131,7 +270,7 @@
     };
 
     /**
-     * Get the list of select options for this property
+     * @description Get the list of select options for this property
      *
      * @return {string[]} null if this property is not selectable; else,
      * an array of selectable options
@@ -141,7 +280,7 @@
     };
 
     /**
-     * Remove leading/trailing double-quotes from a string
+     * @description Remove leading/trailing double-quotes from a string
      *
      * @param {string} str - String to be trimmed
      * @return {string} trim'd string
@@ -152,29 +291,43 @@
     }
 
     /**
-     * Get the default value of this property
+     * @description Get the default value of this property
      *
      * @return {string} Default value of this property
      */
     DriverProperty.prototype._getDefaultValue = function() {
-      var match = this.desc.match(defaultValueRegexp);
+      var value;
-      return match ? trimQuotes(match[1]) : null;
+      for (var i = 0; i < DEFAULT_REGEX_LIST.length; i++) {
+        var match = this.desc.match(DEFAULT_REGEX_LIST[i]);
+        if (match) {
+          value = trimQuotes(match[1]);
+          break;
+        }
+      }
+      $log.debug("_getDefaultValue | " + this.desc + " | " + value);
+      return value;
     };
 
     /**
-     * Get the actual value of this property
+     * @description Get the input value of this property
      *
-     * @return {string} Get the actual value of this property. If
+     * @return {string} the input value of this property
-     * an input value has not been specified, but a default value exists
-     * that will be returned.
      */
-    DriverProperty.prototype.getActualValue = function() {
+    DriverProperty.prototype.getInputValue = function() {
-      return this.inputValue ? this.inputValue
+      return this.inputValue;
-        : this.defaultValue ? this.defaultValue : null;
     };
 
     /**
-     * Get the description of this property
+     * @description Get the default value of this property
+     *
+     * @return {string} the default value of this property
+     */
+    DriverProperty.prototype.getDefaultValue = function() {
+      return this.defaultValue;
+    };
+
+    /**
+     * @description Get the description of this property
      *
      * @return {string} Description of this property
      */
@@ -183,9 +336,9 @@
     };
 
     /**
-     * Use the property description to build an expression that will
+     * @description Use the property description to build an expression
-     * evaluate to a boolean result indicating whether the property is
+     * that will evaluate to a boolean result indicating whether the
-     * active
+     * property is active
      *
      * @return {array} null if this property is not dependent on any others;
      * otherwise,
@@ -207,15 +360,15 @@
       var expr = new PostfixExpr();
       var numAdds = 0;
 
-      var i = notInsideMatch;
+      var i = NOT_INSIDE_MATCH;
       var j = re.lastIndex;
       while (j < this.desc.length) {
-        if (i === notInsideMatch && this.desc.charAt(j) === ".") {
+        if (i === NOT_INSIDE_MATCH && this.desc.charAt(j) === ".") {
           break;
         }
 
         if (this.desc.charAt(j) === '"') {
-          if (i === notInsideMatch) {
+          if (i === NOT_INSIDE_MATCH) {
             i = j + 1;
           } else {
             expr.addProperty(match[2]);
@@ -225,7 +378,7 @@
             if (numAdds > 1) {
               expr.addOperator(PostfixExpr.op.OR);
             }
-            i = notInsideMatch;
+            i = NOT_INSIDE_MATCH;
           }
         }
         j++;
@@ -238,7 +391,7 @@
     };
 
     DriverProperty.prototype._analyzeOneOfDependencies = function() {
-      var match = this.desc.match(oneOfRegexp);
+      var match = this.desc.match(ONE_OF_REGEX);
       if (!match) {
         return null;
       }
@@ -249,13 +402,13 @@
 
       var parts = match[1].split(", or ");
       expr.addProperty(parts[1]);
-      expr.addValue(null);
+      expr.addValue(undefined);
       expr.addOperator(PostfixExpr.op.EQ);
 
       parts = parts[0].split(", ");
       for (var i = 0; i < parts.length; i++) {
         expr.addProperty(parts[i]);
-        expr.addValue(null);
+        expr.addValue(undefined);
         expr.addOperator(PostfixExpr.op.EQ);
         expr.addOperator(PostfixExpr.op.AND);
       }
@@ -266,6 +419,17 @@
       return [true, expr];
     };
 
+    /**
+     * @description Get the names of the driver-properties whose values
+     * determine whether this property is active
+     *
+     * @return {object} Object the properties of which are names of
+     * activating driver-properties or null
+     */
+    DriverProperty.prototype.getActivators = function() {
+      return this.isActiveExpr ? this.isActiveExpr.getProperties() : null;
+    };
+
     /**
      * PostFixExpr is a class primarily developed to support the
      * evaluation of boolean expressions that determine whether a
@@ -288,7 +452,7 @@
       OR: "or"
     };
 
-    PostfixExpr.UNDEFINED = null;
+    PostfixExpr.UNDEFINED = undefined;
 
     PostfixExpr.status = {
       OK: 0,
@@ -298,20 +462,58 @@
       MALFORMED: 4
     };
 
+    /**
+     * @description Add a property to the expression
+     *
+     * @param {string} propertyName - Property name
+     *
+     * @return {void}
+     */
     PostfixExpr.prototype.addProperty = function(propertyName) {
       this.elem.push({name: propertyName});
     };
 
+    /**
+     * @description Add a value to the expression
+     *
+     * @param {object} value - value
+     *
+     * @return {void}
+     */
     PostfixExpr.prototype.addValue = function(value) {
       this.elem.push({value: value});
     };
 
+    /**
+     * @description Add an operator to the expression
+     *
+     * @param {PostfixExpr.op} opId - operator
+     *
+     * @return {void}
+     */
     PostfixExpr.prototype.addOperator = function(opId) {
       this.elem.push({op: opId});
     };
 
     /**
-     * Evaluate a boolean binary operation
+     * @description Get a list of property names referenced by this
+     * expression
+     *
+     * @return {object} An object each property of which corresponds to
+     * a property in the expression
+     */
+    PostfixExpr.prototype.getProperties = function() {
+      var properties = {};
+      angular.forEach(this.elem, function(elem) {
+        if (angular.isDefined(elem.name)) {
+          properties[elem.name] = true;
+        }
+      });
+      return properties;
+    };
+
+    /**
+     * @description Evaluate a boolean binary operation
      *
      * @param {array} valStack - Stack of values to operate on
      * @param {string} opId - operator id
@@ -341,8 +543,8 @@
     }
 
     /**
-     * Evaluate the experssion using property values from a specified
+     * @description Evaluate the experssion using property values from
-     * set
+     * a specified set
      *
      * @param {object} propertySet - Dictionary of DriverProperty instances
      *
@@ -352,11 +554,11 @@
       var resultStack = [];
       for (var i = 0, len = this.elem.length; i < len; i++) {
         var elem = this.elem[i];
-        if (angular.isDefined(elem.name)) {
+        if (elem.hasOwnProperty("name")) {
-          resultStack.push(propertySet[elem.name].getActualValue());
+          resultStack.push(propertySet[elem.name].getInputValue());
-        } else if (angular.isDefined(elem.value)) {
+        } else if (elem.hasOwnProperty("value")) {
           resultStack.push(elem.value);
-        } else if (angular.isDefined(elem.op)) {
+        } else if (elem.hasOwnProperty("op")) {
           if (elem.op === PostfixExpr.op.EQ) {
             var val1 = resultStack.pop();
             var val2 = resultStack.pop();
@@ -376,6 +578,108 @@
         : [PostfixExpr.status.MALFORMED, PostfixExpr.UNDEFINED];
     };
 
+    /**
+     * @description Class for representing and manipulating undirected
+     * graphs
+     *
+     * @property {object} vertices - Associative array of vertex objects
+     * indexed by property name
+     * @return {object} Graph
+     */
+    function Graph() {
+      this.vertices = {};
+    }
+
+    Graph.prototype.getVertex = function(vertexName) {
+      var vertex = null;
+      if (this.vertices.hasOwnProperty(vertexName)) {
+        vertex = this.vertices[vertexName];
+      }
+      return vertex;
+    };
+
+    /**
+     * @description Add a vertex to this graph
+     *
+     * @param {string} name - Vertex name
+     * @param {object} data - Vertex data
+     * @returns {object} - Newly created vertex
+     */
+    Graph.prototype.addVertex = function(name, data) {
+      var vertex = {name: name, data: data, adjacents: []};
+      this.vertices[name] = vertex;
+      return vertex;
+    };
+
+    /**
+     * @description Add an undirected edge between two vertices
+     *
+     * @param {string} vertexName1 - Name of first vertex
+     * @param {string} vertexName2 - Name of second vertex
+     * @returns {void}
+     */
+    Graph.prototype.addEdge = function(vertexName1, vertexName2) {
+      this.vertices[vertexName1].adjacents.push(vertexName2);
+      this.vertices[vertexName2].adjacents.push(vertexName1);
+    };
+
+    /**
+     * @description Depth-first-search graph traversal utility function
+     *
+     * @param {object} vertex - Root vertex from which traveral will begin.
+     * It is assumed that this vertex has not alreday been visited as part
+     * of this traversal.
+     * @param {object} visited - Associative array. Each named property
+     * corresponds to a vertex with the same name, and has boolean value
+     * indicating whether the vertex has been alreday visited.
+     * @param {object[]} component - Array of vertices that define a strongly
+     * connected component.
+     * @returns {void}
+     */
+    Graph.prototype._dfsTraverse = function(vertex, visited, component) {
+      var graph = this;
+      visited[vertex.name] = true;
+      component.push(vertex);
+
+      /* eslint-disable no-unused-vars */
+      angular.forEach(vertex.adjacents, function(vertexName) {
+        if (!visited[vertexName]) {
+          graph._dfsTraverse(graph.vertices[vertexName], visited, component);
+        }
+      });
+      /* eslint-enable no-unused-vars */
+    };
+
+    /**
+     * @description Perform a depth-first-search on a specified graph to
+     * find strongly connected components. A user provided function will
+     * be called to process each component.
+     *
+     * @param {function} componentFunc - Function called on each strongly
+     * connected component. Accepts aruments: array of vertex objects, and
+     * user-provided extra data that can be used in processing the component.
+     * @param {object} extra - Extra data that is passed into the component
+     * processing function.
+     * @returns {void}
+     */
+    Graph.prototype.dfs = function(componentFunc, extra) {
+      var graph = this;
+      var visited = {};
+      angular.forEach(
+        graph.vertices,
+        function(unused, name) {
+          visited[name] = false;
+        });
+
+      angular.forEach(this.vertices, function(vertex, vertexName) {
+        if (!visited[vertexName]) {
+          var component = [];
+          graph._dfsTraverse(vertex, visited, component);
+          componentFunc(component, extra);
+        }
+      });
+    };
+
     return service;
   }
 })();

ironic_ui/static/dashboard/admin/ironic/enroll-node/enroll-node.spec.js

@@ -54,7 +54,7 @@
           expect(property.required).toBe(false);
           expect(property.defaultValue).toBe(null);
           expect(property.inputValue).toBe(null);
-          expect(property.getActualValue()).toBe(null);
+          expect(property.getInputValue()).toBe(null);
           expect(property.isActive()).toBe(true);
         });
 

ironic_ui/static/dashboard/admin/ironic/ironic.module.js

@@ -26,6 +26,11 @@
    * to support and display Ironic related content.
    */
   angular
-    .module('horizon.dashboard.admin.ironic', []);
+    .module('horizon.dashboard.admin.ironic', [])
+    .constant('horizon.dashboard.admin.ironic.validHostNamePattern',
+              '^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\\-]*[a-zA-Z0-9])\\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\\-]*[A-Za-z0-9])$') // eslint-disable-line max-len
+
+    .constant('horizon.dashboard.admin.ironic.validUuidPattern',
+              '^[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}$'); // eslint-disable-line max-len
 
 })();

ironic_ui/static/dashboard/admin/ironic/modal-draggable.directive.js

@@ -0,0 +1,46 @@
+/*
+ * Copyright 2016 Cray Inc.
+ *
+ * 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.
+ */
+(function () {
+  'use strict';
+
+  angular
+    .module('horizon.dashboard.admin.ironic')
+    .directive('modalDraggable', ModalDraggable);
+
+  ModalDraggable.$inject = ['$document', '$log'];
+
+  function ModalDraggable($document, $log) {
+
+    return function (scope, element) {
+      var modalContent = null;
+      while (element) {
+        if (element.hasClass("modal-content")) {
+          modalContent = element;
+          break;
+        }
+        element = element.parent();
+      }
+
+      if (modalContent) {
+        modalContent.draggable({
+          handle: ".modal-header"
+        });
+      } else {
+        $log.error("Unable to find parent dialog");
+      }
+    };
+  }
+})();