diff --git a/public/app/features/dashboard/dashgrid/DashboardEmpty.test.tsx b/public/app/features/dashboard/dashgrid/DashboardEmpty.test.tsx index 2aad35b21f1..341a67ba10e 100644 --- a/public/app/features/dashboard/dashgrid/DashboardEmpty.test.tsx +++ b/public/app/features/dashboard/dashgrid/DashboardEmpty.test.tsx @@ -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(); }); diff --git a/public/app/features/dashboard/dashgrid/DashboardEmpty.tsx b/public/app/features/dashboard/dashgrid/DashboardEmpty.tsx index 14bf3a83be3..94a68131af0 100644 --- a/public/app/features/dashboard/dashgrid/DashboardEmpty.tsx +++ b/public/app/features/dashboard/dashgrid/DashboardEmpty.tsx @@ -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) => { )} -
-
- - Add a row - -
-
- - - Group your visualizations into expandable sections. - - -
- -
- Import panel + Import panel
- - Import visualizations that are shared with other dashboards. + + Add visualizations that are shared with other dashboards.
@@ -132,7 +106,33 @@ const DashboardEmpty = ({ dashboard, canCreate }: Props) => { }} disabled={!canCreate} > - Import library panel + Add library panel + +
+
+
+ + Import a dashboard + +
+
+ + + Import dashboards from files or grafana.com. + + +
+
diff --git a/public/app/features/dashboard/utils/dashboard.ts b/public/app/features/dashboard/utils/dashboard.ts index f5768f31b9e..4fd87d68b48 100644 --- a/public/app/features/dashboard/utils/dashboard.ts +++ b/public/app/features/dashboard/utils/dashboard.ts @@ -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', diff --git a/public/locales/de-DE/grafana.json b/public/locales/de-DE/grafana.json index 5393838c870..7551d1351ff 100644 --- a/public/locales/de-DE/grafana.json +++ b/public/locales/de-DE/grafana.json @@ -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", diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json index 531c212a893..6ca81b04713 100644 --- a/public/locales/en-US/grafana.json +++ b/public/locales/en-US/grafana.json @@ -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.", + "import-a-dashboard-header": "Import a dashboard", + "import-dashboard-button": "Import dashboard" }, "inspect": { "data-tab": "Data", diff --git a/public/locales/es-ES/grafana.json b/public/locales/es-ES/grafana.json index c23c82bd237..93c949dbf27 100644 --- a/public/locales/es-ES/grafana.json +++ b/public/locales/es-ES/grafana.json @@ -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", diff --git a/public/locales/fr-FR/grafana.json b/public/locales/fr-FR/grafana.json index 66effb16767..d16f7914fd3 100644 --- a/public/locales/fr-FR/grafana.json +++ b/public/locales/fr-FR/grafana.json @@ -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", diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json index 1d95c43cfcd..86f6cc6db05 100644 --- a/public/locales/pseudo-LOCALE/grafana.json +++ b/public/locales/pseudo-LOCALE/grafana.json @@ -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.", + "import-a-dashboard-header": "Ĩmpőřŧ ä đäşĥþőäřđ", + "import-dashboard-button": "Ĩmpőřŧ đäşĥþőäřđ" }, "inspect": { "data-tab": "Đäŧä", diff --git a/public/locales/zh-Hans/grafana.json b/public/locales/zh-Hans/grafana.json index 68dad58c0a2..9f16c2c6392 100644 --- a/public/locales/zh-Hans/grafana.json +++ b/public/locales/zh-Hans/grafana.json @@ -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": "数据",