Test Suites
@@ -377,7 +398,7 @@ export const TestSuites: FunctionComponent<{
setSuites: (newSuites: TestSuiteSpec[]) => {
chrome.storage.local.set(
{ testSuites: JSON.stringify(newSuites) },
- () => setSuites(newSuites)
+ () => setSuites(newSuites),
);
},
})
diff --git a/src/components/Debugger/Timeline.scss b/src/components/Debugger/Timeline.scss
new file mode 100644
index 0000000..58d83e3
--- /dev/null
+++ b/src/components/Debugger/Timeline.scss
@@ -0,0 +1,133 @@
+.timeline {
+ display: flex;
+ flex-flow: column nowrap;
+ gap: 0.5rem;
+ scrollbar-gutter: stable;
+ overflow-x: clip;
+
+ &__events {
+ scrollbar-gutter: stable;
+ margin-right: -1rem;
+ display: flex;
+ flex-flow: column nowrap;
+ flex: 1;
+ overflow-y: auto;
+ gap: 0.5rem;
+ }
+
+ &__controls {
+ display: flex;
+ flex-direction: column;
+
+ > div {
+ display: flex;
+ gap: 0.25rem;
+ justify-content: space-between;
+ white-space: nowrap;
+
+ select {
+ width: 0;
+ flex-basis: 100%;
+ }
+ }
+
+ input {
+ display: block;
+ width: 100%;
+ appearance: none;
+ border: 0 none;
+ border-radius: 0.25rem;
+ margin-top: 0.5rem;
+ padding: 0 1rem;
+ color: var(--color-text);
+ box-shadow:
+ 0 0 2px rgba(0, 0, 0, 0.5),
+ 0 1px 2px rgba(16, 24, 40, 0.05);
+ background-color: var(--color-highlight);
+ line-height: 2.75rem;
+ font-size: 0.875rem;
+ outline: 0;
+ }
+
+ input::placeholder {
+ color: #98a2b3;
+ }
+ }
+
+ > .testsuite {
+ padding-right: 1rem;
+ }
+}
+
+.event-group {
+ display: flex;
+ flex-flow: column nowrap;
+
+ &__heading {
+ background-color: var(--color-contrast);
+ color: var(--color-text-contrast);
+ border-radius: 0.25rem 0.25rem 0 0;
+ margin: 0;
+ padding: 0.5rem 1rem;
+ font-size: 1rem;
+ font-family: "Roboto";
+ font-weight: 600;
+ }
+
+ .event {
+ display: flex;
+ align-items: center;
+ background-color: var(--color-foreground);
+ padding: 0.5rem 1rem;
+ cursor: pointer;
+
+ &:hover,
+ &:active,
+ &.event--active {
+ background-color: var(--color-highlight);
+ }
+
+ &::before {
+ content: "";
+ display: inline-block;
+ border-radius: 100%;
+ height: 1em;
+ width: 1em;
+ margin-right: 0.5em;
+ }
+
+ &--destination-blue::before {
+ background-color: blue;
+ }
+ &--destination-red::before {
+ background-color: red;
+ }
+ &--destination-dark::before {
+ background-color: brown;
+ }
+ &--destination-purple::before {
+ background-color: purple;
+ }
+ &--destination-black::before {
+ background-color: black;
+ }
+ &--destination-turquoise::before {
+ background-color: turquoise;
+ }
+ &--destination-yellow::before {
+ background-color: yellow;
+ }
+ &--destination-light::before {
+ background-color: var(--color-highlight);
+ }
+
+ &--invalid::after {
+ content: "\0026d4\00fe0f";
+ float: right;
+ }
+ }
+
+ .event:last-child {
+ border-radius: 0 0 0.25rem 0.25rem;
+ }
+}
diff --git a/src/components/Debugger/Timeline.tsx b/src/components/Debugger/Timeline.tsx
index d8aa2c8..725e533 100644
--- a/src/components/Debugger/Timeline.tsx
+++ b/src/components/Debugger/Timeline.tsx
@@ -18,6 +18,8 @@ import * as importers from "./importers";
import * as exporters from "./exporters";
import { TestSuites } from "./TestSuites";
+import "./Timeline.scss";
+
const GA_REQUIRED_FIELDS = ["tid", "cid", "t", "v", "_gid"];
const KNOWN_FAKE_PAGES = [
"badbucket.invalid",
@@ -100,7 +102,7 @@ const validateEvent = (
id: string,
params: Map,
resolver: Resolver,
- updateValidity: StateUpdater
+ updateValidity: StateUpdater,
) => {
type SDJ = { schema: IgluUri; data: object | SDJ[] };
@@ -114,13 +116,13 @@ const validateEvent = (
const validate = (
schema: IgluSchema | null,
- data: SDJ["data"]
+ data: SDJ["data"],
): Promise =>
schema
? resolver
.resolve(schema)
.then((res) =>
- Promise.resolve(res.validate(data).valid ? "Valid" : "Invalid")
+ Promise.resolve(res.validate(data).valid ? "Valid" : "Invalid"),
)
: Promise.resolve("Invalid");
@@ -153,7 +155,9 @@ const validateEvent = (
schema = IgluSchema.fromUri((sdj.data as SDJ).schema);
if (schema)
validations.push(
- validate(schema, (sdj.data as SDJ).data).catch(() => "Unrecognised")
+ validate(schema, (sdj.data as SDJ).data).catch(
+ () => "Unrecognised",
+ ),
);
// this means data is not an SDJ. This is technically an invalid payload, but could just be old-style unstruct events.
// the beacon view will show it as invalid, but to reduce UI noise, just pretend it's unrecognised because there is no
@@ -163,7 +167,7 @@ const validateEvent = (
sdj.data.forEach((ctx: SDJ) => {
schema = IgluSchema.fromUri(ctx.schema);
validations.push(
- validate(schema, ctx.data).catch(() => "Unrecognised")
+ validate(schema, ctx.data).catch(() => "Unrecognised"),
);
});
} else {
@@ -198,7 +202,7 @@ const summariseBeacons = (
index: number,
resolver: Resolver,
filter: RegExp | undefined,
- updateValidity: StateUpdater
+ updateValidity: StateUpdater,
): IBeaconSummary[] => {
const {
id,
@@ -228,8 +232,8 @@ const summariseBeacons = (
req.get("dtm") ||
(req.get("_gid") ? req.get("_gid") + "000" : "").split(".").pop() ||
"",
- 10
- ) || +new Date()
+ 10,
+ ) || +new Date(),
).toJSON(),
validity: validateEvent(`#${id}-${i}`, req, resolver, updateValidity),
collectorStatus: {
@@ -243,10 +247,11 @@ const summariseBeacons = (
trackerAnalytics(collector, result.page, result.appId);
endpointAnalytics(
req.get("tna") || "",
+ req.get("aid") || "",
collector,
collectorPath,
method,
- entry.response.status
+ entry.response.status,
);
}
@@ -276,7 +281,7 @@ const extractNetworkUserId = (cookies: Cookie[]): Cookie | undefined => {
const extractRequests = (
entry: Entry,
- index: number
+ index: number,
): {
id: string;
collector: string;
@@ -301,19 +306,19 @@ const extractRequests = (
const nuid = extractNetworkUserId(entry.response.cookies);
const ua = entry.request.headers.find(
- (x) => x.name.toLowerCase() === "user-agent"
+ (x) => x.name.toLowerCase() === "user-agent",
);
const lang = entry.request.headers.find(
- (x) => x.name.toLowerCase() === "accept-language"
+ (x) => x.name.toLowerCase() === "accept-language",
);
const refr = entry.request.headers.find(
- (x) => x.name.toLowerCase() === "referer"
+ (x) => x.name.toLowerCase() === "referer",
);
const cl = entry.request.headers.find(
- (x) => x.name.toLowerCase() === "content-length"
+ (x) => x.name.toLowerCase() === "content-length",
);
const ct = entry.request.headers.find(
- (x) => x.name.toLowerCase() === "content-type"
+ (x) => x.name.toLowerCase() === "content-type",
);
if (req.method === "POST") {
@@ -333,7 +338,7 @@ const extractRequests = (
payloadSize: cl.value,
contentType: ct ? ct.value : "",
stm: "" + +new Date(),
- })
+ }),
);
if (nuid && nuid.value) beacon.set("nuid", nuid.value);
@@ -375,7 +380,7 @@ const extractRequests = (
});
const validGa = ga.filter((b) =>
- GA_REQUIRED_FIELDS.every((k) => b.has(k))
+ GA_REQUIRED_FIELDS.every((k) => b.has(k)),
);
beacons.push.apply(beacons, validGa);
} catch (urlErr) {
@@ -391,7 +396,7 @@ const extractRequests = (
} else {
const beacon: Map = new Map();
new URL(req.url).searchParams.forEach((value, key) =>
- beacon.set(key, value)
+ beacon.set(key, value),
);
if (nuid && !beacon.has("nuid")) {
beacon.set("nuid", nuid.value);
@@ -411,7 +416,7 @@ const extractRequests = (
}
const serverAnonymous = !!req.headers.find(
- (h) => /sp-anonymous/i.test(h.name) && h.value === "*"
+ (h) => /sp-anonymous/i.test(h.name) && h.value === "*",
);
return {
@@ -454,9 +459,9 @@ export const Timeline: FunctionComponent = ({
const events = useMemo(
() =>
requests.map((batch, i) =>
- summariseBeacons(batch, i, resolver, filter, updateValidity)
+ summariseBeacons(batch, i, resolver, filter, updateValidity),
),
- [requests, resolver, filter, validity]
+ [requests, resolver, filter, validity],
);
const beacons = events.map((summaries) => {
@@ -465,15 +470,15 @@ export const Timeline: FunctionComponent = ({
summary.pageref || (summary.page ? new URL(summary.page) : fallbackUrl),
= ({
].join("\n")}
onClick={setActive.bind(null, { display: "beacon", item: summary })}
>
-
- {summary.validity === "Invalid" ? "\u26d4\ufe0f" : ""}
-
,
]);
});
@@ -510,7 +511,7 @@ export const Timeline: FunctionComponent = ({
}
return acc;
}, acc),
- [] as [string, VNode[]][]
+ [] as [string, VNode[]][],
);
useEffect(() => {
@@ -534,9 +535,9 @@ export const Timeline: FunctionComponent = ({
addRequests,
setModal,
{ ngrokStreaming, setNgrokStreaming },
- { streamLock, setStreamLock }
+ { streamLock, setStreamLock },
),
- [addRequests, setModal, ngrokStreaming, streamLock]
+ [addRequests, setModal, ngrokStreaming, streamLock],
);
useEffect(() => importHandler("ngrok"), [importHandler, ngrokStreaming]);
@@ -554,7 +555,7 @@ export const Timeline: FunctionComponent = ({
importHandler(value as importers.ImporterFormat);
}
},
- [importHandler]
+ [importHandler],
);
const exportButtonHandler: h.JSX.GenericEventHandler =
@@ -567,75 +568,70 @@ export const Timeline: FunctionComponent = ({
exporters.exportToFormat(
value as exporters.ExporterFormat,
requests,
- events
+ events,
);
},
- [requests, events]
+ [requests, events],
);
return (
-
-
-
-
-
- Clear Events
-
-
-
- Import
+
+
{byPage.map(([pageName, beacons]) => (
-
-
+
+
{pageName}
-
+
{beacons}
-
+
))}
-
-
+
+
);
};
diff --git a/src/components/Debugger/exporters/csv.ts b/src/components/Debugger/exporters/csv.ts
index 6c3c146..cc24b81 100644
--- a/src/components/Debugger/exporters/csv.ts
+++ b/src/components/Debugger/exporters/csv.ts
@@ -32,14 +32,14 @@ export default (requests: Entry[], events: IBeaconSummary[][]): File => {
return val;
}
})
- .join(",")
- )
+ .join(","),
+ ),
)
.join("\r\n"),
],
- { type: "text/csv" }
+ { type: "text/csv" },
),
],
- "Snowplow Inspector Export.csv"
+ "Snowplow Inspector Export.csv",
);
};
diff --git a/src/components/Debugger/exporters/har.ts b/src/components/Debugger/exporters/har.ts
index b08c8cc..77353fe 100644
--- a/src/components/Debugger/exporters/har.ts
+++ b/src/components/Debugger/exporters/har.ts
@@ -15,6 +15,6 @@ export default (requests: Entry[]): File => {
return new File(
[new Blob([JSON.stringify(har)], { type: "application/json" })],
- "Snowplow Inspector Export.har"
+ "Snowplow Inspector Export.har",
);
};
diff --git a/src/components/Debugger/exporters/index.ts b/src/components/Debugger/exporters/index.ts
index 36e9f09..843acd0 100644
--- a/src/components/Debugger/exporters/index.ts
+++ b/src/components/Debugger/exporters/index.ts
@@ -23,7 +23,7 @@ export type ExporterFormat = keyof typeof formats;
export const exportToFormat = (
format: ExporterFormat,
requests: Entry[],
- events: IBeaconSummary[][]
+ events: IBeaconSummary[][],
) => {
const fakeA = document.createElement("a");
diff --git a/src/components/Debugger/exporters/json.ts b/src/components/Debugger/exporters/json.ts
index 21034a3..61d4b99 100644
--- a/src/components/Debugger/exporters/json.ts
+++ b/src/components/Debugger/exporters/json.ts
@@ -10,14 +10,14 @@ export default (requests: Entry[], events: IBeaconSummary[][]): File => {
JSON.stringify(
events.flatMap((summaries) =>
summaries.map(({ payload }) =>
- Object.fromEntries(payload.entries())
- )
- )
+ Object.fromEntries(payload.entries()),
+ ),
+ ),
),
],
- { type: "application/json" }
+ { type: "application/json" },
),
],
- "Snowplow Inspector Export.json"
+ "Snowplow Inspector Export.json",
);
};
diff --git a/src/components/Debugger/importers/har.ts b/src/components/Debugger/importers/har.ts
index 2d2e0ac..1e6a6f6 100644
--- a/src/components/Debugger/importers/har.ts
+++ b/src/components/Debugger/importers/har.ts
@@ -23,10 +23,12 @@ export default (cb: (entries: Entry[]) => void) => {
() => {
const content = JSON.parse(fr.result as string) as Har;
cb(
- content.log.entries.filter((entry) => isSnowplow(entry.request))
+ content.log.entries.filter((entry) =>
+ isSnowplow(entry.request),
+ ),
);
},
- false
+ false,
);
fr.readAsText(file);
diff --git a/src/components/Debugger/importers/index.ts b/src/components/Debugger/importers/index.ts
index ea19a28..d46bcf7 100644
--- a/src/components/Debugger/importers/index.ts
+++ b/src/components/Debugger/importers/index.ts
@@ -25,7 +25,7 @@ export const importFromFormat = (
{
streamLock,
setStreamLock,
- }: { streamLock: number; setStreamLock: StateUpdater
}
+ }: { streamLock: number; setStreamLock: StateUpdater },
) => {
switch (format) {
case "bad":
diff --git a/src/components/Debugger/importers/ngrok.ts b/src/components/Debugger/importers/ngrok.ts
index 72a5bf4..6729494 100644
--- a/src/components/Debugger/importers/ngrok.ts
+++ b/src/components/Debugger/importers/ngrok.ts
@@ -9,7 +9,7 @@ const ngrokStreamInterval: number = 1500;
export default (
cb: (entries: Entry[]) => void,
ngrokStreaming: boolean,
- setNgrokStreaming: StateUpdater
+ setNgrokStreaming: StateUpdater,
) => {
let ngrokStreamLock = -1;
@@ -36,13 +36,13 @@ export default (
cb(entries);
ngrokStreamLock = window.setTimeout(
pollStream,
- ngrokStreamInterval
+ ngrokStreamInterval,
);
})
.catch(() => setNgrokStreaming(false));
- })
+ }),
);
- }
+ },
);
}, 0);
}
diff --git a/src/components/Debugger/index.tsx b/src/components/Debugger/index.tsx
index bb3fa2e..6e7de27 100644
--- a/src/components/Debugger/index.tsx
+++ b/src/components/Debugger/index.tsx
@@ -1,14 +1,21 @@
-import { Entry, Request } from "har-format";
+import { Entry } from "har-format";
import { h, FunctionComponent } from "preact";
import { useCallback, useEffect, useState } from "preact/hooks";
-import { DisplayItem, IBeaconSummary, IDebugger } from "../../ts/types";
+import {
+ DisplayItem,
+ IBeaconSummary,
+ IDebugger,
+ PipelineInfo,
+} from "../../ts/types";
import { isSnowplow } from "../../ts/util";
import { Beacon } from "./Beacon";
-import { TestResults } from "./TestResults";
+import { TestReport } from "./TestReport";
import { Timeline } from "./Timeline";
+import "./Debugger.scss";
+
export const Debugger: FunctionComponent = ({
addRequests,
clearRequests,
@@ -17,6 +24,15 @@ export const Debugger: FunctionComponent = ({
setModal,
}) => {
const [active, setActive] = useState();
+ const [pipelines, setPipelines] = useState([]);
+
+ useEffect(
+ () =>
+ chrome.storage.local.get({ pipelines: "[]" }, ({ pipelines }) => {
+ setPipelines(JSON.parse(pipelines));
+ }),
+ [],
+ );
const isActive = useCallback(
(beacon: IBeaconSummary) => {
@@ -24,7 +40,7 @@ export const Debugger: FunctionComponent = ({
return active.item.id === beacon.id;
return false;
},
- [active]
+ [active],
);
const handleNewRequests = useCallback(
@@ -38,25 +54,11 @@ export const Debugger: FunctionComponent = ({
!isSnowplow(req.request) ||
req.request.method === "OPTIONS" ||
req.response.statusText === "Service Worker Fallback Required"
- )
- )
+ ),
+ ),
);
},
- [addRequests]
- );
-
- const [compactCore, setCompactCore] = useState(false);
- useEffect(
- () =>
- chrome.storage.sync.get(
- {
- compactCoreMetadata: false,
- },
- ({ compactCoreMetadata }) => {
- setCompactCore(compactCoreMetadata);
- }
- ),
- []
+ [addRequests],
);
useEffect(() => {
@@ -69,9 +71,9 @@ export const Debugger: FunctionComponent = ({
event.startedDateTime === entry.startedDateTime &&
event.time === entry.time &&
event.request.url === entry.request.url &&
- event._request_id === entry._request_id
- )
- )
+ event._request_id === entry._request_id,
+ ),
+ ),
);
});
@@ -79,13 +81,13 @@ export const Debugger: FunctionComponent = ({
return () => {
chrome.devtools.network.onRequestFinished.removeListener(
- handleNewRequests
+ handleNewRequests,
);
};
}, []);
return (
-
+
= ({
clearRequests={clearRequests}
/>
{!active || active.display === "beacon" ? (
-
-
+
+ {active && active.item ? (
+ ) : null}
) : (
-
-
-
+
+
)}
-
+
);
};
diff --git a/src/components/Modals/BadRows.tsx b/src/components/Modals/BadRows.tsx
index 2312f53..d510c8a 100644
--- a/src/components/Modals/BadRows.tsx
+++ b/src/components/Modals/BadRows.tsx
@@ -4,6 +4,7 @@ import { useCallback, useState } from "preact/hooks";
import { badToRequests } from "../../ts/util";
import { ModalOptions } from ".";
+import { BaseModal } from "./BaseModal";
export interface BadRowsOptions extends ModalOptions {
addRequests: (reqs: Entry[]) => void;
@@ -23,61 +24,51 @@ export const BadRows: FunctionComponent
= ({
if (transfer.files.length) {
Promise.all(
Array.from(transfer.files).map((file) =>
- file.text().then((text) => text.split("\n"))
- )
+ file.text().then((text) => text.split("\n")),
+ ),
).then((inputs) =>
- setBadRows((badRows) => badRows.concat(inputs.flat()))
+ setBadRows((badRows) => badRows.concat(inputs.flat())),
);
} else {
setBadRows((badRows) =>
- badRows.concat(transfer.getData("text").trim().split("\n"))
+ badRows.concat(transfer.getData("text").trim().split("\n")),
);
}
}
}, []);
+ const onSubmit = useCallback(() => {
+ if (badRows.length) {
+ addRequests(badToRequests(badRows));
+ setBadRows([]);
+ setModal();
+ }
+ }, [badRows, setModal, addRequests, badToRequests]);
+
return (
-
-
setModal()}>
-
-
- Bad Rows Import
- setModal()} />
-
-
-
- Bad Rows occur when events fail to validate during enrichment. You
- can paste your bad data straight from S3 (1 JSON object per line, or
- an entire file with that format). For real-time data, the JSON
- object from the _source field in ElasticSearch or just
- the line property of that object. Keep pasting to
- include events in bulk. Invalid payloads (OPTIONS requests, no data,
- invalid JSON, bots, etc.) will be ignored.
-
-
- Number of events to the to import: {badRows.length}
-
-
-
-
+
+
+ Bad Rows occur when events fail to validate during enrichment. You can
+ paste your bad data straight from S3 (1 JSON object per line, or an
+ entire file with that format). For real-time data, the JSON object
+ from the _source field in ElasticSearch or just the{" "}
+ line property of that object. Keep pasting to include
+ events in bulk. Invalid payloads (OPTIONS requests, no data, invalid
+ JSON, bots, etc.) will be ignored.
+
+
+ Number of events to import: {badRows.length}
+
+
+
);
};
diff --git a/src/components/Modals/BaseModal.tsx b/src/components/Modals/BaseModal.tsx
new file mode 100644
index 0000000..34cd5ae
--- /dev/null
+++ b/src/components/Modals/BaseModal.tsx
@@ -0,0 +1,42 @@
+import { h, FunctionComponent } from "preact";
+import { useCallback, useEffect, useRef, useState } from "preact/hooks";
+
+export const BaseModal: FunctionComponent<{
+ formId?: string;
+ title: string;
+ onClose: () => void;
+ onSubmit?: h.JSX.GenericEventHandler;
+ onChange?: h.JSX.GenericEventHandler;
+}> = ({ children, formId, onClose, onSubmit, onChange, title }) => {
+ const dialogRef = useRef(null);
+
+ useEffect(() => {
+ dialogRef.current?.showModal();
+ return () => dialogRef.current?.close();
+ }, []);
+
+ return (
+
+ target === currentTarget && onClose()
+ }
+ >
+
+
+ );
+};
diff --git a/src/components/Modals/ConsoleSync.tsx b/src/components/Modals/ConsoleSync.tsx
new file mode 100644
index 0000000..376f695
--- /dev/null
+++ b/src/components/Modals/ConsoleSync.tsx
@@ -0,0 +1,450 @@
+import { h, Fragment, FunctionComponent } from "preact";
+import { useEffect, useState } from "preact/hooks";
+
+import { ModalOptions } from ".";
+import { BaseModal } from "./BaseModal";
+
+import { apiFetch } from "../ConsoleStatus";
+import { buildRegistry, Resolver } from "../../ts/iglu";
+import { consoleAnalytics } from "../../ts/analytics";
+import { request as requestPermissions } from "../../ts/permissions";
+import type {
+ OAuthIdentity,
+ PipelineInfo,
+ TestSuiteSpec,
+} from "../../ts/types";
+import { specFromTrackingScenarios } from "../../ts/util";
+
+export interface ConsoleSyncOptions extends ModalOptions {
+ organizations: {
+ id: string;
+ name: string;
+ domain: string;
+ tier: string;
+ tags: string[];
+ essoDomain?: string;
+ features: null | unknown;
+ }[];
+ identity: OAuthIdentity;
+ authentication: {};
+ resolver: Resolver;
+}
+
+export const ConsoleSync: FunctionComponent = ({
+ setModal,
+ organizations,
+ identity,
+ authentication,
+ resolver,
+}) => {
+ const [doIgluProd, setDoIgluProd] = useState(true);
+ const [doIgluDev, setDoIgluDev] = useState(true);
+ const [doScenarios, setDoScenarios] = useState(true);
+ const [doEnrichments, setDoEnrichments] = useState(true);
+
+ const [enabledOrgs, setEnabledOrgs] = useState>({});
+
+ const [error, setError] = useState();
+ const [status, setStatus] = useState("idle");
+
+ useEffect(() => consoleAnalytics("Sync Display"), []);
+
+ return (
+ {
+ event.preventDefault();
+ setStatus("working");
+ const tasks: Promise[] = [];
+
+ consoleAnalytics(
+ "Sync Begin",
+ JSON.stringify({
+ scenarios: doScenarios,
+ enrichments: doEnrichments,
+ igluDev: doIgluDev,
+ igluProd: doIgluProd,
+ }),
+ );
+
+ if (doScenarios)
+ tasks.push(
+ Promise.all(
+ organizations.flatMap((org) => {
+ if (enabledOrgs[org.id] ?? true) {
+ return [
+ apiFetch(
+ `organizations/${org.id}/tracking-scenarios/v1`,
+ authentication,
+ ).then((results) =>
+ specFromTrackingScenarios(org.name, results.data),
+ ),
+ ];
+ } else return [];
+ }),
+ )
+ .then((transformed) => {
+ chrome.storage.local.get(
+ {
+ testSuites: "[]",
+ },
+ ({ testSuites }) => {
+ consoleAnalytics(
+ "Scenario Import Success",
+ undefined,
+ undefined,
+ transformed.length,
+ );
+ const existing = JSON.parse(testSuites);
+ const transformedNames = transformed.map((t) => t.name);
+ const nonConflicting = existing.filter(
+ (e: TestSuiteSpec) => !transformedNames.includes(e.name),
+ );
+ chrome.storage.local.set({
+ testSuites: JSON.stringify([
+ ...nonConflicting,
+ ...transformed,
+ ]),
+ });
+ },
+ );
+ })
+ .catch((e) =>
+ consoleAnalytics("Scenario Import Failure", "" + e),
+ ),
+ );
+
+ if (doIgluDev || doIgluProd)
+ tasks.push(
+ Promise.all(
+ organizations.map((org) =>
+ apiFetch(
+ `organizations/${org.id}/resources/v1/iglus`,
+ authentication,
+ ).then(
+ (
+ iglus: Record<
+ "prod" | "dev",
+ { endpoint: string; keys: { name: string }[] }
+ >,
+ ) => {
+ const keyName = `Snowplow Inspector - ${identity.name}`;
+
+ return Promise.all(
+ Object.entries(iglus).flatMap(
+ ([env, { endpoint, keys }]) => {
+ if (env === "dev" && !doIgluDev) return [];
+ if (env === "prod" && !doIgluProd) return [];
+
+ const existing = keys.find(
+ ({ name }) => name === keyName,
+ );
+
+ if (!existing) {
+ consoleAnalytics("Iglu Credential Create", env);
+ return [
+ apiFetch(
+ `organizations/${org.id}/resources/v1/iglus/${env}/keys`,
+ {
+ ...authentication,
+ method: "post",
+ body: JSON.stringify({
+ name: keyName,
+ keyType: "ReadOnly",
+ }),
+ },
+ )
+ .then(
+ (keyDetails: {
+ name: string;
+ key: { value: string };
+ }) => ({
+ name: `${org.name} (${env})`,
+ uri: endpoint,
+ apiKey: keyDetails.key.value,
+ }),
+ )
+ .catch((e) => {
+ consoleAnalytics(
+ "Iglu Credential Create Failure",
+ env,
+ "" + e,
+ );
+ throw e;
+ }),
+ ];
+ } else {
+ consoleAnalytics("Iglu Credential Exists", env);
+ return [];
+ }
+ },
+ ),
+ );
+ },
+ ),
+ ),
+ )
+ .then((specs) => {
+ requestPermissions(...specs.flat().map(({ uri }) => uri));
+ return specs
+ .flat()
+ .map((spec) => buildRegistry({ kind: "iglu", ...spec }));
+ })
+ .then((newRegs) => {
+ resolver.import(false, ...newRegs);
+ return resolver.persist();
+ }),
+ );
+
+ if (doEnrichments)
+ tasks.push(
+ Promise.all(
+ organizations.flatMap((org) => {
+ if (enabledOrgs[org.id] ?? true) {
+ return [
+ apiFetch(
+ `organizations/${org.id}/resources/v1`,
+ authentication,
+ ).then(
+ (resources: {
+ minis: {
+ id: string;
+ cleanEndpoint?: string;
+ cloudProvider: string;
+ }[];
+ pipelines: {
+ id: string;
+ name: string;
+ cloudProvider: string;
+ }[];
+ }) =>
+ Promise.all(
+ Object.entries(resources)
+ .flatMap(([resource, list]) =>
+ list.map((li) => ({ ...li, resource })),
+ )
+ .map((resource) =>
+ Promise.all([
+ apiFetch(
+ `organizations/${org.id}/resources/v1/${resource.resource}/${resource.id}/configuration/enrichments`,
+ authentication,
+ ).then(
+ (
+ enrichments: {
+ id: string;
+ filename: string;
+ lastUpdate: string;
+ enabled: boolean;
+ content: unknown;
+ }[],
+ ) => ({
+ ...resource,
+ organization: org.id,
+ organizationName: org.name,
+ domain: org.domain,
+ enrichments,
+ }),
+ ),
+ "cleanEndpoint" in resource
+ ? Promise.resolve([resource.cleanEndpoint!])
+ : apiFetch(
+ `organizations/${org.id}/resources/v1/${resource.resource}/${resource.id}/configuration/collector`,
+ authentication,
+ ).then(
+ ({
+ domains,
+ }: {
+ domains: {
+ fallback?: string;
+ cookieDomains?: string[];
+ dnsDomains?: string[];
+ collectorCname?: string[];
+ };
+ }) => {
+ const found: string[] = [];
+ if (domains.fallback)
+ found.push(domains.fallback);
+ if (
+ domains.cookieDomains &&
+ domains.cookieDomains.length
+ )
+ found.push(...domains.cookieDomains);
+ if (
+ domains.dnsDomains &&
+ domains.dnsDomains.length
+ )
+ found.push(...domains.dnsDomains);
+ if (
+ domains.collectorCname &&
+ domains.collectorCname.length
+ )
+ found.push(...domains.collectorCname);
+ return found;
+ },
+ ),
+ ]).then(([enrich, domains]) => ({
+ ...enrich,
+ domains,
+ })),
+ ),
+ ),
+ ),
+ ];
+ } else return [];
+ }),
+ ).then((orgResources) => {
+ chrome.storage.local.get(
+ {
+ pipelines: "[]",
+ },
+ ({ pipelines }) => {
+ consoleAnalytics(
+ "Pipeline Sync",
+ undefined,
+ undefined,
+ pipelines.length,
+ );
+ const existing: PipelineInfo[] = JSON.parse(pipelines);
+ const syncedNames = orgResources
+ .flat()
+ .map((t) => [t.organization, t.id].join("/"));
+ const nonConflicting = existing.filter(
+ (e) =>
+ !syncedNames.includes([e.organization, e.id].join("/")),
+ );
+
+ const merged = [...nonConflicting, ...orgResources.flat()];
+ chrome.storage.local.set({
+ pipelines: JSON.stringify(merged),
+ });
+ },
+ );
+ }),
+ );
+
+ Promise.all(tasks)
+ .then(() => {
+ setStatus("done");
+ setModal();
+ })
+ .catch((reason) => {
+ setStatus("error");
+ setError(reason);
+ });
+ }}
+ >
+
+ Successfully authenticated with Snowplow Console!
+ The following organizations were detected for your account:
+
+
+ For the above selected organizations, you can do any of the following:
+
+
+
+
+ {status === "idle" ? (
+ Synchronize
+ ) : status === "working" ? (
+ An error occurred during synchronization...
+ {error && Error details: {error}
}
+ setModal()}>Oh well
+
+ ) : (
+ <>
+
+ Synchronization Complete! You will need to restart DevTools for
+ all changes to take effect.
+
+ setModal()}>Done
+
+ )}
+
+
+ );
+};
diff --git a/src/components/Modals/DeleteRegistries.tsx b/src/components/Modals/DeleteRegistries.tsx
index 699803d..f599a5c 100644
--- a/src/components/Modals/DeleteRegistries.tsx
+++ b/src/components/Modals/DeleteRegistries.tsx
@@ -1,6 +1,7 @@
import { h, FunctionComponent } from "preact";
import { ModalOptions } from ".";
+import { BaseModal } from "./BaseModal";
import { Registry, Resolver } from "../../ts/iglu";
import { RegistryDetail } from "../SchemaManager/RegistryDetail";
@@ -14,37 +15,30 @@ export const DeleteRegistries: FunctionComponent = ({
registries,
resolver,
}) => (
-
-
setModal()}>
-
-
- Delete Schema Registries
- setModal()} />
-
-
-
- You are about to remove the following registries from the extension.
- This can not be undone.
-
-
- {registries.map((reg) => (
-
-
-
-
-
+
+
+ You are about to remove the following registries from the extension.
+ This can not be undone.
+
+
+ {registries.map((reg) => (
+
+
+
+
);
diff --git a/src/components/Modals/EditRegistries.tsx b/src/components/Modals/EditRegistries.tsx
index 62be450..a88e63a 100644
--- a/src/components/Modals/EditRegistries.tsx
+++ b/src/components/Modals/EditRegistries.tsx
@@ -2,6 +2,7 @@ import { h, FunctionComponent } from "preact";
import { StateUpdater, useEffect, useState } from "preact/hooks";
import { ModalOptions } from ".";
+import { BaseModal } from "./BaseModal";
import { buildRegistry, Registry, Resolver } from "../../ts/iglu";
import { RegistryDetail } from "../SchemaManager/RegistryDetail";
import { RegistrySpec } from "../../ts/types";
@@ -13,7 +14,7 @@ export interface EditRegistriesOptions extends ModalOptions {
const checkRegistries = (
existing: Registry[],
- setCounts: StateUpdater
+ setCounts: StateUpdater,
) =>
Promise.all(
existing.map((r, i) =>
@@ -22,16 +23,16 @@ const checkRegistries = (
.then(() => r.walk())
.then(
(x) => length,
- () => 0
- )
- )
+ () => 0,
+ ),
+ ),
).then(setCounts);
const modelRegistries = (form: HTMLFormElement, existing: Registry[]) =>
Array.from(form.elements)
.filter(
(field): field is HTMLFieldSetElement =>
- field instanceof HTMLFieldSetElement
+ field instanceof HTMLFieldSetElement,
)
.reduce((acc, fs) => {
const options = Array.from(fs.elements);
@@ -77,54 +78,41 @@ export const EditRegistries: FunctionComponent = ({
useEffect(() => {
setEditing(
registries.map((reg) =>
- buildRegistry({ ...reg.spec, ...reg.opts, id: reg.id })
- )
+ buildRegistry({ ...reg.spec, ...reg.opts, id: reg.id }),
+ ),
);
}, [registries]);
useEffect(() => void checkRegistries(editing, setCounts), [editing]);
return (
-
-
setModal()}>
-
-
- Edit Schema Registry
- setModal()} />
-
-
-
-
-
+ {editing.map((reg, i) => (
+
+
+
);
};
diff --git a/src/components/Modals/EditSchemas.tsx b/src/components/Modals/EditSchemas.tsx
index a2d8dce..36dce2a 100644
--- a/src/components/Modals/EditSchemas.tsx
+++ b/src/components/Modals/EditSchemas.tsx
@@ -2,6 +2,7 @@ import { h, FunctionComponent } from "preact";
import { useEffect, useRef, useState } from "preact/hooks";
import { ModalOptions } from ".";
+import { BaseModal } from "./BaseModal";
import {
$SCHEMA,
IgluSchema,
@@ -32,7 +33,7 @@ const SCHEMA_TEMPLATE = `{
const validateEdited = (
text: string,
- registry: Registry
+ registry: Registry,
): ResolvedIgluSchema | null => {
const val: unknown = JSON.parse(text);
@@ -122,7 +123,7 @@ export const EditRegistrySchemas: FunctionComponent<{
remove={() => removeEditableSchema(i)}
schema={s}
/>
- )
+ ),
)}
{added.map(
(s, i) =>
@@ -132,7 +133,7 @@ export const EditRegistrySchemas: FunctionComponent<{
remove={() => removeAddedSchema(i)}
schema={s}
/>
- )
+ ),
)}
JSON.parse(txt))
- .catch()
- )
+ .catch(),
+ ),
).then((maybeSchemas) => {
const found: string[] = [];
maybeSchemas.forEach((schema) => {
@@ -183,10 +184,10 @@ export const EditSchemas: FunctionComponent = ({
setModal,
}) => {
const [editableSchemas, setEditableSchemas] = useState(() =>
- registries.map(() => [] as (string | undefined)[])
+ registries.map(() => [] as (string | undefined)[]),
);
const [addedSchemas, setAddedSchemas] = useState(() =>
- registries.map(() => [] as (string | undefined)[])
+ registries.map(() => [] as (string | undefined)[]),
);
useEffect(() => {
@@ -195,103 +196,96 @@ export const EditSchemas: FunctionComponent = ({
reg.walk().then((schemas) => {
if (schemas.length) {
return Promise.all(schemas.map((s) => reg.resolve(s))).then(
- (results) => results.map((r) => JSON.stringify(r.data))
+ (results) => results.map((r) => JSON.stringify(r.data)),
);
} else {
return Promise.resolve([""]);
}
- })
- )
+ }),
+ ),
).then(setEditableSchemas);
}, [registries]);
return (
-
-
setModal()}>
-
-
- Edit Local Schemas
- setModal()}>
-
-
-
+ setAddedSchemas((added) => {
+ added[i][index] = undefined;
+ return [...added];
+ })
+ }
+ removeEditableSchema={(index: number) =>
+ setEditableSchemas((existing) => {
+ existing[i][index] = undefined;
+ return [...existing];
+ })
+ }
+ addSchema={(schema: string | string[]) =>
+ setAddedSchemas((added) => {
+ const adding = Array.isArray(schema) ? schema : [schema];
+ return added
+ .slice(0, i)
+ .concat([added[i].concat(adding)])
+ .concat(added.slice(i));
+ })
+ }
+ />
+ ))}
+
+
+
+
);
};
diff --git a/src/components/Modals/EditTestSuites.tsx b/src/components/Modals/EditTestSuites.tsx
index 95a556b..c54c7da 100644
--- a/src/components/Modals/EditTestSuites.tsx
+++ b/src/components/Modals/EditTestSuites.tsx
@@ -2,6 +2,7 @@ import { h, FunctionComponent } from "preact";
import { useState } from "preact/hooks";
import { ModalOptions } from ".";
+import { BaseModal } from "./BaseModal";
import { objHasProperty } from "../../ts/util";
import { TestSuiteCondition, TestSuiteSpec } from "../../ts/types";
@@ -110,7 +111,7 @@ const validateTestSuite = (text: string): TestSuiteSpec => {
throw Error("Test Suite name must be a string");
if (objHasProperty(val, "tests") && objHasProperty(val, "conditions"))
throw Error(
- "Test Suite may only contain its own conditions or other tests"
+ "Test Suite may only contain its own conditions or other tests",
);
if (objHasProperty(val, "targets")) {
@@ -143,7 +144,7 @@ const validateTestSuite = (text: string): TestSuiteSpec => {
} else if (objHasProperty(val, "conditions")) {
if (!Array.isArray(val.conditions) || !val.conditions.length)
throw Error(
- "Test Suite conditions must be an array of at least one condition"
+ "Test Suite conditions must be an array of at least one condition",
);
try {
@@ -154,7 +155,7 @@ const validateTestSuite = (text: string): TestSuiteSpec => {
}
} else {
throw Error(
- "One of 'tests' or 'conditions' must be supplied in a Test Suite"
+ "One of 'tests' or 'conditions' must be supplied in a Test Suite",
);
}
@@ -169,150 +170,134 @@ export const EditTestSuites: FunctionComponent = ({
const [editing, setEditing] = useState(suites);
return (
-
-
setModal()}>
-
-
- Edit Test Suites
- setModal()} />
-
-
-
- What are Test Suites?
-
- Test Suites allow you to define checks against all the events
- displayed in the extension at once.
-
-
- Test Suites add the flexibility to check the absence of tracking
- (e.g. "Fail if event A does not occur"), as well as verify
- requirements that are higher-level than can be defined at a
- Self-Describing schema-level (e.g. "Event B must contain Context X
- with a valid Y property and be valid according to the schema").
-
-
- This can save you time if you already have a normal site test
- procedure: you can define all your tracking expectations as a Test
- Suite and you then don't need to manually verify that all your
- requirements are met as you use each feature, you can just check
- at the end and see which features had invalid or missing tracking.
-
-
- This functionality also works with imported events from other
- devices (e.g. via a HAR file containing events sent from a mobile
- device).
-
-
-