调整日志查看页面

src/module/tasklog/component/TaskLogWatcher.jsx

@@ -1,9 +1,10 @@
+import { Card, Table} from 'antd'
 import React, { useEffect, useState } from 'react'
 import { useLocation } from 'react-router-dom'
 import styled from 'styled-components'
 // import { getOnceJoblog } from '../services/index'
 
-const LogWrapper = styled.div`
+/* const LogWrapper = styled.div`
   padding: 30px;
   width: 100%;
   height: 800px;
@@ -15,11 +16,65 @@ const LogWrapper = styled.div`
     color: #638691;
     padding: 8px 10px;
   }
+` */
+const LogWrapper = styled.div`
+  padding: 20px;
+  display: flex;
+  height: 800px;
+  column-gap: 20px;
+  .job-list {
+    flex: 1;
+  }
+  .log-info {
+    width: 920px
+  }
+  .log {
+    background-color: #012b36;
+    height: 100%;
+    width: 100%;
+    overflow-y: scroll;
+    color: #638691;
+    padding: 8px 10px;
+  }
+  .ant-table-selection-column {
+    display: none !important;
+  }
 `
 
+
 const TaskLogWatcher = () => {
   const { state } = useLocation()
   const [logData, setLogData] = useState(null)
+  // 初始化作业列表
+  const [jobList, setJobList] = useState([])
+  // 选中的作业
+  const [selectJob, setSelectJob] = useState(null)
+
+  const columns = [
+    {
+      title: '序号',
+      dataIndex: 'index',
+      key: 'index'
+    },
+    {
+      title: '作业名称',
+      dataIndex: 'jobName',
+      key: 'jobName'
+    },
+    {
+      title: '执行结果',
+      dataIndex: 'handleResult',
+      key: 'handleResult',
+      render: code => (
+        <span
+          style={{
+            color: code === 0 ? '#FF4D4F' : code === 1 ? '#52C41A' : '#4A4A4A',
+          }}>
+          {code === 0 ? '失败' : code === 1 ? '成功' : '无'}
+        </span>
+      ),
+    },
+  ]
 
   const fetchOnceJoblog = async () => {
     // const { data } = await getOnceJoblog(state.id)
@@ -31,13 +86,78 @@ const TaskLogWatcher = () => {
 2022-08-17 09:28:30,2161 "/opt/conda/envs/py38/lib/python3.8/site-packages/pyhive/hive.py",line 449, INFO:describe default.my_test_p
 2022-08-17 09:28:30,2401 "/opt/conda/envs/py38/lib/python3.8/site-packages/pyhive/hive.py",line 449, INFO:describe default.my_test_p
 `)
+    setJobList([
+      {
+        key: '1',
+        index: '1',
+        jobName: '作业名称1',
+        handleResult: 1
+      },
+      {
+        key: '2',
+        index: '2',
+        jobName: '作业名称2',
+        handleResult: 0
+      },
+      {
+        key: '3',
+        index: '3',
+        jobName: '作业名称3',
+        handleResult: 1
+      },
+      {
+        key: '4',
+        index: '4',
+        jobName: '作业名称4',
+        handleResult: 1
+      },
+    ])
   }
+
   useEffect(() => {
     fetchOnceJoblog()
   }, [state])
+
   return (
     <LogWrapper>
-      <pre className="log">{logData}</pre>
+      {/* <pre className="log">{logData}</pre> */}
+      <div className='job-list'>
+        <Card
+          size='small'
+          title='作业列表'
+          bordered={false}
+          style={{height: '100%', width: '100%'}}
+          headStyle={{padding: '6px 10px', fontSize: '13px'}}
+        >
+          <Table
+            columns={columns}
+            dataSource={jobList}
+            showHeader={false}
+            onRow={record => {
+              return {
+                onClick: e => {
+                  setSelectJob(record.key)
+                  setLogData('test: ' + record.jobName)
+                }
+              }
+            }}
+            rowSelection={{
+              type: 'radio',
+              columnWidth: '0',
+              selectedRowKeys: [selectJob]
+            }}
+          />
+        </Card>
+      </div>
+      <div className='log-info'>
+        <Card
+          bordered={false}
+          style={{height: '100%', width: '100%'}}
+          bodyStyle={{height: '100%', width: '100%'}}
+        >
+          <pre className="log">{logData}</pre>
+        </Card>
+      </div>
     </LogWrapper>
   )
 }