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

Author: egor-zalenski

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,18 +1,47 @@
 import { cloneDeep } from 'lodash'
 import React from 'react'
-import { resetProfiler, stopMonitor } from 'uiSrc/slices/cli/monitor'
+import { monitorSelector, resetProfiler, stopMonitor } from 'uiSrc/slices/cli/monitor'
 import { cleanup, fireEvent, mockedStore, render, screen } from 'uiSrc/utils/test-utils'
 import MonitorLog from './MonitorLog'
 
 let store: typeof mockedStore
+let URLMock: jest.SpyInstance<object>
+const mockURLrevokeObjectURL = 123123
+
+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,
+    }
+  }),
+}))
+
+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', () => {
+  beforeAll(() => {
+    URLMock = jest.spyOn(URL, 'revokeObjectURL').mockImplementation(() => mockURLrevokeObjectURL)
+  })
+
   it('should render', () => {
     expect(render(<MonitorLog />)).toBeTruthy()
   })
@@ -24,4 +53,23 @@ describe('MonitorLog', () => {
     const expectedActions = [stopMonitor(), resetProfiler()]
     expect(store.getActions()).toEqual(expectedActions)
   })
+
+  it.skip('should call download a file', () => {
+    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 />)
+    fireEvent.click(screen.getByTestId('download-log-btn'))
+
+    expect(URLMock).toBeCalled()
+  })
 })

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

@@ -6,6 +6,7 @@ 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 { CustomHeaders } from 'uiSrc/constants/api'
 
 import styles from './styles.module.scss'
 
@@ -26,8 +27,6 @@ const MonitorLog = () => {
       })
     )
   )
-  const baseApiUrl = getBaseApiUrl()
-  const linkToDownload = `${baseApiUrl}/api/${ApiEndpoints.PROFILER_LOGS}/${logFileId}`
 
   const downloadBtnProps: any = {
     target: DOWNLOAD_IFRAME_NAME
@@ -44,6 +43,31 @@ const MonitorLog = () => {
     return 18
   }
 
+  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') || ''
+
+    downloadFile(await response.text(), contentDisposition.split('"')?.[1])
+  }
+
+  const downloadFile = (content: string, fileName: string) => {
+    const link = document.createElement('a')
+    const file = new Blob([content], { type: 'text/plain' })
+    link.href = URL.createObjectURL(file)
+    link.download = fileName
+    link.click()
+
+    URL.revokeObjectURL(link.href)
+  }
+
   return (
     <div className={styles.monitorLogWrapper}>
       <iframe title="downloadIframeTarget" name={DOWNLOAD_IFRAME_NAME} style={{ display: 'none' }} />
@@ -76,10 +100,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()
 })