Showing loading indicator while handling the zip log file.

Test: Tested with browser on GAE(go/vts-web-staging/show_gcs_log) Bug: 74508542 Change-Id: Iff0932678623de31d2228ebf96708ee9d8892bd9
author: Young Gyu Park <younggyu@google.com> 2018-03-13 17:59:30 +0900
committer: Young Gyu Park <younggyu@google.com> 2018-03-13 17:59:30 +0900
commit: 092e1c37b1ad47b72645aace493dc88ae665fbc8 (patch)
tree: 7b84fead0cc12cc90c20271d1ac941a8b120fad2 /src/main/webapp
parent: 0af022a827becb32bb6132bd505efffd350de242 (diff)
download: dashboard-092e1c37b1ad47b72645aace493dc88ae665fbc8.tar.gz
2 files changed, 110 insertions, 33 deletions
diff --git a/src/main/webapp/WEB-INF/jsp/show_gcs_log.jsp b/src/main/webapp/WEB-INF/jsp/show_gcs_log.jsp
index 8bdf416..f9f285e 100644
--- a/src/main/webapp/WEB-INF/jsp/show_gcs_log.jsp
+++ b/src/main/webapp/WEB-INF/jsp/show_gcs_log.jsp
@@ -19,8 +19,7 @@
 
 <html>
   <%@ include file="header.jsp" %>
-  <link rel='stylesheet' href='/css/show_plan_release.css'>
-  <link rel='stylesheet' href='/css/plan_runs.css'>
+  <link rel='stylesheet' href='/css/show_gcs_log.css'>
   <link rel='stylesheet' href='/css/search_header.css'>
   <script src='https://www.gstatic.com/external_hosted/moment/min/moment-with-locales.min.js'></script>
   <script src='js/time.js'></script>
@@ -37,9 +36,11 @@
           startingTop: '4%',  // Starting top style attribute
           endingTop: '10%',  // Ending top style attribute
           ready: function(modal, trigger) {  // Callback for Modal open. Modal and trigger parameters available.
-            if ($(trigger).attr("href") == "#logEntryListModal") {
-              $(modal).find('#modal-entry-list').find("li").remove();
-              paraMap['path'] = trigger.text().trim();
+            $('.loading-overlay').show();
+            if ($(modal).attr("id") == "logEntryListModal") {
+              console.log($(trigger));
+              $(trigger).addClass("active");
+              paraMap['path'] = "${path}" + trigger.text().trim();
               var fileName = paraMap['path'].substring(paraMap['path'].lastIndexOf('/')+1);  // Getting filename
               $(modal).find('#entry-list-modal-title').text(fileName);  // Set file name for modal window
               var url = "${requestScope['javax.servlet.forward.servlet_path']}?path=" + paraMap['path'];
@@ -47,8 +48,10 @@
               $.get( url, function(data) {
                 var entryList = $(modal).find('#modal-entry-list');
                 $(data.entryList).each(function( index, element ) {
-                  entryList.append("<li><a href='#logEntryViewModal'>" + element + "</a></li>");
+                  entryList.append("<li class='collection-item'><a href='#logEntryViewModal'>" + element + "</a></li>");
                 });
+              }).done(function() {
+                  $('.loading-overlay').hide();
               });
             } else {
               paraMap['entry'] = trigger.text().trim();
@@ -56,11 +59,18 @@
               var entryUrl = "${requestScope['javax.servlet.forward.servlet_path']}?path=" + paraMap['path'] + "&entry=" + paraMap['entry'];
               $.get( entryUrl, function(data) {
                 $(modal).find('#entry-view-modal-content').text(data.entryContent);
+              }).done(function() {
+                $('.loading-overlay').hide();
               });
             }
           },
-          complete: function() {
-              console.log("modal closed!");
+          complete: function(modal) {
+              if ($(modal).attr("id") == "logEntryListModal") {
+                  $(modal).find('#modal-entry-list').find("li").remove();
+                  $("div.collection > a.collection-item.active").removeClass('active')
+              } else {
+                  $(modal).find('#entry-view-modal-content').text('');
+              }
           }  // Callback for Modal close
         });
       });
@@ -69,32 +79,40 @@
   <body>
     <div class='wide container'>
       <div class='row' id='release-container'>
-        <h3>Directory List</h3>
-        <c:forEach varStatus="dirLoop" var="dirName" items="${dirList}">
-          <p>
-            <a href="${requestScope['javax.servlet.forward.servlet_path']}?path=${dirName}">
-              <c:out value="${dirName}"></c:out>
-                <c:if test="${dirLoop.first && path ne '/'}">
-                    (Move to Parent)
-                </c:if>
-            </a>
-          </p>
-          <c:if test="${!dirLoop.last}">
-          </c:if>
-        </c:forEach>
-        <hr/>
         <h5>Current Directory Path : ${path}</h5>
         <hr/>
-        <h3>File List</h3>
-        <c:forEach varStatus="fileLoop" var="fileName" items="${fileList}">
-          <p>
-            <a href="#logEntryListModal">
-              <c:out value="${fileName}"></c:out>
-            </a>
-          </p>
-          <c:if test="${!fileLoop.last}">
-          </c:if>
-        </c:forEach>
+        <div class="row">
+          <div class="col s7">
+            <h4>Directory List</h4>
+            <ul class="collection">
+            <c:forEach varStatus="dirLoop" var="dirName" items="${dirList}">
+              <li class="collection-item">
+                <a href="${requestScope['javax.servlet.forward.servlet_path']}?path=${dirName}">
+                  <c:out value="${dirName}"></c:out>
+                  <c:if test="${dirLoop.first && path ne '/'}">
+                    (Move to Parent)
+                  </c:if>
+                </a>
+              </li>
+              <c:if test="${!dirLoop.last}">
+              </c:if>
+            </c:forEach>
+            </ul>
+          </div>
+          <div class="col s5">
+            <h4>File List</h4>
+            <div class="collection">
+            <c:forEach varStatus="fileLoop" var="fileName" items="${fileList}">
+              <a href="#logEntryListModal" class="collection-item">
+                <c:out value="${fileName}"></c:out>
+              </a>
+              <c:if test="${!fileLoop.last}">
+              </c:if>
+            </c:forEach>
+            </div>
+          </div>
+        </div>
+
       </div>
     </div>
 
@@ -105,7 +123,7 @@
       <div class="modal-content">
         <h4 id="entry-list-modal-title" class="truncate"></h4>
         <div id="entry-list-modal-content">
-          <ul id="modal-entry-list"></ul>
+          <ul id="modal-entry-list" class="collection"></ul>
         </div>
       </div>
       <div class="modal-footer">
@@ -118,6 +136,23 @@
           </div>
         </div>
       </div>
+
+      <div class="loading-overlay">
+        <div class="preloader-wrapper big active" style="top: 25%; left: 45%;">
+          <div class="spinner-layer spinner-blue-only">
+            <div class="circle-clipper left">
+              <div class="circle"></div>
+            </div>
+            <div class="gap-patch">
+              <div class="circle"></div>
+            </div>
+            <div class="circle-clipper right">
+              <div class="circle"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+
     </div>
 
     <!-- Modal For Zip file entry's content -->
@@ -131,6 +166,23 @@
       <div class="modal-footer">
         <a href="#!" class="modal-action modal-close waves-effect waves-green btn">Close</a>
       </div>
+
+      <div class="loading-overlay">
+        <div class="preloader-wrapper big active" style="top: 25%; left: 45%;">
+          <div class="spinner-layer spinner-blue-only">
+            <div class="circle-clipper left">
+              <div class="circle"></div>
+            </div>
+            <div class="gap-patch">
+              <div class="circle"></div>
+            </div>
+            <div class="circle-clipper right">
+              <div class="circle"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+
     </div>
   </body>
 </html>
diff --git a/src/main/webapp/css/show_gcs_log.css b/src/main/webapp/css/show_gcs_log.css
new file mode 100644
index 0000000..1960485
--- /dev/null
+++ b/src/main/webapp/css/show_gcs_log.css
@@ -0,0 +1,25 @@
+/* Copyright (C) 2018 The Android Open Source Project
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+.loading-overlay {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #A8A8A8;
+    opacity: 0.4;
+}
author	Young Gyu Park <younggyu@google.com>	2018-03-13 17:59:30 +0900
committer	Young Gyu Park <younggyu@google.com>	2018-03-13 17:59:30 +0900
commit	092e1c37b1ad47b72645aace493dc88ae665fbc8 (patch)
tree	7b84fead0cc12cc90c20271d1ac941a8b120fad2 /src/main/webapp
parent	0af022a827becb32bb6132bd505efffd350de242 (diff)
download	dashboard-092e1c37b1ad47b72645aace493dc88ae665fbc8.tar.gz