diff options
Diffstat (limited to 'app/assets/javascripts/performance_bar/index.js')
-rw-r--r-- | app/assets/javascripts/performance_bar/index.js | 32 |
1 files changed, 23 insertions, 9 deletions
diff --git a/app/assets/javascripts/performance_bar/index.js b/app/assets/javascripts/performance_bar/index.js index 51b6108868f..d8aab25a6a8 100644 --- a/app/assets/javascripts/performance_bar/index.js +++ b/app/assets/javascripts/performance_bar/index.js @@ -1,6 +1,7 @@ -/* eslint-disable @gitlab/require-i18n-strings */ import Vue from 'vue'; import axios from '~/lib/utils/axios_utils'; +import { numberToHumanSize } from '~/lib/utils/number_utils'; +import { s__ } from '~/locale'; import Translate from '~/vue_shared/translate'; import initPerformanceBarLog from './performance_bar_log'; @@ -75,40 +76,53 @@ const initPerformanceBar = (el) => { const resourceEntries = performance.getEntriesByType('resource'); let durationString = ''; + let summary = {}; if (navigationEntries.length > 0) { - durationString = `${Math.round(navigationEntries[0].responseEnd)} | `; - durationString += `${Math.round(paintEntries[1].startTime)} | `; - durationString += ` ${Math.round(navigationEntries[0].domContentLoadedEventEnd)}`; + const backend = Math.round(navigationEntries[0].responseEnd); + const firstContentfulPaint = Math.round(paintEntries[1].startTime); + const domContentLoaded = Math.round(navigationEntries[0].domContentLoadedEventEnd); + + summary = { + [s__('PerformanceBar|Backend')]: backend, + [s__('PerformanceBar|First Contentful Paint')]: firstContentfulPaint, + [s__('PerformanceBar|DOM Content Loaded')]: domContentLoaded, + }; + + durationString = `${backend} | ${firstContentfulPaint} | ${domContentLoaded}`; } let newEntries = resourceEntries.map(this.transformResourceEntry); - this.updateFrontendPerformanceMetrics(durationString, newEntries); + this.updateFrontendPerformanceMetrics(durationString, summary, 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); + this.updateFrontendPerformanceMetrics(durationString, summary, newEntries); }); observer.observe({ entryTypes: ['resource'] }); } } }, - updateFrontendPerformanceMetrics(durationString, requestEntries) { + updateFrontendPerformanceMetrics(durationString, summary, requestEntries) { this.store.setRequestDetailsData(this.requestId, 'total', { duration: durationString, calls: requestEntries.length, details: requestEntries, + summaryOptions: { + hideDuration: true, + }, + summary, }); }, transformResourceEntry(entry) { - const nf = new Intl.NumberFormat(); return { + start: entry.startTime, name: entry.name.replace(document.location.origin, ''), duration: Math.round(entry.duration), - size: entry.transferSize ? `${nf.format(entry.transferSize)} bytes` : 'cached', + size: entry.transferSize ? numberToHumanSize(entry.transferSize) : 'cached', }; }, }, |