fix(starfish): time spent sort broken in span summary page (#53600)

Two fixes
1. Enables time spent sort on span summary page
2. Fixes bug where clicking on a query after sorting by time spent on
the db module, would cause the span summary page to break.

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

@@ -8,7 +8,7 @@ import {
   parseFunction,
   Sort,
 } from 'sentry/utils/discover/fields';
-import {SpanMetricsFields} from 'sentry/views/starfish/types';
+import {SpanMetricsFields, StarfishFunctions} from 'sentry/views/starfish/types';
 import {QueryParameterNames} from 'sentry/views/starfish/views/queryParameters';
 
 type Options = {
@@ -18,14 +18,16 @@ type Options = {
 };
 
 const {SPAN_SELF_TIME} = SpanMetricsFields;
+const {TIME_SPENT_PERCENTAGE, SPS, SPM, HTTP_ERROR_COUNT} = StarfishFunctions;
 
 export const SORTABLE_FIELDS = new Set([
   `avg(${SPAN_SELF_TIME})`,
   `p95(${SPAN_SELF_TIME})`,
-  'sps()',
-  'spm()',
-  'time_spent_percentage()',
-  'http_error_count()',
+  `${SPS}()`,
+  `${SPM}()`,
+  `${TIME_SPENT_PERCENTAGE}()`,
+  `${TIME_SPENT_PERCENTAGE}(local)`,
+  `${HTTP_ERROR_COUNT}()`,
 ]);
 
 export const renderHeadCell = ({column, location, sort}: Options) => {

static/app/views/starfish/views/spans/spansTable.tsx

@@ -21,7 +21,11 @@ import useOrganization from 'sentry/utils/useOrganization';
 import {renderHeadCell} from 'sentry/views/starfish/components/tableCells/renderHeadCell';
 import {OverflowEllipsisTextContainer} from 'sentry/views/starfish/components/textAlign';
 import {useSpanList} from 'sentry/views/starfish/queries/useSpanList';
-import {ModuleName, SpanMetricsFields} from 'sentry/views/starfish/types';
+import {
+  ModuleName,
+  SpanMetricsFields,
+  StarfishFunctions,
+} from 'sentry/views/starfish/types';
 import {extractRoute} from 'sentry/views/starfish/utils/extractRoute';
 import {QueryParameterNames} from 'sentry/views/starfish/views/queryParameters';
 import {DataTitles, getThroughputTitle} from 'sentry/views/starfish/views/spans/types';
@@ -56,14 +60,15 @@ type Props = {
 
 const {SPAN_SELF_TIME, SPAN_DESCRIPTION, SPAN_DOMAIN, SPAN_GROUP, SPAN_OP} =
   SpanMetricsFields;
+const {TIME_SPENT_PERCENTAGE, SPS, SPM, HTTP_ERROR_COUNT} = StarfishFunctions;
 
 const SORTABLE_FIELDS = new Set([
   `avg(${SPAN_SELF_TIME})`,
-  'sps()',
-  'spm()',
-  'time_spent_percentage()',
-  'time_spent_percentage(local)',
-  'http_error_count()',
+  `${SPS}()`,
+  `${SPM}()`,
+  `${TIME_SPENT_PERCENTAGE}()`,
+  `${TIME_SPENT_PERCENTAGE}(local)`,
+  `${HTTP_ERROR_COUNT}()`,
 ]);
 
 export default function SpansTable({
@@ -146,6 +151,16 @@ function renderBodyCell(
       endpoint,
       endpointMethod,
     };
+    const sort: string | undefined = queryString?.[QueryParameterNames.SORT];
+
+    // the spans page uses time_spent_percentage(local), so to persist the sort upon navigation we need to replace
+    if (sort?.includes(`${TIME_SPENT_PERCENTAGE}()`)) {
+      queryString[QueryParameterNames.SORT] = sort.replace(
+        `${TIME_SPENT_PERCENTAGE}()`,
+        `${TIME_SPENT_PERCENTAGE}(local)`
+      );
+    }
+
     return (
       <OverflowEllipsisTextContainer>
         {row[SPAN_GROUP] ? (