diff options
Diffstat (limited to 'app/assets/javascripts/performance_bar')
6 files changed, 45 insertions, 72 deletions
diff --git a/app/assets/javascripts/performance_bar/components/detailed_metric.vue b/app/assets/javascripts/performance_bar/components/detailed_metric.vue index 1bb82e1d8e6..0640faae8b7 100644 --- a/app/assets/javascripts/performance_bar/components/detailed_metric.vue +++ b/app/assets/javascripts/performance_bar/components/detailed_metric.vue @@ -1,5 +1,5 @@ <script> -import { GlButton, GlModal, GlModalDirective, GlSegmentedControl } from '@gitlab/ui'; +import { GlButton, GlDropdown, GlDropdownItem, GlModal, GlModalDirective } from '@gitlab/ui'; import { __, s__ } from '~/locale'; import { sortOrders, sortOrderOptions } from '../constants'; @@ -9,8 +9,9 @@ export default { components: { RequestWarning, GlButton, + GlDropdown, + GlDropdownItem, GlModal, - GlSegmentedControl, }, directives: { 'gl-modal': GlModalDirective, @@ -156,13 +157,19 @@ export default { </div> </div> </div> - <gl-segmented-control + <gl-dropdown v-if="displaySortOrder" + :text="$options.sortOrderOptions[sortOrder]" + right data-testid="performance-bar-sort-order" - :options="$options.sortOrderOptions" - :checked="sortOrder" - @input="changeSortOrder" - /> + > + <gl-dropdown-item + v-for="option in Object.keys($options.sortOrderOptions)" + :key="option" + @click="changeSortOrder(option)" + >{{ $options.sortOrderOptions[option] }}</gl-dropdown-item + > + </gl-dropdown> </div> <hr /> <table class="table gl-table"> diff --git a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue index 710f49b833c..0f744e858f2 100644 --- a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue +++ b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue @@ -134,6 +134,7 @@ export default { methods: { changeCurrentRequest(newRequestId) { this.currentRequest = newRequestId; + this.$emit('change-request', newRequestId); }, flamegraphPath(mode) { return mergeUrlParams( diff --git a/app/assets/javascripts/performance_bar/components/request_selector.vue b/app/assets/javascripts/performance_bar/components/request_selector.vue index a46ac620f48..ffc22c2113d 100644 --- a/app/assets/javascripts/performance_bar/components/request_selector.vue +++ b/app/assets/javascripts/performance_bar/components/request_selector.vue @@ -1,15 +1,5 @@ <script> -import { GlPopover, GlSafeHtmlDirective } from '@gitlab/ui'; -import { glEmojiTag } from '~/emoji'; -import { n__ } from '~/locale'; - export default { - components: { - GlPopover, - }, - directives: { - SafeHtml: GlSafeHtmlDirective, - }, props: { currentRequest: { type: Object, @@ -25,27 +15,11 @@ export default { currentRequestId: this.currentRequest.id, }; }, - computed: { - requestsWithWarnings() { - return this.requests.filter((request) => request.hasWarnings); - }, - warningMessage() { - return n__( - '%d request with warnings', - '%d requests with warnings', - this.requestsWithWarnings.length, - ); - }, - }, watch: { currentRequestId(newRequestId) { this.$emit('change-current-request', newRequestId); }, }, - methods: { - glEmojiTag, - }, - safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] }, }; </script> <template> @@ -58,19 +32,7 @@ export default { data-qa-selector="request_dropdown_option" > {{ request.truncatedUrl }} - <span v-if="request.hasWarnings">(!)</span> </option> </select> - <span v-if="requestsWithWarnings.length" class="gl-cursor-default"> - <span - id="performance-bar-request-selector-warning" - v-safe-html:[$options.safeHtmlConfig]="glEmojiTag('warning')" - ></span> - <gl-popover - placement="bottom" - target="performance-bar-request-selector-warning" - :content="warningMessage" - /> - </span> </div> </template> diff --git a/app/assets/javascripts/performance_bar/constants.js b/app/assets/javascripts/performance_bar/constants.js index 9659383edd9..09745797424 100644 --- a/app/assets/javascripts/performance_bar/constants.js +++ b/app/assets/javascripts/performance_bar/constants.js @@ -5,13 +5,7 @@ export const sortOrders = { CHRONOLOGICAL: 'chronological', }; -export const sortOrderOptions = [ - { - value: sortOrders.DURATION, - text: s__('PerformanceBar|Sort by duration'), - }, - { - value: sortOrders.CHRONOLOGICAL, - text: s__('PerformanceBar|Sort chronologically'), - }, -]; +export const sortOrderOptions = { + [sortOrders.DURATION]: s__('PerformanceBar|Sort by duration'), + [sortOrders.CHRONOLOGICAL]: s__('PerformanceBar|Sort chronologically'), +}; diff --git a/app/assets/javascripts/performance_bar/index.js b/app/assets/javascripts/performance_bar/index.js index eb5b50dd1ec..e7f84eacdca 100644 --- a/app/assets/javascripts/performance_bar/index.js +++ b/app/assets/javascripts/performance_bar/index.js @@ -1,5 +1,6 @@ import '../webpack'; +import { isEmpty } from 'lodash'; import Vue from 'vue'; import axios from '~/lib/utils/axios_utils'; import { numberToHumanSize } from '~/lib/utils/number_utils'; @@ -37,9 +38,10 @@ const initPerformanceBar = (el) => { }; }, mounted() { - PerformanceBarService.registerInterceptor(this.peekUrl, this.loadRequestDetails); + PerformanceBarService.registerInterceptor(this.peekUrl, this.addRequest); - this.loadRequestDetails(this.requestId, window.location.href); + this.addRequest(this.requestId, window.location.href); + this.loadRequestDetails(this.requestId); }, beforeDestroy() { PerformanceBarService.removeInterceptor(); @@ -51,26 +53,32 @@ const initPerformanceBar = (el) => { // want to trace the request. axios.get(urlOrRequestId); } else { - this.loadRequestDetails(urlOrRequestId, urlOrRequestId); + this.addRequest(urlOrRequestId, urlOrRequestId); } }, - loadRequestDetails(requestId, requestUrl) { + addRequest(requestId, requestUrl) { if (!this.store.canTrackRequest(requestUrl)) { return; } this.store.addRequest(requestId, requestUrl); + }, + loadRequestDetails(requestId) { + const request = this.store.findRequest(requestId); + + if (request && isEmpty(request.details)) { + return PerformanceBarService.fetchRequestDetails(this.peekUrl, requestId) + .then((res) => { + this.store.addRequestDetails(requestId, res.data); + if (this.requestId === requestId) this.collectFrontendPerformanceMetrics(); + }) + .catch(() => + // eslint-disable-next-line no-console + console.warn(`Error getting performance bar results for ${requestId}`), + ); + } - PerformanceBarService.fetchRequestDetails(this.peekUrl, requestId) - .then((res) => { - this.store.addRequestDetails(requestId, res.data); - - if (this.requestId === requestId) this.collectFrontendPerformanceMetrics(); - }) - .catch(() => - // eslint-disable-next-line no-console - console.warn(`Error getting performance bar results for ${requestId}`), - ); + return Promise.resolve(); }, collectFrontendPerformanceMetrics() { if (performance) { @@ -82,7 +90,9 @@ const initPerformanceBar = (el) => { let summary = {}; if (navigationEntries.length > 0) { const backend = Math.round(navigationEntries[0].responseEnd); - const firstContentfulPaint = Math.round(paintEntries[1].startTime); + const firstContentfulPaint = Math.round( + paintEntries.find((entry) => entry.name === 'first-contentful-paint')?.startTime, + ); const domContentLoaded = Math.round(navigationEntries[0].domContentLoadedEventEnd); summary = { @@ -141,6 +151,7 @@ const initPerformanceBar = (el) => { }, on: { 'add-request': this.addRequestManually, + 'change-request': this.loadRequestDetails, }, }); }, diff --git a/app/assets/javascripts/performance_bar/stores/performance_bar_store.js b/app/assets/javascripts/performance_bar/stores/performance_bar_store.js index 51a8eb5ca69..5a69960e4d9 100644 --- a/app/assets/javascripts/performance_bar/stores/performance_bar_store.js +++ b/app/assets/javascripts/performance_bar/stores/performance_bar_store.js @@ -12,7 +12,6 @@ export default class PerformanceBarStore { url: requestUrl, truncatedUrl: shortUrl, details: {}, - hasWarnings: false, }); } @@ -27,7 +26,6 @@ export default class PerformanceBarStore { const request = this.findRequest(requestId); request.details = requestDetails.data; - request.hasWarnings = requestDetails.has_warnings; return request; } |