1import React, { PureComponent } from 'react';
2import { connect, ConnectedProps } from 'react-redux';
3import { ExploreId, ExploreQueryParams } from 'app/types/explore';
4import { ErrorBoundaryAlert } from '@grafana/ui';
5import { lastSavedUrl, resetExploreAction, richHistoryUpdatedAction } from './state/main';
6import { getRichHistory } from '../../core/utils/richHistory';
7import { ExplorePaneContainer } from './ExplorePaneContainer';
8import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
9import { Branding } from '../../core/components/Branding/Branding';
10
11import { getNavModel } from '../../core/selectors/navModel';
12import { StoreState } from 'app/types';
13
14interface RouteProps extends GrafanaRouteComponentProps<{}, ExploreQueryParams> {}
15interface OwnProps {}
16
17const mapStateToProps = (state: StoreState) => {
18  return {
19    navModel: getNavModel(state.navIndex, 'explore'),
20    exploreState: state.explore,
21  };
22};
23
24const mapDispatchToProps = {
25  resetExploreAction,
26  richHistoryUpdatedAction,
27};
28
29const connector = connect(mapStateToProps, mapDispatchToProps);
30
31type Props = OwnProps & RouteProps & ConnectedProps<typeof connector>;
32class WrapperUnconnected extends PureComponent<Props> {
33  componentWillUnmount() {
34    this.props.resetExploreAction({});
35  }
36
37  componentDidMount() {
38    lastSavedUrl.left = undefined;
39    lastSavedUrl.right = undefined;
40
41    const richHistory = getRichHistory();
42    this.props.richHistoryUpdatedAction({ richHistory });
43  }
44
45  componentDidUpdate(prevProps: Props) {
46    const { left, right } = this.props.queryParams;
47    const hasSplit = Boolean(left) && Boolean(right);
48    const datasourceTitle = hasSplit
49      ? `${this.props.exploreState.left.datasourceInstance?.name} | ${this.props.exploreState.right?.datasourceInstance?.name}`
50      : `${this.props.exploreState.left.datasourceInstance?.name}`;
51    const documentTitle = `${this.props.navModel.main.text} - ${datasourceTitle} - ${Branding.AppTitle}`;
52    document.title = documentTitle;
53  }
54
55  render() {
56    const { left, right } = this.props.queryParams;
57    const hasSplit = Boolean(left) && Boolean(right);
58
59    return (
60      <div className="page-scrollbar-wrapper">
61        <div className="explore-wrapper">
62          <ErrorBoundaryAlert style="page">
63            <ExplorePaneContainer split={hasSplit} exploreId={ExploreId.left} urlQuery={left} />
64          </ErrorBoundaryAlert>
65          {hasSplit && (
66            <ErrorBoundaryAlert style="page">
67              <ExplorePaneContainer split={hasSplit} exploreId={ExploreId.right} urlQuery={right} />
68            </ErrorBoundaryAlert>
69          )}
70        </div>
71      </div>
72    );
73  }
74}
75
76const Wrapper = connector(WrapperUnconnected);
77
78export default Wrapper;
79