采集日志

src/view/Manage/DatasourceManage/Component/ContextManager.js

+import React from 'react';
+
+export const DatasourceContext = React.createContext();
\ No newline at end of file

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

-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
 import { Row, Col, Typography, Divider, Spin, Empty } from 'antd';
 
 import TaskItem from './TaskItem';
 import { dispatch } from '../../../../model';
+import { DatasourceContext } from './ContextManager';
 
 import './DatasourceItem.less';
 
 const DatasourceItem = (props) => {
-  const { data, onStartTask, onEditTask, onDeleteTask, expanded, refresh, refreshSuccess, scope } = props;
+  const { data, expanded, refresh, scope } = props;
   const [ tasks, setTasks ] = useState(null);
   const [ loading, setLoading ] = useState(false);
 
+  const { refreshTasksSuccess } = useContext(DatasourceContext);
+
   useEffect(() => {
     if (expanded && !tasks) {
       getTasks();
@@ -42,7 +45,7 @@ const DatasourceItem = (props) => {
       callback: data => {
         setLoading(false);
         setTasks(data);
-        refresh && refreshSuccess && refreshSuccess();
+        refresh && refreshTasksSuccess && refreshTasksSuccess();
       },
       error: () => {
         setLoading(false);
@@ -93,9 +96,6 @@ const DatasourceItem = (props) => {
                     <TaskItem 
                       key={index} 
                       data={task} 
-                      onStart={onStartTask}
-                      onEdit={onEditTask}
-                      onDelete={onDeleteTask}
                     />            
                   </Col>
                 );

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

@@ -6,7 +6,7 @@ import DatasourceItem from './DatasourceItem';
 
 const DatasourceList = (props) => {
 
-  const { loading, data, onEdit, onAddTask, onDelete, onStartTask, onEditTask, onDeleteTask, idBindTasksNeedRefresh, refreshTasksSuccess, scope } = props;
+  const { loading, data, onEdit, onAddTask, onDelete, idBindTasksNeedRefresh, scope } = props;
 
   const [ expandedBindId, setExpandedBindId ] = useState({});
 
@@ -69,7 +69,7 @@ const DatasourceList = (props) => {
                   </Space>
                 </div>
               }
-              description={ <DatasourceItem data={item} scope={scope} expanded={expanded} refresh={idBindTasksNeedRefresh===item.id} onStartTask={onStartTask} onEditTask={onEditTask} onDeleteTask={onDeleteTask} refreshSuccess={refreshTasksSuccess} /> }
+              description={ <DatasourceItem data={item} scope={scope} expanded={expanded} refresh={idBindTasksNeedRefresh===item.id} /> }
             />
           </List.Item>
         );

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

-import React from 'react';
+import React, { useContext } from 'react';
 import { Card, Typography, Space, Button, Tooltip } from 'antd';
-import { EditOutlined, DeleteOutlined, DatabaseOutlined } from '@ant-design/icons';
+import { EditOutlined, DeleteOutlined, DatabaseOutlined, FileOutlined } from '@ant-design/icons';
 
+import { DatasourceContext } from './ContextManager';
 import './TaskItem.less';
 
 const TaskItem = (props) => {
-  const { data, onStart, onEdit, onDelete } = props;
+  const { data } = props;
   
+  const { onStartTask, onLogTask, onEditTask, onDeleteTask } = useContext(DatasourceContext);
+
   return (
     <Card className='task-item'>
       <div style={{ height: 80, overflow: 'auto' }}>
@@ -23,13 +26,16 @@ const TaskItem = (props) => {
       <div className='d-flex mt-2'>
         <Space style={{ marginLeft: 'auto' }}>
           <Tooltip placement='bottom' title='抽取'>
-            <Button icon={<DatabaseOutlined />} size='small' onClick={() => { onStart && onStart(data); }} />
+          <Button icon={<DatabaseOutlined />} size='small' onClick={() => { onStartTask && onStartTask(data); }} />
+          </Tooltip>
+          <Tooltip placement='bottom' title='日志'>
+            <Button icon={<FileOutlined />} size='small' onClick={() => { onLogTask && onLogTask(data); }} />
           </Tooltip>
           <Tooltip placement='bottom' title='修改'>
-            <Button icon={<EditOutlined />} size='small' onClick={() => { onEdit && onEdit(data); }} />
+            <Button icon={<EditOutlined />} size='small' onClick={() => { onEditTask && onEditTask(data); }} />
           </Tooltip>
           <Tooltip placement='bottom' title='删除'>
-            <Button icon={<DeleteOutlined />} size='small' onClick={() => { onDelete && onDelete(data); }} />
+            <Button icon={<DeleteOutlined />} size='small' onClick={() => { onDeleteTask && onDeleteTask(data); }} />
           </Tooltip>
         </Space>
       </div>

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

+import React, { useState, useEffect } from 'react';
+import { Modal, Table, Typography, Spin, Empty, Button } from 'antd';
+
+import { dispatch } from '../../../../model';
+
+const TaskLogModal = (props) => {
+  const { visible, onCancel, id } = props;
+
+  const [ stateDatas, setStateDatas ] = useState([]); 
+  const [ taskTracersBindStateId, setTaskTracersBindStateId ] = useState([]);
+  const [ expandedRowKeys, setExpandedRowKeys ] = useState([]);
+
+  const columns = [
+    {
+      title: '序号',
+      dataIndex: 'key',
+      render: (text, record, index) => {
+        return (index+1).toString();
+      },
+      width:80
+    },
+    {
+      title: '执行状态',
+      dataIndex: 'stateDesc',
+      ellipsis: true,
+    },
+    {
+      title: '开始时间',
+      dataIndex: 'tsDate',
+      ellipsis: true,
+    },
+    {
+      title: '结束时间',
+      dataIndex: 'etsDate',
+      ellipsis: true
+    }
+  ];
+
+  useEffect(() => {
+
+    if (visible) {
+      getTaskStates();
+    }
+    
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ visible ])
+
+  const getTaskStates = () => {
+    dispatch({
+      type: 'datasource.getTaskStates',
+      payload: {
+        harvestingTaskId: id
+      },
+      callback: data => {
+        setStateDatas(data||[]);
+      }
+    })
+  }
+
+  const reset = () => {
+    setStateDatas([]);
+    setTaskTracersBindStateId([]);
+    setExpandedRowKeys([]);
+  }
+
+  return (
+    <Modal
+      className='task-report-modal'
+      forceRender
+      title={'日志详情'}
+      visible={visible}
+      width={1000}
+      onCancel={() => { 
+        reset();
+        onCancel && onCancel() 
+      }}
+      footer = {
+        <Button
+          key="1" 
+          type="primary"
+          onClick={() => {
+            reset();
+            onCancel && onCancel() 
+          }}
+        >
+        取消
+        </Button>
+      }
+    >
+      <Table
+        className='mt-5'
+        columns={columns} 
+        rowKey={'id'}
+        dataSource={stateDatas||[]}
+        pagination={false} 
+        sticky
+        expandable={{
+          expandedRowRender: record => {
+
+            let _tracer = null;
+            (taskTracersBindStateId||[]).forEach(item => {
+              if (item.key === record.id) {
+                _tracer = item.value||[];
+              }
+            })
+
+            return (
+              <Spin spinning={_tracer===null}>
+              {
+                (_tracer||[]).length === 0 && <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无日志" />
+              }
+              {
+                _tracer && _tracer.map((_item, index) => {
+                  return (
+                    <Typography.Paragraph key={index} >
+                    {_item.value||''}
+                    </Typography.Paragraph>
+                  )
+                })
+              }
+              </Spin>
+            );
+          },
+          expandedRowKeys,
+          onExpand: (expanded, record) => {
+            let exsit = false;
+            (taskTracersBindStateId||[]).forEach(item => {
+              if (item.key === record.id) {
+                exsit = true;
+              }
+            })
+
+            const newExpandedKeys = [...expandedRowKeys];
+            if (expanded) {
+              newExpandedKeys.push(record.id||'');
+            } else {
+              const index = newExpandedKeys.indexOf(record.id||'');
+              newExpandedKeys.splice(index, 1);
+            }
+
+            setExpandedRowKeys([...newExpandedKeys]);
+
+            if (expanded && !exsit) {
+              setTaskTracersBindStateId([...taskTracersBindStateId, { key: record.id, value: record.executionTraces||[] }]);
+            }
+
+          }
+        }}
+      />
+    </Modal>
+  );
+}
+
+export default TaskLogModal;

src/view/Manage/DatasourceManage/Component/TaskReportModal.jsx → 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';
 
 import { dispatch, dispatchLatest } from '../../../../model';
-import './TaskReportModal.less';
+import './TaskLogsModal.less';
 
 const { Meta } = Card;
 const { RangePicker } = DatePicker;
 
-const TaskReportModal = (props) => {
+const TaskLogsModal = (props) => {
   const { visible, onCancel, scope, scopes } = props;
 
   const [ summaryDatas, setSummaryDatas ] = useState([]);
@@ -19,6 +19,8 @@ const TaskReportModal = (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 TaskReportModal = (props) => {
         })
 
         setReportDetail(data||{});
+
+        setFilterReportData(data?(data.datas||[]).filter(item => (item.scope||'').indexOf(keyword)!==-1 || (item.databaseName).indexOf(keyword)!==-1):[]);
       }
     })
   }
@@ -148,16 +152,23 @@ const TaskReportModal = (props) => {
       setTaskTracersBindStateId([]);
       setCurrentSummaryData(item);
       setExpandedRowKeys([]);
-      getTaskReportDetail(item.params);
+      getTaskReportDetail(item.params, (rangeValue.length)>=1?rangeValue[0]: null, (rangeValue.length)===2?rangeValue[1]: null);
     }
   }
 
+  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 TaskReportModal = (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={{
@@ -288,4 +309,4 @@ const TaskReportModal = (props) => {
   );
 }
 
-export default TaskReportModal;
+export default TaskLogsModal;
\ No newline at end of file

src/view/Manage/DatasourceManage/index.jsx

@@ -3,10 +3,12 @@ import { Space, Select, Button, Modal, Cascader } from 'antd';
 
 import DatasourceList from './Component/DatasourceList';
 import UpdateDatasourceModal from './Component/UpdateDatasourceModal';
-import TaskReportModal from './Component/TaskReportModal';
+import TaskLogsModal from './Component/TaskLogsModal';
+import TaskLogModal from './Component/TaskLogModal';
 import UpdateTaskModal from './Component/UpdateTaskModal';
 import { dispatch } from '../../../model';
 import { showMessage } from '../../../util';
+import { DatasourceContext } from './Component/ContextManager.js';
 
 import './index.less';
 
@@ -27,7 +29,8 @@ const DatasourceManage = () => {
   const [ updateDatasourceModalAction, setUpdateDatasourceModalAction ] = useState('');
   const [ updateTaskModalVisible, setUpdateTaskModalVisible ] = useState(false);
   const [ updateTaskModalAction, setUpdateTaskModalAction ] = useState('');
-  const [ taskReportModalVisible, setTaskReportModalVisible ] = useState(false);
+  const [ taskLogsModalVisible, setTaskLogsModalVisible ] = useState(false);
+  const [ taskLogModalVisible, setTaskLogModalVisible ] = useState(false);
   const [ currentDatasourceId, setCurrentDatasourceId ] = useState('');
   const [ currentDatasourceIdBindTasksNeedRefresh, setCurrentDatasourceIdBindTasksNeedRefresh ] = useState('');
   const [ currentTaskId, setCurrentTaskId ] = useState('');
@@ -136,18 +139,18 @@ const DatasourceManage = () => {
     setFilterDatasources((datasources||[]).filter(item=>value==='all'||item.type===value));
   }
 
-  const showTaskReport = () => {
+  const showTaskLogs = () => {
 
     if (loadingDatabases) {
       showMessage('info', '正在获取系统信息,请稍后');
       return;
     }
 
-    setTaskReportModalVisible(true);
+    setTaskLogsModalVisible(true);
   }
 
-  const onTaskReportModalCancel = () => {
-    setTaskReportModalVisible(false);
+  const onTaskLogsModalCancel = () => {
+    setTaskLogsModalVisible(false);
   }
 
   const addDatasource = () => {
@@ -224,6 +227,11 @@ const DatasourceManage = () => {
     setUpdateTaskModalVisible(true);
   }
 
+  const logTask = (task) => {
+    setCurrentTaskId(task.id);
+    setTaskLogModalVisible(true);
+  }
+
   const deleteTask = (task) => {
     modal.confirm({
       title: '是否确认删除该任务?',
@@ -249,11 +257,22 @@ const DatasourceManage = () => {
     refresh && setCurrentDatasourceIdBindTasksNeedRefresh(currentDatasourceId);
   }
 
+  const onTaskLogModalCancel = () => {
+    setTaskLogModalVisible(false);
+  }
+
   const refreshTasksSuccess = () => {
     setCurrentDatasourceIdBindTasksNeedRefresh('');
   }
 
   return (
+    <DatasourceContext.Provider value={{
+      refreshTasksSuccess: refreshTasksSuccess,
+      onStartTask: startTask,
+      onLogTask: logTask,
+      onEditTask: editTask,
+      onDeleteTask: deleteTask,
+    }}>
     <div className='datasource-manage' style={{ backgroundColor: '#fff' }}>
       <div
         className='d-flex p-3'
@@ -288,7 +307,7 @@ const DatasourceManage = () => {
           </Select>
         </Space>
         <Space>
-          <Button type='primary' onClick={showTaskReport}>日志报告</Button>
+          <Button type='primary' onClick={showTaskLogs}>日志报告</Button>
           <Button type='primary' onClick={addDatasource}>新增数据源</Button>
         </Space>
       </div>
@@ -302,18 +321,14 @@ const DatasourceManage = () => {
           onEdit={editDatasource}
           onAddTask={addTask}
           onDelete={deleteDatasource}
-          onStartTask={startTask}
-          onEditTask={editTask}
-          onDeleteTask={deleteTask}
-          refreshTasksSuccess={refreshTasksSuccess}
         />
       </div>
 
-      <TaskReportModal 
-        visible={taskReportModalVisible}
+      <TaskLogsModal 
+        visible={taskLogsModalVisible}
         scope={selectedScope}
         scopes={scopes}
-        onCancel={onTaskReportModalCancel}
+        onCancel={onTaskLogsModalCancel}
       />
 
       <UpdateDatasourceModal 
@@ -332,9 +347,16 @@ const DatasourceManage = () => {
         action={updateTaskModalAction}
         onCancel={onUpdateTaskModalVisibleCancel}
       />
+
+      <TaskLogModal 
+        visible={taskLogModalVisible}
+        id={currentTaskId}
+        onCancel={onTaskLogModalCancel}
+      />
       
       {contextHolder}  
     </div>
+    </DatasourceContext.Provider>
   );
 }