add help banners to alerts

This commit is contained in:
miloschwartz
2026-04-21 15:35:55 -07:00
parent f9a4e25dc9
commit e1efae7426
2 changed files with 30 additions and 2 deletions

View File

@@ -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>
</>
);