improvement(logs): dashboard/logs optimizations and improvements

[emir-karabeg]

Summary

Added dashboard and logs efficiencies and improved the filtering interactions.

Type of Change

• [x] New feature

Testing

Solo.

Checklist

• [x] Code follows project style guidelines
• [x] Self-reviewed my changes
• [ ] Tests added/updated and passing
• [x] No new warnings introduced
• [x] I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Review	Updated (UTC)
docs	Skipped		Dec 17, 2025 1:10am

[greptile-apps[bot]]

Greptile Summary

This PR improves the dashboard and logs pages by optimizing data fetching, adding virtualization for performance, and improving filter interactions. The key changes include:

Major Improvements

• Separated data fetching: Dashboard now uses useDashboardLogs to fetch all logs (non-paginated) for accurate metrics, while the logs list continues to use paginated queries
• Virtualized logs list: Extracted LogsList component with react-window for performant rendering of large datasets
• Unified workflow data source: Logs toolbar now uses workflow registry instead of separate API fetch, ensuring consistency with dashboard
• Better loading states: New Loader component with optional CSS animation replaces inconsistent loading indicators
• Improved filtering UX: Added "Clear filters" button and better responsive layout for filter controls

Architecture Changes

• Dashboard component refactored to compute metrics from logs data prop instead of making separate API calls
• Time segment calculation now includes minimum segment duration (MIN_SEGMENT_MS = 60000) to prevent overly granular buckets
• Metrics API added allTime query parameter to dynamically compute time bounds from actual data

Issues to Address

• Missing dependency: Line 165 in logs.tsx has incomplete useEffect dependency array (missing logDetailQuery)
• Incomplete memo comparison: LogRow memo in logs-list.tsx only checks subset of displayed fields (duration, level, hasPendingPause) but displays other fields (cost, workflow name, trigger) that won't trigger re-renders when changed
• Hardcoded limit: Dashboard logs query uses DASHBOARD_LOGS_LIMIT = 10000 which could cause performance issues or incomplete data for high-volume workspaces

Confidence Score: 3/5

• Generally safe but has logic issues in dependency arrays and memo comparisons that could cause stale data or missed updates
• The refactoring improves architecture and performance significantly, but the incomplete dependency array (logs.tsx:165) and incomplete memo comparison (logs-list.tsx:114-122) are logic bugs that will cause incorrect behavior. The hardcoded 10000 limit is also concerning for scalability. These issues need to be fixed before merging.
• apps/sim/app/workspace/[workspaceId]/logs/logs.tsx (missing dependency), apps/sim/app/workspace/[workspaceId]/logs/components/logs-list/logs-list.tsx (incomplete memo comparison)

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/logs/logs.tsx	Refactored to extract LogsList component and add useDashboardLogs hook for separate dashboard data fetching
apps/sim/hooks/queries/logs.ts	Added useDashboardLogs hook with duplicated time range logic and DASHBOARD_LOGS_LIMIT=10000 for non-paginated fetching
apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/dashboard.tsx	Major refactor to compute metrics from logs prop instead of separate API calls, improving data consistency
apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/logs-toolbar.tsx	Refactored to use workflow registry instead of fetching workflows, added clear filters button and improved UI organization
apps/sim/app/api/workspaces/[id]/metrics/executions/route.ts	Added allTime query param to dynamically compute time bounds from data, with potential issues in fallback logic

Sequence Diagram

sequenceDiagram
    participant User
    participant LogsPage as logs.tsx
    participant FilterStore as filters/store.ts
    participant LogsHook as hooks/logs.ts
    participant DashboardComp as Dashboard
    participant LogsListComp as LogsList
    participant API as /api/logs

    User->>LogsPage: Open logs page
    LogsPage->>FilterStore: initializeFromURL()
    FilterStore->>FilterStore: Parse URL params (timeRange, level, etc.)
    
    User->>LogsPage: Change filters (time, status, workflow)
    LogsPage->>FilterStore: setTimeRange/setLevel/setWorkflowIds
    FilterStore->>FilterStore: syncWithURL() - update URL params
    
    LogsPage->>LogsHook: useLogsList(filters)
    LogsHook->>API: GET /api/logs?params (paginated, limit=50)
    API-->>LogsHook: Return logs page
    LogsHook-->>LogsPage: Return infinite query data
    
    LogsPage->>LogsHook: useDashboardLogs(filters)
    LogsHook->>API: GET /api/logs?params (all logs, limit=10000)
    API-->>LogsHook: Return all logs
    LogsHook-->>LogsPage: Return all logs for metrics
    
    alt Dashboard View
        LogsPage->>DashboardComp: Pass all logs
        DashboardComp->>DashboardComp: Compute time segments from logs
        DashboardComp->>DashboardComp: Build workflow executions with metrics
        DashboardComp->>DashboardComp: Calculate aggregated metrics
        DashboardComp-->>User: Display charts and workflows list
    else Logs View
        LogsPage->>LogsListComp: Pass paginated logs
        LogsListComp->>LogsListComp: Virtualize rows with react-window
        User->>LogsListComp: Scroll near bottom
        LogsListComp->>LogsHook: fetchNextPage()
        LogsHook->>API: GET /api/logs?offset=50
        API-->>LogsHook: Return next page
        LogsListComp-->>User: Display more logs
    end
    
    User->>LogsPage: Toggle live mode
    LogsPage->>LogsHook: Set refetchInterval=5000
    loop Every 5 seconds
        LogsHook->>API: GET /api/logs (refresh data)
        API-->>LogsHook: Return updated logs
        LogsHook-->>LogsPage: Update logs data
    end

[emir-karabeg]

@greptile

[emir-karabeg]

@greptile