diff --git a/app/assets/javascripts/peek.js b/app/assets/javascripts/peek.js index 4ba23ea1a09020f0c273d5d7a237e916ca99ed22..6af0242246f6ce6083d1f69efb08e9ee0e14f81f 100644 --- a/app/assets/javascripts/peek.js +++ b/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); diff --git a/app/views/peek/views/_pg.html.haml b/app/views/peek/views/_pg.html.haml new file mode 100644 index 0000000000000000000000000000000000000000..e789e0c5cb5e6943158c6184263de053a88d306b --- /dev/null +++ b/app/views/peek/views/_pg.html.haml @@ -0,0 +1,15 @@ +%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 diff --git a/vendor/assets/javascripts/peek.js b/vendor/assets/javascripts/peek.js index 2d5d05ca8e64a44693b84e634d096d519efecea9..6a4da020b9d56d4624d3c0706c4c542b892b3c05 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 4b2957c557502dfe75937f6a51d32854407a93b3..0ceeb5b92412aef7a46ebee5a1a3e4e10a73a33c 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; }