fix(starfish): Improve time spent column formatting (#53989)

- Use extra-short abbreviations
- Show 2 decimal places
- Align rate units with short duration units
- De-emphasize the time spent percentage

static/app/utils/discover/fields.tsx

@@ -127,7 +127,7 @@ export enum RateUnits {
 export const RATE_UNIT_LABELS = {
   [RateUnits.PER_SECOND]: '/s',
   [RateUnits.PER_MINUTE]: '/min',
-  [RateUnits.PER_HOUR]: '/h',
+  [RateUnits.PER_HOUR]: '/hr',
 };
 
 const CONDITIONS_ARGUMENTS: SelectValue<string>[] = [

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

@@ -1,3 +1,4 @@
+import styled from '@emotion/styled';
 import clamp from 'lodash/clamp';
 
 import {Tooltip} from 'sentry/components/tooltip';
@@ -13,7 +14,7 @@ interface Props {
 
 export function TimeSpentCell({percentage, total}: Props) {
   const formattedPercentage = formatPercentage(clamp(percentage ?? 0, 0, 1));
-  const formattedTotal = getDuration((total ?? 0) / 1000, 1);
+  const formattedTotal = getDuration((total ?? 0) / 1000, 2, true);
   const tooltip = tct(
     'The application spent [percentage] of its total time on this span.',
     {
@@ -24,10 +25,17 @@ export function TimeSpentCell({percentage, total}: Props) {
   return (
     <TextAlignRight>
       <Tooltip isHoverable title={tooltip} showUnderline>
-        {defined(total) ? formattedTotal : '--'} {'('}
-        {defined(percentage) ? formattedPercentage : '--%'}
-        {')'}
+        {defined(total) ? formattedTotal : '--'}
+        <Deemphasized>
+          {' ('}
+          {defined(percentage) ? formattedPercentage : '--%'}
+          {')'}
+        </Deemphasized>
       </Tooltip>
     </TextAlignRight>
   );
 }
+
+const Deemphasized = styled('span')`
+  color: ${p => p.theme.gray300};
+`;