76 lines
2.7 KiB
TypeScript
76 lines
2.7 KiB
TypeScript
import { selectors } from '@grafana/e2e-selectors';
|
|
import { Box, Card, Icon } from '@grafana/ui';
|
|
import { t, Trans } from 'app/core/internationalization';
|
|
|
|
import { DashboardInteractions } from '../utils/interactions';
|
|
import { getDashboardSceneFor } from '../utils/utils';
|
|
|
|
import { DashboardEditPane } from './DashboardEditPane';
|
|
|
|
export interface Props {
|
|
editPane: DashboardEditPane;
|
|
}
|
|
|
|
export function DashboardAddPane({ editPane }: Props) {
|
|
const dashboard = getDashboardSceneFor(editPane);
|
|
|
|
return (
|
|
<Box display={'flex'} direction={'column'} gap={1} padding={2}>
|
|
<Card
|
|
onClick={() => dashboard.onCreateNewPanel()}
|
|
data-testid={selectors.components.PageToolbar.itemButton('add_visualization')}
|
|
title={t('dashboard.toolbar.add-panel-description', 'A container for visualizations and other content')}
|
|
>
|
|
<Card.Heading>
|
|
<Trans i18nKey="dashboard.toolbar.add-panel">Panel</Trans>
|
|
</Card.Heading>
|
|
<Card.Figure>
|
|
<Icon name="graph-bar" size="xl" />
|
|
</Card.Figure>
|
|
</Card>
|
|
<Card
|
|
onClick={() => {
|
|
dashboard.onShowAddLibraryPanelDrawer();
|
|
DashboardInteractions.toolbarAddButtonClicked({ item: 'add_library_panel' });
|
|
}}
|
|
data-testid={selectors.pages.AddDashboard.itemButton('Add new panel from panel library menu item')}
|
|
title={t(
|
|
'dashboard.toolbar.libray-panel-description',
|
|
'Libray panels allow you share and reuse panels between dashboards'
|
|
)}
|
|
>
|
|
<Card.Heading>
|
|
<Trans i18nKey="dashboard.toolbar.add-panel-lib">Import library panel</Trans>
|
|
</Card.Heading>
|
|
<Card.Figure>
|
|
<Icon name="import" size="xl" />
|
|
</Card.Figure>
|
|
</Card>
|
|
<Card
|
|
onClick={() => dashboard.onCreateNewRow()}
|
|
data-testid={selectors.components.PageToolbar.itemButton('add_row')}
|
|
title={t('dashboard.toolbar.row-description', 'A group of panels with an optional header')}
|
|
>
|
|
<Card.Heading>
|
|
<Trans i18nKey="dashboard.toolbar.add-row">Row</Trans>
|
|
</Card.Heading>
|
|
<Card.Figure>
|
|
<Icon name="list-ul" size="xl" />
|
|
</Card.Figure>
|
|
</Card>
|
|
<Card
|
|
onClick={() => dashboard.onCreateNewTab()}
|
|
data-testid={selectors.components.PageToolbar.itemButton('add_tab')}
|
|
title={t('dashboard.toolbar.tabs-description', 'Break up your dashboard into different horizontal tabs')}
|
|
>
|
|
<Card.Heading>
|
|
<Trans i18nKey="dashboard.toolbar.add-tab">Tab</Trans>
|
|
</Card.Heading>
|
|
<Card.Figure>
|
|
<Icon name="layer-group" size="xl" />
|
|
</Card.Figure>
|
|
</Card>
|
|
</Box>
|
|
);
|
|
}
|