chore: Show an age with a full tooltip of timestamp

Fixes #2232 Update src/ui/Age/Age.tsx Co-authored-by: Moshe Immerman <[email protected]> fix: fix formatting issue
flanksource · Sep 3, 2024 · 2a99e38 · 2a99e38
1 parent 03c2287
commit 2a99e38
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 19 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -4,6 +4,7 @@ import { initialize, mswLoader } from "msw-storybook-addon";
 import { RouterContext } from "next/dist/shared/lib/router-context.shared-runtime";
 import React from "react";
 import { MemoryRouter } from "react-router-dom";
+import "react-tooltip/dist/react-tooltip.css";
 import "tailwindcss/tailwind.css";
 import "../pages/global.css";
 import "./storybook.css";

diff --git a/src/ui/Age/Age.stories.tsx b/src/ui/Age/Age.stories.tsx
@@ -0,0 +1,16 @@
+import { Meta } from "@storybook/react";
+import dayjs from "dayjs";
+import Age from "./Age";
+
+export default {
+  component: Age,
+  title: "Age"
+} satisfies Meta;
+
+export const Default = () => (
+  <Age from={dayjs().subtract(1, "d").toISOString()} />
+);
+
+export const WithFromAndTwo = () => (
+  <Age from={dayjs().toISOString()} to={dayjs().add(2, "h").toISOString()} />
+);
diff --git a/src/ui/Age/Age.tsx b/src/ui/Age/Age.tsx
@@ -1,45 +1,84 @@
-import dayjs from "dayjs";
 import clsx from "clsx";
+import dayjs from "dayjs";
+import LocalizedFormat from "dayjs/plugin/localizedFormat";
+import { Tooltip } from "react-tooltip";
 import { isEmpty } from "../../utils/date";
 
+function formatDate(data: dayjs.Dayjs) {
+  return data.format("YYYY-MM-DD HH:mm:ssZ");
+}
+
+dayjs.extend(LocalizedFormat);
+
+type AgeProps = {
+  className?: string;
+  from?: Date | string;
+  to?: Date | string;
+  suffix?: boolean;
+};
+
 export default function Age({
   className = "",
   from,
   to,
   suffix = false
-}: {
-  className?: string;
-  from?: Date | string;
-  to?: Date | string;
-  suffix?: boolean;
-}) {
+}: AgeProps) {
   if (isEmpty(from)) {
     return null;
   }
-  let _from = dayjs(from);
+
+  const _from = dayjs(from);
 
   if (isEmpty(to)) {
     return (
-      <span title={_from.format()} className={className}>
-        {_from.local().fromNow(!suffix)}
-      </span>
+      <>
+        <span
+          data-tooltip-id={`age-tooltip-${_from.local().fromNow(!suffix)}`}
+          className={className}
+        >
+          {_from.local().fromNow(!suffix)}
+        </span>
+        <Tooltip
+          id={`age-tooltip-${_from.local().fromNow(!suffix)}`}
+          content={formatDate(_from)}
+        />
+      </>
     );
   }
-  let _to = dayjs(to);
 
-  let duration = dayjs.duration(_to.diff(_from));
+  const _to = dayjs(to);
+
+  const duration = dayjs.duration(_to.diff(_from));
 
   if (duration.asMilliseconds() < 1000) {
     return (
-      <span title={_from.format()} className={className}>
-        {duration.asMilliseconds()}ms
-      </span>
+      <>
+        <span
+          data-tooltip-id={`age-tooltip-${duration.asMilliseconds()}`}
+          className={className}
+        >
+          {duration.asMilliseconds()}ms
+        </span>
+        <Tooltip
+          id={`age-tooltip-${duration.asMilliseconds()}`}
+          content={`${formatDate(_from)}`}
+        />
+      </>
     );
   }
 
   return (
-    <span className={clsx(className, "whitespace-nowrap")}>
-      {_from.local().to(_to)}
-    </span>
+    <>
+      <span
+        data-tooltip-id={`age-tooltip-${_from.local().to(_to)}`}
+        className={clsx(className, "whitespace-nowrap")}
+      >
+        {_from.local().to(_to)}
+      </span>
+      <Tooltip
+        id={`age-tooltip-${_from.local().to(_to)}`}
+        content={`${formatDate(_from)} - ${formatDate(_to)}`}
+      />
+    </>
   );
 }