From a2c2ceb48351660bdde09bb27dec17832a452854 Mon Sep 17 00:00:00 2001 From: tiny-craft <137850705+tiny-craft@users.noreply.github.com> Date: Mon, 13 Nov 2023 22:31:18 +0800 Subject: [PATCH] perf: hash value support format viewing #65 --- backend/services/browser_service.go | 37 +++++-- backend/types/js_resp.go | 20 ++-- .../src/components/content/ContentPane.vue | 7 +- .../content_value/ContentEntryEditor.vue | 5 +- .../content_value/ContentValueHash.vue | 99 +++++++++++-------- .../content_value/ContentValueWrapper.vue | 34 +++++-- frontend/src/stores/browser.js | 30 +++--- frontend/src/stores/tab.js | 8 +- 8 files changed, 153 insertions(+), 87 deletions(-) diff --git a/backend/services/browser_service.go b/backend/services/browser_service.go index 737dd8b..103e3a3 100644 --- a/backend/services/browser_service.go +++ b/backend/services/browser_service.go @@ -630,7 +630,7 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS var str string str, err = client.Get(ctx, key).Result() data.Value = strutil.EncodeRedisKey(str) - //data.Value, data.DecodeType, data.ViewAs = strutil.ConvertTo(str, param.DecodeType, param.ViewAs) + //data.Value, data.Decode, data.Format = strutil.ConvertTo(str, param.Decode, param.Format) case "list": loadListHandle := func() ([]string, bool, error) { @@ -659,11 +659,13 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS data.Value, data.End, err = loadListHandle() case "hash": - loadHashHandle := func() (map[string]string, bool, error) { - items := map[string]string{} + loadHashHandle := func() ([]types.HashEntryItem, bool, error) { + //items := map[string]string{} scanSize := int64(Preferences().GetScanSize()) + items := make([]types.HashEntryItem, 0, scanSize) var loadedVal []string var cursor uint64 + var doConvert = len(param.Decode) > 0 && len(param.Format) > 0 if param.Full { // load all cursor = 0 @@ -672,8 +674,18 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS if err != nil { return nil, false, err } + var v string for i := 0; i < len(loadedVal); i += 2 { - items[loadedVal[i]] = loadedVal[i+1] + if doConvert { + v, _, _ = strutil.ConvertTo(loadedVal[i+1], param.Decode, param.Format) + } else { + v = loadedVal[i+1] + } + items = append(items, types.HashEntryItem{ + Key: loadedVal[i], + Value: strutil.EncodeRedisKey(loadedVal[i+1]), + DisplayValue: v, + }) } if cursor == 0 { break @@ -685,8 +697,18 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS if err != nil { return nil, false, err } + var v string for i := 0; i < len(loadedVal); i += 2 { - items[loadedVal[i]] = loadedVal[i+1] + if doConvert { + v, _, _ = strutil.ConvertTo(loadedVal[i+1], param.Decode, param.Format) + } else { + v = loadedVal[i+1] + } + items = append(items, types.HashEntryItem{ + Key: loadedVal[i], + Value: strutil.EncodeRedisKey(loadedVal[i+1]), + DisplayValue: v, + }) } } setEntryCursor(cursor) @@ -694,6 +716,7 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS } data.Value, data.End, err = loadHashHandle() + data.Decode, data.Format = param.Decode, param.Format if err != nil { resp.Msg = err.Error() return @@ -841,8 +864,8 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS } // ConvertValue convert value with decode method and format -// blank decodeType indicate auto decode -// blank viewAs indicate auto format +// blank decode indicate auto decode +// blank format indicate auto format func (b *browserService) ConvertValue(value any, decode, format string) (resp types.JSResp) { str := strutil.DecodeRedisKey(value) value, decode, format = strutil.ConvertTo(str, decode, format) diff --git a/backend/types/js_resp.go b/backend/types/js_resp.go index 7b54681..de9ab65 100644 --- a/backend/types/js_resp.go +++ b/backend/types/js_resp.go @@ -23,19 +23,25 @@ type KeyDetailParam struct { Server string `json:"server"` DB int `json:"db"` Key any `json:"key"` - ViewAs string `json:"viewAs,omitempty"` - DecodeType string `json:"decodeType,omitempty"` + Format string `json:"format,omitempty"` + Decode string `json:"decode,omitempty"` MatchPattern string `json:"matchPattern,omitempty"` Reset bool `json:"reset"` Full bool `json:"full"` } +type HashEntryItem struct { + Key string `json:"k"` + Value any `json:"v"` + DisplayValue string `json:"dv"` +} + type KeyDetail struct { - Value any `json:"value"` - Length int64 `json:"length,omitempty"` - ViewAs string `json:"viewAs,omitempty"` - DecodeType string `json:"decodeType,omitempty"` - End bool `json:"end"` + Value any `json:"value"` + Length int64 `json:"length,omitempty"` + Format string `json:"format,omitempty"` + Decode string `json:"decode,omitempty"` + End bool `json:"end"` } type SetKeyParam struct { diff --git a/frontend/src/components/content/ContentPane.vue b/frontend/src/components/content/ContentPane.vue index d49f7f4..9440ebf 100644 --- a/frontend/src/components/content/ContentPane.vue +++ b/frontend/src/components/content/ContentPane.vue @@ -14,6 +14,7 @@ import ContentCli from '@/components/content_value/ContentCli.vue' import Monitor from '@/components/icons/Monitor.vue' import Pub from '@/components/icons/Pub.vue' import ContentSlog from '@/components/content_value/ContentSlog.vue' +import { decodeTypes, formatTypes } from '@/consts/value_view_type.js' const themeVars = useThemeVars() @@ -54,9 +55,9 @@ const tabContent = computed(() => { value: tab.value, size: tab.size || 0, length: tab.length || 0, - viewAs: tab.viewAs, - decode: tab.decode, - end: tab.end, + decode: tab.decode || decodeTypes.NONE, + format: tab.format || formatTypes.PLAIN_TEXT, + end: tab.end === true, loading: tab.loading === true, } }) diff --git a/frontend/src/components/content_value/ContentEntryEditor.vue b/frontend/src/components/content_value/ContentEntryEditor.vue index 9bdf364..bcb5b7e 100644 --- a/frontend/src/components/content_value/ContentEntryEditor.vue +++ b/frontend/src/components/content_value/ContentEntryEditor.vue @@ -30,7 +30,7 @@ const props = defineProps({ const themeVars = useThemeVars() const browserStore = useBrowserStore() -const emit = defineEmits(['update:field', 'update:value', 'update:decode', 'update:format', 'viewAs', 'save', 'cancel']) +const emit = defineEmits(['update:field', 'update:value', 'update:decode', 'update:format', 'save', 'cancel']) const model = reactive({ field: '', value: '', @@ -89,14 +89,11 @@ const onFormatChanged = async (decode = '', format = '') => { } const onUpdateValue = (value) => { - // TODO: reconvert back to origin format // emit('update:value', value) viewAs.value = value } const onSave = () => { - // TODO: convert value by decode and format - // viewAs.decode, viewAs.format emit('save', viewAs.field, viewAs.value, viewAs.decode, viewAs.format) } diff --git a/frontend/src/components/content_value/ContentValueHash.vue b/frontend/src/components/content_value/ContentValueHash.vue index 0d75b50..c48e9b9 100644 --- a/frontend/src/components/content_value/ContentValueHash.vue +++ b/frontend/src/components/content_value/ContentValueHash.vue @@ -16,6 +16,8 @@ import LoadAll from '@/components/icons/LoadAll.vue' import IconButton from '@/components/common/IconButton.vue' import ContentEntryEditor from '@/components/content_value/ContentEntryEditor.vue' import Edit from '@/components/icons/Edit.vue' +import FormatSelector from '@/components/content_value/FormatSelector.vue' +import { decodeRedisKey } from '@/utils/key_convert.js' const i18n = useI18n() const themeVars = useThemeVars() @@ -32,7 +34,10 @@ const props = defineProps({ type: Number, default: -1, }, - value: Object, + value: { + type: Array, + default: () => [], + }, size: Number, length: Number, format: { @@ -72,7 +77,7 @@ const filterType = ref(1) const browserStore = useBrowserStore() const dialogStore = useDialogStore() const keyType = redisTypes.HASH -const currentEditRow = ref({ +const currentEditRow = reactive({ no: 0, key: '', value: null, @@ -81,7 +86,7 @@ const currentEditRow = ref({ }) const inEdit = computed(() => { - return currentEditRow.value.no > 0 + return currentEditRow.no > 0 }) const tableRef = ref(null) const fieldColumn = reactive({ @@ -95,7 +100,10 @@ const fieldColumn = reactive({ }, filterOptionValue: null, filter(value, row) { - return !!~row.key.indexOf(value.toString()) + return !!~row.k.indexOf(value.toString()) + }, + render(row) { + return decodeRedisKey(row.k) }, }) const valueColumn = reactive({ @@ -111,17 +119,20 @@ const valueColumn = reactive({ filter(value, row) { return !!~row.value.indexOf(value.toString()) }, + render(row) { + return row.dv + }, }) const startEdit = async ({ no, key, value }) => { - currentEditRow.value.value = value - currentEditRow.value.no = no - currentEditRow.value.key = key + currentEditRow.value = value + currentEditRow.no = no + currentEditRow.key = key } const saveEdit = async (field, value, decode, format) => { try { - const row = tableData.value[currentEditRow.value.no - 1] + const row = props.value[currentEditRow.no - 1] if (row == null) { throw new Error('row not exists') } @@ -130,15 +141,21 @@ const saveEdit = async (field, value, decode, format) => { server: props.name, db: props.db, key: keyName.value, - field: row.key, + field: row.k, newField: field, value, decode, format, }) if (success) { - row.key = field - row.value = updated[row.key] || '' + row.k = field + row.v = updated[row.k] || '' + const { value: displayVal } = await browserStore.convertValue({ + value: row.v, + decode: props.decode, + format: props.format, + }) + row.dv = displayVal $message.success(i18n.t('dialogue.save_value_succ')) } else { $message.error(msg) @@ -151,11 +168,11 @@ const saveEdit = async (field, value, decode, format) => { } const resetEdit = () => { - currentEditRow.value.no = 0 - currentEditRow.value.key = '' - currentEditRow.value.value = null - currentEditRow.value.format = formatTypes.PLAIN_TEXT - currentEditRow.value.decode = decodeTypes.NONE + currentEditRow.no = 0 + currentEditRow.key = '' + currentEditRow.value = null + currentEditRow.format = formatTypes.PLAIN_TEXT + currentEditRow.decode = decodeTypes.NONE } const actionColumn = { @@ -165,21 +182,21 @@ const actionColumn = { align: 'center', titleAlign: 'center', fixed: 'right', - render: (row) => { + render: (row, index) => { return h(EditableTableColumn, { editing: false, - bindKey: row.key, - onEdit: () => startEdit(row), + bindKey: row.k, + onEdit: () => startEdit({ no: index + 1, key: row.k, value: row.v }), onDelete: async () => { try { const { success, msg } = await browserStore.removeHashField( props.name, props.db, keyName.value, - row.key, + row.k, ) if (success) { - $message.success(i18n.t('dialogue.delete_key_succ', { key: row.key })) + $message.success(i18n.t('dialogue.delete_key_succ', { key: row.k })) } else { $message.error(msg) } @@ -200,6 +217,9 @@ const columns = computed(() => { width: 80, align: 'center', titleAlign: 'center', + render(row, index) { + return index + 1 + }, }, fieldColumn, valueColumn, @@ -213,12 +233,12 @@ const columns = computed(() => { width: 80, align: 'center', titleAlign: 'center', - render(row) { - if (row.no === currentEditRow.value.no) { + render(row, index) { + if (index + 1 === currentEditRow.no) { // editing row, show edit state return h(NIcon, { size: 16, color: 'red' }, () => h(Edit, { strokeWidth: 5 })) } else { - return row.no + return index + 1 } }, }, @@ -227,32 +247,19 @@ const columns = computed(() => { } }) -const tableData = computed(() => { - const data = [] - let index = 0 - for (const key in props.value) { - data.push({ - no: ++index, - key, - value: props.value[key], - }) - } - return data -}) - -const rowProps = (row) => { +const rowProps = (row, index) => { return { onClick: () => { // in edit mode, switch edit row by click if (inEdit.value) { - startEdit(row) + startEdit({ no: index + 1, key: row.k, value: row.v }) } }, } } const entries = computed(() => { - const len = size(tableData.value) + const len = size(props.value) return `${len} / ${Math.max(len, props.length)}` }) @@ -296,6 +303,10 @@ const onUpdateFilter = (filters, sourceColumn) => { } } +const onFormatChanged = (selDecode, selFormat) => { + emit('reload', selDecode, selFormat) +} + defineExpose({ reset: () => { clearFilter() @@ -367,7 +378,7 @@ defineExpose({ :bordered="false" :bottom-bordered="false" :columns="columns" - :data="tableData" + :data="props.value" :loading="props.loading" :row-props="rowProps" :single-column="true" @@ -398,6 +409,12 @@ defineExpose({ {{ $t('interface.memory_usage') }}: {{ bytes(props.size) }}
+ diff --git a/frontend/src/components/content_value/ContentValueWrapper.vue b/frontend/src/components/content_value/ContentValueWrapper.vue index b6766f0..4cfd9e5 100644 --- a/frontend/src/components/content_value/ContentValueWrapper.vue +++ b/frontend/src/components/content_value/ContentValueWrapper.vue @@ -11,6 +11,7 @@ import useBrowserStore from 'stores/browser.js' import { computed, onMounted, ref, watch } from 'vue' import { isEmpty } from 'lodash' import useDialogStore from 'stores/dialog.js' +import { decodeTypes, formatTypes } from '@/consts/value_view_type.js' const themeVars = useThemeVars() const browserStore = useBrowserStore() @@ -36,7 +37,7 @@ const props = defineProps({ * value: [String, Object], * size: Number, * length: Number, - * viewAs: String, + * format: String, * decode: String, * end: Boolean * }>} @@ -65,7 +66,8 @@ const keyName = computed(() => { const loadData = async (reset, full) => { try { - const { name, db, view, decodeType, matchPattern } = data.value + const { name, db, view, decodeType, matchPattern, decode, format } = data.value + reset = reset === true await browserStore.loadKeyDetail({ server: name, db: db, @@ -73,17 +75,31 @@ const loadData = async (reset, full) => { viewType: view, decodeType: decodeType, matchPattern: matchPattern, - reset: reset === true, + decode: reset ? decodeTypes.NONE : decode, + format: reset ? formatTypes.PLAIN_TEXT : format, + reset, full: full === true, }) } finally { } } -const onReload = async () => { +/** + * reload current key + * @param {string} [selDecode] + * @param {string} [selFormat] + * @return {Promise} + */ +const onReload = async (selDecode, selFormat) => { try { - const { name, db, keyCode, keyPath } = data.value - await browserStore.reloadKey({ server: name, db, key: keyCode || keyPath }) + const { name, db, keyCode, keyPath, decode, format } = data.value + await browserStore.reloadKey({ + server: name, + db, + key: keyCode || keyPath, + decode: selDecode || decode, + format: selFormat || format, + }) } finally { } } @@ -116,6 +132,7 @@ const onLoadAll = () => { loadData(false, true) } +const contentRef = ref(null) const initContent = async () => { // onReload() try { @@ -123,7 +140,7 @@ const initContent = async () => { if (contentRef.value?.reset != null) { contentRef.value?.reset() } - await loadData(false, false) + await loadData(true, false) if (contentRef.value?.beforeShow != null) { await contentRef.value?.beforeShow() } @@ -137,7 +154,6 @@ onMounted(() => { initContent() }) -const contentRef = ref(null) watch(() => data.value?.keyPath, initContent) @@ -152,7 +168,9 @@ watch(() => data.value?.keyPath, initContent) :is="valueComponents[data.type]" ref="contentRef" :db="data.db" + :decode="data.decode" :end="data.end" + :format="data.format" :key-code="data.keyCode" :key-path="data.keyPath" :length="data.length" diff --git a/frontend/src/stores/browser.js b/frontend/src/stores/browser.js index d1e9e9c..1dd63ec 100644 --- a/frontend/src/stores/browser.js +++ b/frontend/src/stores/browser.js @@ -423,17 +423,19 @@ const useBrowserStore = defineStore('browser', { /** * reload key - * @param server - * @param db - * @param key + * @param {string} server + * @param {number} db + * @param {string|number[]} key + * @param {string} [decode] + * @param {string} [format] * @return {Promise} */ - async reloadKey({ server, db, key }) { + async reloadKey({ server, db, key, decode, format }) { const tab = useTabStore() try { tab.updateLoading({ server, db, loading: true }) await this.loadKeySummary({ server, db, key }) - await this.loadKeyDetail({ server, db, key, reset: true }) + await this.loadKeyDetail({ server, db, key, decode, format, reset: true }) } finally { tab.updateLoading({ server, db, loading: false }) } @@ -444,14 +446,14 @@ const useBrowserStore = defineStore('browser', { * @param {string} server * @param {number} db * @param {string|number[]} key - * @param {string} [viewType] - * @param {string} [decodeType] + * @param {string} [format] + * @param {string} [decode] * @param {string} [matchPattern] * @param {boolean} [reset] * @param {boolean} [full] * @return {Promise} */ - async loadKeyDetail({ server, db, key, viewType, decodeType, matchPattern, reset, full }) { + async loadKeyDetail({ server, db, key, format, decode, matchPattern, reset, full }) { const tab = useTabStore() try { tab.updateLoading({ server, db, loading: true }) @@ -459,25 +461,27 @@ const useBrowserStore = defineStore('browser', { server, db, key, - viewAs: viewType, - decodeType, + format, + decode, matchPattern, full: full === true, reset, lite: true, }) if (success) { - const { value, viewAs, decodeType: decode, end } = data + const { value, decode: retDecode, format: retFormat, end } = data tab.updateValue({ server, db, key: decodeRedisKey(key), value, - viewAs, - decode, + decode: retDecode, + format: retFormat, reset: reset || full === true, end, }) + } else { + $message.error('load key detail fail:' + msg) } } finally { tab.updateLoading({ server, db, loading: false }) diff --git a/frontend/src/stores/tab.js b/frontend/src/stores/tab.js index 73429b7..4b648d9 100644 --- a/frontend/src/stores/tab.js +++ b/frontend/src/stores/tab.js @@ -19,8 +19,8 @@ const useTabStore = defineStore('tab', { * @param {number} [size] memory usage * @param {number} [length] length of content or entries * @property {int} [ttl] ttl of current key - * @param {string} [viewAs] * @param {string} [decode] + * @param {string} [format] * @param {boolean} [end] * @param {boolean} [loading] */ @@ -149,18 +149,18 @@ const useTabStore = defineStore('tab', { * @param {number} db * @param {string} key * @param {*} value - * @param {string} [viewAs] + * @param {string} [format] * @param {string] [decode] * @param {boolean} reset * @param {boolean} [end] keep end status if not set */ - updateValue({ server, db, key, value, viewAs, decode, reset, end }) { + updateValue({ server, db, key, value, format, decode, reset, end }) { const tab = find(this.tabList, { name: server, db, key }) if (tab == null) { return } - tab.viewAs = viewAs || tab.viewAs + tab.format = format || tab.format tab.decode = decode || tab.decode if (typeof end === 'boolean') { tab.end = end