Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Explore: Scroll split panes in Explore independently #32978

Merged
merged 7 commits into from Apr 15, 2021
Merged

Explore: Scroll split panes in Explore independently #32978

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
44a4b46
Change default prometheus to latest and prometheus v1 to prometheus1
ivanahuckova Apr 9, 2021
d18d660
Update README
ivanahuckova Apr 9, 2021
54f1e69
Remove prometheus1 block as not used
ivanahuckova Apr 13, 2021
9fb5d4a
Merge remote-tracking branch 'origin' into ivana/devenv-prometheus
ivanahuckova Apr 13, 2021
d159a19
Explore: Separatae scrolling in split view
ivanahuckova Apr 13, 2021
872b0d1
Merge remote-tracking branch 'origin' into ivana/explore-split-separa…
ivanahuckova Apr 14, 2021
970db76
Update snapshot
ivanahuckova Apr 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 3 additions & 3 deletions public/app/features/explore/Explore.tsx
View file
Open in desktop
Expand Up @@ -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,
Expand Down Expand Up @@ -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 && (
Expand Down Expand Up @@ -376,7 +376,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
</AutoSizer>
</div>
)}
</>
</CustomScrollbar>
);
}
}
Expand Down
20 changes: 9 additions & 11 deletions public/app/features/explore/Wrapper.tsx
View file
Open in desktop
@@ -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';
Expand Down Expand Up @@ -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">
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change highlighting is weird. I just removed <CustomScrollbar/>.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where is CustomScrollbar now then? Without it looks pretty bad in firefox on linux & ubuntu

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is in public/app/features/explore/Explore.tsx (in each individual pane).

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ivanahuckova at the top of the github-diff you can switch "ignore-whitespace: ON", then the diff looks better. i think the reason is that the indent changed for a lot of lines, causing the large visual diff.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! 🙏 I forgot about that. 🙈

<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>
);
}
Expand Down
1 change: 1 addition & 0 deletions public/sass/pages/_explore.scss
View file
Open in desktop
Expand Up @@ -141,6 +141,7 @@
display: flex;
flex: 1 1 auto;
flex-direction: column;
height: 100vh;
}

.explore.explore-live {
Expand Down