From c078f56541f94eaf9044b6b74e8ffe45f52935bb Mon Sep 17 00:00:00 2001
From: gabalafou <gabriel@fouasnon.com>
Date: Fri, 9 Feb 2024 14:54:22 -0500
Subject: [PATCH] Add log link next to status message

---
 .../artifacts/components/ArtifactsItem.tsx    |  6 +-
 .../metadata/components/EnvBuilds.tsx         | 55 +++++++++++++++----
 src/utils/helpers/parseArtifactList.ts        | 10 +++-
 test/metadata/EnvBuilds.test.tsx              | 25 +++++++++
 4 files changed, 79 insertions(+), 17 deletions(-)

diff --git a/src/features/artifacts/components/ArtifactsItem.tsx b/src/features/artifacts/components/ArtifactsItem.tsx
index c29b0ce6..34166d88 100644
--- a/src/features/artifacts/components/ArtifactsItem.tsx
+++ b/src/features/artifacts/components/ArtifactsItem.tsx
@@ -6,7 +6,7 @@ import { useTheme } from "@mui/material/styles";
 
 import { Artifact } from "../../../common/models";
 import { PrefContext } from "../../../preferences";
-import { isPathAbsolute } from "../../../utils/helpers";
+import { artifactBaseUrl } from "../../../utils/helpers";
 
 interface IArtifactsProps {
   /**
@@ -17,9 +17,7 @@ interface IArtifactsProps {
 
 export const ArtifactItem = ({ artifact }: IArtifactsProps) => {
   const pref = React.useContext(PrefContext);
-  const url = isPathAbsolute(pref.apiUrl)
-    ? pref.apiUrl
-    : `${window.location.origin}${pref.apiUrl}`;
+  const url = artifactBaseUrl(pref.apiUrl, window.location.origin);
   const route = new URL(artifact.route, url).toString();
   const theme = useTheme();
 
diff --git a/src/features/metadata/components/EnvBuilds.tsx b/src/features/metadata/components/EnvBuilds.tsx
index da85edcc..967cc0c8 100644
--- a/src/features/metadata/components/EnvBuilds.tsx
+++ b/src/features/metadata/components/EnvBuilds.tsx
@@ -4,6 +4,12 @@ import { StyledMetadataItem } from "../../../styles/StyledMetadataItem";
 import { Build as IBuild } from "../../../common/models";
 import { Build } from "../../../features/metadata/components";
 import { buildMapper } from "../../../utils/helpers/buildMapper";
+import Link from "@mui/material/Link";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+import { artifactBaseUrl } from "../../../utils/helpers";
+import { PrefContext } from "../../../preferences";
+import artifactList from "../../../utils/helpers/artifact";
+import { Artifact } from "../../../common/models";
 
 interface IData {
   currentBuildId: number;
@@ -21,6 +27,34 @@ export const EnvBuilds = ({
   const envBuilds = builds.length ? buildMapper(builds, currentBuildId) : [];
   const currentBuild = envBuilds.find(build => build.id === selectedBuildId);
 
+  // If the selected build is a failed build, we will render the link to the build log.
+  let logLink;
+  const showLogLink = currentBuild?.status === "Failed";
+  const logArtifact: Artifact | never = artifactList(currentBuild?.id, [
+    "LOGS"
+  ])[0];
+  if (showLogLink && logArtifact) {
+    const pref = React.useContext(PrefContext);
+    const url = new URL(
+      logArtifact.route,
+      artifactBaseUrl(pref.apiUrl, window.location.origin)
+    );
+    logLink = (
+      <Link
+        href={url.toString()}
+        target="_blank"
+        sx={{
+          display: "inline-flex",
+          verticalAlign: "bottom", // align link (icon plus link text) with non-link text on the same line
+          alignItems: "center" // align icon and text within link
+        }}
+      >
+        <OpenInNewIcon sx={{ mr: 0.5 }} fontSize="inherit" />
+        Log
+      </Link>
+    );
+  }
+
   return (
     <>
       <StyledMetadataItem
@@ -31,7 +65,7 @@ export const EnvBuilds = ({
       >
         {mode === "edit" ? "Change active environment version:" : "Builds:"}
       </StyledMetadataItem>
-      {currentBuild && (
+      {currentBuild ? (
         <>
           <Build builds={envBuilds} selectedBuildId={selectedBuildId} />
           <StyledMetadataItem
@@ -41,17 +75,13 @@ export const EnvBuilds = ({
               fontWeight: 500,
               paddingBottom: "0"
             }}
+            data-testid="build-status"
           >
             Status: {""}
             <Typography component="span" sx={{ fontSize: "13px" }}>
-              {currentBuild.status_info ? (
-                <>
-                  {currentBuild.status} ({currentBuild.status_info})
-                </>
-              ) : (
-                <>{currentBuild.status}</>
-              )}
-              {(currentBuild.status === "Building" ||
+              {currentBuild.status}
+              {currentBuild.status_info && ` (${currentBuild.status_info})`}
+              {((currentBuild.status === "Building" ||
                 currentBuild.status === "Queued") && (
                 <CircularProgress
                   size={10}
@@ -59,12 +89,13 @@ export const EnvBuilds = ({
                     marginLeft: "8px"
                   }}
                 />
-              )}
+              )) ||
+                // If the selected build is a failed build, render the link to the build log.
+                (showLogLink && [". ", logLink])}
             </Typography>
           </StyledMetadataItem>
         </>
-      )}
-      {!currentBuild && (
+      ) : (
         <CircularProgress
           size={20}
           sx={{ marginLeft: "15px", marginTop: "6px", marginBottom: "7px" }}
diff --git a/src/utils/helpers/parseArtifactList.ts b/src/utils/helpers/parseArtifactList.ts
index d8d0fdb6..cd8aa130 100644
--- a/src/utils/helpers/parseArtifactList.ts
+++ b/src/utils/helpers/parseArtifactList.ts
@@ -9,6 +9,14 @@ export const parseArtifacts = (artifact_list: string[] | undefined) => {
   });
 };
 
-export const isPathAbsolute = (path: string) => {
+const isPathAbsolute = (path: string) => {
   return new RegExp("^(?:[a-z]+:)?//", "i").test(path);
 };
+
+export const artifactBaseUrl = (apiUrl: string, baseUrl: string) => {
+  if (isPathAbsolute(apiUrl)) {
+    return apiUrl;
+  } else {
+    return `${baseUrl}${apiUrl}`;
+  }
+};
diff --git a/test/metadata/EnvBuilds.test.tsx b/test/metadata/EnvBuilds.test.tsx
index 5762536b..3f6c8c41 100644
--- a/test/metadata/EnvBuilds.test.tsx
+++ b/test/metadata/EnvBuilds.test.tsx
@@ -24,4 +24,29 @@ describe("<EnvBuilds />", () => {
     const progressBar = component.getByRole("progressbar");
     expect(progressBar).toBeInTheDocument();
   });
+
+  it("should render link to log if selected build failed", () => {
+    const failedBuild = { ...BUILD, status: "FAILED" };
+    const { getByTestId, getByRole } = render(
+      <Provider store={store}>
+        <EnvBuilds selectedBuildId={1} builds={[failedBuild]} />
+      </Provider>
+    );
+    expect(getByRole("link", { name: "Log" })).toBeInTheDocument();
+    expect(getByTestId("build-status")).toHaveTextContent(
+      /^Status: Failed\. Log$/
+    );
+  });
+
+  it("should not render log link for normal build", () => {
+    const { getByTestId, queryByRole } = render(
+      <Provider store={store}>
+        <EnvBuilds selectedBuildId={1} builds={[BUILD]} />
+      </Provider>
+    );
+    expect(queryByRole("link", { name: "Log" })).not.toBeInTheDocument();
+    expect(getByTestId("build-status")).toHaveTextContent(
+      /^Status: Completed$/
+    );
+  });
 });