|
@@ -1,4 +1,4 @@
|
|
|
-import { Card, message, Table } from 'antd'
|
|
|
+import { Button, Card, Checkbox, message, Space, Table } from 'antd'
|
|
|
import React, { useEffect, useState } from 'react'
|
|
|
import { useLocation } from 'react-router-dom'
|
|
|
import styled from 'styled-components'
|
|
@@ -14,11 +14,16 @@ const LogWrapper = styled.div`
|
|
|
flex: 1;
|
|
|
}
|
|
|
.log-info {
|
|
|
- width: 920px;
|
|
|
+ width: 70%;
|
|
|
+ }
|
|
|
+ .refresh {
|
|
|
+ height: 50px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
}
|
|
|
.log {
|
|
|
background-color: #012b36;
|
|
|
- height: 100%;
|
|
|
+ height: calc(100% - 50px);
|
|
|
width: 100%;
|
|
|
overflow-y: scroll;
|
|
|
color: #638691;
|
|
@@ -52,7 +57,11 @@ const TaskLogWatcher = () => {
|
|
|
// 初始化节点列表
|
|
|
const [jobList, setJobList] = useState([])
|
|
|
// 选中的作业
|
|
|
- const [selectJob, setSelectJob] = useState(null)
|
|
|
+ const [selectJob, setSelectJob] = useState({})
|
|
|
+ // 表格Loading状态
|
|
|
+ const [dataLoading, setDataLoading] = useState(false)
|
|
|
+
|
|
|
+ const [autoRefresh, setAutoRefresh] = useState(false)
|
|
|
|
|
|
const columns = [
|
|
|
{
|
|
@@ -92,12 +101,14 @@ const TaskLogWatcher = () => {
|
|
|
]
|
|
|
|
|
|
const fetchAllTask = async () => {
|
|
|
+ setDataLoading(true)
|
|
|
const { data } = await getAllTask(state.id)
|
|
|
if (data.code === 200) {
|
|
|
formatSingleTask(data.data)
|
|
|
} else {
|
|
|
message.error(data.msg)
|
|
|
}
|
|
|
+ setDataLoading(false)
|
|
|
}
|
|
|
|
|
|
const formatSingleTask = data => {
|
|
@@ -120,19 +131,20 @@ const TaskLogWatcher = () => {
|
|
|
}
|
|
|
|
|
|
const onClickTableNode = async record => {
|
|
|
- fetchTaskLog({
|
|
|
+ fetchTaskLog(record)
|
|
|
+ setSelectJob(record)
|
|
|
+ }
|
|
|
+
|
|
|
+ const fetchTaskLog = async record => {
|
|
|
+ const params = {
|
|
|
job_id: record.job_id,
|
|
|
task_id: record.task_id,
|
|
|
af_run_id: record.af_run_id,
|
|
|
- })
|
|
|
- setSelectJob(record.key)
|
|
|
- }
|
|
|
-
|
|
|
- const fetchTaskLog = async params => {
|
|
|
+ }
|
|
|
const { data } = await getTaskLog(params)
|
|
|
if (data.code === 200) {
|
|
|
setLogData(data.data.log)
|
|
|
- if (!['success', 'failed'].includes(data.data.status)) {
|
|
|
+ if (!['success', 'failed'].includes(data.data.status) && autoRefresh) {
|
|
|
timeout = setTimeout(() => {
|
|
|
fetchTaskLog(params)
|
|
|
}, 3000)
|
|
@@ -142,6 +154,19 @@ const TaskLogWatcher = () => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ const changeRefresh = e => {
|
|
|
+ if (e.target.checked) {
|
|
|
+ fetchTaskLog(selectJob)
|
|
|
+ } else {
|
|
|
+ clearTimeout(timeout)
|
|
|
+ }
|
|
|
+ setAutoRefresh(e.target.checked)
|
|
|
+ }
|
|
|
+
|
|
|
+ const onClickRefresh = () => {
|
|
|
+ fetchTaskLog(selectJob)
|
|
|
+ }
|
|
|
+
|
|
|
useEffect(() => {
|
|
|
fetchAllTask()
|
|
|
}, [state])
|
|
@@ -158,6 +183,7 @@ const TaskLogWatcher = () => {
|
|
|
dataSource={jobList}
|
|
|
showHeader={false}
|
|
|
className="node_table"
|
|
|
+ loading={dataLoading}
|
|
|
pagination={{ position: ['none', 'none'] }}
|
|
|
onRow={record => {
|
|
|
return {
|
|
@@ -167,13 +193,12 @@ const TaskLogWatcher = () => {
|
|
|
rowSelection={{
|
|
|
type: 'radio',
|
|
|
columnWidth: '0',
|
|
|
- selectedRowKeys: [selectJob],
|
|
|
+ selectedRowKeys: [selectJob.key],
|
|
|
}}
|
|
|
/>
|
|
|
)
|
|
|
return (
|
|
|
<LogWrapper>
|
|
|
- {/* <pre className="log">{logData}</pre> */}
|
|
|
<div className="job-list">
|
|
|
<Card
|
|
|
size="small"
|
|
@@ -185,7 +210,6 @@ const TaskLogWatcher = () => {
|
|
|
fontSize: '14px',
|
|
|
fontWeight: '700',
|
|
|
}}>
|
|
|
- {/* {taskType === '单作业离线任务' ? singleTable : multiTree} */}
|
|
|
{singleTable}
|
|
|
</Card>
|
|
|
</div>
|
|
@@ -194,6 +218,14 @@ const TaskLogWatcher = () => {
|
|
|
bordered={false}
|
|
|
style={{ height: '100%', width: '100%' }}
|
|
|
bodyStyle={{ height: '100%', width: '100%' }}>
|
|
|
+ <div className="refresh">
|
|
|
+ <Space>
|
|
|
+ <Checkbox onChange={changeRefresh} checked={autoRefresh}>
|
|
|
+ 自动刷新
|
|
|
+ </Checkbox>
|
|
|
+ <Button onClick={onClickRefresh}>刷新</Button>
|
|
|
+ </Space>
|
|
|
+ </div>
|
|
|
<pre className="log">{logData}</pre>
|
|
|
</Card>
|
|
|
</div>
|