Bug 1739225: Timestamp component always shows dates in the future as …

…relative dates
openshift · Aug 13, 2019 · f9e0fb2 · f9e0fb2
1 parent b0c62e3
commit f9e0fb2
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 14 deletions.
diff --git a/frontend/public/components/chargeback.tsx b/frontend/public/components/chargeback.tsx
@@ -107,10 +107,10 @@ const ReportsTableRow: React.FC<ReportsTableRowProps> = ({obj, index, key, style
         <ResourceLink kind={ReportGenerationQueryReference} name={_.get(obj, ['spec', 'query'])} namespace={obj.metadata.namespace} title={obj.metadata.namespace} />
       </TableData>
       <TableData className={tableColumnClasses[3]}>
-        <Timestamp timestamp={_.get(obj, ['spec', 'reportingStart'])} />
+        <Timestamp noRelative={true} timestamp={_.get(obj, ['spec', 'reportingStart'])} />
       </TableData>
       <TableData className={tableColumnClasses[4]}>
-        <Timestamp timestamp={_.get(obj, ['spec', 'reportingEnd'])} />
+        <Timestamp noRelative={true} timestamp={_.get(obj, ['spec', 'reportingEnd'])} />
       </TableData>
       <TableData className={tableColumnClasses[5]}>
         <ResourceKebab actions={menuActions} kind={ReportReference} resource={obj} />
@@ -139,9 +139,9 @@ class ReportsDetails extends React.Component<ReportsDetailsProps> {
           <div className="col-sm-6 col-xs-12">
             <dl className="co-m-pane__details">
               <dt>Reporting Start</dt>
-              <dd><Timestamp timestamp={_.get(obj, ['spec', 'reportingStart'])} /></dd>
+              <dd><Timestamp noRelative={true} timestamp={_.get(obj, ['spec', 'reportingStart'])} /></dd>
               <dt>Reporting End</dt>
-              <dd><Timestamp timestamp={_.get(obj, ['spec', 'reportingEnd'])} /></dd>
+              <dd><Timestamp noRelative={true} timestamp={_.get(obj, ['spec', 'reportingEnd'])} /></dd>
               <dt>Report Query</dt>
               <dd><ResourceLink kind={ReportGenerationQueryReference} name={_.get(obj, ['spec', 'query'])} namespace={obj.metadata.namespace} title={obj.metadata.namespace} /></dd>
               <dt>Run Immediately?</dt>
@@ -393,7 +393,7 @@ const ReportGenerationQueriesTableRow: React.FC<ReportGenerationQueriesTableRowP
         <LabelList kind={ReportGenerationQueryReference} labels={_.get(obj, ['metadata', 'labels'])} />
       </TableData>
       <TableData className={reportsGenerationColumnClasses[3]}>
-        <Timestamp timestamp={_.get(obj, ['metadata', 'creationTimestamp'])} />
+        <Timestamp noRelative={true} timestamp={_.get(obj, ['metadata', 'creationTimestamp'])} />
       </TableData>
       <TableData className={reportsGenerationColumnClasses[4]}>
         <ResourceKebab actions={menuActions} kind={ReportGenerationQueryReference} resource={obj} />

diff --git a/frontend/public/components/utils/timestamp.tsx b/frontend/public/components/utils/timestamp.tsx
@@ -8,17 +8,19 @@ import * as dateTime from './datetime';
 
 const monthAbbrs = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 
-const timestampFor = (mdate: Date, now: Date, omitSuffix: boolean) => {
+const timestampFor = (mdate: Date, now: Date, omitSuffix: boolean, noRelative: boolean) => {
   if (!dateTime.isValid(mdate)) {
     return '-';
   }
 
-  const timeAgo = now.getTime() - mdate.getTime();
-  if (omitSuffix) {
-    return dateTime.fromNow(mdate, undefined, {omitSuffix: true});
-  }
-  if (timeAgo < 630000) { // 10.5 minutes
-    return dateTime.fromNow(mdate);
+  if (!noRelative) {
+    const timeAgo = Math.abs(now.getTime() - mdate.getTime());
+    if (omitSuffix) {
+      return dateTime.fromNow(mdate, undefined, {omitSuffix: true});
+    }
+    if (timeAgo < 630000) { // 10.5 minutes
+      return dateTime.fromNow(mdate);
+    }
   }
 
   let a = 'am';
@@ -30,7 +32,7 @@ const timestampFor = (mdate: Date, now: Date, omitSuffix: boolean) => {
 
   const minuteStr = mdate.getMinutes().toString().padStart(2, '00');
   let timeStr = `${hours}:${minuteStr} ${a}`;
-  if (mdate.getFullYear() !== now.getFullYear()) {
+  if (noRelative || mdate.getFullYear() !== now.getFullYear()) {
     timeStr = `${mdate.getFullYear()} ${timeStr}`;
   }
 
@@ -43,7 +45,7 @@ const nowStateToProps = ({UI}) => ({now: UI.get('lastTick')});
 
 export const Timestamp = connect(nowStateToProps)((props: TimestampProps) => {
   const mdate = props.isUnix ? new Date((props.timestamp as number) * 1000) : new Date(props.timestamp);
-  const timestamp = timestampFor(mdate, new Date(props.now), props.omitSuffix);
+  const timestamp = timestampFor(mdate, new Date(props.now), props.omitSuffix, props.noRelative);
 
   if (!dateTime.isValid(mdate)) {
     return <div className="co-timestamp">-</div>;
@@ -66,6 +68,7 @@ export type TimestampProps = {
   isUnix?: boolean;
   now: number;
   simple?: boolean;
+  noRelative?: boolean;
   omitSuffix?: boolean;
   className?: string;
 };