mirror of
https://github.com/valitydev/yandex-tank.git
synced 2024-11-07 18:58:52 +00:00
23 lines
5.1 KiB
Smarty
23 lines
5.1 KiB
Smarty
<html>
|
|
<head>
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
|
<script src="http://code.highcharts.com/highcharts.js"></script>
|
|
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
|
|
<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,n,t,a,i;t={spline:["#2f7ed8","#0d233a","#8bbc21","#910000","#1aadce","#492970","#f28f43","#77a1e5","#c42525","#a6c96a"],area:["#49006a","#7a0177","#ae017e","#dd3497","#f768a1","#fa9fb5","#fcc5c0","#fde0dd","#fff7f3","#ffffff"],stacked:["#49006a","#7a0177","#ae017e","#dd3497","#f768a1","#fa9fb5","#fcc5c0","#fde0dd","#fff7f3","#ffffff"]},i={area:{area:{lineWidth:0,marker:{enabled:!1}}},stacked:{area:{lineWidth:0,stacking:"normal",marker:{enabled:!1}}},spline:{spline:{lineWidth:2,states:{hover:{lineWidth:4}},marker:{enabled:!1}}}},a=function(e){return"stacked"===e?"area":e},n={CPU:"stacked",http_codes:"stacked",net_codes:"stacked",Memory:"stacked",avg:"stacked",quantiles:"area"},function(e,n){var t,a;e&&(t=e.Chart.prototype,a=e.Legend.prototype,e.extend(t,{legendSetVisibility:function(e){var i,r,s,o,d,l,c,f;if(i=this,s=i.legend,l=void 0,o=void 0,d=void 0,c=i.options.legend,f=void 0,r=void 0,c.enabled!==e){if(c.enabled=e,!e){if(a.destroy.call(s),l=s.allItems)for(o=0,d=l.length;d>o;)l[o].legendItem=n,++o;s.group={}}t.render.call(i),c.floating||(f=i.scroller,f&&f.render&&(r=i.xAxis[0].getExtremes(),f.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,n,t){var a,i,r=this;this.name=n,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(e),this.params=$(e).data()}return e.prototype._update=function(){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:this.name in n?a(n[this.name]):"spline",zoomType:"xy",renderTo:$(this.container)[0]},plotOptions:this.name in n?i[n[this.name]]:i.spline,colors:this.name in n?t[n[this.name]]:t.spline,legend:{layout:"horizontal",align:"center",verticalAlign:"bottom",borderWidth:0},series:this.data})},e}(),$(document).ready(function(){return $(".tank-charts").each(function(){var n,t,a,i,r,s,o,d,l,c,f,h;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(o in c)r=c[o],i=function(){var e;e=[];for(s in r)l=r[s],e.push({name:s,data:function(){var e,n,t;for(t=[],e=0,n=l.length;n>e;e++)d=l[e],t.push([1e3*d[0],d[1]]);return t}()});return e}().sort(function(e,n){return"quantiles"===o?parseFloat(e.name)<=parseFloat(n.name)?1:-1:e.name>=n.name?1:-1}),new e(a.find(".charts-container"),o,i)._update();f=document.tank_metrics.cases,h=[];for(t in f)n=f[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),h.push(function(){var t;t=[];for(o in n)r=n[o],i=function(){var e;e=[];for(s in r)l=r[s],e.push({name:s,data:function(){var e,n,t;for(t=[],e=0,n=l.length;n>e;e++)d=l[e],t.push([1e3*d[0],d[1]]);return t}()});return e}().sort(function(e,n){return"quantiles"===o?parseFloat(e.name)<=parseFloat(n.name)?1:-1:e.name>=n.name?1:-1}),t.push(new e(a.find(".charts-container"),o,i)._update());return t}());return h}),$(".monitoring-charts").each(function(){var n,t,a,i,r,s,o,d,l,c,f;c=document.tank_metrics.monitoring,f=[];for(i in c)r=c[i],n=$('<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>'),n.appendTo(this),f.push(function(){var i;i=[];for(o in r)a=r[o],t=function(){var e;e=[];for(s in a)l=a[s],e.push({name:s,data:function(){var e,n,t;for(t=[],e=0,n=l.length;n>e;e++)d=l[e],t.push([1e3*d[0],d[1]]);return t}()});return e}().sort(function(e,n){return"quantiles"===o?parseFloat(e.name)<=parseFloat(n.name)?1:-1:e.name>=n.name?1:-1}),i.push(new e(n.find(".charts-container"),o,t)._update());return i}());return f})})}).call(this);
|
|
</script>
|
|
<script type="text/javascript">
|
|
document.tank_metrics = $metrics
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h2> Tank metrics </h2>
|
|
<div class="tank-charts"> </div>
|
|
<h2> Monitoring metrics </h2>
|
|
<div class="monitoring-charts"> </div>
|
|
</div>
|
|
<body>
|
|
<html> |