feat(performance): Fill out more samples data and update tables and charts in destination summary for queues module (#70394)

- Updates latency charts to include receive latency
- Update destination summary transactions table to show operation type
- Update samples table to show message size, id, and status

Author: edwardgou-sentry

static/app/views/performance/queues/charts/latencyChart.tsx

@@ -33,7 +33,11 @@ export function LatencyChart({error}: Props) {
         data={
           [
             {
-              seriesName: t('Average Processing Latency'),
+              seriesName: t('Average Time in Queue'),
+              data: data['avg(messaging.message.receive.latency)'].data,
+            },
+            {
+              seriesName: t('Average Processing Time'),
               data: data['avg_if(span.self_time,span.op,queue.process)'].data,
             },
           ] ?? []
@@ -42,6 +46,7 @@ export function LatencyChart({error}: Props) {
         error={error}
         chartColors={CHART_PALETTE[2].slice(1)}
         type={ChartType.AREA}
+        stacked
       />
     </ChartPanel>
   );

static/app/views/performance/queues/destinationSummary/transactionsTable.spec.tsx

@@ -94,6 +94,7 @@ describe('transactionsTable', () => {
     expect(screen.getByRole('cell', {name: '2'})).toBeInTheDocument();
     expect(screen.getByRole('cell', {name: '6.00ms'})).toBeInTheDocument();
     expect(screen.getByRole('cell', {name: '20.00ms'})).toBeInTheDocument();
+    expect(screen.getByRole('cell', {name: 'Consumer'})).toBeInTheDocument();
     expect(screen.getByRole('button', {name: 'Next'})).toBeInTheDocument();
   });
 });

static/app/views/performance/queues/destinationSummary/transactionsTable.tsx

@@ -127,8 +127,20 @@ function renderBodyCell(
   location: Location,
   organization: Organization
 ) {
+  const op = row['span.op'];
+  const isProducer = op === 'queue.publish';
+  const isConsumer = op === 'queue.process';
   const key = column.key;
-  if (row[key] === undefined) {
+  if (
+    row[key] === undefined ||
+    (isConsumer && ['count_op(queue.publish)'].includes(key)) ||
+    (isProducer &&
+      [
+        'count_op(queue.process)',
+        'avg(messaging.message.receive.latency)',
+        'avg_if(span.self_time,span.op,queue.process)',
+      ].includes(key))
+  ) {
     return (
       <AlignRight>
         <NoValue>{' \u2014 '}</NoValue>
@@ -149,6 +161,17 @@ function renderBodyCell(
     return renderer(key, row);
   }
 
+  if (key === 'span.op') {
+    switch (row[key]) {
+      case 'queue.publish':
+        return t('Producer');
+      case 'queue.process':
+        return t('Consumer');
+      default:
+        return row[key];
+    }
+  }
+
   const renderer = getFieldRenderer(column.key, meta.fields, false);
   return renderer(row, {
     location,

static/app/views/performance/queues/messageConsumerSamplesPanel.spec.tsx

@@ -1,6 +1,6 @@
 import {OrganizationFixture} from 'sentry-fixture/organization';
 
-import {render, screen} from 'sentry-test/reactTestingLibrary';
+import {render, screen, waitForElementToBeRemoved} from 'sentry-test/reactTestingLibrary';
 
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -14,7 +14,7 @@ jest.mock('sentry/utils/useOrganization');
 describe('messageConsumerSamplesPanel', () => {
   const organization = OrganizationFixture();
 
-  let eventsRequestMock, eventsStatsRequestMock;
+  let eventsRequestMock, eventsStatsRequestMock, samplesRequestMock;
 
   jest.mocked(usePageFilters).mockReturnValue({
     isReady: true,
@@ -63,14 +63,31 @@ describe('messageConsumerSamplesPanel', () => {
         meta: {},
       },
     });
+
+    samplesRequestMock = MockApiClient.addMockResponse({
+      url: `/api/0/organizations/${organization.slug}/spans-samples/`,
+      method: 'GET',
+      body: {
+        data: [
+          {
+            span_id: '123',
+            trace: 'abc',
+            project: 'project',
+            timestamp: '2024-03-25T20:31:36+00:00',
+            'span.self_time': 320.300102,
+          },
+        ],
+      },
+    });
   });
 
   afterAll(() => {
     jest.resetAllMocks();
   });
 
-  it('renders', () => {
+  it('renders', async () => {
     render(<MessageConsumerSamplesPanel />);
+    await waitForElementToBeRemoved(() => screen.queryAllByTestId('loading-indicator'));
     expect(eventsStatsRequestMock).toHaveBeenCalled();
     expect(eventsRequestMock).toHaveBeenCalledWith(
       `/organizations/${organization.slug}/events/`,
@@ -97,6 +114,32 @@ describe('messageConsumerSamplesPanel', () => {
         }),
       })
     );
+    expect(samplesRequestMock).toHaveBeenCalledWith(
+      `/api/0/organizations/${organization.slug}/spans-samples/`,
+      expect.objectContaining({
+        query: expect.objectContaining({
+          additionalFields: [
+            'trace',
+            'transaction.id',
+            'span.description',
+            'measurements.messaging.message.body.size',
+            'measurements.messaging.message.receive.latency',
+            'messaging.message.id',
+            'trace.status',
+            'span.self_time',
+          ],
+          firstBound: 2666.6666666666665,
+          lowerBound: 0,
+          project: [],
+          query:
+            'span.op:queue.process OR span.op:queue.publish transaction:sentry.tasks.store.save_event messaging.destination.name:event-queue',
+          referrer: undefined,
+          secondBound: 5333.333333333333,
+          statsPeriod: '10d',
+          upperBound: 8000,
+        }),
+      })
+    );
     expect(screen.getByRole('table', {name: 'Span Samples'})).toBeInTheDocument();
   });
 });

static/app/views/performance/queues/messageConsumerSamplesPanel.tsx

@@ -6,7 +6,7 @@ import {Button} from 'sentry/components/button';
 import Link from 'sentry/components/links/link';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import {DurationUnit} from 'sentry/utils/discover/fields';
+import {DurationUnit, SizeUnit} from 'sentry/utils/discover/fields';
 import {PageAlertProvider} from 'sentry/utils/performance/contexts/pageAlert';
 import {decodeScalar} from 'sentry/utils/queryString';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
@@ -26,6 +26,7 @@ import {useQueuesMetricsQuery} from 'sentry/views/performance/queues/queries/use
 import {computeAxisMax} from 'sentry/views/starfish/components/chart';
 import DetailPanel from 'sentry/views/starfish/components/detailPanel';
 import {useSpanMetricsSeries} from 'sentry/views/starfish/queries/useSeries';
+import {SpanIndexedField} from 'sentry/views/starfish/types';
 import {useSampleScatterPlotSeries} from 'sentry/views/starfish/views/spanSummaryPage/sampleList/durationChart/useSampleScatterPlotSeries';
 
 // We're defining our own query filter here, apart from settings.ts because the spans endpoint doesn't accept IN operations
@@ -92,6 +93,16 @@ export function MessageConsumerSamplesPanel() {
     min: 0,
     max: durationAxisMax,
     enabled: isPanelOpen && durationAxisMax > 0,
+    fields: [
+      SpanIndexedField.TRACE,
+      SpanIndexedField.TRANSACTION_ID,
+      SpanIndexedField.SPAN_DESCRIPTION,
+      SpanIndexedField.MESSAGING_MESSAGE_BODY_SIZE,
+      SpanIndexedField.MESSAGING_MESSAGE_RECEIVE_LATENCY,
+      SpanIndexedField.MESSAGING_MESSAGE_ID,
+      SpanIndexedField.TRACE_STATUS,
+      SpanIndexedField.SPAN_SELF_TIME,
+    ],
   });
 
   const sampledSpanDataSeries = useSampleScatterPlotSeries(
@@ -220,8 +231,12 @@ export function MessageConsumerSamplesPanel() {
               meta={{
                 fields: {
                   'span.self_time': 'duration',
+                  'measurements.messaging.message.body.size': 'size',
+                },
+                units: {
+                  'span.self_time': DurationUnit.MILLISECOND,
+                  'measurements.messaging.message.body.size': SizeUnit.BYTE,
                 },
-                units: {},
               }}
             />
           </ModuleLayout.Full>

static/app/views/performance/queues/messageSpanSamplesTable.tsx

@@ -24,13 +24,17 @@ type DataRowKeys =
   | SpanIndexedField.TIMESTAMP
   | SpanIndexedField.ID
   | SpanIndexedField.SPAN_DESCRIPTION
-  | SpanIndexedField.RESPONSE_CODE;
+  | SpanIndexedField.MESSAGING_MESSAGE_BODY_SIZE
+  | SpanIndexedField.MESSAGING_MESSAGE_RECEIVE_LATENCY
+  | SpanIndexedField.MESSAGING_MESSAGE_ID
+  | SpanIndexedField.TRACE_STATUS
+  | SpanIndexedField.SPAN_SELF_TIME;
 
 type ColumnKeys =
   | SpanIndexedField.ID
-  | SpanIndexedField.MESSAGE_ID
-  | SpanIndexedField.MESSAGE_SIZE
-  | SpanIndexedField.MESSAGE_STATUS
+  | SpanIndexedField.MESSAGING_MESSAGE_ID
+  | SpanIndexedField.MESSAGING_MESSAGE_BODY_SIZE
+  | SpanIndexedField.TRACE_STATUS
   | SpanIndexedField.SPAN_SELF_TIME;
 
 type DataRow = Pick<IndexedResponse, DataRowKeys>;
@@ -41,10 +45,10 @@ const COLUMN_ORDER: Column[] = [
   {
     key: SpanIndexedField.ID,
     name: t('Span ID'),
-    width: COL_WIDTH_UNDEFINED,
+    width: 150,
   },
   {
-    key: SpanIndexedField.MESSAGE_ID,
+    key: SpanIndexedField.MESSAGING_MESSAGE_ID,
     name: t('Message ID'),
     width: COL_WIDTH_UNDEFINED,
   },
@@ -54,12 +58,12 @@ const COLUMN_ORDER: Column[] = [
     width: COL_WIDTH_UNDEFINED,
   },
   {
-    key: SpanIndexedField.MESSAGE_SIZE,
+    key: SpanIndexedField.MESSAGING_MESSAGE_BODY_SIZE,
     name: t('Message Size'),
     width: COL_WIDTH_UNDEFINED,
   },
   {
-    key: SpanIndexedField.MESSAGE_STATUS,
+    key: SpanIndexedField.TRACE_STATUS,
     name: t('Status'),
     width: COL_WIDTH_UNDEFINED,
   },

static/app/views/starfish/components/chart.tsx

@@ -75,6 +75,9 @@ export const STARFISH_FIELDS: Record<string, {outputType: AggregationOutputType}
   [SpanMetricsField.CACHE_ITEM_SIZE]: {
     outputType: 'size',
   },
+  [SpanMetricsField.MESSAGING_MESSAGE_RECEIVE_LATENCY]: {
+    outputType: 'duration',
+  },
 };
 
 export enum ChartType {

static/app/views/starfish/components/tableCells/renderHeadCell.tsx

@@ -26,7 +26,7 @@ type Options = {
 const DEFAULT_SORT_PARAMETER_NAME = 'sort';
 
 const {SPAN_SELF_TIME, HTTP_RESPONSE_CONTENT_LENGTH, CACHE_ITEM_SIZE} = SpanMetricsField;
-const {RESPONSE_CODE} = SpanIndexedField;
+const {RESPONSE_CODE, MESSAGING_MESSAGE_BODY_SIZE} = SpanIndexedField;
 const {
   TIME_SPENT_PERCENTAGE,
   SPS,
@@ -61,6 +61,8 @@ const NUMERIC_FIELDS = new Set([
   `${RESPONSE_CODE}`,
   CACHE_ITEM_SIZE,
   'transaction.duration',
+  SpanIndexedField.SPAN_SELF_TIME,
+  MESSAGING_MESSAGE_BODY_SIZE,
 ]);
 
 export const renderHeadCell = ({column, location, sort, sortParameterName}: Options) => {

static/app/views/starfish/types.tsx

@@ -187,9 +187,10 @@ export enum SpanIndexedField {
   RESPONSE_CODE = 'span.status_code',
   CACHE_HIT = 'cache.hit',
   CACHE_ITEM_SIZE = 'measurements.cache.item_size',
-  MESSAGE_ID = 'message.id',
-  MESSAGE_SIZE = 'message.size',
-  MESSAGE_STATUS = 'message.status',
+  TRACE_STATUS = 'trace.status',
+  MESSAGING_MESSAGE_ID = 'messaging.message.id',
+  MESSAGING_MESSAGE_BODY_SIZE = 'measurements.messaging.message.body.size',
+  MESSAGING_MESSAGE_RECEIVE_LATENCY = 'measurements.messaging.message.receive.latency',
 }
 
 export type IndexedResponse = {
@@ -226,9 +227,10 @@ export type IndexedResponse = {
   [SpanIndexedField.RESPONSE_CODE]: string;
   [SpanIndexedField.CACHE_HIT]: '' | 'true' | 'false';
   [SpanIndexedField.CACHE_ITEM_SIZE]: number;
-  [SpanIndexedField.MESSAGE_ID]: string;
-  [SpanIndexedField.MESSAGE_SIZE]: number;
-  [SpanIndexedField.MESSAGE_STATUS]: string;
+  [SpanIndexedField.TRACE_STATUS]: string;
+  [SpanIndexedField.MESSAGING_MESSAGE_ID]: string;
+  [SpanIndexedField.MESSAGING_MESSAGE_BODY_SIZE]: number;
+  [SpanIndexedField.MESSAGING_MESSAGE_RECEIVE_LATENCY]: number;
 };
 
 export type IndexedProperty = keyof IndexedResponse;
@@ -246,6 +248,7 @@ export enum SpanFunction {
   HTTP_RESPONSE_RATE = 'http_response_rate',
   CACHE_HIT_RATE = 'cache_hit_rate',
   CACHE_MISS_RATE = 'cache_miss_rate',
+  COUNT_OP = 'count_op',
 }
 
 export const StarfishDatasetFields = {
@@ -299,6 +302,12 @@ export const STARFISH_AGGREGATION_FIELDS: Record<
     kind: FieldKind.FUNCTION,
     valueType: FieldValueType.NUMBER,
   },
+  [SpanFunction.COUNT_OP]: {
+    desc: t('Count of spans with matching operation'),
+    defaultOutputType: 'integer',
+    kind: FieldKind.FUNCTION,
+    valueType: FieldValueType.NUMBER,
+  },
 };
 
 // TODO - add more functions and fields, combine shared ones, etc