From fb1a5399bc99aa07f2a905a31e74cbc33708cd97 Mon Sep 17 00:00:00 2001 From: saksham115 Date: Fri, 25 Aug 2017 02:23:16 +0530 Subject: Changes in the UI JIRA: STORPERF-194 Change-Id: If90a69c5cbfb859d6941047121fac86d9e422eca Signed-off-by: saksham115 --- .../src/templates/plot_tables.html | 274 +++++++++++++-------- 1 file changed, 168 insertions(+), 106 deletions(-) diff --git a/docker/storperf-reporting/src/templates/plot_tables.html b/docker/storperf-reporting/src/templates/plot_tables.html index d6eed8e..344f08b 100644 --- a/docker/storperf-reporting/src/templates/plot_tables.html +++ b/docker/storperf-reporting/src/templates/plot_tables.html @@ -11,10 +11,45 @@ +/* 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; +} + @@ -22,6 +57,15 @@ {% include 'header.html' %}
Loading...
+
@@ -30,118 +74,136 @@ page = []; metrics = {{ metrics | tojson | safe }}; report_data = {{ report_data | tojson | safe }}; - console.log(metrics); - console.log(report_data); - for (var key in report_data) { - console.log(key); - for (var test in report_data[key]) { - var text = ""; - var series = []; - var average; - for (var status in report_data[key][test]) { - text = '
'; - text += "

" + key + "

" + "
"; - text += "" + test + "" + "
"; - text += "" + status + "" + "
"; - text += ""; - for (var values in report_data[key][test][status]) { - text += ""; - value_data = report_data[key][test][status][values]; - if (values == "average") { - average = value_data; - text += ""; - } else if (values == "series") { - text += ""; - } else { - text += ""; - } - text += ""; - } - page.push([text, series, average]); + keys = []; + for (var k in report_data){ + keys.push(k); + } + //console.log(keys); + text = ""; + for (var i = 0; i < keys.length; i++ ){ + text += "
"; + text += "

" + keys[i] + "

"; + text += "
"; + } + $("#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 = "
    "; + for(var i = 0; i < tests.length; i++ ){ + text += "
  • " + tests[i] + "
    • " } + text += "
  • close
    • "; + text += "
"; + var div = document.getElementById('row-' + key); + div.innerHTML += text; } } - console.log(page); - - function content_display(num) { - var text = page[num - 1][0]; - var array = page[num - 1][1]; - var average = page[num - 1][2]; - var final_array = []; - var graph_label = [] - for (var i = 0; i < array.length; i++) { - graph_label = graph_label.concat(i + 1); + function delete_test(key){ + document.getElementById("test-" + key).remove(); + } + function add_data(key,test){ + text = "
    "; + if(document.getElementById('list-' + key + '-' + test ) == null){ + for( item in report_data[key][test] ){ + var state = report_data[key][test][item]["steady_state"]; + text += "
  • " + item + " (steady state: " + state +")
    • "; + } + text += "
" + var div = document.getElementById("li-" + key + "-" + test); + div.innerHTML += text; } - for (var i = 0; i < array.length; i++) { - final_array = final_array.concat(array[i][1]); + } + function create_modal(key,test,item){ + var modal = document.getElementById('myModal'); + var modal_div = document.getElementById('modal-text'); + modal_div.innerHTML += "

"; + 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 index = num - 1; - var graphID = "graph" + index; - text += ""; - text += "
" + values + "" + value_data + "" + values + " "; - var len = value_data.length; - series = value_data; - for (var i = 0; i < len; i++) { - text += "[" + value_data[i] + "]"; - if (i != len - 1) - text += ","; - } - text += "" + values + "" + value_data + "
Graph
"; - $("#content").html(text); - var plot = { - x: graph_label, - y: final_array, - type: "lines", - name: "Plot" + var trace1 = { + x: x, + y: y, + name: name, + type: 'scatter' }; - var avg_plus = { - x: graph_label, - y: Array(array.length).fill(1.2 * average), - type: "lines", - name: "avg_plus", - line: { - dash: "dashdot", - width: 2 + var layout = { + xaxis: { + title: 'Round' + }, + yaxis: { + title: name } }; - var avg_minus = { - x: graph_label, - y: Array(array.length).fill(0.8 * average), - type: "lines", - name: "avg_minus", - line: { - dash: "dashdot", - width: 2 - } + // 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' }; - var layout = { - xaxis: { - title: 'ROUND', - titlefont: { - family: 'Arial, sans-serif', - size: 18, - color: 'lightgrey' - }, - showticklabels: true, - }, - yaxis: { - title: 'IOPS', - titlefont: { - family: 'Arial, sans-serif', - size: 18, - color: 'lightgrey' - }, - showticklabels: true, - } -}; - Plotly.newPlot(graphID, [plot, avg_plus, avg_minus],layout); + // 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' + }; + var plot_data = [trace1,trace2,trace3,trace4]; + Plotly.newPlot('graph',plot_data,layout); + modal.style.display = "block"; + table = ""; + table += "Steady State Determination Data"; + table += ""; + table += ""; + table += ""; + table += ""; + table += "
Steady State: "+ data["steady_state"] +" Average " + name + ": " + average + "
Allowed Maximum Data Excursion: " + 0.2*average + + " Measured Maximum Data Excursion: " + data["range"] + "
Allowed Maximum Slope Excursion: " + 0.1*average + + " Measured Maximum Data Excursion: " + data["slope"] + "
"; + document.getElementById("report").innerHTML = table; + + } + document.getElementById("close").onclick = function(){ + document.getElementById('modal-text').innerHTML = ""; + document.getElementById("myModal").style.display = "none"; } - content_display(1); - $('#page-selection').bootpag({ - total: page.length - }).on("page", function(event, num) { - content_display(num); - }); -- cgit 1.2.3-korg