Scenes/Repeats: Show reduced panel menu for repeat panels (#84085)

This commit is contained in:
kay delaney 2024-03-11 11:27:12 +00:00 committed by GitHub
parent b2b825db69
commit 8206a23061
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 19 additions and 9 deletions

View File

@ -33,7 +33,7 @@ import { UnlinkLibraryPanelModal } from './UnlinkLibraryPanelModal';
/** /**
* Behavior is called when VizPanelMenu is activated (ie when it's opened). * Behavior is called when VizPanelMenu is activated (ie when it's opened).
*/ */
export function panelMenuBehavior(menu: VizPanelMenu) { export function panelMenuBehavior(menu: VizPanelMenu, isRepeat = false) {
const asyncFunc = async () => { const asyncFunc = async () => {
// hm.. add another generic param to SceneObject to specify parent type? // hm.. add another generic param to SceneObject to specify parent type?
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
@ -64,7 +64,7 @@ export function panelMenuBehavior(menu: VizPanelMenu) {
href: getViewPanelUrl(panel), href: getViewPanelUrl(panel),
}); });
if (dashboard.canEditDashboard()) { if (dashboard.canEditDashboard() && !isRepeat) {
// We could check isEditing here but I kind of think this should always be in the menu, // We could check isEditing here but I kind of think this should always be in the menu,
// and going into panel edit should make the dashboard go into edit mode is it's not already // and going into panel edit should make the dashboard go into edit mode is it's not already
items.push({ items.push({
@ -86,7 +86,7 @@ export function panelMenuBehavior(menu: VizPanelMenu) {
shortcut: 'p s', shortcut: 'p s',
}); });
if (dashboard.state.isEditing) { if (dashboard.state.isEditing && !isRepeat) {
moreSubMenu.push({ moreSubMenu.push({
text: t('panel.header-menu.duplicate', `Duplicate`), text: t('panel.header-menu.duplicate', `Duplicate`),
onClick: () => { onClick: () => {
@ -105,7 +105,7 @@ export function panelMenuBehavior(menu: VizPanelMenu) {
}, },
}); });
if (dashboard.state.isEditing) { if (dashboard.state.isEditing && !isRepeat) {
if (parent instanceof LibraryVizPanel) { if (parent instanceof LibraryVizPanel) {
moreSubMenu.push({ moreSubMenu.push({
text: t('panel.header-menu.unlink-library-panel', `Unlink library panel`), text: t('panel.header-menu.unlink-library-panel', `Unlink library panel`),
@ -153,7 +153,7 @@ export function panelMenuBehavior(menu: VizPanelMenu) {
}); });
} }
if (dashboard.canEditDashboard() && plugin && !plugin.meta.skipDataQuery) { if (dashboard.canEditDashboard() && plugin && !plugin.meta.skipDataQuery && !isRepeat) {
moreSubMenu.push({ moreSubMenu.push({
text: t('panel.header-menu.get-help', 'Get help'), text: t('panel.header-menu.get-help', 'Get help'),
onClick: (e: React.MouseEvent) => { onClick: (e: React.MouseEvent) => {
@ -200,7 +200,7 @@ export function panelMenuBehavior(menu: VizPanelMenu) {
}); });
} }
if (dashboard.state.isEditing) { if (dashboard.state.isEditing && !isRepeat) {
items.push({ items.push({
text: '', text: '',
type: 'divider', type: 'divider',
@ -223,6 +223,8 @@ export function panelMenuBehavior(menu: VizPanelMenu) {
asyncFunc(); asyncFunc();
} }
export const repeatPanelMenuBehavior = (menu: VizPanelMenu) => panelMenuBehavior(menu, true);
async function getExploreMenuItem(panel: VizPanel): Promise<PanelMenuItem | undefined> { async function getExploreMenuItem(panel: VizPanel): Promise<PanelMenuItem | undefined> {
const exploreUrl = await tryGetExploreUrlForPanel(panel); const exploreUrl = await tryGetExploreUrlForPanel(panel);
if (!exploreUrl) { if (!exploreUrl) {

View File

@ -15,12 +15,15 @@ import {
MultiValueVariable, MultiValueVariable,
LocalValueVariable, LocalValueVariable,
CustomVariable, CustomVariable,
VizPanelMenu,
VizPanelState,
} from '@grafana/scenes'; } from '@grafana/scenes';
import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN } from 'app/core/constants'; import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN } from 'app/core/constants';
import { getMultiVariableValues } from '../utils/utils'; import { getMultiVariableValues } from '../utils/utils';
import { LibraryVizPanel } from './LibraryVizPanel'; import { LibraryVizPanel } from './LibraryVizPanel';
import { repeatPanelMenuBehavior } from './PanelMenuBehavior';
import { DashboardRepeatsProcessedEvent } from './types'; import { DashboardRepeatsProcessedEvent } from './types';
interface PanelRepeaterGridItemState extends SceneGridItemStateLike { interface PanelRepeaterGridItemState extends SceneGridItemStateLike {
@ -107,15 +110,20 @@ export class PanelRepeaterGridItem extends SceneObjectBase<PanelRepeaterGridItem
// Loop through variable values and create repeats // Loop through variable values and create repeats
for (let index = 0; index < values.length; index++) { for (let index = 0; index < values.length; index++) {
const clone = panelToRepeat.clone({ const cloneState: Partial<VizPanelState> = {
$variables: new SceneVariableSet({ $variables: new SceneVariableSet({
variables: [ variables: [
new LocalValueVariable({ name: variable.state.name, value: values[index], text: String(texts[index]) }), new LocalValueVariable({ name: variable.state.name, value: values[index], text: String(texts[index]) }),
], ],
}), }),
key: `${panelToRepeat.state.key}-clone-${index}`, key: `${panelToRepeat.state.key}-clone-${index}`,
}); };
if (index > 0) {
cloneState.menu = new VizPanelMenu({
$behaviors: [repeatPanelMenuBehavior],
});
}
const clone = panelToRepeat.clone(cloneState);
repeatedPanels.push(clone); repeatedPanels.push(clone);
} }