1<%--
2  ~ Copyright (c) 2017 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  <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
25  <script src='https://www.gstatic.com/external_hosted/moment/min/moment-with-locales.min.js'></script>
26  <script src='js/time.js'></script>
27  <script src='js/test_results.js'></script>
28  <script type='text/javascript'>
29      google.charts.load('current', {'packages':['table', 'corechart']});
30      google.charts.setOnLoadCallback(drawPieChart);
31
32      $(document).ready(function() {
33          $('#test-results-container').showTests(${testRuns}, true);
34          drawSummary();
35
36        $('#apiCoverageModal').modal({
37              width: '75%',
38              dismissible: true, // Modal can be dismissed by clicking outside of the modal
39              opacity: .5, // Opacity of modal background
40              inDuration: 300, // Transition in duration
41              outDuration: 200, // Transition out duration
42              startingTop: '4%', // Starting top style attribute
43              endingTop: '10%', // Ending top style attribute
44              ready: function(modal, trigger) { // Callback for Modal open. Modal and trigger parameters available.
45                var urlSafeKeyList = modal.data('urlSafeKeyList');
46                var halApiInfoList = [];
47                var getAjaxList = $.map( urlSafeKeyList, function( urlSafeKey ) {
48                  return $.get( "/api/coverage/api/data?key=" + urlSafeKey, function(data) {
49                    halApiInfoList.push(data);
50                  })
51                  .fail(function() {
52                    alert( "Error : can't bring API coverage data from the server" );
53                  });
54                });
55
56                $.when.apply($, getAjaxList).then(function() {
57                  $.each(halApiInfoList, function( index, data ) {
58                    $("#halApiList").append(halApiListTemplate());
59                    var version = data.halMajorVersion + '.' + data.halMinorVersion;
60                    var defaultInfo = data.halPackageName + '@' + version + '::' + data.halInterfaceName;
61                    $("#halApiList > li:last > div.collapsible-header").html(
62                        '<i class="material-icons">report</i> HAL API Information : ' + defaultInfo
63                    );
64                    /*
65                    $("#halApiList > li:last > div.collapsible-body > ul.collection.with-header").append(
66                        '<li class="collection-header">' +
67                        '</li>'
68                    );
69                    */
70
71                    $("#halApiList > li:last > div.collapsible-body > ul.collection.with-header").append(
72                        $.map( data.halApi, function( apiName, idx ) {
73                          var colorClass = data.coveredHalApi.indexOf(apiName) > -1 ? "green" : "red"
74                          return '<li class="collection-item ' + colorClass + ' lighten-1">' + apiName + '</li>';
75                        }).join("")
76                    );
77                    $("#halApiList").collapsible('open', index);
78                  });
79                  $('#dataTableLoading').hide("slow");
80                });
81              },
82              complete: function() {
83                $("#halApiList").empty();
84                $('#dataTableLoading').show("slow");
85              } // Callback for Modal close
86            }
87        );
88      });
89
90      function halApiListTemplate() {
91         return '<li>' +
92            '<div class="collapsible-header">' +
93            '<i class="material-icons">report</i> API Information' +
94            '</div>' +
95            '<div class="collapsible-body">' +
96            '<ul class="collection with-header">' +
97            '</ul>' +
98            '</div>' +
99            '</li>';
100      }
101
102      // to draw pie chart
103      function drawPieChart() {
104          var topBuildResultCounts = ${topBuildResultCounts};
105          if (topBuildResultCounts.length < 1) {
106              return;
107          }
108          var resultNames = ${resultNamesJson};
109          var rows = resultNames.map(function(res, i) {
110              nickname = res.replace('TEST_CASE_RESULT_', '').replace('_', ' ')
111                         .trim().toLowerCase();
112              return [nickname, parseInt(topBuildResultCounts[i])];
113          });
114          rows.unshift(['Result', 'Count']);
115
116          // Get CSS color definitions (or default to white)
117          var colors = resultNames.map(function(res) {
118              return $('.' + res).css('background-color') || 'white';
119          });
120
121          var data = google.visualization.arrayToDataTable(rows);
122          var options = {
123              is3D: false,
124              colors: colors,
125              fontName: 'Roboto',
126              fontSize: '14px',
127              legend: {position: 'bottom'},
128              tooltip: {showColorCode: true, ignoreBounds: false},
129              chartArea: {height: '80%', width: '90%'},
130              pieHole: 0.4
131          };
132
133          var chart = new google.visualization.PieChart(document.getElementById('pie-chart-div'));
134          chart.draw(data, options);
135      }
136
137      // Draw a test plan run summary box.
138      function drawSummary() {
139          var testBuildId = ${testBuildId};
140          var startTime = ${startTime};
141          var endTime = ${endTime};
142          var moduleCount = ${moduleCount};
143          var passingTestCaseCount = ${passingTestCaseCount};
144          var failingTestCaseCount = ${failingTestCaseCount};
145          var div = $('<div></div>');
146          var details = $('<span></span>').appendTo(div);
147          details.append('<b>VTS Build: </b>' + testBuildId + '<br>');
148          details.append('<b>Start Time: </b>' + moment().renderTime(startTime, true) + '<br>');
149          details.append('<b>End Time: </b>' + moment().renderTime(endTime, true) + '<br>');
150          details.append('<b>Duration: </b>' + moment().renderDuration(endTime - startTime) + '<br>');
151          details.append('<b>Modules: </b>' + moduleCount + '<br>');
152          details.append('<b>Passing Test Cases: </b>' + passingTestCaseCount + '<br>');
153          details.append('<b>Non-Passing Test Cases: </b>' + failingTestCaseCount + '<br>');
154
155          <c:if test="${totalApiCount > 0 && totalCoveredApiCount >= 0}">
156          details.append('<b>Total API : </b><c:out value="${totalApiCount}"/><br>');
157          details.append('<b>Total Covered API : </b><c:out value="${totalCoveredApiCount}"/><br>');
158          </c:if>
159
160          div.appendTo($('#summary-container'));
161      }
162  </script>
163
164  <body>
165    <div class='wide container'>
166      <div class='row'>
167        <div class='col s7'>
168          <div class='col s12 card center-align'>
169            <div id='legend-wrapper'>
170              <c:forEach items='${resultNames}' var='res'>
171                <div class='center-align legend-entry'>
172                  <c:set var='trimmed' value='${fn:replace(res, "TEST_CASE_RESULT_", "")}'/>
173                  <c:set var='nickname' value='${fn:replace(trimmed, "_", " ")}'/>
174                  <label for='${res}'>${nickname}</label>
175                  <div id='${res}' class='${res} legend-bubble'></div>
176                </div>
177              </c:forEach>
178            </div>
179          </div>
180          <div id='summary-container' class='col s12 card'>
181            <span class='summary-header valign-wrapper'>
182              <i class='material-icons'>info_outline</i>Run Details
183            </span>
184          </div>
185        </div>
186        <div class='col s5 valign-wrapper'>
187          <!-- pie chart -->
188          <div id='pie-chart-wrapper' class='col s12 valign center-align card'>
189            <div id='pie-chart-div'></div>
190          </div>
191        </div>
192      </div>
193
194      <div class='col s12' id='test-results-container'></div>
195    </div>
196
197    <!-- Modal Structure -->
198    <div id="apiCoverageModal" class="modal modal-fixed-footer" style="width: 75%;">
199      <div class="modal-content">
200        <h4 id="coverageModalTitle">API Coverage</h4>
201
202        <div class="preloader-wrapper big active loaders">
203          <div id="dataTableLoading" class="spinner-layer spinner-blue-only">
204            <div class="circle-clipper left">
205              <div class="circle"></div>
206            </div>
207            <div class="gap-patch">
208              <div class="circle"></div>
209            </div>
210            <div class="circle-clipper right">
211              <div class="circle"></div>
212            </div>
213          </div>
214        </div>
215
216        <div class="row">
217          <div class="col s12">
218            <ul class="collection with-header">
219              <li class="collection-header">
220                <h4>Total HAL API List</h4>
221                <ul id="halApiList" class="collapsible popout" data-collapsible="expandable">
222
223                </ul>
224              </li>
225            </ul>
226          </div>
227        </div>
228      </div>
229      <div class="modal-footer">
230        <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Close</a>
231      </div>
232    </div>
233
234    <%@ include file="footer.jsp" %>
235  </body>
236</html>
237