(inlong) branch master updated: [INLONG-10504][Dashboard] Added details button to tag management (#10587)

[dockerzhang]

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

dockerzhang 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 f1845a8d42 [INLONG-10504][Dashboard] Added details button to tag 
management (#10587)
f1845a8d42 is described below

commit f1845a8d4247a989c5cd820b4efe8d35e6003d06
Author: kamianlaida <165994047+wohainilao...@users.noreply.github.com>
AuthorDate: Fri Jul 12 16:42:27 2024 +0800

    [INLONG-10504][Dashboard] Added details button to tag management (#10587)
---
 .../src/ui/pages/ClusterTags/ClusterList.tsx       | 36 +++++++++++++++++++---
 1 file changed, 32 insertions(+), 4 deletions(-)

diff --git a/inlong-dashboard/src/ui/pages/ClusterTags/ClusterList.tsx 
b/inlong-dashboard/src/ui/pages/ClusterTags/ClusterList.tsx
index 2fe8661d2d..5e33dbe875 100644
--- a/inlong-dashboard/src/ui/pages/ClusterTags/ClusterList.tsx
+++ b/inlong-dashboard/src/ui/pages/ClusterTags/ClusterList.tsx
@@ -27,6 +27,7 @@ import { clusters } from '@/plugins/clusters';
 import ClusterBindModal from './ClusterBindModal';
 import request from '@/core/utils/request';
 import { timestampFormat } from '@/core/utils';
+import CreateModal from '@/ui/pages/Clusters/CreateModal';
 
 export interface ClusterListProps {
   clusterTag: string;
@@ -106,7 +107,12 @@ const Comp: React.FC<ClusterListProps> = ({ clusterTag }) 
=> {
     },
     [clusterTag, getList],
   );
-
+  const [createModal, setCreateModal] = useState<Record<string, unknown>>({
+    open: false,
+  });
+  function onshowCluster(id, type) {
+    setCreateModal({ open: true, id: id, type: type });
+  }
   const onChange = ({ current: pageNum, pageSize }) => {
     setOptions(prev => ({
       ...prev,
@@ -142,9 +148,14 @@ const Comp: React.FC<ClusterListProps> = ({ clusterTag }) 
=> {
         ellipsisMulti: 2,
       },
       {
-        title: i18n.t('pages.Clusters.Description'),
-        dataIndex: 'description',
+        title: i18n.t('pages.Clusters.Type'),
+        dataIndex: 'type',
         ellipsisMulti: 2,
+        render: (text, record) => (
+          <>
+            <div>{text.toLowerCase()}</div>
+          </>
+        ),
       },
       {
         title: i18n.t('basic.Creator'),
@@ -174,13 +185,20 @@ const Comp: React.FC<ClusterListProps> = ({ clusterTag }) 
=> {
       {
         title: i18n.t('basic.Operating'),
         dataIndex: 'action',
-        width: 200,
+        width: 150,
         render: (text, record) => (
           <>
             {/* <Button type="link">{i18n.t('basic.Detail')}</Button> */}
             <Button type="link" onClick={() => onDelete(record)}>
               {i18n.t('pages.ClusterTags.DelCluster')}
             </Button>
+            <Button
+              style={{ marginLeft: '20px' }}
+              type="link"
+              onClick={() => onshowCluster(record.id, record.type)}
+            >
+              {i18n.t('basic.Detail')}
+            </Button>
           </>
         ),
       } as any,
@@ -219,6 +237,16 @@ const Comp: React.FC<ClusterListProps> = ({ clusterTag }) 
=> {
         }}
         onCancel={() => setClusterBindModal({ open: false })}
       />
+      <CreateModal
+        {...createModal}
+        defaultType={options.type}
+        open={createModal.open as boolean}
+        onOk={async () => {
+          await getList();
+          setCreateModal({ open: false });
+        }}
+        onCancel={() => setCreateModal({ open: false })}
+      />
     </>
   );
 };