IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

PageNotFound: Update design so that it looks better in topnav (#66295)

Browse Source
This commit is contained in:
Torkel Ödegaard 2023-04-11 19:19:25 +02:00 committed by GitHub
parent a9bd3fc334
commit 1ed75f9709
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 64 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/app/AppWrapper.tsx
View File

@ -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))) {

117
public/app/core/components/ErrorPage/ErrorPage.tsx
View File

@ -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',
}),
};
}

2
public/app/features/dashboard/containers/DashboardPage.tsx
View File

@ -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';

2
public/app/routes/routes.tsx
View File

@ -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';