fix(ui): handle canceled get requests in silence form

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) {

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);
 

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>

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 };

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,
   };
 };