[Discover] Adapt logs flyout to use the new content framework UI

[iblancof]

Summary

Closes #233743

This PR is a continuation of another one, where the UI for the trace docs overview is updated, aiming to achieve visual consistency across Discover flyouts.

In the logs case, the basic information sections have been grouped at the top, and the other sections have been adapted to align with the Content Framework as much as possible, without making major changes.

Flyout

Before	After

Interactions

Before	After

How to test

• Make sure you're in an Observability space
• Go to discover and check for logs
• Open doc flyout

To get logs with degraded fields filter by _ignored:*.

[iblancof]

/oblt-deploy

[akowalska622]

Data Discovery changes LGTM

[kkurstak]

Adding to the discussion - the separated "Streams" section was now created due to technical limitations - the lack of ability of placing "field = stream" + value in the "About" section. I would definitely recommend against separating it into a new section, but I know the team has investigated our options in the context of the new UI components and it was a challenge. I will work with @iblancof this week to review the designs and we'll get back to you.

We'll move around the sections to reflect the "old" logic.

[kkurstak]

A follow up question we had about the sections in the logs flyout @gbamparop

We have divided the flyout in "Service and Infrastructure" / "Cloud" / "Other".

With the new components, we'd need to add "Streams".

What we proposed in our refreshed designs is to redesign or limit the divisions of content within the flyout. The new designs offer an "About" section that could handle all of them. This would make the information more compact, and in cases where the log document does not render all the fields, it would definitely help with the overall presentation.

Was there any particular reason to divide the metadata into 3 short sections? Are there any reasons we cannot merge the sections? This would be our general recommendation (draft - some content is pending product definition), I've moved the "Content breakdown" up (missing "Streams" for now):

[cauemarcondes]

LGTM

[gbamparop]

I will work with @iblancof this week to review the designs and we'll get back to you.

Thanks!

Was there any particular reason to divide the metadata into 3 short sections? Are there any reasons we cannot merge the sections?

They were added to give a brief overview of the different parts, however, I think it’s important to have the same UX in these tabs and since resource fields are not unique to logs, we could follow the other approach.

There was some discussion in #171923 and a card sorting exercise organised by @isaclfreire #171923 (comment).

[iblancof]

Hey @gbamparop, after your feedback, I aligned with @kkurstak that we’ll place the “Content Breakdown” section first and include the highlights within it, so they’ll also be collapsed. fa45cfd

Regarding the Streams link we're still waiting for feedback from the Streams folks.

[kkurstak]

Hey @gbamparop @iblancof - Thank you so much for all info and feedback. Happy to hear the team is open to change the structure and follow our designs! I will review in detail the past issue where the current structure was decided and reach out to the team to share the why of our change - I'd like to share it so we eventually have time to receive feedback.

Once again, thanks @gbamparop!

[iblancof]

Just confirmed with @LucaWintergerst that we’re good to go with having the stream link in a separate section, as we may have many more other functions in the future that definitely won’t relate directly to a single field anymore.

cc @kkurstak @patpascal @gbamparop

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: a0de7e4
• Storybooks Preview

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
unifiedDocViewer	383	384	+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
unifiedDocViewer	16	17	+1

Async chunks

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

id	before	after	diff
streamsApp	765.7KB	765.5KB	-214.0B
unifiedDocViewer	269.6KB	268.8KB	-866.0B
total			-1.1KB

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
unifiedDocViewer	3	4	+1

Page load bundle

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

id	before	after	diff
unifiedDocViewer	13.0KB	13.3KB	+227.0B

Unknown metric groups

API count

id	before	after	diff
unifiedDocViewer	24	26	+2

History

• 💔 Build #341891 failed 3ddd79d
• 💚 Build #341281 succeeded e4c2c06
• 💔 Build #340835 failed b1652d7
• 💔 Build #340711 failed d08ecdd
• 💔 Build #340271 failed e0184db

cc @iblancof