diff options
author | Volodymyr Mytnyk <volodymyrx.mytnyk@intel.com> | 2019-01-24 10:17:48 +0000 |
---|---|---|
committer | Gerrit Code Review <gerrit@opnfv.org> | 2019-01-24 10:17:48 +0000 |
commit | dfb534bbd7ab1454c1ad3b63d0b785e3050c1962 (patch) | |
tree | 4bb95bfdbc19b6fda0e41cfacda74aaae8d9dbe8 /yardstick/common | |
parent | e097cbcff4b911c91a87fee5e9218f79b8d0eeef (diff) | |
parent | 855e0532f9a58986fbb95e19ac42e90b53f031b3 (diff) |
Merge changes from topic 'report/html_table'
* changes:
Additional rework of NSB report
Only show metrics for selected nodes in data table
Fix conversion to JS for HTML reports
Diffstat (limited to 'yardstick/common')
-rw-r--r-- | yardstick/common/nsb_report.css | 19 | ||||
-rw-r--r-- | yardstick/common/nsb_report.html.j2 | 52 | ||||
-rw-r--r-- | yardstick/common/nsb_report.js | 73 |
3 files changed, 80 insertions, 64 deletions
diff --git a/yardstick/common/nsb_report.css b/yardstick/common/nsb_report.css index 2beb91c53..667f865a5 100644 --- a/yardstick/common/nsb_report.css +++ b/yardstick/common/nsb_report.css @@ -9,21 +9,26 @@ ******************************************************************************/ body { - font-size: 16pt; + font-family: Frutiger, "Helvetica Neue", Helvetica, Arial, sans-serif; +} + +header { + padding-top: 5px; + text-align: center; + font-weight: bold; } -table { +#tblMetrics { overflow-y: scroll; height: 360px; display: block; } -header { - font-family: Frutiger, "Helvetica Neue", Helvetica, Arial, sans-serif; - clear: left; - text-align: center; +#cnvGraph { + width: 100%; + height: 500px; } -.control-pane { +#divTree { font-size: 10pt; } diff --git a/yardstick/common/nsb_report.html.j2 b/yardstick/common/nsb_report.html.j2 index a3087d746..aa90253f8 100644 --- a/yardstick/common/nsb_report.html.j2 +++ b/yardstick/common/nsb_report.html.j2 @@ -29,53 +29,45 @@ </head> <body> - <div class="container" style="width:80%"> + <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); - 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 = []; - 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); - } - } - 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 cc5e14ee7..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,34 +29,33 @@ function create_tree(jstree_data) }); } -// may need to pass timestamps too... -function create_table(table_data) +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 = 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); + }); + + // re-create table + tblMetrics.empty().append(tbody); } function create_graph(cnvGraph, timestamps) @@ -144,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); + }); +} |