aboutsummaryrefslogtreecommitdiffstats
path: root/yardstick/common
diff options
context:
space:
mode:
authorPatrice Buriez <patrice.buriez@intel.com>2018-12-17 19:22:16 +0100
committerPatrice Buriez <patrice.buriez@intel.com>2018-12-21 19:07:59 +0100
commit855e0532f9a58986fbb95e19ac42e90b53f031b3 (patch)
treea0362a42deaa5275f9cf73deef0375b86744785a /yardstick/common
parent6ab3d996abb23e4cd47dbaa8591577e019a84541 (diff)
Additional rework of NSB report
- Make format_for_jstree expect a list of metric names - Avoid displaying timestamps twice in initial data table - Sort metrics in initial data table - Display testcase name - Fix styling - Make better use of JS and jQuery features - Move event handler to JS file - Avoid adding multiple tbody elements into data table - Adjust unit tests and functional tests accordingly JIRA: YARDSTICK-1367 Topic: report/html_table (12 of 12) Change-Id: I85d853f8e392953cace67e94fa0af2e2492a2b86 Signed-off-by: Patrice Buriez <patrice.buriez@intel.com>
Diffstat (limited to 'yardstick/common')
-rw-r--r--yardstick/common/nsb_report.css34
-rw-r--r--yardstick/common/nsb_report.html.j255
-rw-r--r--yardstick/common/nsb_report.js90
3 files changed, 76 insertions, 103 deletions
diff --git a/yardstick/common/nsb_report.css b/yardstick/common/nsb_report.css
index 235321441..667f865a5 100644
--- a/yardstick/common/nsb_report.css
+++ b/yardstick/common/nsb_report.css
@@ -9,38 +9,26 @@
******************************************************************************/
body {
- font-size: 16pt;
-}
-
-table {
- overflow-y: scroll;
- height: 360px;
- display: block;
- width: 100%;
+ font-family: Frutiger, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
header {
- font-family: Frutiger, "Helvetica Neue", Helvetica, Arial, sans-serif;
- clear: left;
+ padding-top: 5px;
text-align: center;
-}
-
-h1 {
- font-size: 20pt;
font-weight: bold;
- height: 20px;
- margin: 0px 0px;
}
-h4 {
- font-size: 13pt;
- height: 1px;
- margin-bottom: 0px;
+#tblMetrics {
+ overflow-y: scroll;
+ height: 360px;
+ display: block;
}
-.control-pane {
- font-size: 10pt;
+#cnvGraph {
+ width: 100%;
+ height: 500px;
}
-.data-pane {
+#divTree {
+ font-size: 10pt;
}
diff --git a/yardstick/common/nsb_report.html.j2 b/yardstick/common/nsb_report.html.j2
index 6523fd16f..aa90253f8 100644
--- a/yardstick/common/nsb_report.html.j2
+++ b/yardstick/common/nsb_report.html.j2
@@ -31,56 +31,43 @@
<body>
<div class="container-fluid">
<div class="row">
- <header class="jumbotron">
- <h1>Yardstick User Interface</h1>
- <h4>Report of {{task_id}} Generated</h4>
+ <header>
+ Testcase: {{report_meta.testcase}}<br>
+ Task-ID: {{report_meta.task_id}}<br>
</header>
</div>
<div class="row">
- <div class="col-md-2 control-pane">
- <div id="data_selector"></div>
+ <div class="col-md-2">
+ <div id="divTree"></div>
</div>
- <div class="col-md-10 data-pane">
- <canvas id="cnvGraph" style="width: 100%; height: 500px"></canvas>
+ <div class="col-md-10">
+ <canvas id="cnvGraph"></canvas>
</div>
</div>
<div class="row">
<div class="col-md-12 table-responsive">
- <table class="table table-hover"></table>
+ <table id="tblMetrics" class="table table-condensed table-hover"></table>
</div>
</div>
</div>
<script>
- var arr, jstree_data, timestamps;
- arr = {{table|safe}};
- timestamps = {{Timestamps|safe}};
- jstree_data = {{jstree_nodes|safe}};
+ // Injected metrics, timestamps, keys and hierarchy
+ var report_data = {{report_data|safe}};
+ var report_time = {{report_time|safe}};
+ var report_keys = {{report_keys|safe}};
+ var report_tree = {{report_tree|safe}};
+ // Wait for DOM to be loaded
$(function() {
- create_table(arr, timestamps);
- create_tree(jstree_data);
- var objGraph = create_graph($('#cnvGraph'), timestamps);
+ var tblMetrics = $('#tblMetrics');
+ var cnvGraph = $('#cnvGraph');
+ var divTree = $('#divTree');
- $('#data_selector').on('check_node.jstree uncheck_node.jstree', function(e, data) {
- var selected_datasets = [];
- var new_arr = {};
- deleteRows();
- for (var i = 0; i < data.selected.length; i++) {
- var node = data.instance.get_node(data.selected[i]);
- if (node.children.length == 0) {
- var dataset = {
- label: node.id,
- data: arr[node.id],
- };
- selected_datasets.push(dataset);
- // Create new array for table to show only subset of metrics
- new_arr[node.id] = arr[node.id];
- }
- }
- create_table(new_arr, timestamps);
- update_graph(objGraph, selected_datasets);
- });
+ create_table(tblMetrics, report_data, report_time, report_keys);
+ var objGraph = create_graph(cnvGraph, report_time);
+ create_tree(divTree, report_tree);
+ handle_tree(divTree, tblMetrics, objGraph, report_data, report_time);
});
</script>
</body>
diff --git a/yardstick/common/nsb_report.js b/yardstick/common/nsb_report.js
index 4bff15b5a..4de1c8e78 100644
--- a/yardstick/common/nsb_report.js
+++ b/yardstick/common/nsb_report.js
@@ -10,9 +10,9 @@
var None = null;
-function create_tree(jstree_data)
+function create_tree(divTree, jstree_data)
{
- $('#data_selector').jstree({
+ divTree.jstree({
plugins: ['checkbox'],
checkbox: {
three_state: false,
@@ -29,55 +29,33 @@ function create_tree(jstree_data)
});
}
-function create_table(table_data, timestamps)
+function create_table(tblMetrics, table_data, timestamps, table_keys)
{
- var tab, tr, td, tn, tbody, keys, key, curr_data, val;
- // create table
- tab = document.getElementsByTagName('table')[0];
- tbody = document.createElement('tbody');
+ var tbody = $('<tbody></tbody>');
+ var tr0 = $('<tr></tr>');
+ var th0 = $('<th></th>');
+ var td0 = $('<td></td>');
+ var tr;
+
// create table headings using timestamps
- tr = document.createElement('tr');
- td = document.createElement('td');
- tn = document.createTextNode('Timestamps');
- td.appendChild(tn);
- tr.appendChild(td);
- for (var k = 0; k < timestamps.length; k++) {
- td = document.createElement('td');
- tn = document.createTextNode(timestamps[k]);
- td.appendChild(tn);
- tr.appendChild(td);
- }
- tbody.appendChild(tr);
+ tr = tr0.clone().append(th0.clone().text('Timestamp'));
+ timestamps.forEach(function(t) {
+ tr.append(th0.clone().text(t));
+ });
+ tbody.append(tr);
+
// for each metric
- keys = Object.keys(table_data);
- for (var i = 0; i < keys.length; i++) {
- key = keys[i];
- tr = document.createElement('tr');
- td = document.createElement('td');
- tn = document.createTextNode(key);
- td.appendChild(tn);
- tr.appendChild(td);
+ table_keys.forEach(function(key) {
+ tr = tr0.clone().append(td0.clone().text(key));
// add each piece of data as its own column
- curr_data = table_data[key];
- for (var j = 0; j < curr_data.length; j++) {
- val = curr_data[j];
- td = document.createElement('td');
- tn = document.createTextNode(val === None ? '' : val);
- td.appendChild(tn);
- tr.appendChild(td);
- }
- tbody.appendChild(tr);
- }
- tab.appendChild(tbody);
-}
+ table_data[key].forEach(function(val) {
+ tr.append(td0.clone().text(val === None ? '' : val));
+ });
+ tbody.append(tr);
+ });
-function deleteRows()
-{
- // delete rows of the table
- var tab = document.getElementsByTagName('table')[0];
- for (var i = tab.rows.length - 1; i >= 0; i--) {
- tab.deleteRow(i);
- }
+ // re-create table
+ tblMetrics.empty().append(tbody);
}
function create_graph(cnvGraph, timestamps)
@@ -165,3 +143,23 @@ function update_graph(objGraph, datasets)
objGraph.data.datasets = datasets;
objGraph.update();
}
+
+function handle_tree(divTree, tblMetrics, objGraph, table_data, timestamps)
+{
+ divTree.on('check_node.jstree uncheck_node.jstree', function(e, data) {
+ var selected_keys = [];
+ var selected_datasets = [];
+ data.selected.forEach(function(sel) {
+ var node = data.instance.get_node(sel);
+ if (node.children.length == 0) {
+ selected_keys.push(node.id);
+ selected_datasets.push({
+ label: node.id,
+ data: table_data[node.id],
+ });
+ }
+ });
+ create_table(tblMetrics, table_data, timestamps, selected_keys);
+ update_graph(objGraph, selected_datasets);
+ });
+}