responding to comments

Signed-off-by: Roman <ixrock@gmail.com>

src/renderer/api/kube-object.ts

@@ -126,9 +126,9 @@ export class KubeObject implements ItemObject {
     return new Date().getTime() - new Date(this.metadata.creationTimestamp).getTime();
   }
 
-  getAge(humanize = true, compact = true, fromNow = false) {
+  getAge(humanize = true, compact = true, fromNow = false): string | number {
     if (fromNow) {
-      return moment(this.metadata.creationTimestamp).fromNow(); // "string"
+      return moment(this.metadata.creationTimestamp).fromNow(); // "string", getTimeDiffFromNow() cannot be used
     }
     const diff = this.getTimeDiffFromNow();
 

src/renderer/components/+events/events.scss

@@ -1,10 +1,4 @@
 .Events {
-  h5.title {
-    .events-count {
-      font-size: $font-size;
-    }
-  }
-
   .Table {
     .TableCell {
       &.message {

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

@@ -9,6 +9,7 @@ import { EventStore, eventStore } from "./event.store";
 import { getDetailsUrl, KubeObjectListLayout, KubeObjectListLayoutProps } from "../kube-object";
 import { KubeEvent } from "../../api/endpoints/events.api";
 import { TableSortCallbacks, TableSortParams } from "../table";
+import { IHeaderPlaceholders } from "../item-object-list";
 import { Tooltip } from "../tooltip";
 import { Link } from "react-router-dom";
 import { cssNames, IClassName, stopPropagation } from "../../utils";
@@ -76,23 +77,36 @@ export class Events extends React.Component<Props> {
     return this.items;
   }
 
-  @computed get header(): React.ReactNode {
+  customizeHeader = ({ info, title }: IHeaderPlaceholders) => {
-    const { items, visibleItems } = this;
+    const { compact } = this.props;
+    const { store, items, visibleItems } = this;
     const allEventsAreShown = visibleItems.length === items.length;
 
-    if (this.props.compact && !allEventsAreShown) {
+    // handle "compact"-mode header
+    if (compact) {
+      if (allEventsAreShown) return title; // title == "Events"
+
       return <>
-        Events <span className="events-count">
+        {title}
-        ({visibleItems.length} of <Link to={eventsURL()}>{items.length}</Link>)
+        <span> ({visibleItems.length} of <Link to={eventsURL()}>{items.length}</Link>)</span>
-        </span>
       </>;
     }
 
-    return <>Events</>;
+    return {
-  }
+      info: <>
+        {info}
+        <Icon
+          small
+          material="help_outline"
+          className="help-icon"
+          tooltip={`Limited to ${store.limit}`}
+        />
+      </>
+    };
+  };
 
   render() {
-    const { store, visibleItems, header, sortingCallbacks, sorting } = this;
+    const { store, visibleItems, sortingCallbacks, sorting } = this;
     const { compact, compactLimit, className, ...layoutProps } = this.props;
 
     const events = (
@@ -102,10 +116,11 @@ export class Events extends React.Component<Props> {
         tableId="events"
         store={store}
         className={cssNames("Events", className, { compact })}
+        renderHeaderTitle="Events"
+        customizeHeader={this.customizeHeader}
         isSelectable={false}
         items={visibleItems}
         virtual={!compact}
-        renderHeaderTitle={header}
         sortingCallbacks={sortingCallbacks}
         tableProps={{
           sortSyncWithUrl: false,
@@ -118,21 +133,6 @@ export class Events extends React.Component<Props> {
           (event: KubeEvent) => event.getSource(),
           (event: KubeEvent) => event.involvedObject.name,
         ]}
-        customizeHeader={({ title, info }) => (
-          compact ? title : ({
-            info: (
-              <>
-                {info}
-                <Icon
-                  small
-                  material="help_outline"
-                  className="help-icon"
-                  tooltip={`Limited to ${store.limit}`}
-                />
-              </>
-            )
-          })
-        )}
         renderTableHeader={[
           { title: "Type", className: "type", sortBy: columnId.type, id: columnId.type },
           { title: "Message", className: "message", id: columnId.message },

src/renderer/components/item-object-list/item-list-layout.tsx

@@ -28,7 +28,7 @@ import { namespaceStore } from "../+namespaces/namespace.store";
 export type SearchFilter<T extends ItemObject = any> = (item: T) => string | number | (string | number)[];
 export type ItemsFilter<T extends ItemObject = any> = (items: T[]) => T[];
 
-interface IHeaderPlaceholders {
+export interface IHeaderPlaceholders {
   title: ReactNode;
   search: ReactNode;
   filters: ReactNode;
@@ -372,7 +372,7 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
     let header = this.renderHeaderContent(placeholders);
 
     if (customizeHeader) {
-      const modifiedHeader = customizeHeader(placeholders, header);
+      const modifiedHeader = customizeHeader(placeholders, header) ?? {};
 
       if (isReactNode(modifiedHeader)) {
         header = modifiedHeader;