-
Notifications
You must be signed in to change notification settings - Fork 43
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
✨ Add component for downloading the static report (#1312)
- Adds a download button to handle downloading the analysis report with custom headers driven by props passed in - Uses the Fetch API to allow setting custom headers. Converts the received data to a blob & then creates an object URL from that blob. Then we can use that URL with a temporary anchor `<a>` element to trigger the download with a localized loading state. - This approach allows us to bin any custom headers we were adding in the proxy and just use the fetch api to set the custom headers.  Signed-off-by: ibolton336 <ibolton@redhat.com>
- Loading branch information
1 parent
ba82364
commit 427ed02
Showing
5 changed files
with
170 additions
and
31 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
56 changes: 56 additions & 0 deletions
56
...pp/pages/applications/components/application-detail-drawer/components/download-button.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import React, { useState } from "react"; | ||
| import { Alert, 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"; | ||
| import { useDownloadStaticReport } from "@app/queries/download"; | ||
|
|
||
| export enum MimeType { | ||
| TAR = "tar", | ||
| YAML = "yaml", | ||
| } | ||
| function DownloadButton({ | ||
| application, | ||
| mimeType, | ||
| }: { | ||
| application: Application; | ||
| mimeType: MimeType; | ||
| }) { | ||
| const { | ||
| mutate: downloadFile, | ||
| isLoading, | ||
| isError, | ||
| } = useDownloadStaticReport(); | ||
|
|
||
| const handleDownload = () => { | ||
| downloadFile({ | ||
| applicationId: application.id, | ||
| mimeType: mimeType, | ||
| }); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| {isLoading ? ( | ||
| <Spinner size="sm" /> | ||
| ) : isError ? ( | ||
| <Alert variant="warning" isInline title={"Error downloading report"}> | ||
| <p>{"An error has occurred. Try to download again."}</p> | ||
| </Alert> | ||
| ) : ( | ||
| <> | ||
| <Button | ||
| onClick={handleDownload} | ||
| id={`download-${mimeType}-button`} | ||
| variant="link" | ||
| className={spacing.pXs} | ||
| > | ||
| {mimeType === MimeType.YAML ? "YAML" : "Report"} | ||
| </Button> | ||
| </> | ||
| )} | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default DownloadButton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import axios from "axios"; | ||
| import { saveAs } from "file-saver"; | ||
| import { APPLICATIONS } from "@app/api/rest"; | ||
| import { useMutation } from "@tanstack/react-query"; | ||
| import { MimeType } from "@app/pages/applications/components/application-detail-drawer/components/download-button"; | ||
|
|
||
| interface DownloadOptions { | ||
| applicationId: number; | ||
| mimeType: MimeType; | ||
| } | ||
|
|
||
| export const downloadStaticReport = async ({ | ||
| applicationId, | ||
| mimeType, | ||
| }: DownloadOptions): Promise<void> => { | ||
| let acceptHeader = "application/x-tar"; | ||
|
|
||
| switch (mimeType) { | ||
| case MimeType.YAML: | ||
| acceptHeader = "application/x-yaml"; | ||
| break; | ||
| case MimeType.TAR: | ||
| default: | ||
| acceptHeader = "application/x-tar"; | ||
| } | ||
|
|
||
| try { | ||
| const response = await axios.get( | ||
| `${APPLICATIONS}/${applicationId}/analysis/report`, | ||
| { | ||
| responseType: "blob", | ||
| headers: { | ||
| Accept: acceptHeader, | ||
| }, | ||
| } | ||
| ); | ||
|
|
||
| if (response.status !== 200) { | ||
| throw new Error("Network response was not ok when downloading file."); | ||
| } | ||
|
|
||
| const blob = new Blob([response.data]); | ||
| saveAs( | ||
| blob, | ||
| `analysis-report-app-${applicationId}.${acceptHeader.split("-")[1]}` | ||
| ); | ||
| } catch (error) { | ||
| console.error("There was an error downloading the file:", error); | ||
| throw error; | ||
| } | ||
| }; | ||
|
|
||
| export const useDownloadStaticReport = () => { | ||
| return useMutation(downloadStaticReport); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters