Update pages to display dates in user timezone

greenbone · Apr 29, 2019 · 41e698b · 41e698b
1 parent 59eb934
commit 41e698b
Show file tree

Hide file tree

Showing 14 changed files with 100 additions and 42 deletions.
diff --git a/gsa/src/web/pages/certbund/detailspage.js b/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>
               ))}

diff --git a/gsa/src/web/pages/cpes/details.js b/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) && (

diff --git a/gsa/src/web/pages/credentials/detailspage.js b/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>
                     )}

diff --git a/gsa/src/web/pages/hosts/identifiers.js b/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>

diff --git a/gsa/src/web/pages/notes/detailspage.js b/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,

diff --git a/gsa/src/web/pages/notes/dialog.js b/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>

diff --git a/gsa/src/web/pages/ovaldefs/detailspage.js b/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 => (

diff --git a/gsa/src/web/pages/overrides/detailspage.js b/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,

diff --git a/gsa/src/web/pages/overrides/dialog.js b/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>
               )}

diff --git a/gsa/src/web/pages/reports/detailscontent.js b/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>

diff --git a/gsa/src/web/pages/reports/tlscertificatestable.js b/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"

diff --git a/gsa/src/web/pages/scanners/dialog.js b/gsa/src/web/pages/scanners/dialog.js
@@ -19,6 +19,8 @@
 
 import React from 'react';
 
+import {connect} from 'react-redux';
+
 import _ from 'gmp/locale';
 import {longDate} from 'gmp/locale/date';
 
@@ -47,6 +49,8 @@ import NewIcon from 'web/components/icon/newicon';
 import Divider from 'web/components/layout/divider';
 import Layout from 'web/components/layout/layout';
 
+import {getTimezone} from 'web/store/usersettings/selectors';
+
 import {
   OSP_SCANNER_TYPE,
   GMP_SCANNER_TYPE,
@@ -76,36 +80,40 @@ const filter_credentials = (credentials, type) => {
   return filter(credentials, cred_filter);
 };
 
-const render_certificate_info = info => {
+const render_certificate_info = (info, tz) => {
   if (!isDefined(info)) {
     return null;
   }
 
   if (info.time_status === 'expired') {
     return _('Certificate currently in use expired at {{date}}', {
-      date: longDate(info.expirationTime),
+      date: longDate(info.expirationTime, tz),
     });
   }
   if (info.time_status === 'inactive') {
     return _('Certificate currently not valid until {{date}}', {
-      date: longDate(info.activationTime),
+      date: longDate(info.activationTime, tz),
     });
   }
   return _('Certificate in use will expire at {{date}}', {
-    date: longDate(info.expirationTime),
+    date: longDate(info.expirationTime, tz),
   });
 };
 
-const CertStatus = ({info}) => {
+const mapStateToProps = rootState => ({
+  timezone: getTimezone(rootState),
+});
+
+const CertStatus = connect(mapStateToProps)(({info, timezone}) => {
   return (
     <FootNote>
       <Layout>
         <KeyIcon />
       </Layout>
-      <span>{render_certificate_info(info)}</span>
+      <span>{render_certificate_info(info, timezone)}</span>
     </FootNote>
   );
-};
+});
 
 CertStatus.propTypes = {
   info: PropTypes.object.isRequired,