Skip to content

N
nexpie-grafana-theme
Commit 02a46a5d by Peter Holmberg Committed by GitHub
Options

Migrate: Error page (404) (#26010) 

* first things

* simple migration and remove angular part
parent 45bbee2d
Showing with 112 additions and 80 deletions
public/app/core/components/ErrorPage/ErrorPage.tsx 0 → 100644
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
import './invited_ctrl';
import './signup_ctrl';
import './reset_password_ctrl';
import './error_ctrl';
import './json_editor_ctrl';
public/app/core/controllers/error_ctrl.ts deleted 100644 → 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
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 deleted 100644 → 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);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment