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

Design cleanup details panel #85044

Merged
merged 8 commits into from
Dec 4, 2020

Conversation

hbharding
Copy link
Contributor

@hbharding hbharding commented Dec 4, 2020

Summary

I fixed several items and did some small refactors, described below, to better align with the intended design. I found some other problems which I couldn't fix on my own, but I'll address these in #85061.

Some global things

  • I adjusted the overlay panel so that it's height grows/shrinks based on its contents.
  • I fixed several responsive issues. Remember to use responsive={false} on EuiFlexGroup when the default built-in responsive behavior is not necessary! :)
  • Fixed the overlay header to use the correct background color, EuiPageBackgroundColor.
  • Fixed sizes of elements in overlay header (title, buttons, tabs) to match design.
  • The panel content's padding is now consistent across tabs.

Metrics Tab

  • Now uses EuiFlexGrid for chart layout
  • Use ChartSizeArray from Elastic Charts to size charts
  • Fixed several responsive issues in the chart headers and adjusted spacing
  • I changed the time range selector to be full width and non-compressed to align with the other tabs.

image

Logs Tab

  • Changed the "open in logs" button size to match design

image

Metadata Tab

  • Removed the responsive table behavior. Unnecessary since we're only using 2 columns.
  • Fixed alignment of filter icon and value text
    image

Responsive Layout

  • At smaller breakpoints, the overlay panel will now adjust to cover the entire page. This was really the only option for making the panel's contents viewable.
    Kapture 2020-12-04 at 11 59 57

@hbharding hbharding added Feature:Metrics UI Metrics UI feature v8.0.0 Team:Infra Monitoring UI - DEPRECATED DEPRECATED - Label for the Infra Monitoring UI team. Use Team:obs-ux-infra_services release_note:skip Skip the PR/issue when compiling release notes v7.11.0 labels Dec 4, 2020
@hbharding hbharding requested a review from a team as a code owner December 4, 2020 17:14
@elasticmachine
Copy link
Contributor

Pinging @elastic/logs-metrics-ui (Team:logs-metrics-ui)

Copy link
Contributor

@Zacqary Zacqary left a comment

Choose a reason for hiding this comment

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

LGTM

@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
infra 2.7MB 2.7MB -2.1KB

History

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

@hbharding hbharding merged commit c6ef1ae into elastic:master Dec 4, 2020
hbharding added a commit to hbharding/kibana that referenced this pull request Dec 4, 2020
* cleanup overlay panel. fixed sizes, variable panel height, responsive breakpoint

* cleanup metrics tab. use EuiFlexGrid + ChartSizeArray for chart sizing + fixed responsive issues on flex items

* cleanup metadata tab. disabled responsive table and fixed alignment of filter icon + value

* cleanup logs search. adjusted button size + spacing

* fix responsivness on array values

* remove responsive behavior on search + view-in-logs button

* fix typecheck
hbharding added a commit that referenced this pull request Dec 7, 2020
* cleanup overlay panel. fixed sizes, variable panel height, responsive breakpoint

* cleanup metrics tab. use EuiFlexGrid + ChartSizeArray for chart sizing + fixed responsive issues on flex items

* cleanup metadata tab. disabled responsive table and fixed alignment of filter icon + value

* cleanup logs search. adjusted button size + spacing

* fix responsivness on array values

* remove responsive behavior on search + view-in-logs button

* fix typecheck

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature:Metrics UI Metrics UI feature release_note:skip Skip the PR/issue when compiling release notes Team:Infra Monitoring UI - DEPRECATED DEPRECATED - Label for the Infra Monitoring UI team. Use Team:obs-ux-infra_services v7.11.0 v8.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants