Merge pull request #66 from quick123official/feature/keys_history

Feature/keys history
quick123official · Nov 14, 2021 · 503b047 · 503b047
2 parents 26cce03 + 75a12c4
commit 503b047
Show file tree

Hide file tree

Showing 10 changed files with 281 additions and 66 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "QuickRedis",
-    "version": "2.4.2",
+    "version": "2.5.0",
     "private": true,
     "description": "QuickRedis",
     "author": "https://quick123.net/",
@@ -31,6 +31,11 @@
         "pack:linux": "electron-builder -l -p never",
         "pack:all": "electron-builder -mwl"
     },
+    "jest": {
+        "moduleNameMapper": {
+            "@/(.*)": "<rootDir>/src/$1"
+        }
+    },
     "build": {
         "extends": null,
         "files": [

diff --git a/src/pages/HostContent/index.js b/src/pages/HostContent/index.js
@@ -79,7 +79,7 @@ class HostContent extends Component {
                 Log.error("[cmd=info] Keyspace error", err);
                 return;
             }
-            let dbTabs = [];
+            let dbIndexMap = new Map();
             try {
                 let infos = res.split("\n");
                 infos.shift();
@@ -94,8 +94,8 @@ class HostContent extends Component {
                     if (dbname.startsWith("db")) {
                         dbIndex = parseInt(dbname.substring(2));
                     }
-                    dbTabs.push({
-                        key: "" + i,
+                    dbIndexMap.set(dbIndex, {
+                        key: "" + dbIndex,
                         dbIndex: dbIndex,
                         title: dbname,
                         total: thirdSplitString[1],
@@ -104,14 +104,19 @@ class HostContent extends Component {
             } catch (error) {
                 Log.error("[cmd=info] Keyspace split error", error);
             }
+            let dbTabs = [];
             if (dbTabs.length === 0) {
                 for (let i = 0; i < 16; i++) {
-                    dbTabs.push({
-                        key: "" + i,
-                        dbIndex: i,
-                        title: i,
-                        total: i,
-                    });
+                    let dbIndexObj = dbIndexMap.get(i);
+                    if (dbIndexObj === undefined || dbIndexObj === null) {
+                        dbIndexObj = {
+                            key: "" + i,
+                            dbIndex: i,
+                            title: "db" + i,
+                            total: 0,
+                        };
+                    }
+                    dbTabs.push(dbIndexObj);
                 }
             }
             this.setState({ dbTabs: dbTabs });
@@ -195,7 +200,7 @@ class HostContent extends Component {
                                         }}
                                     >
                                         {this.hostKeyShowType ===
-                                            HOST_KEY_SHOW_TYPE.TREE ? (
+                                        HOST_KEY_SHOW_TYPE.TREE ? (
                                             <HostKeyTree
                                                 node={this.props.node}
                                                 db={tab.dbIndex}
@@ -211,7 +216,7 @@ class HostContent extends Component {
                                             ""
                                         )}
                                         {this.hostKeyShowType ===
-                                            HOST_KEY_SHOW_TYPE.TABLE ? (
+                                        HOST_KEY_SHOW_TYPE.TABLE ? (
                                             <HostKey
                                                 node={this.props.node}
                                                 db={tab.dbIndex}
@@ -229,7 +234,7 @@ class HostContent extends Component {
                                     </div>
                                     <div style={{ paddingLeft: "20px" }}>
                                         {redisKeyType ===
-                                            REDIS_DATA_TYPE.STRING ? (
+                                        REDIS_DATA_TYPE.STRING ? (
                                             <HostKeyString
                                                 redisKey={redisKey}
                                                 redisKeyType={redisKeyType}
@@ -242,7 +247,7 @@ class HostContent extends Component {
                                             ""
                                         )}
                                         {redisKeyType ===
-                                            REDIS_DATA_TYPE.ZSET ? (
+                                        REDIS_DATA_TYPE.ZSET ? (
                                             <HostKeySortSet
                                                 redisKey={redisKey}
                                                 redisKeyType={redisKeyType}
@@ -255,7 +260,7 @@ class HostContent extends Component {
                                             ""
                                         )}
                                         {redisKeyType ===
-                                            REDIS_DATA_TYPE.SET ? (
+                                        REDIS_DATA_TYPE.SET ? (
                                             <HostKeySet
                                                 redisKey={redisKey}
                                                 redisKeyType={redisKeyType}
@@ -268,7 +273,7 @@ class HostContent extends Component {
                                             ""
                                         )}
                                         {redisKeyType ===
-                                            REDIS_DATA_TYPE.HASH ? (
+                                        REDIS_DATA_TYPE.HASH ? (
                                             <HostKeyHash
                                                 redisKey={redisKey}
                                                 redisKeyType={redisKeyType}
@@ -281,7 +286,7 @@ class HostContent extends Component {
                                             ""
                                         )}
                                         {redisKeyType ===
-                                            REDIS_DATA_TYPE.LIST ? (
+                                        REDIS_DATA_TYPE.LIST ? (
                                             <HostKeyList
                                                 redisKey={redisKey}
                                                 redisKeyType={redisKeyType}

diff --git a/src/pages/HostKey/index.js b/src/pages/HostKey/index.js
@@ -8,17 +8,19 @@ import {
     Select,
     Form,
     Tooltip,
+    AutoComplete,
 } from "antd";
 import { message } from "antd";
 import { SearchOutlined } from "@ant-design/icons";
 import { REDIS_DATA_TYPE, REDIS_DATA_SHOW } from "@/utils/constant";
-import "@/pages/CommonCss/zebra.css";
+import KeysHistoryService from "@/services/KeysHistoryService";
 import Log from "@/services/LogService";
+import "@/pages/CommonCss/zebra.css";
 import intl from "react-intl-universal";
 const { Search } = Input;
 const { Option } = Select;
 /**
- *host 管理
+ * table 显示 keys
  *
  * @class HostKey
  * @extends {Component}
@@ -60,6 +62,7 @@ class HostKey extends Component {
         searchDisable: false,
         selectedRowKey: "",
         createKeyMadal: { visible: false, keyType: REDIS_DATA_TYPE.STRING },
+        autoCompleteOptions: [],
     };
     searchInput = React.createRef();
     componentDidMount() {
@@ -87,10 +90,10 @@ class HostKey extends Component {
      *
      * @param {*} pattern
      * @param {*} cursor
-     * @param {*} existKey
+     * @param {*} originalKey
      * @memberof HostKey
      */
-    loadRedisDataByPattern(pattern, cursor, existKey) {
+    loadRedisDataByPattern(pattern, cursor, originalKey) {
         let redis = this.props.node.redis;
         redis.scan(
             cursor,
@@ -106,14 +109,14 @@ class HostKey extends Component {
                         "[cmd=HostKey] loadRedisDataByPattern error",
                         pattern,
                         cursor,
-                        existKey,
+                        originalKey,
                         err
                     );
                     return;
                 }
                 let data = [];
                 for (let i = 0; i < res[1].length; i++) {
-                    if (res[1][i] === existKey) {
+                    if (res[1][i] === originalKey) {
                         continue;
                     }
                     data.push({
@@ -127,6 +130,10 @@ class HostKey extends Component {
                         tableData: tableData,
                         tableTotal: tableData.length,
                     });
+                    // 如果key存在，则添加到搜索历史记录
+                    let host = this.props.node.data.host;
+                    let port = this.props.node.data.port;
+                    KeysHistoryService.addKeysHistory(host, port, originalKey);
                 }
                 this.setState({ searchDisable: false });
             }
@@ -165,13 +172,15 @@ class HostKey extends Component {
                         key: key,
                         name: key,
                     });
-                    if (data.length !== 0) {
-                        let tableData = [...this.state.tableData, ...data];
-                        this.setState({
-                            tableData: tableData,
-                            tableTotal: tableData.length,
-                        });
-                    }
+                    // 如果key存在，则添加到搜索历史记录
+                    let host = this.props.node.data.host;
+                    let port = this.props.node.data.port;
+                    KeysHistoryService.addKeysHistory(host, port, key);
+                    let tableData = [...this.state.tableData, ...data];
+                    this.setState({
+                        tableData: tableData,
+                        tableTotal: tableData.length,
+                    });
                 }
                 this.loadRedisDataByPattern(pattern, cursor, key);
             },
@@ -376,6 +385,19 @@ class HostKey extends Component {
         }
         form.resetFields();
     }
+
+    onAutoCompleteSelect = (data) => {
+        this.setState({ autoCompleteOptions: [] });
+    };
+
+    onAutoCompleteChange = (data) => {
+        // 如果key存在，则添加到搜索历史记录
+        let host = this.props.node.data.host;
+        let port = this.props.node.data.port;
+        let keyHistoryArr = KeysHistoryService.searchKey(host, port, data);
+        this.setState({ autoCompleteOptions: keyHistoryArr });
+    };
+
     render() {
         return (
             <div>
@@ -387,14 +409,21 @@ class HostKey extends Component {
                         placement="right"
                         title={intl.get("common.search.tooltip.limit")}
                     >
-                        <Search
-                            ref={this.searchInput}
-                            onSearch={this.searchKey.bind(this)}
-                            enterButton={
-                                <Button icon={<SearchOutlined />}></Button>
-                            }
-                            disabled={this.state.searchDisable}
-                        />
+                        <AutoComplete
+                            options={this.state.autoCompleteOptions}
+                            onSelect={this.onAutoCompleteSelect.bind(this)}
+                            onChange={this.onAutoCompleteChange.bind(this)}
+                            style={{ width: "100%" }}
+                        >
+                            <Search
+                                ref={this.searchInput}
+                                onSearch={this.searchKey.bind(this)}
+                                enterButton={
+                                    <Button icon={<SearchOutlined />}></Button>
+                                }
+                                disabled={this.state.searchDisable}
+                            />
+                        </AutoComplete>
                     </Tooltip>
                     <Table
                         // columns={columns}

diff --git a/src/pages/HostKeyHash/index.js b/src/pages/HostKeyHash/index.js
@@ -132,7 +132,7 @@ class HostKeyHash extends Component {
         // table 加载状态
         loading: false,
         // table 新增修改的对话框
-        modal: { forceRender: true, visible: false, type: 0 },
+        modal: { visible: false, type: 0 },
         // table 搜索key
         search: { field: "*" },
         total: 0,
@@ -487,7 +487,7 @@ class HostKeyHash extends Component {
                     visible={this.state.modal.visible}
                     onOk={this.handleModalOk.bind(this)}
                     onCancel={this.handleModalCancel.bind(this)}
-                    forceRender={this.state.modal.forceRender}
+                    forceRender={true}
                     width={"60%"}
                     height={"40%"}
                 >

diff --git a/src/pages/HostKeyList/index.js b/src/pages/HostKeyList/index.js
@@ -119,7 +119,7 @@ class HostKeyList extends Component {
         // table 加载状态
         loading: false,
         // table 新增修改的对话框
-        modal: { forceRender: true, visible: false, type: 0 },
+        modal: { visible: false, type: 0 },
         total: 0,
     };
     /**
@@ -310,14 +310,20 @@ class HostKeyList extends Component {
                 .lpush(redisKey, member)
                 .then(this.pushMemberCallBack(redisKey), (err) => {
                     message.error("" + err);
-                    Log.error("[cmd=HostKeyList] handleModalOk lpush error", err);
+                    Log.error(
+                        "[cmd=HostKeyList] handleModalOk lpush error",
+                        err
+                    );
                 });
         } else if (insertType === "1") {
             redis
                 .rpush(redisKey, member)
                 .then(this.pushMemberCallBack(redisKey), (err) => {
                     message.error("" + err);
-                    Log.error("[cmd=HostKeyList] handleModalOk rpush error", err);
+                    Log.error(
+                        "[cmd=HostKeyList] handleModalOk rpush error",
+                        err
+                    );
                 });
         }
     }
@@ -330,7 +336,6 @@ class HostKeyList extends Component {
         // 关闭modal
         this.setState({
             modal: {
-                forceRender: true,
                 visible: false,
                 type: this.state.modal.type,
             },
@@ -414,7 +419,7 @@ class HostKeyList extends Component {
                     onOk={this.handleModalOk.bind(this)}
                     onCancel={this.handleModalCancel.bind(this)}
                     okButtonProps={{ disabled: this.state.modal.type === 1 }}
-                    forceRender={this.state.modal.forceRender}
+                    forceRender={true}
                     width={"60%"}
                     height={"40%"}
                 >

diff --git a/src/pages/HostKeySet/index.js b/src/pages/HostKeySet/index.js
@@ -120,7 +120,7 @@ class HostKeySet extends Component {
         // table 加载状态
         loading: false,
         // table 新增修改的对话框
-        modal: { forceRender: true, visible: false, type: 0 },
+        modal: { visible: false, type: 0 },
         // table 搜索key
         search: { searchMember: "*" },
         total: 0,
@@ -447,7 +447,7 @@ class HostKeySet extends Component {
                     onOk={this.handleModalOk.bind(this)}
                     onCancel={this.handleModalCancel.bind(this)}
                     okButtonProps={{ disabled: this.state.modal.type === 1 }}
-                    forceRender={this.state.modal.forceRender}
+                    forceRender={true}
                     width={"60%"}
                     height={"40%"}
                 >

diff --git a/src/pages/HostKeySortSet/index.js b/src/pages/HostKeySortSet/index.js
@@ -129,7 +129,7 @@ class HostKeySortSet extends Component {
         // table 加载状态
         loading: false,
         // table 新增修改的对话框
-        modal: { forceRender: true, visible: false, type: 0 },
+        modal: { visible: false, type: 0 },
         // table 搜索key
         search: { searchMember: "", isSearchIng: false },
         total: 0,
@@ -539,7 +539,7 @@ class HostKeySortSet extends Component {
                     visible={this.state.modal.visible}
                     onOk={this.handleModalOk.bind(this)}
                     onCancel={this.handleModalCancel.bind(this)}
-                    forceRender={this.state.modal.forceRender}
+                    forceRender={true}
                     width={"60%"}
                     height={"40%"}
                 >