feat: add pass rate for reports, report details, fix metadata display…

app/components/inline-stats-circle.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { FC } from 'react';
+import { CircularProgress } from '@heroui/react';
+
+import { type ReportStats } from '@/app/lib/parser/types';
+
+type ReportFiltersProps = {
+  stats: ReportStats;
+};
+
+const InlineStatsCircle: FC<ReportFiltersProps> = ({ stats }) => {
+  if (!stats.total) return null;
+
+  const passedPercentage = (stats.expected / (stats.total - stats.skipped)) * 100;
+
+  return (
+    <CircularProgress
+      aria-label="Passed Percentage"
+      classNames={{
+        value: 'text-[12px]',
+      }}
+      color="success"
+      disableAnimation={true}
+      formatOptions={{ style: 'unit', unit: 'percent' }}
+      showValueLabel={true}
+      size="lg"
+      strokeWidth={3}
+      value={Math.round(passedPercentage)}
+    />
+  );
+};
+
+export default InlineStatsCircle;

app/components/report-details/file-list.tsx

@@ -1,11 +1,12 @@
 'use client';
 
 import { FC, useEffect, useState } from 'react';
-import { Accordion, AccordionItem, Spinner } from '@heroui/react';
+import { Accordion, AccordionItem, Alert, Spinner } from '@heroui/react';
 import { toast } from 'sonner';
 
 import { subtitle } from '../primitives';
 import { StatChart } from '../stat-chart';
+import InlineStatsCircle from '../inline-stats-circle';
 
 import FileSuitesTree from './suite-tree';
 import ReportFilters from './tests-filters';
@@ -49,13 +50,14 @@ const FileList: FC<FileListProps> = ({ report }) => {
         <ReportFilters report={report!} onChangeFilters={setFilteredTests} />
       </div>
       {!filteredTests?.files?.length ? (
-        <p>No files found</p>
+        <Alert color="warning" title={`No files found`} />
       ) : (
-        <Accordion variant="bordered">
+        <Accordion isCompact={true} variant="bordered">
           {(filteredTests?.files ?? []).map((file) => (
             <AccordionItem
               key={file.fileId}
               aria-label={file.fileName}
+              startContent={<InlineStatsCircle stats={file.stats} />}
               title={
                 <p className="flex flex-row gap-5">
                   {file.fileName}

app/components/reports-table.tsx

@@ -21,6 +21,7 @@ import { toast } from 'sonner';
 import { withBase } from '../lib/url';
 
 import TablePaginationOptions from './table-pagination-options';
+import InlineStatsCircle from './inline-stats-circle';
 
 import { withQueryParams } from '@/app/lib/network';
 import { defaultProjectName } from '@/app/lib/constants';
@@ -33,6 +34,7 @@ import { ReadReportsHistory, ReportHistory } from '@/app/lib/storage';
 const columns = [
   { name: 'Title', uid: 'title' },
   { name: 'Project', uid: 'project' },
+  { name: 'Pass Rate', uid: 'passRate' },
   { name: 'Created at', uid: 'createdAt' },
   { name: 'Size', uid: 'size' },
   { name: '', uid: 'actions' },
@@ -45,6 +47,7 @@ const coreFields = [
   'createdAt',
   'size',
   'sizeBytes',
+  'options',
   'reportUrl',
   'metadata',
   'startTime',
@@ -53,6 +56,7 @@ const coreFields = [
   'projectNames',
   'stats',
   'errors',
+  'playwrightVersion',
 ];
 
 const getMetadataItems = (item: ReportHistory) => {
@@ -74,6 +78,12 @@ const getMetadataItems = (item: ReportHistory) => {
     metadata.push({ key: 'branch', value: itemWithMetadata.branch, icon: <BranchIcon /> });
   }
 
+  if (itemWithMetadata.playwrightVersion) {
+    metadata.push({ key: 'playwright', value: itemWithMetadata.playwrightVersion });
+  }
+
+  metadata.push({ key: 'workers', value: itemWithMetadata.metadata?.actualWorkers });
+
   // Add any other metadata fields
   Object.entries(itemWithMetadata).forEach(([key, value]) => {
     if (!coreFields.includes(key) && !['environment', 'workingDir', 'branch'].includes(key)) {
@@ -195,7 +205,7 @@ export default function ReportsTable({ onChange }: Readonly<ReportsTableProps>)
         >
           {(item) => (
             <TableRow key={item.reportID}>
-              <TableCell className="w-1/2">
+              <TableCell className="w-1/3">
                 <div className="flex flex-col">
                   {/* Main title and link */}
                   <Link href={withBase(`/report/${item.reportID}`)} prefetch={false}>
@@ -224,12 +234,13 @@ export default function ReportsTable({ onChange }: Readonly<ReportsTableProps>)
                   </div>
                 </div>
               </TableCell>
-              <TableCell className="w-1/4">{item.project}</TableCell>
-              <TableCell className="w-1/4">
+              <TableCell className="w-1/6">{item.project}</TableCell>
+              <TableCell className="w-1/12">{<InlineStatsCircle stats={item.stats} />}</TableCell>
+              <TableCell className="w-1/6">
                 <FormattedDate date={item.createdAt} />
               </TableCell>
-              <TableCell className="w-1/4">{item.size}</TableCell>
-              <TableCell className="w-1/4">
+              <TableCell className="w-1/12">{item.size}</TableCell>
+              <TableCell className="w-1/6">
                 <div className="flex gap-4 justify-end">
                   <Link href={withBase(item.reportUrl)} prefetch={false} target="_blank">
                     <Button color="primary" size="md">