add auto scroll and refresh the job log

src/main/html/webapp/components/core/job/detail/logs/logs.js

@@ -1,18 +1,59 @@
 import $ from 'jquery';
 import Control from 'can-control';
-
 import template from './logs.stache';
 
-
 export default Control.extend({
+  init: function(element, options) {
+    this.element = element;
+    this.options = options;
+    this.loadLogs();
+
+    // Start refresh if job is in running state (state 1, 2, or 3)
+    if ([1, 2, 3].includes(options.job.attr('state'))) {
+      this.startRefresh();
+    }
 
-  "init": function(element, options) {
+    // Listen for state changes
+    this.options.job.bind('state', (ev, newState) => {
+      if ([1, 2, 3].includes(newState)) {
+        this.startRefresh();
+      } else {
+        this.stopRefresh();
+      }
+    });
+  },
 
-    $.get('logs/' + options.job.attr('id'),function(data) {
-      $(element).html(template({
+  loadLogs: function() {
+    $.get('logs/' + this.options.job.attr('id'), (data) => {
+      $(this.element).html(template({
         content: data,
-        job: options.job
+        job: this.options.job
       }));
+
+      // Auto scroll to bottom after content loads
+      const preElement = $(this.element).find('pre');
+      preElement.scrollTop(preElement[0].scrollHeight);
     });
+  },
+
+  startRefresh: function() {
+    if (!this.refreshInterval) {
+      this.refreshInterval = setInterval(() => {
+        this.loadLogs();
+      }, 5000);
+    }
+  },
+
+  stopRefresh: function() {
+    if (this.refreshInterval) {
+      clearInterval(this.refreshInterval);
+      this.refreshInterval = null;
+    }
+  },
+
+  destroy: function() {
+    this.stopRefresh();
+    this.options.job.unbind('state');
+    Control.prototype.destroy.call(this);
   }
 });

src/main/html/webapp/components/core/job/detail/logs/logs.stache

@@ -8,7 +8,7 @@
   </div>
 
   <div class="list-group-item flex-column align-items-start" style="padding: 0px;">
-    <pre class="tomorrow-night-eighties-ansi-theme">{{{ansiToHtml(content)}}}</pre>
+    <pre class="tomorrow-night-eighties-ansi-theme" style="max-height: 500px; overflow-y: auto; margin-bottom: 0;">{{{ansiToHtml(content)}}}</pre>
   </div>
 </div>
 <br>