perf: support refresh field in hash (#260)

backend/services/browser_service.go

@@ -1331,6 +1331,45 @@ func (b *browserService) SetKeyValue(param types.SetKeyParam) (resp types.JSResp
 	return
 }
 
+// GetHashValue get hash field
+func (b *browserService) GetHashValue(param types.GetHashParam) (resp types.JSResp) {
+	item, err := b.getRedisClient(param.Server, param.DB)
+	if err != nil {
+		resp.Msg = err.Error()
+		return
+	}
+
+	client, ctx := item.client, item.ctx
+	key := strutil.DecodeRedisKey(param.Key)
+	val, err := client.HGet(ctx, key, param.Field).Result()
+	if errors.Is(err, redis.Nil) {
+		resp.Msg = "field in key not found"
+		return
+	}
+	if err != nil {
+		resp.Msg = err.Error()
+		return
+	}
+
+	var displayVal string
+	if (len(param.Decode) > 0 && param.Decode != types.DECODE_NONE) ||
+		(len(param.Format) > 0 && param.Format != types.FORMAT_RAW) {
+		decoder := Preferences().GetDecoder()
+		displayVal, _, _ = convutil.ConvertTo(val, param.Decode, param.Format, decoder)
+		if displayVal == val {
+			displayVal = ""
+		}
+	}
+
+	resp.Data = types.HashEntryItem{
+		Key:          param.Field,
+		Value:        val,
+		DisplayValue: displayVal,
+	}
+	resp.Success = true
+	return
+}
+
 // SetHashValue update hash field
 func (b *browserService) SetHashValue(param types.SetHashParam) (resp types.JSResp) {
 	item, err := b.getRedisClient(param.Server, param.DB)

backend/types/js_resp.go

@@ -101,3 +101,12 @@ type SetZSetParam struct {
 	RetFormat string  `json:"retFormat,omitempty"`
 	RetDecode string  `json:"retDecode,omitempty"`
 }
+
+type GetHashParam struct {
+	Server string `json:"server"`
+	DB     int    `json:"db"`
+	Key    any    `json:"key"`
+	Field  string `json:"field,omitempty"`
+	Format string `json:"format,omitempty"`
+	Decode string `json:"decode,omitempty"`
+}

frontend/src/components/common/EditableTableColumn.vue

@@ -5,14 +5,16 @@ import Edit from '@/components/icons/Edit.vue'
 import Close from '@/components/icons/Close.vue'
 import Save from '@/components/icons/Save.vue'
 import Copy from '@/components/icons/Copy.vue'
+import Refresh from '@/components/icons/Refresh.vue'
 
 const props = defineProps({
     bindKey: String,
     editing: Boolean,
     readonly: Boolean,
+    canRefresh: Boolean,
 })
 
-const emit = defineEmits(['edit', 'delete', 'copy', 'save', 'cancel'])
+const emit = defineEmits(['edit', 'delete', 'copy', 'refresh', 'save', 'cancel'])
 </script>
 
 <template>
@@ -22,6 +24,7 @@ const emit = defineEmits(['edit', 'delete', 'copy', 'save', 'cancel'])
     </div>
     <div v-else class="flex-box-h edit-column-func">
         <icon-button :icon="Copy" :title="$t('interface.copy_value')" @click="emit('copy')" />
+        <icon-button v-if="props.canRefresh" :icon="Refresh" :title="$t('interface.reload')" @click="emit('refresh')" />
         <icon-button v-if="!props.readonly" :icon="Edit" :title="$t('interface.edit_row')" @click="emit('edit')" />
         <n-popconfirm
             :negative-text="$t('common.cancel')"

frontend/src/components/content_value/ContentValueHash.vue

@@ -92,11 +92,14 @@ const fieldColumn = computed(() => ({
         lineClamp: 1,
     },
     filterOptionValue: fieldFilterOption.value,
-    className: inEdit.value ? 'clickable' : '',
+    className: inEdit.value ? 'clickable wordline' : 'wordline',
     filter: (value, row) => {
         return !!~row.k.indexOf(value.toString())
     },
     render: (row) => {
+        if (row.rm === true) {
+            return h('s', {}, decodeRedisKey(row.k))
+        }
         return decodeRedisKey(row.k)
     },
 }))
@@ -135,6 +138,9 @@ const valueColumn = computed(() => ({
         if (isCode.value) {
             return h('pre', {}, row.dv || row.v)
         }
+        if (row.rm === true) {
+            return h('s', {}, row.dv || row.v)
+        }
         return row.dv || row.v
     },
 }))
@@ -204,6 +210,25 @@ const actionColumn = {
         return h(EditableTableColumn, {
             editing: false,
             bindKey: row.k,
+            canRefresh: true,
+            onRefresh: async () => {
+                const { updated, success, msg } = await browserStore.getHashField({
+                    server: props.name,
+                    db: props.db,
+                    key: keyName.value,
+                    field: row.k,
+                    decode: props.decode,
+                    format: props.format,
+                })
+                if (success) {
+                    delete props.value[index]['rm']
+                    $message.success(i18n.t('dialogue.reload_succ'))
+                } else {
+                    // update fail, the key may have been deleted
+                    $message.error(msg)
+                    props.value[index]['rm'] = true
+                }
+            },
             onCopy: async () => {
                 try {
                     const succ = await ClipboardSetText(row.v)

frontend/src/stores/browser.js

@@ -15,6 +15,7 @@ import {
     FlushDB,
     GetClientList,
     GetCmdHistory,
+    GetHashValue,
     GetKeyDetail,
     GetKeySummary,
     GetKeyType,
@@ -987,6 +988,31 @@ const useBrowserStore = defineStore('browser', {
             }
         },
 
+        /**
+         * get hash field
+         * @param {string} server
+         * @param {number} db
+         * @param {string} key
+         * @param {string} field
+         * @param {decodeTypes} [decode]
+         * @param {formatTypes} [format]
+         * @return {Promise<{{msg: string, success: boolean, updated: HashEntryItem[]}>}
+         */
+        async getHashField({ server, db, key, field, decode = decodeTypes.NONE, format = formatTypes.RAW }) {
+            try {
+                const { data, success, msg } = await GetHashValue({ server, db, key, field, decode, format })
+                if (success && !isEmpty(data)) {
+                    const tab = useTabStore()
+                    tab.updateValueEntries({ server, db, key, type: 'hash', entries: [data] })
+                    return { success, updated: data }
+                } else {
+                    return { success: false, msg }
+                }
+            } catch (e) {
+                return { success: false, msg: e.message }
+            }
+        },
+
         /**
          * remove hash field
          * @param {string} server

frontend/src/styles/style.scss

@@ -63,6 +63,10 @@ body {
     cursor: pointer;
 }
 
+.wordline {
+    word-break: break-all;
+}
+
 .icon-btn {
     @extend .clickable;
     line-height: 100%;