Handling multiple data scenario

JIRA: STORPERF-163 Change-Id: Id86774df42461088c7773d36ad5db6c15d2c9585 Signed-off-by: saksham115 <saksham.agrawal@research.iiit.ac.in>
author: saksham115 <saksham.agrawal@research.iiit.ac.in> 2017-08-28 17:37:32 +0530
committer: saksham115 <saksham.agrawal@research.iiit.ac.in> 2017-08-28 17:40:27 +0530
commit: 3bd890facc1546fcc1dea2e372937675236af4e8 (patch)
tree: 067b78b0c7fc52ea53beac802618967422d4a0bb
parent: 383d814f0d5d4db55c6f4c621fa346ceab580a3f (diff)
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">&times;</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
author	saksham115 <saksham.agrawal@research.iiit.ac.in>	2017-08-28 17:37:32 +0530
committer	saksham115 <saksham.agrawal@research.iiit.ac.in>	2017-08-28 17:40:27 +0530
commit	3bd890facc1546fcc1dea2e372937675236af4e8 (patch)
tree	067b78b0c7fc52ea53beac802618967422d4a0bb
parent	383d814f0d5d4db55c6f4c621fa346ceab580a3f (diff)