feat(topology): add member cluster workload detail drawer to topology graph

cmd/kubernetes-dashboard-api/pkg/resource/pod/list.go

@@ -58,6 +58,12 @@ type Pod struct {
 	// Status determined based on the same logic as kubectl.
 	Status string `json:"status"`
 
+	// PodPhase is the phase of the Pod.
+	PodPhase v1.PodPhase `json:"podPhase"`
+
+	// PodIP is the IP of the Pod.
+	PodIP string `json:"podIP"`
+
 	// RestartCount of containers restarts.
 	RestartCount int32 `json:"restartCount"`
 
@@ -182,6 +188,8 @@ func toPod(pod *v1.Pod, metrics *MetricsByPod, warnings []common.Event) Pod {
 		TypeMeta:           types.NewTypeMeta(types.ResourceKindPod),
 		Warnings:           warnings,
 		Status:             getPodStatus(*pod),
+		PodPhase:           pod.Status.Phase,
+		PodIP:              pod.Status.PodIP,
 		RestartCount:       getRestartCount(*pod),
 		NodeName:           pod.Spec.NodeName,
 		ContainerImages:    common.GetContainerImages(&pod.Spec),

ui/apps/dashboard/package.json

@@ -68,6 +68,7 @@
     "@types/node": "^25.9.1",
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
+    "@types/dagre": "^0.7.54",
     "@types/sockjs-client": "^1.5.4",
     "@typescript-eslint/eslint-plugin": "^8.59.0",
     "@typescript-eslint/parser": "^8.56.1",

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 }))}
+      />
     </>
   );
 };