chore: api migration

* fix: added fix for panel rerenders on interaction

* fix: fixed tsc issue

.gitignore

@@ -49,6 +49,7 @@ ee/query-service/tests/test-deploy/data/
 # local data
 *.backup
 *.db
+**/db
 /deploy/docker/clickhouse-setup/data/
 /deploy/docker-swarm/clickhouse-setup/data/
 bin/

Makefile

@@ -72,6 +72,12 @@ devenv-up: devenv-clickhouse devenv-signoz-otel-collector ## Start both clickhou
 	@echo "   - ClickHouse: http://localhost:8123"
 	@echo "   - Signoz OTel Collector: grpc://localhost:4317, http://localhost:4318"
 
+.PHONY: devenv-clickhouse-clean
+devenv-clickhouse-clean: ## Clean all ClickHouse data from filesystem
+	@echo "Removing ClickHouse data..."
+	@rm -rf .devenv/docker/clickhouse/fs/tmp/*
+	@echo "ClickHouse data cleaned!"
+
 ##############################################################
 # go commands
 ##############################################################

docs/api/openapi.yml

@@ -849,6 +849,75 @@ paths:
       summary: Deprecated create session by email password
       tags:
       - sessions
+  /api/v1/logs/promote_paths:
+    get:
+      deprecated: false
+      description: This endpoints promotes and indexes paths
+      operationId: PromotePaths
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    items:
+                      $ref: '#/components/schemas/PromotetypesPromotePath'
+                    nullable: true
+                    type: array
+                  status:
+                    type: string
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      summary: Promote and index paths
+      tags:
+      - promoted_paths
+      - logs
+      - json_logs
+    post:
+      deprecated: false
+      description: This endpoints promotes and indexes paths
+      operationId: PromotePaths
+      requestBody:
+        content:
+          application/json:
+            schema:
+              items:
+                $ref: '#/components/schemas/PromotetypesPromotePath'
+              nullable: true
+              type: array
+      responses:
+        "201":
+          description: Created
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      summary: Promote and index paths
+      tags:
+      - promoted_paths
+      - logs
+      - json_logs
   /api/v1/org/preferences:
     get:
       deprecated: false
@@ -2137,6 +2206,26 @@ components:
       type: object
     PreferencetypesValue:
       type: object
+    PromotetypesPromotePath:
+      properties:
+        indexes:
+          items:
+            $ref: '#/components/schemas/PromotetypesWrappedIndex'
+          type: array
+        path:
+          type: string
+        promote:
+          type: boolean
+      type: object
+    PromotetypesWrappedIndex:
+      properties:
+        column_type:
+          type: string
+        granularity:
+          type: integer
+        type:
+          type: string
+      type: object
     RenderErrorResponse:
       properties:
         error:

frontend/src/AppRoutes/index.tsx

@@ -6,6 +6,7 @@ import logEvent from 'api/common/logEvent';
 import AppLoading from 'components/AppLoading/AppLoading';
 import { CmdKPalette } from 'components/cmdKPalette/cmdKPalette';
 import NotFound from 'components/NotFound';
+import { ShiftHoldOverlayController } from 'components/ShiftOverlay/ShiftHoldOverlayController';
 import Spinner from 'components/Spinner';
 import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
@@ -368,6 +369,9 @@ function App(): JSX.Element {
 							<NotificationProvider>
 								<ErrorModalProvider>
 									{isLoggedInState && <CmdKPalette userRole={user.role} />}
+									{isLoggedInState && (
+										<ShiftHoldOverlayController userRole={user.role} />
+									)}
 									<PrivateRoute>
 										<ResourceProvider>
 											<QueryBuilderProvider>

frontend/src/api/metricsExplorer/v2/getMetricAlerts.ts

@@ -0,0 +1,29 @@
+import { ApiV2Instance as axios } from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { GetMetricAlertsResponse } from 'types/api/metricsExplorer/v2';
+
+export const getMetricAlerts = async (
+	metricName: string,
+	signal?: AbortSignal,
+	headers?: Record<string, string>,
+): Promise<SuccessResponseV2<GetMetricAlertsResponse>> => {
+	try {
+		const encodedMetricName = encodeURIComponent(metricName);
+		const response = await axios.get('/metric/alerts', {
+			params: {
+				metricName: encodedMetricName,
+			},
+			signal,
+			headers,
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};

frontend/src/api/metricsExplorer/v2/getMetricAttributes.ts

@@ -0,0 +1,37 @@
+import { ApiV2Instance as axios } from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import {
+	GetMetricAttributesRequest,
+	GetMetricAttributesResponse,
+} from 'types/api/metricsExplorer/v2';
+
+export const getMetricAttributes = async (
+	{ metricName, start, end }: GetMetricAttributesRequest,
+	signal?: AbortSignal,
+	headers?: Record<string, string>,
+): Promise<SuccessResponseV2<GetMetricAttributesResponse>> => {
+	try {
+		const encodedMetricName = encodeURIComponent(metricName);
+		const response = await axios.post(
+			'/metrics/attributes',
+			{
+				metricName: encodedMetricName,
+				start,
+				end,
+			},
+			{
+				signal,
+				headers,
+			},
+		);
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};

frontend/src/api/metricsExplorer/v2/getMetricDashboards.ts

@@ -0,0 +1,29 @@
+import { ApiV2Instance as axios } from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { GetMetricDashboardsResponse } from 'types/api/metricsExplorer/v2';
+
+export const getMetricDashboards = async (
+	metricName: string,
+	signal?: AbortSignal,
+	headers?: Record<string, string>,
+): Promise<SuccessResponseV2<GetMetricDashboardsResponse>> => {
+	try {
+		const encodedMetricName = encodeURIComponent(metricName);
+		const response = await axios.get('/metric/dashboards', {
+			params: {
+				metricName: encodedMetricName,
+			},
+			signal,
+			headers,
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};

frontend/src/api/metricsExplorer/v2/getMetricHighlights.ts

@@ -0,0 +1,29 @@
+import { ApiV2Instance as axios } from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { GetMetricHighlightsResponse } from 'types/api/metricsExplorer/v2';
+
+export const getMetricHighlights = async (
+	metricName: string,
+	signal?: AbortSignal,
+	headers?: Record<string, string>,
+): Promise<SuccessResponseV2<GetMetricHighlightsResponse>> => {
+	try {
+		const encodedMetricName = encodeURIComponent(metricName);
+		const response = await axios.get('/metric/highlights', {
+			params: {
+				metricName: encodedMetricName,
+			},
+			signal,
+			headers,
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};

frontend/src/api/metricsExplorer/v2/getMetricMetadata.ts

@@ -0,0 +1,29 @@
+import { ApiV2Instance as axios } from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { GetMetricMetadataResponse } from 'types/api/metricsExplorer/v2';
+
+export const getMetricMetadata = async (
+	metricName: string,
+	signal?: AbortSignal,
+	headers?: Record<string, string>,
+): Promise<SuccessResponseV2<GetMetricMetadataResponse>> => {
+	try {
+		const encodedMetricName = encodeURIComponent(metricName);
+		const response = await axios.get('/metrics/metadata', {
+			params: {
+				metricName: encodedMetricName,
+			},
+			signal,
+			headers,
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};

frontend/src/api/metricsExplorer/v2/updateMetricMetadata.ts

@@ -0,0 +1,28 @@
+import { ApiV2Instance as axios } from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import {
+	UpdateMetricMetadataRequest,
+	UpdateMetricMetadataResponse,
+} from 'types/api/metricsExplorer/v2';
+
+const updateMetricMetadata = async (
+	metricName: string,
+	props: UpdateMetricMetadataRequest,
+): Promise<SuccessResponseV2<UpdateMetricMetadataResponse>> => {
+	try {
+		const response = await axios.post(`/metrics/${metricName}/metadata`, {
+			...props,
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default updateMetricMetadata;

frontend/src/components/Logs/ListLogView/ListLogView.styles.scss

@@ -1,11 +1,15 @@
-.log-field-key {
-	padding-right: 5px;
+.log-field-container {
+	display: flex;
+	overflow: hidden;
+	width: 100%;
+	align-items: baseline;
+}
+.log-field-key,
+.log-field-key-colon {
 	color: var(--text-vanilla-400, #c0c1c3);
 	font-size: 14px;
 	font-style: normal;
 	font-weight: 400;
-	line-height: 18px; /* 128.571% */
-	letter-spacing: -0.07px;
 
 	&.small {
 		font-size: 11px;
@@ -22,6 +26,20 @@
 		line-height: 24px;
 	}
 }
+.log-field-key {
+	line-height: 18px; /* 128.571% */
+	letter-spacing: -0.07px;
+	white-space: nowrap;
+	display: inline-block;
+	max-width: 20vw;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	margin: 0;
+}
+.log-field-key-colon {
+	min-width: 0.8rem;
+	flex-shrink: 0;
+}
 .log-value {
 	color: var(--text-vanilla-400, #c0c1c3);
 	font-size: 14px;
@@ -158,7 +176,8 @@
 }
 
 .lightMode {
-	.log-field-key {
+	.log-field-key,
+	.log-field-key-colon {
 		color: var(--text-slate-400);
 	}
 	.log-value {
@@ -170,3 +189,10 @@
 		}
 	}
 }
+
+.dark {
+	.log-field-key,
+	.log-field-key-colon {
+		color: rgba(255, 255, 255, 0.45);
+	}
+}

frontend/src/components/Logs/ListLogView/index.tsx

@@ -25,13 +25,7 @@ import LogLinesActionButtons from '../LogLinesActionButtons/LogLinesActionButton
 import LogStateIndicator from '../LogStateIndicator/LogStateIndicator';
 import { getLogIndicatorType } from '../LogStateIndicator/utils';
 // styles
-import {
-	Container,
-	LogContainer,
-	LogText,
-	Text,
-	TextContainer,
-} from './styles';
+import { Container, LogContainer, LogText } from './styles';
 import { isValidLogField } from './util';
 
 interface LogFieldProps {
@@ -58,16 +52,18 @@ function LogGeneralField({
 	);
 
 	return (
-		<TextContainer>
-			<Text ellipsis type="secondary" className={cx('log-field-key', fontSize)}>
-				{`${fieldKey} : `}
-			</Text>
+		<div className="log-field-container">
+			<p className={cx('log-field-key', fontSize)} title={fieldKey}>
+				{fieldKey}
+			</p>
+			<span className={cx('log-field-key-colon', fontSize)}>&nbsp;:&nbsp;</span>
 			<LogText
 				dangerouslySetInnerHTML={html}
 				className={cx('log-value', fontSize)}
+				title={fieldValue}
 				linesPerRow={linesPerRow > 1 ? linesPerRow : undefined}
 			/>
-		</TextContainer>
+		</div>
 	);
 }
 

frontend/src/components/Logs/ListLogView/styles.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-nested-ternary */
-import { Card, Typography } from 'antd';
+import { Card } from 'antd';
 import { FontSize } from 'container/OptionsMenu/types';
 import styled from 'styled-components';
 import { getActiveLogBackground } from 'utils/logs';
@@ -46,19 +46,6 @@ export const Container = styled(Card)<{
 			getActiveLogBackground($isActiveLog, $isDarkMode, $logType)}
 `;
 
-export const Text = styled(Typography.Text)`
-	&&& {
-		min-width: 2.5rem;
-		white-space: nowrap;
-	}
-`;
-
-export const TextContainer = styled.div`
-	display: flex;
-	overflow: hidden;
-	width: 100%;
-`;
-
 export const LogContainer = styled.div<LogContainerProps>`
 	margin-left: 0.5rem;
 	display: flex;

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx

@@ -114,9 +114,9 @@ function QuerySearch({
 	const [isFocused, setIsFocused] = useState(false);
 	const editorRef = useRef<EditorView | null>(null);
 
-	const handleQueryValidation = useCallback((newQuery: string): void => {
+	const handleQueryValidation = useCallback((newExpression: string): void => {
 		try {
-			const validationResponse = validateQuery(newQuery);
+			const validationResponse = validateQuery(newExpression);
 			setValidation(validationResponse);
 		} catch (error) {
 			setValidation({
@@ -127,7 +127,7 @@ function QuerySearch({
 		}
 	}, []);
 
-	const getCurrentQuery = useCallback(
+	const getCurrentExpression = useCallback(
 		(): string => editorRef.current?.state.doc.toString() || '',
 		[],
 	);
@@ -167,19 +167,14 @@ function QuerySearch({
 		() => {
 			if (!isEditorReady) return;
 
-			const newQuery = queryData.filter?.expression || '';
-			const currentQuery = getCurrentQuery();
+			const newExpression = queryData.filter?.expression || '';
+			const currentExpression = getCurrentExpression();
 
-			/* eslint-disable-next-line sonarjs/no-collapsible-if */
-			if (newQuery !== currentQuery && !isFocused) {
-				// Prevent clearing a non-empty editor when queryData becomes empty temporarily
-				// Only update if newQuery has a value, or if both are empty (initial state)
-				if (newQuery || !currentQuery) {
-					updateEditorValue(newQuery, { skipOnChange: true });
-
-					if (newQuery) {
-						handleQueryValidation(newQuery);
-					}
+			// Do not update codemirror editor if the expression is the same
+			if (newExpression !== currentExpression && !isFocused) {
+				updateEditorValue(newExpression, { skipOnChange: true });
+				if (newExpression) {
+					handleQueryValidation(newExpression);
 				}
 			}
 		},
@@ -613,8 +608,8 @@ function QuerySearch({
 	};
 
 	const handleBlur = (): void => {
-		const currentQuery = getCurrentQuery();
-		handleQueryValidation(currentQuery);
+		const currentExpression = getCurrentExpression();
+		handleQueryValidation(currentExpression);
 		setIsFocused(false);
 	};
 
@@ -633,11 +628,11 @@ function QuerySearch({
 
 	const handleExampleClick = (exampleQuery: string): void => {
 		// If there's an existing query, append the example with AND
-		const currentQuery = getCurrentQuery();
-		const newQuery = currentQuery
-			? `${currentQuery} AND ${exampleQuery}`
+		const currentExpression = getCurrentExpression();
+		const newExpression = currentExpression
+			? `${currentExpression} AND ${exampleQuery}`
 			: exampleQuery;
-		updateEditorValue(newQuery);
+		updateEditorValue(newExpression);
 	};
 
 	// Helper function to render a badge for the current context mode
@@ -673,9 +668,9 @@ function QuerySearch({
 		if (word?.from === word?.to && !context.explicit) return null;
 
 		// Get current query from editor
-		const currentQuery = editorRef.current?.state.doc.toString() || '';
+		const currentExpression = getCurrentExpression();
 		// Get the query context at the cursor position
-		const queryContext = getQueryContextAtCursor(currentQuery, cursorPos.ch);
+		const queryContext = getQueryContextAtCursor(currentExpression, cursorPos.ch);
 
 		// Define autocomplete options based on the context
 		let options: {
@@ -1171,8 +1166,8 @@ function QuerySearch({
 
 		if (queryContext.isInParenthesis) {
 			// Different suggestions based on the context within parenthesis or bracket
-			const currentQuery = editorRef.current?.state.doc.toString() || '';
-			const curChar = currentQuery.charAt(cursorPos.ch - 1) || '';
+			const currentExpression = getCurrentExpression();
+			const curChar = currentExpression.charAt(cursorPos.ch - 1) || '';
 
 			if (curChar === '(' || curChar === '[') {
 				// Right after opening parenthesis/bracket
@@ -1321,7 +1316,7 @@ function QuerySearch({
 						style={{
 							position: 'absolute',
 							top: 8,
-							right: validation.isValid === false && getCurrentQuery() ? 40 : 8, // Move left when error shown
+							right: validation.isValid === false && getCurrentExpression() ? 40 : 8, // Move left when error shown
 							cursor: 'help',
 							zIndex: 10,
 							transition: 'right 0.2s ease',
@@ -1383,7 +1378,7 @@ function QuerySearch({
 									// Mod-Enter is usually Ctrl-Enter or Cmd-Enter based on OS
 									run: (): boolean => {
 										if (onRun && typeof onRun === 'function') {
-											onRun(getCurrentQuery());
+											onRun(getCurrentExpression());
 										} else {
 											handleRunQuery();
 										}
@@ -1409,7 +1404,7 @@ function QuerySearch({
 					onBlur={handleBlur}
 				/>
 
-				{getCurrentQuery() && validation.isValid === false && !isFocused && (
+				{getCurrentExpression() && validation.isValid === false && !isFocused && (
 					<div
 						className={cx('query-status-container', {
 							hasErrors: validation.errors.length > 0,

frontend/src/components/QueryBuilderV2/QueryV2/__tests__/QuerySearch.test.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable sonarjs/cognitive-complexity */
 /* eslint-disable import/named */
+import { EditorView } from '@uiw/react-codemirror';
 import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
 import { getValueSuggestions } from 'api/querySuggestions/getValueSuggestion';
 import { initialQueriesMap } from 'constants/queryBuilder';
@@ -151,8 +152,6 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 		>;
 		mockedGetKeys.mockClear();
 
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 		render(
 			<QuerySearch
 				onChange={jest.fn() as jest.MockedFunction<(v: string) => void>}
@@ -171,8 +170,8 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 		const editor = document.querySelector(CM_EDITOR_SELECTOR) as HTMLElement;
 
 		// Focus and type into the editor
-		await user.click(editor);
-		await user.type(editor, SAMPLE_KEY_TYPING);
+		await userEvent.click(editor);
+		await userEvent.type(editor, SAMPLE_KEY_TYPING);
 
 		// Wait for debounced API call (300ms debounce + some buffer)
 		await waitFor(() => expect(mockedGetKeys).toHaveBeenCalled(), {
@@ -187,8 +186,6 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 		>;
 		mockedGetValues.mockClear();
 
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 		render(
 			<QuerySearch
 				onChange={jest.fn() as jest.MockedFunction<(v: string) => void>}
@@ -204,8 +201,8 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 		});
 
 		const editor = document.querySelector(CM_EDITOR_SELECTOR) as HTMLElement;
-		await user.click(editor);
-		await user.type(editor, SAMPLE_VALUE_TYPING_INCOMPLETE);
+		await userEvent.click(editor);
+		await userEvent.type(editor, SAMPLE_VALUE_TYPING_INCOMPLETE);
 
 		// Wait for debounced API call (300ms debounce + some buffer)
 		await waitFor(() => expect(mockedGetValues).toHaveBeenCalled(), {
@@ -241,7 +238,6 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 
 	it('calls provided onRun on Mod-Enter', async () => {
 		const onRun = jest.fn() as jest.MockedFunction<(q: string) => void>;
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
 
 		render(
 			<QuerySearch
@@ -259,8 +255,8 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 		});
 
 		const editor = document.querySelector(CM_EDITOR_SELECTOR) as HTMLElement;
-		await user.click(editor);
-		await user.type(editor, SAMPLE_STATUS_QUERY);
+		await userEvent.click(editor);
+		await userEvent.type(editor, SAMPLE_STATUS_QUERY);
 
 		// Use fireEvent for keyboard shortcuts as userEvent might not work well with CodeMirror
 		const modKey = navigator.platform.includes('Mac') ? 'metaKey' : 'ctrlKey';
@@ -280,8 +276,6 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 		>;
 		mockedHandleRunQuery.mockClear();
 
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 		render(
 			<QuerySearch
 				onChange={jest.fn() as jest.MockedFunction<(v: string) => void>}
@@ -297,8 +291,8 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 		});
 
 		const editor = document.querySelector(CM_EDITOR_SELECTOR) as HTMLElement;
-		await user.click(editor);
-		await user.type(editor, SAMPLE_VALUE_TYPING_COMPLETE);
+		await userEvent.click(editor);
+		await userEvent.type(editor, SAMPLE_VALUE_TYPING_COMPLETE);
 
 		// Use fireEvent for keyboard shortcuts as userEvent might not work well with CodeMirror
 		const modKey = navigator.platform.includes('Mac') ? 'metaKey' : 'ctrlKey';
@@ -348,4 +342,73 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 			{ timeout: 3000 },
 		);
 	});
+
+	it('handles queryData.filter.expression changes without triggering onChange', async () => {
+		// Spy on CodeMirror's EditorView.dispatch, which is invoked when updateEditorValue
+		// applies a programmatic change to the editor.
+		const dispatchSpy = jest.spyOn(EditorView.prototype, 'dispatch');
+		const initialExpression = "service.name = 'frontend'";
+		const updatedExpression = "service.name = 'backend'";
+
+		const onChange = jest.fn() as jest.MockedFunction<(v: string) => void>;
+
+		const initialQueryData = {
+			...initialQueriesMap.logs.builder.queryData[0],
+			filter: {
+				expression: initialExpression,
+			},
+		};
+
+		const { rerender } = render(
+			<QuerySearch
+				onChange={onChange}
+				queryData={initialQueryData}
+				dataSource={DataSource.LOGS}
+			/>,
+		);
+
+		// Wait for CodeMirror to initialize with the initial expression
+		await waitFor(
+			() => {
+				const editorContent = document.querySelector(
+					CM_EDITOR_SELECTOR,
+				) as HTMLElement;
+				expect(editorContent).toBeInTheDocument();
+				const textContent = editorContent.textContent || '';
+				expect(textContent).toBe(initialExpression);
+			},
+			{ timeout: 3000 },
+		);
+
+		// Ensure the editor is explicitly blurred (not focused)
+		// Blur the actual CodeMirror editor container so that QuerySearch's onBlur handler runs.
+		// Note: In jsdom + CodeMirror we can't reliably assert the DOM text content changes when
+		// the expression is updated programmatically, but we can assert that:
+		// 1) The component continues to render, and
+		// 2) No onChange is fired for programmatic updates.
+
+		const updatedQueryData = {
+			...initialQueryData,
+			filter: {
+				expression: updatedExpression,
+			},
+		};
+
+		// Re-render with updated queryData.filter.expression
+		rerender(
+			<QuerySearch
+				onChange={onChange}
+				queryData={updatedQueryData}
+				dataSource={DataSource.LOGS}
+			/>,
+		);
+
+		// updateEditorValue should have resulted in a dispatch call + onChange should not have been called
+		await waitFor(() => {
+			expect(dispatchSpy).toHaveBeenCalled();
+			expect(onChange).not.toHaveBeenCalled();
+		});
+
+		dispatchSpy.mockRestore();
+	});
 });

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.test.tsx

@@ -1,3 +1,4 @@
+import userEvent from '@testing-library/user-event';
 import { FiltersType, QuickFiltersSource } from 'components/QuickFilters/types';
 import { useGetAggregateValues } from 'hooks/queryBuilder/useGetAggregateValues';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -5,7 +6,7 @@ import { useGetQueryKeyValueSuggestions } from 'hooks/querySuggestions/useGetQue
 import { quickFiltersAttributeValuesResponse } from 'mocks-server/__mockdata__/customQuickFilters';
 import { rest, server } from 'mocks-server/server';
 import { UseQueryResult } from 'react-query';
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import { render, screen, waitFor } from 'tests/test-utils';
 import { SuccessResponse } from 'types/api';
 import { IAttributeValuesResponse } from 'types/api/queryBuilder/getAttributesValues';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
@@ -41,13 +42,15 @@ interface MockFilterConfig {
 	type: FiltersType;
 }
 
+const SERVICE_NAME_KEY = 'service.name';
+
 const createMockFilter = (
 	overrides: Partial<MockFilterConfig> = {},
 ): MockFilterConfig => ({
 	// eslint-disable-next-line sonarjs/no-duplicate-string
 	title: 'Service Name',
 	attributeKey: {
-		key: 'service.name',
+		key: SERVICE_NAME_KEY,
 		dataType: DataTypes.String,
 		type: 'resource',
 	},
@@ -68,7 +71,7 @@ const createMockQueryBuilderData = (hasActiveFilters = false): any => ({
 							? [
 									{
 										key: {
-											key: 'service.name',
+											key: SERVICE_NAME_KEY,
 											dataType: DataTypes.String,
 											type: 'resource',
 										},
@@ -188,4 +191,222 @@ describe('CheckboxFilter - User Flows', () => {
 			expect(screen.getByPlaceholderText('Filter values')).toBeInTheDocument();
 		});
 	});
+
+	it('should update query filters when a checkbox is clicked', async () => {
+		const redirectWithQueryBuilderData = jest.fn();
+
+		// Start with no active filters so clicking a checkbox creates one
+		mockUseQueryBuilder.mockReturnValue({
+			...createMockQueryBuilderData(false),
+			redirectWithQueryBuilderData,
+		} as any);
+
+		const mockFilter = createMockFilter({ defaultOpen: true });
+
+		render(
+			<CheckboxFilter
+				filter={mockFilter}
+				source={QuickFiltersSource.LOGS_EXPLORER}
+			/>,
+		);
+
+		// Wait for checkboxes to render
+		await waitFor(() => {
+			expect(screen.getAllByRole('checkbox')).toHaveLength(4);
+		});
+
+		const checkboxes = screen.getAllByRole('checkbox');
+
+		// User unchecks the first value (`mq-kafka`)
+		await userEvent.click(checkboxes[0]);
+
+		// Composite query params (query builder data) should be updated via redirectWithQueryBuilderData
+		expect(redirectWithQueryBuilderData).toHaveBeenCalledTimes(1);
+
+		const [updatedQuery] = redirectWithQueryBuilderData.mock.calls[0];
+		const updatedFilters = updatedQuery.builder.queryData[0].filters;
+
+		expect(updatedFilters.items).toHaveLength(1);
+		expect(updatedFilters.items[0].key.key).toBe(SERVICE_NAME_KEY);
+		// When unchecking from an "all selected" state, we use a NOT_IN filter for that value
+		expect(updatedFilters.items[0].op).toBe('not in');
+		expect(updatedFilters.items[0].value).toBe('mq-kafka');
+	});
+
+	it('should set an IN filter with only the clicked value when using Only', async () => {
+		const redirectWithQueryBuilderData = jest.fn();
+
+		// Existing filter: service.name IN ['mq-kafka', 'otel-demo']
+		mockUseQueryBuilder.mockReturnValue({
+			lastUsedQuery: 0,
+			currentQuery: {
+				builder: {
+					queryData: [
+						{
+							filters: {
+								items: [
+									{
+										key: {
+											key: SERVICE_NAME_KEY,
+											dataType: DataTypes.String,
+											type: 'resource',
+										},
+										op: 'in',
+										value: ['mq-kafka', 'otel-demo'],
+									},
+								],
+								op: 'AND',
+							},
+						},
+					],
+				},
+			},
+			redirectWithQueryBuilderData,
+		} as any);
+
+		const mockFilter = createMockFilter({ defaultOpen: true });
+
+		render(
+			<CheckboxFilter
+				filter={mockFilter}
+				source={QuickFiltersSource.LOGS_EXPLORER}
+			/>,
+		);
+
+		// Wait for values to render
+		await waitFor(() => {
+			expect(screen.getByText('mq-kafka')).toBeInTheDocument();
+		});
+
+		// Click on the value label to trigger the "Only" behavior
+		await userEvent.click(screen.getByText('mq-kafka'));
+
+		expect(redirectWithQueryBuilderData).toHaveBeenCalledTimes(1);
+		const [updatedQuery] = redirectWithQueryBuilderData.mock.calls[0];
+		const updatedFilters = updatedQuery.builder.queryData[0].filters;
+
+		expect(updatedFilters.items).toHaveLength(1);
+		expect(updatedFilters.items[0].key.key).toBe(SERVICE_NAME_KEY);
+		expect(updatedFilters.items[0].op).toBe('in');
+		expect(updatedFilters.items[0].value).toBe('mq-kafka');
+	});
+
+	it('should clear filters for the attribute when using All', async () => {
+		const redirectWithQueryBuilderData = jest.fn();
+
+		// Existing filter: service.name IN ['mq-kafka']
+		mockUseQueryBuilder.mockReturnValue({
+			lastUsedQuery: 0,
+			currentQuery: {
+				builder: {
+					queryData: [
+						{
+							filters: {
+								items: [
+									{
+										key: {
+											key: SERVICE_NAME_KEY,
+											dataType: DataTypes.String,
+											type: 'resource',
+										},
+										op: 'in',
+										value: ['mq-kafka'],
+									},
+								],
+								op: 'AND',
+							},
+						},
+					],
+				},
+			},
+			redirectWithQueryBuilderData,
+		} as any);
+
+		const mockFilter = createMockFilter({ defaultOpen: true });
+
+		render(
+			<CheckboxFilter
+				filter={mockFilter}
+				source={QuickFiltersSource.LOGS_EXPLORER}
+			/>,
+		);
+
+		await waitFor(() => {
+			expect(screen.getByText('mq-kafka')).toBeInTheDocument();
+		});
+
+		// Only one value is selected, so clicking it should switch to "All" (no filter for this key)
+		await userEvent.click(screen.getByText('mq-kafka'));
+
+		expect(redirectWithQueryBuilderData).toHaveBeenCalledTimes(1);
+		const [updatedQuery] = redirectWithQueryBuilderData.mock.calls[0];
+		const updatedFilters = updatedQuery.builder.queryData[0].filters;
+
+		const filtersForServiceName = updatedFilters.items.filter(
+			(item: any) => item.key?.key === SERVICE_NAME_KEY,
+		);
+
+		expect(filtersForServiceName).toHaveLength(0);
+	});
+
+	it('should extend an existing IN filter when checking an additional value', async () => {
+		const redirectWithQueryBuilderData = jest.fn();
+
+		// Existing filter: service.name IN 'mq-kafka'
+		mockUseQueryBuilder.mockReturnValue({
+			lastUsedQuery: 0,
+			currentQuery: {
+				builder: {
+					queryData: [
+						{
+							filters: {
+								items: [
+									{
+										key: {
+											key: SERVICE_NAME_KEY,
+											dataType: DataTypes.String,
+											type: 'resource',
+										},
+										op: 'in',
+										value: 'mq-kafka',
+									},
+								],
+								op: 'AND',
+							},
+						},
+					],
+				},
+			},
+			redirectWithQueryBuilderData,
+		} as any);
+
+		const mockFilter = createMockFilter({ defaultOpen: true });
+
+		render(
+			<CheckboxFilter
+				filter={mockFilter}
+				source={QuickFiltersSource.LOGS_EXPLORER}
+			/>,
+		);
+
+		// Wait for checkboxes to render
+		await waitFor(() => {
+			expect(screen.getAllByRole('checkbox')).toHaveLength(4);
+		});
+
+		const checkboxes = screen.getAllByRole('checkbox');
+
+		// First checkbox corresponds to 'mq-kafka' (already selected),
+		// second will be 'otel-demo' which we now select additionally.
+		await userEvent.click(checkboxes[1]);
+
+		expect(redirectWithQueryBuilderData).toHaveBeenCalledTimes(1);
+		const [updatedQuery] = redirectWithQueryBuilderData.mock.calls[0];
+		const updatedFilters = updatedQuery.builder.queryData[0].filters;
+		const [filterForServiceName] = updatedFilters.items;
+
+		expect(filterForServiceName.key.key).toBe(SERVICE_NAME_KEY);
+		expect(filterForServiceName.op).toBe('in');
+		expect(filterForServiceName.value).toEqual(['mq-kafka', 'otel-demo']);
+	});
 });

frontend/src/components/ShiftOverlay/ShiftHoldOverlayController.tsx

@@ -0,0 +1,27 @@
+import { createShortcutActions } from '../../constants/shortcutActions';
+import { useCmdK } from '../../providers/cmdKProvider';
+import { ShiftOverlay } from './ShiftOverlay';
+import { useShiftHoldOverlay } from './useShiftHoldOverlay';
+
+type UserRole = 'ADMIN' | 'EDITOR' | 'AUTHOR' | 'VIEWER';
+export function ShiftHoldOverlayController({
+	userRole,
+}: {
+	userRole: UserRole;
+}): JSX.Element | null {
+	const { open: isCmdKOpen } = useCmdK();
+	const noop = (): void => undefined;
+
+	const actions = createShortcutActions({
+		navigate: noop,
+		handleThemeChange: noop,
+	});
+
+	const visible = useShiftHoldOverlay({
+		isModalOpen: isCmdKOpen,
+	});
+
+	return (
+		<ShiftOverlay visible={visible} actions={actions} userRole={userRole} />
+	);
+}

frontend/src/components/ShiftOverlay/ShiftOverlay.tsx

@@ -0,0 +1,77 @@
+import './shiftOverlay.scss';
+
+import { useMemo } from 'react';
+import ReactDOM from 'react-dom';
+
+import { formatShortcut } from './formatShortcut';
+
+export type UserRole = 'ADMIN' | 'EDITOR' | 'AUTHOR' | 'VIEWER';
+export type CmdAction = {
+	id: string;
+	name: string;
+	shortcut?: string[];
+	keywords?: string;
+	section?: string;
+	roles?: UserRole[];
+	perform: () => void;
+};
+
+interface ShortcutProps {
+	label: string;
+	keyHint: React.ReactNode;
+}
+
+function Shortcut({ label, keyHint }: ShortcutProps): JSX.Element {
+	return (
+		<div className="shift-overlay__item">
+			<span className="shift-overlay__label">{label}</span>
+			<kbd className="shift-overlay__kbd">{keyHint}</kbd>
+		</div>
+	);
+}
+
+interface ShiftOverlayProps {
+	visible: boolean;
+	actions: CmdAction[];
+	userRole: UserRole;
+}
+
+export function ShiftOverlay({
+	visible,
+	actions,
+	userRole,
+}: ShiftOverlayProps): JSX.Element | null {
+	const navigationActions = useMemo(() => {
+		// RBAC filter: show action if no roles set OR current user role is included
+		const permitted = actions.filter(
+			(a) => !a.roles || a.roles.includes(userRole),
+		);
+
+		// Navigation only + must have shortcut
+		return permitted.filter(
+			(a) =>
+				a.section?.toLowerCase() === 'navigation' &&
+				a.shortcut &&
+				a.shortcut.length > 0,
+		);
+	}, [actions, userRole]);
+
+	if (!visible || navigationActions.length === 0) {
+		return null;
+	}
+
+	return ReactDOM.createPortal(
+		<div className="shift-overlay">
+			<div className="shift-overlay__panel">
+				{navigationActions.map((action) => (
+					<Shortcut
+						key={action.id}
+						label={action.name.replace(/^Go to\s+/i, '')}
+						keyHint={formatShortcut(action.shortcut)}
+					/>
+				))}
+			</div>
+		</div>,
+		document.body,
+	);
+}

frontend/src/components/ShiftOverlay/__tests__/ShiftOverlay.test.tsx

@@ -0,0 +1,102 @@
+import '@testing-library/jest-dom';
+
+import { render, screen } from '@testing-library/react';
+
+import type { CmdAction } from '../ShiftOverlay';
+import { ShiftOverlay } from '../ShiftOverlay';
+
+jest.mock('../formatShortcut', () => ({
+	formatShortcut: (shortcut: string[]): string => shortcut.join('+'),
+}));
+
+const baseActions: CmdAction[] = [
+	{
+		id: '1',
+		name: 'Go to Traces',
+		section: 'navigation',
+		shortcut: ['Shift', 'T'],
+		perform: jest.fn(),
+	},
+	{
+		id: '2',
+		name: 'Go to Metrics',
+		section: 'navigation',
+		shortcut: ['Shift', 'M'],
+		roles: ['ADMIN'], // ✅ now UserRole[]
+		perform: jest.fn(),
+	},
+	{
+		id: '3',
+		name: 'Create Alert',
+		section: 'actions',
+		shortcut: ['A'],
+		perform: jest.fn(),
+	},
+	{
+		id: '4',
+		name: 'Go to Logs',
+		section: 'navigation',
+		perform: jest.fn(),
+	},
+];
+
+describe('ShiftOverlay', () => {
+	it('renders nothing when not visible', () => {
+		const { container } = render(
+			<ShiftOverlay visible={false} actions={baseActions} userRole="ADMIN" />,
+		);
+
+		expect(container.firstChild).toBeNull();
+	});
+
+	it('renders nothing when no navigation shortcuts exist', () => {
+		const { container } = render(
+			<ShiftOverlay
+				visible
+				actions={[
+					{
+						id: 'x',
+						name: 'Create Alert',
+						section: 'actions',
+						perform: jest.fn(),
+					},
+				]}
+				userRole="ADMIN"
+			/>,
+		);
+
+		expect(container.firstChild).toBeNull();
+	});
+
+	it('renders navigation shortcuts in a portal', () => {
+		render(<ShiftOverlay visible actions={baseActions} userRole="ADMIN" />);
+
+		expect(document.body.querySelector('.shift-overlay')).toBeInTheDocument();
+
+		expect(screen.getByText('Traces')).toBeInTheDocument();
+		expect(screen.getByText('Metrics')).toBeInTheDocument();
+
+		expect(screen.getByText('Shift+T')).toBeInTheDocument();
+		expect(screen.getByText('Shift+M')).toBeInTheDocument();
+	});
+
+	it('applies RBAC filtering correctly', () => {
+		render(<ShiftOverlay visible actions={baseActions} userRole="VIEWER" />);
+
+		expect(screen.getByText('Traces')).toBeInTheDocument();
+		expect(screen.queryByText('Metrics')).not.toBeInTheDocument();
+	});
+
+	it('strips "Go to" prefix from labels', () => {
+		render(<ShiftOverlay visible actions={baseActions} userRole="ADMIN" />);
+
+		expect(screen.getByText('Traces')).toBeInTheDocument();
+		expect(screen.queryByText('Go to Traces')).not.toBeInTheDocument();
+	});
+
+	it('does not render actions without shortcuts', () => {
+		render(<ShiftOverlay visible actions={baseActions} userRole="ADMIN" />);
+
+		expect(screen.queryByText('Logs')).not.toBeInTheDocument();
+	});
+});

frontend/src/components/ShiftOverlay/__tests__/useShiftHoldOverlay.test.tsx

@@ -0,0 +1,144 @@
+import { act, renderHook } from '@testing-library/react';
+
+import { useShiftHoldOverlay } from '../useShiftHoldOverlay';
+
+jest.useFakeTimers();
+
+function pressShift(target: EventTarget = window): void {
+	const event = new KeyboardEvent('keydown', {
+		key: 'Shift',
+		bubbles: true,
+	});
+	Object.defineProperty(event, 'target', { value: target });
+	window.dispatchEvent(event);
+}
+
+function releaseShift(): void {
+	window.dispatchEvent(
+		new KeyboardEvent('keyup', {
+			key: 'Shift',
+			bubbles: true,
+		}),
+	);
+}
+
+describe('useShiftHoldOverlay', () => {
+	afterEach(() => {
+		jest.clearAllTimers();
+	});
+
+	it('shows overlay after holding Shift for 600ms', () => {
+		const { result } = renderHook(() => useShiftHoldOverlay({}));
+
+		act(() => {
+			pressShift();
+			jest.advanceTimersByTime(600);
+		});
+
+		expect(result.current).toBe(true);
+	});
+
+	it('does not show overlay if Shift is released early', () => {
+		const { result } = renderHook(() => useShiftHoldOverlay({}));
+
+		act(() => {
+			pressShift();
+			jest.advanceTimersByTime(300);
+			releaseShift();
+			jest.advanceTimersByTime(600);
+		});
+
+		expect(result.current).toBe(false);
+	});
+
+	it('hides overlay on Shift key release', () => {
+		const { result } = renderHook(() => useShiftHoldOverlay({}));
+
+		act(() => {
+			pressShift();
+			jest.advanceTimersByTime(600);
+		});
+
+		expect(result.current).toBe(true);
+
+		act(() => {
+			releaseShift();
+		});
+
+		expect(result.current).toBe(false);
+	});
+
+	it('does not activate when modal is open', () => {
+		const { result } = renderHook(() =>
+			useShiftHoldOverlay({ isModalOpen: true }),
+		);
+
+		act(() => {
+			pressShift();
+			jest.advanceTimersByTime(600);
+		});
+
+		expect(result.current).toBe(false);
+	});
+
+	it('does not activate in typing context (input)', () => {
+		const input = document.createElement('input');
+		document.body.appendChild(input);
+
+		const { result } = renderHook(() => useShiftHoldOverlay({}));
+
+		act(() => {
+			pressShift(input);
+			jest.advanceTimersByTime(600);
+		});
+
+		expect(result.current).toBe(false);
+
+		document.body.removeChild(input);
+	});
+
+	it('cleans up on window blur', () => {
+		const { result } = renderHook(() => useShiftHoldOverlay({}));
+
+		act(() => {
+			pressShift();
+			jest.advanceTimersByTime(600);
+		});
+
+		expect(result.current).toBe(true);
+
+		act(() => {
+			window.dispatchEvent(new Event('blur'));
+		});
+
+		expect(result.current).toBe(false);
+	});
+
+	it('cleans up on document visibility change', () => {
+		const { result } = renderHook(() => useShiftHoldOverlay({}));
+
+		act(() => {
+			pressShift();
+			jest.advanceTimersByTime(600);
+		});
+
+		expect(result.current).toBe(true);
+
+		act(() => {
+			document.dispatchEvent(new Event('visibilitychange'));
+		});
+
+		expect(result.current).toBe(false);
+	});
+
+	it('does nothing when disabled', () => {
+		const { result } = renderHook(() => useShiftHoldOverlay({ disabled: true }));
+
+		act(() => {
+			pressShift();
+			jest.advanceTimersByTime(600);
+		});
+
+		expect(result.current).toBe(false);
+	});
+});

frontend/src/components/ShiftOverlay/formatShortcut.tsx

@@ -0,0 +1,44 @@
+import './shiftOverlay.scss';
+
+import { ArrowUp, ChevronUp, Command, Option } from 'lucide-react';
+import { ReactNode } from 'react';
+
+export function formatShortcut(shortcut?: string[]): ReactNode {
+	if (!shortcut || shortcut.length === 0) return null;
+
+	const combo = shortcut.find((s) => typeof s === 'string' && s.trim());
+	if (!combo) return null;
+
+	return combo.split('+').map((key) => {
+		const k = key.trim().toLowerCase();
+
+		let node: ReactNode;
+		switch (k) {
+			case 'shift':
+				node = <ArrowUp size={14} />;
+				break;
+			case 'cmd':
+			case 'meta':
+				node = <Command size={14} />;
+				break;
+			case 'alt':
+				node = <Option size={14} />;
+				break;
+			case 'ctrl':
+			case 'control':
+				node = <ChevronUp size={14} />;
+				break;
+			case 'arrowup':
+				node = <ArrowUp size={14} />;
+				break;
+			default:
+				node = k.toUpperCase();
+		}
+
+		return (
+			<span key={`shortcut-${k}`} className="shift-overlay__key">
+				{node}
+			</span>
+		);
+	});
+}

frontend/src/components/ShiftOverlay/shiftOverlay.scss

@@ -0,0 +1,75 @@
+.shift-overlay {
+	position: fixed;
+	bottom: 20px;
+	left: 50%;
+	transform: translateX(-50%);
+	z-index: 9999;
+	pointer-events: none;
+
+	&__panel {
+		display: flex;
+		gap: 20px;
+		padding: 8px 12px;
+
+		background: var(--bg-ink-500);
+		color: var(--bg-vanilla-300);
+
+		border-radius: 8px;
+		font-size: 13px;
+		line-height: 1.2;
+
+		box-shadow: 0 6px 20px var(--bg-ink-500);
+		animation: shift-overlay-fade-in 120ms ease-out;
+	}
+
+	&__item {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		white-space: nowrap;
+	}
+
+	&__label {
+		opacity: 0.9;
+	}
+
+	&__kbd {
+		font-family: monospace;
+		font-size: 12px;
+		padding: 2px 6px;
+		display: flex;
+
+		border-radius: 4px;
+		background: var(--bg-slate-100);
+	}
+
+	&__key {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+
+		min-width: 15px;
+		height: 20px;
+
+		border-radius: 4px;
+
+		background-color: var(--bg-slate-100);
+
+		font-size: 12px;
+		font-weight: 500;
+		line-height: 1;
+		color: var(--bg-vanilla-300);
+		flex-shrink: 0;
+	}
+}
+
+@keyframes shift-overlay-fade-in {
+	from {
+		opacity: 0;
+		transform: translateY(-4px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}

frontend/src/components/ShiftOverlay/useShiftHoldOverlay.ts

@@ -0,0 +1,87 @@
+import { useEffect, useRef, useState } from 'react';
+
+const HOLD_DELAY_MS = 500;
+
+function isTypingContext(target: EventTarget | null): boolean {
+	if (!(target instanceof HTMLElement)) return false;
+
+	const tag = target.tagName;
+	return tag === 'INPUT' || tag === 'TEXTAREA' || target.isContentEditable;
+}
+
+interface UseShiftHoldOverlayOptions {
+	disabled?: boolean;
+	isModalOpen?: boolean;
+}
+
+export function useShiftHoldOverlay({
+	disabled = false,
+	isModalOpen = false,
+}: UseShiftHoldOverlayOptions): boolean {
+	const [visible, setVisible] = useState<boolean>(false);
+
+	const timerRef = useRef<number | null>(null);
+	const isHoldingRef = useRef<boolean>(false);
+
+	useEffect((): (() => void) | void => {
+		if (disabled) return;
+
+		function cleanup(): void {
+			isHoldingRef.current = false;
+
+			if (timerRef.current !== null) {
+				window.clearTimeout(timerRef.current);
+				timerRef.current = null;
+			}
+
+			setVisible(false);
+		}
+
+		function onKeyDown(e: KeyboardEvent): void {
+			if (e.key !== 'Shift') return;
+			if (e.repeat) return;
+
+			// Suppress in bad contexts
+			if (
+				isModalOpen ||
+				e.metaKey ||
+				e.ctrlKey ||
+				e.altKey ||
+				isTypingContext(e.target)
+			) {
+				return;
+			}
+
+			isHoldingRef.current = true;
+
+			timerRef.current = window.setTimeout(() => {
+				if (isHoldingRef.current) {
+					setVisible(true);
+				}
+			}, HOLD_DELAY_MS);
+		}
+
+		function onKeyUp(e: KeyboardEvent): void {
+			if (e.key !== 'Shift') return;
+			cleanup();
+		}
+
+		function onBlur(): void {
+			cleanup();
+		}
+
+		window.addEventListener('keydown', onKeyDown);
+		window.addEventListener('keyup', onKeyUp);
+		window.addEventListener('blur', onBlur);
+		document.addEventListener('visibilitychange', cleanup);
+
+		return (): void => {
+			window.removeEventListener('keydown', onKeyDown);
+			window.removeEventListener('keyup', onKeyUp);
+			window.removeEventListener('blur', onBlur);
+			document.removeEventListener('visibilitychange', cleanup);
+		};
+	}, [disabled, isModalOpen]);
+
+	return visible;
+}

frontend/src/components/cmdKPalette/__test__/cmdkPalette.test.tsx

@@ -159,7 +159,6 @@ describe('CmdKPalette', () => {
 
 		expect(screen.getByText(HOME_LABEL)).toBeInTheDocument();
 		expect(screen.getByText('Go to Dashboards')).toBeInTheDocument();
-		expect(screen.getByText('Open Sidebar')).toBeInTheDocument();
 		expect(screen.getByText('Switch to Dark Mode')).toBeInTheDocument();
 	});
 

frontend/src/components/cmdKPalette/cmdKPalette.tsx

@@ -9,34 +9,12 @@ import {
 	CommandList,
 	CommandShortcut,
 } from '@signozhq/command';
-import setLocalStorageApi from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';
-import updateUserPreference from 'api/v1/user/preferences/name/update';
-import { AxiosError } from 'axios';
-import ROUTES from 'constants/routes';
-import { USER_PREFERENCES } from 'constants/userPreferences';
 import { useThemeMode } from 'hooks/useDarkMode';
-import { THEME_MODE } from 'hooks/useDarkMode/constant';
-import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
-import {
-	BellDot,
-	BugIcon,
-	DraftingCompass,
-	Expand,
-	HardDrive,
-	Home,
-	LayoutGrid,
-	ListMinus,
-	ScrollText,
-	Settings,
-} from 'lucide-react';
 import React, { useEffect } from 'react';
-import { useMutation } from 'react-query';
-import { UserPreference } from 'types/api/preferences/preference';
-import { showErrorNotification } from 'utils/error';
 
-import { useAppContext } from '../../providers/App/App';
+import { createShortcutActions } from '../../constants/shortcutActions';
 import { useCmdK } from '../../providers/cmdKProvider';
 
 type CmdAction = {
@@ -58,19 +36,8 @@ export function CmdKPalette({
 }): JSX.Element | null {
 	const { open, setOpen } = useCmdK();
 
-	const { updateUserPreferenceInContext } = useAppContext();
-	const { notifications } = useNotifications();
 	const { setAutoSwitch, setTheme, theme } = useThemeMode();
 
-	const { mutate: updateUserPreferenceMutation } = useMutation(
-		updateUserPreference,
-		{
-			onError: (error) => {
-				showErrorNotification(notifications, error as AxiosError);
-			},
-		},
-	);
-
 	// toggle palette with ⌘/Ctrl+K
 	function handleGlobalCmdK(
 		e: KeyboardEvent,
@@ -111,164 +78,10 @@ export function CmdKPalette({
 		history.push(key);
 	}
 
-	function handleOpenSidebar(): void {
-		setLocalStorageApi(USER_PREFERENCES.SIDENAV_PINNED, 'true');
-		const save = { name: USER_PREFERENCES.SIDENAV_PINNED, value: true };
-		updateUserPreferenceInContext(save as UserPreference);
-		updateUserPreferenceMutation({
-			name: USER_PREFERENCES.SIDENAV_PINNED,
-			value: true,
-		});
-	}
-
-	function handleCloseSidebar(): void {
-		setLocalStorageApi(USER_PREFERENCES.SIDENAV_PINNED, 'false');
-		const save = { name: USER_PREFERENCES.SIDENAV_PINNED, value: false };
-		updateUserPreferenceInContext(save as UserPreference);
-		updateUserPreferenceMutation({
-			name: USER_PREFERENCES.SIDENAV_PINNED,
-			value: false,
-		});
-	}
-
-	const actions: CmdAction[] = [
-		{
-			id: 'home',
-			name: 'Go to Home',
-			shortcut: ['shift + h'],
-			keywords: 'home',
-			section: 'Navigation',
-			icon: <Home size={14} />,
-			roles: ['ADMIN', 'EDITOR', 'AUTHOR', 'VIEWER'],
-			perform: (): void => onClickHandler(ROUTES.HOME),
-		},
-		{
-			id: 'dashboards',
-			name: 'Go to Dashboards',
-			shortcut: ['shift + d'],
-			keywords: 'dashboards',
-			section: 'Navigation',
-			icon: <LayoutGrid size={14} />,
-			roles: ['ADMIN', 'EDITOR', 'AUTHOR', 'VIEWER'],
-			perform: (): void => onClickHandler(ROUTES.ALL_DASHBOARD),
-		},
-		{
-			id: 'services',
-			name: 'Go to Services',
-			shortcut: ['shift + s'],
-			keywords: 'services monitoring',
-			section: 'Navigation',
-			icon: <HardDrive size={14} />,
-			roles: ['ADMIN', 'EDITOR', 'AUTHOR', 'VIEWER'],
-			perform: (): void => onClickHandler(ROUTES.APPLICATION),
-		},
-		{
-			id: 'traces',
-			name: 'Go to Traces',
-			shortcut: ['shift + t'],
-			keywords: 'traces',
-			section: 'Navigation',
-			icon: <DraftingCompass size={14} />,
-			roles: ['ADMIN', 'EDITOR', 'AUTHOR', 'VIEWER'],
-			perform: (): void => onClickHandler(ROUTES.TRACES_EXPLORER),
-		},
-		{
-			id: 'logs',
-			name: 'Go to Logs',
-			shortcut: ['shift + l'],
-			keywords: 'logs',
-			section: 'Navigation',
-			icon: <ScrollText size={14} />,
-			roles: ['ADMIN', 'EDITOR', 'AUTHOR', 'VIEWER'],
-			perform: (): void => onClickHandler(ROUTES.LOGS),
-		},
-		{
-			id: 'alerts',
-			name: 'Go to Alerts',
-			shortcut: ['shift + a'],
-			keywords: 'alerts',
-			section: 'Navigation',
-			icon: <BellDot size={14} />,
-			roles: ['ADMIN', 'EDITOR', 'AUTHOR', 'VIEWER'],
-			perform: (): void => onClickHandler(ROUTES.LIST_ALL_ALERT),
-		},
-		{
-			id: 'exceptions',
-			name: 'Go to Exceptions',
-			shortcut: ['shift + e'],
-			keywords: 'exceptions errors',
-			section: 'Navigation',
-			icon: <BugIcon size={14} />,
-			roles: ['ADMIN', 'EDITOR', 'AUTHOR', 'VIEWER'],
-			perform: (): void => onClickHandler(ROUTES.ALL_ERROR),
-		},
-		{
-			id: 'messaging-queues',
-			name: 'Go to Messaging Queues',
-			shortcut: ['shift + m'],
-			keywords: 'messaging queues mq',
-			section: 'Navigation',
-			icon: <ListMinus size={14} />,
-			roles: ['ADMIN', 'EDITOR', 'AUTHOR', 'VIEWER'],
-			perform: (): void => onClickHandler(ROUTES.MESSAGING_QUEUES_OVERVIEW),
-		},
-		{
-			id: 'my-settings',
-			name: 'Go to Account Settings',
-			keywords: 'account settings',
-			section: 'Navigation',
-			icon: <Settings size={14} />,
-			roles: ['ADMIN', 'EDITOR', 'AUTHOR', 'VIEWER'],
-			perform: (): void => onClickHandler(ROUTES.MY_SETTINGS),
-		},
-
-		// Settings
-		{
-			id: 'open-sidebar',
-			name: 'Open Sidebar',
-			keywords: 'sidebar navigation menu expand',
-			section: 'Settings',
-			icon: <Expand size={14} />,
-			roles: ['ADMIN', 'EDITOR', 'AUTHOR', 'VIEWER'],
-			perform: (): void => handleOpenSidebar(),
-		},
-		{
-			id: 'collapse-sidebar',
-			name: 'Collapse Sidebar',
-			keywords: 'sidebar navigation menu collapse',
-			section: 'Settings',
-			icon: <Expand size={14} />,
-			roles: ['ADMIN', 'EDITOR', 'AUTHOR', 'VIEWER'],
-			perform: (): void => handleCloseSidebar(),
-		},
-		{
-			id: 'dark-mode',
-			name: 'Switch to Dark Mode',
-			keywords: 'theme dark mode appearance',
-			section: 'Settings',
-			icon: <Expand size={14} />,
-			roles: ['ADMIN', 'EDITOR', 'AUTHOR', 'VIEWER'],
-			perform: (): void => handleThemeChange(THEME_MODE.DARK),
-		},
-		{
-			id: 'light-mode',
-			name: 'Switch to Light Mode [Beta]',
-			keywords: 'theme light mode appearance',
-			section: 'Settings',
-			icon: <Expand size={14} />,
-			roles: ['ADMIN', 'EDITOR', 'AUTHOR', 'VIEWER'],
-			perform: (): void => handleThemeChange(THEME_MODE.LIGHT),
-		},
-		{
-			id: 'system-theme',
-			name: 'Switch to System Theme',
-			keywords: 'system theme appearance',
-			section: 'Settings',
-			icon: <Expand size={14} />,
-			roles: ['ADMIN', 'EDITOR', 'AUTHOR', 'VIEWER'],
-			perform: (): void => handleThemeChange(THEME_MODE.SYSTEM),
-		},
-	];
+	const actions = createShortcutActions({
+		navigate: onClickHandler,
+		handleThemeChange,
+	});
 
 	// RBAC filter: show action if no roles set OR current user role is included
 	const permitted = actions.filter(

frontend/src/constants/reactQueryKeys.ts

@@ -56,6 +56,13 @@ export const REACT_QUERY_KEY = {
 	GET_RELATED_METRICS: 'GET_RELATED_METRICS',
 	GET_INSPECT_METRICS_DETAILS: 'GET_INSPECT_METRICS_DETAILS',
 
+	// Metrics Explorer V2 Query Keys
+	GET_METRIC_HIGHLIGHTS: 'GET_METRIC_HIGHLIGHTS',
+	GET_METRIC_METADATA: 'GET_METRIC_METADATA',
+	GET_METRIC_ATTRIBUTES: 'GET_METRIC_ATTRIBUTES',
+	GET_METRIC_ALERTS: 'GET_METRIC_ALERTS',
+	GET_METRIC_DASHBOARDS: 'GET_METRIC_DASHBOARDS',
+
 	// Traces Funnels Query Keys
 	GET_DOMAINS_LIST: 'GET_DOMAINS_LIST',
 	GET_DOMAIN_METRICS_DATA: 'GET_DOMAIN_METRICS_DATA',

frontend/src/constants/shortcutActions.tsx

@@ -0,0 +1,263 @@
+import ROUTES from 'constants/routes';
+import { GlobalShortcutsName } from 'constants/shortcuts/globalShortcuts';
+import { THEME_MODE } from 'hooks/useDarkMode/constant';
+import {
+	BarChart2,
+	BellDot,
+	BugIcon,
+	Compass,
+	DraftingCompass,
+	Expand,
+	HardDrive,
+	Home,
+	LayoutGrid,
+	ListMinus,
+	ScrollText,
+	Settings,
+	TowerControl,
+	Workflow,
+} from 'lucide-react';
+import React from 'react';
+
+export type UserRole = 'ADMIN' | 'EDITOR' | 'AUTHOR' | 'VIEWER';
+
+export type CmdAction = {
+	id: string;
+	name: string;
+	shortcut?: string[];
+	keywords?: string;
+	section?: string;
+	icon?: React.ReactNode;
+	roles?: UserRole[];
+	perform: () => void;
+};
+
+type ActionDeps = {
+	navigate: (path: string) => void;
+	handleThemeChange: (mode: string) => void;
+};
+
+export function createShortcutActions(deps: ActionDeps): CmdAction[] {
+	const { navigate, handleThemeChange } = deps;
+
+	return [
+		{
+			id: 'home',
+			name: 'Go to Home',
+			shortcut: [GlobalShortcutsName.NavigateToHome],
+			keywords: 'home',
+			section: 'Navigation',
+			icon: <Home size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: (): void => navigate(ROUTES.HOME),
+		},
+		{
+			id: 'dashboards',
+			name: 'Go to Dashboards',
+			shortcut: [GlobalShortcutsName.NavigateToDashboards],
+			keywords: 'dashboards',
+			section: 'Navigation',
+			icon: <LayoutGrid size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: (): void => navigate(ROUTES.ALL_DASHBOARD),
+		},
+		{
+			id: 'services',
+			name: 'Go to Services',
+			shortcut: [GlobalShortcutsName.NavigateToServices],
+			keywords: 'services monitoring',
+			section: 'Navigation',
+			icon: <HardDrive size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: (): void => navigate(ROUTES.APPLICATION),
+		},
+		{
+			id: 'alerts',
+			name: 'Go to Alerts',
+			shortcut: [GlobalShortcutsName.NavigateToAlerts],
+			keywords: 'alerts',
+			section: 'Navigation',
+			icon: <BellDot size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: (): void => navigate(ROUTES.LIST_ALL_ALERT),
+		},
+		{
+			id: 'exceptions',
+			name: 'Go to Exceptions',
+			shortcut: [GlobalShortcutsName.NavigateToExceptions],
+			keywords: 'exceptions errors',
+			section: 'Navigation',
+			icon: <BugIcon size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: (): void => navigate(ROUTES.ALL_ERROR),
+		},
+		{
+			id: 'messaging-queues',
+			name: 'Go to Messaging Queues',
+			shortcut: [GlobalShortcutsName.NavigateToMessagingQueues],
+			keywords: 'messaging queues mq',
+			section: 'Navigation',
+			icon: <ListMinus size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: (): void => navigate(ROUTES.MESSAGING_QUEUES_OVERVIEW),
+		},
+
+		// logs
+		{
+			id: 'logs',
+			name: 'Go to Logs',
+			shortcut: [GlobalShortcutsName.NavigateToLogs],
+			keywords: 'logs',
+			section: 'Logs',
+			icon: <ScrollText size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: (): void => navigate(ROUTES.LOGS),
+		},
+		{
+			id: 'logs',
+			name: 'Go to Logs Pipelines',
+			shortcut: [GlobalShortcutsName.NavigateToLogsPipelines],
+			keywords: 'logs pipelines',
+			section: 'Logs',
+			icon: <Workflow size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: (): void => navigate(ROUTES.LOGS_PIPELINES),
+		},
+		{
+			id: 'logs',
+			name: 'Go to Logs Views',
+			shortcut: [GlobalShortcutsName.NavigateToLogsViews],
+			keywords: 'logs views',
+			section: 'Logs',
+			icon: <TowerControl size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: (): void => navigate(ROUTES.LOGS_SAVE_VIEWS),
+		},
+
+		// metrics
+		{
+			id: 'metrics-summary',
+			name: 'Go to Metrics Summary',
+			shortcut: [GlobalShortcutsName.NavigateToMetricsSummary],
+			keywords: 'metrics summary',
+			section: 'Metrics',
+			icon: <BarChart2 size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: (): void => navigate(ROUTES.METRICS_EXPLORER),
+		},
+		{
+			id: 'metrics-explorer',
+			name: 'Go to Metrics Explorer',
+			shortcut: [GlobalShortcutsName.NavigateToMetricsExplorer],
+			keywords: 'metrics explorer',
+			section: 'Metrics',
+			icon: <Compass size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: (): void => navigate(ROUTES.METRICS_EXPLORER_EXPLORER),
+		},
+		{
+			id: 'metrics-views',
+			name: 'Go to Metrics Views',
+			shortcut: [GlobalShortcutsName.NavigateToMetricsViews],
+			keywords: 'metrics views',
+			section: 'Metrics',
+			icon: <TowerControl size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: (): void => navigate(ROUTES.METRICS_EXPLORER_VIEWS),
+		},
+
+		// Traces
+		{
+			id: 'traces',
+			name: 'Go to Traces',
+			shortcut: [GlobalShortcutsName.NavigateToTraces],
+			keywords: 'traces',
+			section: 'Traces',
+			icon: <DraftingCompass size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: (): void => navigate(ROUTES.TRACES_EXPLORER),
+		},
+		{
+			id: 'traces-funnel',
+			name: 'Go to Traces Funnels',
+			shortcut: [GlobalShortcutsName.NavigateToTracesFunnel],
+			keywords: 'traces funnel',
+			section: 'Traces',
+			icon: <DraftingCompass size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: (): void => navigate(ROUTES.TRACES_FUNNELS),
+		},
+
+		// Common actions
+		{
+			id: 'dark-mode',
+			name: 'Switch to Dark Mode',
+			keywords: 'theme dark mode appearance',
+			section: 'Common',
+			icon: <Expand size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: (): void => handleThemeChange(THEME_MODE.DARK),
+		},
+		{
+			id: 'light-mode',
+			name: 'Switch to Light Mode [Beta]',
+			keywords: 'theme light mode appearance',
+			section: 'Common',
+			icon: <Expand size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: (): void => handleThemeChange(THEME_MODE.LIGHT),
+		},
+		{
+			id: 'system-theme',
+			name: 'Switch to System Theme',
+			keywords: 'system theme appearance',
+			section: 'Common',
+			icon: <Expand size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: (): void => handleThemeChange(THEME_MODE.SYSTEM),
+		},
+
+		// settings sub-pages
+		{
+			id: 'my-settings',
+			name: 'Go to Account Settings',
+			shortcut: [GlobalShortcutsName.NavigateToSettings],
+			keywords: 'account settings',
+			section: 'Settings',
+			icon: <Settings size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: (): void => navigate(ROUTES.MY_SETTINGS),
+		},
+		{
+			id: 'my-settings-ingestion',
+			name: 'Go to Account Settings Ingestion',
+			shortcut: [GlobalShortcutsName.NavigateToSettingsIngestion],
+			keywords: 'account settings',
+			section: 'Settings',
+			icon: <Settings size={14} />,
+			roles: ['ADMIN', 'EDITOR'],
+			perform: (): void => navigate(ROUTES.INGESTION_SETTINGS),
+		},
+
+		{
+			id: 'my-settings-billing',
+			name: 'Go to Account Settings Billing',
+			shortcut: [GlobalShortcutsName.NavigateToSettingsBilling],
+			keywords: 'account settings billing',
+			section: 'Settings',
+			icon: <Settings size={14} />,
+			roles: ['ADMIN', 'EDITOR'],
+			perform: (): void => navigate(ROUTES.BILLING),
+		},
+		{
+			id: 'my-settings-api-keys',
+			name: 'Go to Account Settings API Keys',
+			shortcut: [GlobalShortcutsName.NavigateToSettingsAPIKeys],
+			keywords: 'account settings api keys',
+			section: 'Settings',
+			icon: <Settings size={14} />,
+			roles: ['ADMIN', 'EDITOR'],
+			perform: (): void => navigate(ROUTES.API_KEYS),
+		},
+	];
+}

frontend/src/constants/shortcuts/globalShortcuts.ts

@@ -1,25 +1,57 @@
 export const GlobalShortcuts = {
-	NavigateToServices: 's+shift',
-	NavigateToTraces: 't+shift',
-	NavigateToLogs: 'l+shift',
-	NavigateToDashboards: 'd+shift',
-	NavigateToAlerts: 'a+shift',
-	NavigateToExceptions: 'e+shift',
-	NavigateToMessagingQueues: 'm+shift',
-	ToggleSidebar: 'b+shift',
-	NavigateToHome: 'h+shift',
+	NavigateToServices: 'shift+s',
+	NavigateToDashboards: 'shift+d',
+	NavigateToAlerts: 'shift+a',
+	NavigateToExceptions: 'shift+e',
+	NavigateToMessagingQueues: 'shift+q',
+	ToggleSidebar: 'shift+b',
+	NavigateToHome: 'shift+h',
+
+	// logs
+	NavigateToLogs: 'shift+l',
+	NavigateToLogsPipelines: 'shift+l+p',
+	NavigateToLogsViews: 'shift+l+v',
+
+	// traces
+	NavigateToTraces: 'shift+t',
+	NavigateToTracesFunnel: 'shift+t+f',
+	NavigateToTracesViews: 'shift+t+v',
+
+	// metrics
+	NavigateToMetricsSummary: 'shift+m',
+	NavigateToMetricsExplorer: 'shift+m+e',
+	NavigateToMetricsViews: 'shift+m+v',
+
+	// settings
+	NavigateToSettings: 'shift+g',
+	NavigateToSettingsIngestion: 'shift+g+i',
+	NavigateToSettingsBilling: 'shift+g+b',
+	NavigateToSettingsAPIKeys: 'shift+g+k',
+	NavigateToSettingsNotificationChannels: 'shift+g+n',
 };
 
 export const GlobalShortcutsName = {
 	NavigateToServices: 'shift+s',
 	NavigateToTraces: 'shift+t',
-	NavigateToLogs: 'shift+l',
 	NavigateToDashboards: 'shift+d',
 	NavigateToAlerts: 'shift+a',
 	NavigateToExceptions: 'shift+e',
-	NavigateToMessagingQueues: 'shift+m',
+	NavigateToMessagingQueues: 'shift+q',
 	ToggleSidebar: 'shift+b',
 	NavigateToHome: 'shift+h',
+	NavigateToTracesFunnel: 'shift+t+f',
+	NavigateToTracesViews: 'shift+t+v',
+	NavigateToMetricsSummary: 'shift+m',
+	NavigateToMetricsExplorer: 'shift+m+e',
+	NavigateToMetricsViews: 'shift+m+v',
+	NavigateToSettings: 'shift+g',
+	NavigateToSettingsIngestion: 'shift+g+i',
+	NavigateToSettingsBilling: 'shift+g+b',
+	NavigateToSettingsAPIKeys: 'shift+g+k',
+	NavigateToSettingsNotificationChannels: 'shift+g+n',
+	NavigateToLogs: 'shift+l',
+	NavigateToLogsPipelines: 'shift+l+p',
+	NavigateToLogsViews: 'shift+l+v',
 };
 
 export const GlobalShortcutsDescription = {
@@ -32,4 +64,17 @@ export const GlobalShortcutsDescription = {
 	NavigateToExceptions: 'Navigate to Exceptions List',
 	NavigateToMessagingQueues: 'Navigate to Messaging Queues',
 	ToggleSidebar: 'Toggle sidebar visibility',
+	NavigateToTracesFunnel: 'Navigate to Traces Funnel',
+	NavigateToTracesViews: 'Navigate to Traces Views',
+	NavigateToMetricsSummary: 'Navigate to Metrics Summary',
+	NavigateToMetricsExplorer: 'Navigate to Metrics Explorer',
+	NavigateToMetricsViews: 'Navigate to Metrics Views',
+	NavigateToSettings: 'Navigate to Settings',
+	NavigateToSettingsIngestion: 'Navigate to Ingestion Settings',
+	NavigateToSettingsBilling: 'Navigate to Billing Settings',
+	NavigateToSettingsAPIKeys: 'Navigate to API Keys Settings',
+	NavigateToSettingsNotificationChannels:
+		'Navigate to Notification Channels Settings',
+	NavigateToLogsPipelines: 'Navigate to Logs Pipelines',
+	NavigateToLogsViews: 'Navigate to Logs Views',
 };

frontend/src/container/AppLayout/__tests__/sidebar-toggle-shortcut.test.tsx

@@ -10,6 +10,20 @@ import {
 import { QueryClient, QueryClientProvider } from 'react-query';
 
 // Mock dependencies
+jest.mock('providers/cmdKProvider', () => ({
+	useCmdK: (): {
+		open: boolean;
+		setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+		openCmdK: () => void;
+		closeCmdK: () => void;
+	} => ({
+		open: false,
+		setOpen: jest.fn(),
+		openCmdK: jest.fn(),
+		closeCmdK: jest.fn(),
+	}),
+}));
+
 jest.mock('api/common/logEvent', () => jest.fn());
 
 // Mock the AppContext
@@ -63,7 +77,7 @@ describe('Sidebar Toggle Shortcut', () => {
 
 	describe('Global Shortcuts Constants', () => {
 		it('should have the correct shortcut key combination', () => {
-			expect(GlobalShortcuts.ToggleSidebar).toBe('b+shift');
+			expect(GlobalShortcuts.ToggleSidebar).toBe('shift+b');
 		});
 	});
 

frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx

@@ -67,7 +67,6 @@ function WidgetGraphComponent({
 }: WidgetGraphComponentProps): JSX.Element {
 	const { safeNavigate } = useSafeNavigate();
 	const [deleteModal, setDeleteModal] = useState(false);
-	const [hovered, setHovered] = useState(false);
 	const { notifications } = useNotifications();
 	const { pathname, search } = useLocation();
 
@@ -316,18 +315,6 @@ function WidgetGraphComponent({
 			style={{
 				height: '100%',
 			}}
-			onMouseOver={(): void => {
-				setHovered(true);
-			}}
-			onFocus={(): void => {
-				setHovered(true);
-			}}
-			onMouseOut={(): void => {
-				setHovered(false);
-			}}
-			onBlur={(): void => {
-				setHovered(false);
-			}}
 			id={widget.id}
 			className="widget-graph-component-container"
 		>
@@ -377,7 +364,6 @@ function WidgetGraphComponent({
 
 			<div className="drag-handle">
 				<WidgetHeader
-					parentHover={hovered}
 					title={widget?.title}
 					widget={widget}
 					onView={handleOnView}

frontend/src/container/GridCardLayout/GridCardLayout.styles.scss

@@ -99,6 +99,12 @@
 			height: calc(100% - 30px);
 		}
 	}
+
+	&:hover {
+		.widget-header-more-options {
+			visibility: visible;
+		}
+	}
 }
 
 .widget-full-view {

frontend/src/container/GridCardLayout/WidgetHeader/WidgetHeader.styles.scss

@@ -51,10 +51,6 @@
 	visibility: visible;
 }
 
-.widget-header-hover {
-	visibility: visible;
-}
-
 .widget-api-actions {
 	padding-right: 0.25rem;
 }

frontend/src/container/GridCardLayout/WidgetHeader/__tests__/WidgetHeader.test.tsx

@@ -181,7 +181,6 @@ describe('WidgetHeader', () => {
 				title={TEST_WIDGET_TITLE}
 				widget={mockWidget}
 				onView={mockOnView}
-				parentHover={false}
 				queryResponse={mockQueryResponse}
 				isWarning={false}
 				isFetchingResponse={false}
@@ -204,7 +203,6 @@ describe('WidgetHeader', () => {
 				title="Empty Widget"
 				widget={emptyWidget}
 				onView={mockOnView}
-				parentHover={false}
 				queryResponse={mockQueryResponse}
 				isWarning={false}
 				isFetchingResponse={false}
@@ -227,7 +225,6 @@ describe('WidgetHeader', () => {
 				title={TABLE_WIDGET_TITLE}
 				widget={tableWidget}
 				onView={mockOnView}
-				parentHover={false}
 				queryResponse={mockQueryResponse}
 				isWarning={false}
 				isFetchingResponse={false}
@@ -255,7 +252,6 @@ describe('WidgetHeader', () => {
 				title={TABLE_WIDGET_TITLE}
 				widget={tableWidget}
 				onView={mockOnView}
-				parentHover={false}
 				queryResponse={mockQueryResponse}
 				isWarning={false}
 				isFetchingResponse={false}
@@ -298,7 +294,6 @@ describe('WidgetHeader', () => {
 				title={TEST_WIDGET_TITLE}
 				widget={mockWidget}
 				onView={mockOnView}
-				parentHover={false}
 				queryResponse={errorResponse}
 				isWarning={false}
 				isFetchingResponse={false}
@@ -340,7 +335,6 @@ describe('WidgetHeader', () => {
 				title={TEST_WIDGET_TITLE}
 				widget={mockWidget}
 				onView={mockOnView}
-				parentHover={false}
 				queryResponse={warningResponse}
 				isWarning
 				isFetchingResponse={false}
@@ -370,7 +364,6 @@ describe('WidgetHeader', () => {
 				title={TEST_WIDGET_TITLE}
 				widget={mockWidget}
 				onView={mockOnView}
-				parentHover={false}
 				queryResponse={fetchingResponse}
 				isWarning={false}
 				isFetchingResponse
@@ -389,7 +382,6 @@ describe('WidgetHeader', () => {
 				title={TEST_WIDGET_TITLE}
 				widget={mockWidget}
 				onView={mockOnView}
-				parentHover={false}
 				queryResponse={mockQueryResponse}
 				isWarning={false}
 				isFetchingResponse={false}
@@ -414,7 +406,6 @@ describe('WidgetHeader', () => {
 				title={TABLE_WIDGET_TITLE}
 				widget={tableWidget}
 				onView={mockOnView}
-				parentHover={false}
 				queryResponse={mockQueryResponse}
 				isWarning={false}
 				isFetchingResponse={false}
@@ -433,7 +424,6 @@ describe('WidgetHeader', () => {
 				title={TEST_WIDGET_TITLE}
 				widget={mockWidget}
 				onView={mockOnView}
-				parentHover={false}
 				queryResponse={mockQueryResponse}
 				isWarning={false}
 				isFetchingResponse={false}
@@ -454,7 +444,6 @@ describe('WidgetHeader', () => {
 				title={TEST_WIDGET_TITLE}
 				widget={mockWidget}
 				onView={mockOnView}
-				parentHover={false}
 				queryResponse={mockQueryResponse}
 				isWarning={false}
 				isFetchingResponse={false}

frontend/src/container/GridCardLayout/WidgetHeader/index.tsx

@@ -48,7 +48,6 @@ interface IWidgetHeaderProps {
 	onView: VoidFunction;
 	onDelete?: VoidFunction;
 	onClone?: VoidFunction;
-	parentHover: boolean;
 	queryResponse: UseQueryResult<
 		SuccessResponse<MetricRangePayloadProps, unknown> & {
 			warning?: Warning;
@@ -69,7 +68,6 @@ function WidgetHeader({
 	onView,
 	onDelete,
 	onClone,
-	parentHover,
 	queryResponse,
 	threshold,
 	headerMenuList,
@@ -315,8 +313,6 @@ function WidgetHeader({
 								<MoreOutlined
 									data-testid="widget-header-options"
 									className={`widget-header-more-options ${
-										parentHover ? 'widget-header-hover' : ''
-									} ${
 										globalSearchAvailable ? 'widget-header-more-options-visible' : ''
 									}`}
 								/>

frontend/src/container/LogDetailedView/BodyTitleRenderer.tsx

@@ -92,14 +92,14 @@ function BodyTitleRenderer({
 
 			if (isObject) {
 				// For objects/arrays, stringify the entire structure
-				copyText = `"${cleanedKey}": ${JSON.stringify(value, null, 2)}`;
+				copyText = JSON.stringify(value, null, 2);
 			} else if (parentIsArray) {
-				// For array elements, copy just the value
-				copyText = `"${cleanedKey}": ${value}`;
+				// array elements
+				copyText = `${value}`;
 			} else {
-				// For primitive values, format as JSON key-value pair
-				const valueStr = typeof value === 'string' ? `"${value}"` : String(value);
-				copyText = `"${cleanedKey}": ${valueStr}`;
+				// primitive values
+				const valueStr = typeof value === 'string' ? value : String(value);
+				copyText = valueStr;
 			}
 
 			setCopy(copyText);

frontend/src/container/LogDetailedView/TableView/TableViewActions.tsx

@@ -60,7 +60,8 @@ const BodyContent: React.FC<{
 	fieldData: Record<string, string>;
 	record: DataType;
 	bodyHtml: { __html: string };
-}> = React.memo(({ fieldData, record, bodyHtml }) => {
+	textToCopy: string;
+}> = React.memo(({ fieldData, record, bodyHtml, textToCopy }) => {
 	const { isLoading, treeData, error } = useAsyncJSONProcessing(
 		fieldData.value,
 		record.field === 'body',
@@ -92,11 +93,13 @@ const BodyContent: React.FC<{
 
 	if (record.field === 'body') {
 		return (
-			<span
-				style={{ color: Color.BG_SIENNA_400, whiteSpace: 'pre-wrap', tabSize: 4 }}
-			>
-				<span dangerouslySetInnerHTML={bodyHtml} />
-			</span>
+			<CopyClipboardHOC entityKey="body" textToCopy={textToCopy}>
+				<span
+					style={{ color: Color.BG_SIENNA_400, whiteSpace: 'pre-wrap', tabSize: 4 }}
+				>
+					<span dangerouslySetInnerHTML={bodyHtml} />
+				</span>
+			</CopyClipboardHOC>
 		);
 	}
 
@@ -172,7 +175,12 @@ export default function TableViewActions(
 		switch (record.field) {
 			case 'body':
 				return (
-					<BodyContent fieldData={fieldData} record={record} bodyHtml={bodyHtml} />
+					<BodyContent
+						fieldData={fieldData}
+						record={record}
+						bodyHtml={bodyHtml}
+						textToCopy={textToCopy}
+					/>
 				);
 
 			case 'timestamp':
@@ -194,6 +202,7 @@ export default function TableViewActions(
 		record,
 		fieldData,
 		bodyHtml,
+		textToCopy,
 		formatTimezoneAdjustedTimestamp,
 		cleanTimestamp,
 	]);
@@ -202,7 +211,12 @@ export default function TableViewActions(
 	if (record.field === 'body') {
 		return (
 			<div className={cx('value-field', isOpen ? 'open-popover' : '')}>
-				<BodyContent fieldData={fieldData} record={record} bodyHtml={bodyHtml} />
+				<BodyContent
+					fieldData={fieldData}
+					record={record}
+					bodyHtml={bodyHtml}
+					textToCopy={textToCopy}
+				/>
 				{!isListViewPanel && !RESTRICTED_SELECTED_FIELDS.includes(fieldFilterKey) && (
 					<span className="action-btn">
 						<Tooltip title="Filter for value">

frontend/src/container/LogDetailedView/TableView/__test__/TableViewActions.test.tsx

@@ -1,16 +1,54 @@
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { RESTRICTED_SELECTED_FIELDS } from 'container/LogsFilters/config';
 
 import TableViewActions from '../TableViewActions';
+import useAsyncJSONProcessing from '../useAsyncJSONProcessing';
+
+// Mock data for tests
+let mockCopyToClipboard: jest.Mock;
+let mockNotificationsSuccess: jest.Mock;
 
 // Mock the components and hooks
 jest.mock('components/Logs/CopyClipboardHOC', () => ({
 	__esModule: true,
-	default: ({ children }: { children: React.ReactNode }): JSX.Element => (
-		<div className="CopyClipboardHOC">{children}</div>
+	default: ({
+		children,
+		textToCopy,
+		entityKey,
+	}: {
+		children: React.ReactNode;
+		textToCopy: string;
+		entityKey: string;
+	}): JSX.Element => (
+		// eslint-disable-next-line jsx-a11y/click-events-have-key-events
+		<div
+			className="CopyClipboardHOC"
+			data-testid={`copy-clipboard-${entityKey}`}
+			data-text-to-copy={textToCopy}
+			onClick={(): void => {
+				if (mockCopyToClipboard) {
+					mockCopyToClipboard(textToCopy);
+				}
+				if (mockNotificationsSuccess) {
+					mockNotificationsSuccess({
+						message: `${entityKey} copied to clipboard`,
+						key: `${entityKey} copied to clipboard`,
+					});
+				}
+			}}
+			role="button"
+			tabIndex={0}
+		>
+			{children}
+		</div>
 	),
 }));
 
+jest.mock('../useAsyncJSONProcessing', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
 jest.mock('providers/Timezone', () => ({
 	useTimezone: (): {
 		formatTimezoneAdjustedTimestamp: (timestamp: string) => string;
@@ -53,6 +91,19 @@ describe('TableViewActions', () => {
 		onGroupByAttribute: jest.fn(),
 	};
 
+	beforeEach(() => {
+		mockCopyToClipboard = jest.fn();
+		mockNotificationsSuccess = jest.fn();
+
+		// Default mock for useAsyncJSONProcessing
+		const mockUseAsyncJSONProcessing = jest.mocked(useAsyncJSONProcessing);
+		mockUseAsyncJSONProcessing.mockReturnValue({
+			isLoading: false,
+			treeData: null,
+			error: null,
+		});
+	});
+
 	it('should render without crashing', () => {
 		render(
 			<TableViewActions
@@ -127,4 +178,60 @@ describe('TableViewActions', () => {
 			container.querySelector(ACTION_BUTTON_TEST_ID),
 		).not.toBeInTheDocument();
 	});
+
+	it('should copy non-JSON body text without quotes when user clicks on body', () => {
+		// Setup: body field with surrounding quotes
+		const bodyValueWithQuotes =
+			'"FeatureFlag \'kafkaQueueProblems\' is enabled, sleeping 1 second"';
+		const expectedCopiedText =
+			"FeatureFlag 'kafkaQueueProblems' is enabled, sleeping 1 second";
+
+		const bodyProps = {
+			fieldData: {
+				field: 'body',
+				value: bodyValueWithQuotes,
+			},
+			record: {
+				key: 'body-key',
+				field: 'body',
+				value: bodyValueWithQuotes,
+			},
+			isListViewPanel: false,
+			isfilterInLoading: false,
+			isfilterOutLoading: false,
+			onClickHandler: jest.fn(),
+			onGroupByAttribute: jest.fn(),
+		};
+
+		// Render component with body field
+		render(
+			<TableViewActions
+				fieldData={bodyProps.fieldData}
+				record={bodyProps.record}
+				isListViewPanel={bodyProps.isListViewPanel}
+				isfilterInLoading={bodyProps.isfilterInLoading}
+				isfilterOutLoading={bodyProps.isfilterOutLoading}
+				onClickHandler={bodyProps.onClickHandler}
+				onGroupByAttribute={bodyProps.onGroupByAttribute}
+			/>,
+		);
+
+		// Find the clickable copy area for body
+		const copyArea = screen.getByTestId('copy-clipboard-body');
+
+		// Verify it has the correct text to copy (without quotes)
+		expect(copyArea).toHaveAttribute('data-text-to-copy', expectedCopiedText);
+
+		// Action: User clicks on body content
+		fireEvent.click(copyArea);
+
+		// Assert: Text was copied without surrounding quotes
+		expect(mockCopyToClipboard).toHaveBeenCalledWith(expectedCopiedText);
+
+		// Assert: Success notification shown
+		expect(mockNotificationsSuccess).toHaveBeenCalledWith({
+			message: 'body copied to clipboard',
+			key: 'body copied to clipboard',
+		});
+	});
 });

frontend/src/container/LogDetailedView/__tests__/BodyTitleRenderer.test.tsx

@@ -51,7 +51,7 @@ describe('BodyTitleRenderer', () => {
 		await user.click(screen.getByText('name'));
 
 		await waitFor(() => {
-			expect(mockSetCopy).toHaveBeenCalledWith('"user.name": "John"');
+			expect(mockSetCopy).toHaveBeenCalledWith('John');
 			expect(mockNotification).toHaveBeenCalledWith(
 				expect.objectContaining({
 					message: expect.stringContaining('user.name'),
@@ -75,7 +75,7 @@ describe('BodyTitleRenderer', () => {
 		await user.click(screen.getByText('0'));
 
 		await waitFor(() => {
-			expect(mockSetCopy).toHaveBeenCalledWith('"items[*].0": arrayElement');
+			expect(mockSetCopy).toHaveBeenCalledWith('arrayElement');
 		});
 	});
 
@@ -96,9 +96,8 @@ describe('BodyTitleRenderer', () => {
 
 		await waitFor(() => {
 			const callArg = mockSetCopy.mock.calls[0][0];
-			expect(callArg).toContain('"user.metadata":');
-			expect(callArg).toContain('"id": 123');
-			expect(callArg).toContain('"active": true');
+			const expectedJson = JSON.stringify(testObject, null, 2);
+			expect(callArg).toBe(expectedJson);
 			expect(mockNotification).toHaveBeenCalledWith(
 				expect.objectContaining({
 					message: expect.stringContaining('object copied'),

frontend/src/container/MetricsExplorer/MetricDetails/AllAttributes.tsx

@@ -1,8 +1,17 @@
-import { Button, Collapse, Input, Menu, Popover, Typography } from 'antd';
+import {
+	Button,
+	Collapse,
+	Input,
+	Menu,
+	Popover,
+	Skeleton,
+	Typography,
+} from 'antd';
 import { ColumnsType } from 'antd/es/table';
 import logEvent from 'api/common/logEvent';
 import { ResizeTable } from 'components/ResizeTable';
 import { DataType } from 'container/LogDetailedView/TableView';
+import { useGetMetricAttributes } from 'hooks/metricsExplorer/v2/useGetMetricAttributes';
 import { useNotifications } from 'hooks/useNotifications';
 import { Compass, Copy, Search } from 'lucide-react';
 import { useCallback, useMemo, useState } from 'react';
@@ -13,7 +22,9 @@ import ROUTES from '../../../constants/routes';
 import { useHandleExplorerTabChange } from '../../../hooks/useHandleExplorerTabChange';
 import { MetricsExplorerEventKeys, MetricsExplorerEvents } from '../events';
 import { AllAttributesProps, AllAttributesValueProps } from './types';
-import { getMetricDetailsQuery } from './utils';
+import { getMetricDetailsQuery, transformMetricAttributes } from './utils';
+
+const ALL_ATTRIBUTES_KEY = 'all-attributes';
 
 export function AllAttributesValue({
 	filterKey,
@@ -110,13 +121,20 @@ export function AllAttributesValue({
 
 function AllAttributes({
 	metricName,
-	attributes,
 	metricType,
 }: AllAttributesProps): JSX.Element {
 	const [searchString, setSearchString] = useState('');
-	const [activeKey, setActiveKey] = useState<string | string[]>(
-		'all-attributes',
-	);
+	const [activeKey, setActiveKey] = useState<string[]>([ALL_ATTRIBUTES_KEY]);
+
+	const {
+		data: attributesData,
+		isLoading: isLoadingAttributes,
+		isError: isErrorAttributes,
+	} = useGetMetricAttributes({
+		metricName,
+	});
+
+	const { attributes } = transformMetricAttributes(attributesData);
 
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
 
@@ -178,7 +196,7 @@ function AllAttributes({
 			attributes.filter(
 				(attribute) =>
 					attribute.key.toLowerCase().includes(searchString.toLowerCase()) ||
-					attribute.value.some((value) =>
+					attribute.values.some((value) =>
 						value.toLowerCase().includes(searchString.toLowerCase()),
 					),
 			),
@@ -195,7 +213,7 @@ function AllAttributes({
 						},
 						value: {
 							key: attribute.key,
-							value: attribute.value,
+							value: attribute.values,
 						},
 				  }))
 				: [],
@@ -252,8 +270,38 @@ function AllAttributes({
 		],
 	);
 
-	const items = useMemo(
-		() => [
+	const emptyText = useMemo(
+		() =>
+			isErrorAttributes ? 'Error fetching attributes' : 'No attributes found',
+		[isErrorAttributes],
+	);
+
+	const items = useMemo(() => {
+		let children;
+		if (isLoadingAttributes) {
+			children = (
+				<div className="all-attributes-skeleton-container">
+					<Skeleton active title={false} paragraph={{ rows: 8 }} />
+				</div>
+			);
+		} else {
+			children = (
+				<ResizeTable
+					columns={columns}
+					loading={isLoadingAttributes}
+					tableLayout="fixed"
+					dataSource={tableData}
+					pagination={false}
+					showHeader={false}
+					className="metrics-accordion-content all-attributes-content"
+					scroll={{ y: 600 }}
+					locale={{
+						emptyText,
+					}}
+				/>
+			);
+		}
+		return [
 			{
 				label: (
 					<div className="metrics-accordion-header">
@@ -270,32 +318,22 @@ function AllAttributes({
 							onClick={(e): void => {
 								e.stopPropagation();
 							}}
+							disabled={isLoadingAttributes}
 						/>
 					</div>
 				),
 				key: 'all-attributes',
-				children: (
-					<ResizeTable
-						columns={columns}
-						tableLayout="fixed"
-						dataSource={tableData}
-						pagination={false}
-						showHeader={false}
-						className="metrics-accordion-content all-attributes-content"
-						scroll={{ y: 600 }}
-					/>
-				),
+				children,
 			},
-		],
-		[columns, tableData, searchString],
-	);
+		];
+	}, [searchString, columns, isLoadingAttributes, tableData, emptyText]);
 
 	return (
 		<Collapse
 			bordered
-			className="metrics-accordion metrics-metadata-accordion"
+			className="metrics-accordion metrics-all-attributes-accordion"
 			activeKey={activeKey}
-			onChange={(keys): void => setActiveKey(keys)}
+			onChange={(keys): void => setActiveKey(keys as string[])}
 			items={items}
 		/>
 	);

frontend/src/container/MetricsExplorer/MetricDetails/DashboardsAndAlertsPopover.tsx

@@ -1,37 +1,56 @@
 import { Color } from '@signozhq/design-tokens';
 import { Dropdown, Typography } from 'antd';
+import { Skeleton } from 'antd/lib';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
+import { useGetMetricAlerts } from 'hooks/metricsExplorer/v2/useGetMetricAlerts';
+import { useGetMetricDashboards } from 'hooks/metricsExplorer/v2/useGetMetricDashboards';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import history from 'lib/history';
 import { Bell, Grid } from 'lucide-react';
 import { useMemo } from 'react';
 import { generatePath } from 'react-router-dom';
+import { pluralize } from 'utils/pluralize';
 
 import { DashboardsAndAlertsPopoverProps } from './types';
+import { transformMetricAlerts, transformMetricDashboards } from './utils';
 
 function DashboardsAndAlertsPopover({
-	alerts,
-	dashboards,
+	metricName,
 }: DashboardsAndAlertsPopoverProps): JSX.Element | null {
 	const { safeNavigate } = useSafeNavigate();
 	const params = useUrlQuery();
 
+	const {
+		data: alertsData,
+		isLoading: isLoadingAlerts,
+		isError: isErrorAlerts,
+	} = useGetMetricAlerts(metricName);
+
+	const {
+		data: dashboardsData,
+		isLoading: isLoadingDashboards,
+		isError: isErrorDashboards,
+	} = useGetMetricDashboards(metricName);
+
+	const alerts = transformMetricAlerts(alertsData);
+	const dashboards = transformMetricDashboards(dashboardsData);
+
 	const alertsPopoverContent = useMemo(() => {
 		if (alerts && alerts.length > 0) {
 			return alerts.map((alert) => ({
-				key: alert.alert_id,
+				key: alert.alertId,
 				label: (
 					<Typography.Link
-						key={alert.alert_id}
+						key={alert.alertId}
 						onClick={(): void => {
-							params.set(QueryParams.ruleId, alert.alert_id);
+							params.set(QueryParams.ruleId, alert.alertId);
 							history.push(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`);
 						}}
 						className="dashboards-popover-content-item"
 					>
-						{alert.alert_name || alert.alert_id}
+						{alert.alertName || alert.alertId}
 					</Typography.Link>
 				),
 			}));
@@ -39,41 +58,44 @@ function DashboardsAndAlertsPopover({
 		return null;
 	}, [alerts, params]);
 
-	const uniqueDashboards = useMemo(
-		() =>
-			dashboards?.filter(
-				(item, index, self) =>
-					index === self.findIndex((t) => t.dashboard_id === item.dashboard_id),
-			),
-		[dashboards],
-	);
-
 	const dashboardsPopoverContent = useMemo(() => {
-		if (uniqueDashboards && uniqueDashboards.length > 0) {
-			return uniqueDashboards.map((dashboard) => ({
-				key: dashboard.dashboard_id,
+		if (dashboards && dashboards.length > 0) {
+			return dashboards.map((dashboard) => ({
+				key: dashboard.dashboardId,
 				label: (
 					<Typography.Link
-						key={dashboard.dashboard_id}
+						key={dashboard.dashboardId}
 						onClick={(): void => {
 							safeNavigate(
 								generatePath(ROUTES.DASHBOARD, {
-									dashboardId: dashboard.dashboard_id,
+									dashboardId: dashboard.dashboardId,
 								}),
 							);
 						}}
 						className="dashboards-popover-content-item"
 					>
-						{dashboard.dashboard_name || dashboard.dashboard_id}
+						{dashboard.dashboardName || dashboard.dashboardId}
 					</Typography.Link>
 				),
 			}));
 		}
 		return null;
-	}, [uniqueDashboards, safeNavigate]);
+	}, [dashboards, safeNavigate]);
 
-	if (!dashboardsPopoverContent && !alertsPopoverContent) {
-		return null;
+	if (isLoadingAlerts || isLoadingDashboards) {
+		return (
+			<div className="dashboards-and-alerts-popover-container">
+				<Skeleton title={false} paragraph={{ rows: 1 }} active />
+			</div>
+		);
+	}
+
+	// If there are no dashboards or alerts or both have errors, don't show the popover
+	const hidePopover =
+		(!dashboardsPopoverContent && !alertsPopoverContent) ||
+		(isErrorAlerts && isErrorDashboards);
+	if (hidePopover) {
+		return <div className="dashboards-and-alerts-popover-container" />;
 	}
 
 	return (
@@ -92,8 +114,7 @@ function DashboardsAndAlertsPopover({
 					>
 						<Grid size={12} color={Color.BG_SIENNA_500} />
 						<Typography.Text>
-							{uniqueDashboards?.length} dashboard
-							{uniqueDashboards?.length === 1 ? '' : 's'}
+							{pluralize(dashboards.length, 'dashboard', 'dashboards')}
 						</Typography.Text>
 					</div>
 				</Dropdown>
@@ -112,7 +133,7 @@ function DashboardsAndAlertsPopover({
 					>
 						<Bell size={12} color={Color.BG_SAKURA_500} />
 						<Typography.Text>
-							{alerts?.length} alert {alerts?.length === 1 ? 'rule' : 'rules'}
+							{pluralize(alerts.length, 'alert rule', 'alert rules')}
 						</Typography.Text>
 					</div>
 				</Dropdown>

frontend/src/container/MetricsExplorer/MetricDetails/Highlights.tsx

@@ -0,0 +1,115 @@
+import { Skeleton, Tooltip, Typography } from 'antd';
+import { useGetMetricHighlights } from 'hooks/metricsExplorer/v2/useGetMetricHighlights';
+import { useMemo } from 'react';
+
+import { formatNumberIntoHumanReadableFormat } from '../Summary/utils';
+import { HighlightsProps } from './types';
+import {
+	formatNumberToCompactFormat,
+	formatTimestampToReadableDate,
+	transformMetricHighlights,
+} from './utils';
+
+function Highlights({ metricName }: HighlightsProps): JSX.Element {
+	const {
+		data: metricHighlightsData,
+		isLoading: isLoadingMetricHighlights,
+		isError: isErrorMetricHighlights,
+	} = useGetMetricHighlights(metricName ?? '', {
+		enabled: !!metricName,
+	});
+
+	const metricHighlights = transformMetricHighlights(metricHighlightsData);
+
+	const dataPoints = useMemo(() => {
+		if (!metricHighlights) return null;
+		if (isErrorMetricHighlights) {
+			return (
+				<Typography.Text className="metric-details-grid-value">-</Typography.Text>
+			);
+		}
+		return (
+			<Typography.Text className="metric-details-grid-value">
+				<Tooltip title={metricHighlights?.dataPoints.toLocaleString()}>
+					{formatNumberIntoHumanReadableFormat(metricHighlights?.dataPoints ?? 0)}
+				</Tooltip>
+			</Typography.Text>
+		);
+	}, [metricHighlights, isErrorMetricHighlights]);
+
+	const timeSeries = useMemo(() => {
+		if (!metricHighlights) return null;
+		if (isErrorMetricHighlights) {
+			return (
+				<Typography.Text className="metric-details-grid-value">-</Typography.Text>
+			);
+		}
+
+		const timeSeriesActive = formatNumberToCompactFormat(
+			metricHighlights.activeTimeSeries,
+		);
+		const timeSeriesTotal = formatNumberToCompactFormat(
+			metricHighlights.totalTimeSeries,
+		);
+
+		return (
+			<Typography.Text className="metric-details-grid-value">
+				<Tooltip
+					title="Active time series are those that have received data points in the last 1
+					hour."
+					placement="top"
+				>
+					<span>{`${timeSeriesTotal} total ⎯ ${timeSeriesActive} active`}</span>
+				</Tooltip>
+			</Typography.Text>
+		);
+	}, [metricHighlights, isErrorMetricHighlights]);
+
+	const lastReceived = useMemo(() => {
+		if (!metricHighlights) return null;
+		if (isErrorMetricHighlights) {
+			return (
+				<Typography.Text className="metric-details-grid-value">-</Typography.Text>
+			);
+		}
+		const displayText = formatTimestampToReadableDate(
+			metricHighlights.lastReceived,
+		);
+		return (
+			<Typography.Text className="metric-details-grid-value">
+				<Tooltip title={displayText}>{displayText}</Tooltip>
+			</Typography.Text>
+		);
+	}, [metricHighlights, isErrorMetricHighlights]);
+
+	if (isLoadingMetricHighlights) {
+		return (
+			<div className="metric-details-content-grid">
+				<Skeleton title={false} paragraph={{ rows: 2 }} active />
+			</div>
+		);
+	}
+
+	return (
+		<div className="metric-details-content-grid">
+			<div className="labels-row">
+				<Typography.Text type="secondary" className="metric-details-grid-label">
+					SAMPLES
+				</Typography.Text>
+				<Typography.Text type="secondary" className="metric-details-grid-label">
+					TIME SERIES
+				</Typography.Text>
+				<Typography.Text type="secondary" className="metric-details-grid-label">
+					LAST RECEIVED
+				</Typography.Text>
+			</div>
+			<div className="values-row">
+				{dataPoints}
+				{timeSeries}
+				{lastReceived}
+			</div>
+		</div>
+	);
+}
+
+export default Highlights;

frontend/src/container/MetricsExplorer/MetricDetails/Metadata.tsx

@@ -1,19 +1,19 @@
-import { Button, Collapse, Input, Select, Typography } from 'antd';
+import { Button, Collapse, Input, Select, Skeleton, Typography } from 'antd';
 import { ColumnsType } from 'antd/es/table';
 import logEvent from 'api/common/logEvent';
 import { Temporality } from 'api/metricsExplorer/getMetricDetails';
 import { MetricType } from 'api/metricsExplorer/getMetricsList';
-import { UpdateMetricMetadataProps } from 'api/metricsExplorer/updateMetricMetadata';
 import { ResizeTable } from 'components/ResizeTable';
 import YAxisUnitSelector from 'components/YAxisUnitSelector';
 import { YAxisSource } from 'components/YAxisUnitSelector/types';
 import { getUniversalNameFromMetricUnit } from 'components/YAxisUnitSelector/utils';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import FieldRenderer from 'container/LogDetailedView/FieldRenderer';
 import { DataType } from 'container/LogDetailedView/TableView';
-import { useUpdateMetricMetadata } from 'hooks/metricsExplorer/useUpdateMetricMetadata';
+import { useUpdateMetricMetadata } from 'hooks/metricsExplorer/v2/useUpdateMetricMetadata';
 import { useNotifications } from 'hooks/useNotifications';
 import { Edit2, Save, X } from 'lucide-react';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useQueryClient } from 'react-query';
 
 import { MetricsExplorerEventKeys, MetricsExplorerEvents } from '../events';
@@ -23,23 +23,22 @@ import {
 } from '../Summary/constants';
 import { MetricTypeRenderer } from '../Summary/utils';
 import { METRIC_METADATA_KEYS } from './constants';
-import { MetadataProps } from './types';
-import { determineIsMonotonic } from './utils';
+import { MetadataProps, MetricMetadataState, TableFields } from './types';
+import { transformUpdateMetricMetadataRequest } from './utils';
 
 function Metadata({
 	metricName,
 	metadata,
-	refetchMetricDetails,
+	isErrorMetricMetadata,
+	isLoadingMetricMetadata,
 }: MetadataProps): JSX.Element {
 	const [isEditing, setIsEditing] = useState(false);
-	const [
-		metricMetadata,
-		setMetricMetadata,
-	] = useState<UpdateMetricMetadataProps>({
-		metricType: metadata?.metric_type || MetricType.SUM,
-		description: metadata?.description || '',
-		temporality: metadata?.temporality,
-		unit: metadata?.unit,
+
+	const [metricMetadata, setMetricMetadata] = useState<MetricMetadataState>({
+		metricType: MetricType.SUM,
+		description: '',
+		temporality: undefined,
+		unit: undefined,
 	});
 	const { notifications } = useNotifications();
 	const {
@@ -51,6 +50,18 @@ function Metadata({
 	);
 	const queryClient = useQueryClient();
 
+	// Initialize state from metadata api data
+	useEffect(() => {
+		if (metadata) {
+			setMetricMetadata({
+				metricType: metadata.metricType,
+				description: metadata.description,
+				temporality: metadata.temporality,
+				unit: metadata.unit,
+			});
+		}
+	}, [metadata]);
+
 	const tableData = useMemo(
 		() =>
 			metadata
@@ -59,7 +70,7 @@ function Metadata({
 						temporality: metadata?.temporality,
 				  })
 						// Filter out monotonic as user input is not required
-						.filter((key) => key !== 'monotonic')
+						.filter((key) => key !== TableFields.IS_MONOTONIC)
 						.map((key) => ({
 							key,
 							value: {
@@ -72,30 +83,37 @@ function Metadata({
 	);
 
 	// Render un-editable field value
-	const renderUneditableField = useCallback((key: string, value: string) => {
-		if (key === 'metric_type') {
-			return <MetricTypeRenderer type={value as MetricType} />;
-		}
-		let fieldValue = value;
-		if (key === 'unit') {
-			fieldValue = getUniversalNameFromMetricUnit(value);
-		}
-		return <FieldRenderer field={fieldValue || '-'} />;
-	}, []);
+	const renderUneditableField = useCallback(
+		(key: keyof MetricMetadataState, value: string) => {
+			if (isErrorMetricMetadata) {
+				return <FieldRenderer field="-" />;
+			}
+			if (key === TableFields.METRIC_TYPE) {
+				return <MetricTypeRenderer type={value as MetricType} />;
+			}
+			let fieldValue = value;
+			if (key === TableFields.UNIT) {
+				fieldValue = getUniversalNameFromMetricUnit(value);
+			}
+			return <FieldRenderer field={fieldValue || '-'} />;
+		},
+		[isErrorMetricMetadata],
+	);
 
 	const renderColumnValue = useCallback(
-		(field: { value: string; key: string }): JSX.Element => {
+		(field: { value: string; key: keyof MetricMetadataState }): JSX.Element => {
 			if (!isEditing) {
 				return renderUneditableField(field.key, field.value);
 			}
 
 			// Don't allow editing of unit if it's already set
-			const metricUnitAlreadySet = field.key === 'unit' && Boolean(metadata?.unit);
+			const metricUnitAlreadySet =
+				field.key === TableFields.UNIT && Boolean(metadata?.unit);
 			if (metricUnitAlreadySet) {
 				return renderUneditableField(field.key, field.value);
 			}
 
-			if (field.key === 'metric_type') {
+			if (field.key === TableFields.METRIC_TYPE) {
 				return (
 					<Select
 						data-testid="metric-type-select"
@@ -113,7 +131,7 @@ function Metadata({
 					/>
 				);
 			}
-			if (field.key === 'unit') {
+			if (field.key === TableFields.UNIT) {
 				return (
 					<YAxisUnitSelector
 						value={metricMetadata.unit}
@@ -125,7 +143,7 @@ function Metadata({
 					/>
 				);
 			}
-			if (field.key === 'temporality') {
+			if (field.key === TableFields.Temporality) {
 				return (
 					<Select
 						data-testid="temporality-select"
@@ -143,16 +161,12 @@ function Metadata({
 					/>
 				);
 			}
-			if (field.key === 'description') {
+			if (field.key === TableFields.DESCRIPTION) {
 				return (
 					<Input
 						data-testid="description-input"
 						name={field.key}
-						defaultValue={
-							metricMetadata[
-								field.key as Exclude<keyof UpdateMetricMetadataProps, 'isMonotonic'>
-							]
-						}
+						defaultValue={metricMetadata.description}
 						onChange={(e): void => {
 							setMetricMetadata((prev) => ({
 								...prev,
@@ -202,17 +216,11 @@ function Metadata({
 		updateMetricMetadata(
 			{
 				metricName,
-				payload: {
-					...metricMetadata,
-					isMonotonic: determineIsMonotonic(
-						metricMetadata.metricType,
-						metricMetadata.temporality,
-					),
-				},
+				payload: transformUpdateMetricMetadataRequest(metricMetadata),
 			},
 			{
 				onSuccess: (response): void => {
-					if (response?.statusCode === 200) {
+					if (response?.httpStatusCode === 200) {
 						logEvent(MetricsExplorerEvents.MetricMetadataUpdated, {
 							[MetricsExplorerEventKeys.MetricName]: metricName,
 							[MetricsExplorerEventKeys.Tab]: 'summary',
@@ -221,9 +229,12 @@ function Metadata({
 						notifications.success({
 							message: 'Metadata updated successfully',
 						});
-						refetchMetricDetails();
 						setIsEditing(false);
-						queryClient.invalidateQueries(['metricsList']);
+						queryClient.invalidateQueries([REACT_QUERY_KEY.GET_METRICS_LIST]);
+						queryClient.invalidateQueries([
+							REACT_QUERY_KEY.GET_METRIC_METADATA,
+							metricName,
+						]);
 					} else {
 						notifications.error({
 							message:
@@ -243,21 +254,36 @@ function Metadata({
 		metricName,
 		metricMetadata,
 		notifications,
-		refetchMetricDetails,
 		queryClient,
 	]);
 
+	const cancelEdit = useCallback(
+		(e: React.MouseEvent<HTMLElement, MouseEvent>): void => {
+			e.stopPropagation();
+			if (metadata) {
+				setMetricMetadata({
+					metricType: metadata.metricType,
+					description: metadata.description,
+					temporality: metadata.temporality,
+					unit: metadata.unit,
+				});
+			}
+			setIsEditing(false);
+		},
+		[metadata],
+	);
+
 	const actionButton = useMemo(() => {
+		if (isLoadingMetricMetadata) {
+			return null;
+		}
 		if (isEditing) {
 			return (
 				<div className="action-menu">
 					<Button
 						className="action-button"
 						type="text"
-						onClick={(e): void => {
-							e.stopPropagation();
-							setIsEditing(false);
-						}}
+						onClick={cancelEdit}
 						disabled={isUpdatingMetricsMetadata}
 					>
 						<X size={14} />
@@ -294,10 +320,35 @@ function Metadata({
 				</Button>
 			</div>
 		);
-	}, [handleSave, isEditing, isUpdatingMetricsMetadata]);
+	}, [
+		isLoadingMetricMetadata,
+		isEditing,
+		isUpdatingMetricsMetadata,
+		cancelEdit,
+		handleSave,
+	]);
 
-	const items = useMemo(
-		() => [
+	const items = useMemo(() => {
+		let children;
+		if (isLoadingMetricMetadata) {
+			children = (
+				<div className="metrics-metadata-skeleton-container">
+					<Skeleton active title={false} paragraph={{ rows: 8 }} />
+				</div>
+			);
+		} else {
+			children = (
+				<ResizeTable
+					columns={columns}
+					tableLayout="fixed"
+					dataSource={tableData}
+					pagination={false}
+					showHeader={false}
+					className="metrics-accordion-content metrics-metadata-container"
+				/>
+			);
+		}
+		return [
 			{
 				label: (
 					<div className="metrics-accordion-header metrics-metadata-header">
@@ -306,20 +357,10 @@ function Metadata({
 					</div>
 				),
 				key: 'metric-metadata',
-				children: (
-					<ResizeTable
-						columns={columns}
-						tableLayout="fixed"
-						dataSource={tableData}
-						pagination={false}
-						showHeader={false}
-						className="metrics-accordion-content metrics-metadata-container"
-					/>
-				),
+				children,
 			},
-		],
-		[actionButton, columns, tableData],
-	);
+		];
+	}, [actionButton, columns, isLoadingMetricMetadata, tableData]);
 
 	return (
 		<Collapse

frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.styles.scss

@@ -39,6 +39,7 @@
 		gap: 12px;
 
 		.metric-details-content-grid {
+			height: 50px;
 			.labels-row,
 			.values-row {
 				display: grid;
@@ -72,6 +73,7 @@
 		.dashboards-and-alerts-popover-container {
 			display: flex;
 			gap: 16px;
+			height: 32px;
 
 			.dashboards-and-alerts-popover {
 				border-radius: 20px;
@@ -148,7 +150,6 @@
 
 				.all-attributes-search-input {
 					width: 300px;
-					border: 1px solid var(--bg-slate-300);
 				}
 			}
 
@@ -161,6 +162,7 @@
 							.ant-typography:first-child {
 								font-family: 'Geist Mono';
 								color: var(--bg-robin-400);
+								background-color: transparent;
 							}
 						}
 						.all-attributes-contribution {
@@ -237,6 +239,7 @@
 			}
 
 			.metric-metadata-value {
+				height: 67px;
 				background: rgba(22, 25, 34, 0.4);
 				overflow-x: scroll;
 				.field-renderer-container {
@@ -266,6 +269,33 @@
 				border-top-width: 0.5px !important;
 			}
 		}
+
+		.metrics-metadata-accordion {
+			.ant-collapse-item {
+				.ant-collapse-content {
+					height: 268px;
+
+					.ant-collapse-content-box {
+						.metrics-metadata-skeleton-container {
+							margin: 12px;
+						}
+					}
+				}
+			}
+		}
+
+		.metrics-all-attributes-accordion {
+			.ant-collapse-item {
+				.ant-collapse-content {
+					height: 600px;
+					.ant-collapse-content-box {
+						.all-attributes-skeleton-container {
+							margin: 12px;
+						}
+					}
+				}
+			}
+		}
 	}
 
 	.ant-select {
@@ -330,18 +360,26 @@
 	.metric-details-content {
 		.metrics-accordion {
 			.metrics-accordion-header {
-				.action-button {
-					.ant-typography {
-						color: var(--bg-slate-400);
+				.action-menu {
+					.action-button {
+						.ant-typography {
+							color: var(--bg-slate-400);
+						}
 					}
 				}
 			}
 
 			.metrics-accordion-content {
 				.metric-metadata-key {
+					.field-renderer-container {
+						.label {
+							color: var(--bg-slate-300);
+						}
+					}
+
 					.all-attributes-key {
 						.ant-typography:last-child {
-							color: var(--bg-slate-400);
+							color: var(--bg-vanilla-200);
 							background-color: var(--bg-robin-300);
 						}
 					}

frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.tsx

@@ -2,17 +2,9 @@ import './MetricDetails.styles.scss';
 import '../Summary/Summary.styles.scss';
 
 import { Color } from '@signozhq/design-tokens';
-import {
-	Button,
-	Divider,
-	Drawer,
-	Empty,
-	Skeleton,
-	Tooltip,
-	Typography,
-} from 'antd';
+import { Button, Divider, Drawer, Empty, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
-import { useGetMetricDetails } from 'hooks/metricsExplorer/useGetMetricDetails';
+import { useGetMetricMetadata } from 'hooks/metricsExplorer/v2/useGetMetricMetadata';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { Compass, Crosshair, X } from 'lucide-react';
 import { useCallback, useEffect, useMemo } from 'react';
@@ -22,16 +14,12 @@ import ROUTES from '../../../constants/routes';
 import { useHandleExplorerTabChange } from '../../../hooks/useHandleExplorerTabChange';
 import { MetricsExplorerEventKeys, MetricsExplorerEvents } from '../events';
 import { isInspectEnabled } from '../Inspect/utils';
-import { formatNumberIntoHumanReadableFormat } from '../Summary/utils';
 import AllAttributes from './AllAttributes';
 import DashboardsAndAlertsPopover from './DashboardsAndAlertsPopover';
+import Highlights from './Highlights';
 import Metadata from './Metadata';
 import { MetricDetailsProps } from './types';
-import {
-	formatNumberToCompactFormat,
-	formatTimestampToReadableDate,
-	getMetricDetailsQuery,
-} from './utils';
+import { getMetricDetailsQuery, transformMetricMetadata } from './utils';
 
 function MetricDetails({
 	onClose,
@@ -43,50 +31,25 @@ function MetricDetails({
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
 
 	const {
-		data,
-		isLoading,
-		isFetching,
-		error: metricDetailsError,
-		refetch: refetchMetricDetails,
-	} = useGetMetricDetails(metricName ?? '', {
+		data: metricMetadataResponse,
+		isLoading: isLoadingMetricMetadata,
+		isError: isErrorMetricMetadata,
+	} = useGetMetricMetadata(metricName ?? '', {
 		enabled: !!metricName,
 	});
 
-	const metric = data?.payload?.data;
-
-	const lastReceived = useMemo(() => {
-		if (!metric) return null;
-		return formatTimestampToReadableDate(metric.lastReceived);
-	}, [metric]);
+	const metadata = transformMetricMetadata(metricMetadataResponse);
 
 	const showInspectFeature = useMemo(
-		() => isInspectEnabled(metric?.metadata?.metric_type),
-		[metric],
+		() => isInspectEnabled(metadata?.metricType),
+		[metadata],
 	);
 
-	const isMetricDetailsLoading = isLoading || isFetching;
-
-	const timeSeries = useMemo(() => {
-		if (!metric) return null;
-		const timeSeriesActive = formatNumberToCompactFormat(metric.timeSeriesActive);
-		const timeSeriesTotal = formatNumberToCompactFormat(metric.timeSeriesTotal);
-
-		return (
-			<Tooltip
-				title="Active time series are those that have received data points in the last 1
-					hour."
-				placement="top"
-			>
-				<span>{`${timeSeriesTotal} total ⎯ ${timeSeriesActive} active`}</span>
-			</Tooltip>
-		);
-	}, [metric]);
-
 	const goToMetricsExplorerwithSelectedMetric = useCallback(() => {
 		if (metricName) {
 			const compositeQuery = getMetricDetailsQuery(
 				metricName,
-				metric?.metadata?.metric_type,
+				metadata?.metricType,
 			);
 			handleExplorerTabChange(
 				PANEL_TYPES.TIME_SERIES,
@@ -103,9 +66,7 @@ function MetricDetails({
 				[MetricsExplorerEventKeys.Modal]: 'metric-details',
 			});
 		}
-	}, [metricName, handleExplorerTabChange, metric?.metadata?.metric_type]);
-
-	const isMetricDetailsError = metricDetailsError || !metric;
+	}, [metricName, handleExplorerTabChange, metadata?.metricType]);
 
 	useEffect(() => {
 		logEvent(MetricsExplorerEvents.ModalOpened, {
@@ -113,6 +74,10 @@ function MetricDetails({
 		});
 	}, []);
 
+	if (!metricName) {
+		return <Empty description="Metric not found" />;
+	}
+
 	return (
 		<Drawer
 			width="60%"
@@ -120,7 +85,7 @@ function MetricDetails({
 				<div className="metric-details-header">
 					<div className="metric-details-title">
 						<Divider type="vertical" />
-						<Typography.Text>{metric?.name}</Typography.Text>
+						<Typography.Text>{metricName}</Typography.Text>
 					</div>
 					<div className="metric-details-header-buttons">
 						<Button
@@ -138,8 +103,8 @@ function MetricDetails({
 								aria-label="Inspect Metric"
 								icon={<Crosshair size={18} />}
 								onClick={(): void => {
-									if (metric?.name) {
-										openInspectModal(metric.name);
+									if (metricName) {
+										openInspectModal(metricName);
 									}
 								}}
 								data-testid="inspect-metric-button"
@@ -159,60 +124,17 @@ function MetricDetails({
 			destroyOnClose
 			closeIcon={<X size={16} />}
 		>
-			{isMetricDetailsLoading && (
-				<div data-testid="metric-details-skeleton">
-					<Skeleton active />
-				</div>
-			)}
-			{isMetricDetailsError && !isMetricDetailsLoading && (
-				<Empty description="Error fetching metric details" />
-			)}
-			{!isMetricDetailsLoading && !isMetricDetailsError && (
-				<div className="metric-details-content">
-					<div className="metric-details-content-grid">
-						<div className="labels-row">
-							<Typography.Text type="secondary" className="metric-details-grid-label">
-								SAMPLES
-							</Typography.Text>
-							<Typography.Text type="secondary" className="metric-details-grid-label">
-								TIME SERIES
-							</Typography.Text>
-							<Typography.Text type="secondary" className="metric-details-grid-label">
-								LAST RECEIVED
-							</Typography.Text>
-						</div>
-						<div className="values-row">
-							<Typography.Text className="metric-details-grid-value">
-								<Tooltip title={metric?.samples.toLocaleString()}>
-									{formatNumberIntoHumanReadableFormat(metric?.samples)}
-								</Tooltip>
-							</Typography.Text>
-							<Typography.Text className="metric-details-grid-value">
-								<Tooltip title={timeSeries}>{timeSeries}</Tooltip>
-							</Typography.Text>
-							<Typography.Text className="metric-details-grid-value">
-								<Tooltip title={lastReceived}>{lastReceived}</Tooltip>
-							</Typography.Text>
-						</div>
-					</div>
-					<DashboardsAndAlertsPopover
-						dashboards={metric.dashboards}
-						alerts={metric.alerts}
-					/>
-					<Metadata
-						metricName={metric?.name}
-						metadata={metric.metadata}
-						refetchMetricDetails={refetchMetricDetails}
-					/>
-					{metric.attributes && (
-						<AllAttributes
-							metricName={metric?.name}
-							attributes={metric.attributes}
-							metricType={metric?.metadata?.metric_type}
-						/>
-					)}
-				</div>
-			)}
+			<div className="metric-details-content">
+				<Highlights metricName={metricName} />
+				<DashboardsAndAlertsPopover metricName={metricName} />
+				<Metadata
+					metricName={metricName}
+					metadata={metadata}
+					isErrorMetricMetadata={isErrorMetricMetadata}
+					isLoadingMetricMetadata={isLoadingMetricMetadata}
+				/>
+				<AllAttributes metricName={metricName} metricType={metadata?.metricType} />
+			</div>
 		</Drawer>
 	);
 }

frontend/src/container/MetricsExplorer/MetricDetails/constants.ts

@@ -1,6 +1,6 @@
 export const METRIC_METADATA_KEYS = {
 	description: 'Description',
 	unit: 'Unit',
-	metric_type: 'Metric Type',
+	metricType: 'Metric Type',
 	temporality: 'Temporality',
 };

frontend/src/container/MetricsExplorer/MetricDetails/types.ts

@@ -1,9 +1,4 @@
-import {
-	MetricDetails,
-	MetricDetailsAlert,
-	MetricDetailsAttribute,
-	MetricDetailsDashboard,
-} from 'api/metricsExplorer/getMetricDetails';
+import { Temporality } from 'api/metricsExplorer/getMetricDetails';
 import { MetricType } from 'api/metricsExplorer/getMetricsList';
 
 export interface MetricDetailsProps {
@@ -14,19 +9,21 @@ export interface MetricDetailsProps {
 	openInspectModal: (metricName: string) => void;
 }
 
+export interface HighlightsProps {
+	metricName: string;
+}
 export interface DashboardsAndAlertsPopoverProps {
-	dashboards: MetricDetailsDashboard[] | null;
-	alerts: MetricDetailsAlert[] | null;
+	metricName: string;
 }
 
 export interface MetadataProps {
 	metricName: string;
-	metadata: MetricDetails['metadata'] | undefined;
-	refetchMetricDetails: () => void;
+	metadata: MetricMetadata | null;
+	isErrorMetricMetadata: boolean;
+	isLoadingMetricMetadata: boolean;
 }
 
 export interface AllAttributesProps {
-	attributes: MetricDetailsAttribute[];
 	metricName: string;
 	metricType: MetricType | undefined;
 }
@@ -36,3 +33,51 @@ export interface AllAttributesValueProps {
 	filterValue: string[];
 	goToMetricsExploreWithAppliedAttribute: (key: string, value: string) => void;
 }
+
+export interface MetricHighlight {
+	dataPoints: number;
+	lastReceived: number;
+	totalTimeSeries: number;
+	activeTimeSeries: number;
+}
+
+export interface MetricAlert {
+	alertName: string;
+	alertId: string;
+}
+
+export interface MetricDashboard {
+	dashboardName: string;
+	dashboardId: string;
+	widgetId: string;
+	widgetName: string;
+}
+
+export interface MetricMetadata {
+	metricType: MetricType;
+	description: string;
+	unit: string;
+	temporality: Temporality;
+	isMonotonic: boolean;
+}
+
+export interface MetricMetadataState {
+	metricType: MetricType;
+	description: string;
+	temporality: Temporality | undefined;
+	unit: string | undefined;
+}
+
+export interface MetricAttribute {
+	key: string;
+	values: string[];
+	valueCount: number;
+}
+
+export enum TableFields {
+	DESCRIPTION = 'description',
+	UNIT = 'unit',
+	METRIC_TYPE = 'metricType',
+	Temporality = 'temporality',
+	IS_MONOTONIC = 'isMonotonic',
+}

frontend/src/container/MetricsExplorer/MetricDetails/utils.tsx

@@ -2,11 +2,29 @@ import { Temporality } from 'api/metricsExplorer/getMetricDetails';
 import { MetricType } from 'api/metricsExplorer/getMetricsList';
 import { SpaceAggregation, TimeAggregation } from 'api/v5/v5';
 import { initialQueriesMap } from 'constants/queryBuilder';
+import { SuccessResponseV2 } from 'types/api';
+import {
+	GetMetricAlertsResponse,
+	GetMetricAttributesResponse,
+	GetMetricDashboardsResponse,
+	GetMetricHighlightsResponse,
+	GetMetricMetadataResponse,
+	UpdateMetricMetadataRequest,
+} from 'types/api/metricsExplorer/v2';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
-export function formatTimestampToReadableDate(timestamp: string): string {
+import {
+	MetricAlert,
+	MetricAttribute,
+	MetricDashboard,
+	MetricHighlight,
+	MetricMetadata,
+	MetricMetadataState,
+} from './types';
+
+export function formatTimestampToReadableDate(timestamp: number): string {
 	const date = new Date(timestamp);
 	const now = new Date();
 	const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
@@ -154,3 +172,149 @@ export function getMetricDetailsQuery(
 		},
 	};
 }
+
+export function transformMetricHighlights(
+	apiData: SuccessResponseV2<GetMetricHighlightsResponse> | undefined,
+): MetricHighlight | null {
+	if (!apiData || !apiData.data || !apiData.data.data) {
+		return null;
+	}
+
+	const {
+		dataPoints,
+		lastReceived,
+		totalTimeSeries,
+		activeTimeSeries,
+	} = apiData.data.data;
+
+	return {
+		dataPoints,
+		lastReceived,
+		totalTimeSeries,
+		activeTimeSeries,
+	};
+}
+
+export function transformMetricAlerts(
+	apiData: SuccessResponseV2<GetMetricAlertsResponse> | undefined,
+): MetricAlert[] {
+	if (
+		!apiData ||
+		!apiData.data ||
+		!apiData.data.data ||
+		!apiData.data.data.alerts
+	) {
+		return [];
+	}
+	return apiData.data.data.alerts.map((alert) => ({
+		alertName: alert.alertName,
+		alertId: alert.alertId,
+	}));
+}
+
+export function transformMetricDashboards(
+	apiData: SuccessResponseV2<GetMetricDashboardsResponse> | undefined,
+): MetricDashboard[] {
+	if (
+		!apiData ||
+		!apiData.data ||
+		!apiData.data.data ||
+		!apiData.data.data.dashboards
+	) {
+		return [];
+	}
+	const dashboards = apiData.data.data.dashboards.map((dashboard) => ({
+		dashboardName: dashboard.dashboardName,
+		dashboardId: dashboard.dashboardId,
+		widgetId: dashboard.widgetId,
+		widgetName: dashboard.widgetName,
+	}));
+	// Remove duplicate dashboards
+	return dashboards.filter(
+		(dashboard, index, self) =>
+			index === self.findIndex((t) => t.dashboardId === dashboard.dashboardId),
+	);
+}
+
+export function transformTemporality(temporality: string): Temporality {
+	switch (temporality) {
+		case 'delta':
+			return Temporality.DELTA;
+		case 'cumulative':
+			return Temporality.CUMULATIVE;
+		default:
+			return Temporality.DELTA;
+	}
+}
+
+export function transformMetricType(type: string): MetricType {
+	switch (type) {
+		case 'sum':
+			return MetricType.SUM;
+		case 'gauge':
+			return MetricType.GAUGE;
+		case 'summary':
+			return MetricType.SUMMARY;
+		case 'histogram':
+			return MetricType.HISTOGRAM;
+		case 'exponential_histogram':
+			return MetricType.EXPONENTIAL_HISTOGRAM;
+		default:
+			return MetricType.SUM;
+	}
+}
+
+export function transformMetricMetadata(
+	apiData: SuccessResponseV2<GetMetricMetadataResponse> | undefined,
+): MetricMetadata | null {
+	if (!apiData || !apiData.data || !apiData.data.data) {
+		return null;
+	}
+	const {
+		type,
+		description,
+		unit,
+		temporality,
+		isMonotonic,
+	} = apiData.data.data;
+
+	return {
+		metricType: transformMetricType(type),
+		description,
+		unit,
+		temporality: transformTemporality(temporality),
+		isMonotonic,
+	};
+}
+
+export function transformUpdateMetricMetadataRequest(
+	metricMetadata: MetricMetadataState,
+): UpdateMetricMetadataRequest {
+	return {
+		type: metricMetadata.metricType,
+		description: metricMetadata.description,
+		unit: metricMetadata.unit || '',
+		temporality: metricMetadata.temporality || '',
+		isMonotonic: determineIsMonotonic(
+			metricMetadata.metricType,
+			metricMetadata.temporality,
+		),
+	};
+}
+
+export function transformMetricAttributes(
+	apiData: SuccessResponseV2<GetMetricAttributesResponse> | undefined,
+): { attributes: MetricAttribute[]; totalKeys: number } {
+	if (!apiData || !apiData.data || !apiData.data.data) {
+		return { attributes: [], totalKeys: 0 };
+	}
+	const { attributes, totalKeys } = apiData.data.data;
+	return {
+		attributes: attributes.map((attribute) => ({
+			key: attribute.key,
+			values: attribute.values,
+			valueCount: attribute.valueCount,
+		})),
+		totalKeys,
+	};
+}

frontend/src/container/NewDashboard/DashboardSettings/Variables/VariableItem/VariableItem.tsx

@@ -367,7 +367,13 @@ function VariableItem({
 			multiSelect: variableMultiSelect,
 			showALLOption: queryType === 'DYNAMIC' ? true : variableShowALLOption,
 			sort: variableSortType,
-			defaultValue: variableDefaultValue,
+			...(queryType === 'TEXTBOX' && {
+				selectedValue: (variableData.selectedValue ||
+					variableTextboxValue) as never,
+			}),
+			...(queryType !== 'TEXTBOX' && {
+				defaultValue: variableDefaultValue as never,
+			}),
 			modificationUUID: generateUUID(),
 			id: variableData.id || generateUUID(),
 			order: variableData.order,
@@ -725,7 +731,6 @@ function VariableItem({
 								className="default-input"
 								onChange={(e): void => {
 									setVariableTextboxValue(e.target.value);
-									setVariableDefaultValue(e.target.value);
 								}}
 								placeholder="Enter a default value (if any)..."
 								style={{ width: 400 }}

frontend/src/container/QueryTable/__test__/mocks.ts

@@ -363,7 +363,6 @@ export const WidgetHeaderProps: any = {
 		title: 'Table - Panel',
 		yAxisUnit: 'none',
 	},
-	parentHover: false,
 	queryResponse: {
 		status: 'success',
 		isLoading: false,

frontend/src/container/SideNav/SideNav.tsx

@@ -679,7 +679,42 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 		registerShortcut(GlobalShortcuts.NavigateToExceptions, () =>
 			onClickHandler(ROUTES.ALL_ERROR, null),
 		);
-
+		registerShortcut(GlobalShortcuts.NavigateToTracesFunnel, () =>
+			onClickHandler(ROUTES.TRACES_FUNNELS, null),
+		);
+		registerShortcut(GlobalShortcuts.NavigateToTracesViews, () =>
+			onClickHandler(ROUTES.TRACES_SAVE_VIEWS, null),
+		);
+		registerShortcut(GlobalShortcuts.NavigateToMetricsSummary, () =>
+			onClickHandler(ROUTES.METRICS_EXPLORER, null),
+		);
+		registerShortcut(GlobalShortcuts.NavigateToMetricsExplorer, () =>
+			onClickHandler(ROUTES.METRICS_EXPLORER_EXPLORER, null),
+		);
+		registerShortcut(GlobalShortcuts.NavigateToMetricsViews, () =>
+			onClickHandler(ROUTES.METRICS_EXPLORER_VIEWS, null),
+		);
+		registerShortcut(GlobalShortcuts.NavigateToSettings, () =>
+			onClickHandler(ROUTES.SETTINGS, null),
+		);
+		registerShortcut(GlobalShortcuts.NavigateToSettingsIngestion, () =>
+			onClickHandler(ROUTES.INGESTION_SETTINGS, null),
+		);
+		registerShortcut(GlobalShortcuts.NavigateToSettingsBilling, () =>
+			onClickHandler(ROUTES.BILLING, null),
+		);
+		registerShortcut(GlobalShortcuts.NavigateToSettingsAPIKeys, () =>
+			onClickHandler(ROUTES.API_KEYS, null),
+		);
+		registerShortcut(GlobalShortcuts.NavigateToSettingsNotificationChannels, () =>
+			onClickHandler(ROUTES.ALL_CHANNELS, null),
+		);
+		registerShortcut(GlobalShortcuts.NavigateToLogsPipelines, () =>
+			onClickHandler(ROUTES.LOGS_PIPELINES, null),
+		);
+		registerShortcut(GlobalShortcuts.NavigateToLogsViews, () =>
+			onClickHandler(ROUTES.LOGS_SAVE_VIEWS, null),
+		);
 		return (): void => {
 			deregisterShortcut(GlobalShortcuts.NavigateToHome);
 			deregisterShortcut(GlobalShortcuts.NavigateToServices);
@@ -689,6 +724,18 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 			deregisterShortcut(GlobalShortcuts.NavigateToAlerts);
 			deregisterShortcut(GlobalShortcuts.NavigateToExceptions);
 			deregisterShortcut(GlobalShortcuts.NavigateToMessagingQueues);
+			deregisterShortcut(GlobalShortcuts.NavigateToTracesFunnel);
+			deregisterShortcut(GlobalShortcuts.NavigateToMetricsSummary);
+			deregisterShortcut(GlobalShortcuts.NavigateToMetricsExplorer);
+			deregisterShortcut(GlobalShortcuts.NavigateToMetricsViews);
+			deregisterShortcut(GlobalShortcuts.NavigateToSettings);
+			deregisterShortcut(GlobalShortcuts.NavigateToSettingsIngestion);
+			deregisterShortcut(GlobalShortcuts.NavigateToSettingsBilling);
+			deregisterShortcut(GlobalShortcuts.NavigateToSettingsAPIKeys);
+			deregisterShortcut(GlobalShortcuts.NavigateToSettingsNotificationChannels);
+			deregisterShortcut(GlobalShortcuts.NavigateToLogsPipelines);
+			deregisterShortcut(GlobalShortcuts.NavigateToLogsViews);
+			deregisterShortcut(GlobalShortcuts.NavigateToTracesViews);
 		};
 	}, [deregisterShortcut, onClickHandler, registerShortcut]);
 

frontend/src/container/SpanDetailsDrawer/SpanLogs/spanLogs.styles.scss

@@ -5,16 +5,20 @@
 	&-virtuoso {
 		background: rgba(171, 189, 255, 0.04);
 	}
-	&-list-container .logs-loading-skeleton {
+	&-list-container {
 		height: 100%;
-		border: 1px solid var(--bg-slate-500);
-		border-top: none;
-		color: var(--bg-vanilla-400);
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		padding: 8px 0;
+
+		.logs-loading-skeleton {
+			height: 100%;
+			border: 1px solid var(--bg-slate-500);
+			border-top: none;
+			color: var(--bg-vanilla-400);
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			padding: 8px 0;
+		}
 	}
 
 	&-empty-content {

frontend/src/hooks/hotkeys/__tests__/useKeyboardHotkeys.test.tsx

@@ -1,11 +1,18 @@
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { useEffect } from 'react';
 
 import {
 	KeyboardHotkeysProvider,
 	useKeyboardHotkeys,
 } from '../useKeyboardHotkeys';
 
+jest.mock('../../../providers/cmdKProvider', () => ({
+	useCmdK: (): { open: boolean } => ({
+		open: false,
+	}),
+}));
+
 function TestComponentWithRegister({
 	handleShortcut,
 }: {
@@ -13,14 +20,13 @@ function TestComponentWithRegister({
 }): JSX.Element {
 	const { registerShortcut } = useKeyboardHotkeys();
 
-	registerShortcut('a', handleShortcut);
+	useEffect(() => {
+		registerShortcut('a', handleShortcut);
+	}, [registerShortcut, handleShortcut]);
 
-	return (
-		<div>
-			<span>Test Component</span>
-		</div>
-	);
+	return <span>Test Component</span>;
 }
+
 function TestComponentWithDeRegister({
 	handleShortcut,
 }: {
@@ -28,21 +34,18 @@ function TestComponentWithDeRegister({
 }): JSX.Element {
 	const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();
 
-	registerShortcut('b', handleShortcut);
+	useEffect(() => {
+		registerShortcut('b', handleShortcut);
+		deregisterShortcut('b');
+	}, [registerShortcut, deregisterShortcut, handleShortcut]);
 
-	// Deregister the shortcut before triggering it
-	deregisterShortcut('b');
-
-	return (
-		<div>
-			<span>Test Component</span>
-		</div>
-	);
+	return <span>Test Component</span>;
 }
 
 describe('KeyboardHotkeysProvider', () => {
 	it('registers and triggers shortcuts correctly', async () => {
 		const handleShortcut = jest.fn();
+		const user = userEvent.setup();
 
 		render(
 			<KeyboardHotkeysProvider>
@@ -50,15 +53,15 @@ describe('KeyboardHotkeysProvider', () => {
 			</KeyboardHotkeysProvider>,
 		);
 
-		// Trigger the registered shortcut
-		await userEvent.keyboard('a');
+		// fires on keyup
+		await user.keyboard('{a}');
 
-		// Assert that the handleShortcut function has been called
-		expect(handleShortcut).toHaveBeenCalled();
+		expect(handleShortcut).toHaveBeenCalledTimes(1);
 	});
 
-	it('deregisters shortcuts correctly', () => {
+	it('does not trigger deregistered shortcuts', async () => {
 		const handleShortcut = jest.fn();
+		const user = userEvent.setup();
 
 		render(
 			<KeyboardHotkeysProvider>
@@ -66,10 +69,8 @@ describe('KeyboardHotkeysProvider', () => {
 			</KeyboardHotkeysProvider>,
 		);
 
-		// Try to trigger the deregistered shortcut
-		userEvent.keyboard('b');
+		await user.keyboard('{b}');
 
-		// Assert that the handleShortcut function has NOT been called
 		expect(handleShortcut).not.toHaveBeenCalled();
 	});
 });

frontend/src/hooks/hotkeys/useKeyboardHotkeys.tsx

@@ -8,20 +8,21 @@ import {
 	useRef,
 } from 'react';
 
+import { useCmdK } from '../../providers/cmdKProvider';
+
 interface KeyboardHotkeysContextReturnValue {
 	/**
-	 * @param keyCombination provide the string for which the subsequent callback should be triggered. Example 'ctrl+a'
+	 * @param keyCombo provide the string for which the subsequent callback should be triggered. Example 'ctrl+a'
 	 * @param callback the callback that should be triggered when the above key combination is being pressed
 	 * @returns void
 	 */
-	registerShortcut: (keyCombination: string, callback: () => void) => void;
-
+	registerShortcut: (keyCombo: string, callback: () => void) => void;
 	/**
 	 *
-	 * @param keyCombination provide the string for which we want to deregister the callback
+	 * @param keyCombo provide the string for which we want to deregister the callback
 	 * @returns void
 	 */
-	deregisterShortcut: (keyCombination: string) => void;
+	deregisterShortcut: (keyCombo: string) => void;
 }
 
 const KeyboardHotkeysContext = createContext<KeyboardHotkeysContextReturnValue>(
@@ -33,7 +34,7 @@ const KeyboardHotkeysContext = createContext<KeyboardHotkeysContextReturnValue>(
 
 const IGNORE_INPUTS = ['input', 'textarea', 'cm-editor']; // Inputs in which hotkey events will be ignored
 
-const useKeyboardHotkeys = (): KeyboardHotkeysContextReturnValue => {
+export function useKeyboardHotkeys(): KeyboardHotkeysContextReturnValue {
 	const context = useContext(KeyboardHotkeysContext);
 	if (!context) {
 		throw new Error(
@@ -42,21 +43,45 @@ const useKeyboardHotkeys = (): KeyboardHotkeysContextReturnValue => {
 	}
 
 	return context;
-};
+}
 
-function KeyboardHotkeysProvider({
+/**
+ * Normalize a set of keys into a stable combo
+ * { shift, m, e } → "e+m+shift"
+ */
+function normalizeChord(keys: Set<string>): string {
+	return Array.from(keys).sort().join('+');
+}
+
+/**
+ * Normalize registration strings
+ * "shift+m+e" → "e+m+shift"
+ */
+function normalizeComboString(combo: string): string {
+	return normalizeChord(new Set(combo.split('+')));
+}
+
+export function KeyboardHotkeysProvider({
 	children,
 }: {
 	children: JSX.Element;
 }): JSX.Element {
+	const { open: cmdKOpen } = useCmdK();
 	const shortcuts = useRef<Record<string, () => void>>({});
+	const pressedKeys = useRef<Set<string>>(new Set());
 
-	const handleKeyPress = (event: KeyboardEvent): void => {
-		const { key, ctrlKey, altKey, shiftKey, metaKey, target } = event;
+	// A detected valid shortcut waiting to fire
+	const pendingCombo = useRef<string | null>(null);
 
+	// Tracks whether user extended the combo
+	const wasExtended = useRef(false);
+
+	const handleKeyDown = (event: KeyboardEvent): void => {
+		if (event.repeat) return;
+
+		const target = event.target as HTMLElement;
 		const isCodeMirrorEditor =
 			(target as HTMLElement).closest('.cm-editor') !== null;
-
 		if (
 			IGNORE_INPUTS.includes((target as HTMLElement).tagName.toLowerCase()) ||
 			isCodeMirrorEditor
@@ -64,61 +89,110 @@ function KeyboardHotkeysProvider({
 			return;
 		}
 
-		// https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/metaKey
-		const modifiers = { ctrlKey, altKey, shiftKey, metaKey };
+		const key = event.key?.toLowerCase();
+		if (!key) return; // Skip if key is undefined
 
-		let shortcutKey = `${key.toLowerCase()}`;
+		// If a pending combo exists and a new key is pressed → extension
+		if (pendingCombo.current && !pressedKeys.current.has(key)) {
+			wasExtended.current = true;
+		}
 
-		const isAltKey = `${modifiers.altKey ? '+alt' : ''}`;
-		const isShiftKey = `${modifiers.shiftKey ? '+shift' : ''}`;
+		pressedKeys.current.add(key);
 
-		// ctrl and cmd have the same functionality for mac and windows parity
-		const isMetaKey = `${modifiers.metaKey || modifiers.ctrlKey ? '+meta' : ''}`;
+		if (event.shiftKey) pressedKeys.current.add('shift');
+		if (event.metaKey || event.ctrlKey) pressedKeys.current.add('meta');
+		if (event.altKey) pressedKeys.current.add('alt');
 
-		shortcutKey = shortcutKey + isAltKey + isShiftKey + isMetaKey;
+		const combo = normalizeChord(pressedKeys.current);
 
-		if (shortcuts.current[shortcutKey]) {
+		if (shortcuts.current[combo]) {
 			event.preventDefault();
-			event.stopImmediatePropagation();
-
-			shortcuts.current[shortcutKey]();
+			event.stopPropagation();
+			pendingCombo.current = combo;
+			wasExtended.current = false;
 		}
 	};
 
-	useEffect(() => {
-		document.addEventListener('keydown', handleKeyPress);
+	const handleKeyUp = (event: KeyboardEvent): void => {
+		const key = event.key?.toLowerCase();
+		if (!key) return; // Skip if key is undefined
+
+		pressedKeys.current.delete(key);
+
+		if (!event.shiftKey) pressedKeys.current.delete('shift');
+		if (!event.metaKey && !event.ctrlKey) pressedKeys.current.delete('meta');
+		if (!event.altKey) pressedKeys.current.delete('alt');
+
+		if (!pendingCombo.current) return;
+
+		// Fire only if user did NOT extend the combo
+		if (!wasExtended.current) {
+			event.preventDefault();
+			try {
+				shortcuts.current[pendingCombo.current]?.();
+			} catch (error) {
+				console.error('Error executing hotkey callback:', error);
+			}
+		}
+
+		pendingCombo.current = null;
+		wasExtended.current = false;
+	};
+
+	useEffect((): (() => void) => {
+		document.addEventListener('keydown', handleKeyDown);
+		document.addEventListener('keyup', handleKeyUp);
+
+		const reset = (): void => {
+			pressedKeys.current.clear();
+			pendingCombo.current = null;
+			wasExtended.current = false;
+		};
+
+		window.addEventListener('blur', reset);
+
 		return (): void => {
-			document.removeEventListener('keydown', handleKeyPress);
+			document.removeEventListener('keydown', handleKeyDown);
+			document.removeEventListener('keyup', handleKeyUp);
+			window.removeEventListener('blur', reset);
 		};
 	}, []);
 
+	useEffect(() => {
+		if (!cmdKOpen) {
+			// Reset when palette closes
+			pressedKeys.current.clear();
+			pendingCombo.current = null;
+			wasExtended.current = false;
+		}
+	}, [cmdKOpen]);
+
 	const registerShortcut = useCallback(
-		(keyCombination: string, callback: () => void): void => {
-			if (!shortcuts.current[keyCombination]) {
-				shortcuts.current[keyCombination] = callback;
-			} else if (process.env.NODE_ENV === 'development') {
-				throw new Error(
-					`This shortcut is already present in current scope :- ${keyCombination}`,
-				);
+		(keyCombo: string, callback: () => void): void => {
+			const normalized = normalizeComboString(keyCombo);
+
+			if (!shortcuts.current[normalized]) {
+				shortcuts.current[normalized] = callback;
+				return;
+			}
+
+			const message = `This shortcut is already present in current scope :- ${keyCombo}`;
+
+			if (process.env.NODE_ENV === 'development') {
+				throw new Error(message);
 			} else {
-				console.error(
-					`This shortcut is already present in current scope :- ${keyCombination}`,
-				);
+				console.error(message);
 			}
 		},
-		[shortcuts],
+		[],
 	);
 
-	const deregisterShortcut = useCallback(
-		(keyCombination: string): void => {
-			if (shortcuts.current[keyCombination]) {
-				unset(shortcuts.current, keyCombination);
-			}
-		},
-		[shortcuts],
-	);
+	const deregisterShortcut = useCallback((keyCombo: string) => {
+		const normalized = normalizeComboString(keyCombo);
+		unset(shortcuts.current, normalized);
+	}, []);
 
-	const contextValue = useMemo(
+	const ctxValue = useMemo(
 		() => ({
 			registerShortcut,
 			deregisterShortcut,
@@ -127,10 +201,8 @@ function KeyboardHotkeysProvider({
 	);
 
 	return (
-		<KeyboardHotkeysContext.Provider value={contextValue}>
+		<KeyboardHotkeysContext.Provider value={ctxValue}>
 			{children}
 		</KeyboardHotkeysContext.Provider>
 	);
 }
-
-export { KeyboardHotkeysProvider, useKeyboardHotkeys };

frontend/src/hooks/metricsExplorer/v2/useGetMetricAlerts.ts

@@ -0,0 +1,22 @@
+import { getMetricAlerts } from 'api/metricsExplorer/v2/getMetricAlerts';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { useQuery, UseQueryOptions, UseQueryResult } from 'react-query';
+import { SuccessResponseV2 } from 'types/api';
+import { GetMetricAlertsResponse } from 'types/api/metricsExplorer/v2';
+
+type UseGetMetricAlerts = (
+	metricName: string,
+	options?: UseQueryOptions<SuccessResponseV2<GetMetricAlertsResponse>, Error>,
+	headers?: Record<string, string>,
+) => UseQueryResult<SuccessResponseV2<GetMetricAlertsResponse>, Error>;
+
+export const useGetMetricAlerts: UseGetMetricAlerts = (
+	metricName,
+	options,
+	headers,
+) =>
+	useQuery<SuccessResponseV2<GetMetricAlertsResponse>, Error>({
+		queryFn: ({ signal }) => getMetricAlerts(metricName, signal, headers),
+		...options,
+		queryKey: [REACT_QUERY_KEY.GET_METRIC_ALERTS, metricName],
+	});

frontend/src/hooks/metricsExplorer/v2/useGetMetricAttributes.ts

@@ -0,0 +1,36 @@
+import { getMetricAttributes } from 'api/metricsExplorer/v2/getMetricAttributes';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { useQuery, UseQueryOptions, UseQueryResult } from 'react-query';
+import { SuccessResponseV2 } from 'types/api';
+import {
+	GetMetricAttributesRequest,
+	GetMetricAttributesResponse,
+} from 'types/api/metricsExplorer/v2';
+
+type UseGetMetricAttributes = (
+	requestData: GetMetricAttributesRequest,
+	options?: UseQueryOptions<
+		SuccessResponseV2<GetMetricAttributesResponse>,
+		Error
+	>,
+	headers?: Record<string, string>,
+) => UseQueryResult<SuccessResponseV2<GetMetricAttributesResponse>, Error>;
+
+export const useGetMetricAttributes: UseGetMetricAttributes = (
+	requestData,
+	options,
+	headers,
+) => {
+	const queryKey = [
+		REACT_QUERY_KEY.GET_METRIC_ATTRIBUTES,
+		requestData.metricName,
+		requestData.start,
+		requestData.end,
+	];
+
+	return useQuery<SuccessResponseV2<GetMetricAttributesResponse>, Error>({
+		queryFn: ({ signal }) => getMetricAttributes(requestData, signal, headers),
+		...options,
+		queryKey,
+	});
+};

frontend/src/hooks/metricsExplorer/v2/useGetMetricDashboards.ts

@@ -0,0 +1,25 @@
+import { getMetricDashboards } from 'api/metricsExplorer/v2/getMetricDashboards';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { useQuery, UseQueryOptions, UseQueryResult } from 'react-query';
+import { SuccessResponseV2 } from 'types/api';
+import { GetMetricDashboardsResponse } from 'types/api/metricsExplorer/v2';
+
+type UseGetMetricDashboards = (
+	metricName: string,
+	options?: UseQueryOptions<
+		SuccessResponseV2<GetMetricDashboardsResponse>,
+		Error
+	>,
+	headers?: Record<string, string>,
+) => UseQueryResult<SuccessResponseV2<GetMetricDashboardsResponse>, Error>;
+
+export const useGetMetricDashboards: UseGetMetricDashboards = (
+	metricName,
+	options,
+	headers,
+) =>
+	useQuery<SuccessResponseV2<GetMetricDashboardsResponse>, Error>({
+		queryFn: ({ signal }) => getMetricDashboards(metricName, signal, headers),
+		...options,
+		queryKey: [REACT_QUERY_KEY.GET_METRIC_DASHBOARDS, metricName],
+	});

frontend/src/hooks/metricsExplorer/v2/useGetMetricHighlights.ts

@@ -0,0 +1,25 @@
+import { getMetricHighlights } from 'api/metricsExplorer/v2/getMetricHighlights';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { useQuery, UseQueryOptions, UseQueryResult } from 'react-query';
+import { SuccessResponseV2 } from 'types/api';
+import { GetMetricHighlightsResponse } from 'types/api/metricsExplorer/v2';
+
+type UseGetMetricHighlights = (
+	metricName: string,
+	options?: UseQueryOptions<
+		SuccessResponseV2<GetMetricHighlightsResponse>,
+		Error
+	>,
+	headers?: Record<string, string>,
+) => UseQueryResult<SuccessResponseV2<GetMetricHighlightsResponse>, Error>;
+
+export const useGetMetricHighlights: UseGetMetricHighlights = (
+	metricName,
+	options,
+	headers,
+) =>
+	useQuery<SuccessResponseV2<GetMetricHighlightsResponse>, Error>({
+		queryFn: ({ signal }) => getMetricHighlights(metricName, signal, headers),
+		...options,
+		queryKey: [REACT_QUERY_KEY.GET_METRIC_HIGHLIGHTS, metricName],
+	});

frontend/src/hooks/metricsExplorer/v2/useGetMetricMetadata.ts

@@ -0,0 +1,22 @@
+import { getMetricMetadata } from 'api/metricsExplorer/v2/getMetricMetadata';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { useQuery, UseQueryOptions, UseQueryResult } from 'react-query';
+import { SuccessResponseV2 } from 'types/api';
+import { GetMetricMetadataResponse } from 'types/api/metricsExplorer/v2';
+
+type UseGetMetricMetadata = (
+	metricName: string,
+	options?: UseQueryOptions<SuccessResponseV2<GetMetricMetadataResponse>, Error>,
+	headers?: Record<string, string>,
+) => UseQueryResult<SuccessResponseV2<GetMetricMetadataResponse>, Error>;
+
+export const useGetMetricMetadata: UseGetMetricMetadata = (
+	metricName,
+	options,
+	headers,
+) =>
+	useQuery<SuccessResponseV2<GetMetricMetadataResponse>, Error>({
+		queryFn: ({ signal }) => getMetricMetadata(metricName, signal, headers),
+		...options,
+		queryKey: [REACT_QUERY_KEY.GET_METRIC_METADATA, metricName],
+	});

frontend/src/hooks/metricsExplorer/v2/useUpdateMetricMetadata.ts

@@ -0,0 +1,22 @@
+import updateMetricMetadata from 'api/metricsExplorer/v2/updateMetricMetadata';
+import { useMutation, UseMutationResult } from 'react-query';
+import { SuccessResponseV2 } from 'types/api';
+import {
+	UpdateMetricMetadataResponse,
+	UseUpdateMetricMetadataProps,
+} from 'types/api/metricsExplorer/v2';
+
+export function useUpdateMetricMetadata(): UseMutationResult<
+	SuccessResponseV2<UpdateMetricMetadataResponse>,
+	Error,
+	UseUpdateMetricMetadataProps
+> {
+	return useMutation<
+		SuccessResponseV2<UpdateMetricMetadataResponse>,
+		Error,
+		UseUpdateMetricMetadataProps
+	>({
+		mutationFn: ({ metricName, payload }) =>
+			updateMetricMetadata(metricName, payload),
+	});
+}

frontend/src/types/api/metricsExplorer/v2.ts

@@ -0,0 +1,77 @@
+export interface GetMetricMetadataResponse {
+	status: string;
+	data: {
+		description: string;
+		type: string;
+		unit: string;
+		temporality: string;
+		isMonotonic: boolean;
+	};
+}
+
+export interface GetMetricHighlightsResponse {
+	status: string;
+	data: {
+		dataPoints: number;
+		lastReceived: number;
+		totalTimeSeries: number;
+		activeTimeSeries: number;
+	};
+}
+
+export interface GetMetricAttributesRequest {
+	metricName: string;
+	start?: number;
+	end?: number;
+}
+
+export interface GetMetricAttributesResponse {
+	status: string;
+	data: {
+		attributes: {
+			key: string;
+			values: string[];
+			valueCount: number;
+		}[];
+		totalKeys: number;
+	};
+}
+
+export interface GetMetricAlertsResponse {
+	status: string;
+	data: {
+		alerts: {
+			alertName: string;
+			alertId: string;
+		}[];
+	};
+}
+
+export interface GetMetricDashboardsResponse {
+	status: string;
+	data: {
+		dashboards: {
+			dashboardName: string;
+			dashboardId: string;
+			widgetId: string;
+			widgetName: string;
+		}[];
+	};
+}
+
+export interface UpdateMetricMetadataRequest {
+	type: string;
+	description: string;
+	temporality: string;
+	unit: string;
+	isMonotonic: boolean;
+}
+
+export interface UpdateMetricMetadataResponse {
+	status: string;
+}
+
+export interface UseUpdateMetricMetadataProps {
+	metricName: string;
+	payload: UpdateMetricMetadataRequest;
+}

frontend/src/utils/pluralize.ts

@@ -0,0 +1,10 @@
+export function pluralize(
+	count: number,
+	singular: string,
+	plural: string,
+): string {
+	if (count === 1) {
+		return `${count} ${singular}`;
+	}
+	return `${count} ${plural}`;
+}

pkg/apiserver/signozapiserver/promote.go

@@ -0,0 +1,43 @@
+package signozapiserver
+
+import (
+	"net/http"
+
+	"github.com/SigNoz/signoz/pkg/http/handler"
+	"github.com/SigNoz/signoz/pkg/types/promotetypes"
+	"github.com/gorilla/mux"
+)
+
+func (provider *provider) addPromoteRoutes(router *mux.Router) error {
+	if err := router.Handle("/api/v1/logs/promote_paths", handler.New(provider.authZ.EditAccess(provider.promoteHandler.HandlePromoteAndIndexPaths), handler.OpenAPIDef{
+		ID:                  "PromotePaths",
+		Tags:                []string{"promoted_paths", "logs", "json_logs"},
+		Summary:             "Promote and index paths",
+		Description:         "This endpoints promotes and indexes paths",
+		Request:             new([]*promotetypes.PromotePath),
+		RequestContentType:  "application/json",
+		Response:            nil,
+		ResponseContentType: "",
+		SuccessStatusCode:   http.StatusCreated,
+		ErrorStatusCodes:    []int{http.StatusBadRequest},
+	})).Methods(http.MethodPost).GetError(); err != nil {
+		return err
+	}
+
+	if err := router.Handle("/api/v1/logs/promote_paths", handler.New(provider.authZ.ViewAccess(provider.promoteHandler.ListPromotedAndIndexedPaths), handler.OpenAPIDef{
+		ID:                  "PromotePaths",
+		Tags:                []string{"promoted_paths", "logs", "json_logs"},
+		Summary:             "Promote and index paths",
+		Description:         "This endpoints promotes and indexes paths",
+		Request:             nil,
+		RequestContentType:  "",
+		Response:            new([]*promotetypes.PromotePath),
+		ResponseContentType: "",
+		SuccessStatusCode:   http.StatusOK,
+		ErrorStatusCodes:    []int{http.StatusBadRequest},
+	})).Methods(http.MethodGet).GetError(); err != nil {
+		return err
+	}
+
+	return nil
+}

pkg/apiserver/signozapiserver/provider.go

@@ -12,6 +12,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/authdomain"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
 	"github.com/SigNoz/signoz/pkg/modules/preference"
+	"github.com/SigNoz/signoz/pkg/modules/promote"
 	"github.com/SigNoz/signoz/pkg/modules/session"
 	"github.com/SigNoz/signoz/pkg/modules/user"
 	"github.com/SigNoz/signoz/pkg/types"
@@ -30,6 +31,7 @@ type provider struct {
 	authDomainHandler authdomain.Handler
 	preferenceHandler preference.Handler
 	globalHandler     global.Handler
+	promoteHandler    promote.Handler
 }
 
 func NewFactory(
@@ -41,9 +43,10 @@ func NewFactory(
 	authDomainHandler authdomain.Handler,
 	preferenceHandler preference.Handler,
 	globalHandler global.Handler,
+	promoteHandler promote.Handler,
 ) factory.ProviderFactory[apiserver.APIServer, apiserver.Config] {
 	return factory.NewProviderFactory(factory.MustNewName("signoz"), func(ctx context.Context, providerSettings factory.ProviderSettings, config apiserver.Config) (apiserver.APIServer, error) {
-		return newProvider(ctx, providerSettings, config, orgGetter, authz, orgHandler, userHandler, sessionHandler, authDomainHandler, preferenceHandler, globalHandler)
+		return newProvider(ctx, providerSettings, config, orgGetter, authz, orgHandler, userHandler, sessionHandler, authDomainHandler, preferenceHandler, globalHandler, promoteHandler)
 	})
 }
 
@@ -59,6 +62,7 @@ func newProvider(
 	authDomainHandler authdomain.Handler,
 	preferenceHandler preference.Handler,
 	globalHandler global.Handler,
+	promoteHandler promote.Handler,
 ) (apiserver.APIServer, error) {
 	settings := factory.NewScopedProviderSettings(providerSettings, "github.com/SigNoz/signoz/pkg/apiserver/signozapiserver")
 	router := mux.NewRouter().UseEncodedPath()
@@ -73,6 +77,7 @@ func newProvider(
 		authDomainHandler: authDomainHandler,
 		preferenceHandler: preferenceHandler,
 		globalHandler:     globalHandler,
+		promoteHandler:    promoteHandler,
 	}
 
 	provider.authZ = middleware.NewAuthZ(settings.Logger(), orgGetter, authz)
@@ -113,6 +118,10 @@ func (provider *provider) AddToRouter(router *mux.Router) error {
 		return err
 	}
 
+	if err := provider.addPromoteRoutes(router); err != nil {
+		return err
+	}
+
 	return nil
 }
 

pkg/errors/errors.go

@@ -209,6 +209,11 @@ func NewUnexpectedf(code Code, format string, args ...any) *base {
 	return Newf(TypeInvalidInput, code, format, args...)
 }
 
+// NewMethodNotAllowedf is a wrapper around Newf with TypeMethodNotAllowed.
+func NewMethodNotAllowedf(code Code, format string, args ...any) *base {
+	return Newf(TypeMethodNotAllowed, code, format, args...)
+}
+
 // WrapTimeoutf is a wrapper around Wrapf with TypeTimeout.
 func WrapTimeoutf(cause error, code Code, format string, args ...any) *base {
 	return Wrapf(cause, TypeTimeout, code, format, args...)

pkg/http/middleware/api_key.go

@@ -1,6 +1,7 @@
 package middleware
 
 import (
+	"context"
 	"log/slog"
 	"net/http"
 	"time"
@@ -11,6 +12,7 @@ import (
 	"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 (
@@ -23,10 +25,18 @@ type APIKey struct {
 	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}
+	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 {
@@ -109,11 +119,24 @@ func (a *APIKey) Wrap(next http.Handler) http.Handler {
 
 		next.ServeHTTP(w, r)
 
-		apiKey.LastUsed = time.Now()
-		_, err = a.store.BunDB().NewUpdate().Model(&apiKey).Column("last_used").Where("token = ?", apiKeyToken).Where("revoked = false").Exec(r.Context())
-		if err != nil {
-			a.logger.ErrorContext(r.Context(), "failed to update last used of api key", "error", err)
-		}
+		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/modules/promote/implpromote/handler.go

@@ -0,0 +1,60 @@
+package implpromote
+
+import (
+	"net/http"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/http/binding"
+	"github.com/SigNoz/signoz/pkg/http/render"
+	"github.com/SigNoz/signoz/pkg/modules/promote"
+	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/promotetypes"
+)
+
+type handler struct {
+	module promote.Module
+}
+
+func NewHandler(module promote.Module) promote.Handler {
+	return &handler{module: module}
+}
+
+func (h *handler) HandlePromoteAndIndexPaths(w http.ResponseWriter, r *http.Request) {
+	// TODO(Nitya): Use in multi tenant setup
+	_, err := authtypes.ClaimsFromContext(r.Context())
+	if err != nil {
+		render.Error(w, errors.NewInternalf(errors.CodeInternal, "failed to get org id from context"))
+		return
+	}
+
+	var req []*promotetypes.PromotePath
+	if err := binding.JSON.BindBody(r.Body, &req); err != nil {
+		render.Error(w, err)
+		return
+	}
+
+	err = h.module.PromoteAndIndexPaths(r.Context(), req...)
+	if err != nil {
+		render.Error(w, err)
+		return
+	}
+
+	render.Success(w, http.StatusCreated, nil)
+}
+
+func (h *handler) ListPromotedAndIndexedPaths(w http.ResponseWriter, r *http.Request) {
+	// TODO(Nitya): Use in multi tenant setup
+	_, err := authtypes.ClaimsFromContext(r.Context())
+	if err != nil {
+		render.Error(w, errors.NewInternalf(errors.CodeInternal, "failed to get org id from context"))
+		return
+	}
+
+	paths, err := h.module.ListPromotedAndIndexedPaths(r.Context())
+	if err != nil {
+		render.Error(w, err)
+		return
+	}
+
+	render.Success(w, http.StatusOK, paths)
+}

pkg/modules/promote/implpromote/module.go

@@ -0,0 +1,201 @@
+package implpromote
+
+import (
+	"context"
+	"maps"
+	"slices"
+	"strings"
+
+	schemamigrator "github.com/SigNoz/signoz-otel-collector/cmd/signozschemamigrator/schema_migrator"
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/modules/promote"
+	"github.com/SigNoz/signoz/pkg/telemetrylogs"
+	"github.com/SigNoz/signoz/pkg/telemetrystore"
+	"github.com/SigNoz/signoz/pkg/types/promotetypes"
+	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
+)
+
+var (
+	CodeFailedToCreateIndex        = errors.MustNewCode("failed_to_create_index_promoted_paths")
+	CodeFailedToQueryPromotedPaths = errors.MustNewCode("failed_to_query_promoted_paths")
+)
+
+type module struct {
+	metadataStore  telemetrytypes.MetadataStore
+	telemetryStore telemetrystore.TelemetryStore
+}
+
+func NewModule(metadataStore telemetrytypes.MetadataStore, telemetrystore telemetrystore.TelemetryStore) promote.Module {
+	return &module{metadataStore: metadataStore, telemetryStore: telemetrystore}
+}
+
+func (m *module) ListPromotedAndIndexedPaths(ctx context.Context) ([]promotetypes.PromotePath, error) {
+	logsIndexes, err := m.metadataStore.ListLogsJSONIndexes(ctx)
+	if err != nil {
+		return nil, err
+	}
+	// Flatten the map values (which are slices) into a single slice
+	indexes := slices.Concat(slices.Collect(maps.Values(logsIndexes))...)
+
+	aggr := map[string][]promotetypes.WrappedIndex{}
+	for _, index := range indexes {
+		path, columnType, err := schemamigrator.UnfoldJSONSubColumnIndexExpr(index.Expression)
+		if err != nil {
+			return nil, err
+		}
+
+		// clean backticks from the path
+		path = strings.ReplaceAll(path, "`", "")
+
+		aggr[path] = append(aggr[path], promotetypes.WrappedIndex{
+			ColumnType:  columnType,
+			Type:        index.Type,
+			Granularity: index.Granularity,
+		})
+	}
+	promotedPaths, err := m.listPromotedPaths(ctx)
+	if err != nil {
+		return nil, err
+	}
+
+	response := []promotetypes.PromotePath{}
+	for _, path := range promotedPaths {
+		fullPath := telemetrylogs.BodyPromotedColumnPrefix + path
+		path = telemetrylogs.BodyJSONStringSearchPrefix + path
+		item := promotetypes.PromotePath{
+			Path:    path,
+			Promote: true,
+		}
+		indexes, ok := aggr[fullPath]
+		if ok {
+			item.Indexes = indexes
+			delete(aggr, fullPath)
+		}
+		response = append(response, item)
+	}
+
+	// add the paths that are not promoted but have indexes
+	for path, indexes := range aggr {
+		path := strings.TrimPrefix(path, telemetrylogs.BodyJSONColumnPrefix)
+		path = telemetrylogs.BodyJSONStringSearchPrefix + path
+		response = append(response, promotetypes.PromotePath{
+			Path:    path,
+			Indexes: indexes,
+		})
+	}
+	return response, nil
+}
+
+func (m *module) listPromotedPaths(ctx context.Context) ([]string, error) {
+	paths, err := m.metadataStore.ListPromotedPaths(ctx)
+	if err != nil {
+		return nil, err
+	}
+	return slices.Collect(maps.Keys(paths)), nil
+}
+
+// PromotePaths inserts provided JSON paths into the promoted paths table for logs queries.
+func (m *module) PromotePaths(ctx context.Context, paths []string) error {
+	if len(paths) == 0 {
+		return errors.NewInvalidInputf(errors.CodeInvalidInput, "paths cannot be empty")
+	}
+
+	return m.metadataStore.PromotePaths(ctx, paths...)
+}
+
+// createIndexes creates string ngram + token filter indexes on JSON path subcolumns for LIKE queries.
+func (m *module) createIndexes(ctx context.Context, indexes []schemamigrator.Index) error {
+	if len(indexes) == 0 {
+		return nil
+	}
+
+	for _, index := range indexes {
+		alterStmt := schemamigrator.AlterTableAddIndex{
+			Database: telemetrylogs.DBName,
+			Table:    telemetrylogs.LogsV2LocalTableName,
+			Index:    index,
+		}
+		op := alterStmt.OnCluster(m.telemetryStore.Cluster())
+		if err := m.telemetryStore.ClickhouseDB().Exec(ctx, op.ToSQL()); err != nil {
+			return errors.WrapInternalf(err, CodeFailedToCreateIndex, "failed to create index")
+		}
+	}
+
+	return nil
+}
+
+// PromoteAndIndexPaths handles promoting paths and creating indexes in one call.
+func (m *module) PromoteAndIndexPaths(
+	ctx context.Context,
+	paths ...*promotetypes.PromotePath,
+) error {
+	if len(paths) == 0 {
+		return errors.NewInvalidInputf(errors.CodeInvalidInput, "paths cannot be empty")
+	}
+
+	pathsStr := []string{}
+	// validate the paths
+	for _, path := range paths {
+		if err := path.ValidateAndSetDefaults(); err != nil {
+			return err
+		}
+		pathsStr = append(pathsStr, path.Path)
+	}
+
+	existingPromotedPaths, err := m.metadataStore.ListPromotedPaths(ctx, pathsStr...)
+	if err != nil {
+		return err
+	}
+
+	var toInsert []string
+	indexes := []schemamigrator.Index{}
+	for _, it := range paths {
+		if it.Promote {
+			if _, promoted := existingPromotedPaths[it.Path]; !promoted {
+				toInsert = append(toInsert, it.Path)
+			}
+		}
+		if len(it.Indexes) > 0 {
+			parentColumn := telemetrylogs.LogsV2BodyJSONColumn
+			// if the path is already promoted or is being promoted, add it to the promoted column
+			if _, promoted := existingPromotedPaths[it.Path]; promoted || it.Promote {
+				parentColumn = telemetrylogs.LogsV2BodyPromotedColumn
+			}
+
+			for _, index := range it.Indexes {
+				var typeIndex schemamigrator.IndexType
+				switch {
+				case strings.HasPrefix(index.Type, string(schemamigrator.IndexTypeNGramBF)):
+					typeIndex = schemamigrator.IndexTypeNGramBF
+				case strings.HasPrefix(index.Type, string(schemamigrator.IndexTypeTokenBF)):
+					typeIndex = schemamigrator.IndexTypeTokenBF
+				case strings.HasPrefix(index.Type, string(schemamigrator.IndexTypeMinMax)):
+					typeIndex = schemamigrator.IndexTypeMinMax
+				default:
+					return errors.NewInvalidInputf(errors.CodeInvalidInput, "invalid index type: %s", index.Type)
+				}
+				indexes = append(indexes, schemamigrator.Index{
+					Name:        schemamigrator.JSONSubColumnIndexName(parentColumn, it.Path, index.JSONDataType.StringValue(), typeIndex),
+					Expression:  schemamigrator.JSONSubColumnIndexExpr(parentColumn, it.Path, index.JSONDataType.StringValue()),
+					Type:        index.Type,
+					Granularity: index.Granularity,
+				})
+			}
+		}
+	}
+
+	if len(toInsert) > 0 {
+		err := m.PromotePaths(ctx, toInsert)
+		if err != nil {
+			return err
+		}
+	}
+
+	if len(indexes) > 0 {
+		if err := m.createIndexes(ctx, indexes); err != nil {
+			return err
+		}
+	}
+
+	return nil
+}

pkg/modules/promote/promote.go

@@ -0,0 +1,18 @@
+package promote
+
+import (
+	"context"
+	"net/http"
+
+	"github.com/SigNoz/signoz/pkg/types/promotetypes"
+)
+
+type Module interface {
+	ListPromotedAndIndexedPaths(ctx context.Context) ([]promotetypes.PromotePath, error)
+	PromoteAndIndexPaths(ctx context.Context, paths ...*promotetypes.PromotePath) error
+}
+
+type Handler interface {
+	HandlePromoteAndIndexPaths(w http.ResponseWriter, r *http.Request)
+	ListPromotedAndIndexedPaths(w http.ResponseWriter, r *http.Request)
+}

pkg/query-service/app/clickhouseReader/reader.go

@@ -43,6 +43,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/query-service/app/traces/tracedetail"
 	"github.com/SigNoz/signoz/pkg/query-service/common"
 	"github.com/SigNoz/signoz/pkg/query-service/constants"
+
 	chErrors "github.com/SigNoz/signoz/pkg/query-service/errors"
 	"github.com/SigNoz/signoz/pkg/query-service/metrics"
 	"github.com/SigNoz/signoz/pkg/query-service/model"

pkg/query-service/app/http_handler.go

@@ -555,6 +555,7 @@ func (aH *APIHandler) RegisterRoutes(router *mux.Router, am *middleware.AuthZ) {
 	router.HandleFunc("/api/v1/settings/ttl", am.ViewAccess(aH.getTTL)).Methods(http.MethodGet)
 	router.HandleFunc("/api/v2/settings/ttl", am.AdminAccess(aH.setCustomRetentionTTL)).Methods(http.MethodPost)
 	router.HandleFunc("/api/v2/settings/ttl", am.ViewAccess(aH.getCustomRetentionTTL)).Methods(http.MethodGet)
+
 	router.HandleFunc("/api/v1/settings/apdex", am.AdminAccess(aH.Signoz.Handlers.Apdex.Set)).Methods(http.MethodPost)
 	router.HandleFunc("/api/v1/settings/apdex", am.ViewAccess(aH.Signoz.Handlers.Apdex.Get)).Methods(http.MethodGet)
 

pkg/query-service/app/logs/v4/query_builder_test.go

@@ -5,6 +5,7 @@ import (
 
 	"github.com/SigNoz/signoz/pkg/query-service/constants"
 	v3 "github.com/SigNoz/signoz/pkg/query-service/model/v3"
+	"github.com/stretchr/testify/assert"
 )
 
 func Test_getClickhouseKey(t *testing.T) {
@@ -1210,9 +1211,8 @@ func TestPrepareLogsQuery(t *testing.T) {
 				t.Errorf("PrepareLogsQuery() error = %v, wantErr %v", err, tt.wantErr)
 				return
 			}
-			if got != tt.want {
-				t.Errorf("PrepareLogsQuery() = %v, want %v", got, tt.want)
-			}
+
+			assert.Equal(t, tt.want, got)
 		})
 	}
 }

pkg/signoz/module.go

@@ -20,6 +20,8 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/organization/implorganization"
 	"github.com/SigNoz/signoz/pkg/modules/preference"
 	"github.com/SigNoz/signoz/pkg/modules/preference/implpreference"
+	"github.com/SigNoz/signoz/pkg/modules/promote"
+	"github.com/SigNoz/signoz/pkg/modules/promote/implpromote"
 	"github.com/SigNoz/signoz/pkg/modules/quickfilter"
 	"github.com/SigNoz/signoz/pkg/modules/quickfilter/implquickfilter"
 	"github.com/SigNoz/signoz/pkg/modules/rawdataexport"
@@ -65,6 +67,7 @@ type Modules struct {
 	Services        services.Module
 	SpanPercentile  spanpercentile.Module
 	MetricsExplorer metricsexplorer.Module
+	Promote         promote.Module
 }
 
 func NewModules(
@@ -108,5 +111,6 @@ func NewModules(
 		SpanPercentile:  implspanpercentile.NewModule(querier, providerSettings),
 		Services:        implservices.NewModule(querier, telemetryStore),
 		MetricsExplorer: implmetricsexplorer.NewModule(telemetryStore, telemetryMetadataStore, cache, ruleStore, dashboard, providerSettings, config.MetricsExplorer),
+		Promote:         implpromote.NewModule(telemetryMetadataStore, telemetryStore),
 	}
 }

pkg/signoz/openapi.go

@@ -14,6 +14,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/authdomain"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
 	"github.com/SigNoz/signoz/pkg/modules/preference"
+	"github.com/SigNoz/signoz/pkg/modules/promote"
 	"github.com/SigNoz/signoz/pkg/modules/session"
 	"github.com/SigNoz/signoz/pkg/modules/user"
 	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
@@ -38,6 +39,7 @@ func NewOpenAPI(ctx context.Context, instrumentation instrumentation.Instrumenta
 		struct{ authdomain.Handler }{},
 		struct{ preference.Handler }{},
 		struct{ global.Handler }{},
+		struct{ promote.Handler }{},
 	).New(ctx, instrumentation.ToProviderSettings(), apiserver.Config{})
 	if err != nil {
 		return nil, err

pkg/signoz/provider.go

@@ -24,6 +24,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/organization"
 	"github.com/SigNoz/signoz/pkg/modules/organization/implorganization"
 	"github.com/SigNoz/signoz/pkg/modules/preference/implpreference"
+	"github.com/SigNoz/signoz/pkg/modules/promote/implpromote"
 	"github.com/SigNoz/signoz/pkg/modules/session/implsession"
 	"github.com/SigNoz/signoz/pkg/modules/user"
 	"github.com/SigNoz/signoz/pkg/modules/user/impluser"
@@ -234,6 +235,7 @@ func NewAPIServerProviderFactories(orgGetter organization.Getter, authz authz.Au
 			implauthdomain.NewHandler(modules.AuthDomain),
 			implpreference.NewHandler(modules.Preference),
 			signozglobal.NewHandler(global),
+			implpromote.NewHandler(modules.Promote),
 		),
 	)
 }

pkg/telemetrymetadata/body_json_metadata.go

@@ -7,7 +7,6 @@ import (
 	"strings"
 	"time"
 
-	"github.com/ClickHouse/clickhouse-go/v2"
 	"github.com/ClickHouse/clickhouse-go/v2/lib/chcol"
 	schemamigrator "github.com/SigNoz/signoz-otel-collector/cmd/signozschemamigrator/schema_migrator"
 	"github.com/SigNoz/signoz-otel-collector/constants"
@@ -15,7 +14,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/querybuilder"
 	"github.com/SigNoz/signoz/pkg/telemetrylogs"
-	"github.com/SigNoz/signoz/pkg/telemetrystore"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 	"github.com/huandu/go-sqlbuilder"
 )
@@ -34,6 +32,10 @@ var (
 	CodeFailScanVariant         = errors.MustNewCode("fail_scan_variant")
 	CodeFailBuildJSONPathsQuery = errors.MustNewCode("fail_build_json_paths_query")
 	CodeNoPathsToQueryIndexes   = errors.MustNewCode("no_paths_to_query_indexes_provided")
+
+	CodeFailedToPrepareBatch = errors.MustNewCode("failed_to_prepare_batch_promoted_paths")
+	CodeFailedToSendBatch    = errors.MustNewCode("failed_to_send_batch_promoted_paths")
+	CodeFailedToAppendPath   = errors.MustNewCode("failed_to_append_path_promoted_paths")
 )
 
 // GetBodyJSONPaths extracts body JSON paths from the path_types table
@@ -48,7 +50,7 @@ var (
 // TODO(Piyush): Remove this lint skip
 //
 // nolint:unused
-func getBodyJSONPaths(ctx context.Context, telemetryStore telemetrystore.TelemetryStore,
+func (t *telemetryMetaStore) getBodyJSONPaths(ctx context.Context,
 	fieldKeySelectors []*telemetrytypes.FieldKeySelector) ([]*telemetrytypes.TelemetryFieldKey, bool, error) {
 
 	query, args, limit, err := buildGetBodyJSONPathsQuery(fieldKeySelectors)
@@ -56,7 +58,7 @@ func getBodyJSONPaths(ctx context.Context, telemetryStore telemetrystore.Telemet
 		return nil, false, err
 	}
 
-	rows, err := telemetryStore.ClickhouseDB().Query(ctx, query, args...)
+	rows, err := t.telemetrystore.ClickhouseDB().Query(ctx, query, args...)
 	if err != nil {
 		return nil, false, errors.WrapInternalf(err, CodeFailExtractBodyJSONKeys, "failed to extract body JSON keys")
 	}
@@ -96,12 +98,12 @@ func getBodyJSONPaths(ctx context.Context, telemetryStore telemetrystore.Telemet
 		return nil, false, errors.WrapInternalf(rows.Err(), CodeFailIterateBodyJSONKeys, "error iterating body JSON keys")
 	}
 
-	promoted, err := GetPromotedPaths(ctx, telemetryStore.ClickhouseDB(), paths...)
+	promoted, err := t.GetPromotedPaths(ctx, paths...)
 	if err != nil {
 		return nil, false, err
 	}
 
-	indexes, err := getJSONPathIndexes(ctx, telemetryStore, paths...)
+	indexes, err := t.getJSONPathIndexes(ctx, paths...)
 	if err != nil {
 		return nil, false, err
 	}
@@ -163,7 +165,7 @@ func buildGetBodyJSONPathsQuery(fieldKeySelectors []*telemetrytypes.FieldKeySele
 // TODO(Piyush): Remove this lint skip
 //
 // nolint:unused
-func getJSONPathIndexes(ctx context.Context, telemetryStore telemetrystore.TelemetryStore, paths ...string) (map[string][]telemetrytypes.JSONDataTypeIndex, error) {
+func (t *telemetryMetaStore) getJSONPathIndexes(ctx context.Context, paths ...string) (map[string][]telemetrytypes.JSONDataTypeIndex, error) {
 	filteredPaths := []string{}
 	for _, path := range paths {
 		if strings.Contains(path, telemetrylogs.ArraySep) || strings.Contains(path, telemetrylogs.ArrayAnyIndex) {
@@ -176,7 +178,7 @@ func getJSONPathIndexes(ctx context.Context, telemetryStore telemetrystore.Telem
 	}
 
 	// list indexes for the paths
-	indexesMap, err := ListLogsJSONIndexes(ctx, telemetryStore, filteredPaths...)
+	indexesMap, err := t.ListLogsJSONIndexes(ctx, filteredPaths...)
 	if err != nil {
 		return nil, errors.WrapInternalf(err, CodeFailLoadLogsJSONIndexes, "failed to list JSON path indexes")
 	}
@@ -215,7 +217,6 @@ func getJSONPathIndexes(ctx context.Context, telemetryStore telemetrystore.Telem
 }
 
 func buildListLogsJSONIndexesQuery(cluster string, filters ...string) (string, []any) {
-	// This aggregates all types per path and gets the max last_seen, then applies LIMIT
 	sb := sqlbuilder.Select(
 		"name", "type_full", "expr", "granularity",
 	).From(fmt.Sprintf("clusterAllReplicas('%s', %s)", cluster, SkipIndexTableName))
@@ -236,9 +237,9 @@ func buildListLogsJSONIndexesQuery(cluster string, filters ...string) (string, [
 	return sb.BuildWithFlavor(sqlbuilder.ClickHouse)
 }
 
-func ListLogsJSONIndexes(ctx context.Context, telemetryStore telemetrystore.TelemetryStore, filters ...string) (map[string][]schemamigrator.Index, error) {
-	query, args := buildListLogsJSONIndexesQuery(telemetryStore.Cluster(), filters...)
-	rows, err := telemetryStore.ClickhouseDB().Query(ctx, query, args...)
+func (t *telemetryMetaStore) ListLogsJSONIndexes(ctx context.Context, filters ...string) (map[string][]schemamigrator.Index, error) {
+	query, args := buildListLogsJSONIndexesQuery(t.telemetrystore.Cluster(), filters...)
+	rows, err := t.telemetrystore.ClickhouseDB().Query(ctx, query, args...)
 	if err != nil {
 		return nil, errors.WrapInternalf(err, CodeFailLoadLogsJSONIndexes, "failed to load string indexed columns")
 	}
@@ -264,9 +265,16 @@ func ListLogsJSONIndexes(ctx context.Context, telemetryStore telemetrystore.Tele
 	return indexesMap, nil
 }
 
-func ListPromotedPaths(ctx context.Context, conn clickhouse.Conn) (map[string]struct{}, error) {
-	query := fmt.Sprintf("SELECT path FROM %s.%s", DBName, PromotedPathsTableName)
-	rows, err := conn.Query(ctx, query)
+func (t *telemetryMetaStore) ListPromotedPaths(ctx context.Context, paths ...string) (map[string]struct{}, error) {
+	sb := sqlbuilder.Select("path").From(fmt.Sprintf("%s.%s", DBName, PromotedPathsTableName))
+	pathConditions := []string{}
+	for _, path := range paths {
+		pathConditions = append(pathConditions, sb.Equal("path", path))
+	}
+	sb.Where(sb.Or(pathConditions...))
+	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
+
+	rows, err := t.telemetrystore.ClickhouseDB().Query(ctx, query, args...)
 	if err != nil {
 		return nil, errors.WrapInternalf(err, CodeFailLoadPromotedPaths, "failed to load promoted paths")
 	}
@@ -285,14 +293,14 @@ func ListPromotedPaths(ctx context.Context, conn clickhouse.Conn) (map[string]st
 }
 
 // TODO(Piyush): Remove this if not used in future
-func ListJSONValues(ctx context.Context, conn clickhouse.Conn, path string, limit int) (*telemetrytypes.TelemetryFieldValues, bool, error) {
+func (t *telemetryMetaStore) ListJSONValues(ctx context.Context, path string, limit int) (*telemetrytypes.TelemetryFieldValues, bool, error) {
 	path = CleanPathPrefixes(path)
 
 	if strings.Contains(path, telemetrylogs.ArraySep) || strings.Contains(path, telemetrylogs.ArrayAnyIndex) {
 		return nil, false, errors.NewInvalidInputf(errors.CodeInvalidInput, "array paths are not supported")
 	}
 
-	promoted, err := IsPathPromoted(ctx, conn, path)
+	promoted, err := t.IsPathPromoted(ctx, path)
 	if err != nil {
 		return nil, false, err
 	}
@@ -325,7 +333,7 @@ func ListJSONValues(ctx context.Context, conn clickhouse.Conn, path string, limi
 	contextWithTimeout, cancel := context.WithTimeout(ctx, 5*time.Second)
 	defer cancel()
 	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
-	rows, err := conn.Query(contextWithTimeout, query, args...)
+	rows, err := t.telemetrystore.ClickhouseDB().Query(contextWithTimeout, query, args...)
 	if err != nil {
 		if errors.Is(err, context.DeadlineExceeded) {
 			return nil, false, errors.WrapTimeoutf(err, errors.CodeTimeout, "query timed out").WithAdditional("failed to list JSON values")
@@ -447,10 +455,10 @@ func derefValue(v any) any {
 }
 
 // IsPathPromoted checks if a specific path is promoted
-func IsPathPromoted(ctx context.Context, conn clickhouse.Conn, path string) (bool, error) {
+func (t *telemetryMetaStore) IsPathPromoted(ctx context.Context, path string) (bool, error) {
 	split := strings.Split(path, telemetrylogs.ArraySep)
 	query := fmt.Sprintf("SELECT 1 FROM %s.%s WHERE path = ? LIMIT 1", DBName, PromotedPathsTableName)
-	rows, err := conn.Query(ctx, query, split[0])
+	rows, err := t.telemetrystore.ClickhouseDB().Query(ctx, query, split[0])
 	if err != nil {
 		return false, errors.WrapInternalf(err, CodeFailCheckPathPromoted, "failed to check if path %s is promoted", path)
 	}
@@ -460,7 +468,7 @@ func IsPathPromoted(ctx context.Context, conn clickhouse.Conn, path string) (boo
 }
 
 // GetPromotedPaths checks if a specific path is promoted
-func GetPromotedPaths(ctx context.Context, conn clickhouse.Conn, paths ...string) (*utils.ConcurrentSet[string], error) {
+func (t *telemetryMetaStore) GetPromotedPaths(ctx context.Context, paths ...string) (*utils.ConcurrentSet[string], error) {
 	sb := sqlbuilder.Select("path").From(fmt.Sprintf("%s.%s", DBName, PromotedPathsTableName))
 	pathConditions := []string{}
 	for _, path := range paths {
@@ -469,7 +477,7 @@ func GetPromotedPaths(ctx context.Context, conn clickhouse.Conn, paths ...string
 	sb.Where(sb.Or(pathConditions...))
 
 	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
-	rows, err := conn.Query(ctx, query, args...)
+	rows, err := t.telemetrystore.ClickhouseDB().Query(ctx, query, args...)
 	if err != nil {
 		return nil, errors.WrapInternalf(err, CodeFailCheckPathPromoted, "failed to get promoted paths")
 	}
@@ -494,3 +502,29 @@ func CleanPathPrefixes(path string) string {
 	path = strings.TrimPrefix(path, telemetrylogs.BodyPromotedColumnPrefix)
 	return path
 }
+
+func (t *telemetryMetaStore) PromotePaths(ctx context.Context, paths ...string) error {
+	batch, err := t.telemetrystore.ClickhouseDB().PrepareBatch(ctx,
+		fmt.Sprintf("INSERT INTO %s.%s (path, created_at) VALUES", DBName,
+			PromotedPathsTableName))
+	if err != nil {
+		return errors.WrapInternalf(err, CodeFailedToPrepareBatch, "failed to prepare batch")
+	}
+
+	nowMs := uint64(time.Now().UnixMilli())
+	for _, p := range paths {
+		trimmed := strings.TrimSpace(p)
+		if trimmed == "" {
+			continue
+		}
+		if err := batch.Append(trimmed, nowMs); err != nil {
+			_ = batch.Abort()
+			return errors.WrapInternalf(err, CodeFailedToAppendPath, "failed to append path")
+		}
+	}
+
+	if err := batch.Send(); err != nil {
+		return errors.WrapInternalf(err, CodeFailedToSendBatch, "failed to send batch")
+	}
+	return nil
+}

pkg/types/dashboardtypes/dashboard.go

@@ -349,7 +349,7 @@ func (dashboard *Dashboard) GetWidgetQuery(startTime, endTime uint64, widgetInde
 		return nil, errors.Wrapf(err, errors.TypeInvalidInput, ErrCodeDashboardInvalidData, "invalid dashboard data")
 	}
 
-	if len(data.Widgets) < int(widgetIndex)+1 {
+	if widgetIndex < 0 || int(widgetIndex) >= len(data.Widgets) {
 		return nil, errors.Newf(errors.TypeInvalidInput, ErrCodeDashboardInvalidInput, "widget with index %v doesn't exist", widgetIndex)
 	}
 

pkg/types/promotetypes/types.go

@@ -0,0 +1,76 @@
+package promotetypes
+
+import (
+	"strings"
+
+	"github.com/SigNoz/signoz-otel-collector/constants"
+	"github.com/SigNoz/signoz-otel-collector/pkg/keycheck"
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/telemetrylogs"
+	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
+)
+
+type WrappedIndex struct {
+	JSONDataType telemetrytypes.JSONDataType `json:"-"`
+	ColumnType   string                      `json:"column_type"`
+	Type         string                      `json:"type"`
+	Granularity  int                         `json:"granularity"`
+}
+
+type PromotePath struct {
+	Path    string `json:"path"`
+	Promote bool   `json:"promote,omitempty"`
+
+	Indexes []WrappedIndex `json:"indexes,omitempty"`
+}
+
+func (i *PromotePath) ValidateAndSetDefaults() error {
+	if i.Path == "" {
+		return errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "path is required")
+	}
+
+	if strings.Contains(i.Path, " ") {
+		return errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "path cannot contain spaces")
+	}
+
+	if strings.Contains(i.Path, telemetrylogs.ArraySep) || strings.Contains(i.Path, telemetrylogs.ArrayAnyIndex) {
+		return errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "array paths can not be promoted or indexed")
+	}
+
+	if strings.HasPrefix(i.Path, constants.BodyJSONColumnPrefix) || strings.HasPrefix(i.Path, constants.BodyPromotedColumnPrefix) {
+		return errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "`%s`, `%s` don't add these prefixes to the path", constants.BodyJSONColumnPrefix, constants.BodyPromotedColumnPrefix)
+	}
+
+	if !strings.HasPrefix(i.Path, telemetrylogs.BodyJSONStringSearchPrefix) {
+		return errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "path must start with `body.`")
+	}
+
+	// remove the "body." prefix from the path
+	i.Path = strings.TrimPrefix(i.Path, telemetrylogs.BodyJSONStringSearchPrefix)
+
+	isCardinal := keycheck.IsCardinal(i.Path)
+	if isCardinal {
+		return errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "cardinal paths can not be promoted or indexed")
+	}
+
+	for idx, index := range i.Indexes {
+		if index.Type == "" {
+			return errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "index type is required")
+		}
+		if index.Granularity <= 0 {
+			return errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "index granularity must be greater than 0")
+		}
+
+		jsonDataType, ok := telemetrytypes.MappingStringToJSONDataType[index.ColumnType]
+		if !ok {
+			return errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "invalid column type: %s", index.ColumnType)
+		}
+		if !jsonDataType.IndexSupported {
+			return errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "index is not supported for column type: %s", index.ColumnType)
+		}
+
+		i.Indexes[idx].JSONDataType = jsonDataType
+	}
+
+	return nil
+}

pkg/types/telemetrytypes/store.go

@@ -3,6 +3,7 @@ package telemetrytypes
 import (
 	"context"
 
+	schemamigrator "github.com/SigNoz/signoz-otel-collector/cmd/signozschemamigrator/schema_migrator"
 	"github.com/SigNoz/signoz/pkg/types/metrictypes"
 )
 
@@ -30,4 +31,13 @@ type MetadataStore interface {
 
 	// FetchTemporalityMulti fetches the temporality for multiple metrics
 	FetchTemporalityMulti(ctx context.Context, metricNames ...string) (map[string]metrictypes.Temporality, error)
+
+	// ListLogsJSONIndexes lists the JSON indexes for the logs table.
+	ListLogsJSONIndexes(ctx context.Context, filters ...string) (map[string][]schemamigrator.Index, error)
+
+	// ListPromotedPaths lists the promoted paths.
+	ListPromotedPaths(ctx context.Context, paths ...string) (map[string]struct{}, error)
+
+	// PromotePaths promotes the paths.
+	PromotePaths(ctx context.Context, paths ...string) error
 }

pkg/types/telemetrytypes/telemetrytypestest/metadata_store.go

@@ -4,6 +4,7 @@ import (
 	"context"
 	"strings"
 
+	schemamigrator "github.com/SigNoz/signoz-otel-collector/cmd/signozschemamigrator/schema_migrator"
 	"github.com/SigNoz/signoz/pkg/types/metrictypes"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 )
@@ -11,19 +12,23 @@ import (
 // MockMetadataStore implements the MetadataStore interface for testing purposes
 type MockMetadataStore struct {
 	// Maps to store test data
-	KeysMap          map[string][]*telemetrytypes.TelemetryFieldKey
-	RelatedValuesMap map[string][]string
-	AllValuesMap     map[string]*telemetrytypes.TelemetryFieldValues
-	TemporalityMap   map[string]metrictypes.Temporality
+	KeysMap            map[string][]*telemetrytypes.TelemetryFieldKey
+	RelatedValuesMap   map[string][]string
+	AllValuesMap       map[string]*telemetrytypes.TelemetryFieldValues
+	TemporalityMap     map[string]metrictypes.Temporality
+	PromotedPathsMap   map[string]struct{}
+	LogsJSONIndexesMap map[string][]schemamigrator.Index
 }
 
 // NewMockMetadataStore creates a new instance of MockMetadataStore with initialized maps
 func NewMockMetadataStore() *MockMetadataStore {
 	return &MockMetadataStore{
-		KeysMap:          make(map[string][]*telemetrytypes.TelemetryFieldKey),
-		RelatedValuesMap: make(map[string][]string),
-		AllValuesMap:     make(map[string]*telemetrytypes.TelemetryFieldValues),
-		TemporalityMap:   make(map[string]metrictypes.Temporality),
+		KeysMap:            make(map[string][]*telemetrytypes.TelemetryFieldKey),
+		RelatedValuesMap:   make(map[string][]string),
+		AllValuesMap:       make(map[string]*telemetrytypes.TelemetryFieldValues),
+		TemporalityMap:     make(map[string]metrictypes.Temporality),
+		PromotedPathsMap:   make(map[string]struct{}),
+		LogsJSONIndexesMap: make(map[string][]schemamigrator.Index),
 	}
 }
 
@@ -284,3 +289,21 @@ func (m *MockMetadataStore) FetchTemporalityMulti(ctx context.Context, metricNam
 func (m *MockMetadataStore) SetTemporality(metricName string, temporality metrictypes.Temporality) {
 	m.TemporalityMap[metricName] = temporality
 }
+
+// PromotePaths promotes the paths.
+func (m *MockMetadataStore) PromotePaths(ctx context.Context, paths ...string) error {
+	for _, path := range paths {
+		m.PromotedPathsMap[path] = struct{}{}
+	}
+	return nil
+}
+
+// ListPromotedPaths lists the promoted paths.
+func (m *MockMetadataStore) ListPromotedPaths(ctx context.Context, paths ...string) (map[string]struct{}, error) {
+	return m.PromotedPathsMap, nil
+}
+
+// ListLogsJSONIndexes lists the JSON indexes for the logs table.
+func (m *MockMetadataStore) ListLogsJSONIndexes(ctx context.Context, filters ...string) (map[string][]schemamigrator.Index, error) {
+	return m.LogsJSONIndexesMap, nil
+}

tests/integration/src/dashboard/a_public_dashboard.py

@@ -101,3 +101,145 @@ def test_create_and_get_public_dashboard(
         )
         tuple_row = tuple_result.fetchone()
         assert tuple_row is not None
+
+
+def test_public_dashboard_widget_query_range(
+    signoz: SigNoz,
+    create_user_admin: Operation,  # pylint: disable=unused-argument
+    get_token: Callable[[str, str], str],
+):
+    admin_token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+
+    dashboard_req = {
+        "title": "Test Widget Query Range Dashboard",
+        "description": "For testing widget query range",
+        "version": "v5",
+        "widgets": [
+            {
+                "id": "6990c9d8-57ad-492f-8c63-039081e30d02",
+                "panelTypes": "graph",
+                "query": {
+                    "builder": {
+                        "queryData": [
+                            {
+                                "aggregations": [
+                                    {
+                                        "metricName": "container.cpu.time",
+                                        "reduceTo": "avg",
+                                        "spaceAggregation": "sum",
+                                        "temporality": "",
+                                        "timeAggregation": "rate",
+                                    }
+                                ],
+                                "dataSource": "metrics",
+                                "disabled": False,
+                                "expression": "A",
+                                "filter": {
+                                    "expression": ""
+                                },
+                                "functions": [],
+                                "groupBy": [],
+                                "having": {
+                                    "expression": ""
+                                },
+                                "legend": "",
+                                "limit": 10,
+                                "orderBy": [],
+                                "queryName": "A",
+                                "source": "",
+                                "stepInterval": 10
+                            }
+                        ],
+                        "queryFormulas": [],
+                        "queryTraceOperator": []
+                    },
+                    "clickhouse_sql": [
+                        {
+                            "disabled": False,
+                            "legend": "",
+                            "name": "A",
+                            "query": ""
+                        }
+                    ],
+                    "id": "80f12506-ef72-4013-8282-2713c8114c9e",
+                    "promql": [
+                        {
+                            "disabled": False,
+                            "legend": "",
+                            "name": "A",
+                            "query": ""
+                        }
+                    ],
+                    "queryType": "builder"
+                },
+            }
+        ],
+    }
+    create_response = requests.post(
+        signoz.self.host_configs["8080"].get("/api/v1/dashboards"),
+        json=dashboard_req,
+        headers={"Authorization": f"Bearer {admin_token}"},
+        timeout=2,
+    )
+    assert create_response.status_code == HTTPStatus.CREATED
+    data = create_response.json()["data"]
+    dashboard_id = data["id"]
+
+
+    # create public dashboard
+    response = requests.post(
+        signoz.self.host_configs["8080"].get(
+            f"/api/v1/dashboards/{dashboard_id}/public"
+        ),
+        json={
+            "timeRangeEnabled": False,
+            "defaultTimeRange": "10s",
+        },
+        headers={"Authorization": f"Bearer {admin_token}"},
+        timeout=2,
+    )
+
+    assert response.status_code == HTTPStatus.CREATED
+    assert "id" in response.json()["data"]
+
+    response = requests.get(
+        signoz.self.host_configs["8080"].get(
+            f"/api/v1/dashboards/{dashboard_id}/public"
+        ),
+        headers={"Authorization": f"Bearer {admin_token}"},
+        timeout=2,
+    )
+
+    assert response.status_code == HTTPStatus.OK
+    assert response.json()["status"] == "success"
+    public_path = response.json()["data"]["publicPath"]
+    public_dashboard_id = public_path.split("/public/dashboard/")[-1] 
+
+    
+    
+    resp = requests.get(
+        signoz.self.host_configs["8080"].get(
+        f"/api/v1/public/dashboards/{public_dashboard_id}/widgets/0/query_range"
+        ),
+        timeout=2,
+    )
+    print(resp.json())
+    assert resp.status_code == HTTPStatus.OK
+    assert resp.json().get("status") == "success"
+
+    
+    resp = requests.get(
+        signoz.self.host_configs["8080"].get(
+        f"/api/v1/public/dashboards/{public_dashboard_id}/widgets/-1/query_range"
+        ),
+        timeout=2,
+    )
+    assert resp.status_code == HTTPStatus.BAD_REQUEST
+
+    resp = requests.get(
+        signoz.self.host_configs["8080"].get(
+        f"/api/v1/public/dashboards/{public_dashboard_id}/widgets/1/query_range"
+        ),
+        timeout=2,
+    )
+    assert resp.status_code == HTTPStatus.BAD_REQUEST