Make agent logs and messages links to modal with details

Author: ipweblab

app/assets/javascripts/components/utils.js

@@ -55,7 +55,7 @@
       const { title, body, onHide } = param;
       $("body").append(`\
 <div class="modal fade" tabindex="-1" id='dynamic-modal' role="dialog" aria-labelledby="dynamic-modal-label" aria-hidden="true">
-  <div class="modal-dialog modal-lg">
+  <div class="modal-dialog modal-xl">
     <div class="modal-content">
       <div class="modal-header">
         <h4 class="modal-title" id="dynamic-modal-label"></h4>

app/assets/stylesheets/agent.scss

@@ -234,6 +234,40 @@ li.issues {
   }
 }
 
+.message-payload {
+  @extend .text-monospace;
+  padding: 10px;
+  border-radius: 2px;
+  background: #fff;
+  color: #000;
+
+  &.truncated {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    word-wrap: normal;
+    width: 10rem;
+    @include media-breakpoint-up(md) {
+      width: 15rem;
+    }
+    @include media-breakpoint-up(lg) {
+      width: 29rem;
+    }
+    @include media-breakpoint-up(xl) {
+      max-width: 619px;
+    }
+
+    &:hover {
+      cursor: pointer;
+      background: $gray-300;
+    }
+  }
+}
+
+body.agents .modal pre {
+  white-space:normal;
+}
+
 // Nav
 
 .agents-top-nav {

app/assets/stylesheets/general.scss

@@ -11,11 +11,9 @@
 .flash.alert:empty {
   display: none;
 }
-
 // Fix Firefox and Chrome outlines on focused navs.
-nav .nav-item .nav-link:focus,
-.dropdown-menu .dropdown-item:focus
-{
+.dropdown-menu .dropdown-item:focus,
+nav .nav-item .nav-link:focus {
   outline: none;
 }
 
@@ -59,33 +57,6 @@ nav .nav-item .nav-link:focus,
   display: none;
 }
 
-.message-payload {
-  @extend .text-monospace;
-  padding: 0em 1em;
-  @extend .rounded;
-  background: #fff;
-  color: #000;
-
-  &.truncated {
-    height: 2rem;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    word-wrap: normal;
-
-    width: 10rem;
-    @include media-breakpoint-up(md){
-      width: 20rem;
-    }
-    @include media-breakpoint-up(lg){
-      width: 30rem;
-    }
-    @include media-breakpoint-up(xl){
-      width: 40rem;
-    }
-  }
-}
-
 .ace_editor {
   height: 10rem;
   @extend .rounded;
@@ -105,6 +76,11 @@ nav .nav-item .nav-link:focus,
 #error_explanation {
   @extend .alert;
   @extend .alert-danger;
+
+  li {
+    line-height: 1.2;
+    margin-bottom: 5px;
+  }
 }
 
 .field_with_errors .form-control {

app/assets/stylesheets/tables.scss

@@ -59,6 +59,12 @@ table.table {
     border-bottom-width: 0 !important;
   }
 
+  a.btn.btn-primary {
+    white-space: nowrap;
+  }
+
+  a:not(.btn) {
+    cursor: pointer;
   }
 }
 

app/views/logs/index.html.erb

@@ -14,7 +14,10 @@
 
         <% @logs.each do |log| %>
           <tr>
-            <td><%= truncate log.message, :length => 200, :omission => "..." %></td>
+            <td>
+              <a class="show-log-details" data-toggle="modal" data-modal-content="<%= log.message %>" data-modal-title="<%= log.level >= 4 ? 'Error' : 'Info' %>">
+                <%= truncate log.message, :length => 200, :omission => "..." %></td>
+              </a>
             <td data-order="<%= relative_time(log.created_at, true) %>"><%= time_ago_in_words log.created_at %> ago</td>
 
             <td>

app/views/messages/index.html.erb

@@ -16,7 +16,11 @@
         <% next unless message.agent %>
         <%= content_tag :tr, class: (highlighted?(message.id) ? 'hl' : nil) do %>
           <td data-order="<%= relative_time(message.created_at, true) %>" title="<%= message.created_at %>"><%= time_ago_in_words message.created_at %> ago</td>
-          <td><div class="message-payload truncated"><%= truncate message.payload.to_json, :length => 200, :omission => "" %></div></td>
+          <td>
+            <div class="message-payload truncated message-show" data-url="<%= agent_message_path(@agent, message) %>">
+                <%= truncate message.payload.to_json, :length => 200, :omission => "" %>
+            </div>
+          </td>
           <td>
             <div class="btn-group btn-group-sm">
               <%= link_to 'Show', '#', class: 'btn btn-primary message-show', data: { url: agent_message_path(@agent, message) }%>