[Step 3] VisEditors Telemetry enhancements (add new agg-based and lens telemetries)

packages/core/execution-context/core-execution-context-common/src/types.ts

@@ -27,6 +27,8 @@ export type KibanaExecutionContext = {
   readonly description?: string;
   /** in browser - url to navigate to a current page, on server - endpoint path, for task: task SO url */
   readonly url?: string;
+  /** Metadata attached to the field. An optional parameter that allows to describe the execution context in more detail. **/
+  readonly meta?: { [key: string]: string | number | boolean | undefined };
   /** an inner context spawned from the current context. */
   child?: KibanaExecutionContext;
 };

packages/kbn-optimizer/limits.yml

@@ -129,6 +129,6 @@ pageLoadAssetSize:
   eventAnnotation: 19334
   screenshotting: 22870
   synthetics: 40958
-  expressionXY: 34000
+  expressionXY: 36000
   kibanaUsageCollection: 16463
   kubernetesSecurity: 77234

src/dev/storybook/aliases.ts

@@ -23,7 +23,7 @@ export const storybookAliases = {
   es_ui_shared: 'src/plugins/es_ui_shared/.storybook',
   expression_error: 'src/plugins/expression_error/.storybook',
   expression_image: 'src/plugins/expression_image/.storybook',
-  expression_metric_vis: 'src/plugins/chart_expressions/expression_metric/.storybook',
+  expression_metric_vis: 'src/plugins/chart_expressions/expression_legacy_metric/.storybook',
   expression_metric: 'src/plugins/expression_metric/.storybook',
   expression_partition_vis: 'src/plugins/chart_expressions/expression_partition_vis/.storybook',
   expression_repeat_image: 'src/plugins/expression_repeat_image/.storybook',

src/plugins/chart_expressions/common/index.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { extractContainerType, extractVisualizationType } from './utils';

src/plugins/chart_expressions/common/utils.ts

@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { KibanaExecutionContext } from '@kbn/core-execution-context-common';
+
+export const extractContainerType = (context?: KibanaExecutionContext): string | undefined => {
+  if (context) {
+    const recursiveGet = (item: KibanaExecutionContext): KibanaExecutionContext | undefined => {
+      if (item.type) {
+        return item;
+      } else if (item.child) {
+        return recursiveGet(item.child);
+      }
+    };
+    return recursiveGet(context)?.type;
+  }
+};
+
+export const extractVisualizationType = (context?: KibanaExecutionContext): string | undefined => {
+  if (context) {
+    const recursiveGet = (item: KibanaExecutionContext): KibanaExecutionContext | undefined => {
+      if (item.child) {
+        return recursiveGet(item.child);
+      } else {
+        return item;
+      }
+    };
+    return recursiveGet(context)?.type;
+  }
+};

src/plugins/chart_expressions/expression_gauge/common/expression_functions/gauge_function.test.ts

@@ -16,6 +16,7 @@ import {
   GaugeLabelMajorModes,
   GaugeTicksPositions,
 } from '../constants';
+import { ExecutionContext } from '@kbn/expressions-plugin';
 
 describe('interpreter/functions#gauge', () => {
   const fn = functionWrapper(gaugeFunction());
@@ -39,7 +40,7 @@ describe('interpreter/functions#gauge', () => {
   const checkArg = (arg: keyof GaugeArguments, options: Record<string, string>) => {
     Object.values(options).forEach((option) => {
       it(`returns an object with the correct structure for the ${option} ${arg}`, () => {
-        const actual = fn(context, { ...args, [arg]: option }, undefined);
+        const actual = fn(context, { ...args, [arg]: option });
         expect(actual).toMatchSnapshot();
       });
     });
@@ -51,55 +52,43 @@ describe('interpreter/functions#gauge', () => {
   checkArg('labelMajorMode', GaugeLabelMajorModes);
 
   it(`returns an object with the correct structure for the circle if centralMajor and centralMajorMode are passed`, () => {
-    const actual = fn(
-      context,
-      {
-        ...args,
-        shape: GaugeShapes.CIRCLE,
-        centralMajor: 'Some label',
-        centralMajorMode: GaugeCentralMajorModes.CUSTOM,
-      },
-      undefined
-    );
+    const actual = fn(context, {
+      ...args,
+      shape: GaugeShapes.CIRCLE,
+      centralMajor: 'Some label',
+      centralMajorMode: GaugeCentralMajorModes.CUSTOM,
+    });
     expect(actual).toMatchSnapshot();
   });
 
   it(`returns an object with the correct structure for the arc if centralMajor and centralMajorMode are passed`, () => {
-    const actual = fn(
-      context,
-      {
-        ...args,
-        shape: GaugeShapes.ARC,
-        centralMajor: 'Some label',
-        centralMajorMode: GaugeCentralMajorModes.CUSTOM,
-      },
-      undefined
-    );
+    const actual = fn(context, {
+      ...args,
+      shape: GaugeShapes.ARC,
+      centralMajor: 'Some label',
+      centralMajorMode: GaugeCentralMajorModes.CUSTOM,
+    });
     expect(actual).toMatchSnapshot();
   });
 
   it(`throws error if centralMajor or centralMajorMode are provided for the horizontalBullet shape`, () => {
     const actual = () =>
-      fn(
-        context,
-        { ...args, centralMajor: 'Some label', centralMajorMode: GaugeCentralMajorModes.CUSTOM },
-        undefined
-      );
+      fn(context, {
+        ...args,
+        centralMajor: 'Some label',
+        centralMajorMode: GaugeCentralMajorModes.CUSTOM,
+      });
     expect(actual).toThrowErrorMatchingSnapshot();
   });
 
   it(`throws error if centralMajor or centralMajorMode are provided for the vertical shape`, () => {
     const actual = () =>
-      fn(
-        context,
-        {
-          ...args,
-          shape: GaugeShapes.VERTICAL_BULLET,
-          centralMajor: 'Some label',
-          centralMajorMode: GaugeCentralMajorModes.CUSTOM,
-        },
-        undefined
-      );
+      fn(context, {
+        ...args,
+        shape: GaugeShapes.VERTICAL_BULLET,
+        centralMajor: 'Some label',
+        centralMajorMode: GaugeCentralMajorModes.CUSTOM,
+      });
     expect(actual).toThrowErrorMatchingSnapshot();
   });
 
@@ -114,8 +103,10 @@ describe('interpreter/functions#gauge', () => {
           reset: () => {},
         },
       },
-    };
-    await fn(context, args, handlers as any);
+      getExecutionContext: jest.fn(),
+    } as unknown as ExecutionContext;
+
+    await fn(context, args, handlers);
 
     expect(loggedTable!).toMatchSnapshot();
   });

src/plugins/chart_expressions/expression_gauge/common/types/expression_functions.ts

@@ -24,7 +24,6 @@ import {
   GaugeColorModes,
   GaugeCentralMajorModes,
 } from '../constants';
-
 export type GaugeColorMode = $Values<typeof GaugeColorModes>;
 export type GaugeShape = $Values<typeof GaugeShapes>;
 export type GaugeLabelMajorMode = $Values<typeof GaugeLabelMajorModes>;

src/plugins/chart_expressions/expression_gauge/kibana.json

@@ -11,6 +11,6 @@
   "ui": true,
   "requiredPlugins": ["expressions", "fieldFormats", "charts", "visualizations", "presentationUtil", "data"],
   "requiredBundles": ["kibanaUtils", "kibanaReact"],
-  "optionalPlugins": [],
+  "optionalPlugins": ["usageCollection"],
   "extraPublicDirs": ["common"]
 }

src/plugins/chart_expressions/expression_gauge/public/expression_renderers/gauge_renderer.tsx

@@ -9,39 +9,71 @@ import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { PersistedState } from '@kbn/visualizations-plugin/public';
-import { ThemeServiceStart } from '@kbn/core/public';
 import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
 import { ExpressionRenderDefinition } from '@kbn/expressions-plugin/common/expression_renderers';
-import { EXPRESSION_GAUGE_NAME, GaugeExpressionProps } from '../../common';
-import { getFormatService, getPaletteService, getThemeService } from '../services';
+import { StartServicesGetter } from '@kbn/kibana-utils-plugin/public';
+import { METRIC_TYPE } from '@kbn/analytics';
+import { ExpressionGaugePluginStart } from '../plugin';
+import { EXPRESSION_GAUGE_NAME, GaugeExpressionProps, GaugeShapes } from '../../common';
+import { getFormatService, getPaletteService } from '../services';
+import { extractContainerType, extractVisualizationType } from '../../../common';
 
 interface ExpressionGaugeRendererDependencies {
-  theme: ThemeServiceStart;
+  getStartDeps: StartServicesGetter<ExpressionGaugePluginStart>;
 }
 
 export const gaugeRenderer: (
   deps: ExpressionGaugeRendererDependencies
-) => ExpressionRenderDefinition<GaugeExpressionProps> = ({ theme }) => ({
+) => ExpressionRenderDefinition<GaugeExpressionProps> = ({ getStartDeps }) => ({
   name: EXPRESSION_GAUGE_NAME,
   displayName: i18n.translate('expressionGauge.renderer.visualizationName', {
     defaultMessage: 'Gauge',
   }),
   reuseDomNode: true,
   render: async (domNode, config, handlers) => {
+    const { core, plugins } = getStartDeps();
+
     handlers.onDestroy(() => {
       unmountComponentAtNode(domNode);
     });
 
+    const renderComplete = () => {
+      let type: string;
+
+      switch (config.args.shape) {
+        case GaugeShapes.HORIZONTAL_BULLET:
+          type = `${EXPRESSION_GAUGE_NAME}_horizontal`;
+          break;
+        case GaugeShapes.VERTICAL_BULLET:
+          type = `${EXPRESSION_GAUGE_NAME}_vertical`;
+          break;
+        default:
+          type = EXPRESSION_GAUGE_NAME;
+      }
+
+      const executionContext = handlers.getExecutionContext();
+      const containerType = extractContainerType(executionContext);
+      const visualizationType = extractVisualizationType(executionContext);
+
+      if (containerType && visualizationType) {
+        plugins.usageCollection?.reportUiCounter(containerType, METRIC_TYPE.COUNT, [
+          `render_${visualizationType}_${type}`,
+        ]);
+      }
+
+      handlers.done();
+    };
+
     const { GaugeComponent } = await import('../components/gauge_component');
     render(
-      <KibanaThemeProvider theme$={theme.theme$}>
+      <KibanaThemeProvider theme$={core.theme.theme$}>
         <div className="gauge-container" data-test-subj="gaugeChart">
           <GaugeComponent
             {...config}
             formatFactory={getFormatService().deserialize}
-            chartsThemeService={getThemeService()}
+            chartsThemeService={plugins.charts.theme}
             paletteService={getPaletteService()}
-            renderComplete={() => handlers.done()}
+            renderComplete={renderComplete}
             uiState={handlers.uiState as PersistedState}
           />
         </div>

src/plugins/chart_expressions/expression_gauge/public/plugin.ts

@@ -5,12 +5,14 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import { ChartsPluginSetup } from '@kbn/charts-plugin/public';
+import { ChartsPluginSetup, ChartsPluginStart } from '@kbn/charts-plugin/public';
 import { CoreSetup, CoreStart } from '@kbn/core/public';
 import { Plugin as ExpressionsPublicPlugin } from '@kbn/expressions-plugin/public';
 import type { FieldFormatsStart } from '@kbn/field-formats-plugin/public';
+import type { UsageCollectionStart } from '@kbn/usage-collection-plugin/public';
+import { createStartServicesGetter } from '@kbn/kibana-utils-plugin/public';
 import { gaugeFunction } from '../common';
-import { setFormatService, setThemeService, setPaletteService } from './services';
+import { setFormatService, setPaletteService } from './services';
 import { gaugeRenderer } from './expression_renderers';
 
 /** @internal */
@@ -22,18 +24,25 @@ export interface ExpressionGaugePluginSetup {
 /** @internal */
 export interface ExpressionGaugePluginStart {
   fieldFormats: FieldFormatsStart;
+  usageCollection?: UsageCollectionStart;
+  charts: ChartsPluginStart;
 }
 
 /** @internal */
 export class ExpressionGaugePlugin {
-  public setup(core: CoreSetup, { expressions, charts }: ExpressionGaugePluginSetup) {
-    setThemeService(charts.theme);
+  public setup(
+    core: CoreSetup<ExpressionGaugePluginStart, void>,
+    { expressions, charts }: ExpressionGaugePluginSetup
+  ) {
     charts.palettes.getPalettes().then((palettes) => {
       setPaletteService(palettes);
     });
+    const getStartDeps = createStartServicesGetter<ExpressionGaugePluginStart, void>(
+      core.getStartServices
+    );
 
     expressions.registerFunction(gaugeFunction);
-    expressions.registerRenderer(gaugeRenderer({ theme: core.theme }));
+    expressions.registerRenderer(gaugeRenderer({ getStartDeps }));
   }
 
   public start(core: CoreStart, { fieldFormats }: ExpressionGaugePluginStart) {

src/plugins/chart_expressions/expression_gauge/public/services/index.ts

@@ -7,5 +7,4 @@
  */
 
 export { getFormatService, setFormatService } from './format_service';
-export { getThemeService, setThemeService } from './theme_service';
 export { getPaletteService, setPaletteService } from './palette_service';

src/plugins/chart_expressions/expression_gauge/tsconfig.json

@@ -13,8 +13,10 @@
     "server/**/*",
   ],
   "references": [
+    { "path": "../tsconfig.json" },
     { "path": "../../../core/tsconfig.json" },
     { "path": "../../expressions/tsconfig.json" },
+    { "path": "../../usage_collection/tsconfig.json" },
     { "path": "../../presentation_util/tsconfig.json" },
     { "path": "../../field_formats/tsconfig.json" },
     { "path": "../../charts/tsconfig.json" },

src/plugins/chart_expressions/expression_heatmap/common/expression_functions/heatmap_function.test.ts

@@ -11,6 +11,7 @@ import type { HeatmapArguments } from '..';
 import { functionWrapper } from '@kbn/expressions-plugin/common/expression_functions/specs/tests/utils';
 import { Datatable } from '@kbn/expressions-plugin/common/expression_types/specs';
 import { EXPRESSION_HEATMAP_GRID_NAME, EXPRESSION_HEATMAP_LEGEND_NAME } from '../constants';
+import { ExecutionContext } from '@kbn/expressions-plugin';
 
 describe('interpreter/functions#heatmap', () => {
   const fn = functionWrapper(heatmapFunction());
@@ -56,7 +57,7 @@ describe('interpreter/functions#heatmap', () => {
   };
 
   it('returns an object with the correct structure', () => {
-    const actual = fn(context, args, undefined);
+    const actual = fn(context, args);
 
     expect(actual).toMatchSnapshot();
   });
@@ -72,8 +73,10 @@ describe('interpreter/functions#heatmap', () => {
           reset: () => {},
         },
       },
-    };
-    await fn(context, args, handlers as any);
+      getExecutionContext: jest.fn(),
+    } as unknown as ExecutionContext;
+
+    await fn(context, args, handlers);
 
     expect(loggedTable!).toMatchSnapshot();
   });

src/plugins/chart_expressions/expression_heatmap/kibana.json

@@ -11,6 +11,6 @@
   "ui": true,
   "requiredPlugins": ["expressions", "fieldFormats", "charts", "visualizations", "presentationUtil", "data"],
   "requiredBundles": ["kibanaUtils", "kibanaReact"],
-  "optionalPlugins": [],
+  "optionalPlugins": ["usageCollection"],
   "extraPublicDirs": ["common"]
 }