Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature][scaleph-ui-react] prevent monaco-editor load loader.js from cdn #750

Merged
merged 3 commits into from
Aug 25, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .github/workflows/release-manual-docker-seatunnel.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
2 changes: 1 addition & 1 deletion pom.xml
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"),
;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
@@ -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> {

}
Original file line number Diff line number Diff line change
@@ -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);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
Original file line number Diff line number Diff line change
@@ -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);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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]);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>}
Expand Down
60 changes: 0 additions & 60 deletions scaleph-ui-react2/pom.xml
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Original file line number Diff line number Diff line change
@@ -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();
Expand All @@ -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);
Expand Down Expand Up @@ -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 {
Expand All @@ -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 语法提示
Expand All @@ -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', {
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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);
Expand Down
Loading
Loading