improve

spug_web/src/pages/host/Detail.js

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) OpenSpug Organization. https://github.com/openspug/spug
+ * Copyright (c) <spug.dev@gmail.com>
+ * Released under the AGPL-3.0 License.
+ */
 import React, { useState, useEffect, useRef } from 'react';
 import { observer } from 'mobx-react';
 import { Drawer, Descriptions, List, Button, Input, Select, DatePicker, Tag, message } from 'antd';

spug_web/src/pages/host/Selector.js

@@ -1,6 +1,12 @@
+/**
+ * Copyright (c) OpenSpug Organization. https://github.com/openspug/spug
+ * Copyright (c) <spug.dev@gmail.com>
+ * Released under the AGPL-3.0 License.
+ */
 import React, { useEffect, useState } from 'react';
 import { observer } from 'mobx-react';
-import { Modal, Row, Col, Tree, Table, Button, Alert } from 'antd';
+import { Modal, Row, Col, Tree, Table, Button, Space, Input } from 'antd';
+import { includes } from 'libs';
 import store from './store';
 import styles from './index.module.less';
 
@@ -9,6 +15,7 @@ export default observer(function (props) {
   const [group, setGroup] = useState({});
   const [dataSource, setDataSource] = useState([]);
   const [selectedRowKeys, setSelectedRowKeys] = useState(props.selectedRowKeys || []);
+  const [fKey, setFKey] = useState();
 
   useEffect(() => {
     if (!store.treeData.length) {
@@ -20,11 +27,11 @@ export default observer(function (props) {
   }, [])
 
   useEffect(() => {
-    if (group.key) {
-      const records = store.records.filter(x => group.self_host_ids.includes(x.id));
+    let records = store.records;
+    if (group.key) records = records.filter(x => group.self_host_ids.includes(x.id));
+    if (fKey) records = records.filter(x => includes(x.name, fKey) || includes(x.hostname, fKey));
     setDataSource(records)
-    }
-  }, [group])
+  }, [group, fKey])
 
   function treeRender(nodeData) {
     return (
@@ -81,12 +88,13 @@ export default observer(function (props) {
           />
         </Col>
         <Col span={18}>
-          {selectedRowKeys.length > 0 && (
-            <Alert
-              style={{marginBottom: 12}}
-              message={`已选择 ${selectedRowKeys.length} 台主机`}
-              action={<Button type="link" onClick={() => setSelectedRowKeys([])}>取消选择</Button>}/>
-          )}
+          <div style={{display: 'flex', justifyContent: 'space-between', marginBottom: 12}}>
+            <Input style={{width: 260}} placeholder="输入检索" onChange={e => setFKey(e.target.value)}/>
+            <Space hidden={selectedRowKeys.length === 0}>
+              <div>已选择 {selectedRowKeys.length} 台主机</div>
+              <Button type="link" onClick={() => setSelectedRowKeys([])}>取消选择</Button>
+            </Space>
+          </div>
           <Table
             rowKey="id"
             dataSource={dataSource}