[FEATURE] Add panel-level repeat variable support

components/src/RepeatGrid/RepeatGrid.tsx

@@ -0,0 +1,40 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Box, SxProps, Theme } from '@mui/material';
+import { ReactNode } from 'react';
+
+export interface RepeatGridProps<T> {
+  rows: T[][];
+  gap: number;
+  renderItem: (item: T, rowIndex: number, colIndex: number) => ReactNode;
+  containerSx?: SxProps<Theme>;
+  rowSx?: SxProps<Theme>;
+}
+
+export function RepeatGrid<T>({ rows, gap, renderItem, containerSx, rowSx }: RepeatGridProps<T>): ReactNode {
+  return (
+    <Box
+      sx={[
+        { display: 'flex', flexDirection: 'column', width: '100%', height: '100%', gap: `${gap}px` },
+        ...(Array.isArray(containerSx) ? containerSx : [containerSx]),
+      ]}
+    >
+      {rows.map((rowItems, rowIndex) => (
+        <Box key={rowIndex} sx={[{ display: 'flex', gap: `${gap}px` }, ...(Array.isArray(rowSx) ? rowSx : [rowSx])]}>
+          {rowItems.map((item, colIndex) => renderItem(item, rowIndex, colIndex))}
+        </Box>
+      ))}
+    </Box>
+  );
+}

components/src/RepeatGrid/index.ts

@@ -0,0 +1,14 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+export * from './RepeatGrid';

components/src/index.ts

@@ -48,4 +48,5 @@ export * from './test-utils';
 export * from './theme';
 export * from './TransformsEditor';
 export * from './RefreshIntervalPicker';
+export * from './RepeatGrid';
 export * from './ValueMappingEditor';

dashboards/src/components/GridLayout/GridItemContent.tsx

@@ -26,20 +26,25 @@ export interface GridItemContentProps {
   panelGroupItemId: PanelGroupItemId;
   width: number; // necessary for determining the suggested step ms
   panelOptions?: PanelOptions;
+  readonly?: boolean;
+  informationTooltip?: string;
 }
 
 /**
  * Resolves the reference to panel content in a GridItemDefinition and renders the panel.
  */
 export function GridItemContent(props: GridItemContentProps): ReactElement {
-  const { panelGroupItemId, width } = props;
+  const { readonly, panelGroupItemId, width, informationTooltip } = props;
   const panelDefinition = usePanel(panelGroupItemId);
 
   const {
     spec: { queries },
   } = panelDefinition;
 
   const { isEditMode } = useEditMode();
+  const canModify = useMemo(() => {
+    return isEditMode && !readonly;
+  }, [isEditMode, readonly]);
   const { openEditPanel, openDeletePanelDialog, duplicatePanel, viewPanel } = usePanelActions(panelGroupItemId);
   const viewPanelGroupItemId = useViewPanelGroup();
 
@@ -65,14 +70,14 @@ export function GridItemContent(props: GridItemContentProps): ReactElement {
   const [openQueryViewer, setOpenQueryViewer] = useState(false);
 
   const viewQueriesHandler = useMemo(() => {
-    return isEditMode || !queries?.length
+    return canModify || !queries?.length
       ? undefined
       : {
           onClick: (): void => {
             setOpenQueryViewer(true);
           },
         };
-  }, [isEditMode, queries]);
+  }, [canModify, queries]);
 
   const readHandlers = {
     isPanelViewed: isPanelGroupItemIdEqual(viewPanelGroupItemId, panelGroupItemId),
@@ -87,7 +92,7 @@ export function GridItemContent(props: GridItemContentProps): ReactElement {
 
   // Provide actions to the panel when in edit mode
   let editHandlers: PanelProps['editHandlers'] = undefined;
-  if (isEditMode) {
+  if (canModify) {
     editHandlers = {
       onEditPanelClick: openEditPanel,
       onDuplicatePanelClick: duplicatePanel,
@@ -130,6 +135,7 @@ export function GridItemContent(props: GridItemContentProps): ReactElement {
             viewQueriesHandler={viewQueriesHandler}
             panelOptions={props.panelOptions}
             panelGroupItemId={panelGroupItemId}
+            informationTooltip={informationTooltip}
           />
         )}
       </DataQueriesProvider>

dashboards/src/components/GridLayout/GridItemRenderer.tsx

@@ -0,0 +1,83 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { ErrorAlert, ErrorBoundary } from '@perses-dev/components';
+import { PanelGroupId } from '@perses-dev/plugin-system';
+import { ReactElement } from 'react';
+
+import { DEFAULT_MARGIN } from '../../constants';
+import { useViewPanelGroup } from '../../context';
+import { PanelGroupItemId } from '../../model';
+import { getPerRowCount, RepeatItemMeta } from '../../utils';
+import { PanelOptions } from '../Panel/Panel';
+import { GridItemContent } from './GridItemContent';
+import { RepeatGridItemContent } from './RepeatGridItemContent';
+
+interface GridItemRendererProps {
+  panelGroupId: PanelGroupId;
+  panelGroupItemLayoutId: string;
+  width: number;
+  repeatItemMeta?: RepeatItemMeta;
+  groupRepeatVariable?: [string, string];
+  panelOptions?: PanelOptions;
+  isEditMode: boolean;
+}
+
+export function GridItemRenderer({
+  panelGroupId,
+  panelGroupItemLayoutId,
+  width,
+  repeatItemMeta,
+  groupRepeatVariable,
+  panelOptions,
+  isEditMode,
+}: GridItemRendererProps): ReactElement {
+  const viewPanelItemId = useViewPanelGroup();
+
+  const panelRepeatVariable = repeatItemMeta?.itemRepeatVariable;
+  const panelVariableValues = repeatItemMeta?.values;
+  const totalValues = repeatItemMeta?.totalValues ?? 0;
+  const effectiveValues = viewPanelItemId?.repeatVariable?.panel
+    ? [viewPanelItemId.repeatVariable.panel[1]]
+    : panelVariableValues;
+
+  const panelGroupItemId: PanelGroupItemId = {
+    panelGroupId,
+    panelGroupItemLayoutId,
+    repeatVariable: { group: groupRepeatVariable },
+  };
+
+  return (
+    <ErrorBoundary FallbackComponent={ErrorAlert}>
+      {panelRepeatVariable && effectiveValues?.length ? (
+        <RepeatGridItemContent
+          panelGroupId={panelGroupId}
+          panelGroupItemLayoutId={panelGroupItemLayoutId}
+          panelRepeatVariable={{
+            name: panelRepeatVariable.value,
+            values: effectiveValues,
+            maxPer: getPerRowCount(panelRepeatVariable),
+          }}
+          groupRepeatVariable={groupRepeatVariable}
+          width={width}
+          itemGap={DEFAULT_MARGIN}
+          panelOptions={panelOptions}
+          isEditMode={isEditMode}
+          isCapped={!isEditMode && effectiveValues.length < totalValues}
+        />
+      ) : (
+        <GridItemContent panelOptions={panelOptions} panelGroupItemId={panelGroupItemId} width={width} />
+      )}
+    </ErrorBoundary>
+  );
+}

dashboards/src/components/GridLayout/GridLayout.tsx

@@ -141,7 +141,16 @@ export function RepeatGridLayout({
       {variable.value.map((value) => (
         <VariableContext.Provider
           key={`${repeatVariableName}-${value}`}
-          value={{ state: { ...variables, [repeatVariableName]: { value, loading: false } } }}
+          value={{
+            state: {
+              ...variables,
+              [repeatVariableName]: {
+                ...variables[repeatVariableName],
+                value: value,
+                loading: false,
+              },
+            },
+          }}
         >
           <Row
             panelGroupId={panelGroupId}

dashboards/src/components/GridLayout/RepeatGridItemContent.tsx

@@ -0,0 +1,122 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Box } from '@mui/material';
+import { RepeatGrid } from '@perses-dev/components';
+import { PanelGroupId, useVariableValues, VariableContext } from '@perses-dev/plugin-system';
+import { ReactNode, useMemo } from 'react';
+
+import { calcPerPanelWidth } from '../../utils/repeatLayoutUtils';
+import { PanelOptions } from '../Panel/Panel';
+import { GridItemContent } from './GridItemContent';
+
+interface RepeatPanelItemProps {
+  panelGroupId: PanelGroupId;
+  panelGroupItemLayoutId: string;
+  panelRepeatVariable: {
+    name: string;
+    values: string[];
+    maxPer: number;
+  };
+  groupRepeatVariable?: [string, string];
+  width: number;
+  itemGap: number;
+  panelOptions?: PanelOptions;
+  isEditMode: boolean;
+  isCapped?: boolean;
+}
+
+function getRepeatPanelTooltip(
+  isFirst: boolean,
+  isEditMode: boolean,
+  isCapped: boolean | undefined,
+  repeatVariableName: string,
+  value: string,
+): string | undefined {
+  if (!isFirst && isEditMode) {
+    return `This panel is generated from the variable "${repeatVariableName}" with the value "${value}". To change panel definition, please edit the first panel.`;
+  }
+  if (isFirst && isCapped) {
+    return `Not all values are displayed. To display more, update the repeat variable limit in the server configuration.`;
+  }
+  return undefined;
+}
+
+/**
+ * Renders a grid item that repeats based on a variable.
+ * It calculates the number of items per row and the width of each item,
+ * then renders the appropriate number of GridItemContent components with the correct variable context.
+ */
+export function RepeatGridItemContent({
+  panelGroupId,
+  panelGroupItemLayoutId,
+  panelRepeatVariable,
+  groupRepeatVariable,
+  width,
+  itemGap,
+  panelOptions,
+  isEditMode,
+  isCapped,
+}: RepeatPanelItemProps): ReactNode {
+  const { name: repeatVariableName, values: variableValues, maxPer: perRow } = panelRepeatVariable;
+  const variables = useVariableValues();
+
+  const rows: string[][] = useMemo(() => {
+    const result: string[][] = [];
+    for (let i = 0; i < variableValues.length; i += perRow) {
+      result.push(variableValues.slice(i, i + perRow));
+    }
+    return result;
+  }, [variableValues, perRow]);
+  const perPanelWidth = useMemo(() => calcPerPanelWidth(width, itemGap, perRow), [itemGap, perRow, width]);
+
+  return (
+    <RepeatGrid
+      rows={rows}
+      gap={itemGap}
+      containerSx={{ overflow: 'hidden' }}
+      rowSx={{ flex: 1, overflow: 'hidden' }}
+      renderItem={(value, rowIndex, colIndex) => {
+        const isFirst = colIndex + rowIndex === 0;
+        return (
+          <VariableContext.Provider
+            key={`${repeatVariableName}-${value}`}
+            value={{
+              state: {
+                ...variables,
+                [repeatVariableName]: { ...variables[repeatVariableName], value, loading: false },
+              },
+            }}
+          >
+            <Box sx={{ width: perPanelWidth, overflow: 'hidden' }}>
+              <GridItemContent
+                panelOptions={panelOptions}
+                panelGroupItemId={{
+                  panelGroupId,
+                  panelGroupItemLayoutId,
+                  repeatVariable: {
+                    panel: [repeatVariableName, value],
+                    group: groupRepeatVariable,
+                  },
+                }}
+                width={perPanelWidth}
+                readonly={!isFirst}
+                informationTooltip={getRepeatPanelTooltip(isFirst, isEditMode, isCapped, repeatVariableName, value)}
+              />
+            </Box>
+          </VariableContext.Provider>
+        );
+      }}
+    />
+  );
+}