Adding hz-resource-property/-list and filter/value retrieval

This patch adds hz-resource-property, which outputs the given object
property as a label and value in a dt/dd.  This uses hz-cell which
ensures that all display rules dictated within the property
configuration are followed.

hz-resource-property-list is a level higher than hz-resource-property,
which allows for supplying multiple properties to be displayed, to
reduce excess markup.  It is not to be used at the exclusion of
hz-resource-property, but just as a way to make it easier to build
simple displays.

Change-Id: I62e3d9e4217aae428277bbef669ba704600f0b43
Partially-Implements: blueprint angular-registry

horizon/static/framework/conf/resource-type-registry.service.js

@@ -100,6 +100,7 @@
       self.type = typeCode;
       self.initActions = initActions;
       self.setProperty = setProperty;
+      self.getProperties = getProperties;
       self.getName = getName;
       self.setNames = setNames;
       self.label = label;
@@ -188,6 +189,11 @@
         return self;
       }
 
+      // Returns a copy of the properties.
+      function getProperties() {
+        return angular.copy(properties);
+      }
+
       /**
        * @ngdoc function
        * @name setListFunction
@@ -257,6 +263,13 @@
         function mapTableInfo(x) {
           var tableInfo = x;
           tableInfo.title = x.title || label(x.id);
+          // use 'values' or 'filters' from property definition if available.
+          if (properties[x.id] && properties[x.id].values) {
+            tableInfo.values = properties[x.id].values;
+          }
+          if (properties[x.id] && properties[x.id].filters) {
+            tableInfo.filters = properties[x.id].filters;
+          }
           return tableInfo;
         }
       }

horizon/static/framework/conf/resource-type-registry.service.spec.js

@@ -130,6 +130,21 @@
         {title: "im-a-title"}]);
     });
 
+    it('places property .values and .filters on table', function() {
+      var type = service.getResourceType('something');
+      var func = angular.noop;
+      type.setProperty('im-an-id', {filters: [func], values: {a: 'apple'}});
+      type.tableColumns.push({id: "im-an-id"});
+      expect(type.getTableColumns()[0].filters).toEqual([func]);
+      expect(type.getTableColumns()[0].values).toEqual({a: 'apple'});
+    });
+
+    it('getProperties returns a copy of the properties', function() {
+      var type = service.getResourceType('something');
+      type.setProperty('im-an-id', {values: {a: 'apple'}});
+      expect(type.getProperties()['im-an-id']).toEqual({values: {a: 'apple'}});
+    });
+
     it('manages the globalActions', function() {
       var typeA = service.getResourceType('a');
       var typeB = service.getResourceType('b');

horizon/static/framework/widgets/property/hz-resource-property-list.directive.js

@@ -0,0 +1,88 @@
+/**
+ * (c) Copyright 2016 Hewlett Packard Enterprise Development Company LP
+ *
+ * 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.framework.widgets.property')
+    .directive('hzResourcePropertyList', directive);
+
+  directive.$inject = [
+    'horizon.framework.widgets.basePath'
+  ];
+
+  /**
+   * @ngdoc directive
+   * @name hzResourcePropertyList
+   * @description
+   * This directive is intended to be used with the resource registry.  It currently
+   * displays sets of properties registered for the given type, grouped into
+   * label/values.
+   *
+   * The directive displays the groups proportionately based on the number of
+   * property groups presented.  The proportions are based off a 12-column system
+   * such as Bootstrap, and any number of columns between 1 and 12 may be used.
+   *
+   * There is no limit to the number of properties within a group.
+   *
+   * @example
+   * The following would produce three sets of property lists, each entry with
+   * a label and value, based on the 'item' object given, and using registrations
+   * for the given type ('OS::Neutron::Net') to inform how to format each
+   * property.  The 'cls' property will place the 'dl-horizontal' class on the <dl>
+   * element.
+   *
+   * The following will produce three sets of lists.  The first group, for example,
+   * will contain the label and value of the 'name' property and the label and value
+   * of the 'id' property.
+   ```
+   <hz-resource-property-list
+     resource-type-name="OS::Neutron::Net"
+     item="item"
+     cls="dl-horizontal"
+     property-groups="[
+       ['name', 'id'],
+       ['shared', 'router__external'],
+       ['status', 'admin_state_up']]">
+   </hz-resource-property-list>
+   ```
+   *
+   */
+  function directive(basePath) {
+
+    var directiveConf = {
+      restrict: 'E',
+      scope: {
+        resourceTypeName: "@",
+        propertyGroups: "=",
+        cls: "@?",
+        item: "="
+      },
+      link: link,
+      templateUrl: basePath + 'property/hz-resource-property-list.html'
+    };
+    return directiveConf;
+
+    function link(scope) {
+      scope.getBootstrapColumnSpan = getBootstrapColumnSpan;
+
+      function getBootstrapColumnSpan(columns) {
+        return Math.floor(12 / columns.length);
+      }
+    }
+
+  }
+})();

horizon/static/framework/widgets/property/hz-resource-property-list.html

@@ -0,0 +1,12 @@
+<div class="row">
+  <div ng-repeat="propNames in propertyGroups">
+    <dl class="col-md-{$ getBootstrapColumnSpan(propertyGroups) $} {$ cls $}">
+      <div ng-repeat="propName in propNames">
+        <hz-resource-property
+          resource-type-name="{$ resourceTypeName $}"
+          prop-name="{$ propName $}"
+          item="item"></hz-resource-property>
+      </div>
+    </dl>
+  </div>
+</div>

horizon/static/framework/widgets/property/hz-resource-property.controller.js

@@ -0,0 +1,39 @@
+/*
+ * (c) Copyright 2016 Hewlett Packard Enterprise Development Company LP
+ *
+ * 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.framework.widgets.property')
+    .controller('horizon.framework.widgets.property.hzResourcePropertyController', controller);
+
+  controller.$inject = [
+    'horizon.framework.conf.resource-type-registry.service'
+  ];
+
+  function controller(registry) {
+    var ctrl = this;
+
+    // 'Public' Controller members
+
+    // 'config' is the configuration for how to output the field, and 'config.id'
+    // is the property name itself.
+    ctrl.config = registry.getResourceType(ctrl.resourceTypeName).getProperties()[ctrl.propName];
+    ctrl.config.id = ctrl.propName;
+
+  }
+
+})();

horizon/static/framework/widgets/property/hz-resource-property.directive.js

@@ -0,0 +1,63 @@
+/**
+ * (c) Copyright 2016 Hewlett Packard Enterprise Development Company LP
+ *
+ * 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.framework.widgets.property')
+    .directive('hzResourceProperty', hzResourceProperty);
+
+  hzResourceProperty.$inject = [
+    'horizon.framework.widgets.basePath'
+  ];
+
+  /**
+   * @ngdoc directive
+   * @name hzResourceProperty
+   * @description
+   * This directive produces a label/value output of a property. It uses the
+   * resource type registry to look up the resource type by name, then outputs
+   * the named property on the given item, using the registry's knowledge of
+   * how to output the property.
+   * @example
+   *
+   *
+   ```
+   $scope.someObject = {somePropertyOnObject: 'myData'};
+
+   <hz-resource-property resource-type-name="OS::Glance::Image"
+                item="someObject"
+                propName="somePropertyOnObject"></hz-resource-property>
+   ```
+   *
+   */
+  function hzResourceProperty(basePath) {
+
+    var directiveConf = {
+      restrict: 'E',
+      scope: {
+        resourceTypeName: "@",
+        propName: "@",
+        item: "="
+      },
+      bindToController: true,
+      controller: 'horizon.framework.widgets.property.hzResourcePropertyController as ctrl',
+      templateUrl: basePath + 'property/hz-resource-property.html'
+    };
+    return directiveConf;
+
+  }
+})();

horizon/static/framework/widgets/property/hz-resource-property.html

@@ -0,0 +1,5 @@
+<dt>{$ ctrl.config.label $}</dt>
+<dd>
+  <hz-field config='ctrl.config' item='ctrl.item'></hz-field>
+</dd>
+