[Metrics][Discover] Add an option to clear the selection in the dropdowns by jennypavlova · Pull Request #233776 · elastic/kibana

jennypavlova · 2025-09-02T18:23:58Z

Summary

This PR adds an option to clear the selection in the dimension and value selectors. When all dimensions are cleared, it will clear all values as well as those related to the corresponding dimensions. The PR also extracts the toolbar_selector to a shared place and uses it in the metrics grid and the histogram without adding the dependency issue.

How to test

Set the following config to kibana.dev.yml

discover.experimental.enabledProfiles:
  - observability-metrics-data-source-profile
metricsExperience.enabled: true

Navigate to Discover and Switch to ESQL mode
Set the space to Observability
Run FROM metrics-* search
Clone https://github.com/simianhacker/simian-forge/tree/main
Run ./forge --dataset hosts --count 25 --interval 30s
Check the drop-downs in the metrics grid:

dimf.mov

In case of logs-* search, for example, the breakdown selector should work as before:

…r-the-selection-in-the-dropdowns

elasticmachine · 2025-09-03T12:50:32Z

Pinging @elastic/obs-ux-infra_services-team (Team:obs-ux-infra_services)

…r-the-selection-in-the-dropdowns

crespocarlos

Looks good. Left a few nits

On the new package to centralize the ToolbarSelector, I don't have any strong opinions against it. The component appears to be generic enough to be reused outside the Discover/Metrics Experience context, and it may help as more features are added to One Discover. We'll see.

crespocarlos · 2025-09-04T07:20:10Z

...platform/packages/shared/kbn-unified-metrics-grid/src/components/metrics_experience_grid.tsx

        fields={fields}
        onChange={onDimensionsChange}
        selectedDimensions={dimensions}
+        clearDimensionSelection={() => onClearAllDimensions()}


For event, let's follow the on[Event] convention, like onChange

Suggested change

clearDimensionSelection={() => onClearAllDimensions()}

onClear={onClearAllDimensions}

Have you checked this suggestion?

Sorry, missed that. Good point, renamed ✅

crespocarlos · 2025-09-04T07:21:56Z

...platform/packages/shared/kbn-unified-metrics-grid/src/components/metrics_experience_grid.tsx

          disabled={dimensions.length === 0}
          indices={[indexPattern]}
          timeRange={timeRange}
+          clearValuesSelection={() => dispatch(setValueFilters([]))}


Same here. Perhaps you could also use the onValuesChange and pass an empty array

Suggested change

clearValuesSelection={() => dispatch(setValueFilters([]))}

const onClearValues = useCallback(() => onValuesChange([]))

<ValuesSelector

onClear={onClearValues}

Have you checked this suggestion? Wdyt?

Thanks, done ✅

crespocarlos · 2025-09-04T07:22:14Z

...form/packages/shared/kbn-unified-metrics-grid/src/components/toolbar/dimensions_selector.tsx

      return (
        <FormattedMessage
-          id="metricsExperience.breakdownFieldSelector.breakdownFieldButtonLabel"
+          id="metricsExperience.dimensionsSelector.breakdownFieldButtonLabel"


nice. thanks for fixing this.

crespocarlos · 2025-09-04T07:24:01Z

...form/packages/shared/kbn-unified-metrics-grid/src/components/toolbar/dimensions_selector.tsx

      options={options}
      singleSelection={false}
      onChange={handleChange}
+      popoverTitle={i18n.translate('metricsExperience.dimensionsSelector.label', {


There’s no title in the designs. Do we need one?

True, I removed it. It was also adding the aria-labels using the title content, and unfortunately, we won't get them now 😞

crespocarlos · 2025-09-04T07:25:23Z

...form/packages/shared/kbn-unified-metrics-grid/src/components/toolbar/dimensions_selector.tsx

    );
  }, [selectedDimensions]);

+  const clearAllSection = useMemo(() => {


We're repeating this component here and in the values_selector. Should we extract it into a new file and reuse it on both components?

Good idea! I expected that they would have more differences when I added them. I created a component and reused it 👍

crespocarlos · 2025-09-04T07:28:11Z

src/platform/packages/shared/shared-ux/toolbar_selector/src/toolbar_selector.test.tsx

+        searchable={true}
+        singleSelection={true}
+        popoverTitle="My Popover Title"
+        clearAllSection={<span>Custom Section</span>}


If clearAllSection accepts any component - not necessarily a component that has a selection counter and a clear all button -, should we rename the prop to something more generic but clear enough to tell it will be rendered below the search bar?

Makes sense, thanks! I also wasn't sure how to call it TBH, I asked GH Copilot and it suggested popoverContentBelowSearch, so I would go with that (this was the best suggestion it gave IMO 😅 )

maybe searchProps: { append: React.ReactNode } }?

We already have search props > append in a different context when using search in EuiSelectable 🤔 And it's not directly inside the search, so I think popoverContentBelowSearch describes it well. Or maybe just contentBelowSearch, idk

crespocarlos · 2025-09-04T07:33:14Z

src/platform/packages/shared/shared-ux/toolbar_selector/src/toolbar_selector.test.tsx

+    fireEvent.click(getByText('B'));
+    expect(onChange).toHaveBeenCalled();
+    // Should be called with array of selected options
+    expect(Array.isArray(onChange.mock.calls[0][0])).toBe(true);


Could we validate the items that were passed to onChange?

eg:

expect(onChange).toHaveBeenCalledWith([ { label: 'A', value: 'a' }, { label: 'B', value: 'b' }, ]);

Thanks for the suggestions! We have 2 calls, so I used toHaveBeenNthCalledWith and checked both calls 👍

crespocarlos · 2025-09-04T07:34:08Z

src/platform/packages/shared/shared-ux/toolbar_selector/src/toolbar_selector.test.tsx

+    fireEvent.click(getByTestId('toolbarSelectorTestButton'));
+    fireEvent.click(getByText('Option 2'));
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange.mock.calls[0][0].label).toBe('Option 2');


Could we validate it like this?

expect(onChange).toHaveBeenCalledWith({ label: 'Option 2', value: 'option2' });

AlexGPlay

discover changes lgtm - code review only

…tion-in-the-dropdowns' of https://github.com/jennypavlova/kibana into 233653-metricsdiscover-add-an-option-to-clear-the-selection-in-the-dropdowns

jennypavlova

@crespocarlos Thank you for reviewing! I believe I addressed all the comments. Can you please take a look again when you have time?

jennypavlova · 2025-09-04T08:55:13Z

src/platform/packages/shared/shared-ux/toolbar_selector/src/toolbar_selector.test.tsx

+        searchable={true}
+        singleSelection={true}
+        popoverTitle="My Popover Title"
+        clearAllSection={<span>Custom Section</span>}


Makes sense, thanks! I also wasn't sure how to call it TBH, I asked GH Copilot and it suggested popoverContentBelowSearch, so I would go with that (this was the best suggestion it gave IMO 😅 )

jennypavlova · 2025-09-04T10:07:41Z

src/platform/packages/shared/shared-ux/toolbar_selector/src/toolbar_selector.test.tsx

+    fireEvent.click(getByText('B'));
+    expect(onChange).toHaveBeenCalled();
+    // Should be called with array of selected options
+    expect(Array.isArray(onChange.mock.calls[0][0])).toBe(true);


Thanks for the suggestions! We have 2 calls, so I used toHaveBeenNthCalledWith and checked both calls 👍

jennypavlova · 2025-09-04T10:07:58Z

src/platform/packages/shared/shared-ux/toolbar_selector/src/toolbar_selector.test.tsx

+    fireEvent.click(getByTestId('toolbarSelectorTestButton'));
+    fireEvent.click(getByText('Option 2'));
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange.mock.calls[0][0].label).toBe('Option 2');


jennypavlova · 2025-09-04T10:15:25Z

...form/packages/shared/kbn-unified-metrics-grid/src/components/toolbar/dimensions_selector.tsx

      options={options}
      singleSelection={false}
      onChange={handleChange}
+      popoverTitle={i18n.translate('metricsExperience.dimensionsSelector.label', {


True, I removed it. It was also adding the aria-labels using the title content, and unfortunately, we won't get them now 😞

jennypavlova · 2025-09-04T10:17:50Z

...form/packages/shared/kbn-unified-metrics-grid/src/components/toolbar/dimensions_selector.tsx

    );
  }, [selectedDimensions]);

+  const clearAllSection = useMemo(() => {


Good idea! I expected that they would have more differences when I added them. I created a component and reused it 👍

…r-the-selection-in-the-dropdowns

crespocarlos

LGTM! 🚀

davismcphee

Sorry for getting to this late after it was already approved on our end. Data Discovery code changes seem fine to me, just have a question about the dependencies and new package.

.github/CODEOWNERS

davismcphee · 2025-09-04T17:14:29Z

Just an fyi that I disabled auto merge to give @jennypavlova an opportunity to respond to my comment before it auto merges.

…r-the-selection-in-the-dropdowns

elasticmachine · 2025-09-05T16:12:29Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`datasetQuality`	842	843	+1
`discover`	1488	1490	+2
total			+3

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`@kbn/shared-ux-toolbar-selector`	-	24	+24
`@kbn/unified-histogram`	92	88	-4
total			+20

Async chunks

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

id	before	after	diff
`datasetQuality`	437.3KB	437.2KB	-42.0B
`discover`	1.1MB	1.1MB	+1.3KB
total			+1.3KB

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id	before	after	diff
`@kbn/unified-histogram`	17	14	-3

Page load bundle

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

id	before	after	diff
`kbnUiSharedDeps-srcJs`	3.8MB	3.8MB	+262.0B

Unknown metric groups

API count

id	before	after	diff
`@kbn/shared-ux-toolbar-selector`	-	24	+24
`@kbn/unified-histogram`	118	114	-4
total			+20

History

💔 Build #335994 failed 3676a36
💚 Build #335743 succeeded ab5e92e
💛 Build #335479 was flaky 6fe1bac
💚 Build #335408 succeeded 4e06034
💔 Build #335375 failed ce998bd

cc @jennypavlova

…owns (elastic#233776) Closes elastic#233653 ## Summary This PR adds an option to clear the selection in the dimension and value selectors. When all dimensions are cleared, it will clear all values as well as those related to the corresponding dimensions. The PR also extracts the toolbar_selector to a shared place and uses it in the metrics grid and the histogram without adding the dependency issue. <img width="1276" height="669" alt="image" src="https://github.com/user-attachments/assets/e83d3338-fbe2-4f87-b2b0-d66ec50b79c9" /> <img width="2328" height="687" alt="image" src="https://github.com/user-attachments/assets/6c13b429-8566-4f8f-aa88-35207f524abf" /> ## How to test - Set the following config to `kibana.dev.yml` ```yml discover.experimental.enabledProfiles: - observability-metrics-data-source-profile metricsExperience.enabled: true ``` - Navigate to Discover and Switch to ESQL mode - Set the space to Observability - Run `FROM metrics-*` search - Clone https://github.com/simianhacker/simian-forge/tree/main - Run ` ./forge --dataset hosts --count 25 --interval 30s` - Check the drop-downs in the metrics grid: https://github.com/user-attachments/assets/77313c81-59fa-41ee-b3f9-60384212cfab - In case of `logs-*` search, for example, the breakdown selector should work as before: <img width="3544" height="1332" alt="image" src="https://github.com/user-attachments/assets/ce33654f-9835-456a-b47f-6a60ed58edd8" /> --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

jennypavlova added 2 commits September 2, 2025 19:16

Adapt toolbar_selector to support title component

e4c85f0

Extract the toolbar selector to a shared ux package and reuse it

46d8339

jennypavlova self-assigned this Sep 2, 2025

jennypavlova added release_note:skip Skip the PR/issue when compiling release notes backport:skip This PR does not require backporting Team:obs-ux-infra_services - DEPRECATED DEPRECATED - Use Team:obs-presentation. labels Sep 2, 2025

jennypavlova added 2 commits September 3, 2025 14:10

Cleanup

9ce8a0e

Add clear all and clear all filter values

e87ed75

jennypavlova marked this pull request as ready for review September 3, 2025 12:50

Merge branch 'main' into 233653-metricsdiscover-add-an-option-to-clea…

829174b

…r-the-selection-in-the-dropdowns

jennypavlova requested a review from a team September 3, 2025 12:50

jennypavlova requested a review from a team as a code owner September 3, 2025 12:50

kibanamachine and others added 7 commits September 3, 2025 13:03

[CI] Auto-commit changed files from 'node scripts/lint_packages --fix'

a0564b0

[CI] Auto-commit changed files from 'node scripts/yarn_deduplicate'

ce998bd

Move translations

ad06b41

Lint fixes

1cb3d60

Merge branch 'main' into 233653-metricsdiscover-add-an-option-to-clea…

4e06034

…r-the-selection-in-the-dropdowns

Fix clear all position

a0000c6

Merge branch 'main' into 233653-metricsdiscover-add-an-option-to-clea…

6fe1bac

…r-the-selection-in-the-dropdowns

crespocarlos reviewed Sep 4, 2025

View reviewed changes

jennypavlova added 2 commits September 4, 2025 10:51

Extend toolbar selector test

6919a24

Rename clearAllSection to popoverContentBelowSearch

97fbed9

AlexGPlay approved these changes Sep 4, 2025

View reviewed changes

jennypavlova added 3 commits September 4, 2025 12:06

Add clear all section component

aa75b4d

Remove title

1a69fc7

Merge branch '233653-metricsdiscover-add-an-option-to-clear-the-selec…

ab5e92e

…tion-in-the-dropdowns' of https://github.com/jennypavlova/kibana into 233653-metricsdiscover-add-an-option-to-clear-the-selection-in-the-dropdowns

jennypavlova commented Sep 4, 2025

View reviewed changes

jennypavlova added 2 commits September 4, 2025 17:56

Merge branch 'main' into 233653-metricsdiscover-add-an-option-to-clea…

34850fc

…r-the-selection-in-the-dropdowns

CR rename suggestions

f6d709a

jennypavlova added 2 commits September 4, 2025 18:09

Apply onValuesChange suggestion

99a3b78

Merge branch 'main' into 233653-metricsdiscover-add-an-option-to-clea…

3676a36

…r-the-selection-in-the-dropdowns

crespocarlos approved these changes Sep 4, 2025

View reviewed changes

jennypavlova enabled auto-merge (squash) September 4, 2025 16:34

davismcphee reviewed Sep 4, 2025

View reviewed changes

.github/CODEOWNERS Show resolved Hide resolved

davismcphee disabled auto-merge September 4, 2025 17:13

Merge branch 'main' into 233653-metricsdiscover-add-an-option-to-clea…

a660cf1

…r-the-selection-in-the-dropdowns

jennypavlova merged commit f081354 into elastic:main Sep 5, 2025
15 checks passed

kibanamachine added the v9.2.0 label Sep 5, 2025

	clearDimensionSelection={() => onClearAllDimensions()}
	onClear={onClearAllDimensions}

-          clearValuesSelection={() => dispatch(setValueFilters([]))}
+     const onClearValues = useCallback(() => onValuesChange([]))
+     <ValuesSelector
+          onClear={onClearValues}

Conversation

jennypavlova commented Sep 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

How to test

Uh oh!

elasticmachine commented Sep 3, 2025

Uh oh!

crespocarlos left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jennypavlova Sep 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AlexGPlay left a comment

Choose a reason for hiding this comment

Uh oh!

jennypavlova left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

crespocarlos left a comment

Choose a reason for hiding this comment

Uh oh!

davismcphee left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

davismcphee commented Sep 4, 2025

Uh oh!

elasticmachine commented Sep 5, 2025

💚 Build Succeeded

Metrics [docs]

jennypavlova commented Sep 2, 2025 •

edited

Loading

crespocarlos left a comment •

edited

Loading

jennypavlova Sep 4, 2025 •

edited

Loading