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   <link rel='stylesheet' href='/css/dashboard_main.css'>
     22   <%@ include file='header.jsp' %>
     23   <body>
     24     <script>
     25         var allTests = ${allTestsJson};
     26         var testSet = new Set(allTests);
     27         var subscriptionMap = ${subscriptionMapJson};
     28 
     29         var addFavorite = function() {
     30             if ($(this).hasClass('disabled')) {
     31                 return;
     32             }
     33             var test = $('#input-box').val();
     34             if (!testSet.has(test) || test in subscriptionMap) {
     35                 return;
     36             }
     37             $('#add-button').addClass('disabled');
     38             $.post('/api/favorites', { testName: test}).then(function(data) {
     39                 if (!data.key) {
     40                     return;
     41                 }
     42                 subscriptionMap[test] = data.key;
     43                 var wrapper = $('<div></div>');
     44                 var a = $('<a></a>')
     45                     .attr('href', '${resultsUrl}?testName=' + test);
     46                 var div = $('<div class="col s11 card hoverable option"></div>');
     47                 div.addClass('valign-wrapper waves-effect');
     48                 div.appendTo(a);
     49                 var span = $('<span class="entry valign"></span>').text(test);
     50                 span.appendTo(div);
     51                 a.appendTo(wrapper);
     52 
     53                 var btnContainer = $('<div class="col s1 center btn-container"></div>');
     54                 var silence = $('<a class="col s6 btn-flat notification-button active"></a>');
     55                 silence.append('<i class="material-icons">notifications_active</i>');
     56                 silence.attr('test', test);
     57                 silence.attr('title', 'Disable notifications');
     58                 silence.appendTo(btnContainer);
     59                 silence.click(toggleNotifications);
     60 
     61                 var clear = $('<a class="col s6 btn-flat remove-button"></a>');
     62                 clear.append('<i class="material-icons">clear</i>');
     63                 clear.attr('test', test);
     64                 clear.attr('title', 'Remove favorite');
     65                 clear.appendTo(btnContainer);
     66                 clear.click(removeFavorite);
     67 
     68                 btnContainer.appendTo(wrapper);
     69 
     70                 wrapper.prependTo('#options').hide()
     71                                           .slideDown(150);
     72                 $('#input-box').val(null);
     73                 Materialize.updateTextFields();
     74             }).always(function() {
     75                 $('#add-button').removeClass('disabled');
     76             });
     77         }
     78 
     79         var toggleNotifications = function() {
     80             var self = $(this);
     81             if (self.hasClass('disabled')) {
     82                 return;
     83             }
     84             self.addClass('disabled');
     85             var test = self.attr('test');
     86             if (!(test in subscriptionMap)) {
     87                 return;
     88             }
     89             var muteStatus = self.hasClass('active');
     90             var element = self;
     91             $.post('/api/favorites', { userFavoritesKey: subscriptionMap[test], muteNotifications: muteStatus}).then(function(data) {
     92                 element = self.clone();
     93                 if (element.hasClass('active')) {
     94                     element.find('i').text('notifications_off')
     95                     element.removeClass('active');
     96                     element.addClass('inactive');
     97                     element.attr('title', 'Enable notifications');
     98                 } else {
     99                     element.find('i').text('notifications_active')
    100                     element.removeClass('inactive');
    101                     element.addClass('active');
    102                     element.attr('title', 'Disable notifications');
    103                 }
    104                 element.click(toggleNotifications);
    105                 self.replaceWith(function() {
    106                     return element;
    107                 });
    108             }).always(function() {
    109                 element.removeClass('disabled');
    110             });
    111         }
    112 
    113         var removeFavorite = function() {
    114             var self = $(this);
    115             if (self.hasClass('disabled')) {
    116                 return;
    117             }
    118             var test = self.attr('test');
    119             if (!(test in subscriptionMap)) {
    120                 return;
    121             }
    122             self.addClass('disabled');
    123             $.ajax({
    124                 url: '/api/favorites/' + subscriptionMap[test],
    125                 type: 'DELETE'
    126             }).always(function() {
    127                 self.removeClass('disabled');
    128             }).then(function() {
    129                 delete subscriptionMap[test];
    130                 self.parent().parent().slideUp(150, function() {
    131                     self.remove();
    132                 });
    133             });
    134         }
    135 
    136         var addFavoriteButton = function() {
    137           var self = $(this);
    138           var test = self.attr('test');
    139 
    140           $.post('/api/favorites', { testName: test}).then(function(data) {
    141             if (data.key) {
    142               subscriptionMap[test] = data.key;
    143 
    144               self.children().text("star");
    145               self.switchClass("add-fav-button", "min-fav-button", 0);
    146 
    147               self.off('click', addFavoriteButton);
    148               self.on('click', removeFavoriteButton);
    149             }
    150           })
    151           .fail(function() {
    152             alert( "Error occurred on registering your favorite test case!" );
    153           });
    154         }
    155 
    156         var removeFavoriteButton = function() {
    157           var self = $(this);
    158           var test = self.attr('test');
    159 
    160           $.ajax({
    161             url: '/api/favorites/' + subscriptionMap[test],
    162             type: 'DELETE'
    163           }).then(function() {
    164             delete subscriptionMap[test];
    165 
    166             self.children().text("star_border");
    167             self.switchClass("min-fav-button", "add-fav-button", 0);
    168 
    169             self.off('click', removeFavoriteButton);
    170             self.on('click', addFavoriteButton);
    171           });
    172         }
    173 
    174         $.widget('custom.sizedAutocomplete', $.ui.autocomplete, {
    175             _resizeMenu: function() {
    176                 this.menu.element.outerWidth($('#input-box').width());
    177             }
    178         });
    179 
    180         $(function() {
    181             $('#input-box').sizedAutocomplete({
    182                 source: allTests,
    183                 classes: {
    184                     'ui-autocomplete': 'card'
    185                 }
    186             });
    187 
    188             $('#input-box').keyup(function(event) {
    189                 if (event.keyCode == 13) {  // return button
    190                     $('#add-button').click();
    191                 }
    192             });
    193 
    194             $('.remove-button').click(removeFavorite);
    195             $('.notification-button').click(toggleNotifications);
    196             $('#add-button').click(addFavorite);
    197 
    198             $('.add-fav-button').click(addFavoriteButton);
    199 
    200             $('.min-fav-button').click(removeFavoriteButton);
    201 
    202             $('#favoritesLink').click(function() {
    203                 window.open('/', '_self');
    204             });
    205             $('#allLink').click(function() {
    206                 window.open('/?showAll=true', '_self');
    207             });
    208             $('#acksLink').click(function() {
    209                 window.open('/show_test_acknowledgments', '_self');
    210             });
    211         });
    212     </script>
    213     <div class='container wide'>
    214 
    215       <c:if test="${!showAll}">
    216         <ul id="guide_collapsible" class="collapsible" data-collapsible="accordion">
    217           <li>
    218             <div class="collapsible-header">
    219               <i class="material-icons">library_books</i>
    220               Notice
    221               <span class="new badge right" style="position: inherit;">1</span>
    222             </div>
    223             <div class="collapsible-body">
    224               <div class='row'>
    225                 <div class='col s12' style="margin: 15px 0px 0px 30px;">
    226                   <c:choose>
    227                     <c:when test="${fn:endsWith(serverName, 'googleplex.com')}">
    228                       <c:set var="dataVersion" scope="page" value="new"/>
    229                       <c:choose>
    230                         <c:when test="${fn:startsWith(serverName, 'android-vts-internal')}">
    231                           <c:set var="dataLink" scope="page" value="https://android-vts.appspot.com"/>
    232                         </c:when>
    233                         <c:when test="${fn:startsWith(serverName, 'android-vts-staging')}">
    234                           <c:set var="dataLink" scope="page" value="https://android-vts-staging.appspot.com"/>
    235                         </c:when>
    236                         <c:otherwise>
    237                           <c:set var="dataLink" scope="page" value="https://android-vts-staging.appspot.com"/>
    238                         </c:otherwise>
    239                       </c:choose>
    240                     </c:when>
    241                     <c:when test="${fn:endsWith(serverName, 'appspot.com')}">
    242                       <c:set var="dataVersion" scope="page" value="previous"/>
    243                       <c:choose>
    244                         <c:when test="${fn:startsWith(serverName, 'android-vts-staging')}">
    245                           <c:set var="dataLink" scope="page" value="https://android-vts-staging.googleplex.com"/>
    246                         </c:when>
    247                         <c:when test="${fn:startsWith(serverName, 'android-vts')}">
    248                           <c:set var="dataLink" scope="page" value="https://android-vts-internal.googleplex.com"/>
    249                         </c:when>
    250                         <c:otherwise>
    251                           <c:set var="dataLink" scope="page" value="https://android-vts-staging.googleplex.com"/>
    252                         </c:otherwise>
    253                       </c:choose>
    254                     </c:when>
    255                     <c:otherwise>
    256                       <c:set var="dataVersion" scope="page" value="local dev"/>
    257                       <c:set var="dataLink" scope="page" value="http://localhost"/>
    258                     </c:otherwise>
    259                   </c:choose>
    260                   Recently, we launched new appspot servers for dashboard. Thus you will have two diffrent versions of server for each staging and production data.
    261                   <br/>
    262                   If you want to find the <c:out value = "${dataVersion}"/> test data, please visit the next url <a href="<c:out value = "${dataLink}"/>"><c:out value = "${dataLink}"/></a>.
    263                 </div>
    264               </div>
    265             </div>
    266           </li>
    267         </ul>
    268       </c:if>
    269 
    270       <c:choose>
    271         <c:when test='${not empty error}'>
    272           <div id='error-container' class='row card'>
    273             <div class='col s12 center-align'>
    274               <h5>${error}</h5>
    275             </div>
    276           </div>
    277         </c:when>
    278         <c:otherwise>
    279           <div class='row home-tabs-row'>
    280             <div class='col s12'>
    281               <ul class='tabs'>
    282                 <li class='tab col s4' id='favoritesLink'><a class='${showAll ? "inactive" : "active"}'>Favorites</a></li>
    283                 <li class='tab col s4' id='allLink'><a class='${showAll ? "active" : "inactive"}'>All Tests</a></li>
    284                 <li class='tab col s4' id='acksLink'><a>Test Acknowledgements</a></li>
    285               </ul>
    286             </div>
    287           </div>
    288           <c:set var='width' value='${showAll ? 11 : 11}' />
    289           <c:if test='${not showAll}'>
    290             <div class='row'>
    291               <div class='input-field col s8'>
    292                 <input type='text' id='input-box'></input>
    293                 <label for='input-box'>Search for tests to add to favorites</label>
    294               </div>
    295               <div id='add-button-wrapper' class='col s1 valign-wrapper'>
    296                 <a id='add-button' class='btn-floating btn waves-effect waves-light red valign'><i class='material-icons'>add</i></a>
    297               </div>
    298             </div>
    299           </c:if>
    300           <div class='row' id='options'>
    301             <c:forEach items='${testNames}' var='test'>
    302               <div>
    303                 <a href='${resultsUrl}?testName=${test.name}'>
    304                   <div class='col s${width} card hoverable option valign-wrapper waves-effect'>
    305                     <span class='entry valign'>${test.name}
    306                       <c:if test='${test.failCount >= 0 && test.passCount >= 0}'>
    307                         <c:set var='color' value='${test.failCount > 0 ? "red" : (test.passCount > 0 ? "green" : "grey")}' />
    308                         <span class='indicator center ${color}'>
    309                           ${test.passCount} / ${test.passCount + test.failCount}
    310                         </span>
    311                       </c:if>
    312                     </span>
    313                   </div>
    314                 </a>
    315                 <c:choose>
    316                   <c:when test="${showAll}">
    317                     <div class="col s1 center btn-container">
    318                       <c:choose>
    319                         <c:when test="${test.isFavorite}">
    320                           <a class="col s6 btn-flat min-fav-button" test="${test.name}" title="Remove favorite">
    321                             <i class="material-icons">star</i>
    322                           </a>
    323                         </c:when>
    324                         <c:otherwise>
    325                           <a class="col s6 btn-flat add-fav-button" test="${test.name}" title="Add favorite">
    326                             <i class="material-icons">star_border</i>
    327                           </a>
    328                         </c:otherwise>
    329                       </c:choose>
    330                     </div>
    331                   </c:when>
    332                   <c:otherwise>
    333                     <div class='col s1 center btn-container'>
    334                       <a class='col s6 btn-flat notification-button ${test.muteNotifications ? "inactive" : "active"}' test='${test.name}' title='${test.muteNotifications ? "Enable" : "Disable"} notifications'>
    335                         <i class='material-icons'>notifications_${test.muteNotifications ? "off" : "active"}</i>
    336                       </a>
    337                       <a class='col s6 btn-flat remove-button' test='${test.name}' title='Remove favorite'>
    338                         <i class='material-icons'>clear</i>
    339                       </a>
    340                     </div>
    341                   </c:otherwise>
    342                 </c:choose>
    343               </div>
    344             </c:forEach>
    345           </div>
    346         </c:otherwise>
    347       </c:choose>
    348     </div>
    349     <%@ include file='footer.jsp' %>
    350   </body>
    351 </html>
    352