reorganize event list

dashboard/src/main/home/cluster-dashboard/chart/JobRunTable.tsx

@@ -7,6 +7,7 @@ import api from "shared/api";
 import { Context } from "shared/Context";
 import { NewWebsocketOptions, useWebsockets } from "shared/hooks/useWebsockets";
 import { useRouting } from "shared/routing";
+import { relativeDate, timeFrom } from "shared/string_utils";
 import styled from "styled-components";
 
 type Props = {
@@ -15,26 +16,6 @@ type Props = {
   sortType: "Newest" | "Oldest" | "Alphabetical";
 };
 
-export const dateFormatter = (date: string | number) => {
-  if (!date) {
-    return "N/A";
-  }
-
-  // @ts-ignore
-  const rtf = new Intl.RelativeTimeFormat("en", {
-    localeMatcher: "best fit", // other values: "lookup"
-    numeric: "auto", // other values: "auto"
-    style: "long", // other values: "short" or "narrow"
-  });
-
-  const time = timeFrom(date);
-  if (!time) {
-    return "N/A";
-  }
-
-  return rtf.format(-time.time, time.unitOfTime);
-};
-
 const runnedFor = (start: string | number, end?: string | number) => {
   const duration = timeFrom(start, end);
 
@@ -46,65 +27,6 @@ const runnedFor = (start: string | number, end?: string | number) => {
   return `${duration.time} ${unit}`;
 };
 
-function timeFrom(time: string | number, secondTime?: string | number) {
-  // Get timestamps
-  let unixTime = new Date(time).getTime();
-  if (!unixTime) return;
-
-  let now = new Date().getTime();
-
-  if (secondTime) {
-    now = new Date(secondTime).getTime();
-  }
-
-  // Calculate difference
-  let difference = unixTime / 1000 - now / 1000;
-
-  // Setup return object
-  let tfn: any = {};
-
-  // Check if time is in the past, present, or future
-  tfn.when = "now";
-  if (difference > 0) {
-    tfn.when = "future";
-  } else if (difference < -1) {
-    tfn.when = "past";
-  }
-
-  // Convert difference to absolute
-  difference = Math.abs(difference);
-
-  // Calculate time unit
-  if (difference / (60 * 60 * 24 * 365) > 1) {
-    // Years
-    tfn.unitOfTime = "years";
-    tfn.time = Math.floor(difference / (60 * 60 * 24 * 365));
-  } else if (difference / (60 * 60 * 24 * 45) > 1) {
-    // Months
-    tfn.unitOfTime = "months";
-    tfn.time = Math.floor(difference / (60 * 60 * 24 * 45));
-  } else if (difference / (60 * 60 * 24) > 1) {
-    // Days
-    tfn.unitOfTime = "days";
-    tfn.time = Math.floor(difference / (60 * 60 * 24));
-  } else if (difference / (60 * 60) > 1) {
-    // Hours
-    tfn.unitOfTime = "hours";
-    tfn.time = Math.floor(difference / (60 * 60));
-  } else if (difference / 60 > 1) {
-    // Minutes
-    tfn.unitOfTime = "minutes";
-    tfn.time = Math.floor(difference / 60);
-  } else {
-    // Seconds
-    tfn.unitOfTime = "seconds";
-    tfn.time = Math.floor(difference);
-  }
-
-  // Return time from now data
-  return tfn;
-}
-
 const JobRunTable: React.FC<Props> = ({
   lastRunStatus,
   namespace,
@@ -199,7 +121,7 @@ const JobRunTable: React.FC<Props> = ({
       },
       {
         Header: "Run at",
-        accessor: (originalRow) => dateFormatter(originalRow.status.startTime),
+        accessor: (originalRow) => relativeDate(originalRow.status.startTime),
       },
       {
         Header: "Run for",

dashboard/src/main/home/cluster-dashboard/expanded-chart/events/EventList.tsx

@@ -8,7 +8,7 @@ import danger from "assets/danger.svg";
 import document from "assets/document.svg";
 import info from "assets/info-outlined.svg";
 import status from "assets/info-circle.svg";
-import { readableDate } from "shared/string_utils";
+import { readableDate, relativeDate } from "shared/string_utils";
 import TitleSection from "components/TitleSection";
 import api from "shared/api";
 import Modal from "main/home/modals/Modal";
@@ -106,14 +106,14 @@ const EventList: React.FC<Props> = ({ filters, setLogData }) => {
         Header: "Monitors",
         columns: [
           {
-            Header: "Name",
-            accessor: "release_name",
-            width: 180,
+            Header: "Description",
+            accessor: "short_summary",
+            width: 500,
             Cell: ({ row }: CellProps<any>) => {
               return (
                 <NameWrapper>
                   <AlertIcon src={danger} />
-                  {row.original.release_name}
+                  {row.original.short_summary}
                   {row?.original && row.original.severity === "normal" ? (
                     <></>
                   ) : (
@@ -124,16 +124,11 @@ const EventList: React.FC<Props> = ({ filters, setLogData }) => {
             },
           },
           {
-            Header: "Summary",
-            accessor: "short_summary",
-            width: 270,
-          },
-          {
-            Header: "Last updated",
+            Header: "Last seen",
             accessor: "updated_at",
             width: 140,
             Cell: ({ row }: CellProps<any>) => {
-              return <Flex>{readableDate(row.original.updated_at)}</Flex>;
+              return <Flex>{relativeDate(row.original.updated_at)}</Flex>;
             },
           },
           {

dashboard/src/shared/string_utils.ts

@@ -8,6 +8,88 @@ export const readableDate = (s: string) => {
   return `${time} on ${date}`;
 };
 
+export const relativeDate = (date: string | number) => {
+  if (!date) {
+    return "N/A";
+  }
+
+  // @ts-ignore
+  const rtf = new Intl.RelativeTimeFormat("en", {
+    localeMatcher: "best fit", // other values: "lookup"
+    numeric: "auto", // other values: "auto"
+    style: "long", // other values: "short" or "narrow"
+  });
+
+  const time = timeFrom(date);
+  if (!time) {
+    return "N/A";
+  }
+
+  return rtf.format(-time.time, time.unitOfTime);
+};
+
+export const timeFrom = (
+  time: string | number,
+  secondTime?: string | number
+) => {
+  // Get timestamps
+  let unixTime = new Date(time).getTime();
+  if (!unixTime) return;
+
+  let now = new Date().getTime();
+
+  if (secondTime) {
+    now = new Date(secondTime).getTime();
+  }
+
+  // Calculate difference
+  let difference = unixTime / 1000 - now / 1000;
+
+  // Setup return object
+  let tfn: any = {};
+
+  // Check if time is in the past, present, or future
+  tfn.when = "now";
+  if (difference > 0) {
+    tfn.when = "future";
+  } else if (difference < -1) {
+    tfn.when = "past";
+  }
+
+  // Convert difference to absolute
+  difference = Math.abs(difference);
+
+  // Calculate time unit
+  if (difference / (60 * 60 * 24 * 365) > 1) {
+    // Years
+    tfn.unitOfTime = "years";
+    tfn.time = Math.floor(difference / (60 * 60 * 24 * 365));
+  } else if (difference / (60 * 60 * 24 * 45) > 1) {
+    // Months
+    tfn.unitOfTime = "months";
+    tfn.time = Math.floor(difference / (60 * 60 * 24 * 45));
+  } else if (difference / (60 * 60 * 24) > 1) {
+    // Days
+    tfn.unitOfTime = "days";
+    tfn.time = Math.floor(difference / (60 * 60 * 24));
+  } else if (difference / (60 * 60) > 1) {
+    // Hours
+    tfn.unitOfTime = "hours";
+    tfn.time = Math.floor(difference / (60 * 60));
+  } else if (difference / 60 > 1) {
+    // Minutes
+    tfn.unitOfTime = "minutes";
+    tfn.time = Math.floor(difference / 60);
+  } else {
+    // Seconds
+    tfn.unitOfTime = "seconds";
+    tfn.time = Math.floor(difference);
+  }
+
+  // Return time from now data
+  return tfn;
+};
+
 export const capitalize = (s: string) => {
   return s.charAt(0).toUpperCase() + s.substring(1).toLowerCase();
 };