[Dashboard] View panel-level filters and queries #136655

Heenawter · 2022-07-19T15:28:18Z

Summary

This PR introduces a new panel badge that will show up when a specific panel has panel-level filters and/or panel-level queries - i.e. any filters/queries that are added directly to a visualization using the unified search bar at the top of the app. When this badge is clicked, it will bring up a modal that displays (1) all the panel-level filters as read-only filter pills, if there are panel-level filters, and (2) the panel-level query as a code block, if the visualization was saved with one.

Screen.Recording.2022-08-03.at.10.41.38.AM.mov

A few notes about this:

The new panel badge notification/modal currently only shows the app/panel-level filters/queries - i.e. the filters/queries that are added when creating a visualization in the Visualize/Maps/Lens/Discover app through the top navigation bar. For any other ways of adding filters (for example, layer-specific filters in Lens/Maps), it falls to each specific team to decide if/how they want to expose these through the new getFilters() embeddable API.
This PR only exposes the panel-level filters/queries to the user in a read-only format - they must still navigate to different apps in order to edit these panel-level filters. As described in this issue, the next step will be to allow users to edit panel-level filters/queries through this modal.

However, since it may be awhile before we can implement this in-line editing, I added an "Edit filters" button at the bottom of the modal thanks to @andreadelrio's feedback - this at least makes this transition to the respective visualization plugin more smooth until we add this in-line edit functionality.

Embeddable Changes

This PR introduces new getFilters() and getQuery APIs for all embeddables that implement the new FilterableEmbeddable class. The following four plugins support these panel-level filters/queries in their visualizations, so I modified their embeddables to implement this class:

Lens
Maps
Visualize
Discover (Saved Search Embeddable)

Unified Search Changes

This PR introduces the concept of readOnly to the filter pills rendering logic - basically, if the new readOnly optional parameter is given to either of the FilterItems or FilterItem components, then that filter pill will not include the delete icon and it will no longer be a button that opens the FilterEditor popover.

It also makes these new read only filter pills use EuiTooltip rather than the native tooltip, since this provides a better user experience when the filter pill label is truncated:

While I originally tried to use the EuiTooltip for all FilterItem components (including those in the top navigation bar), the tooltip does not behave nicely with EuiPopover, so I opted to keep these changes as simple as possible in this PR and limit the EuiTooltip to read-only filter pills only:

Testing Notes

Be sure to check both by reference and by value embeddables - it should work for both.
For saved search embeddables, try out the SQL functionality that was introduced in [Discover] Supports SQL query language #134429 - as can be seen in the above video, a SQL query should use the proper colouring in the modal.

Checklist

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Unit or functional tests were updated or added to match the most common scenarios
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

For maintainers

This was checked for breaking API changes and was labeled appropriately

Heenawter · 2022-07-25T16:24:58Z

Warning
These screenshots are out of date - refer to the top description for up-to-date screenshots.

@andreadelrio As mentioned last week, this PR could definitely use a design review :)

Basically, with the current design, I am adding a "Custom filters" badge in both view and edit mode whenever panel level filters are detected on a visualization, like so:

When a user clicks on this badge, they will be shown a modal that lists all the panel-level filters as read only filter pills:

The reasoning for going with a modal over a popover is as follows:

The badge code currently only supports modals/flyouts, not popovers - so, while expanding this functionality is possible, I don't recommend it because...
The goal would be to eventually expand this functionality to allow for in-line editing of panel-level filters from this modal. So, not sure if it's worth going the popover route only to have to return to a modal once we add this editing functionality.

More screenshots

This is what the badge looks like when there is no title given to a panel:
This is how the new badge works with existing badges/actions:
This is what the modal looks like with multiple panel level filters:

Heenawter · 2022-07-26T17:51:50Z

src/plugins/dashboard/public/application/actions/filters_notification_badge.tsx

+    const { Provider: KibanaReactContextProvider } = createKibanaReactContext({
+      uiSettings: this.uiSettings,
+    });


This is necessary for line 36 of filter_items.tsx:

kibana/src/plugins/unified_search/public/filter_bar/filter_item/filter_items.tsx

Lines 33 to 36 in 76d317b

const { appName, usageCollection, uiSettings } = kibana.services;

const { readOnly = false } = props;

if (!uiSettings) return null;

Otherwise, kibana.services is undefined for anything that happens inside of this modal.

Heenawter · 2022-07-26T17:53:23Z

src/plugins/dashboard/kibana.json

@@ -20,7 +20,8 @@
    "uiActions",
    "urlForwarding",
    "presentationUtil",
-    "visualizations"
+    "visualizations",
+    "unifiedSearch"


Need the unifiedSearch plugin so that I can access the FilterItems component for rendering the filter pills inside the modal rather than coming up with my own logic for this.

Heenawter · 2022-08-08T18:30:09Z

@andreadelrio Do you mind giving another quick design review, since we added the new Query section to the modal? Thanks so much!

@ThomThomson The context loss should be fixed now, thanks for catching that 👍

@tsullivan I believe I've fixed all of the "Public APIs missing comments" and "Public APIs missing exports" metric increases - another review would be greatly appreciated 🙇

…wter/kibana into add-panel-level-filters_2022-07-18

…-ref HEAD~1..HEAD --fix'

ThomThomson

Reviewing again now that the context loss problem is fixed! This works great locally, looks good, and the code looks nice. Left a couple tiny nits, but nothing necessary to fix!

src/plugins/dashboard/public/application/actions/filters_notification_badge.tsx

src/plugins/dashboard/public/application/actions/filters_notification_modal.tsx

andreadelrio · 2022-08-09T18:45:24Z

@Heenawter this is looking great! One nit, I'm wondering if we really need to include Filter: in the tooltip? seems a bit repetitive plus looks weird as field: follows.

Heenawter · 2022-08-09T18:48:23Z

@andreadelrio Thanks so much! :) That was added so that the EuiTooltip for read-only filter pills matches the native tooltip for non-read-only filter pills, as shown:

I can definitely get rid of it and show only the text in the filter pill (without the Filter: prefix), but let me know your thoughts on which would be preferred in this case!

andreadelrio · 2022-08-09T19:52:18Z

@andreadelrio Thanks so much! :) That was added so that the EuiTooltip for read-only filter pills matches the native tooltip for non-read-only filter pills, as shown:

I can definitely get rid of it and show only the text in the filter pill (without the Filter: prefix), but let me know your thoughts on which would be preferred in this case!

Ah I see. We can leave this as is then.

andreadelrio

UX changes LGTM. Nice work!

kibana-ci · 2022-08-10T17:18:17Z

💚 Build Succeeded

Buildkite Build
Commit: 634fd70

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`dashboard`	382	384	+2
`embeddable`	81	83	+2
total			+4

Async chunks

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

id	before	after	diff
`dashboard`	374.5KB	377.1KB	+2.6KB
`discover`	463.1KB	463.3KB	+213.0B
`lens`	1.2MB	1.2MB	+366.0B
`maps`	2.6MB	2.6MB	+46.0B
`unifiedSearch`	232.6KB	233.0KB	+424.0B
`visualizations`	199.3KB	199.8KB	+513.0B
total			+4.1KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`dashboard`	66.0KB	68.6KB	+2.6KB
`embeddable`	68.6KB	68.7KB	+106.0B
`unifiedSearch`	46.8KB	46.8KB	+46.0B
total			+2.7KB

Unknown metric groups

API count

id	before	after	diff
`dashboard`	143	146	+3
`embeddable`	507	512	+5
`lens`	611	613	+2
`maps`	253	255	+2
`unifiedSearch`	97	108	+11
total			+23

async chunk count

id	before	after	diff
`dashboard`	4	5	+1

History

💚 Build #64029 succeeded 408b29d
💔 Build #63982 failed f636fd9
💚 Build #63718 succeeded 57cb64a
💚 Build #63654 succeeded e7df133
💚 Build #63358 succeeded d66d637
💚 Build #63340 succeeded 28257ea

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

cc @Heenawter

tsullivan

LGTM!

reviewed the embeddable api changes in the code

nreese · 2022-08-15T18:02:14Z

@Heenawter Map embeddable updated to support viewing panel-level filters and queries in #138188

Closes #141536 Closes #143386 ## Summary #136655 introduced a panel level filters badge that would notify users when a visualization was being filtered/queried on an individual panel level. While this exposed important information about how the panels were being generated and made it so that users no longer had to navigate to Lens/Visualize/etc. to see this information, it introduced a lot of undesired clutter to dashboards. This was especially annoying for dashboards in **view** mode, since panel level filter/query information is primarily useful for dashboard authors and thus this badge had minimal benefit despite its large visual impact. To fix this, this PR does three things: 1. Converts the panel filters badge to a single notification icon ![BeforeAndAfterFilterBadge](https://user-images.githubusercontent.com/8698078/205696453-c8a7bc85-46bf-4a0c-b206-bbb690577d9a.png) 2. Displays the filters in a popover rather than a modal ![BeforeAndAfterModal](https://user-images.githubusercontent.com/8698078/205758567-314e841d-646e-4cb6-973d-0fde79c2b9df.png) 3. Makes this notification icon only visible in **edit** mode - it no longer shows up in view or print mode. ### How to Test 1. Create a visualization with panel level filters and/or queries. - Note that the sample `[Flights] Global Flight Dashboard` dashboard already has some visualizations with panel level filters, so you could also use that instead. 3. Ensure that the panel level filters action icon **only** shows up in edit mode - Swap to view mode and make sure there is no icon - Print a PDF or PNG report and make sure there is no icon 4. Ensure that the `"Edit filters"` button in the popover keeps context when clicked, including allowing you to `"Save and return"` after being taken to Lens/Visualize/etc. 5. Ensure that the contents of the popover react to changes to panel level filters/queries ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [x] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

Closes elastic#141536 Closes elastic#143386 ## Summary elastic#136655 introduced a panel level filters badge that would notify users when a visualization was being filtered/queried on an individual panel level. While this exposed important information about how the panels were being generated and made it so that users no longer had to navigate to Lens/Visualize/etc. to see this information, it introduced a lot of undesired clutter to dashboards. This was especially annoying for dashboards in **view** mode, since panel level filter/query information is primarily useful for dashboard authors and thus this badge had minimal benefit despite its large visual impact. To fix this, this PR does three things: 1. Converts the panel filters badge to a single notification icon ![BeforeAndAfterFilterBadge](https://user-images.githubusercontent.com/8698078/205696453-c8a7bc85-46bf-4a0c-b206-bbb690577d9a.png) 2. Displays the filters in a popover rather than a modal ![BeforeAndAfterModal](https://user-images.githubusercontent.com/8698078/205758567-314e841d-646e-4cb6-973d-0fde79c2b9df.png) 3. Makes this notification icon only visible in **edit** mode - it no longer shows up in view or print mode. ### How to Test 1. Create a visualization with panel level filters and/or queries. - Note that the sample `[Flights] Global Flight Dashboard` dashboard already has some visualizations with panel level filters, so you could also use that instead. 3. Ensure that the panel level filters action icon **only** shows up in edit mode - Swap to view mode and make sure there is no icon - Print a PDF or PNG report and make sure there is no icon 4. Ensure that the `"Edit filters"` button in the popover keeps context when clicked, including allowing you to `"Save and return"` after being taken to Lens/Visualize/etc. 5. Ensure that the contents of the popover react to changes to panel level filters/queries ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [x] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) (cherry picked from commit a5d7818)

Closes elastic#141536 Closes elastic#143386 elastic#136655 introduced a panel level filters badge that would notify users when a visualization was being filtered/queried on an individual panel level. While this exposed important information about how the panels were being generated and made it so that users no longer had to navigate to Lens/Visualize/etc. to see this information, it introduced a lot of undesired clutter to dashboards. This was especially annoying for dashboards in **view** mode, since panel level filter/query information is primarily useful for dashboard authors and thus this badge had minimal benefit despite its large visual impact. To fix this, this PR does three things: 1. Converts the panel filters badge to a single notification icon ![BeforeAndAfterFilterBadge](https://user-images.githubusercontent.com/8698078/205696453-c8a7bc85-46bf-4a0c-b206-bbb690577d9a.png) 2. Displays the filters in a popover rather than a modal ![BeforeAndAfterModal](https://user-images.githubusercontent.com/8698078/205758567-314e841d-646e-4cb6-973d-0fde79c2b9df.png) 3. Makes this notification icon only visible in **edit** mode - it no longer shows up in view or print mode. 1. Create a visualization with panel level filters and/or queries. - Note that the sample `[Flights] Global Flight Dashboard` dashboard already has some visualizations with panel level filters, so you could also use that instead. 3. Ensure that the panel level filters action icon **only** shows up in edit mode - Swap to view mode and make sure there is no icon - Print a PDF or PNG report and make sure there is no icon 4. Ensure that the `"Edit filters"` button in the popover keeps context when clicked, including allowing you to `"Save and return"` after being taken to Lens/Visualize/etc. 5. Ensure that the contents of the popover react to changes to panel level filters/queries - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [x] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) (cherry picked from commit a5d7818)

…147134) # Backport This will backport the following commits from `main` to `8.6`: - [[Dashboard] Change panel filters action visibility (#146335)](#146335)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Hannah Mudge <Heenawter@users.noreply.github.com>

…147135) # Backport This will backport the following commits from `main` to `8.5`: - [[Dashboard] Change panel filters action visibility (#146335)](#146335)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

Heenawter self-assigned this Jul 19, 2022

Heenawter force-pushed the add-panel-level-filters_2022-07-18 branch 4 times, most recently from 5697f28 to e1b193e Compare July 19, 2022 15:31

Heenawter added the ci:skip-when-possible (Deprecated) no-op, managed automatically label Jul 21, 2022

Heenawter force-pushed the add-panel-level-filters_2022-07-18 branch 5 times, most recently from 97fd063 to 1af3382 Compare July 25, 2022 15:33

Heenawter force-pushed the add-panel-level-filters_2022-07-18 branch 7 times, most recently from 615ad83 to feab818 Compare July 26, 2022 15:38

Heenawter mentioned this pull request Jul 26, 2022

[Dashboard Usability] Edit for panel-level filters #137206

Closed

Heenawter changed the title ~~[Dashboard] View panel level filters~~ [Dashboard] View panel-level filters Jul 26, 2022

Heenawter commented Jul 26, 2022

View reviewed changes

Heenawter and others added 3 commits August 4, 2022 14:26

Add more public API comments

28257ea

Add comments to each embeddable/dashboard container

d66d637

Merge branch 'main' into add-panel-level-filters_2022-07-18

e7df133

Heenawter added 2 commits August 8, 2022 12:39

Add more public API comments

e3b761c

Merge branch 'add-panel-level-filters_2022-07-18' of github.com:heena…

57cb64a

…wter/kibana into add-panel-level-filters_2022-07-18

Heenawter requested review from andreadelrio, ThomThomson and tsullivan August 8, 2022 21:12

Heenawter and others added 4 commits August 9, 2022 09:39

Fix losing of context for real this time

19fb900

[CI] Auto-commit changed files from 'node scripts/precommit_hook.js -…

f636fd9

…-ref HEAD~1..HEAD --fix'

Fix jest test

b3712a9

[CI] Auto-commit changed files from 'node scripts/precommit_hook.js -…

cb65034

…-ref HEAD~1..HEAD --fix'

ThomThomson approved these changes Aug 9, 2022

View reviewed changes

Address feedback

408b29d

andreadelrio approved these changes Aug 9, 2022

View reviewed changes

Merge branch 'main' into add-panel-level-filters_2022-07-18

634fd70

tsullivan approved these changes Aug 10, 2022

View reviewed changes

Heenawter merged commit 00c8cf9 into elastic:main Aug 10, 2022

Heenawter mentioned this pull request Dec 5, 2022

[Dashboard] Change panel filters action visibility #146335

Merged

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Dashboard] View panel-level filters and queries #136655

[Dashboard] View panel-level filters and queries #136655

Heenawter commented Jul 19, 2022 •

edited

Loading

Heenawter commented Jul 25, 2022 •

edited

Loading

Heenawter Jul 26, 2022

Heenawter Jul 26, 2022

Heenawter commented Aug 8, 2022 •

edited

Loading

ThomThomson left a comment

andreadelrio commented Aug 9, 2022

Heenawter commented Aug 9, 2022 •

edited

Loading

andreadelrio commented Aug 9, 2022

andreadelrio left a comment

kibana-ci commented Aug 10, 2022

API count

async chunk count

tsullivan left a comment

nreese commented Aug 15, 2022 •

edited

Loading

	const { appName, usageCollection, uiSettings } = kibana.services;
	const { readOnly = false } = props;

	if (!uiSettings) return null;

[Dashboard] View panel-level filters and queries #136655

[Dashboard] View panel-level filters and queries #136655

Conversation

Heenawter commented Jul 19, 2022 • edited Loading

Summary

Embeddable Changes

Unified Search Changes

Testing Notes

Checklist

For maintainers

Heenawter commented Jul 25, 2022 • edited Loading

More screenshots

Heenawter Jul 26, 2022

Choose a reason for hiding this comment

Heenawter Jul 26, 2022

Choose a reason for hiding this comment

Heenawter commented Aug 8, 2022 • edited Loading

ThomThomson left a comment

Choose a reason for hiding this comment

andreadelrio commented Aug 9, 2022

Heenawter commented Aug 9, 2022 • edited Loading

andreadelrio commented Aug 9, 2022

andreadelrio left a comment

Choose a reason for hiding this comment

kibana-ci commented Aug 10, 2022

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

API count

async chunk count

History

tsullivan left a comment

Choose a reason for hiding this comment

nreese commented Aug 15, 2022 • edited Loading

Heenawter commented Jul 19, 2022 •

edited

Loading

Heenawter commented Jul 25, 2022 •

edited

Loading

Heenawter commented Aug 8, 2022 •

edited

Loading

Heenawter commented Aug 9, 2022 •

edited

Loading

nreese commented Aug 15, 2022 •

edited

Loading