[Event annotations] Individual annotation editing from library

[drewdaemon]

Summary

Resolve #158774
Part of #159053

Known issues

• Responsive layout Proposal: don't optimize for mobile
• Recovering embeddable from problematic data view state
• margin around dimension buttons
• Functional test coverage

Checklist

• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Documentation was added for features that require explanation or tutorials
• Unit or functional tests were updated or added to match the most common scenarios
• Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
• Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
• This was checked for cross-browser compatibility

[drewdaemon]

New functional tests passed flaky test runner: https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/3134#_

[drewdaemon]

This fails in CI but passes locally. I decided to address this as part of #159053

[MichaelMarcialis]

Thanks so much again, @drewdaemon. This looks wonderful. I've left you a few final comments below, but nothing worth holding up this PR further. Assuming you're able to review them, I'm approving now.

• If all annotation dimension items are removed, there is some extra spacing at the top of the container, above the "Add annotation" button. This is appears due to the top margin of the button. Can you style it so that this extra space doesn't appear when dimension items are absent?

  

• Can you remove the placeholder text for the color picker altogether? As we're now restoring the default hex value on blur of the field, this no longer needs to be there.

  

[MichaelMarcialis]

Again, a subjective decision, but would it be better to wrap this EuiTitle component and h2 element around the title text only (rather than the title and the back button)?

[drewdaemon]

I see where you're coming from, but I like it this way since we don't have to duplicate the elements between the two titles in the markup

[stratoula]

I really like the improved UI 👏

I only found one bug. I have a query annotation created by sample data logs. I change the dataview to ecommerce. Then I see a time field error, I change the time field to order_date but still the dataset and the annotations are not loaded. As you see in the screenshot below I see a Missing field label indicating that something goes wrong with the time field.

[drewdaemon]

@stratoula

I only found one bug. I have a query annotation created by sample data logs. I change the dataview to ecommerce. Then I see a time field error, I change the time field to order_date but still the dataset and the annotations are not loaded. As you see in the screenshot below I see a Missing field label indicating that something goes wrong with the time field.

Great find! This turned out to be a small oversight on my part (instead of an embeddable issue as I originally feared).

Fixed in 50ea86e

[stratoula]

Bug fixed, tested again the basic scenarios, everything seems to work as expected 👏
LGTM, great job 💯

[kibana-ci]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: 888a8ff

Failed CI Steps

• FTR Configs #15

Test Failures

• [job] [logs] FTR Configs #15 / serverless observability UI Observability Log Explorer Dataset Selector "before all" hook in "Dataset Selector"

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
eventAnnotation	445	25	-420
eventAnnotationListing	-	429	+429
lens	1129	1087	-42
total			-33

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
@kbn/event-annotation-components	65	52	-13
embeddable	442	434	-8
eventAnnotation	201	200	-1
eventAnnotationListing	-	15	+15
lens	519	520	+1
total			-6

Async chunks

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

id	before	after	diff
dashboard	354.1KB	354.1KB	-12.0B
eventAnnotation	176.7KB	7.1KB	-169.6KB
eventAnnotationListing	-	197.1KB	⚠️ +197.1KB
filesManagement	89.5KB	89.4KB	-12.0B
graph	387.5KB	387.5KB	-12.0B
lens	1.4MB	1.3MB	-4.3KB
maps	2.8MB	2.8MB	-12.0B
visualizations	265.5KB	265.5KB	-12.0B
total			+23.2KB

Page load bundle

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

id	before	after	diff
embeddable	78.6KB	77.7KB	-978.0B
eventAnnotation	21.4KB	19.7KB	-1.7KB
eventAnnotationListing	-	10.7KB	+10.7KB
total			+8.0KB

Unknown metric groups

API count

id	before	after	diff
@kbn/event-annotation-components	65	52	-13
embeddable	542	534	-8
eventAnnotation	201	200	-1
eventAnnotationListing	-	15	+15
lens	616	617	+1
total			-6

async chunk count

id	before	after	diff
eventAnnotation	6	1	-5
eventAnnotationListing	-	5	+5
total			-0

miscellaneous assets size

id	before	after	diff
eventAnnotation	161.8KB	0.0B	-161.8KB
eventAnnotationListing	-	161.8KB	+161.8KB
total			-0.0B

References to deprecated APIs

id	before	after	diff
@kbn/event-annotation-components	10	0	-10
eventAnnotation	7	5	-2
eventAnnotationListing	-	12	+12
total			-0

History

• 💔 Build #160177 failed b35f445
• 💔 Build #160139 failed 48e01ec
• 💛 Build #160087 was flaky 50ea86e
• 💛 Build #160025 was flaky daeaf86
• 💛 Build #159805 was flaky 2c07844

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