From 78c1def776e410622f12f8a6aa859f00d43c5b01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Thu, 25 Jun 2020 15:18:08 +0100
Subject: [PATCH] fix(ui): handle canceled get requests in silence form

---
 ui/src/Components/NavBar/FilterInput/index.js        | 11 +++++++++--
 .../SilenceModal/SilenceMatch/LabelValueInput.js     |  5 +++--
 .../SilenceModal/SilenceMatch/MatchCounter.js        |  2 +-
 ui/src/Hooks/useFetchGet.js                          | 12 +++++++-----
 ui/src/__mocks__/Hooks/useFetchGet.js                |  5 ++++-
 5 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/ui/src/Components/NavBar/FilterInput/index.js b/ui/src/Components/NavBar/FilterInput/index.js
index c29255bef..3cb0c72a7 100644
--- a/ui/src/Components/NavBar/FilterInput/index.js
+++ b/ui/src/Components/NavBar/FilterInput/index.js
@@ -64,7 +64,13 @@ const FilterInput = ({ alertStore, settingsStore }) => {
   const [term, setTerm] = useState("");
   const debouncedSearchTerm = useDebounce(term, 300);
 
-  const { response, error, isLoading, get } = useFetchGet(
+  const {
+    response,
+    error,
+    isLoading,
+    get,
+    cancelGet,
+  } = useFetchGet(
     FormatBackendURI(`autocomplete.json?term=${debouncedSearchTerm}`),
     { autorun: false }
   );
@@ -73,7 +79,8 @@ const FilterInput = ({ alertStore, settingsStore }) => {
     if (debouncedSearchTerm) {
       get();
     }
-  }, [get, debouncedSearchTerm]);
+    return () => cancelGet();
+  }, [get, cancelGet, debouncedSearchTerm]);
 
   useEffect(() => {
     if (error) {
diff --git a/ui/src/Components/SilenceModal/SilenceMatch/LabelValueInput.js b/ui/src/Components/SilenceModal/SilenceMatch/LabelValueInput.js
index f92c51cce..f512ddf8d 100644
--- a/ui/src/Components/SilenceModal/SilenceMatch/LabelValueInput.js
+++ b/ui/src/Components/SilenceModal/SilenceMatch/LabelValueInput.js
@@ -52,7 +52,7 @@ const ValueContainer = ({ children, ...props }) => (
 );
 
 const LabelValueInput = observer(({ silenceFormStore, matcher, isValid }) => {
-  const { response, get } = useFetchGet(
+  const { response, get, cancelGet } = useFetchGet(
     FormatBackendURI(`labelValues.json?name=${matcher.name}`),
     { autorun: false }
   );
@@ -61,7 +61,8 @@ const LabelValueInput = observer(({ silenceFormStore, matcher, isValid }) => {
     if (matcher.name) {
       get();
     }
-  }, [matcher.name, get]);
+    return () => cancelGet();
+  }, [matcher.name, get, cancelGet]);
 
   const context = React.useContext(ThemeContext);
 
diff --git a/ui/src/Components/SilenceModal/SilenceMatch/MatchCounter.js b/ui/src/Components/SilenceModal/SilenceMatch/MatchCounter.js
index 787f3ee1d..1da99abb1 100644
--- a/ui/src/Components/SilenceModal/SilenceMatch/MatchCounter.js
+++ b/ui/src/Components/SilenceModal/SilenceMatch/MatchCounter.js
@@ -45,7 +45,7 @@ const MatchCounter = ({ silenceFormStore, matcher }) => {
               className={isRetrying ? "text-danger" : ""}
             />
           ) : (
-            response.totalAlerts
+            Math.max(response.totalAlerts, 0)
           )}
         </span>
       </TooltipWrapper>
diff --git a/ui/src/Hooks/useFetchGet.js b/ui/src/Hooks/useFetchGet.js
index 8a68cf98b..ed99a1c77 100644
--- a/ui/src/Hooks/useFetchGet.js
+++ b/ui/src/Hooks/useFetchGet.js
@@ -14,6 +14,10 @@ const useFetchGet = (uri, { autorun = true, deps = [] } = {}) => {
   const [retryCount, setRetryCount] = useState(0);
   const isCanceled = useRef(false);
 
+  const cancelGet = useCallback(() => {
+    isCanceled.current = true;
+  }, []);
+
   const get = useCallback(async () => {
     isCanceled.current = false;
 
@@ -72,12 +76,10 @@ const useFetchGet = (uri, { autorun = true, deps = [] } = {}) => {
   useEffect(() => {
     if (autorun) get();
 
-    return () => {
-      isCanceled.current = true;
-    };
-  }, [uri, get, autorun, ...deps]); // eslint-disable-line react-hooks/exhaustive-deps
+    return () => cancelGet();
+  }, [uri, get, cancelGet, autorun, ...deps]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  return { response, error, isLoading, isRetrying, retryCount, get };
+  return { response, error, isLoading, isRetrying, retryCount, get, cancelGet };
 };
 
 export { useFetchGet };
diff --git a/ui/src/__mocks__/Hooks/useFetchGet.js b/ui/src/__mocks__/Hooks/useFetchGet.js
index 4a8fe215e..0de7ac15e 100644
--- a/ui/src/__mocks__/Hooks/useFetchGet.js
+++ b/ui/src/__mocks__/Hooks/useFetchGet.js
@@ -36,6 +36,8 @@ const Mock = (uri, { autorun = true, deps = [] } = {}) => {
   const [isLoading, setIsLoading] = useState(true);
   const [isRetrying] = useState(false);
 
+  const cancelGet = useCallback(() => {}, []);
+
   const get = useCallback(() => {
     MockFetchStats.wasCalled(uri);
 
@@ -95,7 +97,7 @@ const Mock = (uri, { autorun = true, deps = [] } = {}) => {
     if (autorun) get();
     // eslint doesn't like ...deps
     // eslint-disable-next-line
-  }, [uri, get, autorun, ...deps]);
+  }, [uri, get, cancelGet, autorun, ...deps]);
 
   return {
     response:
@@ -115,6 +117,7 @@ const Mock = (uri, { autorun = true, deps = [] } = {}) => {
         ? MockFetchStats.mockedData.isRetrying
         : isRetrying,
     get,
+    cancelGet,
   };
 };