You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@inlong.apache.org by le...@apache.org on 2023/01/04 07:57:51 UTC

[inlong] branch master updated: [INLONG-7133][Dashboard] The sink's data node supports jumping to the node page (#7137)

This is an automated email from the ASF dual-hosted git repository.

leezng pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/inlong.git


The following commit(s) were added to refs/heads/master by this push:
     new 0f081e6df [INLONG-7133][Dashboard] The sink's data node supports jumping to the node page (#7137)
0f081e6df is described below

commit 0f081e6df1d149240e60f4a925a2f4bdb23c7040
Author: Lizhen <88...@users.noreply.github.com>
AuthorDate: Wed Jan 4 15:57:46 2023 +0800

    [INLONG-7133][Dashboard] The sink's data node supports jumping to the node page (#7137)
---
 .../src/components/NodeSelect/index.tsx            | 59 ++++++++++++++++++++++
 inlong-dashboard/src/locales/cn.json               |  8 +--
 inlong-dashboard/src/locales/en.json               |  8 +--
 .../src/metas/sinks/defaults/ClickHouse.ts         | 27 ++--------
 .../src/metas/sinks/defaults/Elasticsearch.ts      | 26 ++--------
 inlong-dashboard/src/metas/sinks/defaults/Hive.ts  | 27 ++--------
 .../src/metas/sinks/defaults/Iceberg.ts            | 27 ++--------
 inlong-dashboard/src/metas/sinks/defaults/MySQL.ts | 27 ++--------
 .../src/metas/sinks/defaults/StarRocks.ts          | 27 ++--------
 9 files changed, 87 insertions(+), 149 deletions(-)

diff --git a/inlong-dashboard/src/components/NodeSelect/index.tsx b/inlong-dashboard/src/components/NodeSelect/index.tsx
new file mode 100644
index 000000000..4e83225e7
--- /dev/null
+++ b/inlong-dashboard/src/components/NodeSelect/index.tsx
@@ -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.
+ */
+
+import React from 'react';
+import HighSelect, { HighSelectProps } from '@/components/HighSelect';
+import i18n from '@/i18n';
+import { Link } from 'react-router-dom';
+
+export interface NodeSelectProps extends HighSelectProps {
+  nodeType: string;
+}
+
+const NodeSelect: React.FC<NodeSelectProps> = _props => {
+  const props: HighSelectProps = {
+    ..._props,
+    showSearch: true,
+    allowClear: true,
+    filterOption: false,
+    options: {
+      ..._props.options,
+      requestTrigger: ['onOpen', 'onSearch'],
+      requestService: keyword => ({
+        url: '/node/list',
+        method: 'POST',
+        data: {
+          keyword,
+          type: _props.nodeType,
+          pageNum: 1,
+          pageSize: 20,
+        },
+      }),
+      requestParams: {
+        formatResult: result =>
+          result?.list?.map(item => ({
+            label: item.name,
+            value: item.name,
+          })),
+      },
+    },
+    addonAfter: <Link to="/node">{i18n.t('components.NodeSelect.Create')}</Link>,
+  };
+  return <HighSelect {...props} />;
+};
+
+export default NodeSelect;
diff --git a/inlong-dashboard/src/locales/cn.json b/inlong-dashboard/src/locales/cn.json
index b778fb42d..31a32a43f 100644
--- a/inlong-dashboard/src/locales/cn.json
+++ b/inlong-dashboard/src/locales/cn.json
@@ -112,6 +112,7 @@
   "meta.Sinks.Password": "密码",
   "meta.Sinks.EnableCreateResource": "是否创建资源",
   "meta.Sinks.EnableCreateResourceHelp": "如果库表已经存在,且无需修改,则选【不创建】,否则请选择【创建】,由系统自动创建资源。",
+  "meta.Sinks.DataNodeName": "数据节点",
   "meta.Sinks.Hive.FileFormat": "落地格式",
   "meta.Sinks.Hive.Day": "天",
   "meta.Sinks.Hive.DataEncoding": "数据编码",
@@ -135,7 +136,6 @@
   "meta.Sinks.Hive.FieldDescription": "字段描述",
   "meta.Sinks.Hive.IsMetaField": "是否为元字段",
   "meta.Sinks.Hive.FieldFormat": "字段格式",
-  "meta.Sinks.Hive.DataNodeName": "数据节点",
   "meta.Sinks.ClickHouse.DbName": "DB 名称",
   "meta.Sinks.ClickHouse.TableName": "表名称",
   "meta.Sinks.ClickHouse.FlushInterval": "刷新的间隔",
@@ -159,8 +159,6 @@
   "meta.Sinks.ClickHouse.PrimaryKey": "主键",
   "meta.Sinks.ClickHouse.CompressionCode": "压缩格式",
   "meta.Sinks.ClickHouse.TtlExpr": "生命周期",
-  "meta.Sinks.ClickHouse.DataNodeName": "数据节点",
-  "meta.Sinks.ES.DataNodeName": "数据节点",
   "meta.Sinks.ES.IndexName": "索引名称",
   "meta.Sinks.ES.FlushRecord": "刷新的数据条数",
   "meta.Sinks.ES.FlushRecordUnit": "条",
@@ -191,7 +189,6 @@
   "meta.Sinks.Iceberg.FieldType": "字段类型",
   "meta.Sinks.Iceberg.FieldDescription": "字段描述",
   "meta.Sinks.Iceberg.PartitionStrategy": "分区策略",
-  "meta.Sinks.Iceberg.DataNodeName": "数据节点",
   "meta.Sinks.Hudi.DbName": "DB 名称",
   "meta.Sinks.Hudi.TableName": "表名称",
   "meta.Sinks.Hudi.Warehouse": "仓库路径",
@@ -225,7 +222,6 @@
   "meta.Sinks.MySQL.IsMetaField": "是否为元字段",
   "meta.Sinks.MySQL.FieldFormat": "字段格式",
   "meta.Sinks.MySQL.FieldDescription": "字段描述",
-  "meta.Sinks.MySQL.DataNodeName": "数据节点",
   "meta.Sinks.Oracle.TableName": "表名称",
   "meta.Sinks.Oracle.PrimaryKey": "主键",
   "meta.Sinks.Oracle.FieldName": "字段名",
@@ -292,7 +288,6 @@
   "meta.Sinks.HBase.IsMetaField": "是否为元字段",
   "meta.Sinks.HBase.FieldFormat": "字段格式",
   "meta.Sinks.HBase.FieldDescription": "字段描述",
-  "meta.Sinks.StarRocks.DataNodeName": "数据节点",
   "meta.Sinks.StarRocks.TableName": "表名称",
   "meta.Sinks.StarRocks.PrimaryKey": "主键",
   "meta.Sinks.StarRocks.DatabaseName": "数据库名",
@@ -439,6 +434,7 @@
   "components.Layout.NavWidget.Remind": "密码不一致,请重新输入",
   "components.HighSelect.Customize": "自定义",
   "components.HighSelect.SearchPlaceholder": "请输入关键字搜索",
+  "components.NodeSelect.Create": "新建节点",
   "configs.pagination.Total": "共{{total}}项",
   "pages.GroupDashboard.ExecutionLogModal.Re-executingSuccess": "重新执行成功",
   "pages.GroupDashboard.ExecutionLogModal.TaskType": "任务类型",
diff --git a/inlong-dashboard/src/locales/en.json b/inlong-dashboard/src/locales/en.json
index b44a94ff5..20eac2c6d 100644
--- a/inlong-dashboard/src/locales/en.json
+++ b/inlong-dashboard/src/locales/en.json
@@ -112,6 +112,7 @@
   "meta.Sinks.Password": "Password",
   "meta.Sinks.EnableCreateResource": "EnableCreateResource",
   "meta.Sinks.EnableCreateResourceHelp": "If the library table already exists and does not need to be modified, select [Do not create], otherwise select [Create], and the system will automatically create the resource.",
+  "meta.Sinks.DataNodeName": "DataNode",
   "meta.Sinks.Hive.FileFormat": "File format",
   "meta.Sinks.Hive.Day": "Day(s)",
   "meta.Sinks.Hive.DataEncoding": "Data encoding",
@@ -135,7 +136,6 @@
   "meta.Sinks.Hive.FieldDescription": "Field description",
   "meta.Sinks.Hive.IsMetaField": "IsMetaField",
   "meta.Sinks.Hive.FieldFormat": "FieldFormat",
-  "meta.Sinks.Hive.DataNodeName": "DataNode",
   "meta.Sinks.ClickHouse.DbName": "DbName",
   "meta.Sinks.ClickHouse.TableName": "TableName",
   "meta.Sinks.ClickHouse.FlushInterval": "FlushInterval",
@@ -159,8 +159,6 @@
   "meta.Sinks.ClickHouse.PrimaryKey": "PrimaryKey",
   "meta.Sinks.ClickHouse.CompressionCode": "CompressionCode",
   "meta.Sinks.ClickHouse.TtlExpr": "TtlExpr",
-  "meta.Sinks.ClickHouse.DataNodeName": "DataNode",
-  "meta.Sinks.ES.DataNodeName": "DataNode",
   "meta.Sinks.ES.IndexName": "IndexName",
   "meta.Sinks.ES.FlushRecord": "FlushRecord",
   "meta.Sinks.ES.FlushRecordUnit": "items",
@@ -191,7 +189,6 @@
   "meta.Sinks.Iceberg.FieldType": "FieldType",
   "meta.Sinks.Iceberg.FieldDescription": "FieldDescription",
   "meta.Sinks.Iceberg.PartitionStrategy": "PartitionStrategy",
-  "meta.Sinks.Iceberg.DataNodeName": "DataNode",
   "meta.Sinks.Hudi.DbName": "DbName",
   "meta.Sinks.Hudi.TableName": "TableName",
   "meta.Sinks.Hudi.Warehouse": "Warehouse",
@@ -225,7 +222,6 @@
   "meta.Sinks.MySQL.IsMetaField": "IsMetaField",
   "meta.Sinks.MySQL.FieldFormat": "FieldFormat",
   "meta.Sinks.MySQL.FieldDescription": "FieldDescription",
-  "meta.Sinks.MySQL.DataNodeName": "DataNode",
   "meta.Sinks.Oracle.TableName": "TableName",
   "meta.Sinks.Oracle.PrimaryKey": "PrimaryKey",
   "meta.Sinks.Oracle.FieldName": "FieldName",
@@ -292,7 +288,6 @@
   "meta.Sinks.HBase.IsMetaField": "IsMetaField",
   "meta.Sinks.HBase.FieldFormat": "FieldFormat",
   "meta.Sinks.HBase.FieldDescription": "FieldDescription",
-  "meta.Sinks.StarRocks.DataNodeName": "DataNode",
   "meta.Sinks.StarRocks.TableName": "TableName",
   "meta.Sinks.StarRocks.PrimaryKey": "PrimaryKey",
   "meta.Sinks.StarRocks.DatabaseName": "Database Name",
@@ -439,6 +434,7 @@
   "components.Layout.NavWidget.Remind": "Password does not match, please re-enter",
   "components.HighSelect.Customize": "Customize",
   "components.HighSelect.SearchPlaceholder": "Please enter keyword...",
+  "components.NodeSelect.Create": "Create Node",
   "configs.pagination.Total": "Total {{total}} items",
   "pages.GroupDashboard.ExecutionLogModal.Re-executingSuccess": "Re-executing success",
   "pages.GroupDashboard.ExecutionLogModal.TaskType": "Task type",
diff --git a/inlong-dashboard/src/metas/sinks/defaults/ClickHouse.ts b/inlong-dashboard/src/metas/sinks/defaults/ClickHouse.ts
index 42f1aad49..a701d38a7 100644
--- a/inlong-dashboard/src/metas/sinks/defaults/ClickHouse.ts
+++ b/inlong-dashboard/src/metas/sinks/defaults/ClickHouse.ts
@@ -24,6 +24,7 @@ import i18n from '@/i18n';
 import EditableTable from '@/components/EditableTable';
 import { SinkInfo } from '../common/SinkInfo';
 import { sourceFields } from '../common/sourceFields';
+import NodeSelect from '@/components/NodeSelect';
 
 const { I18n } = DataWithBackend;
 const { FieldDecorator } = RenderRow;
@@ -93,34 +94,14 @@ export default class ClickHouseSink
   enableCreateResource: number;
 
   @FieldDecorator({
-    type: 'select',
+    type: NodeSelect,
     rules: [{ required: true }],
     props: values => ({
-      showSearch: true,
       disabled: [110, 130].includes(values?.status),
-      options: {
-        requestTrigger: ['onOpen', 'onSearch'],
-        requestService: keyword => ({
-          url: '/node/list',
-          method: 'POST',
-          data: {
-            keyword,
-            type: 'CLICKHOUSE',
-            pageNum: 1,
-            pageSize: 20,
-          },
-        }),
-        requestParams: {
-          formatResult: result =>
-            result?.list?.map(item => ({
-              label: item.name,
-              value: item.name,
-            })),
-        },
-      },
+      nodeType: 'CLICKHOUSE',
     }),
   })
-  @I18n('meta.Sinks.ClickHouse.DataNodeName')
+  @I18n('meta.Sinks.DataNodeName')
   dataNodeName: string;
 
   @FieldDecorator({
diff --git a/inlong-dashboard/src/metas/sinks/defaults/Elasticsearch.ts b/inlong-dashboard/src/metas/sinks/defaults/Elasticsearch.ts
index 0bc5ce6a0..857a71158 100644
--- a/inlong-dashboard/src/metas/sinks/defaults/Elasticsearch.ts
+++ b/inlong-dashboard/src/metas/sinks/defaults/Elasticsearch.ts
@@ -24,6 +24,7 @@ import i18n from '@/i18n';
 import EditableTable from '@/components/EditableTable';
 import { sourceFields } from '../common/sourceFields';
 import { SinkInfo } from '../common/SinkInfo';
+import NodeSelect from '@/components/NodeSelect';
 
 const { I18n } = DataWithBackend;
 const { FieldDecorator } = RenderRow;
@@ -52,33 +53,14 @@ export default class ElasticsearchSink
   implements DataWithBackend, RenderRow, RenderList
 {
   @FieldDecorator({
-    type: 'select',
+    type: NodeSelect,
     rules: [{ required: true }],
     props: values => ({
-      showSearch: true,
       disabled: [110, 130].includes(values?.status),
-      options: {
-        requestTrigger: ['onOpen', 'onSearch'],
-        requestService: {
-          url: '/node/list',
-          method: 'POST',
-          data: {
-            type: 'ELASTICSEARCH',
-            pageNum: 1,
-            pageSize: 20,
-          },
-        },
-        requestParams: {
-          formatResult: result =>
-            result?.list?.map(item => ({
-              label: item.name,
-              value: item.name,
-            })),
-        },
-      },
+      nodeType: 'ELASTICSEARCH',
     }),
   })
-  @I18n('meta.Sinks.ES.DataNodeName')
+  @I18n('meta.Sinks.DataNodeName')
   dataNodeName: string;
 
   @FieldDecorator({
diff --git a/inlong-dashboard/src/metas/sinks/defaults/Hive.ts b/inlong-dashboard/src/metas/sinks/defaults/Hive.ts
index 8cdd371c2..76d23af46 100644
--- a/inlong-dashboard/src/metas/sinks/defaults/Hive.ts
+++ b/inlong-dashboard/src/metas/sinks/defaults/Hive.ts
@@ -24,6 +24,7 @@ import i18n from '@/i18n';
 import EditableTable from '@/components/EditableTable';
 import { SinkInfo } from '../common/SinkInfo';
 import { sourceFields } from '../common/sourceFields';
+import NodeSelect from '@/components/NodeSelect';
 
 const { I18n } = DataWithBackend;
 const { FieldDecorator } = RenderRow;
@@ -117,34 +118,14 @@ export default class HiveSink extends SinkInfo implements DataWithBackend, Rende
   password: string;
 
   @FieldDecorator({
-    type: 'select',
+    type: NodeSelect,
     rules: [{ required: true }],
     props: values => ({
-      showSearch: true,
       disabled: [110, 130].includes(values?.status),
-      options: {
-        requestTrigger: ['onOpen', 'onSearch'],
-        requestService: keyword => ({
-          url: '/node/list',
-          method: 'POST',
-          data: {
-            keyword,
-            type: 'HIVE',
-            pageNum: 1,
-            pageSize: 20,
-          },
-        }),
-        requestParams: {
-          formatResult: result =>
-            result?.list?.map(item => ({
-              label: item.name,
-              value: item.name,
-            })),
-        },
-      },
+      nodeType: 'HIVE',
     }),
   })
-  @I18n('meta.Sinks.Hive.DataNodeName')
+  @I18n('meta.Sinks.DataNodeName')
   dataNodeName: string;
 
   @FieldDecorator({
diff --git a/inlong-dashboard/src/metas/sinks/defaults/Iceberg.ts b/inlong-dashboard/src/metas/sinks/defaults/Iceberg.ts
index fe033eda9..f7d06190a 100644
--- a/inlong-dashboard/src/metas/sinks/defaults/Iceberg.ts
+++ b/inlong-dashboard/src/metas/sinks/defaults/Iceberg.ts
@@ -24,6 +24,7 @@ import i18n from '@/i18n';
 import EditableTable from '@/components/EditableTable';
 import { sourceFields } from '../common/sourceFields';
 import { SinkInfo } from '../common/SinkInfo';
+import NodeSelect from '@/components/NodeSelect';
 
 const { I18n } = DataWithBackend;
 const { FieldDecorator } = RenderRow;
@@ -154,34 +155,14 @@ export default class IcebergSink
   enableCreateResource: number;
 
   @FieldDecorator({
-    type: 'select',
+    type: NodeSelect,
     rules: [{ required: true }],
     props: values => ({
-      showSearch: true,
       disabled: [110, 130].includes(values?.status),
-      options: {
-        requestTrigger: ['onOpen', 'onSearch'],
-        requestService: keyword => ({
-          url: '/node/list',
-          method: 'POST',
-          data: {
-            keyword,
-            type: 'ICEBERG',
-            pageNum: 1,
-            pageSize: 20,
-          },
-        }),
-        requestParams: {
-          formatResult: result =>
-            result?.list?.map(item => ({
-              label: item.name,
-              value: item.name,
-            })),
-        },
-      },
+      nodeType: 'ICEBERG',
     }),
   })
-  @I18n('meta.Sinks.Iceberg.DataNodeName')
+  @I18n('meta.Sinks.DataNodeName')
   dataNodeName: string;
 
   @FieldDecorator({
diff --git a/inlong-dashboard/src/metas/sinks/defaults/MySQL.ts b/inlong-dashboard/src/metas/sinks/defaults/MySQL.ts
index ac63f8746..d53acd518 100644
--- a/inlong-dashboard/src/metas/sinks/defaults/MySQL.ts
+++ b/inlong-dashboard/src/metas/sinks/defaults/MySQL.ts
@@ -22,6 +22,7 @@ import i18n from '@/i18n';
 import EditableTable from '@/components/EditableTable';
 import { sourceFields } from '../common/sourceFields';
 import { SinkInfo } from '../common/SinkInfo';
+import NodeSelect from '@/components/NodeSelect';
 
 const { I18n } = DataWithBackend;
 const { FieldDecorator } = RenderRow;
@@ -108,34 +109,14 @@ export default class HiveSink extends SinkInfo implements DataWithBackend, Rende
   enableCreateResource: number;
 
   @FieldDecorator({
-    type: 'select',
+    type: NodeSelect,
     rules: [{ required: true }],
     props: values => ({
-      showSearch: true,
       disabled: [110, 130].includes(values?.status),
-      options: {
-        requestTrigger: ['onOpen', 'onSearch'],
-        requestService: keyword => ({
-          url: '/node/list',
-          method: 'POST',
-          data: {
-            keyword,
-            type: 'MYSQL',
-            pageNum: 1,
-            pageSize: 20,
-          },
-        }),
-        requestParams: {
-          formatResult: result =>
-            result?.list?.map(item => ({
-              label: item.name,
-              value: item.name,
-            })),
-        },
-      },
+      nodeType: 'MYSQL',
     }),
   })
-  @I18n('meta.Sinks.MySQL.DataNodeName')
+  @I18n('meta.Sinks.DataNodeName')
   dataNodeName: string;
 
   @FieldDecorator({
diff --git a/inlong-dashboard/src/metas/sinks/defaults/StarRocks.ts b/inlong-dashboard/src/metas/sinks/defaults/StarRocks.ts
index c0fde2545..82823a0ed 100644
--- a/inlong-dashboard/src/metas/sinks/defaults/StarRocks.ts
+++ b/inlong-dashboard/src/metas/sinks/defaults/StarRocks.ts
@@ -22,6 +22,7 @@ import i18n from '@/i18n';
 import EditableTable from '@/components/EditableTable';
 import { sourceFields } from '../common/sourceFields';
 import { SinkInfo } from '../common/SinkInfo';
+import NodeSelect from '@/components/NodeSelect';
 
 const { I18n } = DataWithBackend;
 const { FieldDecorator } = RenderRow;
@@ -61,34 +62,14 @@ export default class StarRocksSink
   implements DataWithBackend, RenderRow, RenderList
 {
   @FieldDecorator({
-    type: 'select',
+    type: NodeSelect,
     rules: [{ required: true }],
     props: values => ({
-      showSearch: true,
       disabled: [110, 130].includes(values?.status),
-      options: {
-        requestTrigger: ['onOpen', 'onSearch'],
-        requestService: keyword => ({
-          url: '/node/list',
-          method: 'POST',
-          data: {
-            keyword,
-            type: 'STARROCKS',
-            pageNum: 1,
-            pageSize: 20,
-          },
-        }),
-        requestParams: {
-          formatResult: result =>
-            result?.list?.map(item => ({
-              label: item.name,
-              value: item.name,
-            })),
-        },
-      },
+      nodeType: 'STARROCKS',
     }),
   })
-  @I18n('meta.Sinks.StarRocks.DataNodeName')
+  @I18n('meta.Sinks.DataNodeName')
   dataNodeName: string;
 
   @FieldDecorator({