From 1270b87970baeb926fcce64552db5c744ffaf83f Mon Sep 17 00:00:00 2001
From: Mayursinh Sarvaiya <marvinduff97@gmail.com>
Date: Sun, 3 Oct 2021 18:35:16 +0530
Subject: [PATCH] chore(ui): debounce effect in timerange query (#9359)

* 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>
---
 .../react-app/src/pages/graph/Panel.test.tsx   |  3 ++-
 web/ui/react-app/src/pages/graph/Panel.tsx     | 18 +++++++++++-------
 web/ui/react-app/src/utils/index.ts            | 13 +++++++++++++
 3 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/web/ui/react-app/src/pages/graph/Panel.test.tsx b/web/ui/react-app/src/pages/graph/Panel.test.tsx
index e3d2bfb11..2d702b6fb 100644
--- a/web/ui/react-app/src/pages/graph/Panel.test.tsx
+++ b/web/ui/react-app/src/pages/graph/Panel.test.tsx
@@ -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);
     });
   });
 });
diff --git a/web/ui/react-app/src/pages/graph/Panel.tsx b/web/ui/react-app/src/pages/graph/Panel.tsx
index a7de9f342..1dca06ad0 100644
--- a/web/ui/react-app/src/pages/graph/Panel.tsx
+++ b/web/ui/react-app/src/pages/graph/Panel.tsx
@@ -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();
     }
   }
diff --git a/web/ui/react-app/src/utils/index.ts b/web/ui/react-app/src/utils/index.ts
index b01ce840e..ca714970f 100644
--- a/web/ui/react-app/src/utils/index.ts
+++ b/web/ui/react-app/src/utils/index.ts
@@ -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);
+  };
+}