diff options
Diffstat (limited to 'app/assets/javascripts/performance_bar')
7 files changed, 42 insertions, 29 deletions
diff --git a/app/assets/javascripts/performance_bar/components/add_request.vue b/app/assets/javascripts/performance_bar/components/add_request.vue index d48a5acb85c..9ac6b0e6403 100644 --- a/app/assets/javascripts/performance_bar/components/add_request.vue +++ b/app/assets/javascripts/performance_bar/components/add_request.vue @@ -1,7 +1,12 @@ -import { __ } from '~/locale'; - <script> +import { GlForm, GlFormInput, GlButton } from '@gitlab/ui'; + export default { + components: { + GlForm, + GlButton, + GlFormInput, + }, data() { return { inputEnabled: false, @@ -24,25 +29,26 @@ export default { }; </script> <template> - <div id="peek-view-add-request" class="view"> - <form class="form-inline" @submit.prevent> - <button - class="btn-blank btn-link bold gl-text-blue-300" - type="button" - :title="__(`Add request manually`)" + <div id="peek-view-add-request" class="view gl-display-flex"> + <gl-form class="gl-display-flex gl-align-items-center" @submit.prevent> + <gl-button + class="gl-text-blue-300! gl-mr-2" + category="tertiary" + variant="link" + icon="plus" + size="small" + :title="__('Add request manually')" @click="toggleInput" - > - + - </button> - <input + /> + <gl-form-input v-if="inputEnabled" v-model="urlOrRequestId" type="text" :placeholder="__(`URL or request ID`)" - class="form-control form-control-sm d-inline-block ml-1" + class="gl-ml-2" @keyup.enter="addRequest" @keyup.esc="clearForm" /> - </form> + </gl-form> </div> </template> 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 0f744e858f2..1da4a8fea73 100644 --- a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue +++ b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue @@ -121,7 +121,7 @@ export default { return window.URL.createObjectURL(blob); }, downloadName() { - const fileName = this.requests[0].truncatedUrl; + const fileName = this.requests[0].displayName; return `${fileName}_perf_bar_${Date.now()}.json`; }, memoryReportPath() { @@ -150,7 +150,7 @@ export default { <div id="js-peek" :class="env"> <div v-if="currentRequest" - class="d-flex container-fluid container-limited justify-content-center" + class="d-flex container-fluid container-limited justify-content-center gl-align-items-center" data-qa-selector="performance_bar" > <div id="peek-view-host" class="view"> diff --git a/app/assets/javascripts/performance_bar/components/request_selector.vue b/app/assets/javascripts/performance_bar/components/request_selector.vue index ffc22c2113d..f2177e102ec 100644 --- a/app/assets/javascripts/performance_bar/components/request_selector.vue +++ b/app/assets/javascripts/performance_bar/components/request_selector.vue @@ -31,7 +31,7 @@ export default { :value="request.id" data-qa-selector="request_dropdown_option" > - {{ request.truncatedUrl }} + {{ request.displayName }} </option> </select> </div> diff --git a/app/assets/javascripts/performance_bar/index.js b/app/assets/javascripts/performance_bar/index.js index e7f84eacdca..84fe14fe056 100644 --- a/app/assets/javascripts/performance_bar/index.js +++ b/app/assets/javascripts/performance_bar/index.js @@ -56,12 +56,12 @@ const initPerformanceBar = (el) => { this.addRequest(urlOrRequestId, urlOrRequestId); } }, - addRequest(requestId, requestUrl) { + addRequest(requestId, requestUrl, operationName) { if (!this.store.canTrackRequest(requestUrl)) { return; } - this.store.addRequest(requestId, requestUrl); + this.store.addRequest(requestId, requestUrl, operationName); }, loadRequestDetails(requestId) { const request = this.store.findRequest(requestId); diff --git a/app/assets/javascripts/performance_bar/performance_bar_log.js b/app/assets/javascripts/performance_bar/performance_bar_log.js index aad99e2604e..62ca568adc5 100644 --- a/app/assets/javascripts/performance_bar/performance_bar_log.js +++ b/app/assets/javascripts/performance_bar/performance_bar_log.js @@ -10,7 +10,7 @@ const initVitalsLog = () => { console.log( `${String.fromCodePoint( 0x1f4d1, - )} To get the final web vital numbers reported you maybe need to switch away and back to the tab`, + )} To get the final web vital numbers report you may need to switch away and back to the tab`, ); getCLS(reportVital); getFID(reportVital); 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 4c0293f5b78..e67143f3ede 100644 --- a/app/assets/javascripts/performance_bar/services/performance_bar_service.js +++ b/app/assets/javascripts/performance_bar/services/performance_bar_service.js @@ -10,13 +10,15 @@ export default class PerformanceBarService { static registerInterceptor(peekUrl, callback) { PerformanceBarService.interceptor = (response) => { - const [fireCallback, requestId, requestUrl] = PerformanceBarService.callbackParams( - response, - peekUrl, - ); + const [ + fireCallback, + requestId, + requestUrl, + operationName, + ] = PerformanceBarService.callbackParams(response, peekUrl); if (fireCallback) { - callback(requestId, requestUrl); + callback(requestId, requestUrl, operationName); } return response; @@ -36,7 +38,8 @@ export default class PerformanceBarService { const cachedResponse = response.headers && parseBoolean(response.headers['x-gitlab-from-cache']); const fireCallback = requestUrl !== peekUrl && Boolean(requestId) && !cachedResponse; + const operationName = response.config?.operationName; - return [fireCallback, requestId, requestUrl]; + return [fireCallback, requestId, requestUrl, operationName]; } } 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 5a69960e4d9..2011604534c 100644 --- a/app/assets/javascripts/performance_bar/stores/performance_bar_store.js +++ b/app/assets/javascripts/performance_bar/stores/performance_bar_store.js @@ -3,15 +3,19 @@ export default class PerformanceBarStore { this.requests = []; } - addRequest(requestId, requestUrl) { + addRequest(requestId, requestUrl, operationName) { if (!this.findRequest(requestId)) { - const shortUrl = PerformanceBarStore.truncateUrl(requestUrl); + let displayName = PerformanceBarStore.truncateUrl(requestUrl); + + if (operationName) { + displayName += ` (${operationName})`; + } this.requests.push({ id: requestId, url: requestUrl, - truncatedUrl: shortUrl, details: {}, + displayName, }); } |