[Optimization-881][datastudio] Optimizate FlinkSql explain exception message (#993)

Co-authored-by: wenmo <32723967+wenmo@users.noreply.github.com>

dlink-web/src/components/Studio/StudioConsole/StudioExplain/index.tsx

@@ -20,13 +20,14 @@
 
 import {StateType} from "@/pages/DataStudio/model";
 import {connect} from "umi";
-import {Button, Tag, Space, Typography, Modal,} from 'antd';
+import {Modal, Space, Tag, Typography,} from 'antd';
 import {ConsoleSqlOutlined} from "@ant-design/icons";
 import ProList from '@ant-design/pro-list';
 import {explainSql} from "@/pages/DataStudio/service";
-import {useRef, useState, useEffect} from "react";
+import {useEffect, useState} from "react";
+import CodeShow from "@/components/Common/CodeShow";
 
-const {Paragraph,Text} = Typography;
+const {Paragraph, Text} = Typography;
 
 type ExplainItem = {
   index: number;
@@ -79,29 +80,24 @@ const StudioExplain = (props: any) => {
     setExplainData([]);
     const result = explainSql(param);
     result.then(res => {
-      setExplainData(res.datas);
+      const errorExplainData: [] = [];
       let errorCount: number = 0;
       for (let i in res.datas) {
         if (!res.datas[i].explainTrue || !res.datas[i].parseTrue) {
+          errorExplainData.push(res.datas[i]);
           errorCount++;
         }
       }
       if (errorCount == 0) {
+        setExplainData(res.datas);
         setResult(<Text type="success">全部正确</Text>);
       } else {
+        setExplainData(errorExplainData);
         setResult(<Text type="danger">存在错误，共计{errorCount}个</Text>);
       }
     })
   }, [modalVisible]);
 
-  const renderFooter = () => {
-    return (
-      <>
-        <Button onClick={onClose}>关闭</Button>
-      </>
-    );
-  };
-
   const renderContent = () => {
     return (
       <>
@@ -144,18 +140,10 @@ const StudioExplain = (props: any) => {
                         {row.sql}
                       </Paragraph>) : null
                     }
-                    {row.explain ?
-                      (<Paragraph>
-                    <pre style={{height: '80px'}}>
-                      {row.explain}
-                    </pre>
-                      </Paragraph>) : null
-                    }
                     {row.error ?
                       (<Paragraph>
-                      <pre style={{height: '80px'}}>
-                        {row.error}
-                      </pre>
+                        <CodeShow code={row.error} language='java'
+                                  height='500px' theme="vs-dark"/>
                       </Paragraph>) : null
                     }
                   </>
@@ -189,11 +177,12 @@ const StudioExplain = (props: any) => {
 
   return (
     <Modal
-      width={800}
+      width={'100%'}
       destroyOnClose
+      centered
       title="FlinkSql 语法和逻辑检查"
       visible={modalVisible}
-      footer={renderFooter()}
+      footer={false}
       onCancel={onClose}
     >
       <Paragraph>
@@ -204,7 +193,7 @@ const StudioExplain = (props: any) => {
   );
 };
 
-export default connect(({Studio}: {Studio: StateType}) => ({
+export default connect(({Studio}: { Studio: StateType }) => ({
   current: Studio.current,
   currentSession: Studio.currentSession,
 }))(StudioExplain);

dlink-web/src/pages/DataStudio/SqlExport/index.tsx

@@ -21,13 +21,14 @@
 import {Typography} from 'antd';
 import {useEffect, useState} from "react";
 import {getData} from "@/components/Common/crud";
+import CodeShow from "@/components/Common/CodeShow";
 
-const {Text, Paragraph} = Typography;
+const {Paragraph} = Typography;
 
 const SqlExport = (props: any) => {
 
   const {id} = props;
-  const [statement, setStatement] = useState<string>();
+  const [statement, setStatement] = useState<string>('');
 
   const refreshStatement = async () => {
     const msg = await getData('api/task/exportSql', {id: id});
@@ -42,7 +43,8 @@ const SqlExport = (props: any) => {
     <Paragraph copyable={{text: statement}}>
     </Paragraph>
     <Paragraph>
-      <pre style={{height: '300px'}}>{statement}</pre>
+      <CodeShow code={statement} language='sql'
+                height='500px' theme="vs-dark"/>
     </Paragraph></>)
 };