Merge branch 'dmishunov/ide-performance-marks' into 'master'

Added the essential User Timings to WebIDE

See merge request gitlab-org/gitlab!47934

app/assets/javascripts/ide/components/ide.vue

@@ -5,10 +5,8 @@ import {
   WEBIDE_MARK_APP_START,
   WEBIDE_MARK_FILE_FINISH,
   WEBIDE_MARK_FILE_CLICKED,
-  WEBIDE_MARK_TREE_FINISH,
-  WEBIDE_MEASURE_TREE_FROM_REQUEST,
-  WEBIDE_MEASURE_FILE_FROM_REQUEST,
   WEBIDE_MEASURE_FILE_AFTER_INTERACTION,
+  WEBIDE_MEASURE_BEFORE_VUE,
 } from '~/performance/constants';
 import { performanceMarkAndMeasure } from '~/performance/utils';
 import { modalTypes } from '../constants';
@@ -19,12 +17,6 @@ import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 import { measurePerformance } from '../utils';
 
-eventHub.$on(WEBIDE_MEASURE_TREE_FROM_REQUEST, () =>
-  measurePerformance(WEBIDE_MARK_TREE_FINISH, WEBIDE_MEASURE_TREE_FROM_REQUEST),
-);
-eventHub.$on(WEBIDE_MEASURE_FILE_FROM_REQUEST, () =>
-  measurePerformance(WEBIDE_MARK_FILE_FINISH, WEBIDE_MEASURE_FILE_FROM_REQUEST),
-);
 eventHub.$on(WEBIDE_MEASURE_FILE_AFTER_INTERACTION, () =>
   measurePerformance(
     WEBIDE_MARK_FILE_FINISH,
@@ -84,7 +76,14 @@ export default {
       document.querySelector('.navbar-gitlab').classList.add(`theme-${this.themeName}`);
   },
   beforeCreate() {
-    performanceMarkAndMeasure({ mark: WEBIDE_MARK_APP_START });
+    performanceMarkAndMeasure({
+      mark: WEBIDE_MARK_APP_START,
+      measures: [
+        {
+          name: WEBIDE_MEASURE_BEFORE_VUE,
+        },
+      ],
+    });
   },
   methods: {
     ...mapActions(['toggleFileFinder']),

app/assets/javascripts/ide/components/ide_tree_list.vue

@@ -2,17 +2,13 @@
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
 import FileTree from '~/vue_shared/components/file_tree.vue';
-import {
-  WEBIDE_MARK_TREE_START,
-  WEBIDE_MEASURE_TREE_FROM_REQUEST,
-  WEBIDE_MARK_FILE_CLICKED,
-} from '~/performance/constants';
+import { WEBIDE_MARK_FILE_CLICKED } from '~/performance/constants';
 import { performanceMarkAndMeasure } from '~/performance/utils';
-import eventHub from '../eventhub';
 import IdeFileRow from './ide_file_row.vue';
 import NavDropdown from './nav_dropdown.vue';
 
 export default {
+  name: 'IdeTreeList',
   components: {
     GlSkeletonLoading,
     NavDropdown,
@@ -39,14 +35,6 @@ export default {
       }
     },
   },
-  beforeCreate() {
-    performanceMarkAndMeasure({ mark: WEBIDE_MARK_TREE_START });
-  },
-  updated() {
-    if (this.currentTree?.tree?.length) {
-      eventHub.$emit(WEBIDE_MEASURE_TREE_FROM_REQUEST);
-    }
-  },
   methods: {
     ...mapActions(['toggleTreeOpen']),
     clickedFile() {

app/assets/javascripts/ide/components/repo_editor.vue

@@ -6,9 +6,10 @@ import ContentViewer from '~/vue_shared/components/content_viewer/content_viewer
 import DiffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue';
 import {
   WEBIDE_MARK_FILE_CLICKED,
-  WEBIDE_MARK_FILE_START,
+  WEBIDE_MARK_REPO_EDITOR_START,
+  WEBIDE_MARK_REPO_EDITOR_FINISH,
+  WEBIDE_MEASURE_REPO_EDITOR,
   WEBIDE_MEASURE_FILE_AFTER_INTERACTION,
-  WEBIDE_MEASURE_FILE_FROM_REQUEST,
 } from '~/performance/constants';
 import { performanceMarkAndMeasure } from '~/performance/utils';
 import eventHub from '../eventhub';
@@ -28,6 +29,7 @@ import { getRulesWithTraversal } from '../lib/editorconfig/parser';
 import mapRulesToMonaco from '../lib/editorconfig/rules_mapper';
 
 export default {
+  name: 'RepoEditor',
   components: {
     ContentViewer,
     DiffViewer,
@@ -175,9 +177,6 @@ export default {
       }
     },
   },
-  beforeCreate() {
-    performanceMarkAndMeasure({ mark: WEBIDE_MARK_FILE_START });
-  },
   beforeDestroy() {
     this.editor.dispose();
   },
@@ -204,6 +203,7 @@ export default {
     ]),
     ...mapActions('editor', ['updateFileEditor']),
     initEditor() {
+      performanceMarkAndMeasure({ mark: WEBIDE_MARK_REPO_EDITOR_START });
       if (this.shouldHideEditor && (this.file.content || this.file.raw)) {
         return;
       }
@@ -305,7 +305,15 @@ export default {
       if (performance.getEntriesByName(WEBIDE_MARK_FILE_CLICKED).length) {
         eventHub.$emit(WEBIDE_MEASURE_FILE_AFTER_INTERACTION);
       } else {
-        eventHub.$emit(WEBIDE_MEASURE_FILE_FROM_REQUEST);
+        performanceMarkAndMeasure({
+          mark: WEBIDE_MARK_REPO_EDITOR_FINISH,
+          measures: [
+            {
+              name: WEBIDE_MEASURE_REPO_EDITOR,
+              start: WEBIDE_MARK_REPO_EDITOR_START,
+            },
+          ],
+        });
       }
     },
     refreshEditorDimensions() {

app/assets/javascripts/ide/ide_router.js

@@ -3,6 +3,12 @@ import IdeRouter from '~/ide/ide_router_extension';
 import { joinPaths } from '~/lib/utils/url_utility';
 import { deprecatedCreateFlash as flash } from '~/flash';
 import { __ } from '~/locale';
+import { performanceMarkAndMeasure } from '~/performance/utils';
+import {
+  WEBIDE_MARK_FETCH_PROJECT_DATA_START,
+  WEBIDE_MARK_FETCH_PROJECT_DATA_FINISH,
+  WEBIDE_MEASURE_FETCH_PROJECT_DATA,
+} from '~/performance/constants';
 import { syncRouterAndStore } from './sync_router_and_store';
 
 Vue.use(IdeRouter);
@@ -69,6 +75,7 @@ export const createRouter = store => {
 
   router.beforeEach((to, from, next) => {
     if (to.params.namespace && to.params.project) {
+      performanceMarkAndMeasure({ mark: WEBIDE_MARK_FETCH_PROJECT_DATA_START });
       store
         .dispatch('getProjectData', {
           namespace: to.params.namespace,
@@ -81,6 +88,15 @@ export const createRouter = store => {
           const mergeRequestId = to.params.mrid;
 
           if (branchId) {
+            performanceMarkAndMeasure({
+              mark: WEBIDE_MARK_FETCH_PROJECT_DATA_FINISH,
+              measures: [
+                {
+                  name: WEBIDE_MEASURE_FETCH_PROJECT_DATA,
+                  start: WEBIDE_MARK_FETCH_PROJECT_DATA_START,
+                },
+              ],
+            });
             store.dispatch('openBranch', {
               projectId,
               branchId,

app/assets/javascripts/ide/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue';
 import { mapActions } from 'vuex';
 import { identity } from 'lodash';
 import Translate from '~/vue_shared/translate';
+import PerformancePlugin from '~/performance/vue_performance_plugin';
 import ide from './components/ide.vue';
 import { createStore } from './stores';
 import { createRouter } from './ide_router';
@@ -11,6 +12,10 @@ import { DEFAULT_THEME } from './lib/themes';
 
 Vue.use(Translate);
 
+Vue.use(PerformancePlugin, {
+  components: ['FileTree'],
+});
+
 /**
  * Function that receives the default store and returns an extended one.
  * @callback extendStoreCallback

app/assets/javascripts/ide/stores/actions.js

@@ -3,6 +3,12 @@ import { escape } from 'lodash';
 import { __, sprintf } from '~/locale';
 import { visitUrl } from '~/lib/utils/url_utility';
 import { deprecatedCreateFlash as flash } from '~/flash';
+import { performanceMarkAndMeasure } from '~/performance/utils';
+import {
+  WEBIDE_MARK_FETCH_BRANCH_DATA_START,
+  WEBIDE_MARK_FETCH_BRANCH_DATA_FINISH,
+  WEBIDE_MEASURE_FETCH_BRANCH_DATA,
+} from '~/performance/constants';
 import * as types from './mutation_types';
 import { decorateFiles } from '../lib/files';
 import { stageKeys, commitActionTypes } from '../constants';
@@ -245,13 +251,23 @@ export const renameEntry = ({ dispatch, commit, state, getters }, { path, name,
   dispatch('triggerFilesChange', { type: commitActionTypes.move, path, newPath });
 };
 
-export const getBranchData = ({ commit, state }, { projectId, branchId, force = false } = {}) =>
-  new Promise((resolve, reject) => {
+export const getBranchData = ({ commit, state }, { projectId, branchId, force = false } = {}) => {
+  return new Promise((resolve, reject) => {
+    performanceMarkAndMeasure({ mark: WEBIDE_MARK_FETCH_BRANCH_DATA_START });
     const currentProject = state.projects[projectId];
     if (!currentProject || !currentProject.branches[branchId] || force) {
       service
         .getBranchData(projectId, branchId)
         .then(({ data }) => {
+          performanceMarkAndMeasure({
+            mark: WEBIDE_MARK_FETCH_BRANCH_DATA_FINISH,
+            measures: [
+              {
+                name: WEBIDE_MEASURE_FETCH_BRANCH_DATA,
+                start: WEBIDE_MARK_FETCH_BRANCH_DATA_START,
+              },
+            ],
+          });
           const { id } = data.commit;
           commit(types.SET_BRANCH, {
             projectPath: projectId,
@@ -291,6 +307,7 @@ export const getBranchData = ({ commit, state }, { projectId, branchId, force =
       resolve(currentProject.branches[branchId]);
     }
   });
+};
 
 export * from './actions/tree';
 export * from './actions/file';

app/assets/javascripts/ide/stores/actions/file.js

 import { joinPaths, escapeFileUrl } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
+import { performanceMarkAndMeasure } from '~/performance/utils';
+import {
+  WEBIDE_MARK_FETCH_FILE_DATA_START,
+  WEBIDE_MARK_FETCH_FILE_DATA_FINISH,
+  WEBIDE_MEASURE_FETCH_FILE_DATA,
+} from '~/performance/constants';
 import eventHub from '../../eventhub';
 import service from '../../services';
 import * as types from '../mutation_types';
@@ -61,6 +67,7 @@ export const getFileData = (
   { state, commit, dispatch, getters },
   { path, makeFileActive = true, openFile = makeFileActive, toggleLoading = true },
 ) => {
+  performanceMarkAndMeasure({ mark: WEBIDE_MARK_FETCH_FILE_DATA_START });
   const file = state.entries[path];
   const fileDeletedAndReadded = getters.isFileDeletedAndReadded(path);
 
@@ -81,6 +88,15 @@ export const getFileData = (
   return service
     .getFileData(url)
     .then(({ data }) => {
+      performanceMarkAndMeasure({
+        mark: WEBIDE_MARK_FETCH_FILE_DATA_FINISH,
+        measures: [
+          {
+            name: WEBIDE_MEASURE_FETCH_FILE_DATA,
+            start: WEBIDE_MARK_FETCH_FILE_DATA_START,
+          },
+        ],
+      });
       if (data) commit(types.SET_FILE_DATA, { data, file });
       if (openFile) commit(types.TOGGLE_FILE_OPEN, path);
 

app/assets/javascripts/ide/stores/actions/tree.js

 import { defer } from 'lodash';
+import { performanceMarkAndMeasure } from '~/performance/utils';
+import {
+  WEBIDE_MARK_FETCH_FILES_FINISH,
+  WEBIDE_MEASURE_FETCH_FILES,
+  WEBIDE_MARK_FETCH_FILES_START,
+} from '~/performance/constants';
 import { __ } from '../../../locale';
 import service from '../../services';
 import * as types from '../mutation_types';
@@ -46,8 +52,9 @@ export const setDirectoryData = ({ state, commit }, { projectId, branchId, treeL
   });
 };
 
-export const getFiles = ({ state, commit, dispatch }, payload = {}) =>
-  new Promise((resolve, reject) => {
+export const getFiles = ({ state, commit, dispatch }, payload = {}) => {
+  performanceMarkAndMeasure({ mark: WEBIDE_MARK_FETCH_FILES_START });
+  return new Promise((resolve, reject) => {
     const { projectId, branchId, ref = branchId } = payload;
 
     if (
@@ -61,6 +68,15 @@ export const getFiles = ({ state, commit, dispatch }, payload = {}) =>
       service
         .getFiles(selectedProject.path_with_namespace, ref)
         .then(({ data }) => {
+          performanceMarkAndMeasure({
+            mark: WEBIDE_MARK_FETCH_FILES_FINISH,
+            measures: [
+              {
+                name: WEBIDE_MEASURE_FETCH_FILES,
+                start: WEBIDE_MARK_FETCH_FILES_START,
+              },
+            ],
+          });
           const { entries, treeList } = decorateFiles({ data });
 
           commit(types.SET_ENTRIES, entries);
@@ -85,6 +101,7 @@ export const getFiles = ({ state, commit, dispatch }, payload = {}) =>
       resolve();
     }
   });
+};
 
 export const restoreTree = ({ dispatch, commit, state }, path) => {
   const entry = state.entries[path];

app/assets/javascripts/performance/constants.js

@@ -19,16 +19,27 @@ export const SNIPPET_MEASURE_BLOBS_CONTENT = 'snippet-blobs-content';
 
 // Marks
 export const WEBIDE_MARK_APP_START = 'webide-app-start';
-export const WEBIDE_MARK_TREE_START = 'webide-tree-start';
-export const WEBIDE_MARK_TREE_FINISH = 'webide-tree-finished';
-export const WEBIDE_MARK_FILE_START = 'webide-file-start';
 export const WEBIDE_MARK_FILE_CLICKED = 'webide-file-clicked';
 export const WEBIDE_MARK_FILE_FINISH = 'webide-file-finished';
+export const WEBIDE_MARK_REPO_EDITOR_START = 'webide-init-editor-start';
+export const WEBIDE_MARK_REPO_EDITOR_FINISH = 'webide-init-editor-finish';
+export const WEBIDE_MARK_FETCH_BRANCH_DATA_START = 'webide-getBranchData-start';
+export const WEBIDE_MARK_FETCH_BRANCH_DATA_FINISH = 'webide-getBranchData-finish';
+export const WEBIDE_MARK_FETCH_FILE_DATA_START = 'webide-getFileData-start';
+export const WEBIDE_MARK_FETCH_FILE_DATA_FINISH = 'webide-getFileData-finish';
+export const WEBIDE_MARK_FETCH_FILES_START = 'webide-getFiles-start';
+export const WEBIDE_MARK_FETCH_FILES_FINISH = 'webide-getFiles-finish';
+export const WEBIDE_MARK_FETCH_PROJECT_DATA_START = 'webide-getProjectData-start';
+export const WEBIDE_MARK_FETCH_PROJECT_DATA_FINISH = 'webide-getProjectData-finish';
 
 // Measures
-export const WEBIDE_MEASURE_TREE_FROM_REQUEST = 'webide-tree-loading-from-request';
-export const WEBIDE_MEASURE_FILE_FROM_REQUEST = 'webide-file-loading-from-request';
 export const WEBIDE_MEASURE_FILE_AFTER_INTERACTION = 'webide-file-loading-after-interaction';
+export const WEBIDE_MEASURE_FETCH_PROJECT_DATA = 'WebIDE: Project data';
+export const WEBIDE_MEASURE_FETCH_BRANCH_DATA = 'WebIDE: Branch data';
+export const WEBIDE_MEASURE_FETCH_FILE_DATA = 'WebIDE: File data';
+export const WEBIDE_MEASURE_BEFORE_VUE = 'WebIDE: Before Vue app';
+export const WEBIDE_MEASURE_REPO_EDITOR = 'WebIDE: Repo Editor';
+export const WEBIDE_MEASURE_FETCH_FILES = 'WebIDE: Fetch Files';
 
 //
 // MR Diffs namespace