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: hash value support format viewing #65

This commit is contained in:
tiny-craft 2023-11-13 22:31:18 +08:00
parent a49d618288
commit a2c2ceb483
8 changed files with 153 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
backend/services/browser_service.go
View File

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

14
backend/types/js_resp.go
View File

@ -23,18 +23,24 @@ 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"`
Format string `json:"format,omitempty"`
Decode string `json:"decode,omitempty"`
End bool `json:"end"`
}

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

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

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

@ -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)
}
</script>

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

@ -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({
<n-divider v-if="!isNaN(props.length)" vertical />
<n-text v-if="!isNaN(props.size)">{{ $t('interface.memory_usage') }}: {{ bytes(props.size) }}</n-text>
<div class="flex-item-expand"></div>
<format-selector
v-show="!inEdit"
:decode="props.decode"
:disabled="inEdit"
:format="props.format"
@format-changed="onFormatChanged" />
</div>
</div>
</template>

34
frontend/src/components/content_value/ContentValueWrapper.vue
View File

@ -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<void>}
*/
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)
</script>
@ -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"

30
frontend/src/stores/browser.js
View File

@ -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<void>}
*/
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<void>}
*/
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 })

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

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