lingling
/
tiny-rdm
mirror of https://github.com/tiny-craft/tiny-rdm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: add "tree view" and "list view" switch for keys browser

This commit is contained in:
tiny-craft 2023-10-22 00:57:36 +08:00
parent 34a0be4d08
commit a669f3dfcb
10 changed files with 339 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/common/SwitchButton.vue
View File

@ -24,6 +24,10 @@ const props = defineProps({
type: [Number, String],
default: 3,
},
unselectStrokeWidth: {
type: [Number, String],
default: 3,
},
})
const emit = defineEmits(['update:value'])
@ -46,7 +50,9 @@ const handleSwitch = (idx) => {
<n-button :tertiary="i !== props.value" :focusable="false" :size="props.size" @click="handleSwitch(i)">
<template #icon>
<n-icon :size="props.iconSize">
<component :is="icon" :stroke-width="props.strokeWidth" />
<component
:is="icon"
:stroke-width="i !== props.value ? props.unselectStrokeWidth : props.strokeWidth" />
</n-icon>
</template>
</n-button>

48
frontend/src/components/icons/ListView.vue Normal file
View File

@ -0,0 +1,48 @@
<script setup>
const props = defineProps({
strokeWidth: {
type: [Number, String],
default: 3,
},
})
</script>
<template>
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M9 42C11.2091 42 13 40.2091 13 38C13 35.7909 11.2091 34 9 34C6.79086 34 5 35.7909 5 38C5 40.2091 6.79086 42 9 42Z"
stroke="currentColor"
:stroke-width="props.strokeWidth"
stroke-linejoin="round" />
<path
d="M9 14C11.2091 14 13 12.2092 13 10C13 7.79086 11.2091 6 9 6C6.79086 6 5 7.79086 5 10C5 12.2092 6.79086 14 9 14Z"
stroke="currentColor"
:stroke-width="props.strokeWidth"
stroke-linejoin="round" />
<path
d="M9 28C11.2091 28 13 26.2092 13 24C13 21.7908 11.2091 20 9 20C6.79086 20 5 21.7908 5 24C5 26.2092 6.79086 28 9 28Z"
stroke="currentColor"
:stroke-width="props.strokeWidth"
stroke-linejoin="round" />
<path
d="M21 24H43"
stroke="currentColor"
:stroke-width="props.strokeWidth"
stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M21 38H43"
stroke="currentColor"
:stroke-width="props.strokeWidth"
stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M21 10H43"
stroke="currentColor"
:stroke-width="props.strokeWidth"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</template>
<style lang="scss" scoped></style>

57
frontend/src/components/icons/TreeView.vue Normal file
View File

@ -0,0 +1,57 @@
<script setup>
const props = defineProps({
strokeWidth: {
type: [Number, String],
default: 3,
},
})
</script>
<template>
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M38 20H18V28H38V20Z"
fill="none"
stroke="currentColor"
:stroke-width="props.strokeWidth"
stroke-linejoin="round" />
<path
d="M32 6H18V14H32V6Z"
fill="none"
stroke="currentColor"
:stroke-width="props.strokeWidth"
stroke-linejoin="round" />
<path
d="M44 34H18V42H44V34Z"
fill="none"
stroke="currentColor"
:stroke-width="props.strokeWidth"
stroke-linejoin="round" />
<path
d="M17 10H5"
stroke="currentColor"
:stroke-width="props.strokeWidth"
stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M17 24H5"
stroke="currentColor"
:stroke-width="props.strokeWidth"
stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M17 38H5"
stroke="currentColor"
:stroke-width="props.strokeWidth"
stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M5 44V4"
stroke="currentColor"
:stroke-width="props.strokeWidth"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</template>
<style lang="scss" scoped></style>

20
frontend/src/components/sidebar/BrowserPane.vue
View File

@ -1,5 +1,5 @@
<script setup>
import { useThemeVars } from 'naive-ui'
import { NIcon, useThemeVars } from 'naive-ui'
import BrowserTree from './BrowserTree.vue'
import IconButton from '@/components/common/IconButton.vue'
import useTabStore from 'stores/tab.js'
@ -13,6 +13,9 @@ import { types } from '@/consts/support_redis_type.js'
import Search from '@/components/icons/Search.vue'
import Unlink from '@/components/icons/Unlink.vue'
import Status from '@/components/icons/Status.vue'
import SwitchButton from '@/components/common/SwitchButton.vue'
import ListView from '@/components/icons/ListView.vue'
import TreeView from '@/components/icons/TreeView.vue'
const themeVars = useThemeVars()
const dialogStore = useDialogStore()
@ -59,6 +62,12 @@ const filterTypeOptions = computed(() => {
})
return options
})
const viewType = ref(0)
const onSwitchView = (selectView) => {
const { server } = tabStore.currentTab
connectionStore.switchKeyView(server, selectView)
}
</script>
<template>
@ -82,9 +91,16 @@ const filterTypeOptions = computed(() => {
</div>
<!-- bottom function bar -->
<div class="nav-pane-bottom flex-box-h">
<switch-button
v-model:value="viewType"
:icons="[TreeView, ListView]"
:t-tooltips="['interface.tree_view', 'interface.list_view']"
stroke-width="4"
unselect-stroke-width="3"
@update:value="onSwitchView" />
<icon-button :icon="Status" size="20" stroke-width="4" t-tooltip="interface.status" @click="onInfo" />
<icon-button :icon="Refresh" size="20" stroke-width="4" t-tooltip="interface.reload" @click="onRefresh" />
<div class="flex-item-expand"></div>
<div class="flex-item-expand" />
<icon-button
:icon="Unlink"
size="20"

11
frontend/src/components/sidebar/BrowserTree.vue
View File

@ -28,6 +28,7 @@ import LoadAll from '@/components/icons/LoadAll.vue'
const props = defineProps({
server: String,
keyView: String,
})
const i18n = useI18n()
@ -53,14 +54,6 @@ const selectedKeys = computed(() => {
const data = computed(() => {
const dbs = get(connectionStore.databases, props.server, [])
return dbs
// return [
// {
// key: `${props.server}`,
// label: props.server,
// type: ConnectionType.Server,
// children: dbs,
// },
// ]
})
const backgroundColor = computed(() => {
@ -490,7 +483,7 @@ const renderIconMenu = (items) => {
{
align: 'center',
inline: true,
size: 2,
size: 3,
wrapItem: false,
wrap: false,
style: 'margin-right: 5px',

2
frontend/src/components/sidebar/ConnectionTree.vue
View File

@ -166,7 +166,7 @@ const renderIconMenu = (items) => {
{
align: 'center',
inline: true,
size: 2,
size: 3,
wrapItem: false,
wrap: false,
style: 'margin-right: 5px',

8
frontend/src/consts/key_view_type.js Normal file
View File

@ -0,0 +1,8 @@
/**
* all types of redis key viewing
* @enum {number}
*/
export const KeyViewType = {
Tree: 0,
List: 1,
}

2
frontend/src/langs/en.json
View File

@ -48,6 +48,8 @@
"disconnect_all": "Disconnect all",
"status": "Status",
"filter": "Filter",
"tree_view": "Tree View",
"list_view": "List View",
"sort_conn": "Sort Connections",
"new_conn_title": "New Connection",
"open_db": "Open Database",

2
frontend/src/langs/zh-cn.json
View File

@ -48,6 +48,8 @@
"disconnect_all": "断开所有连接",
"status": "状态",
"filter": "筛选",
"tree_view": "树视图",
"list_view": "列表视图",
"sort_conn": "调整连接顺序",
"new_conn_title": "新建连接",
"open_db": "打开数据库",

154
frontend/src/stores/connections.js
View File

@ -51,6 +51,8 @@ import { ConnectionType } from '@/consts/connection_type.js'
import useTabStore from './tab.js'
import { types } from '@/consts/support_redis_type.js'
import { decodeRedisKey, nativeRedisKey } from '@/utils/key_convert.js'
import { KeyViewType } from '@/consts/key_view_type.js'
import { nextTick } from 'vue'
const useConnectionStore = defineStore('connections', {
/**
@ -117,10 +119,12 @@ const useConnectionStore = defineStore('connections', {
connections: [], // all connections
serverStats: {}, // current server status info
serverProfile: {}, // all server profile
keyFilter: {}, // all key filters in opened connections group by server+db
typeFilter: {}, // all key type filters in opened connections group by server+db
databases: {}, // all databases in opened connections group by server name
nodeMap: {}, // all nodes in opened connections group by server#db and type/key
keyFilter: {}, // all key filters in opened connections group by 'server+db'
typeFilter: {}, // all key type filters in opened connections group by 'server+db'
viewType: {}, // view type selection for all opened connections group by 'server'
databases: {}, // all databases in opened connections group by 'server name'
nodeMap: {}, // all nodes in opened connections group by 'server#db' and 'type/key'
keySet: {}, // all keys set in opened connections group by 'server#db
}),
getters: {
anyConnectionOpened() {
@ -320,6 +324,38 @@ const useConnectionStore = defineStore('connections', {
return null
},
/**
* switch key view
* @param {string} connName
* @param {number} viewType
*/
async switchKeyView(connName, viewType) {
if (viewType !== KeyViewType.Tree && viewType !== KeyViewType.List) {
return
}
const t = get(this.viewType, connName, KeyViewType.Tree)
if (t === viewType) {
return
}
this.viewType[connName] = viewType
const dbs = get(this.databases, connName, [])
for (const dbItem of dbs) {
if (!dbItem.opened) {
continue
}
dbItem.children = undefined
dbItem.keys = 0
const { db = 0 } = dbItem
this._getNodeMap(connName, db).clear()
const keys = this._getKeySet(connName, db)
this._addKeyNodes(connName, db, keys)
this._tidyNode(connName, db, '')
}
},
/**
* create a new connection or update current connection profile
* @param {string} name set null if create a new connection
@ -406,6 +442,7 @@ const useConnectionStore = defineStore('connections', {
const dbs = []
for (let i = 0; i < db.length; i++) {
this._getNodeMap(name, i).clear()
this._getKeySet(name, i).clear()
dbs.push({
key: `${name}/${db[i].name}`,
label: db[i].name,
@ -438,6 +475,7 @@ const useConnectionStore = defineStore('connections', {
for (const db of dbs) {
this.removeKeyFilter(name, db.db)
this._getNodeMap(name, db.db).clear()
this._getKeySet(name, db.db).clear()
}
}
this.removeKeyFilter(name, -1)
@ -459,6 +497,8 @@ const useConnectionStore = defineStore('connections', {
}
this.databases = {}
this.nodeMap.clear()
this.keySet.clear()
this.serverStats = {}
const tabStore = useTabStore()
tabStore.removeAllTab()
@ -534,8 +574,8 @@ const useConnectionStore = defineStore('connections', {
* @returns {Promise<void>}
*/
async openDatabase(connName, db) {
const { match: filterPattern, type: keyType } = this.getKeyFilter(connName, db)
const { data, success, msg } = await OpenDatabase(connName, db, filterPattern, keyType)
const { match: filterPattern, type: filterType } = this.getKeyFilter(connName, db)
const { data, success, msg } = await OpenDatabase(connName, db, filterPattern, filterType)
if (!success) {
throw new Error(msg)
}
@ -571,6 +611,7 @@ const useConnectionStore = defineStore('connections', {
selDB.isLeaf = false
this._getNodeMap(connName, db).clear()
this._getKeySet(connName, db).clear()
},
/**
@ -588,6 +629,7 @@ const useConnectionStore = defineStore('connections', {
selDB.opened = false
this._getNodeMap(connName, db).clear()
this._getKeySet(connName, db).clear()
},
/**
@ -752,30 +794,50 @@ const useConnectionStore = defineStore('connections', {
/**
* get node map
* @param connName
* @param db
* @param {string} connName
* @param {number} db
* @returns {Map<string, DatabaseItem>}
* @private
*/
_getNodeMap(connName, db) {
if (this.nodeMap[`${connName}#${db}`] == null) {
if (!this.nodeMap.hasOwnProperty(`${connName}#${db}`)) {
this.nodeMap[`${connName}#${db}`] = new Map()
}
// construct a tree node list, the format of item key likes 'server/db#type/key'
return this.nodeMap[`${connName}#${db}`]
},
/**
* get all keys in a database
* @param {string} connName
* @param {number} db
* @return {Set<string|number[]>}
* @private
*/
_getKeySet(connName, db) {
if (!this.keySet.hasOwnProperty(`${connName}#${db}`)) {
this.keySet[`${connName}#${db}`] = new Set()
}
// construct a key set
return this.keySet[`${connName}#${db}`]
},
/**
* remove keys in db
* @param {string} connName
* @param {number} db
* @param {Array<string|number[]>} keys
* @param {Array<string|number[]>|Set<string|number[]>} keys
* @param {boolean} [sortInsert]
* @return {{success: boolean, newKey: number, newLayer: number, replaceKey: number}}
* @private
*/
_addKeyNodes(connName, db, keys, sortInsert) {
const result = { success: false, newLayer: 0, newKey: 0, replaceKey: 0 }
const result = {
success: false,
newLayer: 0,
newKey: 0,
replaceKey: 0,
}
if (isEmpty(keys)) {
return result
}
@ -789,11 +851,46 @@ const useConnectionStore = defineStore('connections', {
selDB.children = []
}
const nodeMap = this._getNodeMap(connName, db)
const keySet = this._getKeySet(connName, db)
const rootChildren = selDB.children
const viewType = get(this.viewType, connName, KeyViewType.Tree)
if (viewType === KeyViewType.List) {
// construct list view data
for (const key of keys) {
const k = decodeRedisKey(key)
const binaryKey = k !== key
const keyParts = binaryKey ? [nativeRedisKey(key)] : split(k, separator)
const isBinaryKey = k !== key
const nodeKey = `${ConnectionType.RedisValue}/${nativeRedisKey(key)}`
const replaceKey = nodeMap.has(nodeKey)
const selectedNode = {
key: `${connName}/db${db}#${nodeKey}`,
label: k,
db,
keys: 0,
redisKey: k,
redisKeyCode: isBinaryKey ? key : undefined,
type: ConnectionType.RedisValue,
isLeaf: true,
}
nodeMap.set(nodeKey, selectedNode)
keySet.add(key)
if (!replaceKey) {
if (sortInsert) {
const index = sortedIndexBy(rootChildren, selectedNode, 'key')
rootChildren.splice(index, 0, selectedNode)
} else {
rootChildren.push(selectedNode)
}
result.newKey += 1
} else {
result.replaceKey += 1
}
}
} else {
// construct tree view data
for (const key of keys) {
const k = decodeRedisKey(key)
const isBinaryKey = k !== key
const keyParts = isBinaryKey ? [nativeRedisKey(key)] : split(k, separator)
const len = size(keyParts)
const lastIdx = len - 1
let handlePath = ''
@ -817,9 +914,7 @@ const useConnectionStore = defineStore('connections', {
}
nodeMap.set(nodeKey, selectedNode)
if (sortInsert) {
const index = sortedIndexBy(children, selectedNode, (elem) => {
return elem.key
})
const index = sortedIndexBy(children, selectedNode, 'key')
children.splice(index, 0, selectedNode)
} else {
children.push(selectedNode)
@ -834,20 +929,19 @@ const useConnectionStore = defineStore('connections', {
const replaceKey = nodeMap.has(nodeKey)
const selectedNode = {
key: `${connName}/db${db}#${nodeKey}`,
label: binaryKey ? k : keyParts[i],
label: isBinaryKey ? k : keyParts[i],
db,
keys: 0,
redisKey: handlePath,
redisKeyCode: binaryKey ? key : undefined,
redisKeyCode: isBinaryKey ? key : undefined,
type: ConnectionType.RedisValue,
isLeaf: true,
}
nodeMap.set(nodeKey, selectedNode)
keySet.add(key)
if (!replaceKey) {
if (sortInsert) {
const index = sortedIndexBy(children, selectedNode, (elem) => {
return elem.key > selectedNode.key
})
const index = sortedIndexBy(children, selectedNode, 'key')
children.splice(index, 0, selectedNode)
} else {
children.push(selectedNode)
@ -859,6 +953,7 @@ const useConnectionStore = defineStore('connections', {
}
}
}
}
return result
},
@ -1408,8 +1503,9 @@ const useConnectionStore = defineStore('connections', {
}
const nodeMap = this._getNodeMap(connName, db)
const keySet = this._getKeySet(connName, db)
if (isLayer === true) {
this._deleteChildrenKeyNodes(nodeMap, key)
this._deleteChildrenKeyNodes(nodeMap, keySet, key)
}
if (isEmpty(key)) {
// clear all key nodes
@ -1447,12 +1543,18 @@ const useConnectionStore = defineStore('connections', {
if (isEmpty(anceNode.children)) {
nodeMap.delete(`${ConnectionType.RedisKey}/${anceKey}`)
keySet.delete(anceNode.redisKeyCode || anceNode.redisKey)
} else {
break
}
} else {
// last one, remove from db node
remove(dbRoot.children, { type: ConnectionType.RedisKey, redisKey: keyParts[0] })
const node = nodeMap.get(`${ConnectionType.RedisValue}/${keyParts[0]}`)
if (node != null) {
nodeMap.delete(`${ConnectionType.RedisValue}/${keyParts[0]}`)
keySet.delete(node.redisKeyCode || node.redisKey)
}
}
}
}
@ -1463,12 +1565,14 @@ const useConnectionStore = defineStore('connections', {
/**
* delete node and all it's children from nodeMap
* @param {Map<string, DatabaseItem>} nodeMap
* @param {Set<string|number[]>} keySet
* @param {string} [key] clean nodeMap if key is empty
* @private
*/
_deleteChildrenKeyNodes(nodeMap, key) {
_deleteChildrenKeyNodes(nodeMap, keySet, key) {
if (isEmpty(key)) {
nodeMap.clear()
keySet.clear()
} else {
const mapKey = `${ConnectionType.RedisKey}/${key}`
const node = nodeMap.get(mapKey)
@ -1477,13 +1581,15 @@ const useConnectionStore = defineStore('connections', {
if (!nodeMap.delete(`${ConnectionType.RedisValue}/${child.redisKey}`)) {
console.warn('delete:', `${ConnectionType.RedisValue}/${child.redisKey}`)
}
keySet.delete(child.redisKeyCode || child.redisKey)
} else if (child.type === ConnectionType.RedisKey) {
this._deleteChildrenKeyNodes(nodeMap, child.redisKey)
this._deleteChildrenKeyNodes(nodeMap, keySet, child.redisKey)
}
}
if (!nodeMap.delete(mapKey)) {
console.warn('delete map key', mapKey)
}
keySet.delete(node.redisKeyCode || node.redisKey)
}
},