add time range filter

Author: alrocar

apps/web/src/components/tools/shared/time-range.tsx

@@ -0,0 +1,52 @@
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { DateRange } from 'react-day-picker'
+import { DateRangePicker } from '@/components/ui/date-range-picker'
+
+interface TimeRangeProps {
+    timeRange: string
+    onTimeRangeChange: (range: string) => void
+    dateRange: DateRange | undefined
+    onDateRangeChange: (range: DateRange | undefined) => void
+    className?: string
+}
+
+export function TimeRange({ 
+    timeRange, 
+    onTimeRangeChange, 
+    dateRange, 
+    onDateRangeChange,
+    className 
+}: TimeRangeProps) {
+    return (
+        <div className={cn("flex items-center gap-2", className)}>
+            <div className="flex gap-1">
+                <Button
+                    variant={timeRange === 'hourly' ? 'default' : 'outline'}
+                    size="sm"
+                    onClick={() => onTimeRangeChange('hourly')}
+                >
+                    Hourly
+                </Button>
+                <Button
+                    variant={timeRange === 'daily' ? 'default' : 'outline'}
+                    size="sm"
+                    onClick={() => onTimeRangeChange('daily')}
+                >
+                    Daily
+                </Button>
+                <Button
+                    variant={timeRange === 'monthly' ? 'default' : 'outline'}
+                    size="sm"
+                    onClick={() => onTimeRangeChange('monthly')}
+                >
+                    Monthly
+                </Button>
+            </div>
+            <DateRangePicker
+                initialDateRange={dateRange}
+                onChange={onDateRangeChange}
+            />
+        </div>
+    )
+} 

apps/web/src/components/tools/vercel_logs/dashboard.tsx

@@ -9,6 +9,10 @@ import { CacheStatsChart } from './cache-stats-chart'
 import { ResponseTimesChart } from './response-times-chart'
 import { TopPathsTable } from './top-paths-table'
 import { VercelFilters } from './filters'
+import { TimeRange } from '../shared/time-range'
+import { format } from 'date-fns'
+import { addDays } from 'date-fns'
+import { DateRange } from 'react-day-picker'
 
 export default function VercelLogsDashboard() {
     const [token] = useQueryState('token')
@@ -30,6 +34,11 @@ export default function VercelLogsDashboard() {
     const [cacheStatsData, setCacheStatsData] = useState<any[]>([])
     const [topPathsPage, setTopPathsPage] = useState(0)
     const [topPathsLoading, setTopPathsLoading] = useState(false)
+    const [timeRange, setTimeRange] = useState('daily')
+    const [dateRange, setDateRange] = useState<DateRange>({
+        from: addDays(new Date(), -7),
+        to: new Date()
+    })
 
     const fetchTopPaths = async () => {
         if (!token) return
@@ -63,7 +72,10 @@ export default function VercelLogsDashboard() {
             host,
             project,
             event_type: eventType,
-            source
+            source,
+            time_range: timeRange,
+            ...(dateRange?.from && { date_from: format(dateRange.from, 'yyyy-MM-dd HH:mm:ss') }),
+            ...(dateRange?.to && { date_to: format(dateRange.to, 'yyyy-MM-dd 23:59:59') })
         }
 
         try {
@@ -93,28 +105,37 @@ export default function VercelLogsDashboard() {
 
     useEffect(() => {
         fetchMetrics()
-    }, [token, environment, host, project, eventType, source])
+    }, [token, environment, host, project, eventType, source, timeRange, dateRange])
 
     useEffect(() => {
         fetchTopPaths()
-    }, [token, environment, host, project, eventType, source, topPathsPage])
+    }, [token, environment, host, project, eventType, source, topPathsPage, timeRange, dateRange])
 
     return (
         <div className="space-y-8">
-            <VercelFilters 
-                token={token ?? ''} 
-                className="mb-8"
-                environment={environment}
-                host={host}
-                project={project}
-                eventType={eventType}
-                source={source}
-                onEnvironmentChange={setEnvironment}
-                onHostChange={setHost}
-                onProjectChange={setProject}
-                onEventTypeChange={setEventType}
-                onSourceChange={setSource}
-            />
+            <div className="flex justify-between items-start">
+                <VercelFilters 
+                    token={token ?? ''} 
+                    className="mb-8"
+                    environment={environment}
+                    host={host}
+                    project={project}
+                    eventType={eventType}
+                    source={source}
+                    onEnvironmentChange={setEnvironment}
+                    onHostChange={setHost}
+                    onProjectChange={setProject}
+                    onEventTypeChange={setEventType}
+                    onSourceChange={setSource}
+                />
+                <TimeRange
+                    timeRange={timeRange}
+                    onTimeRangeChange={setTimeRange}
+                    dateRange={dateRange}
+                    onDateRangeChange={(range) => setDateRange(range || { from: new Date(), to: addDays(new Date(), 7) })}
+                    className="mb-8"
+                />
+            </div>
             {/* Metrics Row */}
             <div className="grid gap-4 md:grid-cols-3">
                 <Card>

tinybird/pipes/vercel_cache_stats.pipe

@@ -6,7 +6,18 @@ NODE cache_stats
 SQL >
     %
     SELECT 
-        toStartOfHour(event_time) as hour,
+        {% if defined(time_range) %}
+            {% if time_range == 'monthly' %}
+                toStartOfMonth(event_time)
+            {% elif time_range == 'daily' %}
+                toDate(event_time)
+            {% else %}
+                toStartOfHour(event_time)
+            {% end %}
+        {% else %}
+            toDate(event_time)
+        {% end %}
+        as hour,
         count() as total_requests,
         countIf(event.proxy.vercelCache = 'HIT') as cache_hits,
         round(countIf(event.proxy.vercelCache = 'HIT') * 100.0 / count(), 2) as hit_rate

tinybird/pipes/vercel_errors.pipe

@@ -6,7 +6,18 @@ NODE errors_over_time
 SQL >
     %
     SELECT 
-        toStartOfHour(event_time) as hour,
+        {% if defined(time_range) %}
+            {% if time_range == 'monthly' %}
+                toStartOfMonth(event_time)
+            {% elif time_range == 'daily' %}
+                toDate(event_time)
+            {% else %}
+                toStartOfHour(event_time)
+            {% end %}
+        {% else %}
+            toDate(event_time)
+        {% end %}
+        as hour,
         countIf(event.proxy.statusCode::Int32 >= 400) as error_count,
         count() as total_requests,
         round(countIf(event.proxy.statusCode::Int32 >= 400) * 100.0 / count(), 2) as error_rate

tinybird/pipes/vercel_response_times.pipe

@@ -6,7 +6,18 @@ NODE response_times
 SQL >
     %
     SELECT 
-        toStartOfHour(event_time) as hour,
+        {% if defined(time_range) %}
+            {% if time_range == 'monthly' %}
+                toStartOfMonth(event_time)
+            {% elif time_range == 'daily' %}
+                toDate(event_time)
+            {% else %}
+                toStartOfHour(event_time)
+            {% end %}
+        {% else %}
+            toDate(event_time)
+        {% end %}
+        as hour,
         round(avg(toFloat64OrZero(duration)), 2) as avg_duration,
         round(quantile(0.95)(toFloat64OrZero(duration)), 2) as p95_duration,
         round(max(toFloat64OrZero(duration)), 2) as max_duration