调度进度

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

@@ -27,7 +27,7 @@ const ScheduleCURDModal = (props) => {
     if (visible) {
       getSchedules();
     }
-    
+
     //eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ visible ])
 
@@ -253,7 +253,7 @@ const ScheduleCURDModal = (props) => {
       visible={visible}
       title={title}
       width={1000}
-      maskClosable={false}
+      maskClosable={true}
       onCancel={cancel}
       footer={footer}
     >

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

 import React, { useContext } from 'react';
-import { Card, Typography, Space, Button, Tooltip } from 'antd';
+import { Card, Typography, Space, Button, Tooltip, Progress } from 'antd';
 import { EditOutlined, DeleteOutlined, DatabaseOutlined, FileOutlined, ScheduleOutlined } from '@ant-design/icons';
 
 import { DatasourceContext } from './ContextManager';
@@ -8,11 +8,11 @@ import './TaskItem.less';
 const TaskItem = (props) => {
   const { data } = props;
   
-  const { onStartTask, onLogTask, onEditTask, onDeleteTask, onScheduleShow } = useContext(DatasourceContext);
+  const { onStartTask, onLogTask, onEditTask, onDeleteTask, onScheduleShow, tasksProgress } = useContext(DatasourceContext);
 
   return (
     <Card className='task-item'>
-      <div style={{ height: 80, overflow: 'auto' }}>
+      <div>
       {
         data && (data.targetConfParameters||[]).map((param, index) => {
           return (
@@ -23,6 +23,15 @@ const TaskItem = (props) => {
         })
       }
       </div>
+      {
+        tasksProgress && tasksProgress[data.id] ?
+         <div className='mt-1 flex' style={{ alignItems: 'center', justifyContent: 'space-between' }}>
+          <span style={{ marginRight: 5 }}>抽取进度: </span>
+          <div style={{ flex: 1 }}>
+          <Progress percent={tasksProgress[data.id]} status="active" size='small' />
+          </div>
+        </div> : <div className='mt-1' style={{ height: 22 }} ></div>
+      }
       <div className='d-flex mt-2'>
         <Space style={{ marginLeft: 'auto' }}>
           <Tooltip placement='bottom' title='定时调度'>

src/view/Manage/DatasourceManage/index.jsx

@@ -40,11 +40,20 @@ const DatasourceManage = (props) => {
   const [ currentDatasourceId, setCurrentDatasourceId ] = useState('');
   const [ currentDatasourceIdBindTasksNeedRefresh, setCurrentDatasourceIdBindTasksNeedRefresh ] = useState('');
   const [ currentTaskId, setCurrentTaskId ] = useState('');
+  const [ tasksProgress, setTasksProgress ] = useState({});
 
   const [modal, contextHolder] = Modal.useModal();
 
   useEffect(() => {
     getScopesAndSupportDatabases();
+
+    const interval = setInterval(() => {
+      getAllTasksProgress();
+    }, 5000);
+
+    return () => {
+      clearInterval(interval);
+    }
     //eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
@@ -136,6 +145,15 @@ const DatasourceManage = (props) => {
     })
   }
 
+  const getAllTasksProgress = () => {
+    dispatch({
+      type: 'datasource.getAllTaskProgress',
+      callback: data => {
+        setTasksProgress(data||{});
+      }
+    })
+  }
+
   const onScopeChange = (value) => {
     setSelectedScope(value);
   }
@@ -288,6 +306,7 @@ const DatasourceManage = (props) => {
       onLogTask: logTask,
       onEditTask: editTask,
       onDeleteTask: deleteTask,
+      tasksProgress: tasksProgress
     }}>
     <div className='datasource-manage' style={{ backgroundColor: '#fff' }}>
       <div