@startsimpli/funnels 0.1.3 → 0.1.5

package/src/components/FunnelRunHistory/FunnelRunHistory.test.tsx

@@ -0,0 +1,323 @@
+/**
+ * FunnelRunHistory Tests
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { FunnelRun, FunnelRunStatus, StageStats } from '../../types';
+import { FunnelApiClient } from '../../api/client';
+
+// Mock API client
+const createMockApiClient = (runs: FunnelRun[] = []) => {
+  return {
+    getFunnelRuns: vi.fn().mockResolvedValue({
+      count: runs.length,
+      next: null,
+      previous: null,
+      results: runs,
+    }),
+    runFunnel: vi.fn().mockResolvedValue({
+      id: 'new-run-id',
+      status: 'pending',
+    }),
+    cancelFunnelRun: vi.fn().mockResolvedValue({
+      id: 'run-id',
+      status: 'cancelled',
+    }),
+  } as unknown as FunnelApiClient;
+};
+
+// Helper to create mock run
+const createMockRun = (
+  overrides?: Partial<FunnelRun>
+): FunnelRun => {
+  const stageStats: Record<string, StageStats> = {
+    'stage-1': {
+      stage_id: 'stage-1',
+      stage_name: 'High ICP Score',
+      input_count: 1000,
+      matched_count: 500,
+      not_matched_count: 500,
+      excluded_count: 0,
+      tagged_count: 0,
+      continued_count: 500,
+      duration_ms: 1000,
+    },
+    'stage-2': {
+      stage_id: 'stage-2',
+      stage_name: 'Frontend Stack',
+      input_count: 500,
+      matched_count: 350,
+      not_matched_count: 150,
+      excluded_count: 0,
+      tagged_count: 0,
+      continued_count: 350,
+      duration_ms: 800,
+    },
+  };
+
+  return {
+    id: 'run-123',
+    funnel_id: 'funnel-456',
+    status: 'completed',
+    trigger_type: 'manual',
+    triggered_by: 'user-789',
+    started_at: new Date().toISOString(),
+    completed_at: new Date().toISOString(),
+    duration_ms: 2300,
+    total_input: 1000,
+    total_matched: 350,
+    total_excluded: 150,
+    total_tagged: 0,
+    stage_stats: stageStats,
+    ...overrides,
+  };
+};
+
+describe('FunnelRunHistory Component Logic', () => {
+  let mockApiClient: FunnelApiClient;
+
+  beforeEach(() => {
+    mockApiClient = createMockApiClient([]);
+  });
+
+  describe('loadRuns', () => {
+    it('should fetch runs from API', async () => {
+      const runs = [createMockRun()];
+      mockApiClient = createMockApiClient(runs);
+
+      const getFunnelRuns = mockApiClient.getFunnelRuns as any;
+      await getFunnelRuns('funnel-456');
+
+      expect(getFunnelRuns).toHaveBeenCalledWith('funnel-456');
+    });
+
+    it('should apply status filter', async () => {
+      const getFunnelRuns = mockApiClient.getFunnelRuns as any;
+
+      await getFunnelRuns('funnel-456', {
+        status: 'completed',
+        page: 1,
+        page_size: 10,
+        ordering: '-started_at',
+      });
+
+      expect(getFunnelRuns).toHaveBeenCalledWith('funnel-456', {
+        status: 'completed',
+        page: 1,
+        page_size: 10,
+        ordering: '-started_at',
+      });
+    });
+
+    it('should apply trigger type filter', async () => {
+      const getFunnelRuns = mockApiClient.getFunnelRuns as any;
+
+      await getFunnelRuns('funnel-456', {
+        trigger_type: 'scheduled',
+        page: 1,
+        page_size: 10,
+        ordering: '-started_at',
+      });
+
+      expect(getFunnelRuns).toHaveBeenCalledWith('funnel-456', {
+        trigger_type: 'scheduled',
+        page: 1,
+        page_size: 10,
+        ordering: '-started_at',
+      });
+    });
+  });
+
+  describe('handleReRun', () => {
+    it('should trigger new run with metadata', async () => {
+      const run = createMockRun({ id: 'run-123' });
+      const runFunnel = mockApiClient.runFunnel as any;
+
+      await runFunnel('funnel-456', {
+        trigger_type: 'manual',
+        metadata: { re_run_of: 'run-123' },
+      });
+
+      expect(runFunnel).toHaveBeenCalledWith('funnel-456', {
+        trigger_type: 'manual',
+        metadata: { re_run_of: 'run-123' },
+      });
+    });
+  });
+
+  describe('handleCancel', () => {
+    it('should cancel running job', async () => {
+      const run = createMockRun({ id: 'run-123', status: 'running' });
+      const cancelFunnelRun = mockApiClient.cancelFunnelRun as any;
+
+      await cancelFunnelRun('run-123');
+
+      expect(cancelFunnelRun).toHaveBeenCalledWith('run-123');
+    });
+  });
+
+  describe('pagination', () => {
+    it('should calculate total pages correctly', () => {
+      const total = 47;
+      const pageSize = 10;
+      const totalPages = Math.ceil(total / pageSize);
+      expect(totalPages).toBe(5);
+    });
+
+    it('should calculate start and end indices', () => {
+      const page = 2;
+      const pageSize = 10;
+      const total = 47;
+
+      const startIndex = (page - 1) * pageSize + 1;
+      const endIndex = Math.min(page * pageSize, total);
+
+      expect(startIndex).toBe(11);
+      expect(endIndex).toBe(20);
+    });
+  });
+
+  describe('auto-refresh', () => {
+    it('should detect active runs', () => {
+      const runs = [
+        createMockRun({ status: 'completed' }),
+        createMockRun({ status: 'running' }),
+      ];
+
+      const hasActiveRuns = runs.some(
+        (r) => r.status === 'pending' || r.status === 'running'
+      );
+
+      expect(hasActiveRuns).toBe(true);
+    });
+
+    it('should not refresh when no active runs', () => {
+      const runs = [
+        createMockRun({ status: 'completed' }),
+        createMockRun({ status: 'failed' }),
+      ];
+
+      const hasActiveRuns = runs.some(
+        (r) => r.status === 'pending' || r.status === 'running'
+      );
+
+      expect(hasActiveRuns).toBe(false);
+    });
+  });
+});
+
+describe('Run Status Scenarios', () => {
+  it('should handle completed run', () => {
+    const run = createMockRun({
+      status: 'completed',
+      total_input: 1000,
+      total_matched: 235,
+    });
+
+    expect(run.status).toBe('completed');
+    expect(run.total_matched).toBe(235);
+  });
+
+  it('should handle failed run', () => {
+    const run = createMockRun({
+      status: 'failed',
+      error: 'Database connection timeout',
+      total_matched: 0,
+    });
+
+    expect(run.status).toBe('failed');
+    expect(run.error).toBe('Database connection timeout');
+  });
+
+  it('should handle running run', () => {
+    const run = createMockRun({
+      status: 'running',
+      completed_at: undefined,
+      duration_ms: undefined,
+    });
+
+    expect(run.status).toBe('running');
+    expect(run.completed_at).toBeUndefined();
+  });
+
+  it('should handle pending run', () => {
+    const run = createMockRun({
+      status: 'pending',
+      started_at: new Date().toISOString(),
+      completed_at: undefined,
+    });
+
+    expect(run.status).toBe('pending');
+  });
+
+  it('should handle cancelled run', () => {
+    const run = createMockRun({
+      status: 'cancelled',
+    });
+
+    expect(run.status).toBe('cancelled');
+  });
+});
+
+describe('Filter Scenarios', () => {
+  it('should filter by completed status', () => {
+    const runs = [
+      createMockRun({ id: '1', status: 'completed' }),
+      createMockRun({ id: '2', status: 'failed' }),
+      createMockRun({ id: '3', status: 'completed' }),
+    ];
+
+    const filtered = runs.filter((r) => r.status === 'completed');
+    expect(filtered).toHaveLength(2);
+  });
+
+  it('should filter by manual trigger', () => {
+    const runs = [
+      createMockRun({ id: '1', trigger_type: 'manual' }),
+      createMockRun({ id: '2', trigger_type: 'scheduled' }),
+      createMockRun({ id: '3', trigger_type: 'manual' }),
+    ];
+
+    const filtered = runs.filter((r) => r.trigger_type === 'manual');
+    expect(filtered).toHaveLength(2);
+  });
+});
+
+describe('Edge Cases', () => {
+  it('should handle empty runs', () => {
+    const runs: FunnelRun[] = [];
+    expect(runs).toHaveLength(0);
+  });
+
+  it('should handle run with no stage stats', () => {
+    const run = createMockRun({
+      stage_stats: {},
+    });
+
+    const stageStatsArray = Object.values(run.stage_stats);
+    expect(stageStatsArray).toHaveLength(0);
+  });
+
+  it('should handle run with zero match rate', () => {
+    const run = createMockRun({
+      total_input: 1000,
+      total_matched: 0,
+    });
+
+    const matchRate = run.total_input > 0
+      ? Math.round((run.total_matched / run.total_input) * 100)
+      : 0;
+
+    expect(matchRate).toBe(0);
+  });
+
+  it('should handle run with 100% match rate', () => {
+    const run = createMockRun({
+      total_input: 1000,
+      total_matched: 1000,
+    });
+
+    const matchRate = Math.round((run.total_matched / run.total_input) * 100);
+    expect(matchRate).toBe(100);
+  });
+});

package/src/components/FunnelRunHistory/FunnelRunHistory.tsx

@@ -0,0 +1,329 @@
+/**
+ * FunnelRunHistory Component
+ *
+ * Displays execution history for a funnel with filtering, sorting, and pagination.
+ *
+ * Design Goal:
+ * Users should be able to quickly scan run history, filter by status/trigger/date,
+ * view detailed breakdowns, and take actions (re-run, view results, cancel).
+ *
+ * Visual Hierarchy:
+ * - Header with title and refresh controls
+ * - Filter bar for narrowing results
+ * - Table showing run history (sorted by date by default)
+ * - Pagination controls
+ * - Details modal for deep dive
+ *
+ * Interaction Notes:
+ * - Auto-refresh when active runs exist (every 5 seconds)
+ * - Click row to view details
+ * - Action dropdown for quick actions
+ * - Filters apply immediately
+ * - Pagination loads new data
+ *
+ * Responsive Behavior:
+ * - Desktop: Full table with all columns
+ * - Tablet: Hide duration and trigger columns
+ * - Mobile: Card-based layout (responsive table variant)
+ *
+ * Accessibility:
+ * - Keyboard navigation throughout
+ * - ARIA labels for screen readers
+ * - Loading states announced
+ * - Error states clearly communicated
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+import { FunnelRun } from '../../types';
+import { FunnelApiClient } from '../../api/client';
+import { RunFilters } from './RunFilters';
+import { RunRow } from './RunRow';
+import { RunDetailsModal } from './RunDetailsModal';
+import { RunFilters as RunFiltersType, Pagination } from './types';
+
+interface FunnelRunHistoryProps {
+  funnelId: string;
+  apiClient: FunnelApiClient;
+  onViewResults?: (run: FunnelRun) => void;
+  className?: string;
+}
+
+export function FunnelRunHistory({
+  funnelId,
+  apiClient,
+  onViewResults,
+  className = '',
+}: FunnelRunHistoryProps) {
+  // State
+  const [runs, setRuns] = useState<FunnelRun[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedRun, setSelectedRun] = useState<FunnelRun | null>(null);
+  const [filters, setFilters] = useState<RunFiltersType>({
+    status: 'all',
+    trigger_type: 'all',
+    date_range: 'month',
+  });
+  const [pagination, setPagination] = useState<Pagination>({
+    page: 1,
+    page_size: 10,
+    total: 0,
+  });
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  // Load runs
+  const loadRuns = useCallback(async () => {
+    try {
+      setError(null);
+      const params: any = {
+        page: pagination.page,
+        page_size: pagination.page_size,
+        ordering: '-started_at', // Most recent first
+      };
+
+      // Add filters
+      if (filters.status && filters.status !== 'all') {
+        params.status = filters.status;
+      }
+      if (filters.trigger_type && filters.trigger_type !== 'all') {
+        params.trigger_type = filters.trigger_type;
+      }
+
+      const response = await apiClient.getFunnelRuns(funnelId, params);
+
+      setRuns(response.results);
+      setPagination((prev) => ({
+        ...prev,
+        total: response.count,
+      }));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load runs');
+      console.error('Failed to load funnel runs:', err);
+    } finally {
+      setIsLoading(false);
+      setIsRefreshing(false);
+    }
+  }, [funnelId, apiClient, pagination.page, pagination.page_size, filters]);
+
+  // Load runs on mount and when dependencies change
+  useEffect(() => {
+    loadRuns();
+  }, [loadRuns]);
+
+  // Auto-refresh for active runs
+  useEffect(() => {
+    const hasActiveRuns = runs.some(
+      (r) => r.status === 'pending' || r.status === 'running'
+    );
+
+    if (hasActiveRuns) {
+      const interval = setInterval(() => {
+        setIsRefreshing(true);
+        loadRuns();
+      }, 5000); // Poll every 5 seconds
+
+      return () => clearInterval(interval);
+    }
+  }, [runs, loadRuns]);
+
+  // Manual refresh
+  const handleRefresh = () => {
+    setIsRefreshing(true);
+    loadRuns();
+  };
+
+  // Actions
+  const handleReRun = async (run: FunnelRun) => {
+    try {
+      await apiClient.runFunnel(funnelId, {
+        trigger_type: 'manual',
+        metadata: { re_run_of: run.id },
+      });
+      // Refresh to show new run
+      loadRuns();
+    } catch (err) {
+      console.error('Failed to re-run funnel:', err);
+      alert('Failed to re-run funnel. Please try again.');
+    }
+  };
+
+  const handleCancel = async (run: FunnelRun) => {
+    try {
+      await apiClient.cancelFunnelRun(run.id);
+      // Refresh to show updated status
+      loadRuns();
+    } catch (err) {
+      console.error('Failed to cancel run:', err);
+      alert('Failed to cancel run. Please try again.');
+    }
+  };
+
+  const handleViewResults = (run: FunnelRun) => {
+    if (onViewResults) {
+      onViewResults(run);
+    } else {
+      // Default: open details modal
+      setSelectedRun(run);
+    }
+  };
+
+  // Pagination
+  const totalPages = Math.ceil(pagination.total / pagination.page_size);
+  const canGoBack = pagination.page > 1;
+  const canGoForward = pagination.page < totalPages;
+
+  const handlePreviousPage = () => {
+    if (canGoBack) {
+      setPagination((prev) => ({ ...prev, page: prev.page - 1 }));
+    }
+  };
+
+  const handleNextPage = () => {
+    if (canGoForward) {
+      setPagination((prev) => ({ ...prev, page: prev.page + 1 }));
+    }
+  };
+
+  const startIndex = (pagination.page - 1) * pagination.page_size + 1;
+  const endIndex = Math.min(
+    pagination.page * pagination.page_size,
+    pagination.total
+  );
+
+  return (
+    <div className={`bg-white rounded-lg border border-gray-200 ${className}`}>
+      {/* Header */}
+      <div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
+        <h2 className="text-lg font-semibold text-gray-900">
+          Funnel Run History
+        </h2>
+        <button
+          onClick={handleRefresh}
+          disabled={isRefreshing}
+          className="px-3 py-1.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-blue-500"
+          aria-label="Refresh run history"
+        >
+          <span className={isRefreshing ? 'animate-spin inline-block' : ''}>
+            ↻
+          </span>{' '}
+          Refresh
+        </button>
+      </div>
+
+      {/* Filters */}
+      <RunFilters filters={filters} onFiltersChange={setFilters} />
+
+      {/* Table */}
+      <div className="overflow-x-auto">
+        <table className="w-full">
+          <thead className="bg-gray-50 border-b border-gray-200">
+            <tr>
+              <th className="px-4 py-3 text-left text-xs font-medium text-gray-600 uppercase tracking-wider">
+                Date
+              </th>
+              <th className="px-4 py-3 text-left text-xs font-medium text-gray-600 uppercase tracking-wider">
+                Status
+              </th>
+              <th className="px-4 py-3 text-left text-xs font-medium text-gray-600 uppercase tracking-wider">
+                Trigger
+              </th>
+              <th className="px-4 py-3 text-left text-xs font-medium text-gray-600 uppercase tracking-wider">
+                Duration
+              </th>
+              <th className="px-4 py-3 text-right text-xs font-medium text-gray-600 uppercase tracking-wider">
+                Input
+              </th>
+              <th className="px-4 py-3 text-right text-xs font-medium text-gray-600 uppercase tracking-wider">
+                Matched
+              </th>
+              <th className="px-4 py-3 text-right text-xs font-medium text-gray-600 uppercase tracking-wider">
+                %
+              </th>
+              <th className="px-4 py-3 text-right text-xs font-medium text-gray-600 uppercase tracking-wider">
+                <span className="sr-only">Actions</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {isLoading && runs.length === 0 ? (
+              <tr>
+                <td colSpan={8} className="px-4 py-12 text-center">
+                  <div className="text-gray-500">Loading runs...</div>
+                </td>
+              </tr>
+            ) : error ? (
+              <tr>
+                <td colSpan={8} className="px-4 py-12 text-center">
+                  <div className="text-red-600">Error: {error}</div>
+                  <button
+                    onClick={loadRuns}
+                    className="mt-2 text-sm text-blue-600 hover:text-blue-700 underline"
+                  >
+                    Try again
+                  </button>
+                </td>
+              </tr>
+            ) : runs.length === 0 ? (
+              <tr>
+                <td colSpan={8} className="px-4 py-12 text-center">
+                  <div className="text-gray-500">
+                    No runs found. Run this funnel to see history.
+                  </div>
+                </td>
+              </tr>
+            ) : (
+              runs.map((run) => (
+                <RunRow
+                  key={run.id}
+                  run={run}
+                  onViewDetails={setSelectedRun}
+                  onViewResults={handleViewResults}
+                  onReRun={handleReRun}
+                  onCancel={handleCancel}
+                />
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Pagination */}
+      {runs.length > 0 && (
+        <div className="px-6 py-3 border-t border-gray-200 flex items-center justify-between">
+          <div className="text-sm text-gray-600">
+            Showing {startIndex}-{endIndex} of {pagination.total}
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={handlePreviousPage}
+              disabled={!canGoBack}
+              className="px-3 py-1 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-blue-500"
+              aria-label="Previous page"
+            >
+              ‹
+            </button>
+            <span className="text-sm text-gray-600">
+              Page {pagination.page} of {totalPages}
+            </span>
+            <button
+              onClick={handleNextPage}
+              disabled={!canGoForward}
+              className="px-3 py-1 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-blue-500"
+              aria-label="Next page"
+            >
+              ›
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Details Modal */}
+      <RunDetailsModal
+        run={selectedRun}
+        onClose={() => setSelectedRun(null)}
+        onViewResults={onViewResults}
+        onReRun={handleReRun}
+      />
+    </div>
+  );
+}