fix: minor ui issues in the dashboard, fix: increased timeout for ser…

…ver start from 20s to 60s
RahulARanger · Jan 29, 2024 · 1d5a789 · 1d5a789
1 parent 0335420
commit 1d5a789
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 21 deletions.
diff --git a/handshake-nodejs-reporters/.changeset/odd-buckets-sneeze.md b/handshake-nodejs-reporters/.changeset/odd-buckets-sneeze.md
@@ -0,0 +1,6 @@
+---
+"handshake-dashboard": patch
+"common-handshakes": patch
+---
+
+fix: minor ui issues in the dashboard, fix: increased timeout for server start from 20s to 60s
diff --git a/handshake-nodejs-reporters/packages/common-handshakes/src/service.ts b/handshake-nodejs-reporters/packages/common-handshakes/src/service.ts
@@ -86,7 +86,7 @@ export class ServiceDialPad extends DialPad {
 
   async waitUntilItsReady(force?:number): Promise<unknown> {
     const waitingForTheServer = new Error(
-      'Not able to connect with handshake-server within 20 seconds 😢.',
+      'Not able to connect with handshake-server within a minute😢.',
     );
     return new Promise((resolve, reject) => {
       let timer: NodeJS.Timeout;
@@ -97,7 +97,7 @@ export class ServiceDialPad extends DialPad {
         cleanup();
         await this.terminateServer();
         reject(waitingForTheServer);
-      }, force ?? 20e3);
+      }, force ?? 60e3);
 
       timer = setInterval(async () => {
         const isOnline = await this.ping();

diff --git a/handshake-nodejs-reporters/packages/handshake-dashboard/package.json b/handshake-nodejs-reporters/packages/handshake-dashboard/package.json
@@ -15,7 +15,7 @@
         "@ant-design/icons": "^5.2.6",
         "@tsconfig/node18": "^18.2.2",
         "@types/echarts": "^4.9.22",
-        "@types/node": "20.11.8",
+        "@types/node": "20.11.10",
         "@types/react": "^18.2.48",
         "@types/react-dom": "18.2.18",
         "ansi-to-html": "^0.7.2",
@@ -30,6 +30,7 @@
         "react-countup": "^6.5.0",
         "react-dom": "18.2.0",
         "sqlite": "^5.1.1",
+        "handshake-utils": "0.4.1",
         "sqlite3": "^5.1.7",
         "swr": "^2.2.4",
         "tslib": "^2.6.2",
@@ -46,7 +47,6 @@
         "eslint-plugin-react": "^7.33.2",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-unicorn": "^50.0.1",
-        "handshake-utils": "0.4.1",
         "prettier": "^3.2.4",
         "ts-node": "^10.9.2"
     }

diff --git a/...-nodejs-reporters/packages/handshake-dashboard/src/components/charts/status-pie-chart.tsx b/...-nodejs-reporters/packages/handshake-dashboard/src/components/charts/status-pie-chart.tsx
@@ -95,10 +95,11 @@ export default function ProgressPieChart(properties: {
                 // correct the percentage
                 return `${arguments_.seriesName}<br/>${arguments_.marker}  ${
                     arguments_.name
-                }: ${arguments_.value} (${(arguments_.percent ?? 0) * 2}%)`;
+                }: ${arguments_.value} (${arguments_.percent ?? 0}%)`;
             },
             ...toolTipFormats,
         },
+
         textStyle: {
             fontFamily: serif.style.fontFamily,
         },
@@ -107,8 +108,9 @@ export default function ProgressPieChart(properties: {
                 name:
                     properties.forceText ??
                     (properties.isTestCases ? 'Tests' : 'Suites'),
+
                 type: 'pie',
-                top: -15,
+                bottom: -10,
                 left: -6,
                 radius: properties.fullRound ? ['2%', '70%'] : ['40%', '70%'],
                 avoidLabelOverlap: false,
@@ -129,7 +131,10 @@ export default function ProgressPieChart(properties: {
     return (
         <ReactECharts
             option={options}
-            style={{ height: '220px' }}
+            style={{
+                height: '220px',
+                borderRadius: '10px',
+            }}
             className={`${properties.rate[0]}-${properties.rate[1]}-${properties.rate[2]} ${LOCATORS.CHARTS.progress}`}
         />
     );

diff --git a/...ke-nodejs-reporters/packages/handshake-dashboard/src/components/core/TestEntity/index.tsx b/...ke-nodejs-reporters/packages/handshake-dashboard/src/components/core/TestEntity/index.tsx
@@ -7,7 +7,8 @@ import {
     filterTestsAndSuites,
 } from './extractors';
 import Button from 'antd/lib/button/button';
-import { Divider, Tag, Tooltip } from 'antd/lib';
+import { Affix, Divider, Tag } from 'antd/lib';
+import Text from 'antd/lib/typography/Text';
 import TestEntitiesBars from 'src/components/charts/test-bars';
 import Layout, { Content, Header } from 'antd/lib/layout/layout';
 import { DetailedContext } from 'src/types/records-in-detailed';
@@ -70,26 +71,31 @@ export default function DetailedTestEntityWindow(properties: {
                             'linear-gradient(to right, #3a6186, #89253e)',
                     }}
                 >
-                    <Tooltip title="Back">
+                    <Affix
+                        offsetTop={10}
+                        style={{
+                            position: 'relative',
+                            border: '1px solid grey',
+                            top: '-12px',
+                            left: '-60px',
+                            width: '0px',
+                            height: '0px',
+                        }}
+                    >
                         <Button
-                            type="text"
                             style={{
-                                position: 'absolute',
-                                left: -10,
-                                top: -10,
                                 color: 'whitesmoke',
-                                boxSizing: 'content-box',
-                                paddingBottom: '3px',
-                                fontSize: '1.5rem',
-                                border: '1px ridge grey',
-                                borderRadius: '10px',
                                 backdropFilter: 'blur(12px)',
+                                fontWeight: 'bolder',
+                                backgroundColor: 'transparent',
+                                border: '1px solid transparent',
                             }}
                             onClick={properties.onClose}
+                            shape="round"
                         >
-                            ←
+                            ⟵
                         </Button>
-                    </Tooltip>
+                    </Affix>
                     <TestEntitiesBars
                         entities={rawSource}
                         onClick={(testEntity) => {
@@ -167,6 +173,14 @@ export default function DetailedTestEntityWindow(properties: {
                         selected={selectedSuiteDetails}
                         setTestID={setTestID}
                     />
+                    <Affix
+                        style={{
+                            position: 'relative',
+                            right: '-.5%',
+                        }}
+                    >
+                        <Text italic>{selectedSuiteDetails.File}</Text>
+                    </Affix>
                     <Divider
                         type="horizontal"
                         style={{
@@ -188,7 +202,7 @@ export default function DetailedTestEntityWindow(properties: {
                     <DurationLayer
                         selected={selectedSuiteDetails}
                         wrt={run.Started[0]}
-                        offsetTop={30}
+                        offsetTop={5}
                     />
                     <Paragraph
                         type="secondary"

diff --git a/...shake-nodejs-reporters/packages/handshake-dashboard/src/components/core/test-entities.tsx b/...shake-nodejs-reporters/packages/handshake-dashboard/src/components/core/test-entities.tsx
@@ -243,6 +243,7 @@ export default function TestEntities(properties: {
             <Tabs
                 activeKey={showEntity ? 'detailed' : 'selected'}
                 renderTabBar={() => <></>}
+                animated
                 items={[
                     {
                         key: 'selected',