cases graphs

This commit is contained in:
Alexey Lavrenuke (load testing) 2014-03-03 18:12:28 +04:00
parent 9c55735142
commit 14187f43ef
2 changed files with 22 additions and 1 deletions

View File

@ -168,6 +168,27 @@ $(document).ready ->
return if a.name >= b.name then 1 else -1
new GraphiteChart(chartGroup.find('.charts-container'), name, data)._update()
for caseName, caseData of document.tank_metrics.cases
chartGroup = $("""
<div class="panel panel-default">
<div class="panel-heading">
<h3>Metrics for '#{caseName}' case</h3>
</div>
<div class="panel-body charts-container" />
</div>
""")
chartGroup.appendTo this
for name, group_data of caseData
data = ({
name: key
data: ([v[0] * 1000, v[1]] for v in value)
} for key, value of group_data).sort (a, b) ->
if name in ['quantiles']
return if parseFloat(a.name) <= parseFloat(b.name) then 1 else -1
else
return if a.name >= b.name then 1 else -1
new GraphiteChart(chartGroup.find('.charts-container'), name, data)._update()
$('.monitoring-charts').each ->
for host, host_data of document.tank_metrics.monitoring
chartGroup = $("""

View File

@ -6,7 +6,7 @@
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
(function(){var e,t,n,i,a,r,o=[].indexOf||function(e){for(var t=0,n=this.length;n>t;t++)if(t in this&&this[t]===e)return t;return-1};t=["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a","#f0f08d","#b15928"],i=["#49006a","#7a0177","#ae017e","#dd3497","#f768a1","#fa9fb5","#fcc5c0","#fde0dd","#fff7f3","#ffffff"],a=["quantiles"],n={spline:{lineWidth:2,states:{hover:{lineWidth:4}},marker:{enabled:!1}}},r={area:{lineWidth:0,stacking:"normal",marker:{enabled:!1}}},function(e,t){var n,i;e&&(n=e.Chart.prototype,i=e.Legend.prototype,e.extend(n,{legendSetVisibility:function(e){var a,r,o,l,s,d,c,h;if(a=this,o=a.legend,d=void 0,l=void 0,s=void 0,c=a.options.legend,h=void 0,r=void 0,c.enabled!==e){if(c.enabled=e,!e){if(i.destroy.call(o),d=o.allItems)for(l=0,s=d.length;s>l;)d[l].legendItem=t,++l;o.group={}}n.render.call(a),c.floating||(h=a.scroller,h&&h.render&&(r=a.xAxis[0].getExtremes(),h.render(r.min,r.max)))}},legendHide:function(){this.legendSetVisibility(!1)},legendShow:function(){this.legendSetVisibility(!0)},legendToggle:function(){this.legendSetVisibility(this.options.legend.enabled^!0)}}))}(Highcharts),e=function(){function e(e,t,n){var i,a,r=this;this.name=t,this.data=n,i=$(" <button class='btn'> <span class='glyphicon glyphicon-list' /> </button> "),i.click(function(){return r.chart?r.chart.legendToggle():void 0}),this.container=$("<div />",{title:this.name}),a=$("<div />"),i.appendTo(a),this.container.appendTo(a),a.appendTo(e),this.params=$(e).data()}return e.prototype._update=function(){var e,l,s;return this.chart=new Highcharts.Chart({title:{text:this.name,x:-20},xAxis:{title:{text:"Time"},type:"datetime"},yAxis:{title:{text:"Value"},plotLines:[{value:0,width:1,color:"#808080"}]},tooltip:{crosshairs:!0},chart:{type:(e=this.name,o.call(a,e)>=0?"area":"spline"),zoomType:"xy",renderTo:$(this.container)[0]},plotOptions:(l=this.name,o.call(a,l)>=0?r:n),colors:(s=this.name,o.call(a,s)>=0?i:t),legend:{layout:"vertical",align:"center",verticalAlign:"bottom",borderWidth:0},series:this.data}),this.chart.legendHide()},e}(),$(document).ready(function(){return $(".tank-charts").each(function(){var t,n,i,a,r,o,l,s;l=document.tank_metrics.overall,s=[];for(a in l)n=l[a],t=function(){var e;e=[];for(i in n)o=n[i],e.push({name:i,data:function(){var e,t,n;for(n=[],e=0,t=o.length;t>e;e++)r=o[e],n.push([1e3*r[0],r[1]]);return n}()});return e}().sort(function(e,t){return"quantiles"===a?parseFloat(e.name)<=parseFloat(t.name)?1:-1:e.name>=t.name?1:-1}),s.push(new e(this,a,t)._update());return s}),$(".monitoring-charts").each(function(){var t,n,i,a,r,o,l,s,d,c,h;c=document.tank_metrics.monitoring,h=[];for(a in c)r=c[a],t=$('<div class="panel panel-default">\n <div class="panel-heading">\n <h3>Metrics for '+a+'</h3>\n </div>\n <div class="panel-body charts-container" />\n</div>'),t.appendTo(this),h.push(function(){var a;a=[];for(l in r)i=r[l],n=function(){var e;e=[];for(o in i)d=i[o],e.push({name:o,data:function(){var e,t,n;for(n=[],e=0,t=d.length;t>e;e++)s=d[e],n.push([1e3*s[0],s[1]]);return n}()});return e}().sort(function(e,t){return"quantiles"===l?parseFloat(e.name)<=parseFloat(t.name)?1:-1:e.name>=t.name?1:-1}),a.push(new e(t.find(".charts-container"),l,n)._update());return a}());return h})})}).call(this);
(function(){var n,e,t,a,i,r,o=[].indexOf||function(n){for(var e=0,t=this.length;t>e;e++)if(e in this&&this[e]===n)return e;return-1};e=["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a","#f0f08d","#b15928"],a=["#49006a","#7a0177","#ae017e","#dd3497","#f768a1","#fa9fb5","#fcc5c0","#fde0dd","#fff7f3","#ffffff"],i=["quantiles"],t={spline:{lineWidth:2,states:{hover:{lineWidth:4}},marker:{enabled:!1}}},r={area:{lineWidth:0,stacking:"normal",marker:{enabled:!1}}},function(n,e){var t,a;n&&(t=n.Chart.prototype,a=n.Legend.prototype,n.extend(t,{legendSetVisibility:function(n){var i,r,o,s,l,d,c,h;if(i=this,o=i.legend,d=void 0,s=void 0,l=void 0,c=i.options.legend,h=void 0,r=void 0,c.enabled!==n){if(c.enabled=n,!n){if(a.destroy.call(o),d=o.allItems)for(s=0,l=d.length;l>s;)d[s].legendItem=e,++s;o.group={}}t.render.call(i),c.floating||(h=i.scroller,h&&h.render&&(r=i.xAxis[0].getExtremes(),h.render(r.min,r.max)))}},legendHide:function(){this.legendSetVisibility(!1)},legendShow:function(){this.legendSetVisibility(!0)},legendToggle:function(){this.legendSetVisibility(this.options.legend.enabled^!0)}}))}(Highcharts),n=function(){function n(n,e,t){var a,i,r=this;this.name=e,this.data=t,a=$(" <button class='btn'> <span class='glyphicon glyphicon-list' /> </button> "),a.click(function(){return r.chart?r.chart.legendToggle():void 0}),this.container=$("<div />",{title:this.name}),i=$("<div />"),a.appendTo(i),this.container.appendTo(i),i.appendTo(n),this.params=$(n).data()}return n.prototype._update=function(){var n,s,l;return this.chart=new Highcharts.Chart({title:{text:this.name,x:-20},xAxis:{title:{text:"Time"},type:"datetime"},yAxis:{title:{text:"Value"},plotLines:[{value:0,width:1,color:"#808080"}]},tooltip:{crosshairs:!0},chart:{type:(n=this.name,o.call(i,n)>=0?"area":"spline"),zoomType:"xy",renderTo:$(this.container)[0]},plotOptions:(s=this.name,o.call(i,s)>=0?r:t),colors:(l=this.name,o.call(i,l)>=0?a:e),legend:{layout:"horizontal",align:"center",verticalAlign:"bottom",borderWidth:0},series:this.data})},n}(),$(document).ready(function(){return $(".tank-charts").each(function(){var e,t,a,i,r,o,s,l,d,c,h,f;a=$('<div class="panel panel-default">\n <div class="panel-heading">\n <h3>Overall tank metrics</h3>\n </div>\n <div class="panel-body charts-container" />\n</div>'),a.appendTo(this),c=document.tank_metrics.overall;for(s in c)r=c[s],i=function(){var n;n=[];for(o in r)d=r[o],n.push({name:o,data:function(){var n,e,t;for(t=[],n=0,e=d.length;e>n;n++)l=d[n],t.push([1e3*l[0],l[1]]);return t}()});return n}().sort(function(n,e){return"quantiles"===s?parseFloat(n.name)<=parseFloat(e.name)?1:-1:n.name>=e.name?1:-1}),new n(a.find(".charts-container"),s,i)._update();h=document.tank_metrics.cases,f=[];for(t in h)e=h[t],a=$('<div class="panel panel-default">\n <div class="panel-heading">\n <h3>Metrics for \''+t+'\' case</h3>\n </div>\n <div class="panel-body charts-container" />\n</div>'),a.appendTo(this),f.push(function(){var t;t=[];for(s in e)r=e[s],i=function(){var n;n=[];for(o in r)d=r[o],n.push({name:o,data:function(){var n,e,t;for(t=[],n=0,e=d.length;e>n;n++)l=d[n],t.push([1e3*l[0],l[1]]);return t}()});return n}().sort(function(n,e){return"quantiles"===s?parseFloat(n.name)<=parseFloat(e.name)?1:-1:n.name>=e.name?1:-1}),t.push(new n(a.find(".charts-container"),s,i)._update());return t}());return f}),$(".monitoring-charts").each(function(){var e,t,a,i,r,o,s,l,d,c,h;c=document.tank_metrics.monitoring,h=[];for(i in c)r=c[i],e=$('<div class="panel panel-default">\n <div class="panel-heading">\n <h3>Metrics for '+i+'</h3>\n </div>\n <div class="panel-body charts-container" />\n</div>'),e.appendTo(this),h.push(function(){var i;i=[];for(s in r)a=r[s],t=function(){var n;n=[];for(o in a)d=a[o],n.push({name:o,data:function(){var n,e,t;for(t=[],n=0,e=d.length;e>n;n++)l=d[n],t.push([1e3*l[0],l[1]]);return t}()});return n}().sort(function(n,e){return"quantiles"===s?parseFloat(n.name)<=parseFloat(e.name)?1:-1:n.name>=e.name?1:-1}),i.push(new n(e.find(".charts-container"),s,t)._update());return i}());return h})})}).call(this);
</script>
<script type="text/javascript">
document.tank_metrics = $metrics