feat(frontend): add test outputs mark to Timeline view (#2847)

kubeshop · Jul 4, 2023 · c025d3c · c025d3c
1 parent 6f8135a
commit c025d3c
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 19 deletions.
diff --git a/web/src/components/Visualization/components/Timeline/TestSpanNode/Header.tsx b/web/src/components/Visualization/components/Timeline/TestSpanNode/Header.tsx
@@ -1,31 +1,57 @@
+import {Group} from '@visx/group';
 import * as S from '../Timeline.styled';
 
 interface IProps {
+  hasOutputs?: boolean;
   totalFailedChecks?: number;
   totalPassedChecks?: number;
 }
 
-const Header = ({totalFailedChecks, totalPassedChecks}: IProps) => {
+function getOutputsX(totalFailedChecks?: number, totalPassedChecks?: number): number {
+  if (totalFailedChecks && totalPassedChecks) {
+    return 44;
+  }
+  if (totalFailedChecks || totalPassedChecks) {
+    return 24;
+  }
+
+  return 0;
+}
+
+const Header = ({hasOutputs, totalFailedChecks, totalPassedChecks}: IProps) => {
   const failedChecksX = totalPassedChecks ? 20 : 0;
+  const outputsX = getOutputsX(totalFailedChecks, totalPassedChecks);
 
   return (
     <>
-      {!!totalPassedChecks && (
-        <>
-          <S.CircleCheck cx={0} cy={0} r={4} $passed />
-          <S.TextDescription dominantBaseline="middle" x={6} y={0}>
-            {totalPassedChecks}
-          </S.TextDescription>
-        </>
-      )}
-      {!!totalFailedChecks && (
-        <>
-          <S.CircleCheck cx={failedChecksX} cy={0} r={4} $passed={false} />
-          <S.TextDescription dominantBaseline="middle" x={failedChecksX + 6} y={0}>
-            {totalFailedChecks}
-          </S.TextDescription>
-        </>
-      )}
+      <Group>
+        {!!totalPassedChecks && (
+          <>
+            <S.CircleCheck cx={0} cy={0} r={4} $passed />
+            <S.TextDescription dominantBaseline="middle" x={6} y={0}>
+              {totalPassedChecks}
+            </S.TextDescription>
+          </>
+        )}
+        {!!totalFailedChecks && (
+          <>
+            <S.CircleCheck cx={failedChecksX} cy={0} r={4} $passed={false} />
+            <S.TextDescription dominantBaseline="middle" x={failedChecksX + 6} y={0}>
+              {totalFailedChecks}
+            </S.TextDescription>
+          </>
+        )}
+      </Group>
+      <Group left={outputsX}>
+        {hasOutputs && (
+          <>
+            <S.RectOutput x={0} y={-6} rx={4} />
+            <S.TextOutput dominantBaseline="middle" x={2} y={0}>
+              O
+            </S.TextOutput>
+          </>
+        )}
+      </Group>
     </>
   );
 };

diff --git a/web/src/components/Visualization/components/Timeline/TestSpanNode/TestSpanNode.tsx b/web/src/components/Visualization/components/Timeline/TestSpanNode/TestSpanNode.tsx
@@ -5,12 +5,18 @@ import {IPropsComponent} from '../SpanNodeFactory';
 
 const TestSpanNode = (props: IPropsComponent) => {
   const {node} = props;
-  const {span, testSpecs} = useSpanData(node.data.id);
+  const {span, testSpecs, testOutputs} = useSpanData(node.data.id);
 
   return (
     <BaseSpanNode
       {...props}
-      header={<Header totalFailedChecks={testSpecs?.failed?.length} totalPassedChecks={testSpecs?.passed?.length} />}
+      header={
+        <Header
+          hasOutputs={!!testOutputs?.length}
+          totalFailedChecks={testSpecs?.failed?.length}
+          totalPassedChecks={testSpecs?.passed?.length}
+        />
+      }
       span={span}
     />
   );

diff --git a/web/src/components/Visualization/components/Timeline/Timeline.styled.ts b/web/src/components/Visualization/components/Timeline/Timeline.styled.ts
@@ -34,6 +34,12 @@ export const CircleNumber = styled.circle`
   fill: ${({theme}) => theme.color.borderLight};
 `;
 
+export const RectOutput = styled.rect`
+  fill: ${({theme}) => theme.color.warningYellow};
+  height: 12px;
+  width: 12px;
+`;
+
 export const GroupCollapse = styled(Group)`
   cursor: pointer;
 `;
@@ -109,3 +115,10 @@ export const TextNumber = styled.text`
   font-size: ${({theme}) => theme.size.sm};
   pointer-events: none;
 `;
+
+export const TextOutput = styled.text`
+  fill: ${({theme}) => theme.color.white};
+  font-size: ${({theme}) => theme.size.xs};
+  font-weight: bold;
+  pointer-events: none;
+`;