Filtering History

Filter Options

Date Range Picker

The date range filter uses a calendar picker component. Preset ranges are available as quick options:

• Today
• Yesterday
• This Week
• Last 7 Days
• This Month
• Last 30 Days
• Custom Range — pick any two dates

URL-Synced Filter State

All active filters are reflected in the browser URL as query parameters. This means:

• You can bookmark a filtered view — e.g., "Failed executions this month"
• You can share the URL with a colleague and they see the same filtered list (subject to their own data access)
• Pressing Back restores the previous filter state
• Page refresh preserves the current filters

// Example URL with filters applied
/workdesk/history?status=failed&from=2026-05-01&to=2026-05-31&workflowName=payroll

// React hook — sync filter state with URL
import { useSearchParams } from 'react-router-dom';
import { useHistoryFilterStore } from '../stores/historyFilterStore';

function useHistoryFilters() {
  const [searchParams, setSearchParams] = useSearchParams();
  const store = useHistoryFilterStore();

  // Initialize from URL on mount
  useEffect(() => {
    store.setStatus(searchParams.get('status') ?? 'all');
    store.setFrom(searchParams.get('from') ?? '');
    store.setTo(searchParams.get('to') ?? '');
    store.setWorkflowName(searchParams.get('workflowName') ?? '');
  }, []);

  // Update URL when filters change
  const applyFilters = (filters: HistoryFilterState) => {
    const params = new URLSearchParams();
    if (filters.status !== 'all') params.set('status', filters.status);
    if (filters.from) params.set('from', filters.from);
    if (filters.to) params.set('to', filters.to);
    if (filters.workflowName) params.set('workflowName', filters.workflowName);
    setSearchParams(params);
  };

  return { ...store, applyFilters };
}