Basic time filter limiting implemented

Author: matt-aitken

apps/webapp/app/components/runs/v3/SharedFilters.tsx

@@ -4,36 +4,31 @@ import {
   endOfDay,
   endOfMonth,
   endOfWeek,
-  isSaturday,
-  isSunday,
-  previousSaturday,
   startOfDay,
   startOfMonth,
   startOfWeek,
-  startOfYear,
   subDays,
-  subMonths,
-  subWeeks,
+  subWeeks
 } from "date-fns";
 import parse from "parse-duration";
 import { startTransition, useCallback, useEffect, useState, type ReactNode } from "react";
+import simplur from "simplur";
 import { AppliedFilter } from "~/components/primitives/AppliedFilter";
+import { Callout } from "~/components/primitives/Callout";
 import { DateTime } from "~/components/primitives/DateTime";
 import { DateTimePicker } from "~/components/primitives/DateTimePicker";
 import { Label } from "~/components/primitives/Label";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { RadioButtonCircle } from "~/components/primitives/RadioButton";
 import { ComboboxProvider, SelectPopover, SelectProvider } from "~/components/primitives/Select";
+import { useOptionalOrganization } from "~/hooks/useOrganizations";
 import { useSearchParams } from "~/hooks/useSearchParam";
 import { type ShortcutDefinition } from "~/hooks/useShortcutKeys";
 import { cn } from "~/utils/cn";
-import { Button } from "../../primitives/Buttons";
+import { organizationBillingPath } from "~/utils/pathBuilder";
+import { Button, LinkButton } from "../../primitives/Buttons";
 import { filterIcon } from "./RunFilters";
 
-export type DisplayableEnvironment = Pick<RuntimeEnvironment, "type" | "id"> & {
-  userName?: string;
-};
-
 export function FilterMenuProvider({
   children,
   onClose,
@@ -128,6 +123,22 @@ function parsePeriodString(period: string): { value: number; unit: string } | nu
   return null;
 }
 
+const MS_PER_DAY = 1000 * 60 * 60 * 24;
+
+// Convert a period string to days using parse-duration
+function periodToDays(period: string): number {
+  const ms = parse(period);
+  if (!ms) return 0;
+  return ms / MS_PER_DAY;
+}
+
+// Calculate the number of days a date range spans from now
+function dateRangeToDays(from?: Date): number {
+  if (!from) return 0;
+  const now = new Date();
+  return Math.ceil((now.getTime() - from.getTime()) / MS_PER_DAY);
+}
+
 const DEFAULT_PERIOD = "7d";
 const defaultPeriodMs = parse(DEFAULT_PERIOD);
 if (!defaultPeriodMs) {
@@ -292,6 +303,8 @@ export interface TimeFilterProps {
   applyShortcut?: ShortcutDefinition | undefined;
   /** Callback when the user applies a time filter selection, receives the applied values */
   onValueChange?: (values: TimeFilterApplyValues) => void;
+  /** When set an upgrade message will be shown if you select a period further back than this number of days */
+  maxPeriodDays?: number;
 }
 
 export function TimeFilter({
@@ -303,6 +316,7 @@ export function TimeFilter({
   hideLabel = false,
   applyShortcut,
   onValueChange,
+  maxPeriodDays,
 }: TimeFilterProps = {}) {
   const { value } = useSearchParams();
   const periodValue = period ?? value("period");
@@ -339,6 +353,7 @@ export function TimeFilter({
           labelName={labelName}
           applyShortcut={applyShortcut}
           onValueChange={onValueChange}
+          maxPeriodDays={maxPeriodDays}
         />
       )}
     </FilterMenuProvider>
@@ -368,7 +383,7 @@ export function TimeDropdown({
   applyShortcut,
   onApply,
   onValueChange,
-  maxPeriodDays
+  maxPeriodDays,
 }: {
   trigger: ReactNode;
   period?: string;
@@ -383,6 +398,7 @@ export function TimeDropdown({
   /** When set an upgrade message will be shown if you select a period further back than this number of days */
   maxPeriodDays?: number;
 }) {
+  const organization = useOptionalOrganization();
   const [open, setOpen] = useState<boolean | undefined>();
   const { replace } = useSearchParams();
   const [fromValue, setFromValue] = useState(from);
@@ -422,9 +438,28 @@ export function TimeDropdown({
     return !isNaN(value) && value > 0;
   })();
 
+  // Calculate if the current selection exceeds maxPeriodDays
+  const exceedsMaxPeriod = (() => {
+    if (!maxPeriodDays) return false;
+
+    if (activeSection === "duration") {
+      const periodToCheck = selectedPeriod === "custom" ? `${customValue}${customUnit}` : selectedPeriod;
+      if (!periodToCheck) return false;
+      return periodToDays(periodToCheck) > maxPeriodDays;
+    } else {
+      // For date range, check if fromValue is further back than maxPeriodDays
+      return dateRangeToDays(fromValue) > maxPeriodDays;
+    }
+  })();
+
   const applySelection = useCallback(() => {
     setValidationError(null);
 
+    if (exceedsMaxPeriod) {
+      setValidationError(`Your plan allows a maximum of ${maxPeriodDays} days. Upgrade for longer retention.`);
+      return;
+    }
+
     if (activeSection === "duration") {
       // Validate custom duration
       if (selectedPeriod === "custom" && !isCustomDurationValid) {
@@ -759,6 +794,17 @@ export function TimeDropdown({
             </div>
           </div>
 
+          {/* Upgrade callout when exceeding maxPeriodDays */}
+          {exceedsMaxPeriod && organization && (
+            <Callout
+              variant="pricing"
+              cta={<LinkButton variant="primary/small" to={organizationBillingPath({ slug: organization.slug })}>Upgrade</LinkButton>}
+              className="items-center"
+            >
+              {simplur`Your plan allows a maximum of ${maxPeriodDays} day[|s].`}
+            </Callout>
+          )}
+
           {/* Action buttons */}
           <div className="flex justify-between gap-1 border-t border-grid-bright px-0 pt-3">
             <Button
@@ -786,6 +832,7 @@ export function TimeDropdown({
                 applySelection();
               }}
               type="button"
+              disabled={exceedsMaxPeriod}
             >
               Apply
             </Button>

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx

@@ -72,6 +72,7 @@ import parse from "parse-duration";
 import { SimpleTooltip } from "~/components/primitives/Tooltip";
 import { Dialog, DialogContent, DialogHeader, DialogPortal, DialogTrigger } from "~/components/primitives/Dialog";
 import { DialogOverlay } from "@radix-ui/react-dialog";
+import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route";
 
 /** Convert a Date or ISO string to ISO string format */
 function toISOString(value: Date | string): string {
@@ -388,6 +389,8 @@ const QueryEditorForm = forwardRef<
   const [scope, setScope] = useState<QueryScope>(defaultScope);
   const formRef = useRef<HTMLFormElement>(null);
   const prevFetcherState = useRef(fetcher.state);
+  const plan = useCurrentPlan();
+  const maxPeriodDays = plan?.v3Subscription?.plan?.limits?.queryPeriodDays?.number;
 
   // Notify parent when query is submitted (for title generation)
   useEffect(() => {
@@ -509,6 +512,7 @@ const QueryEditorForm = forwardRef<
                   fetcher.submit(formRef.current);
                 }
               }}
+              maxPeriodDays={maxPeriodDays}
             />
           )}
           <Button

apps/webapp/package.json

@@ -121,7 +121,7 @@
     "@trigger.dev/core": "workspace:*",
     "@trigger.dev/database": "workspace:*",
     "@trigger.dev/otlp-importer": "workspace:*",
-    "@trigger.dev/platform": "1.0.21",
+    "@trigger.dev/platform": "1.0.22",
     "@trigger.dev/redis-worker": "workspace:*",
     "@trigger.dev/sdk": "workspace:*",
     "@types/pg": "8.6.6",