add help banners to alerts

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",

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} />
+                <div className="space-y-6">
-                <HealthChecksTable orgId={params.orgId} />
+                    <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>
         </>
     );