chore: add log events for timezone interactions in date/time picker and timezone adaptation (#6676)

* chore: add log events for timezone interactions in date/time picker and timezone adaptation

* refactor: modified the log event messages for timezone picker to follow the conventions

* chore: improve timezone picker event messages

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -3,6 +3,7 @@
 import './CustomTimePicker.styles.scss';
 
 import { Input, Popover, Tooltip, Typography } from 'antd';
+import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
 import {
@@ -297,6 +298,18 @@ function CustomTimePicker({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [location.pathname]);
 
+	const handleTimezoneHintClick = (e: React.MouseEvent): void => {
+		e.stopPropagation();
+		handleViewChange('timezone');
+		setIsOpenedFromFooter(false);
+		logEvent(
+			'DateTimePicker: Timezone picker opened from time range input badge',
+			{
+				page: location.pathname,
+			},
+		);
+	};
+
 	return (
 		<div className="custom-time-picker">
 			<Popover
@@ -360,14 +373,7 @@ function CustomTimePicker({
 					suffix={
 						<>
 							{!!isTimezoneOverridden && activeTimezoneOffset && (
-								<div
+								<div className="timezone-badge" onClick={handleTimezoneHintClick}>
-									className="timezone-badge"
-									onClick={(e): void => {
-										e.stopPropagation();
-										handleViewChange('timezone');
-										setIsOpenedFromFooter(false);
-									}}
-								>
 									<span>{activeTimezoneOffset}</span>
 								</div>
 							)}

frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx

@@ -2,6 +2,7 @@ import './CustomTimePicker.styles.scss';
 
 import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
+import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import ROUTES from 'constants/routes';
 import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
@@ -81,6 +82,12 @@ function CustomTimePickerPopoverContent({
 	const handleTimezoneHintClick = (): void => {
 		setActiveView('timezone');
 		setIsOpenedFromFooter(true);
+		logEvent(
+			'DateTimePicker: Timezone picker opened from time range picker footer',
+			{
+				page: pathname,
+			},
+		);
 	};
 
 	if (activeView === 'timezone') {

frontend/src/components/CustomTimePicker/TimezonePicker.tsx

@@ -2,6 +2,7 @@ import './TimezonePicker.styles.scss';
 
 import { Color } from '@signozhq/design-tokens';
 import { Input } from 'antd';
+import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import { TimezonePickerShortcuts } from 'constants/shortcuts/TimezonePickerShortcuts';
 import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
@@ -157,6 +158,12 @@ function TimezonePicker({
 			updateTimezone(timezone);
 			handleCloseTimezonePicker();
 			setIsOpen(false);
+			logEvent('DateTimePicker: New Timezone Selected', {
+				timezone: {
+					name: timezone.name,
+					offset: timezone.offset,
+				},
+			});
 		},
 		[handleCloseTimezonePicker, setIsOpen, updateTimezone],
 	);

frontend/src/container/MySettings/TimezoneAdaptation/TimezoneAdaptation.tsx

@@ -2,6 +2,7 @@ import './TimezoneAdaptation.styles.scss';
 
 import { Color } from '@signozhq/design-tokens';
 import { Switch } from 'antd';
+import logEvent from 'api/common/logEvent';
 import { Delete } from 'lucide-react';
 import { useTimezone } from 'providers/Timezone';
 import { useMemo } from 'react';
@@ -27,6 +28,18 @@ function TimezoneAdaptation(): JSX.Element {
 
 	const handleOverrideClear = (): void => {
 		updateTimezone(browserTimezone);
+		logEvent('Settings: Timezone override cleared', {});
+	};
+
+	const handleSwitchChange = (): void => {
+		setIsAdaptationEnabled((prev) => {
+			const isEnabled = !prev;
+			logEvent(
+				`Settings: Timezone adaptation ${isEnabled ? 'enabled' : 'disabled'}`,
+				{},
+			);
+			return isEnabled;
+		});
 	};
 
 	return (
@@ -35,7 +48,7 @@ function TimezoneAdaptation(): JSX.Element {
 				<h2 className="timezone-adaption__title">Adapt to my timezone</h2>
 				<Switch
 					checked={isAdaptationEnabled}
-					onChange={setIsAdaptationEnabled}
+					onChange={handleSwitchChange}
 					style={getSwitchStyles()}
 				/>
 			</div>