From 0b65e68c0da6bcf80504f5636e6de3fd1352552b Mon Sep 17 00:00:00 2001
From: Alex Chi <iskyzh@gmail.com>
Date: Tue, 12 Jul 2022 14:00:53 +0800
Subject: [PATCH] fix(dashboardv1): adapt new dispatcher design and add dynamic
 filter node (#3793)

Signed-off-by: Alex Chi <iskyzh@gmail.com>
---
 src/meta/src/dashboard/index.html | 32 ++++++++++++++++++++++---------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/meta/src/dashboard/index.html b/src/meta/src/dashboard/index.html
index 5c8862807797d..4c0de91bef5c3 100644
--- a/src/meta/src/dashboard/index.html
+++ b/src/meta/src/dashboard/index.html
@@ -127,7 +127,7 @@ <h1 class="flex-auto leading-6 font-semibold text-sky-500 dark:text-sky-400">
   let currentMvs = new Set
   let showAssociateMv = false
 
-  const types = new Set(["source", "project", "filter", "materialize", "localSimpleAgg", "globalSimpleAgg", "hashAgg", "appendOnlyTopN", "hashJoin", "topN", "hopWindow", "merge", "exchange", "chain", "batchPlan", "lookup", "arrange", "lookupUnion", "union", "deltaIndexJoin"]);
+  const types = new Set(["dynamicFilter", "source", "project", "filter", "materialize", "localSimpleAgg", "globalSimpleAgg", "hashAgg", "appendOnlyTopN", "hashJoin", "topN", "hopWindow", "merge", "exchange", "chain", "batchPlan", "lookup", "arrange", "lookupUnion", "union", "deltaIndexJoin"]);
 
   const cluster = (type, cluster) => `
 <div class="p-6 max-w bg-white rounded-xl shadow-md flex flex-col space-y-1">
@@ -542,21 +542,35 @@ <h1 class="flex-auto leading-6 font-semibold text-sky-500 dark:text-sky-400">
       data => $("#clusters").append(cluster("Compute Node", data))))
   $("#clusters").append(cluster("Meta Node", { host: { host: "127.0.0.1", port: "2333" } }))
 
-  const eraseDownstreamIfBroadcast = (dispatcher) => {
-    // legacy dashboard doesn't support broadcast downstream, so we'd rather let the internal logic
+  const eraseDownstreamIfChain = (dispatcher) => {
+    // legacy dashboard doesn't support chain downstream, so we'd rather let the internal logic
     // think there's no downstream.
-    if (dispatcher.type == "BROADCAST") {
+
+    // HACK: for chain nodes, their dispatcher id is the same as downstream actor id. We can leverage
+    // this property to find such chain actors.
+    if (dispatcher.type == "NO_SHUFFLE" && dispatcher.dispatcherId == dispatcher.downstreamActorId[0]) {
       return []
     } else {
       return dispatcher.downstreamActorId || []
     }
   }
 
-  const toV1Actor = (actor) => ({
-    ...actor,
-    dispatcher: actor.dispatcher[0],
-    downstreamActorId: eraseDownstreamIfBroadcast(actor.dispatcher[0])
-  })
+  const toV1Actor = (actor) => {
+    if (actor.dispatcher) {
+      return ({
+        ...actor,
+        dispatcher: actor.dispatcher[0],
+        downstreamActorId: eraseDownstreamIfChain(actor.dispatcher[0])
+      })
+    } else {
+      return ({
+        ...actor,
+        dispatcher: { type: "BROADCAST", dispatcherId: "0", downstreamActorId: [] },
+        downstreamActorId: []
+      })
+    }
+
+  }
 
   const loadActors = () => {
     fetch('/api/actors')