[Feature][scaleph-ui-react] prevent monaco-editor load loader.js from…

… cdn (#750)

* feature: upgrade seatunnel to 2.3.7

* feature: upgrade carp to 0.0.10

* feature: cancel scaleph-ui-react2 build

---------

Co-authored-by: wangqi <wangqi@xinxuan.net>

.github/workflows/release-manual-docker-seatunnel.yml

@@ -22,9 +22,10 @@ on:
       seatunnelVersion:
         description: 'seatunnel version'
         required: true
-        default: '2.3.6'
+        default: '2.3.7'
         type: choice
         options:
+          - 2.3.7
           - 2.3.6
       flinkVersion:
         description: 'flink version'

README.md

@@ -13,7 +13,7 @@ Scaleph is driven by personal interest and evolves actively through faithful dev
 * Data Integration
   * Web-ui click-and-drag data integration ways backended by [Apache SeaTunnel](https://seatunnel.apache.org/) on Flink engine.
 
-  * Support the latest 2.3.6 V2 out-of-the-box connectors and transforms.
+  * Support the latest 2.3.7 V2 out-of-the-box connectors and transforms.
 
   * DataSource management.
 

pom.xml

@@ -151,7 +151,7 @@
         <okhttp.version>4.10.0</okhttp.version>
         <guava.version>32.1.3-jre</guava.version>
         <minio.version>8.3.8</minio.version>
-        <carp.version>0.0.9</carp.version>
+        <carp.version>0.0.10</carp.version>
         <milky.version>1.0.13</milky.version>
         <sakura.version>1.0.2</sakura.version>
         <hadoop.version>3.3.4</hadoop.version>

scaleph-application/scaleph-application-flink/src/main/java/cn/sliew/scaleph/application/flink/resource/handler/FlinkImageMapping.java

@@ -38,7 +38,7 @@ public enum FlinkImageMapping {
     SQL_1_17(FlinkJobType.SQL, OperatorFlinkVersion.v1_17, FlinkVersionMapping.V_1_17, "ghcr.io/flowerfine/scaleph-sql-template:1.17"),
     SQL_1_18(FlinkJobType.SQL, OperatorFlinkVersion.v1_18, FlinkVersionMapping.V_1_18, "ghcr.io/flowerfine/scaleph-sql-template:1.18"),
 
-    SEATUNNEL_1_16(FlinkJobType.SEATUNNEL, OperatorFlinkVersion.v1_16, FlinkVersionMapping.V_1_16, "ghcr.io/flowerfine/scaleph-seatunnel:2.3.6-flink-1.16"),
+    SEATUNNEL_1_16(FlinkJobType.SEATUNNEL, OperatorFlinkVersion.v1_16, FlinkVersionMapping.V_1_16, "ghcr.io/flowerfine/scaleph-seatunnel:2.3.7-flink-1.16"),
     FLINK_CDC_1_18(FlinkJobType.FLINK_CDC, OperatorFlinkVersion.v1_18, FlinkVersionMapping.V_1_18, "ghcr.io/flowerfine/scaleph-flink-cdc:3.0.0-flink-1.18"),
     ;
 

scaleph-common/src/main/java/cn/sliew/scaleph/common/dict/seatunnel/SeaTunnelVersion.java

@@ -32,6 +32,7 @@ public enum SeaTunnelVersion implements DictInstance {
     V_2_3_4("2.3.4", "2.3.4"),
     V_2_3_5("2.3.5", "2.3.5"),
     V_2_3_6("2.3.6", "2.3.6"),
+    V_2_3_7("2.3.7", "2.3.7"),
     ;
 
     @JsonCreator

scaleph-datasource/src/main/java/cn/sliew/scaleph/ds/service/DataSourceResource.java

@@ -0,0 +1,26 @@
+/*
+ * 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.
+ */
+
+package cn.sliew.scaleph.ds.service;
+
+import cn.sliew.carp.module.datasource.service.dto.DsInfoDTO;
+import cn.sliew.scaleph.resource.service.ResourceDescriptor;
+
+public interface DataSourceResource extends ResourceDescriptor<DsInfoDTO> {
+
+}

scaleph-datasource/src/main/java/cn/sliew/scaleph/ds/service/impl/DataSourceResourceImpl.java

@@ -0,0 +1,59 @@
+/*
+ * 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.
+ */
+
+package cn.sliew.scaleph.ds.service.impl;
+
+import cn.sliew.carp.framework.common.dict.datasource.DataSourceType;
+import cn.sliew.carp.framework.common.model.PageResult;
+import cn.sliew.carp.module.datasource.service.CarpDsInfoService;
+import cn.sliew.carp.module.datasource.service.dto.DsInfoDTO;
+import cn.sliew.carp.module.datasource.service.param.DsInfoListParam;
+import cn.sliew.scaleph.common.util.BeanUtil;
+import cn.sliew.scaleph.ds.service.DataSourceResource;
+import cn.sliew.scaleph.resource.service.enums.ResourceType;
+import cn.sliew.scaleph.resource.service.param.ResourceListParam;
+import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Component;
+
+@Component
+public class DataSourceResourceImpl implements DataSourceResource {
+
+    @Autowired
+    private CarpDsInfoService carpDsInfoService;
+
+    @Override
+    public ResourceType getResourceType() {
+        return ResourceType.DATASOURCE;
+    }
+
+    @Override
+    public Page<DsInfoDTO> list(ResourceListParam param) {
+        DsInfoListParam target = BeanUtil.copy(param, new DsInfoListParam());
+        target.setDsType(DataSourceType.of(param.getLabel()));
+        PageResult<DsInfoDTO> pageResult = carpDsInfoService.list(target);
+        Page<DsInfoDTO> page = new Page<>(pageResult.getCurrent(), pageResult.getSize(), pageResult.getTotal());
+        page.setRecords(pageResult.getRecords());
+        return page;
+    }
+
+    @Override
+    public DsInfoDTO getRaw(Long id) {
+        return carpDsInfoService.selectOne(id, true);
+    }
+}

scaleph-resource/src/main/java/cn/sliew/scaleph/resource/service/param/ResourceListParam.java

@@ -18,13 +18,13 @@
 
 package cn.sliew.scaleph.resource.service.param;
 
-import cn.sliew.scaleph.system.model.PaginationParam;
+import cn.sliew.carp.framework.common.model.PageParam;
 import lombok.Data;
 import lombok.EqualsAndHashCode;
 
 @Data
 @EqualsAndHashCode(callSuper = true)
-public class ResourceListParam extends PaginationParam {
+public class ResourceListParam extends PageParam {
 
     private String label;
 

scaleph-ui-react/src/pages/Project/Workspace/DataIntegration/SeaTunnel/Dag/components/menubar/json.tsx

@@ -1,9 +1,12 @@
 import React, {useEffect, useRef, useState} from 'react';
 import {Drawer} from "antd";
 import {useGraphStore} from '@antv/xflow';
-import Editor, {useMonaco} from "@monaco-editor/react";
+import Editor, {loader, useMonaco} from "@monaco-editor/react";
+import * as monaco from "monaco-editor";
 import {ModalFormProps} from "@/typings";
 
+loader.config({monaco})
+
 const JSONDebugModal: React.FC<ModalFormProps<null>> = ({visible, onVisibleChange, onCancel}) => {
   const nodes = useGraphStore((state) => state.nodes);
   const edges = useGraphStore((state) => state.edges);

scaleph-ui-react/src/pages/Project/Workspace/DataIntegration/SeaTunnel/Dag/components/menubar/seatunnel.tsx

@@ -6,6 +6,8 @@ import {ModalFormProps} from "@/typings";
 import {WsArtifactSeaTunnel} from "@/services/project/typings";
 import {WsArtifactSeaTunnelService} from "@/services/project/WsArtifactSeaTunnelService";
 
+loader.config({monaco})
+
 const SeaTunnelConfModal: React.FC<ModalFormProps<WsArtifactSeaTunnel>> = ({
                                                                              visible,
                                                                              onVisibleChange,
@@ -21,7 +23,7 @@ const SeaTunnelConfModal: React.FC<ModalFormProps<WsArtifactSeaTunnel>> = ({
     monaco?.languages.typescript.javascriptDefaults.setEagerModelSync(true);
     // or make sure that it exists by other ways
     if (monaco) {
-      loader.config({ monaco })
+
       // console.log("here is the monaco instance:", monaco);
     }
   }, [monaco]);

scaleph-ui-react/src/pages/Project/Workspace/DataIntegration/SeaTunnel/Dag/components/node/canvas-node.tsx

@@ -64,7 +64,7 @@ const SeaTunnelConnectorDagNode = ({node}: { node: Node }) => {
       >
         <Popover title={<div>
           <Typography.Text>{node.data.label}</Typography.Text>
-          <a href="https://seatunnel.apache.org/docs/2.3.6/about/" target="_blank">
+          <a href="https://seatunnel.apache.org/docs/2.3.7/about/" target="_blank">
             <Button shape="default" type="link" icon={<InfoCircleOutlined/>}/>
           </a>
         </div>}

scaleph-ui-react2/pom.xml

@@ -31,64 +31,4 @@
     <artifactId>scaleph-ui-react2</artifactId>
     <name>scaleph-ui-react2</name>
 
-    <properties>
-        <build.node.version>v16.14.0</build.node.version>
-        <build.npm.version>8.5.4</build.npm.version>
-        <build.command>run build --prod</build.command>
-    </properties>
-
-    <profiles>
-      <profile>
-        <id>dist</id>
-        <properties>
-          <build.command>run dist-build</build.command>
-        </properties>
-      </profile>
-    </profiles>
-
-    <build>
-        <plugins>
-            <plugin>
-                <groupId>com.github.eirslett</groupId>
-                <artifactId>frontend-maven-plugin</artifactId>
-                <executions>
-                    <execution>
-                        <id>install node and npm</id>
-                        <goals>
-                            <goal>install-node-and-npm</goal>
-                        </goals>
-                        <phase>generate-resources</phase>
-                    </execution>
-                    <execution>
-                        <id>npm install</id>
-                        <goals>
-                            <goal>npm</goal>
-                        </goals>
-                        <phase>generate-resources</phase>
-                        <configuration>
-                            <arguments>install --force</arguments>
-                        </configuration>
-                    </execution>
-                    <execution>
-                        <id>npm run build</id>
-                        <goals>
-                            <goal>npm</goal>
-                        </goals>
-                        <phase>compile</phase>
-                        <configuration>
-                            <arguments>${build.command}</arguments>
-                        </configuration>
-                    </execution>
-                </executions>
-                <configuration>
-                    <nodeVersion>${build.node.version}</nodeVersion>
-                    <npmVersion>${build.npm.version}</npmVersion>
-                    <installDirectory>target</installDirectory>
-<!--                    <nodeDownloadRoot>http://npm.taobao.org/mirrors/node/</nodeDownloadRoot>-->
-<!--                    <npmDownloadRoot>https://registry.npmmirror.com/npm/-/</npmDownloadRoot>-->
-                </configuration>
-            </plugin>
-        </plugins>
-    </build>
-
 </project>

scaleph-ui-react2/src/pages/Project/Workspace/Artifact/Sql/CodeEditor/Editor/index.tsx

@@ -1,21 +1,21 @@
-import { Editor } from '@monaco-editor/react';
-import { Button, message } from 'antd';
-import { language } from 'monaco-editor/esm/vs/basic-languages/sql/sql';
+import React, {useEffect, useRef, useState} from 'react';
+import {Button, message} from 'antd';
+import {useIntl, useLocation, useModel} from 'umi';
+import {Editor, loader} from '@monaco-editor/react';
+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 '@/constants/constant';
-import { WsFlinkArtifactSql } from '@/services/project/typings';
-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 {WORKSPACE_CONF} from '@/constants/constant';
+import {WsFlinkArtifactSql} from '@/services/project/typings';
+import {FlinkArtifactSqlService} from '@/services/project/WsFlinkArtifactSqlService';
+import {WsFlinkKubernetesSessionClusterService} from '@/services/project/WsFlinkKubernetesSessionClusterService';
+import {WsFlinkSqlGatewayService} from '@/services/project/WsFlinkSqlGatewayService';
 import styles from './index.less';
 
+loader.config({monaco})
+
 // 定义 SQL 语法提示关键字列表
-const { keywords: SQLKeys } = language;
+const {keywords: SQLKeys} = language;
 
 const CodeEditor: React.FC = () => {
   const urlParams = useLocation();
@@ -24,7 +24,7 @@ const CodeEditor: React.FC = () => {
   const intl = useIntl(); //语言切换
   const [sessionClusterId, setSessionClusterId] = useState<string>();
   const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
-  const { setExecutionData } = useModel('executionResult'); //存储执行结果
+  const {setExecutionData} = useModel('executionResult'); //存储执行结果
 
   useEffect(() => {
     setSqlScript(flinkArtifactSql?.script);
@@ -52,7 +52,7 @@ const CodeEditor: React.FC = () => {
         configuration: {},
       });
       if (catalogArray) {
-        message.success(`${intl.formatMessage({ id: 'RequestSuccessful' })}`, 1);
+        message.success(`${intl.formatMessage({id: 'RequestSuccessful'})}`, 1);
         setExecutionData(catalogArray);
       }
     } else {
@@ -68,15 +68,15 @@ const CodeEditor: React.FC = () => {
       script: sqlScript,
     });
     if (resultData.success) {
-      message.success(`${intl.formatMessage({ id: 'SaveSuccessful' })}`, 1);
+      message.success(`${intl.formatMessage({id: 'SaveSuccessful'})}`, 1);
     }
   };
 
   // 点击格式化按钮
   const onFormat = (): void => {
-    const formattedScript = sqlFormatter.format(sqlScript, { language: 'sql' });
+    const formattedScript = sqlFormatter.format(sqlScript, {language: 'sql'});
     setSqlScript(formattedScript);
-    message.success(`${intl.formatMessage({ id: 'FormatSuccessful' })}`, 1);
+    message.success(`${intl.formatMessage({id: 'FormatSuccessful'})}`, 1);
   };
 
   // 获取 SQL 语法提示
@@ -99,13 +99,13 @@ const CodeEditor: React.FC = () => {
   };
 
   return (
-    <div style={{ overflow: 'hidden', height: '100%', width: '100%', position: 'relative' }}>
+    <div style={{overflow: 'hidden', height: '100%', width: '100%', position: 'relative'}}>
       <Editor
         language="sql"
         value={sqlScript}
         width="100%"
         theme="vs"
-        options={{ minimap: { autohide: true, side: 'right' } }}
+        options={{minimap: {autohide: true, side: 'right'}}}
         beforeMount={(monaco) => {
           // 注册代码补全提供者
           monaco.languages.registerCompletionItemProvider('sql', {
@@ -120,15 +120,15 @@ const CodeEditor: React.FC = () => {
       <div className={styles.consoleOptionsWrapper}>
         <div className={styles.consoleOptionsLeft}>
           <Button type="primary" className={styles.runButton} onClick={onRun}>
-            <img src="/images/EditorResult/播放.svg" alt="" />
-            {intl.formatMessage({ id: 'Run' })}
+            <img src="/images/EditorResult/播放.svg" alt=""/>
+            {intl.formatMessage({id: 'Run'})}
           </Button>
           <Button type="default" className={styles.saveButton} onClick={onSave}>
-            {intl.formatMessage({ id: 'Save' })}
+            {intl.formatMessage({id: 'Save'})}
           </Button>
         </div>
         <Button type="text" onClick={onFormat}>
-          {intl.formatMessage({ id: 'Format' })}
+          {intl.formatMessage({id: 'Format'})}
         </Button>
       </div>
     </div>

scaleph-ui-react2/src/pages/Project/Workspace/Artifact/Sql/CodeEditor/EditorRightResult/EditorRightResultTable.tsx

@@ -1,15 +1,17 @@
-import { compareStrings } from '@/pages/Project/Workspace/Artifact/Sql/CodeEditor/components/sort';
-import { Editor } from '@monaco-editor/react';
-import { ArtColumn, BaseTable, features, useTablePipeline } from 'ali-react-table';
-import { Button, message, Modal, Typography, Table } from 'antd';
-import React, { useEffect, useMemo, useState, useRef } from 'react';
+import React, {useEffect, useMemo, useState} from 'react';
+import {Button, message, Modal, Table, Typography} from 'antd';
+import {Editor, loader} from '@monaco-editor/react';
+import * as monaco from "monaco-editor";
+import {features, useTablePipeline} from 'ali-react-table';
 import styles from './index.less';
 
 interface IViewTableCellData {
   name: string;
   value: any;
 }
 
+loader.config({monaco})
+
 const EditorRightResultTable: React.FC = ({ result, lastOneData, verticalSplitSizes }: any) => {
   const { Paragraph, Text } = Typography;
   const [viewTableCellData, setViewTableCellData] = useState<IViewTableCellData | null>(null);