From 5e5bf3f430c1e4398b35d7975af966f70273d3f2 Mon Sep 17 00:00:00 2001
From: Evan Purkhiser <evanpurkhiser@gmail.com>
Date: Fri, 7 Feb 2025 17:40:58 -0500
Subject: [PATCH] fix(uptime): Add heading and description to overview (#84756)

<img width="569" alt="image"
src="https://github.com/user-attachments/assets/49aec954-95e1-4622-8c5a-9dc2b0610831"
/>
---
 static/app/views/insights/uptime/settings.ts          |  4 +++-
 .../app/views/insights/uptime/views/overview.spec.tsx |  2 +-
 static/app/views/insights/uptime/views/overview.tsx   | 11 +++++++++++
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/static/app/views/insights/uptime/settings.ts b/static/app/views/insights/uptime/settings.ts
index 3a830e39be0c17..5951f43035ff0c 100644
--- a/static/app/views/insights/uptime/settings.ts
+++ b/static/app/views/insights/uptime/settings.ts
@@ -6,7 +6,9 @@ export const DATA_TYPE = t('Uptime Check');
 export const DATA_TYPE_PLURAL = t('Uptime Checks');
 export const BASE_URL = 'uptime';
 
-export const MODULE_DESCRIPTION = t('Monitor availability of HTTP URLs.');
+export const MODULE_DESCRIPTION = t(
+  'Uptime monitors continuously track configured URLs, delivering alerts and insights to quickly identify downtime and troubleshoot issues.'
+);
 export const MODULE_DOC_LINK = 'https://docs.sentry.io/product/alerts/uptime-monitoring/';
 
 export const MODULE_FEATURES = ['uptime', 'insights-uptime'];
diff --git a/static/app/views/insights/uptime/views/overview.spec.tsx b/static/app/views/insights/uptime/views/overview.spec.tsx
index b376b2444a3115..61c3b3bdfae942 100644
--- a/static/app/views/insights/uptime/views/overview.spec.tsx
+++ b/static/app/views/insights/uptime/views/overview.spec.tsx
@@ -85,7 +85,7 @@ describe('Uptime Overview', function () {
 
     await waitForElementToBeRemoved(() => screen.queryAllByTestId('loading-indicator'));
 
-    expect(screen.getByRole('heading', {level: 1})).toHaveTextContent('Backend');
+    expect(screen.getByRole('heading', {level: 1})).toHaveTextContent('Uptime Monitors');
     const tab = screen.getByRole('tab', {name: 'Uptime Monitors'});
     expect(tab).toBeInTheDocument();
     expect(tab).toHaveAttribute('aria-selected', 'true');
diff --git a/static/app/views/insights/uptime/views/overview.tsx b/static/app/views/insights/uptime/views/overview.tsx
index 57ac9207eefd25..4bbb9443128d88 100644
--- a/static/app/views/insights/uptime/views/overview.tsx
+++ b/static/app/views/insights/uptime/views/overview.tsx
@@ -12,6 +12,7 @@ import {EnvironmentPageFilter} from 'sentry/components/organizations/environment
 import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
 import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilters/parse';
 import {ProjectPageFilter} from 'sentry/components/organizations/projectPageFilter';
+import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionTooltip';
 import Pagination from 'sentry/components/pagination';
 import Panel from 'sentry/components/panels/panel';
 import SearchBar from 'sentry/components/searchBar';
@@ -31,6 +32,7 @@ import {BackendHeader} from 'sentry/views/insights/pages/backend/backendPageHead
 import {ModuleName} from 'sentry/views/insights/types';
 import {OwnerFilter} from 'sentry/views/monitors/components/ownerFilter';
 
+import {MODULE_DESCRIPTION, MODULE_DOC_LINK, MODULE_TITLE} from '../../uptime/settings';
 import {OverviewTimeline} from '../components/overviewTimeline';
 
 export default function UptimeOverview() {
@@ -84,6 +86,15 @@ export default function UptimeOverview() {
     <ModulePageProviders moduleName="uptime" pageTitle={t('Overview')}>
       <BackendHeader
         module={ModuleName.UPTIME}
+        headerTitle={
+          <Fragment>
+            {MODULE_TITLE}
+            <PageHeadingQuestionTooltip
+              docsUrl={MODULE_DOC_LINK}
+              title={MODULE_DESCRIPTION}
+            />
+          </Fragment>
+        }
         headerActions={
           <ButtonBar gap={1}>
             <LinkButton