Merge pull request #1425 from RedisInsight/fe/feature/RI-3804_optimize-ls

#RI-3804 - optimize LS instances data

Author: vlad-dargel

redisinsight/ui/src/pages/browser/components/key-tree/KeyTree.tsx

@@ -1,10 +1,11 @@
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState, useTransition } from 'react'
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState, useTransition } from 'react'
 import cx from 'classnames'
 import { EuiResizableContainer } from '@elastic/eui'
 import { useDispatch, useSelector } from 'react-redux'
 
 import {
   appContextBrowserTree,
+  appContextDbConfig,
   setBrowserTreeNodesOpen,
   setBrowserTreeSelectedLeaf
 } from 'uiSrc/slices/app/context'
@@ -39,7 +40,8 @@ const KeyTree = forwardRef((props: Props, ref) => {
   const firstPanelId = 'tree'
   const secondPanelId = 'keys'
 
-  const { delimiter, panelSizes, openNodes, selectedLeaf } = useSelector(appContextBrowserTree)
+  const { panelSizes, openNodes, selectedLeaf } = useSelector(appContextBrowserTree)
+  const { treeViewDelimiter: delimiter = '' } = useSelector(appContextDbConfig)
 
   const [,startTransition] = useTransition()
 

redisinsight/ui/src/pages/browser/components/key-tree/KeyTreeDelimiter/KeyTreeDelimiter.spec.tsx

@@ -3,7 +3,6 @@ import React from 'react'
 import { instance, mock } from 'ts-mockito'
 import { DEFAULT_DELIMITER } from 'uiSrc/constants'
 import { setBrowserTreeDelimiter } from 'uiSrc/slices/app/context'
-import { localStorageService } from 'uiSrc/services'
 import {
   cleanup,
   clearStoreActions,
@@ -57,37 +56,6 @@ describe('KeyTreeDelimiter', () => {
     expect(screen.getByTestId(DELIMITER_INPUT)).toBeInTheDocument()
   })
 
-  it('"setBrowserTreeDelimiter" should be called with value for LocalStorage after render', async () => {
-    jest.useFakeTimers()
-    const localStorageValue = 'test'
-    localStorageService.get = jest.fn().mockReturnValue(localStorageValue)
-
-    render(<KeyTreeDelimiter {...instance(mockedProps)} />)
-
-    jest.advanceTimersByTime(0)
-
-    const expectedActions = [setBrowserTreeDelimiter(localStorageValue)]
-
-    expect(clearStoreActions(store.getActions())).toEqual(
-      clearStoreActions(expectedActions)
-    )
-  })
-
-  it('"setBrowserTreeDelimiter" should be called with DEFAULT_DELIMITER after render', async () => {
-    jest.useFakeTimers()
-    const localStorageValue = ''
-    localStorageService.get = jest.fn().mockReturnValue(localStorageValue)
-    render(<KeyTreeDelimiter {...instance(mockedProps)} />)
-
-    jest.advanceTimersByTime(0)
-
-    const expectedActions = [setBrowserTreeDelimiter(DEFAULT_DELIMITER)]
-
-    expect(clearStoreActions(store.getActions())).toEqual(
-      clearStoreActions(expectedActions)
-    )
-  })
-
   it('"setBrowserTreeDelimiter" should be called after Apply change delimiter', async () => {
     const value = 'val'
     render(<KeyTreeDelimiter {...instance(mockedProps)} />)

redisinsight/ui/src/pages/browser/components/key-tree/KeyTreeDelimiter/KeyTreeDelimiter.tsx

@@ -1,15 +1,14 @@
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import cx from 'classnames'
 import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
 import { EuiIcon, EuiPopover } from '@elastic/eui'
 
 import { replaceSpaces } from 'uiSrc/utils'
-import { localStorageService } from 'uiSrc/services'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import InlineItemEditor from 'uiSrc/components/inline-item-editor'
-import { BrowserStorageItem, DEFAULT_DELIMITER } from 'uiSrc/constants'
-import { appContextBrowserTree, setBrowserTreeDelimiter } from 'uiSrc/slices/app/context'
+import { DEFAULT_DELIMITER } from 'uiSrc/constants'
+import { appContextDbConfig, setBrowserTreeDelimiter } from 'uiSrc/slices/app/context'
 
 import styles from './styles.module.scss'
 
@@ -19,24 +18,14 @@ export interface Props {
 const MAX_DELIMITER_LENGTH = 5
 const KeyTreeDelimiter = ({ loading }: Props) => {
   const { instanceId = '' } = useParams<{ instanceId: string }>()
-  const { delimiter = '' } = useSelector(appContextBrowserTree)
+  const { treeViewDelimiter: delimiter = '' } = useSelector(appContextDbConfig)
   const [isPopoverOpen, setIsPopoverOpen] = useState(false)
 
   const dispatch = useDispatch()
 
   const onButtonClick = () => setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen)
   const closePopover = () => setIsPopoverOpen(false)
 
-  useEffect(() => {
-    const delimiterStorage = localStorageService.get(BrowserStorageItem.treeViewDelimiter + instanceId)
-      || delimiter
-      || DEFAULT_DELIMITER
-
-    setTimeout(() => {
-      dispatch(setBrowserTreeDelimiter(delimiterStorage))
-    }, 0)
-  }, [])
-
   const button = (
     <div
       onClick={onButtonClick}

redisinsight/ui/src/pages/databaseAnalysis/components/header/Header.tsx

@@ -15,11 +15,9 @@ import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
 
 import { createNewAnalysis } from 'uiSrc/slices/analytics/dbAnalysis'
-import { localStorageService } from 'uiSrc/services'
 import { numberWithSpaces } from 'uiSrc/utils/numbers'
 import { getApproximatePercentage } from 'uiSrc/utils/validations'
-import { BrowserStorageItem, DEFAULT_DELIMITER } from 'uiSrc/constants'
-import { appContextBrowserTree } from 'uiSrc/slices/app/context'
+import { appContextDbConfig } from 'uiSrc/slices/app/context'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { ConnectionType } from 'uiSrc/slices/interfaces'
 import AnalyticsTabs from 'uiSrc/components/analytics-tabs'
@@ -56,11 +54,7 @@ const Header = (props: Props) => {
   const { instanceId } = useParams<{ instanceId: string }>()
   const dispatch = useDispatch()
 
-  const { delimiter = '' } = useSelector(appContextBrowserTree)
-
-  const delimiterStorage = localStorageService.get(BrowserStorageItem.treeViewDelimiter + instanceId)
-    || delimiter
-    || DEFAULT_DELIMITER
+  const { treeViewDelimiter: delimiter = '' } = useSelector(appContextDbConfig)
 
   const analysisOptions: EuiSuperSelectOption<any>[] = items.map((item) => {
     const { createdAt, id } = item
@@ -80,7 +74,7 @@ const Header = (props: Props) => {
         databaseId: instanceId,
       }
     })
-    dispatch(createNewAnalysis(instanceId, delimiterStorage))
+    dispatch(createNewAnalysis(instanceId, delimiter))
   }
 
   return (
@@ -135,7 +129,7 @@ const Header = (props: Props) => {
         )}
         <EuiFlexItem grow={false}>
           <EuiFlexGroup gutterSize="none" alignItems="center" responsive={false}>
-            <EuiFlexItem style={{ overflow: 'hidden' }}>
+            <EuiFlexItem>
               <EuiButton
                 aria-label="New reports"
                 fill

redisinsight/ui/src/pages/home/HomePage.tsx

@@ -7,7 +7,7 @@ import {
   resetDataRedisCluster,
   resetInstancesRedisCluster,
 } from 'uiSrc/slices/instances/cluster'
-import { setTitle } from 'uiSrc/utils'
+import { optimizeLSInstances, setTitle } from 'uiSrc/utils'
 import { PageHeader } from 'uiSrc/components'
 import { BrowserStorageItem } from 'uiSrc/constants'
 import { Instance } from 'uiSrc/slices/interfaces'
@@ -93,6 +93,9 @@ const HomePage = () => {
         name: TelemetryPageView.DATABASES_LIST_PAGE
       })
     }
+    if (instances.length && !isPageViewSent) {
+      optimizeLSInstances(instances)
+    }
   }, [instances, analyticsIdentified, isPageViewSent, isChangedInstance])
 
   useEffect(() => {
@@ -168,6 +171,10 @@ const HomePage = () => {
       dispatch(setEditedInstance(null))
       setEditDialogIsOpen(false)
     }
+
+    instances.forEach((instance) => {
+      localStorageService.remove(BrowserStorageItem.dbConfig + instance.id)
+    })
   }
 
   const onResize = ({ width: innerWidth }: { width: number }) => {

redisinsight/ui/src/pages/instance/InstancePage.tsx

@@ -15,6 +15,7 @@ import {
   appContextSelector,
   setAppContextConnectedInstanceId,
   setAppContextInitialState,
+  setDbConfig,
 } from 'uiSrc/slices/app/context'
 import { resetPatternKeysData } from 'uiSrc/slices/browser/keys'
 import { BrowserStorageItem } from 'uiSrc/constants'
@@ -78,6 +79,7 @@ const InstancePage = ({ routes = [] }: Props) => {
     }
 
     dispatch(setAppContextConnectedInstanceId(connectionInstanceId))
+    dispatch(setDbConfig(localStorageService.get(BrowserStorageItem.dbConfig + connectionInstanceId)))
   }, [])
 
   useEffect(() => () => {

redisinsight/ui/src/pages/slowLog/SlowLogPage.tsx

@@ -15,6 +15,7 @@ import { AutoSizer } from 'react-virtualized'
 import { DEFAULT_SLOWLOG_MAX_LEN } from 'uiSrc/constants'
 import { DATE_FORMAT } from 'uiSrc/pages/slowLog/components/SlowLogTable/SlowLogTable'
 import { convertNumberByUnits } from 'uiSrc/pages/slowLog/utils'
+import { appContextDbConfig } from 'uiSrc/slices/app/context'
 import { appAnalyticsInfoSelector } from 'uiSrc/slices/app/info'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { ConnectionType } from 'uiSrc/slices/interfaces'
@@ -51,7 +52,8 @@ const countOptions: EuiSuperSelectOption<string>[] = [
 
 const SlowLogPage = () => {
   const { connectionType, name: connectedInstanceName, db } = useSelector(connectedInstanceSelector)
-  const { data, loading, durationUnit, config } = useSelector(slowLogSelector)
+  const { data, loading, config } = useSelector(slowLogSelector)
+  const { slowLogDurationUnit: durationUnit } = useSelector(appContextDbConfig)
   const { slowlogLogSlowerThan = 0, slowlogMaxLen } = useSelector(slowLogConfigSelector)
   const { identified: analyticsIdentified } = useSelector(appAnalyticsInfoSelector)
   const { viewTab } = useSelector(analyticsSettingsSelector)

redisinsight/ui/src/pages/slowLog/components/SlowLogConfig/SlowLogConfig.tsx

@@ -21,9 +21,8 @@ import {
   DURATION_UNITS,
   MINUS_ONE,
 } from 'uiSrc/constants'
+import { appContextDbConfig } from 'uiSrc/slices/app/context'
 import { ConnectionType } from 'uiSrc/slices/interfaces'
-import { ConfigDBStorageItem } from 'uiSrc/constants/storage'
-import { setDBConfigStorageField } from 'uiSrc/services'
 import { patchSlowLogConfigAction, slowLogConfigSelector, slowLogSelector } from 'uiSrc/slices/analytics/slowlog'
 import { errorValidateNegativeInteger, validateNumber } from 'uiSrc/utils'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
@@ -40,13 +39,14 @@ const SlowLogConfig = ({ closePopover, onRefresh }: Props) => {
   const options = DURATION_UNITS
   const { instanceId } = useParams<{ instanceId: string }>()
   const { connectionType } = useSelector(connectedInstanceSelector)
-  const { loading, durationUnit: durationUnitStore } = useSelector(slowLogSelector)
+  const { loading } = useSelector(slowLogSelector)
+  const { slowLogDurationUnit } = useSelector(appContextDbConfig)
   const {
     slowlogMaxLen = DEFAULT_SLOWLOG_MAX_LEN,
     slowlogLogSlowerThan = DEFAULT_SLOWLOG_SLOWER_THAN,
   } = useSelector(slowLogConfigSelector)
 
-  const [durationUnit, setDurationUnit] = useState(durationUnitStore ?? DEFAULT_SLOWLOG_DURATION_UNIT)
+  const [durationUnit, setDurationUnit] = useState(slowLogDurationUnit ?? DEFAULT_SLOWLOG_DURATION_UNIT)
   const [maxLen, setMaxLen] = useState(`${slowlogMaxLen}`)
 
   const [slowerThan, setSlowerThan] = useState(slowlogLogSlowerThan !== MINUS_ONE
@@ -96,8 +96,6 @@ const SlowLogConfig = ({ closePopover, onRefresh }: Props) => {
   }
 
   const onSuccess = () => {
-    setDBConfigStorageField(instanceId, ConfigDBStorageItem.slowLogDurationUnit, durationUnit)
-
     onRefresh(maxLen ? toNumber(maxLen) : DEFAULT_SLOWLOG_MAX_LEN)
     closePopover()
   }

redisinsight/ui/src/services/storage.ts

@@ -26,6 +26,10 @@ class StorageService {
     return null
   }
 
+  getAll() {
+    return this.storage
+  }
+
   set(itemName: string = '', item: any) {
     try {
       if (isObjectLike(item)) {

redisinsight/ui/src/slices/analytics/slowlog.ts

@@ -1,11 +1,11 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 import { AxiosError } from 'axios'
-import { ApiEndpoints, DEFAULT_SLOWLOG_DURATION_UNIT, DurationUnits } from 'uiSrc/constants'
-import { apiService, getDBConfigStorageField } from 'uiSrc/services'
+import { ApiEndpoints, DurationUnits } from 'uiSrc/constants'
+import { apiService } from 'uiSrc/services'
+import { setSlowLogUnits } from 'uiSrc/slices/app/context'
 import { addErrorNotification } from 'uiSrc/slices/app/notifications'
 import { StateSlowLog } from 'uiSrc/slices/interfaces/analytics'
-import { ConfigDBStorageItem } from 'uiSrc/constants/storage'
-import { getApiErrorMessage, getUrl, isStatusSuccessful, Nullable } from 'uiSrc/utils'
+import { getApiErrorMessage, getUrl, isStatusSuccessful } from 'uiSrc/utils'
 import { SlowLog, SlowLogConfig } from 'apiSrc/modules/slow-log/models'
 
 import { AppDispatch, RootState } from '../store'
@@ -15,7 +15,6 @@ export const initialState: StateSlowLog = {
   error: '',
   data: [],
   lastRefreshTime: null,
-  durationUnit: DurationUnits.microSeconds,
   config: null
 }
 
@@ -29,11 +28,10 @@ const slowLogSlice = createSlice({
     },
     getSlowLogsSuccess: (
       state,
-      { payload: [data, durationUnit] }: PayloadAction<[SlowLog[], DurationUnits]>
+      { payload: data }: PayloadAction<SlowLog[]>
     ) => {
       state.loading = false
       state.data = data
-      state.durationUnit = durationUnit
       state.lastRefreshTime = Date.now()
     },
     getSlowLogsError: (state, { payload }) => {
@@ -56,14 +54,10 @@ const slowLogSlice = createSlice({
     },
     getSlowLogConfigSuccess: (
       state,
-      { payload: [data, durationUnit] }: PayloadAction<[SlowLogConfig, Nullable<DurationUnits> ]>
+      { payload: data }: PayloadAction<SlowLogConfig>
     ) => {
       state.loading = false
       state.config = data
-
-      if (durationUnit) {
-        state.durationUnit = durationUnit
-      }
     },
     getSlowLogConfigError: (state, { payload }) => {
       state.loading = false
@@ -113,13 +107,7 @@ export function fetchSlowLogsAction(
       )
 
       if (isStatusSuccessful(status)) {
-        dispatch(
-          getSlowLogsSuccess([
-            data,
-            getDBConfigStorageField(instanceId, ConfigDBStorageItem.slowLogDurationUnit)
-              || DEFAULT_SLOWLOG_DURATION_UNIT
-          ])
-        )
+        dispatch(getSlowLogsSuccess(data))
 
         onSuccessAction?.(data)
       }
@@ -183,7 +171,7 @@ export function getSlowLogConfigAction(
       )
 
       if (isStatusSuccessful(status)) {
-        dispatch(getSlowLogConfigSuccess([data, null]))
+        dispatch(getSlowLogConfigSuccess(data))
 
         onSuccessAction?.()
       }
@@ -218,7 +206,8 @@ export function patchSlowLogConfigAction(
       )
 
       if (isStatusSuccessful(status)) {
-        dispatch(getSlowLogConfigSuccess([data, durationUnit]))
+        dispatch(getSlowLogConfigSuccess(data))
+        dispatch(setSlowLogUnits(durationUnit))
 
         onSuccessAction?.()
       }