diff options
author | Stan Hu <stanhu@gmail.com> | 2019-04-13 08:54:32 +0300 |
---|---|---|
committer | Stan Hu <stanhu@gmail.com> | 2019-04-17 14:45:24 +0300 |
commit | fbb3fd1397c1304d424da404c226e4a4f9aa262b (patch) | |
tree | 6ee45e4a54b4d67515dd3cccd3cd104517d48853 /app/assets/javascripts/performance_bar | |
parent | b0c0f81d549165e69ca871f94ed0154e30a8970c (diff) |
Add backtrace to Gitaly performance bar
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.
Diffstat (limited to 'app/assets/javascripts/performance_bar')
-rw-r--r-- | app/assets/javascripts/performance_bar/components/detailed_metric.vue | 28 |
1 files changed, 26 insertions, 2 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> |