Repository: stratos Updated Branches: refs/heads/master c429c120f -> 2c09990d5
Add bootstrap popover to nodes Project: http://git-wip-us.apache.org/repos/asf/stratos/repo Commit: http://git-wip-us.apache.org/repos/asf/stratos/commit/d901dad4 Tree: http://git-wip-us.apache.org/repos/asf/stratos/tree/d901dad4 Diff: http://git-wip-us.apache.org/repos/asf/stratos/diff/d901dad4 Branch: refs/heads/master Commit: d901dad457e16fb977098a2b903f884a73789067 Parents: a0921a8 Author: Dakshika Jayathilaka <[email protected]> Authored: Wed Jan 28 10:54:36 2015 +0530 Committer: Dakshika Jayathilaka <[email protected]> Committed: Wed Jan 28 18:10:57 2015 +0530 ---------------------------------------------------------------------- .../themes/theme0/css/custom/topology.css | 21 ++--- .../theme0/js/custom/applications_topology.js | 90 +++++++++++++++++++- 2 files changed, 94 insertions(+), 17 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/stratos/blob/d901dad4/components/org.apache.stratos.manager.console/console/themes/theme0/css/custom/topology.css ---------------------------------------------------------------------- diff --git a/components/org.apache.stratos.manager.console/console/themes/theme0/css/custom/topology.css b/components/org.apache.stratos.manager.console/console/themes/theme0/css/custom/topology.css index a0d8f77..a779ccf 100644 --- a/components/org.apache.stratos.manager.console/console/themes/theme0/css/custom/topology.css +++ b/components/org.apache.stratos.manager.console/console/themes/theme0/css/custom/topology.css @@ -10,19 +10,6 @@ stroke-width: 2px; } -div.tooltip { - position: absolute; - text-align: left; - width: 20em; - padding: .8em; - margin:1em; - font: 12px sans-serif; - background: lightsteelblue; - border: 0px; - border-radius: 8px; - pointer-events: none; -} - .application-topology { text-align: center; width: 82%; @@ -47,4 +34,12 @@ div.tooltip { .keys>div { margin-top: 7px; +} + +.popover-content { + font-size: 13px; +} + +.popover.top>.arrow { + left: 60%; } \ No newline at end of file http://git-wip-us.apache.org/repos/asf/stratos/blob/d901dad4/components/org.apache.stratos.manager.console/console/themes/theme0/js/custom/applications_topology.js ---------------------------------------------------------------------- diff --git a/components/org.apache.stratos.manager.console/console/themes/theme0/js/custom/applications_topology.js b/components/org.apache.stratos.manager.console/console/themes/theme0/js/custom/applications_topology.js index d73c05a..1751b42 100644 --- a/components/org.apache.stratos.manager.console/console/themes/theme0/js/custom/applications_topology.js +++ b/components/org.apache.stratos.manager.console/console/themes/theme0/js/custom/applications_topology.js @@ -34,7 +34,7 @@ function genTree(data){ status = items[prop].status; if(items[prop].accessUrls){ - accessUrls = items[prop].accessUrls.toString(); + accessUrls = items[prop].accessUrls; }else{ accessUrls = ''; } @@ -163,17 +163,60 @@ function update(source) { }); // Enter the nodes. + var div_html; var nodeEnter = node.enter().append("g") .attr("class", "node") .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; }) + .attr('data-content', function (d) { + if (d.type == 'clusters') { + if(d.accessUrls != ''){ + var accessURLHTML = "<strong>Access URLs: </strong>"; + for(var i=0;i<d.accessUrls.length;i++){ + accessURLHTML += "<a href='"+ d.accessUrls[i] +"' target='_blank'>"+ d.accessUrls[i] + + "</a><br/>" ; + } + + }else{ + var accessURLHTML =''; + } + div_html = "<strong>Cluster Id: </strong>" + d.name + "<br/>" + + "<strong>Cluster Alias: </strong>" + d.alias + "<br/>" + + accessURLHTML + + "<strong>HostNames: </strong>" + d.hostNames + "<br/>" + + "<strong>Service Name: </strong>" + d.serviceName + "<br/>" + + "<strong>Status: </strong>" + d.status; + + } else if (d.type == 'members') { + + div_html = "<strong>Member Id: </strong>" + d.name + "<br/>" + + "<strong>Default Private IP: </strong>" + d.defaultPrivateIP + "<br/>" + + "<strong>Default Public IP: </strong>" + d.defaultPublicIP + "<br/>" + + "<strong>Network Partition Id: </strong>" + d.networkPartitionId + "<br/>" + + "<strong>Partition Id: </strong>" + d.partitionId + "<br/>" + + "<strong>Status: </strong>" + d.status; + } else if (d.type == 'groups') { + + div_html = "<strong>Group Instance Id: </strong>" + d.instanceId + "<br/>" + + "<strong>Status: </strong>" + d.status; + + } else if (d.type == 'applicationInstances') { + div_html = "<strong>Instance Id: </strong>" + d.name + "<br/>" + + "<strong>Status: </strong>" + d.status; + + } else { + div_html = "<strong>Alias: </strong>" + d.name + "<br/>"+ + "<strong>Status: </strong>" + d.status; + + } + return div_html; + }); // add tool tip for ps -eo pid,ppid,pcpu,size,comm,ruser,s - .on("mouseover", function (d) { +/* .on("mouseover", function (d) { div.transition() .duration(200) .style("opacity", .9); - console.log(d) if (d.type == 'clusters') { if(d.accessUrls != ''){ var accessURLHTML = "<strong>Access URLs: </strong>" + d.accessUrls + "<br/>" ; @@ -225,7 +268,7 @@ function update(source) { div.transition() .duration(500) .style("opacity", 0); - }); + });*/ nodeEnter.append("rect") .attr("x", -15) @@ -304,4 +347,43 @@ function update(source) { .attr("class", "link") .attr("d", diagonal); + //enable popovers on nodes + $('svg .node').popover({ + 'trigger': 'manual' + ,'container': '.application-topology' + ,'placement': 'auto' + ,'white-space': 'nowrap' + ,'html':'true' + ,delay: {show: 50, hide: 400} + }); + + var timer, + popover_parent; + function hidePopover(elem) { + $(elem).popover('hide'); + } + $('svg .node').hover( + function() { + var self = this; + clearTimeout(timer); + $('.popover').hide(); //Hide any open popovers on other elements. + popover_parent = self + $(self).popover('show'); + }, + function() { + var self = this; + timer = setTimeout(function(){hidePopover(self)},300); + }); + $(document).on({ + mouseenter: function() { + clearTimeout(timer); + }, + mouseleave: function() { + var self = this; + timer = setTimeout(function(){hidePopover(popover_parent)},300); + } + }, '.popover'); + } + +
