fix: missing variables in view section

src/pages/views/components/ViewSection.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { IoChevronDownOutline } from "react-icons/io5";
 import { getViewDataByNamespace } from "../../../api/services/views";
@@ -12,11 +12,13 @@ import { ErrorViewer } from "@flanksource-ui/components/ErrorViewer";
 interface ViewSectionProps {
   section: Section;
   hideVariables?: boolean;
+  variables?: Record<string, string>;
 }
 
 const ViewSection: React.FC<ViewSectionProps> = ({
   section,
-  hideVariables
+  hideVariables,
+  variables: defaultVariables
 }) => {
   const [isExpanded, setIsExpanded] = useState(true);
   const { namespace, name } = section.viewRef;
@@ -25,7 +27,14 @@ const ViewSection: React.FC<ViewSectionProps> = ({
   // NOTE: Backend uses view variables (template parameters) to partition the rows in the view table.
   // We must remove the global query parameters from the URL params.
   const [viewVarParams] = usePrefixedSearchParams(VIEW_VAR_PREFIX, false);
-  const currentViewVariables = Object.fromEntries(viewVarParams.entries());
+  const paramVariables = useMemo(
+    () => Object.fromEntries(viewVarParams.entries()),
+    [viewVarParams]
+  );
+  const currentViewVariables = useMemo(
+    () => ({ ...(defaultVariables ?? {}), ...paramVariables }),
+    [defaultVariables, paramVariables]
+  );
 
   // Fetch section view data with independent variables
   const {

src/pages/views/components/ViewWithSections.tsx

@@ -59,6 +59,7 @@ const ViewWithSections: React.FC<ViewWithSectionsProps> = ({
             key={`${namespace || "default"}:${name}`}
             section={primaryViewSection}
             hideVariables
+            variables={currentVariables}
           />
         </div>
       )}
@@ -70,7 +71,11 @@ const ViewWithSections: React.FC<ViewWithSectionsProps> = ({
               key={`${section.viewRef.namespace || "default"}:${section.viewRef.name}`}
               className="mt-4"
             >
-              <ViewSection section={section} hideVariables />
+              <ViewSection
+                section={section}
+                hideVariables
+                variables={currentVariables}
+              />
             </div>
           ))}
         </>