+
+
+
+
+ {{ $t('message.load_more_keys') }}
+
-
-
- {{ $t('message.load_more_keys') }}
-
+
+
+
+
+ {{ $t('message.load_all_keys') }}
+
+
+
@@ -27,8 +45,6 @@ export default {
data() {
return {
keyList: [],
- // keyListType: this.config.separator === '' ? 'KeyListNormal' : 'KeyListTree',
- // keysPageSize: this.keyListType === 'KeyListNormal' ? 200 : 1000,
keyListType: 'KeyListTree',
searchPageSize: 10000,
scanStreams: [],
@@ -37,6 +53,7 @@ export default {
onePageList: [],
onePageFinishedCount: 0,
firstPageFinished: false,
+ loadAllTooltip: true,
};
},
props: ['client', 'config', 'globalSettings'],
@@ -46,6 +63,12 @@ export default {
let keysPageSize = parseInt(this.globalSettings['keysPageSize']);
return keysPageSize ? keysPageSize : 500;
},
+ showLoadAllKeys(){
+ return this.globalSettings['showLoadAllKeys'];
+ },
+ searching() {
+ return this.$parent.$parent.$parent.$refs.operateItem.searchIcon == 'el-icon-loading';
+ },
},
created() {
// add or remove key from key list directly
@@ -99,15 +122,20 @@ export default {
}
}
},
- initScanStreamsAndScan() {
- // this.client.nodes: cluster
+ loadAllKeys(){
+ this.resetKeyList();
+ this.$parent.$parent.$parent.$refs.operateItem.searchIcon = 'el-icon-loading';
+ this.initScanStreamsAndScan(true);
+ },
+ initScanStreamsAndScan(loadAll = false) {
let nodes = this.client.nodes ? this.client.nodes('master') : [this.client];
+ let keysPageSize = loadAll ? 50000 : this.keysPageSize;
this.scanningCount = nodes.length;
nodes.map(node => {
let scanOption = {
match: this.getMatchMode(),
- count: this.keysPageSize,
+ count: keysPageSize,
}
// scan count is bigger when in search mode
@@ -120,7 +148,7 @@ export default {
this.onePageList = this.onePageList.concat(keys);
// scan once reaches page size
- if (this.onePageList.length >= this.keysPageSize) {
+ if (this.onePageList.length >= keysPageSize && loadAll === false) {
// temp stop
stream.pause();
// search input icon recover
@@ -129,13 +157,14 @@ export default {
// last node refresh keylist
if (++this.onePageFinishedCount >= this.scanningCount) {
// clear key list only after data scaned, to prevent list jitter
+ // empty keyList only when first click, if click 'load more' again, do not empty it
if (!this.firstPageFinished) {
this.firstPageFinished = true;
this.keyList = [];
}
// this page key list append to raw key list
- this.keyList = this.keyList.concat(this.onePageList.sort());
+ this.keyList = this.keyList.concat(this.onePageList);
}
}
});
@@ -171,14 +200,14 @@ export default {
// all nodes scan finished(cusor back to 0)
if (--this.scanningCount <= 0) {
// clear key list only after data scaned, to prevent list jitter
+ // empty keyList only when first click, if click 'load more' again, do not empty it
if (!this.firstPageFinished) {
this.firstPageFinished = true;
this.keyList = [];
}
// this page key list append to raw key list
- this.keyList = this.keyList.concat(this.onePageList.sort());
-
+ this.keyList = this.keyList.concat(this.onePageList);
this.scanMoreDisabled = true;
// search input icon recover
this.$parent.$parent.$parent.$refs.operateItem.searchIcon = 'el-icon-search';
@@ -187,6 +216,9 @@ export default {
});
},
resetKeyList(clearKeys = false) {
+ // cancel scanning
+ this.cancelScanning();
+
clearKeys && (this.keyList = []);
this.firstPageFinished = false;
this.scanStreams = [];
@@ -205,6 +237,13 @@ export default {
this.scanMoreDisabled = true;
},
+ cancelScanning() {
+ if (this.scanStreams.length) {
+ for (let stream of this.scanStreams) {
+ stream.pause && stream.pause();
+ }
+ }
+ },
getMatchMode(fillStar = true) {
let match = this.$parent.$parent.$parent.$refs.operateItem.searchMatch;
@@ -262,12 +301,16 @@ export default {
diff --git a/src/components/KeyListTree.vue b/src/components/KeyListTree.vue
index 116dc2b..188a52b 100644
--- a/src/components/KeyListTree.vue
+++ b/src/components/KeyListTree.vue
@@ -38,7 +38,8 @@
import $ from "jquery";
if (!window.jQuery) window.jQuery = $;
-import ("@ztree/ztree_v3/js/jquery.ztree.all.min.js");
+// import ("@ztree/ztree_v3/js/jquery.ztree.all.js");
+import ("@qii404/ztree_v3/js/jquery.ztree.all.js");
export default {
data() {
@@ -47,13 +48,14 @@ export default {
openStatus: {},
rightClickNode: {},
multiOperating: false,
+ treeNodesOverflow: 20000,
setting: {
view: {
showIcon: true,
showLine: false,
selectedMulti: false,
dblClickExpand: false,
- addDiyDom: this.addDiyDom,
+ // addDiyDom: this.addDiyDom,
expandSpeed: 'fast',
},
check: {
@@ -69,6 +71,9 @@ export default {
// folder clicked
if (treeNode.children) {
+ // after folder expand, sorting keys
+ !treeNode.open && this.folderExpand(treeNode);
+
// toggle tree view
this.ztreeObj && this.ztreeObj.expandNode(treeNode, undefined, false, false);
@@ -78,8 +83,12 @@ export default {
this.clickKey(Buffer.from(treeNode.nameBuffer.data), event);
},
- onExpand: (event, treeId, treeNode) => {
- return this.openStatus[treeNode.fullName] = treeNode.open;
+ beforeExpand: (treeId, treeNode) => {
+ // after folder expand, sorting keys
+ this.folderExpand(treeNode);
+ this.openStatus[treeNode.fullName] = !treeNode.open;
+
+ return true;
},
onCollapse: (event, treeId, treeNode) => {
return this.openStatus[treeNode.fullName] = treeNode.open;
@@ -187,6 +196,25 @@ export default {
toggleCheckAll(checked) {
this.ztreeObj.checkAllNodes(checked);
},
+ folderExpand(treeNode) {
+ if (!treeNode.asyncOperated) {
+ // force cut nodes
+ if (treeNode.children.length > this.treeNodesOverflow) {
+ treeNode.children.splice(this.treeNodesOverflow);
+ this.$nextTick(() => {
+ this.$message.warning({
+ message: this.$t('message.tree_node_overflow', {num: this.treeNodesOverflow}),
+ duration: 4000
+ });
+ });
+ }
+
+ // sort nodes async, only after opened
+ this.$util.sortKeysAndFolder(treeNode.children);
+
+ treeNode.asyncOperated = true;
+ }
+ },
deleteBatch() {
let rule = {key: [], pattern: []};
let folderNodes = {};
@@ -277,8 +305,6 @@ export default {
},
treeRefresh(nodes) {
this.ztreeObj && this.ztreeObj.destroy();
- // folder keep in front
- this.$util.sortNodes(nodes);
this.ztreeObj = $.fn.zTree.init(
$(`#${this.treeId}`),
@@ -311,11 +337,26 @@ export default {
let checkedNodes = [];
this.ztreeObj && (checkedNodes = this.ztreeObj.getCheckedNodes(true));
- this.treeRefresh(
- this.separator ?
- this.$util.keysToTree(newList, this.separator, this.openStatus) :
- this.$util.keysToList(newList)
- );
+ const keyNodes = this.separator ?
+ this.$util.keysToTree(newList, this.separator, this.openStatus, this.treeNodesOverflow) :
+ this.$util.keysToList(newList);
+
+ // nodes displayed in outermost layer
+ if (keyNodes.length > this.treeNodesOverflow) {
+ // force cut
+ keyNodes.splice(this.treeNodesOverflow);
+ // using nextTick to relieve msg missing caused by app stuck
+ this.$nextTick(() => {
+ this.$message.warning({
+ message: this.$t('message.tree_node_overflow', {num: this.treeNodesOverflow}),
+ duration: 6000,
+ });
+ });
+ }
+
+ // sort outermost layer nodes
+ this.$util.sortKeysAndFolder(keyNodes);
+ this.treeRefresh(keyNodes);
// remove animination when too many nodes
if (newList.length > 9000) {
@@ -324,7 +365,6 @@ export default {
// recheck checked nodes
this.reCheckNodes(checkedNodes);
-
// only 1 key such as extract search, expand all
if (newList.length <= 1) {
this.ztreeObj && this.ztreeObj.expandAll(true);
@@ -335,7 +375,7 @@ export default {