initial spike of #790 - needs some CSS polish and so far only shows t…

…he groups / profiles / brokers / containers; doens't show clients/producers/consumers
hawtio · Nov 28, 2013 · 3cf3ad5 · 3cf3ad5
1 parent c024644
commit 3cf3ad5
Show file tree

Hide file tree

Showing 4 changed files with 236 additions and 2 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
@@ -0,0 +1,119 @@
+<style type="text/css">
+
+    div#pop-up {
+        display: none;
+        position:absolute;
+        color: white;
+        font-size: 14px;
+        background: rgba(0,0,0,0.6);
+        padding: 5px 10px 5px 10px;
+        -moz-border-radius: 8px 8px;
+        border-radius: 8px 8px;
+    }
+
+    div#pop-up-title {
+        font-size: 15px;
+        margin-bottom: 4px;
+        font-weight: bolder;
+    }
+    div#pop-up-content {
+        font-size: 12px;
+    }
+
+    rect.graphbox {
+        fill: #DDD;
+    }
+
+    rect.graphbox.frame {
+        stroke: #222;
+        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;
+    }
+
+</style>
+
+
+<div class="row-fluid mq-page" ng-controller="Fabric.FabricBrokerDiagramController">
+
+  <div ng-hide="inDashboard" class="span12 page-padded">
+    <div class="section-header">
+
+      <div class="section-filter">
+        <input type="text" class="search-query" placeholder="Filter..." ng-model="searchFilter">
+        <i class="icon-remove clickable" title="Clear Filter" ng-click="searchFilter = ''"></i>
+      </div>
+
+      <div class="section-controls">
+        <a ng-href="#/fabric/mq/brokers{{hash}}" title="View the broker and container diagram">
+          <i class="icon-edit"></i> Configuration
+        </a>
+        <a href="" title="Create a new broker configuration" ng-click="createBroker(null)">
+          <i class="icon-plus"></i> Broker
+        </a>
+        <a href="" title="Create a new container" ng-click="createContainer()">
+          <i class="icon-plus"></i> Container
+        </a>
+      </div>
+    </div>
+  </div>
+
+
+  <div id="pop-up">
+    <div id="pop-up-title"></div>
+    <div id="pop-up-content"></div>
+  </div>
+
+  <div class="row-fluid">
+    <div class="span12 canvas">
+      <div hawtio-force-graph graph="graph" link-distance="100" charge="-300" nodesize="10" style="min-height: 800px"></div>
+    </div>
+  </div>
+
+  <div ng-include="'app/fabric/html/connectToContainerDialog.html'"></div>
+
+</div>
+
+
diff --git a/hawtio-web/src/main/webapp/app/fabric/html/brokers.html b/hawtio-web/src/main/webapp/app/fabric/html/brokers.html
@@ -9,8 +9,8 @@
       </div>
 
       <div class="section-controls">
-        <a ng-href="#/fabric/mq/brokerNetwork{{hash}}" title="View the network connection diagram" ng-show="groups.length > 1">
-          <i class="icon-plus"></i> Networks
+        <a ng-href="#/fabric/mq/brokerDiagram{{hash}}" title="View the network diagram of the brokers and their clients" ng-show="groups.length > 1">
+          <i class="icon-picture"></i> Diagram
         </a>
         <a href="" title="Create a new broker configuration" ng-click="createBroker(null)">
           <i class="icon-plus"></i> Broker

diff --git a/hawtio-web/src/main/webapp/app/fabric/js/brokerDiagram.ts b/hawtio-web/src/main/webapp/app/fabric/js/brokerDiagram.ts
@@ -0,0 +1,114 @@
+module Fabric {
+
+  export function FabricBrokerDiagramController($scope, localStorage, $routeParams, $location, jolokia, workspace, $compile, $templateCache) {
+
+    Fabric.initScope($scope, $location, jolokia, workspace);
+
+    var graphBuilder = new ForceGraph.GraphBuilder();
+
+    if (Fabric.hasMQManager) {
+      Core.register(jolokia, $scope, {type: 'exec', mbean: Fabric.mqManagerMBean, operation: "loadBrokerStatus()"}, onSuccess(onBrokerData));
+    }
+
+    function onBrokerData(response) {
+      if (response) {
+        var responseJson = angular.toJson(response.value);
+        if ($scope.responseJson === responseJson) {
+          return;
+        }
+
+        $scope.responseJson = responseJson;
+
+        var brokers = response.value;
+
+        $scope.groups = [];
+
+        function getOrAddNode(kind:string, id, createFn) {
+          var nodeId = "";
+          if (id) {
+            nodeId = kind + "_" + id;
+            var node = graphBuilder.getNode(nodeId);
+            if (!node) {
+              node = createFn();
+              node['id'] = nodeId;
+              node['type'] = kind;
+              if (!node['name']) {
+                node['name'] = id;
+              }
+              if (node) {
+                graphBuilder.addNode(node);
+              }
+            }
+          }
+          return nodeId;
+        }
+
+        function addLink(id1, id2, linkType) {
+          if (id1 && id2) {
+            graphBuilder.addLink(id1, id2, linkType);
+          }
+        }
+
+        angular.forEach(brokers, (brokerStatus) => {
+          var groupId = brokerStatus.group;
+          var profileId = brokerStatus.profile;
+          var brokerId = brokerStatus.brokerName;
+          var containerId = brokerStatus.container;
+          var versionId = brokerStatus.version || "1.0";
+
+          var groupNodeId = getOrAddNode("group", groupId, () => {
+            return {
+              /*
+               navUrl: ,
+               image: {
+               url: "/hawtio/app/osgi/img/bundle.png",
+               width: 32,
+               height:32
+               },
+               */
+              popup: {
+                title: "Broker Group: " + groupId,
+                content: "<p>" + groupId + "</p>"
+              }
+            };
+          });
+
+          var profileNodeId = getOrAddNode("profile", profileId, () => {
+            return {
+              popup: {
+                title: "Profile: " + profileId,
+                content: "<p>" + profileId + "</p>"
+              }
+            };
+          });
+
+          var brokerNodeId = getOrAddNode("broker", brokerId, () => {
+            return {
+              popup: {
+                title: "Broker: " + brokerId,
+                content: "<p>" + brokerId + "</p>"
+              }
+            };
+          });
+
+          var containerNodeId = getOrAddNode("container", containerId, () => {
+            return {
+              popup: {
+                title: "Container: " + containerId,
+                content: "<p>" + containerId + " version: " + versionId + "</p>"
+              }
+            };
+          });
+
+          // add the links...
+          addLink(groupNodeId, profileNodeId, "group");
+          addLink(profileNodeId, brokerNodeId, "broker");
+          addLink(brokerNodeId, containerNodeId, "container");
+        });
+
+        $scope.graph = graphBuilder.buildGraph();
+        Core.$apply($scope);
+      }
+    }
+  }
+}
diff --git a/hawtio-web/src/main/webapp/app/fabric/js/fabricPlugin.ts b/hawtio-web/src/main/webapp/app/fabric/js/fabricPlugin.ts
@@ -27,6 +27,7 @@ module Fabric {
             when('/fabric/view', { templateUrl: templatePath + 'fabricView.html', reloadOnSearch: false }).
             when('/fabric/patching', { templateUrl: templatePath + 'patching.html' }).
             when('/fabric/mq/brokers', { templateUrl: templatePath + 'brokers.html' }).
+            when('/fabric/mq/brokerDiagram', { templateUrl: templatePath + 'brokerDiagram.html' }).
             when('/fabric/mq/brokerNetwork', { templateUrl: templatePath + 'brokerNetwork.html' }).
             when('/fabric/mq/createBroker', { templateUrl: templatePath + 'createBroker.html' }).
             when('/fabric/api', { templateUrl: templatePath + 'apis.html' }).