mirror of
https://github.com/fosrl/pangolin.git
synced 2026-07-07 14:44:52 +02:00
Compare commits
17 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 4c8bd4db0a | |||
| d742300e82 | |||
| a521db91a2 | |||
| 0b5b732a48 | |||
| a82bae8f93 | |||
| e59176149b | |||
| 2c3151da9b | |||
| f60b8795ad | |||
| 4054976388 | |||
| 4087d7fb6b | |||
| 9edb86fd73 | |||
| 811119a9a6 | |||
| b53f80d317 | |||
| a89509c8bd | |||
| f0546eb622 | |||
| 12f9ac94fd | |||
| 1717a99cee |
@@ -77,7 +77,7 @@ jobs:
|
|||||||
fi
|
fi
|
||||||
|
|
||||||
- name: Log in to Docker Hub
|
- name: Log in to Docker Hub
|
||||||
uses: docker/login-action@af1e73f918a031802d376d3c8bbc3fe56130a9b0 # v4.4.0
|
uses: docker/login-action@650006c6eb7dba73a995cc03b0b2d7f5ca915bee # v4.2.0
|
||||||
with:
|
with:
|
||||||
registry: docker.io
|
registry: docker.io
|
||||||
username: ${{ secrets.DOCKER_HUB_USERNAME }}
|
username: ${{ secrets.DOCKER_HUB_USERNAME }}
|
||||||
@@ -149,7 +149,7 @@ jobs:
|
|||||||
fi
|
fi
|
||||||
|
|
||||||
- name: Log in to Docker Hub
|
- name: Log in to Docker Hub
|
||||||
uses: docker/login-action@af1e73f918a031802d376d3c8bbc3fe56130a9b0 # v4.4.0
|
uses: docker/login-action@650006c6eb7dba73a995cc03b0b2d7f5ca915bee # v4.2.0
|
||||||
with:
|
with:
|
||||||
registry: docker.io
|
registry: docker.io
|
||||||
username: ${{ secrets.DOCKER_HUB_USERNAME }}
|
username: ${{ secrets.DOCKER_HUB_USERNAME }}
|
||||||
@@ -204,7 +204,7 @@ jobs:
|
|||||||
uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
|
uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
|
||||||
|
|
||||||
- name: Log in to Docker Hub
|
- name: Log in to Docker Hub
|
||||||
uses: docker/login-action@af1e73f918a031802d376d3c8bbc3fe56130a9b0 # v4.4.0
|
uses: docker/login-action@650006c6eb7dba73a995cc03b0b2d7f5ca915bee # v4.2.0
|
||||||
with:
|
with:
|
||||||
registry: docker.io
|
registry: docker.io
|
||||||
username: ${{ secrets.DOCKER_HUB_USERNAME }}
|
username: ${{ secrets.DOCKER_HUB_USERNAME }}
|
||||||
@@ -264,7 +264,7 @@ jobs:
|
|||||||
shell: bash
|
shell: bash
|
||||||
|
|
||||||
- name: Install Go
|
- name: Install Go
|
||||||
uses: actions/setup-go@924ae3a1cded613372ab5595356fb5720e22ba16 # v6.5.0
|
uses: actions/setup-go@4a3601121dd01d1626a1e23e37211e3254c1c06c # v6.4.0
|
||||||
with:
|
with:
|
||||||
go-version: 1.25
|
go-version: 1.25
|
||||||
|
|
||||||
@@ -407,7 +407,7 @@ jobs:
|
|||||||
shell: bash
|
shell: bash
|
||||||
|
|
||||||
- name: Login to GitHub Container Registry (for cosign)
|
- name: Login to GitHub Container Registry (for cosign)
|
||||||
uses: docker/login-action@af1e73f918a031802d376d3c8bbc3fe56130a9b0 # v4.4.0
|
uses: docker/login-action@650006c6eb7dba73a995cc03b0b2d7f5ca915bee # v4.2.0
|
||||||
with:
|
with:
|
||||||
registry: ghcr.io
|
registry: ghcr.io
|
||||||
username: ${{ github.actor }}
|
username: ${{ github.actor }}
|
||||||
|
|||||||
@@ -41,7 +41,7 @@ services:
|
|||||||
- 80:80 # Port for traefik because of the network_mode
|
- 80:80 # Port for traefik because of the network_mode
|
||||||
|
|
||||||
traefik:
|
traefik:
|
||||||
image: traefik:v3.7
|
image: traefik:v3.6
|
||||||
container_name: traefik
|
container_name: traefik
|
||||||
restart: unless-stopped
|
restart: unless-stopped
|
||||||
network_mode: service:gerbil # Ports appear on the gerbil service
|
network_mode: service:gerbil # Ports appear on the gerbil service
|
||||||
|
|||||||
@@ -50,7 +50,7 @@ services:
|
|||||||
- 80:80{{end}}
|
- 80:80{{end}}
|
||||||
|
|
||||||
traefik:
|
traefik:
|
||||||
image: docker.io/traefik:v3.7
|
image: docker.io/traefik:v3.6
|
||||||
container_name: traefik
|
container_name: traefik
|
||||||
restart: unless-stopped
|
restart: unless-stopped
|
||||||
{{if .InstallGerbil}}network_mode: service:gerbil # Ports appear on the gerbil service{{end}}{{if not .InstallGerbil}}
|
{{if .InstallGerbil}}network_mode: service:gerbil # Ports appear on the gerbil service{{end}}{{if not .InstallGerbil}}
|
||||||
|
|||||||
+37
-5
@@ -266,6 +266,8 @@
|
|||||||
"resourceRawDescriptionCloud": "Proxy requests over raw TCP/UDP using a port number. Requires sites to connect to a remote node.",
|
"resourceRawDescriptionCloud": "Proxy requests over raw TCP/UDP using a port number. Requires sites to connect to a remote node.",
|
||||||
"resourceCreate": "Create Resource",
|
"resourceCreate": "Create Resource",
|
||||||
"resourceCreateDescription": "Follow the steps below to create a new resource",
|
"resourceCreateDescription": "Follow the steps below to create a new resource",
|
||||||
|
"resourcePublicCreate": "Create Public Resource",
|
||||||
|
"resourcePublicCreateDescription": "Follow the steps below to create a new public resource that is accessible through a web browser",
|
||||||
"resourceCreateGeneralDescription": "Configure the basic resource settings including the name and the type",
|
"resourceCreateGeneralDescription": "Configure the basic resource settings including the name and the type",
|
||||||
"resourceSeeAll": "See All Resources",
|
"resourceSeeAll": "See All Resources",
|
||||||
"resourceCreateGeneral": "General",
|
"resourceCreateGeneral": "General",
|
||||||
@@ -864,8 +866,8 @@
|
|||||||
"policyAuthHeaderAuthTitle": "Basic Header Auth",
|
"policyAuthHeaderAuthTitle": "Basic Header Auth",
|
||||||
"policyAuthHeaderAuthDescription": "Validate a custom HTTP header name and value on each request",
|
"policyAuthHeaderAuthDescription": "Validate a custom HTTP header name and value on each request",
|
||||||
"policyAuthHeaderAuthSummary": "Header configured",
|
"policyAuthHeaderAuthSummary": "Header configured",
|
||||||
"policyAuthHeaderName": "Header name",
|
"policyAuthHeaderName": "Username",
|
||||||
"policyAuthHeaderValue": "Expected value",
|
"policyAuthHeaderValue": "Password",
|
||||||
"policyAuthSetPasscode": "Set Passcode",
|
"policyAuthSetPasscode": "Set Passcode",
|
||||||
"policyAuthSetPincode": "Set PIN Code",
|
"policyAuthSetPincode": "Set PIN Code",
|
||||||
"policyAuthSetEmailWhitelist": "Set Email Whitelist",
|
"policyAuthSetEmailWhitelist": "Set Email Whitelist",
|
||||||
@@ -2317,6 +2319,12 @@
|
|||||||
"createInternalResourceDialogClose": "Close",
|
"createInternalResourceDialogClose": "Close",
|
||||||
"createInternalResourceDialogCreateClientResource": "Create Private Resource",
|
"createInternalResourceDialogCreateClientResource": "Create Private Resource",
|
||||||
"createInternalResourceDialogCreateClientResourceDescription": "Create a new resource that will only be accessible to clients connected to the organization",
|
"createInternalResourceDialogCreateClientResourceDescription": "Create a new resource that will only be accessible to clients connected to the organization",
|
||||||
|
"privateResourceCreatePageSeeAll": "See All Private Resources",
|
||||||
|
"privateResourceAllowIcmpPing": "Allow ICMP Ping",
|
||||||
|
"privateResourceNetworkAccess": "Network Access",
|
||||||
|
"privateResourceNetworkAccessDescription": "Control TCP/UDP port access and whether ICMP ping is allowed for this resource.",
|
||||||
|
"hostSettings": "Host Settings",
|
||||||
|
"cidrSettings": "CIDR Settings",
|
||||||
"createInternalResourceDialogResourceProperties": "Resource Properties",
|
"createInternalResourceDialogResourceProperties": "Resource Properties",
|
||||||
"createInternalResourceDialogName": "Name",
|
"createInternalResourceDialogName": "Name",
|
||||||
"createInternalResourceDialogSite": "Site",
|
"createInternalResourceDialogSite": "Site",
|
||||||
@@ -3577,18 +3585,23 @@
|
|||||||
"memberPortalResourceDisabled": "Resource Disabled",
|
"memberPortalResourceDisabled": "Resource Disabled",
|
||||||
"memberPortalShowingResources": "Showing {start}-{end} of {total} resources",
|
"memberPortalShowingResources": "Showing {start}-{end} of {total} resources",
|
||||||
"resourceLauncherTitle": "Resource Launcher",
|
"resourceLauncherTitle": "Resource Launcher",
|
||||||
"resourceLauncherDescription": "View resource details and launch them from one place",
|
"resourceLauncherDescription": "View all available resources and launch them from one central hub",
|
||||||
"resourceLauncherSearchPlaceholder": "Search all sites...",
|
"resourceLauncherSearchPlaceholder": "Search your resources...",
|
||||||
"resourceLauncherDefaultView": "Default",
|
"resourceLauncherDefaultView": "Default",
|
||||||
"resourceLauncherSaveView": "Save View",
|
"resourceLauncherSaveView": "Save View",
|
||||||
"resourceLauncherSaveToCurrentView": "Save to Current View",
|
"resourceLauncherSaveToCurrentView": "Save to Current View",
|
||||||
|
"resourceLauncherSaveDefaultPersonal": "Save for Me",
|
||||||
"resourceLauncherResetView": "Reset View",
|
"resourceLauncherResetView": "Reset View",
|
||||||
|
"resourceLauncherResetSystemDefault": "Reset to System Default",
|
||||||
|
"resourceLauncherSystemDefaultRestored": "System default restored",
|
||||||
|
"resourceLauncherSystemDefaultRestoredDescription": "The default view has been reset to the original settings.",
|
||||||
"resourceLauncherSaveAsNewView": "Save as New View",
|
"resourceLauncherSaveAsNewView": "Save as New View",
|
||||||
"resourceLauncherSaveAsNewViewDescription": "Give this view a name to save your current filters and layout.",
|
"resourceLauncherSaveAsNewViewDescription": "Give this view a name to save your current filters and layout.",
|
||||||
"resourceLauncherSaveForEveryone": "Save for Everyone",
|
"resourceLauncherSaveForEveryone": "Save for Everyone",
|
||||||
"resourceLauncherSaveForEveryoneDescription": "Share this view with all organization members. When unchecked, the view is only visible to you.",
|
"resourceLauncherSaveForEveryoneDescription": "Share this view with all organization members. When unchecked, the view is only visible to you.",
|
||||||
"resourceLauncherMakePersonal": "Make Personal",
|
"resourceLauncherMakePersonal": "Make Personal",
|
||||||
"resourceLauncherFilter": "Filter",
|
"resourceLauncherFilter": "Filter",
|
||||||
|
"resourceLauncherFilterWithCount": "Filter, {count} applied",
|
||||||
"resourceLauncherSort": "Sort",
|
"resourceLauncherSort": "Sort",
|
||||||
"resourceLauncherSortAscending": "Sort ascending",
|
"resourceLauncherSortAscending": "Sort ascending",
|
||||||
"resourceLauncherSortDescending": "Sort descending",
|
"resourceLauncherSortDescending": "Sort descending",
|
||||||
@@ -3596,6 +3609,7 @@
|
|||||||
"resourceLauncherGroupBy": "Group By",
|
"resourceLauncherGroupBy": "Group By",
|
||||||
"resourceLauncherGroupBySite": "Site",
|
"resourceLauncherGroupBySite": "Site",
|
||||||
"resourceLauncherGroupByLabel": "Label",
|
"resourceLauncherGroupByLabel": "Label",
|
||||||
|
"resourceLauncherGroupByNone": "None",
|
||||||
"resourceLauncherLayout": "Layout",
|
"resourceLauncherLayout": "Layout",
|
||||||
"resourceLauncherLayoutGrid": "Grid",
|
"resourceLauncherLayoutGrid": "Grid",
|
||||||
"resourceLauncherLayoutList": "List",
|
"resourceLauncherLayoutList": "List",
|
||||||
@@ -3603,8 +3617,20 @@
|
|||||||
"resourceLauncherShowSiteTags": "Show Site Tags",
|
"resourceLauncherShowSiteTags": "Show Site Tags",
|
||||||
"resourceLauncherShowRecents": "Show Recents",
|
"resourceLauncherShowRecents": "Show Recents",
|
||||||
"resourceLauncherDeleteView": "Delete View",
|
"resourceLauncherDeleteView": "Delete View",
|
||||||
|
"resourceLauncherDeleteViewTitle": "Delete View",
|
||||||
|
"resourceLauncherDeleteViewQuestion": "Are you sure you want to delete this launcher view?",
|
||||||
|
"resourceLauncherDeleteViewConfirm": "Delete View",
|
||||||
"resourceLauncherViewAsAdmin": "View as Admin",
|
"resourceLauncherViewAsAdmin": "View as Admin",
|
||||||
"resourceLauncherResourceDetailsDescription": "View details for this resource.",
|
"resourceLauncherResourceDetailsDescription": "Connection information and status for this resource.",
|
||||||
|
"resourceLauncherResourceDetails": "Resource Details",
|
||||||
|
"resourceLauncherAuthMethodsDescription": "Authentication methods enabled for this resource.",
|
||||||
|
"resourceLauncherPrivateClientRequired": "Connect with a client on your device to access this resource privately.",
|
||||||
|
"resourceLauncherPrivateClientRequiredTitle": "Client Connection Required",
|
||||||
|
"resourceLauncherDownloadClient": "Download client",
|
||||||
|
"resourceLauncherFailedToLoadDetails": "Could not load resource details. You may no longer have access to this resource.",
|
||||||
|
"resourceLauncherNoPortRestrictions": "No port restrictions",
|
||||||
|
"resourceLauncherTcp": "TCP",
|
||||||
|
"resourceLauncherUdp": "UDP",
|
||||||
"resourceLauncherUnlabeled": "Unlabeled",
|
"resourceLauncherUnlabeled": "Unlabeled",
|
||||||
"resourceLauncherNoSite": "No Site",
|
"resourceLauncherNoSite": "No Site",
|
||||||
"resourceLauncherNoResourcesInGroup": "No resources in this group",
|
"resourceLauncherNoResourcesInGroup": "No resources in this group",
|
||||||
@@ -3613,6 +3639,12 @@
|
|||||||
"resourceLauncherEmptyStateNoResultsTitle": "No Resources Found",
|
"resourceLauncherEmptyStateNoResultsTitle": "No Resources Found",
|
||||||
"resourceLauncherEmptyStateNoResultsDescription": "No resources match your current search or filters. Try adjusting them to find what you are looking for.",
|
"resourceLauncherEmptyStateNoResultsDescription": "No resources match your current search or filters. Try adjusting them to find what you are looking for.",
|
||||||
"resourceLauncherEmptyStateNoResultsWithQuery": "No resources match \"{query}\". Try adjusting your search or clearing filters to see all resources.",
|
"resourceLauncherEmptyStateNoResultsWithQuery": "No resources match \"{query}\". Try adjusting your search or clearing filters to see all resources.",
|
||||||
|
"resourceLauncherSearchFirstTitle": "Search or Filter to Browse",
|
||||||
|
"resourceLauncherSearchFirstDescription": "You have access to many resources. Use search or filter by site or label to find what you need.",
|
||||||
|
"resourceLauncherSiteGroupingDisabled": "Site grouping is unavailable at this scale. Filter by site to group a smaller set.",
|
||||||
|
"resourceLauncherLabelGroupingDisabled": "Label grouping is unavailable at this scale.",
|
||||||
|
"resourceLauncherCompactModeHint": "Showing a simplified list for faster browsing. Use search or filters to narrow results.",
|
||||||
|
"resourceLauncherCompactGroupingHint": "Apply site or label filters to enable grouping.",
|
||||||
"resourceLauncherCopiedToClipboard": "Copied to clipboard",
|
"resourceLauncherCopiedToClipboard": "Copied to clipboard",
|
||||||
"resourceLauncherCopiedAccessDescription": "Resource access has been copied to your clipboard.",
|
"resourceLauncherCopiedAccessDescription": "Resource access has been copied to your clipboard.",
|
||||||
"resourceLauncherViewNamePlaceholder": "View name",
|
"resourceLauncherViewNamePlaceholder": "View name",
|
||||||
|
|||||||
@@ -18,7 +18,17 @@ export function createPoolConfig(
|
|||||||
keepAliveInitialDelayMillis: 10000, // send first keepalive after 10s of idle
|
keepAliveInitialDelayMillis: 10000, // send first keepalive after 10s of idle
|
||||||
// Allow connections to be released and recreated more aggressively
|
// Allow connections to be released and recreated more aggressively
|
||||||
// to avoid stale connections building up
|
// to avoid stale connections building up
|
||||||
allowExitOnIdle: false
|
allowExitOnIdle: false,
|
||||||
|
// Disable JIT compilation for this connection. Our hot-path queries
|
||||||
|
// (e.g. resource-by-domain lookups) join many tables but only ever
|
||||||
|
// return a handful of rows. When planner row estimates drift (e.g.
|
||||||
|
// due to autovacuum lag under write-heavy load), Postgres decides
|
||||||
|
// these plans are expensive enough to JIT-compile, which can add
|
||||||
|
// multiple seconds of pure compilation overhead per query and
|
||||||
|
// saturate the connection pool. JIT never pays off for these
|
||||||
|
// short-lived OLTP queries, so it's disabled outright rather than
|
||||||
|
// relying on statistics staying fresh.
|
||||||
|
options: "-c jit=off"
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -232,6 +232,7 @@ export const launcherViews = pgTable("launcherViews", {
|
|||||||
}),
|
}),
|
||||||
name: varchar("name").notNull(),
|
name: varchar("name").notNull(),
|
||||||
config: text("config").notNull(),
|
config: text("config").notNull(),
|
||||||
|
isDefault: boolean("isDefault").notNull().default(false),
|
||||||
createdAt: varchar("createdAt").notNull(),
|
createdAt: varchar("createdAt").notNull(),
|
||||||
updatedAt: varchar("updatedAt").notNull()
|
updatedAt: varchar("updatedAt").notNull()
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -233,6 +233,9 @@ export const launcherViews = sqliteTable("launcherViews", {
|
|||||||
}),
|
}),
|
||||||
name: text("name").notNull(),
|
name: text("name").notNull(),
|
||||||
config: text("config").notNull(),
|
config: text("config").notNull(),
|
||||||
|
isDefault: integer("isDefault", { mode: "boolean" })
|
||||||
|
.notNull()
|
||||||
|
.default(false),
|
||||||
createdAt: text("createdAt").notNull(),
|
createdAt: text("createdAt").notNull(),
|
||||||
updatedAt: text("updatedAt").notNull()
|
updatedAt: text("updatedAt").notNull()
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -327,6 +327,14 @@ authenticated.get(
|
|||||||
siteResource.listAllSiteResourcesByOrg
|
siteResource.listAllSiteResourcesByOrg
|
||||||
);
|
);
|
||||||
|
|
||||||
|
authenticated.get(
|
||||||
|
"/org/:orgId/site-resource/:siteResourceId",
|
||||||
|
verifyOrgAccess,
|
||||||
|
verifySiteResourceAccess,
|
||||||
|
verifyUserHasAction(ActionsEnum.getSiteResource),
|
||||||
|
siteResource.getSiteResource
|
||||||
|
);
|
||||||
|
|
||||||
authenticated.get(
|
authenticated.get(
|
||||||
"/site-resource/:siteResourceId",
|
"/site-resource/:siteResourceId",
|
||||||
verifySiteResourceAccess,
|
verifySiteResourceAccess,
|
||||||
@@ -470,6 +478,12 @@ authenticated.get(
|
|||||||
launcher.listLauncherGroups
|
launcher.listLauncherGroups
|
||||||
);
|
);
|
||||||
|
|
||||||
|
authenticated.get(
|
||||||
|
"/org/:orgId/launcher/scale",
|
||||||
|
verifyOrgAccess,
|
||||||
|
launcher.listLauncherScale
|
||||||
|
);
|
||||||
|
|
||||||
authenticated.get(
|
authenticated.get(
|
||||||
"/org/:orgId/launcher/resources",
|
"/org/:orgId/launcher/resources",
|
||||||
verifyOrgAccess,
|
verifyOrgAccess,
|
||||||
@@ -494,6 +508,12 @@ authenticated.get(
|
|||||||
launcher.listLauncherViews
|
launcher.listLauncherViews
|
||||||
);
|
);
|
||||||
|
|
||||||
|
authenticated.post(
|
||||||
|
"/org/:orgId/launcher/invalidate-cache",
|
||||||
|
verifyOrgAccess,
|
||||||
|
launcher.invalidateLauncherCache
|
||||||
|
);
|
||||||
|
|
||||||
authenticated.post(
|
authenticated.post(
|
||||||
"/org/:orgId/launcher/views",
|
"/org/:orgId/launcher/views",
|
||||||
verifyOrgAccess,
|
verifyOrgAccess,
|
||||||
@@ -506,6 +526,18 @@ authenticated.put(
|
|||||||
launcher.updateLauncherView
|
launcher.updateLauncherView
|
||||||
);
|
);
|
||||||
|
|
||||||
|
authenticated.put(
|
||||||
|
"/org/:orgId/launcher/default-view",
|
||||||
|
verifyOrgAccess,
|
||||||
|
launcher.upsertLauncherDefaultView
|
||||||
|
);
|
||||||
|
|
||||||
|
authenticated.delete(
|
||||||
|
"/org/:orgId/launcher/default-view",
|
||||||
|
verifyOrgAccess,
|
||||||
|
launcher.deleteLauncherDefaultView
|
||||||
|
);
|
||||||
|
|
||||||
authenticated.delete(
|
authenticated.delete(
|
||||||
"/org/:orgId/launcher/views/:viewId",
|
"/org/:orgId/launcher/views/:viewId",
|
||||||
verifyOrgAccess,
|
verifyOrgAccess,
|
||||||
|
|||||||
@@ -79,7 +79,8 @@ export async function createLauncherView(
|
|||||||
),
|
),
|
||||||
createdAt: created.createdAt,
|
createdAt: created.createdAt,
|
||||||
updatedAt: created.updatedAt,
|
updatedAt: created.updatedAt,
|
||||||
isOrgWide: created.userId == null
|
isOrgWide: created.userId == null,
|
||||||
|
isDefault: created.isDefault
|
||||||
},
|
},
|
||||||
success: true,
|
success: true,
|
||||||
error: false,
|
error: false,
|
||||||
|
|||||||
@@ -0,0 +1,104 @@
|
|||||||
|
import { response } from "@server/lib/response";
|
||||||
|
import HttpCode from "@server/types/HttpCode";
|
||||||
|
import { NextFunction, Request, Response } from "express";
|
||||||
|
import createHttpError from "http-errors";
|
||||||
|
import { fromZodError } from "zod-validation-error";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { ActionsEnum, checkUserActionPermission } from "@server/auth/actions";
|
||||||
|
import {
|
||||||
|
deleteAllDefaultViewOverrides,
|
||||||
|
deleteDefaultViewOverride
|
||||||
|
} from "./launcherDefaultView";
|
||||||
|
|
||||||
|
const deleteLauncherDefaultViewBodySchema = z.strictObject({
|
||||||
|
orgWide: z.boolean().optional().default(false),
|
||||||
|
all: z.boolean().optional().default(false)
|
||||||
|
});
|
||||||
|
|
||||||
|
export async function deleteLauncherDefaultView(
|
||||||
|
req: Request,
|
||||||
|
res: Response,
|
||||||
|
next: NextFunction
|
||||||
|
): Promise<any> {
|
||||||
|
try {
|
||||||
|
const orgId = req.userOrgId;
|
||||||
|
const userId = req.user!.userId;
|
||||||
|
|
||||||
|
if (!orgId) {
|
||||||
|
return next(
|
||||||
|
createHttpError(HttpCode.BAD_REQUEST, "Invalid organization ID")
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const parsed = deleteLauncherDefaultViewBodySchema.safeParse(req.body);
|
||||||
|
if (!parsed.success) {
|
||||||
|
return next(
|
||||||
|
createHttpError(
|
||||||
|
HttpCode.BAD_REQUEST,
|
||||||
|
fromZodError(parsed.error)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (parsed.data.all) {
|
||||||
|
const canManageOrgWide = await checkUserActionPermission(
|
||||||
|
ActionsEnum.createOrgWideLauncherView,
|
||||||
|
req
|
||||||
|
);
|
||||||
|
if (!canManageOrgWide) {
|
||||||
|
return next(
|
||||||
|
createHttpError(
|
||||||
|
HttpCode.FORBIDDEN,
|
||||||
|
"User does not have permission perform this action"
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
await deleteAllDefaultViewOverrides(orgId, userId);
|
||||||
|
} else if (parsed.data.orgWide) {
|
||||||
|
const canManageOrgWide = await checkUserActionPermission(
|
||||||
|
ActionsEnum.createOrgWideLauncherView,
|
||||||
|
req
|
||||||
|
);
|
||||||
|
if (!canManageOrgWide) {
|
||||||
|
return next(
|
||||||
|
createHttpError(
|
||||||
|
HttpCode.FORBIDDEN,
|
||||||
|
"User does not have permission perform this action"
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
await deleteDefaultViewOverride({
|
||||||
|
orgId,
|
||||||
|
userId,
|
||||||
|
orgWide: true
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
await deleteDefaultViewOverride({
|
||||||
|
orgId,
|
||||||
|
userId,
|
||||||
|
orgWide: false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return response(res, {
|
||||||
|
data: null,
|
||||||
|
success: true,
|
||||||
|
error: false,
|
||||||
|
message: "Launcher default view reset successfully",
|
||||||
|
status: HttpCode.OK
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
if (createHttpError.isHttpError(error)) {
|
||||||
|
return next(error);
|
||||||
|
}
|
||||||
|
console.error("Error resetting launcher default view:", error);
|
||||||
|
return next(
|
||||||
|
createHttpError(
|
||||||
|
HttpCode.INTERNAL_SERVER_ERROR,
|
||||||
|
"Internal server error"
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -46,6 +46,15 @@ export async function deleteLauncherView(
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (existing.isDefault) {
|
||||||
|
return next(
|
||||||
|
createHttpError(
|
||||||
|
HttpCode.BAD_REQUEST,
|
||||||
|
"The default view cannot be deleted from here"
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
const isPersonalView = existing.userId === userId;
|
const isPersonalView = existing.userId === userId;
|
||||||
const isOrgWideView = existing.userId == null;
|
const isOrgWideView = existing.userId == null;
|
||||||
const canManageOrgWide = await checkUserActionPermission(
|
const canManageOrgWide = await checkUserActionPermission(
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
export * from "./types";
|
export * from "./types";
|
||||||
export { listLauncherGroups } from "./listLauncherGroups";
|
export { listLauncherGroups } from "./listLauncherGroups";
|
||||||
|
export { listLauncherScale } from "./listLauncherScale";
|
||||||
export { listLauncherResources } from "./listLauncherResources";
|
export { listLauncherResources } from "./listLauncherResources";
|
||||||
export { listLauncherSites } from "./listLauncherSites";
|
export { listLauncherSites } from "./listLauncherSites";
|
||||||
export { listLauncherLabels } from "./listLauncherLabels";
|
export { listLauncherLabels } from "./listLauncherLabels";
|
||||||
@@ -7,3 +8,6 @@ export { listLauncherViews } from "./listLauncherViews";
|
|||||||
export { createLauncherView } from "./createLauncherView";
|
export { createLauncherView } from "./createLauncherView";
|
||||||
export { updateLauncherView } from "./updateLauncherView";
|
export { updateLauncherView } from "./updateLauncherView";
|
||||||
export { deleteLauncherView } from "./deleteLauncherView";
|
export { deleteLauncherView } from "./deleteLauncherView";
|
||||||
|
export { upsertLauncherDefaultView } from "./upsertLauncherDefaultView";
|
||||||
|
export { deleteLauncherDefaultView } from "./deleteLauncherDefaultView";
|
||||||
|
export { invalidateLauncherCache } from "./invalidateLauncherCache";
|
||||||
|
|||||||
@@ -0,0 +1,65 @@
|
|||||||
|
import { regionalCache as cache } from "#dynamic/lib/cache";
|
||||||
|
import { response } from "@server/lib/response";
|
||||||
|
import HttpCode from "@server/types/HttpCode";
|
||||||
|
import { NextFunction, Request, Response } from "express";
|
||||||
|
import createHttpError from "http-errors";
|
||||||
|
|
||||||
|
async function invalidateLauncherCacheForUser(
|
||||||
|
orgId: string,
|
||||||
|
userId: string
|
||||||
|
): Promise<void> {
|
||||||
|
const prefixes = [
|
||||||
|
`launcherAccessibleIds:${orgId}:${userId}:`,
|
||||||
|
`launcher:groups:${orgId}:${userId}:`,
|
||||||
|
`launcher:results:${orgId}:${userId}:`,
|
||||||
|
`launcher:scale:counts:${orgId}:${userId}:`
|
||||||
|
];
|
||||||
|
|
||||||
|
const keys = (
|
||||||
|
await Promise.all(
|
||||||
|
prefixes.map((prefix) => cache.keysWithPrefix(prefix))
|
||||||
|
)
|
||||||
|
).flat();
|
||||||
|
|
||||||
|
if (keys.length > 0) {
|
||||||
|
await cache.del(keys);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function invalidateLauncherCache(
|
||||||
|
req: Request,
|
||||||
|
res: Response,
|
||||||
|
next: NextFunction
|
||||||
|
): Promise<any> {
|
||||||
|
try {
|
||||||
|
const orgId = req.userOrgId;
|
||||||
|
const userId = req.user!.userId;
|
||||||
|
|
||||||
|
if (!orgId) {
|
||||||
|
return next(
|
||||||
|
createHttpError(HttpCode.BAD_REQUEST, "Invalid organization ID")
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
await invalidateLauncherCacheForUser(orgId, userId);
|
||||||
|
|
||||||
|
return response(res, {
|
||||||
|
data: null,
|
||||||
|
success: true,
|
||||||
|
error: false,
|
||||||
|
message: "Launcher cache invalidated successfully",
|
||||||
|
status: HttpCode.OK
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
if (createHttpError.isHttpError(error)) {
|
||||||
|
return next(error);
|
||||||
|
}
|
||||||
|
console.error("Error invalidating launcher cache:", error);
|
||||||
|
return next(
|
||||||
|
createHttpError(
|
||||||
|
HttpCode.INTERNAL_SERVER_ERROR,
|
||||||
|
"Internal server error"
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,137 @@
|
|||||||
|
import { db, launcherViews } from "@server/db";
|
||||||
|
import { and, eq, isNull } from "drizzle-orm";
|
||||||
|
import moment from "moment";
|
||||||
|
import {
|
||||||
|
launcherViewConfigSchema,
|
||||||
|
type LauncherDefaultViewOverrides,
|
||||||
|
type LauncherViewConfig,
|
||||||
|
type LauncherViewRecord
|
||||||
|
} from "./types";
|
||||||
|
|
||||||
|
export function mapViewRow(
|
||||||
|
row: typeof launcherViews.$inferSelect
|
||||||
|
): LauncherViewRecord {
|
||||||
|
return {
|
||||||
|
viewId: row.viewId,
|
||||||
|
orgId: row.orgId,
|
||||||
|
userId: row.userId,
|
||||||
|
name: row.name,
|
||||||
|
config: launcherViewConfigSchema.parse(JSON.parse(row.config)),
|
||||||
|
createdAt: row.createdAt,
|
||||||
|
updatedAt: row.updatedAt,
|
||||||
|
isOrgWide: row.userId == null,
|
||||||
|
isDefault: row.isDefault
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function extractDefaultViewOverrides(
|
||||||
|
rows: Array<typeof launcherViews.$inferSelect>
|
||||||
|
): LauncherDefaultViewOverrides {
|
||||||
|
const overrideRows = rows.filter((row) => row.isDefault);
|
||||||
|
|
||||||
|
const personalRow = overrideRows.find((row) => row.userId !== null);
|
||||||
|
const orgWideRow = overrideRows.find((row) => row.userId === null);
|
||||||
|
|
||||||
|
return {
|
||||||
|
personal: personalRow ? mapViewRow(personalRow) : null,
|
||||||
|
orgWide: orgWideRow ? mapViewRow(orgWideRow) : null
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function listVisibleLauncherViews(
|
||||||
|
rows: Array<typeof launcherViews.$inferSelect>
|
||||||
|
): LauncherViewRecord[] {
|
||||||
|
return rows.filter((row) => !row.isDefault).map(mapViewRow);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function findDefaultViewOverride(
|
||||||
|
orgId: string,
|
||||||
|
orgWide: boolean,
|
||||||
|
userId: string
|
||||||
|
) {
|
||||||
|
const [existing] = await db
|
||||||
|
.select()
|
||||||
|
.from(launcherViews)
|
||||||
|
.where(
|
||||||
|
and(
|
||||||
|
eq(launcherViews.orgId, orgId),
|
||||||
|
eq(launcherViews.isDefault, true),
|
||||||
|
orgWide
|
||||||
|
? isNull(launcherViews.userId)
|
||||||
|
: eq(launcherViews.userId, userId)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
.limit(1);
|
||||||
|
|
||||||
|
return existing ?? null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function upsertDefaultViewOverride({
|
||||||
|
orgId,
|
||||||
|
userId,
|
||||||
|
orgWide,
|
||||||
|
config
|
||||||
|
}: {
|
||||||
|
orgId: string;
|
||||||
|
userId: string;
|
||||||
|
orgWide: boolean;
|
||||||
|
config: LauncherViewConfig;
|
||||||
|
}) {
|
||||||
|
const now = moment().toISOString();
|
||||||
|
const existing = await findDefaultViewOverride(orgId, orgWide, userId);
|
||||||
|
|
||||||
|
if (existing) {
|
||||||
|
const [updated] = await db
|
||||||
|
.update(launcherViews)
|
||||||
|
.set({
|
||||||
|
config: JSON.stringify(config),
|
||||||
|
updatedAt: now
|
||||||
|
})
|
||||||
|
.where(eq(launcherViews.viewId, existing.viewId))
|
||||||
|
.returning();
|
||||||
|
|
||||||
|
return mapViewRow(updated);
|
||||||
|
}
|
||||||
|
|
||||||
|
const [created] = await db
|
||||||
|
.insert(launcherViews)
|
||||||
|
.values({
|
||||||
|
orgId,
|
||||||
|
userId: orgWide ? null : userId,
|
||||||
|
name: "",
|
||||||
|
isDefault: true,
|
||||||
|
config: JSON.stringify(config),
|
||||||
|
createdAt: now,
|
||||||
|
updatedAt: now
|
||||||
|
})
|
||||||
|
.returning();
|
||||||
|
|
||||||
|
return mapViewRow(created);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function deleteDefaultViewOverride({
|
||||||
|
orgId,
|
||||||
|
userId,
|
||||||
|
orgWide
|
||||||
|
}: {
|
||||||
|
orgId: string;
|
||||||
|
userId: string;
|
||||||
|
orgWide: boolean;
|
||||||
|
}) {
|
||||||
|
const existing = await findDefaultViewOverride(orgId, orgWide, userId);
|
||||||
|
if (!existing) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
await db
|
||||||
|
.delete(launcherViews)
|
||||||
|
.where(eq(launcherViews.viewId, existing.viewId));
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function deleteAllDefaultViewOverrides(
|
||||||
|
orgId: string,
|
||||||
|
userId: string
|
||||||
|
) {
|
||||||
|
await deleteDefaultViewOverride({ orgId, userId, orgWide: false });
|
||||||
|
await deleteDefaultViewOverride({ orgId, userId, orgWide: true });
|
||||||
|
}
|
||||||
@@ -1,9 +1,11 @@
|
|||||||
import { db } from "@server/db";
|
import { createHash } from "node:crypto";
|
||||||
|
import { alias, db } from "@server/db";
|
||||||
import {
|
import {
|
||||||
exitNodes,
|
exitNodes,
|
||||||
labels,
|
labels,
|
||||||
launcherViews,
|
launcherViews,
|
||||||
resourceLabels,
|
resourceLabels,
|
||||||
|
resourcePolicies,
|
||||||
resources,
|
resources,
|
||||||
rolePolicies,
|
rolePolicies,
|
||||||
roleResources,
|
roleResources,
|
||||||
@@ -30,14 +32,17 @@ import {
|
|||||||
inArray,
|
inArray,
|
||||||
isNull,
|
isNull,
|
||||||
like,
|
like,
|
||||||
|
not,
|
||||||
or,
|
or,
|
||||||
sql
|
sql,
|
||||||
|
type SQL
|
||||||
} from "drizzle-orm";
|
} from "drizzle-orm";
|
||||||
import {
|
import {
|
||||||
formatPublicResourceAccess,
|
formatPublicResourceAccess,
|
||||||
formatSiteResourceAccess
|
formatSiteResourceAccess
|
||||||
} from "./formatLauncherAccess";
|
} from "./formatLauncherAccess";
|
||||||
import {
|
import {
|
||||||
|
LAUNCHER_FLAT_GROUP_KEY,
|
||||||
LAUNCHER_NO_SITE_GROUP_KEY,
|
LAUNCHER_NO_SITE_GROUP_KEY,
|
||||||
LAUNCHER_UNLABELED_GROUP_KEY,
|
LAUNCHER_UNLABELED_GROUP_KEY,
|
||||||
type LauncherFilterListQuery,
|
type LauncherFilterListQuery,
|
||||||
@@ -59,6 +64,68 @@ export type AccessibleIds = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const LAUNCHER_ACCESSIBLE_IDS_TTL_SEC = 60;
|
const LAUNCHER_ACCESSIBLE_IDS_TTL_SEC = 60;
|
||||||
|
const LAUNCHER_RESOURCES_RESULT_TTL_SEC = 60;
|
||||||
|
const LAUNCHER_GROUPS_RESULT_TTL_SEC = 60;
|
||||||
|
|
||||||
|
type LauncherResourcesCacheEntry = {
|
||||||
|
items: LauncherResource[];
|
||||||
|
total: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
type LauncherGroupsCacheEntry = {
|
||||||
|
groups: LauncherGroup[];
|
||||||
|
total: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
function launcherListQueryHash(
|
||||||
|
userRoleIds: number[],
|
||||||
|
query: LauncherListQuery,
|
||||||
|
extra?: Record<string, string>
|
||||||
|
) {
|
||||||
|
const payload = JSON.stringify({
|
||||||
|
roles: [...userRoleIds].sort((a, b) => a - b),
|
||||||
|
query: query.query,
|
||||||
|
groupBy: query.groupBy,
|
||||||
|
siteIds: query.siteIds ?? "",
|
||||||
|
labelIds: query.labelIds ?? "",
|
||||||
|
sort_by: query.sort_by,
|
||||||
|
order: query.order,
|
||||||
|
...extra
|
||||||
|
});
|
||||||
|
return createHash("sha256").update(payload).digest("hex").slice(0, 16);
|
||||||
|
}
|
||||||
|
|
||||||
|
function launcherResourcesQueryHash(
|
||||||
|
userRoleIds: number[],
|
||||||
|
query: LauncherListQuery & { groupKey: string }
|
||||||
|
) {
|
||||||
|
return launcherListQueryHash(userRoleIds, query, {
|
||||||
|
groupKey: query.groupKey
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function launcherGroupsQueryHash(
|
||||||
|
userRoleIds: number[],
|
||||||
|
query: LauncherListQuery
|
||||||
|
) {
|
||||||
|
return launcherListQueryHash(userRoleIds, query);
|
||||||
|
}
|
||||||
|
|
||||||
|
function launcherResourcesCacheKey(
|
||||||
|
orgId: string,
|
||||||
|
userId: string,
|
||||||
|
queryHash: string
|
||||||
|
) {
|
||||||
|
return `launcher:results:${orgId}:${userId}:${queryHash}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function launcherGroupsCacheKey(
|
||||||
|
orgId: string,
|
||||||
|
userId: string,
|
||||||
|
queryHash: string
|
||||||
|
) {
|
||||||
|
return `launcher:groups:${orgId}:${userId}:${queryHash}`;
|
||||||
|
}
|
||||||
|
|
||||||
function launcherAccessibleIdsCacheKey(
|
function launcherAccessibleIdsCacheKey(
|
||||||
orgId: string,
|
orgId: string,
|
||||||
@@ -69,6 +136,48 @@ function launcherAccessibleIdsCacheKey(
|
|||||||
return `launcherAccessibleIds:${orgId}:${userId}:${rolesKey}`;
|
return `launcherAccessibleIds:${orgId}:${userId}:${rolesKey}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function fetchOrgNonSsoPublicResourceIds(
|
||||||
|
orgId: string
|
||||||
|
): Promise<number[]> {
|
||||||
|
const sharedPolicy = alias(resourcePolicies, "sharedPolicy");
|
||||||
|
const defaultPolicy = alias(resourcePolicies, "defaultPolicy");
|
||||||
|
|
||||||
|
const effectiveSso = sql<boolean>`
|
||||||
|
COALESCE(
|
||||||
|
CASE
|
||||||
|
WHEN ${sharedPolicy.resourcePolicyId} IS NOT NULL THEN ${sharedPolicy.sso}
|
||||||
|
ELSE ${defaultPolicy.sso}
|
||||||
|
END,
|
||||||
|
false
|
||||||
|
)
|
||||||
|
`;
|
||||||
|
|
||||||
|
const rows = await db
|
||||||
|
.select({ resourceId: resources.resourceId })
|
||||||
|
.from(resources)
|
||||||
|
.leftJoin(
|
||||||
|
sharedPolicy,
|
||||||
|
eq(sharedPolicy.resourcePolicyId, resources.resourcePolicyId)
|
||||||
|
)
|
||||||
|
.leftJoin(
|
||||||
|
defaultPolicy,
|
||||||
|
eq(
|
||||||
|
defaultPolicy.resourcePolicyId,
|
||||||
|
resources.defaultResourcePolicyId
|
||||||
|
)
|
||||||
|
)
|
||||||
|
.where(
|
||||||
|
and(
|
||||||
|
eq(resources.orgId, orgId),
|
||||||
|
eq(resources.enabled, true),
|
||||||
|
eq(resources.blockAccess, false),
|
||||||
|
not(effectiveSso)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
return rows.map((row) => row.resourceId);
|
||||||
|
}
|
||||||
|
|
||||||
async function resolveAccessibleIdsUncached(
|
async function resolveAccessibleIdsUncached(
|
||||||
orgId: string,
|
orgId: string,
|
||||||
userId: string,
|
userId: string,
|
||||||
@@ -80,7 +189,8 @@ async function resolveAccessibleIdsUncached(
|
|||||||
directPolicyResourceResults,
|
directPolicyResourceResults,
|
||||||
rolePolicyResourceResults,
|
rolePolicyResourceResults,
|
||||||
directSiteResourceResults,
|
directSiteResourceResults,
|
||||||
roleSiteResourceResults
|
roleSiteResourceResults,
|
||||||
|
orgNonSsoPublicResources
|
||||||
] = await Promise.all([
|
] = await Promise.all([
|
||||||
db
|
db
|
||||||
.select({ resourceId: userResources.resourceId })
|
.select({ resourceId: userResources.resourceId })
|
||||||
@@ -149,7 +259,8 @@ async function resolveAccessibleIdsUncached(
|
|||||||
})
|
})
|
||||||
.from(roleSiteResources)
|
.from(roleSiteResources)
|
||||||
.where(inArray(roleSiteResources.roleId, userRoleIds))
|
.where(inArray(roleSiteResources.roleId, userRoleIds))
|
||||||
: Promise.resolve([])
|
: Promise.resolve([]),
|
||||||
|
fetchOrgNonSsoPublicResourceIds(orgId)
|
||||||
]);
|
]);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
@@ -158,7 +269,8 @@ async function resolveAccessibleIdsUncached(
|
|||||||
...directResources.map((r) => r.resourceId),
|
...directResources.map((r) => r.resourceId),
|
||||||
...roleResourceResults.map((r) => r.resourceId),
|
...roleResourceResults.map((r) => r.resourceId),
|
||||||
...directPolicyResourceResults.map((r) => r.resourceId),
|
...directPolicyResourceResults.map((r) => r.resourceId),
|
||||||
...rolePolicyResourceResults.map((r) => r.resourceId)
|
...rolePolicyResourceResults.map((r) => r.resourceId),
|
||||||
|
...orgNonSsoPublicResources
|
||||||
])
|
])
|
||||||
),
|
),
|
||||||
siteResourceIds: Array.from(
|
siteResourceIds: Array.from(
|
||||||
@@ -194,6 +306,21 @@ function searchPattern(query: string) {
|
|||||||
return `%${query.trim()}%`;
|
return `%${query.trim()}%`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function combineOrConditions(
|
||||||
|
...conditions: (SQL | undefined)[]
|
||||||
|
): SQL | undefined {
|
||||||
|
const parts = conditions.filter(
|
||||||
|
(condition): condition is SQL => !!condition
|
||||||
|
);
|
||||||
|
if (parts.length === 0) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
if (parts.length === 1) {
|
||||||
|
return parts[0];
|
||||||
|
}
|
||||||
|
return or(...parts);
|
||||||
|
}
|
||||||
|
|
||||||
function buildSearchConditionForPublic(
|
function buildSearchConditionForPublic(
|
||||||
query: string,
|
query: string,
|
||||||
labelsFeatureEnabled: boolean
|
labelsFeatureEnabled: boolean
|
||||||
@@ -205,7 +332,17 @@ function buildSearchConditionForPublic(
|
|||||||
const queryList = [
|
const queryList = [
|
||||||
like(sql`LOWER(${resources.name})`, pattern),
|
like(sql`LOWER(${resources.name})`, pattern),
|
||||||
like(sql`LOWER(${resources.fullDomain})`, pattern),
|
like(sql`LOWER(${resources.fullDomain})`, pattern),
|
||||||
like(sql`LOWER(cast(${resources.proxyPort} as text))`, pattern)
|
like(sql`LOWER(cast(${resources.proxyPort} as text))`, pattern),
|
||||||
|
inArray(
|
||||||
|
resources.resourceId,
|
||||||
|
db
|
||||||
|
.select({ id: resources.resourceId })
|
||||||
|
.from(resources)
|
||||||
|
.leftJoin(targets, eq(targets.resourceId, resources.resourceId))
|
||||||
|
.leftJoin(sites, eq(targets.siteId, sites.siteId))
|
||||||
|
.leftJoin(exitNodes, eq(sites.exitNodeId, exitNodes.exitNodeId))
|
||||||
|
.where(like(sql`LOWER(${exitNodes.endpoint})`, pattern))
|
||||||
|
)
|
||||||
];
|
];
|
||||||
|
|
||||||
if (labelsFeatureEnabled) {
|
if (labelsFeatureEnabled) {
|
||||||
@@ -238,6 +375,11 @@ function buildSearchConditionForSiteResource(
|
|||||||
const queryList = [
|
const queryList = [
|
||||||
like(sql`LOWER(${siteResources.name})`, pattern),
|
like(sql`LOWER(${siteResources.name})`, pattern),
|
||||||
like(sql`LOWER(${siteResources.destination})`, pattern),
|
like(sql`LOWER(${siteResources.destination})`, pattern),
|
||||||
|
like(
|
||||||
|
sql`LOWER(cast(${siteResources.destinationPort} as text))`,
|
||||||
|
pattern
|
||||||
|
),
|
||||||
|
like(sql`LOWER(${siteResources.scheme})`, pattern),
|
||||||
like(sql`LOWER(${siteResources.alias})`, pattern),
|
like(sql`LOWER(${siteResources.alias})`, pattern),
|
||||||
like(sql`LOWER(${siteResources.fullDomain})`, pattern),
|
like(sql`LOWER(${siteResources.fullDomain})`, pattern),
|
||||||
like(sql`LOWER(${siteResources.aliasAddress})`, pattern)
|
like(sql`LOWER(${siteResources.aliasAddress})`, pattern)
|
||||||
@@ -262,6 +404,79 @@ function buildSearchConditionForSiteResource(
|
|||||||
return or(...queryList);
|
return or(...queryList);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function filterPublicResourceIdsByTextSearch(
|
||||||
|
orgId: string,
|
||||||
|
resourceIds: number[],
|
||||||
|
query: string,
|
||||||
|
labelsFeatureEnabled: boolean
|
||||||
|
): Promise<number[]> {
|
||||||
|
if (!query.trim() || resourceIds.length === 0) {
|
||||||
|
return resourceIds;
|
||||||
|
}
|
||||||
|
|
||||||
|
const textMatch = combineOrConditions(
|
||||||
|
buildSearchConditionForPublic(query, labelsFeatureEnabled),
|
||||||
|
buildSiteNameSearchCondition(query)
|
||||||
|
);
|
||||||
|
if (!textMatch) {
|
||||||
|
return resourceIds;
|
||||||
|
}
|
||||||
|
|
||||||
|
const rows = await db
|
||||||
|
.selectDistinct({ resourceId: resources.resourceId })
|
||||||
|
.from(resources)
|
||||||
|
.leftJoin(targets, eq(targets.resourceId, resources.resourceId))
|
||||||
|
.leftJoin(sites, eq(targets.siteId, sites.siteId))
|
||||||
|
.where(
|
||||||
|
and(
|
||||||
|
inArray(resources.resourceId, resourceIds),
|
||||||
|
eq(resources.orgId, orgId),
|
||||||
|
eq(resources.enabled, true),
|
||||||
|
textMatch
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
return rows.map((row) => row.resourceId);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function filterSiteResourceIdsByTextSearch(
|
||||||
|
orgId: string,
|
||||||
|
siteResourceIds: number[],
|
||||||
|
query: string,
|
||||||
|
labelsFeatureEnabled: boolean
|
||||||
|
): Promise<number[]> {
|
||||||
|
if (!query.trim() || siteResourceIds.length === 0) {
|
||||||
|
return siteResourceIds;
|
||||||
|
}
|
||||||
|
|
||||||
|
const textMatch = combineOrConditions(
|
||||||
|
buildSearchConditionForSiteResource(query, labelsFeatureEnabled),
|
||||||
|
buildSiteNameSearchCondition(query)
|
||||||
|
);
|
||||||
|
if (!textMatch) {
|
||||||
|
return siteResourceIds;
|
||||||
|
}
|
||||||
|
|
||||||
|
const rows = await db
|
||||||
|
.selectDistinct({ siteResourceId: siteResources.siteResourceId })
|
||||||
|
.from(siteResources)
|
||||||
|
.leftJoin(
|
||||||
|
siteNetworks,
|
||||||
|
eq(siteResources.networkId, siteNetworks.networkId)
|
||||||
|
)
|
||||||
|
.leftJoin(sites, eq(siteNetworks.siteId, sites.siteId))
|
||||||
|
.where(
|
||||||
|
and(
|
||||||
|
inArray(siteResources.siteResourceId, siteResourceIds),
|
||||||
|
eq(siteResources.orgId, orgId),
|
||||||
|
eq(siteResources.enabled, true),
|
||||||
|
textMatch
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
return rows.map((row) => row.siteResourceId);
|
||||||
|
}
|
||||||
|
|
||||||
async function labelsEnabled(orgId: string): Promise<boolean> {
|
async function labelsEnabled(orgId: string): Promise<boolean> {
|
||||||
return isLicensedOrSubscribed(orgId, tierMatrix.labels);
|
return isLicensedOrSubscribed(orgId, tierMatrix.labels);
|
||||||
}
|
}
|
||||||
@@ -588,9 +803,8 @@ async function listSiteGroups(
|
|||||||
});
|
});
|
||||||
|
|
||||||
const total = groups.length;
|
const total = groups.length;
|
||||||
const offset = (query.page - 1) * query.pageSize;
|
|
||||||
return {
|
return {
|
||||||
groups: groups.slice(offset, offset + query.pageSize),
|
groups,
|
||||||
total
|
total
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
@@ -788,26 +1002,53 @@ async function listLabelGroups(
|
|||||||
});
|
});
|
||||||
|
|
||||||
const total = groups.length;
|
const total = groups.length;
|
||||||
const offset = (query.page - 1) * query.pageSize;
|
|
||||||
return {
|
return {
|
||||||
groups: groups.slice(offset, offset + query.pageSize),
|
groups,
|
||||||
total
|
total
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function listLauncherGroupsForUserUncached(
|
||||||
|
orgId: string,
|
||||||
|
userId: string,
|
||||||
|
userRoleIds: number[],
|
||||||
|
query: LauncherListQuery
|
||||||
|
): Promise<LauncherGroupsCacheEntry> {
|
||||||
|
const accessible = await resolveAccessibleIds(orgId, userId, userRoleIds);
|
||||||
|
|
||||||
|
if (query.groupBy === "label") {
|
||||||
|
return listLabelGroups(orgId, accessible, query);
|
||||||
|
}
|
||||||
|
|
||||||
|
return listSiteGroups(orgId, accessible, query);
|
||||||
|
}
|
||||||
|
|
||||||
export async function listLauncherGroupsForUser(
|
export async function listLauncherGroupsForUser(
|
||||||
orgId: string,
|
orgId: string,
|
||||||
userId: string,
|
userId: string,
|
||||||
userRoleIds: number[],
|
userRoleIds: number[],
|
||||||
query: LauncherListQuery
|
query: LauncherListQuery
|
||||||
): Promise<{ groups: LauncherGroup[]; total: number }> {
|
): Promise<{ groups: LauncherGroup[]; total: number }> {
|
||||||
const accessible = await resolveAccessibleIds(orgId, userId, userRoleIds);
|
const queryHash = launcherGroupsQueryHash(userRoleIds, query);
|
||||||
|
const cacheKey = launcherGroupsCacheKey(orgId, userId, queryHash);
|
||||||
|
const cached = await cache.get<LauncherGroupsCacheEntry>(cacheKey);
|
||||||
|
|
||||||
if (query.groupBy === "label") {
|
let result = cached;
|
||||||
return listLabelGroups(orgId, accessible, query);
|
if (!result) {
|
||||||
|
result = await listLauncherGroupsForUserUncached(
|
||||||
|
orgId,
|
||||||
|
userId,
|
||||||
|
userRoleIds,
|
||||||
|
query
|
||||||
|
);
|
||||||
|
await cache.set(cacheKey, result, LAUNCHER_GROUPS_RESULT_TTL_SEC);
|
||||||
}
|
}
|
||||||
|
|
||||||
return listSiteGroups(orgId, accessible, query);
|
const offset = (query.page - 1) * query.pageSize;
|
||||||
|
return {
|
||||||
|
groups: result.groups.slice(offset, offset + query.pageSize),
|
||||||
|
total: result.total
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
async function mapPublicResources(
|
async function mapPublicResources(
|
||||||
@@ -1018,26 +1259,6 @@ function filterResourcesByLabel(
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function filterResourcesBySearch(
|
|
||||||
items: LauncherResource[],
|
|
||||||
query: string
|
|
||||||
): LauncherResource[] {
|
|
||||||
if (!query.trim()) {
|
|
||||||
return items;
|
|
||||||
}
|
|
||||||
const pattern = query.trim().toLowerCase();
|
|
||||||
return items.filter(
|
|
||||||
(item) =>
|
|
||||||
item.name.toLowerCase().includes(pattern) ||
|
|
||||||
item.accessDisplay.toLowerCase().includes(pattern) ||
|
|
||||||
item.accessCopyValue.toLowerCase().includes(pattern) ||
|
|
||||||
item.labels.some((label) =>
|
|
||||||
label.name.toLowerCase().includes(pattern)
|
|
||||||
) ||
|
|
||||||
item.site?.name.toLowerCase().includes(pattern)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function sortLauncherResources(
|
function sortLauncherResources(
|
||||||
items: LauncherResource[],
|
items: LauncherResource[],
|
||||||
order: "asc" | "desc"
|
order: "asc" | "desc"
|
||||||
@@ -1050,12 +1271,12 @@ function sortLauncherResources(
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function listLauncherResourcesForUser(
|
async function listLauncherResourcesForUserUncached(
|
||||||
orgId: string,
|
orgId: string,
|
||||||
userId: string,
|
userId: string,
|
||||||
userRoleIds: number[],
|
userRoleIds: number[],
|
||||||
query: LauncherListQuery & { groupKey: string }
|
query: LauncherListQuery & { groupKey: string }
|
||||||
): Promise<{ resources: LauncherResource[]; total: number }> {
|
): Promise<LauncherResourcesCacheEntry> {
|
||||||
const accessible = await resolveAccessibleIds(orgId, userId, userRoleIds);
|
const accessible = await resolveAccessibleIds(orgId, userId, userRoleIds);
|
||||||
|
|
||||||
const siteFilterIds = parseIdListParam(query.siteIds);
|
const siteFilterIds = parseIdListParam(query.siteIds);
|
||||||
@@ -1128,6 +1349,27 @@ export async function listLauncherResourcesForUser(
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const labelsFeatureEnabled = await labelsEnabled(orgId);
|
||||||
|
|
||||||
|
if (query.query.trim()) {
|
||||||
|
if (filteredResourceIds.length > 0) {
|
||||||
|
filteredResourceIds = await filterPublicResourceIdsByTextSearch(
|
||||||
|
orgId,
|
||||||
|
filteredResourceIds,
|
||||||
|
query.query,
|
||||||
|
labelsFeatureEnabled
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (filteredSiteResourceIds.length > 0) {
|
||||||
|
filteredSiteResourceIds = await filterSiteResourceIdsByTextSearch(
|
||||||
|
orgId,
|
||||||
|
filteredSiteResourceIds,
|
||||||
|
query.query,
|
||||||
|
labelsFeatureEnabled
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const labelMaps = await fetchLabelsForResources(
|
const labelMaps = await fetchLabelsForResources(
|
||||||
orgId,
|
orgId,
|
||||||
filteredResourceIds,
|
filteredResourceIds,
|
||||||
@@ -1159,21 +1401,48 @@ export async function listLauncherResourcesForUser(
|
|||||||
]);
|
]);
|
||||||
|
|
||||||
let items = [...publicItems, ...siteItems];
|
let items = [...publicItems, ...siteItems];
|
||||||
items = filterResourcesBySearch(items, query.query);
|
|
||||||
|
|
||||||
|
if (query.groupKey !== LAUNCHER_FLAT_GROUP_KEY) {
|
||||||
if (query.groupBy === "label") {
|
if (query.groupBy === "label") {
|
||||||
items = filterResourcesByLabel(items, query.groupKey);
|
items = filterResourcesByLabel(items, query.groupKey);
|
||||||
} else if (query.groupBy === "site") {
|
} else if (query.groupBy === "site") {
|
||||||
items = filterResourcesBySite(items, query.groupKey);
|
items = filterResourcesBySite(items, query.groupKey);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
items = sortLauncherResources(items, query.order);
|
items = sortLauncherResources(items, query.order);
|
||||||
|
|
||||||
const total = items.length;
|
return {
|
||||||
|
items,
|
||||||
|
total: items.length
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function listLauncherResourcesForUser(
|
||||||
|
orgId: string,
|
||||||
|
userId: string,
|
||||||
|
userRoleIds: number[],
|
||||||
|
query: LauncherListQuery & { groupKey: string }
|
||||||
|
): Promise<{ resources: LauncherResource[]; total: number }> {
|
||||||
|
const queryHash = launcherResourcesQueryHash(userRoleIds, query);
|
||||||
|
const cacheKey = launcherResourcesCacheKey(orgId, userId, queryHash);
|
||||||
|
const cached = await cache.get<LauncherResourcesCacheEntry>(cacheKey);
|
||||||
|
|
||||||
|
let result = cached;
|
||||||
|
if (!result) {
|
||||||
|
result = await listLauncherResourcesForUserUncached(
|
||||||
|
orgId,
|
||||||
|
userId,
|
||||||
|
userRoleIds,
|
||||||
|
query
|
||||||
|
);
|
||||||
|
await cache.set(cacheKey, result, LAUNCHER_RESOURCES_RESULT_TTL_SEC);
|
||||||
|
}
|
||||||
|
|
||||||
const offset = (query.page - 1) * query.pageSize;
|
const offset = (query.page - 1) * query.pageSize;
|
||||||
return {
|
return {
|
||||||
resources: items.slice(offset, offset + query.pageSize),
|
resources: result.items.slice(offset, offset + query.pageSize),
|
||||||
total
|
total: result.total
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,133 @@
|
|||||||
|
import { regionalCache as cache } from "#dynamic/lib/cache";
|
||||||
|
import {
|
||||||
|
listLauncherGroupsForUser,
|
||||||
|
resolveAccessibleIds
|
||||||
|
} from "./launcherResourceAccess";
|
||||||
|
import {
|
||||||
|
parseIdListParam,
|
||||||
|
type LauncherScaleInfo,
|
||||||
|
type LauncherScaleQuery
|
||||||
|
} from "./types";
|
||||||
|
|
||||||
|
export const LAUNCHER_FULL_MAX_RESOURCES = 2000;
|
||||||
|
export const LAUNCHER_FULL_MAX_SITE_GROUPS = 200;
|
||||||
|
export const LAUNCHER_FULL_MAX_LABEL_GROUPS = 100;
|
||||||
|
export const LAUNCHER_FILTERED_SITE_GROUPING_MAX = 20;
|
||||||
|
|
||||||
|
const LAUNCHER_SCALE_COUNTS_TTL_SEC = 60;
|
||||||
|
|
||||||
|
type LauncherScaleCountsCacheEntry = {
|
||||||
|
resourceCount: number;
|
||||||
|
siteGroupCount: number;
|
||||||
|
labelGroupCount: number;
|
||||||
|
mode: LauncherScaleInfo["mode"];
|
||||||
|
};
|
||||||
|
|
||||||
|
function launcherScaleCountsCacheKey(
|
||||||
|
orgId: string,
|
||||||
|
userId: string,
|
||||||
|
roleIds: number[]
|
||||||
|
) {
|
||||||
|
const rolesKey = [...roleIds].sort((a, b) => a - b).join(",");
|
||||||
|
return `launcher:scale:counts:${orgId}:${userId}:${rolesKey}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildScaleCapabilities(
|
||||||
|
counts: LauncherScaleCountsCacheEntry,
|
||||||
|
query: LauncherScaleQuery
|
||||||
|
): LauncherScaleInfo["capabilities"] {
|
||||||
|
const siteFilterIds = parseIdListParam(query.siteIds);
|
||||||
|
const labelFilterIds = parseIdListParam(query.labelIds);
|
||||||
|
|
||||||
|
return {
|
||||||
|
allowSiteGrouping:
|
||||||
|
counts.siteGroupCount <= LAUNCHER_FULL_MAX_SITE_GROUPS ||
|
||||||
|
(siteFilterIds.length > 0 &&
|
||||||
|
siteFilterIds.length <= LAUNCHER_FILTERED_SITE_GROUPING_MAX),
|
||||||
|
allowLabelGrouping:
|
||||||
|
counts.labelGroupCount <= LAUNCHER_FULL_MAX_LABEL_GROUPS ||
|
||||||
|
(labelFilterIds.length > 0 &&
|
||||||
|
labelFilterIds.length <= LAUNCHER_FILTERED_SITE_GROUPING_MAX),
|
||||||
|
requireSearchOrFilter:
|
||||||
|
counts.mode === "compact" &&
|
||||||
|
counts.resourceCount > LAUNCHER_FULL_MAX_RESOURCES
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getLauncherScaleCountsForUser(
|
||||||
|
orgId: string,
|
||||||
|
userId: string,
|
||||||
|
userRoleIds: number[]
|
||||||
|
): Promise<LauncherScaleCountsCacheEntry> {
|
||||||
|
const cacheKey = launcherScaleCountsCacheKey(orgId, userId, userRoleIds);
|
||||||
|
const cached = await cache.get<LauncherScaleCountsCacheEntry>(cacheKey);
|
||||||
|
if (cached) {
|
||||||
|
return cached;
|
||||||
|
}
|
||||||
|
|
||||||
|
const accessible = await resolveAccessibleIds(orgId, userId, userRoleIds);
|
||||||
|
const resourceCount =
|
||||||
|
accessible.resourceIds.length + accessible.siteResourceIds.length;
|
||||||
|
|
||||||
|
const baselineQuery = {
|
||||||
|
query: "",
|
||||||
|
groupBy: "site" as const,
|
||||||
|
siteIds: undefined,
|
||||||
|
labelIds: undefined,
|
||||||
|
sort_by: "name" as const,
|
||||||
|
order: "asc" as const,
|
||||||
|
page: 1,
|
||||||
|
pageSize: 1
|
||||||
|
};
|
||||||
|
|
||||||
|
const [{ total: siteGroupCount }, { total: labelGroupCount }] =
|
||||||
|
await Promise.all([
|
||||||
|
listLauncherGroupsForUser(
|
||||||
|
orgId,
|
||||||
|
userId,
|
||||||
|
userRoleIds,
|
||||||
|
baselineQuery
|
||||||
|
),
|
||||||
|
listLauncherGroupsForUser(orgId, userId, userRoleIds, {
|
||||||
|
...baselineQuery,
|
||||||
|
groupBy: "label"
|
||||||
|
})
|
||||||
|
]);
|
||||||
|
|
||||||
|
const mode =
|
||||||
|
resourceCount <= LAUNCHER_FULL_MAX_RESOURCES &&
|
||||||
|
siteGroupCount <= LAUNCHER_FULL_MAX_SITE_GROUPS
|
||||||
|
? "full"
|
||||||
|
: "compact";
|
||||||
|
|
||||||
|
const result: LauncherScaleCountsCacheEntry = {
|
||||||
|
resourceCount,
|
||||||
|
siteGroupCount,
|
||||||
|
labelGroupCount,
|
||||||
|
mode
|
||||||
|
};
|
||||||
|
|
||||||
|
await cache.set(cacheKey, result, LAUNCHER_SCALE_COUNTS_TTL_SEC);
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getLauncherScaleForUser(
|
||||||
|
orgId: string,
|
||||||
|
userId: string,
|
||||||
|
userRoleIds: number[],
|
||||||
|
query: LauncherScaleQuery
|
||||||
|
): Promise<LauncherScaleInfo> {
|
||||||
|
const counts = await getLauncherScaleCountsForUser(
|
||||||
|
orgId,
|
||||||
|
userId,
|
||||||
|
userRoleIds
|
||||||
|
);
|
||||||
|
|
||||||
|
return {
|
||||||
|
mode: counts.mode,
|
||||||
|
resourceCount: counts.resourceCount,
|
||||||
|
siteGroupCount: counts.siteGroupCount,
|
||||||
|
labelGroupCount: counts.labelGroupCount,
|
||||||
|
capabilities: buildScaleCapabilities(counts, query)
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -0,0 +1,60 @@
|
|||||||
|
import { response } from "@server/lib/response";
|
||||||
|
import HttpCode from "@server/types/HttpCode";
|
||||||
|
import { NextFunction, Request, Response } from "express";
|
||||||
|
import createHttpError from "http-errors";
|
||||||
|
import { fromZodError } from "zod-validation-error";
|
||||||
|
import { getLauncherScaleForUser } from "./launcherScale";
|
||||||
|
import { launcherScaleQuerySchema } from "./types";
|
||||||
|
|
||||||
|
export async function listLauncherScale(
|
||||||
|
req: Request,
|
||||||
|
res: Response,
|
||||||
|
next: NextFunction
|
||||||
|
): Promise<any> {
|
||||||
|
try {
|
||||||
|
const orgId = req.userOrgId;
|
||||||
|
const userId = req.user!.userId;
|
||||||
|
|
||||||
|
if (!orgId) {
|
||||||
|
return next(
|
||||||
|
createHttpError(HttpCode.BAD_REQUEST, "Invalid organization ID")
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const parsed = launcherScaleQuerySchema.safeParse(req.query);
|
||||||
|
if (!parsed.success) {
|
||||||
|
return next(
|
||||||
|
createHttpError(
|
||||||
|
HttpCode.BAD_REQUEST,
|
||||||
|
fromZodError(parsed.error)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const scale = await getLauncherScaleForUser(
|
||||||
|
orgId,
|
||||||
|
userId,
|
||||||
|
req.userOrgRoleIds ?? [],
|
||||||
|
parsed.data
|
||||||
|
);
|
||||||
|
|
||||||
|
return response(res, {
|
||||||
|
data: { scale },
|
||||||
|
success: true,
|
||||||
|
error: false,
|
||||||
|
message: "Launcher scale retrieved successfully",
|
||||||
|
status: HttpCode.OK
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
if (createHttpError.isHttpError(error)) {
|
||||||
|
return next(error);
|
||||||
|
}
|
||||||
|
console.error("Error listing launcher scale:", error);
|
||||||
|
return next(
|
||||||
|
createHttpError(
|
||||||
|
HttpCode.INTERNAL_SERVER_ERROR,
|
||||||
|
"Internal server error"
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -4,22 +4,10 @@ import HttpCode from "@server/types/HttpCode";
|
|||||||
import { and, eq, isNull, or } from "drizzle-orm";
|
import { and, eq, isNull, or } from "drizzle-orm";
|
||||||
import { NextFunction, Request, Response } from "express";
|
import { NextFunction, Request, Response } from "express";
|
||||||
import createHttpError from "http-errors";
|
import createHttpError from "http-errors";
|
||||||
import { launcherViewConfigSchema, type LauncherViewRecord } from "./types";
|
import {
|
||||||
|
extractDefaultViewOverrides,
|
||||||
function mapViewRow(
|
listVisibleLauncherViews
|
||||||
row: typeof launcherViews.$inferSelect
|
} from "./launcherDefaultView";
|
||||||
): LauncherViewRecord {
|
|
||||||
return {
|
|
||||||
viewId: row.viewId,
|
|
||||||
orgId: row.orgId,
|
|
||||||
userId: row.userId,
|
|
||||||
name: row.name,
|
|
||||||
config: launcherViewConfigSchema.parse(JSON.parse(row.config)),
|
|
||||||
createdAt: row.createdAt,
|
|
||||||
updatedAt: row.updatedAt,
|
|
||||||
isOrgWide: row.userId == null
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function listLauncherViews(
|
export async function listLauncherViews(
|
||||||
req: Request,
|
req: Request,
|
||||||
@@ -51,7 +39,8 @@ export async function listLauncherViews(
|
|||||||
|
|
||||||
return response(res, {
|
return response(res, {
|
||||||
data: {
|
data: {
|
||||||
views: rows.map(mapViewRow)
|
views: listVisibleLauncherViews(rows),
|
||||||
|
defaultViewOverrides: extractDefaultViewOverrides(rows)
|
||||||
},
|
},
|
||||||
success: true,
|
success: true,
|
||||||
error: false,
|
error: false,
|
||||||
|
|||||||
@@ -2,9 +2,10 @@ import { z } from "zod";
|
|||||||
|
|
||||||
export const LAUNCHER_UNLABELED_GROUP_KEY = "unlabeled";
|
export const LAUNCHER_UNLABELED_GROUP_KEY = "unlabeled";
|
||||||
export const LAUNCHER_NO_SITE_GROUP_KEY = "no-site";
|
export const LAUNCHER_NO_SITE_GROUP_KEY = "no-site";
|
||||||
|
export const LAUNCHER_FLAT_GROUP_KEY = "__all__";
|
||||||
|
|
||||||
export const launcherViewConfigSchema = z.object({
|
export const launcherViewConfigSchema = z.object({
|
||||||
groupBy: z.enum(["site", "label"]).default("site"),
|
groupBy: z.enum(["site", "label", "none"]).default("site"),
|
||||||
layout: z.enum(["grid", "list"]).default("grid"),
|
layout: z.enum(["grid", "list"]).default("grid"),
|
||||||
sortBy: z.literal("name").default("name"),
|
sortBy: z.literal("name").default("name"),
|
||||||
order: z.enum(["asc", "desc"]).default("asc"),
|
order: z.enum(["asc", "desc"]).default("asc"),
|
||||||
@@ -88,10 +89,31 @@ export type LauncherViewRecord = {
|
|||||||
createdAt: string;
|
createdAt: string;
|
||||||
updatedAt: string;
|
updatedAt: string;
|
||||||
isOrgWide: boolean;
|
isOrgWide: boolean;
|
||||||
|
isDefault: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export type LauncherDefaultViewOverrides = {
|
||||||
|
personal: LauncherViewRecord | null;
|
||||||
|
orgWide: LauncherViewRecord | null;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function getEffectiveDefaultLauncherConfig(
|
||||||
|
overrides: LauncherDefaultViewOverrides
|
||||||
|
): LauncherViewConfig {
|
||||||
|
if (overrides.personal) {
|
||||||
|
return overrides.personal.config;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (overrides.orgWide) {
|
||||||
|
return overrides.orgWide.config;
|
||||||
|
}
|
||||||
|
|
||||||
|
return defaultLauncherViewConfig;
|
||||||
|
}
|
||||||
|
|
||||||
export type ListLauncherViewsResponse = {
|
export type ListLauncherViewsResponse = {
|
||||||
views: LauncherViewRecord[];
|
views: LauncherViewRecord[];
|
||||||
|
defaultViewOverrides: LauncherDefaultViewOverrides;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const launcherFilterListQuerySchema = z.strictObject({
|
export const launcherFilterListQuerySchema = z.strictObject({
|
||||||
@@ -100,8 +122,8 @@ export const launcherFilterListQuerySchema = z.strictObject({
|
|||||||
.int()
|
.int()
|
||||||
.positive()
|
.positive()
|
||||||
.optional()
|
.optional()
|
||||||
.catch(500)
|
.catch(20)
|
||||||
.default(500),
|
.default(20),
|
||||||
page: z.coerce.number().int().min(1).optional().catch(1).default(1),
|
page: z.coerce.number().int().min(1).optional().catch(1).default(1),
|
||||||
query: z.string().optional().default("")
|
query: z.string().optional().default("")
|
||||||
});
|
});
|
||||||
@@ -138,7 +160,7 @@ export const launcherListQuerySchema = z.strictObject({
|
|||||||
.default(20),
|
.default(20),
|
||||||
page: z.coerce.number().int().min(1).optional().catch(1).default(1),
|
page: z.coerce.number().int().min(1).optional().catch(1).default(1),
|
||||||
query: z.string().optional().default(""),
|
query: z.string().optional().default(""),
|
||||||
groupBy: z.enum(["site", "label"]).optional().default("site"),
|
groupBy: z.enum(["site", "label", "none"]).optional().default("site"),
|
||||||
groupKey: z.string().optional(),
|
groupKey: z.string().optional(),
|
||||||
siteIds: z.string().optional(),
|
siteIds: z.string().optional(),
|
||||||
labelIds: z.string().optional(),
|
labelIds: z.string().optional(),
|
||||||
@@ -163,3 +185,32 @@ export const DEFAULT_LAUNCHER_VIEW_ID = "default" as const;
|
|||||||
export type LauncherViewSelection =
|
export type LauncherViewSelection =
|
||||||
| { type: "default" }
|
| { type: "default" }
|
||||||
| { type: "saved"; viewId: number };
|
| { type: "saved"; viewId: number };
|
||||||
|
|
||||||
|
export type LauncherScaleCapabilities = {
|
||||||
|
allowSiteGrouping: boolean;
|
||||||
|
allowLabelGrouping: boolean;
|
||||||
|
requireSearchOrFilter: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type LauncherScaleInfo = {
|
||||||
|
mode: "full" | "compact";
|
||||||
|
resourceCount: number;
|
||||||
|
siteGroupCount: number;
|
||||||
|
labelGroupCount: number;
|
||||||
|
capabilities: LauncherScaleCapabilities;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type ListLauncherScaleResponse = {
|
||||||
|
scale: LauncherScaleInfo;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const launcherScaleQuerySchema = z.strictObject({
|
||||||
|
query: z.string().optional().default(""),
|
||||||
|
groupBy: z.enum(["site", "label", "none"]).optional().default("site"),
|
||||||
|
siteIds: z.string().optional(),
|
||||||
|
labelIds: z.string().optional(),
|
||||||
|
sort_by: z.literal("name").optional().default("name"),
|
||||||
|
order: z.enum(["asc", "desc"]).optional().default("asc")
|
||||||
|
});
|
||||||
|
|
||||||
|
export type LauncherScaleQuery = z.infer<typeof launcherScaleQuerySchema>;
|
||||||
|
|||||||
@@ -66,6 +66,15 @@ export async function updateLauncherView(
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (existing.isDefault) {
|
||||||
|
return next(
|
||||||
|
createHttpError(
|
||||||
|
HttpCode.BAD_REQUEST,
|
||||||
|
"Use the default view save endpoint for this view"
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
const isPersonalView = existing.userId === userId;
|
const isPersonalView = existing.userId === userId;
|
||||||
const isOrgWideView = existing.userId == null;
|
const isOrgWideView = existing.userId == null;
|
||||||
const canManageOrgWide = await checkUserActionPermission(
|
const canManageOrgWide = await checkUserActionPermission(
|
||||||
@@ -135,7 +144,8 @@ export async function updateLauncherView(
|
|||||||
),
|
),
|
||||||
createdAt: updated.createdAt,
|
createdAt: updated.createdAt,
|
||||||
updatedAt: updated.updatedAt,
|
updatedAt: updated.updatedAt,
|
||||||
isOrgWide: updated.userId == null
|
isOrgWide: updated.userId == null,
|
||||||
|
isDefault: updated.isDefault
|
||||||
},
|
},
|
||||||
success: true,
|
success: true,
|
||||||
error: false,
|
error: false,
|
||||||
|
|||||||
@@ -0,0 +1,82 @@
|
|||||||
|
import { response } from "@server/lib/response";
|
||||||
|
import HttpCode from "@server/types/HttpCode";
|
||||||
|
import { NextFunction, Request, Response } from "express";
|
||||||
|
import createHttpError from "http-errors";
|
||||||
|
import { fromZodError } from "zod-validation-error";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { ActionsEnum, checkUserActionPermission } from "@server/auth/actions";
|
||||||
|
import { upsertDefaultViewOverride } from "./launcherDefaultView";
|
||||||
|
import { launcherViewConfigSchema } from "./types";
|
||||||
|
|
||||||
|
const upsertLauncherDefaultViewBodySchema = z.strictObject({
|
||||||
|
config: launcherViewConfigSchema,
|
||||||
|
orgWide: z.boolean().optional().default(false)
|
||||||
|
});
|
||||||
|
|
||||||
|
export async function upsertLauncherDefaultView(
|
||||||
|
req: Request,
|
||||||
|
res: Response,
|
||||||
|
next: NextFunction
|
||||||
|
): Promise<any> {
|
||||||
|
try {
|
||||||
|
const orgId = req.userOrgId;
|
||||||
|
const userId = req.user!.userId;
|
||||||
|
|
||||||
|
if (!orgId) {
|
||||||
|
return next(
|
||||||
|
createHttpError(HttpCode.BAD_REQUEST, "Invalid organization ID")
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const parsed = upsertLauncherDefaultViewBodySchema.safeParse(req.body);
|
||||||
|
if (!parsed.success) {
|
||||||
|
return next(
|
||||||
|
createHttpError(
|
||||||
|
HttpCode.BAD_REQUEST,
|
||||||
|
fromZodError(parsed.error)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (parsed.data.orgWide) {
|
||||||
|
const canManageOrgWide = await checkUserActionPermission(
|
||||||
|
ActionsEnum.createOrgWideLauncherView,
|
||||||
|
req
|
||||||
|
);
|
||||||
|
if (!canManageOrgWide) {
|
||||||
|
return next(
|
||||||
|
createHttpError(
|
||||||
|
HttpCode.FORBIDDEN,
|
||||||
|
"User does not have permission perform this action"
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const view = await upsertDefaultViewOverride({
|
||||||
|
orgId,
|
||||||
|
userId,
|
||||||
|
orgWide: parsed.data.orgWide,
|
||||||
|
config: parsed.data.config
|
||||||
|
});
|
||||||
|
|
||||||
|
return response(res, {
|
||||||
|
data: view,
|
||||||
|
success: true,
|
||||||
|
error: false,
|
||||||
|
message: "Launcher default view saved successfully",
|
||||||
|
status: HttpCode.OK
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
if (createHttpError.isHttpError(error)) {
|
||||||
|
return next(error);
|
||||||
|
}
|
||||||
|
console.error("Error saving launcher default view:", error);
|
||||||
|
return next(
|
||||||
|
createHttpError(
|
||||||
|
HttpCode.INTERNAL_SERVER_ERROR,
|
||||||
|
"Internal server error"
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -616,8 +616,8 @@ export async function listResources(
|
|||||||
and(
|
and(
|
||||||
inArray(resources.mode, browserGatewayModes),
|
inArray(resources.mode, browserGatewayModes),
|
||||||
or(
|
or(
|
||||||
eq(effectiveSso, true),
|
effectiveSso,
|
||||||
eq(effectiveWhitelist, true),
|
effectiveWhitelist,
|
||||||
not(isNull(effectiveHeaderAuthId)),
|
not(isNull(effectiveHeaderAuthId)),
|
||||||
not(isNull(effectivePincodeId)),
|
not(isNull(effectivePincodeId)),
|
||||||
not(isNull(effectivePasswordId))
|
not(isNull(effectivePasswordId))
|
||||||
@@ -629,8 +629,8 @@ export async function listResources(
|
|||||||
conditions.push(
|
conditions.push(
|
||||||
and(
|
and(
|
||||||
inArray(resources.mode, browserGatewayModes),
|
inArray(resources.mode, browserGatewayModes),
|
||||||
not(eq(effectiveSso, true)),
|
not(effectiveSso),
|
||||||
not(eq(effectiveWhitelist, true)),
|
not(effectiveWhitelist),
|
||||||
isNull(effectiveHeaderAuthId),
|
isNull(effectiveHeaderAuthId),
|
||||||
isNull(effectivePincodeId),
|
isNull(effectivePincodeId),
|
||||||
isNull(effectivePasswordId)
|
isNull(effectivePasswordId)
|
||||||
|
|||||||
@@ -55,7 +55,7 @@ const createSiteResourceSchema = z
|
|||||||
siteIds: z.array(z.int()).optional(),
|
siteIds: z.array(z.int()).optional(),
|
||||||
siteId: z.number().int().positive().optional(), // DEPRECATED: for backward compatibility, we will convert this to siteIds array if provided
|
siteId: z.number().int().positive().optional(), // DEPRECATED: for backward compatibility, we will convert this to siteIds array if provided
|
||||||
destinationPort: z.int().positive().optional(),
|
destinationPort: z.int().positive().optional(),
|
||||||
destination: z.string().min(1).optional(),
|
destination: z.string().min(1).nullish(),
|
||||||
enabled: z.boolean().default(true),
|
enabled: z.boolean().default(true),
|
||||||
alias: z
|
alias: z
|
||||||
.string()
|
.string()
|
||||||
|
|||||||
@@ -54,7 +54,7 @@ const updateSiteResourceSchema = z
|
|||||||
ssl: z.boolean().optional(),
|
ssl: z.boolean().optional(),
|
||||||
scheme: z.enum(["http", "https"]).nullish(),
|
scheme: z.enum(["http", "https"]).nullish(),
|
||||||
destinationPort: z.int().positive().nullish(),
|
destinationPort: z.int().positive().nullish(),
|
||||||
destination: z.string().min(1).optional(),
|
destination: z.string().min(1).nullish(),
|
||||||
enabled: z.boolean().optional(),
|
enabled: z.boolean().optional(),
|
||||||
alias: z
|
alias: z
|
||||||
.string()
|
.string()
|
||||||
|
|||||||
@@ -82,9 +82,11 @@ export default async function OrgPage(props: OrgPageProps) {
|
|||||||
orgId={orgId}
|
orgId={orgId}
|
||||||
isAdmin={isAdminOrOwner}
|
isAdmin={isAdminOrOwner}
|
||||||
views={launcherData.views}
|
views={launcherData.views}
|
||||||
|
defaultViewOverrides={launcherData.defaultViewOverrides}
|
||||||
activeViewId={launcherData.activeViewId}
|
activeViewId={launcherData.activeViewId}
|
||||||
config={launcherData.config}
|
config={launcherData.config}
|
||||||
savedConfig={launcherData.savedConfig}
|
savedConfig={launcherData.savedConfig}
|
||||||
|
scale={launcherData.scale}
|
||||||
groups={launcherData.groups}
|
groups={launcherData.groups}
|
||||||
groupsPagination={launcherData.groupsPagination}
|
groupsPagination={launcherData.groupsPagination}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -15,6 +15,7 @@ import { ColumnFilterButton } from "@app/components/ColumnFilterButton";
|
|||||||
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
|
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
|
||||||
import { build } from "@server/build";
|
import { build } from "@server/build";
|
||||||
import { getSevenDaysAgo } from "@app/lib/getSevenDaysAgo";
|
import { getSevenDaysAgo } from "@app/lib/getSevenDaysAgo";
|
||||||
|
import { getPrivateResourceSettingsHref } from "@app/lib/launcherResourceAdminHref";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import { useStoredPageSize } from "@app/hooks/useStoredPageSize";
|
import { useStoredPageSize } from "@app/hooks/useStoredPageSize";
|
||||||
import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
|
import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
|
||||||
@@ -343,7 +344,10 @@ export default function GeneralPage() {
|
|||||||
<Link
|
<Link
|
||||||
href={
|
href={
|
||||||
row.original.siteResourceId != null
|
row.original.siteResourceId != null
|
||||||
? `/${row.original.orgId}/settings/resources/private?query=${row.original.resourceNiceId}`
|
? getPrivateResourceSettingsHref(
|
||||||
|
row.original.orgId,
|
||||||
|
row.original.resourceNiceId
|
||||||
|
)
|
||||||
: `/${row.original.orgId}/settings/resources/public/${row.original.resourceNiceId}`
|
: `/${row.original.orgId}/settings/resources/public/${row.original.resourceNiceId}`
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ import { useStoredPageSize } from "@app/hooks/useStoredPageSize";
|
|||||||
import { toast } from "@app/hooks/useToast";
|
import { toast } from "@app/hooks/useToast";
|
||||||
import { createApiClient } from "@app/lib/api";
|
import { createApiClient } from "@app/lib/api";
|
||||||
import { getSevenDaysAgo } from "@app/lib/getSevenDaysAgo";
|
import { getSevenDaysAgo } from "@app/lib/getSevenDaysAgo";
|
||||||
|
import { getPrivateResourceSettingsHref } from "@app/lib/launcherResourceAdminHref";
|
||||||
import { logQueries } from "@app/lib/queries";
|
import { logQueries } from "@app/lib/queries";
|
||||||
import { build } from "@server/build";
|
import { build } from "@server/build";
|
||||||
import { tierMatrix } from "@server/lib/billing/tierMatrix";
|
import { tierMatrix } from "@server/lib/billing/tierMatrix";
|
||||||
@@ -323,7 +324,10 @@ export default function ConnectionLogsPage() {
|
|||||||
if (row.original.resourceName && row.original.resourceNiceId) {
|
if (row.original.resourceName && row.original.resourceNiceId) {
|
||||||
return (
|
return (
|
||||||
<Link
|
<Link
|
||||||
href={`/${row.original.orgId}/settings/resources/private/?query=${row.original.resourceNiceId}`}
|
href={getPrivateResourceSettingsHref(
|
||||||
|
row.original.orgId,
|
||||||
|
row.original.resourceNiceId
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
<Button variant="outline" size="sm">
|
<Button variant="outline" size="sm">
|
||||||
{row.original.resourceName}
|
{row.original.resourceName}
|
||||||
|
|||||||
@@ -9,6 +9,7 @@ import { toast } from "@app/hooks/useToast";
|
|||||||
import { createApiClient } from "@app/lib/api";
|
import { createApiClient } from "@app/lib/api";
|
||||||
import { useTranslations } from "next-intl";
|
import { useTranslations } from "next-intl";
|
||||||
import { getSevenDaysAgo } from "@app/lib/getSevenDaysAgo";
|
import { getSevenDaysAgo } from "@app/lib/getSevenDaysAgo";
|
||||||
|
import { getPrivateResourceSettingsHref } from "@app/lib/launcherResourceAdminHref";
|
||||||
import { logQueries } from "@app/lib/queries";
|
import { logQueries } from "@app/lib/queries";
|
||||||
import { ColumnDef } from "@tanstack/react-table";
|
import { ColumnDef } from "@tanstack/react-table";
|
||||||
import { useQuery } from "@tanstack/react-query";
|
import { useQuery } from "@tanstack/react-query";
|
||||||
@@ -395,7 +396,10 @@ export default function GeneralPage() {
|
|||||||
<Link
|
<Link
|
||||||
href={
|
href={
|
||||||
row.original.reason == 108 // for now the client will only have reason 108 so we know where to go
|
row.original.reason == 108 // for now the client will only have reason 108 so we know where to go
|
||||||
? `/${row.original.orgId}/settings/resources/private?query=${row.original.resourceNiceId}`
|
? getPrivateResourceSettingsHref(
|
||||||
|
row.original.orgId,
|
||||||
|
row.original.resourceNiceId
|
||||||
|
)
|
||||||
: `/${row.original.orgId}/settings/resources/public/${row.original.resourceNiceId}`
|
: `/${row.original.orgId}/settings/resources/public/${row.original.resourceNiceId}`
|
||||||
}
|
}
|
||||||
onClick={(e) => e.stopPropagation()}
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
|||||||
@@ -0,0 +1,112 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { MachinesSelector } from "@app/components/machines-selector";
|
||||||
|
import { RolesSelector } from "@app/components/roles-selector";
|
||||||
|
import { UsersSelector } from "@app/components/users-selector";
|
||||||
|
import { SettingsFormCell, SettingsFormGrid } from "@app/components/Settings";
|
||||||
|
import type { Tag } from "@app/components/tags/tag-input";
|
||||||
|
import {
|
||||||
|
FormControl,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage
|
||||||
|
} from "@app/components/ui/form";
|
||||||
|
import type { PrivateResourceClient } from "@app/lib/privateResourceForm";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
import type { Control } from "react-hook-form";
|
||||||
|
|
||||||
|
type AccessFormValues = {
|
||||||
|
roles?: Tag[];
|
||||||
|
users?: Tag[];
|
||||||
|
clients?: PrivateResourceClient[];
|
||||||
|
};
|
||||||
|
|
||||||
|
type PrivateResourceAccessFieldsProps = {
|
||||||
|
control: Control<AccessFormValues>;
|
||||||
|
orgId: string;
|
||||||
|
loading?: boolean;
|
||||||
|
hasMachineClients?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function PrivateResourceAccessFields({
|
||||||
|
control,
|
||||||
|
orgId,
|
||||||
|
loading = false,
|
||||||
|
hasMachineClients = false
|
||||||
|
}: PrivateResourceAccessFieldsProps) {
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="text-sm text-muted-foreground">{t("loading")}</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SettingsFormGrid>
|
||||||
|
<SettingsFormCell span="full">
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="roles"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex flex-col items-start">
|
||||||
|
<FormLabel>{t("roles")}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<RolesSelector
|
||||||
|
selectedRoles={field.value ?? []}
|
||||||
|
orgId={orgId}
|
||||||
|
restrictAdminRole
|
||||||
|
onSelectRoles={(newRoles) => {
|
||||||
|
field.onChange(newRoles);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</SettingsFormCell>
|
||||||
|
<SettingsFormCell span="full">
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="users"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex flex-col items-start">
|
||||||
|
<FormLabel>{t("users")}</FormLabel>
|
||||||
|
<UsersSelector
|
||||||
|
selectedUsers={field.value ?? []}
|
||||||
|
orgId={orgId}
|
||||||
|
onSelectUsers={(newUsers) => {
|
||||||
|
field.onChange(newUsers);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</SettingsFormCell>
|
||||||
|
{hasMachineClients && (
|
||||||
|
<SettingsFormCell span="full">
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="clients"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex flex-col items-start">
|
||||||
|
<FormLabel>{t("machineClients")}</FormLabel>
|
||||||
|
<MachinesSelector
|
||||||
|
selectedMachines={field.value ?? []}
|
||||||
|
orgId={orgId}
|
||||||
|
onSelectMachines={(machines) => {
|
||||||
|
field.onChange(machines);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</SettingsFormCell>
|
||||||
|
)}
|
||||||
|
</SettingsFormGrid>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,175 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { SettingsFormCell, SettingsFormGrid } from "@app/components/Settings";
|
||||||
|
import {
|
||||||
|
FormControl,
|
||||||
|
FormDescription,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage
|
||||||
|
} from "@app/components/ui/form";
|
||||||
|
import { Input } from "@app/components/ui/input";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
import type { Control, UseFormWatch } from "react-hook-form";
|
||||||
|
|
||||||
|
type PrivateResourceAliasFieldProps = {
|
||||||
|
control: Control<any>;
|
||||||
|
watch: UseFormWatch<any>;
|
||||||
|
labelPrefix?: "create" | "edit";
|
||||||
|
disabled?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function PrivateResourceAliasField({
|
||||||
|
control,
|
||||||
|
watch,
|
||||||
|
labelPrefix = "edit",
|
||||||
|
disabled = false
|
||||||
|
}: PrivateResourceAliasFieldProps) {
|
||||||
|
const t = useTranslations();
|
||||||
|
const aliasLabelKey =
|
||||||
|
labelPrefix === "create"
|
||||||
|
? "createInternalResourceDialogAlias"
|
||||||
|
: "editInternalResourceDialogAlias";
|
||||||
|
const aliasDescriptionKey =
|
||||||
|
labelPrefix === "create"
|
||||||
|
? "createInternalResourceDialogAliasDescription"
|
||||||
|
: "editInternalResourceDialogAliasDescription";
|
||||||
|
|
||||||
|
const aliasValue = watch("alias");
|
||||||
|
const aliasEndsWithLocal =
|
||||||
|
typeof aliasValue === "string" &&
|
||||||
|
aliasValue.trim().toLowerCase().endsWith(".local");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="alias"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t(aliasLabelKey)}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
{...field}
|
||||||
|
className="w-full"
|
||||||
|
value={field.value ?? ""}
|
||||||
|
disabled={disabled}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
{aliasEndsWithLocal && (
|
||||||
|
<p className="text-xs text-amber-700/80 mt-1">
|
||||||
|
{t("internalResourceAliasLocalWarning")}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
<FormMessage />
|
||||||
|
<FormDescription>{t(aliasDescriptionKey)}</FormDescription>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
type PrivateResourceHostDestinationFieldsProps = {
|
||||||
|
control: Control<any>;
|
||||||
|
watch: UseFormWatch<any>;
|
||||||
|
labelPrefix?: "create" | "edit";
|
||||||
|
hideAlias?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function PrivateResourceHostDestinationFields({
|
||||||
|
control,
|
||||||
|
watch,
|
||||||
|
labelPrefix = "edit",
|
||||||
|
hideAlias = false
|
||||||
|
}: PrivateResourceHostDestinationFieldsProps) {
|
||||||
|
const t = useTranslations();
|
||||||
|
const destinationLabelKey =
|
||||||
|
labelPrefix === "create"
|
||||||
|
? "createInternalResourceDialogDestination"
|
||||||
|
: "editInternalResourceDialogDestination";
|
||||||
|
|
||||||
|
const destinationField = (
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="destination"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t(destinationLabelKey)}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
{...field}
|
||||||
|
className="w-full"
|
||||||
|
value={field.value ?? ""}
|
||||||
|
onChange={(e) =>
|
||||||
|
field.onChange(
|
||||||
|
e.target.value === ""
|
||||||
|
? null
|
||||||
|
: e.target.value
|
||||||
|
)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
if (hideAlias) {
|
||||||
|
return destinationField;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SettingsFormGrid>
|
||||||
|
<SettingsFormCell span="half">{destinationField}</SettingsFormCell>
|
||||||
|
<SettingsFormCell span="half">
|
||||||
|
<PrivateResourceAliasField
|
||||||
|
control={control}
|
||||||
|
watch={watch}
|
||||||
|
labelPrefix={labelPrefix}
|
||||||
|
/>
|
||||||
|
</SettingsFormCell>
|
||||||
|
</SettingsFormGrid>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function PrivateResourceCidrDestinationField({
|
||||||
|
control,
|
||||||
|
labelPrefix = "edit"
|
||||||
|
}: {
|
||||||
|
control: Control<any>;
|
||||||
|
labelPrefix?: "create" | "edit";
|
||||||
|
}) {
|
||||||
|
const t = useTranslations();
|
||||||
|
const destinationLabelKey =
|
||||||
|
labelPrefix === "create"
|
||||||
|
? "createInternalResourceDialogDestination"
|
||||||
|
: "editInternalResourceDialogDestination";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="destination"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t(destinationLabelKey)}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
{...field}
|
||||||
|
className="w-full"
|
||||||
|
value={field.value ?? ""}
|
||||||
|
onChange={(e) =>
|
||||||
|
field.onChange(
|
||||||
|
e.target.value === ""
|
||||||
|
? null
|
||||||
|
: e.target.value
|
||||||
|
)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,327 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import CertificateStatus from "@app/components/CertificateStatus";
|
||||||
|
import DomainPicker from "@app/components/DomainPicker";
|
||||||
|
import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
|
||||||
|
import {
|
||||||
|
SettingsFormCell,
|
||||||
|
SettingsFormGrid,
|
||||||
|
SettingsSubsectionDescription,
|
||||||
|
SettingsSubsectionHeader,
|
||||||
|
SettingsSubsectionTitle
|
||||||
|
} from "@app/components/Settings";
|
||||||
|
import { SwitchInput } from "@app/components/SwitchInput";
|
||||||
|
import {
|
||||||
|
FormControl,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage
|
||||||
|
} from "@app/components/ui/form";
|
||||||
|
import { Input } from "@app/components/ui/input";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue
|
||||||
|
} from "@app/components/ui/select";
|
||||||
|
import { tierMatrix } from "@server/lib/billing/tierMatrix";
|
||||||
|
import { build } from "@server/build";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
import type { Control, UseFormSetValue, UseFormWatch } from "react-hook-form";
|
||||||
|
|
||||||
|
type PrivateResourceHttpFieldsProps = {
|
||||||
|
control: Control<any>;
|
||||||
|
setValue: UseFormSetValue<any>;
|
||||||
|
orgId: string;
|
||||||
|
watch: UseFormWatch<any>;
|
||||||
|
disabled?: boolean;
|
||||||
|
siteResourceId?: number;
|
||||||
|
resourceDomainId?: string | null;
|
||||||
|
resourceFullDomain?: string | null;
|
||||||
|
labelPrefix?: "create" | "edit";
|
||||||
|
hideDomainPicker?: boolean;
|
||||||
|
hidePaidFeaturesAlert?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function PrivateResourceHttpFields({
|
||||||
|
control,
|
||||||
|
setValue,
|
||||||
|
orgId,
|
||||||
|
watch,
|
||||||
|
disabled = false,
|
||||||
|
siteResourceId,
|
||||||
|
resourceDomainId,
|
||||||
|
resourceFullDomain,
|
||||||
|
labelPrefix = "edit",
|
||||||
|
hideDomainPicker = false,
|
||||||
|
hidePaidFeaturesAlert = false
|
||||||
|
}: PrivateResourceHttpFieldsProps) {
|
||||||
|
const t = useTranslations();
|
||||||
|
const schemeLabelKey =
|
||||||
|
labelPrefix === "create"
|
||||||
|
? "createInternalResourceDialogScheme"
|
||||||
|
: "editInternalResourceDialogScheme";
|
||||||
|
const destinationLabelKey =
|
||||||
|
labelPrefix === "create"
|
||||||
|
? "createInternalResourceDialogDestination"
|
||||||
|
: "editInternalResourceDialogDestination";
|
||||||
|
const destinationPortLabelKey =
|
||||||
|
labelPrefix === "create"
|
||||||
|
? "createInternalResourceDialogModePort"
|
||||||
|
: "editInternalResourceDialogModePort";
|
||||||
|
const httpConfigurationTitleKey =
|
||||||
|
labelPrefix === "create"
|
||||||
|
? "createInternalResourceDialogHttpConfiguration"
|
||||||
|
: "editInternalResourceDialogHttpConfiguration";
|
||||||
|
const httpConfigurationDescriptionKey =
|
||||||
|
labelPrefix === "create"
|
||||||
|
? "createInternalResourceDialogHttpConfigurationDescription"
|
||||||
|
: "editInternalResourceDialogHttpConfigurationDescription";
|
||||||
|
const enableSslLabelKey =
|
||||||
|
labelPrefix === "create"
|
||||||
|
? "createInternalResourceDialogEnableSsl"
|
||||||
|
: "editInternalResourceDialogEnableSsl";
|
||||||
|
const enableSslDescriptionKey =
|
||||||
|
labelPrefix === "create"
|
||||||
|
? "createInternalResourceDialogEnableSslDescription"
|
||||||
|
: "editInternalResourceDialogEnableSslDescription";
|
||||||
|
|
||||||
|
const httpConfigSubdomain = watch("httpConfigSubdomain");
|
||||||
|
const httpConfigDomainId = watch("httpConfigDomainId");
|
||||||
|
const httpConfigFullDomain = watch("httpConfigFullDomain");
|
||||||
|
const ssl = watch("ssl");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SettingsFormGrid>
|
||||||
|
{!hidePaidFeaturesAlert && (
|
||||||
|
<SettingsFormCell span="full">
|
||||||
|
<PaidFeaturesAlert
|
||||||
|
tiers={tierMatrix.advancedPrivateResources}
|
||||||
|
/>
|
||||||
|
</SettingsFormCell>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<SettingsFormCell span="quarter">
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="scheme"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t(schemeLabelKey)}</FormLabel>
|
||||||
|
<Select
|
||||||
|
onValueChange={field.onChange}
|
||||||
|
value={field.value ?? "http"}
|
||||||
|
disabled={disabled}
|
||||||
|
>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger className="w-full">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="http">http</SelectItem>
|
||||||
|
<SelectItem value="https">https</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</SettingsFormCell>
|
||||||
|
<SettingsFormCell span="half">
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="destination"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t(destinationLabelKey)}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
{...field}
|
||||||
|
className="w-full"
|
||||||
|
value={field.value ?? ""}
|
||||||
|
disabled={disabled}
|
||||||
|
onChange={(e) =>
|
||||||
|
field.onChange(
|
||||||
|
e.target.value === ""
|
||||||
|
? null
|
||||||
|
: e.target.value
|
||||||
|
)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</SettingsFormCell>
|
||||||
|
<SettingsFormCell span="quarter">
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="destinationPort"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t(destinationPortLabelKey)}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
className="w-full"
|
||||||
|
type="number"
|
||||||
|
min={1}
|
||||||
|
max={65535}
|
||||||
|
value={field.value ?? ""}
|
||||||
|
disabled={disabled}
|
||||||
|
onChange={(e) => {
|
||||||
|
const raw = e.target.value;
|
||||||
|
if (raw === "") {
|
||||||
|
field.onChange(null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const n = Number(raw);
|
||||||
|
field.onChange(
|
||||||
|
Number.isFinite(n) ? n : null
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</SettingsFormCell>
|
||||||
|
|
||||||
|
{!hideDomainPicker && (
|
||||||
|
<>
|
||||||
|
<SettingsFormCell span="full">
|
||||||
|
<SettingsSubsectionHeader>
|
||||||
|
<SettingsSubsectionTitle>
|
||||||
|
{t(httpConfigurationTitleKey)}
|
||||||
|
</SettingsSubsectionTitle>
|
||||||
|
<SettingsSubsectionDescription>
|
||||||
|
{t(httpConfigurationDescriptionKey)}
|
||||||
|
</SettingsSubsectionDescription>
|
||||||
|
</SettingsSubsectionHeader>
|
||||||
|
</SettingsFormCell>
|
||||||
|
<SettingsFormCell span="full">
|
||||||
|
<div
|
||||||
|
className={
|
||||||
|
disabled
|
||||||
|
? "pointer-events-none opacity-50"
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<DomainPicker
|
||||||
|
key={
|
||||||
|
siteResourceId
|
||||||
|
? `http-domain-${siteResourceId}`
|
||||||
|
: "http-domain-create"
|
||||||
|
}
|
||||||
|
orgId={orgId}
|
||||||
|
cols={2}
|
||||||
|
hideFreeDomain
|
||||||
|
defaultSubdomain={
|
||||||
|
httpConfigSubdomain ?? undefined
|
||||||
|
}
|
||||||
|
defaultDomainId={
|
||||||
|
httpConfigDomainId ?? undefined
|
||||||
|
}
|
||||||
|
defaultFullDomain={
|
||||||
|
httpConfigFullDomain ?? undefined
|
||||||
|
}
|
||||||
|
onDomainChange={(res) => {
|
||||||
|
if (res === null) {
|
||||||
|
setValue("httpConfigSubdomain", null);
|
||||||
|
setValue("httpConfigDomainId", null);
|
||||||
|
setValue("httpConfigFullDomain", null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setValue(
|
||||||
|
"httpConfigSubdomain",
|
||||||
|
res.subdomain ?? null
|
||||||
|
);
|
||||||
|
setValue(
|
||||||
|
"httpConfigDomainId",
|
||||||
|
res.domainId
|
||||||
|
);
|
||||||
|
setValue(
|
||||||
|
"httpConfigFullDomain",
|
||||||
|
res.fullDomain
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</SettingsFormCell>
|
||||||
|
<SettingsFormCell span="half">
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="ssl"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormControl>
|
||||||
|
<SwitchInput
|
||||||
|
id="private-resource-ssl"
|
||||||
|
label={t(enableSslLabelKey)}
|
||||||
|
description={t(
|
||||||
|
enableSslDescriptionKey
|
||||||
|
)}
|
||||||
|
checked={!!field.value}
|
||||||
|
onCheckedChange={field.onChange}
|
||||||
|
disabled={disabled}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</SettingsFormCell>
|
||||||
|
{siteResourceId &&
|
||||||
|
resourceDomainId &&
|
||||||
|
httpConfigFullDomain &&
|
||||||
|
httpConfigDomainId === resourceDomainId &&
|
||||||
|
httpConfigFullDomain === resourceFullDomain &&
|
||||||
|
build != "oss" &&
|
||||||
|
ssl && (
|
||||||
|
<SettingsFormCell span="half">
|
||||||
|
<div className="flex items-center gap-2 pt-1">
|
||||||
|
<span className="text-sm font-medium">
|
||||||
|
{t("certificateStatus")}:
|
||||||
|
</span>
|
||||||
|
<CertificateStatus
|
||||||
|
orgId={orgId}
|
||||||
|
domainId={resourceDomainId}
|
||||||
|
fullDomain={httpConfigFullDomain}
|
||||||
|
autoFetch={true}
|
||||||
|
showLabel={false}
|
||||||
|
polling={true}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</SettingsFormCell>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{hideDomainPicker && (
|
||||||
|
<SettingsFormCell span="half">
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="ssl"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormControl>
|
||||||
|
<SwitchInput
|
||||||
|
id="private-resource-ssl"
|
||||||
|
label={t(enableSslLabelKey)}
|
||||||
|
description={t(enableSslDescriptionKey)}
|
||||||
|
checked={!!field.value}
|
||||||
|
onCheckedChange={field.onChange}
|
||||||
|
disabled={disabled}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</SettingsFormCell>
|
||||||
|
)}
|
||||||
|
</SettingsFormGrid>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { ExternalLink } from "lucide-react";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
|
export function PrivateResourceMultiSiteRoutingHelp() {
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<p className="text-sm text-muted-foreground mt-2">
|
||||||
|
{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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,300 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import {
|
||||||
|
SettingsFormCell,
|
||||||
|
SettingsFormGrid,
|
||||||
|
SettingsSubsectionDescription,
|
||||||
|
SettingsSubsectionHeader,
|
||||||
|
SettingsSubsectionTitle
|
||||||
|
} from "@app/components/Settings";
|
||||||
|
import { SwitchInput } from "@app/components/SwitchInput";
|
||||||
|
import {
|
||||||
|
FormControl,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage
|
||||||
|
} from "@app/components/ui/form";
|
||||||
|
import { Input } from "@app/components/ui/input";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue
|
||||||
|
} from "@app/components/ui/select";
|
||||||
|
import {
|
||||||
|
getPortModeFromString,
|
||||||
|
getPortStringFromMode,
|
||||||
|
type PortMode
|
||||||
|
} from "@app/lib/privateResourceForm";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
import { useEffect, useState, type ReactNode } from "react";
|
||||||
|
import type { Control, UseFormSetValue } from "react-hook-form";
|
||||||
|
|
||||||
|
type PrivateResourceNetworkAccessFieldsProps = {
|
||||||
|
control: Control<any>;
|
||||||
|
setValue: UseFormSetValue<any>;
|
||||||
|
showPortRanges?: boolean;
|
||||||
|
initialTcp?: string | null;
|
||||||
|
initialUdp?: string | null;
|
||||||
|
disabled?: boolean;
|
||||||
|
icmpId?: string;
|
||||||
|
embedInParentGrid?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function PrivateResourceAllowIcmpField({
|
||||||
|
control,
|
||||||
|
id = "private-resource-allow-icmp",
|
||||||
|
disabled = false
|
||||||
|
}: {
|
||||||
|
control: Control<any>;
|
||||||
|
id?: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
}) {
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="disableIcmp"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormControl>
|
||||||
|
<SwitchInput
|
||||||
|
id={id}
|
||||||
|
label={t("privateResourceAllowIcmpPing")}
|
||||||
|
checked={!field.value}
|
||||||
|
onCheckedChange={(checked) =>
|
||||||
|
field.onChange(!checked)
|
||||||
|
}
|
||||||
|
disabled={disabled}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function PrivateResourceNetworkAccessHeader() {
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SettingsFormCell span="full">
|
||||||
|
<SettingsSubsectionHeader>
|
||||||
|
<SettingsSubsectionTitle>
|
||||||
|
{t("privateResourceNetworkAccess")}
|
||||||
|
</SettingsSubsectionTitle>
|
||||||
|
<SettingsSubsectionDescription>
|
||||||
|
{t("privateResourceNetworkAccessDescription")}
|
||||||
|
</SettingsSubsectionDescription>
|
||||||
|
</SettingsSubsectionHeader>
|
||||||
|
</SettingsFormCell>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function PrivateResourceNetworkAccessFields({
|
||||||
|
control,
|
||||||
|
setValue,
|
||||||
|
showPortRanges = true,
|
||||||
|
initialTcp,
|
||||||
|
initialUdp,
|
||||||
|
disabled = false,
|
||||||
|
icmpId = "private-resource-allow-icmp",
|
||||||
|
embedInParentGrid = false
|
||||||
|
}: PrivateResourceNetworkAccessFieldsProps) {
|
||||||
|
const t = useTranslations();
|
||||||
|
const [tcpPortMode, setTcpPortMode] = useState<PortMode>(() =>
|
||||||
|
getPortModeFromString(initialTcp)
|
||||||
|
);
|
||||||
|
const [udpPortMode, setUdpPortMode] = useState<PortMode>(() =>
|
||||||
|
getPortModeFromString(initialUdp)
|
||||||
|
);
|
||||||
|
const [tcpCustomPorts, setTcpCustomPorts] = useState(() =>
|
||||||
|
initialTcp && initialTcp !== "*" ? initialTcp : ""
|
||||||
|
);
|
||||||
|
const [udpCustomPorts, setUdpCustomPorts] = useState(() =>
|
||||||
|
initialUdp && initialUdp !== "*" ? initialUdp : ""
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!showPortRanges) return;
|
||||||
|
|
||||||
|
setValue(
|
||||||
|
"tcpPortRangeString",
|
||||||
|
getPortStringFromMode(tcpPortMode, tcpCustomPorts)
|
||||||
|
);
|
||||||
|
}, [showPortRanges, tcpPortMode, tcpCustomPorts, setValue]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!showPortRanges) return;
|
||||||
|
|
||||||
|
setValue(
|
||||||
|
"udpPortRangeString",
|
||||||
|
getPortStringFromMode(udpPortMode, udpCustomPorts)
|
||||||
|
);
|
||||||
|
}, [showPortRanges, udpPortMode, udpCustomPorts, setValue]);
|
||||||
|
|
||||||
|
const content: ReactNode = (
|
||||||
|
<>
|
||||||
|
<PrivateResourceNetworkAccessHeader />
|
||||||
|
|
||||||
|
{showPortRanges ? (
|
||||||
|
<>
|
||||||
|
<SettingsFormCell span="full">
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="tcpPortRangeString"
|
||||||
|
render={() => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>
|
||||||
|
{t("editInternalResourceDialogTcp")}
|
||||||
|
</FormLabel>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Select
|
||||||
|
value={tcpPortMode}
|
||||||
|
onValueChange={(v: PortMode) =>
|
||||||
|
setTcpPortMode(v)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger className="w-[110px]">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="all">
|
||||||
|
{t("allPorts")}
|
||||||
|
</SelectItem>
|
||||||
|
<SelectItem value="blocked">
|
||||||
|
{t("blocked")}
|
||||||
|
</SelectItem>
|
||||||
|
<SelectItem value="custom">
|
||||||
|
{t("custom")}
|
||||||
|
</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
{tcpPortMode === "custom" ? (
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
className="flex-1"
|
||||||
|
placeholder="80,443,8000-9000"
|
||||||
|
value={tcpCustomPorts}
|
||||||
|
onChange={(e) =>
|
||||||
|
setTcpCustomPorts(
|
||||||
|
e.target.value
|
||||||
|
)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
) : (
|
||||||
|
<Input
|
||||||
|
className="flex-1"
|
||||||
|
disabled
|
||||||
|
placeholder={
|
||||||
|
tcpPortMode === "all"
|
||||||
|
? t("allPortsAllowed")
|
||||||
|
: t("allPortsBlocked")
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</SettingsFormCell>
|
||||||
|
|
||||||
|
<SettingsFormCell span="full">
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="udpPortRangeString"
|
||||||
|
render={() => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>
|
||||||
|
{t("editInternalResourceDialogUdp")}
|
||||||
|
</FormLabel>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Select
|
||||||
|
value={udpPortMode}
|
||||||
|
onValueChange={(v: PortMode) =>
|
||||||
|
setUdpPortMode(v)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger className="w-[110px]">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="all">
|
||||||
|
{t("allPorts")}
|
||||||
|
</SelectItem>
|
||||||
|
<SelectItem value="blocked">
|
||||||
|
{t("blocked")}
|
||||||
|
</SelectItem>
|
||||||
|
<SelectItem value="custom">
|
||||||
|
{t("custom")}
|
||||||
|
</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
{udpPortMode === "custom" ? (
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
className="flex-1"
|
||||||
|
placeholder="53,123,500-600"
|
||||||
|
value={udpCustomPorts}
|
||||||
|
onChange={(e) =>
|
||||||
|
setUdpCustomPorts(
|
||||||
|
e.target.value
|
||||||
|
)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
) : (
|
||||||
|
<Input
|
||||||
|
className="flex-1"
|
||||||
|
disabled
|
||||||
|
placeholder={
|
||||||
|
udpPortMode === "all"
|
||||||
|
? t("allPortsAllowed")
|
||||||
|
: t("allPortsBlocked")
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</SettingsFormCell>
|
||||||
|
</>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<SettingsFormCell span="full">
|
||||||
|
<PrivateResourceAllowIcmpField
|
||||||
|
control={control}
|
||||||
|
id={icmpId}
|
||||||
|
disabled={disabled}
|
||||||
|
/>
|
||||||
|
</SettingsFormCell>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
if (embedInParentGrid) {
|
||||||
|
return content;
|
||||||
|
}
|
||||||
|
|
||||||
|
return <SettingsFormGrid>{content}</SettingsFormGrid>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function PrivateResourcePortRanges(
|
||||||
|
props: Omit<
|
||||||
|
PrivateResourceNetworkAccessFieldsProps,
|
||||||
|
"showPortRanges" | "embedInParentGrid"
|
||||||
|
>
|
||||||
|
) {
|
||||||
|
return <PrivateResourceNetworkAccessFields showPortRanges {...props} />;
|
||||||
|
}
|
||||||
@@ -0,0 +1,133 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import {
|
||||||
|
MultiSitesSelector,
|
||||||
|
formatMultiSitesSelectorLabel
|
||||||
|
} from "@app/components/multi-site-selector";
|
||||||
|
import { SitesSelector } from "@app/components/site-selector";
|
||||||
|
import type { Selectedsite } from "@app/components/site-selector";
|
||||||
|
import { Button } from "@app/components/ui/button";
|
||||||
|
import {
|
||||||
|
FormControl,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage
|
||||||
|
} from "@app/components/ui/form";
|
||||||
|
import { cn } from "@app/lib/cn";
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger
|
||||||
|
} from "@app/components/ui/popover";
|
||||||
|
import { ChevronsUpDown } from "lucide-react";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
import type { Control, FieldPath, FieldValues } from "react-hook-form";
|
||||||
|
import { PrivateResourceMultiSiteRoutingHelp } from "./PrivateResourceMultiSiteRoutingHelp";
|
||||||
|
|
||||||
|
type PrivateResourceSitesFieldProps<T extends FieldValues> = {
|
||||||
|
control: Control<T>;
|
||||||
|
orgId: string;
|
||||||
|
selectedSites: Selectedsite[];
|
||||||
|
onSelectedSitesChange: (sites: Selectedsite[]) => void;
|
||||||
|
siteIdsFieldName?: FieldPath<T>;
|
||||||
|
singleSite?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function PrivateResourceSitesField<T extends FieldValues>({
|
||||||
|
control,
|
||||||
|
orgId,
|
||||||
|
selectedSites,
|
||||||
|
onSelectedSitesChange,
|
||||||
|
siteIdsFieldName = "siteIds" as FieldPath<T>,
|
||||||
|
singleSite = false
|
||||||
|
}: PrivateResourceSitesFieldProps<T>) {
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={siteIdsFieldName}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex flex-col">
|
||||||
|
<FormLabel>{t("sites")}</FormLabel>
|
||||||
|
{singleSite ? (
|
||||||
|
<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">
|
||||||
|
{selectedSites[0]?.name ??
|
||||||
|
t("selectSite")}
|
||||||
|
</span>
|
||||||
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||||
|
</Button>
|
||||||
|
</FormControl>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-full p-0">
|
||||||
|
<SitesSelector
|
||||||
|
orgId={orgId}
|
||||||
|
selectedSite={selectedSites[0] ?? null}
|
||||||
|
filterTypes={["newt"]}
|
||||||
|
onSelectSite={(site) => {
|
||||||
|
onSelectedSitesChange([site]);
|
||||||
|
field.onChange([site.siteId]);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
) : (
|
||||||
|
<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) => {
|
||||||
|
onSelectedSitesChange(sites);
|
||||||
|
field.onChange(
|
||||||
|
sites.map((s) => s.siteId)
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
)}
|
||||||
|
<FormMessage />
|
||||||
|
{!singleSite && selectedSites.length > 1 ? (
|
||||||
|
<PrivateResourceMultiSiteRoutingHelp />
|
||||||
|
) : null}
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,333 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import {
|
||||||
|
SettingsFormCell,
|
||||||
|
SettingsFormGrid,
|
||||||
|
SettingsSubsectionDescription,
|
||||||
|
SettingsSubsectionHeader,
|
||||||
|
SettingsSubsectionTitle
|
||||||
|
} from "@app/components/Settings";
|
||||||
|
import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
|
||||||
|
import { SshServerSettingsFields } from "@app/components/SshServerSettingsFields";
|
||||||
|
import { PrivateResourceAliasField } from "./PrivateResourceDestinationFields";
|
||||||
|
import { PrivateResourceSitesField } from "./PrivateResourceSitesField";
|
||||||
|
import { getSshUseMultiSiteTargetForm } from "./privateResourceUtils";
|
||||||
|
import { inferSshPamMode } from "@app/lib/privateResourceForm";
|
||||||
|
import {
|
||||||
|
FormControl,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage
|
||||||
|
} from "@app/components/ui/form";
|
||||||
|
import { Input } from "@app/components/ui/input";
|
||||||
|
import { tierMatrix } from "@server/lib/billing/tierMatrix";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
import { useState, type ReactNode } from "react";
|
||||||
|
import type { Control, UseFormSetValue, UseFormWatch } from "react-hook-form";
|
||||||
|
import type { Selectedsite } from "@app/components/site-selector";
|
||||||
|
|
||||||
|
type PrivateResourceSshFieldsProps = {
|
||||||
|
control: Control<any>;
|
||||||
|
setValue: UseFormSetValue<any>;
|
||||||
|
watch: UseFormWatch<any>;
|
||||||
|
orgId?: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
selectedSites: Selectedsite[];
|
||||||
|
onSelectedSitesChange: (sites: Selectedsite[]) => void;
|
||||||
|
labelPrefix?: "create" | "edit";
|
||||||
|
showSshSettings?: boolean;
|
||||||
|
layout?: "default" | "wizard";
|
||||||
|
showPaidFeaturesAlert?: boolean;
|
||||||
|
hideAlias?: boolean;
|
||||||
|
embedInParentGrid?: boolean;
|
||||||
|
isNativeSsh?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function PrivateResourceSshFields({
|
||||||
|
control,
|
||||||
|
setValue,
|
||||||
|
watch,
|
||||||
|
orgId,
|
||||||
|
disabled = false,
|
||||||
|
selectedSites,
|
||||||
|
onSelectedSitesChange,
|
||||||
|
labelPrefix = "edit",
|
||||||
|
showSshSettings = true,
|
||||||
|
layout = "default",
|
||||||
|
showPaidFeaturesAlert = true,
|
||||||
|
hideAlias = false,
|
||||||
|
embedInParentGrid = false,
|
||||||
|
isNativeSsh: isNativeSshProp
|
||||||
|
}: PrivateResourceSshFieldsProps) {
|
||||||
|
const t = useTranslations();
|
||||||
|
const destinationLabelKey =
|
||||||
|
labelPrefix === "create"
|
||||||
|
? "createInternalResourceDialogDestination"
|
||||||
|
: "editInternalResourceDialogDestination";
|
||||||
|
const destinationPortLabelKey =
|
||||||
|
labelPrefix === "create"
|
||||||
|
? "createInternalResourceDialogModePort"
|
||||||
|
: "editInternalResourceDialogModePort";
|
||||||
|
|
||||||
|
const authDaemonMode = watch("authDaemonMode") ?? "site";
|
||||||
|
const pamMode = inferSshPamMode(authDaemonMode, watch("pamMode"));
|
||||||
|
const standardDaemonLocation =
|
||||||
|
watch("standardDaemonLocation") ??
|
||||||
|
(authDaemonMode === "remote" ? "remote" : "site");
|
||||||
|
const formAuthDaemonPort = watch("authDaemonPort");
|
||||||
|
const [authDaemonPortInput, setAuthDaemonPortInput] = useState(() =>
|
||||||
|
formAuthDaemonPort != null ? String(formAuthDaemonPort) : "22123"
|
||||||
|
);
|
||||||
|
const isEditLayout = layout === "default";
|
||||||
|
|
||||||
|
const [sshServerMode, setSshServerMode] = useState<"standard" | "native">(
|
||||||
|
() => (authDaemonMode === "native" ? "native" : "standard")
|
||||||
|
);
|
||||||
|
|
||||||
|
const isNative =
|
||||||
|
isNativeSshProp ??
|
||||||
|
(isEditLayout
|
||||||
|
? authDaemonMode === "native"
|
||||||
|
: sshServerMode === "native");
|
||||||
|
const useMultiSiteTargetForm = getSshUseMultiSiteTargetForm(
|
||||||
|
isNative,
|
||||||
|
authDaemonMode,
|
||||||
|
pamMode
|
||||||
|
);
|
||||||
|
|
||||||
|
function trimSitesToFirst() {
|
||||||
|
if (selectedSites.length <= 1) return;
|
||||||
|
|
||||||
|
const first = selectedSites.slice(0, 1);
|
||||||
|
onSelectedSitesChange(first);
|
||||||
|
setValue(
|
||||||
|
"siteIds",
|
||||||
|
first.map((s: Selectedsite) => s.siteId),
|
||||||
|
{ shouldValidate: true }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handlePamModeChange(value: "passthrough" | "push") {
|
||||||
|
if (disabled) return;
|
||||||
|
|
||||||
|
setValue("pamMode", value, { shouldValidate: true });
|
||||||
|
|
||||||
|
if (value === "passthrough") {
|
||||||
|
setValue("authDaemonPort", null, { shouldValidate: true });
|
||||||
|
setAuthDaemonPortInput("22123");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (standardDaemonLocation !== "remote" && selectedSites.length > 1) {
|
||||||
|
trimSitesToFirst();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDaemonLocationChange(value: "site" | "remote") {
|
||||||
|
if (disabled) return;
|
||||||
|
|
||||||
|
setValue("standardDaemonLocation", value, { shouldValidate: true });
|
||||||
|
setValue("authDaemonMode", value, { shouldValidate: true });
|
||||||
|
|
||||||
|
if (value === "site") {
|
||||||
|
setValue("authDaemonPort", null, { shouldValidate: true });
|
||||||
|
setAuthDaemonPortInput("22123");
|
||||||
|
trimSitesToFirst();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleAuthDaemonPortChange(value: string) {
|
||||||
|
if (disabled) return;
|
||||||
|
|
||||||
|
setAuthDaemonPortInput(value);
|
||||||
|
const trimmed = value.trim();
|
||||||
|
setValue("authDaemonPort", trimmed ? Number(trimmed) : null, {
|
||||||
|
shouldValidate: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleServerModeChange(mode: "standard" | "native") {
|
||||||
|
if (disabled) return;
|
||||||
|
|
||||||
|
setSshServerMode(mode);
|
||||||
|
if (mode === "native") {
|
||||||
|
setValue("authDaemonMode", "native", { shouldValidate: true });
|
||||||
|
setValue("authDaemonPort", null, { shouldValidate: true });
|
||||||
|
setValue("destination", null, { shouldValidate: true });
|
||||||
|
setValue("destinationPort", null, { shouldValidate: true });
|
||||||
|
setAuthDaemonPortInput("22123");
|
||||||
|
trimSitesToFirst();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setValue("authDaemonMode", standardDaemonLocation, {
|
||||||
|
shouldValidate: true
|
||||||
|
});
|
||||||
|
setValue("destinationPort", 22, { shouldValidate: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
const aliasField = hideAlias ? null : (
|
||||||
|
<PrivateResourceAliasField
|
||||||
|
control={control}
|
||||||
|
watch={watch}
|
||||||
|
labelPrefix={labelPrefix}
|
||||||
|
disabled={disabled}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
const standardSshTargetRow =
|
||||||
|
orgId && !isNative ? (
|
||||||
|
<div className="grid grid-cols-3 gap-4 items-start">
|
||||||
|
<PrivateResourceSitesField
|
||||||
|
control={control}
|
||||||
|
orgId={orgId}
|
||||||
|
selectedSites={selectedSites}
|
||||||
|
onSelectedSitesChange={onSelectedSitesChange}
|
||||||
|
singleSite={!useMultiSiteTargetForm}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="destination"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t(destinationLabelKey)}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
{...field}
|
||||||
|
className="w-full"
|
||||||
|
value={field.value ?? ""}
|
||||||
|
disabled={disabled}
|
||||||
|
onChange={(e) =>
|
||||||
|
field.onChange(
|
||||||
|
e.target.value === ""
|
||||||
|
? null
|
||||||
|
: e.target.value
|
||||||
|
)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="destinationPort"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t(destinationPortLabelKey)}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
className="w-full"
|
||||||
|
type="number"
|
||||||
|
min={1}
|
||||||
|
max={65535}
|
||||||
|
value={field.value ?? ""}
|
||||||
|
disabled={disabled}
|
||||||
|
onChange={(e) => {
|
||||||
|
const raw = e.target.value;
|
||||||
|
if (raw === "") {
|
||||||
|
field.onChange(null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const n = Number(raw);
|
||||||
|
field.onChange(
|
||||||
|
Number.isFinite(n) ? n : null
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : null;
|
||||||
|
|
||||||
|
const sshSettingsFields = showSshSettings ? (
|
||||||
|
<SshServerSettingsFields
|
||||||
|
idPrefix={
|
||||||
|
layout === "wizard"
|
||||||
|
? "private-ssh-create"
|
||||||
|
: "private-ssh-fields"
|
||||||
|
}
|
||||||
|
pamMode={pamMode}
|
||||||
|
standardDaemonLocation={standardDaemonLocation}
|
||||||
|
authDaemonPort={authDaemonPortInput}
|
||||||
|
onPamModeChange={handlePamModeChange}
|
||||||
|
onStandardDaemonLocationChange={handleDaemonLocationChange}
|
||||||
|
onAuthDaemonPortChange={handleAuthDaemonPortChange}
|
||||||
|
sshServerMode={sshServerMode}
|
||||||
|
serverModeDisplay={layout === "wizard" ? "select" : "badge"}
|
||||||
|
onServerModeChange={handleServerModeChange}
|
||||||
|
/>
|
||||||
|
) : null;
|
||||||
|
|
||||||
|
const destinationSection = (
|
||||||
|
<>
|
||||||
|
<SettingsFormCell span="full">
|
||||||
|
<SettingsSubsectionHeader>
|
||||||
|
<SettingsSubsectionTitle>
|
||||||
|
{t("sshServerDestination")}
|
||||||
|
</SettingsSubsectionTitle>
|
||||||
|
<SettingsSubsectionDescription>
|
||||||
|
{t("sshServerDestinationDescription")}
|
||||||
|
</SettingsSubsectionDescription>
|
||||||
|
</SettingsSubsectionHeader>
|
||||||
|
</SettingsFormCell>
|
||||||
|
|
||||||
|
{isNative && orgId ? (
|
||||||
|
<>
|
||||||
|
<SettingsFormCell span="half">
|
||||||
|
<PrivateResourceSitesField
|
||||||
|
control={control}
|
||||||
|
orgId={orgId}
|
||||||
|
selectedSites={selectedSites}
|
||||||
|
onSelectedSitesChange={onSelectedSitesChange}
|
||||||
|
singleSite
|
||||||
|
/>
|
||||||
|
</SettingsFormCell>
|
||||||
|
<SettingsFormCell span="half">
|
||||||
|
<PrivateResourceAliasField
|
||||||
|
control={control}
|
||||||
|
watch={watch}
|
||||||
|
labelPrefix={labelPrefix}
|
||||||
|
disabled={disabled}
|
||||||
|
/>
|
||||||
|
</SettingsFormCell>
|
||||||
|
</>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{!isNative && orgId ? (
|
||||||
|
<SettingsFormCell span="full">
|
||||||
|
{standardSshTargetRow}
|
||||||
|
</SettingsFormCell>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{!isNative && !hideAlias ? (
|
||||||
|
<SettingsFormCell span="half">{aliasField}</SettingsFormCell>
|
||||||
|
) : null}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
const content: ReactNode = (
|
||||||
|
<>
|
||||||
|
{showPaidFeaturesAlert && layout === "default" && (
|
||||||
|
<SettingsFormCell span="full">
|
||||||
|
<PaidFeaturesAlert
|
||||||
|
tiers={tierMatrix.advancedPrivateResources}
|
||||||
|
/>
|
||||||
|
</SettingsFormCell>
|
||||||
|
)}
|
||||||
|
{sshSettingsFields}
|
||||||
|
{destinationSection}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
if (embedInParentGrid) {
|
||||||
|
return content;
|
||||||
|
}
|
||||||
|
|
||||||
|
return <SettingsFormGrid>{content}</SettingsFormGrid>;
|
||||||
|
}
|
||||||
@@ -0,0 +1,170 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import {
|
||||||
|
SettingsContainer,
|
||||||
|
SettingsSection,
|
||||||
|
SettingsSectionBody,
|
||||||
|
SettingsSectionDescription,
|
||||||
|
SettingsSectionFooter,
|
||||||
|
SettingsSectionForm,
|
||||||
|
SettingsSectionHeader,
|
||||||
|
SettingsSectionTitle
|
||||||
|
} from "@app/components/Settings";
|
||||||
|
import { Button } from "@app/components/ui/button";
|
||||||
|
import { Form } from "@app/components/ui/form";
|
||||||
|
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||||
|
import { useSiteResourceContext } from "@app/hooks/useSiteResourceContext";
|
||||||
|
import { toast } from "@app/hooks/useToast";
|
||||||
|
import { createApiClient, formatAxiosError } from "@app/lib/api";
|
||||||
|
import {
|
||||||
|
accessTagsToIds,
|
||||||
|
buildUpdateSiteResourcePayload,
|
||||||
|
createAccessFormSchema,
|
||||||
|
mergeFormValuesWithResource
|
||||||
|
} from "@app/lib/privateResourceForm";
|
||||||
|
import { resourceQueries, orgQueries } from "@app/lib/queries";
|
||||||
|
import { useAccessFormDefaults } from "@app/providers/SiteResourceProvider";
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
import { useActionState, useEffect } from "react";
|
||||||
|
import { useForm } from "react-hook-form";
|
||||||
|
import { PrivateResourceAccessFields } from "../../PrivateResourceAccessFields";
|
||||||
|
|
||||||
|
export default function PrivateResourceAccessPage() {
|
||||||
|
const t = useTranslations();
|
||||||
|
const { env } = useEnvContext();
|
||||||
|
const api = createApiClient({ env });
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const { siteResource, setAccess } = useSiteResourceContext();
|
||||||
|
const { loading, roles, users, clients, hasMachineClients } =
|
||||||
|
useAccessFormDefaults(siteResource.orgId, siteResource.id);
|
||||||
|
|
||||||
|
const machineClientsQuery = useQuery(
|
||||||
|
orgQueries.machineClients({
|
||||||
|
orgId: siteResource.orgId,
|
||||||
|
perPage: 1
|
||||||
|
})
|
||||||
|
);
|
||||||
|
const hasMachineClientsResolved =
|
||||||
|
(machineClientsQuery.data ?? []).filter((c) => !c.userId).length > 0;
|
||||||
|
|
||||||
|
const form = useForm({
|
||||||
|
resolver: zodResolver(createAccessFormSchema()),
|
||||||
|
defaultValues: {
|
||||||
|
roles: [] as typeof roles,
|
||||||
|
users: [] as typeof users,
|
||||||
|
clients: [] as typeof clients
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!loading) {
|
||||||
|
form.reset({ roles, users, clients });
|
||||||
|
}
|
||||||
|
}, [loading, roles, users, clients, form]);
|
||||||
|
|
||||||
|
const [, formAction, saveLoading] = useActionState(async () => {
|
||||||
|
const isValid = await form.trigger();
|
||||||
|
if (!isValid) return;
|
||||||
|
|
||||||
|
const data = form.getValues();
|
||||||
|
const access = accessTagsToIds({
|
||||||
|
roles: data.roles,
|
||||||
|
users: data.users,
|
||||||
|
clients: data.clients
|
||||||
|
});
|
||||||
|
|
||||||
|
const merged = mergeFormValuesWithResource(siteResource, {});
|
||||||
|
const payload = buildUpdateSiteResourcePayload(merged, access);
|
||||||
|
|
||||||
|
try {
|
||||||
|
await api.post(`/site-resource/${siteResource.id}`, payload);
|
||||||
|
setAccess(access);
|
||||||
|
|
||||||
|
await Promise.all([
|
||||||
|
queryClient.invalidateQueries(
|
||||||
|
resourceQueries.siteResourceRoles({
|
||||||
|
siteResourceId: siteResource.id
|
||||||
|
})
|
||||||
|
),
|
||||||
|
queryClient.invalidateQueries(
|
||||||
|
resourceQueries.siteResourceUsers({
|
||||||
|
siteResourceId: siteResource.id
|
||||||
|
})
|
||||||
|
),
|
||||||
|
queryClient.invalidateQueries(
|
||||||
|
resourceQueries.siteResourceClients({
|
||||||
|
siteResourceId: siteResource.id
|
||||||
|
})
|
||||||
|
)
|
||||||
|
]);
|
||||||
|
|
||||||
|
toast({
|
||||||
|
title: t("editInternalResourceDialogSuccess"),
|
||||||
|
description: t(
|
||||||
|
"editInternalResourceDialogInternalResourceUpdatedSuccessfully"
|
||||||
|
)
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
toast({
|
||||||
|
title: t("editInternalResourceDialogError"),
|
||||||
|
description: formatAxiosError(
|
||||||
|
error,
|
||||||
|
t(
|
||||||
|
"editInternalResourceDialogFailedToUpdateInternalResource"
|
||||||
|
)
|
||||||
|
),
|
||||||
|
variant: "destructive"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, null);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SettingsContainer>
|
||||||
|
<SettingsSection>
|
||||||
|
<SettingsSectionHeader>
|
||||||
|
<SettingsSectionTitle>
|
||||||
|
{t("authentication")}
|
||||||
|
</SettingsSectionTitle>
|
||||||
|
<SettingsSectionDescription>
|
||||||
|
{t(
|
||||||
|
"editInternalResourceDialogAccessControlDescription"
|
||||||
|
)}
|
||||||
|
</SettingsSectionDescription>
|
||||||
|
</SettingsSectionHeader>
|
||||||
|
|
||||||
|
<SettingsSectionBody>
|
||||||
|
<SettingsSectionForm variant="half">
|
||||||
|
<Form {...form}>
|
||||||
|
<form
|
||||||
|
action={formAction}
|
||||||
|
id="private-resource-access-form"
|
||||||
|
>
|
||||||
|
<PrivateResourceAccessFields
|
||||||
|
control={form.control}
|
||||||
|
orgId={siteResource.orgId}
|
||||||
|
loading={loading}
|
||||||
|
hasMachineClients={
|
||||||
|
hasMachineClients ||
|
||||||
|
hasMachineClientsResolved
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
</SettingsSectionForm>
|
||||||
|
</SettingsSectionBody>
|
||||||
|
|
||||||
|
<SettingsSectionFooter>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
form="private-resource-access-form"
|
||||||
|
loading={saveLoading}
|
||||||
|
>
|
||||||
|
{t("saveSettings")}
|
||||||
|
</Button>
|
||||||
|
</SettingsSectionFooter>
|
||||||
|
</SettingsSection>
|
||||||
|
</SettingsContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,138 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import {
|
||||||
|
SettingsContainer,
|
||||||
|
SettingsFormCell,
|
||||||
|
SettingsFormGrid,
|
||||||
|
SettingsSection,
|
||||||
|
SettingsSectionBody,
|
||||||
|
SettingsSectionDescription,
|
||||||
|
SettingsSectionFooter,
|
||||||
|
SettingsSectionForm,
|
||||||
|
SettingsSectionHeader,
|
||||||
|
SettingsSectionTitle
|
||||||
|
} from "@app/components/Settings";
|
||||||
|
import { Button } from "@app/components/ui/button";
|
||||||
|
import { Form } from "@app/components/ui/form";
|
||||||
|
import { createCidrFormSchema } from "@app/lib/privateResourceForm";
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
import { useActionState, useMemo, useState } from "react";
|
||||||
|
import { useForm } from "react-hook-form";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { PrivateResourceSitesField } from "../../PrivateResourceSitesField";
|
||||||
|
import { PrivateResourceCidrDestinationField } from "../../PrivateResourceDestinationFields";
|
||||||
|
import { PrivateResourcePortRanges } from "../../PrivateResourcePortRanges";
|
||||||
|
import { buildSelectedSitesForResource } from "../../privateResourceUtils";
|
||||||
|
import { asAnyControl, asAnySetValue } from "../../formControlUtils";
|
||||||
|
import { useSaveSiteResource } from "../../useSaveSiteResource";
|
||||||
|
|
||||||
|
export default function PrivateResourceCidrPage() {
|
||||||
|
const t = useTranslations();
|
||||||
|
const { save, siteResource } = useSaveSiteResource();
|
||||||
|
const [selectedSites, setSelectedSites] = useState(() =>
|
||||||
|
buildSelectedSitesForResource(siteResource)
|
||||||
|
);
|
||||||
|
|
||||||
|
const formSchema = useMemo(() => createCidrFormSchema(t), [t]);
|
||||||
|
type FormValues = z.infer<typeof formSchema>;
|
||||||
|
|
||||||
|
const form = useForm<FormValues>({
|
||||||
|
resolver: zodResolver(formSchema),
|
||||||
|
defaultValues: {
|
||||||
|
siteIds: siteResource.siteIds,
|
||||||
|
mode: "cidr",
|
||||||
|
destination: siteResource.destination ?? "",
|
||||||
|
tcpPortRangeString: siteResource.tcpPortRangeString ?? "*",
|
||||||
|
udpPortRangeString: siteResource.udpPortRangeString ?? "*",
|
||||||
|
disableIcmp: siteResource.disableIcmp ?? false
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const [, formAction, saveLoading] = useActionState(async () => {
|
||||||
|
const isValid = await form.trigger();
|
||||||
|
if (!isValid) return;
|
||||||
|
|
||||||
|
const data = form.getValues();
|
||||||
|
await save({
|
||||||
|
siteIds: data.siteIds,
|
||||||
|
mode: "cidr",
|
||||||
|
destination: data.destination,
|
||||||
|
tcpPortRangeString: data.tcpPortRangeString,
|
||||||
|
udpPortRangeString: data.udpPortRangeString,
|
||||||
|
disableIcmp: data.disableIcmp
|
||||||
|
});
|
||||||
|
}, null);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SettingsContainer>
|
||||||
|
<SettingsSection>
|
||||||
|
<SettingsSectionHeader>
|
||||||
|
<SettingsSectionTitle>
|
||||||
|
{t("cidrSettings")}
|
||||||
|
</SettingsSectionTitle>
|
||||||
|
<SettingsSectionDescription>
|
||||||
|
{t(
|
||||||
|
"editInternalResourceDialogDestinationCidrDescription"
|
||||||
|
)}
|
||||||
|
</SettingsSectionDescription>
|
||||||
|
</SettingsSectionHeader>
|
||||||
|
|
||||||
|
<SettingsSectionBody>
|
||||||
|
<SettingsSectionForm variant="half">
|
||||||
|
<Form {...form}>
|
||||||
|
<form
|
||||||
|
action={formAction}
|
||||||
|
id="private-resource-cidr-form"
|
||||||
|
>
|
||||||
|
<SettingsFormGrid>
|
||||||
|
<SettingsFormCell span="half">
|
||||||
|
<PrivateResourceSitesField
|
||||||
|
control={form.control}
|
||||||
|
orgId={siteResource.orgId}
|
||||||
|
selectedSites={selectedSites}
|
||||||
|
onSelectedSitesChange={
|
||||||
|
setSelectedSites
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</SettingsFormCell>
|
||||||
|
|
||||||
|
<SettingsFormCell span="half">
|
||||||
|
<PrivateResourceCidrDestinationField
|
||||||
|
control={asAnyControl(form.control)}
|
||||||
|
/>
|
||||||
|
</SettingsFormCell>
|
||||||
|
|
||||||
|
<SettingsFormCell span="full">
|
||||||
|
<PrivateResourcePortRanges
|
||||||
|
control={asAnyControl(form.control)}
|
||||||
|
setValue={asAnySetValue(
|
||||||
|
form.setValue
|
||||||
|
)}
|
||||||
|
initialTcp={
|
||||||
|
siteResource.tcpPortRangeString
|
||||||
|
}
|
||||||
|
initialUdp={
|
||||||
|
siteResource.udpPortRangeString
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</SettingsFormCell>
|
||||||
|
</SettingsFormGrid>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
</SettingsSectionForm>
|
||||||
|
</SettingsSectionBody>
|
||||||
|
|
||||||
|
<SettingsSectionFooter>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
form="private-resource-cidr-form"
|
||||||
|
loading={saveLoading}
|
||||||
|
>
|
||||||
|
{t("saveSettings")}
|
||||||
|
</Button>
|
||||||
|
</SettingsSectionFooter>
|
||||||
|
</SettingsSection>
|
||||||
|
</SettingsContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,133 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import {
|
||||||
|
SettingsContainer,
|
||||||
|
SettingsFormCell,
|
||||||
|
SettingsFormGrid,
|
||||||
|
SettingsSection,
|
||||||
|
SettingsSectionBody,
|
||||||
|
SettingsSectionDescription,
|
||||||
|
SettingsSectionFooter,
|
||||||
|
SettingsSectionForm,
|
||||||
|
SettingsSectionHeader,
|
||||||
|
SettingsSectionTitle
|
||||||
|
} from "@app/components/Settings";
|
||||||
|
import { Button } from "@app/components/ui/button";
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
FormControl,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage
|
||||||
|
} from "@app/components/ui/form";
|
||||||
|
import { Input } from "@app/components/ui/input";
|
||||||
|
import { createGeneralFormSchema } from "@app/lib/privateResourceForm";
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
import { useActionState, useMemo } from "react";
|
||||||
|
import { useForm } from "react-hook-form";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { useSaveSiteResource } from "../../useSaveSiteResource";
|
||||||
|
|
||||||
|
export default function PrivateResourceGeneralPage() {
|
||||||
|
const t = useTranslations();
|
||||||
|
const { save, siteResource } = useSaveSiteResource();
|
||||||
|
|
||||||
|
const formSchema = useMemo(() => createGeneralFormSchema(t), [t]);
|
||||||
|
type FormValues = z.infer<typeof formSchema>;
|
||||||
|
|
||||||
|
const form = useForm<FormValues>({
|
||||||
|
resolver: zodResolver(formSchema),
|
||||||
|
defaultValues: {
|
||||||
|
name: siteResource.name,
|
||||||
|
niceId: siteResource.niceId
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const [, formAction, saveLoading] = useActionState(async () => {
|
||||||
|
const isValid = await form.trigger();
|
||||||
|
if (!isValid) return;
|
||||||
|
|
||||||
|
const data = form.getValues();
|
||||||
|
await save({
|
||||||
|
name: data.name,
|
||||||
|
niceId: data.niceId
|
||||||
|
});
|
||||||
|
}, null);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SettingsContainer>
|
||||||
|
<SettingsSection>
|
||||||
|
<SettingsSectionHeader>
|
||||||
|
<SettingsSectionTitle>
|
||||||
|
{t("resourceGeneral")}
|
||||||
|
</SettingsSectionTitle>
|
||||||
|
<SettingsSectionDescription>
|
||||||
|
{t("resourceGeneralDescription")}
|
||||||
|
</SettingsSectionDescription>
|
||||||
|
</SettingsSectionHeader>
|
||||||
|
|
||||||
|
<SettingsSectionBody>
|
||||||
|
<SettingsSectionForm variant="half">
|
||||||
|
<Form {...form}>
|
||||||
|
<form
|
||||||
|
action={formAction}
|
||||||
|
id="private-resource-general-form"
|
||||||
|
>
|
||||||
|
<SettingsFormGrid>
|
||||||
|
<SettingsFormCell span="half">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="name"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>
|
||||||
|
{t(
|
||||||
|
"editInternalResourceDialogName"
|
||||||
|
)}
|
||||||
|
</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input {...field} />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</SettingsFormCell>
|
||||||
|
<SettingsFormCell span="half">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="niceId"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>
|
||||||
|
{t("identifier")}
|
||||||
|
</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input {...field} />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</SettingsFormCell>
|
||||||
|
</SettingsFormGrid>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
</SettingsSectionForm>
|
||||||
|
</SettingsSectionBody>
|
||||||
|
|
||||||
|
<SettingsSectionFooter>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
form="private-resource-general-form"
|
||||||
|
loading={saveLoading}
|
||||||
|
>
|
||||||
|
{t("saveSettings")}
|
||||||
|
</Button>
|
||||||
|
</SettingsSectionFooter>
|
||||||
|
</SettingsSection>
|
||||||
|
</SettingsContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,147 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import {
|
||||||
|
SettingsContainer,
|
||||||
|
SettingsFormCell,
|
||||||
|
SettingsFormGrid,
|
||||||
|
SettingsSection,
|
||||||
|
SettingsSectionBody,
|
||||||
|
SettingsSectionDescription,
|
||||||
|
SettingsSectionFooter,
|
||||||
|
SettingsSectionForm,
|
||||||
|
SettingsSectionHeader,
|
||||||
|
SettingsSectionTitle
|
||||||
|
} from "@app/components/Settings";
|
||||||
|
import { Button } from "@app/components/ui/button";
|
||||||
|
import { Form } from "@app/components/ui/form";
|
||||||
|
import { createHostFormSchema } from "@app/lib/privateResourceForm";
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
import { useActionState, useMemo, useState } from "react";
|
||||||
|
import { useForm } from "react-hook-form";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { PrivateResourceSitesField } from "../../PrivateResourceSitesField";
|
||||||
|
import { PrivateResourceHostDestinationFields } from "../../PrivateResourceDestinationFields";
|
||||||
|
import { PrivateResourcePortRanges } from "../../PrivateResourcePortRanges";
|
||||||
|
import { buildSelectedSitesForResource } from "../../privateResourceUtils";
|
||||||
|
import {
|
||||||
|
asAnyControl,
|
||||||
|
asAnySetValue,
|
||||||
|
asAnyWatch
|
||||||
|
} from "../../formControlUtils";
|
||||||
|
import { useSaveSiteResource } from "../../useSaveSiteResource";
|
||||||
|
|
||||||
|
export default function PrivateResourceHostPage() {
|
||||||
|
const t = useTranslations();
|
||||||
|
const { save, siteResource } = useSaveSiteResource();
|
||||||
|
const [selectedSites, setSelectedSites] = useState(() =>
|
||||||
|
buildSelectedSitesForResource(siteResource)
|
||||||
|
);
|
||||||
|
|
||||||
|
const formSchema = useMemo(() => createHostFormSchema(t), [t]);
|
||||||
|
type FormValues = z.infer<typeof formSchema>;
|
||||||
|
|
||||||
|
const form = useForm<FormValues>({
|
||||||
|
resolver: zodResolver(formSchema),
|
||||||
|
defaultValues: {
|
||||||
|
siteIds: siteResource.siteIds,
|
||||||
|
mode: "host",
|
||||||
|
destination: siteResource.destination ?? "",
|
||||||
|
alias: siteResource.alias ?? null,
|
||||||
|
tcpPortRangeString: siteResource.tcpPortRangeString ?? "*",
|
||||||
|
udpPortRangeString: siteResource.udpPortRangeString ?? "*",
|
||||||
|
disableIcmp: siteResource.disableIcmp ?? false,
|
||||||
|
authDaemonMode: siteResource.authDaemonMode ?? "site",
|
||||||
|
authDaemonPort: siteResource.authDaemonPort ?? null
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const [, formAction, saveLoading] = useActionState(async () => {
|
||||||
|
const isValid = await form.trigger();
|
||||||
|
if (!isValid) return;
|
||||||
|
|
||||||
|
const data = form.getValues();
|
||||||
|
await save({
|
||||||
|
siteIds: data.siteIds,
|
||||||
|
mode: "host",
|
||||||
|
destination: data.destination,
|
||||||
|
alias: data.alias,
|
||||||
|
tcpPortRangeString: data.tcpPortRangeString,
|
||||||
|
udpPortRangeString: data.udpPortRangeString,
|
||||||
|
disableIcmp: data.disableIcmp,
|
||||||
|
authDaemonMode: data.authDaemonMode,
|
||||||
|
authDaemonPort: data.authDaemonPort
|
||||||
|
});
|
||||||
|
}, null);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SettingsContainer>
|
||||||
|
<SettingsSection>
|
||||||
|
<SettingsSectionHeader>
|
||||||
|
<SettingsSectionTitle>
|
||||||
|
{t("hostSettings")}
|
||||||
|
</SettingsSectionTitle>
|
||||||
|
<SettingsSectionDescription>
|
||||||
|
{t("editInternalResourceDialogDestinationDescription")}
|
||||||
|
</SettingsSectionDescription>
|
||||||
|
</SettingsSectionHeader>
|
||||||
|
|
||||||
|
<SettingsSectionBody>
|
||||||
|
<SettingsSectionForm variant="half">
|
||||||
|
<Form {...form}>
|
||||||
|
<form
|
||||||
|
action={formAction}
|
||||||
|
id="private-resource-host-form"
|
||||||
|
>
|
||||||
|
<SettingsFormGrid>
|
||||||
|
<SettingsFormCell span="half">
|
||||||
|
<PrivateResourceSitesField
|
||||||
|
control={form.control}
|
||||||
|
orgId={siteResource.orgId}
|
||||||
|
selectedSites={selectedSites}
|
||||||
|
onSelectedSitesChange={
|
||||||
|
setSelectedSites
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</SettingsFormCell>
|
||||||
|
|
||||||
|
<SettingsFormCell span="full">
|
||||||
|
<PrivateResourceHostDestinationFields
|
||||||
|
control={asAnyControl(form.control)}
|
||||||
|
watch={asAnyWatch(form.watch)}
|
||||||
|
/>
|
||||||
|
</SettingsFormCell>
|
||||||
|
|
||||||
|
<SettingsFormCell span="full">
|
||||||
|
<PrivateResourcePortRanges
|
||||||
|
control={asAnyControl(form.control)}
|
||||||
|
setValue={asAnySetValue(
|
||||||
|
form.setValue
|
||||||
|
)}
|
||||||
|
initialTcp={
|
||||||
|
siteResource.tcpPortRangeString
|
||||||
|
}
|
||||||
|
initialUdp={
|
||||||
|
siteResource.udpPortRangeString
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</SettingsFormCell>
|
||||||
|
</SettingsFormGrid>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
</SettingsSectionForm>
|
||||||
|
</SettingsSectionBody>
|
||||||
|
|
||||||
|
<SettingsSectionFooter>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
form="private-resource-host-form"
|
||||||
|
loading={saveLoading}
|
||||||
|
>
|
||||||
|
{t("saveSettings")}
|
||||||
|
</Button>
|
||||||
|
</SettingsSectionFooter>
|
||||||
|
</SettingsSection>
|
||||||
|
</SettingsContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,152 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import {
|
||||||
|
SettingsContainer,
|
||||||
|
SettingsFormCell,
|
||||||
|
SettingsFormGrid,
|
||||||
|
SettingsSection,
|
||||||
|
SettingsSectionBody,
|
||||||
|
SettingsSectionDescription,
|
||||||
|
SettingsSectionFooter,
|
||||||
|
SettingsSectionForm,
|
||||||
|
SettingsSectionHeader,
|
||||||
|
SettingsSectionTitle
|
||||||
|
} from "@app/components/Settings";
|
||||||
|
import { Button } from "@app/components/ui/button";
|
||||||
|
import { Form } from "@app/components/ui/form";
|
||||||
|
import { usePaidStatus } from "@app/hooks/usePaidStatus";
|
||||||
|
import { createHttpFormSchema } from "@app/lib/privateResourceForm";
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import { tierMatrix } from "@server/lib/billing/tierMatrix";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
import { useActionState, useMemo, useState } from "react";
|
||||||
|
import { useForm } from "react-hook-form";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { PrivateResourceSitesField } from "../../PrivateResourceSitesField";
|
||||||
|
import { PrivateResourceHttpFields } from "../../PrivateResourceHttpFields";
|
||||||
|
import { buildSelectedSitesForResource } from "../../privateResourceUtils";
|
||||||
|
import {
|
||||||
|
asAnyControl,
|
||||||
|
asAnySetValue,
|
||||||
|
asAnyWatch
|
||||||
|
} from "../../formControlUtils";
|
||||||
|
import { useSaveSiteResource } from "../../useSaveSiteResource";
|
||||||
|
|
||||||
|
export default function PrivateResourceHttpPage() {
|
||||||
|
const t = useTranslations();
|
||||||
|
const { save, siteResource } = useSaveSiteResource();
|
||||||
|
const { isPaidUser } = usePaidStatus();
|
||||||
|
const httpSectionDisabled = !isPaidUser(
|
||||||
|
tierMatrix.advancedPrivateResources
|
||||||
|
);
|
||||||
|
const [selectedSites, setSelectedSites] = useState(() =>
|
||||||
|
buildSelectedSitesForResource(siteResource)
|
||||||
|
);
|
||||||
|
|
||||||
|
const formSchema = useMemo(() => createHttpFormSchema(t), [t]);
|
||||||
|
type FormValues = z.infer<typeof formSchema>;
|
||||||
|
|
||||||
|
const form = useForm<FormValues>({
|
||||||
|
resolver: zodResolver(formSchema),
|
||||||
|
defaultValues: {
|
||||||
|
siteIds: siteResource.siteIds,
|
||||||
|
mode: "http",
|
||||||
|
destination: siteResource.destination ?? "",
|
||||||
|
destinationPort: siteResource.destinationPort ?? null,
|
||||||
|
scheme: siteResource.scheme ?? "http",
|
||||||
|
ssl: siteResource.ssl ?? false,
|
||||||
|
httpConfigSubdomain: siteResource.subdomain ?? null,
|
||||||
|
httpConfigDomainId: siteResource.domainId ?? null,
|
||||||
|
httpConfigFullDomain: siteResource.fullDomain ?? null
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const [, formAction, saveLoading] = useActionState(async () => {
|
||||||
|
const isValid = await form.trigger();
|
||||||
|
if (!isValid) return;
|
||||||
|
|
||||||
|
const data = form.getValues();
|
||||||
|
await save({
|
||||||
|
siteIds: data.siteIds,
|
||||||
|
mode: "http",
|
||||||
|
destination: data.destination,
|
||||||
|
destinationPort: data.destinationPort,
|
||||||
|
scheme: data.scheme,
|
||||||
|
ssl: data.ssl,
|
||||||
|
httpConfigSubdomain: data.httpConfigSubdomain,
|
||||||
|
httpConfigDomainId: data.httpConfigDomainId,
|
||||||
|
httpConfigFullDomain: data.httpConfigFullDomain
|
||||||
|
});
|
||||||
|
}, null);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SettingsContainer>
|
||||||
|
<SettingsSection>
|
||||||
|
<SettingsSectionHeader>
|
||||||
|
<SettingsSectionTitle>
|
||||||
|
{t("httpSettings")}
|
||||||
|
</SettingsSectionTitle>
|
||||||
|
<SettingsSectionDescription>
|
||||||
|
{t(
|
||||||
|
"editInternalResourceDialogHttpConfigurationDescription"
|
||||||
|
)}
|
||||||
|
</SettingsSectionDescription>
|
||||||
|
</SettingsSectionHeader>
|
||||||
|
|
||||||
|
<SettingsSectionBody>
|
||||||
|
<SettingsSectionForm variant="half">
|
||||||
|
<Form {...form}>
|
||||||
|
<form
|
||||||
|
action={formAction}
|
||||||
|
id="private-resource-http-form"
|
||||||
|
>
|
||||||
|
<SettingsFormGrid>
|
||||||
|
<SettingsFormCell span="half">
|
||||||
|
<PrivateResourceSitesField
|
||||||
|
control={form.control}
|
||||||
|
orgId={siteResource.orgId}
|
||||||
|
selectedSites={selectedSites}
|
||||||
|
onSelectedSitesChange={
|
||||||
|
setSelectedSites
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</SettingsFormCell>
|
||||||
|
|
||||||
|
<SettingsFormCell span="full">
|
||||||
|
<PrivateResourceHttpFields
|
||||||
|
control={asAnyControl(form.control)}
|
||||||
|
setValue={asAnySetValue(
|
||||||
|
form.setValue
|
||||||
|
)}
|
||||||
|
orgId={siteResource.orgId}
|
||||||
|
watch={asAnyWatch(form.watch)}
|
||||||
|
disabled={httpSectionDisabled}
|
||||||
|
siteResourceId={siteResource.id}
|
||||||
|
resourceDomainId={
|
||||||
|
siteResource.domainId
|
||||||
|
}
|
||||||
|
resourceFullDomain={
|
||||||
|
siteResource.fullDomain
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</SettingsFormCell>
|
||||||
|
</SettingsFormGrid>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
</SettingsSectionForm>
|
||||||
|
</SettingsSectionBody>
|
||||||
|
|
||||||
|
<SettingsSectionFooter>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
form="private-resource-http-form"
|
||||||
|
loading={saveLoading}
|
||||||
|
disabled={httpSectionDisabled}
|
||||||
|
>
|
||||||
|
{t("saveSettings")}
|
||||||
|
</Button>
|
||||||
|
</SettingsSectionFooter>
|
||||||
|
</SettingsSection>
|
||||||
|
</SettingsContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,93 @@
|
|||||||
|
import { HorizontalTabs } from "@app/components/HorizontalTabs";
|
||||||
|
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
|
||||||
|
import { fetchSiteResourceByNiceId } from "@app/lib/fetchSiteResourceByNiceId";
|
||||||
|
import { getCachedOrg } from "@app/lib/api/getCachedOrg";
|
||||||
|
import OrgProvider from "@app/providers/OrgProvider";
|
||||||
|
import SiteResourceProvider from "@app/providers/SiteResourceProvider";
|
||||||
|
import SiteResourceInfoBox from "@app/components/SiteResourceInfoBox";
|
||||||
|
import type { Metadata } from "next";
|
||||||
|
import { getTranslations } from "next-intl/server";
|
||||||
|
import { redirect } from "next/navigation";
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: "Private Resource"
|
||||||
|
};
|
||||||
|
|
||||||
|
export const dynamic = "force-dynamic";
|
||||||
|
|
||||||
|
type PrivateResourceLayoutProps = {
|
||||||
|
children: React.ReactNode;
|
||||||
|
params: Promise<{ niceId: string; orgId: string }>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default async function PrivateResourceLayout(
|
||||||
|
props: PrivateResourceLayoutProps
|
||||||
|
) {
|
||||||
|
const params = await props.params;
|
||||||
|
const t = await getTranslations();
|
||||||
|
const { children } = props;
|
||||||
|
|
||||||
|
const siteResource = await fetchSiteResourceByNiceId(
|
||||||
|
params.orgId,
|
||||||
|
params.niceId
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!siteResource) {
|
||||||
|
redirect(`/${params.orgId}/settings/resources/private`);
|
||||||
|
}
|
||||||
|
|
||||||
|
let org = null;
|
||||||
|
try {
|
||||||
|
const res = await getCachedOrg(params.orgId);
|
||||||
|
org = res.data.data;
|
||||||
|
} catch {
|
||||||
|
redirect(`/${params.orgId}/settings/resources/private`);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!org) {
|
||||||
|
redirect(`/${params.orgId}/settings/resources/private`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const modeSettingsKey = `${siteResource.mode}Settings` as
|
||||||
|
| "hostSettings"
|
||||||
|
| "cidrSettings"
|
||||||
|
| "httpSettings"
|
||||||
|
| "sshSettings";
|
||||||
|
|
||||||
|
const navItems = [
|
||||||
|
{
|
||||||
|
title: t("general"),
|
||||||
|
href: `/{orgId}/settings/resources/private/{niceId}/general`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: t(modeSettingsKey),
|
||||||
|
href: `/{orgId}/settings/resources/private/{niceId}/${siteResource.mode}`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: t("authentication"),
|
||||||
|
href: `/{orgId}/settings/resources/private/{niceId}/access`
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<SettingsSectionTitle
|
||||||
|
title={t("resourceSetting", {
|
||||||
|
resourceName: siteResource.name
|
||||||
|
})}
|
||||||
|
description={t("resourceSettingDescription")}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<OrgProvider org={org}>
|
||||||
|
<SiteResourceProvider siteResource={siteResource}>
|
||||||
|
<div className="space-y-6">
|
||||||
|
<SiteResourceInfoBox />
|
||||||
|
<HorizontalTabs items={navItems}>
|
||||||
|
{children}
|
||||||
|
</HorizontalTabs>
|
||||||
|
</div>
|
||||||
|
</SiteResourceProvider>
|
||||||
|
</OrgProvider>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
import type { Metadata } from "next";
|
||||||
|
import { redirect } from "next/navigation";
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: "Private Resource"
|
||||||
|
};
|
||||||
|
|
||||||
|
export default async function PrivateResourcePage(props: {
|
||||||
|
params: Promise<{ niceId: string; orgId: string }>;
|
||||||
|
}) {
|
||||||
|
const params = await props.params;
|
||||||
|
redirect(
|
||||||
|
`/${params.orgId}/settings/resources/private/${params.niceId}/general`
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,229 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import {
|
||||||
|
SettingsContainer,
|
||||||
|
SettingsSection,
|
||||||
|
SettingsSectionBody,
|
||||||
|
SettingsSectionDescription,
|
||||||
|
SettingsSectionFooter,
|
||||||
|
SettingsSectionForm,
|
||||||
|
SettingsSectionHeader,
|
||||||
|
SettingsSectionTitle,
|
||||||
|
SettingsFormGrid
|
||||||
|
} from "@app/components/Settings";
|
||||||
|
import { SshServerSettingsFields } from "@app/components/SshServerSettingsFields";
|
||||||
|
import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
|
||||||
|
import { Button } from "@app/components/ui/button";
|
||||||
|
import { Form } from "@app/components/ui/form";
|
||||||
|
import { usePaidStatus } from "@app/hooks/usePaidStatus";
|
||||||
|
import {
|
||||||
|
createSshFormSchema,
|
||||||
|
inferSshPamMode
|
||||||
|
} from "@app/lib/privateResourceForm";
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import { tierMatrix } from "@server/lib/billing/tierMatrix";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
import { useActionState, useMemo, useState } from "react";
|
||||||
|
import { useForm } from "react-hook-form";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { PrivateResourceSshFields } from "../../PrivateResourceSshFields";
|
||||||
|
import { buildSelectedSitesForResource } from "../../privateResourceUtils";
|
||||||
|
import {
|
||||||
|
asAnyControl,
|
||||||
|
asAnySetValue,
|
||||||
|
asAnyWatch
|
||||||
|
} from "../../formControlUtils";
|
||||||
|
import { useSaveSiteResource } from "../../useSaveSiteResource";
|
||||||
|
import type { Selectedsite } from "@app/components/site-selector";
|
||||||
|
|
||||||
|
export default function PrivateResourceSshPage() {
|
||||||
|
const t = useTranslations();
|
||||||
|
const { save, siteResource } = useSaveSiteResource();
|
||||||
|
const { isPaidUser } = usePaidStatus();
|
||||||
|
const sshSectionDisabled = !isPaidUser(tierMatrix.advancedPrivateResources);
|
||||||
|
const isNative = siteResource.authDaemonMode === "native";
|
||||||
|
const [sshServerMode] = useState<"standard" | "native">(
|
||||||
|
isNative ? "native" : "standard"
|
||||||
|
);
|
||||||
|
const [selectedSites, setSelectedSites] = useState(() =>
|
||||||
|
buildSelectedSitesForResource(siteResource)
|
||||||
|
);
|
||||||
|
|
||||||
|
const formSchema = useMemo(
|
||||||
|
() => createSshFormSchema(t, { isNative }),
|
||||||
|
[t, isNative]
|
||||||
|
);
|
||||||
|
type FormValues = z.infer<typeof formSchema>;
|
||||||
|
|
||||||
|
const form = useForm<FormValues>({
|
||||||
|
resolver: zodResolver(formSchema),
|
||||||
|
defaultValues: {
|
||||||
|
siteIds: siteResource.siteIds,
|
||||||
|
mode: "ssh",
|
||||||
|
destination: siteResource.destination ?? "",
|
||||||
|
alias: siteResource.alias ?? null,
|
||||||
|
destinationPort: siteResource.destinationPort ?? null,
|
||||||
|
pamMode: inferSshPamMode(
|
||||||
|
siteResource.authDaemonMode,
|
||||||
|
siteResource.pamMode
|
||||||
|
),
|
||||||
|
standardDaemonLocation: isNative
|
||||||
|
? "site"
|
||||||
|
: siteResource.authDaemonMode === "remote"
|
||||||
|
? "remote"
|
||||||
|
: "site",
|
||||||
|
authDaemonPort: siteResource.authDaemonPort
|
||||||
|
? String(siteResource.authDaemonPort)
|
||||||
|
: "22123"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const pamMode = form.watch("pamMode");
|
||||||
|
const standardDaemonLocation = form.watch("standardDaemonLocation");
|
||||||
|
const authDaemonPort = form.watch("authDaemonPort");
|
||||||
|
|
||||||
|
function trimSitesToFirst() {
|
||||||
|
if (selectedSites.length <= 1) return;
|
||||||
|
|
||||||
|
const first = selectedSites.slice(0, 1);
|
||||||
|
setSelectedSites(first);
|
||||||
|
form.setValue(
|
||||||
|
"siteIds",
|
||||||
|
first.map((s: Selectedsite) => s.siteId),
|
||||||
|
{ shouldValidate: true }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handlePamModeChange(value: "passthrough" | "push") {
|
||||||
|
form.setValue("pamMode", value, { shouldValidate: true });
|
||||||
|
|
||||||
|
if (value === "push") {
|
||||||
|
if (
|
||||||
|
standardDaemonLocation !== "remote" &&
|
||||||
|
selectedSites.length > 1
|
||||||
|
) {
|
||||||
|
trimSitesToFirst();
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
form.setValue("authDaemonPort", "22123", { shouldValidate: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDaemonLocationChange(value: "site" | "remote") {
|
||||||
|
form.setValue("standardDaemonLocation", value, {
|
||||||
|
shouldValidate: true
|
||||||
|
});
|
||||||
|
|
||||||
|
if (value === "site") {
|
||||||
|
form.setValue("authDaemonPort", "22123", { shouldValidate: true });
|
||||||
|
trimSitesToFirst();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const [, formAction, saveLoading] = useActionState(async () => {
|
||||||
|
const isValid = await form.trigger();
|
||||||
|
if (!isValid) return;
|
||||||
|
|
||||||
|
const data = form.getValues();
|
||||||
|
const effectiveAuthDaemonMode = isNative
|
||||||
|
? "native"
|
||||||
|
: data.standardDaemonLocation;
|
||||||
|
const effectiveAuthDaemonPort =
|
||||||
|
!isNative &&
|
||||||
|
data.pamMode === "push" &&
|
||||||
|
data.standardDaemonLocation === "remote"
|
||||||
|
? Number(data.authDaemonPort)
|
||||||
|
: null;
|
||||||
|
|
||||||
|
await save({
|
||||||
|
siteIds: data.siteIds,
|
||||||
|
mode: "ssh",
|
||||||
|
destination: isNative ? null : data.destination,
|
||||||
|
alias: data.alias,
|
||||||
|
destinationPort: isNative ? null : data.destinationPort,
|
||||||
|
authDaemonMode: effectiveAuthDaemonMode,
|
||||||
|
authDaemonPort: effectiveAuthDaemonPort,
|
||||||
|
pamMode: data.pamMode
|
||||||
|
});
|
||||||
|
}, null);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SettingsContainer>
|
||||||
|
<PaidFeaturesAlert tiers={tierMatrix.advancedPrivateResources} />
|
||||||
|
<SettingsSection>
|
||||||
|
<SettingsSectionHeader>
|
||||||
|
<SettingsSectionTitle>
|
||||||
|
{t("sshSettings")}
|
||||||
|
</SettingsSectionTitle>
|
||||||
|
<SettingsSectionDescription>
|
||||||
|
{t("editInternalResourceDialogDestinationDescription")}
|
||||||
|
</SettingsSectionDescription>
|
||||||
|
</SettingsSectionHeader>
|
||||||
|
|
||||||
|
<fieldset
|
||||||
|
disabled={sshSectionDisabled}
|
||||||
|
className={
|
||||||
|
sshSectionDisabled
|
||||||
|
? "opacity-50 pointer-events-none"
|
||||||
|
: ""
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Form {...form}>
|
||||||
|
<SettingsSectionBody>
|
||||||
|
<SettingsSectionForm variant="half">
|
||||||
|
<SettingsFormGrid>
|
||||||
|
<SshServerSettingsFields
|
||||||
|
idPrefix="private-ssh-edit"
|
||||||
|
pamMode={pamMode}
|
||||||
|
standardDaemonLocation={
|
||||||
|
standardDaemonLocation
|
||||||
|
}
|
||||||
|
authDaemonPort={authDaemonPort}
|
||||||
|
onPamModeChange={handlePamModeChange}
|
||||||
|
onStandardDaemonLocationChange={
|
||||||
|
handleDaemonLocationChange
|
||||||
|
}
|
||||||
|
onAuthDaemonPortChange={(value) =>
|
||||||
|
form.setValue(
|
||||||
|
"authDaemonPort",
|
||||||
|
value,
|
||||||
|
{ shouldValidate: true }
|
||||||
|
)
|
||||||
|
}
|
||||||
|
authDaemonPortError={
|
||||||
|
form.formState.errors.authDaemonPort
|
||||||
|
?.message
|
||||||
|
}
|
||||||
|
sshServerMode={sshServerMode}
|
||||||
|
serverModeDisplay="badge"
|
||||||
|
/>
|
||||||
|
<PrivateResourceSshFields
|
||||||
|
control={asAnyControl(form.control)}
|
||||||
|
setValue={asAnySetValue(form.setValue)}
|
||||||
|
watch={asAnyWatch(form.watch)}
|
||||||
|
orgId={siteResource.orgId}
|
||||||
|
selectedSites={selectedSites}
|
||||||
|
onSelectedSitesChange={setSelectedSites}
|
||||||
|
showSshSettings={false}
|
||||||
|
embedInParentGrid
|
||||||
|
showPaidFeaturesAlert={false}
|
||||||
|
isNativeSsh={isNative}
|
||||||
|
/>
|
||||||
|
</SettingsFormGrid>
|
||||||
|
</SettingsSectionForm>
|
||||||
|
</SettingsSectionBody>
|
||||||
|
|
||||||
|
<SettingsSectionFooter>
|
||||||
|
<form action={formAction}>
|
||||||
|
<Button type="submit" loading={saveLoading}>
|
||||||
|
{t("saveSettings")}
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</SettingsSectionFooter>
|
||||||
|
</Form>
|
||||||
|
</fieldset>
|
||||||
|
</SettingsSection>
|
||||||
|
</SettingsContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,615 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import {
|
||||||
|
SettingsFormCell,
|
||||||
|
SettingsFormGrid,
|
||||||
|
SettingsSection,
|
||||||
|
SettingsSectionBody,
|
||||||
|
SettingsSectionDescription,
|
||||||
|
SettingsSectionForm,
|
||||||
|
SettingsSectionHeader,
|
||||||
|
SettingsSectionTitle
|
||||||
|
} from "@app/components/Settings";
|
||||||
|
import HeaderTitle from "@app/components/SettingsSectionTitle";
|
||||||
|
import {
|
||||||
|
OptionSelect,
|
||||||
|
type OptionSelectOption
|
||||||
|
} from "@app/components/OptionSelect";
|
||||||
|
import DomainPicker from "@app/components/DomainPicker";
|
||||||
|
import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
|
||||||
|
import { Button } from "@app/components/ui/button";
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
FormControl,
|
||||||
|
FormDescription,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage
|
||||||
|
} from "@app/components/ui/form";
|
||||||
|
import { Input } from "@app/components/ui/input";
|
||||||
|
import type { Selectedsite } from "@app/components/site-selector";
|
||||||
|
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||||
|
import { usePaidStatus } from "@app/hooks/usePaidStatus";
|
||||||
|
import { toast } from "@app/hooks/useToast";
|
||||||
|
import { createApiClient, formatAxiosError } from "@app/lib/api";
|
||||||
|
import {
|
||||||
|
buildCreateSiteResourcePayload,
|
||||||
|
createCreateFormSchema,
|
||||||
|
type PrivateResourceMode
|
||||||
|
} from "@app/lib/privateResourceForm";
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import { tierMatrix } from "@server/lib/billing/tierMatrix";
|
||||||
|
import type { SiteResource } from "@server/db";
|
||||||
|
import { GetSiteResponse } from "@server/routers/site/getSite";
|
||||||
|
import type ResponseT from "@server/types/Response";
|
||||||
|
import { AxiosResponse } from "axios";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { useParams, useRouter, useSearchParams } from "next/navigation";
|
||||||
|
import { useEffect, useMemo, useState, useTransition } from "react";
|
||||||
|
import { useForm } from "react-hook-form";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { PrivateResourceSitesField } from "../PrivateResourceSitesField";
|
||||||
|
import { PrivateResourceHttpFields } from "../PrivateResourceHttpFields";
|
||||||
|
import { PrivateResourceSshFields } from "../PrivateResourceSshFields";
|
||||||
|
import {
|
||||||
|
PrivateResourceAliasField,
|
||||||
|
PrivateResourceCidrDestinationField,
|
||||||
|
PrivateResourceHostDestinationFields
|
||||||
|
} from "../PrivateResourceDestinationFields";
|
||||||
|
import { asAnyControl, asAnySetValue, asAnyWatch } from "../formControlUtils";
|
||||||
|
|
||||||
|
export default function CreatePrivateResourcePage() {
|
||||||
|
const params = useParams();
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
const router = useRouter();
|
||||||
|
const t = useTranslations();
|
||||||
|
const { env } = useEnvContext();
|
||||||
|
const api = createApiClient({ env });
|
||||||
|
const orgId = params.orgId as string;
|
||||||
|
const disableEnterpriseFeatures = env.flags.disableEnterpriseFeatures;
|
||||||
|
const { isPaidUser } = usePaidStatus();
|
||||||
|
const httpSectionDisabled = !isPaidUser(
|
||||||
|
tierMatrix.advancedPrivateResources
|
||||||
|
);
|
||||||
|
const sshSectionDisabled = !isPaidUser(tierMatrix.advancedPrivateResources);
|
||||||
|
const [isSubmitting, startTransition] = useTransition();
|
||||||
|
|
||||||
|
const siteIdParam = searchParams.get("siteId");
|
||||||
|
const siteIdNumber =
|
||||||
|
siteIdParam && Number.isInteger(Number(siteIdParam))
|
||||||
|
? Number(siteIdParam)
|
||||||
|
: null;
|
||||||
|
|
||||||
|
const [selectedSites, setSelectedSites] = useState<Selectedsite[]>([]);
|
||||||
|
|
||||||
|
const formSchema = useMemo(() => createCreateFormSchema(t), [t]);
|
||||||
|
type FormValues = z.infer<typeof formSchema>;
|
||||||
|
|
||||||
|
const form = useForm<FormValues>({
|
||||||
|
resolver: zodResolver(formSchema),
|
||||||
|
defaultValues: {
|
||||||
|
name: "",
|
||||||
|
siteIds: [],
|
||||||
|
mode: "host",
|
||||||
|
destination: "",
|
||||||
|
alias: null,
|
||||||
|
destinationPort: null,
|
||||||
|
scheme: "http",
|
||||||
|
ssl: true,
|
||||||
|
httpConfigSubdomain: null,
|
||||||
|
httpConfigDomainId: null,
|
||||||
|
httpConfigFullDomain: null,
|
||||||
|
authDaemonMode: "native",
|
||||||
|
standardDaemonLocation: "site",
|
||||||
|
authDaemonPort: null,
|
||||||
|
pamMode: "passthrough",
|
||||||
|
disableIcmp: false
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!siteIdNumber) return;
|
||||||
|
|
||||||
|
void api
|
||||||
|
.get<ResponseT<GetSiteResponse>>(`/site/${siteIdNumber}`)
|
||||||
|
.then((res) => {
|
||||||
|
const site = res.data.data;
|
||||||
|
if (!site || site.orgId !== orgId) return;
|
||||||
|
const selected: Selectedsite = {
|
||||||
|
siteId: site.siteId,
|
||||||
|
name: site.name,
|
||||||
|
type: site.type as Selectedsite["type"]
|
||||||
|
};
|
||||||
|
setSelectedSites([selected]);
|
||||||
|
form.setValue("siteIds", [site.siteId]);
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
}, [api, form, orgId, siteIdNumber]);
|
||||||
|
|
||||||
|
const mode = form.watch("mode");
|
||||||
|
const authDaemonMode = form.watch("authDaemonMode");
|
||||||
|
const isNativeSsh = mode === "ssh" && authDaemonMode === "native";
|
||||||
|
|
||||||
|
const modeOptions: OptionSelectOption<PrivateResourceMode>[] = [
|
||||||
|
{ value: "host", label: t("createInternalResourceDialogModeHost") },
|
||||||
|
{ value: "cidr", label: t("createInternalResourceDialogModeCidr") },
|
||||||
|
...(!disableEnterpriseFeatures
|
||||||
|
? [
|
||||||
|
{
|
||||||
|
value: "http" as const,
|
||||||
|
label: t("createInternalResourceDialogModeHttp")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "ssh" as const,
|
||||||
|
label: t("createInternalResourceDialogModeSsh")
|
||||||
|
}
|
||||||
|
]
|
||||||
|
: [])
|
||||||
|
];
|
||||||
|
|
||||||
|
const submitDisabled =
|
||||||
|
isSubmitting ||
|
||||||
|
(mode === "http" && httpSectionDisabled) ||
|
||||||
|
(mode === "ssh" && sshSectionDisabled);
|
||||||
|
|
||||||
|
function onSubmit(values: FormValues) {
|
||||||
|
startTransition(async () => {
|
||||||
|
try {
|
||||||
|
const res = await api.put<
|
||||||
|
AxiosResponse<ResponseT<SiteResource>>
|
||||||
|
>(
|
||||||
|
`/org/${orgId}/site-resource`,
|
||||||
|
buildCreateSiteResourcePayload({
|
||||||
|
...values,
|
||||||
|
destination:
|
||||||
|
values.destination?.trim() &&
|
||||||
|
values.destination.trim().length > 0
|
||||||
|
? values.destination.trim()
|
||||||
|
: null
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
toast({
|
||||||
|
title: t("createInternalResourceDialogSuccess"),
|
||||||
|
description: t(
|
||||||
|
"createInternalResourceDialogInternalResourceCreatedSuccessfully"
|
||||||
|
)
|
||||||
|
});
|
||||||
|
|
||||||
|
const created = (res.data as unknown as ResponseT<SiteResource>)
|
||||||
|
.data;
|
||||||
|
if (!created) {
|
||||||
|
throw new Error("Failed to create private resource");
|
||||||
|
}
|
||||||
|
|
||||||
|
router.push(
|
||||||
|
`/${orgId}/settings/resources/private/${created.niceId}/${created.mode}`
|
||||||
|
);
|
||||||
|
} catch (error) {
|
||||||
|
toast({
|
||||||
|
title: t("createInternalResourceDialogError"),
|
||||||
|
description: formatAxiosError(
|
||||||
|
error,
|
||||||
|
t(
|
||||||
|
"createInternalResourceDialogFailedToCreateInternalResource"
|
||||||
|
)
|
||||||
|
),
|
||||||
|
variant: "destructive"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="flex items-start justify-between gap-4">
|
||||||
|
<HeaderTitle
|
||||||
|
title={t(
|
||||||
|
"createInternalResourceDialogCreateClientResource"
|
||||||
|
)}
|
||||||
|
description={t(
|
||||||
|
"createInternalResourceDialogCreateClientResourceDescription"
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Button variant="outline" asChild>
|
||||||
|
<Link href={`/${orgId}/settings/resources/private`}>
|
||||||
|
{t("privateResourceCreatePageSeeAll")}
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Form {...form}>
|
||||||
|
<form
|
||||||
|
id="create-private-resource-form"
|
||||||
|
onSubmit={form.handleSubmit(onSubmit)}
|
||||||
|
className="space-y-6"
|
||||||
|
>
|
||||||
|
{/* General */}
|
||||||
|
<SettingsSection>
|
||||||
|
<SettingsSectionHeader>
|
||||||
|
<SettingsSectionTitle>
|
||||||
|
{t("resourceCreateGeneral")}
|
||||||
|
</SettingsSectionTitle>
|
||||||
|
<SettingsSectionDescription>
|
||||||
|
{t("resourceCreateGeneralDescription")}
|
||||||
|
</SettingsSectionDescription>
|
||||||
|
</SettingsSectionHeader>
|
||||||
|
<SettingsSectionBody>
|
||||||
|
<SettingsSectionForm variant="half">
|
||||||
|
<SettingsFormGrid>
|
||||||
|
<SettingsFormCell span="half">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="name"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>
|
||||||
|
{t("name")}
|
||||||
|
</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input {...field} />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
<FormDescription>
|
||||||
|
{t(
|
||||||
|
"resourceNameDescription"
|
||||||
|
)}
|
||||||
|
</FormDescription>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</SettingsFormCell>
|
||||||
|
|
||||||
|
<SettingsFormCell span="full">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="mode"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>
|
||||||
|
{t("type")}
|
||||||
|
</FormLabel>
|
||||||
|
<OptionSelect<PrivateResourceMode>
|
||||||
|
options={modeOptions}
|
||||||
|
value={field.value}
|
||||||
|
onChange={(newMode) => {
|
||||||
|
field.onChange(
|
||||||
|
newMode
|
||||||
|
);
|
||||||
|
if (
|
||||||
|
newMode ===
|
||||||
|
"ssh"
|
||||||
|
) {
|
||||||
|
form.setValue(
|
||||||
|
"authDaemonMode",
|
||||||
|
"native"
|
||||||
|
);
|
||||||
|
form.setValue(
|
||||||
|
"standardDaemonLocation",
|
||||||
|
"site"
|
||||||
|
);
|
||||||
|
form.setValue(
|
||||||
|
"destination",
|
||||||
|
null
|
||||||
|
);
|
||||||
|
form.setValue(
|
||||||
|
"destinationPort",
|
||||||
|
null
|
||||||
|
);
|
||||||
|
} else if (
|
||||||
|
newMode ===
|
||||||
|
"http"
|
||||||
|
) {
|
||||||
|
form.setValue(
|
||||||
|
"destinationPort",
|
||||||
|
443
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
form.setValue(
|
||||||
|
"destinationPort",
|
||||||
|
null
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
cols={4}
|
||||||
|
/>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</SettingsFormCell>
|
||||||
|
|
||||||
|
{mode === "http" && (
|
||||||
|
<SettingsFormCell span="full">
|
||||||
|
<FormItem>
|
||||||
|
<DomainPicker
|
||||||
|
orgId={orgId}
|
||||||
|
cols={2}
|
||||||
|
hideFreeDomain
|
||||||
|
onDomainChange={(res) => {
|
||||||
|
if (!res) {
|
||||||
|
form.setValue(
|
||||||
|
"httpConfigSubdomain",
|
||||||
|
null
|
||||||
|
);
|
||||||
|
form.setValue(
|
||||||
|
"httpConfigDomainId",
|
||||||
|
null
|
||||||
|
);
|
||||||
|
form.setValue(
|
||||||
|
"httpConfigFullDomain",
|
||||||
|
null
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
form.setValue(
|
||||||
|
"httpConfigSubdomain",
|
||||||
|
res.subdomain ??
|
||||||
|
null
|
||||||
|
);
|
||||||
|
form.setValue(
|
||||||
|
"httpConfigDomainId",
|
||||||
|
res.domainId
|
||||||
|
);
|
||||||
|
form.setValue(
|
||||||
|
"httpConfigFullDomain",
|
||||||
|
res.fullDomain
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<FormMessage />
|
||||||
|
<FormDescription>
|
||||||
|
{t(
|
||||||
|
"resourceDomainDescription"
|
||||||
|
)}
|
||||||
|
</FormDescription>
|
||||||
|
</FormItem>
|
||||||
|
</SettingsFormCell>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{(mode === "host" ||
|
||||||
|
(mode === "ssh" && !isNativeSsh)) && (
|
||||||
|
<SettingsFormCell span="half">
|
||||||
|
<PrivateResourceAliasField
|
||||||
|
control={asAnyControl(
|
||||||
|
form.control
|
||||||
|
)}
|
||||||
|
watch={asAnyWatch(form.watch)}
|
||||||
|
labelPrefix="create"
|
||||||
|
disabled={
|
||||||
|
mode === "ssh" &&
|
||||||
|
sshSectionDisabled
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</SettingsFormCell>
|
||||||
|
)}
|
||||||
|
</SettingsFormGrid>
|
||||||
|
</SettingsSectionForm>
|
||||||
|
</SettingsSectionBody>
|
||||||
|
</SettingsSection>
|
||||||
|
|
||||||
|
{/* Host destination */}
|
||||||
|
{mode === "host" && (
|
||||||
|
<SettingsSection>
|
||||||
|
<SettingsSectionHeader>
|
||||||
|
<SettingsSectionTitle>
|
||||||
|
{t("hostSettings")}
|
||||||
|
</SettingsSectionTitle>
|
||||||
|
<SettingsSectionDescription>
|
||||||
|
{t(
|
||||||
|
"editInternalResourceDialogDestinationDescription"
|
||||||
|
)}
|
||||||
|
</SettingsSectionDescription>
|
||||||
|
</SettingsSectionHeader>
|
||||||
|
<SettingsSectionBody>
|
||||||
|
<SettingsSectionForm variant="half">
|
||||||
|
<SettingsFormGrid>
|
||||||
|
<SettingsFormCell span="half">
|
||||||
|
<PrivateResourceSitesField
|
||||||
|
control={form.control}
|
||||||
|
orgId={orgId}
|
||||||
|
selectedSites={selectedSites}
|
||||||
|
onSelectedSitesChange={
|
||||||
|
setSelectedSites
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</SettingsFormCell>
|
||||||
|
<SettingsFormCell span="half">
|
||||||
|
<PrivateResourceHostDestinationFields
|
||||||
|
control={asAnyControl(
|
||||||
|
form.control
|
||||||
|
)}
|
||||||
|
watch={asAnyWatch(form.watch)}
|
||||||
|
labelPrefix="create"
|
||||||
|
hideAlias
|
||||||
|
/>
|
||||||
|
</SettingsFormCell>
|
||||||
|
</SettingsFormGrid>
|
||||||
|
</SettingsSectionForm>
|
||||||
|
</SettingsSectionBody>
|
||||||
|
</SettingsSection>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* CIDR destination */}
|
||||||
|
{mode === "cidr" && (
|
||||||
|
<SettingsSection>
|
||||||
|
<SettingsSectionHeader>
|
||||||
|
<SettingsSectionTitle>
|
||||||
|
{t("cidrSettings")}
|
||||||
|
</SettingsSectionTitle>
|
||||||
|
<SettingsSectionDescription>
|
||||||
|
{t(
|
||||||
|
"editInternalResourceDialogDestinationCidrDescription"
|
||||||
|
)}
|
||||||
|
</SettingsSectionDescription>
|
||||||
|
</SettingsSectionHeader>
|
||||||
|
<SettingsSectionBody>
|
||||||
|
<SettingsSectionForm variant="half">
|
||||||
|
<SettingsFormGrid>
|
||||||
|
<SettingsFormCell span="half">
|
||||||
|
<PrivateResourceSitesField
|
||||||
|
control={form.control}
|
||||||
|
orgId={orgId}
|
||||||
|
selectedSites={selectedSites}
|
||||||
|
onSelectedSitesChange={
|
||||||
|
setSelectedSites
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</SettingsFormCell>
|
||||||
|
<SettingsFormCell span="half">
|
||||||
|
<PrivateResourceCidrDestinationField
|
||||||
|
control={asAnyControl(
|
||||||
|
form.control
|
||||||
|
)}
|
||||||
|
labelPrefix="create"
|
||||||
|
/>
|
||||||
|
</SettingsFormCell>
|
||||||
|
</SettingsFormGrid>
|
||||||
|
</SettingsSectionForm>
|
||||||
|
</SettingsSectionBody>
|
||||||
|
</SettingsSection>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* HTTP configuration */}
|
||||||
|
{mode === "http" && (
|
||||||
|
<SettingsSection>
|
||||||
|
<PaidFeaturesAlert
|
||||||
|
tiers={tierMatrix.advancedPrivateResources}
|
||||||
|
/>
|
||||||
|
<SettingsSectionHeader>
|
||||||
|
<SettingsSectionTitle>
|
||||||
|
{t("httpSettings")}
|
||||||
|
</SettingsSectionTitle>
|
||||||
|
<SettingsSectionDescription>
|
||||||
|
{t(
|
||||||
|
"editInternalResourceDialogHttpConfigurationDescription"
|
||||||
|
)}
|
||||||
|
</SettingsSectionDescription>
|
||||||
|
</SettingsSectionHeader>
|
||||||
|
<fieldset
|
||||||
|
disabled={httpSectionDisabled}
|
||||||
|
className={
|
||||||
|
httpSectionDisabled
|
||||||
|
? "opacity-50 pointer-events-none"
|
||||||
|
: ""
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<SettingsSectionBody>
|
||||||
|
<SettingsSectionForm variant="half">
|
||||||
|
<SettingsFormGrid>
|
||||||
|
<SettingsFormCell span="half">
|
||||||
|
<PrivateResourceSitesField
|
||||||
|
control={form.control}
|
||||||
|
orgId={orgId}
|
||||||
|
selectedSites={
|
||||||
|
selectedSites
|
||||||
|
}
|
||||||
|
onSelectedSitesChange={
|
||||||
|
setSelectedSites
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</SettingsFormCell>
|
||||||
|
<SettingsFormCell span="full">
|
||||||
|
<PrivateResourceHttpFields
|
||||||
|
control={asAnyControl(
|
||||||
|
form.control
|
||||||
|
)}
|
||||||
|
setValue={asAnySetValue(
|
||||||
|
form.setValue
|
||||||
|
)}
|
||||||
|
orgId={orgId}
|
||||||
|
watch={asAnyWatch(
|
||||||
|
form.watch
|
||||||
|
)}
|
||||||
|
disabled={
|
||||||
|
httpSectionDisabled
|
||||||
|
}
|
||||||
|
labelPrefix="create"
|
||||||
|
hideDomainPicker
|
||||||
|
hidePaidFeaturesAlert
|
||||||
|
/>
|
||||||
|
</SettingsFormCell>
|
||||||
|
</SettingsFormGrid>
|
||||||
|
</SettingsSectionForm>
|
||||||
|
</SettingsSectionBody>
|
||||||
|
</fieldset>
|
||||||
|
</SettingsSection>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* SSH server */}
|
||||||
|
{mode === "ssh" && (
|
||||||
|
<SettingsSection>
|
||||||
|
<PaidFeaturesAlert
|
||||||
|
tiers={tierMatrix.advancedPrivateResources}
|
||||||
|
/>
|
||||||
|
<SettingsSectionHeader>
|
||||||
|
<SettingsSectionTitle>
|
||||||
|
{t("sshServer")}
|
||||||
|
</SettingsSectionTitle>
|
||||||
|
<SettingsSectionDescription>
|
||||||
|
{t("sshServerDescription")}
|
||||||
|
</SettingsSectionDescription>
|
||||||
|
</SettingsSectionHeader>
|
||||||
|
<fieldset
|
||||||
|
disabled={sshSectionDisabled}
|
||||||
|
className={
|
||||||
|
sshSectionDisabled
|
||||||
|
? "opacity-50 pointer-events-none"
|
||||||
|
: ""
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<SettingsSectionBody>
|
||||||
|
<SettingsSectionForm variant="half">
|
||||||
|
<PrivateResourceSshFields
|
||||||
|
control={asAnyControl(form.control)}
|
||||||
|
setValue={asAnySetValue(
|
||||||
|
form.setValue
|
||||||
|
)}
|
||||||
|
watch={asAnyWatch(form.watch)}
|
||||||
|
orgId={orgId}
|
||||||
|
disabled={sshSectionDisabled}
|
||||||
|
selectedSites={selectedSites}
|
||||||
|
onSelectedSitesChange={
|
||||||
|
setSelectedSites
|
||||||
|
}
|
||||||
|
labelPrefix="create"
|
||||||
|
showSshSettings={true}
|
||||||
|
layout="wizard"
|
||||||
|
showPaidFeaturesAlert={false}
|
||||||
|
hideAlias
|
||||||
|
/>
|
||||||
|
</SettingsSectionForm>
|
||||||
|
</SettingsSectionBody>
|
||||||
|
</fieldset>
|
||||||
|
</SettingsSection>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex justify-end space-x-2 mt-8">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() =>
|
||||||
|
router.push(
|
||||||
|
`/${orgId}/settings/resources/private`
|
||||||
|
)
|
||||||
|
}
|
||||||
|
disabled={isSubmitting}
|
||||||
|
>
|
||||||
|
{t("createInternalResourceDialogCancel")}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
form="create-private-resource-form"
|
||||||
|
disabled={submitDisabled}
|
||||||
|
loading={isSubmitting}
|
||||||
|
>
|
||||||
|
{t("createInternalResourceDialogCreateResource")}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
import type {
|
||||||
|
Control,
|
||||||
|
FieldValues,
|
||||||
|
UseFormSetValue,
|
||||||
|
UseFormWatch
|
||||||
|
} from "react-hook-form";
|
||||||
|
|
||||||
|
export function asAnyControl<T extends FieldValues>(
|
||||||
|
control: Control<T>
|
||||||
|
): Control<any> {
|
||||||
|
return control as Control<any>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function asAnySetValue<T extends FieldValues>(
|
||||||
|
setValue: UseFormSetValue<T>
|
||||||
|
): UseFormSetValue<any> {
|
||||||
|
return setValue as UseFormSetValue<any>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function asAnyWatch<T extends FieldValues>(
|
||||||
|
watch: UseFormWatch<T>
|
||||||
|
): UseFormWatch<any> {
|
||||||
|
return watch as UseFormWatch<any>;
|
||||||
|
}
|
||||||
@@ -122,6 +122,7 @@ export default async function ClientResourcesPage(
|
|||||||
aliasAddress: siteResource.aliasAddress || null,
|
aliasAddress: siteResource.aliasAddress || null,
|
||||||
siteNiceIds: siteResource.siteNiceIds,
|
siteNiceIds: siteResource.siteNiceIds,
|
||||||
niceId: siteResource.niceId,
|
niceId: siteResource.niceId,
|
||||||
|
enabled: siteResource.enabled,
|
||||||
tcpPortRangeString: siteResource.tcpPortRangeString || null,
|
tcpPortRangeString: siteResource.tcpPortRangeString || null,
|
||||||
udpPortRangeString: siteResource.udpPortRangeString || null,
|
udpPortRangeString: siteResource.udpPortRangeString || null,
|
||||||
disableIcmp: siteResource.disableIcmp || false,
|
disableIcmp: siteResource.disableIcmp || false,
|
||||||
|
|||||||
@@ -0,0 +1,36 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import type { Selectedsite } from "@app/components/site-selector";
|
||||||
|
import type { SiteResourceData } from "@app/lib/privateResourceForm";
|
||||||
|
|
||||||
|
export function buildSelectedSitesForResource(
|
||||||
|
resource: Pick<SiteResourceData, "siteIds" | "siteNames">
|
||||||
|
): Selectedsite[] {
|
||||||
|
return resource.siteIds.map((siteId, idx) => ({
|
||||||
|
name: resource.siteNames[idx] ?? "",
|
||||||
|
siteId,
|
||||||
|
type: "newt" as const
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getSshSingleSiteMode(
|
||||||
|
authDaemonMode?: string | null,
|
||||||
|
pamMode?: string | null
|
||||||
|
): boolean {
|
||||||
|
return (
|
||||||
|
authDaemonMode === "native" ||
|
||||||
|
(pamMode === "push" && authDaemonMode === "site")
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getSshUseMultiSiteTargetForm(
|
||||||
|
isNative: boolean,
|
||||||
|
authDaemonMode?: string | null,
|
||||||
|
pamMode?: string | null
|
||||||
|
): boolean {
|
||||||
|
if (isNative) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return authDaemonMode !== "site" || pamMode === "passthrough";
|
||||||
|
}
|
||||||
@@ -0,0 +1,106 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||||
|
import { useSiteResourceContext } from "@app/hooks/useSiteResourceContext";
|
||||||
|
import { toast } from "@app/hooks/useToast";
|
||||||
|
import { createApiClient, formatAxiosError } from "@app/lib/api";
|
||||||
|
import { getPrivateResourceSettingsHref } from "@app/lib/launcherResourceAdminHref";
|
||||||
|
import {
|
||||||
|
buildUpdateSiteResourcePayload,
|
||||||
|
mergeFormValuesWithResource,
|
||||||
|
type PrivateResourceFormValues
|
||||||
|
} from "@app/lib/privateResourceForm";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
|
||||||
|
export function useSaveSiteResource() {
|
||||||
|
const t = useTranslations();
|
||||||
|
const router = useRouter();
|
||||||
|
const { env } = useEnvContext();
|
||||||
|
const api = createApiClient({ env });
|
||||||
|
const { siteResource, updateSiteResource, access } =
|
||||||
|
useSiteResourceContext();
|
||||||
|
|
||||||
|
async function save(
|
||||||
|
partial: Partial<PrivateResourceFormValues>,
|
||||||
|
options?: { successMessage?: string }
|
||||||
|
) {
|
||||||
|
const merged = mergeFormValuesWithResource(siteResource, partial);
|
||||||
|
const isNativeSsh =
|
||||||
|
merged.mode === "ssh" && merged.authDaemonMode === "native";
|
||||||
|
const trimmedDestination = merged.destination?.trim();
|
||||||
|
|
||||||
|
const payload = buildUpdateSiteResourcePayload(
|
||||||
|
{
|
||||||
|
...merged,
|
||||||
|
destination: isNativeSsh
|
||||||
|
? null
|
||||||
|
: trimmedDestination && trimmedDestination.length > 0
|
||||||
|
? trimmedDestination
|
||||||
|
: null
|
||||||
|
},
|
||||||
|
access
|
||||||
|
);
|
||||||
|
|
||||||
|
try {
|
||||||
|
await api.post(`/site-resource/${siteResource.id}`, payload);
|
||||||
|
|
||||||
|
updateSiteResource({
|
||||||
|
name: merged.name,
|
||||||
|
niceId: merged.niceId ?? siteResource.niceId,
|
||||||
|
enabled: merged.enabled ?? siteResource.enabled,
|
||||||
|
siteIds: merged.siteIds,
|
||||||
|
mode: merged.mode,
|
||||||
|
destination: merged.destination ?? null,
|
||||||
|
alias: merged.alias ?? null,
|
||||||
|
destinationPort: merged.destinationPort ?? null,
|
||||||
|
scheme: merged.scheme ?? siteResource.scheme,
|
||||||
|
ssl: merged.ssl ?? siteResource.ssl,
|
||||||
|
subdomain: merged.httpConfigSubdomain ?? null,
|
||||||
|
domainId: merged.httpConfigDomainId ?? null,
|
||||||
|
fullDomain: merged.httpConfigFullDomain ?? null,
|
||||||
|
tcpPortRangeString: merged.tcpPortRangeString ?? null,
|
||||||
|
udpPortRangeString: merged.udpPortRangeString ?? null,
|
||||||
|
disableIcmp: merged.disableIcmp ?? false,
|
||||||
|
authDaemonMode: merged.authDaemonMode ?? null,
|
||||||
|
authDaemonPort: merged.authDaemonPort ?? null,
|
||||||
|
pamMode: merged.pamMode ?? null
|
||||||
|
});
|
||||||
|
|
||||||
|
toast({
|
||||||
|
title: t("editInternalResourceDialogSuccess"),
|
||||||
|
description:
|
||||||
|
options?.successMessage ??
|
||||||
|
t(
|
||||||
|
"editInternalResourceDialogInternalResourceUpdatedSuccessfully"
|
||||||
|
)
|
||||||
|
});
|
||||||
|
|
||||||
|
if (merged.niceId && merged.niceId !== siteResource.niceId) {
|
||||||
|
router.replace(
|
||||||
|
getPrivateResourceSettingsHref(
|
||||||
|
siteResource.orgId,
|
||||||
|
merged.niceId
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
router.refresh();
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
toast({
|
||||||
|
title: t("editInternalResourceDialogError"),
|
||||||
|
description: formatAxiosError(
|
||||||
|
error,
|
||||||
|
t(
|
||||||
|
"editInternalResourceDialogFailedToUpdateInternalResource"
|
||||||
|
)
|
||||||
|
),
|
||||||
|
variant: "destructive"
|
||||||
|
});
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return { save, siteResource, access };
|
||||||
|
}
|
||||||
@@ -41,7 +41,7 @@ import {
|
|||||||
import { AxiosResponse } from "axios";
|
import { AxiosResponse } from "axios";
|
||||||
import { useTranslations } from "next-intl";
|
import { useTranslations } from "next-intl";
|
||||||
import { useParams, useRouter } from "next/navigation";
|
import { useParams, useRouter } from "next/navigation";
|
||||||
import { useActionState } from "react";
|
import { useActionState, useState } from "react";
|
||||||
import { useForm } from "react-hook-form";
|
import { useForm } from "react-hook-form";
|
||||||
import { z } from "zod";
|
import { z } from "zod";
|
||||||
|
|
||||||
@@ -137,11 +137,21 @@ function ProxyResourceHttpForm({
|
|||||||
});
|
});
|
||||||
|
|
||||||
const [, formAction, saveLoading] = useActionState(onSubmit, null);
|
const [, formAction, saveLoading] = useActionState(onSubmit, null);
|
||||||
|
const [headersValid, setHeadersValid] = useState(true);
|
||||||
|
|
||||||
async function onSubmit() {
|
async function onSubmit() {
|
||||||
const isValid = await form.trigger();
|
const isValid = await form.trigger();
|
||||||
if (!isValid) return;
|
if (!isValid) return;
|
||||||
|
|
||||||
|
if (!headersValid) {
|
||||||
|
toast({
|
||||||
|
variant: "destructive",
|
||||||
|
title: t("settingsErrorUpdate"),
|
||||||
|
description: t("headersValidationError")
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const data = form.getValues();
|
const data = form.getValues();
|
||||||
|
|
||||||
const res = await api
|
const res = await api
|
||||||
@@ -318,6 +328,9 @@ function ProxyResourceHttpForm({
|
|||||||
onChange={
|
onChange={
|
||||||
field.onChange
|
field.onChange
|
||||||
}
|
}
|
||||||
|
onValidityChange={
|
||||||
|
setHeadersValid
|
||||||
|
}
|
||||||
rows={4}
|
rows={4}
|
||||||
/>
|
/>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
@@ -341,7 +354,7 @@ function ProxyResourceHttpForm({
|
|||||||
<Button
|
<Button
|
||||||
type="submit"
|
type="submit"
|
||||||
loading={saveLoading}
|
loading={saveLoading}
|
||||||
disabled={saveLoading}
|
disabled={saveLoading || !headersValid}
|
||||||
form="http-settings-form"
|
form="http-settings-form"
|
||||||
>
|
>
|
||||||
{t("saveSettings")}
|
{t("saveSettings")}
|
||||||
|
|||||||
@@ -14,14 +14,13 @@ import {
|
|||||||
SettingsSubsectionHeader,
|
SettingsSubsectionHeader,
|
||||||
SettingsSubsectionTitle
|
SettingsSubsectionTitle
|
||||||
} from "@app/components/Settings";
|
} from "@app/components/Settings";
|
||||||
import { StrategySelect, StrategyOption } from "@app/components/StrategySelect";
|
import { SshServerSettingsFields } from "@app/components/SshServerSettingsFields";
|
||||||
import { BrowserGatewayTargetForm } from "@app/components/BrowserGatewayTargetForm";
|
import { BrowserGatewayTargetForm } from "@app/components/BrowserGatewayTargetForm";
|
||||||
import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
|
import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
|
||||||
import { SitesSelector } from "@app/components/site-selector";
|
import { SitesSelector } from "@app/components/site-selector";
|
||||||
import { usePaidStatus } from "@app/hooks/usePaidStatus";
|
import { usePaidStatus } from "@app/hooks/usePaidStatus";
|
||||||
import { tierMatrix, TierFeature } from "@server/lib/billing/tierMatrix";
|
import { tierMatrix, TierFeature } from "@server/lib/billing/tierMatrix";
|
||||||
import { Button } from "@app/components/ui/button";
|
import { Button } from "@app/components/ui/button";
|
||||||
import { Input } from "@app/components/ui/input";
|
|
||||||
import {
|
import {
|
||||||
Form,
|
Form,
|
||||||
FormControl,
|
FormControl,
|
||||||
@@ -35,8 +34,7 @@ import {
|
|||||||
PopoverContent,
|
PopoverContent,
|
||||||
PopoverTrigger
|
PopoverTrigger
|
||||||
} from "@app/components/ui/popover";
|
} from "@app/components/ui/popover";
|
||||||
import { ChevronsUpDown, ExternalLink } from "lucide-react";
|
import { ChevronsUpDown } from "lucide-react";
|
||||||
import { Badge } from "@app/components/ui/badge";
|
|
||||||
import { toast } from "@app/hooks/useToast";
|
import { toast } from "@app/hooks/useToast";
|
||||||
import { useResourceContext } from "@app/hooks/useResourceContext";
|
import { useResourceContext } from "@app/hooks/useResourceContext";
|
||||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||||
@@ -223,6 +221,7 @@ function SshServerForm({
|
|||||||
|
|
||||||
const pamMode = form.watch("pamMode");
|
const pamMode = form.watch("pamMode");
|
||||||
const standardDaemonLocation = form.watch("standardDaemonLocation");
|
const standardDaemonLocation = form.watch("standardDaemonLocation");
|
||||||
|
const authDaemonPort = form.watch("authDaemonPort");
|
||||||
const selectedNativeSite = form.watch("selectedNativeSite");
|
const selectedNativeSite = form.watch("selectedNativeSite");
|
||||||
|
|
||||||
async function save() {
|
async function save() {
|
||||||
@@ -364,35 +363,6 @@ function SshServerForm({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const authMethodOptions: StrategyOption<"passthrough" | "push">[] = [
|
|
||||||
{
|
|
||||||
id: "passthrough",
|
|
||||||
title: t("sshAuthMethodManual"),
|
|
||||||
description: t("sshAuthMethodManualDescription")
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "push",
|
|
||||||
title: t("sshAuthMethodAutomated"),
|
|
||||||
description: t("sshAuthMethodAutomatedDescription")
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const daemonLocationOptions: StrategyOption<"site" | "remote">[] = [
|
|
||||||
{
|
|
||||||
id: "site",
|
|
||||||
title: t("internalResourceAuthDaemonSite"),
|
|
||||||
description: t("sshDaemonLocationSiteDescription")
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "remote",
|
|
||||||
title: t("sshDaemonLocationRemote"),
|
|
||||||
description: t("sshDaemonLocationRemoteDescription")
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const showDaemonLocation = !isNative && pamMode === "push";
|
|
||||||
const showDaemonPort =
|
|
||||||
!isNative && pamMode === "push" && standardDaemonLocation === "remote";
|
|
||||||
const useMultiSiteTargetForm =
|
const useMultiSiteTargetForm =
|
||||||
!isNative &&
|
!isNative &&
|
||||||
(standardDaemonLocation !== "site" || pamMode === "passthrough");
|
(standardDaemonLocation !== "site" || pamMode === "passthrough");
|
||||||
@@ -413,97 +383,37 @@ function SshServerForm({
|
|||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
<SettingsSectionForm variant="half">
|
<SettingsSectionForm variant="half">
|
||||||
<SettingsFormGrid>
|
<SettingsFormGrid>
|
||||||
<SettingsFormCell span="full">
|
<SshServerSettingsFields
|
||||||
<div className="space-y-2">
|
idPrefix="public-ssh-edit"
|
||||||
<p className="font-semibold text-sm">
|
pamMode={pamMode}
|
||||||
{t("sshServerMode")}
|
standardDaemonLocation={
|
||||||
</p>
|
standardDaemonLocation
|
||||||
<Badge variant="secondary">
|
}
|
||||||
{sshServerMode == "standard"
|
authDaemonPort={authDaemonPort}
|
||||||
? t("sshServerModeStandard")
|
onPamModeChange={(value) =>
|
||||||
: t("sshServerModePangolin")}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
</SettingsFormCell>
|
|
||||||
|
|
||||||
<SettingsFormCell span="full">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<p className="font-semibold text-sm">
|
|
||||||
{t("sshAuthenticationMethod")}
|
|
||||||
</p>
|
|
||||||
<StrategySelect<"passthrough" | "push">
|
|
||||||
value={pamMode}
|
|
||||||
options={authMethodOptions}
|
|
||||||
onChange={(value) =>
|
|
||||||
form.setValue("pamMode", value, {
|
form.setValue("pamMode", value, {
|
||||||
shouldValidate: true
|
shouldValidate: true
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
cols={2}
|
onStandardDaemonLocationChange={(value) =>
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</SettingsFormCell>
|
|
||||||
|
|
||||||
{showDaemonLocation && (
|
|
||||||
<SettingsFormCell span="full">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<p className="font-semibold text-sm">
|
|
||||||
{t("sshAuthDaemonLocation")}
|
|
||||||
</p>
|
|
||||||
<StrategySelect<"site" | "remote">
|
|
||||||
value={standardDaemonLocation}
|
|
||||||
options={daemonLocationOptions}
|
|
||||||
onChange={(value) =>
|
|
||||||
form.setValue(
|
form.setValue(
|
||||||
"standardDaemonLocation",
|
"standardDaemonLocation",
|
||||||
value,
|
value,
|
||||||
{
|
{ shouldValidate: true }
|
||||||
shouldValidate: true
|
|
||||||
}
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
cols={2}
|
onAuthDaemonPortChange={(value) =>
|
||||||
|
form.setValue("authDaemonPort", value, {
|
||||||
|
shouldValidate: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
authDaemonPortError={
|
||||||
|
form.formState.errors.authDaemonPort
|
||||||
|
?.message
|
||||||
|
}
|
||||||
|
sshServerMode={sshServerMode}
|
||||||
|
serverModeDisplay="badge"
|
||||||
/>
|
/>
|
||||||
<p className="text-sm text-muted-foreground">
|
|
||||||
{t("sshDaemonDisclaimer")}{" "}
|
|
||||||
<a
|
|
||||||
href="https://docs.pangolin.net/manage/ssh"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-primary hover:underline inline-flex items-center gap-1"
|
|
||||||
>
|
|
||||||
{t("learnMore")}
|
|
||||||
<ExternalLink className="size-3.5 shrink-0" />
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</SettingsFormCell>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{showDaemonPort && (
|
|
||||||
<SettingsFormCell span="half">
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name="authDaemonPort"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>
|
|
||||||
{t("sshDaemonPort")}
|
|
||||||
</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
min={1}
|
|
||||||
max={65535}
|
|
||||||
{...field}
|
|
||||||
/>
|
|
||||||
</FormControl>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</SettingsFormCell>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<SettingsFormCell span="full">
|
<SettingsFormCell span="full">
|
||||||
<SettingsSubsectionHeader>
|
<SettingsSubsectionHeader>
|
||||||
|
|||||||
@@ -777,8 +777,8 @@ export default function Page() {
|
|||||||
<>
|
<>
|
||||||
<div className="flex justify-between">
|
<div className="flex justify-between">
|
||||||
<HeaderTitle
|
<HeaderTitle
|
||||||
title={t("resourceCreate")}
|
title={t("resourcePublicCreate")}
|
||||||
description={t("resourceCreateDescription")}
|
description={t("resourcePublicCreateDescription")}
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
import { cn } from "@app/lib/cn";
|
||||||
import { Check, Copy } from "lucide-react";
|
import { Check, Copy } from "lucide-react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
@@ -7,12 +8,14 @@ type CopyToClipboardProps = {
|
|||||||
text: string;
|
text: string;
|
||||||
displayText?: string;
|
displayText?: string;
|
||||||
isLink?: boolean;
|
isLink?: boolean;
|
||||||
|
className?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
const CopyToClipboard = ({
|
const CopyToClipboard = ({
|
||||||
text,
|
text,
|
||||||
displayText,
|
displayText,
|
||||||
isLink
|
isLink,
|
||||||
|
className
|
||||||
}: CopyToClipboardProps) => {
|
}: CopyToClipboardProps) => {
|
||||||
const [copied, setCopied] = useState(false);
|
const [copied, setCopied] = useState(false);
|
||||||
|
|
||||||
@@ -48,14 +51,20 @@ const CopyToClipboard = ({
|
|||||||
href={text}
|
href={text}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
className="truncate hover:underline text-sm min-w-0 max-w-full"
|
className={cn(
|
||||||
|
"truncate hover:underline text-sm min-w-0 max-w-full",
|
||||||
|
className
|
||||||
|
)}
|
||||||
title={text} // Shows full text on hover
|
title={text} // Shows full text on hover
|
||||||
>
|
>
|
||||||
{displayValue}
|
{displayValue}
|
||||||
</Link>
|
</Link>
|
||||||
) : (
|
) : (
|
||||||
<span
|
<span
|
||||||
className="truncate text-sm min-w-0 max-w-full"
|
className={cn(
|
||||||
|
"truncate text-sm min-w-0 max-w-full",
|
||||||
|
className
|
||||||
|
)}
|
||||||
style={{
|
style={{
|
||||||
whiteSpace: "nowrap",
|
whiteSpace: "nowrap",
|
||||||
overflow: "hidden",
|
overflow: "hidden",
|
||||||
|
|||||||
@@ -1,206 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import {
|
|
||||||
Credenza,
|
|
||||||
CredenzaBody,
|
|
||||||
CredenzaClose,
|
|
||||||
CredenzaContent,
|
|
||||||
CredenzaDescription,
|
|
||||||
CredenzaFooter,
|
|
||||||
CredenzaHeader,
|
|
||||||
CredenzaTitle
|
|
||||||
} from "@app/components/Credenza";
|
|
||||||
import { Button } from "@app/components/ui/button";
|
|
||||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
|
||||||
import { toast } from "@app/hooks/useToast";
|
|
||||||
import { createApiClient, formatAxiosError } from "@app/lib/api";
|
|
||||||
import { AxiosResponse } from "axios";
|
|
||||||
import { useTranslations } from "next-intl";
|
|
||||||
import { useState, useTransition } from "react";
|
|
||||||
import {
|
|
||||||
cleanForFQDN,
|
|
||||||
PrivateResourceForm,
|
|
||||||
isHostname,
|
|
||||||
type InternalResourceFormValues
|
|
||||||
} from "./PrivateResourceForm";
|
|
||||||
import type { Selectedsite } from "./site-selector";
|
|
||||||
|
|
||||||
type CreateInternalResourceDialogProps = {
|
|
||||||
open: boolean;
|
|
||||||
setOpen: (val: boolean) => void;
|
|
||||||
orgId: string;
|
|
||||||
onSuccess?: () => void;
|
|
||||||
initialSites?: Selectedsite[];
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function CreatePrivateResourceDialog({
|
|
||||||
open,
|
|
||||||
setOpen,
|
|
||||||
orgId,
|
|
||||||
onSuccess,
|
|
||||||
initialSites
|
|
||||||
}: CreateInternalResourceDialogProps) {
|
|
||||||
const t = useTranslations();
|
|
||||||
const api = createApiClient(useEnvContext());
|
|
||||||
const [isHttpModeDisabled, setIsHttpModeDisabled] = useState(false);
|
|
||||||
const [isSubmitting, startTransition] = useTransition();
|
|
||||||
|
|
||||||
function handleSubmit(values: InternalResourceFormValues) {
|
|
||||||
startTransition(async () => {
|
|
||||||
try {
|
|
||||||
let data = { ...values };
|
|
||||||
if (
|
|
||||||
(data.mode === "host" ||
|
|
||||||
data.mode === "http" ||
|
|
||||||
data.mode === "ssh") &&
|
|
||||||
isHostname(data.destination)
|
|
||||||
) {
|
|
||||||
const currentAlias = data.alias?.trim() || "";
|
|
||||||
if (!currentAlias) {
|
|
||||||
let aliasValue = data.destination;
|
|
||||||
if (data.destination?.toLowerCase() === "localhost") {
|
|
||||||
aliasValue = `${cleanForFQDN(data.name)}.internal`;
|
|
||||||
}
|
|
||||||
data = { ...data, alias: aliasValue };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
await api.put<
|
|
||||||
AxiosResponse<{ data: { siteResourceId: number } }>
|
|
||||||
>(`/org/${orgId}/site-resource`, {
|
|
||||||
name: data.name,
|
|
||||||
siteIds: data.siteIds,
|
|
||||||
mode: data.mode,
|
|
||||||
destination: data.destination ?? undefined,
|
|
||||||
enabled: true,
|
|
||||||
...(data.mode === "http" && {
|
|
||||||
scheme: data.scheme,
|
|
||||||
ssl: data.ssl ?? false,
|
|
||||||
destinationPort: data.destinationPort ?? undefined,
|
|
||||||
domainId: data.httpConfigDomainId
|
|
||||||
? data.httpConfigDomainId
|
|
||||||
: undefined,
|
|
||||||
subdomain: data.httpConfigSubdomain
|
|
||||||
? data.httpConfigSubdomain
|
|
||||||
: undefined
|
|
||||||
}),
|
|
||||||
...(data.mode === "host" && {
|
|
||||||
alias:
|
|
||||||
data.alias &&
|
|
||||||
typeof data.alias === "string" &&
|
|
||||||
data.alias.trim()
|
|
||||||
? data.alias
|
|
||||||
: undefined,
|
|
||||||
...(data.authDaemonMode != null && {
|
|
||||||
authDaemonMode: data.authDaemonMode
|
|
||||||
}),
|
|
||||||
...(data.authDaemonMode === "remote" &&
|
|
||||||
data.authDaemonPort != null && {
|
|
||||||
authDaemonPort: data.authDaemonPort
|
|
||||||
})
|
|
||||||
}),
|
|
||||||
...(data.mode === "ssh" && {
|
|
||||||
alias:
|
|
||||||
data.alias &&
|
|
||||||
typeof data.alias === "string" &&
|
|
||||||
data.alias.trim()
|
|
||||||
? data.alias
|
|
||||||
: undefined,
|
|
||||||
destinationPort: data.destinationPort ?? undefined,
|
|
||||||
pamMode: data.pamMode ?? undefined,
|
|
||||||
...(data.authDaemonMode != null && {
|
|
||||||
authDaemonMode: data.authDaemonMode
|
|
||||||
}),
|
|
||||||
...(data.authDaemonMode === "remote" &&
|
|
||||||
data.authDaemonPort != null && {
|
|
||||||
authDaemonPort: data.authDaemonPort
|
|
||||||
})
|
|
||||||
}),
|
|
||||||
...((data.mode === "host" || data.mode === "cidr") && {
|
|
||||||
tcpPortRangeString: data.tcpPortRangeString,
|
|
||||||
udpPortRangeString: data.udpPortRangeString,
|
|
||||||
disableIcmp: data.disableIcmp ?? false
|
|
||||||
}),
|
|
||||||
...(data.mode === "ssh" && {
|
|
||||||
disableIcmp: data.disableIcmp ?? false
|
|
||||||
}),
|
|
||||||
roleIds: data.roles
|
|
||||||
? data.roles.map((r) => parseInt(r.id))
|
|
||||||
: [],
|
|
||||||
userIds: data.users ? data.users.map((u) => u.id) : [],
|
|
||||||
clientIds: data.clients
|
|
||||||
? data.clients.map((c) => parseInt(c.id))
|
|
||||||
: []
|
|
||||||
});
|
|
||||||
|
|
||||||
toast({
|
|
||||||
title: t("createInternalResourceDialogSuccess"),
|
|
||||||
description: t(
|
|
||||||
"createInternalResourceDialogInternalResourceCreatedSuccessfully"
|
|
||||||
),
|
|
||||||
variant: "default"
|
|
||||||
});
|
|
||||||
setOpen(false);
|
|
||||||
onSuccess?.();
|
|
||||||
} catch (error) {
|
|
||||||
toast({
|
|
||||||
title: t("createInternalResourceDialogError"),
|
|
||||||
description: formatAxiosError(
|
|
||||||
error,
|
|
||||||
t(
|
|
||||||
"createInternalResourceDialogFailedToCreateInternalResource"
|
|
||||||
)
|
|
||||||
),
|
|
||||||
variant: "destructive"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Credenza open={open} onOpenChange={setOpen}>
|
|
||||||
<CredenzaContent className="max-w-3xl">
|
|
||||||
<CredenzaHeader>
|
|
||||||
<CredenzaTitle>
|
|
||||||
{t("createInternalResourceDialogCreateClientResource")}
|
|
||||||
</CredenzaTitle>
|
|
||||||
<CredenzaDescription>
|
|
||||||
{t(
|
|
||||||
"createInternalResourceDialogCreateClientResourceDescription"
|
|
||||||
)}
|
|
||||||
</CredenzaDescription>
|
|
||||||
</CredenzaHeader>
|
|
||||||
<CredenzaBody>
|
|
||||||
<PrivateResourceForm
|
|
||||||
variant="create"
|
|
||||||
open={open}
|
|
||||||
orgId={orgId}
|
|
||||||
formId="create-internal-resource-form"
|
|
||||||
onSubmit={handleSubmit}
|
|
||||||
onSubmitDisabledChange={setIsHttpModeDisabled}
|
|
||||||
initialSites={initialSites}
|
|
||||||
/>
|
|
||||||
</CredenzaBody>
|
|
||||||
<CredenzaFooter>
|
|
||||||
<CredenzaClose asChild>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => setOpen(false)}
|
|
||||||
disabled={isSubmitting}
|
|
||||||
>
|
|
||||||
{t("createInternalResourceDialogCancel")}
|
|
||||||
</Button>
|
|
||||||
</CredenzaClose>
|
|
||||||
<Button
|
|
||||||
type="submit"
|
|
||||||
form="create-internal-resource-form"
|
|
||||||
disabled={isSubmitting || isHttpModeDisabled}
|
|
||||||
loading={isSubmitting}
|
|
||||||
>
|
|
||||||
{t("createInternalResourceDialogCreateResource")}
|
|
||||||
</Button>
|
|
||||||
</CredenzaFooter>
|
|
||||||
</CredenzaContent>
|
|
||||||
</Credenza>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,225 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import {
|
|
||||||
Credenza,
|
|
||||||
CredenzaBody,
|
|
||||||
CredenzaClose,
|
|
||||||
CredenzaContent,
|
|
||||||
CredenzaDescription,
|
|
||||||
CredenzaFooter,
|
|
||||||
CredenzaHeader,
|
|
||||||
CredenzaTitle
|
|
||||||
} from "@app/components/Credenza";
|
|
||||||
import { Button } from "@app/components/ui/button";
|
|
||||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
|
||||||
import { toast } from "@app/hooks/useToast";
|
|
||||||
import { createApiClient, formatAxiosError } from "@app/lib/api";
|
|
||||||
import { resourceQueries } from "@app/lib/queries";
|
|
||||||
import { useQueryClient } from "@tanstack/react-query";
|
|
||||||
import { useTranslations } from "next-intl";
|
|
||||||
import { useState, useTransition } from "react";
|
|
||||||
import {
|
|
||||||
cleanForFQDN,
|
|
||||||
PrivateResourceForm,
|
|
||||||
type InternalResourceData,
|
|
||||||
type InternalResourceFormValues,
|
|
||||||
isHostname
|
|
||||||
} from "./PrivateResourceForm";
|
|
||||||
|
|
||||||
type EditInternalResourceDialogProps = {
|
|
||||||
open: boolean;
|
|
||||||
setOpen: (val: boolean) => void;
|
|
||||||
resource: InternalResourceData;
|
|
||||||
orgId: string;
|
|
||||||
onSuccess?: () => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function EditPrivateResourceDialog({
|
|
||||||
open,
|
|
||||||
setOpen,
|
|
||||||
resource,
|
|
||||||
orgId,
|
|
||||||
onSuccess
|
|
||||||
}: EditInternalResourceDialogProps) {
|
|
||||||
const t = useTranslations();
|
|
||||||
const api = createApiClient(useEnvContext());
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
const [isSubmitting, startTransition] = useTransition();
|
|
||||||
const [isHttpModeDisabled, setIsHttpModeDisabled] = useState(false);
|
|
||||||
|
|
||||||
async function handleSubmit(values: InternalResourceFormValues) {
|
|
||||||
try {
|
|
||||||
let data = { ...values };
|
|
||||||
if (
|
|
||||||
(data.mode === "host" ||
|
|
||||||
data.mode === "http" ||
|
|
||||||
data.mode === "ssh") &&
|
|
||||||
isHostname(data.destination)
|
|
||||||
) {
|
|
||||||
const currentAlias = data.alias?.trim() || "";
|
|
||||||
if (!currentAlias) {
|
|
||||||
let aliasValue = data.destination;
|
|
||||||
if (data.destination?.toLowerCase() === "localhost") {
|
|
||||||
aliasValue = `${cleanForFQDN(data.name)}.internal`;
|
|
||||||
}
|
|
||||||
data = { ...data, alias: aliasValue };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
await api.post(`/site-resource/${resource.id}`, {
|
|
||||||
name: data.name,
|
|
||||||
siteIds: data.siteIds,
|
|
||||||
mode: data.mode,
|
|
||||||
niceId: data.niceId,
|
|
||||||
destination: data.destination ?? undefined,
|
|
||||||
...(data.mode === "http" && {
|
|
||||||
scheme: data.scheme,
|
|
||||||
ssl: data.ssl ?? false,
|
|
||||||
destinationPort: data.destinationPort ?? null,
|
|
||||||
domainId: data.httpConfigDomainId
|
|
||||||
? data.httpConfigDomainId
|
|
||||||
: undefined,
|
|
||||||
subdomain: data.httpConfigSubdomain
|
|
||||||
? data.httpConfigSubdomain
|
|
||||||
: undefined
|
|
||||||
}),
|
|
||||||
...(data.mode === "host" && {
|
|
||||||
alias:
|
|
||||||
data.alias &&
|
|
||||||
typeof data.alias === "string" &&
|
|
||||||
data.alias.trim()
|
|
||||||
? data.alias
|
|
||||||
: null,
|
|
||||||
...(data.authDaemonMode != null && {
|
|
||||||
authDaemonMode: data.authDaemonMode
|
|
||||||
}),
|
|
||||||
...(data.authDaemonMode === "remote" && {
|
|
||||||
authDaemonPort: data.authDaemonPort || null
|
|
||||||
})
|
|
||||||
}),
|
|
||||||
...(data.mode === "ssh" && {
|
|
||||||
alias:
|
|
||||||
data.alias &&
|
|
||||||
typeof data.alias === "string" &&
|
|
||||||
data.alias.trim()
|
|
||||||
? data.alias
|
|
||||||
: null,
|
|
||||||
destinationPort: data.destinationPort ?? null,
|
|
||||||
pamMode: data.pamMode ?? undefined,
|
|
||||||
...(data.authDaemonMode != null && {
|
|
||||||
authDaemonMode: data.authDaemonMode
|
|
||||||
}),
|
|
||||||
...(data.authDaemonMode === "remote" && {
|
|
||||||
authDaemonPort: data.authDaemonPort || null
|
|
||||||
})
|
|
||||||
}),
|
|
||||||
...((data.mode === "host" || data.mode === "cidr") && {
|
|
||||||
tcpPortRangeString: data.tcpPortRangeString,
|
|
||||||
udpPortRangeString: data.udpPortRangeString,
|
|
||||||
disableIcmp: data.disableIcmp ?? false
|
|
||||||
}),
|
|
||||||
...(data.mode === "ssh" && {
|
|
||||||
disableIcmp: data.disableIcmp ?? false
|
|
||||||
}),
|
|
||||||
roleIds: (data.roles || []).map((r) => parseInt(r.id)),
|
|
||||||
userIds: (data.users || []).map((u) => u.id),
|
|
||||||
clientIds: (data.clients || []).map((c) => parseInt(c.id))
|
|
||||||
});
|
|
||||||
|
|
||||||
await queryClient.invalidateQueries(
|
|
||||||
resourceQueries.siteResourceRoles({
|
|
||||||
siteResourceId: resource.id
|
|
||||||
})
|
|
||||||
);
|
|
||||||
await queryClient.invalidateQueries(
|
|
||||||
resourceQueries.siteResourceUsers({
|
|
||||||
siteResourceId: resource.id
|
|
||||||
})
|
|
||||||
);
|
|
||||||
await queryClient.invalidateQueries(
|
|
||||||
resourceQueries.siteResourceClients({
|
|
||||||
siteResourceId: resource.id
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
toast({
|
|
||||||
title: t("editInternalResourceDialogSuccess"),
|
|
||||||
description: t(
|
|
||||||
"editInternalResourceDialogInternalResourceUpdatedSuccessfully"
|
|
||||||
),
|
|
||||||
variant: "default"
|
|
||||||
});
|
|
||||||
setOpen(false);
|
|
||||||
onSuccess?.();
|
|
||||||
} catch (error) {
|
|
||||||
toast({
|
|
||||||
title: t("editInternalResourceDialogError"),
|
|
||||||
description: formatAxiosError(
|
|
||||||
error,
|
|
||||||
t(
|
|
||||||
"editInternalResourceDialogFailedToUpdateInternalResource"
|
|
||||||
)
|
|
||||||
),
|
|
||||||
variant: "destructive"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Credenza
|
|
||||||
open={open}
|
|
||||||
onOpenChange={(isOpen) => {
|
|
||||||
if (!isOpen) setOpen(false);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<CredenzaContent className="max-w-3xl">
|
|
||||||
<CredenzaHeader>
|
|
||||||
<CredenzaTitle>
|
|
||||||
{t("editInternalResourceDialogEditClientResource")}
|
|
||||||
</CredenzaTitle>
|
|
||||||
<CredenzaDescription>
|
|
||||||
{t(
|
|
||||||
"editInternalResourceDialogUpdateResourceProperties",
|
|
||||||
{
|
|
||||||
resourceName: resource.name
|
|
||||||
}
|
|
||||||
)}
|
|
||||||
</CredenzaDescription>
|
|
||||||
</CredenzaHeader>
|
|
||||||
<CredenzaBody>
|
|
||||||
<PrivateResourceForm
|
|
||||||
variant="edit"
|
|
||||||
open={open}
|
|
||||||
resource={resource}
|
|
||||||
orgId={orgId}
|
|
||||||
siteResourceId={resource.id}
|
|
||||||
formId="edit-internal-resource-form"
|
|
||||||
onSubmit={(values) =>
|
|
||||||
startTransition(() => handleSubmit(values))
|
|
||||||
}
|
|
||||||
onSubmitDisabledChange={setIsHttpModeDisabled}
|
|
||||||
/>
|
|
||||||
</CredenzaBody>
|
|
||||||
<CredenzaFooter>
|
|
||||||
<CredenzaClose asChild>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => setOpen(false)}
|
|
||||||
disabled={isSubmitting}
|
|
||||||
>
|
|
||||||
{t("editInternalResourceDialogCancel")}
|
|
||||||
</Button>
|
|
||||||
</CredenzaClose>
|
|
||||||
<Button
|
|
||||||
type="submit"
|
|
||||||
form="edit-internal-resource-form"
|
|
||||||
disabled={isSubmitting || isHttpModeDisabled}
|
|
||||||
loading={isSubmitting}
|
|
||||||
>
|
|
||||||
{t("editInternalResourceDialogSaveResource")}
|
|
||||||
</Button>
|
|
||||||
</CredenzaFooter>
|
|
||||||
</CredenzaContent>
|
|
||||||
</Credenza>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -2,24 +2,36 @@
|
|||||||
|
|
||||||
import { useEffect, useState, useRef } from "react";
|
import { useEffect, useState, useRef } from "react";
|
||||||
import { Textarea } from "@/components/ui/textarea";
|
import { Textarea } from "@/components/ui/textarea";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
interface HeadersInputProps {
|
interface HeadersInputProps {
|
||||||
value?: { name: string; value: string }[] | null;
|
value?: { name: string; value: string }[] | null;
|
||||||
onChange: (value: { name: string; value: string }[] | null) => void;
|
onChange: (value: { name: string; value: string }[] | null) => void;
|
||||||
|
onValidityChange?: (isValid: boolean) => void;
|
||||||
placeholder?: string;
|
placeholder?: string;
|
||||||
rows?: number;
|
rows?: number;
|
||||||
className?: string;
|
className?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Mirrors the server side validation in updateResource.ts so that invalid
|
||||||
|
// input is caught (and shown to the user) before it is ever submitted,
|
||||||
|
// instead of being silently dropped in favor of the last known good value.
|
||||||
|
const validHeaderNamePattern = /^[a-zA-Z0-9!#$%&'*+\-.^_`|~]+$/;
|
||||||
|
const validHeaderValuePattern = /^[\t\x20-\x7E]*$/;
|
||||||
|
const templatePattern = /\{\{[^}]+\}\}/;
|
||||||
|
|
||||||
export function HeadersInput({
|
export function HeadersInput({
|
||||||
value = [],
|
value = [],
|
||||||
onChange,
|
onChange,
|
||||||
|
onValidityChange,
|
||||||
placeholder = `X-Example-Header: example-value
|
placeholder = `X-Example-Header: example-value
|
||||||
X-Another-Header: another-value`,
|
X-Another-Header: another-value`,
|
||||||
rows = 4,
|
rows = 4,
|
||||||
className
|
className
|
||||||
}: HeadersInputProps) {
|
}: HeadersInputProps) {
|
||||||
|
const t = useTranslations();
|
||||||
const [internalValue, setInternalValue] = useState("");
|
const [internalValue, setInternalValue] = useState("");
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||||
const isUserEditingRef = useRef(false);
|
const isUserEditingRef = useRef(false);
|
||||||
|
|
||||||
@@ -34,37 +46,56 @@ X-Another-Header: another-value`,
|
|||||||
.join("\n");
|
.join("\n");
|
||||||
};
|
};
|
||||||
|
|
||||||
// Convert newline-separated string to header objects array
|
// Parse newline-separated text into header objects, validating each line
|
||||||
const convertToHeadersArray = (
|
// against the same rules enforced by the server. Returns either the
|
||||||
|
// parsed headers or an error message describing the first invalid line.
|
||||||
|
const parseHeaders = (
|
||||||
newlineSeparated: string
|
newlineSeparated: string
|
||||||
): { name: string; value: string }[] | null => {
|
):
|
||||||
if (!newlineSeparated || newlineSeparated.trim() === "") return [];
|
| { headers: { name: string; value: string }[]; error: null }
|
||||||
|
| { headers: null; error: string } => {
|
||||||
|
if (!newlineSeparated || newlineSeparated.trim() === "") {
|
||||||
|
return { headers: [], error: null };
|
||||||
|
}
|
||||||
|
|
||||||
return newlineSeparated
|
const lines = newlineSeparated
|
||||||
.split("\n")
|
.split("\n")
|
||||||
.map((line) => line.trim())
|
.map((line) => line.trim())
|
||||||
.filter((line) => line.length > 0 && line.includes(":"))
|
.filter((line) => line.length > 0);
|
||||||
.map((line) => {
|
|
||||||
|
const headers: { name: string; value: string }[] = [];
|
||||||
|
|
||||||
|
for (const line of lines) {
|
||||||
const colonIndex = line.indexOf(":");
|
const colonIndex = line.indexOf(":");
|
||||||
|
if (colonIndex === -1) {
|
||||||
|
return { headers: null, error: t("headersValidationError") };
|
||||||
|
}
|
||||||
|
|
||||||
const name = line.substring(0, colonIndex).trim();
|
const name = line.substring(0, colonIndex).trim();
|
||||||
const value = line.substring(colonIndex + 1).trim();
|
const value = line.substring(colonIndex + 1).trim();
|
||||||
|
|
||||||
// Ensure header name conforms to HTTP header requirements
|
if (
|
||||||
// Header names should be case-insensitive, contain only ASCII letters, digits, and hyphens
|
!validHeaderNamePattern.test(name) ||
|
||||||
const normalizedName = name
|
!validHeaderValuePattern.test(value) ||
|
||||||
.replace(/[^a-zA-Z0-9\-]/g, "")
|
templatePattern.test(name) ||
|
||||||
.toLowerCase();
|
templatePattern.test(value)
|
||||||
|
) {
|
||||||
|
return { headers: null, error: t("headersValidationError") };
|
||||||
|
}
|
||||||
|
|
||||||
return { name: normalizedName, value };
|
headers.push({ name, value });
|
||||||
})
|
}
|
||||||
.filter((header) => header.name.length > 0); // Filter out headers with invalid names
|
|
||||||
|
return { headers, error: null };
|
||||||
};
|
};
|
||||||
|
|
||||||
// Update internal value when external value changes
|
// Update internal value when external value changes
|
||||||
// But only if the user is not currently editing (textarea not focused)
|
// But only if the user is not currently editing (textarea not focused)
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!isUserEditingRef.current) {
|
if (!isUserEditingRef.current) {
|
||||||
setInternalValue(convertToNewlineSeparated(value));
|
setInternalValue(convertToNewlineSeparated(value ?? []));
|
||||||
|
setError(null);
|
||||||
|
onValidityChange?.(true);
|
||||||
}
|
}
|
||||||
}, [value]);
|
}, [value]);
|
||||||
|
|
||||||
@@ -75,31 +106,20 @@ X-Another-Header: another-value`,
|
|||||||
// Mark that user is actively editing
|
// Mark that user is actively editing
|
||||||
isUserEditingRef.current = true;
|
isUserEditingRef.current = true;
|
||||||
|
|
||||||
// Only update parent if the input is in a valid state
|
const result = parseHeaders(newValue);
|
||||||
// Valid states: empty/whitespace only, or contains properly formatted headers
|
|
||||||
|
|
||||||
if (newValue.trim() === "") {
|
if (result.error) {
|
||||||
// Empty input is valid - represents no headers
|
// Surface the error and do not touch the last known good value.
|
||||||
onChange([]);
|
// Silently dropping the update here (without telling the user)
|
||||||
} else {
|
// is what previously let stale data get saved without warning.
|
||||||
// Check if all non-empty lines are properly formatted (contain ':')
|
setError(result.error);
|
||||||
const lines = newValue.split("\n");
|
onValidityChange?.(false);
|
||||||
const nonEmptyLines = lines
|
return;
|
||||||
.map((line) => line.trim())
|
|
||||||
.filter((line) => line.length > 0);
|
|
||||||
|
|
||||||
// If there are no non-empty lines, or all non-empty lines contain ':', it's valid
|
|
||||||
const isValid =
|
|
||||||
nonEmptyLines.length === 0 ||
|
|
||||||
nonEmptyLines.every((line) => line.includes(":"));
|
|
||||||
|
|
||||||
if (isValid) {
|
|
||||||
// Safe to convert and update parent
|
|
||||||
const headersArray = convertToHeadersArray(newValue);
|
|
||||||
onChange(headersArray);
|
|
||||||
}
|
|
||||||
// If not valid, don't call onChange - let user continue typing
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setError(null);
|
||||||
|
onValidityChange?.(true);
|
||||||
|
onChange(result.headers);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleFocus = () => {
|
const handleFocus = () => {
|
||||||
@@ -114,6 +134,7 @@ X-Another-Header: another-value`,
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<div>
|
||||||
<Textarea
|
<Textarea
|
||||||
ref={textareaRef}
|
ref={textareaRef}
|
||||||
value={internalValue}
|
value={internalValue}
|
||||||
@@ -124,5 +145,9 @@ X-Another-Header: another-value`,
|
|||||||
rows={rows}
|
rows={rows}
|
||||||
className={className}
|
className={className}
|
||||||
/>
|
/>
|
||||||
|
{error && (
|
||||||
|
<p className="text-sm text-destructive mt-1.5">{error}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,12 +5,15 @@ import { cn } from "@app/lib/cn";
|
|||||||
export function InfoSections({
|
export function InfoSections({
|
||||||
children,
|
children,
|
||||||
cols,
|
cols,
|
||||||
columnSizing = "content"
|
columnSizing = "content",
|
||||||
|
layout = "default"
|
||||||
}: {
|
}: {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
cols?: number;
|
cols?: number;
|
||||||
/** content (default): fixed gap, columns hug content, left-aligned; fill: equal-width columns across the row */
|
/** content (default): fixed gap, columns hug content, left-aligned; fill: equal-width columns across the row */
|
||||||
columnSizing?: "fill" | "content";
|
columnSizing?: "fill" | "content";
|
||||||
|
/** panel: fixed 2-column grid for narrow containers such as side panels */
|
||||||
|
layout?: "default" | "panel";
|
||||||
}) {
|
}) {
|
||||||
const n = cols || 1;
|
const n = cols || 1;
|
||||||
const track =
|
const track =
|
||||||
@@ -19,9 +22,14 @@ export function InfoSections({
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
"grid w-full min-w-0 grid-cols-2 md:grid-cols-(--columns) md:space-x-16 gap-4 md:items-start",
|
"grid w-full min-w-0 gap-4",
|
||||||
|
layout === "panel"
|
||||||
|
? "grid-cols-2 items-start"
|
||||||
|
: "grid-cols-2 md:grid-cols-(--columns) md:items-start md:space-x-16",
|
||||||
columnSizing === "content" &&
|
columnSizing === "content" &&
|
||||||
"md:justify-items-start md:justify-start"
|
(layout === "panel"
|
||||||
|
? "justify-items-start justify-start"
|
||||||
|
: "md:justify-items-start md:justify-start")
|
||||||
)}
|
)}
|
||||||
style={{
|
style={{
|
||||||
// @ts-expect-error dynamic props don't work with tailwind, but we can set the
|
// @ts-expect-error dynamic props don't work with tailwind, but we can set the
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ import {
|
|||||||
import { launcherQueries, orgQueries } from "@app/lib/queries";
|
import { launcherQueries, orgQueries } from "@app/lib/queries";
|
||||||
import { useQuery } from "@tanstack/react-query";
|
import { useQuery } from "@tanstack/react-query";
|
||||||
import { useTranslations } from "next-intl";
|
import { useTranslations } from "next-intl";
|
||||||
import { useState } from "react";
|
import { useMemo, useState } from "react";
|
||||||
import { useDebounce } from "use-debounce";
|
import { useDebounce } from "use-debounce";
|
||||||
import { Checkbox } from "./ui/checkbox";
|
import { Checkbox } from "./ui/checkbox";
|
||||||
|
|
||||||
@@ -25,6 +25,7 @@ type LabelsFilterSelectorProps = {
|
|||||||
orgId: string;
|
orgId: string;
|
||||||
isSelected: (label: LabelFilterOption) => boolean;
|
isSelected: (label: LabelFilterOption) => boolean;
|
||||||
onToggle: (label: LabelFilterOption) => void;
|
onToggle: (label: LabelFilterOption) => void;
|
||||||
|
selectedLabels?: LabelFilterOption[];
|
||||||
onClear?: () => void;
|
onClear?: () => void;
|
||||||
showClear?: boolean;
|
showClear?: boolean;
|
||||||
scope?: "org" | "launcher";
|
scope?: "org" | "launcher";
|
||||||
@@ -34,6 +35,7 @@ export function LabelsFilterSelector({
|
|||||||
orgId,
|
orgId,
|
||||||
isSelected,
|
isSelected,
|
||||||
onToggle,
|
onToggle,
|
||||||
|
selectedLabels = [],
|
||||||
onClear,
|
onClear,
|
||||||
showClear = false,
|
showClear = false,
|
||||||
scope = "org"
|
scope = "org"
|
||||||
@@ -54,7 +56,7 @@ export function LabelsFilterSelector({
|
|||||||
...launcherQueries.labels({
|
...launcherQueries.labels({
|
||||||
orgId,
|
orgId,
|
||||||
query: debouncedQuery,
|
query: debouncedQuery,
|
||||||
perPage: 500
|
perPage: 20
|
||||||
}),
|
}),
|
||||||
enabled: scope === "launcher"
|
enabled: scope === "launcher"
|
||||||
});
|
});
|
||||||
@@ -63,6 +65,18 @@ export function LabelsFilterSelector({
|
|||||||
? (launcherLabelsQuery.data ?? [])
|
? (launcherLabelsQuery.data ?? [])
|
||||||
: (orgLabelsQuery.data ?? []);
|
: (orgLabelsQuery.data ?? []);
|
||||||
|
|
||||||
|
const labelsShown = useMemo(() => {
|
||||||
|
const base = [...labels];
|
||||||
|
if (debouncedQuery.trim().length === 0 && selectedLabels.length > 0) {
|
||||||
|
const selectedNotInBase = selectedLabels.filter(
|
||||||
|
(selected) =>
|
||||||
|
!base.some((label) => label.labelId === selected.labelId)
|
||||||
|
);
|
||||||
|
return [...selectedNotInBase, ...base];
|
||||||
|
}
|
||||||
|
return base;
|
||||||
|
}, [debouncedQuery, labels, selectedLabels]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Command shouldFilter={false}>
|
<Command shouldFilter={false}>
|
||||||
<CommandInput
|
<CommandInput
|
||||||
@@ -81,7 +95,7 @@ export function LabelsFilterSelector({
|
|||||||
{t("accessFilterClear")}
|
{t("accessFilterClear")}
|
||||||
</CommandItem>
|
</CommandItem>
|
||||||
)}
|
)}
|
||||||
{labels.map((label) => (
|
{labelsShown.map((label) => (
|
||||||
<CommandItem
|
<CommandItem
|
||||||
key={label.labelId}
|
key={label.labelId}
|
||||||
value={label.name}
|
value={label.name}
|
||||||
|
|||||||
@@ -175,34 +175,46 @@ export function LayoutSidebar({
|
|||||||
isSidebarCollapsed ? "mb-4" : "mb-1"
|
isSidebarCollapsed ? "mb-4" : "mb-1"
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
{isSidebarCollapsed ? (
|
||||||
|
<TooltipProvider>
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger asChild>
|
||||||
<Link
|
<Link
|
||||||
href={`/${orgId}`}
|
href={`/${orgId}`}
|
||||||
className={cn(
|
className={cn(
|
||||||
"flex items-center transition-colors text-muted-foreground hover:text-foreground text-sm w-full hover:bg-sidebar-accent dark:hover:bg-sidebar-accent/50 rounded-md",
|
"flex items-center transition-colors text-muted-foreground hover:text-foreground text-sm w-full hover:bg-sidebar-accent dark:hover:bg-sidebar-accent/50 rounded-md px-2 py-2 justify-center"
|
||||||
isSidebarCollapsed
|
|
||||||
? "px-2 py-2 justify-center"
|
|
||||||
: "px-3 py-1.5"
|
|
||||||
)}
|
|
||||||
title={
|
|
||||||
isSidebarCollapsed
|
|
||||||
? t("resourceLauncherTitle")
|
|
||||||
: undefined
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
className={cn(
|
|
||||||
"flex-shrink-0 w-5 h-5 flex items-center justify-center text-muted-foreground",
|
|
||||||
!isSidebarCollapsed && "mr-3"
|
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
<span className="flex-shrink-0 w-5 h-5 flex items-center justify-center text-muted-foreground">
|
||||||
|
<SquareMousePointer className="h-4 w-4" />
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent
|
||||||
|
side="right"
|
||||||
|
sideOffset={8}
|
||||||
|
>
|
||||||
|
<p>
|
||||||
|
{t("resourceLauncherTitle")}
|
||||||
|
</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
</TooltipProvider>
|
||||||
|
) : (
|
||||||
|
<Link
|
||||||
|
href={`/${orgId}`}
|
||||||
|
className={cn(
|
||||||
|
"flex items-center transition-colors text-muted-foreground hover:text-foreground text-sm w-full hover:bg-sidebar-accent dark:hover:bg-sidebar-accent/50 rounded-md px-3 py-1.5"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<span className="flex-shrink-0 mr-3 w-5 h-5 flex items-center justify-center text-muted-foreground">
|
||||||
<SquareMousePointer className="h-4 w-4" />
|
<SquareMousePointer className="h-4 w-4" />
|
||||||
</span>
|
</span>
|
||||||
{!isSidebarCollapsed && (
|
|
||||||
<span className="flex-1">
|
<span className="flex-1">
|
||||||
{t("resourceLauncherTitle")}
|
{t("resourceLauncherTitle")}
|
||||||
</span>
|
</span>
|
||||||
)}
|
|
||||||
</Link>
|
</Link>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{!isAdminPage && user.serverAdmin && (
|
{!isAdminPage && user.serverAdmin && (
|
||||||
@@ -212,36 +224,44 @@ export function LayoutSidebar({
|
|||||||
isSidebarCollapsed ? "mb-4" : "mb-1"
|
isSidebarCollapsed ? "mb-4" : "mb-1"
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
{isSidebarCollapsed ? (
|
||||||
|
<TooltipProvider>
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger asChild>
|
||||||
<Link
|
<Link
|
||||||
href="/admin"
|
href="/admin"
|
||||||
className={cn(
|
className={cn(
|
||||||
"flex items-center transition-colors text-muted-foreground hover:text-foreground text-sm w-full hover:bg-sidebar-accent dark:hover:bg-sidebar-accent/50 rounded-md",
|
"flex items-center transition-colors text-muted-foreground hover:text-foreground text-sm w-full hover:bg-sidebar-accent dark:hover:bg-sidebar-accent/50 rounded-md px-2 py-2 justify-center"
|
||||||
isSidebarCollapsed
|
|
||||||
? "px-2 py-2 justify-center"
|
|
||||||
: "px-3 py-1.5"
|
|
||||||
)}
|
|
||||||
title={
|
|
||||||
isSidebarCollapsed
|
|
||||||
? t("serverAdmin")
|
|
||||||
: undefined
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
className={cn(
|
|
||||||
"flex-shrink-0 w-5 h-5 flex items-center justify-center text-muted-foreground",
|
|
||||||
!isSidebarCollapsed && "mr-3"
|
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
<span className="flex-shrink-0 w-5 h-5 flex items-center justify-center text-muted-foreground">
|
||||||
|
<Server className="h-4 w-4" />
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent
|
||||||
|
side="right"
|
||||||
|
sideOffset={8}
|
||||||
|
>
|
||||||
|
<p>{t("serverAdmin")}</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
</TooltipProvider>
|
||||||
|
) : (
|
||||||
|
<Link
|
||||||
|
href="/admin"
|
||||||
|
className={cn(
|
||||||
|
"flex items-center transition-colors text-muted-foreground hover:text-foreground text-sm w-full hover:bg-sidebar-accent dark:hover:bg-sidebar-accent/50 rounded-md px-3 py-1.5"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<span className="flex-shrink-0 mr-3 w-5 h-5 flex items-center justify-center text-muted-foreground">
|
||||||
<Server className="h-4 w-4" />
|
<Server className="h-4 w-4" />
|
||||||
</span>
|
</span>
|
||||||
{!isSidebarCollapsed && (
|
|
||||||
<>
|
|
||||||
<span className="flex-1">
|
<span className="flex-1">
|
||||||
{t("serverAdmin")}
|
{t("serverAdmin")}
|
||||||
</span>
|
</span>
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Link>
|
</Link>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<SidebarNav
|
<SidebarNav
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -2,8 +2,6 @@
|
|||||||
|
|
||||||
import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
|
import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
|
||||||
import CopyToClipboard from "@app/components/CopyToClipboard";
|
import CopyToClipboard from "@app/components/CopyToClipboard";
|
||||||
import CreatePrivateResourceDialog from "@app/components/CreatePrivateResourceDialog";
|
|
||||||
import EditPrivateResourceDialog from "@app/components/EditPrivateResourceDialog";
|
|
||||||
import { ResourceAccessCertIndicator } from "@app/components/ResourceAccessCertIndicator";
|
import { ResourceAccessCertIndicator } from "@app/components/ResourceAccessCertIndicator";
|
||||||
import {
|
import {
|
||||||
ResourceSitesStatusCell,
|
ResourceSitesStatusCell,
|
||||||
@@ -34,12 +32,14 @@ import { createApiClient, formatAxiosError } from "@app/lib/api";
|
|||||||
import { cn } from "@app/lib/cn";
|
import { cn } from "@app/lib/cn";
|
||||||
import { dataTableFilterPopoverContentClassName } from "@app/lib/dataTableFilterPopover";
|
import { dataTableFilterPopoverContentClassName } from "@app/lib/dataTableFilterPopover";
|
||||||
import { formatSiteResourceDestinationDisplay } from "@app/lib/formatSiteResourceAccess";
|
import { formatSiteResourceDestinationDisplay } from "@app/lib/formatSiteResourceAccess";
|
||||||
|
import { getPrivateResourceSettingsHref } from "@app/lib/launcherResourceAdminHref";
|
||||||
import { getNextSortOrder, getSortDirection } from "@app/lib/sortColumn";
|
import { getNextSortOrder, getSortDirection } from "@app/lib/sortColumn";
|
||||||
import { build } from "@server/build";
|
import { build } from "@server/build";
|
||||||
import { tierMatrix } from "@server/lib/billing/tierMatrix";
|
import { tierMatrix } from "@server/lib/billing/tierMatrix";
|
||||||
import type { PaginationState } from "@tanstack/react-table";
|
import type { PaginationState } from "@tanstack/react-table";
|
||||||
import {
|
import {
|
||||||
ArrowDown01Icon,
|
ArrowDown01Icon,
|
||||||
|
ArrowRight,
|
||||||
ArrowUp10Icon,
|
ArrowUp10Icon,
|
||||||
ArrowUpDown,
|
ArrowUpDown,
|
||||||
ChevronsUpDownIcon,
|
ChevronsUpDownIcon,
|
||||||
@@ -47,6 +47,7 @@ import {
|
|||||||
MoreHorizontal
|
MoreHorizontal
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import { useTranslations } from "next-intl";
|
import { useTranslations } from "next-intl";
|
||||||
|
import Link from "next/link";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
import { startTransition, useMemo, useState, useTransition } from "react";
|
import { startTransition, useMemo, useState, useTransition } from "react";
|
||||||
import { useDebouncedCallback } from "use-debounce";
|
import { useDebouncedCallback } from "use-debounce";
|
||||||
@@ -78,6 +79,7 @@ export type InternalResourceRow = {
|
|||||||
alias: string | null;
|
alias: string | null;
|
||||||
aliasAddress: string | null;
|
aliasAddress: string | null;
|
||||||
niceId: string;
|
niceId: string;
|
||||||
|
enabled: boolean;
|
||||||
tcpPortRangeString: string | null;
|
tcpPortRangeString: string | null;
|
||||||
udpPortRangeString: string | null;
|
udpPortRangeString: string | null;
|
||||||
disableIcmp: boolean;
|
disableIcmp: boolean;
|
||||||
@@ -140,13 +142,10 @@ export default function PrivateResourcesTable({
|
|||||||
const api = createApiClient({ env });
|
const api = createApiClient({ env });
|
||||||
|
|
||||||
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
||||||
|
const [isNavigatingToAddPage, startNavigation] = useTransition();
|
||||||
|
|
||||||
const [selectedInternalResource, setSelectedInternalResource] =
|
const [selectedInternalResource, setSelectedInternalResource] =
|
||||||
useState<InternalResourceRow | null>();
|
useState<InternalResourceRow | null>();
|
||||||
const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
|
|
||||||
const [editingResource, setEditingResource] =
|
|
||||||
useState<InternalResourceRow | null>();
|
|
||||||
const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
|
|
||||||
|
|
||||||
const [isRefreshing, startRefreshTransition] = useTransition();
|
const [isRefreshing, startRefreshTransition] = useTransition();
|
||||||
|
|
||||||
@@ -450,6 +449,17 @@ export default function PrivateResourcesTable({
|
|||||||
</Button>
|
</Button>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
<DropdownMenuContent align="end">
|
<DropdownMenuContent align="end">
|
||||||
|
<Link
|
||||||
|
className="block w-full"
|
||||||
|
href={getPrivateResourceSettingsHref(
|
||||||
|
resourceRow.orgId,
|
||||||
|
resourceRow.niceId
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<DropdownMenuItem>
|
||||||
|
{t("viewSettings")}
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</Link>
|
||||||
<DropdownMenuItem
|
<DropdownMenuItem
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setSelectedInternalResource(
|
setSelectedInternalResource(
|
||||||
@@ -464,15 +474,17 @@ export default function PrivateResourcesTable({
|
|||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
</DropdownMenuContent>
|
</DropdownMenuContent>
|
||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
<Button
|
<Link
|
||||||
variant={"outline"}
|
href={getPrivateResourceSettingsHref(
|
||||||
onClick={() => {
|
resourceRow.orgId,
|
||||||
setEditingResource(resourceRow);
|
resourceRow.niceId
|
||||||
setIsEditDialogOpen(true);
|
)}
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
|
<Button variant={"outline"}>
|
||||||
{t("edit")}
|
{t("edit")}
|
||||||
|
<ArrowRight className="ml-2 w-4 h-4" />
|
||||||
</Button>
|
</Button>
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -580,8 +592,15 @@ export default function PrivateResourcesTable({
|
|||||||
tableId="internal-resources"
|
tableId="internal-resources"
|
||||||
searchPlaceholder={t("resourcesSearch")}
|
searchPlaceholder={t("resourcesSearch")}
|
||||||
searchQuery={searchParams.get("query")?.toString()}
|
searchQuery={searchParams.get("query")?.toString()}
|
||||||
onAdd={() => setIsCreateDialogOpen(true)}
|
onAdd={() =>
|
||||||
|
startNavigation(() =>
|
||||||
|
router.push(
|
||||||
|
`/${orgId}/settings/resources/private/create`
|
||||||
|
)
|
||||||
|
)
|
||||||
|
}
|
||||||
addButtonText={t("resourceAdd")}
|
addButtonText={t("resourceAdd")}
|
||||||
|
isNavigatingToAddPage={isNavigatingToAddPage}
|
||||||
onSearch={handleSearchChange}
|
onSearch={handleSearchChange}
|
||||||
onRefresh={refreshData}
|
onRefresh={refreshData}
|
||||||
onPaginationChange={handlePaginationChange}
|
onPaginationChange={handlePaginationChange}
|
||||||
@@ -597,34 +616,6 @@ export default function PrivateResourcesTable({
|
|||||||
stickyLeftColumn="name"
|
stickyLeftColumn="name"
|
||||||
stickyRightColumn="actions"
|
stickyRightColumn="actions"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{editingResource && (
|
|
||||||
<EditPrivateResourceDialog
|
|
||||||
open={isEditDialogOpen}
|
|
||||||
setOpen={setIsEditDialogOpen}
|
|
||||||
resource={editingResource}
|
|
||||||
orgId={orgId}
|
|
||||||
onSuccess={() => {
|
|
||||||
// Delay refresh to allow modal to close smoothly
|
|
||||||
setTimeout(() => {
|
|
||||||
router.refresh();
|
|
||||||
setEditingResource(null);
|
|
||||||
}, 150);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<CreatePrivateResourceDialog
|
|
||||||
open={isCreateDialogOpen}
|
|
||||||
setOpen={setIsCreateDialogOpen}
|
|
||||||
orgId={orgId}
|
|
||||||
onSuccess={() => {
|
|
||||||
// Delay refresh to allow modal to close smoothly
|
|
||||||
setTimeout(() => {
|
|
||||||
router.refresh();
|
|
||||||
}, 150);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,232 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import CopyToClipboard from "@app/components/CopyToClipboard";
|
||||||
|
import {
|
||||||
|
InfoSection,
|
||||||
|
InfoSectionContent,
|
||||||
|
InfoSections,
|
||||||
|
InfoSectionTitle
|
||||||
|
} from "@app/components/InfoSection";
|
||||||
|
import { Alert, AlertDescription } from "@app/components/ui/alert";
|
||||||
|
import { useSiteResourceContext } from "@app/hooks/useSiteResourceContext";
|
||||||
|
import { formatPortRestrictionDisplay } from "@app/lib/launcherResourceDetails";
|
||||||
|
import {
|
||||||
|
formatSiteResourceAccess,
|
||||||
|
formatSiteResourceDestinationDisplay,
|
||||||
|
isSafeUrlForLink,
|
||||||
|
type LauncherAccessFields
|
||||||
|
} from "@app/lib/launcherResourceAccess";
|
||||||
|
import type { PrivateResourceMode } from "@app/lib/privateResourceForm";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
|
type SiteResourceInfoInput = {
|
||||||
|
mode: PrivateResourceMode;
|
||||||
|
destination: string | null;
|
||||||
|
destinationPort: number | null;
|
||||||
|
scheme: "http" | "https" | null;
|
||||||
|
ssl: boolean;
|
||||||
|
fullDomain?: string | null;
|
||||||
|
alias?: string | null;
|
||||||
|
aliasAddress?: string | null;
|
||||||
|
authDaemonMode?: "site" | "remote" | "native" | null;
|
||||||
|
tcpPortRangeString?: string | null;
|
||||||
|
udpPortRangeString?: string | null;
|
||||||
|
};
|
||||||
|
|
||||||
|
type SiteResourceInfoBoxVariant = "settings" | "panel";
|
||||||
|
|
||||||
|
type SiteResourceInfoSectionsProps = {
|
||||||
|
siteResource: SiteResourceInfoInput;
|
||||||
|
access: LauncherAccessFields;
|
||||||
|
variant: SiteResourceInfoBoxVariant;
|
||||||
|
accessClassName?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
function AccessMethodContent({
|
||||||
|
accessDisplay,
|
||||||
|
accessCopyValue,
|
||||||
|
accessUrl,
|
||||||
|
className
|
||||||
|
}: LauncherAccessFields & { className?: string }) {
|
||||||
|
if (!accessDisplay) {
|
||||||
|
return <span>-</span>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const href = accessUrl ?? undefined;
|
||||||
|
const canLink = Boolean(href && isSafeUrlForLink(href));
|
||||||
|
|
||||||
|
if (canLink && href) {
|
||||||
|
return (
|
||||||
|
<CopyToClipboard
|
||||||
|
text={href}
|
||||||
|
displayText={accessDisplay}
|
||||||
|
isLink
|
||||||
|
className={className}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<CopyToClipboard
|
||||||
|
text={accessCopyValue || accessDisplay}
|
||||||
|
displayText={accessDisplay}
|
||||||
|
isLink={false}
|
||||||
|
className={className}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SiteResourceInfoSections({
|
||||||
|
siteResource,
|
||||||
|
access,
|
||||||
|
variant,
|
||||||
|
accessClassName
|
||||||
|
}: SiteResourceInfoSectionsProps) {
|
||||||
|
const t = useTranslations();
|
||||||
|
const isPanel = variant === "panel";
|
||||||
|
|
||||||
|
const modeLabel: Record<PrivateResourceMode, string> = {
|
||||||
|
host: t("editInternalResourceDialogModeHost"),
|
||||||
|
cidr: t("editInternalResourceDialogModeCidr"),
|
||||||
|
http: t("editInternalResourceDialogModeHttp"),
|
||||||
|
ssh: t("editInternalResourceDialogModeSsh")
|
||||||
|
};
|
||||||
|
|
||||||
|
const destination = formatSiteResourceDestinationDisplay({
|
||||||
|
mode: siteResource.mode,
|
||||||
|
destination: siteResource.destination,
|
||||||
|
destinationPort: siteResource.destinationPort,
|
||||||
|
scheme: siteResource.scheme
|
||||||
|
});
|
||||||
|
|
||||||
|
const portRestrictions = formatPortRestrictionDisplay({
|
||||||
|
tcpPortRangeString: siteResource.tcpPortRangeString ?? "*",
|
||||||
|
udpPortRangeString: siteResource.udpPortRangeString ?? "*"
|
||||||
|
});
|
||||||
|
const showAlias =
|
||||||
|
siteResource.mode !== "cidr" && siteResource.mode !== "http";
|
||||||
|
const showDestination = !(
|
||||||
|
siteResource.mode === "ssh" && siteResource.authDaemonMode === "native"
|
||||||
|
);
|
||||||
|
|
||||||
|
const numSections =
|
||||||
|
2 + (showDestination ? 1 : 0) + (showAlias ? 1 : 0) + (isPanel ? 1 : 0);
|
||||||
|
|
||||||
|
const sections = (
|
||||||
|
<InfoSections cols={numSections} layout={isPanel ? "panel" : "default"}>
|
||||||
|
<InfoSection>
|
||||||
|
<InfoSectionTitle>{t("type")}</InfoSectionTitle>
|
||||||
|
<InfoSectionContent>
|
||||||
|
{modeLabel[siteResource.mode]}
|
||||||
|
</InfoSectionContent>
|
||||||
|
</InfoSection>
|
||||||
|
|
||||||
|
<InfoSection>
|
||||||
|
<InfoSectionTitle>{t("access")}</InfoSectionTitle>
|
||||||
|
<InfoSectionContent>
|
||||||
|
<AccessMethodContent
|
||||||
|
accessDisplay={access.accessDisplay}
|
||||||
|
accessCopyValue={access.accessCopyValue}
|
||||||
|
accessUrl={access.accessUrl}
|
||||||
|
className={accessClassName}
|
||||||
|
/>
|
||||||
|
</InfoSectionContent>
|
||||||
|
</InfoSection>
|
||||||
|
|
||||||
|
{showDestination ? (
|
||||||
|
<InfoSection>
|
||||||
|
<InfoSectionTitle>
|
||||||
|
{t("editInternalResourceDialogDestination")}
|
||||||
|
</InfoSectionTitle>
|
||||||
|
<InfoSectionContent>
|
||||||
|
{destination || "-"}
|
||||||
|
</InfoSectionContent>
|
||||||
|
</InfoSection>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{showAlias ? (
|
||||||
|
<InfoSection>
|
||||||
|
<InfoSectionTitle>
|
||||||
|
{t("editInternalResourceDialogAlias")}
|
||||||
|
</InfoSectionTitle>
|
||||||
|
<InfoSectionContent>
|
||||||
|
{siteResource.alias?.trim() ? siteResource.alias : "-"}
|
||||||
|
</InfoSectionContent>
|
||||||
|
</InfoSection>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{isPanel ? (
|
||||||
|
<InfoSection>
|
||||||
|
<InfoSectionTitle>{t("portRestrictions")}</InfoSectionTitle>
|
||||||
|
<InfoSectionContent>
|
||||||
|
{!portRestrictions.hasNonDefaultPorts ? (
|
||||||
|
<span>
|
||||||
|
{t("resourceLauncherNoPortRestrictions")}
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-1">
|
||||||
|
{portRestrictions.tcp.state !== "all" ? (
|
||||||
|
<div>
|
||||||
|
{t("resourceLauncherTcp")}:{" "}
|
||||||
|
{portRestrictions.tcp.state ===
|
||||||
|
"blocked"
|
||||||
|
? t("blocked")
|
||||||
|
: portRestrictions.tcp.ports}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
{portRestrictions.udp.state !== "all" ? (
|
||||||
|
<div>
|
||||||
|
{t("resourceLauncherUdp")}:{" "}
|
||||||
|
{portRestrictions.udp.state ===
|
||||||
|
"blocked"
|
||||||
|
? t("blocked")
|
||||||
|
: portRestrictions.udp.ports}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</InfoSectionContent>
|
||||||
|
</InfoSection>
|
||||||
|
) : null}
|
||||||
|
</InfoSections>
|
||||||
|
);
|
||||||
|
|
||||||
|
if (isPanel) {
|
||||||
|
return sections;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Alert>
|
||||||
|
<AlertDescription>{sections}</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
type SiteResourceInfoBoxProps = {
|
||||||
|
variant?: "settings";
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function SiteResourceInfoBox({
|
||||||
|
variant = "settings"
|
||||||
|
}: SiteResourceInfoBoxProps) {
|
||||||
|
const { siteResource } = useSiteResourceContext();
|
||||||
|
|
||||||
|
const access = formatSiteResourceAccess({
|
||||||
|
mode: siteResource.mode,
|
||||||
|
destination: siteResource.destination,
|
||||||
|
destinationPort: siteResource.destinationPort,
|
||||||
|
scheme: siteResource.scheme,
|
||||||
|
ssl: siteResource.ssl,
|
||||||
|
fullDomain: siteResource.fullDomain ?? null,
|
||||||
|
alias: siteResource.alias ?? null,
|
||||||
|
aliasAddress: siteResource.aliasAddress ?? null
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SiteResourceInfoSections
|
||||||
|
siteResource={siteResource}
|
||||||
|
access={access}
|
||||||
|
variant={variant}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -7,6 +7,7 @@ import { SettingsContainer } from "@app/components/Settings";
|
|||||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||||
import { createApiClient } from "@app/lib/api";
|
import { createApiClient } from "@app/lib/api";
|
||||||
import { formatSiteResourceDestinationDisplay } from "@app/lib/formatSiteResourceAccess";
|
import { formatSiteResourceDestinationDisplay } from "@app/lib/formatSiteResourceAccess";
|
||||||
|
import { getPrivateResourceSettingsHref } from "@app/lib/launcherResourceAdminHref";
|
||||||
import type { ListAllSiteResourcesByOrgResponse } from "@server/routers/siteResource";
|
import type { ListAllSiteResourcesByOrgResponse } from "@server/routers/siteResource";
|
||||||
import type { ListResourcesResponse } from "@server/routers/resource";
|
import type { ListResourcesResponse } from "@server/routers/resource";
|
||||||
import type ResponseT from "@server/types/Response";
|
import type ResponseT from "@server/types/Response";
|
||||||
@@ -432,19 +433,13 @@ export default function SiteResourcesOverview({
|
|||||||
editHref: `/${orgId}/settings/resources/public/${r.niceId}`
|
editHref: `/${orgId}/settings/resources/public/${r.niceId}`
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const privateRows = privateList.map((row) => {
|
const privateRows = privateList.map((row) => ({
|
||||||
const qs = new URLSearchParams({
|
|
||||||
siteId: String(siteId),
|
|
||||||
query: row.niceId
|
|
||||||
});
|
|
||||||
return {
|
|
||||||
key: row.siteResourceId,
|
key: row.siteResourceId,
|
||||||
meta: <PrivateResourceMeta row={row} />,
|
meta: <PrivateResourceMeta row={row} />,
|
||||||
name: row.name,
|
name: row.name,
|
||||||
access: <PrivateAccessMethod row={row} />,
|
access: <PrivateAccessMethod row={row} />,
|
||||||
editHref: `/${orgId}/settings/resources/private?${qs.toString()}`
|
editHref: getPrivateResourceSettingsHref(orgId, row.niceId)
|
||||||
};
|
}));
|
||||||
});
|
|
||||||
|
|
||||||
if (showEmptyPlaceholder) {
|
if (showEmptyPlaceholder) {
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -0,0 +1,201 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { SettingsFormCell } from "@app/components/Settings";
|
||||||
|
import {
|
||||||
|
StrategySelect,
|
||||||
|
type StrategyOption
|
||||||
|
} from "@app/components/StrategySelect";
|
||||||
|
import { Badge } from "@app/components/ui/badge";
|
||||||
|
import { Input } from "@app/components/ui/input";
|
||||||
|
import { Label } from "@app/components/ui/label";
|
||||||
|
import { ExternalLink } from "lucide-react";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
import { useMemo } from "react";
|
||||||
|
|
||||||
|
export type SshServerSettingsFormFields = {
|
||||||
|
pamMode: "passthrough" | "push";
|
||||||
|
standardDaemonLocation: "site" | "remote";
|
||||||
|
authDaemonPort: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type SshServerSettingsFieldsProps = {
|
||||||
|
pamMode: "passthrough" | "push";
|
||||||
|
standardDaemonLocation: "site" | "remote";
|
||||||
|
authDaemonPort: string;
|
||||||
|
onPamModeChange: (value: "passthrough" | "push") => void;
|
||||||
|
onStandardDaemonLocationChange: (value: "site" | "remote") => void;
|
||||||
|
onAuthDaemonPortChange: (value: string) => void;
|
||||||
|
authDaemonPortError?: string;
|
||||||
|
sshServerMode: "standard" | "native";
|
||||||
|
serverModeDisplay: "badge" | "select";
|
||||||
|
onServerModeChange?: (mode: "standard" | "native") => void;
|
||||||
|
sshServerModeOptions?: StrategyOption<"standard" | "native">[];
|
||||||
|
idPrefix?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function SshServerSettingsFields({
|
||||||
|
pamMode,
|
||||||
|
standardDaemonLocation,
|
||||||
|
authDaemonPort,
|
||||||
|
onPamModeChange,
|
||||||
|
onStandardDaemonLocationChange,
|
||||||
|
onAuthDaemonPortChange,
|
||||||
|
authDaemonPortError,
|
||||||
|
sshServerMode,
|
||||||
|
serverModeDisplay,
|
||||||
|
onServerModeChange,
|
||||||
|
sshServerModeOptions,
|
||||||
|
idPrefix = "ssh-server"
|
||||||
|
}: SshServerSettingsFieldsProps) {
|
||||||
|
const t = useTranslations();
|
||||||
|
const isNative = sshServerMode === "native";
|
||||||
|
const showDaemonLocation = !isNative && pamMode === "push";
|
||||||
|
const showDaemonPort =
|
||||||
|
!isNative && pamMode === "push" && standardDaemonLocation === "remote";
|
||||||
|
|
||||||
|
const authMethodOptions = useMemo(
|
||||||
|
(): StrategyOption<"passthrough" | "push">[] => [
|
||||||
|
{
|
||||||
|
id: "passthrough",
|
||||||
|
title: t("sshAuthMethodManual"),
|
||||||
|
description: t("sshAuthMethodManualDescription")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "push",
|
||||||
|
title: t("sshAuthMethodAutomated"),
|
||||||
|
description: t("sshAuthMethodAutomatedDescription")
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[t]
|
||||||
|
);
|
||||||
|
|
||||||
|
const daemonLocationOptions = useMemo(
|
||||||
|
(): StrategyOption<"site" | "remote">[] => [
|
||||||
|
{
|
||||||
|
id: "site",
|
||||||
|
title: t("internalResourceAuthDaemonSite"),
|
||||||
|
description: t("sshDaemonLocationSiteDescription")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "remote",
|
||||||
|
title: t("sshDaemonLocationRemote"),
|
||||||
|
description: t("sshDaemonLocationRemoteDescription")
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[t]
|
||||||
|
);
|
||||||
|
|
||||||
|
const defaultSshServerModeOptions = useMemo(
|
||||||
|
(): StrategyOption<"standard" | "native">[] => [
|
||||||
|
{
|
||||||
|
id: "native",
|
||||||
|
title: t("sshServerModePangolin"),
|
||||||
|
description: t("sshServerModeNativeDescription")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "standard",
|
||||||
|
title: t("sshServerModeStandard"),
|
||||||
|
description: t("sshServerModeStandardDescription")
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[t]
|
||||||
|
);
|
||||||
|
|
||||||
|
const modeOptions = sshServerModeOptions ?? defaultSshServerModeOptions;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<SettingsFormCell span="full">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<p className="font-semibold text-sm">
|
||||||
|
{t("sshServerMode")}
|
||||||
|
</p>
|
||||||
|
{serverModeDisplay === "badge" ? (
|
||||||
|
<Badge variant="secondary">
|
||||||
|
{sshServerMode === "standard"
|
||||||
|
? t("sshServerModeStandard")
|
||||||
|
: t("sshServerModePangolin")}
|
||||||
|
</Badge>
|
||||||
|
) : (
|
||||||
|
<StrategySelect<"standard" | "native">
|
||||||
|
idPrefix={`${idPrefix}-mode`}
|
||||||
|
value={sshServerMode}
|
||||||
|
options={modeOptions}
|
||||||
|
onChange={(value) => onServerModeChange?.(value)}
|
||||||
|
cols={2}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</SettingsFormCell>
|
||||||
|
|
||||||
|
<SettingsFormCell span="full">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<p className="font-semibold text-sm">
|
||||||
|
{t("sshAuthenticationMethod")}
|
||||||
|
</p>
|
||||||
|
<StrategySelect<"passthrough" | "push">
|
||||||
|
idPrefix={`${idPrefix}-auth`}
|
||||||
|
value={pamMode}
|
||||||
|
options={authMethodOptions}
|
||||||
|
onChange={onPamModeChange}
|
||||||
|
cols={2}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</SettingsFormCell>
|
||||||
|
|
||||||
|
{showDaemonLocation && (
|
||||||
|
<SettingsFormCell span="full">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<p className="font-semibold text-sm">
|
||||||
|
{t("sshAuthDaemonLocation")}
|
||||||
|
</p>
|
||||||
|
<StrategySelect<"site" | "remote">
|
||||||
|
idPrefix={`${idPrefix}-daemon`}
|
||||||
|
value={standardDaemonLocation}
|
||||||
|
options={daemonLocationOptions}
|
||||||
|
onChange={onStandardDaemonLocationChange}
|
||||||
|
cols={2}
|
||||||
|
/>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
{t("sshDaemonDisclaimer")}{" "}
|
||||||
|
<a
|
||||||
|
href="https://docs.pangolin.net/manage/ssh"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-primary hover:underline inline-flex items-center gap-1"
|
||||||
|
>
|
||||||
|
{t("learnMore")}
|
||||||
|
<ExternalLink className="size-3.5 shrink-0" />
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</SettingsFormCell>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{showDaemonPort && (
|
||||||
|
<SettingsFormCell span="half">
|
||||||
|
<div className="grid gap-2">
|
||||||
|
<Label htmlFor={`${idPrefix}-daemon-port`}>
|
||||||
|
{t("sshDaemonPort")}
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id={`${idPrefix}-daemon-port`}
|
||||||
|
type="number"
|
||||||
|
min={1}
|
||||||
|
max={65535}
|
||||||
|
value={authDaemonPort}
|
||||||
|
onChange={(e) =>
|
||||||
|
onAuthDaemonPortChange(e.target.value)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
{authDaemonPortError ? (
|
||||||
|
<p className="text-destructive text-sm">
|
||||||
|
{authDaemonPortError}
|
||||||
|
</p>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</SettingsFormCell>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -18,6 +18,7 @@ interface StrategySelectProps<TValue extends string> {
|
|||||||
defaultValue?: TValue;
|
defaultValue?: TValue;
|
||||||
onChange?: (value: TValue) => void;
|
onChange?: (value: TValue) => void;
|
||||||
cols?: number;
|
cols?: number;
|
||||||
|
idPrefix?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function StrategySelect<TValue extends string>({
|
export function StrategySelect<TValue extends string>({
|
||||||
@@ -25,7 +26,8 @@ export function StrategySelect<TValue extends string>({
|
|||||||
value: controlledValue,
|
value: controlledValue,
|
||||||
defaultValue,
|
defaultValue,
|
||||||
onChange,
|
onChange,
|
||||||
cols = 1
|
cols = 1,
|
||||||
|
idPrefix = "strategy"
|
||||||
}: StrategySelectProps<TValue>) {
|
}: StrategySelectProps<TValue>) {
|
||||||
const [uncontrolledSelected, setUncontrolledSelected] = useState<
|
const [uncontrolledSelected, setUncontrolledSelected] = useState<
|
||||||
TValue | undefined
|
TValue | undefined
|
||||||
@@ -49,10 +51,13 @@ export function StrategySelect<TValue extends string>({
|
|||||||
}}
|
}}
|
||||||
className="grid md:grid-cols-(--cols) gap-4"
|
className="grid md:grid-cols-(--cols) gap-4"
|
||||||
>
|
>
|
||||||
{options.map((option: StrategyOption<TValue>) => (
|
{options.map((option: StrategyOption<TValue>) => {
|
||||||
|
const optionId = `${idPrefix}-${option.id}`;
|
||||||
|
|
||||||
|
return (
|
||||||
<label
|
<label
|
||||||
key={option.id}
|
key={option.id}
|
||||||
htmlFor={option.id}
|
htmlFor={optionId}
|
||||||
data-state={
|
data-state={
|
||||||
selected === option.id ? "checked" : "unchecked"
|
selected === option.id ? "checked" : "unchecked"
|
||||||
}
|
}
|
||||||
@@ -67,7 +72,7 @@ export function StrategySelect<TValue extends string>({
|
|||||||
>
|
>
|
||||||
<RadioGroupItem
|
<RadioGroupItem
|
||||||
value={option.id}
|
value={option.id}
|
||||||
id={option.id}
|
id={optionId}
|
||||||
disabled={option.disabled}
|
disabled={option.disabled}
|
||||||
className="absolute left-4 top-5 h-4 w-4 border-primary text-primary"
|
className="absolute left-4 top-5 h-4 w-4 border-primary text-primary"
|
||||||
/>
|
/>
|
||||||
@@ -76,7 +81,9 @@ export function StrategySelect<TValue extends string>({
|
|||||||
<div className="mt-1">{option.icon}</div>
|
<div className="mt-1">{option.icon}</div>
|
||||||
)}
|
)}
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
<div className="font-medium">{option.title}</div>
|
<div className="font-medium">
|
||||||
|
{option.title}
|
||||||
|
</div>
|
||||||
<div className="text-sm text-muted-foreground">
|
<div className="text-sm text-muted-foreground">
|
||||||
{typeof option.description === "string"
|
{typeof option.description === "string"
|
||||||
? option.description
|
? option.description
|
||||||
@@ -85,7 +92,8 @@ export function StrategySelect<TValue extends string>({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</label>
|
</label>
|
||||||
))}
|
);
|
||||||
|
})}
|
||||||
</RadioGroup>
|
</RadioGroup>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -20,6 +20,8 @@ export type MultiSitesSelectorProps = {
|
|||||||
onSelectionChange: (sites: Selectedsite[]) => void;
|
onSelectionChange: (sites: Selectedsite[]) => void;
|
||||||
filterTypes?: string[];
|
filterTypes?: string[];
|
||||||
scope?: "org" | "launcher";
|
scope?: "org" | "launcher";
|
||||||
|
onClear?: () => void;
|
||||||
|
showClear?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
export function formatMultiSitesSelectorLabel(
|
export function formatMultiSitesSelectorLabel(
|
||||||
@@ -42,7 +44,9 @@ export function MultiSitesSelector({
|
|||||||
selectedSites,
|
selectedSites,
|
||||||
onSelectionChange,
|
onSelectionChange,
|
||||||
filterTypes,
|
filterTypes,
|
||||||
scope = "org"
|
scope = "org",
|
||||||
|
onClear,
|
||||||
|
showClear = false
|
||||||
}: MultiSitesSelectorProps) {
|
}: MultiSitesSelectorProps) {
|
||||||
const t = useTranslations();
|
const t = useTranslations();
|
||||||
const [siteSearchQuery, setSiteSearchQuery] = useState("");
|
const [siteSearchQuery, setSiteSearchQuery] = useState("");
|
||||||
@@ -60,7 +64,7 @@ export function MultiSitesSelector({
|
|||||||
...launcherQueries.sites({
|
...launcherQueries.sites({
|
||||||
orgId,
|
orgId,
|
||||||
query: debouncedQuery,
|
query: debouncedQuery,
|
||||||
perPage: 500
|
perPage: 20
|
||||||
}),
|
}),
|
||||||
enabled: scope === "launcher"
|
enabled: scope === "launcher"
|
||||||
});
|
});
|
||||||
@@ -107,6 +111,14 @@ export function MultiSitesSelector({
|
|||||||
<CommandList>
|
<CommandList>
|
||||||
<CommandEmpty>{t("siteNotFound")}</CommandEmpty>
|
<CommandEmpty>{t("siteNotFound")}</CommandEmpty>
|
||||||
<CommandGroup>
|
<CommandGroup>
|
||||||
|
{showClear && onClear && (
|
||||||
|
<CommandItem
|
||||||
|
onSelect={onClear}
|
||||||
|
className="text-muted-foreground"
|
||||||
|
>
|
||||||
|
{t("accessFilterClear")}
|
||||||
|
</CommandItem>
|
||||||
|
)}
|
||||||
{sitesShown.map((site) => (
|
{sitesShown.map((site) => (
|
||||||
<CommandItem
|
<CommandItem
|
||||||
key={site.siteId}
|
key={site.siteId}
|
||||||
|
|||||||
@@ -10,6 +10,7 @@ import {
|
|||||||
type SelectedLabel
|
type SelectedLabel
|
||||||
} from "@app/components/labels-selector";
|
} from "@app/components/labels-selector";
|
||||||
import { LabelsFilterSelector } from "@app/components/LabelsFilterSelector";
|
import { LabelsFilterSelector } from "@app/components/LabelsFilterSelector";
|
||||||
|
import { Badge } from "@app/components/ui/badge";
|
||||||
import { Button } from "@app/components/ui/button";
|
import { Button } from "@app/components/ui/button";
|
||||||
import {
|
import {
|
||||||
Popover,
|
Popover,
|
||||||
@@ -46,14 +47,14 @@ export function LauncherFilterPopover({
|
|||||||
const { data: labels = [] } = useQuery(
|
const { data: labels = [] } = useQuery(
|
||||||
launcherQueries.labels({
|
launcherQueries.labels({
|
||||||
orgId,
|
orgId,
|
||||||
perPage: 500
|
perPage: 20
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
|
||||||
const { data: sites = [] } = useQuery(
|
const { data: sites = [] } = useQuery(
|
||||||
launcherQueries.sites({
|
launcherQueries.sites({
|
||||||
orgId,
|
orgId,
|
||||||
perPage: 500
|
perPage: 20
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
|
||||||
@@ -96,14 +97,32 @@ export function LauncherFilterPopover({
|
|||||||
[labels, selectedLabels]
|
[labels, selectedLabels]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const activeFilterCount = selectedSites.length + selectedLabels.length;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Popover modal={false}>
|
<Popover modal={false}>
|
||||||
<PopoverTrigger asChild>
|
<PopoverTrigger asChild>
|
||||||
<Button variant="outline" size="icon" className="shrink-0">
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
className="relative shrink-0"
|
||||||
|
>
|
||||||
<Funnel className="size-4" />
|
<Funnel className="size-4" />
|
||||||
<span className="sr-only">
|
<span className="sr-only">
|
||||||
{t("resourceLauncherFilter")}
|
{activeFilterCount > 0
|
||||||
|
? t("resourceLauncherFilterWithCount", {
|
||||||
|
count: activeFilterCount
|
||||||
|
})
|
||||||
|
: t("resourceLauncherFilter")}
|
||||||
</span>
|
</span>
|
||||||
|
{activeFilterCount > 0 && (
|
||||||
|
<Badge
|
||||||
|
variant="secondary"
|
||||||
|
className="absolute -top-1 -right-1 flex h-5 min-w-5 items-center justify-center px-1.5 text-xs"
|
||||||
|
>
|
||||||
|
{activeFilterCount > 99 ? "99+" : activeFilterCount}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
</Button>
|
</Button>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent align="end" className="w-72">
|
<PopoverContent align="end" className="w-72">
|
||||||
@@ -139,6 +158,10 @@ export function LauncherFilterPopover({
|
|||||||
selectedSites={resolvedSelectedSites}
|
selectedSites={resolvedSelectedSites}
|
||||||
onSelectionChange={onSitesChange}
|
onSelectionChange={onSitesChange}
|
||||||
scope="launcher"
|
scope="launcher"
|
||||||
|
showClear={selectedSites.length > 0}
|
||||||
|
onClear={() => {
|
||||||
|
onSitesChange([]);
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
</PopoverContent>
|
</PopoverContent>
|
||||||
</Popover>
|
</Popover>
|
||||||
@@ -172,6 +195,7 @@ export function LauncherFilterPopover({
|
|||||||
<LabelsFilterSelector
|
<LabelsFilterSelector
|
||||||
orgId={orgId}
|
orgId={orgId}
|
||||||
scope="launcher"
|
scope="launcher"
|
||||||
|
selectedLabels={resolvedSelectedLabels}
|
||||||
isSelected={(label) =>
|
isSelected={(label) =>
|
||||||
selectedLabelIds.has(label.labelId)
|
selectedLabelIds.has(label.labelId)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,125 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import type { LauncherActiveViewId } from "@app/lib/launcherLocalStorage";
|
||||||
|
import { hasActiveLauncherFilters } from "@app/lib/launcherScale";
|
||||||
|
import { launcherQueries } from "@app/lib/queries";
|
||||||
|
import type {
|
||||||
|
LauncherResource,
|
||||||
|
LauncherViewConfig
|
||||||
|
} from "@server/routers/launcher/types";
|
||||||
|
import { LAUNCHER_FLAT_GROUP_KEY } from "@server/routers/launcher/types";
|
||||||
|
import { useInfiniteQuery } from "@tanstack/react-query";
|
||||||
|
import { Loader2 } from "lucide-react";
|
||||||
|
import { useEffect, useMemo, useRef } from "react";
|
||||||
|
import { LauncherEmptyState } from "./LauncherEmptyState";
|
||||||
|
import { LauncherResourceGrid } from "./LauncherResourceGrid";
|
||||||
|
import { LauncherResourceList } from "./LauncherResourceList";
|
||||||
|
|
||||||
|
type LauncherFlatResourceListProps = {
|
||||||
|
orgId: string;
|
||||||
|
activeViewId: LauncherActiveViewId;
|
||||||
|
config: LauncherViewConfig;
|
||||||
|
onClearFilters?: () => void;
|
||||||
|
onResourceSelect?: (resource: LauncherResource) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function LauncherFlatResourceList({
|
||||||
|
orgId,
|
||||||
|
config,
|
||||||
|
onClearFilters,
|
||||||
|
onResourceSelect
|
||||||
|
}: LauncherFlatResourceListProps) {
|
||||||
|
const loadMoreRef = useRef<HTMLDivElement | null>(null);
|
||||||
|
|
||||||
|
const resourceFilters = useMemo(
|
||||||
|
() => ({
|
||||||
|
query: config.query,
|
||||||
|
groupBy: config.groupBy,
|
||||||
|
groupKey: LAUNCHER_FLAT_GROUP_KEY,
|
||||||
|
siteIds: config.siteIds,
|
||||||
|
labelIds: config.labelIds,
|
||||||
|
sort_by: config.sortBy,
|
||||||
|
order: config.order,
|
||||||
|
pageSize: 20
|
||||||
|
}),
|
||||||
|
[
|
||||||
|
config.groupBy,
|
||||||
|
config.labelIds,
|
||||||
|
config.order,
|
||||||
|
config.query,
|
||||||
|
config.siteIds,
|
||||||
|
config.sortBy
|
||||||
|
]
|
||||||
|
);
|
||||||
|
|
||||||
|
const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isFetching } =
|
||||||
|
useInfiniteQuery({
|
||||||
|
...launcherQueries.resources(orgId, resourceFilters)
|
||||||
|
});
|
||||||
|
|
||||||
|
const resources = data?.pages.flatMap((page) => page.resources) ?? [];
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const node = loadMoreRef.current;
|
||||||
|
if (!node || !hasNextPage) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const observer = new IntersectionObserver(
|
||||||
|
(entries) => {
|
||||||
|
if (entries[0]?.isIntersecting && !isFetchingNextPage) {
|
||||||
|
void fetchNextPage();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ rootMargin: "200px" }
|
||||||
|
);
|
||||||
|
|
||||||
|
observer.observe(node);
|
||||||
|
return () => observer.disconnect();
|
||||||
|
}, [fetchNextPage, hasNextPage, isFetchingNextPage]);
|
||||||
|
|
||||||
|
if (resources.length === 0) {
|
||||||
|
if (isFetching) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center py-16 text-muted-foreground">
|
||||||
|
<Loader2 className="size-6 animate-spin" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<LauncherEmptyState
|
||||||
|
variant={
|
||||||
|
hasActiveLauncherFilters(config) ? "noResults" : "empty"
|
||||||
|
}
|
||||||
|
layout={config.layout}
|
||||||
|
query={config.query}
|
||||||
|
onClearFilters={onClearFilters}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-2.5">
|
||||||
|
{config.layout === "grid" ? (
|
||||||
|
<LauncherResourceGrid
|
||||||
|
resources={resources}
|
||||||
|
showLabels={config.showLabels}
|
||||||
|
onResourceSelect={onResourceSelect}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<LauncherResourceList
|
||||||
|
resources={resources}
|
||||||
|
showLabels={config.showLabels}
|
||||||
|
onResourceSelect={onResourceSelect}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<div ref={loadMoreRef} className="h-4" />
|
||||||
|
{isFetchingNextPage ? (
|
||||||
|
<div className="flex justify-center py-2">
|
||||||
|
<Loader2 className="size-4 animate-spin text-muted-foreground" />
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -69,6 +69,8 @@ export function LauncherGroupList({
|
|||||||
const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isFetching } =
|
const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isFetching } =
|
||||||
useInfiniteQuery({
|
useInfiniteQuery({
|
||||||
...launcherQueries.groups(orgId, groupFilters),
|
...launcherQueries.groups(orgId, groupFilters),
|
||||||
|
...(initialGroups.length > 0
|
||||||
|
? {
|
||||||
initialData: {
|
initialData: {
|
||||||
pages: [
|
pages: [
|
||||||
{
|
{
|
||||||
@@ -78,7 +80,9 @@ export function LauncherGroupList({
|
|||||||
],
|
],
|
||||||
pageParams: [1]
|
pageParams: [1]
|
||||||
},
|
},
|
||||||
refetchOnMount: false
|
refetchOnMount: false as const
|
||||||
|
}
|
||||||
|
: {})
|
||||||
});
|
});
|
||||||
|
|
||||||
const groups = data?.pages.flatMap((page) => page.groups) ?? [];
|
const groups = data?.pages.flatMap((page) => page.groups) ?? [];
|
||||||
|
|||||||
@@ -23,9 +23,8 @@ export function LauncherRefreshButton({
|
|||||||
className="shrink-0"
|
className="shrink-0"
|
||||||
>
|
>
|
||||||
<RefreshCw
|
<RefreshCw
|
||||||
className={`mr-0 sm:mr-2 h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`}
|
className={`size-4 ${isRefreshing ? "animate-spin" : ""}`}
|
||||||
/>
|
/>
|
||||||
<span className="hidden sm:inline">{t("refresh")}</span>
|
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,17 +1,52 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
|
import CopyToClipboard from "@app/components/CopyToClipboard";
|
||||||
|
import {
|
||||||
|
InfoSection,
|
||||||
|
InfoSectionContent,
|
||||||
|
InfoSections,
|
||||||
|
InfoSectionTitle
|
||||||
|
} from "@app/components/InfoSection";
|
||||||
|
import { SiteResourceInfoSections } from "@app/components/SiteResourceInfoBox";
|
||||||
|
import {
|
||||||
|
SettingsSection,
|
||||||
|
SettingsSectionBody,
|
||||||
|
SettingsSectionDescription,
|
||||||
|
SettingsSectionHeader,
|
||||||
|
SettingsSectionTitle
|
||||||
|
} from "@app/components/Settings";
|
||||||
import {
|
import {
|
||||||
SidePanel,
|
SidePanel,
|
||||||
SidePanelBody,
|
SidePanelBody,
|
||||||
SidePanelContent,
|
SidePanelContent,
|
||||||
SidePanelDescription,
|
|
||||||
SidePanelFooter,
|
SidePanelFooter,
|
||||||
SidePanelHeader,
|
SidePanelHeader,
|
||||||
SidePanelTitle
|
SidePanelTitle
|
||||||
} from "@app/components/SidePanel";
|
} from "@app/components/SidePanel";
|
||||||
|
import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
|
||||||
import { Button } from "@app/components/ui/button";
|
import { Button } from "@app/components/ui/button";
|
||||||
|
import {
|
||||||
|
derivePublicAuthState,
|
||||||
|
formatPublicResourceType
|
||||||
|
} from "@app/lib/launcherResourceDetails";
|
||||||
import { getLauncherResourceAdminHref } from "@app/lib/launcherResourceAdminHref";
|
import { getLauncherResourceAdminHref } from "@app/lib/launcherResourceAdminHref";
|
||||||
|
import { isSafeUrlForLink } from "@app/lib/launcherResourceAccess";
|
||||||
|
import { launcherQueries } from "@app/lib/queries";
|
||||||
import type { LauncherResource } from "@server/routers/launcher/types";
|
import type { LauncherResource } from "@server/routers/launcher/types";
|
||||||
|
import type { GetResourceAuthInfoResponse } from "@server/routers/resource/getResourceAuthInfo";
|
||||||
|
import type { GetResourceResponse } from "@server/routers/resource/getResource";
|
||||||
|
import type { GetSiteResourceResponse } from "@server/routers/siteResource/getSiteResource";
|
||||||
|
import { useQuery } from "@tanstack/react-query";
|
||||||
|
import {
|
||||||
|
AlertCircle,
|
||||||
|
CheckCircle2,
|
||||||
|
Clock,
|
||||||
|
ExternalLink,
|
||||||
|
Loader2,
|
||||||
|
ShieldCheck,
|
||||||
|
ShieldOff,
|
||||||
|
XCircle
|
||||||
|
} from "lucide-react";
|
||||||
import { useTranslations } from "next-intl";
|
import { useTranslations } from "next-intl";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
|
||||||
@@ -23,6 +58,368 @@ type LauncherResourcePanelProps = {
|
|||||||
isAdmin: boolean;
|
isAdmin: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
type LauncherResourceDetailResult =
|
||||||
|
| {
|
||||||
|
resourceType: "public";
|
||||||
|
data: GetResourceResponse;
|
||||||
|
authInfo: GetResourceAuthInfoResponse;
|
||||||
|
}
|
||||||
|
| { resourceType: "site"; data: GetSiteResourceResponse };
|
||||||
|
|
||||||
|
function AccessMethodContent({
|
||||||
|
accessDisplay,
|
||||||
|
accessCopyValue,
|
||||||
|
accessUrl
|
||||||
|
}: {
|
||||||
|
accessDisplay: string;
|
||||||
|
accessCopyValue: string;
|
||||||
|
accessUrl?: string | null;
|
||||||
|
}) {
|
||||||
|
if (!accessDisplay) {
|
||||||
|
return <span>-</span>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const href = accessUrl ?? undefined;
|
||||||
|
const canLink = Boolean(href && isSafeUrlForLink(href));
|
||||||
|
|
||||||
|
if (canLink && href) {
|
||||||
|
return (
|
||||||
|
<CopyToClipboard
|
||||||
|
text={href}
|
||||||
|
displayText={accessDisplay}
|
||||||
|
isLink={true}
|
||||||
|
className="text-base"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<CopyToClipboard
|
||||||
|
text={accessCopyValue || accessDisplay}
|
||||||
|
displayText={accessDisplay}
|
||||||
|
isLink={false}
|
||||||
|
className="text-base"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function HealthStatusDisplay({
|
||||||
|
health
|
||||||
|
}: {
|
||||||
|
health: string | null | undefined;
|
||||||
|
}) {
|
||||||
|
const t = useTranslations();
|
||||||
|
const status = health ?? "unknown";
|
||||||
|
|
||||||
|
if (status === "healthy") {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<CheckCircle2 className="size-4 shrink-0 text-green-500" />
|
||||||
|
<span>{t("resourcesTableHealthy")}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (status === "degraded") {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<CheckCircle2 className="size-4 shrink-0 text-yellow-500" />
|
||||||
|
<span>{t("resourcesTableDegraded")}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (status === "unhealthy") {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<XCircle className="size-4 shrink-0 text-destructive" />
|
||||||
|
<span>{t("resourcesTableUnhealthy")}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Clock className="size-4 shrink-0 text-muted-foreground" />
|
||||||
|
<span>{t("resourcesTableUnknown")}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const PUBLIC_AUTH_BROWSER_MODES = ["http", "ssh", "rdp", "vnc"];
|
||||||
|
|
||||||
|
function AuthMethodStatusDisplay({ enabled }: { enabled: boolean }) {
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{enabled ? (
|
||||||
|
<CheckCircle2 className="size-4 text-green-600" />
|
||||||
|
) : (
|
||||||
|
<XCircle className="size-4 text-red-600" />
|
||||||
|
)}
|
||||||
|
<span>{enabled ? t("enabled") : t("disabled")}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function PublicResourceAuthMethods({
|
||||||
|
authInfo
|
||||||
|
}: {
|
||||||
|
authInfo: GetResourceAuthInfoResponse;
|
||||||
|
}) {
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
|
const authMethods = [
|
||||||
|
{
|
||||||
|
key: "sso",
|
||||||
|
title: t("policyAuthSsoTitle"),
|
||||||
|
enabled: authInfo.sso
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "password",
|
||||||
|
title: t("policyAuthPasscodeTitle"),
|
||||||
|
enabled: authInfo.password
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "pincode",
|
||||||
|
title: t("policyAuthPincodeTitle"),
|
||||||
|
enabled: authInfo.pincode
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "whitelist",
|
||||||
|
title: t("policyAuthEmailTitle"),
|
||||||
|
enabled: authInfo.whitelist
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "headerAuth",
|
||||||
|
title: t("policyAuthHeaderAuthTitle"),
|
||||||
|
enabled: authInfo.headerAuth
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SettingsSection>
|
||||||
|
<SettingsSectionHeader>
|
||||||
|
<SettingsSectionTitle>
|
||||||
|
{t("authentication")}
|
||||||
|
</SettingsSectionTitle>
|
||||||
|
<SettingsSectionDescription>
|
||||||
|
{t("resourceLauncherAuthMethodsDescription")}
|
||||||
|
</SettingsSectionDescription>
|
||||||
|
</SettingsSectionHeader>
|
||||||
|
<SettingsSectionBody>
|
||||||
|
<InfoSections cols={authMethods.length} layout="panel">
|
||||||
|
{authMethods.map((method) => (
|
||||||
|
<InfoSection key={method.key}>
|
||||||
|
<InfoSectionTitle>{method.title}</InfoSectionTitle>
|
||||||
|
<InfoSectionContent>
|
||||||
|
<AuthMethodStatusDisplay
|
||||||
|
enabled={method.enabled}
|
||||||
|
/>
|
||||||
|
</InfoSectionContent>
|
||||||
|
</InfoSection>
|
||||||
|
))}
|
||||||
|
</InfoSections>
|
||||||
|
</SettingsSectionBody>
|
||||||
|
</SettingsSection>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function PublicResourceDetails({
|
||||||
|
launcherResource,
|
||||||
|
resource,
|
||||||
|
authInfo
|
||||||
|
}: {
|
||||||
|
launcherResource: LauncherResource;
|
||||||
|
resource: GetResourceResponse;
|
||||||
|
authInfo: GetResourceAuthInfoResponse;
|
||||||
|
}) {
|
||||||
|
const t = useTranslations();
|
||||||
|
const supportsAuth = PUBLIC_AUTH_BROWSER_MODES.includes(
|
||||||
|
resource.mode || ""
|
||||||
|
);
|
||||||
|
const authState = derivePublicAuthState(resource.mode, authInfo);
|
||||||
|
const infoSectionCount = supportsAuth ? 4 : 3;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<SettingsSection>
|
||||||
|
<SettingsSectionHeader>
|
||||||
|
<SettingsSectionTitle>
|
||||||
|
{t("resourceLauncherResourceDetails")}
|
||||||
|
</SettingsSectionTitle>
|
||||||
|
<SettingsSectionDescription>
|
||||||
|
{t("resourceLauncherResourceDetailsDescription")}
|
||||||
|
</SettingsSectionDescription>
|
||||||
|
</SettingsSectionHeader>
|
||||||
|
<SettingsSectionBody>
|
||||||
|
<InfoSections cols={infoSectionCount} layout="panel">
|
||||||
|
<InfoSection>
|
||||||
|
<InfoSectionTitle>{t("type")}</InfoSectionTitle>
|
||||||
|
<InfoSectionContent>
|
||||||
|
{formatPublicResourceType(resource)}
|
||||||
|
</InfoSectionContent>
|
||||||
|
</InfoSection>
|
||||||
|
<InfoSection>
|
||||||
|
<InfoSectionTitle>{t("access")}</InfoSectionTitle>
|
||||||
|
<InfoSectionContent>
|
||||||
|
<AccessMethodContent
|
||||||
|
accessDisplay={
|
||||||
|
launcherResource.accessDisplay
|
||||||
|
}
|
||||||
|
accessCopyValue={
|
||||||
|
launcherResource.accessCopyValue
|
||||||
|
}
|
||||||
|
accessUrl={launcherResource.accessUrl}
|
||||||
|
/>
|
||||||
|
</InfoSectionContent>
|
||||||
|
</InfoSection>
|
||||||
|
{supportsAuth ? (
|
||||||
|
<InfoSection>
|
||||||
|
<InfoSectionTitle>
|
||||||
|
{t("authentication")}
|
||||||
|
</InfoSectionTitle>
|
||||||
|
<InfoSectionContent>
|
||||||
|
{authState === "protected" ? (
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<ShieldCheck className="size-4 shrink-0 text-green-500" />
|
||||||
|
<span>{t("protected")}</span>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<ShieldOff className="size-4 shrink-0 text-yellow-500" />
|
||||||
|
<span>{t("notProtected")}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</InfoSectionContent>
|
||||||
|
</InfoSection>
|
||||||
|
) : null}
|
||||||
|
<InfoSection>
|
||||||
|
<InfoSectionTitle>{t("health")}</InfoSectionTitle>
|
||||||
|
<InfoSectionContent>
|
||||||
|
<HealthStatusDisplay health={resource.health} />
|
||||||
|
</InfoSectionContent>
|
||||||
|
</InfoSection>
|
||||||
|
</InfoSections>
|
||||||
|
</SettingsSectionBody>
|
||||||
|
</SettingsSection>
|
||||||
|
{supportsAuth ? (
|
||||||
|
<PublicResourceAuthMethods authInfo={authInfo} />
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function PrivateResourceDetails({
|
||||||
|
launcherResource,
|
||||||
|
resource
|
||||||
|
}: {
|
||||||
|
launcherResource: LauncherResource;
|
||||||
|
resource: GetSiteResourceResponse;
|
||||||
|
}) {
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<Alert variant="default">
|
||||||
|
<AlertCircle className="size-4" />
|
||||||
|
<AlertTitle>
|
||||||
|
{t("resourceLauncherPrivateClientRequiredTitle")}
|
||||||
|
</AlertTitle>
|
||||||
|
<AlertDescription>
|
||||||
|
<span>
|
||||||
|
{t("resourceLauncherPrivateClientRequired")}{" "}
|
||||||
|
<a
|
||||||
|
href="https://pangolin.net/downloads"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="inline-flex items-center gap-1 text-primary hover:underline"
|
||||||
|
>
|
||||||
|
{t("resourceLauncherDownloadClient")}
|
||||||
|
<ExternalLink className="size-3.5 shrink-0" />
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
|
||||||
|
<SettingsSection>
|
||||||
|
<SettingsSectionHeader>
|
||||||
|
<SettingsSectionTitle>
|
||||||
|
{t("resourceLauncherResourceDetails")}
|
||||||
|
</SettingsSectionTitle>
|
||||||
|
<SettingsSectionDescription>
|
||||||
|
{t("resourceLauncherResourceDetailsDescription")}
|
||||||
|
</SettingsSectionDescription>
|
||||||
|
</SettingsSectionHeader>
|
||||||
|
<SettingsSectionBody>
|
||||||
|
<SiteResourceInfoSections
|
||||||
|
siteResource={resource}
|
||||||
|
access={{
|
||||||
|
accessDisplay: launcherResource.accessDisplay,
|
||||||
|
accessCopyValue: launcherResource.accessCopyValue,
|
||||||
|
accessUrl: launcherResource.accessUrl
|
||||||
|
}}
|
||||||
|
variant="panel"
|
||||||
|
accessClassName="text-base"
|
||||||
|
/>
|
||||||
|
</SettingsSectionBody>
|
||||||
|
</SettingsSection>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function LauncherResourcePanelBody({
|
||||||
|
orgId,
|
||||||
|
resource,
|
||||||
|
open
|
||||||
|
}: {
|
||||||
|
orgId: string;
|
||||||
|
resource: LauncherResource;
|
||||||
|
open: boolean;
|
||||||
|
}) {
|
||||||
|
const t = useTranslations();
|
||||||
|
const { data, isPending, isError } = useQuery({
|
||||||
|
...launcherQueries.resourceDetail(orgId, resource),
|
||||||
|
enabled: open
|
||||||
|
});
|
||||||
|
|
||||||
|
if (isPending) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center py-12 text-muted-foreground">
|
||||||
|
<Loader2 className="size-6 animate-spin" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isError || !data) {
|
||||||
|
return (
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
{t("resourceLauncherFailedToLoadDetails")}
|
||||||
|
</p>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const detail = data as LauncherResourceDetailResult;
|
||||||
|
|
||||||
|
if (detail.resourceType === "public") {
|
||||||
|
return (
|
||||||
|
<PublicResourceDetails
|
||||||
|
launcherResource={resource}
|
||||||
|
resource={detail.data}
|
||||||
|
authInfo={detail.authInfo}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PrivateResourceDetails
|
||||||
|
launcherResource={resource}
|
||||||
|
resource={detail.data}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export function LauncherResourcePanel({
|
export function LauncherResourcePanel({
|
||||||
open,
|
open,
|
||||||
onOpenChange,
|
onOpenChange,
|
||||||
@@ -37,11 +434,16 @@ export function LauncherResourcePanel({
|
|||||||
<SidePanelContent>
|
<SidePanelContent>
|
||||||
<SidePanelHeader>
|
<SidePanelHeader>
|
||||||
<SidePanelTitle>{resource?.name ?? ""}</SidePanelTitle>
|
<SidePanelTitle>{resource?.name ?? ""}</SidePanelTitle>
|
||||||
<SidePanelDescription>
|
|
||||||
{t("resourceLauncherResourceDetailsDescription")}
|
|
||||||
</SidePanelDescription>
|
|
||||||
</SidePanelHeader>
|
</SidePanelHeader>
|
||||||
<SidePanelBody />
|
<SidePanelBody>
|
||||||
|
{resource ? (
|
||||||
|
<LauncherResourcePanelBody
|
||||||
|
orgId={orgId}
|
||||||
|
resource={resource}
|
||||||
|
open={open}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
</SidePanelBody>
|
||||||
<SidePanelFooter>
|
<SidePanelFooter>
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
|
|||||||
@@ -0,0 +1,86 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { cn } from "@app/lib/cn";
|
||||||
|
import { Search } from "lucide-react";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
|
type LauncherSearchFirstGateProps = {
|
||||||
|
layout: "grid" | "list";
|
||||||
|
};
|
||||||
|
|
||||||
|
function GhostResourceGrid() {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="grid w-full grid-cols-1 gap-2.5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 [&>*]:min-w-0"
|
||||||
|
aria-hidden
|
||||||
|
>
|
||||||
|
{Array.from({ length: 4 }).map((_, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="flex min-w-0 flex-col gap-2.5 rounded-xl border border-border/60 bg-muted/20 p-4"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-5">
|
||||||
|
<div className="size-10 shrink-0 rounded-lg bg-muted/60" />
|
||||||
|
<div className="flex min-w-0 flex-1 flex-col gap-1.5">
|
||||||
|
<div className="h-3.5 w-3/5 rounded bg-muted/60" />
|
||||||
|
<div className="h-3 w-2/5 rounded bg-muted/40" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function GhostResourceList() {
|
||||||
|
return (
|
||||||
|
<div className="flex w-full flex-col" aria-hidden>
|
||||||
|
{Array.from({ length: 3 }).map((_, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className={cn(
|
||||||
|
"flex items-center gap-4 px-4 py-3",
|
||||||
|
index < 2 && "border-b border-border/60"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="size-8 shrink-0 rounded-lg bg-muted/60" />
|
||||||
|
<div className="flex min-w-0 flex-1 flex-col gap-1.5">
|
||||||
|
<div className="h-3.5 w-2/5 rounded bg-muted/60" />
|
||||||
|
<div className="h-3 w-1/4 rounded bg-muted/40" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function LauncherSearchFirstGate({
|
||||||
|
layout
|
||||||
|
}: LauncherSearchFirstGateProps) {
|
||||||
|
const t = useTranslations();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative w-full overflow-hidden rounded-xl border border-dashed border-border">
|
||||||
|
<div className="pointer-events-none absolute inset-0 opacity-50">
|
||||||
|
{layout === "grid" ? (
|
||||||
|
<GhostResourceGrid />
|
||||||
|
) : (
|
||||||
|
<GhostResourceList />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="relative flex min-h-56 flex-col items-center justify-center gap-4 px-6 py-12 text-center">
|
||||||
|
<div className="flex size-12 items-center justify-center rounded-full bg-muted">
|
||||||
|
<Search className="size-5 text-muted-foreground" />
|
||||||
|
</div>
|
||||||
|
<div className="max-w-md space-y-1.5">
|
||||||
|
<h3 className="text-base font-semibold text-foreground">
|
||||||
|
{t("resourceLauncherSearchFirstTitle")}
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
{t("resourceLauncherSearchFirstDescription")}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -15,22 +15,27 @@ import {
|
|||||||
SelectValue
|
SelectValue
|
||||||
} from "@app/components/ui/select";
|
} from "@app/components/ui/select";
|
||||||
import { Switch } from "@app/components/ui/switch";
|
import { Switch } from "@app/components/ui/switch";
|
||||||
import type { LauncherViewConfig } from "@server/routers/launcher/types";
|
import type {
|
||||||
|
LauncherScaleCapabilities,
|
||||||
|
LauncherViewConfig
|
||||||
|
} from "@server/routers/launcher/types";
|
||||||
import { useTranslations } from "next-intl";
|
import { useTranslations } from "next-intl";
|
||||||
import { Settings } from "lucide-react";
|
import { Settings } from "lucide-react";
|
||||||
|
|
||||||
type LauncherSettingsMenuProps = {
|
type LauncherSettingsMenuProps = {
|
||||||
config: LauncherViewConfig;
|
config: LauncherViewConfig;
|
||||||
isDefaultView: boolean;
|
capabilities: LauncherScaleCapabilities;
|
||||||
|
isCompactMode: boolean;
|
||||||
|
selectedGroupBy: LauncherViewConfig["groupBy"];
|
||||||
onConfigChange: (patch: Partial<LauncherViewConfig>) => void;
|
onConfigChange: (patch: Partial<LauncherViewConfig>) => void;
|
||||||
onDeleteView: () => void;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export function LauncherSettingsMenu({
|
export function LauncherSettingsMenu({
|
||||||
config,
|
config,
|
||||||
isDefaultView,
|
capabilities,
|
||||||
onConfigChange,
|
isCompactMode,
|
||||||
onDeleteView
|
selectedGroupBy,
|
||||||
|
onConfigChange
|
||||||
}: LauncherSettingsMenuProps) {
|
}: LauncherSettingsMenuProps) {
|
||||||
const t = useTranslations();
|
const t = useTranslations();
|
||||||
|
|
||||||
@@ -51,7 +56,7 @@ export function LauncherSettingsMenu({
|
|||||||
{t("resourceLauncherGroupBy")}
|
{t("resourceLauncherGroupBy")}
|
||||||
</p>
|
</p>
|
||||||
<Select
|
<Select
|
||||||
value={config.groupBy}
|
value={selectedGroupBy}
|
||||||
onValueChange={(value) =>
|
onValueChange={(value) =>
|
||||||
onConfigChange({
|
onConfigChange({
|
||||||
groupBy:
|
groupBy:
|
||||||
@@ -63,14 +68,46 @@ export function LauncherSettingsMenu({
|
|||||||
<SelectValue />
|
<SelectValue />
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
<SelectItem value="site">
|
<SelectItem value="none">
|
||||||
|
{t("resourceLauncherGroupByNone")}
|
||||||
|
</SelectItem>
|
||||||
|
<SelectItem
|
||||||
|
value="site"
|
||||||
|
disabled={
|
||||||
|
!capabilities.allowSiteGrouping ||
|
||||||
|
(isCompactMode &&
|
||||||
|
config.siteIds.length === 0)
|
||||||
|
}
|
||||||
|
>
|
||||||
{t("resourceLauncherGroupBySite")}
|
{t("resourceLauncherGroupBySite")}
|
||||||
</SelectItem>
|
</SelectItem>
|
||||||
<SelectItem value="label">
|
<SelectItem
|
||||||
|
value="label"
|
||||||
|
disabled={
|
||||||
|
!capabilities.allowLabelGrouping ||
|
||||||
|
(isCompactMode &&
|
||||||
|
config.labelIds.length === 0)
|
||||||
|
}
|
||||||
|
>
|
||||||
{t("resourceLauncherGroupByLabel")}
|
{t("resourceLauncherGroupByLabel")}
|
||||||
</SelectItem>
|
</SelectItem>
|
||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
|
{isCompactMode ? (
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
{t("resourceLauncherCompactGroupingHint")}
|
||||||
|
</p>
|
||||||
|
) : null}
|
||||||
|
{!isCompactMode && !capabilities.allowSiteGrouping ? (
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
{t("resourceLauncherSiteGroupingDisabled")}
|
||||||
|
</p>
|
||||||
|
) : null}
|
||||||
|
{!isCompactMode && !capabilities.allowLabelGrouping ? (
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
{t("resourceLauncherLabelGroupingDisabled")}
|
||||||
|
</p>
|
||||||
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
@@ -116,16 +153,6 @@ export function LauncherSettingsMenu({
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{!isDefaultView ? (
|
|
||||||
<Button
|
|
||||||
variant="destructive"
|
|
||||||
className="w-full rounded-xl"
|
|
||||||
onClick={onDeleteView}
|
|
||||||
>
|
|
||||||
{t("resourceLauncherDeleteView")}
|
|
||||||
</Button>
|
|
||||||
) : null}
|
|
||||||
</div>
|
</div>
|
||||||
</PopoverContent>
|
</PopoverContent>
|
||||||
</Popover>
|
</Popover>
|
||||||
|
|||||||
@@ -68,11 +68,14 @@ type LauncherSaveViewMenuProps = {
|
|||||||
isAdmin: boolean;
|
isAdmin: boolean;
|
||||||
isOrgWideView: boolean;
|
isOrgWideView: boolean;
|
||||||
hasUnsavedChanges: boolean;
|
hasUnsavedChanges: boolean;
|
||||||
|
canResetSystemDefault: boolean;
|
||||||
onSaveToCurrent: () => void;
|
onSaveToCurrent: () => void;
|
||||||
onSaveAsNew: () => void;
|
onSaveAsNew: () => void;
|
||||||
onSaveForEveryone: () => void;
|
onSaveForEveryone: () => void;
|
||||||
onMakePersonal: () => void;
|
onMakePersonal: () => void;
|
||||||
onResetView: () => void;
|
onResetView: () => void;
|
||||||
|
onResetSystemDefault: () => void;
|
||||||
|
onDeleteView: () => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
export function LauncherSaveViewMenu({
|
export function LauncherSaveViewMenu({
|
||||||
@@ -80,13 +83,17 @@ export function LauncherSaveViewMenu({
|
|||||||
isAdmin,
|
isAdmin,
|
||||||
isOrgWideView,
|
isOrgWideView,
|
||||||
hasUnsavedChanges,
|
hasUnsavedChanges,
|
||||||
|
canResetSystemDefault,
|
||||||
onSaveToCurrent,
|
onSaveToCurrent,
|
||||||
onSaveAsNew,
|
onSaveAsNew,
|
||||||
onSaveForEveryone,
|
onSaveForEveryone,
|
||||||
onMakePersonal,
|
onMakePersonal,
|
||||||
onResetView
|
onResetView,
|
||||||
|
onResetSystemDefault,
|
||||||
|
onDeleteView
|
||||||
}: LauncherSaveViewMenuProps) {
|
}: LauncherSaveViewMenuProps) {
|
||||||
const t = useTranslations();
|
const t = useTranslations();
|
||||||
|
const canDeleteView = !isDefaultView && (isAdmin || !isOrgWideView);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DropdownMenu>
|
<DropdownMenu>
|
||||||
@@ -108,7 +115,26 @@ export function LauncherSaveViewMenu({
|
|||||||
<DropdownMenuSeparator />
|
<DropdownMenuSeparator />
|
||||||
</>
|
</>
|
||||||
) : null}
|
) : null}
|
||||||
{!isDefaultView && (isAdmin || !isOrgWideView) ? (
|
{isDefaultView && canResetSystemDefault ? (
|
||||||
|
<>
|
||||||
|
<DropdownMenuItem onSelect={onResetSystemDefault}>
|
||||||
|
{t("resourceLauncherResetSystemDefault")}
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
</>
|
||||||
|
) : null}
|
||||||
|
{isDefaultView && hasUnsavedChanges ? (
|
||||||
|
<>
|
||||||
|
<DropdownMenuItem onSelect={onSaveToCurrent}>
|
||||||
|
{t("resourceLauncherSaveDefaultPersonal")}
|
||||||
|
</DropdownMenuItem>
|
||||||
|
{isAdmin ? (
|
||||||
|
<DropdownMenuItem onSelect={onSaveForEveryone}>
|
||||||
|
{t("resourceLauncherSaveForEveryone")}
|
||||||
|
</DropdownMenuItem>
|
||||||
|
) : null}
|
||||||
|
</>
|
||||||
|
) : !isDefaultView && (isAdmin || !isOrgWideView) ? (
|
||||||
<DropdownMenuItem onSelect={onSaveToCurrent}>
|
<DropdownMenuItem onSelect={onSaveToCurrent}>
|
||||||
{t("resourceLauncherSaveToCurrentView")}
|
{t("resourceLauncherSaveToCurrentView")}
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
@@ -126,6 +152,17 @@ export function LauncherSaveViewMenu({
|
|||||||
{t("resourceLauncherMakePersonal")}
|
{t("resourceLauncherMakePersonal")}
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
) : null}
|
) : null}
|
||||||
|
{canDeleteView ? (
|
||||||
|
<>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
<DropdownMenuItem
|
||||||
|
onSelect={onDeleteView}
|
||||||
|
className="text-destructive focus:text-destructive"
|
||||||
|
>
|
||||||
|
{t("resourceLauncherDeleteView")}
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</>
|
||||||
|
) : null}
|
||||||
</DropdownMenuContent>
|
</DropdownMenuContent>
|
||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -29,12 +29,23 @@ import {
|
|||||||
} from "@app/lib/launcherUrlState";
|
} from "@app/lib/launcherUrlState";
|
||||||
import { useToast } from "@app/hooks/useToast";
|
import { useToast } from "@app/hooks/useToast";
|
||||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||||
import type {
|
import {
|
||||||
LauncherGroup,
|
getEffectiveLauncherConfig,
|
||||||
LauncherViewConfig,
|
shouldShowFlatResourceList,
|
||||||
LauncherViewRecord
|
shouldShowLauncherGroupList,
|
||||||
|
shouldShowSearchFirstGate
|
||||||
|
} from "@app/lib/launcherScale";
|
||||||
|
import { launcherQueries } from "@app/lib/queries";
|
||||||
|
import {
|
||||||
|
getEffectiveDefaultLauncherConfig,
|
||||||
|
type LauncherDefaultViewOverrides,
|
||||||
|
type LauncherGroup,
|
||||||
|
type LauncherResource,
|
||||||
|
type LauncherScaleInfo,
|
||||||
|
type LauncherViewConfig,
|
||||||
|
type LauncherViewRecord
|
||||||
} from "@server/routers/launcher/types";
|
} from "@server/routers/launcher/types";
|
||||||
import { useMutation } from "@tanstack/react-query";
|
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||||
import { Search } from "lucide-react";
|
import { Search } from "lucide-react";
|
||||||
import { useTranslations } from "next-intl";
|
import { useTranslations } from "next-intl";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
@@ -52,20 +63,26 @@ import type { SelectedLabel } from "@app/components/labels-selector";
|
|||||||
import { useMediaQuery } from "@app/hooks/useMediaQuery";
|
import { useMediaQuery } from "@app/hooks/useMediaQuery";
|
||||||
import { cn } from "@app/lib/cn";
|
import { cn } from "@app/lib/cn";
|
||||||
import { LauncherFilterPopover } from "./LauncherFilterPopover";
|
import { LauncherFilterPopover } from "./LauncherFilterPopover";
|
||||||
|
import { LauncherFlatResourceList } from "./LauncherFlatResourceList";
|
||||||
import { LauncherGroupList } from "./LauncherGroupList";
|
import { LauncherGroupList } from "./LauncherGroupList";
|
||||||
|
import { LauncherSearchFirstGate } from "./LauncherSearchFirstGate";
|
||||||
import { LauncherRefreshButton } from "./LauncherRefreshButton";
|
import { LauncherRefreshButton } from "./LauncherRefreshButton";
|
||||||
|
import { LauncherResourcePanel } from "./LauncherResourcePanel";
|
||||||
import { LauncherSettingsMenu } from "./LauncherSettingsMenu";
|
import { LauncherSettingsMenu } from "./LauncherSettingsMenu";
|
||||||
import { LauncherSortButton } from "./LauncherSortButton";
|
import { LauncherSortButton } from "./LauncherSortButton";
|
||||||
import { LauncherSaveViewMenu, LauncherViewTabs } from "./LauncherViewTabs";
|
import { LauncherSaveViewMenu, LauncherViewTabs } from "./LauncherViewTabs";
|
||||||
|
import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
|
||||||
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
|
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
|
||||||
|
|
||||||
type ResourceLauncherProps = {
|
type ResourceLauncherProps = {
|
||||||
orgId: string;
|
orgId: string;
|
||||||
isAdmin: boolean;
|
isAdmin: boolean;
|
||||||
views: LauncherViewRecord[];
|
views: LauncherViewRecord[];
|
||||||
|
defaultViewOverrides: LauncherDefaultViewOverrides;
|
||||||
activeViewId: LauncherActiveViewId;
|
activeViewId: LauncherActiveViewId;
|
||||||
config: LauncherViewConfig;
|
config: LauncherViewConfig;
|
||||||
savedConfig: LauncherViewConfig;
|
savedConfig: LauncherViewConfig;
|
||||||
|
scale: LauncherScaleInfo;
|
||||||
groups: LauncherGroup[];
|
groups: LauncherGroup[];
|
||||||
groupsPagination: {
|
groupsPagination: {
|
||||||
total: number;
|
total: number;
|
||||||
@@ -78,9 +95,11 @@ export default function ResourceLauncher({
|
|||||||
orgId,
|
orgId,
|
||||||
isAdmin,
|
isAdmin,
|
||||||
views,
|
views,
|
||||||
|
defaultViewOverrides,
|
||||||
activeViewId,
|
activeViewId,
|
||||||
config,
|
config,
|
||||||
savedConfig,
|
savedConfig,
|
||||||
|
scale: initialScale,
|
||||||
groups,
|
groups,
|
||||||
groupsPagination
|
groupsPagination
|
||||||
}: ResourceLauncherProps) {
|
}: ResourceLauncherProps) {
|
||||||
@@ -88,6 +107,7 @@ export default function ResourceLauncher({
|
|||||||
const { toast } = useToast();
|
const { toast } = useToast();
|
||||||
const { env } = useEnvContext();
|
const { env } = useEnvContext();
|
||||||
const api = createApiClient({ env });
|
const api = createApiClient({ env });
|
||||||
|
const queryClient = useQueryClient();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { navigate, isNavigating, searchParams } = useNavigationContext();
|
const { navigate, isNavigating, searchParams } = useNavigationContext();
|
||||||
const [isRefreshing, startRefreshTransition] = useTransition();
|
const [isRefreshing, startRefreshTransition] = useTransition();
|
||||||
@@ -95,11 +115,47 @@ export default function ResourceLauncher({
|
|||||||
|
|
||||||
const [searchInputResetKey, setSearchInputResetKey] = useState(0);
|
const [searchInputResetKey, setSearchInputResetKey] = useState(0);
|
||||||
const [saveDialogOpen, setSaveDialogOpen] = useState(false);
|
const [saveDialogOpen, setSaveDialogOpen] = useState(false);
|
||||||
|
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
||||||
const [newViewName, setNewViewName] = useState("");
|
const [newViewName, setNewViewName] = useState("");
|
||||||
const [saveOrgWide, setSaveOrgWide] = useState(false);
|
const [saveOrgWide, setSaveOrgWide] = useState(false);
|
||||||
|
const [selectedResource, setSelectedResource] =
|
||||||
|
useState<LauncherResource | null>(null);
|
||||||
|
const [panelOpen, setPanelOpen] = useState(false);
|
||||||
|
|
||||||
const isDesktop = useMediaQuery("(min-width: 768px)");
|
const isDesktop = useMediaQuery("(min-width: 768px)");
|
||||||
|
|
||||||
|
const scaleFilters = useMemo(
|
||||||
|
() => ({
|
||||||
|
query: config.query,
|
||||||
|
groupBy: config.groupBy,
|
||||||
|
siteIds: config.siteIds,
|
||||||
|
labelIds: config.labelIds,
|
||||||
|
sort_by: config.sortBy,
|
||||||
|
order: config.order
|
||||||
|
}),
|
||||||
|
[
|
||||||
|
config.groupBy,
|
||||||
|
config.labelIds,
|
||||||
|
config.order,
|
||||||
|
config.query,
|
||||||
|
config.siteIds,
|
||||||
|
config.sortBy
|
||||||
|
]
|
||||||
|
);
|
||||||
|
|
||||||
|
const { data: scale = initialScale } = useQuery({
|
||||||
|
...launcherQueries.scale(orgId, scaleFilters),
|
||||||
|
initialData: initialScale
|
||||||
|
});
|
||||||
|
|
||||||
|
const showGroupList = shouldShowLauncherGroupList(scale, config);
|
||||||
|
const showSearchFirstGate = shouldShowSearchFirstGate(scale, config);
|
||||||
|
const showFlatResourceList = shouldShowFlatResourceList(scale, config);
|
||||||
|
const effectiveConfig = useMemo(
|
||||||
|
() => getEffectiveLauncherConfig(scale, config),
|
||||||
|
[config, scale]
|
||||||
|
);
|
||||||
|
|
||||||
const configRef = useRef(config);
|
const configRef = useRef(config);
|
||||||
configRef.current = config;
|
configRef.current = config;
|
||||||
const searchInputRef = useRef(config.query);
|
const searchInputRef = useRef(config.query);
|
||||||
@@ -129,13 +185,24 @@ export default function ResourceLauncher({
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const baseConfig = getLauncherUrlBaseConfig(lastView, views);
|
const baseConfig = getLauncherUrlBaseConfig(
|
||||||
|
lastView,
|
||||||
|
views,
|
||||||
|
defaultViewOverrides
|
||||||
|
);
|
||||||
const params = serializeLauncherUrlState({
|
const params = serializeLauncherUrlState({
|
||||||
viewId: lastView,
|
viewId: lastView,
|
||||||
config: baseConfig
|
config: baseConfig
|
||||||
});
|
});
|
||||||
navigate({ searchParams: params, replace: true });
|
navigate({ searchParams: params, replace: true });
|
||||||
}, [activeViewId, navigate, orgId, searchParams, views]);
|
}, [
|
||||||
|
activeViewId,
|
||||||
|
defaultViewOverrides,
|
||||||
|
navigate,
|
||||||
|
orgId,
|
||||||
|
searchParams,
|
||||||
|
views
|
||||||
|
]);
|
||||||
|
|
||||||
const navigateToConfig = useCallback(
|
const navigateToConfig = useCallback(
|
||||||
(viewId: LauncherActiveViewId, nextConfig: LauncherViewConfig) => {
|
(viewId: LauncherActiveViewId, nextConfig: LauncherViewConfig) => {
|
||||||
@@ -158,10 +225,14 @@ export default function ResourceLauncher({
|
|||||||
const selectView = useCallback(
|
const selectView = useCallback(
|
||||||
(viewId: LauncherActiveViewId) => {
|
(viewId: LauncherActiveViewId) => {
|
||||||
writeLauncherLastView(orgId, viewId);
|
writeLauncherLastView(orgId, viewId);
|
||||||
const baseConfig = getLauncherUrlBaseConfig(viewId, views);
|
const baseConfig = getLauncherUrlBaseConfig(
|
||||||
|
viewId,
|
||||||
|
views,
|
||||||
|
defaultViewOverrides
|
||||||
|
);
|
||||||
navigateToConfig(viewId, baseConfig);
|
navigateToConfig(viewId, baseConfig);
|
||||||
},
|
},
|
||||||
[navigateToConfig, orgId, views]
|
[defaultViewOverrides, navigateToConfig, orgId, views]
|
||||||
);
|
);
|
||||||
|
|
||||||
const activeSavedView = useMemo(
|
const activeSavedView = useMemo(
|
||||||
@@ -175,6 +246,10 @@ export default function ResourceLauncher({
|
|||||||
const isDefaultView = activeViewId === "default";
|
const isDefaultView = activeViewId === "default";
|
||||||
const isOrgWideView = Boolean(activeSavedView?.isOrgWide);
|
const isOrgWideView = Boolean(activeSavedView?.isOrgWide);
|
||||||
const hasUnsavedChanges = !isLauncherConfigEqual(config, savedConfig);
|
const hasUnsavedChanges = !isLauncherConfigEqual(config, savedConfig);
|
||||||
|
const canResetSystemDefault =
|
||||||
|
isDefaultView &&
|
||||||
|
(Boolean(defaultViewOverrides.personal) ||
|
||||||
|
(isAdmin && Boolean(defaultViewOverrides.orgWide)));
|
||||||
|
|
||||||
const selectedSites: Selectedsite[] = useMemo(
|
const selectedSites: Selectedsite[] = useMemo(
|
||||||
() =>
|
() =>
|
||||||
@@ -270,6 +345,87 @@ export default function ResourceLauncher({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const saveDefaultViewMutation = useMutation({
|
||||||
|
mutationFn: async (payload: {
|
||||||
|
config: LauncherViewConfig;
|
||||||
|
orgWide: boolean;
|
||||||
|
}) => {
|
||||||
|
const res = await api.put(
|
||||||
|
`/org/${orgId}/launcher/default-view`,
|
||||||
|
payload
|
||||||
|
);
|
||||||
|
return res.data.data as LauncherViewRecord;
|
||||||
|
},
|
||||||
|
onSuccess: () => {
|
||||||
|
writeLauncherLastView(orgId, "default");
|
||||||
|
const params = serializeLauncherUrlState({
|
||||||
|
viewId: "default",
|
||||||
|
config
|
||||||
|
});
|
||||||
|
navigate({ searchParams: params, replace: true });
|
||||||
|
router.refresh();
|
||||||
|
toast({
|
||||||
|
title: t("resourceLauncherViewSaved"),
|
||||||
|
description: t("resourceLauncherViewSavedDescription")
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onError: (error) => {
|
||||||
|
toast({
|
||||||
|
variant: "destructive",
|
||||||
|
title: t("resourceLauncherViewSaveFailed"),
|
||||||
|
description: formatAxiosError(
|
||||||
|
error,
|
||||||
|
t("resourceLauncherViewSaveFailedDescription")
|
||||||
|
)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const resetSystemDefaultMutation = useMutation({
|
||||||
|
mutationFn: async () => {
|
||||||
|
const resetAll = isAdmin && Boolean(defaultViewOverrides.orgWide);
|
||||||
|
await api.delete(`/org/${orgId}/launcher/default-view`, {
|
||||||
|
data: resetAll ? { all: true } : { orgWide: false }
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onSuccess: () => {
|
||||||
|
writeLauncherLastView(orgId, "default");
|
||||||
|
const nextOverrides: LauncherDefaultViewOverrides = {
|
||||||
|
personal: null,
|
||||||
|
orgWide:
|
||||||
|
isAdmin && defaultViewOverrides.orgWide
|
||||||
|
? null
|
||||||
|
: defaultViewOverrides.orgWide
|
||||||
|
};
|
||||||
|
const targetConfig =
|
||||||
|
getEffectiveDefaultLauncherConfig(nextOverrides);
|
||||||
|
searchInputRef.current = targetConfig.query;
|
||||||
|
setSearchInputResetKey((key) => key + 1);
|
||||||
|
const params = serializeLauncherUrlState({
|
||||||
|
viewId: "default",
|
||||||
|
config: targetConfig
|
||||||
|
});
|
||||||
|
navigate({ searchParams: params, replace: true });
|
||||||
|
router.refresh();
|
||||||
|
toast({
|
||||||
|
title: t("resourceLauncherSystemDefaultRestored"),
|
||||||
|
description: t(
|
||||||
|
"resourceLauncherSystemDefaultRestoredDescription"
|
||||||
|
)
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onError: (error) => {
|
||||||
|
toast({
|
||||||
|
variant: "destructive",
|
||||||
|
title: t("resourceLauncherViewSaveFailed"),
|
||||||
|
description: formatAxiosError(
|
||||||
|
error,
|
||||||
|
t("resourceLauncherViewSaveFailedDescription")
|
||||||
|
)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
const deleteViewMutation = useMutation({
|
const deleteViewMutation = useMutation({
|
||||||
mutationFn: async (viewId: number) => {
|
mutationFn: async (viewId: number) => {
|
||||||
await api.delete(`/org/${orgId}/launcher/views/${viewId}`);
|
await api.delete(`/org/${orgId}/launcher/views/${viewId}`);
|
||||||
@@ -278,7 +434,11 @@ export default function ResourceLauncher({
|
|||||||
writeLauncherLastView(orgId, "default");
|
writeLauncherLastView(orgId, "default");
|
||||||
const params = serializeLauncherUrlState({
|
const params = serializeLauncherUrlState({
|
||||||
viewId: "default",
|
viewId: "default",
|
||||||
config: getLauncherUrlBaseConfig("default", views)
|
config: getLauncherUrlBaseConfig(
|
||||||
|
"default",
|
||||||
|
views,
|
||||||
|
defaultViewOverrides
|
||||||
|
)
|
||||||
});
|
});
|
||||||
navigate({ searchParams: params, replace: true });
|
navigate({ searchParams: params, replace: true });
|
||||||
router.refresh();
|
router.refresh();
|
||||||
@@ -328,9 +488,17 @@ export default function ResourceLauncher({
|
|||||||
navigateToConfig(activeViewIdRef.current, savedConfig);
|
navigateToConfig(activeViewIdRef.current, savedConfig);
|
||||||
}, [navigateToConfig, savedConfig]);
|
}, [navigateToConfig, savedConfig]);
|
||||||
|
|
||||||
|
const handleResetSystemDefault = useCallback(() => {
|
||||||
|
resetSystemDefaultMutation.mutate();
|
||||||
|
}, [resetSystemDefaultMutation]);
|
||||||
|
|
||||||
const refreshData = () => {
|
const refreshData = () => {
|
||||||
startRefreshTransition(async () => {
|
startRefreshTransition(async () => {
|
||||||
try {
|
try {
|
||||||
|
await api.post(`/org/${orgId}/launcher/invalidate-cache`);
|
||||||
|
await queryClient.invalidateQueries({
|
||||||
|
queryKey: ["ORG", orgId, "LAUNCHER"]
|
||||||
|
});
|
||||||
router.refresh();
|
router.refresh();
|
||||||
} catch {
|
} catch {
|
||||||
toast({
|
toast({
|
||||||
@@ -343,7 +511,14 @@ export default function ResourceLauncher({
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handleSaveToCurrent = () => {
|
const handleSaveToCurrent = () => {
|
||||||
if (isDefaultView || (isOrgWideView && !isAdmin)) {
|
if (isDefaultView) {
|
||||||
|
saveDefaultViewMutation.mutate({
|
||||||
|
config,
|
||||||
|
orgWide: false
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (isOrgWideView && !isAdmin) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
updateViewMutation.mutate({
|
updateViewMutation.mutate({
|
||||||
@@ -360,6 +535,10 @@ export default function ResourceLauncher({
|
|||||||
|
|
||||||
const handleSaveForEveryone = () => {
|
const handleSaveForEveryone = () => {
|
||||||
if (isDefaultView) {
|
if (isDefaultView) {
|
||||||
|
saveDefaultViewMutation.mutate({
|
||||||
|
config,
|
||||||
|
orgWide: true
|
||||||
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
updateViewMutation.mutate({
|
updateViewMutation.mutate({
|
||||||
@@ -389,6 +568,18 @@ export default function ResourceLauncher({
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleResourceSelect = useCallback((resource: LauncherResource) => {
|
||||||
|
setSelectedResource(resource);
|
||||||
|
setPanelOpen(true);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handlePanelOpenChange = useCallback((open: boolean) => {
|
||||||
|
setPanelOpen(open);
|
||||||
|
if (!open) {
|
||||||
|
setSelectedResource(null);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
const savedViewTabs = views.map((view) => ({
|
const savedViewTabs = views.map((view) => ({
|
||||||
viewId: view.viewId,
|
viewId: view.viewId,
|
||||||
name: view.name
|
name: view.name
|
||||||
@@ -412,19 +603,8 @@ export default function ResourceLauncher({
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
const renderToolbarActions = () => (
|
const renderToolbarFilterSort = () => (
|
||||||
<>
|
<>
|
||||||
<LauncherSaveViewMenu
|
|
||||||
isDefaultView={isDefaultView}
|
|
||||||
isAdmin={isAdmin}
|
|
||||||
isOrgWideView={isOrgWideView}
|
|
||||||
hasUnsavedChanges={hasUnsavedChanges}
|
|
||||||
onSaveToCurrent={handleSaveToCurrent}
|
|
||||||
onSaveAsNew={handleSaveAsNew}
|
|
||||||
onSaveForEveryone={handleSaveForEveryone}
|
|
||||||
onMakePersonal={handleMakePersonal}
|
|
||||||
onResetView={handleResetView}
|
|
||||||
/>
|
|
||||||
<LauncherFilterPopover
|
<LauncherFilterPopover
|
||||||
orgId={orgId}
|
orgId={orgId}
|
||||||
selectedSites={selectedSites}
|
selectedSites={selectedSites}
|
||||||
@@ -448,15 +628,31 @@ export default function ResourceLauncher({
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
const renderToolbarActions = () => (
|
||||||
|
<>
|
||||||
|
<LauncherSaveViewMenu
|
||||||
|
isDefaultView={isDefaultView}
|
||||||
|
isAdmin={isAdmin}
|
||||||
|
isOrgWideView={isOrgWideView}
|
||||||
|
hasUnsavedChanges={hasUnsavedChanges}
|
||||||
|
canResetSystemDefault={canResetSystemDefault}
|
||||||
|
onSaveToCurrent={handleSaveToCurrent}
|
||||||
|
onSaveAsNew={handleSaveAsNew}
|
||||||
|
onSaveForEveryone={handleSaveForEveryone}
|
||||||
|
onMakePersonal={handleMakePersonal}
|
||||||
|
onResetView={handleResetView}
|
||||||
|
onResetSystemDefault={handleResetSystemDefault}
|
||||||
|
onDeleteView={() => setDeleteDialogOpen(true)}
|
||||||
|
/>
|
||||||
<LauncherSettingsMenu
|
<LauncherSettingsMenu
|
||||||
config={config}
|
config={config}
|
||||||
isDefaultView={isDefaultView}
|
capabilities={scale.capabilities}
|
||||||
|
isCompactMode={scale.mode === "compact"}
|
||||||
|
selectedGroupBy={effectiveConfig.groupBy}
|
||||||
onConfigChange={applyConfigPatch}
|
onConfigChange={applyConfigPatch}
|
||||||
onDeleteView={() => {
|
|
||||||
if (!isDefaultView) {
|
|
||||||
deleteViewMutation.mutate(activeViewId);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
<LauncherRefreshButton
|
<LauncherRefreshButton
|
||||||
onRefresh={refreshData}
|
onRefresh={refreshData}
|
||||||
@@ -483,6 +679,9 @@ export default function ResourceLauncher({
|
|||||||
{isDesktop ? (
|
{isDesktop ? (
|
||||||
<div className="mb-6 flex w-full min-w-0 items-center gap-3">
|
<div className="mb-6 flex w-full min-w-0 items-center gap-3">
|
||||||
{renderToolbarSearch("w-64")}
|
{renderToolbarSearch("w-64")}
|
||||||
|
<div className="flex shrink-0 items-center gap-2">
|
||||||
|
{renderToolbarFilterSort()}
|
||||||
|
</div>
|
||||||
<div className="min-w-0 flex-1 overflow-x-auto">
|
<div className="min-w-0 flex-1 overflow-x-auto">
|
||||||
{renderToolbarViews()}
|
{renderToolbarViews()}
|
||||||
</div>
|
</div>
|
||||||
@@ -495,21 +694,63 @@ export default function ResourceLauncher({
|
|||||||
<div className="flex items-center gap-2 overflow-x-auto">
|
<div className="flex items-center gap-2 overflow-x-auto">
|
||||||
{renderToolbarActions()}
|
{renderToolbarActions()}
|
||||||
</div>
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
{renderToolbarSearch("w-full")}
|
{renderToolbarSearch("w-full")}
|
||||||
|
</div>
|
||||||
|
{renderToolbarFilterSort()}
|
||||||
|
</div>
|
||||||
<div className="overflow-x-auto">
|
<div className="overflow-x-auto">
|
||||||
{renderToolbarViews()}
|
{renderToolbarViews()}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{showSearchFirstGate ? (
|
||||||
|
<LauncherSearchFirstGate layout={config.layout} />
|
||||||
|
) : showGroupList ? (
|
||||||
<LauncherGroupList
|
<LauncherGroupList
|
||||||
orgId={orgId}
|
orgId={orgId}
|
||||||
activeViewId={activeViewId}
|
activeViewId={activeViewId}
|
||||||
config={config}
|
config={effectiveConfig}
|
||||||
initialGroups={groups}
|
initialGroups={groups}
|
||||||
groupsPagination={groupsPagination}
|
groupsPagination={groupsPagination}
|
||||||
onClearFilters={handleClearFilters}
|
onClearFilters={handleClearFilters}
|
||||||
|
onResourceSelect={handleResourceSelect}
|
||||||
/>
|
/>
|
||||||
|
) : showFlatResourceList ? (
|
||||||
|
<LauncherFlatResourceList
|
||||||
|
orgId={orgId}
|
||||||
|
activeViewId={activeViewId}
|
||||||
|
config={effectiveConfig}
|
||||||
|
onClearFilters={handleClearFilters}
|
||||||
|
onResourceSelect={handleResourceSelect}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<LauncherResourcePanel
|
||||||
|
open={panelOpen}
|
||||||
|
onOpenChange={handlePanelOpenChange}
|
||||||
|
resource={selectedResource}
|
||||||
|
orgId={orgId}
|
||||||
|
isAdmin={isAdmin}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{activeSavedView ? (
|
||||||
|
<ConfirmDeleteDialog
|
||||||
|
open={deleteDialogOpen}
|
||||||
|
setOpen={setDeleteDialogOpen}
|
||||||
|
string={activeSavedView.name}
|
||||||
|
title={t("resourceLauncherDeleteViewTitle")}
|
||||||
|
buttonText={t("resourceLauncherDeleteViewConfirm")}
|
||||||
|
dialog={<p>{t("resourceLauncherDeleteViewQuestion")}</p>}
|
||||||
|
onConfirm={async () => {
|
||||||
|
await deleteViewMutation.mutateAsync(
|
||||||
|
activeSavedView.viewId
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
|
||||||
<Credenza open={saveDialogOpen} onOpenChange={setSaveDialogOpen}>
|
<Credenza open={saveDialogOpen} onOpenChange={setSaveDialogOpen}>
|
||||||
<CredenzaContent>
|
<CredenzaContent>
|
||||||
|
|||||||
@@ -0,0 +1,21 @@
|
|||||||
|
import type { SiteResourceData } from "@app/lib/privateResourceForm";
|
||||||
|
import { createContext } from "react";
|
||||||
|
|
||||||
|
export type SiteResourceAccessState = {
|
||||||
|
roleIds: number[];
|
||||||
|
userIds: string[];
|
||||||
|
clientIds: number[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export type SiteResourceContextValue = {
|
||||||
|
siteResource: SiteResourceData;
|
||||||
|
updateSiteResource: (updated: Partial<SiteResourceData>) => void;
|
||||||
|
access: SiteResourceAccessState;
|
||||||
|
setAccess: (access: SiteResourceAccessState) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
const SiteResourceContext = createContext<SiteResourceContextValue | null>(
|
||||||
|
null
|
||||||
|
);
|
||||||
|
|
||||||
|
export default SiteResourceContext;
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
import SiteResourceContext from "@app/contexts/siteResourceContext";
|
||||||
|
import { useContext } from "react";
|
||||||
|
|
||||||
|
export function useSiteResourceContext() {
|
||||||
|
const context = useContext(SiteResourceContext);
|
||||||
|
if (!context) {
|
||||||
|
throw new Error(
|
||||||
|
"useSiteResourceContext must be used within SiteResourceProvider"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return context;
|
||||||
|
}
|
||||||
@@ -0,0 +1,58 @@
|
|||||||
|
import type { SiteResourceData } from "@app/lib/privateResourceForm";
|
||||||
|
import type { ListAllSiteResourcesByOrgResponse } from "@server/routers/siteResource";
|
||||||
|
import type { AxiosResponse } from "axios";
|
||||||
|
import { internal } from "@app/lib/api";
|
||||||
|
import { authCookieHeader } from "@app/lib/api/cookies";
|
||||||
|
|
||||||
|
export async function fetchSiteResourceByNiceId(
|
||||||
|
orgId: string,
|
||||||
|
niceId: string
|
||||||
|
): Promise<SiteResourceData | null> {
|
||||||
|
const res = await internal.get<
|
||||||
|
AxiosResponse<ListAllSiteResourcesByOrgResponse>
|
||||||
|
>(
|
||||||
|
`/org/${orgId}/site-resources?query=${encodeURIComponent(niceId)}&pageSize=50`,
|
||||||
|
await authCookieHeader()
|
||||||
|
);
|
||||||
|
|
||||||
|
const match = res.data.data.siteResources.find((r) => r.niceId === niceId);
|
||||||
|
|
||||||
|
if (!match) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: match.siteResourceId,
|
||||||
|
name: match.name,
|
||||||
|
orgId,
|
||||||
|
sites: match.siteIds.map((siteId, idx) => ({
|
||||||
|
siteId,
|
||||||
|
siteName: match.siteNames[idx],
|
||||||
|
siteNiceId: match.siteNiceIds[idx],
|
||||||
|
online: match.siteOnlines[idx]
|
||||||
|
})),
|
||||||
|
mode: match.mode,
|
||||||
|
scheme: match.scheme,
|
||||||
|
ssl: match.ssl,
|
||||||
|
siteNames: match.siteNames,
|
||||||
|
siteAddresses: match.siteAddresses || null,
|
||||||
|
siteIds: match.siteIds,
|
||||||
|
destination: match.destination,
|
||||||
|
destinationPort: match.destinationPort ?? null,
|
||||||
|
alias: match.alias || null,
|
||||||
|
aliasAddress: match.aliasAddress || null,
|
||||||
|
siteNiceIds: match.siteNiceIds,
|
||||||
|
niceId: match.niceId,
|
||||||
|
tcpPortRangeString: match.tcpPortRangeString || null,
|
||||||
|
udpPortRangeString: match.udpPortRangeString || null,
|
||||||
|
disableIcmp: match.disableIcmp || false,
|
||||||
|
authDaemonMode: match.authDaemonMode ?? null,
|
||||||
|
authDaemonPort: match.authDaemonPort ?? null,
|
||||||
|
pamMode: match.pamMode ?? null,
|
||||||
|
subdomain: match.subdomain ?? null,
|
||||||
|
domainId: match.domainId ?? null,
|
||||||
|
fullDomain: match.fullDomain ?? null,
|
||||||
|
labels: match.labels ?? [],
|
||||||
|
enabled: match.enabled
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -10,7 +10,7 @@ function lastViewKey(orgId: string) {
|
|||||||
function groupOpenKey(
|
function groupOpenKey(
|
||||||
orgId: string,
|
orgId: string,
|
||||||
viewId: LauncherActiveViewId,
|
viewId: LauncherActiveViewId,
|
||||||
groupBy: "site" | "label"
|
groupBy: "site" | "label" | "none"
|
||||||
) {
|
) {
|
||||||
return `${GROUP_OPEN_PREFIX}${orgId}:${viewId}:${groupBy}`;
|
return `${GROUP_OPEN_PREFIX}${orgId}:${viewId}:${groupBy}`;
|
||||||
}
|
}
|
||||||
@@ -64,7 +64,7 @@ export function writeLauncherLastView(
|
|||||||
export function readLauncherGroupOpenState(
|
export function readLauncherGroupOpenState(
|
||||||
orgId: string,
|
orgId: string,
|
||||||
viewId: LauncherActiveViewId,
|
viewId: LauncherActiveViewId,
|
||||||
groupBy: "site" | "label"
|
groupBy: "site" | "label" | "none"
|
||||||
): Record<string, boolean> {
|
): Record<string, boolean> {
|
||||||
return readJson<Record<string, boolean>>(
|
return readJson<Record<string, boolean>>(
|
||||||
groupOpenKey(orgId, viewId, groupBy),
|
groupOpenKey(orgId, viewId, groupBy),
|
||||||
@@ -75,7 +75,7 @@ export function readLauncherGroupOpenState(
|
|||||||
export function readLauncherGroupOpen(
|
export function readLauncherGroupOpen(
|
||||||
orgId: string,
|
orgId: string,
|
||||||
viewId: LauncherActiveViewId,
|
viewId: LauncherActiveViewId,
|
||||||
groupBy: "site" | "label",
|
groupBy: "site" | "label" | "none",
|
||||||
groupKey: string,
|
groupKey: string,
|
||||||
defaultOpen: boolean
|
defaultOpen: boolean
|
||||||
): boolean {
|
): boolean {
|
||||||
@@ -86,7 +86,7 @@ export function readLauncherGroupOpen(
|
|||||||
export function writeLauncherGroupOpen(
|
export function writeLauncherGroupOpen(
|
||||||
orgId: string,
|
orgId: string,
|
||||||
viewId: LauncherActiveViewId,
|
viewId: LauncherActiveViewId,
|
||||||
groupBy: "site" | "label",
|
groupBy: "site" | "label" | "none",
|
||||||
groupKey: string,
|
groupKey: string,
|
||||||
isOpen: boolean
|
isOpen: boolean
|
||||||
) {
|
) {
|
||||||
|
|||||||
@@ -1,5 +1,12 @@
|
|||||||
import type { LauncherResource } from "@server/routers/launcher/types";
|
import type { LauncherResource } from "@server/routers/launcher/types";
|
||||||
|
|
||||||
|
export function getPrivateResourceSettingsHref(
|
||||||
|
orgId: string,
|
||||||
|
niceId: string
|
||||||
|
): string {
|
||||||
|
return `/${orgId}/settings/resources/private/${niceId}/general`;
|
||||||
|
}
|
||||||
|
|
||||||
export function getLauncherResourceAdminHref(
|
export function getLauncherResourceAdminHref(
|
||||||
orgId: string,
|
orgId: string,
|
||||||
resource: LauncherResource
|
resource: LauncherResource
|
||||||
@@ -8,10 +15,5 @@ export function getLauncherResourceAdminHref(
|
|||||||
return `/${orgId}/settings/resources/public/${resource.niceId}/general`;
|
return `/${orgId}/settings/resources/public/${resource.niceId}/general`;
|
||||||
}
|
}
|
||||||
|
|
||||||
const qs = new URLSearchParams({ query: resource.niceId });
|
return getPrivateResourceSettingsHref(orgId, resource.niceId);
|
||||||
if (resource.site?.siteId != null) {
|
|
||||||
qs.set("siteId", String(resource.site.siteId));
|
|
||||||
}
|
|
||||||
|
|
||||||
return `/${orgId}/settings/resources/private?${qs.toString()}`;
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,93 @@
|
|||||||
|
import type { GetResourceResponse } from "@server/routers/resource/getResource";
|
||||||
|
import type { GetResourceAuthInfoResponse } from "@server/routers/resource/getResourceAuthInfo";
|
||||||
|
import type { GetSiteResourceResponse } from "@server/routers/siteResource/getSiteResource";
|
||||||
|
|
||||||
|
export type PublicAuthState = "protected" | "not_protected" | "none";
|
||||||
|
|
||||||
|
const BROWSER_MODES = ["http", "ssh", "rdp", "vnc"];
|
||||||
|
|
||||||
|
export function derivePublicAuthState(
|
||||||
|
mode: string | null,
|
||||||
|
authInfo: Pick<
|
||||||
|
GetResourceAuthInfoResponse,
|
||||||
|
"password" | "pincode" | "sso" | "whitelist" | "headerAuth"
|
||||||
|
>
|
||||||
|
): PublicAuthState {
|
||||||
|
if (!BROWSER_MODES.includes(mode || "")) {
|
||||||
|
return "none";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
authInfo.password ||
|
||||||
|
authInfo.pincode ||
|
||||||
|
authInfo.sso ||
|
||||||
|
authInfo.whitelist ||
|
||||||
|
authInfo.headerAuth
|
||||||
|
) {
|
||||||
|
return "protected";
|
||||||
|
}
|
||||||
|
|
||||||
|
return "not_protected";
|
||||||
|
}
|
||||||
|
|
||||||
|
export function formatPublicResourceType(
|
||||||
|
resource: Pick<GetResourceResponse, "mode" | "ssl">
|
||||||
|
): string {
|
||||||
|
if (resource.mode === "http") {
|
||||||
|
return resource.ssl ? "HTTPS" : "HTTP";
|
||||||
|
}
|
||||||
|
|
||||||
|
const mode = (resource.mode || "").toLowerCase();
|
||||||
|
if (mode === "tcp") {
|
||||||
|
return "TCP";
|
||||||
|
}
|
||||||
|
if (mode === "udp") {
|
||||||
|
return "UDP";
|
||||||
|
}
|
||||||
|
|
||||||
|
return (resource.mode || "—").toUpperCase();
|
||||||
|
}
|
||||||
|
|
||||||
|
export type PortProtocolState = "all" | "blocked" | "custom";
|
||||||
|
|
||||||
|
function getPortProtocolState(
|
||||||
|
value: string | null | undefined
|
||||||
|
): PortProtocolState {
|
||||||
|
if (value === "*") {
|
||||||
|
return "all";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!value || value.trim() === "") {
|
||||||
|
return "blocked";
|
||||||
|
}
|
||||||
|
|
||||||
|
return "custom";
|
||||||
|
}
|
||||||
|
|
||||||
|
export type PortRestrictionDisplay = {
|
||||||
|
hasNonDefaultPorts: boolean;
|
||||||
|
tcp: { state: PortProtocolState; ports: string | null };
|
||||||
|
udp: { state: PortProtocolState; ports: string | null };
|
||||||
|
};
|
||||||
|
|
||||||
|
export function formatPortRestrictionDisplay(
|
||||||
|
resource: Pick<
|
||||||
|
GetSiteResourceResponse,
|
||||||
|
"tcpPortRangeString" | "udpPortRangeString"
|
||||||
|
>
|
||||||
|
): PortRestrictionDisplay {
|
||||||
|
const tcpState = getPortProtocolState(resource.tcpPortRangeString);
|
||||||
|
const udpState = getPortProtocolState(resource.udpPortRangeString);
|
||||||
|
|
||||||
|
return {
|
||||||
|
hasNonDefaultPorts: tcpState !== "all" || udpState !== "all",
|
||||||
|
tcp: {
|
||||||
|
state: tcpState,
|
||||||
|
ports: tcpState === "custom" ? resource.tcpPortRangeString : null
|
||||||
|
},
|
||||||
|
udp: {
|
||||||
|
state: udpState,
|
||||||
|
ports: udpState === "custom" ? resource.udpPortRangeString : null
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -0,0 +1,114 @@
|
|||||||
|
import type {
|
||||||
|
LauncherScaleInfo,
|
||||||
|
LauncherViewConfig
|
||||||
|
} from "@server/routers/launcher/types";
|
||||||
|
|
||||||
|
export function hasActiveLauncherFilters(config: LauncherViewConfig): boolean {
|
||||||
|
return (
|
||||||
|
config.query.trim().length > 0 ||
|
||||||
|
config.siteIds.length > 0 ||
|
||||||
|
config.labelIds.length > 0
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getEffectiveGroupBy(
|
||||||
|
scale: LauncherScaleInfo,
|
||||||
|
config: LauncherViewConfig
|
||||||
|
): LauncherViewConfig["groupBy"] {
|
||||||
|
if (scale.mode !== "compact") {
|
||||||
|
return config.groupBy;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
config.groupBy === "site" &&
|
||||||
|
config.siteIds.length > 0 &&
|
||||||
|
scale.capabilities.allowSiteGrouping
|
||||||
|
) {
|
||||||
|
return "site";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
config.groupBy === "label" &&
|
||||||
|
config.labelIds.length > 0 &&
|
||||||
|
scale.capabilities.allowLabelGrouping
|
||||||
|
) {
|
||||||
|
return "label";
|
||||||
|
}
|
||||||
|
|
||||||
|
return "none";
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getEffectiveLauncherConfig(
|
||||||
|
scale: LauncherScaleInfo,
|
||||||
|
config: LauncherViewConfig
|
||||||
|
): LauncherViewConfig {
|
||||||
|
const groupBy = getEffectiveGroupBy(scale, config);
|
||||||
|
if (groupBy === config.groupBy) {
|
||||||
|
return config;
|
||||||
|
}
|
||||||
|
|
||||||
|
return { ...config, groupBy };
|
||||||
|
}
|
||||||
|
|
||||||
|
export function shouldFetchLauncherGroups(
|
||||||
|
scale: LauncherScaleInfo,
|
||||||
|
config: LauncherViewConfig
|
||||||
|
): boolean {
|
||||||
|
const groupBy = getEffectiveGroupBy(scale, config);
|
||||||
|
|
||||||
|
if (groupBy === "none") {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (scale.mode === "full") {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
(scale.capabilities.allowSiteGrouping &&
|
||||||
|
groupBy === "site" &&
|
||||||
|
config.siteIds.length > 0) ||
|
||||||
|
(scale.capabilities.allowLabelGrouping &&
|
||||||
|
groupBy === "label" &&
|
||||||
|
config.labelIds.length > 0)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function shouldShowLauncherGroupList(
|
||||||
|
scale: LauncherScaleInfo,
|
||||||
|
config: LauncherViewConfig
|
||||||
|
): boolean {
|
||||||
|
return shouldFetchLauncherGroups(scale, config);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function shouldShowSearchFirstGate(
|
||||||
|
scale: LauncherScaleInfo,
|
||||||
|
config: LauncherViewConfig
|
||||||
|
): boolean {
|
||||||
|
return (
|
||||||
|
scale.mode === "compact" &&
|
||||||
|
scale.capabilities.requireSearchOrFilter &&
|
||||||
|
!hasActiveLauncherFilters(config)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function shouldShowFlatResourceList(
|
||||||
|
scale: LauncherScaleInfo,
|
||||||
|
config: LauncherViewConfig
|
||||||
|
): boolean {
|
||||||
|
if (shouldShowSearchFirstGate(scale, config)) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const groupBy = getEffectiveGroupBy(scale, config);
|
||||||
|
|
||||||
|
if (groupBy === "none") {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (scale.mode === "full") {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return !shouldShowLauncherGroupList(scale, config);
|
||||||
|
}
|
||||||
@@ -1,21 +1,27 @@
|
|||||||
import { internal } from "@app/lib/api";
|
import { internal } from "@app/lib/api";
|
||||||
import type { LauncherActiveViewId } from "@app/lib/launcherLocalStorage";
|
import type { LauncherActiveViewId } from "@app/lib/launcherLocalStorage";
|
||||||
|
import { shouldFetchLauncherGroups } from "@app/lib/launcherScale";
|
||||||
import { resolveLauncherStateFromUrl } from "@app/lib/launcherUrlState";
|
import { resolveLauncherStateFromUrl } from "@app/lib/launcherUrlState";
|
||||||
import { buildLauncherSearchParams } from "@app/lib/launcherSearchParams";
|
import { buildLauncherSearchParams } from "@app/lib/launcherSearchParams";
|
||||||
import type {
|
import type {
|
||||||
LauncherGroup,
|
LauncherGroup,
|
||||||
|
LauncherScaleInfo,
|
||||||
|
LauncherDefaultViewOverrides,
|
||||||
LauncherViewConfig,
|
LauncherViewConfig,
|
||||||
LauncherViewRecord,
|
LauncherViewRecord,
|
||||||
ListLauncherGroupsResponse,
|
ListLauncherGroupsResponse,
|
||||||
|
ListLauncherScaleResponse,
|
||||||
ListLauncherViewsResponse
|
ListLauncherViewsResponse
|
||||||
} from "@server/routers/launcher/types";
|
} from "@server/routers/launcher/types";
|
||||||
import { AxiosResponse } from "axios";
|
import { AxiosResponse } from "axios";
|
||||||
|
|
||||||
export type LauncherPageData = {
|
export type LauncherPageData = {
|
||||||
views: LauncherViewRecord[];
|
views: LauncherViewRecord[];
|
||||||
|
defaultViewOverrides: LauncherDefaultViewOverrides;
|
||||||
activeViewId: LauncherActiveViewId;
|
activeViewId: LauncherActiveViewId;
|
||||||
config: LauncherViewConfig;
|
config: LauncherViewConfig;
|
||||||
savedConfig: LauncherViewConfig;
|
savedConfig: LauncherViewConfig;
|
||||||
|
scale: LauncherScaleInfo;
|
||||||
groups: LauncherGroup[];
|
groups: LauncherGroup[];
|
||||||
groupsPagination: {
|
groupsPagination: {
|
||||||
total: number;
|
total: number;
|
||||||
@@ -32,19 +38,56 @@ export async function fetchLauncherPageData(
|
|||||||
>
|
>
|
||||||
): Promise<LauncherPageData> {
|
): Promise<LauncherPageData> {
|
||||||
let views: LauncherViewRecord[] = [];
|
let views: LauncherViewRecord[] = [];
|
||||||
|
let defaultViewOverrides: LauncherDefaultViewOverrides = {
|
||||||
|
personal: null,
|
||||||
|
orgWide: null
|
||||||
|
};
|
||||||
try {
|
try {
|
||||||
const viewsRes = await internal.get<
|
const viewsRes = await internal.get<
|
||||||
AxiosResponse<ListLauncherViewsResponse>
|
AxiosResponse<ListLauncherViewsResponse>
|
||||||
>(`/org/${orgId}/launcher/views`, cookieHeader);
|
>(`/org/${orgId}/launcher/views`, cookieHeader);
|
||||||
views = viewsRes.data.data.views;
|
views = viewsRes.data.data.views;
|
||||||
|
defaultViewOverrides = viewsRes.data.data.defaultViewOverrides;
|
||||||
} catch (e) {}
|
} catch (e) {}
|
||||||
|
|
||||||
const { activeViewId, config, savedConfig } = resolveLauncherStateFromUrl(
|
const { activeViewId, config, savedConfig } = resolveLauncherStateFromUrl(
|
||||||
searchParams,
|
searchParams,
|
||||||
views,
|
views,
|
||||||
null
|
null,
|
||||||
|
defaultViewOverrides
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const scaleFilters = {
|
||||||
|
query: config.query,
|
||||||
|
groupBy: config.groupBy,
|
||||||
|
siteIds: config.siteIds,
|
||||||
|
labelIds: config.labelIds,
|
||||||
|
sort_by: config.sortBy,
|
||||||
|
order: config.order
|
||||||
|
};
|
||||||
|
|
||||||
|
let scale: LauncherScaleInfo = {
|
||||||
|
mode: "full",
|
||||||
|
resourceCount: 0,
|
||||||
|
siteGroupCount: 0,
|
||||||
|
labelGroupCount: 0,
|
||||||
|
capabilities: {
|
||||||
|
allowSiteGrouping: true,
|
||||||
|
allowLabelGrouping: true,
|
||||||
|
requireSearchOrFilter: false
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
const sp = buildLauncherSearchParams(scaleFilters, 1);
|
||||||
|
sp.delete("page");
|
||||||
|
sp.delete("pageSize");
|
||||||
|
const scaleRes = await internal.get<
|
||||||
|
AxiosResponse<ListLauncherScaleResponse>
|
||||||
|
>(`/org/${orgId}/launcher/scale?${sp.toString()}`, cookieHeader);
|
||||||
|
scale = scaleRes.data.data.scale;
|
||||||
|
} catch (e) {}
|
||||||
|
|
||||||
const groupFilters = {
|
const groupFilters = {
|
||||||
query: config.query,
|
query: config.query,
|
||||||
groupBy: config.groupBy,
|
groupBy: config.groupBy,
|
||||||
@@ -62,6 +105,7 @@ export async function fetchLauncherPageData(
|
|||||||
pageSize: 20
|
pageSize: 20
|
||||||
};
|
};
|
||||||
|
|
||||||
|
if (shouldFetchLauncherGroups(scale, config)) {
|
||||||
try {
|
try {
|
||||||
const sp = buildLauncherSearchParams(groupFilters, 1);
|
const sp = buildLauncherSearchParams(groupFilters, 1);
|
||||||
const groupsRes = await internal.get<
|
const groupsRes = await internal.get<
|
||||||
@@ -70,12 +114,15 @@ export async function fetchLauncherPageData(
|
|||||||
groups = groupsRes.data.data.groups;
|
groups = groupsRes.data.data.groups;
|
||||||
groupsPagination = groupsRes.data.data.pagination;
|
groupsPagination = groupsRes.data.data.pagination;
|
||||||
} catch (e) {}
|
} catch (e) {}
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
views,
|
views,
|
||||||
|
defaultViewOverrides,
|
||||||
activeViewId,
|
activeViewId,
|
||||||
config,
|
config,
|
||||||
savedConfig,
|
savedConfig,
|
||||||
|
scale,
|
||||||
groups,
|
groups,
|
||||||
groupsPagination
|
groupsPagination
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,7 +1,9 @@
|
|||||||
import type { LauncherActiveViewId } from "@app/lib/launcherLocalStorage";
|
import type { LauncherActiveViewId } from "@app/lib/launcherLocalStorage";
|
||||||
import {
|
import {
|
||||||
defaultLauncherViewConfig,
|
defaultLauncherViewConfig,
|
||||||
|
getEffectiveDefaultLauncherConfig,
|
||||||
parseIdListParam,
|
parseIdListParam,
|
||||||
|
type LauncherDefaultViewOverrides,
|
||||||
type LauncherViewConfig,
|
type LauncherViewConfig,
|
||||||
type LauncherViewRecord
|
type LauncherViewRecord
|
||||||
} from "@server/routers/launcher/types";
|
} from "@server/routers/launcher/types";
|
||||||
@@ -64,10 +66,13 @@ export function isLauncherConfigEqual(
|
|||||||
|
|
||||||
export function getLauncherUrlBaseConfig(
|
export function getLauncherUrlBaseConfig(
|
||||||
viewId: LauncherActiveViewId,
|
viewId: LauncherActiveViewId,
|
||||||
views: LauncherViewRecord[]
|
views: LauncherViewRecord[],
|
||||||
|
defaultViewOverrides?: LauncherDefaultViewOverrides
|
||||||
): LauncherViewConfig {
|
): LauncherViewConfig {
|
||||||
if (viewId === "default") {
|
if (viewId === "default") {
|
||||||
return defaultLauncherViewConfig;
|
return defaultViewOverrides
|
||||||
|
? getEffectiveDefaultLauncherConfig(defaultViewOverrides)
|
||||||
|
: defaultLauncherViewConfig;
|
||||||
}
|
}
|
||||||
|
|
||||||
const savedView = views.find((view) => view.viewId === viewId);
|
const savedView = views.find((view) => view.viewId === viewId);
|
||||||
@@ -113,7 +118,7 @@ function parseConfigOverrides(
|
|||||||
}
|
}
|
||||||
|
|
||||||
const groupBy = searchParams.get("groupBy");
|
const groupBy = searchParams.get("groupBy");
|
||||||
if (groupBy === "site" || groupBy === "label") {
|
if (groupBy === "site" || groupBy === "label" || groupBy === "none") {
|
||||||
overrides.groupBy = groupBy;
|
overrides.groupBy = groupBy;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -172,7 +177,8 @@ function isValidActiveViewId(
|
|||||||
export function resolveLauncherStateFromUrl(
|
export function resolveLauncherStateFromUrl(
|
||||||
searchParams: URLSearchParams,
|
searchParams: URLSearchParams,
|
||||||
views: LauncherViewRecord[],
|
views: LauncherViewRecord[],
|
||||||
fallbackViewId: LauncherActiveViewId | null
|
fallbackViewId: LauncherActiveViewId | null,
|
||||||
|
defaultViewOverrides?: LauncherDefaultViewOverrides
|
||||||
): ResolvedLauncherState {
|
): ResolvedLauncherState {
|
||||||
const parsed = parseLauncherUrlState(searchParams);
|
const parsed = parseLauncherUrlState(searchParams);
|
||||||
|
|
||||||
@@ -188,18 +194,26 @@ export function resolveLauncherStateFromUrl(
|
|||||||
: "default";
|
: "default";
|
||||||
}
|
}
|
||||||
|
|
||||||
const savedConfig = getLauncherUrlBaseConfig(activeViewId, views);
|
const savedConfig = getLauncherUrlBaseConfig(
|
||||||
|
activeViewId,
|
||||||
|
views,
|
||||||
|
defaultViewOverrides
|
||||||
|
);
|
||||||
|
|
||||||
let config: LauncherViewConfig;
|
let config: LauncherViewConfig;
|
||||||
if (hasLauncherConfigParams(searchParams)) {
|
if (hasLauncherConfigParams(searchParams)) {
|
||||||
config = resolveLauncherConfig(
|
config = resolveLauncherConfig(
|
||||||
defaultLauncherViewConfig,
|
getEffectiveDefaultLauncherConfig(
|
||||||
|
defaultViewOverrides ?? { personal: null, orgWide: null }
|
||||||
|
),
|
||||||
parsed.configOverrides
|
parsed.configOverrides
|
||||||
);
|
);
|
||||||
} else if (activeViewId !== "default") {
|
} else if (activeViewId !== "default") {
|
||||||
config = savedConfig;
|
config = savedConfig;
|
||||||
} else {
|
} else {
|
||||||
config = defaultLauncherViewConfig;
|
config = getEffectiveDefaultLauncherConfig(
|
||||||
|
defaultViewOverrides ?? { personal: null, orgWide: null }
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|||||||
@@ -0,0 +1,656 @@
|
|||||||
|
import { z } from "zod";
|
||||||
|
import type { InternalResourceRow } from "@app/components/PrivateResourcesTable";
|
||||||
|
|
||||||
|
export type PrivateResourceMode = "host" | "cidr" | "http" | "ssh";
|
||||||
|
|
||||||
|
export type SiteResourceData = InternalResourceRow & {
|
||||||
|
enabled: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type PortMode = "all" | "blocked" | "custom";
|
||||||
|
|
||||||
|
const tagSchema = z.object({ id: z.string(), text: z.string() });
|
||||||
|
|
||||||
|
export type PrivateResourceAccessTag = z.infer<typeof tagSchema>;
|
||||||
|
|
||||||
|
export type PrivateResourceClient = {
|
||||||
|
clientId: number;
|
||||||
|
name: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type PrivateResourceFormValues = {
|
||||||
|
name: string;
|
||||||
|
siteIds: number[];
|
||||||
|
mode: PrivateResourceMode;
|
||||||
|
destination: string | null;
|
||||||
|
alias?: string | null;
|
||||||
|
niceId?: string;
|
||||||
|
enabled?: boolean;
|
||||||
|
tcpPortRangeString?: string | null;
|
||||||
|
udpPortRangeString?: string | null;
|
||||||
|
disableIcmp?: boolean;
|
||||||
|
authDaemonMode?: "site" | "remote" | "native" | null;
|
||||||
|
authDaemonPort?: number | null;
|
||||||
|
pamMode?: "passthrough" | "push" | null;
|
||||||
|
destinationPort?: number | null;
|
||||||
|
scheme?: "http" | "https";
|
||||||
|
ssl?: boolean;
|
||||||
|
httpConfigSubdomain?: string | null;
|
||||||
|
httpConfigDomainId?: string | null;
|
||||||
|
httpConfigFullDomain?: string | null;
|
||||||
|
roles?: PrivateResourceAccessTag[];
|
||||||
|
users?: PrivateResourceAccessTag[];
|
||||||
|
clients?: PrivateResourceClient[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export type SiteResourceAccess = {
|
||||||
|
roleIds: number[];
|
||||||
|
userIds: string[];
|
||||||
|
clientIds: number[];
|
||||||
|
};
|
||||||
|
|
||||||
|
type TranslateFn = (key: string) => string;
|
||||||
|
|
||||||
|
export const isValidPortRangeString = (
|
||||||
|
val: string | undefined | null
|
||||||
|
): boolean => {
|
||||||
|
if (!val || val.trim() === "" || val.trim() === "*") return true;
|
||||||
|
const parts = val.split(",").map((p) => p.trim());
|
||||||
|
for (const part of parts) {
|
||||||
|
if (part === "") return false;
|
||||||
|
if (part.includes("-")) {
|
||||||
|
const [start, end] = part.split("-").map((p) => p.trim());
|
||||||
|
if (!start || !end) return false;
|
||||||
|
const startPort = parseInt(start, 10);
|
||||||
|
const endPort = parseInt(end, 10);
|
||||||
|
if (isNaN(startPort) || isNaN(endPort)) return false;
|
||||||
|
if (
|
||||||
|
startPort < 1 ||
|
||||||
|
startPort > 65535 ||
|
||||||
|
endPort < 1 ||
|
||||||
|
endPort > 65535
|
||||||
|
)
|
||||||
|
return false;
|
||||||
|
if (startPort > endPort) return false;
|
||||||
|
} else {
|
||||||
|
const port = parseInt(part, 10);
|
||||||
|
if (isNaN(port) || port < 1 || port > 65535) return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getPortRangeValidationMessage = (t: TranslateFn) =>
|
||||||
|
t("editInternalResourceDialogPortRangeValidationError");
|
||||||
|
|
||||||
|
export const createPortRangeStringSchema = (t: TranslateFn) =>
|
||||||
|
z
|
||||||
|
.string()
|
||||||
|
.optional()
|
||||||
|
.nullable()
|
||||||
|
.refine((val) => isValidPortRangeString(val), {
|
||||||
|
message: getPortRangeValidationMessage(t)
|
||||||
|
});
|
||||||
|
|
||||||
|
export const getPortModeFromString = (
|
||||||
|
val: string | undefined | null
|
||||||
|
): PortMode => {
|
||||||
|
if (val === "*") return "all";
|
||||||
|
if (!val || val.trim() === "") return "blocked";
|
||||||
|
return "custom";
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getPortStringFromMode = (
|
||||||
|
mode: PortMode,
|
||||||
|
customValue: string
|
||||||
|
): string | undefined => {
|
||||||
|
if (mode === "all") return "*";
|
||||||
|
if (mode === "blocked") return "";
|
||||||
|
return customValue;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const isHostname = (destination: string | null): boolean =>
|
||||||
|
!!destination && /[a-zA-Z]/.test(destination);
|
||||||
|
|
||||||
|
export const cleanForFQDN = (name: string): string =>
|
||||||
|
name
|
||||||
|
.toLowerCase()
|
||||||
|
.replace(/[^a-z0-9.-]/g, "-")
|
||||||
|
.replace(/[-]+/g, "-")
|
||||||
|
.replace(/^-|-$/g, "")
|
||||||
|
.replace(/^\.|\.$/g, "");
|
||||||
|
|
||||||
|
export function applyAliasAutoGeneration(
|
||||||
|
values: PrivateResourceFormValues
|
||||||
|
): PrivateResourceFormValues {
|
||||||
|
const data = { ...values };
|
||||||
|
if (
|
||||||
|
(data.mode === "host" ||
|
||||||
|
data.mode === "http" ||
|
||||||
|
(data.mode === "ssh" && data.authDaemonMode !== "native")) &&
|
||||||
|
isHostname(data.destination)
|
||||||
|
) {
|
||||||
|
const currentAlias = data.alias?.trim() || "";
|
||||||
|
if (!currentAlias) {
|
||||||
|
let aliasValue = data.destination!;
|
||||||
|
if (data.destination?.toLowerCase() === "localhost") {
|
||||||
|
aliasValue = `${cleanForFQDN(data.name)}.internal`;
|
||||||
|
}
|
||||||
|
data.alias = aliasValue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function accessTagsToIds(access: {
|
||||||
|
roles?: PrivateResourceAccessTag[];
|
||||||
|
users?: PrivateResourceAccessTag[];
|
||||||
|
clients?: PrivateResourceClient[];
|
||||||
|
}): SiteResourceAccess {
|
||||||
|
return {
|
||||||
|
roleIds: (access.roles ?? []).map((r) => parseInt(r.id)),
|
||||||
|
userIds: (access.users ?? []).map((u) => u.id),
|
||||||
|
clientIds: (access.clients ?? []).map((c) => c.clientId)
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function buildCreateSiteResourcePayload(
|
||||||
|
values: PrivateResourceFormValues
|
||||||
|
) {
|
||||||
|
const data = applyAliasAutoGeneration(values);
|
||||||
|
const isNativeSsh = data.mode === "ssh" && data.authDaemonMode === "native";
|
||||||
|
|
||||||
|
return {
|
||||||
|
name: data.name,
|
||||||
|
siteIds: data.siteIds,
|
||||||
|
mode: data.mode,
|
||||||
|
destination: isNativeSsh ? undefined : (data.destination ?? undefined),
|
||||||
|
enabled: true,
|
||||||
|
...(data.mode === "http" && {
|
||||||
|
scheme: data.scheme,
|
||||||
|
ssl: data.ssl ?? false,
|
||||||
|
destinationPort: data.destinationPort ?? undefined,
|
||||||
|
domainId: data.httpConfigDomainId
|
||||||
|
? data.httpConfigDomainId
|
||||||
|
: undefined,
|
||||||
|
subdomain: data.httpConfigSubdomain
|
||||||
|
? data.httpConfigSubdomain
|
||||||
|
: undefined
|
||||||
|
}),
|
||||||
|
...(data.mode === "host" && {
|
||||||
|
alias:
|
||||||
|
data.alias &&
|
||||||
|
typeof data.alias === "string" &&
|
||||||
|
data.alias.trim()
|
||||||
|
? data.alias
|
||||||
|
: undefined,
|
||||||
|
...(data.authDaemonMode != null && {
|
||||||
|
authDaemonMode: data.authDaemonMode
|
||||||
|
}),
|
||||||
|
...(data.authDaemonMode === "remote" &&
|
||||||
|
data.authDaemonPort != null && {
|
||||||
|
authDaemonPort: data.authDaemonPort
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
...(data.mode === "ssh" && {
|
||||||
|
alias:
|
||||||
|
data.alias &&
|
||||||
|
typeof data.alias === "string" &&
|
||||||
|
data.alias.trim()
|
||||||
|
? data.alias
|
||||||
|
: undefined,
|
||||||
|
...(!isNativeSsh && {
|
||||||
|
destinationPort: data.destinationPort ?? undefined
|
||||||
|
}),
|
||||||
|
pamMode: data.pamMode ?? undefined,
|
||||||
|
...(data.authDaemonMode != null && {
|
||||||
|
authDaemonMode: data.authDaemonMode
|
||||||
|
}),
|
||||||
|
...(data.authDaemonMode === "remote" &&
|
||||||
|
data.authDaemonPort != null && {
|
||||||
|
authDaemonPort: data.authDaemonPort
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
...((data.mode === "host" || data.mode === "cidr") && {
|
||||||
|
tcpPortRangeString: data.tcpPortRangeString,
|
||||||
|
udpPortRangeString: data.udpPortRangeString,
|
||||||
|
disableIcmp: data.disableIcmp ?? false
|
||||||
|
}),
|
||||||
|
roleIds: data.roles ? data.roles.map((r) => parseInt(r.id)) : [],
|
||||||
|
userIds: data.users ? data.users.map((u) => u.id) : [],
|
||||||
|
clientIds: data.clients ? data.clients.map((c) => c.clientId) : []
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function buildUpdateSiteResourcePayload(
|
||||||
|
values: PrivateResourceFormValues,
|
||||||
|
access: SiteResourceAccess
|
||||||
|
) {
|
||||||
|
const data = applyAliasAutoGeneration(values);
|
||||||
|
const isNativeSsh = data.mode === "ssh" && data.authDaemonMode === "native";
|
||||||
|
|
||||||
|
return {
|
||||||
|
name: data.name,
|
||||||
|
siteIds: data.siteIds,
|
||||||
|
mode: data.mode,
|
||||||
|
niceId: data.niceId,
|
||||||
|
enabled: data.enabled,
|
||||||
|
...(isNativeSsh
|
||||||
|
? { destination: null, destinationPort: null }
|
||||||
|
: { destination: data.destination ?? undefined }),
|
||||||
|
...(data.mode === "http" && {
|
||||||
|
scheme: data.scheme,
|
||||||
|
ssl: data.ssl ?? false,
|
||||||
|
destinationPort: data.destinationPort ?? null,
|
||||||
|
domainId: data.httpConfigDomainId
|
||||||
|
? data.httpConfigDomainId
|
||||||
|
: undefined,
|
||||||
|
subdomain: data.httpConfigSubdomain
|
||||||
|
? data.httpConfigSubdomain
|
||||||
|
: undefined
|
||||||
|
}),
|
||||||
|
...(data.mode === "host" && {
|
||||||
|
alias:
|
||||||
|
data.alias &&
|
||||||
|
typeof data.alias === "string" &&
|
||||||
|
data.alias.trim()
|
||||||
|
? data.alias
|
||||||
|
: null,
|
||||||
|
...(data.authDaemonMode != null && {
|
||||||
|
authDaemonMode: data.authDaemonMode
|
||||||
|
}),
|
||||||
|
...(data.authDaemonMode === "remote" && {
|
||||||
|
authDaemonPort: data.authDaemonPort || null
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
...(data.mode === "ssh" && {
|
||||||
|
alias:
|
||||||
|
data.alias &&
|
||||||
|
typeof data.alias === "string" &&
|
||||||
|
data.alias.trim()
|
||||||
|
? data.alias
|
||||||
|
: null,
|
||||||
|
...(!isNativeSsh && {
|
||||||
|
destinationPort: data.destinationPort ?? null
|
||||||
|
}),
|
||||||
|
pamMode: data.pamMode ?? undefined,
|
||||||
|
...(data.authDaemonMode != null && {
|
||||||
|
authDaemonMode: data.authDaemonMode
|
||||||
|
}),
|
||||||
|
...(data.authDaemonMode === "remote" && {
|
||||||
|
authDaemonPort: data.authDaemonPort || null
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
...((data.mode === "host" || data.mode === "cidr") && {
|
||||||
|
tcpPortRangeString: data.tcpPortRangeString,
|
||||||
|
udpPortRangeString: data.udpPortRangeString,
|
||||||
|
disableIcmp: data.disableIcmp ?? false
|
||||||
|
}),
|
||||||
|
roleIds: access.roleIds,
|
||||||
|
userIds: access.userIds,
|
||||||
|
clientIds: access.clientIds
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function inferSshPamMode(
|
||||||
|
authDaemonMode?: string | null,
|
||||||
|
pamMode?: "passthrough" | "push" | null
|
||||||
|
): "passthrough" | "push" {
|
||||||
|
if (pamMode === "passthrough" || pamMode === "push") {
|
||||||
|
return pamMode;
|
||||||
|
}
|
||||||
|
|
||||||
|
return authDaemonMode === "remote" ? "push" : "passthrough";
|
||||||
|
}
|
||||||
|
|
||||||
|
export function siteResourceToFormValues(
|
||||||
|
resource: SiteResourceData
|
||||||
|
): PrivateResourceFormValues {
|
||||||
|
return {
|
||||||
|
name: resource.name,
|
||||||
|
siteIds: resource.siteIds,
|
||||||
|
mode: resource.mode ?? "host",
|
||||||
|
destination: resource.destination ?? "",
|
||||||
|
alias: resource.alias ?? null,
|
||||||
|
destinationPort: resource.destinationPort ?? null,
|
||||||
|
scheme: resource.scheme ?? "http",
|
||||||
|
ssl: resource.ssl ?? false,
|
||||||
|
httpConfigSubdomain: resource.subdomain ?? null,
|
||||||
|
httpConfigDomainId: resource.domainId ?? null,
|
||||||
|
httpConfigFullDomain: resource.fullDomain ?? null,
|
||||||
|
tcpPortRangeString: resource.tcpPortRangeString ?? "*",
|
||||||
|
udpPortRangeString: resource.udpPortRangeString ?? "*",
|
||||||
|
disableIcmp: resource.disableIcmp ?? false,
|
||||||
|
authDaemonMode:
|
||||||
|
resource.authDaemonMode === "native"
|
||||||
|
? "native"
|
||||||
|
: (resource.authDaemonMode ?? "site"),
|
||||||
|
authDaemonPort: resource.authDaemonPort ?? null,
|
||||||
|
pamMode: inferSshPamMode(resource.authDaemonMode, resource.pamMode),
|
||||||
|
niceId: resource.niceId,
|
||||||
|
enabled: resource.enabled
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createGeneralFormSchema(t: TranslateFn) {
|
||||||
|
return z.object({
|
||||||
|
name: z
|
||||||
|
.string()
|
||||||
|
.min(1, t("editInternalResourceDialogNameRequired"))
|
||||||
|
.max(255, t("editInternalResourceDialogNameMaxLength")),
|
||||||
|
niceId: z
|
||||||
|
.string()
|
||||||
|
.min(1)
|
||||||
|
.max(255)
|
||||||
|
.regex(/^[a-zA-Z0-9-]+$/)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createAccessFormSchema() {
|
||||||
|
return z.object({
|
||||||
|
roles: z.array(tagSchema).optional(),
|
||||||
|
users: z.array(tagSchema).optional(),
|
||||||
|
clients: z
|
||||||
|
.array(
|
||||||
|
z.object({
|
||||||
|
clientId: z.number(),
|
||||||
|
name: z.string()
|
||||||
|
})
|
||||||
|
)
|
||||||
|
.optional()
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createCreateFormSchema(t: TranslateFn) {
|
||||||
|
const destinationRequired = t(
|
||||||
|
"createInternalResourceDialogDestinationRequired"
|
||||||
|
);
|
||||||
|
|
||||||
|
return z
|
||||||
|
.object({
|
||||||
|
name: z
|
||||||
|
.string()
|
||||||
|
.min(1, t("createInternalResourceDialogNameRequired"))
|
||||||
|
.max(255, t("createInternalResourceDialogNameMaxLength")),
|
||||||
|
siteIds: z
|
||||||
|
.array(z.number().int().positive())
|
||||||
|
.min(1, t("createInternalResourceDialogPleaseSelectSite")),
|
||||||
|
mode: z.enum(["host", "cidr", "http", "ssh"]),
|
||||||
|
destination: z.string().nullish(),
|
||||||
|
alias: z.string().nullish(),
|
||||||
|
destinationPort: z
|
||||||
|
.number()
|
||||||
|
.int()
|
||||||
|
.min(1)
|
||||||
|
.max(65535)
|
||||||
|
.optional()
|
||||||
|
.nullable(),
|
||||||
|
scheme: z.enum(["http", "https"]).optional(),
|
||||||
|
ssl: z.boolean().optional(),
|
||||||
|
httpConfigSubdomain: z.string().nullish(),
|
||||||
|
httpConfigDomainId: z.string().nullish(),
|
||||||
|
httpConfigFullDomain: z.string().nullish(),
|
||||||
|
authDaemonMode: z
|
||||||
|
.enum(["site", "remote", "native"])
|
||||||
|
.optional()
|
||||||
|
.nullable(),
|
||||||
|
standardDaemonLocation: z
|
||||||
|
.enum(["site", "remote"])
|
||||||
|
.optional()
|
||||||
|
.nullable(),
|
||||||
|
authDaemonPort: z.number().int().positive().optional().nullable(),
|
||||||
|
pamMode: z.enum(["passthrough", "push"]).optional().nullable(),
|
||||||
|
disableIcmp: z.boolean().optional()
|
||||||
|
})
|
||||||
|
.superRefine((data, ctx) => {
|
||||||
|
const isNativeSsh =
|
||||||
|
data.mode === "ssh" && data.authDaemonMode === "native";
|
||||||
|
const trimmedDestination = data.destination?.trim();
|
||||||
|
if (
|
||||||
|
data.mode !== "ssh" &&
|
||||||
|
(!trimmedDestination || trimmedDestination.length < 1)
|
||||||
|
) {
|
||||||
|
ctx.addIssue({
|
||||||
|
code: z.ZodIssueCode.custom,
|
||||||
|
message: destinationRequired,
|
||||||
|
path: ["destination"]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (data.mode === "ssh" && !isNativeSsh) {
|
||||||
|
if (!trimmedDestination || trimmedDestination.length < 1) {
|
||||||
|
ctx.addIssue({
|
||||||
|
code: z.ZodIssueCode.custom,
|
||||||
|
message: destinationRequired,
|
||||||
|
path: ["destination"]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
data.destinationPort == null ||
|
||||||
|
!Number.isFinite(data.destinationPort) ||
|
||||||
|
data.destinationPort < 1
|
||||||
|
) {
|
||||||
|
ctx.addIssue({
|
||||||
|
code: z.ZodIssueCode.custom,
|
||||||
|
message: t("internalResourceHttpPortRequired"),
|
||||||
|
path: ["destinationPort"]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (data.mode === "http") {
|
||||||
|
if (!data.scheme) {
|
||||||
|
ctx.addIssue({
|
||||||
|
code: z.ZodIssueCode.custom,
|
||||||
|
message: t("internalResourceDownstreamSchemeRequired"),
|
||||||
|
path: ["scheme"]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
data.destinationPort == null ||
|
||||||
|
!Number.isFinite(data.destinationPort) ||
|
||||||
|
data.destinationPort < 1
|
||||||
|
) {
|
||||||
|
ctx.addIssue({
|
||||||
|
code: z.ZodIssueCode.custom,
|
||||||
|
message: t("internalResourceHttpPortRequired"),
|
||||||
|
path: ["destinationPort"]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (!data.httpConfigDomainId) {
|
||||||
|
ctx.addIssue({
|
||||||
|
code: z.ZodIssueCode.custom,
|
||||||
|
message: t("domainRequired"),
|
||||||
|
path: ["httpConfigDomainId"]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function destinationRefine(
|
||||||
|
data: {
|
||||||
|
mode: PrivateResourceMode;
|
||||||
|
destination?: string | null;
|
||||||
|
authDaemonMode?: string | null;
|
||||||
|
destinationPort?: number | null;
|
||||||
|
scheme?: string;
|
||||||
|
httpConfigDomainId?: string | null;
|
||||||
|
},
|
||||||
|
ctx: z.RefinementCtx,
|
||||||
|
t: TranslateFn,
|
||||||
|
destinationRequired?: string
|
||||||
|
) {
|
||||||
|
const isNativeSsh = data.mode === "ssh" && data.authDaemonMode === "native";
|
||||||
|
const trimmedDestination = data.destination?.trim();
|
||||||
|
if (
|
||||||
|
!isNativeSsh &&
|
||||||
|
(!trimmedDestination || trimmedDestination.length < 1)
|
||||||
|
) {
|
||||||
|
ctx.addIssue({
|
||||||
|
code: z.ZodIssueCode.custom,
|
||||||
|
message: destinationRequired ?? "Destination is required",
|
||||||
|
path: ["destination"]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (data.mode === "ssh" && !isNativeSsh) {
|
||||||
|
if (
|
||||||
|
data.destinationPort == null ||
|
||||||
|
!Number.isFinite(data.destinationPort) ||
|
||||||
|
data.destinationPort < 1
|
||||||
|
) {
|
||||||
|
ctx.addIssue({
|
||||||
|
code: z.ZodIssueCode.custom,
|
||||||
|
message: t("internalResourceHttpPortRequired"),
|
||||||
|
path: ["destinationPort"]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (data.mode === "http") {
|
||||||
|
if (!data.scheme) {
|
||||||
|
ctx.addIssue({
|
||||||
|
code: z.ZodIssueCode.custom,
|
||||||
|
message: t("internalResourceDownstreamSchemeRequired"),
|
||||||
|
path: ["scheme"]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
data.destinationPort == null ||
|
||||||
|
!Number.isFinite(data.destinationPort) ||
|
||||||
|
data.destinationPort < 1
|
||||||
|
) {
|
||||||
|
ctx.addIssue({
|
||||||
|
code: z.ZodIssueCode.custom,
|
||||||
|
message: t("internalResourceHttpPortRequired"),
|
||||||
|
path: ["destinationPort"]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (!data.httpConfigDomainId) {
|
||||||
|
ctx.addIssue({
|
||||||
|
code: z.ZodIssueCode.custom,
|
||||||
|
message: t("domainRequired"),
|
||||||
|
path: ["httpConfigDomainId"]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createHostFormSchema(t: TranslateFn) {
|
||||||
|
return z
|
||||||
|
.object({
|
||||||
|
siteIds: z.array(z.number().int().positive()).min(1),
|
||||||
|
mode: z.literal("host"),
|
||||||
|
destination: z.string().nullish(),
|
||||||
|
alias: z.string().nullish(),
|
||||||
|
tcpPortRangeString: createPortRangeStringSchema(t),
|
||||||
|
udpPortRangeString: createPortRangeStringSchema(t),
|
||||||
|
disableIcmp: z.boolean().optional(),
|
||||||
|
authDaemonMode: z
|
||||||
|
.enum(["site", "remote", "native"])
|
||||||
|
.optional()
|
||||||
|
.nullable(),
|
||||||
|
authDaemonPort: z.number().int().positive().optional().nullable()
|
||||||
|
})
|
||||||
|
.superRefine((data, ctx) => destinationRefine(data, ctx, t));
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createCidrFormSchema(t: TranslateFn) {
|
||||||
|
return z
|
||||||
|
.object({
|
||||||
|
siteIds: z.array(z.number().int().positive()).min(1),
|
||||||
|
mode: z.literal("cidr"),
|
||||||
|
destination: z.string().nullish(),
|
||||||
|
tcpPortRangeString: createPortRangeStringSchema(t),
|
||||||
|
udpPortRangeString: createPortRangeStringSchema(t),
|
||||||
|
disableIcmp: z.boolean().optional()
|
||||||
|
})
|
||||||
|
.superRefine((data, ctx) => destinationRefine(data, ctx, t));
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createHttpFormSchema(t: TranslateFn) {
|
||||||
|
return z
|
||||||
|
.object({
|
||||||
|
siteIds: z.array(z.number().int().positive()).min(1),
|
||||||
|
mode: z.literal("http"),
|
||||||
|
destination: z.string().nullish(),
|
||||||
|
destinationPort: z
|
||||||
|
.number()
|
||||||
|
.int()
|
||||||
|
.min(1)
|
||||||
|
.max(65535)
|
||||||
|
.optional()
|
||||||
|
.nullable(),
|
||||||
|
scheme: z.enum(["http", "https"]).optional(),
|
||||||
|
ssl: z.boolean().optional(),
|
||||||
|
httpConfigSubdomain: z.string().nullish(),
|
||||||
|
httpConfigDomainId: z.string().nullish(),
|
||||||
|
httpConfigFullDomain: z.string().nullish()
|
||||||
|
})
|
||||||
|
.superRefine((data, ctx) => destinationRefine(data, ctx, t));
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createSshFormSchema(
|
||||||
|
t: TranslateFn,
|
||||||
|
options?: { isNative?: boolean }
|
||||||
|
) {
|
||||||
|
const isNative = options?.isNative ?? false;
|
||||||
|
|
||||||
|
return z
|
||||||
|
.object({
|
||||||
|
siteIds: z.array(z.number().int().positive()).min(1),
|
||||||
|
mode: z.literal("ssh"),
|
||||||
|
destination: z.string().nullish(),
|
||||||
|
alias: z.string().nullish(),
|
||||||
|
destinationPort: z
|
||||||
|
.number()
|
||||||
|
.int()
|
||||||
|
.min(1)
|
||||||
|
.max(65535)
|
||||||
|
.optional()
|
||||||
|
.nullable(),
|
||||||
|
pamMode: z.enum(["passthrough", "push"]),
|
||||||
|
standardDaemonLocation: z.enum(["site", "remote"]),
|
||||||
|
authDaemonPort: z.string()
|
||||||
|
})
|
||||||
|
.superRefine((data, ctx) => {
|
||||||
|
destinationRefine(
|
||||||
|
{
|
||||||
|
...data,
|
||||||
|
authDaemonMode: isNative
|
||||||
|
? "native"
|
||||||
|
: data.standardDaemonLocation
|
||||||
|
},
|
||||||
|
ctx,
|
||||||
|
t
|
||||||
|
);
|
||||||
|
|
||||||
|
const showDaemonPort =
|
||||||
|
!isNative &&
|
||||||
|
data.pamMode === "push" &&
|
||||||
|
data.standardDaemonLocation === "remote";
|
||||||
|
|
||||||
|
if (showDaemonPort) {
|
||||||
|
const port = Number(data.authDaemonPort);
|
||||||
|
if (
|
||||||
|
!data.authDaemonPort.trim() ||
|
||||||
|
!Number.isInteger(port) ||
|
||||||
|
port < 1 ||
|
||||||
|
port > 65535
|
||||||
|
) {
|
||||||
|
ctx.addIssue({
|
||||||
|
code: z.ZodIssueCode.custom,
|
||||||
|
message: t("healthCheckPortInvalid"),
|
||||||
|
path: ["authDaemonPort"]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function mergeFormValuesWithResource(
|
||||||
|
resource: SiteResourceData,
|
||||||
|
partial: Partial<PrivateResourceFormValues>
|
||||||
|
): PrivateResourceFormValues {
|
||||||
|
return {
|
||||||
|
...siteResourceToFormValues(resource),
|
||||||
|
...partial
|
||||||
|
};
|
||||||
|
}
|
||||||
+65
-3
@@ -50,11 +50,16 @@ import type {
|
|||||||
ListLauncherGroupsResponse,
|
ListLauncherGroupsResponse,
|
||||||
ListLauncherLabelsResponse,
|
ListLauncherLabelsResponse,
|
||||||
ListLauncherResourcesResponse,
|
ListLauncherResourcesResponse,
|
||||||
|
ListLauncherScaleResponse,
|
||||||
ListLauncherSitesResponse,
|
ListLauncherSitesResponse,
|
||||||
ListLauncherViewsResponse,
|
ListLauncherViewsResponse,
|
||||||
LauncherListQuery,
|
LauncherListQuery,
|
||||||
|
LauncherResource,
|
||||||
LauncherViewConfig
|
LauncherViewConfig
|
||||||
} from "@server/routers/launcher/types";
|
} from "@server/routers/launcher/types";
|
||||||
|
import type { GetResourceResponse } from "@server/routers/resource/getResource";
|
||||||
|
import type { GetResourceAuthInfoResponse } from "@server/routers/resource/getResourceAuthInfo";
|
||||||
|
import type { GetSiteResourceResponse } from "@server/routers/siteResource/getSiteResource";
|
||||||
import type { LauncherQueryFilters } from "@app/lib/launcherSearchParams";
|
import type { LauncherQueryFilters } from "@app/lib/launcherSearchParams";
|
||||||
import { buildLauncherSearchParams } from "@app/lib/launcherSearchParams";
|
import { buildLauncherSearchParams } from "@app/lib/launcherSearchParams";
|
||||||
|
|
||||||
@@ -1189,13 +1194,13 @@ export const launcherQueries = {
|
|||||||
const res = await meta!.api.get<
|
const res = await meta!.api.get<
|
||||||
AxiosResponse<ListLauncherViewsResponse>
|
AxiosResponse<ListLauncherViewsResponse>
|
||||||
>(`/org/${orgId}/launcher/views`, { signal });
|
>(`/org/${orgId}/launcher/views`, { signal });
|
||||||
return res.data.data.views;
|
return res.data.data;
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
sites: ({
|
sites: ({
|
||||||
orgId,
|
orgId,
|
||||||
query,
|
query,
|
||||||
perPage = 500
|
perPage = 20
|
||||||
}: {
|
}: {
|
||||||
orgId: string;
|
orgId: string;
|
||||||
query?: string;
|
query?: string;
|
||||||
@@ -1227,7 +1232,7 @@ export const launcherQueries = {
|
|||||||
labels: ({
|
labels: ({
|
||||||
orgId,
|
orgId,
|
||||||
query,
|
query,
|
||||||
perPage = 500
|
perPage = 20
|
||||||
}: {
|
}: {
|
||||||
orgId: string;
|
orgId: string;
|
||||||
query?: string;
|
query?: string;
|
||||||
@@ -1298,5 +1303,62 @@ export const launcherQueries = {
|
|||||||
const nextPage = page + 1;
|
const nextPage = page + 1;
|
||||||
return page * pageSize < total ? nextPage : undefined;
|
return page * pageSize < total ? nextPage : undefined;
|
||||||
}
|
}
|
||||||
|
}),
|
||||||
|
scale: (orgId: string, filters: LauncherQueryFilters) =>
|
||||||
|
queryOptions({
|
||||||
|
queryKey: ["ORG", orgId, "LAUNCHER", "SCALE", filters] as const,
|
||||||
|
queryFn: async ({ signal, meta }) => {
|
||||||
|
const sp = buildLauncherSearchParams(filters, 1);
|
||||||
|
sp.delete("page");
|
||||||
|
sp.delete("pageSize");
|
||||||
|
sp.delete("groupKey");
|
||||||
|
const res = await meta!.api.get<
|
||||||
|
AxiosResponse<ListLauncherScaleResponse>
|
||||||
|
>(`/org/${orgId}/launcher/scale?${sp.toString()}`, { signal });
|
||||||
|
return res.data.data.scale;
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
resourceDetail: (orgId: string, resource: LauncherResource | null) =>
|
||||||
|
queryOptions({
|
||||||
|
queryKey: [
|
||||||
|
"ORG",
|
||||||
|
orgId,
|
||||||
|
"LAUNCHER",
|
||||||
|
"RESOURCE_DETAIL",
|
||||||
|
resource?.launcherResourceKey ?? null
|
||||||
|
] as const,
|
||||||
|
enabled: resource != null,
|
||||||
|
queryFn: async ({ signal, meta }) => {
|
||||||
|
if (!resource) {
|
||||||
|
throw new Error("Resource is required");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (resource.resourceType === "public") {
|
||||||
|
const res = await meta!.api.get<
|
||||||
|
AxiosResponse<GetResourceResponse>
|
||||||
|
>(`/org/${orgId}/resource/${resource.niceId}`, { signal });
|
||||||
|
const resourceData = res.data.data;
|
||||||
|
const authRes = await meta!.api.get<
|
||||||
|
AxiosResponse<GetResourceAuthInfoResponse>
|
||||||
|
>(`/resource/${resourceData.resourceGuid}/auth`, {
|
||||||
|
signal
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
resourceType: "public" as const,
|
||||||
|
data: resourceData,
|
||||||
|
authInfo: authRes.data.data
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const siteResourceId =
|
||||||
|
resource.siteResourceId ?? resource.resourceId;
|
||||||
|
const res = await meta!.api.get<
|
||||||
|
AxiosResponse<GetSiteResourceResponse>
|
||||||
|
>(`/org/${orgId}/site-resource/${siteResourceId}`, { signal });
|
||||||
|
return {
|
||||||
|
resourceType: "site" as const,
|
||||||
|
data: res.data.data
|
||||||
|
};
|
||||||
|
}
|
||||||
})
|
})
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -0,0 +1,163 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import SiteResourceContext, {
|
||||||
|
type SiteResourceAccessState
|
||||||
|
} from "@app/contexts/siteResourceContext";
|
||||||
|
import { getUserDisplayName } from "@app/lib/getUserDisplayName";
|
||||||
|
import {
|
||||||
|
accessTagsToIds,
|
||||||
|
type PrivateResourceAccessTag,
|
||||||
|
type PrivateResourceClient,
|
||||||
|
type SiteResourceData
|
||||||
|
} from "@app/lib/privateResourceForm";
|
||||||
|
import { orgQueries, resourceQueries } from "@app/lib/queries";
|
||||||
|
import { UserType } from "@server/types/UserTypes";
|
||||||
|
import { useQuery } from "@tanstack/react-query";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
import { useEffect, useMemo, useState } from "react";
|
||||||
|
|
||||||
|
type SiteResourceProviderProps = {
|
||||||
|
children: React.ReactNode;
|
||||||
|
siteResource: SiteResourceData;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function SiteResourceProvider({
|
||||||
|
children,
|
||||||
|
siteResource: serverSiteResource
|
||||||
|
}: SiteResourceProviderProps) {
|
||||||
|
const t = useTranslations();
|
||||||
|
const [siteResource, setSiteResource] =
|
||||||
|
useState<SiteResourceData>(serverSiteResource);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setSiteResource(serverSiteResource);
|
||||||
|
}, [serverSiteResource]);
|
||||||
|
|
||||||
|
const resourceRolesQuery = useQuery(
|
||||||
|
resourceQueries.siteResourceRoles({
|
||||||
|
siteResourceId: siteResource.id
|
||||||
|
})
|
||||||
|
);
|
||||||
|
const resourceUsersQuery = useQuery(
|
||||||
|
resourceQueries.siteResourceUsers({
|
||||||
|
siteResourceId: siteResource.id
|
||||||
|
})
|
||||||
|
);
|
||||||
|
const resourceClientsQuery = useQuery(
|
||||||
|
resourceQueries.siteResourceClients({
|
||||||
|
siteResourceId: siteResource.id
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
const access = useMemo<SiteResourceAccessState>(() => {
|
||||||
|
const roles = (resourceRolesQuery.data ?? []) as {
|
||||||
|
roleId: number;
|
||||||
|
name: string;
|
||||||
|
}[];
|
||||||
|
const users = (resourceUsersQuery.data ?? []) as {
|
||||||
|
userId: string;
|
||||||
|
}[];
|
||||||
|
const clients = (resourceClientsQuery.data ?? []) as {
|
||||||
|
clientId: number;
|
||||||
|
}[];
|
||||||
|
|
||||||
|
return {
|
||||||
|
roleIds: roles
|
||||||
|
.filter((r) => r.name !== "Admin")
|
||||||
|
.map((r) => r.roleId),
|
||||||
|
userIds: users.map((u) => u.userId),
|
||||||
|
clientIds: clients.map((c) => c.clientId)
|
||||||
|
};
|
||||||
|
}, [
|
||||||
|
resourceRolesQuery.data,
|
||||||
|
resourceUsersQuery.data,
|
||||||
|
resourceClientsQuery.data
|
||||||
|
]);
|
||||||
|
|
||||||
|
const [accessOverride, setAccessOverride] =
|
||||||
|
useState<SiteResourceAccessState | null>(null);
|
||||||
|
|
||||||
|
const resolvedAccess = accessOverride ?? access;
|
||||||
|
|
||||||
|
const updateSiteResource = (updated: Partial<SiteResourceData>) => {
|
||||||
|
if (!siteResource) {
|
||||||
|
throw new Error(t("resourceErrorNoUpdate"));
|
||||||
|
}
|
||||||
|
setSiteResource((prev) => ({ ...prev, ...updated }));
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SiteResourceContext.Provider
|
||||||
|
value={{
|
||||||
|
siteResource,
|
||||||
|
updateSiteResource,
|
||||||
|
access: resolvedAccess,
|
||||||
|
setAccess: setAccessOverride
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</SiteResourceContext.Provider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useAccessFormDefaults(orgId: string, siteResourceId: number) {
|
||||||
|
const resourceRolesQuery = useQuery(
|
||||||
|
resourceQueries.siteResourceRoles({ siteResourceId })
|
||||||
|
);
|
||||||
|
const resourceUsersQuery = useQuery(
|
||||||
|
resourceQueries.siteResourceUsers({ siteResourceId })
|
||||||
|
);
|
||||||
|
const resourceClientsQuery = useQuery(
|
||||||
|
resourceQueries.siteResourceClients({ siteResourceId })
|
||||||
|
);
|
||||||
|
const clientsQuery = useQuery(
|
||||||
|
orgQueries.machineClients({
|
||||||
|
orgId,
|
||||||
|
perPage: 1
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
const loading =
|
||||||
|
resourceRolesQuery.isLoading ||
|
||||||
|
resourceUsersQuery.isLoading ||
|
||||||
|
resourceClientsQuery.isLoading;
|
||||||
|
|
||||||
|
const roles: PrivateResourceAccessTag[] = (
|
||||||
|
(resourceRolesQuery.data ?? []) as { roleId: number; name: string }[]
|
||||||
|
)
|
||||||
|
.map((i) => ({ id: i.roleId.toString(), text: i.name }))
|
||||||
|
.filter((r) => r.text !== "Admin");
|
||||||
|
|
||||||
|
const users: PrivateResourceAccessTag[] = (
|
||||||
|
(resourceUsersQuery.data ?? []) as {
|
||||||
|
userId: string;
|
||||||
|
email?: string;
|
||||||
|
username?: string;
|
||||||
|
type?: string;
|
||||||
|
idpName?: string;
|
||||||
|
}[]
|
||||||
|
).map((i) => ({
|
||||||
|
id: i.userId.toString(),
|
||||||
|
text: `${getUserDisplayName({ email: i.email, username: i.username })}${i.type !== UserType.Internal ? ` (${i.idpName})` : ""}`
|
||||||
|
}));
|
||||||
|
|
||||||
|
const clients: PrivateResourceClient[] = [
|
||||||
|
...((resourceClientsQuery.data ?? []) as {
|
||||||
|
clientId: number;
|
||||||
|
name: string;
|
||||||
|
}[])
|
||||||
|
];
|
||||||
|
|
||||||
|
const allClients = (clientsQuery.data ?? []).filter((c) => !c.userId);
|
||||||
|
|
||||||
|
return {
|
||||||
|
loading,
|
||||||
|
roles,
|
||||||
|
users,
|
||||||
|
clients,
|
||||||
|
hasMachineClients: allClients.length > 0,
|
||||||
|
accessIds: accessTagsToIds({ roles, users, clients })
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SiteResourceProvider;
|
||||||
Reference in New Issue
Block a user