diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2019-11-29 09:06:31 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2019-11-29 09:06:31 +0000 |
commit | 6b13a226ddfc49140d58e7e88f8703ae0ed90574 (patch) | |
tree | 9a92431e484354f43230fa87adc00a2edbf6f09c /app/assets/javascripts/performance_bar/index.js | |
parent | 2ac93cb80c4c0a57fde86de8262b569d1e9b9e51 (diff) | |
download | gitlab-ce-6b13a226ddfc49140d58e7e88f8703ae0ed90574.tar.gz |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/performance_bar/index.js')
-rw-r--r-- | app/assets/javascripts/performance_bar/index.js | 50 |
1 files changed, 50 insertions, 0 deletions
diff --git a/app/assets/javascripts/performance_bar/index.js b/app/assets/javascripts/performance_bar/index.js index 735c9d804ee..2ffe07500e0 100644 --- a/app/assets/javascripts/performance_bar/index.js +++ b/app/assets/javascripts/performance_bar/index.js @@ -1,3 +1,4 @@ +/* eslint-disable @gitlab/i18n/no-non-i18n-strings */ import Vue from 'vue'; import axios from '~/lib/utils/axios_utils'; @@ -53,12 +54,61 @@ export default ({ container }) => 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}`), ); }, + collectFrontendPerformanceMetrics() { + if (performance) { + const navigationEntries = performance.getEntriesByType('navigation'); + const paintEntries = performance.getEntriesByType('paint'); + const resourceEntries = performance.getEntriesByType('resource'); + + let durationString = ''; + if (navigationEntries.length > 0) { + durationString = `BE ${this.formatMs(navigationEntries[0].responseEnd)} / `; + durationString += `FCP ${this.formatMs(paintEntries[1].startTime)} / `; + durationString += `DOM ${this.formatMs(navigationEntries[0].domContentLoadedEventEnd)}`; + } + + let newEntries = resourceEntries.map(this.transformResourceEntry); + + this.updateFrontendPerformanceMetrics(durationString, newEntries); + + if ('PerformanceObserver' in window) { + // We start observing for more incoming timings + const observer = new PerformanceObserver(list => { + newEntries = newEntries.concat(list.getEntries().map(this.transformResourceEntry)); + this.updateFrontendPerformanceMetrics(durationString, newEntries); + }); + + observer.observe({ entryTypes: ['resource'] }); + } + } + }, + updateFrontendPerformanceMetrics(durationString, requestEntries) { + this.store.setRequestDetailsData(this.requestId, 'total', { + duration: durationString, + calls: requestEntries.length, + details: requestEntries, + }); + }, + transformResourceEntry(entry) { + const nf = new Intl.NumberFormat(); + return { + name: entry.name.replace(document.location.origin, ''), + duration: Math.round(entry.duration), + size: entry.transferSize ? `${nf.format(entry.transferSize)} bytes` : 'cached', + }; + }, + formatMs(msValue) { + const nf = new Intl.NumberFormat(); + return `${nf.format(Math.round(msValue))}ms`; + }, }, render(createElement) { return createElement('performance-bar-app', { |