From e1efae74261023a61161f8b9b3f24cb1b98de7f6 Mon Sep 17 00:00:00 2001
From: miloschwartz <mschwartz10612@gmail.com>
Date: Tue, 21 Apr 2026 15:35:55 -0700
Subject: [PATCH] add help banners to alerts

---
 messages/en-US.json                        |  4 ++++
 src/app/[orgId]/settings/alerting/page.tsx | 28 ++++++++++++++++++++--
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/messages/en-US.json b/messages/en-US.json
index ee912732e..4278a6aa2 100644
--- a/messages/en-US.json
+++ b/messages/en-US.json
@@ -1476,6 +1476,10 @@
     "alertingNodeRoleAction": "Action",
     "alertingTabRules": "Alert Rules",
     "alertingTabHealthChecks": "Health Checks",
+    "alertingRulesBannerTitle": "Get Notified",
+    "alertingRulesBannerDescription": "Each rule ties together what to watch (a site, health check, or resource), when to fire (for example offline or unhealthy), and how to notify your team via email, webhooks, or integrations. Use this list to create, enable, and manage those rules.",
+    "alertingHealthChecksBannerTitle": "Monitor Health & Resources",
+    "alertingHealthChecksBannerDescription": "Health checks are HTTP or TCP monitors you define once. You can then use them as sources in alert rules so you get notified when a target becomes healthy or unhealthy. Health checks on resources also appear here.",
     "standaloneHcTableTitle": "Health Checks",
     "standaloneHcSearchPlaceholder": "Search health checks…",
     "standaloneHcAddButton": "Create Health Check",
diff --git a/src/app/[orgId]/settings/alerting/page.tsx b/src/app/[orgId]/settings/alerting/page.tsx
index cadc83516..945128ca0 100644
--- a/src/app/[orgId]/settings/alerting/page.tsx
+++ b/src/app/[orgId]/settings/alerting/page.tsx
@@ -1,7 +1,9 @@
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import AlertingRulesTable from "@app/components/AlertingRulesTable";
 import HealthChecksTable from "@app/components/HealthChecksTable";
+import DismissableBanner from "@app/components/DismissableBanner";
 import { HorizontalTabs, TabItem } from "@app/components/HorizontalTabs";
+import { BellRing, HeartPulse } from "lucide-react";
 import { getTranslations } from "next-intl/server";
 
 type AlertingPageProps = {
@@ -26,8 +28,30 @@ export default async function AlertingPage(props: AlertingPageProps) {
                 description={t("alertingDescription")}
             />
             <HorizontalTabs items={tabs} clientSide>
-                <AlertingRulesTable orgId={params.orgId} />
-                <HealthChecksTable orgId={params.orgId} />
+                <div className="space-y-6">
+                    <DismissableBanner
+                        storageKey="alerting-rules-banner-dismissed"
+                        version={1}
+                        title={t("alertingRulesBannerTitle")}
+                        titleIcon={
+                            <BellRing className="w-5 h-5 text-primary shrink-0" />
+                        }
+                        description={t("alertingRulesBannerDescription")}
+                    />
+                    <AlertingRulesTable orgId={params.orgId} />
+                </div>
+                <div className="space-y-6">
+                    <DismissableBanner
+                        storageKey="alerting-health-checks-banner-dismissed"
+                        version={1}
+                        title={t("alertingHealthChecksBannerTitle")}
+                        titleIcon={
+                            <HeartPulse className="w-5 h-5 text-primary shrink-0" />
+                        }
+                        description={t("alertingHealthChecksBannerDescription")}
+                    />
+                    <HealthChecksTable orgId={params.orgId} />
+                </div>
             </HorizontalTabs>
         </>
     );