feat: Integrations (#7)

Adds integrations API to spotlight A lot of the smaller details need to be revisited/figured out but for now this will do --------- Co-authored-by: Lukas Stracke <[email protected]>
getsentry · Oct 27, 2023 · 62af877 · 62af877
1 parent 1709783
commit 62af877
Show file tree

Hide file tree

Showing 20 changed files with 1,645 additions and 111 deletions.
diff --git a/.gitignore b/.gitignore
@@ -9,6 +9,7 @@ lerna-debug.log*
 
 node_modules
 dist
+node
 dist-ssr
 *.local
 
@@ -22,3 +23,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.yalc
+yalc.lock
diff --git a/package.json b/package.json
@@ -6,13 +6,15 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build && yarn build:sidecar",
-    "build:sidecar": "tsc --module nodenext --moduleResolution nodenext --esModuleInterop false --target esnext src/node/sidecar.ts --outDir dist/",
-    "watch:build": "vite build --watch",
+    "build:sidecar": "tsc --module nodenext --moduleResolution nodenext --esModuleInterop false --target esnext src/node/sidecar.ts --outDir node/",
+    "build:watch": "vite build --watch",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "yalc:publish": "yalc publish --push --sig --private"
   },
   "files": [
-    "dist"
+    "dist",
+    "node"
   ],
   "main": "./dist/sentry-spotlight.js",
   "exports": {
@@ -21,12 +23,13 @@
       "require": "./dist/sentry-spotlight.umd.cjs"
     },
     "./sidecar": {
-      "import": "./dist/sidecar.js",
-      "require": "./dist/sidecar.cjs"
+      "import": "./node/sidecar.js",
+      "require": "./node/sidecar.cjs"
     }
   },
   "dependencies": {
     "@fontsource/raleway": "^5.0.8",
+    "@sentry/utils": "^7.73.0",
     "autoprefixer": "^10.4.15",
     "dayjs": "^1.11.9",
     "platformicons": "^5.6.2",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,29 +1,62 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Trigger from "./components/Trigger";
 import Debugger from "./components/Debugger";
 import { SentryEventsContextProvider } from "./lib/sentryEventsContext";
 import { NavigationProvider } from "./lib/navigationContext";
 import { OnlineContextProvider } from "./lib/onlineContext";
+import type { Integration } from "./integrations/integration";
+import { connectToRelay } from ".";
+
+const DEFAULT_RELAY = "http://localhost:8969/stream";
 
 export default function App({
   fullScreen = false,
   defaultEventId,
+  integrations = [],
 }: {
   fullScreen?: boolean;
   defaultEventId?: string;
+  integrations?: Integration[];
 }) {
+  console.log('[Spotlight] App rerender')
+
+  const [integrationData, setIntegrationData] = useState<Record<string, Array<unknown>>>({})
+
+  useEffect(() => {
+    // Map that holds the information which kind of content type should be dispatched to which integration(s)
+    const contentTypeToIntegrations = new Map<string, Integration[]>();
+
+    integrations.forEach((integration) => 
+      integration.forwardedContentType?.forEach((contentType) => {
+        const i = contentTypeToIntegrations.get(contentType) || [];
+        i.push(integration);
+        contentTypeToIntegrations.set(contentType, i);
+      })
+    );
+
+    const cleanupListeners = connectToRelay(DEFAULT_RELAY, contentTypeToIntegrations, setIntegrationData);
+
+    return () => {
+      console.log('[Spotlight] useeffect cleanup')
+      cleanupListeners();
+    }
+  }, [] );
+
   const [isOpen, setOpen] = useState(fullScreen);
 
+  console.log('[Spotlight] Integrations', integrationData);
+
   return (
     <>
       <SentryEventsContextProvider>
         <OnlineContextProvider>
-          <NavigationProvider>
+          <NavigationProvider initializedIntegrations={integrations}>
             <Trigger isOpen={isOpen} setOpen={setOpen} />
             <Debugger
               isOpen={isOpen}
               setOpen={setOpen}
               defaultEventId={defaultEventId}
+              integrationData={integrationData}
             />
           </NavigationProvider>
         </OnlineContextProvider>

diff --git a/src/components/Debugger.tsx b/src/components/Debugger.tsx
@@ -9,10 +9,12 @@ export default function Debugger({
   isOpen,
   setOpen,
   defaultEventId,
+  integrationData,
 }: {
   isOpen: boolean;
   setOpen: (value: boolean) => void;
   defaultEventId?: string;
+  integrationData: Record<string, Array<unknown>>;
 }) {
   useKeyPress("Escape", () => {
     setOpen(false);
@@ -74,7 +76,7 @@ export default function Debugger({
         </button>
       </div>
 
-      <Overview />
+      <Overview integrationData={integrationData}/>
     </div>
   );
 }
diff --git a/src/components/Overview.tsx b/src/components/Overview.tsx
@@ -10,16 +10,19 @@ import dataCache from "~/lib/dataCache";
 import { useNavigation } from "~/lib/useNavigation";
 import SdkList from "./SdkList";
 import { useSentryTraces } from "~/lib/useSentryTraces";
+import { IntegrationTab } from "~/integrations/integration";
 
 const DEFAULT_TAB = "errors";
 
-export default function Overview() {
+export default function Overview({
+  integrationData,
+}: {integrationData: Record<string, Array<unknown>>}) {
   const [activeTab, setActiveTab] = useState(DEFAULT_TAB);
 
   const events = useSentryEvents();
   const traces = useSentryTraces();
 
-  const { traceId, setTraceId, eventId, setEventId, setSpanId } =
+  const { integrations, traceId, setTraceId, eventId, setEventId, setSpanId } =
     useNavigation();
 
   useKeyPress("Escape", () => {
@@ -28,7 +31,7 @@ export default function Overview() {
     setSpanId(null);
   });
 
-  const tabs = [
+  const tabs: IntegrationTab[] = [
     {
       name: "Errors",
       count: events.filter((e) => "exception" in e).length,
@@ -59,7 +62,25 @@ export default function Overview() {
       },
     },
   ];
-
+
+  integrations.forEach((integration) => {
+    if (integration.tabs) {
+      integration.tabs.forEach((tab) => {
+        tabs.push(
+          {
+            ...tab,
+            active: activeTab === tab.name,
+            onSelect: () => {
+              setEventId(null);
+              setTraceId(null);
+              setActiveTab(tab.name);
+            },
+          }
+        );
+      });
+    }
+  });
+
   if (eventId) {
     const activeEvent = dataCache.getEventById(eventId);
     if (activeEvent) {
@@ -84,16 +105,18 @@ export default function Overview() {
     }
   }
 
+  const TabContent = tabs.find((tab) => tab.name === activeTab)?.content || (() => (<p>This tab doesn't seem to display anything (yet).</p>));
+
   return (
     <>
       <Tabs tabs={tabs} />
       {activeTab === "traces" ? (
         <TraceList />
-      ) : activeTab == "errors" ? (
+      ) : activeTab === "errors" ? (
         <EventList events={events} />
-      ) : (
+      ) : activeTab === "sdks" ? (
         <SdkList />
-      )}
+      ): <TabContent integrationData={integrationData}/>}
     </>
   );
 }
diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx
@@ -6,6 +6,7 @@ export type Props = {
     active?: boolean;
     count?: number;
     onSelect?: () => void;
+    component?: React.ReactNode;
   }[];
 };