ref(spans): Rename span exclusive time to self time in the UI (#32049)

* ref(spans): Rename exclusive time to self time in the UI

* rename exclusive time to self time in tooltip title

* rename exclusive time to self time in self time chart

* move formatter function to utils

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

@@ -381,7 +381,7 @@ class SpanDetail extends React.Component<Props, State> {
                 <Row title="Span Group">
                   {defined(span.hash) ? String(span.hash) : null}
                 </Row>
-                <Row title="Span Exclusive Time">
+                <Row title="Span Self Time">
                   {defined(span.exclusive_time)
                     ? `${Number(span.exclusive_time.toFixed(3)).toLocaleString()}ms`
                     : null}

static/app/views/performance/transactionSummary/transactionSpans/spanDetails/content.tsx

@@ -196,7 +196,7 @@ function SpanDetailsHeader(props: HeaderProps) {
         <SectionSubtext data-test-id="operation-name">{spanSlug.op}</SectionSubtext>
       </HeaderInfo>
       <HeaderInfo data-test-id="header-percentiles">
-        <SectionHeading>{t('Exclusive Time Percentiles')}</SectionHeading>
+        <SectionHeading>{t('Self Time Percentiles')}</SectionHeading>
         <PercentileHeaderBodyWrapper>
           <div data-test-id="section-p75">
             <SectionBody>
@@ -244,7 +244,7 @@ function SpanDetailsHeader(props: HeaderProps) {
         </SectionSubtext>
       </HeaderInfo>
       <HeaderInfo data-test-id="header-total-exclusive-time">
-        <SectionHeading>{t('Total Exclusive Time')}</SectionHeading>
+        <SectionHeading>{t('Total Self Time')}</SectionHeading>
         <SectionBody>
           {defined(sumExclusiveTime) ? (
             <PerformanceDuration abbreviation milliseconds={sumExclusiveTime} />

static/app/views/performance/transactionSummary/transactionSpans/spanDetails/exclusiveTimeChart.tsx

@@ -24,6 +24,8 @@ import getDynamicText from 'sentry/utils/getDynamicText';
 import {SpanSlug} from 'sentry/utils/performance/suspectSpans/types';
 import useApi from 'sentry/utils/useApi';
 
+import {getExclusiveTimeDisplayedValue} from '../utils';
+
 type Props = WithRouterProps & {
   eventView: EventView;
   location: Location;
@@ -72,12 +74,12 @@ export default function ExclusiveTimeChart(props: Props) {
   return (
     <Fragment>
       <HeaderTitleLegend>
-        {t('Exclusive Time Breakdown')}
+        {t('Self Time Breakdown')}
         <QuestionTooltip
           size="sm"
           position="top"
           title={t(
-            'Exclusive Time Breakdown reflects the span exclusive time by percentile over time.'
+            'Self Time Breakdown reflects the span self time by percentile over time.'
           )}
         />
       </HeaderTitleLegend>
@@ -154,6 +156,11 @@ export default function ExclusiveTimeChart(props: Props) {
                 selected: getSeriesSelection(location),
               };
 
+              const formattedResults = results?.map(result => ({
+                ...result,
+                seriesName: getExclusiveTimeDisplayedValue(result.seriesName),
+              }));
+
               return (
                 <TransitionChart loading={loading} reloading={reloading}>
                   <TransparentLoadingMask visible={reloading} />
@@ -164,7 +171,7 @@ export default function ExclusiveTimeChart(props: Props) {
                         {...chartOptions}
                         legend={legend}
                         onLegendSelectChanged={handleLegendSelectChanged}
-                        series={results ?? []}
+                        series={formattedResults ?? []}
                       />
                     ),
                     fixed: <Placeholder height="200px" />,

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

@@ -228,27 +228,27 @@ const COLUMNS: Record<TableColumnKey, TableColumn> = {
   },
   p50ExclusiveTime: {
     key: 'p50ExclusiveTime',
-    name: t('P50 Exclusive Time'),
+    name: t('P50 Self Time'),
     width: COL_WIDTH_UNDEFINED,
   },
   p75ExclusiveTime: {
     key: 'p75ExclusiveTime',
-    name: t('P75 Exclusive Time'),
+    name: t('P75 Self Time'),
     width: COL_WIDTH_UNDEFINED,
   },
   p95ExclusiveTime: {
     key: 'p95ExclusiveTime',
-    name: t('P95 Exclusive Time'),
+    name: t('P95 Self Time'),
     width: COL_WIDTH_UNDEFINED,
   },
   p99ExclusiveTime: {
     key: 'p99ExclusiveTime',
-    name: t('P99 Exclusive Time'),
+    name: t('P99 Self Time'),
     width: COL_WIDTH_UNDEFINED,
   },
   sumExclusiveTime: {
     key: 'sumExclusiveTime',
-    name: t('Total Exclusive Time'),
+    name: t('Total Self Time'),
     width: COL_WIDTH_UNDEFINED,
   },
 };

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

@@ -58,7 +58,7 @@ export const SPAN_RELATIVE_PERIODS = pick(DEFAULT_RELATIVE_PERIODS, [
 export const SPAN_SORT_OPTIONS: SpanSortOption[] = [
   {
     prefix: t('Sort By'),
-    label: t('Total Exclusive Time'),
+    label: t('Total Self Time'),
     field: SpanSortOthers.SUM_EXCLUSIVE_TIME,
   },
   {
@@ -73,22 +73,22 @@ export const SPAN_SORT_OPTIONS: SpanSortOption[] = [
   },
   {
     prefix: t('Sort By'),
-    label: t('p50 Exclusive Time'),
+    label: t('p50 Self Time'),
     field: SpanSortPercentiles.P50_EXCLUSIVE_TIME,
   },
   {
     prefix: t('Sort By'),
-    label: t('p75 Exclusive Time'),
+    label: t('p75 Self Time'),
     field: SpanSortPercentiles.P75_EXCLUSIVE_TIME,
   },
   {
     prefix: t('Sort By'),
-    label: t('p95 Exclusive Time'),
+    label: t('p95 Self Time'),
     field: SpanSortPercentiles.P95_EXCLUSIVE_TIME,
   },
   {
     prefix: t('Sort By'),
-    label: t('p99 Exclusive Time'),
+    label: t('p99 Self Time'),
     field: SpanSortPercentiles.P99_EXCLUSIVE_TIME,
   },
 ];
@@ -237,3 +237,7 @@ export const SPAN_SORT_TO_FIELDS: Record<SpanSort, string[]> = {
     'sumArray(spans_exclusive_time)',
   ],
 };
+
+export function getExclusiveTimeDisplayedValue(value: string): string {
+  return value.replace('exclusive', 'self');
+}

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

@@ -114,8 +114,8 @@ describe('Performance > Transaction Spans', function () {
       expect(await within(grid).findByText('Span Name')).toBeInTheDocument();
       expect(await within(grid).findByText('Total Count')).toBeInTheDocument();
       expect(await within(grid).findByText('Frequency')).toBeInTheDocument();
-      expect(await within(grid).findByText('P75 Exclusive Time')).toBeInTheDocument();
-      expect(await within(grid).findByText('Total Exclusive Time')).toBeInTheDocument();
+      expect(await within(grid).findByText('P75 Self Time')).toBeInTheDocument();
+      expect(await within(grid).findByText('Total Self Time')).toBeInTheDocument();
 
       // there should be a row for each of the spans
       expect(await within(grid).findByText('op1')).toBeInTheDocument();
@@ -127,10 +127,10 @@ describe('Performance > Transaction Spans', function () {
     });
 
     [
-      {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'},
+      {sort: SpanSortPercentiles.P50_EXCLUSIVE_TIME, label: 'P50 Self Time'},
+      {sort: SpanSortPercentiles.P75_EXCLUSIVE_TIME, label: 'P75 Self Time'},
+      {sort: SpanSortPercentiles.P95_EXCLUSIVE_TIME, label: 'P95 Self Time'},
+      {sort: SpanSortPercentiles.P99_EXCLUSIVE_TIME, label: 'P99 Self Time'},
     ].forEach(({sort, label}) => {
       it('renders the right percentile header', async function () {
         const initialData = initializeData({query: {sort}});
@@ -145,7 +145,7 @@ describe('Performance > Transaction Spans', function () {
         expect(await within(grid).findByText('Total Count')).toBeInTheDocument();
         expect(await within(grid).findByText('Frequency')).toBeInTheDocument();
         expect(await within(grid).findByText(label)).toBeInTheDocument();
-        expect(await within(grid).findByText('Total Exclusive Time')).toBeInTheDocument();
+        expect(await within(grid).findByText('Total Self Time')).toBeInTheDocument();
       });
     });
 
@@ -161,8 +161,8 @@ describe('Performance > Transaction Spans', function () {
       expect(await within(grid).findByText('Span Name')).toBeInTheDocument();
       expect(await within(grid).findByText('Total Count')).toBeInTheDocument();
       expect(await within(grid).findByText('Frequency')).toBeInTheDocument();
-      expect(await within(grid).findByText('P75 Exclusive Time')).toBeInTheDocument();
-      expect(await within(grid).findByText('Total Exclusive Time')).toBeInTheDocument();
+      expect(await within(grid).findByText('P75 Self Time')).toBeInTheDocument();
+      expect(await within(grid).findByText('Total Self Time')).toBeInTheDocument();
     });
 
     it('renders the right avg occurrence header', async function () {
@@ -177,8 +177,8 @@ describe('Performance > Transaction Spans', function () {
       expect(await within(grid).findByText('Span Name')).toBeInTheDocument();
       expect(await within(grid).findByText('Average Occurrences')).toBeInTheDocument();
       expect(await within(grid).findByText('Frequency')).toBeInTheDocument();
-      expect(await within(grid).findByText('P75 Exclusive Time')).toBeInTheDocument();
-      expect(await within(grid).findByText('Total Exclusive Time')).toBeInTheDocument();
+      expect(await within(grid).findByText('P75 Self Time')).toBeInTheDocument();
+      expect(await within(grid).findByText('Total Self Time')).toBeInTheDocument();
     });
   });
 });

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

@@ -115,7 +115,7 @@ describe('Performance > Transaction Spans > Span Details', function () {
         await screen.findByText('No results found for your query')
       ).toBeInTheDocument();
 
-      expect(await screen.findByText('Exclusive Time Breakdown')).toBeInTheDocument();
+      expect(await screen.findByText('Self Time Breakdown')).toBeInTheDocument();
     });
   });
 
@@ -257,7 +257,7 @@ describe('Performance > Transaction Spans > Span Details', function () {
 
       const percentilesHeader = await screen.findByTestId('header-percentiles');
       expect(
-        await within(percentilesHeader).findByText('Exclusive Time Percentiles')
+        await within(percentilesHeader).findByText('Self Time Percentiles')
       ).toBeInTheDocument();
       const p75Section = await within(percentilesHeader).findByTestId('section-p75');
       expect(await within(p75Section).findByText('2.00ms')).toBeInTheDocument();
@@ -307,7 +307,7 @@ describe('Performance > Transaction Spans > Span Details', function () {
         organization: data.organization,
       });
 
-      expect(await screen.findByText('Exclusive Time Breakdown')).toBeInTheDocument();
+      expect(await screen.findByText('Self Time Breakdown')).toBeInTheDocument();
     });
 
     it('renders table headers', async function () {

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

@@ -67,8 +67,8 @@ describe('SuspectSpans', function () {
       expect(await screen.findByText('Span Name')).toBeInTheDocument();
       expect(await screen.findByText('Total Count')).toBeInTheDocument();
       expect(await screen.findByText('Frequency')).toBeInTheDocument();
-      expect(await screen.findByText('P75 Exclusive Time')).toBeInTheDocument();
-      expect(await screen.findByText('Total Exclusive Time')).toBeInTheDocument();
+      expect(await screen.findByText('P75 Self Time')).toBeInTheDocument();
+      expect(await screen.findByText('Total Self Time')).toBeInTheDocument();
     });
 
     // Due to the createHref being stubbed out (see link below),
@@ -90,9 +90,9 @@ describe('SuspectSpans', function () {
     //   );
 
     //   await waitForElementToBeRemoved(() => screen.getByTestId('loading-indicator'));
-    //   expect(screen.getByText('P75 Exclusive Time')).toHaveAttribute('href', null);
+    //   expect(screen.getByText('P75 Self Time')).toHaveAttribute('href', null);
     //   expect(screen.getByText('Total Occurrences')).toHaveAttribute('href', null);
-    //   expect(screen.getByText('Total Exclusive Time')).toHaveAttribute('href', null);
+    //   expect(screen.getByText('Total Self Time')).toHaveAttribute('href', null);
     // });
   });
 });