mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
982624cf51
* Extract logic from ExplorePage to a hook, add a test for the hook; remove ExplorePage test * Remove extracted stuff from ExplorePage * Clean up * Fix minWidth logic
83 lines
3.0 KiB
TypeScript
83 lines
3.0 KiB
TypeScript
import { css } from '@emotion/css';
|
|
import React, { useEffect } from 'react';
|
|
|
|
import { ErrorBoundaryAlert } from '@grafana/ui';
|
|
import { SplitPaneWrapper } from 'app/core/components/SplitPaneWrapper/SplitPaneWrapper';
|
|
import { useGrafana } from 'app/core/context/GrafanaContext';
|
|
import { useNavModel } from 'app/core/hooks/useNavModel';
|
|
import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
|
|
import { useSelector } from 'app/types';
|
|
import { ExploreQueryParams } from 'app/types/explore';
|
|
|
|
import { ExploreActions } from './ExploreActions';
|
|
import { ExplorePaneContainer } from './ExplorePaneContainer';
|
|
import { useExplorePageTitle } from './hooks/useExplorePageTitle';
|
|
import { useSplitSizeUpdater } from './hooks/useSplitSizeUpdater';
|
|
import { useStateSync } from './hooks/useStateSync';
|
|
import { useTimeSrvFix } from './hooks/useTimeSrvFix';
|
|
import { isSplit, selectPanesEntries } from './state/selectors';
|
|
|
|
const MIN_PANE_WIDTH = 200;
|
|
|
|
const styles = {
|
|
pageScrollbarWrapper: css`
|
|
width: 100%;
|
|
flex-grow: 1;
|
|
min-height: 0;
|
|
height: 100%;
|
|
position: relative;
|
|
`,
|
|
};
|
|
|
|
export default function ExplorePage(props: GrafanaRouteComponentProps<{}, ExploreQueryParams>) {
|
|
useTimeSrvFix();
|
|
useStateSync(props.queryParams);
|
|
// We want to set the title according to the URL and not to the state because the URL itself may lag
|
|
// (due to how useStateSync above works) by a few milliseconds.
|
|
// When a URL is pushed to the history, the browser also saves the title of the page and
|
|
// if we were to update the URL on state change, the title would not match the URL.
|
|
// Ultimately the URL is the single source of truth from which state is derived, the page title is not different
|
|
useExplorePageTitle(props.queryParams);
|
|
const { keybindings, chrome } = useGrafana();
|
|
const navModel = useNavModel('explore');
|
|
const { updateSplitSize, widthCalc } = useSplitSizeUpdater(MIN_PANE_WIDTH);
|
|
|
|
const panes = useSelector(selectPanesEntries);
|
|
const hasSplit = useSelector(isSplit);
|
|
|
|
useEffect(() => {
|
|
//This is needed for breadcrumbs and topnav.
|
|
//We should probably abstract this out at some point
|
|
chrome.update({ sectionNav: navModel });
|
|
}, [chrome, navModel]);
|
|
|
|
useEffect(() => {
|
|
keybindings.setupTimeRangeBindings(false);
|
|
}, [keybindings]);
|
|
|
|
return (
|
|
<div className={styles.pageScrollbarWrapper}>
|
|
<ExploreActions />
|
|
|
|
<SplitPaneWrapper
|
|
splitOrientation="vertical"
|
|
paneSize={widthCalc}
|
|
minSize={MIN_PANE_WIDTH}
|
|
maxSize={MIN_PANE_WIDTH * -1}
|
|
primary="second"
|
|
splitVisible={hasSplit}
|
|
paneStyle={{ overflow: 'auto', display: 'flex', flexDirection: 'column' }}
|
|
onDragFinished={(size) => size && updateSplitSize(size)}
|
|
>
|
|
{panes.map(([exploreId]) => {
|
|
return (
|
|
<ErrorBoundaryAlert key={exploreId} style="page">
|
|
<ExplorePaneContainer exploreId={exploreId} />
|
|
</ErrorBoundaryAlert>
|
|
);
|
|
})}
|
|
</SplitPaneWrapper>
|
|
</div>
|
|
);
|
|
}
|