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: the browser pane is now set to display only a single database 

feat: add search input in browser pane
This commit is contained in:
Lykin 2023-12-01 17:59:04 +08:00
parent 8201004478
commit e2f33af1c7
21 changed files with 609 additions and 437 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
backend/services/browser_service.go
View File

@ -390,7 +390,20 @@ func (b *browserService) ServerInfo(name string) (resp types.JSResp) {
// @param path contain connection name and db name
func (b *browserService) OpenDatabase(connName string, db int, match string, keyType string) (resp types.JSResp) {
b.setClientCursor(connName, db, 0)
return b.LoadNextKeys(connName, db, match, keyType)
item, err := b.getRedisClient(connName, db)
if err != nil {
resp.Msg = err.Error()
return
}
client, ctx := item.client, item.ctx
maxKeys := b.loadDBSize(ctx, client)
resp.Success = true
resp.Data = map[string]any{
"maxKeys": maxKeys,
}
return
}
// scan keys
@ -433,6 +446,7 @@ func (b *browserService) scanKeys(ctx context.Context, client redis.UniversalCli
// cluster mode
var mutex sync.Mutex
err = cluster.ForEachMaster(ctx, func(ctx context.Context, cli *redis.Client) error {
// FIXME: BUG? can not fully load in cluster mode? maybe remove the shared "cursor"
return scan(ctx, cli, func(k []any) {
mutex.Lock()
keys = append(keys, k...)

3
frontend/src/components/common/IconButton.vue
View File

@ -26,6 +26,7 @@ const props = defineProps({
disabled: Boolean,
buttonStyle: [String, Object],
buttonClass: [String, Object],
small: Boolean,
})
const hasTooltip = computed(() => {
@ -42,6 +43,7 @@ const hasTooltip = computed(() => {
:disabled="disabled"
:focusable="false"
:loading="loading"
:size="small ? 'small' : ''"
:style="props.buttonStyle"
:text="!border"
:type="type"
@ -64,6 +66,7 @@ const hasTooltip = computed(() => {
:disabled="disabled"
:focusable="false"
:loading="loading"
:size="small ? 'small' : ''"
:style="props.buttonStyle"
:text="!border"
:type="type"

83
frontend/src/components/common/RedisTypeSelector.vue Normal file
View File

@ -0,0 +1,83 @@
<script setup>
import { computed, h } from 'vue'
import { useThemeVars } from 'naive-ui'
import { types, typesBgColor, typesColor } from '@/consts/support_redis_type.js'
import { get, map, toUpper } from 'lodash'
const props = defineProps({
value: {
type: String,
default: 'ALL',
},
})
const emit = defineEmits(['update:value', 'select'])
const options = computed(() => {
const opts = map(types, (v) => ({
label: v,
key: v,
}))
return [{ label: 'ALL', key: 'ALL' }, ...opts]
})
const themeVars = useThemeVars()
const renderIcon = (option) => {
if (option.key === props.value) {
const backgroundColor = get(typesColor, option.key, themeVars.value.textColor3)
return h('div', { style: { borderRadius: '999px', width: '10px', height: '10px', backgroundColor } }, '')
}
}
const renderLabel = (option) => {
const color = get(typesColor, option.key, '')
return h('div', { style: { color, fontWeight: '450' } }, option.label)
}
const fontColor = computed(() => {
return get(typesColor, props.value, '')
})
const backgroundColor = computed(() => {
return get(typesBgColor, props.value, '')
})
const displayValue = computed(() => {
return get(types, toUpper(props.value), 'ALL')
})
const handleSelect = (select) => {
if (props.value !== select) {
emit('update:value', select)
emit('select', select)
}
}
</script>
<template>
<n-dropdown
:options="options"
:render-icon="renderIcon"
:render-label="renderLabel"
show-arrow
@select="handleSelect">
<n-tag
:bordered="true"
:color="{ color: backgroundColor, textColor: fontColor }"
class="redis-tag"
size="medium"
strong>
{{ displayValue }}
</n-tag>
</n-dropdown>
</template>
<style lang="scss" scoped>
.redis-tag {
padding: 0 10px;
}
:deep(.dropdown-type-item) {
padding: 10px;
}
</style>

4
frontend/src/components/common/RedisTypeTag.vue
View File

@ -12,7 +12,6 @@ const props = defineProps({
default: 'STRING',
},
binaryKey: Boolean,
bordered: Boolean,
size: String,
})
@ -27,9 +26,8 @@ const backgroundColor = computed(() => {
<template>
<n-tag
:bordered="props.bordered"
:class="[props.size === 'small' ? 'redis-type-tag-small' : 'redis-type-tag']"
:color="{ color: backgroundColor, borderColor: fontColor, textColor: fontColor }"
:color="{ color: backgroundColor, textColor: fontColor }"
:size="props.size"
strong>
{{ props.type }}

36
frontend/src/components/content_value/ContentSearchInput.vue
View File

@ -3,12 +3,21 @@ import { computed, reactive } from 'vue'
import { debounce, isEmpty, trim } from 'lodash'
import { NButton, NInput } from 'naive-ui'
import IconButton from '@/components/common/IconButton.vue'
import Help from '@/components/icons/Help.vue'
const props = defineProps({
fullSearchIcon: {
type: [String, Object],
default: null,
},
debounceWait: {
type: Number,
default: 500,
},
small: {
type: Boolean,
default: false,
},
})
const emit = defineEmits(['filterChanged', 'matchChanged'])
@ -42,7 +51,13 @@ const onFullSearch = () => {
const _onInput = () => {
emit('filterChanged', inputData.filter)
}
const onInput = debounce(_onInput, 500, { leading: true, trailing: true })
const onInput = debounce(_onInput, props.debounceWait, { leading: true, trailing: true })
const onKeyup = (evt) => {
if (evt.key === 'Enter') {
onFullSearch()
}
}
const onClearFilter = () => {
inputData.filter = ''
@ -67,13 +82,17 @@ defineExpose({
<template>
<n-input-group>
<slot name="prepend" />
<n-input
v-model:value="inputData.filter"
:placeholder="$t('interface.filter')"
:size="props.small ? 'small' : ''"
clearable
@clear="onClearFilter"
@input="onInput">
@input="onInput"
@keyup.enter="onKeyup">
<template #prefix>
<slot name="prefix" />
<n-tooltip v-if="hasMatch">
<template #trigger>
<n-tag closable size="small" @close="onClearMatch">
@ -83,12 +102,25 @@ defineExpose({
{{ $t('interface.full_search_result', { pattern: inputData.match }) }}
</n-tooltip>
</template>
<template #suffix>
<n-tooltip trigger="hover">
<template #trigger>
<n-icon :component="Help" />
</template>
<div class="text-block" style="max-width: 600px">
{{ $t('dialogue.filter.filter_pattern_tip') }}
</div>
</n-tooltip>
</template>
</n-input>
<icon-button
v-if="props.fullSearchIcon"
:disabled="hasMatch && !hasFilter"
:icon="props.fullSearchIcon"
:size="small ? 16 : 20"
border
small
t-tooltip="interface.full_search"
@click="onFullSearch" />
<n-button v-else :disabled="hasMatch && !hasFilter" :focusable="false" @click="onFullSearch">

6
frontend/src/components/dialogs/KeyFilterDialog.vue
View File

@ -40,11 +40,7 @@ watch(
)
const browserStore = useBrowserStore()
const onConfirm = () => {
const { server, db, type, pattern } = filterForm
browserStore.setKeyFilter(server, db, pattern, type)
browserStore.reopenDatabase(server, db)
}
const onConfirm = () => {}
const onClose = () => {
dialogStore.closeKeyFilterDialog()

2
frontend/src/components/dialogs/NewKeyDialog.vue
View File

@ -109,6 +109,7 @@ const onAdd = async () => {
$message.error(err)
}
})
if (subFormRef.value?.validate) {
await subFormRef.value?.validate((errs) => {
const err = get(errs, '0.0.message')
if (err != null) {
@ -117,6 +118,7 @@ const onAdd = async () => {
$message.error(i18n.t('dialogue.spec_field_required', { key: i18n.t('dialogue.field.element') }))
}
})
}
try {
const { server, db, key, type, ttl } = newForm
let { value } = newForm

4
frontend/src/components/icons/LoadAll.vue
View File

@ -12,13 +12,13 @@ const props = defineProps({
<path
:stroke-width="props.strokeWidth"
clip-rule="evenodd"
d="M23.9999 29.0001L12 17.0001L19.9999 17.0001L19.9999 6.00011L27.9999 6.00011L27.9999 17.0001L35.9999 17.0001L23.9999 29.0001Z"
d="M23.9999 31L12 19L19.9999 19L19.9999 8L27.9999 8L27.9999 19L35.9999 19L23.9999 31Z"
fill="none"
fill-rule="evenodd"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
<path :stroke-width="props.strokeWidth" d="M42 37L6 37" stroke="currentColor" stroke-linecap="round" />
<path :stroke-width="props.strokeWidth" d="M42 38L6 38" stroke="currentColor" stroke-linecap="round" />
</svg>
</template>

12
frontend/src/components/icons/More.vue
View File

@ -9,15 +9,9 @@ const props = defineProps({
<template>
<svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path
:stroke-width="strokeWidth"
d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z"
fill="none"
stroke="currentColor"
stroke-linejoin="round" />
<circle cx="14" cy="24" fill="currentColor" r="3" />
<circle cx="24" cy="24" fill="currentColor" r="3" />
<circle cx="34" cy="24" fill="currentColor" r="3" />
<circle :r="props.strokeWidth" cx="12" cy="24" fill="currentColor" />
<circle :r="props.strokeWidth" cx="24" cy="24" fill="currentColor" />
<circle :r="props.strokeWidth" cx="36" cy="24" fill="currentColor" />
</svg>
</template>

27
frontend/src/components/icons/Plus.vue Normal file
View File

@ -0,0 +1,27 @@
<script setup>
const props = defineProps({
strokeWidth: {
type: [Number, String],
default: 4,
},
})
</script>
<template>
<svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path
:stroke-width="props.strokeWidth"
d="M24.0605 10L24.0239 38"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
<path
:stroke-width="props.strokeWidth"
d="M10 24L38 24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</template>
<style lang="scss" scoped></style>

8
frontend/src/components/icons/Search.vue
View File

@ -17,13 +17,7 @@ const props = defineProps({
stroke-linejoin="round" />
<path
:stroke-width="props.strokeWidth"
d="M26.657 14.3431C25.2093 12.8954 23.2093 12 21.0001 12C18.791 12 16.791 12.8954 15.3433 14.3431"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
<path
:stroke-width="props.strokeWidth"
d="M33.2216 33.2217L41.7069 41.707"
d="M33 33L42 42"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />

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

@ -3,54 +3,171 @@ import { useThemeVars } from 'naive-ui'
import BrowserTree from './BrowserTree.vue'
import IconButton from '@/components/common/IconButton.vue'
import useTabStore from 'stores/tab.js'
import { computed, reactive, ref } from 'vue'
import { get } from 'lodash'
import { computed, onMounted, reactive, ref, unref, watch } from 'vue'
import { get, map } from 'lodash'
import Refresh from '@/components/icons/Refresh.vue'
import useDialogStore from 'stores/dialog.js'
import { useI18n } from 'vue-i18n'
import { types } from '@/consts/support_redis_type.js'
import Search from '@/components/icons/Search.vue'
import Unlink from '@/components/icons/Unlink.vue'
import Filter from '@/components/icons/Filter.vue'
import ContentSearchInput from '@/components/content_value/ContentSearchInput.vue'
import LoadAll from '@/components/icons/LoadAll.vue'
import LoadList from '@/components/icons/LoadList.vue'
import Delete from '@/components/icons/Delete.vue'
import useBrowserStore from 'stores/browser.js'
import { useRender } from '@/utils/render.js'
import RedisTypeSelector from '@/components/common/RedisTypeSelector.vue'
import { types } from '@/consts/support_redis_type.js'
import Plus from '@/components/icons/Plus.vue'
const themeVars = useThemeVars()
const i18n = useI18n()
const dialogStore = useDialogStore()
// const prefStore = usePreferencesStore()
const tabStore = useTabStore()
const browserStore = useBrowserStore()
const render = useRender()
const currentName = computed(() => get(tabStore.currentTab, 'name', ''))
const browserTreeRef = ref(null)
const loading = ref(false)
const fullyLoaded = ref(false)
const onInfo = () => {
browserTreeRef.value?.handleSelectContextMenu('server_info')
const selectedDB = computed(() => {
return browserStore.selectedDatabases[currentName.value] || 0
})
const dbSelectOptions = computed(() => {
const dblist = browserStore.getDBList(currentName.value)
return map(dblist, (db) => {
if (selectedDB.value === db.db) {
return {
value: db.db,
label: `db${db.db} (${db.keys}/${db.maxKeys})`,
}
}
return {
value: db.db,
label: `db${db.db} (${db.maxKeys})`,
}
})
})
const loadProgress = computed(() => {
const db = browserStore.getDatabase(currentName.value, selectedDB.value)
if (db.maxKeys <= 0) {
return 100
}
return (db.keys * 100) / db.maxKeys
})
const onReload = async () => {
try {
loading.value = true
tabStore.setSelectedKeys(currentName.value)
const db = selectedDB.value
browserStore.closeDatabase(currentName.value, db)
browserTreeRef.value?.resetExpandKey(currentName.value, db)
let matchType = unref(filterForm.type)
if (!types.hasOwnProperty(matchType)) {
matchType = ''
}
browserStore.setKeyFilter(currentName.value, {
type: matchType,
pattern: unref(filterForm.pattern),
})
await browserStore.openDatabase(currentName.value, db)
fullyLoaded.value = await browserStore.loadMoreKeys(currentName.value, db)
// $message.success(i18n.t('dialogue.reload_succ'))
} catch (e) {
console.warn(e)
} finally {
loading.value = false
}
}
const onAddKey = () => {
dialogStore.openNewKeyDialog('', currentName.value, selectedDB.value)
}
const onLoadMore = async () => {
try {
loading.value = true
fullyLoaded.value = await browserStore.loadMoreKeys(currentName.value, selectedDB.value)
} catch (e) {
$message.error(e.message)
} finally {
loading.value = false
}
}
const onLoadAll = async () => {
try {
loading.value = true
await browserStore.loadAllKeys(currentName.value, selectedDB.value)
fullyLoaded.value = true
} catch (e) {
$message.error(e.message)
} finally {
loading.value = false
}
}
const onFlush = () => {
dialogStore.openFlushDBDialog(currentName.value, selectedDB.value)
}
const i18n = useI18n()
const onDisconnect = () => {
browserTreeRef.value?.handleSelectContextMenu('server_close')
browserStore.closeConnection(currentName.value)
}
const onRefresh = () => {
browserTreeRef.value?.handleSelectContextMenu('server_reload')
const handleSelectDB = async (db, prevDB) => {
// watch 'browserStore.openedDB[currentName.value]' instead
}
const filterForm = reactive({
showFilter: false,
type: '',
pattern: '',
filter: '',
})
const onSelectFilterType = (select) => {
onReload()
}
const filterTypeOptions = computed(() => {
const options = Object.keys(types).map((t) => ({
value: t,
label: t,
}))
options.splice(0, 0, {
value: '',
label: i18n.t('common.all'),
})
return options
})
const onFilterInput = (val) => {
filterForm.filter = val
}
const onMatchInput = (matchVal, filterVal) => {
filterForm.pattern = matchVal
filterForm.filter = filterVal
onReload()
}
watch(
() => browserStore.openedDB[currentName.value],
async (db, prevDB) => {
if (db === undefined) {
return
}
try {
loading.value = true
browserStore.closeDatabase(currentName.value, prevDB)
browserStore.setKeyFilter(currentName.value, {})
await browserStore.openDatabase(currentName.value, db)
browserTreeRef.value?.resetExpandKey(currentName.value, db)
fullyLoaded.value = await browserStore.loadMoreKeys(currentName.value, db)
browserTreeRef.value?.refreshTree()
} catch (e) {
$message.error(e.message)
} finally {
loading.value = false
}
},
)
onMounted(() => onReload())
// forbid dynamic switch key view due to performance issues
// const viewType = ref(0)
// const onSwitchView = (selectView) => {
@ -61,73 +178,110 @@ const filterTypeOptions = computed(() => {
<template>
<div class="nav-pane-container flex-box-v">
<browser-tree ref="browserTreeRef" :server="currentName" />
s
<!-- top function bar -->
<div class="flex-box-h nav-pane-func">
<content-search-input
:debounce-wait="1000"
:full-search-icon="Search"
small
@filter-changed="onFilterInput"
@match-changed="onMatchInput">
<template #prepend>
<redis-type-selector v-model:value="filterForm.type" @update:value="onSelectFilterType" />
</template>
</content-search-input>
<n-button-group>
<n-tooltip :show-arrow="false">
<template #trigger>
<n-button :disabled="loading" :focusable="false" bordered size="small" @click="onReload">
<template #icon>
<n-icon :component="Refresh" size="18" />
</template>
</n-button>
</template>
{{ $t('interface.reload') }}
</n-tooltip>
<n-tooltip :show-arrow="false">
<template #trigger>
<n-button :disabled="loading" :focusable="false" bordered size="small" @click="onAddKey">
<template #icon>
<n-icon :component="Plus" size="18" />
</template>
</n-button>
</template>
{{ $t('interface.new_key') }}
</n-tooltip>
</n-button-group>
</div>
<!-- loaded progress -->
<n-progress
:border-radius="0"
:color="fullyLoaded ? '#0000' : themeVars.primaryColor"
:height="2"
:percentage="loadProgress"
:processing="loading"
:show-indicator="false"
status="success"
type="line" />
<!-- tree view -->
<browser-tree
ref="browserTreeRef"
:full-loaded="fullyLoaded"
:loading="loading && loadProgress <= 0"
:pattern="filterForm.filter"
:server="currentName" />
<!-- bottom function bar -->
<div class="nav-pane-bottom flex-box-v">
<!-- <switch-button-->
<!-- v-model:value="viewType"-->
<!-- :icons="[TreeView, ListView]"-->
<!-- :t-tooltips="['interface.tree_view', 'interface.list_view']"-->
<!-- stroke-width="4"-->
<!-- :stroke-width="3.5"-->
<!-- unselect-stroke-width="3"-->
<!-- @update:value="onSwitchView" />-->
<!-- <icon-button :icon="Status" size="20" stroke-width="4" t-tooltip="interface.status" @click="onInfo" />-->
<div
v-show="filterForm.showFilter"
class="flex-box-h nav-pane-func"
style="padding-left: 3px; padding-right: 3px">
<!-- <n-input-group v-show="filterForm.showFilter">-->
<!-- <n-select-->
<!-- v-model:value="filterForm.type"-->
<!-- :consistent-menu-width="false"-->
<!-- :options="filterTypeOptions"-->
<!-- style="width: 120px" />-->
<!-- <n-input clearable placeholder="">-->
<!-- <template #prefix></template>-->
<!-- </n-input>-->
<!-- <n-button :focusable="false" ghost>-->
<!-- <template #icon>-->
<!-- <n-icon :component="Search" />-->
<!-- </template>-->
<!-- </n-button>-->
<!-- </n-input-group>-->
<content-search-input :full-search-icon="Search">
<template #prepend>
<n-select
v-model:value="filterForm.type"
:consistent-menu-width="false"
:options="filterTypeOptions"
style="width: 120px" />
</template>
</content-search-input>
</div>
<div class="flex-box-h nav-pane-func">
<icon-button
:button-class="{
'filter-on': filterForm.showFilter,
'filter-off': !filterForm.showFilter,
'toggle-btn': true,
'nav-pane-func-btn': true,
}"
:icon="Filter"
size="20"
stroke-width="4"
t-tooltip="interface.filter_key"
@click="filterForm.showFilter = !filterForm.showFilter" />
<n-select
v-model:value="browserStore.openedDB[currentName]"
:consistent-menu-width="false"
:filter="(pattern, option) => option.value.toString() === pattern"
:options="dbSelectOptions"
filterable
size="small"
style="min-width: 100px; max-width: 200px"
@update:value="handleSelectDB" />
<icon-button
:button-class="['nav-pane-func-btn']"
:icon="Refresh"
:disabled="fullyLoaded"
:icon="LoadList"
:loading="loading"
:stroke-width="3.5"
size="20"
stroke-width="4"
t-tooltip="interface.reload"
@click="onRefresh" />
t-tooltip="interface.load_more"
@click="onLoadMore" />
<icon-button
:button-class="['nav-pane-func-btn']"
:disabled="fullyLoaded"
:icon="LoadAll"
:loading="loading"
:stroke-width="3.5"
size="20"
t-tooltip="interface.load_all"
@click="onLoadAll" />
<div class="flex-item-expand" />
<icon-button
:button-class="['nav-pane-func-btn']"
:icon="Unlink"
:icon="Delete"
:stroke-width="3.5"
size="20"
t-tooltip="interface.flush_db"
@click="onFlush" />
<icon-button
:button-class="['nav-pane-func-btn']"
:icon="Unlink"
:stroke-width="3.5"
size="20"
stroke-width="4"
t-tooltip="interface.disconnect"
@click="onDisconnect" />
</div>
@ -136,21 +290,30 @@ const filterTypeOptions = computed(() => {
</template>
<style lang="scss" scoped>
@import '@/styles/style';
:deep(.toggle-btn) {
border-style: solid;
border-width: 1px;
}
:deep(.filter-on) {
border-color: v-bind('themeVars.borderColor');
background-color: v-bind('themeVars.borderColor');
border-color: v-bind('themeVars.iconColorDisabled');
background-color: v-bind('themeVars.iconColorDisabled');
}
:deep(.filter-off) {
border-color: #0000;
}
.nav-pane-top {
//@include bottom-shadow(0.1);
color: v-bind('themeVars.iconColor');
border-bottom: v-bind('themeVars.borderColor') 1px solid;
}
.nav-pane-bottom {
@include top-shadow(0.1);
color: v-bind('themeVars.iconColor');
border-top: v-bind('themeVars.borderColor') 1px solid;
}

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

@ -1,7 +1,7 @@
<script setup>
import { computed, h, nextTick, onMounted, reactive, ref } from 'vue'
import { computed, h, nextTick, reactive, ref } from 'vue'
import { ConnectionType } from '@/consts/connection_type.js'
import { NIcon, NSpace, NTag, useThemeVars } from 'naive-ui'
import { NIcon, NSpace, useThemeVars } from 'naive-ui'
import Key from '@/components/icons/Key.vue'
import Binary from '@/components/icons/Binary.vue'
import Database from '@/components/icons/Database.vue'
@ -12,30 +12,29 @@ import CopyLink from '@/components/icons/CopyLink.vue'
import Add from '@/components/icons/Add.vue'
import Layer from '@/components/icons/Layer.vue'
import Delete from '@/components/icons/Delete.vue'
import Connect from '@/components/icons/Connect.vue'
import useDialogStore from 'stores/dialog.js'
import { ClipboardSetText } from 'wailsjs/runtime/runtime.js'
import useConnectionStore from 'stores/connections.js'
import Unlink from '@/components/icons/Unlink.vue'
import Filter from '@/components/icons/Filter.vue'
import Close from '@/components/icons/Close.vue'
import { typesBgColor, typesColor } from '@/consts/support_redis_type.js'
import useTabStore from 'stores/tab.js'
import IconButton from '@/components/common/IconButton.vue'
import { parseHexColor } from '@/utils/rgb.js'
import LoadList from '@/components/icons/LoadList.vue'
import LoadAll from '@/components/icons/LoadAll.vue'
import useBrowserStore from 'stores/browser.js'
import { useRender } from '@/utils/render.js'
const props = defineProps({
server: String,
keyView: String,
loading: Boolean,
pattern: String,
fullLoaded: Boolean,
})
const themeVars = useThemeVars()
const render = useRender()
const i18n = useI18n()
const loading = ref(false)
const loadingConnections = ref(false)
const expandedKeys = ref([props.server])
const connectionStore = useConnectionStore()
const browserStore = useBrowserStore()
@ -55,8 +54,9 @@ const selectedKeys = computed(() => {
})
const data = computed(() => {
const dbs = get(browserStore.databases, props.server, [])
return dbs
// const dbs = get(browserStore.databases, props.server, [])
// return dbs
return browserStore.getKeyList(props.server)
})
const backgroundColor = computed(() => {
@ -74,90 +74,44 @@ const contextMenuParam = reactive({
y: 0,
options: null,
})
const renderIcon = (icon) => {
return () => {
return h(NIcon, null, {
default: () => h(icon),
})
}
}
const menuOptions = {
[ConnectionType.Server]: () => {
return [
{
key: 'server_reload',
label: i18n.t('interface.reload'),
icon: renderIcon(Refresh),
},
{
key: 'server_close',
label: i18n.t('interface.disconnect'),
icon: renderIcon(Unlink),
},
]
},
[ConnectionType.RedisDB]: ({ opened }) => {
if (opened) {
return [
{
key: 'db_reload',
label: i18n.t('interface.reload'),
icon: renderIcon(Refresh),
},
{
key: 'db_newkey',
label: i18n.t('interface.new_key'),
icon: renderIcon(Add),
},
{
key: 'db_filter',
label: i18n.t('interface.filter_key'),
icon: renderIcon(Filter),
icon: render.renderIcon(Filter),
},
{
type: 'divider',
key: 'd1',
},
{
key: 'db_flush',
label: i18n.t('interface.flush_db'),
icon: renderIcon(Delete),
},
{
type: 'divider',
key: 'd2',
},
{
key: 'db_close',
label: i18n.t('interface.close_db'),
icon: renderIcon(Close),
},
]
} else {
return [
{
key: 'db_open',
label: i18n.t('interface.open_db'),
icon: renderIcon(Connect),
},
]
return []
}
},
[ConnectionType.RedisKey]: () => [
// {
// key: 'key_reload',
// label: i18n.t('interface.reload'),
// icon: renderIcon(Refresh),
// icon: render.renderIcon(Refresh),
// },
{
key: 'key_newkey',
label: i18n.t('interface.new_key'),
icon: renderIcon(Add),
icon: render.renderIcon(Add),
},
{
key: 'key_copy',
label: i18n.t('interface.copy_path'),
icon: renderIcon(CopyLink),
icon: render.renderIcon(CopyLink),
},
{
type: 'divider',
@ -166,19 +120,19 @@ const menuOptions = {
{
key: 'key_remove',
label: i18n.t('interface.batch_delete_key'),
icon: renderIcon(Delete),
icon: render.renderIcon(Delete),
},
],
[ConnectionType.RedisValue]: () => [
{
key: 'value_reload',
label: i18n.t('interface.reload'),
icon: renderIcon(Refresh),
icon: render.renderIcon(Refresh),
},
{
key: 'value_copy',
label: i18n.t('interface.copy_key'),
icon: renderIcon(CopyLink),
icon: render.renderIcon(CopyLink),
},
{
type: 'divider',
@ -187,7 +141,7 @@ const menuOptions = {
{
key: 'value_remove',
label: i18n.t('interface.remove_key'),
icon: renderIcon(Delete),
icon: render.renderIcon(Delete),
},
],
}
@ -196,15 +150,6 @@ const renderContextLabel = (option) => {
return h('div', { class: 'context-menu-item' }, option.label)
}
onMounted(async () => {
try {
// TODO: Show loading list status
loadingConnections.value = true
} finally {
loadingConnections.value = false
}
})
const expandKey = (key) => {
const idx = indexOf(expandedKeys.value, key)
if (idx === -1) {
@ -236,40 +181,11 @@ const handleSelectContextMenu = (key) => {
const redisKey = rkc || rk
const redisKeyName = !!rkc ? label : redisKey
switch (key) {
case 'server_info':
tabStore.setSelectedKeys(props.server)
onUpdateSelectedKeys()
break
case 'server_reload':
expandedKeys.value = [props.server]
tabStore.setSelectedKeys(props.server)
browserStore.openConnection(props.server, true).then(() => {
$message.success(i18n.t('dialogue.reload_succ'))
})
break
case 'server_close':
browserStore.closeConnection(props.server)
break
case 'db_open':
nextTick().then(() => expandKey(nodeKey))
break
case 'db_reload':
resetExpandKey(props.server, db)
browserStore.reopenDatabase(props.server, db)
break
case 'db_close':
resetExpandKey(props.server, db, true)
browserStore.closeDatabase(props.server, db)
break
case 'db_flush':
dialogStore.openFlushDBDialog(props.server, db)
break
case 'db_newkey':
case 'key_newkey':
dialogStore.openNewKeyDialog(redisKey, props.server, db)
break
case 'db_filter':
const { match: pattern, type } = browserStore.getKeyFilter(props.server, db)
const { match: pattern, type } = browserStore.getKeyFilter(props.server)
dialogStore.openKeyFilterDialog(props.server, db, pattern, type)
break
case 'key_reload':
@ -311,23 +227,6 @@ const handleSelectContextMenu = (key) => {
$message.error(e.message)
})
break
case 'db_loadmore':
if (node != null && !!!node.loading && !!!node.fullLoaded) {
node.loading = true
browserStore
.loadMoreKeys(props.server, db)
.then((end) => {
// fully loaded
node.fullLoaded = end === true
})
.catch((e) => {
$message.error(e.message)
})
.finally(() => {
delete node.loading
})
}
break
case 'db_loadall':
if (node != null && !!!node.loading) {
node.loading = true
@ -348,10 +247,6 @@ const handleSelectContextMenu = (key) => {
}
}
defineExpose({
handleSelectContextMenu,
})
const onUpdateExpanded = (value, option, meta) => {
expandedKeys.value = value
if (!meta.node) {
@ -445,61 +340,6 @@ const renderPrefix = ({ option }) => {
// render tree item label
const renderLabel = ({ option }) => {
switch (option.type) {
case ConnectionType.Server:
return h('b', {}, { default: () => option.label })
case ConnectionType.RedisDB:
const { name: server, db, opened = false } = option
let { match: matchPattern, type: typeFilter } = browserStore.getKeyFilter(server, db)
const items = []
if (opened) {
items.push(`${option.label} (${option.keys || 0}/${Math.max(option.maxKeys || 0, option.keys || 0)})`)
} else {
items.push(`${option.label} (${Math.max(option.maxKeys || 0, option.keys || 0)})`)
}
// show filter tag after label
// type filter tag
if (!isEmpty(typeFilter)) {
items.push(
h(
NTag,
{
size: 'small',
closable: true,
bordered: false,
color: {
color: typesBgColor[typeFilter],
textColor: typesColor[typeFilter],
},
onClose: () => {
// remove type filter
browserStore.setKeyFilter(server, db, matchPattern)
browserStore.reopenDatabase(server, db)
},
},
{ default: () => typeFilter },
),
)
}
// match pattern tag
if (!isEmpty(matchPattern) && matchPattern !== '*') {
items.push(
h(
NTag,
{
bordered: false,
closable: true,
size: 'small',
onClose: () => {
// remove key match pattern
browserStore.setKeyFilter(server, db, '*', typeFilter)
browserStore.reopenDatabase(server, db)
},
},
{ default: () => matchPattern },
),
)
}
return renderIconMenu(items)
case ConnectionType.RedisKey:
return `${option.label} (${option.keys || 0})`
// case ConnectionType.RedisValue:
@ -528,24 +368,6 @@ const calcDBMenu = (opened, loading, end) => {
const btns = []
if (opened) {
btns.push(
h(IconButton, {
tTooltip: 'interface.filter_key',
icon: Filter,
disabled: loading === true,
onClick: () => handleSelectContextMenu('db_filter'),
}),
h(IconButton, {
tTooltip: 'interface.reload',
icon: Refresh,
disabled: loading === true,
onClick: () => handleSelectContextMenu('db_reload'),
}),
h(IconButton, {
tTooltip: 'interface.new_key',
icon: Add,
disabled: loading === true,
onClick: () => handleSelectContextMenu('db_newkey'),
}),
h(IconButton, {
tTooltip: 'interface.load_more',
icon: LoadList,
@ -562,38 +384,24 @@ const calcDBMenu = (opened, loading, end) => {
color: loading === true ? themeVars.value.primaryColor : '',
onClick: () => handleSelectContextMenu('db_loadall'),
}),
h(IconButton, {
tTooltip: 'interface.flush_db',
icon: Delete,
disabled: loading === true,
onClick: () => handleSelectContextMenu('db_flush'),
}),
// h(IconButton, {
// tTooltip: 'interface.more_action',
// icon: More,
// onClick: () => handleSelectContextMenu('more_action'),
// }),
)
} else {
btns.push(
h(IconButton, {
tTooltip: 'interface.open_db',
icon: Connect,
onClick: () => handleSelectContextMenu('db_open'),
}),
)
}
return btns
}
const calcLayerMenu = (loading, end) => {
const calcLayerMenu = (loading) => {
return [
// reload layer enable only full loaded
h(IconButton, {
tTooltip: end === true ? 'interface.reload' : 'interface.reload',
tTooltip: props.fullLoaded ? 'interface.reload' : 'interface.reload',
icon: Refresh,
loading: loading === true,
disabled: end !== true,
disabled: !props.fullLoaded,
onClick: () => handleSelectContextMenu('key_reload'),
}),
h(IconButton, {
@ -626,8 +434,7 @@ const renderSuffix = ({ option }) => {
case ConnectionType.RedisDB:
return renderIconMenu(calcDBMenu(option.opened, option.loading, option.fullLoaded))
case ConnectionType.RedisKey:
const fullLoaded = browserStore.isFullLoaded(props.server, option.db)
return renderIconMenu(calcLayerMenu(option.loading, fullLoaded))
return renderIconMenu(calcLayerMenu(option.loading))
case ConnectionType.RedisValue:
return renderIconMenu(calcValueMenu())
}
@ -638,7 +445,7 @@ const renderSuffix = ({ option }) => {
const nodeProps = ({ option }) => {
return {
onDblclick: () => {
if (loading.value) {
if (props.loading) {
console.warn('TODO: alert to ignore double click when loading')
return
}
@ -665,37 +472,29 @@ const nodeProps = ({ option }) => {
}
}
const onLoadTree = async (node) => {
switch (node.type) {
case ConnectionType.RedisDB:
loading.value = true
try {
await browserStore.openDatabase(props.server, node.db)
} catch (e) {
$message.error(e.message)
node.isLeaf = undefined
} finally {
loading.value = false
}
break
// case ConnectionType.RedisKey:
// console.warn('load redis key', node.redisKey)
// node.keys = sumBy(node.children, 'keys')
// break
// case ConnectionType.RedisValue:
// node.keys = 1
// break
}
}
const handleOutsideContextMenu = () => {
contextMenuParam.show = false
}
// the NTree node may get incorrect height after change data
// add key property to force refresh the component and then everything back to normal
const treeKey = ref(0)
defineExpose({
handleSelectContextMenu,
resetExpandKey,
refreshTree: () => {
treeKey.value = Date.now()
},
})
</script>
<template>
<div :style="{ backgroundColor }" class="browser-tree-wrapper">
<div :style="{ backgroundColor }" class="flex-box-v browser-tree-wrapper">
<n-spin v-if="props.loading" class="fill-height" />
<n-empty v-else-if="!props.loading && isEmpty(data)" class="empty-content" />
<n-tree
v-show="!props.loading && !isEmpty(data)"
:key="treeKey"
:animated="false"
:block-line="true"
:block-node="true"
@ -703,14 +502,16 @@ const handleOutsideContextMenu = () => {
:data="data"
:expand-on-click="false"
:expanded-keys="expandedKeys"
:filter="(pattern, node) => includes(node.redisKey, pattern)"
:node-props="nodeProps"
:pattern="props.pattern"
:render-label="renderLabel"
:render-prefix="renderPrefix"
:render-suffix="renderSuffix"
:selected-keys="selectedKeys"
:show-irrelevant-nodes="false"
class="fill-height"
virtual-scroll
@load="onLoadTree"
@update:selected-keys="onUpdateSelectedKeys"
@update:expanded-keys="onUpdateExpanded" />
<n-dropdown
@ -727,6 +528,8 @@ const handleOutsideContextMenu = () => {
</template>
<style lang="scss" scoped>
@import '@/styles/content';
.browser-tree-wrapper {
height: 100%;
overflow: hidden;

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

@ -20,9 +20,11 @@ import { hexGammaCorrection, parseHexColor, toHexColor } from '@/utils/rgb.js'
import IconButton from '@/components/common/IconButton.vue'
import usePreferencesStore from 'stores/preferences.js'
import useBrowserStore from 'stores/browser.js'
import { useRender } from '@/utils/render.js'
const themeVars = useThemeVars()
const i18n = useI18n()
const render = useRender()
const connectingServer = ref('')
const connectionStore = useConnectionStore()
const browserStore = useBrowserStore()
@ -59,12 +61,12 @@ const menuOptions = {
{
key: 'group_rename',
label: i18n.t('interface.rename_conn_group'),
icon: renderIcon(Edit),
icon: render.renderIcon(Edit),
},
{
key: 'group_delete',
label: i18n.t('interface.remove_conn_group'),
icon: renderIcon(Delete),
icon: render.renderIcon(Delete),
},
],
[ConnectionType.Server]: ({ name }) => {
@ -74,17 +76,17 @@ const menuOptions = {
{
key: 'server_close',
label: i18n.t('interface.disconnect'),
icon: renderIcon(Unlink),
icon: render.renderIcon(Unlink),
},
{
key: 'server_edit',
label: i18n.t('interface.edit_conn'),
icon: renderIcon(Config),
icon: render.renderIcon(Config),
},
{
key: 'server_dup',
label: i18n.t('interface.dup_conn'),
icon: renderIcon(CopyLink),
icon: render.renderIcon(CopyLink),
},
{
type: 'divider',
@ -93,7 +95,7 @@ const menuOptions = {
{
key: 'server_remove',
label: i18n.t('interface.remove_conn'),
icon: renderIcon(Delete),
icon: render.renderIcon(Delete),
},
]
} else {
@ -101,17 +103,17 @@ const menuOptions = {
{
key: 'server_open',
label: i18n.t('interface.open_connection'),
icon: renderIcon(Connect),
icon: render.renderIcon(Connect),
},
{
key: 'server_edit',
label: i18n.t('interface.edit_conn'),
icon: renderIcon(Config),
icon: render.renderIcon(Config),
},
{
key: 'server_dup',
label: i18n.t('interface.dup_conn'),
icon: renderIcon(CopyLink),
icon: render.renderIcon(CopyLink),
},
{
type: 'divider',
@ -120,7 +122,7 @@ const menuOptions = {
{
key: 'server_remove',
label: i18n.t('interface.remove_conn'),
icon: renderIcon(Delete),
icon: render.renderIcon(Delete),
},
]
}

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

@ -255,7 +255,7 @@
"filter": {
"set_key_filter": "Set Key Filter",
"filter_pattern": "Pattern",
"filter_pattern_tip": "prefix_*: Matches key names starting with \"prefix_\".\n*_suffix: Matches key names ending with \"_suffix\".\n*pattern*: Matches key names containing \"pattern\".\nprefix_??: Matches key names starting with \"prefix_\" followed by any two characters.\n*abc*: Matches key names containing \"abc\" at any position."
"filter_pattern_tip": "* : Matches zero or more characters. For example, 'key*' matches all keys starting with 'key'.\n? : Matches a single character. For example, 'key?' matches 'key1', 'key2'.\n[] : Matches a single character within the specified range. For example, 'key[1-3]' matches keys like 'key1', 'key2', 'key3'.\n\\ : Escape character. To match *, ?, [, or ], use the backslash '\\' for escaping."
},
"ttl": {
"title": "Set Key TTL"

3
frontend/src/langs/pt-br.json
View File

@ -246,8 +246,7 @@
},
"filter": {
"set_key_filter": "Definir Filtro de Chave",
"filter_pattern": "Padrão",
"filter_pattern_tip": "prefixo_*: Corresponde a nomes de chaves que começam com \"prefixo_\".\n*_sufixo: Corresponde a nomes de chaves que terminam com \"_sufixo\".\n*padrão*: Corresponde a nomes de chaves que contêm \"padrão\".\nprefixo_??: Corresponde a nomes de chaves que começam com \"prefixo_\" seguido por dois caracteres.\n*abc*: Corresponde a nomes de chaves que contêm \"abc\" em qualquer posição."
"filter_pattern": "Padrão"
},
"ttl": {
"title": "Definir TTL da Chave"

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

@ -254,7 +254,7 @@
"filter": {
"set_key_filter": "设置键过滤器",
"filter_pattern": "过滤表达式",
"filter_pattern_tip": "prefix_*：匹配以\"prefix_\"开头的键名\n*_suffix：匹配以\"_suffix\"结尾的键名\n*pattern*：匹配包含\"pattern\"的键名\nprefix_??：匹配以\"prefix_\"开头后跟两个任意字符的键名\n*abc*：匹配包含\"abc\"的任意位置的键名"
"filter_pattern_tip": "*：匹配零个或多个字符。例如：\"key*\"匹配到以\"key\"开头的所有键\n?：匹配单个字符。例如：\"key?\"匹配\"key1\"、\"key2\"\n[ ]：匹配指定范围内的单个字符。例如：\"key[1-3]\"可以匹配类似于 \"key1\"、\"key2\"、\"key3\" 的键\n\\：转义字符。如果想要匹配 *、?、[、或]，需要使用反斜杠\"\\\"进行转义"
},
"ttl": {
"title": "设置键存活时间"

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

@ -50,9 +50,9 @@ import { decodeRedisKey, nativeRedisKey } from '@/utils/key_convert.js'
import { BrowserTabType } from '@/consts/browser_tab_type.js'
import { KeyViewType } from '@/consts/key_view_type.js'
import { ConnectionType } from '@/consts/connection_type.js'
import { types } from '@/consts/support_redis_type.js'
import useConnectionStore from 'stores/connections.js'
import { decodeTypes, formatTypes } from '@/consts/value_view_type.js'
import { isRedisGlob } from '@/utils/glob_pattern.js'
const useBrowserStore = defineStore('browser', {
/**
@ -70,8 +70,18 @@ const useBrowserStore = defineStore('browser', {
* @property {boolean} [opened] - redis db is opened, type == ConnectionType.RedisDB only
* @property {boolean} [expanded] - current node is expanded
* @property {DatabaseItem[]} [children]
* @property {boolean} [loading] - indicated that is loading children now
* @property {boolean} [fullLoaded] - indicated that all children already loaded
*/
/**
* @typedef {Object} FilterItem
* @property {string} pattern key pattern filter
* @property {string} type type filter
*/
/**
* @typedef {Object} LoadingState
* @property {string} loading indicated that is loading children now
* @property {string} fullLoaded indicated that all children already loaded
*/
/**
@ -85,8 +95,7 @@ const useBrowserStore = defineStore('browser', {
/**
* @typedef {Object} BrowserState
* @property {Object} serverStats
* @property {Object.<string, string>} keyFilter key is 'server#db', 'server#-1' stores default filter pattern
* @property {Object.<string, string>} typeFilter key is 'server#db'
* @property {Object.<string, FilterItem>} filter
* @property {Object.<string, KeyViewType>} viewType
* @property {Object.<string, DatabaseItem[]>} databases
* @property {Object.<string, Map<string, DatabaseItem>>} nodeMap key format likes 'server#db', children key format likes 'key#type'
@ -98,17 +107,21 @@ const useBrowserStore = defineStore('browser', {
*/
state: () => ({
serverStats: {}, // current server status info
keyFilter: {}, // all key filters in opened connections group by 'server+db'
typeFilter: {}, // all key type filters in opened connections group by 'server+db'
filter: {}, // all filters in opened connections map by server and FilterItem
loadingState: {}, // all loading state in opened connections map by server and LoadingState
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
openedDB: {}, // opened database map by server and database index
}),
getters: {
anyConnectionOpened() {
return !isEmpty(this.databases)
},
selectedDatabases() {
return this.openedDB || {}
},
},
actions: {
/**
@ -139,13 +152,22 @@ const useBrowserStore = defineStore('browser', {
},
/**
* get database by server name and index
* @param {string} connName
* get database info list
* @param server
* @return {DatabaseItem[]}
*/
getDBList(server) {
return this.databases[server] || []
},
/**
* get database by server name and database index
* @param {string} server
* @param {number} db
* @return {DatabaseItem|null}
*/
getDatabase(connName, db) {
const dbs = this.databases[connName]
getDatabase(server, db) {
const dbs = this.databases[server]
if (dbs != null) {
const selDB = find(dbs, (item) => item.db === db)
if (selDB != null) {
@ -156,17 +178,24 @@ const useBrowserStore = defineStore('browser', {
},
/**
* get full loaded status of database
* @param connName
* @param db
* @return {boolean}
* get current selection database by server
* @param server
* @return {number}
*/
isFullLoaded(connName, db) {
const selDB = this.getDatabase(connName, db)
if (selDB != null) {
return selDB.fullLoaded === true
}
return false
getSelectedDB(server) {
return this.selectedDatabases[server] || 0
},
/**
* get key list in current database
* @param server
* @return {DatabaseItem[]}
*/
getKeyList(server) {
const db = this.getSelectedDB(server)
const dbNodes = this.databases[server]
const node = find(dbNodes, (n) => n.db === db)
return node.children
},
/**
@ -248,6 +277,7 @@ const useBrowserStore = defineStore('browser', {
}
this.databases[name] = dbs
this.viewType[name] = view
this.openedDB[name] = get(dbs, '0.db', 0)
},
/**
@ -265,12 +295,11 @@ const useBrowserStore = defineStore('browser', {
const dbs = this.databases[name]
if (!isEmpty(dbs)) {
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)
delete this.filter[name]
delete this.databases[name]
delete this.serverStats[name]
@ -281,32 +310,32 @@ const useBrowserStore = defineStore('browser', {
/**
* open database and load all keys
* @param connName
* @param server
* @param db
* @returns {Promise<void>}
*/
async openDatabase(connName, db) {
const { match: filterPattern, type: filterType } = this.getKeyFilter(connName, db)
const { data, success, msg } = await OpenDatabase(connName, db, filterPattern, filterType)
async openDatabase(server, db) {
const { match: filterPattern, type: filterType } = this.getKeyFilter(server)
const { data, success, msg } = await OpenDatabase(server, db, filterPattern, filterType)
if (!success) {
throw new Error(msg)
}
const { keys = [], end = false, maxKeys = 0 } = data
const selDB = this.getDatabase(connName, db)
const selDB = this.getDatabase(server, db)
if (selDB == null) {
return
}
selDB.opened = true
selDB.fullLoaded = end
selDB.maxKeys = maxKeys
set(this.loadingState, 'fullLoaded', end)
if (isEmpty(keys)) {
selDB.children = []
} else {
// append db node to current connection's children
this._addKeyNodes(connName, db, keys)
this._addKeyNodes(server, db, keys)
}
this._tidyNode(connName, db)
this._tidyNode(server, db)
},
/**
@ -325,24 +354,27 @@ const useBrowserStore = defineStore('browser', {
this._getNodeMap(connName, db).clear()
this._getKeySet(connName, db).clear()
delete this.filter[connName]
},
/**
* close database
* @param connName
* @param server
* @param db
*/
closeDatabase(connName, db) {
const selDB = this.getDatabase(connName, db)
closeDatabase(server, db) {
const selDB = this.getDatabase(server, db)
if (selDB == null) {
return
}
delete selDB.children
selDB.isLeaf = false
selDB.opened = false
selDB.keys = 0
this._getNodeMap(connName, db).clear()
this._getKeySet(connName, db).clear()
this._getNodeMap(server, db).clear()
this._getKeySet(server, db).clear()
delete this.filter[server]
},
/**
@ -547,7 +579,7 @@ const useBrowserStore = defineStore('browser', {
let match = prefix
if (isEmpty(match)) {
match = '*'
} else {
} else if (!isRedisGlob(match)) {
const separator = this._getSeparator(connName)
if (!endsWith(prefix, separator + '*')) {
match = prefix + separator + '*'
@ -563,7 +595,7 @@ const useBrowserStore = defineStore('browser', {
* @return {Promise<boolean>}
*/
async loadMoreKeys(connName, db) {
const { match, type: keyType } = this.getKeyFilter(connName, db)
const { match, type: keyType } = this.getKeyFilter(connName)
const { keys, maxKeys, end } = await this._loadKeys(connName, db, match, keyType, false)
this._setDBMaxKeys(connName, db, maxKeys)
// remove current keys below prefix
@ -1936,41 +1968,32 @@ const useBrowserStore = defineStore('browser', {
/**
* get key filter pattern and filter type
* @param {string} server
* @param {number} db
* @returns {{match: string, type: string}}
*/
getKeyFilter(server, db) {
let match, type
const key = `${server}#${db}`
if (!this.keyFilter.hasOwnProperty(key)) {
// get default key filter from connection profile
getKeyFilter(server) {
let { pattern = '', type = '' } = this.filter[server] || {}
if (isEmpty(pattern)) {
// no custom match pattern, use default
const conn = useConnectionStore()
match = conn.getDefaultKeyFilter(server)
} else {
match = this.keyFilter[key] || '*'
pattern = conn.getDefaultKeyFilter(server)
}
type = this.typeFilter[`${server}#${db}`] || ''
return {
match,
match: pattern,
type: toUpper(type),
}
},
/**
* set key filter
*
* @param {string} server
* @param {number} db
* @param {string} pattern
* @param {string} [type]
* @param {string} [pattern]
*/
setKeyFilter(server, db, pattern, type) {
this.keyFilter[`${server}#${db}`] = pattern || '*'
this.typeFilter[`${server}#${db}`] = types[toUpper(type)] || ''
},
removeKeyFilter(server, db) {
this.keyFilter[`${server}#${db}`] = '*'
delete this.typeFilter[`${server}#${db}`]
setKeyFilter(server, { type, pattern }) {
const filter = this.filter[server] || {}
filter.type = type === null ? filter.type : type
filter.pattern = type === null ? filter.pattern : pattern
this.filter[server] = filter
},
},
})

20
frontend/src/styles/style.scss
View File

@ -25,6 +25,14 @@ body {
overflow: hidden;
}
@mixin bottom-shadow($transparent) {
box-shadow: 0 5px 5px -5px rgba(0, 0, 0, $transparent);
}
@mixin top-shadow($transparent) {
box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, $transparent);
}
#app {
height: 100vh;
}
@ -61,13 +69,9 @@ body {
}
.ellipsis {
white-space: nowrap; /* 禁止文本换行 */
overflow: hidden; /* 隐藏超出容器的文本 */
text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
}
.unit-item {
margin-left: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fill-height {
@ -106,6 +110,7 @@ body {
}
.value-footer {
@include top-shadow(0.1);
align-items: center;
gap: 0;
padding: 3px 10px 3px 10px;
@ -132,6 +137,7 @@ body {
.nav-pane-func {
align-items: center;
justify-content: flex-end;
gap: 3px;
padding: 3px 8px;
min-height: 30px;

13
frontend/src/utils/glob_pattern.js Normal file
View File

@ -0,0 +1,13 @@
import { includes, isEmpty } from 'lodash'
const REDIS_GLOB_CHAR = ['?', '*', '[', ']', '{', '}']
export const isRedisGlob = (str) => {
if (!isEmpty(str)) {
for (const c of REDIS_GLOB_CHAR) {
if (includes(str, c)) {
return true
}
}
}
return false
}

20
frontend/src/utils/render.js Normal file
View File

@ -0,0 +1,20 @@
import { h } from 'vue'
import { NIcon } from 'naive-ui'
export function useRender() {
return {
/**
*
* @param {string|Object} icon
* @param {{}} [props]
* @return {*}
*/
renderIcon: (icon, props = {}) => {
return () => {
return h(NIcon, null, {
default: () => h(icon, props),
})
}
},
}
}