diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-11-19 11:27:35 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-11-19 11:27:35 +0300 |
commit | 7e9c479f7de77702622631cff2628a9c8dcbc627 (patch) | |
tree | c8f718a08e110ad7e1894510980d2155a6549197 /app/assets/javascripts/performance_bar | |
parent | e852b0ae16db4052c1c567d9efa4facc81146e88 (diff) |
Add latest changes from gitlab-org/gitlab@13-6-stable-eev13.6.0-rc42
Diffstat (limited to 'app/assets/javascripts/performance_bar')
-rw-r--r-- | app/assets/javascripts/performance_bar/components/detailed_metric.vue | 64 | ||||
-rw-r--r-- | app/assets/javascripts/performance_bar/performance_bar_log.js | 2 |
2 files changed, 42 insertions, 24 deletions
diff --git a/app/assets/javascripts/performance_bar/components/detailed_metric.vue b/app/assets/javascripts/performance_bar/components/detailed_metric.vue index 9f05ee5c7c2..90e14d8325f 100644 --- a/app/assets/javascripts/performance_bar/components/detailed_metric.vue +++ b/app/assets/javascripts/performance_bar/components/detailed_metric.vue @@ -1,15 +1,17 @@ <script> -import { GlIcon } from '@gitlab/ui'; +import { GlButton, GlIcon, GlModal, GlModalDirective } from '@gitlab/ui'; import RequestWarning from './request_warning.vue'; -import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue'; - export default { components: { RequestWarning, - GlModal: DeprecatedModal2, + GlButton, + GlModal, GlIcon, }, + directives: { + 'gl-modal': GlModalDirective, + }, props: { currentRequest: { type: Object, @@ -35,7 +37,15 @@ export default { required: true, }, }, + data() { + return { + openedBacktraces: [], + }; + }, computed: { + modalId() { + return `modal-peek-${this.metric}-details`; + }, metricDetails() { return this.currentRequest.details[this.metric]; }, @@ -58,29 +68,35 @@ export default { return ''; }, }, + methods: { + toggleBacktrace(toggledIndex) { + const toggledOpenedIndex = this.openedBacktraces.indexOf(toggledIndex); + + if (toggledOpenedIndex === -1) { + this.openedBacktraces = [...this.openedBacktraces, toggledIndex]; + } else { + this.openedBacktraces = this.openedBacktraces.filter( + openedIndex => openedIndex !== toggledIndex, + ); + } + }, + itemHasOpenedBacktrace(toggledIndex) { + return this.openedBacktraces.find(openedIndex => openedIndex === toggledIndex) >= 0; + }, + }, }; </script> <template> <div v-if="currentRequest.details && metricDetails" :id="`peek-view-${metric}`" - class="view" + class="gl-display-flex gl-align-items-center view" data-qa-selector="detailed_metric_content" > - <button - :data-target="`#modal-peek-${metric}-details`" - class="btn-blank btn-link bold" - type="button" - data-toggle="modal" - > + <gl-button v-gl-modal="modalId" class="gl-mr-2" type="button" variant="link"> {{ metricDetailsLabel }} - </button> - <gl-modal - :id="`modal-peek-${metric}-details`" - :header-title-text="header" - modal-size="xl" - class="performance-bar-modal" - > + </gl-button> + <gl-modal :modal-id="modalId" :title="header" size="lg" modal-class="gl-mt-7" scrollable> <table class="table"> <template v-if="detailsList.length"> <tr v-for="(item, index) in detailsList" :key="index"> @@ -90,7 +106,7 @@ export default { }}</span> </td> <td> - <div class="js-toggle-container"> + <div> <div v-for="(key, keyIndex) in keys" :key="key" @@ -98,16 +114,18 @@ export default { :class="{ 'mb-3 bold': keyIndex == 0 }" > {{ item[key] }} - <button + <gl-button v-if="keyIndex == 0 && item.backtrace" - class="text-expander js-toggle-button" + class="gl-ml-3" + data-testid="backtrace-expand-btn" type="button" :aria-label="__('Toggle backtrace')" + @click="toggleBacktrace(index)" > <gl-icon :size="12" name="ellipsis_h" /> - </button> + </gl-button> </div> - <pre v-if="item.backtrace" class="backtrace-row js-toggle-content mt-2">{{ + <pre v-if="itemHasOpenedBacktrace(index)" class="backtrace-row mt-2">{{ item.backtrace }}</pre> </div> diff --git a/app/assets/javascripts/performance_bar/performance_bar_log.js b/app/assets/javascripts/performance_bar/performance_bar_log.js index 55b4d626e56..3ba7ff1c221 100644 --- a/app/assets/javascripts/performance_bar/performance_bar_log.js +++ b/app/assets/javascripts/performance_bar/performance_bar_log.js @@ -1,6 +1,6 @@ /* eslint-disable no-console */ import { getCLS, getFID, getLCP } from 'web-vitals'; -import { PERFORMANCE_TYPE_MARK, PERFORMANCE_TYPE_MEASURE } from '~/performance_constants'; +import { PERFORMANCE_TYPE_MARK, PERFORMANCE_TYPE_MEASURE } from '~/performance/constants'; const initVitalsLog = () => { const reportVital = data => { |