diff options
author | Patrice Buriez <patrice.buriez@intel.com> | 2018-11-09 11:48:15 +0100 |
---|---|---|
committer | Patrice Buriez <patrice.buriez@intel.com> | 2018-12-21 19:07:59 +0100 |
commit | 6ab3d996abb23e4cd47dbaa8591577e019a84541 (patch) | |
tree | 7050838adc919c5741ab1d826c7971b9813935c3 | |
parent | f85bca25fd5a681215c210c51b703e0e957a91e5 (diff) |
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 <shobhi.jain@intel.com>
Signed-off-by: Patrice Buriez <patrice.buriez@intel.com>
-rw-r--r-- | yardstick/common/nsb_report.css | 17 | ||||
-rw-r--r-- | yardstick/common/nsb_report.html.j2 | 9 | ||||
-rw-r--r-- | 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 @@ </head> <body> - <div class="container" style="width:80%"> + <div class="container-fluid"> <div class="row"> <header class="jumbotron"> <h1>Yardstick User Interface</h1> @@ -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, { |