update host store

spug_web/src/pages/host/Group.js

@@ -124,7 +124,7 @@ export default observer(function () {
     } else {
       return (
         <span style={{lineHeight: '24px'}}>
-          {nodeData.title}{nodeData.host_ids && nodeData.host_ids.length ? `（${nodeData.host_ids.length}）` : null}
+          {nodeData.title}{nodeData.all_host_ids && nodeData.all_host_ids.length ? `（${nodeData.all_host_ids.length}）` : null}
         </span>
       )
     }
@@ -144,7 +144,7 @@ export default observer(function () {
           className={styles.dragBox}
           autoExpandParent
           draggable={draggable}
-          treeData={store.allTreeData}
+          treeData={store.treeData}
           titleRender={treeRender}
           expandedKeys={expands}
           selectedKeys={[store.group.key]}

spug_web/src/pages/host/Selector.js

@@ -11,18 +11,18 @@ export default observer(function (props) {
   const [selectedRowKeys, setSelectedRowKeys] = useState([]);
 
   useEffect(() => {
-    if (!store.selfTreeData.length) {
+    if (!store.treeData.length) {
       store.fetchRecords()
       store.fetchGroups()
-        .then(() => setGroup(store.selfTreeData[0]))
+        .then(() => setGroup(store.treeData[0]))
     } else {
-      setGroup(store.selfTreeData[0])
+      setGroup(store.treeData[0])
     }
   }, [])
 
   useEffect(() => {
     if (group.key) {
-      const records = store.records.filter(x => group.host_ids.includes(x.id));
+      const records = store.records.filter(x => group.self_host_ids.includes(x.id));
       setDataSource(records)
     }
   }, [group])
@@ -30,7 +30,7 @@ export default observer(function (props) {
   function treeRender(nodeData) {
     return (
       <span style={{lineHeight: '24px'}}>
-        {nodeData.title}{nodeData.host_ids && nodeData.host_ids.length ? `（${nodeData.host_ids.length}）` : null}
+        {nodeData.title}{nodeData.self_host_ids && nodeData.self_host_ids.length ? `（${nodeData.self_host_ids.length}）` : null}
       </span>
     )
   }
@@ -66,7 +66,7 @@ export default observer(function (props) {
           <Tree.DirectoryTree
             selectedKeys={[group.key]}
             className={styles.dragBox}
-            treeData={store.selfTreeData}
+            treeData={store.treeData}
             titleRender={treeRender}
             onSelect={(_, {node}) => setGroup(node)}
           />

spug_web/src/pages/host/store.js

@@ -3,10 +3,9 @@
  * Copyright (c) <spug.dev@gmail.com>
  * Released under the AGPL-3.0 License.
  */
-import { observable, computed } from 'mobx';
+import { observable, computed, autorun } from 'mobx';
 import { message } from 'antd';
 import http from 'libs/http';
-import lds from 'lodash';
 
 class Store {
   @observable records = [];
@@ -26,6 +25,14 @@ class Store {
   @observable f_name;
   @observable f_host;
 
+  constructor() {
+    autorun(() => {
+      for (let item of this.treeData) {
+        this._updateCounter(item)
+      }
+    })
+  }
+
   @computed get counter() {
     const counter = {};
     for (let host of this.records) {
@@ -40,25 +47,9 @@ class Store {
     return counter
   }
 
-  @computed get selfTreeData() {
-    const treeData = lds.cloneDeep(this.treeData);
-    for (let item of treeData) {
-      this._updateCounter(item, true)
-    }
-    return treeData
-  }
-
-  @computed get allTreeData() {
-    const treeData = lds.cloneDeep(this.treeData);
-    for (let item of treeData) {
-      this._updateCounter(item, false)
-    }
-    return treeData
-  }
-
   @computed get dataSource() {
     let records = [];
-    if (this.group.host_ids) records = this.records.filter(x => this.group.host_ids.includes(x.id));
+    if (this.group.all_host_ids) records = this.records.filter(x => this.group.all_host_ids.includes(x.id));
     if (this.f_name) records = records.filter(x => x.name.toLowerCase().includes(this.f_name.toLowerCase()));
     if (this.f_host) records = records.filter(x => x.hostname.toLowerCase().includes(this.f_host.toLowerCase()));
     return records
@@ -111,14 +102,14 @@ class Store {
     this.selectorVisible = true;
   }
 
-  _updateCounter = (item, isSelf) => {
+  _updateCounter = (item) => {
-    let host_ids = this.counter[item.key] || [];
+    item.all_host_ids = item.self_host_ids = this.counter[item.key] || [];
     for (let child of item.children) {
-      const ids = this._updateCounter(child, isSelf)
+      const ids = this._updateCounter(child)
-      if (!isSelf) host_ids = host_ids.concat(ids)
+      item.all_host_ids = item.all_host_ids.concat(ids)
     }
-    item.host_ids = Array.from(new Set(host_ids));
+    item.all_host_ids = Array.from(new Set(item.all_host_ids));
-    return item.host_ids
+    return item.all_host_ids
   }
 }