1<%-- 2 ~ Copyright (c) 2016 Google Inc. All Rights Reserved. 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/show_table.css' rel='stylesheet'> 23 <link type='text/css' href='/css/show_test_runs_common.css' rel='stylesheet'> 24 <link type='text/css' href='/css/search_header.css' rel='stylesheet'> 25 <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script> 26 <script src='https://www.gstatic.com/external_hosted/moment/min/moment-with-locales.min.js'></script> 27 <script src='js/search_header.js'></script> 28 <script src='js/time.js'></script> 29 <script type='text/javascript'> 30 google.charts.load('current', {'packages':['table', 'corechart']}); 31 google.charts.setOnLoadCallback(drawGridTable); 32 google.charts.setOnLoadCallback(activateLogLinks); 33 google.charts.setOnLoadCallback(drawPieChart); 34 google.charts.setOnLoadCallback(function() { 35 $('.gradient').removeClass('gradient'); 36 }); 37 38 var search; 39 40 $(document).ready(function() { 41 search = $('#filter-bar').createSearchHeader('Module: ', '${testName}', refresh); 42 search.addFilter('Branch', 'branch', { 43 corpus: ${branches} 44 }, ${branch}); 45 search.addFilter('Device', 'device', { 46 corpus: ${devices} 47 }, ${device}); 48 search.addFilter('Device Build ID', 'deviceBuildId', {}, ${deviceBuildId}); 49 search.addFilter('Test Build ID', 'testBuildId', {}, ${testBuildId}); 50 search.addFilter('Host', 'hostname', {}, ${hostname}); 51 search.addFilter('Passing Count', 'passing', { 52 validate: 'inequality', 53 width: 's2' 54 }, ${passing}); 55 search.addFilter('Non-Passing Count', 'nonpassing', { 56 validate: 'inequality', 57 width: 's2' 58 }, ${nonpassing}); 59 search.addRunTypeCheckboxes(${showPresubmit}, ${showPostsubmit}); 60 search.display(); 61 62 // disable buttons on load 63 if (!${hasNewer}) { 64 $('#newer-button').toggleClass('disabled'); 65 } 66 if (!${hasOlder}) { 67 $('#older-button').toggleClass('disabled'); 68 } 69 $('#treeLink').click(function() { 70 window.open('/show_tree?testName=${testName}&treeDefault=true', '_self'); 71 }); 72 $('#newer-button').click(prev); 73 $('#older-button').click(next); 74 }); 75 76 // Actives the log links to display the log info modal when clicked. 77 function activateLogLinks() { 78 $('.info-btn').click(function(e) { 79 showLog(${logInfoMap}[$(this).data('col')]); 80 }); 81 } 82 83 /** Displays a modal window with the specified log entries. 84 * 85 * @param logEntries Array of string arrays. Each entry in the outer array 86 * must contain (1) name string, and (2) url string. 87 */ 88 function showLog(logEntries) { 89 if (!logEntries || logEntries.length == 0) return; 90 91 var logList = $('<ul class="collection"></ul>'); 92 var entries = logEntries.reduce(function(acc, entry) { 93 if (!entry || entry.length == 0) return acc; 94 var link = '<a href="' + entry[1] + '"'; 95 link += 'class="collection-item">' + entry[0] + '</li>'; 96 return acc + link; 97 }, ''); 98 logList.html(entries); 99 var infoContainer = $('#info-modal>.modal-content>.info-container'); 100 infoContainer.empty(); 101 logList.appendTo(infoContainer); 102 var modal = $('#info-modal'); 103 modal.modal(); 104 modal.modal('open'); 105 } 106 107 // refresh the page to see the selected test types (pre-/post-submit) 108 function refresh() { 109 if($(this).hasClass('disabled')) return; 110 var link = '${pageContext.request.contextPath}' + 111 '/show_table?testName=${testName}' + search.args(); 112 if (${unfiltered}) { 113 link += '&unfiltered='; 114 } 115 window.open(link,'_self'); 116 } 117 118 // view older data 119 function next() { 120 if($(this).hasClass('disabled')) return; 121 var endTime = ${startTime}; 122 var link = '${pageContext.request.contextPath}' + 123 '/show_table?testName=${testName}&endTime=' + endTime + 124 search.args(); 125 if (${unfiltered}) { 126 link += '&unfiltered='; 127 } 128 window.open(link,'_self'); 129 } 130 131 // view newer data 132 function prev() { 133 if($(this).hasClass('disabled')) return; 134 var startTime = ${endTime}; 135 var link = '${pageContext.request.contextPath}' + 136 '/show_table?testName=${testName}&startTime=' + startTime + 137 search.args(); 138 if (${unfiltered}) { 139 link += '&unfiltered='; 140 } 141 window.open(link,'_self'); 142 } 143 144 // to draw pie chart 145 function drawPieChart() { 146 var topBuildResultCounts = ${topBuildResultCounts}; 147 if (topBuildResultCounts.length < 1) { 148 return; 149 } 150 var resultNames = ${resultNamesJson}; 151 var rows = resultNames.map(function(res, i) { 152 nickname = res.replace('TEST_CASE_RESULT_', '').replace('_', ' ') 153 .trim().toLowerCase(); 154 return [nickname, parseInt(topBuildResultCounts[i])]; 155 }); 156 rows.unshift(['Result', 'Count']); 157 158 // Get CSS color definitions (or default to white) 159 var colors = resultNames.map(function(res) { 160 return $('.' + res).css('background-color') || 'white'; 161 }); 162 163 var data = google.visualization.arrayToDataTable(rows); 164 var options = { 165 is3D: false, 166 colors: colors, 167 fontName: 'Roboto', 168 fontSize: '14px', 169 legend: {position: 'bottom'}, 170 tooltip: {showColorCode: true, ignoreBounds: false}, 171 chartArea: {height: '80%', width: '90%'}, 172 pieHole: 0.4 173 }; 174 175 var chart = new google.visualization.PieChart(document.getElementById('pie-chart-div')); 176 chart.draw(data, options); 177 } 178 179 // table for grid data 180 function drawGridTable() { 181 var data = new google.visualization.DataTable(); 182 183 // Add column headers. 184 headerRow = ${headerRow}; 185 headerRow.forEach(function(d, i) { 186 var classNames = 'table-header-content'; 187 if (i == 0) classNames += ' table-header-legend'; 188 data.addColumn('string', '<span class="' + classNames + '">' + 189 d + '</span>'); 190 }); 191 192 var timeGrid = ${timeGrid}; 193 var durationGrid = ${durationGrid}; 194 var summaryGrid = ${summaryGrid}; 195 var resultsGrid = ${resultsGrid}; 196 197 // Format time grid to a formatted date 198 timeGrid = timeGrid.map(function(row) { 199 return row.map(function(cell, j) { 200 if (j == 0) return cell; 201 return moment().renderTime(cell); 202 }); 203 }); 204 205 // Format duration grid to HH:mm:ss.SSS 206 durationGrid = durationGrid.map(function(row) { 207 return row.map(function(cell, j) { 208 if (j == 0) return cell; 209 return moment().renderDuration(cell); 210 }); 211 }); 212 213 // add rows to the data. 214 data.addRows(timeGrid); 215 data.addRows(durationGrid); 216 data.addRows(summaryGrid); 217 data.addRows(resultsGrid); 218 219 var table = new google.visualization.Table(document.getElementById('grid-table-div')); 220 var classNames = { 221 headerRow : 'table-header', 222 headerCell : 'table-header-cell' 223 }; 224 var options = { 225 showRowNumber: false, 226 alternatingRowStyle: true, 227 allowHtml: true, 228 frozenColumns: 1, 229 cssClassNames: classNames, 230 sort: 'disable' 231 }; 232 table.draw(data, options); 233 } 234 </script> 235 236 <body> 237 <div class='wide container'> 238 <div class='row'> 239 <div class='col s12'> 240 <div class='card'> 241 <ul class='tabs'> 242 <li class='tab col s6' id='treeLink'><a>Tree</a></li> 243 <li class='tab col s6'><a class='active'>Table</a></li> 244 </ul> 245 </div> 246 <div id='filter-bar'></div> 247 </div> 248 <div class='col s7'> 249 <div class='col s12 card center-align'> 250 <div id='legend-wrapper'> 251 <c:forEach items='${resultNames}' var='res'> 252 <div class='center-align legend-entry'> 253 <c:set var='trimmed' value='${fn:replace(res, "TEST_CASE_RESULT_", "")}'/> 254 <c:set var='nickname' value='${fn:replace(trimmed, "_", " ")}'/> 255 <label for='${res}'>${nickname}</label> 256 <div id='${res}' class='${res} legend-bubble'></div> 257 </div> 258 </c:forEach> 259 </div> 260 </div> 261 <div id='profiling-container' class='col s12'> 262 <c:choose> 263 <c:when test='${empty profilingPointNames}'> 264 <div id='error-div' class='center-align card'><h5>${error}</h5></div> 265 </c:when> 266 <c:otherwise> 267 <ul id='profiling-body' class='collapsible' data-collapsible='accordion'> 268 <li> 269 <div class='collapsible-header'><i class='material-icons'>timeline</i>Profiling Graphs</div> 270 <div class='collapsible-body'> 271 <ul id='profiling-list' class='collection'> 272 <c:forEach items='${profilingPointNames}' var='pt'> 273 <c:set var='profPointArgs' value='testName=${testName}&profilingPoint=${pt}'/> 274 <c:set var='timeArgs' value='endTime=${endTime}'/> 275 <a href='/show_graph?${profPointArgs}&${timeArgs}' 276 class='collection-item profiling-point-name'>${pt} 277 </a> 278 </c:forEach> 279 </ul> 280 </div> 281 </li> 282 <li> 283 <a class='collapsible-link' href='/show_performance_digest?testName=${testName}'> 284 <div class='collapsible-header'><i class='material-icons'>toc</i>Performance Digest</div> 285 </a> 286 </li> 287 </ul> 288 </c:otherwise> 289 </c:choose> 290 </div> 291 </div> 292 <div class='col s5 valign-wrapper'> 293 <!-- pie chart --> 294 <div id='pie-chart-wrapper' class='col s12 valign center-align card'> 295 <h6 class='pie-chart-title'>Test Status for Device Build ID: ${topBuildId}</h6> 296 <div id='pie-chart-div'></div> 297 </div> 298 </div> 299 </div> 300 301 <div class='col s12'> 302 <div id='chart-holder' class='col s12 card'> 303 <!-- Grid tables--> 304 <div id='grid-table-div'></div> 305 </div> 306 </div> 307 <div id='newer-wrapper' class='page-button-wrapper fixed-action-btn'> 308 <a id='newer-button' class='btn-floating btn red waves-effect'> 309 <i class='large material-icons'>keyboard_arrow_left</i> 310 </a> 311 </div> 312 <div id='older-wrapper' class='page-button-wrapper fixed-action-btn'> 313 <a id='older-button' class='btn-floating btn red waves-effect'> 314 <i class='large material-icons'>keyboard_arrow_right</i> 315 </a> 316 </div> 317 </div> 318 <div id="help-modal" class="modal"> 319 <div class="modal-content"> 320 <h4>${searchHelpHeader}</h4> 321 <p>${searchHelpBody}</p> 322 </div> 323 <div class="modal-footer"> 324 <a href="#!" class="modal-action modal-close waves-effect btn-flat">Close</a> 325 </div> 326 </div> 327 <div id="info-modal" class="modal"> 328 <div class="modal-content"> 329 <h4>Logs</h4> 330 <div class="info-container"></div> 331 </div> 332 <div class="modal-footer"> 333 <a href="#!" class="modal-action modal-close waves-effect btn-flat">Close</a> 334 </div> 335 </div> 336 <%@ include file="footer.jsp" %> 337 </body> 338</html> 339