feat(starfish): update starfish time spent tooltip (#50252)

1. Updates time spent tooltip to match mocks
<img width="1226" alt="image"
src="https://github.com/getsentry/sentry/assets/44422760/e7da7199-98e9-4413-ac22-827ebe5e2499">

2. This adds a **temporary** page that features the definitions of the
terms used in the tooltips, this will help test flows better and
provides a dumping ground to jot down definitions. The plan as is that
eventually this will live in the docs. I didn't think its worth styling
so I left it barebones, but if there's any value then feel free to lmk.

static/app/routes.tsx

@@ -1678,6 +1678,10 @@ function buildRoutes() {
         path="database/"
         component={make(() => import('sentry/views/starfish/modules/DBModule'))}
       />
+      <Route
+        path="definitions/"
+        component={make(() => import('sentry/views/starfish/views/definitionsView'))}
+      />
       <Route
         path="api/"
         component={make(() => import('sentry/views/starfish/modules/HTTPModule'))}

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

@@ -4,13 +4,11 @@ import {getTooltip} from 'sentry/views/starfish/views/spans/types';
 export function TimeSpentCell({
   formattedTimeSpent,
   totalSpanTime,
-  totalAppTime,
 }: {
   formattedTimeSpent: string;
-  totalAppTime: number;
   totalSpanTime: number;
 }) {
-  const toolTip = getTooltip('timeSpent', totalSpanTime, totalAppTime);
+  const toolTip = getTooltip('timeSpent', totalSpanTime);
   return (
     <span>
       <Tooltip title={toolTip}>{formattedTimeSpent}</Tooltip>

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

@@ -0,0 +1,35 @@
+import * as Layout from 'sentry/components/layouts/thirds';
+import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
+import {
+  PageErrorAlert,
+  PageErrorProvider,
+} from 'sentry/utils/performance/contexts/pageError';
+
+function DefinitionsView() {
+  return (
+    <Layout.Page>
+      <PageFiltersContainer>
+        <PageErrorProvider>
+          <Layout.Header>
+            <Layout.HeaderContent>
+              <Layout.Title> Defintions </Layout.Title>
+            </Layout.HeaderContent>
+          </Layout.Header>
+          <Layout.Body>
+            <Layout.Main fullWidth>
+              <PageErrorAlert />
+              <ul>
+                <li>
+                  Time Spent - time spent is calculated by dividing the total span time by
+                  the total app time.
+                </li>
+              </ul>
+            </Layout.Main>
+          </Layout.Body>
+        </PageErrorProvider>
+      </PageFiltersContainer>
+    </Layout.Page>
+  );
+}
+
+export default DefinitionsView;

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

@@ -33,7 +33,7 @@ function SampleInfo(props: Props) {
       </Block>
       <Block title={DataTitles.p95}>{p95?.toFixed(2)} ms</Block>
       <Block title={DataTitles.timeSpent}>
-        <Tooltip title={tooltip}>
+        <Tooltip isHoverable title={tooltip}>
           {formatPercentage(span_total_time / application_total_time)}
         </Tooltip>
       </Block>

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

@@ -92,7 +92,6 @@ function BodyCell({
   span,
   column,
   row,
-  applicationMetrics,
 }: CellProps & {applicationMetrics: ApplicationMetrics}) {
   if (column.key === 'description') {
     return <DescriptionCell span={span} row={row} column={column} />;
@@ -111,7 +110,6 @@ function BodyCell({
       <TimeSpentCell
         formattedTimeSpent={row[column.key]}
         totalSpanTime={row.metrics.total_time}
-        totalAppTime={applicationMetrics['sum(span.duration)']}
       />
     );
   }

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

@@ -14,10 +14,7 @@ import DurationCell from 'sentry/views/starfish/components/tableCells/durationCe
 import ThroughputCell from 'sentry/views/starfish/components/tableCells/throughputCell';
 import {TimeSpentCell} from 'sentry/views/starfish/components/tableCells/timeSpentCell';
 import type {Span} from 'sentry/views/starfish/queries/types';
-import {
-  ApplicationMetrics,
-  useApplicationMetrics,
-} from 'sentry/views/starfish/queries/useApplicationMetrics';
+import {useApplicationMetrics} from 'sentry/views/starfish/queries/useApplicationMetrics';
 import {
   SpanTransactionMetrics,
   useSpanTransactionMetrics,
@@ -84,7 +81,6 @@ export function SpanTransactionsTable({span, openSidebar, onClickTransaction}: P
         row={row}
         openSidebar={openSidebar}
         onClickTransactionName={onClickTransaction}
-        applicationMetrics={applicationMetrics}
       />
     );
   };
@@ -112,14 +108,7 @@ type CellProps = {
   openSidebar?: boolean;
 };
 
-function BodyCell({
-  span,
-  column,
-  row,
-  openSidebar,
-  applicationMetrics,
-  onClickTransactionName,
-}: CellProps & {applicationMetrics: ApplicationMetrics}) {
+function BodyCell({span, column, row, openSidebar, onClickTransactionName}: CellProps) {
   if (column.key === 'transaction') {
     return (
       <TransactionCell
@@ -144,7 +133,6 @@ function BodyCell({
     return (
       <TimeSpentCell
         formattedTimeSpent={row[column.key]}
-        totalAppTime={applicationMetrics['sum(span.duration)']}
         totalSpanTime={row.metrics?.total_time}
       />
     );

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

@@ -14,10 +14,7 @@ import {useLocation} from 'sentry/utils/useLocation';
 import {TableColumnSort} 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 {
-  ApplicationMetrics,
-  useApplicationMetrics,
-} from 'sentry/views/starfish/queries/useApplicationMetrics';
+import {useApplicationMetrics} from 'sentry/views/starfish/queries/useApplicationMetrics';
 import {ModuleName} from 'sentry/views/starfish/types';
 import {zeroFillSeries} from 'sentry/views/starfish/utils/zeroFillSeries';
 import {DataTitles} from 'sentry/views/starfish/views/spans/types';
@@ -143,7 +140,7 @@ export default function SpansTable({
       }
       grid={{
         renderHeadCell: getRenderHeadCell(orderBy, onSetOrderBy),
-        renderBodyCell: (column, row) => renderBodyCell(column, row, applicationMetrics),
+        renderBodyCell: (column, row) => renderBodyCell(column, row),
       }}
       location={location}
     />
@@ -173,11 +170,7 @@ function getRenderHeadCell(orderBy: string, onSetOrderBy: (orderBy: string) => v
   return renderHeadCell;
 }
 
-function renderBodyCell(
-  column: TableColumnHeader,
-  row: SpanDataRow,
-  applicationMetrics: ApplicationMetrics
-): React.ReactNode {
+function renderBodyCell(column: TableColumnHeader, row: SpanDataRow): React.ReactNode {
   if (column.key === 'description') {
     const description = row.description;
     return (
@@ -195,7 +188,6 @@ function renderBodyCell(
     return (
       <TimeSpentCell
         formattedTimeSpent={row[column.key]}
-        totalAppTime={applicationMetrics['sum(span.duration)']}
         totalSpanTime={row.total_exclusive_time}
       />
     );

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

@@ -1,3 +1,6 @@
+import {Fragment} from 'react';
+
+import Link from 'sentry/components/links/link';
 import {t} from 'sentry/locale';
 
 export type DataKey =
@@ -17,14 +20,17 @@ export const DataTitles: Record<DataKey, string> = {
   throughput: t('Throughput'),
 };
 
-export const getTooltip = (key: DataKey, ...options: (string | number)[]): string => {
+export const getTooltip = (
+  key: DataKey,
+  ...options: (string | number)[]
+): React.ReactNode => {
   if (key === 'timeSpent') {
     const spanTime = `${(Number(options[0]) / 1000).toFixed(2)}s`;
-    const endTime = `${(Number(options[1]) / 1000).toFixed(2)}s`;
-    return t(
-      `The total span time (%s) out of the total app time (%s)`,
-      spanTime,
-      endTime
+    return (
+      <Fragment>
+        <div>{spanTime}</div>
+        <Link to="/starfish/definitions">How was this calculated?</Link>
+      </Fragment>
     );
   }
   return '';