Merge branch 'sh-add-gitaly-backtrace' into 'master'

Add backtrace to Gitaly performance bar

Closes #60092

See merge request gitlab-org/gitlab-ce!27345

7 files changed, 68 insertions, 15 deletions

diff --git a/app/assets/javascripts/performance_bar/components/detailed_metric.vue b/app/assets/javascripts/performance_bar/components/detailed_metric.vue
index 19a81713964..8f3ba9779fb 100644
--- a/app/assets/javascripts/performance_bar/components/detailed_metric.vue
+++ b/app/assets/javascripts/performance_bar/components/detailed_metric.vue
@@ -1,9 +1,11 @@
 <script>
 import GlModal from '~/vue_shared/components/gl_modal.vue';
+import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
     GlModal,
+    Icon,
   },
   props: {
     currentRequest: {
@@ -61,9 +63,31 @@ export default {
         <template v-if="detailsList.length">
           <tr v-for="(item, index) in detailsList" :key="index">
             <td>
-              <strong>{{ item.duration }}ms</strong>
+              <span>{{ item.duration }}ms</span>
+            </td>
+            <td>
+              <div class="js-toggle-container">
+                <div
+                  v-for="(key, keyIndex) in keys"
+                  :key="key"
+                  class="break-word"
+                  :class="{ 'mb-3 bold': keyIndex == 0 }"
+                >
+                  {{ item[key] }}
+                  <button
+                    v-if="keyIndex == 0 && item.backtrace"
+                    class="text-expander js-toggle-button"
+                    type="button"
+                    :aria-label="__('Toggle backtrace')"
+                  >
+                    <icon :size="12" name="ellipsis_h" />
+                  </button>
+                </div>
+                <pre v-if="item.backtrace" class="backtrace-row js-toggle-content mt-2">{{
+                  item.backtrace
+                }}</pre>
+              </div>
             </td>
-            <td v-for="key in keys" :key="key" class="break-word">{{ item[key] }}</td>
           </tr>
         </template>
         <template v-else>
diff --git a/app/assets/stylesheets/performance_bar.scss b/app/assets/stylesheets/performance_bar.scss
index 9c01a2f8bda..5a8940ffd6d 100644
--- a/app/assets/stylesheets/performance_bar.scss
+++ b/app/assets/stylesheets/performance_bar.scss
@@ -79,8 +79,12 @@
   table {
     color: $black;
 
-    strong {
-      color: $black;
+    td {
+      vertical-align: top;
+    }
+
+    .backtrace-row {
+      display: none;
     }
   }
 
diff --git a/changelogs/unreleased/sh-add-gitaly-backtrace.yml b/changelogs/unreleased/sh-add-gitaly-backtrace.yml
new file mode 100644
index 00000000000..1515edd6db9
--- /dev/null
+++ b/changelogs/unreleased/sh-add-gitaly-backtrace.yml
@@ -0,0 +1,5 @@
+---
+title: Add backtrace to Gitaly performance bar
+merge_request: 27345
+author:
+type: other
diff --git a/lib/gitlab/gitaly_client.rb b/lib/gitlab/gitaly_client.rb
index 35565b68388..726c4d95da9 100644
--- a/lib/gitlab/gitaly_client.rb
+++ b/lib/gitlab/gitaly_client.rb
@@ -165,7 +165,10 @@ module Gitlab
         current_transaction_labels.merge(gitaly_service: service.to_s, rpc: rpc.to_s),
         duration)
 
-      add_call_details(feature: "#{service}##{rpc}", duration: duration, request: request_hash, rpc: rpc)
+      if peek_enabled?
+        add_call_details(feature: "#{service}##{rpc}", duration: duration, request: request_hash, rpc: rpc,
+                         backtrace: Gitlab::Profiler.clean_backtrace(caller))
+      end
     end
 
     def self.query_time
@@ -350,15 +353,17 @@ module Gitlab
       Gitlab::SafeRequestStore["gitaly_call_permitted"] = 0
     end
 
-    def self.add_call_details(details)
-      return unless Gitlab::SafeRequestStore[:peek_enabled]
+    def self.peek_enabled?
+      Gitlab::SafeRequestStore[:peek_enabled]
+    end
 
+    def self.add_call_details(details)
       Gitlab::SafeRequestStore['gitaly_call_details'] ||= []
       Gitlab::SafeRequestStore['gitaly_call_details'] << details
     end
 
     def self.list_call_details
-      return [] unless Gitlab::SafeRequestStore[:peek_enabled]
+      return [] unless peek_enabled?
 
       Gitlab::SafeRequestStore['gitaly_call_details'] || []
     end
diff --git a/lib/gitlab/profiler.rb b/lib/gitlab/profiler.rb
index 93a9fcf1591..28ed587f5c7 100644
--- a/lib/gitlab/profiler.rb
+++ b/lib/gitlab/profiler.rb
@@ -16,7 +16,11 @@ module Gitlab
       ee/lib/gitlab/middleware/
       lib/gitlab/performance_bar/
       lib/gitlab/request_profiler/
+      lib/gitlab/query_limiting/
+      lib/gitlab/tracing/
       lib/gitlab/profiler.rb
+      lib/gitlab/correlation_id.rb
+      lib/gitlab/webpack/dev_server_middleware.rb
     ].freeze
 
     # Takes a URL to profile (can be a fully-qualified URL, or an absolute path)
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index fc412a936e9..121018c8b65 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -9565,6 +9565,9 @@ msgstr ""
 msgid "Toggle Sidebar"
 msgstr ""
 
+msgid "Toggle backtrace"
+msgstr ""
+
 msgid "Toggle comments for this file"
 msgstr ""
 
diff --git a/spec/javascripts/performance_bar/components/detailed_metric_spec.js b/spec/javascripts/performance_bar/components/detailed_metric_spec.js
index e91685e50c5..8a7aa057186 100644
--- a/spec/javascripts/performance_bar/components/detailed_metric_spec.js
+++ b/spec/javascripts/performance_bar/components/detailed_metric_spec.js
@@ -27,8 +27,8 @@ describe('detailedMetric', () => {
 
   describe('when the current request has details', () => {
     const requestDetails = [
-      { duration: '100', feature: 'find_commit', request: 'abcdef' },
-      { duration: '23', feature: 'rebase_in_progress', request: '' },
+      { duration: '100', feature: 'find_commit', request: 'abcdef', backtrace: ['hello', 'world'] },
+      { duration: '23', feature: 'rebase_in_progress', request: '', backtrace: ['world', 'hello'] },
     ];
 
     beforeEach(() => {
@@ -54,9 +54,11 @@ describe('detailedMetric', () => {
     });
 
     it('adds a modal with a table of the details', () => {
-      vm.$el.querySelectorAll('.performance-bar-modal td strong').forEach((duration, index) => {
-        expect(duration.innerText).toContain(requestDetails[index].duration);
-      });
+      vm.$el
+        .querySelectorAll('.performance-bar-modal td:nth-child(1)')
+        .forEach((duration, index) => {
+          expect(duration.innerText).toContain(requestDetails[index].duration);
+        });
 
       vm.$el
         .querySelectorAll('.performance-bar-modal td:nth-child(2)')
@@ -65,10 +67,16 @@ describe('detailedMetric', () => {
         });
 
       vm.$el
-        .querySelectorAll('.performance-bar-modal td:nth-child(3)')
+        .querySelectorAll('.performance-bar-modal td:nth-child(2)')
         .forEach((request, index) => {
-          expect(request.innerText).toEqual(requestDetails[index].request);
+          expect(request.innerText).toContain(requestDetails[index].request);
         });
+
+      expect(vm.$el.querySelector('.text-expander.js-toggle-button')).not.toBeNull();
+
+      vm.$el.querySelectorAll('.performance-bar-modal td:nth-child(2)').forEach(request => {
+        expect(request.innerText).toContain('world');
+      });
     });
 
     it('displays the metric name', () => {