68 lines
2.6 KiB
TypeScript
68 lines
2.6 KiB
TypeScript
|
import { useSearchExecutions } 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 total = data?.total ?? 0;
|
|||
|
|
const results = data?.results ?? [];
|
|||
|
|
|
|||
|
|
// 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.duration, 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="--" accent="green" change="stats endpoint coming soon" />
|
|||
|
|
<StatCard label="Active Now" value="--" accent="blue" change="stats endpoint coming soon" />
|
|||
|
|
</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} />
|
|||
|
|
</>
|
|||
|
|
);
|
|||
|
|
}
|