You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@inlong.apache.org by "featzhang (via GitHub)" <gi...@apache.org> on 2023/04/14 14:07:26 UTC

[GitHub] [inlong] featzhang opened a new pull request, #7860: [INLONG-7789][Dashboard] Support create stream fields by statement

featzhang opened a new pull request, #7860:
URL: https://github.com/apache/inlong/pull/7860

   [INLONG-7789][Dashboard] Support create stream fields by statement
   
   - Fixes #7789 
   
   ![image](https://user-images.githubusercontent.com/5709212/232067628-43ef031d-a431-4d61-8ce7-fba4103a32cd.png)
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@inlong.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [inlong] featzhang commented on a diff in pull request #7860: [INLONG-7789][Dashboard] Support create stream fields by statement

Posted by "featzhang (via GitHub)" <gi...@apache.org>.
featzhang commented on code in PR #7860:
URL: https://github.com/apache/inlong/pull/7860#discussion_r1178073490


##########
inlong-dashboard/src/ui/locales/cn.json:
##########
@@ -505,6 +505,17 @@
   "meta.Nodes.Kudu.DefaultSocketReadTimeoutMs": "等待Socket默认超时(ms)",
   "meta.Nodes.Kudu.StatisticsDisabled": "禁用统计信息收集",
   "components.EditableTable.NewLine": "新增一行",
+  "components.EditableTable.BatchAddField": "批量解析字段",

Review Comment:
   fixed



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@inlong.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [inlong] healchow merged pull request #7860: [INLONG-7789][Dashboard] Support create stream fields by statement

Posted by "healchow (via GitHub)" <gi...@apache.org>.
healchow merged PR #7860:
URL: https://github.com/apache/inlong/pull/7860


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@inlong.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [inlong] dockerzhang commented on pull request #7860: [INLONG-7789][Dashboard] Support create stream fields by statement

Posted by "dockerzhang (via GitHub)" <gi...@apache.org>.
dockerzhang commented on PR #7860:
URL: https://github.com/apache/inlong/pull/7860#issuecomment-1521397956

   @featzhang please add an English image example other than Chinese, thanks.


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@inlong.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [inlong] featzhang commented on pull request #7860: [INLONG-7789][Dashboard] Support create stream fields by statement

Posted by "featzhang (via GitHub)" <gi...@apache.org>.
featzhang commented on PR #7860:
URL: https://github.com/apache/inlong/pull/7860#issuecomment-1523646144

   > @featzhang please add an English image example other than Chinese, thanks.
   
   done


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@inlong.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [inlong] dockerzhang commented on a diff in pull request #7860: [INLONG-7789][Dashboard] Support create stream fields by statement

Posted by "dockerzhang (via GitHub)" <gi...@apache.org>.
dockerzhang commented on code in PR #7860:
URL: https://github.com/apache/inlong/pull/7860#discussion_r1176274557


##########
inlong-dashboard/src/ui/components/FieldParseModule/index.tsx:
##########
@@ -0,0 +1,400 @@
+/*
+ * 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, { useState } from 'react';
+import { Button, Divider, Input, message, Modal, Radio, Space, Table } from 'antd';
+
+import {
+  CopyOutlined,
+  DatabaseOutlined,
+  DeleteOutlined,
+  DownloadOutlined,
+  FileAddOutlined,
+  FileExcelOutlined,
+  FileOutlined,
+  ForkOutlined,
+  FormOutlined,
+  PlayCircleOutlined,
+  PlusOutlined,
+  ReloadOutlined,
+  UploadOutlined,
+} from '@ant-design/icons';
+import { useRequest } from '@/ui/hooks';
+import { useTranslation } from 'react-i18next';
+
+export interface RowType {
+  name: string;
+  type: string;
+  desc: string;
+}
+
+interface FieldParseModuleProps {
+  visible: boolean;
+  onOverride: (fields: RowType[]) => void;
+  onAppend: (fields: RowType[]) => void;
+  onHide: () => void; // added onHide callback
+}
+
+const FieldParseModule: React.FC<FieldParseModuleProps> = ({
+  onOverride,
+  onAppend,
+  visible,
+  onHide,
+}) => {
+  const { t } = useTranslation();
+
+  const [selectedFormat, setSelectedFormat] = useState('json');
+
+  const [statement, setStatement] = useState('');
+  const [previewData, setPreviewData] = useState<RowType[]>([]);
+
+  const handleCancel = () => {
+    onHide(); // call onHide callback when closing module
+  };
+
+  const handleFormat = () => {
+    // 实现handleFormat函数,对statement按照selectFormat的格式进行代码格式化。

Review Comment:
   Please use English annotation.



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@inlong.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [inlong] featzhang commented on a diff in pull request #7860: [INLONG-7789][Dashboard] Support create stream fields by statement

Posted by "featzhang (via GitHub)" <gi...@apache.org>.
featzhang commented on code in PR #7860:
URL: https://github.com/apache/inlong/pull/7860#discussion_r1178072982


##########
inlong-dashboard/src/ui/locales/en.json:
##########
@@ -505,6 +505,17 @@
   "meta.Nodes.Kudu.DefaultSocketReadTimeoutMs": "SocketReadTimeout(ms)",
   "meta.Nodes.Kudu.StatisticsDisabled": "DisabledStatistics",
   "components.EditableTable.NewLine": "New line",
+  "components.EditableTable.BatchAddField": "Batch add",
+  "components.EditableTable.DeleteAll": "Delete all",
+  "components.FieldParseModule.BatchAddField": "Batch add",

Review Comment:
   fixed



##########
inlong-dashboard/src/ui/locales/en.json:
##########
@@ -505,6 +505,17 @@
   "meta.Nodes.Kudu.DefaultSocketReadTimeoutMs": "SocketReadTimeout(ms)",
   "meta.Nodes.Kudu.StatisticsDisabled": "DisabledStatistics",
   "components.EditableTable.NewLine": "New line",
+  "components.EditableTable.BatchAddField": "Batch add",

Review Comment:
   fixed



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@inlong.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [inlong] featzhang commented on a diff in pull request #7860: [INLONG-7789][Dashboard] Support create stream fields by statement

Posted by "featzhang (via GitHub)" <gi...@apache.org>.
featzhang commented on code in PR #7860:
URL: https://github.com/apache/inlong/pull/7860#discussion_r1176803235


##########
inlong-dashboard/src/ui/components/FieldParseModule/index.tsx:
##########
@@ -0,0 +1,400 @@
+/*
+ * 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, { useState } from 'react';
+import { Button, Divider, Input, message, Modal, Radio, Space, Table } from 'antd';
+
+import {
+  CopyOutlined,
+  DatabaseOutlined,
+  DeleteOutlined,
+  DownloadOutlined,
+  FileAddOutlined,
+  FileExcelOutlined,
+  FileOutlined,
+  ForkOutlined,
+  FormOutlined,
+  PlayCircleOutlined,
+  PlusOutlined,
+  ReloadOutlined,
+  UploadOutlined,
+} from '@ant-design/icons';
+import { useRequest } from '@/ui/hooks';
+import { useTranslation } from 'react-i18next';
+
+export interface RowType {
+  name: string;
+  type: string;
+  desc: string;
+}
+
+interface FieldParseModuleProps {
+  visible: boolean;
+  onOverride: (fields: RowType[]) => void;
+  onAppend: (fields: RowType[]) => void;
+  onHide: () => void; // added onHide callback
+}
+
+const FieldParseModule: React.FC<FieldParseModuleProps> = ({
+  onOverride,
+  onAppend,
+  visible,
+  onHide,
+}) => {
+  const { t } = useTranslation();
+
+  const [selectedFormat, setSelectedFormat] = useState('json');
+
+  const [statement, setStatement] = useState('');
+  const [previewData, setPreviewData] = useState<RowType[]>([]);
+
+  const handleCancel = () => {
+    onHide(); // call onHide callback when closing module
+  };
+
+  const handleFormat = () => {
+    // 实现handleFormat函数,对statement按照selectFormat的格式进行代码格式化。

Review Comment:
   Fixed



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@inlong.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [inlong] featzhang commented on a diff in pull request #7860: [INLONG-7789][Dashboard] Support create stream fields by statement

Posted by "featzhang (via GitHub)" <gi...@apache.org>.
featzhang commented on code in PR #7860:
URL: https://github.com/apache/inlong/pull/7860#discussion_r1175353091


##########
inlong-dashboard/src/ui/components/EditableTable/index.tsx:
##########
@@ -274,23 +304,300 @@ const EditableTable = ({
         ),
     } as any);
   }
+  const [csvData, setCsvData] = useState('');
+  const [jsonData, setJsonData] = useState('');
+  const [sqlData, setSqlData] = useState('');
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [parseMethod, setParseMethod] = useState('CSV');
+  const [parseStatement, setParseStatement] = useState('');
+  const [previewData, setPreviewData] = useState(null);
+
+  const {
+    loading,
+    data: pData,
+    error,
+    run: runParseFields,
+  } = useRequest(
+    {
+      url: '/stream/parseFields',
+      method: 'POST',
+      data: {
+        method: parseMethod,
+        statement: parseStatement,
+      },
+    },
+    {
+      manual: true,
+      onSuccess: res => {
+        setPreviewData(res);
+      },
+    },
+  );
+
+  const handleParseCsv = () => {
+    setParseMethod('csv');
+    setParseStatement(csvData);
+    runParseFields();
+  };
+
+  const handleParseJSON = () => {
+    setParseMethod('json');
+    setParseStatement(jsonData);
+    runParseFields();
+    // 解析JSON数据
+    message.success('JSON数据解析成功');
+  };
+  const handleParseSQL = () => {
+    setParseMethod('sql');
+    setParseStatement(sqlData);
+    runParseFields();
+    // 解析SQL数据
+    message.success('SQL数据解析成功');
+  };
+  const handleClearCSV = () => {
+    setCsvData('');
+    setPreviewData(null);
+  };
+  const handleClearJSON = () => {
+    setJsonData('');
+  };
+  const handleClearSQL = () => {
+    setSqlData('');
+  };
+  const handleDownloadExcelTemplate = () => {
+    // 下载Excel模板

Review Comment:
   Fixed



##########
inlong-dashboard/src/ui/components/EditableTable/index.tsx:
##########
@@ -274,23 +304,300 @@ const EditableTable = ({
         ),
     } as any);
   }
+  const [csvData, setCsvData] = useState('');
+  const [jsonData, setJsonData] = useState('');
+  const [sqlData, setSqlData] = useState('');
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [parseMethod, setParseMethod] = useState('CSV');
+  const [parseStatement, setParseStatement] = useState('');
+  const [previewData, setPreviewData] = useState(null);
+
+  const {
+    loading,
+    data: pData,
+    error,
+    run: runParseFields,
+  } = useRequest(
+    {
+      url: '/stream/parseFields',
+      method: 'POST',
+      data: {
+        method: parseMethod,
+        statement: parseStatement,
+      },
+    },
+    {
+      manual: true,
+      onSuccess: res => {
+        setPreviewData(res);
+      },
+    },
+  );
+
+  const handleParseCsv = () => {
+    setParseMethod('csv');
+    setParseStatement(csvData);
+    runParseFields();
+  };
+
+  const handleParseJSON = () => {
+    setParseMethod('json');
+    setParseStatement(jsonData);
+    runParseFields();
+    // 解析JSON数据
+    message.success('JSON数据解析成功');
+  };
+  const handleParseSQL = () => {
+    setParseMethod('sql');
+    setParseStatement(sqlData);
+    runParseFields();
+    // 解析SQL数据
+    message.success('SQL数据解析成功');
+  };
+  const handleClearCSV = () => {
+    setCsvData('');
+    setPreviewData(null);
+  };
+  const handleClearJSON = () => {
+    setJsonData('');
+  };
+  const handleClearSQL = () => {
+    setSqlData('');
+  };
+  const handleDownloadExcelTemplate = () => {
+    // 下载Excel模板
+    message.success('Excel模板下载成功');
+  };
+  const handleUploadExcel = () => {
+    // 上传Excel数据并解析

Review Comment:
   Fixed



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@inlong.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [inlong] dockerzhang commented on a diff in pull request #7860: [INLONG-7789][Dashboard] Support create stream fields by statement

Posted by "dockerzhang (via GitHub)" <gi...@apache.org>.
dockerzhang commented on code in PR #7860:
URL: https://github.com/apache/inlong/pull/7860#discussion_r1177456722


##########
inlong-dashboard/src/ui/locales/en.json:
##########
@@ -505,6 +505,17 @@
   "meta.Nodes.Kudu.DefaultSocketReadTimeoutMs": "SocketReadTimeout(ms)",
   "meta.Nodes.Kudu.StatisticsDisabled": "DisabledStatistics",
   "components.EditableTable.NewLine": "New line",
+  "components.EditableTable.BatchAddField": "Batch add",

Review Comment:
   Ditto.



##########
inlong-dashboard/src/ui/locales/en.json:
##########
@@ -505,6 +505,17 @@
   "meta.Nodes.Kudu.DefaultSocketReadTimeoutMs": "SocketReadTimeout(ms)",
   "meta.Nodes.Kudu.StatisticsDisabled": "DisabledStatistics",
   "components.EditableTable.NewLine": "New line",
+  "components.EditableTable.BatchAddField": "Batch add",
+  "components.EditableTable.DeleteAll": "Delete all",
+  "components.FieldParseModule.BatchAddField": "Batch add",

Review Comment:
   Batch add -> Batch adding



##########
inlong-dashboard/src/ui/locales/cn.json:
##########
@@ -505,6 +505,17 @@
   "meta.Nodes.Kudu.DefaultSocketReadTimeoutMs": "等待Socket默认超时(ms)",
   "meta.Nodes.Kudu.StatisticsDisabled": "禁用统计信息收集",
   "components.EditableTable.NewLine": "新增一行",
+  "components.EditableTable.BatchAddField": "批量解析字段",

Review Comment:
   `components.EditableTable.BatchParseField`?



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@inlong.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [inlong] dockerzhang commented on a diff in pull request #7860: [INLONG-7789][Dashboard] Support create stream fields by statement

Posted by "dockerzhang (via GitHub)" <gi...@apache.org>.
dockerzhang commented on code in PR #7860:
URL: https://github.com/apache/inlong/pull/7860#discussion_r1171997494


##########
inlong-dashboard/src/ui/components/EditableTable/index.tsx:
##########
@@ -274,23 +304,300 @@ const EditableTable = ({
         ),
     } as any);
   }
+  const [csvData, setCsvData] = useState('');
+  const [jsonData, setJsonData] = useState('');
+  const [sqlData, setSqlData] = useState('');
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [parseMethod, setParseMethod] = useState('CSV');
+  const [parseStatement, setParseStatement] = useState('');
+  const [previewData, setPreviewData] = useState(null);
+
+  const {
+    loading,
+    data: pData,
+    error,
+    run: runParseFields,
+  } = useRequest(
+    {
+      url: '/stream/parseFields',
+      method: 'POST',
+      data: {
+        method: parseMethod,
+        statement: parseStatement,
+      },
+    },
+    {
+      manual: true,
+      onSuccess: res => {
+        setPreviewData(res);
+      },
+    },
+  );
+
+  const handleParseCsv = () => {
+    setParseMethod('csv');
+    setParseStatement(csvData);
+    runParseFields();
+  };
+
+  const handleParseJSON = () => {
+    setParseMethod('json');
+    setParseStatement(jsonData);
+    runParseFields();
+    // 解析JSON数据
+    message.success('JSON数据解析成功');
+  };
+  const handleParseSQL = () => {
+    setParseMethod('sql');
+    setParseStatement(sqlData);
+    runParseFields();
+    // 解析SQL数据
+    message.success('SQL数据解析成功');
+  };
+  const handleClearCSV = () => {
+    setCsvData('');
+    setPreviewData(null);
+  };
+  const handleClearJSON = () => {
+    setJsonData('');
+  };
+  const handleClearSQL = () => {
+    setSqlData('');
+  };
+  const handleDownloadExcelTemplate = () => {
+    // 下载Excel模板

Review Comment:
   Please use English for annotation.



##########
inlong-dashboard/src/ui/components/EditableTable/index.tsx:
##########
@@ -274,23 +304,300 @@ const EditableTable = ({
         ),
     } as any);
   }
+  const [csvData, setCsvData] = useState('');
+  const [jsonData, setJsonData] = useState('');
+  const [sqlData, setSqlData] = useState('');
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [parseMethod, setParseMethod] = useState('CSV');
+  const [parseStatement, setParseStatement] = useState('');
+  const [previewData, setPreviewData] = useState(null);
+
+  const {
+    loading,
+    data: pData,
+    error,
+    run: runParseFields,
+  } = useRequest(
+    {
+      url: '/stream/parseFields',
+      method: 'POST',
+      data: {
+        method: parseMethod,
+        statement: parseStatement,
+      },
+    },
+    {
+      manual: true,
+      onSuccess: res => {
+        setPreviewData(res);
+      },
+    },
+  );
+
+  const handleParseCsv = () => {
+    setParseMethod('csv');
+    setParseStatement(csvData);
+    runParseFields();
+  };
+
+  const handleParseJSON = () => {
+    setParseMethod('json');
+    setParseStatement(jsonData);
+    runParseFields();
+    // 解析JSON数据
+    message.success('JSON数据解析成功');
+  };
+  const handleParseSQL = () => {
+    setParseMethod('sql');
+    setParseStatement(sqlData);
+    runParseFields();
+    // 解析SQL数据
+    message.success('SQL数据解析成功');
+  };
+  const handleClearCSV = () => {
+    setCsvData('');
+    setPreviewData(null);
+  };
+  const handleClearJSON = () => {
+    setJsonData('');
+  };
+  const handleClearSQL = () => {
+    setSqlData('');
+  };
+  const handleDownloadExcelTemplate = () => {
+    // 下载Excel模板
+    message.success('Excel模板下载成功');
+  };
+  const handleUploadExcel = () => {
+    // 上传Excel数据并解析

Review Comment:
   ditto



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@inlong.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org