fix: tests to use UTC instead of utc

ListPlannedMaintenance now reads the schedule as raw text and parses each
row individually, skipping and logging the bad ones so the rest survive.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

docs/api/openapi.yml

@@ -409,10 +409,6 @@ components:
       properties:
         duration:
           type: string
-        endTime:
-          format: date-time
-          nullable: true
-          type: string
         repeatOn:
           items:
             $ref: '#/components/schemas/AlertmanagertypesRepeatOn'
@@ -420,11 +416,7 @@ components:
           type: array
         repeatType:
           $ref: '#/components/schemas/AlertmanagertypesRepeatType'
-        startTime:
-          format: date-time
-          type: string
       required:
-      - startTime
       - duration
       - repeatType
       type: object
@@ -458,6 +450,7 @@ components:
           type: string
       required:
       - timezone
+      - startTime
       type: object
     AuthtypesAttributeMapping:
       properties:

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -413,21 +413,11 @@ export interface AlertmanagertypesRecurrenceDTO {
 	 * @type string
 	 */
 	duration: string;
-	/**
-	 * @type string,null
-	 * @format date-time
-	 */
-	endTime?: string | null;
 	/**
 	 * @type array,null
 	 */
 	repeatOn?: AlertmanagertypesRepeatOnDTO[] | null;
 	repeatType: AlertmanagertypesRepeatTypeDTO;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	startTime: string;
 }
 
 export interface AlertmanagertypesScheduleDTO {
@@ -441,7 +431,7 @@ export interface AlertmanagertypesScheduleDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	startTime?: string;
+	startTime: string;
 	/**
 	 * @type string
 	 */

frontend/src/components/FieldsSelector/FieldsSelector.tsx

@@ -192,7 +192,7 @@ function FieldsSelector({
 		() =>
 			fields.map((f) => ({
 				...f,
-				key: f.key ?? buildCompositeKey(f.name, f.fieldContext, f.fieldDataType),
+				key: f.key ?? buildCompositeKey(f.name, f.fieldContext),
 			})),
 		[fields],
 	);

frontend/src/components/FieldsSelector/OtherFields.tsx

@@ -52,20 +52,14 @@ function OtherFields({
 		const normalizedSuggestions: TelemetryFieldKey[] = suggestions.map(
 			(attr) => ({
 				...attr,
-				key: buildCompositeKey(
-					attr.name,
-					attr.fieldContext as string,
-					attr.fieldDataType as string | undefined,
-				),
+				key: buildCompositeKey(attr.name, attr.fieldContext as string),
 				signal: attr.signal as SignalType,
 				fieldContext: attr.fieldContext as FieldContext,
 				fieldDataType: attr.fieldDataType as FieldDataType,
 			}),
 		);
 		const addedIds = new Set(
-			addedFields.map(
-				(f) => f.key ?? buildCompositeKey(f.name, f.fieldContext, f.fieldDataType),
-			),
+			addedFields.map((f) => f.key ?? buildCompositeKey(f.name, f.fieldContext)),
 		);
 		return normalizedSuggestions.filter(
 			(attr) => !addedIds.has(attr.key as string),

frontend/src/components/Traces/TableView/useTracesTableColumns.tsx

@@ -1,58 +0,0 @@
-import { useMemo, type ReactElement } from 'react';
-
-import TanStackTable from 'components/TanStackTableView';
-import type { TableColumnDef } from 'components/TanStackTableView/types';
-import { buildCompositeKey } from 'container/OptionsMenu/utils';
-import type { TelemetryFieldKey } from 'types/api/v5/queryRange';
-
-type UseTracesTableColumnsProps<TRow> = {
-	/** Pinned / always-on columns owned by the consumer (e.g. timestamp for List view, the 5 static columns for Traces grouped view). */
-	baseColumns: TableColumnDef<TRow>[];
-	/** Dynamic columns sourced from `selectColumns` (List view). Omit or pass [] for views without a picker (Traces grouped). */
-	fields?: TelemetryFieldKey[];
-};
-
-/**
- * Shared column builder for the trace list view and the trace (group-by-trace) view.
- *
- * Composition: `[...baseColumns, ...fields.map(makeUserFieldCol)]`. Each view owns its
- * `baseColumns` inline so view-specific changes (timestamp formatting on list, static-column
- * cell renderers on grouped) stay localized. The shared piece is `makeUserFieldCol` — the
- * dynamic-field factory that consumes `selectColumns` for the list view.
- */
-export function useTracesTableColumns<TRow>({
-	baseColumns,
-	fields = [],
-}: UseTracesTableColumnsProps<TRow>): TableColumnDef<TRow>[] {
-	return useMemo<TableColumnDef<TRow>[]>(
-		() => [...baseColumns, ...fields.map((f) => makeUserFieldCol<TRow>(f))],
-		[baseColumns, fields],
-	);
-}
-
-function makeUserFieldCol<TRow>(f: TelemetryFieldKey): TableColumnDef<TRow> {
-	const col: TableColumnDef<Record<string, unknown>> = {
-		id: buildCompositeKey(f.name, f.fieldContext, f.fieldDataType),
-		header: f.name,
-		accessorFn: (row): unknown => row[f.name],
-		enableRemove: true,
-		width: { min: 192 },
-		cell: ({ value }): ReactElement => (
-			<TanStackTable.Text>{stringifyCellValue(value)}</TanStackTable.Text>
-		),
-	};
-	return col as TableColumnDef<TRow>;
-}
-
-function stringifyCellValue(value: unknown): string {
-	if (value == null) {
-		return '';
-	}
-	if (typeof value === 'string') {
-		return value;
-	}
-	if (typeof value === 'number' || typeof value === 'boolean') {
-		return String(value);
-	}
-	return JSON.stringify(value);
-}

frontend/src/constants/localStorage.ts

@@ -11,7 +11,6 @@ export enum LOCALSTORAGE {
 	TRACES_LIST_OPTIONS = 'TRACES_LIST_OPTIONS',
 	GRAPH_VISIBILITY_STATES = 'GRAPH_VISIBILITY_STATES',
 	TRACES_LIST_COLUMNS = 'TRACES_LIST_COLUMNS',
-	TRACES_VIEW_COLUMNS = 'TRACES_VIEW_COLUMNS',
 	LOGS_LIST_COLUMNS = 'LOGS_LIST_COLUMNS',
 	LOGS_LIST_COLUMN_SIZING = 'LOGS_LIST_COLUMN_SIZING',
 	LOGGED_IN_USER_NAME = 'LOGGED_IN_USER_NAME',

frontend/src/container/OptionsMenu/constants.ts

@@ -56,7 +56,7 @@ export function dedupeColumnsByCompositeKey(
 	const seen = new Set<string>();
 	let hasDuplicate = false;
 	const deduped = columns.filter((c) => {
-		const key = buildCompositeKey(c.name, c.fieldContext, c.fieldDataType);
+		const key = buildCompositeKey(c.name, c.fieldContext);
 		if (seen.has(key)) {
 			hasDuplicate = true;
 			return false;

frontend/src/container/OptionsMenu/useOptionsMenu.ts

@@ -281,8 +281,7 @@ const useOptionsMenu = ({
 	const handleRemoveSelectedColumn = useCallback(
 		(columnKey: string) => {
 			const newSelectedColumns = preferences?.columns?.filter(
-				(f) =>
-					buildCompositeKey(f.name, f.fieldContext, f.fieldDataType) !== columnKey,
+				(f) => buildCompositeKey(f.name, f.fieldContext) !== columnKey,
 			);
 
 			if (!newSelectedColumns?.length && dataSource !== DataSource.LOGS) {
@@ -365,10 +364,7 @@ const useOptionsMenu = ({
 		(orderedIds: string[]): void => {
 			const current = preferences?.columns ?? [];
 			const byCompositeKey = new Map(
-				current.map((f) => [
-					buildCompositeKey(f.name, f.fieldContext, f.fieldDataType),
-					f,
-				]),
+				current.map((f) => [buildCompositeKey(f.name, f.fieldContext), f]),
 			);
 			const reordered = orderedIds
 				.map((id) => byCompositeKey.get(id))

frontend/src/container/OptionsMenu/utils.ts

@@ -15,15 +15,8 @@ export const getOptionsFromKeys = (
 	);
 };
 
-// Composite column id. Disambiguates same-name fields by `context` and `dataType`
-// (e.g. attribute.http.status_code ships as both number and string). Each arg
-// is appended only when truthy. `dataType` is optional — logs callers stay on
-// the 2-arg form until parity lands.
-export const buildCompositeKey = (
-	name: string,
-	context?: string,
-	dataType?: string,
-): string => {
-	const withContext = context ? `${context}.${name}` : name;
-	return dataType ? `${withContext}.${dataType}` : withContext;
-};
+// Composite identity for a column. Disambiguates same-name fields across
+// different fieldContexts (e.g. resource.service.name vs attribute.service.name).
+// Falls back to bare name when context is missing.
+export const buildCompositeKey = (name: string, context?: string): string =>
+	context ? `${context}.${name}` : name;

frontend/src/container/PlannedDowntime/PlannedDowntimeForm.tsx

@@ -151,6 +151,11 @@ export function PlannedDowntimeForm(
 
 	const saveHandler = useCallback(
 		async (values: PlannedDowntimeFormData) => {
+			const { startTime, timezone } = values;
+			if (!startTime || !timezone) {
+				// unreachable: required fields should always be present on submitting.
+				return;
+			}
 			const data: AlertmanagertypesPostablePlannedMaintenanceDTO = {
 				alertIds:
 					values.alertRuleScope === 'all'
@@ -161,9 +166,9 @@ export function PlannedDowntimeForm(
 				name: values.name,
 				scope: values.scope,
 				schedule: {
-					startTime: values.startTime?.format(),
+					startTime: startTime.format(),
 					endTime: values.endTime?.format(),
-					timezone: values.timezone!,
+					timezone,
 					recurrence: values.recurrence,
 				},
 			};
@@ -200,25 +205,17 @@ export function PlannedDowntimeForm(
 		],
 	);
 	const onFinish = async (values: PlannedDowntimeFormData): Promise<void> => {
-		const { recurrence } = values;
-		const recurrenceData =
-			!recurrence ||
-			recurrence.repeatType === recurrenceOptions.doesNotRepeat.value
-				? undefined
-				: {
-						duration: recurrence.duration
-							? `${recurrence.duration}${durationUnit}`
-							: '',
-						startTime: values.startTime!.format(),
-						endTime: values.endTime?.format(),
-						repeatOn: recurrence.repeatOn,
-						repeatType: recurrence.repeatType,
-					};
+		const rec = values.recurrence;
+		const recurrence =
+			rec && rec.repeatType !== recurrenceOptions.doesNotRepeat.value
+				? {
+						duration: `${rec.duration}${durationUnit}`,
+						repeatOn: rec.repeatOn,
+						repeatType: rec.repeatType,
+					}
+				: undefined;
 
-		await saveHandler({
-			...values,
-			recurrence: recurrenceData,
-		});
+		await saveHandler({ ...values, recurrence });
 	};
 
 	const handleFormData = (data: Partial<PlannedDowntimeFormData>): void => {
@@ -275,9 +272,6 @@ export function PlannedDowntimeForm(
 
 	const formattedInitialValues = useMemo((): PlannedDowntimeFormData => {
 		const { schedule } = initialValues;
-		const startTime = schedule?.recurrence?.startTime || schedule?.startTime;
-		const endTime = schedule?.recurrence?.endTime || schedule?.endTime;
-
 		const initialAlertIds = initialValues.alertIds || [];
 
 		return {
@@ -285,8 +279,12 @@ export function PlannedDowntimeForm(
 			alertRuleScope:
 				isEditMode && initialAlertIds.length === 0 ? 'all' : 'specific',
 			alertRules: getAlertOptionsFromIds(initialAlertIds, alertOptions),
-			startTime: startTime ? dayjs(startTime).tz(schedule.timezone) : null,
-			endTime: endTime ? dayjs(endTime).tz(schedule.timezone) : null,
+			startTime: schedule?.startTime
+				? dayjs(schedule.startTime).tz(schedule.timezone)
+				: null,
+			endTime: schedule?.endTime
+				? dayjs(schedule.endTime).tz(schedule.timezone)
+				: null,
 			recurrence: {
 				...schedule?.recurrence,
 				repeatType: !isScheduleRecurring(schedule)
@@ -297,7 +295,7 @@ export function PlannedDowntimeForm(
 			timezone: schedule?.timezone as string,
 			scope: initialValues.scope || '',
 		};
-	}, [initialValues, alertOptions]);
+	}, [initialValues, isEditMode, alertOptions]);
 
 	useEffect(() => {
 		setSelectedTags(formattedInitialValues.alertRules);
@@ -341,7 +339,7 @@ export function PlannedDowntimeForm(
 		const formattedEndTime = endTime.format(TIME_FORMAT);
 		const formattedEndDate = endTime.format(DATE_FORMAT);
 		return `Scheduled to end maintenance on ${formattedEndDate} at ${formattedEndTime}.`;
-	}, [formData, recurrenceType]);
+	}, [formData]);
 
 	return (
 		<Modal

frontend/src/container/PlannedDowntime/PlannedDowntimeList.tsx

@@ -142,7 +142,6 @@ export function CollapseListContent({
 	updated_by_name?: string;
 	alertOptions?: DefaultOptionType[];
 }): JSX.Element {
-	const repeats = schedule?.recurrence;
 	const renderItems = (title: string, value: ReactNode): JSX.Element => (
 		<div className="render-item-collapse-list">
 			<Typography>{title}</Typography>
@@ -193,10 +192,7 @@ export function CollapseListContent({
 				'Timezone',
 				<Typography>{schedule?.timezone || '-'}</Typography>,
 			)}
-			{renderItems(
-				'Repeats',
-				<Typography>{recurrenceInfo(repeats, schedule?.timezone)}</Typography>,
-			)}
+			{renderItems('Repeats', <Typography>{recurrenceInfo(schedule)}</Typography>)}
 			{renderItems(
 				'Alerts silenced',
 				alertOptions?.length ? (

frontend/src/container/PlannedDowntime/PlannedDowntimeutils.ts

@@ -6,7 +6,7 @@ import type {
 	DeleteDowntimeScheduleByIDPathParameters,
 	RenderErrorResponseDTO,
 	AlertmanagertypesPlannedMaintenanceDTO,
-	AlertmanagertypesRecurrenceDTO,
+	AlertmanagertypesScheduleDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import type { ErrorType } from 'api/generatedAPIInstance';
 import { AxiosError } from 'axios';
@@ -66,14 +66,17 @@ export const getAlertOptionsFromIds = (
 	);
 
 export const recurrenceInfo = (
-	recurrence?: AlertmanagertypesRecurrenceDTO | null,
-	timezone?: string,
+	schedule?: AlertmanagertypesScheduleDTO | null,
 ): string => {
+	if (!schedule) {
+		return 'No';
+	}
+	const { startTime, endTime, timezone, recurrence } = schedule;
 	if (!recurrence) {
 		return 'No';
 	}
 
-	const { startTime, duration, repeatOn, repeatType, endTime } = recurrence;
+	const { duration, repeatOn, repeatType } = recurrence;
 
 	const formattedStartTime = startTime
 		? formatDateTime(startTime, timezone)
@@ -95,7 +98,7 @@ export const defaultInitialValues: Partial<AlertmanagertypesPlannedMaintenanceDT
 			timezone: '',
 			endTime: undefined,
 			recurrence: undefined,
-			startTime: undefined,
+			startTime: '',
 		},
 		alertIds: [],
 		createdAt: undefined,

frontend/src/container/PlannedDowntime/__test__/testUtils.ts

@@ -11,7 +11,7 @@ export const buildSchedule = (
 	schedule: Partial<AlertmanagertypesScheduleDTO>,
 ): AlertmanagertypesScheduleDTO => ({
 	timezone: schedule?.timezone ?? '',
-	startTime: schedule?.startTime,
+	startTime: schedule?.startTime ?? '',
 	endTime: schedule?.endTime,
 	recurrence: schedule?.recurrence,
 });

frontend/src/container/TracesExplorer/Controls/index.tsx

@@ -2,37 +2,62 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Settings } from '@signozhq/icons';
 import FieldsSelector from 'components/FieldsSelector';
+import Controls, { ControlsProps } from 'container/Controls';
 import { OptionsMenuConfig } from 'container/OptionsMenu/types';
+import useQueryPagination from 'hooks/queryPagination/useQueryPagination';
 import { DataSource } from 'types/common/queryBuilder';
 
 import styles from './Controls.module.scss';
 
 function TraceExplorerControls({
+	isLoading,
+	totalCount,
+	perPageOptions,
 	config,
+	showSizeChanger = true,
 }: TraceExplorerControlsProps): JSX.Element | null {
 	const { t } = useTranslation(['trace']);
 	const [isFieldsSelectorOpen, setIsFieldsSelectorOpen] = useState(false);
 
-	if (!config?.fieldsSelector) {
-		return null;
-	}
+	const {
+		pagination,
+		handleCountItemsPerPageChange,
+		handleNavigateNext,
+		handleNavigatePrevious,
+	} = useQueryPagination(totalCount, perPageOptions);
 
 	return (
 		<div className={styles.container}>
-			<div
-				className={styles.optionsTrigger}
-				onClick={(): void => setIsFieldsSelectorOpen(true)}
-			>
-				{t('options_menu.options')}
-				<Settings size="md" />
-			</div>
-			<FieldsSelector
-				isOpen={isFieldsSelectorOpen}
-				title="Edit columns"
-				fields={config.fieldsSelector.value}
-				onFieldsChange={config.fieldsSelector.onFieldsChange}
-				onClose={(): void => setIsFieldsSelectorOpen(false)}
-				signal={DataSource.TRACES}
+			{config?.fieldsSelector && (
+				<>
+					<div
+						className={styles.optionsTrigger}
+						onClick={(): void => setIsFieldsSelectorOpen(true)}
+					>
+						{t('options_menu.options')}
+						<Settings size="md" />
+					</div>
+					<FieldsSelector
+						isOpen={isFieldsSelectorOpen}
+						title="Edit columns"
+						fields={config.fieldsSelector.value}
+						onFieldsChange={config.fieldsSelector.onFieldsChange}
+						onClose={(): void => setIsFieldsSelectorOpen(false)}
+						signal={DataSource.TRACES}
+					/>
+				</>
+			)}
+
+			<Controls
+				isLoading={isLoading}
+				totalCount={totalCount}
+				offset={pagination.offset}
+				countPerPage={pagination.limit}
+				perPageOptions={perPageOptions}
+				handleCountItemsPerPageChange={handleCountItemsPerPageChange}
+				handleNavigateNext={handleNavigateNext}
+				handleNavigatePrevious={handleNavigatePrevious}
+				showSizeChanger={showSizeChanger}
 			/>
 		</div>
 	);
@@ -42,8 +67,16 @@ TraceExplorerControls.defaultProps = {
 	config: null,
 };
 
-type TraceExplorerControlsProps = {
+type TraceExplorerControlsProps = Pick<
+	ControlsProps,
+	'isLoading' | 'totalCount' | 'perPageOptions'
+> & {
 	config?: OptionsMenuConfig | null;
+	showSizeChanger?: boolean;
+};
+
+TraceExplorerControls.defaultProps = {
+	showSizeChanger: true,
 };
 
 export default memo(TraceExplorerControls);

frontend/src/container/TracesExplorer/ListView/configs.tsx

@@ -1,3 +1,12 @@
 import { DEFAULT_PER_PAGE_OPTIONS } from 'hooks/queryPagination';
 
+export const defaultSelectedColumns: string[] = [
+	'service.name',
+	'name',
+	'duration_nano',
+	'http_method',
+	'response_status_code',
+	'timestamp',
+];
+
 export const PER_PAGE_OPTIONS: number[] = [10, ...DEFAULT_PER_PAGE_OPTIONS];

frontend/src/container/TracesExplorer/ListView/index.test.tsx

@@ -54,17 +54,18 @@ const renderListView = (
 	);
 };
 
-// Helper to verify all controls are visible.
-// Pagination controls were removed in the TanStack-table migration (infinite
-// scroll replaces page-by-page navigation), so only the order-by combobox +
-// options trigger remain in the top toolbar.
+// Helper to verify all controls are visible
 const verifyControlsVisibility = (): void => {
 	// Order by controls
 	expect(screen.getByText(/Order by/i)).toBeInTheDocument();
 
-	// At least one combobox (order-by); page-size selector is gone post-migration.
+	// Pagination controls
+	expect(screen.getByRole('button', { name: /previous/i })).toBeInTheDocument();
+	expect(screen.getByRole('button', { name: /next/i })).toBeInTheDocument();
+
+	// Items per page selector (there are multiple comboboxes, so we check for at least 2)
 	const comboboxes = screen.getAllByRole('combobox');
-	expect(comboboxes.length).toBeGreaterThanOrEqual(1);
+	expect(comboboxes.length).toBeGreaterThanOrEqual(2);
 
 	// Options menu (settings button) - check for translation key or actual text
 	expect(screen.getByText(/options_menu.options|options/i)).toBeInTheDocument();
@@ -151,10 +152,15 @@ describe('Traces ListView - Error and Empty States', () => {
 				expect(screen.getByText(/Order by/i)).toBeInTheDocument();
 			});
 
-			// Order-by combobox should be interactive (pagination buttons removed
-			// after the TanStack migration switched List view to infinite scroll).
+			// Order by controls should be interactive
 			const comboboxes = screen.getAllByRole('combobox');
-			expect(comboboxes.length).toBeGreaterThanOrEqual(1);
+			expect(comboboxes.length).toBeGreaterThanOrEqual(2);
+
+			// Pagination controls should be present
+			const previousButton = screen.getByRole('button', { name: /previous/i });
+			const nextButton = screen.getByRole('button', { name: /next/i });
+			expect(previousButton).toBeInTheDocument();
+			expect(nextButton).toBeInTheDocument();
 
 			// Options menu should be clickable
 			const optionsButton = screen.getByText(/options_menu.options|options/i);
@@ -169,9 +175,9 @@ describe('Traces ListView - Error and Empty States', () => {
 				expect(screen.getByText(/No traces yet/i)).toBeInTheDocument();
 			});
 
-			// At least the order-by combobox should be interactive.
+			// All controls should be interactive
 			const comboboxes = screen.getAllByRole('combobox');
-			expect(comboboxes.length).toBeGreaterThanOrEqual(1);
+			expect(comboboxes.length).toBeGreaterThanOrEqual(2);
 
 			// Options menu should be clickable
 			const optionsButton = screen.getByText(/options_menu.options|options/i);

frontend/src/container/TracesExplorer/ListView/index.tsx

@@ -10,16 +10,14 @@ import {
 } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { useHistory } from 'react-router-dom';
-import { ArrowUp10, Minus } from '@signozhq/icons';
 import logEvent from 'api/common/logEvent';
 import DownloadOptionsMenu from 'components/DownloadOptionsMenu/DownloadOptionsMenu';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
 import ListViewOrderBy from 'components/OrderBy/ListViewOrderBy';
-import TanStackTable from 'components/TanStackTableView';
-import { useTracesTableColumns } from 'components/Traces/TableView/useTracesTableColumns';
+import { ResizeTable } from 'components/ResizeTable';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { LOCALSTORAGE } from 'constants/localStorage';
+import { QueryParams } from 'constants/query';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import EmptyLogsSearch from 'container/EmptyLogsSearch/EmptyLogsSearch';
@@ -30,28 +28,24 @@ import TraceExplorerControls from 'container/TracesExplorer/Controls';
 import { getListViewQuery } from 'container/TracesExplorer/explorerUtils';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { Pagination } from 'hooks/queryPagination';
+import { getDefaultPaginationConfig } from 'hooks/queryPagination/utils';
+import useUrlQueryData from 'hooks/useUrlQueryData';
+import { ArrowUp10, Minus } from '@signozhq/icons';
 import { useTimezone } from 'providers/Timezone';
 import { AppState } from 'store/reducers';
 import { Warning } from 'types/api';
 import APIError from 'types/api/error';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { getAbsoluteUrl } from 'utils/basePath';
 
 import { TracesLoading } from '../TraceLoading/TraceLoading';
-import { Container } from './styles';
-import {
-	getTraceLink,
-	makeListFieldCol,
-	makeTimestampCol,
-	SpanRow,
-	transformSpanRows,
-} from './utils';
+import { defaultSelectedColumns, PER_PAGE_OPTIONS } from './configs';
+import { Container, tableStyles } from './styles';
+import { getListColumns, transformDataWithDate } from './utils';
 
 import './ListView.styles.scss';
 
-const PAGE_SIZE = 50;
-
 interface ListViewProps {
 	isFilterApplied: boolean;
 	setWarning: Dispatch<SetStateAction<Warning | undefined>>;
@@ -65,7 +59,6 @@ function ListView({
 	setIsLoadingQueries,
 	queryKeyRef,
 }: ListViewProps): JSX.Element {
-	const history = useHistory();
 	const { stagedQuery, panelType: panelTypeFromQueryBuilder } =
 		useQueryBuilder();
 
@@ -84,22 +77,25 @@ function ListView({
 		storageKey: LOCALSTORAGE.TRACES_LIST_OPTIONS,
 		dataSource: DataSource.TRACES,
 		aggregateOperator: 'count',
+		initialOptions: {
+			selectColumns: defaultSelectedColumns,
+		},
 	});
 
-	// Infinite-scroll state — owned by this view.
-	const [pagination, setPagination] = useState<{
-		offset: number;
-		limit: number;
-	}>({
-		offset: 0,
-		limit: PAGE_SIZE,
-	});
-	const [accumulatedRows, setAccumulatedRows] = useState<SpanRow[]>([]);
-	const [hasMore, setHasMore] = useState(true);
+	const { queryData: paginationQueryData } = useUrlQueryData<Pagination>(
+		QueryParams.pagination,
+	);
+	const paginationConfig =
+		paginationQueryData ?? getDefaultPaginationConfig(PER_PAGE_OPTIONS);
 
-	// Stable sorted-name signature for the queryKey + reset trigger.
+	const requestQuery = useMemo(
+		() => getListViewQuery(stagedQuery || initialQueriesMap.traces, orderBy),
+		[stagedQuery, orderBy],
+	);
+
+	// TEMP — remove after traces moves to TanStack table.
 	// - Drag updates selectColumns; raw queryKey would churn on reorder.
-	// - Trace API fetches only listed columns → add/remove must refetch from scratch.
+	// - Trace API fetches only listed columns → add/remove must refetch.
 	// - Sorted-name signature: stable on reorder, changes on add/remove.
 	const selectColumnsSignature = useMemo(
 		() =>
@@ -110,25 +106,6 @@ function ListView({
 		[options?.selectColumns],
 	);
 
-	// Reset accumulator + offset whenever the underlying query identity changes.
-	useEffect(() => {
-		setPagination({ offset: 0, limit: PAGE_SIZE });
-		setAccumulatedRows([]);
-		setHasMore(true);
-	}, [
-		stagedQuery?.id,
-		globalSelectedTime,
-		maxTime,
-		minTime,
-		orderBy,
-		selectColumnsSignature,
-	]);
-
-	const requestQuery = useMemo(
-		() => getListViewQuery(stagedQuery || initialQueriesMap.traces, orderBy),
-		[stagedQuery, orderBy],
-	);
-
 	const queryKey = useMemo(
 		() => [
 			REACT_QUERY_KEY.GET_QUERY_RANGE,
@@ -137,18 +114,18 @@ function ListView({
 			minTime,
 			stagedQuery,
 			panelType,
-			pagination,
+			paginationConfig,
 			selectColumnsSignature,
 			orderBy,
 		],
 		[
-			globalSelectedTime,
-			maxTime,
-			minTime,
 			stagedQuery,
 			panelType,
-			pagination,
+			globalSelectedTime,
+			paginationConfig,
 			selectColumnsSignature,
+			maxTime,
+			minTime,
 			orderBy,
 		],
 	);
@@ -167,14 +144,16 @@ function ListView({
 				dataSource: 'traces',
 			},
 			tableParams: {
-				pagination,
+				pagination: paginationConfig,
 				selectColumns: options?.selectColumns,
 			},
 		},
+		// ENTITY_VERSION_V4,
 		ENTITY_VERSION_V5,
 		{
 			queryKey,
 			enabled:
+				// don't make api call while the time range state in redux is loading
 				!timeRangeUpdateLoading &&
 				!!stagedQuery &&
 				panelType === PANEL_TYPES.LIST &&
@@ -189,19 +168,6 @@ function ListView({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [data?.payload, data?.warning]);
 
-	// Append fetched page to accumulator (replace when offset === 0).
-	const responseResult = data?.payload?.data?.newResult?.data?.result;
-	useEffect(() => {
-		if (!responseResult) {
-			return;
-		}
-		const newRows = transformSpanRows(responseResult);
-		setAccumulatedRows((prev) =>
-			pagination.offset === 0 ? newRows : [...prev, ...newRows],
-		);
-		setHasMore(newRows.length >= pagination.limit);
-	}, [responseResult, pagination.offset, pagination.limit]);
-
 	useEffect(() => {
 		if (isLoading || isFetching) {
 			setIsLoadingQueries(true);
@@ -210,50 +176,68 @@ function ListView({
 		}
 	}, [isLoading, isFetching, setIsLoadingQueries]);
 
-	useEffect(() => {
-		if (!isLoading && !isFetching && !isError && accumulatedRows.length !== 0) {
-			void logEvent('Traces Explorer: Data present', { panelType });
-		}
-	}, [isLoading, isFetching, isError, accumulatedRows.length, panelType]);
+	const dataLength =
+		data?.payload?.data?.newResult?.data?.result[0]?.list?.length;
+	const totalCount = useMemo(() => dataLength || 0, [dataLength]);
 
-	const handleEndReached = useCallback(() => {
-		if (!hasMore) {
-			return;
-		}
-		setPagination((p) => ({ ...p, offset: p.offset + p.limit }));
-	}, [hasMore]);
+	const queryTableDataResult = data?.payload?.data?.newResult?.data?.result;
+	const queryTableData = useMemo(
+		() => queryTableDataResult || [],
+		[queryTableDataResult],
+	);
+
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+
+	const columns = useMemo(
+		() =>
+			getListColumns(
+				options?.selectColumns || [],
+				formatTimezoneAdjustedTimestamp,
+			),
+		[options?.selectColumns, formatTimezoneAdjustedTimestamp],
+	);
+
+	const transformedQueryTableData = useMemo(
+		() => transformDataWithDate(queryTableData) || [],
+		[queryTableData],
+	);
+
+	const handleDragColumn = useCallback(
+		(fromIndex: number, toIndex: number): void => {
+			const reordered = [...columns];
+			const [moved] = reordered.splice(fromIndex, 1);
+			reordered.splice(toIndex, 0, moved);
+			// `key` is the composite (fieldContext.name) — disambiguates same-name fields.
+			const orderedIds = reordered
+				.map((c) => String(c.key || ('dataIndex' in c && c.dataIndex) || ''))
+				.filter(Boolean);
+			config?.addColumn?.onReorder(orderedIds);
+		},
+		[columns, config],
+	);
 
 	const handleOrderChange = useCallback((value: string) => {
 		setOrderBy(value);
 	}, []);
 
-	const { formatTimezoneAdjustedTimestamp } = useTimezone();
-
-	const baseColumns = useMemo(
-		() => [
-			makeTimestampCol(formatTimezoneAdjustedTimestamp),
-			...(options?.selectColumns ?? []).map(makeListFieldCol),
-		],
-		[formatTimezoneAdjustedTimestamp, options?.selectColumns],
-	);
-
-	const tableColumns = useTracesTableColumns<SpanRow>({ baseColumns });
-
-	const handleRowClick = useCallback(
-		(row: SpanRow): void => {
-			history.push(getTraceLink(row));
-		},
-		[history],
-	);
-
-	const handleRowClickNewTab = useCallback((row: SpanRow): void => {
-		window.open(
-			getAbsoluteUrl(getTraceLink(row)),
-			'_blank',
-			'noopener,noreferrer',
-		);
-	}, []);
+	const isDataAbsent =
+		!isLoading &&
+		!isFetching &&
+		!isError &&
+		transformedQueryTableData.length === 0;
 
+	useEffect(() => {
+		if (
+			!isLoading &&
+			!isFetching &&
+			!isError &&
+			transformedQueryTableData.length !== 0
+		) {
+			logEvent('Traces Explorer: Data present', {
+				panelType,
+			});
+		}
+	}, [isLoading, isFetching, isError, transformedQueryTableData, panelType]);
 	return (
 		<Container>
 			<div className="trace-explorer-controls">
@@ -274,54 +258,39 @@ function ListView({
 					selectedColumns={options?.selectColumns}
 				/>
 
-				<TraceExplorerControls config={config} />
+				<TraceExplorerControls
+					isLoading={isFetching}
+					totalCount={totalCount}
+					config={config}
+					perPageOptions={PER_PAGE_OPTIONS}
+				/>
 			</div>
 
 			{isError && error && <ErrorInPlace error={error as APIError} />}
 
-			{(isLoading || isFetching) && accumulatedRows.length === 0 && (
+			{(isLoading || (isFetching && transformedQueryTableData.length === 0)) && (
 				<TracesLoading />
 			)}
 
-			{!isLoading &&
-				!isFetching &&
-				!isError &&
-				!isFilterApplied &&
-				accumulatedRows.length === 0 && <NoLogs dataSource={DataSource.TRACES} />}
+			{isDataAbsent && !isFilterApplied && (
+				<NoLogs dataSource={DataSource.TRACES} />
+			)}
 
-			{!isLoading &&
-				!isFetching &&
-				accumulatedRows.length === 0 &&
-				!isError &&
-				isFilterApplied && (
-					<EmptyLogsSearch dataSource={DataSource.TRACES} panelType="LIST" />
-				)}
+			{isDataAbsent && isFilterApplied && (
+				<EmptyLogsSearch dataSource={DataSource.TRACES} panelType="LIST" />
+			)}
 
-			{accumulatedRows.length !== 0 && (
-				<div
-					style={{
-						flex: 1,
-						minHeight: 0,
-						display: 'flex',
-						flexDirection: 'column',
-					}}
-				>
-					<TanStackTable<SpanRow>
-						data={accumulatedRows}
-						columns={tableColumns}
-						columnStorageKey={LOCALSTORAGE.TRACES_LIST_COLUMNS}
-						respectColumnOrder={false}
-						cellTypographySize="medium"
-						isLoading={isLoading || isFetching}
-						onEndReached={handleEndReached}
-						onColumnOrderChange={(cols): void =>
-							config?.addColumn?.onReorder(cols.map((c) => c.id))
-						}
-						onColumnRemove={config?.addColumn?.onRemove}
-						onRowClick={handleRowClick}
-						onRowClickNewTab={handleRowClickNewTab}
-					/>
-				</div>
+			{!isError && transformedQueryTableData.length !== 0 && (
+				<ResizeTable
+					tableLayout="fixed"
+					pagination={false}
+					scroll={{ x: 'max-content' }}
+					loading={isFetching}
+					style={tableStyles}
+					dataSource={transformedQueryTableData}
+					columns={columns}
+					onDragColumn={handleDragColumn}
+				/>
 			)}
 		</Container>
 	);

frontend/src/container/TracesExplorer/ListView/styles.ts

@@ -1,8 +1,7 @@
 import { CSSProperties } from 'react';
+import { Typography } from '@signozhq/ui/typography';
 import styled from 'styled-components';
 
-// Kept for legacy antd consumers (TracesTableComponent, LogsPanelComponent).
-// The TanStack ListView doesn't use it.
 export const tableStyles: CSSProperties = {
 	cursor: 'unset',
 };
@@ -10,30 +9,13 @@ export const tableStyles: CSSProperties = {
 export const Container = styled.div`
 	display: flex;
 	flex-direction: column;
-	flex: 1;
-	min-height: 0;
-	// Fallback: the page-level CSS chain (.trace-explorer-page → .trace-explorer →
-	// .traces-explorer-views) isn't a flex column today, so flex:1 alone has nothing
-	// to flex against. Anchor a height via the viewport so react-virtuoso (inside
-	// TanStackTable) has a sized parent to render into.
-	height: calc(100vh - 240px);
-	min-height: 400px;
-
-	// Match logs explorer table typography (mirrors LogsExplorerList.style.scss).
-	font-family: 'Space Mono', monospace;
-
-	// Row hover affordance — TanStack's row hover reads var(--row-hover-bg) with no
-	// fallback, so without setting it hover is invisible.
-	--row-hover-bg: var(--l1-border);
-
-	// Small leading gap before the pinned timestamp column. No drag handle here
-	// (pinned columns aren't movable), so we don't need the full 12px we use in
-	// the grouped Traces view — 5px just keeps the text off the table edge.
-	--tanstack-cell-padding-left-first-column: 5px;
-
-	// Allow dynamic-field cells to clamp to 3 lines (matches old LineClampedText
-	// behavior). Header + intrinsic columns stay 1-line by their own settings.
-	--tanstack-plain-body-line-clamp: 3;
-
 	--typography-color: var(--l1-foreground);
 `;
+
+export const ErrorText = styled(Typography)`
+	text-align: center;
+`;
+
+export const DateText = styled(Typography)`
+	min-width: 145px;
+`;

frontend/src/container/TracesExplorer/ListView/utils.tsx

@@ -3,8 +3,6 @@ import type { TableColumnsType as ColumnsType } from 'antd';
 import { Badge } from '@signozhq/ui/badge';
 import { Typography } from '@signozhq/ui/typography';
 import { TelemetryFieldKey } from 'api/v5/v5';
-import TanStackTable from 'components/TanStackTableView';
-import type { TableColumnDef } from 'components/TanStackTableView/types';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import ROUTES from 'constants/routes';
 import { buildCompositeKey } from 'container/OptionsMenu/utils';
@@ -16,14 +14,6 @@ import LineClampedText from 'periscope/components/LineClampedText/LineClampedTex
 import { ILog } from 'types/api/logs/log';
 import { QueryDataV3 } from 'types/api/widgets/getQuery';
 
-// `BlockLink`, `getListColumns`, `transformDataWithDate` are kept for legacy
-// antd consumers. `getTraceLink` is shared with the TanStack ListView, which
-// otherwise uses `make*Col` / `SpanRow` / `transformSpanRows`.
-
-// ---------------------------------------------------------------------------
-// Legacy antd consumers
-// ---------------------------------------------------------------------------
-
 export function BlockLink({
 	children,
 	to,
@@ -51,43 +41,12 @@ export const transformDataWithDate = (
 	data[0]?.list?.map(({ data, timestamp }) => ({ ...data, date: timestamp })) ||
 	[];
 
-/**
- * Reads camelCase OR snake_case at runtime — both legacy `RowData` and the new
- * `SpanRow` (each used by different ListView/utils consumers) satisfy
- * `Record<string, unknown>` because their named props are subtypes of `unknown`.
- */
-export const getTraceLink = (record: Record<string, unknown>): string => {
-	const traceId = readId(record.traceID) || readId(record.trace_id);
-	const spanId = readId(record.spanID) || readId(record.span_id);
-	return `${ROUTES.TRACE}/${traceId}${formUrlParams({
-		spanId,
+export const getTraceLink = (record: RowData): string =>
+	`${ROUTES.TRACE}/${record.traceID || record.trace_id}${formUrlParams({
+		spanId: record.spanID || record.span_id,
 		levelUp: 0,
 		levelDown: 0,
 	})}`;
-};
-
-function readId(value: unknown): string {
-	if (typeof value === 'string') {
-		return value;
-	}
-	if (typeof value === 'number') {
-		return String(value);
-	}
-	return '';
-}
-
-function stringifyCellValue(value: unknown): string {
-	if (value == null) {
-		return '';
-	}
-	if (typeof value === 'string') {
-		return value;
-	}
-	if (typeof value === 'number' || typeof value === 'boolean') {
-		return String(value);
-	}
-	return JSON.stringify(value);
-}
 
 export const getListColumns = (
 	selectedColumns: TelemetryFieldKey[],
@@ -177,107 +136,3 @@ export const getListColumns = (
 
 	return [...initialColumns, ...columns];
 };
-
-// ---------------------------------------------------------------------------
-// TanStack ListView (current)
-// ---------------------------------------------------------------------------
-
-// Span row shape for the trace list view. Known intrinsic fields explicit; the
-// rest of the row comes from user-selected dynamic columns (selectColumns), hence
-// the Record intersection. `timestamp` is added by transformSpanRows from the
-// API's wrapping ListItem.timestamp (data itself omits it).
-export type SpanRow = {
-	trace_id: string;
-	span_id: string;
-	timestamp: string;
-} & Record<string, unknown>;
-
-export const transformSpanRows = (data: QueryDataV3[]): SpanRow[] => {
-	const list = data[0]?.list;
-	if (!list) {
-		return [];
-	}
-	return list.map((item) => ({
-		...(item.data as Record<string, unknown>),
-		timestamp: item.timestamp,
-	})) as unknown as SpanRow[];
-};
-
-// Field-name allowlists that drive signal-specific cell rendering (kept from the
-// pre-TanStack getListColumns). Both legacy camelCase + snake_case variants are
-// listed because the API has shipped both over time.
-const STATUS_FIELD_NAMES = new Set([
-	'httpMethod',
-	'http_method',
-	'responseStatusCode',
-	'response_status_code',
-]);
-const DURATION_FIELD_NAMES = new Set(['durationNano', 'duration_nano']);
-
-type TimestampFormatter = (
-	input: TimestampInput,
-	format?: string,
-) => string | number;
-
-export function makeTimestampCol(
-	formatTimezoneAdjustedTimestamp: TimestampFormatter,
-): TableColumnDef<SpanRow> {
-	return {
-		id: buildCompositeKey('timestamp', 'span'),
-		header: 'Timestamp',
-		accessorFn: (row): unknown => row.timestamp,
-		// Pinned left as a visual anchor during horizontal scroll. Trade-off: the
-		// sticky-positioning + cell `overflow: hidden` in TanStackTable.module.scss
-		// makes the right-edge resize handle effectively unhittable for pinned
-		// columns — accepted.
-		pin: 'left',
-		canBeHidden: false,
-		enableRemove: false,
-		width: { default: 170, min: 170 },
-		cell: ({ value }): JSX.Element => {
-			const ts = value as string | number;
-			const formatted =
-				typeof ts === 'string'
-					? formatTimezoneAdjustedTimestamp(ts, DATE_TIME_FORMATS.ISO_DATETIME_MS)
-					: formatTimezoneAdjustedTimestamp(
-							ts / 1e6,
-							DATE_TIME_FORMATS.ISO_DATETIME_MS,
-						);
-			return <TanStackTable.Text>{String(formatted)}</TanStackTable.Text>;
-		},
-	};
-}
-
-export function makeListFieldCol(
-	f: TelemetryFieldKey,
-): TableColumnDef<SpanRow> {
-	return {
-		id: buildCompositeKey(f.name, f.fieldContext, f.fieldDataType),
-		header: f.name,
-		accessorFn: (row): unknown => row[f.name],
-		enableRemove: true,
-		width: { min: 192 },
-		cell: ({ value }): JSX.Element => {
-			if (value === '' || value == null) {
-				return <TanStackTable.Text data-testid={f.name}>N/A</TanStackTable.Text>;
-			}
-			const text = stringifyCellValue(value);
-			if (STATUS_FIELD_NAMES.has(f.name)) {
-				return (
-					<Badge data-testid={f.name} color="sakura" variant="outline">
-						{text}
-					</Badge>
-				);
-			}
-			if (DURATION_FIELD_NAMES.has(f.name)) {
-				return (
-					<TanStackTable.Text data-testid={f.name}>
-						{getMs(text)}
-						ms
-					</TanStackTable.Text>
-				);
-			}
-			return <TanStackTable.Text data-testid={f.name}>{text}</TanStackTable.Text>;
-		},
-	};
-}

frontend/src/container/TracesExplorer/TracesView/configs.tsx

@@ -1,69 +1,50 @@
-import TanStackTable from 'components/TanStackTableView';
-import type { TableColumnDef } from 'components/TanStackTableView/types';
-import { buildCompositeKey } from 'container/OptionsMenu/utils';
+import { generatePath, Link } from 'react-router-dom';
+import type { TableColumnsType as ColumnsType } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import ROUTES from 'constants/routes';
 import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
 import { DEFAULT_PER_PAGE_OPTIONS } from 'hooks/queryPagination';
+import { ListItem } from 'types/api/widgets/getQuery';
 
 export const PER_PAGE_OPTIONS: number[] = [10, ...DEFAULT_PER_PAGE_OPTIONS];
 
-// Trace-grouped (group-by-trace) row shape. Distinct from logs' `ListItem.data`
-// (which is `Omit<ILog, 'timestamp' | 'span_id'>` — the legacy logs shape).
-// Trace rows ship trace-summary fields; runtime keys often contain dots (e.g.
-// `service.name`), so the row indexes via string keys, not nested-property access.
-export type TraceRow = {
-	'service.name': string;
-	name: string;
-	duration_nano: number | string;
-	span_count: number | string;
-	trace_id: string;
-};
-
-export const columns: TableColumnDef<TraceRow>[] = [
+export const columns: ColumnsType<ListItem['data']> = [
 	{
-		id: buildCompositeKey('service.name', 'resource'),
-		header: 'Root Service Name',
-		accessorFn: (row): unknown => row['service.name'],
-		cell: ({ value }): JSX.Element => (
-			<TanStackTable.Text>{String(value ?? '')}</TanStackTable.Text>
-		),
-		width: { min: 192 },
+		title: 'Root Service Name',
+		dataIndex: 'service.name',
+		key: 'serviceName',
 	},
 	{
-		id: 'name',
-		header: 'Root Operation Name',
-		accessorFn: (row): unknown => row.name,
-		cell: ({ value }): JSX.Element => (
-			<TanStackTable.Text data-testid="trace-id">
-				{String(value ?? '')}
-			</TanStackTable.Text>
-		),
-		width: { min: 200 },
+		title: 'Root Operation Name',
+		dataIndex: 'name',
+		key: 'name',
 	},
 	{
-		id: 'duration_nano',
-		header: 'Root Duration (in ms)',
-		accessorFn: (row): unknown => row.duration_nano,
-		cell: ({ value }): JSX.Element => (
-			<TanStackTable.Text>{getMs(String(value))}ms</TanStackTable.Text>
+		title: 'Root Duration (in ms)',
+		dataIndex: 'duration_nano',
+		key: 'durationNano',
+		render: (duration: number): JSX.Element => (
+			<Typography>{getMs(String(duration))}ms</Typography>
 		),
-		width: { min: 130 },
 	},
 	{
-		id: 'span_count',
-		header: 'No of Spans',
-		accessorFn: (row): unknown => row.span_count,
-		cell: ({ value }): JSX.Element => (
-			<TanStackTable.Text>{String(value ?? '')}</TanStackTable.Text>
-		),
-		width: { min: 100 },
+		title: 'No of Spans',
+		dataIndex: 'span_count',
+		key: 'span_count',
 	},
 	{
-		id: 'trace_id',
-		header: 'TraceID',
-		accessorFn: (row): unknown => row.trace_id,
-		cell: ({ value }): JSX.Element => (
-			<TanStackTable.Text>{String(value ?? '')}</TanStackTable.Text>
+		title: 'TraceID',
+		dataIndex: 'trace_id',
+		key: 'traceID',
+		render: (traceID: string): JSX.Element => (
+			<Link
+				to={generatePath(ROUTES.TRACE_DETAIL, {
+					id: traceID,
+				})}
+				data-testid="trace-id"
+			>
+				{traceID}
+			</Link>
 		),
-		width: { min: 250 },
 	},
 ];

frontend/src/container/TracesExplorer/TracesView/index.tsx

@@ -4,44 +4,38 @@ import {
 	memo,
 	MutableRefObject,
 	SetStateAction,
-	useCallback,
 	useEffect,
 	useMemo,
-	useState,
 } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { generatePath, useHistory } from 'react-router-dom';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
-import TanStackTable from 'components/TanStackTableView';
-import { useTracesTableColumns } from 'components/Traces/TableView/useTracesTableColumns';
+import { ResizeTable } from 'components/ResizeTable';
 import { ENTITY_VERSION_V5 } from 'constants/app';
-import { LOCALSTORAGE } from 'constants/localStorage';
+import { QueryParams } from 'constants/query';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import ROUTES from 'constants/routes';
 import EmptyLogsSearch from 'container/EmptyLogsSearch/EmptyLogsSearch';
 import NoLogs from 'container/NoLogs/NoLogs';
 import { getListViewQuery } from 'container/TracesExplorer/explorerUtils';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { Pagination } from 'hooks/queryPagination';
+import useUrlQueryData from 'hooks/useUrlQueryData';
 import { AppState } from 'store/reducers';
 import { Warning } from 'types/api';
 import APIError from 'types/api/error';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { getAbsoluteUrl } from 'utils/basePath';
 import DOCLINKS from 'utils/docLinks';
 
+import TraceExplorerControls from '../Controls';
 import { TracesLoading } from '../TraceLoading/TraceLoading';
-import { columns as baseColumns, TraceRow } from './configs';
+import { columns, PER_PAGE_OPTIONS } from './configs';
 import { ActionsContainer, Container } from './styles';
 
-const PAGE_SIZE = 50;
-
 interface TracesViewProps {
 	isFilterApplied: boolean;
 	setWarning: Dispatch<SetStateAction<Warning | undefined>>;
@@ -55,7 +49,6 @@ function TracesView({
 	setIsLoadingQueries,
 	queryKeyRef,
 }: TracesViewProps): JSX.Element {
-	const history = useHistory();
 	const { stagedQuery, panelType } = useQueryBuilder();
 
 	const {
@@ -64,20 +57,9 @@ function TracesView({
 		minTime,
 	} = useSelector<AppState, GlobalReducer>((state) => state.globalTime);
 
-	// Infinite-scroll state — owned by this view.
-	const [pagination, setPagination] = useState<Pagination>({
-		offset: 0,
-		limit: PAGE_SIZE,
-	});
-	const [accumulatedRows, setAccumulatedRows] = useState<TraceRow[]>([]);
-	const [hasMore, setHasMore] = useState(true);
-
-	// Reset accumulator + offset whenever the underlying query identity changes.
-	useEffect(() => {
-		setPagination({ offset: 0, limit: PAGE_SIZE });
-		setAccumulatedRows([]);
-		setHasMore(true);
-	}, [stagedQuery?.id, globalSelectedTime, maxTime, minTime]);
+	const { queryData: paginationQueryData } = useUrlQueryData<Pagination>(
+		QueryParams.pagination,
+	);
 
 	const transformedQuery = useMemo(
 		() => getListViewQuery(stagedQuery || initialQueriesMap.traces),
@@ -92,9 +74,16 @@ function TracesView({
 			minTime,
 			stagedQuery,
 			panelType,
-			pagination,
+			paginationQueryData,
+		],
+		[
+			globalSelectedTime,
+			maxTime,
+			minTime,
+			stagedQuery,
+			panelType,
+			paginationQueryData,
 		],
-		[globalSelectedTime, maxTime, minTime, stagedQuery, panelType, pagination],
 	);
 
 	if (queryKeyRef) {
@@ -111,7 +100,7 @@ function TracesView({
 				dataSource: 'traces',
 			},
 			tableParams: {
-				pagination,
+				pagination: paginationQueryData,
 			},
 		},
 		ENTITY_VERSION_V5,
@@ -128,20 +117,11 @@ function TracesView({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [data?.payload, data?.warning]);
 
-	// Append fetched page to accumulator (replace when offset === 0).
-	const responseList = data?.payload?.data?.newResult?.data?.result?.[0]?.list;
-	useEffect(() => {
-		if (!responseList) {
-			return;
-		}
-		// API returns trace-summary rows; the `ListItem.data` static type is the
-		// legacy logs shape, so route through `unknown` to land on `TraceRow`.
-		const newRows = responseList.map((li) => li.data) as unknown as TraceRow[];
-		setAccumulatedRows((prev) =>
-			pagination.offset === 0 ? newRows : [...prev, ...newRows],
-		);
-		setHasMore(newRows.length >= pagination.limit);
-	}, [responseList, pagination.offset, pagination.limit]);
+	const responseData = data?.payload?.data?.newResult?.data?.result[0]?.list;
+	const tableData = useMemo(
+		() => responseData?.map((listItem) => listItem.data),
+		[responseData],
+	);
 
 	useEffect(() => {
 		if (isLoading || isFetching) {
@@ -152,48 +132,16 @@ function TracesView({
 	}, [isLoading, isFetching, setIsLoadingQueries]);
 
 	useEffect(() => {
-		if (!isLoading && !isFetching && !isError && accumulatedRows.length !== 0) {
-			void logEvent('Traces Explorer: Data present', {
+		if (!isLoading && !isFetching && !isError && (tableData || []).length !== 0) {
+			logEvent('Traces Explorer: Data present', {
 				panelType: 'TRACE',
 			});
 		}
-	}, [isLoading, isFetching, isError, accumulatedRows.length]);
+	}, [isLoading, isFetching, isError, panelType, tableData]);
 
-	const handleEndReached = useCallback(() => {
-		if (!hasMore) {
-			return;
-		}
-		setPagination((p) => ({ ...p, offset: p.offset + p.limit }));
-	}, [hasMore]);
-
-	const tableColumns = useTracesTableColumns<TraceRow>({ baseColumns });
-
-	const handleRowClick = useCallback(
-		(row: TraceRow): void => {
-			const traceId = String(row.trace_id);
-			history.push(generatePath(ROUTES.TRACE_DETAIL, { id: traceId }));
-		},
-		[history],
-	);
-
-	const handleRowClickNewTab = useCallback((row: TraceRow): void => {
-		const traceId = String(row.trace_id);
-		const path = generatePath(ROUTES.TRACE_DETAIL, { id: traceId });
-		window.open(getAbsoluteUrl(path), '_blank', 'noopener,noreferrer');
-	}, []);
-
-	//oxlint-disable-next-line no-console
-	console.log('TracesView rendered with rows:', {
-		accumulatedRows,
-		tableColumns,
-		isLoading,
-		isFetching,
-		isError,
-		error,
-	});
 	return (
 		<Container>
-			{accumulatedRows.length !== 0 && (
+			{(tableData || []).length !== 0 && (
 				<ActionsContainer>
 					<Typography>
 						This tab only shows Root Spans. More details
@@ -202,12 +150,20 @@ function TracesView({
 							here
 						</Typography.Link>
 					</Typography>
+
+					<div className="trace-explorer-controls">
+						<TraceExplorerControls
+							isLoading={isLoading}
+							totalCount={responseData?.length || 0}
+							perPageOptions={PER_PAGE_OPTIONS}
+						/>
+					</div>
 				</ActionsContainer>
 			)}
 
 			{isError && error && <ErrorInPlace error={error as APIError} />}
 
-			{(isLoading || isFetching) && accumulatedRows.length === 0 && (
+			{(isLoading || (isFetching && (tableData || []).length === 0)) && (
 				<TracesLoading />
 			)}
 
@@ -215,36 +171,25 @@ function TracesView({
 				!isFetching &&
 				!isError &&
 				!isFilterApplied &&
-				accumulatedRows.length === 0 && <NoLogs dataSource={DataSource.TRACES} />}
+				(tableData || []).length === 0 && <NoLogs dataSource={DataSource.TRACES} />}
 
 			{!isLoading &&
 				!isFetching &&
-				accumulatedRows.length === 0 &&
+				(tableData || []).length === 0 &&
 				!isError &&
 				isFilterApplied && (
 					<EmptyLogsSearch dataSource={DataSource.TRACES} panelType="TRACE" />
 				)}
 
-			{accumulatedRows.length !== 0 && (
-				<div
-					style={{
-						flex: 1,
-						minHeight: 0,
-						display: 'flex',
-						flexDirection: 'column',
-					}}
-				>
-					<TanStackTable<TraceRow>
-						data={accumulatedRows}
-						columns={tableColumns}
-						columnStorageKey={LOCALSTORAGE.TRACES_VIEW_COLUMNS}
-						cellTypographySize="medium"
-						isLoading={isLoading || isFetching}
-						onEndReached={handleEndReached}
-						onRowClick={handleRowClick}
-						onRowClickNewTab={handleRowClickNewTab}
-					/>
-				</div>
+			{(tableData || []).length !== 0 && (
+				<ResizeTable
+					loading={isLoading}
+					columns={columns}
+					tableLayout="fixed"
+					dataSource={tableData}
+					scroll={{ x: true }}
+					pagination={false}
+				/>
 			)}
 		</Container>
 	);

frontend/src/container/TracesExplorer/TracesView/styles.ts

@@ -3,16 +3,6 @@ import styled from 'styled-components';
 export const Container = styled.div`
 	display: flex;
 	flex-direction: column;
-	flex: 1;
-	min-height: 0;
-	height: calc(100vh - 240px);
-	min-height: 400px;
-
-	// Row hover affordance
-	--row-hover-bg: var(--l1-border);
-
-	// Breathing room before the first column so cell content doesn't hug the corner.
-	--tanstack-cell-padding-left-first-column: 12px;
 `;
 
 export const ActionsContainer = styled.div`

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/DashboardActions/DashboardActions.tsx

@@ -1,36 +1,29 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FullScreenHandle } from 'react-full-screen';
 import { useTranslation } from 'react-i18next';
 import { useCopyToClipboard } from 'react-use';
 import {
 	ClipboardCopy,
-	Configure,
 	Ellipsis,
 	FileJson,
 	Fullscreen,
 	LockKeyhole,
 	PenLine,
 	Plus,
-	Trash2,
 } from '@signozhq/icons';
+import { Popover } from 'antd';
 import { Button } from '@signozhq/ui/button';
-import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
-import type { MenuItem } from '@signozhq/ui/dropdown-menu';
 import { toast } from '@signozhq/ui/sonner';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
-import ROUTES from 'constants/routes';
+import { DeleteButton } from 'container/ListOfDashboard/TableComponents/DeleteButton';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
-import { useDeleteDashboard } from 'hooks/dashboard/useDeleteDashboard';
-import history from 'lib/history';
 import { useAppContext } from 'providers/App/App';
 import { USER_ROLES } from 'types/roles';
 
-import ConfirmDeleteDialog from '../../components/ConfirmDeleteDialog/ConfirmDeleteDialog';
-import DashboardSettings from '../../DashboardSettings';
-import SettingsDrawer from '../SettingsDrawer';
 import styles from '../DashboardDescription.module.scss';
 
-interface DashboardActionsProps {
+interface Props {
 	dashboard: DashboardtypesGettableDashboardV2DTO;
 	handle: FullScreenHandle;
 	isDashboardLocked: boolean;
@@ -52,19 +45,17 @@ function DashboardActions({
 	onAddPanel,
 	onLockToggle,
 	onOpenRename,
-}: DashboardActionsProps): JSX.Element {
+}: Props): JSX.Element {
 	const { user } = useAppContext();
 	const { t } = useTranslation(['dashboard', 'common']);
 
-	const id = dashboard.id ?? '';
+	const id = dashboard.id;
 	const title = dashboard.spec?.display?.name ?? '';
 
-	const [isSettingsDrawerOpen, setIsSettingsDrawerOpen] =
+	const [isDashboardSettingsOpen, setIsDashboardSettingsOpen] =
 		useState<boolean>(false);
 
 	const [state, setCopy] = useCopyToClipboard();
-	const [isDeleteOpen, setIsDeleteOpen] = useState<boolean>(false);
-	const deleteDashboardMutation = useDeleteDashboard(id);
 
 	useEffect(() => {
 		if (state.error) {
@@ -75,12 +66,9 @@ function DashboardActions({
 		}
 	}, [state.error, state.value, t]);
 
-	const dashboardDataJSON = useCallback(
-		(): string => JSON.stringify(dashboard, null, 2),
-		[dashboard],
-	);
+	const dashboardDataJSON = (): string => JSON.stringify(dashboard, null, 2);
 
-	const exportJSON = useCallback((): void => {
+	const exportJSON = (): void => {
 		const blob = new Blob([dashboardDataJSON()], { type: 'application/json' });
 		const url = URL.createObjectURL(blob);
 		const link = document.createElement('a');
@@ -90,141 +78,119 @@ function DashboardActions({
 		link.click();
 		document.body.removeChild(link);
 		URL.revokeObjectURL(url);
-	}, [dashboardDataJSON, title]);
-
-	const handleConfirmDelete = useCallback((): void => {
-		deleteDashboardMutation.mutate(undefined, {
-			onSuccess: () => {
-				setIsDeleteOpen(false);
-				history.replace(ROUTES.ALL_DASHBOARD);
-			},
-		});
-	}, [deleteDashboardMutation]);
-
-	const menuItems = useMemo<MenuItem[]>(() => {
-		const editGroup: MenuItem[] = [];
-		if (!isDashboardLocked && editDashboard) {
-			editGroup.push({
-				key: 'rename',
-				label: 'Rename',
-				icon: <PenLine size={14} />,
-				onClick: onOpenRename,
-			});
-		}
-		if (isAuthor || user.role === USER_ROLES.ADMIN) {
-			editGroup.push({
-				key: 'lock',
-				label: isDashboardLocked ? 'Unlock dashboard' : 'Lock dashboard',
-				icon: <LockKeyhole size={14} />,
-				disabled: dashboard.createdBy === 'integration',
-				onClick: onLockToggle,
-			});
-		}
-		editGroup.push({
-			key: 'fullscreen',
-			label: 'Full screen',
-			icon: <Fullscreen size={14} />,
-			onClick: handle.enter,
-		});
-
-		const exportGroup: MenuItem[] = [
-			{
-				key: 'export',
-				label: 'Export JSON',
-				icon: <FileJson size={14} />,
-				onClick: exportJSON,
-			},
-			{
-				key: 'copy',
-				label: 'Copy as JSON',
-				icon: <ClipboardCopy size={14} />,
-				onClick: (): void => setCopy(dashboardDataJSON()),
-			},
-		];
-
-		const dangerGroup: MenuItem[] = [
-			{
-				key: 'delete',
-				label: 'Delete dashboard',
-				icon: <Trash2 size={14} />,
-				danger: true,
-				onClick: (): void => setIsDeleteOpen(true),
-			},
-		];
-
-		return [editGroup, exportGroup, dangerGroup]
-			.filter((group) => group.length > 0)
-			.flatMap((group, index) =>
-				index > 0 ? [{ type: 'divider' } as MenuItem, ...group] : group,
-			);
-	}, [
-		isDashboardLocked,
-		editDashboard,
-		isAuthor,
-		user.role,
-		dashboard.createdBy,
-		onOpenRename,
-		onLockToggle,
-		handle.enter,
-		exportJSON,
-		setCopy,
-		dashboardDataJSON,
-	]);
+	};
 
 	return (
 		<div className={styles.rightSection}>
 			<DateTimeSelectionV2 showAutoRefresh hideShareModal />
-			<DropdownMenuSimple menu={{ items: menuItems }}>
+			<Popover
+				open={isDashboardSettingsOpen}
+				arrow={false}
+				onOpenChange={(visible): void => setIsDashboardSettingsOpen(visible)}
+				rootClassName={styles.dashboardSettings}
+				content={
+					<div className={styles.menuContent}>
+						<section className={styles.section1}>
+							{(isAuthor || user.role === USER_ROLES.ADMIN) && (
+								<TooltipSimple
+									title={
+										dashboard.createdBy === 'integration'
+											? 'Dashboards created by integrations cannot be unlocked'
+											: ''
+									}
+								>
+									<Button
+										variant="ghost"
+										prefix={<LockKeyhole size={14} />}
+										disabled={dashboard.createdBy === 'integration'}
+										onClick={(): void => {
+											setIsDashboardSettingsOpen(false);
+											onLockToggle();
+										}}
+										testId="lock-unlock-dashboard"
+									>
+										{isDashboardLocked ? 'Unlock Dashboard' : 'Lock Dashboard'}
+									</Button>
+								</TooltipSimple>
+							)}
+
+							{!isDashboardLocked && editDashboard && (
+								<Button
+									variant="ghost"
+									prefix={<PenLine size={14} />}
+									onClick={(): void => {
+										onOpenRename();
+										setIsDashboardSettingsOpen(false);
+									}}
+								>
+									Rename
+								</Button>
+							)}
+
+							<Button
+								variant="ghost"
+								prefix={<Fullscreen size={14} />}
+								onClick={handle.enter}
+							>
+								Full screen
+							</Button>
+						</section>
+						<section className={styles.section2}>
+							<Button
+								variant="ghost"
+								prefix={<FileJson size={14} />}
+								onClick={(): void => {
+									exportJSON();
+									setIsDashboardSettingsOpen(false);
+								}}
+							>
+								Export JSON
+							</Button>
+							<Button
+								variant="ghost"
+								prefix={<ClipboardCopy size={14} />}
+								onClick={(): void => {
+									setCopy(dashboardDataJSON());
+									setIsDashboardSettingsOpen(false);
+								}}
+							>
+								Copy as JSON
+							</Button>
+						</section>
+						<section className={styles.deleteDashboard}>
+							<DeleteButton
+								createdBy={dashboard.createdBy || ''}
+								name={title}
+								id={id}
+								isLocked={isDashboardLocked}
+								routeToListPage
+							/>
+						</section>
+					</div>
+				}
+				trigger="click"
+				placement="bottomRight"
+			>
 				<Button
 					variant="ghost"
-					color="secondary"
 					size="icon"
 					prefix={<Ellipsis size={14} />}
 					className={styles.icons}
 					testId="options"
 				/>
-			</DropdownMenuSimple>
-			{!isDashboardLocked && editDashboard && (
-				<>
-					<Button
-						variant="solid"
-						color="secondary"
-						prefix={<Configure size="md" />}
-						testId="show-drawer"
-						onClick={(): void => setIsSettingsDrawerOpen(true)}
-						size="md"
-					>
-						Configure
-					</Button>
-					<SettingsDrawer
-						drawerTitle="Dashboard Configuration"
-						isOpen={isSettingsDrawerOpen}
-						onClose={(): void => setIsSettingsDrawerOpen(false)}
-					>
-						<DashboardSettings dashboard={dashboard} />
-					</SettingsDrawer>
-				</>
-			)}
+			</Popover>
 			{!isDashboardLocked && addPanelPermission && (
 				<Button
 					variant="solid"
 					color="primary"
+					className={styles.addPanelBtn}
 					onClick={onAddPanel}
 					prefix={<Plus size="md" />}
 					testId="add-panel-header"
-					size="md"
 				>
 					New Panel
 				</Button>
 			)}
-			<ConfirmDeleteDialog
-				open={isDeleteOpen}
-				title={`Delete dashboard "${title}"?`}
-				description="This action cannot be undone."
-				isLoading={deleteDashboardMutation.isLoading}
-				onConfirm={handleConfirmDelete}
-				onClose={(): void => setIsDeleteOpen(false)}
-			/>
 		</div>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/DashboardDescription.module.scss

@@ -20,7 +20,6 @@
 			align-items: center;
 			gap: 8px;
 			width: 45%;
-			height: 40px;
 
 			.dashboardImg {
 				height: 16px;
@@ -43,35 +42,6 @@
 				overflow: hidden;
 			}
 
-			.clickableTitle {
-				cursor: pointer;
-			}
-
-			.titleEdit {
-				display: flex;
-				align-items: center;
-				gap: 4px;
-				width: 100%;
-				min-width: 0;
-			}
-
-			.titleInput {
-				flex: 1;
-				min-width: 0;
-				max-width: 70%;
-			}
-
-			.titleEditActionButton {
-				--button-height: auto;
-				--button-padding: 4px;
-				flex-shrink: 0;
-			}
-
-			.titleSaveActionButton {
-				--button-border-color: var(--text-forest-700);
-				--button-outlined-foreground: var(--text-forest-700);
-			}
-
 			.publicDashboardIcon {
 				margin-right: 4px;
 			}
@@ -84,7 +54,6 @@
 			flex-wrap: wrap;
 			align-items: center;
 			gap: 14px;
-			height: 40px;
 
 			.icons {
 				display: flex;
@@ -108,6 +77,41 @@
 			.icons:hover {
 				background-color: unset;
 			}
+
+			.configureButton {
+				display: flex;
+				align-items: center;
+				width: 93px;
+				height: 34px;
+				padding: 6px;
+				justify-content: center;
+				border-radius: 2px;
+				border: 1px solid var(--l1-border);
+				background: var(--l3-background);
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 12px;
+				font-style: normal;
+				font-weight: 500;
+				line-height: 10px; /* 83.333% */
+				letter-spacing: 0.12px;
+			}
+
+			.addPanelBtn {
+				display: flex;
+				width: 119px;
+				height: 34px;
+				padding: 5.937px 11.875px;
+				justify-content: center;
+				align-items: center;
+				color: var(--primary-foreground);
+				background: var(--primary-background);
+				font-family: Inter;
+				font-size: 11.875px;
+				font-style: normal;
+				font-weight: 500;
+				line-height: 17.812px; /* 150% */
+			}
 		}
 	}
 
@@ -205,6 +209,95 @@
 	}
 }
 
-.deleteModal :global(.ant-modal-confirm-body) {
-	align-items: center;
+.renameDashboard {
+	:global(.ant-modal-content) {
+		width: 384px;
+		flex-shrink: 0;
+		border-radius: 4px;
+		border: 1px solid var(--l1-border);
+		background: var(--l2-background);
+		box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
+		padding: 0px;
+
+		:global(.ant-modal-header) {
+			height: 52px;
+			padding: 16px;
+			background: var(--l2-background);
+			border-bottom: 1px solid var(--l1-border);
+			margin-bottom: 0px;
+
+			:global(.ant-modal-title) {
+				color: var(--l1-foreground);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+				width: 349px;
+				height: 20px;
+			}
+		}
+
+		:global(.ant-modal-body) {
+			padding: 16px;
+
+			.dashboardContent {
+				display: flex;
+				flex-direction: column;
+				gap: 8px;
+
+				.nameText {
+					color: var(--l1-foreground);
+					font-family: Inter;
+					font-size: 14px;
+					font-style: normal;
+					font-weight: 500;
+					line-height: 20px; /* 142.857% */
+				}
+
+				.dashboardNameInput {
+					display: flex;
+					padding: 6px 6px 6px 8px;
+					align-items: center;
+					gap: 4px;
+					align-self: stretch;
+					border-radius: 0px 2px 2px 0px;
+					border: 1px solid var(--l1-border);
+					background: var(--l3-background);
+				}
+			}
+		}
+
+		:global(.ant-modal-footer) {
+			padding: 16px;
+			margin-top: 0px;
+
+			.dashboardRename {
+				display: flex;
+				flex-direction: row-reverse;
+				gap: 12px;
+
+				.cancelBtn {
+					display: flex;
+					padding: 4px 8px;
+					justify-content: center;
+					align-items: center;
+					gap: 4px;
+					border-radius: 2px;
+					background: var(--l1-border);
+				}
+
+				.renameBtn {
+					display: flex;
+					align-items: center;
+					width: 169px;
+					padding: 4px 8px;
+					justify-content: center;
+					gap: 4px;
+					border-radius: 2px;
+					background: var(--primary-background);
+				}
+			}
+		}
+	}
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/DashboardMeta/DashboardMeta.tsx

@@ -3,12 +3,12 @@ import { isEmpty } from 'lodash-es';
 
 import styles from '../DashboardDescription.module.scss';
 
-interface DashboardMetaProps {
+interface Props {
 	tags: string[];
 	description: string;
 }
 
-function DashboardMeta({ tags, description }: DashboardMetaProps): JSX.Element {
+function DashboardMeta({ tags, description }: Props): JSX.Element {
 	return (
 		<>
 			{tags.length > 0 && (

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/DashboardTitle/DashboardTitle.tsx

@@ -1,25 +1,14 @@
-import { KeyboardEvent } from 'react';
-import { Check, Globe, LockKeyhole, X } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { Input } from '@signozhq/ui/input';
+import { Globe, LockKeyhole } from '@signozhq/icons';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
 
 import styles from '../DashboardDescription.module.scss';
 
-interface DashboardTitleProps {
+interface Props {
 	title: string;
 	image: string;
 	isPublicDashboard: boolean;
 	isDashboardLocked: boolean;
-	isEditable: boolean;
-	isEditing: boolean;
-	draft: string;
-	onDraftChange: (value: string) => void;
-	onStartEdit: () => void;
-	onCommit: () => void;
-	onCancel: () => void;
 }
 
 function DashboardTitle({
@@ -27,76 +16,18 @@ function DashboardTitle({
 	image,
 	isPublicDashboard,
 	isDashboardLocked,
-	isEditable,
-	isEditing,
-	draft,
-	onDraftChange,
-	onStartEdit,
-	onCommit,
-	onCancel,
-}: DashboardTitleProps): JSX.Element {
-	const canEdit = isEditable && !isDashboardLocked;
-
-	const onKeyDown = (event: KeyboardEvent<HTMLInputElement>): void => {
-		if (event.key === 'Enter') {
-			event.preventDefault();
-			onCommit();
-		} else if (event.key === 'Escape') {
-			onCancel();
-		}
-	};
-
+}: Props): JSX.Element {
 	return (
 		<div className={styles.leftSection}>
 			<img src={image} alt="dashboard-img" className={styles.dashboardImg} />
-			{isEditing ? (
-				<div className={styles.titleEdit}>
-					<Input
-						autoFocus
-						value={draft}
-						testId="dashboard-title-input"
-						maxLength={120}
-						className={styles.titleInput}
-						onChange={(e): void => onDraftChange(e.target.value)}
-						onKeyDown={onKeyDown}
-					/>
-					<Button
-						type="button"
-						variant="outlined"
-						size="icon"
-						className={cx(styles.titleEditActionButton, styles.titleSaveActionButton)}
-						aria-label="Save title"
-						testId="dashboard-title-save"
-						onClick={onCommit}
-					>
-						<Check size={14} />
-					</Button>
-					<Button
-						type="button"
-						variant="outlined"
-						color="destructive"
-						size="icon"
-						className={styles.titleEditActionButton}
-						aria-label="Cancel title edit"
-						testId="dashboard-title-cancel"
-						onClick={onCancel}
-					>
-						<X size={14} />
-					</Button>
-				</div>
-			) : (
-				<TooltipSimple title={title.length > 30 ? title : ''}>
-					<Typography.Text
-						className={cx(styles.dashboardTitle, {
-							[styles.clickableTitle]: canEdit,
-						})}
-						data-testid="dashboard-title"
-						onClick={canEdit ? onStartEdit : undefined}
-					>
-						{title}
-					</Typography.Text>
-				</TooltipSimple>
-			)}
+			<TooltipSimple title={title.length > 30 ? title : ''}>
+				<Typography.Text
+					className={styles.dashboardTitle}
+					data-testid="dashboard-title"
+				>
+					{title}
+				</Typography.Text>
+			</TooltipSimple>
 
 			{isPublicDashboard && (
 				<TooltipSimple title="This dashboard is publicly accessible">

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/DashboardTitle/useEditableTitle.ts

@@ -1,63 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-
-interface UseEditableTitleArgs {
-	value: string;
-	onSave: (next: string) => void;
-}
-
-interface UseEditableTitleResult {
-	isEditing: boolean;
-	draft: string;
-	setDraft: (next: string) => void;
-	startEdit: () => void;
-	cancel: () => void;
-	commit: () => void;
-}
-
-/**
- * Drives an inline-editable title. The parent owns the canonical `value`; this
- * hook tracks the in-flight `draft` and whether we're editing. `commit` saves
- * only when the trimmed draft is non-empty and actually changed. A `cancelled`
- * ref guards against a blur firing right after Escape from also committing.
- */
-export function useEditableTitle({
-	value,
-	onSave,
-}: UseEditableTitleArgs): UseEditableTitleResult {
-	const [isEditing, setIsEditing] = useState<boolean>(false);
-	const [draft, setDraft] = useState<string>(value);
-	const cancelled = useRef<boolean>(false);
-
-	// Keep the draft in sync with the canonical value while not editing (e.g.
-	// after a refetch updates the title).
-	useEffect(() => {
-		if (!isEditing) {
-			setDraft(value);
-		}
-	}, [value, isEditing]);
-
-	const startEdit = (): void => {
-		cancelled.current = false;
-		setDraft(value);
-		setIsEditing(true);
-	};
-
-	const cancel = (): void => {
-		cancelled.current = true;
-		setIsEditing(false);
-	};
-
-	const commit = (): void => {
-		if (cancelled.current) {
-			cancelled.current = false;
-			return;
-		}
-		const trimmed = draft.trim();
-		if (trimmed && trimmed !== value) {
-			onSave(trimmed);
-		}
-		setIsEditing(false);
-	};
-
-	return { isEditing, draft, setDraft, startEdit, cancel, commit };
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/RenameDashboardModal/RenameDashboardModal.tsx

@@ -0,0 +1,70 @@
+import { Input, Modal } from 'antd';
+import { Button } from '@signozhq/ui/button';
+import { Check, X } from '@signozhq/icons';
+import { Typography } from '@signozhq/ui/typography';
+
+import styles from '../DashboardDescription.module.scss';
+
+interface Props {
+	open: boolean;
+	value: string;
+	isLoading: boolean;
+	onChange: (value: string) => void;
+	onRename: () => void;
+	onClose: () => void;
+}
+
+function RenameDashboardModal({
+	open,
+	value,
+	isLoading,
+	onChange,
+	onRename,
+	onClose,
+}: Props): JSX.Element {
+	return (
+		<Modal
+			open={open}
+			title="Rename Dashboard"
+			onOk={onRename}
+			onCancel={onClose}
+			rootClassName={styles.renameDashboard}
+			footer={
+				<div className={styles.dashboardRename}>
+					<Button
+						variant="solid"
+						color="primary"
+						prefix={<Check size={14} />}
+						className={styles.renameBtn}
+						onClick={onRename}
+						disabled={isLoading}
+					>
+						Rename Dashboard
+					</Button>
+					<Button
+						variant="ghost"
+						prefix={<X size={14} />}
+						className={styles.cancelBtn}
+						onClick={onClose}
+					>
+						Cancel
+					</Button>
+				</div>
+			}
+		>
+			<div className={styles.dashboardContent}>
+				<Typography.Text className={styles.nameText}>
+					Enter a new name
+				</Typography.Text>
+				<Input
+					data-testid="dashboard-name"
+					className={styles.dashboardNameInput}
+					value={value}
+					onChange={(e): void => onChange(e.target.value)}
+				/>
+			</div>
+		</Modal>
+	);
+}
+
+export default RenameDashboardModal;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/SettingsDrawer/SettingsDrawer.module.scss

@@ -1,43 +0,0 @@
-.settingsContainerRoot {
-	:global(.ant-drawer-wrapper-body) {
-		border-left: 1px solid var(--l1-border);
-		background: var(--l2-background);
-		box-shadow: -4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-
-		:global(.ant-drawer-header) {
-			height: 48px;
-			border-bottom: 1px solid var(--l1-border);
-			padding: 14px 14px 14px 11px;
-
-			:global(.ant-drawer-header-title) {
-				gap: 16px;
-
-				:global(.ant-drawer-title) {
-					color: var(--l2-foreground);
-					font-family: Inter;
-					font-size: 14px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 20px; /* 142.857% */
-					letter-spacing: -0.07px;
-					padding-left: 16px;
-					border-left: 1px solid var(--l1-border);
-				}
-
-				:global(.ant-drawer-close) {
-					height: 16px;
-					width: 16px;
-					margin-inline-end: 0px !important;
-				}
-			}
-		}
-
-		:global(.ant-drawer-body) {
-			padding: 16px;
-
-			&::-webkit-scrollbar {
-				width: 0.1rem;
-			}
-		}
-	}
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/SettingsDrawer/index.tsx

@@ -1,34 +0,0 @@
-import { memo, PropsWithChildren, ReactElement } from 'react';
-import { Drawer } from 'antd';
-import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-
-import styles from './SettingsDrawer.module.scss';
-
-type SettingsDrawerProps = PropsWithChildren<{
-	drawerTitle: string;
-	isOpen: boolean;
-	onClose: () => void;
-}>;
-
-function SettingsDrawer({
-	children,
-	drawerTitle,
-	isOpen,
-	onClose,
-}: SettingsDrawerProps): JSX.Element {
-	return (
-		<Drawer
-			title={drawerTitle}
-			placement="right"
-			width="50%"
-			onClose={onClose}
-			open={isOpen}
-			rootClassName={styles.settingsContainerRoot}
-		>
-			{/* Need to type cast because of OverlayScrollbar type definition. We should be good once we remove it. */}
-			<OverlayScrollbar>{children as ReactElement}</OverlayScrollbar>
-		</Drawer>
-	);
-}
-
-export default memo(SettingsDrawer);

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/index.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { FullScreenHandle } from 'react-full-screen';
 import { Card } from 'antd';
 import { toast } from '@signozhq/ui/sonner';
@@ -15,7 +15,6 @@ import type {
 import { Base64Icons } from 'container/DashboardContainer/DashboardSettings/General/utils';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useAppContext } from 'providers/App/App';
-import { usePanelTypeSelectionModalStore } from 'providers/Dashboard/helpers/panelTypeSelectionModalHelper';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
 
@@ -23,7 +22,7 @@ import DashboardHeader from '../components/DashboardHeader/DashboardHeader';
 import DashboardActions from './DashboardActions/DashboardActions';
 import DashboardMeta from './DashboardMeta/DashboardMeta';
 import DashboardTitle from './DashboardTitle/DashboardTitle';
-import { useEditableTitle } from './DashboardTitle/useEditableTitle';
+import RenameDashboardModal from './RenameDashboardModal/RenameDashboardModal';
 
 import styles from './DashboardDescription.module.scss';
 
@@ -53,9 +52,6 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 	const { user } = useAppContext();
 	const [editDashboard] = useComponentPermission(['edit_dashboard'], user.role);
 	const { showErrorModal } = useErrorModal();
-	const setIsPanelTypeSelectionModalOpen = usePanelTypeSelectionModalStore(
-		(s) => s.setIsPanelTypeSelectionModalOpen,
-	);
 
 	const isAuthor =
 		!!user?.email && !!dashboard.createdBy && dashboard.createdBy === user.email;
@@ -63,7 +59,16 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 	// V2 public dashboard wiring lives separately; treat as not-public for chrome.
 	const isPublicDashboard = false;
 
-	const handleLockDashboardToggle = useCallback(async (): Promise<void> => {
+	const [isRenameDashboardOpen, setIsRenameDashboardOpen] =
+		useState<boolean>(false);
+	const [updatedTitle, setUpdatedTitle] = useState<string>(title);
+	const [isRenameLoading, setIsRenameLoading] = useState<boolean>(false);
+
+	useEffect(() => {
+		setUpdatedTitle(title);
+	}, [title]);
+
+	const handleLockDashboardToggle = async (): Promise<void> => {
 		if (!id) {
 			return;
 		}
@@ -79,43 +84,41 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 		} catch (error) {
 			showErrorModal(error as APIError);
 		}
-	}, [id, isDashboardLocked, refetch, showErrorModal]);
+	};
 
-	const onNameSave = useCallback(
-		async (next: string): Promise<void> => {
-			if (!id) {
-				return;
-			}
-			try {
-				const patch: DashboardtypesJSONPatchOperationDTO[] = [
-					{
-						op: 'replace' as DashboardtypesJSONPatchOperationDTO['op'],
-						path: '/spec/display/name',
-						value: next,
-					},
-				];
-				await patchDashboardV2({ id }, patch);
-				toast.success('Dashboard renamed successfully');
-				refetch();
-			} catch (error) {
-				showErrorModal(error as APIError);
-			}
-		},
-		[id, refetch, showErrorModal],
-	);
+	const onNameChangeHandler = async (): Promise<void> => {
+		const trimmed = updatedTitle.trim();
+		if (!id || !trimmed || trimmed === title) {
+			setIsRenameDashboardOpen(false);
+			return;
+		}
+		try {
+			setIsRenameLoading(true);
+			const patch: DashboardtypesJSONPatchOperationDTO[] = [
+				{
+					op: 'replace' as DashboardtypesJSONPatchOperationDTO['op'],
+					path: '/spec/display/name',
+					value: trimmed,
+				},
+			];
+			await patchDashboardV2({ id }, patch);
+			toast.success('Dashboard renamed successfully');
+			setIsRenameDashboardOpen(false);
+			refetch();
+		} catch (error) {
+			showErrorModal(error as APIError);
+			setIsRenameDashboardOpen(true);
+		} finally {
+			setIsRenameLoading(false);
+		}
+	};
 
-	const { isEditing, draft, setDraft, startEdit, cancel, commit } =
-		useEditableTitle({
-			value: title,
-			onSave: onNameSave,
-		});
-
-	const onEmptyWidgetHandler = useCallback((): void => {
+	const onEmptyWidgetHandler = (): void => {
 		void logEvent('Dashboard Detail V2: Add new panel clicked', {
 			dashboardId: id,
 		});
-		setIsPanelTypeSelectionModalOpen(true);
-	}, [id, setIsPanelTypeSelectionModalOpen]);
+		toast.info('V2 panel editor coming next');
+	};
 
 	return (
 		<Card className={styles.dashboardDescriptionContainer}>
@@ -126,13 +129,6 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 					image={image}
 					isPublicDashboard={isPublicDashboard}
 					isDashboardLocked={isDashboardLocked}
-					isEditable={editDashboard}
-					isEditing={isEditing}
-					draft={draft}
-					onDraftChange={setDraft}
-					onStartEdit={startEdit}
-					onCommit={commit}
-					onCancel={cancel}
 				/>
 				<DashboardActions
 					dashboard={dashboard}
@@ -143,10 +139,19 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 					addPanelPermission={addPanelPermission}
 					onAddPanel={onEmptyWidgetHandler}
 					onLockToggle={handleLockDashboardToggle}
-					onOpenRename={startEdit}
+					onOpenRename={(): void => setIsRenameDashboardOpen(true)}
 				/>
 			</section>
 			<DashboardMeta tags={tags} description={description} />
+
+			<RenameDashboardModal
+				open={isRenameDashboardOpen}
+				value={updatedTitle}
+				isLoading={isRenameLoading}
+				onChange={setUpdatedTitle}
+				onRename={onNameChangeHandler}
+				onClose={(): void => setIsRenameDashboardOpen(false)}
+			/>
 		</Card>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/DashboardSettings.module.scss

@@ -1,11 +0,0 @@
-.placeholder {
-	padding: 24px;
-}
-
-.tabLabel {
-	display: inline-flex;
-	align-items: center;
-	gap: 6px;
-	line-height: 1;
-	padding-top: 4px;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/General/CrossPanelSync/CrossPanelSync.tsx

@@ -1,114 +0,0 @@
-// eslint-disable-next-line signoz/no-antd-components -- TODO: migrate Radio to @signozhq/ui/radio-group
-import { Col, Radio, Tooltip } from 'antd';
-import { ExternalLink, SolidInfoCircle } from '@signozhq/icons';
-import { Typography } from '@signozhq/ui/typography';
-import logEvent from 'api/common/logEvent';
-import { Events } from 'constants/events';
-import { useDashboardCursorSyncMode } from 'hooks/dashboard/useDashboardCursorSyncMode';
-import { useSyncTooltipFilterMode } from 'hooks/dashboard/useSyncTooltipFilterMode';
-import {
-	DashboardCursorSync,
-	SyncTooltipFilterMode,
-} from 'lib/uPlotV2/plugins/TooltipPlugin/types';
-import { getAbsoluteUrl } from 'utils/basePath';
-import cx from 'classnames';
-
-import styles from '../GeneralSettings.module.scss';
-
-interface CrossPanelSyncProps {
-	dashboardId: string;
-}
-
-function CrossPanelSync({ dashboardId }: CrossPanelSyncProps): JSX.Element {
-	const [cursorSyncMode, setCursorSyncMode] =
-		useDashboardCursorSyncMode(dashboardId);
-	const [syncTooltipFilterMode, setSyncTooltipFilterMode] =
-		useSyncTooltipFilterMode(dashboardId);
-
-	return (
-		<Col className={cx(styles.overviewSettings, styles.crossPanelSyncGroup)}>
-			<div className={styles.crossPanelSyncSectionHeader}>
-				<Typography.Text className={styles.crossPanelSyncSectionTitle}>
-					Cross-Panel Sync
-				</Typography.Text>
-				<Tooltip
-					title={
-						<div className={styles.crossPanelSyncTooltipContent}>
-							<strong className={styles.crossPanelSyncTooltipTitle}>
-								Cross-Panel Sync
-							</strong>
-							<span className={styles.crossPanelSyncTooltipDescription}>
-								Sync crosshair and tooltip across all the dashboard panels
-							</span>
-							<a
-								href="https://signoz.io/docs/dashboards/interactivity/#cross-panel-sync"
-								target="_blank"
-								rel="noopener noreferrer"
-								className={styles.crossPanelSyncTooltipDocLink}
-							>
-								Learn more
-								<ExternalLink size={12} />
-							</a>
-						</div>
-					}
-					placement="top"
-					mouseEnterDelay={0.5}
-				>
-					<SolidInfoCircle size="md" className={styles.crossPanelSyncInfoIcon} />
-				</Tooltip>
-			</div>
-			<div className={styles.crossPanelSyncRow}>
-				<div className={styles.crossPanelSyncInfo}>
-					<Typography.Text className={styles.crossPanelSyncTitle}>
-						Sync Mode
-					</Typography.Text>
-					<Typography.Text className={styles.crossPanelSyncDescription}>
-						Sync crosshair and tooltip across all the dashboard panels
-					</Typography.Text>
-				</div>
-				<Radio.Group
-					value={cursorSyncMode}
-					onChange={(e): void => {
-						setCursorSyncMode(e.target.value as DashboardCursorSync);
-					}}
-				>
-					<Radio.Button value={DashboardCursorSync.None}>No Sync</Radio.Button>
-					<Radio.Button value={DashboardCursorSync.Crosshair}>
-						Crosshair
-					</Radio.Button>
-					<Radio.Button value={DashboardCursorSync.Tooltip}>Tooltip</Radio.Button>
-				</Radio.Group>
-			</div>
-			{cursorSyncMode === DashboardCursorSync.Tooltip && (
-				<div className={styles.crossPanelSyncRow}>
-					<div className={styles.crossPanelSyncInfo}>
-						<Typography.Text className={styles.crossPanelSyncTitle}>
-							Synced Tooltip Series
-						</Typography.Text>
-						<Typography.Text className={styles.crossPanelSyncDescription}>
-							Show only series that intersect on group-by, or every series with the
-							matching ones highlighted
-						</Typography.Text>
-					</div>
-					<Radio.Group
-						value={syncTooltipFilterMode}
-						onChange={(e): void => {
-							void logEvent(Events.TOOLTIP_SYNC_MODE_CHANGED, {
-								path: getAbsoluteUrl(window.location.pathname),
-								mode: e.target.value,
-							});
-							setSyncTooltipFilterMode(e.target.value as SyncTooltipFilterMode);
-						}}
-					>
-						<Radio.Button value={SyncTooltipFilterMode.All}>All</Radio.Button>
-						<Radio.Button value={SyncTooltipFilterMode.Filtered}>
-							Filtered
-						</Radio.Button>
-					</Radio.Group>
-				</div>
-			)}
-		</Col>
-	);
-}
-
-export default CrossPanelSync;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/General/GeneralForm/GeneralForm.tsx

@@ -1,85 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-// eslint-disable-next-line signoz/no-antd-components -- TODO: migrate Select/Input to @signozhq/ui
-import { Col, Input, Select, Space } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import AddTags from 'container/DashboardContainer/DashboardSettings/General/AddBadges';
-
-import { Base64Icons } from '../utils';
-import styles from '../GeneralSettings.module.scss';
-
-const { Option } = Select;
-
-interface GeneralFormProps {
-	title: string;
-	description: string;
-	image: string;
-	tags: string[];
-	onTitleChange: (value: string) => void;
-	onDescriptionChange: (value: string) => void;
-	onImageChange: (value: string) => void;
-	onTagsChange: Dispatch<SetStateAction<string[]>>;
-}
-
-function GeneralForm({
-	title,
-	description,
-	image,
-	tags,
-	onTitleChange,
-	onDescriptionChange,
-	onImageChange,
-	onTagsChange,
-}: GeneralFormProps): JSX.Element {
-	return (
-		<Col className={styles.overviewSettings}>
-			<Space direction="vertical" className={styles.formSpace}>
-				<div>
-					<Typography className={styles.dashboardName}>Dashboard Name</Typography>
-					<section className={styles.nameIconInput}>
-						<Select
-							defaultActiveFirstOption
-							data-testid="dashboard-image"
-							suffixIcon={null}
-							rootClassName={styles.dashboardImageInput}
-							value={image}
-							onChange={onImageChange}
-						>
-							{Base64Icons.map((icon) => (
-								<Option value={icon} key={icon}>
-									<img
-										src={icon}
-										alt="dashboard-icon"
-										className={styles.listItemImage}
-									/>
-								</Option>
-							))}
-						</Select>
-						<Input
-							data-testid="dashboard-name"
-							className={styles.dashboardNameInput}
-							value={title}
-							onChange={(e): void => onTitleChange(e.target.value)}
-						/>
-					</section>
-				</div>
-
-				<div>
-					<Typography className={styles.dashboardName}>Description</Typography>
-					<Input.TextArea
-						data-testid="dashboard-desc"
-						rows={6}
-						value={description}
-						className={styles.descriptionTextArea}
-						onChange={(e): void => onDescriptionChange(e.target.value)}
-					/>
-				</div>
-				<div>
-					<Typography className={styles.dashboardName}>Tags</Typography>
-					<AddTags tags={tags} setTags={onTagsChange} />
-				</div>
-			</Space>
-		</Col>
-	);
-}
-
-export default GeneralForm;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/General/GeneralSettings.module.scss

@@ -1,238 +0,0 @@
-.overviewContent {
-	display: flex;
-	flex-direction: column;
-	gap: 24px;
-	padding: 20px 16px;
-}
-
-.overviewSettings {
-	padding: 16px;
-	border-radius: 3px;
-	border: 1px solid var(--l1-border);
-}
-
-.crossPanelSyncGroup {
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-}
-
-.formSpace {
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	gap: 21px;
-}
-
-.crossPanelSyncSectionTitle {
-	color: var(--l1-foreground);
-	font-family: Inter;
-	font-size: 14px;
-	font-weight: 500;
-	line-height: 20px;
-}
-
-.crossPanelSyncSectionHeader {
-	display: flex;
-	align-items: center;
-	gap: 6px;
-	align-self: flex-start;
-}
-
-.crossPanelSyncInfoIcon {
-	cursor: help;
-	color: var(--l3-foreground);
-}
-
-.crossPanelSyncTooltipContent {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	max-width: 300px;
-}
-
-.crossPanelSyncTooltipTitle {
-	font-size: 14px;
-}
-
-.crossPanelSyncTooltipDescription {
-	font-size: 12px;
-	line-height: 1.5;
-}
-
-.crossPanelSyncTooltipDocLink {
-	display: flex;
-	align-items: center;
-	gap: 4px;
-	color: var(--primary-background);
-	font-size: 12px;
-	margin-top: 4px;
-}
-
-.crossPanelSyncRow {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	align-items: center;
-	gap: 16px;
-
-	& + & {
-		padding-top: 16px;
-		border-top: 1px solid var(--l1-border);
-	}
-}
-
-.crossPanelSyncInfo {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-}
-
-.crossPanelSyncTitle {
-	color: var(--l2-foreground);
-	font-family: Inter;
-	font-size: 14px;
-	font-weight: 400;
-	line-height: 20px;
-}
-
-.crossPanelSyncDescription {
-	color: var(--l3-foreground);
-	font-family: Inter;
-	font-size: 13px;
-	font-weight: 400;
-	line-height: 20px;
-}
-
-.nameIconInput {
-	display: flex;
-}
-
-.dashboardImageInput {
-	:global(.ant-select-selector) {
-		display: flex;
-		width: 32px;
-		height: 32px;
-		padding: 6px;
-		justify-content: center;
-		align-items: center;
-		border-radius: 2px 0px 0px 2px;
-		border: 1px solid var(--l1-border) !important;
-		background: var(--l3-background) !important;
-
-		:global(.ant-select-selection-item) {
-			display: flex;
-			align-items: center;
-		}
-	}
-
-	&:global(.ant-select-dropdown) {
-		padding: 0px !important;
-	}
-
-	:global(.ant-select-item) {
-		padding: 0px;
-		align-items: center;
-		justify-content: center;
-
-		:global(.ant-select-item-option-content) {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
-	}
-}
-
-.listItemImage {
-	height: 16px;
-	width: 16px;
-}
-
-.dashboardNameInput {
-	border-radius: 0px 2px 2px 0px;
-	border: 1px solid var(--l1-border);
-	background: var(--l3-background);
-}
-
-.dashboardName {
-	color: var(--l2-foreground);
-	font-family: Inter;
-	font-size: 14px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 20px;
-	margin-bottom: 0.5rem;
-}
-
-.descriptionTextArea {
-	padding: 6px 6px 6px 8px;
-	border-radius: 2px;
-	border: 1px solid var(--l1-border);
-	background: var(--l3-background);
-}
-
-.overviewSettingsFooter {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	width: -webkit-fill-available;
-	padding: 12px 16px 12px 0px;
-	position: fixed;
-	bottom: 0;
-	height: 32px;
-	border-top: 1px solid var(--l1-border);
-	background: var(--l2-background);
-}
-
-.unsaved {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}
-
-.unsavedDot {
-	width: 6px;
-	height: 6px;
-	border-radius: 50px;
-	background: var(--primary-background);
-	box-shadow: 0px 0px 6px 0px
-		color-mix(in srgb, var(--primary-background) 40%, transparent);
-}
-
-.unsavedChanges {
-	color: var(--bg-robin-400);
-	font-family: Inter;
-	font-size: 14px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 24px;
-	letter-spacing: -0.07px;
-}
-
-.footerActionBtns {
-	display: flex;
-	gap: 8px;
-}
-
-.discardBtn {
-	display: flex;
-	align-items: center;
-	color: var(--l1-foreground);
-	font-family: Inter;
-	font-size: 12px;
-	font-style: normal;
-	font-weight: 500;
-	line-height: 24px;
-}
-
-.saveBtn {
-	display: flex;
-	align-items: center;
-	margin: 0px !important;
-	color: var(--l1-foreground);
-	font-family: Inter;
-	font-size: 12px;
-	font-style: normal;
-	font-weight: 500;
-	line-height: 24px;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/General/UnsavedChangesFooter/UnsavedChangesFooter.tsx

@@ -1,59 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { Button } from '@signozhq/ui/button';
-import { Check, X } from '@signozhq/icons';
-import { Typography } from '@signozhq/ui/typography';
-
-import styles from '../GeneralSettings.module.scss';
-
-interface UnsavedChangesFooterProps {
-	count: number;
-	isSaving: boolean;
-	onDiscard: () => void;
-	onSave: () => void;
-}
-
-function UnsavedChangesFooter({
-	count,
-	isSaving,
-	onDiscard,
-	onSave,
-}: UnsavedChangesFooterProps): JSX.Element {
-	const { t } = useTranslation('common');
-
-	return (
-		<div className={styles.overviewSettingsFooter}>
-			<div className={styles.unsaved}>
-				<div className={styles.unsavedDot} />
-				<Typography.Text className={styles.unsavedChanges}>
-					{count} unsaved change
-					{count > 1 && 's'}
-				</Typography.Text>
-			</div>
-			<div className={styles.footerActionBtns}>
-				<Button
-					variant="ghost"
-					disabled={isSaving}
-					prefix={<X size={14} />}
-					onClick={onDiscard}
-					className={styles.discardBtn}
-				>
-					Discard
-				</Button>
-				<Button
-					variant="solid"
-					color="primary"
-					disabled={isSaving}
-					loading={isSaving}
-					prefix={<Check size={14} />}
-					testId="save-dashboard-config"
-					onClick={onSave}
-					className={styles.saveBtn}
-				>
-					{t('save')}
-				</Button>
-			</div>
-		</div>
-	);
-}
-
-export default UnsavedChangesFooter;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/General/index.tsx

@@ -1,170 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import type {
-	DashboardtypesGettableDashboardV2DTO,
-	DashboardtypesJSONPatchOperationDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { toast } from '@signozhq/ui/sonner';
-import { isEqual } from 'lodash-es';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import { useDashboardStore } from '../../store/useDashboardStore';
-import CrossPanelSync from './CrossPanelSync/CrossPanelSync';
-import GeneralForm from './GeneralForm/GeneralForm';
-import UnsavedChangesFooter from './UnsavedChangesFooter/UnsavedChangesFooter';
-import { Base64Icons, stringsToTags, tagsToStrings } from './utils';
-import styles from './GeneralSettings.module.scss';
-
-interface GeneralSettingsProps {
-	dashboard: DashboardtypesGettableDashboardV2DTO;
-}
-
-function GeneralSettings({ dashboard }: GeneralSettingsProps): JSX.Element {
-	const id = dashboard.id;
-
-	const refetch = useDashboardStore((s) => s.refetch);
-
-	const title = dashboard.spec?.display?.name ?? '';
-	const description = dashboard.spec?.display?.description ?? '';
-	const image = dashboard.image || Base64Icons[0];
-	const tagsAsStrings = useMemo(
-		() => tagsToStrings(dashboard.tags ?? []),
-		[dashboard.tags],
-	);
-
-	const [updatedTitle, setUpdatedTitle] = useState<string>(title);
-	const [updatedTags, setUpdatedTags] = useState<string[]>(tagsAsStrings);
-	const [updatedDescription, setUpdatedDescription] =
-		useState<string>(description);
-	const [updatedImage, setUpdatedImage] = useState<string>(image);
-	const [isSaving, setIsSaving] = useState<boolean>(false);
-	const [numberOfUnsavedChanges, setNumberOfUnsavedChanges] =
-		useState<number>(0);
-
-	const { showErrorModal } = useErrorModal();
-
-	// Sync state when dashboard refetches after a save
-	useEffect(() => {
-		setUpdatedTitle(title);
-		setUpdatedDescription(description);
-		setUpdatedImage(image);
-		setUpdatedTags(tagsAsStrings);
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [dashboard.updatedAt]);
-
-	const buildPatch = useCallback((): DashboardtypesJSONPatchOperationDTO[] => {
-		const ops: DashboardtypesJSONPatchOperationDTO[] = [];
-		const replace = (
-			path: string,
-			value: unknown,
-		): DashboardtypesJSONPatchOperationDTO => ({
-			op: 'replace' as DashboardtypesJSONPatchOperationDTO['op'],
-			path,
-			value,
-		});
-
-		if (updatedTitle !== title) {
-			ops.push(replace('/spec/display/name', updatedTitle));
-		}
-		if (updatedDescription !== description) {
-			ops.push(replace('/spec/display/description', updatedDescription));
-		}
-		if (updatedImage !== image) {
-			ops.push(replace('/image', updatedImage));
-		}
-		if (!isEqual(updatedTags, tagsAsStrings)) {
-			ops.push(replace('/tags', stringsToTags(updatedTags)));
-		}
-		return ops;
-	}, [
-		updatedTitle,
-		title,
-		updatedDescription,
-		description,
-		updatedImage,
-		image,
-		updatedTags,
-		tagsAsStrings,
-	]);
-
-	const onSaveHandler = useCallback(async (): Promise<void> => {
-		if (!id) {
-			return;
-		}
-		const ops = buildPatch();
-		if (ops.length === 0) {
-			return;
-		}
-
-		try {
-			setIsSaving(true);
-			await patchDashboardV2({ id }, ops);
-			toast.success('Dashboard updated');
-			refetch();
-		} catch (error) {
-			showErrorModal(error as APIError);
-		} finally {
-			setIsSaving(false);
-		}
-	}, [id, buildPatch, refetch, showErrorModal]);
-
-	useEffect(() => {
-		let n = 0;
-		const initialValues = [title, description, tagsAsStrings, image];
-		const updatedValues = [
-			updatedTitle,
-			updatedDescription,
-			updatedTags,
-			updatedImage,
-		];
-		initialValues.forEach((val, index) => {
-			if (!isEqual(val, updatedValues[index])) {
-				n += 1;
-			}
-		});
-		setNumberOfUnsavedChanges(n);
-	}, [
-		description,
-		image,
-		tagsAsStrings,
-		title,
-		updatedDescription,
-		updatedImage,
-		updatedTags,
-		updatedTitle,
-	]);
-
-	const discardHandler = useCallback((): void => {
-		setUpdatedTitle(title);
-		setUpdatedImage(image);
-		setUpdatedTags(tagsAsStrings);
-		setUpdatedDescription(description);
-	}, [title, image, tagsAsStrings, description]);
-
-	return (
-		<div className={styles.overviewContent}>
-			<GeneralForm
-				title={updatedTitle}
-				description={updatedDescription}
-				image={updatedImage}
-				tags={updatedTags}
-				onTitleChange={setUpdatedTitle}
-				onDescriptionChange={setUpdatedDescription}
-				onImageChange={setUpdatedImage}
-				onTagsChange={setUpdatedTags}
-			/>
-			<CrossPanelSync dashboardId={id} />
-			{numberOfUnsavedChanges > 0 && (
-				<UnsavedChangesFooter
-					count={numberOfUnsavedChanges}
-					isSaving={isSaving}
-					onDiscard={discardHandler}
-					onSave={onSaveHandler}
-				/>
-			)}
-		</div>
-	);
-}
-
-export default GeneralSettings;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/General/utils.ts

@@ -1,24 +0,0 @@
-import type { TagtypesPostableTagDTO } from 'api/generated/services/sigNoz.schemas';
-
-export { Base64Icons } from 'container/DashboardContainer/DashboardSettings/General/utils';
-
-// tag UX, a string with no ':' is round-tripped as `{key: x, value: x}` and
-// collapsed back to just `x` for display.
-export function tagsToStrings(tags: TagtypesPostableTagDTO[]): string[] {
-	return tags.map((t) => (t.key === t.value ? t.key : `${t.key}:${t.value}`));
-}
-
-export function stringsToTags(tagStrings: string[]): TagtypesPostableTagDTO[] {
-	return tagStrings
-		.map((s) => {
-			const trimmed = s.trim();
-			const idx = trimmed.indexOf(':');
-			if (idx === -1) {
-				return { key: trimmed, value: trimmed };
-			}
-			const key = trimmed.slice(0, idx).trim();
-			const value = trimmed.slice(idx + 1).trim();
-			return { key, value: value || key };
-		})
-		.filter((t) => t.key.length > 0);
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/index.tsx

@@ -1,54 +0,0 @@
-import { useMemo } from 'react';
-
-import { Braces, Globe, Table } from '@signozhq/icons';
-import { Tabs } from '@signozhq/ui/tabs';
-import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
-
-import GeneralSettings from './General';
-import { SettingsTabPlaceholder } from './utils';
-
-import styles from './DashboardSettings.module.scss';
-
-interface DashboardSettingsProps {
-	dashboard: DashboardtypesGettableDashboardV2DTO;
-}
-
-function tabLabel(icon: JSX.Element, text: string): JSX.Element {
-	return (
-		<span className={styles.tabLabel}>
-			{icon}
-			{text}
-		</span>
-	);
-}
-
-function DashboardSettings({ dashboard }: DashboardSettingsProps): JSX.Element {
-	const items = useMemo(
-		() => [
-			{
-				key: 'general',
-				label: tabLabel(<Table size={14} />, 'General'),
-				children: <GeneralSettings dashboard={dashboard} />,
-			},
-			{
-				key: 'variables',
-				label: tabLabel(<Braces size={14} />, 'Variables'),
-				children: (
-					<SettingsTabPlaceholder message="V2 dashboard variables coming next." />
-				),
-			},
-			{
-				key: 'public-dashboard',
-				label: tabLabel(<Globe size={14} />, 'Publish'),
-				children: (
-					<SettingsTabPlaceholder message="V2 public dashboard publishing coming next." />
-				),
-			},
-		],
-		[dashboard],
-	);
-
-	return <Tabs defaultValue="general" items={items} />;
-}
-
-export default DashboardSettings;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/utils.tsx

@@ -1,23 +0,0 @@
-import { Empty } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-
-import styles from './DashboardSettings.module.scss';
-
-/**
- * TEMPORARY: stand-in for the not-yet-built Variables / Publish settings tabs.
- * Will be cleaned up later once those tabs ship their real content.
- */
-export function SettingsTabPlaceholder({
-	message,
-}: {
-	message: string;
-}): JSX.Element {
-	return (
-		<div className={styles.placeholder}>
-			<Empty
-				image={Empty.PRESENTED_IMAGE_SIMPLE}
-				description={<Typography.Text>{message}</Typography.Text>}
-			/>
-		</div>
-	);
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/DashboardEmptyState/DashboardEmptyState.module.scss

@@ -1,86 +0,0 @@
-.emptyState {
-	display: flex;
-	justify-content: center;
-	align-items: flex-start;
-	padding: 48px 16px;
-}
-
-.content {
-	display: flex;
-	flex-direction: column;
-	gap: 24px;
-	width: 100%;
-	max-width: 480px;
-}
-
-.heading {
-	display: flex;
-	flex-direction: column;
-	gap: 6px;
-
-	.emoji {
-		height: 32px;
-		width: 32px;
-	}
-
-	.welcome {
-		color: var(--l1-foreground);
-		font-family: Inter;
-		font-size: 16px;
-		font-weight: 500;
-		line-height: 24px;
-		letter-spacing: -0.08px;
-	}
-
-	.welcomeInfo {
-		color: var(--l3-foreground);
-		font-family: Inter;
-		font-size: 13px;
-		font-weight: 400;
-		line-height: 18px;
-	}
-}
-
-.addPanel {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 16px;
-	padding: 16px;
-	border: 1px dashed var(--l1-border);
-	border-radius: 6px;
-}
-
-.addPanelText {
-	display: flex;
-	align-items: flex-start;
-	gap: 10px;
-
-	.icon {
-		height: 14px;
-		width: 14px;
-		margin-top: 2px;
-	}
-}
-
-.addPanelCopy {
-	display: flex;
-	flex-direction: column;
-	gap: 2px;
-}
-
-.addPanelTitle {
-	color: var(--l1-foreground);
-	font-family: Inter;
-	font-size: 14px;
-	font-weight: 500;
-	line-height: 20px;
-}
-
-.addPanelInfo {
-	color: var(--l3-foreground);
-	font-family: Inter;
-	font-size: 13px;
-	font-weight: 400;
-	line-height: 18px;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/DashboardEmptyState/DashboardEmptyState.tsx

@@ -1,63 +0,0 @@
-import { Plus } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { Typography } from '@signozhq/ui/typography';
-import { usePanelTypeSelectionModalStore } from 'providers/Dashboard/helpers/panelTypeSelectionModalHelper';
-
-import dashboardEmojiUrl from '@/assets/Icons/dashboard_emoji.svg';
-import landscapeUrl from '@/assets/Icons/landscape.svg';
-
-import styles from './DashboardEmptyState.module.scss';
-
-interface DashboardEmptyStateProps {
-	canAddPanel: boolean;
-}
-
-function DashboardEmptyState({
-	canAddPanel,
-}: DashboardEmptyStateProps): JSX.Element {
-	const setIsPanelTypeSelectionModalOpen = usePanelTypeSelectionModalStore(
-		(s) => s.setIsPanelTypeSelectionModalOpen,
-	);
-
-	return (
-		<section className={styles.emptyState}>
-			<div className={styles.content}>
-				<div className={styles.heading}>
-					<img src={dashboardEmojiUrl} alt="" className={styles.emoji} />
-					<Typography.Text className={styles.welcome}>
-						Welcome to your new dashboard
-					</Typography.Text>
-					<Typography.Text className={styles.welcomeInfo}>
-						Follow the steps to populate it with data and share with your teammates
-					</Typography.Text>
-				</div>
-
-				<div className={styles.addPanel}>
-					<div className={styles.addPanelText}>
-						<img src={landscapeUrl} alt="" className={styles.icon} />
-						<div className={styles.addPanelCopy}>
-							<Typography.Text className={styles.addPanelTitle}>
-								Add panels
-							</Typography.Text>
-							<Typography.Text className={styles.addPanelInfo}>
-								Add panels to visualize your data
-							</Typography.Text>
-						</div>
-					</div>
-					{canAddPanel && (
-						<Button
-							color="primary"
-							prefix={<Plus size="md" />}
-							onClick={(): void => setIsPanelTypeSelectionModalOpen(true)}
-							testId="add-panel"
-						>
-							New Panel
-						</Button>
-					)}
-				</div>
-			</div>
-		</section>
-	);
-}
-
-export default DashboardEmptyState;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/Panel.module.scss

@@ -4,7 +4,7 @@
 	height: 100%;
 	width: 100%;
 	background: var(--bg-ink-400, #0b0c0e);
-	border: 1px solid var(--l1-border);
+	border: 1px solid var(--bg-slate-400, #1d212d);
 	border-radius: 4px;
 	overflow: hidden;
 }
@@ -14,7 +14,7 @@
 	align-items: center;
 	justify-content: space-between;
 	padding: 8px 12px;
-	border-bottom: 1px solid var(--l1-border);
+	border-bottom: 1px solid var(--bg-slate-400, #1d212d);
 	cursor: grab;
 }
 
@@ -42,7 +42,7 @@
 	align-items: center;
 	justify-content: center;
 	padding: 12px;
-	color: var(--l2-foreground);
+	color: var(--bg-vanilla-400, #8993ae);
 	font-size: 12px;
 	text-align: center;
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/Panel.tsx

@@ -12,15 +12,7 @@ import type { MovePanelArgs } from './hooks/useMovePanelToSection';
 import PanelActionsMenu from './PanelActionsMenu/PanelActionsMenu';
 import styles from './Panel.module.scss';
 
-/** Panel action context — present together only in editable sectioned mode. */
-export interface PanelActionsConfig {
-	currentLayoutIndex: number;
-	sections: DashboardSection[];
-	onMovePanel: (args: MovePanelArgs) => void;
-	onDeletePanel: (args: DeletePanelArgs) => void;
-}
-
-interface PanelProps {
+interface Props {
 	panel: DashboardtypesPanelDTO | undefined;
 	panelId: string;
 	/**
@@ -29,16 +21,22 @@ interface PanelProps {
 	 * data. Currently unused on purpose.
 	 */
 	isVisible?: boolean;
-	/** Move/delete actions — present only in editable sectioned mode. */
-	panelActions?: PanelActionsConfig;
+	/** Section actions — present only in editable sectioned mode. */
+	currentLayoutIndex?: number;
+	sections?: DashboardSection[];
+	onMovePanel?: (args: MovePanelArgs) => void;
+	onDeletePanel?: (args: DeletePanelArgs) => void;
 }
 
 function Panel({
 	panel,
 	panelId,
 	isVisible,
-	panelActions,
-}: PanelProps): JSX.Element {
+	currentLayoutIndex,
+	sections,
+	onMovePanel,
+	onDeletePanel,
+}: Props): JSX.Element {
 	const name = panel?.spec?.display?.name || `Panel ${panelId.slice(0, 6)}`;
 	const description = panel?.spec?.display?.description;
 	const kind = panel?.spec?.plugin?.kind?.replace(/^signoz\//, '') ?? 'unknown';
@@ -67,13 +65,13 @@ function Panel({
 					</Typography.Text>
 					<Badge className={styles.badge}>{kind}</Badge>
 				</div>
-				{panelActions ? (
+				{currentLayoutIndex !== undefined && (onMovePanel || onDeletePanel) ? (
 					<PanelActionsMenu
 						panelId={panelId}
-						currentLayoutIndex={panelActions.currentLayoutIndex}
-						sections={panelActions.sections}
-						onMovePanel={panelActions.onMovePanel}
-						onDeletePanel={panelActions.onDeletePanel}
+						currentLayoutIndex={currentLayoutIndex}
+						sections={sections ?? []}
+						onMovePanel={onMovePanel}
+						onDeletePanel={onDeletePanel}
 					/>
 				) : (
 					<EllipsisVertical size={14} />

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelActionsMenu/PanelActionsMenu.module.scss

@@ -6,11 +6,11 @@
 	background: transparent;
 	border: none;
 	border-radius: 2px;
-	color: var(--l2-foreground);
+	color: var(--bg-vanilla-400, #8993ae);
 	cursor: pointer;
 
 	&:hover {
-		color: var(--l1-foreground);
-		background: var(--l2-background);
+		color: var(--bg-vanilla-100, #fff);
+		background: var(--bg-slate-400, #1d212d);
 	}
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelActionsMenu/PanelActionsMenu.tsx

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
 import { EllipsisVertical, FolderInput, Trash2 } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
 import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
 import type { MenuItem } from '@signozhq/ui/dropdown-menu';
 
@@ -9,7 +8,7 @@ import type { DeletePanelArgs } from '../hooks/useDeletePanel';
 import type { MovePanelArgs } from '../hooks/useMovePanelToSection';
 import styles from './PanelActionsMenu.module.scss';
 
-interface PanelActionsMenuProps {
+interface Props {
 	panelId: string;
 	currentLayoutIndex: number;
 	sections: DashboardSection[];
@@ -23,7 +22,7 @@ function PanelActionsMenu({
 	sections,
 	onMovePanel,
 	onDeletePanel,
-}: PanelActionsMenuProps): JSX.Element {
+}: Props): JSX.Element {
 	const items = useMemo<MenuItem[]>(() => {
 		const result: MenuItem[] = [];
 
@@ -76,11 +75,8 @@ function PanelActionsMenu({
 
 	return (
 		<DropdownMenuSimple menu={{ items }}>
-			<Button
+			<button
 				type="button"
-				variant="ghost"
-				color="secondary"
-				size="icon"
 				className={styles.trigger}
 				aria-label="Panel actions"
 				data-testid={`panel-actions-${panelId}`}
@@ -91,7 +87,7 @@ function PanelActionsMenu({
 				onClick={(e): void => e.stopPropagation()}
 			>
 				<EllipsisVertical size={14} />
-			</Button>
+			</button>
 		</DropdownMenuSimple>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModal.module.scss

@@ -10,9 +10,9 @@
 	gap: 8px;
 	padding: 12px;
 	background: var(--bg-ink-400, #0b0c0e);
-	border: 1px solid var(--l1-border);
+	border: 1px solid var(--bg-slate-400, #1d212d);
 	border-radius: 4px;
-	color: var(--l1-foreground);
+	color: var(--bg-vanilla-100, #fff);
 	cursor: pointer;
 	text-align: left;
 

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModal.tsx

@@ -1,10 +1,48 @@
 import { Modal } from 'antd';
-import { Button } from '@signozhq/ui/button';
+import {
+	BarChart,
+	ChartLine,
+	ChartPie,
+	Hash,
+	List,
+	Table,
+} from '@signozhq/icons';
 
-import { PANEL_TYPES } from './constants';
 import styles from './PanelTypeSelectionModal.module.scss';
 
-interface PanelTypeSelectionModalProps {
+interface PanelType {
+	pluginKind: string;
+	label: string;
+	icon: JSX.Element;
+}
+
+const PANEL_TYPES: PanelType[] = [
+	{
+		pluginKind: 'signoz/TimeSeriesPanel',
+		label: 'Time Series',
+		icon: <ChartLine size={16} />,
+	},
+	{ pluginKind: 'signoz/NumberPanel', label: 'Value', icon: <Hash size={16} /> },
+	{ pluginKind: 'signoz/TablePanel', label: 'Table', icon: <Table size={16} /> },
+	{
+		pluginKind: 'signoz/BarChartPanel',
+		label: 'Bar Chart',
+		icon: <BarChart size={16} />,
+	},
+	{
+		pluginKind: 'signoz/PieChartPanel',
+		label: 'Pie Chart',
+		icon: <ChartPie size={16} />,
+	},
+	{
+		pluginKind: 'signoz/HistogramPanel',
+		label: 'Histogram',
+		icon: <BarChart size={16} />,
+	},
+	{ pluginKind: 'signoz/ListPanel', label: 'List', icon: <List size={16} /> },
+];
+
+interface Props {
 	open: boolean;
 	onClose: () => void;
 	onSelect: (pluginKind: string) => void;
@@ -14,7 +52,7 @@ function PanelTypeSelectionModal({
 	open,
 	onClose,
 	onSelect,
-}: PanelTypeSelectionModalProps): JSX.Element {
+}: Props): JSX.Element {
 	return (
 		<Modal
 			open={open}
@@ -25,17 +63,16 @@ function PanelTypeSelectionModal({
 		>
 			<div className={styles.grid}>
 				{PANEL_TYPES.map((type) => (
-					<Button
+					<button
 						key={type.pluginKind}
 						type="button"
-						variant="ghost"
 						className={styles.typeButton}
 						data-testid={`panel-type-${type.pluginKind}`}
 						onClick={(): void => onSelect(type.pluginKind)}
 					>
 						{type.icon}
 						{type.label}
-					</Button>
+					</button>
 				))}
 			</div>
 		</Modal>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/constants.tsx

@@ -1,36 +0,0 @@
-import {
-	BarChart,
-	ChartLine,
-	ChartPie,
-	Hash,
-	List,
-	Table,
-} from '@signozhq/icons';
-
-import type { PanelType } from './types';
-
-export const PANEL_TYPES: PanelType[] = [
-	{
-		pluginKind: 'signoz/TimeSeriesPanel',
-		label: 'Time Series',
-		icon: <ChartLine size={16} />,
-	},
-	{ pluginKind: 'signoz/NumberPanel', label: 'Value', icon: <Hash size={16} /> },
-	{ pluginKind: 'signoz/TablePanel', label: 'Table', icon: <Table size={16} /> },
-	{
-		pluginKind: 'signoz/BarChartPanel',
-		label: 'Bar Chart',
-		icon: <BarChart size={16} />,
-	},
-	{
-		pluginKind: 'signoz/PieChartPanel',
-		label: 'Pie Chart',
-		icon: <ChartPie size={16} />,
-	},
-	{
-		pluginKind: 'signoz/HistogramPanel',
-		label: 'Histogram',
-		icon: <BarChart size={16} />,
-	},
-	{ pluginKind: 'signoz/ListPanel', label: 'List', icon: <List size={16} /> },
-];

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/types.ts

@@ -1,5 +0,0 @@
-export interface PanelType {
-	pluginKind: string;
-	label: string;
-	icon: JSX.Element;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useAddPanelToSection.ts

@@ -36,6 +36,9 @@ export function useAddPanelToSection({
 
 	return useCallback(
 		async ({ layoutIndex, pluginKind }: AddPanelArgs): Promise<void> => {
+			if (!dashboardId) {
+				return;
+			}
 			const target = sections.find((s) => s.layoutIndex === layoutIndex);
 			if (!target) {
 				return;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/AddSectionControl/AddSectionControl.module.scss

@@ -5,13 +5,13 @@
 	margin-top: 8px;
 	padding: 8px 12px;
 	background: transparent;
-	border: 1px dashed var(--l1-border);
+	border: 1px dashed var(--bg-slate-400, #1d212d);
 	border-radius: 4px;
-	color: var(--l2-foreground);
+	color: var(--bg-vanilla-400, #8993ae);
 	cursor: pointer;
 
 	&:hover {
 		border-color: var(--bg-robin-500);
-		color: var(--l1-foreground);
+		color: var(--bg-vanilla-100, #fff);
 	}
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/AddSectionControl/AddSectionControl.tsx

@@ -1,6 +1,5 @@
-import { useCallback, useState } from 'react';
+import { useState } from 'react';
 import { Plus } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
 import type { DashboardtypesLayoutDTO } from 'api/generated/services/sigNoz.schemas';
 
 import type { DashboardSection } from '../../../utils';
@@ -11,7 +10,7 @@ import styles from './AddSectionControl.module.scss';
 
 const DEFAULT_SECTION_TITLE = 'New section';
 
-interface AddSectionControlProps {
+interface Props {
 	sections: DashboardSection[];
 	layouts: DashboardtypesLayoutDTO[] | undefined | null;
 	isSectioned: boolean;
@@ -21,7 +20,7 @@ function AddSectionControl({
 	sections,
 	layouts,
 	isSectioned,
-}: AddSectionControlProps): JSX.Element {
+}: Props): JSX.Element {
 	const [isMigrationOpen, setIsMigrationOpen] = useState(false);
 	const { addSection } = useAddSection({ layouts });
 	const { migrate, isSaving } = useFirstSectionMigration({ sections });
@@ -31,31 +30,30 @@ function AddSectionControl({
 	const needsMigration =
 		!isSectioned && sections.some((s) => s.items.length > 0);
 
-	const handleClick = useCallback((): void => {
+	const handleClick = (): void => {
 		if (needsMigration) {
 			setIsMigrationOpen(true);
 			return;
 		}
 		void addSection(DEFAULT_SECTION_TITLE);
-	}, [needsMigration, addSection]);
+	};
 
-	const handleConfirmMigration = useCallback(async (): Promise<void> => {
+	const handleConfirmMigration = async (): Promise<void> => {
 		await migrate(DEFAULT_SECTION_TITLE);
 		setIsMigrationOpen(false);
-	}, [migrate]);
+	};
 
 	return (
 		<>
-			<Button
+			<button
 				type="button"
-				variant="ghost"
 				className={styles.addButton}
 				onClick={handleClick}
 				data-testid="add-section"
 			>
 				<Plus size={14} />
 				Add section
-			</Button>
+			</button>
 			<FirstSectionMigrationModal
 				open={isMigrationOpen}
 				isSaving={isSaving}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/FirstSectionMigrationModal.tsx

@@ -1,7 +1,7 @@
 import { Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 
-interface FirstSectionMigrationModalProps {
+interface Props {
 	open: boolean;
 	isSaving: boolean;
 	onClose: () => void;
@@ -18,7 +18,7 @@ function FirstSectionMigrationModal({
 	isSaving,
 	onClose,
 	onConfirm,
-}: FirstSectionMigrationModalProps): JSX.Element {
+}: Props): JSX.Element {
 	return (
 		<Modal
 			open={open}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/RenameSectionModal.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { Modal } from 'antd';
 import { Input } from '@signozhq/ui/input';
 
-interface RenameSectionModalProps {
+interface Props {
 	open: boolean;
 	initialValue: string;
 	isSaving: boolean;
@@ -16,7 +16,7 @@ function RenameSectionModal({
 	isSaving,
 	onClose,
 	onSubmit,
-}: RenameSectionModalProps): JSX.Element {
+}: Props): JSX.Element {
 	const [value, setValue] = useState<string>(initialValue);
 
 	// Reseed the field each time the modal opens.

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/Section/Section.module.scss

@@ -1,20 +1,9 @@
 .section {
 	margin-bottom: 12px;
-	border: 1px solid var(--l1-border);
+	border: 1px solid var(--bg-slate-500);
 	border-radius: 4px;
 }
 
 .dragging {
 	opacity: 0.8;
 }
-
-.deleteModal :global(.ant-modal-confirm-body) {
-	align-items: center;
-}
-
-.emptySection {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	padding: 24px 12px;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/Section/Section.tsx

@@ -1,11 +1,8 @@
-import { useCallback, useRef, useState } from 'react';
-import { Plus } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
+import { useRef, useState } from 'react';
+import { Modal } from 'antd';
 
 import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
-import { usePanelTypeSelectionModalStore } from 'providers/Dashboard/helpers/panelTypeSelectionModalHelper';
 
-import ConfirmDeleteDialog from '../../../components/ConfirmDeleteDialog/ConfirmDeleteDialog';
 import type { DashboardSection } from '../../../utils';
 import type { AddPanelArgs } from '../../Panel/hooks/useAddPanelToSection';
 import type { DeletePanelArgs } from '../../Panel/hooks/useDeletePanel';
@@ -22,7 +19,7 @@ import SectionHeader, {
 } from '../SectionHeader/SectionHeader';
 import styles from './Section.module.scss';
 
-interface SectionProps {
+interface Props {
 	section: DashboardSection;
 	/** Adds a panel to this section; present only in editable sectioned mode. */
 	onAddPanel?: (args: AddPanelArgs) => void;
@@ -41,12 +38,8 @@ function Section({
 	onMovePanel,
 	onDeletePanel,
 	dragHandle,
-}: SectionProps): JSX.Element {
+}: Props): JSX.Element {
 	const isEditable = useDashboardStore((s) => s.isEditable);
-	const setIsPanelTypeSelectionModalOpen = usePanelTypeSelectionModalStore(
-		(s) => s.setIsPanelTypeSelectionModalOpen,
-	);
-	const [isDeleteOpen, setIsDeleteOpen] = useState(false);
 	const containerRef = useRef<HTMLDivElement>(null);
 	// Placeholder signal for lazy panel query-loading (consumed in a later PR):
 	// true once the section scrolls into (or near) the viewport.
@@ -61,30 +54,30 @@ function Section({
 		layoutIndex: section.layoutIndex,
 	});
 
-	const handleRenameSubmit = useCallback(
-		async (title: string): Promise<void> => {
-			const ok = await rename(title);
-			if (ok) {
-				setIsRenaming(false);
-			}
-		},
-		[rename],
-	);
+	const handleRenameSubmit = async (title: string): Promise<void> => {
+		const ok = await rename(title);
+		if (ok) {
+			setIsRenaming(false);
+		}
+	};
 
 	const [isAddingPanel, setIsAddingPanel] = useState(false);
-	const handleSelectPanelType = useCallback(
-		(pluginKind: string): void => {
-			onAddPanel?.({ layoutIndex: section.layoutIndex, pluginKind });
-			setIsAddingPanel(false);
-		},
-		[onAddPanel, section.layoutIndex],
-	);
+	const handleSelectPanelType = (pluginKind: string): void => {
+		onAddPanel?.({ layoutIndex: section.layoutIndex, pluginKind });
+		setIsAddingPanel(false);
+	};
 
 	const { deleteSection } = useDeleteSection({ section });
-	const handleDeleteSection = useCallback((): void => {
-		void deleteSection();
-		setIsDeleteOpen(false);
-	}, [deleteSection]);
+	const confirmDeleteSection = (): void => {
+		Modal.confirm({
+			title: `Delete section "${section.title ?? ''}"?`,
+			content: 'Panels in this section will be removed.',
+			okText: 'Delete',
+			okButtonProps: { danger: true },
+			centered: true,
+			onOk: () => deleteSection(),
+		});
+	};
 
 	const grid = (
 		<SectionGrid
@@ -125,35 +118,13 @@ function Section({
 				onToggle={toggle}
 				repeatVariable={section.repeatVariable}
 				dragHandle={dragHandle}
-				actions={
-					isEditable
-						? {
-								onRename: (): void => setIsRenaming(true),
-								onAddPanel: (): void => setIsAddingPanel(true),
-								onDeleteSection: (): void => setIsDeleteOpen(true),
-							}
-						: undefined
+				onRename={isEditable ? (): void => setIsRenaming(true) : undefined}
+				onAddPanel={
+					isEditable && onAddPanel ? (): void => setIsAddingPanel(true) : undefined
 				}
+				onDeleteSection={isEditable ? confirmDeleteSection : undefined}
 			/>
-			{open &&
-				(section.items.length > 0 ? (
-					grid
-				) : (
-					<div className={styles.emptySection}>
-						{isEditable && (
-							<Button
-								type="button"
-								variant="dashed"
-								color="secondary"
-								prefix={<Plus size="md" />}
-								onClick={(): void => setIsPanelTypeSelectionModalOpen(true)}
-								testId={`section-add-panel-${section.id}`}
-							>
-								New Panel
-							</Button>
-						)}
-					</div>
-				))}
+			{open ? grid : null}
 			<RenameSectionModal
 				open={isRenaming}
 				initialValue={section.title}
@@ -166,13 +137,6 @@ function Section({
 				onClose={(): void => setIsAddingPanel(false)}
 				onSelect={handleSelectPanelType}
 			/>
-			<ConfirmDeleteDialog
-				open={isDeleteOpen}
-				title={`Delete section "${section.title ?? ''}"?`}
-				description="Panels in this section will be removed."
-				onConfirm={handleDeleteSection}
-				onClose={(): void => setIsDeleteOpen(false)}
-			/>
 		</div>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionActionsMenu/SectionActionsMenu.module.scss

@@ -6,11 +6,11 @@
 	background: transparent;
 	border: none;
 	border-radius: 2px;
-	color: var(--l2-foreground);
+	color: var(--bg-vanilla-400, #8993ae);
 	cursor: pointer;
 
 	&:hover {
-		color: var(--l1-foreground);
-		background: var(--l2-background);
+		color: var(--bg-vanilla-100, #fff);
+		background: var(--bg-slate-400, #1d212d);
 	}
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionActionsMenu/SectionActionsMenu.tsx

@@ -1,12 +1,11 @@
 import { useMemo } from 'react';
 import { EllipsisVertical, PenLine, Plus, Trash2 } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
 import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
 import type { MenuItem } from '@signozhq/ui/dropdown-menu';
 
 import styles from './SectionActionsMenu.module.scss';
 
-interface SectionActionsMenuProps {
+interface Props {
 	sectionId: string;
 	onAddPanel?: () => void;
 	onRename?: () => void;
@@ -18,7 +17,7 @@ function SectionActionsMenu({
 	onAddPanel,
 	onRename,
 	onDeleteSection,
-}: SectionActionsMenuProps): JSX.Element {
+}: Props): JSX.Element {
 	const items = useMemo<MenuItem[]>(() => {
 		const result: MenuItem[] = [];
 		if (onAddPanel) {
@@ -54,17 +53,14 @@ function SectionActionsMenu({
 
 	return (
 		<DropdownMenuSimple menu={{ items }}>
-			<Button
+			<button
 				type="button"
-				variant="ghost"
-				color="secondary"
-				size="icon"
 				className={styles.trigger}
 				aria-label="Section actions"
 				data-testid={`dashboard-section-actions-${sectionId}`}
 			>
 				<EllipsisVertical size={14} />
-			</Button>
+			</button>
 		</DropdownMenuSimple>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionDragPreview/SectionDragPreview.tsx

@@ -2,7 +2,7 @@ import type { DashboardSection } from '../../../utils';
 import SectionHeader from '../SectionHeader/SectionHeader';
 import styles from './SectionDragPreview.module.scss';
 
-interface SectionDragPreviewProps {
+interface Props {
 	section: DashboardSection;
 }
 
@@ -11,7 +11,7 @@ interface SectionDragPreviewProps {
  * dragged. Deliberately header-only (no react-grid-layout) so the overlay is
  * cheap and never triggers RGL width re-measurement.
  */
-function SectionDragPreview({ section }: SectionDragPreviewProps): JSX.Element {
+function SectionDragPreview({ section }: Props): JSX.Element {
 	const panelCount = section.items.length;
 	const title = `${section.title ?? ''} · ${panelCount} ${
 		panelCount === 1 ? 'panel' : 'panels'

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionGrid/SectionGrid.tsx

@@ -11,7 +11,7 @@ import styles from './SectionGrid.module.scss';
 
 const ResponsiveGridLayout = WidthProvider(GridLayout);
 
-interface SectionGridProps {
+interface Props {
 	items: DashboardSection['items'];
 	layoutIndex: number;
 	/** Forwarded to panels — true when the parent section is in the viewport. */
@@ -29,7 +29,7 @@ function SectionGrid({
 	sections,
 	onMovePanel,
 	onDeletePanel,
-}: SectionGridProps): JSX.Element {
+}: Props): JSX.Element {
 	const isEditable = useDashboardStore((s) => s.isEditable);
 	const rglLayout = useMemo<Layout[]>(
 		() =>
@@ -66,16 +66,10 @@ function SectionGrid({
 						panel={item.panel}
 						panelId={item.id}
 						isVisible={isVisible}
-						panelActions={
-							isEditable && onMovePanel && onDeletePanel
-								? {
-										currentLayoutIndex: layoutIndex,
-										sections: sections ?? [],
-										onMovePanel,
-										onDeletePanel,
-									}
-								: undefined
-						}
+						currentLayoutIndex={layoutIndex}
+						sections={isEditable ? sections : undefined}
+						onMovePanel={isEditable ? onMovePanel : undefined}
+						onDeletePanel={isEditable ? onDeletePanel : undefined}
 					/>
 				</div>
 			))}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionHeader/SectionHeader.module.scss

@@ -5,7 +5,7 @@
 	padding: 8px 12px;
 
 	&.headerOpen {
-		border-bottom: 1px solid var(--l1-border);
+		border-bottom: 1px solid var(--bg-slate-500);
 	}
 }
 
@@ -16,7 +16,7 @@
 	padding: 0;
 	background: transparent;
 	border: none;
-	color: var(--l2-foreground);
+	color: var(--bg-vanilla-400, #8993ae);
 	cursor: grab;
 
 	&:active {
@@ -33,8 +33,7 @@
 	padding: 0;
 	background: transparent;
 	border: none;
-	// Muted chevron; the title below carries the prominent heading color.
-	color: var(--l2-foreground);
+	color: inherit;
 	text-align: left;
 	cursor: pointer;
 	min-width: 0;
@@ -42,8 +41,6 @@
 
 .title {
 	margin-left: 4px;
-	color: var(--l1-foreground);
-	font-weight: 500;
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionHeader/SectionHeader.tsx

@@ -1,7 +1,6 @@
 import type { DraggableAttributes } from '@dnd-kit/core';
 import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
 import { ChevronDown, ChevronRight, GripVertical } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 
@@ -14,14 +13,7 @@ export interface SectionDragHandle {
 	setActivatorNodeRef: (element: HTMLElement | null) => void;
 }
 
-/** Editable-mode section actions — present together or not at all. */
-export interface SectionHeaderActions {
-	onRename: () => void;
-	onAddPanel: () => void;
-	onDeleteSection: () => void;
-}
-
-interface SectionHeaderProps {
+interface Props {
 	sectionId: string;
 	title: string;
 	open: boolean;
@@ -29,8 +21,9 @@ interface SectionHeaderProps {
 	repeatVariable?: string;
 	/** Provided by SortableSection in sectioned mode; absent for untitled/free-flow. */
 	dragHandle?: SectionDragHandle;
-	/** Present only in editable mode; absent (read-only) when locked/no-permission. */
-	actions?: SectionHeaderActions;
+	onRename?: () => void;
+	onAddPanel?: () => void;
+	onDeleteSection?: () => void;
 }
 
 function SectionHeader({
@@ -40,16 +33,16 @@ function SectionHeader({
 	onToggle,
 	repeatVariable,
 	dragHandle,
-	actions,
-}: SectionHeaderProps): JSX.Element {
+	onRename,
+	onAddPanel,
+	onDeleteSection,
+}: Props): JSX.Element {
+	const hasActions = !!(onAddPanel || onRename || onDeleteSection);
 	return (
 		<div className={cx(styles.header, { [styles.headerOpen]: open })}>
 			{dragHandle ? (
-				<Button
+				<button
 					type="button"
-					variant="ghost"
-					color="secondary"
-					size="icon"
 					className={styles.dragHandle}
 					ref={dragHandle.setActivatorNodeRef}
 					aria-label="Drag to reorder section"
@@ -58,12 +51,10 @@ function SectionHeader({
 					{...dragHandle.listeners}
 				>
 					<GripVertical size={14} />
-				</Button>
+				</button>
 			) : null}
-			<Button
+			<button
 				type="button"
-				variant="ghost"
-				color="secondary"
 				className={styles.toggle}
 				onClick={onToggle}
 				data-testid={`dashboard-section-toggle-${sectionId}`}
@@ -75,13 +66,13 @@ function SectionHeader({
 						(repeats per ${repeatVariable})
 					</Typography.Text>
 				) : null}
-			</Button>
-			{actions ? (
+			</button>
+			{hasActions ? (
 				<SectionActionsMenu
 					sectionId={sectionId}
-					onAddPanel={actions.onAddPanel}
-					onRename={actions.onRename}
-					onDeleteSection={actions.onDeleteSection}
+					onAddPanel={onAddPanel}
+					onRename={onRename}
+					onDeleteSection={onDeleteSection}
 				/>
 			) : null}
 		</div>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionList.tsx

@@ -20,12 +20,12 @@ import Section from './Section/Section';
 import SectionDragPreview from './SectionDragPreview/SectionDragPreview';
 import SortableSection from './SortableSection';
 
-interface SectionListProps {
+interface Props {
 	sections: DashboardSection[];
 	layouts: DashboardtypesLayoutDTO[] | undefined | null;
 }
 
-function SectionList({ sections, layouts }: SectionListProps): JSX.Element {
+function SectionList({ sections, layouts }: Props): JSX.Element {
 	const isEditable = useDashboardStore((s) => s.isEditable);
 
 	const {

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SortableSection.tsx

@@ -7,7 +7,7 @@ import type { DeletePanelArgs } from '../Panel/hooks/useDeletePanel';
 import type { MovePanelArgs } from '../Panel/hooks/useMovePanelToSection';
 import Section from './Section/Section';
 
-interface SortableSectionProps {
+interface Props {
 	section: DashboardSection;
 	sections: DashboardSection[];
 	onAddPanel: (args: AddPanelArgs) => void;
@@ -21,7 +21,7 @@ function SortableSection({
 	onAddPanel,
 	onMovePanel,
 	onDeletePanel,
-}: SortableSectionProps): JSX.Element {
+}: Props): JSX.Element {
 	const {
 		attributes,
 		listeners,

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/index.tsx

@@ -1,5 +1,7 @@
 import { ReactNode, useMemo } from 'react';
 
+import { Empty } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
 import type {
 	DashboardtypesLayoutDTO,
 	DashboardtypesPanelDTO,
@@ -7,7 +9,7 @@ import type {
 
 import { useDashboardStore } from '../store/useDashboardStore';
 import { layoutsToSections } from '../utils';
-import DashboardEmptyState from './DashboardEmptyState/DashboardEmptyState';
+import AddSectionControl from './Section/AddSectionControl/AddSectionControl';
 import Section from './Section/Section/Section';
 import SectionList from './Section/SectionList';
 import styles from './PanelsAndSectionsLayout.module.scss';
@@ -15,15 +17,12 @@ import styles from './PanelsAndSectionsLayout.module.scss';
 import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
 
-interface PanelsAndSectionsLayoutProps {
+interface Props {
 	layouts: DashboardtypesLayoutDTO[];
 	panels: Record<string, DashboardtypesPanelDTO | undefined>;
 }
 
-function PanelsAndSectionsLayout({
-	layouts,
-	panels,
-}: PanelsAndSectionsLayoutProps): JSX.Element {
+function PanelsAndSectionsLayout({ layouts, panels }: Props): JSX.Element {
 	const isEditable = useDashboardStore((s) => s.isEditable);
 
 	const sections = useMemo(
@@ -41,7 +40,16 @@ function PanelsAndSectionsLayout({
 
 	const renderContent = (): ReactNode => {
 		if (isEmpty) {
-			return <DashboardEmptyState canAddPanel={isEditable} />;
+			return (
+				<div className={styles.emptyState}>
+					<Empty
+						image={Empty.PRESENTED_IMAGE_SIMPLE}
+						description={
+							<Typography.Text>No panels in this dashboard yet</Typography.Text>
+						}
+					/>
+				</div>
+			);
 		}
 
 		if (isSectioned) {
@@ -53,7 +61,18 @@ function PanelsAndSectionsLayout({
 		));
 	};
 
-	return <div className={styles.body}>{renderContent()}</div>;
+	return (
+		<div className={styles.body}>
+			{renderContent()}
+			{isEditable ? (
+				<AddSectionControl
+					sections={sections}
+					layouts={layouts}
+					isSectioned={isSectioned}
+				/>
+			) : null}
+		</div>
+	);
 }
 
 export default PanelsAndSectionsLayout;

frontend/src/pages/DashboardPageV2/DashboardContainer/components/ConfirmDeleteDialog/ConfirmDeleteDialog.module.scss

@@ -1,12 +0,0 @@
-.body {
-	color: var(--l2-foreground);
-	font-family: Inter;
-	font-size: 14px;
-	line-height: 20px;
-}
-
-.footer {
-	display: flex;
-	justify-content: flex-end;
-	gap: 8px;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/components/ConfirmDeleteDialog/ConfirmDeleteDialog.tsx

@@ -1,69 +0,0 @@
-import { ReactNode } from 'react';
-import { Trash2, X } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { DialogWrapper } from '@signozhq/ui/dialog';
-
-import styles from './ConfirmDeleteDialog.module.scss';
-
-interface ConfirmDeleteDialogProps {
-	open: boolean;
-	title: string;
-	description: ReactNode;
-	confirmLabel?: string;
-	isLoading?: boolean;
-	onConfirm: () => void;
-	onClose: () => void;
-}
-
-/**
- * Shared destructive-confirm dialog built on @signozhq/ui DialogWrapper (not
- * antd Modal), so it inherits the design-system styling/theme. Used by the
- * dashboard and section delete flows.
- */
-function ConfirmDeleteDialog({
-	open,
-	title,
-	description,
-	confirmLabel = 'Delete',
-	isLoading = false,
-	onConfirm,
-	onClose,
-}: ConfirmDeleteDialogProps): JSX.Element {
-	const footer = (
-		<div className={styles.footer}>
-			<Button variant="solid" color="secondary" onClick={onClose}>
-				<X size={12} />
-				Cancel
-			</Button>
-			<Button
-				variant="solid"
-				color="destructive"
-				loading={isLoading}
-				onClick={onConfirm}
-				testId="confirm-delete"
-			>
-				<Trash2 size={12} />
-				{confirmLabel}
-			</Button>
-		</div>
-	);
-
-	return (
-		<DialogWrapper
-			open={open}
-			onOpenChange={(isOpen): void => {
-				if (!isOpen) {
-					onClose();
-				}
-			}}
-			title={title}
-			width="narrow"
-			showCloseButton={false}
-			footer={footer}
-		>
-			<div className={styles.body}>{description}</div>
-		</DialogWrapper>
-	);
-}
-
-export default ConfirmDeleteDialog;

frontend/src/pages/DashboardPageV2/DashboardContainer/components/DashboardHeader/DashboardBreadcrumbs.module.scss

@@ -5,23 +5,26 @@
 	gap: 6px;
 	align-items: center;
 	max-width: 80%;
-	padding-left: 8px;
 
-	.linkToPreviousPage {
-		// Collapse the design-system Button's fixed-height/padding box so it hugs
-		// the label like inline text (the breadcrumb is text, not a chunky button).
-		--button-height: auto;
-		--button-padding: 0;
-		--button-gap: 4px;
+	.dashboardBtn {
+		display: flex;
+		align-items: center;
 		color: var(--l2-foreground);
 		font-family: Inter;
 		font-size: 14px;
 		font-style: normal;
 		font-weight: 400;
+		line-height: 20px; /* 142.857% */
 		letter-spacing: -0.07px;
+		padding: 0px;
+		height: 20px;
 	}
 
-	.currentPage {
+	.dashboardBtn:hover {
+		background-color: unset;
+	}
+
+	.idBtn {
 		display: flex;
 		align-items: center;
 		gap: 4px;
@@ -43,9 +46,12 @@
 			overflow: hidden;
 			text-overflow: ellipsis;
 		}
-	}
 
-	.currentPage:hover {
+		:global(.ant-btn-icon) {
+			margin-inline-end: 4px;
+		}
+	}
+	.idBtn:hover {
 		background: color-mix(in srgb, var(--bg-robin-400) 10%, transparent);
 		color: var(--bg-robin-300);
 	}

frontend/src/pages/DashboardPageV2/DashboardContainer/components/DashboardHeader/DashboardBreadcrumbs.tsx

@@ -1,23 +1,19 @@
 import { useCallback } from 'react';
-import { LayoutGrid } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { Typography } from '@signozhq/ui/typography';
 import getSessionStorageApi from 'api/browser/sessionstorage/get';
 import ROUTES from 'constants/routes';
 import { DASHBOARDS_LIST_QUERY_PARAMS_STORAGE_KEY } from 'hooks/dashboard/useDashboardsListQueryParams';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { LayoutGrid } from '@signozhq/icons';
 
 import styles from './DashboardBreadcrumbs.module.scss';
 
-interface DashboardBreadcrumbsProps {
+interface Props {
 	title: string;
 	image: string;
 }
 
-function DashboardBreadcrumbs({
-	title,
-	image,
-}: DashboardBreadcrumbsProps): JSX.Element {
+function DashboardBreadcrumbs({ title, image }: Props): JSX.Element {
 	const { safeNavigate } = useSafeNavigate();
 
 	const goToListPage = useCallback(() => {
@@ -39,23 +35,20 @@ function DashboardBreadcrumbs({
 		<div className={styles.dashboardBreadcrumbs}>
 			<Button
 				variant="ghost"
-				color="secondary"
 				prefix={<LayoutGrid size={14} />}
+				className={styles.dashboardBtn}
 				onClick={goToListPage}
-				className={styles.linkToPreviousPage}
-				testId="dashboard-breadcrumb-list"
 			>
-				Dashboard
+				Dashboard /
 			</Button>
-			<div>/</div>
-			<div className={styles.currentPage}>
+			<Button variant="ghost" className={styles.idBtn}>
 				<img
 					src={image}
 					alt="dashboard-icon"
 					className={styles.dashboardIconImage}
 				/>
-				<Typography.Text>{title}</Typography.Text>
-			</div>
+				{title}
+			</Button>
 		</div>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/components/DashboardHeader/DashboardHeader.tsx

@@ -5,12 +5,12 @@ import DashboardBreadcrumbs from './DashboardBreadcrumbs';
 
 import styles from './DashboardHeader.module.scss';
 
-interface DashboardHeaderProps {
+interface Props {
 	title: string;
 	image: string;
 }
 
-function DashboardHeader({ title, image }: DashboardHeaderProps): JSX.Element {
+function DashboardHeader({ title, image }: Props): JSX.Element {
 	return (
 		<div className={styles.dashboardHeader}>
 			<DashboardBreadcrumbs title={title} image={image} />

frontend/src/pages/DashboardPageV2/DashboardContainer/index.tsx

@@ -2,7 +2,6 @@ import { useEffect, useMemo } from 'react';
 import { FullScreen, useFullScreenHandle } from 'react-full-screen';
 
 import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
-import PanelTypeSelectionModal from 'container/DashboardContainer/PanelTypeSelectionModal';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useAppContext } from 'providers/App/App';
 
@@ -11,15 +10,12 @@ import PanelsAndSectionsLayout from './PanelsAndSectionsLayout';
 import { useDashboardStore } from './store/useDashboardStore';
 import styles from './DashboardContainer.module.scss';
 
-interface DashboardContainerProps {
+interface Props {
 	dashboard: DashboardtypesGettableDashboardV2DTO;
 	refetch: () => void;
 }
 
-function DashboardContainer({
-	dashboard,
-	refetch,
-}: DashboardContainerProps): JSX.Element {
+function DashboardContainer({ dashboard, refetch }: Props): JSX.Element {
 	const fullScreenHandle = useFullScreenHandle();
 
 	const { user } = useAppContext();
@@ -47,9 +43,6 @@ function DashboardContainer({
 				/>
 				<PanelsAndSectionsLayout layouts={layouts} panels={panels} />
 			</div>
-			{/* Shared panel-type picker (V1 component): opened from any "New Panel"
-			    trigger; navigates to the widget editor route on selection. */}
-			<PanelTypeSelectionModal />
 		</FullScreen>
 	);
 }

frontend/src/pages/TracesExplorer/index.tsx

@@ -24,6 +24,7 @@ import {
 	getQueryByPanelType,
 } from 'container/TracesExplorer/explorerUtils';
 import ListView from 'container/TracesExplorer/ListView';
+import { defaultSelectedColumns } from 'container/TracesExplorer/ListView/configs';
 import QuerySection from 'container/TracesExplorer/QuerySection';
 import TableView from 'container/TracesExplorer/TableView';
 import TracesView from 'container/TracesExplorer/TracesView';
@@ -79,6 +80,9 @@ function TracesExplorer(): JSX.Element {
 		storageKey: LOCALSTORAGE.TRACES_LIST_OPTIONS,
 		dataSource: DataSource.TRACES,
 		aggregateOperator: 'noop',
+		initialOptions: {
+			selectColumns: defaultSelectedColumns,
+		},
 	});
 
 	const [searchParams] = useSearchParams();

frontend/src/providers/preferences/sync/usePreferenceSync.ts

@@ -3,9 +3,9 @@ import { useEffect, useState } from 'react';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import {
 	defaultLogsSelectedColumns,
-	defaultTraceSelectedColumns,
 	ensureLogsRequiredColumns,
 } from 'container/OptionsMenu/constants';
+import { defaultSelectedColumns as defaultTracesSelectedColumns } from 'container/TracesExplorer/ListView/configs';
 import { useGetAllViews } from 'hooks/saveViews/useGetAllViews';
 import { DataSource } from 'types/common/queryBuilder';
 
@@ -69,7 +69,7 @@ export function usePreferenceSync({
 			};
 		}
 		if (dataSource === DataSource.TRACES) {
-			columns = parsedExtraData?.selectColumns || defaultTraceSelectedColumns;
+			columns = parsedExtraData?.selectColumns || defaultTracesSelectedColumns;
 		}
 		setSavedViewPreferences({ columns, formatting });
 	}, [viewsData, dataSource, savedViewId, mode]);

pkg/alertmanager/alertmanagerstore/sqlalertmanagerstore/maintenance.go

@@ -2,6 +2,7 @@ package sqlalertmanagerstore
 
 import (
 	"context"
+	"encoding/json"
 	"log/slog"
 	"time"
 
@@ -39,16 +40,20 @@ func (r *maintenance) ListPlannedMaintenance(ctx context.Context, orgID string)
 		return nil, err
 	}
 
-	gettablePlannedMaintenance := make([]*alertmanagertypes.PlannedMaintenance, 0)
+	plannedMaintenances := make([]*alertmanagertypes.PlannedMaintenance, 0, len(gettableMaintenancesRules))
 	for _, gettableMaintenancesRule := range gettableMaintenancesRules {
-		m := gettableMaintenancesRule.ToPlannedMaintenance()
-		gettablePlannedMaintenance = append(gettablePlannedMaintenance, m)
-		if m.HasScheduleRecurrenceBoundsMismatch() {
-			r.logger.WarnContext(ctx, "planned_downtime_recurrence_schedule_mismatch", slog.String("maintenance_id", m.ID.StringValue()))
+		pm, err := gettableMaintenancesRule.ToPlannedMaintenance()
+		if err != nil {
+			// Don't return an error because we want to process all the valid records.
+			// Log and skip instead.
+			r.logger.WarnContext(ctx, "skipping planned maintenance", slog.String("maintenance_id", gettableMaintenancesRule.ID.StringValue()), errors.Attr(err))
+			continue
 		}
+
+		plannedMaintenances = append(plannedMaintenances, pm)
 	}
 
-	return gettablePlannedMaintenance, nil
+	return plannedMaintenances, nil
 }
 
 func (r *maintenance) GetPlannedMaintenanceByID(ctx context.Context, id valuer.UUID) (*alertmanagertypes.PlannedMaintenance, error) {
@@ -64,7 +69,7 @@ func (r *maintenance) GetPlannedMaintenanceByID(ctx context.Context, id valuer.U
 		return nil, r.sqlstore.WrapNotFoundErrf(err, errors.CodeNotFound, "planned maintenance with ID: %s does not exist", id.StringValue())
 	}
 
-	return storableMaintenanceRule.ToPlannedMaintenance(), nil
+	return storableMaintenanceRule.ToPlannedMaintenance()
 }
 
 func (r *maintenance) CreatePlannedMaintenance(ctx context.Context, maintenance *alertmanagertypes.PostablePlannedMaintenance) (*alertmanagertypes.PlannedMaintenance, error) {
@@ -73,6 +78,11 @@ func (r *maintenance) CreatePlannedMaintenance(ctx context.Context, maintenance
 		return nil, err
 	}
 
+	schedule, err := json.Marshal(maintenance.Schedule)
+	if err != nil {
+		return nil, err
+	}
+
 	storablePlannedMaintenance := alertmanagertypes.StorablePlannedMaintenance{
 		Identifiable: types.Identifiable{
 			ID: valuer.GenerateUUID(),
@@ -87,7 +97,7 @@ func (r *maintenance) CreatePlannedMaintenance(ctx context.Context, maintenance
 		},
 		Name:        maintenance.Name,
 		Description: maintenance.Description,
-		Schedule:    maintenance.Schedule,
+		Schedule:    string(schedule),
 		OrgID:       claims.OrgID,
 		Scope:       maintenance.Scope,
 	}
@@ -135,18 +145,21 @@ func (r *maintenance) CreatePlannedMaintenance(ctx context.Context, maintenance
 		return nil, err
 	}
 
-	return &alertmanagertypes.PlannedMaintenance{
+	pm := &alertmanagertypes.PlannedMaintenance{
 		ID:          storablePlannedMaintenance.ID,
 		Name:        storablePlannedMaintenance.Name,
 		Description: storablePlannedMaintenance.Description,
-		Schedule:    storablePlannedMaintenance.Schedule,
 		RuleIDs:     maintenance.AlertIds,
 		Scope:       maintenance.Scope,
 		CreatedAt:   storablePlannedMaintenance.CreatedAt,
 		CreatedBy:   storablePlannedMaintenance.CreatedBy,
 		UpdatedAt:   storablePlannedMaintenance.UpdatedAt,
 		UpdatedBy:   storablePlannedMaintenance.UpdatedBy,
-	}, nil
+	}
+	if err = json.Unmarshal([]byte(storablePlannedMaintenance.Schedule), &pm.Schedule); err != nil {
+		return nil, err
+	}
+	return pm, nil
 }
 
 func (r *maintenance) DeletePlannedMaintenance(ctx context.Context, id valuer.UUID) error {
@@ -174,6 +187,11 @@ func (r *maintenance) UpdatePlannedMaintenance(ctx context.Context, maintenance
 		return err
 	}
 
+	schedule, err := json.Marshal(maintenance.Schedule)
+	if err != nil {
+		return err
+	}
+
 	storablePlannedMaintenance := alertmanagertypes.StorablePlannedMaintenance{
 		Identifiable: types.Identifiable{
 			ID: id,
@@ -188,7 +206,7 @@ func (r *maintenance) UpdatePlannedMaintenance(ctx context.Context, maintenance
 		},
 		Name:        maintenance.Name,
 		Description: maintenance.Description,
-		Schedule:    maintenance.Schedule,
+		Schedule:    string(schedule),
 		OrgID:       claims.OrgID,
 		Scope:       maintenance.Scope,
 	}

pkg/alertmanager/alertmanagerstore/sqlalertmanagerstore/maintenance_test.go

@@ -0,0 +1,94 @@
+package sqlalertmanagerstore
+
+import (
+	"path/filepath"
+	"testing"
+	"time"
+
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+
+	"github.com/SigNoz/signoz/pkg/factory/factorytest"
+	"github.com/SigNoz/signoz/pkg/sqlstore"
+	"github.com/SigNoz/signoz/pkg/sqlstore/sqlitesqlstore"
+	"github.com/SigNoz/signoz/pkg/types"
+	"github.com/SigNoz/signoz/pkg/types/alertmanagertypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+func newTestStore(t *testing.T) sqlstore.SQLStore {
+	t.Helper()
+	store, err := sqlitesqlstore.New(t.Context(), factorytest.NewSettings(), sqlstore.Config{
+		Provider: "sqlite",
+		Connection: sqlstore.ConnectionConfig{
+			MaxOpenConns:    1,
+			MaxConnLifetime: 0,
+		},
+		Sqlite: sqlstore.SqliteConfig{
+			Path:            filepath.Join(t.TempDir(), "test.db"),
+			Mode:            "wal",
+			BusyTimeout:     5 * time.Second,
+			TransactionMode: "deferred",
+		},
+	})
+	require.NoError(t, err)
+
+	_, err = store.BunDB().NewCreateTable().
+		Model((*alertmanagertypes.StorablePlannedMaintenance)(nil)).
+		IfNotExists().
+		Exec(t.Context())
+	require.NoError(t, err)
+
+	_, err = store.BunDB().NewCreateTable().
+		Model((*alertmanagertypes.StorablePlannedMaintenanceRule)(nil)).
+		IfNotExists().
+		Exec(t.Context())
+	require.NoError(t, err)
+
+	return store
+}
+
+// TestListPlannedMaintenanceSkipsInvalid asserts that a single corrupt record
+// (here, an unloadable timezone) is skipped rather than failing the whole list.
+func TestListPlannedMaintenanceSkipsInvalid(t *testing.T) {
+	store := newTestStore(t)
+	orgID := valuer.GenerateUUID().StringValue()
+	now := time.Now().UTC()
+
+	valid := &alertmanagertypes.StorablePlannedMaintenance{
+		Identifiable:  types.Identifiable{ID: valuer.GenerateUUID()},
+		TimeAuditable: types.TimeAuditable{CreatedAt: now, UpdatedAt: now},
+		Name:          "valid",
+		Schedule:      `{"timezone":"UTC","startTime":"2024-01-01T12:00:00Z","recurrence":{"duration":"2h","repeatType":"daily"}}`,
+		OrgID:         orgID,
+	}
+	result, err := store.BunDB().NewInsert().Model(valid).Exec(t.Context())
+	require.NoError(t, err)
+	rowsAffected, err := result.RowsAffected()
+	require.NoError(t, err)
+	require.Equal(t, int64(1), rowsAffected)
+
+	// A schedule with "zero" startTime
+	invalid := &alertmanagertypes.StorablePlannedMaintenance{
+		Identifiable: types.Identifiable{ID: valuer.GenerateUUID()},
+		TimeAuditable: types.TimeAuditable{
+			CreatedAt: now,
+			UpdatedAt: now,
+		},
+		Name:     "invalid",
+		Schedule: `{"timezone":"UTC","recurrence":{"duration":"2h","repeatType":"daily"}}`,
+		OrgID:    orgID,
+	}
+	result, err = store.BunDB().NewInsert().Model(invalid).Exec(t.Context())
+	require.NoError(t, err)
+	rowsAffected, err = result.RowsAffected()
+	require.NoError(t, err)
+	require.Equal(t, int64(1), rowsAffected)
+
+	maintenanceStore := NewMaintenanceStore(store, factorytest.NewSettings())
+
+	list, err := maintenanceStore.ListPlannedMaintenance(t.Context(), orgID)
+	require.NoError(t, err)
+	require.Len(t, list, 1)
+	assert.Equal(t, valid.ID, list[0].ID)
+}

pkg/alertmanager/config_test.go

@@ -3,6 +3,8 @@ package alertmanager
 import (
 	"context"
 	"net/url"
+	"os"
+	"strings"
 	"testing"
 	"time"
 
@@ -14,7 +16,23 @@ import (
 	"github.com/stretchr/testify/require"
 )
 
+const prefix = "SIGNOZ_"
+
+// clearSignozEnv unsets all existing SIGNOZ_* env vars for the duration of the test.
+func clearSignozEnv(t *testing.T) {
+	t.Helper()
+	for _, kv := range os.Environ() {
+		if strings.HasPrefix(kv, prefix) {
+			key := strings.SplitN(kv, "=", 2)[0]
+			orig, _ := os.LookupEnv(key)
+			_ = os.Unsetenv(key)
+			t.Cleanup(func() { _ = os.Setenv(key, orig) })
+		}
+	}
+}
+
 func TestNewWithEnvProvider(t *testing.T) {
+	clearSignozEnv(t)
 	t.Setenv("SIGNOZ_ALERTMANAGER_PROVIDER", "signoz")
 	t.Setenv("SIGNOZ_ALERTMANAGER_LEGACY_API__URL", "http://localhost:9093/api")
 	t.Setenv("SIGNOZ_ALERTMANAGER_SIGNOZ_ROUTE_REPEAT__INTERVAL", "5m")

pkg/config/envprovider/provider_test.go

@@ -18,8 +18,8 @@ func clearSignozEnv(t *testing.T) {
 		if strings.HasPrefix(kv, prefix) {
 			key := strings.SplitN(kv, "=", 2)[0]
 			orig, _ := os.LookupEnv(key)
-			os.Unsetenv(key)
-			t.Cleanup(func() { os.Setenv(key, orig) })
+			_ = os.Unsetenv(key)
+			t.Cleanup(func() { _ = os.Setenv(key, orig) })
 		}
 	}
 }

pkg/signoz/provider.go

@@ -211,6 +211,7 @@ func NewSQLMigrationProviderFactories(
 		sqlmigration.NewAddDashboardNameFactory(sqlstore, sqlschema),
 		sqlmigration.NewFixChangelogOperationTypeFactory(sqlstore, sqlschema),
 		sqlmigration.NewCloudIntegrationRemoveCascadeDeleteFactory(sqlschema),
+		sqlmigration.NewMigrateRecurrenceBoundsFactory(sqlstore),
 	)
 }
 

pkg/sqlmigration/092_migrate_recurrence_bounds.go

@@ -0,0 +1,128 @@
+package sqlmigration
+
+import (
+	"context"
+	"encoding/json"
+	"log/slog"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/factory"
+	"github.com/SigNoz/signoz/pkg/sqlstore"
+	"github.com/uptrace/bun"
+	"github.com/uptrace/bun/migrate"
+)
+
+type migrateRecurrenceBounds struct {
+	sqlstore sqlstore.SQLStore
+	logger   *slog.Logger
+}
+
+type plannedMaintenanceScheduleRow struct {
+	bun.BaseModel `bun:"table:planned_maintenance"`
+
+	ID       string `bun:"id"`
+	Schedule string `bun:"schedule"`
+}
+
+func NewMigrateRecurrenceBoundsFactory(sqlstore sqlstore.SQLStore) factory.ProviderFactory[SQLMigration, Config] {
+	return factory.NewProviderFactory(
+		factory.MustNewName("migrate_recurrence_bounds"),
+		func(ctx context.Context, ps factory.ProviderSettings, c Config) (SQLMigration, error) {
+			return &migrateRecurrenceBounds{sqlstore: sqlstore, logger: ps.Logger}, nil
+		},
+	)
+}
+
+func (migration *migrateRecurrenceBounds) Register(migrations *migrate.Migrations) error {
+	if err := migrations.Register(migration.Up, migration.Down); err != nil {
+		return err
+	}
+	return nil
+}
+
+// Up moves the start/end bounds of a recurring planned maintenance from the
+// nested recurrence object up to the schedule level. Until now both the
+// schedule and its recurrence carried their own startTime/endTime, with the
+// recurrence values taking precedence when a recurrence was present. The
+// recurrence fields are being dropped, so the recurrence bounds (the source of
+// truth for recurring maintenances) are promoted to the schedule before the
+// struct loses those fields.
+//
+// We deliberately operate on the raw JSON instead of the Recurrence struct:
+// that struct loses its StartTime/EndTime fields in the same change set, so it
+// can no longer read the values this migration needs to move.
+func (migration *migrateRecurrenceBounds) Up(ctx context.Context, db *bun.DB) error {
+	tx, err := db.BeginTx(ctx, nil)
+	if err != nil {
+		return err
+	}
+
+	defer func() {
+		_ = tx.Rollback()
+	}()
+
+	rows := make([]*plannedMaintenanceScheduleRow, 0)
+	if err := tx.NewSelect().Model(&rows).Scan(ctx); err != nil {
+		return err
+	}
+
+	for _, row := range rows {
+		schedule := make(map[string]json.RawMessage)
+		if err := json.Unmarshal([]byte(row.Schedule), &schedule); err != nil {
+			// A single corrupt row must not abort the whole migration (which would block startup).
+			migration.logger.WarnContext(ctx, "skipping planned maintenance with unreadable schedule", slog.String("maintenance_id", row.ID), errors.Attr(err))
+			continue
+		}
+
+		recurrenceRaw, ok := schedule["recurrence"]
+		if !ok || string(recurrenceRaw) == "null" {
+			continue
+		}
+
+		recurrence := make(map[string]json.RawMessage)
+		if err := json.Unmarshal(recurrenceRaw, &recurrence); err != nil {
+			migration.logger.WarnContext(ctx, "skipping planned maintenance with unreadable recurrence", slog.String("maintenance_id", row.ID), errors.Attr(err))
+			continue
+		}
+
+		// Promote the recurrence bounds (source of truth) to the schedule
+		// level, then drop them from the recurrence.
+		if startTime, ok := recurrence["startTime"]; ok {
+			schedule["startTime"] = startTime
+			delete(recurrence, "startTime")
+		}
+		if endTime, ok := recurrence["endTime"]; ok && string(endTime) != "null" {
+			schedule["endTime"] = endTime
+		} else {
+			// The recurrence had no end time, so the schedule must not carry
+			// a stale one duplicated by the UI.
+			delete(schedule, "endTime")
+		}
+		delete(recurrence, "endTime")
+
+		newRecurrence, err := json.Marshal(recurrence)
+		if err != nil {
+			return err
+		}
+		schedule["recurrence"] = newRecurrence
+
+		newSchedule, err := json.Marshal(schedule)
+		if err != nil {
+			return err
+		}
+
+		if _, err := tx.NewUpdate().
+			Model((*plannedMaintenanceScheduleRow)(nil)).
+			Set("schedule = ?", string(newSchedule)).
+			Where("id = ?", row.ID).
+			Exec(ctx); err != nil {
+			return err
+		}
+	}
+
+	return tx.Commit()
+}
+
+func (migration *migrateRecurrenceBounds) Down(context.Context, *bun.DB) error {
+	return nil
+}

pkg/types/alertmanagertypes/maintenance.go

@@ -3,6 +3,7 @@ package alertmanagertypes
 import (
 	"context"
 	"encoding/json"
+	"slices"
 	"time"
 
 	"github.com/expr-lang/expr"
@@ -59,11 +60,11 @@ type StorablePlannedMaintenance struct {
 	types.Identifiable
 	types.TimeAuditable
 	types.UserAuditable
-	Name        string    `bun:"name,type:text,notnull"`
-	Description string    `bun:"description,type:text"`
-	Schedule    *Schedule `bun:"schedule,type:text,notnull"`
-	OrgID       string    `bun:"org_id,type:text"`
-	Scope       string    `bun:"scope,type:text"`
+	Name        string `bun:"name,type:text,notnull"`
+	Description string `bun:"description,type:text"`
+	Schedule    string `bun:"schedule,type:text,notnull"`
+	OrgID       string `bun:"org_id,type:text"`
+	Scope       string `bun:"scope,type:text"`
 }
 
 type PlannedMaintenance struct {
@@ -107,10 +108,12 @@ func (p *PostablePlannedMaintenance) Validate() error {
 		return errors.Newf(errors.TypeInvalidInput, ErrCodeInvalidPlannedMaintenancePayload, "invalid timezone in the payload")
 	}
 
-	if !p.Schedule.StartTime.IsZero() && !p.Schedule.EndTime.IsZero() {
-		if p.Schedule.StartTime.After(p.Schedule.EndTime) {
-			return errors.Newf(errors.TypeInvalidInput, ErrCodeInvalidPlannedMaintenancePayload, "start time cannot be after end time")
-		}
+	if p.Schedule.StartTime.IsZero() {
+		return errors.Newf(errors.TypeInvalidInput, ErrCodeInvalidPlannedMaintenancePayload, "missing start time in the payload")
+	}
+
+	if !p.Schedule.EndTime.IsZero() && p.Schedule.StartTime.After(p.Schedule.EndTime) {
+		return errors.Newf(errors.TypeInvalidInput, ErrCodeInvalidPlannedMaintenancePayload, "start time cannot be after end time")
 	}
 
 	if p.Schedule.Recurrence != nil {
@@ -120,9 +123,6 @@ func (p *PostablePlannedMaintenance) Validate() error {
 		if p.Schedule.Recurrence.Duration.IsZero() {
 			return errors.Newf(errors.TypeInvalidInput, ErrCodeInvalidPlannedMaintenancePayload, "missing duration in the payload")
 		}
-		if p.Schedule.Recurrence.EndTime != nil && p.Schedule.Recurrence.EndTime.Before(p.Schedule.Recurrence.StartTime) {
-			return errors.Newf(errors.TypeInvalidInput, ErrCodeInvalidPlannedMaintenancePayload, "end time cannot be before start time")
-		}
 	}
 	if p.Scope != "" {
 		if _, err := expr.Compile(p.Scope, expr.AllowUndefinedVariables(), expr.AsBool()); err != nil {
@@ -148,134 +148,84 @@ type PlannedMaintenanceWithRules struct {
 	Rules                       []*StorablePlannedMaintenanceRule `bun:"rel:has-many,join:id=planned_maintenance_id"`
 }
 
-// HasScheduleRecurrenceBoundsMismatch reports whether a recurring maintenance
-// has different start/end bounds in Schedule and Schedule.Recurrence.
-//
-// This is used to detect if there are any entries with recurrence that don't
-// have the same timestamps stored at the schedule-level.
-// UI payloads duplicated those values in both places, but direct API users may
-// have stored bounds that are missing from, or different than, the schedule-level bounds.
-// We need to observe these before we can safely drop Recurrence.StartTime and
-// Recurrence.EndTime.
-func (m *PlannedMaintenance) HasScheduleRecurrenceBoundsMismatch() bool {
-	recurrence := m.Schedule.Recurrence
-	if recurrence == nil {
-		return false
-	}
-
-	return !recurrence.StartTime.Equal(m.Schedule.StartTime) ||
-		(recurrence.EndTime == nil && !m.Schedule.EndTime.IsZero()) ||
-		(recurrence.EndTime != nil && !recurrence.EndTime.Equal(m.Schedule.EndTime))
+// AppliesTo reports whether this maintenance applies to the given rule.
+// An empty RuleIDs set means the maintenance applies to all rules.
+func (m *PlannedMaintenance) AppliesTo(ruleID string) bool {
+	return len(m.RuleIDs) == 0 || slices.Contains(m.RuleIDs, ruleID)
 }
 
 func (m *PlannedMaintenance) ShouldSkip(ruleID string, now time.Time, lset model.LabelSet) (bool, error) {
-	// Check if the alert ID is in the maintenance window
-	found := false
-	if len(m.RuleIDs) > 0 {
-		for _, alertID := range m.RuleIDs {
-			if alertID == ruleID {
-				found = true
-				break
-			}
-		}
-	}
-	// If no alert ids, then skip all alerts
-	if len(m.RuleIDs) == 0 {
-		found = true
-	}
-
-	if !found {
-		return false, nil
-	}
-
-	if !m.IsActive(now) {
+	if !m.AppliesTo(ruleID) || !m.IsActive(now) {
 		return false, nil
 	}
 
 	if m.Scope != "" {
-		result, err := EvalScopeExpression(m.Scope, lset)
-		if err != nil {
+		skip, err := EvalScopeExpression(m.Scope, lset)
+		if err != nil || !skip {
 			return false, err
 		}
-		if !result {
-			return false, nil
-		}
 	}
 	return true, nil
 }
 
 // IsActive reports whether [now] falls inside the maintenance window's schedule.
 func (m *PlannedMaintenance) IsActive(now time.Time) bool {
-	// If alert is found, we check if it should be skipped based on the schedule
+	// Check if maintenance window has not started yet
+	if now.Before(m.Schedule.StartTime) {
+		return false
+	}
+
+	// Check if maintenance window has expired
+	if !m.Schedule.EndTime.IsZero() && now.After(m.Schedule.EndTime) {
+		return false
+	}
+
+	// Fixed schedule
+	if m.Schedule.Recurrence == nil {
+		return true
+	}
+
 	loc, err := time.LoadLocation(m.Schedule.Timezone)
 	if err != nil {
 		return false
 	}
 
-	startTime := m.Schedule.StartTime
-	endTime := m.Schedule.EndTime
-	recurrence := m.Schedule.Recurrence
-
-	// fixed schedule — only when no recurrence is configured.
-	// When recurrence is set, the recurring check below handles everything;
-	// falling through here would cause the window to match the absolute
-	// StartTime–EndTime range instead of the daily/weekly/monthly pattern.
-	if recurrence == nil && !startTime.IsZero() && !endTime.IsZero() {
-		if now.Equal(startTime) || now.Equal(endTime) ||
-			(now.After(startTime) && now.Before(endTime)) {
-			return true
-		}
+	now = now.In(loc)
+	switch m.Schedule.Recurrence.RepeatType {
+	case RepeatTypeDaily:
+		return m.checkDaily(now, loc)
+	case RepeatTypeWeekly:
+		return m.checkWeekly(now, loc)
+	case RepeatTypeMonthly:
+		return m.checkMonthly(now, loc)
+	default:
+		return false
 	}
-
-	// recurring schedule
-	if recurrence != nil {
-		// Make sure the recurrence has started
-		if now.Before(recurrence.StartTime) {
-			return false
-		}
-
-		// Check if recurrence has expired
-		if recurrence.EndTime != nil {
-			if !recurrence.EndTime.IsZero() && now.After(*recurrence.EndTime) {
-				return false
-			}
-		}
-
-		currentTime := now.In(loc)
-		switch recurrence.RepeatType {
-		case RepeatTypeDaily:
-			return m.checkDaily(currentTime, recurrence, loc)
-		case RepeatTypeWeekly:
-			return m.checkWeekly(currentTime, recurrence, loc)
-		case RepeatTypeMonthly:
-			return m.checkMonthly(currentTime, recurrence, loc)
-		}
-	}
-
-	return false
 }
 
 // checkDaily rebases the recurrence start to today (or yesterday if needed)
 // and returns true if currentTime is within [candidate, candidate+Duration].
-func (m *PlannedMaintenance) checkDaily(currentTime time.Time, rec *Recurrence, loc *time.Location) bool {
+func (m *PlannedMaintenance) checkDaily(currentTime time.Time, loc *time.Location) bool {
 	candidate := time.Date(
 		currentTime.Year(), currentTime.Month(), currentTime.Day(),
-		rec.StartTime.Hour(), rec.StartTime.Minute(), 0, 0,
+		m.Schedule.StartTime.Hour(), m.Schedule.StartTime.Minute(), 0, 0,
 		loc,
 	)
 	if candidate.After(currentTime) {
 		candidate = candidate.AddDate(0, 0, -1)
 	}
-	return currentTime.Sub(candidate) <= rec.Duration.Duration()
+	return currentTime.Sub(candidate) <= m.Schedule.Recurrence.Duration.Duration()
 }
 
 // checkWeekly finds the most recent allowed occurrence by rebasing the recurrence’s
 // time-of-day onto the allowed weekday. It does this for each allowed day and returns true
 // if the current time falls within the candidate window.
-func (m *PlannedMaintenance) checkWeekly(currentTime time.Time, rec *Recurrence, loc *time.Location) bool {
+func (m *PlannedMaintenance) checkWeekly(currentTime time.Time, loc *time.Location) bool {
+	rec := m.Schedule.Recurrence
+
 	// If no days specified, treat as every day (like daily).
 	if len(rec.RepeatOn) == 0 {
-		return m.checkDaily(currentTime, rec, loc)
+		return m.checkDaily(currentTime, loc)
 	}
 
 	for _, day := range rec.RepeatOn {
@@ -288,7 +238,7 @@ func (m *PlannedMaintenance) checkWeekly(currentTime time.Time, rec *Recurrence,
 		// Build a candidate occurrence by rebasing today's date to the allowed weekday.
 		candidate := time.Date(
 			currentTime.Year(), currentTime.Month(), currentTime.Day(),
-			rec.StartTime.Hour(), rec.StartTime.Minute(), 0, 0,
+			m.Schedule.StartTime.Hour(), m.Schedule.StartTime.Minute(), 0, 0,
 			loc,
 		).AddDate(0, 0, delta)
 		// If the candidate is in the future, subtract 7 days.
@@ -304,8 +254,9 @@ func (m *PlannedMaintenance) checkWeekly(currentTime time.Time, rec *Recurrence,
 
 // checkMonthly rebases the candidate occurrence using the recurrence's day-of-month.
 // If the candidate for the current month is in the future, it uses the previous month.
-func (m *PlannedMaintenance) checkMonthly(currentTime time.Time, rec *Recurrence, loc *time.Location) bool {
-	refDay := rec.StartTime.Day()
+func (m *PlannedMaintenance) checkMonthly(currentTime time.Time, loc *time.Location) bool {
+	startTime := m.Schedule.StartTime
+	refDay := startTime.Day()
 	year, month, _ := currentTime.Date()
 	lastDay := time.Date(year, month+1, 0, 0, 0, 0, 0, loc).Day()
 	day := refDay
@@ -313,7 +264,7 @@ func (m *PlannedMaintenance) checkMonthly(currentTime time.Time, rec *Recurrence
 		day = lastDay
 	}
 	candidate := time.Date(year, month, day,
-		rec.StartTime.Hour(), rec.StartTime.Minute(), rec.StartTime.Second(), rec.StartTime.Nanosecond(),
+		startTime.Hour(), startTime.Minute(), startTime.Second(), startTime.Nanosecond(),
 		loc,
 	)
 	if candidate.After(currentTime) {
@@ -323,33 +274,30 @@ func (m *PlannedMaintenance) checkMonthly(currentTime time.Time, rec *Recurrence
 		lastDayPrev := time.Date(y, m+1, 0, 0, 0, 0, 0, loc).Day()
 		if refDay > lastDayPrev {
 			candidate = time.Date(y, m, lastDayPrev,
-				rec.StartTime.Hour(), rec.StartTime.Minute(), rec.StartTime.Second(), rec.StartTime.Nanosecond(),
+				startTime.Hour(), startTime.Minute(), startTime.Second(), startTime.Nanosecond(),
 				loc,
 			)
 		} else {
 			candidate = time.Date(y, m, refDay,
-				rec.StartTime.Hour(), rec.StartTime.Minute(), rec.StartTime.Second(), rec.StartTime.Nanosecond(),
+				startTime.Hour(), startTime.Minute(), startTime.Second(), startTime.Nanosecond(),
 				loc,
 			)
 		}
 	}
-	return currentTime.Sub(candidate) <= rec.Duration.Duration()
+	return currentTime.Sub(candidate) <= m.Schedule.Recurrence.Duration.Duration()
 }
 
 func (m *PlannedMaintenance) IsUpcoming() bool {
-	loc, err := time.LoadLocation(m.Schedule.Timezone)
-	if err != nil {
-		return false
-	}
-	now := time.Now().In(loc)
+	now := time.Now()
 
-	if !m.Schedule.StartTime.IsZero() && !m.Schedule.EndTime.IsZero() {
-		return now.Before(m.Schedule.StartTime)
+	if m.IsRecurring() {
+		// Note: this would return true even if the maintenance is active.
+		// This isn't an issue right now because the only usage happens after the `IsActive` check.
+		return m.Schedule.EndTime.IsZero() || now.Before(m.Schedule.EndTime)
 	}
-	if m.Schedule.Recurrence != nil {
-		return now.Before(m.Schedule.Recurrence.StartTime)
-	}
-	return false
+
+	// Fixed schedule
+	return now.Before(m.Schedule.StartTime)
 }
 
 func (m *PlannedMaintenance) IsRecurring() bool {
@@ -367,15 +315,16 @@ func (m *PlannedMaintenance) Validate() error {
 		return errors.Newf(errors.TypeInvalidInput, ErrCodeInvalidPlannedMaintenancePayload, "missing timezone in the payload")
 	}
 
-	_, err := time.LoadLocation(m.Schedule.Timezone)
-	if err != nil {
+	if _, err := time.LoadLocation(m.Schedule.Timezone); err != nil {
 		return errors.Newf(errors.TypeInvalidInput, ErrCodeInvalidPlannedMaintenancePayload, "invalid timezone in the payload")
 	}
 
-	if !m.Schedule.StartTime.IsZero() && !m.Schedule.EndTime.IsZero() {
-		if m.Schedule.StartTime.After(m.Schedule.EndTime) {
-			return errors.Newf(errors.TypeInvalidInput, ErrCodeInvalidPlannedMaintenancePayload, "start time cannot be after end time")
-		}
+	if m.Schedule.StartTime.IsZero() {
+		return errors.Newf(errors.TypeInvalidInput, ErrCodeInvalidPlannedMaintenancePayload, "missing start time in the payload")
+	}
+
+	if !m.Schedule.EndTime.IsZero() && m.Schedule.StartTime.After(m.Schedule.EndTime) {
+		return errors.Newf(errors.TypeInvalidInput, ErrCodeInvalidPlannedMaintenancePayload, "start time cannot be after end time")
 	}
 
 	if m.Schedule.Recurrence != nil {
@@ -385,28 +334,31 @@ func (m *PlannedMaintenance) Validate() error {
 		if m.Schedule.Recurrence.Duration.IsZero() {
 			return errors.Newf(errors.TypeInvalidInput, ErrCodeInvalidPlannedMaintenancePayload, "missing duration in the payload")
 		}
-		if m.Schedule.Recurrence.EndTime != nil && m.Schedule.Recurrence.EndTime.Before(m.Schedule.Recurrence.StartTime) {
-			return errors.Newf(errors.TypeInvalidInput, ErrCodeInvalidPlannedMaintenancePayload, "end time cannot be before start time")
+	}
+	if m.Scope != "" {
+		if _, err := expr.Compile(m.Scope, expr.AllowUndefinedVariables(), expr.AsBool()); err != nil {
+			err := errors.Newf(
+				errors.TypeInvalidInput, ErrCodeInvalidPlannedMaintenancePayload,
+				"invalid scope: %s", err.Error(),
+			)
+			return err.WithUrl(scopeDocUrl)
 		}
 	}
 	return nil
 }
 
 func (m PlannedMaintenance) MarshalJSON() ([]byte, error) {
-	now := time.Now().In(time.FixedZone(m.Schedule.Timezone, 0))
 	var status MaintenanceStatus
-	if m.IsActive(now) {
+	if m.IsActive(time.Now()) {
 		status = MaintenanceStatusActive
 	} else if m.IsUpcoming() {
 		status = MaintenanceStatusUpcoming
 	} else {
 		status = MaintenanceStatusExpired
 	}
-	var kind MaintenanceKind
 
-	if !m.Schedule.StartTime.IsZero() && !m.Schedule.EndTime.IsZero() && m.Schedule.EndTime.After(m.Schedule.StartTime) {
-		kind = MaintenanceKindFixed
-	} else {
+	kind := MaintenanceKindFixed
+	if m.Schedule.Recurrence != nil {
 		kind = MaintenanceKindRecurring
 	}
 
@@ -439,26 +391,29 @@ func (m PlannedMaintenance) MarshalJSON() ([]byte, error) {
 	})
 }
 
-func (m *PlannedMaintenanceWithRules) ToPlannedMaintenance() *PlannedMaintenance {
-	ruleIDs := []string{}
-	if m.Rules != nil {
-		for _, storableMaintenanceRule := range m.Rules {
-			ruleIDs = append(ruleIDs, storableMaintenanceRule.RuleID.StringValue())
-		}
+func (m *PlannedMaintenanceWithRules) ToPlannedMaintenance() (*PlannedMaintenance, error) {
+	schedule := &Schedule{}
+	if err := json.Unmarshal([]byte(m.Schedule), &schedule); err != nil {
+		return nil, err
+	}
+
+	ruleIDs := make([]string, 0, len(m.Rules))
+	for _, storableMaintenanceRule := range m.Rules {
+		ruleIDs = append(ruleIDs, storableMaintenanceRule.RuleID.StringValue())
 	}
 
 	return &PlannedMaintenance{
 		ID:          m.ID,
 		Name:        m.Name,
 		Description: m.Description,
-		Schedule:    m.Schedule,
+		Schedule:    schedule,
 		RuleIDs:     ruleIDs,
 		Scope:       m.Scope,
 		CreatedAt:   m.CreatedAt,
 		UpdatedAt:   m.UpdatedAt,
 		CreatedBy:   m.CreatedBy,
 		UpdatedBy:   m.UpdatedBy,
-	}
+	}, nil
 }
 
 type ListPlannedMaintenanceParams struct {

pkg/types/alertmanagertypes/maintenance_test.go

@@ -8,11 +8,6 @@ import (
 	"github.com/prometheus/common/model"
 )
 
-// Helper function to create a time pointer.
-func timePtr(t time.Time) *time.Time {
-	return &t
-}
-
 func TestShouldSkipMaintenance(t *testing.T) {
 	cases := []struct {
 		name        string
@@ -24,9 +19,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "only-on-saturday",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone: "Europe/London",
+					Timezone:  "Europe/London",
+					StartTime: time.Date(2025, 3, 1, 0, 0, 0, 0, time.UTC),
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2025, 3, 1, 0, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("24h"),
 						RepeatType: RepeatTypeWeekly,
 						RepeatOn:   []RepeatOn{RepeatOnMonday, RepeatOnTuesday, RepeatOnWednesday, RepeatOnThursday, RepeatOnFriday, RepeatOnSunday},
@@ -41,10 +36,10 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "weekly-across-midnight-previous-day",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone: "UTC",
+					Timezone:  "UTC",
+					StartTime: time.Date(2024, 4, 1, 22, 0, 0, 0, time.UTC), // Monday 22:00
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 4, 1, 22, 0, 0, 0, time.UTC), // Monday 22:00
-						Duration:   valuer.MustParseTextDuration("4h"),           // Until Tuesday 02:00
+						Duration:   valuer.MustParseTextDuration("4h"), // Until Tuesday 02:00
 						RepeatType: RepeatTypeWeekly,
 						RepeatOn:   []RepeatOn{RepeatOnMonday}, // Only Monday
 					},
@@ -58,10 +53,10 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "weekly-across-midnight-previous-day",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone: "UTC",
+					Timezone:  "UTC",
+					StartTime: time.Date(2024, 4, 1, 22, 0, 0, 0, time.UTC), // Monday 22:00
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 4, 1, 22, 0, 0, 0, time.UTC), // Monday 22:00
-						Duration:   valuer.MustParseTextDuration("4h"),           // Until Tuesday 02:00
+						Duration:   valuer.MustParseTextDuration("4h"), // Until Tuesday 02:00
 						RepeatType: RepeatTypeWeekly,
 						RepeatOn:   []RepeatOn{RepeatOnMonday}, // Only Monday
 					},
@@ -75,10 +70,10 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "weekly-across-midnight-previous-day",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone: "UTC",
+					Timezone:  "UTC",
+					StartTime: time.Date(2024, 4, 1, 22, 0, 0, 0, time.UTC), // Monday 22:00
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 4, 1, 22, 0, 0, 0, time.UTC), // Monday 22:00
-						Duration:   valuer.MustParseTextDuration("52h"),          // Until Thursday 02:00
+						Duration:   valuer.MustParseTextDuration("52h"), // Until Thursday 02:00
 						RepeatType: RepeatTypeWeekly,
 						RepeatOn:   []RepeatOn{RepeatOnMonday}, // Only Monday
 					},
@@ -92,10 +87,10 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "weekly-across-midnight-previous-day-not-in-repeaton",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone: "UTC",
+					Timezone:  "UTC",
+					StartTime: time.Date(2024, 4, 2, 22, 0, 0, 0, time.UTC), // Tuesday 22:00
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 4, 2, 22, 0, 0, 0, time.UTC), // Tuesday 22:00
-						Duration:   valuer.MustParseTextDuration("4h"),           // Until Wednesday 02:00
+						Duration:   valuer.MustParseTextDuration("4h"), // Until Wednesday 02:00
 						RepeatType: RepeatTypeWeekly,
 						RepeatOn:   []RepeatOn{RepeatOnTuesday}, // Only Tuesday
 					},
@@ -109,10 +104,10 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "daily-maintenance-across-midnight",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone: "UTC",
+					Timezone:  "UTC",
+					StartTime: time.Date(2024, 1, 1, 23, 0, 0, 0, time.UTC), // 23:00
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 1, 1, 23, 0, 0, 0, time.UTC), // 23:00
-						Duration:   valuer.MustParseTextDuration("2h"),           // Until 01:00 next day
+						Duration:   valuer.MustParseTextDuration("2h"), // Until 01:00 next day
 						RepeatType: RepeatTypeDaily,
 					},
 				},
@@ -125,9 +120,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "at-start-time-boundary",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone: "UTC",
+					Timezone:  "UTC",
+					StartTime: time.Date(2024, 1, 1, 12, 0, 0, 0, time.UTC),
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 1, 1, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeDaily,
 					},
@@ -141,9 +136,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "at-end-time-boundary",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone: "UTC",
+					Timezone:  "UTC",
+					StartTime: time.Date(2024, 1, 1, 12, 0, 0, 0, time.UTC),
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 1, 1, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeDaily,
 					},
@@ -157,9 +152,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "monthly-multi-day-duration",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone: "UTC",
+					Timezone:  "UTC",
+					StartTime: time.Date(2024, 1, 28, 12, 0, 0, 0, time.UTC),
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 1, 28, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("72h"), // 3 days
 						RepeatType: RepeatTypeMonthly,
 					},
@@ -173,9 +168,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "weekly-multi-day-duration",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone: "UTC",
+					Timezone:  "UTC",
+					StartTime: time.Date(2024, 1, 28, 12, 0, 0, 0, time.UTC),
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 1, 28, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("72h"), // 3 days
 						RepeatType: RepeatTypeWeekly,
 						RepeatOn:   []RepeatOn{RepeatOnSunday},
@@ -190,9 +185,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "monthly-crosses-to-next-month",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone: "UTC",
+					Timezone:  "UTC",
+					StartTime: time.Date(2024, 1, 30, 12, 0, 0, 0, time.UTC),
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 1, 30, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("48h"), // 2 days, crosses to Feb 1
 						RepeatType: RepeatTypeMonthly,
 					},
@@ -206,9 +201,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "timezone-offset-test",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone: "America/New_York", // UTC-5 or UTC-4 depending on DST
+					Timezone:  "America/New_York", // UTC-5 or UTC-4 depending on DST
+					StartTime: time.Date(2024, 1, 1, 22, 0, 0, 0, time.FixedZone("America/New_York", -5*3600)),
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 1, 1, 22, 0, 0, 0, time.FixedZone("America/New_York", -5*3600)),
 						Duration:   valuer.MustParseTextDuration("4h"),
 						RepeatType: RepeatTypeDaily,
 					},
@@ -222,9 +217,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "daily-maintenance-time-outside-window",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone: "UTC",
+					Timezone:  "UTC",
+					StartTime: time.Date(2024, 1, 1, 12, 0, 0, 0, time.UTC),
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 1, 1, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeDaily,
 					},
@@ -238,10 +233,10 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "recurring-maintenance-with-past-end-date",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone: "UTC",
+					Timezone:  "UTC",
+					StartTime: time.Date(2024, 1, 1, 12, 0, 0, 0, time.UTC),
+					EndTime:   time.Date(2024, 1, 10, 12, 0, 0, 0, time.UTC),
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 1, 1, 12, 0, 0, 0, time.UTC),
-						EndTime:    timePtr(time.Date(2024, 1, 10, 12, 0, 0, 0, time.UTC)),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeDaily,
 					},
@@ -255,10 +250,10 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "monthly-maintenance-spans-month-end",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone: "UTC",
+					Timezone:  "UTC",
+					StartTime: time.Date(2024, 3, 31, 22, 0, 0, 0, time.UTC), // March 31, 22:00
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 3, 31, 22, 0, 0, 0, time.UTC), // March 31, 22:00
-						Duration:   valuer.MustParseTextDuration("6h"),            // Until April 1, 04:00
+						Duration:   valuer.MustParseTextDuration("6h"), // Until April 1, 04:00
 						RepeatType: RepeatTypeMonthly,
 					},
 				},
@@ -271,9 +266,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "weekly-empty-repeaton",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone: "UTC",
+					Timezone:  "UTC",
+					StartTime: time.Date(2024, 4, 1, 12, 0, 0, 0, time.UTC),
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 4, 1, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeWeekly,
 						RepeatOn:   []RepeatOn{}, // Empty - should apply to all days
@@ -288,9 +283,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "monthly-maintenance-february-fewer-days",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone: "UTC",
+					Timezone:  "UTC",
+					StartTime: time.Date(2024, 1, 31, 12, 0, 0, 0, time.UTC), // January 31st
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 1, 31, 12, 0, 0, 0, time.UTC), // January 31st
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeMonthly,
 					},
@@ -303,9 +298,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "daily-maintenance-crosses-midnight",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone: "UTC",
+					Timezone:  "UTC",
+					StartTime: time.Date(2024, 1, 1, 23, 30, 0, 0, time.UTC),
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 1, 1, 23, 30, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("1h"), // Crosses to 00:30 next day
 						RepeatType: RepeatTypeDaily,
 					},
@@ -318,9 +313,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "monthly-maintenance-crosses-month-end",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone: "UTC",
+					Timezone:  "UTC",
+					StartTime: time.Date(2024, 1, 31, 12, 0, 0, 0, time.UTC), // January 31st
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 1, 31, 12, 0, 0, 0, time.UTC), // January 31st
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeMonthly,
 					},
@@ -333,9 +328,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "monthly-maintenance-crosses-month-end-and-duration-is-2-days",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone: "UTC",
+					Timezone:  "UTC",
+					StartTime: time.Date(2024, 1, 30, 12, 0, 0, 0, time.UTC),
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 1, 30, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("48h"), // 2 days duration
 						RepeatType: RepeatTypeMonthly,
 					},
@@ -348,10 +343,10 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "weekly-maintenance-crosses-midnight",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone: "UTC",
+					Timezone:  "UTC",
+					StartTime: time.Date(2024, 4, 1, 23, 0, 0, 0, time.UTC), // Monday 23:00
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 4, 1, 23, 0, 0, 0, time.UTC), // Monday 23:00
-						Duration:   valuer.MustParseTextDuration("2h"),           // Until Tuesday 01:00
+						Duration:   valuer.MustParseTextDuration("2h"), // Until Tuesday 01:00
 						RepeatType: RepeatTypeWeekly,
 						RepeatOn:   []RepeatOn{RepeatOnMonday}, // Only Monday
 					},
@@ -364,9 +359,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "monthly-maintenance-crosses-month-end-and-duration-is-2-days",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone: "UTC",
+					Timezone:  "UTC",
+					StartTime: time.Date(2024, 1, 31, 12, 0, 0, 0, time.UTC), // January 31st
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 1, 31, 12, 0, 0, 0, time.UTC), // January 31st
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeMonthly,
 					},
@@ -379,9 +374,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "daily-maintenance-crosses-midnight",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone: "UTC",
+					Timezone:  "UTC",
+					StartTime: time.Date(2024, 1, 1, 22, 0, 0, 0, time.UTC),
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 1, 1, 22, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("4h"), // Until 02:00 next day
 						RepeatType: RepeatTypeDaily,
 					},
@@ -394,9 +389,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "monthly-maintenance-crosses-month-end-and-duration-is-2-hours",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone: "UTC",
+					Timezone:  "UTC",
+					StartTime: time.Date(2024, 1, 31, 12, 0, 0, 0, time.UTC),
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 1, 31, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeMonthly,
 					},
@@ -445,9 +440,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "recurring maintenance, repeat sunday, saturday, weekly for 24 hours, in Us/Eastern timezone",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone: "US/Eastern",
+					Timezone:  "US/Eastern",
+					StartTime: time.Date(2025, 3, 29, 20, 0, 0, 0, time.FixedZone("US/Eastern", -4*3600)),
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2025, 3, 29, 20, 0, 0, 0, time.FixedZone("US/Eastern", -4*3600)),
 						Duration:   valuer.MustParseTextDuration("24h"),
 						RepeatType: RepeatTypeWeekly,
 						RepeatOn:   []RepeatOn{RepeatOnSunday, RepeatOnSaturday},
@@ -458,57 +453,57 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			skip: true,
 		},
 		{
-			name: "recurring maintenance, repeat daily from 12:00 to 14:00",
+			name: "recurring maintenance, repeat daily from 12:00 to 14:00, ts < start",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone: "UTC",
+					Timezone:  "UTC",
+					StartTime: time.Date(2024, 1, 1, 12, 0, 0, 0, time.UTC),
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 1, 1, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeDaily,
 					},
 				},
 			},
-			ts:   time.Date(2024, 1, 1, 12, 10, 0, 0, time.UTC),
+			ts:   time.Date(2024, 1, 10, 11, 0, 0, 0, time.UTC),
+			skip: false,
+		},
+		{
+			name: "recurring maintenance, repeat daily from 12:00 to 14:00, start <= ts <= end",
+			maintenance: &PlannedMaintenance{
+				Schedule: &Schedule{
+					Timezone:  "UTC",
+					StartTime: time.Date(2024, 1, 1, 12, 0, 0, 0, time.UTC),
+					Recurrence: &Recurrence{
+						Duration:   valuer.MustParseTextDuration("2h"),
+						RepeatType: RepeatTypeDaily,
+					},
+				},
+			},
+			ts:   time.Date(2024, 1, 10, 13, 0, 0, 0, time.UTC),
 			skip: true,
 		},
 		{
-			name: "recurring maintenance, repeat daily from 12:00 to 14:00",
+			name: "recurring maintenance, repeat daily from 12:00 to 14:00, start > end",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone: "UTC",
+					Timezone:  "UTC",
+					StartTime: time.Date(2024, 1, 1, 12, 0, 0, 0, time.UTC),
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 1, 1, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeDaily,
 					},
 				},
 			},
-			ts:   time.Date(2024, 1, 1, 14, 0, 0, 0, time.UTC),
-			skip: true,
-		},
-		{
-			name: "recurring maintenance, repeat daily from 12:00 to 14:00",
-			maintenance: &PlannedMaintenance{
-				Schedule: &Schedule{
-					Timezone: "UTC",
-					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 1, 1, 12, 0, 0, 0, time.UTC),
-						Duration:   valuer.MustParseTextDuration("2h"),
-						RepeatType: RepeatTypeDaily,
-					},
-				},
-			},
-			ts:   time.Date(2024, 4, 1, 12, 10, 0, 0, time.UTC),
-			skip: true,
+			ts:   time.Date(2024, 1, 10, 15, 0, 0, 0, time.UTC),
+			skip: false,
 		},
 		{
 			name: "recurring maintenance, repeat weekly on monday from 12:00 to 14:00",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone: "UTC",
+					Timezone:  "UTC",
+					StartTime: time.Date(2024, 4, 1, 12, 0, 0, 0, time.UTC),
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 4, 1, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeWeekly,
 						RepeatOn:   []RepeatOn{RepeatOnMonday},
@@ -522,9 +517,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "recurring maintenance, repeat weekly on monday from 12:00 to 14:00",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone: "UTC",
+					Timezone:  "UTC",
+					StartTime: time.Date(2024, 4, 1, 12, 0, 0, 0, time.UTC),
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 4, 1, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeWeekly,
 						RepeatOn:   []RepeatOn{RepeatOnMonday},
@@ -538,9 +533,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "recurring maintenance, repeat weekly on monday from 12:00 to 14:00",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone: "UTC",
+					Timezone:  "UTC",
+					StartTime: time.Date(2024, 4, 1, 12, 0, 0, 0, time.UTC),
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 4, 1, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeWeekly,
 						RepeatOn:   []RepeatOn{RepeatOnMonday},
@@ -554,9 +549,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "recurring maintenance, repeat weekly on monday from 12:00 to 14:00",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone: "UTC",
+					Timezone:  "UTC",
+					StartTime: time.Date(2024, 4, 1, 12, 0, 0, 0, time.UTC),
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 4, 1, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeWeekly,
 						RepeatOn:   []RepeatOn{RepeatOnMonday},
@@ -570,9 +565,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "recurring maintenance, repeat weekly on monday from 12:00 to 14:00",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone: "UTC",
+					Timezone:  "UTC",
+					StartTime: time.Date(2024, 4, 1, 12, 0, 0, 0, time.UTC),
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 4, 1, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeWeekly,
 						RepeatOn:   []RepeatOn{RepeatOnMonday},
@@ -586,9 +581,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "recurring maintenance, repeat monthly on 4th from 12:00 to 14:00",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone: "UTC",
+					Timezone:  "UTC",
+					StartTime: time.Date(2024, 4, 4, 12, 0, 0, 0, time.UTC),
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 4, 4, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeMonthly,
 					},
@@ -601,9 +596,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "recurring maintenance, repeat monthly on 4th from 12:00 to 14:00",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone: "UTC",
+					Timezone:  "UTC",
+					StartTime: time.Date(2024, 4, 4, 12, 0, 0, 0, time.UTC),
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 4, 4, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeMonthly,
 					},
@@ -616,9 +611,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "recurring maintenance, repeat monthly on 4th from 12:00 to 14:00",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone: "UTC",
+					Timezone:  "UTC",
+					StartTime: time.Date(2024, 4, 4, 12, 0, 0, 0, time.UTC),
 					Recurrence: &Recurrence{
-						StartTime:  time.Date(2024, 4, 4, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeMonthly,
 					},
@@ -627,45 +622,6 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			ts:   time.Date(2024, 5, 4, 12, 10, 0, 0, time.UTC),
 			skip: true,
 		},
-		// The recurrence should govern, when set. Not the fixed range.
-		{
-			name: "recurring-daily-with-fixed-times-outside-daily-window",
-			maintenance: &PlannedMaintenance{
-				Schedule: &Schedule{
-					Timezone: "UTC",
-					// These fixed fields should be ignored when Recurrence is set.
-					StartTime: time.Date(2026, 4, 1, 14, 0, 0, 0, time.UTC),
-					EndTime:   time.Date(2026, 4, 30, 18, 0, 0, 0, time.UTC),
-					Recurrence: &Recurrence{
-						StartTime:  time.Date(2026, 4, 1, 14, 0, 0, 0, time.UTC), // daily at 14:00
-						Duration:   valuer.MustParseTextDuration("2h"),           // until 16:00
-						RepeatType: RepeatTypeDaily,
-					},
-				},
-			},
-			// 2026-04-15 11:00 is inside the fixed range but outside the daily 14:00-16:00 window.
-			ts:   time.Date(2026, 4, 15, 11, 0, 0, 0, time.UTC),
-			skip: false,
-		},
-		{
-			name: "recurring-daily-with-fixed-times-inside-daily-window",
-			maintenance: &PlannedMaintenance{
-				Schedule: &Schedule{
-					Timezone:  "UTC",
-					StartTime: time.Date(2026, 4, 1, 14, 0, 0, 0, time.UTC),
-					EndTime:   time.Date(2026, 4, 30, 18, 0, 0, 0, time.UTC),
-					Recurrence: &Recurrence{
-						StartTime:  time.Date(2026, 4, 1, 14, 0, 0, 0, time.UTC),
-						EndTime:    timePtr(time.Date(2026, 4, 30, 18, 0, 0, 0, time.UTC)),
-						Duration:   valuer.MustParseTextDuration("2h"),
-						RepeatType: RepeatTypeDaily,
-					},
-				},
-			},
-			// 15:00 is inside the daily 14:00-16:00 window. Should skip.
-			ts:   time.Date(2026, 4, 15, 15, 0, 0, 0, time.UTC),
-			skip: true,
-		},
 	}
 
 	for idx, c := range cases {
@@ -679,13 +635,211 @@ func TestShouldSkipMaintenance(t *testing.T) {
 	}
 }
 
+func TestIsActiveFixedSchedule(t *testing.T) {
+	start := time.Date(2024, 1, 1, 12, 0, 0, 0, time.UTC)
+	end := time.Date(2024, 1, 10, 12, 0, 0, 0, time.UTC)
+
+	cases := []struct {
+		name      string
+		startTime time.Time
+		endTime   time.Time
+		now       time.Time
+		active    bool
+	}{
+		{
+			name:      "no end, t < start",
+			startTime: start,
+			now:       start.Add(-time.Hour),
+			active:    false,
+		},
+		{
+			name:      "no end, start == t",
+			startTime: start,
+			now:       start,
+			active:    true,
+		},
+		{
+			// A fixed schedule with no end time stays active indefinitely.
+			name:      "no end, start << t",
+			startTime: start,
+			now:       start.AddDate(10, 0, 0),
+			active:    true,
+		},
+		{
+			name:      "with end, start < t < end",
+			startTime: start,
+			endTime:   end,
+			now:       start.Add(24 * time.Hour),
+			active:    true,
+		},
+		{
+			name:      "with end, t == end",
+			startTime: start,
+			endTime:   end,
+			now:       end,
+			active:    true,
+		},
+		{
+			name:      "with end, end < t",
+			startTime: start,
+			endTime:   end,
+			now:       end.Add(time.Hour),
+			active:    false,
+		},
+	}
+
+	for _, c := range cases {
+		t.Run(c.name, func(t *testing.T) {
+			m := &PlannedMaintenance{
+				Schedule: &Schedule{
+					Timezone:  "UTC",
+					StartTime: c.startTime,
+					EndTime:   c.endTime,
+				},
+			}
+			if got := m.IsActive(c.now); got != c.active {
+				t.Errorf("IsActive() = %v, want %v", got, c.active)
+			}
+		})
+	}
+}
+
+func TestIsActiveRecurringSchedule(t *testing.T) {
+	// Daily window 12:00-14:00, starting 2024-01-01 (a Monday).
+	start := time.Date(2024, 1, 1, 12, 0, 0, 0, time.UTC)
+
+	daily := &Recurrence{
+		Duration:   valuer.MustParseTextDuration("2h"),
+		RepeatType: RepeatTypeDaily,
+	}
+
+	cases := []struct {
+		name       string
+		startTime  time.Time
+		endTime    time.Time
+		recurrence *Recurrence
+		now        time.Time
+		active     bool
+	}{
+		{
+			// The recurrence has not begun yet, even though the time-of-day matches.
+			name:       "daily: t < recurrence start",
+			startTime:  start,
+			recurrence: daily,
+			now:        time.Date(2023, 12, 31, 13, 0, 0, 0, time.UTC),
+			active:     false,
+		},
+		{
+			name:       "daily: no end, within window",
+			startTime:  start,
+			recurrence: daily,
+			now:        time.Date(2024, 6, 15, 13, 0, 0, 0, time.UTC),
+			active:     true,
+		},
+		{
+			name:       "daily: no end, outside window",
+			startTime:  start,
+			recurrence: daily,
+			now:        time.Date(2024, 6, 15, 15, 0, 0, 0, time.UTC),
+			active:     false,
+		},
+		{
+			name:       "daily: at window start boundary",
+			startTime:  start,
+			recurrence: daily,
+			now:        time.Date(2024, 6, 15, 12, 0, 0, 0, time.UTC),
+			active:     true,
+		},
+		{
+			name:       "daily: at window end boundary",
+			startTime:  start,
+			recurrence: daily,
+			now:        time.Date(2024, 6, 15, 14, 0, 0, 0, time.UTC),
+			active:     true,
+		},
+		{
+			// Past the recurrence end, the time-of-day match no longer applies.
+			name:       "daily: t > recurrence end",
+			startTime:  start,
+			endTime:    time.Date(2024, 1, 10, 12, 0, 0, 0, time.UTC),
+			recurrence: daily,
+			now:        time.Date(2024, 1, 15, 13, 0, 0, 0, time.UTC),
+			active:     false,
+		},
+		{
+			name:       "daily: before recurrence end, within window",
+			startTime:  start,
+			endTime:    time.Date(2024, 1, 10, 23, 0, 0, 0, time.UTC),
+			recurrence: daily,
+			now:        time.Date(2024, 1, 10, 13, 0, 0, 0, time.UTC),
+			active:     true,
+		},
+		{
+			name:      "weekly: on allowed day, within window",
+			startTime: start, // Monday
+			recurrence: &Recurrence{
+				Duration:   valuer.MustParseTextDuration("2h"),
+				RepeatType: RepeatTypeWeekly,
+				RepeatOn:   []RepeatOn{RepeatOnMonday},
+			},
+			now:    time.Date(2024, 4, 15, 13, 0, 0, 0, time.UTC), // a Monday
+			active: true,
+		},
+		{
+			name:      "weekly: on non-allowed day",
+			startTime: start,
+			recurrence: &Recurrence{
+				Duration:   valuer.MustParseTextDuration("2h"),
+				RepeatType: RepeatTypeWeekly,
+				RepeatOn:   []RepeatOn{RepeatOnMonday},
+			},
+			now:    time.Date(2024, 4, 16, 13, 0, 0, 0, time.UTC), // a Tuesday
+			active: false,
+		},
+		{
+			name:      "monthly: on day-of-month, within window",
+			startTime: time.Date(2024, 1, 4, 12, 0, 0, 0, time.UTC),
+			recurrence: &Recurrence{
+				Duration:   valuer.MustParseTextDuration("2h"),
+				RepeatType: RepeatTypeMonthly,
+			},
+			now:    time.Date(2024, 5, 4, 13, 0, 0, 0, time.UTC),
+			active: true,
+		},
+		{
+			name:      "monthly: on different day-of-month",
+			startTime: time.Date(2024, 1, 4, 12, 0, 0, 0, time.UTC),
+			recurrence: &Recurrence{
+				Duration:   valuer.MustParseTextDuration("2h"),
+				RepeatType: RepeatTypeMonthly,
+			},
+			now:    time.Date(2024, 5, 5, 13, 0, 0, 0, time.UTC),
+			active: false,
+		},
+	}
+
+	for _, c := range cases {
+		t.Run(c.name, func(t *testing.T) {
+			m := &PlannedMaintenance{
+				Schedule: &Schedule{
+					Timezone:   "UTC",
+					StartTime:  c.startTime,
+					EndTime:    c.endTime,
+					Recurrence: c.recurrence,
+				},
+			}
+			if got := m.IsActive(c.now); got != c.active {
+				t.Errorf("IsActive() = %v, want %v", got, c.active)
+			}
+		})
+	}
+}
+
 func TestShouldSkip_Scope(t *testing.T) {
-	activeSchedule := func() *Schedule {
-		return &Schedule{
-			Timezone:  "UTC",
-			StartTime: time.Now().UTC().Add(-time.Hour),
-			EndTime:   time.Now().UTC().Add(time.Hour),
-		}
+	activeSchedule := &Schedule{
+		Timezone:  "UTC",
+		StartTime: time.Now().UTC().Add(-time.Hour),
+		EndTime:   time.Now().UTC().Add(time.Hour),
 	}
 	now := time.Now().UTC()
 
@@ -699,7 +853,7 @@ func TestShouldSkip_Scope(t *testing.T) {
 	}{
 		{
 			name:        "empty scope - no label filtering applied",
-			maintenance: &PlannedMaintenance{Schedule: activeSchedule()},
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule},
 			ruleID:      "rule-1",
 			ts:          now,
 			lset:        model.LabelSet{"env": "production"},
@@ -707,7 +861,7 @@ func TestShouldSkip_Scope(t *testing.T) {
 		},
 		{
 			name:        "scope matches labels",
-			maintenance: &PlannedMaintenance{Schedule: activeSchedule(), Scope: `env = "production"`},
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule, Scope: `env = "production"`},
 			ruleID:      "rule-1",
 			ts:          now,
 			lset:        model.LabelSet{"env": "production"},
@@ -715,7 +869,7 @@ func TestShouldSkip_Scope(t *testing.T) {
 		},
 		{
 			name:        "scope does not match labels",
-			maintenance: &PlannedMaintenance{Schedule: activeSchedule(), Scope: `env = "production"`},
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule, Scope: `env = "production"`},
 			ruleID:      "rule-1",
 			ts:          now,
 			lset:        model.LabelSet{"env": "staging"},
@@ -723,7 +877,7 @@ func TestShouldSkip_Scope(t *testing.T) {
 		},
 		{
 			name:        "AND expression - both conditions match",
-			maintenance: &PlannedMaintenance{Schedule: activeSchedule(), Scope: `env = "production" AND service = "api"`},
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule, Scope: `env = "production" AND service = "api"`},
 			ruleID:      "rule-1",
 			ts:          now,
 			lset:        model.LabelSet{"env": "production", "service": "api"},
@@ -731,7 +885,7 @@ func TestShouldSkip_Scope(t *testing.T) {
 		},
 		{
 			name:        "AND expression - one condition does not match",
-			maintenance: &PlannedMaintenance{Schedule: activeSchedule(), Scope: `env = "production" AND service = "api"`},
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule, Scope: `env = "production" AND service = "api"`},
 			ruleID:      "rule-1",
 			ts:          now,
 			lset:        model.LabelSet{"env": "production", "service": "worker"},
@@ -739,7 +893,7 @@ func TestShouldSkip_Scope(t *testing.T) {
 		},
 		{
 			name:        "OR expression - first alternative matches",
-			maintenance: &PlannedMaintenance{Schedule: activeSchedule(), Scope: `env = "production" OR env = "staging"`},
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule, Scope: `env = "production" OR env = "staging"`},
 			ruleID:      "rule-1",
 			ts:          now,
 			lset:        model.LabelSet{"env": "production"},
@@ -747,7 +901,7 @@ func TestShouldSkip_Scope(t *testing.T) {
 		},
 		{
 			name:        "OR expression - second alternative matches",
-			maintenance: &PlannedMaintenance{Schedule: activeSchedule(), Scope: `env = "production" OR env = "staging"`},
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule, Scope: `env = "production" OR env = "staging"`},
 			ruleID:      "rule-1",
 			ts:          now,
 			lset:        model.LabelSet{"env": "staging"},
@@ -755,7 +909,7 @@ func TestShouldSkip_Scope(t *testing.T) {
 		},
 		{
 			name:        "OR expression - neither alternative matches",
-			maintenance: &PlannedMaintenance{Schedule: activeSchedule(), Scope: `env = "production" OR env = "staging"`},
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule, Scope: `env = "production" OR env = "staging"`},
 			ruleID:      "rule-1",
 			ts:          now,
 			lset:        model.LabelSet{"env": "development"},
@@ -763,7 +917,7 @@ func TestShouldSkip_Scope(t *testing.T) {
 		},
 		{
 			name:        "scope references label absent from lset",
-			maintenance: &PlannedMaintenance{Schedule: activeSchedule(), Scope: `env = "production"`},
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule, Scope: `env = "production"`},
 			ruleID:      "rule-1",
 			ts:          now,
 			lset:        model.LabelSet{"service": "api"},
@@ -771,7 +925,7 @@ func TestShouldSkip_Scope(t *testing.T) {
 		},
 		{
 			name:        "in expression - value is in list",
-			maintenance: &PlannedMaintenance{Schedule: activeSchedule(), Scope: `env in ["production", "staging"]`},
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule, Scope: `env in ["production", "staging"]`},
 			ruleID:      "rule-1",
 			ts:          now,
 			lset:        model.LabelSet{"env": "staging"},
@@ -779,7 +933,7 @@ func TestShouldSkip_Scope(t *testing.T) {
 		},
 		{
 			name:        "in expression - value not in list",
-			maintenance: &PlannedMaintenance{Schedule: activeSchedule(), Scope: `env in ["production", "staging"]`},
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule, Scope: `env in ["production", "staging"]`},
 			ruleID:      "rule-1",
 			ts:          now,
 			lset:        model.LabelSet{"env": "development"},
@@ -787,7 +941,7 @@ func TestShouldSkip_Scope(t *testing.T) {
 		},
 		{
 			name:        "ruleID in list and scope matches - should skip",
-			maintenance: &PlannedMaintenance{Schedule: activeSchedule(), RuleIDs: []string{"rule-1", "rule-2"}, Scope: `env = "production"`},
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule, RuleIDs: []string{"rule-1", "rule-2"}, Scope: `env = "production"`},
 			ruleID:      "rule-1",
 			ts:          now,
 			lset:        model.LabelSet{"env": "production"},
@@ -795,7 +949,7 @@ func TestShouldSkip_Scope(t *testing.T) {
 		},
 		{
 			name:        "ruleID not in list and scope matches - ruleID gate prevents skip",
-			maintenance: &PlannedMaintenance{Schedule: activeSchedule(), RuleIDs: []string{"rule-2"}, Scope: `env = "production"`},
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule, RuleIDs: []string{"rule-2"}, Scope: `env = "production"`},
 			ruleID:      "rule-1",
 			ts:          now,
 			lset:        model.LabelSet{"env": "production"},
@@ -803,7 +957,7 @@ func TestShouldSkip_Scope(t *testing.T) {
 		},
 		{
 			name:        "ruleID in list but scope does not match - should not skip",
-			maintenance: &PlannedMaintenance{Schedule: activeSchedule(), RuleIDs: []string{"rule-1"}, Scope: `env = "production"`},
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule, RuleIDs: []string{"rule-1"}, Scope: `env = "production"`},
 			ruleID:      "rule-1",
 			ts:          now,
 			lset:        model.LabelSet{"env": "staging"},

pkg/types/alertmanagertypes/recurrence.go

@@ -66,9 +66,9 @@ var RepeatOnAllMap = map[RepeatOn]time.Weekday{
 	RepeatOnSaturday:  time.Saturday,
 }
 
+// Recurrence describes the repeat pattern of a planned maintenance.
+// The window bounds (start/end) live on the enclosing Schedule.
 type Recurrence struct {
-	StartTime  time.Time           `json:"startTime" required:"true"`
-	EndTime    *time.Time          `json:"endTime,omitempty"`
 	Duration   valuer.TextDuration `json:"duration" required:"true"`
 	RepeatType RepeatType          `json:"repeatType" required:"true"`
 	RepeatOn   []RepeatOn          `json:"repeatOn"`

pkg/types/alertmanagertypes/schedule.go

@@ -11,7 +11,7 @@ import (
 
 type Schedule struct {
 	Timezone   string      `json:"timezone" required:"true"`
-	StartTime  time.Time   `json:"startTime,omitempty"`
+	StartTime  time.Time   `json:"startTime" required:"true"`
 	EndTime    time.Time   `json:"endTime,omitzero"`
 	Recurrence *Recurrence `json:"recurrence"`
 }
@@ -39,29 +39,12 @@ func (s Schedule) MarshalJSON() ([]byte, error) {
 		return nil, err
 	}
 
-	var startTime, endTime time.Time
-	if !s.StartTime.IsZero() {
-		startTime = time.Date(s.StartTime.Year(), s.StartTime.Month(), s.StartTime.Day(), s.StartTime.Hour(), s.StartTime.Minute(), s.StartTime.Second(), s.StartTime.Nanosecond(), loc)
-	}
+	// Marshal times in the selected timezone.
+	// This ensures that recurring events are handled correctly when DST is involved.
+	startTime := s.StartTime.In(loc)
+	var endTime time.Time
 	if !s.EndTime.IsZero() {
-		endTime = time.Date(s.EndTime.Year(), s.EndTime.Month(), s.EndTime.Day(), s.EndTime.Hour(), s.EndTime.Minute(), s.EndTime.Second(), s.EndTime.Nanosecond(), loc)
-	}
-
-	var recurrence *Recurrence
-	if s.Recurrence != nil {
-		recStartTime := time.Date(s.Recurrence.StartTime.Year(), s.Recurrence.StartTime.Month(), s.Recurrence.StartTime.Day(), s.Recurrence.StartTime.Hour(), s.Recurrence.StartTime.Minute(), s.Recurrence.StartTime.Second(), s.Recurrence.StartTime.Nanosecond(), loc)
-		var recEndTime *time.Time
-		if s.Recurrence.EndTime != nil {
-			end := time.Date(s.Recurrence.EndTime.Year(), s.Recurrence.EndTime.Month(), s.Recurrence.EndTime.Day(), s.Recurrence.EndTime.Hour(), s.Recurrence.EndTime.Minute(), s.Recurrence.EndTime.Second(), s.Recurrence.EndTime.Nanosecond(), loc)
-			recEndTime = &end
-		}
-		recurrence = &Recurrence{
-			StartTime:  recStartTime,
-			EndTime:    recEndTime,
-			Duration:   s.Recurrence.Duration,
-			RepeatType: s.Recurrence.RepeatType,
-			RepeatOn:   s.Recurrence.RepeatOn,
-		}
+		endTime = s.EndTime.In(loc)
 	}
 
 	return json.Marshal(&struct {
@@ -73,7 +56,7 @@ func (s Schedule) MarshalJSON() ([]byte, error) {
 		Timezone:   s.Timezone,
 		StartTime:  startTime,
 		EndTime:    endTime,
-		Recurrence: recurrence,
+		Recurrence: s.Recurrence,
 	})
 }
 
@@ -93,14 +76,11 @@ func (s *Schedule) UnmarshalJSON(data []byte) error {
 		return err
 	}
 
-	var startTime time.Time
-	if aux.StartTime != "" {
-		startTime, err = time.Parse(time.RFC3339, aux.StartTime)
-		if err != nil {
-			return err
-		}
-		s.StartTime = time.Date(startTime.Year(), startTime.Month(), startTime.Day(), startTime.Hour(), startTime.Minute(), startTime.Second(), startTime.Nanosecond(), loc)
+	startTime, err := time.Parse(time.RFC3339, aux.StartTime)
+	if err != nil {
+		return err
 	}
+	startTime = startTime.In(loc)
 
 	var endTime time.Time
 	if aux.EndTime != "" {
@@ -108,35 +88,14 @@ func (s *Schedule) UnmarshalJSON(data []byte) error {
 		if err != nil {
 			return err
 		}
-		// TODO(jatinderjit): if endTime.IsZero() then we should not set the endTime
-		s.EndTime = time.Date(endTime.Year(), endTime.Month(), endTime.Day(), endTime.Hour(), endTime.Minute(), endTime.Second(), endTime.Nanosecond(), loc)
+		if !endTime.IsZero() {
+			endTime = endTime.In(loc)
+		}
 	}
 
 	s.Timezone = aux.Timezone
-
-	if aux.Recurrence != nil {
-		recStartTime, err := time.Parse(time.RFC3339, aux.Recurrence.StartTime.Format(time.RFC3339))
-		if err != nil {
-			return err
-		}
-
-		var recEndTime *time.Time
-		if aux.Recurrence.EndTime != nil {
-			end, err := time.Parse(time.RFC3339, aux.Recurrence.EndTime.Format(time.RFC3339))
-			if err != nil {
-				return err
-			}
-			endConverted := time.Date(end.Year(), end.Month(), end.Day(), end.Hour(), end.Minute(), end.Second(), end.Nanosecond(), loc)
-			recEndTime = &endConverted
-		}
-
-		s.Recurrence = &Recurrence{
-			StartTime:  time.Date(recStartTime.Year(), recStartTime.Month(), recStartTime.Day(), recStartTime.Hour(), recStartTime.Minute(), recStartTime.Second(), recStartTime.Nanosecond(), loc),
-			EndTime:    recEndTime,
-			Duration:   aux.Recurrence.Duration,
-			RepeatType: aux.Recurrence.RepeatType,
-			RepeatOn:   aux.Recurrence.RepeatOn,
-		}
-	}
+	s.StartTime = startTime
+	s.EndTime = endTime
+	s.Recurrence = aux.Recurrence
 	return nil
 }