diff --git a/src/pages/views/components/ViewSection.tsx b/src/pages/views/components/ViewSection.tsx index ed858ca98..f0b327b8b 100644 --- a/src/pages/views/components/ViewSection.tsx +++ b/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; } const ViewSection: React.FC = ({ section, - hideVariables + hideVariables, + variables: defaultVariables }) => { const [isExpanded, setIsExpanded] = useState(true); const { namespace, name } = section.viewRef; @@ -25,7 +27,14 @@ const ViewSection: React.FC = ({ // 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 { diff --git a/src/pages/views/components/ViewWithSections.tsx b/src/pages/views/components/ViewWithSections.tsx index 68ed3aca5..402bc5482 100644 --- a/src/pages/views/components/ViewWithSections.tsx +++ b/src/pages/views/components/ViewWithSections.tsx @@ -59,6 +59,7 @@ const ViewWithSections: React.FC = ({ key={`${namespace || "default"}:${name}`} section={primaryViewSection} hideVariables + variables={currentVariables} /> )} @@ -70,7 +71,11 @@ const ViewWithSections: React.FC = ({ key={`${section.viewRef.namespace || "default"}:${section.viewRef.name}`} className="mt-4" > - + ))}