feat: add key layer reload/refresh back after database full loaded #72

perf: update database max keys each load next/all.
This commit is contained in:
tiny-craft 2023-11-10 11:52:54 +08:00
parent fa4929cd63
commit 7b3c3df230
4 changed files with 95 additions and 33 deletions

View File

@ -490,10 +490,12 @@ func (b *browserService) LoadAllKeys(connName string, db int, match, keyType str
return return
} }
b.setClientCursor(connName, db, 0) b.setClientCursor(connName, db, 0)
maxKeys := b.loadDBSize(ctx, client)
resp.Success = true resp.Success = true
resp.Data = map[string]any{ resp.Data = map[string]any{
"keys": keys, "keys": keys,
"maxKeys": maxKeys,
} }
return return
} }

View File

@ -142,8 +142,8 @@ watch(
</n-empty> </n-empty>
<keep-alive v-else> <keep-alive v-else>
<component <component
ref="contentRef"
:is="valueComponents[data.type]" :is="valueComponents[data.type]"
ref="contentRef"
:db="data.db" :db="data.db"
:decode="data.decode || decodeTypes.NONE" :decode="data.decode || decodeTypes.NONE"
:end="data.end" :end="data.end"

View File

@ -272,9 +272,14 @@ const handleSelectContextMenu = (key) => {
const { match: pattern, type } = browserStore.getKeyFilter(props.server, db) const { match: pattern, type } = browserStore.getKeyFilter(props.server, db)
dialogStore.openKeyFilterDialog(props.server, db, pattern, type) dialogStore.openKeyFilterDialog(props.server, db, pattern, type)
break break
// case 'key_reload': case 'key_reload':
// browserStore.loadKeys(props.server, db, redisKey) if (node != null && !!!node.loading) {
// break node.loading = true
browserStore.reloadLayer(props.server, db, redisKey).finally(() => {
delete node.loading
})
}
break
case 'value_reload': case 'value_reload':
browserStore.reloadKey({ browserStore.reloadKey({
server: props.server, server: props.server,
@ -519,7 +524,7 @@ const renderIconMenu = (items) => {
) )
} }
const getDatabaseMenu = (opened, loading, end) => { const calcDBMenu = (opened, loading, end) => {
const btns = [] const btns = []
if (opened) { if (opened) {
btns.push( btns.push(
@ -581,14 +586,16 @@ const getDatabaseMenu = (opened, loading, end) => {
return btns return btns
} }
const getLayerMenu = () => { const calcLayerMenu = (loading, end) => {
return [ return [
// disable reload by layer, due to conflict with partial loading keys // reload layer enable only full loaded
// h(IconButton, { h(IconButton, {
// tTooltip: 'interface.reload', tTooltip: end === true ? 'interface.reload' : 'interface.reload',
// icon: Refresh, icon: Refresh,
// onClick: () => handleSelectContextMenu('key_reload'), loading: loading === true,
// }), disabled: end !== true,
onClick: () => handleSelectContextMenu('key_reload'),
}),
h(IconButton, { h(IconButton, {
tTooltip: 'interface.new_key', tTooltip: 'interface.new_key',
icon: Add, icon: Add,
@ -602,7 +609,7 @@ const getLayerMenu = () => {
] ]
} }
const getValueMenu = () => { const calcValueMenu = () => {
return [ return [
h(IconButton, { h(IconButton, {
tTooltip: 'interface.remove_key', tTooltip: 'interface.remove_key',
@ -617,11 +624,12 @@ const renderSuffix = ({ option }) => {
if ((option.type === ConnectionType.RedisDB && option.opened) || includes(selectedKeys.value, option.key)) { if ((option.type === ConnectionType.RedisDB && option.opened) || includes(selectedKeys.value, option.key)) {
switch (option.type) { switch (option.type) {
case ConnectionType.RedisDB: case ConnectionType.RedisDB:
return renderIconMenu(getDatabaseMenu(option.opened, option.loading, option.fullLoaded)) return renderIconMenu(calcDBMenu(option.opened, option.loading, option.fullLoaded))
case ConnectionType.RedisKey: case ConnectionType.RedisKey:
return renderIconMenu(getLayerMenu()) const fullLoaded = browserStore.isFullLoaded(props.server, option.db)
return renderIconMenu(calcLayerMenu(option.loading, fullLoaded))
case ConnectionType.RedisValue: case ConnectionType.RedisValue:
return renderIconMenu(getValueMenu()) return renderIconMenu(calcValueMenu())
} }
} }
return null return null

View File

@ -139,7 +139,7 @@ const useBrowserStore = defineStore('browser', {
* get database by server name and index * get database by server name and index
* @param {string} connName * @param {string} connName
* @param {number} db * @param {number} db
* @return {{}|null} * @return {DatabaseItem|null}
*/ */
getDatabase(connName, db) { getDatabase(connName, db) {
const dbs = this.databases[connName] const dbs = this.databases[connName]
@ -152,6 +152,20 @@ const useBrowserStore = defineStore('browser', {
return null return null
}, },
/**
* get full loaded status of database
* @param connName
* @param db
* @return {boolean}
*/
isFullLoaded(connName, db) {
const selDB = this.getDatabase(connName, db)
if (selDB != null) {
return selDB.fullLoaded === true
}
return false
},
/** /**
* switch key view * switch key view
* @param {string} connName * @param {string} connName
@ -473,9 +487,9 @@ const useBrowserStore = defineStore('browser', {
* @param {string} connName * @param {string} connName
* @param {number} db * @param {number} db
* @param {string} match * @param {string} match
* @param {string} matchType * @param {string} [matchType]
* @param {boolean} [full] * @param {boolean} [full]
* @returns {Promise<{keys: string[], end: boolean}>} * @returns {Promise<{keys: string[], maxKeys: number, end: boolean}>}
*/ */
async scanKeys(connName, db, match, matchType, full) { async scanKeys(connName, db, match, matchType, full) {
let resp let resp
@ -488,8 +502,8 @@ const useBrowserStore = defineStore('browser', {
if (!success) { if (!success) {
throw new Error(msg) throw new Error(msg)
} }
const { keys = [], end } = data const { keys = [], maxKeys, end } = data
return { keys, end, success } return { keys, end, maxKeys, success }
}, },
/** /**
@ -499,7 +513,7 @@ const useBrowserStore = defineStore('browser', {
* @param {string|null} prefix * @param {string|null} prefix
* @param {string|null} matchType * @param {string|null} matchType
* @param {boolean} [all] * @param {boolean} [all]
* @return {Promise<{keys: Array<string|number[]>, end: boolean}>} * @return {Promise<{keys: Array<string|number[]>, maxKeys: number, end: boolean}>}
* @private * @private
*/ */
async _loadKeys(connName, db, prefix, matchType, all) { async _loadKeys(connName, db, prefix, matchType, all) {
@ -523,7 +537,8 @@ const useBrowserStore = defineStore('browser', {
*/ */
async loadMoreKeys(connName, db) { async loadMoreKeys(connName, db) {
const { match, type: keyType } = this.getKeyFilter(connName, db) const { match, type: keyType } = this.getKeyFilter(connName, db)
const { keys, end } = await this._loadKeys(connName, db, match, keyType, false) const { keys, maxKeys, end } = await this._loadKeys(connName, db, match, keyType, false)
this._setDBMaxKeys(connName, db, maxKeys)
// remove current keys below prefix // remove current keys below prefix
this._addKeyNodes(connName, db, keys) this._addKeyNodes(connName, db, keys)
this._tidyNode(connName, db, '') this._tidyNode(connName, db, '')
@ -538,11 +553,44 @@ const useBrowserStore = defineStore('browser', {
*/ */
async loadAllKeys(connName, db) { async loadAllKeys(connName, db) {
const { match, type: keyType } = this.getKeyFilter(connName, db) const { match, type: keyType } = this.getKeyFilter(connName, db)
const { keys } = await this._loadKeys(connName, db, match, keyType, true) const { keys, maxKeys } = await this._loadKeys(connName, db, match, keyType, true)
this._setDBMaxKeys(connName, db, maxKeys)
this._addKeyNodes(connName, db, keys) this._addKeyNodes(connName, db, keys)
this._tidyNode(connName, db, '') this._tidyNode(connName, db, '')
}, },
/**
* reload keys under layer
* @param {string} connName
* @param {number} db
* @param {string} prefix
* @return {Promise<void>}
*/
async reloadLayer(connName, db, prefix) {
if (isEmpty(prefix)) {
return
}
let match = prefix
const separator = this._getSeparator(connName)
if (!endsWith(match, separator)) {
match += separator + '*'
} else {
match += '*'
}
// FIXME: ignore original match pattern due to redis not support combination matching
const { match: originMatch, type: keyType } = this.getKeyFilter(connName, db)
const { keys, maxKeys, success } = await this._loadKeys(connName, db, match, keyType, true)
if (!success) {
return
}
this._setDBMaxKeys(connName, db, maxKeys)
// remove current keys below prefix
this._deleteKeyNode(connName, db, prefix, true)
this._addKeyNodes(connName, db, keys)
this._tidyNode(connName, db, prefix)
},
/** /**
* get custom separator of connection * get custom separator of connection
* @param server * @param server
@ -816,13 +864,16 @@ const useBrowserStore = defineStore('browser', {
}, },
/** /**
* update max key by value * update max key by increase/decrease value
* @param {string} connName * @param {string} connName
* @param {number} db * @param {number} db
* @param {number} updateValue * @param {number} [updateValue]
* @private * @private
*/ */
_updateDBMaxKeys(connName, db, updateValue) { _updateDBMaxKeys(connName, db, updateValue) {
if (updateValue === undefined) {
return
}
const database = this.getDatabase(connName, db) const database = this.getDatabase(connName, db)
if (database != null) { if (database != null) {
const maxKeys = get(database, 'maxKeys', 0) const maxKeys = get(database, 'maxKeys', 0)
@ -831,15 +882,16 @@ const useBrowserStore = defineStore('browser', {
}, },
/** /**
* set db max keys to 0 * set db max keys value
* @param connName * @param {string} connName
* @param db * @param {number} db
* @param {number} maxKeys
* @private * @private
*/ */
_emptyDBMaxKeys(connName, db) { _setDBMaxKeys(connName, db, maxKeys) {
const database = this.getDatabase(connName, db) const database = this.getDatabase(connName, db)
if (database != null) { if (database != null) {
set(database, 'maxKeys', 0) set(database, 'maxKeys', maxKeys)
} }
}, },
@ -1588,7 +1640,7 @@ const useBrowserStore = defineStore('browser', {
if (success === true) { if (success === true) {
// update tree view data // update tree view data
this._deleteKeyNode(connName, db) this._deleteKeyNode(connName, db)
this._emptyDBMaxKeys(connName, db) this._setDBMaxKeys(connName, db, 0)
// set tab content empty // set tab content empty
const tab = useTabStore() const tab = useTabStore()
tab.emptyTab(connName) tab.emptyTab(connName)