From e0d7f8d2e4108009d3b578f106afd706c00dc4fb Mon Sep 17 00:00:00 2001
From: kamianlaida <165994047+wohainilaodou@users.noreply.github.com>
Date: Thu, 26 Sep 2024 13:17:16 +0800
Subject: [PATCH] [INLONG-11197][Dashboard] Add delete button to cluster
 management and template management (#11198)

---
 .../src/ui/pages/GroupDataTemplate/index.tsx  | 28 +++++++++++++++++--
 .../src/ui/pages/TenantManagement/config.tsx  |  6 +++-
 .../src/ui/pages/TenantManagement/index.tsx   | 25 ++++++++++++++---
 3 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/inlong-dashboard/src/ui/pages/GroupDataTemplate/index.tsx b/inlong-dashboard/src/ui/pages/GroupDataTemplate/index.tsx
index 530fb6d5658..1a3326b179d 100644
--- a/inlong-dashboard/src/ui/pages/GroupDataTemplate/index.tsx
+++ b/inlong-dashboard/src/ui/pages/GroupDataTemplate/index.tsx
@@ -18,7 +18,7 @@
  */
 
 import React, { useCallback, useMemo, useState } from 'react';
-import { Button } from 'antd';
+import { Button, message, Modal } from 'antd';
 import i18n from '@/i18n';
 import HighTable from '@/ui/components/HighTable';
 import { PageContainer } from '@/ui/components/PageContainer';
@@ -26,6 +26,7 @@ import { defaultSize } from '@/configs/pagination';
 import { useRequest } from '@/ui/hooks';
 import CreateModal from './CreateModal';
 import { timestampFormat } from '@/core/utils';
+import request from '@/core/utils/request';
 
 const Comp: React.FC = () => {
   const [options, setOptions] = useState({
@@ -101,6 +102,26 @@ const Comp: React.FC = () => {
     ],
     [],
   );
+  const onDelete = useCallback(
+    record => {
+      console.log(record);
+      Modal.confirm({
+        title: i18n.t('basic.DeleteConfirm'),
+        onOk: async () => {
+          await request({
+            url: `/template/delete`,
+            method: 'DELETE',
+            params: {
+              templateName: record.name,
+            },
+          });
+          await getList();
+          message.success(i18n.t('basic.DeleteSuccess'));
+        },
+      });
+    },
+    [getList],
+  );
   const entityColumns = useMemo(() => {
     return [
       {
@@ -157,12 +178,15 @@ const Comp: React.FC = () => {
       {
         title: i18n.t('basic.Operating'),
         dataIndex: 'action',
-        width: 100,
+        width: 150,
         render: (text, record) => (
           <>
             <Button type="link" onClick={() => onEdit(record)}>
               {i18n.t('basic.Edit')}
             </Button>
+            <Button type="link" onClick={() => onDelete(record)}>
+              {i18n.t('basic.Delete')}
+            </Button>
           </>
         ),
       } as any,
diff --git a/inlong-dashboard/src/ui/pages/TenantManagement/config.tsx b/inlong-dashboard/src/ui/pages/TenantManagement/config.tsx
index e4827d7100e..4f651fc32cc 100644
--- a/inlong-dashboard/src/ui/pages/TenantManagement/config.tsx
+++ b/inlong-dashboard/src/ui/pages/TenantManagement/config.tsx
@@ -29,7 +29,7 @@ export const getFilterFormContent = () => [
   },
 ];
 
-export const getColumns = ({ onEdit }) => {
+export const getColumns = ({ onEdit, onDelete }) => {
   return [
     {
       title: i18n.t('pages.Tenant.config.Name'),
@@ -70,11 +70,15 @@ export const getColumns = ({ onEdit }) => {
     {
       title: i18n.t('basic.Operating'),
       dataIndex: 'action',
+      width: 150,
       render: (text, record) => (
         <>
           <Button type="link" onClick={() => onEdit(record)}>
             {i18n.t('basic.Edit')}
           </Button>
+          <Button type="link" onClick={() => onDelete(record)}>
+            {i18n.t('basic.Delete')}
+          </Button>
         </>
       ),
     },
diff --git a/inlong-dashboard/src/ui/pages/TenantManagement/index.tsx b/inlong-dashboard/src/ui/pages/TenantManagement/index.tsx
index f0012b1584b..757858daadd 100644
--- a/inlong-dashboard/src/ui/pages/TenantManagement/index.tsx
+++ b/inlong-dashboard/src/ui/pages/TenantManagement/index.tsx
@@ -17,8 +17,8 @@
  * under the License.
  */
 
-import React, { useEffect, useState } from 'react';
-import { Button, Card } from 'antd';
+import React, { useCallback, useEffect, useState } from 'react';
+import { Button, Card, message, Modal } from 'antd';
 import { PageContainer, Container } from '@/ui/components/PageContainer';
 import HighTable from '@/ui/components/HighTable';
 import { useRequest } from '@/ui/hooks';
@@ -26,6 +26,8 @@ import { useTranslation } from 'react-i18next';
 import { defaultSize } from '@/configs/pagination';
 import DetailModal from './DetailModal';
 import { getFilterFormContent, getColumns } from './config';
+import i18n from 'i18next';
+import request from '@/core/utils/request';
 
 const Comp: React.FC = () => {
   const { t } = useTranslation();
@@ -114,7 +116,22 @@ const Comp: React.FC = () => {
     current: options.pageNum,
     total: data?.total,
   };
-
+  const onDelete = useCallback(
+    ({ id }) => {
+      Modal.confirm({
+        title: i18n.t('basic.DeleteConfirm'),
+        onOk: async () => {
+          await request({
+            url: `/role/tenant/delete/${id}`,
+            method: 'DELETE',
+          });
+          await getList();
+          message.success(i18n.t('basic.DeleteSuccess'));
+        },
+      });
+    },
+    [getList],
+  );
   return (
     <PageContainer useDefaultBreadcrumb={false} useDefaultContainer={false}>
       <Container>
@@ -130,7 +147,7 @@ const Comp: React.FC = () => {
               onFilter,
             }}
             table={{
-              columns: getColumns({ onEdit }),
+              columns: getColumns({ onEdit, onDelete }),
               rowKey: 'id',
               dataSource: data?.list,
               pagination,