diff options
author | Stan Hu <stanhu@gmail.com> | 2019-04-12 22:54:32 -0700 |
---|---|---|
committer | Stan Hu <stanhu@gmail.com> | 2019-04-16 21:55:15 -0700 |
commit | 6cc9edb4de609e0f13997d93c8119375d2eb2b07 (patch) | |
tree | 23cf22eb2d2512648ccaf59714b992562c8bfbb6 | |
parent | b0c0f81d549165e69ca871f94ed0154e30a8970c (diff) | |
download | gitlab-ce-sh-add-gitaly-backtrace.tar.gz |
Add backtrace to Gitaly performance barsh-add-gitaly-backtrace
This adds the backtrace to a table to show exactly where the Gitaly call
was made to make it easier to understand where the call originated.
This change also collapses the details in the same row to improve the
usability when there is a backtrace.
-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'); }); }); |