Tweak Peek to display SQL queries

Signed-off-by: Rémy Coutable <remy@rymai.me>

app/assets/javascripts/peek.js

@@ -2,3 +2,15 @@ import 'vendor/jquery.tipsy';
 import 'vendor/peek';
 import 'vendor/peek.performance_bar';
 import 'vendor/peek.rblineprof';
+
+(function() {
+  $(document).on('click', '#peek-show-queries', function(e) {
+    console.log('peek!');
+    var $modal;
+    $modal = $('#modal-peek-pg-queries');
+    if ($modal.length) {
+      $modal.modal('toggle');
+    }
+    return e.preventDefault();
+  });
+}).call(window);

app/views/peek/views/_pg.html.haml

+%strong
+  %a#peek-show-queries{ href: '#' }
+    %span{ data: { defer_to: "#{view.defer_key}-duration" }}...
+    /
+    %span{ data: { defer_to: "#{view.defer_key}-calls" }}...
+    /
+  #modal-peek-pg-queries.modal{ tabindex: -1 }
+    .modal-dialog
+      #modal-peek-pg-queries-content.modal-content
+        .modal-header
+          %a.close{ href: "#", "data-dismiss" => "modal" } ×
+          %h4
+            SQL queries
+        .modal-body{ data: { defer_to: "#{view.defer_key}-queries" }}...
+pg

vendor/assets/javascripts/peek.js

@@ -15,10 +15,29 @@ requestId = null;
     return $('#peek').length;
   };
   updatePerformanceBar = function(results) {
-    var key, label;
+    var key, label, data, table, html, tr, td;
     for (key in results.data) {
       for (label in results.data[key]) {
-        $("[data-defer-to=" + key + "-" + label + "]").text(results.data[key][label]);
+        data = results.data[key][label];
+        console.log(data);
+        if (Array.isArray(data)) {
+          table = document.createElement('table');
+
+          for (var i = 0; i < data.length; i += 1) {
+            tr = document.createElement('tr');
+            td = document.createElement('td');
+
+            td.appendChild(document.createTextNode(data[i]));
+            tr.appendChild(td);
+            table.appendChild(tr);
+          }
+
+          $table = $(table).addClass('table');
+          $("[data-defer-to=" + key + "-" + label + "]").html($table);
+        }
+        else {
+          $("[data-defer-to=" + key + "-" + label + "]").text(results.data[key][label]);
+        }
       }
     }
     return $(document).trigger('peek:render', [getRequestId(), results]);

vendor/assets/stylesheets/peek.scss

@@ -7,7 +7,6 @@
   height: 35px;
   line-height: 35px;
   color: #999;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
 
   .hidden {
     display: none;
@@ -86,33 +85,10 @@
   }
 }
 
-// .performance-bar {
-//   position: relative;
-//   top: 2px;
-//   display: inline-block;
-//   width: 75px;
-//   height: 10px;
-//   margin: 0 0 0 5px;
-//   list-style: none;
-//   background-color: rgba(0, 0, 0, .5);
-//   border: 1px solid rgba(0, 0, 0, .7);
-//   border-radius: 2px;
-//   box-shadow: 0 1px 0 rgba(255, 255, 255, .15);
-//
-//   li {
-//     position: absolute;
-//     top: 0;
-//     bottom: 0;
-//     overflow: hidden;
-//     opacity: .8;
-//     color: transparent;
-//
-//     &:hover {
-//       opacity: 1;
-//       cursor: default;
-//     }
-//   }
-// }
+#modal-peek-pg-queries-content {
+  // background: #999;
+  color: #000;
+}
 
 .tipsy { font-size: 10px; position: absolute; padding: 5px; z-index: 100000; }
   .tipsy-inner { background-color: #000; color: #FFF; max-width: 200px; padding: 5px 8px 4px 8px; text-align: center; }