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

# Description
There are so many cloud providers out there. This PR is used to add
templating for pod log urls. Instead of relying only on Stackdriver logs
(which is a Google product), we give our users the ability to create
their own log urls. There are some variables that can be used by our
users.
#### Image Builder Log
1. Available Variables
- `cluster_name` (string)
- `namespace_name` (string)
- `job_name` (string)
- `start_time` (string)
- `end_time` (string)
2. Usage
```
# merlin config.yaml

FeatureToggleConfig:
  LogConfig:
    LogImageBuilderURL: https://logviewer.sample.local/logs/viewer?cluster={{cluster_name}}&namespace={{namespace_name}}&job={{job_name}}

# it generates
# https://logviewer.sample.local/logs/viewer?cluster=caraml-cluster&namespace=caraml-namespace&job=job-caraml
```
#### Model Log
1. Available Variables
- `cluster_name` (string)
- `namespace_name` (string)
- `pod_names` (array of {`value`, `is_first`})
- `start_time` (string)
2. Usage
```
# merlin config.yaml

FeatureToggleConfig:
  LogConfig:
    LogModelURL: https://logviewer.sample.local/logs/viewer?cluster={{cluster_name}}&namespace={{namespace_name}}&pods={{#pod_names}}{{#is_first}}{{value}}{{/is_first}}{{^is_first}},{{value}}{{/is_first}}{{/pod_names}}

# it generates
# https://logviewer.sample.local/logs/viewer?cluster=caraml-cluster&namespace=caraml-namespace&pods=pod-1,pod-2,pod-3
```

# Modifications
## BE  
- add `LogImageBuilderURL` and `LogModelURL`  
## FE  
- add mustache templating
- change Stackdriver urls to custom log url with backward compatibility

# Tests
<!-- Besides the existing / updated automated tests, what specific
scenarios should be tested? Consider the backward compatibility of the
changes, whether corner cases are covered, etc. Please describe the
tests and check the ones that have been completed. Eg:
- [x] Deploying new and existing standard models
- [ ] Deploying PyFunc models
-->

# Checklist
- [x] Added PR label
- [ ] Added unit test, integration, and/or e2e tests
- [x] Tested locally
- [ ] Updated documentation
- [ ] Update Swagger spec if the PR introduce API changes
- [ ] Regenerated Golang and Python client if the PR introduces API
changes

# Release Notes
<!--
Does this PR introduce a user-facing change?
If no, just write "NONE" in the release-note block below.
If yes, a release note is required. Enter your extended release note in
the block below.
If the PR requires additional action from users switching to the new
release, include the string "action required".

For more information about release notes, see kubernetes' guide here:
http://git.k8s.io/community/contributors/guide/release-notes.md
-->

```release-note

```

Author: anantadwi13

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);
+}