use date range filter

n1ru4l · n1ru4l · commit 026e24660bad · 2025-10-07T15:28:12.000+02:00
diff --git a/packages/web/app/src/components/ui/date-range-picker.tsx b/packages/web/app/src/components/ui/date-range-picker.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import { endOfDay, endOfToday, subMonths } from 'date-fns';
+import { endOfDay, endOfToday, formatDate, subMonths } from 'date-fns';
 import { CalendarDays } from 'lucide-react';
 import { DateRange, Matcher } from 'react-day-picker';
 import { DurationUnit, formatDateToString, parse, units } from '@/lib/date-math';
@@ -32,13 +32,6 @@ export interface DateRangePickerProps {
   validUnits?: DurationUnit[];
 }
 
-const formatDate = (date: Date, locale = 'en-us'): string => {
-  return date.toLocaleDateString(locale, {
-    month: 'short',
-    day: 'numeric',
-  });
-};
-
 interface ResolvedDateRange {
   from: Date;
   to: Date;
@@ -51,7 +44,16 @@ export type Preset = {
 };
 
 export function buildDateRangeString(range: ResolvedDateRange, locale = 'en-us'): string {
-  return `${formatDate(range.from, locale)} - ${formatDate(range.to, locale)}`;
+  const fromDate = formatDate(range.from, 'MMM d');
+  const fromTime = formatDate(range.from, 'HH:mm');
+  const toDate = formatDate(range.to, 'MMM d');
+  const toTime = formatDate(range.to, 'HH:mm');
+
+  if (fromDate === toDate) {
+    return `${fromDate}, ${fromTime} - ${toTime}`;
+  }
+
+  return `${fromDate}, ${fromTime} - ${toDate}, ${toTime}`;
 }
 
 function resolveRange(rawFrom: string, rawTo: string): ResolvedDateRange | null {
@@ -88,8 +90,12 @@ export const presetLast1Day: Preset = {
 
 // Define presets
 export const availablePresets: Preset[] = [
+  { name: 'last15m', label: 'Last 15 minutes', range: { from: 'now-15m', to: 'now' } },
   { name: 'last30m', label: 'Last 30 minutes', range: { from: 'now-30m', to: 'now' } },
   { name: 'last1h', label: 'Last 1 hour', range: { from: 'now-1h', to: 'now' } },
+  { name: 'last3h', label: 'Last 3 hours', range: { from: 'now-3h', to: 'now' } },
+  { name: 'last6h', label: 'Last 6 hours', range: { from: 'now-6h', to: 'now' } },
+  { name: 'last12h', label: 'Last 12 hours', range: { from: 'now-12h', to: 'now' } },
   presetLast1Day,
   presetLast7Days,
   { name: 'last14d', label: 'Last 14 days', range: { from: 'now-14d', to: 'now' } },
@@ -314,25 +320,34 @@ export function DateRangePicker(props: DateRangePickerProps): JSX.Element {
         </Button>
       </PopoverTrigger>
       <PopoverContent align={props.align} className="mt-1 flex h-[380px] w-auto p-0">
-        <div className="flex flex-col py-4">
+        <div className="flex flex-col py-2">
           <div className="flex flex-col items-center justify-end gap-2 lg:flex-row lg:items-start">
             <div className="flex flex-col gap-1 pl-3">
-              <div className="mb-2 font-bold">Absolute date range</div>
+              <div className="mb-2 text-sm">Absolute date range</div>
               <div className="space-y-2">
                 <div className="grid w-full max-w-sm items-center gap-1.5">
-                  <Label htmlFor="from">From</Label>
+                  <Label htmlFor="from" className="text-xs text-gray-400">
+                    From
+                  </Label>
                   <div className="flex w-full max-w-sm items-center space-x-2">
-                    <Input
-                      type="text"
-                      id="from"
-                      value={fromValue}
-                      onChange={ev => {
-                        setFromValue(ev.target.value);
-                      }}
-                    />
-                    <Button size="icon" variant="outline" onClick={() => setShowCalendar(true)}>
-                      <CalendarDays className="size-4" />
-                    </Button>
+                    <div className="relative flex w-full">
+                      <Input
+                        type="text"
+                        id="from"
+                        value={fromValue}
+                        onChange={ev => {
+                          setFromValue(ev.target.value);
+                        }}
+                        className="font-mono"
+                      />
+                      <Button
+                        variant="ghost"
+                        className="color-white absolute right-2 top-1/2 size-6 -translate-y-1/2 px-0"
+                        onClick={() => setShowCalendar(true)}
+                      >
+                        <CalendarDays className="size-3.5" />
+                      </Button>
+                    </div>
                   </div>
                   <div className="text-red-500">
                     {hasInvalidUnitRegex?.test(fromValue) ? (
@@ -343,19 +358,28 @@ export function DateRangePicker(props: DateRangePickerProps): JSX.Element {
                   </div>
                 </div>
                 <div className="grid w-full max-w-sm items-center gap-1.5">
-                  <Label htmlFor="to">To</Label>
+                  <Label htmlFor="to" className="text-xs text-gray-400">
+                    To
+                  </Label>
                   <div className="flex w-full max-w-sm items-center space-x-2">
-                    <Input
-                      type="text"
-                      id="to"
-                      value={toValue}
-                      onChange={ev => {
-                        setToValue(ev.target.value);
-                      }}
-                    />
-                    <Button size="icon" variant="outline" onClick={() => setShowCalendar(true)}>
-                      <CalendarDays className="size-4" />
-                    </Button>
+                    <div className="relative flex w-full">
+                      <Input
+                        type="text"
+                        id="to"
+                        value={toValue}
+                        onChange={ev => {
+                          setToValue(ev.target.value);
+                        }}
+                        className="font-mono"
+                      />
+                      <Button
+                        variant="ghost"
+                        className="color-white absolute right-2 top-1/2 size-6 -translate-y-1/2 px-0"
+                        onClick={() => setShowCalendar(true)}
+                      >
+                        <CalendarDays className="size-3.5" />
+                      </Button>
+                    </div>
                   </div>
                   <div className="text-red-500">
                     {hasInvalidUnitRegex?.test(toValue) ? (
@@ -432,7 +456,7 @@ export function DateRangePicker(props: DateRangePickerProps): JSX.Element {
           </div>
         </div>
         {showCalendar && (
-          <div className="absolute left-0 top-0 -translate-x-full">
+          <div className="absolute left-0 top-[4px] -translate-x-full">
             <div className="bg-popover mr-1 rounded-md border p-4">
               <Button
                 variant="ghost"
diff --git a/packages/web/app/src/components/ui/page-content-layout.tsx b/packages/web/app/src/components/ui/page-content-layout.tsx
@@ -53,10 +53,11 @@ type SubPageLayoutHeaderProps = {
   children?: ReactNode;
   subPageTitle?: ReactNode;
   description?: string | ReactNode;
+  sideContent?: ReactNode;
 } & HTMLAttributes<HTMLDivElement>;
 
-const SubPageLayoutHeader = forwardRef<HTMLDivElement, SubPageLayoutHeaderProps>((props, ref) => (
-  <div className="flex flex-row items-center justify-between" ref={ref}>
+const SubPageLayoutHeader = forwardRef<HTMLDivElement, SubPageLayoutHeaderProps>((props, ref) => {
+  const header = (
     <div className="space-y-1.5">
       <CardTitle>{props.subPageTitle}</CardTitle>
       {typeof props.description === 'string' ? (
@@ -65,9 +66,21 @@ const SubPageLayoutHeader = forwardRef<HTMLDivElement, SubPageLayoutHeaderProps>
         props.description
       )}
     </div>
-    <div>{props.children}</div>
-  </div>
-));
+  );
+  return (
+    <div className="flex flex-row items-center justify-between" ref={ref}>
+      {props.sideContent ? (
+        <div className="flex w-full">
+          {header}
+          {props.sideContent}
+        </div>
+      ) : (
+        header
+      )}
+      <div>{props.children}</div>
+    </div>
+  );
+});
 SubPageLayoutHeader.displayName = 'SubPageLayoutHeader';
 
 export { PageLayout, NavLayout, PageLayoutContent, SubPageLayout, SubPageLayoutHeader };
diff --git a/packages/web/app/src/lib/date-math.ts b/packages/web/app/src/lib/date-math.ts
@@ -32,7 +32,7 @@ function unitToDurationKey(unit: DurationUnit): keyof Duration {
   }
 }
 
-const dateStringFormat = 'yyyy-MM-dd';
+const dateStringFormat = 'yyyy-MM-dd HH:mm';
 
 function parseDateString(input: string) {
   try {
diff --git a/packages/web/app/src/pages/target-traces.tsx b/packages/web/app/src/pages/target-traces.tsx
@@ -23,6 +23,7 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from '@/components/ui/chart';
+import { DateRangePicker, presetLast7Days } from '@/components/ui/date-range-picker';
 import { Meta } from '@/components/ui/meta';
 import { SubPageLayoutHeader } from '@/components/ui/page-content-layout';
 import { QueryError } from '@/components/ui/query-error';
@@ -52,6 +53,7 @@ import {
 } from '@/components/ui/table';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { FragmentType, graphql, useFragment } from '@/gql';
+import { useDateRangeController } from '@/lib/hooks/use-date-range-controller';
 import { cn } from '@/lib/utils';
 import { Link, useNavigate, useRouter } from '@tanstack/react-router';
 import {
@@ -63,18 +65,12 @@ import {
   useReactTable,
 } from '@tanstack/react-table';
 import * as GraphQLSchema from '../gql/graphql';
-import * as dateMath from '../lib/date-math';
 import {
   CopyIconButton,
   formatNanoseconds,
   TraceSheet as ImportedTraceSheet,
 } from './target-trace';
-import {
-  DurationFilter,
-  MultiInputFilter,
-  MultiSelectFilter,
-  TimelineFilter,
-} from './traces/target-traces-filter';
+import { DurationFilter, MultiInputFilter, MultiSelectFilter } from './traces/target-traces-filter';
 
 const chartConfig = {
   ok: {
@@ -154,16 +150,13 @@ const TrafficBucketDiagram = memo(function Traffic(props: TrafficProps) {
     // Ensure left is always before right
     let left = refAreaLeft;
     let right = refAreaRight;
-    const now = new Date();
 
-    if (
-      parseDate(left, 'yyyy-MM-dd', now).getTime() > parseDate(right, 'yyyy-MM-dd', now).getTime()
-    ) {
+    if (new Date(left).getTime() > new Date(right).getTime()) {
       [left, right] = [right, left];
     }
 
     void navigate({
-      search: (prev: any) => ({ ...prev, filter: { ...prev.filter, period: [left, right] } }),
+      search: (prev: any) => ({ ...prev, from: left, to: right }),
     });
 
     setRefAreaLeft(null);
@@ -226,6 +219,7 @@ const TrafficBucketDiagram = memo(function Traffic(props: TrafficProps) {
         />
         <Bar stackId="all" dataKey="ok" fill="var(--color-ok)" name="Ok" />
         <Bar stackId="all" dataKey="error" fill="var(--color-error)" name="Error" />
+        // TODO: hide this if there is no filter declared
         <Bar stackId="all" dataKey="remaining" fill="rgba(170,175,180,0.1)" name="Filtered out" />
         {refAreaLeft && refAreaRight && (
           <ReferenceArea x1={refAreaLeft} x2={refAreaRight} fill="white" fillOpacity={0.2} />
@@ -708,7 +702,6 @@ function LabelWithColor(props: { className: string; children: ReactNode }) {
 }
 
 export const TargetTracesFilterState = z.object({
-  period: z.union([z.tuple([z.string(), z.string()]), z.tuple([])]).default([]),
   duration: z.union([z.tuple([z.number(), z.number()]), z.tuple([])]).default([]),
   'trace.id': z.array(z.string()).default([]),
   'graphql.status': z.array(z.string()).default([]),
@@ -818,7 +811,6 @@ function Filters(
           </Button>
         ) : null}
       </SidebarGroupLabel>
-      <TimelineFilter value={filterSelector('period')} onChange={updateFilter('period')} />
       <DurationFilter value={filterSelector('duration')} onChange={updateFilter('duration')} />
       <MultiInputFilter
         key="trace.id"
@@ -1144,15 +1136,14 @@ const TargetTracesFetchMoreTracesQuery = graphql(`
 function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProps) {
   const targetRef = useTargetReference();
 
-  const period = useMemo(() => {
-    if (!props.filter.period?.length) {
-      return null;
-    }
-    return dateMath.resolveRange({ from: props.filter.period[0], to: props.filter.period[1] });
-  }, [props.filter.period]);
+  const dateRangeController = useDateRangeController({
+    // TODO: ressolve retention from account
+    dataRetentionInDays: 365,
+    defaultPreset: presetLast7Days,
+  });
 
   const filter: GraphQLSchema.TracesFilterInput = {
-    period,
+    period: dateRangeController.resolvedRange,
     duration: {
       min: props.filter.duration?.[0] ?? null,
       max: props.filter.duration?.[1] ?? null,
@@ -1302,10 +1293,17 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
     <div className="py-6">
       <SubPageLayoutHeader
         subPageTitle="Traces"
-        description={
-          <>
-            <CardDescription>Insights into the requests made to your GraphQL API.</CardDescription>
-          </>
+        description="Insights into the requests made to your GraphQL API."
+        sideContent={
+          <div className="ml-auto mr-0">
+            <DateRangePicker
+              validUnits={['y', 'M', 'w', 'd', 'h', 'm']}
+              selectedRange={dateRangeController.selectedPreset.range}
+              startDate={dateRangeController.startDate}
+              align="end"
+              onUpdate={args => dateRangeController.setSelectedPreset(args.preset)}
+            />
+          </div>
         }
       />
       <SidebarProvider className="mt-4">
@@ -1315,7 +1313,7 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
           </SidebarContent>
         </Sidebar>
         <SidebarInset className="bg-transparent">
-          <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div className="flex flex-1 flex-col gap-4 pl-4 pt-0">
             <div>
               <TrafficBucketDiagram buckets={query.data?.target?.tracesStatusBreakdown ?? []} />
             </div>
diff --git a/packages/web/app/src/router.tsx b/packages/web/app/src/router.tsx
@@ -685,7 +685,6 @@ const targetTracesRoute = createRoute({
         'http.url': [],
         'trace.id': [],
         duration: [],
-        period: [],
       } satisfies FilterState,
       sort = {
         id: 'timestamp',

Original file line number	Diff line number	Diff line change
`@@ -32,7 +32,7 @@ function unitToDurationKey(unit: DurationUnit): keyof Duration {`
`32`	`32`	`}`
`33`	`33`	`}`
`34`	`34`
`35`		`-const dateStringFormat = 'yyyy-MM-dd';`
	`35`	`+const dateStringFormat = 'yyyy-MM-dd HH:mm';`
`36`	`36`
`37`	`37`	`function parseDateString(input: string) {`
`38`	`38`	`try {`