[Fleet] Agent configuration - package policy detail UI

[jen-huang]

View in Figma

Video walkthrough: https://share.getcloudapp.com/8LuJAq5Z

Add agent configuration data source details UI in the form of a flyout that appears when user clicks into a data source in the table or choses "view data datasource" from the action menu. The flyout has a human-readable view and a raw YAML view.

Small note: Not shown in the screenshot, but some inputs can have top-level settings, meaning they aren't specified at the stream level. In these cases, we should show the input top level settings above the "Streams: X / Y" row, using the same style as the key/value pairs in the "Definition" section above.

Tasks

• Add flyout
• Add Overview tab
• Add YAML tab
• Allow flyout to be deep-linked

[elasticmachine]

Pinging @elastic/ingest (Feature:EPM)

[paul-tavares]

@jen-huang picking this up - hope its ok 😃

[jen-huang]

@paul-tavares I think the designs for this flyout has changed, it might be better to pick up #57952 first?

[paul-tavares]

Sounds good. Will put this on hold and focus on the one you referenced. Thanks.

[ruflin]

@hbharding Could you update this issue based on the most recent discussion on how this should look or open a new issue?

[hbharding]

@paul-tavares @jen-huang @ruflin Apologies for the delay. I updated this issue with new screenshots and a link to a video walk through. Let me know if you have any questions.

[ruflin]

@hbharding Could you double check this issue if it really is what we want to deliver in alpha1?

[jen-huang]

@ruflin @hbharding I'd like to kick this issue to Beta, what do you think? For alpha, we already have implemented the full agent config YAML tab (not in flyout, sibling of Data sources and Settings tabs). That YAML tab & edit data source are two ways the user can view data source details for alpha.

[ruflin]

@jen-huang SGTM

[hbharding]

Hey sorry for the late reply. Yes, since we already built the functionality before I updated the design, lets move this to beta for an improvement.

[ph]

@hbharding @jen-huang @mostlyjason How much of this is still valid?

[jen-huang]

@ph I think this entire issue is still valid. We don't have any integration policy detail UI atm.

[mostlyjason]

Why is a flyout better than just taking the user to the edit page? The edit page serves as both a viewer and an editor. I could see this being useful if a user wants to quickly inspect multiple integration policies. Is there another use case I'm missing?

[jen-huang]

Closing as the use case still hasn't really come up, a year later.