[Lens] Add metric icon poc

[mbondyra]

Resolves #129229

[ryankeairns]

Thank you for working on this! It is a fun addition that adds some personality to our dashboards :)

Having played with it, here are a few considerations:

• Big +1 to reduce general padding as you noted in Slack
• Add icon size option
• When the Icon background is None, then I would expect no padding around the icon (see below)
• I think we can drop the Shadow option; the tinted Color setting seems sufficient
• The list of icons is good; any reason to not allow all EUI icons? (I'm guessing there is a performance loading consideration that I am not aware of :) )
• When Icon alignment is left or right, we may want to require background color; otherwise the icon floats in a poorly aligned position (see below)
• (future; general metric feedback) Consider adding a setting for vertical margin between the title, value, icon

Screenshots for items above

Removing padding when no Icon background color

Require background color when icon position is set to left or right

... to avoid this situation.

[kibana-ci]

💔 Build Failed

• Buildkite Build
• Commit: ecae15d
• Interpreting CI Failures
• Storybooks Preview
• Cloud Deployment
• Webpack Bundle Analyzer

Failed CI Steps

• OSS Misc Functional Tests
• OSS Misc Functional Tests
• Jest Tests #3
• Jest Tests #5
• Jest Tests #7
• Linting
• Checks

Test Failures

• [job] [logs] Jest Tests #3 / AutoScale withAutoScale renders
• [job] [logs] Jest Tests #7 / AutoScale withAutoScale renders
• [job] [logs] Jest Tests #5 / metric_visualization #toExpression should map to a valid AST
• [job] [logs] Jest Tests #3 / MetricVisComponent should render correct structure for multi-value metrics
• [job] [logs] Jest Tests #7 / MetricVisComponent should render correct structure for multi-value metrics
• [job] [logs] Jest Tests #3 / MetricVisComponent should render correct structure for single metric
• [job] [logs] Jest Tests #7 / MetricVisComponent should render correct structure for single metric
• [job] [logs] OSS Misc Functional Tests / runPipeline basic visualize loader pipeline expression tests full expression runs the expression and compares final output
• [job] [logs] OSS Misc Functional Tests / runPipeline basic visualize loader pipeline expression tests full expression runs the expression and compares final output

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
lens	757	758	+1

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
expressionMetricVis	46	58	+12
lens	452	458	+6
total			+18

Async chunks

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

id	before	after	diff
expressionMetricVis	11.1KB	13.9KB	+2.8KB
lens	1.1MB	1.1MB	+5.2KB
total			+7.9KB

Page load bundle

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

id	before	after	diff
expressionMetricVis	8.4KB	9.6KB	+1.2KB

Unknown metric groups

API count

id	before	after	diff
expressionMetricVis	46	58	+12
lens	527	533	+6
total			+18

History

• 💔 Build #40626 failed 7d2e610f5d94b6082d2f4516defbfddda8a88869
• 💔 Build #40592 failed edb65941cd91abc1b38fafe57ae7a2b6f9f694fd

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

[ryankeairns]

Checked the latest, very nice :)

[mbondyra]

Hey @ryankeairns thank you so much for your feedback and help.
It will probably not be released because datavis team is working on changing the metric visualization completely. I spent some time on Thursday playing with integrating their solution with an icon decoration, but didn't get very far as the code is in an early state.
Hopefully we can reuse some elements of this code though when we use the new metric. :)

[mbondyra]

Closing it for now as it won't be released in this shape.