Only show metrics for selected nodes in data table 11/61011/19
authorPatrice Buriez <patrice.buriez@intel.com>
Fri, 9 Nov 2018 10:48:15 +0000 (11:48 +0100)
committerPatrice Buriez <patrice.buriez@intel.com>
Fri, 21 Dec 2018 18:07:59 +0000 (19:07 +0100)
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>
yardstick/common/nsb_report.css
yardstick/common/nsb_report.html.j2
yardstick/common/nsb_report.js

index 2beb91c..2353214 100644 (file)
@@ -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 {
+}
index a3087d7..6523fd1 100644 (file)
@@ -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>
             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) {
                                 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);
                 });
             });
index cc5e14e..4bff15b 100644 (file)
@@ -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, {