Fix all Age, LastSeen, and FirstSeen displays (#4990)

src/renderer/components/+events/event-details.tsx

@@ -18,6 +18,7 @@ import { LocaleDate } from "../locale-date";
 import { getDetailsUrl } from "../kube-detail-params";
 import { apiManager } from "../../../common/k8s-api/api-manager";
 import logger from "../../../common/logger";
+import { ReactiveDuration } from "../duration/reactive-duration";
 
 export interface EventDetailsProps extends KubeObjectDetailsProps<KubeEvent> {
 }
@@ -54,10 +55,14 @@ export class EventDetails extends React.Component<EventDetailsProps> {
           {event.getSource()}
         </DrawerItem>
         <DrawerItem name="First seen">
-          {event.getFirstSeenTime()} ago (<LocaleDate date={event.firstTimestamp} />)
+          <ReactiveDuration timestamp={event.firstTimestamp} />
+          {" ago "}
+          (<LocaleDate date={event.firstTimestamp} />)
         </DrawerItem>
         <DrawerItem name="Last seen">
-          {event.getLastSeenTime()} ago (<LocaleDate date={event.lastTimestamp} />)
+          <ReactiveDuration timestamp={event.lastTimestamp} />
+          {" ago "}
+          (<LocaleDate date={event.lastTimestamp} />)
         </DrawerItem>
         <DrawerItem name="Count">
           {count}

src/renderer/components/+events/event.store.ts

@@ -29,7 +29,7 @@ export class EventStore extends KubeObjectStore<KubeEvent> {
 
   protected sortItems(items: KubeEvent[]) {
     return super.sortItems(items, [
-      event => event.getTimeDiffFromNow(), // keep events order as timeline ("fresh" on top)
+      event => -event.getCreationTimestamp(), // keep events order as timeline ("fresh" on top)
     ], "asc");
   }
 

src/renderer/components/+events/events.tsx

@@ -22,6 +22,8 @@ import { Icon } from "../icon";
 import { eventsURL } from "../../../common/routes";
 import { getDetailsUrl } from "../kube-detail-params";
 import { apiManager } from "../../../common/k8s-api/api-manager";
+import { KubeObjectAge } from "../kube-object/age";
+import { ReactiveDuration } from "../duration/reactive-duration";
 
 enum columnId {
   message = "message",
@@ -47,7 +49,6 @@ const defaultProps: Partial<EventsProps> = {
 @observer
 export class Events extends React.Component<EventsProps> {
   static defaultProps = defaultProps as object;
-  now = Date.now();
 
   @observable sorting: TableSortParams = {
     sortBy: columnId.age,
@@ -59,8 +60,8 @@ export class Events extends React.Component<EventsProps> {
     [columnId.type]: event => event.type,
     [columnId.object]: event => event.involvedObject.name,
     [columnId.count]: event => event.count,
-    [columnId.age]: event => event.getTimeDiffFromNow(),
-    [columnId.lastSeen]: event => this.now - new Date(event.lastTimestamp).getTime(),
+    [columnId.age]: event => -event.getCreationTimestamp(),
+    [columnId.lastSeen]: event => -new Date(event.lastTimestamp).getTime(),
   };
 
   constructor(props: EventsProps) {
@@ -185,8 +186,8 @@ export class Events extends React.Component<EventsProps> {
             </Link>,
             event.getSource(),
             event.count,
-            event.getAge(),
-            event.getLastSeenTime(),
+            <KubeObjectAge key="age" object={event} />,
+            <ReactiveDuration key="last-seen" timestamp={event.lastTimestamp} />,
           ];
         }}
       />

src/renderer/components/+events/kube-event-details.tsx

@@ -51,44 +51,34 @@ class NonInjectedKubeEventDetails extends React.Component<KubeEventDetailsProps
 
     const events = eventStore.getEventsByObject(object);
 
-    if (!events.length) {
-      return (
-        <DrawerTitle className="flex gaps align-center">
-          <span>Events</span>
-        </DrawerTitle>
-      );
-    }
-
     return (
       <div>
         <DrawerTitle className="flex gaps align-center">
           <span>Events</span>
         </DrawerTitle>
-        <div className="KubeEventDetails">
-          {events.map(evt => {
-            const { message, count, lastTimestamp, involvedObject } = evt;
-
-            return (
-              <div className="event" key={evt.getId()}>
-                <div className={cssNames("title", { warning: evt.isWarning() })}>
-                  {message}
+        {events.length > 0 && (
+          <div className="KubeEventDetails">
+            {events.map(event => (
+              <div className="event" key={event.getId()}>
+                <div className={cssNames("title", { warning: event.isWarning() })}>
+                  {event.message}
                 </div>
                 <DrawerItem name="Source">
-                  {evt.getSource()}
+                  {event.getSource()}
                 </DrawerItem>
                 <DrawerItem name="Count">
-                  {count}
+                  {event.count}
                 </DrawerItem>
                 <DrawerItem name="Sub-object">
-                  {involvedObject.fieldPath}
+                  {event.involvedObject.fieldPath}
                 </DrawerItem>
                 <DrawerItem name="Last seen">
-                  <LocaleDate date={lastTimestamp} />
+                  <LocaleDate date={event.lastTimestamp} />
                 </DrawerItem>
               </div>
-            );
-          })}
-        </div>
+            ))}
+          </div>
+        )}
       </div>
     );
   }

src/renderer/components/+events/kube-event-icon.tsx

@@ -11,6 +11,7 @@ import type { KubeObject } from "../../../common/k8s-api/kube-object";
 import { eventStore } from "./event.store";
 import { cssNames } from "../../utils";
 import type { KubeEvent } from "../../../common/k8s-api/endpoints/events.api";
+import { KubeObjectAge } from "../kube-object/age";
 
 export interface KubeEventIconProps {
   object: KubeObject;
@@ -48,7 +49,7 @@ export class KubeEventIcon extends React.Component<KubeEventIconProps> {
               <div className="msg">{event.message}</div>
               <div className="age">
                 <Icon material="access_time"/>
-                {event.getAge(undefined, undefined, true)}
+                <KubeObjectAge object={event} />
               </div>
             </div>
           ),