Merge pull request #1127 from RedisInsight/feature/RI-3470_Formatters_improvements

Feature/ri 3470 formatters improvements

Author: vlad-dargel

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",

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',
 }

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}

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,

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)})`}
                   </>
                 )}
               >

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}

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' }}>

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 (

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' }}>

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 }
   }
 }