Replace outdated react-time-ago (#8255)

Author: jonathanawesome

packages/web/app/package.json

@@ -34,7 +34,6 @@
     "@hookform/resolvers": "3.10.0",
     "@ladle/react": "5.1.1",
     "@monaco-editor/react": "4.8.0-rc.2",
-    "@n1ru4l/react-time-ago": "1.1.0",
     "@pierre/diffs": "1.2.3",
     "@radix-ui/react-accordion": "1.2.2",
     "@radix-ui/react-alert-dialog": "1.1.4",

packages/web/app/src/components/target/alerts/alert-activity-table.tsx

@@ -1,7 +1,7 @@
-import { formatDistanceToNow } from 'date-fns';
 import { ArrowRight } from 'lucide-react';
 import { DataTable } from '@/components/base/data-table/data-table';
 import { BadgeRounded } from '@/components/ui/badge';
+import { TimeAgo } from '@/components/ui/time-ago';
 import { Avatar } from '@/components/v2/avatar';
 import {
   MetricAlertRuleType,
@@ -72,9 +72,10 @@ const COLUMNS = [
     id: 'age',
     header: 'Age',
     cell: ctx => (
-      <span className="text-neutral-12 inline-flex items-center gap-1 font-mono text-[11px]">
-        {formatDistanceToNow(new Date(ctx.row.original.createdAt), { addSuffix: true })}
-      </span>
+      <TimeAgo
+        date={ctx.row.original.createdAt}
+        className="text-neutral-12 font-mono text-[11px]"
+      />
     ),
   }),
   columnHelper.display({

packages/web/app/src/components/target/alerts/alert-conditions-panel.tsx

@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import { formatDistanceToNow } from 'date-fns';
 import { ExternalLink, Info } from 'lucide-react';
 import { Button } from '@/components/base/button/button';
 import { DescriptionList } from '@/components/base/description-list/description-list';
@@ -13,6 +12,7 @@ import {
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
+import { TimeAgo } from '@/components/ui/time-ago';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { Avatar } from '@/components/v2/avatar';
 import {
@@ -135,7 +135,7 @@ export type AlertConditionsPanelProps = {
 function RelativeTimestamp({ iso }: { iso: string }) {
   return (
     <span className="text-neutral-12 inline-flex items-center gap-1 font-mono text-[10px]">
-      {formatDistanceToNow(new Date(iso), { addSuffix: true })}
+      <TimeAgo date={iso} />
       <TooltipProvider delayDuration={100}>
         <Tooltip>
           <TooltipTrigger asChild>

packages/web/app/src/components/target/alerts/alert-events-table.tsx

@@ -1,6 +1,6 @@
-import { formatDistanceToNow } from 'date-fns';
 import { ArrowRight } from 'lucide-react';
 import { DataTable } from '@/components/base/data-table/data-table';
+import { TimeAgo } from '@/components/ui/time-ago';
 import { type MetricAlertRuleState, type MetricAlertRuleType } from '@/gql/graphql';
 import { createColumnHelper } from '@tanstack/react-table';
 import {
@@ -53,9 +53,10 @@ const COLUMNS = [
     id: 'age',
     header: 'Age',
     cell: ctx => (
-      <span className="text-neutral-12 inline-flex items-center gap-1 font-mono text-[11px]">
-        {formatDistanceToNow(new Date(ctx.row.original.createdAt), { addSuffix: true })}
-      </span>
+      <TimeAgo
+        date={ctx.row.original.createdAt}
+        className="text-neutral-12 font-mono text-[11px]"
+      />
     ),
   }),
   columnHelper.display({

packages/web/app/src/components/ui/time-ago.spec.ts

@@ -0,0 +1,57 @@
+import { formatTimeAgo } from './time-ago';
+
+const SECOND = 1000;
+const MINUTE = 60 * SECOND;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+const WEEK = 7 * DAY;
+const MONTH = 30 * DAY;
+const YEAR = 365 * DAY;
+
+// Fixed reference "now"; every case is `now` minus some elapsed time.
+const NOW = new Date('2026-07-23T12:00:00.000Z').getTime();
+const ago = (elapsedMs: number) => formatTimeAgo(new Date(NOW - elapsedMs), NOW);
+
+describe('formatTimeAgo', () => {
+  it('shows "now" under 2 minutes', () => {
+    expect(ago(0)).toBe('now');
+    expect(ago(30 * SECOND)).toBe('now');
+    expect(ago(2 * MINUTE - SECOND)).toBe('now');
+  });
+
+  it('shows minutes from 2m up to an hour', () => {
+    expect(ago(2 * MINUTE)).toBe('2m ago');
+    expect(ago(5 * MINUTE)).toBe('5m ago');
+    expect(ago(HOUR - SECOND)).toBe('59m ago');
+  });
+
+  it('shows hours from 1h up to a day', () => {
+    expect(ago(HOUR)).toBe('1h ago');
+    expect(ago(3 * HOUR)).toBe('3h ago');
+    expect(ago(DAY - SECOND)).toBe('23h ago');
+  });
+
+  it('shows days from 1d up to a week', () => {
+    expect(ago(DAY)).toBe('1d ago');
+    expect(ago(6 * DAY)).toBe('6d ago');
+    expect(ago(WEEK - SECOND)).toBe('6d ago');
+  });
+
+  it('rolls up to weeks from 1w up to a month', () => {
+    expect(ago(WEEK)).toBe('1w ago');
+    expect(ago(3 * WEEK)).toBe('3w ago');
+    expect(ago(MONTH - SECOND)).toBe('4w ago');
+  });
+
+  it('rolls up to months from 1mo up to a year', () => {
+    expect(ago(MONTH)).toBe('1mo ago');
+    expect(ago(2 * MONTH)).toBe('2mo ago');
+    expect(ago(YEAR - SECOND)).toBe('12mo ago');
+  });
+
+  it('rolls up to years past a year, so old dates stay readable', () => {
+    expect(ago(YEAR)).toBe('1y ago');
+    expect(ago(Math.floor(2.5 * YEAR))).toBe('2y ago');
+    expect(ago(5 * YEAR)).toBe('5y ago');
+  });
+});

packages/web/app/src/components/ui/time-ago.tsx

@@ -1,7 +1,45 @@
-import { ReactElement, useMemo } from 'react';
+import { ReactElement, useEffect, useMemo, useState } from 'react';
 import clsx from 'clsx';
 import { format } from 'date-fns';
-import { TimeAgo as ReactTimeAgo } from '@n1ru4l/react-time-ago';
+
+const MINUTE = 60;
+const HOUR = MINUTE * 60;
+const DAY = HOUR * 24;
+const WEEK = DAY * 7;
+const MONTH = DAY * 30;
+const YEAR = DAY * 365;
+
+// Terse relative label ("now" / "5m ago" / "3h ago" / "12d ago"), matching the
+// old @n1ru4l/react-time-ago look, but rolling up past days into w/mo/y so old
+// dates stay readable (e.g. "2y ago" instead of "912d ago"). Months/years use
+// approximate 30/365-day buckets, which is fine at this granularity.
+export function formatTimeAgo(dateObj: Date, now: number): string {
+  const d = (now - dateObj.getTime()) / 1000;
+  if (d < MINUTE * 2) {
+    return 'now';
+  }
+  if (d < HOUR) {
+    return `${Math.floor(d / MINUTE)}m ago`;
+  }
+  if (d < DAY) {
+    return `${Math.floor(d / HOUR)}h ago`;
+  }
+  if (d < WEEK) {
+    return `${Math.floor(d / DAY)}d ago`;
+  }
+  if (d < MONTH) {
+    return `${Math.floor(d / WEEK)}w ago`;
+  }
+  if (d < YEAR) {
+    return `${Math.floor(d / MONTH)}mo ago`;
+  }
+  return `${Math.floor(d / YEAR)}y ago`;
+}
+
+// Re-render cadence for the live label. A fixed 30s tick keeps the
+// minute-granular output feeling live without churning (the finest unit is
+// minutes, so 30s always refreshes at least as often as the label can change).
+const REFRESH_INTERVAL_MS = 30_000;
 
 export const TimeAgo = ({
   date,
@@ -10,6 +48,8 @@ export const TimeAgo = ({
   date?: string;
   className?: string;
 }): ReactElement | null => {
+  const [now, setNow] = useState(() => Date.now());
+
   const { dateObj, formattedDate } = useMemo(() => {
     if (!date) {
       return {};
@@ -19,21 +59,25 @@ export const TimeAgo = ({
     return { dateObj, formattedDate };
   }, [date]);
 
+  useEffect(() => {
+    if (!dateObj) {
+      return;
+    }
+    const id = setInterval(() => setNow(Date.now()), REFRESH_INTERVAL_MS);
+    return () => clearInterval(id);
+  }, [dateObj]);
+
   if (!date || !dateObj) {
     return null;
   }
 
   return (
-    <ReactTimeAgo date={dateObj}>
-      {({ value }) => (
-        <time
-          dateTime={formattedDate}
-          title={formattedDate}
-          className={clsx('cursor-default whitespace-nowrap', className)}
-        >
-          {value}
-        </time>
-      )}
-    </ReactTimeAgo>
+    <time
+      dateTime={formattedDate}
+      title={formattedDate}
+      className={clsx('cursor-default whitespace-nowrap', className)}
+    >
+      {formatTimeAgo(dateObj, now)}
+    </time>
   );
 };

packages/web/app/src/pages/target-alerts-rules.tsx

@@ -1,11 +1,11 @@
 import { useMemo } from 'react';
-import { formatDistanceToNow } from 'date-fns';
 import { ArrowDown, Info } from 'lucide-react';
 import { useQuery } from 'urql';
 import { DataTable } from '@/components/base/data-table/data-table';
 import { PageLead } from '@/components/base/page-lead';
 import { Badge, BadgeRounded } from '@/components/ui/badge';
 import { Spinner } from '@/components/ui/spinner';
+import { TimeAgo } from '@/components/ui/time-ago';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { Avatar } from '@/components/v2/avatar';
 import { graphql } from '@/gql';
@@ -130,11 +130,6 @@ function destinationLabel(channels: ReadonlyArray<{ type: string }>): string {
     .join(', ');
 }
 
-function relativeTime(iso?: string | null): string {
-  if (!iso) return '—';
-  return formatDistanceToNow(new Date(iso), { addSuffix: true });
-}
-
 function SortableHeader({ column, label }: { column: Column<RuleRow, unknown>; label: string }) {
   const sort = column.getIsSorted();
   const arrowOpacity = sort ? 'opacity-100' : 'opacity-30';
@@ -195,7 +190,9 @@ const RULE_COLUMNS: ColumnDef<RuleRow, any>[] = [
       return av - bv;
     },
     cell: info => (
-      <span className="text-neutral-11 font-mono text-xs">{relativeTime(info.getValue())}</span>
+      <span className="text-neutral-11 font-mono text-xs">
+        {info.getValue() ? <TimeAgo date={info.getValue()!} /> : '—'}
+      </span>
     ),
   }),
   columnHelper.accessor('updatedAt', {
@@ -204,7 +201,7 @@ const RULE_COLUMNS: ColumnDef<RuleRow, any>[] = [
       new Date(a.original.updatedAt).getTime() - new Date(b.original.updatedAt).getTime(),
     cell: info => (
       <span className="text-neutral-11 inline-block min-w-[180px] whitespace-nowrap font-mono text-xs">
-        {relativeTime(info.getValue())}
+        {info.getValue() ? <TimeAgo date={info.getValue()} /> : '—'}
       </span>
     ),
   }),

packages/web/app/src/vite-env.d.ts

@@ -2,10 +2,3 @@
 /// <reference types="../.api/types.d.ts" />
 
 declare module 'tailwindcss/colors';
-
-declare module '@n1ru4l/react-time-ago' {
-  export function TimeAgo(props: {
-    date: Date;
-    children: (args: { value: string }) => React.ReactElement;
-  }): React.ReactElement;
-}