Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[APM] Solution navigation UI polish #101355

Closed
formgeist opened this issue Jun 4, 2021 · 1 comment · Fixed by #101360
Closed

[APM] Solution navigation UI polish #101355

formgeist opened this issue Jun 4, 2021 · 1 comment · Fixed by #101360

Comments

@formgeist
Copy link
Contributor

formgeist commented Jun 4, 2021

Summary

Related to #101044 there's a few UI polish items that we should clean up.

Polish

Adopt full page height of the content panel

As described in elastic/eui#4770 (comment) there might be a few problems that make the content panel not show in full height.

Screenshot 2021-06-04 at 09 40 55

Move Service tabs navigation into the PageHeader

Screenshot 2021-06-04 at 09 41 21

The EuiPageHeader component supports tabs, so we should make use of it and adopt our existing tabs navigation in this new way. That probably means re-positioning the View correlations button to somewhere else.

Wrap the Service map in a EuiPanel

Since the Service map no longer meshes with the page background, I think we can wrap it in a EuiPanel like other visualizations.

Screenshot 2021-06-04 at 10 04 00

JVM detail page: Remove the horizontal rule below the detail header

Screenshot 2021-06-04 at 10 05 28

Settings: Remove the light grey content background color

Screenshot 2021-06-04 at 10 07 01

Agent configuration: Create view is not wrapped in the new page template, missing the navigation

Screenshot 2021-06-04 at 10 07 45

Service inventory and Traces: Remove the panel padding around the tables

There's an option for EuiPanel to set paddingSize="none" for this instances.

Screenshot 2021-06-04 at 10 09 29

Screenshot 2021-06-04 at 10 09 41

Service maps height doesn't account for the new header height

That means the map canvas itself extends beyond the viewport height so there's a scroll.

Screenshot 2021-06-04 at 11 47 39

Truncation or wrapping missing in the PageHeader title (blocked)

Screenshot 2021-06-04 at 09 44 29

I've opened an issue in EUI (elastic/eui#4856) to see it's something we should implement case by case or generally in the PageHeader component, so let's wait for a response there.

@elasticmachine
Copy link
Contributor

Pinging @elastic/apm-ui (Team:apm)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants