diff options
| author |   saksham115 <saksham.agrawal@research.iiit.ac.in> | 2017-07-06 19:46:28 +0530 |
|---|---|---|
| committer | saksham115 <saksham.agrawal@research.iiit.ac.in> | 2017-07-06 19:48:09 +0530 |
| commit | 99dd390e16ec256232def1c09b0ea23a570807d0 (patch) | |
| tree | 66d0d377ede38f3bbfbafaf7a48a77f91771097b /reporting/docker/src/templates | |
| parent | 1d026b94b60937e4bfaad201d8104267efc3fe04 (diff) | |
Demo Code
Enter the URL of the json file available at testresults.opnfv.org.
It presents the data in the tabular and plots the chart for the series.
Data validation and some UI changes are yet to be made
Change-Id: I90ceed4e8a3240face479539f127d5c922d19d0c
JIRA: STORPERF-162
Signed-off-by: saksham115 <saksham.agrawal@research.iiit.ac.in>
Diffstat (limited to 'reporting/docker/src/templates')
| -rw-r--r-- | reporting/docker/src/templates/index.html | 31 | ||||
| -rw-r--r-- | reporting/docker/src/templates/plot_tables.html | 130 |
2 files changed, 161 insertions, 0 deletions
diff --git a/reporting/docker/src/templates/index.html b/reporting/docker/src/templates/index.html new file mode 100644 index 0000000..c302299 --- /dev/null +++ b/reporting/docker/src/templates/index.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + +<head> + <title>Graphing Module | Storperf</title> + <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}"> + <script src="{{ url_for('static', filename='js/jquery-2.1.3.min.js') }}"></script> + <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script> + <script src="{{ url_for('static', filename='js/jquery.bootpag.min.js') }}"></script> +</head> + +<body> + <div class="container"> + <div class="content"> + <div class="row center"> + <br> + <form action="{{ url_for('url') }}" method="post"> + <div class="form-group"> + <label for="url">Enter URL:</label> + <br> + <input type="text" name="url" id="url" class="form-control"> + <br> + <button type="submit" class="btn btn-default">Submit</button> + </div> + </form> + </div> + </div> + </div> +</body> + +</html>
\ No newline at end of file diff --git a/reporting/docker/src/templates/plot_tables.html b/reporting/docker/src/templates/plot_tables.html new file mode 100644 index 0000000..4d6c887 --- /dev/null +++ b/reporting/docker/src/templates/plot_tables.html @@ -0,0 +1,130 @@ +<!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8" /> + <title>Chart | Storperf</title> + <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}"> + <script src="{{ url_for('static', filename='js/jquery-2.1.3.min.js') }}"></script> + <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script> + <script src="{{ url_for('static', filename='js/jquery.bootpag.min.js') }}"></script> + <script src="{{ url_for('static', filename='js/plotly-latest.min.js') }}"></script> + <script src="{{ url_for('static', filename='js/Chart.min.js') }}"></script> + <style> + .table td { + text-align: left; + } + </style> +</head> + +<body> + <div class="container"> + <div id="content"><strong>Loading...</strong> + </div> + <center> + <div id="page-selection"></div> + </center> + </div> + <script> + data = {{ data | tojson | safe }}; + page = []; + results = data.results; + if (results == undefined) { + details = data.details; + } else { + details = results[0].details; + } + metrics = details.metrics; + report_data = details.report_data; + for (var key in report_data) { + for (var test in report_data[key]) { + var text = ""; + var series = []; + var average; + for (var status in report_data[key][test]) { + text = '<div class="row text-center lead">'; + text += "<h3>" + key + "</h3>" + "<br>"; + text += "<strong><u>" + test + "</strong>" + "<br>"; + text += "<strong>" + status + "</strong>" + "<br>"; + text += "<table class=' table table-striped'>"; + for (var values in report_data[key][test][status]) { + text += "<tr>"; + value_data = report_data[key][test][status][values]; + if (values == "average") { + average = value_data; + text += "<td width='50%'>" + values + "</td><td width='50%'>" + value_data + "</td>"; + } else if (values == "series") { + text += "<td width='50%'>" + values + "</td><td width='50%'> "; + 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 += "</td>"; + } else { + text += "<td width='50%'>" + values + "</td><td width='50%'>" + value_data + "</td>"; + } + text += "</tr>"; + } + page.push([text, series, average]); + } + } + } + + 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); + } + for (var i = 0; i < array.length; i++) { + final_array = final_array.concat(array[i][1]); + } + var index = num - 1; + var graphID = "graph" + index; + text += "<tr><td>Graph</td><td><div id='" + graphID + "' style='display: block; height:400px; width 400px;'></div></td></tr>"; + text += "</table></div>"; + $("#content").html(text); + var plot = { + x: graph_label, + y: final_array, + type: "lines", + name: "Plot" + }; + 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 avg_minus = { + x: graph_label, + y: Array(array.length).fill(0.8 * average), + type: "lines", + name: "avg_minus", + line: { + dash: "dashdot", + width: 2 + } + }; + Plotly.newPlot(graphID, [plot, avg_plus, avg_minus]); + } + content_display(1); + $('#page-selection').bootpag({ + total: page.length + }).on("page", function(event, num) { + content_display(num); + }); + </script> +</body> + +</html>
\ No newline at end of file |