[fix] fix some bug #2182

DataLinkDC · Aug 9, 2023 · 65ea93a · 65ea93a
1 parent 6b4dd62
commit 65ea93a
Show file tree

Hide file tree

Showing 9 changed files with 404 additions and 290 deletions.
diff --git a/dinky-admin/src/main/resources/db/db-h2.sql b/dinky-admin/src/main/resources/db/db-h2.sql
@@ -1522,7 +1522,7 @@ CREATE TABLE `dinky_user` (
 ) ENGINE = InnoDB ROW_FORMAT = Dynamic;
 INSERT INTO `dinky_user`
 VALUES (1, 'admin', '21232f297a57a5a743894a0e4a801fc3', 'Admin', NULL,0
-       , NULL, NULL, 1, 0, '2022-12-13 05:27:19'
+       , NULL, NULL, 1,1, 0, '2022-12-13 05:27:19'
        , '2022-12-13 05:27:19');
 DROP TABLE IF EXISTS `dinky_user_role`;
 CREATE TABLE `dinky_user_role` (
@@ -1544,7 +1544,7 @@ CREATE TABLE `dinky_user_tenant` (
                                    `update_time` datetime(0) NULL DEFAULT NULL COMMENT 'update time'
 ) ENGINE = InnoDB ROW_FORMAT = Dynamic;
 INSERT INTO `dinky_user_tenant` (`id`, `user_id`, `tenant_id`, `create_time`, `update_time`)
-VALUES (1, 1, 1, current_time, current_time);
+VALUES (1, 1, 1,1, current_time, current_time);
 DROP TABLE IF EXISTS `metadata_column`;
 CREATE TABLE `metadata_column` (
                                  `column_name` varchar(255) NOT NULL COMMENT 'column name',

diff --git a/dinky-web/src/pages/DataStudio/FooterContainer/JobRunningModal/index.tsx b/dinky-web/src/pages/DataStudio/FooterContainer/JobRunningModal/index.tsx
@@ -0,0 +1,60 @@
+/*
+ *
+ *   Licensed to the Apache Software Foundation (ASF) under one or more
+ *   contributor license agreements.  See the NOTICE file distributed with
+ *   this work for additional information regarding copyright ownership.
+ *   The ASF licenses this file to You under the Apache License, Version 2.0
+ *   (the "License"); you may not use this file except in compliance with
+ *   the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ *
+ */
+
+import {Col, Modal, Progress, Row, Space} from "antd";
+import React from "react";
+import {JobRunningMsgType} from "@/pages/DataStudio/model";
+import {StopTwoTone} from "@ant-design/icons";
+
+type JobRunningModalProps = {
+    visible: boolean;
+    onCancel: () => void;
+    onOk: () => void;
+    value: JobRunningMsgType;
+}
+const JobRunningModal :React.FC<JobRunningModalProps> =(props) => {
+
+    const {visible, onCancel, onOk, value} = props;
+
+    return <>
+        <Modal
+            title={`Job ${value?.jobName} is running`}
+            open={visible}
+            onOk={onOk}
+            width={'50%'}
+            centered
+            onCancel={onCancel}
+            footer={null}
+        >
+            <Space direction="vertical" style={{width: '100%'}}>
+                <Row gutter={[12,12]}>
+                    <Col span={23}>
+                        <Progress showInfo strokeLinecap={'round'} percent={100} status="active" strokeColor={{ from: '#108ee9', to: '#87d068' }} />
+                    </Col>
+                    <Col span={1}>
+                        <StopTwoTone />
+                    </Col>
+                </Row>
+
+            </Space>
+        </Modal>
+    </>
+}
+
+export default JobRunningModal;
diff --git a/dinky-web/src/pages/DataStudio/FooterContainer/index.tsx b/dinky-web/src/pages/DataStudio/FooterContainer/index.tsx
@@ -4,101 +4,127 @@ import {Button, GlobalToken, Space} from "antd";
 import {connect} from "@@/exports";
 import {getCurrentTab} from "@/pages/DataStudio/function";
 import {getSseData} from "@/services/api";
-import {API_CONSTANTS} from "@/services/constants";
 import {l} from "@/utils/intl";
+import JobRunningModal from "@/pages/DataStudio/FooterContainer/JobRunningModal";
 
 export type FooterContainerProps = {
-  token: GlobalToken
+    token: GlobalToken
 }
 type ButtonRoute = {
-  text: React.ReactNode,
-  title: string,
-  onClick?: () => void,
-  isShow?: (type?: TabsPageType, subType?: string, data?: any) => boolean;
+    text: React.ReactNode,
+    title: string,
+    onClick?: () => void,
+    isShow?: (type?: TabsPageType, subType?: string, data?: any) => boolean;
 }
 
 
 const FooterContainer: React.FC<FooterContainerProps & StateType> = (props) => {
-  const {footContainer, token, tabs} = props;
-  const eventSource = getSseData("/api/sse/getJvmInfo");
-  const [memDetails, setMemDetails] = useState(footContainer.memDetails);
-  useEffect(() => {
-    eventSource.onmessage = (event) => {
-      const data = JSON.parse(event.data);
-      setMemDetails(Number(data["heapUsed"] / 1024 / 1024).toFixed(0) + "/" + Number(data["total"] / 1024 / 1024).toFixed(0) + "M")
-    }
-    return () => {
-      eventSource.close()
-    }
-  }, [])
+    const {footContainer: {
+        memDetails,
+        codeType,
+        lineSeparator,
+        codeEncoding,
+        space,
+        codePosition,
+        jobRunningMsg,
+    }, token, tabs} = props;
+
+    const [viewJobRunning , setViewJobRunning] = useState(false);
+
+
+    const eventSource = getSseData("/api/sse/getJvmInfo");
+    const [memDetailInfo, setMemDetailInfo] = useState(memDetails);
+    useEffect(() => {
+        eventSource.onmessage = (event) => {
+            const data = JSON.parse(event.data);
+            setMemDetailInfo(Number(data["heapUsed"] / 1024 / 1024).toFixed(0) + "/" + Number(data["total"] / 1024 / 1024).toFixed(0) + "M")
+        }
+        return () => {
+            eventSource.close()
+        }
+    }, []);
 
-  const currentTab = getCurrentTab(tabs.panes, tabs.activeKey);
-  const route: ButtonRoute[] = [
-    {
-      text: <span
-        style={{backgroundColor: token.colorBgBase}}>{memDetails}</span>,
-      title: l("pages.datastudio.footer.memDetails", "", {
-        max: memDetails.split("/")[1],
-        used: memDetails.split("/")[0]
-      }),
-      isShow: () => true
-    },
-    {
-      text: footContainer.codeType,
-      title: l("pages.datastudio.footer.codeType") + footContainer.codeType,
-      isShow: (type) => TabsPageType.project === type
-    },
-    {
-      text: footContainer.lineSeparator,
-      title: l("pages.datastudio.footer.lineSeparator") + footContainer.lineSeparator,
-      isShow: (type) => TabsPageType.project === type
-    },
-    {
-      text: footContainer.codeEncoding,
-      title: l("pages.datastudio.footer.codeEncoding") + footContainer.codeEncoding,
-      isShow: (type) => TabsPageType.project === type
-    },
-    {
-      text: "Space: " + footContainer.space,
-      title: "Space: " + footContainer.space,
-      isShow: (type) => TabsPageType.project === type
-    },
-    {
-      text: footContainer.codePosition[0] + ":" + footContainer.codePosition[1],
-      title: l("pages.datastudio.footer.codePosition", "", {
-        Ln: footContainer.codePosition[0],
-        Col: footContainer.codePosition[1]
-      }),
-      isShow: (type) => TabsPageType.project === type
-    },
-  ]
-  return (
-    <div style={{
-      backgroundColor: token.colorFill,
-      height: VIEW.footerHeight,
-      width: "100%",
-      display: "flex",
-      paddingInline: 10
-    }}>
-      <Space style={{direction: "ltr", width: "50%"}}>
-        <Button size={"small"} type={"text"} block style={{paddingInline: 4}}>Welcome to Dinky !</Button>
-      </Space>
-      <Space style={{direction: "rtl", width: "50%"}} size={4} direction={"horizontal"}>
-        {route.filter(x => {
-          if (x.isShow) {
-            return x.isShow(currentTab?.type, currentTab?.subType, currentTab?.params);
-          }
-          return false
+
+    const currentTab = getCurrentTab(tabs.panes, tabs.activeKey);
+    const route: ButtonRoute[] = [
+        {
+            text: <span style={{backgroundColor: token.colorBgBase}}>{memDetailInfo}</span>,
+            title: l("pages.datastudio.footer.memDetails", "", {
+                max: memDetailInfo.split("/")[1],
+                used: memDetailInfo.split("/")[0]
+            }),
+            isShow: () => true
+        },
+        {
+            text: codeType,
+            title: l("pages.datastudio.footer.codeType") + codeType,
+            isShow: (type) => TabsPageType.project === type
+        },
+        {
+            text: lineSeparator,
+            title: l("pages.datastudio.footer.lineSeparator") + lineSeparator,
+            isShow: (type) => TabsPageType.project === type
+        },
+        {
+            text: codeEncoding,
+            title: l("pages.datastudio.footer.codeEncoding") + codeEncoding,
+            isShow: (type) => TabsPageType.project === type
+        },
+        {
+            text: "Space: " + space,
+            title: "Space: " + space,
+            isShow: (type) => TabsPageType.project === type
+        },
+        {
+            text: codePosition[0] + ":" + codePosition[1],
+            title: l("pages.datastudio.footer.codePosition", "", {
+                Ln: codePosition[0],
+                Col: codePosition[1]
+            }),
+            isShow: (type) => TabsPageType.project === type
+        },
+    ];
+
+
+    /**
+     * render footer right info
+     * @param {ButtonRoute[]} routes
+     * @returns {JSX.Element[]}
+     */
+    const renderFooterRightInfo = (routes: ButtonRoute[]) => {
+        return routes.filter(x => {
+            if (x.isShow) {
+                return x.isShow(currentTab?.type, currentTab?.subType, currentTab?.params);
+            }
+            return false
         })
-          .map((item, index) => {
-            return <Button size={"small"} type={"text"} block style={{paddingInline: 4}} key={index}
-                           onClick={item.onClick} title={item.title}>{item.text}</Button>
-          })}
-      </Space>
-    </div>
-  )
+            .map((item, index) => (
+                <Button size={"small"} type={"text"} block style={{paddingInline: 4}} key={index}
+                        onClick={item.onClick} title={item.title}>{item.text}</Button>
+            ))
+    }
+
+    return <>
+        <div style={{
+            backgroundColor: token.colorFill,
+            height: VIEW.footerHeight,
+            width: "100%",
+            display: "flex",
+            paddingInline: 10
+        }}>
+            <Space style={{direction: "ltr", width: "30%%"}}>
+                <Button size={"small"} type={"text"} block style={{paddingInline: 4}}>Welcome to Dinky !</Button>
+            </Space>
+            <Space onClick={()=>setViewJobRunning(true)} style={{direction: 'rtl', width: "30%"}}>
+                {jobRunningMsg.jobName} - {jobRunningMsg.runningLog}
+            </Space>
+            <Space style={{direction: "rtl", width: "70%"}} size={4}
+                   direction={"horizontal"}>{renderFooterRightInfo(route)}</Space>
+        </div>
+        <JobRunningModal value={jobRunningMsg} visible={viewJobRunning} onCancel={()=>setViewJobRunning(false)} onOk={()=>setViewJobRunning(false)} />
+    </>
 }
 export default connect(({Studio}: { Studio: StateType }) => ({
-  footContainer: Studio.footContainer,
-  tabs: Studio.tabs
+    footContainer: Studio.footContainer,
+    tabs: Studio.tabs
 }))(FooterContainer);