feat: added date time formatter in resource explorer table #2140

awslabs · Nov 21, 2023 · 10137b7 · 10137b7
1 parent cea7c30
commit 10137b7
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git a/...eledDataStreamQueryEditor/assetExplorer/assetTable/assetTableColumnDefinitionsFactory.tsx b/...eledDataStreamQueryEditor/assetExplorer/assetTable/assetTableColumnDefinitionsFactory.tsx
@@ -3,6 +3,7 @@ import { type TableProps } from '@cloudscape-design/components/table';
 import React from 'react';
 
 import type { AssetTableNameLinkProps } from './assetTableNameLink';
+import { getFormattedDateTime } from '~/components/util/dateTimeUtil';
 
 type AssetTableColumnDefinitions = TableProps<AssetSummary>['columnDefinitions'];
 
@@ -80,7 +81,7 @@ export class AssetTableColumnDefinitionsFactory {
     return {
       id: 'creationDate',
       header: 'Creation Date',
-      cell: ({ creationDate }) => creationDate?.toString() ?? '-',
+      cell: ({ creationDate }) => (creationDate ? getFormattedDateTime(creationDate) : '-'),
       sortingField: 'creationDate',
     };
   }
@@ -89,7 +90,7 @@ export class AssetTableColumnDefinitionsFactory {
     return {
       id: 'lastUpdateDate',
       header: 'Last Update Date',
-      cell: ({ lastUpdateDate }) => lastUpdateDate?.toString() ?? '-',
+      cell: ({ lastUpdateDate }) => (lastUpdateDate ? getFormattedDateTime(lastUpdateDate) : '-'),
       sortingField: 'lastUpdateDate',
     };
   }

diff --git a/packages/dashboard/src/components/util/dateTimeUtil.spec.tsx b/packages/dashboard/src/components/util/dateTimeUtil.spec.tsx
@@ -0,0 +1,6 @@
+import { getFormattedDateTime } from './dateTimeUtil';
+
+it('should format the Date to full Date and Time value', () => {
+  const rawDate = new Date(1665583620000 + new Date().getTimezoneOffset() * 60000);
+  expect(getFormattedDateTime(rawDate)).toEqual(`10/12/22 14:07:00`);
+});
diff --git a/packages/dashboard/src/components/util/dateTimeUtil.tsx b/packages/dashboard/src/components/util/dateTimeUtil.tsx
@@ -0,0 +1,7 @@
+// Format Date object to get date and time to display MM/DD/YY HH:MM:SS format
+export const getFormattedDateTime = (rawDate: Date) => {
+  const date = rawDate.getMonth() + 1 + '/' + rawDate.getDate() + '/' + rawDate.getFullYear().toString().slice(-2);
+  const time = rawDate.toTimeString().split(' ')[0];
+  const dateTime = date + ' ' + time;
+  return dateTime;
+};