feat(topology): reuse member cluster workload detail drawer on topology member workload node click

Signed-off-by: SunsetB612 <10235101575@stu.ecnu.edu.cn>

Author: SunsetB612

pkg/resource/topology/chain.go

@@ -26,10 +26,10 @@ import (
 	policyv1alpha1 "github.com/karmada-io/karmada/pkg/apis/policy/v1alpha1"
 	workv1alpha1 "github.com/karmada-io/karmada/pkg/apis/work/v1alpha1"
 	workv1alpha2 "github.com/karmada-io/karmada/pkg/apis/work/v1alpha2"
-		karmadautil "github.com/karmada-io/karmada/pkg/util"
-		karmadanames "github.com/karmada-io/karmada/pkg/util/names"
-		"golang.org/x/sync/errgroup"
-		corev1 "k8s.io/api/core/v1"
+	karmadautil "github.com/karmada-io/karmada/pkg/util"
+	karmadanames "github.com/karmada-io/karmada/pkg/util/names"
+	"golang.org/x/sync/errgroup"
+	corev1 "k8s.io/api/core/v1"
 	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
 	"k8s.io/apimachinery/pkg/types"
 	kubeclient "k8s.io/client-go/kubernetes"
@@ -445,34 +445,33 @@ func traceChain(
 					Status:    memberStatus,
 				})
 				resp.Edges = append(resp.Edges, TopologyEdge{Source: workNodeID, Target: memberNodeID})
+
+				// Step 5: Get Pods in member cluster
+				pods, err := getPodsByWorkUID(ctx, clusterName, namespace, name, kind)
+				if err != nil {
+					klog.V(4).InfoS("Failed to get pods", "work", w.Name, "cluster", clusterName, "err", err)
+					return nil
+				}
+				for _, pod := range pods {
+					podNodeID := fmt.Sprintf("pod-%s-%s", clusterName, pod.UID)
+					resp.Nodes = append(resp.Nodes, TopologyNode{
+						ID:        podNodeID,
+						Type:      NodeTypePod,
+						Name:      pod.Name,
+						Namespace: pod.Namespace,
+						Cluster:   clusterName,
+						Status:    getPodStatus(pod),
+					})
+					resp.Edges = append(resp.Edges, TopologyEdge{
+						Source: memberNodeID,
+						Target: podNodeID,
+					})
+				}
 				return nil
 			})
-			// Step 5: Get Pods in member cluster
-			pods, err := getPodsByWorkUID(ctx, clusterName, namespace, name, kind)
-			if err != nil {
-				klog.V(4).InfoS("Failed to get pods", "work", w.Name, "cluster", clusterName, "err", err)
-				return nil
-			}
-			for _, pod := range pods {
-				podNodeID := fmt.Sprintf("pod-%s-%s", clusterName, pod.UID)
-				resp.Nodes = append(resp.Nodes, TopologyNode{
-					ID:        podNodeID,
-					Type:      NodeTypePod,
-					Name:      pod.Name,
-					Namespace: pod.Namespace,
-					Cluster:   clusterName,
-					Status:    getPodStatus(pod),
-				})
-				resp.Edges = append(resp.Edges, TopologyEdge{
-					Source: memberNodeID,
-					Target: podNodeID,
-				})
-			}
-			return nil
-		})
-	}
-	if err := g.Wait(); err != nil {
-		return nil, err
+		}
+		if err := g.Wait(); err != nil {
+			return nil, err
 		}
 	}
 	return resp, nil

ui/apps/dashboard/src/components/topology/topology-graph.tsx

@@ -37,6 +37,7 @@ import PropagationPolicyEditorDrawer from '@/pages/multicloud-policy-manage/prop
 import OverridePolicyEditorDrawer from '@/pages/multicloud-policy-manage/override-policy/override-policy-editor-drawer';
 import ResourceBindingDetailDrawer from '@/pages/multicloud-resource-manage/resource-binding/resource-binding-detail-drawer';
 import WorkDetailDrawer from '@/pages/multicloud-resource-manage/work/work-detail-drawer';
+import MemberClusterWorkloadDetailDrawer from '@/pages/member-cluster/workload/member-cluster-workload-detail-drawer';
 import { GetResource } from '@/services/unstructured';
 import { stringify } from 'yaml';
 
@@ -78,6 +79,14 @@ const TopologyGraph = ({ namespace, kind, name }: TopologyGraphProps) => {
   const [rbDrawerState, setRbDrawerState] = useState<PolicyDrawerState>(closedPolicyDrawer);
   const [workDrawerState, setWorkDrawerState] = useState<PolicyDrawerState>(closedPolicyDrawer);
 
+  const [memberWorkloadDrawerState, setMemberWorkloadDrawerState] = useState<{
+    open: boolean;
+    memberClusterName: string;
+    namespace: string;
+    name: string;
+    kind: WorkloadKind;
+  }>({ open: false, memberClusterName: '', namespace: '', name: '', kind: '' as WorkloadKind });
+
   const onNodeClick = useCallback(async (_: React.MouseEvent, node: Node) => {
     const d = node.data as unknown as TopologyNodeData;
     if (d.nodeType === 'ResourceTemplate' && d.kind && d.namespace && d.name) {
@@ -111,6 +120,14 @@ const TopologyGraph = ({ namespace, kind, name }: TopologyGraphProps) => {
       } catch (err) {
         console.error('Failed to fetch Work detail', err);
       }
+    } else if (d.nodeType === 'MemberClusterWorkload' && d.cluster && d.name && d.namespace && d.kind) {
+      setMemberWorkloadDrawerState({
+        open: true,
+        memberClusterName: d.cluster,
+        namespace: d.namespace,
+        name: d.name,
+        kind: d.kind.toLowerCase() as WorkloadKind,
+      });
     }
   }, []);
 
@@ -273,6 +290,14 @@ const TopologyGraph = ({ namespace, kind, name }: TopologyGraphProps) => {
         content={workDrawerState.content}
         onClose={() => setWorkDrawerState(closedPolicyDrawer)}
       />
+      <MemberClusterWorkloadDetailDrawer
+        open={memberWorkloadDrawerState.open}
+        memberClusterName={memberWorkloadDrawerState.memberClusterName}
+        namespace={memberWorkloadDrawerState.namespace}
+        name={memberWorkloadDrawerState.name}
+        kind={memberWorkloadDrawerState.kind}
+        onClose={() => setMemberWorkloadDrawerState((s) => ({ ...s, open: false }))}
+      />
     </>
   );
 };