Skip to content

Commit

Permalink
intel-cloud#5 real-time performance graph
Browse files Browse the repository at this point in the history
  • Loading branch information
liyuanwa committed Feb 5, 2015
1 parent 52aab36 commit a2c4b11
Show file tree
Hide file tree
Showing 9 changed files with 272 additions and 0 deletions.
68 changes: 68 additions & 0 deletions dev/cosbench-controller-web/WEB-INF/freemarker/finalchart.ftl
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<script type="text/javascript">
function custage(){
var d=document.getElementById("cstage").value;
var element = document.getElementById("fchart")
element.style.display ="";
if(d=="close"){
element.style.display ="none";
return;
}
<#list info.stageInfos as sInfo >
var id="${sInfo.id}";
if(id==d){
var i=0;
//bandwidth
var ybandwidth=new Array();
var xvalue=new Array();
var bandwidthname="bandwidth";
var bandwidthsp="KB/S";
var bandwidth="";
//throughput
var ythroughput=new Array();
var throughputname="throughput";
var throughputsp="op/s";
var throughput="";
//restime
var yRestime=new Array();
var avgResTime="";
var avgResTimename="resTime";
var avgResTimesp="ms";
//ratio
var yratio=new Array();
var rationame="ratio";
var ratiosp="%";
var ratio="";
<#list sInfo.snapshots as snapshot>
<#list snapshot.report.allMetrics as mInfo>
// bandwidth
bandwidth="${mInfo.bandwidth}";
bandwidth=bandwidth.replace(/,/gi,'');
ybandwidth.push(Math.round(eval(bandwidth/1024)));
// throughput
throughput="${mInfo.throughput}";
throughput=throughput.replace(/,/gi,'');
ythroughput.push(Math.round(eval(throughput)));
//resTime
avgResTime="${mInfo.avgResTime}";
avgResTime=avgResTime.replace(/,/gi,'');
yRestime.push(Math.round(eval(avgResTime)));
//Succ-Ratio
ratio="${mInfo.ratio}";
ratio=ratio.replace(/,/gi,'');
yratio.push(Math.round(eval(ratio*100)));
//xvalue
xvalue.push(i);
i++;
</#list>
</#list>
forchart(xvalue,ybandwidth,bandwidthname,bandwidthsp,id);
forchart(xvalue,ythroughput,throughputname,throughputsp,id);
forchart(xvalue,yRestime,avgResTimename,avgResTimesp,id);
forchart(xvalue,yratio,rationame,ratiosp,id);
}
</#list>
}
</script>
77 changes: 77 additions & 0 deletions dev/cosbench-controller-web/WEB-INF/freemarker/forchart.ftl
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@

<script type="text/javascript">
function forchart(xvalue,yvalue,name,sp,stagename){
require.config({
paths: {
echarts: 'resources/build/dist'
}
});
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line'
],
function (ec) {
var myChart = ec.init(document.getElementById(name));
option = {
title : {
text: name+' '+'Graph',
subtext: stagename
},
tooltip : {
trigger: 'axis'
},
legend: {
data:[name]
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : xvalue
}
],
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value} '+sp
}
}
],
series : [
{
name:name,
type:'line',
data:yvalue,
markPoint : {
data : [
{type : 'max', name: 'max'},
{type : 'min', name: 'min'}
]
},
markLine : {
data : [
{type : 'average', name: 'average'}
]
}
}
]
};
myChart.setOption(option);
}
);
}
</script>
61 changes: 61 additions & 0 deletions dev/cosbench-controller-web/WEB-INF/freemarker/runningchart.ftl
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
<script type="text/javascript">
//bandwidth
var ybandwidth=new Array();
var i=0;
ybandwidth.push(0);
var xvalue=new Array();
var bandwidthname="bandwidth";
var bandwidthsp="KB/S";
var bandwidth="";
//throughput
var ythroughput=new Array();
ythroughput.push(0);
var throughputname="throughput";
var throughputsp="op/s";
var throughput="";
//restime
var yRestime=new Array();
yRestime.push(0);
var avgResTime="";
var avgResTimename="resTime";
var avgResTimesp="ms";
//ratio
var yratio=new Array();
yratio.push(0);
var rationame="ratio";
var ratiosp="%";
var ratio="";
<#assign sInfo=info.currentStage>
var stagename="${sInfo.id}";
<#list sInfo.snapshots as snapshot>
<#list snapshot.report.allMetrics as mInfo>
// bandwidth
bandwidth="${mInfo.bandwidth}";
bandwidth=bandwidth.replace(/,/gi,'');
ybandwidth.push(Math.round(eval(bandwidth/1024)));
// throughput
throughput="${mInfo.throughput}";
throughput=throughput.replace(/,/gi,'');
ythroughput.push(Math.round(eval(throughput)));
//resTime
avgResTime="${mInfo.avgResTime}";
avgResTime=avgResTime.replace(/,/gi,'');
yRestime.push(Math.round(eval(avgResTime)));
//Succ-Ratio
ratio="${mInfo.ratio}";
ratio=ratio.replace(/,/gi,'');
yratio.push(Math.round(eval(ratio*100)));
//xvalue
var now = new Date();
xvalue.push(i);
i++;
</#list>
</#list>
forchart(xvalue,ybandwidth,bandwidthname,bandwidthsp,stagename);
forchart(xvalue,ythroughput,throughputname,throughputsp,stagename);
forchart(xvalue,yRestime,avgResTimename,avgResTimesp,stagename);
forchart(xvalue,yratio,rationame,ratiosp,stagename);
</script>
30 changes: 30 additions & 0 deletions dev/cosbench-controller-web/WEB-INF/freemarker/workload.ftl
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
<meta http-equiv="refresh" content="10; url=workload.html?id=${info.id}" />
</#if>
<link rel="stylesheet" type="text/css" href="resources/cosbench.css" />
<script type="text/javascript" src="resources/build/dist/echarts.js"></script>
<title>Workload Details</title>
</head>
<body>
Expand Down Expand Up @@ -89,6 +90,24 @@
<h3>Final Result</h3>
<#assign allMetrics = info.report.allMetrics >
<#include "metrics.ftl">
<h4>Performance Graph
<select id="cstage" onchange="custage()">
<option value="close" select="selected"></option>
<#list info.stageInfos as sInfo >
<option value=${sInfo.id}>${sInfo.id}</option>
</#list>
</select>
</h4>
<div id="fchart" style="display:none">
<div style="width:1080px;height:825px;display:block;margin:auto;margin-top:20px;border: solid 1px #ccc;">
<div class="chart" id="throughput"></div>
<div class="chart" id="resTime"></div>
<div class="chart" id="bandwidth" value="bandwidth"></div>
<div class="chart" id="ratio"></div>
<#include "forchart.ftl">
<#include "finalchart.ftl">
</div>
</div>
<#if perfDetails >
<p><a href="workload.html?id=${info.id}">hide peformance details</a></p>
<#else>
Expand All @@ -99,6 +118,17 @@
<#assign snapshot = info.snapshot >
<#assign allMetrics = snapshot.report.allMetrics >
<#include "metrics.ftl">
<h4>Performance Graph</h4>
<div id="graph">
<div style="width:1080px;height:825px;display:block;margin:auto;margin-top:20px;border: solid 1px #ccc;">
<div class="chart" id="throughput"></div>
<div class="chart" id="resTime"></div>
<div class="chart" id="bandwidth" value="bandwidth"></div>
<div class="chart" id="ratio"></div>
<#include "forchart.ftl">
<#include "runningchart.ftl">
</viv>
</div>
<p class="warn">The snapshot was taken at ${snapshot.timestamp?time} with version ${snapshot.version}.</p>
</#if>
<h3>Stages</h3>
Expand Down
8 changes: 8 additions & 0 deletions dev/cosbench-controller-web/WEB-INF/web.xml
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,10 @@
<servlet-name>resource</servlet-name>
<url-pattern>*.css</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>resource</servlet-name>
<url-pattern>*.js</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>resource</servlet-name>
<url-pattern>*.png</url-pattern>
Expand Down Expand Up @@ -101,6 +105,10 @@
<extension>css</extension>
<mime-type>text/css</mime-type>
</mime-mapping>
<mime-mapping>
<extension>js</extension>
<mime-type>text/javascript</mime-type>
</mime-mapping>
<mime-mapping>
<extension>png</extension>
<mime-type>image/png</mime-type>
Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit a2c4b11

Please sign in to comment.