1import React, { PureComponent } from 'react';
2import { connect, MapStateToProps } from 'react-redux';
3import { NavModel } from '@grafana/data';
4import { config } from '@grafana/runtime';
5import { Icon } from '@grafana/ui';
6import Page from '../Page/Page';
7import { getNavModel } from 'app/core/selectors/navModel';
8import { StoreState } from 'app/types';
9
10interface ConnectedProps {
11  navModel: NavModel;
12}
13
14interface OwnProps {}
15
16type Props = ConnectedProps;
17
18export class ErrorPage extends PureComponent<Props> {
19  render() {
20    const { navModel } = this.props;
21    return (
22      <Page navModel={navModel}>
23        <Page.Contents>
24          <div className="page-container page-body">
25            <div className="panel-container error-container">
26              <div className="error-column graph-box">
27                <div className="error-row">
28                  <div className="error-column error-space-between graph-percentage">
29                    <p>100%</p>
30                    <p>80%</p>
31                    <p>60%</p>
32                    <p>40%</p>
33                    <p>20%</p>
34                    <p>0%</p>
35                  </div>
36                  <div className="error-column image-box">
37                    <img src="public/img/graph404.svg" width="100%" alt="graph" />
38                    <div className="error-row error-space-between">
39                      <p className="graph-text">Then</p>
40                      <p className="graph-text">Now</p>
41                    </div>
42                  </div>
43                </div>
44              </div>
45              <div className="error-column info-box">
46                <div className="error-row current-box">
47                  <p className="current-text">current</p>
48                </div>
49                <div className="error-row" style={{ flex: 1 }}>
50                  <Icon name="minus-circle" className="error-minus" />
51                  <div className="error-column error-space-between error-full-width">
52                    <div className="error-row error-space-between">
53                      <p>Chances you are on the page you are looking for.</p>
54                      <p className="left-margin">0%</p>
55                    </div>
56                    <div>
57                      <h3>Sorry for the inconvenience</h3>
58                      <p>
59                        Please go back to your{' '}
60                        <a href={config.appSubUrl} className="error-link">
61                          home dashboard
62                        </a>{' '}
63                        and try again.
64                      </p>
65                      <p>
66                        If the error persists, seek help on the{' '}
67                        <a href="https://community.grafana.com" target="_blank" rel="noreferrer" className="error-link">
68                          community site
69                        </a>
70                        .
71                      </p>
72                    </div>
73                  </div>
74                </div>
75              </div>
76            </div>
77          </div>
78        </Page.Contents>
79      </Page>
80    );
81  }
82}
83
84const mapStateToProps: MapStateToProps<ConnectedProps, OwnProps, StoreState> = (state) => {
85  return {
86    navModel: getNavModel(state.navIndex, 'not-found'),
87  };
88};
89
90export default connect(mapStateToProps)(ErrorPage);
91