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
