Create lib panel and replace it in scene (#88504)

* Create lib panel - also replace it in scene

* refactor

* refactor

* refactor
This commit is contained in:
Victor Marin 2024-06-03 11:02:41 +03:00 committed by GitHub
parent 68f2585712
commit e86784200a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 144 additions and 11 deletions

View File

@ -12,7 +12,7 @@ import {
behaviors,
SceneDataTransformer,
} from '@grafana/scenes';
import { Dashboard, DashboardCursorSync } from '@grafana/schema';
import { Dashboard, DashboardCursorSync, LibraryPanel } from '@grafana/schema';
import appEvents from 'app/core/app_events';
import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
import { VariablesChanged } from 'app/features/variables/types';
@ -888,6 +888,76 @@ describe('DashboardScene', () => {
expect(body.state.children.length).toBe(1);
expect(gridItem.state.body).toBeInstanceOf(VizPanel);
});
it('Should create a library panel', () => {
const gridItem = new DashboardGridItem({
key: 'griditem-1',
body: new VizPanel({
title: 'Panel A',
key: 'panel-1',
pluginId: 'table',
}),
});
const scene = buildTestScene({
body: new SceneGridLayout({
children: [gridItem],
}),
});
const libPanel = {
uid: 'uid',
name: 'name',
};
scene.createLibraryPanel(gridItem, libPanel as LibraryPanel);
const layout = scene.state.body as SceneGridLayout;
const newGridItem = layout.state.children[0] as DashboardGridItem;
expect(layout.state.children.length).toBe(1);
expect(newGridItem.state.body).toBeInstanceOf(LibraryVizPanel);
expect((newGridItem.state.body as LibraryVizPanel).state.uid).toBe('uid');
expect((newGridItem.state.body as LibraryVizPanel).state.name).toBe('name');
});
it('Should create a library panel under a row', () => {
const gridItem = new DashboardGridItem({
key: 'griditem-1',
body: new VizPanel({
title: 'Panel A',
key: 'panel-1',
pluginId: 'table',
}),
});
const scene = buildTestScene({
body: new SceneGridLayout({
children: [
new SceneGridRow({
key: 'row-1',
children: [gridItem],
}),
],
}),
});
const libPanel = {
uid: 'uid',
name: 'name',
};
scene.createLibraryPanel(gridItem, libPanel as LibraryPanel);
const layout = scene.state.body as SceneGridLayout;
const newGridItem = (layout.state.children[0] as SceneGridRow).state.children[0] as DashboardGridItem;
expect(layout.state.children.length).toBe(1);
expect((layout.state.children[0] as SceneGridRow).state.children.length).toBe(1);
expect(newGridItem.state.body).toBeInstanceOf(LibraryVizPanel);
expect((newGridItem.state.body as LibraryVizPanel).state.uid).toBe('uid');
expect((newGridItem.state.body as LibraryVizPanel).state.name).toBe('name');
});
});
});

View File

@ -16,7 +16,7 @@ import {
SceneVariableDependencyConfigLike,
VizPanel,
} from '@grafana/scenes';
import { Dashboard, DashboardLink } from '@grafana/schema';
import { Dashboard, DashboardLink, LibraryPanel } from '@grafana/schema';
import appEvents from 'app/core/app_events';
import { LS_PANEL_COPY_KEY } from 'app/core/constants';
import { getNavModel } from 'app/core/selectors/navModel';
@ -510,6 +510,53 @@ export class DashboardScene extends SceneObjectBase<DashboardSceneState> {
});
}
public createLibraryPanel(gridItemToReplace: DashboardGridItem, libPanel: LibraryPanel) {
const layout = this.state.body;
if (!(layout instanceof SceneGridLayout)) {
throw new Error('Trying to add a panel in a layout that is not SceneGridLayout');
}
const panelKey = gridItemToReplace?.state.body.state.key;
const body = new LibraryVizPanel({
title: libPanel.model?.title ?? 'Panel',
uid: libPanel.uid,
name: libPanel.name,
panelKey: panelKey ?? getVizPanelKeyForPanelId(dashboardSceneGraph.getNextPanelId(this)),
});
const newGridItem = gridItemToReplace.clone({ body });
if (!(newGridItem instanceof DashboardGridItem)) {
throw new Error('Could not build library viz panel griditem');
}
const key = gridItemToReplace?.state.key;
if (gridItemToReplace.parent instanceof SceneGridRow) {
const children = gridItemToReplace.parent.state.children.map((rowChild) => {
if (rowChild.state.key === key) {
return newGridItem;
}
return rowChild;
});
gridItemToReplace.parent.setState({ children });
layout.forceRender();
} else {
// Find the grid item in the layout and replace it
const children = layout.state.children.map((child) => {
if (child.state.key === key) {
return newGridItem;
}
return child;
});
layout.setState({ children });
}
}
public duplicatePanel(vizPanel: VizPanel) {
if (!vizPanel.parent) {
return;

View File

@ -1,6 +1,7 @@
import React from 'react';
import { SceneComponentProps, SceneObjectBase, SceneObjectRef, VizPanel } from '@grafana/scenes';
import { LibraryPanel } from '@grafana/schema/dist/esm/index.gen';
import { t } from 'app/core/internationalization';
import { ShareLibraryPanel } from 'app/features/dashboard/components/ShareModal/ShareLibraryPanel';
import { shareDashboardType } from 'app/features/dashboard/components/ShareModal/utils';
@ -31,11 +32,11 @@ function ShareLibraryPanelTabRenderer({ model }: SceneComponentProps<ShareLibrar
return null;
}
const vizPanel = panelRef.resolve();
const parent = panelRef.resolve().parent;
if (vizPanel.parent instanceof DashboardGridItem) {
if (parent instanceof DashboardGridItem) {
const dashboardScene = dashboardRef.resolve();
const panelJson = gridItemToPanel(vizPanel.parent);
const panelJson = gridItemToPanel(parent);
const panelModel = new PanelModel(panelJson);
const dashboardJson = transformSceneToSaveModel(dashboardScene);
@ -49,6 +50,7 @@ function ShareLibraryPanelTabRenderer({ model }: SceneComponentProps<ShareLibrar
onDismiss={() => {
modalRef?.resolve().onDismiss();
}}
onCreateLibraryPanel={(libPanel: LibraryPanel) => dashboardScene.createLibraryPanel(parent, libPanel)}
/>
);
}

View File

@ -11,7 +11,7 @@ interface Props extends ShareModalTabProps {
initialFolderUid?: string;
}
export const ShareLibraryPanel = ({ panel, initialFolderUid, onDismiss }: Props) => {
export const ShareLibraryPanel = ({ panel, initialFolderUid, onCreateLibraryPanel, onDismiss }: Props) => {
useEffect(() => {
reportInteraction('grafana_dashboards_library_panel_share_viewed', { shareResource: getTrackingSource(panel) });
}, [panel]);
@ -25,7 +25,12 @@ export const ShareLibraryPanel = ({ panel, initialFolderUid, onDismiss }: Props)
<p className="share-modal-info-text">
<Trans i18nKey="share-modal.library.info">Create library panel.</Trans>
</p>
<AddLibraryPanelContents panel={panel} initialFolderUid={initialFolderUid} onDismiss={onDismiss} />
<AddLibraryPanelContents
panel={panel}
initialFolderUid={initialFolderUid}
onCreateLibraryPanel={onCreateLibraryPanel}
onDismiss={onDismiss}
/>
</>
);
};

View File

@ -1,12 +1,14 @@
import React from 'react';
import { NavModelItem } from '@grafana/data';
import { LibraryPanel } from '@grafana/schema/dist/esm/index.gen';
import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
export interface ShareModalTabProps {
dashboard: DashboardModel;
panel?: PanelModel;
onDismiss?(): void;
onCreateLibraryPanel?(libPanel: LibraryPanel): void;
}
export interface ShareModalTabModel {

View File

@ -2,22 +2,28 @@ import React, { useCallback, useEffect, useState } from 'react';
import { useAsync, useDebounce } from 'react-use';
import { FetchError, isFetchError } from '@grafana/runtime';
import { LibraryPanel } from '@grafana/schema/dist/esm/index.gen';
import { Button, Field, Input, Modal } from '@grafana/ui';
import { OldFolderPicker } from 'app/core/components/Select/OldFolderPicker';
import { t, Trans } from 'app/core/internationalization';
import { PanelModel } from '../../../dashboard/state';
import { getLibraryPanelByName } from '../../state/api';
import { LibraryElementDTO } from '../../types';
import { usePanelSave } from '../../utils/usePanelSave';
interface AddLibraryPanelContentsProps {
onDismiss?: () => void;
panel: PanelModel;
initialFolderUid?: string;
onCreateLibraryPanel?: (libPanel: LibraryPanel) => void;
}
export const AddLibraryPanelContents = ({ panel, initialFolderUid, onDismiss }: AddLibraryPanelContentsProps) => {
export const AddLibraryPanelContents = ({
panel,
initialFolderUid,
onCreateLibraryPanel,
onDismiss,
}: AddLibraryPanelContentsProps) => {
const [folderUid, setFolderUid] = useState(initialFolderUid);
const [panelName, setPanelName] = useState(panel.title);
const [debouncedPanelName, setDebouncedPanelName] = useState(panel.title);
@ -30,14 +36,15 @@ export const AddLibraryPanelContents = ({ panel, initialFolderUid, onDismiss }:
const onCreate = useCallback(() => {
panel.libraryPanel = { uid: '', name: panelName };
saveLibraryPanel(panel, folderUid!).then((res: LibraryElementDTO | FetchError) => {
saveLibraryPanel(panel, folderUid!).then((res: LibraryPanel | FetchError) => {
if (!isFetchError(res)) {
onDismiss?.();
onCreateLibraryPanel?.(res);
} else {
panel.libraryPanel = undefined;
}
});
}, [panel, panelName, folderUid, onDismiss, saveLibraryPanel]);
}, [panel, panelName, saveLibraryPanel, folderUid, onDismiss, onCreateLibraryPanel]);
const isValidName = useAsync(async () => {
try {