From 6ab3d996abb23e4cd47dbaa8591577e019a84541 Mon Sep 17 00:00:00 2001 From: Patrice Buriez Date: Fri, 9 Nov 2018 11:48:15 +0100 Subject: [PATCH] Only show metrics for selected nodes in data table Together with timestamps, separately added into the table. Optimize the showcasing of graphs and table. JIRA: YARDSTICK-1367 Topic: report/html_table (11 of 12) Change-Id: I263960b059fd27409b36f825664da8c2804e0425 Signed-off-by: Shobhi Jain Signed-off-by: Patrice Buriez --- yardstick/common/nsb_report.css | 17 +++++++++++++++++ yardstick/common/nsb_report.html.j2 | 9 +++++++-- yardstick/common/nsb_report.js | 25 +++++++++++++++++++++++-- 3 files changed, 47 insertions(+), 4 deletions(-) diff --git a/yardstick/common/nsb_report.css b/yardstick/common/nsb_report.css index 2beb91c53..235321441 100644 --- a/yardstick/common/nsb_report.css +++ b/yardstick/common/nsb_report.css @@ -16,6 +16,7 @@ table { overflow-y: scroll; height: 360px; display: block; + width: 100%; } header { @@ -24,6 +25,22 @@ header { text-align: center; } +h1 { + font-size: 20pt; + font-weight: bold; + height: 20px; + margin: 0px 0px; +} + +h4 { + font-size: 13pt; + height: 1px; + margin-bottom: 0px; +} + .control-pane { font-size: 10pt; } + +.data-pane { +} diff --git a/yardstick/common/nsb_report.html.j2 b/yardstick/common/nsb_report.html.j2 index a3087d746..6523fd16f 100644 --- a/yardstick/common/nsb_report.html.j2 +++ b/yardstick/common/nsb_report.html.j2 @@ -29,7 +29,7 @@ -
+

Yardstick User Interface

@@ -58,12 +58,14 @@ jstree_data = {{jstree_nodes|safe}}; $(function() { - create_table(arr); + create_table(arr, timestamps); create_tree(jstree_data); var objGraph = create_graph($('#cnvGraph'), timestamps); $('#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) { @@ -72,8 +74,11 @@ 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); }); }); diff --git a/yardstick/common/nsb_report.js b/yardstick/common/nsb_report.js index cc5e14ee7..4bff15b5a 100644 --- a/yardstick/common/nsb_report.js +++ b/yardstick/common/nsb_report.js @@ -29,13 +29,25 @@ function create_tree(jstree_data) }); } -// may need to pass timestamps too... -function create_table(table_data) +function create_table(table_data, timestamps) { var tab, tr, td, tn, tbody, keys, key, curr_data, val; // create table tab = document.getElementsByTagName('table')[0]; tbody = document.createElement('tbody'); + // 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); // for each metric keys = Object.keys(table_data); for (var i = 0; i < keys.length; i++) { @@ -59,6 +71,15 @@ function create_table(table_data) tab.appendChild(tbody); } +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); + } +} + function create_graph(cnvGraph, timestamps) { return new Chart(cnvGraph, { -- 2.16.6