Path rewriting working?

This commit is contained in:
Owen
2025-10-13 16:41:14 -07:00
parent 8b2f8ad3ef
commit 902b413881
4 changed files with 326 additions and 250 deletions

View File

@@ -1860,5 +1860,38 @@
}, },
"priority": "Priority", "priority": "Priority",
"priorityDescription": "Higher priority routes are evaluated first. Priority = 100 means automatic ordering (system decides). Use another number to enforce manual priority.", "priorityDescription": "Higher priority routes are evaluated first. Priority = 100 means automatic ordering (system decides). Use another number to enforce manual priority.",
"instanceName": "Instance Name" "instanceName": "Instance Name",
"pathMatchModalTitle": "Configure Path Matching",
"pathMatchModalDescription": "Set up how incoming requests should be matched based on their path.",
"pathMatchType": "Match Type",
"pathMatchPrefix": "Prefix",
"pathMatchExact": "Exact",
"pathMatchRegex": "Regex",
"pathMatchValue": "Path Value",
"clear": "Clear",
"saveChanges": "Save Changes",
"pathMatchRegexPlaceholder": "^/api/.*",
"pathMatchDefaultPlaceholder": "/path",
"pathMatchPrefixHelp": "Example: /api matches /api, /api/users, etc.",
"pathMatchExactHelp": "Example: /api matches only /api",
"pathMatchRegexHelp": "Example: ^/api/.* matches /api/anything",
"pathRewriteModalTitle": "Configure Path Rewriting",
"pathRewriteModalDescription": "Transform the matched path before forwarding to the target.",
"pathRewriteType": "Rewrite Type",
"pathRewritePrefixOption": "Prefix - Replace prefix",
"pathRewriteExactOption": "Exact - Replace entire path",
"pathRewriteRegexOption": "Regex - Pattern replacement",
"pathRewriteStripPrefixOption": "Strip Prefix - Remove prefix",
"pathRewriteValue": "Rewrite Value",
"pathRewriteRegexPlaceholder": "/new/$1",
"pathRewriteDefaultPlaceholder": "/new-path",
"pathRewritePrefixHelp": "Replace the matched prefix with this value",
"pathRewriteExactHelp": "Replace the entire path with this value when the path matches exactly",
"pathRewriteRegexHelp": "Use capture groups like $1, $2 for replacement",
"pathRewriteStripPrefixHelp": "Leave empty to strip prefix or provide new prefix",
"pathRewritePrefix": "Prefix",
"pathRewriteExact": "Exact",
"pathRewriteRegex": "Regex",
"pathRewriteStrip": "Strip",
"pathRewriteStripLabel": "strip"
} }

View File

@@ -164,9 +164,6 @@ export async function getTraefikConfig(
port: row.port, port: row.port,
internalPort: row.internalPort, internalPort: row.internalPort,
enabled: row.targetEnabled, enabled: row.targetEnabled,
rewritePath: row.rewritePath,
rewritePathType: row.rewritePathType,
priority: row.priority,
site: { site: {
siteId: row.siteId, siteId: row.siteId,
type: row.siteType, type: row.siteType,
@@ -268,8 +265,8 @@ export async function getTraefikConfig(
// Handle path rewriting middleware // Handle path rewriting middleware
if ( if (
resource.rewritePath && resource.rewritePath !== null &&
resource.path && resource.path !== null &&
resource.pathMatchType && resource.pathMatchType &&
resource.rewritePathType resource.rewritePathType
) { ) {

View File

@@ -203,9 +203,6 @@ export async function getTraefikConfig(
port: row.port, port: row.port,
internalPort: row.internalPort, internalPort: row.internalPort,
enabled: row.targetEnabled, enabled: row.targetEnabled,
rewritePath: row.rewritePath,
rewritePathType: row.rewritePathType,
priority: row.priority,
site: { site: {
siteId: row.siteId, siteId: row.siteId,
type: row.siteType, type: row.siteType,
@@ -330,8 +327,8 @@ export async function getTraefikConfig(
// Handle path rewriting middleware // Handle path rewriting middleware
if ( if (
resource.rewritePath && resource.rewritePath !== null &&
resource.path && resource.path !== null &&
resource.pathMatchType && resource.pathMatchType &&
resource.rewritePathType resource.rewritePathType
) { ) {

View File

@@ -1,10 +1,10 @@
import { Settings } from "lucide-react"; import { Settings } from "lucide-react";
import { import {
Select, Select,
SelectContent, SelectContent,
SelectItem, SelectItem,
SelectTrigger, SelectTrigger,
SelectValue, SelectValue
} from "@/components/ui/select"; } from "@/components/ui/select";
import { Badge } from "@app/components/ui/badge"; import { Badge } from "@app/components/ui/badge";
@@ -12,275 +12,324 @@ import { Label } from "@app/components/ui/label";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Input } from "./ui/input"; import { Input } from "./ui/input";
import { Button } from "./ui/button"; import { Button } from "./ui/button";
import { Credenza, CredenzaContent, CredenzaDescription, CredenzaFooter, CredenzaHeader, CredenzaTitle, CredenzaTrigger } from "./Credenza"; import {
Credenza,
CredenzaContent,
CredenzaDescription,
CredenzaFooter,
CredenzaHeader,
CredenzaTitle,
CredenzaTrigger
} from "./Credenza";
import { useTranslations } from "next-intl";
export function PathMatchModal({ export function PathMatchModal({
value, value,
onChange, onChange,
trigger, trigger
}: { }: {
value: { path: string | null; pathMatchType: string | null }; value: { path: string | null; pathMatchType: string | null };
onChange: (config: { path: string | null; pathMatchType: string | null }) => void; onChange: (config: {
trigger: React.ReactNode; path: string | null;
pathMatchType: string | null;
}) => void;
trigger: React.ReactNode;
}) { }) {
const [open, setOpen] = useState(false); const t = useTranslations();
const [matchType, setMatchType] = useState(value?.pathMatchType || "prefix");
const [path, setPath] = useState(value?.path || "");
useEffect(() => { const [open, setOpen] = useState(false);
if (open) { const [matchType, setMatchType] = useState(
setMatchType(value?.pathMatchType || "prefix"); value?.pathMatchType || "prefix"
setPath(value?.path || ""); );
} const [path, setPath] = useState(value?.path || "");
}, [open, value]);
const handleSave = () => { useEffect(() => {
onChange({ pathMatchType: matchType as any, path: path.trim() }); if (open) {
setOpen(false); setMatchType(value?.pathMatchType || "prefix");
}; setPath(value?.path || "");
}
}, [open, value]);
const handleClear = () => { const handleSave = () => {
onChange({ pathMatchType: null, path: null }); onChange({ pathMatchType: matchType as any, path: path.trim() });
setOpen(false); setOpen(false);
}; };
const getPlaceholder = () => (matchType === "regex" ? "^/api/.*" : "/path"); const handleClear = () => {
onChange({ pathMatchType: null, path: null });
setOpen(false);
};
const getHelpText = () => { const getPlaceholder = () => (matchType === "regex" ? t("pathMatchRegexPlaceholder") : t("pathMatchDefaultPlaceholder"));
switch (matchType) {
case "prefix":
return "Example: /api matches /api, /api/users, etc.";
case "exact":
return "Example: /api matches only /api";
case "regex":
return "Example: ^/api/.* matches /api/anything";
default:
return "";
}
};
return ( const getHelpText = () => {
<Credenza open={open} onOpenChange={setOpen}> switch (matchType) {
<CredenzaTrigger asChild>{trigger}</CredenzaTrigger> case "prefix":
<CredenzaContent className="sm:max-w-[500px]"> return t("pathMatchPrefixHelp");
<CredenzaHeader> case "exact":
<CredenzaTitle>Configure Path Matching</CredenzaTitle> return t("pathMatchExactHelp");
<CredenzaDescription> case "regex":
Set up how incoming requests should be matched based on their path. return t("pathMatchRegexHelp");
</CredenzaDescription> default:
</CredenzaHeader> return "";
<div className="grid gap-4"> }
<div className="grid gap-2"> };
<Label htmlFor="match-type">Match Type</Label>
<Select value={matchType} onValueChange={setMatchType}> return (
<SelectTrigger id="match-type"> <Credenza open={open} onOpenChange={setOpen}>
<SelectValue /> <CredenzaTrigger asChild>{trigger}</CredenzaTrigger>
</SelectTrigger> <CredenzaContent className="sm:max-w-[500px]">
<SelectContent> <CredenzaHeader>
<SelectItem value="prefix">Prefix</SelectItem> <CredenzaTitle>{t("pathMatchModalTitle")}</CredenzaTitle>
<SelectItem value="exact">Exact</SelectItem> <CredenzaDescription>
<SelectItem value="regex">Regex</SelectItem> {t("pathMatchModalDescription")}
</SelectContent> </CredenzaDescription>
</Select> </CredenzaHeader>
</div> <div className="grid gap-4">
<div className="grid gap-2"> <div className="grid gap-2">
<Label htmlFor="path-value">Path Value</Label> <Label htmlFor="match-type">{t("pathMatchType")}</Label>
<Input <Select value={matchType} onValueChange={setMatchType}>
id="path-value" <SelectTrigger id="match-type">
placeholder={getPlaceholder()} <SelectValue />
value={path} </SelectTrigger>
onChange={(e) => setPath(e.target.value)} <SelectContent>
/> <SelectItem value="prefix">{t("pathMatchPrefix")}</SelectItem>
<p className="text-sm text-muted-foreground">{getHelpText()}</p> <SelectItem value="exact">{t("pathMatchExact")}</SelectItem>
</div> <SelectItem value="regex">{t("pathMatchRegex")}</SelectItem>
</div> </SelectContent>
<CredenzaFooter className="gap-2"> </Select>
{value?.path && ( </div>
<Button variant="outline" onClick={handleClear}> <div className="grid gap-2">
Clear <Label htmlFor="path-value">{t("pathMatchValue")}</Label>
</Button> <Input
)} id="path-value"
<Button onClick={handleSave} disabled={!path.trim()}> placeholder={getPlaceholder()}
Save Changes value={path}
</Button> onChange={(e) => setPath(e.target.value)}
</CredenzaFooter> />
</CredenzaContent> <p className="text-sm text-muted-foreground">
</Credenza> {getHelpText()}
); </p>
</div>
</div>
<CredenzaFooter className="gap-2">
{value?.path && (
<Button variant="outline" onClick={handleClear}>
{t("clear")}
</Button>
)}
<Button onClick={handleSave} disabled={!path.trim()}>
{t("saveChanges")}
</Button>
</CredenzaFooter>
</CredenzaContent>
</Credenza>
);
} }
export function PathRewriteModal({ export function PathRewriteModal({
value, value,
onChange, onChange,
trigger, trigger,
disabled, disabled
}: { }: {
value: { rewritePath: string | null; rewritePathType: string | null }; value: { rewritePath: string | null; rewritePathType: string | null };
onChange: (config: { rewritePath: string | null; rewritePathType: string | null }) => void; onChange: (config: {
trigger: React.ReactNode; rewritePath: string | null;
disabled?: boolean; rewritePathType: string | null;
}) => void;
trigger: React.ReactNode;
disabled?: boolean;
}) { }) {
const [open, setOpen] = useState(false); const t = useTranslations();
const [rewriteType, setRewriteType] = useState(value?.rewritePathType || "prefix"); const [open, setOpen] = useState(false);
const [rewritePath, setRewritePath] = useState(value?.rewritePath || ""); const [rewriteType, setRewriteType] = useState(
value?.rewritePathType || "prefix"
);
const [rewritePath, setRewritePath] = useState(value?.rewritePath || "");
useEffect(() => { useEffect(() => {
if (open) { if (open) {
setRewriteType(value?.rewritePathType || "prefix"); setRewriteType(value?.rewritePathType || "prefix");
setRewritePath(value?.rewritePath || ""); setRewritePath(value?.rewritePath || "");
} }
}, [open, value]); }, [open, value]);
const handleSave = () => { const handleSave = () => {
onChange({ rewritePathType: rewriteType as any, rewritePath: rewritePath.trim() }); onChange({
setOpen(false); rewritePathType: rewriteType as any,
}; rewritePath: rewritePath.trim()
});
setOpen(false);
};
const handleClear = () => { const handleClear = () => {
onChange({ rewritePathType: null, rewritePath: null }); onChange({ rewritePathType: null, rewritePath: null });
setOpen(false); setOpen(false);
}; };
const getPlaceholder = () => { const getPlaceholder = () => {
switch (rewriteType) { switch (rewriteType) {
case "regex": case "regex":
return "/new/$1"; return t("pathRewriteRegexPlaceholder");
case "stripPrefix": case "stripPrefix":
return ""; return "";
default: default:
return "/new-path"; return t("pathRewriteDefaultPlaceholder");
} }
}; };
const getHelpText = () => { const getHelpText = () => {
switch (rewriteType) { switch (rewriteType) {
case "prefix": case "prefix":
return "Replace the matched prefix with this value"; return t("pathRewritePrefixHelp");
case "exact": case "exact":
return "Replace the entire path with this value"; return t("pathRewriteExactHelp");
case "regex": case "regex":
return "Use capture groups like $1, $2 for replacement"; return t("pathRewriteRegexHelp");
case "stripPrefix": case "stripPrefix":
return "Leave empty to strip prefix or provide new prefix"; return t("pathRewriteStripPrefixHelp");
default: default:
return ""; return "";
} }
}; };
return ( return (
<Credenza open={open} onOpenChange={(v) => !disabled && setOpen(v)}> <Credenza open={open} onOpenChange={(v) => !disabled && setOpen(v)}>
<CredenzaTrigger asChild> <CredenzaTrigger asChild>{trigger}</CredenzaTrigger>
{trigger} <CredenzaContent className="sm:max-w-[500px]">
</CredenzaTrigger> <CredenzaHeader>
<CredenzaContent className="sm:max-w-[500px]"> <CredenzaTitle>{t("pathRewriteModalTitle")}</CredenzaTitle>
<CredenzaHeader> <CredenzaDescription>
<CredenzaTitle>Configure Path Rewriting</CredenzaTitle> {t("pathRewriteModalDescription")}
<CredenzaDescription> </CredenzaDescription>
Transform the matched path before forwarding to the target. </CredenzaHeader>
</CredenzaDescription> <div className="grid gap-4">
</CredenzaHeader> <div className="grid gap-2">
<div className="grid gap-4"> <Label htmlFor="rewrite-type">{t("pathRewriteType")}</Label>
<div className="grid gap-2"> <Select
<Label htmlFor="rewrite-type">Rewrite Type</Label> value={rewriteType}
<Select value={rewriteType} onValueChange={setRewriteType}> onValueChange={setRewriteType}
<SelectTrigger id="rewrite-type"> >
<SelectValue /> <SelectTrigger id="rewrite-type">
</SelectTrigger> <SelectValue />
<SelectContent> </SelectTrigger>
<SelectItem value="prefix">Prefix - Replace prefix</SelectItem> <SelectContent>
<SelectItem value="exact">Exact - Replace entire path</SelectItem> <SelectItem value="prefix">
<SelectItem value="regex">Regex - Pattern replacement</SelectItem> {t("pathRewritePrefixOption")}
<SelectItem value="stripPrefix">Strip Prefix - Remove prefix</SelectItem> </SelectItem>
</SelectContent> <SelectItem value="exact">
</Select> {t("pathRewriteExactOption")}
</div> </SelectItem>
<div className="grid gap-2"> <SelectItem value="regex">
<Label htmlFor="rewrite-value">Rewrite Value</Label> {t("pathRewriteRegexOption")}
<Input </SelectItem>
id="rewrite-value" <SelectItem value="stripPrefix">
placeholder={getPlaceholder()} {t("pathRewriteStripPrefixOption")}
value={rewritePath} </SelectItem>
onChange={(e) => setRewritePath(e.target.value)} </SelectContent>
/> </Select>
<p className="text-sm text-muted-foreground">{getHelpText()}</p> </div>
</div> <div className="grid gap-2">
</div> <Label htmlFor="rewrite-value">{t("pathRewriteValue")}</Label>
<CredenzaFooter className="gap-2"> <Input
{value?.rewritePath && ( id="rewrite-value"
<Button variant="outline" onClick={handleClear}> placeholder={getPlaceholder()}
Clear value={rewritePath}
</Button> onChange={(e) => setRewritePath(e.target.value)}
)} />
<Button <p className="text-sm text-muted-foreground">
onClick={handleSave} {getHelpText()}
disabled={rewriteType !== "stripPrefix" && !rewritePath.trim()} </p>
> </div>
Save Changes </div>
</Button> <CredenzaFooter className="gap-2">
</CredenzaFooter> {value?.rewritePath && (
</CredenzaContent> <Button variant="outline" onClick={handleClear}>
</Credenza> {t("clear")}
); </Button>
)}
<Button
onClick={handleSave}
disabled={
rewriteType !== "stripPrefix" && !rewritePath.trim()
}
>
{t("saveChanges")}
</Button>
</CredenzaFooter>
</CredenzaContent>
</Credenza>
);
} }
export function PathMatchDisplay({ export function PathMatchDisplay({
value, value
}: { }: {
value: { path: string | null; pathMatchType: string | null }; value: { path: string | null; pathMatchType: string | null };
}) { }) {
if (!value?.path) return null; const t = useTranslations();
const getTypeLabel = (type: string | null) => { if (!value?.path) return null;
const labels: Record<string, string> = {
prefix: "Prefix", const getTypeLabel = (type: string | null) => {
exact: "Exact", const labels: Record<string, string> = {
regex: "Regex", prefix: t("pathMatchPrefix"),
exact: t("pathMatchExact"),
regex: t("pathMatchRegex")
};
return labels[type || ""] || type;
}; };
return labels[type || ""] || type;
};
return ( return (
<div className="flex items-center gap-2 w-full text-left"> <div className="flex items-center gap-2 w-full text-left">
<Badge variant="secondary" className="text-xs shrink-0"> <Badge variant="secondary" className="text-xs shrink-0">
{getTypeLabel(value.pathMatchType)} {getTypeLabel(value.pathMatchType)}
</Badge> </Badge>
<code className="text-sm flex-1 truncate" title={value.path}> <code className="text-sm flex-1 truncate" title={value.path}>
{value.path} {value.path}
</code> </code>
<Settings className="h-4 w-4" /> <Settings className="h-4 w-4" />
</div> </div>
); );
} }
export function PathRewriteDisplay({ export function PathRewriteDisplay({
value, value
}: { }: {
value: { rewritePath: string | null; rewritePathType: string | null }; value: { rewritePath: string | null; rewritePathType: string | null };
}) { }) {
if (!value?.rewritePath && value?.rewritePathType !== "stripPrefix") return null; const t = useTranslations();
const getTypeLabel = (type: string | null) => { if (!value?.rewritePath && value?.rewritePathType !== "stripPrefix")
const labels: Record<string, string> = { return null;
prefix: "Prefix",
exact: "Exact", const getTypeLabel = (type: string | null) => {
regex: "Regex", const labels: Record<string, string> = {
stripPrefix: "Strip", prefix: t("pathRewritePrefix"),
exact: t("pathRewriteExact"),
regex: t("pathRewriteRegex"),
stripPrefix: t("pathRewriteStrip")
};
return labels[type || ""] || type;
}; };
return labels[type || ""] || type;
};
return ( return (
<div className="flex items-center gap-2 w-full text-left"> <div className="flex items-center gap-2 w-full text-left">
<Badge variant="secondary" className="text-xs shrink-0"> <Badge variant="secondary" className="text-xs shrink-0">
{getTypeLabel(value.rewritePathType)} {getTypeLabel(value.rewritePathType)}
</Badge> </Badge>
<code className="text-sm flex-1 truncate" title={value.rewritePath || ""}> <code
{value.rewritePath || <span className="text-muted-foreground italic">(strip)</span>} className="text-sm flex-1 truncate"
</code> title={value.rewritePath || ""}
<Settings className="h-4 w-4" /> >
</div> {value.rewritePath || (
); <span className="text-muted-foreground italic">
({t("pathRewriteStripLabel")})
</span>
)}
</code>
<Settings className="h-4 w-4" />
</div>
);
} }