aboutsummaryrefslogtreecommitdiffstats
path: root/yardstick/common/nsb_report.html.j2
blob: a3087d7461208baa23b67e4ae111797cd603798d (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!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.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.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>
        <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">
                <div class="col-md-2 control-pane">
                    <div id="data_selector"></div>
                </div>
                <div class="col-md-10 data-pane">
                    <canvas id="cnvGraph" style="width: 100%; height: 500px"></canvas>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 table-responsive">
                    <table class="table table-hover"></table>
                </div>
            </div>
        </div>

        <script>
            var arr, jstree_data, timestamps;
            arr = {{table|safe}};
            timestamps = {{Timestamps|safe}};
            jstree_data = {{jstree_nodes|safe}};

            $(function() {
                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_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);
                });
            });
        </script>
    </body>
</html>