You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
78 lines
2.7 KiB
78 lines
2.7 KiB
import React, { PureComponent } from 'react';
|
|
import { connect, ConnectedProps } from 'react-redux';
|
|
import { ExploreId, ExploreQueryParams } from 'app/types/explore';
|
|
import { ErrorBoundaryAlert } from '@grafana/ui';
|
|
import { lastSavedUrl, resetExploreAction, richHistoryUpdatedAction } from './state/main';
|
|
import { getRichHistory } from '../../core/utils/richHistory';
|
|
import { ExplorePaneContainer } from './ExplorePaneContainer';
|
|
import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
|
|
import { Branding } from '../../core/components/Branding/Branding';
|
|
|
|
import { getNavModel } from '../../core/selectors/navModel';
|
|
import { StoreState } from 'app/types';
|
|
|
|
interface RouteProps extends GrafanaRouteComponentProps<{}, ExploreQueryParams> {}
|
|
interface OwnProps {}
|
|
|
|
const mapStateToProps = (state: StoreState) => {
|
|
return {
|
|
navModel: getNavModel(state.navIndex, 'explore'),
|
|
exploreState: state.explore,
|
|
};
|
|
};
|
|
|
|
const mapDispatchToProps = {
|
|
resetExploreAction,
|
|
richHistoryUpdatedAction,
|
|
};
|
|
|
|
const connector = connect(mapStateToProps, mapDispatchToProps);
|
|
|
|
type Props = OwnProps & RouteProps & ConnectedProps<typeof connector>;
|
|
class WrapperUnconnected extends PureComponent<Props> {
|
|
componentWillUnmount() {
|
|
this.props.resetExploreAction({});
|
|
}
|
|
|
|
componentDidMount() {
|
|
lastSavedUrl.left = undefined;
|
|
lastSavedUrl.right = undefined;
|
|
|
|
const richHistory = getRichHistory();
|
|
this.props.richHistoryUpdatedAction({ richHistory });
|
|
}
|
|
|
|
componentDidUpdate(prevProps: Props) {
|
|
const { left, right } = this.props.queryParams;
|
|
const hasSplit = Boolean(left) && Boolean(right);
|
|
const datasourceTitle = hasSplit
|
|
? `${this.props.exploreState.left.datasourceInstance?.name} | ${this.props.exploreState.right?.datasourceInstance?.name}`
|
|
: `${this.props.exploreState.left.datasourceInstance?.name}`;
|
|
const documentTitle = `${this.props.navModel.main.text} - ${datasourceTitle} - ${Branding.AppTitle}`;
|
|
document.title = documentTitle;
|
|
}
|
|
|
|
render() {
|
|
const { left, right } = this.props.queryParams;
|
|
const hasSplit = Boolean(left) && Boolean(right);
|
|
|
|
return (
|
|
<div className="page-scrollbar-wrapper">
|
|
<div className="explore-wrapper">
|
|
<ErrorBoundaryAlert style="page">
|
|
<ExplorePaneContainer split={hasSplit} exploreId={ExploreId.left} urlQuery={left} />
|
|
</ErrorBoundaryAlert>
|
|
{hasSplit && (
|
|
<ErrorBoundaryAlert style="page">
|
|
<ExplorePaneContainer split={hasSplit} exploreId={ExploreId.right} urlQuery={right} />
|
|
</ErrorBoundaryAlert>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
const Wrapper = connector(WrapperUnconnected);
|
|
|
|
export default Wrapper;
|
|
|