mirror of
https://gitee.com/dromara/mayfly-go
synced 2025-11-03 16:00:25 +08:00
527 lines
17 KiB
Vue
527 lines
17 KiB
Vue
<template>
|
||
<div class="redis-data-op h-full">
|
||
<el-splitter>
|
||
<el-splitter-panel size="35%" max="50%">
|
||
<div class="key-list-vtree h-full card !p-1">
|
||
<el-scrollbar>
|
||
<el-row :gutter="5">
|
||
<el-col :span="2">
|
||
<el-input v-model="state.keySeparator" :placeholder="$t('redis.delimiter')" size="small" />
|
||
</el-col>
|
||
<el-col :span="18">
|
||
<el-input
|
||
@clear="clear"
|
||
v-model="scanParam.match"
|
||
@keyup.enter.native="searchKey()"
|
||
:placeholder="$t('redis.keyMatchTips')"
|
||
clearable
|
||
size="small"
|
||
/>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-button
|
||
:disabled="!scanParam.id || !scanParam.db"
|
||
@click="searchKey()"
|
||
type="success"
|
||
icon="search"
|
||
size="small"
|
||
plain
|
||
></el-button>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row :gutter="5" class="mb-1 mt-1">
|
||
<el-col :span="19">
|
||
<el-button :disabled="!scanParam.id || !scanParam.db" @click="scan(true)" type="success" icon="more" size="small" plain>
|
||
{{ $t('redis.loadMore') }}
|
||
</el-button>
|
||
|
||
<el-button
|
||
v-auth="'redis:data:save'"
|
||
:disabled="!scanParam.id || !scanParam.db"
|
||
@click="showNewKeyDialog"
|
||
type="primary"
|
||
icon="plus"
|
||
size="small"
|
||
plain
|
||
class="!ml-0.5"
|
||
>
|
||
{{ $t('redis.addKey') }}
|
||
</el-button>
|
||
|
||
<el-button
|
||
:disabled="!scanParam.id || !scanParam.db"
|
||
@click="flushDb"
|
||
type="danger"
|
||
plain
|
||
v-auth="'redis:data:del'"
|
||
size="small"
|
||
icon="delete"
|
||
class="!ml-0.5"
|
||
>
|
||
flush
|
||
</el-button>
|
||
</el-col>
|
||
<el-col :span="5">
|
||
<span class="mt-1" style="display: inline-block">keys:{{ state.dbsize }}</span>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-tree
|
||
ref="keyTreeRef"
|
||
:highlight-current="true"
|
||
:data="keyTreeData"
|
||
:props="treeProps"
|
||
:indent="8"
|
||
node-key="key"
|
||
:auto-expand-parent="false"
|
||
:default-expanded-keys="Array.from(state.keyTreeExpanded)"
|
||
@node-click="handleKeyTreeNodeClick"
|
||
@node-expand="keyTreeNodeExpand"
|
||
@node-collapse="keyTreeNodeCollapse"
|
||
@node-contextmenu="rightClickNode"
|
||
>
|
||
<template #default="{ node, data }">
|
||
<span class="el-dropdown-link key-list-custom-node" :title="node.label">
|
||
<span v-if="data.type == 1">
|
||
<SvgIcon :size="15" :name="node.expanded ? 'folder-opened' : 'folder'" />
|
||
</span>
|
||
<span :class="'ml-1 ' + (data.type == 1 ? 'folder-label' : 'key-label')">
|
||
{{ node.label }}
|
||
</span>
|
||
|
||
<span v-if="!node.isLeaf" class="ml-1" style="font-weight: bold"> ({{ data.keyCount }}) </span>
|
||
</span>
|
||
</template>
|
||
</el-tree>
|
||
</el-scrollbar>
|
||
|
||
<contextmenu :dropdown="state.contextmenu.dropdown" :items="state.contextmenu.items" ref="contextmenuRef" />
|
||
</div>
|
||
</el-splitter-panel>
|
||
|
||
<el-splitter-panel>
|
||
<div class="h-full card !p-1 key-deatil">
|
||
<el-tabs class="h-full" @tab-remove="removeDataTab" v-model="state.activeName">
|
||
<el-tab-pane class="h-full" closable v-for="dt in state.dataTabs" :key="dt.key" :label="dt.label" :name="dt.key">
|
||
<key-detail :redis="redisInst" :key-info="dt.keyInfo" @change-key="searchKey()" @del-key="delKey" />
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
</el-splitter-panel>
|
||
</el-splitter>
|
||
|
||
<div style="text-align: center; margin-top: 10px"></div>
|
||
|
||
<el-dialog :title="$t('redis.addKey')" v-model="newKeyDialog.visible" width="500px" :destroy-on-close="true" :close-on-click-modal="false">
|
||
<el-form ref="keyForm" label-width="auto" :rules="keyFormRules" :model="newKeyDialog.keyInfo">
|
||
<el-form-item prop="key" label="Key" required>
|
||
<el-input v-model.trim="newKeyDialog.keyInfo.key"></el-input>
|
||
</el-form-item>
|
||
<el-form-item prop="type" :label="$t('common.type')">
|
||
<el-select v-model="newKeyDialog.keyInfo.type" default-first-option>
|
||
<el-option key="string" label="string" value="string"></el-option>
|
||
<el-option key="hash" label="hash" value="hash"></el-option>
|
||
<el-option key="set" label="set" value="set"></el-option>
|
||
<el-option key="zset" label="zset" value="zset"></el-option>
|
||
<el-option key="list" label="list" value="list"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<template #footer>
|
||
<el-button @click="cancelNewKey()">{{ $t('common.cancel') }}</el-button>
|
||
<el-button v-auth="'redis:data:save'" type="primary" @click="newKey">{{ $t('common.confirm') }}</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { redisApi } from '../api';
|
||
import { ref, defineAsyncComponent, toRefs, reactive, onMounted, nextTick, Ref, watch, useTemplateRef, getCurrentInstance } from 'vue';
|
||
import { ElMessageBox } from 'element-plus';
|
||
import { isTrue, notNull } from '@/common/assert';
|
||
import { copyToClipboard } from '@/common/utils/string';
|
||
import { keysToTree, sortByTreeNodes, keysToList } from '../utils';
|
||
import { Contextmenu, ContextmenuItem } from '@/components/contextmenu';
|
||
import { RedisInst } from '../redis';
|
||
import { useI18n } from 'vue-i18n';
|
||
import { useI18nDeleteConfirm, useI18nDeleteSuccessMsg, useI18nFormValidate, useI18nOperateSuccessMsg } from '@/hooks/useI18n';
|
||
import { Rules } from '@/common/rule';
|
||
import { RedisOpComp } from '@/views/ops/redis/resource';
|
||
|
||
const KeyDetail = defineAsyncComponent(() => import('../KeyDetail.vue'));
|
||
|
||
const { t } = useI18n();
|
||
|
||
const emits = defineEmits(['init']);
|
||
|
||
const keyFormRules = {
|
||
key: [Rules.requiredInput('Key')],
|
||
};
|
||
|
||
const cmCopyKey = new ContextmenuItem('copyValue', 'Copy')
|
||
.withIcon('CopyDocument')
|
||
.withHideFunc((data: any) => !data.isLeaf)
|
||
.withOnClick(async (data: any) => await copyToClipboard(data.key));
|
||
|
||
const cmNewTabOpen = new ContextmenuItem('newTabOpenKey', 'redis.newTabOpen')
|
||
.withIcon('plus')
|
||
.withHideFunc((data: any) => !data.isLeaf)
|
||
.withOnClick((data: any) => showKeyDetail(data.key, true));
|
||
|
||
const cmDelKey = new ContextmenuItem('delKey', 'common.delete')
|
||
.withIcon('delete')
|
||
.withPermission('redis:data:del')
|
||
.withHideFunc((data: any) => !data.isLeaf)
|
||
.withOnClick((data: any) => delKey(data.key));
|
||
|
||
const treeProps = {
|
||
label: 'name',
|
||
children: 'children',
|
||
isLeaf: 'leaf',
|
||
};
|
||
|
||
const defaultCount = 250;
|
||
|
||
const contextmenuRef = ref();
|
||
const keyTreeRef: any = ref(null);
|
||
const keyFormRef = useTemplateRef('keyForm');
|
||
|
||
const redisInst: Ref<RedisInst> = ref(new RedisInst());
|
||
|
||
const state = reactive({
|
||
defaultExpendKey: [] as any,
|
||
tags: [],
|
||
redisList: [] as any,
|
||
dbList: [],
|
||
keyTreeHeight: '100px',
|
||
loadingKeyTree: false,
|
||
keys: [] as any,
|
||
keySeparator: ':',
|
||
keyTreeData: [] as any,
|
||
keyTreeExpanded: new Set(),
|
||
activeName: '',
|
||
dataTabs: {} as any,
|
||
rightClickNode: {} as any,
|
||
scanParam: {
|
||
id: null as any,
|
||
mode: '',
|
||
db: null as any,
|
||
match: null,
|
||
count: defaultCount,
|
||
cursor: {},
|
||
},
|
||
newKeyDialog: {
|
||
visible: false,
|
||
keyInfo: {
|
||
type: 'string',
|
||
timed: -1,
|
||
key: '',
|
||
},
|
||
},
|
||
dbsize: 0,
|
||
contextmenu: {
|
||
dropdown: {
|
||
x: 0,
|
||
y: 0,
|
||
},
|
||
items: [cmCopyKey, cmNewTabOpen, cmDelKey],
|
||
},
|
||
});
|
||
|
||
const { scanParam, keyTreeData, newKeyDialog } = toRefs(state);
|
||
|
||
onMounted(async () => {
|
||
emits('init', { name: RedisOpComp.name, ref: getCurrentInstance()?.exposed });
|
||
});
|
||
|
||
const scan = async (appendKey = false) => {
|
||
isTrue(state.scanParam.id != null, 'redis.redisSelectErr');
|
||
|
||
const match: string = state.scanParam.match || '';
|
||
if (!match) {
|
||
state.scanParam.count = defaultCount;
|
||
} else if (match.indexOf('*') != -1) {
|
||
const dbsize = state.dbsize;
|
||
// 如果为模糊搜索，并且搜索的key模式大于指定字符数，则将count设大点scan
|
||
if (match.length > 10) {
|
||
state.scanParam.count = dbsize > 100000 ? Math.floor(dbsize / 10) : 1000;
|
||
} else {
|
||
state.scanParam.count = defaultCount;
|
||
}
|
||
}
|
||
|
||
const scanParam = { ...state.scanParam };
|
||
// 集群模式count设小点，因为后端会从所有master节点scan一遍然后合并结果,默认假设redis集群有3个master
|
||
if (scanParam.mode == 'cluster') {
|
||
scanParam.count = Math.floor(state.scanParam.count / 3);
|
||
}
|
||
|
||
try {
|
||
state.loadingKeyTree = true;
|
||
const res = await redisApi.scan.request(scanParam);
|
||
// 追加key，则将新key合并至原keys（加载更多）
|
||
if (appendKey) {
|
||
state.keys = [...state.keys, ...res.keys];
|
||
} else {
|
||
state.keys = res.keys;
|
||
}
|
||
setKeyList(state.keys);
|
||
state.dbsize = res.dbSize;
|
||
state.scanParam.cursor = res.cursor;
|
||
} finally {
|
||
state.loadingKeyTree = false;
|
||
}
|
||
};
|
||
|
||
const setKeyList = (keys: any) => {
|
||
state.keyTreeData = state.keySeparator ? keysToTree(keys, state.keySeparator, state.keyTreeExpanded) : keysToList(keys);
|
||
nextTick(() => {
|
||
// key长度小于指定数量，则展开所有节点
|
||
if (keys.length <= 20) {
|
||
expandAllKeyNode(state.keyTreeData);
|
||
}
|
||
|
||
sortByTreeNodes(keyTreeRef.value.root.childNodes);
|
||
});
|
||
};
|
||
|
||
// 展开所有节点
|
||
const expandAllKeyNode = (nodes: any) => {
|
||
for (let node of nodes) {
|
||
if (!node.children) {
|
||
continue;
|
||
}
|
||
state.keyTreeExpanded.add(node.key);
|
||
for (let i = 0; i < node.children.length; i++) {
|
||
expandAllKeyNode(node.children);
|
||
}
|
||
}
|
||
};
|
||
|
||
const handleKeyTreeNodeClick = async (data: any) => {
|
||
// 关闭可能存在的右击菜单
|
||
contextmenuRef.value.closeContextmenu();
|
||
// 目录则不做处理
|
||
if (data.type == 1) {
|
||
return;
|
||
}
|
||
|
||
showKeyDetail(data.key);
|
||
};
|
||
|
||
const showKeyDetail = async (key: any, newTab = false) => {
|
||
let keyInfo;
|
||
if (typeof key == 'object') {
|
||
keyInfo = key;
|
||
} else {
|
||
if (state.dataTabs[key]) {
|
||
state.activeName = key;
|
||
return;
|
||
}
|
||
const res = await redisApi.keyInfo.request({ id: state.scanParam.id, db: state.scanParam.db, key: key });
|
||
keyInfo = {
|
||
key: key,
|
||
type: res.type,
|
||
timed: res.ttl,
|
||
};
|
||
}
|
||
|
||
let label = keyInfo.key;
|
||
if (label.length > 40) {
|
||
label = label.slice(0, 40) + '...';
|
||
}
|
||
const dataTab = {
|
||
key: keyInfo.key,
|
||
label,
|
||
keyInfo,
|
||
};
|
||
|
||
if (!newTab) {
|
||
delete state.dataTabs[state.activeName];
|
||
}
|
||
|
||
state.dataTabs[keyInfo.key] = dataTab;
|
||
state.activeName = keyInfo.key;
|
||
};
|
||
|
||
const removeDataTab = (targetName: string) => {
|
||
const tabNames = Object.keys(state.dataTabs);
|
||
let activeName = state.activeName;
|
||
tabNames.forEach((name, index) => {
|
||
if (name === targetName) {
|
||
const nextTab = tabNames[index + 1] || tabNames[index - 1];
|
||
if (nextTab) {
|
||
activeName = nextTab;
|
||
}
|
||
}
|
||
});
|
||
state.activeName = activeName;
|
||
delete state.dataTabs[targetName];
|
||
};
|
||
|
||
const keyTreeNodeExpand = (data: any, node: any) => {
|
||
state.keyTreeExpanded.add(data.key);
|
||
// async sort nodes
|
||
if (!node.customSorted) {
|
||
node.customSorted = true;
|
||
sortByTreeNodes(node.childNodes);
|
||
}
|
||
};
|
||
|
||
const keyTreeNodeCollapse = (data: any) => {
|
||
state.keyTreeExpanded.delete(data.key);
|
||
};
|
||
|
||
const rightClickNode = (event: any, data: any, node: any) => {
|
||
const { clientX, clientY } = event;
|
||
state.contextmenu.dropdown.x = clientX;
|
||
state.contextmenu.dropdown.y = clientY;
|
||
contextmenuRef.value.openContextmenu(node);
|
||
keyTreeRef.value.setCurrentKey(node.key);
|
||
};
|
||
|
||
const searchKey = async () => {
|
||
state.scanParam.cursor = {};
|
||
await scan(false);
|
||
};
|
||
|
||
const clear = () => {
|
||
resetScanParam();
|
||
if (state.scanParam.id) {
|
||
scan();
|
||
}
|
||
};
|
||
|
||
const resetScanParam = () => {
|
||
state.scanParam.match = null;
|
||
state.scanParam.cursor = {};
|
||
state.keyTreeExpanded.clear();
|
||
state.dataTabs = {};
|
||
state.activeName = '';
|
||
};
|
||
|
||
const showNewKeyDialog = () => {
|
||
notNull(state.scanParam.id, t('redis.redisSelectErr'));
|
||
resetNewKeyInfo();
|
||
state.newKeyDialog.visible = true;
|
||
};
|
||
|
||
const flushDb = () => {
|
||
ElMessageBox.confirm(t('redis.flushDbTips', { db: state.scanParam.db }), t('common.hint'), {
|
||
confirmButtonText: t('common.confirm'),
|
||
cancelButtonText: t('common.cancel'),
|
||
type: 'warning',
|
||
})
|
||
.then(() => {
|
||
// FLUSHDB [ASYNC | SYNC]
|
||
redisInst.value.runCmd(['FLUSHDB']).then(() => {
|
||
useI18nOperateSuccessMsg();
|
||
searchKey();
|
||
});
|
||
})
|
||
.catch(() => {});
|
||
};
|
||
|
||
const cancelNewKey = () => {
|
||
resetNewKeyInfo();
|
||
state.newKeyDialog.visible = false;
|
||
};
|
||
|
||
const newKey = async () => {
|
||
await useI18nFormValidate(keyFormRef);
|
||
const keyInfo = state.newKeyDialog.keyInfo;
|
||
const key = keyInfo.key;
|
||
|
||
showKeyDetail(
|
||
{
|
||
...keyInfo,
|
||
},
|
||
true
|
||
);
|
||
state.newKeyDialog.visible = false;
|
||
|
||
// 添加新增的key至key tree
|
||
state.keys.push(key);
|
||
setKeyList(state.keys);
|
||
};
|
||
|
||
const resetNewKeyInfo = () => {
|
||
state.newKeyDialog.keyInfo.key = '';
|
||
state.newKeyDialog.keyInfo.type = 'string';
|
||
state.newKeyDialog.keyInfo.timed = -1;
|
||
};
|
||
|
||
const delKey = async (key: string) => {
|
||
await useI18nDeleteConfirm(key);
|
||
// DEL key [key ...]
|
||
await redisInst.value.runCmd(['DEL', key]);
|
||
useI18nDeleteSuccessMsg();
|
||
searchKey();
|
||
|
||
removeDataTab(key);
|
||
};
|
||
|
||
const onDbClick = async (dbInfo: any) => {
|
||
if (state.scanParam.db == dbInfo.db) {
|
||
return;
|
||
}
|
||
resetScanParam();
|
||
|
||
state.scanParam.id = dbInfo.id;
|
||
state.scanParam.mode = dbInfo.mode;
|
||
state.scanParam.db = dbInfo.db;
|
||
|
||
redisInst.value.id = dbInfo.id;
|
||
redisInst.value.db = Number.parseInt(dbInfo.db);
|
||
|
||
scan();
|
||
};
|
||
|
||
defineExpose({
|
||
onDbClick,
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.key-deatil {
|
||
.el-tabs__header {
|
||
background-color: var(--el-color-white);
|
||
border-bottom: 1px solid var(--el-border-color);
|
||
}
|
||
|
||
::v-deep(.el-tabs__item) {
|
||
padding: 0 10px;
|
||
height: 29px;
|
||
}
|
||
|
||
::v-deep(.el-tabs__nav-next) {
|
||
line-height: 29px;
|
||
}
|
||
::v-deep(.el-tabs__nav-prev) {
|
||
line-height: 29px;
|
||
}
|
||
}
|
||
|
||
.redis-data-op {
|
||
.key-list-vtree .folder-label {
|
||
font-weight: bold;
|
||
}
|
||
|
||
.key-list-vtree .key-label {
|
||
color: #67c23a;
|
||
}
|
||
|
||
.key-list-vtree .key-list-custom-node {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
/*note the following 2 items should be same value, may not consist with itemSize*/
|
||
height: 22px;
|
||
line-height: 22px;
|
||
}
|
||
}
|
||
</style>
|