From 6c32413b74e303f7389bd13738d52ae6c14c337b Mon Sep 17 00:00:00 2001
From: Jorge Padilla <jorge.esteban.padilla@gmail.com>
Date: Fri, 26 Jan 2024 12:38:15 -0500
Subject: [PATCH] feat(frontend): add total spans in awaiting trace status
 (#3569)

---
 web/src/components/RunDetailLayout/HeaderRight.tsx | 6 +++---
 web/src/components/TestState/TestState.tsx         | 7 ++++---
 web/src/components/TestState/TestStateProgress.tsx | 8 ++++++--
 web/src/constants/TestRun.constants.ts             | 8 +++++++-
 4 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/web/src/components/RunDetailLayout/HeaderRight.tsx b/web/src/components/RunDetailLayout/HeaderRight.tsx
index d5cbcb6f8d..3cda84eb53 100644
--- a/web/src/components/RunDetailLayout/HeaderRight.tsx
+++ b/web/src/components/RunDetailLayout/HeaderRight.tsx
@@ -27,7 +27,7 @@ const HeaderRight = ({testId, triggerType}: IProps) => {
   const {isDraftMode: isTestOutputsDraftMode} = useTestOutput();
   const isDraftMode = isTestSpecsDraftMode || isTestOutputsDraftMode;
   const {
-    run: {state, requiredGatesResult},
+    run: {state, requiredGatesResult, trace},
     run,
     runEvents,
     isLoadingStop,
@@ -49,8 +49,8 @@ const HeaderRight = ({testId, triggerType}: IProps) => {
       {isDraftMode && <TestActions />}
       {!isDraftMode && state && state !== TestStateEnum.FINISHED && (
         <S.StateContainer data-cy="test-run-result-status">
-          <S.StateText>Test status:</S.StateText>
-          <TestState testState={state} />
+          <S.StateText>Status:</S.StateText>
+          <TestState testState={state} info={`(${trace?.spans?.length ?? 0} spans)`} />
           {isRunPollingState(state) && <SkipPollingPopover isLoading={isLoading} skipPolling={onSkipPolling} />}
         </S.StateContainer>
       )}
diff --git a/web/src/components/TestState/TestState.tsx b/web/src/components/TestState/TestState.tsx
index ca981e98bc..6d5e61dfea 100644
--- a/web/src/components/TestState/TestState.tsx
+++ b/web/src/components/TestState/TestState.tsx
@@ -5,13 +5,14 @@ import TestStateProgress from './TestStateProgress';
 
 interface IProps {
   testState: TTestRunState;
+  info?: string;
 }
 
-const TestState = ({testState}: IProps) => {
-  const {label, percent, status} = TestStateMap[testState];
+const TestState = ({testState, info}: IProps) => {
+  const {label, percent, status, showInfo} = TestStateMap[testState];
 
   return percent ? (
-    <TestStateProgress label={label} percent={percent} />
+    <TestStateProgress label={label} percent={percent} showInfo={showInfo} info={info} />
   ) : (
     <TestStateBadge label={label} status={status} />
   );
diff --git a/web/src/components/TestState/TestStateProgress.tsx b/web/src/components/TestState/TestStateProgress.tsx
index d9d3956662..2faf6ce9e4 100644
--- a/web/src/components/TestState/TestStateProgress.tsx
+++ b/web/src/components/TestState/TestStateProgress.tsx
@@ -4,12 +4,16 @@ import * as S from './TestState.styled';
 interface IProps {
   label: string;
   percent: number;
+  showInfo?: boolean;
+  info?: string;
 }
 
-const TestStateProgress = ({label, percent}: IProps) => (
+const TestStateProgress = ({label, percent, showInfo, info}: IProps) => (
   <S.Container hasMinWidth>
     <Progress percent={percent} showInfo={false} status="active" strokeLinecap="square" strokeWidth={6} />
-    <S.Text>{label}</S.Text>
+    <S.Text>
+      {label} {showInfo && info}
+    </S.Text>
   </S.Container>
 );
 
diff --git a/web/src/constants/TestRun.constants.ts b/web/src/constants/TestRun.constants.ts
index 55c8e28fe2..6ba2e4d73c 100644
--- a/web/src/constants/TestRun.constants.ts
+++ b/web/src/constants/TestRun.constants.ts
@@ -17,7 +17,12 @@ export enum TestState {
 
 export const TestStateMap: Record<
   TestState,
-  {status: 'success' | 'processing' | 'error' | 'default' | 'warning'; label: string; percent?: number}
+  {
+    status: 'success' | 'processing' | 'error' | 'default' | 'warning';
+    label: string;
+    percent?: number;
+    showInfo?: boolean;
+  }
 > = {
   [TestState.CREATED]: {
     status: 'default',
@@ -32,6 +37,7 @@ export const TestStateMap: Record<
     status: 'warning',
     label: 'Awaiting trace',
     percent: 50,
+    showInfo: true,
   },
   [TestState.AWAITING_TEST_RESULTS]: {
     status: 'success',