#RI-3561 - Handle big output in Workbench

Author: egor-zalenski

redisinsight/ui/src/components/query-card/QueryCard.tsx

@@ -186,6 +186,7 @@ const QueryCard = (props: Props) => {
                       resultsMode={resultsMode}
                       result={result}
                       isNotStored={isNotStored}
+                      isFullScreen={isFullScreen}
                       data-testid="group-mode-card"
                     />
                   )}
@@ -215,6 +216,7 @@ const QueryCard = (props: Props) => {
                           resultsMode={resultsMode}
                           result={result}
                           isNotStored={isNotStored}
+                          isFullScreen={isFullScreen}
                         />
                       )}
                     </>

redisinsight/ui/src/components/query-card/QueryCardCliDefaultResult/QueryCardCliDefaultResult.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { instance, mock } from 'ts-mockito'
 import { render } from 'uiSrc/utils/test-utils'
-import QueryCardCliDefaultResult, { Props } from './QueryCardCliDefaultResult'
+import QueryCardCliDefaultResult, { MAX_CARD_HEIGHT, MIN_ROWS_COUNT, Props } from './QueryCardCliDefaultResult'
 
 const mockedProps = mock<Props>()
 
@@ -10,18 +10,33 @@ describe('QueryCardCliDefaultResult', () => {
     expect(render(<QueryCardCliDefaultResult {...instance(mockedProps)} />)).toBeTruthy()
   })
 
-  it('Result element should render (nil) result', () => {
-    const mockResult = [{
-      response: '',
-      status: 'success'
-    }]
+  it(`container min-height should be ${MAX_CARD_HEIGHT} if items.length > ${MIN_ROWS_COUNT}`, () => {
+    const mockResult: string[] = Array.from({ length: MIN_ROWS_COUNT + 1 }).fill('123')
 
     const { queryByTestId } = render(
-      <QueryCardCliDefaultResult {...instance(mockedProps)} result={mockResult} />
+      <QueryCardCliDefaultResult {...instance(mockedProps)} items={mockResult} />
     )
 
-    const resultEl = queryByTestId('query-cli-group-result')
+    const resultEl = queryByTestId('query-cli-card-result')
 
-    expect(resultEl).toHaveTextContent('(nil)')
+    expect(resultEl).toHaveStyle(`min-height: ${MAX_CARD_HEIGHT}px`)
+    expect(resultEl).toHaveTextContent(mockResult.join(''))
   })
+
+  it(
+    `container min-height should be calculated  and less than ${MAX_CARD_HEIGHT} if items.length < ${MIN_ROWS_COUNT} `,
+    () => {
+      const mockResult: string[] = Array.from({ length: 5 }).fill('123')
+
+      const { queryByTestId } = render(
+        <QueryCardCliDefaultResult {...instance(mockedProps)} items={mockResult} />
+      )
+
+      const resultEl = queryByTestId('query-cli-card-result')
+
+      expect(resultEl).not.toHaveStyle(`min-height: ${MAX_CARD_HEIGHT}px`)
+      expect(resultEl).toHaveStyle('min-height: 90px')
+      expect(resultEl).toHaveTextContent(mockResult.join(''))
+    }
+  )
 })

redisinsight/ui/src/components/query-card/QueryCardCliDefaultResult/QueryCardCliDefaultResult.tsx

@@ -1,20 +1,60 @@
-import React from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
+import cx from 'classnames'
 
-import { CommandExecutionResult } from 'uiSrc/slices/interfaces'
-import { cliParseTextResponse, CliPrefix, Maybe } from 'uiSrc/utils'
+import VirtualList from 'uiSrc/components/virtual-list'
+import { getNodeText } from 'uiSrc/utils'
+
+import styles from './styles.module.scss'
 
 export interface Props {
-  query: string
-  result: Maybe<CommandExecutionResult[]>
+  items: (string | JSX.Element)[]
+  isFullScreen?: boolean
 }
 
+export const MIN_ROW_HEIGHT = 18
+export const MIN_ROWS_COUNT = 11
+export const MAX_CARD_HEIGHT = 210
+export const SYMBOL_WIDTH = 4.5
+
 const QueryCardCliGroupResult = (props: Props) => {
-  const { result = [], query } = props
+  const { items = [], isFullScreen } = props
+
+  const [windowDimensions, setWindowDimensions] = useState({ width: 0, height: 0 })
+
+  const calculateHeight = useCallback((sum: number, item: string | JSX.Element) => {
+    const itemLength = getNodeText(item)?.length || 0
+    const symbolsPerLine = (windowDimensions.width - 400) / SYMBOL_WIDTH
+
+    return sum + Math.ceil((itemLength / symbolsPerLine)) * MIN_ROW_HEIGHT
+  }, [windowDimensions.width])
+
+  const calculatedHeight = items.length > MIN_ROWS_COUNT && !isFullScreen
+    ? MAX_CARD_HEIGHT
+    : items.reduce(calculateHeight, 0)
+
+  useEffect(() => {
+    updateWindowDimensions()
+    globalThis.addEventListener('resize', updateWindowDimensions)
+    return () => {
+      globalThis.removeEventListener('resize', updateWindowDimensions)
+    }
+  }, [])
+
+  const updateWindowDimensions = () => {
+    setWindowDimensions({ height: globalThis.innerHeight, width: globalThis.innerWidth })
+  }
 
   return (
-    <div data-testid="query-cli-group-result">
-      {result?.map(({ response, status }) =>
-        cliParseTextResponse(response || '(nil)', query, status, CliPrefix.QueryCard))}
+    <div
+      className={cx(styles.container, 'query-card-output-response-success')}
+      style={{
+        minHeight: isFullScreen
+          ? windowDimensions.height - 65
+          : Math.min(calculatedHeight, MAX_CARD_HEIGHT)
+      }}
+      data-testid="query-cli-card-result"
+    >
+      <VirtualList items={items} />
     </div>
   )
 }

redisinsight/ui/src/components/query-card/QueryCardCliDefaultResult/styles.module.scss

@@ -0,0 +1,15 @@
+@import "@elastic/eui/src/global_styling/mixins/helpers";
+@import "@elastic/eui/src/components/table/mixins";
+@import "@elastic/eui/src/global_styling/index";
+
+.container {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-grow: 1;
+  height: 100%;
+}
+
+.listContent {
+  @include euiScrollBar;
+}

redisinsight/ui/src/components/query-card/QueryCardCliGroupResult/QueryCardCliGroupResult.tsx

@@ -1,18 +1,24 @@
+import { flatten } from 'lodash'
 import React from 'react'
 
 import { CommandExecutionResult } from 'uiSrc/slices/interfaces'
 import { cliParseCommandsGroupResult, Maybe } from 'uiSrc/utils'
+import QueryCardCliDefaultResult from '../QueryCardCliDefaultResult'
 
 export interface Props {
   result?: Maybe<CommandExecutionResult[]>
+  isFullScreen?: boolean
 }
 
 const QueryCardCliGroupResult = (props: Props) => {
-  const { result = [] } = props
+  const { result = [], isFullScreen } = props
   return (
     <div data-testid="query-cli-default-result" className="query-card-output-response-success">
-      {result[0]?.response.map((item: any, index: number) =>
-        cliParseCommandsGroupResult(item, index))}
+      <QueryCardCliDefaultResult
+        isFullScreen={isFullScreen}
+        items={flatten(result?.[0]?.response.map((item: any) =>
+          flatten(cliParseCommandsGroupResult(item))))}
+      />
     </div>
   )
 }

redisinsight/ui/src/components/query-card/QueryCardCliResultWrapper/QueryCardCliResultWrapper.spec.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 import { instance, mock } from 'ts-mockito'
 import { cleanup, mockedStore, render, screen } from 'uiSrc/utils/test-utils'
 import { ResultsMode } from 'uiSrc/slices/interfaces/workbench'
+import { CommandExecutionStatus } from 'uiSrc/slices/interfaces/cli'
 import QueryCardCliResultWrapper, { Props } from './QueryCardCliResultWrapper'
 import QueryCardCliDefaultResult, { Props as QueryCardCliDefaultResultProps } from '../QueryCardCliDefaultResult'
 import QueryCardCliGroupResult, { Props as QueryCardCliGroupResultProps } from '../QueryCardCliGroupResult'
@@ -28,13 +29,17 @@ jest.mock('uiSrc/services', () => ({
 
 describe('QueryCardCliResultWrapper', () => {
   it('should render', () => {
-    expect(render(<QueryCardCliResultWrapper {...instance(mockedProps)} />)).toBeTruthy()
+    const mockResult = [{
+      response: 'response',
+      status: CommandExecutionStatus.Success
+    }]
+    expect(render(<QueryCardCliResultWrapper {...instance(mockedProps)} result={mockResult} />)).toBeTruthy()
   })
 
   it('Result element should render with result prop', () => {
     const mockResult = [{
       response: 'response',
-      status: 'success'
+      status: CommandExecutionStatus.Success
     }]
 
     render(
@@ -78,7 +83,7 @@ describe('QueryCardCliResultWrapper', () => {
   it('should render QueryCardCliDefaultResult when result.response is not array', () => {
     const mockResult = [{
       response: 'response',
-      status: 'success'
+      status: CommandExecutionStatus.Success
     }]
 
     render(
@@ -97,10 +102,29 @@ describe('QueryCardCliResultWrapper', () => {
   })
 
   it('should render warning', () => {
+    const mockResult = [{
+      response: 'response',
+      status: CommandExecutionStatus.Success
+    }]
     render(
-      <QueryCardCliResultWrapper {...instance(mockedProps)} isNotStored />
+      <QueryCardCliResultWrapper {...instance(mockedProps)} result={mockResult} isNotStored />
     )
 
     expect(screen.queryByTestId('query-cli-warning')).toBeInTheDocument()
   })
+
+  it('Result element should render (nil) result', () => {
+    const mockResult = [{
+      response: '',
+      status: CommandExecutionStatus.Success
+    }]
+
+    const { queryByTestId } = render(
+      <QueryCardCliResultWrapper {...instance(mockedProps)} result={mockResult} />
+    )
+
+    const resultEl = queryByTestId('query-cli-card-result')
+
+    expect(resultEl).toHaveTextContent('(nil)')
+  })
 })

redisinsight/ui/src/components/query-card/QueryCardCliResultWrapper/QueryCardCliResultWrapper.tsx

@@ -5,7 +5,7 @@ import { isArray } from 'lodash'
 
 import { CommandExecutionResult } from 'uiSrc/slices/interfaces'
 import { ResultsMode } from 'uiSrc/slices/interfaces/workbench'
-import { Maybe } from 'uiSrc/utils'
+import { formatToText, Maybe } from 'uiSrc/utils'
 
 import QueryCardCliDefaultResult from '../QueryCardCliDefaultResult'
 import QueryCardCliGroupResult from '../QueryCardCliGroupResult'
@@ -18,10 +18,11 @@ export interface Props {
   status?: string
   resultsMode?: ResultsMode
   isNotStored?: boolean
+  isFullScreen?: boolean
 }
 
 const QueryCardCliResultWrapper = (props: Props) => {
-  const { result = [], query, loading, resultsMode, isNotStored } = props
+  const { result = [], query, loading, resultsMode, isNotStored, isFullScreen } = props
 
   return (
     <div className={cx('queryResultsContainer', styles.container)}>
@@ -34,8 +35,13 @@ const QueryCardCliResultWrapper = (props: Props) => {
             </EuiText>
           )}
           {resultsMode === ResultsMode.GroupMode && isArray(result[0]?.response)
-            ? <QueryCardCliGroupResult result={result} />
-            : <QueryCardCliDefaultResult query={query} result={result} />}
+            ? <QueryCardCliGroupResult result={result} isFullScreen={isFullScreen} />
+            : (
+              <QueryCardCliDefaultResult
+                isFullScreen={isFullScreen}
+                items={formatToText(result[0].response || '(nil)', query).split('\n')}
+              />
+            )}
         </div>
       )}
       {loading && (

redisinsight/ui/src/components/query-card/QueryCardCliResultWrapper/styles.module.scss

@@ -9,6 +9,7 @@
   overflow: auto;
   white-space: pre-wrap;
   word-break: break-all;
+  position: relative;
 
   font: normal normal normal 14px/17px Inconsolata;
   text-align: left;

redisinsight/ui/src/components/virtual-list/VirtualList.spec.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { instance, mock } from 'ts-mockito'
+import { render } from 'uiSrc/utils/test-utils'
+import VirtualGrid, { Props } from './VirtualList'
+
+const mockedProps = mock<Props>()
+
+describe('VirtualList', () => {
+  it('should render', () => {
+    expect(
+      render(<VirtualGrid {...instance(mockedProps)} />)
+    ).toBeTruthy()
+  })
+  it('should render with empty rows', () => {
+    expect(
+      render(<VirtualGrid {...instance(mockedProps)} items={[]} />)
+    ).toBeTruthy()
+  })
+})

redisinsight/ui/src/components/virtual-list/VirtualList.tsx

@@ -0,0 +1,75 @@
+import React, { useEffect, useRef } from 'react'
+import { ListChildComponentProps, VariableSizeList as List } from 'react-window'
+import AutoSizer from 'react-virtualized-auto-sizer'
+
+import styles from './styles.module.scss'
+
+export interface Props {
+  items: (string | JSX.Element)[]
+  overscanCount?: number
+  minRowHeight?: number
+}
+
+const PROTRUDING_OFFSET = 2
+const MIN_ROW_HEIGHT = 18
+const OVERSCAN_COUNT = 20
+
+const VirtualList = (props: Props) => {
+  const {
+    items = [],
+    overscanCount = OVERSCAN_COUNT,
+    minRowHeight = MIN_ROW_HEIGHT,
+  } = props
+
+  const listRef = useRef<List>(null)
+  const rowHeights = useRef<{ [key: number]: number }>({})
+  const outerRef = useRef<HTMLDivElement>(null)
+
+  const getRowHeight = (index: number) => (
+    rowHeights.current[index] > minRowHeight ? (rowHeights.current[index] + 2) : minRowHeight
+  )
+
+  const setRowHeight = (index: number, size: number) => {
+    listRef.current?.resetAfterIndex(0)
+    rowHeights.current = { ...rowHeights.current, [index]: size }
+  }
+
+  const Row = ({ index, style }: ListChildComponentProps) => {
+    const rowRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+      if (rowRef.current) {
+        setRowHeight(index, rowRef.current?.clientHeight)
+      }
+    }, [rowRef])
+
+    const rowContent = items[index]
+
+    return (
+      <div style={style} className={styles.item} data-testid={`row-${index}`}>
+        <div className={styles.message} ref={rowRef}>{rowContent}</div>
+      </div>
+    )
+  }
+
+  return (
+    <AutoSizer>
+      {({ width, height }) => (
+        <List
+          itemCount={items.length}
+          itemSize={getRowHeight}
+          ref={listRef}
+          className={styles.listContent}
+          outerRef={outerRef}
+          overscanCount={overscanCount}
+          height={height}
+          width={width - PROTRUDING_OFFSET}
+        >
+          {Row}
+        </List>
+      )}
+    </AutoSizer>
+  )
+}
+
+export default VirtualList