chore(code/frontend): frontend telemetry (#46154)

x-pack/legacy/plugins/code/model/usage_telemetry_metrics.ts

@@ -9,3 +9,14 @@ export enum CodeUsageMetrics {
   REPOSITORIES = 'repositories',
   LANGUAGE_SERVERS = 'langserver',
 }
+
+export enum CodeUIUsageMetrics {
+  ADMIN_PAGE_LOAD_COUNT = 'adminPageLoadCount',
+  SOURCE_VIEW_PAGE_LOAD_COUNT = 'sourceViewPageLoadCount',
+  SEARCH_PAGE_LOAD_COUNT = 'searchPageLoadCount',
+  FILE_TREE_CLICK_COUNT = 'fileTreeClickCount',
+  BREADCRUMB_CLICK_COUNT = 'breadcrumbClickCount',
+  LINE_NUMBER_CLICK_COUNT = 'lineNumberClickCount',
+  STRUCTURE_TREE_CLICK_COUNT = 'structureTreeClickCount',
+  LSP_DATA_AVAILABLE_PAGE_VIEW_COUNT = 'lspDataAvailablePageViewCount',
+}

x-pack/legacy/plugins/code/public/components/admin_page/admin.tsx

@@ -18,6 +18,8 @@ import { SearchBar } from '../search_bar';
 import { EmptyProject } from './empty_project';
 import { LanguageSeverTab } from './language_server_tab';
 import { ProjectTab } from './project_tab';
+import { METRIC_TYPE, trackCodeUiMetric } from '../../services/ui_metric';
+import { CodeUIUsageMetrics } from '../../../model/usage_telemetry_metrics';
 
 enum AdminTabs {
   projects = '0',
@@ -82,6 +84,11 @@ class AdminPage extends React.PureComponent<Props, State> {
     };
   }
 
+  componentDidMount() {
+    // track admin page load count
+    trackCodeUiMetric(METRIC_TYPE.LOADED, CodeUIUsageMetrics.ADMIN_PAGE_LOAD_COUNT);
+  }
+
   public getAdminTabClickHandler = (tab: AdminTabs) => () => {
     this.setState({ tab });
     this.props.history.push(url.format({ pathname: '/admin', query: { tab } }));

x-pack/legacy/plugins/code/public/components/editor/editor.tsx

@@ -22,6 +22,8 @@ import { history } from '../../utils/url';
 import { Modifier, Shortcut } from '../shortcuts';
 import { ReferencesPanel } from './references_panel';
 import { encodeRevisionString } from '../../../common/uri_util';
+import { trackCodeUiMetric, METRIC_TYPE } from '../../services/ui_metric';
+import { CodeUIUsageMetrics } from '../../../model/usage_telemetry_metrics';
 
 export interface EditorActions {
   closePanel(changeUrl: boolean): void;
@@ -64,6 +66,8 @@ export class EditorComponent extends React.Component<IProps> {
     if (!this.gutterClickHandler) {
       this.gutterClickHandler = this.editor!.onMouseDown(
         (e: editorInterfaces.IEditorMouseEvent) => {
+          // track line number click count
+          trackCodeUiMetric(METRIC_TYPE.COUNT, CodeUIUsageMetrics.LINE_NUMBER_CLICK_COUNT);
           const { resource, org, repo, revision, path, pathType } = this.props.match.params;
           const queryString = this.props.location.search;
           const repoUri = `${resource}/${org}/${repo}`;

x-pack/legacy/plugins/code/public/components/file_tree/file_tree.tsx

@@ -14,6 +14,8 @@ import { FileTree as Tree, FileTreeItemType } from '../../../model';
 import { EuiSideNavItem, MainRouteParams, PathTypes } from '../../common/types';
 import { RootState } from '../../reducers';
 import { encodeRevisionString } from '../../../common/uri_util';
+import { trackCodeUiMetric, METRIC_TYPE } from '../../services/ui_metric';
+import { CodeUIUsageMetrics } from '../../../model/usage_telemetry_metrics';
 
 interface Props extends RouteComponentProps<MainRouteParams> {
   node?: Tree;
@@ -129,6 +131,8 @@ export class CodeFileTree extends React.Component<Props, State> {
       const path = flattenFrom ? flattenFrom.path! : node.path!;
       this.toggleTree(path);
       this.onClick(node);
+      // track file tree click count
+      trackCodeUiMetric(METRIC_TYPE.COUNT, CodeUIUsageMetrics.FILE_TREE_CLICK_COUNT);
     };
     const nodeTypeMap = {
       [FileTreeItemType.Directory]: 'Directory',

x-pack/legacy/plugins/code/public/components/main/breadcrumb.tsx

@@ -9,6 +9,8 @@ import { EuiBreadcrumbs } from '@elastic/eui';
 import React from 'react';
 import { MainRouteParams } from '../../common/types';
 import { encodeRevisionString } from '../../../common/uri_util';
+import { trackCodeUiMetric, METRIC_TYPE } from '../../services/ui_metric';
+import { CodeUIUsageMetrics } from '../../../model/usage_telemetry_metrics';
 
 interface Props {
   routeParams: MainRouteParams;
@@ -23,6 +25,7 @@ export class Breadcrumb extends React.PureComponent<Props> {
       href: string;
       className?: string;
       ['data-test-subj']: string;
+      onClick?: Function;
     }> = [];
     const pathSegments = path ? path.split('/') : [];
 
@@ -34,6 +37,10 @@ export class Breadcrumb extends React.PureComponent<Props> {
         href,
         className: 'codeNoMinWidth',
         ['data-test-subj']: `codeFileBreadcrumb-${p}`,
+        onClick: () => {
+          // track breadcrumb click count
+          trackCodeUiMetric(METRIC_TYPE.COUNT, CodeUIUsageMetrics.BREADCRUMB_CLICK_COUNT);
+        },
       };
       if (index === array.length - 1) {
         delete breadcrumb.href;

x-pack/legacy/plugins/code/public/components/main/main.tsx

@@ -17,6 +17,8 @@ import { SideTabs } from './side_tabs';
 import { structureSelector, currentTreeSelector } from '../../selectors';
 import { RootState } from '../../reducers';
 import { FileTree } from '../../../model';
+import { trackCodeUiMetric, METRIC_TYPE } from '../../services/ui_metric';
+import { CodeUIUsageMetrics } from '../../../model/usage_telemetry_metrics';
 
 interface Props extends RouteComponentProps<MainRouteParams> {
   loadingFileTree: boolean;
@@ -29,6 +31,8 @@ interface Props extends RouteComponentProps<MainRouteParams> {
 class CodeMain extends React.Component<Props> {
   public componentDidMount() {
     this.setBreadcrumbs();
+    // track source page load count
+    trackCodeUiMetric(METRIC_TYPE.LOADED, CodeUIUsageMetrics.SOURCE_VIEW_PAGE_LOAD_COUNT);
   }
 
   public componentDidUpdate() {

x-pack/legacy/plugins/code/public/components/search_page/search.tsx

@@ -22,6 +22,8 @@ import { CodeResult } from './code_result';
 import { EmptyPlaceholder } from './empty_placeholder';
 import { Pagination } from './pagination';
 import { SideBar } from './side_bar';
+import { trackCodeUiMetric, METRIC_TYPE } from '../../services/ui_metric';
+import { CodeUIUsageMetrics } from '../../../model/usage_telemetry_metrics';
 
 interface Props {
   searchOptions: SearchOptions;
@@ -49,6 +51,8 @@ class SearchPage extends React.PureComponent<Props, State> {
   public searchBar: any = null;
 
   public componentDidMount() {
+    // track search page load count
+    trackCodeUiMetric(METRIC_TYPE.LOADED, CodeUIUsageMetrics.SEARCH_PAGE_LOAD_COUNT);
     chrome.breadcrumbs.push({ text: `Search` });
   }
 

x-pack/legacy/plugins/code/public/components/symbol_tree/code_symbol_tree.tsx

@@ -15,6 +15,8 @@ import { isEqual } from 'lodash';
 import { RepositoryUtils } from '../../../common/repository_utils';
 import { EuiSideNavItem, MainRouteParams } from '../../common/types';
 import { SymbolWithMembers } from '../../actions/structure';
+import { trackCodeUiMetric, METRIC_TYPE } from '../../services/ui_metric';
+import { CodeUIUsageMetrics } from '../../../model/usage_telemetry_metrics';
 
 interface Props extends RouteComponentProps<MainRouteParams> {
   structureTree: SymbolWithMembers[];
@@ -32,8 +34,17 @@ interface ActiveSymbol {
 export class CodeSymbolTree extends React.PureComponent<Props, { activeSymbol?: ActiveSymbol }> {
   public state: { activeSymbol?: ActiveSymbol } = {};
 
+  public componentDidUpdate(prevProps: Props) {
+    if (this.props.uri && prevProps.uri !== this.props.uri && this.props.structureTree.length > 0) {
+      // track lsp data available  page view count
+      trackCodeUiMetric(METRIC_TYPE.COUNT, CodeUIUsageMetrics.LSP_DATA_AVAILABLE_PAGE_VIEW_COUNT);
+    }
+  }
+
   public getClickHandler = (symbol: ActiveSymbol) => () => {
     this.setState({ activeSymbol: symbol });
+    // track structure tree click count
+    trackCodeUiMetric(METRIC_TYPE.COUNT, CodeUIUsageMetrics.STRUCTURE_TREE_CLICK_COUNT);
   };
 
   public getStructureTreeItemRenderer = (

x-pack/legacy/plugins/code/public/services/ui_metric.ts

@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import {
+  createUiStatsReporter,
+  METRIC_TYPE,
+} from '../../../../../../src/legacy/core_plugins/ui_metric/public';
+import { APP_USAGE_TYPE } from '../../common/constants';
+
+export const trackCodeUiMetric = createUiStatsReporter(APP_USAGE_TYPE);
+export { METRIC_TYPE };