Add a tooltip with absolute datetime to relative time element (#1879)

* Add a tooltip with absolute datetime to relative time element

* Improve tooltip centering

Author: charliepark

app/components/TimeAgo.tsx

@@ -0,0 +1,37 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import type { Placement } from '@floating-ui/react'
+import { format } from 'date-fns'
+
+import { Tooltip } from '@oxide/ui'
+
+import { timeAgoAbbr } from 'app/util/date'
+
+export const TimeAgo = ({
+  datetime,
+  description,
+  placement = 'top',
+}: {
+  datetime: Date
+  description?: string
+  placement?: Placement
+}): JSX.Element => {
+  const content = (
+    <div className="flex flex-col">
+      <span className="text-tertiary">{description}</span>
+      <span>{format(datetime, 'MMM d, yyyy p')}</span>
+    </div>
+  )
+  return (
+    <span className="mt-0.5">
+      <Tooltip content={content} placement={placement}>
+        <span className="text-sans-sm text-tertiary">{timeAgoAbbr(datetime)}</span>
+      </Tooltip>
+    </span>
+  )
+}

libs/table/cells/InstanceStatusCell.tsx

@@ -8,21 +8,17 @@
 import type { Instance } from '@oxide/api'
 
 import { InstanceStatusBadge } from 'app/components/StatusBadge'
-import { timeAgoAbbr } from 'app/util/date'
+import { TimeAgo } from 'app/components/TimeAgo'
 
 import type { Cell } from './Cell'
-import { TwoLineCell } from './TwoLineCell'
 
 export const InstanceStatusCell = ({
   value,
 }: Cell<Pick<Instance, 'runState' | 'timeRunStateUpdated'>>) => {
   return (
-    <TwoLineCell
-      detailsClass="text-sans-sm"
-      value={[
-        <InstanceStatusBadge key="run-state" status={value.runState} />,
-        timeAgoAbbr(value.timeRunStateUpdated),
-      ]}
-    ></TwoLineCell>
+    <div className="flex flex-col">
+      <InstanceStatusBadge key="run-state" status={value.runState} />
+      <TimeAgo description="Run state updated" datetime={value.timeRunStateUpdated} />
+    </div>
   )
 }