[Feature][scaleph-ui-react] upgrade flink sql web online editor (#621)

* fix: 调试请求接口 * fix: 添加执行结果 * fix: 完善执行结果 * fix: 调试执行sql结果 --------- Co-authored-by: bailongsen <[email protected]>
flowerfine · Oct 1, 2023 · 3cdadc5 · 3cdadc5
1 parent 8a47056
commit 3cdadc5
Show file tree

Hide file tree

Showing 12 changed files with 362 additions and 420 deletions.
diff --git a/scaleph-ui-react/package.json b/scaleph-ui-react/package.json
@@ -53,6 +53,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@monaco-editor/react": "^4.4.6",
     "@umijs/route-utils": "^2.0.0",
+    "ali-react-table": "^2.6.1",
     "antd": "^4.23.2",
     "classnames": "^2.3.0",
     "lodash": "^4.17.0",

diff --git a/scaleph-ui-react/src/models/executionResult.ts b/scaleph-ui-react/src/models/executionResult.ts
@@ -0,0 +1,11 @@
+import { useState } from 'react';
+
+const useGlobalModel = () => {
+  const [executionData, setExecutionData] = useState<string>('');
+
+  return {
+    executionData,
+    setExecutionData,
+  };
+};
+export default useGlobalModel;
diff --git a/scaleph-ui-react/src/pages/Project/Workspace/Artifact/Sql/CodeEditor/EditMenu/indexNew.tsx b/scaleph-ui-react/src/pages/Project/Workspace/Artifact/Sql/CodeEditor/EditMenu/indexNew.tsx
diff --git a/scaleph-ui-react/src/pages/Project/Workspace/Artifact/Sql/CodeEditor/Editor/index.less b/scaleph-ui-react/src/pages/Project/Workspace/Artifact/Sql/CodeEditor/Editor/index.less
@@ -16,28 +16,28 @@
     align-items: center;
   }
 
-    .runButton {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      width: 70px;
-      height: 28px;
-      font-size: 12px;
-      color: #fff;
-      font-family:Arial;
-      border-radius: 5px;
-      margin-right: 20px;
-      >img{
-        width: 14px;
-        height: 14px;
-      }
-    }
-    .saveButton {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 5px;
-      width: 70px;
-      height: 28px;
+  .runButton {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 70px;
+    height: 28px;
+    font-size: 12px;
+    color: #fff;
+    font-family:Arial;
+    border-radius: 5px;
+    margin-right: 20px;
+    >img{
+      width: 14px;
+      height: 14px;
     }
+  }
+  .saveButton {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 5px;
+    width: 70px;
+    height: 28px;
+  }
 }
diff --git a/scaleph-ui-react/src/pages/Project/Workspace/Artifact/Sql/CodeEditor/Editor/index.tsx b/scaleph-ui-react/src/pages/Project/Workspace/Artifact/Sql/CodeEditor/Editor/index.tsx
@@ -1,16 +1,16 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { Editor, languages } from '@monaco-editor/react';
+import { Editor } from '@monaco-editor/react';
 import { Button, message } from 'antd';
-import { useIntl } from 'umi';
 import { language } from 'monaco-editor/esm/vs/basic-languages/sql/sql';
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import React, { useEffect, useRef, useState } from 'react';
 import * as sqlFormatter from 'sql-formatter';
+import { useIntl, useModel } from 'umi';
 
-import { WORKSPACE_CONF } from "@/constant";
+import { WORKSPACE_CONF } from '@/constant';
 import { WsFlinkArtifactSql } from '@/services/project/typings';
-import { WsFlinkKubernetesSessionClusterService } from "@/services/project/WsFlinkKubernetesSessionClusterService";
-import { WsFlinkSqlGatewayService } from "@/services/project/WsFlinkSqlGatewayService";
-import { FlinkArtifactSqlService } from "@/services/project/WsFlinkArtifactSqlService";
+import { FlinkArtifactSqlService } from '@/services/project/WsFlinkArtifactSqlService';
+import { WsFlinkKubernetesSessionClusterService } from '@/services/project/WsFlinkKubernetesSessionClusterService';
+import { WsFlinkSqlGatewayService } from '@/services/project/WsFlinkSqlGatewayService';
 import { useLocation } from 'react-router-dom';
 import styles from './index.less';
 
@@ -24,14 +24,19 @@ const CodeEditor: React.FC = () => {
   const intl = useIntl(); //语言切换
   const [sessionClusterId, setSessionClusterId] = useState<string>();
   const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
+  const { setExecutionData } = useModel('executionResult'); //存储执行结果
 
   useEffect(() => {
-    setSqlScript(flinkArtifactSql.script);
+    setSqlScript(flinkArtifactSql?.script);
     const projectId = localStorage.getItem(WORKSPACE_CONF.projectId);
     (async () => {
-      const resSessionClusterId = await WsFlinkKubernetesSessionClusterService.getSqlGatewaySessionClusterId(projectId);
+      const resSessionClusterId =
+        await WsFlinkKubernetesSessionClusterService.getSqlGatewaySessionClusterId(projectId);
       setSessionClusterId(resSessionClusterId);
     })();
+    return () => {
+      setExecutionData('');
+    };
   }, []);
 
   // 点击运行获取选中或者全部值
@@ -42,9 +47,13 @@ const CodeEditor: React.FC = () => {
     if (selection && !selection.isEmpty()) {
       const selectedValue = editorRef.current.getModel()?.getValueInRange(selection);
       // console.log("选中的值:", selectedValue);
-      const catalogArray = await WsFlinkSqlGatewayService.executeSqlList(sessionClusterId, { sql: selectedValue || '', configuration: {} });
+      const catalogArray = await WsFlinkSqlGatewayService.executeSqlList(sessionClusterId, {
+        sql: selectedValue || '',
+        configuration: {},
+      });
       if (catalogArray) {
         message.success(`${intl.formatMessage({ id: 'RequestSuccessful' })}`, 1);
+        setExecutionData(catalogArray);
       }
     } else {
       const fullValue = editorRef.current.getModel()?.getValue();
@@ -54,7 +63,10 @@ const CodeEditor: React.FC = () => {
 
   // 保存数据
   const onSave = async (): Promise<void> => {
-    const resultData = await FlinkArtifactSqlService.updateScript({ id: flinkArtifactSql.id, script: sqlScript });
+    const resultData = await FlinkArtifactSqlService.updateScript({
+      id: flinkArtifactSql.id,
+      script: sqlScript,
+    });
     if (resultData.success) {
       message.success(`${intl.formatMessage({ id: 'SaveSuccessful' })}`, 1);
     }
@@ -123,4 +135,4 @@ const CodeEditor: React.FC = () => {
   );
 };
 
-export default CodeEditor;
+export default CodeEditor;
diff --git a/scaleph-ui-react/src/pages/Project/Workspace/Artifact/Sql/CodeEditor/EditorRight/index.tsx b/scaleph-ui-react/src/pages/Project/Workspace/Artifact/Sql/CodeEditor/EditorRight/index.tsx
@@ -17,26 +17,26 @@ export default function EditorLeft() {
   };
 
   return (
-    // <Split
-    //   className="split-vertical"
-    //   direction="vertical"
-    //   gutterSize={4}
-    //   sizes={verticalSplitSizes}
-    //   minSize={[0, 0]}
-    //   maxSize={[Infinity, Infinity]}
-    //   snapOffset={100}
-    //   onDrag={handleDrag}
-    // >
-    //   <div>
-    //     <Editor editorRef={editorRef} />
-    //   </div>
-    //   <div>
-    //     <EditorRightResult editorRef={editorRef} />
-    //   </div>
-    // </Split>
-
+    <Split
+      className="split-vertical"
+      direction="vertical"
+      gutterSize={4}
+      sizes={verticalSplitSizes}
+      minSize={[0, 0]}
+      maxSize={[Infinity, Infinity]}
+      snapOffset={100}
+      onDrag={handleDrag}
+    >
+      <div>
+        <Editor editorRef={editorRef} />
+      </div>
       <div>
-         <Editor editorRef={editorRef} />
+        <EditorRightResult editorRef={editorRef} />
       </div>
+    </Split>
+
+    // <div>
+    //    <Editor editorRef={editorRef} />
+    // </div>
   );
 }