feat(ui): add mustache templating in pod log url

api/cmd/api/main.go

@@ -171,6 +171,9 @@ func main() {
 		MonitoringEnabled:              cfg.FeatureToggleConfig.MonitoringConfig.MonitoringEnabled,
 		MonitoringPredictionJobBaseURL: cfg.FeatureToggleConfig.MonitoringConfig.MonitoringJobBaseURL,
 
+		LogImageBuilderURL: cfg.FeatureToggleConfig.LogConfig.LogImageBuilderURL,
+		LogModelURL:        cfg.FeatureToggleConfig.LogConfig.LogModelURL,
+
 		ModelDeletionEnabled: cfg.FeatureToggleConfig.ModelDeletionConfig.Enabled,
 
 		ImageBuilderCluster:    cfg.ImageBuilderConfig.ClusterName,

api/cmd/api/ui_handler.go

@@ -19,6 +19,9 @@ type uiEnvHandler struct {
 	MonitoringEnabled              bool   `json:"REACT_APP_MONITORING_DASHBOARD_ENABLED"`
 	MonitoringPredictionJobBaseURL string `json:"REACT_APP_MONITORING_DASHBOARD_JOB_BASE_URL"`
 
+	LogImageBuilderURL string `json:"REACT_APP_LOG_IMAGE_BUILDER_URL"`
+	LogModelURL        string `json:"REACT_APP_LOG_MODEL_URL"`
+
 	AlertEnabled bool `json:"REACT_APP_ALERT_ENABLED"`
 
 	ModelDeletionEnabled bool `json:"REACT_APP_MODEL_DELETION_ENABLED"`

api/config/config.go

@@ -263,6 +263,7 @@ type FeatureToggleConfig struct {
 	MonitoringConfig    MonitoringConfig
 	AlertConfig         AlertConfig
 	ModelDeletionConfig ModelDeletionConfig
+	LogConfig           LogConfig
 }
 
 type MonitoringConfig struct {
@@ -281,6 +282,11 @@ type ModelDeletionConfig struct {
 	Enabled bool `default:"false"`
 }
 
+type LogConfig struct {
+	LogModelURL        string
+	LogImageBuilderURL string
+}
+
 type GitlabConfig struct {
 	BaseURL             string
 	Token               string

ui/src/components/logs/ContainerLogsView.js

@@ -13,11 +13,12 @@ import {
 } from "@elastic/eui";
 import React, { Fragment, useContext, useEffect, useState } from "react";
 import { LazyLog, ScrollFollow } from "react-lazylog";
-import config from "../../config";
+import config, {appConfig, featureToggleConfig} from "../../config";
 import { useMerlinApi } from "../../hooks/useMerlinApi";
 import mocks from "../../mocks";
-import { createStackdriverUrl } from "../../utils/createStackdriverUrl";
 import { LogsSearchBar } from "./LogsSearchBar";
+import {createLogImageBuilderUrl, createLogModelUrl} from "../../utils/createLogUrl";
+import {createStackdriverUrl} from "../../utils/createStackdriverUrl";
 
 const componentOrder = [
   "image_builder",
@@ -121,22 +122,36 @@ export const ContainerLogsView = ({
   };
 
   const [logUrl, setLogUrl] = useState("");
-  const [stackdriverUrls, setStackdriverUrls] = useState({});
+  const [podLogUrls, setPodLogUrls] = useState({});
   useEffect(
     () => {
       if (projectLoaded) {
         // set image builder url
-        let stackdriverQuery = {
-          job_name: project.name + "-" + model.name + "-" + versionId,
-          start_time: model.updated_at,
-        };
-        setStackdriverUrls({
-          ...stackdriverUrls,
-          image_builder: createStackdriverUrl(
-            stackdriverQuery,
-            "image_builder",
-          ),
-        });
+        if (featureToggleConfig.logImageBuilderURL) {
+          setPodLogUrls({
+            ...podLogUrls,
+            image_builder: createLogImageBuilderUrl(
+              featureToggleConfig.logImageBuilderURL,
+              appConfig.imagebuilder.cluster,
+              appConfig.imagebuilder.namespace,
+              project.name + "-" + model.name + "-" + versionId,
+              model.updated_at,
+            ),
+          });
+        } else {
+          // backward compatible to stackdriver
+          let stackdriverQuery = {
+            job_name: project.name + "-" + model.name + "-" + versionId,
+            start_time: model.updated_at,
+          };
+          setPodLogUrls({
+            ...podLogUrls,
+            image_builder: createStackdriverUrl(
+                stackdriverQuery,
+                "image_builder",
+            ),
+          });
+        }
 
         // update active container
         if (params.component_type !== "") {
@@ -165,24 +180,39 @@ export const ContainerLogsView = ({
 
             const pods = [
               ...new Set(
-                activeContainers.map((container) => `"${container.pod_name}"`),
+                activeContainers.map((container) => `${container.pod_name}`),
               ),
             ];
-            let stackdriverQuery = {
-              gcp_project: activeContainers[0].gcp_project,
-              cluster: activeContainers[0].cluster,
-              namespace: activeContainers[0].namespace,
-              pod_name: pods.join(" OR "),
-              start_time: model.updated_at,
-            };
+
             if (params.component_type !== "image_builder") {
-              setStackdriverUrls({
-                ...stackdriverUrls,
-                [params.component_type]: createStackdriverUrl(
-                  stackdriverQuery,
-                  params.component_type,
-                ),
-              });
+              if (featureToggleConfig.logModelURL) {
+                setPodLogUrls({
+                  ...podLogUrls,
+                  [params.component_type]: createLogModelUrl(
+                    featureToggleConfig.logModelURL,
+                    activeContainers[0].cluster,
+                    activeContainers[0].namespace,
+                    pods,
+                    model.updated_at,
+                  ),
+                });
+              } else {
+                // backward compatible to stackdriver
+                let stackdriverQuery = {
+                  gcp_project: activeContainers[0].gcp_project,
+                  cluster: activeContainers[0].cluster,
+                  namespace: activeContainers[0].namespace,
+                  pod_name: pods.map(pod => `"${pod}"`).join(" OR "),
+                  start_time: model.updated_at,
+                };
+                setPodLogUrls({
+                  ...podLogUrls,
+                  [params.component_type]: createStackdriverUrl(
+                      stackdriverQuery,
+                      params.component_type,
+                  ),
+                });
+              }
             }
           }
         }
@@ -199,7 +229,7 @@ export const ContainerLogsView = ({
           <EuiTextColor color="success">&nbsp; Logs</EuiTextColor>
         </span>
       </EuiTitle>
-      {Object.keys(stackdriverUrls).length !== 0 && (
+      {Object.keys(podLogUrls).length !== 0 && (
         <Fragment>
           <EuiSpacer size="s" />
           <EuiPanel>
@@ -209,10 +239,10 @@ export const ContainerLogsView = ({
                 grow={false}
               >
                 <EuiText style={{ fontSize: "14px", fontWeight: "bold" }}>
-                  Stackdriver Logs
+                  Pod Logs
                 </EuiText>
               </EuiFlexItem>
-              {Object.entries(stackdriverUrls).map(([component, url]) => (
+              {Object.entries(podLogUrls).map(([component, url]) => (
                 <EuiFlexItem
                   style={{
                     marginTop: 0,

ui/src/config.js

@@ -85,6 +85,12 @@ export const featureToggleConfig = {
         "false"
       )
     : false,
+  logImageBuilderURL: getEnv(
+      "REACT_APP_LOG_IMAGE_BUILDER_URL"
+  ),
+  logModelURL: getEnv(
+      "REACT_APP_LOG_MODEL_URL"
+  ),
 };
 
 export const costEstimationConfig = {

ui/src/utils/createLogUrl.js

@@ -0,0 +1,31 @@
+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 createLogModelUrl = (template, cluster, namespace, podNames, startTime) => {
+    const data = {
+        cluster_name: cluster,
+        namespace_name: namespace,
+        pod_names: podNames.map((val, idx) => (
+            {
+                value: val,
+                is_first: idx === 0,
+            }
+        )),
+        start_time: startTime,
+    };
+
+    return Mustache.render(template, data);
+}