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.

1 files changed, 47 insertions, 25 deletions

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', {