Merge pull request #1592 from flanksource/1561-Failed-to-fetch-checks…

…-data-when-a-health-check-graph-doesnt-return-values 1561-Failed-to-fetch-checks-data-when-a-health-check-graph-doesnt-return-values
flanksource · Jan 4, 2024 · ce2ef7e · ce2ef7e
2 parents 75806d7 + 6e72383
commit ce2ef7e
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 9 deletions.
diff --git a/src/api/query-hooks/health.tsx b/src/api/query-hooks/health.tsx
@@ -22,9 +22,10 @@ export function useGetCheckDetails(checkId?: string) {
   return useQuery({
     queryKey: ["check", "details", checkId],
     queryFn: async () => {
+      console.log("checkId", checkId);
       const res = await getHealthCheckDetails(checkId!);
       return res;
     },
-    enabled: !!checkId
+    enabled: checkId !== undefined
   });
 }
diff --git a/src/api/query-hooks/playbooks.tsx b/src/api/query-hooks/playbooks.tsx
@@ -43,6 +43,11 @@ export function useGetPlaybooksToRun(
     {
       cacheTime: 0,
       staleTime: 0,
+      enabled:
+        // if any of the params are undefined, don't run the query
+        params.check_id !== undefined ||
+        params.component_id !== undefined ||
+        params.config_id !== undefined,
       ...options
     }
   );

diff --git a/src/components/Canary/CanaryPopup/CheckDetails.tsx b/src/components/Canary/CanaryPopup/CheckDetails.tsx
@@ -20,6 +20,7 @@ import { calculateDefaultTimeRangeValue } from "./Utils/calculateDefaultTimeRang
 import { PopupTabs } from "./tabs";
 import { getUptimePercentage } from "./utils";
 import CheckRelationships from "./CheckRelationships";
+import { useSearchParams } from "react-router-dom";
 
 const CanaryStatusChart = React.lazy(() =>
   import("../CanaryStatusChart").then(({ CanaryStatusChart }) => ({
@@ -36,10 +37,15 @@ export function CheckDetails({ check, ...rest }: CheckDetailsProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const statsRef = useRef<HTMLDivElement>(null);
 
-  const timeRange = useMemo(
-    () => calculateDefaultTimeRangeValue(check),
-    [check]
-  );
+  const [searchParams] = useSearchParams({
+    timeRange: calculateDefaultTimeRangeValue(check)
+  });
+
+  const timeRange = useMemo(() => {
+    return (
+      searchParams.get("timeRange") ?? calculateDefaultTimeRangeValue(check)
+    );
+  }, [searchParams, check]);
 
   const { data } = useCanaryGraphQuery(timeRange, check);
 
@@ -145,7 +151,7 @@ export function CheckDetails({ check, ...rest }: CheckDetailsProps) {
               />
             </div>
             <div className="w-full h-52 overflow-visible">
-              <Suspense fallback={<div>Loading..</div>}>
+              <Suspense fallback={<div>Loading...</div>}>
                 <CanaryStatusChart timeRange={timeRange} check={check} />
               </Suspense>
             </div>

diff --git a/src/components/Canary/CanaryStatusChart/index.tsx b/src/components/Canary/CanaryStatusChart/index.tsx
@@ -84,8 +84,8 @@ export function CanaryStatusChart({
     [dateFormatFn]
   );
 
-  // we need to list this up
-  const { data: graphData } = useCanaryGraphQuery(timeRange, check);
+  // we need to lift this up
+  const { data: graphData, isLoading } = useCanaryGraphQuery(timeRange, check);
 
   const data = useMemo(() => (graphData?.status ?? []).reverse(), [graphData]);
 
@@ -94,8 +94,18 @@ export function CanaryStatusChart({
     setDateFormatFn(() => (date: string | Date) => updatedFormat(date));
   }, [timeRange]);
 
+  if (isLoading) {
+    return (
+      <Loading className="flex flex-1 h-full items-center justify-center" />
+    );
+  }
+
   if (!data?.length) {
-    return <Loading />;
+    return (
+      <div className="flex flex-1 h-full items-center justify-center text-gray-500 text-sm">
+        No data available
+      </div>
+    );
   }
 
   return (