Merge branch 'main' into cleanup-app-routes

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
-									className="timezone-badge"
-									onClick={(e): void => {
-										e.stopPropagation();
-										handleViewChange('timezone');
-										setIsOpenedFromFooter(false);
-									}}
-								>
+								<div className="timezone-badge" onClick={handleTimezoneHintClick}>
 									<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/RangePickerModal.tsx

@@ -3,9 +3,9 @@ import './RangePickerModal.styles.scss';
 import { DatePicker } from 'antd';
 import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
 import { LexicalContext } from 'container/TopNav/DateTimeSelectionV2/config';
-import dayjs from 'dayjs';
+import dayjs, { Dayjs } from 'dayjs';
 import { useTimezone } from 'providers/Timezone';
-import { Dispatch, SetStateAction } from 'react';
+import { Dispatch, SetStateAction, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
@@ -53,22 +53,32 @@ function RangePickerModal(props: RangePickerModalProps): JSX.Element {
 		}
 		onCustomDateHandler(date_time, LexicalContext.CUSTOM_DATE_PICKER);
 	};
-
 	const { timezone } = useTimezone();
+
+	const rangeValue: [Dayjs, Dayjs] = useMemo(
+		() => [
+			dayjs(minTime / 1000_000).tz(timezone.value),
+			dayjs(maxTime / 1000_000).tz(timezone.value),
+		],
+		[maxTime, minTime, timezone.value],
+	);
+
 	return (
 		<div className="custom-date-picker">
 			<RangePicker
 				disabledDate={disabledDate}
 				allowClear
-				showTime
-				format="YYYY-MM-DD hh:mm A"
+				showTime={{
+					use12Hours: true,
+					format: 'hh:mm A',
+				}}
+				format={(date: Dayjs): string =>
+					date.tz(timezone.value).format('YYYY-MM-DD hh:mm A')
+				}
 				onOk={onModalOkHandler}
 				// eslint-disable-next-line react/jsx-props-no-spreading
 				{...(selectedTime === 'custom' && {
-					defaultValue: [
-						dayjs(minTime / 1000000).tz(timezone.value),
-						dayjs(maxTime / 1000000).tz(timezone.value),
-					],
+					value: rangeValue,
 				})}
 			/>
 		</div>

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/components/Logs/TableView/useTableView.styles.scss

@@ -22,17 +22,20 @@
 	}
 }
 
+.state-indicator {
+	width: 15px;
+	.log-state-indicator {
+		padding: 0px;
+	}
+}
+
 .table-timestamp {
 	display: flex;
 	align-items: center;
 
 	.ant-typography {
 		margin-bottom: 0;
 	}
-
-	.log-state-indicator {
-		padding: 0px;
-	}
 }
 
 .lightMode {

frontend/src/components/Logs/TableView/useTableView.tsx

@@ -75,12 +75,28 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 		}
 
 		return [
+			{
+				// We do not need any title and data index for the log state indicator
+				title: '',
+				dataIndex: '',
+				key: 'state-indicator',
+				render: (_, item): ColumnTypeRender<Record<string, unknown>> => ({
+					children: (
+						<div className={cx('state-indicator', fontSize)}>
+							<LogStateIndicator
+								type={getLogIndicatorTypeForTable(item)}
+								fontSize={fontSize}
+							/>
+						</div>
+					),
+				}),
+			},
 			{
 				title: 'timestamp',
 				dataIndex: 'timestamp',
 				key: 'timestamp',
 				// https://github.com/ant-design/ant-design/discussions/36886
-				render: (field, item): ColumnTypeRender<Record<string, unknown>> => {
+				render: (field): ColumnTypeRender<Record<string, unknown>> => {
 					const date =
 						typeof field === 'string'
 							? formatTimezoneAdjustedTimestamp(field, 'YYYY-MM-DD HH:mm:ss.SSS')
@@ -91,10 +107,6 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 					return {
 						children: (
 							<div className="table-timestamp">
-								<LogStateIndicator
-									type={getLogIndicatorTypeForTable(item)}
-									fontSize={fontSize}
-								/>
 								<Typography.Paragraph ellipsis className={cx('text', fontSize)}>
 									{date}
 								</Typography.Paragraph>

frontend/src/container/LogsExplorerList/InfinityTableView/TableRow.tsx

@@ -79,6 +79,7 @@ export default function TableRow({
 				return (
 					<TableCellStyled
 						$isDragColumn={false}
+						$isLogIndicator={column.key === 'state-indicator'}
 						$isDarkMode={isDarkMode}
 						key={column.key}
 						fontSize={fontSize}

frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx

@@ -126,7 +126,7 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 
 						return (
 							<TableHeaderCellStyled
-								$isTimestamp={column.key === 'timestamp'}
+								$isLogIndicator={column.key === 'state-indicator'}
 								$isDarkMode={isDarkMode}
 								$isDragColumn={isDragColumn}
 								key={column.key}

frontend/src/container/LogsExplorerList/InfinityTableView/styles.ts

@@ -7,7 +7,7 @@ import { getActiveLogBackground } from 'utils/logs';
 interface TableHeaderCellStyledProps {
 	$isDragColumn: boolean;
 	$isDarkMode: boolean;
-	$isTimestamp?: boolean;
+	$isLogIndicator?: boolean;
 	fontSize?: FontSize;
 }
 
@@ -28,11 +28,12 @@ export const TableCellStyled = styled.td<TableHeaderCellStyledProps>`
 	background-color: ${(props): string =>
 		props.$isDarkMode ? 'inherit' : themeColors.whiteCream};
 
+	${({ $isLogIndicator }): string =>
+		$isLogIndicator ? 'padding: 0 0 0 8px;' : ''}
 	color: ${(props): string =>
 		props.$isDarkMode ? themeColors.white : themeColors.bckgGrey};
 `;
 
-// handle the light theme here
 export const TableRowStyled = styled.tr<{
 	$isActiveLog: boolean;
 	$isDarkMode: boolean;
@@ -85,7 +86,7 @@ export const TableHeaderCellStyled = styled.th<TableHeaderCellStyledProps>`
 			: fontSize === FontSize.LARGE
 			? `font-size:14px; line-height:24px; padding: 0.5rem;`
 			: ``};
-	${({ $isTimestamp }): string => ($isTimestamp ? 'padding-left: 24px;' : '')}
+	${({ $isLogIndicator }): string => ($isLogIndicator ? 'padding: 0px; ' : '')}
 	color: ${(props): string =>
 		props.$isDarkMode ? 'var(--bg-vanilla-100, #fff)' : themeColors.bckgGrey};
 `;

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>