lingling
/
tiny-rdm
mirror of https://github.com/tiny-craft/tiny-rdm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
tiny-craft 2023-09-28 16:01:58 +08:00
parent 47df424138
commit 8e8f62073e
13 changed files with 47 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
backend/services/connection_service.go
View File

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

4
frontend/src/components/content/ContentPane.vue
View File

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

5
frontend/src/components/content_value/ContentValueHash.vue
View File

@ -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" />

5
frontend/src/components/content_value/ContentValueList.vue
View File

@ -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" />

5
frontend/src/components/content_value/ContentValueSet.vue
View File

@ -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" />

5
frontend/src/components/content_value/ContentValueStream.vue
View File

@ -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" />

1
frontend/src/components/content_value/ContentValueString.vue
View File

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

5
frontend/src/components/content_value/ContentValueZSet.vue
View File

@ -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" />

3
frontend/src/langs/en.json
View File

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

3
frontend/src/langs/zh-cn.json
View File

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

4
frontend/src/stores/connections.js
View File

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

5
frontend/src/stores/tab.js
View File

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

4
frontend/src/styles/style.scss
View File

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