feat(starfish): Improve time spent column (#53572)

- Slightly nicer typing
- Better tooltip
- Show total time and percentage together

static/app/utils/discover/fieldRenderers.tsx

@@ -780,8 +780,8 @@ const SPECIAL_FUNCTIONS: SpecialFunctions = {
   time_spent_percentage: fieldName => data => {
     return (
       <TimeSpentCell
-        timeSpentPercentage={data[fieldName]}
-        totalSpanTime={data[`sum(${SpanMetricsFields.SPAN_SELF_TIME})`]}
+        percentage={data[fieldName]}
+        total={data[`sum(${SpanMetricsFields.SPAN_SELF_TIME})`]}
       />
     );
   },

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

@@ -1,27 +1,33 @@
+import clamp from 'lodash/clamp';
+
 import {Tooltip} from 'sentry/components/tooltip';
-import {formatPercentage} from 'sentry/utils/formatters';
+import {tct} from 'sentry/locale';
+import {defined} from 'sentry/utils';
+import {formatPercentage, getDuration} from 'sentry/utils/formatters';
 import {TextAlignRight} from 'sentry/views/starfish/components/textAlign';
-import {getTooltip} from 'sentry/views/starfish/views/spans/types';
 
-export function TimeSpentCell({
-  timeSpentPercentage,
-  totalSpanTime,
-}: {
-  timeSpentPercentage: number;
-  totalSpanTime: number;
-}) {
-  const toolTip = getTooltip('timeSpent', totalSpanTime);
-  const percentage = timeSpentPercentage > 1 ? 1 : timeSpentPercentage;
-  const undefinedTimeSpentText = '--%';
+interface Props {
+  percentage?: number;
+  total?: number;
+}
+
+export function TimeSpentCell({percentage, total}: Props) {
+  const formattedPercentage = formatPercentage(clamp(percentage ?? 0, 0, 1));
+  const formattedTotal = getDuration((total ?? 0) / 1000, 1);
+  const tooltip = tct(
+    'The application spent [percentage] of its total time on this span.',
+    {
+      percentage: formattedPercentage,
+    }
+  );
+
   return (
     <TextAlignRight>
-      {percentage >= 0 ? (
-        <Tooltip isHoverable title={toolTip} showUnderline>
-          {formatPercentage(percentage)}
-        </Tooltip>
-      ) : (
-        undefinedTimeSpentText
-      )}
+      <Tooltip isHoverable title={tooltip} showUnderline>
+        {defined(total) ? formattedTotal : '--'} {'('}
+        {defined(percentage) ? formattedPercentage : '--%'}
+        {')'}
+      </Tooltip>
     </TextAlignRight>
   );
 }

static/app/views/starfish/views/spanSummaryPage/index.tsx

@@ -219,10 +219,8 @@ function SpanSummaryPage({params, location}: Props) {
                       )}
                     >
                       <TimeSpentCell
-                        timeSpentPercentage={spanMetrics?.['time_spent_percentage()']}
-                        totalSpanTime={
-                          spanMetrics?.[`avg(${SpanMetricsFields.SPAN_SELF_TIME})`]
-                        }
+                        percentage={spanMetrics?.['time_spent_percentage()']}
+                        total={spanMetrics?.[`avg(${SpanMetricsFields.SPAN_SELF_TIME})`]}
                       />
                     </Block>
                   </BlockContainer>

static/app/views/starfish/views/webServiceView/endpointList.tsx

@@ -115,10 +115,7 @@ function EndpointList({eventView, location, organization, setError}: Props) {
       const cumulativeTime = Number(dataRow['sum(transaction.duration)']);
       const cumulativeTimePercentage = Number(dataRow[TIME_SPENT_IN_SERVICE]);
       return (
-        <TimeSpentCell
-          timeSpentPercentage={cumulativeTimePercentage}
-          totalSpanTime={cumulativeTime}
-        />
+        <TimeSpentCell percentage={cumulativeTimePercentage} total={cumulativeTime} />
       );
     }