#790 add nicer links and views of the containers and brokers of the h…

…ighlighted node
hawtio · Jan 27, 2014 · 320f6e9 · 320f6e9
1 parent 396b583
commit 320f6e9
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 25 deletions.
diff --git a/hawtio-web/src/main/webapp/app/fabric/html/brokerDiagram.html b/hawtio-web/src/main/webapp/app/fabric/html/brokerDiagram.html
@@ -277,7 +277,7 @@
       <div ng-show="selectedNode">
         <dl ng-repeat="property in selectedNodeProperties" class="dl-horizontal">
           <dt>{{property.key | humanize}}:</dt>
-          <dd>{{property.value}}</dd>
+          <dd ng-bind-html-unsafe="property.value"></dd>
         </dl>
       </div>
     </div>

diff --git a/hawtio-web/src/main/webapp/app/fabric/js/brokerDiagram.ts b/hawtio-web/src/main/webapp/app/fabric/js/brokerDiagram.ts
@@ -1,6 +1,6 @@
 module Fabric {
 
-  export function FabricBrokerDiagramController($scope, localStorage, $routeParams, $location, jolokia, workspace, $compile, $templateCache) {
+  export function FabricBrokerDiagramController($scope, $compile, $location, localStorage, jolokia, workspace) {
 
     Fabric.initScope($scope, $location, jolokia, workspace);
 
@@ -68,6 +68,14 @@ module Fabric {
 
     });
 
+    $scope.connectToBroker = () => {
+      var selectedNode = $scope.selectedNode;
+      if (selectedNode) {
+        var container = selectedNode["brokerContainer"] || selectedNode;
+        Fabric.connectToBroker($scope, container);
+      }
+    };
+
     $scope.$on('$destroy', function (event) {
       stopOldJolokia();
     });
@@ -115,30 +123,56 @@ module Fabric {
       return prefix + (attributes["DestinationTopic"] ? "Topic" : "Queue");
     }
 
-    var ignoreNodeAttributes = ["Connection", "DestinationName", "DestinationQueue", "DestinationTemporary", "DestinationTopic"];
+    var ignoreNodeAttributes = ["Broker", "BrokerId", "BrokerName", "Connection", "DestinationName", "DestinationQueue", "DestinationTemporary", "DestinationTopic"];
 
     function renderNodeAttributes(response) {
       var properties = [];
       if (response) {
         var value = response.value || {};
         $scope.selectedNodeAttributes = value;
         var selectedNode = $scope.selectedNode || {};
+        var brokerContainer = selectedNode['brokerContainer'] || {};
         var nodeType = selectedNode["type"];
         var brokerName = selectedNode["brokerName"];
-        if (brokerName && nodeType !== "broker" && nodeType !== "brokerSlave") {
-          properties.splice(0, 0, {key: "Broker", value: brokerName});
-        }
+        var containerId = selectedNode["container"] || brokerContainer["container"];
+        var group = selectedNode["group"] || brokerContainer["group"];
+        var jolokiaUrl = selectedNode["jolokiaUrl"] || brokerContainer["jolokiaUrl"];
+        var profile = selectedNode["profile"] || brokerContainer["profile"];
+        var version = selectedNode["version"] || brokerContainer["version"];
+
+        var isBroker = nodeType && nodeType.startsWith("broker");
 
         angular.forEach(value, (v, k) => {
           if (ignoreNodeAttributes.indexOf(k) < 0
-            && (!brokerName || !k.startsWith("Broker"))
             && (nodeType !== "producer" || !k.startsWith("Producer"))) {
             var formattedValue = humanizeValue(v);
             properties.push({key: k, value: formattedValue});
           }
         });
         properties = properties.sortBy("key");
 
+        var brokerProperty: any = null;
+        if (brokerName) {
+          var html = brokerName;
+          if (version && profile) {
+            var brokerLink = Fabric.brokerConfigLink(workspace, jolokia, localStorage, version, profile, brokerName);
+            if (brokerLink) {
+              html = $compile('<a target="broker" ng-click="connectToBroker()">' +
+                '<img title="Apache ActiveMQ" src="app/fabric/img/message_broker.png"> ' + brokerName +
+                '</a> <a title="configuration settings" target="brokerConfig" href="' + brokerLink +
+                '"><i class="icon-tasks"></i></a>')($scope);
+            }
+          }
+          brokerProperty = {key: "Broker", value: html};
+          if (!isBroker) {
+            properties.splice(0, 0, brokerProperty);
+          }
+        }
+
+        if (containerId) {
+          var containerModel = "selectedNode" + (selectedNode['brokerContainer'] ? ".brokerContainer" : "");
+          properties.splice(0, 0, {key: "Container", value: $compile('<div fabric-container-link="' + containerModel + '"></div>')($scope)});
+        }
 
         var destinationName = value["DestinationName"] || selectedNode["destinationName"];
         // TODO ignore for queue/topic
@@ -147,10 +181,15 @@ module Fabric {
           properties.splice(0, 0, {key: destinationTypeName, value: destinationName});
         }
 
+
         var typeLabel = selectedNode["typeLabel"];
         var name = selectedNode["name"] || selectedNode["id"] || selectedNode['objectName'];
         if (typeLabel) {
-          properties.splice(0, 0, {key: typeLabel, value: name});
+          var typeProperty = {key: typeLabel, value: name};
+          if (isBroker && brokerProperty) {
+            typeProperty = brokerProperty;
+          }
+          properties.splice(0, 0, typeProperty);
         }
       }
       $scope.selectedNodeProperties = properties;
@@ -322,6 +361,7 @@ module Fabric {
           return getOrAddNode(typeName, destinationName, properties, () => {
             return {
               typeLabel: properties.destinationType || "Queue",
+              brokerContainer: container,
               popup: {
                 title: (properties.destinationType || "Queue") + ": " + destinationName,
                 content: brokerNameMarkup(properties.brokerName)
@@ -369,6 +409,7 @@ module Fabric {
                       var consumer = getOrAddNode("consumer", consumerId, properties, () => {
                         return {
                           typeLabel: "Consumer",
+                          brokerContainer: container,
                           objectName: objectName,
                           jolokia: containerJolokia,
                           popup: {
@@ -404,6 +445,7 @@ module Fabric {
                       var producer = getOrAddNode("producer", producerId, properties, () => {
                         return {
                           typeLabel: "Producer",
+                          brokerContainer: container,
                           objectName: objectName,
                           jolokia: containerJolokia,
                           popup: {
@@ -448,6 +490,7 @@ module Fabric {
                 var producer = getOrAddNode("producer", producerId, properties, () => {
                   return {
                     typeLabel: "Producer (Dynamic)",
+                    brokerContainer: container,
                     objectName: objectName,
                     jolokia: containerJolokia,
                     popup: {

diff --git a/hawtio-web/src/main/webapp/app/fabric/js/brokers.ts b/hawtio-web/src/main/webapp/app/fabric/js/brokers.ts
@@ -12,14 +12,15 @@ module Fabric {
     };
 
     $scope.showBroker = (broker) => {
-      var path = Fabric.profileLink(workspace, jolokia, localStorage, broker.version, broker.profile);
-      path += "/org.fusesource.mq.fabric.server-" + broker.id + ".properties";
+      var brokerVersion = broker.version;
+      var brokerProfile = broker.profile;
+      var brokerId = broker.id;
+      var path = Fabric.brokerConfigLink(workspace, jolokia, localStorage, brokerVersion, brokerProfile, brokerId);
       $location.path(path);
     };
 
     $scope.connectToBroker = (container, broker) => {
-      var view = "/jmx/attributes?tab=activemq";
-      $scope.doConnect(container, view);
+      Fabric.connectToBroker($scope, container);
     };
 
 

diff --git a/hawtio-web/src/main/webapp/app/fabric/js/fabricHelpers.ts b/hawtio-web/src/main/webapp/app/fabric/js/fabricHelpers.ts
@@ -1055,6 +1055,33 @@ module Fabric {
     return fn ? answer : onResults(answer);
   }
 
+
+  /**
+   * Creates a link to the given broker configuration so we can connect in the UI
+   * @param workspace
+   * @param jolokia
+   * @param localStorage
+   * @param brokerVersion
+   * @param brokerProfile
+   * @param brokerId
+   * @return the link to the broker page
+   */
+  export function brokerConfigLink(workspace, jolokia, localStorage, brokerVersion, brokerProfile, brokerId) {
+    var path = Fabric.profileLink(workspace, jolokia, localStorage, brokerVersion, brokerProfile);
+    path += "/org.fusesource.mq.fabric.server-" + brokerId + ".properties";
+    return path;
+  }
+
+
+  /**
+   * Connects to the broker in a new window
+   */
+  export function connectToBroker($scope, container) {
+    var view = "/jmx/attributes?tab=activemq";
+    $scope.doConnect(container, view);
+  }
+
+
   /**
    * Removes any attributes from the object that are set to an empty string.
    *

diff --git a/hawtio-web/src/main/webapp/app/fabric/js/fabricPlugin.ts b/hawtio-web/src/main/webapp/app/fabric/js/fabricPlugin.ts
@@ -104,25 +104,38 @@ module Fabric {
         }
     }).
     directive('fabricContainerLink', ($location, jolokia, workspace) => {
-        return {
-            restrict: 'A',
-            link: ($scope, $element, $attrs) => {
-            var containerId = $attrs['fabricContainerLink'];
-            if (containerId && !containerId.isBlank()) {
+      return {
+        restrict: 'A',
+        link: ($scope, $element, $attrs) => {
+          var modelName = $attrs['fabricContainerLink'];
+          var containerId = modelName;
+          var container = null;
+          if (modelName && !modelName.isBlank()) {
+            // lets check if the value is a model object containing the container details
+            var modelValue = Core.pathGet($scope, modelName);
+            if (angular.isObject(modelValue)) {
+              var id = modelValue["container"] || modelValue["containerId"] || modelValue["id"];
+              if (id && modelValue["provisionResult"]) {
+                container = modelValue;
+                containerId = id;
+              }
+            }
+            if (!container) {
               var fields = ["alive", "provisionResult", "versionId", "jmxDomains"];
-              var container = Fabric.getContainerFields(jolokia, containerId, fields);
+              container = Fabric.getContainerFields(jolokia, containerId, fields);
+            }
 
-              var link = "#/fabric/container/" + containerId;
-              var title = Fabric.statusTitle(container) || "container " + containerId;
-              var icon = Fabric.statusIcon(container) || "";
+            var link = "#/fabric/container/" + containerId;
+            var title = Fabric.statusTitle(container) || "container " + containerId;
+            var icon = Fabric.statusIcon(container) || "";
 
-              var html = "<a href='" + link + "' title='" + title + "'><i class='" + icon + "'></i> " + containerId + "</a>";
-              $element.html(html);
+            var html = "<a href='" + link + "' title='" + title + "'><i class='" + icon + "'></i> " + containerId + "</a>";
+            $element.html(html);
 
-              Core.$apply($scope);
-            }
+            Core.$apply($scope);
           }
         }
+      }
     }).
     directive('fabricContainerConnect', ($location, jolokia) => {
         return {