You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@inlong.apache.org by do...@apache.org on 2023/04/03 03:24:11 UTC

[inlong] branch master updated: [INLONG-7756][Dashboard] Group logs can not display (#7757)

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 d8ec9467d [INLONG-7756][Dashboard] Group logs can not display (#7757)
d8ec9467d is described below

commit d8ec9467dd3814142e0a5dcc721f017f2c5bfc28
Author: Daniel <le...@apache.org>
AuthorDate: Mon Apr 3 11:24:05 2023 +0800

    [INLONG-7756][Dashboard] Group logs can not display (#7757)
---
 .../src/ui/components/HighSelect/index.tsx         |   1 +
 .../src/ui/components/Layout/NavWidget/index.tsx   |  20 ++--
 .../src/ui/components/UserSelect/index.tsx         |  10 +-
 .../src/ui/pages/ClusterTags/ClusterList.tsx       |  10 +-
 .../src/ui/pages/ClusterTags/index.module.less     |  10 +-
 .../src/ui/pages/ClusterTags/index.tsx             | 133 +++++++++++----------
 .../src/ui/pages/Clusters/NodeManage.tsx           |  12 +-
 inlong-dashboard/src/ui/pages/Clusters/index.tsx   |  12 +-
 .../src/ui/pages/GroupDashboard/index.tsx          |   8 +-
 .../src/ui/pages/GroupDetail/DataSources/index.tsx |  12 +-
 .../src/ui/pages/GroupDetail/DataStorage/index.tsx |  12 +-
 .../src/ui/pages/GroupDetail/DataStream/index.tsx  |  18 +--
 inlong-dashboard/src/ui/pages/Nodes/index.tsx      |  12 +-
 .../src/ui/pages/ProcessManagement/index.tsx       |  12 +-
 .../src/ui/pages/UserManagement/index.tsx          |  12 +-
 15 files changed, 143 insertions(+), 151 deletions(-)

diff --git a/inlong-dashboard/src/ui/components/HighSelect/index.tsx b/inlong-dashboard/src/ui/components/HighSelect/index.tsx
index c363b108b..0184db11c 100644
--- a/inlong-dashboard/src/ui/components/HighSelect/index.tsx
+++ b/inlong-dashboard/src/ui/components/HighSelect/index.tsx
@@ -153,6 +153,7 @@ const HighSelect: React.FC<HighSelectProps> = ({
   const SelectComponent = (
     <Select
       {...rest}
+      loading={loading}
       showSearch={showSearch}
       placeholder={
         showSearch
diff --git a/inlong-dashboard/src/ui/components/Layout/NavWidget/index.tsx b/inlong-dashboard/src/ui/components/Layout/NavWidget/index.tsx
index 0791bda8b..44568cff5 100644
--- a/inlong-dashboard/src/ui/components/Layout/NavWidget/index.tsx
+++ b/inlong-dashboard/src/ui/components/Layout/NavWidget/index.tsx
@@ -31,11 +31,11 @@ const Comp: React.FC = () => {
   const userName = useSelector<State, State['userName']>(state => state.userName);
 
   const [createModal, setCreateModal] = useState<Record<string, unknown>>({
-    visible: false,
+    open: false,
   });
 
   const [keyModal, setKeyModal] = useState<Record<string, unknown>>({
-    visible: false,
+    open: false,
   });
 
   const runLogout = async () => {
@@ -47,12 +47,12 @@ const Comp: React.FC = () => {
     {
       label: t('components.Layout.NavWidget.PersonalKey'),
       key: 'mykey',
-      onClick: () => setKeyModal({ visible: true }),
+      onClick: () => setKeyModal({ open: true }),
     },
     {
       label: t('components.Layout.NavWidget.EditPassword'),
       key: 'password',
-      onClick: () => setCreateModal({ visible: true }),
+      onClick: () => setCreateModal({ open: true }),
     },
     {
       label: t('components.Layout.NavWidget.Logout'),
@@ -68,19 +68,19 @@ const Comp: React.FC = () => {
       </Dropdown>
       <PasswordModal
         {...createModal}
-        open={createModal.visible as boolean}
-        onCancel={() => setCreateModal({ visible: false })}
+        open={createModal.open as boolean}
+        onCancel={() => setCreateModal({ open: false })}
         onOk={async () => {
           runLogout();
-          setCreateModal({ visible: false });
+          setCreateModal({ open: false });
         }}
       />
       <KeyModal
         {...keyModal}
-        open={keyModal.visible as boolean}
-        onCancel={() => setKeyModal({ visible: false })}
+        open={keyModal.open as boolean}
+        onCancel={() => setKeyModal({ open: false })}
         onOk={async () => {
-          setKeyModal({ visible: false });
+          setKeyModal({ open: false });
         }}
       />
     </>
diff --git a/inlong-dashboard/src/ui/components/UserSelect/index.tsx b/inlong-dashboard/src/ui/components/UserSelect/index.tsx
index 43b6b8bcc..aa2af2085 100644
--- a/inlong-dashboard/src/ui/components/UserSelect/index.tsx
+++ b/inlong-dashboard/src/ui/components/UserSelect/index.tsx
@@ -126,6 +126,7 @@ const UserSelect: React.FC<UserSelectProps> = ({
               ...item,
               label: item.name,
               value: item.name,
+              disabled: item.value === userName,
             })),
         },
       }}
@@ -133,15 +134,6 @@ const UserSelect: React.FC<UserSelectProps> = ({
       filterOption={false}
       value={currentValue}
       onChange={onValueChange}
-      tagRender={props => (
-        <Tag
-          closable={props.value === userName ? currentUserClosable : true}
-          onClose={props.onClose}
-          style={{ fontSize: '14px', background: '#f5f5f5', border: 'none' }}
-        >
-          {props.label}
-        </Tag>
-      )}
     />
   );
 };
diff --git a/inlong-dashboard/src/ui/pages/ClusterTags/ClusterList.tsx b/inlong-dashboard/src/ui/pages/ClusterTags/ClusterList.tsx
index 892079a3b..3dc5eed84 100644
--- a/inlong-dashboard/src/ui/pages/ClusterTags/ClusterList.tsx
+++ b/inlong-dashboard/src/ui/pages/ClusterTags/ClusterList.tsx
@@ -58,7 +58,7 @@ const Comp: React.FC<ClusterListProps> = ({ clusterTag }) => {
   });
 
   const [clusterBindModal, setClusterBindModal] = useState<Record<string, unknown>>({
-    visible: false,
+    open: false,
   });
 
   const {
@@ -172,7 +172,7 @@ const Comp: React.FC<ClusterListProps> = ({ clusterTag }) => {
           onFilter,
         }}
         suffix={
-          <Button type="primary" onClick={() => setClusterBindModal({ visible: true })}>
+          <Button type="primary" onClick={() => setClusterBindModal({ open: true })}>
             {i18n.t('pages.ClusterTags.BindCluster')}
           </Button>
         }
@@ -189,12 +189,12 @@ const Comp: React.FC<ClusterListProps> = ({ clusterTag }) => {
       <ClusterBindModal
         {...clusterBindModal}
         clusterTag={clusterTag}
-        open={clusterBindModal.visible as boolean}
+        open={clusterBindModal.open as boolean}
         onOk={async () => {
           await getList();
-          setClusterBindModal({ visible: false });
+          setClusterBindModal({ open: false });
         }}
-        onCancel={() => setClusterBindModal({ visible: false })}
+        onCancel={() => setClusterBindModal({ open: false })}
       />
     </>
   );
diff --git a/inlong-dashboard/src/ui/pages/ClusterTags/index.module.less b/inlong-dashboard/src/ui/pages/ClusterTags/index.module.less
index 8b54a693f..5d3617992 100644
--- a/inlong-dashboard/src/ui/pages/ClusterTags/index.module.less
+++ b/inlong-dashboard/src/ui/pages/ClusterTags/index.module.less
@@ -19,12 +19,6 @@
 */
 
 .listItem {
- cursor: pointer;
-
- &:global {
-    &:hover,
-    &.is-selected {
-      background-color: #f6f7fb;
-    }
-  }
+  position: relative;
+  cursor: pointer;
 }
diff --git a/inlong-dashboard/src/ui/pages/ClusterTags/index.tsx b/inlong-dashboard/src/ui/pages/ClusterTags/index.tsx
index d35098b10..4121ac2f0 100644
--- a/inlong-dashboard/src/ui/pages/ClusterTags/index.tsx
+++ b/inlong-dashboard/src/ui/pages/ClusterTags/index.tsx
@@ -19,6 +19,7 @@
 
 import React, { useState, useCallback, useMemo } from 'react';
 import { Button, Card, List, Col, Row, Descriptions, Input, Modal, message } from 'antd';
+import { CheckOutlined } from '@ant-design/icons';
 import { PageContainer } from '@/ui/components/PageContainer';
 import { useRequest } from '@/ui/hooks';
 import i18n from '@/i18n';
@@ -37,7 +38,7 @@ const Comp: React.FC = () => {
   const [tagId, setTagId] = useState<number>();
 
   const [tagDetailModal, setTagDetailModal] = useState<Record<string, unknown>>({
-    visible: false,
+    open: false,
   });
 
   const {
@@ -76,7 +77,7 @@ const Comp: React.FC = () => {
   };
 
   const onEdit = useCallback(({ id }) => {
-    setTagDetailModal({ visible: true, id });
+    setTagDetailModal({ open: true, id });
   }, []);
 
   const onDelete = useCallback(
@@ -101,66 +102,70 @@ const Comp: React.FC = () => {
     <PageContainer useDefaultBreadcrumb={false} useDefaultContainer={false}>
       <Row gutter={20}>
         <Col style={{ flex: '0 0 350px' }}>
-          <List
-            size="small"
-            itemLayout="horizontal"
-            loading={loading}
-            pagination={{
-              size: 'small',
-              onChange: onListPageChange,
-              pageSize: 20,
-              total: data?.total,
-            }}
-            dataSource={data?.list}
-            header={
-              <div style={{ display: 'flex', justifyContent: 'space-between', padding: '0 16px' }}>
-                <Input.Search
-                  style={{ flex: '0 1 150px' }}
-                  onSearch={keyword =>
-                    setOptions(prev => ({
-                      ...prev,
-                      keyword,
-                    }))
-                  }
-                />
-                <Button type="primary" onClick={() => setTagDetailModal({ visible: true })}>
-                  {i18n.t('basic.Create')}
-                </Button>
-              </div>
-            }
-            renderItem={(item: Record<string, any>) => (
-              <List.Item
-                actions={[
-                  {
-                    title: i18n.t('basic.Edit'),
-                    action: onEdit,
-                  },
-                  {
-                    title: i18n.t('basic.Delete'),
-                    action: onDelete,
-                  },
-                ].map((k, idx) => (
-                  <Button
-                    key={idx}
-                    type="link"
-                    size="small"
-                    style={{ padding: 0 }}
-                    onClick={e => {
-                      e.stopPropagation();
-                      k.action(item);
-                    }}
-                  >
-                    {k.title}
+          <Card style={{ height: '100%' }}>
+            <List
+              size="small"
+              itemLayout="horizontal"
+              loading={loading}
+              pagination={{
+                size: 'small',
+                onChange: onListPageChange,
+                pageSize: 20,
+                total: data?.total,
+              }}
+              dataSource={data?.list}
+              header={
+                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                  <Input.Search
+                    style={{ flex: '0 1 150px' }}
+                    onSearch={keyword =>
+                      setOptions(prev => ({
+                        ...prev,
+                        keyword,
+                      }))
+                    }
+                  />
+                  <Button type="primary" onClick={() => setTagDetailModal({ open: true })}>
+                    {i18n.t('basic.Create')}
                   </Button>
-                ))}
-                className={`${styles.listItem} ${tagId === item.id ? 'is-selected' : ''}`}
-                onClick={() => setTagId(item.id)}
-              >
-                {item.clusterTag}
-              </List.Item>
-            )}
-            style={{ background: '#fff', height: '100%' }}
-          />
+                </div>
+              }
+              renderItem={(item: Record<string, any>) => (
+                <List.Item
+                  actions={[
+                    {
+                      title: i18n.t('basic.Edit'),
+                      action: onEdit,
+                    },
+                    {
+                      title: i18n.t('basic.Delete'),
+                      action: onDelete,
+                    },
+                  ].map((k, idx) => (
+                    <Button
+                      key={idx}
+                      type="link"
+                      size="small"
+                      style={{ padding: 0 }}
+                      onClick={e => {
+                        e.stopPropagation();
+                        k.action(item);
+                      }}
+                    >
+                      {k.title}
+                    </Button>
+                  ))}
+                  className={styles.listItem}
+                  onClick={() => setTagId(item.id)}
+                >
+                  {tagId === item.id && (
+                    <CheckOutlined style={{ position: 'absolute', left: 0, top: '35%' }} />
+                  )}
+                  {item.clusterTag}
+                </List.Item>
+              )}
+            />
+          </Card>
         </Col>
 
         <Col style={{ flex: '1' }}>
@@ -186,12 +191,12 @@ const Comp: React.FC = () => {
 
       <TagDetailModal
         {...tagDetailModal}
-        open={tagDetailModal.visible as boolean}
+        open={tagDetailModal.open as boolean}
         onOk={async () => {
           await getList();
-          setTagDetailModal({ visible: false });
+          setTagDetailModal({ open: false });
         }}
-        onCancel={() => setTagDetailModal({ visible: false })}
+        onCancel={() => setTagDetailModal({ open: false })}
       />
     </PageContainer>
   );
diff --git a/inlong-dashboard/src/ui/pages/Clusters/NodeManage.tsx b/inlong-dashboard/src/ui/pages/Clusters/NodeManage.tsx
index d1a3aef14..384b1812f 100644
--- a/inlong-dashboard/src/ui/pages/Clusters/NodeManage.tsx
+++ b/inlong-dashboard/src/ui/pages/Clusters/NodeManage.tsx
@@ -52,7 +52,7 @@ const Comp: React.FC = () => {
   });
 
   const [nodeEditModal, setNodeEditModal] = useState<Record<string, unknown>>({
-    visible: false,
+    open: false,
   });
 
   const {
@@ -73,7 +73,7 @@ const Comp: React.FC = () => {
   );
 
   const onEdit = ({ id }) => {
-    setNodeEditModal({ visible: true, id });
+    setNodeEditModal({ open: true, id });
   };
 
   const onDelete = useCallback(
@@ -166,7 +166,7 @@ const Comp: React.FC = () => {
           onFilter,
         }}
         suffix={
-          <Button type="primary" onClick={() => setNodeEditModal({ visible: true })}>
+          <Button type="primary" onClick={() => setNodeEditModal({ open: true })}>
             {i18n.t('pages.Clusters.Node.Create')}
           </Button>
         }
@@ -184,12 +184,12 @@ const Comp: React.FC = () => {
         type={type}
         clusterId={+clusterId}
         {...nodeEditModal}
-        open={nodeEditModal.visible as boolean}
+        open={nodeEditModal.open as boolean}
         onOk={async () => {
           await getList();
-          setNodeEditModal({ visible: false });
+          setNodeEditModal({ open: false });
         }}
-        onCancel={() => setNodeEditModal({ visible: false })}
+        onCancel={() => setNodeEditModal({ open: false })}
       />
     </PageContainer>
   );
diff --git a/inlong-dashboard/src/ui/pages/Clusters/index.tsx b/inlong-dashboard/src/ui/pages/Clusters/index.tsx
index a9a7b8aeb..e44b4a163 100644
--- a/inlong-dashboard/src/ui/pages/Clusters/index.tsx
+++ b/inlong-dashboard/src/ui/pages/Clusters/index.tsx
@@ -41,7 +41,7 @@ const Comp: React.FC = () => {
   });
 
   const [createModal, setCreateModal] = useState<Record<string, unknown>>({
-    visible: false,
+    open: false,
   });
 
   const {
@@ -62,7 +62,7 @@ const Comp: React.FC = () => {
   );
 
   const onEdit = ({ id }) => {
-    setCreateModal({ visible: true, id });
+    setCreateModal({ open: true, id });
   };
 
   const onDelete = useCallback(
@@ -174,7 +174,7 @@ const Comp: React.FC = () => {
           onFilter,
         }}
         suffix={
-          <Button type="primary" onClick={() => setCreateModal({ visible: true })}>
+          <Button type="primary" onClick={() => setCreateModal({ open: true })}>
             {i18n.t('pages.Clusters.Create')}
           </Button>
         }
@@ -191,12 +191,12 @@ const Comp: React.FC = () => {
       <CreateModal
         {...createModal}
         defaultType={options.type}
-        open={createModal.visible as boolean}
+        open={createModal.open as boolean}
         onOk={async () => {
           await getList();
-          setCreateModal({ visible: false });
+          setCreateModal({ open: false });
         }}
-        onCancel={() => setCreateModal({ visible: false })}
+        onCancel={() => setCreateModal({ open: false })}
       />
     </PageContainer>
   );
diff --git a/inlong-dashboard/src/ui/pages/GroupDashboard/index.tsx b/inlong-dashboard/src/ui/pages/GroupDashboard/index.tsx
index e059ad9c9..1c157c425 100644
--- a/inlong-dashboard/src/ui/pages/GroupDashboard/index.tsx
+++ b/inlong-dashboard/src/ui/pages/GroupDashboard/index.tsx
@@ -44,7 +44,7 @@ const Comp: React.FC = () => {
   });
 
   const [groupLogs, setGroupLogs] = useState({
-    visible: false,
+    open: false,
     inlongGroupId: '',
   });
 
@@ -82,7 +82,7 @@ const Comp: React.FC = () => {
   };
 
   const openModal = ({ inlongGroupId }) => {
-    setGroupLogs({ visible: true, inlongGroupId: inlongGroupId });
+    setGroupLogs({ open: true, inlongGroupId: inlongGroupId });
   };
 
   const onRestart = ({ inlongGroupId }) => {
@@ -216,8 +216,8 @@ const Comp: React.FC = () => {
 
       <GroupLogs
         {...groupLogs}
-        onOk={() => setGroupLogs({ visible: false, inlongGroupId: '' })}
-        onCancel={() => setGroupLogs({ visible: false, inlongGroupId: '' })}
+        onOk={() => setGroupLogs({ open: false, inlongGroupId: '' })}
+        onCancel={() => setGroupLogs({ open: false, inlongGroupId: '' })}
       />
     </PageContainer>
   );
diff --git a/inlong-dashboard/src/ui/pages/GroupDetail/DataSources/index.tsx b/inlong-dashboard/src/ui/pages/GroupDetail/DataSources/index.tsx
index a1ae65c0c..14f03ce66 100644
--- a/inlong-dashboard/src/ui/pages/GroupDetail/DataSources/index.tsx
+++ b/inlong-dashboard/src/ui/pages/GroupDetail/DataSources/index.tsx
@@ -58,7 +58,7 @@ const Comp = ({ inlongGroupId, inlongStreamId, readonly }: Props, ref) => {
   const [options, setOptions] = useState(defaultOptions);
 
   const [createModal, setCreateModal] = useState<Record<string, unknown>>({
-    visible: false,
+    open: false,
   });
 
   const {
@@ -81,7 +81,7 @@ const Comp = ({ inlongGroupId, inlongStreamId, readonly }: Props, ref) => {
   );
 
   const onEdit = useCallback(({ id }) => {
-    setCreateModal({ visible: true, id });
+    setCreateModal({ open: true, id });
   }, []);
 
   const onDelete = useCallback(
@@ -243,7 +243,7 @@ const Comp = ({ inlongGroupId, inlongStreamId, readonly }: Props, ref) => {
         style={{ height: '100%' }}
         extra={[
           !readonly && (
-            <Button key="create" type="link" onClick={() => setCreateModal({ visible: true })}>
+            <Button key="create" type="link" onClick={() => setCreateModal({ open: true })}>
               {i18n.t('pages.GroupDetail.Sources.Create')}
             </Button>
           ),
@@ -324,12 +324,12 @@ const Comp = ({ inlongGroupId, inlongStreamId, readonly }: Props, ref) => {
         defaultType={options.sourceType}
         inlongGroupId={inlongGroupId}
         inlongStreamId={inlongStreamId}
-        open={createModal.visible as boolean}
+        open={createModal.open as boolean}
         onOk={async () => {
           await getList();
-          setCreateModal({ visible: false });
+          setCreateModal({ open: false });
         }}
-        onCancel={() => setCreateModal({ visible: false })}
+        onCancel={() => setCreateModal({ open: false })}
       />
     </>
   );
diff --git a/inlong-dashboard/src/ui/pages/GroupDetail/DataStorage/index.tsx b/inlong-dashboard/src/ui/pages/GroupDetail/DataStorage/index.tsx
index 9e155b1ce..7383155e4 100644
--- a/inlong-dashboard/src/ui/pages/GroupDetail/DataStorage/index.tsx
+++ b/inlong-dashboard/src/ui/pages/GroupDetail/DataStorage/index.tsx
@@ -56,7 +56,7 @@ const Comp = ({ inlongGroupId, inlongStreamId, readonly }: Props, ref) => {
   const [options, setOptions] = useState(defaultOptions);
 
   const [createModal, setCreateModal] = useState<Record<string, unknown>>({
-    visible: false,
+    open: false,
   });
 
   const {
@@ -79,7 +79,7 @@ const Comp = ({ inlongGroupId, inlongStreamId, readonly }: Props, ref) => {
   );
 
   const onEdit = useCallback(({ id }) => {
-    setCreateModal({ visible: true, id });
+    setCreateModal({ open: true, id });
   }, []);
 
   const onDelete = useCallback(
@@ -186,7 +186,7 @@ const Comp = ({ inlongGroupId, inlongStreamId, readonly }: Props, ref) => {
         style={{ height: '100%' }}
         extra={[
           !readonly && (
-            <Button key="create" type="link" onClick={() => setCreateModal({ visible: true })}>
+            <Button key="create" type="link" onClick={() => setCreateModal({ open: true })}>
               {i18n.t('pages.GroupDetail.Sink.New')}
             </Button>
           ),
@@ -255,12 +255,12 @@ const Comp = ({ inlongGroupId, inlongStreamId, readonly }: Props, ref) => {
         defaultType={options.sinkType}
         inlongGroupId={inlongGroupId}
         inlongStreamId={inlongStreamId}
-        open={createModal.visible as boolean}
+        open={createModal.open as boolean}
         onOk={async () => {
           await getList();
-          setCreateModal({ visible: false });
+          setCreateModal({ open: false });
         }}
-        onCancel={() => setCreateModal({ visible: false })}
+        onCancel={() => setCreateModal({ open: false })}
       />
     </>
   );
diff --git a/inlong-dashboard/src/ui/pages/GroupDetail/DataStream/index.tsx b/inlong-dashboard/src/ui/pages/GroupDetail/DataStream/index.tsx
index 8915811ce..c1707bb9a 100644
--- a/inlong-dashboard/src/ui/pages/GroupDetail/DataStream/index.tsx
+++ b/inlong-dashboard/src/ui/pages/GroupDetail/DataStream/index.tsx
@@ -45,13 +45,13 @@ const Comp = ({ inlongGroupId, readonly, mqType }: Props, ref) => {
   });
 
   const [streamItemModal, setStreamItemModal] = useState({
-    visible: false,
+    open: false,
     inlongStreamId: '',
     inlongGroupId,
   });
 
   const [groupLogs, setGroupLogs] = useState({
-    visible: false,
+    open: false,
     inlongGroupId,
     inlongStreamId: '',
   });
@@ -97,18 +97,18 @@ const Comp = ({ inlongGroupId, readonly, mqType }: Props, ref) => {
   const onCreate = () => {
     setStreamItemModal(prev => ({
       ...prev,
-      visible: true,
+      open: true,
       inlongStreamId: '',
     }));
   };
 
   const onEdit = record => {
-    setStreamItemModal(prev => ({ ...prev, visible: true, inlongStreamId: record.inlongStreamId }));
+    setStreamItemModal(prev => ({ ...prev, open: true, inlongStreamId: record.inlongStreamId }));
   };
 
   const openModal = record => {
     setGroupLogs({
-      visible: true,
+      open: true,
       inlongGroupId: inlongGroupId,
       inlongStreamId: record.inlongStreamId,
     });
@@ -248,15 +248,15 @@ const Comp = ({ inlongGroupId, readonly, mqType }: Props, ref) => {
         mqType={mqType}
         onOk={async () => {
           await getList();
-          setStreamItemModal(prev => ({ ...prev, visible: false }));
+          setStreamItemModal(prev => ({ ...prev, open: false }));
         }}
-        onCancel={() => setStreamItemModal(prev => ({ ...prev, visible: false }))}
+        onCancel={() => setStreamItemModal(prev => ({ ...prev, open: false }))}
       />
 
       <GroupLogs
         {...groupLogs}
-        onOk={() => setGroupLogs({ visible: false, inlongGroupId: '', inlongStreamId: '' })}
-        onCancel={() => setGroupLogs({ visible: false, inlongGroupId: '', inlongStreamId: '' })}
+        onOk={() => setGroupLogs({ open: false, inlongGroupId: '', inlongStreamId: '' })}
+        onCancel={() => setGroupLogs({ open: false, inlongGroupId: '', inlongStreamId: '' })}
       />
     </>
   );
diff --git a/inlong-dashboard/src/ui/pages/Nodes/index.tsx b/inlong-dashboard/src/ui/pages/Nodes/index.tsx
index 75fa706d8..5bcc02fb6 100644
--- a/inlong-dashboard/src/ui/pages/Nodes/index.tsx
+++ b/inlong-dashboard/src/ui/pages/Nodes/index.tsx
@@ -40,7 +40,7 @@ const Comp: React.FC = () => {
   });
 
   const [detailModal, setDetailModal] = useState<Record<string, unknown>>({
-    visible: false,
+    open: false,
   });
 
   const { data, loading, run: getList } = useListNodeDao({ options });
@@ -48,7 +48,7 @@ const Comp: React.FC = () => {
   const { runAsync: destory } = useDeleteNodeDao();
 
   const onEdit = ({ id }) => {
-    setDetailModal({ visible: true, id });
+    setDetailModal({ open: true, id });
   };
 
   const onDelete = useCallback(
@@ -146,7 +146,7 @@ const Comp: React.FC = () => {
           onFilter,
         }}
         suffix={
-          <Button type="primary" onClick={() => setDetailModal({ visible: true })}>
+          <Button type="primary" onClick={() => setDetailModal({ open: true })}>
             {i18n.t('basic.Create')}
           </Button>
         }
@@ -163,12 +163,12 @@ const Comp: React.FC = () => {
       <DetailModal
         {...detailModal}
         defaultType={options.type}
-        open={detailModal.visible as boolean}
+        open={detailModal.open as boolean}
         onOk={async () => {
           await getList();
-          setDetailModal({ visible: false });
+          setDetailModal({ open: false });
         }}
-        onCancel={() => setDetailModal({ visible: false })}
+        onCancel={() => setDetailModal({ open: false })}
       />
     </PageContainer>
   );
diff --git a/inlong-dashboard/src/ui/pages/ProcessManagement/index.tsx b/inlong-dashboard/src/ui/pages/ProcessManagement/index.tsx
index 55d9c8706..d01fa5b41 100644
--- a/inlong-dashboard/src/ui/pages/ProcessManagement/index.tsx
+++ b/inlong-dashboard/src/ui/pages/ProcessManagement/index.tsx
@@ -37,7 +37,7 @@ const Comp: React.FC = () => {
   });
 
   const [createModal, setCreateModal] = useState<Record<string, unknown>>({
-    visible: false,
+    open: false,
   });
 
   const {
@@ -56,7 +56,7 @@ const Comp: React.FC = () => {
 
   const onEdit = ({ id }) => {
     setCreateModal({
-      visible: true,
+      open: true,
       id,
     });
   };
@@ -103,7 +103,7 @@ const Comp: React.FC = () => {
         <Card>
           <HighTable
             suffix={
-              <Button type="primary" onClick={() => setCreateModal({ visible: true })}>
+              <Button type="primary" onClick={() => setCreateModal({ open: true })}>
                 {t('pages.ApprovalManagement.CreateProcess')}
               </Button>
             }
@@ -125,12 +125,12 @@ const Comp: React.FC = () => {
 
       <ApprovalDetailModal
         {...createModal}
-        open={createModal.visible as boolean}
+        open={createModal.open as boolean}
         onOk={async () => {
           await getList();
-          setCreateModal({ visible: false });
+          setCreateModal({ open: false });
         }}
-        onCancel={() => setCreateModal({ visible: false })}
+        onCancel={() => setCreateModal({ open: false })}
       />
     </PageContainer>
   );
diff --git a/inlong-dashboard/src/ui/pages/UserManagement/index.tsx b/inlong-dashboard/src/ui/pages/UserManagement/index.tsx
index 6b2438bb3..baf474293 100644
--- a/inlong-dashboard/src/ui/pages/UserManagement/index.tsx
+++ b/inlong-dashboard/src/ui/pages/UserManagement/index.tsx
@@ -38,7 +38,7 @@ const Comp: React.FC = () => {
   });
 
   const [createModal, setCreateModal] = useState<Record<string, unknown>>({
-    visible: false,
+    open: false,
   });
 
   const {
@@ -58,7 +58,7 @@ const Comp: React.FC = () => {
 
   const onEdit = ({ id }) => {
     setCreateModal({
-      visible: true,
+      open: true,
       id,
     });
   };
@@ -108,7 +108,7 @@ const Comp: React.FC = () => {
         <Card>
           <HighTable
             suffix={
-              <Button type="primary" onClick={() => setCreateModal({ visible: true })}>
+              <Button type="primary" onClick={() => setCreateModal({ open: true })}>
                 {t('pages.UserManagement.CreateAccount')}
               </Button>
             }
@@ -130,12 +130,12 @@ const Comp: React.FC = () => {
 
       <DataSourcesCreateModal
         {...createModal}
-        open={createModal.visible as boolean}
+        open={createModal.open as boolean}
         onOk={async () => {
           await getList();
-          setCreateModal({ visible: false });
+          setCreateModal({ open: false });
         }}
-        onCancel={() => setCreateModal({ visible: false })}
+        onCancel={() => setCreateModal({ open: false })}
       />
     </PageContainer>
   );