From 855e0532f9a58986fbb95e19ac42e90b53f031b3 Mon Sep 17 00:00:00 2001 From: Patrice Buriez Date: Mon, 17 Dec 2018 19:22:16 +0100 Subject: 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 --- yardstick/common/nsb_report.css | 34 +++++--------- yardstick/common/nsb_report.html.j2 | 55 +++++++++-------------- yardstick/common/nsb_report.js | 90 ++++++++++++++++++------------------- 3 files changed, 76 insertions(+), 103 deletions(-) (limited to 'yardstick/common') 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 @@
-
-

Yardstick User Interface

-

Report of {{task_id}} Generated

+
+ Testcase: {{report_meta.testcase}}
+ Task-ID: {{report_meta.task_id}}
-
-
+
+
-
- +
+
-
+
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 = $(''); + var tr0 = $(''); + var th0 = $(''); + var td0 = $(''); + 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); + }); +} -- cgit 1.2.3-korg