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