Paywalling

messages/en-US.json

@@ -2953,9 +2953,9 @@
     "streamingHttpWebhookTitle": "HTTP Webhook",
     "streamingHttpWebhookDescription": "Send events to any HTTP endpoint with flexible authentication and templating.",
     "streamingS3Title": "Amazon S3",
-    "streamingS3Description": "Stream events to an S3-compatible object storage bucket. Contact support to enable this destination.",
+    "streamingS3Description": "Stream events to an S3-compatible object storage bucket.",
     "streamingDatadogTitle": "Datadog",
-    "streamingDatadogDescription": "Forward events directly to your Datadog account. Contact support to enable this destination.",
+    "streamingDatadogDescription": "Forward events directly to your Datadog account.",
     "streamingTypePickerDescription": "Choose a destination type to get started.",
     "streamingFailedToLoad": "Failed to load destinations",
     "streamingUnexpectedError": "An unexpected error occurred.",
@@ -3031,5 +3031,9 @@
     "httpDestCreateFailed": "Failed to create destination",
     "followRedirects": "Follow Redirects",
     "followRedirectsDescription": "Automatically follow HTTP redirects for requests.",
-    "alertingErrorWebhookUrl": "Please enter a valid URL for the webhook."
+    "alertingErrorWebhookUrl": "Please enter a valid URL for the webhook.",
+    "healthCheckStrategyHttp": "Validates connectivity and checks the HTTP response status.",
+    "healthCheckStrategyTcp": "Verifies TCP connectivity only, without inspecting the response.",
+    "healthCheckStrategySnmp": "Makes an SNMP get request to check the health of network devices and infrastructure.",
+    "healthCheckStrategyIcmp": "Uses ICMP echo requests (pings) to check if a resource is reachable and responsive."
 }

server/lib/billing/tierMatrix.ts

@@ -21,7 +21,9 @@ export enum TierFeature {
     SiteProvisioningKeys = "siteProvisioningKeys", // handle downgrade by revoking keys if needed
     SIEM = "siem", // handle downgrade by disabling SIEM integrations
     HTTPPrivateResources = "httpPrivateResources", // handle downgrade by disabling HTTP private resources
-    DomainNamespaces = "domainNamespaces" // handle downgrade by removing custom domain namespaces
+    DomainNamespaces = "domainNamespaces", // handle downgrade by removing custom domain namespaces
+    StandaloneHealthChecks = "standaloneHealthChecks",
+    AlertingRules = "alertingRules"
 }
 
 export const tierMatrix: Record<TierFeature, Tier[]> = {
@@ -60,5 +62,7 @@ export const tierMatrix: Record<TierFeature, Tier[]> = {
     [TierFeature.SiteProvisioningKeys]: ["tier3", "enterprise"],
     [TierFeature.SIEM]: ["enterprise"],
     [TierFeature.HTTPPrivateResources]: ["tier3", "enterprise"],
-    [TierFeature.DomainNamespaces]: ["tier1", "tier2", "tier3", "enterprise"]
+    [TierFeature.DomainNamespaces]: ["tier1", "tier2", "tier3", "enterprise"],
+    [TierFeature.StandaloneHealthChecks]: ["tier2", "tier3", "enterprise"],
+    [TierFeature.AlertingRules]: ["tier2", "tier3", "enterprise"]
 };

src/app/[orgId]/settings/alerting/[ruleId]/page.tsx

@@ -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}
         />
     );
 }

src/app/[orgId]/settings/alerting/create/page.tsx

@@ -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}
         />
     );
 }

src/app/[orgId]/settings/logs/streaming/page.tsx

@@ -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>
+        </>
     );
 }
 

src/components/AlertingRulesTable.tsx

@@ -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}

src/components/HealthCheckFormFields.tsx

@@ -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",
+                                                id: "http",
-                                                    title: "HTTP",
+                                                title: "HTTP",
-                                                    description: "Validates connectivity and checks the HTTP response status."
+                                                description: t("healthCheckStrategyHttp")
-                                                },
+                                            },
-                                                {
+                                            {
-                                                    id: "tcp",
+                                                id: "tcp",
-                                                    title: "TCP",
+                                                title: "TCP",
-                                                    description: "Verifies TCP connectivity only, without inspecting the response."
+                                                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;
+                                                    const value =
-                                                    handleChange("hcPort", value, field.onChange);
+                                                        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="http">
-                                                <SelectItem value="https">HTTPS</SelectItem>
+                                                    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;
+                                                    const value =
-                                                    handleChange("hcPort", value, field.onChange);
+                                                        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="GET">
-                                                <SelectItem value="POST">POST</SelectItem>
+                                                    GET
-                                                <SelectItem value="HEAD">HEAD</SelectItem>
+                                                </SelectItem>
-                                                <SelectItem value="PUT">PUT</SelectItem>
+                                                <SelectItem value="POST">
-                                                <SelectItem value="DELETE">DELETE</SelectItem>
+                                                    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);
+                                                    const value = parseInt(
-                                                    handleChange("hcTimeout", value, field.onChange);
+                                                        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);
+                                                const value = parseInt(
-                                                handleChange("hcTimeout", value, field.onChange);
+                                                    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);
+                                                const value = parseInt(
-                                                handleChange("hcInterval", value, field.onChange);
+                                                    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 val =
-                                                        const value = val ? parseInt(val) : null;
+                                                            e.target.value;
-                                                        handleChange("hcStatus", value, field.onChange);
+                                                        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}

src/components/HealthChecksTable.tsx

@@ -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")}

src/components/alert-rule-editor/AlertRuleGraphEditor.tsx

@@ -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">
+                        <CardContent className="p-4 sm:p-5 sm:px-6 pt-0">
-                                <div className="space-y-6">
+                        <fieldset
-                                    {selectedStep === "source" && (
+                            disabled={disabled}
-                                        <AlertRuleSourceFields
+                            className={disabled ? "opacity-50 pointer-events-none" : ""}
-                                            orgId={orgId}
+                        >
-                                            control={form.control}
+                        <div className="space-y-6">
-                                        />
+                            {selectedStep === "source" && (
-                                    )}
+                                <AlertRuleSourceFields
-                                    {selectedStep === "trigger" && (
+                                    orgId={orgId}
-                                        <AlertRuleTriggerFields
+                                    control={form.control}
-                                            control={form.control}
+                                />
-                                        />
+                            )}
-                                    )}
+                            {selectedStep === "trigger" && (
-                                    {isActionsSidebar && (
+                                <AlertRuleTriggerFields
-                                        <div className="space-y-4">
+                                    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>