refactor(topology): beautify topology graph (#681)

## What type of PR is this? /kind feature ## What this PR does / why we need it: Enhances the topology map component with the following improvements: 1. Improved node rendering for better visual clarity and performance. 2. Added edge animations to enhance the user experience and make the topology map more dynamic. ![topology-map-demo](https://github.com/user-attachments/assets/400d9c57-19c0-476a-80f1-bc472c19c99c) ## Which issue(s) this PR fixes: Fixes # --------- Co-authored-by: hai-tian <[email protected]>
KusionStack · Dec 27, 2024 · 04f6467 · 04f6467
1 parent fafb3a5
commit 04f6467
Show file tree

Hide file tree

Showing 9 changed files with 654 additions and 453 deletions.
diff --git a/ui/src/pages/insightDetail/cluster/index.tsx b/ui/src/pages/insightDetail/cluster/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { NavLink, useLocation } from 'react-router-dom'
 import queryString from 'query-string'
 import { Breadcrumb, Tooltip } from 'antd'
@@ -42,6 +42,8 @@ const ClusterDetail = () => {
   const [selectedCluster, setSelectedCluster] = useState<any>()
   const [clusterOptions, setClusterOptions] = useState<string[]>([])
 
+  const drawRef = useRef(null)
+
   useEffect(() => {
     if (selectedCluster) {
       const result = generateTopologyData(multiTopologyData?.[selectedCluster])
@@ -195,6 +197,16 @@ const ClusterDetail = () => {
     }
   }, [multiTopologyData])
 
+  useEffect(() => {
+    if (selectedCluster && currentTab === 'Topology') {
+      const topologyData =
+        multiTopologyData &&
+        selectedCluster &&
+        generateTopologyData(multiTopologyData?.[selectedCluster])
+      drawRef.current?.drawGraph(topologyData)
+    }
+  }, [multiTopologyData, selectedCluster, currentTab])
+
   useEffect(() => {
     getClusterDetail()
     getAudit(false)
@@ -292,11 +304,11 @@ const ClusterDetail = () => {
         return (
           <>
             <TopologyMap
+              ref={drawRef}
               tableName={tableName}
               selectedCluster={selectedCluster}
               handleChangeCluster={handleChangeCluster}
               clusterOptions={clusterOptions}
-              topologyData={topologyData}
               topologyLoading={topologyLoading}
               onTopologyNodeClick={onTopologyNodeClick}
             />

diff --git a/ui/src/pages/insightDetail/components/sourceTable/index.tsx b/ui/src/pages/insightDetail/components/sourceTable/index.tsx
@@ -207,7 +207,7 @@ const SourceTable = ({ queryStr, tableName }: IProps) => {
         columns={columns}
         dataSource={tableData}
         rowKey={record => {
-          return `${record?.object?.metadata?.name}_${record?.object?.metadata?.namespace}_${record?.object?.apiVersion}_${record?.object?.kind}`
+          return `${record?.cluster}_${record?.object?.metadata?.name}_${record?.object?.metadata?.namespace}_${record?.object?.apiVersion}_${record?.object?.kind}`
         }}
         onChange={handleTableChange}
         pagination={{