diff options
Diffstat (limited to 'yardstick/common')
-rw-r--r-- | yardstick/common/nsb_report.css | 2 | ||||
-rw-r--r-- | yardstick/common/nsb_report.html.j2 | 128 | ||||
-rw-r--r-- | yardstick/common/nsb_report.js | 146 | ||||
-rw-r--r-- | yardstick/common/report.html.j2 | 133 |
4 files changed, 270 insertions, 139 deletions
diff --git a/yardstick/common/nsb_report.css b/yardstick/common/nsb_report.css index 0c47791e2..2beb91c53 100644 --- a/yardstick/common/nsb_report.css +++ b/yardstick/common/nsb_report.css @@ -19,7 +19,7 @@ table { } header { - font-family: Frutiger; + font-family: Frutiger, "Helvetica Neue", Helvetica, Arial, sans-serif; clear: left; text-align: center; } 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> diff --git a/yardstick/common/nsb_report.js b/yardstick/common/nsb_report.js new file mode 100644 index 000000000..cc5e14ee7 --- /dev/null +++ b/yardstick/common/nsb_report.js @@ -0,0 +1,146 @@ +/******************************************************************************* + * Copyright (c) 2017 Rajesh Kudaka <4k.rajesh@gmail.com> + * Copyright (c) 2018 Intel Corporation. + * + * All rights reserved. This program and the accompanying materials + * are made available under the terms of the Apache License, Version 2.0 + * which accompanies this distribution, and is available at + * http://www.apache.org/licenses/LICENSE-2.0 + ******************************************************************************/ + +var None = null; + +function create_tree(jstree_data) +{ + $('#data_selector').jstree({ + plugins: ['checkbox'], + checkbox: { + three_state: false, + whole_node: true, + tie_selection: false, + }, + core: { + themes: { + icons: false, + stripes: true, + }, + data: jstree_data, + }, + }); +} + +// may need to pass timestamps too... +function create_table(table_data) +{ + var tab, tr, td, tn, tbody, keys, key, curr_data, val; + // create table + tab = document.getElementsByTagName('table')[0]; + tbody = document.createElement('tbody'); + // 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); + // 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); +} + +function create_graph(cnvGraph, timestamps) +{ + return new Chart(cnvGraph, { + type: 'line', + data: { + labels: timestamps, + datasets: [], + }, + options: { + elements: { + line: { + borderWidth: 2, + fill: false, + tension: 0, + }, + }, + scales: { + xAxes: [{ + type: 'category', + }], + yAxes: [{ + type: 'linear', + }], + }, + tooltips: { + mode: 'point', + intersect: true, + }, + hover: { + mode: 'index', + intersect: false, + animationDuration: 0, + }, + legend: { + position: 'bottom', + labels: { + usePointStyle: true, + }, + }, + animation: { + duration: 0, + }, + responsive: true, + responsiveAnimationDuration: 0, + maintainAspectRatio: false, + }, + }); +} + +function update_graph(objGraph, datasets) +{ + var colors = [ + '#FF0000', // Red + '#228B22', // ForestGreen + '#FF8C00', // DarkOrange + '#00008B', // DarkBlue + '#FF00FF', // Fuchsia + '#9ACD32', // YellowGreen + '#FFD700', // Gold + '#4169E1', // RoyalBlue + '#A0522D', // Sienna + '#20B2AA', // LightSeaGreen + '#8A2BE2', // BlueViolet + ]; + + var points = [ + {s: 'circle', r: 3}, + {s: 'rect', r: 4}, + {s: 'triangle', r: 4}, + {s: 'star', r: 4}, + {s: 'rectRot', r: 5}, + ]; + + datasets.forEach(function(d, i) { + var color = colors[i % colors.length]; + var point = points[i % points.length]; + d.borderColor = color; + d.backgroundColor = color; + d.pointStyle = point.s; + d.pointRadius = point.r; + d.pointHoverRadius = point.r + 1; + }); + objGraph.data.datasets = datasets; + objGraph.update(); +} diff --git a/yardstick/common/report.html.j2 b/yardstick/common/report.html.j2 index ab76510ca..1dc7b1db1 100644 --- a/yardstick/common/report.html.j2 +++ b/yardstick/common/report.html.j2 @@ -15,9 +15,9 @@ <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"> - <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> + <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://code.highcharts.com/highcharts.js"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script> <style> table { @@ -26,7 +26,7 @@ display: block; } header { - font-family: Frutiger; + font-family: Frutiger, "Helvetica Neue", Helvetica, Arial, sans-serif; clear: left; text-align: center; } @@ -47,13 +47,14 @@ </div> </div> <div class="col-md-8"> - <div id="container"></div> + <canvas id="cnvGraph" style="width: 100%; height: 500px"></canvas> </div> </div> </div> <script> - var arr, tab, th, tr, td, tn, row, col, thead, tbody; + var None = null; + var arr, tab, th, tr, td, tn, row, col, thead, tbody, val; arr = {{table|safe}}; tab = document.getElementsByTagName('table')[0]; @@ -64,16 +65,17 @@ tn = document.createTextNode(Object.keys(arr).sort()[col]); th.appendChild(tn); tr.appendChild(th); - thead.appendChild(tr); } + thead.appendChild(tr); tab.appendChild(thead); tbody = document.createElement('tbody'); for (row = 0; row < arr[Object.keys(arr)[0]].length; row++) { tr = document.createElement('tr'); for (col = 0; col < Object.keys(arr).length; col++) { + val = arr[Object.keys(arr).sort()[col]][row]; td = document.createElement('td'); - tn = document.createTextNode(arr[Object.keys(arr).sort()[col]][row]); + tn = document.createTextNode(val === None ? '' : val); td.appendChild(tn); tr.appendChild(td); } @@ -82,38 +84,99 @@ tab.appendChild(tbody); $(function() { - $('#container').highcharts({ - title: { - text: 'Yardstick test results', - x: -20, //center - }, - subtitle: { - text: 'Report of {{task_id}} Task Generated', - x: -20, + var datasets = {{datasets|safe}}; + + var colors = [ + '#FF0000', // Red + '#228B22', // ForestGreen + '#FF8C00', // DarkOrange + '#00008B', // DarkBlue + '#FF00FF', // Fuchsia + '#9ACD32', // YellowGreen + '#FFD700', // Gold + '#4169E1', // RoyalBlue + '#A0522D', // Sienna + '#20B2AA', // LightSeaGreen + '#8A2BE2', // BlueViolet + ]; + + var points = [ + {s: 'circle', r: 3}, + {s: 'rect', r: 4}, + {s: 'triangle', r: 4}, + {s: 'star', r: 4}, + {s: 'rectRot', r: 5}, + ]; + + datasets.forEach(function(d, i) { + var color = colors[i % colors.length]; + var point = points[i % points.length]; + d.borderColor = color; + d.backgroundColor = color; + d.pointStyle = point.s; + d.pointRadius = point.r; + d.pointHoverRadius = point.r + 1; + }); + + new Chart($('#cnvGraph'), { + type: 'line', + data: { + labels: {{Timestamps|safe}}, + datasets: datasets, }, - xAxis: { + options: { + elements: { + line: { + borderWidth: 2, + fill: false, + tension: 0, + }, + }, title: { - text: 'Timestamp', + text: [ + 'Yardstick test results', + 'Report of {{task_id}} Task Generated', + ], + display: true, }, - categories: {{Timestamps|safe}}, - }, - yAxis: { - plotLines: [{ - value: 0, - width: 1, - color: '#808080', - }], - }, - tooltip: { - valueSuffix: '', - }, - legend: { - layout: 'vertical', - align: 'right', - verticalAlign: 'middle', - borderWidth: 0, + scales: { + xAxes: [{ + type: 'category', + scaleLabel: { + display: true, + labelString: 'Timestamp', + }, + }], + yAxes: [{ + type: 'linear', + scaleLabel: { + display: true, + labelString: 'Values', + }, + }], + }, + tooltips: { + mode: 'point', + intersect: true, + }, + hover: { + mode: 'index', + intersect: false, + animationDuration: 0, + }, + legend: { + position: 'right', + labels: { + usePointStyle: true, + }, + }, + animation: { + duration: 0, + }, + responsive: true, + responsiveAnimationDuration: 0, + maintainAspectRatio: false, }, - series: {{series|safe}}, }); }); </script> |