mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2024-12-25 05:34:05 -08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

chore(ui): debounce effect in timerange query (#9359)

Browse source 
* chore(ui): debounce effect in timerange query

Signed-off-by: mayursiinh <marvinduff97@gmail.com>

* chore: private declaration of debounceExecuteQuery

Signed-off-by: mayursiinh <marvinduff97@gmail.com>

* fix: lint issue

Signed-off-by: mayursiinh <marvinduff97@gmail.com>
This commit is contained in:
Mayursinh Sarvaiya 2021-10-03 18:35:16 +05:30 committed by GitHub
parent a069e7ec80
commit 1270b87970
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
web/ui/react-app/src/pages/graph/Panel.test.tsx
View file

@ -151,9 +151,10 @@ describe('Panel', () => {
//change query without executing
panel.setProps({ options: { ...defaultProps.options, expr: newExpr } });
expect(executeQuerySpy).toHaveBeenCalledTimes(0);
const debounceExecuteQuerySpy = jest.spyOn(instance, 'debounceExecuteQuery');
//execute query implicitly with time change
panel.setProps({ options: { ...defaultProps.options, expr: newExpr, endTime: 1575744840 } });
expect(executeQuerySpy).toHaveBeenCalledTimes(1);
expect(debounceExecuteQuerySpy).toHaveBeenCalledTimes(1);
});
});
});

18
web/ui/react-app/src/pages/graph/Panel.tsx
View file

@ -13,6 +13,7 @@ import TimeInput from './TimeInput';
import QueryStatsView, { QueryStats } from './QueryStatsView';
import { QueryParams, ExemplarData } from '../../types/types';
import { API_PATH } from '../../constants/constants';
import { debounce } from '../../utils';
interface PanelProps {
options: PanelOptions;
@ -69,6 +70,7 @@ export const PanelDefaultOptions: PanelOptions = {
class Panel extends Component<PanelProps, PanelState> {
private abortInFlightFetch: (() => void) | null = null;
private debounceExecuteQuery: () => void;
constructor(props: PanelProps) {
super(props);
@ -83,17 +85,19 @@ class Panel extends Component<PanelProps, PanelState> {
stats: null,
exprInputValue: props.options.expr,
};
this.debounceExecuteQuery = debounce(this.executeQuery.bind(this), 250);
}
componentDidUpdate({ options: prevOpts }: PanelProps): void {
const { endTime, range, resolution, showExemplars, type } = this.props.options;
if (
prevOpts.endTime !== endTime ||
prevOpts.range !== range ||
prevOpts.resolution !== resolution ||
prevOpts.type !== type ||
showExemplars !== prevOpts.showExemplars
) {
if (prevOpts.endTime !== endTime || prevOpts.range !== range) {
this.debounceExecuteQuery();
return;
}
if (prevOpts.resolution !== resolution || prevOpts.type !== type || showExemplars !== prevOpts.showExemplars) {
this.executeQuery();
}
}

13
web/ui/react-app/src/utils/index.ts
View file

@ -269,3 +269,16 @@ export const parsePrometheusFloat = (value: string): string | number => {
return Number(value);
}
};
export function debounce<Params extends unknown[]>(
func: (...args: Params) => unknown,
timeout: number
): (...args: Params) => void {
let timer: NodeJS.Timeout;
return (...args: Params) => {
clearTimeout(timer);
timer = setTimeout(() => {
func(...args);
}, timeout);
};
}