Merge branch 'main' into bugfix/RI-3481-hide-terminal-while-running-deb-riv2

ALENA NABOKA · ALENA NABOKA · commit be4a887e5c3f · 2022-09-08T14:12:35.000+03:00
diff --git a/package.json b/package.json
@@ -226,6 +226,7 @@
     "html-entities": "^2.3.2",
     "html-react-parser": "^1.2.4",
     "java-object-serialization": "^0.1.1",
+    "jpickle": "^0.4.1",
     "jsonpath": "^1.1.1",
     "lodash": "^4.17.21",
     "php-serialize": "^4.0.2",
diff --git a/redisinsight/ui/src/constants/keys.ts b/redisinsight/ui/src/constants/keys.ts
@@ -172,5 +172,6 @@ export enum KeyValueFormat {
   Msgpack = 'Msgpack',
   PHP = 'PHP serialized',
   JAVA = 'Java serialized',
-  Protobuf = 'Protobuf'
+  Protobuf = 'Protobuf',
+  Pickle = 'Pickle',
 }
diff --git a/redisinsight/ui/src/constants/storage.ts b/redisinsight/ui/src/constants/storage.ts
@@ -17,6 +17,7 @@ enum BrowserStorageItem {
   dbConfig = 'dbConfig_',
   RunQueryMode = 'RunQueryMode',
   wbCleanUp = 'wbCleanUp',
+  viewFormat = 'viewFormat',
 }
 
 export default BrowserStorageItem
diff --git a/redisinsight/ui/src/pages/browser/components/hash-details/HashDetails.tsx b/redisinsight/ui/src/pages/browser/components/hash-details/HashDetails.tsx
@@ -284,7 +284,7 @@ const HashDetails = (props: Props) => {
                   position="bottom"
                   content={tooltipContent}
                 >
-                  <>{value.substring?.(0, 200) ?? value}</>
+                  <>{value?.substring?.(0, 200) ?? value}</>
                 </EuiToolTip>
               )}
               {expanded && value}
@@ -377,7 +377,7 @@ const HashDetails = (props: Props) => {
                   content={tooltipContent}
                   anchorClassName="truncateText"
                 >
-                  <>{formattedValue.substring?.(0, 200) ?? formattedValue}</>
+                  <>{formattedValue?.substring?.(0, 200) ?? formattedValue}</>
                 </EuiToolTip>
               )}
               {expanded && formattedValue}
diff --git a/redisinsight/ui/src/pages/browser/components/key-details-header/components/Formatter/constants.ts b/redisinsight/ui/src/pages/browser/components/key-details-header/components/Formatter/constants.ts
@@ -25,6 +25,10 @@ export const KEY_VALUE_FORMATTER_OPTIONS = [
     text: 'Msgpack',
     value: KeyValueFormat.Msgpack,
   },
+  {
+    text: 'Pickle',
+    value: KeyValueFormat.Pickle,
+  },
   {
     text: 'Protobuf',
     value: KeyValueFormat.Protobuf,
diff --git a/redisinsight/ui/src/pages/browser/components/key-list/KeyList.tsx b/redisinsight/ui/src/pages/browser/components/key-list/KeyList.tsx
@@ -9,7 +9,7 @@ import {
 } from '@elastic/eui'
 import {
   formatBytes,
-  truncateTTLToDuration,
+  truncateNumberToDuration,
   truncateNumberToFirstUnit,
   truncateTTLToSeconds,
   replaceSpaces,
@@ -213,7 +213,7 @@ const KeyList = forwardRef((props: Props, ref) => {
                   <>
                     {`${truncateTTLToSeconds(cellData)} s`}
                     <br />
-                    {`(${truncateTTLToDuration(cellData)})`}
+                    {`(${truncateNumberToDuration(cellData)})`}
                   </>
                 )}
               >
diff --git a/redisinsight/ui/src/pages/browser/components/list-details/ListDetails.tsx b/redisinsight/ui/src/pages/browser/components/list-details/ListDetails.tsx
@@ -325,7 +325,7 @@ const ListDetails = (props: Props) => {
                   content={tooltipContent}
                   anchorClassName="truncateText"
                 >
-                  <>{value.substring?.(0, 200) ?? value}</>
+                  <>{value?.substring?.(0, 200) ?? value}</>
                 </EuiToolTip>
               )}
               {expanded && value}
diff --git a/redisinsight/ui/src/pages/browser/components/set-details/SetDetails.tsx b/redisinsight/ui/src/pages/browser/components/set-details/SetDetails.tsx
@@ -192,7 +192,7 @@ const SetDetails = (props: Props) => {
         const member = bufferToString(memberItem)
         const tooltipContent = formatLongName(member)
         const { value, isValid } = formattingBuffer(memberItem, viewFormatProp, { expanded })
-        const cellContent = value.substring?.(0, 200) ?? value
+        const cellContent = value?.substring?.(0, 200) ?? value
 
         return (
           <EuiText color="subdued" size="s" style={{ maxWidth: '100%', whiteSpace: 'break-spaces' }}>
diff --git a/redisinsight/ui/src/pages/browser/components/stream-details/stream-data-view/StreamDataViewWrapper.tsx b/redisinsight/ui/src/pages/browser/components/stream-details/stream-data-view/StreamDataViewWrapper.tsx
@@ -210,7 +210,7 @@ const StreamDataViewWrapper = (props: Props) => {
 
       const bufferValue = values[index]?.value || stringToBuffer('')
       const { value: formattedValue, isValid } = formattingBuffer(bufferValue, viewFormatProp, { expanded })
-      const cellContent = formattedValue.substring?.(0, 650) ?? formattedValue
+      const cellContent = formattedValue?.substring?.(0, 650) ?? formattedValue
       const tooltipContent = formatLongName(value)
 
       return (
diff --git a/redisinsight/ui/src/pages/browser/components/zset-details/ZSetDetails.tsx b/redisinsight/ui/src/pages/browser/components/zset-details/ZSetDetails.tsx
@@ -246,7 +246,7 @@ const ZSetDetails = (props: Props) => {
         const name = bufferToString(nameItem)
         const tooltipContent = formatLongName(name)
         const { value, isValid } = formattingBuffer(nameItem, viewFormat, { expanded })
-        const cellContent = value.substring?.(0, 200) ?? value
+        const cellContent = value?.substring?.(0, 200) ?? value
 
         return (
           <EuiText color="subdued" size="s" style={{ maxWidth: '100%', whiteSpace: 'break-spaces' }}>
diff --git a/redisinsight/ui/src/slices/browser/keys.ts b/redisinsight/ui/src/slices/browser/keys.ts
@@ -69,7 +69,7 @@ export const initialState: KeysStore = {
     error: '',
     data: null,
     length: 0,
-    viewFormat: defaultViewFormat,
+    viewFormat: localStorageService?.get(BrowserStorageItem.viewFormat) ?? defaultViewFormat,
   },
   addKey: {
     loading: false,
@@ -86,6 +86,9 @@ export const initialKeyInfo = {
   length: 0,
 }
 
+const getInitialSelectedKeyState = (state: KeysStore) =>
+  ({ ...initialState.selectedKey, viewFormat: state.selectedKey.viewFormat })
+
 // A slice for recipes
 const keysSlice = createSlice({
   name: 'keys',
@@ -213,7 +216,6 @@ const keysSlice = createSlice({
       state.selectedKey = {
         ...state.selectedKey,
         loading: false,
-        viewFormat: defaultViewFormat,
         // data: null,
       }
     },
@@ -313,11 +315,13 @@ const keysSlice = createSlice({
     },
 
     resetKeyInfo: (state) => {
-      state.selectedKey = cloneDeep(initialState.selectedKey)
+      state.selectedKey = cloneDeep(getInitialSelectedKeyState(state as KeysStore))
     },
 
     // reset keys for keys slice
-    resetKeys: () => cloneDeep(initialState),
+    resetKeys: (state) => cloneDeep(
+      { ...initialState, selectedKey: getInitialSelectedKeyState(state as KeysStore) }
+    ),
 
     resetKeysData: (state) => {
       // state.data.keys = []
@@ -334,6 +338,7 @@ const keysSlice = createSlice({
 
     setViewFormat: (state, { payload }: PayloadAction<KeyValueFormat>) => {
       state.selectedKey.viewFormat = payload
+      localStorageService?.set(BrowserStorageItem.viewFormat, payload)
     }
   },
 })
@@ -392,7 +397,6 @@ export let sourceKeysFetch: Nullable<CancelTokenSource> = null
 
 export function setInitialStateByType(type: string) {
   return (dispatch: AppDispatch) => {
-    dispatch(setViewFormat(defaultViewFormat))
 
     if (type === KeyTypes.Hash) {
       dispatch(setHashInitialState())
diff --git a/redisinsight/ui/src/slices/tests/browser/keys.spec.ts b/redisinsight/ui/src/slices/tests/browser/keys.spec.ts
@@ -1,6 +1,6 @@
 import { cloneDeep } from 'lodash'
 import { AxiosError } from 'axios'
-import { KeyTypes } from 'uiSrc/constants'
+import { KeyTypes, KeyValueFormat } from 'uiSrc/constants'
 import { apiService } from 'uiSrc/services'
 import { parseKeysListResponse, stringToBuffer } from 'uiSrc/utils'
 import { cleanup, initialStateDefault, mockedStore } from 'uiSrc/utils/test-utils'
@@ -56,6 +56,8 @@ import reducer, {
   addZsetKey,
   setLastBatchKeys,
   updateSelectedKeyRefreshTime,
+  resetKeyInfo,
+  resetKeys,
 } from '../../browser/keys'
 import { getString } from '../../browser/string'
 
@@ -780,6 +782,52 @@ describe('keys slice', () => {
     })
   })
 
+  describe('resetKeyInfo', () => {
+    it('should properly save viewFormat', () => {
+      // Arrange
+      const viewFormat = KeyValueFormat.HEX
+      const initialStateMock = {
+        ...initialState,
+        selectedKey: {
+          ...initialState.selectedKey,
+          viewFormat
+        }
+      }
+
+      // Act
+      const nextState = reducer(initialStateMock, resetKeyInfo())
+
+      // Assert
+      const rootState = Object.assign(initialStateDefault, {
+        browser: { keys: nextState },
+      })
+      expect(keysSelector(rootState)).toEqual(initialStateMock)
+    })
+  })
+
+  describe('resetKeys', () => {
+    it('should properly save viewFormat', () => {
+      // Arrange
+      const viewFormat = KeyValueFormat.HEX
+      const initialStateMock = {
+        ...initialState,
+        selectedKey: {
+          ...initialState.selectedKey,
+          viewFormat
+        }
+      }
+
+      // Act
+      const nextState = reducer(initialStateMock, resetKeys())
+
+      // Assert
+      const rootState = Object.assign(initialStateDefault, {
+        browser: { keys: nextState },
+      })
+      expect(keysSelector(rootState)).toEqual(initialStateMock)
+    })
+  })
+
   describe('thunks', () => {
     describe('fetchKeys', () => {
       it('call both loadKeys and loadKeysSuccess when fetch is successed', async () => {
diff --git a/redisinsight/ui/src/utils/formatters/valueFormatters.tsx b/redisinsight/ui/src/utils/formatters/valueFormatters.tsx
@@ -1,8 +1,11 @@
 import { decode, encode } from '@msgpack/msgpack'
 // eslint-disable-next-line import/order
 import { Buffer } from 'buffer'
+import { isUndefined } from 'lodash'
 import { serialize, unserialize } from 'php-serialize'
 import { getData } from 'rawproto'
+import jpickle from 'jpickle'
+
 import JSONViewer from 'uiSrc/components/json-viewer/JSONViewer'
 import { KeyValueFormat } from 'uiSrc/constants'
 import { RedisResponseBuffer } from 'uiSrc/slices/interfaces'
@@ -31,7 +34,11 @@ const isTextViewFormatter = (format: KeyValueFormat) => [
   KeyValueFormat.Binary,
 ].includes(format)
 const isJsonViewFormatter = (format: KeyValueFormat) => !isTextViewFormatter(format)
-const isFormatEditable = (format: KeyValueFormat) => ![KeyValueFormat.Protobuf, KeyValueFormat.JAVA].includes(format)
+const isFormatEditable = (format: KeyValueFormat) => ![
+  KeyValueFormat.Protobuf,
+  KeyValueFormat.JAVA,
+  KeyValueFormat.Pickle,
+].includes(format)
 
 const isNonUnicodeFormatter = (format: KeyValueFormat, isValid: boolean) => {
   if (format === KeyValueFormat.Msgpack) {
@@ -99,6 +106,23 @@ const formattingBuffer = (
         return { value: bufferToUTF8(reply), isValid: false }
       }
     }
+    case KeyValueFormat.Pickle: {
+      try {
+        const decoded = jpickle.loads(bufferToUTF8(reply))
+
+        if (isUndefined(decoded)) {
+          return {
+            value: bufferToUTF8(reply),
+            isValid: false
+          }
+        }
+
+        const value = JSON.stringify(decoded)
+        return JSONViewer({ value, ...props })
+      } catch (e) {
+        return { value: bufferToUTF8(reply), isValid: false }
+      }
+    }
     default: return { value: bufferToUnicode(reply), isValid: true }
   }
 }
diff --git a/redisinsight/ui/src/utils/tests/truncateTTL.spec.ts b/redisinsight/ui/src/utils/tests/truncateTTL.spec.ts
@@ -1,5 +1,5 @@
 import {
-  truncateTTLToDuration,
+  truncateNumberToDuration,
   truncateNumberToFirstUnit,
   truncateTTLToRange,
   truncateTTLToSeconds,
@@ -89,8 +89,8 @@ describe('Truncate TTL util tests', () => {
     })
   })
 
-  describe('truncateTTLToDuration', () => {
-    it('truncateTTLToDuration should return appropriate value', () => {
+  describe('truncateNumberToDuration', () => {
+    it('truncateNumberToDuration should return appropriate value', () => {
       const ttl1 = 100
       const ttl2 = 1_534
       const ttl3 = 54_334
@@ -105,12 +105,12 @@ describe('Truncate TTL util tests', () => {
       const expectedResponse5 = '3 yr, 6 mo, 19 d, 10 h, 32 min, 10 s'
       const expectedResponse6 = '67 yr, 2 mo, 6 d, 12 h, 38 min, 20 s'
 
-      expect(truncateTTLToDuration(ttl1)).toEqual(expectedResponse1)
-      expect(truncateTTLToDuration(ttl2)).toEqual(expectedResponse2)
-      expect(truncateTTLToDuration(ttl3)).toEqual(expectedResponse3)
-      expect(truncateTTLToDuration(ttl4)).toEqual(expectedResponse4)
-      expect(truncateTTLToDuration(ttl5)).toEqual(expectedResponse5)
-      expect(truncateTTLToDuration(ttl6)).toEqual(expectedResponse6)
+      expect(truncateNumberToDuration(ttl1)).toEqual(expectedResponse1)
+      expect(truncateNumberToDuration(ttl2)).toEqual(expectedResponse2)
+      expect(truncateNumberToDuration(ttl3)).toEqual(expectedResponse3)
+      expect(truncateNumberToDuration(ttl4)).toEqual(expectedResponse4)
+      expect(truncateNumberToDuration(ttl5)).toEqual(expectedResponse5)
+      expect(truncateNumberToDuration(ttl6)).toEqual(expectedResponse6)
     })
   })
 
diff --git a/redisinsight/ui/src/utils/truncateTTL.ts b/redisinsight/ui/src/utils/truncateTTL.ts
@@ -54,11 +54,11 @@ export const truncateTTLToRange = (ttl: number) => {
 // 500 => 8min, 20s
 // 1500 => 25 min
 // 2500000 => 28d, 22h, 26min
-export const truncateTTLToDuration = (ttl: number): string => {
+export const truncateNumberToDuration = (number: number): string => {
   try {
     const duration = intervalToDuration({
       start: 0,
-      end: ttl * 1_000,
+      end: number * 1_000,
     })
 
     const formattedDuration = formatDuration(duration, {
@@ -78,5 +78,5 @@ export const truncateTTLToDuration = (ttl: number): string => {
 export const truncateTTLToSeconds = (ttl: number) =>
   ttl?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ') ?? ''
 
-export const truncateNumberToFirstUnit = (ttl: number): string =>
-  truncateTTLToDuration(ttl).split(TRUNCATE_DELIMITER)[0]
+export const truncateNumberToFirstUnit = (number: number): string =>
+  truncateNumberToDuration(number).split(TRUNCATE_DELIMITER)[0]
diff --git a/yarn.lock b/yarn.lock
@@ -9638,6 +9638,11 @@ jest@^27.5.1:
     import-local "^3.0.2"
     jest-cli "^27.5.1"
 
+jpickle@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/jpickle/-/jpickle-0.4.1.tgz#17eea5d3624cccec38f86e89a059abd05952364a"
+  integrity sha512-XHSTQUtl/Yv2cNzeQ7NKFuK0Z3d1iqQC2iEwV0cu3/dG6PV3DgACEQ3wGagHRDV6MKzypPWwHVSDY8kBWkbfTA==
+
 js-base64@^2.1.8:
   version "2.6.4"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4"

Original file line number	Diff line number	Diff line change
`@@ -172,5 +172,6 @@ export enum KeyValueFormat {`
`172`	`172`	`Msgpack = 'Msgpack',`
`173`	`173`	`PHP = 'PHP serialized',`
`174`	`174`	`JAVA = 'Java serialized',`
`175`		`- Protobuf = 'Protobuf'`
	`175`	`+ Protobuf = 'Protobuf',`
	`176`	`+ Pickle = 'Pickle',`
`176`	`177`	`}`
Original file line number	Diff line number	Diff line change
`@@ -17,6 +17,7 @@ enum BrowserStorageItem {`
`17`	`17`	`dbConfig = 'dbConfig_',`
`18`	`18`	`RunQueryMode = 'RunQueryMode',`
`19`	`19`	`wbCleanUp = 'wbCleanUp',`
	`20`	`+ viewFormat = 'viewFormat',`
`20`	`21`	`}`
`21`	`22`
`22`	`23`	`export default BrowserStorageItem`
Original file line number	Diff line number	Diff line change
`@@ -325,7 +325,7 @@ const ListDetails = (props: Props) => {`
`325`	`325`	`content={tooltipContent}`
`326`	`326`	`anchorClassName="truncateText"`
`327`	`327`	`>`
`328`		`- <>{value.substring?.(0, 200) ?? value}</>`
	`328`	`+ <>{value?.substring?.(0, 200) ?? value}</>`
`329`	`329`	`</EuiToolTip>`
`330`	`330`	`)}`
`331`	`331`	`{expanded && value}`