fix(views): duplicate POST requests to /api/view/... caused by two independent fetch paths for each section:

src/components/HomepageRedirect.tsx

@@ -17,8 +17,8 @@ import {
   UUID_REGEX
 } from "./dashboardViewConstants";
 
-const SingleView = React.lazy(
-  () => import("../pages/views/components/SingleView")
+const ViewContainer = React.lazy(
+  () => import("../pages/views/components/ViewContainer")
 );
 
 async function resolveViewId(value: string): Promise<string | undefined> {
@@ -59,7 +59,7 @@ export function HomepageRedirect() {
   if (resolvedViewId) {
     return (
       <Suspense fallback={<FullPageSkeletonLoader />}>
-        <SingleView id={resolvedViewId} />
+        <ViewContainer id={resolvedViewId} />
       </Suspense>
     );
   }

src/components/__tests__/HomepageRedirect.unit.test.tsx

@@ -20,7 +20,7 @@ jest.mock("../../api/services/views", () => ({
   getViewIdByNamespaceAndName: jest.fn()
 }));
 
-jest.mock("../../pages/views/components/SingleView", () => ({
+jest.mock("../../pages/views/components/ViewContainer", () => ({
   __esModule: true,
   default: ({ id }: { id: string }) => (
     <div data-testid="single-view" data-view-id={id}>

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

@@ -486,8 +486,23 @@ export interface ViewResult {
   panels?: PanelResult[];
   columnOptions?: Record<string, ColumnFilterOptions>;
   variables?: ViewVariable[];
+
+  /**
+   * Card display configuration for tabular data.
+   *
+   * This controls presentation (e.g. card layout/default mode) and does not
+   * contain primary result data by itself.
+   */
   card?: DisplayCard;
+
+  /**
+   * Table display configuration (e.g. default sort and page size).
+   *
+   * This controls presentation/query defaults and does not contain primary
+   * result data by itself.
+   */
   table?: DisplayTable;
+
   requestFingerprint: string;
   sections?: ViewSection[];
 }

src/pages/config/details/ConfigDetailsViewPage.tsx

@@ -2,7 +2,7 @@ import { ConfigDetailsTabs } from "@flanksource-ui/components/Configs/ConfigDeta
 import { useParams } from "react-router-dom";
 import { Loading } from "@flanksource-ui/ui/Loading";
 import { useViewData } from "@flanksource-ui/pages/views/hooks/useViewData";
-import ViewWithSections from "@flanksource-ui/pages/views/components/ViewWithSections";
+import ViewContent from "@flanksource-ui/pages/views/components/ViewContent";
 import { ErrorViewer } from "@flanksource-ui/components/ErrorViewer";
 
 export function ConfigDetailsViewPage() {
@@ -17,6 +17,7 @@ export function ConfigDetailsViewPage() {
     error,
     aggregatedVariables,
     currentVariables,
+    sectionData,
     handleForceRefresh
   } = useViewData({
     viewId: viewId!,
@@ -42,8 +43,9 @@ export function ConfigDetailsViewPage() {
             <ErrorViewer error={error} className="max-w-3xl" />
           </div>
         ) : viewResult ? (
-          <ViewWithSections
+          <ViewContent
             viewResult={viewResult}
+            sectionData={sectionData}
             aggregatedVariables={aggregatedVariables}
             currentVariables={currentVariables}
             hideVariables

src/pages/views/ViewPage.tsx

@@ -6,7 +6,7 @@ import {
   getViewIdByName
 } from "../../api/services/views";
 
-const SingleView = React.lazy(() => import("./components/SingleView"));
+const ViewContainer = React.lazy(() => import("./components/ViewContainer"));
 
 /**
  * ViewPage supports the following routes:
@@ -102,7 +102,7 @@ export function ViewPage() {
         </div>
       }
     >
-      <SingleView id={viewId} />
+      <ViewContainer id={viewId} />
     </Suspense>
   );
 }

src/pages/views/components/SingleView.tsx → src/pages/views/components/ViewContainer.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import Age from "../../../ui/Age/Age";
 import ViewLayout from "./ViewLayout";
-import ViewWithSections from "./ViewWithSections";
+import ViewContent from "./ViewContent";
 import { useViewData } from "../hooks/useViewData";
 import { ErrorViewer } from "@flanksource-ui/components/ErrorViewer";
 import {
@@ -12,18 +12,19 @@ import {
   DialogTitle
 } from "@flanksource-ui/components/ui/dialog";
 
-interface SingleViewProps {
+interface ViewContainerProps {
   id: string;
 }
 
-const SingleView: React.FC<SingleViewProps> = ({ id }) => {
+const ViewContainer: React.FC<ViewContainerProps> = ({ id }) => {
   const {
     viewResult,
     isLoading,
     isFetching,
     error,
     aggregatedVariables,
     currentVariables,
+    sectionData,
     handleForceRefresh
   } = useViewData({ viewId: id });
   const [refreshErrorOpen, setRefreshErrorOpen] = useState(false);
@@ -115,9 +116,10 @@ const SingleView: React.FC<SingleViewProps> = ({ id }) => {
           )
         }
       >
-        <ViewWithSections
+        <ViewContent
           className="flex h-full w-full flex-1 flex-col overflow-y-auto px-6"
           viewResult={viewResult}
+          sectionData={sectionData}
           aggregatedVariables={aggregatedVariables}
           currentVariables={currentVariables}
         />
@@ -126,4 +128,4 @@ const SingleView: React.FC<SingleViewProps> = ({ id }) => {
   );
 };
 
-export default SingleView;
+export default ViewContainer;

src/pages/views/components/ViewWithSections.tsx → src/pages/views/components/ViewContent.tsx

@@ -2,40 +2,37 @@ import React from "react";
 import ViewSection from "./ViewSection";
 import GlobalFiltersForm from "../../audit-report/components/View/GlobalFiltersForm";
 import GlobalFilters from "../../audit-report/components/View/GlobalFilters";
+import View from "../../audit-report/components/View/View";
 import { VIEW_VAR_PREFIX } from "../constants";
 import type { ViewResult, ViewVariable } from "../../audit-report/types";
+import type { SectionDataEntry } from "../hooks/useAggregatedViewVariables";
 
-interface ViewWithSectionsProps {
+interface ViewContentProps {
   className?: string;
   viewResult: ViewResult;
+  sectionData?: Map<string, SectionDataEntry>;
   aggregatedVariables?: ViewVariable[];
   currentVariables?: Record<string, string>;
   hideVariables?: boolean;
 }
 
-const ViewWithSections: React.FC<ViewWithSectionsProps> = React.memo(
+const ViewContent: React.FC<ViewContentProps> = React.memo(
   ({
     viewResult,
     className,
+    sectionData,
     aggregatedVariables,
     currentVariables,
     hideVariables
   }) => {
-    const { namespace, name, panels, columns } = viewResult;
+    const { panels, columns } = viewResult;
 
-    const isAggregatorView =
-      viewResult.sections &&
-      viewResult.sections.length > 0 &&
-      !panels &&
-      !columns;
+    const hasPrimaryContent =
+      (Array.isArray(panels) && panels.length > 0) ||
+      (Array.isArray(columns) && columns.length > 0);
 
-    const primaryViewSection = {
-      title: viewResult.title || name,
-      viewRef: {
-        namespace: namespace || "",
-        name: name
-      }
-    };
+    const isAggregatorView =
+      Boolean(viewResult.sections?.length) && !hasPrimaryContent;
 
     const showVariables =
       !hideVariables && aggregatedVariables && aggregatedVariables.length > 0;
@@ -56,20 +53,26 @@ const ViewWithSections: React.FC<ViewWithSectionsProps> = React.memo(
 
         {!isAggregatorView && (
           <div className="mt-2">
-            <ViewSection
-              key={`${namespace || "default"}:${name}`}
-              section={primaryViewSection}
+            <View
+              title=""
+              namespace={viewResult.namespace}
+              name={viewResult.name}
+              columns={viewResult.columns}
+              columnOptions={viewResult.columnOptions}
+              panels={viewResult.panels}
+              table={viewResult.table}
+              variables={viewResult.variables}
+              card={viewResult.card}
+              requestFingerprint={viewResult.requestFingerprint}
+              currentVariables={currentVariables}
               hideVariables
-              variables={currentVariables}
-              sectionKeySuffix={`primary-${namespace || "default"}:${name}`}
             />
           </div>
         )}
 
         {viewResult?.sections && viewResult.sections.length > 0 && (
           <>
             {viewResult.sections.map((section, index) => {
-              // Generate a unique key based on section type
               const baseKey = section.viewRef
                 ? `${section.viewRef.namespace || "default"}:${section.viewRef.name}`
                 : section.uiRef?.changes
@@ -78,14 +81,21 @@ const ViewWithSections: React.FC<ViewWithSectionsProps> = React.memo(
                     ? `configs:${section.title}`
                     : `section:${section.title}`;
               const sectionKey = `${baseKey}:${index}`;
+              const viewRefKey = section.viewRef
+                ? `${section.viewRef.namespace || ""}:${section.viewRef.name}`
+                : undefined;
+              const sectionEntry = viewRefKey
+                ? sectionData?.get(viewRefKey)
+                : undefined;
 
               return (
                 <div key={sectionKey} className="mt-4">
                   <ViewSection
                     section={section}
-                    hideVariables
+                    viewData={sectionEntry?.data}
+                    isLoading={sectionEntry?.isLoading}
+                    error={sectionEntry?.error}
                     variables={currentVariables}
-                    sectionKeySuffix={sectionKey}
                   />
                 </div>
               );
@@ -97,4 +107,4 @@ const ViewWithSections: React.FC<ViewWithSectionsProps> = React.memo(
   }
 );
 
-export default ViewWithSections;
+export default ViewContent;