#790 populate the selected-node details tab with real time JMX attrib…

…utes and other details
hawtio · Dec 10, 2013 · ae09e65 · ae09e65
1 parent e2d8353
commit ae09e65
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 58 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
@@ -36,76 +36,28 @@
   stroke-width: 2px
 }
 
-/*
-
-/*
-path.link {
-    fill: none;
-    stroke: #666;
-    stroke-width: 1.5px;
-}
-*/
-
-/*
-    path.link.group {
-    }
-
-    path.link.broker {
-        stroke: #444;
-    }
-
-    path.link.container {
-        stroke-dasharray: 0,2 1;
-    }
-*/
-
-/*
-    circle {
-        fill: #black;
-    }
-
-    circle.service {
-        fill: blue;
-    }
-
-    circle.bundle {
-        fill: black;
-    }
-
-    circle.package {
-        fill: gray;
-    }
-
-    text {
-        font: 10px sans-serif;
-        pointer-events: none;
-    }
-
-    text.shadow {
-        stroke: #fff;
-        stroke-width: 3px;
-        stroke-opacity: .8;
-    }
-*/
-
 /* only things directly related to the network graph should be here */
 
 path.link {
   fill: none;
   stroke: #666;
-  stroke-width: 1.5px;
+  stroke-width: 1.5px;  b
 }
 
-marker#brokerMaster {
+marker.broker {
   stroke: red;
   fill: red;
   stroke-width: 1.5px;
 }
 
-circle.brokerMaster {
+circle.broker {
   fill: #0c0;
 }
 
+circle.brokerSlave {
+  fill: #c00;
+}
+
 circle.notActive {
   fill: #c00;
 }
@@ -322,8 +274,20 @@
       </div>
     </div>
     <div ng-show="viewSettings.panel" class="span4">
-      <h3>{{selectedNode.summary.title}}</h3>
-      <div ng-bind-html-unsafe="selectedNode.summary.content"></div>
+      <div ng-show="selectedNode">
+        <dl class="dl-horizontal">
+          <dt>{{selectedNode.typeLabel}}:</dt>
+          <dd>{{selectedNode.name}}</dd>
+        </dl>
+        <dl ng-show="selectedNode.brokerName && selectedNode.type !== 'broker'" class="dl-horizontal">
+          <dt>Broker:</dt>
+          <dd>{{selectedNode.brokerName}}</dd>
+        </dl>
+        <dl ng-repeat="property in selectedNodeProperties" class="dl-horizontal">
+          <dt>{{property.key | humanize}}:</dt>
+          <dd>{{property.value}}</dd>
+        </dl>
+      </div>
     </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
@@ -70,8 +70,39 @@ module Fabric {
 
     $scope.$watch("selectedNode", (newValue, oldValue) => {
       //log.info("Has selected: " + angular.toJson($scope.selectedNode));
+      // lets cancel any previously registered thingy
+      if ($scope.unregisterFn) {
+        $scope.unregisterFn();
+        $scope.unregisterFn = null;
+      }
+      var node = $scope.selectedNode;
+      if (node) {
+        var mbean = node.objectName;
+        var jolokia = node.jolokia || jolokia;
+        if (mbean && jolokia) {
+          $scope.unregisterFn = Core.register(jolokia, $scope, {
+            type: 'read', mbean: mbean
+          }, onSuccess(renderNodeAttributes));
+        }
+      }
     });
 
+    function renderNodeAttributes(response) {
+      $scope.selectedNodeProperties = [];
+      if (response) {
+        var value = response.value;
+        log.info("Got Node attributes! " + value);
+        log.info(angular.toJson(value));
+        $scope.selectedNodeAttributes = value;
+        angular.forEach(value, (v, k) => {
+          var formattedValue = humanizeValue(v);
+          $scope.selectedNodeProperties.push({key: k, value: formattedValue});
+        });
+        $scope.selectedNodeProperties = $scope.selectedNodeProperties.sortBy("key");
+        Core.$apply($scope);
+      }
+    }
+
     $scope.$watch("searchFilter", (newValue, oldValue) => {
       redrawGraph();
     });
@@ -123,6 +154,7 @@ module Fabric {
              height:32
              },
              */
+            typeLabel: "Broker Group",
             popup: {
               title: "Broker Group: " + groupId,
               content: "<p>" + groupId + "</p>"
@@ -132,6 +164,7 @@ module Fabric {
 
         var profile = getOrAddNode("profile", profileId, brokerStatus, () => {
           return {
+            typeLabel: "Profile",
             popup: {
               title: "Profile: " + profileId,
               content: "<p>" + profileId + "</p>"
@@ -144,7 +177,8 @@ module Fabric {
         if (brokerFlag) {
           broker = getOrAddNode("broker", brokerId, brokerStatus, () => {
             return {
-              type: master ? "brokerMaster" : "broker",
+              type: master ? "broker" : "brokerSlave",
+              typeLabel: master ? "Broker" : "Slave Broker",
               popup: {
                 title: (master ? "Master" : "Slave") + " Broker: " + brokerId,
                 content: "<p>Container: " + containerId + "</p> <p>Group: " + groupId + "</p>"
@@ -159,6 +193,7 @@ module Fabric {
           container = getOrAddNode("container", containerId, brokerStatus, () => {
             return {
               containerId: containerId,
+              typeLabel: "Container",
               popup: {
                 title: "Container: " + containerId,
                 content: "<p>" + containerId + " version: " + versionId + "</p>"
@@ -232,6 +267,7 @@ module Fabric {
           }
           return getOrAddNode(typeName, destinationName, properties, () => {
             return {
+              typeLabel: properties.destinationType || "Queue",
               popup: {
                 title: (properties.destinationType || "Queue") + ": " + destinationName,
                 content: brokerNameMarkup(properties.brokerName)
@@ -278,6 +314,9 @@ module Fabric {
                       addLink(container.destinationLinkNode, destination, "destination");
                       var consumer = getOrAddNode("consumer", consumerId, properties, () => {
                         return {
+                          typeLabel: "Consumer",
+                          objectName: objectName,
+                          jolokia: containerJolokia,
                           popup: {
                             title: "Consumer: " + consumerId,
                             content: "<p>client: " + (properties.clientId || "") + "</p> " + brokerNameMarkup(properties.brokerName)
@@ -310,6 +349,9 @@ module Fabric {
                       addLink(container.destinationLinkNode, destination, "destination");
                       var producer = getOrAddNode("producer", producerId, properties, () => {
                         return {
+                          typeLabel: "Producer",
+                          objectName: objectName,
+                          jolokia: containerJolokia,
                           popup: {
                             title: "Producer: " + producerId,
                             content: "<p>client: " + (properties.clientId || "") + "</p> " + brokerNameMarkup(properties.brokerName)
@@ -351,6 +393,9 @@ module Fabric {
                 addLink(container.destinationLinkNode, destination, "destination");
                 var producer = getOrAddNode("producer", producerId, properties, () => {
                   return {
+                    typeLabel: "Producer (Dynamic)",
+                    objectName: objectName,
+                    jolokia: containerJolokia,
                     popup: {
                       title: "Producer (Dynamic): " + producerId,
                       content: "<p>client: " + (properties['ClientId'] || "") + "</p> " + brokerNameMarkup(properties['brokerName'])