Add button for copying event data

Naive initial version of #45
snowplow · Feb 9, 2022 · 54272fd · 54272fd
1 parent 3a6babb
commit 54272fd
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 5 deletions.
diff --git a/src/components/Debugger/Beacon.ts b/src/components/Debugger/Beacon.ts
@@ -42,6 +42,7 @@ function parseBeacon({
         undefined,
       protocol.paramMap.stm
     ),
+    payload,
   };
 
   const seen = new Set<string>();
@@ -308,8 +309,89 @@ const printableValue = (val: string | undefined, finfo: ProtocolField): any => {
   }
 };
 
+const wrapPost = (data: object) => {
+  return {
+    schema: "iglu:com.snowplowanalytics.snowplow/payload_data/jsonschema/1-0-4",
+    data: [data],
+  };
+};
+
+const copyMenu = (collector: string, beacon: IBeaconDetails["payload"]) =>
+  beacon &&
+  m(
+    "div.dropdown.button.is-hoverable.is-up.is-dark",
+    m("div.dropdown-trigger", "\u29c9"),
+    m(
+      "div.dropdown-menu",
+      m("div.dropdown-content", [
+        m("div.dropdown-item", "Copy as\u2026"),
+        m(
+          "a.dropdown-item",
+          {
+            onclick: () =>
+              copyToClipboard(
+                JSON.stringify(wrapPost(Object.fromEntries(beacon.entries())))
+              ),
+          },
+          "JSON"
+        ),
+        m(
+          "a.dropdown-item",
+          {
+            onclick: () =>
+              copyToClipboard(
+                JSON.stringify(
+                  wrapPost(Object.fromEntries(beacon.entries())),
+                  null,
+                  4
+                )
+              ),
+          },
+          "JSON (pretty)"
+        ),
+        m(
+          "a.dropdown-item",
+          {
+            onclick: () => {
+              const u = new URL(`https://${collector}/i`);
+              beacon.forEach((v, k) => u.searchParams.append(k, v));
+              copyToClipboard(u.href);
+            },
+          },
+          "URL - GET"
+        ),
+        m(
+          "a.dropdown-item",
+          {
+            onclick: () => {
+              const ua = beacon.get("ua");
+              const lang = beacon.get("lang");
+
+              const data = Object.fromEntries(beacon.entries());
+
+              delete data["ua"];
+              delete data["lang"];
+
+              const cmd = [
+                `curl 'https://${collector}/com.snowplowanalytics.snowplow/tp2'`,
+                "--compressed",
+                ua && `-H 'User-Agent: ${ua}'`,
+                lang && `-H 'Accept-Language: ${lang}`,
+                "-H 'Content-Type: application/json; charset=UTF-8",
+                `--data-raw '${JSON.stringify(wrapPost(data))}'`,
+              ];
+
+              copyToClipboard(cmd.filter(Boolean).join(" \\\n  "));
+            },
+          },
+          "cURL"
+        ),
+      ])
+    )
+  );
+
 const formatBeacon = (
-  { appId, name, time, collector, method, data }: IBeaconDetails,
+  { appId, name, time, collector, method, data, payload }: IBeaconDetails,
   resolver: Resolver
 ) =>
   [
@@ -342,6 +424,7 @@ const formatBeacon = (
         m("div", [m("p.heading", "Method"), m("p.title", method)])
       ),
     ]),
+    copyMenu(collector, payload),
   ].concat(
     data.map(([setName, rows]) =>
       m(

diff --git a/src/style/bulma.scss b/src/style/bulma.scss
@@ -26,7 +26,7 @@
 
 //@import "npm:bulma/sass/components/breadcrumb.sass";
 @import "npm:bulma/sass/components/card.sass";
-//@import "npm:bulma/sass/components/dropdown.sass";
+@import "npm:bulma/sass/components/dropdown.sass";
 @import "npm:bulma/sass/components/level.sass";
 //@import "npm:bulma/sass/components/list.sass";
 //@import "npm:bulma/sass/components/media.sass";

diff --git a/src/style/inspector.scss b/src/style/inspector.scss
@@ -86,6 +86,18 @@ input {
   padding: 1rem;
 }
 
+#beacon .dropdown {
+  align-self: start;
+  border-radius: 10em;
+  position: fixed;
+  bottom: 1em;
+  z-index: 1;
+}
+
+#beacon .dropdown-trigger {
+  margin: auto;
+}
+
 .iglu {
   &.invalid > footer > .validation,
   #filter.invalid {

diff --git a/src/ts/types.ts b/src/ts/types.ts
@@ -55,6 +55,7 @@ export interface IBeaconDetails {
   method: string;
   name: string;
   time: string;
+  payload?: IBeaconSummary["payload"];
 }
 
 export interface ICache {

diff --git a/src/ts/util.ts b/src/ts/util.ts
@@ -107,10 +107,9 @@ const nameType = (val: unknown) => {
 };
 
 const copyToClipboard = (text: string): void => {
-  let cb = document.getElementById("clipboard") as HTMLInputElement;
+  let cb = document.getElementById("clipboard") as HTMLTextAreaElement;
   if (cb === null) {
-    cb = document.createElement("input") as HTMLInputElement;
-    cb.type = "text";
+    cb = document.createElement("textarea") as HTMLTextAreaElement;
     cb.id = "clipboard";
     cb.style.position = "relative";
     cb.style.left = "-10000px";