Helion Service Manager Integration (view only) (cloudfoundry#975)

* WIP: HSM Support

* Small improvements. Tidy ups. Lint fixes. Unit tests now run okay.

* Many improvements and refinements

* Added configure instance support. Refactor cerate instance dialog. Tidy ups.

* Added upgrade support

* Minor improvements

* Allow only admins to see HSM endpoints

* Tweaks

* Fix broken redirect with a single HSM

* Allow components to be shown or hidden

* Don't show inline upgrade messages since they are distracting

* Apply update to text and ensure write operations are turned off by default.

* Updated icon

* Tweaks + changes
- Now rely on the base state fetch of instances and services. Leaf states
will refer to these when applicable. The instance will still be updated on
poll, covering both local and instances array entries. The instances array
will also manually be updated on create, delete and reconfigure.
- Instance and service arrays are now pre-sorted to avoid table sort
flibble
- Instances table state icons now match that of the instance detail icon
(except their larger table located versions)
- Handle create instance edge cases. Also improve error messages
when creating a service.
- Ensure secret params and empty string defaults are shown in the create
instance param list
- Show secret params as password input boxes
- Always show the 'delete instance' option if not deleting/deleted. There's
some edge cases where we can get stuck in 'creating'/interesting state
- Changes some anchors to use ui-sref
- Removed some comments + unrequired code

* Small translation changes, comments + a catch around readAsText

* Address Richard's review comments

* Some extra fixes
- Fixed alignment of first letter in instance state popover
- Fixed HSM nav icon visibility for unregister
- Make an info call for HSM service instances in user service instance list
- Fixed a few Helion Service Manager references
- For the HSM details screen show just 'Service Manager' for the name. This
aligns how we handle the same breadcrumb/name in the CF endpoints pages
 (HCF/Clusters - HSM/Service Manager)
- Fixed an issue where disconnected a HSM would not change the total upgrade
number (if there are two registered)

* Fix pause when deleting endpoint + table blibble on load
- Don't wait for updated user service instance list on removal of endpoint (revert from previous commit)
- Fixed lint error
- Sort table without reverse (show cloud foundry first). This avoids
having to hack st-table to sort by reverse 'type' then normal 'name'
- Fix position of 'register +' link in register slideout when screen is thin

* Fixed lint error and wizard nav bar button issue. Shortened nav bar HSM name

framework/src/widgets/file-drop/file-drop.directive.js

@@ -0,0 +1,49 @@
+(function () {
+  'use strict';
+
+  angular
+    .module('helion.framework.widgets')
+    .directive('fileDrop', fileDrop);
+
+  function fileDrop() {
+    var directive = {
+      link: link,
+      restrict: 'A',
+      scope: {
+        fileDrop: '='
+      }
+    };
+    return directive;
+
+    function link(scope, element) {
+
+      element[0].addEventListener('dragenter', function (evt) {
+        element.addClass('file-drop-active');
+        evt.preventDefault();
+        evt.stopPropagation();
+      });
+
+      element[0].addEventListener('dragleave', function () {
+        element.removeClass('file-drop-active');
+      });
+      element[0].addEventListener('dragover', function (evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        element.addClass('file-drop-active');
+      });
+
+      element[0].addEventListener('drop', function (evt) {
+        evt.stopPropagation();
+        evt.preventDefault();
+        element.removeClass('file-drop-active');
+
+        var files = evt.dataTransfer.files;
+        if (files.length > 0) {
+          scope.$apply(function () {
+            scope.fileDrop = files[0];
+          });
+        }
+      });
+    }
+  }
+})();

framework/src/widgets/file-drop/prevent-drop.directive.js

@@ -0,0 +1,32 @@
+(function () {
+  'use strict';
+
+  angular
+    .module('helion.framework.widgets')
+    .directive('preventDrop', preventDrop);
+
+  preventDrop.$inject = [
+    '$window'
+  ];
+
+  function preventDrop($window) {
+    var directive = {
+      link: link,
+      restrict: 'A'
+    };
+    return directive;
+
+    function link() {
+
+      $window.addEventListener('dragover', function (evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+      });
+
+      $window.addEventListener('drop', function (evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+      });
+    }
+  }
+})();

framework/src/widgets/file-read/file-read.directive.js

@@ -0,0 +1,32 @@
+(function () {
+  'use strict';
+
+  angular
+    .module('helion.framework.widgets')
+    .directive('fileread', fileRead);
+
+  function fileRead() {
+    var directive = {
+      link: link,
+      restrict: 'A',
+      scope: {
+        fileread: '='
+      }
+    };
+    return directive;
+
+    function link(scope, element) {
+      element.bind('change', function (changeEvent) {
+        scope.$apply(function () {
+          scope.fileread = changeEvent.target.files[0];
+        });
+      });
+
+      scope.$watch('fileread', function (nv, ov) {
+        if (ov && ov.name && nv && !nv.name) {
+          element.val(null);
+        }
+      });
+    }
+  }
+})();

framework/src/widgets/json-tree-view/json-tree-view.directive.js

@@ -0,0 +1,74 @@
+(function () {
+  'use strict';
+
+  angular
+    .module('helion.framework.widgets')
+    .directive('jsonTreeView', jsonTreeView);
+
+  jsonTreeView.$inject = [
+    'helion.framework.basePath',
+    'RecursionHelper'
+  ];
+
+  /**
+   * @name jsonTreeView
+   * @description A directive that displays JSON.
+   * @param {string} path - the framework base path
+   * @param {object} RecursionHelper - RecursionHelper
+   * @returns {object} The json-tree-view directive definition object
+   */
+  function jsonTreeView(path, RecursionHelper) {
+    return {
+      bindToController: {
+        json: '='
+      },
+      controller: JsonTreeViewController,
+      controllerAs: 'jtvCtrl',
+      restrict: 'E',
+      scope: {},
+      templateUrl: path + 'widgets/json-tree-view/json-tree-view.html',
+      compile: function (element) {
+        return RecursionHelper.compile(element);
+      }
+    };
+  }
+
+  JsonTreeViewController.$inject = ['$scope'];
+
+  /**
+   * @namespace helion.framework.widgets.ActionsMenuController
+   * @memberof helion.framework.widgets
+   * @name ActionsMenuController
+   * @constructor
+   * @param {object} $scope - the angular $scope service
+   * @property {string} icon - the actions menu icon
+   * @property {boolean} position - the actions menu position
+   * @property {boolean} open - flag whether actions menu should be visible
+   * @property {boolean} buttonMode - do not show the drop down instead the single action as a button
+   */
+  function JsonTreeViewController() {
+    this.array = _.isArray(this.json);
+  }
+
+  angular.extend(JsonTreeViewController.prototype, {
+
+    isArray: function () {
+      return _.isArray(this.json);
+    },
+
+    getTypeOf: function (value) {
+      if (_.isArray(value)) {
+        return 'array';
+      } else if (_.isObject(value)) {
+        return 'object';
+      } else if (_.isBoolean(value)) {
+        return 'bool';
+      } else if (_.isNumber(value)) {
+        return 'number';
+      }
+
+      return 'string';
+    }
+  });
+
+})();

framework/src/widgets/json-tree-view/json-tree-view.html

@@ -0,0 +1,21 @@
+<div ng-repeat="(key, value) in jtvCtrl.json">
+  <span ng-if="!jtvCtrl.array" class="json-view-key">{{key}} : </span>
+  <div class="json-view-item" ng-switch="jtvCtrl.getTypeOf(value)">
+    <div class="json-view-object" ng-switch-when="object">
+      <span>{</span>
+        <json-tree-view json="value"></json-tree-view>
+      <div>}</div>
+    </div>
+    <div class="json-view-array" ng-switch-when="array">
+      <div ng-if="value.length" class="json-view-array-wtih-values">
+        <span>[</span>
+          <json-tree-view json="value"></json-tree-view>
+        <div>]</div>
+      </div>
+      <span ng-if="!value.length">[]</span>
+    </div>
+    <span ng-switch-when="bool" class="json-view-bool">{{ value }}</span>
+    <span ng-switch-when="number" class="json-view-number">{{ value }}</span>
+    <span ng-switch-default="string" class="json-view-string">"{{ value }}"</span>
+  </div>
+</div>

framework/src/widgets/json-tree-view/json-tree-view.scss

@@ -0,0 +1,33 @@
+json-tree-view {
+  font-size: 11pt;
+  font-family: "Source Code Pro", monospace;
+}
+
+.json-view-item, .json-view-array, .json-view-object {
+  display: inline;
+
+  json-tree-view {
+    display: block;
+    margin-left: 12px;
+  }
+}
+
+.json-view-key {
+  color: #007B47;
+}
+
+.json-view-string {
+  color: red;
+}
+
+.json-view-number {
+  color: #0000DD;
+}
+
+.json-view-bool {
+  color: #0000DD;
+}
+
+.json-view-array-wtih-values {
+  display: inline;
+}

framework/src/widgets/json-tree-view/recursion-helper.js

@@ -0,0 +1,50 @@
+(function () {
+  'use strict';
+
+  angular
+    .module('helion.framework.widgets')
+    .factory('RecursionHelper', RecursionHelper);
+
+  RecursionHelper.$inject = [
+    '$compile'
+  ];
+
+  function RecursionHelper($compile) {
+    return {
+      /**
+       * Manually compiles the element, fixing the recursion loop.
+       * @param {object} element - Element
+       * @param {function} [link] - A post-link function, or an object with function(s) registered via pre and post properties.
+       * @returns {object} An object containing the linking functions.
+       */
+      compile: function (element, link) {
+        // Normalize the link parameter
+        if (angular.isFunction(link)) {
+          link = { post: link };
+        }
+
+        // Break the recursion loop by removing the contents
+        var contents = element.contents().remove();
+        var compiledContents;
+        return {
+          pre: link && link.pre ? link.pre : null,
+          post: function (scope, element) {
+            // Compile the contents
+            if (!compiledContents) {
+              compiledContents = $compile(contents);
+            }
+            // Re-add the compiled contents to the element
+            compiledContents(scope, function (clone) {
+              element.append(clone);
+            });
+
+            // Call the post-linking function, if any
+            if (link && link.post) {
+              link.post.apply(null, arguments);
+            }
+          }
+        };
+      }
+    };
+  }
+})();

framework/src/widgets/select-input/select-input.directive.js

@@ -191,7 +191,7 @@
     setLabel: function (modelValue) {
       if (angular.isDefined(modelValue) && modelValue !== null) {
         var initialValue = _.find(this.inputOptions, {value: modelValue});
-        this.modelLabel = initialValue.label;
+        this.modelLabel = initialValue ? initialValue.label : null;
       } else {
         this.modelLabel = null;
       }

framework/src/widgets/show-table-inline-message/show-table-inline-message.directive.js

@@ -28,6 +28,7 @@
       setMessage(attrs.showTableInlineMessage, true);
       setStatus(attrs.tableInlineStatus, true);
       setColSpan(attrs.inlineMessageColspan, true);
+      setLink(attrs.inlineMessageLink, true);
       element.after(elem);
 
       $compile(elem)(scope);
@@ -36,6 +37,7 @@
       attrs.$observe('showTableInlineMessage', setMessage);
       attrs.$observe('tableInlineStatus', setStatus);
       attrs.$observe('inlineMessageColspan', setColSpan);
+      attrs.$observe('inlineMessageLink', setLink);
 
       function setMessage(message, skipCompile) {
         if (message === elem.attr('message')) {
@@ -69,6 +71,12 @@
         }
       }
 
+      function setLink(newLink, skipCompile) {
+        elem.attr('link', newLink);
+        if (!skipCompile) {
+          $compile(elem)(scope);
+        }
+      }
     }
   }
 

framework/src/widgets/table-inline-message/table-inline-message.directive.js

@@ -23,15 +23,37 @@
       bindToController: {
         message: '@',
         status: '@',
+        link: '@?',
         colSpan: '@?'
       },
-      controller: function () {
-        this.statusClass = 'hpe-popover-alert-' + (this.status ? this.status : 'warning');
-      },
+      controller: InlineMessageController,
       controllerAs: 'tableInlineMessageCtrl',
       scope: {},
       templateUrl: path + 'widgets/table-inline-message/table-inline-message.html'
     };
   }
 
+  InlineMessageController.$inject = [
+    '$state'
+  ];
+
+  function InlineMessageController($state) {
+
+    this.statusClass = 'hpe-popover-alert-' + (this.status ? this.status : 'warning');
+
+    this.openLink = function () {
+      var link = this.link;
+      var parts = link.split('/');
+      var params = {};
+      var state = parts[0];
+      if (parts.length > 1) {
+        _.each(parts[1].split(','), function (p) {
+          var kv = p.split(':');
+          params[kv[0]] = kv[1];
+        });
+      }
+
+      $state.go(state, params);
+    };
+  }
 })();

framework/src/widgets/table-inline-message/table-inline-message.html

@@ -2,7 +2,8 @@
   <div ng-class="tableInlineMessageCtrl.statusClass" class="hpe-popover-alert popover bottom in">
     <div class="arrow"></div>
     <div class="popover-content">
-      {{ tableInlineMessageCtrl.message }}
+      <span ng-if="!tableInlineMessageCtrl.link">{{ tableInlineMessageCtrl.message }}</span>
+      <a ng-click="tableInlineMessageCtrl.openLink()" ng-if="tableInlineMessageCtrl.link">{{ tableInlineMessageCtrl.message }}</a>
     </div>
   </div>
 </td>

framework/src/widgets/widgets.scss

@@ -10,6 +10,7 @@
 @import "flyout/flyout";
 @import "gallery-card/gallery-card";
 @import "global-spinner/global-spinner";
+@import "json-tree-view/json-tree-view";
 @import "log-viewer/logs-viewer";
 @import "paginator/paginator";
 @import "password-reveal/password-reveal";