Fix errors filters, sorting and affected endpoints (#1376)

Author: kshmidt-digma

src/components/Errors/GlobalErrorsList/GlobalErrorsFilters/useFiltersOptions.ts

@@ -63,7 +63,7 @@ export const useFiltersOptions = (
         }
       },
       {
-        skip: !isEnabled || !selectedServices || selectedServices.length === 0
+        skip: !isEnabled
       }
     );
 
@@ -78,7 +78,7 @@ export const useFiltersOptions = (
         }
       },
       {
-        skip: !isEnabled || !selectedEndpoints || selectedEndpoints.length === 0
+        skip: !isEnabled
       }
     );
 

src/components/Errors/GlobalErrorsList/index.tsx

@@ -69,7 +69,6 @@ export const GlobalErrorsList = () => {
     setGlobalErrorsSearch,
     setGlobalErrorsSorting,
     setGlobalErrorsPage,
-    resetGlobalErrors,
     resetGlobalErrorsSelectedFilters,
     setGlobalErrorsViewMode,
     setGlobalErrorsLastDays,
@@ -154,10 +153,8 @@ export const GlobalErrorsList = () => {
     !isUndefined(data.dismissedCount) &&
     data.dismissedCount > 0;
 
-  // Cleanup errors store slice on unmount
   useMount(() => {
     return () => {
-      resetGlobalErrors();
       window.clearTimeout(animationDelayTimerId.current);
     };
   });

src/components/Errors/NewErrorCard/index.tsx

@@ -107,7 +107,7 @@ export const NewErrorCard = ({
   useEffect(() => {
     const option = selectedEndpointKey
       ? selectorOptions.find((x) => getEndpointKey(x) === selectedEndpointKey)
-      : undefined;
+      : selectorOptions[0];
 
     setSelectedEndpointKey(option ? getEndpointKey(option) : undefined);
   }, [selectorOptions, selectedEndpointKey]);

src/components/Errors/index.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { useParams } from "react-router";
 import { getFeatureFlagValue } from "../../featureFlags";
+import { useMount } from "../../hooks/useMount";
 import { usePersistence } from "../../hooks/usePersistence";
 import { usePrevious } from "../../hooks/usePrevious";
 import { useConfigSelector } from "../../store/config/useConfigSelector";
@@ -51,8 +52,11 @@ export const Errors = () => {
   const previousErrorDetailsWorkspaceItemsOnly = usePrevious(
     errorDetailsWorkspaceItemsOnly
   );
-  const { setErrorDetailsWorkspaceItemsOnly, setGlobalErrorsSelectedFilters } =
-    useStore.getState();
+  const {
+    setErrorDetailsWorkspaceItemsOnly,
+    setGlobalErrorsSelectedFilters,
+    resetGlobalErrors
+  } = useStore.getState();
   const spanCodeObjectId = scope?.span?.spanCodeObjectId;
   const methodId = scope?.span?.methodId ?? undefined;
   const { goTo } = useHistory();
@@ -127,6 +131,13 @@ export const Errors = () => {
     isErrorDetailsWorkspaceItemsOnlyRehydrated
   ]);
 
+  // Cleanup errors store slice on unmount
+  useMount(() => {
+    return () => {
+      resetGlobalErrors();
+    };
+  });
+
   const handleErrorSelect = (errorId: string) => {
     goTo(errorId);
   };

src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/SpaNPlusOneInsightCard/index.tsx

@@ -65,7 +65,7 @@ export const SpaNPlusOneInsightCard = ({
   useEffect(() => {
     const option = selectedEndpointKey
       ? selectorOptions.find((x) => getEndpointKey(x) === selectedEndpointKey)
-      : undefined;
+      : selectorOptions[0];
 
     setSelectedEndpointKey(option ? getEndpointKey(option) : undefined);
   }, [selectorOptions, selectedEndpointKey]);

src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/SpanEndpointBottleneckInsightCard/index.tsx

@@ -72,7 +72,7 @@ export const SpanEndpointBottleneckInsightCard = ({
   useEffect(() => {
     const newOption = selectedEndpointKey
       ? selectorOptions.find((x) => getEndpointKey(x) === selectedEndpointKey)
-      : undefined;
+      : selectorOptions[0];
 
     setSelectedEndpointKey(newOption ? getEndpointKey(newOption) : undefined);
   }, [selectorOptions, selectedEndpointKey]);