From a8d207b68612e2e6d6afcd16b0c68f98bbaab16e Mon Sep 17 00:00:00 2001
From: Peter Amstutz <peter.amstutz@curoverse.com>
Date: Tue, 17 Jun 2014 02:22:43 +0000
Subject: [PATCH] 2883: Added pagination for large logs.

---
 .../app/assets/javascripts/log_viewer.js      | 53 +++++++++++++++----
 .../app/views/jobs/_show_log.html.erb         | 22 +++++++-
 2 files changed, 63 insertions(+), 12 deletions(-)

diff --git a/apps/workbench/app/assets/javascripts/log_viewer.js b/apps/workbench/app/assets/javascripts/log_viewer.js
index e51b4223c4..e89ac83c11 100644
--- a/apps/workbench/app/assets/javascripts/log_viewer.js
+++ b/apps/workbench/app/assets/javascripts/log_viewer.js
@@ -8,6 +8,8 @@ function newTaskState() {
 
 function addToLogViewer(logViewer, lines, taskState) {
     var re = /((\d\d\d\d)-(\d\d)-(\d\d))_((\d\d):(\d\d):(\d\d)) ([a-z0-9]{5}-[a-z0-9]{5}-[a-z0-9]{15}) (\d+) (\d+)? (.*)/;
+
+    var items = [];
     for (var a in lines) {
         var v = lines[a].match(re);
         if (v != null) {
@@ -47,7 +49,6 @@ function addToLogViewer(logViewer, lines, taskState) {
                         taskState[v11].outcome = "success";
                         taskState[v11].runtime = Number(m[1]);
                         taskState.complete_count += 1;
-                        console.log(taskState[v11].runtime);
                     }
                     else if (m = /^failure \(\#\d+, (temporary|permanent)\) after (\d+) second/.exec(message)) {
                         taskState[v11].outcome = "failure";
@@ -56,7 +57,6 @@ function addToLogViewer(logViewer, lines, taskState) {
                         if (m[1] == "permanent") {
                             taskState.incomplete_count += 1;
                         }
-                        console.log(taskState[v11].runtime);
                     }
                     else if (m = /^child \d+ started on ([^.]*)\.(\d+)/.exec(message)) {
                         taskState[v11].node = m[1];
@@ -64,13 +64,11 @@ function addToLogViewer(logViewer, lines, taskState) {
                         if (taskState.nodes.indexOf(m[1], 0) == -1) {
                             taskState.nodes.push(m[1]);
                         }
-                        for (var i in logViewer.items) {
+                        for (var i in items) {
                             if (i > 0) {
-                                var val = logViewer.items[i].values();
-                                if (val.taskid === v11) {
-                                    val.node = m[1];
-                                    val.slot = m[2];
-                                    logViewer.items[i].values(val);
+                                if (items[i].taskid === v11) {
+                                    items[i].node = m[1];
+                                    items[i].slot = m[2];
                                 }
                             }
                         }
@@ -83,7 +81,7 @@ function addToLogViewer(logViewer, lines, taskState) {
                 type = "crunch";
             }
 
-            logViewer.add({
+            items.push({
                 id: logViewer.items.length,
                 ts: ts,
                 timestamp: ts.toLocaleDateString() + " " + ts.toLocaleTimeString(),
@@ -93,12 +91,11 @@ function addToLogViewer(logViewer, lines, taskState) {
                 message: message,
                 type: type
             });
-
         } else {
             console.log("Did not parse: " + lines[a]);
         }
     }
-    logViewer.update();
+    logViewer.add(items);
 }
 
 function sortById(a, b, opt) {
@@ -231,4 +228,38 @@ function generateJobOverview(id, logViewer, taskState) {
     }
 
     $(id).html(html);
+}
+
+function gotoPage(n, logViewer, page, id) {
+    logViewer.page_offset = n;
+    logViewer.show(n*page, page);
+}
+
+function updatePaging(id, logViewer, page) {
+    var p = "";
+    var i = logViewer.matchingItems.length;
+    for (var n = 0; (n*page) < i; n += 1) {
+        if (n == logViewer.page_offset) {
+            p += " " + (n+1) + " ";
+        } else {
+            p += "<a href=\"#\" class='log-viewer-page-" + n + "'>" + (n+1) + "</a> ";
+        }
+    }
+    $(id).html(p);
+    for (var n = 0; (n*page) < i; n += 1) {
+        (function(n) {
+            $(".log-viewer-page-" + n).on("click", function() {
+                gotoPage(n, logViewer, page, id);
+                return false;
+            });
+        })(n);
+    }
+}
+
+function nextPage(logViewer, page, id) {
+    gotoPage(logViewer.page_offset+1, logViewer, page, id);
+}
+
+function prevPage(logViewer, page, id) {
+    gotoPage(logViewer.page_offset-1, logViewer, page, id);
 }
\ No newline at end of file
diff --git a/apps/workbench/app/views/jobs/_show_log.html.erb b/apps/workbench/app/views/jobs/_show_log.html.erb
index a3aac798a5..c79f154aa5 100644
--- a/apps/workbench/app/views/jobs/_show_log.html.erb
+++ b/apps/workbench/app/views/jobs/_show_log.html.erb
@@ -1,10 +1,16 @@
 <script>
 (function() {
+var pagesize = 100;
 var logViewer = new List('log-viewer', {
   valueNames: [ 'id', 'timestamp', 'taskid', 'message', 'type'],
-  page: 10000,
+  page: pagesize
 });
 
+logViewer.page_offset = 0;
+logViewer.on("updated", function() { updatePaging(".log-viewer-paging", logViewer, pagesize) } );
+$(".log-viewer-page-up").on("click", function() { prevPage(logViewer, pagesize, ".log-viewer-paging"); return false; });
+$(".log-viewer-page-down").on("click", function() { nextPage(logViewer, pagesize, ".log-viewer-paging"); return false; });
+
 var taskState = newTaskState();
 
 var makeFilter = function() {
@@ -153,6 +159,12 @@ $("#set-show-failed-only").on("click", function() {
 
   </div>
 
+  <div style="font-size: 18px">
+    <a href="#" class="log-viewer-page-up"><span class='glyphicon glyphicon-arrow-up'></span></a>
+    <span class="log-viewer-paging"></span>
+    <a href="#" class="log-viewer-page-down"><span class='glyphicon glyphicon-arrow-down'></span></a>
+  </div>
+
   <table class="log-viewer-table">
     <thead>
       <tr>
@@ -178,6 +190,14 @@ $("#set-show-failed-only").on("click", function() {
     </tbody>
   </table>
 
+
+  <div style="font-size: 18px">
+    <a href="#" class="log-viewer-page-up"><span class='glyphicon glyphicon-arrow-up'></span></a>
+    <span class="log-viewer-paging"></span>
+    <a href="#" class="log-viewer-page-down"><span class='glyphicon glyphicon-arrow-down'></span></a>
+  </div>
+
+
 </div>
 
 <% if !@object.log %>
-- 
2.39.5