diff --git a/messages/en-US.json b/messages/en-US.json index a0e789cdf..ee912732e 100644 --- a/messages/en-US.json +++ b/messages/en-US.json @@ -1375,9 +1375,11 @@ "alertingDeleteRule": "Delete alert rule", "alertingRuleDeleted": "Alert rule deleted", "alertingRuleSaved": "Alert rule saved", + "alertingRuleSavedCreatedDescription": "Your new alert rule was created. You can keep editing it on this page.", + "alertingRuleSavedUpdatedDescription": "Your changes to this alert rule were saved.", "alertingEditRule": "Edit Alert Rule", "alertingCreateRule": "Create Alert Rule", - "alertingRuleCredenzaDescription": "Choose what to watch, when to fire, and how to notify your team.", + "alertingRuleCredenzaDescription": "Choose what to watch, when to fire, and how to notify", "alertingRuleNamePlaceholder": "Production site down", "alertingRuleEnabled": "Rule enabled", "alertingSectionSource": "Source", @@ -1417,7 +1419,7 @@ "alertingTriggerResourceToggle": "Resource status changes", "alertingSourceResource": "Resource", "alertingSectionActions": "Actions", - "alertingAddAction": "Add action", + "alertingAddAction": "Add Action", "alertingActionNotify": "Email", "alertingActionNotifyDescription": "Send email notifications to users or roles", "alertingActionWebhook": "Webhook", @@ -3112,5 +3114,6 @@ "idpUnassociatedDescription": "Identity provider unassociated from this organization successfully", "idpUnassociateMenu": "Unassociate", "idpDeleteAllOrgsMenu": "Delete", - "publicIpEndpoint": "Endpoint" + "publicIpEndpoint": "Endpoint", + "lastTriggeredAt": "Last Trigger" } diff --git a/src/components/AlertingRulesTable.tsx b/src/components/AlertingRulesTable.tsx index ea67b6b73..b1b984c96 100644 --- a/src/components/AlertingRulesTable.tsx +++ b/src/components/AlertingRulesTable.tsx @@ -66,17 +66,16 @@ function sourceSummary( return t("alertingSummarySites", { count: rule.siteIds.length }); } if (rule.eventType.startsWith("resource_")) { - return t("alertingSummaryResources", { count: rule.resourceIds.length }); + return t("alertingSummaryResources", { + count: rule.resourceIds.length + }); } return t("alertingSummaryHealthChecks", { count: rule.healthCheckIds.length }); } -function triggerLabel( - rule: AlertRuleRow, - t: (k: string) => string -) { +function triggerLabel(rule: AlertRuleRow, t: (k: string) => string) { switch (rule.eventType) { case "site_online": return t("alertingTriggerSiteOnline"); @@ -101,7 +100,11 @@ function triggerLabel( } } -export default function AlertingRulesTable({ orgId, siteId, resourceId }: AlertingRulesTableProps) { +export default function AlertingRulesTable({ + orgId, + siteId, + resourceId +}: AlertingRulesTableProps) { const router = useRouter(); const t = useTranslations(); const api = createApiClient(useEnvContext()); @@ -124,18 +127,26 @@ export default function AlertingRulesTable({ orgId, siteId, resourceId }: Alerti const pageIndex = page - 1; const query = searchParams.get("query") ?? undefined; - const { - data, - isLoading, - refetch, - isRefetching - } = useQuery(orgQueries.alertRules({ orgId, limit: pageSize, offset: pageIndex * pageSize, query, siteId, resourceId })); + const { data, isLoading, refetch, isRefetching } = useQuery( + orgQueries.alertRules({ + orgId, + limit: pageSize, + offset: pageIndex * pageSize, + query, + siteId, + resourceId + }) + ); const rows = data?.alertRules ?? []; const total = data?.pagination.total ?? 0; const pageCount = Math.max(1, Math.ceil(total / pageSize)); - const paginationState: DataTablePaginationState = { pageIndex, pageSize, pageCount }; + const paginationState: DataTablePaginationState = { + pageIndex, + pageSize, + pageCount + }; const handlePaginationChange = (newState: PaginationState) => { searchParams.set("page", (newState.pageIndex + 1).toString()); @@ -154,7 +165,9 @@ export default function AlertingRulesTable({ orgId, siteId, resourceId }: Alerti }, 300); const invalidate = () => - queryClient.invalidateQueries({ queryKey: ["ORG", orgId, "ALERT_RULES"] }); + queryClient.invalidateQueries({ + queryKey: ["ORG", orgId, "ALERT_RULES"] + }); const setEnabled = async (rule: AlertRuleRow, enabled: boolean) => { setTogglingId(rule.alertRuleId); @@ -210,9 +223,7 @@ export default function AlertingRulesTable({ orgId, siteId, resourceId }: Alerti ), - cell: ({ row }) => ( - {row.original.name} - ) + cell: ({ row }) => {row.original.name} }, { id: "source", @@ -230,6 +241,18 @@ export default function AlertingRulesTable({ orgId, siteId, resourceId }: Alerti ), cell: ({ row }) => {triggerLabel(row.original, t)} }, + { + accessorKey: "lastTriggeredAt", + friendlyName: t("lastTriggeredAt"), + header: () => {t("lastTriggeredAt")}, + cell: ({ row }) => ( + + {row.original.lastTriggeredAt + ? moment(row.original.lastTriggeredAt).format("lll") + : "-"} + + ) + }, { accessorKey: "enabled", friendlyName: t("alertingColumnEnabled"), @@ -247,14 +270,6 @@ export default function AlertingRulesTable({ orgId, siteId, resourceId }: Alerti ); } }, - { - accessorKey: "createdAt", - friendlyName: t("createdAt"), - header: () => {t("createdAt")}, - cell: ({ row }) => ( - {moment(row.original.createdAt).format("lll")} - ) - }, { id: "rowActions", enableHiding: false, diff --git a/src/components/alert-rule-editor/AlertRuleFields.tsx b/src/components/alert-rule-editor/AlertRuleFields.tsx index 8ec323261..0228b30bc 100644 --- a/src/components/alert-rule-editor/AlertRuleFields.tsx +++ b/src/components/alert-rule-editor/AlertRuleFields.tsx @@ -144,7 +144,6 @@ export function AddActionPanel({ {!isPremiumSelected && ( @@ -244,8 +249,7 @@ export default function AlertRuleGraphEditor({ isLast={false} title={t("alertingSectionSource")} accent={{ - labelClass: - "text-emerald-600 dark:text-emerald-400", + labelClass: "", icon: Flag }} > @@ -268,8 +272,7 @@ export default function AlertRuleGraphEditor({ isLast={false} title={t("alertingSectionTrigger")} accent={{ - labelClass: - "text-amber-600 dark:text-amber-400", + labelClass: "", icon: Cog }} > @@ -291,8 +294,7 @@ export default function AlertRuleGraphEditor({ isLast title={t("alertingSectionActions")} accent={{ - labelClass: - "text-blue-600 dark:text-blue-400", + labelClass: "", icon: Zap }} > @@ -337,21 +339,36 @@ export default function AlertRuleGraphEditor({ } }} /> - {fields.map((f, index) => ( - - remove(index) - } - onUpdate={(val) => - update(index, val) - } - canRemove + {fields.length > 0 && ( +
+ )} + {fields.map((f, index) => ( +
+ {index > 0 && ( +
+ )} + + remove(index) + } + onUpdate={(val) => + update(index, val) + } + canRemove + /> +
))}