#RIVS-286 - Support decompressors

Author: egor-zalenski

README.md

@@ -2,7 +2,7 @@
 
 Redis for VS Code is the official Visual Studio Code extension that provides an intuitive and efficient GUI for Redis databases, developed by Redis.
 
-![Redis for VS Code](.github/Redis_for_VS_Code_main_screen.png)
+![Redis for VS Code](https://github.com/RedisInsight/Redis-for-VS-Code/blob/main/.github/Redis_for_VS_Code_main_screen.png)
 
 ## Key features:
 * Universal Redis Support: Connect to any Redis instance, including Redis Community Edition, Redis Cloud, Redis Software, and Redis on Azure Cache.

Redis_for_VS_Code_main_screen.png

@@ -179,6 +179,7 @@
     "@types/lodash": "^4.14.200",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^16.4.13",
+    "@types/pako": "^2.0.3",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "@types/react-virtualized": "^9.21.28",
@@ -247,9 +248,11 @@
     "whatwg-fetch": "^3.6.19"
   },
   "dependencies": {
+    "@stablelib/snappy": "^1.0.3",
     "@vscode/l10n": "^0.0.18",
     "@vscode/webview-ui-toolkit": "^1.4.0",
     "axios": "^1.5.1",
+    "brotli-unicode": "^1.0.2",
     "buffer": "^6.0.3",
     "classnames": "^2.3.2",
     "connection-string": "^4.4.0",
@@ -259,6 +262,7 @@
     "dotenv": "^16.4.5",
     "file-saver": "^2.0.5",
     "formik": "^2.4.5",
+    "fzstd": "^0.1.1",
     "history": "^5.3.0",
     "html-react-parser": "^5.0.6",
     "immer": "^9.0.21",
@@ -267,8 +271,10 @@
     "json-bigint": "^1.0.0",
     "jsonpath": "^1.1.1",
     "lodash": "^4.17.21",
+    "lz4js": "^0.2.0",
     "monaco-editor": "^0.48.0",
     "msgpackr": "^1.10.1",
+    "pako": "^2.1.0",
     "php-serialize": "^4.1.1",
     "pickleparser": "^0.2.1",
     "rawproto": "^0.7.15",

package.json

@@ -22,6 +22,7 @@ import {
   stringToBuffer,
   validateTTLNumber,
   truncateNumberToDuration,
+  decompressingBuffer,
 } from 'uiSrc/utils'
 import { StopPropagation } from 'uiSrc/components/virtual-table'
 import {
@@ -76,7 +77,10 @@ export interface Props {
 const HashDetailsTable = (props: Props) => {
   const { isExpireFieldsAvailable, onRemoveKey } = props
 
-  const databaseId = useDatabasesStore((state) => state.connectedDatabase?.id)
+  const { databaseId, compressor } = useDatabasesStore((state) => ({
+    databaseId: state.connectedDatabase?.id,
+    compressor: state.connectedDatabase?.compressor ?? null,
+  }))
 
   const viewFormatProp = useContextInContext((state) => state.browser.viewFormat)
 
@@ -306,8 +310,7 @@ const HashDetailsTable = (props: Props) => {
       className: 'value-table-separate-border',
       headerClassName: 'value-table-separate-border',
       render: (_name: string, { field: fieldItem }: HashField, expanded?: boolean) => {
-        // const { value: decompressedItem } = decompressingBuffer(fieldItem, compressor)
-        const decompressedItem = fieldItem
+        const { value: decompressedItem } = decompressingBuffer(fieldItem, compressor)
         const field = bufferToString(fieldItem) || ''
         // Better to cut the long string, because it could affect virtual scroll performance
         const { value } = formattingBuffer(decompressedItem, viewFormatProp, { expanded, skipVector: true })
@@ -339,10 +342,8 @@ const HashDetailsTable = (props: Props) => {
         expanded?: boolean,
         rowIndex = 0,
       ) {
-        // const { value: decompressedFieldItem } = decompressingBuffer(fieldItem, compressor)
-        // const { value: decompressedValueItem } = decompressingBuffer(valueItem, compressor)
-        const decompressedFieldItem = fieldItem
-        const decompressedValueItem = valueItem
+        const { value: decompressedFieldItem } = decompressingBuffer(fieldItem, compressor)
+        const { value: decompressedValueItem } = decompressingBuffer(valueItem!, compressor)
         const value = bufferToString(valueItem)
         const field = bufferToString(decompressedFieldItem)
         // Better to cut the long string, because it could affect virtual scroll performance

src/webviews/src/modules/key-details/components/hash-details/hash-details-table/HashDetailsTable.tsx

@@ -32,10 +32,9 @@ import {
   sendEventTelemetry,
   TelemetryEvent,
   getColumnWidth,
+  decompressingBuffer,
 } from 'uiSrc/utils'
 import { VirtualTable } from 'uiSrc/components'
-// import { getColumnWidth } from 'uiSrc/components/virtual-grid'
-// import { decompressingBuffer } from 'uiSrc/utils/decompressors'
 import { useContextApi, useContextInContext, useDatabasesStore, useSelectedKeyStore } from 'uiSrc/store'
 import { Nullable } from 'uiSrc/interfaces'
 import { EditableTextArea } from 'uiSrc/modules/key-details/shared'
@@ -60,7 +59,11 @@ export interface Props {
 const ListDetailsTable = (props: Props) => {
   const { isFooterOpen } = props
 
-  const databaseId = useDatabasesStore((state) => state.connectedDatabase?.id)
+  const { databaseId, compressor } = useDatabasesStore((state) => ({
+    databaseId: state.connectedDatabase?.id,
+    compressor: state.connectedDatabase?.compressor ?? null,
+  }))
+
   const { [KeyTypes.List]: listSizes } = useContextInContext((state) => state.browser.keyDetailsSizes)
 
   const viewFormatProp = useContextInContext((state) => state.browser.viewFormat)
@@ -257,8 +260,7 @@ const ListDetailsTable = (props: Props) => {
         expanded: boolean = false,
         rowIndex = 0,
       ) {
-        // const { value: decompressedElementItem } = decompressingBuffer(elementItem, compressor)
-        const decompressedElementItem = elementItem
+        const { value: decompressedElementItem } = decompressingBuffer(elementItem, compressor)
         const element = bufferToString(elementItem)
         const { value: formattedValue, isValid } = formattingBuffer(decompressedElementItem, viewFormatProp, { expanded })
 

src/webviews/src/modules/key-details/components/list-details/list-details-table/ListDetailsTable.tsx

@@ -14,6 +14,7 @@ import {
   TelemetryEvent,
   getMatchType,
   getColumnWidth,
+  decompressingBuffer,
 } from 'uiSrc/utils'
 import {
   KeyTypes,
@@ -52,7 +53,10 @@ export interface Props {
 export const SetDetailsTable = (props: Props) => {
   const { isFooterOpen, onRemoveKey } = props
 
-  const databaseId = useDatabasesStore((state) => state.connectedDatabase?.id)
+  const { databaseId, compressor } = useDatabasesStore((state) => ({
+    databaseId: state.connectedDatabase?.id,
+    compressor: state.connectedDatabase?.compressor ?? null,
+  }))
 
   const viewFormatProp = useContextInContext((state) => state.browser.viewFormat)
 
@@ -181,8 +185,7 @@ export const SetDetailsTable = (props: Props) => {
       className: cx('value-table-separate-border', styles.cellBody),
       headerClassName: cx('value-table-separate-border', styles.cellHeader),
       render: function Name(_name: string, memberItem: RedisString, expanded: boolean = false) {
-        // const { value: decompressedMemberItem } = decompressingBuffer(memberItem, compressor)
-        const decompressedMemberItem = memberItem
+        const { value: decompressedMemberItem } = decompressingBuffer(memberItem, compressor)
         const member = bufferToString(memberItem || '')
         // Better to cut the long string, because it could affect virtual scroll performance
         const { value } = formattingBuffer(decompressedMemberItem, viewFormatProp, { expanded })

src/webviews/src/modules/key-details/components/set-details/set-details-table/SetDetailsTable.tsx

@@ -22,6 +22,7 @@ import {
   stringToBuffer,
   isFullStringLoaded,
   stringToSerializedBufferFormat,
+  decompressingBuffer,
 } from 'uiSrc/utils'
 import {
   TEXT_DISABLED_COMPRESSED_VALUE,
@@ -30,10 +31,9 @@ import {
   TEXT_UNPRINTABLE_CHARACTERS,
   AddStringFormConfig as config,
 } from 'uiSrc/constants'
-// import { decompressingBuffer } from 'uiSrc/utils/decompressors'
 import { downloadFile } from 'uiSrc/utils/dom/downloadFile'
 
-import { useContextInContext, useSelectedKeyStore } from 'uiSrc/store'
+import { useContextInContext, useDatabasesStore, useSelectedKeyStore } from 'uiSrc/store'
 import { IFetchKeyArgs, RedisString } from 'uiSrc/interfaces'
 import { TextArea, Tooltip } from 'uiSrc/ui'
 import { InlineEditor } from 'uiSrc/components'
@@ -52,7 +52,6 @@ export interface Props {
 }
 
 const StringDetailsValue = (props: Props) => {
-  const compressor = null
   const { isEditItem, setIsEdit, onRefresh, onDownloaded, onLoadAll, onUpdated } = props
 
   const {
@@ -61,6 +60,8 @@ const StringDetailsValue = (props: Props) => {
     setIsStringCompressed,
   } = useStringStore(useShallow(useStringSelector))
 
+  const compressor = useDatabasesStore((state) => state.connectedDatabase?.compressor ?? null)
+
   const viewFormatProp = useContextInContext((state) => state.browser.viewFormat)
 
   const { key, length } = useSelectedKeyStore(useShallow((state) => ({
@@ -85,11 +86,7 @@ const StringDetailsValue = (props: Props) => {
   useEffect(() => {
     if (!initialValue) return
 
-    // const { value: decompressedValue, isCompressed } = decompressingBuffer(initialValue, compressor)
-    const { value: decompressedValue, isCompressed } = {
-      value: initialValue,
-      isCompressed: false,
-    }
+    const { value: decompressedValue, isCompressed } = decompressingBuffer(initialValue, compressor)
 
     const initialValueString = bufferToString(decompressedValue, viewFormat)
     const { value: formattedValue, isValid } = formattingBuffer(decompressedValue, viewFormatProp, { expanded: true })

src/webviews/src/modules/key-details/components/string-details/string-details-value/StringDetailsValue.tsx

@@ -17,6 +17,7 @@ import {
   formattingBuffer,
   isEqualBuffers,
   validateScoreNumber,
+  decompressingBuffer,
 } from 'uiSrc/utils'
 import { StopPropagation } from 'uiSrc/components/virtual-table'
 import {
@@ -37,7 +38,6 @@ import {
 import { Nullable, RedisString } from 'uiSrc/interfaces'
 import { useContextApi, useContextInContext, useDatabasesStore, useSelectedKeyStore } from 'uiSrc/store'
 
-import { Tooltip } from 'uiSrc/ui'
 import { EditableInput } from 'uiSrc/modules/key-details/shared'
 import {
   deleteZSetMembers,
@@ -70,7 +70,10 @@ export interface Props {
 const ZSetDetailsTable = (props: Props) => {
   const { isFooterOpen, onRemoveKey } = props
 
-  const databaseId = useDatabasesStore((state) => state.connectedDatabase?.id)
+  const { databaseId, compressor } = useDatabasesStore((state) => ({
+    databaseId: state.connectedDatabase?.id,
+    compressor: state.connectedDatabase?.compressor ?? null,
+  }))
 
   const viewFormatProp = useContextInContext((state) => state.browser.viewFormat)
 
@@ -278,8 +281,7 @@ const ZSetDetailsTable = (props: Props) => {
       className: 'p-0',
       headerClassName: 'value-table-separate-border',
       render: function Name(_name: string, { name: nameItem }: IZsetMember, expanded?: boolean) {
-        // const { value: decompressedNameItem } = decompressingBuffer(nameItem, compressor)
-        const decompressedNameItem = nameItem
+        const { value: decompressedNameItem } = decompressingBuffer(nameItem, compressor)
         const name = bufferToString(nameItem)
         const { value } = formattingBuffer(decompressedNameItem, viewFormat, { expanded })
         const cellContent = (value as string)?.substring?.(0, 200) ?? value

src/webviews/src/modules/key-details/components/zset-details/zset-details-table/ZSetDetailsTable.tsx

@@ -18,7 +18,7 @@ const mockedProps = {
   database: mockDatabase,
 }
 beforeEach(() => {
-  apiService.get = vi.fn().mockResolvedValue({ status: 200 })
+  apiService.get = vi.fn().mockResolvedValue({ status: 200, data: {} })
 })
 
 vi.spyOn(utils, 'sendEventTelemetry')

src/webviews/src/modules/keys-tree/components/database-wrapper/DatabaseWrapper.spec.tsx

@@ -87,8 +87,8 @@ export const DatabaseWrapper = ({ children, database }: Props) => {
     checkConnectToDatabase(id, connectToInstance)
   }
 
-  const connectToInstance = (id = '') => {
-    keysApi.setDatabaseId(id)
+  const connectToInstance = (database: Database) => {
+    keysApi.setDatabaseId(database.id)
 
     // todo: fix for cli first open
     set(window, 'ri.database', database)
@@ -145,7 +145,7 @@ export const DatabaseWrapper = ({ children, database }: Props) => {
             content={formatLongName(name, 100, 20)}
             position="bottom center"
             keepTooltipInside={false}
-            mouseEnterDelay={1000}
+            mouseEnterDelay={2_000}
           >
             <div className={styles.databaseName}>
               <div className="truncate">{name}</div>

src/webviews/src/modules/keys-tree/components/database-wrapper/DatabaseWrapper.tsx

@@ -1,4 +1,4 @@
-import { ConnectionType } from 'uiSrc/constants'
+import { ConnectionType, KeyValueCompressor } from 'uiSrc/constants'
 import { Nullable } from 'uiSrc/interfaces'
 
 export interface DatabasesStore {
@@ -19,6 +19,7 @@ export interface Database {
   endpoints?: Nullable<Endpoint[]>
   connectionType?: ConnectionType
   lastConnection?: Nullable<Date>
+  compressor?: Nullable<KeyValueCompressor>
   password?: Nullable<string>
   username?: Nullable<string>
   name?: string
@@ -104,6 +105,7 @@ export interface DatabasesActions {
   processDatabase: () => void
   processDatabaseFinal: () => void
   loadDatabasesSuccess: (data: Database[]) => void
+  setDatabaseToList: (database: Database) => void
   setEditDatabase: (data: Database) => void
   setConnectedDatabase: (data: Database) => void
   resetConnectedDatabase: () => void