feat(insights): add tooltips user misery and apdex

static/app/utils/discover/fieldRenderers.tsx

@@ -20,7 +20,7 @@ import {Tooltip} from 'sentry/components/tooltip';
 import UserMisery from 'sentry/components/userMisery';
 import Version from 'sentry/components/version';
 import {IconDownload} from 'sentry/icons';
-import {t} from 'sentry/locale';
+import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {IssueAttachment} from 'sentry/types/group';
 import type {Organization} from 'sentry/types/organization';
@@ -132,6 +132,14 @@ const EmptyValueContainer = styled('span')`
 `;
 const emptyValue = <EmptyValueContainer>{t('(no value)')}</EmptyValueContainer>;
 const emptyStringValue = <EmptyValueContainer>{t('(empty string)')}</EmptyValueContainer>;
+const missingUserMisery = tct(
+  'We were unable to calculate User Misery. A likely cause of this is that the user was not set. [link:Read the docs]',
+  {
+    link: (
+      <ExternalLink href="https://docs.sentry.io/platforms/javascript/enriching-events/identify-user/" />
+    ),
+  }
+);
 
 export function nullableValue(value: string | null): string | React.ReactElement {
   switch (value) {
@@ -783,12 +791,20 @@ const SPECIAL_FUNCTIONS: SpecialFunctions = {
     const userMiseryField = fieldName;
 
     if (!(userMiseryField in data)) {
-      return <NumberContainer>{emptyValue}</NumberContainer>;
+      return (
+        <Tooltip title={missingUserMisery} showUnderline isHoverable>
+          <NumberContainer>{emptyValue}</NumberContainer>
+        </Tooltip>
+      );
     }
 
     const userMisery = data[userMiseryField];
     if (userMisery === null || isNaN(userMisery)) {
-      return <NumberContainer>{emptyValue}</NumberContainer>;
+      return (
+        <Tooltip title={missingUserMisery} showUnderline isHoverable>
+          <NumberContainer>{emptyValue}</NumberContainer>
+        </Tooltip>
+      );
     }
 
     const projectThresholdConfig = 'project_threshold_config';

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

@@ -3,13 +3,15 @@ import styled from '@emotion/styled';
 import Feature from 'sentry/components/acl/feature';
 import {COL_WIDTH_UNDEFINED} from 'sentry/components/gridEditable';
 import * as Layout from 'sentry/components/layouts/thirds';
+import ExternalLink from 'sentry/components/links/externalLink';
 import {NoAccess} from 'sentry/components/noAccess';
 import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
 import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter';
 import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
 import {ProjectPageFilter} from 'sentry/components/organizations/projectPageFilter';
 import TransactionNameSearchBar from 'sentry/components/performance/searchBar';
 import * as TeamKeyTransactionManager from 'sentry/components/performance/teamKeyTransactionsManager';
+import {tct} from 'sentry/locale';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {
   canUseMetricsData,
@@ -32,7 +34,10 @@ import {BACKEND_LANDING_TITLE} from 'sentry/views/insights/pages/backend/setting
 import {DomainOverviewPageProviders} from 'sentry/views/insights/pages/domainOverviewPageProviders';
 import {OVERVIEW_PAGE_ALLOWED_OPS as FRONTEND_OVERVIEW_PAGE_OPS} from 'sentry/views/insights/pages/frontend/settings';
 import {OVERVIEW_PAGE_ALLOWED_OPS as BACKEND_OVERVIEW_PAGE_OPS} from 'sentry/views/insights/pages/mobile/settings';
-import {generateBackendPerformanceEventView} from 'sentry/views/performance/data';
+import {
+  generateBackendPerformanceEventView,
+  USER_MISERY_TOOLTIP,
+} from 'sentry/views/performance/data';
 import {
   DoubleChartRow,
   TripleChartRow,
@@ -46,6 +51,15 @@ import {
   ProjectPerformanceType,
 } from 'sentry/views/performance/utils';
 
+const APDEX_TOOLTIP = tct(
+  'An industry-standard metric used to measure user satisfaction based on your application response times. [link:Learn more.]',
+  {
+    link: (
+      <ExternalLink href="https://docs.sentry.io/product/performance/metrics/#apdex" />
+    ),
+  }
+);
+
 export const BACKEND_COLUMN_TITLES = [
   {title: 'http method'},
   {title: 'transaction'},
@@ -55,9 +69,9 @@ export const BACKEND_COLUMN_TITLES = [
   {title: 'p50()'},
   {title: 'p95()'},
   {title: 'failure rate'},
-  {title: 'apdex'},
+  {title: 'apdex', tooltip: APDEX_TOOLTIP},
   {title: 'users'},
-  {title: 'user misery'},
+  {title: 'user misery', tooltip: USER_MISERY_TOOLTIP},
 ];
 
 function BackendOverviewPage() {

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

@@ -35,7 +35,10 @@ import {
   FRONTEND_LANDING_TITLE,
   OVERVIEW_PAGE_ALLOWED_OPS,
 } from 'sentry/views/insights/pages/frontend/settings';
-import {generateFrontendOtherPerformanceEventView} from 'sentry/views/performance/data';
+import {
+  generateFrontendOtherPerformanceEventView,
+  USER_MISERY_TOOLTIP,
+} from 'sentry/views/performance/data';
 import {
   DoubleChartRow,
   TripleChartRow,
@@ -50,7 +53,7 @@ import {
 } from 'sentry/views/performance/utils';
 
 const DURATION_TOOLTIP = tct(
-  'A heuristic measuring when a pageload or navigation completes. Based on whether the initial load of the webpage has become idle [link:Learn more.]',
+  'A heuristic measuring when a pageload or navigation completes. Based on whether the initial load of the webpage has become idle. [link:Learn more.]',
   {
     link: (
       <ExternalLink href="https://docs.sentry.io/platforms/javascript/tracing/instrumentation/automatic-instrumentation/#idletimeout" />
@@ -67,7 +70,7 @@ export const FRONTEND_COLUMN_TITLES = [
   {title: 'p75()', tooltip: DURATION_TOOLTIP},
   {title: 'p95()', tooltip: DURATION_TOOLTIP},
   {title: 'users'},
-  {title: 'user misery'},
+  {title: 'user misery', tooltip: USER_MISERY_TOOLTIP},
 ];
 
 function FrontendOverviewPage() {

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

@@ -35,6 +35,7 @@ import {
 import {
   generateGenericPerformanceEventView,
   generateMobilePerformanceEventView,
+  USER_MISERY_TOOLTIP,
 } from 'sentry/views/performance/data';
 import {checkIsReactNative} from 'sentry/views/performance/landing/utils';
 import {
@@ -58,7 +59,7 @@ const MOBILE_COLUMN_TITLES = [
   {title: 'slow frame %'},
   {title: 'frozen frame %'},
   {title: 'users'},
-  {title: 'user misery'},
+  {title: 'user misery', tooltip: USER_MISERY_TOOLTIP},
 ];
 
 const REACT_NATIVE_COLUMN_TITLES = [

static/app/views/performance/data.tsx

@@ -1,9 +1,10 @@
 import type {Location} from 'history';
 
 import {COL_WIDTH_UNDEFINED} from 'sentry/components/gridEditable';
+import ExternalLink from 'sentry/components/links/externalLink';
 import {wrapQueryInWildcards} from 'sentry/components/performance/searchBar';
 import {ALL_ACCESS_PROJECTS} from 'sentry/constants/pageFilters';
-import {t} from 'sentry/locale';
+import {t, tct} from 'sentry/locale';
 import type {SelectValue} from 'sentry/types/core';
 import type {NewQuery, Organization} from 'sentry/types/organization';
 import type {Project} from 'sentry/types/project';
@@ -36,6 +37,15 @@ export const COLUMN_TITLES = [
   'user misery',
 ];
 
+export const USER_MISERY_TOOLTIP = tct(
+  'A configurable score telling you how frequently users are frustrated by your application performance. [link:Learn more.]',
+  {
+    link: (
+      <ExternalLink href="https://docs.sentry.io/product/performance/metrics/#user-misery" />
+    ),
+  }
+);
+
 const TOKEN_KEYS_SUPPORTED_IN_LIMITED_SEARCH = ['transaction'];
 
 export const getDefaultStatsPeriod = (organization: Organization) => {

static/app/views/performance/table.tsx

@@ -11,11 +11,9 @@ import SortLink from 'sentry/components/gridEditable/sortLink';
 import Link from 'sentry/components/links/link';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import Pagination from 'sentry/components/pagination';
-import QuestionTooltip from 'sentry/components/questionTooltip';
 import {Tooltip} from 'sentry/components/tooltip';
 import {IconStar} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
-import {space} from 'sentry/styles/space';
 import type {Organization} from 'sentry/types/organization';
 import type {Project} from 'sentry/types/project';
 import {trackAnalytics} from 'sentry/utils/analytics';
@@ -456,6 +454,15 @@ class _Table extends Component<Props, State> {
       />
     );
     if (field.field.startsWith('user_misery')) {
+      if (title.tooltip) {
+        return (
+          <GuideAnchor target="project_transaction_threshold" position="top">
+            <Tooltip isHoverable title={title.tooltip} showUnderline>
+              {sortLink}
+            </Tooltip>
+          </GuideAnchor>
+        );
+      }
       return (
         <GuideAnchor target="project_transaction_threshold" position="top">
           {sortLink}
@@ -467,10 +474,9 @@ class _Table extends Component<Props, State> {
       return sortLink;
     }
     return (
-      <Header>
+      <Tooltip isHoverable title={title.tooltip} showUnderline>
         {sortLink}
-        <QuestionTooltip size="xs" position="top" title={title.tooltip} isHoverable />
-      </Header>
+      </Tooltip>
     );
   }
 
@@ -649,12 +655,4 @@ const UnparameterizedTooltipWrapper = styled('div')`
   justify-content: center;
 `;
 
-const Header = styled('div')`
-  display: grid;
-  grid-template-columns: repeat(2, max-content);
-  align-items: center;
-  padding: ${space(1.5)};
-  grid-column-gap: ${space(0.5)};
-`;
-
 export default Table;