diff options
| -rw-r--r-- | docker/storperf-reporting/src/app.py | 26 | ||||
| -rw-r--r-- | docker/storperf-reporting/src/templates/plot_multi_data.html | 279 |
2 files changed, 297 insertions, 8 deletions
diff --git a/docker/storperf-reporting/src/app.py b/docker/storperf-reporting/src/app.py index 330edf9..39ea259 100644 --- a/docker/storperf-reporting/src/app.py +++ b/docker/storperf-reporting/src/app.py @@ -19,15 +19,20 @@ app.secret_key = 'storperf_graphing_module' def get_data(data): metrics = {} report_data = {} - temp = data.get("results") or data.get("report") + temp = data.get("results") or data.get("report") or data.get("details") if type(temp) is list: - details = temp[0].get('details') - metrics = details.get('metrics') - report_data = details.get('report_data') + length = len(temp) + if length == 1: + details = temp[0].get('details') + metrics = details.get('metrics') + report_data = details.get('report_data') + return "single", metrics, report_data + else: + return "multi", temp else: metrics = temp.get('metrics') report_data = temp.get('report_data') - return metrics, report_data + return "single", metrics, report_data @app.route('/reporting/success/') @@ -39,9 +44,14 @@ def success(): else: data = open("./static/testdata/" + URL).read() data = json.loads(data) - metrics, report_data = get_data(data) - return render_template('plot_tables.html', - metrics=metrics, report_data=report_data) + response = get_data(data) + if response[0] == "single": + metrics, report_data = response[1], response[2] + return render_template('plot_tables.html', + metrics=metrics, report_data=report_data) + else: + return render_template('plot_multi_data.html', + results=response[1]) except Exception as e: session['server_error'] = e.message + ' ' + repr(e.args) return redirect(url_for('file_not_found')) diff --git a/docker/storperf-reporting/src/templates/plot_multi_data.html b/docker/storperf-reporting/src/templates/plot_multi_data.html new file mode 100644 index 0000000..2edae9e --- /dev/null +++ b/docker/storperf-reporting/src/templates/plot_multi_data.html @@ -0,0 +1,279 @@ +<!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8" /> + <title>Chart | Storperf</title> + <link rel="stylesheet" href="/reporting/css/bootstrap.min.css"> + <script src="/reporting/js/jquery-2.1.3.min.js"></script> + <script src="/reporting/js/bootstrap.min.js"></script> + <script src="/reporting/js/jquery.bootpag.min.js"></script> + <script src="/reporting/js/plotly-latest.min.js"></script> + <script src="/reporting/js/Chart.min.js"></script> + <style> +/* The Modal (background) */ +.modal { + display: none; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 1; /* Sit on top */ + padding-top: 100px; /* Location of the box */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + overflow: auto; /* Enable scroll if needed */ + background-color: rgb(0,0,0); /* Fallback color */ + background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ +} + +/* Modal Content */ +.modal-content { + background-color: #fefefe; + margin: auto; + padding: 20px; + border: 1px solid #888; + width: 80%; +} + +/* The Close Button */ +.close { + color: #aaaaaa; + float: right; + font-size: 28px; + font-weight: bold; +} + +.close:hover, +.close:focus { + color: #000; + text-decoration: none; + cursor: pointer; +} +.main { + border: 1px; +} +li { + font-size: 14px; +} +ul { + margin-left: 50px; +} +</style> +</head> + +<body> + <div class="container"> + {% include 'header.html' %} + <div id="content"><strong>Loading...</strong> + </div> + <div id="myModal" class="modal"> + + <!-- Modal content --> + <div class="modal-content"> + <span class="close" id="close">×</span> + <div id="modal-text"></div> + </div> + +</div> + <center> + <div id="page-selection"></div> + </center> + </div> + <script> + results = {{ results | tojson | safe }}; + function init(){ + page = []; + report_data = results[0]["details"]["report_data"]; + build_tag = []; + 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++ ){ + build_tag.push(results[i]["build_tag"]); + text += "<div class='row well' id='row-" + build_tag[i] + "'>"; + text += "<h4> ID : " + results[i]["_id"] + "</h4>"; + text += "<h4> Start Date : " + results[i]["start_date"] + "</h4>"; + 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' id='para-"+ build_tag[i] + + "' onclick=add_info('" + build_tag[i] + "')> Click here to view details </button>"; + text += "</div>"; + } + $("#content").html(text); + } + function add_info(build_tag){ + report_data = {}; + keys = []; + var i = 0; + for ( i = 0; i < results.length ; i++ ){ + if( results[i]["build_tag"] == build_tag ){ + report_data = results[i]["details"]["report_data"]; + break; + } + } + for (var k in report_data){ + keys.push(k); + } + text = ""; + text += "<div class='row well' id='row-" + build_tag[i] + "'>"; + text += "<h4> ID : " + results[i]["_id"] + "</h4>"; + text += "<h4> Start Date : " + results[i]["start_date"] + "</h4>"; + 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 += "</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); + } + function add_test(key){ + if(document.getElementById("test-" + key) == null){ + tests = []; + for(var test in report_data[key]) tests.push(test); + text = "<div class='col-md-12' id = 'test-" + key + "'><ul class='list-group'>"; + for(var i = 0; i < tests.length; i++ ){ + text += "<li class='list-group-item' onclick=add_data('"+ key +"','" + tests[i] + "') id='li-" + + key + "-" + tests[i] + "'>" + tests[i] + "</li>" + } + text += "<li class='list-group-item' onclick=delete_test('" + key + "')> close </li>"; + text += "</ul></div>"; + var div = document.getElementById('row-' + key); + div.innerHTML += text; + } + } + function delete_test(key){ + document.getElementById("test-" + key).remove(); + } + function add_data(key,test){ + text = "<ul id='list-" + key + "-" + test + "'>"; + if(document.getElementById('list-' + key + '-' + test ) == null){ + for( item in report_data[key][test] ){ + var state = report_data[key][test][item]["steady_state"]; + text += "<li onclick=create_modal('" + key + "','" + test + "','" + item + "') id='" + + key + "-" + test + "-" + item + "'>" + item + " (steady state: " + state +")</li>"; + } + text += "</ul>" + var div = document.getElementById("li-" + key + "-" + test); + div.innerHTML += text; + } + } + function create_modal(key,test,item){ + var modal = document.getElementById('myModal'); + var modal_div = document.getElementById('modal-text'); + modal_div.innerHTML += "<div id='graph'></div><br><div id='report'></div>"; + data = report_data[key][test][item]; + var x = []; + var y = []; + 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 len = data["series"].length; + for(var i = 0 ; i < len ; i++){ + x[i] = data["series"][i][0]; + y[i] = data["series"][i][1]; + } + var trace1 = { + x: x, + y: y, + name: name, + type: 'scatter' + }; + var layout = { + xaxis: { + title: 'Round' + }, + yaxis: { + title: name + } + }; + // Creating average plot in var trace2 + var average_y = []; + for(var i = 0; i < len ;i++ ){ + average_y.push(average) + } + var trace2 = { + x: x, + y: average_y, + name: 'Average', + type: 'scatter' + }; + // Creating average plot in var trace3 + var average_plus_y = []; + for(var i = 0; i < len ;i++ ){ + average_plus_y.push(1.1*average) + } + var trace3 = { + x: x, + y: average_plus_y, + name: '110%*Average', + type: 'scatter' + }; + // Creating average plot in var trace4 + var average_minus_y = []; + for(var i = 0; i < len ;i++ ){ + average_minus_y.push(0.9*average) + } + var trace4 = { + x: x, + y: average_minus_y, + name: '90%*Average', + type: 'scatter' + }; + // Creating slope plot in var trace5 + var slope_y = []; + var slope_mid = parseInt(len/2); + // Init slope_y with average + for(var i = 0; i < len; i++){ + slope_y.push(average); + } + // Creating the slope plot + var i = slope_mid - 1; + var count = data["slope"]; + while(i >= 0){ + slope_y[i] -= count; + count += data["slope"]; + i--; + } + var i = slope_mid + 1; + var count = data["slope"]; + while(i < len){ + slope_y[i] += count; + count += data["slope"]; + i++; + } + var trace5 = { + x: x, + y: slope_y, + name: 'Slope', + type: 'scatter' + }; + var plot_data = [trace1,trace2,trace3,trace4,trace5]; + Plotly.newPlot('graph',plot_data,layout); + modal.style.display = "block"; + table = "<table class='table table-bordered'>"; + table += "<thead><tr>Steady State Determination Data</tr></thead>"; + table += "<tbody>"; + table += "<tr><td>Steady State: "+ data["steady_state"] +"</td><td> Average " + name + ": " + average + "</td></tr>"; + table += "<tr><td> Allowed Maximum Data Excursion: " + 0.2*average + + "</td><td> Measured Maximum Data Excursion: " + data["range"] + "</td></tr>"; + table += "<tr><td> Allowed Maximum Slope Excursion: " + 0.1*average + + "</td><td> Measured Maximum Slope Excursion: " + data["slope"] + "</td></tr>"; + table += "</tbody></table>"; + document.getElementById("report").innerHTML = table; + + } + init(); + document.getElementById("close").onclick = function(){ + document.getElementById('modal-text').innerHTML = ""; + document.getElementById("myModal").style.display = "none"; + } + </script> +</body> + +</html>
\ No newline at end of file |