chore: send all data for trace list api

.github/CODEOWNERS

@@ -1,6 +1,8 @@
 # CODEOWNERS info: https://help.github.com/en/articles/about-code-owners
 
-# Owners are automatically requested for review for PRs that changes code that they own.
+# Owners are automatically requested for review for PRs that changes code
+
+# that they own.
 
 /frontend/ @SigNoz/frontend-maintainers
 
@@ -9,10 +11,8 @@
 /frontend/src/container/OnboardingV2Container/onboarding-configs/onboarding-config-with-links.json @makeavish
 /frontend/src/container/OnboardingV2Container/AddDataSource/AddDataSource.tsx @makeavish
 
-# CI
-/deploy/ @therealpandey
-.github @therealpandey
-go.mod @therealpandey
+/deploy/ @SigNoz/devops
+.github @SigNoz/devops
 
 # Scaffold Owners
 

.github/workflows/mergequeueci.yaml

@@ -1,60 +0,0 @@
-name: mergequeueci
-
-on:
-  pull_request:
-    types:
-      - dequeued
-
-jobs:
-  notify:
-    runs-on: ubuntu-latest
-    if: github.event.pull_request.merged == false
-    steps:
-      - name: alert
-        uses: slackapi/slack-github-action@v2.1.1
-        with:
-          webhook: ${{ secrets.SLACK_MERGE_QUEUE_WEBHOOK }}
-          webhook-type: incoming-webhook
-          payload: |
-            {
-              "text": ":x: PR removed from merge queue",
-              "blocks": [
-                {
-                  "type": "header",
-                  "text": {
-                    "type": "plain_text",
-                    "text": ":x: PR Removed from Merge Queue"
-                  }
-                },
-                {
-                  "type": "section",
-                  "text": {
-                    "type": "mrkdwn",
-                    "text": "*<${{ github.event.pull_request.html_url }}|PR #${{ github.event.pull_request.number }}: ${{ github.event.pull_request.title }}>*"
-                  }
-                },
-                {
-                  "type": "divider"
-                },
-                {
-                  "type": "section",
-                  "fields": [
-                    {
-                      "type": "mrkdwn",
-                      "text": "*Author*\n@${{ github.event.pull_request.user.login }}"
-                    }
-                  ]
-                }
-              ]
-            }
-      - name: comment
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          PR_NUMBER: ${{ github.event.pull_request.number }}
-          PR_AUTHOR: ${{ github.event.pull_request.user.login }}
-          PR_URL: ${{ github.event.pull_request.html_url }}
-        run: |
-          gh api repos/${{ github.repository }}/issues/$PR_NUMBER/comments \
-            -f body="> :x: **PR removed from merge queue**
-          >
-          > @$PR_AUTHOR your PR was removed from the merge queue. Fix the issue and re-queue when ready."

ee/query-service/app/server.go

@@ -216,7 +216,8 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 		}),
 		otelmux.WithPublicEndpoint(),
 	))
-	r.Use(middleware.NewIdentN(s.signoz.IdentNResolver, s.signoz.Sharder, s.signoz.Instrumentation.Logger()).Wrap)
+	r.Use(middleware.NewAuthN([]string{"Authorization", "Sec-WebSocket-Protocol"}, s.signoz.Sharder, s.signoz.Tokenizer, s.signoz.Instrumentation.Logger()).Wrap)
+	r.Use(middleware.NewAPIKey(s.signoz.SQLStore, []string{"SIGNOZ-API-KEY"}, s.signoz.Instrumentation.Logger(), s.signoz.Sharder).Wrap)
 	r.Use(middleware.NewTimeout(s.signoz.Instrumentation.Logger(),
 		s.config.APIServer.Timeout.ExcludedRoutes,
 		s.config.APIServer.Timeout.Default,

frontend/src/components/CustomTimePicker/CustomTimePicker.styles.scss

@@ -1,31 +1,6 @@
 .custom-time-picker {
 	display: flex;
-	flex-direction: row;
-	align-items: center;
-	gap: 4px;
-
-	.zoom-out-btn {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		flex-shrink: 0;
-		color: var(--foreground);
-		border: 1px solid var(--border);
-		border-radius: 2px;
-		box-shadow: none;
-		padding: 10px;
-		height: 33px;
-
-		&:hover:not(:disabled) {
-			color: var(--bg-vanilla-100);
-			background: var(--primary);
-		}
-
-		&:disabled {
-			opacity: 0.5;
-			cursor: not-allowed;
-		}
-	}
+	flex-direction: column;
 
 	.timeSelection-input {
 		&:hover {

frontend/src/components/CustomTimePicker/CustomTimePicker.test.tsx

@@ -16,15 +16,6 @@ jest.mock('react-router-dom', () => {
 	};
 });
 
-jest.mock('react-redux', () => ({
-	...jest.requireActual('react-redux'),
-	useDispatch: jest.fn(() => jest.fn()),
-	useSelector: jest.fn(() => ({
-		minTime: 0,
-		maxTime: Date.now(),
-	})),
-}));
-
 jest.mock('providers/Timezone', () => {
 	const actual = jest.requireActual('providers/Timezone');
 

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -7,11 +7,9 @@ import {
 	useState,
 } from 'react';
 import { useLocation } from 'react-router-dom';
-import { Button } from '@signozhq/button';
 import { Input, InputRef, Popover, Tooltip } from 'antd';
 import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { QueryParams } from 'constants/query';
 import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
 import {
 	FixedDurationSuggestionOptions,
@@ -19,11 +17,9 @@ import {
 	RelativeDurationSuggestionOptions,
 } from 'container/TopNav/DateTimeSelectionV2/constants';
 import dayjs from 'dayjs';
-import { useZoomOut } from 'hooks/useZoomOut';
 import { isValidShortHandDateTimeFormat } from 'lib/getMinMax';
-import { isZoomOutDisabled } from 'lib/zoomOutUtils';
 import { defaultTo, isFunction, noop } from 'lodash-es';
-import { ChevronDown, ChevronUp, ZoomOut } from 'lucide-react';
+import { ChevronDown, ChevronUp } from 'lucide-react';
 import { useTimezone } from 'providers/Timezone';
 import { getTimeDifference, validateEpochRange } from 'utils/epochUtils';
 import { popupContainer } from 'utils/selectPopupContainer';
@@ -70,8 +66,6 @@ interface CustomTimePickerProps {
 	showRecentlyUsed?: boolean;
 	minTime: number;
 	maxTime: number;
-	/** When true, zoom-out button is hidden (e.g. in drawer/modal time selection) */
-	isModalTimeSelection?: boolean;
 }
 
 function CustomTimePicker({
@@ -94,7 +88,6 @@ function CustomTimePicker({
 	showRecentlyUsed = true,
 	minTime,
 	maxTime,
-	isModalTimeSelection = false,
 }: CustomTimePickerProps): JSX.Element {
 	const [
 		selectedTimePlaceholderValue,
@@ -123,14 +116,6 @@ function CustomTimePicker({
 
 	const [isOpenedFromFooter, setIsOpenedFromFooter] = useState(false);
 
-	const durationMs = (maxTime - minTime) / 1e6;
-	const zoomOutDisabled = showLiveLogs || isZoomOutDisabled(durationMs);
-
-	const handleZoomOut = useZoomOut({
-		isDisabled: zoomOutDisabled,
-		urlParamsToDelete: [QueryParams.activeLogId],
-	});
-
 	// function to get selected time in Last 1m, Last 2h, Last 3d, Last 4w format
 	// 1m, 2h, 3d, 4w -> Last 1 minute, Last 2 hours, Last 3 days, Last 4 weeks
 	const getSelectedTimeRangeLabelInRelativeFormat = (
@@ -297,11 +282,7 @@ function CustomTimePicker({
 		resetErrorStatus();
 	};
 
-	const handleInputPressEnter = (
-		event?: React.KeyboardEvent<HTMLInputElement>,
-	): void => {
-		event?.preventDefault();
-		event?.stopPropagation();
+	const handleInputPressEnter = (): void => {
 		// check if the entered time is in the format of 1m, 2h, 3d, 4w
 		const isTimeDurationShortHandFormat = /^(\d+)([mhdw])$/.test(inputValue);
 
@@ -650,23 +631,6 @@ function CustomTimePicker({
 					/>
 				</Popover>
 			</Tooltip>
-			{!showLiveLogs && !isModalTimeSelection && (
-				<Tooltip
-					title={
-						zoomOutDisabled ? 'Zoom out time range is limited to 1 month' : 'Zoom out'
-					}
-				>
-					<span>
-						<Button
-							className="zoom-out-btn"
-							onClick={handleZoomOut}
-							disabled={zoomOutDisabled}
-							data-testid="zoom-out-btn"
-							prefixIcon={<ZoomOut size={14} />}
-						/>
-					</span>
-				</Tooltip>
-			)}
 		</div>
 	);
 }

frontend/src/components/CustomTimePicker/__tests__/customTimePickerZoomOut.test.tsx

@@ -1,169 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { QueryParams } from 'constants/query';
-import { GlobalReducer } from 'types/reducer/globalTime';
-
-import CustomTimePicker from '../CustomTimePicker';
-
-const MS_PER_MIN = 60 * 1000;
-const NOW_MS = 1705312800000;
-
-const mockDispatch = jest.fn();
-const mockSafeNavigate = jest.fn();
-const mockUrlQueryDelete = jest.fn();
-const mockUrlQuerySet = jest.fn();
-
-interface MockAppState {
-	globalTime: Pick<GlobalReducer, 'minTime' | 'maxTime'>;
-}
-
-jest.mock('react-redux', () => ({
-	useDispatch: (): jest.Mock => mockDispatch,
-	useSelector: (selector: (state: MockAppState) => unknown): unknown => {
-		const mockState: MockAppState = {
-			globalTime: {
-				minTime: (NOW_MS - 15 * MS_PER_MIN) * 1e6,
-				maxTime: NOW_MS * 1e6,
-			},
-		};
-		return selector(mockState);
-	},
-}));
-
-jest.mock('hooks/useSafeNavigate', () => ({
-	useSafeNavigate: (): { safeNavigate: jest.Mock } => ({
-		safeNavigate: mockSafeNavigate,
-	}),
-}));
-
-interface MockUrlQuery {
-	delete: typeof mockUrlQueryDelete;
-	set: typeof mockUrlQuerySet;
-	get: () => null;
-	toString: () => string;
-}
-
-jest.mock('hooks/useUrlQuery', () => ({
-	__esModule: true,
-	default: (): MockUrlQuery => ({
-		delete: mockUrlQueryDelete,
-		set: mockUrlQuerySet,
-		get: (): null => null,
-		toString: (): string => 'relativeTime=45m',
-	}),
-}));
-
-jest.mock('providers/Timezone', () => ({
-	useTimezone: (): { timezone: { value: string; offset: string } } => ({
-		timezone: { value: 'UTC', offset: 'UTC' },
-	}),
-}));
-
-jest.mock('react-router-dom', () => ({
-	useLocation: (): { pathname: string } => ({ pathname: '/logs-explorer' }),
-}));
-
-const MS_PER_DAY = 24 * 60 * 60 * 1000;
-const now = Date.now();
-const defaultProps = {
-	onSelect: jest.fn(),
-	onError: jest.fn(),
-	selectedValue: '15m',
-	selectedTime: '15m',
-	onValidCustomDateChange: jest.fn(),
-	open: false,
-	setOpen: jest.fn(),
-	items: [
-		{ value: '15m', label: 'Last 15 minutes' },
-		{ value: '1h', label: 'Last 1 hour' },
-	],
-	minTime: (now - 15 * 60 * 1000) * 1e6,
-	maxTime: now * 1e6,
-};
-
-describe('CustomTimePicker - zoom out button', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		jest.spyOn(Date, 'now').mockReturnValue(NOW_MS);
-	});
-
-	afterEach(() => {
-		jest.restoreAllMocks();
-	});
-
-	it('should render zoom out button when showLiveLogs is false', () => {
-		render(<CustomTimePicker {...defaultProps} showLiveLogs={false} />);
-
-		expect(screen.getByTestId('zoom-out-btn')).toBeInTheDocument();
-	});
-
-	it('should not render zoom out button when showLiveLogs is true', () => {
-		render(<CustomTimePicker {...defaultProps} showLiveLogs={true} />);
-
-		expect(screen.queryByTestId('zoom-out-btn')).not.toBeInTheDocument();
-	});
-
-	it('should not render zoom out button when isModalTimeSelection is true', () => {
-		render(
-			<CustomTimePicker
-				{...defaultProps}
-				showLiveLogs={false}
-				isModalTimeSelection={true}
-			/>,
-		);
-
-		expect(screen.queryByTestId('zoom-out-btn')).not.toBeInTheDocument();
-	});
-
-	it('should call handleZoomOut when zoom out button is clicked', async () => {
-		render(<CustomTimePicker {...defaultProps} showLiveLogs={false} />);
-
-		const zoomOutBtn = screen.getByTestId('zoom-out-btn');
-		await userEvent.click(zoomOutBtn);
-
-		expect(mockDispatch).toHaveBeenCalled();
-		expect(mockUrlQuerySet).toHaveBeenCalledWith(QueryParams.relativeTime, '45m');
-		expect(mockSafeNavigate).toHaveBeenCalledWith(
-			expect.stringMatching(/\/logs-explorer\?relativeTime=45m/),
-		);
-	});
-
-	it('should use real ladder logic: 15m range zooms to 45m preset and updates URL', async () => {
-		render(<CustomTimePicker {...defaultProps} showLiveLogs={false} />);
-
-		const zoomOutBtn = screen.getByTestId('zoom-out-btn');
-		await userEvent.click(zoomOutBtn);
-
-		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.startTime);
-		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.endTime);
-		expect(mockUrlQuerySet).toHaveBeenCalledWith(QueryParams.relativeTime, '45m');
-		expect(mockSafeNavigate).toHaveBeenCalledWith(
-			expect.stringMatching(/\/logs-explorer\?relativeTime=45m/),
-		);
-		expect(mockDispatch).toHaveBeenCalled();
-	});
-
-	it('should delete activeLogId when zoom out is clicked', async () => {
-		render(<CustomTimePicker {...defaultProps} showLiveLogs={false} />);
-
-		const zoomOutBtn = screen.getByTestId('zoom-out-btn');
-		await userEvent.click(zoomOutBtn);
-
-		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.activeLogId);
-	});
-
-	it('should disable zoom button when time range is >= 1 month', () => {
-		const now = Date.now();
-		render(
-			<CustomTimePicker
-				{...defaultProps}
-				minTime={(now - 31 * MS_PER_DAY) * 1e6}
-				maxTime={now * 1e6}
-				showLiveLogs={false}
-			/>,
-		);
-
-		const zoomOutBtn = screen.getByTestId('zoom-out-btn');
-		expect(zoomOutBtn).toBeDisabled();
-	});
-});

frontend/src/constants/queryBuilder.ts

@@ -1,6 +1,5 @@
 // ** Helpers
 import { MetrictypesTypeDTO } from 'api/generated/services/sigNoz.schemas';
-import { defaultTraceSelectedColumns } from 'container/OptionsMenu/constants';
 import { createIdFromObjectFields } from 'lib/createIdFromObjectFields';
 import { createNewBuilderItemName } from 'lib/newQueryBuilder/createNewBuilderItemName';
 import { IAttributeValuesResponse } from 'types/api/queryBuilder/getAttributesValues';
@@ -549,49 +548,3 @@ export const DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY: Record<
 	[DataTypes.ArrayBool]: 'boolAttributeValues',
 	[DataTypes.EMPTY]: 'stringAttributeValues',
 };
-
-export const listViewInitialLogQuery: Query = {
-	...initialQueriesMap.logs,
-	builder: {
-		...initialQueriesMap.logs.builder,
-		queryData: [
-			{
-				...initialQueriesMap.logs.builder.queryData[0],
-				aggregateOperator: LogsAggregatorOperator.NOOP,
-				orderBy: [{ columnName: 'timestamp', order: 'desc' }],
-				offset: 0,
-				pageSize: 100,
-			},
-		],
-	},
-};
-
-export const PANEL_TYPES_INITIAL_QUERY: Record<PANEL_TYPES, Query> = {
-	[PANEL_TYPES.TIME_SERIES]: initialQueriesMap.metrics,
-	[PANEL_TYPES.VALUE]: initialQueriesMap.metrics,
-	[PANEL_TYPES.TABLE]: initialQueriesMap.metrics,
-	[PANEL_TYPES.LIST]: listViewInitialLogQuery,
-	[PANEL_TYPES.TRACE]: initialQueriesMap.traces,
-	[PANEL_TYPES.BAR]: initialQueriesMap.metrics,
-	[PANEL_TYPES.PIE]: initialQueriesMap.metrics,
-	[PANEL_TYPES.HISTOGRAM]: initialQueriesMap.metrics,
-	[PANEL_TYPES.EMPTY_WIDGET]: initialQueriesMap.metrics,
-};
-
-export const listViewInitialTraceQuery: Query = {
-	// it should be the above commented query
-	...initialQueriesMap.traces,
-	builder: {
-		...initialQueriesMap.traces.builder,
-		queryData: [
-			{
-				...initialQueriesMap.traces.builder.queryData[0],
-				aggregateOperator: LogsAggregatorOperator.NOOP,
-				orderBy: [{ columnName: 'timestamp', order: 'desc' }],
-				offset: 0,
-				pageSize: 10,
-				selectColumns: defaultTraceSelectedColumns,
-			},
-		],
-	},
-};

frontend/src/container/DashboardContainer/ComponentsSlider/ComponentSlider.styles.scss

@@ -1,4 +1,4 @@
-.panel-type-selection-modal {
+.graph-selection {
 	.ant-modal-content {
 		width: 515px;
 		max-height: 646px;
@@ -76,11 +76,6 @@
 						content: none;
 					}
 				}
-
-				.panel-type-text {
-					text-align: center;
-					margin-top: 1rem;
-				}
 			}
 		}
 
@@ -119,7 +114,7 @@
 }
 
 .lightMode {
-	.panel-type-selection-modal {
+	.graph-selection {
 		.ant-modal-content {
 			border: 1px solid var(--bg-vanilla-300);
 			background: var(--bg-vanilla-100);

frontend/src/container/DashboardContainer/ComponentsSlider/constants.ts

@@ -0,0 +1,50 @@
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { defaultTraceSelectedColumns } from 'container/OptionsMenu/constants';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { LogsAggregatorOperator } from 'types/common/queryBuilder';
+
+export const PANEL_TYPES_INITIAL_QUERY = {
+	[PANEL_TYPES.TIME_SERIES]: initialQueriesMap.metrics,
+	[PANEL_TYPES.VALUE]: initialQueriesMap.metrics,
+	[PANEL_TYPES.TABLE]: initialQueriesMap.metrics,
+	[PANEL_TYPES.LIST]: initialQueriesMap.logs,
+	[PANEL_TYPES.TRACE]: initialQueriesMap.traces,
+	[PANEL_TYPES.BAR]: initialQueriesMap.metrics,
+	[PANEL_TYPES.PIE]: initialQueriesMap.metrics,
+	[PANEL_TYPES.HISTOGRAM]: initialQueriesMap.metrics,
+	[PANEL_TYPES.EMPTY_WIDGET]: initialQueriesMap.metrics,
+};
+
+export const listViewInitialLogQuery: Query = {
+	...initialQueriesMap.logs,
+	builder: {
+		...initialQueriesMap.logs.builder,
+		queryData: [
+			{
+				...initialQueriesMap.logs.builder.queryData[0],
+				aggregateOperator: LogsAggregatorOperator.NOOP,
+				orderBy: [{ columnName: 'timestamp', order: 'desc' }],
+				offset: 0,
+				pageSize: 100,
+			},
+		],
+	},
+};
+
+export const listViewInitialTraceQuery: Query = {
+	// it should be the above commented query
+	...initialQueriesMap.traces,
+	builder: {
+		...initialQueriesMap.traces.builder,
+		queryData: [
+			{
+				...initialQueriesMap.traces.builder.queryData[0],
+				aggregateOperator: LogsAggregatorOperator.NOOP,
+				orderBy: [{ columnName: 'timestamp', order: 'desc' }],
+				offset: 0,
+				pageSize: 10,
+				selectColumns: defaultTraceSelectedColumns,
+			},
+		],
+	},
+};

frontend/src/container/DashboardContainer/ComponentsSlider/index.tsx

@@ -0,0 +1,94 @@
+import { Card, Modal } from 'antd';
+import logEvent from 'api/common/logEvent';
+import { QueryParams } from 'constants/query';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import createQueryParams from 'lib/createQueryParams';
+import history from 'lib/history';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
+import { LogsAggregatorOperator } from 'types/common/queryBuilder';
+import { v4 as uuid } from 'uuid';
+
+import { PANEL_TYPES_INITIAL_QUERY } from './constants';
+import menuItems from './menuItems';
+import { Text } from './styles';
+
+import './ComponentSlider.styles.scss';
+
+function DashboardGraphSlider(): JSX.Element {
+	const { handleToggleDashboardSlider, isDashboardSliderOpen } = useDashboard();
+
+	const onClickHandler = (name: PANEL_TYPES) => (): void => {
+		const id = uuid();
+		handleToggleDashboardSlider(false);
+		logEvent('Dashboard Detail: New panel type selected', {
+			// dashboardId: '',
+			// dashboardName: '',
+			// numberOfPanels: 0, // todo - at this point we don't know these attributes
+			panelType: name,
+			widgetId: id,
+		});
+		const queryParamsLog = {
+			graphType: name,
+			widgetId: id,
+			[QueryParams.compositeQuery]: JSON.stringify({
+				...PANEL_TYPES_INITIAL_QUERY[name],
+				builder: {
+					...PANEL_TYPES_INITIAL_QUERY[name].builder,
+					queryData: [
+						{
+							...PANEL_TYPES_INITIAL_QUERY[name].builder.queryData[0],
+							aggregateOperator: LogsAggregatorOperator.NOOP,
+							orderBy: [{ columnName: 'timestamp', order: 'desc' }],
+							offset: 0,
+							pageSize: 100,
+						},
+					],
+				},
+			}),
+		};
+
+		const queryParams = {
+			graphType: name,
+			widgetId: id,
+			[QueryParams.compositeQuery]: JSON.stringify(
+				PANEL_TYPES_INITIAL_QUERY[name],
+			),
+		};
+		if (name === PANEL_TYPES.LIST) {
+			history.push(
+				`${history.location.pathname}/new?${createQueryParams(queryParamsLog)}`,
+			);
+		} else {
+			history.push(
+				`${history.location.pathname}/new?${createQueryParams(queryParams)}`,
+			);
+		}
+	};
+
+	const handleCardClick = (panelType: PANEL_TYPES): void => {
+		onClickHandler(panelType)();
+	};
+
+	return (
+		<Modal
+			open={isDashboardSliderOpen}
+			onCancel={(): void => {
+				handleToggleDashboardSlider(false);
+			}}
+			rootClassName="graph-selection"
+			footer={null}
+			title="New Panel"
+		>
+			<div className="panel-selection">
+				{menuItems.map(({ name, icon, display }) => (
+					<Card onClick={(): void => handleCardClick(name)} id={name} key={name}>
+						{icon}
+						<Text>{display}</Text>
+					</Card>
+				))}
+			</div>
+		</Modal>
+	);
+}
+
+export default DashboardGraphSlider;

frontend/src/container/DashboardContainer/ComponentsSlider/menuItems.tsx

@@ -9,7 +9,7 @@ import {
 	Table,
 } from 'lucide-react';
 
-export const PanelTypesWithData: ItemsProps[] = [
+const Items: ItemsProps[] = [
 	{
 		name: PANEL_TYPES.TIME_SERIES,
 		icon: <LineChart size={16} color={Color.BG_ROBIN_400} />,
@@ -52,3 +52,5 @@ export interface ItemsProps {
 	icon: JSX.Element;
 	display: string;
 }
+
+export default Items;

frontend/src/container/DashboardContainer/ComponentsSlider/styles.ts

@@ -0,0 +1,41 @@
+import { Card as CardComponent, Typography } from 'antd';
+import styled from 'styled-components';
+
+export const Container = styled.div`
+	display: flex;
+	justify-content: right;
+	gap: 8px;
+	margin-bottom: 12px;
+`;
+
+export const Card = styled(CardComponent)`
+	min-height: 80px;
+	min-width: 120px;
+	overflow-y: auto;
+	cursor: pointer;
+	transition: transform 0.2s;
+
+	.ant-card-body {
+		padding: 12px;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		align-items: center;
+
+		.ant-typography {
+			font-size: 12px;
+			font-weight: 600;
+		}
+	}
+
+	&:hover {
+		transform: scale(1.05);
+		border: 1px solid var(--bg-robin-400);
+	}
+`;
+
+export const Text = styled(Typography)`
+	text-align: center;
+	margin-top: 1rem;
+`;

frontend/src/container/DashboardContainer/DashboardDescription/__tests__/DashboardDescription.test.tsx

@@ -182,7 +182,9 @@ describe('Dashboard landing page actions header tests', () => {
 		(useLocation as jest.Mock).mockReturnValue(mockLocation);
 
 		const mockContextValue: IDashboardContext = {
+			isDashboardSliderOpen: false,
 			isDashboardLocked: false,
+			handleToggleDashboardSlider: jest.fn(),
 			handleDashboardLockToggle: jest.fn(),
 			dashboardResponse: {} as IDashboardContext['dashboardResponse'],
 			selectedDashboard: (getDashboardById.data as unknown) as Dashboard,

frontend/src/container/DashboardContainer/DashboardDescription/index.tsx

@@ -40,7 +40,6 @@ import {
 } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { usePanelTypeSelectionModalStore } from 'providers/Dashboard/helpers/panelTypeSelectionModalHelper';
 import { sortLayout } from 'providers/Dashboard/util';
 import { DashboardData } from 'types/api/dashboard/getAll';
 import { Props } from 'types/api/dashboard/update';
@@ -49,10 +48,10 @@ import { ComponentTypes } from 'utils/permission';
 import { v4 as uuid } from 'uuid';
 
 import DashboardHeader from '../components/DashboardHeader/DashboardHeader';
+import DashboardGraphSlider from '../ComponentsSlider';
 import DashboardSettings from '../DashboardSettings';
 import { Base64Icons } from '../DashboardSettings/General/utils';
 import DashboardVariableSelection from '../DashboardVariablesSelection';
-import PanelTypeSelectionModal from '../PanelTypeSelectionModal';
 import SettingsDrawer from './SettingsDrawer';
 import { VariablesSettingsTab } from './types';
 import {
@@ -70,9 +69,6 @@ interface DashboardDescriptionProps {
 // eslint-disable-next-line sonarjs/cognitive-complexity
 function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 	const { handle } = props;
-	const setIsPanelTypeSelectionModalOpen = usePanelTypeSelectionModalStore(
-		(s) => s.setIsPanelTypeSelectionModalOpen,
-	);
 	const {
 		selectedDashboard,
 		panelMap,
@@ -81,6 +77,7 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 		setLayouts,
 		isDashboardLocked,
 		setSelectedDashboard,
+		handleToggleDashboardSlider,
 		handleDashboardLockToggle,
 	} = useDashboard();
 
@@ -148,14 +145,14 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 	const [addPanelPermission] = useComponentPermission(permissions, userRole);
 
 	const onEmptyWidgetHandler = useCallback(() => {
-		setIsPanelTypeSelectionModalOpen(true);
+		handleToggleDashboardSlider(true);
 		logEvent('Dashboard Detail: Add new panel clicked', {
 			dashboardId: selectedDashboard?.id,
 			dashboardName: selectedDashboard?.data.title,
 			numberOfPanels: selectedDashboard?.data.widgets?.length,
 		});
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [setIsPanelTypeSelectionModalOpen]);
+	}, [handleToggleDashboardSlider]);
 
 	const handleLockDashboardToggle = (): void => {
 		setIsDashbordSettingsOpen(false);
@@ -524,7 +521,7 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 					<DashboardVariableSelection />
 				</section>
 			)}
-			<PanelTypeSelectionModal />
+			<DashboardGraphSlider />
 
 			<Modal
 				open={isRenameDashboardOpen}

frontend/src/container/DashboardContainer/PanelTypeSelectionModal/index.tsx

@@ -1,68 +0,0 @@
-import { memo } from 'react';
-import { Card, Modal, Typography } from 'antd';
-import logEvent from 'api/common/logEvent';
-import { QueryParams } from 'constants/query';
-import { PANEL_TYPES, PANEL_TYPES_INITIAL_QUERY } from 'constants/queryBuilder';
-import createQueryParams from 'lib/createQueryParams';
-import history from 'lib/history';
-import { usePanelTypeSelectionModalStore } from 'providers/Dashboard/helpers/panelTypeSelectionModalHelper';
-import { v4 as uuid } from 'uuid';
-
-import { PanelTypesWithData } from './menuItems';
-
-import './PanelTypeSelectionModal.styles.scss';
-
-function PanelTypeSelectionModal(): JSX.Element {
-	const {
-		isPanelTypeSelectionModalOpen,
-		setIsPanelTypeSelectionModalOpen,
-	} = usePanelTypeSelectionModalStore();
-
-	const onClickHandler = (name: PANEL_TYPES) => (): void => {
-		const id = uuid();
-		setIsPanelTypeSelectionModalOpen(false);
-		logEvent('Dashboard Detail: New panel type selected', {
-			panelType: name,
-			widgetId: id,
-		});
-
-		const queryParams = {
-			graphType: name,
-			widgetId: id,
-			[QueryParams.compositeQuery]: JSON.stringify(
-				PANEL_TYPES_INITIAL_QUERY[name],
-			),
-		};
-
-		history.push(
-			`${history.location.pathname}/new?${createQueryParams(queryParams)}`,
-		);
-	};
-
-	const handleCardClick = (panelType: PANEL_TYPES): void => {
-		onClickHandler(panelType)();
-	};
-
-	return (
-		<Modal
-			open={isPanelTypeSelectionModalOpen}
-			onCancel={(): void => {
-				setIsPanelTypeSelectionModalOpen(false);
-			}}
-			rootClassName="panel-type-selection-modal"
-			footer={null}
-			title="New Panel"
-		>
-			<div className="panel-selection">
-				{PanelTypesWithData.map(({ name, icon, display }) => (
-					<Card onClick={(): void => handleCardClick(name)} id={name} key={name}>
-						{icon}
-						<Typography className="panel-type-text">{display}</Typography>
-					</Card>
-				))}
-			</div>
-		</Modal>
-	);
-}
-
-export default memo(PanelTypeSelectionModal);

frontend/src/container/GridCardLayout/DashboardEmptyState/DashboardEmptyState.tsx

@@ -9,18 +9,17 @@ import DashboardSettings from 'container/DashboardContainer/DashboardSettings';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useAppContext } from 'providers/App/App';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { usePanelTypeSelectionModalStore } from 'providers/Dashboard/helpers/panelTypeSelectionModalHelper';
 import { ROLES, USER_ROLES } from 'types/roles';
 import { ComponentTypes } from 'utils/permission';
 
 import './DashboardEmptyState.styles.scss';
 
 export default function DashboardEmptyState(): JSX.Element {
-	const setIsPanelTypeSelectionModalOpen = usePanelTypeSelectionModalStore(
-		(s) => s.setIsPanelTypeSelectionModalOpen,
-	);
-
-	const { selectedDashboard, isDashboardLocked } = useDashboard();
+	const {
+		selectedDashboard,
+		isDashboardLocked,
+		handleToggleDashboardSlider,
+	} = useDashboard();
 
 	const variablesSettingsTabHandle = useRef<VariablesSettingsTab>(null);
 	const [isSettingsDrawerOpen, setIsSettingsDrawerOpen] = useState<boolean>(
@@ -42,14 +41,14 @@ export default function DashboardEmptyState(): JSX.Element {
 	const [addPanelPermission] = useComponentPermission(permissions, userRole);
 
 	const onEmptyWidgetHandler = useCallback(() => {
-		setIsPanelTypeSelectionModalOpen(true);
+		handleToggleDashboardSlider(true);
 		logEvent('Dashboard Detail: Add new panel clicked', {
 			dashboardId: selectedDashboard?.id,
 			dashboardName: selectedDashboard?.data.title,
 			numberOfPanels: selectedDashboard?.data.widgets?.length,
 		});
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [setIsPanelTypeSelectionModalOpen]);
+	}, [handleToggleDashboardSlider]);
 
 	const onConfigureClick = useCallback((): void => {
 		setIsSettingsDrawerOpen(true);

frontend/src/container/GridCardLayout/GridCard/FullView/PanelTypeSelector.tsx

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 import { Select, Typography } from 'antd';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { PanelTypesWithData } from 'container/DashboardContainer/PanelTypeSelectionModal/menuItems';
+import GraphTypes from 'container/DashboardContainer/ComponentsSlider/menuItems';
 import { handleQueryChange } from 'container/NewWidget/utils';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
@@ -59,7 +59,7 @@ function PanelTypeSelector({
 				data-testid="panel-change-select"
 				disabled={disabled}
 			>
-				{PanelTypesWithData.map((item) => (
+				{GraphTypes.map((item) => (
 					<Option key={item.name} value={item.name}>
 						<div className="view-panel-select-option">
 							<div className="icon">{item.icon}</div>

frontend/src/container/GridCardLayout/WidgetRow.tsx

@@ -5,7 +5,6 @@ import useComponentPermission from 'hooks/useComponentPermission';
 import { EllipsisIcon, PenLine, Plus, X } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { usePanelTypeSelectionModalStore } from 'providers/Dashboard/helpers/panelTypeSelectionModalHelper';
 import { setSelectedRowWidgetId } from 'providers/Dashboard/helpers/selectedRowWidgetIdHelper';
 import { ROLES, USER_ROLES } from 'types/roles';
 import { ComponentTypes } from 'utils/permission';
@@ -35,11 +34,11 @@ export function WidgetRowHeader(props: WidgetRowHeaderProps): JSX.Element {
 	} = props;
 	const [isRowSettingsOpen, setIsRowSettingsOpen] = useState<boolean>(false);
 
-	const setIsPanelTypeSelectionModalOpen = usePanelTypeSelectionModalStore(
-		(s) => s.setIsPanelTypeSelectionModalOpen,
-	);
-
-	const { selectedDashboard, isDashboardLocked } = useDashboard();
+	const {
+		handleToggleDashboardSlider,
+		selectedDashboard,
+		isDashboardLocked,
+	} = useDashboard();
 
 	const permissions: ComponentTypes[] = ['add_panel'];
 	const { user } = useAppContext();
@@ -88,7 +87,7 @@ export function WidgetRowHeader(props: WidgetRowHeaderProps): JSX.Element {
 								}
 
 								setSelectedRowWidgetId(selectedDashboard.id, id);
-								setIsPanelTypeSelectionModalOpen(true);
+								handleToggleDashboardSlider(true);
 							}}
 						>
 							New Panel

frontend/src/container/Home/Home.tsx

@@ -15,7 +15,6 @@ import ROUTES from 'constants/routes';
 import { getMetricsListQuery } from 'container/MetricsExplorer/Summary/utils';
 import { useGetMetricsList } from 'hooks/metricsExplorer/useGetMetricsList';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
-import { useIsDarkMode } from 'hooks/useDarkMode';
 import history from 'lib/history';
 import cloneDeep from 'lodash-es/cloneDeep';
 import { AnimatePresence } from 'motion/react';
@@ -44,7 +43,6 @@ const homeInterval = 30 * 60 * 1000;
 // eslint-disable-next-line sonarjs/cognitive-complexity
 export default function Home(): JSX.Element {
 	const { user } = useAppContext();
-	const isDarkMode = useIsDarkMode();
 
 	const [startTime, setStartTime] = useState<number | null>(null);
 	const [endTime, setEndTime] = useState<number | null>(null);
@@ -682,11 +680,7 @@ export default function Home(): JSX.Element {
 
 												<div className="checklist-img-container">
 													<img
-														src={
-															isDarkMode
-																? '/Images/allInOne.svg'
-																: '/Images/allInOneLightMode.svg'
-														}
+														src="/Images/allInOne.svg"
 														alt="checklist-img"
 														className="checklist-img"
 													/>

frontend/src/container/NewWidget/RightContainer/ColumnUnitSelector/ColumnUnitSelector.styles.scss

@@ -1,7 +1,5 @@
 .column-unit-selector {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
+	margin-top: 16px;
 
 	.heading {
 		color: var(--bg-vanilla-400);
@@ -32,11 +30,6 @@
 			width: 100%;
 		}
 	}
-	&-content {
-		display: flex;
-		flex-direction: column;
-		gap: 12px;
-	}
 }
 
 .lightMode {

frontend/src/container/NewWidget/RightContainer/ColumnUnitSelector/ColumnUnitSelector.tsx

@@ -72,24 +72,22 @@ export function ColumnUnitSelector(
 	return (
 		<section className="column-unit-selector">
 			<Typography.Text className="heading">Column Units</Typography.Text>
-			<div className="column-unit-selector-content">
-				{aggregationQueries.map(({ value, label }) => {
-					const baseQueryName = value.split('.')[0];
-					return (
-						<YAxisUnitSelectorV2
-							value={columnUnits[value] || ''}
-							onSelect={(unitValue: string): void =>
-								handleColumnUnitSelect(value, unitValue)
-							}
-							fieldLabel={label}
-							key={value}
-							selectedQueryName={baseQueryName}
-							// Update the column unit value automatically only in create mode
-							shouldUpdateYAxisUnit={isNewDashboard}
-						/>
-					);
-				})}
-			</div>
+			{aggregationQueries.map(({ value, label }) => {
+				const baseQueryName = value.split('.')[0];
+				return (
+					<YAxisUnitSelectorV2
+						value={columnUnits[value] || ''}
+						onSelect={(unitValue: string): void =>
+							handleColumnUnitSelect(value, unitValue)
+						}
+						fieldLabel={label}
+						key={value}
+						selectedQueryName={baseQueryName}
+						// Update the column unit value automatically only in create mode
+						shouldUpdateYAxisUnit={isNewDashboard}
+					/>
+				);
+			})}
 		</section>
 	);
 }

frontend/src/container/NewWidget/RightContainer/ContextLinks/__test__/ContextLinks.test.tsx

@@ -56,6 +56,9 @@ describe('ContextLinks Component', () => {
 				/>,
 			);
 
+			// Check that the component renders
+			expect(screen.getByText('Context Links')).toBeInTheDocument();
+
 			// Check that the add button is present
 			expect(
 				screen.getByRole('button', { name: /context link/i }),

frontend/src/container/NewWidget/RightContainer/ContextLinks/index.tsx

@@ -14,7 +14,7 @@ import {
 	verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { Button, Modal } from 'antd';
+import { Button, Modal, Typography } from 'antd';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { GripVertical, Pencil, Plus, Trash2 } from 'lucide-react';
 import {
@@ -134,16 +134,11 @@ function ContextLinks({
 
 	return (
 		<div className="context-links-container">
+			<Typography.Text className="context-links-text">
+				Context Links
+			</Typography.Text>
+
 			<div className="context-links-list">
-				<Button
-					type="default"
-					className="add-context-link-button"
-					icon={<Plus size={12} />}
-					style={{ width: '100%' }}
-					onClick={handleAddContextLink}
-				>
-					Add Context Link
-				</Button>
 				<OverlayScrollbar>
 					<DndContext
 						sensors={sensors}
@@ -165,6 +160,16 @@ function ContextLinks({
 						</SortableContext>
 					</DndContext>
 				</OverlayScrollbar>
+
+				{/* button to add context link */}
+				<Button
+					type="primary"
+					className="add-context-link-button"
+					icon={<Plus size={12} />}
+					onClick={handleAddContextLink}
+				>
+					Context Link
+				</Button>
 			</div>
 
 			<Modal

frontend/src/container/NewWidget/RightContainer/ContextLinks/styles.scss

@@ -2,6 +2,7 @@
 	display: flex;
 	flex-direction: column;
 	gap: 16px;
+	margin: 12px;
 }
 
 .context-links-text {
@@ -109,7 +110,10 @@
 }
 
 .add-context-link-button {
-	width: 100%;
+	display: flex;
+	align-items: center;
+	margin: auto;
+	width: fit-content;
 }
 
 .lightMode {

frontend/src/container/NewWidget/RightContainer/RightContainer.styles.scss

@@ -1,7 +1,6 @@
 .right-container {
 	display: flex;
 	flex-direction: column;
-	padding-bottom: 48px;
 
 	.header {
 		display: flex;
@@ -25,14 +24,14 @@
 			letter-spacing: -0.07px;
 		}
 	}
-	.control-container {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-	}
 
 	.name-description {
-		padding: 0 0 4px 0;
+		display: flex;
+		flex-direction: column;
+		padding: 12px 12px 16px 12px;
+		border-top: 1px solid var(--bg-slate-500);
+		border-bottom: 1px solid var(--bg-slate-500);
+		gap: 8px;
 
 		.typography {
 			color: var(--bg-vanilla-400);
@@ -89,6 +88,9 @@
 	.panel-config {
 		display: flex;
 		flex-direction: column;
+		padding: 12px 12px 16px 12px;
+		gap: 8px;
+		border-bottom: 1px solid var(--bg-slate-500);
 
 		.typography {
 			color: var(--bg-vanilla-400);
@@ -102,7 +104,6 @@
 		}
 
 		.panel-type-select {
-			width: 100%;
 			.ant-select-selector {
 				display: flex;
 				height: 32px;
@@ -136,6 +137,7 @@
 		}
 
 		.fill-gaps {
+			margin-top: 16px;
 			display: flex;
 			padding: 12px;
 			justify-content: space-between;
@@ -154,24 +156,31 @@
 				letter-spacing: 0.52px;
 				text-transform: uppercase;
 			}
-			.fill-gaps-text-description {
-				color: var(--bg-vanilla-400);
-				font-family: Inter;
-				font-size: 12px;
-				font-style: normal;
-				font-weight: 400;
-				opacity: 0.6;
-				line-height: 16px; /* 133.333% */
-			}
 		}
 
 		.log-scale,
-		.decimal-precision-selector,
-		.legend-position {
+		.decimal-precision-selector {
+			margin-top: 16px;
+			display: flex;
 			justify-content: space-between;
+			flex-direction: column;
+			gap: 8px;
+		}
+
+		.legend-position {
+			margin-top: 16px;
+			display: flex;
+			justify-content: space-between;
+			flex-direction: column;
+			gap: 8px;
+		}
+
+		.legend-colors {
+			margin-top: 16px;
 		}
 
 		.panel-time-text {
+			margin-top: 16px;
 			color: var(--bg-vanilla-400);
 			font-family: 'Space Mono';
 			font-size: 13px;
@@ -184,6 +193,7 @@
 
 		.y-axis-unit-selector,
 		.y-axis-unit-selector-v2 {
+			margin-top: 16px;
 			display: flex;
 			flex-direction: column;
 			gap: 8px;
@@ -268,8 +278,11 @@
 		}
 
 		.stack-chart {
-			flex-direction: row;
+			margin-top: 16px;
+			display: flex;
 			justify-content: space-between;
+			gap: 8px;
+
 			.label {
 				color: var(--bg-vanilla-400);
 				font-family: 'Space Mono';
@@ -283,6 +296,11 @@
 		}
 
 		.bucket-config {
+			margin-top: 16px;
+			display: flex;
+			flex-direction: column;
+			gap: 8px;
+
 			.label {
 				color: var(--bg-vanilla-400);
 				font-family: 'Space Mono';
@@ -334,13 +352,16 @@
 		}
 	}
 
+	.context-links {
+		border-bottom: 1px solid var(--bg-slate-500);
+	}
+
 	.alerts {
 		display: flex;
+		padding: 12px;
 		align-items: center;
 		justify-content: space-between;
-		padding: 12px;
-		min-height: 44px;
-		border-top: 1px solid var(--bg-slate-500);
+		border-bottom: 1px solid var(--bg-slate-500);
 		cursor: pointer;
 
 		.left-section {
@@ -366,16 +387,6 @@
 			color: var(--bg-vanilla-400);
 		}
 	}
-
-	.context-links {
-		padding: 12px 12px 16px 12px;
-		border-bottom: 1px solid var(--bg-slate-500);
-	}
-
-	.thresholds-section {
-		padding: 12px 12px 16px 12px;
-		border-top: 1px solid var(--bg-slate-500);
-	}
 }
 
 .select-option {
@@ -407,6 +418,9 @@
 		}
 
 		.name-description {
+			border-top: 1px solid var(--bg-vanilla-300);
+			border-bottom: 1px solid var(--bg-vanilla-300);
+
 			.typography {
 				color: var(--bg-ink-400);
 			}
@@ -427,6 +441,8 @@
 		}
 
 		.panel-config {
+			border-bottom: 1px solid var(--bg-vanilla-300);
+
 			.typography {
 				color: var(--bg-ink-400);
 			}
@@ -462,9 +478,6 @@
 				.fill-gaps-text {
 					color: var(--bg-ink-400);
 				}
-				.fill-gaps-text-description {
-					color: var(--bg-ink-400);
-				}
 			}
 
 			.bucket-config {
@@ -517,7 +530,7 @@
 		}
 
 		.alerts {
-			border-top: 1px solid var(--bg-vanilla-300);
+			border-bottom: 1px solid var(--bg-vanilla-300);
 
 			.left-section {
 				.bell-icon {
@@ -536,10 +549,6 @@
 		.context-links {
 			border-bottom: 1px solid var(--bg-vanilla-300);
 		}
-
-		.thresholds-section {
-			border-top: 1px solid var(--bg-vanilla-300);
-		}
 	}
 
 	.select-option {

frontend/src/container/NewWidget/RightContainer/Threshold/ThresholdSelector.styles.scss

@@ -1,4 +1,5 @@
 .threshold-selector-container {
+	padding: 12px;
 	padding-bottom: 80px;
 
 	.threshold-select {

frontend/src/container/NewWidget/RightContainer/Threshold/ThresholdSelector.tsx

@@ -1,10 +1,10 @@
 import { useCallback } from 'react';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
-import { Button } from 'antd';
+import { Typography } from 'antd';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useGetQueryLabels } from 'hooks/useGetQueryLabels';
-import { Plus } from 'lucide-react';
+import { Antenna, Plus } from 'lucide-react';
 import { v4 as uuid } from 'uuid';
 
 import Threshold from './Threshold';
@@ -68,14 +68,11 @@ function ThresholdSelector({
 		<DndProvider backend={HTML5Backend}>
 			<div className="threshold-selector-container">
 				<div className="threshold-select" onClick={addThresholdHandler}>
-					<Button
-						type="default"
-						icon={<Plus size={14} />}
-						style={{ width: '100%' }}
-						onClick={addThresholdHandler}
-					>
-						Add Threshold
-					</Button>
+					<div className="left-section">
+						<Antenna size={14} className="icon" />
+						<Typography.Text className="text">Thresholds</Typography.Text>
+					</div>
+					<Plus size={14} onClick={addThresholdHandler} className="icon" />
 				</div>
 				{thresholds.map((threshold, idx) => (
 					<Threshold

frontend/src/container/NewWidget/RightContainer/components/SettingsSection/SettingsSection.styles.scss

@@ -1,68 +0,0 @@
-.settings-section {
-	border-top: 1px solid var(--bg-slate-500);
-}
-
-.settings-section-header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	width: 100%;
-	padding: 12px 12px;
-	min-height: 44px;
-	background: transparent;
-	border: none;
-	outline: none;
-	cursor: pointer;
-
-	.settings-section-title {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		color: var(--bg-vanilla-400);
-		font-family: 'Space Mono';
-		font-size: 13px;
-		font-weight: 400;
-		text-transform: uppercase;
-	}
-
-	.chevron-icon {
-		color: var(--bg-vanilla-400);
-		transition: transform 0.2s ease-in-out;
-
-		&.open {
-			transform: rotate(180deg);
-		}
-	}
-}
-
-.settings-section-content {
-	padding: 0 12px 0 12px;
-	display: flex;
-	flex-direction: column;
-	gap: 20px;
-	max-height: 0;
-	overflow: hidden;
-	opacity: 0;
-	transition: max-height 0.25s ease, opacity 0.25s ease, padding 0.25s ease;
-
-	&.open {
-		padding-bottom: 24px;
-		max-height: 1000px;
-		opacity: 1;
-	}
-}
-
-.lightMode {
-	.settings-section-header {
-		.chevron-icon {
-			color: var(--bg-ink-400);
-		}
-		.settings-section-title {
-			color: var(--bg-ink-400);
-		}
-	}
-
-	.settings-section {
-		border-top: 1px solid var(--bg-vanilla-300);
-	}
-}

frontend/src/container/NewWidget/RightContainer/components/SettingsSection/SettingsSection.tsx

@@ -1,51 +0,0 @@
-import { ReactNode, useState } from 'react';
-import { ChevronDown } from 'lucide-react';
-
-import './SettingsSection.styles.scss';
-
-export interface SettingsSectionProps {
-	title: string;
-	defaultOpen?: boolean;
-	children: ReactNode;
-	icon?: ReactNode;
-}
-
-function SettingsSection({
-	title,
-	defaultOpen = false,
-	children,
-	icon,
-}: SettingsSectionProps): JSX.Element {
-	const [isOpen, setIsOpen] = useState(defaultOpen);
-
-	const toggleOpen = (): void => {
-		setIsOpen((prev) => !prev);
-	};
-
-	return (
-		<section className="settings-section">
-			<button
-				type="button"
-				className="settings-section-header"
-				onClick={toggleOpen}
-			>
-				<span className="settings-section-title">
-					{icon ? icon : null} {title}
-				</span>
-				<ChevronDown
-					size={16}
-					className={isOpen ? 'chevron-icon open' : 'chevron-icon'}
-				/>
-			</button>
-			<div
-				className={
-					isOpen ? 'settings-section-content open' : 'settings-section-content'
-				}
-			>
-				{children}
-			</div>
-		</section>
-	);
-}
-
-export default SettingsSection;

frontend/src/container/NewWidget/RightContainer/index.tsx

@@ -14,30 +14,23 @@ import {
 	Input,
 	InputNumber,
 	Select,
+	Space,
 	Switch,
 	Typography,
 } from 'antd';
 import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
 import TimePreference from 'components/TimePreferenceDropDown';
 import { PANEL_TYPES, PanelDisplay } from 'constants/queryBuilder';
-import {
+import GraphTypes, {
 	ItemsProps,
-	PanelTypesWithData,
-} from 'container/DashboardContainer/PanelTypeSelectionModal/menuItems';
+} from 'container/DashboardContainer/ComponentsSlider/menuItems';
 import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
 import useCreateAlerts from 'hooks/queryBuilder/useCreateAlerts';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import {
-	Antenna,
-	Axis3D,
 	ConciergeBell,
-	Layers,
-	LayoutDashboard,
 	LineChart,
-	Link,
-	Pencil,
 	Plus,
-	SlidersHorizontal,
 	Spline,
 	SquareArrowOutUpRight,
 } from 'lucide-react';
@@ -53,7 +46,6 @@ import { DataSource } from 'types/common/queryBuilder';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import { ColumnUnitSelector } from './ColumnUnitSelector/ColumnUnitSelector';
-import SettingsSection from './components/SettingsSection/SettingsSection';
 import {
 	panelTypeVsBucketConfig,
 	panelTypeVsColumnUnitPreferences,
@@ -151,7 +143,7 @@ function RightContainer({
 	);
 
 	const selectedGraphType =
-		PanelTypesWithData.find((e) => e.name === selectedGraph)?.display || '';
+		GraphTypes.find((e) => e.name === selectedGraph)?.display || '';
 
 	const onCreateAlertsHandler = useCreateAlerts(selectedWidget, 'panelView');
 
@@ -177,7 +169,7 @@ function RightContainer({
 
 	const { currentQuery } = useQueryBuilder();
 
-	const [graphTypes, setGraphTypes] = useState<ItemsProps[]>(PanelTypesWithData);
+	const [graphTypes, setGraphTypes] = useState<ItemsProps[]>(GraphTypes);
 
 	const dashboardVariableOptions = useMemo<VariableOption[]>(() => {
 		return Object.entries(dashboardVariables).map(([, value]) => ({
@@ -186,21 +178,6 @@ function RightContainer({
 		}));
 	}, [dashboardVariables]);
 
-	const isAxisSectionVisible = useMemo(() => allowSoftMinMax || allowLogScale, [
-		allowSoftMinMax,
-		allowLogScale,
-	]);
-
-	const isFormattingSectionVisible = useMemo(
-		() => allowYAxisUnit || allowDecimalPrecision || allowPanelColumnPreference,
-		[allowYAxisUnit, allowDecimalPrecision, allowPanelColumnPreference],
-	);
-
-	const isLegendSectionVisible = useMemo(
-		() => allowLegendPosition || allowLegendColors,
-		[allowLegendPosition, allowLegendColors],
-	);
-
 	const updateCursorAndDropdown = (value: string, pos: number): void => {
 		setCursorPos(pos);
 		const lastDollar = value.lastIndexOf('$', pos - 1);
@@ -216,15 +193,6 @@ function RightContainer({
 		}, 0);
 	};
 
-	const decimapPrecisionOptions = useMemo(() => {
-		return [
-			{ label: '0 decimals', value: PrecisionOptionsEnum.ZERO },
-			{ label: '1 decimal', value: PrecisionOptionsEnum.ONE },
-			{ label: '2 decimals', value: PrecisionOptionsEnum.TWO },
-			{ label: '3 decimals', value: PrecisionOptionsEnum.THREE },
-		];
-	}, []);
-
 	const handleInputCursor = (): void => {
 		const pos = inputRef.current?.input?.selectionStart ?? 0;
 		updateCursorAndDropdown(inputValue, pos);
@@ -273,7 +241,7 @@ function RightContainer({
 				prev.filter((graph) => graph.name !== PANEL_TYPES.LIST),
 			);
 		} else {
-			setGraphTypes(PanelTypesWithData);
+			setGraphTypes(GraphTypes);
 		}
 	}, [currentQuery]);
 
@@ -295,297 +263,269 @@ function RightContainer({
 		<div className="right-container">
 			<section className="header">
 				<div className="purple-dot" />
-				<Typography.Text className="header-text">Panel Settings</Typography.Text>
+				<Typography.Text className="header-text">Panel details</Typography.Text>
 			</section>
-
-			<SettingsSection title="General" defaultOpen icon={<Pencil size={14} />}>
-				<section className="name-description control-container">
-					<Typography.Text className="typography">Name</Typography.Text>
-					<AutoComplete
-						options={dashboardVariableOptions}
-						value={inputValue}
-						onChange={onInputChange}
-						onSelect={onSelect}
-						filterOption={filterOption}
-						style={{ width: '100%' }}
-						getPopupContainer={popupContainer}
-						placeholder="Enter the panel name here..."
-						open={autoCompleteOpen}
-					>
-						<Input
-							rootClassName="name-input"
-							ref={inputRef}
-							onSelect={handleInputCursor}
-							onClick={handleInputCursor}
-							onBlur={(): void => setAutoCompleteOpen(false)}
-						/>
-					</AutoComplete>
-					<Typography.Text className="typography">Description</Typography.Text>
-					<TextArea
-						placeholder="Enter the panel description here..."
-						bordered
-						allowClear
-						value={description}
-						onChange={(event): void =>
-							onChangeHandler(setDescription, event.target.value)
-						}
-						rootClassName="description-input"
-					/>
-				</section>
-			</SettingsSection>
-
-			<section className="panel-config">
-				<SettingsSection
-					title="Visualization"
-					defaultOpen
-					icon={<LayoutDashboard size={14} />}
+			<section className="name-description">
+				<Typography.Text className="typography">Name</Typography.Text>
+				<AutoComplete
+					options={dashboardVariableOptions}
+					value={inputValue}
+					onChange={onInputChange}
+					onSelect={onSelect}
+					filterOption={filterOption}
+					style={{ width: '100%' }}
+					getPopupContainer={popupContainer}
+					placeholder="Enter the panel name here..."
+					open={autoCompleteOpen}
 				>
-					<section className="panel-type control-container">
-						<Typography.Text className="typography">Panel Type</Typography.Text>
-						<Select
-							onChange={setGraphHandler}
-							value={selectedGraph}
-							className="panel-type-select"
-							data-testid="panel-change-select"
-							data-stacking-state={stackedBarChart ? 'true' : 'false'}
-						>
-							{graphTypes.map((item) => (
-								<Option key={item.name} value={item.name}>
-									<div className="select-option">
-										<div className="icon">{item.icon}</div>
-										<Typography.Text className="display">{item.display}</Typography.Text>
-									</div>
-								</Option>
-							))}
-						</Select>
-					</section>
-
-					{allowPanelTimePreference && (
-						<section className="panel-time-preference control-container">
-							<Typography.Text className="panel-time-text">
-								Panel Time Preference
-							</Typography.Text>
-							<TimePreference
-								{...{
-									selectedTime,
-									setSelectedTime,
-								}}
-							/>
-						</section>
-					)}
-
-					{allowStackingBarChart && (
-						<section className="stack-chart control-container">
-							<Typography.Text className="label">Stack series</Typography.Text>
-							<Switch
-								checked={stackedBarChart}
-								size="small"
-								onChange={(checked): void => setStackedBarChart(checked)}
-							/>
-						</section>
-					)}
-
-					{allowFillSpans && (
-						<section className="fill-gaps">
-							<div className="fill-gaps-text-container">
-								<Typography className="fill-gaps-text">Fill gaps</Typography>
-								<Typography.Text className="fill-gaps-text-description">
-									Fill gaps in data with 0 for continuity
-								</Typography.Text>
+					<Input
+						rootClassName="name-input"
+						ref={inputRef}
+						onSelect={handleInputCursor}
+						onClick={handleInputCursor}
+						onBlur={(): void => setAutoCompleteOpen(false)}
+					/>
+				</AutoComplete>
+				<Typography.Text className="typography">Description</Typography.Text>
+				<TextArea
+					placeholder="Enter the panel description here..."
+					bordered
+					allowClear
+					value={description}
+					onChange={(event): void =>
+						onChangeHandler(setDescription, event.target.value)
+					}
+					rootClassName="description-input"
+				/>
+			</section>
+			<section className="panel-config">
+				<Typography.Text className="typography">Panel Type</Typography.Text>
+				<Select
+					onChange={setGraphHandler}
+					value={selectedGraph}
+					style={{ width: '100%' }}
+					className="panel-type-select"
+					data-testid="panel-change-select"
+					data-stacking-state={stackedBarChart ? 'true' : 'false'}
+				>
+					{graphTypes.map((item) => (
+						<Option key={item.name} value={item.name}>
+							<div className="select-option">
+								<div className="icon">{item.icon}</div>
+								<Typography.Text className="display">{item.display}</Typography.Text>
 							</div>
-							<Switch
-								checked={isFillSpans}
-								size="small"
-								onChange={(checked): void => setIsFillSpans(checked)}
+						</Option>
+					))}
+				</Select>
+
+				{allowFillSpans && (
+					<Space className="fill-gaps">
+						<Typography className="fill-gaps-text">Fill gaps</Typography>
+						<Switch
+							checked={isFillSpans}
+							size="small"
+							onChange={(checked): void => setIsFillSpans(checked)}
+						/>
+					</Space>
+				)}
+
+				{allowPanelTimePreference && (
+					<>
+						<Typography.Text className="panel-time-text">
+							Panel Time Preference
+						</Typography.Text>
+						<TimePreference
+							{...{
+								selectedTime,
+								setSelectedTime,
+							}}
+						/>
+					</>
+				)}
+
+				{allowPanelColumnPreference && (
+					<ColumnUnitSelector
+						columnUnits={columnUnits}
+						setColumnUnits={setColumnUnits}
+						isNewDashboard={isNewDashboard}
+					/>
+				)}
+
+				{allowYAxisUnit && (
+					<DashboardYAxisUnitSelectorWrapper
+						onSelect={setYAxisUnit}
+						value={yAxisUnit || ''}
+						fieldLabel={
+							selectedGraphType === PanelDisplay.VALUE ||
+							selectedGraphType === PanelDisplay.PIE
+								? 'Unit'
+								: 'Y Axis Unit'
+						}
+						// Only update the y-axis unit value automatically in create mode
+						shouldUpdateYAxisUnit={isNewDashboard}
+					/>
+				)}
+
+				{allowDecimalPrecision && (
+					<section className="decimal-precision-selector">
+						<Typography.Text className="typography">
+							Decimal Precision
+						</Typography.Text>
+						<Select
+							options={[
+								{ label: '0 decimals', value: PrecisionOptionsEnum.ZERO },
+								{ label: '1 decimal', value: PrecisionOptionsEnum.ONE },
+								{ label: '2 decimals', value: PrecisionOptionsEnum.TWO },
+								{ label: '3 decimals', value: PrecisionOptionsEnum.THREE },
+								{ label: '4 decimals', value: PrecisionOptionsEnum.FOUR },
+								{ label: 'Full Precision', value: PrecisionOptionsEnum.FULL },
+							]}
+							value={decimalPrecision}
+							style={{ width: '100%' }}
+							className="panel-type-select"
+							defaultValue={PrecisionOptionsEnum.TWO}
+							onChange={(val: PrecisionOption): void => setDecimalPrecision(val)}
+						/>
+					</section>
+				)}
+
+				{allowSoftMinMax && (
+					<section className="soft-min-max">
+						<section className="container">
+							<Typography.Text className="text">Soft Min</Typography.Text>
+							<InputNumber
+								type="number"
+								value={softMin}
+								onChange={softMinHandler}
+								rootClassName="input"
 							/>
 						</section>
-					)}
-				</SettingsSection>
-
-				{isFormattingSectionVisible && (
-					<SettingsSection
-						title="Formatting & Units"
-						icon={<SlidersHorizontal size={14} />}
-					>
-						{allowYAxisUnit && (
-							<DashboardYAxisUnitSelectorWrapper
-								onSelect={setYAxisUnit}
-								value={yAxisUnit || ''}
-								fieldLabel={
-									selectedGraphType === PanelDisplay.VALUE ||
-									selectedGraphType === PanelDisplay.PIE
-										? 'Unit'
-										: 'Y Axis Unit'
-								}
-								// Only update the y-axis unit value automatically in create mode
-								shouldUpdateYAxisUnit={isNewDashboard}
+						<section className="container">
+							<Typography.Text className="text">Soft Max</Typography.Text>
+							<InputNumber
+								value={softMax}
+								type="number"
+								rootClassName="input"
+								onChange={softMaxHandler}
 							/>
-						)}
-
-						{allowDecimalPrecision && (
-							<section className="decimal-precision-selector control-container">
-								<Typography.Text className="typography">
-									Decimal Precision
-								</Typography.Text>
-								<Select
-									options={decimapPrecisionOptions}
-									value={decimalPrecision}
-									style={{ width: '100%' }}
-									className="panel-type-select"
-									defaultValue={PrecisionOptionsEnum.TWO}
-									onChange={(val: PrecisionOption): void => setDecimalPrecision(val)}
-								/>
-							</section>
-						)}
-
-						{allowPanelColumnPreference && (
-							<ColumnUnitSelector
-								columnUnits={columnUnits}
-								setColumnUnits={setColumnUnits}
-								isNewDashboard={isNewDashboard}
-							/>
-						)}
-					</SettingsSection>
+						</section>
+					</section>
 				)}
 
-				{isAxisSectionVisible && (
-					<SettingsSection title="Axes" icon={<Axis3D size={14} />}>
-						{allowSoftMinMax && (
-							<section className="soft-min-max">
-								<section className="container">
-									<Typography.Text className="text">Soft Min</Typography.Text>
-									<InputNumber
-										type="number"
-										value={softMin}
-										onChange={softMinHandler}
-										rootClassName="input"
-									/>
-								</section>
-								<section className="container">
-									<Typography.Text className="text">Soft Max</Typography.Text>
-									<InputNumber
-										value={softMax}
-										type="number"
-										rootClassName="input"
-										onChange={softMaxHandler}
-									/>
-								</section>
-							</section>
-						)}
-
-						{allowLogScale && (
-							<section className="log-scale control-container">
-								<Typography.Text className="typography">Y Axis Scale</Typography.Text>
-								<Select
-									onChange={(value): void =>
-										setIsLogScale(value === LogScale.LOGARITHMIC)
-									}
-									value={isLogScale ? LogScale.LOGARITHMIC : LogScale.LINEAR}
-									style={{ width: '100%' }}
-									className="panel-type-select"
-									defaultValue={LogScale.LINEAR}
-								>
-									<Option value={LogScale.LINEAR}>
-										<div className="select-option">
-											<div className="icon">
-												<LineChart size={16} />
-											</div>
-											<Typography.Text className="display">Linear</Typography.Text>
-										</div>
-									</Option>
-									<Option value={LogScale.LOGARITHMIC}>
-										<div className="select-option">
-											<div className="icon">
-												<Spline size={16} />
-											</div>
-											<Typography.Text className="display">Logarithmic</Typography.Text>
-										</div>
-									</Option>
-								</Select>
-							</section>
-						)}
-					</SettingsSection>
-				)}
-
-				{isLegendSectionVisible && (
-					<SettingsSection title="Legend" icon={<Layers size={14} />}>
-						{allowLegendPosition && (
-							<section className="legend-position control-container">
-								<Typography.Text className="typography">Position</Typography.Text>
-								<Select
-									onChange={(value: LegendPosition): void => setLegendPosition(value)}
-									value={legendPosition}
-									style={{ width: '100%' }}
-									className="panel-type-select"
-									defaultValue={LegendPosition.BOTTOM}
-								>
-									<Option value={LegendPosition.BOTTOM}>
-										<div className="select-option">
-											<Typography.Text className="display">Bottom</Typography.Text>
-										</div>
-									</Option>
-									<Option value={LegendPosition.RIGHT}>
-										<div className="select-option">
-											<Typography.Text className="display">Right</Typography.Text>
-										</div>
-									</Option>
-								</Select>
-							</section>
-						)}
-
-						{allowLegendColors && (
-							<section className="legend-colors">
-								<LegendColors
-									customLegendColors={customLegendColors}
-									setCustomLegendColors={setCustomLegendColors}
-									queryResponse={queryResponse}
-								/>
-							</section>
-						)}
-					</SettingsSection>
+				{allowStackingBarChart && (
+					<section className="stack-chart">
+						<Typography.Text className="label">Stack series</Typography.Text>
+						<Switch
+							checked={stackedBarChart}
+							size="small"
+							onChange={(checked): void => setStackedBarChart(checked)}
+						/>
+					</section>
 				)}
 
 				{allowBucketConfig && (
-					<SettingsSection title="Histogram / Buckets">
-						<section className="bucket-config control-container">
-							<Typography.Text className="label">Number of buckets</Typography.Text>
-							<InputNumber
-								value={bucketCount || null}
-								type="number"
-								min={0}
-								rootClassName="bucket-input"
-								placeholder="Default: 30"
-								onChange={(val): void => {
-									setBucketCount(val || 0);
-								}}
-							/>
-							<Typography.Text className="label bucket-size-label">
-								Bucket width
+					<section className="bucket-config">
+						<Typography.Text className="label">Number of buckets</Typography.Text>
+						<InputNumber
+							value={bucketCount || null}
+							type="number"
+							min={0}
+							rootClassName="bucket-input"
+							placeholder="Default: 30"
+							onChange={(val): void => {
+								setBucketCount(val || 0);
+							}}
+						/>
+						<Typography.Text className="label bucket-size-label">
+							Bucket width
+						</Typography.Text>
+						<InputNumber
+							value={bucketWidth || null}
+							type="number"
+							precision={2}
+							placeholder="Default: Auto"
+							step={0.1}
+							min={0.0}
+							rootClassName="bucket-input"
+							onChange={(val): void => {
+								setBucketWidth(val || 0);
+							}}
+						/>
+						<section className="combine-hist">
+							<Typography.Text className="label">
+								Merge all series into one
 							</Typography.Text>
-							<InputNumber
-								value={bucketWidth || null}
-								type="number"
-								precision={2}
-								placeholder="Default: Auto"
-								step={0.1}
-								min={0.0}
-								rootClassName="bucket-input"
-								onChange={(val): void => {
-									setBucketWidth(val || 0);
-								}}
+							<Switch
+								checked={combineHistogram}
+								size="small"
+								onChange={(checked): void => setCombineHistogram(checked)}
 							/>
-							<section className="combine-hist">
-								<Typography.Text className="label">
-									Merge all series into one
-								</Typography.Text>
-								<Switch
-									checked={combineHistogram}
-									size="small"
-									onChange={(checked): void => setCombineHistogram(checked)}
-								/>
-							</section>
 						</section>
-					</SettingsSection>
+					</section>
+				)}
+
+				{allowLogScale && (
+					<section className="log-scale">
+						<Typography.Text className="typography">Y Axis Scale</Typography.Text>
+						<Select
+							onChange={(value): void => setIsLogScale(value === LogScale.LOGARITHMIC)}
+							value={isLogScale ? LogScale.LOGARITHMIC : LogScale.LINEAR}
+							style={{ width: '100%' }}
+							className="panel-type-select"
+							defaultValue={LogScale.LINEAR}
+						>
+							<Option value={LogScale.LINEAR}>
+								<div className="select-option">
+									<div className="icon">
+										<LineChart size={16} />
+									</div>
+									<Typography.Text className="display">Linear</Typography.Text>
+								</div>
+							</Option>
+							<Option value={LogScale.LOGARITHMIC}>
+								<div className="select-option">
+									<div className="icon">
+										<Spline size={16} />
+									</div>
+									<Typography.Text className="display">Logarithmic</Typography.Text>
+								</div>
+							</Option>
+						</Select>
+					</section>
+				)}
+
+				{allowLegendPosition && (
+					<section className="legend-position">
+						<Typography.Text className="typography">Legend Position</Typography.Text>
+						<Select
+							onChange={(value: LegendPosition): void => setLegendPosition(value)}
+							value={legendPosition}
+							style={{ width: '100%' }}
+							className="panel-type-select"
+							defaultValue={LegendPosition.BOTTOM}
+						>
+							<Option value={LegendPosition.BOTTOM}>
+								<div className="select-option">
+									<Typography.Text className="display">Bottom</Typography.Text>
+								</div>
+							</Option>
+							<Option value={LegendPosition.RIGHT}>
+								<div className="select-option">
+									<Typography.Text className="display">Right</Typography.Text>
+								</div>
+							</Option>
+						</Select>
+					</section>
+				)}
+
+				{allowLegendColors && (
+					<section className="legend-colors">
+						<LegendColors
+							customLegendColors={customLegendColors}
+							setCustomLegendColors={setCustomLegendColors}
+							queryResponse={queryResponse}
+						/>
+					</section>
 				)}
 			</section>
 
@@ -601,25 +541,17 @@ function RightContainer({
 			)}
 
 			{allowContextLinks && (
-				<SettingsSection
-					title="Context Links"
-					icon={<Link size={14} />}
-					defaultOpen={!!contextLinks.linksData.length}
-				>
+				<section className="context-links">
 					<ContextLinks
 						contextLinks={contextLinks}
 						setContextLinks={setContextLinks}
 						selectedWidget={selectedWidget}
 					/>
-				</SettingsSection>
+				</section>
 			)}
 
 			{allowThreshold && (
-				<SettingsSection
-					title="Thresholds"
-					icon={<Antenna size={14} />}
-					defaultOpen={!!thresholds.length}
-				>
+				<section>
 					<ThresholdSelector
 						thresholds={thresholds}
 						setThresholds={setThresholds}
@@ -627,7 +559,7 @@ function RightContainer({
 						selectedGraph={selectedGraph}
 						columnUnits={columnUnits}
 					/>
-				</SettingsSection>
+				</section>
 			)}
 		</div>
 	);

frontend/src/container/NewWidget/__test__/NewWidget.test.tsx

@@ -36,7 +36,7 @@ const checkStackSeriesState = (
 	expect(getByTextUtil(container, 'Stack series')).toBeInTheDocument();
 
 	const stackSeriesSection = container.querySelector(
-		'.stack-chart',
+		'section > .stack-chart',
 	) as HTMLElement;
 	expect(stackSeriesSection).toBeInTheDocument();
 
@@ -326,7 +326,7 @@ describe('Stacking bar in new panel', () => {
 		expect(getByText('Stack series')).toBeInTheDocument();
 
 		// Verify section exists
-		const section = container.querySelector('.stack-chart');
+		const section = container.querySelector('section > .stack-chart');
 		expect(section).toBeInTheDocument();
 
 		// Verify switch is present and enabled (ant-switch-checked)

frontend/src/container/NewWidget/index.tsx

@@ -835,54 +835,56 @@ function NewWidget({
 				</LeftContainerWrapper>
 
 				<RightContainerWrapper>
-					<RightContainer
-						setGraphHandler={setGraphHandler}
-						title={title}
-						setTitle={setTitle}
-						description={description}
-						setDescription={setDescription}
-						stackedBarChart={stackedBarChart}
-						setStackedBarChart={setStackedBarChart}
-						opacity={opacity}
-						yAxisUnit={yAxisUnit}
-						columnUnits={columnUnits}
-						setColumnUnits={setColumnUnits}
-						bucketCount={bucketCount}
-						bucketWidth={bucketWidth}
-						combineHistogram={combineHistogram}
-						setCombineHistogram={setCombineHistogram}
-						setBucketWidth={setBucketWidth}
-						setBucketCount={setBucketCount}
-						setOpacity={setOpacity}
-						selectedNullZeroValue={selectedNullZeroValue}
-						setSelectedNullZeroValue={setSelectedNullZeroValue}
-						selectedGraph={graphType}
-						setSelectedTime={setSelectedTime}
-						selectedTime={selectedTime}
-						setYAxisUnit={setYAxisUnit}
-						decimalPrecision={decimalPrecision}
-						setDecimalPrecision={setDecimalPrecision}
-						thresholds={thresholds}
-						setThresholds={setThresholds}
-						selectedWidget={selectedWidget}
-						isFillSpans={isFillSpans}
-						setIsFillSpans={setIsFillSpans}
-						isLogScale={isLogScale}
-						setIsLogScale={setIsLogScale}
-						legendPosition={legendPosition}
-						setLegendPosition={setLegendPosition}
-						customLegendColors={customLegendColors}
-						setCustomLegendColors={setCustomLegendColors}
-						queryResponse={queryResponse}
-						softMin={softMin}
-						setSoftMin={setSoftMin}
-						softMax={softMax}
-						setSoftMax={setSoftMax}
-						contextLinks={contextLinks}
-						setContextLinks={setContextLinks}
-						enableDrillDown={enableDrillDown}
-						isNewDashboard={isNewDashboard}
-					/>
+					<OverlayScrollbar>
+						<RightContainer
+							setGraphHandler={setGraphHandler}
+							title={title}
+							setTitle={setTitle}
+							description={description}
+							setDescription={setDescription}
+							stackedBarChart={stackedBarChart}
+							setStackedBarChart={setStackedBarChart}
+							opacity={opacity}
+							yAxisUnit={yAxisUnit}
+							columnUnits={columnUnits}
+							setColumnUnits={setColumnUnits}
+							bucketCount={bucketCount}
+							bucketWidth={bucketWidth}
+							combineHistogram={combineHistogram}
+							setCombineHistogram={setCombineHistogram}
+							setBucketWidth={setBucketWidth}
+							setBucketCount={setBucketCount}
+							setOpacity={setOpacity}
+							selectedNullZeroValue={selectedNullZeroValue}
+							setSelectedNullZeroValue={setSelectedNullZeroValue}
+							selectedGraph={graphType}
+							setSelectedTime={setSelectedTime}
+							selectedTime={selectedTime}
+							setYAxisUnit={setYAxisUnit}
+							decimalPrecision={decimalPrecision}
+							setDecimalPrecision={setDecimalPrecision}
+							thresholds={thresholds}
+							setThresholds={setThresholds}
+							selectedWidget={selectedWidget}
+							isFillSpans={isFillSpans}
+							setIsFillSpans={setIsFillSpans}
+							isLogScale={isLogScale}
+							setIsLogScale={setIsLogScale}
+							legendPosition={legendPosition}
+							setLegendPosition={setLegendPosition}
+							customLegendColors={customLegendColors}
+							setCustomLegendColors={setCustomLegendColors}
+							queryResponse={queryResponse}
+							softMin={softMin}
+							setSoftMin={setSoftMin}
+							softMax={softMax}
+							setSoftMax={setSoftMax}
+							contextLinks={contextLinks}
+							setContextLinks={setContextLinks}
+							enableDrillDown={enableDrillDown}
+							isNewDashboard={isNewDashboard}
+						/>
+					</OverlayScrollbar>
 				</RightContainerWrapper>
 			</PanelContainer>
 			<Modal

frontend/src/container/NewWidget/styles.ts

@@ -15,14 +15,7 @@ export const RightContainerWrapper = styled(Col)`
 		overflow-y: auto;
 	}
 	&::-webkit-scrollbar {
-		width: 0.3rem;
-	}
-	&::-webkit-scrollbar-thumb {
-		background: rgb(136, 136, 136);
-		border-radius: 0.625rem;
-	}
-	&::-webkit-scrollbar-track {
-		background: transparent;
+		width: 0rem;
 	}
 `;
 

frontend/src/container/NewWidget/utils.ts

@@ -11,8 +11,11 @@ import { getYAxisCategories } from 'components/YAxisUnitSelector/utils';
 import {
 	initialQueryBuilderFormValuesMap,
 	PANEL_TYPES,
-	PANEL_TYPES_INITIAL_QUERY,
 } from 'constants/queryBuilder';
+import {
+	listViewInitialLogQuery,
+	PANEL_TYPES_INITIAL_QUERY,
+} from 'container/DashboardContainer/ComponentsSlider/constants';
 import {
 	defaultLogsSelectedColumns,
 	defaultTraceSelectedColumns,
@@ -546,7 +549,10 @@ export const getDefaultWidgetData = (
 	nullZeroValues: '',
 	opacity: '',
 	panelTypes: name,
-	query: PANEL_TYPES_INITIAL_QUERY[name],
+	query:
+		name === PANEL_TYPES.LIST
+			? listViewInitialLogQuery
+			: PANEL_TYPES_INITIAL_QUERY[name],
 	timePreferance: 'GLOBAL_TIME',
 	softMax: null,
 	softMin: null,

frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx

@@ -30,7 +30,6 @@ import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { addCustomTimeRange } from 'utils/customTimeRangeUtils';
-import { persistTimeDurationForRoute } from 'utils/metricsTimeStorageUtils';
 import { normalizeTimeToMs } from 'utils/timeUtils';
 import { v4 as uuid } from 'uuid';
 
@@ -235,7 +234,20 @@ function DateTimeSelection({
 
 	const updateLocalStorageForRoutes = useCallback(
 		(value: Time | string): void => {
-			persistTimeDurationForRoute(location.pathname, String(value));
+			const preRoutes = getLocalStorageKey(LOCALSTORAGE.METRICS_TIME_IN_DURATION);
+			if (preRoutes !== null) {
+				const preRoutesObject = JSON.parse(preRoutes);
+
+				const preRoute = {
+					...preRoutesObject,
+				};
+				preRoute[location.pathname] = value;
+
+				setLocalStorageKey(
+					LOCALSTORAGE.METRICS_TIME_IN_DURATION,
+					JSON.stringify(preRoute),
+				);
+			}
 		},
 		[location.pathname],
 	);
@@ -726,7 +738,6 @@ function DateTimeSelection({
 						showRecentlyUsed={showRecentlyUsed}
 						minTime={minTimeForDateTimePicker}
 						maxTime={maxTimeForDateTimePicker}
-						isModalTimeSelection={isModalTimeSelection}
 					/>
 
 					{showAutoRefresh && selectedTime !== 'custom' && (

frontend/src/hooks/__tests__/useZoomOut.test.ts

@@ -1,160 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import { QueryParams } from 'constants/query';
-import { GlobalReducer } from 'types/reducer/globalTime';
-
-import { useZoomOut } from '../useZoomOut';
-
-const mockDispatch = jest.fn();
-const mockSafeNavigate = jest.fn();
-const mockUrlQueryDelete = jest.fn();
-const mockUrlQuerySet = jest.fn();
-const mockUrlQueryToString = jest.fn(() => '');
-
-interface MockAppState {
-	globalTime: Pick<GlobalReducer, 'minTime' | 'maxTime'>;
-}
-
-jest.mock('react-redux', () => ({
-	useDispatch: (): jest.Mock => mockDispatch,
-	useSelector: <T>(selector: (state: MockAppState) => T): T => {
-		const mockState: MockAppState = {
-			globalTime: {
-				minTime: 15 * 60 * 1000 * 1e6, // 15 min in nanoseconds
-				maxTime: 30 * 60 * 1000 * 1e6, // 30 min in nanoseconds (mock for getNextZoomOutRange)
-			},
-		};
-		return selector(mockState);
-	},
-}));
-
-jest.mock('react-router-dom', () => ({
-	useLocation: (): { pathname: string } => ({ pathname: '/logs-explorer' }),
-}));
-
-jest.mock('hooks/useSafeNavigate', () => ({
-	useSafeNavigate: (): { safeNavigate: typeof mockSafeNavigate } => ({
-		safeNavigate: mockSafeNavigate,
-	}),
-}));
-
-interface MockUrlQuery {
-	delete: typeof mockUrlQueryDelete;
-	set: typeof mockUrlQuerySet;
-	get: () => null;
-	toString: typeof mockUrlQueryToString;
-}
-
-jest.mock('hooks/useUrlQuery', () => ({
-	__esModule: true,
-	default: (): MockUrlQuery => ({
-		delete: mockUrlQueryDelete,
-		set: mockUrlQuerySet,
-		get: (): null => null,
-		toString: mockUrlQueryToString,
-	}),
-}));
-
-const mockGetNextZoomOutRange = jest.fn();
-jest.mock('lib/zoomOutUtils', () => ({
-	getNextZoomOutRange: (
-		...args: unknown[]
-	): ReturnType<typeof mockGetNextZoomOutRange> =>
-		mockGetNextZoomOutRange(...args),
-}));
-
-describe('useZoomOut', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockUrlQueryToString.mockReturnValue('relativeTime=45m');
-	});
-
-	it('should do nothing when isDisabled is true', () => {
-		const { result } = renderHook(() => useZoomOut({ isDisabled: true }));
-
-		act(() => {
-			result.current();
-		});
-
-		expect(mockGetNextZoomOutRange).not.toHaveBeenCalled();
-		expect(mockDispatch).not.toHaveBeenCalled();
-		expect(mockSafeNavigate).not.toHaveBeenCalled();
-	});
-
-	it('should do nothing when getNextZoomOutRange returns null', () => {
-		mockGetNextZoomOutRange.mockReturnValue(null);
-
-		const { result } = renderHook(() => useZoomOut());
-
-		act(() => {
-			result.current();
-		});
-
-		expect(mockGetNextZoomOutRange).toHaveBeenCalled();
-		expect(mockDispatch).not.toHaveBeenCalled();
-		expect(mockSafeNavigate).not.toHaveBeenCalled();
-	});
-
-	it('should dispatch preset and update URL when result has preset', () => {
-		mockGetNextZoomOutRange.mockReturnValue({
-			range: [1000, 2000],
-			preset: '45m',
-		});
-
-		const { result } = renderHook(() => useZoomOut());
-
-		act(() => {
-			result.current();
-		});
-
-		expect(mockDispatch).toHaveBeenCalledWith(expect.any(Function));
-		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.startTime);
-		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.endTime);
-		expect(mockUrlQuerySet).toHaveBeenCalledWith(QueryParams.relativeTime, '45m');
-		expect(mockSafeNavigate).toHaveBeenCalledWith(
-			expect.stringContaining('/logs-explorer'),
-		);
-	});
-
-	it('should dispatch custom range and update URL when result has no preset', () => {
-		mockGetNextZoomOutRange.mockReturnValue({
-			range: [1000000, 2000000],
-			preset: null,
-		});
-
-		const { result } = renderHook(() => useZoomOut());
-
-		act(() => {
-			result.current();
-		});
-
-		expect(mockDispatch).toHaveBeenCalledWith(expect.any(Function));
-		expect(mockUrlQuerySet).toHaveBeenCalledWith(
-			QueryParams.startTime,
-			'1000000',
-		);
-		expect(mockUrlQuerySet).toHaveBeenCalledWith(QueryParams.endTime, '2000000');
-		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.relativeTime);
-		expect(mockSafeNavigate).toHaveBeenCalledWith(
-			expect.stringContaining('/logs-explorer'),
-		);
-	});
-
-	it('should delete urlParamsToDelete when provided', () => {
-		mockGetNextZoomOutRange.mockReturnValue({
-			range: [1000, 2000],
-			preset: '45m',
-		});
-
-		const { result } = renderHook(() =>
-			useZoomOut({
-				urlParamsToDelete: [QueryParams.activeLogId],
-			}),
-		);
-
-		act(() => {
-			result.current();
-		});
-
-		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.activeLogId);
-	});
-});

frontend/src/hooks/queryBuilder/useQueryBuilderOperations.ts

@@ -12,8 +12,6 @@ import {
 	ATTRIBUTE_TYPES,
 	initialAutocompleteData,
 	initialQueryBuilderFormValuesMap,
-	listViewInitialLogQuery,
-	listViewInitialTraceQuery,
 	mapOfFormulaToFilters,
 	mapOfQueryFilters,
 	PANEL_TYPES,
@@ -25,6 +23,10 @@ import {
 	metricsUnknownSpaceAggregateOperatorOptions,
 	metricsUnknownTimeAggregateOperatorOptions,
 } from 'constants/queryBuilderOperators';
+import {
+	listViewInitialLogQuery,
+	listViewInitialTraceQuery,
+} from 'container/DashboardContainer/ComponentsSlider/constants';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { getMetricsOperatorsByAttributeType } from 'lib/newQueryBuilder/getMetricsOperatorsByAttributeType';
 import { getOperatorsBySourceAndPanelType } from 'lib/newQueryBuilder/getOperatorsBySourceAndPanelType';

frontend/src/hooks/useZoomOut.ts

@@ -1,79 +0,0 @@
-import { useCallback, useRef } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { useDispatch, useSelector } from 'react-redux';
-import { useLocation } from 'react-router-dom';
-import { QueryParams } from 'constants/query';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import useUrlQuery from 'hooks/useUrlQuery';
-import { getNextZoomOutRange } from 'lib/zoomOutUtils';
-import { UpdateTimeInterval } from 'store/actions';
-import { AppState } from 'store/reducers';
-import { GlobalReducer } from 'types/reducer/globalTime';
-import { persistTimeDurationForRoute } from 'utils/metricsTimeStorageUtils';
-
-export interface UseZoomOutOptions {
-	/** When true, the zoom out handler does nothing (e.g. when live logs are enabled) */
-	isDisabled?: boolean;
-	/** URL params to delete when zooming out (e.g. [QueryParams.activeLogId] for logs) */
-	urlParamsToDelete?: string[];
-}
-
-/**
- * Reusable hook for zoom-out functionality in explorers (logs, traces, etc.).
- * Computes the next time range using the zoom-out ladder, updates Redux global time,
- * and navigates with the new URL params.
- */
-const EMPTY_PARAMS: string[] = [];
-
-export function useZoomOut(options: UseZoomOutOptions = {}): () => void {
-	const { isDisabled = false, urlParamsToDelete = EMPTY_PARAMS } = options;
-	const urlParamsToDeleteRef = useRef(urlParamsToDelete);
-	urlParamsToDeleteRef.current = urlParamsToDelete;
-
-	const dispatch = useDispatch();
-	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-	const urlQuery = useUrlQuery();
-	const location = useLocation();
-	const { safeNavigate } = useSafeNavigate();
-
-	return useCallback((): void => {
-		if (isDisabled) {
-			return;
-		}
-		const minMs = Math.floor((minTime ?? 0) / 1e6);
-		const maxMs = Math.floor((maxTime ?? 0) / 1e6);
-		const result = getNextZoomOutRange(minMs, maxMs);
-		if (!result) {
-			return;
-		}
-		const [newStartMs, newEndMs] = result.range;
-		const { preset } = result;
-
-		if (preset) {
-			dispatch(UpdateTimeInterval(preset));
-			urlQuery.delete(QueryParams.startTime);
-			urlQuery.delete(QueryParams.endTime);
-			urlQuery.set(QueryParams.relativeTime, preset);
-			persistTimeDurationForRoute(location.pathname, preset);
-		} else {
-			dispatch(UpdateTimeInterval('custom', [newStartMs, newEndMs]));
-			urlQuery.set(QueryParams.startTime, String(newStartMs));
-			urlQuery.set(QueryParams.endTime, String(newEndMs));
-			urlQuery.delete(QueryParams.relativeTime);
-		}
-		for (const param of urlParamsToDeleteRef.current) {
-			urlQuery.delete(param);
-		}
-		safeNavigate(`${location.pathname}?${urlQuery.toString()}`);
-	}, [
-		dispatch,
-		isDisabled,
-		location.pathname,
-		maxTime,
-		minTime,
-		safeNavigate,
-		urlQuery,
-	]);
-}

frontend/src/lib/__tests__/zoomOutUtils.test.ts

@@ -1,147 +0,0 @@
-import {
-	getNextDurationInLadder,
-	getNextZoomOutRange,
-	isZoomOutDisabled,
-	ZoomOutResult,
-} from '../zoomOutUtils';
-
-const MS_PER_MIN = 60 * 1000;
-const MS_PER_HOUR = 60 * MS_PER_MIN;
-const MS_PER_DAY = 24 * MS_PER_HOUR;
-const MS_PER_WEEK = 7 * MS_PER_DAY;
-
-// Fixed "now" for deterministic tests: 2024-01-15 12:00:00 UTC
-const NOW_MS = 1705312800000;
-
-describe('zoomOutUtils', () => {
-	beforeEach(() => {
-		jest.spyOn(Date, 'now').mockReturnValue(NOW_MS);
-	});
-
-	afterEach(() => {
-		jest.restoreAllMocks();
-	});
-
-	describe('getNextDurationInLadder', () => {
-		it('should use 3x zoom out below 15m until reaching 15m', () => {
-			expect(getNextDurationInLadder(1 * MS_PER_MIN)).toBe(3 * MS_PER_MIN);
-			expect(getNextDurationInLadder(2 * MS_PER_MIN)).toBe(6 * MS_PER_MIN);
-			expect(getNextDurationInLadder(3 * MS_PER_MIN)).toBe(9 * MS_PER_MIN);
-			expect(getNextDurationInLadder(4 * MS_PER_MIN)).toBe(12 * MS_PER_MIN);
-			expect(getNextDurationInLadder(5 * MS_PER_MIN)).toBe(15 * MS_PER_MIN); // cap at 15m
-			expect(getNextDurationInLadder(6 * MS_PER_MIN)).toBe(15 * MS_PER_MIN); // 18m capped
-		});
-
-		it('should return next step for each ladder rung from 15m onward', () => {
-			expect(getNextDurationInLadder(10 * MS_PER_MIN)).toBe(15 * MS_PER_MIN);
-			expect(getNextDurationInLadder(15 * MS_PER_MIN)).toBe(45 * MS_PER_MIN);
-			expect(getNextDurationInLadder(45 * MS_PER_MIN)).toBe(2 * MS_PER_HOUR);
-			expect(getNextDurationInLadder(2 * MS_PER_HOUR)).toBe(7 * MS_PER_HOUR);
-			expect(getNextDurationInLadder(7 * MS_PER_HOUR)).toBe(21 * MS_PER_HOUR);
-			expect(getNextDurationInLadder(21 * MS_PER_HOUR)).toBe(1 * MS_PER_DAY);
-			expect(getNextDurationInLadder(1 * MS_PER_DAY)).toBe(2 * MS_PER_DAY);
-			expect(getNextDurationInLadder(2 * MS_PER_DAY)).toBe(3 * MS_PER_DAY);
-			expect(getNextDurationInLadder(3 * MS_PER_DAY)).toBe(1 * MS_PER_WEEK);
-			expect(getNextDurationInLadder(1 * MS_PER_WEEK)).toBe(2 * MS_PER_WEEK);
-			expect(getNextDurationInLadder(2 * MS_PER_WEEK)).toBe(30 * MS_PER_DAY);
-		});
-
-		it('should return MAX when at or past 1 month (no wrap)', () => {
-			expect(getNextDurationInLadder(30 * MS_PER_DAY)).toBe(30 * MS_PER_DAY);
-			expect(getNextDurationInLadder(31 * MS_PER_DAY)).toBe(30 * MS_PER_DAY);
-		});
-
-		it('should return next step for duration between ladder rungs', () => {
-			expect(getNextDurationInLadder(1 * MS_PER_HOUR)).toBe(2 * MS_PER_HOUR);
-			expect(getNextDurationInLadder(5 * MS_PER_HOUR)).toBe(7 * MS_PER_HOUR);
-			expect(getNextDurationInLadder(12 * MS_PER_HOUR)).toBe(21 * MS_PER_HOUR);
-		});
-	});
-
-	describe('getNextZoomOutRange', () => {
-		it('should return null when duration is zero or negative', () => {
-			expect(getNextZoomOutRange(NOW_MS, NOW_MS)).toBeNull();
-			expect(getNextZoomOutRange(NOW_MS, NOW_MS - 1000)).toBeNull();
-		});
-
-		it('should return center-anchored range and preset=null when new end does not exceed now (Phase 1)', () => {
-			// 15m range centered well before now so zoom to 45m keeps end <= now
-			// Center at now-30m: end = center + 22.5m = now - 7.5m <= now
-			const centerMs = NOW_MS - 30 * MS_PER_MIN;
-			const start15m = centerMs - 7.5 * MS_PER_MIN;
-			const end15m = centerMs + 7.5 * MS_PER_MIN;
-			const result = getNextZoomOutRange(start15m, end15m) as ZoomOutResult;
-
-			expect(result).not.toBeNull();
-			expect(result.preset).toBeNull(); // Phase 1: preserve center-anchored range, avoid GetMinMax "last X from now"
-			const [newStart, newEnd] = result.range;
-			expect(newEnd - newStart).toBe(45 * MS_PER_MIN);
-			const newCenter = (newStart + newEnd) / 2;
-			expect(Math.abs(newCenter - centerMs)).toBeLessThan(2000);
-			expect(newEnd).toBeLessThanOrEqual(NOW_MS + 1000);
-		});
-
-		it('should return end-anchored range when new end would exceed now (Phase 2)', () => {
-			// 22hr range ending at now - zoom to 1d (24hr) would push end past now
-			// Next ladder step from 22hr is 1d
-			const start22h = NOW_MS - 22 * MS_PER_HOUR;
-			const end22h = NOW_MS;
-			const result = getNextZoomOutRange(start22h, end22h) as ZoomOutResult;
-
-			expect(result).not.toBeNull();
-			expect(result.preset).toBe('1d');
-			const [newStart, newEnd] = result.range;
-			expect(newEnd).toBe(NOW_MS); // End anchored at now
-			expect(newStart).toBe(NOW_MS - 1 * MS_PER_DAY);
-		});
-
-		it('should return correct preset for each ladder step', () => {
-			const presets: [number, number, string][] = [
-				[15 * MS_PER_MIN, 0, '45m'],
-				[45 * MS_PER_MIN, 0, '2h'],
-				[2 * MS_PER_HOUR, 0, '7h'],
-				[7 * MS_PER_HOUR, 0, '21h'],
-				[21 * MS_PER_HOUR, 0, '1d'],
-				[1 * MS_PER_DAY, 0, '2d'],
-				[2 * MS_PER_DAY, 0, '3d'],
-				[3 * MS_PER_DAY, 0, '1w'],
-				[1 * MS_PER_WEEK, 0, '2w'],
-				[2 * MS_PER_WEEK, 0, '1month'],
-			];
-
-			presets.forEach(([durationMs, offset, expectedPreset]) => {
-				const end = NOW_MS - offset;
-				const start = end - durationMs;
-				const result = getNextZoomOutRange(start, end);
-				expect(result?.preset).toBe(expectedPreset);
-			});
-		});
-
-		it('isZoomOutDisabled returns true when duration >= 1 month', () => {
-			expect(isZoomOutDisabled(30 * MS_PER_DAY)).toBe(true);
-			expect(isZoomOutDisabled(31 * MS_PER_DAY)).toBe(true);
-			expect(isZoomOutDisabled(29 * MS_PER_DAY)).toBe(false);
-			expect(isZoomOutDisabled(15 * MS_PER_MIN)).toBe(false);
-		});
-
-		it('should return null when at 1 month (no zoom out beyond max)', () => {
-			const start1m = NOW_MS - 30 * MS_PER_DAY;
-			const end1m = NOW_MS;
-			const result = getNextZoomOutRange(start1m, end1m);
-
-			expect(result).toBeNull();
-		});
-
-		it('should zoom out 3x from 5m range to 15m then continue with ladder', () => {
-			// 5m range ending at now → 3x = 15m
-			const start5m = NOW_MS - 5 * MS_PER_MIN;
-			const end5m = NOW_MS;
-			const result = getNextZoomOutRange(start5m, end5m) as ZoomOutResult;
-
-			expect(result).not.toBeNull();
-			expect(result.preset).toBe('15m');
-			const [newStart, newEnd] = result.range;
-			expect(newEnd - newStart).toBe(15 * MS_PER_MIN);
-		});
-	});
-});

frontend/src/lib/zoomOutUtils.ts

@@ -1,139 +0,0 @@
-/**
- * Custom Time Picker zoom-out ladder:
- * - Until 1 day: 15m → 45m → 2hr → 7hr → 21hr
- * - Then fixed: 1d → 2d → 3d → 1w → 2w → 1m
- * - At 1 month: zoom out is disabled (max range)
- */
-
-import type {
-	CustomTimeType,
-	Time,
-} from 'container/TopNav/DateTimeSelectionV2/types';
-
-const MS_PER_MIN = 60 * 1000;
-const MS_PER_HOUR = 60 * MS_PER_MIN;
-const MS_PER_DAY = 24 * MS_PER_HOUR;
-const MS_PER_WEEK = 7 * MS_PER_DAY;
-
-const ZOOM_OUT_LADDER_MS: number[] = [
-	15 * MS_PER_MIN, // 15m
-	45 * MS_PER_MIN, // 45m
-	2 * MS_PER_HOUR, // 2hr
-	7 * MS_PER_HOUR, // 7hr
-	21 * MS_PER_HOUR, // 21hr
-	1 * MS_PER_DAY, // 1d
-	2 * MS_PER_DAY, // 2d
-	3 * MS_PER_DAY, // 3d
-	1 * MS_PER_WEEK, // 1w
-	2 * MS_PER_WEEK, // 2w
-	30 * MS_PER_DAY, // 1m
-];
-
-const LADDER_LAST_INDEX = ZOOM_OUT_LADDER_MS.length - 1;
-const MAX_DURATION = ZOOM_OUT_LADDER_MS[LADDER_LAST_INDEX];
-const MIN_LADDER_DURATION_MS = ZOOM_OUT_LADDER_MS[0]; // 15m - below this we use 3x
-
-export const MAX_ZOOM_OUT_DURATION_MS = MAX_DURATION;
-
-/** Returns true when zoom out should be disabled (range at or beyond 1 month) */
-export function isZoomOutDisabled(durationMs: number): boolean {
-	return durationMs >= MAX_ZOOM_OUT_DURATION_MS;
-}
-
-/** Preset labels for ladder steps supported by GetMinMax (shows "Last 15 minutes" etc. instead of "Custom") */
-const PRESET_FOR_DURATION_MS: Record<number, Time | CustomTimeType> = {
-	[15 * MS_PER_MIN]: '15m',
-	[45 * MS_PER_MIN]: '45m',
-	[2 * MS_PER_HOUR]: '2h',
-	[7 * MS_PER_HOUR]: '7h',
-	[21 * MS_PER_HOUR]: '21h',
-	[1 * MS_PER_DAY]: '1d',
-	[2 * MS_PER_DAY]: '2d',
-	[3 * MS_PER_DAY]: '3d',
-	[1 * MS_PER_WEEK]: '1w',
-	[2 * MS_PER_WEEK]: '2w',
-	[30 * MS_PER_DAY]: '1month',
-};
-
-/**
- * Returns the next duration in the zoom-out ladder for the given current duration.
- * Below 15m: zoom out 3x until we reach 15m, then continue with the ladder.
- * If at or past 1 month, returns MAX_DURATION (no zoom out - button is disabled).
- */
-export function getNextDurationInLadder(durationMs: number): number {
-	if (durationMs >= MAX_DURATION) {
-		return MAX_DURATION; // No zoom out beyond 1 month
-	}
-
-	// Below 15m: zoom out 3x until we reach 15m
-	if (durationMs < MIN_LADDER_DURATION_MS) {
-		const next = durationMs * 3;
-		return Math.min(next, MIN_LADDER_DURATION_MS);
-	}
-
-	// At or above 15m: use the fixed ladder
-	for (let i = 0; i < ZOOM_OUT_LADDER_MS.length; i++) {
-		if (ZOOM_OUT_LADDER_MS[i] > durationMs) {
-			return ZOOM_OUT_LADDER_MS[i];
-		}
-	}
-
-	return MAX_DURATION;
-}
-
-export interface ZoomOutResult {
-	range: [number, number];
-	/** Preset key (e.g. '15m') when range matches a preset - use for display instead of "Custom Date Range" */
-	preset: Time | CustomTimeType | null;
-}
-
-/**
- * Computes the next zoomed-out time range.
- * Phase 1 (center-anchored): While new end <= now, expand from center.
- * Phase 2 (end-anchored at now): When new end would exceed now, anchor end at now and move start backward.
- *
- * @returns ZoomOutResult with range and preset (or null if no change)
- */
-export function getNextZoomOutRange(
-	startMs: number,
-	endMs: number,
-): ZoomOutResult | null {
-	const nowMs = Date.now();
-	const durationMs = endMs - startMs;
-
-	if (durationMs <= 0) {
-		return null;
-	}
-
-	const newDurationMs = getNextDurationInLadder(durationMs);
-
-	// No zoom out when already at max (1 month)
-	if (newDurationMs <= durationMs) {
-		return null;
-	}
-	const centerMs = startMs + durationMs / 2;
-	const computedEndMs = centerMs + newDurationMs / 2;
-
-	let newStartMs: number;
-	let newEndMs: number;
-
-	const isPhase1 = computedEndMs <= nowMs;
-	if (isPhase1) {
-		// Phase 1: center-anchored (historical range not ending at now)
-		newStartMs = centerMs - newDurationMs / 2;
-		newEndMs = computedEndMs;
-	} else {
-		// Phase 2: end-anchored at now
-		newStartMs = nowMs - newDurationMs;
-		newEndMs = nowMs;
-	}
-
-	// Phase 2 only: use preset so GetMinMax produces "last X from now".
-	// Phase 1: preset=null so the center-anchored range is preserved (GetMinMax would discard it).
-	const preset = isPhase1 ? null : PRESET_FOR_DURATION_MS[newDurationMs] ?? null;
-
-	return {
-		range: [Math.round(newStartMs), Math.round(newEndMs)],
-		preset,
-	};
-}

frontend/src/pages/DashboardWidget/__tests__/DashboardWidget.test.tsx

@@ -1,5 +1,4 @@
 import { Route } from 'react-router-dom';
-import * as getDashboardModule from 'api/v1/dashboards/id/get';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { rest, server } from 'mocks-server/server';
 import { render, screen, waitFor } from 'tests/test-utils';
@@ -48,33 +47,35 @@ jest.mock('container/NewWidget', () => ({
 	default: (): JSX.Element => <div data-testid="new-widget">NewWidget</div>,
 }));
 
-// Wrap component in a Route so useParams can resolve dashboardId.
-// Query params are passed via the URL so useUrlQuery (react-router) can read them.
+// nuqs's useQueryState doesn't read from MemoryRouter, so we mock it to return
+// controlled values via the `mockQueryState` map below.
+const mockQueryState: Record<string, string | null> = {};
+
+jest.mock('nuqs', () => ({
+	...jest.requireActual('nuqs'),
+	useQueryState: (key: string): [string | null, jest.Mock] => [
+		mockQueryState[key] ?? null,
+		jest.fn(),
+	],
+}));
+
+// Wrap component in a Route so useParams can resolve dashboardId
 function renderAtRoute(
 	queryState: Record<string, string | null> = {},
 ): ReturnType<typeof render> {
-	const params = new URLSearchParams();
-	Object.entries(queryState).forEach(([k, v]) => {
-		if (v !== null) {
-			params.set(k, v);
-		}
-	});
-	const search = params.toString() ? `?${params.toString()}` : '';
+	Object.assign(mockQueryState, queryState);
 	return render(
 		<Route path="/dashboard/:dashboardId/new">
 			<DashboardWidget />
 		</Route>,
 		undefined,
-		{ initialRoute: `/dashboard/${DASHBOARD_ID}/new${search}` },
+		{ initialRoute: `/dashboard/${DASHBOARD_ID}/new` },
 	);
 }
 
 beforeEach(() => {
 	mockSafeNavigate.mockClear();
-});
-
-afterEach(() => {
-	jest.restoreAllMocks();
+	Object.keys(mockQueryState).forEach((k) => delete mockQueryState[k]);
 });
 
 describe('DashboardWidget', () => {
@@ -101,10 +102,12 @@ describe('DashboardWidget', () => {
 	});
 
 	it('shows spinner while dashboard is loading', () => {
-		// Spy instead of MSW delay('infinite') to avoid leaving an open network handle.
-		jest
-			.spyOn(getDashboardModule, 'default')
-			.mockReturnValue(new Promise(() => {}));
+		server.use(
+			rest.get(
+				`http://localhost/api/v1/dashboards/${DASHBOARD_ID}`,
+				(_req, res, ctx) => res(ctx.delay('infinite')),
+			),
+		);
 
 		renderAtRoute({ widgetId: WIDGET_ID, graphType: PANEL_TYPES.TIME_SERIES });
 

frontend/src/pages/DashboardWidget/index.tsx

@@ -1,11 +1,10 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useQuery } from 'react-query';
 import { generatePath, useParams } from 'react-router-dom';
 import { Card, Typography } from 'antd';
 import getDashboard from 'api/v1/dashboards/id/get';
 import Spinner from 'components/Spinner';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
-import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { DASHBOARD_CACHE_TIME } from 'constants/queryCacheTime';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
@@ -14,7 +13,7 @@ import NewWidget from 'container/NewWidget';
 import { isDrilldownEnabled } from 'container/QueryTable/Drilldown/drilldownUtils';
 import { useTransformDashboardVariables } from 'hooks/dashboard/useTransformDashboardVariables';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import useUrlQuery from 'hooks/useUrlQuery';
+import { parseAsStringEnum, useQueryState } from 'nuqs';
 import { setDashboardVariablesStore } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStore';
 import { Dashboard } from 'types/api/dashboard/getAll';
 
@@ -22,13 +21,11 @@ function DashboardWidget(): JSX.Element | null {
 	const { dashboardId } = useParams<{
 		dashboardId: string;
 	}>();
-	const query = useUrlQuery();
-	const { graphType, widgetId } = useMemo(() => {
-		return {
-			graphType: query.get(QueryParams.graphType) as PANEL_TYPES,
-			widgetId: query.get(QueryParams.widgetId),
-		};
-	}, [query]);
+	const [widgetId] = useQueryState('widgetId');
+	const [graphType] = useQueryState(
+		'graphType',
+		parseAsStringEnum<PANEL_TYPES>(Object.values(PANEL_TYPES)),
+	);
 
 	const { safeNavigate } = useSafeNavigate();
 

frontend/src/providers/Dashboard/Dashboard.tsx

@@ -53,7 +53,9 @@ import { IDashboardContext, WidgetColumnWidths } from './types';
 import { sortLayout } from './util';
 
 export const DashboardContext = createContext<IDashboardContext>({
+	isDashboardSliderOpen: false,
 	isDashboardLocked: false,
+	handleToggleDashboardSlider: () => {},
 	handleDashboardLockToggle: () => {},
 	dashboardResponse: {} as UseQueryResult<
 		SuccessResponseV2<Dashboard>,
@@ -80,6 +82,8 @@ export function DashboardProvider({
 	children,
 	dashboardId,
 }: PropsWithChildren<{ dashboardId: string }>): JSX.Element {
+	const [isDashboardSliderOpen, setIsDashboardSlider] = useState<boolean>(false);
+
 	const [isDashboardLocked, setIsDashboardLocked] = useState<boolean>(false);
 
 	const [
@@ -284,8 +288,13 @@ export function DashboardProvider({
 		}
 	}, [isVisible]);
 
+	const handleToggleDashboardSlider = (value: boolean): void => {
+		setIsDashboardSlider(value);
+	};
+
 	const { mutate: lockDashboard } = useMutation(locked, {
 		onSuccess: (_, props) => {
+			setIsDashboardSlider(false);
 			setIsDashboardLocked(props.lock);
 		},
 		onError: (error) => {
@@ -310,7 +319,9 @@ export function DashboardProvider({
 
 	const value: IDashboardContext = useMemo(
 		() => ({
+			isDashboardSliderOpen,
 			isDashboardLocked,
+			handleToggleDashboardSlider,
 			handleDashboardLockToggle,
 			dashboardResponse,
 			selectedDashboard,
@@ -330,6 +341,7 @@ export function DashboardProvider({
 		}),
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[
+			isDashboardSliderOpen,
 			isDashboardLocked,
 			dashboardResponse,
 			selectedDashboard,

frontend/src/providers/Dashboard/helpers/panelTypeSelectionModalHelper.ts

@@ -1,18 +0,0 @@
-import { create } from 'zustand';
-
-interface IPanelTypeSelectionModalState {
-	isPanelTypeSelectionModalOpen: boolean;
-	setIsPanelTypeSelectionModalOpen: (isOpen: boolean) => void;
-}
-
-/**
- * This helper is used for selecting the panel type when creating a new panel in the dashboard.
- * It uses Zustand for state management to keep track of whether the panel type selection modal is open or closed.
- */
-export const usePanelTypeSelectionModalStore = create<IPanelTypeSelectionModalState>(
-	(set) => ({
-		isPanelTypeSelectionModalOpen: false,
-		setIsPanelTypeSelectionModalOpen: (isOpen): void =>
-			set({ isPanelTypeSelectionModalOpen: isOpen }),
-	}),
-);

frontend/src/providers/Dashboard/types.ts

@@ -9,7 +9,9 @@ export type WidgetColumnWidths = {
 };
 
 export interface IDashboardContext {
+	isDashboardSliderOpen: boolean;
 	isDashboardLocked: boolean;
+	handleToggleDashboardSlider: (value: boolean) => void;
 	handleDashboardLockToggle: (value: boolean) => void;
 	dashboardResponse: UseQueryResult<SuccessResponseV2<Dashboard>, unknown>;
 	selectedDashboard: Dashboard | undefined;

frontend/src/utils/metricsTimeStorageUtils.ts

@@ -1,28 +0,0 @@
-import getLocalStorageKey from 'api/browser/localstorage/get';
-import setLocalStorageKey from 'api/browser/localstorage/set';
-import { LOCALSTORAGE } from 'constants/localStorage';
-
-/**
- * Updates the stored time duration for a route in localStorage.
- * Used by both DateTimeSelectionV2 (manual time pick) and useZoomOut (zoom out button).
- *
- * @param pathname - The route path (e.g. /infrastructure-monitoring/hosts)
- * @param value - The time value to store (preset string like '1w' or JSON string for custom range)
- */
-export function persistTimeDurationForRoute(
-	pathname: string,
-	value: string,
-): void {
-	const preRoutes = getLocalStorageKey(LOCALSTORAGE.METRICS_TIME_IN_DURATION);
-	let preRoutesObject: Record<string, string> = {};
-	try {
-		preRoutesObject = preRoutes ? JSON.parse(preRoutes) : {};
-	} catch {
-		preRoutesObject = {};
-	}
-	const preRoute = { ...preRoutesObject, [pathname]: value };
-	setLocalStorageKey(
-		LOCALSTORAGE.METRICS_TIME_IN_DURATION,
-		JSON.stringify(preRoute),
-	);
-}

pkg/apiserver/signozapiserver/provider.go

@@ -23,7 +23,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/user"
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/types"
-	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
 	"github.com/SigNoz/signoz/pkg/zeus"
 	"github.com/gorilla/mux"
 )
@@ -238,13 +238,13 @@ func (provider *provider) AddToRouter(router *mux.Router) error {
 
 func newSecuritySchemes(role types.Role) []handler.OpenAPISecurityScheme {
 	return []handler.OpenAPISecurityScheme{
-		{Name: authtypes.IdentNProviderAPIkey.StringValue(), Scopes: []string{role.String()}},
-		{Name: authtypes.IdentNProviderTokenizer.StringValue(), Scopes: []string{role.String()}},
+		{Name: ctxtypes.AuthTypeAPIKey.StringValue(), Scopes: []string{role.String()}},
+		{Name: ctxtypes.AuthTypeTokenizer.StringValue(), Scopes: []string{role.String()}},
 	}
 }
 
 func newAnonymousSecuritySchemes(scopes []string) []handler.OpenAPISecurityScheme {
 	return []handler.OpenAPISecurityScheme{
-		{Name: authtypes.IdentNProviderAnonymous.StringValue(), Scopes: scopes},
+		{Name: ctxtypes.AuthTypeAnonymous.StringValue(), Scopes: scopes},
 	}
 }

pkg/apiserver/signozapiserver/session.go

@@ -5,6 +5,7 @@ import (
 
 	"github.com/SigNoz/signoz/pkg/http/handler"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
 	"github.com/gorilla/mux"
 )
 
@@ -72,7 +73,7 @@ func (provider *provider) addSessionRoutes(router *mux.Router) error {
 		SuccessStatusCode:   http.StatusNoContent,
 		ErrorStatusCodes:    []int{http.StatusBadRequest},
 		Deprecated:          false,
-		SecuritySchemes:     []handler.OpenAPISecurityScheme{{Name: authtypes.IdentNProviderTokenizer.StringValue()}},
+		SecuritySchemes:     []handler.OpenAPISecurityScheme{{Name: ctxtypes.AuthTypeTokenizer.StringValue()}},
 	})).Methods(http.MethodDelete).GetError(); err != nil {
 		return err
 	}

pkg/apiserver/signozapiserver/user.go

@@ -5,7 +5,7 @@ import (
 
 	"github.com/SigNoz/signoz/pkg/http/handler"
 	"github.com/SigNoz/signoz/pkg/types"
-	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
 	"github.com/gorilla/mux"
 )
 
@@ -208,7 +208,7 @@ func (provider *provider) addUserRoutes(router *mux.Router) error {
 		SuccessStatusCode:   http.StatusOK,
 		ErrorStatusCodes:    []int{},
 		Deprecated:          false,
-		SecuritySchemes:     []handler.OpenAPISecurityScheme{{Name: authtypes.IdentNProviderTokenizer.StringValue()}},
+		SecuritySchemes:     []handler.OpenAPISecurityScheme{{Name: ctxtypes.AuthTypeTokenizer.StringValue()}},
 	})).Methods(http.MethodGet).GetError(); err != nil {
 		return err
 	}

pkg/authn/passwordauthn/emailpasswordauthn/authn.go

@@ -30,5 +30,5 @@ func (a *AuthN) Authenticate(ctx context.Context, email string, password string,
 		return nil, errors.New(errors.TypeUnauthenticated, types.ErrCodeIncorrectPassword, "invalid email or password")
 	}
 
-	return authtypes.NewIdentity(user.ID, orgID, user.Email, user.Role, authtypes.IdentNProviderTokenizer), nil
+	return authtypes.NewIdentity(user.ID, orgID, user.Email, user.Role), nil
 }

pkg/http/middleware/api_key.go

@@ -0,0 +1,143 @@
+package middleware
+
+import (
+	"context"
+	"log/slog"
+	"net/http"
+	"time"
+
+	"github.com/SigNoz/signoz/pkg/sharder"
+	"github.com/SigNoz/signoz/pkg/sqlstore"
+	"github.com/SigNoz/signoz/pkg/types"
+	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+	"golang.org/x/sync/singleflight"
+)
+
+const (
+	apiKeyCrossOrgMessage string = "::API-KEY-CROSS-ORG::"
+)
+
+type APIKey struct {
+	store   sqlstore.SQLStore
+	uuid    *authtypes.UUID
+	headers []string
+	logger  *slog.Logger
+	sharder sharder.Sharder
+	sfGroup *singleflight.Group
+}
+
+func NewAPIKey(store sqlstore.SQLStore, headers []string, logger *slog.Logger, sharder sharder.Sharder) *APIKey {
+	return &APIKey{
+		store:   store,
+		uuid:    authtypes.NewUUID(),
+		headers: headers,
+		logger:  logger,
+		sharder: sharder,
+		sfGroup: &singleflight.Group{},
+	}
+}
+
+func (a *APIKey) Wrap(next http.Handler) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		var values []string
+		var apiKeyToken string
+		var apiKey types.StorableAPIKey
+
+		for _, header := range a.headers {
+			values = append(values, r.Header.Get(header))
+		}
+
+		ctx, err := a.uuid.ContextFromRequest(r.Context(), values...)
+		if err != nil {
+			next.ServeHTTP(w, r)
+			return
+		}
+
+		apiKeyToken, ok := authtypes.UUIDFromContext(ctx)
+		if !ok {
+			next.ServeHTTP(w, r)
+			return
+		}
+
+		err = a.
+			store.
+			BunDB().
+			NewSelect().
+			Model(&apiKey).
+			Where("token = ?", apiKeyToken).
+			Scan(r.Context())
+		if err != nil {
+			next.ServeHTTP(w, r)
+			return
+		}
+
+		// allow the APIKey if expires_at is not set
+		if apiKey.ExpiresAt.Before(time.Now()) && !apiKey.ExpiresAt.Equal(types.NEVER_EXPIRES) {
+			next.ServeHTTP(w, r)
+			return
+		}
+
+		// get user from db
+		user := types.User{}
+		err = a.store.BunDB().NewSelect().Model(&user).Where("id = ?", apiKey.UserID).Scan(r.Context())
+		if err != nil {
+			next.ServeHTTP(w, r)
+			return
+		}
+
+		jwt := authtypes.Claims{
+			UserID: user.ID.String(),
+			Role:   apiKey.Role,
+			Email:  user.Email.String(),
+			OrgID:  user.OrgID.String(),
+		}
+
+		ctx = authtypes.NewContextWithClaims(ctx, jwt)
+
+		claims, err := authtypes.ClaimsFromContext(ctx)
+		if err != nil {
+			next.ServeHTTP(w, r)
+			return
+		}
+
+		if err := a.sharder.IsMyOwnedKey(r.Context(), types.NewOrganizationKey(valuer.MustNewUUID(claims.OrgID))); err != nil {
+			a.logger.ErrorContext(r.Context(), apiKeyCrossOrgMessage, "claims", claims, "error", err)
+			next.ServeHTTP(w, r)
+			return
+		}
+
+		ctx = ctxtypes.SetAuthType(ctx, ctxtypes.AuthTypeAPIKey)
+
+		comment := ctxtypes.CommentFromContext(ctx)
+		comment.Set("auth_type", ctxtypes.AuthTypeAPIKey.StringValue())
+		comment.Set("user_id", claims.UserID)
+		comment.Set("org_id", claims.OrgID)
+
+		r = r.WithContext(ctxtypes.NewContextWithComment(ctx, comment))
+
+		next.ServeHTTP(w, r)
+
+		lastUsedCtx := context.WithoutCancel(r.Context())
+		_, _, _ = a.sfGroup.Do(apiKey.ID.StringValue(), func() (any, error) {
+			apiKey.LastUsed = time.Now()
+			_, err = a.
+				store.
+				BunDB().
+				NewUpdate().
+				Model(&apiKey).
+				Column("last_used").
+				Where("token = ?", apiKeyToken).
+				Where("revoked = false").
+				Exec(lastUsedCtx)
+			if err != nil {
+				a.logger.ErrorContext(lastUsedCtx, "failed to update last used of api key", "error", err)
+			}
+
+			return true, nil
+		})
+
+	})
+
+}

pkg/http/middleware/authn.go

@@ -0,0 +1,150 @@
+package middleware
+
+import (
+	"context"
+	"log/slog"
+	"net/http"
+	"strings"
+	"time"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/sharder"
+	"github.com/SigNoz/signoz/pkg/tokenizer"
+	"github.com/SigNoz/signoz/pkg/types"
+	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+	"golang.org/x/sync/singleflight"
+)
+
+const (
+	authCrossOrgMessage string = "::AUTH-CROSS-ORG::"
+)
+
+type AuthN struct {
+	tokenizer tokenizer.Tokenizer
+	headers   []string
+	sharder   sharder.Sharder
+	logger    *slog.Logger
+	sfGroup   *singleflight.Group
+}
+
+func NewAuthN(headers []string, sharder sharder.Sharder, tokenizer tokenizer.Tokenizer, logger *slog.Logger) *AuthN {
+	return &AuthN{
+		headers:   headers,
+		sharder:   sharder,
+		tokenizer: tokenizer,
+		logger:    logger,
+		sfGroup:   &singleflight.Group{},
+	}
+}
+
+func (a *AuthN) Wrap(next http.Handler) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		var values []string
+		for _, header := range a.headers {
+			values = append(values, r.Header.Get(header))
+		}
+
+		ctx, err := a.contextFromRequest(r.Context(), values...)
+		if err != nil {
+			r = r.WithContext(ctx)
+			next.ServeHTTP(w, r)
+			return
+		}
+
+		r = r.WithContext(ctx)
+
+		claims, err := authtypes.ClaimsFromContext(ctx)
+		if err != nil {
+			next.ServeHTTP(w, r)
+			return
+		}
+
+		if err := a.sharder.IsMyOwnedKey(r.Context(), types.NewOrganizationKey(valuer.MustNewUUID(claims.OrgID))); err != nil {
+			a.logger.ErrorContext(r.Context(), authCrossOrgMessage, "claims", claims, "error", err)
+			next.ServeHTTP(w, r)
+			return
+		}
+
+		ctx = ctxtypes.SetAuthType(ctx, ctxtypes.AuthTypeTokenizer)
+
+		comment := ctxtypes.CommentFromContext(ctx)
+		comment.Set("auth_type", ctxtypes.AuthTypeTokenizer.StringValue())
+		comment.Set("tokenizer_provider", a.tokenizer.Config().Provider)
+		comment.Set("user_id", claims.UserID)
+		comment.Set("org_id", claims.OrgID)
+
+		r = r.WithContext(ctxtypes.NewContextWithComment(ctx, comment))
+
+		next.ServeHTTP(w, r)
+
+		accessToken, err := authtypes.AccessTokenFromContext(r.Context())
+		if err != nil {
+			next.ServeHTTP(w, r)
+			return
+		}
+
+		lastObservedAtCtx := context.WithoutCancel(r.Context())
+		_, _, _ = a.sfGroup.Do(accessToken, func() (any, error) {
+			if err := a.tokenizer.SetLastObservedAt(lastObservedAtCtx, accessToken, time.Now()); err != nil {
+				a.logger.ErrorContext(lastObservedAtCtx, "failed to set last observed at", "error", err)
+				return false, err
+			}
+
+			return true, nil
+		})
+	})
+}
+
+func (a *AuthN) contextFromRequest(ctx context.Context, values ...string) (context.Context, error) {
+	ctx, err := a.contextFromAccessToken(ctx, values...)
+	if err != nil {
+		return ctx, err
+	}
+
+	accessToken, err := authtypes.AccessTokenFromContext(ctx)
+	if err != nil {
+		return ctx, err
+	}
+
+	authenticatedUser, err := a.tokenizer.GetIdentity(ctx, accessToken)
+	if err != nil {
+		return ctx, err
+	}
+
+	return authtypes.NewContextWithClaims(ctx, authenticatedUser.ToClaims()), nil
+}
+
+func (a *AuthN) contextFromAccessToken(ctx context.Context, values ...string) (context.Context, error) {
+	var value string
+	for _, v := range values {
+		if v != "" {
+			value = v
+			break
+		}
+	}
+
+	if value == "" {
+		return ctx, errors.New(errors.TypeUnauthenticated, errors.CodeUnauthenticated, "missing authorization header")
+	}
+
+	// parse from
+	bearerToken, ok := parseBearerAuth(value)
+	if !ok {
+		// this will take care that if the value is not of type bearer token, directly use it
+		bearerToken = value
+	}
+
+	return authtypes.NewContextWithAccessToken(ctx, bearerToken), nil
+}
+
+func parseBearerAuth(auth string) (string, bool) {
+	const prefix = "Bearer "
+	// Case insensitive prefix match
+	if len(auth) < len(prefix) || !strings.EqualFold(auth[:len(prefix)], prefix) {
+		return "", false
+	}
+
+	return auth[len(prefix):], true
+}

pkg/http/middleware/authz.go

@@ -44,7 +44,7 @@ func (middleware *AuthZ) ViewAccess(next http.HandlerFunc) http.HandlerFunc {
 
 		commentCtx := ctxtypes.CommentFromContext(ctx)
 		authtype, ok := commentCtx.Map()["auth_type"]
-		if ok && (authtype == authtypes.IdentNProviderAPIkey.StringValue()) {
+		if ok && authtype == ctxtypes.AuthTypeAPIKey.StringValue() {
 			if err := claims.IsViewer(); err != nil {
 				middleware.logger.WarnContext(ctx, authzDeniedMessage, "claims", claims)
 				render.Error(rw, err)
@@ -96,7 +96,7 @@ func (middleware *AuthZ) EditAccess(next http.HandlerFunc) http.HandlerFunc {
 
 		commentCtx := ctxtypes.CommentFromContext(ctx)
 		authtype, ok := commentCtx.Map()["auth_type"]
-		if ok && (authtype == authtypes.IdentNProviderAPIkey.StringValue()) {
+		if ok && authtype == ctxtypes.AuthTypeAPIKey.StringValue() {
 			if err := claims.IsEditor(); err != nil {
 				middleware.logger.WarnContext(ctx, authzDeniedMessage, "claims", claims)
 				render.Error(rw, err)
@@ -147,7 +147,7 @@ func (middleware *AuthZ) AdminAccess(next http.HandlerFunc) http.HandlerFunc {
 
 		commentCtx := ctxtypes.CommentFromContext(ctx)
 		authtype, ok := commentCtx.Map()["auth_type"]
-		if ok && (authtype == authtypes.IdentNProviderAPIkey.StringValue()) {
+		if ok && authtype == ctxtypes.AuthTypeAPIKey.StringValue() {
 			if err := claims.IsAdmin(); err != nil {
 				middleware.logger.WarnContext(ctx, authzDeniedMessage, "claims", claims)
 				render.Error(rw, err)

pkg/http/middleware/identn.go

@@ -1,75 +0,0 @@
-package middleware
-
-import (
-	"context"
-	"log/slog"
-	"net/http"
-
-	"github.com/SigNoz/signoz/pkg/identn"
-	"github.com/SigNoz/signoz/pkg/sharder"
-	"github.com/SigNoz/signoz/pkg/types"
-	"github.com/SigNoz/signoz/pkg/types/authtypes"
-	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
-	"github.com/SigNoz/signoz/pkg/valuer"
-)
-
-const (
-	identityCrossOrgMessage string = "::IDENTITY-CROSS-ORG::"
-)
-
-type IdentN struct {
-	resolver identn.IdentNResolver
-	sharder  sharder.Sharder
-	logger   *slog.Logger
-}
-
-func NewIdentN(resolver identn.IdentNResolver, sharder sharder.Sharder, logger *slog.Logger) *IdentN {
-	return &IdentN{
-		resolver: resolver,
-		sharder:  sharder,
-		logger:   logger,
-	}
-}
-
-func (m *IdentN) Wrap(next http.Handler) http.Handler {
-	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
-		idn := m.resolver.GetIdentN(r)
-		if idn == nil {
-			next.ServeHTTP(w, r)
-			return
-		}
-
-		if pre, ok := idn.(identn.IdentNWithPreHook); ok {
-			r = pre.Pre(r)
-		}
-
-		identity, err := idn.GetIdentity(r)
-		if err != nil {
-			next.ServeHTTP(w, r)
-			return
-		}
-
-		ctx := r.Context()
-		claims := identity.ToClaims()
-		if err := m.sharder.IsMyOwnedKey(ctx, types.NewOrganizationKey(valuer.MustNewUUID(claims.OrgID))); err != nil {
-			m.logger.ErrorContext(ctx, identityCrossOrgMessage, "claims", claims, "error", err)
-			next.ServeHTTP(w, r)
-			return
-		}
-
-		ctx = authtypes.NewContextWithClaims(ctx, claims)
-
-		comment := ctxtypes.CommentFromContext(ctx)
-		comment.Set("identn_provider", claims.IdentNProvider)
-		comment.Set("user_id", claims.UserID)
-		comment.Set("org_id", claims.OrgID)
-		ctx = ctxtypes.NewContextWithComment(ctx, comment)
-
-		r = r.WithContext(ctx)
-		next.ServeHTTP(w, r)
-
-		if hook, ok := idn.(identn.IdentNWithPostHook); ok {
-			hook.Post(context.WithoutCancel(r.Context()), r, claims)
-		}
-	})
-}

pkg/identn/apikeyidentn/identn.go

@@ -1,131 +0,0 @@
-package apikeyidentn
-
-import (
-	"context"
-	"net/http"
-	"time"
-
-	"github.com/SigNoz/signoz/pkg/errors"
-	"github.com/SigNoz/signoz/pkg/factory"
-	"github.com/SigNoz/signoz/pkg/identn"
-	"github.com/SigNoz/signoz/pkg/sqlstore"
-	"github.com/SigNoz/signoz/pkg/types"
-	"github.com/SigNoz/signoz/pkg/types/authtypes"
-	"golang.org/x/sync/singleflight"
-)
-
-// todo: will move this in types layer with service account integration
-type apiKeyTokenKey struct{}
-
-type resolver struct {
-	store    sqlstore.SQLStore
-	headers  []string
-	settings factory.ScopedProviderSettings
-	sfGroup  *singleflight.Group
-}
-
-func New(providerSettings factory.ProviderSettings, store sqlstore.SQLStore, headers []string) identn.IdentN {
-	return &resolver{
-		store:    store,
-		headers:  headers,
-		settings: factory.NewScopedProviderSettings(providerSettings, "github.com/SigNoz/signoz/pkg/identn/apikeyidentn"),
-		sfGroup:  &singleflight.Group{},
-	}
-}
-
-func (r *resolver) Name() authtypes.IdentNProvider {
-	return authtypes.IdentNProviderAPIkey
-}
-
-func (r *resolver) Test(req *http.Request) bool {
-	for _, header := range r.headers {
-		if req.Header.Get(header) != "" {
-			return true
-		}
-	}
-	return false
-}
-
-func (r *resolver) Pre(req *http.Request) *http.Request {
-	token := r.extractToken(req)
-	if token == "" {
-		return req
-	}
-
-	ctx := context.WithValue(req.Context(), apiKeyTokenKey{}, token)
-	return req.WithContext(ctx)
-}
-
-func (r *resolver) GetIdentity(req *http.Request) (*authtypes.Identity, error) {
-	ctx := req.Context()
-
-	apiKeyToken, ok := ctx.Value(apiKeyTokenKey{}).(string)
-	if !ok || apiKeyToken == "" {
-		return nil, errors.New(errors.TypeUnauthenticated, errors.CodeUnauthenticated, "missing api key")
-	}
-
-	var apiKey types.StorableAPIKey
-	err := r.store.
-		BunDB().
-		NewSelect().
-		Model(&apiKey).
-		Where("token = ?", apiKeyToken).
-		Scan(ctx)
-	if err != nil {
-		return nil, err
-	}
-
-	if apiKey.ExpiresAt.Before(time.Now()) && !apiKey.ExpiresAt.Equal(types.NEVER_EXPIRES) {
-		return nil, errors.New(errors.TypeUnauthenticated, errors.CodeUnauthenticated, "api key has expired")
-	}
-
-	var user types.User
-	err = r.store.
-		BunDB().
-		NewSelect().
-		Model(&user).
-		Where("id = ?", apiKey.UserID).
-		Scan(ctx)
-	if err != nil {
-		return nil, err
-	}
-
-	identity := authtypes.Identity{
-		UserID: user.ID,
-		Role:   apiKey.Role,
-		Email:  user.Email,
-		OrgID:  user.OrgID,
-	}
-	return &identity, nil
-}
-
-func (r *resolver) Post(ctx context.Context, _ *http.Request, _ authtypes.Claims) {
-	apiKeyToken, ok := ctx.Value(apiKeyTokenKey{}).(string)
-	if !ok || apiKeyToken == "" {
-		return
-	}
-
-	_, _, _ = r.sfGroup.Do(apiKeyToken, func() (any, error) {
-		_, err := r.store.
-			BunDB().
-			NewUpdate().
-			Model(new(types.StorableAPIKey)).
-			Set("last_used = ?", time.Now()).
-			Where("token = ?", apiKeyToken).
-			Where("revoked = false").
-			Exec(ctx)
-		if err != nil {
-			r.settings.Logger().ErrorContext(ctx, "failed to update last used of api key", "error", err)
-		}
-		return true, nil
-	})
-}
-
-func (r *resolver) extractToken(req *http.Request) string {
-	for _, header := range r.headers {
-		if v := req.Header.Get(header); v != "" {
-			return v
-		}
-	}
-	return ""
-}

pkg/identn/identn.go

@@ -1,43 +0,0 @@
-package identn
-
-import (
-	"context"
-	"net/http"
-
-	"github.com/SigNoz/signoz/pkg/types/authtypes"
-)
-
-type IdentNResolver interface {
-	// GetIdentN returns the first IdentN whose Test() returns true for the request.
-	// Returns nil if no resolver matched.
-	GetIdentN(r *http.Request) IdentN
-}
-
-type IdentN interface {
-	// Test checks if this identn can handle the request.
-	// This should be a cheap check (e.g., header presence) with no I/O.
-	Test(r *http.Request) bool
-
-	// GetIdentity returns the resolved identity.
-	// Only called when Test() returns true.
-	GetIdentity(r *http.Request) (*authtypes.Identity, error)
-
-	Name() authtypes.IdentNProvider
-}
-
-// IdentNWithPreHook is optionally implemented by resolvers that need to
-// enrich the request before authentication (e.g., storing the access token
-// in context so downstream handlers can use it even on auth failure).
-type IdentNWithPreHook interface {
-	IdentN
-
-	Pre(r *http.Request) *http.Request
-}
-
-// IdentNWithPostHook is optionally implemented by resolvers that need
-// post-response side-effects (e.g., updating last_observed_at).
-type IdentNWithPostHook interface {
-	IdentN
-
-	Post(ctx context.Context, r *http.Request, claims authtypes.Claims)
-}

pkg/identn/resolver.go

@@ -1,31 +0,0 @@
-package identn
-
-import (
-	"net/http"
-
-	"github.com/SigNoz/signoz/pkg/factory"
-)
-
-type identNResolver struct {
-	identNs  []IdentN
-	settings factory.ScopedProviderSettings
-}
-
-func NewIdentNResolver(providerSettings factory.ProviderSettings, identNs ...IdentN) IdentNResolver {
-	return &identNResolver{
-		identNs:  identNs,
-		settings: factory.NewScopedProviderSettings(providerSettings, "github.com/SigNoz/signoz/pkg/identn"),
-	}
-}
-
-// GetIdentN returns the first IdentN whose Test() returns true.
-// Returns nil if no resolver matched.
-func (c *identNResolver) GetIdentN(r *http.Request) IdentN {
-	for _, idn := range c.identNs {
-		if idn.Test(r) {
-			c.settings.Logger().DebugContext(r.Context(), "identn matched", "provider", idn.Name())
-			return idn
-		}
-	}
-	return nil
-}

pkg/identn/tokenizeridentn/identn.go

@@ -1,103 +0,0 @@
-package tokenizeridentn
-
-import (
-	"context"
-	"net/http"
-	"strings"
-	"time"
-
-	"github.com/SigNoz/signoz/pkg/factory"
-	"github.com/SigNoz/signoz/pkg/identn"
-	"github.com/SigNoz/signoz/pkg/tokenizer"
-	"github.com/SigNoz/signoz/pkg/types/authtypes"
-	"golang.org/x/sync/singleflight"
-)
-
-type resolver struct {
-	tokenizer tokenizer.Tokenizer
-	headers   []string
-	settings  factory.ScopedProviderSettings
-	sfGroup   *singleflight.Group
-}
-
-func New(providerSettings factory.ProviderSettings, tokenizer tokenizer.Tokenizer, headers []string) identn.IdentN {
-	return &resolver{
-		tokenizer: tokenizer,
-		headers:   headers,
-		settings:  factory.NewScopedProviderSettings(providerSettings, "github.com/SigNoz/signoz/pkg/identn/tokenizeridentn"),
-		sfGroup:   &singleflight.Group{},
-	}
-}
-
-func (r *resolver) Name() authtypes.IdentNProvider {
-	return authtypes.IdentNProviderTokenizer
-}
-
-func (r *resolver) Test(req *http.Request) bool {
-	for _, header := range r.headers {
-		if req.Header.Get(header) != "" {
-			return true
-		}
-	}
-	return false
-}
-
-func (r *resolver) Pre(req *http.Request) *http.Request {
-	accessToken := r.extractToken(req)
-	if accessToken == "" {
-		return req
-	}
-
-	ctx := authtypes.NewContextWithAccessToken(req.Context(), accessToken)
-	return req.WithContext(ctx)
-}
-
-func (r *resolver) GetIdentity(req *http.Request) (*authtypes.Identity, error) {
-	ctx := req.Context()
-
-	accessToken, err := authtypes.AccessTokenFromContext(ctx)
-	if err != nil {
-		return nil, err
-	}
-
-	return r.tokenizer.GetIdentity(ctx, accessToken)
-}
-
-func (r *resolver) Post(ctx context.Context, _ *http.Request, _ authtypes.Claims) {
-	accessToken, err := authtypes.AccessTokenFromContext(ctx)
-	if err != nil {
-		return
-	}
-
-	_, _, _ = r.sfGroup.Do(accessToken, func() (any, error) {
-		if err := r.tokenizer.SetLastObservedAt(ctx, accessToken, time.Now()); err != nil {
-			r.settings.Logger().ErrorContext(ctx, "failed to set last observed at", "error", err)
-			return false, err
-		}
-		return true, nil
-	})
-}
-
-func (r *resolver) extractToken(req *http.Request) string {
-	var value string
-	for _, header := range r.headers {
-		if v := req.Header.Get(header); v != "" {
-			value = v
-			break
-		}
-	}
-
-	accessToken, ok := r.parseBearerAuth(value)
-	if !ok {
-		return value
-	}
-	return accessToken
-}
-
-func (r *resolver) parseBearerAuth(auth string) (string, bool) {
-	const prefix = "Bearer "
-	if len(auth) < len(prefix) || !strings.EqualFold(auth[:len(prefix)], prefix) {
-		return "", false
-	}
-	return auth[len(prefix):], true
-}

pkg/modules/dashboard/impldashboard/handler.go

@@ -15,6 +15,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/transition"
 	"github.com/SigNoz/signoz/pkg/types"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
 	"github.com/SigNoz/signoz/pkg/types/dashboardtypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 	"github.com/gorilla/mux"
@@ -108,7 +109,7 @@ func (handler *handler) Update(rw http.ResponseWriter, r *http.Request) {
 
 	diff := 0
 	// Allow multiple deletions for API key requests; enforce for others
-	if claims.IdentNProvider == authtypes.IdentNProviderTokenizer.StringValue() {
+	if authType, ok := ctxtypes.AuthTypeFromContext(ctx); ok && authType == ctxtypes.AuthTypeTokenizer {
 		diff = 1
 	}
 

pkg/modules/session/implsession/module.go

@@ -158,7 +158,7 @@ func (module *module) CreateCallbackAuthNSession(ctx context.Context, authNProvi
 		return "", errors.WithAdditionalf(err, "root user can only authenticate via password")
 	}
 
-	token, err := module.tokenizer.CreateToken(ctx, authtypes.NewIdentity(user.ID, user.OrgID, user.Email, user.Role, authtypes.IdentNProviderTokenizer), map[string]string{})
+	token, err := module.tokenizer.CreateToken(ctx, authtypes.NewIdentity(user.ID, user.OrgID, user.Email, user.Role), map[string]string{})
 	if err != nil {
 		return "", err
 	}

pkg/query-service/app/server.go

@@ -195,12 +195,13 @@ func (s *Server) createPublicServer(api *APIHandler, web web.Web) (*http.Server,
 		}),
 		otelmux.WithPublicEndpoint(),
 	))
-	r.Use(middleware.NewIdentN(s.signoz.IdentNResolver, s.signoz.Sharder, s.signoz.Instrumentation.Logger()).Wrap)
+	r.Use(middleware.NewAuthN([]string{"Authorization", "Sec-WebSocket-Protocol"}, s.signoz.Sharder, s.signoz.Tokenizer, s.signoz.Instrumentation.Logger()).Wrap)
 	r.Use(middleware.NewTimeout(s.signoz.Instrumentation.Logger(),
 		s.config.APIServer.Timeout.ExcludedRoutes,
 		s.config.APIServer.Timeout.Default,
 		s.config.APIServer.Timeout.Max,
 	).Wrap)
+	r.Use(middleware.NewAPIKey(s.signoz.SQLStore, []string{"SIGNOZ-API-KEY"}, s.signoz.Instrumentation.Logger(), s.signoz.Sharder).Wrap)
 	r.Use(middleware.NewLogging(s.signoz.Instrumentation.Logger(), s.config.APIServer.Logging.ExcludedRoutes).Wrap)
 	r.Use(middleware.NewComment().Wrap)
 

pkg/signoz/openapi.go

@@ -26,7 +26,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/session"
 	"github.com/SigNoz/signoz/pkg/modules/user"
 	"github.com/SigNoz/signoz/pkg/querier"
-	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
 	"github.com/SigNoz/signoz/pkg/zeus"
 	"github.com/swaggest/jsonschema-go"
 	"github.com/swaggest/openapi-go"
@@ -82,8 +82,8 @@ func NewOpenAPI(ctx context.Context, instrumentation instrumentation.Instrumenta
 
 	reflector.SpecSchema().SetTitle("SigNoz")
 	reflector.SpecSchema().SetDescription("OpenTelemetry-Native Logs, Metrics and Traces in a single pane")
-	reflector.SpecSchema().SetAPIKeySecurity(authtypes.IdentNProviderAPIkey.StringValue(), "SigNoz-Api-Key", openapi.InHeader, "API Keys")
-	reflector.SpecSchema().SetHTTPBearerTokenSecurity(authtypes.IdentNProviderTokenizer.StringValue(), "Tokenizer", "Tokens generated by the tokenizer")
+	reflector.SpecSchema().SetAPIKeySecurity(ctxtypes.AuthTypeAPIKey.StringValue(), "SigNoz-Api-Key", openapi.InHeader, "API Keys")
+	reflector.SpecSchema().SetHTTPBearerTokenSecurity(ctxtypes.AuthTypeTokenizer.StringValue(), "Tokenizer", "Tokens generated by the tokenizer")
 
 	collector := handler.NewOpenAPICollector(reflector)
 

pkg/signoz/signoz.go

@@ -16,9 +16,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/factory"
 	"github.com/SigNoz/signoz/pkg/flagger"
 	"github.com/SigNoz/signoz/pkg/gateway"
-	"github.com/SigNoz/signoz/pkg/identn"
-	"github.com/SigNoz/signoz/pkg/identn/apikeyidentn"
-	"github.com/SigNoz/signoz/pkg/identn/tokenizeridentn"
 	"github.com/SigNoz/signoz/pkg/instrumentation"
 	"github.com/SigNoz/signoz/pkg/licensing"
 	"github.com/SigNoz/signoz/pkg/modules/dashboard"
@@ -68,7 +65,6 @@ type SigNoz struct {
 	Sharder                sharder.Sharder
 	StatsReporter          statsreporter.StatsReporter
 	Tokenizer              pkgtokenizer.Tokenizer
-	IdentNResolver         identn.IdentNResolver
 	Authz                  authz.AuthZ
 	Modules                Modules
 	Handlers               Handlers
@@ -394,11 +390,6 @@ func New(
 	// Initialize all modules
 	modules := NewModules(sqlstore, tokenizer, emailing, providerSettings, orgGetter, alertmanager, analytics, querier, telemetrystore, telemetryMetadataStore, authNs, authz, cache, queryParser, config, dashboard, userGetter)
 
-	// Initialize identN resolver
-	tokenizerIdentn := tokenizeridentn.New(providerSettings, tokenizer, []string{"Authorization", "Sec-WebSocket-Protocol"})
-	apikeyIdentn := apikeyidentn.New(providerSettings, sqlstore, []string{"SIGNOZ-API-KEY"})
-	identNResolver := identn.NewIdentNResolver(providerSettings, tokenizerIdentn, apikeyIdentn)
-
 	userService := impluser.NewService(providerSettings, impluser.NewStore(sqlstore, providerSettings), modules.User, orgGetter, authz, config.User.Root)
 
 	// Initialize the querier handler via callback (allows EE to decorate with anomaly detection)
@@ -477,7 +468,6 @@ func New(
 		Emailing:               emailing,
 		Sharder:                sharder,
 		Tokenizer:              tokenizer,
-		IdentNResolver:         identNResolver,
 		Authz:                  authz,
 		Modules:                modules,
 		Handlers:               handlers,

pkg/telemetrytraces/const.go

@@ -1,6 +1,50 @@
 package telemetrytraces
 
-import "github.com/SigNoz/signoz/pkg/types/telemetrytypes"
+import (
+	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
+)
+
+const (
+
+	// Internal Columns
+	SpanTimestampBucketStartColumn = "ts_bucket_start"
+	SpanResourceFingerPrintColumn  = "resource_fingerprint"
+
+	// Intrinsic Columns
+	SpanTimestampColumn        = "timestamp"
+	SpanTraceIDColumn          = "trace_id"
+	SpanSpanIDColumn           = "span_id"
+	SpanTraceStateColumn       = "trace_state"
+	SpanParentSpanIDColumn     = "parent_span_id"
+	SpanFlagsColumn            = "flags"
+	SpanNameColumn             = "name"
+	SpanKindColumn             = "kind"
+	SpanKindStringColumn       = "kind_string"
+	SpanDurationNanoColumn     = "duration_nano"
+	SpanStatusCodeColumn       = "status_code"
+	SpanStatusMessageColumn    = "status_message"
+	SpanStatusCodeStringColumn = "status_code_string"
+	SpanEventsColumn           = "events"
+	SpanLinksColumn            = "links"
+
+	// Calculated Columns
+	SpanResponseStatusCodeColumn = "response_status_code"
+	SpanExternalHTTPURLColumn    = "external_http_url"
+	SpanHTTPURLColumn            = "http_url"
+	SpanExternalHTTPMethodColumn = "external_http_method"
+	SpanHTTPMethodColumn         = "http_method"
+	SpanHTTPHostColumn           = "http_host"
+	SpanDBNameColumn             = "db_name"
+	SpanDBOperationColumn        = "db_operation"
+	SpanHasErrorColumn           = "has_error"
+	SpanIsRemoteColumn           = "is_remote"
+
+	// Contextual Columns
+	SpanAttributesStringColumn = "attributes_string"
+	SpanAttributesNumberColumn = "attributes_number"
+	SpanAttributesBoolColumn   = "attributes_bool"
+	SpanResourcesStringColumn  = "resources_string"
+)
 
 var (
 	IntrinsicFields = map[string]telemetrytypes.TelemetryFieldKey{

pkg/telemetrytraces/statement_builder.go

@@ -4,7 +4,6 @@ import (
 	"context"
 	"fmt"
 	"log/slog"
-	"slices"
 	"strings"
 
 	"github.com/SigNoz/signoz/pkg/errors"
@@ -14,7 +13,6 @@ import (
 	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 	"github.com/huandu/go-sqlbuilder"
-	"golang.org/x/exp/maps"
 )
 
 var (
@@ -74,41 +72,6 @@ func (b *traceQueryStatementBuilder) Build(
 		return nil, err
 	}
 
-	/*
-		Adding a tech debt note here:
-		This piece of code is a hot fix and should be removed once we close issue: engineering-pod/issues/3622
-	*/
-	/*
-		-------------------------------- Start of tech debt ----------------------------
-	*/
-	if requestType == qbtypes.RequestTypeRaw {
-
-		selectedFields := query.SelectFields
-
-		if len(selectedFields) == 0 {
-			sortedKeys := maps.Keys(DefaultFields)
-			slices.Sort(sortedKeys)
-			for _, key := range sortedKeys {
-				selectedFields = append(selectedFields, DefaultFields[key])
-			}
-			query.SelectFields = selectedFields
-		}
-
-		selectFieldKeys := []string{}
-		for _, field := range selectedFields {
-			selectFieldKeys = append(selectFieldKeys, field.Name)
-		}
-
-		for _, x := range []string{"timestamp", "span_id", "trace_id"} {
-			if !slices.Contains(selectFieldKeys, x) {
-				query.SelectFields = append(query.SelectFields, DefaultFields[x])
-			}
-		}
-	}
-	/*
-		-------------------------------- End of tech debt ----------------------------
-	*/
-
 	query = b.adjustKeys(ctx, keys, query, requestType)
 
 	// Check if filter contains trace_id(s) and optimize time range if needed
@@ -311,13 +274,53 @@ func (b *traceQueryStatementBuilder) buildListQuery(
 		cteArgs = append(cteArgs, args)
 	}
 
-	// TODO: should we deprecate `SelectFields` and return everything from a span like we do for logs?
-	for _, field := range query.SelectFields {
-		colExpr, err := b.fm.ColumnExpressionFor(ctx, &field, keys)
-		if err != nil {
-			return nil, err
+	sb.SelectMore(SpanTimestampColumn)
+	sb.SelectMore(SpanTraceIDColumn)
+	sb.SelectMore(SpanSpanIDColumn)
+	// By default select all
+	if len(query.SelectFields) == 0 {
+		// Select all intrinsic columns
+		sb.SelectMore(SpanTraceStateColumn)
+		sb.SelectMore(SpanParentSpanIDColumn)
+		sb.SelectMore(SpanFlagsColumn)
+		sb.SelectMore(SpanNameColumn)
+		sb.SelectMore(SpanKindColumn)
+		sb.SelectMore(SpanKindStringColumn)
+		sb.SelectMore(SpanDurationNanoColumn)
+		sb.SelectMore(SpanStatusCodeColumn)
+		sb.SelectMore(SpanStatusMessageColumn)
+		sb.SelectMore(SpanStatusCodeStringColumn)
+		sb.SelectMore(SpanEventsColumn)
+		sb.SelectMore(SpanLinksColumn)
+
+		// select all calculated columns
+		sb.SelectMore(SpanResponseStatusCodeColumn)
+		sb.SelectMore(SpanExternalHTTPURLColumn)
+		sb.SelectMore(SpanHTTPURLColumn)
+		sb.SelectMore(SpanExternalHTTPMethodColumn)
+		sb.SelectMore(SpanHTTPMethodColumn)
+		sb.SelectMore(SpanHTTPHostColumn)
+		sb.SelectMore(SpanDBNameColumn)
+		sb.SelectMore(SpanDBOperationColumn)
+		sb.SelectMore(SpanHasErrorColumn)
+		sb.SelectMore(SpanIsRemoteColumn)
+
+		// select all contextual columns
+		sb.SelectMore(SpanAttributesStringColumn)
+		sb.SelectMore(SpanAttributesNumberColumn)
+		sb.SelectMore(SpanAttributesBoolColumn)
+		sb.SelectMore(SpanResourcesStringColumn)
+	} else {
+		for _, field := range query.SelectFields {
+			if field.Name == SpanTimestampColumn || field.Name == SpanTraceIDColumn || field.Name == SpanSpanIDColumn {
+				continue
+			}
+			colExpr, err := b.fm.ColumnExpressionFor(ctx, &field, keys)
+			if err != nil {
+				return nil, err
+			}
+			sb.SelectMore(colExpr)
 		}
-		sb.SelectMore(colExpr)
 	}
 
 	// From table

pkg/tokenizer/jwttokenizer/provider.go

@@ -125,7 +125,7 @@ func (provider *provider) GetIdentity(ctx context.Context, accessToken string) (
 		return nil, errors.Newf(errors.TypeUnauthenticated, errors.CodeUnauthenticated, "claim role mismatch")
 	}
 
-	return authtypes.NewIdentity(valuer.MustNewUUID(claims.UserID), valuer.MustNewUUID(claims.OrgID), valuer.MustNewEmail(claims.Email), claims.Role, authtypes.IdentNProviderTokenizer), nil
+	return authtypes.NewIdentity(valuer.MustNewUUID(claims.UserID), valuer.MustNewUUID(claims.OrgID), valuer.MustNewEmail(claims.Email), claims.Role), nil
 }
 
 func (provider *provider) DeleteToken(ctx context.Context, accessToken string) error {

pkg/tokenizer/tokenizerstore/sqltokenizerstore/store.go

@@ -47,7 +47,7 @@ func (store *store) GetIdentityByUserID(ctx context.Context, userID valuer.UUID)
 		return nil, store.sqlstore.WrapNotFoundErrf(err, types.ErrCodeUserNotFound, "user with id: %s does not exist", userID)
 	}
 
-	return authtypes.NewIdentity(userID, user.OrgID, user.Email, types.Role(user.Role), authtypes.IdentNProviderTokenizer), nil
+	return authtypes.NewIdentity(userID, user.OrgID, user.Email, types.Role(user.Role)), nil
 }
 
 func (store *store) GetByAccessToken(ctx context.Context, accessToken string) (*authtypes.StorableToken, error) {

pkg/types/authtypes/authn.go

@@ -25,11 +25,10 @@ var (
 type AuthNProvider struct{ valuer.String }
 
 type Identity struct {
-	UserID        valuer.UUID    `json:"userId"`
-	OrgID         valuer.UUID    `json:"orgId"`
-	IdenNProvider IdentNProvider `json:"identNProvider"`
-	Email         valuer.Email   `json:"email"`
-	Role          types.Role     `json:"role"`
+	UserID valuer.UUID  `json:"userId"`
+	OrgID  valuer.UUID  `json:"orgId"`
+	Email  valuer.Email `json:"email"`
+	Role   types.Role   `json:"role"`
 }
 
 type CallbackIdentity struct {
@@ -79,13 +78,12 @@ func NewStateFromString(state string) (State, error) {
 	}, nil
 }
 
-func NewIdentity(userID valuer.UUID, orgID valuer.UUID, email valuer.Email, role types.Role, identNProvider IdentNProvider) *Identity {
+func NewIdentity(userID valuer.UUID, orgID valuer.UUID, email valuer.Email, role types.Role) *Identity {
 	return &Identity{
-		UserID:        userID,
-		OrgID:         orgID,
-		Email:         email,
-		Role:          role,
-		IdenNProvider: identNProvider,
+		UserID: userID,
+		OrgID:  orgID,
+		Email:  email,
+		Role:   role,
 	}
 }
 
@@ -118,11 +116,10 @@ func (typ *Identity) UnmarshalBinary(data []byte) error {
 
 func (typ *Identity) ToClaims() Claims {
 	return Claims{
-		UserID:         typ.UserID.String(),
-		Email:          typ.Email.String(),
-		Role:           typ.Role,
-		OrgID:          typ.OrgID.String(),
-		IdentNProvider: typ.IdenNProvider.StringValue(),
+		UserID: typ.UserID.String(),
+		Email:  typ.Email.String(),
+		Role:   typ.Role,
+		OrgID:  typ.OrgID.String(),
 	}
 }
 

pkg/types/authtypes/claims.go

@@ -13,11 +13,10 @@ type claimsKey struct{}
 type accessTokenKey struct{}
 
 type Claims struct {
-	UserID         string
-	Email          string
-	Role           types.Role
-	OrgID          string
-	IdentNProvider string
+	UserID string
+	Email  string
+	Role   types.Role
+	OrgID  string
 }
 
 // NewContextWithClaims attaches individual claims to the context.
@@ -54,7 +53,6 @@ func (c *Claims) LogValue() slog.Value {
 		slog.String("email", c.Email),
 		slog.String("role", c.Role.String()),
 		slog.String("org_id", c.OrgID),
-		slog.String("identn_provider", c.IdentNProvider),
 	)
 }
 

pkg/types/authtypes/identn.go

@@ -1,11 +0,0 @@
-package authtypes
-
-import "github.com/SigNoz/signoz/pkg/valuer"
-
-var (
-	IdentNProviderTokenizer = IdentNProvider{valuer.NewString("tokenizer")}
-	IdentNProviderAPIkey    = IdentNProvider{valuer.NewString("api_key")}
-	IdentNProviderAnonymous = IdentNProvider{valuer.NewString("anonymous")}
-)
-
-type IdentNProvider struct{ valuer.String }

pkg/types/authtypes/uuid.go

@@ -0,0 +1,41 @@
+package authtypes
+
+import (
+	"context"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+)
+
+type uuidKey struct{}
+
+type UUID struct {
+}
+
+func NewUUID() *UUID {
+	return &UUID{}
+}
+
+func (u *UUID) ContextFromRequest(ctx context.Context, values ...string) (context.Context, error) {
+	var value string
+	for _, v := range values {
+		if v != "" {
+			value = v
+			break
+		}
+	}
+
+	if value == "" {
+		return ctx, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "missing Authorization header")
+	}
+
+	return NewContextWithUUID(ctx, value), nil
+}
+
+func NewContextWithUUID(ctx context.Context, uuid string) context.Context {
+	return context.WithValue(ctx, uuidKey{}, uuid)
+}
+
+func UUIDFromContext(ctx context.Context) (string, bool) {
+	uuid, ok := ctx.Value(uuidKey{}).(string)
+	return uuid, ok
+}

pkg/types/ctxtypes/auth.go

@@ -0,0 +1,31 @@
+package ctxtypes
+
+import (
+	"context"
+
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+type AuthType struct {
+	valuer.String
+}
+
+var (
+	AuthTypeTokenizer = AuthType{valuer.NewString("tokenizer")}
+	AuthTypeAPIKey    = AuthType{valuer.NewString("api_key")}
+	AuthTypeInternal  = AuthType{valuer.NewString("internal")}
+	AuthTypeAnonymous = AuthType{valuer.NewString("anonymous")}
+)
+
+type authTypeKey struct{}
+
+// SetAuthType stores the auth type (e.g., AuthTypeJWT, AuthTypeAPIKey, AuthTypeInternal) in context.
+func SetAuthType(ctx context.Context, authType AuthType) context.Context {
+	return context.WithValue(ctx, authTypeKey{}, authType)
+}
+
+// AuthTypeFromContext retrieves the auth type from context if set.
+func AuthTypeFromContext(ctx context.Context) (AuthType, bool) {
+	v, ok := ctx.Value(authTypeKey{}).(AuthType)
+	return v, ok
+}