diff --git a/public/app/core/components/ErrorPage/ErrorPage.tsx b/public/app/core/components/ErrorPage/ErrorPage.tsx deleted file mode 100644 index 65d934bd173..00000000000 --- a/public/app/core/components/ErrorPage/ErrorPage.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { css } from '@emotion/css'; -import React from 'react'; - -import { GrafanaTheme2, PageLayoutType } from '@grafana/data'; -import { useStyles2 } from '@grafana/ui'; -import { VizLegendSeriesIcon } from '@grafana/ui/src/components/VizLegend/VizLegendSeriesIcon'; - -import { Page } from '../Page/Page'; - -export function ErrorPage() { - const styles = useStyles2(getStyles); - - return ( - -
-

Page not found

-
- We could not find the page you are looking for. If the issue persists seek help on the{' '} - - community site. - -
- -
-
-
-

100%

-

80%

-

60%

-

40%

-

20%

-

0%

-
-
- graph -
-

Then

-

Now

-
-
-
-
- -
Chances you are on the page you are looking for (Last: 0%)
-
-
-
- - ); -} - -export function getStyles(theme: GrafanaTheme2) { - return { - container: css({ - display: 'flex', - flexDirection: 'column', - padding: theme.spacing(4), - }), - subtitle: css({ - color: theme.colors.text.secondary, - marginBottom: theme.spacing(2), - }), - panel: css({ - display: 'flex', - flexDirection: 'column', - maxWidth: '874px', - border: `1px solid ${theme.colors.border.weak}`, - borderRadius: theme.shape.borderRadius(), - padding: theme.spacing(2), - background: theme.colors.background.primary, - }), - legend: css({ - display: 'flex', - justifyContent: 'flex-end', - alignItems: 'center', - }), - }; -} diff --git a/public/app/core/components/PageNotFound/EntityNotFound.tsx b/public/app/core/components/PageNotFound/EntityNotFound.tsx new file mode 100644 index 00000000000..4ed5d97f59a --- /dev/null +++ b/public/app/core/components/PageNotFound/EntityNotFound.tsx @@ -0,0 +1,60 @@ +import { css } from '@emotion/css'; +import React from 'react'; + +import { GrafanaTheme2 } from '@grafana/data'; +import { useStyles2, useTheme2 } from '@grafana/ui'; + +export interface Props { + /** + * Defaults to Page + */ + entity?: string; +} + +export function EntityNotFound({ entity = 'Page' }: Props) { + const styles = useStyles2(getStyles); + const theme = useTheme2(); + + return ( +
+

{entity} not found

+
+ We're looking but can't seem to find this {entity.toLowerCase()}. Try returning{' '} + + home + {' '} + or seeking help on the{' '} + + community site. + +
+
+ grot +
+
+ ); +} + +export function getStyles(theme: GrafanaTheme2) { + return { + container: css({ + display: 'flex', + flexDirection: 'column', + padding: theme.spacing(8, 2, 2, 2), + h1: { + textAlign: 'center', + }, + }), + subtitle: css({ + color: theme.colors.text.secondary, + fontSize: theme.typography.h5.fontSize, + padding: theme.spacing(2, 0), + textAlign: 'center', + }), + grot: css({ + maxWidth: '450px', + paddingTop: theme.spacing(8), + margin: '0 auto', + }), + }; +} diff --git a/public/app/core/components/PageNotFound/PageNotFound.tsx b/public/app/core/components/PageNotFound/PageNotFound.tsx new file mode 100644 index 00000000000..7135da5b81d --- /dev/null +++ b/public/app/core/components/PageNotFound/PageNotFound.tsx @@ -0,0 +1,15 @@ +import React from 'react'; + +import { PageLayoutType } from '@grafana/data'; + +import { Page } from '../Page/Page'; + +import { EntityNotFound } from './EntityNotFound'; + +export function PageNotFound() { + return ( + + + + ); +} diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx index d05e2bcac58..0509763a802 100644 --- a/public/app/features/dashboard/containers/DashboardPage.tsx +++ b/public/app/features/dashboard/containers/DashboardPage.tsx @@ -19,8 +19,8 @@ import { selectors } from '@grafana/e2e-selectors'; import { config, locationService } from '@grafana/runtime'; import { Icon, Themeable2, withTheme2 } from '@grafana/ui'; import { notifyApp } from 'app/core/actions'; -import { ErrorPage } from 'app/core/components/ErrorPage/ErrorPage'; import { Page } from 'app/core/components/Page/Page'; +import { EntityNotFound } from 'app/core/components/PageNotFound/EntityNotFound'; import { GrafanaContext, GrafanaContextType } from 'app/core/context/GrafanaContext'; import { createErrorNotification } from 'app/core/copy/appNotification'; import { getKioskMode } from 'app/core/navigation/kiosk'; @@ -429,6 +429,14 @@ export class UnthemedDashboardPage extends PureComponent { 'page-hidden': Boolean(queryParams.editview || editPanel), }); + if (dashboard.meta.dashboardNotFound) { + return ( + + + + ); + } + return ( <> { > {initError && } - {dashboard.meta.dashboardNotFound ? ( - - ) : ( - <> - {showSubMenu && ( -
- -
- )} - {config.featureToggles.editPanelCSVDragAndDrop ? ( - - {({ getRootProps, isDragActive }) => { - const styles = getStyles(this.props.theme, isDragActive); - return ( -
-
-
- -

Create tables from spreadsheets

-
-
- -
- ); - }} - - ) : ( - - )} - {inspectPanel && } - + {showSubMenu && ( +
+ +
)} + {config.featureToggles.editPanelCSVDragAndDrop ? ( + + {({ getRootProps, isDragActive }) => { + const styles = getStyles(this.props.theme, isDragActive); + return ( +
+
+
+ +

Create tables from spreadsheets

+
+
+ +
+ ); + }} + + ) : ( + + )} + {inspectPanel && } {editPanel && ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/grot-404-light.svg b/public/img/grot-404-light.svg new file mode 100644 index 00000000000..2c9ca391204 --- /dev/null +++ b/public/img/grot-404-light.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +