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          $('#apiCoverageModal').modal({
73                  width: '75%',
74                  dismissible: true, // Modal can be dismissed by clicking outside of the modal
75                  opacity: .5, // Opacity of modal background
76                  inDuration: 300, // Transition in duration
77                  outDuration: 200, // Transition out duration
78                  startingTop: '4%', // Starting top style attribute
79                  endingTop: '10%', // Ending top style attribute
80                  ready: function(modal, trigger) { // Callback for Modal open. Modal and trigger parameters available.
81                      var urlSafeKeyList = modal.data('urlSafeKeyList');
82                      var halApiInfoList = [];
83                      var getAjaxList = $.map( urlSafeKeyList, function( urlSafeKey ) {
84                          return $.get( "/api/coverage/api/data?key=" + urlSafeKey, function(data) {
85                                  halApiInfoList.push(data);
86                              })
87                              .fail(function() {
88                                  alert( "Error : can't bring API coverage data from the server" );
89                              });
90                      });
91
92                      $.when.apply($, getAjaxList).then(function() {
93                          $.each(halApiInfoList, function( index, data ) {
94                              $("#halApiList").append(halApiListTemplate());
95                              var version = data.halMajorVersion + '.' + data.halMinorVersion;
96                              var defaultInfo = data.halPackageName + '@' + version + '::' + data.halInterfaceName;
97                              $("#halApiList > li:last > div.collapsible-header").html(
98                                  '<i class="material-icons">report</i> HAL API Information : ' + defaultInfo
99                              );
100
101                              $("#halApiList > li:last > div.collapsible-body > ul.collection.with-header").append(
102                                  $.map( data.halApi, function( apiName, idx ) {
103                                      var colorClass = data.coveredHalApi.indexOf(apiName) > -1 ? "green" : "red"
104                                      return '<li class="collection-item ' + colorClass + ' lighten-1">' + apiName + '</li>';
105                                  }).join("")
106                              );
107                              $("#halApiList").collapsible('open', index);
108                          });
109                          $('#dataTableLoading').hide("slow");
110                      });
111                  },
112                  complete: function() {
113                      $("#halApiList").empty();
114                      $('#dataTableLoading').show("slow");
115                  } // Callback for Modal close
116              }
117          );
118      });
119
120      function halApiListTemplate() {
121          return '<li>' +
122              '<div class="collapsible-header">' +
123              '<i class="material-icons">report</i> API Information' +
124              '</div>' +
125              '<div class="collapsible-body">' +
126              '<ul class="collection with-header">' +
127              '</ul>' +
128              '</div>' +
129              '</li>';
130      }
131
132      // refresh the page to see the selected test types (pre-/post-submit)
133      function refresh() {
134          if($(this).hasClass('disabled')) return;
135          var link = '${pageContext.request.contextPath}' +
136              '/show_tree?testName=${testName}' + search.args();
137          if (${unfiltered}) {
138            link += '&unfiltered=';
139          }
140          window.open(link,'_self');
141      }
142
143      // view older data
144      function next() {
145          if($(this).hasClass('disabled')) return;
146          var endTime = ${startTime};
147          var link = '${pageContext.request.contextPath}' +
148              '/show_tree?testName=${testName}&endTime=' + endTime +
149              search.args();
150          if (${unfiltered}) {
151              link += '&unfiltered=';
152          }
153          window.open(link,'_self');
154      }
155
156      // view newer data
157      function prev() {
158          if($(this).hasClass('disabled')) return;
159          var startTime = ${endTime};
160          var link = '${pageContext.request.contextPath}' +
161              '/show_tree?testName=${testName}&startTime=' + startTime +
162              search.args();
163          if (${unfiltered}) {
164              link += '&unfiltered=';
165          }
166          window.open(link,'_self');
167        }
168
169      // to draw pie chart
170      function drawPieChart() {
171          var topBuildResultCounts = ${topBuildResultCounts};
172          if (topBuildResultCounts.length < 1) {
173              return;
174          }
175          var resultNames = ${resultNamesJson};
176          var rows = resultNames.map(function(res, i) {
177              nickname = res.replace('TEST_CASE_RESULT_', '').replace('_', ' ')
178                         .trim().toLowerCase();
179              return [nickname, parseInt(topBuildResultCounts[i])];
180          });
181          rows.unshift(['Result', 'Count']);
182
183          // Get CSS color definitions (or default to white)
184          var colors = resultNames.map(function(res) {
185              return $('.' + res).css('background-color') || 'white';
186          });
187
188          var data = google.visualization.arrayToDataTable(rows);
189          var options = {
190              is3D: false,
191              colors: colors,
192              fontName: 'Roboto',
193              fontSize: '14px',
194              legend: {position: 'bottom'},
195              tooltip: {showColorCode: true, ignoreBounds: false},
196              chartArea: {height: '80%', width: '90%'},
197              pieHole: 0.4
198          };
199
200          var chart = new google.visualization.PieChart(document.getElementById('pie-chart-div'));
201          chart.draw(data, options);
202      }
203  </script>
204
205  <body>
206    <div class='wide container'>
207      <div class='row'>
208        <div class='col s12'>
209          <div class='card'>
210            <ul class='tabs'>
211              <li class='tab col s6'><a class='active'>Tree</a></li>
212              <li class='tab col s6' id='tableLink'><a>Table</a></li>
213            </ul>
214          </div>
215          <div id='filter-bar'></div>
216        </div>
217        <div class='col s7'>
218          <div class='col s12 card center-align'>
219            <div id='legend-wrapper'>
220              <c:forEach items='${resultNames}' var='res'>
221                <div class='center-align legend-entry'>
222                  <c:set var='trimmed' value='${fn:replace(res, "TEST_CASE_RESULT_", "")}'/>
223                  <c:set var='nickname' value='${fn:replace(trimmed, "_", " ")}'/>
224                  <label for='${res}'>${nickname}</label>
225                  <div id='${res}' class='${res} legend-bubble'></div>
226                </div>
227              </c:forEach>
228            </div>
229          </div>
230          <div id='profiling-container' class='col s12'>
231            <c:choose>
232              <c:when test='${empty profilingPointNames}'>
233                <div id='error-div' class='center-align card'><h5>${error}</h5></div>
234              </c:when>
235              <c:otherwise>
236                <ul id='profiling-body' class='collapsible' data-collapsible='accordion'>
237                  <li>
238                    <div class='collapsible-header'><i class='material-icons'>timeline</i>Profiling Graphs</div>
239                    <div class='collapsible-body'>
240                      <ul id='profiling-list' class='collection'>
241                        <c:forEach items='${profilingPointNames}' var='pt'>
242                          <c:set var='profPointArgs' value='testName=${testName}&profilingPoint=${pt}'/>
243                          <c:set var='timeArgs' value='endTime=${endTime}'/>
244                          <a href='/show_graph?${profPointArgs}&${timeArgs}'
245                             class='collection-item profiling-point-name'>${pt}
246                          </a>
247                        </c:forEach>
248                      </ul>
249                    </div>
250                  </li>
251                  <li>
252                    <a class='collapsible-link' href='/show_performance_digest?testName=${testName}'>
253                      <div class='collapsible-header'><i class='material-icons'>toc</i>Performance Digest</div>
254                    </a>
255                  </li>
256                </ul>
257              </c:otherwise>
258            </c:choose>
259          </div>
260        </div>
261        <div class='col s5 valign-wrapper'>
262          <!-- pie chart -->
263          <div id='pie-chart-wrapper' class='col s12 valign center-align card'>
264            <h6 class='pie-chart-title'>${topBuildId}</h6>
265            <div id='pie-chart-div'></div>
266          </div>
267        </div>
268      </div>
269
270      <div class='col s12' id='test-results-container'>
271      </div>
272      <div id='newer-wrapper' class='page-button-wrapper fixed-action-btn'>
273        <a id='newer-button' class='btn-floating btn red waves-effect'>
274          <i class='large material-icons'>keyboard_arrow_left</i>
275        </a>
276      </div>
277      <div id='older-wrapper' class='page-button-wrapper fixed-action-btn'>
278        <a id='older-button' class='btn-floating btn red waves-effect'>
279          <i class='large material-icons'>keyboard_arrow_right</i>
280        </a>
281      </div>
282    </div>
283
284    <!-- Modal Structure -->
285    <div id="apiCoverageModal" class="modal modal-fixed-footer" style="width: 75%;">
286      <div class="modal-content">
287        <h4 id="coverageModalTitle">API Coverage</h4>
288
289        <div class="preloader-wrapper big active loaders">
290          <div id="dataTableLoading" class="spinner-layer spinner-blue-only">
291            <div class="circle-clipper left">
292              <div class="circle"></div>
293            </div>
294            <div class="gap-patch">
295              <div class="circle"></div>
296            </div>
297            <div class="circle-clipper right">
298              <div class="circle"></div>
299            </div>
300          </div>
301        </div>
302
303        <div class="row">
304          <div class="col s12">
305            <ul class="collection with-header">
306              <li class="collection-header">
307                <h4>Total HAL API List</h4>
308                <ul id="halApiList" class="collapsible popout" data-collapsible="expandable">
309
310                </ul>
311              </li>
312            </ul>
313          </div>
314        </div>
315      </div>
316      <div class="modal-footer">
317        <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Close</a>
318      </div>
319    </div>
320
321    <%@ include file="footer.jsp" %>
322  </body>
323</html>
324