summaryrefslogtreecommitdiffstats
path: root/docker/storperf-reporting/src/templates
diff options
context:
space:
mode:
authorsaksham115 <saksham.agrawal@research.iiit.ac.in>2017-09-14 21:55:38 +0530
committerSaksham Agrawal <saksham.agrawal@research.iiit.ac.in>2017-09-19 13:07:19 +0000
commitd2d266292c56ec3e4f87a503cba083e0f79376c7 (patch)
treeaa8080c77039e75141032e99f643a4cb719a48ae /docker/storperf-reporting/src/templates
parente447ee55b2a57979f4a8fb002f1f80d6fae0cbe1 (diff)
Implementing the extension: Display of Steady State Convergence Report - All block sizes
In addition, introducing an intermediary page for single json portal. JIRA: STORPERF-141 Change-Id: I6dd7f43b1f0fd8293c4872e6a7c3ef909f2ddb83 Signed-off-by: saksham115 <saksham.agrawal@research.iiit.ac.in>
Diffstat (limited to 'docker/storperf-reporting/src/templates')
-rw-r--r--docker/storperf-reporting/src/templates/plot_multi_data.html76
-rw-r--r--docker/storperf-reporting/src/templates/plot_tables.html107
2 files changed, 175 insertions, 8 deletions
diff --git a/docker/storperf-reporting/src/templates/plot_multi_data.html b/docker/storperf-reporting/src/templates/plot_multi_data.html
index 4205fd6..a07e3d5 100644
--- a/docker/storperf-reporting/src/templates/plot_multi_data.html
+++ b/docker/storperf-reporting/src/templates/plot_multi_data.html
@@ -83,7 +83,6 @@ ul {
results = {{ results | tojson | safe }};
function init(){
page = [];
- report_data = results[0]["details"]["report_data"];
ids = [];
text = "<a href='/reporting/'><button type='button' class='btn btn-default btn-lg'>Go back</button></a><br><br>";
for ( var i = 0; i < results.length ; i++ ){
@@ -119,6 +118,8 @@ ul {
text += "<h4> Criteria : " + results[i]["criteria"] + "</h4>";
text += "<h4> Build Tag : " + results[i]["build_tag"] + "</h4>";
text += "<button type='button' class='btn btn-default btn-lg' onclick=init()>Go Back</button>";
+ text += "<button type='button' class='btn btn-default btn-lg' onclick=create_block_report() style='float: right;'> Steady State Convergence Report - All Block Sizes </button>";
+ text += "<div class='row' id='block_report'></div>"
text += "</div>";
for (var i = 0; i < keys.length; i++ ){
text += "<div class='row' id='row-"+ keys[i] +"'>";
@@ -268,6 +269,79 @@ ul {
document.getElementById("report").innerHTML = table;
}
+ function create_block_report(){
+ var ele = document.getElementById("block_report");
+ var text = "";
+ text += "<br><ul class='list-group' style='margin: auto;'>"
+ text += "<li class='list-group-item'><h5>Read</h5></li>";
+ text += "<li class='list-group-item' style='text-indent:20px;' onclick=create_block_graph('read','bw')>Bandwidth (KB/s)</li>";
+ text += "<li class='list-group-item' style='text-indent:20px;' onclick=create_block_graph('read','iops')>IOPS</li>";
+ text += "<li class='list-group-item' style='text-indent:20px;' onclick=create_block_graph('read','lat_ns.mean')>Latency (nanoseconds/ns)</li>";
+ text += "<li class='list-group-item'><h5>Write</h5></li>";
+ text += "<li class='list-group-item' style='text-indent:20px;' onclick=create_block_graph('write','bw')>Bandwidth (KB/s)</li>";
+ text += "<li class='list-group-item' style='text-indent:20px;' onclick=create_block_graph('write','iops')>IOPS</li>";
+ text += "<li class='list-group-item' style='text-indent:20px;' onclick=create_block_graph('write','lat_ns.mean')>Latency (nanoseconds/ns)</li>";
+ text += "<li class='list-group-item' onclick=close_block_report()><h5>Close</h5></li>";
+ text += "</ul>";
+ ele.innerHTML = text;
+ }
+ function close_block_report(){
+ document.getElementById("block_report").innerHTML = "";
+ }
+ function create_block_graph(key,test){
+ data = {};
+ for(i in report_data){
+ data[i] = report_data[i][test][key];
+ }
+ var modal = document.getElementById('myModal');
+ var modal_div = document.getElementById('modal-text');
+ modal_div.innerHTML += "<div id='graph'></div><br><div id='report'></div>";
+ var name = "";
+ var average = data["average"];
+ if(test == "bw")
+ name = "Bandwidth (KB/s)";
+ else if(test == "iops")
+ name = "IOPS";
+ else
+ name = "Latency (nanoseconds/ns)";
+ var plot_data = [];
+ for(i in data){
+ var x = [];
+ var y = [];
+ var len = data[i]["series"].length;
+ for(var j = 0 ; j < len ; j++){
+ x[j] = data[i]["series"][j][0];
+ y[j] = data[i]["series"][j][1];
+ }
+ var trace = {
+ x: x,
+ y: y,
+ type: 'scatter',
+ name: i
+ };
+ plot_data.push(trace);
+ }
+ var layout = {
+ autosize: false,
+ xaxis: {
+ title: 'Round'
+ },
+ yaxis: {
+ title: name
+ },
+ margin: {
+ l: 0,
+ r: 0,
+ b: 0,
+ t: 0,
+ pad: 4
+ },
+ width: 500,
+ height: 500
+ };
+ Plotly.newPlot('graph',plot_data,layout);
+ modal.style.display = "block";
+ }
init();
document.getElementById("close").onclick = function(){
document.getElementById('modal-text').innerHTML = "";
diff --git a/docker/storperf-reporting/src/templates/plot_tables.html b/docker/storperf-reporting/src/templates/plot_tables.html
index a0770bf..37af3f6 100644
--- a/docker/storperf-reporting/src/templates/plot_tables.html
+++ b/docker/storperf-reporting/src/templates/plot_tables.html
@@ -74,18 +74,43 @@
page = [];
metrics = {{ metrics | tojson | safe }};
report_data = {{ report_data | tojson | safe }};
+ results = {{ results | tojson | safe }};
+ results = results[0];
keys = [];
for (var k in report_data){
keys.push(k);
}
- //console.log(keys);
- text = "";
- for (var i = 0; i < keys.length; i++ ){
- text += "<div class='row' id='row-"+ keys[i] +"'>";
- text += "<h4 onclick=add_test('" + keys[i] + "')>" + keys[i] + "</h4>";
- text += "</div>";
+ init();
+ function init(){
+ text = "<a href='/reporting/'><button type='button' class='btn btn-default btn-lg'>Go back</button></a><br><br>";
+ text += "<div class='row well'>";
+ text += "<h4> ID : " + results["_id"] + "</h4>";
+ text += "<h4> Start Date : " + results["start_date"] + "</h4>";
+ text += "<h4> Criteria : " + results["criteria"] + "</h4>";
+ text += "<h4> Build Tag : " + results["build_tag"] + "</h4>";
+ text += "<button type='button' class='btn btn-default btn-lg' onclick=add_info()> Click here to view details </button>";
+ text += "</div>";
+ text += "<div id='info'></div>";
+ $("#content").html(text);
+ }
+ function add_info(){
+ text = "<button type='button' class='btn btn-default btn-lg' onclick=init()>Go back</button><br><br>";
+ text += "<div class='row well'>";
+ text += "<h4> ID : " + results["_id"] + "</h4>";
+ text += "<h4> Start Date : " + results["start_date"] + "</h4>";
+ text += "<h4> Criteria : " + results["criteria"] + "</h4>";
+ text += "<h4> Build Tag : " + results["build_tag"] + "</h4>";
+ text += "<button type='button' class='btn btn-default btn-lg' onclick=create_block_report()> Steady State Convergence Report - All Block Sizes </button>";
+ text += "<div class='row' id='block_report'></div>"
+ text += "</div>";
+ text += "<div id='info'></div>";
+ for (var i = 0; i < keys.length; i++ ){
+ text += "<div class='row' id='row-"+ keys[i] +"'>";
+ text += "<h4 onclick=add_test('" + keys[i] + "')>" + keys[i] + "</h4>";
+ text += "</div>";
+ }
+ $("#content").html(text);
}
- $("#content").html(text);
function add_test(key){
if(document.getElementById("test-" + key) == null){
@@ -228,6 +253,74 @@
document.getElementById("report").innerHTML = table;
}
+ function create_block_report(){
+ var ele = document.getElementById("block_report");
+ var text = "";
+ text += "<br><ul class='list-group' style='margin: auto;'>"
+ text += "<li class='list-group-item'><h5>Read</h5></li>";
+ text += "<li class='list-group-item' style='text-indent:20px;' onclick=create_block_graph('read','bw')>Bandwidth (KB/s)</li>";
+ text += "<li class='list-group-item' style='text-indent:20px;' onclick=create_block_graph('read','iops')>IOPS</li>";
+ text += "<li class='list-group-item' style='text-indent:20px;' onclick=create_block_graph('read','lat_ns.mean')>Latency (nanoseconds/ns)</li>";
+ text += "<li class='list-group-item'><h5>Write</h5></li>";
+ text += "<li class='list-group-item' style='text-indent:20px;' onclick=create_block_graph('write','bw')>Bandwidth (KB/s)</li>";
+ text += "<li class='list-group-item' style='text-indent:20px;' onclick=create_block_graph('write','iops')>IOPS</li>";
+ text += "<li class='list-group-item' style='text-indent:20px;' onclick=create_block_graph('write','lat_ns.mean')>Latency (nanoseconds/ns)</li>";
+ text += "<li class='list-group-item' onclick=close_block_report()><h5>Close</h5></li>";
+ text += "</ul>";
+ ele.innerHTML = text;
+ }
+ function close_block_report(){
+ document.getElementById("block_report").innerHTML = "";
+ }
+ function create_block_graph(key,test){
+ data = {};
+ for(i in report_data){
+ if(report_data[i][test] == undefined && test == 'lat_ns.mean')
+ test = 'lat.mean';
+ data[i] = report_data[i][test][key];
+ }
+ var modal = document.getElementById('myModal');
+ var modal_div = document.getElementById('modal-text');
+ modal_div.innerHTML += "<div id='graph'></div><br><div id='report'></div>";
+ var name = "";
+ var average = data["average"];
+ if(test == "bw")
+ name = "Bandwidth (KB/s)";
+ else if(test == "iops")
+ name = "IOPS";
+ else
+ name = "Latency (nanoseconds/ns)";
+ var plot_data = [];
+ for(i in data){
+ var x = [];
+ var y = [];
+ var len = data[i]["series"].length;
+ for(var j = 0 ; j < len ; j++){
+ x[j] = data[i]["series"][j][0];
+ y[j] = data[i]["series"][j][1];
+ }
+ var trace = {
+ x: x,
+ y: y,
+ type: 'scatter',
+ name: i
+ };
+ plot_data.push(trace);
+ }
+ var layout = {
+ autosize: true,
+ xaxis: {
+ title: 'Round'
+ },
+ yaxis: {
+ title: name
+ },
+ height: 500,
+ width: 500,
+ };
+ Plotly.newPlot('graph',plot_data,layout);
+ modal.style.display = "block";
+ }
document.getElementById("close").onclick = function(){
document.getElementById('modal-text').innerHTML = "";
document.getElementById("myModal").style.display = "none";