Merge pull request #2121 from RedisInsight/feature/RI-4367_autoscroll-profiler

Feature/ri 4367 autoscroll profiler

Author: rsergeenko

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

@@ -28,7 +28,6 @@ export interface Props {
   isShowHelper: boolean
   isSaveToFile: boolean
   isShowCli: boolean
-  scrollViewOnAppear: boolean
   handleRunMonitor: (isSaveToLog?: boolean) => void
 }
 
@@ -143,8 +142,8 @@ const Monitor = (props: Props) => {
               <AutoSizer>
                 {({ width, height }) => (
                   <MonitorOutputList
-                    width={width}
-                    height={height}
+                    width={width || 0}
+                    height={height || 0}
                     items={items}
                     compressed={isShowCli || isShowHelper}
                   />

redisinsight/ui/src/components/monitor/Monitor/styles.module.scss

@@ -37,28 +37,34 @@
   height: 100%;
   position: relative;
   overflow: auto;
-  padding-left: 12px;
 }
 
 .content {
-  @include euiScrollBar;
-
-  width: 100%;
   height: 100%;
-  position: relative;
-  overflow: auto;
-
+  width: 100%;
   display: flex;
   flex-direction: column;
-  margin-bottom: 6px;
-
-  &:first-child {
-    padding-top: 10px;
-  }
-
-  &:last-child {
-    padding-bottom: 10px;
-  }
+  overflow: hidden;
+  padding: 12px 4px 12px 12px;
+
+  //@include euiScrollBar;
+  //
+  //width: 100%;
+  //height: 100%;
+  //position: relative;
+  //overflow: auto;
+  //
+  //display: flex;
+  //flex-direction: column;
+  //margin-bottom: 6px;
+  //
+  //&:first-child {
+  //  padding-top: 10px;
+  //}
+  //
+  //&:last-child {
+  //  padding-bottom: 10px;
+  //}
 }
 
 .startContainer {
@@ -180,10 +186,10 @@
 
 .item {
   display: block;
-  overflow: hidden;
 
   & > span {
     padding-right: 5px;
+    word-break: break-word;
   }
 }
 

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

@@ -1,12 +1,11 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useCallback, useEffect, useRef } from 'react'
 import cx from 'classnames'
 import { EuiTextColor } from '@elastic/eui'
-import { CellMeasurer, List, CellMeasurerCache, ListRowProps } from 'react-virtualized'
+import { ListChildComponentProps, ListOnScrollProps, VariableSizeList as List } from 'react-window'
 
 import { DEFAULT_ERROR_MESSAGE, getFormatTime } from 'uiSrc/utils'
 
 import styles from 'uiSrc/components/monitor/Monitor/styles.module.scss'
-import 'react-virtualized/styles.css'
 
 export interface Props {
   compressed: boolean
@@ -18,28 +17,67 @@ export interface Props {
 const PROTRUDING_OFFSET = 2
 const MIDDLE_SCREEN_RESOLUTION = 460
 const SMALL_SCREEN_RESOLUTION = 360
+const MIN_ROW_HEIGHT = 17
 
 const MonitorOutputList = (props: Props) => {
   const { compressed, items = [], width = 0, height = 0 } = props
 
-  const cache = new CellMeasurerCache({
-    defaultHeight: 17,
-    fixedWidth: true,
-    fixedHeight: false
-  })
-
+  const autoScrollRef = useRef<boolean>(true)
+  const rowHeights = useRef<{ [key: number]: number }>({})
+  const outerRef = useRef<HTMLDivElement>(null)
   const listRef = useRef<List>(null)
+  const hasMountedRef = useRef<boolean>(false)
+
+  useEffect(() => {
+    if (autoScrollRef.current) {
+      setTimeout(() => {
+        scrollToBottom()
+      }, 0)
+    }
+  }, [items])
+
+  const getRowHeight = (index: number) => (
+    rowHeights.current[index] > MIN_ROW_HEIGHT ? (rowHeights.current[index] + 2) : MIN_ROW_HEIGHT
+  )
+
+  const setRowHeight = (index: number, size: number) => {
+    listRef.current?.resetAfterIndex(0)
+    if (size > MIN_ROW_HEIGHT) {
+      rowHeights.current[index] = size
+      return
+    }
+
+    if (rowHeights.current[index]) {
+      delete rowHeights.current[index]
+    }
+  }
 
-  const clearCacheAndUpdate = () => {
-    listRef?.current?.scrollToRow(items.length - 1)
+  const scrollToBottom = () => {
+    listRef.current?.scrollToItem(items.length - 1, 'end')
     requestAnimationFrame(() => {
-      listRef?.current?.scrollToRow(items.length - 1)
+      listRef.current?.scrollToItem(items.length - 1, 'end')
     })
   }
 
-  useEffect(() => {
-    clearCacheAndUpdate()
-  }, [items])
+  const handleScroll = useCallback((e: ListOnScrollProps) => {
+    if (!hasMountedRef.current) {
+      hasMountedRef.current = true
+      return
+    }
+
+    if (!outerRef.current) {
+      return
+    }
+
+    if (e.scrollOffset + outerRef.current.offsetHeight === outerRef.current.scrollHeight) {
+      autoScrollRef.current = true
+      return
+    }
+
+    if (!e.scrollUpdateWasRequested) {
+      autoScrollRef.current = false
+    }
+  }, [])
 
   const getArgs = (args: string[]): JSX.Element => (
     <span className={cx(styles.itemArgs, { [styles.itemArgs__compressed]: compressed })}>
@@ -54,51 +92,47 @@ const MonitorOutputList = (props: Props) => {
     </span>
   )
 
-  const rowRenderer = ({ parent, index, key, style }: ListRowProps) => {
+  const Row = ({ index, style }: ListChildComponentProps) => {
     const { time = '', args = [], database = '', source = '', isError, message = '' } = items[index]
+    const rowRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+      if (!rowRef.current) return
+      setRowHeight(index, rowRef.current?.clientHeight)
+    }, [rowRef])
+
     return (
-      <CellMeasurer
-        cache={cache}
-        columnIndex={0}
-        key={key}
-        parent={parent}
-        rowIndex={index}
-      >
-        {({ registerChild, measure }) => (
-          <div onLoad={measure} className={styles.item} ref={registerChild} style={style}>
-            {!isError && (
-              <>
-                {width > MIDDLE_SCREEN_RESOLUTION && (
-                  <span className={cx(styles.time)}>
-                    {getFormatTime(time)}
-                    &nbsp;
-                  </span>
-                )}
-                {width > SMALL_SCREEN_RESOLUTION && (<span>{`[${database} ${source}] `}</span>)}
-                <span>{getArgs(args)}</span>
-              </>
-            )}
-            {isError && (
-              <EuiTextColor color="danger">{message ?? DEFAULT_ERROR_MESSAGE}</EuiTextColor>
+      <div style={style} className={styles.item} data-testid={`row-${index}`}>
+        {!isError && (
+          <div ref={rowRef}>
+            {width > MIDDLE_SCREEN_RESOLUTION && (
+              <span className={cx(styles.time)}>{getFormatTime(time)}&nbsp;</span>
             )}
+            {width > SMALL_SCREEN_RESOLUTION && (<span>{`[${database} ${source}] `}</span>)}
+            <span>{getArgs(args)}</span>
           </div>
         )}
-      </CellMeasurer>
+        {isError && (
+          <EuiTextColor color="danger">{message ?? DEFAULT_ERROR_MESSAGE}</EuiTextColor>
+        )}
+      </div>
     )
   }
 
   return (
     <List
+      height={height}
+      itemCount={items.length}
+      itemSize={getRowHeight}
       ref={listRef}
       width={width - PROTRUDING_OFFSET}
-      height={height - PROTRUDING_OFFSET}
-      rowCount={items.length}
-      rowHeight={cache.rowHeight}
-      rowRenderer={rowRenderer}
-      overscanRowCount={30}
       className={styles.listWrapper}
-      deferredMeasurementCache={cache}
-    />
+      outerRef={outerRef}
+      onScroll={handleScroll}
+      overscanCount={30}
+    >
+      {Row}
+    </List>
   )
 }
 

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

@@ -40,7 +40,6 @@ const MonitorWrapper = () => {
     <section className={styles.monitorWrapper} data-testid="monitor-container">
       <MonitorHeader handleRunMonitor={handleRunMonitor} />
       <Monitor
-        scrollViewOnAppear
         items={items}
         error={error}
         isStarted={isStarted}

redisinsight/ui/src/pages/pubSub/components/messages-list/MessagesList/MessagesList.tsx

@@ -76,8 +76,8 @@ const MessagesList = (props: Props) => {
       return
     }
 
-    if (e.scrollUpdateWasRequested === false) {
-      if (followRef.current && outerRef.current.scrollHeight !== outerRef.current.offsetHeight) {
+    if (!e.scrollUpdateWasRequested) {
+      if (followRef.current && outerRef.current?.scrollHeight !== outerRef.current?.offsetHeight) {
         sendEventTelemetry({
           event: TelemetryEvent.PUBSUB_AUTOSCROLL_PAUSED,
           eventData: {

redisinsight/ui/src/slices/cli/monitor.ts

@@ -26,7 +26,7 @@ export const initialState: StateMonitor = {
   }
 }
 
-export const MONITOR_ITEMS_MAX_COUNT = 5_000
+export const MONITOR_ITEMS_MAX_COUNT = 10_000
 
 // A slice for recipes
 const monitorSlice = createSlice({
@@ -114,17 +114,17 @@ const monitorSlice = createSlice({
     concatMonitorItems: (state, { payload }: { payload: IMonitorDataPayload[] }) => {
       // small optimization to not unnecessary concat big arrays since we know max logs to show limitations
       if (payload.length >= MONITOR_ITEMS_MAX_COUNT) {
-        state.items = [...payload.slice(-MONITOR_ITEMS_MAX_COUNT)]
+        state.items = payload.slice(-MONITOR_ITEMS_MAX_COUNT)
         return
       }
 
-      let newItems = [...state.items, ...payload]
-
-      if (newItems.length > MONITOR_ITEMS_MAX_COUNT) {
-        newItems = newItems.slice(newItems.length - MONITOR_ITEMS_MAX_COUNT)
+      if (state.items.length + payload.length >= MONITOR_ITEMS_MAX_COUNT) {
+        // concat is faster for arrays
+        state.items = state.items.slice(payload.length - MONITOR_ITEMS_MAX_COUNT).concat(payload)
+        return
       }
 
-      state.items = newItems
+      state.items = state.items.concat(payload)
     },
 
     resetMonitorItems: (state) => {