fix(new-trace): Adding span self time and total time duration comparisons to span node details. (#69339)

Co-authored-by: Abdullah Khan <abdullahkhan@PG9Y57YDXQ.local>

static/app/components/events/interfaces/spans/newTraceDetailsSpanDetails.tsx

@@ -355,9 +355,10 @@ function NewTraceDetailsSpanDetail(props: SpanDetailProps) {
 
     const timingKeys = getSpanSubTimings(span) ?? [];
     const parentTransaction = props.node.parent_transaction;
-    const averageSpanSelfTimeInSeconds: number | undefined = span['span.average_time']
-      ? span['span.average_time'] / 1000
-      : undefined;
+    const averageSpanSelfTime: number | undefined =
+      span['span.averageResults']?.['avg(span.self_time)'];
+    const averageSpanDuration: number | undefined =
+      span['span.averageResults']?.['avg(span.duration)'];
 
     return (
       <Fragment>
@@ -370,7 +371,10 @@ function NewTraceDetailsSpanDetail(props: SpanDetailProps) {
               <Row title={t('Duration')}>
                 <TraceDrawerComponents.Duration
                   duration={duration}
-                  baseline={undefined}
+                  baseline={averageSpanDuration ? averageSpanDuration / 1000 : undefined}
+                  baseDescription={t(
+                    'Average total time for this span group across the project associated with its parent transaction, over the last 24 hours'
+                  )}
                 />
               </Row>
               {span.exclusive_time ? (
@@ -383,7 +387,9 @@ function NewTraceDetailsSpanDetail(props: SpanDetailProps) {
                   <TraceDrawerComponents.Duration
                     ratio={span.exclusive_time / 1000 / duration}
                     duration={span.exclusive_time / 1000}
-                    baseline={averageSpanSelfTimeInSeconds}
+                    baseline={
+                      averageSpanSelfTime ? averageSpanSelfTime / 1000 : undefined
+                    }
                     baseDescription={t(
                       'Average self time for this span group across the project associated with its parent transaction, over the last 24 hours'
                     )}

static/app/components/events/interfaces/spans/types.tsx

@@ -58,7 +58,10 @@ export type RawSpanType = {
   parent_span_id?: string;
   same_process_as_parent?: boolean;
   sentry_tags?: Record<string, string>;
-  'span.average_time'?: number;
+  'span.averageResults'?: {
+    'avg(span.duration)'?: number;
+    'avg(span.self_time)'?: number;
+  };
   status?: string;
   tags?: {[key: string]: string};
 };

static/app/views/performance/newTraceDetails/trace.spec.tsx

@@ -159,7 +159,7 @@ function mockSpansResponse(
   body: Partial<EventTransaction> = {}
 ) {
   return MockApiClient.addMockResponse({
-    url: `/organizations/org-slug/events/project_slug:${id}/?averageColumn=span.self_time`,
+    url: `/organizations/org-slug/events/project_slug:${id}/?averageColumn=span.self_time&averageColumn=span.duration`,
     method: 'GET',
     asyncDelay: 1,
     body,

static/app/views/performance/newTraceDetails/traceModels/traceTree.spec.tsx

@@ -28,7 +28,7 @@ import {
 } from './traceTree';
 
 const EVENT_REQUEST_URL =
-  '/organizations/org-slug/events/project:event_id/?averageColumn=span.self_time';
+  '/organizations/org-slug/events/project:event_id/?averageColumn=span.self_time&averageColumn=span.duration';
 
 function makeTrace(
   overrides: Partial<TraceSplitResults<TraceFullDetailed>>
@@ -1197,7 +1197,7 @@ describe('TraceTree', () => {
     const node = tree.list[1];
 
     const request = MockApiClient.addMockResponse({
-      url: '/organizations/org-slug/events/undefined:undefined/?averageColumn=span.self_time',
+      url: '/organizations/org-slug/events/undefined:undefined/?averageColumn=span.self_time&averageColumn=span.duration',
       method: 'GET',
       body: makeEvent({startTimestamp: 0}, [
         makeSpan({start_timestamp: 1, op: 'span 1', span_id: '1'}),
@@ -1490,7 +1490,7 @@ describe('TraceTree', () => {
       const node = tree.list[0];
 
       const request = MockApiClient.addMockResponse({
-        url: '/organizations/org-slug/events/undefined:undefined/?averageColumn=span.self_time',
+        url: '/organizations/org-slug/events/undefined:undefined/?averageColumn=span.self_time&averageColumn=span.duration',
         method: 'GET',
         body: makeEvent(),
       });
@@ -1514,7 +1514,7 @@ describe('TraceTree', () => {
       const node = tree.list[0];
 
       const request = MockApiClient.addMockResponse({
-        url: '/organizations/org-slug/events/undefined:undefined/?averageColumn=span.self_time',
+        url: '/organizations/org-slug/events/undefined:undefined/?averageColumn=span.self_time&averageColumn=span.duration',
         method: 'GET',
         body: makeEvent(),
       });
@@ -1747,7 +1747,7 @@ describe('TraceTree', () => {
       });
 
       const second_request = MockApiClient.addMockResponse({
-        url: '/organizations/org-slug/events/child_project:child_event_id/?averageColumn=span.self_time',
+        url: '/organizations/org-slug/events/child_project:child_event_id/?averageColumn=span.self_time&averageColumn=span.duration',
         method: 'GET',
         body: makeEvent({}, [
           makeSpan({op: 'db', span_id: 'span'}),
@@ -1883,7 +1883,7 @@ describe('TraceTree', () => {
       );
 
       const request = MockApiClient.addMockResponse({
-        url: '/organizations/org-slug/events/other_project:event_id/?averageColumn=span.self_time',
+        url: '/organizations/org-slug/events/other_project:event_id/?averageColumn=span.self_time&averageColumn=span.duration',
         method: 'GET',
         body: makeEvent({}, [makeSpan({description: 'span1'})]),
       });

static/app/views/performance/newTraceDetails/traceModels/traceTree.tsx

@@ -188,7 +188,7 @@ function fetchTransactionSpans(
   event_id: string
 ): Promise<EventTransaction> {
   return api.requestPromise(
-    `/organizations/${organization.slug}/events/${project_slug}:${event_id}/?averageColumn=span.self_time`
+    `/organizations/${organization.slug}/events/${project_slug}:${event_id}/?averageColumn=span.self_time&averageColumn=span.duration`
   );
 }
 

static/app/views/performance/newTraceDetails/traceRenderers/virtualizedViewManager.spec.tsx

@@ -104,7 +104,7 @@ function makeList(): VirtualizedList {
 }
 
 const EVENT_REQUEST_URL =
-  '/organizations/org-slug/events/project:event_id/?averageColumn=span.self_time';
+  '/organizations/org-slug/events/project:event_id/?averageColumn=span.self_time&averageColumn=span.duration';
 
 describe('VirtualizedViewManger', () => {
   it('initializes space', () => {
@@ -492,7 +492,7 @@ describe('VirtualizedViewManger', () => {
       });
 
       MockApiClient.addMockResponse({
-        url: '/organizations/org-slug/events/project_slug:child_event_id/?averageColumn=span.self_time',
+        url: '/organizations/org-slug/events/project_slug:child_event_id/?averageColumn=span.self_time&averageColumn=span.duration',
         method: 'GET',
         body: makeEvent(undefined, [makeSpan({span_id: 'other_child_span'})]),
       });

static/app/views/performance/newTraceDetails/traceSearch/traceSearchTokenizer.tsx

@@ -38,8 +38,10 @@ const SPAN_KEYS: Record<keyof TraceTree.Span, Type> = {
   origin: 'string',
   parent_span_id: 'string',
   same_process_as_parent: 'boolean',
+  // TODO Jonas Badalic: The response for the avg duration metrics is now an object and can return
+  // both the avg span_self time and the avg span duration. This will need to be handled differently.
   // This one will need to be flattened
-  'span.average_time': 'number',
+  'span.averageResults': 'object',
   status: 'string',
 
   // These are both records and will need to be handled differently