Compare commits
5 Commits
b7c10b33e7
...
86b3ac0bd4
Author | SHA1 | Date |
---|---|---|
Lykin | 86b3ac0bd4 | |
Lykin | 5dd49a78dd | |
Lykin | 116513917d | |
Lykin | d4d1c33cb3 | |
Lykin | d59221f11e |
|
@ -35,12 +35,12 @@
|
|||
* Provides command-line operations.
|
||||
* Provides slow logs.
|
||||
* Segmented loading and querying for List/Hash/Set/Sorted Set.
|
||||
* Decode/decompression display for value of List/Hash/Set/Sorted Set
|
||||
* Decode/decompression display for value of List/Hash/Set/Sorted Set.
|
||||
* Inbuilt advanced editor - Monaco Editor.
|
||||
|
||||
## Roadmap
|
||||
- [ ] Real-time commands monitoring
|
||||
- [ ] Pub/Sub operations
|
||||
- [ ] Embedding Monaco Editor
|
||||
- [ ] Import/export connection profile
|
||||
- [ ] Import/export data
|
||||
|
||||
|
|
|
@ -36,6 +36,7 @@
|
|||
* 提供慢日志展示
|
||||
* List/Hash/Set/Sorted Set的分段加载和查询
|
||||
* List/Hash/Set/Sorted Set值的转码显示
|
||||
* 内置高级编辑器Monaco Editor
|
||||
|
||||
## 未来版本规划
|
||||
- [ ] 命令实时监控
|
||||
|
|
|
@ -51,7 +51,7 @@ type connectionItem struct {
|
|||
|
||||
type browserService struct {
|
||||
ctx context.Context
|
||||
connMap map[string]connectionItem
|
||||
connMap map[string]*connectionItem
|
||||
cmdHistory []cmdHistoryItem
|
||||
}
|
||||
|
||||
|
@ -62,7 +62,7 @@ func Browser() *browserService {
|
|||
if browser == nil {
|
||||
onceBrowser.Do(func() {
|
||||
browser = &browserService{
|
||||
connMap: map[string]connectionItem{},
|
||||
connMap: map[string]*connectionItem{},
|
||||
}
|
||||
})
|
||||
}
|
||||
|
@ -80,21 +80,20 @@ func (b *browserService) Stop() {
|
|||
item.client.Close()
|
||||
}
|
||||
}
|
||||
b.connMap = map[string]connectionItem{}
|
||||
b.connMap = map[string]*connectionItem{}
|
||||
}
|
||||
|
||||
// OpenConnection open redis server connection
|
||||
func (b *browserService) OpenConnection(name string) (resp types.JSResp) {
|
||||
item, err := b.getRedisClient(name, 0)
|
||||
// get connection config
|
||||
selConn := Connection().getConnection(name)
|
||||
item, err := b.getRedisClient(name, selConn.LastDB)
|
||||
if err != nil {
|
||||
resp.Msg = err.Error()
|
||||
return
|
||||
}
|
||||
|
||||
client, ctx := item.client, item.ctx
|
||||
// get connection config
|
||||
selConn := Connection().getConnection(name)
|
||||
|
||||
var totaldb int
|
||||
if selConn.DBFilterType == "" || selConn.DBFilterType == "none" {
|
||||
// get total databases
|
||||
|
@ -222,7 +221,7 @@ func (b *browserService) CloseConnection(name string) (resp types.JSResp) {
|
|||
|
||||
// get a redis client from local cache or create a new open
|
||||
// if db >= 0, will also switch to db index
|
||||
func (b *browserService) getRedisClient(connName string, db int) (item connectionItem, err error) {
|
||||
func (b *browserService) getRedisClient(connName string, db int) (item *connectionItem, err error) {
|
||||
var ok bool
|
||||
var client redis.UniversalClient
|
||||
if item, ok = b.connMap[connName]; ok {
|
||||
|
@ -275,7 +274,7 @@ func (b *browserService) getRedisClient(connName string, db int) (item connectio
|
|||
return
|
||||
}
|
||||
ctx, cancelFunc := context.WithCancel(b.ctx)
|
||||
item = connectionItem{
|
||||
item = &connectionItem{
|
||||
client: client,
|
||||
ctx: ctx,
|
||||
cancelFunc: cancelFunc,
|
||||
|
@ -289,14 +288,19 @@ func (b *browserService) getRedisClient(connName string, db int) (item connectio
|
|||
b.connMap[connName] = item
|
||||
}
|
||||
|
||||
if db >= 0 && item.db != db {
|
||||
// BUG: go-redis might not be executing commands on the corresponding database
|
||||
// requiring a database switch with each command
|
||||
if db >= 0 /*&& item.db != db*/ {
|
||||
var rdb *redis.Client
|
||||
if rdb, ok = client.(*redis.Client); ok && rdb != nil {
|
||||
if err = rdb.Do(item.ctx, "select", strconv.Itoa(db)).Err(); err != nil {
|
||||
_, err = rdb.Pipelined(item.ctx, func(pipe redis.Pipeliner) error {
|
||||
return pipe.Select(item.ctx, db).Err()
|
||||
})
|
||||
if err != nil {
|
||||
return
|
||||
}
|
||||
item.db = db
|
||||
b.connMap[connName] = item
|
||||
b.connMap[connName].db = db
|
||||
}
|
||||
}
|
||||
return
|
||||
|
@ -358,7 +362,7 @@ func (b *browserService) parseDBItemInfo(info string) map[string]int {
|
|||
|
||||
// ServerInfo get server info
|
||||
func (b *browserService) ServerInfo(name string) (resp types.JSResp) {
|
||||
item, err := b.getRedisClient(name, 0)
|
||||
item, err := b.getRedisClient(name, -1)
|
||||
if err != nil {
|
||||
resp.Msg = err.Error()
|
||||
return
|
||||
|
|
|
@ -1 +1 @@
|
|||
d5ec7e0103cfa8c99bc40c20ffdcb4fb
|
||||
d5ec7e0103cfa8c99bc40c20ffdcb4fb
|
|
@ -3,6 +3,8 @@ import { computed } from 'vue'
|
|||
import { typesBgColor, typesColor, typesShortName } from '@/consts/support_redis_type.js'
|
||||
import Binary from '@/components/icons/Binary.vue'
|
||||
import { get, toUpper } from 'lodash'
|
||||
import { useThemeVars } from 'naive-ui'
|
||||
import Loading from '@/components/icons/Loading.vue'
|
||||
|
||||
const props = defineProps({
|
||||
type: {
|
||||
|
@ -20,21 +22,24 @@ const props = defineProps({
|
|||
},
|
||||
round: Boolean,
|
||||
inverse: Boolean,
|
||||
loading: Boolean,
|
||||
})
|
||||
|
||||
const themeVars = useThemeVars()
|
||||
|
||||
const fontColor = computed(() => {
|
||||
if (props.inverse) {
|
||||
return typesBgColor[props.type]
|
||||
return props.loading ? themeVars.value.tagColor : typesBgColor[props.type]
|
||||
} else {
|
||||
return typesColor[props.type]
|
||||
return props.loading ? themeVars.value.textColorBase : typesColor[props.type]
|
||||
}
|
||||
})
|
||||
|
||||
const backgroundColor = computed(() => {
|
||||
if (props.inverse) {
|
||||
return typesColor[props.type]
|
||||
return props.loading ? themeVars.value.textColorBase : typesColor[props.type]
|
||||
} else {
|
||||
return typesBgColor[props.type]
|
||||
return props.loading ? themeVars.value.tagColor : typesBgColor[props.type]
|
||||
}
|
||||
})
|
||||
|
||||
|
@ -49,6 +54,7 @@ const label = computed(() => {
|
|||
<template>
|
||||
<div
|
||||
v-if="props.point"
|
||||
:class="{ 'redis-type-tag-loading': props.loading }"
|
||||
:style="{
|
||||
backgroundColor: fontColor,
|
||||
width: Math.max(props.pointSize, 5) + 'px',
|
||||
|
@ -61,12 +67,17 @@ const label = computed(() => {
|
|||
'redis-type-tag-normal': !props.short && props.size !== 'small',
|
||||
'redis-type-tag-small': !props.short && props.size === 'small',
|
||||
'redis-type-tag-round': props.round,
|
||||
'redis-type-tag-loading': props.loading,
|
||||
}"
|
||||
:color="{ color: backgroundColor, textColor: fontColor }"
|
||||
:size="props.size"
|
||||
bordered
|
||||
strong>
|
||||
<b>{{ label }}</b>
|
||||
<b v-if="!props.loading">{{ label }}</b>
|
||||
<n-icon v-else-if="props.short" size="14">
|
||||
<loading stroke-width="4" />
|
||||
</n-icon>
|
||||
<b v-else>LOADING</b>
|
||||
<template #icon>
|
||||
<n-icon v-if="binaryKey" :component="Binary" size="18" />
|
||||
</template>
|
||||
|
@ -85,4 +96,20 @@ const label = computed(() => {
|
|||
.redis-type-tag-small {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.redis-type-tag-loading {
|
||||
animation: fadeInOut 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes fadeInOut {
|
||||
0% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -0,0 +1,51 @@
|
|||
<script setup>
|
||||
const props = defineProps({
|
||||
strokeWidth: {
|
||||
type: [Number, String],
|
||||
default: 3,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
:stroke-width="props.strokeWidth"
|
||||
d="M7 4H41"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
<path
|
||||
:stroke-width="props.strokeWidth"
|
||||
d="M7 44H41"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
<path
|
||||
:stroke-width="props.strokeWidth"
|
||||
d="M11 44C13.6667 30.6611 18 23.9944 24 24C30 24.0056 34.3333 30.6722 37 44H11Z"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linejoin="round" />
|
||||
<path
|
||||
:stroke-width="props.strokeWidth"
|
||||
d="M37 4C34.3333 17.3389 30 24.0056 24 24C18 23.9944 13.6667 17.3278 11 4H37Z"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linejoin="round" />
|
||||
<path
|
||||
:stroke-width="props.strokeWidth"
|
||||
d="M21 15H27"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
<path
|
||||
:stroke-width="props.strokeWidth"
|
||||
d="M19 38H29"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
|
@ -154,8 +154,8 @@ const onDisconnect = () => {
|
|||
const handleSelectDB = async (db) => {
|
||||
try {
|
||||
loading.value = true
|
||||
browserStore.closeDatabase(props.server, props.db)
|
||||
browserStore.setKeyFilter(props.server, {})
|
||||
browserStore.closeDatabase(props.server, props.db)
|
||||
await browserStore.openDatabase(props.server, db)
|
||||
await nextTick()
|
||||
await connectionStore.saveLastDB(props.server, db)
|
||||
|
@ -163,6 +163,7 @@ const handleSelectDB = async (db) => {
|
|||
// browserTreeRef.value?.resetExpandKey(props.server, db)
|
||||
fullyLoaded.value = await browserStore.loadMoreKeys(props.server, db)
|
||||
browserTreeRef.value?.refreshTree()
|
||||
tabStore.setSelectedKeys(props.server)
|
||||
} catch (e) {
|
||||
$message.error(e.message)
|
||||
} finally {
|
||||
|
|
|
@ -379,21 +379,14 @@ const renderPrefix = ({ option }) => {
|
|||
},
|
||||
)
|
||||
}
|
||||
if (option.redisType == null || option.redisType === 'loading') {
|
||||
const loading = isEmpty(option.redisType) || option.redisType === 'loading'
|
||||
if (loading) {
|
||||
browserStore.loadKeyType({
|
||||
server: props.server,
|
||||
db: option.db,
|
||||
key: option.redisKey,
|
||||
keyCode: option.redisKeyCode,
|
||||
})
|
||||
// in loading
|
||||
return h(
|
||||
NIcon,
|
||||
{ size: 20 },
|
||||
{
|
||||
default: () => h(!!option.redisKeyCode ? Binary : Key),
|
||||
},
|
||||
)
|
||||
}
|
||||
switch (prefStore.keyIconType) {
|
||||
case typesIconStyle.FULL:
|
||||
|
@ -402,12 +395,14 @@ const renderPrefix = ({ option }) => {
|
|||
short: false,
|
||||
size: 'small',
|
||||
inverse: includes(selectedKeys.value, option.key),
|
||||
loading,
|
||||
})
|
||||
|
||||
case typesIconStyle.POINT:
|
||||
return h(RedisTypeTag, {
|
||||
type: toUpper(option.redisType),
|
||||
point: true,
|
||||
loading,
|
||||
})
|
||||
|
||||
case typesIconStyle.SHORT:
|
||||
|
@ -416,6 +411,7 @@ const renderPrefix = ({ option }) => {
|
|||
type: toUpper(option.redisType),
|
||||
short: true,
|
||||
size: 'small',
|
||||
loading,
|
||||
inverse: includes(selectedKeys.value, option.key),
|
||||
})
|
||||
}
|
||||
|
|
|
@ -157,6 +157,7 @@ const exThemeVars = computed(() => {
|
|||
background-color: v-bind('exThemeVars.ribbonColor');
|
||||
box-sizing: border-box;
|
||||
color: v-bind('themeVars.textColor2');
|
||||
--wails-draggable: drag;
|
||||
|
||||
.ribbon-wrapper {
|
||||
gap: 2px;
|
||||
|
@ -165,6 +166,7 @@ const exThemeVars = computed(() => {
|
|||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding-right: 3px;
|
||||
--wails-draggable: none;
|
||||
|
||||
.ribbon-item {
|
||||
width: 100%;
|
||||
|
@ -219,6 +221,7 @@ const exThemeVars = computed(() => {
|
|||
align-items: center;
|
||||
padding: 10px 0;
|
||||
gap: 15px;
|
||||
--wails-draggable: none;
|
||||
|
||||
.nav-menu-button {
|
||||
margin-bottom: 6px;
|
||||
|
|
|
@ -3,9 +3,9 @@ import {
|
|||
endsWith,
|
||||
find,
|
||||
get,
|
||||
initial,
|
||||
isEmpty,
|
||||
join,
|
||||
last,
|
||||
map,
|
||||
remove,
|
||||
set,
|
||||
|
@ -477,16 +477,22 @@ const useBrowserStore = defineStore('browser', {
|
|||
* @return {Promise<void>}
|
||||
*/
|
||||
async loadKeyType({ server, db, key, keyCode }) {
|
||||
const nodeMap = this._getNodeMap(server, db)
|
||||
const node = nodeMap.get(`${ConnectionType.RedisValue}/${key}`)
|
||||
if (node == null || !isEmpty(node.redisType)) {
|
||||
return
|
||||
}
|
||||
try {
|
||||
const nodeMap = this._getNodeMap(server, db)
|
||||
const node = nodeMap.get(`${ConnectionType.RedisValue}/${key}`)
|
||||
if (node == null || node.redisType != null) {
|
||||
return
|
||||
}
|
||||
node.redisType = 'loading'
|
||||
const { data } = await GetKeyType({ server, db, key: keyCode || key })
|
||||
const { type } = data || {}
|
||||
node.redisType = type
|
||||
const { data, success } = await GetKeyType({ server, db, key: keyCode || key })
|
||||
if (success) {
|
||||
const { type } = data || {}
|
||||
node.redisType = type
|
||||
} else {
|
||||
node.redisType = 'NONE'
|
||||
}
|
||||
} catch (e) {
|
||||
node.redisType = 'NONE'
|
||||
} finally {
|
||||
}
|
||||
},
|
||||
|
@ -1706,29 +1712,20 @@ const useBrowserStore = defineStore('browser', {
|
|||
|
||||
/**
|
||||
*
|
||||
* @param {string} connName
|
||||
* @param {string} server
|
||||
* @param {number} db
|
||||
* @param {string} key
|
||||
* @param {string} newKey
|
||||
* @private
|
||||
*/
|
||||
_renameKeyNode(connName, db, key, newKey) {
|
||||
const nodeMap = this._getNodeMap(connName, db)
|
||||
const nodeKey = `${ConnectionType.RedisValue}/${key}`
|
||||
const newNodeKey = `${ConnectionType.RedisValue}/${newKey}`
|
||||
const node = nodeMap.get(nodeKey)
|
||||
if (node != null) {
|
||||
// replace node map item
|
||||
const separator = this._getSeparator(connName)
|
||||
node.label = last(split(newKey, separator))
|
||||
node.key = `${connName}/db${db}#${newNodeKey}`
|
||||
node.redisKey = newKey
|
||||
nodeMap[newNodeKey] = node
|
||||
nodeMap.delete(nodeKey)
|
||||
// replace key set item
|
||||
const keySet = this._getKeySet(connName, db)
|
||||
keySet.delete(key)
|
||||
keySet.add(newKey)
|
||||
_renameKeyNode(server, db, key, newKey) {
|
||||
this._deleteKeyNode(server, db, key, false)
|
||||
const { success } = this._addKeyNodes(server, db, [newKey])
|
||||
|
||||
if (success) {
|
||||
const separator = this._getSeparator(server)
|
||||
const layer = initial(key.split(separator)).join(separator)
|
||||
this._tidyNode(server, db, layer)
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -1940,18 +1937,18 @@ const useBrowserStore = defineStore('browser', {
|
|||
|
||||
/**
|
||||
* rename key
|
||||
* @param {string} connName
|
||||
* @param {string} server
|
||||
* @param {number} db
|
||||
* @param {string} key
|
||||
* @param {string} newKey
|
||||
* @returns {Promise<{[msg]: string, success: boolean, [nodeKey]: string}>}
|
||||
*/
|
||||
async renameKey(connName, db, key, newKey) {
|
||||
const { success = false, msg } = await RenameKey(connName, db, key, newKey)
|
||||
async renameKey(server, db, key, newKey) {
|
||||
const { success = false, msg } = await RenameKey(server, db, key, newKey)
|
||||
if (success) {
|
||||
// delete old key and add new key struct
|
||||
this._renameKeyNode(connName, db, key, newKey)
|
||||
return { success: true, nodeKey: `${connName}/db${db}#${ConnectionType.RedisValue}/${newKey}` }
|
||||
this._renameKeyNode(server, db, key, newKey)
|
||||
return { success: true, nodeKey: `${server}/db${db}#${ConnectionType.RedisValue}/${newKey}` }
|
||||
} else {
|
||||
return { success: false, msg }
|
||||
}
|
||||
|
|
Before Width: | Height: | Size: 366 KiB After Width: | Height: | Size: 386 KiB |
Before Width: | Height: | Size: 365 KiB After Width: | Height: | Size: 404 KiB |
Before Width: | Height: | Size: 378 KiB After Width: | Height: | Size: 398 KiB |
Before Width: | Height: | Size: 377 KiB After Width: | Height: | Size: 421 KiB |