diff options
Diffstat (limited to 'yardstick/common/nsb_report.html.j2')
| -rw-r--r-- | yardstick/common/nsb_report.html.j2 | 128 |
1 files changed, 25 insertions, 103 deletions
diff --git a/yardstick/common/nsb_report.html.j2 b/yardstick/common/nsb_report.html.j2 index f1b4ae1c2..a3087d746 100644 --- a/yardstick/common/nsb_report.html.j2 +++ b/yardstick/common/nsb_report.html.j2 @@ -15,12 +15,17 @@ <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/themes/default/style.min.css"> - <link rel="stylesheet" href="{{template_dir}}/nsb_report.css"> - <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/themes/default/style.min.css"> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> - <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script> - <script src="https://code.highcharts.com/highcharts.js"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/jstree.min.js"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script> + <style> + {% include 'nsb_report.css' %} + </style> + <script> + {% include 'nsb_report.js' %} + </script> </head> <body> @@ -31,12 +36,12 @@ <h4>Report of {{task_id}} Generated</h4> </header> </div> - <div class="row" style="height:500px"> + <div class="row"> <div class="col-md-2 control-pane"> <div id="data_selector"></div> </div> <div class="col-md-10 data-pane"> - <div id="graph"></div> + <canvas id="cnvGraph" style="width: 100%; height: 500px"></canvas> </div> </div> <div class="row"> @@ -47,112 +52,29 @@ </div> <script> - var arr, tab, tr, td, tbody, keys, key, curr_data; + var arr, jstree_data, timestamps; arr = {{table|safe}}; - - tab = document.getElementsByTagName('table')[0]; - tbody = document.createElement('tbody'); - keys = Object.keys(arr); - // for each metric - for (var i = 0; i < keys.length; i++) { - tr = document.createElement('tr'); - td = document.createElement('td'); - key = keys[i]; - td.append(key); - tr.append(td); - curr_data = arr[key]; - // add each piece of data as its own column - for (var j = 0; j < curr_data.length; j++) { - td = document.createElement('td'); - td.append(curr_data[j]); - tr.append(td); - } - tbody.append(tr); - } - tab.appendChild(tbody); + timestamps = {{Timestamps|safe}}; + jstree_data = {{jstree_nodes|safe}}; $(function() { - $('#data_selector').jstree({ - plugins: ['checkbox'], - checkbox: { - three_state: false, - whole_node: true, - tie_selection: false, - }, - core: { - themes: { - icons: false, - stripes: true, - }, - data: {{jstree_nodes|safe}}, - }, - }); + create_table(arr); + create_tree(jstree_data); + var objGraph = create_graph($('#cnvGraph'), timestamps); $('#data_selector').on('check_node.jstree uncheck_node.jstree', function(e, data) { - var selected_leaves = []; + 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 point = {name: node.id, data: arr[node.id]}; - selected_leaves.push(point); - } - } - - $('#graph').highcharts({ - title: { - text: 'Yardstick Graphs', - x: -20, //center - }, - chart: { - marginLeft: 400, - zoomType: 'x', - type: 'spline', - }, - xAxis: { - crosshair: { - width: 1, - color: 'black', - }, - title: { - text: 'Timestamp', - }, - categories: {{Timestamps|safe}}, - }, - yAxis: { - crosshair: { - width: 1, - color: 'black', - }, - plotLines: [{ - value: 0, - width: 1, - color: '#808080', - }], - }, - plotOptions: { - series: { - showCheckbox: false, - visible: false, - }, - }, - tooltip: { - valueSuffix: '', - }, - legend: { - enabled: true, - }, - series: selected_leaves, - }); - - var chart = $('#graph').highcharts(); - for (var i = 0; i < chart.series.length; i++) { - var series = chart.series[i]; - if (series.visible) { - series.hide(); - } else { - series.show(); + var dataset = { + label: node.id, + data: arr[node.id], + }; + selected_datasets.push(dataset); } } + update_graph(objGraph, selected_datasets); }); }); </script> |