Add component for downloading the static report

Signed-off-by: ibolton336 <ibolton@redhat.com>

client/src/app/api/rest.ts

@@ -348,16 +348,6 @@ export const getApplicationImports = (
     .get(`${APP_IMPORT}?importSummary.id=${importSummaryID}&isValid=${isValid}`)
     .then((response) => response.data);
 
-export const getApplicationAnalysis = (
-  applicationId: number,
-  format: "json" | "yaml"
-): Promise<string> => {
-  const headers = format === "yaml" ? yamlHeaders : jsonHeaders;
-  return axios
-    .get<string>(`${APPLICATIONS}/${applicationId}/analysis`, headers)
-    .then((response) => response.data);
-};
-
 export function getTaskById(id: number, format: "json"): Promise<Task>;
 export function getTaskById(id: number, format: "yaml"): Promise<string>;
 export function getTaskById(

client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer-analysis.tsx

@@ -6,6 +6,11 @@ import {
   Title,
   Tooltip,
   Button,
+  Divider,
+  DescriptionList,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  DescriptionListDescription,
 } from "@patternfly/react-core";
 import {
   CheckCircleIcon,
@@ -23,8 +28,10 @@ import { EmptyTextMessage } from "@app/components/EmptyTextMessage";
 import { useFetchFacts } from "@app/queries/facts";
 import { ApplicationFacts } from "./application-facts";
 import { SimpleDocumentViewerModal } from "@app/components/SimpleDocumentViewer";
-import { getTaskById } from "@app/api/rest";
+import { APPLICATIONS, getTaskById } from "@app/api/rest";
 import { COLOR_HEX_VALUES_BY_NAME } from "@app/Constants";
+import { Link } from "react-router-dom";
+import DownloadButton, { MimeType } from "./components/download-button";
 
 export interface IApplicationDetailDrawerAnalysisProps
   extends Pick<
@@ -100,23 +107,57 @@ export const ApplicationDetailDrawerAnalysis: React.FC<
           </Title>
           {task?.state === "Succeeded" && application ? (
             <>
-              <Tooltip content="View Report">
-                <Button
-                  icon={
-                    <span className={spacing.mrXs}>
-                      <ExclamationCircleIcon
-                        color={COLOR_HEX_VALUES_BY_NAME.blue}
-                      ></ExclamationCircleIcon>
-                    </span>
-                  }
-                  type="button"
-                  variant="link"
-                  isInline
-                  onClick={() => setAppAnalysisToView(application.id)}
-                >
-                  View analysis
-                </Button>
-              </Tooltip>
+              <DescriptionList
+                isHorizontal
+                columnModifier={{ default: "2Col" }}
+              >
+                <DescriptionListGroup>
+                  <DescriptionListTerm>Details</DescriptionListTerm>
+                  <DescriptionListDescription>
+                    <Tooltip content="View the analysis task details">
+                      <Button
+                        icon={
+                          <span className={spacing.mrXs}>
+                            <ExclamationCircleIcon
+                              color={COLOR_HEX_VALUES_BY_NAME.blue}
+                            ></ExclamationCircleIcon>
+                          </span>
+                        }
+                        type="button"
+                        variant="link"
+                        onClick={() => setAppAnalysisToView(application.id)}
+                        className={spacing.ml_0}
+                        style={{ margin: "0", padding: "0" }}
+                      >
+                        View analysis details
+                      </Button>
+                    </Tooltip>
+                  </DescriptionListDescription>
+                  <DescriptionListTerm>Download</DescriptionListTerm>
+                  <DescriptionListDescription>
+                    <Tooltip
+                      content="Click to download Analysis report"
+                      position="top"
+                    >
+                      <DownloadButton
+                        application={application}
+                        mimeType={MimeType.TAR}
+                      />
+                    </Tooltip>
+                    {" | "}
+                    <Tooltip
+                      content="Click to download Analysis report"
+                      position="top"
+                    >
+                      <DownloadButton
+                        application={application}
+                        mimeType={MimeType.YAML}
+                      />
+                    </Tooltip>
+                  </DescriptionListDescription>
+                </DescriptionListGroup>
+              </DescriptionList>
+              <Divider className={spacing.mtMd}></Divider>
             </>
           ) : task?.state === "Failed" ? (
             task ? (

client/src/app/pages/applications/components/application-detail-drawer/components/download-button.tsx

@@ -0,0 +1,84 @@
+import React, { useState } from "react";
+import { APPLICATIONS } from "@app/api/rest";
+import { Button } from "@patternfly/react-core";
+import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
+import { Application } from "@app/api/models";
+import { Spinner } from "@patternfly/react-core";
+
+export enum MimeType {
+  TAR = "tar",
+  YAML = "yaml",
+}
+function DownloadButton({
+  application,
+  mimeType,
+}: {
+  application: Application;
+  mimeType: MimeType;
+}) {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleDownload = async () => {
+    let acceptHeader = "application/x-tar";
+
+    switch (mimeType) {
+      case MimeType.YAML:
+        acceptHeader = "application/x-yaml";
+        break;
+      case MimeType.TAR:
+      default:
+        acceptHeader = "application/x-tar";
+    }
+    setIsLoading(true);
+
+    try {
+      const response = await fetch(
+        `${APPLICATIONS}/${application?.id}/analysis/report`,
+        {
+          headers: {
+            Accept: acceptHeader,
+          },
+        }
+      );
+
+      if (!response.ok) {
+        throw new Error("Network response was not ok when downloading file.");
+      }
+
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.style.display = "none";
+      a.href = url;
+      a.download = `analysis-${application.name}.` + mimeType;
+
+      document.body.appendChild(a);
+      a.click();
+
+      window.URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error("There was an error downloading the file:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <>
+      {isLoading ? (
+        <Spinner size="sm" />
+      ) : (
+        <Button
+          onClick={handleDownload}
+          id={`download-${mimeType}-button`}
+          variant="link"
+          className={spacing.pXs}
+        >
+          {mimeType === MimeType.YAML ? "YAML" : "Report"}
+        </Button>
+      )}
+    </>
+  );
+}
+
+export default DownloadButton;

common/src/proxies.ts

@@ -39,9 +39,6 @@ export const proxyMap: Record<string, Options> = {
     },
 
     onProxyReq: (proxyReq, req, res) => {
-      if (req.originalUrl.includes("windup/report/?filter")) {
-        proxyReq.setHeader("Accept", "");
-      }
       if (req.cookies?.keycloak_cookie && !req.headers["authorization"]) {
         proxyReq.setHeader(
           "Authorization",