Tweak Peek to display SQL queries

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

2 files changed, 25 insertions, 30 deletions

diff --git a/vendor/assets/javascripts/peek.js b/vendor/assets/javascripts/peek.js
index 2d5d05ca8e6..6a4da020b9d 100644
--- a/vendor/assets/javascripts/peek.js
+++ b/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]);
diff --git a/vendor/assets/stylesheets/peek.scss b/vendor/assets/stylesheets/peek.scss
index 4b2957c5575..0ceeb5b9241 100644
--- a/vendor/assets/stylesheets/peek.scss
+++ b/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; }