feat(frontend): add outputs for each test in transaction page (#1922)

kubeshop · Feb 1, 2023 · 27c566e · 27c566e
1 parent bb192b8
commit 27c566e
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 44 deletions.
diff --git a/web/src/components/TransactionRunResult/ExecutionStep.tsx b/web/src/components/TransactionRunResult/ExecutionStep.tsx
@@ -1,11 +1,13 @@
-import {capitalize} from 'lodash';
-import {Tooltip} from 'antd';
 import {LinkOutlined} from '@ant-design/icons';
+import {Tooltip} from 'antd';
+import {capitalize} from 'lodash';
+import React, {useState} from 'react';
 import {Link} from 'react-router-dom';
+import KeyValueRow from 'components/KeyValueRow';
 import {TestState} from 'constants/TestRun.constants';
+import TestRun from 'models/TestRun.model';
 import {TTest} from 'types/Test.types';
 import {TTestRun, TTestRunState} from 'types/TestRun.types';
-import TestRun from 'models/TestRun.model';
 import * as S from './TransactionRunResult.styled';
 
 const iconBasedOnResult = (state: TTestRunState, failedAssertions: number, index: number) => {
@@ -34,51 +36,70 @@ const ExecutionStep = ({
   index,
   test: {name, trigger, id: testId},
   hasRunFailed,
-  testRun: {id: runId, state, testVersion, passedAssertionCount, failedAssertionCount} = TestRun({
+  testRun: {id: runId, state, testVersion, passedAssertionCount, failedAssertionCount, outputs} = TestRun({
     state: hasRunFailed ? TestState.SKIPPED : TestState.WAITING,
   }),
 }: IProps) => {
+  const [toggleOutputs, setToggleOutputs] = useState(false);
   const stateIsFinished = ([TestState.FINISHED, TestState.FAILED] as string[]).includes(state);
   const toLink = runId ? `/test/${testId}/run/${runId}` : `/test/${testId}`;
 
   return (
     <S.Container data-cy={`transaction-execution-step-${name}`}>
-      <S.ExecutionStepStatus>{iconBasedOnResult(state, failedAssertionCount, index)}</S.ExecutionStepStatus>
-      <Link to={toLink} target="_blank">
-        <S.Info>
-          <S.ExecutionStepName>{`${name} v${testVersion}`}</S.ExecutionStepName>
-          <S.TagContainer>
-            <S.TextTag>{trigger.method}</S.TextTag>
-            <S.EntryPointTag $isLight>{trigger.entryPoint}</S.EntryPointTag>
-            {!stateIsFinished && <S.TextTag>{capitalize(state)}</S.TextTag>}
-          </S.TagContainer>
-        </S.Info>
-      </Link>
-      <S.AssertionResultContainer>
-        {runId && (
-          <>
-            <Tooltip title="Passed assertions">
-              <S.HeaderDetail>
-                <S.HeaderDot $passed />
-                {passedAssertionCount}
-              </S.HeaderDetail>
-            </Tooltip>
-            <Tooltip title="Failed assertions">
-              <S.HeaderDetail>
-                <S.HeaderDot $passed={false} />
-                {failedAssertionCount}
-              </S.HeaderDetail>
-            </Tooltip>
-          </>
+      <S.Content>
+        <S.ExecutionStepStatus>{iconBasedOnResult(state, failedAssertionCount, index)}</S.ExecutionStepStatus>
+        <Link to={toLink} target="_blank">
+          <S.Info>
+            <S.ItemName>{`${name} v${testVersion}`}</S.ItemName>
+            <S.TagContainer>
+              <S.TextTag>{trigger.method}</S.TextTag>
+              <S.EntryPointTag $isLight>{trigger.entryPoint}</S.EntryPointTag>
+              {!stateIsFinished && <S.TextTag>{capitalize(state)}</S.TextTag>}
+            </S.TagContainer>
+          </S.Info>
+        </Link>
+        <S.AssertionResultContainer>
+          {runId && (
+            <>
+              <Tooltip title="Passed assertions">
+                <S.HeaderDetail>
+                  <S.HeaderDot $passed />
+                  {passedAssertionCount}
+                </S.HeaderDetail>
+              </Tooltip>
+              <Tooltip title="Failed assertions">
+                <S.HeaderDetail>
+                  <S.HeaderDot $passed={false} />
+                  {failedAssertionCount}
+                </S.HeaderDetail>
+              </Tooltip>
+            </>
+          )}
+        </S.AssertionResultContainer>
+        <S.ExecutionStepStatus>
+          <Tooltip title="Go to Run">
+            <S.ExecutionStepRunLink to={toLink} target="_blank" data-cy="execution-step-run-link">
+              <LinkOutlined />
+            </S.ExecutionStepRunLink>
+          </Tooltip>
+        </S.ExecutionStepStatus>
+      </S.Content>
+
+      <S.OutputsContainer>
+        {!!outputs?.length && (
+          <S.OutputsButton onClick={() => setToggleOutputs(prev => !prev)} type="link">
+            {toggleOutputs ? 'Hide Outputs' : 'Show Outputs'}
+          </S.OutputsButton>
+        )}
+
+        {toggleOutputs && (
+          <S.OutputsContent>
+            {outputs?.map?.(output => (
+              <KeyValueRow key={output.name} keyName={output.name} value={output.value} />
+            ))}
+          </S.OutputsContent>
         )}
-      </S.AssertionResultContainer>
-      <S.ExecutionStepStatus>
-        <Tooltip title="Go to Run">
-          <S.ExecutionStepRunLink to={toLink} target="_blank" data-cy="execution-step-run-link">
-            <LinkOutlined />
-          </S.ExecutionStepRunLink>
-        </Tooltip>
-      </S.ExecutionStepStatus>
+      </S.OutputsContainer>
     </S.Container>
   );
 };

diff --git a/web/src/components/TransactionRunResult/TransactionRunResult.styled.ts b/web/src/components/TransactionRunResult/TransactionRunResult.styled.ts
@@ -1,19 +1,40 @@
 import {CheckCircleFilled, CloseCircleFilled} from '@ant-design/icons';
-import {Typography, Tag} from 'antd';
+import {Typography, Tag, Button} from 'antd';
 import {Link} from 'react-router-dom';
 import styled from 'styled-components';
 
 export const Container = styled.div`
-  align-items: center;
   border: ${({theme}) => `1px solid ${theme.color.borderLight}`};
   border-radius: 2px;
   background: ${({theme}) => theme.color.background};
+  display: flex;
+  flex-direction: column;
+  padding: 7px 16px;
+  margin-bottom: 8px;
+`;
+
+export const Content = styled.div`
+  align-items: center;
   display: grid;
   grid-template-columns: auto 1fr auto auto;
   gap: 16px;
-  padding: 7px 16px;
-  margin-bottom: 8px;
   height: 58px;
+  width: 100%;
+`;
+
+export const OutputsContainer = styled.div`
+  margin-left: 32px;
+`;
+
+export const OutputsButton = styled(Button)`
+  font-size: ${({theme}) => theme.size.sm};
+  font-weight: 600;
+  height: 20px;
+  padding: 0;
+`;
+
+export const OutputsContent = styled.div`
+  margin-top: 4px;
 `;
 
 export const Info = styled.div`
@@ -23,7 +44,9 @@ export const Info = styled.div`
   height: 100%;
 `;
 
-export const ExecutionStepName = styled(Typography.Text)`
+export const ItemName = styled(Typography.Title).attrs({
+  level: 4,
+})`
   && {
     font-size: ${({theme}) => theme.size.sm};
   }