opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-08-02 04:09:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

Dynamic Dashboards: Replace add pane with add dropdown (#103301)

Browse Source
This commit is contained in:
Bogdan Matei
2025-04-02 20:18:16 +03:00
committed by GitHub
parent c5264e3bfc
commit c372012abc
4 changed files with 56 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
public/app/features/dashboard-scene/edit-pane/DashboardAddPane.tsx
View File

@ -1,105 +0,0 @@
import { css } from '@emotion/css';
import { GrafanaTheme2 } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { Box, Card, Icon, IconButton, IconName, useStyles2 } from '@grafana/ui';
import { t } from 'app/core/internationalization';
import { DashboardInteractions } from '../utils/interactions';
import { getDashboardSceneFor } from '../utils/utils';
import { DashboardEditPane } from './DashboardEditPane';
export interface Props {
editPane: DashboardEditPane;
}
interface CardConfig {
icon: IconName;
heading: string;
title: string;
testId: string;
onClick: () => void;
hide?: boolean;
}
export function DashboardAddPane({ editPane }: Props) {
const styles = useStyles2(getStyles);
const dashboard = getDashboardSceneFor(editPane);
const cards: CardConfig[] = [
{
icon: 'graph-bar',
heading: t('dashboard.edit-pane.add.panel.heading', 'Panel'),
title: t('dashboard.edit-pane.add.panel.title', 'A container for visualizations and other content'),
testId: selectors.components.PageToolbar.itemButton('add_visualization'),
onClick: () => dashboard.onCreateNewPanel(),
},
{
icon: 'import',
heading: t('dashboard.edit-pane.add.lib-panel.heading', 'Library panel'),
title: t(
'dashboard.edit-pane.add.lib-panel.title',
'Library panels allow you share and reuse panels between dashboards'
),
testId: selectors.pages.AddDashboard.itemButton('Add new panel from panel library menu item'),
onClick: () => {
dashboard.onShowAddLibraryPanelDrawer();
DashboardInteractions.toolbarAddButtonClicked({ item: 'add_library_panel' });
},
},
{
icon: 'list-ul',
heading: t('dashboard.edit-pane.add.row.heading', 'Row'),
title: t('dashboard.edit-pane.add.row.title', 'A group of panels with an optional header'),
testId: selectors.components.PageToolbar.itemButton('add_row'),
onClick: () => dashboard.onCreateNewRow(),
},
{
icon: 'layer-group',
heading: t('dashboard.edit-pane.add.tab.heading', 'Tab'),
title: t('dashboard.edit-pane.add.tab.title', 'Break up your dashboard into different horizontal tabs'),
testId: selectors.components.PageToolbar.itemButton('add_tab'),
onClick: () => dashboard.onCreateNewTab(),
},
];
return (
<>
<div className={styles.header}>
<IconButton
name="arrow-left"
size="lg"
onClick={() => editPane.toggleAddPane()}
aria-label={t('dashboard-scene.dashboard-add-pane.aria-label-close-add-pane', 'Close add pane')}
/>
{t('dashboard.edit-pane.add.title', 'Add element')}
</div>
<Box display="flex" direction="column" gap={1} padding={2}>
{cards.map(({ icon, heading, title, testId, onClick, hide }) =>
hide ? null : (
<Card onClick={onClick} data-testid={testId} title={title} key={title}>
<Card.Heading>{heading}</Card.Heading>
<Card.Figure className={styles.figure}>
<Icon name={icon} size="xl" />
</Card.Figure>
</Card>
)
)}
</Box>
</>
);
}
const getStyles = (theme: GrafanaTheme2) => ({
header: css({
display: 'flex',
alignItems: 'center',
padding: theme.spacing(1, 2),
gap: theme.spacing(1),
borderBottom: `1px solid ${theme.colors.border.weak}`,
}),
figure: css({
pointerEvents: 'none',
}),
});

21
public/app/features/dashboard-scene/edit-pane/DashboardEditPane.tsx
View File

@ -21,7 +21,6 @@ import { t, Trans } from 'app/core/internationalization';
import { isInCloneChain } from '../utils/clone';
import { getDashboardSceneFor } from '../utils/utils';
import { DashboardAddPane } from './DashboardAddPane';
import { DashboardOutline } from './DashboardOutline';
import { ElementEditPane } from './ElementEditPane';
import { ElementSelection } from './ElementSelection';
@ -31,7 +30,6 @@ import { useEditableElement } from './useEditableElement';
export interface DashboardEditPaneState extends SceneObjectState {
selection?: ElementSelection;
selectionContext: ElementSelectionContextState;
showAddPane?: boolean;
}
export class DashboardEditPane extends SceneObjectBase<DashboardEditPaneState> {
@ -103,10 +101,6 @@ export class DashboardEditPane extends SceneObjectBase<DashboardEditPaneState> {
return this.state.selection?.getSelection();
}
public toggleAddPane() {
this.setState({ showAddPane: !this.state.showAddPane });
}
public selectObject(obj: SceneObject, id: string, { multi, force }: ElementSelectionOnSelectOptions = {}) {
if (!force) {
if (multi) {
@ -132,7 +126,6 @@ export class DashboardEditPane extends SceneObjectBase<DashboardEditPaneState> {
...this.state.selectionContext,
selected,
},
showAddPane: false,
});
}
@ -173,10 +166,6 @@ export class DashboardEditPane extends SceneObjectBase<DashboardEditPaneState> {
private newObjectAddedToCanvas(obj: SceneObject) {
this.selectObject(obj, obj.state.key!);
if (this.state.showAddPane) {
this.setState({ showAddPane: false });
}
}
}
@ -206,7 +195,7 @@ export function DashboardEditPaneRenderer({ editPane, isCollapsed, onToggleColla
}
}, [editPane, isCollapsed]);
const { selection, showAddPane } = useSceneObjectState(editPane, { shouldActivateOrKeepAlive: true });
const { selection } = useSceneObjectState(editPane, { shouldActivateOrKeepAlive: true });
const styles = useStyles2(getStyles);
const editableElement = useEditableElement(selection, editPane);
const selectedObject = selection?.getFirstObject();
@ -266,14 +255,6 @@ export function DashboardEditPaneRenderer({ editPane, isCollapsed, onToggleColla
splitter.secondaryProps.style.minHeight = 'unset';
}
if (showAddPane) {
return (
<div className={styles.wrapper}>
<DashboardAddPane editPane={editPane} />
</div>
);
}
return (
<div className={styles.wrapper}>
<div {...splitter.containerProps}>

56
public/app/features/dashboard-scene/scene/new-toolbar/actions/DashboardAddButton.tsx
View File

@ -1,21 +1,55 @@
import { selectors } from '@grafana/e2e-selectors';
import { Button } from '@grafana/ui';
import { Button, Dropdown, Menu } from '@grafana/ui';
import { t, Trans } from 'app/core/internationalization';
import { DashboardInteractions } from '../../../utils/interactions';
import { ToolbarActionProps } from '../types';
export function DashboardAddButton({ dashboard }: ToolbarActionProps) {
return (
<Button
tooltip={t('dashboard.toolbar.add-new.tooltip', 'Add panels and other elements')}
icon="plus"
onClick={() => dashboard.state.editPane.toggleAddPane()}
variant="primary"
size="sm"
fill="outline"
data-testid={selectors.components.PageToolbar.itemButton('Add button')}
<Dropdown
overlay={
<Menu>
<Menu.Item
icon="graph-bar"
label={t('dashboard.toolbar.add-new.menu.panel', 'Panel')}
testId={selectors.components.PageToolbar.itemButton('add_visualization')}
onClick={() => dashboard.onCreateNewPanel()}
/>
<Menu.Item
icon="import"
label={t('dashboard.toolbar.add-new.menu.lib-panel', 'Library panel')}
testId={selectors.pages.AddDashboard.itemButton('Add new panel from panel library menu item')}
onClick={() => {
dashboard.onShowAddLibraryPanelDrawer();
DashboardInteractions.toolbarAddButtonClicked({ item: 'add_library_panel' });
}}
/>
<Menu.Item
icon="list-ul"
label={t('dashboard.toolbar.add-new.menu.row', 'Row')}
testId={selectors.components.PageToolbar.itemButton('add_row')}
onClick={() => dashboard.onCreateNewRow()}
/>
<Menu.Item
icon="layer-group"
label={t('dashboard.toolbar.add-new.menu.tab', 'Tab')}
testId={selectors.components.PageToolbar.itemButton('add_tab')}
onClick={() => dashboard.onCreateNewTab()}
/>
</Menu>
}
>
<Trans i18nKey="dashboard.toolbar.add">Add</Trans>
</Button>
<Button
tooltip={t('dashboard.toolbar.add-new.button.tooltip', 'Add panels and other elements')}
icon="plus"
variant="primary"
size="sm"
fill="outline"
data-testid={selectors.components.PageToolbar.itemButton('Add button')}
>
<Trans i18nKey="dashboard.toolbar.add-new.button.label">Add</Trans>
</Button>
</Dropdown>
);
}

33
public/locales/en-US/grafana.json
View File

@ -1517,25 +1517,6 @@
}
},
"edit-pane": {
"add": {
"lib-panel": {
"heading": "Library panel",
"title": "Library panels allow you share and reuse panels between dashboards"
},
"panel": {
"heading": "Panel",
"title": "A container for visualizations and other content"
},
"row": {
"heading": "Row",
"title": "A group of panels with an optional header"
},
"tab": {
"heading": "Tab",
"title": "Break up your dashboard into different horizontal tabs"
},
"title": "Add element"
},
"elements": {
"dashboard": "Dashboard",
"objects": "Objects",
@ -1695,7 +1676,16 @@
"toolbar": {
"add": "Add",
"add-new": {
"tooltip": "Add panels and other elements"
"button": {
"label": "Add",
"tooltip": "Add panels and other elements"
},
"menu": {
"lib-panel": "Library panel",
"panel": "Panel",
"row": "Row",
"tab": "Tab"
}
},
"alert-rules": "Alert rules",
"back-to-dashboard": "Back to dashboard",
@ -1904,9 +1894,6 @@
"custom-options": "Custom options",
"selection-options": "Selection options"
},
"dashboard-add-pane": {
"aria-label-close-add-pane": "Close add pane"
},
"dashboard-edit-pane-renderer": {
"outline": "Outline"
},