Code Review / yardstick.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | review | tree
raw | inline | side by side
Merge "Log VM OS version, Sample VNF branch/commit ID"
[yardstick.git] / yardstick / common / nsb_report.html.j2
diff --git a/yardstick/common/nsb_report.html.j2 b/yardstick/common/nsb_report.html.j2
index a3087d7..aa90253 100644 (file)
--- 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>