fix: view error handling

Author: adityathebe

src/pages/audit-report/types/index.ts

@@ -433,6 +433,10 @@ export interface ViewResult {
   namespace?: string;
   name: string;
 
+  refreshStatus?: "cache" | "fresh" | "error";
+  refreshError?: string;
+  responseSource?: "cache" | "fresh";
+
   lastRefreshedAt?: string;
   columns?: ViewColumnDef[];
   rows?: ViewRow[];

src/pages/views/components/SingleView.tsx

@@ -1,9 +1,16 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import Age from "../../../ui/Age/Age";
 import ViewLayout from "./ViewLayout";
 import ViewWithSections from "./ViewWithSections";
 import { useViewData } from "../hooks/useViewData";
 import { ErrorViewer } from "@flanksource-ui/components/ErrorViewer";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from "@flanksource-ui/components/ui/dialog";
 
 interface SingleViewProps {
   id: string;
@@ -19,32 +26,43 @@ const SingleView: React.FC<SingleViewProps> = ({ id }) => {
     currentVariables,
     handleForceRefresh
   } = useViewData({ viewId: id });
+  const [refreshErrorOpen, setRefreshErrorOpen] = useState(false);
 
-  if (isLoading && !viewResult) {
+  const refreshError =
+    viewResult?.refreshStatus === "error" ? viewResult.refreshError : undefined;
+  const isCachedResponse = viewResult?.responseSource === "cache";
+
+  useEffect(() => {
+    if (refreshError && isCachedResponse) {
+      setRefreshErrorOpen(true);
+    }
+  }, [refreshError, isCachedResponse, viewResult?.requestFingerprint]);
+
+  if (error && !viewResult) {
     return (
       <ViewLayout
-        title="View"
+        title="View Error"
         icon="workflow"
         onRefresh={handleForceRefresh}
         centered
       >
-        <div className="text-center">
-          <div className="mx-auto mb-4 h-12 w-12 animate-spin rounded-full border-b-2 border-blue-600"></div>
-          <p className="text-gray-600">Loading view results...</p>
-        </div>
+        <ErrorViewer error={error} className="mx-auto max-w-3xl" />
       </ViewLayout>
     );
   }
 
-  if (error) {
+  if (isLoading && !viewResult) {
     return (
       <ViewLayout
-        title="View Error"
+        title="View"
         icon="workflow"
         onRefresh={handleForceRefresh}
         centered
       >
-        <ErrorViewer error={error} className="mx-auto max-w-3xl" />
+        <div className="text-center">
+          <div className="mx-auto mb-4 h-12 w-12 animate-spin rounded-full border-b-2 border-blue-600"></div>
+          <p className="text-gray-600">Loading view results...</p>
+        </div>
       </ViewLayout>
     );
   }
@@ -68,27 +86,43 @@ const SingleView: React.FC<SingleViewProps> = ({ id }) => {
   const { icon, title, name } = viewResult;
 
   return (
-    <ViewLayout
-      title={title || name}
-      icon={icon || "workflow"}
-      onRefresh={handleForceRefresh}
-      loading={isFetching}
-      extra={
-        viewResult.lastRefreshedAt && (
-          <p className="text-sm text-gray-500">
-            Last refreshed:{" "}
-            <Age from={viewResult.lastRefreshedAt} format="full" />
-          </p>
-        )
-      }
-    >
-      <ViewWithSections
-        className="flex h-full w-full flex-1 flex-col overflow-y-auto px-6"
-        viewResult={viewResult}
-        aggregatedVariables={aggregatedVariables}
-        currentVariables={currentVariables}
-      />
-    </ViewLayout>
+    <>
+      <Dialog open={refreshErrorOpen} onOpenChange={setRefreshErrorOpen}>
+        <DialogContent className="max-w-xl">
+          <DialogHeader>
+            <DialogTitle>View refresh failed</DialogTitle>
+            <DialogDescription>
+              The view failed to refresh. You are seeing cached data from the
+              last successful refresh.
+            </DialogDescription>
+          </DialogHeader>
+          {refreshError ? (
+            <ErrorViewer error={refreshError} className="mt-4" />
+          ) : null}
+        </DialogContent>
+      </Dialog>
+      <ViewLayout
+        title={title || name}
+        icon={icon || "workflow"}
+        onRefresh={handleForceRefresh}
+        loading={isFetching}
+        extra={
+          viewResult.lastRefreshedAt && (
+            <p className="text-sm text-gray-500">
+              Last refreshed:{" "}
+              <Age from={viewResult.lastRefreshedAt} format="full" />
+            </p>
+          )
+        }
+      >
+        <ViewWithSections
+          className="flex h-full w-full flex-1 flex-col overflow-y-auto px-6"
+          viewResult={viewResult}
+          aggregatedVariables={aggregatedVariables}
+          currentVariables={currentVariables}
+        />
+      </ViewLayout>
+    </>
   );
 };
 

src/pages/views/hooks/useViewData.ts

@@ -49,16 +49,18 @@ export function useViewData({
 
   const variables = isDisplayPluginMode ? displayPluginVariables : undefined;
 
+  const viewQueryKey = isDisplayPluginMode
+    ? ["viewDataById", viewId, configId, variables]
+    : ["view-result", viewId];
+
   const {
     data: viewResult,
     isLoading: isLoadingViewResult,
     isFetching: isFetchingViewResult,
     error: viewResultError,
     refetch
   } = useQuery({
-    queryKey: isDisplayPluginMode
-      ? ["viewDataById", viewId, configId, variables]
-      : ["view-result", viewId],
+    queryKey: viewQueryKey,
     queryFn: () => {
       const headers = forceRefreshRef.current
         ? { "cache-control": "max-age=1" }
@@ -120,21 +122,25 @@ export function useViewData({
         : result.data?.name
           ? [{ namespace: result.data.namespace ?? "", name: result.data.name }]
           : [];
+    const currentNamespace = result.data?.namespace ?? viewResult?.namespace;
+    const currentName = result.data?.name ?? viewResult?.name;
+    const refsToInvalidate = sectionsToRefresh.filter(
+      (section) =>
+        !(
+          currentName &&
+          section.name === currentName &&
+          section.namespace === (currentNamespace ?? "")
+        )
+    );
 
     if (isDisplayPluginMode) {
       await queryClient.invalidateQueries({
         queryKey: ["viewDisplayPluginVariables", viewId, configId]
       });
     }
 
-    await queryClient.invalidateQueries({
-      queryKey: isDisplayPluginMode
-        ? ["viewDataById", viewId, configId, variables]
-        : ["view-result", viewId]
-    });
-
     await Promise.all(
-      sectionsToRefresh.flatMap((section) => [
+      refsToInvalidate.flatMap((section) => [
         queryClient.invalidateQueries({
           queryKey: ["view-result", section.namespace, section.name]
         }),