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] Fixing service inventory responsive design #107690

Merged
merged 9 commits into from
Aug 10, 2021
Merged

[APM] Fixing service inventory responsive design #107690

merged 9 commits into from
Aug 10, 2021

Conversation

cauemarcondes
Copy link
Contributor

@cauemarcondes cauemarcondes commented Aug 4, 2021 •
edited
Loading

closes #94828

Truncates service name:
Before:
Screen Shot 2021-08-04 at 15 30 51
After:
Screen Shot 2021-08-04 at 15 31 06

XS/S 0px - 767px

  • Show all columns when on XS or S view port.

Screen Shot 2021-08-04 at 15 00 25

M 768px - 991px

  • Hide Sparklines, environment and transaction type

Screen Shot 2021-08-04 at 15 00 41

L 992px - 1199px

  • Hide Sparklines, environment and transaction type

Screen Shot 2021-08-04 at 15 01 09

XL 1200px - 1599px

  • Hide transaction type
  • show Sparklines, environment

Screen Shot 2021-08-04 at 15 01 37

**XXL/XXXL 1600px - **

  • show all columns

Screen Shot 2021-08-04 at 15 01 58

@cauemarcondes cauemarcondes added release_note:enhancement auto-backport Deprecated - use backport:version if exact versions are needed v7.15.0 apm:ux-refresh labels Aug 4, 2021
@cauemarcondes cauemarcondes requested a review from a team as a code owner August 4, 2021 19:09
@botelastic botelastic bot added the Team:APM - DEPRECATED Use Team:obs-ux-infra_services. label Aug 4, 2021
@elasticmachine
Copy link
Contributor

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

sorenlouv
sorenlouv approved these changes Aug 4, 2021
View reviewed changes
Copy link
Member

@sorenlouv sorenlouv left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm

formgeist
formgeist reviewed Aug 5, 2021
View reviewed changes
Copy link
Contributor

@formgeist formgeist left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great improvement! I've added a suggested change to the value cell formatting. @alex-fedotyev just making sure you're OK with this as we're hiding the environment badge(s) and transaction type from these smaller viewports. We talked about exploring some other options in another iteration but for now this makes the table usable.

@cauemarcondes cauemarcondes enabled auto-merge (squash) August 5, 2021 16:01
@cauemarcondes cauemarcondes disabled auto-merge August 5, 2021 16:56
@cauemarcondes
Copy link
Contributor Author

@elasticmachine merge upstream

@cauemarcondes
Copy link
Contributor Author

@elasticmachine merge upstream

@alex-fedotyev
Copy link

I think this is great improvement!

@formgeist Do you think it would be a good idea to show environment in the mouseover hint?
This is mainly for use case when there are multiple services with same or similar names, which are parts of different environments (like multiple developers monitoring their version of the app, but reporting as a different environment).

@formgeist
Copy link
Contributor

I think this is great improvement!

@formgeist Do you think it would be a good idea to show environment in the mouseover hint?
This is mainly for use case when there are multiple services with same or similar names, which are parts of different environments (like multiple developers monitoring their version of the app, but reporting as a different environment).

@alex-fedotyev I think it's worth exploring how we can still provide this information. I've created a design issue to take a look soon https://github.com/elastic/observability-design/issues/79

@kibanamachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

Async chunks

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

id before after diff
apm 4.3MB 4.3MB +696.0B

History

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

@cauemarcondes cauemarcondes merged commit 97e345f into elastic:master Aug 10, 2021
@cauemarcondes cauemarcondes deleted the apm-responsive-service-inventory branch August 10, 2021 19:36
kibanamachine added a commit to kibanamachine/kibana that referenced this pull request Aug 10, 2021
@cauemarcondes @kibanamachine
[APM] Fixing service inventory responsive design (elastic#107690)
1b1b6cf 
* fixing service inventory responsive design

* truncate service name

* adding unit test

* addressing PR comments

* fixing test

* fixing merge problem

Co-authored-by: Kibana Machine <[email protected]>
@kibanamachine kibanamachine mentioned this pull request Aug 10, 2021
Merged
@kibanamachine
Copy link
Contributor

💚 Backport successful

Status Branch Result
✅ 7.x

This backport PR will be merged automatically after passing CI.

kibanamachine added a commit that referenced this pull request Aug 10, 2021
@kibanamachine @cauemarcondes
[APM] Fixing service inventory responsive design (#107690) (#108099)
591bd26 
* fixing service inventory responsive design

* truncate service name

* adding unit test

* addressing PR comments

* fixing test

* fixing merge problem

Co-authored-by: Kibana Machine <[email protected]>

Co-authored-by: Cauê Marcondes <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@formgeist formgeist formgeist left review comments

@sorenlouv sorenlouv sorenlouv approved these changes

@alex-fedotyev alex-fedotyev Awaiting requested review from alex-fedotyev

Assignees
No one assigned
Labels
apm:ux-refresh auto-backport Deprecated - use backport:version if exact versions are needed release_note:enhancement Team:APM - DEPRECATED Use Team:obs-ux-infra_services. v7.15.0
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[APM] Services inventory is cutting service name on narrow screens
6 participants
@cauemarcondes @elasticmachine @alex-fedotyev @formgeist @kibanamachine @sorenlouv