Migrate: Error page (404) (#26010)

* first things

* simple migration and remove angular part

public/app/core/components/ErrorPage/ErrorPage.tsx

@@ -0,0 +1,90 @@
+import React, { PureComponent } from 'react';
+import { connect, MapStateToProps } from 'react-redux';
+import { NavModel } from '@grafana/data';
+import { config } from '@grafana/runtime';
+import { Icon } from '@grafana/ui';
+import Page from '../Page/Page';
+import { getNavModel } from 'app/core/selectors/navModel';
+import { StoreState } from 'app/types';
+
+interface ConnectedProps {
+  navModel: NavModel;
+}
+
+interface OwnProps {}
+
+type Props = ConnectedProps;
+
+export class ErrorPage extends PureComponent<Props> {
+  render() {
+    const { navModel } = this.props;
+    return (
+      <Page navModel={navModel}>
+        <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>
+              </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" className="error-link">
+                          community site
+                        </a>
+                        .
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </Page.Contents>
+      </Page>
+    );
+  }
+}
+
+const mapStateToProps: MapStateToProps<ConnectedProps, OwnProps, StoreState> = state => {
+  return {
+    navModel: getNavModel(state.navIndex, 'not-found'),
+  };
+};
+
+export default connect(mapStateToProps)(ErrorPage);

public/app/core/controllers/all.ts

@@ -1,5 +1,4 @@
 import './invited_ctrl';
 import './signup_ctrl';
 import './reset_password_ctrl';
-import './error_ctrl';
 import './json_editor_ctrl';

public/app/core/controllers/error_ctrl.ts

@@ -1,24 +0,0 @@
-import config from 'app/core/config';
-import coreModule from '../core_module';
-import appEvents from 'app/core/app_events';
-import { CoreEvents } from 'app/types';
-
-export class ErrorCtrl {
-  /** @ngInject */
-  constructor($scope: any, contextSrv: any, navModelSrv: any) {
-    $scope.navModel = navModelSrv.getNotFoundNav();
-    $scope.appSubUrl = config.appSubUrl;
-
-    if (!contextSrv.isSignedIn) {
-      appEvents.emit(CoreEvents.toggleSidemenuHidden);
-    }
-
-    $scope.$on('destroy', () => {
-      if (!contextSrv.isSignedIn) {
-        appEvents.emit(CoreEvents.toggleSidemenuHidden);
-      }
-    });
-  }
-}
-
-coreModule.controller('ErrorCtrl', ErrorCtrl);

public/app/core/reducers/navModel.ts

@@ -1,5 +1,5 @@
 import { AnyAction, createAction } from '@reduxjs/toolkit';
-import { NavIndex, NavModelItem } from '@grafana/data';
+import { NavIndex, NavModel, NavModelItem } from '@grafana/data';
 
 import config from 'app/core/config';
 
@@ -21,6 +21,21 @@ function buildNavIndex(navIndex: NavIndex, children: NavModelItem[], parentItem?
       buildNavIndex(navIndex, node.children, node);
     }
   }
+
+  navIndex['not-found'] = { ...buildWarningNav('Page not found', '404 Error').node };
+}
+
+function buildWarningNav(text: string, subTitle?: string): NavModel {
+  const node = {
+    text,
+    subTitle,
+    icon: 'exclamation-triangle',
+  };
+  return {
+    breadcrumbs: [node],
+    node: node,
+    main: node,
+  };
 }
 
 export const initialState: NavIndex = {};

public/app/partials/error.html

@@ -1,50 +0,0 @@
-<page-header model="navModel"></page-header>
-
-<div class="page-container page-body">
-  <div class="panel-container error-container">
-    <div class="error-column graph-box">
-      <div class="error-row">
-        <div class="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 class="error-column image-box">
-          <img src="public/img/graph404.svg" width="100%" />
-          <div class="error-row error-space-between">
-            <p class="graph-text">Then</p>
-            <p class="graph-text">Now</p>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="error-column info-box">
-      <div class="error-row current-box">
-        <p class="current-text">current</p>
-      </div>
-      <div class="error-row" style="flex: 1">
-        <icon name="'minus-circle'" className="error-minus"></icon>
-        <div class="error-column error-space-between error-full-width">
-          <div class="error-row error-space-between">
-            <p>Chances you are on the page you are looking for.</p>
-            <p class="left-margin">0%</p>
-          </div>
-          <div>
-            <h3>Sorry for the inconvenience</h3>
-            <p>Please go back to your <a href="{{appSubUrl}}/" class="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" class="error-link">community site</a>.
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-    <span class="react-resizable-handle" style="cursor: default"></span>
-  </div>
-</div>
-
-<footer />

public/app/routes/ReactContainer.tsx

@@ -63,7 +63,7 @@ export function reactContainer(
         $rootScope: $rootScope,
         $scope: scope,
         $contextSrv: contextSrv,
-        routeInfo: $route.current.$$route.routeInfo,
+        routeInfo: $route.current.$$route?.routeInfo,
       };
 
       document.body.classList.add('is-react');

public/app/routes/routes.ts

@@ -538,9 +538,11 @@ export function setupAngularRoutes($routeProvider: route.IRouteProvider, $locati
       reloadOnSearch: false,
     })
     .otherwise({
-      templateUrl: 'public/app/partials/error.html',
-      controller: 'ErrorCtrl',
-      reloadOnSearch: false,
+      template: '<react-container />',
+      resolve: {
+        component: () =>
+          SafeDynamicImport(import(/* webpackChunkName: "ErrorPage" */ 'app/core/components/ErrorPage/ErrorPage')),
+      },
     });
 
   applyRouteRegistrationHandlers($routeProvider);