Created generic embeddable function

    Fixed telemetry

    Updates expression on input change

    Fixed ts errors

src/plugins/kibana_usage_collection/server/collectors/management/schema.ts

@@ -456,6 +456,10 @@ export const stackManagementSchema: MakeSchemaFrom<UsageStats> = {
  type: 'boolean',
  _meta: { description: 'Non-default value of setting.' },
  },
+ 'labs:canvas:byValueEmbeddable': {
+ type: 'boolean',
+ _meta: { description: 'Non-default value of setting.' },
+ },
  'labs:canvas:useDataService': {
  type: 'boolean',
  _meta: { description: 'Non-default value of setting.' },

src/plugins/kibana_usage_collection/server/collectors/management/types.ts

@@ -124,6 +124,7 @@ export interface UsageStats {
  'banners:textColor': string;
  'banners:backgroundColor': string;
  'labs:canvas:enable_ui': boolean;
+ 'labs:canvas:byValueEmbeddable': boolean;
  'labs:canvas:useDataService': boolean;
  'labs:presentation:timeToPresent': boolean;
  'labs:dashboard:enable_ui': boolean;

src/plugins/presentation_util/common/labs.ts

@@ -10,8 +10,9 @@ import { i18n } from '@kbn/i18n';
 
 export const LABS_PROJECT_PREFIX = 'labs:';
 export const DEFER_BELOW_FOLD = `${LABS_PROJECT_PREFIX}dashboard:deferBelowFold` as const;
+export const BY_VALUE_EMBEDDABLE = `${LABS_PROJECT_PREFIX}canvas:byValueEmbeddable` as const;
 
-export const projectIDs = [DEFER_BELOW_FOLD] as const;
+export const projectIDs = [DEFER_BELOW_FOLD, BY_VALUE_EMBEDDABLE] as const;
 export const environmentNames = ['kibana', 'browser', 'session'] as const;
 export const solutionNames = ['canvas', 'dashboard', 'presentation'] as const;
 
@@ -34,6 +35,19 @@ export const projects: { [ID in ProjectID]: ProjectConfig & { id: ID } } = {
  }),
  solutions: ['dashboard'],
  },
+ [BY_VALUE_EMBEDDABLE]: {
+ id: BY_VALUE_EMBEDDABLE,
+ isActive: true,
+ isDisplayed: true,
+ environments: ['kibana', 'browser', 'session'],
+ name: i18n.translate('presentationUtil.labs.enableByValueEmbeddableName', {
+ defaultMessage: 'By-Value Embeddables',
+ }),
+ description: i18n.translate('presentationUtil.labs.enableByValueEmbeddableDescription', {
+ defaultMessage: 'Enables support for by-value embeddables in Canvas',
+ }),
+ solutions: ['canvas'],
+ },
 };
 
 export type ProjectID = typeof projectIDs[number];

src/plugins/telemetry/schema/oss_plugins.json

@@ -7825,6 +7825,12 @@
  "description": "Non-default value of setting."
  }
  },
+ "labs:canvas:byValueEmbeddable": {
+ "type": "boolean",
+ "_meta": {
+ "description": "Non-default value of setting."
+ }
+ },
  "labs:canvas:useDataService": {
  "type": "boolean",
  "_meta": {

x-pack/plugins/canvas/canvas_plugin_src/functions/external/embeddable.ts

@@ -0,0 +1,133 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { ExpressionFunctionDefinition } from 'src/plugins/expressions/common';
+import { PaletteOutput } from 'src/plugins/charts/common';
+import { TimeRange } from 'src/plugins/data/public';
+import { EmbeddableInput as Input } from 'src/plugins/embeddable/public';
+import { Filter } from '@kbn/es-query';
+import { getQueryFilters } from '../../../public/lib/build_embeddable_filters';
+import { ExpressionValueFilter, TimeRange as TimeRangeArg } from '../../../types';
+import { EmbeddableExpressionType, EmbeddableExpression } from '../../expression_types';
+import { getFunctionHelp } from '../../../i18n';
+import { SavedObjectReference } from '../../../../../../src/core/types';
+
+interface Arguments {
+ id: string;
+ title: string | null;
+ type: string;
+ timerange: TimeRangeArg | null;
+ palette?: PaletteOutput;
+ hideTitle?: boolean;
+}
+
+const defaultTimeRange = {
+ from: 'now-15m',
+ to: 'now',
+};
+
+export type EmbeddableInput = Input & {
+ id: string;
+ timeRange?: TimeRange;
+ filters?: Filter[];
+ palette?: PaletteOutput;
+};
+
+type Return = EmbeddableExpression<EmbeddableInput>;
+
+export function embeddable(): ExpressionFunctionDefinition<
+ 'embeddable',
+ ExpressionValueFilter | null,
+ Arguments,
+ Return
+> {
+ // TODO: write help text
+ const { help, args: argHelp } = getFunctionHelp().embeddable;
+
+ return {
+ name: 'embeddable',
+ help,
+ args: {
+ id: {
+ types: ['string'],
+ required: false,
+ help: argHelp.id,
+ },
+ type: {
+ types: ['string'],
+ required: true,
+ help: argHelp.id,
+ },
+ timerange: {
+ types: ['timerange'],
+ help: argHelp.timerange,
+ required: false,
+ },
+ title: {
+ types: ['string'],
+ help: argHelp.title,
+ required: false,
+ },
+ hideTitle: {
+ types: ['boolean'],
+ help: argHelp.hideTitle as string,
+ },
+ palette: {
+ types: ['palette'],
+ help: argHelp.palette!,
+ required: false,
+ },
+ },
+ type: EmbeddableExpressionType,
+ fn: (input, args) => {
+ const filters = input ? input.and : [];
+
+ return {
+ type: EmbeddableExpressionType,
+ input: {
+ id: args.id,
+ filters: getQueryFilters(filters),
+ timeRange: args.timerange || defaultTimeRange,
+ title: args.title === null ? undefined : args.title,
+ hidePanelTitles: args.hideTitle,
+ disableTriggers: true,
+ palette: args.palette,
+ renderMode: 'noInteractivity',
+ },
+ generatedAt: Date.now(),
+ embeddableType: args.type,
+ };
+ },
+
+ extract(state) {
+ const refName = 'embeddable.id';
+ const refType = 'embeddable.embeddableType';
+ const references: SavedObjectReference[] = [
+ {
+ name: refName,
+ type: refType,
+ id: state.id[0] as string,
+ },
+ ];
+ return {
+ state: {
+ ...state,
+ id: [refName],
+ },
+ references,
+ };
+ },
+
+ inject(state, references) {
+ const reference = references.find((ref) => ref.name === 'embeddable.id');
+ if (reference) {
+ state.id[0] = reference.id;
+ }
+ return state;
+ },
+ };
+}

x-pack/plugins/canvas/canvas_plugin_src/functions/external/index.ts

@@ -9,5 +9,6 @@ import { savedLens } from './saved_lens';
 import { savedMap } from './saved_map';
 import { savedSearch } from './saved_search';
 import { savedVisualization } from './saved_visualization';
+import { embeddable } from './embeddable';
 
-export const functions = [savedLens, savedMap, savedSearch, savedVisualization];
+export const functions = [savedLens, savedMap, savedSearch, savedVisualization, embeddable];

x-pack/plugins/canvas/canvas_plugin_src/plugin.ts

@@ -7,6 +7,7 @@
 
 import { CoreSetup, CoreStart, Plugin } from 'src/core/public';
 import { ChartsPluginStart } from 'src/plugins/charts/public';
+import { PresentationUtilPluginStart } from 'src/plugins/presentation_util/public';
 import { CanvasSetup } from '../public';
 import { EmbeddableStart } from '../../../../src/plugins/embeddable/public';
 import { UiActionsStart } from '../../../../src/plugins/ui_actions/public';
@@ -24,6 +25,7 @@ export interface StartDeps {
  uiActions: UiActionsStart;
  inspector: InspectorStart;
  charts: ChartsPluginStart;
+ presentationUtil: PresentationUtilPluginStart;
 }
 
 export type SetupInitializer<T> = (core: CoreSetup<StartDeps>, plugins: SetupDeps) => T;

x-pack/plugins/canvas/canvas_plugin_src/renderers/embeddable/embeddable.tsx

@@ -57,6 +57,10 @@ export const embeddableRendererFactory = (
  render: async (domNode, { input, embeddableType }, handlers) => {
  const uniqueId = handlers.getElementId();
 
+ const isByValueEnabled = plugins.presentationUtil.labsService.isProjectEnabled(
+ 'labs:canvas:byValueEmbeddable'
+ );
+
  if (!embeddablesRegistry[uniqueId]) {
  const factory = Array.from(plugins.embeddable.getEmbeddableFactories()).find(
  (embeddableFactory) => embeddableFactory.type === embeddableType
@@ -86,7 +90,8 @@ export const embeddableRendererFactory = (
  const updatedExpression = embeddableInputToExpression(
  updatedInput,
  embeddableType,
- palettes
+ palettes,
+ isByValueEnabled
  );
 
  if (updatedExpression) {

x-pack/plugins/canvas/canvas_plugin_src/renderers/embeddable/embeddable_input_to_expression.ts

@@ -10,6 +10,7 @@ import { EmbeddableTypes, EmbeddableInput } from '../../expression_types';
 import { toExpression as mapToExpression } from './input_type_to_expression/map';
 import { toExpression as visualizationToExpression } from './input_type_to_expression/visualization';
 import { toExpression as lensToExpression } from './input_type_to_expression/lens';
+import { toExpression as genericToExpression } from './input_type_to_expression/embeddable';
 
 export const inputToExpressionTypeMap = {
  [EmbeddableTypes.map]: mapToExpression,
@@ -23,8 +24,13 @@ export const inputToExpressionTypeMap = {
 export function embeddableInputToExpression(
  input: EmbeddableInput,
  embeddableType: string,
- palettes: PaletteRegistry
+ palettes: PaletteRegistry,
+ useGenericEmbeddable?: boolean
 ): string | undefined {
+ if (useGenericEmbeddable) {
+ return genericToExpression(input, embeddableType, palettes);
+ }
+
  if (inputToExpressionTypeMap[embeddableType]) {
  return inputToExpressionTypeMap[embeddableType](input as any, palettes);
  }

x-pack/plugins/canvas/canvas_plugin_src/renderers/embeddable/input_type_to_expression/embeddable.ts

@@ -0,0 +1,48 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { toExpression as toExpressionString } from '@kbn/interpreter/common';
+import { PaletteRegistry } from 'src/plugins/charts/public';
+import { EmbeddableInput } from '../../../functions/external/embeddable';
+
+export function toExpression(
+ input: EmbeddableInput,
+ embeddableType: string,
+ palettes: PaletteRegistry
+): string {
+ const expressionParts = [] as string[];
+
+ expressionParts.push('embeddable');
+
+ expressionParts.push(`id="${input.id}"`);
+
+ expressionParts.push(`type="${embeddableType}"`);
+
+ if (input.title !== undefined) {
+ expressionParts.push(`title="${input.title}"`);
+ }
+
+ if (input.timeRange) {
+ expressionParts.push(
+ `timerange={timerange from="${input.timeRange.from}" to="${input.timeRange.to}"}`
+ );
+ }
+
+ if (input.palette) {
+ expressionParts.push(
+ `palette={${toExpressionString(
+ palettes.get(input.palette.name).toExpression(input.palette.params)
+ )}}`
+ );
+ }
+
+ if (input.hidePanelTitles !== undefined) {
+ expressionParts.push(`hideTitle=${input.hidePanelTitles}`);
+ }
+
+ return expressionParts.join(' ');
+}

x-pack/plugins/canvas/i18n/functions/dict/embeddable.ts

@@ -0,0 +1,37 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+import { embeddable } from '../../../canvas_plugin_src/functions/external/embeddable';
+import { FunctionHelp } from '../function_help';
+import { FunctionFactory } from '../../../types';
+
+export const help: FunctionHelp<FunctionFactory<typeof embeddable>> = {
+ help: i18n.translate('xpack.canvas.functions.embeddableHelpText', {
+ defaultMessage: `Returns an embeddable`,
+ }),
+ args: {
+ id: i18n.translate('xpack.canvas.functions.embeddable.args.idHelpText', {
+ defaultMessage: `The ID of the embeddable saved object`,
+ }),
+ type: i18n.translate('xpack.canvas.functions.embeddable.args.typeHelpText', {
+ defaultMessage: `The embeddable type`,
+ }),
+ timerange: i18n.translate('xpack.canvas.functions.embeddable.args.timerangeHelpText', {
+ defaultMessage: `The timerange of data that should be included`,
+ }),
+ title: i18n.translate('xpack.canvas.functions.embeddable.args.titleHelpText', {
+ defaultMessage: `The title for the Lens visualization object`,
+ }),
+ hideTitle: i18n.translate('xpack.canvas.functions.embeddable.args.titleHelpText', {
+ defaultMessage: `The title for the Lens visualization object`,
+ }),
+ palette: i18n.translate('xpack.canvas.functions.embeddable.args.paletteHelpText', {
+ defaultMessage: `The palette used for the Lens visualization`,
+ }),
+ },
+};

x-pack/plugins/canvas/i18n/functions/function_help.ts

@@ -27,6 +27,7 @@ import { help as demodata } from './dict/demodata';
 import { help as doFn } from './dict/do';
 import { help as dropdownControl } from './dict/dropdown_control';
 import { help as eq } from './dict/eq';
+import { help as embeddable } from './dict/embeddable';
 import { help as escount } from './dict/escount';
 import { help as esdocs } from './dict/esdocs';
 import { help as essql } from './dict/essql';
@@ -183,6 +184,7 @@ export const getFunctionHelp = (): FunctionHelpDict => ({
  do: doFn,
  dropdownControl,
  eq,
+ embeddable,
  escount,
  esdocs,
  essql,