[Feature-692][web] Add history version comparison in data development (#693)

* add DataDev's historyVersion diff

* feat DataDev's historyVersion diff

dlink-web/src/components/Studio/StudioRightTool/StudioHistory/data.d.ts

 export type TaskHistoryTableListItem = {
   id: number,
   versionId: number,
+  statement: string,
   createTime: Date,
 };
 

dlink-web/src/components/Studio/StudioRightTool/StudioHistory/index.tsx

-import {useRef, useState} from "react";
-import {MinusSquareOutlined} from '@ant-design/icons';
+import React, {useRef, useState} from "react";
+import {MinusSquareOutlined, RocketOutlined, SyncOutlined} from '@ant-design/icons';
 import ProTable, {ActionType, ProColumns} from "@ant-design/pro-table";
-import {Button, Col, Drawer, Modal, Row, Space, Tooltip} from 'antd';
+import {Button, Col, Drawer, Modal, Row, Tag, Tooltip} from 'antd';
 import ProDescriptions from '@ant-design/pro-descriptions';
-import {queryData, handleOption} from "@/components/Common/crud";
-import {
-  TaskHistoryTableListItem
-} from "@/components/Studio/StudioRightTool/StudioHistory/data";
+import {handleOption, queryData} from "@/components/Common/crud";
+import {Scrollbars} from "react-custom-scrollbars";
+import {TaskHistoryTableListItem} from "@/components/Studio/StudioRightTool/StudioHistory/data";
 import {StateType} from "@/pages/DataStudio/model";
 import {connect} from "umi";
-import {Scrollbars} from 'react-custom-scrollbars';
+import moment from "moment";
+import {MonacoDiffEditor} from "react-monaco-editor";
+
 
 const url = '/api/task/version';
+
+
 const StudioHistory = (props: any) => {
-  const {current, toolHeight, dispatch} = props;
+  const {current, toolHeight} = props;
   const [row, setRow] = useState<TaskHistoryTableListItem>();
   const actionRef = useRef<ActionType>();
 
+  const [versionDiffVisible, setVersionDiffVisible] = useState<boolean>(false);
+  const [versionDiffRow, setVersionDiffRow] = useState<TaskHistoryTableListItem>();
+
   if (current.key) {
     actionRef.current?.reloadAndRest?.();
   }
 
+  const cancelHandle = () => {
+    setVersionDiffVisible(false);
+  }
+
+  const VersionDiffForm = () => {
+
+    let leftTitle = "Version：【" + versionDiffRow?.versionId + "】   创建时间: 【" + (moment(versionDiffRow?.createTime).format('YYYY-MM-DD HH:mm:ss')) + "】";
+    let rightTitle = "Version：【当前编辑版本】 创建时间: 【" + (moment(current?.task?.createTime).format('YYYY-MM-DD HH:mm:ss')) + "】 最后更新时间: 【" + (moment(current?.task?.updateTime).format('YYYY-MM-DD HH:mm:ss')) + "】"
+
+    let originalValue= versionDiffRow?.statement;
+    let currentValue= current?.task?.statement;
+
+    return (
+      <>
+        <Modal title={"Version Diff"} visible={versionDiffVisible} destroyOnClose={true} width={"85%"}
+               bodyStyle={{height: "700px"}}
+               onCancel={() => {
+                 cancelHandle();
+               }}
+               footer={[
+                 <Button key="back" onClick={() => {
+                   cancelHandle();
+                 }}>
+                   关闭
+                 </Button>,
+               ]}>
+          <div style={{display:"flex",flexDirection:"row", justifyContent: "space-between"}}>
+            <Tag color="green" style={{height:"20px"}} >
+              <RocketOutlined/> {leftTitle}
+            </Tag>
+            <Tag color="blue" style={{height:"20px"}}>
+              <SyncOutlined spin/> {rightTitle}
+            </Tag>
+          </div><br/>
+          <Scrollbars style={{height: "98%"}}>
+            <React.StrictMode>
+              <MonacoDiffEditor language={"sql"} theme={"vs-dark"} original={originalValue} value={currentValue}/>
+            </React.StrictMode>
+          </Scrollbars>
+        </Modal>
+      </>
+    )
+  }
+
   const columns: ProColumns<TaskHistoryTableListItem>[] = [
     // {
     //   title: 'id',
@@ -51,9 +101,14 @@ const StudioHistory = (props: any) => {
       valueType: 'option',
       align: "center",
       render: (text, record, index) => (
-        <Space size="middle">
+        <>
           <Button type="link" onClick={() => onRollBackVersion(record)}>回滚</Button>
-        </Space>
+          <Button type="link" title={"只和当前编辑器内的内容对比"} onClick={() => {
+            setVersionDiffRow(record)
+            setVersionDiffVisible(true)
+          }}>版本对比</Button>
+        </>
+
       )
     },
   ];
@@ -62,7 +117,7 @@ const StudioHistory = (props: any) => {
   const onRollBackVersion = (row: TaskHistoryTableListItem) => {
     Modal.confirm({
       title: '回滚Flink SQL版本',
-      content: `确定回滚Flink SQL版本至【${row.versionId === "" ? row.versionId : row.versionId}】吗？`,
+      content: `确定回滚Flink SQL版本至【${row.versionId}】吗？`,
       okText: '确认',
       cancelText: '取消',
       onOk: async () => {
@@ -120,6 +175,7 @@ const StudioHistory = (props: any) => {
           )}
         </Drawer>
       </Scrollbars>
+      {VersionDiffForm()}
     </>
   );
 };