5 Copyright (c) 2017 Rajesh Kudaka <4k.rajesh@gmail.com>
6 Copyright (c) 2018 Intel Corporation.
8 All rights reserved. This program and the accompanying materials
9 are made available under the terms of the Apache License, Version 2.0
10 which accompanies this distribution, and is available at
11 http://www.apache.org/licenses/LICENSE-2.0
15 <meta charset="utf-8">
16 <meta name="viewport" content="width=device-width, initial-scale=1">
17 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
18 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/themes/default/style.min.css">
19 <link rel="stylesheet" href="{{template_dir}}/nsb_report.css">
20 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
21 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
22 <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
23 <script src="https://code.highcharts.com/highcharts.js"></script>
27 <div class="container" style="width:80%">
29 <header class="jumbotron">
30 <h1>Yardstick User Interface</h1>
31 <h4>Report of {{task_id}} Generated</h4>
34 <div class="row" style="height:500px">
35 <div class="col-md-2 control-pane">
36 <div id="data_selector"></div>
38 <div class="col-md-10 data-pane">
39 <div id="graph"></div>
43 <div class="col-md-12 table-responsive">
44 <table class="table table-hover"></table>
50 var arr, tab, tr, td, tbody, keys, key, curr_data;
53 tab = document.getElementsByTagName('table')[0];
54 tbody = document.createElement('tbody');
55 keys = Object.keys(arr);
57 for (var i = 0; i < keys.length; i++) {
58 tr = document.createElement('tr');
59 td = document.createElement('td');
64 // add each piece of data as its own column
65 for (var j = 0; j < curr_data.length; j++) {
66 td = document.createElement('td');
67 td.append(curr_data[j]);
72 tab.appendChild(tbody);
75 $('#data_selector').jstree({
76 plugins: ['checkbox'],
87 data: {{jstree_nodes|safe}},
91 $('#data_selector').on('check_node.jstree uncheck_node.jstree', function(e, data) {
92 var selected_leaves = [];
93 for (var i = 0; i < data.selected.length; i++) {
94 var node = data.instance.get_node(data.selected[i]);
95 if (node.children.length == 0) {
96 var point = {name: node.id, data: arr[node.id]};
97 selected_leaves.push(point);
101 $('#graph').highcharts({
103 text: 'Yardstick Graphs',
119 categories: {{Timestamps|safe}},
144 series: selected_leaves,
147 var chart = $('#graph').highcharts();
148 for (var i = 0; i < chart.series.length; i++) {
149 var series = chart.series[i];
150 if (series.visible) {