rework stackdriver panel

caraml-dev · Dec 8, 2023 · 6ed1f7e · 6ed1f7e
1 parent ed13ac9
commit 6ed1f7e
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 75 deletions.
diff --git a/api/cmd/api/main.go b/api/cmd/api/main.go
@@ -173,9 +173,9 @@ func main() {
 
 		ModelDeletionEnabled: cfg.FeatureToggleConfig.ModelDeletionConfig.Enabled,
 
-		ImageBuilderCluster:   	cfg.ImageBuilderConfig.ClusterName,
-		ImageBuilderGCPProject:	cfg.ImageBuilderConfig.GcpProject,
-		ImageBuilderNamespace: 	cfg.ImageBuilderConfig.BuildNamespace,
+		ImageBuilderCluster:    cfg.ImageBuilderConfig.ClusterName,
+		ImageBuilderGCPProject: cfg.ImageBuilderConfig.GcpProject,
+		ImageBuilderNamespace:  cfg.ImageBuilderConfig.BuildNamespace,
 	}
 
 	uiHomePage := fmt.Sprintf("/%s", strings.TrimPrefix(cfg.ReactAppConfig.HomePage, "/"))

diff --git a/api/cmd/api/ui_handler.go b/api/cmd/api/ui_handler.go
@@ -23,9 +23,9 @@ type uiEnvHandler struct {
 
 	ModelDeletionEnabled bool `json:"REACT_APP_MODEL_DELETION_ENABLED"`
 
-	ImageBuilderCluster   	string `json:"REACT_APP_IMAGE_BUILDER_CLUSTER"`
-	ImageBuilderGCPProject	string `json:"REACT_APP_IMAGE_BUILDER_GCP_PROJECT"`
-	ImageBuilderNamespace 	string `json:"REACT_APP_IMAGE_BUILDER_NAMESPACE"`
+	ImageBuilderCluster    string `json:"REACT_APP_IMAGE_BUILDER_CLUSTER"`
+	ImageBuilderGCPProject string `json:"REACT_APP_IMAGE_BUILDER_GCP_PROJECT"`
+	ImageBuilderNamespace  string `json:"REACT_APP_IMAGE_BUILDER_NAMESPACE"`
 }
 
 func (h uiEnvHandler) handler(w http.ResponseWriter, r *http.Request) {

diff --git a/ui/src/components/logs/ContainerLogsView.js b/ui/src/components/logs/ContainerLogsView.js
@@ -1,16 +1,13 @@
 import { AuthContext } from "@caraml-dev/ui-lib";
 import {
-  EuiCard,
-  EuiDescriptionList,
-  EuiDescriptionListDescription,
-  EuiDescriptionListTitle,
   EuiEmptyPrompt,
   EuiFlexGroup,
   EuiFlexItem,
   EuiLink,
   EuiLoadingContent,
   EuiPanel,
   EuiSpacer,
+  EuiText,
   EuiTextColor,
   EuiTitle,
 } from "@elastic/eui";
@@ -21,7 +18,6 @@ import { useMerlinApi } from "../../hooks/useMerlinApi";
 import mocks from "../../mocks";
 import { createStackdriverUrl } from "../../utils/createStackdriverUrl";
 import { LogsSearchBar } from "./LogsSearchBar";
-import StackdriverLink from "./StackdriverLink";
 
 const componentOrder = [
   "image_builder",
@@ -125,17 +121,16 @@ export const ContainerLogsView = ({
   };
 
   const [logUrl, setLogUrl] = useState("");
-  const [stackdriverUrl, setStackdriverUrl] = useState("");
-  const [imagebuilderStackdriverUrl, setImagebuilderStackdriverUrl] = useState("");
-
+  const [stackdriverUrls, setStackdriverUrls] = useState({});
   useEffect(
     () => {
       if (projectLoaded) {
         // set image builder url
         let stackdriverQuery = {
-          job_name: project.name + "-" + model.name + "-" + versionId
+          job_name: project.name + "-" + model.name + "-" + versionId,
+          start_time: model.updated_at,
         };
-        setImagebuilderStackdriverUrl(createStackdriverUrl(stackdriverQuery, "image_builder"));
+        setStackdriverUrls({...stackdriverUrls, "image_builder":createStackdriverUrl(stackdriverQuery, "image_builder")});
 
         // update active container
         if (params.component_type !== "") {
@@ -172,9 +167,10 @@ export const ContainerLogsView = ({
               cluster: activeContainers[0].cluster,
               namespace: activeContainers[0].namespace,
               pod_name: pods.join(" OR "),
+              start_time: model.updated_at,
             };
             if (params.component_type !== "image_builder"){
-              setStackdriverUrl(createStackdriverUrl(stackdriverQuery, params.component_type));
+              setStackdriverUrls({...stackdriverUrls, [params.component_type]: createStackdriverUrl(stackdriverQuery,params.component_type)});
             }
           }
         }
@@ -193,19 +189,22 @@ export const ContainerLogsView = ({
       </EuiTitle>
       <EuiSpacer size="s" />
       {
-        imagebuilderStackdriverUrl && (
-          <EuiCard textAlign="left" title="">
-          <EuiDescriptionList 
-          style={{ marginBottom: "8px"}} 
-          titleProps={{ style: { width: "30%", fontSize: '14px'} }}
-          type="column" 
-          >
-          <EuiDescriptionListTitle style={{ width: "30%", fontSize: '14px'}} >Stackdriver Logs</EuiDescriptionListTitle>
-          <EuiDescriptionListDescription>
-            <EuiLink href={imagebuilderStackdriverUrl} target="_blank" external>Image Builder</EuiLink>
-          </EuiDescriptionListDescription>
-          </EuiDescriptionList>
-        </EuiCard>
+        Object.keys(stackdriverUrls).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>
+            </EuiFlexItem>
+              {Object.entries(stackdriverUrls).map(([component,url])=> (
+                <EuiFlexItem style={{marginTop:0, marginBottom:0, paddingLeft:"10px"}} key={component} grow={false}>
+                  <EuiText size="xs" >
+                    <EuiLink href={url} target="_blank" external>{component.replace(new RegExp("_", "g"), " ")}</EuiLink>
+                  </EuiText>
+                </EuiFlexItem>
+              ))}
+            </EuiFlexGroup>
+          </EuiPanel>
         )
       }
       <EuiSpacer size="s" />
@@ -243,15 +242,6 @@ export const ContainerLogsView = ({
                 )}
               />
             </EuiFlexItem>
-            {
-              params.component_type !== "image_builder" && 
-              stackdriverUrl &&
-              (
-                <EuiFlexItem grow={false}>
-                  <StackdriverLink stackdriverUrl={stackdriverUrl} />
-                </EuiFlexItem>
-              )
-            }
           </EuiFlexGroup>
         ) : (
           <EuiEmptyPrompt

diff --git a/ui/src/components/logs/StackdriverLink.js b/ui/src/components/logs/StackdriverLink.js
diff --git a/ui/src/pages/version/components/forms/validation/schema.js b/ui/src/pages/version/components/forms/validation/schema.js
@@ -47,7 +47,7 @@ const resourceRequestSchema = yup.object().shape({
     ),
 });
 
-const imagebuilderRequestSchema = yup.object().shape({
+const imagebuilderRequestSchema = yup.object().nullable().shape({
   cpu_request: yup
   .string()
   .matches(imageBuilderCpuRequestRegex, 'Valid CPU value is required, e.g "2" or "500m"'),
@@ -70,7 +70,7 @@ const environmentVariableSchema = yup.object().shape({
 export const versionEndpointSchema = yup.object().shape({
   environment_name: yup.string().required("Environment is required"),
   resource_request: resourceRequestSchema,
-  image_builder_resource_request : imagebuilderRequestSchema,
+  image_builder_resource_request: imagebuilderRequestSchema,
   env_vars: yup.array(environmentVariableSchema),
 });
 

diff --git a/ui/src/utils/createStackdriverUrl.js b/ui/src/utils/createStackdriverUrl.js
@@ -23,25 +23,27 @@ const stackdriverFilter = query => {
 resource.labels.project_id:${query.gcp_project}
 resource.labels.cluster_name:${query.cluster}
 resource.labels.namespace_name:${query.namespace}
-resource.labels.pod_name:${query.pod_name}`;
+resource.labels.pod_name:${query.pod_name}
+timestamp>"${query.start_time}"
+`;
 };
 
 const stackdriverImageBuilderFilter = query => {
   return `resource.type:"k8s_container"
 resource.labels.project_id:${appConfig.imagebuilder.gcp_project}
 resource.labels.cluster_name:${appConfig.imagebuilder.cluster}
 resource.labels.namespace_name:${appConfig.imagebuilder.namespace}
-labels.k8s-pod/job-name:${query.job_name}`;
+labels.k8s-pod/job-name:${query.job_name}
+timestamp>"${query.start_time}"`;
 }
 
 export const createStackdriverUrl = (query, component) => {
   const advanceFilter = component === "image_builder" ? stackdriverImageBuilderFilter(query, appConfig) : stackdriverFilter(query);
   const url = {
-    interval: "PT1H",
     project: query.gcp_project || appConfig.imagebuilder.gcp_project,
     minLogLevel: 0,
     expandAll: false,
-    advancedFilter: advanceFilter
+    advancedFilter: advanceFilter,
   };
 
   const stackdriverParams = new URLSearchParams(url).toString();