pulse-dashboard
Version:
A Next.js Dashboard application for real-time monitoring and historical analysis of Playwright test executions, based on playwright-pulse-report. This component provides the UI for visualizing Playwright test results and can be run as a standalone CLI too
177 lines • 10.5 kB
JSX
'use client';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { CheckCircle, XCircle, SkipForward, Clock, Terminal, ListFilter, AlertTriangle, Repeat, Zap } from 'lucide-react';
import { SystemInformationWidget } from './SystemInformationWidget';
import dynamic from 'next/dynamic'; // Import next/dynamic
import { getEffectiveTestStatus } from '@/lib/testUtils';
// Dynamically import DashboardOverviewCharts with ssr: false
const DynamicDashboardOverviewCharts = dynamic(() => import('./DashboardOverviewCharts').then(mod => mod.DashboardOverviewCharts), {
ssr: false,
loading: () => (<div className="grid gap-6 md:grid-cols-1 lg:grid-cols-2 mt-6">
{[...Array(6)].map((_, i) => ( // Assuming 6 chart skeletons, matches loader in DashboardOverviewCharts
<Card key={`loader-chart-${i}`} className="shadow-lg rounded-xl">
<CardHeader>
<Skeleton className="h-5 w-3/4 rounded-xl"/>
<Skeleton className="h-4 w-1/2 mt-1 rounded-xl"/>
</CardHeader>
<CardContent>
<Skeleton className="h-48 w-full rounded-2xl"/>
</CardContent>
</Card>))}
</div>),
});
function formatDuration(ms) {
if (ms === 0)
return '0s';
const seconds = Math.floor((ms / 1000) % 60);
const minutes = Math.floor((ms / (1000 * 60)) % 60);
const hours = Math.floor((ms / (1000 * 60 * 60)) % 24);
let formatted = '';
if (hours > 0)
formatted += `${hours}h `;
if (minutes > 0)
formatted += `${minutes}m `;
if (seconds > 0 || (hours === 0 && minutes === 0))
formatted += `${seconds}s`;
return formatted.trim() || '0s';
}
export function SummaryMetrics({ currentRun, loading, error, onMetricClick }) {
const runMetadata = currentRun?.run;
const environmentData = currentRun?.run?.environment || currentRun?.environment;
if (error && !runMetadata) {
return (<Alert variant="destructive" className="col-span-full md:col-span-2 lg:col-span-5">
<Terminal className="h-4 w-4"/>
<AlertTitle>Error Fetching Summary Metrics</AlertTitle>
<AlertDescription>{error}</AlertDescription>
</Alert>);
}
if (loading && !runMetadata) {
return (<>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-5">
{[...Array(5)].map((_, i) => (<Card key={i} className="shadow-lg rounded-xl">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<Skeleton className="h-5 w-24"/>
<Skeleton className="h-6 w-6"/>
</CardHeader>
<CardContent>
<Skeleton className="h-8 w-16"/>
<Skeleton className="h-4 w-32 mt-1"/>
</CardContent>
</Card>))}
</div>
<SystemInformationWidget environmentInfo={null} loading={true} error={null}/>
{/* Skeleton for charts will be handled by DynamicDashboardOverviewCharts's loader */}
<div className="grid gap-6 md:grid-cols-1 lg:grid-cols-2 mt-6">
{[...Array(6)].map((_, i) => (<Card key={`skeleton-chart-main-${i}`} className="shadow-lg rounded-xl">
<CardHeader>
<Skeleton className="h-5 w-3/4 rounded-xl"/>
<Skeleton className="h-4 w-1/2 mt-1 rounded-xl"/>
</CardHeader>
<CardContent>
<Skeleton className="h-48 w-full rounded-2xl"/>
</CardContent>
</Card>))}
</div>
</>);
}
// Calculate strict counts based on getEffectiveTestStatus
const counts = {
total: currentRun?.results?.length || 0,
passed: 0,
failed: 0,
skipped: 0,
flaky: 0,
totalRetries: 0,
retriedTests: 0,
sumDuration: 0,
};
currentRun?.results?.forEach((test) => {
const effectiveStatus = getEffectiveTestStatus(test);
if (effectiveStatus === 'passed')
counts.passed++;
else if (effectiveStatus === 'failed' || effectiveStatus === 'timedOut')
counts.failed++;
else if (effectiveStatus === 'skipped')
counts.skipped++;
else if (effectiveStatus === 'flaky')
counts.flaky++;
// Retry stats
if (test.retryHistory && test.retryHistory.length > 0) {
const unsuccessfulRetries = test.retryHistory.filter(attempt => attempt.status === 'failed' || attempt.status === 'timedOut' || attempt.status === 'flaky');
if (unsuccessfulRetries.length > 0) {
counts.totalRetries += unsuccessfulRetries.length;
counts.retriedTests++;
}
}
counts.sumDuration += test.duration || 0;
});
const avgDuration = counts.total > 0 ? counts.sumDuration / counts.total : 0;
const metrics = runMetadata ? [
{ title: 'Total Tests', value: counts.total.toString(), icon: <ListFilter className="h-5 w-5 text-muted-foreground"/>, change: null, filterKey: 'all' },
{ title: 'Passed', value: counts.passed.toString(), icon: <CheckCircle className="h-5 w-5 text-[hsl(var(--chart-3))]"/>, change: `${counts.total > 0 ? ((counts.passed / counts.total) * 100).toFixed(1) : '0.0'}% pass rate`, filterKey: 'passed' },
{ title: 'Flaky', value: counts.flaky.toString(), icon: <AlertTriangle className="h-5 w-5 text-[hsl(var(--flaky))]"/>, change: `${counts.total > 0 ? ((counts.flaky / counts.total) * 100).toFixed(1) : '0.0'}% flaky rate`, filterKey: 'flaky' },
{ title: 'Failed', value: counts.failed.toString(), icon: <XCircle className="h-5 w-5 text-destructive"/>, change: `${counts.total > 0 ? ((counts.failed / counts.total) * 100).toFixed(1) : '0.0'}% fail rate`, filterKey: 'failed' },
{ title: 'Skipped', value: counts.skipped.toString(), icon: <SkipForward className="h-5 w-5 text-[hsl(var(--accent))]"/>, change: `${counts.total > 0 ? ((counts.skipped / counts.total) * 100).toFixed(1) : '0.0'}% skip rate`, filterKey: 'skipped' },
{ title: 'Total Retries Count', value: counts.totalRetries.toString(), icon: <Repeat className="h-5 w-5 text-orange-500"/>, change: `${counts.retriedTests} tests retried`, filterKey: null },
{ title: 'Avg. Test Time', value: formatDuration(avgDuration), icon: <Zap className="h-5 w-5 text-yellow-500"/>, change: `Average per test`, filterKey: null },
{ title: 'Duration', value: formatDuration(runMetadata.duration), icon: <Clock className="h-5 w-5 text-primary"/>, change: `Total execution time`, filterKey: null },
] : [];
const handleCardClick = (filterKey) => {
if (filterKey && onMetricClick) {
onMetricClick(filterKey);
}
};
const getLastUpdatedText = () => {
if (!runMetadata?.timestamp)
return 'Just now';
const startTime = new Date(runMetadata.timestamp).getTime();
const now = Date.now();
const diffMinutes = Math.floor((now - startTime) / (1000 * 60));
if (diffMinutes < 1)
return 'Just now';
if (diffMinutes === 1)
return '1 min ago';
if (diffMinutes < 60)
return `${diffMinutes} mins ago`;
const diffHours = Math.floor(diffMinutes / 60);
if (diffHours === 1)
return '1 hour ago';
return `${diffHours} hours ago`;
};
return (<>
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4 mb-8 p-6 lg:p-8 bg-muted/20 backdrop-blur-md border border-border/40 rounded-[2.5rem] shadow-inner">
{metrics.map(metric => (<Card key={metric.title} className={`relative overflow-hidden shadow-2xl hover:shadow-[0_20px_50px_rgba(8,_112,_184,_0.3)] transition-all duration-500 rounded-2xl border-0 bg-gradient-to-br from-card via-card to-card/80 backdrop-blur-sm group ${metric.filterKey && onMetricClick ? 'cursor-pointer hover:scale-[1.02]' : ''}`} onClick={() => handleCardClick(metric.filterKey)} tabIndex={metric.filterKey && onMetricClick ? 0 : -1} onKeyDown={(e) => {
if ((e.key === 'Enter' || e.key === ' ') && metric.filterKey && onMetricClick) {
handleCardClick(metric.filterKey);
}
}} role={metric.filterKey && onMetricClick ? "button" : undefined} aria-label={metric.filterKey && onMetricClick ? `View ${metric.filterKey} tests` : undefined}>
<div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"/>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 relative z-10">
<CardTitle className="text-sm font-semibold text-muted-foreground/90 uppercase tracking-wide">{metric.title}</CardTitle>
<div className="h-9 w-9 rounded-full bg-gradient-to-br from-primary/10 to-primary/5 flex items-center justify-center backdrop-blur-sm">
{metric.icon}
</div>
</CardHeader>
<CardContent className="relative z-10">
<div className="text-4xl font-extrabold bg-gradient-to-br from-foreground to-foreground/60 bg-clip-text text-transparent">{metric.value}</div>
{metric.change && <p className="text-xs font-medium text-muted-foreground/70 pt-1.5">{metric.change}</p>}
</CardContent>
</Card>))}
{loading && runMetadata && ([...Array(5 - metrics.length)].map((_, i) => (<Card key={`loading-${i}`} className="shadow-lg rounded-xl">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<Skeleton className="h-5 w-24"/>
<Skeleton className="h-6 w-6"/>
</CardHeader>
<CardContent>
<Skeleton className="h-8 w-16"/>
<Skeleton className="h-4 w-32 mt-1"/>
</CardContent>
</Card>)))}
</div>
<SystemInformationWidget environmentInfo={environmentData} loading={loading} error={error}/>
<DynamicDashboardOverviewCharts currentRun={currentRun} loading={loading} error={error}/>
</>);
}
//# sourceMappingURL=SummaryMetrics.jsx.map