calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-01-28 22:00:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added better notifications for users when templates are updated.

Browse Source 
Added confirmation dialogs for destructive actions.
Other improvements/changes
When deleting rule templates, we now clean up all resource rules that were created from the template.
This commit is contained in:
Adrian Astles
2025-08-07 23:49:56 +08:00
parent 1574cbc5df
commit 16a88281bb
9 changed files with 257 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
server/routers/ruleTemplate/deleteRuleTemplate.ts
View File

@@ -31,7 +31,26 @@ export async function deleteRuleTemplate(req: any, res: any) {
});
}
// Delete template rules first (due to foreign key constraint)
// Get all template rules for this template
const templateRulesToDelete = await db
.select({ ruleId: templateRules.ruleId })
.from(templateRules)
.where(eq(templateRules.templateId, templateId));
// Delete resource rules that reference these template rules first
if (templateRulesToDelete.length > 0) {
const { resourceRules } = await import("@server/db");
const templateRuleIds = templateRulesToDelete.map(rule => rule.ruleId);
// Delete all resource rules that reference any of the template rules
for (const ruleId of templateRuleIds) {
await db
.delete(resourceRules)
.where(eq(resourceRules.templateRuleId, ruleId));
}
}
// Delete template rules
await db
.delete(templateRules)
.where(eq(templateRules.templateId, templateId));

28
server/routers/ruleTemplate/deleteTemplateRule.ts
View File

@@ -67,15 +67,20 @@ export async function deleteTemplateRule(
);
}
// Delete the rule
await db
.delete(templateRules)
.where(and(eq(templateRules.templateId, templateId), eq(templateRules.ruleId, parseInt(ruleId))));
// Also delete all resource rules that were created from this template rule
// Count affected resources for the response message
let affectedResourcesCount = 0;
try {
const { resourceRules } = await import("@server/db");
// Get affected resource rules before deletion for counting
const affectedResourceRules = await db
.select()
.from(resourceRules)
.where(eq(resourceRules.templateRuleId, parseInt(ruleId)));
affectedResourcesCount = affectedResourceRules.length;
// Delete the resource rules first (due to foreign key constraint)
await db
.delete(resourceRules)
.where(eq(resourceRules.templateRuleId, parseInt(ruleId)));
@@ -84,11 +89,20 @@ export async function deleteTemplateRule(
// Don't fail the template rule deletion if resource rule deletion fails, just log it
}
// Delete the template rule after resource rules are deleted
await db
.delete(templateRules)
.where(and(eq(templateRules.templateId, templateId), eq(templateRules.ruleId, parseInt(ruleId))));
const message = affectedResourcesCount > 0
? `Template rule deleted successfully. Removed from ${affectedResourcesCount} assigned resource${affectedResourcesCount > 1 ? 's' : ''}.`
: "Template rule deleted successfully.";
return response(res, {
data: null,
success: true,
error: false,
message: "Template rule deleted successfully",
message,
status: HttpCode.OK
});
} catch (error) {

8
server/routers/ruleTemplate/getRuleTemplate.ts
View File

@@ -9,6 +9,14 @@ import createHttpError from "http-errors";
import logger from "@server/logger";
import { fromError } from "zod-validation-error";
export type GetRuleTemplateResponse = {
templateId: string;
orgId: string;
name: string;
description: string | null;
createdAt: number;
};
const getRuleTemplateParamsSchema = z
.object({
orgId: z.string().min(1),

23
server/routers/ruleTemplate/updateTemplateRule.ts
View File

@@ -144,8 +144,8 @@ export async function updateTemplateRule(
// Remove undefined values
Object.keys(propagationData).forEach(key => {
if (propagationData[key] === undefined) {
delete propagationData[key];
if ((propagationData as any)[key] === undefined) {
delete (propagationData as any)[key];
}
});
@@ -161,11 +161,28 @@ export async function updateTemplateRule(
// Don't fail the template rule update if propagation fails, just log it
}
// Count affected resources for the response message
let affectedResourcesCount = 0;
try {
const { resourceTemplates } = await import("@server/db");
const affectedResources = await db
.select()
.from(resourceTemplates)
.where(eq(resourceTemplates.templateId, templateId));
affectedResourcesCount = affectedResources.length;
} catch (error) {
logger.error("Error counting affected resources:", error);
}
const message = affectedResourcesCount > 0
? `Template rule updated successfully. Changes propagated to ${affectedResourcesCount} assigned resource${affectedResourcesCount > 1 ? 's' : ''}.`
: "Template rule updated successfully.";
return response(res, {
data: updatedRule,
success: true,
error: false,
message: "Template rule updated successfully",
message,
status: HttpCode.OK
});
} catch (error) {

9
src/app/[orgId]/settings/rule-templates/[templateId]/general/page.tsx
View File

@@ -12,9 +12,9 @@ import { useEnvContext } from "@app/hooks/useEnvContext";
import {
SettingsContainer,
SettingsSection,
SettingsSectionHeader,
SettingsSectionTitle
SettingsSectionHeader
} from "@app/components/Settings";
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
import { Button } from "@app/components/ui/button";
import { Input } from "@app/components/ui/input";
import { Textarea } from "@app/components/ui/textarea";
@@ -79,8 +79,9 @@ export default function GeneralPage() {
data
);
toast({
title: t("ruleTemplateUpdated"),
description: t("ruleTemplateUpdatedDescription")
title: "Template Updated",
description: "Template details have been updated successfully. Changes to template rules will automatically propagate to all assigned resources.",
variant: "default"
});
} catch (error) {
toast({

4
src/app/[orgId]/settings/rule-templates/[templateId]/rules/page.tsx
View File

@@ -4,9 +4,9 @@ import { useParams } from "next/navigation";
import {
SettingsContainer,
SettingsSection,
SettingsSectionHeader,
SettingsSectionTitle
SettingsSectionHeader
} from "@app/components/Settings";
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
import { TemplateRulesManager } from "@app/components/ruleTemplate/TemplateRulesManager";
export default function RulesPage() {

78
src/components/ConfirmationDialog.tsx Normal file
View File

@@ -0,0 +1,78 @@
"use client";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle
} from "@app/components/ui/dialog";
import { Button } from "@app/components/ui/button";
import { AlertTriangle } from "lucide-react";
interface ConfirmationDialogProps {
open: boolean;
onOpenChange: (open: boolean) => void;
title: string;
description: string;
confirmText?: string;
cancelText?: string;
variant?: "destructive" | "default";
onConfirm: () => Promise<void> | void;
loading?: boolean;
}
export function ConfirmationDialog({
open,
onOpenChange,
title,
description,
confirmText = "Confirm",
cancelText = "Cancel",
variant = "destructive",
onConfirm,
loading = false
}: ConfirmationDialogProps) {
const handleConfirm = async () => {
try {
await onConfirm();
onOpenChange(false);
} catch (error) {
// Error handling is done by the calling component
console.error("Confirmation action failed:", error);
}
};
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent>
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<AlertTriangle className="h-5 w-5 text-destructive" />
{title}
</DialogTitle>
<DialogDescription>
{description}
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button
variant="outline"
onClick={() => onOpenChange(false)}
disabled={loading}
>
{cancelText}
</Button>
<Button
variant={variant}
onClick={handleConfirm}
disabled={loading}
>
{loading ? "Processing..." : confirmText}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}

49
src/components/ruleTemplate/ResourceRulesManager.tsx
View File

@@ -8,6 +8,7 @@ import { useToast } from "@app/hooks/useToast";
import { Trash2 } from "lucide-react";
import { createApiClient, formatAxiosError } from "@app/lib/api";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { ConfirmationDialog } from "@app/components/ConfirmationDialog";
interface RuleTemplate {
templateId: string;
@@ -38,6 +39,9 @@ export function ResourceRulesManager({
const [resourceTemplates, setResourceTemplates] = useState<ResourceTemplate[]>([]);
const [loading, setLoading] = useState(true);
const [selectedTemplate, setSelectedTemplate] = useState<string>("");
const [unassignDialogOpen, setUnassignDialogOpen] = useState(false);
const [templateToUnassign, setTemplateToUnassign] = useState<string | null>(null);
const [unassigning, setUnassigning] = useState(false);
const { toast } = useToast();
const { env } = useEnvContext();
const api = createApiClient({ env });
@@ -79,8 +83,9 @@ export function ResourceRulesManager({
if (response.status === 200 || response.status === 201) {
toast({
title: "Success",
description: "Template assigned successfully"
title: "Template Assigned",
description: "Template has been assigned to this resource. All template rules have been applied and will be automatically updated when the template changes.",
variant: "default"
});
setSelectedTemplate("");
@@ -105,17 +110,22 @@ export function ResourceRulesManager({
};
const handleUnassignTemplate = async (templateId: string) => {
if (!confirm("Are you sure you want to unassign this template?")) {
return;
}
setTemplateToUnassign(templateId);
setUnassignDialogOpen(true);
};
const confirmUnassignTemplate = async () => {
if (!templateToUnassign) return;
setUnassigning(true);
try {
const response = await api.delete(`/resource/${resourceId}/templates/${templateId}`);
const response = await api.delete(`/resource/${resourceId}/templates/${templateToUnassign}`);
if (response.status === 200 || response.status === 201) {
toast({
title: "Success",
description: "Template unassigned successfully"
title: "Template Unassigned",
description: "Template has been unassigned from this resource. All template-managed rules have been removed from this resource.",
variant: "default"
});
await fetchData();
@@ -124,17 +134,20 @@ export function ResourceRulesManager({
}
} else {
toast({
title: "Error",
description: response.data.message || "Failed to unassign template",
title: "Unassign Failed",
description: response.data.message || "Failed to unassign template. Please try again.",
variant: "destructive"
});
}
} catch (error) {
toast({
title: "Error",
description: formatAxiosError(error, "Failed to unassign template"),
title: "Unassign Failed",
description: formatAxiosError(error, "Failed to unassign template. Please try again."),
variant: "destructive"
});
} finally {
setUnassigning(false);
setTemplateToUnassign(null);
}
};
@@ -199,6 +212,18 @@ export function ResourceRulesManager({
)}
</CardContent>
</Card>
<ConfirmationDialog
open={unassignDialogOpen}
onOpenChange={setUnassignDialogOpen}
title="Unassign Template"
description="Are you sure you want to unassign this template? This will remove all template-managed rules from this resource. This action cannot be undone."
confirmText="Unassign Template"
cancelText="Cancel"
variant="destructive"
onConfirm={confirmUnassignTemplate}
loading={unassigning}
/>
</div>
);
}

86
src/components/ruleTemplate/TemplateRulesManager.tsx
View File

@@ -46,6 +46,7 @@ import {
} from "@app/components/ui/table";
import { isValidCIDR, isValidIP, isValidUrlGlobPattern } from "@server/lib/validators";
import { ArrowUpDown, Trash2, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
import { ConfirmationDialog } from "@app/components/ConfirmationDialog";
const addRuleSchema = z.object({
action: z.enum(["ACCEPT", "DROP"]),
@@ -79,6 +80,9 @@ export function TemplateRulesManager({ templateId, orgId }: TemplateRulesManager
pageIndex: 0,
pageSize: 25
});
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
const [ruleToDelete, setRuleToDelete] = useState<number | null>(null);
const [deletingRule, setDeletingRule] = useState(false);
const RuleAction = {
ACCEPT: t('alwaysAllow'),
@@ -151,18 +155,19 @@ export function TemplateRulesManager({ templateId, orgId }: TemplateRulesManager
return;
}
await api.post(`/org/${orgId}/rule-templates/${templateId}/rules`, data);
const response = await api.post(`/org/${orgId}/rule-templates/${templateId}/rules`, data);
toast({
title: "Success",
description: "Rule added successfully"
title: "Template Rule Added",
description: "A new rule has been added to the template. It will be available for assignment to resources.",
variant: "default"
});
form.reset();
fetchRules();
} catch (error) {
toast({
variant: "destructive",
title: "Error",
description: formatAxiosError(error, "Failed to add rule")
title: "Add Rule Failed",
description: formatAxiosError(error, "Failed to add rule. Please check your input and try again.")
});
} finally {
setAddingRule(false);
@@ -170,28 +175,54 @@ export function TemplateRulesManager({ templateId, orgId }: TemplateRulesManager
};
const removeRule = async (ruleId: number) => {
setRuleToDelete(ruleId);
setDeleteDialogOpen(true);
};
const confirmDeleteRule = async () => {
if (!ruleToDelete) return;
setDeletingRule(true);
try {
await api.delete(`/org/${orgId}/rule-templates/${templateId}/rules/${ruleId}`);
await api.delete(`/org/${orgId}/rule-templates/${templateId}/rules/${ruleToDelete}`);
toast({
title: "Success",
description: "Rule removed successfully"
title: "Template Rule Removed",
description: "The rule has been removed from the template and from all assigned resources.",
variant: "default"
});
fetchRules();
} catch (error) {
toast({
variant: "destructive",
title: "Error",
description: formatAxiosError(error, "Failed to remove rule")
title: "Removal Failed",
description: formatAxiosError(error, "Failed to remove template rule")
});
} finally {
setDeletingRule(false);
setRuleToDelete(null);
}
};
const updateRule = async (ruleId: number, data: Partial<TemplateRule>) => {
try {
await api.put(`/org/${orgId}/rule-templates/${templateId}/rules/${ruleId}`, data);
const response = await api.put(`/org/${orgId}/rule-templates/${templateId}/rules/${ruleId}`, data);
// Show success notification with propagation info if available
const message = response.data?.message || "The template rule has been updated and changes have been propagated to all assigned resources.";
toast({
title: "Template Rule Updated",
description: message,
variant: "default"
});
fetchRules();
} catch (error) {
console.error("Failed to update rule:", error);
toast({
title: "Update Failed",
description: formatAxiosError(error, "Failed to update template rule. Please try again."),
variant: "destructive"
});
}
};
@@ -348,7 +379,7 @@ export function TemplateRulesManager({ templateId, orgId }: TemplateRulesManager
name="action"
render={({ field }) => (
<FormItem>
<FormLabel>Action</FormLabel>
<FormLabel>{t('rulesAction')}</FormLabel>
<FormControl>
<Select
value={field.value}
@@ -358,8 +389,10 @@ export function TemplateRulesManager({ templateId, orgId }: TemplateRulesManager
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="ACCEPT">Accept</SelectItem>
<SelectItem value="DROP">Drop</SelectItem>
<SelectItem value="ACCEPT">
{RuleAction.ACCEPT}
</SelectItem>
<SelectItem value="DROP">{RuleAction.DROP}</SelectItem>
</SelectContent>
</Select>
</FormControl>
@@ -373,7 +406,7 @@ export function TemplateRulesManager({ templateId, orgId }: TemplateRulesManager
name="match"
render={({ field }) => (
<FormItem>
<FormLabel>Match</FormLabel>
<FormLabel>{t('rulesMatchType')}</FormLabel>
<FormControl>
<Select
value={field.value}
@@ -383,9 +416,9 @@ export function TemplateRulesManager({ templateId, orgId }: TemplateRulesManager
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="IP">IP</SelectItem>
<SelectItem value="CIDR">CIDR</SelectItem>
<SelectItem value="PATH">Path</SelectItem>
<SelectItem value="PATH">{RuleMatch.PATH}</SelectItem>
<SelectItem value="IP">{RuleMatch.IP}</SelectItem>
<SelectItem value="CIDR">{RuleMatch.CIDR}</SelectItem>
</SelectContent>
</Select>
</FormControl>
@@ -399,7 +432,7 @@ export function TemplateRulesManager({ templateId, orgId }: TemplateRulesManager
name="value"
render={({ field }) => (
<FormItem>
<FormLabel>Value</FormLabel>
<FormLabel>{t('value')}</FormLabel>
<FormControl>
<Input placeholder="Enter value" {...field} />
</FormControl>
@@ -413,7 +446,7 @@ export function TemplateRulesManager({ templateId, orgId }: TemplateRulesManager
name="priority"
render={({ field }) => (
<FormItem>
<FormLabel>Priority (optional)</FormLabel>
<FormLabel>{t('rulesPriority')} (optional)</FormLabel>
<FormControl>
<Input
type="number"
@@ -556,6 +589,19 @@ export function TemplateRulesManager({ templateId, orgId }: TemplateRulesManager
</div>
</div>
)}
{/* Confirmation Dialog */}
<ConfirmationDialog
open={deleteDialogOpen}
onOpenChange={setDeleteDialogOpen}
title="Delete Template Rule"
description="Are you sure you want to delete this rule? This action will remove the rule from the template and from all assigned resources. This action cannot be undone."
confirmText="Delete Rule"
cancelText="Cancel"
variant="destructive"
onConfirm={confirmDeleteRule}
loading={deletingRule}
/>
</div>
);
}