diff --git a/ui/dashboard/src/components/dashboards/Card/index.tsx b/ui/dashboard/src/components/dashboards/Card/index.tsx index 5836b97a8..585b95888 100644 --- a/ui/dashboard/src/components/dashboards/Card/index.tsx +++ b/ui/dashboard/src/components/dashboards/Card/index.tsx @@ -21,7 +21,6 @@ import { getTextClasses, getWrapperClasses, } from "../../../utils/card"; -import { isRelativeUrl } from "../../../utils/url"; import { ThemeNames } from "../../../hooks/useTheme"; import { useDashboard } from "../../../hooks/useDashboard"; import { useEffect, useState } from "react"; @@ -173,6 +172,12 @@ const Card = (props: CardProps) => { if (!templateRenderReady || state.loading || !state.href) { return; } + + // We only want to do the interpolated template rendering in live views + if (dataMode !== DashboardDataModeLive) { + return; + } + // const { label, loading, value, ...rest } = state; const renderData = { ...state }; if (props.data && props.data.columns && props.data.rows) { @@ -197,15 +202,7 @@ const Card = (props: CardProps) => { setRenderedHref(null); setRenderError(null); } else if (renderedResults[0].card.result) { - // We only want to render the HREF if it's live, or it's snapshot and absolute - const isRelative = isRelativeUrl( - renderedResults[0].card.result as string - ); - setRenderedHref( - dataMode !== DashboardDataModeLive && isRelative - ? null - : (renderedResults[0].card.result as string) - ); + setRenderedHref(renderedResults[0].card.result as string); setRenderError(null); } else if (renderedResults[0].card.error) { setRenderError(renderedResults[0].card.error as string); @@ -213,7 +210,7 @@ const Card = (props: CardProps) => { } }; doRender(); - }, [renderTemplates, templateRenderReady, state, props.data]); + }, [dataMode, renderTemplates, templateRenderReady, state, props.data]); const card = (
{ + // We only want to do the interpolated template rendering in live views + if (dataMode !== DashboardDataModeLive) { + return; + } + const renderedTemplateObj = rowTemplateData[rowIndex]; if (!renderedTemplateObj) { setHref(null); @@ -142,12 +146,7 @@ const CellValue = ({ } if (renderedTemplateForColumn.result) { // We only want to render the HREF if it's live, or it's snapshot and absolute - const isRelative = isRelativeUrl(renderedTemplateForColumn.result); - setHref( - dataMode !== DashboardDataModeLive && isRelative - ? null - : renderedTemplateForColumn.result - ); + setHref(renderedTemplateForColumn.result); setError(null); } else if (renderedTemplateForColumn.error) { setHref(null); diff --git a/ui/dashboard/src/components/dashboards/graphs/common/useGraph.tsx b/ui/dashboard/src/components/dashboards/graphs/common/useGraph.tsx index 702c71877..86c693633 100644 --- a/ui/dashboard/src/components/dashboards/graphs/common/useGraph.tsx +++ b/ui/dashboard/src/components/dashboards/graphs/common/useGraph.tsx @@ -2,7 +2,14 @@ import difference from "lodash/difference"; import useDeepCompareEffect from "use-deep-compare-effect"; import usePrevious from "../../../../hooks/usePrevious"; import useTemplateRender from "../../../../hooks/useTemplateRender"; -import { createContext, useContext, useEffect, useState } from "react"; +import { + createContext, + ReactNode, + useContext, + useEffect, + useState, +} from "react"; +import { DashboardDataModeLive } from "../../../../types"; import { Edge, Node, useReactFlow } from "reactflow"; import { FoldedNode, RowRenderResult } from "../../common/types"; import { noop } from "../../../../utils/func"; @@ -49,8 +56,9 @@ type CategoryNodeMap = { [category: string]: Node[]; }; -const GraphProvider = ({ children }) => { +const GraphProvider = ({ children }: { children: ReactNode }) => { const { + dataMode, themeContext: { theme }, } = useDashboard(); const { fitView } = useReactFlow(); @@ -71,6 +79,11 @@ const GraphProvider = ({ children }) => { return; } + // We only want to do the interpolated template rendering in live views + if (dataMode !== DashboardDataModeLive) { + return; + } + const doRender = async () => { const nodesWithHrefs = graphNodes.filter( (n) => n.data && !n.data.isFolded && !!n.data.href @@ -106,7 +119,7 @@ const GraphProvider = ({ children }) => { }; doRender(); - }, [graphNodes, renderTemplates, templateRenderReady]); + }, [dataMode, graphNodes, renderTemplates, templateRenderReady]); // When the edges or nodes change, update the layout useEffect(() => {