From 8e8f62073e2f7a388c2c09958afed6ef43847cb0 Mon Sep 17 00:00:00 2001
From: tiny-craft <137850705+tiny-craft@users.noreply.github.com>
Date: Thu, 28 Sep 2023 16:01:58 +0800
Subject: [PATCH] perf: add item size display for Hash, List, Set, ZSet, and
Stream #23
---
backend/services/connection_service.go | 8 ++++++++
frontend/src/components/content/ContentPane.vue | 4 +++-
.../src/components/content_value/ContentValueHash.vue | 5 ++++-
.../src/components/content_value/ContentValueList.vue | 5 ++++-
frontend/src/components/content_value/ContentValueSet.vue | 5 ++++-
.../src/components/content_value/ContentValueStream.vue | 5 ++++-
.../src/components/content_value/ContentValueString.vue | 1 +
.../src/components/content_value/ContentValueZSet.vue | 5 ++++-
frontend/src/langs/en.json | 3 ++-
frontend/src/langs/zh-cn.json | 3 ++-
frontend/src/stores/connections.js | 4 +++-
frontend/src/stores/tab.js | 5 ++++-
frontend/src/styles/style.scss | 4 ++++
13 files changed, 47 insertions(+), 10 deletions(-)
diff --git a/backend/services/connection_service.go b/backend/services/connection_service.go
index d7ebe4b..f82184c 100644
--- a/backend/services/connection_service.go
+++ b/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
}
diff --git a/frontend/src/components/content/ContentPane.vue b/frontend/src/components/content/ContentPane.vue
index 70774e2..568545c 100644
--- a/frontend/src/components/content/ContentPane.vue
+++ b/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" />
diff --git a/frontend/src/components/content_value/ContentValueHash.vue b/frontend/src/components/content_value/ContentValueHash.vue
index 360487a..9c5686a 100644
--- a/frontend/src/components/content_value/ContentValueHash.vue
+++ b/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" />
-
+
+ {{ $t('interface.total', { size: props.size }) }}
+
diff --git a/frontend/src/components/content_value/ContentValueList.vue b/frontend/src/components/content_value/ContentValueList.vue
index d4af9c7..700c4cb 100644
--- a/frontend/src/components/content_value/ContentValueList.vue
+++ b/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" />
-
+
+ {{ $t('interface.total', { size: props.size }) }}
+
diff --git a/frontend/src/components/content_value/ContentValueSet.vue b/frontend/src/components/content_value/ContentValueSet.vue
index a6f8494..a223fa2 100644
--- a/frontend/src/components/content_value/ContentValueSet.vue
+++ b/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" />
-
+
+ {{ $t('interface.total', { size: props.size }) }}
+
diff --git a/frontend/src/components/content_value/ContentValueStream.vue b/frontend/src/components/content_value/ContentValueStream.vue
index e0a2d5c..64e7732 100644
--- a/frontend/src/components/content_value/ContentValueStream.vue
+++ b/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" />
-
+
+ {{ $t('interface.total', { size: props.size }) }}
+
diff --git a/frontend/src/components/content_value/ContentValueString.vue b/frontend/src/components/content_value/ContentValueString.vue
index 3e14d20..538b63c 100644
--- a/frontend/src/components/content_value/ContentValueString.vue
+++ b/frontend/src/components/content_value/ContentValueString.vue
@@ -27,6 +27,7 @@ const props = defineProps({
default: -1,
},
value: String,
+ size: Number,
})
const viewOption = computed(() =>
diff --git a/frontend/src/components/content_value/ContentValueZSet.vue b/frontend/src/components/content_value/ContentValueZSet.vue
index c0584c6..772c0ed 100644
--- a/frontend/src/components/content_value/ContentValueZSet.vue
+++ b/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) => {
-
+
+ {{ $t('interface.total', { size: props.size }) }}
+
diff --git a/frontend/src/langs/en.json b/frontend/src/langs/en.json
index 3c17a73..241331a 100644
--- a/frontend/src/langs/en.json
+++ b/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",
diff --git a/frontend/src/langs/zh-cn.json b/frontend/src/langs/zh-cn.json
index 64cd8a7..d6f12f4 100644
--- a/frontend/src/langs/zh-cn.json
+++ b/frontend/src/langs/zh-cn.json
@@ -87,7 +87,8 @@
"empty_server_list": "还没添加Redis服务器",
"action": "操作",
"type": "类型",
- "score": "分值"
+ "score": "分值",
+ "total": "总数：{size}"
},
"ribbon": {
"server": "服务器",
diff --git a/frontend/src/stores/connections.js b/frontend/src/stores/connections.js
index 45e5792..d504e0e 100644
--- a/frontend/src/stores/connections.js
+++ b/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 {
}
diff --git a/frontend/src/stores/tab.js b/frontend/src/stores/tab.js
index feab642..a9e8300 100644
--- a/frontend/src/stores/tab.js
+++ b/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
diff --git a/frontend/src/styles/style.scss b/frontend/src/styles/style.scss
index e617adb..6b6d835 100644
--- a/frontend/src/styles/style.scss
+++ b/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 {