IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-09 23:16:16 -06:00
Code Issues Packages Projects Releases Wiki Activity

Dashboards: Add "import dashboard" to empty dashboard landing page (#74018)

Browse Source
This commit is contained in:
Ivan Ortega Alba 2023-09-01 10:11:32 +02:00 committed by GitHub
parent eade49f333
commit 8113707dc8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 94 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
public/app/features/dashboard/dashgrid/DashboardEmpty.test.tsx
View File

@ -6,7 +6,7 @@ import { defaultDashboard } from '@grafana/schema';
import config from 'app/core/config';
import { createDashboardModelFixture } from '../state/__fixtures__/dashboardFixtures';
import { onCreateNewPanel, onCreateNewRow, onAddLibraryPanel } from '../utils/dashboard';
import { onCreateNewPanel, onImportDashboard, onAddLibraryPanel } from '../utils/dashboard';
import DashboardEmpty, { Props } from './DashboardEmpty';
@ -27,7 +27,7 @@ jest.mock('@grafana/runtime', () => ({
jest.mock('app/features/dashboard/utils/dashboard', () => ({
onCreateNewPanel: jest.fn(),
onCreateNewRow: jest.fn(),
onImportDashboard: jest.fn(),
onAddLibraryPanel: jest.fn(),
}));
@ -56,16 +56,16 @@ it('renders with all buttons enabled when canCreate is true', () => {
setup();
expect(screen.getByRole('button', { name: 'Add visualization' })).not.toBeDisabled();
expect(screen.getByRole('button', { name: 'Add row' })).not.toBeDisabled();
expect(screen.getByRole('button', { name: 'Import library panel' })).not.toBeDisabled();
expect(screen.getByRole('button', { name: 'Import dashboard' })).not.toBeDisabled();
expect(screen.getByRole('button', { name: 'Add library panel' })).not.toBeDisabled();
});
it('renders with all buttons disabled when canCreate is false', () => {
setup({ canCreate: false });
expect(screen.getByRole('button', { name: 'Add visualization' })).toBeDisabled();
expect(screen.getByRole('button', { name: 'Add row' })).toBeDisabled();
expect(screen.getByRole('button', { name: 'Import library panel' })).toBeDisabled();
expect(screen.getByRole('button', { name: 'Import dashboard' })).toBeDisabled();
expect(screen.getByRole('button', { name: 'Add library panel' })).toBeDisabled();
});
it('creates new visualization when clicked Add visualization', () => {
@ -80,23 +80,22 @@ it('creates new visualization when clicked Add visualization', () => {
expect(onCreateNewPanel).toHaveBeenCalled();
});
it('creates new row when clicked Add row', () => {
it('open import dashboard when clicked Import dashboard', () => {
setup();
act(() => {
fireEvent.click(screen.getByRole('button', { name: 'Add row' }));
fireEvent.click(screen.getByRole('button', { name: 'Import dashboard' }));
});
expect(reportInteraction).toHaveBeenCalledWith('dashboards_emptydashboard_clicked', { item: 'add_row' });
expect(locationService.partial).not.toHaveBeenCalled();
expect(onCreateNewRow).toHaveBeenCalled();
expect(reportInteraction).toHaveBeenCalledWith('dashboards_emptydashboard_clicked', { item: 'import_dashboard' });
expect(onImportDashboard).toHaveBeenCalled();
});
it('adds a library panel when clicked Import library panel', () => {
it('adds a library panel when clicked Add library panel', () => {
setup();
act(() => {
fireEvent.click(screen.getByRole('button', { name: 'Import library panel' }));
fireEvent.click(screen.getByRole('button', { name: 'Add library panel' }));
});
expect(reportInteraction).toHaveBeenCalledWith('dashboards_emptydashboard_clicked', { item: 'import_from_library' });
@ -108,8 +107,8 @@ it('renders page without Add Widget button when feature flag is disabled', () =>
setup();
expect(screen.getByRole('button', { name: 'Add visualization' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Add row' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Import library panel' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Import dashboard' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Add library panel' })).toBeInTheDocument();
expect(screen.queryByRole('button', { name: 'Add widget' })).not.toBeInTheDocument();
});
@ -118,7 +117,7 @@ it('renders page with Add Widget button when feature flag is enabled', () => {
setup();
expect(screen.getByRole('button', { name: 'Add visualization' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Add row' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Import library panel' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Import dashboard' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Add library panel' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Add widget' })).toBeInTheDocument();
});

62
public/app/features/dashboard/dashgrid/DashboardEmpty.tsx
View File

@ -7,7 +7,7 @@ import { config, locationService, reportInteraction } from '@grafana/runtime';
import { Button, useStyles2, Text } from '@grafana/ui';
import { Trans } from 'app/core/internationalization';
import { DashboardModel } from 'app/features/dashboard/state';
import { onAddLibraryPanel, onCreateNewPanel, onCreateNewRow } from 'app/features/dashboard/utils/dashboard';
import { onAddLibraryPanel, onCreateNewPanel, onImportDashboard } from 'app/features/dashboard/utils/dashboard';
import { useDispatch, useSelector } from 'app/types';
import { setInitialDatasource } from '../state/reducers';
@ -83,42 +83,16 @@ const DashboardEmpty = ({ dashboard, canCreate }: Props) => {
</Button>
</div>
)}
<div className={cx(styles.containerBox, styles.centeredContent, styles.rowContainer)}>
<div className={styles.headerSmall}>
<Text element="h3" textAlignment="center" weight="medium">
<Trans i18nKey="dashboard.empty.add-row-header">Add a row</Trans>
</Text>
</div>
<div className={styles.bodySmall}>
<Text element="p" textAlignment="center" color="secondary">
<Trans i18nKey="dashboard.empty.add-row-body">
Group your visualizations into expandable sections.
</Trans>
</Text>
</div>
<Button
icon="plus"
fill="outline"
data-testid={selectors.pages.AddDashboard.itemButton('Create new row button')}
onClick={() => {
reportInteraction('dashboards_emptydashboard_clicked', { item: 'add_row' });
onCreateNewRow(dashboard);
}}
disabled={!canCreate}
>
<Trans i18nKey="dashboard.empty.add-row-button">Add row</Trans>
</Button>
</div>
<div className={cx(styles.containerBox, styles.centeredContent, styles.libraryContainer)}>
<div className={styles.headerSmall}>
<Text element="h3" textAlignment="center" weight="medium">
<Trans i18nKey="dashboard.empty.add-import-header">Import panel</Trans>
<Trans i18nKey="dashboard.empty.add-library-panel-header">Import panel</Trans>
</Text>
</div>
<div className={styles.bodySmall}>
<Text element="p" textAlignment="center" color="secondary">
<Trans i18nKey="dashboard.empty.add-import-body">
Import visualizations that are shared with other dashboards.
<Trans i18nKey="dashboard.empty.add-library-panel-body">
Add visualizations that are shared with other dashboards.
</Trans>
</Text>
</div>
@ -132,7 +106,33 @@ const DashboardEmpty = ({ dashboard, canCreate }: Props) => {
}}
disabled={!canCreate}
>
<Trans i18nKey="dashboard.empty.add-import-button">Import library panel</Trans>
<Trans i18nKey="dashboard.empty.add-library-panel-button">Add library panel</Trans>
</Button>
</div>
<div className={cx(styles.containerBox, styles.centeredContent, styles.rowContainer)}>
<div className={styles.headerSmall}>
<Text element="h3" textAlignment="center" weight="medium">
<Trans i18nKey="dashboard.empty.import-a-dashboard-header">Import a dashboard</Trans>
</Text>
</div>
<div className={styles.bodySmall}>
<Text element="p" textAlignment="center" color="secondary">
<Trans i18nKey="dashboard.empty.import-a-dashboard-body">
Import dashboards from files or <a href="https://grafana.com/grafana/dashboards/">grafana.com</a>.
</Trans>
</Text>
</div>
<Button
icon="upload"
fill="outline"
data-testid={selectors.pages.AddDashboard.itemButton('Import dashboard button')}
onClick={() => {
reportInteraction('dashboards_emptydashboard_clicked', { item: 'import_dashboard' });
onImportDashboard();
}}
disabled={!canCreate}
>
<Trans i18nKey="dashboard.empty.import-dashboard-button">Import dashboard</Trans>
</Button>
</div>
</div>

5
public/app/features/dashboard/utils/dashboard.ts
View File

@ -1,6 +1,7 @@
import { chain, cloneDeep, defaults, find } from 'lodash';
import { PanelPluginMeta } from '@grafana/data';
import { locationService } from '@grafana/runtime';
import config from 'app/core/config';
import { LS_PANEL_COPY_KEY } from 'app/core/constants';
import store from 'app/core/store';
@ -43,6 +44,10 @@ export function onCreateNewRow(dashboard: DashboardModel) {
dashboard.addPanel(newRow);
}
export function onImportDashboard() {
locationService.push('/dashboard/import');
}
export function onAddLibraryPanel(dashboard: DashboardModel) {
const newPanel = {
type: 'add-library-panel',

14
public/locales/de-DE/grafana.json
View File

@ -132,18 +132,18 @@
"widget": ""
},
"empty": {
"add-import-body": "Visualisierungen importieren, die mit anderen Dashboards geteilt werden.",
"add-import-button": "Bibliotheks-Panel importieren",
"add-import-header": "Panel importieren",
"add-row-body": "Gruppieren Sie Ihre Visualisierungen in erweiterbare Abschnitte.",
"add-row-button": "Zeile hinzufügen",
"add-row-header": "Eine Zeile hinzufügen",
"add-library-panel-body": "",
"add-library-panel-button": "",
"add-library-panel-header": "",
"add-visualization-body": "Wählen Sie eine Datenquelle aus und visualisieren und fragen Sie dann Ihre Daten mit Diagrammen, Statistiken und Tabellen ab oder erstellen Sie Listen, Markierungen und andere Widgets.",
"add-visualization-button": "Visualisierung hinzufügen",
"add-visualization-header": "Starten Sie Ihr neues Dashboard, indem Sie eine Visualisierung hinzufügen",
"add-widget-body": "",
"add-widget-button": "",
"add-widget-header": ""
"add-widget-header": "",
"import-a-dashboard-body": "",
"import-a-dashboard-header": "",
"import-dashboard-button": ""
},
"inspect": {
"data-tab": "Daten",

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

@ -132,18 +132,18 @@
"widget": "Widget"
},
"empty": {
"add-import-body": "Import visualizations that are shared with other dashboards.",
"add-import-button": "Import library panel",
"add-import-header": "Import panel",
"add-row-body": "Group your visualizations into expandable sections.",
"add-row-button": "Add row",
"add-row-header": "Add a row",
"add-library-panel-body": "Add visualizations that are shared with other dashboards.",
"add-library-panel-button": "Add library panel",
"add-library-panel-header": "Add a library panel",
"add-visualization-body": "Select a data source and then query and visualize your data with charts, stats and tables or create lists, markdowns and other widgets.",
"add-visualization-button": "Add visualization",
"add-visualization-header": "Start your new dashboard by adding a visualization",
"add-widget-body": "Create lists, markdowns and other widgets",
"add-widget-button": "Add widget",
"add-widget-header": "Add a widget"
"add-widget-header": "Add a widget",
"import-a-dashboard-body": "Import dashboard from file or <1>grafana.com</1>.",
"import-a-dashboard-header": "Import a dashboard",
"import-dashboard-button": "Import dashboard"
},
"inspect": {
"data-tab": "Data",

14
public/locales/es-ES/grafana.json
View File

@ -137,18 +137,18 @@
"widget": ""
},
"empty": {
"add-import-body": "Importar las visualizaciones que se compartan con otros paneles de control.",
"add-import-button": "Importar el panel de la biblioteca",
"add-import-header": "Importar panel",
"add-row-body": "Agrupa tus visualizaciones en secciones ampliables.",
"add-row-button": "Añadir fila",
"add-row-header": "Añadir una fila",
"add-library-panel-body": "",
"add-library-panel-button": "",
"add-library-panel-header": "",
"add-visualization-body": "Selecciona una fuente de datos y luego consulta y visualiza tus datos con gráficos, estadísticas y tablas o cree listas, anotaciones y otros widgets.",
"add-visualization-button": "Añadir visualización",
"add-visualization-header": "Comienza tu nuevo panel de control añadiendo una visualización",
"add-widget-body": "",
"add-widget-button": "",
"add-widget-header": ""
"add-widget-header": "",
"import-a-dashboard-body": "",
"import-a-dashboard-header": "",
"import-dashboard-button": ""
},
"inspect": {
"data-tab": "Datos",

14
public/locales/fr-FR/grafana.json
View File

@ -137,18 +137,18 @@
"widget": ""
},
"empty": {
"add-import-body": "Importer des visualisations partagées avec d'autres tableaux de bord.",
"add-import-button": "Importer un panneau de la bibliothèque",
"add-import-header": "Importer un panneau",
"add-row-body": "Regroupez vos visualisations en sections extensibles.",
"add-row-button": "Ajouter une ligne",
"add-row-header": "Ajouter une ligne",
"add-library-panel-body": "",
"add-library-panel-button": "",
"add-library-panel-header": "",
"add-visualization-body": "Sélectionnez une source de données, puis examinez et visualisez vos données avec des graphiques, des statistiques et des tableaux ou créez des listes, des markdowns et d'autres widgets.",
"add-visualization-button": "Ajouter une visualisation",
"add-visualization-header": "Commencez votre nouveau tableau de bord en ajoutant une visualisation",
"add-widget-body": "",
"add-widget-button": "",
"add-widget-header": ""
"add-widget-header": "",
"import-a-dashboard-body": "",
"import-a-dashboard-header": "",
"import-dashboard-button": ""
},
"inspect": {
"data-tab": "Données",

14
public/locales/pseudo-LOCALE/grafana.json
View File

@ -132,18 +132,18 @@
"widget": "Ŵįđģęŧ"
},
"empty": {
"add-import-body": "Ĩmpőřŧ vįşūäľįžäŧįőʼnş ŧĥäŧ äřę şĥäřęđ ŵįŧĥ őŧĥęř đäşĥþőäřđş.",
"add-import-button": "Ĩmpőřŧ ľįþřäřy päʼnęľ",
"add-import-header": "Ĩmpőřŧ päʼnęľ",
"add-row-body": "Ğřőūp yőūř vįşūäľįžäŧįőʼnş įʼnŧő ęχpäʼnđäþľę şęčŧįőʼnş.",
"add-row-button": "Åđđ řőŵ",
"add-row-header": "Åđđ ä řőŵ",
"add-library-panel-body": "Åđđ vįşūäľįžäŧįőʼnş ŧĥäŧ äřę şĥäřęđ ŵįŧĥ őŧĥęř đäşĥþőäřđş.",
"add-library-panel-button": "Åđđ ľįþřäřy päʼnęľ",
"add-library-panel-header": "Åđđ ä ľįþřäřy päʼnęľ",
"add-visualization-body": "Ŝęľęčŧ ä đäŧä şőūřčę äʼnđ ŧĥęʼn qūęřy äʼnđ vįşūäľįžę yőūř đäŧä ŵįŧĥ čĥäřŧş, şŧäŧş äʼnđ ŧäþľęş őř čřęäŧę ľįşŧş, mäřĸđőŵʼnş äʼnđ őŧĥęř ŵįđģęŧş.",
"add-visualization-button": "Åđđ vįşūäľįžäŧįőʼn",
"add-visualization-header": "Ŝŧäřŧ yőūř ʼnęŵ đäşĥþőäřđ þy äđđįʼnģ ä vįşūäľįžäŧįőʼn",
"add-widget-body": "Cřęäŧę ľįşŧş, mäřĸđőŵʼnş äʼnđ őŧĥęř ŵįđģęŧş",
"add-widget-button": "Åđđ ŵįđģęŧ",
"add-widget-header": "Åđđ ä ŵįđģęŧ"
"add-widget-header": "Åđđ ä ŵįđģęŧ",
"import-a-dashboard-body": "Ĩmpőřŧ đäşĥþőäřđ ƒřőm ƒįľę őř <1>ģřäƒäʼnä.čőm</1>.",
"import-a-dashboard-header": "Ĩmpőřŧ ä đäşĥþőäřđ",
"import-dashboard-button": "Ĩmpőřŧ đäşĥþőäřđ"
},
"inspect": {
"data-tab": "Đäŧä",

14
public/locales/zh-Hans/grafana.json
View File

@ -127,18 +127,18 @@
"widget": ""
},
"empty": {
"add-import-body": "导入与其他仪表板共享的可视化。",
"add-import-button": "导入库面板",
"add-import-header": "导入面板",
"add-row-body": "将您的可视化分组成可扩展部分。",
"add-row-button": "添加行",
"add-row-header": "添加一行",
"add-library-panel-body": "",
"add-library-panel-button": "",
"add-library-panel-header": "",
"add-visualization-body": "选择一个数据源，然后用图表、统计信息和表格查询您的数据以及将其可视化，或创建列表、Markdown 和其他小部件。",
"add-visualization-button": "添加可视化",
"add-visualization-header": "通过添加可视化开始您的新仪表板",
"add-widget-body": "",
"add-widget-button": "",
"add-widget-header": ""
"add-widget-header": "",
"import-a-dashboard-body": "",
"import-a-dashboard-header": "",
"import-dashboard-button": ""
},
"inspect": {
"data-tab": "数据",