refactor(front): set proper timestamps for workflow pipelines (#117)

Author: forestileao

front/assets/js/activity_monitor/items/item.js

@@ -143,8 +143,8 @@ function renderDebug(item, state) {
   }
 }
 
-function relativeTime(time) {
-  return `<relative-time datetime="${time}"></relative-time>`
+function timeAgo(time) {
+  return `<time-ago datetime="${time}"></time-ago>`
 }
 
 function renderPipeline(item, state) {
@@ -178,7 +178,7 @@ function renderPipeline(item, state) {
         <div class="w-25-l">
           <div class="flex flex-row-reverse-l items-center">
             <img src="${item.user_icon_path}" class="db br-100 ba b--black-50" width="32" height="32">
-            <div class="f5 gray ml2 ml3-m ml0-l mr3-l tr-l">${relativeTime(item.created_at)} <br> by ${escapeHtml(item.user_name)}</div>
+            <div class="f5 gray ml2 ml3-m ml0-l mr3-l tr-l">${timeAgo(item.created_at)} <br> by ${escapeHtml(item.user_name)}</div>
           </div>
         </div>
       </div>

front/assets/js/agents/components/activity_item.tsx

@@ -117,7 +117,7 @@ const PipelineActivity = (props: ActivityProps) => {
               height="32"
             />
             <div className="f5 gray ml2 ml3-m ml0-l mr3-l tr-l">
-              <relative-time dateTime={item.createdAt}/>
+              <time-ago datetime={item.createdAt}/>
               <br/> by {item.userName}
             </div>
           </div>
@@ -227,7 +227,7 @@ export const DebugActivity = (props: ActivityProps) => {
               height="32"
             />
             <div className="f5 gray ml2 ml3-m ml0-l mr3-l tr-l">
-              <relative-time dateTime={props.item.createdAt}/>
+              <time-ago datetime={props.item.createdAt}/>
               <br/> by {props.item.userName}
             </div>
           </div>

front/assets/js/app.js

@@ -5,6 +5,7 @@ import $ from "jquery";
 import { install } from '@github/hotkey';
 import { Userpilot } from "userpilot"
 
+import { defineTimeAgoElement } from "./time_ago";
 import { Tippy } from "./tippy";
 import { JumpTo } from "./jump_to/jump_to";
 import { Pollman } from "./pollman";
@@ -475,10 +476,7 @@ export var App = {
       })
     }
 
-    // This has to be required at the bottom of the body element
-    // therefore we require it within App.run() function
-    require("time-elements");
-
+    defineTimeAgoElement()
     managePageHeaderShaddows()
     enableMagicBreadcrumbs()
     maybeEnableUserpilot()

front/assets/js/custom_types/time-elements.d.ts

@@ -0,0 +1,16 @@
+// eslint-disable-next-line
+import * as preact from "preact";
+import { h } from "preact";
+// In place for time-ago element defined in /assets/time_ago.js. Without these definitions relative-time element will not be visible for JSX.
+
+interface TimeAgoProps extends h.JSX.HTMLAttributes<HTMLElement> {
+  datetime: string;
+}
+// eslint-disable-next-line
+declare module "preact" {
+  namespace JSX {
+    interface IntrinsicElements {
+      [`time-ago`]: TimeAgoProps;
+    }
+  }
+}

front/assets/js/custom_types/time_ago.d.ts

@@ -0,0 +1,73 @@
+class TimeAgo extends HTMLElement {
+    constructor() {
+        super();
+        this.datetime = this.getAttribute("datetime");
+        this.locale = this.getAttribute("locale") || "en"; // Default locale: English
+        this.updateTime = this.updateTime.bind(this);
+    }
+
+    connectedCallback() {
+        this.updateTime();
+        this.interval = setInterval(this.updateTime, 1000);
+    }
+
+    disconnectedCallback() {
+        clearInterval(this.interval);
+    }
+
+    updateTime() {
+        if (!this.datetime) {
+            this.textContent = "";
+            return;
+        }
+
+        const date = new Date(this.datetime);
+        if (isNaN(date)) {
+            this.textContent = "Invalid date";
+            return;
+        }
+
+        this.textContent = this.decorateRelative(date);
+    }
+
+    decorateRelative(date) {
+        const now = new Date();
+        const diffInSeconds = Math.floor((now - date) / 1000);
+        const daysDifference = Math.floor(diffInSeconds / 86400);
+
+        return daysDifference > 3 ? this.formatFullDate(date) : this.formatRelativeTime(diffInSeconds);
+    }
+
+    formatRelativeTime(seconds) {
+        const rtf = new Intl.RelativeTimeFormat(this.locale, { numeric: "auto" });
+
+        if (Math.abs(seconds) < 60) return rtf.format(-seconds, "second");
+        if (Math.abs(seconds) < 3600) return rtf.format(-Math.floor(seconds / 60), "minute");
+        if (Math.abs(seconds) < 86400) return rtf.format(-Math.floor(seconds / 3600), "hour");
+        return rtf.format(-Math.floor(seconds / 86400), "day");
+    }
+
+    formatFullDate(date) {
+        const options = { weekday: "short", day: "numeric", month: "short", year: "numeric" };
+        const formattedDate = date.toLocaleDateString(this.locale, options);
+        
+        const [weekday, month, day, year] = formattedDate.replaceAll(",", "").split(" ");
+        const suffixedDay = day + this.ordinalSuffix(parseInt(day, 10));
+        
+        return `on ${weekday} ${suffixedDay} ${month} ${year}`;
+    }
+
+    ordinalSuffix(day) {
+        if ([11, 12, 13].includes(day)) return "th";
+        switch (day % 10) {
+            case 1: return "st";
+            case 2: return "nd";
+            case 3: return "rd";
+            default: return "th";
+        }
+    }
+}
+
+export function defineTimeAgoElement() {
+    customElements.define("time-ago", TimeAgo);
+}

front/assets/js/time_ago.js

@@ -51,7 +51,6 @@
     "querystringify": "^2.1.1",
     "react-router-dom": "^6.3.0",
     "semver": "^7.5.4",
-    "time-elements": "^1.2.0",
     "tippy.js": "^6.3.7",
     "tom-select": "^2.0.3",
     "userpilot": "^1.3.5",

front/assets/package-lock.json

@@ -271,7 +271,10 @@ defmodule Front.Utils do
   end
 
   @doc """
-  Decorates a date in seconds in a relative format.
+  Decorates a date in seconds or a DateTime in a relative format.
+  If more than 3 days compared to the current date, display the whole date
+  in: Weekday, Day Month Year format.
+
   ## Examples
       iex> alias Front.Utils, as: Utils
       iex> Utils.decorate_relative(0)
@@ -280,14 +283,40 @@ defmodule Front.Utils do
       ""
       iex> Utils.decorate_relative(1616425200)
       "2 days ago"
+
+      iex> Utils.decorate_relative(~U[2025-03-07 22:05:26.833945Z])
+      "Fri 07th Mar 2025"
   """
-  @spec decorate_relative(integer | float | nil) :: String.t()
+  @spec decorate_relative(integer | float | DateTime.t() | nil) :: String.t()
   def decorate_relative(0), do: ""
   def decorate_relative(nil), do: ""
 
-  def decorate_relative(seconds) do
+  def decorate_relative(seconds) when is_integer(seconds) do
     seconds
     |> DateTime.from_unix!()
-    |> Timex.format!("{relative}", :relative)
+    |> decorate_relative()
+  end
+
+  def decorate_relative(date) do
+    if Timex.diff(DateTime.utc_now(), date, :days) > 3 do
+      unssufixed_date = Timex.format!(date, "%a %d %b %Y", :strftime)
+      [weekday, day, month, year] = String.split(unssufixed_date, " ")
+
+      suffixed_day = day <> ordinal_suffix(String.to_integer(day))
+      "on #{weekday} #{suffixed_day} #{month} #{year}"
+    else
+      Timex.format!(date, "{relative}", :relative)
+    end
+  end
+
+  defp ordinal_suffix(day) when day in [11, 12, 13], do: "th"
+
+  defp ordinal_suffix(day) do
+    case rem(day, 10) do
+      1 -> "st"
+      2 -> "nd"
+      3 -> "rd"
+      _ -> "th"
+    end
   end
 end

front/assets/package.json

@@ -38,7 +38,7 @@
             <div><%= event.description %></div>
             </div>
             <div class="tr">
-              <relative-time datetime="<%= DateTime.from_unix!(event.timestamp) %>" month="short" day="numeric" year="numeric" hour="numeric" minute="numeric" second="numeric" ></relative-time>
+              <time-ago datetime="<%= DateTime.from_unix!(event.timestamp) %>" ></time-ago>
               <div><span><%= event.medium %> &middot; <%= event.ip_address %></span></div>
             </div>
           </div>