3f98467ba5
Status filter now parses comma-separated values into SQL IN clause instead of exact match, so filtering by multiple statuses works. Added GET /api/v1/search/stats returning P99 latency (last hour) and active execution count, wired into the UI stat cards with 10s polling. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
69 lines
2.7 KiB
TypeScript
69 lines
2.7 KiB
TypeScript
import { useSearchExecutions, useExecutionStats } from '../../api/queries/executions';
|
||
import { useExecutionSearch } from './use-execution-search';
|
||
import { StatCard } from '../../components/shared/StatCard';
|
||
import { Pagination } from '../../components/shared/Pagination';
|
||
import { SearchFilters } from './SearchFilters';
|
||
import { ResultsTable } from './ResultsTable';
|
||
import styles from './ExecutionExplorer.module.css';
|
||
|
||
export function ExecutionExplorer() {
|
||
const { toSearchRequest, offset, limit, setOffset } = useExecutionSearch();
|
||
const searchRequest = toSearchRequest();
|
||
const { data, isLoading, isFetching } = useSearchExecutions(searchRequest);
|
||
const { data: stats } = useExecutionStats();
|
||
|
||
const total = data?.total ?? 0;
|
||
const results = data?.data ?? [];
|
||
|
||
// Derive stats from current search results
|
||
const failedCount = results.filter((r) => r.status === 'FAILED').length;
|
||
const avgDuration = results.length > 0
|
||
? Math.round(results.reduce((sum, r) => sum + r.durationMs, 0) / results.length)
|
||
: 0;
|
||
|
||
const showFrom = total > 0 ? offset + 1 : 0;
|
||
const showTo = Math.min(offset + limit, total);
|
||
|
||
return (
|
||
<>
|
||
{/* Page Header */}
|
||
<div className={`${styles.pageHeader} animate-in`}>
|
||
<div>
|
||
<h1>Transaction Explorer</h1>
|
||
<div className={styles.subtitle}>Search and analyze route executions</div>
|
||
</div>
|
||
<div className={styles.liveIndicator}>
|
||
<span className={styles.liveDot} />
|
||
LIVE
|
||
</div>
|
||
</div>
|
||
|
||
{/* Stats Bar */}
|
||
<div className={styles.statsBar}>
|
||
<StatCard label="Total Matches" value={total.toLocaleString()} accent="amber" change={`from current search`} />
|
||
<StatCard label="Avg Duration" value={`${avgDuration}ms`} accent="cyan" />
|
||
<StatCard label="Failed (page)" value={failedCount.toString()} accent="rose" />
|
||
<StatCard label="P99 Latency" value={stats ? `${stats.p99LatencyMs}ms` : '--'} accent="green" change="last hour" />
|
||
<StatCard label="Active Now" value={stats ? stats.activeCount.toString() : '--'} accent="blue" change="running executions" />
|
||
</div>
|
||
|
||
{/* Filters */}
|
||
<SearchFilters />
|
||
|
||
{/* Results Header */}
|
||
<div className={`${styles.resultsHeader} animate-in delay-4`}>
|
||
<span className={styles.resultsCount}>
|
||
Showing <strong>{showFrom}–{showTo}</strong> of <strong>{total.toLocaleString()}</strong> results
|
||
{isFetching && !isLoading && ' · updating...'}
|
||
</span>
|
||
</div>
|
||
|
||
{/* Results Table */}
|
||
<ResultsTable results={results} loading={isLoading} />
|
||
|
||
{/* Pagination */}
|
||
<Pagination total={total} offset={offset} limit={limit} onChange={setOffset} />
|
||
</>
|
||
);
|
||
}
|