Browse Source

feat(new-trace): Added node path to url for when event id link has sp… (#67138)

Pushing `node=['span:spanid', 'txn:eventid']` to `location.query` when
`'span-id'` exists in `location.hash` during event id link re-route.

---------

Co-authored-by: Abdullah Khan <abdullahkhan@PG9Y57YDXQ.local>
Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>
Co-authored-by: JonasBa <jonas@badalic.com>
Abdkhan14 11 months ago
parent
commit
6113472f8a

+ 8 - 6
static/app/views/performance/newTraceDetails/trace.tsx

@@ -203,6 +203,7 @@ function Trace({
     manager.initializeTraceSpace([trace.root.space[0], 0, trace.root.space[1], 1]);
     const maybeQueue = decodeScrollQueue(qs.parse(location.search).node);
     const maybeEventId = qs.parse(location.search)?.eventId;
+
     if (maybeQueue || maybeEventId) {
       scrollQueueRef.current = {
         eventId: maybeEventId as string,
@@ -229,20 +230,21 @@ function Trace({
       return;
     }
 
-    const promise = scrollQueueRef.current?.eventId
-      ? manager.scrollToEventID(
-          scrollQueueRef?.current?.eventId,
+    // Node path has higher specificity than eventId
+    const promise = scrollQueueRef.current?.path
+      ? manager.scrollToPath(
           trace,
+          scrollQueueRef.current.path,
           () => setRender(a => (a + 1) % 2),
           {
             api,
             organization,
           }
         )
-      : scrollQueueRef?.current?.path
-        ? manager.scrollToPath(
+      : scrollQueueRef.current.eventId
+        ? manager.scrollToEventID(
+            scrollQueueRef?.current?.eventId,
             trace,
-            scrollQueueRef.current.path,
             () => setRender(a => (a + 1) % 2),
             {
               api,

+ 13 - 1
static/app/views/performance/traceDetails/TraceDetailsRouting.tsx

@@ -41,9 +41,21 @@ function TraceDetailsRouting(props: Props) {
         event.eventID
       );
 
+      const query = {...traceDetailsLocation.query};
+      if (location.hash.includes('span')) {
+        const spanHashValue = location.hash
+          .split('#')
+          .filter(value => value.includes('span'))[0];
+        const spanId = spanHashValue.split('-')[1];
+
+        if (spanId) {
+          query.node = [`span:${spanId}`, `txn:${event.eventID}`];
+        }
+      }
+
       browserHistory.replace({
         pathname: traceDetailsLocation.pathname,
-        query: traceDetailsLocation.query,
+        query,
       });
     }
   }