calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-05-02 02:28:04 +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

65
src/components/AlertingRulesTable.tsx
View File

@@ -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
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
),
cell: ({ row }) => (
<span className="font-medium">{row.original.name}</span>
)
cell: ({ row }) => <span>{row.original.name}</span>
},
{
id: "source",
@@ -230,6 +241,18 @@ export default function AlertingRulesTable({ orgId, siteId, resourceId }: Alerti
),
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",
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",
enableHiding: false,

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

@@ -144,7 +144,6 @@ export function AddActionPanel({
{!isPremiumSelected && (
<Button
type="button"
size="sm"
disabled={!isBuiltInSelected}
onClick={handleAdd}
>
@@ -458,13 +457,13 @@ export function ActionBlock({
);
return (
<div className="rounded-lg border p-4 space-y-3 relative">
<div className="relative space-y-3 pr-10 pt-1">
{canRemove && (
<Button
type="button"
variant="ghost"
size="icon"
className="absolute top-2 right-2 h-8 w-8"
className="absolute top-1 right-0 h-8 w-8"
onClick={onRemove}
>
<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<
AxiosResponse<CreateAlertRuleResponse>
>(`/org/${orgId}/alert-rule`, payload);
toast({ title: t("alertingRuleSaved") });
toast({
title: t("alertingRuleSaved"),
description: t("alertingRuleSavedCreatedDescription")
});
router.replace(
`/${orgId}/settings/alerting/${res.data.data.alertRuleId}`
);
@@ -142,7 +145,10 @@ export default function AlertRuleGraphEditor({
`/org/${orgId}/alert-rule/${alertRuleId}`,
payload
);
toast({ title: t("alertingRuleSaved") });
toast({
title: t("alertingRuleSaved"),
description: t("alertingRuleSavedUpdatedDescription")
});
}
} catch (e) {
toast({
@@ -216,9 +222,7 @@ export default function AlertRuleGraphEditor({
onCheckedChange={
field.onChange
}
disabled={
disabled
}
disabled={disabled}
/>
</FormControl>
<FormMessage />
@@ -229,8 +233,9 @@ export default function AlertRuleGraphEditor({
type="submit"
className="w-full"
disabled={isSaving}
loading={isSaving}
>
{isSaving ? t("saving") : t("save")}
{t("save")}
</Button>
</fieldset>
</CardContent>
@@ -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) => (
<ActionBlock
key={f.id}
orgId={orgId}
index={index}
control={form.control}
form={form}
onRemove={() =>
remove(index)
}
onUpdate={(val) =>
update(index, val)
}
canRemove
{fields.length > 0 && (
<div
role="separator"
aria-hidden
className="-mx-4 border-t border-border sm:-mx-5 my-6"
/>
)}
{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>
</fieldset>