Home | History | Annotate | Download | only in jsp 
      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_test_runs_common.css' rel='stylesheet'>
     23   <link type='text/css' href='/css/test_results.css' rel='stylesheet'>
     24   <link rel='stylesheet' href='/css/search_header.css'>
     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 src='js/test_results.js'></script>
     30   <script type='text/javascript'>
     31       google.charts.load('current', {'packages':['table', 'corechart']});
     32       google.charts.setOnLoadCallback(drawPieChart);
     33 
     34       var search;
     35 
     36       $(document).ready(function() {
     37           search = $('#filter-bar').createSearchHeader('Module: ', '${testName}', refresh);
     38           search.addFilter('Branch', 'branch', {
     39             corpus: ${branches}
     40           }, ${branch});
     41           search.addFilter('Device', 'device', {
     42             corpus: ${devices}
     43           }, ${device});
     44           search.addFilter('Device Build ID', 'deviceBuildId', {}, ${deviceBuildId});
     45           search.addFilter('Test Build ID', 'testBuildId', {}, ${testBuildId});
     46           search.addFilter('Host', 'hostname', {}, ${hostname});
     47           search.addFilter('Passing Count', 'passing', {
     48             validate: 'inequality',
     49             width: 's2'
     50           }, ${passing});
     51           search.addFilter('Non-Passing Count', 'nonpassing', {
     52             validate: 'inequality',
     53             width: 's2'
     54           }, ${nonpassing});
     55           search.addRunTypeCheckboxes(${showPresubmit}, ${showPostsubmit});
     56           search.display();
     57 
     58           // disable buttons on load
     59           if (!${hasNewer}) {
     60               $('#newer-button').toggleClass('disabled');
     61           }
     62           if (!${hasOlder}) {
     63               $('#older-button').toggleClass('disabled');
     64           }
     65           $('#tableLink').click(function() {
     66               window.open('/show_table?testName=${testName}&treeDefault=false', '_self');
     67           });
     68           $('#newer-button').click(prev);
     69           $('#older-button').click(next);
     70           $('#test-results-container').showTests(${testRuns});
     71       });
     72 
     73       // refresh the page to see the selected test types (pre-/post-submit)
     74       function refresh() {
     75           if($(this).hasClass('disabled')) return;
     76           var link = '${pageContext.request.contextPath}' +
     77               '/show_tree?testName=${testName}' + search.args();
     78           if (${unfiltered}) {
     79             link += '&unfiltered=';
     80           }
     81           window.open(link,'_self');
     82       }
     83 
     84       // view older data
     85       function next() {
     86           if($(this).hasClass('disabled')) return;
     87           var endTime = ${startTime};
     88           var link = '${pageContext.request.contextPath}' +
     89               '/show_tree?testName=${testName}&endTime=' + endTime +
     90               search.args();
     91           if (${unfiltered}) {
     92               link += '&unfiltered=';
     93           }
     94           window.open(link,'_self');
     95       }
     96 
     97       // view newer data
     98       function prev() {
     99           if($(this).hasClass('disabled')) return;
    100           var startTime = ${endTime};
    101           var link = '${pageContext.request.contextPath}' +
    102               '/show_tree?testName=${testName}&startTime=' + startTime +
    103               search.args();
    104           if (${unfiltered}) {
    105               link += '&unfiltered=';
    106           }
    107           window.open(link,'_self');
    108         }
    109 
    110       // to draw pie chart
    111       function drawPieChart() {
    112           var topBuildResultCounts = ${topBuildResultCounts};
    113           if (topBuildResultCounts.length < 1) {
    114               return;
    115           }
    116           var resultNames = ${resultNamesJson};
    117           var rows = resultNames.map(function(res, i) {
    118               nickname = res.replace('TEST_CASE_RESULT_', '').replace('_', ' ')
    119                          .trim().toLowerCase();
    120               return [nickname, parseInt(topBuildResultCounts[i])];
    121           });
    122           rows.unshift(['Result', 'Count']);
    123 
    124           // Get CSS color definitions (or default to white)
    125           var colors = resultNames.map(function(res) {
    126               return $('.' + res).css('background-color') || 'white';
    127           });
    128 
    129           var data = google.visualization.arrayToDataTable(rows);
    130           var options = {
    131               is3D: false,
    132               colors: colors,
    133               fontName: 'Roboto',
    134               fontSize: '14px',
    135               legend: {position: 'bottom'},
    136               tooltip: {showColorCode: true, ignoreBounds: false},
    137               chartArea: {height: '80%', width: '90%'},
    138               pieHole: 0.4
    139           };
    140 
    141           var chart = new google.visualization.PieChart(document.getElementById('pie-chart-div'));
    142           chart.draw(data, options);
    143       }
    144   </script>
    145 
    146   <body>
    147     <div class='wide container'>
    148       <div class='row'>
    149         <div class='col s12'>
    150           <div class='card'>
    151             <ul class='tabs'>
    152               <li class='tab col s6'><a class='active'>Tree</a></li>
    153               <li class='tab col s6' id='tableLink'><a>Table</a></li>
    154             </ul>
    155           </div>
    156           <div id='filter-bar'></div>
    157         </div>
    158         <div class='col s7'>
    159           <div class='col s12 card center-align'>
    160             <div id='legend-wrapper'>
    161               <c:forEach items='${resultNames}' var='res'>
    162                 <div class='center-align legend-entry'>
    163                   <c:set var='trimmed' value='${fn:replace(res, "TEST_CASE_RESULT_", "")}'/>
    164                   <c:set var='nickname' value='${fn:replace(trimmed, "_", " ")}'/>
    165                   <label for='${res}'>${nickname}</label>
    166                   <div id='${res}' class='${res} legend-bubble'></div>
    167                 </div>
    168               </c:forEach>
    169             </div>
    170           </div>
    171           <div id='profiling-container' class='col s12'>
    172             <c:choose>
    173               <c:when test='${empty profilingPointNames}'>
    174                 <div id='error-div' class='center-align card'><h5>${error}</h5></div>
    175               </c:when>
    176               <c:otherwise>
    177                 <ul id='profiling-body' class='collapsible' data-collapsible='accordion'>
    178                   <li>
    179                     <div class='collapsible-header'><i class='material-icons'>timeline</i>Profiling Graphs</div>
    180                     <div class='collapsible-body'>
    181                       <ul id='profiling-list' class='collection'>
    182                         <c:forEach items='${profilingPointNames}' var='pt'>
    183                           <c:set var='profPointArgs' value='testName=${testName}&profilingPoint=${pt}'/>
    184                           <c:set var='timeArgs' value='endTime=${endTime}'/>
    185                           <a href='/show_graph?${profPointArgs}&${timeArgs}'
    186                              class='collection-item profiling-point-name'>${pt}
    187                           </a>
    188                         </c:forEach>
    189                       </ul>
    190                     </div>
    191                   </li>
    192                   <li>
    193                     <a class='collapsible-link' href='/show_performance_digest?testName=${testName}'>
    194                       <div class='collapsible-header'><i class='material-icons'>toc</i>Performance Digest</div>
    195                     </a>
    196                   </li>
    197                 </ul>
    198               </c:otherwise>
    199             </c:choose>
    200           </div>
    201         </div>
    202         <div class='col s5 valign-wrapper'>
    203           <!-- pie chart -->
    204           <div id='pie-chart-wrapper' class='col s12 valign center-align card'>
    205             <h6 class='pie-chart-title'>${topBuildId}</h6>
    206             <div id='pie-chart-div'></div>
    207           </div>
    208         </div>
    209       </div>
    210 
    211       <div class='col s12' id='test-results-container'>
    212       </div>
    213       <div id='newer-wrapper' class='page-button-wrapper fixed-action-btn'>
    214         <a id='newer-button' class='btn-floating btn red waves-effect'>
    215           <i class='large material-icons'>keyboard_arrow_left</i>
    216         </a>
    217       </div>
    218       <div id='older-wrapper' class='page-button-wrapper fixed-action-btn'>
    219         <a id='older-button' class='btn-floating btn red waves-effect'>
    220           <i class='large material-icons'>keyboard_arrow_right</i>
    221         </a>
    222       </div>
    223     </div>
    224     <%@ include file="footer.jsp" %>
    225   </body>
    226 </html>
    227