[inlong] 04/07: [INLONG-6482][Dashboard] Sink management distinguishes between save-only and save-and-submit processes (#6483)

[do...@apache.org]

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

dockerzhang pushed a commit to branch branch-1.4
in repository https://gitbox.apache.org/repos/asf/inlong.git

commit 1d298a1b8a26c6e1f707bdb84bc83198edf92f79
Author: Daniel <le...@apache.org>
AuthorDate: Wed Nov 9 17:46:10 2022 +0800

    [INLONG-6482][Dashboard] Sink management distinguishes between save-only and save-and-submit processes (#6483)
---
 inlong-dashboard/src/locales/cn.json               |  3 +++
 inlong-dashboard/src/locales/en.json               |  3 +++
 .../src/metas/groups/defaults/index.ts             |  2 +-
 .../pages/GroupDetail/DataStorage/DetailModal.tsx  | 24 +++++++++++++++++++---
 .../src/pages/GroupDetail/DataStorage/index.tsx    |  1 +
 5 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/inlong-dashboard/src/locales/cn.json b/inlong-dashboard/src/locales/cn.json
index e99371b9c..44ad7e605 100644
--- a/inlong-dashboard/src/locales/cn.json
+++ b/inlong-dashboard/src/locales/cn.json
@@ -384,6 +384,9 @@
   "pages.GroupDetail.Sink.Status.Pending": "配置中",
   "pages.GroupDetail.Sink.Status.Error": "配置失败",
   "pages.GroupDetail.Sink.Status.Success": "配置成功",
+  "pages.GroupDetail.Sink.Cancel": "取消",
+  "pages.GroupDetail.Sink.Save": "仅保存",
+  "pages.GroupDetail.Sink.SaveAndRun": "保存并提交流程",
   "pages.GroupDetail.Stream.StreamConfigTitle": "数据流配置",
   "pages.GroupDetail.Stream.CreateDataStream": "新建数据流",
   "pages.GroupDetail.PageTitle": "详情",
diff --git a/inlong-dashboard/src/locales/en.json b/inlong-dashboard/src/locales/en.json
index 255f56996..ecdfcfa24 100644
--- a/inlong-dashboard/src/locales/en.json
+++ b/inlong-dashboard/src/locales/en.json
@@ -384,6 +384,9 @@
   "pages.GroupDetail.Sink.Status.Pending": "Pending",
   "pages.GroupDetail.Sink.Status.Error": "Error",
   "pages.GroupDetail.Sink.Status.Success": "Success",
+  "pages.GroupDetail.Sink.Cancel": "Cancel",
+  "pages.GroupDetail.Sink.Save": "Save",
+  "pages.GroupDetail.Sink.SaveAndRun": "Save and submit the process",
   "pages.GroupDetail.Stream.StreamConfigTitle": "Data stream configuration",
   "pages.GroupDetail.Stream.CreateDataStream": "Create",
   "pages.GroupDetail.PageTitle": "Detail",
diff --git a/inlong-dashboard/src/metas/groups/defaults/index.ts b/inlong-dashboard/src/metas/groups/defaults/index.ts
index e68379f4a..1eacc5e5b 100644
--- a/inlong-dashboard/src/metas/groups/defaults/index.ts
+++ b/inlong-dashboard/src/metas/groups/defaults/index.ts
@@ -37,7 +37,7 @@ export const allDefaultGroups: MetaExportWithBackendList<GroupMetaType> = [
     LoadEntity: () => import('./Pulsar'),
   },
   {
-    label: 'TubeMq',
+    label: 'TubeMQ',
     value: 'TUBEMQ',
     LoadEntity: () => import('./TubeMq'),
   },
diff --git a/inlong-dashboard/src/pages/GroupDetail/DataStorage/DetailModal.tsx b/inlong-dashboard/src/pages/GroupDetail/DataStorage/DetailModal.tsx
index bba88d61b..0e5489545 100644
--- a/inlong-dashboard/src/pages/GroupDetail/DataStorage/DetailModal.tsx
+++ b/inlong-dashboard/src/pages/GroupDetail/DataStorage/DetailModal.tsx
@@ -18,7 +18,7 @@
  */
 
 import React, { useMemo, useState } from 'react';
-import { Skeleton, Modal, message } from 'antd';
+import { Button, Skeleton, Modal, message } from 'antd';
 import { ModalProps } from 'antd/es/modal';
 import { useRequest, useUpdateEffect } from '@/hooks';
 import { useTranslation } from 'react-i18next';
@@ -84,7 +84,7 @@ const Comp: React.FC<DetailModalProps> = ({ inlongGroupId, id, ...modalProps })
     return Entity ? new Entity().renderRow() : [];
   }, [Entity]);
 
-  const onOk = async () => {
+  const onOk = async (startProcess = false) => {
     const values = await form.validateFields();
     const submitData = new Entity()?.stringify(values) || values;
     const isUpdate = Boolean(id);
@@ -92,6 +92,9 @@ const Comp: React.FC<DetailModalProps> = ({ inlongGroupId, id, ...modalProps })
       submitData.id = id;
       submitData.version = data?.version;
     }
+    if (startProcess) {
+      submitData.startProcess = true;
+    }
     await request({
       url: isUpdate ? '/sink/update' : '/sink/save',
       method: 'POST',
@@ -105,7 +108,22 @@ const Comp: React.FC<DetailModalProps> = ({ inlongGroupId, id, ...modalProps })
   };
 
   return (
-    <Modal title="Sink" width={1200} {...modalProps} onOk={onOk}>
+    <Modal
+      title="Sink"
+      width={1200}
+      {...modalProps}
+      footer={[
+        <Button key="cancel" onClick={modalProps.onCancel}>
+          {t('pages.GroupDetail.Sink.Cancel')}
+        </Button>,
+        <Button key="save" type="primary" onClick={() => onOk(false)}>
+          {t('pages.GroupDetail.Sink.Save')}
+        </Button>,
+        <Button key="run" type="primary" onClick={() => onOk(true)}>
+          {t('pages.GroupDetail.Sink.SaveAndRun')}
+        </Button>,
+      ]}
+    >
       {loading ? (
         <Skeleton active />
       ) : (
diff --git a/inlong-dashboard/src/pages/GroupDetail/DataStorage/index.tsx b/inlong-dashboard/src/pages/GroupDetail/DataStorage/index.tsx
index cdada63ba..3c836da23 100644
--- a/inlong-dashboard/src/pages/GroupDetail/DataStorage/index.tsx
+++ b/inlong-dashboard/src/pages/GroupDetail/DataStorage/index.tsx
@@ -76,6 +76,7 @@ const Comp = ({ inlongGroupId, readonly }: Props, ref) => {
             method: 'DELETE',
             params: {
               sinkType: options.sinkType,
+              startProcess: true,
             },
           });
           await getList();