From fd99b4379859536e63a471499a8cc937cce47004 Mon Sep 17 00:00:00 2001 From: tiny-craft <137850705+tiny-craft@users.noreply.github.com> Date: Mon, 30 Oct 2023 00:54:45 +0800 Subject: [PATCH] feat: add display of content length and size info --- backend/services/connection_service.go | 21 ++++++++----- .../src/components/content/ContentPane.vue | 2 ++ .../content_value/ContentValueHash.vue | 30 +++++++++++++----- .../content_value/ContentValueList.vue | 30 +++++++++++++----- .../content_value/ContentValueSet.vue | 30 +++++++++++++----- .../content_value/ContentValueStream.vue | 31 ++++++++++++++----- .../content_value/ContentValueString.vue | 9 ++++-- .../content_value/ContentValueWrapper.vue | 2 ++ .../content_value/ContentValueZSet.vue | 30 +++++++++++++----- frontend/src/langs/en.json | 4 ++- frontend/src/langs/zh-cn.json | 4 ++- frontend/src/stores/connections.js | 4 ++- frontend/src/stores/tab.js | 5 ++- frontend/src/styles/style.scss | 4 --- 14 files changed, 148 insertions(+), 58 deletions(-) diff --git a/backend/services/connection_service.go b/backend/services/connection_service.go index 336eac0..fad3c80 100644 --- a/backend/services/connection_service.go +++ b/backend/services/connection_service.go @@ -825,17 +825,19 @@ func (c *connectionService) GetKeyValue(connName string, db int, k any, viewAs, } var value any - var size int64 + var size, length int64 var cursor uint64 switch strings.ToLower(keyType) { case "string": var str string str, err = client.Get(ctx, key).Result() value, decodeType, viewAs = strutil.ConvertTo(str, decodeType, viewAs) - size, _ = client.StrLen(ctx, key).Result() + length, _ = client.StrLen(ctx, key).Result() + size, _ = client.MemoryUsage(ctx, key, 0).Result() case "list": value, err = client.LRange(ctx, key, 0, -1).Result() - size, _ = client.LLen(ctx, key).Result() + length, _ = client.LLen(ctx, key).Result() + size, _ = client.MemoryUsage(ctx, key, 0).Result() case "hash": //value, err = client.HGetAll(ctx, key).Result() items := map[string]string{} @@ -855,7 +857,8 @@ func (c *connectionService) GetKeyValue(connName string, db int, k any, viewAs, } } value = items - size, _ = client.HLen(ctx, key).Result() + length, _ = client.HLen(ctx, key).Result() + size, _ = client.MemoryUsage(ctx, key, 0).Result() case "set": //value, err = client.SMembers(ctx, key).Result() items := []string{} @@ -873,7 +876,8 @@ func (c *connectionService) GetKeyValue(connName string, db int, k any, viewAs, } } value = items - size, _ = client.SCard(ctx, key).Result() + length, _ = client.SCard(ctx, key).Result() + size, _ = client.MemoryUsage(ctx, key, 0).Result() case "zset": //value, err = client.ZRangeWithScores(ctx, key, 0, -1).Result() var items []types.ZSetItem @@ -899,7 +903,8 @@ func (c *connectionService) GetKeyValue(connName string, db int, k any, viewAs, } } value = items - size, _ = client.ZCard(ctx, key).Result() + length, _ = client.ZCard(ctx, key).Result() + size, _ = client.MemoryUsage(ctx, key, 0).Result() case "stream": var msgs []redis.XMessage items := []types.StreamItem{} @@ -915,7 +920,8 @@ func (c *connectionService) GetKeyValue(connName string, db int, k any, viewAs, }) } value = items - size, _ = client.XLen(ctx, key).Result() + length, _ = client.XLen(ctx, key).Result() + size, _ = client.MemoryUsage(ctx, key, 0).Result() } if err != nil { resp.Msg = err.Error() @@ -927,6 +933,7 @@ func (c *connectionService) GetKeyValue(connName string, db int, k any, viewAs, "ttl": ttl, "value": value, "size": size, + "length": length, "viewAs": viewAs, "decode": decodeType, } diff --git a/frontend/src/components/content/ContentPane.vue b/frontend/src/components/content/ContentPane.vue index c60b270..5432573 100644 --- a/frontend/src/components/content/ContentPane.vue +++ b/frontend/src/components/content/ContentPane.vue @@ -50,6 +50,7 @@ const tabContent = computed(() => { ttl: tab.ttl, value: tab.value, size: tab.size || 0, + length: tab.length || 0, viewAs: tab.viewAs, decode: tab.decode, } @@ -131,6 +132,7 @@ watch( :decode="tabContent.decode" :key-code="tabContent.keyCode" :key-path="tabContent.keyPath" + :length="tabContent.length" :name="tabContent.name" :size="tabContent.size" :ttl="tabContent.ttl" diff --git a/frontend/src/components/content_value/ContentValueHash.vue b/frontend/src/components/content_value/ContentValueHash.vue index dbf1f53..9cf5694 100644 --- a/frontend/src/components/content_value/ContentValueHash.vue +++ b/frontend/src/components/content_value/ContentValueHash.vue @@ -3,14 +3,17 @@ import { computed, h, reactive, ref } from 'vue' import { useI18n } from 'vue-i18n' import ContentToolbar from './ContentToolbar.vue' import AddLink from '@/components/icons/AddLink.vue' -import { NButton, NCode, NIcon, NInput } from 'naive-ui' +import { NButton, NCode, NIcon, NInput, useThemeVars } from 'naive-ui' import { types, types as redisTypes } from '@/consts/support_redis_type.js' import EditableTableColumn from '@/components/common/EditableTableColumn.vue' import useDialogStore from 'stores/dialog.js' import useConnectionStore from 'stores/connections.js' import { isEmpty } from 'lodash' +import bytes from 'bytes' const i18n = useI18n() +const themeVars = useThemeVars() + const props = defineProps({ name: String, db: Number, @@ -25,6 +28,7 @@ const props = defineProps({ }, value: Object, size: Number, + length: Number, }) /** @@ -259,8 +263,9 @@ const onUpdateFilter = (filters, sourceColumn) => { :key-path="props.keyPath" :key-type="keyType" :server="props.name" - :ttl="ttl" /> -
+ :ttl="ttl" + class="value-item-part" /> +
{ @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 23251ad..3ef6e19 100644 --- a/frontend/src/components/content_value/ContentValueList.vue +++ b/frontend/src/components/content_value/ContentValueList.vue @@ -3,14 +3,17 @@ import { computed, h, reactive, ref } from 'vue' import { useI18n } from 'vue-i18n' import ContentToolbar from './ContentToolbar.vue' import AddLink from '@/components/icons/AddLink.vue' -import { NButton, NCode, NIcon, NInput } from 'naive-ui' +import { NButton, NCode, NIcon, NInput, useThemeVars } from 'naive-ui' import { isEmpty, size } from 'lodash' import { types, types as redisTypes } from '@/consts/support_redis_type.js' import EditableTableColumn from '@/components/common/EditableTableColumn.vue' import useDialogStore from 'stores/dialog.js' import useConnectionStore from 'stores/connections.js' +import bytes from 'bytes' const i18n = useI18n() +const themeVars = useThemeVars() + const props = defineProps({ name: String, db: Number, @@ -25,6 +28,7 @@ const props = defineProps({ }, value: Object, size: Number, + length: Number, }) /** @@ -191,8 +195,9 @@ const onUpdateFilter = (filters, sourceColumn) => { :key-path="props.keyPath" :key-type="keyType" :server="props.name" - :ttl="ttl" /> -
+ :ttl="ttl" + class="value-item-part" /> +
{ @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 35c973a..fa66c4e 100644 --- a/frontend/src/components/content_value/ContentValueSet.vue +++ b/frontend/src/components/content_value/ContentValueSet.vue @@ -3,14 +3,17 @@ import { computed, h, reactive, ref } from 'vue' import { useI18n } from 'vue-i18n' import ContentToolbar from './ContentToolbar.vue' import AddLink from '@/components/icons/AddLink.vue' -import { NButton, NCode, NIcon, NInput } from 'naive-ui' +import { NButton, NCode, NIcon, NInput, useThemeVars } from 'naive-ui' import { isEmpty, size } from 'lodash' import useDialogStore from 'stores/dialog.js' import { types, types as redisTypes } from '@/consts/support_redis_type.js' import EditableTableColumn from '@/components/common/EditableTableColumn.vue' import useConnectionStore from 'stores/connections.js' +import bytes from 'bytes' const i18n = useI18n() +const themeVars = useThemeVars() + const props = defineProps({ name: String, db: Number, @@ -25,6 +28,7 @@ const props = defineProps({ }, value: Array, size: Number, + length: Number, }) /** @@ -186,8 +190,9 @@ const onUpdateFilter = (filters, sourceColumn) => { :key-path="props.keyPath" :key-type="keyType" :server="props.name" - :ttl="ttl" /> -
+ :ttl="ttl" + class="value-item-part" /> +
{ @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 66baa22..d35b5cb 100644 --- a/frontend/src/components/content_value/ContentValueStream.vue +++ b/frontend/src/components/content_value/ContentValueStream.vue @@ -3,14 +3,17 @@ import { computed, h, reactive, ref } from 'vue' import { useI18n } from 'vue-i18n' import ContentToolbar from './ContentToolbar.vue' import AddLink from '@/components/icons/AddLink.vue' -import { NButton, NCode, NIcon, NInput } from 'naive-ui' +import { NButton, NCode, NIcon, NInput, useThemeVars } from 'naive-ui' import { types, types as redisTypes } from '@/consts/support_redis_type.js' import EditableTableColumn from '@/components/common/EditableTableColumn.vue' import useDialogStore from 'stores/dialog.js' import useConnectionStore from 'stores/connections.js' import { includes, isEmpty, keys, some, values } from 'lodash' +import bytes from 'bytes' const i18n = useI18n() +const themeVars = useThemeVars() + const props = defineProps({ name: String, db: Number, @@ -25,6 +28,7 @@ const props = defineProps({ }, value: Object, size: Number, + length: Number, }) /** @@ -171,8 +175,9 @@ const onUpdateFilter = (filters, sourceColumn) => { :key-path="props.keyPath" :key-type="keyType" :server="props.name" - :ttl="ttl" /> -
+ :ttl="ttl" + class="value-item-part" /> +
{ @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 2f7e964..0258987 100644 --- a/frontend/src/components/content_value/ContentValueString.vue +++ b/frontend/src/components/content_value/ContentValueString.vue @@ -15,6 +15,7 @@ import DropdownSelector from '@/components/content_value/DropdownSelector.vue' import Code from '@/components/icons/Code.vue' import Conversion from '@/components/icons/Conversion.vue' import EditFile from '@/components/icons/EditFile.vue' +import bytes from 'bytes' const i18n = useI18n() const themeVars = useThemeVars() @@ -33,6 +34,7 @@ const props = defineProps({ }, value: String, size: Number, + length: Number, viewAs: { type: String, default: formatTypes.PLAIN_TEXT, @@ -192,6 +194,9 @@ const onSaveValue = async () => { type="textarea" />
+ {{ $t('interface.length') }}: {{ props.length }} + + {{ $t('interface.memory_usage') }}: {{ bytes(props.size) }}
{ :tooltip="$t('interface.view_as')" :value="props.viewAs" @update:value="onViewTypeUpdate" /> - - { .value-footer { border-top: v-bind('themeVars.borderColor') 1px solid; - background-color: v-bind('themeVars.bodyColor'); + background-color: v-bind('themeVars.tableHeaderColor'); } diff --git a/frontend/src/components/content_value/ContentValueWrapper.vue b/frontend/src/components/content_value/ContentValueWrapper.vue index 95a2a08..f9a01e1 100644 --- a/frontend/src/components/content_value/ContentValueWrapper.vue +++ b/frontend/src/components/content_value/ContentValueWrapper.vue @@ -29,6 +29,7 @@ const props = defineProps({ }, value: [String, Object], size: Number, + length: Number, viewAs: { type: String, default: formatTypes.PLAIN_TEXT, @@ -70,6 +71,7 @@ const onReloadKey = async () => { :decode="props.decode" :key-code="props.keyCode" :key-path="props.keyPath" + :length="props.length" :name="props.name" :size="props.size" :ttl="props.ttl" diff --git a/frontend/src/components/content_value/ContentValueZSet.vue b/frontend/src/components/content_value/ContentValueZSet.vue index 1a8abe0..0759b1a 100644 --- a/frontend/src/components/content_value/ContentValueZSet.vue +++ b/frontend/src/components/content_value/ContentValueZSet.vue @@ -3,14 +3,17 @@ import { computed, h, reactive, ref } from 'vue' import { useI18n } from 'vue-i18n' import ContentToolbar from './ContentToolbar.vue' import AddLink from '@/components/icons/AddLink.vue' -import { NButton, NCode, NIcon, NInput, NInputNumber } from 'naive-ui' +import { NButton, NCode, NIcon, NInput, NInputNumber, useThemeVars } from 'naive-ui' import { types, types as redisTypes } from '@/consts/support_redis_type.js' import EditableTableColumn from '@/components/common/EditableTableColumn.vue' import { isEmpty } from 'lodash' import useDialogStore from 'stores/dialog.js' import useConnectionStore from 'stores/connections.js' +import bytes from 'bytes' const i18n = useI18n() +const themeVars = useThemeVars() + const props = defineProps({ name: String, db: Number, @@ -25,6 +28,7 @@ const props = defineProps({ }, value: Object, size: Number, + length: Number, }) /** @@ -284,8 +288,9 @@ const onUpdateFilter = (filters, sourceColumn) => { :key-path="props.keyPath" :key-type="keyType" :server="props.name" - :ttl="ttl" /> -
+ :ttl="ttl" + class="value-item-part" /> +
{
-
- {{ $t('interface.total', { size: props.size }) }} -
+
- + diff --git a/frontend/src/langs/en.json b/frontend/src/langs/en.json index 5d11f25..1c4bcbc 100644 --- a/frontend/src/langs/en.json +++ b/frontend/src/langs/en.json @@ -75,6 +75,9 @@ "search": "Search", "filter_field": "Filter Field", "filter_value": "Filter Value", + "length": "Length", + "entries": "Entries", + "memory_usage": "Memory Usage", "view_as": "View As", "decode_with": "Decode/Decompress Type", "reload": "Reload", @@ -94,7 +97,6 @@ "action": "Action", "type": "Type", "score": "Score", - "total": "Length: {size}", "cli_welcome": "Welcome to Tiny RDM Redis Console", "sub_tab": { "status": "Status", diff --git a/frontend/src/langs/zh-cn.json b/frontend/src/langs/zh-cn.json index 370817c..e118f98 100644 --- a/frontend/src/langs/zh-cn.json +++ b/frontend/src/langs/zh-cn.json @@ -75,6 +75,9 @@ "search": "搜索", "filter_field": "筛选字段", "filter_value": "筛选值", + "length": "长度", + "entries": "条目", + "memory_usage": "内存占用", "view_as": "查看方式", "decode_with": "解码/解压方式", "reload": "重新载入", @@ -94,7 +97,6 @@ "action": "操作", "type": "类型", "score": "分值", - "total": "总数：{size}", "cli_welcome": "欢迎使用Tiny RDM的Redis命令行控制台", "sub_tab": { "status": "状态", diff --git a/frontend/src/stores/connections.js b/frontend/src/stores/connections.js index 32d494f..dfbfcf9 100644 --- a/frontend/src/stores/connections.js +++ b/frontend/src/stores/connections.js @@ -665,7 +665,7 @@ const useConnectionStore = defineStore('connections', { if (!isEmpty(key)) { const { data, success, msg } = await GetKeyValue(server, db, key, viewType, decodeType) if (success) { - const { type, ttl, value, size, viewAs, decode } = data + const { type, ttl, value, size, length, viewAs, decode } = data const k = decodeRedisKey(key) const binaryKey = k !== key tab.upsertTab({ @@ -678,6 +678,7 @@ const useConnectionStore = defineStore('connections', { key: k, value, size, + length, viewAs, decode, }) @@ -702,6 +703,7 @@ const useConnectionStore = defineStore('connections', { keyCode: null, value: null, size: 0, + length: 0, }) } finally { } diff --git a/frontend/src/stores/tab.js b/frontend/src/stores/tab.js index 3930afc..7b502f3 100644 --- a/frontend/src/stores/tab.js +++ b/frontend/src/stores/tab.js @@ -92,11 +92,12 @@ const useTabStore = defineStore('tab', { * @param {string} [key] * @param {string} [keyCode] * @param {number} [size] + * @param {number} [length] * @param {*} [value] * @param {string} [viewAs] * @param {string} [decode] */ - upsertTab({ subTab, server, db, type, ttl, key, keyCode, size, value, viewAs, decode }) { + upsertTab({ subTab, server, db, type, ttl, key, keyCode, size, length, value, viewAs, decode }) { let tabIndex = findIndex(this.tabList, { name: server }) if (tabIndex === -1) { this.tabList.push({ @@ -110,6 +111,7 @@ const useTabStore = defineStore('tab', { key, keyCode, size, + length, value, viewAs, decode, @@ -128,6 +130,7 @@ const useTabStore = defineStore('tab', { tab.key = key tab.keyCode = keyCode tab.size = size + tab.length = length tab.value = value tab.viewAs = viewAs tab.decode = decode diff --git a/frontend/src/styles/style.scss b/frontend/src/styles/style.scss index 9d785b5..79d456f 100644 --- a/frontend/src/styles/style.scss +++ b/frontend/src/styles/style.scss @@ -87,10 +87,6 @@ body { gap: 5px; justify-content: flex-end; align-items: center; - - .tb2-extra-info { - padding: 0 5px; - } } .value-wrapper {