feat: 日志

package.json

@@ -11,6 +11,7 @@
     "add": "^2.0.6",
     "antd": "^4.22.4",
     "axios": "^0.27.2",
+    "moment": "^2.29.4",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/module/datasource/component/DatasourceLog.jsx

@@ -1,5 +1,7 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { Table, Space } from 'antd'
+import { getJoblog } from '../services'
+import moment from 'moment'
 
 const DatasourceLog = () => {
   // 初始化日志列表
@@ -12,28 +14,44 @@ const DatasourceLog = () => {
   const columns = [
     {
       title: '同步ID',
-      dataIndex: 'id',
-      key: 'id',
+      dataIndex: 'jobId',
+      key: 'jobId',
     },
     {
       title: '调度时间',
-      dataIndex: 'scheduleTime',
-      key: 'scheduleTime',
+      dataIndex: 'triggerTime',
+      key: 'triggerTime',
     },
     {
       title: '调度结果',
-      dataIndex: 'scheduleResult',
-      key: 'scheduleResult',
+      dataIndex: 'triggerResult',
+      key: 'triggerResult',
+      render: code => (
+        <span
+          style={{
+            color: code === 0 ? '#FF4D4F' : code === 1 ? '#52C41A' : '#4A4A4A',
+          }}>
+          {code === 0 ? '失败' : code === 1 ? '成功' : '无'}
+        </span>
+      ),
     },
     {
       title: '执行时间',
-      dataIndex: 'executionTime',
-      key: 'executionTime',
+      dataIndex: 'handleTime',
+      key: 'handleTime',
     },
     {
       title: '执行结果',
-      dataIndex: 'executionResult',
-      key: 'executionResult',
+      dataIndex: 'handleResult',
+      key: 'handleResult',
+      render: code => (
+        <span
+          style={{
+            color: code === 0 ? '#FF4D4F' : code === 1 ? '#52C41A' : '#4A4A4A',
+          }}>
+          {code === 0 ? '失败' : code === 1 ? '成功' : '无'}
+        </span>
+      ),
     },
     {
       title: '操作',
@@ -61,6 +79,28 @@ const DatasourceLog = () => {
       ),
     },
   ]
+
+  const fetchJoblog = async () => {
+    const { data } = await getJoblog()
+    if (data.code === 200) {
+      const list = data.data.items.map(item => {
+        return {
+          key: item.id,
+          jobId: item.job_id,
+          triggerTime: moment(item.trigger_time).format('YYYY.MM.DD HH:MM'),
+          triggerResult: item.trigger_code,
+          handleTime: moment(item.handle_time).format('YYYY.MM.DD HH:MM'),
+          handleResult: item.handle_code,
+        }
+      })
+      setLogList(list)
+    }
+  }
+
+  useEffect(() => {
+    fetchJoblog()
+  }, [])
+
   return (
     <Table
       columns={columns}

src/module/datasource/component/DrawFormConfig.jsx

@@ -1,119 +1,128 @@
-import React, { useEffect, useState } from "react";
-import { Form, Select, Input } from "antd";
+import React, { useState, useMemo } from 'react'
+import { Form, Select, Input } from 'antd'
 
-const DATASOURCE_TYPE_MYSQL = 'mysql'
+export default function DrawFormConfig({ drawDataForm, dataSourceList }) {
+  const [datasourceType, setDatasourceType] = useState(null)
 
-export default function DrawFormConfig ({drawDataForm}) {
-  const [datasourceType, setDatasourceType] = useState(DATASOURCE_TYPE_MYSQL)
-  
-  useEffect(() => {
-    if (drawDataForm.getFieldValue('datasource_name')) {
-      setDatasourceType(drawDataForm.getFieldValue('datasource_name'))
-    }
-  }, [])
+  const datasources = useMemo(() => {
+    return dataSourceList.map(item => {
+      return {
+        label: item.datasource_name,
+        value: item.id,
+        key: item.id,
+        datasource: item.datasource,
+      }
+    })
+  }, [dataSourceList])
 
   return (
     <>
-    <p style={{fontWeight: 600, borderLeft: '3px solid #1881DA', paddingLeft: '12px'}}>配置提取源</p>
-    <Form
-      name="drawForm"
-      form={drawDataForm}
-      labelCol={{
-        span: 2,
-      }}
-      wrapperCol={{
-        span: 6,
-      }}
-      initialValues={{
-        datasource_name: DATASOURCE_TYPE_MYSQL
-      }}
-    >
-      <Form.Item
-        label="选择数据源"
-        name="datasource_name"
-        rules={[
-          {
-            required: true,
-            message: '请选择数据源!',
-          },
-        ]}
-      >
-        <Select
-          options={[
-            {label: 'My SQL', value: 'mysql'},
-            {label: 'hive', value: 'hive'}
-          ]}
-          onSelect={(val) => {setDatasourceType(val)}}
-          allowClear
-        />
-      </Form.Item>
-      <Form.Item
-        label="选择表"
-        name="datasource_form"
-        rules={[
-          {
-            required: true,
-            message: '请选择表',
-          },
-        ]}
-      >
-        <Select options={[]} allowClear />
-      </Form.Item>
-      { datasourceType === 'mysql' ? 
-        <>
-          <Form.Item label="查询字段" name="query_field" wrapperCol={{span: 10}}>
-            <Input.TextArea rows={5}/>
-          </Form.Item>
-          <Form.Item label="切分主键" name="datasource_mainkey">
-            <Select options={[]} allowClear />
-          </Form.Item>
-          <Form.Item label="条件语句" name="centence" wrapperCol={{span: 10}}>
-            <Input.TextArea rows={5}/>
-          </Form.Item>
-        </> : <>
-          <Form.Item
-            label="选择路径"
-            name="dataRoute"
-            wrapperCol={{span: 10}}
-            rules={[
-              {
-                required: true,
-                message: '请选择路径!',
-              },
-            ]}>
-            <Input.TextArea rows={5}/>
-          </Form.Item>
-          <Form.Item
-            label="HDFS"
-            name="datasource_hdfs"
-            rules={[
-              {
-                required: true,
-                message: '请输入HDFS',
-              },
-            ]}
-          >
-            <Input placeholder="hdfs namenode节点地址" />
-          </Form.Item>
-          <Form.Item
-            label="选择表"
-            name="file_type"
-            rules={[
-              {
-                required: true,
-                message: '请选择文件类型',
-              },
-            ]}
-          >
-            <Select options={[]} allowClear placeholder="文件的类型" />
-          </Form.Item>
-          <Form.Item label="分隔符" name="datasource_partition">
-            <Input placeholder="读取字段的分隔符" />
-          </Form.Item>
-        </>
-      }
-      
-    </Form>
+      <p
+        style={{
+          fontWeight: 600,
+          borderLeft: '3px solid #1881DA',
+          paddingLeft: '12px',
+        }}>
+        配置提取源
+      </p>
+      <Form
+        name="drawForm"
+        form={drawDataForm}
+        labelCol={{
+          span: 2,
+        }}
+        wrapperCol={{
+          span: 6,
+        }}>
+        <Form.Item
+          label="选择数据源"
+          name="datasource_name"
+          rules={[
+            {
+              required: true,
+              message: '请选择数据源!',
+            },
+          ]}>
+          <Select
+            options={datasources}
+            onSelect={val => {
+              console.log(val)
+              setDatasourceType(val)
+            }}
+            allowClear
+          />
+        </Form.Item>
+        <Form.Item
+          label="选择表"
+          name="datasource_form"
+          rules={[
+            {
+              required: true,
+              message: '请选择表',
+            },
+          ]}>
+          <Select options={[]} allowClear />
+        </Form.Item>
+        {datasourceType === 'mysql' ? (
+          <>
+            <Form.Item
+              label="查询字段"
+              name="query_field"
+              wrapperCol={{ span: 10 }}>
+              <Input.TextArea rows={5} />
+            </Form.Item>
+            <Form.Item label="切分主键" name="datasource_mainkey">
+              <Select options={[]} allowClear />
+            </Form.Item>
+            <Form.Item
+              label="条件语句"
+              name="centence"
+              wrapperCol={{ span: 10 }}>
+              <Input.TextArea rows={5} />
+            </Form.Item>
+          </>
+        ) : (
+          <>
+            <Form.Item
+              label="选择路径"
+              name="dataRoute"
+              wrapperCol={{ span: 10 }}
+              rules={[
+                {
+                  required: true,
+                  message: '请选择路径!',
+                },
+              ]}>
+              <Input.TextArea rows={5} />
+            </Form.Item>
+            <Form.Item
+              label="HDFS"
+              name="datasource_hdfs"
+              rules={[
+                {
+                  required: true,
+                  message: '请输入HDFS',
+                },
+              ]}>
+              <Input placeholder="hdfs namenode节点地址" />
+            </Form.Item>
+            <Form.Item
+              label="选择表"
+              name="file_type"
+              rules={[
+                {
+                  required: true,
+                  message: '请选择文件类型',
+                },
+              ]}>
+              <Select options={[]} allowClear placeholder="文件的类型" />
+            </Form.Item>
+            <Form.Item label="分隔符" name="datasource_partition">
+              <Input placeholder="读取字段的分隔符" />
+            </Form.Item>
+          </>
+        )}
+      </Form>
     </>
   )
-}
+}

src/module/datasource/component/SyncTaskAdd.jsx

@@ -1,19 +1,22 @@
 import { Steps, Button, Space, Form, Card } from 'antd'
 import DrawFormConfig from './DrawFormConfig'
 import LoadFormConfig from './LoadFormConfig'
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import styled from 'styled-components'
+import { getDataSourceList } from '../services'
 
 const { Step } = Steps
 
 const SyncTask = styled.div`
   padding: 20px;
-  background: rgb(242,242,246)
+  background: rgb(242, 242, 246);
 `
 
 export default function SyncTaskAdd() {
   // 步骤数
   const [currentStep, setCurrentStep] = useState(0)
+  // 初始化数据源列表数据 constructor
+  const [dataSourceList, setDataSourceList] = useState([])
 
   // 上一步/下一步
   const changeStep = num => {
@@ -30,6 +33,25 @@ export default function SyncTaskAdd() {
     console.log('submit')
   }
 
+  // 获取列表数据
+  const fetchDataSourceList = async () => {
+    const { data } = await getDataSourceList()
+    if (data.code === 200) {
+      const list = data.data.items.map(item => {
+        return {
+          key: item.id,
+          datasource_name: item.datasource_name,
+          datasource: item.datasource,
+        }
+      })
+      setDataSourceList(list)
+    }
+  }
+
+  useEffect(() => {
+    fetchDataSourceList()
+  }, [])
+
   return (
     <SyncTask>
       <Card bordered={false}>
@@ -43,9 +65,23 @@ export default function SyncTaskAdd() {
 
         {/* 表单项 */}
         {/* 配置提取源 */}
-        {currentStep === 0 ? <DrawFormConfig drawDataForm={drawDataForm} /> : ''}
+        {currentStep === 0 ? (
+          <DrawFormConfig
+            drawDataForm={drawDataForm}
+            dataSourceList={dataSourceList}
+          />
+        ) : (
+          ''
+        )}
         {/* 配置加载源 */}
-        {currentStep === 1 ? <LoadFormConfig loadDataForm={loadDataForm} /> : ''}
+        {currentStep === 1 ? (
+          <LoadFormConfig
+            loadDataForm={loadDataForm}
+            dataSourceList={dataSourceList}
+          />
+        ) : (
+          ''
+        )}
 
         {/* 按扭操作 */}
         <Space style={{ margin: '20px' }}>
@@ -75,7 +111,6 @@ export default function SyncTaskAdd() {
           )}
         </Space>
       </Card>
-      
     </SyncTask>
   )
 }

src/module/datasource/services/index.js

@@ -52,4 +52,9 @@ export const getTableData = params => request({
 export const getTableSchema = params => request({
   url: `/jpt/datasource/table_schema?ds_id=${params.id}&table_name=${params.table_name}`,
   method: 'post',
+})
+
+export const getJoblog = () => request({
+  url: `/jpt/joblog`,
+  method: 'get',
 })