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(() => {