Timezone

package.json

@@ -37,6 +37,7 @@
 		"just-compare": "^2.3.0",
 		"lodash": "^4.17.21",
 		"long": "^5.2.3",
+		"moment-timezone": "^0.5.45",
 		"ms": "^2.1.3",
 		"nice-grpc-common": "^2.0.2",
 		"nice-grpc-web": "^3.3.2",

src/pages/Stream/Views/Manage/Info.tsx

@@ -3,9 +3,11 @@ import classes from '../../styles/Management.module.css';
 import { useStreamStore } from '../../providers/StreamProvider';
 import _ from 'lodash';
 import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
-import dayjs from 'dayjs';
 import UpdateTimePartitionLimit from './UpdateTimePartitionLimit';
 import UpdateCustomPartitionField from './UpdateCustomPartitionField';
+import timeRangeUtils from '@/utils/timeRangeUtils';
+
+const { formatDateWithTimezone } = timeRangeUtils;
 
 const Header = () => {
 	return (
@@ -44,14 +46,11 @@ const InfoData = (props: { isLoading: boolean }) => {
 	const [info] = useStreamStore((store) => store.info);
 	const [currentStream] = useAppStore((store) => store.currentStream);
 
-	const createdAt = _.chain(info)
-		.get('created-at', '')
-		.thru((val) => (val !== '' ? dayjs(val).format('HH:mm A DD MMM YYYY') : '-'))
-		.value();
-	const firstEventAt = _.chain(info)
-		.get('first-event-at', '')
-		.thru((val) => (val !== '' ? dayjs(val).format('HH:mm A DD MMM YYYY') : '-'))
-		.value();
+	const createdAt = _.get(info, 'created-at');
+	const firstEventAt = _.get(info, 'first-event-at');
+	const createdAtWithTz = createdAt ? formatDateWithTimezone(createdAt) : '-';
+	const firstEventAtWithTz = firstEventAt ? formatDateWithTimezone(firstEventAt) : '-';
+
 	const timePartition = _.get(info, 'time_partition', '-');
 	const staticSchemaFlag = _.chain(info)
 		.get('static_schema_flag', '')
@@ -70,8 +69,8 @@ const InfoData = (props: { isLoading: boolean }) => {
 				<Stack style={{ flex: 1, padding: '1.5rem', justifyContent: 'space-between' }}>
 					<Stack gap={0} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
 						<InfoItem title="Name" value={currentStream || ''} />
-						<InfoItem title="Created At" value={createdAt} />
-						<InfoItem title="First Event At" value={firstEventAt} />
+						<InfoItem title="Created At" value={createdAtWithTz} />
+						<InfoItem title="First Event At" value={firstEventAtWithTz} />
 					</Stack>
 					<Stack gap={0} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
 						<InfoItem title="Schema Type" value={staticSchemaFlag} />

src/pages/Stream/Views/Manage/Settings.tsx

@@ -8,6 +8,9 @@ import { useCallback, useEffect, useState } from 'react';
 import { useStreamStore } from '../../providers/StreamProvider';
 import { IconCheck, IconTrash, IconX } from '@tabler/icons-react';
 import { sanitizeBytes, convertGibToBytes } from '@/utils/formatBytes';
+import timeRangeUtils from '@/utils/timeRangeUtils';
+
+const { formatDateWithTimezone } = timeRangeUtils;
 
 const Header = () => {
 	return (
@@ -231,7 +234,7 @@ const HotTierConfig = (props: {
 				<Stack gap={4} style={{ ...(hotTierNotSet ? { display: 'none' } : {}) }}>
 					<Text className={classes.fieldDescription}>Oldest Record:</Text>
 					<Text className={classes.fieldDescription}>
-						{_.isEmpty(oldestEntry) ? 'No Entries Stored' : new Date(oldestEntry).toLocaleString()}
+						{_.isEmpty(oldestEntry) ? 'No Entries Stored' : formatDateWithTimezone(oldestEntry)}
 					</Text>
 				</Stack>
 				<Stack style={{ width: hotTierNotSet ? '100%' : '50%' }} gap={isDirty || hotTierNotSet ? 16 : 4}>

src/utils/timeRangeUtils.ts

@@ -1,4 +1,5 @@
 import dayjs from 'dayjs';
+import moment from 'moment-timezone';
 import _ from 'lodash';
 
 const defaultTimeRangeOption = {
@@ -64,9 +65,17 @@ const getDefaultTimeRangeOption = (
 	return selectedTimeRange ? selectedTimeRange : defaultTimeRangeOption;
 };
 
+//accepts a date-time string and outputs a human readable string with timezone
+//output format 31/12/1990 11:59 pm IST as default
+const formatDateWithTimezone = (dateTime: string, format: string = 'DD/MM/YYYY h:mm a z'): string => {
+	const localTimeZone = moment.tz.guess();
+	const convertedDate = moment.tz(dateTime, localTimeZone);
+	return convertedDate.format(format);
+};
+
 const timeRangeUtils = {
 	defaultTimeRangeOption,
-
+	formatDateWithTimezone,
 	makeTimeRangeOptions,
 	makeTimeRangeLabel,
 	optimizeEndTime,