aboutsummaryrefslogtreecommitdiffstats
path: root/yardstick/common
diff options
context:
space:
mode:
authorVolodymyr Mytnyk <volodymyrx.mytnyk@intel.com>2019-01-24 10:17:48 +0000
committerGerrit Code Review <gerrit@opnfv.org>2019-01-24 10:17:48 +0000
commitdfb534bbd7ab1454c1ad3b63d0b785e3050c1962 (patch)
tree4bb95bfdbc19b6fda0e41cfacda74aaae8d9dbe8 /yardstick/common
parente097cbcff4b911c91a87fee5e9218f79b8d0eeef (diff)
parent855e0532f9a58986fbb95e19ac42e90b53f031b3 (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.css19
-rw-r--r--yardstick/common/nsb_report.html.j252
-rw-r--r--yardstick/common/nsb_report.js73
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);
+ });
+}