pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-05-20 23:29:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

more cosmetic changes to alert rules

Browse Source
This commit is contained in:
miloschwartz
2026-04-21 15:30:49 -07:00
parent 85029ff518
commit f9a4e25dc9
4 changed files with 91 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
messages/en-US.json
View File

@@ -1375,9 +1375,11 @@
"alertingDeleteRule": "Delete alert rule", "alertingDeleteRule": "Delete alert rule",
"alertingRuleDeleted": "Alert rule deleted", "alertingRuleDeleted": "Alert rule deleted",
"alertingRuleSaved": "Alert rule saved", "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", "alertingEditRule": "Edit Alert Rule",
"alertingCreateRule": "Create 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", "alertingRuleNamePlaceholder": "Production site down",
"alertingRuleEnabled": "Rule enabled", "alertingRuleEnabled": "Rule enabled",
"alertingSectionSource": "Source", "alertingSectionSource": "Source",
@@ -1417,7 +1419,7 @@
"alertingTriggerResourceToggle": "Resource status changes", "alertingTriggerResourceToggle": "Resource status changes",
"alertingSourceResource": "Resource", "alertingSourceResource": "Resource",
"alertingSectionActions": "Actions", "alertingSectionActions": "Actions",
"alertingAddAction": "Add action", "alertingAddAction": "Add Action",
"alertingActionNotify": "Email", "alertingActionNotify": "Email",
"alertingActionNotifyDescription": "Send email notifications to users or roles", "alertingActionNotifyDescription": "Send email notifications to users or roles",
"alertingActionWebhook": "Webhook", "alertingActionWebhook": "Webhook",
@@ -3112,5 +3114,6 @@
"idpUnassociatedDescription": "Identity provider unassociated from this organization successfully", "idpUnassociatedDescription": "Identity provider unassociated from this organization successfully",
"idpUnassociateMenu": "Unassociate", "idpUnassociateMenu": "Unassociate",
"idpDeleteAllOrgsMenu": "Delete", "idpDeleteAllOrgsMenu": "Delete",
"publicIpEndpoint": "Endpoint" "publicIpEndpoint": "Endpoint",
"lastTriggeredAt": "Last Trigger"
} }

65
src/components/AlertingRulesTable.tsx
View File

@@ -66,17 +66,16 @@ function sourceSummary(
return t("alertingSummarySites", { count: rule.siteIds.length }); return t("alertingSummarySites", { count: rule.siteIds.length });
} }
if (rule.eventType.startsWith("resource_")) { if (rule.eventType.startsWith("resource_")) {
return t("alertingSummaryResources", { count: rule.resourceIds.length }); return t("alertingSummaryResources", {
count: rule.resourceIds.length
});
} }
return t("alertingSummaryHealthChecks", { return t("alertingSummaryHealthChecks", {
count: rule.healthCheckIds.length count: rule.healthCheckIds.length
}); });
} }
function triggerLabel( function triggerLabel(rule: AlertRuleRow, t: (k: string) => string) {
rule: AlertRuleRow,
t: (k: string) => string
) {
switch (rule.eventType) { switch (rule.eventType) {
case "site_online": case "site_online":
return t("alertingTriggerSiteOnline"); 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 router = useRouter();
const t = useTranslations(); const t = useTranslations();
const api = createApiClient(useEnvContext()); const api = createApiClient(useEnvContext());
@@ -124,18 +127,26 @@ export default function AlertingRulesTable({ orgId, siteId, resourceId }: Alerti
const pageIndex = page - 1; const pageIndex = page - 1;
const query = searchParams.get("query") ?? undefined; const query = searchParams.get("query") ?? undefined;
const { const { data, isLoading, refetch, isRefetching } = useQuery(
data, orgQueries.alertRules({
isLoading, orgId,
refetch, limit: pageSize,
isRefetching offset: pageIndex * pageSize,
} = useQuery(orgQueries.alertRules({ orgId, limit: pageSize, offset: pageIndex * pageSize, query, siteId, resourceId })); query,
siteId,
resourceId
})
);
const rows = data?.alertRules ?? []; const rows = data?.alertRules ?? [];
const total = data?.pagination.total ?? 0; const total = data?.pagination.total ?? 0;
const pageCount = Math.max(1, Math.ceil(total / pageSize)); 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) => { const handlePaginationChange = (newState: PaginationState) => {
searchParams.set("page", (newState.pageIndex + 1).toString()); searchParams.set("page", (newState.pageIndex + 1).toString());
@@ -154,7 +165,9 @@ export default function AlertingRulesTable({ orgId, siteId, resourceId }: Alerti
}, 300); }, 300);
const invalidate = () => const invalidate = () =>
queryClient.invalidateQueries({ queryKey: ["ORG", orgId, "ALERT_RULES"] }); queryClient.invalidateQueries({
queryKey: ["ORG", orgId, "ALERT_RULES"]
});
const setEnabled = async (rule: AlertRuleRow, enabled: boolean) => { const setEnabled = async (rule: AlertRuleRow, enabled: boolean) => {
setTogglingId(rule.alertRuleId); setTogglingId(rule.alertRuleId);
@@ -210,9 +223,7 @@ export default function AlertingRulesTable({ orgId, siteId, resourceId }: Alerti
<ArrowUpDown className="ml-2 h-4 w-4" /> <ArrowUpDown className="ml-2 h-4 w-4" />
</Button> </Button>
), ),
cell: ({ row }) => ( cell: ({ row }) => <span>{row.original.name}</span>
<span className="font-medium">{row.original.name}</span>
)
}, },
{ {
id: "source", id: "source",
@@ -230,6 +241,18 @@ export default function AlertingRulesTable({ orgId, siteId, resourceId }: Alerti
), ),
cell: ({ row }) => <span>{triggerLabel(row.original, t)}</span> cell: ({ row }) => <span>{triggerLabel(row.original, t)}</span>
}, },
{
accessorKey: "lastTriggeredAt",
friendlyName: t("lastTriggeredAt"),
header: () => <span className="p-3">{t("lastTriggeredAt")}</span>,
cell: ({ row }) => (
<span>
{row.original.lastTriggeredAt
? moment(row.original.lastTriggeredAt).format("lll")
: "-"}
</span>
)
},
{ {
accessorKey: "enabled", accessorKey: "enabled",
friendlyName: t("alertingColumnEnabled"), friendlyName: t("alertingColumnEnabled"),
@@ -247,14 +270,6 @@ export default function AlertingRulesTable({ orgId, siteId, resourceId }: Alerti
); );
} }
}, },
{
accessorKey: "createdAt",
friendlyName: t("createdAt"),
header: () => <span className="p-3">{t("createdAt")}</span>,
cell: ({ row }) => (
<span>{moment(row.original.createdAt).format("lll")}</span>
)
},
{ {
id: "rowActions", id: "rowActions",
enableHiding: false, enableHiding: false,

5
src/components/alert-rule-editor/AlertRuleFields.tsx
View File

@@ -144,7 +144,6 @@ export function AddActionPanel({
{!isPremiumSelected && ( {!isPremiumSelected && (
<Button <Button
type="button" type="button"
size="sm"
disabled={!isBuiltInSelected} disabled={!isBuiltInSelected}
onClick={handleAdd} onClick={handleAdd}
> >
@@ -458,13 +457,13 @@ export function ActionBlock({
); );
return ( return (
<div className="rounded-lg border p-4 space-y-3 relative"> <div className="relative space-y-3 pr-10 pt-1">
{canRemove && ( {canRemove && (
<Button <Button
type="button" type="button"
variant="ghost" variant="ghost"
size="icon" size="icon"
className="absolute top-2 right-2 h-8 w-8" className="absolute top-1 right-0 h-8 w-8"
onClick={onRemove} onClick={onRemove}
> >
<Trash2 className="h-4 w-4 text-destructive" /> <Trash2 className="h-4 w-4 text-destructive" />

69
src/components/alert-rule-editor/AlertRuleGraphEditor.tsx
View File

@@ -133,7 +133,10 @@ export default function AlertRuleGraphEditor({
const res = await api.put< const res = await api.put<
AxiosResponse<CreateAlertRuleResponse> AxiosResponse<CreateAlertRuleResponse>
>(`/org/${orgId}/alert-rule`, payload); >(`/org/${orgId}/alert-rule`, payload);
toast({ title: t("alertingRuleSaved") }); toast({
title: t("alertingRuleSaved"),
description: t("alertingRuleSavedCreatedDescription")
});
router.replace( router.replace(
`/${orgId}/settings/alerting/${res.data.data.alertRuleId}` `/${orgId}/settings/alerting/${res.data.data.alertRuleId}`
); );
@@ -142,7 +145,10 @@ export default function AlertRuleGraphEditor({
`/org/${orgId}/alert-rule/${alertRuleId}`, `/org/${orgId}/alert-rule/${alertRuleId}`,
payload payload
); );
toast({ title: t("alertingRuleSaved") }); toast({
title: t("alertingRuleSaved"),
description: t("alertingRuleSavedUpdatedDescription")
});
} }
} catch (e) { } catch (e) {
toast({ toast({
@@ -216,9 +222,7 @@ export default function AlertRuleGraphEditor({
onCheckedChange={ onCheckedChange={
field.onChange field.onChange
} }
disabled={ disabled={disabled}
disabled
}
/> />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
@@ -229,8 +233,9 @@ export default function AlertRuleGraphEditor({
type="submit" type="submit"
className="w-full" className="w-full"
disabled={isSaving} disabled={isSaving}
loading={isSaving}
> >
{isSaving ? t("saving") : t("save")} {t("save")}
</Button> </Button>
</fieldset> </fieldset>
</CardContent> </CardContent>
@@ -244,8 +249,7 @@ export default function AlertRuleGraphEditor({
isLast={false} isLast={false}
title={t("alertingSectionSource")} title={t("alertingSectionSource")}
accent={{ accent={{
labelClass: labelClass: "",
"text-emerald-600 dark:text-emerald-400",
icon: Flag icon: Flag
}} }}
> >
@@ -268,8 +272,7 @@ export default function AlertRuleGraphEditor({
isLast={false} isLast={false}
title={t("alertingSectionTrigger")} title={t("alertingSectionTrigger")}
accent={{ accent={{
labelClass: labelClass: "",
"text-amber-600 dark:text-amber-400",
icon: Cog icon: Cog
}} }}
> >
@@ -291,8 +294,7 @@ export default function AlertRuleGraphEditor({
isLast isLast
title={t("alertingSectionActions")} title={t("alertingSectionActions")}
accent={{ accent={{
labelClass: labelClass: "",
"text-blue-600 dark:text-blue-400",
icon: Zap icon: Zap
}} }}
> >
@@ -337,21 +339,36 @@ export default function AlertRuleGraphEditor({
} }
}} }}
/> />
{fields.map((f, index) => ( {fields.length > 0 && (
<ActionBlock <div
key={f.id} role="separator"
orgId={orgId} aria-hidden
index={index} className="-mx-4 border-t border-border sm:-mx-5 my-6"
control={form.control}
form={form}
onRemove={() =>
remove(index)
}
onUpdate={(val) =>
update(index, val)
}
canRemove
/> />
)}
{fields.map((f, index) => (
<div key={f.id}>
{index > 0 && (
<div
role="separator"
aria-hidden
className="-mx-4 border-t border-border sm:-mx-5 my-6"
/>
)}
<ActionBlock
orgId={orgId}
index={index}
control={form.control}
form={form}
onRemove={() =>
remove(index)
}
onUpdate={(val) =>
update(index, val)
}
canRemove
/>
</div>
))} ))}
</div> </div>
</fieldset> </fieldset>