[SPARK-8171][WEB UI] Javascript based infinite scrolling for the log page

Updated the log page by replacing the current pagination with a javascript-based infinite scroll solution

Author: Alex Bozarth <ajbozart@us.ibm.com>

Closes #10910 from ajbozarth/spark8171.

2 files changed, 139 insertions, 0 deletions

diff --git a/core/src/main/resources/org/apache/spark/ui/static/log-view.js b/core/src/main/resources/org/apache/spark/ui/static/log-view.js
new file mode 100644
index 0000000000..1782b4f209
--- /dev/null
+++ b/core/src/main/resources/org/apache/spark/ui/static/log-view.js
@@ -0,0 +1,129 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You 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.
+ */
+
+var baseParams;
+
+var curLogLength;
+var startByte;
+var endByte;
+var totalLogLength;
+
+var byteLength;
+
+function setLogScroll(oldHeight) {
+  var logContent = $(".log-content");
+  logContent.scrollTop(logContent[0].scrollHeight - oldHeight);
+}
+
+function tailLog() {
+  var logContent = $(".log-content");
+  logContent.scrollTop(logContent[0].scrollHeight);
+}
+
+function setLogData() {
+  $('#log-data').html("Showing " + curLogLength + " Bytes: " + startByte
+    + " - " + endByte + " of " + totalLogLength);
+}
+
+function disableMoreButton() {
+  var moreBtn = $(".log-more-btn");
+  moreBtn.attr("disabled", "disabled");
+  moreBtn.html("Top of Log");
+}
+
+function noNewAlert() {
+  var alert = $(".no-new-alert");
+  alert.css("display", "block");
+  window.setTimeout(function () {alert.css("display", "none");}, 4000);
+}
+
+function loadMore() {
+  var offset = Math.max(startByte - byteLength, 0);
+  var moreByteLength = Math.min(byteLength, startByte);
+
+  $.ajax({
+    type: "GET",
+    url: "/log" + baseParams + "&offset=" + offset + "&byteLength=" + moreByteLength,
+    success: function (data) {
+      var oldHeight = $(".log-content")[0].scrollHeight;
+      var newlineIndex = data.indexOf('\n');
+      var dataInfo = data.substring(0, newlineIndex).match(/\d+/g);
+      var retStartByte = dataInfo[0];
+      var retLogLength = dataInfo[2];
+
+      var cleanData = data.substring(newlineIndex + 1);
+      if (retStartByte == 0) {
+        disableMoreButton();
+      }
+      $("pre", ".log-content").prepend(cleanData);
+
+      curLogLength = curLogLength + (startByte - retStartByte);
+      startByte = retStartByte;
+      totalLogLength = retLogLength;
+      setLogScroll(oldHeight);
+      setLogData();
+    }
+  });
+}
+
+function loadNew() {
+  $.ajax({
+    type: "GET",
+    url: "/log" + baseParams + "&byteLength=0",
+    success: function (data) {
+      var dataInfo = data.substring(0, data.indexOf('\n')).match(/\d+/g);
+      var newDataLen = dataInfo[2] - totalLogLength;
+      if (newDataLen != 0) {
+        $.ajax({
+          type: "GET",
+          url: "/log" + baseParams + "&byteLength=" + newDataLen,
+          success: function (data) {
+            var newlineIndex = data.indexOf('\n');
+            var dataInfo = data.substring(0, newlineIndex).match(/\d+/g);
+            var retStartByte = dataInfo[0];
+            var retEndByte = dataInfo[1];
+            var retLogLength = dataInfo[2];
+
+            var cleanData = data.substring(newlineIndex + 1);
+            $("pre", ".log-content").append(cleanData);
+
+            curLogLength = curLogLength + (retEndByte - retStartByte);
+            endByte = retEndByte;
+            totalLogLength = retLogLength;
+            tailLog();
+            setLogData();
+          }
+        });
+      } else {
+        noNewAlert();
+      }
+    }
+  });
+}
+
+function initLogPage(params, logLen, start, end, totLogLen, defaultLen) {
+  baseParams = params;
+  curLogLength = logLen;
+  startByte = start;
+  endByte = end;
+  totalLogLength = totLogLen;
+  byteLength = defaultLen;
+  tailLog();
+  if (startByte == 0) {
+    disableMoreButton();
+  }
+}
\ No newline at end of file
diff --git a/core/src/main/resources/org/apache/spark/ui/static/webui.css b/core/src/main/resources/org/apache/spark/ui/static/webui.css
index 47dd9162a1..595e80ab5e 100644
--- a/core/src/main/resources/org/apache/spark/ui/static/webui.css
+++ b/core/src/main/resources/org/apache/spark/ui/static/webui.css
@@ -237,3 +237,13 @@ a.expandbutton {
   color: #333;
   text-decoration: none;
 }
+
+.log-more-btn, .log-new-btn {
+  width: 100%
+}
+
+.no-new-alert {
+  text-align: center;
+  margin: 0;
+  padding: 4px 0;
+}
\ No newline at end of file