Merge pull request #586 from atooni/master

Finalzing OSGI dependency graph.
hawtio · Sep 26, 2013 · a5a0619 · a5a0619
2 parents cdf20a2 + cb16d7d
commit a5a0619
Show file tree

Hide file tree

Showing 7 changed files with 153 additions and 36 deletions.
diff --git a/hawtio-web/src/main/webapp/app/forcegraph/js/forceGraphDirective.ts b/hawtio-web/src/main/webapp/app/forcegraph/js/forceGraphDirective.ts
@@ -50,6 +50,38 @@ module ForceGraph {
                 });
             };
 
+            $scope.mover = (d) => {
+                if (d.popup != null) {
+                    $("#pop-up").fadeOut(100,function () {
+
+                        // Popup content
+                        if (d.popup.title != null) {
+                            $("#pop-up-title").html(d.popup.title);
+                        } else {
+                            $("#pop-up-title").html("");
+                        }
+
+                        if (d.popup.content != null) {
+                            $("#pop-up-content").html(d.popup.content);
+                        } else {
+                            $("#pop-up-content").html("");
+                        }
+
+                        // Popup position
+                        var popLeft = (d.x * $scope.scale) + $scope.trans[0] + 20;
+                        var popTop = (d.y * $scope.scale) + $scope.trans[1]+20;
+
+                        $("#pop-up").css({"left":popLeft,"top":popTop});
+                        $("#pop-up").fadeIn(100);
+                    });
+                }
+            }
+
+            $scope.mout = (d) => {
+                $("#pop-up").fadeOut(50);
+                //d3.select(this).attr("fill","url(#ten1)");
+            }
+
             var updateGraph = () => {
 
                 var canvas = $($element);
@@ -158,7 +190,10 @@ module ForceGraph {
                     // animate, then stop
                     $scope.force.start();
 
-                    $scope.graphNodes.call($scope.force.drag);
+                    $scope.graphNodes
+                        .call($scope.force.drag)
+                        .on("mouseover", $scope.mover)
+                        .on("mouseout", $scope.mout);
 
                 }
             }

diff --git a/hawtio-web/src/main/webapp/app/forcegraph/js/graphBuilder.ts b/hawtio-web/src/main/webapp/app/forcegraph/js/graphBuilder.ts
@@ -12,21 +12,21 @@ module ForceGraph {
             }
         }
 
-        public addLink (srcNode, targetNode, linkType) {
-            this.addNode(srcNode);
-            this.addNode(targetNode);
+        public addLink (srcId, targetId, linkType) {
 
-            this.links.push({
-                source: srcNode,
-                target: targetNode,
-                type: linkType
-            });
+            if ((this.nodes[srcId] != null) && (this.nodes[targetId] != null)) {
+                this.links.push({
+                    source: this.nodes[srcId],
+                    target: this.nodes[targetId],
+                    type: linkType
+                });
 
-            if (!this.linkTypes[linkType]) {
-                this.linkTypes[linkType] = {
-                    used: true
-                }
-            };
+                if (!this.linkTypes[linkType]) {
+                    this.linkTypes[linkType] = {
+                        used: true
+                    }
+                };
+            }
         }
 
         public buildGraph() {

diff --git a/hawtio-web/src/main/webapp/app/osgi/html/svc-dependencies.html b/hawtio-web/src/main/webapp/app/osgi/html/svc-dependencies.html
@@ -1,4 +1,25 @@
-<style>
+<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;
+        width:200px;
+        margin-bottom: 4px;
+        font-weight: bolder;
+    }
+    div#pop-up-content {
+        font-size: 12px;
+    }
 
     rect.graphbox {
         fill: #DDD;
@@ -44,11 +65,18 @@
         stroke: #fff;
         stroke-width: 3px;
         stroke-opacity: .8;
+    }
+
 </style>
 
 <div ng-controller="Osgi.ServiceDependencyController">
-
-  <div id="canvas">
+
+    <div id="pop-up">
+        <div id="pop-up-title"></div>
+        <div id="pop-up-content"></div>
+    </div>
+
+    <div id="canvas">
     <div hawtio-force-graph graph="graph" link-distance="100" charge="-300" nodesize="10"></div>
   </div>
 

diff --git a/hawtio-web/src/main/webapp/app/osgi/img/bundle.png b/hawtio-web/src/main/webapp/app/osgi/img/bundle.png
diff --git a/hawtio-web/src/main/webapp/app/osgi/img/service.png b/hawtio-web/src/main/webapp/app/osgi/img/service.png
diff --git a/hawtio-web/src/main/webapp/app/osgi/js/osgiData.ts b/hawtio-web/src/main/webapp/app/osgi/js/osgiData.ts
@@ -4,6 +4,7 @@ module Osgi {
 
         private result = {};
         private bundles = [];
+        private services = {};
 
         private jolokia;
         private workspace : Workspace;
@@ -20,7 +21,7 @@ module Osgi {
                 type: 'exec', mbean: getSelectionBundleMBean(workspace),
                 operation: 'listBundles()'
             }, onSuccess(function(response) {
-                svc.processResponse(response)
+                svc.processBundles(response)
             }));
         }
 
@@ -35,12 +36,33 @@ module Osgi {
             return this.bundles;
         }
 
-        private processResponse(response) {
+        public getServices() {
+            return this.services;
+        }
+
+        private loadServices(svc) {
+
+            var response = svc.jolokia.request({
+                type: 'exec',
+                mbean: getSelectionServiceMBean(svc.workspace),
+                operation: 'listServices()'
+            }, onSuccess(null));
+
+            var answer = response.value;
+            svc.services = {};
+
+            angular.forEach(answer, function (value, key) {
+              svc.services[value.Identifier] = value;
+            });
+        }
+
+        private processBundles(response) {
 
             var svc = this;
 
             if (!Object.equal(svc.result, response.value)) {
                 var newBundles = [];
+                svc.loadServices(svc);
 
                 svc.result = response.value;
 

diff --git a/hawtio-web/src/main/webapp/app/osgi/js/svc-dependencies.ts b/hawtio-web/src/main/webapp/app/osgi/js/svc-dependencies.ts
@@ -13,6 +13,40 @@ module Osgi {
             var graphBuilder = new ForceGraph.GraphBuilder();
 
             var bundles = osgiDataService.getBundles();
+            var services = osgiDataService.getServices();
+
+            d3.values(services).forEach((service) => {
+                var svcNode = {
+                    id: "Service-" + service.Identifier,
+                    name: "" + service.Identifier,
+                    type: "service",
+                    image: {
+                        url: "/hawtio/app/osgi/img/service.png",
+                        width: 32,
+                        height:32
+                    },
+                    popup : {
+                        title: "Service [" + service.Identifier + "]",
+                        content: (() => {
+
+                            var result = "";
+
+                            if (service != null) {
+                                service.objectClass.forEach((clazz) => {
+                                    if (result.length > 0) {
+                                        result = result + "<br/>";
+                                    }
+                                    result = result + clazz;
+                                })
+                            }
+
+                            return result;
+                        })
+                    }
+                }
+
+                graphBuilder.addNode(svcNode);
+            })
 
             bundles.forEach((bundle) => {
 
@@ -23,32 +57,30 @@ module Osgi {
                        id: bundleNodeId,
                        name: bundle.SymbolicName,
                        type: "bundle",
-                       navUrl: "#/osgi/bundle/" + bundle.Identifier
+                       navUrl: "#/osgi/bundle/" + bundle.Identifier,
+                       image: {
+                           url: "/hawtio/app/osgi/img/bundle.png",
+                           width: 32,
+                           height:32
+                       },
+                       popup : {
+                           title: "Bundle [" + bundle.Identifier + "]",
+                           content: "<p>" + bundle.SymbolicName + "<br/>Version " + bundle.Version + "</p>"
+                       }
+
                    }
 
-                   bundle.RegisteredServices.forEach((sid) => {
+                   graphBuilder.addNode(bundleNode);
 
+                   bundle.RegisteredServices.forEach((sid) => {
                        var svcNodeId = "Service-" + sid;
-                       var svcNode = {
-                           id: svcNodeId,
-                           name: "" + sid,
-                           type: "service"
-                       };
-
-                       graphBuilder.addLink(bundleNode, svcNode, "registered");
+                       graphBuilder.addLink(bundleNodeId, svcNodeId, "registered");
                    });
 
                    bundle.ServicesInUse.forEach((sid) => {
 
                        var svcNodeId = "Service-" + sid;
-                       var svcNode = {
-                           id: svcNodeId,
-                           name: "" + sid,
-                           type: "service",
-                           image: null
-                       };
-
-                       graphBuilder.addLink(bundleNode, svcNode, "inuse");
+                       graphBuilder.addLink(bundleNodeId, svcNodeId, "inuse");
                    });
                }
             });