mirror of
https://github.com/fosrl/pangolin.git
synced 2026-05-12 07:14:14 +00:00
add multi site help link
This commit is contained in:
miloschwartz
@@ -2884,6 +2884,8 @@
|
|||||||
"editInternalResourceDialogAddClients": "Add Clients",
|
"editInternalResourceDialogAddClients": "Add Clients",
|
||||||
"editInternalResourceDialogDestinationLabel": "Destination",
|
"editInternalResourceDialogDestinationLabel": "Destination",
|
||||||
"editInternalResourceDialogDestinationDescription": "Choose where this resource runs and how clients reach it. Selecting multiple sites will create a high availability resource that can be accessed from any of the selected sites.",
|
"editInternalResourceDialogDestinationDescription": "Choose where this resource runs and how clients reach it. Selecting multiple sites will create a high availability resource that can be accessed from any of the selected sites.",
|
||||||
|
"internalResourceFormMultiSiteRoutingHelp": "Selecting multiple sites enables resilient routing and failover for high availability.",
|
||||||
|
"internalResourceFormMultiSiteRoutingHelpLearnMore": "Learn more",
|
||||||
"editInternalResourceDialogPortRestrictionsDescription": "Restrict access to specific TCP/UDP ports or allow/block all ports.",
|
"editInternalResourceDialogPortRestrictionsDescription": "Restrict access to specific TCP/UDP ports or allow/block all ports.",
|
||||||
"createInternalResourceDialogHttpConfiguration": "HTTP configuration",
|
"createInternalResourceDialogHttpConfiguration": "HTTP configuration",
|
||||||
"createInternalResourceDialogHttpConfigurationDescription": "Choose the domain clients will use to reach this resource over HTTP or HTTPS.",
|
"createInternalResourceDialogHttpConfigurationDescription": "Choose the domain clients will use to reach this resource over HTTP or HTTPS.",
|
||||||
|
|||||||
@@ -749,108 +749,129 @@ export function InternalResourceForm({
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid grid-cols-3 gap-4 items-start mb-4">
|
<div className="space-y-2 mb-4">
|
||||||
<div className="min-w-0 col-span-1">
|
<div className="grid grid-cols-3 gap-4 items-start">
|
||||||
<FormField
|
<div className="min-w-0 col-span-1">
|
||||||
control={form.control}
|
<FormField
|
||||||
name="siteIds"
|
control={form.control}
|
||||||
render={({ field }) => (
|
name="siteIds"
|
||||||
<FormItem className="flex flex-col">
|
render={({ field }) => (
|
||||||
<FormLabel>
|
<FormItem className="flex flex-col">
|
||||||
{t("sites")}
|
|
||||||
</FormLabel>
|
|
||||||
<Popover>
|
|
||||||
<PopoverTrigger asChild>
|
|
||||||
<FormControl>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
role="combobox"
|
|
||||||
className={cn(
|
|
||||||
"w-full justify-between",
|
|
||||||
selectedSites.length ===
|
|
||||||
0 &&
|
|
||||||
"text-muted-foreground"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<span className="truncate text-left">
|
|
||||||
{formatMultiSitesSelectorLabel(
|
|
||||||
selectedSites,
|
|
||||||
t
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
|
||||||
</Button>
|
|
||||||
</FormControl>
|
|
||||||
</PopoverTrigger>
|
|
||||||
<PopoverContent className="w-full p-0">
|
|
||||||
<MultiSitesSelector
|
|
||||||
orgId={orgId}
|
|
||||||
selectedSites={
|
|
||||||
selectedSites
|
|
||||||
}
|
|
||||||
filterTypes={[
|
|
||||||
"newt"
|
|
||||||
]}
|
|
||||||
onSelectionChange={(
|
|
||||||
sites
|
|
||||||
) => {
|
|
||||||
setSelectedSites(
|
|
||||||
sites
|
|
||||||
);
|
|
||||||
field.onChange(
|
|
||||||
sites.map(
|
|
||||||
(s) =>
|
|
||||||
s.siteId
|
|
||||||
)
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</PopoverContent>
|
|
||||||
</Popover>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="min-w-0 col-span-2">
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name="mode"
|
|
||||||
render={({ field }) => {
|
|
||||||
const modeOptions: OptionSelectOption<InternalResourceMode>[] =
|
|
||||||
[
|
|
||||||
{
|
|
||||||
value: "host",
|
|
||||||
label: t(modeHostKey)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "cidr",
|
|
||||||
label: t(modeCidrKey)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "http",
|
|
||||||
label: t(modeHttpKey)
|
|
||||||
}
|
|
||||||
];
|
|
||||||
return (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>
|
<FormLabel>
|
||||||
{t(modeLabelKey)}
|
{t("sites")}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
<OptionSelect<InternalResourceMode>
|
<Popover>
|
||||||
options={modeOptions}
|
<PopoverTrigger asChild>
|
||||||
value={field.value}
|
<FormControl>
|
||||||
onChange={
|
<Button
|
||||||
field.onChange
|
variant="outline"
|
||||||
}
|
role="combobox"
|
||||||
cols={3}
|
className={cn(
|
||||||
/>
|
"w-full justify-between",
|
||||||
|
selectedSites.length ===
|
||||||
|
0 &&
|
||||||
|
"text-muted-foreground"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<span className="truncate text-left">
|
||||||
|
{formatMultiSitesSelectorLabel(
|
||||||
|
selectedSites,
|
||||||
|
t
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||||
|
</Button>
|
||||||
|
</FormControl>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-full p-0">
|
||||||
|
<MultiSitesSelector
|
||||||
|
orgId={orgId}
|
||||||
|
selectedSites={
|
||||||
|
selectedSites
|
||||||
|
}
|
||||||
|
filterTypes={[
|
||||||
|
"newt"
|
||||||
|
]}
|
||||||
|
onSelectionChange={(
|
||||||
|
sites
|
||||||
|
) => {
|
||||||
|
setSelectedSites(
|
||||||
|
sites
|
||||||
|
);
|
||||||
|
field.onChange(
|
||||||
|
sites.map(
|
||||||
|
(s) =>
|
||||||
|
s.siteId
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
);
|
)}
|
||||||
}}
|
/>
|
||||||
/>
|
</div>
|
||||||
|
<div className="min-w-0 col-span-2">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="mode"
|
||||||
|
render={({ field }) => {
|
||||||
|
const modeOptions: OptionSelectOption<InternalResourceMode>[] =
|
||||||
|
[
|
||||||
|
{
|
||||||
|
value: "host",
|
||||||
|
label: t(modeHostKey)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "cidr",
|
||||||
|
label: t(modeCidrKey)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "http",
|
||||||
|
label: t(modeHttpKey)
|
||||||
|
}
|
||||||
|
];
|
||||||
|
return (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>
|
||||||
|
{t(modeLabelKey)}
|
||||||
|
</FormLabel>
|
||||||
|
<OptionSelect<InternalResourceMode>
|
||||||
|
options={modeOptions}
|
||||||
|
value={field.value}
|
||||||
|
onChange={
|
||||||
|
field.onChange
|
||||||
|
}
|
||||||
|
cols={3}
|
||||||
|
/>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{selectedSites.length > 1 && (
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
{t(
|
||||||
|
"internalResourceFormMultiSiteRoutingHelp"
|
||||||
|
)}{" "}
|
||||||
|
<a
|
||||||
|
href="https://docs.pangolin.net/manage/resources/private/multi-site-routing"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-primary hover:underline inline-flex items-center gap-1"
|
||||||
|
>
|
||||||
|
{t(
|
||||||
|
"internalResourceFormMultiSiteRoutingHelpLearnMore"
|
||||||
|
)}
|
||||||
|
<ExternalLink className="size-3.5 shrink-0" />
|
||||||
|
</a>
|
||||||
|
.
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
|
|||||||
Reference in New Issue
Block a user