(inlong) branch master updated: [INLONG-10844][Dashboard] Resource details page sort information interface switch (#10849)

[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 cb1a7028c7 [INLONG-10844][Dashboard] Resource details page sort 
information interface switch (#10849)
cb1a7028c7 is described below

commit cb1a7028c786ef9943a66af5e9839ff01daf05e0
Author: kamianlaida <165994047+wohainilao...@users.noreply.github.com>
AuthorDate: Wed Aug 21 18:12:56 2024 +0800

    [INLONG-10844][Dashboard] Resource details page sort information interface 
switch (#10849)
---
 .../ui/pages/GroupDetail/ResourceInfo/index.tsx    | 102 +++++++++++----------
 1 file changed, 55 insertions(+), 47 deletions(-)

diff --git a/inlong-dashboard/src/ui/pages/GroupDetail/ResourceInfo/index.tsx 
b/inlong-dashboard/src/ui/pages/GroupDetail/ResourceInfo/index.tsx
index 83d69dd788..57fb9a0fc8 100644
--- a/inlong-dashboard/src/ui/pages/GroupDetail/ResourceInfo/index.tsx
+++ b/inlong-dashboard/src/ui/pages/GroupDetail/ResourceInfo/index.tsx
@@ -37,6 +37,13 @@ const Comp = ({ inlongGroupId, isCreate }: Props, ref) => {
     return !!inlongGroupId;
   }, [inlongGroupId]);
 
+  const [sortOption, setSortOption] = useState({
+    inlongGroupId: inlongGroupId,
+    inlongStreamId: '',
+    pageSize: 5,
+    pageNum: 1,
+  });
+
   const { data, run: getData } = useRequest(`/group/detail/${inlongGroupId}`, {
     ready: isUpdate,
     refreshDeps: [inlongGroupId],
@@ -45,6 +52,20 @@ const Comp = ({ inlongGroupId, isCreate }: Props, ref) => {
     }),
   });
 
+  const { data: sortData, run: getSortData } = useRequest(
+    {
+      url: '/sink/listDetail',
+      method: 'post',
+      data: sortOption,
+    },
+    {
+      refreshDeps: [sortOption],
+      formatResult: data => ({
+        ...data,
+      }),
+    },
+  );
+
   useEffect(() => {
     getData();
   }, [getData]);
@@ -82,7 +103,6 @@ const Comp = ({ inlongGroupId, isCreate }: Props, ref) => {
     for (const item in data) {
       if (
         data[item] !== null &&
-        item !== 'SortInfo' &&
         item !== 'PULSAR' &&
         item !== 'TUBEMQ' &&
         item !== 'inlongClusterTag'
@@ -92,31 +112,24 @@ const Comp = ({ inlongGroupId, isCreate }: Props, ref) => {
     }
     return info;
   };
-
-  const [current, setCurrent] = useState(1);
-  const [options, setOptions] = useState({
-    streamId: '',
-  });
+  const onChange = ({ current: pageNum, pageSize }) => {
+    setSortOption(pre => ({ ...pre, pageNum: pageNum, pageSize: pageSize }));
+  };
 
   const pagination = {
     pageSize: 5,
-    current: current,
-    total:
-      options.streamId !== ''
-        ? data?.SortInfo.filter(item => 
item.inlongStreamId.includes(options.streamId)).length
-        : data?.SortInfo?.length,
-  };
-  const onChange = ({ current: pageNum, pageSize }) => {
-    setCurrent(pageNum);
+    current: sortOption.pageNum,
+    total: sortData?.total,
   };
 
   const onFilter = allValues => {
-    setOptions({
-      streamId: allValues.streamId,
-    });
+    setSortOption(pre => ({
+      ...pre,
+      inlongStreamId: allValues.streamId,
+    }));
   };
 
-  const content = defaultValues => [
+  const content = () => [
     {
       type: 'inputsearch',
       label: 'Stream Id',
@@ -192,35 +205,30 @@ const Comp = ({ inlongGroupId, isCreate }: Props, ref) => 
{
           ></Table>
         </>
       )}
-      {data?.hasOwnProperty('SortInfo') && (
-        <>
-          <Divider orientation="left" style={{ marginTop: 60 }}>
-            Sort {t('pages.GroupDetail.Resource.Info')}
-          </Divider>
-          <HighTable
-            filterForm={{
-              content: content(options),
-              onFilter,
-            }}
-            table={{
-              columns: [
-                { title: 'inlongStreamId', dataIndex: 'inlongStreamId' },
-                { title: 'dataflowId', dataIndex: 'id' },
-                { title: 'sinkName', dataIndex: 'sinkName' },
-                { title: 'topoName', dataIndex: 'inlongClusterName' },
-              ],
-              style: { marginTop: 20 },
-              dataSource:
-                options.streamId !== ''
-                  ? data?.SortInfo.filter(item => 
item.inlongStreamId.includes(options.streamId))
-                  : data?.SortInfo,
-              pagination,
-              rowKey: 'name',
-              onChange,
-            }}
-          />
-        </>
-      )}
+      <>
+        <Divider orientation="left" style={{ marginTop: 60 }}>
+          Sort {t('pages.GroupDetail.Resource.Info')}
+        </Divider>
+        <HighTable
+          filterForm={{
+            content: content(),
+            onFilter,
+          }}
+          table={{
+            columns: [
+              { title: 'inlongStreamId', dataIndex: 'inlongStreamId' },
+              { title: 'dataflowId', dataIndex: 'id' },
+              { title: 'sinkName', dataIndex: 'sinkName' },
+              { title: 'topoName', dataIndex: 'inlongClusterName' },
+            ],
+            style: { marginTop: 20 },
+            dataSource: sortData?.list,
+            pagination,
+            rowKey: 'name',
+            onChange,
+          }}
+        />
+      </>
     </div>
   );
 };