Merge branch 'v0.18.x'

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 = (
     <div

ui/dashboard/src/components/dashboards/Table/index.tsx

@@ -28,7 +28,6 @@ import {
   SortAscendingIcon,
   SortDescendingIcon,
 } from "../../../constants/icons";
-import { isRelativeUrl } from "../../../utils/url";
 import { memo, useEffect, useMemo, useState } from "react";
 import { registerComponent } from "../index";
 import { RowRenderResult } from "../common/types";
@@ -128,6 +127,11 @@ const CellValue = ({
 
   // Calculate a link for this cell
   useEffect(() => {
+    // 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);

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