| <html> |
| <head> |
| <meta charset="utf-8"> |
| <link rel="stylesheet" href="css/bootstrap.min.css" media="screen"> |
| <link rel="stylesheet" href="css/bootstrap-responsive.min.css"> |
| <style type="text/css"> |
| body '{' font: 20px sans-serif; '}' |
| .axis path, |
| .axis line '{' fill: none; stroke: #000; shape-rendering: crispEdges; '}' |
| .axis text '{' font-family: sans-serif; font-size: 20px; '}' |
| .line '{' fill: none; stroke: steelblue; stroke-width: 3px; '}' |
| .legend '{' |
| padding: 5px; |
| font: 18px sans-serif; |
| background: yellow; |
| box-shadow: 2px 2px 1px #888; |
| '}' |
| .title '{' font: 24px sans-serif; '}' |
| .divborder '{' |
| border-width: 1px; |
| border-style: solid; |
| border-color: black; |
| margin-top:10px |
| '}' |
| </style> |
| <script src="js/thirdparty/d3.v3.js"></script> |
| <script src="js/thirdparty/jquery.js"></script> |
| <script src="js/thirdparty/bootstrap.min.js"></script> |
| </head> |
| <body> |
| <div class="row"> |
| <div class="span10 offset2"><br> |
| <input type="button" style="float: right;" value="Stop" |
| onClick="stop()" /> |
| </div> |
| </div> |
| <div class="row"> |
| <div class="divborder span8" style="margin-left:50px" id="area1"></div> |
| <div class="divborder span8" id="area2"></div> |
| </div> |
| <div class="row"> |
| <div class="divborder span8" style="margin-left:50px" id="area3"></div> |
| <div class="divborder span8" id="area4"></div> |
| </div> |
| <div class="row"> |
| <div class="divborder span8" style="margin-left:50px" id="area5"></div> |
| <div class="divborder span8" id="area6"></div> |
| </div> |
| <div class="row"> |
| <div class="divborder span8" style="margin-left:50px" id="area7"></div> |
| <div class="span8" id="area8"></div> |
| </div><br/><br/> |
| |
| <script> |
| var basetime = 0; |
| var running = 1; |
| var data = []; |
| var width, height; |
| var legends = []; |
| var titles = []; |
| var yLabels = []; |
| var isAreas = []; |
| var svgs = []; |
| var xs = []; |
| var ys = []; |
| var xAxiss = []; |
| var yAxiss = []; |
| var lineAreas = []; |
| var stacks = []; |
| |
| // legends |
| legends[0] = [''running.applications'', ''running.containers'']; |
| legends[1] = [''jvm.free.memory'', ''jvm.max.memory'', ''jvm.total.memory'']; |
| legends[2] = [''cluster.allocated.memory'', ''cluster.available.memory'']; |
| legends[3] = [''cluster.allocated.vcores'', ''cluster.available.vcores'']; |
| legends[4] = []; |
| legends[5] = []; |
| {0} |
| legends[6] = [''scheduler.allocate.timecost'', |
| ''scheduler.handle-NODE_ADDED.timecost'', |
| ''scheduler.handle-NODE_REMOVED.timecost'', |
| ''scheduler.handle-NODE_UPDATE.timecost'', |
| ''scheduler.handle-APP_ADDED.timecost'', |
| ''scheduler.handle-APP_REMOVED.timecost'', |
| ''scheduler.handle-CONTAINER_EXPIRED.timecost'']; |
| |
| // title |
| titles[0] = ''Cluster running applications & containers''; |
| titles[1] = ''JVM memory''; |
| titles[2] = ''Cluster allocated & available memory''; |
| titles[3] = ''Cluster allocated & available vcores''; |
| titles[4] = ''Queue allocated memory''; |
| titles[5] = ''Queue allocated vcores''; |
| titles[6] = ''Scheduler allocate & handle operation timecost''; |
| |
| // ylabels |
| yLabels[0] = ''Number''; |
| yLabels[1] = ''Memory (GB)''; |
| yLabels[2] = ''Memory (GB)''; |
| yLabels[3] = ''Number''; |
| yLabels[4] = ''Memory (GB)''; |
| yLabels[5] = ''Number''; |
| yLabels[6] = ''Timecost (ms)''; |
| |
| // is area? |
| isAreas = [0, 0, 0, 0, 1, 1, 0]; |
| |
| // draw all charts |
| for (var i = 0; i < 7; i ++) '{' |
| drawEachChart(i); |
| '}' |
| |
| // draw each chart |
| function drawEachChart(index) '{' |
| var margin = '{'top: 50, right: 250, bottom: 50, left: 70'}'; |
| width = 750 - margin.left - margin.right; |
| height = 420 - margin.top - margin.bottom; |
| |
| xs[index] = d3.scale.linear().range([0, width]); |
| ys[index] = d3.scale.linear().range([height, 0]); |
| xAxiss[index] = d3.svg.axis().scale(xs[index]).orient(''bottom''); |
| yAxiss[index] = d3.svg.axis().scale(ys[index]).orient(''left''); |
| |
| if (isAreas[index] == 1)'{' |
| lineAreas[index] = d3.svg.area() |
| .x(function(d) '{' return xs[index](d.time); '}') |
| .y0(function(d) '{' return ys[index](d.y0); '}') |
| .y1(function(d) '{' return ys[index](d.y0 + d.y); '}'); |
| |
| stacks[index] = d3.layout.stack() |
| .values(function(d) '{' return d.values; '}'); |
| '}' else '{' |
| lineAreas[index] = d3.svg.line() |
| .interpolate(''basis'') |
| .x(function(d) '{' return xs[index](d.time); '}') |
| .y(function(d) '{' return ys[index](d.value); '}'); |
| '}' |
| |
| svgs[index] = d3.select(''#area'' + (index + 1)).append(''svg'') |
| .attr(''width'', width + margin.left + margin.right) |
| .attr(''height'', height + margin.top + margin.bottom) |
| .append(''g'') |
| .attr(''transform'', ''translate('' + margin.left + '','' + margin.top + '')''); |
| |
| // x, y and title |
| svgs[index].append(''text'') |
| .attr(''transform'', ''translate('' + (width / 2) + '' ,'' + |
| (height + margin.bottom - 10 ) + '')'') |
| .style(''text-anchor'', ''middle'') |
| .text(''Time ({1})''); |
| |
| svgs[index].append(''text'') |
| .attr(''transform'', ''rotate(-90)'') |
| .attr(''y'', 0 - margin.left) |
| .attr(''x'',0 - (height / 2)) |
| .attr(''dy'', ''1em'') |
| .style(''text-anchor'', ''middle'') |
| .text(yLabels[index]); |
| |
| svgs[index].append(''text'') |
| .attr(''x'', (width / 2)) |
| .attr(''y'', 10 - (margin.top / 2)) |
| .attr(''text-anchor'', ''middle'') |
| .text(titles[index]); |
| '}' |
| |
| // request data |
| function requestData() '{' |
| $.ajax('{'url: ''simulateMetrics'', |
| success: function(point) '{' |
| // update data |
| if (basetime == 0) basetime = point.time; |
| point.time = (point.time - basetime) / {2}; |
| data.push(point); |
| |
| // clear old |
| for (var i = 0; i < 7; i ++) '{' |
| svgs[i].selectAll(''g.tick'').remove(); |
| svgs[i].selectAll(''g'').remove(); |
| var color = d3.scale.category10(); |
| color.domain(d3.keys(data[0]).filter(function(key) '{' |
| return $.inArray(key, legends[i]) !== -1; |
| '}')); |
| |
| var values; |
| if (isAreas[i] == 1) '{' |
| values = stacks[i](color.domain().map(function(name) '{' |
| return '{' |
| name: name, |
| values: data.map(function(d) '{' |
| return '{'time: d.time, y: d[name]'}'; |
| '}') |
| '}' |
| '}')); |
| xs[i].domain(d3.extent(data, function(d) '{' return d.time;'}')); |
| ys[i].domain([ |
| d3.min(values, function(c) '{' return 0; '}'), |
| d3.max(values, function(c) '{' return 1.1 * d3.max(c.values, |
| function(v) '{' return v.y + v.y0; '}'); '}') |
| ]); |
| '}' else '{' |
| values = color.domain().map(function(name) '{' |
| return '{' |
| name: name, |
| values: data.map(function(d) '{' |
| return '{'time: d.time, value: d[name]'}'; |
| '}') |
| '}' |
| '}'); |
| xs[i].domain(d3.extent(data, function(d) '{' return d.time;'}')); |
| ys[i].domain([ |
| d3.min(values, function(c) '{' return 0; '}'), |
| d3.max(values, function(c) '{' return 1.1 * d3.max(c.values, |
| function(v) '{' return v.value; '}'); '}') |
| ]); |
| '}' |
| |
| svgs[i].append(''g'').attr(''class'', ''x axis'') |
| .attr(''transform'', ''translate(0,'' + height + '')'').call(xAxiss[i]); |
| |
| svgs[i].append(''g'').attr(''class'', ''y axis'').call(yAxiss[i]); |
| |
| var value = svgs[i].selectAll(''.path'') |
| .data(values).enter().append(''g'').attr(''class'', ''line''); |
| |
| if(isAreas[i] == 1) '{' |
| value.append(''path'').attr(''class'', ''area'') |
| .attr(''d'', function(d) '{'return lineAreas[i](d.values); '}') |
| .style(''fill'', function(d) '{'return color(d.name); '}'); |
| '}' else '{' |
| value.append(''path'').attr(''class'', ''line'') |
| .attr(''d'', function(d) '{'return lineAreas[i](d.values); '}') |
| .style(''stroke'', function(d) '{'return color(d.name); '}'); |
| '}' |
| |
| // legend |
| var legend = svgs[i].append(''g'') |
| .attr(''class'', ''legend'') |
| .attr(''x'', width + 5) |
| .attr(''y'', 25) |
| .attr(''height'', 120) |
| .attr(''width'', 140); |
| legend.selectAll(''g'').data(legends[i]) |
| .enter() |
| .append(''g'') |
| .each(function(d, i) '{' |
| var g = d3.select(this); |
| g.append(''rect'') |
| .attr(''x'', width + 5) |
| .attr(''y'', i*20) |
| .attr(''width'', 10) |
| .attr(''height'', 10) |
| .style(''fill'', color(d)); |
| g.append(''text'') |
| .attr(''x'', width + 25) |
| .attr(''y'', i * 20 + 8) |
| .attr(''height'',30) |
| .attr(''width'',250) |
| .style(''fill'', color(d)) |
| .text(d); |
| '}'); |
| '}' |
| |
| if(running == 1) |
| setTimeout(requestData, {3}); |
| '}', |
| cache: false |
| '}'); |
| '}' |
| |
| // stop |
| function stop() '{' |
| running = 0; |
| '}' |
| requestData(); |
| </script> |
| </body> |
| </html> |