diff --git a/frontend/src/component/common/Table/cells/DateTimeCell/DateTimeCell.tsx b/frontend/src/component/common/Table/cells/DateTimeCell/DateTimeCell.tsx new file mode 100644 index 0000000000..f6d8bc0c65 --- /dev/null +++ b/frontend/src/component/common/Table/cells/DateTimeCell/DateTimeCell.tsx @@ -0,0 +1,21 @@ +import { VFC } from 'react'; +import { useLocationSettings } from 'hooks/useLocationSettings'; +import { formatDateYMDHM } from 'utils/formatDate'; +import { parseISO } from 'date-fns'; +import { TextCell } from 'component/common/Table/cells/TextCell/TextCell'; + +interface IDateTimeCellProps { + value?: Date | string | null; +} + +export const DateTimeCell: VFC = ({ value }) => { + const { locationSettings } = useLocationSettings(); + + const date = value + ? value instanceof Date + ? formatDateYMDHM(value, locationSettings.locale) + : formatDateYMDHM(parseISO(value), locationSettings.locale) + : undefined; + + return {date}; +}; diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx index 734e0f9ace..6d160472bb 100644 --- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx @@ -1,6 +1,6 @@ import { IFeatureMetricsRaw } from 'interfaces/featureToggle'; import { TableBody, TableRow, useMediaQuery } from '@mui/material'; -import { DateCell } from 'component/common/Table/cells/DateCell/DateCell'; +import { DateTimeCell } from 'component/common/Table/cells/DateTimeCell/DateTimeCell'; import { useTable, useGlobalFilter, useSortBy } from 'react-table'; import { SortableTableHeader, TableCell, Table } from 'component/common/Table'; import { IconCell } from 'component/common/Table/cells/IconCell/IconCell'; @@ -89,7 +89,9 @@ const COLUMNS = [ { Header: 'Time', accessor: 'timestamp', - Cell: (props: any) => , + Cell: (props: any) => ( + + ), }, { Header: 'Application', diff --git a/frontend/src/utils/formatDate.ts b/frontend/src/utils/formatDate.ts index 0bc10ff721..5d5fde2e49 100644 --- a/frontend/src/utils/formatDate.ts +++ b/frontend/src/utils/formatDate.ts @@ -12,6 +12,19 @@ export const formatDateYMDHMS = ( }); }; +export const formatDateYMDHM = ( + date: number | string | Date, + locale: string +): string => { + return new Date(date).toLocaleString(locale, { + day: '2-digit', + month: '2-digit', + year: 'numeric', + hour: '2-digit', + minute: '2-digit', + }); +}; + export const formatDateYMD = ( date: number | string | Date, locale: string