Human readable relative time (#6613)

* human readable date time

* lint

* feedback

* lint

web-admin/src/features/dashboards/listing/utils.ts

@@ -1,16 +1,31 @@
 import { DateTime, Duration } from "luxon";
 
+function formatUnit(value: number, unit: string): string {
+  return `${value} ${value === 1 ? unit : unit + "s"} ago`;
+}
+
 export function timeAgo(date: Date): string {
   const now = DateTime.now();
   const then = DateTime.fromJSDate(date);
   const diff = Duration.fromMillis(now.diff(then).milliseconds);
 
-  if (diff.as("minutes") < 1) return "just now";
-  if (diff.as("hours") < 1) return `${Math.floor(diff.as("minutes"))}m ago`;
-  if (diff.as("days") < 1) return `${Math.floor(diff.as("hours"))}h ago`;
-  if (diff.as("weeks") < 1) return `${Math.floor(diff.as("days"))}d ago`;
-  if (diff.as("months") < 1) return `${Math.floor(diff.as("weeks"))}w ago`;
-  if (diff.as("years") < 1) return `${Math.floor(diff.as("months"))}M ago`;
+  if (diff.as("minutes") < 1) return "Just now";
+
+  const minutes = Math.round(diff.as("minutes"));
+  if (diff.as("hours") < 1) return formatUnit(minutes, "minute");
+
+  const hours = Math.round(diff.as("hours"));
+  if (diff.as("days") < 1) return formatUnit(hours, "hour");
+
+  const days = Math.round(diff.as("days"));
+  if (diff.as("weeks") < 1) return formatUnit(days, "day");
+
+  const weeks = Math.round(diff.as("weeks"));
+  if (diff.as("months") < 1) return formatUnit(weeks, "week");
+
+  const months = Math.round(diff.as("months"));
+  if (diff.as("years") < 1) return formatUnit(months, "month");
 
-  return `${Math.floor(diff.as("years"))}y ago`;
+  const years = Math.round(diff.as("years"));
+  return formatUnit(years, "year");
 }

web-admin/src/features/projects/environment-variables/ActivityCell.svelte

@@ -1,34 +1,26 @@
 <script lang="ts">
   import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
   import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
-  import { timeAgo } from "../../dashboards/listing/utils";
+  import { DateTime } from "luxon";
+  import TimeAgo from "./TimeAgo.svelte";
 
   export let updatedOn: string;
 
-  function formatText() {
-    const updatedDate = new Date(updatedOn);
-
-    // FIXME: `updateProjectVariables` does not update the `updatedOn` timestamp correctly
-    // if (createdDate.getTime() === updatedDate.getTime()) {
-    //   return `Added ${timeAgo(createdDate)}`;
-    // }
-
-    return `${timeAgo(updatedDate)}`;
-  }
-
-  $: formattedText = formatText();
+  $: fullDate = DateTime.fromISO(updatedOn).toLocaleString(
+    DateTime.DATETIME_FULL,
+  );
 </script>
 
 <div class="flex justify-start items-center">
   <Tooltip distance={8} location="top">
     <div
       class="flex flex-row gap-x-1 text-gray-500 cursor-pointer w-fit truncate line-clamp-1"
     >
-      {formattedText}
+      <TimeAgo datetime={updatedOn} />
     </div>
     <TooltipContent slot="tooltip-content">
       <span class="text-xs text-gray-50 font-medium">
-        {new Date(updatedOn).toLocaleString()}
+        {fullDate}
       </span>
     </TooltipContent>
   </Tooltip>

web-admin/src/features/projects/environment-variables/TimeAgo.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { onDestroy } from "svelte";
+  import { timeAgo } from "../../dashboards/listing/utils";
+  import { Duration } from "luxon";
+
+  export let datetime: Date | string;
+
+  let formattedTime: string;
+  let interval: ReturnType<typeof setInterval> | null = null;
+  let lastInterval: number | null = null;
+
+  const INTERVALS = {
+    SECOND: Duration.fromObject({ seconds: 1 }).toMillis(),
+    MINUTE: Duration.fromObject({ minutes: 1 }).toMillis(),
+    FIVE_MINUTES: Duration.fromObject({ minutes: 5 }).toMillis(),
+    HOUR: Duration.fromObject({ hours: 1 }).toMillis(),
+  };
+
+  function getInterval(date: Date): number {
+    const diff = Duration.fromMillis(Date.now() - date.getTime());
+    if (diff.as("minutes") < 1) return INTERVALS.SECOND;
+    if (diff.as("hours") < 1) return INTERVALS.MINUTE;
+    if (diff.as("days") < 1) return INTERVALS.FIVE_MINUTES;
+    return INTERVALS.HOUR;
+  }
+
+  function updateTimeAgo(date: Date) {
+    formattedTime = timeAgo(date);
+
+    const newInterval = getInterval(date);
+    if (newInterval !== lastInterval) {
+      lastInterval = newInterval;
+      resetInterval(newInterval);
+    }
+  }
+
+  function resetInterval(newInterval: number) {
+    if (interval) clearInterval(interval);
+    interval = setInterval(
+      () => updateTimeAgo(new Date(datetime)),
+      newInterval,
+    );
+  }
+
+  $: {
+    const date = new Date(datetime);
+    updateTimeAgo(date);
+  }
+
+  onDestroy(() => {
+    if (interval) clearInterval(interval);
+  });
+</script>
+
+<time datetime={datetime.toString()}>{formattedTime}</time>