Refactor schema into nested fields (#49)

Co-authored-by: Kevin Paxton <[email protected]>

packages/browser/src/components/DebugToolbar.tsx

@@ -10,7 +10,7 @@ export default function DebugToolbar() {
 
   const addMockData = useCallback(() => {
     for (const trace of mockData) {
-      collector?.addHttpRequest(trace);
+      collector?.addEvent(trace);
     }
   }, [collector]);
 

packages/browser/src/components/KeyValueList.tsx

@@ -27,18 +27,19 @@ export function KeyValueList({ label, uid, keyValuePairs }: KeyValueListProps) {
 }
 
 export function RequestHeaders({ trace }: { trace: Trace }) {
-  if (!Object.keys(trace.requestHeaders).length) return null;
+  const requestHeaders = trace.http?.requestHeaders;
+  if (!requestHeaders || Object.keys(requestHeaders).length === 0) return null;
 
-  const headers = cloneHeaders(trace.requestHeaders) as Record<string, any>;
+  const headers = cloneHeaders(requestHeaders) as Record<string, any>;
   if (headers.authorization) headers.authorization = <Authorization value={headers.authorization} />;
   return <KeyValueList label="Headers" uid={trace.id} keyValuePairs={Object.entries(headers)} />;
 }
 
 export function ResponseHeaders({ trace }: { trace: Trace }) {
-  if (!trace.responseHeaders) return null;
-  if (!Object.keys(trace.responseHeaders).length) return null;
+  const responseHeaders = trace.http?.responseHeaders;
+  if (!responseHeaders || Object.keys(responseHeaders).length === 0) return null;
 
-  const headers = cloneHeaders(trace.responseHeaders) as Record<string, any>;
+  const headers = cloneHeaders(responseHeaders) as Record<string, any>;
   if (headers.authorization) headers.authorization = <Authorization value={headers.authorization} />;
 
   return <KeyValueList label="Headers" uid={trace.id} keyValuePairs={Object.entries(headers)} />;

packages/browser/src/components/TraceDetail.tsx

@@ -43,18 +43,9 @@ export default function TraceDetail({ className }: DetailProps) {
   const { getSelectedTrace, clearSelectedTrace } = useApplication();
   const trace = getSelectedTrace();
 
-  const {
-    serviceName,
-    timestamp,
-    method,
-    host,
-    url,
-    requestHeaders,
-    statusCode,
-    statusMessage,
-    responseHeaders,
-    duration,
-  } = trace || {};
+  const { http, serviceName, timestamp } = trace || {};
+  const { method, host, url, requestHeaders, statusCode, statusMessage, responseHeaders, duration } = http || {};
+
   const responseComplete = duration !== undefined && statusCode !== undefined;
 
   const updateTimer = useCallback(() => {

packages/browser/src/components/TraceList.tsx

@@ -27,10 +27,12 @@ export default function TraceList({ className }: TraceListProps) {
   const data = [...traces.values()];
 
   function getMethodAndStatus(trace: Trace) {
-    return <MethodAndStatus method={trace.method} statusCode={trace.statusCode} />;
+    return trace.http ? <MethodAndStatus method={trace.http.method} statusCode={trace.http.statusCode} /> : null;
   }
 
-  function rowStyle({ statusCode }: Trace) {
+  function rowStyle(trace: Trace) {
+    const statusCode = trace.http?.statusCode;
+
     let color = '';
     if (!statusCode) color = '';
     else if (statusCode >= 500) color = 'bg-purple-500';
@@ -41,7 +43,9 @@ export default function TraceList({ className }: TraceListProps) {
     return color ? `bg-opacity-20 ${color}` : '';
   }
 
-  function cellStyle({ statusCode }: Trace) {
+  function cellStyle(trace: Trace) {
+    const statusCode = trace.http?.statusCode;
+
     let color = 'border-transparent';
     if (!statusCode) color = 'border-transparent';
     else if (statusCode >= 500) color = 'border-purple-500';
@@ -56,7 +60,7 @@ export default function TraceList({ className }: TraceListProps) {
   }
 
   function getRequestDuration(trace: Trace) {
-    return trace.duration ? `${(trace.duration / 1000).toFixed(2)}s` : <Loading size={2} />;
+    return trace.http?.duration ? `${(trace.http.duration / 1000).toFixed(2)}s` : <Loading size={2} />;
   }
 
   const columns: [string, (x: Trace) => string | number | React.ReactNode, string, (x: Trace) => string][] = [

packages/browser/src/components/RequestRowData.tsx → packages/browser/src/components/TraceListItem.tsx

@@ -2,20 +2,20 @@ import useApplication from '@/hooks/useApplication';
 
 export type RequestHeadingProps = {
   iconPath: string;
-  hostName: string;
+  hostName?: string;
   path: string;
   data?: string;
 };
 
-export function RequestRowData({ iconPath, hostName, path, data }: RequestHeadingProps) {
+export function TraceListItem({ iconPath, hostName, path, data }: RequestHeadingProps) {
   const { selectedTraceId: traceId } = useApplication();
   const hasSelected = !!traceId;
   const pathValue = hasSelected ? `.../${path.split('/').splice(-1, 1).join('/')}` : path;
   return (
     <>
       <span className="flex flex-row items-center">
         <img src={iconPath} alt="" className="flex-0 inline-block w-4 h-4 mr-1.5" />
-        <span className="font-semibold pr-1">{hostName}</span>
+        <span className="font-semibold pr-1">{hostName ?? ''}</span>
         <span>{pathValue}</span>
       </span>
       <span className="block font text-opacity-70 text-black text-xs font-mono">{data || null}</span>

packages/browser/src/context/ApplicationContext.tsx

@@ -87,7 +87,7 @@ export default function ApplicationContextProvider({ children }: React.HTMLAttri
         for (const [traceId, trace] of collectorRef.current.traces.entries()) {
           let includeInTraces = true;
 
-          if (!!filter.value && !trace?.url.includes(filter.value)) includeInTraces = false;
+          if (!!filter.value && !trace?.http?.url.includes(filter.value)) includeInTraces = false;
 
           if (includeInTraces && filter.systems.length > 0) {
             const validSystems = systems.filter(x => filter.systems.includes(x.name));

packages/browser/src/model/CollectorClient.ts

@@ -1,4 +1,4 @@
-import { DEFAULT_WEB_SOCKET_PORT, Event, EventType, HttpRequest } from '@envy/core';
+import { DEFAULT_WEB_SOCKET_PORT, Event } from '@envy/core';
 
 import { Traces } from '@/types';
 import { safeParseJson } from '@/utils';
@@ -53,16 +53,8 @@ export default class CollectorClient {
 
     socket.onmessage = ({ data }) => {
       const payload = safeParseJson<Event>(data.toString());
-      switch (payload?.type) {
-        case EventType.HttpRequest: {
-          this.addHttpRequest(payload as HttpRequest);
-          break;
-        }
-        case EventType.SanityRequest: {
-          // TODO: this is probably not correct??
-          this.addHttpRequest(payload as HttpRequest);
-          break;
-        }
+      if (payload) {
+        this.addEvent(payload);
       }
     };
   }
@@ -71,14 +63,9 @@ export default class CollectorClient {
     this._connect();
   }
 
-  addHttpRequest(httpRequest: HttpRequest) {
-    const trace = { ...httpRequest };
-
-    if (trace.responseHeaders?.['content-encoding'] === 'gzip') {
-      trace.responseBody = '';
-    }
-
-    this._traces.set(httpRequest.id, httpRequest);
+  addEvent(event: Event) {
+    const trace = { ...event };
+    this._traces.set(trace.id, trace);
     this._signalChange();
   }