feat(insights): add tooltips and align headers properly in insight overview pages

static/app/components/gridEditable/index.tsx

@@ -45,6 +45,7 @@ export type GridColumn<K = ObjectKey> = {
 
 export type GridColumnHeader<K = ObjectKey> = GridColumn<K> & {
   name: string;
+  tooltip?: React.ReactNode;
 };
 
 export type GridColumnOrder<K = ObjectKey> = GridColumnHeader<K>;

static/app/utils/discover/fieldRenderers.tsx

@@ -405,11 +405,6 @@ const RightAlignedContainer = styled('span')`
   margin-right: 0;
 `;
 
-const CenterAlignedContainer = styled('span')`
-  text-align: center;
-  width: 100%;
-`;
-
 /**
  * "Special fields" either do not map 1:1 to an single column in the event database,
  * or they require custom UI formatting that can't be handled by the datatype formatters.
@@ -842,9 +837,9 @@ const SPECIAL_FIELDS: SpecialFields = {
         return <Container>{emptyValue}</Container>;
       }
       return (
-        <CenterAlignedContainer>
+        <RightAlignedContainer>
           <PerformanceBadge score={Math.round(score * 100)} />
-        </CenterAlignedContainer>
+        </RightAlignedContainer>
       );
     },
   },

static/app/views/insights/common/components/headerTooltips/headerTooltips.tsx

@@ -0,0 +1,29 @@
+import ExternalLink from 'sentry/components/links/externalLink';
+import {t} from 'sentry/locale';
+import {MODULE_PRODUCT_DOC_LINKS} from 'sentry/views/insights/settings';
+import {ModuleName} from 'sentry/views/insights/types';
+
+export const SPAN_HEADER_TOOLTIPS: Record<string, React.ReactNode> = {
+  performanceScore: (
+    <span>
+      {t('The overall performance rating of this page.')}
+      <br />
+      <ExternalLink
+        href={`${MODULE_PRODUCT_DOC_LINKS[ModuleName.VITAL]}#performance-score`}
+      >
+        {t('How is this calculated?')}
+      </ExternalLink>
+    </span>
+  ),
+  timeSpent: (
+    <span>
+      {t('The total time spent on this span.')}
+      <br />
+      <ExternalLink
+        href={`${MODULE_PRODUCT_DOC_LINKS[ModuleName.DB]}#what-is-time-spent`}
+      >
+        {t('How is this calculated?')}
+      </ExternalLink>
+    </span>
+  ),
+};

static/app/views/insights/common/components/tableCells/renderHeadCell.tsx

@@ -1,16 +1,22 @@
+import styled from '@emotion/styled';
 import type {Location} from 'history';
 
+import {Tooltip} from 'sentry/components/core/tooltip';
 import type {GridColumnHeader} from 'sentry/components/gridEditable';
 import type {Alignments} from 'sentry/components/gridEditable/sortLink';
 import SortLink from 'sentry/components/gridEditable/sortLink';
+import ExternalLink from 'sentry/components/links/externalLink';
+import {t} from 'sentry/locale';
 import type {Sort} from 'sentry/utils/discover/fields';
 import {
   aggregateFunctionOutputType,
   fieldAlignment,
   parseFunction,
 } from 'sentry/utils/discover/fields';
 import type {QueryParameterNames} from 'sentry/views/insights/common/views/queryParameters';
+import {MODULE_PRODUCT_DOC_LINKS} from 'sentry/views/insights/settings';
 import {
+  ModuleName,
   SpanFunction,
   SpanIndexedField,
   SpanMetricsField,
@@ -114,12 +120,14 @@ export const renderHeadCell = ({column, location, sort, sortParameterName}: Opti
 
   const newSort = `${newSortDirection === 'desc' ? '-' : ''}${key}`;
 
-  return (
+  const hasTooltip = column.tooltip;
+
+  const sortLink = (
     <SortLink
       align={alignment}
       canSort={Boolean(location && sort && SORTABLE_FIELDS.has(key))}
       direction={sort?.field === column.key ? sort.kind : undefined}
-      title={name}
+      title={hasTooltip ? <TooltipHeader>{name}</TooltipHeader> : name}
       generateSortLink={() => {
         return {
           ...location,
@@ -131,14 +139,40 @@ export const renderHeadCell = ({column, location, sort, sortParameterName}: Opti
       }}
     />
   );
+
+  if (hasTooltip) {
+    const AlignmentContainer = alignment === 'right' ? AlignRight : AlignLeft;
+
+    return (
+      <AlignmentContainer>
+        <StyledTooltip
+          isHoverable
+          title={
+            <span>
+              {t('The overall performance rating of this page.')}
+              <br />
+              <ExternalLink
+                href={`${MODULE_PRODUCT_DOC_LINKS[ModuleName.VITAL]}#performance-score`}
+              >
+                {t('How is this calculated?')}
+              </ExternalLink>
+            </span>
+          }
+        >
+          {sortLink}
+        </StyledTooltip>
+      </AlignmentContainer>
+    );
+  }
+
+  return sortLink;
 };
 
 const getAlignment = (key: string): Alignments => {
   const result = parseFunction(key);
 
   if (result) {
     const outputType = aggregateFunctionOutputType(result.name, result.arguments[0]);
-
     if (outputType) {
       return fieldAlignment(key, outputType);
     }
@@ -149,3 +183,26 @@ const getAlignment = (key: string): Alignments => {
   }
   return 'left';
 };
+
+const AlignLeft = styled('span')`
+  display: block;
+  margin: auto;
+  text-align: left;
+  width: 100%;
+`;
+
+const AlignRight = styled('span')`
+  display: block;
+  margin: auto;
+  text-align: right;
+  width: 100%;
+`;
+
+const StyledTooltip = styled(Tooltip)`
+  top: 1px;
+  position: relative;
+`;
+
+const TooltipHeader = styled('span')`
+  ${p => p.theme.tooltipUnderline()};
+`;

static/app/views/insights/common/views/spans/types.tsx

@@ -34,7 +34,8 @@ type DataKey =
   | 'httpCodeBreakdown'
   | 'cache_miss_rate()'
   | 'avg(cache.item_size)'
-  | 'transaction.duration';
+  | 'transaction.duration'
+  | 'performanceScore';
 
 export const DataTitles: Record<DataKey, string> = {
   change: t('Change'),
@@ -60,6 +61,7 @@ export const DataTitles: Record<DataKey, string> = {
   httpCodeBreakdown: t('Response Code Breakdown'),
   'cache_miss_rate()': t('Miss Rate'),
   'transaction.duration': t('Transaction Duration'),
+  performanceScore: t('Perf Score'),
 };
 
 export const getThroughputTitle = (

static/app/views/insights/constants.tsx

@@ -68,6 +68,12 @@ export const STARFISH_AGGREGATION_FIELDS: Record<
     kind: FieldKind.FUNCTION,
     valueType: FieldValueType.NUMBER,
   },
+  [SpanFunction.FAILURE_RATE_IF]: {
+    desc: t('Failed event percentage based on span.status'),
+    defaultOutputType: 'percentage',
+    kind: FieldKind.FUNCTION,
+    valueType: FieldValueType.NUMBER,
+  },
 };
 
 const RELEASE_FILTERS: FilterKeySection = {

static/app/views/insights/pages/backend/backendTable.tsx

@@ -17,6 +17,7 @@ import {VisuallyCompleteWithData} from 'sentry/utils/performanceForSentry';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
+import {SPAN_HEADER_TOOLTIPS} from 'sentry/views/insights/common/components/headerTooltips/headerTooltips';
 import {renderHeadCell} from 'sentry/views/insights/common/components/tableCells/renderHeadCell';
 import {StarredSegmentCell} from 'sentry/views/insights/common/components/tableCells/starredSegmentCell';
 import {QueryParameterNames} from 'sentry/views/insights/common/views/queryParameters';
@@ -103,6 +104,7 @@ const COLUMN_ORDER: Column[] = [
     key: 'sum(span.duration)',
     name: DataTitles.timeSpent,
     width: COL_WIDTH_UNDEFINED,
+    tooltip: SPAN_HEADER_TOOLTIPS.timeSpent,
   },
 ];
 

static/app/views/insights/pages/frontend/frontendOverviewTable.tsx

@@ -14,6 +14,7 @@ import {VisuallyCompleteWithData} from 'sentry/utils/performanceForSentry';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
+import {SPAN_HEADER_TOOLTIPS} from 'sentry/views/insights/common/components/headerTooltips/headerTooltips';
 import {renderHeadCell} from 'sentry/views/insights/common/components/tableCells/renderHeadCell';
 import {StarredSegmentCell} from 'sentry/views/insights/common/components/tableCells/starredSegmentCell';
 import {QueryParameterNames} from 'sentry/views/insights/common/views/queryParameters';
@@ -89,11 +90,13 @@ const COLUMN_ORDER: Column[] = [
     key: 'sum_if(span.duration,is_transaction,true)',
     name: DataTitles.timeSpent,
     width: COL_WIDTH_UNDEFINED,
+    tooltip: SPAN_HEADER_TOOLTIPS.timeSpent,
   },
   {
     key: 'performance_score(measurements.score.total)',
-    name: t('Perf Score'),
+    name: DataTitles.performanceScore,
     width: COL_WIDTH_UNDEFINED,
+    tooltip: SPAN_HEADER_TOOLTIPS.performanceScore,
   },
 ];
 

static/app/views/insights/pages/mobile/mobileOverviewTable.tsx

@@ -14,6 +14,7 @@ import {VisuallyCompleteWithData} from 'sentry/utils/performanceForSentry';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
+import {SPAN_HEADER_TOOLTIPS} from 'sentry/views/insights/common/components/headerTooltips/headerTooltips';
 import {renderHeadCell} from 'sentry/views/insights/common/components/tableCells/renderHeadCell';
 import {StarredSegmentCell} from 'sentry/views/insights/common/components/tableCells/starredSegmentCell';
 import {QueryParameterNames} from 'sentry/views/insights/common/views/queryParameters';
@@ -87,6 +88,7 @@ const COLUMN_ORDER: Column[] = [
     key: 'sum(span.duration)',
     name: DataTitles.timeSpent,
     width: COL_WIDTH_UNDEFINED,
+    tooltip: SPAN_HEADER_TOOLTIPS.timeSpent,
   },
 ];
 

static/app/views/insights/types.tsx

@@ -494,6 +494,7 @@ export enum SpanFunction {
   CACHE_MISS_RATE = 'cache_miss_rate',
   COUNT_OP = 'count_op',
   TRACE_STATUS_RATE = 'trace_status_rate',
+  FAILURE_RATE_IF = 'failure_rate_if',
 }
 
 // TODO - add more functions and fields, combine shared ones, etc