perf: add item size display for Hash, List, Set, ZSet, and Stream #23

backend/services/connection_service.go

@@ -508,12 +508,15 @@ func (c *connectionService) GetKeyValue(connName string, db int, key string) (re
 	}
 
 	var value any
+	var size int64
 	var cursor uint64
 	switch strings.ToLower(keyType) {
 	case "string":
 		value, err = rdb.Get(ctx, key).Result()
+		size, _ = rdb.StrLen(ctx, key).Result()
 	case "list":
 		value, err = rdb.LRange(ctx, key, 0, -1).Result()
+		size, _ = rdb.LLen(ctx, key).Result()
 	case "hash":
 		//value, err = rdb.HGetAll(ctx, key).Result()
 		items := map[string]string{}
@@ -532,6 +535,7 @@ func (c *connectionService) GetKeyValue(connName string, db int, key string) (re
 			}
 		}
 		value = items
+		size, _ = rdb.HLen(ctx, key).Result()
 	case "set":
 		//value, err = rdb.SMembers(ctx, key).Result()
 		items := []string{}
@@ -548,6 +552,7 @@ func (c *connectionService) GetKeyValue(connName string, db int, key string) (re
 			}
 		}
 		value = items
+		size, _ = rdb.SCard(ctx, key).Result()
 	case "zset":
 		//value, err = rdb.ZRangeWithScores(ctx, key, 0, -1).Result()
 		var items []types.ZSetItem
@@ -572,6 +577,7 @@ func (c *connectionService) GetKeyValue(connName string, db int, key string) (re
 			}
 		}
 		value = items
+		size, _ = rdb.ZCard(ctx, key).Result()
 	case "stream":
 		var msgs []redis.XMessage
 		items := []types.StreamItem{}
@@ -587,6 +593,7 @@ func (c *connectionService) GetKeyValue(connName string, db int, key string) (re
 			})
 		}
 		value = items
+		size, _ = rdb.XLen(ctx, key).Result()
 	}
 	if err != nil {
 		resp.Msg = err.Error()
@@ -597,6 +604,7 @@ func (c *connectionService) GetKeyValue(connName string, db int, key string) (re
 		"type":  keyType,
 		"ttl":   ttl,
 		"value": value,
+		"size":  size,
 	}
 	return
 }

frontend/src/components/content/ContentPane.vue

@@ -97,6 +97,7 @@ const tabContent = computed(() => {
         keyPath: tab.key,
         ttl: tab.ttl,
         value: tab.value,
+        size: tab.size || 0,
     }
 })
 
@@ -151,7 +152,8 @@ const onReloadKey = async () => {
             :key-path="tabContent.keyPath"
             :name="tabContent.name"
             :ttl="tabContent.ttl"
-            :value="tabContent.value" />
+            :value="tabContent.value"
+            :size="tabContent.size" />
     </div>
 </template>
 

frontend/src/components/content_value/ContentValueHash.vue

@@ -19,6 +19,7 @@ const props = defineProps({
         default: -1,
     },
     value: Object,
+    size: Number,
 })
 
 const filterOption = [
@@ -257,7 +258,9 @@ const onUpdateFilter = (filters, sourceColumn) => {
                         @update:value="onFilterInput" />
                 </n-input-group>
             </div>
-            <div class="flex-item-expand"></div>
+            <div class="tb2-extra-info flex-item-expand">
+                <n-tag size="large">{{ $t('interface.total', { size: props.size }) }}</n-tag>
+            </div>
             <n-button plain :focusable="false" @click="onAddRow">
                 <template #icon>
                     <n-icon :component="AddLink" size="18" />

frontend/src/components/content_value/ContentValueList.vue

@@ -20,6 +20,7 @@ const props = defineProps({
         default: -1,
     },
     value: Object,
+    size: Number,
 })
 
 const connectionStore = useConnectionStore()
@@ -181,7 +182,9 @@ const onUpdateFilter = (filters, sourceColumn) => {
                     @clear="clearFilter"
                     @update:value="onFilterInput" />
             </div>
-            <div class="flex-item-expand"></div>
+            <div class="tb2-extra-info flex-item-expand">
+                <n-tag size="large">{{ $t('interface.total', { size: props.size }) }}</n-tag>
+            </div>
             <n-button plain :focusable="false" @click="onAddValue">
                 <template #icon>
                     <n-icon :component="AddLink" size="18" />

frontend/src/components/content_value/ContentValueSet.vue

@@ -20,6 +20,7 @@ const props = defineProps({
         default: -1,
     },
     value: Array,
+    size: Number,
 })
 
 const connectionStore = useConnectionStore()
@@ -177,7 +178,9 @@ const onUpdateFilter = (filters, sourceColumn) => {
                     @clear="clearFilter"
                     @update:value="onFilterInput" />
             </div>
-            <div class="flex-item-expand"></div>
+            <div class="tb2-extra-info flex-item-expand">
+                <n-tag size="large">{{ $t('interface.total', { size: props.size }) }}</n-tag>
+            </div>
             <n-button plain :focusable="false" @click="onAddValue">
                 <template #icon>
                     <n-icon :component="AddLink" size="18" />

frontend/src/components/content_value/ContentValueStream.vue

@@ -20,6 +20,7 @@ const props = defineProps({
         default: -1,
     },
     value: Object,
+    size: Number,
 })
 
 const filterOption = [
@@ -170,7 +171,9 @@ const onUpdateFilter = (filters, sourceColumn) => {
                         @update:value="onFilterInput" />
                 </n-input-group>
             </div>
-            <div class="flex-item-expand"></div>
+            <div class="tb2-extra-info flex-item-expand">
+                <n-tag size="large">{{ $t('interface.total', { size: props.size }) }}</n-tag>
+            </div>
             <n-button plain :focusable="false" @click="onAddRow">
                 <template #icon>
                     <n-icon :component="AddLink" size="18" />

frontend/src/components/content_value/ContentValueString.vue

@@ -27,6 +27,7 @@ const props = defineProps({
         default: -1,
     },
     value: String,
+    size: Number,
 })
 
 const viewOption = computed(() =>

frontend/src/components/content_value/ContentValueZSet.vue

@@ -20,6 +20,7 @@ const props = defineProps({
         default: -1,
     },
     value: Object,
+    size: Number,
 })
 
 const filterOption = [
@@ -288,7 +289,9 @@ const onUpdateFilter = (filters, sourceColumn) => {
                     </n-tooltip>
                 </n-input-group>
             </div>
-            <div class="flex-item-expand"></div>
+            <div class="tb2-extra-info flex-item-expand">
+                <n-tag size="large">{{ $t('interface.total', { size: props.size }) }}</n-tag>
+            </div>
             <n-button plain :focusable="false" @click="onAddRow">
                 <template #icon>
                     <n-icon :component="AddLink" size="18" />

frontend/src/langs/en.json

@@ -87,7 +87,8 @@
     "empty_server_list": "No redis server",
     "action": "Action",
     "type": "Type",
-    "score": "Score"
+    "score": "Score",
+    "total": "Length: {size}"
   },
   "ribbon": {
     "server": "Server",

frontend/src/langs/zh-cn.json

@@ -87,7 +87,8 @@
     "empty_server_list": "还没添加Redis服务器",
     "action": "操作",
     "type": "类型",
-    "score": "分值"
+    "score": "分值",
+    "total": "总数：{size}"
   },
   "ribbon": {
     "server": "服务器",

frontend/src/stores/connections.js

@@ -532,7 +532,7 @@ const useConnectionStore = defineStore('connections', {
                 if (!isEmpty(key)) {
                     const { data, success, msg } = await GetKeyValue(server, db, key)
                     if (success) {
-                        const { type, ttl, value } = data
+                        const { type, ttl, value, size } = data
                         tab.upsertTab({
                             server,
                             db,
@@ -540,6 +540,7 @@ const useConnectionStore = defineStore('connections', {
                             ttl,
                             key,
                             value,
+                            size,
                         })
                         return
                     } else {
@@ -555,6 +556,7 @@ const useConnectionStore = defineStore('connections', {
                     ttl: -1,
                     key: null,
                     value: null,
+                    size: 0,
                 })
             } finally {
             }

frontend/src/stores/tab.js

@@ -83,9 +83,10 @@ const useTabStore = defineStore('tab', {
          * @param {number} [type]
          * @param {number} [ttl]
          * @param {string} [key]
+         * @param {number} [size]
          * @param {*} [value]
          */
-        upsertTab({ server, db, type, ttl, key, value }) {
+        upsertTab({ server, db, type, ttl, key, size, value }) {
             let tabIndex = findIndex(this.tabList, { name: server })
             if (tabIndex === -1) {
                 this.tabList.push({
@@ -95,6 +96,7 @@ const useTabStore = defineStore('tab', {
                     type,
                     ttl,
                     key,
+                    size,
                     value,
                 })
                 tabIndex = this.tabList.length - 1
@@ -108,6 +110,7 @@ const useTabStore = defineStore('tab', {
             tab.type = type
             tab.ttl = ttl
             tab.key = key
+            tab.size = size
             tab.value = value
             this._setActivatedIndex(tabIndex, true)
             // this.activatedTab = tab.name

frontend/src/styles/style.scss

@@ -86,6 +86,10 @@ body {
     gap: 5px;
     justify-content: flex-end;
     align-items: center;
+
+    .tb2-extra-info {
+      padding: 0 5px;
+    }
   }
 
   .value-wrapper {