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

Author: egor-zalenski

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

@@ -1,8 +1,8 @@
 import { cloneDeep } from 'lodash'
 import React from 'react'
-import { saveAs } from 'file-saver'
 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
@@ -28,20 +28,10 @@ jest.mock('uiSrc/slices/cli/monitor', () => ({
   }),
 }))
 
-global.Blob = function (content, options) { return ({ content, options }) }
-global.fetch = jest.fn(() =>
-  Promise.resolve({
-    text: () => Promise.resolve('123'),
-    headers: {
-      get: () => '123"filename.txt"oeu',
-    }
-  }))
-
 beforeEach(() => {
   cleanup()
   store = cloneDeep(mockedStore)
   store.clearActions()
-  fetch.mockClear()
 })
 
 describe('MonitorLog', () => {
@@ -61,8 +51,7 @@ describe('MonitorLog', () => {
     expect(store.getActions()).toEqual(expectedActions)
   })
 
-  it('should call download a file', async () => {
-    const saveAsMock = jest.fn()
+  it('should call fetchMonitorLog after click on Download', async () => {
     const monitorSelectorMock = jest.fn().mockReturnValue({
       isSaveToFile: true,
       logFileId: 'logFileId',
@@ -74,19 +63,15 @@ describe('MonitorLog', () => {
       }
     });
 
-    (monitorSelector as jest.Mock).mockImplementation(monitorSelectorMock);
-    (saveAs as jest.Mock).mockImplementation(() => saveAsMock)
+    (monitorSelector as jest.Mock).mockImplementation(monitorSelectorMock)
 
     render(<MonitorLog />)
 
     await act(() => {
       fireEvent.click(screen.getByTestId('download-log-btn'))
     })
 
-    expect(saveAs).toBeCalledWith(
-      { content: ['123'], options: { type: 'text/plain;charset=utf-8' } },
-      'filename.txt',
-    )
-    saveAs.mockRestore()
+    const expectedActions = [sendCliCommand()]
+    expect(store.getActions().slice(0, expectedActions.length)).toEqual(expectedActions)
   })
 })

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

@@ -3,12 +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 { saveAs } from 'file-saver'
 
-import { ApiEndpoints } from 'uiSrc/constants'
 import { monitorSelector, resetProfiler, stopMonitor } from 'uiSrc/slices/cli/monitor'
-import { cutDurationText, getBaseApiUrl } from 'uiSrc/utils'
-import { CustomHeaders } from 'uiSrc/constants/api'
+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'
 
@@ -47,18 +46,8 @@ const MonitorLog = () => {
 
   const handleDownloadLog = async (e: React.MouseEvent<HTMLAnchorElement>) => {
     e.preventDefault()
-    const baseApiUrl = getBaseApiUrl()
-    const linkToDownload = `${baseApiUrl}/api/${ApiEndpoints.PROFILER_LOGS}/${logFileId}`
 
-    const response = await fetch(
-      linkToDownload,
-      { headers: { [CustomHeaders.WindowId]: window.windowId || '' } },
-    )
-
-    const contentDisposition = response.headers.get('Content-Disposition') || ''
-    const file = new Blob([await response.text()], { type: 'text/plain;charset=utf-8' })
-
-    saveAs(file, contentDisposition.split('"')?.[1])
+    dispatch(fetchMonitorLog(logFileId || '', downloadFile))
   }
 
   return (

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,
+      )
+    })
+})