#RI-2913-table height, fetchstream requests, #RI-2912-cursor

redisinsight/ui/src/components/range-filter/RangeFilter.spec.tsx

@@ -26,7 +26,7 @@ describe('RangeFilter', () => {
     )
     const startRangeInput = screen.getByTestId(startRangeTestId)
 
-    fireEvent.change(
+    fireEvent.mouseUp(
       startRangeInput,
       { target: { value: 123 } }
     )
@@ -45,7 +45,7 @@ describe('RangeFilter', () => {
     )
     const endRangeInput = screen.getByTestId(endRangeTestId)
 
-    fireEvent.change(
+    fireEvent.mouseUp(
       endRangeInput,
       { target: { value: 15 } }
     )

redisinsight/ui/src/components/range-filter/RangeFilter.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef } from 'react'
+import React, { useCallback, useState, useEffect, useRef } from 'react'
 import cx from 'classnames'
 
 import { getFormatTime, } from 'uiSrc/utils/streamUtils'
@@ -27,6 +27,9 @@ function usePrevious(value: any) {
 const RangeFilter = (props: Props) => {
   const { max, min, start, end, handleChangeStart, handleChangeEnd } = props
 
+  const [startVal, setStartVal] = useState(start)
+  const [endVal, setEndVal] = useState(end)
+
   const getPercent = useCallback(
     (value) => Math.round(((value - min) / (max - min)) * 100),
     [min, max]
@@ -47,43 +50,63 @@ const RangeFilter = (props: Props) => {
   )
 
   const onChangeStart = useCallback(
-    (event) => {
-      const value = Math.min(+event.target.value, end - 1)
+    ({ target: { value } }) => {
+      setStartVal(value)
+    },
+    []
+  )
+
+  const onMouseUpStart = useCallback(
+    ({ target: { value } }) => {
       handleChangeStart(value)
     },
-    [end]
+    []
   )
 
-  const onChangeEnd = useCallback(
-    (event) => {
-      const value = Math.max(+event.target.value, start + 1)
+  const onMouseUpEnd = useCallback(
+    ({ target: { value } }) => {
       handleChangeEnd(value)
     },
-    [start]
+    []
+  )
+
+  const onChangeEnd = useCallback(
+    ({ target: { value } }) => {
+      setEndVal(value)
+    },
+    []
   )
 
   useEffect(() => {
     if (maxValRef.current) {
-      const minPercent = getPercent(start)
+      const minPercent = getPercent(startVal)
       const maxPercent = getPercent(+maxValRef.current.value)
 
       if (range.current) {
         range.current.style.left = `${minPercent}%`
         range.current.style.width = `${maxPercent - minPercent}%`
       }
     }
-  }, [start, getPercent])
+  }, [startVal, getPercent])
 
   useEffect(() => {
     if (minValRef.current) {
       const minPercent = getPercent(+minValRef.current.value)
-      const maxPercent = getPercent(end)
+      const maxPercent = getPercent(endVal)
 
       if (range.current) {
         range.current.style.width = `${maxPercent - minPercent}%`
       }
     }
-  }, [end, getPercent])
+  }, [endVal, getPercent])
+
+  useEffect(() => {
+    setStartVal(start)
+  }, [start])
+
+  useEffect(() => {
+    setEndVal(end)
+  }, [end])
 
   useEffect(() => {
     if (max && prevValue && prevValue.max !== max && end === prevValue.max) {
@@ -117,19 +140,21 @@ const RangeFilter = (props: Props) => {
           type="range"
           min={min}
           max={max}
-          value={start}
+          value={startVal}
           ref={minValRef}
           onChange={onChangeStart}
+          onMouseUp={onMouseUpStart}
           className={cx(styles.thumb, styles.thumbZindex3)}
           data-testid="range-start-input"
         />
         <input
           type="range"
           min={min}
           max={max}
-          value={end}
+          value={endVal}
           ref={maxValRef}
           onChange={onChangeEnd}
+          onMouseUp={onMouseUpEnd}
           className={cx(styles.thumb, styles.thumbZindex4)}
           data-testid="range-end-input"
         />

redisinsight/ui/src/components/range-filter/styles.module.scss

@@ -92,7 +92,7 @@
   height: 12px;
   background-color: var(--euiColorPrimary);
   border: none;
-  cursor: pointer;
+  cursor: ew-resize;
   margin-top: 4px;
   pointer-events: all;
   position: relative;
@@ -111,7 +111,7 @@ input[type='range']::-webkit-slider-thumb {
   height: 12px;
   background-color: var(--euiColorPrimary);
   border: none;
-  cursor: pointer;
+  cursor: ew-resize;
   margin-top: 4px;
   pointer-events: all;
   position: relative;

redisinsight/ui/src/components/virtual-table/styles.module.scss

@@ -162,7 +162,7 @@ $footerHeight: 38px;
 }
 
 :global(.key-details-table) {
-  height: calc(100% - 38px);
+  height: calc(100% - 94px);
   position: relative;
   &:global(.footerOpened) {
     :global(.ReactVirtualized__Table__Grid) {

redisinsight/ui/src/pages/browser/components/stream-details/StreamDetails/StreamDetails.tsx

@@ -94,7 +94,7 @@ const StreamDetails = (props: Props) => {
     setSortedColumnName(column)
     setSortedColumnOrder(order)
 
-    dispatch(fetchStreamEntries(key, SCAN_COUNT_DEFAULT, order))
+    dispatch(fetchStreamEntries(key, SCAN_COUNT_DEFAULT, order, false))
   }
 
   const handleChangeStartFilter = useCallback(

redisinsight/ui/src/slices/browser/stream.ts

@@ -1,12 +1,12 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
-import { AxiosError } from 'axios'
+import axios, { AxiosError, CancelTokenSource } from 'axios'
 import { remove } from 'lodash'
 
 import { apiService } from 'uiSrc/services'
 import { SCAN_COUNT_DEFAULT } from 'uiSrc/constants/api'
 import { ApiEndpoints, SortOrder } from 'uiSrc/constants'
 import { fetchKeyInfo, refreshKeyInfoAction, } from 'uiSrc/slices/browser/keys'
-import { getApiErrorMessage, getUrl, isStatusSuccessful, Maybe } from 'uiSrc/utils'
+import { getApiErrorMessage, getUrl, isStatusSuccessful, Maybe, Nullable } from 'uiSrc/utils'
 import { getStreamRangeStart, getStreamRangeEnd } from 'uiSrc/utils/streamUtils'
 import successMessages from 'uiSrc/components/notifications/success-messages'
 import {
@@ -159,6 +159,9 @@ export const streamRangeSelector = (state: RootState) => state.browser.stream?.r
 // The reducer
 export default streamSlice.reducer
 
+// eslint-disable-next-line import/no-mutable-exports
+export let sourceStreamFetch: Nullable<CancelTokenSource> = null
+
 // Asynchronous thunk action
 export function fetchStreamEntries(
   key: string,
@@ -171,6 +174,11 @@ export function fetchStreamEntries(
     dispatch(loadEntries(resetData))
 
     try {
+      sourceStreamFetch?.cancel?.()
+
+      const { CancelToken } = axios
+      sourceStreamFetch = CancelToken.source()
+
       const state = stateInit()
       const start = getStreamRangeStart(state.browser.stream.range.start, state.browser.stream.data.firstEntry?.id)
       const end = getStreamRangeEnd(state.browser.stream.range.end, state.browser.stream.data.lastEntry?.id)
@@ -185,18 +193,22 @@ export function fetchStreamEntries(
           end,
           count,
           sortOrder
-        }
+        },
+        { cancelToken: sourceStreamFetch.token }
       )
 
+      sourceStreamFetch = null
       if (isStatusSuccessful(status)) {
         dispatch(loadEntriesSuccess([data, sortOrder]))
         onSuccess?.(data)
       }
     } catch (_err) {
-      const error = _err as AxiosError
-      const errorMessage = getApiErrorMessage(error)
-      dispatch(addErrorNotification(error))
-      dispatch(loadEntriesFailure(errorMessage))
+      if (!axios.isCancel(_err)) {
+        const error = _err as AxiosError
+        const errorMessage = getApiErrorMessage(error)
+        dispatch(addErrorNotification(error))
+        dispatch(loadEntriesFailure(errorMessage))
+      }
     }
   }
 }
@@ -210,6 +222,11 @@ export function refreshStreamEntries(
     dispatch(loadEntries(resetData))
 
     try {
+      sourceStreamFetch?.cancel?.()
+
+      const { CancelToken } = axios
+      sourceStreamFetch = CancelToken.source()
+
       const state = stateInit()
       const { sortOrder } = state.browser.stream
       const start = getStreamRangeStart(state.browser.stream.range.start, state.browser.stream.data.firstEntry?.id)
@@ -225,17 +242,21 @@ export function refreshStreamEntries(
           end,
           sortOrder,
           count: SCAN_COUNT_DEFAULT,
-        }
+        },
+        { cancelToken: sourceStreamFetch.token }
       )
 
+      sourceStreamFetch = null
       if (isStatusSuccessful(status)) {
         dispatch(loadEntriesSuccess([data, sortOrder]))
       }
     } catch (_err) {
-      const error = _err as AxiosError
-      const errorMessage = getApiErrorMessage(error)
-      dispatch(addErrorNotification(error))
-      dispatch(loadEntriesFailure(errorMessage))
+      if (!axios.isCancel(_err)) {
+        const error = _err as AxiosError
+        const errorMessage = getApiErrorMessage(error)
+        dispatch(addErrorNotification(error))
+        dispatch(loadEntriesFailure(errorMessage))
+      }
     }
   }
 }
@@ -253,6 +274,10 @@ export function fetchMoreStreamEntries(
     dispatch(loadMoreEntries())
 
     try {
+      sourceStreamFetch?.cancel?.()
+
+      const { CancelToken } = axios
+      sourceStreamFetch = CancelToken.source()
       const state = stateInit()
       const { data, status } = await apiService.post<GetStreamEntriesResponse>(
         getUrl(
@@ -265,18 +290,22 @@ export function fetchMoreStreamEntries(
           end,
           count,
           sortOrder
-        }
+        },
+        { cancelToken: sourceStreamFetch.token }
       )
 
+      sourceStreamFetch = null
       if (isStatusSuccessful(status)) {
         dispatch(loadMoreEntriesSuccess(data))
         onSuccess?.(data)
       }
     } catch (_err) {
-      const error = _err as AxiosError
-      const errorMessage = getApiErrorMessage(error)
-      dispatch(addErrorNotification(error))
-      dispatch(loadMoreEntriesFailure(errorMessage))
+      if (!axios.isCancel(_err)) {
+        const error = _err as AxiosError
+        const errorMessage = getApiErrorMessage(error)
+        dispatch(addErrorNotification(error))
+        dispatch(loadMoreEntriesFailure(errorMessage))
+      }
     }
   }
 }