adjust target config ui inside create resource

This commit is contained in:
Pallavi Kumari
2025-10-06 01:06:43 +05:30
parent ca146a1b57
commit d20e0a228a
3 changed files with 74 additions and 75 deletions

View File

@@ -470,7 +470,7 @@
"proxyErrorTls": "Invalid TLS Server Name. Use domain name format, or save empty to remove the TLS Server Name.", "proxyErrorTls": "Invalid TLS Server Name. Use domain name format, or save empty to remove the TLS Server Name.",
"proxyEnableSSL": "Enable SSL (https)", "proxyEnableSSL": "Enable SSL (https)",
"target": "Target", "target": "Target",
"configureTargets": "Configure Targets", "configureTarget": "Configure Targets",
"targetErrorFetch": "Failed to fetch targets", "targetErrorFetch": "Failed to fetch targets",
"targetErrorFetchDescription": "An error occurred while fetching targets", "targetErrorFetchDescription": "An error occurred while fetching targets",
"siteErrorFetch": "Failed to fetch resource", "siteErrorFetch": "Failed to fetch resource",

View File

@@ -918,7 +918,7 @@ export default function ReverseProxyTargets(props: {
trigger={ trigger={
<Button <Button
variant="outline" variant="outline"
className="flex items-center gap-2 p-2 max-w-md w-full text-left cursor-pointer" className="flex items-center gap-2 max-w-md text-left cursor-pointer"
> >
<TargetDisplay <TargetDisplay
value={{ value={{

View File

@@ -94,6 +94,8 @@ import { DomainRow } from "../../../../../components/DomainsTable";
import { finalizeSubdomainSanitize } from "@app/lib/subdomain-utils"; import { finalizeSubdomainSanitize } from "@app/lib/subdomain-utils";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@app/components/ui/tooltip"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@app/components/ui/tooltip";
import { PathMatchDisplay, PathMatchModal, PathRewriteDisplay, PathRewriteModal } from "@app/components/PathMatchRenameModal"; import { PathMatchDisplay, PathMatchModal, PathRewriteDisplay, PathRewriteModal } from "@app/components/PathMatchRenameModal";
import { TargetModal } from "@app/components/TargetModal";
import { TargetDisplay } from "@app/components/TargetDisplay";
const baseResourceFormSchema = z.object({ const baseResourceFormSchema = z.object({
@@ -810,87 +812,84 @@ export default function Page() {
); );
} }
}, },
...(baseForm.watch("http") {
? [ accessorKey: "target",
{ header: t("target"),
accessorKey: "method", cell: ({ row }) => {
header: t("method"), const hasTarget = !!(row.original.ip || row.original.port || row.original.method);
cell: ({ row }: { row: Row<LocalTarget> }) => (
<Select return hasTarget ? (
defaultValue={row.original.method ?? ""} <div className="flex items-center gap-1">
onValueChange={(value) => <TargetModal
value={{
method: row.original.method,
ip: row.original.ip,
port: row.original.port
}}
onChange={(config) =>
updateTarget(row.original.targetId, { updateTarget(row.original.targetId, {
...row.original, ...row.original,
method: value ...config
}) })
} }
> showMethod={baseForm.watch("http")}
<SelectTrigger> trigger={
{row.original.method} <Button
</SelectTrigger> variant="outline"
<SelectContent> className="flex items-center gap-2 max-w-md text-left cursor-pointer"
<SelectItem value="http">http</SelectItem> >
<SelectItem value="https">https</SelectItem> <TargetDisplay
<SelectItem value="h2c">h2c</SelectItem> value={{
</SelectContent> method: row.original.method,
</Select> ip: row.original.ip,
) port: row.original.port
} }}
] showMethod={baseForm.watch("http")}
: []), />
{ </Button>
accessorKey: "ip",
header: t("targetAddr"),
cell: ({ row }) => (
<Input
defaultValue={row.original.ip}
className="min-w-[150px]"
onBlur={(e) => {
const input = e.target.value.trim();
const hasProtocol = /^(https?|h2c):\/\//.test(input);
const hasPort = /:\d+(?:\/|$)/.test(input);
if (hasProtocol || hasPort) {
const parsed = parseHostTarget(input);
if (parsed) {
updateTarget(row.original.targetId, {
...row.original,
method: hasProtocol ? parsed.protocol : row.original.method,
ip: parsed.host,
port: hasPort ? parsed.port : row.original.port
});
} else {
updateTarget(row.original.targetId, {
...row.original,
ip: input
});
} }
} else { />
<Button
variant="ghost"
size="sm"
className="h-8 w-8 p-0"
onClick={(e) => {
e.stopPropagation();
updateTarget(row.original.targetId, {
...row.original,
method: null,
ip: "",
port: undefined
});
}}
>
×
</Button>
<MoveRight className="mr-2 h-4 w-4" />
</div>
) : (
<TargetModal
value={{
method: row.original.method,
ip: row.original.ip,
port: row.original.port
}}
onChange={(config) =>
updateTarget(row.original.targetId, { updateTarget(row.original.targetId, {
...row.original, ...row.original,
ip: input ...config
}); })
} }
}} showMethod={baseForm.watch("http")}
/> trigger={
) <Button variant="outline">
}, <Plus className="h-4 w-4 mr-2" />
{ {t("configureTarget")}
accessorKey: "port", </Button>
header: t("targetPort"), }
cell: ({ row }) => ( />
<Input );
type="number" }
defaultValue={row.original.port}
className="min-w-[100px]"
onBlur={(e) =>
updateTarget(row.original.targetId, {
...row.original,
port: parseInt(e.target.value, 10)
})
}
/>
)
}, },
{ {
accessorKey: "rewritePath", accessorKey: "rewritePath",