From 109dae4bdd354d69e200d0ebfa6032109acce516 Mon Sep 17 00:00:00 2001
From: Sergio Neves Barros <s.nevesbarros@googlemail.com>
Date: Sat, 9 Dec 2023 15:25:00 +0000
Subject: [PATCH 1/2] 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

---
 .../common/execution-timeline/StepsTimeline.js    |  4 ++--
 .../screenshot-view/ScreenshotDetailsTable.js     |  4 ++--
 .../history/ScreenshotHistoryView.js              |  2 +-
 .../common/test-suite/ExecutionTable.js           |  2 +-
 src/components/pages/dashboard/BuildsTable.js     |  6 +++---
 .../pages/dashboard/charts/ExecutionBarChart.js   | 15 ++++++++-------
 src/components/pages/dashboard/styles.less        |  4 ++++
 .../charts/TestExecutionTimeLineChart.js          |  2 +-
 .../pages/test-run-compare/TestRunCompareTable.js |  2 +-
 src/containers/App.js                             | 10 ++++++----
 10 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/src/components/common/execution-timeline/StepsTimeline.js b/src/components/common/execution-timeline/StepsTimeline.js
index ad3d920..f0204a2 100644
--- 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
index 6065bc9..3d50562 100644
--- 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
index 681227a..eb9ccaf 100644
--- 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
index a3c961c..1863786 100644
--- 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
index 2a95f57..5cbfcdd 100644
--- 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
index 2bd1bf0..cabd68e 100644
--- 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
index 5980670..354c260 100644
--- 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
index 96d4de5..bcbd6c3 100644
--- 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
index 8983b91..4d17bef 100644
--- 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
index 1f3684f..8e1a1d7 100644
--- 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>

From a2432cdfad05dfb4e860644e2236ec3618075902 Mon Sep 17 00:00:00 2001
From: Sergio Neves Barros <s.nevesbarros@googlemail.com>
Date: Sat, 9 Dec 2023 15:31:14 +0000
Subject: [PATCH 2/2] fixing checkbox error

---
 src/components/pages/dashboard/BuildsTable.js | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/components/pages/dashboard/BuildsTable.js b/src/components/pages/dashboard/BuildsTable.js
index 5cbfcdd..59b6920 100644
--- a/src/components/pages/dashboard/BuildsTable.js
+++ b/src/components/pages/dashboard/BuildsTable.js
@@ -11,7 +11,6 @@ import {
   Table,
   Popover,
   Whisper,
-  CheckboxGroup,
 } from 'rsuite';
 import { getDuration } from '../../../utility/TimeUtilities';
 import ExecutionsResultsBar from '../../common/results-bar';
@@ -72,15 +71,13 @@ const CheckCell = function (props) {
   return (
     // eslint-disable-next-line react/jsx-props-no-spreading
     <Cell {...rest}>
-      <CheckboxGroup>
-        <Checkbox
-          key={`${build._id}-${isRowSelected(build)}`}
-          value={build._id}
-          onClick={() => toggleSelectedBuild(build)}
-          checked={isRowSelected(build)}
-          inline={false}
-        />
-      </CheckboxGroup>
+      <Checkbox
+        key={`${build._id}-${isRowSelected(build)}`}
+        value={build._id}
+        onClick={() => toggleSelectedBuild(build)}
+        checked={isRowSelected(build)}
+        inline={false}
+      />
     </Cell>
   );
 };