feat(ui): add mustache templating in pod log url (caraml-dev#414)

anantadwi13 · web-flow · commit 8cb11ef2aa9c · 2025-07-25T17:58:57.000+07:00
* feat(ui): add mustache templating in pod log url

* fix(ui): change variables passed to createLogImageBuilderUrl

* fix(ui): refactor constant vars
diff --git a/ui/package.json b/ui/package.json
@@ -17,6 +17,7 @@
     "js-yaml": "^4.1.0",
     "mitt": "^3.0.1",
     "moment": "^2.30.1",
+    "mustache": "^4.2.0",
     "object-assign-deep": "^0.4.0",
     "proper-url-join": "2.1.1",
     "query-string": "^9.0.0",
diff --git a/ui/src/components/pod_logs_viewer/PodLogsViewer.js b/ui/src/components/pod_logs_viewer/PodLogsViewer.js
@@ -18,7 +18,7 @@ export const PodLogsViewer = ({
   query,
   onQueryChange,
   batchSize,
-  stackdriverUrls,
+  podLogUrls,
 }) => {
   const filters = useMemo(
     () => [
@@ -114,15 +114,15 @@ export const PodLogsViewer = ({
   return (
     <>
       {
-        Object.keys(stackdriverUrls).length !== 0 &&
+        Object.keys(podLogUrls).length !== 0 &&
         (
           <>
             <EuiPanel>
               <EuiFlexGroup direction="row" alignItems="center">
                 <EuiFlexItem style={{marginTop:0, marginBottom:0}} grow={false}>
-                  <EuiText  style={{ fontSize: '14px', fontWeight:"bold"}}>Stackdriver Logs</EuiText>
+                  <EuiText  style={{ fontSize: '14px', fontWeight:"bold"}}>Pod Logs</EuiText>
                 </EuiFlexItem>
-                {Object.entries(stackdriverUrls).map(([component,url])=> (
+                {Object.entries(podLogUrls).map(([component,url])=> (
                   <EuiFlexItem style={{marginTop:0, marginBottom:0, paddingLeft:"10px", textTransform: "capitalize"}} key={component} grow={false}>
                     <EuiText size="xs" >
                       <EuiLink href={url} target="_blank" external>{component.replace(new RegExp("_", "g"), " ")}</EuiLink>
diff --git a/ui/src/config.js b/ui/src/config.js
@@ -59,6 +59,12 @@ export const appConfig = {
     batchSize: 500,
     // Default number of tail log entries to be fetched
     defaultTailLines: 1000,
+    urlTemplates: {
+      // Available values `{{cluster_name}}` `{{namespace_name}}` `{{pod_prefix_name}}` `{{start_time}}`
+      turingUrl: "",
+      // Available values `{{cluster_name}}` `{{namespace_name}}` `{{job_name}}` `{{start_time}}` `{{end_time}}`
+      imageBuilderUrl: "",
+    },
   },
   imagebuilder: {
     cluster:  process.env.REACT_APP_IMAGE_BUILDER_CLUSTER,
diff --git a/ui/src/router/details/logs/RouterLogsView.js b/ui/src/router/details/logs/RouterLogsView.js
@@ -9,6 +9,7 @@ import { useLogsEmitter } from "../../../components/pod_logs_viewer/hooks/useLog
 import { createStackdriverUrl } from "../../../utils/createStackdriverUrl";
 import EnsemblersContext from "../../../providers/ensemblers/context";
 import EnvironmentsContext from "../../../providers/environments/context";
+import {createLogImageBuilderUrl, createLogUrl} from "../../../utils/createLogUrl";
 
 const components = [
   {
@@ -27,6 +28,7 @@ const components = [
 
 export const RouterLogsView = ({ router }) => {
   const { appConfig } = useConfig();
+  const { imageBuilderUrl, turingUrl } = appConfig.podLogs.urlTemplates
 
   const { currentProject } = useContext(ProjectsContext);
 
@@ -38,7 +40,7 @@ export const RouterLogsView = ({ router }) => {
   const environment = Object.values(environments)
       .find((value) => value.name === router?.environment_name)
 
-  const [stackdriverUrls, setStackdriverUrls] = useState({});
+  const [podLogUrls, setPodLogUrls] = useState({});
 
   useEffect(() => {
     replaceBreadcrumbs([
@@ -78,54 +80,101 @@ export const RouterLogsView = ({ router }) => {
     () => {
       let urls = {}
       if (
-          appConfig.imagebuilder.cluster &&
-          appConfig.imagebuilder.gcp_project &&
-          appConfig.imagebuilder.namespace &&
+          environment &&
           currentProject
       ) {
-        // set router url
-        urls["router"] = createStackdriverUrl({
-          gcp_project: environment.gcp_project,
-          cluster: environment.cluster,
-          namespace: currentProject.name,
-          pod_name: router.name + "-turing-router-"  + router.config.version,
-          start_time: router.updated_at,
-        }, "router")
-
-        // set enricher url
-        if (router.config.enricher.type === "docker") {
-          urls["enricher"] = createStackdriverUrl({
+        if (turingUrl) {
+          // using new url
+
+          // set router url
+          urls["router"] = createLogUrl(
+              turingUrl,
+              environment.cluster,
+              currentProject.name,
+              router.name + "-turing-router-"  + router.config.version,
+              router.updated_at,
+          )
+
+          // set enricher url
+          if (router.config.enricher.type === "docker") {
+            urls["enricher"] = createLogUrl(
+                turingUrl,
+                environment.cluster,
+                currentProject.name,
+                router.name + "-turing-enricher-"  + router.config.version,
+                router.updated_at,
+            )
+          }
+
+          // set ensembler url
+          if (router.config.ensembler.type === "docker" || router.config.ensembler.type === "pyfunc") {
+            urls["ensembler"] = createLogUrl(
+                turingUrl,
+                environment.cluster,
+                currentProject.name,
+                router.name + "-turing-ensembler-"  + router.config.version,
+                router.updated_at,
+            )
+          }
+        } else {
+          // fallback to old url
+
+          // set router url
+          urls["router"] = createStackdriverUrl({
             gcp_project: environment.gcp_project,
             cluster: environment.cluster,
             namespace: currentProject.name,
-            pod_name: router.name + "-turing-enricher-" + router.config.version,
+            pod_name: router.name + "-turing-router-"  + router.config.version,
             start_time: router.updated_at,
-          }, "enricher")
-        }
-
-        // set ensembler url
-        if (router.config.ensembler.type === "docker" || router.config.ensembler.type === "pyfunc") {
-          urls["ensembler"] = createStackdriverUrl({
-            gcp_project: environment.gcp_project,
-            cluster: environment.cluster,
-            namespace: currentProject.name,
-            pod_name: router.name + "-turing-ensembler-" + router.config.version,
-            start_time: router.updated_at,
-          }, "ensembler")
+          }, "router")
+
+          // set enricher url
+          if (router.config.enricher.type === "docker") {
+            urls["enricher"] = createStackdriverUrl({
+              gcp_project: environment.gcp_project,
+              cluster: environment.cluster,
+              namespace: currentProject.name,
+              pod_name: router.name + "-turing-enricher-" + router.config.version,
+              start_time: router.updated_at,
+            }, "enricher")
+          }
+
+          // set ensembler url
+          if (router.config.ensembler.type === "docker" || router.config.ensembler.type === "pyfunc") {
+            urls["ensembler"] = createStackdriverUrl({
+              gcp_project: environment.gcp_project,
+              cluster: environment.cluster,
+              namespace: currentProject.name,
+              pod_name: router.name + "-turing-ensembler-" + router.config.version,
+              start_time: router.updated_at,
+            }, "ensembler")
+          }
         }
 
         // set image builder url
         if (router.config.ensembler.type === "pyfunc" && ensembler) {
-          urls["ensembler_image_builder"] = createStackdriverUrl({
-            job_name: "service-" + currentProject.name + "-" + ensembler.name,
-            start_time: ensembler.updated_at,
-          }, "ensembler_image_builder")
+          if (imageBuilderUrl) {
+            // using new url
+            urls["ensembler_image_builder"] = createLogImageBuilderUrl(
+                imageBuilderUrl,
+                appConfig.imagebuilder.cluster,
+                appConfig.imagebuilder.namespace,
+                "service-" + currentProject.name + "-" + ensembler.name,
+                ensembler.updated_at,
+            )
+          } else {
+            // fallback to old url
+            urls["ensembler_image_builder"] = createStackdriverUrl({
+              job_name: "service-" + currentProject.name + "-" + ensembler.name,
+              start_time: ensembler.updated_at,
+            }, "ensembler_image_builder")
+          }
         }
 
-        setStackdriverUrls(urls);
+        setPodLogUrls(urls);
       }
     },
-    [currentProject, ensembler, environment, router, appConfig.imagebuilder]
+    [currentProject, ensembler, environment, router, appConfig.imagebuilder, turingUrl, imageBuilderUrl]
   );
 
   return (
@@ -136,7 +185,7 @@ export const RouterLogsView = ({ router }) => {
         query={query}
         onQueryChange={setQuery}
         batchSize={appConfig.podLogs.batchSize}
-        stackdriverUrls={stackdriverUrls}
+        podLogUrls={podLogUrls}
       />
     </ConfigSection>
   );
diff --git a/ui/src/utils/createLogUrl.js b/ui/src/utils/createLogUrl.js
@@ -0,0 +1,26 @@
+import Mustache from "mustache";
+const moment = require("moment");
+
+export const createLogImageBuilderUrl = (template, cluster, namespace, jobName, startTime) => {
+    const endTime = moment(startTime, "YYYY-MM-DDTHH:mm.SSZ").add(1, "hour") // we assume the image builder finished after 1 hour
+    const data = {
+        cluster_name: cluster,
+        namespace_name: namespace,
+        job_name: jobName,
+        start_time: startTime,
+        end_time: endTime.toISOString(),
+    };
+
+    return Mustache.render(template, data);
+}
+
+export const createLogUrl = (template, cluster, namespace, podPrefixName, startTime) => {
+    const data = {
+        cluster_name: cluster,
+        namespace_name: namespace,
+        pod_prefix_name: podPrefixName,
+        start_time: startTime,
+    };
+
+    return Mustache.render(template, data);
+}
diff --git a/ui/yarn.lock b/ui/yarn.lock
@@ -7911,6 +7911,11 @@ multicast-dns@^7.2.5:
     dns-packet "^5.2.2"
     thunky "^1.0.2"
 
+mustache@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/mustache/-/mustache-4.2.0.tgz#e5892324d60a12ec9c2a73359edca52972bf6f64"
+  integrity sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==
+
 mz@^2.7.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
