stratos-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From im...@apache.org
Subject [08/14] stratos git commit: topology view with live refresh
Date Mon, 22 Dec 2014 06:29:14 GMT
topology view with live refresh


Project: http://git-wip-us.apache.org/repos/asf/stratos/repo
Commit: http://git-wip-us.apache.org/repos/asf/stratos/commit/92e00d22
Tree: http://git-wip-us.apache.org/repos/asf/stratos/tree/92e00d22
Diff: http://git-wip-us.apache.org/repos/asf/stratos/diff/92e00d22

Branch: refs/heads/master
Commit: 92e00d2241f7d19e95dc81f1efae2e7a2882b206
Parents: 1279dc7
Author: Dakshika Jayathilaka <sinhaladjs@gmail.com>
Authored: Mon Dec 22 10:02:11 2014 +0530
Committer: Imesh Gunaratne <imesh@apache.org>
Committed: Mon Dec 22 11:58:57 2014 +0530

----------------------------------------------------------------------
 .../theme0/partials/applications_topology.hbs   | 139 +++++++++++--------
 1 file changed, 82 insertions(+), 57 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/stratos/blob/92e00d22/components/org.apache.stratos.manager.console/console/themes/theme0/partials/applications_topology.hbs
----------------------------------------------------------------------
diff --git a/components/org.apache.stratos.manager.console/console/themes/theme0/partials/applications_topology.hbs
b/components/org.apache.stratos.manager.console/console/themes/theme0/partials/applications_topology.hbs
index f8e3f6f..8e33914 100644
--- a/components/org.apache.stratos.manager.console/console/themes/theme0/partials/applications_topology.hbs
+++ b/components/org.apache.stratos.manager.console/console/themes/theme0/partials/applications_topology.hbs
@@ -12,7 +12,7 @@
                     <button class='btn btn-default btn-lg' type='button' onclick='window.location.replace(document.referrer)'>
Back</button>
                 </div>
                 <div class='col-md-10'>
-                    <button class='btn btn-info btn-lg pull-right' type='button' id='deploy'
data-form=''>Refresh </button>
+                    <button class='btn btn-info btn-lg pull-right' type='button' id='refresh'
data-form=''>Refresh </button>
                 </div>
             </div>
         </div>
@@ -104,70 +104,65 @@ $(document).ready(function () {
         //getting execution logic
         applicationInstances(data.applicationInstances, rawout, data.id);
 
-        return rawout;
-    }
+        //generate tree from raw data
+        var data = rawout;
+        //data mapping with d3js tree
+        var dataMap = data.reduce(function (map, node) {
+            map[node.name] = node;
+            return map;
+        }, {});
+        var treeData = [];
+        data.forEach(function (node) {
+            // add to parent
+            var parent = dataMap[node.parent];
+            if (parent) {
+                // create child array if it doesn't exist
+                (parent.children || (parent.children = []))
+                    // add node to child array
+                        .push(node);
+            } else {
+                // parent is null or missing
+                treeData.push(node);
+            }
+        });
 
+        return treeData[0];
+    }
 
-//generate tree from raw data
-    var data = genTree(topologydata);
-    //data mapping with d3js tree
-    var dataMap = data.reduce(function (map, node) {
-        map[node.name] = node;
-        return map;
-    }, {});
-    var treeData = [];
-    data.forEach(function (node) {
-        // add to parent
-        var parent = dataMap[node.parent];
-        if (parent) {
-            // create child array if it doesn't exist
-            (parent.children || (parent.children = []))
-                // add node to child array
-                    .push(node);
-        } else {
-            // parent is null or missing
-            treeData.push(node);
-        }
-    });
+    function update(source) {
 
-// ************** Generate the tree diagram	 *****************
-    var margin = {top: 40, right: 120, bottom: 20, left: 120},
-            width = 960 - margin.right - margin.left,
-            height = 900 - margin.top - margin.bottom;
-
-    var i = 0;
-
-    var tree = d3.layout.tree()
-            .separation(function(a, b) { return ((a.parent == root) && (b.parent
== root)) ? 5 : 4; })
-            .size([height+100, width]);
-
-    var diagonal = d3.svg.diagonal()
-            .projection(function (d) {
-                return [d.x, d.y];
-            });
-    function redraw() {
-        svg.attr("transform",
-                        "translate(" + d3.event.translate + ")"
-                        + " scale(" + d3.event.scale + ")");
-    }
+        // ************** Generate the tree diagram	 *****************
+        var margin = {top: 40, right: 120, bottom: 20, left: 120},
+                width = 960 - margin.right - margin.left,
+                height = 900 - margin.top - margin.bottom;
 
-    var svg = d3.select(".application-topology").append("svg")
-            .attr("width", width + margin.right + margin.left)
-            .attr("height", height + margin.top + margin.bottom)
-            .call(d3.behavior.zoom().on("zoom", redraw))
-            .append("g");
+        var i = 0;
 
-    var i = 0;
-    duration = 750;
+        var tree = d3.layout.tree()
+                .separation(function(a, b) { return ((a.parent == source) && (b.parent
== source)) ? 5 : 4; })
+                .size([height+100, width]);
 
-    root = treeData[0];
+        var diagonal = d3.svg.diagonal()
+                .projection(function (d) {
+                    return [d.x, d.y];
+                });
+        function redraw() {
+            svg.attr("transform",
+                            "translate(" + d3.event.translate + ")"
+                            + " scale(" + d3.event.scale + ")");
+        }
 
-    update(root);
+        var svg = d3.select(".application-topology").append("svg")
+                .attr("width", width + margin.right + margin.left)
+                .attr("height", height + margin.top + margin.bottom)
+                .call(d3.behavior.zoom().on("zoom", redraw))
+                .append("g");
 
-    function update(source) {
+        var i = 0;
+        duration = 750;
 
         // Compute the new tree layout.
-        var nodes = tree.nodes(root).reverse(),
+        var nodes = tree.nodes(source).reverse(),
                 links = tree.links(nodes);
 
         // Normalize for fixed-depth.
@@ -195,6 +190,7 @@ $(document).ready(function () {
 
                     if (d.type == 'clusters') {
                         div.html(
+                                        "<strong>Cluster Id: </strong>" + d.name
+ "<br/>" +
                                         "<strong>Cluster Alias: </strong>" +
d.alias + "<br/>" +
                                         "<strong>HostNames: </strong>" + d.hostNames
+ "<br/>" +
                                         "<strong>Service Name: </strong>" + d.serviceName
+ "<br/>" +
@@ -277,8 +273,10 @@ $(document).ready(function () {
                 .attr("dy", ".35em")
                 .attr("text-anchor", "middle")
                 .text(function (d) {
-                    if(d.type == 'members'){
-                       return '';
+                    if(d.type == 'members') {
+                        return '';
+                    }else if(d.type == 'clusters'){
+                        return d.alias;
                     }else{
                         return d.name;
                     }
@@ -304,5 +302,32 @@ $(document).ready(function () {
 
     }
 
+    //initial generation with deafult call
+    update(genTree(topologydata));
+
+    $('#refresh').click(function(){
+        //get ajax call
+        $(".application-topology").html('<i class="fa fa-spinner fa-spin fa-4x"></i>');
+        var formtype = 'applicationtopology';
+        var applicationId = "{{appName}}";
+
+        $.ajax({
+            type: "GET",
+            url: caramel.context + "/controllers/applications/application_getrequests.jag",
+            dataType: 'json',
+            data: { "formtype": formtype, "appId":applicationId },
+            success: function (data) {
+                if (data.status == 'error') {
+                    var n = noty({text: data.message, layout: 'bottomRight', type: 'error'});
+                    $(".application-topology").html('');
+                } else {
+                    $(".application-topology").html('');
+                    update(genTree(data));
+                }
+            }
+        })
+    });
+
+
 });
 </script>
\ No newline at end of file


Mime
View raw message