From f01a51c12042190054e93d44add9c7ff1b12dab3 Mon Sep 17 00:00:00 2001 From: Edmundo Ruiz Ghanem Date: Mon, 15 Aug 2022 09:04:06 -0400 Subject: [PATCH 1/2] Show error notification when download logs request fails --- airbyte-webapp/src/locales/en.json | 1 + .../components/LogsContent.tsx | 25 ++++++++++++++----- 2 files changed, 20 insertions(+), 6 deletions(-) diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json index 01b074c9a5c1..826ce956fb4e 100644 --- a/airbyte-webapp/src/locales/en.json +++ b/airbyte-webapp/src/locales/en.json @@ -451,6 +451,7 @@ "admin.dropZoneTitle": "Drag 'n' drop file here, or click to select file", "admin.dropZoneSubtitle": "Only *.tar and *.gz files will be accepted", "admin.logs": "Logs", + "admin.logs.error": "Unable to download logs at this time.", "admin.downloadServerLogs": "Download Server Logs", "admin.downloadSchedulerLogs": "Download Scheduler Logs", "admin.upgradeAll": "Upgrade all", diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConfigurationsPage/components/LogsContent.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/ConfigurationsPage/components/LogsContent.tsx index 47e9333ba2f8..3c270f564f6d 100644 --- a/airbyte-webapp/src/pages/SettingsPage/pages/ConfigurationsPage/components/LogsContent.tsx +++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConfigurationsPage/components/LogsContent.tsx @@ -1,14 +1,14 @@ import React from "react"; -import { FormattedMessage } from "react-intl"; +import { FormattedMessage, useIntl } from "react-intl"; import { useAsyncFn } from "react-use"; import styled from "styled-components"; import { LoadingButton } from "components"; +import { LogType } from "core/domain/logs/types"; +import { useNotificationService } from "hooks/services/Notification"; import { useGetLogs } from "services/logs/LogsService"; -import { LogType } from "../../../../../core/domain/logs/types"; - const Content = styled.div` padding: 29px 0 27px; text-align: center; @@ -28,12 +28,25 @@ const downloadFile = (file: Blob, name: string) => { }; const LogsContent: React.FC = () => { + const { registerNotification } = useNotificationService(); + const { formatMessage } = useIntl(); + const fetchLogs = useGetLogs(); const downloadLogs = async (logType: LogType) => { - const file = await fetchLogs({ logType }); - const name = `${logType}-logs.txt`; - downloadFile(file, name); + try { + const file = await fetchLogs({ logType }); + const name = `${logType}-logs.txt`; + downloadFile(file, name); + } catch (e) { + console.error(e); + + registerNotification({ + id: "admin.logs.error", + title: formatMessage({ id: "admin.logs.error" }), + isError: true, + }); + } }; // TODO: get rid of useAsyncFn and use react-query From 838b0459b024c9818ec21e48ce1282084d663654 Mon Sep 17 00:00:00 2001 From: Edmundo Ruiz Ghanem Date: Mon, 15 Aug 2022 09:31:42 -0400 Subject: [PATCH 2/2] Extract download file function --- .../components/JobItem/components/DownloadButton.tsx | 8 ++------ .../ConfigurationsPage/components/LogsContent.tsx | 10 +--------- airbyte-webapp/src/utils/file.ts | 8 ++++++++ 3 files changed, 11 insertions(+), 15 deletions(-) create mode 100644 airbyte-webapp/src/utils/file.ts diff --git a/airbyte-webapp/src/components/JobItem/components/DownloadButton.tsx b/airbyte-webapp/src/components/JobItem/components/DownloadButton.tsx index 487242688b9f..37cd9f52bb6f 100644 --- a/airbyte-webapp/src/components/JobItem/components/DownloadButton.tsx +++ b/airbyte-webapp/src/components/JobItem/components/DownloadButton.tsx @@ -6,6 +6,7 @@ import { useIntl } from "react-intl"; import { Button } from "components"; import { JobDebugInfoRead } from "core/request/AirbyteClient"; +import { downloadFile } from "utils/file"; interface DownloadButtonProps { jobDebugInfo: JobDebugInfoRead; @@ -16,15 +17,10 @@ const DownloadButton: React.FC = ({ jobDebugInfo, fileName const { formatMessage } = useIntl(); const downloadFileWithLogs = () => { - const element = document.createElement("a"); const file = new Blob([jobDebugInfo.attempts.flatMap((info) => info.logs.logLines).join("\n")], { type: "text/plain;charset=utf-8", }); - element.href = URL.createObjectURL(file); - element.download = `${fileName}.txt`; - document.body.appendChild(element); // Required for this to work in FireFox - element.click(); - document.body.removeChild(element); + downloadFile(file, `${fileName}.txt`); }; return ( diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConfigurationsPage/components/LogsContent.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/ConfigurationsPage/components/LogsContent.tsx index 3c270f564f6d..3ce14b1b7c27 100644 --- a/airbyte-webapp/src/pages/SettingsPage/pages/ConfigurationsPage/components/LogsContent.tsx +++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConfigurationsPage/components/LogsContent.tsx @@ -8,6 +8,7 @@ import { LoadingButton } from "components"; import { LogType } from "core/domain/logs/types"; import { useNotificationService } from "hooks/services/Notification"; import { useGetLogs } from "services/logs/LogsService"; +import { downloadFile } from "utils/file"; const Content = styled.div` padding: 29px 0 27px; @@ -18,15 +19,6 @@ const LogsButton = styled(LoadingButton)` margin: 0 15px; `; -const downloadFile = (file: Blob, name: string) => { - const element = document.createElement("a"); - element.href = URL.createObjectURL(file); - element.download = name; - document.body.appendChild(element); // Required for this to work in FireFox - element.click(); - document.body.removeChild(element); -}; - const LogsContent: React.FC = () => { const { registerNotification } = useNotificationService(); const { formatMessage } = useIntl(); diff --git a/airbyte-webapp/src/utils/file.ts b/airbyte-webapp/src/utils/file.ts new file mode 100644 index 000000000000..d397eb6c8e2c --- /dev/null +++ b/airbyte-webapp/src/utils/file.ts @@ -0,0 +1,8 @@ +export const downloadFile = (blob: Blob, name: string) => { + const element = document.createElement("a"); + element.href = URL.createObjectURL(blob); + element.download = name; + document.body.appendChild(element); // Required for this to work in FireFox + element.click(); + document.body.removeChild(element); +};