mirror of
https://github.com/fosrl/pangolin.git
synced 2026-04-29 09:12:56 +00:00
Paywalling
This commit is contained in:
Owen
@@ -4,7 +4,9 @@ import AlertRuleGraphEditor from "@app/components/alert-rule-editor/AlertRuleGra
|
||||
import { apiResponseToFormValues } from "@app/lib/alertRuleForm";
|
||||
import { createApiClient, formatAxiosError } from "@app/lib/api";
|
||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||
import { usePaidStatus } from "@app/hooks/usePaidStatus";
|
||||
import { toast } from "@app/hooks/useToast";
|
||||
import { tierMatrix } from "@server/lib/billing/tierMatrix";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useEffect, useState } from "react";
|
||||
@@ -21,6 +23,8 @@ export default function EditAlertRulePage() {
|
||||
const alertRuleId = parseInt(ruleIdParam, 10);
|
||||
|
||||
const api = createApiClient(useEnvContext());
|
||||
const { isPaidUser } = usePaidStatus();
|
||||
const isPaid = isPaidUser(tierMatrix.alertingRules);
|
||||
|
||||
const [formValues, setFormValues] = useState<AlertRuleFormValues | null | undefined>(undefined);
|
||||
|
||||
@@ -73,6 +77,7 @@ export default function EditAlertRulePage() {
|
||||
alertRuleId={alertRuleId}
|
||||
initialValues={formValues}
|
||||
isNew={false}
|
||||
disabled={!isPaid}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,17 +2,22 @@
|
||||
|
||||
import AlertRuleGraphEditor from "@app/components/alert-rule-editor/AlertRuleGraphEditor";
|
||||
import { defaultFormValues } from "@app/lib/alertRuleForm";
|
||||
import { usePaidStatus } from "@app/hooks/usePaidStatus";
|
||||
import { tierMatrix } from "@server/lib/billing/tierMatrix";
|
||||
import { useParams } from "next/navigation";
|
||||
|
||||
export default function NewAlertRulePage() {
|
||||
const params = useParams();
|
||||
const orgId = params.orgId as string;
|
||||
const { isPaidUser } = usePaidStatus();
|
||||
const isPaid = isPaidUser(tierMatrix.alertingRules);
|
||||
|
||||
return (
|
||||
<AlertRuleGraphEditor
|
||||
orgId={orgId}
|
||||
initialValues={defaultFormValues()}
|
||||
isNew
|
||||
disabled={!isPaid}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -22,7 +22,8 @@ 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, ExternalLink, KeyRound } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { AxiosResponse } from "axios";
|
||||
import { build } from "@server/build";
|
||||
import Image from "next/image";
|
||||
@@ -181,6 +182,65 @@ 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,
|
||||
@@ -189,6 +249,17 @@ 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>
|
||||
@@ -203,7 +274,6 @@ function DestinationTypePicker({
|
||||
id: "s3",
|
||||
title: t("streamingS3Title"),
|
||||
description: t("streamingS3Description"),
|
||||
disabled: true,
|
||||
icon: (
|
||||
<Image
|
||||
src="/third-party/s3.png"
|
||||
@@ -218,7 +288,6 @@ function DestinationTypePicker({
|
||||
id: "datadog",
|
||||
title: t("streamingDatadogTitle"),
|
||||
description: t("streamingDatadogDescription"),
|
||||
disabled: true,
|
||||
icon: (
|
||||
<Image
|
||||
src="/third-party/dd.png"
|
||||
@@ -236,6 +305,11 @@ function DestinationTypePicker({
|
||||
}, [open]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<ContactSalesDialog
|
||||
open={contactSalesOpen}
|
||||
onOpenChange={setContactSalesOpen}
|
||||
/>
|
||||
<Credenza open={open} onOpenChange={onOpenChange}>
|
||||
<CredenzaContent className="sm:max-w-lg">
|
||||
<CredenzaHeader>
|
||||
@@ -255,7 +329,12 @@ function DestinationTypePicker({
|
||||
<StrategySelect
|
||||
options={destinationTypeOptions}
|
||||
value={selected}
|
||||
onChange={setSelected}
|
||||
onChange={(type) => {
|
||||
setSelected(type);
|
||||
if (ENTERPRISE_ONLY_TYPES.includes(type)) {
|
||||
setContactSalesOpen(true);
|
||||
}
|
||||
}}
|
||||
cols={1}
|
||||
/>
|
||||
</div>
|
||||
@@ -265,7 +344,7 @@ function DestinationTypePicker({
|
||||
<Button variant="outline">{t("cancel")}</Button>
|
||||
</CredenzaClose>
|
||||
<Button
|
||||
onClick={() => onSelect(selected)}
|
||||
onClick={() => handleOptionSelect(selected)}
|
||||
disabled={isPaywalled}
|
||||
>
|
||||
{t("continue")}
|
||||
@@ -273,6 +352,7 @@ function DestinationTypePicker({
|
||||
</CredenzaFooter>
|
||||
</CredenzaContent>
|
||||
</Credenza>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
|
||||
import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import { DataTable, ExtendedColumnDef } from "@app/components/ui/data-table";
|
||||
import {
|
||||
@@ -12,8 +13,10 @@ import {
|
||||
import { Switch } from "@app/components/ui/switch";
|
||||
import { toast } from "@app/hooks/useToast";
|
||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||
import { usePaidStatus } from "@app/hooks/usePaidStatus";
|
||||
import { createApiClient, formatAxiosError } from "@app/lib/api";
|
||||
import { orgQueries } from "@app/lib/queries";
|
||||
import { tierMatrix } from "@server/lib/billing/tierMatrix";
|
||||
import { ArrowUpDown, MoreHorizontal } from "lucide-react";
|
||||
import moment from "moment";
|
||||
import Link from "next/link";
|
||||
@@ -82,6 +85,8 @@ export default function AlertingRulesTable({ orgId }: AlertingRulesTableProps) {
|
||||
const t = useTranslations();
|
||||
const api = createApiClient(useEnvContext());
|
||||
const queryClient = useQueryClient();
|
||||
const { isPaidUser } = usePaidStatus();
|
||||
const isPaid = isPaidUser(tierMatrix.alertingRules);
|
||||
|
||||
const [deleteOpen, setDeleteOpen] = useState(false);
|
||||
const [selected, setSelected] = useState<AlertRuleRow | null>(null);
|
||||
@@ -182,7 +187,7 @@ export default function AlertingRulesTable({ orgId }: AlertingRulesTableProps) {
|
||||
return (
|
||||
<Switch
|
||||
checked={r.enabled}
|
||||
disabled={togglingId === r.alertRuleId}
|
||||
disabled={!isPaid || togglingId === r.alertRuleId}
|
||||
onCheckedChange={(v) => setEnabled(r, v)}
|
||||
/>
|
||||
);
|
||||
@@ -215,6 +220,7 @@ export default function AlertingRulesTable({ orgId }: AlertingRulesTableProps) {
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem
|
||||
disabled={!isPaid}
|
||||
onClick={() => {
|
||||
setSelected(r);
|
||||
setDeleteOpen(true);
|
||||
@@ -257,6 +263,8 @@ export default function AlertingRulesTable({ orgId }: AlertingRulesTableProps) {
|
||||
title={t("alertingDeleteRule")}
|
||||
/>
|
||||
)}
|
||||
<PaidFeaturesAlert tiers={tierMatrix.alertingRules} />
|
||||
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={rows}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { UseFormReturn } from "react-hook-form";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { Input } from "@/components/ui/input";
|
||||
@@ -21,6 +22,77 @@ 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>;
|
||||
@@ -40,10 +112,19 @@ export function HealthCheckFormFields({
|
||||
watchedMode
|
||||
}: HealthCheckFormFieldsProps) {
|
||||
const t = useTranslations();
|
||||
const [contactSalesOpen, setContactSalesOpen] = useState(false);
|
||||
|
||||
const showFields = hideEnabledField || watchedEnabled;
|
||||
|
||||
const handleChange = (fieldName: string, value: any, fieldOnChange: (v: any) => void) => {
|
||||
const handleChange = (
|
||||
fieldName: string,
|
||||
value: any,
|
||||
fieldOnChange: (v: any) => void
|
||||
) => {
|
||||
if (fieldName === "hcMode" && UNIMPLEMENTED_MODES.includes(value)) {
|
||||
setContactSalesOpen(true);
|
||||
return;
|
||||
}
|
||||
fieldOnChange(value);
|
||||
if (onFieldChange) {
|
||||
onFieldChange(fieldName, value);
|
||||
@@ -52,6 +133,10 @@ export function HealthCheckFormFields({
|
||||
|
||||
return (
|
||||
<>
|
||||
<ContactSalesDialog
|
||||
open={contactSalesOpen}
|
||||
onOpenChange={setContactSalesOpen}
|
||||
/>
|
||||
{/* Name */}
|
||||
{showNameField && (
|
||||
<FormField
|
||||
@@ -63,7 +148,9 @@ export function HealthCheckFormFields({
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
placeholder={t("standaloneHcNamePlaceholder")}
|
||||
placeholder={t(
|
||||
"standaloneHcNamePlaceholder"
|
||||
)}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
@@ -86,7 +173,11 @@ export function HealthCheckFormFields({
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={(value) =>
|
||||
handleChange("hcEnabled", value, field.onChange)
|
||||
handleChange(
|
||||
"hcEnabled",
|
||||
value,
|
||||
field.onChange
|
||||
)
|
||||
}
|
||||
/>
|
||||
</FormControl>
|
||||
@@ -103,25 +194,41 @@ export function HealthCheckFormFields({
|
||||
name="hcMode"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t("healthCheckStrategy")}</FormLabel>
|
||||
<FormLabel>
|
||||
{t("healthCheckStrategy")}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<StrategySelect
|
||||
cols={2}
|
||||
options={[
|
||||
{
|
||||
id: "http",
|
||||
title: "HTTP",
|
||||
description: "Validates connectivity and checks the HTTP response status."
|
||||
},
|
||||
{
|
||||
id: "tcp",
|
||||
title: "TCP",
|
||||
description: "Verifies TCP connectivity only, without inspecting the response."
|
||||
}
|
||||
{
|
||||
id: "http",
|
||||
title: "HTTP",
|
||||
description: t("healthCheckStrategyHttp")
|
||||
},
|
||||
{
|
||||
id: "tcp",
|
||||
title: "TCP",
|
||||
description: t("healthCheckStrategyTcp")
|
||||
},
|
||||
{
|
||||
id: "snmp",
|
||||
title: "SNMP",
|
||||
description: t("healthCheckStrategySnmp")
|
||||
},
|
||||
{
|
||||
id: "icmp",
|
||||
title: "Ping (ICMP)",
|
||||
description: t("healthCheckStrategyIcmp")
|
||||
}
|
||||
]}
|
||||
value={field.value}
|
||||
onChange={(value) =>
|
||||
handleChange("hcMode", value, field.onChange)
|
||||
handleChange(
|
||||
"hcMode",
|
||||
value,
|
||||
field.onChange
|
||||
)
|
||||
}
|
||||
/>
|
||||
</FormControl>
|
||||
@@ -138,7 +245,9 @@ export function HealthCheckFormFields({
|
||||
name="hcHostname"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t("healthHostname")}</FormLabel>
|
||||
<FormLabel>
|
||||
{t("healthHostname")}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
@@ -168,8 +277,13 @@ export function HealthCheckFormFields({
|
||||
min={1}
|
||||
max={65535}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
handleChange("hcPort", value, field.onChange);
|
||||
const value =
|
||||
e.target.value;
|
||||
handleChange(
|
||||
"hcPort",
|
||||
value,
|
||||
field.onChange
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
@@ -185,23 +299,35 @@ export function HealthCheckFormFields({
|
||||
name="hcScheme"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t("healthScheme")}</FormLabel>
|
||||
<FormLabel>
|
||||
{t("healthScheme")}
|
||||
</FormLabel>
|
||||
<Select
|
||||
onValueChange={(value) =>
|
||||
handleChange("hcScheme", value, field.onChange)
|
||||
handleChange(
|
||||
"hcScheme",
|
||||
value,
|
||||
field.onChange
|
||||
)
|
||||
}
|
||||
value={field.value}
|
||||
>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue
|
||||
placeholder={t("healthSelectScheme")}
|
||||
placeholder={t(
|
||||
"healthSelectScheme"
|
||||
)}
|
||||
/>
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value="http">HTTP</SelectItem>
|
||||
<SelectItem value="https">HTTPS</SelectItem>
|
||||
<SelectItem value="http">
|
||||
HTTP
|
||||
</SelectItem>
|
||||
<SelectItem value="https">
|
||||
HTTPS
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
@@ -213,7 +339,9 @@ export function HealthCheckFormFields({
|
||||
name="hcHostname"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t("healthHostname")}</FormLabel>
|
||||
<FormLabel>
|
||||
{t("healthHostname")}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
@@ -243,8 +371,13 @@ export function HealthCheckFormFields({
|
||||
min={1}
|
||||
max={65535}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
handleChange("hcPort", value, field.onChange);
|
||||
const value =
|
||||
e.target.value;
|
||||
handleChange(
|
||||
"hcPort",
|
||||
value,
|
||||
field.onChange
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
@@ -266,23 +399,39 @@ export function HealthCheckFormFields({
|
||||
<FormLabel>{t("httpMethod")}</FormLabel>
|
||||
<Select
|
||||
onValueChange={(value) =>
|
||||
handleChange("hcMethod", value, field.onChange)
|
||||
handleChange(
|
||||
"hcMethod",
|
||||
value,
|
||||
field.onChange
|
||||
)
|
||||
}
|
||||
value={field.value}
|
||||
>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue
|
||||
placeholder={t("selectHttpMethod")}
|
||||
placeholder={t(
|
||||
"selectHttpMethod"
|
||||
)}
|
||||
/>
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value="GET">GET</SelectItem>
|
||||
<SelectItem value="POST">POST</SelectItem>
|
||||
<SelectItem value="HEAD">HEAD</SelectItem>
|
||||
<SelectItem value="PUT">PUT</SelectItem>
|
||||
<SelectItem value="DELETE">DELETE</SelectItem>
|
||||
<SelectItem value="GET">
|
||||
GET
|
||||
</SelectItem>
|
||||
<SelectItem value="POST">
|
||||
POST
|
||||
</SelectItem>
|
||||
<SelectItem value="HEAD">
|
||||
HEAD
|
||||
</SelectItem>
|
||||
<SelectItem value="PUT">
|
||||
PUT
|
||||
</SelectItem>
|
||||
<SelectItem value="DELETE">
|
||||
DELETE
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
@@ -294,7 +443,9 @@ export function HealthCheckFormFields({
|
||||
name="hcPath"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t("healthCheckPath")}</FormLabel>
|
||||
<FormLabel>
|
||||
{t("healthCheckPath")}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
@@ -316,14 +467,22 @@ export function HealthCheckFormFields({
|
||||
name="hcTimeout"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t("timeoutSeconds")}</FormLabel>
|
||||
<FormLabel>
|
||||
{t("timeoutSeconds")}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
{...field}
|
||||
onChange={(e) => {
|
||||
const value = parseInt(e.target.value);
|
||||
handleChange("hcTimeout", value, field.onChange);
|
||||
const value = parseInt(
|
||||
e.target.value
|
||||
);
|
||||
handleChange(
|
||||
"hcTimeout",
|
||||
value,
|
||||
field.onChange
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
@@ -347,8 +506,14 @@ export function HealthCheckFormFields({
|
||||
type="number"
|
||||
{...field}
|
||||
onChange={(e) => {
|
||||
const value = parseInt(e.target.value);
|
||||
handleChange("hcTimeout", value, field.onChange);
|
||||
const value = parseInt(
|
||||
e.target.value
|
||||
);
|
||||
handleChange(
|
||||
"hcTimeout",
|
||||
value,
|
||||
field.onChange
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
@@ -365,14 +530,22 @@ export function HealthCheckFormFields({
|
||||
name="hcInterval"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t("healthyIntervalSeconds")}</FormLabel>
|
||||
<FormLabel>
|
||||
{t("healthyIntervalSeconds")}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
{...field}
|
||||
onChange={(e) => {
|
||||
const value = parseInt(e.target.value);
|
||||
handleChange("hcInterval", value, field.onChange);
|
||||
const value = parseInt(
|
||||
e.target.value
|
||||
);
|
||||
handleChange(
|
||||
"hcInterval",
|
||||
value,
|
||||
field.onChange
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
@@ -385,13 +558,17 @@ export function HealthCheckFormFields({
|
||||
name="hcHealthyThreshold"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t("healthyThreshold")}</FormLabel>
|
||||
<FormLabel>
|
||||
{t("healthyThreshold")}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
{...field}
|
||||
onChange={(e) => {
|
||||
const value = parseInt(e.target.value);
|
||||
const value = parseInt(
|
||||
e.target.value
|
||||
);
|
||||
handleChange(
|
||||
"hcHealthyThreshold",
|
||||
value,
|
||||
@@ -413,13 +590,17 @@ export function HealthCheckFormFields({
|
||||
name="hcUnhealthyInterval"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t("unhealthyIntervalSeconds")}</FormLabel>
|
||||
<FormLabel>
|
||||
{t("unhealthyIntervalSeconds")}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
{...field}
|
||||
onChange={(e) => {
|
||||
const value = parseInt(e.target.value);
|
||||
const value = parseInt(
|
||||
e.target.value
|
||||
);
|
||||
handleChange(
|
||||
"hcUnhealthyInterval",
|
||||
value,
|
||||
@@ -437,13 +618,17 @@ export function HealthCheckFormFields({
|
||||
name="hcUnhealthyThreshold"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t("unhealthyThreshold")}</FormLabel>
|
||||
<FormLabel>
|
||||
{t("unhealthyThreshold")}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
{...field}
|
||||
onChange={(e) => {
|
||||
const value = parseInt(e.target.value);
|
||||
const value = parseInt(
|
||||
e.target.value
|
||||
);
|
||||
handleChange(
|
||||
"hcUnhealthyThreshold",
|
||||
value,
|
||||
@@ -468,15 +653,24 @@ export function HealthCheckFormFields({
|
||||
name="hcStatus"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t("expectedResponseCodes")}</FormLabel>
|
||||
<FormLabel>
|
||||
{t("expectedResponseCodes")}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
value={field.value ?? ""}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value;
|
||||
const value = val ? parseInt(val) : null;
|
||||
handleChange("hcStatus", value, field.onChange);
|
||||
const val =
|
||||
e.target.value;
|
||||
const value = val
|
||||
? parseInt(val)
|
||||
: null;
|
||||
handleChange(
|
||||
"hcStatus",
|
||||
value,
|
||||
field.onChange
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
@@ -489,7 +683,9 @@ export function HealthCheckFormFields({
|
||||
name="hcTlsServerName"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t("tlsServerName")}</FormLabel>
|
||||
<FormLabel>
|
||||
{t("tlsServerName")}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
@@ -497,7 +693,10 @@ export function HealthCheckFormFields({
|
||||
handleChange(
|
||||
"hcTlsServerName",
|
||||
e.target.value,
|
||||
(v) => field.onChange(e)
|
||||
(v) =>
|
||||
field.onChange(
|
||||
e
|
||||
)
|
||||
)
|
||||
}
|
||||
/>
|
||||
@@ -539,7 +738,9 @@ export function HealthCheckFormFields({
|
||||
name="hcHeaders"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t("customHeaders")}</FormLabel>
|
||||
<FormLabel>
|
||||
{t("customHeaders")}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<HeadersInput
|
||||
value={field.value}
|
||||
|
||||
@@ -25,6 +25,9 @@ import { ArrowUpDown, ArrowUpRight, MoreHorizontal } from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
|
||||
import { usePaidStatus } from "@app/hooks/usePaidStatus";
|
||||
import { tierMatrix } from "@server/lib/billing/tierMatrix";
|
||||
|
||||
type StandaloneHealthChecksTableProps = {
|
||||
orgId: string;
|
||||
@@ -65,6 +68,8 @@ export default function HealthChecksTable({
|
||||
const t = useTranslations();
|
||||
const api = createApiClient(useEnvContext());
|
||||
const queryClient = useQueryClient();
|
||||
const { isPaidUser } = usePaidStatus();
|
||||
const isPaid = isPaidUser(tierMatrix.standaloneHealthChecks);
|
||||
|
||||
const [credenzaOpen, setCredenzaOpen] = useState(false);
|
||||
const [deleteOpen, setDeleteOpen] = useState(false);
|
||||
@@ -242,7 +247,10 @@ export default function HealthChecksTable({
|
||||
return (
|
||||
<Switch
|
||||
checked={r.hcEnabled}
|
||||
disabled={togglingId === r.targetHealthCheckId}
|
||||
disabled={
|
||||
!isPaid ||
|
||||
togglingId === r.targetHealthCheckId
|
||||
}
|
||||
onCheckedChange={(v) => handleToggleEnabled(r, v)}
|
||||
/>
|
||||
);
|
||||
@@ -267,6 +275,7 @@ export default function HealthChecksTable({
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem
|
||||
disabled={!isPaid}
|
||||
onClick={() => {
|
||||
setSelected(r);
|
||||
setDeleteOpen(true);
|
||||
@@ -280,6 +289,7 @@ export default function HealthChecksTable({
|
||||
</DropdownMenu>
|
||||
<Button
|
||||
variant="outline"
|
||||
disabled={!isPaid}
|
||||
onClick={() => {
|
||||
setSelected(r);
|
||||
setCredenzaOpen(true);
|
||||
@@ -326,6 +336,8 @@ export default function HealthChecksTable({
|
||||
onSaved={invalidate}
|
||||
/>
|
||||
|
||||
<PaidFeaturesAlert tiers={tierMatrix.standaloneHealthChecks} />
|
||||
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={rows}
|
||||
@@ -337,6 +349,7 @@ export default function HealthChecksTable({
|
||||
setSelected(null);
|
||||
setCredenzaOpen(true);
|
||||
}}
|
||||
addButtonDisabled={!isPaid}
|
||||
onRefresh={() => refetch()}
|
||||
isRefreshing={isRefetching || isLoading}
|
||||
addButtonText={t("standaloneHcAddButton")}
|
||||
|
||||
@@ -59,6 +59,8 @@ import { useRouter } from "next/navigation";
|
||||
import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useFieldArray, useForm, useWatch } from "react-hook-form";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
|
||||
import { tierMatrix } from "@server/lib/billing/tierMatrix";
|
||||
|
||||
type AlertRuleT = ReturnType<typeof useTranslations>;
|
||||
|
||||
@@ -296,6 +298,7 @@ type AlertRuleGraphEditorProps = {
|
||||
alertRuleId?: number;
|
||||
initialValues: AlertRuleFormValues;
|
||||
isNew: boolean;
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
const FORM_ID = "alert-rule-graph-form";
|
||||
@@ -304,7 +307,8 @@ export default function AlertRuleGraphEditor({
|
||||
orgId,
|
||||
alertRuleId,
|
||||
initialValues,
|
||||
isNew
|
||||
isNew,
|
||||
disabled = false
|
||||
}: AlertRuleGraphEditorProps) {
|
||||
const t = useTranslations();
|
||||
const router = useRouter();
|
||||
@@ -522,8 +526,13 @@ export default function AlertRuleGraphEditor({
|
||||
<Form {...form}>
|
||||
<form id={FORM_ID} onSubmit={onSubmit}>
|
||||
<SettingsContainer>
|
||||
<PaidFeaturesAlert tiers={tierMatrix.alertingRules} />
|
||||
<Card>
|
||||
<CardContent className="p-4 sm:p-5 space-y-4">
|
||||
<fieldset
|
||||
disabled={disabled}
|
||||
className={disabled ? "opacity-50 pointer-events-none" : ""}
|
||||
>
|
||||
<div className="flex flex-col gap-4 md:flex-row md:flex-wrap md:items-center">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Button variant="outline" size="sm" asChild>
|
||||
@@ -584,6 +593,7 @@ export default function AlertRuleGraphEditor({
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
@@ -644,21 +654,25 @@ export default function AlertRuleGraphEditor({
|
||||
{t("alertingSidebarHint")}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="p-4 sm:p-5 sm:px-6 pt-0">
|
||||
<div className="space-y-6">
|
||||
{selectedStep === "source" && (
|
||||
<AlertRuleSourceFields
|
||||
orgId={orgId}
|
||||
control={form.control}
|
||||
/>
|
||||
)}
|
||||
{selectedStep === "trigger" && (
|
||||
<AlertRuleTriggerFields
|
||||
control={form.control}
|
||||
/>
|
||||
)}
|
||||
{isActionsSidebar && (
|
||||
<div className="space-y-4">
|
||||
<CardContent className="p-4 sm:p-5 sm:px-6 pt-0">
|
||||
<fieldset
|
||||
disabled={disabled}
|
||||
className={disabled ? "opacity-50 pointer-events-none" : ""}
|
||||
>
|
||||
<div className="space-y-6">
|
||||
{selectedStep === "source" && (
|
||||
<AlertRuleSourceFields
|
||||
orgId={orgId}
|
||||
control={form.control}
|
||||
/>
|
||||
)}
|
||||
{selectedStep === "trigger" && (
|
||||
<AlertRuleTriggerFields
|
||||
control={form.control}
|
||||
/>
|
||||
)}
|
||||
{isActionsSidebar && (
|
||||
<div className="space-y-4">
|
||||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||||
<span className="text-sm font-medium">
|
||||
{t(
|
||||
@@ -719,6 +733,7 @@ export default function AlertRuleGraphEditor({
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</fieldset>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user