From d30576c5a7197b167d1f2c472361dd4ce77b8262 Mon Sep 17 00:00:00 2001 From: Sean McGivern Date: Tue, 6 Mar 2018 14:02:18 +0000 Subject: Add Gitaly call details to the performance bar The same as the SQL queries, show the details of Gitaly calls in the performance bar, as a modal that can be opened in the same way. --- vendor/assets/javascripts/peek.js | 72 +++++++++++++++++++++++++-------------- 1 file changed, 47 insertions(+), 25 deletions(-) (limited to 'vendor/assets') diff --git a/vendor/assets/javascripts/peek.js b/vendor/assets/javascripts/peek.js index 695eeb27c17..607517f045f 100644 --- a/vendor/assets/javascripts/peek.js +++ b/vendor/assets/javascripts/peek.js @@ -3,12 +3,12 @@ * * - Removed the dependency on jquery.tipsy * - Removed the initializeTipsy and toggleBar functions - * - Customized updatePerformanceBar to handle SQL queries report specificities + * - Customized updatePerformanceBar to handle SQL query and Gitaly call lists * - Changed /peek/results to /-/peek/results * - Removed the keypress, pjax:end, page:change, and turbolinks:load handlers */ (function($) { - var fetchRequestResults, getRequestId, peekEnabled, updatePerformanceBar; + var fetchRequestResults, getRequestId, peekEnabled, updatePerformanceBar, createTable, createTableRow; getRequestId = function() { return $('#peek').data('requestId'); }; @@ -16,39 +16,61 @@ return $('#peek').length; }; updatePerformanceBar = function(results) { - var key, label, data, table, html, tr, duration_td, sql_td, strong; - Object.keys(results.data).forEach(function(key) { Object.keys(results.data[key]).forEach(function(label) { + var data, table, target; + data = results.data[key][label]; + table = createTable(key, label, data); + target = $("[data-defer-to=" + key + "-" + label + "]"); - if (label == 'queries') { - table = document.createElement('table'); + if (table) { + target.html(table); + } else { + target.text(data); + } + }); + }); + return $(document).trigger('peek:render', [getRequestId(), results]); + }; + createTable = function(key, label, data) { + var table; - for (var i = 0; i < data.length; i += 1) { - tr = document.createElement('tr'); - duration_td = document.createElement('td'); - sql_td = document.createElement('td'); - strong = document.createElement('strong'); + if (label != 'queries' && label != 'details') { return; } - strong.append(data[i]['duration'] + 'ms'); - duration_td.appendChild(strong); - tr.appendChild(duration_td); + table = document.createElement('table'); - sql_td.appendChild(document.createTextNode(data[i]['sql'])); - tr.appendChild(sql_td); + for (var i = 0; i < data.length; i += 1) { + table.appendChild(createTableRow(data[i])); + } - table.appendChild(tr); - } + table.className = 'table'; - table.className = 'table'; - $("[data-defer-to=" + key + "-" + label + "]").html(table); - } else { - $("[data-defer-to=" + key + "-" + label + "]").text(results.data[key][label]); - } - }); + return table; + }; + createTableRow = function(row) { + var tr, duration_td, strong; + + tr = document.createElement('tr'); + duration_td = document.createElement('td'); + strong = document.createElement('strong'); + + strong.append(row['duration'] + 'ms'); + duration_td.appendChild(strong); + tr.appendChild(duration_td); + + ['sql', 'feature', 'enabled', 'request'].forEach(function(key) { + var td; + + if (!row[key]) { return; } + + td = document.createElement('td'); + td.appendChild(document.createTextNode(row[key])); + + tr.appendChild(td); }); - return $(document).trigger('peek:render', [getRequestId(), results]); + + return tr; }; fetchRequestResults = function() { return $.ajax('/-/peek/results', { -- cgit v1.2.3