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