Merge branch 'dmishunov-user-metrics-repobrowser' into 'master'

Introduced user timing metrics to repo browser

See merge request gitlab-org/gitlab!60286

app/assets/javascripts/blob/components/blob_content.vue

@@ -6,6 +6,7 @@ import BlobContentError from './blob_content_error.vue';
 import { BLOB_RENDER_EVENT_LOAD, BLOB_RENDER_EVENT_SHOW_SOURCE } from './constants';
 
 export default {
+  name: 'BlobContent',
   components: {
     GlLoadingIcon,
     BlobContentError,

app/assets/javascripts/blob/viewer/index.js

 import $ from 'jquery';
 import '~/behaviors/markdown/render_gfm';
 import { __ } from '~/locale';
+import {
+  REPO_BLOB_LOAD_VIEWER_START,
+  REPO_BLOB_LOAD_VIEWER_FINISH,
+  REPO_BLOB_LOAD_VIEWER,
+} from '~/performance/constants';
+import { performanceMarkAndMeasure } from '~/performance/utils';
 import { fixTitle } from '~/tooltips';
 import { deprecatedCreateFlash as Flash } from '../../flash';
 import axios from '../../lib/utils/axios_utils';
@@ -130,6 +136,9 @@ export default class BlobViewer {
   }
 
   switchToViewer(name) {
+    performanceMarkAndMeasure({
+      mark: REPO_BLOB_LOAD_VIEWER_START,
+    });
     const newViewer = this.$fileHolder[0].querySelector(`.blob-viewer[data-type='${name}']`);
     if (this.activeViewer === newViewer) return;
 
@@ -163,6 +172,15 @@ export default class BlobViewer {
         handleLocationHash();
 
         this.toggleCopyButtonState();
+        performanceMarkAndMeasure({
+          mark: REPO_BLOB_LOAD_VIEWER_FINISH,
+          measures: [
+            {
+              name: REPO_BLOB_LOAD_VIEWER,
+              start: REPO_BLOB_LOAD_VIEWER_START,
+            },
+          ],
+        });
       })
       .catch(() => new Flash(__('Error loading viewer')));
   }

app/assets/javascripts/performance/constants.js

@@ -43,6 +43,7 @@ export const WEBIDE_MEASURE_FETCH_FILES = 'WebIDE: Fetch Files';
 
 //
 // MR Diffs namespace
+//
 
 // Marks
 export const MR_DIFFS_MARK_FILE_TREE_START = 'mr-diffs-mark-file-tree-start';
@@ -75,3 +76,14 @@ export const PIPELINES_DETAIL_LINKS_MEASURE_CALCULATION =
 export const PIPELINES_DETAIL_LINK_DURATION = 'pipeline_graph_link_calculation_duration_seconds';
 export const PIPELINES_DETAIL_LINKS_TOTAL = 'pipeline_graph_links_total';
 export const PIPELINES_DETAIL_LINKS_JOB_RATIO = 'pipeline_graph_links_per_job_ratio';
+
+//
+// REPO BROWSER NAMESPACE
+//
+
+// Marks
+export const REPO_BLOB_LOAD_VIEWER_START = 'blobviewer-load-viewer-start';
+export const REPO_BLOB_LOAD_VIEWER_FINISH = 'blobviewer-load-viewer-finish';
+
+// Measures
+export const REPO_BLOB_LOAD_VIEWER = 'Repository File Viewer: loading the content';

app/assets/javascripts/repository/index.js

@@ -4,6 +4,7 @@ import { parseBoolean } from '~/lib/utils/common_utils';
 import { escapeFileUrl } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
 import initWebIdeLink from '~/pages/projects/shared/web_ide_link';
+import PerformancePlugin from '~/performance/vue_performance_plugin';
 import App from './components/app.vue';
 import Breadcrumbs from './components/breadcrumbs.vue';
 import DirectoryDownloadLinks from './components/directory_download_links.vue';
@@ -17,6 +18,10 @@ import createRouter from './router';
 import { updateFormAction } from './utils/dom';
 import { setTitle } from './utils/title';
 
+Vue.use(PerformancePlugin, {
+  components: ['SimpleViewer', 'BlobContent'],
+});
+
 export default function setupVueRepositoryList() {
   const el = document.getElementById('js-tree-list');
   const { dataset } = el;

app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue

@@ -6,6 +6,7 @@ import { HIGHLIGHT_CLASS_NAME } from './constants';
 import ViewerMixin from './mixins';
 
 export default {
+  name: 'SimpleViewer',
   components: {
     GlIcon,
     EditorLite: () =>