Merge pull request #4228 from RedisInsight/fe/feature/RI-6330-disable-the-overview-refresh

Fe/feature/ri-6330 Disable the overview refresh

Author: mariasergeenko

redisinsight/ui/src/components/auto-refresh/AutoRefresh.spec.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { instance, mock } from 'ts-mockito'
 import { fireEvent, screen, render, act } from 'uiSrc/utils/test-utils'
+import { localStorageService } from 'uiSrc/services'
 import AutoRefresh, { Props } from './AutoRefresh'
 import { DEFAULT_REFRESH_RATE } from './utils'
 
@@ -9,6 +10,11 @@ const mockedProps = mock<Props>()
 const INLINE_ITEM_EDITOR = 'inline-item-editor'
 
 describe('AutoRefresh', () => {
+  beforeEach(() => {
+    // Clear any stored refresh rate before each test
+    jest.clearAllMocks()
+    jest.spyOn(localStorageService, 'get').mockImplementation(() => null)
+  })
   it('should render', () => {
     expect(render(<AutoRefresh {...instance(mockedProps)} />)).toBeTruthy()
   })
@@ -25,6 +31,18 @@ describe('AutoRefresh', () => {
     expect(queryByTestId('refresh-message-label')).not.toBeInTheDocument()
   })
 
+  it('prop "displayLastRefresh = true" should show refresh time message', () => {
+    const { queryByTestId } = render(<AutoRefresh {...instance(mockedProps)} displayLastRefresh />)
+
+    expect(queryByTestId('refresh-message')).toBeInTheDocument()
+  })
+
+  it('prop "displayLastRefresh = false" should hide refresh time message', () => {
+    const { queryByTestId } = render(<AutoRefresh {...instance(mockedProps)} displayLastRefresh={false} />)
+
+    expect(queryByTestId('refresh-message')).not.toBeInTheDocument()
+  })
+
   it('should call onRefresh', () => {
     const onRefresh = jest.fn()
     render(<AutoRefresh {...instance(mockedProps)} onRefresh={onRefresh} />)
@@ -132,6 +150,67 @@ describe('AutoRefresh', () => {
       })
       expect(onRefresh).toBeCalledTimes(3)
     })
+
+    it('should respect minimumRefreshRate when setting refresh rate', async () => {
+      const onChangeAutoRefreshRate = jest.fn()
+      const minimumRefreshRate = 6
+      render(
+        <AutoRefresh
+          {...instance(mockedProps)}
+          minimumRefreshRate={minimumRefreshRate}
+          onChangeAutoRefreshRate={onChangeAutoRefreshRate}
+        />
+      )
+
+      fireEvent.click(screen.getByTestId('auto-refresh-config-btn'))
+      fireEvent.click(screen.getByTestId('refresh-rate'))
+      fireEvent.change(screen.getByTestId(INLINE_ITEM_EDITOR), { target: { value: (minimumRefreshRate / 2).toString() } })
+      screen.getByTestId(/apply-btn/).click()
+      expect(onChangeAutoRefreshRate).toHaveBeenLastCalledWith(false, minimumRefreshRate.toString())
+    })
+
+    it('should allow valid refresh rates above minimumRefreshRate', async () => {
+      const onChangeAutoRefreshRate = jest.fn()
+      const minimumRefreshRate = 6
+      render(
+        <AutoRefresh
+          {...instance(mockedProps)}
+          minimumRefreshRate={minimumRefreshRate}
+          onChangeAutoRefreshRate={onChangeAutoRefreshRate}
+        />
+      )
+
+      fireEvent.click(screen.getByTestId('auto-refresh-config-btn'))
+      fireEvent.click(screen.getByTestId('refresh-rate'))
+      fireEvent.change(
+        screen.getByTestId(INLINE_ITEM_EDITOR),
+        { target: { value: (minimumRefreshRate * 2).toString() } }
+      )
+      screen.getByTestId(/apply-btn/).click()
+
+      expect(onChangeAutoRefreshRate).toHaveBeenLastCalledWith(false, (minimumRefreshRate * 2).toString())
+    })
+
+    it('should use defaultRefreshRate when provided', () => {
+      const customDefaultRate = '30'
+      render(
+        <AutoRefresh
+          {...instance(mockedProps)}
+          defaultRefreshRate={customDefaultRate}
+        />
+      )
+
+      fireEvent.click(screen.getByTestId('auto-refresh-config-btn'))
+      expect(screen.getByTestId('refresh-rate')).toHaveTextContent(`${customDefaultRate} s`)
+    })
+
+    it('should use DEFAULT_REFRESH_RATE when defaultRefreshRate is not provided', () => {
+      render(<AutoRefresh {...instance(mockedProps)} />)
+
+      // Open config and check default value
+      fireEvent.click(screen.getByTestId('auto-refresh-config-btn'))
+      expect(screen.getByTestId('refresh-rate')).toHaveTextContent(`${DEFAULT_REFRESH_RATE} s`)
+    })
   })
 
   it('should NOT call onRefresh with disabled state', async () => {

redisinsight/ui/src/components/auto-refresh/AutoRefresh.tsx

@@ -26,6 +26,7 @@ export interface Props {
   postfix: string
   loading: boolean
   displayText?: boolean
+  displayLastRefresh?: boolean
   lastRefreshTime: Nullable<number>
   testid?: string
   containerClassName?: string
@@ -34,6 +35,8 @@ export interface Props {
   onRefreshClicked?: () => void
   onEnableAutoRefresh?: (enableAutoRefresh: boolean, refreshRate: string) => void
   onChangeAutoRefreshRate?: (enableAutoRefresh: boolean, refreshRate: string) => void
+  minimumRefreshRate?: number
+  defaultRefreshRate?: string
   iconSize?: EuiButtonIconSizes
   disabled?: boolean
   enableAutoRefreshDefault?: boolean
@@ -45,6 +48,7 @@ const AutoRefresh = ({
   postfix,
   loading,
   displayText = true,
+  displayLastRefresh = true,
   lastRefreshTime,
   containerClassName = '',
   testid = '',
@@ -55,14 +59,16 @@ const AutoRefresh = ({
   onChangeAutoRefreshRate,
   iconSize = 'm',
   disabled,
+  minimumRefreshRate,
+  defaultRefreshRate,
   enableAutoRefreshDefault = false
 }: Props) => {
   let intervalText: NodeJS.Timeout
   let intervalRefresh: NodeJS.Timeout
 
   const [refreshMessage, setRefreshMessage] = useState(NOW)
   const [isPopoverOpen, setIsPopoverOpen] = useState(false)
-  const [refreshRate, setRefreshRate] = useState<string>('')
+  const [refreshRate, setRefreshRate] = useState<string>(defaultRefreshRate || '')
   const [refreshRateMessage, setRefreshRateMessage] = useState<string>('')
   const [enableAutoRefresh, setEnableAutoRefresh] = useState(enableAutoRefreshDefault)
   const [editingRate, setEditingRate] = useState(false)
@@ -75,7 +81,7 @@ const AutoRefresh = ({
 
   useEffect(() => {
     const refreshRateStorage = localStorageService.get(BrowserStorageItem.autoRefreshRate + postfix)
-      || DEFAULT_REFRESH_RATE
+      || defaultRefreshRate || DEFAULT_REFRESH_RATE
 
     setRefreshRate(refreshRateStorage)
   }, [postfix])
@@ -121,14 +127,13 @@ const AutoRefresh = ({
     return () => clearInterval(intervalRefresh)
   }, [enableAutoRefresh, refreshRate, loading, disabled, lastRefreshTime])
 
-  const getLastRefreshDelta = (time:Nullable<number>) => (Date.now() - (time || 0)) / 1_000
+  const getLastRefreshDelta = (time: Nullable<number>) => (Date.now() - (time || 0)) / 1_000
 
   const getDataTestid = (suffix: string) => (testid ? `${testid}-${suffix}` : suffix)
 
   const updateLastRefresh = () => {
     const delta = getLastRefreshDelta(lastRefreshTime)
     const text = getTextByRefreshTime(delta, lastRefreshTime ?? 0)
-
     lastRefreshTime && setRefreshMessage(text)
   }
 
@@ -140,7 +145,8 @@ const AutoRefresh = ({
   }
 
   const handleApplyAutoRefreshRate = (initValue: string) => {
-    const value = +initValue >= MIN_REFRESH_RATE ? initValue : `${MIN_REFRESH_RATE}`
+    const minRefreshRate = minimumRefreshRate || MIN_REFRESH_RATE
+    const value = +initValue >= minRefreshRate ? initValue : `${minRefreshRate}`
     setRefreshRate(value)
     setEditingRate(false)
     localStorageService.set(BrowserStorageItem.autoRefreshRate + postfix, value)
@@ -167,14 +173,16 @@ const AutoRefresh = ({
   }
 
   return (
-    <div className={cx(styles.container, containerClassName, { [styles.enable]: !disabled && enableAutoRefresh })}>
+    <div className={cx(styles.container, containerClassName, { [styles.enable]: !disabled && enableAutoRefresh })} data-testid={getDataTestid('auto-refresh-container')}>
       <EuiTextColor className={styles.summary}>
         {displayText && (
           <span data-testid={getDataTestid('refresh-message-label')}>{enableAutoRefresh ? 'Auto refresh:' : 'Last refresh:'}</span>
         )}
-        <span className={cx('refresh-message-time', styles.time, { [styles.disabled]: disabled })} data-testid={getDataTestid('refresh-message')}>
-          {` ${enableAutoRefresh ? refreshRateMessage : refreshMessage}`}
-        </span>
+        {displayLastRefresh && (
+          <span className={cx('refresh-message-time', styles.time, { [styles.disabled]: disabled })} data-testid={getDataTestid('refresh-message')}>
+            {` ${enableAutoRefresh ? refreshRateMessage : refreshMessage}`}
+          </span>
+        )}
       </EuiTextColor>
 
       <EuiToolTip

redisinsight/ui/src/components/auto-refresh/styles.module.scss

@@ -144,4 +144,4 @@
       display: inline-block !important;
     }
   }
-}
+}

redisinsight/ui/src/components/database-overview/DatabaseOverview.spec.tsx

@@ -19,9 +19,53 @@ const overviewMetrics = getOverviewMetrics({
 })
 
 describe('DatabaseOverview', () => {
-  it('should render', () => {
-    expect(render(
-      <DatabaseOverview metrics={overviewMetrics} />
-    )).toBeTruthy()
+  const mockLoadData = jest.fn()
+  const mockHandleEnableAutoRefresh = jest.fn()
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should render with metrics', () => {
+    const { container } = render(
+      <DatabaseOverview
+        metrics={overviewMetrics}
+        loadData={mockLoadData}
+        lastRefreshTime={null}
+        handleEnableAutoRefresh={mockHandleEnableAutoRefresh}
+      />
+    )
+
+    expect(container.querySelector('[data-test-subj="overview-cpu"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-test-subj="overview-commands-sec"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-test-subj="overview-total-memory"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-test-subj="overview-total-keys"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-test-subj="overview-connected-clients"]')).toBeInTheDocument()
+  })
+
+  it('should render auto-refresh component', () => {
+    const { container } = render(
+      <DatabaseOverview
+        metrics={overviewMetrics}
+        loadData={mockLoadData}
+        lastRefreshTime={Date.now()}
+        handleEnableAutoRefresh={mockHandleEnableAutoRefresh}
+      />
+    )
+
+    expect(container.querySelector('[data-testid="auto-refresh-overview-auto-refresh-container"]')).toBeInTheDocument()
+  })
+
+  it('should not render anything when metrics are empty', () => {
+    const { container } = render(
+      <DatabaseOverview
+        metrics={[]}
+        loadData={mockLoadData}
+        lastRefreshTime={null}
+        handleEnableAutoRefresh={mockHandleEnableAutoRefresh}
+      />
+    )
+
+    expect(container.firstChild?.childNodes.length).toBe(0)
   })
 })