mirror of
https://github.com/fosrl/pangolin.git
synced 2026-06-15 20:07:35 +00:00
Merge branch 'dev' into refactor/loading-animation-on-request-logs
This commit is contained in:
Fred KISSIE
@@ -175,26 +175,6 @@ export default function GeneralPage() {
|
||||
}, [variant]);
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchRoles() {
|
||||
const res = await api
|
||||
.get<AxiosResponse<ListRolesResponse>>(`/org/${orgId}/roles`)
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
toast({
|
||||
variant: "destructive",
|
||||
title: t("accessRoleErrorFetch"),
|
||||
description: formatAxiosError(
|
||||
e,
|
||||
t("accessRoleErrorFetchDescription")
|
||||
)
|
||||
});
|
||||
});
|
||||
|
||||
if (res?.status === 200) {
|
||||
setRoles(res.data.data.roles);
|
||||
}
|
||||
}
|
||||
|
||||
const loadIdp = async (
|
||||
availableRoles: { roleId: number; name: string }[]
|
||||
) => {
|
||||
@@ -520,6 +500,7 @@ export default function GeneralPage() {
|
||||
onAutoProvisionChange={(checked) => {
|
||||
form.setValue("autoProvision", checked);
|
||||
}}
|
||||
orgId={orgId as string}
|
||||
roleMappingMode={roleMappingMode}
|
||||
onRoleMappingModeChange={(data) => {
|
||||
setRoleMappingMode(data);
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,44 +1,42 @@
|
||||
"use client";
|
||||
|
||||
import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
|
||||
import IdpTypeBadge from "@app/components/IdpTypeBadge";
|
||||
import OrgRolesTagField from "@app/components/OrgRolesTagField";
|
||||
import {
|
||||
SettingsContainer,
|
||||
SettingsSection,
|
||||
SettingsSectionBody,
|
||||
SettingsSectionDescription,
|
||||
SettingsSectionFooter,
|
||||
SettingsSectionForm,
|
||||
SettingsSectionHeader,
|
||||
SettingsSectionTitle
|
||||
} from "@app/components/Settings";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import { Checkbox } from "@app/components/ui/checkbox";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage
|
||||
FormLabel
|
||||
} from "@app/components/ui/form";
|
||||
import { Checkbox } from "@app/components/ui/checkbox";
|
||||
import OrgRolesTagField from "@app/components/OrgRolesTagField";
|
||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||
import { userOrgUserContext } from "@app/hooks/useOrgUserContext";
|
||||
import { usePaidStatus } from "@app/hooks/usePaidStatus";
|
||||
import { toast } from "@app/hooks/useToast";
|
||||
import { useUserContext } from "@app/hooks/useUserContext";
|
||||
import { createApiClient, formatAxiosError } from "@app/lib/api";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { AxiosResponse } from "axios";
|
||||
import { build } from "@server/build";
|
||||
import { tierMatrix } from "@server/lib/billing/tierMatrix";
|
||||
import { UserType } from "@server/types/UserTypes";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useParams } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
import { ListRolesResponse } from "@server/routers/role";
|
||||
import { userOrgUserContext } from "@app/hooks/useOrgUserContext";
|
||||
import { useParams } from "next/navigation";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import {
|
||||
SettingsContainer,
|
||||
SettingsSection,
|
||||
SettingsSectionHeader,
|
||||
SettingsSectionTitle,
|
||||
SettingsSectionDescription,
|
||||
SettingsSectionBody,
|
||||
SettingsSectionForm,
|
||||
SettingsSectionFooter
|
||||
} from "@app/components/Settings";
|
||||
import { formatAxiosError } from "@app/lib/api";
|
||||
import { createApiClient } from "@app/lib/api";
|
||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||
import { useTranslations } from "next-intl";
|
||||
import IdpTypeBadge from "@app/components/IdpTypeBadge";
|
||||
import { UserType } from "@server/types/UserTypes";
|
||||
import { usePaidStatus } from "@app/hooks/usePaidStatus";
|
||||
import { tierMatrix } from "@server/lib/billing/tierMatrix";
|
||||
import { build } from "@server/build";
|
||||
|
||||
const accessControlsFormSchema = z.object({
|
||||
username: z.string(),
|
||||
@@ -46,25 +44,21 @@ const accessControlsFormSchema = z.object({
|
||||
roles: z.array(
|
||||
z.object({
|
||||
id: z.string(),
|
||||
text: z.string()
|
||||
text: z.string(),
|
||||
isAdmin: z.boolean().optional()
|
||||
})
|
||||
)
|
||||
});
|
||||
|
||||
export default function AccessControlsPage() {
|
||||
const { orgUser: user, updateOrgUser } = userOrgUserContext();
|
||||
const { user: sessionUser } = useUserContext();
|
||||
const { env } = useEnvContext();
|
||||
|
||||
const api = createApiClient({ env });
|
||||
|
||||
const { orgId } = useParams();
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [roles, setRoles] = useState<{ roleId: number; name: string }[]>([]);
|
||||
const [activeRoleTagIndex, setActiveRoleTagIndex] = useState<number | null>(
|
||||
null
|
||||
);
|
||||
|
||||
const t = useTranslations();
|
||||
const { isPaidUser } = usePaidStatus();
|
||||
const isPaid = isPaidUser(tierMatrix.fullRbac);
|
||||
@@ -82,7 +76,8 @@ export default function AccessControlsPage() {
|
||||
autoProvisioned: user.autoProvisioned || false,
|
||||
roles: (user.roles ?? []).map((r) => ({
|
||||
id: r.roleId.toString(),
|
||||
text: r.name
|
||||
text: r.name,
|
||||
isAdmin: r.isAdmin === true
|
||||
}))
|
||||
}
|
||||
});
|
||||
@@ -94,47 +89,25 @@ export default function AccessControlsPage() {
|
||||
"roles",
|
||||
(user.roles ?? []).map((r) => ({
|
||||
id: r.roleId.toString(),
|
||||
text: r.name
|
||||
text: r.name,
|
||||
isAdmin: r.isAdmin === true
|
||||
}))
|
||||
);
|
||||
}, [user.userId, currentRoleIds.join(",")]);
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchRoles() {
|
||||
const res = await api
|
||||
.get<AxiosResponse<ListRolesResponse>>(`/org/${orgId}/roles`)
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
toast({
|
||||
variant: "destructive",
|
||||
title: t("accessRoleErrorFetch"),
|
||||
description: formatAxiosError(
|
||||
e,
|
||||
t("accessRoleErrorFetchDescription")
|
||||
)
|
||||
});
|
||||
});
|
||||
|
||||
if (res?.status === 200) {
|
||||
setRoles(res.data.data.roles);
|
||||
}
|
||||
}
|
||||
|
||||
fetchRoles();
|
||||
form.setValue("autoProvisioned", user.autoProvisioned || false);
|
||||
}, []);
|
||||
|
||||
const allRoleOptions = roles.map((role) => ({
|
||||
id: role.roleId.toString(),
|
||||
text: role.name
|
||||
}));
|
||||
}, [user.userId, user.autoProvisioned, currentRoleIds.join(",")]);
|
||||
|
||||
const paywallMessage =
|
||||
build === "saas"
|
||||
? t("singleRolePerUserPlanNotice")
|
||||
: t("singleRolePerUserEditionNotice");
|
||||
|
||||
async function onSubmit(values: z.infer<typeof accessControlsFormSchema>) {
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [confirmRemoveOwnAdminOpen, setConfirmRemoveOwnAdminOpen] =
|
||||
useState(false);
|
||||
|
||||
async function executeSave() {
|
||||
const values = form.getValues();
|
||||
|
||||
if (values.roles.length === 0) {
|
||||
toast({
|
||||
variant: "destructive",
|
||||
@@ -144,7 +117,7 @@ export default function AccessControlsPage() {
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
setIsSaving(true);
|
||||
try {
|
||||
const roleIds = values.roles.map((r) => parseInt(r.id, 10));
|
||||
const updateRoleRequest = supportsMultipleRolesPerUser
|
||||
@@ -164,7 +137,8 @@ export default function AccessControlsPage() {
|
||||
roleIds,
|
||||
roles: values.roles.map((r) => ({
|
||||
roleId: parseInt(r.id, 10),
|
||||
name: r.text
|
||||
name: r.text,
|
||||
isAdmin: r.isAdmin === true
|
||||
})),
|
||||
autoProvisioned: values.autoProvisioned
|
||||
});
|
||||
@@ -183,12 +157,61 @@ export default function AccessControlsPage() {
|
||||
t("accessRoleErrorAddDescription")
|
||||
)
|
||||
});
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
async function handleAccessControlsSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
|
||||
const isValid = await form.trigger();
|
||||
if (!isValid) return;
|
||||
|
||||
const values = form.getValues();
|
||||
|
||||
if (values.roles.length === 0) {
|
||||
toast({
|
||||
variant: "destructive",
|
||||
title: t("accessRoleErrorAdd"),
|
||||
description: t("accessRoleSelectPlease")
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const willHaveAdminRole = values.roles.some(
|
||||
(r) => r.isAdmin === true
|
||||
);
|
||||
|
||||
const isRemovingOwnAdmin =
|
||||
sessionUser.userId === user.userId &&
|
||||
user.isAdmin &&
|
||||
!willHaveAdminRole;
|
||||
|
||||
if (isRemovingOwnAdmin) {
|
||||
setConfirmRemoveOwnAdminOpen(true);
|
||||
return;
|
||||
}
|
||||
|
||||
await executeSave();
|
||||
}
|
||||
|
||||
return (
|
||||
<SettingsContainer>
|
||||
<ConfirmDeleteDialog
|
||||
open={confirmRemoveOwnAdminOpen}
|
||||
setOpen={setConfirmRemoveOwnAdminOpen}
|
||||
title={t("removeOwnAdminRoleConfirmTitle")}
|
||||
dialog={
|
||||
<div className="space-y-2">
|
||||
<p>{t("removeOwnAdminRoleConfirmDescription")}</p>
|
||||
</div>
|
||||
}
|
||||
buttonText={t("removeOwnAdminRoleConfirmButton")}
|
||||
string={t("removeOwnAdminRoleConfirmPhrase")}
|
||||
onConfirm={executeSave}
|
||||
/>
|
||||
|
||||
<SettingsSection>
|
||||
<SettingsSectionHeader>
|
||||
<SettingsSectionTitle>
|
||||
@@ -203,7 +226,7 @@ export default function AccessControlsPage() {
|
||||
<SettingsSectionForm>
|
||||
<Form {...form}>
|
||||
<form
|
||||
onSubmit={form.handleSubmit(onSubmit)}
|
||||
onSubmit={(e) => void handleAccessControlsSubmit(e)}
|
||||
className="space-y-4"
|
||||
id="access-controls-form"
|
||||
>
|
||||
@@ -226,9 +249,7 @@ export default function AccessControlsPage() {
|
||||
<OrgRolesTagField
|
||||
form={form}
|
||||
name="roles"
|
||||
label={t("roles")}
|
||||
placeholder={t("accessRoleSelect2")}
|
||||
allRoleOptions={allRoleOptions}
|
||||
orgId={orgId as string}
|
||||
supportsMultipleRolesPerUser={
|
||||
supportsMultipleRolesPerUser
|
||||
}
|
||||
@@ -236,9 +257,6 @@ export default function AccessControlsPage() {
|
||||
showMultiRolePaywallMessage
|
||||
}
|
||||
paywallMessage={paywallMessage}
|
||||
loading={loading}
|
||||
activeTagIndex={activeRoleTagIndex}
|
||||
setActiveTagIndex={setActiveRoleTagIndex}
|
||||
/>
|
||||
|
||||
{user.idpAutoProvision && (
|
||||
@@ -277,8 +295,8 @@ export default function AccessControlsPage() {
|
||||
<SettingsSectionFooter>
|
||||
<Button
|
||||
type="submit"
|
||||
loading={loading}
|
||||
disabled={loading}
|
||||
loading={isSaving}
|
||||
disabled={isSaving}
|
||||
form="access-controls-form"
|
||||
>
|
||||
{t("accessControlsSubmit")}
|
||||
|
||||
@@ -13,7 +13,7 @@ import { StrategyOption, StrategySelect } from "@app/components/StrategySelect";
|
||||
import HeaderTitle from "@app/components/SettingsSectionTitle";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import { useActionState, useState } from "react";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
@@ -91,7 +91,7 @@ export default function Page() {
|
||||
"internal"
|
||||
);
|
||||
const [inviteLink, setInviteLink] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const [expiresInDays, setExpiresInDays] = useState(1);
|
||||
const [roles, setRoles] = useState<{ roleId: number; name: string }[]>([]);
|
||||
const [idps, setIdps] = useState<IdpOption[]>([]);
|
||||
@@ -311,10 +311,29 @@ export default function Page() {
|
||||
setUserOptions(options);
|
||||
}, [idps, t]);
|
||||
|
||||
async function onSubmitInternal(
|
||||
values: z.infer<typeof internalFormSchema>
|
||||
) {
|
||||
setLoading(true);
|
||||
const [, submitInternalAction, isSubmittingInternal] = useActionState(
|
||||
onSubmitInternal,
|
||||
null
|
||||
);
|
||||
const [, submitGoogleAzureAction, isSubmittingGoogleAzure] = useActionState(
|
||||
onSubmitGoogleAzure,
|
||||
null
|
||||
);
|
||||
const [, submitGenericOidcAction, isSubmittingGenericOidc] = useActionState(
|
||||
onSubmitGenericOidc,
|
||||
null
|
||||
);
|
||||
|
||||
const loading =
|
||||
isSubmittingInternal ||
|
||||
isSubmittingGoogleAzure ||
|
||||
isSubmittingGenericOidc;
|
||||
|
||||
async function onSubmitInternal() {
|
||||
const isValid = await internalForm.trigger();
|
||||
if (!isValid) return;
|
||||
|
||||
const values = internalForm.getValues();
|
||||
|
||||
const roleIds = values.roles.map((r) => parseInt(r.id, 10));
|
||||
|
||||
@@ -357,25 +376,24 @@ export default function Page() {
|
||||
|
||||
setExpiresInDays(parseInt(values.validForHours) / 24);
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
async function onSubmitGoogleAzure(
|
||||
values: z.infer<typeof googleAzureFormSchema>
|
||||
) {
|
||||
async function onSubmitGoogleAzure() {
|
||||
const isValid = await googleAzureForm.trigger();
|
||||
if (!isValid) return;
|
||||
|
||||
const values = googleAzureForm.getValues();
|
||||
|
||||
const selectedUserOption = userOptions.find(
|
||||
(opt) => opt.id === selectedOption
|
||||
);
|
||||
if (!selectedUserOption?.idpId) return;
|
||||
|
||||
setLoading(true);
|
||||
|
||||
const roleIds = values.roles.map((r) => parseInt(r.id, 10));
|
||||
|
||||
const res = await api
|
||||
.put(`/org/${orgId}/user`, {
|
||||
username: values.email, // Use email as username for Google/Azure
|
||||
username: values.email,
|
||||
email: values.email || undefined,
|
||||
name: values.name,
|
||||
type: "oidc",
|
||||
@@ -401,20 +419,19 @@ export default function Page() {
|
||||
});
|
||||
router.push(`/${orgId}/settings/access/users`);
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
async function onSubmitGenericOidc(
|
||||
values: z.infer<typeof genericOidcFormSchema>
|
||||
) {
|
||||
async function onSubmitGenericOidc() {
|
||||
const isValid = await genericOidcForm.trigger();
|
||||
if (!isValid) return;
|
||||
|
||||
const values = genericOidcForm.getValues();
|
||||
|
||||
const selectedUserOption = userOptions.find(
|
||||
(opt) => opt.id === selectedOption
|
||||
);
|
||||
if (!selectedUserOption?.idpId) return;
|
||||
|
||||
setLoading(true);
|
||||
|
||||
const roleIds = values.roles.map((r) => parseInt(r.id, 10));
|
||||
|
||||
const res = await api
|
||||
@@ -445,8 +462,6 @@ export default function Page() {
|
||||
});
|
||||
router.push(`/${orgId}/settings/access/users`);
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -513,9 +528,9 @@ export default function Page() {
|
||||
<SettingsSectionForm>
|
||||
<Form {...internalForm}>
|
||||
<form
|
||||
onSubmit={internalForm.handleSubmit(
|
||||
onSubmitInternal
|
||||
)}
|
||||
action={
|
||||
submitInternalAction
|
||||
}
|
||||
className="space-y-4"
|
||||
id="create-user-form"
|
||||
>
|
||||
@@ -595,13 +610,7 @@ export default function Page() {
|
||||
<OrgRolesTagField
|
||||
form={internalForm}
|
||||
name="roles"
|
||||
label={t("roles")}
|
||||
placeholder={t(
|
||||
"accessRoleSelect2"
|
||||
)}
|
||||
allRoleOptions={
|
||||
allRoleOptions
|
||||
}
|
||||
orgId={orgId as string}
|
||||
supportsMultipleRolesPerUser={
|
||||
supportsMultipleRolesPerUser
|
||||
}
|
||||
@@ -611,13 +620,6 @@ export default function Page() {
|
||||
paywallMessage={
|
||||
invitePaywallMessage
|
||||
}
|
||||
loading={loading}
|
||||
activeTagIndex={
|
||||
activeInviteRoleTagIndex
|
||||
}
|
||||
setActiveTagIndex={
|
||||
setActiveInviteRoleTagIndex
|
||||
}
|
||||
/>
|
||||
|
||||
{env.email.emailEnabled && (
|
||||
@@ -712,9 +714,9 @@ export default function Page() {
|
||||
})() && (
|
||||
<Form {...googleAzureForm}>
|
||||
<form
|
||||
onSubmit={googleAzureForm.handleSubmit(
|
||||
onSubmitGoogleAzure
|
||||
)}
|
||||
action={
|
||||
submitGoogleAzureAction
|
||||
}
|
||||
className="space-y-4"
|
||||
id="create-user-form"
|
||||
>
|
||||
@@ -763,13 +765,7 @@ export default function Page() {
|
||||
<OrgRolesTagField
|
||||
form={googleAzureForm}
|
||||
name="roles"
|
||||
label={t("roles")}
|
||||
placeholder={t(
|
||||
"accessRoleSelect2"
|
||||
)}
|
||||
allRoleOptions={
|
||||
allRoleOptions
|
||||
}
|
||||
orgId={orgId as string}
|
||||
supportsMultipleRolesPerUser={
|
||||
supportsMultipleRolesPerUser
|
||||
}
|
||||
@@ -779,13 +775,6 @@ export default function Page() {
|
||||
paywallMessage={
|
||||
invitePaywallMessage
|
||||
}
|
||||
loading={loading}
|
||||
activeTagIndex={
|
||||
activeOidcRoleTagIndex
|
||||
}
|
||||
setActiveTagIndex={
|
||||
setActiveOidcRoleTagIndex
|
||||
}
|
||||
/>
|
||||
</form>
|
||||
</Form>
|
||||
@@ -808,9 +797,9 @@ export default function Page() {
|
||||
})() && (
|
||||
<Form {...genericOidcForm}>
|
||||
<form
|
||||
onSubmit={genericOidcForm.handleSubmit(
|
||||
onSubmitGenericOidc
|
||||
)}
|
||||
action={
|
||||
submitGenericOidcAction
|
||||
}
|
||||
className="space-y-4"
|
||||
id="create-user-form"
|
||||
>
|
||||
@@ -888,13 +877,7 @@ export default function Page() {
|
||||
<OrgRolesTagField
|
||||
form={genericOidcForm}
|
||||
name="roles"
|
||||
label={t("roles")}
|
||||
placeholder={t(
|
||||
"accessRoleSelect2"
|
||||
)}
|
||||
allRoleOptions={
|
||||
allRoleOptions
|
||||
}
|
||||
orgId={orgId as string}
|
||||
supportsMultipleRolesPerUser={
|
||||
supportsMultipleRolesPerUser
|
||||
}
|
||||
@@ -904,13 +887,6 @@ export default function Page() {
|
||||
paywallMessage={
|
||||
invitePaywallMessage
|
||||
}
|
||||
loading={loading}
|
||||
activeTagIndex={
|
||||
activeOidcRoleTagIndex
|
||||
}
|
||||
setActiveTagIndex={
|
||||
setActiveOidcRoleTagIndex
|
||||
}
|
||||
/>
|
||||
</form>
|
||||
</Form>
|
||||
|
||||
@@ -3,10 +3,12 @@
|
||||
import AlertRuleGraphEditor from "@app/components/alert-rule-editor/AlertRuleGraphEditor";
|
||||
import HeaderTitle from "@app/components/SettingsSectionTitle";
|
||||
import { defaultFormValues } from "@app/lib/alertRuleForm";
|
||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||
import { usePaidStatus } from "@app/hooks/usePaidStatus";
|
||||
import { tierMatrix } from "@server/lib/billing/tierMatrix";
|
||||
import { useParams } from "next/navigation";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useEffect } from "react";
|
||||
|
||||
export default function NewAlertRulePage() {
|
||||
const params = useParams();
|
||||
@@ -14,6 +16,19 @@ export default function NewAlertRulePage() {
|
||||
const t = useTranslations();
|
||||
const { isPaidUser } = usePaidStatus();
|
||||
const isPaid = isPaidUser(tierMatrix.alertingRules);
|
||||
const { env } = useEnvContext();
|
||||
const router = useRouter();
|
||||
const disableEnterpriseFeatures = env.flags.disableEnterpriseFeatures;
|
||||
|
||||
useEffect(() => {
|
||||
if (disableEnterpriseFeatures) {
|
||||
router.replace(`/${orgId}/settings/alerting/rules`);
|
||||
}
|
||||
}, [disableEnterpriseFeatures, orgId, router]);
|
||||
|
||||
if (disableEnterpriseFeatures) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
@@ -645,6 +645,12 @@ export default function ConnectionLogsPage() {
|
||||
</span>
|
||||
)}
|
||||
</div>*/}
|
||||
<div>
|
||||
<strong>Client Endpoint:</strong>{" "}
|
||||
<span className="font-mono">
|
||||
{row.clientEndpoint ?? "-"}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<strong>Site:</strong> {row.siteName ?? "-"}
|
||||
{row.siteNiceId && (
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import { createApiClient, formatAxiosError } from "@app/lib/api";
|
||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||
@@ -22,7 +22,18 @@ import {
|
||||
} from "@app/components/Credenza";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import { Switch } from "@app/components/ui/switch";
|
||||
import { Globe, MoreHorizontal, Plus } from "lucide-react";
|
||||
import {
|
||||
Globe,
|
||||
MoreHorizontal,
|
||||
Plus,
|
||||
AlertCircle,
|
||||
ChevronDown
|
||||
} from "lucide-react";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger
|
||||
} from "@app/components/ui/popover";
|
||||
import { AxiosResponse } from "axios";
|
||||
import { build } from "@server/build";
|
||||
import Image from "next/image";
|
||||
@@ -38,7 +49,10 @@ import {
|
||||
HttpDestinationCredenza,
|
||||
parseHttpConfig
|
||||
} from "@app/components/HttpDestinationCredenza";
|
||||
import { S3DestinationCredenza } from "@app/components/S3DestinationCredenza";
|
||||
import {
|
||||
S3DestinationCredenza,
|
||||
parseS3Config
|
||||
} from "@app/components/S3DestinationCredenza";
|
||||
import { DatadogDestinationCredenza } from "@app/components/DatadogDestinationCredenza";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
@@ -64,6 +78,42 @@ interface DestinationCardProps {
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
function getDestinationDisplay(destination: Destination): {
|
||||
name: string;
|
||||
typeLabel: string;
|
||||
detail: string;
|
||||
icon: React.ReactNode;
|
||||
} {
|
||||
if (destination.type === "s3") {
|
||||
const cfg = parseS3Config(destination.config);
|
||||
const detail = cfg.bucket
|
||||
? `s3://${cfg.bucket}${cfg.prefix ? `/${cfg.prefix.replace(/^\/+/, "")}` : ""}`
|
||||
: "";
|
||||
return {
|
||||
name: cfg.name,
|
||||
typeLabel: "Amazon S3",
|
||||
detail,
|
||||
icon: (
|
||||
<Image
|
||||
src="/third-party/s3.png"
|
||||
alt="Amazon S3"
|
||||
width={16}
|
||||
height={16}
|
||||
className="rounded-sm"
|
||||
/>
|
||||
)
|
||||
};
|
||||
}
|
||||
// Default: HTTP
|
||||
const cfg = parseHttpConfig(destination.config);
|
||||
return {
|
||||
name: cfg.name,
|
||||
typeLabel: "HTTP",
|
||||
detail: cfg.url,
|
||||
icon: <Globe className="h-3.5 w-3.5 text-black" />
|
||||
};
|
||||
}
|
||||
|
||||
function DestinationCard({
|
||||
destination,
|
||||
onToggle,
|
||||
@@ -73,25 +123,25 @@ function DestinationCard({
|
||||
disabled = false
|
||||
}: DestinationCardProps) {
|
||||
const t = useTranslations();
|
||||
const cfg = parseHttpConfig(destination.config);
|
||||
const { name, typeLabel, detail, icon } =
|
||||
getDestinationDisplay(destination);
|
||||
|
||||
return (
|
||||
<div className="relative flex flex-col rounded-lg border bg-card text-card-foreground p-5 gap-3">
|
||||
{/* Top row: icon + name/type + toggle */}
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
{/* Squirkle icon: gray outer → white inner → black globe */}
|
||||
<div className="shrink-0 flex items-center justify-center w-10 h-10 rounded-2xl bg-muted">
|
||||
<div className="flex items-center justify-center w-6 h-6 rounded-xl bg-white shadow-sm">
|
||||
<Globe className="h-3.5 w-3.5 text-black" />
|
||||
{icon}
|
||||
</div>
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="font-semibold text-sm leading-tight truncate">
|
||||
{cfg.name || t("streamingUnnamedDestination")}
|
||||
{name || t("streamingUnnamedDestination")}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground truncate mt-0.5">
|
||||
HTTP
|
||||
{typeLabel}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -105,15 +155,40 @@ function DestinationCard({
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* URL preview */}
|
||||
{/* Detail preview (URL for HTTP, s3:// path for S3) */}
|
||||
<p className="text-xs text-muted-foreground truncate">
|
||||
{cfg.url || (
|
||||
{detail || (
|
||||
<span className="italic">
|
||||
{t("streamingNoUrlConfigured")}
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
|
||||
{/* Error indicator */}
|
||||
{destination.lastError && (
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-1.5 text-left cursor-pointer rounded px-0 hover:opacity-75 transition-opacity"
|
||||
>
|
||||
<AlertCircle className="h-3.5 w-3.5 text-destructive shrink-0" />
|
||||
<p className="text-xs text-destructive">
|
||||
{t("streamingLastSyncError")}
|
||||
</p>
|
||||
<ChevronDown className="h-3 w-3 text-destructive shrink-0 ml-auto" />
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
side="bottom"
|
||||
align="end"
|
||||
className="w-80 text-xs break-words"
|
||||
>
|
||||
{destination.lastError}
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
)}
|
||||
|
||||
{/* Footer: edit button + three-dots menu */}
|
||||
<div className="mt-auto pt-5 flex gap-2">
|
||||
<Button
|
||||
@@ -485,7 +560,7 @@ export default function StreamingDestinationsPage() {
|
||||
if (!v) setDeleteTarget(null);
|
||||
}}
|
||||
string={
|
||||
parseHttpConfig(deleteTarget.config).name ||
|
||||
getDestinationDisplay(deleteTarget).name ||
|
||||
t("streamingDeleteDialogThisDestination")
|
||||
}
|
||||
title={t("streamingDeleteTitle")}
|
||||
@@ -493,7 +568,7 @@ export default function StreamingDestinationsPage() {
|
||||
<p>
|
||||
{t("streamingDeleteDialogAreYouSure")}{" "}
|
||||
<span>
|
||||
{parseHttpConfig(deleteTarget.config).name ||
|
||||
{getDestinationDisplay(deleteTarget).name ||
|
||||
t("streamingDeleteDialogThisDestination")}
|
||||
</span>
|
||||
{t("streamingDeleteDialogPermanentlyRemoved")}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { RolesSelector } from "@app/components/roles-selector";
|
||||
import SetResourceHeaderAuthForm from "@app/components/SetResourceHeaderAuthForm";
|
||||
import SetResourcePincodeForm from "@app/components/SetResourcePincodeForm";
|
||||
import {
|
||||
@@ -33,6 +34,7 @@ import {
|
||||
SelectTrigger,
|
||||
SelectValue
|
||||
} from "@app/components/ui/select";
|
||||
import { UsersSelector } from "@app/components/users-selector";
|
||||
import type { ResourceContextType } from "@app/contexts/resourceContext";
|
||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||
import { useOrgContext } from "@app/hooks/useOrgContext";
|
||||
@@ -180,13 +182,6 @@ export default function ResourceAuthenticationPage() {
|
||||
return [];
|
||||
}, [orgIdps]);
|
||||
|
||||
const [activeRolesTagIndex, setActiveRolesTagIndex] = useState<
|
||||
number | null
|
||||
>(null);
|
||||
const [activeUsersTagIndex, setActiveUsersTagIndex] = useState<
|
||||
number | null
|
||||
>(null);
|
||||
|
||||
const [ssoEnabled, setSsoEnabled] = useState(resource.sso ?? false);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -497,46 +492,27 @@ export default function ResourceAuthenticationPage() {
|
||||
{t("roles")}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<TagInput
|
||||
{...field}
|
||||
activeTagIndex={
|
||||
activeRolesTagIndex
|
||||
<RolesSelector
|
||||
selectedRoles={
|
||||
field.value ??
|
||||
[]
|
||||
}
|
||||
setActiveTagIndex={
|
||||
setActiveRolesTagIndex
|
||||
restrictAdminRole
|
||||
orgId={
|
||||
org.org
|
||||
.orgId
|
||||
}
|
||||
placeholder={t(
|
||||
"accessRoleSelect2"
|
||||
)}
|
||||
size="sm"
|
||||
tags={
|
||||
usersRolesForm.getValues()
|
||||
.roles
|
||||
}
|
||||
setTags={(
|
||||
newRoles
|
||||
onSelectRoles={(
|
||||
newUsers
|
||||
) => {
|
||||
usersRolesForm.setValue(
|
||||
"roles",
|
||||
newRoles as [
|
||||
newUsers as [
|
||||
Tag,
|
||||
...Tag[]
|
||||
]
|
||||
);
|
||||
}}
|
||||
enableAutocomplete={
|
||||
true
|
||||
}
|
||||
autocompleteOptions={
|
||||
allRoles
|
||||
}
|
||||
allowDuplicates={
|
||||
false
|
||||
}
|
||||
restrictTagsToAutocompleteOptions={
|
||||
true
|
||||
}
|
||||
sortTags={true}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
@@ -557,23 +533,16 @@ export default function ResourceAuthenticationPage() {
|
||||
{t("users")}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<TagInput
|
||||
{...field}
|
||||
activeTagIndex={
|
||||
activeUsersTagIndex
|
||||
<UsersSelector
|
||||
selectedUsers={
|
||||
field.value ??
|
||||
[]
|
||||
}
|
||||
setActiveTagIndex={
|
||||
setActiveUsersTagIndex
|
||||
orgId={
|
||||
org.org
|
||||
.orgId
|
||||
}
|
||||
placeholder={t(
|
||||
"accessUserSelect"
|
||||
)}
|
||||
tags={
|
||||
usersRolesForm.getValues()
|
||||
.users
|
||||
}
|
||||
size="sm"
|
||||
setTags={(
|
||||
onSelectUsers={(
|
||||
newUsers
|
||||
) => {
|
||||
usersRolesForm.setValue(
|
||||
@@ -584,19 +553,6 @@ export default function ResourceAuthenticationPage() {
|
||||
]
|
||||
);
|
||||
}}
|
||||
enableAutocomplete={
|
||||
true
|
||||
}
|
||||
autocompleteOptions={
|
||||
allUsers
|
||||
}
|
||||
allowDuplicates={
|
||||
false
|
||||
}
|
||||
restrictTagsToAutocompleteOptions={
|
||||
true
|
||||
}
|
||||
sortTags={true}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
|
||||
@@ -84,6 +84,7 @@ import {
|
||||
AlertTriangle,
|
||||
CircleCheck,
|
||||
CircleX,
|
||||
ExternalLink,
|
||||
Info,
|
||||
Plus,
|
||||
Settings
|
||||
@@ -652,6 +653,8 @@ function ProxyResourceTargetsForm({
|
||||
hcMode: null,
|
||||
hcUnhealthyInterval: null,
|
||||
hcTlsServerName: null,
|
||||
hcHealthyThreshold: null,
|
||||
hcUnhealthyThreshold: null,
|
||||
siteType: sites.length > 0 ? sites[0].type : null,
|
||||
new: true,
|
||||
updated: false
|
||||
@@ -761,7 +764,9 @@ function ProxyResourceTargetsForm({
|
||||
hcStatus: target.hcStatus || null,
|
||||
hcUnhealthyInterval: target.hcUnhealthyInterval || null,
|
||||
hcMode: target.hcMode || null,
|
||||
hcTlsServerName: target.hcTlsServerName
|
||||
hcTlsServerName: target.hcTlsServerName,
|
||||
hcHealthyThreshold: target.hcHealthyThreshold || null,
|
||||
hcUnhealthyThreshold: target.hcUnhealthyThreshold || null
|
||||
};
|
||||
|
||||
// Only include path-related fields for HTTP resources
|
||||
@@ -957,13 +962,18 @@ function ProxyResourceTargetsForm({
|
||||
{build === "saas" &&
|
||||
targets.length > 1 &&
|
||||
new Set(targets.map((t) => t.siteId)).size > 1 && (
|
||||
<p className="text-sm text-muted-foreground mt-3 flex items-start gap-1.5">
|
||||
<AlertTriangle className="h-4 w-4 shrink-0 mt-0.5" />
|
||||
<span>
|
||||
Round robin routing will not work between
|
||||
sites that are not connected to the same
|
||||
node, but failover will work.
|
||||
</span>
|
||||
<p className="text-sm text-muted-foreground mt-3">
|
||||
{t("proxyMultiSiteRoundRobinNodeHelp")}{" "}
|
||||
<a
|
||||
href="https://docs.pangolin.net/manage/resources/public/targets#distributing-sites-load-across-servers"
|
||||
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>
|
||||
)}
|
||||
</SettingsSectionBody>
|
||||
@@ -1018,7 +1028,13 @@ function ProxyResourceTargetsForm({
|
||||
30,
|
||||
hcTlsServerName:
|
||||
selectedTargetForHealthCheck.hcTlsServerName ||
|
||||
undefined
|
||||
undefined,
|
||||
hcHealthyThreshold:
|
||||
selectedTargetForHealthCheck.hcHealthyThreshold ||
|
||||
1,
|
||||
hcUnhealthyThreshold:
|
||||
selectedTargetForHealthCheck.hcUnhealthyThreshold ||
|
||||
1
|
||||
}}
|
||||
onChanges={async (config) => {
|
||||
if (selectedTargetForHealthCheck) {
|
||||
|
||||
@@ -82,8 +82,8 @@ import { AxiosResponse } from "axios";
|
||||
import {
|
||||
CircleCheck,
|
||||
CircleX,
|
||||
ExternalLink,
|
||||
Info,
|
||||
InfoIcon,
|
||||
Plus,
|
||||
Settings,
|
||||
SquareArrowOutUpRight
|
||||
@@ -303,6 +303,8 @@ export default function Page() {
|
||||
hcMode: null,
|
||||
hcUnhealthyInterval: null,
|
||||
hcTlsServerName: null,
|
||||
hcHealthyThreshold: null,
|
||||
hcUnhealthyThreshold: null,
|
||||
siteType: sites.length > 0 ? sites[0].type : null,
|
||||
new: true,
|
||||
updated: false
|
||||
@@ -552,7 +554,11 @@ export default function Page() {
|
||||
hcUnhealthyInterval:
|
||||
target.hcUnhealthyInterval || null,
|
||||
hcMode: target.hcMode || null,
|
||||
hcTlsServerName: target.hcTlsServerName
|
||||
hcTlsServerName: target.hcTlsServerName,
|
||||
hcHealthyThreshold:
|
||||
target.hcHealthyThreshold || null,
|
||||
hcUnhealthyThreshold:
|
||||
target.hcUnhealthyThreshold || null
|
||||
};
|
||||
|
||||
// Only include path-related fields for HTTP resources
|
||||
@@ -1419,16 +1425,22 @@ export default function Page() {
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
{build === "enterprise" &&
|
||||
{build === "saas" &&
|
||||
targets.length > 1 &&
|
||||
new Set(targets.map((t) => t.siteId)).size > 1 && (
|
||||
<p className="text-sm text-muted-foreground mt-3 flex items-start gap-1.5">
|
||||
<InfoIcon className="h-4 w-4 shrink-0 mt-0.5" />
|
||||
<span>
|
||||
Round robin routing will not work between
|
||||
sites that are not connected to the same
|
||||
node, but failover will work.
|
||||
</span>
|
||||
new Set(targets.map((t) => t.siteId)).size >
|
||||
1 && (
|
||||
<p className="text-sm text-muted-foreground mt-3">
|
||||
{t("proxyMultiSiteRoundRobinNodeHelp")}{" "}
|
||||
<a
|
||||
href="https://docs.pangolin.net/manage/resources/public/targets#distributing-sites-load-across-servers"
|
||||
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>
|
||||
)}
|
||||
</SettingsSectionBody>
|
||||
@@ -1520,7 +1532,13 @@ export default function Page() {
|
||||
30,
|
||||
hcTlsServerName:
|
||||
selectedTargetForHealthCheck.hcTlsServerName ||
|
||||
undefined
|
||||
undefined,
|
||||
hcHealthyThreshold:
|
||||
selectedTargetForHealthCheck.hcHealthyThreshold ||
|
||||
1,
|
||||
hcUnhealthyThreshold:
|
||||
selectedTargetForHealthCheck.hcUnhealthyThreshold ||
|
||||
1
|
||||
}}
|
||||
onChanges={async (config) => {
|
||||
if (selectedTargetForHealthCheck) {
|
||||
|
||||
@@ -55,7 +55,9 @@ export default async function ProxyResourcesPage(
|
||||
pagination = responseData.pagination;
|
||||
} catch (e) {}
|
||||
|
||||
const siteIdParam = parsePositiveInt(searchParams.get("siteId") ?? undefined);
|
||||
const siteIdParam = parsePositiveInt(
|
||||
searchParams.get("siteId") ?? undefined
|
||||
);
|
||||
|
||||
let initialFilterSite: {
|
||||
siteId: number;
|
||||
@@ -122,6 +124,7 @@ export default async function ProxyResourcesPage(
|
||||
domainId: resource.domainId || undefined,
|
||||
fullDomain: resource.fullDomain ?? null,
|
||||
ssl: resource.ssl,
|
||||
wildcard: resource.wildcard,
|
||||
targets: resource.targets?.map((target) => ({
|
||||
targetId: target.targetId,
|
||||
ip: target.ip,
|
||||
|
||||
@@ -681,6 +681,9 @@ export default function PoliciesPage() {
|
||||
control: form.control,
|
||||
name: "orgMapping"
|
||||
}}
|
||||
orgId={
|
||||
editingPolicy?.orgId || policyFormOrgId
|
||||
}
|
||||
roleMappingFieldIdPrefix="admin-idp-policy-role"
|
||||
roleMappingMode={policyRoleMappingMode}
|
||||
onRoleMappingModeChange={
|
||||
|
||||
@@ -212,16 +212,22 @@ export const orgNavSections = (
|
||||
title: "sidebarManagement",
|
||||
icon: <Building2 className="size-4 flex-none" />,
|
||||
items: [
|
||||
{
|
||||
title: "sidebarAlerting",
|
||||
href: "/{orgId}/settings/alerting",
|
||||
icon: <BellRing className="size-4 flex-none" />
|
||||
},
|
||||
{
|
||||
title: "sidebarProvisioning",
|
||||
href: "/{orgId}/settings/provisioning",
|
||||
icon: <Boxes className="size-4 flex-none" />
|
||||
},
|
||||
...(!env?.flags.disableEnterpriseFeatures
|
||||
? [
|
||||
{
|
||||
title: "sidebarAlerting",
|
||||
href: "/{orgId}/settings/alerting",
|
||||
icon: (
|
||||
<BellRing className="size-4 flex-none" />
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "sidebarProvisioning",
|
||||
href: "/{orgId}/settings/provisioning",
|
||||
icon: <Boxes className="size-4 flex-none" />
|
||||
}
|
||||
]
|
||||
: []),
|
||||
{
|
||||
title: "sidebarBluePrints",
|
||||
href: "/{orgId}/settings/blueprints",
|
||||
|
||||
Reference in New Issue
Block a user