Explore: Scroll split panes in Explore independently (#32978)

* Change default prometheus to latest and prometheus v1 to prometheus1

* Update README

* Remove prometheus1 block as not used

* Explore: Separatae scrolling in split view

* Update snapshot
This commit is contained in:
Ivana Huckova 2021-04-15 10:44:25 +02:00 committed by GitHub
parent 2ca4f3ecae
commit 501d5fbcc2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 17 additions and 16 deletions

View File

@ -6,7 +6,7 @@ import { connect } from 'react-redux';
import AutoSizer from 'react-virtualized-auto-sizer';
import memoizeOne from 'memoize-one';
import { selectors } from '@grafana/e2e-selectors';
import { ErrorBoundaryAlert, stylesFactory, withTheme } from '@grafana/ui';
import { ErrorBoundaryAlert, stylesFactory, withTheme, CustomScrollbar } from '@grafana/ui';
import {
AbsoluteTimeRange,
DataQuery,
@ -317,7 +317,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
const showQueryInspector = openDrawer === ExploreDrawer.QueryInspector;
return (
<>
<CustomScrollbar autoHeightMin={'100%'}>
<ExploreToolbar exploreId={exploreId} onChangeTime={this.onChangeTime} />
{datasourceMissing ? this.renderEmptyState() : null}
{datasourceInstance && (
@ -376,7 +376,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
</AutoSizer>
</div>
)}
</>
</CustomScrollbar>
);
}
}

View File

@ -1,7 +1,7 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { ExploreId, ExploreQueryParams } from 'app/types/explore';
import { CustomScrollbar, ErrorBoundaryAlert } from '@grafana/ui';
import { ErrorBoundaryAlert } from '@grafana/ui';
import { lastSavedUrl, resetExploreAction, richHistoryUpdatedAction } from './state/main';
import { getRichHistory } from '../../core/utils/richHistory';
import { ExplorePaneContainer } from './ExplorePaneContainer';
@ -31,18 +31,16 @@ export class Wrapper extends Component<WrapperProps> {
return (
<div className="page-scrollbar-wrapper">
<CustomScrollbar autoHeightMin={'100%'}>
<div className="explore-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.left} urlQuery={left} />
<ExplorePaneContainer split={hasSplit} exploreId={ExploreId.right} urlQuery={right} />
</ErrorBoundaryAlert>
{hasSplit && (
<ErrorBoundaryAlert style="page">
<ExplorePaneContainer split={hasSplit} exploreId={ExploreId.right} urlQuery={right} />
</ErrorBoundaryAlert>
)}
</div>
</CustomScrollbar>
)}
</div>
</div>
);
}

View File

@ -1,7 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Explore should render component 1`] = `
<Fragment>
<CustomScrollbar
autoHeightMin="100%"
>
<Connect(UnConnectedExploreToolbar)
exploreId="left"
onChangeTime={[Function]}
@ -38,5 +40,5 @@ exports[`Explore should render component 1`] = `
<Component />
</AutoSizer>
</div>
</Fragment>
</CustomScrollbar>
`;

View File

@ -141,6 +141,7 @@
display: flex;
flex: 1 1 auto;
flex-direction: column;
height: 100vh;
}
.explore.explore-live {