mirror of https://github.com/grafana/grafana
Dynamic Dashboards: Replace add pane with add dropdown (#103301)
Bogdan Matei
2 months ago
committed by
GitHub
parent
c5264e3bfc
commit
c372012abc
@ -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', |
||||
}), |
||||
}); |
||||
@ -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> |
||||
); |
||||
} |
||||
|
||||
Loading…
Reference in new issue