mirror of
https://github.com/fosrl/pangolin.git
synced 2026-05-22 00:35:22 +00:00
Showing the paid feature
This commit is contained in:
Owen
@@ -2971,6 +2971,14 @@
|
||||
"httpDestAddTitle": "Add HTTP Destination",
|
||||
"httpDestEditDescription": "Update the configuration for this HTTP event streaming destination.",
|
||||
"httpDestAddDescription": "Configure a new HTTP endpoint to receive your organization's events.",
|
||||
"S3DestEditTitle": "Edit Destination",
|
||||
"S3DestAddTitle": "Add S3 Destination",
|
||||
"S3DestEditDescription": "Update the configuration for this S3 event streaming destination.",
|
||||
"S3DestAddDescription": "Configure a new S3 endpoint to receive your organization's events.",
|
||||
"datadogDestEditTitle": "Edit Destination",
|
||||
"datadogDestAddTitle": "Add Datadog Destination",
|
||||
"datadogDestEditDescription": "Update the configuration for this Datadog event streaming destination.",
|
||||
"datadogDestAddDescription": "Configure a new Datadog endpoint to receive your organization's events.",
|
||||
"httpDestTabSettings": "Settings",
|
||||
"httpDestTabHeaders": "Headers",
|
||||
"httpDestTabBody": "Body",
|
||||
|
||||
@@ -22,8 +22,7 @@ import {
|
||||
} from "@app/components/Credenza";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import { Switch } from "@app/components/ui/switch";
|
||||
import { Globe, MoreHorizontal, Plus, ExternalLink, KeyRound } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { Globe, MoreHorizontal, Plus } from "lucide-react";
|
||||
import { AxiosResponse } from "axios";
|
||||
import { build } from "@server/build";
|
||||
import Image from "next/image";
|
||||
@@ -39,6 +38,8 @@ import {
|
||||
HttpDestinationCredenza,
|
||||
parseHttpConfig
|
||||
} from "@app/components/HttpDestinationCredenza";
|
||||
import { S3DestinationCredenza } from "@app/components/S3DestinationCredenza";
|
||||
import { DatadogDestinationCredenza } from "@app/components/DatadogDestinationCredenza";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
// ── Re-export Destination so the rest of the file can use it ──────────────────
|
||||
@@ -182,65 +183,6 @@ interface DestinationTypePickerProps {
|
||||
isPaywalled?: boolean;
|
||||
}
|
||||
|
||||
const BOOK_A_DEMO_URL = "https://click.fossorial.io/ep922";
|
||||
const CONTACT_URL = "https://pangolin.net/contact";
|
||||
|
||||
function ContactSalesDialog({
|
||||
open,
|
||||
onOpenChange
|
||||
}: {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}) {
|
||||
const t = useTranslations();
|
||||
return (
|
||||
<Credenza open={open} onOpenChange={onOpenChange}>
|
||||
<CredenzaContent className="sm:max-w-md">
|
||||
<CredenzaHeader>
|
||||
<CredenzaTitle>{t("streamingAddDestination")}</CredenzaTitle>
|
||||
</CredenzaHeader>
|
||||
<CredenzaBody>
|
||||
<div className="mb-2 rounded-md border border-black-500/30 bg-linear-to-br from-black-500/10 via-background to-background overflow-hidden">
|
||||
<div className="py-3 px-4">
|
||||
<div className="flex items-center gap-2.5 text-sm text-muted-foreground">
|
||||
<KeyRound className="size-4 shrink-0 text-black-500" />
|
||||
<span>
|
||||
Contact sales to enable this feature.{" "}
|
||||
<Link
|
||||
href={BOOK_A_DEMO_URL}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 font-medium text-black-600 underline"
|
||||
>
|
||||
Book a demo
|
||||
<ExternalLink className="size-3.5 shrink-0" />
|
||||
</Link>
|
||||
{" or "}
|
||||
<Link
|
||||
href={CONTACT_URL}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 font-medium text-black-600 underline"
|
||||
>
|
||||
contact us
|
||||
<ExternalLink className="size-3.5 shrink-0" />
|
||||
</Link>
|
||||
.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CredenzaBody>
|
||||
<CredenzaFooter>
|
||||
<CredenzaClose asChild>
|
||||
<Button variant="outline">{t("cancel")}</Button>
|
||||
</CredenzaClose>
|
||||
</CredenzaFooter>
|
||||
</CredenzaContent>
|
||||
</Credenza>
|
||||
);
|
||||
}
|
||||
|
||||
function DestinationTypePicker({
|
||||
open,
|
||||
onOpenChange,
|
||||
@@ -249,17 +191,6 @@ function DestinationTypePicker({
|
||||
}: DestinationTypePickerProps) {
|
||||
const t = useTranslations();
|
||||
const [selected, setSelected] = useState<DestinationType>("http");
|
||||
const [contactSalesOpen, setContactSalesOpen] = useState(false);
|
||||
|
||||
const ENTERPRISE_ONLY_TYPES: DestinationType[] = ["s3", "datadog"];
|
||||
|
||||
function handleOptionSelect(type: DestinationType) {
|
||||
if (ENTERPRISE_ONLY_TYPES.includes(type)) {
|
||||
setContactSalesOpen(true);
|
||||
} else {
|
||||
onSelect(type);
|
||||
}
|
||||
}
|
||||
|
||||
const destinationTypeOptions: ReadonlyArray<
|
||||
StrategyOption<DestinationType>
|
||||
@@ -305,11 +236,6 @@ function DestinationTypePicker({
|
||||
}, [open]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<ContactSalesDialog
|
||||
open={contactSalesOpen}
|
||||
onOpenChange={setContactSalesOpen}
|
||||
/>
|
||||
<Credenza open={open} onOpenChange={onOpenChange}>
|
||||
<CredenzaContent className="sm:max-w-lg">
|
||||
<CredenzaHeader>
|
||||
@@ -329,12 +255,7 @@ function DestinationTypePicker({
|
||||
<StrategySelect
|
||||
options={destinationTypeOptions}
|
||||
value={selected}
|
||||
onChange={(type) => {
|
||||
setSelected(type);
|
||||
if (ENTERPRISE_ONLY_TYPES.includes(type)) {
|
||||
setContactSalesOpen(true);
|
||||
}
|
||||
}}
|
||||
onChange={(type) => setSelected(type)}
|
||||
cols={1}
|
||||
/>
|
||||
</div>
|
||||
@@ -344,7 +265,7 @@ function DestinationTypePicker({
|
||||
<Button variant="outline">{t("cancel")}</Button>
|
||||
</CredenzaClose>
|
||||
<Button
|
||||
onClick={() => handleOptionSelect(selected)}
|
||||
onClick={() => onSelect(selected)}
|
||||
disabled={isPaywalled}
|
||||
>
|
||||
{t("continue")}
|
||||
@@ -352,7 +273,6 @@ function DestinationTypePicker({
|
||||
</CredenzaFooter>
|
||||
</CredenzaContent>
|
||||
</Credenza>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -371,6 +291,7 @@ export default function StreamingDestinationsPage() {
|
||||
const [typePickerOpen, setTypePickerOpen] = useState(false);
|
||||
const [editingDestination, setEditingDestination] =
|
||||
useState<Destination | null>(null);
|
||||
const [pickedType, setPickedType] = useState<DestinationType>("http");
|
||||
const [togglingIds, setTogglingIds] = useState<Set<number>>(new Set());
|
||||
|
||||
// Delete state
|
||||
@@ -472,7 +393,8 @@ export default function StreamingDestinationsPage() {
|
||||
setTypePickerOpen(true);
|
||||
};
|
||||
|
||||
const handleTypePicked = (_type: DestinationType) => {
|
||||
const handleTypePicked = (type: DestinationType) => {
|
||||
setPickedType(type);
|
||||
setTypePickerOpen(false);
|
||||
setEditingDestination(null);
|
||||
setModalOpen(true);
|
||||
@@ -480,6 +402,7 @@ export default function StreamingDestinationsPage() {
|
||||
|
||||
const openEdit = (destination: Destination) => {
|
||||
setEditingDestination(destination);
|
||||
setPickedType((destination.type as DestinationType) ?? "http");
|
||||
setModalOpen(true);
|
||||
};
|
||||
|
||||
@@ -526,6 +449,7 @@ export default function StreamingDestinationsPage() {
|
||||
isPaywalled={!isEnterprise}
|
||||
/>
|
||||
|
||||
{pickedType === "http" && (
|
||||
<HttpDestinationCredenza
|
||||
open={modalOpen}
|
||||
onOpenChange={setModalOpen}
|
||||
@@ -533,6 +457,25 @@ export default function StreamingDestinationsPage() {
|
||||
orgId={orgId}
|
||||
onSaved={loadDestinations}
|
||||
/>
|
||||
)}
|
||||
{pickedType === "s3" && (
|
||||
<S3DestinationCredenza
|
||||
open={modalOpen}
|
||||
onOpenChange={setModalOpen}
|
||||
editing={editingDestination}
|
||||
orgId={orgId}
|
||||
onSaved={loadDestinations}
|
||||
/>
|
||||
)}
|
||||
{pickedType === "datadog" && (
|
||||
<DatadogDestinationCredenza
|
||||
open={modalOpen}
|
||||
onOpenChange={setModalOpen}
|
||||
editing={editingDestination}
|
||||
orgId={orgId}
|
||||
onSaved={loadDestinations}
|
||||
/>
|
||||
)}
|
||||
|
||||
{deleteTarget && (
|
||||
<ConfirmDeleteDialog
|
||||
|
||||
93
src/components/DatadogDestinationCredenza.tsx
Normal file
93
src/components/DatadogDestinationCredenza.tsx
Normal file
@@ -0,0 +1,93 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import {
|
||||
Credenza,
|
||||
CredenzaBody,
|
||||
CredenzaClose,
|
||||
CredenzaContent,
|
||||
CredenzaDescription,
|
||||
CredenzaFooter,
|
||||
CredenzaHeader,
|
||||
CredenzaTitle
|
||||
} from "@app/components/Credenza";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import { Plus, X, KeyRound, ExternalLink } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
export interface DatadogDestinationCredenzaProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
editing: any;
|
||||
orgId: string;
|
||||
onSaved: () => void;
|
||||
}
|
||||
|
||||
export function DatadogDestinationCredenza({
|
||||
open,
|
||||
onOpenChange,
|
||||
editing,
|
||||
orgId,
|
||||
onSaved,
|
||||
}: DatadogDestinationCredenzaProps) {
|
||||
const t = useTranslations();
|
||||
|
||||
return (
|
||||
<Credenza open={open} onOpenChange={onOpenChange}>
|
||||
<CredenzaContent className="sm:max-w-2xl">
|
||||
<CredenzaHeader>
|
||||
<CredenzaTitle>
|
||||
{editing
|
||||
? t("datadogDestEditTitle")
|
||||
: t("datadogDestAddTitle")}
|
||||
</CredenzaTitle>
|
||||
<CredenzaDescription>
|
||||
{editing
|
||||
? t("datadogDestEditDescription")
|
||||
: t("datadogDestAddDescription")}
|
||||
</CredenzaDescription>
|
||||
</CredenzaHeader>
|
||||
|
||||
<CredenzaBody>
|
||||
<div className="rounded-md border border-black-500/30 bg-linear-to-br from-black-500/10 via-background to-background overflow-hidden">
|
||||
<div className="py-3 px-4">
|
||||
<div className="flex items-center gap-2.5 text-sm text-muted-foreground">
|
||||
<KeyRound className="size-4 shrink-0 text-black-500" />
|
||||
<span>
|
||||
Contact sales to enable this feature.{" "}
|
||||
<Link
|
||||
href="https://click.fossorial.io/ep922"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 font-medium text-black-600 underline"
|
||||
>
|
||||
Book a demo
|
||||
<ExternalLink className="size-3.5 shrink-0" />
|
||||
</Link>
|
||||
{" or "}
|
||||
<Link
|
||||
href="https://pangolin.net/contact"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 font-medium text-black-600 underline"
|
||||
>
|
||||
contact us
|
||||
<ExternalLink className="size-3.5 shrink-0" />
|
||||
</Link>
|
||||
.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CredenzaBody>
|
||||
|
||||
<CredenzaFooter>
|
||||
<CredenzaClose asChild>
|
||||
<Button variant="outline">{t("cancel")}</Button>
|
||||
</CredenzaClose>
|
||||
</CredenzaFooter>
|
||||
</CredenzaContent>
|
||||
</Credenza>
|
||||
);
|
||||
}
|
||||
@@ -1,6 +1,5 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { UseFormReturn } from "react-hook-form";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { Input } from "@/components/ui/input";
|
||||
@@ -22,78 +21,9 @@ import {
|
||||
FormLabel,
|
||||
FormMessage
|
||||
} from "@/components/ui/form";
|
||||
import {
|
||||
Credenza,
|
||||
CredenzaBody,
|
||||
CredenzaClose,
|
||||
CredenzaContent,
|
||||
CredenzaFooter,
|
||||
CredenzaHeader,
|
||||
CredenzaTitle
|
||||
} from "@app/components/Credenza";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ExternalLink, KeyRound } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
const BOOK_A_DEMO_URL = "https://click.fossorial.io/ep922";
|
||||
const CONTACT_URL = "https://pangolin.net/contact";
|
||||
const UNIMPLEMENTED_MODES = ["snmp", "icmp"];
|
||||
|
||||
function ContactSalesDialog({
|
||||
open,
|
||||
onOpenChange
|
||||
}: {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}) {
|
||||
return (
|
||||
<Credenza open={open} onOpenChange={onOpenChange}>
|
||||
<CredenzaContent className="sm:max-w-md">
|
||||
<CredenzaHeader>
|
||||
<CredenzaTitle>Coming Soon</CredenzaTitle>
|
||||
</CredenzaHeader>
|
||||
<CredenzaBody>
|
||||
<div className="mb-2 rounded-md border border-black-500/30 bg-linear-to-br from-black-500/10 via-background to-background overflow-hidden">
|
||||
<div className="py-3 px-4">
|
||||
<div className="flex items-center gap-2.5 text-sm text-muted-foreground">
|
||||
<KeyRound className="size-4 shrink-0 text-black-500" />
|
||||
<span>
|
||||
Contact sales to enable this feature.{" "}
|
||||
<Link
|
||||
href={BOOK_A_DEMO_URL}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 font-medium text-black-600 underline"
|
||||
>
|
||||
Book a demo
|
||||
<ExternalLink className="size-3.5 shrink-0" />
|
||||
</Link>
|
||||
{" or "}
|
||||
<Link
|
||||
href={CONTACT_URL}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 font-medium text-black-600 underline"
|
||||
>
|
||||
contact us
|
||||
<ExternalLink className="size-3.5 shrink-0" />
|
||||
</Link>
|
||||
.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CredenzaBody>
|
||||
<CredenzaFooter>
|
||||
<CredenzaClose asChild>
|
||||
<Button variant="outline">Close</Button>
|
||||
</CredenzaClose>
|
||||
</CredenzaFooter>
|
||||
</CredenzaContent>
|
||||
</Credenza>
|
||||
);
|
||||
}
|
||||
|
||||
type HealthCheckFormFieldsProps = {
|
||||
form: UseFormReturn<any>;
|
||||
onFieldChange?: (fieldName: string, value: any) => void;
|
||||
@@ -112,7 +42,6 @@ export function HealthCheckFormFields({
|
||||
watchedMode
|
||||
}: HealthCheckFormFieldsProps) {
|
||||
const t = useTranslations();
|
||||
const [contactSalesOpen, setContactSalesOpen] = useState(false);
|
||||
|
||||
const showFields = hideEnabledField || watchedEnabled;
|
||||
|
||||
@@ -121,10 +50,6 @@ export function HealthCheckFormFields({
|
||||
value: any,
|
||||
fieldOnChange: (v: any) => void
|
||||
) => {
|
||||
if (fieldName === "hcMode" && UNIMPLEMENTED_MODES.includes(value)) {
|
||||
setContactSalesOpen(true);
|
||||
return;
|
||||
}
|
||||
fieldOnChange(value);
|
||||
if (onFieldChange) {
|
||||
onFieldChange(fieldName, value);
|
||||
@@ -133,10 +58,6 @@ export function HealthCheckFormFields({
|
||||
|
||||
return (
|
||||
<>
|
||||
<ContactSalesDialog
|
||||
open={contactSalesOpen}
|
||||
onOpenChange={setContactSalesOpen}
|
||||
/>
|
||||
{/* Name */}
|
||||
{showNameField && (
|
||||
<FormField
|
||||
@@ -194,9 +115,6 @@ export function HealthCheckFormFields({
|
||||
name="hcMode"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t("healthCheckStrategy")}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<StrategySelect
|
||||
cols={2}
|
||||
@@ -204,22 +122,30 @@ export function HealthCheckFormFields({
|
||||
{
|
||||
id: "http",
|
||||
title: "HTTP",
|
||||
description: t("healthCheckStrategyHttp")
|
||||
description: t(
|
||||
"healthCheckStrategyHttp"
|
||||
)
|
||||
},
|
||||
{
|
||||
id: "tcp",
|
||||
title: "TCP",
|
||||
description: t("healthCheckStrategyTcp")
|
||||
description: t(
|
||||
"healthCheckStrategyTcp"
|
||||
)
|
||||
},
|
||||
{
|
||||
id: "snmp",
|
||||
title: "SNMP",
|
||||
description: t("healthCheckStrategySnmp")
|
||||
description: t(
|
||||
"healthCheckStrategySnmp"
|
||||
)
|
||||
},
|
||||
{
|
||||
id: "icmp",
|
||||
title: "Ping (ICMP)",
|
||||
description: t("healthCheckStrategyIcmp")
|
||||
description: t(
|
||||
"healthCheckStrategyIcmp"
|
||||
)
|
||||
}
|
||||
]}
|
||||
value={field.value}
|
||||
@@ -237,6 +163,43 @@ export function HealthCheckFormFields({
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Inline contact-sales banner for SNMP / ICMP */}
|
||||
{(watchedMode === "snmp" || watchedMode === "icmp") && (
|
||||
<div className="rounded-md border border-black-500/30 bg-linear-to-br from-black-500/10 via-background to-background overflow-hidden">
|
||||
<div className="py-3 px-4">
|
||||
<div className="flex items-center gap-2.5 text-sm text-muted-foreground">
|
||||
<KeyRound className="size-4 shrink-0 text-black-500" />
|
||||
<span>
|
||||
Contact sales to enable this feature.{" "}
|
||||
<Link
|
||||
href="https://click.fossorial.io/ep922"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 font-medium text-black-600 underline"
|
||||
>
|
||||
Book a demo
|
||||
<ExternalLink className="size-3.5 shrink-0" />
|
||||
</Link>
|
||||
{" or "}
|
||||
<Link
|
||||
href="https://pangolin.net/contact"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 font-medium text-black-600 underline"
|
||||
>
|
||||
contact us
|
||||
<ExternalLink className="size-3.5 shrink-0" />
|
||||
</Link>
|
||||
.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Connection fields + all remaining config — hidden for SNMP / ICMP */}
|
||||
{watchedMode !== "snmp" && watchedMode !== "icmp" && (
|
||||
<>
|
||||
{/* Connection fields */}
|
||||
{watchedMode === "tcp" ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
@@ -255,7 +218,10 @@ export function HealthCheckFormFields({
|
||||
handleChange(
|
||||
"hcHostname",
|
||||
e.target.value,
|
||||
(v) => field.onChange(e)
|
||||
(v) =>
|
||||
field.onChange(
|
||||
e
|
||||
)
|
||||
)
|
||||
}
|
||||
/>
|
||||
@@ -269,7 +235,9 @@ export function HealthCheckFormFields({
|
||||
name="hcPort"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t("healthPort")}</FormLabel>
|
||||
<FormLabel>
|
||||
{t("healthPort")}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
@@ -349,7 +317,10 @@ export function HealthCheckFormFields({
|
||||
handleChange(
|
||||
"hcHostname",
|
||||
e.target.value,
|
||||
(v) => field.onChange(e)
|
||||
(v) =>
|
||||
field.onChange(
|
||||
e
|
||||
)
|
||||
)
|
||||
}
|
||||
/>
|
||||
@@ -363,7 +334,9 @@ export function HealthCheckFormFields({
|
||||
name="hcPort"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t("healthPort")}</FormLabel>
|
||||
<FormLabel>
|
||||
{t("healthPort")}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
@@ -388,7 +361,7 @@ export function HealthCheckFormFields({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* HTTP Method + Timeout (shown when not TCP) */}
|
||||
{/* HTTP Method + Path + Timeout (shown when not TCP) */}
|
||||
{watchedMode !== "tcp" && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<FormField
|
||||
@@ -396,7 +369,9 @@ export function HealthCheckFormFields({
|
||||
name="hcMethod"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t("httpMethod")}</FormLabel>
|
||||
<FormLabel>
|
||||
{t("httpMethod")}
|
||||
</FormLabel>
|
||||
<Select
|
||||
onValueChange={(value) =>
|
||||
handleChange(
|
||||
@@ -453,7 +428,10 @@ export function HealthCheckFormFields({
|
||||
handleChange(
|
||||
"hcPath",
|
||||
e.target.value,
|
||||
(v) => field.onChange(e)
|
||||
(v) =>
|
||||
field.onChange(
|
||||
e
|
||||
)
|
||||
)
|
||||
}
|
||||
/>
|
||||
@@ -475,8 +453,10 @@ export function HealthCheckFormFields({
|
||||
type="number"
|
||||
{...field}
|
||||
onChange={(e) => {
|
||||
const value = parseInt(
|
||||
e.target.value
|
||||
const value =
|
||||
parseInt(
|
||||
e.target
|
||||
.value
|
||||
);
|
||||
handleChange(
|
||||
"hcTimeout",
|
||||
@@ -500,7 +480,9 @@ export function HealthCheckFormFields({
|
||||
name="hcTimeout"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t("timeoutSeconds")}</FormLabel>
|
||||
<FormLabel>
|
||||
{t("timeoutSeconds")}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
@@ -646,7 +628,7 @@ export function HealthCheckFormFields({
|
||||
{/* HTTP-only fields */}
|
||||
{watchedMode !== "tcp" && (
|
||||
<>
|
||||
{/* Expected Response Codes + TLS Server Name + Follow Redirects */}
|
||||
{/* Expected Response Codes + TLS Server Name */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
@@ -654,17 +636,26 @@ export function HealthCheckFormFields({
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t("expectedResponseCodes")}
|
||||
{t(
|
||||
"expectedResponseCodes"
|
||||
)}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
value={field.value ?? ""}
|
||||
value={
|
||||
field.value ??
|
||||
""
|
||||
}
|
||||
onChange={(e) => {
|
||||
const val =
|
||||
e.target.value;
|
||||
const value = val
|
||||
? parseInt(val)
|
||||
e.target
|
||||
.value;
|
||||
const value =
|
||||
val
|
||||
? parseInt(
|
||||
val
|
||||
)
|
||||
: null;
|
||||
handleChange(
|
||||
"hcStatus",
|
||||
@@ -692,7 +683,8 @@ export function HealthCheckFormFields({
|
||||
onChange={(e) =>
|
||||
handleChange(
|
||||
"hcTlsServerName",
|
||||
e.target.value,
|
||||
e.target
|
||||
.value,
|
||||
(v) =>
|
||||
field.onChange(
|
||||
e
|
||||
@@ -719,7 +711,9 @@ export function HealthCheckFormFields({
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={(value) =>
|
||||
onCheckedChange={(
|
||||
value
|
||||
) =>
|
||||
handleChange(
|
||||
"hcFollowRedirects",
|
||||
value,
|
||||
@@ -755,7 +749,9 @@ export function HealthCheckFormFields({
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
{t("customHeadersDescription")}
|
||||
{t(
|
||||
"customHeadersDescription"
|
||||
)}
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
@@ -763,6 +759,8 @@ export function HealthCheckFormFields({
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
|
||||
93
src/components/S3DestinationCredenza.tsx
Normal file
93
src/components/S3DestinationCredenza.tsx
Normal file
@@ -0,0 +1,93 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import {
|
||||
Credenza,
|
||||
CredenzaBody,
|
||||
CredenzaClose,
|
||||
CredenzaContent,
|
||||
CredenzaDescription,
|
||||
CredenzaFooter,
|
||||
CredenzaHeader,
|
||||
CredenzaTitle
|
||||
} from "@app/components/Credenza";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import { Plus, X, KeyRound, ExternalLink } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
export interface S3DestinationCredenzaProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
editing: any;
|
||||
orgId: string;
|
||||
onSaved: () => void;
|
||||
}
|
||||
|
||||
export function S3DestinationCredenza({
|
||||
open,
|
||||
onOpenChange,
|
||||
editing,
|
||||
orgId,
|
||||
onSaved,
|
||||
}: S3DestinationCredenzaProps) {
|
||||
const t = useTranslations();
|
||||
|
||||
return (
|
||||
<Credenza open={open} onOpenChange={onOpenChange}>
|
||||
<CredenzaContent className="sm:max-w-2xl">
|
||||
<CredenzaHeader>
|
||||
<CredenzaTitle>
|
||||
{editing
|
||||
? t("S3DestEditTitle")
|
||||
: t("S3DestAddTitle")}
|
||||
</CredenzaTitle>
|
||||
<CredenzaDescription>
|
||||
{editing
|
||||
? t("S3DestEditDescription")
|
||||
: t("S3DestAddDescription")}
|
||||
</CredenzaDescription>
|
||||
</CredenzaHeader>
|
||||
|
||||
<CredenzaBody>
|
||||
<div className="rounded-md border border-black-500/30 bg-linear-to-br from-black-500/10 via-background to-background overflow-hidden">
|
||||
<div className="py-3 px-4">
|
||||
<div className="flex items-center gap-2.5 text-sm text-muted-foreground">
|
||||
<KeyRound className="size-4 shrink-0 text-black-500" />
|
||||
<span>
|
||||
Contact sales to enable this feature.{" "}
|
||||
<Link
|
||||
href="https://click.fossorial.io/ep922"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 font-medium text-black-600 underline"
|
||||
>
|
||||
Book a demo
|
||||
<ExternalLink className="size-3.5 shrink-0" />
|
||||
</Link>
|
||||
{" or "}
|
||||
<Link
|
||||
href="https://pangolin.net/contact"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 font-medium text-black-600 underline"
|
||||
>
|
||||
contact us
|
||||
<ExternalLink className="size-3.5 shrink-0" />
|
||||
</Link>
|
||||
.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CredenzaBody>
|
||||
|
||||
<CredenzaFooter>
|
||||
<CredenzaClose asChild>
|
||||
<Button variant="outline">{t("cancel")}</Button>
|
||||
</CredenzaClose>
|
||||
</CredenzaFooter>
|
||||
</CredenzaContent>
|
||||
</Credenza>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user