1<%--
2  ~ Copyright (C) 2017 The Android Open Source Project
3  ~
4  ~ Licensed under the Apache License, Version 2.0 (the "License"); you
5  ~ may not use this file except in compliance with the License. You may
6  ~ obtain a copy of the License at
7  ~
8  ~     http://www.apache.org/licenses/LICENSE-2.0
9  ~
10  ~ Unless required by applicable law or agreed to in writing, software
11  ~ distributed under the License is distributed on an "AS IS" BASIS,
12  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
13  ~ implied. See the License for the specific language governing
14  ~ permissions and limitations under the License.
15  --%>
16<%@ page contentType='text/html;charset=UTF-8' language='java' %>
17<%@ taglib prefix='fn' uri='http://java.sun.com/jsp/jstl/functions' %>
18<%@ taglib prefix='c' uri='http://java.sun.com/jsp/jstl/core'%>
19
20<html>
21  <%@ include file="header.jsp" %>
22  <link type='text/css' href='/css/datepicker.css' rel='stylesheet'>
23  <link type='text/css' href='/css/show_profiling_overview.css' rel='stylesheet'>
24  <link rel='stylesheet' href='/css/search_header.css'>
25  <script src='https://www.gstatic.com/external_hosted/moment/min/moment-with-locales.min.js'></script>
26  <script src='js/search_header.js'></script>
27  <script src='js/time.js'></script>
28  <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
29  <body>
30    <script type='text/javascript'>
31        google.charts.load('current', {'packages':['corechart']});
32        google.charts.setOnLoadCallback(drawAllPlots);
33
34        var plots = ${plots};
35        var search;
36
37        $(document).ready(function() {
38            search = $('#filter-bar').createSearchHeader(
39                'Profiling Analysis', '', refresh);
40            search.addFilter('Branch', 'branch', {
41                corpus: ${branches}
42            }, ${branch});
43            search.addFilter('Device', 'device', {
44                corpus: ${devices}
45            }, ${device});
46          search.display();
47      });
48
49        /**
50        * Draw a box plot.
51        *
52        * Args:
53        *     container: the jquery selector in which to draw the graph.
54        *     lineGraph: a JSON-serialized BoxPlot.
55        */
56        function drawBoxPlot(container, plot) {
57            var data = new google.visualization.DataTable();
58            data.addColumn('string', 'x');
59            plot.seriesList.forEach(function(series) {
60                data.addColumn('number', series);
61                data.addColumn({id:'fill', type:'number', role:'interval'});
62                data.addColumn({id:'fill', type:'number', role:'interval'});
63                data.addColumn({id:'bar', type:'number', role:'interval'});
64                data.addColumn({id:'bar', type:'number', role:'interval'});
65                data.addColumn({type:'string', role:'tooltip', p: {'html': true}});
66            });
67            var rows = plot.values.map(function(day) {
68                var dateString = new moment().renderDate(1 * day.label);
69                var statArray = day.values.map(function(stat) {
70                    var tooltip = (
71                        dateString +
72                        '</br><b>Mean:</b> ' +
73                        stat.mean.toFixed(2) +
74                        '</br><b>Std:</b> ' +
75                        stat.std.toFixed(2) +
76                        '</br><b>Count:</b> ' +
77                        stat.count.toFixed(0));
78                    return [
79                        stat.mean,
80                        stat.mean + stat.std,
81                        stat.mean - stat.std,
82                        stat.mean + stat.std,
83                        stat.mean - stat.std,
84                        tooltip];
85                });
86                return [].concat.apply(
87                    [dateString], statArray);
88            });
89            data.addRows(rows);
90
91            var options = {
92                title: plot.name,
93                curveType: 'function',
94                intervals: { 'color' : 'series-color' },
95                interval: {
96                    'fill': {
97                        'style': 'area',
98                        'curveType': 'function',
99                        'fillOpacity': 0.2
100                    },
101                    'bar': {
102                        'style': 'bars',
103                        'barWidth': 0,
104                        'lineWidth': 1,
105                        'pointSize': 3,
106                        'fillOpacity': 1
107                    }},
108                legend: { position: 'bottom' },
109                tooltip: { isHtml: true },
110                fontName: 'Roboto',
111                titleTextStyle: {
112                    color: '#757575',
113                    fontSize: 16,
114                    bold: false
115                },
116                pointsVisible: true,
117                vAxis:{
118                    title: plot.y_label,
119                    titleTextStyle: {
120                        color: '#424242',
121                        fontSize: 12,
122                        italic: false
123                    },
124                    textStyle: {
125                        fontSize: 12,
126                        color: '#757575'
127                    },
128                },
129                hAxis: {
130                    textStyle: {
131                        fontSize: 12,
132                        color: '#757575'
133                    },
134                    titleTextStyle: {
135                        color: '#424242',
136                        fontSize: 12,
137                        italic: false
138                    }
139                },
140            };
141            var plot = new google.visualization.LineChart(container[0]);
142            plot.draw(data, options);
143        }
144
145        // Draw all graphs.
146        function drawAllPlots() {
147            var container = $('#profiling-container');
148            container.empty();
149
150            plots.forEach(function(g) {
151                var plot = $('<div class="box-plot row card"></div>');
152                plot.appendTo(container);
153                drawBoxPlot(plot.append('<div></div>'), g);
154            });
155        }
156
157        // refresh the page to see the runs matching the specified filter
158        function refresh() {
159            if($(this).hasClass('disabled')) return;
160            var link = '${pageContext.request.contextPath}' +
161                '/show_profiling_overview?testName=${testName}' + search.args();
162            window.open(link,'_self');
163        }
164    </script>
165    <div class='container wide'>
166      <div id='filter-bar' class='row'></div>
167      <div id='profiling-container'>
168      </div>
169    </div>
170    <%@ include file="footer.jsp" %>
171  </body>
172</html>
173