Merge branch 'tests-analytics-v2' into Ajay/top-flag-selectors

codecov · Sep 18, 2024 · 1c9eecb · 1c9eecb
2 parents 5af88aa + ec95735
commit 1c9eecb
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 7 deletions.
diff --git a/src/pages/RepoPage/FailedTestsTab/FailedTestsPage/FailedTestsTable/FailedTestsTable.spec.tsx b/src/pages/RepoPage/FailedTestsTab/FailedTestsPage/FailedTestsTable/FailedTestsTable.spec.tsx
@@ -166,7 +166,7 @@ describe('FailedTestsTable', () => {
       const nameColumn = await screen.findByText('Test name')
       expect(nameColumn).toBeInTheDocument()
 
-      const durationColumn = await screen.findByText('Average duration')
+      const durationColumn = await screen.findByText('Last duration')
       expect(durationColumn).toBeInTheDocument()
 
       const failureRateColumn = await screen.findByText('Failure rate')
@@ -226,7 +226,7 @@ describe('FailedTestsTable', () => {
         wrapper: wrapper(queryClient),
       })
 
-      const durationColumn = await screen.findByText('Average duration')
+      const durationColumn = await screen.findByText('Last duration')
       await user.click(durationColumn)
 
       await waitFor(() => {

diff --git a/src/pages/RepoPage/FailedTestsTab/FailedTestsPage/FailedTestsTable/FailedTestsTable.tsx b/src/pages/RepoPage/FailedTestsTab/FailedTestsPage/FailedTestsTable/FailedTestsTable.tsx
@@ -15,6 +15,7 @@ import { useParams } from 'react-router-dom'
 import { formatTimeToNow } from 'shared/utils/dates'
 import Icon from 'ui/Icon'
 import Spinner from 'ui/Spinner'
+import { Tooltip } from 'ui/Tooltip'
 
 import {
   OrderingDirection,
@@ -84,12 +85,14 @@ export function getSortingOption(
 const isNumericValue = (value: string) =>
   value === 'avgDuration' ||
   value === 'failureRate' ||
-  value === 'commitsFailed'
+  value === 'commitsFailed' ||
+  value === 'flakeRate'
 
 interface FailedTestsColumns {
   name: string
   avgDuration: number | null
   failureRate: number | null
+  flakeRate?: number | null
   commitsFailed: number | null
   updatedAt: string
 }
@@ -102,7 +105,7 @@ const columns = [
     cell: (info) => info.renderValue(),
   }),
   columnHelper.accessor('avgDuration', {
-    header: () => 'Average duration',
+    header: () => 'Last duration',
     cell: (info) => `${(info.renderValue() ?? 0).toFixed(3)}s`,
   }),
   columnHelper.accessor('failureRate', {
@@ -113,6 +116,38 @@ const columns = [
       return isInt ? `${value}%` : `${value.toFixed(2)}%`
     },
   }),
+  columnHelper.accessor('flakeRate', {
+    header: () => (
+      <div className="flex items-center gap-1">
+        Flake rate
+        <Icon
+          name="informationCircle"
+          size="sm"
+          className="text-ds-gray-tertiary"
+        />
+      </div>
+    ),
+    cell: (info) => {
+      return (
+        <Tooltip delayDuration={0} skipDelayDuration={100}>
+          <Tooltip.Root>
+            <Tooltip.Trigger className="underline decoration-dotted decoration-1 underline-offset-4">
+              {info.renderValue() ? `${info.renderValue()}%` : '9%'}
+            </Tooltip.Trigger>
+            <Tooltip.Portal>
+              <Tooltip.Content
+                className="bg-ds-gray-primary p-2 text-xs text-ds-gray-octonary"
+                side="right"
+              >
+                Passed 2,999, failed 100
+                <Tooltip.Arrow className="size-4 fill-ds-gray-primary" />
+              </Tooltip.Content>
+            </Tooltip.Portal>
+          </Tooltip.Root>
+        </Tooltip>
+      )
+    },
+  }),
   columnHelper.accessor('commitsFailed', {
     header: () => 'Commits failed',
     cell: (info) => (info.renderValue() ? info.renderValue() : 0),

diff --git a/src/pages/RepoPage/FailedTestsTab/FailedTestsPage/MetricsSection/MetricsSection.tsx b/src/pages/RepoPage/FailedTestsTab/FailedTestsPage/MetricsSection/MetricsSection.tsx
@@ -15,7 +15,7 @@ const TooltipWithIcon = ({ children }: { children: React.ReactNode }) => {
         <Tooltip.Portal>
           <Tooltip.Content
             side="right"
-            className="w-64 rounded-md bg-ds-gray-primary p-3 text-xs text-gray-700"
+            className="w-64 rounded-md bg-ds-gray-primary p-3 text-xs text-ds-gray-octonary"
           >
             {children}
             <Tooltip.Arrow className="size-4 fill-gray-100" />
@@ -158,8 +158,8 @@ const TotalSkippedTestsCard = () => {
 
 function MetricsSection() {
   return (
-    <div className="flex">
-      <div className="flex flex-col gap-3 border-r-2">
+    <div className="overflow-x-auto overflow-y-hidden md:flex">
+      <div className="mb-6 flex flex-col gap-3 border-r-2 md:mb-0">
         <p className="pl-4 text-xs font-semibold text-ds-gray-quaternary">
           Improve CI Run Efficiency
         </p>