[Security Solution] Add custom features to lens

[angorayc]

Summary

Security Solution is migrating existing charts to Lens Embeddables but keep the custom inspectors.
In this PR we made some changes to allow Embeddables to use a custom inspector, and allow metric to align left or center:

To see the result of Lens Embeddables on Security Solutions, please run #138995, add this to kibana.dev.yml, and visit any of the explore pages:

xpack.securitySolution.enableExperimental: [chartEmbeddablesEnabled]

Screen.Recording.2022-10-27.at.15.11.41.mov

[elasticmachine]

Pinging @elastic/kibana-vis-editors @elastic/kibana-vis-editors-external (Team:VisEditors)

[drewdaemon]

Hi @angorayc ! First off, thank you for taking the initiative to contribute "upstream" to Lens to unblock yourself from using the embeddable!

You're on the right track, but we should change how the metric alignment parameter makes it to the metric-component.tsx.

Currently you have it set up like this:

• metricAlignment gets set as part of the Lens embeddable's input
• then it gets passed in the handlers.variables
• then it gets added to the renderer's vis config

Since the metric alignment parameter only applies to the legacy metric vis type, we should change it so that metricAlignment becomes part of the lensAttributes instead of being part of the embeddable input. So, we should

Add metricAlignment as an optional argument to the legacy metric expression function

first it needs to be added to the type

kibana/src/plugins/chart_expressions/expression_legacy_metric/common/types/expression_functions.ts

Lines 21 to 33 in c5b1afd

	export interface MetricArguments {
	percentageMode: boolean;
	colorMode: ColorMode;
	showLabels: boolean;
	palette?: PaletteOutput<CustomPaletteState>;
	font: Style;
	labelFont: Style;
	labelPosition: LabelPositionType;
	metric: Array<ExpressionValueVisDimension | string>;
	bucket?: ExpressionValueVisDimension | string;
	colorFullBackground: boolean;
	autoScale?: boolean;
	}

then, to the expression function args

kibana/src/plugins/chart_expressions/expression_legacy_metric/common/expression_functions/metric_vis_function.ts

Line 47 in c5b1afd

args: {

Get the value of the alignment from the args instead of the handlers.variables

kibana/src/plugins/chart_expressions/expression_legacy_metric/common/expression_functions/metric_vis_function.ts

Line 179 in c5b1afd

metric: {

Add alignment as an optional member in the legacy metric state

kibana/x-pack/plugins/lens/common/types.ts

Lines 87 to 96 in c5b1afd

	export interface LegacyMetricState {
	layerId: string;
	accessor?: string;
	layerType: LayerType;
	colorMode?: ColorMode;
	palette?: PaletteOutput<CustomPaletteParams>;
	titlePosition?: 'top' | 'bottom';
	size?: string;
	textAlign?: 'left' | 'right' | 'center';
	}

Attach the metricAlignment argument to the expression AST when present

kibana/x-pack/plugins/lens/public/visualizations/legacy_metric/visualization.tsx

Line 107 in c5b1afd

arguments: {

Let me know if you have any questions about how this all fits together!

[elasticmachine]

Pinging @elastic/security-threat-hunting (Team:Threat Hunting)

[elasticmachine]

Pinging @elastic/security-solution (Team: SecuritySolution)

[drewdaemon]

Looking good! Left a couple of comments.

@flash1293 do you know who owns the interpreter_functional tests? @angorayc ran the functional tests with the updateBaselines option locally and it seems like it has changed a bunch of visual baselines that weren't failing before.

[drewdaemon]

LGTM!

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: e3b17ea

Metrics [docs]

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
expressionLegacyMetricVis	49	51	+2
lens	583	585	+2
total			+4

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
expressionLegacyMetricVis	11.6KB	12.0KB	+385.0B
lens	1.3MB	1.3MB	+113.0B
securitySolution	9.6MB	9.6MB	+128.0B
total			+626.0B

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id	before	after	diff
expressionLegacyMetricVis	1	2	+1

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
expressionLegacyMetricVis	9.8KB	10.1KB	+282.0B
lens	29.2KB	29.3KB	+58.0B
total			+340.0B

Unknown metric groups

API count

id	before	after	diff
expressionLegacyMetricVis	49	51	+2
lens	676	678	+2
total			+4

ESLint disabled in files

id	before	after	diff
osquery	1	2	+1

ESLint disabled line counts

id	before	after	diff
enterpriseSearch	19	21	+2
fleet	57	63	+6
osquery	103	108	+5
securitySolution	439	443	+4
total			+17

Total ESLint disabled count

id	before	after	diff
enterpriseSearch	20	22	+2
fleet	65	71	+6
osquery	104	110	+6
securitySolution	516	520	+4
total			+18

History

• 💚 Build #84356 succeeded 2775470
• 💚 Build #84324 succeeded 55d4144
• 💚 Build #84053 succeeded 905775c
• 💔 Build #83944 failed 13dc712
• 💔 Build #83922 failed 2b2df29
• 💚 Build #83506 succeeded 7331a2f

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

[flash1293]

do you know who owns the interpreter_functional tests

Sorry for being late to the party - I would say appservices which means they are now back to the viseditors/visualizations team