[FEATURE] Selection provider and Item actions #40

jgbernalp · 2026-01-20T11:11:11Z

Description

This PR adds a new Actions and selection features. perses/perses#3788. This allows to define actions based on selected data, for example calling an HTTP request with the interpolated data from multiple rows selection.

Two new Providers were added to the main Panel component, yes we have more providers but users don't have to configure these two, plugin developers can just use the hooks without any issue as they are resilient to undefined context:

SelectionContext: allows to share the selected items between the plugin panel and the panel header. This will allow in the future to use selections from time series or other panel plugins.
ItemActionsContext: allows to execute the actions configured in the plugin spec, either from the table row or the panel header.

I split into 3 commits so is easier to review:

b33ab5d adds the selection provider, adding a selection configuration option to common cue package
43747e2 Improves the interpolation formats and moves the functions to the components package, re exporting in plugins for backwards compatibility
9c52f39 Adds the item actions provider, connecting the selections and actions, adds an actions configuration option to common cue package. The actions and selections integration was added to the table component for plugins to use. Other plugin integrations will follow.

Screenshots

Screen.Recording.2026-01-23.at.20.41.34.mov

Checklist

Pull request has a descriptive title and context useful to a reviewer.
Pull request title follows the [<catalog_entry>] <commit message> naming convention using one of the
following catalog_entry values: FEATURE, ENHANCEMENT, BUGFIX, BREAKINGCHANGE, DOC,IGNORE.
All commits have DCO signoffs.

UI Changes

Changes that impact the UI include screenshots and/or screencasts of the relevant changes.
Code follows the UI guidelines.
E2E tests are stable and unlikely to be flaky.
See e2e docs for more details. Common issues include:
- Is the data inconsistent? You need to mock API requests.
- Does the time change? You need to use consistent time values or mock time utilities.
- Does it have loading states? You need to wait for loading to complete.

AntoineThebaud

Review of the CUE part

cue/common/actions.cue

Gladorme

I think item actions are super interesting for embedded usage, maybe a little less for Perses App.

Idea for the future, add a provider for adding supported custom events, it will be useful for autocomplete (who can know all custom events :p) and remove the "custom event" option if there is no custom event supported (like currently in Perses App).

About the webhook, I did not test it, but can we have some CORS issues due to this? Maybe we want to allow to pass by the proxy too (like datasources) at some point?

Gladorme · 2026-01-28T14:28:12Z

plugin-system/src/utils/variables.ts

-  }
-  return matches;
-}
+// Re-export all variable interpolation utilities from @perses-dev/components for backwards compatibility


Any reason(s) to move everything to @perses-dev/components? Circular deps?
Look like more runtime stuff than components to me 👀

And ItemActionsOptionsEditor + SelectionOptionsEditor, I would see them in @perses-dev/components instead.

Yes I moved to components or they will create a circular dependency. Re exported as all the plugins currently consume this from the plugin-system so I wanted to avoid big breaking changes for a single release.

I left the new ItemSelectionActionsOptionsEditor in plugin-system as other plugin related editors are there. We can move/refactor these components to the components in a different PR.

...ystem/src/components/ItemSelectionActionsOptionsEditor/ItemSelectionActionsOptionsEditor.tsx

Gladorme · 2026-01-28T14:44:04Z

components/src/context/SelectionProvider.tsx

+): SelectionState<T, Id> & { hasContext: boolean } {
+  const ctx = useContext(SelectionContext);
+
+  useEffect(() => {


Not fan of this useEffect, but I guess no others choices. This provider is complex to understand, some comments would be welcomed 😅

Added some comments. The useEffect avoids registering the getId function on every render.

Gladorme · 2026-01-28T14:56:53Z

plugin-system/src/components/ItemActionsOptionsEditor/ItemActionsOptionsEditor.tsx

+            {isCollapsed ? <ChevronRight /> : <ChevronDown />}
+          </IconButton>
+
+          <Typography variant="subtitle2">{eventAction.name ?? 'Event Action'}</Typography>


I have the feeling the typo is huge. Can we use the same as colum settings / cell settings?

I changed the UI to mimic the column settings. Also merged the selection and item actions, so the selection option is only in one place.

…mers Signed-off-by: Gabriel Bernal <gbernal@redhat.com>

jgbernalp · 2026-01-29T16:25:44Z

I think item actions are super interesting for embedded usage, maybe a little less for Perses App.

Idea for the future, add a provider for adding supported custom events, it will be useful for autocomplete (who can know all custom events :p) and remove the "custom event" option if there is no custom event supported (like currently in Perses App).

About the webhook, I did not test it, but can we have some CORS issues due to this? Maybe we want to allow to pass by the proxy too (like datasources) at some point?

Yes we can have some CORS issues, I thought about the proxy configuration. But wanted t keep the initial change "small" 😅

…erpolation Signed-off-by: Gabriel Bernal <gbernal@redhat.com>

Signed-off-by: Gabriel Bernal <gbernal@redhat.com>

Gladorme · 2026-01-30T10:42:25Z

Hmmm, I keep getting the following error, when I try to go on Selections or Item Actions of table panel:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of `TableSelectionsEditor`.

Did you already had this issue? 👀
Normally, everything is up to date on my side and all repo are linked to shared

jgbernalp · 2026-01-30T13:37:00Z

These are the steps I follow in my local setup. Having perses, shared and plugins repo folders as siblings:

perses: main branch
plugins: selection-provider branch
shared: selection-provider branch

# from shared using https://github.com/perses/shared/pull/32
npm i
npm run build
./scripts/link-with-perses/link-with-perses.sh --perses
./scripts/link-with-perses/link-with-perses.sh --plugins

# from perses
./scripts/api_backend_dev.sh --e2e
cd ui
npm i
cd app
npm run start:shared

# from plugins
../perses/bin/percli login
../perses/bin/percli plugin start table

Gladorme

I retried and it's working fine (strange). lgtm

jgbernalp changed the title ~~Selection provider~~ Selection provider and Selection actions Jan 20, 2026

jgbernalp changed the title ~~Selection provider and Selection actions~~ [FEATURE] Selection provider and Selection actions Jan 20, 2026

jgbernalp changed the title ~~[FEATURE] Selection provider and Selection actions~~ [FEATURE] Selection provider and Item actions Jan 23, 2026

jgbernalp force-pushed the selection-provider branch 4 times, most recently from 249c863 to 9c52f39 Compare January 23, 2026 20:04

jgbernalp marked this pull request as ready for review January 23, 2026 20:10

jgbernalp requested review from a team and AntoineThebaud as code owners January 23, 2026 20:10

jgbernalp requested a review from Gladorme January 23, 2026 20:10

jgbernalp mentioned this pull request Jan 23, 2026

[FEATURE] Selection provider perses/plugins#539

Draft

5 tasks

jgbernalp force-pushed the selection-provider branch from 9c52f39 to dbf69c7 Compare January 27, 2026 16:43

AntoineThebaud reviewed Jan 28, 2026

View reviewed changes

cue/common/actions.cue Outdated Show resolved Hide resolved

cue/common/actions.cue Outdated Show resolved Hide resolved

cue/common/actions.cue Outdated Show resolved Hide resolved

cue/common/actions.cue Outdated Show resolved Hide resolved

Gladorme reviewed Jan 28, 2026

View reviewed changes

[FEATURE] add selection provider to panel and optional hook for consu…

75343ef

…mers Signed-off-by: Gabriel Bernal <gbernal@redhat.com>

jgbernalp force-pushed the selection-provider branch from dbf69c7 to 9f2f167 Compare January 29, 2026 16:22

jgbernalp force-pushed the selection-provider branch 2 times, most recently from 529c9b3 to f54133f Compare January 29, 2026 17:03

jgbernalp added 2 commits January 29, 2026 18:11

[ENHANCEMENT] refactor data fields replacements to support format int…

3242e30

…erpolation Signed-off-by: Gabriel Bernal <gbernal@redhat.com>

[FEATURE] add item actions to panel header and table component

18ce97d

Signed-off-by: Gabriel Bernal <gbernal@redhat.com>

jgbernalp force-pushed the selection-provider branch from f54133f to 18ce97d Compare January 29, 2026 17:11

Gladorme approved these changes Jan 30, 2026

View reviewed changes

jgbernalp merged commit bbf1d00 into main Jan 30, 2026
11 checks passed

jgbernalp deleted the selection-provider branch January 30, 2026 16:07

[FEATURE] Selection provider and Item actions #40

[FEATURE] Selection provider and Item actions #40

Conversation

jgbernalp commented Jan 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Screenshots

Checklist

UI Changes

Uh oh!

AntoineThebaud left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Gladorme 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!

Gladorme Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

jgbernalp Jan 29, 2026 • 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!

Uh oh!

Gladorme Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

jgbernalp Jan 29, 2026

Choose a reason for hiding this comment

Uh oh!

Gladorme Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

jgbernalp Jan 29, 2026

Choose a reason for hiding this comment

Uh oh!

jgbernalp commented Jan 29, 2026

Uh oh!

Gladorme commented Jan 30, 2026

Uh oh!

jgbernalp commented Jan 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Gladorme left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

jgbernalp commented Jan 20, 2026 •

edited

Loading

Gladorme left a comment •

edited

Loading

jgbernalp Jan 29, 2026 •

edited

Loading

jgbernalp commented Jan 30, 2026 •

edited

Loading