fix(suspect-spans): Update wording for labels (#30329)

* fix(suspect-spans): Update wording for labels

The wording for the spans tab is still confusing. This change

- adds sort by to the dropdown prefix
- consolidates the use of occurrences and count
- explicitly use the term exclusive time

* fix test

static/app/views/performance/transactionSummary/transactionOverview/suspectSpans.tsx

@@ -62,7 +62,7 @@ const SUSPECT_SPANS_TABLE_COLUMN_ORDER: SuspectSpanTableColumn[] = [
   },
   {
     key: 'count',
-    name: t('Total Occurrences'),
+    name: t('Total Count'),
     width: COL_WIDTH_UNDEFINED,
   },
   {

static/app/views/performance/transactionSummary/transactionSpans/suspectSpanCard.tsx

@@ -53,7 +53,7 @@ const SPANS_TABLE_COLUMN_ORDER: SuspectSpanTableColumn[] = [
   },
   {
     key: 'occurrences',
-    name: t('Occurrences'),
+    name: t('Count'),
     width: COL_WIDTH_UNDEFINED,
   },
   {
@@ -155,10 +155,10 @@ type HeaderItemProps = {
 };
 
 const PERCENTILE_LABELS: Record<SpanSortPercentiles, string> = {
-  [SpanSortPercentiles.P50_EXCLUSIVE_TIME]: t('p50 Duration'),
-  [SpanSortPercentiles.P75_EXCLUSIVE_TIME]: t('p75 Duration'),
-  [SpanSortPercentiles.P95_EXCLUSIVE_TIME]: t('p95 Duration'),
-  [SpanSortPercentiles.P99_EXCLUSIVE_TIME]: t('p99 Duration'),
+  [SpanSortPercentiles.P50_EXCLUSIVE_TIME]: t('p50 Exclusive Time'),
+  [SpanSortPercentiles.P75_EXCLUSIVE_TIME]: t('p75 Exclusive Time'),
+  [SpanSortPercentiles.P95_EXCLUSIVE_TIME]: t('p95 Exclusive Time'),
+  [SpanSortPercentiles.P99_EXCLUSIVE_TIME]: t('p99 Exclusive Time'),
 };
 
 function PercentileDuration(props: HeaderItemProps) {
@@ -184,7 +184,7 @@ function SpanCount(props: HeaderItemProps) {
   if (sort.field === SpanSortOthers.COUNT) {
     return (
       <HeaderItem
-        label={t('Occurrences')}
+        label={t('Total Count')}
         value={String(suspectSpan.count)}
         align="right"
         isSortKey
@@ -195,7 +195,7 @@ function SpanCount(props: HeaderItemProps) {
   if (sort.field === SpanSortOthers.AVG_OCCURRENCE) {
     return (
       <HeaderItem
-        label={t('Avg Occurrences')}
+        label={t('Average Count')}
         value={formatFloat(suspectSpan.avgOccurrences, 2)}
         align="right"
         isSortKey
@@ -256,7 +256,7 @@ function TotalCumulativeDuration(props: HeaderItemProps) {
 
   return (
     <HeaderItem
-      label={t('Total Cumulative Duration')}
+      label={t('Total Exclusive Time')}
       value={value}
       align="right"
       isSortKey={sort.field === SpanSortOthers.SUM_EXCLUSIVE_TIME}

static/app/views/performance/transactionSummary/transactionSpans/utils.tsx

@@ -41,38 +41,38 @@ export function spansRouteWithQuery({
 
 export const SPAN_SORT_OPTIONS: SpanSortOption[] = [
   {
-    prefix: t('Total'),
-    label: t('Cumulative Duration'),
+    prefix: t('Sort By'),
+    label: t('Total Exclusive Time'),
     field: SpanSortOthers.SUM_EXCLUSIVE_TIME,
   },
   {
-    prefix: t('Average'),
-    label: t('Avg Occurrences'),
+    prefix: t('Sort By'),
+    label: t('Average Count'),
     field: SpanSortOthers.AVG_OCCURRENCE,
   },
   {
-    prefix: t('Total'),
-    label: t('Occurrences'),
+    prefix: t('Sort By'),
+    label: t('Total Count'),
     field: SpanSortOthers.COUNT,
   },
   {
-    prefix: t('Percentile'),
-    label: t('p50 Duration'),
+    prefix: t('Sort By'),
+    label: t('p50 Exclusive Time'),
     field: SpanSortPercentiles.P50_EXCLUSIVE_TIME,
   },
   {
-    prefix: t('Percentile'),
-    label: t('p75 Duration'),
+    prefix: t('Sort By'),
+    label: t('p75 Exclusive Time'),
     field: SpanSortPercentiles.P75_EXCLUSIVE_TIME,
   },
   {
-    prefix: t('Percentile'),
-    label: t('p95 Duration'),
+    prefix: t('Sort By'),
+    label: t('p95 Exclusive Time'),
     field: SpanSortPercentiles.P95_EXCLUSIVE_TIME,
   },
   {
-    prefix: t('Percentile'),
-    label: t('p99 Duration'),
+    prefix: t('Sort By'),
+    label: t('p99 Exclusive Time'),
     field: SpanSortPercentiles.P99_EXCLUSIVE_TIME,
   },
 ];

tests/js/spec/views/performance/transactionSpans/index.spec.tsx

@@ -119,13 +119,15 @@ describe('Performance > Transaction Spans', function () {
       expect(cards).toHaveLength(2);
       for (let i = 0; i < cards.length; i++) {
         const card = cards[i];
+        // need to narrow the search to the upper half of the card
+        const upper = await within(card).findByTestId('suspect-card-upper');
 
         // these headers should be present by default
-        expect(await within(card).findByText('Span Operation')).toBeInTheDocument();
-        expect(await within(card).findByText('p75 Duration')).toBeInTheDocument();
-        expect(await within(card).findByText('Frequency')).toBeInTheDocument();
+        expect(await within(upper).findByText('Span Operation')).toBeInTheDocument();
+        expect(await within(upper).findByText('p75 Exclusive Time')).toBeInTheDocument();
+        expect(await within(upper).findByText('Frequency')).toBeInTheDocument();
         expect(
-          await within(card).findByText('Total Cumulative Duration')
+          await within(upper).findByText('Total Exclusive Time')
         ).toBeInTheDocument();
 
         for (const example of SAMPLE_SPANS[i].examples) {
@@ -141,10 +143,10 @@ describe('Performance > Transaction Spans', function () {
     });
 
     [
-      {sort: SpanSortPercentiles.P50_EXCLUSIVE_TIME, label: 'p50 Duration'},
-      {sort: SpanSortPercentiles.P75_EXCLUSIVE_TIME, label: 'p75 Duration'},
-      {sort: SpanSortPercentiles.P95_EXCLUSIVE_TIME, label: 'p95 Duration'},
-      {sort: SpanSortPercentiles.P99_EXCLUSIVE_TIME, label: 'p99 Duration'},
+      {sort: SpanSortPercentiles.P50_EXCLUSIVE_TIME, label: 'p50 Exclusive Time'},
+      {sort: SpanSortPercentiles.P75_EXCLUSIVE_TIME, label: 'p75 Exclusive Time'},
+      {sort: SpanSortPercentiles.P95_EXCLUSIVE_TIME, label: 'p95 Exclusive Time'},
+      {sort: SpanSortPercentiles.P99_EXCLUSIVE_TIME, label: 'p99 Exclusive Time'},
     ].forEach(({sort, label}) => {
       it('renders the right percentile header', async function () {
         const initialData = initializeData({query: {sort}});
@@ -160,16 +162,18 @@ describe('Performance > Transaction Spans', function () {
         expect(cards).toHaveLength(2);
         for (let i = 0; i < cards.length; i++) {
           const card = cards[i];
+          // need to narrow the search to the upper half of the card
+          const upper = await within(card).findByTestId('suspect-card-upper');
 
           // these headers should be present by default
-          expect(await within(card).findByText('Span Operation')).toBeInTheDocument();
-          expect(await within(card).findByText(label)).toBeInTheDocument();
-          expect(await within(card).findByText('Frequency')).toBeInTheDocument();
+          expect(await within(upper).findByText('Span Operation')).toBeInTheDocument();
+          expect(await within(upper).findByText(label)).toBeInTheDocument();
+          expect(await within(upper).findByText('Frequency')).toBeInTheDocument();
           expect(
-            await within(card).findByText('Total Cumulative Duration')
+            await within(upper).findByText('Total Exclusive Time')
           ).toBeInTheDocument();
 
-          const arrow = await within(card).findByTestId('span-sort-arrow');
+          const arrow = await within(upper).findByTestId('span-sort-arrow');
           expect(arrow).toBeInTheDocument();
           expect(
             await within(arrow.closest('div')!).findByText(label)
@@ -192,21 +196,21 @@ describe('Performance > Transaction Spans', function () {
       expect(cards).toHaveLength(2);
       for (let i = 0; i < cards.length; i++) {
         const card = cards[i];
-
-        // need to narrow the search to the upper half of the card because `Occurrences` appears in the table header as well
+        // need to narrow the search to the upper half of the card
         const upper = await within(card).findByTestId('suspect-card-upper');
+
         // these headers should be present by default
         expect(await within(upper).findByText('Span Operation')).toBeInTheDocument();
-        expect(await within(upper).findByText('p75 Duration')).toBeInTheDocument();
-        expect(await within(upper).findByText('Occurrences')).toBeInTheDocument();
+        expect(await within(upper).findByText('p75 Exclusive Time')).toBeInTheDocument();
+        expect(await within(upper).findByText('Total Count')).toBeInTheDocument();
         expect(
-          await within(upper).findByText('Total Cumulative Duration')
+          await within(upper).findByText('Total Exclusive Time')
         ).toBeInTheDocument();
 
         const arrow = await within(upper).findByTestId('span-sort-arrow');
         expect(arrow).toBeInTheDocument();
         expect(
-          await within(arrow.closest('div')!).findByText('Occurrences')
+          await within(arrow.closest('div')!).findByText('Total Count')
         ).toBeInTheDocument();
       }
     });
@@ -225,19 +229,21 @@ describe('Performance > Transaction Spans', function () {
       expect(cards).toHaveLength(2);
       for (let i = 0; i < cards.length; i++) {
         const card = cards[i];
+        // need to narrow the search to the upper half of the card
+        const upper = await within(card).findByTestId('suspect-card-upper');
 
         // these headers should be present by default
-        expect(await within(card).findByText('Span Operation')).toBeInTheDocument();
-        expect(await within(card).findByText('p75 Duration')).toBeInTheDocument();
-        expect(await within(card).findByText('Avg Occurrences')).toBeInTheDocument();
+        expect(await within(upper).findByText('Span Operation')).toBeInTheDocument();
+        expect(await within(upper).findByText('p75 Exclusive Time')).toBeInTheDocument();
+        expect(await within(upper).findByText('Average Count')).toBeInTheDocument();
         expect(
-          await within(card).findByText('Total Cumulative Duration')
+          await within(upper).findByText('Total Exclusive Time')
         ).toBeInTheDocument();
 
-        const arrow = await within(card).findByTestId('span-sort-arrow');
+        const arrow = await within(upper).findByTestId('span-sort-arrow');
         expect(arrow).toBeInTheDocument();
         expect(
-          await within(arrow.closest('div')!).findByText('Avg Occurrences')
+          await within(arrow.closest('div')!).findByText('Average Count')
         ).toBeInTheDocument();
       }
     });
@@ -261,7 +267,7 @@ describe('Performance > Transaction Spans', function () {
         expect(await within(lower).findByText('Example Transaction')).toBeInTheDocument();
         expect(await within(lower).findByText('Timestamp')).toBeInTheDocument();
         expect(await within(lower).findByText('Span Duration')).toBeInTheDocument();
-        expect(await within(lower).findByText('Occurrences')).toBeInTheDocument();
+        expect(await within(lower).findByText('Count')).toBeInTheDocument();
         expect(await within(lower).findByText('Cumulative Duration')).toBeInTheDocument();
       }
     });

tests/js/spec/views/performance/transactionSummary/suspectSpans.spec.tsx

@@ -65,7 +65,7 @@ describe('SuspectSpans', function () {
       expect(await screen.findByText('Operation')).toBeInTheDocument();
       expect(await screen.findByText('Description')).toBeInTheDocument();
       expect(await screen.findByText('P75 Exclusive Time')).toBeInTheDocument();
-      expect(await screen.findByText('Total Occurrences')).toBeInTheDocument();
+      expect(await screen.findByText('Total Count')).toBeInTheDocument();
       expect(await screen.findByText('Total Exclusive Time')).toBeInTheDocument();
       expect(await screen.findByText('Example Transaction')).toBeInTheDocument();
     });