Always show job indicators and fix lingering overlay of job error log

Author: ipweblab

app/assets/javascripts/components/worker-checker.js

@@ -28,7 +28,7 @@ $(function() {
             }
           } else {
             if (elem.is(":visible")) {
-              elem.tooltip('dispose').fadeOut();
+              // elem.tooltip('dispose').fadeOut();
             }
           }
         }
@@ -39,7 +39,7 @@ $(function() {
                                 find(".number").
                                 text(json.message_count);
         } else {
-          $("#message-indicator").tooltip('dispose').fadeOut();
+          // $("#message-indicator").tooltip('dispose').fadeOut();
         }
 
         $("#message-indicator").data("sinceId", json.max_id);
@@ -48,7 +48,21 @@ $(function() {
         if ((document.location.pathname === '/jobs') && ($(".modal[aria-hidden=false]").length === 0) && (previousJobs != null) && (previousJobs.join(',') !== currentJobs.join(','))) {
           if (!document.location.search || (document.location.search === '?page=1')) {
             $.get('/jobs', data => {
-              return $("#main-content").html(data);
+              if ($('.modal-backdrop').is(":visible")) {
+                $('.modal-backdrop.fade.show').hide();
+              }
+              $("#main-content").html(data);
+              $("#jobs-table").dataTable({
+                "destroy": true,
+                paging: true,
+                statesave: true,
+                order: [[2, 'asc']],
+                columnDefs: [
+                  { targets: [0, 1], orderable: true, searchable: true },
+                  { targets: [2, 3, 5], orderable: true, searchable: false },
+                  { targets: '_all', orderable: false, searchable: false },
+                ]
+              });
             });
           }
         }

app/assets/javascripts/pages/jobs-index-page.js

@@ -1,11 +1,12 @@
 this.JobsIndexPage = class JobsIndexPage {
   constructor() {
     $("#jobs-table").dataTable({
-      paging: false,
+      paging: true,
+      statesave: true,
       order: [[2, 'asc']],
       columnDefs: [
         { targets: [0, 1], orderable: true, searchable: true },
-        { targets: [2, 3], orderable: true, searchable: false },
+        { targets: [2, 3, 5], orderable: true, searchable: false },
         { targets: '_all', orderable: false, searchable: false },
       ]
     });

app/assets/stylesheets/jobs.scss

@@ -1,3 +1,25 @@
-.big-modal-dialog {
+.modal-dialog.big-modal-dialog {
   width: 90% !important;
-}
+  max-width: 90%;
+}
+
+#jobs-table {
+	.badge-info {
+		background-color: $green;
+	}
+
+	a:not(.btn) {
+		cursor: pointer;
+		text-decoration: underline;
+
+		&:hover {
+			text-decoration: none;
+		}
+	}
+}
+
+body.jobs .modal {
+	pre {
+  	white-space:normal;
+	}
+}

app/assets/stylesheets/navbar.scss

@@ -21,15 +21,16 @@
 
   #message-indicator,
   .job-indicator {
-    font-size: 1.22rem;
     line-height: 55px;
     padding-right: 1rem;
 
     a {
       color: $gray-500;
+      display: inline-flex;
 
       .badge {
         font-weight: 200;
+        font-size: 14px;
 
         i {
           color: $gray-500;

app/views/jobs/index.html.erb

@@ -55,12 +55,12 @@
                     <div class="modal-dialog big-modal-dialog">
                       <div class="modal-content">
                         <div class="modal-header">
-                          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                           <h4 class="modal-title" id="myModalLabel">Error Backtrace</h4>
+                          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                         </div>
                         <div class="modal-body">
                           <pre>
-                            <%= raw html_escape(job.last_error).split("\n").join('<br/>') %>
+                            <%= raw html_escape(job.last_error).split("\n").join('<br>') %>
                           </pre>
                         </div>
                       </div>