feat(starfish): Add the delta columns to WSV
diff --git a/static/app/views/starfish/utils/generatePerformanceEventView.tsx b/static/app/views/starfish/utils/generatePerformanceEventView.tsx
index 4b096598672ad..3970852fceb64 100644
--- a/static/app/views/starfish/utils/generatePerformanceEventView.tsx
+++ b/static/app/views/starfish/utils/generatePerformanceEventView.tsx
@@ -125,8 +125,11 @@ export function generateWebServiceEventView(
     'transaction',
     'http.method',
     'tps()',
+    'tps_percent_change()',
     'p95(transaction.duration)',
+    'percentile_percent_change(transaction.duration,0.95)',
     'http_error_count()',
+    'http_error_count_percent_change()',
     'time_spent_percentage()',
     'sum(transaction.duration)',
   ];
diff --git a/static/app/views/starfish/views/webServiceView/endpointList.tsx b/static/app/views/starfish/views/webServiceView/endpointList.tsx
index 71854f2296244..ffb9e0cd1e97e 100644
--- a/static/app/views/starfish/views/webServiceView/endpointList.tsx
+++ b/static/app/views/starfish/views/webServiceView/endpointList.tsx
@@ -33,10 +33,13 @@ import {DataTitles} from 'sentry/views/starfish/views/spans/types';
 import {EndpointDataRow} from 'sentry/views/starfish/views/webServiceView/endpointDetails';
 
 const COLUMN_TITLES = [
-  'Endpoint',
+  t('Endpoint'),
   DataTitles.throughput,
+  t('Change'),
   DataTitles.p95,
+  t('Change'),
   DataTitles.errorCount,
+  t('Change'),
   DataTitles.timeSpent,
 ];
 
@@ -131,21 +134,38 @@ function EndpointList({eventView, location, organization, setError}: Props) {
     }
 
     if (
-      field.startsWith(
-        'equation|(percentile_range(transaction.duration,0.95,lessOrEquals,'
-      )
+      [
+        'percentile_percent_change(transaction.duration,0.95)',
+        'http_error_count_percent_change()',
+      ].includes(field)
     ) {
       const deltaValue = dataRow[field] as number;
       const trendDirection = deltaValue < 0 ? 'good' : deltaValue > 0 ? 'bad' : 'neutral';
 
       return (
         <NumberContainer>
-          <TrendingDuration trendDirection={trendDirection}>
+          <PercentChangeCell trendDirection={trendDirection}>
+            {tct('[sign][delta]', {
+              sign: deltaValue >= 0 ? '+' : '-',
+              delta: formatPercentage(Math.abs(deltaValue), 2),
+            })}
+          </PercentChangeCell>
+        </NumberContainer>
+      );
+    }
+
+    if (field === 'tps_percent_change()') {
+      const deltaValue = dataRow[field] as number;
+      const trendDirection = deltaValue > 0 ? 'good' : deltaValue < 0 ? 'bad' : 'neutral';
+
+      return (
+        <NumberContainer>
+          <PercentChangeCell trendDirection={trendDirection}>
             {tct('[sign][delta]', {
               sign: deltaValue >= 0 ? '+' : '-',
               delta: formatPercentage(Math.abs(deltaValue), 2),
             })}
-          </TrendingDuration>
+          </PercentChangeCell>
         </NumberContainer>
       );
     }
@@ -319,7 +339,9 @@ function EndpointList({eventView, location, organization, setError}: Props) {
 
 export default EndpointList;
 
-const TrendingDuration = styled('div')<{trendDirection: 'good' | 'bad' | 'neutral'}>`
+export const PercentChangeCell = styled('div')<{
+  trendDirection: 'good' | 'bad' | 'neutral';
+}>`
   color: ${p =>
     p.trendDirection === 'good'
       ? p.theme.successText
diff --git a/static/app/views/starfish/views/webServiceView/failureDetailPanel/failureDetailTable.tsx b/static/app/views/starfish/views/webServiceView/failureDetailPanel/failureDetailTable.tsx
index 58cdca9558c3c..401f83b37eaa8 100644
--- a/static/app/views/starfish/views/webServiceView/failureDetailPanel/failureDetailTable.tsx
+++ b/static/app/views/starfish/views/webServiceView/failureDetailPanel/failureDetailTable.tsx
@@ -7,13 +7,16 @@ import GridEditable, {GridColumnHeader} from 'sentry/components/gridEditable';
 import {Alignments} from 'sentry/components/gridEditable/sortLink';
 import Link from 'sentry/components/links/link';
 import Pagination from 'sentry/components/pagination';
-import {t} from 'sentry/locale';
+import {t, tct} from 'sentry/locale';
 import {Organization} from 'sentry/types';
 import {TableData, TableDataRow} from 'sentry/utils/discover/discoverQuery';
 import EventView from 'sentry/utils/discover/eventView';
 import {getFieldRenderer} from 'sentry/utils/discover/fieldRenderers';
+import {NumberContainer} from 'sentry/utils/discover/styles';
+import {formatPercentage} from 'sentry/utils/formatters';
 import {TableColumn} from 'sentry/views/discover/table/types';
 import {EndpointDataRow} from 'sentry/views/starfish/views/endpointDetails';
+import {PercentChangeCell} from 'sentry/views/starfish/views/webServiceView/endpointList';
 import {FailureSpike} from 'sentry/views/starfish/views/webServiceView/types';
 
 type Props = {
@@ -30,12 +33,17 @@ const COLUMN_ORDER = [
   {
     key: 'transaction',
     name: t('Endpoint'),
-    width: 400,
+    width: 450,
   },
   {
     key: 'http_error_count()',
     name: t('5xx Responses'),
-    width: 100,
+    width: 150,
+  },
+  {
+    key: 'http_error_count_percent_change()',
+    name: t('Change'),
+    width: 80,
   },
 ];
 
@@ -67,7 +75,7 @@ export default function FailureDetailTable({
     const fieldRenderer = getFieldRenderer(field, tableData.meta, false);
     const rendered = fieldRenderer(dataRow, {organization, location});
 
-    if (column.key === 'transaction') {
+    if (field === 'transaction') {
       const prefix = dataRow['http.method'] ? `${dataRow['http.method']} ` : '';
       const queryParams = {
         start: spike ? new Date(spike.startTimestamp) : undefined,
@@ -82,6 +90,22 @@ export default function FailureDetailTable({
       );
     }
 
+    if (field === 'http_error_count_percent_change()') {
+      const deltaValue = dataRow[field] as number;
+      const trendDirection = deltaValue < 0 ? 'good' : deltaValue > 0 ? 'bad' : 'neutral';
+
+      return (
+        <NumberContainer>
+          <PercentChangeCell trendDirection={trendDirection}>
+            {tct('[sign][delta]', {
+              sign: deltaValue >= 0 ? '+' : '-',
+              delta: formatPercentage(Math.abs(deltaValue), 2),
+            })}
+          </PercentChangeCell>
+        </NumberContainer>
+      );
+    }
+
     return rendered;
   }
 

Also adds it to the 500 responses slide out panel
Requires https://github.com/getsentry/sentry/pull/50737 to be deployed (it's deployed)

Note: Noticing some funky behaviour with the http error count change
will dig into that in a follow up