CEC-4455: Add GMT conversion (#345)

adds a checkbox to show time/date in GMT+0 regardless of the users timezone.

src/components/CANSelfServe/SelfServe/__snapshots__/index.test.jsx.snap

@@ -292,6 +292,47 @@ exports[`Render Render 1`] = `
                   
                 </div>
               </div>
+              <div
+                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6 MuiGrid-grid-md-3"
+              >
+                <label
+                  class="MuiFormControlLabel-root"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                  >
+                    <span
+                      class="MuiIconButton-label"
+                    >
+                      <input
+                        class="PrivateSwitchBase-input-0"
+                        data-indeterminate="false"
+                        type="checkbox"
+                        value=""
+                      />
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </span>
+                  <span
+                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                  >
+                    GMT
+                  </span>
+                </label>
+              </div>
             </div>
           </div>
           <div

src/components/CANSelfServe/SelfServe/index.jsx

@@ -1,5 +1,5 @@
 import DateFnsUtils from '@date-io/date-fns';
-import { Button, Checkbox, Chip, CircularProgress, FormControl, Grid, InputLabel, ListItemText, MenuItem, Select } from "@material-ui/core";
+import { Button, Checkbox, Chip, CircularProgress, FormControl, FormControlLabel, Grid, InputLabel, ListItemText, MenuItem, Select } from "@material-ui/core";
 import { KeyboardDatePicker, KeyboardTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
 import React, { useEffect, useState } from "react";
 import { logger } from "../../../services/monitoring";
@@ -17,6 +17,7 @@ const MainForm = ({ id }) => {
   const [selectedEndDate, setSelectedEndDate] = useState(new Date());
   const [selectedCanSignals, setSelectedCanSignals] = useState([]);
   const [selectAllCanSignals, setSelectAllCanSignals] = useState(false);
+  const [gmtTimezone, setGmtTimezone] = useState(false);
 
   const {
     token: {
@@ -86,6 +87,12 @@ const MainForm = ({ id }) => {
     }
   };
 
+  const displayTimeAsGMT = (date) => {
+    return gmtTimezone
+      ? date.toLocaleString("en-US", {timeZone: "Etc/GMT"})
+      : date;
+  }
+
 
   return (
     <div className={classes.paper}>
@@ -102,7 +109,7 @@ const MainForm = ({ id }) => {
                   margin="normal"
                   id="date-picker-inline"
                   label="Date From"
-                  value={selectedStartDate}
+                  value={displayTimeAsGMT(selectedStartDate)}
                   onChange={(value) => handleDateChange(value, "start")}
                   KeyboardButtonProps={{
                     'aria-label': 'change date',
@@ -116,7 +123,7 @@ const MainForm = ({ id }) => {
                   variant="inline"
                   id="time-picker"
                   label="Time From"
-                  value={selectedStartDate}
+                  value={displayTimeAsGMT(selectedStartDate)}
                   onChange={handleTimeFromChange}
                   KeyboardButtonProps={{
                     'aria-label': 'change time',
@@ -132,7 +139,7 @@ const MainForm = ({ id }) => {
                   margin="normal"
                   id="date-picker-inline"
                   label="Date To"
-                  value={selectedEndDate}
+                  value={displayTimeAsGMT(selectedEndDate)}
                   onChange={(value) => handleDateChange(value, "end")}
                   KeyboardButtonProps={{
                     'aria-label': 'change date',
@@ -146,13 +153,24 @@ const MainForm = ({ id }) => {
                   id="time-picker"
                   variant="inline"
                   label="Time To"
-                  value={selectedEndDate}
+                  value={displayTimeAsGMT(selectedEndDate)}
                   onChange={handleTimeToChange}
                   KeyboardButtonProps={{
                     'aria-label': 'change time',
                   }}
                 />
               </Grid>
+              <Grid item xs={6} md={3}>
+                <FormControlLabel
+                  label="GMT"
+                  control={
+                    <Checkbox
+                      checked={gmtTimezone}
+                      onChange={() => setGmtTimezone((current) => !current)}
+                    />
+                  }
+                />
+              </Grid>
             </Grid>
           </MuiPickersUtilsProvider>
         </Grid>