fix: disable type filter when redis server below 5.x (#274)

backend/services/browser_service.go

@@ -23,6 +23,7 @@ import (
 	"tinyrdm/backend/types"
 	"tinyrdm/backend/utils/coll"
 	convutil "tinyrdm/backend/utils/convert"
+	maputil "tinyrdm/backend/utils/map"
 	redis2 "tinyrdm/backend/utils/redis"
 	sliceutil "tinyrdm/backend/utils/slice"
 	strutil "tinyrdm/backend/utils/string"
@@ -222,11 +223,20 @@ func (b *browserService) OpenConnection(name string) (resp types.JSResp) {
 		}
 	}
 
+	// get redis server version
+	var version string
+	if res, err := client.Info(ctx, "server").Result(); err == nil || errors.Is(err, redis.Nil) {
+		info := b.parseInfo(res)
+		serverInfo := maputil.Get(info, "Server", map[string]string{})
+		version = maputil.Get(serverInfo, "redis_version", "1.0.0")
+	}
+
 	resp.Success = true
 	resp.Data = map[string]any{
 		"db":      dbs,
 		"view":    selConn.KeyView,
 		"lastDB":  selConn.LastDB,
+		"version": version,
 	}
 	return
 }

frontend/src/components/common/RedisTypeSelector.vue

@@ -14,6 +14,10 @@ const props = defineProps({
         type: String,
         default: 'bottom-start',
     },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
 })
 
 const emit = defineEmits(['update:value', 'select'])
@@ -83,6 +87,7 @@ const handleSelect = (select) => {
 
 <template>
     <n-dropdown
+        :disabled="props.disabled"
         :options="options"
         :placement="props.placement"
         :render-icon="renderIcon"
@@ -92,6 +97,7 @@ const handleSelect = (select) => {
         <n-tag
             :bordered="true"
             :color="{ color: backgroundColor, textColor: fontColor }"
+            :disabled="props.disabled"
             class="redis-tag"
             size="medium"
             strong>

frontend/src/components/sidebar/BrowserPane.vue

@@ -27,6 +27,7 @@ import { ConnectionType } from '@/consts/connection_type.js'
 import Import from '@/components/icons/Import.vue'
 import Checkbox from '@/components/icons/Checkbox.vue'
 import Timer from '@/components/icons/Timer.vue'
+import { toVersionArray } from '@/utils/version.js'
 
 const props = defineProps({
     server: String,
@@ -78,6 +79,12 @@ const dbSelectOptions = computed(() => {
     })
 })
 
+const showTypeFilter = computed(() => {
+    const version = browserStore.getServerVersion(props.server)
+    const verArr = toVersionArray(version)
+    return verArr[0] > 5
+})
+
 const moreOptions = [
     { key: 'import', label: 'interface.import_key', icon: Import },
     { key: 'divider1', type: 'divider' },
@@ -301,7 +308,10 @@ watch(
                 @filter-changed="onFilterInput"
                 @match-changed="onMatchInput">
                 <template #prepend>
-                    <redis-type-selector v-model:value="filterForm.type" @update:value="onSelectFilterType" />
+                    <redis-type-selector
+                        v-model:value="filterForm.type"
+                        :disabled="!showTypeFilter"
+                        @update:value="onSelectFilterType" />
                 </template>
             </content-search-input>
             <n-button-group>

frontend/src/objects/redisServerState.js

@@ -28,6 +28,7 @@ export class RedisServerState {
      * @param {LoadingState} loadingState all loading state in opened connections map by server and LoadingState
      * @param {KeyViewType} viewType view type selection for all opened connections group by 'server'
      * @param {Map<string, RedisNodeItem>} nodeMap map nodes by "type#key"
+     * @param {string} version redis server version
      */
     constructor({
         name,
@@ -40,6 +41,7 @@ export class RedisServerState {
         loadingState = {},
         viewType = KeyViewType.Tree,
         nodeMap = new Map(),
+        version = '',
     }) {
         this.name = name
         this.db = db
@@ -52,6 +54,7 @@ export class RedisServerState {
         this.loadingState = loadingState
         this.viewType = viewType
         this.nodeMap = nodeMap
+        this.version = version
         this.decodeHistory = new Map()
         this.decodeHistoryLimit = 100
         this.getRoot()

frontend/src/stores/browser.js

@@ -111,7 +111,7 @@ const useBrowserStore = defineStore('browser', {
 
         /**
          * get database info list
-         * @param server
+         * @param {string} server
          * @return {RedisDatabaseItem[]}
          */
         getDBList(server) {
@@ -122,6 +122,18 @@ const useBrowserStore = defineStore('browser', {
             return []
         },
 
+        /**
+         * get server version
+         * @param {string} server
+         */
+        getServerVersion(server) {
+            const serverInst = this.servers[server]
+            if (serverInst != null) {
+                return serverInst.version
+            }
+            return '1.0.0'
+        },
+
         /**
          * get database by server name and database index
          * @param {string} server
@@ -240,7 +252,7 @@ const useBrowserStore = defineStore('browser', {
             // if (connNode == null) {
             //     throw new Error('no such connection')
             // }
-            const { db, view = KeyViewType.Tree, lastDB } = data
+            const { db, view = KeyViewType.Tree, lastDB, version } = data
             if (isEmpty(db)) {
                 throw new Error('no db loaded')
             }
@@ -249,6 +261,7 @@ const useBrowserStore = defineStore('browser', {
                 separator: this.getSeparator(name),
                 db: -1,
                 viewType: view,
+                version,
             })
             /** @type {Object.<number,RedisDatabaseItem>} **/
             const databases = {}

frontend/src/utils/version.js

@@ -1,6 +1,11 @@
 import { get, isEmpty, map, size, split, trimStart } from 'lodash'
 
-const toVerArr = (ver) => {
+/**
+ * convert version string to number array
+ * @param ver
+ * @return {number[]}
+ */
+export const toVersionArray = (ver) => {
     const v = trimStart(ver, 'v')
     let vParts = split(v, '.')
     if (isEmpty(vParts)) {
@@ -20,8 +25,8 @@ const toVerArr = (ver) => {
  */
 export const compareVersion = (v1, v2) => {
     if (v1 !== v2) {
-        const v1Nums = toVerArr(v1)
+        const v1Nums = toVersionArray(v1)
-        const v2Nums = toVerArr(v2)
+        const v2Nums = toVersionArray(v2)
         const length = Math.max(size(v1Nums), size(v2Nums))
 
         for (let i = 0; i < length; i++) {