aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorPatrice Buriez <patrice.buriez@intel.com>2018-11-09 11:00:26 +0100
committerPatrice Buriez <patrice.buriez@intel.com>2018-11-23 07:02:00 +0100
commiteedf287dbef58ada1cfe299eae87067c03f390b4 (patch)
treeef98485c61d46e5b0e8f62272fcbcbd0a5d2bf65
parent835411e9d454b9672081cb1ff3241c036f204b95 (diff)
Add template and css for nsb report
JIRA: YARDSTICK-1367 Topic: report/html_table (5 of 11) Change-Id: I7b8f2fa2aff3d5ee20ec23189acefe41452ad496 Signed-off-by: Emma Foley <emma.l.foley@intel.com> Signed-off-by: Patrice Buriez <patrice.buriez@intel.com>
Diffstat
-rw-r--r--yardstick/common/nsb_report.css29
-rw-r--r--yardstick/common/nsb_report.html.j2160
2 files changed, 189 insertions, 0 deletions
diff --git a/yardstick/common/nsb_report.css b/yardstick/common/nsb_report.css
new file mode 100644
index 000000000..0c47791e2
--- /dev/null
+++ b/yardstick/common/nsb_report.css
@@ -0,0 +1,29 @@
+/*******************************************************************************
+ * 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
+ ******************************************************************************/
+
+body {
+ font-size: 16pt;
+}
+
+table {
+ overflow-y: scroll;
+ height: 360px;
+ display: block;
+}
+
+header {
+ font-family: Frutiger;
+ clear: left;
+ text-align: center;
+}
+
+.control-pane {
+ font-size: 10pt;
+}
diff --git a/yardstick/common/nsb_report.html.j2 b/yardstick/common/nsb_report.html.j2
new file mode 100644
index 000000000..f1b4ae1c2
--- /dev/null
+++ b/yardstick/common/nsb_report.html.j2
@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html>
+
+<!--
+ 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
+-->
+
+ <head>
+ <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>
+ <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>
+ </head>
+
+ <body>
+ <div class="container" style="width:80%">
+ <div class="row">
+ <header class="jumbotron">
+ <h1>Yardstick User Interface</h1>
+ <h4>Report of {{task_id}} Generated</h4>
+ </header>
+ </div>
+ <div class="row" style="height:500px">
+ <div class="col-md-2 control-pane">
+ <div id="data_selector"></div>
+ </div>
+ <div class="col-md-10 data-pane">
+ <div id="graph"></div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-12 table-responsive">
+ <table class="table table-hover"></table>
+ </div>
+ </div>
+ </div>
+
+ <script>
+ var arr, tab, tr, td, tbody, keys, key, curr_data;
+ 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);
+
+ $(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}},
+ },
+ });
+
+ $('#data_selector').on('check_node.jstree uncheck_node.jstree', function(e, data) {
+ var selected_leaves = [];
+ 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();
+ }
+ }
+ });
+ });
+ </script>
+ </body>
+</html>