fix: Add mappings from stackName to topic to fix an issue with messages not rendering

Author: Lewenhaupt

.prettierrc.json

@@ -177,6 +177,15 @@ async function run() {
           if (request.url === '/stackList') {
             response.writeHead(200, { 'Content-Type': 'application/json' });
             response.end(JSON.stringify(stackList), 'utf-8');
+          } else if (request.url === 'stackToppicMappings') {
+            response.writeHead(200, { 'Content-Type': 'application/json' });
+            const mappings: Record<string, string> = {};
+            if (cdkOutput) {
+              for (const [stackName, stack] of Object.entries(cdkOutput)) {
+                mappings[stackName] = stack.ServerlessSpyTopic;
+              }
+            }
+            response.end(JSON.stringify(mappings), 'utf-8');
           } else if (request.url?.match('^/wsUrl')) {
             response.writeHead(200, { 'Content-Type': 'text/html' });
             response.end(`ws:localhost:${options.wsport}`, 'utf-8');

cli/cli.ts

@@ -30,6 +30,7 @@ function run() {
   > = {};
   let uiNeedsRefresh = false;
   let stackList: string[] | undefined;
+  let stackNameToTopicMappings: Record<string, string> | undefined;
   const selectedStackLocalStorageKey = 'selectedStack';
   let ws: WebSocket;
   let selectedStack: string | undefined;
@@ -75,6 +76,7 @@ function run() {
   void (async () => {
     await fillStacks();
     await connectToWebSocket();
+    await loadStackNameToTopicMappings();
   })();
   window.requestAnimationFrame(render);
   setupTooltip();
@@ -120,6 +122,24 @@ function run() {
       stackList && stackList.length > 1 ? '' : 'none';
   }
 
+  function canFilterOnTopic() {
+    return (
+      stackList &&
+      stackList?.length > 1 &&
+      stackNameToTopicMappings &&
+      Object.values(stackNameToTopicMappings).length
+    );
+  }
+
+  async function loadStackNameToTopicMappings() {
+    const response = await fetch('/stackTopicMappings');
+    try {
+      stackNameToTopicMappings = await response.json();
+    } catch {
+      stackNameToTopicMappings = {};
+    }
+  }
+
   async function connectToWebSocket() {
     try {
       const response = await fetch(`/wsUrl`);
@@ -335,6 +355,11 @@ function run() {
     return step;
   }
 
+  function resolveTopic(selectedStack: string | undefined) {
+    if (!selectedStack || !stackNameToTopicMappings) return '#';
+    return getTopic(stackNameToTopicMappings[selectedStack]);
+  }
+
   function renderSpyMessage(spyMessage: SpyMessageExt | SpyMessageGroup) {
     const serviceKey = serviceKeyFilterInputElement.value?.toLocaleLowerCase();
     const data = dataFilterInputElement.value?.toLocaleLowerCase();
@@ -346,7 +371,9 @@ function run() {
       messages = [spyMessage as SpyMessageExt];
     }
     const html = messages
-      .filter((sm) => sm.topic === getTopic(selectedStack!))
+      .filter(
+        (sm) => !canFilterOnTopic() || sm.topic === resolveTopic(selectedStack)
+      )
       .filter((sm) => matchFilter(sm, { serviceKey, data }))
       .map((sm, i) => {
         const service = getServiceNameFromServiceKey(sm.serviceKey);

cli/webServerlessSpy.ts

@@ -103,6 +103,10 @@ export class ServerlessSpy extends Construct {
       key: 'ServerlessSpyWsUrl',
       value: `${this.iotEndpoint}/${rootStack}`,
     });
+    new CfnOutput(this, 'ServerlessSpyTopic', {
+      key: 'ServerlessSpyTopic',
+      value: `${rootStack}`,
+    });
 
     this.lambdaSubscriptionMain = this.provideFunctionForSubscription();
   }