diff options
Diffstat (limited to 'kamon-dashboard/src/main/resources/web/js/controllers.js')
-rw-r--r-- | kamon-dashboard/src/main/resources/web/js/controllers.js | 231 |
1 files changed, 226 insertions, 5 deletions
diff --git a/kamon-dashboard/src/main/resources/web/js/controllers.js b/kamon-dashboard/src/main/resources/web/js/controllers.js index a6a9cc5a..25286dda 100644 --- a/kamon-dashboard/src/main/resources/web/js/controllers.js +++ b/kamon-dashboard/src/main/resources/web/js/controllers.js @@ -1,6 +1,6 @@ 'use strict'; -function kamonCtrl($scope, ActorSystemMetrics) { +function dispatchersController($scope, ActorSystemMetrics) { $scope.actorSystemMetrics = []; @@ -12,12 +12,233 @@ function kamonCtrl($scope, ActorSystemMetrics) { $scope.getActorSystemMetrics = function() { var actorSystemMetrics = ActorSystemMetrics.query(function() { - $scope.actorSystemMetrics = actorSystemMetrics; //.concat($scope.actorSystemMetrics); - - //$scope.getActorSystemMetrics(); + $scope.actorSystemMetrics = actorSystemMetrics; }); } } -function myctrl($scope, $http) { +function messageController($scope) { + + $scope.startMessagePolling = function() { + + Highcharts.setOptions({global: { useUTC: false }}); + + var chart; + + $('#liveramdomdata').highcharts({ + chart: { + type: 'spline', + animation: Highcharts.svg, // don't animate in old IE + marginRight: 10, + events: { + load: function () { + // set up the updating of the chart each second + var series = this.series[0]; + setInterval(function () { + $.get("/metrics/messages", function (data) { + var x = (new Date()).getTime(), // current time + y = data.messages; + series.addPoint([x, y], true, true); + }, "json"); + + }, 1000); + } + } + }, + title: { + text: 'Messages' + }, + xAxis: { + type: 'datetime', + tickPixelInterval: 150 + }, + yAxis: { + title: { + text: 'Value' + }, + plotLines: [ + { + value: 0, + width: 1, + color: '#808080' + } + ] + }, + tooltip: { + formatter: function () { + return '<b>' + this.series.name + '</b><br/>' + + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + + Highcharts.numberFormat(this.y, 2); + } + }, + legend: { + enabled: false + }, + exporting: { + enabled: false + }, + series: [ + { + name: 'Messages', + data: (function () { + // generate an array of random data + var data = [], + time = (new Date()).getTime(), + i; + + for (i = -19; i <= 0; i++) { + data.push({ + x: time + i * 1000, + y: Math.random() + }); + } + return data; + })() + } + ] + }); + } +} + +function actorTreeCtrl($scope) { + + $scope.getActorTree = function() { + var margin = {top: 20, right: 50, bottom: 20, left: 30}, + width = 400 - margin.right - margin.left, + height = 370 - margin.top - margin.bottom; + + var i = 0, + duration = 750, + root; + + var tree = d3.layout.tree() + .size([height, width]); + + var diagonal = d3.svg.diagonal() + .projection(function(d) { return [d.y, d.x]; }); + + var svg = d3.select("#tree").append("svg") + .attr("width", width + margin.right + margin.left) + .attr("height", height + margin.top + margin.bottom) + .append("g") + .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); + + d3.json("http://localhost:8080/metrics/actorTree", function(error, flare) { + root = flare; + root.x0 = height / 2; + root.y0 = 0; + + // function collapse(d) { + // if (d.children) { + // d._children = d.children; + // d._children.forEach(collapse); + // d.children = null; + // } + // } + // + // root.children.forEach(collapse); + update(root); + }); + + d3.select(self.frameElement).style("height", "400px"); + + function update(source) { + + // Compute the new tree layout. + var nodes = tree.nodes(root).reverse(), + links = tree.links(nodes); + + // Normalize for fixed-depth. + nodes.forEach(function(d) { d.y = d.depth * 180; }); + + // Update the nodes… + var node = svg.selectAll("g.node") + .data(nodes, function(d) { return d.id || (d.id = ++i); }); + + // Enter any new nodes at the parent's previous position. + var nodeEnter = node.enter().append("g") + .attr("class", "node") + .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; }) + .on("click", click); + + nodeEnter.append("circle") + .attr("r", 1e-6) + .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); + + nodeEnter.append("text") + .attr("x", function(d) { return d.children || d._children ? -10 : 10; }) + .attr("dy", ".35em") + .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) + .text(function(d) { return d.name; }) + .style("fill-opacity", 1e-6); + + // Transition nodes to their new position. + var nodeUpdate = node.transition() + .duration(duration) + .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }); + + nodeUpdate.select("circle") + .attr("r", 4.5) + .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); + + nodeUpdate.select("text") + .style("fill-opacity", 1); + + // Transition exiting nodes to the parent's new position. + var nodeExit = node.exit().transition() + .duration(duration) + .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; }) + .remove(); + + nodeExit.select("circle") + .attr("r", 1e-6); + + nodeExit.select("text") + .style("fill-opacity", 1e-6); + + // Update the links… + var link = svg.selectAll("path.link") + .data(links, function(d) { return d.target.id; }); + + // Enter any new links at the parent's previous position. + link.enter().insert("path", "g") + .attr("class", "link") + .attr("d", function(d) { + var o = {x: source.x0, y: source.y0}; + return diagonal({source: o, target: o}); + }); + + // Transition links to their new position. + link.transition() + .duration(duration) + .attr("d", diagonal); + + // Transition exiting nodes to the parent's new position. + link.exit().transition() + .duration(duration) + .attr("d", function(d) { + var o = {x: source.x, y: source.y}; + return diagonal({source: o, target: o}); + }) + .remove(); + + // Stash the old positions for transition. + nodes.forEach(function(d) { + d.x0 = d.x; + d.y0 = d.y; + }); + } + + // Toggle children on click. + function click(d) { + if (d.children) { + d._children = d.children; + d.children = null; + } else { + d.children = d._children; + d._children = null; + } + update(d); + } + } } |