帆软决策平台数据连接界面库

superman 6db3736016 Merge pull request #9109 in DEC/decision-webui-dcm from final/11.0 to persist/11.0 * commit 'ae401046cff5b7ab8c65cc884b463b7ce2e9813b':		2 weeks ago
assets/scripts	DEC-15759 & DEC-15764 帮助文档链接	4 years ago
config	build: KERNEL-6541 引用类型规范化	3 years ago
i18n	REPORT-109671 feat:druid校验语句问题	4 months ago
lib	refactor: 重构页面	5 years ago
private	REPORT-109671 feat:druid校验语句问题	4 months ago
src	BI-144496 fix: 数据连接增加埋点	2 months ago
types	REPORT-90545: 驱动检测平台前端适配	1 year ago
webpack	build: KERNEL-6541 引用类型规范化	3 years ago
.eslintignore	refactor: 重构页面	5 years ago
.eslintrc	DEC-22408 feat:【迭代】【数据连接支持SSH及SSL】	2 years ago
.gitignore	refactor: 重构页面	5 years ago
.npmrc	KERNEL-4727 refactor: 【平台】使用babel-preset-fineui插件配置babel	4 years ago
README.md	REPORT-102763 fix:【开个接口】数据连接支持对接业务系统-补充	8 months ago
babel.config.js	无JIRA任务，修复打包问题	4 months ago
index.html	build: KERNEL-6541 引用类型规范化	3 years ago
jest.config.js	fix: BI-51537 未拥有编辑权限的不可编辑、删除、重命名、复制。	5 years ago
package.json	无JIRA任务，修复打包问题	4 months ago
redis.js	fix: 无jira任务重命名的时候也发送socket，修改插件图片地址	5 years ago
tsconfig.json	无JIRA任务，修复类型错误	1 year ago

README.md

Database Connection Manager

用于决策平台和设计器中管理数据连接的通用管理器

开始

安装依赖

yarn install

开始开发

yarn dev

决策平台开发:

A.项目运行

1. 工程`decision-webui-dev`添加代理（可跳过）

   webpack/webpack.config
                   "/plugin/dcm": {
                    pathRewrite: { "^/plugin/dcm": "" },
                    target: "http://localhost:10002",
                },

2. 工程`decision-webui-dev`引入

fr环境：templates/bundle.report.html bi环境：templates/bundle.bi.html

   // css 文件：
   <head>
   
   <link rel="stylesheet" type="text/css" href="/plugin/dcm/show.dev.css" />
   <link rel="stylesheet" type="text/css" href="http://localhost:10002/show.dev.css" />
   </head>
   // js 文件
   <script type="text/javascript" src="/plugin/dcm/show.dev.js"></script>

若未设1，将/plugin/dcm替换成http://localhost:10002亦可

3. 启动工程[decision-webui-dev]以及数据连接[desicion-webui-dcm]工程

4. 此时工程`decision-webui-dev`的`http://localhost:9002/#management/connnection`数据连接模块已替换成该工程

B.插件形式添加数据连接-数据库

1. 以多版本的tdsql为例单一版本数据库不需drivers,versions,hasSchemas

BI.config("dec.connection.provider.datebase", function (provider) {
        BI.isFunction(provider.registerJdbcDatabase) && provider.registerJdbcDatabase({
            text: 'TDSQL', // 数据库名称
            databaseType: 'tdsql', // 数据库key
            driver: 'org.postgresql.Driver', // 默认驱动
            drivers: {
                "pgsql": ["org.postgresql.Driver"],
                "mysql": ["com.mysql.jdbc.Driver"]
            }, // 驱动可选项，version: array[driver],[0]为该版本的默认驱动
            versions: ["pgsql", "mysql"], // array[version]
            urls: {
                "org.postgresql.Driver": "jdbc:postgresql://hostname:port/database?finedbType=tdsql-pgsql",
                "com.mysql.jdbc.Driver": "jdbc:mysql://hostname:port/database?finedbType=tdsql-mysql"
            }, // urlkey : url 一个驱动对应一个url
            url: 'jdbc:postgresql://hostname:port/database?finedbType=tdsql-pgsql',
            commonly: false,
            internal: true,
            type: 'jdbc', 数据库类型
            hasSchema: true, // 默认是否支持模式
            hasSchemas: {
                "pgsql": true,
                "mysql": false,
            },是否支持模式 version: boolean
            kerberos: false, // 是否添加kerberos认证方式
        }, function (url) {
            var result = url.match(/^jdbc:(mysql|postgresql):\/\/([0-9a-zA-Z_\\.-]+)(:([0-9|port]+))?\/([0-9a-zA-Z_\\.]+)(.*)finedbType=([^&]+)(|(&.*))/i); // 匹配正则
            if (result) {
                return {
                    host: result[2], //主机
                    port: result[4] === "port" ? "" : result[4], // 端口
                    databaseName: result[5], // 数据库名称
                    version: result[7].split('-')[1] ?? "pgsql", // 版本 单版本不要返回这个
                };
            }
//适配原先tbase的url
            result = url.match(/^jdbc:postgresql:\/\/([0-9a-zA-Z_\\.-]+)(:([0-9|port]+))?\/([0-9a-zA-Z_\\.]+)(.*)/i);
            if (result) {
                return {
                    host: result[1],
                    port: result[3] === "port" ? "" : result[3],
                    databaseName: result[4],
                    version: "pgsql",
                };
            }
 
        });
    });

C 工程开发

1. 图片资源添加

工程decision-webui-dev decision-webui/dist/images/1x/icon/database decision-webui/dist/images/2x/icon/database

2. 国际化添加

工程decision-webui-dev decision-i18n/decision-main-i18n/src/main/resources/com/fr/decision/web/i18n

3. 版本控制

版本和平台保持一致

接口文档：

A 增加数据连接类型

1. 增加数据连接类型

使用BI.config,ConstantName名称为dec.constant.database.conf.connect.types，值为连接的名称

例如增加Redis的连接：

BI.config(ConstantPluginTyps, (datas: string[]) => [...datas, {
    text: 'Redis',
    databaseType: 'Redis',
    edit: '',
    show: '',
}]);

2. 数据连接填写页面

edit属性值为填写组件shortcut的名称

3. 数据连接展示页面

show属性值为组件shortcut的名称

4. 示例

const DataBaseConfigProvider = 'dec.connection.provider.datebase';

const RedisShowName = 'dec.dcm.connection.plugin.redis.show';
const RedisEditName = 'dec.dcm.connection.plugin.redis.edit';
BI.config(DataBaseConfigProvider, function (provider) {
    provider.registerDatabaseType([{
        text: "Redis",
        databaseType: "Redis",
        edit: "dec.dcm.connection.plugin.demo.edit",
        show: "dec.dcm.connection.plugin.demo.show",
    }]);
});

const RedisShow = BI.inherit(BI.Widget, {
    props: {
        formData: {
            url: '',
            port: '6379',
            password: '',
        },
    },
    render() {
        const o = this.options;
        
        return {
            type: 'bi.vertical',
            hgap: 15,
            vgap: 10,
            items: [
                {
                    type: 'bi.left',
                    items: [
                        {
                            type: 'bi.label',
                            cls: 'bi-font-bold',
                            width: 100,
                            textAlign: 'left',
                            text: '数据库地址',
                        },
                        {
                            type: 'bi.label',
                            text: o.formData.url,
                        },
                    ],
                },
                {
                    type: 'bi.left',
                    items: [
                        {
                            type: 'bi.label',
                            cls: 'bi-font-bold',
                            width: 100,
                            textAlign: 'left',
                            text: '端口号',
                        },
                        {
                            type: 'bi.label',
                            text: o.formData.port,
                        },
                    ],
                },
                {
                    type: 'bi.left',
                    items: [
                        {
                            type: 'bi.label',
                            cls: 'bi-font-bold',
                            width: 100,
                            textAlign: 'left',
                            text: '密码',
                        },
                        {
                            type: 'bi.label',
                            text: o.formData.password,
                        },
                    ],
                },
            ],
        },
    },
});
BI.shortcut(RedisShowName, RedisShow);

const RedisEdit = BI.inherit(BI.Widget, {
    props: {
        value: {
            url: '',
            port: '6379',
            password: '',
        },
    },
    render() {
        const o = this.options;
        
        return {
            type: 'bi.vertical',
            hgap: 15,
            vgap: 10,
            items: [
                {
                    type: 'bi.left',
                    items: [
                        {
                            type: 'bi.label',
                            cls: 'bi-font-bold',
                            width: 100,
                            textAlign: 'left',
                            text: '数据库地址',
                        },
                        {
                            type: 'bi.text_editor',
                            width: 300,
                            allowBlank: true,
                            ref: _ref => {
                                this.url = _ref;
                            },
                            text: o.value.url,
                        },
                    ],
                },
                {
                    type: 'bi.left',
                    items: [
                        {
                            type: 'bi.label',
                            cls: 'bi-font-bold',
                            width: 100,
                            textAlign: 'left',
                            text: '端口号',
                        },
                        {
                            type: 'bi.text_editor',
                            width: 300,
                            allowBlank: true,
                            ref: _ref => {
                                this.port = _ref;
                            },
                            text: o.value.port,
                        },
                    ],
                },
                {
                    type: 'bi.left',
                    items: [
                        {
                            type: 'bi.label',
                            cls: 'bi-font-bold',
                            width: 100,
                            textAlign: 'left',
                            text: '密码',
                        },
                        {
                            type: 'bi.text_editor',
                            width: 300,
                            allowBlank: true,
                            inputType: 'password',
                            ref: _ref => {
                                this.password = _ref;
                            },
                            text: o.value.password,
                        },
                    ],
                },
            ],
        };
    },
    getValue() {
        return {
            url: this.url.getValue(),
            port: this.port.getValue(),
            password: this.password.getValue(),
        };
    },
    //可以触发组件的数据save方法，不需要则可不写
    async save() {
        let result = false;
        await Promise.resolve().then(() => {result = true});
        //要求返回是否成功的boolean变量
        return result;
    },
});
BI.shortcut(RedisEditName, RedisEdit);

B 添加数据连接实例

1. 增加数据连接

BI.config('dec.constant.connection.list', function (value) {
            const result = [{
                "connectionType": "Redis",//和databaseType一致
                "connectionName": "CHART",//类似于id,唯一性
                "pluginConnection": true,//表示是外来添加的插件
                "connectionData": {
                    //表单保存数据
                },
                "connectionId": null,
            }];
            return value.concat(result);
        })

C 添加数据连接类型分类

1. 添加分类DEMO

BI.config('dec.constant.database.filter.type', (value) => {
    value.push({
        text:"DEMO", 
        value:"DEMO_VALUE"
    });
    return value;
    });

2. 添加数据连接类型进DEMO

    BI.config('dec.connection.provider.datebase', function (provider) {
        text: "Redis",//必填
        databaseType: "Redis",//唯一值
        marker: 'DEMO_VALUE',//marker对标dec.constant.database.filter.type常量item的value，用于过滤
        isHideConnection: true, //是否隐藏测试连接按钮
        isNoSave: true,//是否不执行平台的保存逻辑
        iconUrl:'https://work.fineres.com/secure/projectavatar?pid=10301&avatarId=10011',
        driver: 'com.amazon.redshift.jdbc41.Driver',
        drivers: ['com.amazon.redshift.jdbc4.Driver', 'com.amazon.redshift.jdbc41.Driver'],
        url: 'jdbc:redshift://endpoint:port/database',
    }