Leo il y a 2 ans
Parent
commit
5b7b96c881

+ 2 - 2
src/module/datasource/component/DatasourceData.jsx

@@ -83,14 +83,14 @@ const DatasourceData = props => {
   }
 
   const handleContent = contentData => {
-    const colsList = contentData.header?.map(item => {
+    const colsList = contentData?.header?.map(item => {
       return {
         title: item,
         dataIndex: item,
         key: item,
       }
     })
-    const dataList = contentData.content?.map((item, index) => {
+    const dataList = contentData?.content?.map((item, index) => {
       const row = {}
       row['key'] = index + 1
       item.forEach((val, index) => {

+ 2 - 1
src/module/datasource/page/DatasourceView.jsx

@@ -4,7 +4,7 @@ import DatasourceAdd from '../component/DatasourceAdd'
 import DatasourceSyncView from '../component/DatasourceSyncView'
 import DatasourceLog from '../component/DatasourceLog'
 import React, { useState } from 'react'
-import { Link } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
 const { TabPane } = Tabs
 
@@ -13,6 +13,7 @@ const Datasource = styled.div`
 `
 
 export default function DatasourceView() {
+  const navigate = useNavigate()
   // 数据源管理ref
   const sourceRef = React.createRef()
   const logRef = React.createRef()

+ 46 - 14
src/module/tasklog/component/TaskLogWatcher.jsx

@@ -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>