Merge pull request #2460 from RedisInsight/fe/bugfix/RI-4840_Profiler_logs_download_failure

#RI-4840 - [Regression] Profiler logs download failure

Author: vlad-dargel

redisinsight/api/src/modules/profiler/profiler.controller.ts

@@ -24,6 +24,7 @@ export class ProfilerController {
 
     res.setHeader('Content-Type', 'application/octet-stream');
     res.setHeader('Content-Disposition', `attachment;filename="${filename}.txt"`);
+    res.setHeader('Access-Control-Expose-Headers', 'Content-Disposition');
 
     stream
       .on('error', () => res.status(404).send())

redisinsight/ui/src/components/monitor/MonitorLog/MonitorLog.spec.tsx

@@ -1,10 +1,32 @@
 import { cloneDeep } from 'lodash'
 import React from 'react'
-import { resetProfiler, stopMonitor } from 'uiSrc/slices/cli/monitor'
-import { cleanup, fireEvent, mockedStore, render, screen } from 'uiSrc/utils/test-utils'
+import { monitorSelector, resetProfiler, stopMonitor } from 'uiSrc/slices/cli/monitor'
+import { act, cleanup, fireEvent, mockedStore, render, screen } from 'uiSrc/utils/test-utils'
+import { sendCliCommand } from 'uiSrc/slices/cli/cli-output'
 import MonitorLog from './MonitorLog'
 
 let store: typeof mockedStore
+let URLMock: jest.SpyInstance<object>
+const mockURLrevokeObjectURL = 123123
+
+jest.mock('file-saver', () => ({
+  ...jest.requireActual('file-saver'),
+  saveAs: jest.fn(),
+}))
+
+jest.mock('uiSrc/slices/cli/monitor', () => ({
+  ...jest.requireActual('uiSrc/slices/cli/monitor'),
+  monitorSelector: jest.fn().mockReturnValue({
+    isSaveToFile: false,
+    logFileId: 'logFileId',
+    timestamp: {
+      start: 1,
+      paused: 2,
+      unPaused: 3,
+      duration: 123,
+    }
+  }),
+}))
 
 beforeEach(() => {
   cleanup()
@@ -13,6 +35,10 @@ beforeEach(() => {
 })
 
 describe('MonitorLog', () => {
+  beforeAll(() => {
+    URLMock = jest.spyOn(URL, 'revokeObjectURL').mockImplementation(() => mockURLrevokeObjectURL)
+  })
+
   it('should render', () => {
     expect(render(<MonitorLog />)).toBeTruthy()
   })
@@ -24,4 +50,28 @@ describe('MonitorLog', () => {
     const expectedActions = [stopMonitor(), resetProfiler()]
     expect(store.getActions()).toEqual(expectedActions)
   })
+
+  it('should call fetchMonitorLog after click on Download', async () => {
+    const monitorSelectorMock = jest.fn().mockReturnValue({
+      isSaveToFile: true,
+      logFileId: 'logFileId',
+      timestamp: {
+        start: 1,
+        paused: 2,
+        unPaused: 3,
+        duration: 123,
+      }
+    });
+
+    (monitorSelector as jest.Mock).mockImplementation(monitorSelectorMock)
+
+    render(<MonitorLog />)
+
+    await act(() => {
+      fireEvent.click(screen.getByTestId('download-log-btn'))
+    })
+
+    const expectedActions = [sendCliCommand()]
+    expect(store.getActions().slice(0, expectedActions.length)).toEqual(expectedActions)
+  })
 })

redisinsight/ui/src/components/monitor/MonitorLog/MonitorLog.tsx

@@ -3,9 +3,11 @@ import { format, formatDuration, intervalToDuration } from 'date-fns'
 import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import AutoSizer from 'react-virtualized-auto-sizer'
-import { ApiEndpoints } from 'uiSrc/constants'
+
 import { monitorSelector, resetProfiler, stopMonitor } from 'uiSrc/slices/cli/monitor'
-import { cutDurationText, getBaseApiUrl } from 'uiSrc/utils'
+import { cutDurationText } from 'uiSrc/utils'
+import { downloadFile } from 'uiSrc/utils/dom/downloadFile'
+import { fetchMonitorLog } from 'uiSrc/slices/cli/cli-output'
 
 import styles from './styles.module.scss'
 
@@ -26,8 +28,6 @@ const MonitorLog = () => {
       })
     )
   )
-  const baseApiUrl = getBaseApiUrl()
-  const linkToDownload = `${baseApiUrl}/api/${ApiEndpoints.PROFILER_LOGS}/${logFileId}`
 
   const downloadBtnProps: any = {
     target: DOWNLOAD_IFRAME_NAME
@@ -44,6 +44,12 @@ const MonitorLog = () => {
     return 18
   }
 
+  const handleDownloadLog = async (e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault()
+
+    dispatch(fetchMonitorLog(logFileId || '', downloadFile))
+  }
+
   return (
     <div className={styles.monitorLogWrapper}>
       <iframe title="downloadIframeTarget" name={DOWNLOAD_IFRAME_NAME} style={{ display: 'none' }} />
@@ -76,10 +82,10 @@ const MonitorLog = () => {
                   <EuiButton
                     size="s"
                     color="secondary"
-                    href={linkToDownload}
                     iconType="download"
                     className={styles.btn}
                     data-testid="download-log-btn"
+                    onClick={handleDownloadLog}
                     {...downloadBtnProps}
                   >
                     {width > SMALL_SCREEN_RESOLUTION && ' Download '}

redisinsight/ui/src/setup-tests.ts

@@ -3,6 +3,10 @@ import 'whatwg-fetch'
 
 import { mswServer } from 'uiSrc/mocks/server'
 
+export const URL = 'URL'
+window.URL.revokeObjectURL = () => {}
+window.URL.createObjectURL = () => URL
+
 beforeAll(() => {
   mswServer.listen()
 })

redisinsight/ui/src/slices/cli/cli-output.ts

@@ -1,5 +1,6 @@
 import { createSlice } from '@reduxjs/toolkit'
 
+import { AxiosError, AxiosResponseHeaders } from 'axios'
 import { CliOutputFormatterType, cliTexts, ConnectionSuccessOutputText, SelectCommand } from 'uiSrc/constants/cliOutput'
 import { apiService, localStorageService } from 'uiSrc/services'
 import { ApiEndpoints, BrowserStorageItem, CommandMonitor, } from 'uiSrc/constants'
@@ -16,6 +17,7 @@ import { SendClusterCommandDto, SendClusterCommandResponse, SendCommandResponse,
 
 import { AppDispatch, RootState } from '../store'
 import { CommandExecutionStatus, StateCliOutput } from '../interfaces/cli'
+import { addErrorNotification } from '../app/notifications'
 
 export const initialState: StateCliOutput = {
   data: [],
@@ -278,3 +280,29 @@ function handleRecreateClient(dispatch: AppDispatch, stateInit: () => RootState,
     ))
   }
 }
+
+// Asynchronous thunk action
+export function fetchMonitorLog(
+  logFileId: string = '',
+  onSuccessAction?: (data: string, headers: AxiosResponseHeaders) => void,
+) {
+  return async (dispatch: AppDispatch) => {
+    dispatch(sendCliCommand())
+
+    try {
+      const { data, status, headers } = await apiService.get<string>(
+        `${ApiEndpoints.PROFILER_LOGS}/${logFileId}`
+      )
+
+      if (isStatusSuccessful(status)) {
+        dispatch(sendCliCommandSuccess())
+        onSuccessAction?.(data, headers)
+      }
+    } catch (err) {
+      const error = err as AxiosError
+      const errorMessage = getApiErrorMessage(error)
+      dispatch(addErrorNotification(error))
+      dispatch(sendCliCommandFailure(errorMessage))
+    }
+  }
+}

redisinsight/ui/src/slices/tests/cli/cli-output.spec.ts

@@ -1,16 +1,19 @@
 import { cloneDeep, first } from 'lodash'
 
+import { AxiosError } from 'axios'
 import { AppDispatch, RootState } from 'uiSrc/slices/store'
 import { cleanup, clearStoreActions, initialStateDefault, mockedStore, mockStore, } from 'uiSrc/utils/test-utils'
 import { ClusterNodeRole, CommandExecutionStatus } from 'uiSrc/slices/interfaces/cli'
 import { apiService } from 'uiSrc/services'
 import { cliTexts } from 'uiSrc/constants/cliOutput'
 import { cliParseTextResponseWithOffset, cliParseTextResponseWithRedirect } from 'uiSrc/utils/cliHelper'
 import ApiErrors from 'uiSrc/constants/apiErrors'
-import { processCliClient, updateCliClientAction } from 'uiSrc/slices/cli/cli-settings'
+import { processCliClient } from 'uiSrc/slices/cli/cli-settings'
+import { addErrorNotification } from 'uiSrc/slices/app/notifications'
 import { SendClusterCommandDto, SendClusterCommandResponse } from 'apiSrc/modules/cli/dto/cli.dto'
 import reducer, {
   concatToOutput,
+  fetchMonitorLog,
   initialState,
   outputSelector,
   processUnsupportedCommand,
@@ -488,4 +491,54 @@ describe('cliOutput slice', () => {
       })
     })
   })
+
+  describe('fetchMonitorLog', () => {
+    it('call both sendCliCommand and sendCliCommandSuccess when fetch is successed', async () => {
+      // Arrange
+      const fileIdMock = 'fileId'
+      const onSuccessActionMock = jest.fn()
+      const data = 'test'
+      const responsePayload = { data, status: 200 }
+
+      apiService.get = jest.fn().mockResolvedValue(responsePayload)
+
+      // Act
+      await store.dispatch<any>(fetchMonitorLog(fileIdMock, onSuccessActionMock))
+
+      // Assert
+      const expectedActions = [
+        sendCliCommand(),
+        sendCliCommandSuccess(),
+      ]
+      expect(store.getActions()).toEqual(expectedActions)
+      expect(onSuccessActionMock).toBeCalled()
+    })
+
+    it('call both sendCliCommand and sendCliCommandFailure when fetch is fail', async () => {
+      // Arrange
+      const fileIdMock = 'fileId'
+      const onSuccessActionMock = jest.fn()
+      const errorMessage = 'Could not connect to aoeu:123, please check the connection details.'
+      const responsePayload = {
+        response: {
+          status: 500,
+          data: { message: errorMessage },
+        },
+      }
+
+      apiService.get = jest.fn().mockRejectedValueOnce(responsePayload)
+
+      // Act
+      await store.dispatch<any>(fetchMonitorLog(fileIdMock, onSuccessActionMock))
+
+      // Assert
+      const expectedActions = [
+        sendCliCommand(),
+        addErrorNotification(responsePayload as AxiosError),
+        sendCliCommandFailure(responsePayload.response.data.message),
+      ]
+      expect(store.getActions()).toEqual(expectedActions)
+      expect(onSuccessActionMock).not.toBeCalled()
+    })
+  })
 })

redisinsight/ui/src/utils/dom/downloadFile.ts

@@ -0,0 +1,12 @@
+import { saveAs } from 'file-saver'
+import { AxiosResponseHeaders } from 'axios'
+
+export const DEFAULT_FILE_NAME = 'RedisInsight'
+
+export const downloadFile = (data: string = '', headers: AxiosResponseHeaders) => {
+  const contentDisposition = headers?.['content-disposition'] || ''
+  const file = new Blob([data], { type: 'text/plain;charset=utf-8' })
+  const fileName = contentDisposition.split('"')?.[1] || DEFAULT_FILE_NAME
+
+  saveAs(file, fileName)
+}

redisinsight/ui/src/utils/tests/dom/downloadFile.spec.ts

@@ -0,0 +1,28 @@
+import { saveAs } from 'file-saver'
+import { DEFAULT_FILE_NAME, downloadFile } from 'uiSrc/utils/dom/downloadFile'
+
+jest.mock('file-saver', () => ({
+  ...jest.requireActual('file-saver'),
+  saveAs: jest.fn(),
+}))
+
+const getDownloadFileTests: any[] = [
+  ['5123123123', { 'content-disposition': '123"123"123' }, '123'],
+  ['test\ntest123', { 'content-disposition': '123"filename.txt"123' }, 'filename.txt'],
+  ['5123 uoeu aoue ao123123', { 'content-disposition': '123"1uaoeutaoeu"123' }, '1uaoeutaoeu'],
+  [null, { 'content-disposition': '123"123"123' }, '123'],
+  ['5123 3', {}, DEFAULT_FILE_NAME],
+]
+
+describe('downloadFile', () => {
+  it.each(getDownloadFileTests)('saveAs should be called with: %s (data), %s (headers), ',
+    (data: string, headers, fileName: string) => {
+      const saveAsMock = jest.fn();
+      (saveAs as jest.Mock).mockImplementation(() => saveAsMock)
+
+      downloadFile(data, headers)
+      expect(saveAs).toBeCalledWith(
+        new Blob([data], { type: 'text/plain;charset=utf-8' }), fileName,
+      )
+    })
+})