feat: see realtime events in graph view

index.js

@@ -9,7 +9,7 @@ const localPatternListener = require("./src/evb-local/listeners/localPatternList
 const arnListener = require("./src/evb-local/listeners/arnListener");
 
 require("@mhlabs/aws-sdk-sso");
-program.version("1.1.6", "-v, --vers", "output the current version");
+program.version("1.1.7", "-v, --vers", "output the current version");
 program
   .command("pattern")
   .alias("p")

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mhlabs/evb-cli",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "description": "A package for building EventBridge/CloudWatch Events patterns",
   "main": "index.js",
   "scripts": {

sam/src/builders/localRuleCreator.js

@@ -19,8 +19,8 @@ async function create(event) {
     const targets = [
       eventBridgeClient.createTarget(
         eventConsumerName,
-        localRule,
         localRule.Target,
+        body.targetId,
         token
       ),
     ];

sam/template.yml

@@ -12,7 +12,7 @@ Metadata:
     ReadmeUrl: README.md
     Labels: ['eventbridge', 'evb-cli', 'debugging']
     HomePageUrl: https://github.com/mhlabs/evb-cli#readme
-    SemanticVersion: 0.0.1
+    SemanticVersion: 0.0.2
     SourceCodeUrl: https://github.com/mhlabs/evb-cli
 Resources:
   OnConnectFunction:

src/evb-local/listeners/websocket.js

@@ -77,7 +77,14 @@ async function apiId() {
   }
 }
 
+async function apiUrl() {
+  return `wss://${await apiId()}.execute-api.${
+    process.env.AWS_REGION
+  }.amazonaws.com/Prod`
+}
+
 module.exports = {
   connect,
   apiId,
+  apiUrl,
 };

src/graph-builder.js

@@ -5,6 +5,7 @@ const iconMap = require("../ui/icons").iconMap;
 const open = require("open");
 const tempDirectory = require("temp-dir");
 const { Spinner } = require("cli-spinner");
+const websocket = require("./evb-local/listeners/websocket");
 const spinner = new Spinner();
 require("@mhlabs/aws-sdk-sso");
 const cfnTag = "aws:cloudformation:stack-name";
@@ -108,7 +109,7 @@ async function build(busName) {
                     shape: "image",
                     image: createImage("source"),
                     value: 10,
-                    sourceNode: true
+                    sourceNode: true,
                   });
                 }
                 if (nodes.filter((p) => p.id == targetName).length === 0) {
@@ -128,6 +129,7 @@ async function build(busName) {
                   to: targetName,
                   label: pattern["detail-type"][0],
                   title: `<pre>${JSON.stringify(pattern, null, 2)}<pre>`,
+                  rule: { EventBusName: rule.EventBusName, EventPattern: rule.EventPattern, Target: target },
                 });
               }
             }
@@ -146,6 +148,7 @@ async function build(busName) {
   var tags = ${JSON.stringify(resourceTags)};
   var nodes = new vis.DataSet(${JSON.stringify(nodes)});
   var edges = new vis.DataSet(${JSON.stringify(edges)});
+  var wssUrl = '${await websocket.apiUrl()}'
   `;
   const uiPath = path.join(tempDirectory, "evb-graph");
   if (!fs.existsSync(uiPath)) {

ui/index.html

@@ -10,6 +10,18 @@
       .body {
         font-family: Arial, Helvetica, sans-serif;
       }
+      #wssOutput {
+        right: 0px;
+        top: 0px;
+        height: 100vh;
+        width: 30%;
+        background-color: rgba(80, 197, 251, 0.7);
+        border: blue 4px;
+        z-index: 2999;
+        position: absolute;
+        font-family: "Courier New", Courier, monospace;
+        overflow: scroll;
+      }
     </style>
     <script
       type="text/javascript"
@@ -25,6 +37,36 @@
 
     <script type="text/javascript">
       let network;
+      let token = uuidv4();      
+      let socket;
+      const rule = {
+        EventPattern: '{"source":["aws.events"]}',
+        EventBusName: "default",
+        Target: "MyFunction",
+        Name: "AllAWSEvents -> MyFunction",
+        InputPath: undefined,
+        Input: undefined,
+        InputTransformer: {
+          InputPathsMap: {
+            source: "$.source",
+            detailType: "$.detail-type",
+            time: "$.time",
+          },
+          InputTemplate:
+            '{"source": <source>, "detail-type": <detailType>, "time": <time> }',
+        },
+      };
+
+      function uuidv4() {
+        return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
+          /[xy]/g,
+          function (c) {
+            var r = (Math.random() * 16) | 0,
+              v = c == "x" ? r : (r & 0x3) | 0x8;
+            return v.toString(16);
+          }
+        );
+      }
 
       function draw() {
         // create a network
@@ -64,6 +106,47 @@
           },
         };
         network = new vis.Network(container, data, options);
+        network.on("selectEdge", function (params) {          
+          if (socket) {
+            socket.close();
+          }
+          socket = new WebSocket(wssUrl);
+          socket.onopen = function (e) {
+            token = uuidv4();
+            const edge = edges.get(params.edges[0]);
+            socket.send(
+              JSON.stringify({
+                action: "register",
+                token: token,
+                localRule: edge.rule,
+                targetId: edge.rule.Target.Id,
+              })
+            );
+            socket.onmessage = function (event) {
+              if (event.data.startsWith("Connect")) {
+                document.getElementById(
+                  "feed"
+                ).innerHTML += `Subscribing to ${JSON.stringify(
+                  JSON.parse(edge.rule.EventPattern),
+                  null,
+                  2
+                )} <br>`;
+              } else {
+                const body = JSON.parse(event.data).Body;
+                document.getElementById(
+                  "feed"
+                ).innerHTML += `*****${new Date().toISOString()}*****<br>${JSON.stringify(
+                  body,
+                  null,
+                  2
+                )}<br>`;
+              }
+              var messageBody = document.querySelector("#wssOutput");
+              messageBody.scrollTop =
+                messageBody.scrollHeight - messageBody.clientHeight;
+            };
+          };
+        });
         network.body.emitter.emit("_dataChanged");
       }
       window.addEventListener("load", function (event) {
@@ -107,14 +190,11 @@
           const tagArrayValue = resource.tagArray.filter(
             (p) => p.key === tag && p.value === tagValue
           )[0];
-          console.log(tagArrayValue, tag);
           if (tagArrayValue) {
             filtered.push(targetName);
           }
         }
-        console.log("filtered", filtered);
         for (const node of nodes.get()) {
-          console.log("hiding", node);
           if (!filtered.includes(node.id) && !node.sourceNode) {
             nodes.update({ id: node.id, hidden: true });
           } else {
@@ -131,19 +211,16 @@
         }
         const values = new Set();
         for (const resource of tags) {
-          console.log(resource);
           if (resource.tagArray) {
             const val = resource.tagArray.filter(
               (p) => p.key === event.target.value
             )[0];
-            console.log(val);
             if (val) {
               values.add(val.value);
             }
           }
         }
         document.getElementById("tagFilterValue").innerHTML = "";
-        console.log(values);
         for (const value of Array.from(values)) {
           document.getElementById("tagFilterValue").innerHTML +=
             "<option>" + value + "</option>";
@@ -160,10 +237,8 @@
           const tagArrayValue = resource.tagArray.filter(
             (p) => p.key === tag
           )[0];
-          console.log(tagArrayValue);
           let tagValue =
             tagArrayValue && tagArrayValue ? tagArrayValue.value : "untagged";
-          console.log("tag", tagValue);
           if (
             tagValue &&
             nodes.get({ filter: (p) => p.id === tagValue }).length === 0
@@ -182,7 +257,7 @@
             from: tagValue,
             to: targetName,
             arrows: { to: false },
-            length: 10,
+            length: 40,
             dashes: true,
             tagRelation: true,
           });
@@ -206,5 +281,9 @@
     <select id="tagFilter"></select
     >:<select id="tagFilterValue"></select>
     <div id="mynetwork"></div>
+    <div id="wssOutput">
+      <div>Event feed:<br>Click on a connection to subscribe to its events</div>
+      <pre id="feed"></pre>
+    </div>
   </body>
 </html>