diff options
| -rw-r--r-- | app/assets/javascripts/performance_bar/components/detailed_metric.vue | 28 | ||||
| -rw-r--r-- | app/assets/stylesheets/performance_bar.scss | 8 | ||||
| -rw-r--r-- | changelogs/unreleased/sh-add-gitaly-backtrace.yml | 5 | ||||
| -rw-r--r-- | lib/gitlab/gitaly_client.rb | 3 | ||||
| -rw-r--r-- | lib/gitlab/profiler.rb | 4 | ||||
| -rw-r--r-- | lib/peek/views/gitaly.rb | 3 | ||||
| -rw-r--r-- | locale/gitlab.pot | 3 | ||||
| -rw-r--r-- | spec/javascripts/performance_bar/components/detailed_metric_spec.js | 24 |
8 files changed, 65 insertions, 13 deletions
diff --git a/app/assets/javascripts/performance_bar/components/detailed_metric.vue b/app/assets/javascripts/performance_bar/components/detailed_metric.vue index c729198c1d3..dec2a498173 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: { @@ -57,9 +59,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..0e1370d915f 100644 --- a/lib/gitlab/gitaly_client.rb +++ b/lib/gitlab/gitaly_client.rb @@ -165,7 +165,8 @@ 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) + add_call_details(feature: "#{service}##{rpc}", duration: duration, request: request_hash, rpc: rpc, + backtrace: Gitlab::Profiler.clean_backtrace(caller)) end def self.query_time 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/lib/peek/views/gitaly.rb b/lib/peek/views/gitaly.rb index 30f95a10024..0adc891958c 100644 --- a/lib/peek/views/gitaly.rb +++ b/lib/peek/views/gitaly.rb @@ -31,7 +31,8 @@ module Peek pretty_request = call[:request]&.reject { |k, v| v.blank? }.to_h.pretty_inspect call.merge(duration: (call[:duration] * 1000).round(3), - request: pretty_request || {}) + request: pretty_request || {}, + backtrace: call[:backtrace]) end def formatted_duration diff --git a/locale/gitlab.pot b/locale/gitlab.pot index e6e161a2b27..fb53ed0a00f 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -9559,6 +9559,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..a9f8a15a930 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,9 +67,17 @@ 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'); }); }); |