fix(frontend): ui cleanup and improvements (#3699)

kubeshop · Feb 28, 2024 · a2f5baa · a2f5baa
1 parent 288848d
commit a2f5baa
Show file tree

Hide file tree

Showing 10 changed files with 131 additions and 43 deletions.
diff --git a/web/src/components/ResourceCard/Box.tsx b/web/src/components/ResourceCard/Box.tsx
@@ -0,0 +1,31 @@
+import {Tooltip} from 'antd';
+import {ResourceType} from 'types/Resource.type';
+import {abbreviateNumber} from 'utils/Common';
+import * as S from './ResourceCard.styled';
+
+const INITIAL_TIER = 1000;
+
+interface IProps {
+  num: number;
+  type: ResourceType;
+}
+
+const Box = ({num, type}: IProps) => {
+  if (num < INITIAL_TIER) {
+    return (
+      <S.Box $type={type}>
+        <S.BoxTitle level={4}>{num}</S.BoxTitle>
+      </S.Box>
+    );
+  }
+
+  return (
+    <S.Box $type={type}>
+      <Tooltip title={num}>
+        <S.BoxTitle level={4}>{abbreviateNumber(num)}</S.BoxTitle>
+      </Tooltip>
+    </S.Box>
+  );
+};
+
+export default Box;
diff --git a/web/src/components/ResourceCard/TestCard.tsx b/web/src/components/ResourceCard/TestCard.tsx
@@ -6,6 +6,7 @@ import TracetestAPI from 'redux/apis/Tracetest';
 import {ResourceType} from 'types/Resource.type';
 import Test from 'models/Test.model';
 import TestRun from 'models/TestRun.model';
+import Box from './Box';
 import * as S from './ResourceCard.styled';
 import ResourceCardActions from './ResourceCardActions';
 import ResourceCardRuns from './ResourceCardRuns';
@@ -37,9 +38,9 @@ const TestCard = ({onEdit, onDelete, onDuplicate, onRun, onViewAll, test}: IProp
     <S.Container $type={ResourceType.Test}>
       <S.TestContainer onClick={onClick}>
         {isCollapsed ? <RightOutlined data-cy={`collapse-test-${test.id}`} /> : <DownOutlined />}
-        <S.Box $type={ResourceType.Test}>
-          <S.BoxTitle level={2}>{test.summary.runs}</S.BoxTitle>
-        </S.Box>
+
+        <Box num={test.summary.runs} type={ResourceType.Test} />
+
         <S.TitleContainer>
           <S.Title level={3}>{test.name}</S.Title>
           <S.Text>

diff --git a/web/src/components/ResourceCard/TestSuiteCard.tsx b/web/src/components/ResourceCard/TestSuiteCard.tsx
@@ -7,6 +7,7 @@ import TracetestAPI from 'redux/apis/Tracetest';
 import {ResourceType} from 'types/Resource.type';
 import TestSuite from 'models/TestSuite.model';
 import TestSuiteRun from 'models/TestSuiteRun.model';
+import Box from './Box';
 import * as S from './ResourceCard.styled';
 import ResourceCardActions from './ResourceCardActions';
 import ResourceCardRuns from './ResourceCardRuns';
@@ -46,9 +47,9 @@ const TestSuiteCard = ({
     <S.Container $type={ResourceType.TestSuite}>
       <S.TestContainer onClick={onClick}>
         {isCollapsed ? <RightOutlined data-cy={`collapse-testsuite-${testSuiteId}`} /> : <DownOutlined />}
-        <S.Box $type={ResourceType.TestSuite}>
-          <S.BoxTitle level={2}>{summary.runs}</S.BoxTitle>
-        </S.Box>
+
+        <Box num={summary.runs} type={ResourceType.TestSuite} />
+
         <S.TitleContainer>
           <S.Title level={3}>{name}</S.Title>
           <S.Text>{description}</S.Text>

diff --git a/web/src/components/Resources/Content/Content.styled.ts b/web/src/components/Resources/Content/Content.styled.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 export const Body = styled.div`
   display: flex;
-  gap: 24px;
+  gap: 12px;
   width: 100%;
 `;
 

diff --git a/web/src/components/Resources/Content/Content.tsx b/web/src/components/Resources/Content/Content.tsx
@@ -15,43 +15,49 @@ const Content = () => {
         <S.Card>
           <S.Icon src={groupIcon} />
           <div>
-            <S.Title>Tests</S.Title>
+            <S.Title level={3}>Tests</S.Title>
             <S.Text>
               Haven&apos;t created a test yet? Go to the &apos;Tests&apos; page to kickstart your testing adventure.
             </S.Text>
-            <S.Link
-              onClick={e => {
-                e.preventDefault();
-                navigate(`/tests`);
-              }}
-            >
-              {' '}
-              Go to tests <ArrowRightOutlined />
-            </S.Link>
+            <div>
+              <S.Link
+                onClick={e => {
+                  e.preventDefault();
+                  navigate(`/tests`);
+                }}
+              >
+                {' '}
+                Go to tests <ArrowRightOutlined />
+              </S.Link>
+            </div>
           </div>
         </S.Card>
 
         <S.Card>
           <S.Icon src={pagesIcon} />
           <div>
-            <S.Title>Documentation</S.Title>
+            <S.Title level={3}>Documentation</S.Title>
             <S.Text>The ultimate technical resources and step-by-step guides that allows you to quickly start.</S.Text>
-            <S.Link target="_blank" href={DOCUMENTATION_URL}>
-              {' '}
-              View documentation <ArrowRightOutlined />
-            </S.Link>
+            <div>
+              <S.Link target="_blank" href={DOCUMENTATION_URL}>
+                {' '}
+                View documentation <ArrowRightOutlined />
+              </S.Link>
+            </div>
           </div>
         </S.Card>
 
         <S.Card>
           <S.Icon src={mediaIcon} />
           <div>
-            <S.Title>Community</S.Title>
+            <S.Title level={3}>Community</S.Title>
             <S.Text>Check the latest updates and support from the community.</S.Text>
-            <S.Link target="_blank" href={COMMUNITY_SLACK_URL}>
-              {' '}
-              Join our community <ArrowRightOutlined />
-            </S.Link>
+            <div>
+              <S.Link target="_blank" href={COMMUNITY_SLACK_URL}>
+                {' '}
+                Join our community <ArrowRightOutlined />
+              </S.Link>
+            </div>
           </div>
         </S.Card>
       </S.Body>

diff --git a/web/src/components/RunDetailAutomate/RunDetailAutomate.tsx b/web/src/components/RunDetailAutomate/RunDetailAutomate.tsx
@@ -54,7 +54,7 @@ function getMethods(triggerType: TriggerTypes) {
         },
         {
           id: 'typescript',
-          label: 'Typescript',
+          label: 'TypeScript',
           component: Typescript,
         },
       ];

diff --git a/web/src/components/RunStatusIcon/RunStatusIcon.styled.ts b/web/src/components/RunStatusIcon/RunStatusIcon.styled.ts
@@ -1,4 +1,10 @@
-import {CheckCircleFilled, InfoCircleFilled, LoadingOutlined, MinusCircleFilled} from '@ant-design/icons';
+import {
+  CheckCircleFilled,
+  ExclamationCircleFilled,
+  InfoCircleFilled,
+  LoadingOutlined,
+  MinusCircleFilled,
+} from '@ant-design/icons';
 import {Typography} from 'antd';
 import styled from 'styled-components';
 
@@ -14,6 +20,10 @@ export const IconInfo = styled(InfoCircleFilled)`
   color: ${({theme}) => theme.color.textLight};
 `;
 
+export const IconWarning = styled(ExclamationCircleFilled)`
+  color: ${({theme}) => theme.color.warningYellow};
+`;
+
 export const SequenceText = styled.div`
   color: ${({theme}) => theme.color.textLight};
   font-weight: 600;

diff --git a/web/src/components/RunStatusIcon/RunStatusIcon.tsx b/web/src/components/RunStatusIcon/RunStatusIcon.tsx
@@ -18,21 +18,23 @@ const Icon = ({state, requiredGatesResult: {passed}}: IProps) => {
     return <S.IconInfo />;
   }
 
-  if (isRunStateFailed(state) || !passed) {
+  if (isRunStateFailed(state)) {
+    return <S.IconWarning />;
+  }
+
+  if (!passed) {
     return <S.IconFail />;
   }
 
   return <S.IconSuccess />;
 };
 
-const RunStatusIcon = (props: IProps) => {
-  return (
-    <Tooltip title={() => <RunTooltipTitle {...props} />}>
-      <S.IconWrapper>
-        <Icon {...props} />
-      </S.IconWrapper>
-    </Tooltip>
-  );
-};
+const RunStatusIcon = (props: IProps) => (
+  <Tooltip title={() => <RunTooltipTitle {...props} />}>
+    <S.IconWrapper>
+      <Icon {...props} />
+    </S.IconWrapper>
+  </Tooltip>
+);
 
 export default RunStatusIcon;
diff --git a/web/src/components/RunStatusIcon/RunTooltipTitle.tsx b/web/src/components/RunStatusIcon/RunTooltipTitle.tsx
@@ -1,9 +1,24 @@
-import {useTheme} from 'styled-components';
+import {TestState} from 'constants/TestRun.constants';
 import TestRun, {isRunStateFailed, isRunStateFinished, isRunStateStopped} from 'models/TestRun.model';
 import RequiredGatesResult from 'models/RequiredGatesResult.model';
+import {useTheme} from 'styled-components';
+import {TTestRunState} from 'types/TestRun.types';
 import {ToTitle} from 'utils/Common';
 import * as S from './RunStatusIcon.styled';
 
+function getRunStateFailedMessage(state: TTestRunState) {
+  switch (state) {
+    case TestState.TRIGGER_FAILED:
+      return 'The run failed in the trigger stage';
+    case TestState.TRACE_FAILED:
+      return 'The run failed in fetching the trace';
+    case TestState.ASSERTION_FAILED:
+      return 'The run failed to execute the assertions';
+    default:
+      return 'The run execution failed';
+  }
+}
+
 interface IProps {
   state: TestRun['state'];
   requiredGatesResult: RequiredGatesResult;
@@ -17,6 +32,9 @@ const RunTooltipTitle = ({requiredGatesResult: {required, requiredFailedGates, p
   const isStopped = isRunStateStopped(state);
   if (isStopped) return <>The run has been manually stopped</>;
 
+  const isFailed = isRunStateFailed(state);
+  if (isFailed) return <>{getRunStateFailedMessage(state)}</>;
+
   const isFinished = isRunStateFinished(state);
   const isSuccessful = isFinished && passed;
   if (isSuccessful) {
@@ -34,9 +52,6 @@ const RunTooltipTitle = ({requiredGatesResult: {required, requiredFailedGates, p
     );
   }
 
-  const isRunnerFailed = isRunStateFailed(state);
-  if (isRunnerFailed) return <>The run execution failed</>;
-
   const isGatesFailed = isFinished && !passed;
   if (isGatesFailed)
     return (

diff --git a/web/src/utils/Common.ts b/web/src/utils/Common.ts
@@ -100,3 +100,25 @@ export const withLowPriority =
 export const toPercent = (value: number) => {
   return `${value * 100}%`;
 };
+
+export const abbreviateNumber = (num: number): string => {
+  const symbols = ['', 'k', 'M', 'G', 'T', 'P', 'E'];
+
+  // tier to determine suffix
+  // eslint-disable-next-line no-bitwise
+  const tier = (Math.log10(num) / 3) | 0;
+
+  // if zero not need a suffix
+  if (tier === 0) return num.toString();
+
+  // get suffix
+  const suffix = symbols[tier];
+  if (!suffix) return num.toString();
+
+  // get scale
+  const scale = 10 ** (tier * 3);
+  const scaled = num / scale;
+  const rounded = scaled.toFixed(1);
+
+  return rounded + suffix;
+};