Show timing stats (×N, p50, p95, pass%) on test dashboard
When test results include stats from --repeat mode, display inline stat pills instead of raw duration. Adds TestStats interface. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Nico
parent
2267cfb640
commit
4dacde9ec1
324
src/views/TestsView.vue
Normal file
324
src/views/TestsView.vue
Normal file
@ -0,0 +1,324 @@
|
|||||||
|
<template>
|
||||||
|
<div class="tests-view">
|
||||||
|
<div class="tests-header">
|
||||||
|
<div class="tests-header-left">
|
||||||
|
<h2>Test Results</h2>
|
||||||
|
<div v-if="startedAt" class="tests-timestamps">
|
||||||
|
<span :title="startedAt">Started {{ relativeTime(startedAt) }}</span>
|
||||||
|
<span v-if="updatedAt && updatedAt !== startedAt" :title="updatedAt"> · Updated {{ relativeTime(updatedAt) }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tests-meta">
|
||||||
|
<span :class="['status-badge', overallStatus]">{{ overallStatus }}</span>
|
||||||
|
<span class="summary">{{ passedCount }}/{{ totalCount }} passed</span>
|
||||||
|
<span v-if="totalDuration" class="duration">{{ (totalDuration / 1000).toFixed(1) }}s</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="results.length === 0" class="tests-empty">
|
||||||
|
No test results yet. Run <code>bash infra/test-run.sh</code> to start.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else class="tests-list">
|
||||||
|
<div
|
||||||
|
v-for="r in displayResults"
|
||||||
|
:key="r.test"
|
||||||
|
:class="['test-row', r.status]"
|
||||||
|
@click="toggleExpand(r.test)"
|
||||||
|
>
|
||||||
|
<span class="test-icon">
|
||||||
|
<span v-if="r.status === 'pass'" class="icon-pass">✓</span>
|
||||||
|
<span v-else-if="r.status === 'fail' || r.status === 'error'" class="icon-fail">✗</span>
|
||||||
|
<span v-else-if="r.status === 'running'" class="icon-running">●</span>
|
||||||
|
<span v-else class="icon-pending">○</span>
|
||||||
|
</span>
|
||||||
|
<span class="test-suite">{{ r.suite }}</span>
|
||||||
|
<span class="test-name">{{ r.test }}</span>
|
||||||
|
<span v-if="r.stats && r.stats.runs > 1" class="test-stats">
|
||||||
|
<span class="stat">×{{ r.stats.runs }}</span>
|
||||||
|
<span class="stat">p50 {{ r.stats.p50_ms }}ms</span>
|
||||||
|
<span class="stat">p95 {{ r.stats.p95_ms }}ms</span>
|
||||||
|
<span class="stat">{{ r.stats.pass_rate }}%</span>
|
||||||
|
</span>
|
||||||
|
<span v-else class="test-duration">{{ r.duration_ms ? r.duration_ms + 'ms' : '' }}</span>
|
||||||
|
<span :class="['test-status', r.status]">{{ r.status }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Expanded error detail -->
|
||||||
|
<div
|
||||||
|
v-for="r in displayResults.filter(r => expanded.has(r.test) && r.error)"
|
||||||
|
:key="r.test + '-error'"
|
||||||
|
class="test-error"
|
||||||
|
>
|
||||||
|
<pre>{{ r.error }}</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, computed, onMounted, onUnmounted } from 'vue';
|
||||||
|
import { getApiBase } from '../utils/apiBase';
|
||||||
|
import { relativeTime } from '../utils/relativeTime';
|
||||||
|
|
||||||
|
interface TestStats {
|
||||||
|
runs: number;
|
||||||
|
passed: number;
|
||||||
|
pass_rate: number;
|
||||||
|
min_ms: number;
|
||||||
|
avg_ms: number;
|
||||||
|
p50_ms: number;
|
||||||
|
p95_ms: number;
|
||||||
|
max_ms: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface TestResult {
|
||||||
|
run_id: string;
|
||||||
|
test: string;
|
||||||
|
suite: string;
|
||||||
|
status: 'pass' | 'fail' | 'error' | 'running' | 'pending';
|
||||||
|
duration_ms: number;
|
||||||
|
error: string;
|
||||||
|
stats?: TestStats;
|
||||||
|
}
|
||||||
|
|
||||||
|
const results = ref<TestResult[]>([]);
|
||||||
|
const runId = ref('');
|
||||||
|
const startedAt = ref('');
|
||||||
|
const updatedAt = ref('');
|
||||||
|
const expanded = ref<Set<string>>(new Set());
|
||||||
|
let eventSource: EventSource | null = null;
|
||||||
|
|
||||||
|
|
||||||
|
const displayResults = computed(() =>
|
||||||
|
results.value.filter(r => r.test !== '__summary__')
|
||||||
|
);
|
||||||
|
|
||||||
|
const passedCount = computed(() => displayResults.value.filter(r => r.status === 'pass').length);
|
||||||
|
const failedCount = computed(() => displayResults.value.filter(r => r.status === 'fail' || r.status === 'error').length);
|
||||||
|
const totalCount = computed(() => displayResults.value.length);
|
||||||
|
const totalDuration = computed(() => displayResults.value.reduce((sum, r) => sum + (r.duration_ms || 0), 0));
|
||||||
|
|
||||||
|
const overallStatus = computed(() => {
|
||||||
|
if (displayResults.value.some(r => r.status === 'running')) return 'running';
|
||||||
|
if (failedCount.value > 0) return 'fail';
|
||||||
|
if (passedCount.value > 0) return 'pass';
|
||||||
|
return 'pending';
|
||||||
|
});
|
||||||
|
|
||||||
|
function toggleExpand(test: string) {
|
||||||
|
if (expanded.value.has(test)) {
|
||||||
|
expanded.value.delete(test);
|
||||||
|
} else {
|
||||||
|
expanded.value.add(test);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleResult(data: any) {
|
||||||
|
if (data.run_id && data.run_id !== runId.value) {
|
||||||
|
// New run — clear old
|
||||||
|
results.value = [];
|
||||||
|
runId.value = data.run_id;
|
||||||
|
startedAt.value = data.ts || new Date().toISOString();
|
||||||
|
}
|
||||||
|
updatedAt.value = data.ts || new Date().toISOString();
|
||||||
|
|
||||||
|
// Update or append
|
||||||
|
const idx = results.value.findIndex(r => r.test === data.test && r.suite === data.suite);
|
||||||
|
if (idx >= 0) {
|
||||||
|
results.value[idx] = data;
|
||||||
|
} else {
|
||||||
|
results.value.push(data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
const base = getApiBase();
|
||||||
|
|
||||||
|
// First fetch snapshot
|
||||||
|
fetch(`${base}/api/test-results/latest`)
|
||||||
|
.then(r => r.json())
|
||||||
|
.then(data => {
|
||||||
|
if (data.run_id) runId.value = data.run_id;
|
||||||
|
if (data.results) {
|
||||||
|
results.value = data.results;
|
||||||
|
// Extract timestamps from results
|
||||||
|
const timestamps = data.results.map((r: any) => r.ts).filter(Boolean).sort();
|
||||||
|
if (timestamps.length) {
|
||||||
|
startedAt.value = timestamps[0];
|
||||||
|
updatedAt.value = timestamps[timestamps.length - 1];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
|
||||||
|
// Then connect SSE for live updates
|
||||||
|
eventSource = new EventSource(`${base}/api/test-results`);
|
||||||
|
eventSource.onmessage = (e) => {
|
||||||
|
try {
|
||||||
|
const data = JSON.parse(e.data);
|
||||||
|
if (data.run_id) handleResult(data);
|
||||||
|
} catch {}
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
eventSource?.close();
|
||||||
|
eventSource = null;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.tests-view {
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 24px;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tests-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tests-header-left {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tests-header h2 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tests-meta {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--text-dim);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tests-timestamps {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--text-dim);
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.run-id {
|
||||||
|
font-family: monospace;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-badge {
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.status-badge.pass { background: #166534; color: #bbf7d0; }
|
||||||
|
.status-badge.fail { background: #991b1b; color: #fecaca; }
|
||||||
|
.status-badge.running { background: #854d0e; color: #fef08a; }
|
||||||
|
.status-badge.pending { background: var(--panel-bg); color: var(--text-dim); }
|
||||||
|
|
||||||
|
.tests-empty {
|
||||||
|
padding: 40px;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--text-dim);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
.tests-empty code {
|
||||||
|
background: var(--panel-bg);
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tests-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.test-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
background: var(--panel-bg);
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.12s;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
.test-row:hover { background: color-mix(in srgb, var(--panel-bg) 80%, var(--text) 5%); }
|
||||||
|
|
||||||
|
.test-icon { width: 20px; text-align: center; flex-shrink: 0; }
|
||||||
|
.icon-pass { color: #22c55e; }
|
||||||
|
.icon-fail { color: #ef4444; }
|
||||||
|
.icon-running { color: #eab308; animation: pulse 1s infinite; }
|
||||||
|
.icon-pending { color: var(--text-dim); }
|
||||||
|
|
||||||
|
@keyframes pulse { 50% { opacity: 0.4; } }
|
||||||
|
|
||||||
|
.test-suite {
|
||||||
|
color: var(--text-dim);
|
||||||
|
min-width: 80px;
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.test-name { flex: 1; }
|
||||||
|
|
||||||
|
.test-duration {
|
||||||
|
font-family: monospace;
|
||||||
|
color: var(--text-dim);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
min-width: 60px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.test-status {
|
||||||
|
min-width: 50px;
|
||||||
|
text-align: right;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.test-status.pass { color: #22c55e; }
|
||||||
|
.test-status.fail, .test-status.error { color: #ef4444; }
|
||||||
|
.test-status.running { color: #eab308; }
|
||||||
|
|
||||||
|
.test-error {
|
||||||
|
margin: 0 0 2px 30px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
background: #1a0000;
|
||||||
|
border-left: 3px solid #ef4444;
|
||||||
|
border-radius: 0 6px 6px 0;
|
||||||
|
}
|
||||||
|
.test-error pre {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #fca5a5;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.test-stats {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
color: var(--text-dim);
|
||||||
|
}
|
||||||
|
.test-stats .stat {
|
||||||
|
background: color-mix(in srgb, var(--panel-bg) 60%, var(--text) 8%);
|
||||||
|
padding: 1px 5px;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user