feat(starfish): Updates to new tooltips and updates some headers styles to be more consistent (#52913)

Updates to new tooltips and updates some headers styles to be more
consistent

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

@@ -16,7 +16,7 @@ export function TimeSpentCell({
   return (
     <TextAlignRight>
       {percentage >= 0 ? (
-        <Tooltip isHoverable title={toolTip}>
+        <Tooltip isHoverable title={toolTip} showUnderline>
           {formatPercentage(percentage)}
         </Tooltip>
       ) : (

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

@@ -10,7 +10,7 @@ import Panel from 'sentry/components/panels/panel';
 import PanelBody from 'sentry/components/panels/panelBody';
 import QuestionTooltip from 'sentry/components/questionTooltip';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
-import {t} from 'sentry/locale';
+import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {fromSorts} from 'sentry/utils/discover/eventView';
 import {Sort} from 'sentry/utils/discover/fields';
@@ -163,13 +163,22 @@ function SpanSummaryPage({params, location}: Props) {
                     <Block title={t('Operation')}>{span?.[SPAN_OP]}</Block>
                     <Block
                       title={t('Throughput')}
-                      description={t('Throughput of this span per second')}
+                      description={tct('Throughput of this [spanType] per second', {
+                        spanType: spanDescriptionCardTitle,
+                      })}
                     >
                       <ThroughputCell throughputPerSecond={spanMetrics?.['sps()']} />
                     </Block>
                     <Block
                       title={t('Duration (P95)')}
-                      description={t('Time spent in this span')}
+                      description={tct(
+                        '95% of [spanType] in the selected period have a lower duration than this value',
+                        {
+                          spanType: spanDescriptionCardTitle.endsWith('y')
+                            ? `${spanDescriptionCardTitle.slice(0, -1)}ies`
+                            : `${spanDescriptionCardTitle}s`,
+                        }
+                      )}
                     >
                       <DurationCell
                         milliseconds={spanMetrics?.[`p95(${SPAN_SELF_TIME})`]}
@@ -330,6 +339,8 @@ const BlockTitle = styled('h3')`
   margin: 0;
   margin-bottom: ${space(1)};
   white-space: nowrap;
+  display: flex;
+  height: ${space(3)};
 `;
 
 const BlockContent = styled('h4')`

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

@@ -39,7 +39,7 @@ export const getTooltip = (
         <div>
           <DurationCell milliseconds={options[0] as number} />
         </div>
-        <Link to="/starfish/definitions/">How was this calculated?</Link>
+        <Link to="/starfish/definitions/">{t('How was this calculated?')}</Link>
       </Fragment>
     );
   }

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

@@ -4,7 +4,6 @@ import {Location, LocationDescriptorObject} from 'history';
 import * as qs from 'query-string';
 
 import GuideAnchor from 'sentry/components/assistant/guideAnchor';
-import Duration from 'sentry/components/duration';
 import GridEditable, {
   COL_WIDTH_UNDEFINED,
   GridColumn,
@@ -15,7 +14,7 @@ import Link from 'sentry/components/links/link';
 import Pagination from 'sentry/components/pagination';
 import BaseSearchBar from 'sentry/components/searchBar';
 import {Tooltip} from 'sentry/components/tooltip';
-import {t, tct} from 'sentry/locale';
+import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {Organization} from 'sentry/types';
 import {trackAnalytics} from 'sentry/utils/analytics';
@@ -26,21 +25,44 @@ import DiscoverQuery, {
 import EventView, {isFieldSortable, MetaType} from 'sentry/utils/discover/eventView';
 import {getFieldRenderer} from 'sentry/utils/discover/fieldRenderers';
 import {getAggregateAlias} from 'sentry/utils/discover/fields';
-import {NumberContainer} from 'sentry/utils/discover/styles';
-import {formatPercentage} from 'sentry/utils/formatters';
 import {TableColumn} from 'sentry/views/discover/table/types';
 import ThroughputCell from 'sentry/views/starfish/components/tableCells/throughputCell';
+import {TimeSpentCell} from 'sentry/views/starfish/components/tableCells/timeSpentCell';
 import {TIME_SPENT_IN_SERVICE} from 'sentry/views/starfish/utils/generatePerformanceEventView';
 import {DataTitles} from 'sentry/views/starfish/views/spans/types';
 
+const StyledTooltip = styled(Tooltip)`
+  display: block;
+`;
+
+function ChangeHeader(title: string) {
+  return (
+    <StyledTooltip showUnderline title={title}>
+      {t('Change')}
+    </StyledTooltip>
+  );
+}
+
 const COLUMN_TITLES = [
   t('Endpoint'),
   DataTitles.throughput,
-  t('Change'),
+  ChangeHeader(
+    t(
+      'The change in throughput from the first half v. second half of the selected time range'
+    )
+  ),
   DataTitles.p95,
-  t('Change'),
+  ChangeHeader(
+    t(
+      'The change in P95 duration from the first half v. second half of the selected time range'
+    )
+  ),
   DataTitles.errorCount,
-  t('Change'),
+  ChangeHeader(
+    t(
+      'The change in 5XX responses from the first half v. second half of the selected time range'
+    )
+  ),
   DataTitles.timeSpent,
 ];
 
@@ -120,17 +142,10 @@ function EndpointList({eventView, location, organization, setError}: Props) {
       const cumulativeTime = Number(dataRow['sum(transaction.duration)']);
       const cumulativeTimePercentage = Number(dataRow[TIME_SPENT_IN_SERVICE]);
       return (
-        <Tooltip
-          title={tct('Total time spent by endpoint is [cumulativeTime])', {
-            cumulativeTime: (
-              <Duration seconds={cumulativeTime / 1000} fixedDigits={2} abbreviation />
-            ),
-          })}
-          containerDisplayMode="block"
-          position="top"
-        >
-          <NumberContainer>{formatPercentage(cumulativeTimePercentage)}</NumberContainer>
-        </Tooltip>
+        <TimeSpentCell
+          timeSpentPercentage={cumulativeTimePercentage}
+          totalSpanTime={cumulativeTime}
+        />
       );
     }
 

static/app/views/starfish/views/webServiceView/endpointOverview/index.tsx

@@ -12,6 +12,7 @@ import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
 import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
 import {PerformanceLayoutBodyRow} from 'sentry/components/performance/layouts';
 import Placeholder from 'sentry/components/placeholder';
+import QuestionTooltip from 'sentry/components/questionTooltip';
 import {SegmentedControl} from 'sentry/components/segmentedControl';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
@@ -141,6 +142,13 @@ export default function EndpointOverview() {
             <Fragment>
               <Header>
                 <ChartLabel>{DataTitles.p95}</ChartLabel>
+                <QuestionTooltip
+                  size="sm"
+                  position="right"
+                  title={t(
+                    '95% of requests in the selected period have a lower duration than this value'
+                  )}
+                />
               </Header>
               <ChartSummaryValue
                 isLoading={isTotalsLoading}
@@ -178,6 +186,13 @@ export default function EndpointOverview() {
               />
               <Header>
                 <ChartLabel>{DataTitles.throughput}</ChartLabel>
+                <QuestionTooltip
+                  size="sm"
+                  position="right"
+                  title={t(
+                    'the number of requests made to this endpoint per second in the selected period'
+                  )}
+                />
               </Header>
               <ChartSummaryValue
                 isLoading={isTotalsLoading}
@@ -213,6 +228,13 @@ export default function EndpointOverview() {
               <SidebarSpacer />
               <Header>
                 <ChartLabel>{DataTitles.errorCount}</ChartLabel>
+                <QuestionTooltip
+                  size="sm"
+                  position="right"
+                  title={t(
+                    'the total number of requests that resulted in 5XX response codes over a given time range'
+                  )}
+                />
               </Header>
               <ChartSummaryValue
                 isLoading={isTotalsLoading}
@@ -450,5 +472,5 @@ const Header = styled('div')`
   width: 100%;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  gap: ${space(1)};
 `;