IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

QueryGroup: More efficient way to scroll to bottom when adding new queries (#48399)

Browse Source
This commit is contained in:
Torkel Ödegaard 2022-04-28 20:07:36 +02:00 committed by GitHub
parent 4551f05994
commit 5a9aad3e86
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
public/app/features/query/components/QueryGroup.tsx
View File

@ -12,15 +12,7 @@ import {
} from '@grafana/data'; } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors'; import { selectors } from '@grafana/e2e-selectors';
import { DataSourcePicker, getDataSourceSrv } from '@grafana/runtime'; import { DataSourcePicker, getDataSourceSrv } from '@grafana/runtime';
import { import { Button, CustomScrollbar, HorizontalGroup, InlineFormLabel, Modal, stylesFactory } from '@grafana/ui';
Button,
CustomScrollbar,
HorizontalGroup,
InlineFormLabel,
Modal,
ScrollbarPosition,
stylesFactory,
} from '@grafana/ui';
import { PluginHelp } from 'app/core/components/PluginHelp/PluginHelp'; import { PluginHelp } from 'app/core/components/PluginHelp/PluginHelp';
import config from 'app/core/config'; import config from 'app/core/config';
import { backendSrv } from 'app/core/services/backend_srv'; import { backendSrv } from 'app/core/services/backend_srv';
@ -52,10 +44,10 @@ interface State {
isLoadingHelp: boolean; isLoadingHelp: boolean;
isPickerOpen: boolean; isPickerOpen: boolean;
isAddingMixed: boolean; isAddingMixed: boolean;
scrollTop: number;
data: PanelData; data: PanelData;
isHelpOpen: boolean; isHelpOpen: boolean;
defaultDataSource?: DataSourceApi; defaultDataSource?: DataSourceApi;
scrollElement?: HTMLDivElement;
} }
export class QueryGroup extends PureComponent<Props, State> { export class QueryGroup extends PureComponent<Props, State> {
@ -69,7 +61,6 @@ export class QueryGroup extends PureComponent<Props, State> {
isPickerOpen: false, isPickerOpen: false,
isAddingMixed: false, isAddingMixed: false,
isHelpOpen: false, isHelpOpen: false,
scrollTop: 0,
queries: [], queries: [],
data: { data: {
state: LoadingState.NotStarted, state: LoadingState.NotStarted,
@ -162,7 +153,11 @@ export class QueryGroup extends PureComponent<Props, State> {
}; };
onScrollBottom = () => { onScrollBottom = () => {
this.setState({ scrollTop: 1000 }); setTimeout(() => {
if (this.state.scrollElement) {
this.state.scrollElement.scrollTo({ top: 10000 });
}
}, 20);
}; };
onUpdateAndRun = (options: QueryGroupOptions) => { onUpdateAndRun = (options: QueryGroupOptions) => {
@ -250,7 +245,7 @@ export class QueryGroup extends PureComponent<Props, State> {
onAddMixedQuery = (datasource: any) => { onAddMixedQuery = (datasource: any) => {
this.onAddQuery({ datasource: datasource.name }); this.onAddQuery({ datasource: datasource.name });
this.setState({ isAddingMixed: false, scrollTop: this.state.scrollTop + 10000 }); this.setState({ isAddingMixed: false });
}; };
onMixedPickerBlur = () => { onMixedPickerBlur = () => {
@ -263,10 +258,6 @@ export class QueryGroup extends PureComponent<Props, State> {
this.onScrollBottom(); this.onScrollBottom();
}; };
setScrollTop = ({ scrollTop }: ScrollbarPosition) => {
this.setState({ scrollTop: scrollTop });
};
onQueriesChange = (queries: DataQuery[]) => { onQueriesChange = (queries: DataQuery[]) => {
this.onChange({ queries }); this.onChange({ queries });
this.setState({ queries }); this.setState({ queries });
@ -348,12 +339,16 @@ export class QueryGroup extends PureComponent<Props, State> {
); );
} }
setScrollRef = (scrollElement: HTMLDivElement): void => {
this.setState({ scrollElement });
};
render() { render() {
const { scrollTop, isHelpOpen, dsSettings } = this.state; const { isHelpOpen, dsSettings } = this.state;
const styles = getStyles(); const styles = getStyles();
return ( return (
<CustomScrollbar autoHeightMin="100%" scrollTop={scrollTop} setScrollTop={this.setScrollTop}> <CustomScrollbar autoHeightMin="100%" scrollRefCallback={this.setScrollRef}>
<div className={styles.innerWrapper}> <div className={styles.innerWrapper}>
{this.renderTopSection(styles)} {this.renderTopSection(styles)}
{dsSettings && ( {dsSettings && (
@ -380,7 +375,6 @@ const getStyles = stylesFactory(() => {
innerWrapper: css` innerWrapper: css`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%;
padding: ${theme.spacing.md}; padding: ${theme.spacing.md};
`, `,
dataSourceRow: css` dataSourceRow: css`