[Discover] Improve styling of graphs in sidebar #69440

andreadelrio · 2020-06-17T19:30:18Z

Summary

This PR adjusts the styling of the graphs in the sidebar, making them more refined and similar to the styling in Lens.

Other changes:

We already had a tooltip showing the record count per value, I've added the value to the tooltip to account for the case when the value gets truncated due to limited space.

Checklist

Delete any items that are not applicable to this PR.

~~- [ ] Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support~~
~~- [ ] Documentation was added for features that require explanation or tutorials~~

Unit or functional tests were updated or added to match the most common scenarios
~~- [ ] This was checked for keyboard-only and screenreader accessibility~~
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser
This was checked for cross-browser compatibility, including a check against IE11

For maintainers

This was checked for breaking API changes and was labeled appropriately

elasticmachine · 2020-06-17T19:30:44Z

Pinging @elastic/kibana-app (Team:KibanaApp)

src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx

cchaos

I think these EuiProgress elements with the label and percentage shown is a great candidate for an EUI addition. We can still keep this PR but work in-tandem in EUI to establish a component/modify EuiProgress to create this pattern for reuse here and in Lens.

It would be great to also go ahead and replace the magnify icons with the regular plus/minus in circle icons.

src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx

andreadelrio · 2020-06-23T03:26:39Z

Made changes so the Tooltip shows up when hovering the progress bar or the label/value. Also, the content now includes the percentage too.

andreadelrio · 2020-06-23T03:26:57Z

@elasticmachine merge upstream

timroes · 2020-06-23T09:45:13Z

@kertal Given the recent performance issues we were seeing in EuiTooltip, we should make sure this is properly evaluated and profiled compared to master before we're merging this in, that it doesn't cause us new performance regressions.

src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx

… into graph-discover

src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx

src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx

kertal · 2020-06-25T07:39:07Z

@elasticmachine merge upstream

kertal

Code LGTM, tested locally in Chrome, Firefox, Safari, works. it now uses less vertical screen space, less components, is prettier, and on top of that:
👍

src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx

… into graph-discover

andreadelrio · 2020-06-26T16:56:11Z

Made the changes. Updated behaviour:

cchaos

🎉 Awesome! Screenshots and code, LGTM

kibanamachine · 2020-06-26T18:31:28Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 6510e7d

Build metrics

@kbn/optimizer bundle module count

id	value	diff	baseline
discover	80	+5	75

History

💛 Build #56204 was flaky 498697a
💔 Build #56020 failed d259b58
💔 Build #55763 failed 6a3049f
💔 Build #55434 failed d2c52fe
💚 Build #54819 succeeded b7c21bc

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

AlonaNadler · 2020-06-26T18:32:18Z

@andreadelrio design looks good. QQ, why several of the available fields have a blue background and others, don't?

andreadelrio · 2020-06-26T18:42:32Z

@andreadelrio design looks good. QQ, why several of the available fields have a blue background and others, don't?

@AlonaNadler Are you referring to the popular fields? This PR has only touched the graphs so all background behaviours are the same as the ones we currently have on master.

* master: (59 commits) [Lens] Fix broken test (elastic#70117) [SIEM] Import timeline fix (elastic#65448) [SECURITY SOLUTION][INGEST] UX update for ingest manager edit/create datasource for endpoint (elastic#70079) [Telemetry] Collector Schema (elastic#64942) [Endpoint] Add Endpoint empty states for onboarding (elastic#69626) Hide unused resolver buttons (elastic#70112) [Security] `Investigate in Resolver` Timeline Integration (elastic#70111) [Discover] Improve styling of graphs in sidebar (elastic#69440) [Metrics UI] Fix EuiTheme type issue (elastic#69735) skip failing suite (elastic#70104) (elastic#70103) [ENDPOINT] Hide the Timeline Flyout while on the Management Pages (elastic#69998) [SIEM][CASE] Persist callout when dismissed (elastic#68372) [SIEM][Exceptions] - Cleaned up and updated exception list item comment structure (elastic#69532) [Maps] remove indexing state from redux (elastic#69765) Add API integration test for deleting data streams. (elastic#70020) renames SIEM to Security Solution (elastic#70070) Adding saved_objects_page in OSS (elastic#69900) [Lens] Use accordion menus in field list for available and empty fields (elastic#68871) Dynamic uiActions & license support (elastic#68507) [SIEM] Update readme for timeline apis (elastic#67038) ...

…bana into alerting/consumer-based-rbac * 'alerting/consumer-based-rbac' of github.com:gmmorris/kibana: (25 commits) [Lens] Fix broken test (elastic#70117) [SIEM] Import timeline fix (elastic#65448) [SECURITY SOLUTION][INGEST] UX update for ingest manager edit/create datasource for endpoint (elastic#70079) [Telemetry] Collector Schema (elastic#64942) [Endpoint] Add Endpoint empty states for onboarding (elastic#69626) Hide unused resolver buttons (elastic#70112) [Security] `Investigate in Resolver` Timeline Integration (elastic#70111) [Discover] Improve styling of graphs in sidebar (elastic#69440) [Metrics UI] Fix EuiTheme type issue (elastic#69735) skip failing suite (elastic#70104) (elastic#70103) [ENDPOINT] Hide the Timeline Flyout while on the Management Pages (elastic#69998) [SIEM][CASE] Persist callout when dismissed (elastic#68372) [SIEM][Exceptions] - Cleaned up and updated exception list item comment structure (elastic#69532) [Maps] remove indexing state from redux (elastic#69765) Add API integration test for deleting data streams. (elastic#70020) renames SIEM to Security Solution (elastic#70070) Adding saved_objects_page in OSS (elastic#69900) [Lens] Use accordion menus in field list for available and empty fields (elastic#68871) Dynamic uiActions & license support (elastic#68507) [SIEM] Update readme for timeline apis (elastic#67038) ...

andreadelrio added 5 commits June 15, 2020 15:05

moved percentage

8ede5aa

rearrange parts of graph

3a85faa

fixed layout

063bf10

cleanup

d7b9db2

Merge remote-tracking branch 'upstream/master' into graph-discover

b7c21bc

andreadelrio requested a review from a team June 17, 2020 19:30

andreadelrio requested a review from a team as a code owner June 17, 2020 19:30

andreadelrio added Feature:Discover Discover Application Team:Visualizations Visualization editors, elastic-charts and infrastructure labels Jun 17, 2020

andreadelrio requested a review from kertal June 17, 2020 19:31

andreadelrio added release_note:skip Skip the PR/issue when compiling release notes v7.9.0 v8.0.0 labels Jun 17, 2020

kertal reviewed Jun 18, 2020

View reviewed changes

src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx Outdated Show resolved Hide resolved

cchaos reviewed Jun 18, 2020

View reviewed changes

src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx Outdated Show resolved Hide resolved

improved tooltip's content

74e768d

Merge branch 'master' into graph-discover

d2c52fe

kertal reviewed Jun 23, 2020

View reviewed changes

src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx Outdated Show resolved Hide resolved

andreadelrio added 2 commits June 23, 2020 16:11

changed tooltip to long delay

b353aa7

Merge branch 'graph-discover' of https://github.com/andreadelrio/kibana…

6a3049f

… into graph-discover

andreadelrio mentioned this pull request Jun 23, 2020

[EuiProgress] Add label and value props elastic/eui#3652

Closed

kertal reviewed Jun 24, 2020

View reviewed changes

src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx Outdated Show resolved Hide resolved

kertal reviewed Jun 24, 2020

View reviewed changes

src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx Outdated Show resolved Hide resolved

removed EuiTooltip and added title

d259b58

Merge branch 'master' into graph-discover

498697a

kertal self-requested a review June 25, 2020 17:21

kertal approved these changes Jun 25, 2020

View reviewed changes

kertal requested a review from cchaos June 25, 2020 17:25

cchaos reviewed Jun 26, 2020

View reviewed changes

src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx Show resolved Hide resolved

andreadelrio added 2 commits June 26, 2020 09:49

change icons and improved title

bec6210

Merge branch 'graph-discover' of https://github.com/andreadelrio/kibana…

6510e7d

… into graph-discover

andreadelrio requested a review from cchaos June 26, 2020 16:57

cchaos approved these changes Jun 26, 2020

View reviewed changes

andreadelrio merged commit 59925da into elastic:master Jun 26, 2020

andreadelrio mentioned this pull request Jun 26, 2020

[7.x] [Discover] Improve styling of graphs in sidebar (#69440) #70124

Merged

andreadelrio added a commit to andreadelrio/kibana that referenced this pull request Jun 26, 2020

[Discover] Improve styling of graphs in sidebar (elastic#69440)

4667093

andreadelrio added a commit that referenced this pull request Jun 26, 2020

[Discover] Improve styling of graphs in sidebar (#69440) (#70124)

95b058d

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Discover] Improve styling of graphs in sidebar #69440

[Discover] Improve styling of graphs in sidebar #69440

andreadelrio commented Jun 17, 2020

elasticmachine commented Jun 17, 2020

cchaos left a comment

andreadelrio commented Jun 23, 2020

andreadelrio commented Jun 23, 2020

timroes commented Jun 23, 2020

kertal commented Jun 25, 2020

kertal left a comment •

edited

Loading

andreadelrio commented Jun 26, 2020

cchaos left a comment

kibanamachine commented Jun 26, 2020

AlonaNadler commented Jun 26, 2020

andreadelrio commented Jun 26, 2020 •

edited

Loading

[Discover] Improve styling of graphs in sidebar #69440

[Discover] Improve styling of graphs in sidebar #69440

Conversation

andreadelrio commented Jun 17, 2020

Summary

Checklist

For maintainers

elasticmachine commented Jun 17, 2020

cchaos left a comment

Choose a reason for hiding this comment

andreadelrio commented Jun 23, 2020

andreadelrio commented Jun 23, 2020

timroes commented Jun 23, 2020

kertal commented Jun 25, 2020

kertal left a comment • edited Loading

Choose a reason for hiding this comment

andreadelrio commented Jun 26, 2020

cchaos left a comment

Choose a reason for hiding this comment

kibanamachine commented Jun 26, 2020

💚 Build Succeeded

Build metrics

@kbn/optimizer bundle module count

History

AlonaNadler commented Jun 26, 2020

andreadelrio commented Jun 26, 2020 • edited Loading

kertal left a comment •

edited

Loading

andreadelrio commented Jun 26, 2020 •

edited

Loading