日志报告

src/view/Manage/DatasourceManage/Component/TaskLogsModal.jsx

 import React, { useState, useEffect } from 'react';
-import { Modal, Row, Col, Card, Table, Typography, Spin, Empty, Button, DatePicker } from 'antd';
+import { Modal, Row, Col, Card, Table, Typography, Spin, Empty, Button, DatePicker, Input } from 'antd';
 import classNames from 'classnames';
 import 'moment/locale/zh-cn';
 import locale from 'antd/es/date-picker/locale/zh_CN';
@@ -19,6 +19,8 @@ const TaskLogsModal = (props) => {
   const [ taskTracersBindStateId, setTaskTracersBindStateId ] = useState([]);
   const [ rangeValue, setRangeValue ] = useState([]);
   const [ expandedRowKeys, setExpandedRowKeys ] = useState([]);
+  const [ keyword, setKeyword ] = useState('');
+  const [ filterReportData, setFilterReportData ] = useState([]);
 
   useEffect(() => {
 
@@ -108,6 +110,8 @@ const TaskLogsModal = (props) => {
         })
 
         setReportDetail(data||{});
+
+        setFilterReportData(data?(data.datas||[]).filter(item => (item.scope||'').indexOf(keyword)!==-1 || (item.databaseName).indexOf(keyword)!==-1):[]);
       }
     })
   }
@@ -152,12 +156,19 @@ const TaskLogsModal = (props) => {
     }
   }
 
+  const onSearchInputChange = (e) => {
+    setKeyword(e.target.value||'');
+    setFilterReportData((reportDetail.datas||[]).filter(item => (item.scope||'').indexOf(e.target.value||'')!==-1 || (item.databaseName||'').indexOf(e.target.value||'')!==-1));
+  }
+
   const reset = () => {
     setSummaryDatas([]);
     setCurrentSummaryData({});
     setReportDetail({});
     setTaskTracersBindStateId([]);
     setExpandedRowKeys([]);
+    setFilterReportData([]);
+    setKeyword('');
   }
 
   return (
@@ -224,11 +235,21 @@ const TaskLogsModal = (props) => {
         })
       }  
       </Row>
+      <div className='d-flex mt-5' style={{ alignItems: 'center' }}>
+        <span className='mr-3'>日志搜索:</span>
+        <Input 
+          placeholder="请输入系统名称或者数据源名称" 
+          allowClear 
+          value={keyword}
+          onChange={onSearchInputChange} 
+          style={{ width: 250 }}
+        />
+      </div>
       <Table
-        className='mt-5'
+        className='mt-3'
         columns={reportDetail.title||[]} 
         rowKey={'taskStateId'}
-        dataSource={reportDetail.datas||[]}
+        dataSource={filterReportData||[]}
         pagination={false} 
         sticky
         expandable={{