任务报告

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

@@ -7,7 +7,7 @@ import { dispatch } from '../../../../model';
 import './DatasourceItem.less';
 
 const DatasourceItem = (props) => {
-  const { data, onStartTask, onEditTask, onDeleteTask, expanded, refresh, refreshSuccess, scope } = props;
+  const { data, onStartTask, onEditTask, onLogTask, onDeleteTask, expanded, refresh, refreshSuccess, scope } = props;
   const [ tasks, setTasks ] = useState(null);
   const [ loading, setLoading ] = useState(false);
 
@@ -95,6 +95,7 @@ const DatasourceItem = (props) => {
                       data={task} 
                       onStart={onStartTask}
                       onEdit={onEditTask}
+                      onLog={onLogTask}
                       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, onStartTask, onEditTask, onLogTask, onDeleteTask, idBindTasksNeedRefresh, refreshTasksSuccess, 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} onStartTask={onStartTask} onEditTask={onEditTask} onLogTask={onLogTask} onDeleteTask={onDeleteTask} refreshSuccess={refreshTasksSuccess} /> }
             />
           </List.Item>
         );

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

 import React 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 './TaskItem.less';
 
 const TaskItem = (props) => {
-  const { data, onStart, onEdit, onDelete } = props;
+  const { data, onStart, onEdit, onDelete, onLog } = props;
   
   return (
     <Card className='task-item'>
@@ -25,6 +25,9 @@ const TaskItem = (props) => {
           <Tooltip placement='bottom' title='抽取'>
             <Button icon={<DatabaseOutlined />} size='small' onClick={() => { onStart && onStart(data); }} />
           </Tooltip>
+          <Tooltip placement='bottom' title='日志'>
+            <Button icon={<FileOutlined />} size='small' onClick={() => { onLog && onLog(data); }} />
+          </Tooltip>
           <Tooltip placement='bottom' title='修改'>
             <Button icon={<EditOutlined />} size='small' onClick={() => { onEdit && onEdit(data); }} />
           </Tooltip>

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

+import React, { useState, useEffect } from 'react';
+import { Modal, Table, Typography, Spin, Empty, Button, DatePicker } 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;
\ No newline at end of file

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

@@ -5,12 +5,12 @@ 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([]);
@@ -288,4 +288,4 @@ const TaskReportModal = (props) => {
   );
 }
 
-export default TaskReportModal;
+export default TaskLogsModal;
\ No newline at end of file

src/view/Manage/DatasourceManage/index.jsx

@@ -3,7 +3,8 @@ 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';
@@ -27,7 +28,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 +138,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 +226,11 @@ const DatasourceManage = () => {
     setUpdateTaskModalVisible(true);
   }
 
+  const logTask = (task) => {
+    setCurrentTaskId(task.id);
+    setTaskLogModalVisible(true);
+  }
+
   const deleteTask = (task) => {
     modal.confirm({
       title: '是否确认删除该任务?',
@@ -249,6 +256,10 @@ const DatasourceManage = () => {
     refresh && setCurrentDatasourceIdBindTasksNeedRefresh(currentDatasourceId);
   }
 
+  const onTaskLogModalCancel = () => {
+    setTaskLogModalVisible(false);
+  }
+
   const refreshTasksSuccess = () => {
     setCurrentDatasourceIdBindTasksNeedRefresh('');
   }
@@ -288,7 +299,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>
@@ -304,16 +315,17 @@ const DatasourceManage = () => {
           onDelete={deleteDatasource}
           onStartTask={startTask}
           onEditTask={editTask}
+          onLogTask={logTask}
           onDeleteTask={deleteTask}
           refreshTasksSuccess={refreshTasksSuccess}
         />
       </div>
 
-      <TaskReportModal 
-        visible={taskReportModalVisible}
+      <TaskLogsModal 
+        visible={taskLogsModalVisible}
         scope={selectedScope}
         scopes={scopes}
-        onCancel={onTaskReportModalCancel}
+        onCancel={onTaskLogsModalCancel}
       />
 
       <UpdateDatasourceModal 
@@ -333,6 +345,12 @@ const DatasourceManage = () => {
         onCancel={onUpdateTaskModalVisibleCancel}
       />
 
+      <TaskLogModal 
+        visible={taskLogModalVisible}
+        id={currentTaskId}
+        onCancel={onTaskLogModalCancel}
+      />
+      
       {contextHolder}  
     </div>
   );