perf: compatible with situations where the "memory" command cannot be used #144

backend/services/browser_service.go

@@ -600,7 +600,6 @@ func (b *browserService) GetKeySummary(param types.KeySummaryParam) (resp types.
 	pipe := client.Pipeline()
 	typeVal := pipe.Type(ctx, key)
 	ttlVal := pipe.TTL(ctx, key)
-	sizeVal := pipe.MemoryUsage(ctx, key, 0)
 	_, err = pipe.Exec(ctx)
 	if err != nil {
 		resp.Msg = err.Error()
@@ -611,9 +610,10 @@ func (b *browserService) GetKeySummary(param types.KeySummaryParam) (resp types.
 		resp.Msg = typeVal.Err().Error()
 		return
 	}
+	size, _ := client.MemoryUsage(ctx, key, 0).Result()
 	data := types.KeySummary{
 		Type: strings.ToLower(typeVal.Val()),
-		Size: sizeVal.Val(),
+		Size: size,
 	}
 	if data.Type == "none" {
 		resp.Msg = "key not exists"

frontend/src/components/content_value/ContentValueHash.vue

@@ -298,6 +298,10 @@ const loadProgress = computed(() => {
     return (len * 100) / Math.max(len, props.length)
 })
 
+const showMemoryUsage = computed(() => {
+    return !isNaN(props.size) && props.size > 0
+})
+
 const onAddRow = () => {
     dialogStore.openAddFieldsDialog(props.name, props.db, props.keyPath, props.keyCode, types.HASH)
 }
@@ -415,8 +419,8 @@ defineExpose({
         </div>
         <div class="value-footer flex-box-h">
             <n-text v-if="!isNaN(props.length)">{{ $t('interface.entries') }}: {{ entries }}</n-text>
-            <n-divider v-if="!isNaN(props.length)" vertical />
+            <n-divider v-if="showMemoryUsage" vertical />
-            <n-text v-if="!isNaN(props.size)">{{ $t('interface.memory_usage') }}: {{ bytes(props.size) }}</n-text>
+            <n-text v-if="showMemoryUsage">{{ $t('interface.memory_usage') }}: {{ bytes(props.size) }}</n-text>
             <div class="flex-item-expand"></div>
             <format-selector
                 v-show="!inEdit"

frontend/src/components/content_value/ContentValueList.vue

@@ -266,6 +266,10 @@ const loadProgress = computed(() => {
     return (len * 100) / Math.max(len, props.length)
 })
 
+const showMemoryUsage = computed(() => {
+    return !isNaN(props.size) && props.size > 0
+})
+
 const onAddValue = (value) => {
     dialogStore.openAddFieldsDialog(props.name, props.db, props.keyPath, props.keyCode, types.LIST)
 }
@@ -383,8 +387,8 @@ defineExpose({
         </div>
         <div class="value-footer flex-box-h">
             <n-text v-if="!isNaN(props.length)">{{ $t('interface.entries') }}: {{ entries }}</n-text>
-            <n-divider v-if="!isNaN(props.length)" vertical />
+            <n-divider v-if="showMemoryUsage" vertical />
-            <n-text v-if="!isNaN(props.size)">{{ $t('interface.memory_usage') }}: {{ bytes(props.size) }}</n-text>
+            <n-text v-if="showMemoryUsage">{{ $t('interface.memory_usage') }}: {{ bytes(props.size) }}</n-text>
             <div class="flex-item-expand"></div>
             <format-selector
                 v-show="!inEdit"

frontend/src/components/content_value/ContentValueSet.vue

@@ -263,6 +263,10 @@ const loadProgress = computed(() => {
     return (len * 100) / Math.max(len, props.length)
 })
 
+const showMemoryUsage = computed(() => {
+    return !isNaN(props.size) && props.size > 0
+})
+
 const onAddValue = (value) => {
     dialogStore.openAddFieldsDialog(props.name, props.db, props.keyPath, props.keyCode, types.SET)
 }
@@ -380,8 +384,8 @@ defineExpose({
         </div>
         <div class="value-footer flex-box-h">
             <n-text v-if="!isNaN(props.length)">{{ $t('interface.entries') }}: {{ entries }}</n-text>
-            <n-divider v-if="!isNaN(props.length)" vertical />
+            <n-divider v-if="showMemoryUsage" vertical />
-            <n-text v-if="!isNaN(props.size)">{{ $t('interface.memory_usage') }}: {{ bytes(props.size) }}</n-text>
+            <n-text v-if="showMemoryUsage">{{ $t('interface.memory_usage') }}: {{ bytes(props.size) }}</n-text>
             <div class="flex-item-expand"></div>
             <format-selector
                 v-show="!inEdit"

frontend/src/components/content_value/ContentValueStream.vue

@@ -149,6 +149,10 @@ const loadProgress = computed(() => {
     return (len * 100) / Math.max(len, props.length)
 })
 
+const showMemoryUsage = computed(() => {
+    return !isNaN(props.size) && props.size > 0
+})
+
 const onAddRow = () => {
     dialogStore.openAddFieldsDialog(props.name, props.db, props.keyPath, props.keyCode, types.STREAM)
 }
@@ -238,8 +242,8 @@ defineExpose({
 
         <div class="value-footer flex-box-h">
             <n-text v-if="!isNaN(props.length)">{{ $t('interface.entries') }}: {{ entries }}</n-text>
-            <n-divider v-if="!isNaN(props.length)" vertical />
+            <n-divider v-if="showMemoryUsage" vertical />
-            <n-text v-if="!isNaN(props.size)">{{ $t('interface.memory_usage') }}: {{ bytes(props.size) }}</n-text>
+            <n-text v-if="showMemoryUsage">{{ $t('interface.memory_usage') }}: {{ bytes(props.size) }}</n-text>
             <div class="flex-item-expand"></div>
         </div>
     </div>

frontend/src/components/content_value/ContentValueString.vue

@@ -70,6 +70,7 @@ const editingContent = ref('')
 const enableSave = computed(() => {
     return editingContent.value !== viewAs.value && !props.loading
 })
+
 const displayValue = computed(() => {
     if (props.loading) {
         return ''
@@ -77,6 +78,10 @@ const displayValue = computed(() => {
     return viewAs.value || decodeRedisKey(props.value)
 })
 
+const showMemoryUsage = computed(() => {
+    return !isNaN(props.size) && props.size > 0
+})
+
 watchEffect(
     () => {
         if (props.value !== undefined) {
@@ -209,8 +214,8 @@ defineExpose({
         </div>
         <div class="value-footer flex-box-h">
             <n-text v-if="!isNaN(props.length)">{{ $t('interface.length') }}: {{ props.length }}</n-text>
-            <n-divider v-if="!isNaN(props.length)" vertical />
+            <n-divider v-if="showMemoryUsage" vertical />
-            <n-text v-if="!isNaN(props.size)">{{ $t('interface.memory_usage') }}: {{ bytes(props.size) }}</n-text>
+            <n-text v-if="showMemoryUsage">{{ $t('interface.memory_usage') }}: {{ bytes(props.size) }}</n-text>
             <div class="flex-item-expand" />
             <format-selector
                 :decode="viewAs.decode"

frontend/src/components/content_value/ContentValueZSet.vue

@@ -300,6 +300,10 @@ const loadProgress = computed(() => {
     return (len * 100) / Math.max(len, props.length)
 })
 
+const showMemoryUsage = computed(() => {
+    return !isNaN(props.size) && props.size > 0
+})
+
 const onAddRow = () => {
     dialogStore.openAddFieldsDialog(props.name, props.db, props.keyPath, props.keyCode, types.ZSET)
 }
@@ -415,8 +419,8 @@ defineExpose({
         </div>
         <div class="value-footer flex-box-h">
             <n-text v-if="!isNaN(props.length)">{{ $t('interface.entries') }}: {{ entries }}</n-text>
-            <n-divider v-if="!isNaN(props.length)" vertical />
+            <n-divider v-if="showMemoryUsage" vertical />
-            <n-text v-if="!isNaN(props.size)">{{ $t('interface.memory_usage') }}: {{ bytes(props.size) }}</n-text>
+            <n-text v-if="showMemoryUsage">{{ $t('interface.memory_usage') }}: {{ bytes(props.size) }}</n-text>
             <div class="flex-item-expand"></div>
             <format-selector
                 v-show="!inEdit"