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.

Sign up for GitHub

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

Jump to bottom

[APM] Service overview layout enhancements #85781

Closed
formgeist opened this issue Dec 14, 2020 · 1 comment · Fixed by #86205
Closed

[APM] Service overview layout enhancements #85781

formgeist opened this issue Dec 14, 2020 · 1 comment · Fixed by #86205
Assignees
@smith @formgeist
Labels
Team:APM All issues that need APM UI Team support v7.11.0

Comments

@formgeist
Copy link
Contributor

Summary

Responsive breakpoints

Looks like we can do better with utilizing the default breakpoints in EUI.

The two-column layout should go into 100% width from m since the panels start to break.

992px Screenshot 2020-12-14 at 15 18 29
768px Screenshot 2020-12-14 at 15 18 51

Change flex grow values

I prefer to have the charts on the left a little narrower, because we're generally reducing the height of the contents.

Set the charts to flex-grow: 3; and the table contents to flex-grow: 7;.

Screenshot 2020-12-14 at 15 07 42

Change the default chart height to 288

The narrower panel size should decrease the height proportionally.

Add gutterSize="s" to the main panel flexgroups.

Make the panel more condensed by adding a size s on the gutter of the containing flexgroup.

Before

Screenshot 2020-12-14 at 15 16 47

After

Screenshot 2020-12-14 at 15 16 18

euiToolTip's display: inline-block; adds another 3 px padding per cell to the spacing

Related issue: #85755

Kapture 2020-12-14 at 14 56 04

The tables have an additional margin that is not needed because the pagination bar adds a spacer.

Screenshot 2020-12-14 at 15 04 45
@formgeist formgeist added the Team:APM All issues that need APM UI Team support label Dec 14, 2020
@elasticmachine
Copy link
Contributor

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

@smith smith self-assigned this Dec 14, 2020
@sorenlouv sorenlouv assigned formgeist and unassigned smith Dec 16, 2020
@smith smith self-assigned this Dec 16, 2020
smith added a commit to smith/kibana that referenced this issue Dec 16, 2020
@smith
Fixes for service overview layout
de020c4 
* Use 3/7 instead of 4/6 for `grow` between charts/tables
* Decrease chart height
* Use "s" gutterSize on tables
* Decrease table height
* Use `TruncateWithToolTip` on errors and transactions tables to remove tooltip inline-block style
* Use `responsive={false}` on dependency titles so icon/name pairs don't wrap
* Use `responsive={false}` on spark plots so plot/value pairs don't wrap
* Use `responsive={false}` on latency chart and table titles so controls and links don't wrap
* Make the fixed sizing overrides for the tables only be applied when we're using a wide, non-mobile (> 992) viewport
* Switch to "mobile" viewport (with one item per row) at 992 instead of 768

Since you cannot control the breakpoints at which EUI switches to "responsive" mode, we trigger these manually to change the number of columns. and whether or not the tables use a fixed height.

The overview now has three "modes":

* Two columns for chart/table rows
* Tables in non-responsive mode

* One column for charts/tables
* Tables in non-responsive mode

* One column for charts/tables
* Tables in non-responsive mode

Fixes elastic#85781.
@smith smith mentioned this issue Dec 16, 2020
Merged
ogupte pushed a commit that referenced this issue Dec 17, 2020
@smith
Fixes for service overview layout (#86205)
d2a7c32 
* Fixes for service overview layout

* Use 3/7 instead of 4/6 for `grow` between charts/tables
* Decrease chart height
* Use "s" gutterSize on tables
* Decrease table height
* Use `TruncateWithToolTip` on errors and transactions tables to remove tooltip inline-block style
* Use `responsive={false}` on dependency titles so icon/name pairs don't wrap
* Use `responsive={false}` on spark plots so plot/value pairs don't wrap
* Use `responsive={false}` on latency chart and table titles so controls and links don't wrap
* Make the fixed sizing overrides for the tables only be applied when we're using a wide, non-mobile (> 992) viewport
* Switch to "mobile" viewport (with one item per row) at 992 instead of 768

Since you cannot control the breakpoints at which EUI switches to "responsive" mode, we trigger these manually to change the number of columns. and whether or not the tables use a fixed height.

The overview now has three "modes":

* Two columns for chart/table rows
* Tables in non-responsive mode

* One column for charts/tables
* Tables in non-responsive mode

* One column for charts/tables
* Tables in non-responsive mode

Fixes #85781.

* remove unused imports
ogupte pushed a commit to ogupte/kibana that referenced this issue Dec 17, 2020
@smith @ogupte
Fixes for service overview layout (elastic#86205)
b0f542c 
* Fixes for service overview layout

* Use 3/7 instead of 4/6 for `grow` between charts/tables
* Decrease chart height
* Use "s" gutterSize on tables
* Decrease table height
* Use `TruncateWithToolTip` on errors and transactions tables to remove tooltip inline-block style
* Use `responsive={false}` on dependency titles so icon/name pairs don't wrap
* Use `responsive={false}` on spark plots so plot/value pairs don't wrap
* Use `responsive={false}` on latency chart and table titles so controls and links don't wrap
* Make the fixed sizing overrides for the tables only be applied when we're using a wide, non-mobile (> 992) viewport
* Switch to "mobile" viewport (with one item per row) at 992 instead of 768

Since you cannot control the breakpoints at which EUI switches to "responsive" mode, we trigger these manually to change the number of columns. and whether or not the tables use a fixed height.

The overview now has three "modes":

* Two columns for chart/table rows
* Tables in non-responsive mode

* One column for charts/tables
* Tables in non-responsive mode

* One column for charts/tables
* Tables in non-responsive mode

Fixes elastic#85781.

* remove unused imports
ogupte added a commit that referenced this issue Dec 17, 2020
@ogupte @smith
Fixes for service overview layout (#86205) (#86299)
59702c7 
* Fixes for service overview layout

* Use 3/7 instead of 4/6 for `grow` between charts/tables
* Decrease chart height
* Use "s" gutterSize on tables
* Decrease table height
* Use `TruncateWithToolTip` on errors and transactions tables to remove tooltip inline-block style
* Use `responsive={false}` on dependency titles so icon/name pairs don't wrap
* Use `responsive={false}` on spark plots so plot/value pairs don't wrap
* Use `responsive={false}` on latency chart and table titles so controls and links don't wrap
* Make the fixed sizing overrides for the tables only be applied when we're using a wide, non-mobile (> 992) viewport
* Switch to "mobile" viewport (with one item per row) at 992 instead of 768

Since you cannot control the breakpoints at which EUI switches to "responsive" mode, we trigger these manually to change the number of columns. and whether or not the tables use a fixed height.

The overview now has three "modes":

* Two columns for chart/table rows
* Tables in non-responsive mode

* One column for charts/tables
* Tables in non-responsive mode

* One column for charts/tables
* Tables in non-responsive mode

Fixes #85781.

* remove unused imports

Co-authored-by: Nathan L Smith <[email protected]>
ogupte pushed a commit to ogupte/kibana that referenced this issue Dec 17, 2020
@smith @ogupte
Fixes for service overview layout (elastic#86205)
cd967f8 
* Fixes for service overview layout

* Use 3/7 instead of 4/6 for `grow` between charts/tables
* Decrease chart height
* Use "s" gutterSize on tables
* Decrease table height
* Use `TruncateWithToolTip` on errors and transactions tables to remove tooltip inline-block style
* Use `responsive={false}` on dependency titles so icon/name pairs don't wrap
* Use `responsive={false}` on spark plots so plot/value pairs don't wrap
* Use `responsive={false}` on latency chart and table titles so controls and links don't wrap
* Make the fixed sizing overrides for the tables only be applied when we're using a wide, non-mobile (> 992) viewport
* Switch to "mobile" viewport (with one item per row) at 992 instead of 768

Since you cannot control the breakpoints at which EUI switches to "responsive" mode, we trigger these manually to change the number of columns. and whether or not the tables use a fixed height.

The overview now has three "modes":

* Two columns for chart/table rows
* Tables in non-responsive mode

* One column for charts/tables
* Tables in non-responsive mode

* One column for charts/tables
* Tables in non-responsive mode

Fixes elastic#85781.

* remove unused imports
ogupte added a commit that referenced this issue Dec 17, 2020
@ogupte @smith
Fixes for service overview layout (#86205) (#86342)
74efd85 
* Fixes for service overview layout

* Use 3/7 instead of 4/6 for `grow` between charts/tables
* Decrease chart height
* Use "s" gutterSize on tables
* Decrease table height
* Use `TruncateWithToolTip` on errors and transactions tables to remove tooltip inline-block style
* Use `responsive={false}` on dependency titles so icon/name pairs don't wrap
* Use `responsive={false}` on spark plots so plot/value pairs don't wrap
* Use `responsive={false}` on latency chart and table titles so controls and links don't wrap
* Make the fixed sizing overrides for the tables only be applied when we're using a wide, non-mobile (> 992) viewport
* Switch to "mobile" viewport (with one item per row) at 992 instead of 768

Since you cannot control the breakpoints at which EUI switches to "responsive" mode, we trigger these manually to change the number of columns. and whether or not the tables use a fixed height.

The overview now has three "modes":

* Two columns for chart/table rows
* Tables in non-responsive mode

* One column for charts/tables
* Tables in non-responsive mode

* One column for charts/tables
* Tables in non-responsive mode

Fixes #85781.

* remove unused imports

Co-authored-by: Nathan L Smith <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@smith smith

@formgeist formgeist

Labels
Team:APM All issues that need APM UI Team support v7.11.0
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fixes for service overview layout smith/kibana
4 participants
@smith @sorenlouv @formgeist @elasticmachine