DT-3307 - add custom timestamp formats

src/lib/components/batch-operations/details.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
+  import Timestamp from '$lib/components/timestamp.svelte';
   import { translate } from '$lib/i18n/translate';
-  import { relativeTime, timeFormat } from '$lib/stores/time-format';
   import type { BatchOperation } from '$lib/types/batch';
-  import { formatDate } from '$lib/utilities/format-date';
 
   export let operation: BatchOperation;
 </script>
@@ -27,19 +26,11 @@
   </div>
   <div class="batch-operation-detail">
     <p class="batch-operation-key">{translate('common.start-time')}</p>
-    <p class="batch-operation-value">
-      {formatDate(operation.startTime, $timeFormat, {
-        relative: $relativeTime,
-      })}
-    </p>
+    <Timestamp as="p" class="col-span-8" dateTime={operation.startTime} />
   </div>
   <div class="batch-operation-detail">
     <p class="batch-operation-key">{translate('common.close-time')}</p>
-    <p class="batch-operation-value">
-      {formatDate(operation.closeTime, $timeFormat, {
-        relative: $relativeTime,
-      })}
-    </p>
+    <Timestamp as="p" class="col-span-8" dateTime={operation.startTime} />
   </div>
   <div class="batch-operation-detail">
     <p class="batch-operation-key">

src/lib/components/batch-operations/table.svelte

@@ -1,17 +1,16 @@
 <script lang="ts">
+  import Timestamp from '$lib/components/timestamp.svelte';
   import Badge, { type BadgeType } from '$lib/holocene/badge.svelte';
   import EmptyState from '$lib/holocene/empty-state.svelte';
   import Link from '$lib/holocene/link.svelte';
   import TableHeaderRow from '$lib/holocene/table/table-header-row.svelte';
   import TableRow from '$lib/holocene/table/table-row.svelte';
   import Table from '$lib/holocene/table/table.svelte';
   import { translate } from '$lib/i18n/translate';
-  import { relativeTime, timeFormat } from '$lib/stores/time-format';
   import type {
     BatchOperationInfo,
     BatchOperationState,
   } from '$lib/types/batch';
-  import { formatDate } from '$lib/utilities/format-date';
   import { routeForBatchOperation } from '$lib/utilities/route-for';
 
   export let namespace: string;
@@ -46,16 +45,8 @@
         ><Link href={routeForBatchOperation({ namespace, jobId })}>{jobId}</Link
         ></td
       >
-      <td class="max-sm:hidden"
-        >{formatDate(startTime, $timeFormat, {
-          relative: $relativeTime,
-        })}</td
-      >
-      <td class="max-sm:hidden"
-        >{formatDate(closeTime, $timeFormat, {
-          relative: $relativeTime,
-        })}</td
-      >
+      <Timestamp as="td" class="max-sm:hidden" dateTime={startTime} />
+      <Timestamp as="td" class="max-sm:hidden" dateTime={closeTime} />
     </TableRow>
   {:else}
     <TableRow>

src/lib/components/deployments/deployment-table-row.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
   import { page } from '$app/stores';
 
+  import Timestamp from '$lib/components/timestamp.svelte';
   import Link from '$lib/holocene/link.svelte';
   import { translate } from '$lib/i18n/translate';
   import type { ConfigurableTableHeader } from '$lib/stores/configurable-table-columns';
-  import { relativeTime, timeFormat } from '$lib/stores/time-format';
   import type { WorkerDeploymentSummary } from '$lib/types/deployments';
-  import { formatDate } from '$lib/utilities/format-date';
   import { getBuildIdFromVersion } from '$lib/utilities/get-deployment-build-id';
   import {
     routeForWorkerDeployment,
@@ -97,37 +96,23 @@
       <td class="truncate py-1 text-left">
         <div class="flex flex-col gap-1">
           {#if latestBuildId && latestNotDuplicate && deployment.latestVersionSummary?.createTime}
-            <p>
-              {formatDate(
-                deployment.latestVersionSummary.createTime,
-                $timeFormat,
-                {
-                  relative: $relativeTime,
-                },
-              )}
-            </p>
+            <Timestamp
+              as="p"
+              dateTime={deployment.latestVersionSummary.createTime}
+            />
           {/if}
           {#if rampingBuildId && rampingVersionDeployedTimestamp}
-            <p>
-              {formatDate(rampingVersionDeployedTimestamp, $timeFormat, {
-                relative: $relativeTime,
-              })}
-            </p>
+            <Timestamp as="p" dateTime={rampingVersionDeployedTimestamp} />
+          {/if}
+          {#if versionedCurrent}
+            <Timestamp
+              as="p"
+              dateTime={deployment?.currentVersionSummary?.createTime ||
+                deployment.createTime}
+            />
+          {:else}
+            <p>-</p>
           {/if}
-          <p>
-            {#if versionedCurrent}
-              {formatDate(
-                deployment?.currentVersionSummary?.createTime ||
-                  deployment.createTime,
-                $timeFormat,
-                {
-                  relative: $relativeTime,
-                },
-              )}
-            {:else}
-              -
-            {/if}
-          </p>
         </div>
       </td>
     {:else if label === translate('deployments.actions')}

src/lib/components/deployments/version-details.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
   import { translate } from '$lib/i18n/translate';
-  import { relativeTime, timeFormat } from '$lib/stores/time-format';
+  import {
+    relativeTime,
+    timeFormat,
+    timestampFormat,
+  } from '$lib/stores/time-format';
   import type { WorkerDeploymentVersionInfo } from '$lib/types/deployments';
   import { formatDate } from '$lib/utilities/format-date';
 
@@ -19,6 +23,7 @@
       title={translate('deployments.rollout-started')}
       content={formatDate(version.createTime, $timeFormat, {
         relative: $relativeTime,
+        format: $timestampFormat,
       })}
     />
   </div>

src/lib/components/deployments/version-table-row.svelte

@@ -1,17 +1,16 @@
 <script lang="ts">
   import { page } from '$app/stores';
 
+  import Timestamp from '$lib/components/timestamp.svelte';
   import Link from '$lib/holocene/link.svelte';
   import { translate } from '$lib/i18n/translate';
   import type { ConfigurableTableHeader } from '$lib/stores/configurable-table-columns';
-  import { relativeTime, timeFormat } from '$lib/stores/time-format';
   import type { DeploymentStatus as Status } from '$lib/types/deployments';
   import {
     isVersionSummaryNew,
     type RoutingConfig,
     type VersionSummary,
   } from '$lib/types/deployments';
-  import { formatDate } from '$lib/utilities/format-date';
   import {
     getBuildIdFromVersion,
     getDeploymentFromVersion,
@@ -105,22 +104,18 @@
         <div class="flex items-center gap-2">
           <DeploymentStatus {status} label={statusLabel} />
           {#if isCurrent && isVersionSummaryNew(version) && version?.currentSinceTime}
-            Since {formatDate(version?.currentSinceTime, $timeFormat, {
-              relative: $relativeTime,
-            })}
+            Since <Timestamp dateTime={version.currentSinceTime} />
           {:else if isRamping && isVersionSummaryNew(version) && version?.rampingSinceTime}
-            Since {formatDate(version?.rampingSinceTime, $timeFormat, {
-              relative: $relativeTime,
-            })}
+            Since <Timestamp dateTime={version.rampingSinceTime} />
           {/if}
         </div>
       </td>
     {:else if label === translate('deployments.deployed')}
-      <td class="whitespace-pre-line break-words text-left"
-        >{formatDate(version?.createTime, $timeFormat, {
-          relative: $relativeTime,
-        })}</td
-      >
+      <Timestamp
+        as="td"
+        class="whitespace-pre-line break-words text-left"
+        dateTime={version?.createTime}
+      />
     {:else if label === translate('deployments.actions')}
       <td class="w-24 whitespace-pre-line break-words">
         <Link

src/lib/components/event/event-card.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
   import { page } from '$app/state';
 
+  import Timestamp from '$lib/components/timestamp.svelte';
   import CodeBlock from '$lib/holocene/code-block.svelte';
   import Copyable from '$lib/holocene/copyable/index.svelte';
   import Link from '$lib/holocene/link.svelte';
   import { translate } from '$lib/i18n/translate';
-  import { relativeTime, timeFormat } from '$lib/stores/time-format';
   import type { EventLink as ELink } from '$lib/types';
   import { type Payload } from '$lib/types';
   import type { WorkflowEvent } from '$lib/types/events';
@@ -14,7 +14,6 @@
     format,
     spaceBetweenCapitalLetters,
   } from '$lib/utilities/format-camel-case';
-  import { formatDate } from '$lib/utilities/format-date';
   import { formatAttributes } from '$lib/utilities/format-event-attributes';
   import {
     displayLinkType,
@@ -79,11 +78,7 @@
         {displayName}
       </p>
     </div>
-    <p class="text-sm">
-      {formatDate(event.eventTime, $timeFormat, {
-        relative: $relativeTime,
-      })}
-    </p>
+    <Timestamp as="p" class="text-sm" dateTime={event.eventTime} />
   </div>
   <div class="flex flex-col gap-1 xl:flex-row">
     <div class="flex w-full flex-col gap-1 xl:w-1/2">
@@ -254,7 +249,11 @@
       {format(key)}
     </p>
     <p class="whitespace-pre-line break-all">
-      {shouldDisplayAsTime(key) ? formatDate(value, $timeFormat) : value}
+      {#if shouldDisplayAsTime(key)}
+        <Timestamp dateTime={value} />
+      {:else}
+        {value}
+      {/if}
     </p>
   </div>
 {/snippet}

src/lib/components/event/event-summary-row.svelte

@@ -19,7 +19,11 @@
   } from '$lib/models/event-groups/get-event-in-group';
   import { isCloud } from '$lib/stores/advanced-visibility';
   import { authUser } from '$lib/stores/auth-user';
-  import { relativeTime, timeFormat } from '$lib/stores/time-format';
+  import {
+    relativeTime,
+    timeFormat,
+    timestampFormat,
+  } from '$lib/stores/time-format';
   import type { IterableEvent, WorkflowEvent } from '$lib/types/events';
   import { decodeLocalActivity } from '$lib/utilities/decode-local-activity';
   import { spaceBetweenCapitalLetters } from '$lib/utilities/format-camel-case';
@@ -161,13 +165,14 @@
   const eventTime = $derived(
     formatDate(currentEvent?.eventTime, $timeFormat, {
       relative: $relativeTime,
+      format: $timestampFormat,
     }),
   );
 
   const abbrEventTime = $derived(
     formatDate(currentEvent?.eventTime, $timeFormat, {
       relative: $relativeTime,
-      abbrFormat: true,
+      format: 'short',
     }),
   );
 

src/lib/components/event/pending-activity-summary-row.svelte

@@ -10,7 +10,11 @@
   import { translate } from '$lib/i18n/translate';
   import type { EventGroup } from '$lib/models/event-groups/event-groups';
   import { isCloud } from '$lib/stores/advanced-visibility';
-  import { relativeTime, timeFormat } from '$lib/stores/time-format';
+  import {
+    relativeTime,
+    timeFormat,
+    timestampFormat,
+  } from '$lib/stores/time-format';
   import type { PendingActivity } from '$lib/types/events';
   import { formatDate } from '$lib/utilities/format-date';
   import { routeForEventHistoryEvent } from '$lib/utilities/route-for';
@@ -45,15 +49,18 @@
       run,
     }),
   );
+
   let eventTime = $derived(
     formatDate(group?.eventTime, $timeFormat, {
       relative: $relativeTime,
+      format: $timestampFormat,
     }),
   );
+
   let abbrEventTime = $derived(
     formatDate(group?.eventTime, $timeFormat, {
       relative: $relativeTime,
-      abbrFormat: true,
+      format: 'short',
     }),
   );
 

src/lib/components/event/pending-nexus-summary-row.svelte

@@ -8,7 +8,11 @@
   import { translate } from '$lib/i18n/translate';
   import type { EventGroup } from '$lib/models/event-groups/event-groups';
   import { isCloud } from '$lib/stores/advanced-visibility';
-  import { relativeTime, timeFormat } from '$lib/stores/time-format';
+  import {
+    relativeTime,
+    timeFormat,
+    timestampFormat,
+  } from '$lib/stores/time-format';
   import type { PendingNexusOperation } from '$lib/types/events';
   import { formatDate } from '$lib/utilities/format-date';
   import { routeForEventHistoryEvent } from '$lib/utilities/route-for';
@@ -46,12 +50,14 @@
   let eventTime = $derived(
     formatDate(group?.eventTime, $timeFormat, {
       relative: $relativeTime,
+      format: $timestampFormat,
     }),
   );
+
   let abbrEventTime = $derived(
     formatDate(group?.eventTime, $timeFormat, {
       relative: $relativeTime,
-      abbrFormat: true,
+      format: 'short',
     }),
   );
 

src/lib/components/lines-and-dots/svg/timeline-graph.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Timestamp from '$lib/components/timestamp.svelte';
   import type {
     EventGroup,
     EventGroups,
@@ -7,10 +8,8 @@
   import { eventFilterSort } from '$lib/stores/event-view';
   import { fullEventHistory } from '$lib/stores/events';
   import { eventStatusFilter } from '$lib/stores/filters';
-  import { timeFormat } from '$lib/stores/time-format';
   import type { WorkflowExecution } from '$lib/types/workflows';
   import { isWorkflowDelayed } from '$lib/utilities/delayed-workflows';
-  import { formatDate } from '$lib/utilities/format-date';
   import { getFailedOrPendingGroups } from '$lib/utilities/get-failed-or-pending';
 
   import { TimelineConfig } from '../constants';
@@ -76,12 +75,16 @@
       class:invisible={!!$activeGroups.length}
     >
       <div class="flex w-full justify-between text-xs">
-        <p class="w-60 -translate-x-24 rotate-90">
-          {formatDate(startTime, $timeFormat)}
-        </p>
-        <p class="w-60 translate-x-24 rotate-90">
-          {formatDate(endTime, $timeFormat)}
-        </p>
+        <Timestamp
+          as="p"
+          class="w-60 -translate-x-24 rotate-90"
+          dateTime={startTime}
+        />
+        <Timestamp
+          as="p"
+          class="w-60 translate-x-24 rotate-90"
+          dateTime={endTime}
+        />
       </div>
     </div>
     <svg