Standardize timestamp formatting using AcmTimestamp component across console UI (stolostron#4261)

* implements acmtimestamp

Signed-off-by: vsanghishetty <vishali.kamenani@ymail.com>

* Change N/A to language neutral -

Signed-off-by: Kevin Cormier <kcormier@redhat.com>

---------

Signed-off-by: vsanghishetty <vishali.kamenani@ymail.com>
Signed-off-by: Kevin Cormier <kcormier@redhat.com>
Co-authored-by: Kevin Cormier <kcormier@redhat.com>

Author: vishsanghishetty

frontend/src/routes/Governance/policies/policy-details/PolicyDetailsHistory.tsx

@@ -9,6 +9,7 @@ import { Policy, PolicyStatusDetails } from '../../../../resources'
 import { useRecoilValue, useSharedAtoms } from '../../../../shared-recoil'
 import { AcmEmptyState, AcmTable, AcmTablePaginationContextProvider, compareStrings } from '../../../../ui-components'
 import { getISOStringTimestamp } from '../../../../resources/utils'
+import AcmTimestamp from '../../../../lib/AcmTimestamp'
 
 interface HistoryTableData {
   message: string
@@ -136,7 +137,7 @@ export function PolicyDetailsHistory(props: {
       {
         header: t('Last report'),
         sort: 'index',
-        cell: (item: any) => (item.timestamp ? moment(item.timestamp, 'YYYY-MM-DDTHH:mm:ssZ').fromNow() : '-'),
+        cell: (item: any) => (item.timestamp ? <AcmTimestamp timestamp={item.timestamp} /> : '-'),
         exportContent: (item: any) => {
           if (item.timestamp) {
             return getISOStringTimestamp(item.timestamp)

frontend/src/routes/Governance/policies/policy-details/PolicyDetailsOverview.tsx

@@ -2,7 +2,6 @@
 import { Alert, ButtonVariant, Icon, LabelGroup, PageSection, Stack, Text, TextVariants } from '@patternfly/react-core'
 import { CheckCircleIcon, ExclamationCircleIcon, ExclamationTriangleIcon } from '@patternfly/react-icons'
 import { AcmButton, AcmDescriptionList, AcmDrawerContext, AcmTable } from '../../../../ui-components'
-import moment from 'moment'
 import { ReactNode, useCallback, useContext, useMemo, useState } from 'react'
 import { Link, generatePath } from 'react-router-dom-v5-compat'
 import { useRecoilValue, useSharedAtoms } from '../../../../shared-recoil'
@@ -32,6 +31,7 @@ import { ClusterPolicyViolationIcons } from '../../components/ClusterPolicyViola
 import { useGovernanceData } from '../../useGovernanceData'
 import { usePropagatedPolicies } from '../../common/useCustom'
 import { usePolicyDetailsContext } from './PolicyDetailsPage'
+import AcmTimestamp from '../../../../lib/AcmTimestamp'
 
 interface TableData {
   apiVersion: string
@@ -125,7 +125,7 @@ export default function PolicyDetailsOverview() {
       },
       {
         key: t('Created'),
-        value: moment(policy.metadata.creationTimestamp, 'YYYY-MM-DDTHH:mm:ssZ').fromNow(),
+        value: policy.metadata.creationTimestamp ? <AcmTimestamp timestamp={policy.metadata.creationTimestamp} /> : '-',
       },
       {
         key: t('Automation'),

frontend/src/routes/Infrastructure/Clusters/DiscoveredClusters/DiscoveredClusters.tsx

@@ -13,7 +13,6 @@ import {
 } from '../../../../ui-components'
 import { ActionList, ActionListItem, Bullseye, ButtonVariant, PageSection } from '@patternfly/react-core'
 import { ExternalLinkAltIcon } from '@patternfly/react-icons'
-import * as moment from 'moment'
 import { Fragment, useCallback, useMemo } from 'react'
 import { Trans, useTranslation } from '../../../../lib/acm-i18next'
 import { Link, useNavigate } from 'react-router-dom-v5-compat'
@@ -22,6 +21,7 @@ import { navigateToBackCancelLocation, NavigationPath } from '../../../../Naviga
 import { DiscoveredCluster, DiscoveryConfig, ProviderConnection, unpackProviderConnection } from '../../../../resources'
 import { useRecoilValue, useSharedAtoms } from '../../../../shared-recoil'
 import { getISOStringTimestamp } from '../../../../resources/utils'
+import AcmTimestamp from '../../../../lib/AcmTimestamp'
 
 export default function DiscoveredClustersPage() {
   return (
@@ -224,11 +224,11 @@ export function DiscoveredClustersTable(props: {
       sort: 'spec.activityTimestamp',
       cell: (discoveredCluster) => (
         <span style={{ whiteSpace: 'nowrap' }} key="dcLastActive">
-          {discoveredCluster.spec.activityTimestamp === undefined
-            ? ['N/A']
-            : moment
-                .duration(Math.abs(new Date().getTime() - new Date(discoveredCluster.spec.activityTimestamp).getTime()))
-                .humanize()}
+          {discoveredCluster.spec.activityTimestamp ? (
+            <AcmTimestamp timestamp={discoveredCluster.spec.activityTimestamp} />
+          ) : (
+            ['-']
+          )}
         </span>
       ),
       exportContent: (discoveredCluster) => {
@@ -292,11 +292,11 @@ export function DiscoveredClustersTable(props: {
       sort: 'spec.creationTimestamp',
       cell: (discoveredCluster) => (
         <span style={{ whiteSpace: 'nowrap' }} key="dcCreationTimestamp">
-          {discoveredCluster.spec.creationTimestamp === undefined
-            ? ['N/A']
-            : moment
-                .duration(Math.abs(new Date().getTime() - new Date(discoveredCluster.spec.creationTimestamp).getTime()))
-                .humanize()}
+          {discoveredCluster.spec.creationTimestamp ? (
+            <AcmTimestamp timestamp={discoveredCluster.spec.creationTimestamp} />
+          ) : (
+            ['-']
+          )}
         </span>
       ),
       exportContent: (discoveredCluster) => {
@@ -310,15 +310,11 @@ export function DiscoveredClustersTable(props: {
       sort: 'metadata.creationTimestamp',
       cell: (discoveredCluster) => (
         <span style={{ whiteSpace: 'nowrap' }} key="dcObjCreationTimestamp">
-          {discoveredCluster.spec.creationTimestamp === undefined
-            ? ['N/A']
-            : moment
-                .duration(
-                  Math.abs(
-                    new Date().getTime() - new Date(discoveredCluster.metadata.creationTimestamp ?? '').getTime()
-                  )
-                )
-                .humanize()}
+          {discoveredCluster.metadata.creationTimestamp ? (
+            <AcmTimestamp timestamp={discoveredCluster.metadata.creationTimestamp} />
+          ) : (
+            ['-']
+          )}
         </span>
       ),
       exportContent: (discoveredCluster) => {