You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@stratos.apache.org by im...@apache.org on 2014/12/22 07:29:14 UTC
[08/14] stratos git commit: topology view with live refresh
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 <si...@gmail.com>
Authored: Mon Dec 22 10:02:11 2014 +0530
Committer: Imesh Gunaratne <im...@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