Dates with timezone

CHANGELOG.md

@@ -20,7 +20,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ### Changed
 - Render all dates in the current configured timezone of the user
-  [#1327](https://github.com/greenbone/gsa/pull/1327), [#1329](https://github.com/greenbone/gsa/pull/1329)
+  [#1327](https://github.com/greenbone/gsa/pull/1327),
+  [#1329](https://github.com/greenbone/gsa/pull/1329),
+  [#1332](https://github.com/greenbone/gsa/pull/1332)
 - Change default PortList for NewTargetDialog [#1321](https://github.com/greenbone/gsa/pull/1321)
 - Update dependencies of react, react-dom, react-redux and create-react-app [#1312](https://github.com/greenbone/gsa/pull/1312)
 - Adjust clickable area of Select [#1296](https://github.com/greenbone/gsa/pull/1296)

gsa/src/gmp/locale/date.js

@@ -47,15 +47,23 @@ export const ensureDate = date => {
   return date;
 };
 
-const dateFormat = (date, format) => {
+const dateFormat = (date, format, tz) => {
   date = ensureDate(date);
-  return isDefined(date) ? date.format(format) : undefined;
+  if (!isDefined(date)) {
+    return undefined;
+  }
+
+  if (isDefined(tz)) {
+    date.tz(tz);
+  }
+  return date.format(format);
 };
 
-export const shortDate = date => dateFormat(date, 'L');
+export const shortDate = (date, tz) => dateFormat(date, 'L', tz);
 
-export const longDate = date => dateFormat(date, 'llll');
+export const longDate = (date, tz) => dateFormat(date, 'llll', tz);
 
-export const dateTimeWithTimeZone = date => dateFormat(date, 'llll z');
+export const dateTimeWithTimeZone = (date, tz) =>
+  dateFormat(date, 'llll z', tz);
 
 // vim: set ts=2 sw=2 tw=80:

gsa/src/web/components/date/datetime.js

@@ -18,16 +18,14 @@
  */
 import {connect} from 'react-redux';
 
-import {dateTimeWithTimeZone, ensureDate} from 'gmp/locale/date';
+import {dateTimeWithTimeZone} from 'gmp/locale/date';
 
 import {getTimezone} from 'web/store/usersettings/selectors';
 
 import PropTypes from 'web/utils/proptypes';
 
-const DateTime = ({formatter = dateTimeWithTimeZone, timezone, date}) => {
-  date = ensureDate(date);
-  return formatter(date.tz(timezone));
-};
+const DateTime = ({formatter = dateTimeWithTimeZone, timezone, date}) =>
+  formatter(date, timezone);
 
 DateTime.propTypes = {
   date: PropTypes.date.isRequired,

gsa/src/web/pages/certbund/detailspage.js

@@ -20,7 +20,8 @@
 import React from 'react';
 
 import _ from 'gmp/locale';
-import {longDate} from 'gmp/locale/date';
+
+import DateTime from 'web/components/date/datetime';
 
 import Divider from 'web/components/layout/divider';
 import IconDivider from 'web/components/layout/icondivider';
@@ -110,7 +111,9 @@ const Details = ({entity}) => {
               {revision_history.map(rev => (
                 <TableRow key={rev.revision}>
                   <TableData>{rev.revision}</TableData>
-                  <TableData>{longDate(rev.date)}</TableData>
+                  <TableData>
+                    <DateTime date={rev.date} />
+                  </TableData>
                   <TableData>{rev.description}</TableData>
                 </TableRow>
               ))}

gsa/src/web/pages/cpes/details.js

@@ -19,14 +19,15 @@
 import React from 'react';
 
 import _ from 'gmp/locale';
-import {longDate} from 'gmp/locale/date';
 
 import {isDefined} from 'gmp/utils/identity';
 
 import PropTypes from 'web/utils/proptypes.js';
 
 import SeverityBar from 'web/components/bar/severitybar.js';
 
+import DateTime from 'web/components/date/datetime';
+
 import Layout from 'web/components/layout/layout.js';
 
 import InfoTable from 'web/components/table/infotable.js';
@@ -76,7 +77,9 @@ const CpeDetails = ({entity}) => {
           {isDefined(updateTime) && (
             <TableRow>
               <TableData>{_('Last updated')}</TableData>
-              <TableData>{longDate(updateTime)}</TableData>
+              <TableData>
+                <DateTime date={updateTime} />
+              </TableData>
             </TableRow>
           )}
           {isDefined(status) && (

gsa/src/web/pages/credentials/detailspage.js

@@ -20,7 +20,6 @@
 import React from 'react';
 
 import _ from 'gmp/locale';
-import {longDate} from 'gmp/locale/date';
 
 import {isDefined} from 'gmp/utils/identity';
 
@@ -29,6 +28,8 @@ import {
   CERTIFICATE_STATUS_EXPIRED,
 } from 'gmp/models/credential';
 
+import DateTime from 'web/components/date/datetime';
+
 import CredentialIcon from 'web/components/icon/credentialicon';
 import ExportIcon from 'web/components/icon/exporticon';
 import ManualIcon from 'web/components/icon/manualicon';
@@ -137,7 +138,7 @@ const Details = ({entity, links = true, ...props}) => {
                 <TableData>{_('Activation')}</TableData>
                 <TableData>
                   <Divider>
-                    <span>{longDate(cert.activationTime)}</span>
+                    <DateTime date={cert.activationTime} />
                     {cert.time_status === CERTIFICATE_STATUS_INACTIVE && (
                       <span>{_('inactive')}</span>
                     )}
@@ -149,7 +150,7 @@ const Details = ({entity, links = true, ...props}) => {
                 <TableData>{_('Expiration')}</TableData>
                 <TableData>
                   <Divider>
-                    <span>{longDate(cert.expirationTime)}</span>
+                    <DateTime date={cert.expirationTime} />
                     {cert.time_status === CERTIFICATE_STATUS_EXPIRED && (
                       <span>{_('expired')}</span>
                     )}

gsa/src/web/pages/hosts/identifiers.js

@@ -25,10 +25,11 @@ import {isDefined} from 'gmp/utils/identity';
 import styled from 'styled-components';
 
 import _ from 'gmp/locale';
-import {longDate} from 'gmp/locale/date';
 
 import PropTypes from '../../utils/proptypes.js';
 
+import DateTime from 'web/components/date/datetime';
+
 import DeleteIcon from '../../components/icon/deleteicon.js';
 
 import DetailsLink from '../../components/link/detailslink.js';
@@ -215,7 +216,9 @@ class Identifiers extends React.Component {
                     </DetailsLink>
                   </span>
                 </TableData>
-                <TableData>{longDate(identifier.creationTime)}</TableData>
+                <TableData>
+                  <DateTime date={identifier.creationTime} />
+                </TableData>
                 <TableData>
                   <Source source={identifier.source} />
                 </TableData>

gsa/src/web/pages/notes/detailspage.js

@@ -19,6 +19,8 @@
 
 import React from 'react';
 
+import {connect} from 'react-redux';
+
 import _ from 'gmp/locale';
 import {longDate} from 'gmp/locale/date';
 
@@ -68,6 +70,8 @@ import {
   loadEntities as loadPermissions,
 } from 'web/store/entities/permissions';
 
+import {getTimezone} from 'web/store/usersettings/selectors';
+
 import {renderYesNo} from 'web/utils/render';
 import PropTypes from 'web/utils/proptypes';
 
@@ -114,7 +118,9 @@ ToolBarIcons.propTypes = {
   onNoteEditClick: PropTypes.func.isRequired,
 };
 
-const Details = ({entity, ...props}) => {
+const Details = connect(rootState => ({
+  timezone: getTimezone(rootState),
+}))(({entity, timezone, ...props}) => {
   const {nvt} = entity;
   return (
     <Layout flex="column">
@@ -151,7 +157,9 @@ const Details = ({entity, ...props}) => {
               {entity.isActive() &&
                 isDefined(entity.endTime) &&
                 ' ' +
-                  _('until {{- enddate}}', {enddate: longDate(entity.endTime)})}
+                  _('until {{- enddate}}', {
+                    enddate: longDate(entity.endTime, timezone),
+                  })}
             </TableData>
           </TableRow>
         </TableBody>
@@ -160,7 +168,7 @@ const Details = ({entity, ...props}) => {
       <NoteDetails entity={entity} {...props} />
     </Layout>
   );
-};
+});
 
 Details.propTypes = {
   entity: PropTypes.model.isRequired,

gsa/src/web/pages/notes/dialog.js

@@ -20,7 +20,6 @@
 import React from 'react';
 
 import _ from 'gmp/locale';
-import {longDate} from 'gmp/locale/date';
 
 import {isDefined} from 'gmp/utils/identity';
 import {isEmpty} from 'gmp/utils/string';
@@ -40,6 +39,8 @@ import {
   RESULT_ANY,
 } from 'gmp/models/override';
 
+import DateTime from 'web/components/date/datetime';
+
 import SaveDialog from 'web/components/dialog/savedialog';
 
 import Divider from 'web/components/layout/divider';
@@ -178,7 +179,7 @@ const NoteDialog = ({
                       value={ACTIVE_YES_UNTIL_VALUE}
                       onChange={onValueChange}
                     />
-                    <span>{longDate(note.endTime)}</span>
+                    <DateTime date={note.endTime} />
                   </Divider>
                 )}
               </Divider>

gsa/src/web/pages/ovaldefs/detailspage.js

@@ -22,10 +22,11 @@ import React from 'react';
 import styled from 'styled-components';
 
 import _ from 'gmp/locale';
-import {longDate} from 'gmp/locale/date';
 
 import {isDefined} from 'gmp/utils/identity';
 
+import DateTime from 'web/components/date/datetime';
+
 import ExportIcon from 'web/components/icon/exporticon';
 import ListIcon from 'web/components/icon/listicon';
 import ManualIcon from 'web/components/icon/manualicon';
@@ -252,7 +253,9 @@ const Details = ({entity}) => {
                       )}
                     </Divider>
                   </TableData>
-                  <TableData>{longDate(change.date)}</TableData>
+                  <TableData>
+                    <DateTime date={change.date} />
+                  </TableData>
                   <TableData>
                     <Divider>
                       {change.contributors.map(contributor => (

gsa/src/web/pages/overrides/detailspage.js

@@ -19,6 +19,8 @@
 
 import React from 'react';
 
+import {connect} from 'react-redux';
+
 import _ from 'gmp/locale';
 import {longDate} from 'gmp/locale/date';
 
@@ -71,6 +73,8 @@ import {
   loadEntities as loadPermissions,
 } from 'web/store/entities/permissions';
 
+import {getTimezone} from 'web/store/usersettings/selectors';
+
 import PropTypes from 'web/utils/proptypes';
 import {renderYesNo} from 'web/utils/render';
 
@@ -117,7 +121,9 @@ ToolBarIcons.propTypes = {
   onOverrideEditClick: PropTypes.func.isRequired,
 };
 
-const Details = ({entity, ...props}) => {
+const Details = connect(rootState => ({
+  timezone: getTimezone(rootState),
+}))(({entity, timezone, ...props}) => {
   const {nvt} = entity;
   return (
     <Layout flex="column">
@@ -154,7 +160,9 @@ const Details = ({entity, ...props}) => {
               {entity.isActive() &&
                 isDefined(entity.endTime) &&
                 ' ' +
-                  _('until {{- enddate}}', {enddate: longDate(entity.endTime)})}
+                  _('until {{- enddate}}', {
+                    enddate: longDate(entity.endTime, timezone),
+                  })}
             </TableData>
           </TableRow>
         </TableBody>
@@ -163,7 +171,7 @@ const Details = ({entity, ...props}) => {
       <OverrideDetails entity={entity} {...props} />
     </Layout>
   );
-};
+});
 
 Details.propTypes = {
   entity: PropTypes.model.isRequired,

gsa/src/web/pages/overrides/dialog.js

@@ -20,7 +20,6 @@
 import React from 'react';
 
 import _ from 'gmp/locale';
-import {longDate} from 'gmp/locale/date';
 
 import {isDefined} from 'gmp/utils/identity';
 
@@ -41,6 +40,8 @@ import {
   RESULT_UUID,
 } from 'gmp/models/override';
 
+import DateTime from 'web/components/date/datetime';
+
 import Divider from 'web/components/layout/divider';
 import Layout from 'web/components/layout/layout';
 
@@ -226,7 +227,7 @@ const OverrideDialog = ({
                       title={_('yes, until')}
                       onChange={onValueChange}
                     />
-                    <span>{longDate(override.endTime)}</span>
+                    <DateTime date={override.endTime} />
                   </Divider>
                 </Layout>
               )}

gsa/src/web/pages/reports/detailscontent.js

@@ -22,7 +22,6 @@ import React from 'react';
 import styled from 'styled-components';
 
 import _ from 'gmp/locale';
-import {longDate} from 'gmp/locale/date';
 
 import {TASK_STATUS} from 'gmp/models/task';
 
@@ -31,6 +30,8 @@ import {isDefined} from 'gmp/utils/identity';
 import StatusBar from 'web/components/bar/statusbar';
 import ToolBar from 'web/components/bar/toolbar';
 
+import DateTime from 'web/components/date/datetime';
+
 import ErrorMessage from 'web/components/errorboundary/errormessage';
 
 import AddToAssetsIcon from 'web/components/icon/addtoassetsicon';
@@ -319,7 +320,7 @@ const PageContent = ({
         <span>{_('Loading')}</span>
       ) : (
         <Divider>
-          <span>{longDate(timestamp)}</span>
+          <DateTime date={timestamp} />
           <Span>
             <StatusBar status={status} progress={progress} />
           </Span>

gsa/src/web/pages/reports/tlscertificatestable.js

@@ -26,6 +26,8 @@ import {shortDate} from 'gmp/locale/date';
 
 import PropTypes from 'web/utils/proptypes';
 
+import DateTime from 'web/components/date/datetime';
+
 import DownloadIcon from 'web/components/icon/downloadicon';
 
 import Link from 'web/components/link/link';
@@ -109,8 +111,12 @@ const Row = ({
         <StyledSpan>{issuer}</StyledSpan>
       </TableData>
       <TableData>{serial}</TableData>
-      <TableData>{shortDate(notbefore)}</TableData>
-      <TableData>{shortDate(notafter)}</TableData>
+      <TableData>
+        <DateTime format={shortDate} date={notbefore} />
+      </TableData>
+      <TableData>
+        <DateTime format={shortDate} data={notafter} />
+      </TableData>
       <TableData>
         <Link
           to="hosts"