diff options
Diffstat (limited to 'app/assets/javascripts/performance_bar')
8 files changed, 68 insertions, 22 deletions
diff --git a/app/assets/javascripts/performance_bar/components/detailed_metric.vue b/app/assets/javascripts/performance_bar/components/detailed_metric.vue index ef24dbfb6ce..9f05ee5c7c2 100644 --- a/app/assets/javascripts/performance_bar/components/detailed_metric.vue +++ b/app/assets/javascripts/performance_bar/components/detailed_metric.vue @@ -1,14 +1,14 @@ <script> +import { GlIcon } from '@gitlab/ui'; import RequestWarning from './request_warning.vue'; import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue'; -import Icon from '~/vue_shared/components/icon.vue'; export default { components: { RequestWarning, GlModal: DeprecatedModal2, - Icon, + GlIcon, }, props: { currentRequest: { @@ -104,7 +104,7 @@ export default { type="button" :aria-label="__('Toggle backtrace')" > - <icon :size="12" name="ellipsis_h" /> + <gl-icon :size="12" name="ellipsis_h" /> </button> </div> <pre v-if="item.backtrace" class="backtrace-row js-toggle-content mt-2">{{ 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 cccb5e1be06..165feb1b6aa 100644 --- a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue +++ b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue @@ -1,4 +1,5 @@ <script> +/* eslint-disable vue/no-v-html */ import { glEmojiTag } from '~/emoji'; import AddRequest from './add_request.vue'; diff --git a/app/assets/javascripts/performance_bar/components/request_selector.vue b/app/assets/javascripts/performance_bar/components/request_selector.vue index c22a648d17f..5a9d3a6d313 100644 --- a/app/assets/javascripts/performance_bar/components/request_selector.vue +++ b/app/assets/javascripts/performance_bar/components/request_selector.vue @@ -1,4 +1,5 @@ <script> +/* eslint-disable vue/no-v-html */ import { GlPopover } from '@gitlab/ui'; import { glEmojiTag } from '~/emoji'; import { n__ } from '~/locale'; diff --git a/app/assets/javascripts/performance_bar/components/request_warning.vue b/app/assets/javascripts/performance_bar/components/request_warning.vue index 0128d5bd733..b61e1e5b7a9 100644 --- a/app/assets/javascripts/performance_bar/components/request_warning.vue +++ b/app/assets/javascripts/performance_bar/components/request_warning.vue @@ -1,4 +1,5 @@ <script> +/* eslint-disable vue/no-v-html */ import { GlPopover } from '@gitlab/ui'; import { glEmojiTag } from '~/emoji'; diff --git a/app/assets/javascripts/performance_bar/index.js b/app/assets/javascripts/performance_bar/index.js index a294f3f36a6..f29b5f42d8f 100644 --- a/app/assets/javascripts/performance_bar/index.js +++ b/app/assets/javascripts/performance_bar/index.js @@ -5,14 +5,17 @@ import axios from '~/lib/utils/axios_utils'; import PerformanceBarService from './services/performance_bar_service'; import PerformanceBarStore from './stores/performance_bar_store'; -export default ({ container }) => - new Vue({ - el: container, +import initPerformanceBarLog from './performance_bar_log'; + +const initPerformanceBar = el => { + const performanceBarData = el.dataset; + + return new Vue({ + el, components: { PerformanceBarApp: () => import('./components/performance_bar_app.vue'), }, data() { - const performanceBarData = document.querySelector(this.$options.el).dataset; const store = new PerformanceBarStore(); return { @@ -24,15 +27,12 @@ export default ({ container }) => }; }, mounted() { - this.interceptor = PerformanceBarService.registerInterceptor( - this.peekUrl, - this.loadRequestDetails, - ); + PerformanceBarService.registerInterceptor(this.peekUrl, this.loadRequestDetails); this.loadRequestDetails(this.requestId, window.location.href); }, beforeDestroy() { - PerformanceBarService.removeInterceptor(this.interceptor); + PerformanceBarService.removeInterceptor(); }, methods: { addRequestManually(urlOrRequestId) { @@ -121,3 +121,15 @@ export default ({ container }) => }); }, }); +}; + +document.addEventListener('DOMContentLoaded', () => { + const jsPeek = document.querySelector('#js-peek'); + if (jsPeek) { + initPerformanceBar(jsPeek); + } +}); + +initPerformanceBarLog(); + +export default initPerformanceBar; diff --git a/app/assets/javascripts/performance_bar/performance_bar_log.js b/app/assets/javascripts/performance_bar/performance_bar_log.js new file mode 100644 index 00000000000..638c544f2e1 --- /dev/null +++ b/app/assets/javascripts/performance_bar/performance_bar_log.js @@ -0,0 +1,28 @@ +/* eslint-disable no-console */ +import { getCLS, getFID, getLCP } from 'web-vitals'; + +const initVitalsLog = () => { + const reportVital = data => { + console.log(`${String.fromCodePoint(0x1f4c8)} ${data.name} : `, data); + }; + + console.log( + `${String.fromCodePoint( + 0x1f4d1, + )} To get the final web vital numbers reported you maybe need to switch away and back to the tab`, + ); + getCLS(reportVital); + getFID(reportVital); + getLCP(reportVital); +}; + +const initPerformanceBarLog = () => { + console.log( + `%c ${String.fromCodePoint(0x1f98a)} GitLab performance bar`, + 'width:100%;background-color: #292961; color: #FFFFFF; font-size:24px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto; padding: 10px;display:block;padding-right: 100px;', + ); + + initVitalsLog(); +}; + +export default initPerformanceBarLog; diff --git a/app/assets/javascripts/performance_bar/services/performance_bar_service.js b/app/assets/javascripts/performance_bar/services/performance_bar_service.js index 61b35b4b8f5..3c8303d102e 100644 --- a/app/assets/javascripts/performance_bar/services/performance_bar_service.js +++ b/app/assets/javascripts/performance_bar/services/performance_bar_service.js @@ -2,12 +2,14 @@ import axios from '../../lib/utils/axios_utils'; import { parseBoolean } from '~/lib/utils/common_utils'; export default class PerformanceBarService { + static interceptor = null; + static fetchRequestDetails(peekUrl, requestId) { return axios.get(peekUrl, { params: { request_id: requestId } }); } static registerInterceptor(peekUrl, callback) { - const interceptor = response => { + PerformanceBarService.interceptor = response => { const [fireCallback, requestId, requestUrl] = PerformanceBarService.callbackParams( response, peekUrl, @@ -20,22 +22,20 @@ export default class PerformanceBarService { return response; }; - return axios.interceptors.response.use(interceptor); + return axios.interceptors.response.use(PerformanceBarService.interceptor); } - static removeInterceptor(interceptor) { - axios.interceptors.response.eject(interceptor); + static removeInterceptor() { + axios.interceptors.response.eject(PerformanceBarService.interceptor); + PerformanceBarService.interceptor = null; } static callbackParams(response, peekUrl) { const requestId = response.headers && response.headers['x-request-id']; - // Get the request URL from response.config for Axios, and response for - // Vue Resource. - const requestUrl = (response.config || response).url; - const apiRequest = requestUrl && requestUrl.match(/^\/api\//); + const requestUrl = response.config?.url; const cachedResponse = response.headers && parseBoolean(response.headers['x-gitlab-from-cache']); - const fireCallback = requestUrl !== peekUrl && requestId && !apiRequest && !cachedResponse; + const fireCallback = requestUrl !== peekUrl && Boolean(requestId) && !cachedResponse; return [fireCallback, requestId, requestUrl]; } 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 6f443db47ed..8c88851f039 100644 --- a/app/assets/javascripts/performance_bar/stores/performance_bar_store.js +++ b/app/assets/javascripts/performance_bar/stores/performance_bar_store.js @@ -47,7 +47,10 @@ export default class PerformanceBarStore { } canTrackRequest(requestUrl) { - return this.requests.filter(request => request.url === requestUrl).length < 2; + return ( + requestUrl.endsWith('/api/graphql') || + this.requests.filter(request => request.url === requestUrl).length < 2 + ); } static truncateUrl(requestUrl) { |