From 1ed75f97099a0893088538755dcac7e90a52f855 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Tue, 11 Apr 2023 19:19:25 +0200
Subject: [PATCH] PageNotFound: Update design so that it looks better in topnav
 (#66295)

---
 public/app/AppWrapper.tsx                     |   1 -
 .../core/components/ErrorPage/ErrorPage.tsx   | 117 ++++++++++--------
 .../dashboard/containers/DashboardPage.tsx    |   2 +-
 public/app/routes/routes.tsx                  |   2 +-
 4 files changed, 64 insertions(+), 58 deletions(-)

diff --git a/public/app/AppWrapper.tsx b/public/app/AppWrapper.tsx
index 715f1de4645..b126832386e 100644
--- a/public/app/AppWrapper.tsx
+++ b/public/app/AppWrapper.tsx
@@ -62,7 +62,6 @@ export class AppWrapper extends React.Component<AppWrapperProps, AppWrapperState
         path={route.path}
         key={route.path}
         render={(props) => {
-          navigationLogger('AppWrapper', false, 'Rendering route', route, 'with match', props.location);
           // TODO[Router]: test this logic
           if (roles?.length) {
             if (!roles.some((r: string) => contextSrv.hasRole(r))) {
diff --git a/public/app/core/components/ErrorPage/ErrorPage.tsx b/public/app/core/components/ErrorPage/ErrorPage.tsx
index 9324111739a..65d934bd173 100644
--- a/public/app/core/components/ErrorPage/ErrorPage.tsx
+++ b/public/app/core/components/ErrorPage/ErrorPage.tsx
@@ -1,71 +1,78 @@
+import { css } from '@emotion/css';
 import React from 'react';
 
-import { config } from '@grafana/runtime';
-import { Icon } from '@grafana/ui';
+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 navId="not-found">
-      <Page.Contents>
-        <div className="page-container page-body">
-          <div className="panel-container error-container">
-            <div className="error-column graph-box">
-              <div className="error-row">
-                <div className="error-column error-space-between graph-percentage">
-                  <p>100%</p>
-                  <p>80%</p>
-                  <p>60%</p>
-                  <p>40%</p>
-                  <p>20%</p>
-                  <p>0%</p>
-                </div>
-                <div className="error-column image-box">
-                  <img src="public/img/graph404.svg" width="100%" alt="graph" />
-                  <div className="error-row error-space-between">
-                    <p className="graph-text">Then</p>
-                    <p className="graph-text">Now</p>
-                  </div>
-                </div>
-              </div>
+    <Page navId="home" layout={PageLayoutType.Canvas} pageNav={{ text: 'Page not found' }}>
+      <div className={styles.container}>
+        <h1>Page not found</h1>
+        <div className={styles.subtitle}>
+          We could not find the page you are looking for. If the issue persists seek help on the{' '}
+          <a href="https://community.grafana.com" target="_blank" rel="noreferrer" className="error-link">
+            community site.
+          </a>
+        </div>
+
+        <div className={styles.panel}>
+          <div className="error-row">
+            <div className="error-column error-space-between graph-percentage">
+              <p>100%</p>
+              <p>80%</p>
+              <p>60%</p>
+              <p>40%</p>
+              <p>20%</p>
+              <p>0%</p>
             </div>
-            <div className="error-column info-box">
-              <div className="error-row current-box">
-                <p className="current-text">current</p>
-              </div>
-              <div className="error-row" style={{ flex: 1 }}>
-                <Icon name="minus-circle" className="error-minus" />
-                <div className="error-column error-space-between error-full-width">
-                  <div className="error-row error-space-between">
-                    <p>Chances you are on the page you are looking for.</p>
-                    <p className="left-margin">0%</p>
-                  </div>
-                  <div>
-                    <h3>Sorry for the inconvenience</h3>
-                    <p>
-                      Please go back to your{' '}
-                      <a href={config.appSubUrl} className="error-link">
-                        home dashboard
-                      </a>{' '}
-                      and try again.
-                    </p>
-                    <p>
-                      If the error persists, seek help on the{' '}
-                      <a href="https://community.grafana.com" target="_blank" rel="noreferrer" className="error-link">
-                        community site
-                      </a>
-                      .
-                    </p>
-                  </div>
-                </div>
+            <div className="error-column image-box">
+              <img src="public/img/graph404.svg" width="100%" alt="graph" />
+              <div className="error-row error-space-between">
+                <p className="graph-text">Then</p>
+                <p className="graph-text">Now</p>
               </div>
             </div>
           </div>
+          <div className={styles.legend}>
+            <VizLegendSeriesIcon seriesName="asd" color="green" />
+            <div>Chances you are on the page you are looking for (Last: 0%)</div>
+          </div>
         </div>
-      </Page.Contents>
+      </div>
     </Page>
   );
 }
 
-export default ErrorPage;
+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/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx
index bdb77e9aa8d..d79868e7968 100644
--- a/public/app/features/dashboard/containers/DashboardPage.tsx
+++ b/public/app/features/dashboard/containers/DashboardPage.tsx
@@ -19,7 +19,7 @@ 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 { ErrorPage } from 'app/core/components/ErrorPage/ErrorPage';
 import { Page } from 'app/core/components/Page/Page';
 import { GrafanaContext, GrafanaContextType } from 'app/core/context/GrafanaContext';
 import { createErrorNotification } from 'app/core/copy/appNotification';
diff --git a/public/app/routes/routes.tsx b/public/app/routes/routes.tsx
index 1e452d773fd..f9b3e6ed981 100644
--- a/public/app/routes/routes.tsx
+++ b/public/app/routes/routes.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Redirect } from 'react-router-dom';
 
 import { NavLandingPage } from 'app/core/components/AppChrome/NavLandingPage';
-import ErrorPage from 'app/core/components/ErrorPage/ErrorPage';
+import { ErrorPage } from 'app/core/components/ErrorPage/ErrorPage';
 import { LoginPage } from 'app/core/components/Login/LoginPage';
 import config from 'app/core/config';
 import { contextSrv } from 'app/core/services/context_srv';