ux and ui improvements as well as changing all times displayed to be utc

added home button link and changed main chart table to be clickable so it goes to the build
AnglesHQ · Dec 9, 2023 · 109dae4 · 109dae4
1 parent 7f63b92
commit 109dae4
Show file tree

Hide file tree

Showing 10 changed files with 29 additions and 22 deletions.
diff --git a/src/components/common/execution-timeline/StepsTimeline.js b/src/components/common/execution-timeline/StepsTimeline.js
@@ -82,7 +82,7 @@ const StepsTimeline = function (props) {
               return (
                 <Timeline.Item dot={getTimeLineIcon(step.status)} className="timeline-step" key={index}>
                   <Stack className="rg-stack" spacing={10}>
-                    <p><Moment format="HH:mm:ss">{step.timestamp}</Moment></p>
+                    <p><Moment utc format="HH:mm:ss">{step.timestamp}</Moment></p>
                     <p>{step.name}</p>
                     <p>{`Expected: ${step.expected}, Actual: ${step.actual}`}</p>
                     <p>{screenshotImage}</p>
@@ -93,7 +93,7 @@ const StepsTimeline = function (props) {
             return (
               <Timeline.Item dot={getTimeLineIcon(step.status)} className="timeline-step" key={index}>
                 <Stack className="rg-stack" spacing={10}>
-                  <p><Moment format="HH:mm:ss">{step.timestamp}</Moment></p>
+                  <p><Moment utc format="HH:mm:ss">{step.timestamp}</Moment></p>
                   <p>{convertTextToLinks(step.info)}</p>
                   <p>{screenshotImage}</p>
                 </Stack>

diff --git a/src/components/common/screenshot-view/ScreenshotDetailsTable.js b/src/components/common/screenshot-view/ScreenshotDetailsTable.js
@@ -37,7 +37,7 @@ const ScreenshotDetailsTable = function (props) {
           </span>
           <span>: </span>
           <span>
-            <Moment format="DD-MM-YYYY HH:mm:ss">
+            <Moment utc format="DD-MM-YYYY HH:mm:ss">
               {currentScreenshotDetails.timestamp}
             </Moment>
           </span>
@@ -50,7 +50,7 @@ const ScreenshotDetailsTable = function (props) {
               </span>
               <span>: </span>
               <span>
-                <Moment format="DD-MM-YYYY HH:mm:ss">
+                <Moment utc format="DD-MM-YYYY HH:mm:ss">
                   {currentBaseLineDetails.screenshot.timestamp}
                 </Moment>
               </span>

diff --git a/src/components/common/screenshot-view/history/ScreenshotHistoryView.js b/src/components/common/screenshot-view/history/ScreenshotHistoryView.js
@@ -101,7 +101,7 @@ const ScreenshotHistoryView = function (props) {
                             <FormattedMessage id="common.component.screenshot-view.tabs.history.label.date" />
                           </span>
                           <span>: </span>
-                          <Moment format="DD-MM-YYYY HH:mm:ss">
+                          <Moment utc format="DD-MM-YYYY HH:mm:ss">
                             {screenshot.timestamp}
                           </Moment>
                         </td>

diff --git a/src/components/common/test-suite/ExecutionTable.js b/src/components/common/test-suite/ExecutionTable.js
@@ -62,7 +62,7 @@ const ExecutionTable = function (props) {
               <div className="execution-details-container">
                 <span className="date-details">
                   <CalendarIcon />
-                  <Moment format="DD-MM-YYYY HH:mm:ss">
+                  <Moment utc format="DD-MM-YYYY HH:mm:ss">
                     {execution.start}
                   </Moment>
                 </span>

diff --git a/src/components/pages/dashboard/BuildsTable.js b/src/components/pages/dashboard/BuildsTable.js
@@ -94,12 +94,12 @@ const DateCell = function (props) {
         <div>
           <div>
             <span>
-              <Moment format="DD MMM">
+              <Moment utc format="DD MMM">
                 {build.start}
               </Moment>
             </span>
             <span> </span>
-            <Moment format="HH:mm">
+            <Moment utc format="HH:mm">
               {build.start}
             </Moment>
           </div>
@@ -123,7 +123,7 @@ const ResultCell = function (props) {
   const { rowData: build } = props;
   return (
     // eslint-disable-next-line react/jsx-props-no-spreading
-    <Cell {...props}>
+    <Cell {...props} className="builds-table-result-cell">
       <ExecutionsResultsBar result={build.result} />
     </Cell>
   );

diff --git a/src/components/pages/dashboard/charts/ExecutionBarChart.js b/src/components/pages/dashboard/charts/ExecutionBarChart.js
@@ -4,6 +4,7 @@ import { Panel, Stack } from 'rsuite';
 import { useIntl } from 'react-intl';
 import moment from 'moment';
 // import { getBuildDurationInSeconds } from '../../../../utility/TimeUtilities';
+import { useNavigate } from 'react-router-dom';
 
 const defaultOptions = {
   chart: {
@@ -16,12 +17,7 @@ const defaultOptions = {
     background: 'var(--main-panel-background)',
     foreColor: 'var(--main-panel-font-color)',
     // TODO: could look at adding some click events for filtering etc
-    // events:
-    //   {
-    //     click: (event, chartContext, config) => {
-    //       console.log(event, chartContext, config);
-    //     },
-    //   },
+    events: {},
   },
   plotOptions: {
     bar: {
@@ -86,7 +82,7 @@ const generateResultsData = (builds) => {
     results.ERROR.push(ERROR || 0);
     results.FAIL.push(FAIL || 0);
     // results.executionTimes.push(getBuildDurationInSeconds(build));
-    graphData.labels.push(moment(build.start).format('YYYY-MM-DD hh:mm:ss'));
+    graphData.labels.push(moment.utc(moment(build.start)).format('YYYY-MM-DD HH:mm:ss'));
   });
   graphData.data.push(
     {
@@ -120,7 +116,12 @@ const generateResultsData = (builds) => {
 
 const ExecutionBarChart = function (props) {
   const { builds, title } = props;
+  const reversedBuilds = [...builds].reverse();
+  const navigate = useNavigate();
   const graphData = generateResultsData(builds);
+  defaultOptions.chart.events.click = function (event, chartContext, config) {
+    navigate(`/test-run/?buildId=${reversedBuilds[config.dataPointIndex]._id}`);
+  };
   const { data, labels } = graphData;
   return (
     <Panel

diff --git a/src/components/pages/dashboard/styles.less b/src/components/pages/dashboard/styles.less
@@ -88,4 +88,8 @@
     padding-top: 10px;
 }
 
+.builds-table-result-cell {
+    padding-right: 10px;
+    display: flex
+}
 
diff --git a/src/components/pages/test-execution-history/charts/TestExecutionTimeLineChart.js b/src/components/pages/test-execution-history/charts/TestExecutionTimeLineChart.js
@@ -51,7 +51,7 @@ const generateResultsData = (executions) => {
   const executionsToReverse = [...executions];
   executionsToReverse.reverse().forEach((execution) => {
     executionTimes.push(getBuildDurationInSeconds(execution));
-    graphData.labels.push(moment(execution.start).format('YYYY-MM-DD hh:mm:ss'));
+    graphData.labels.push(moment.utc(moment(execution.start)).format('YYYY-MM-DD hh:mm:ss'));
   });
   graphData.data.push(
     { name: 'ExecutionTime', data: executionTimes, type: 'line' },

diff --git a/src/components/pages/test-run-compare/TestRunCompareTable.js b/src/components/pages/test-run-compare/TestRunCompareTable.js
@@ -183,7 +183,7 @@ const TestRunCompareTable = function (props) {
     };
     testRunCompareBuilds.forEach((build) => {
       names[build._id] = build.name;
-      startDates[build._id] = <Moment format="DD-MM-YYYY HH:mm">{build.start}</Moment>;
+      startDates[build._id] = <Moment utc format="DD-MM-YYYY HH:mm">{build.start}</Moment>;
       environments[build._id] = build.environment.name;
     });
     buildDetailsRows.push(names);

diff --git a/src/containers/App.js b/src/containers/App.js
@@ -168,10 +168,12 @@ const App = function (props) {
         >
           <Sidenav expanded={expand} defaultOpenKeys={['3']} appearance="subtle">
             <Sidenav.Header>
-              <div className="sidebar-header">
-                <img src="../assets/angles-icon.png" alt="Angles" className="sidebar-angles-icon" />
-                <img src="../assets/angles-text-logo.png" alt="Angles" className="sidebar-angles-text-icon" />
-              </div>
+              <a href="/">
+                <div className="sidebar-header">
+                  <img src="../assets/angles-icon.png" alt="Angles" className="sidebar-angles-icon" />
+                  <img src="../assets/angles-text-logo.png" alt="Angles" className="sidebar-angles-text-icon" />
+                </div>
+              </a>
             </Sidenav.Header>
             <Sidenav.Body>
               <Nav>