[FEATURE] Add panel-level repeat variable support by adrianSepiol · Pull Request #149 · perses/shared

adrianSepiol · 2026-06-01T17:22:16Z

Description

Adds support for repeat panel based on variable. Uses only selected values from dropdown are used.

Screenshots

In below recording you can notice that width of panel is expanded when you select repeat variable and height is used for single tile. If you don't fill 'Max per row' all tiles will be fitted into single row.

layout-editor.mov

In this one you can see how the panel will behave when the amount of selected values will change. You can enter edit mode only with first panel.

Screen.Recording.2026-06-10.at.09.00.11.mov

Group repeat has priority over panel repeat.

Screen.Recording.2026-06-01.at.19.14.58.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.

shahrokni · 2026-06-08T07:41:56Z

@adrianSepiol
Could you please check the two following pipelines. It seems they are failing. ci/build and ci/type-check`` And please before that, rebase` with main.

adrianSepiol · 2026-06-08T07:56:06Z

@adrianSepiol Could you please check the two following pipelines. It seems they are failing. ci/build and ci/type-check And please before that, ``rebase` with main.

@shahrokni Pipelines are failing because of PR mentioned in description that needs to be merged for this to work: perses/spec#32

adrianSepiol · 2026-06-10T07:02:56Z

Removed "mode" option after comments from @AntoineThebaud in perses/perses#2936. I've updated description of PR.

adrianSepiol · 2026-07-20T13:17:56Z

Hi @jgbernalp @Gladorme, I've moved this pr to ready for review with new Layout tab that we have discussed.

Signed-off-by: Adrian Sepiół <a.sepiol@sap.com>

…tainer is narrower than combined gaps, and consolidate VariableDefinitionGroup to plugin-system model Signed-off-by: Adrian Sepiół <a.sepiol@sap.com>

…ndered panels per repeat variable Signed-off-by: Adrian Sepiół <a.sepiol@sap.com>

adrianSepiol · 2026-08-07T07:48:43Z

Hi @jgbernalp, I adjusted code to your comments. Could you have another look?

jgbernalp · 2026-08-11T15:58:57Z

+    repeatVariable: z
+      .object({
+        value: z.string(),
+        maxPer: z.number().optional(),


we should add max and min, if 0 is passed then it will create runtime errors with division by 0 or infinite loops

Suggested change

maxPer: z.number().optional(),

maxPer: z.number().int().min(1).max(48).optional()

jgbernalp · 2026-08-11T16:02:18Z

+  if (Array.isArray(variableState.value) && variableState.value.length > 0) {
+    return variableState.value;
+  }
+  return variableState.options?.map((option) => option.value) ?? [];


Can variableState.value be a string? if so their options are mapped, is this the intended behavior?

jgbernalp · 2026-08-11T16:03:59Z

+            <Typography sx={{ fontStyle: 'italic' }}>None</Typography>
+          </MenuItem>
+          {variableDefinitionGroups.flatMap(({ source, definitions }) => {
+            const listDefs = definitions.filter((def) => def.kind === 'ListVariable');


if there is a list variable that does not support multiple choices then is not a good candidate for repetition

jgbernalp · 2026-08-11T16:11:41Z

+
+import { Layout, Layouts } from 'react-grid-layout';
+import { DEFAULT_MAX_PER_ROW, DEFAULT_REPEAT_ALIGNMENT, VariableStateMap } from '@perses-dev/plugin-system';
+import { DEFAULT_MARGIN, ROW_HEIGHT } from '@perses-dev/dashboards';


This imports should be relative as this is the dashboards package. Maybe we can extract this constants into dashboards/src/constants/grid.ts and import from there in other files as well

jgbernalp · 2026-08-11T16:16:26Z

+
+    expect(await screen.findByText('Layout preview (2 panels)')).toBeInTheDocument();
+  });
+});


we probably should add some tests for more invalid cases, like an invalid maxPer or a result with a single option

adrianSepiol requested a review from a team as a code owner June 1, 2026 17:22

adrianSepiol force-pushed the feature/panel-level-repeat branch 2 times, most recently from c42f663 to b611f9c Compare June 10, 2026 06:53

adrianSepiol force-pushed the feature/panel-level-repeat branch from b611f9c to 23fe7b8 Compare June 11, 2026 10:16

adrianSepiol marked this pull request as draft July 10, 2026 07:20

adrianSepiol force-pushed the feature/panel-level-repeat branch 11 times, most recently from 9a6a842 to b83e228 Compare July 20, 2026 12:49

adrianSepiol marked this pull request as ready for review July 20, 2026 12:58