feat(frontend): add total spans in awaiting trace status (#3569)

kubeshop · Jan 26, 2024 · 6c32413 · 6c32413
1 parent 586cdb0
commit 6c32413
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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',