merge master

src/Main.jsx

@@ -1,9 +1,18 @@
 import React, { useState, useEffect } from 'react'
 import { routes } from './routes'
-import { Layout, Menu } from 'antd'
+import {
+  Layout,
+  Menu,
+  Select,
+  Divider,
+  Space,
+  Button,
+  Modal,
+  Input,
+} from 'antd'
 import { Routes, Route, Link, Navigate, useLocation } from 'react-router-dom'
 import styled from 'styled-components'
-import { SettingFilled } from '@ant-design/icons'
+import { SettingFilled, PlusOutlined, ProjectOutlined } from '@ant-design/icons'
 const { Content, Sider, Header } = Layout
 
 const SidebarDiv = styled.div`
@@ -28,6 +37,17 @@ const SidebarDiv = styled.div`
     display: flex;
     justify-content: flex-end;
     align-items: center;
+    .projects {
+      color: #fff;
+      .ant-select-arrow {
+        color: #fff;
+      }
+    }
+    .line {
+      height: 24px;
+      margin: 0 15px;
+      border-left: 1px solid #454545;
+    }
     .setting {
       color: #fff;
       font-size: 20px;
@@ -43,10 +63,18 @@ const SidebarDiv = styled.div`
     line-height: 32px;
   }
 `
+const { Option } = Select
+
+const projects = ['项目1', '项目2', '项目3']
 
 const Main = () => {
   const { pathname } = useLocation()
   const [currentSide, setCurrentSide] = useState('1')
+  const [projectsList, setProjectsList] = useState(projects)
+  const [isAddProject, setIsAddProject] = useState(false)
+  const [projectSetting, setProjectSetting] = useState(false)
+  const [projectName, setProjectName] = useState(null)
+
   const menus = routes.map(item => {
     return {
       key: item.path,
@@ -82,11 +110,68 @@ const Main = () => {
     setCurrentSide(val.key)
   }
 
+  const addProject = () => {
+    setProjectsList([...projectsList, `项目${projectsList.length + 1}`])
+    setIsAddProject(false)
+    setProjectName(null)
+  }
+
+  const handleProjcet = () => {
+    setIsAddProject(false)
+    setProjectName(null)
+  }
+
+  const editProject = () => {
+    setProjectSetting(false)
+  }
+
+  const addProjectModal = (
+    <Modal
+      title="新建项目"
+      visible={isAddProject}
+      onOk={addProject}
+      okText="确认添加"
+      onCancel={handleProjcet}
+      cancelText="取消">
+      <Space style={{ padding: '10px 20px 30px' }}>
+        <span>项目名称：</span>
+        <Input
+          value={projectName}
+          onChange={e => {
+            setProjectName(e.target.value)
+          }}
+          style={{ width: '350px' }}
+        />
+      </Space>
+    </Modal>
+  )
+
+  const projectSettingModal = (
+    <Modal
+      title="项目设置"
+      visible={projectSetting}
+      width={'60%'}
+      onOk={editProject}
+      okText="确认"
+      onCancel={() => {
+        setProjectSetting(false)
+      }}
+      cancelText="取消">
+      <Space style={{ padding: '10px 20px 30px', display: 'flex' }}>
+        <span>项目名称：</span>
+        <Input style={{ width: '350px' }} />
+      </Space>
+      <Space style={{ padding: '10px 20px 30px', display: 'flex' }}>
+        <span>项目成员管理：</span>
+        <Button type="link">添加成员</Button>
+      </Space>
+    </Modal>
+  )
+
   return (
     <SidebarDiv>
       <Layout>
         <Header className="header">
-          {/* <SettingFilled className="setting" /> */}
         </Header>
         <Layout hasSider style={{ marginTop: '54px' }}>
           <Sider className="sidebar">
@@ -114,6 +199,8 @@ const Main = () => {
           </Content>
         </Layout>
       </Layout>
+      {addProjectModal}
+      {projectSettingModal}
     </SidebarDiv>
   )
 }

src/index.js

@@ -2,7 +2,9 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import './index.css'
 import 'antd/dist/antd.min.css'
+import zhCN from 'antd/es/locale/zh_CN'
 import App from './App'
+import { ConfigProvider } from 'antd'
 
 const container = document.getElementById('root')
-ReactDOM.render(<App />, container)
+ReactDOM.render(<ConfigProvider locale={zhCN}><App /></ConfigProvider>, container)

src/module/datasource/component/DatasourceManage.jsx

@@ -9,7 +9,7 @@ import {
   getDataSourceInfo,
 } from '../services'
 
-export default function DatasourceManage({ onRef }) {
+export default function DatasourceManage({ onRef, dataType }) {
   // 查看数据源弹窗是否可可视
   const [dataModalVisible, setDataModalVisible] = useState(false)
   const [dsModalVisible, setDsModalVisible] = useState(false)
@@ -31,6 +31,11 @@ export default function DatasourceManage({ onRef }) {
 
   const [currentDsId, setCurrentDsId] = useState(null)
   const [currentDsInfo, setCurrentDsInfo] = useState(null)
+  //选择表格项
+  const [selectedRowKeys, setSelectedRowKeys] = useState([])
+  const onSelectChange = newSelectedRowKeys => {
+    setSelectedRowKeys(newSelectedRowKeys)
+  }
 
   // 获取列表数据
   const fetchDataSourceList = async () => {
@@ -119,8 +124,8 @@ export default function DatasourceManage({ onRef }) {
     }
   }
 
-  // 表格项
-  const columns = [
+  // 数据源表格项
+  const ds_columns = [
     {
       title: '数据源名称',
       dataIndex: 'datasource_name',
@@ -185,6 +190,42 @@ export default function DatasourceManage({ onRef }) {
       ),
     },
   ]
+
+  //AIlab表格项
+  const ailab_columns = [
+    {
+      title: '数据表名称',
+      dataIndex: 'datatable_name',
+      key: 'datatable_name',
+      align: 'center',
+    },
+    {
+      title: '操作',
+      key: 'operation',
+      align: 'center',
+      width: '25%',
+      render: (_, record) => (
+        <Space size="middle">
+          <Button
+            type="link"
+            onClick={() => {
+              editData(record.key)
+            }}>
+            分享
+          </Button>
+          <Button
+            onClick={() => {
+              fetchTableNames(record.key)
+            }}
+            type="link"
+            disabled={tableWatcher}>
+            查看
+          </Button>
+        </Space>
+      ),
+    },
+  ]
+
   // 查看数据源弹窗取消
   const handledataModalCancel = () => {
     setDataModalVisible(false)
@@ -225,17 +266,47 @@ export default function DatasourceManage({ onRef }) {
     </Modal>
   )
 
+  const rowSelection = {
+    selectedRowKeys,
+    onChange: onSelectChange,
+    columnWidth: '100px',
+    selections: [
+      Table.SELECTION_ALL,
+      Table.SELECTION_INVERT,
+      Table.SELECTION_NONE,
+    ],
+  }
+
   // 最终渲染
   return (
-    <>
-      <Table
-        columns={columns}
-        dataSource={dataSourceList}
-        bordered
-        loading={dataLoading}
-      />
+    <div>
+      {dataType === '自添加' && (
+        <Table
+          columns={ds_columns}
+          dataSource={dataSourceList}
+          bordered
+          loading={dataLoading}
+        />
+      )}
+      {dataType === 'AIlab' && (
+        <Table
+          rowSelection={rowSelection}
+          columns={ailab_columns}
+          dataSource={dataSourceList}
+          bordered
+          loading={dataLoading}
+        />
+      )}
+      {dataType === '数据湖' && (
+        <Table
+          columns={ds_columns}
+          dataSource={dataSourceList}
+          bordered
+          loading={dataLoading}
+        />
+      )}
       {dataModal}
       {dsEditModal}
-    </>
+    </div>
   )
 }

src/module/datasource/page/DatasourceView.jsx

@@ -1,4 +1,4 @@
-import { Tabs, Button } from 'antd'
+import { Tabs, Button, Space, Select } from 'antd'
 import DataSourceManage from '../component/DatasourceManage.jsx'
 import DatasourceAdd from '../component/DatasourceAdd'
 import DatasourceSyncView from '../component/DatasourceSyncView'
@@ -26,6 +26,8 @@ export default function DatasourceView() {
   const [currentSyncPageSize, setCurrentSyncPageSize] = useState(10)
   const [currentLogPage, setCurrentLogPage] = useState(1)
   const [currentLogPageSize, setCurrentLogPageSize] = useState(10)
+  // 数据隔离
+  const [currentDataType, setCurrentDataType] = useState('自添加')
 
   useEffect(() => {
     if (state) {
@@ -53,11 +55,37 @@ export default function DatasourceView() {
     setCurrentLog(id)
     setCurrentKey('3')
   }
+
+  const changeDataType = val => {
+    setCurrentDataType(val)
+  }
+
   // Tab标签右边按钮
   const tabExtraBtn = () => {
     switch (currentKey) {
       case '1':
-        return <DatasourceAdd updateDataSource={updateDataSource} />
+        return (
+          <Space>
+            <Select
+              value={currentDataType}
+              onChange={changeDataType}
+              options={[
+                { value: '自添加', label: '自添加' },
+                { value: 'AIlab', label: 'AIlab' },
+                { value: '数据湖', label: '数据湖' },
+              ]}
+            />
+            {currentDataType === '自添加' && (
+              <DatasourceAdd updateDataSource={updateDataSource} />
+            )}
+            {currentDataType === 'AIlab' && (
+              <Button type="primary">创建数据表</Button>
+            )}
+            {currentDataType === '数据湖' && (
+              <Button type="primary">导入数据表</Button>
+            )}
+          </Space>
+        )
       case '2':
         return (
           <Link to="/datasource/sync-task">
@@ -84,7 +112,7 @@ export default function DatasourceView() {
           setCurrentLog(null)
         }}>
         <TabPane tab="数据源管理" key="1">
-          <DataSourceManage onRef={sourceRef} />
+          <DataSourceManage onRef={sourceRef} dataType={currentDataType} />
         </TabPane>
         <TabPane tab="同步配置" key="2">
           <DatasourceSyncView

src/module/tasklog/component/TaskLogWatcher.jsx

@@ -171,13 +171,16 @@ const TaskLogWatcher = () => {
   }
 
   const changeRefresh = e => {
-    if (e.target.checked) {
+    setAutoRefresh(e.target.checked)
+  }
+
+  useEffect(() => {
+    if (autoRefresh) {
       fetchTaskLog(selectJob)
     } else {
       clearTimeout(timeout)
     }
-    setAutoRefresh(e.target.checked)
-  }
+  }, [autoRefresh])
 
   const onClickRefresh = () => {
     fetchTaskLog(selectJob)

src/module/taskmgmt/component/TaskCreaterView.jsx

@@ -36,7 +36,7 @@ const TaskCreater = styled.div`
 
 const layout = {
   labelCol: {
-    span: 2,
+    span: 3,
   },
   wrapperCol: {
     span: 10,

src/module/taskmgmt/component/TaskForm.jsx

@@ -31,7 +31,7 @@ const RadioGroup = Radio.Group
 
 const layout = {
   labelCol: {
-    span: 2,
+    span: 3,
   },
   wrapperCol: {
     span: 10,