docs: document offset pagination for export_raw_data API

Expand the POST /api/v1/export_raw_data endpoint description to cover
client-controlled offset pagination, the limit defaults/cap, the
non-negative offset validation, and the empty-result termination
condition. Spec-only change; the SigNoz docs site auto-renders the
API Reference from this file.

Source PRs: #11825

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

docs/api/openapi.yml

@@ -9907,8 +9907,19 @@ paths:
   /api/v1/export_raw_data:
     post:
       deprecated: false
-      description: This endpoints allows complex query exporting raw data for traces
-        and logs
+      description: |
+        Exports raw data for traces and logs using a query builder spec.
+
+        Pagination: set the `offset` field in a query spec to control the starting
+        row. The export begins at `offset` (default `0`) and returns up to `limit`
+        rows (default `10000`, max `50000`). To page through a large dataset, keep
+        `limit` fixed and increase `offset` by `limit` on each successive request;
+        stop when a response returns fewer rows than `limit`. An `offset` beyond the
+        available rows returns an empty result set, which signals the end of the
+        data. A negative `offset` is rejected with `400 Bad Request` and the message
+        `offset must be non-negative`. The per-request row cap (`50000`) applies to
+        each call independently; there is no cap on the total rows retrieved across
+        paginated requests.
       operationId: HandleExportRawDataPOST
       parameters:
       - description: The output format for the export.
@@ -15700,20 +15711,16 @@ paths:
       summary: List metric names
       tags:
       - metrics
-  /api/v2/metrics/alerts:
+  /api/v2/metrics/{metric_name}/alerts:
     get:
       deprecated: false
       description: This endpoint returns associated alerts for a specified metric
       operationId: GetMetricAlerts
       parameters:
-      - description: The name of the metric. May contain slashes (e.g. cloud-provider
-          metrics like run.googleapis.com/request_latencies).
-        in: query
-        name: metricName
+      - in: path
+        name: metric_name
         required: true
         schema:
-          description: The name of the metric. May contain slashes (e.g. cloud-provider
-            metrics like run.googleapis.com/request_latencies).
           type: string
       responses:
         "200":
@@ -15768,36 +15775,28 @@ paths:
       summary: Get metric alerts
       tags:
       - metrics
-  /api/v2/metrics/attributes:
+  /api/v2/metrics/{metric_name}/attributes:
     get:
       deprecated: false
       description: This endpoint returns attribute keys and their unique values for
         a specified metric
       operationId: GetMetricAttributes
       parameters:
-      - description: The name of the metric. May contain slashes (e.g. cloud-provider
-          metrics like run.googleapis.com/request_latencies).
-        in: query
-        name: metricName
-        required: true
-        schema:
-          description: The name of the metric. May contain slashes (e.g. cloud-provider
-            metrics like run.googleapis.com/request_latencies).
-          type: string
-      - description: Start of the time range as a Unix timestamp in milliseconds.
-        in: query
+      - in: query
         name: start
         schema:
-          description: Start of the time range as a Unix timestamp in milliseconds.
           nullable: true
           type: integer
-      - description: End of the time range as a Unix timestamp in milliseconds.
-        in: query
+      - in: query
         name: end
         schema:
-          description: End of the time range as a Unix timestamp in milliseconds.
           nullable: true
           type: integer
+      - in: path
+        name: metric_name
+        required: true
+        schema:
+          type: string
       responses:
         "200":
           content:
@@ -15851,20 +15850,16 @@ paths:
       summary: Get metric attributes
       tags:
       - metrics
-  /api/v2/metrics/dashboards:
+  /api/v2/metrics/{metric_name}/dashboards:
     get:
       deprecated: false
       description: This endpoint returns associated dashboards for a specified metric
       operationId: GetMetricDashboards
       parameters:
-      - description: The name of the metric. May contain slashes (e.g. cloud-provider
-          metrics like run.googleapis.com/request_latencies).
-        in: query
-        name: metricName
+      - in: path
+        name: metric_name
         required: true
         schema:
-          description: The name of the metric. May contain slashes (e.g. cloud-provider
-            metrics like run.googleapis.com/request_latencies).
           type: string
       responses:
         "200":
@@ -15919,21 +15914,17 @@ paths:
       summary: Get metric dashboards
       tags:
       - metrics
-  /api/v2/metrics/highlights:
+  /api/v2/metrics/{metric_name}/highlights:
     get:
       deprecated: false
       description: This endpoint returns highlights like number of datapoints, totaltimeseries,
         active time series, last received time for a specified metric
       operationId: GetMetricHighlights
       parameters:
-      - description: The name of the metric. May contain slashes (e.g. cloud-provider
-          metrics like run.googleapis.com/request_latencies).
-        in: query
-        name: metricName
+      - in: path
+        name: metric_name
         required: true
         schema:
-          description: The name of the metric. May contain slashes (e.g. cloud-provider
-            metrics like run.googleapis.com/request_latencies).
           type: string
       responses:
         "200":
@@ -15988,79 +15979,17 @@ paths:
       summary: Get metric highlights
       tags:
       - metrics
-  /api/v2/metrics/inspect:
-    post:
-      deprecated: false
-      description: Returns raw time series data points for a metric within a time
-        range (max 30 minutes). Each series includes labels and timestamp/value pairs.
-      operationId: InspectMetrics
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/MetricsexplorertypesInspectMetricsRequest'
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/MetricsexplorertypesInspectMetricsResponse'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
-      summary: Inspect raw metric data points
-      tags:
-      - metrics
-  /api/v2/metrics/metadata:
+  /api/v2/metrics/{metric_name}/metadata:
     get:
       deprecated: false
       description: This endpoint returns metadata information like metric description,
         unit, type, temporality, monotonicity for a specified metric
       operationId: GetMetricMetadata
       parameters:
-      - description: The name of the metric. May contain slashes (e.g. cloud-provider
-          metrics like run.googleapis.com/request_latencies).
-        in: query
-        name: metricName
+      - in: path
+        name: metric_name
         required: true
         schema:
-          description: The name of the metric. May contain slashes (e.g. cloud-provider
-            metrics like run.googleapis.com/request_latencies).
           type: string
       responses:
         "200":
@@ -16120,6 +16049,12 @@ paths:
       description: This endpoint helps to update metadata information like metric
         description, unit, type, temporality, monotonicity for a specified metric
       operationId: UpdateMetricMetadata
+      parameters:
+      - in: path
+        name: metric_name
+        required: true
+        schema:
+          type: string
       requestBody:
         content:
           application/json:
@@ -16160,6 +16095,64 @@ paths:
       summary: Update metric metadata
       tags:
       - metrics
+  /api/v2/metrics/inspect:
+    post:
+      deprecated: false
+      description: Returns raw time series data points for a metric within a time
+        range (max 30 minutes). Each series includes labels and timestamp/value pairs.
+      operationId: InspectMetrics
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/MetricsexplorertypesInspectMetricsRequest'
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/MetricsexplorertypesInspectMetricsResponse'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: Inspect raw metric data points
+      tags:
+      - metrics
   /api/v2/metrics/onboarding:
     get:
       deprecated: false

frontend/src/api/generated/services/metrics/index.ts

@@ -19,15 +19,16 @@ import type {
 
 import type {
 	GetMetricAlerts200,
-	GetMetricAlertsParams,
+	GetMetricAlertsPathParameters,
 	GetMetricAttributes200,
 	GetMetricAttributesParams,
+	GetMetricAttributesPathParameters,
 	GetMetricDashboards200,
-	GetMetricDashboardsParams,
+	GetMetricDashboardsPathParameters,
 	GetMetricHighlights200,
-	GetMetricHighlightsParams,
+	GetMetricHighlightsPathParameters,
 	GetMetricMetadata200,
-	GetMetricMetadataParams,
+	GetMetricMetadataPathParameters,
 	GetMetricsOnboardingStatus200,
 	GetMetricsStats200,
 	GetMetricsTreemap200,
@@ -39,6 +40,7 @@ import type {
 	MetricsexplorertypesTreemapRequestDTO,
 	MetricsexplorertypesUpdateMetricMetadataRequestDTO,
 	RenderErrorResponseDTO,
+	UpdateMetricMetadataPathParameters,
 } from '../sigNoz.schemas';
 
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
@@ -144,26 +146,27 @@ export const invalidateListMetrics = async (
  * @summary Get metric alerts
  */
 export const getMetricAlerts = (
-	params: GetMetricAlertsParams,
+	{ metricName }: GetMetricAlertsPathParameters,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<GetMetricAlerts200>({
-		url: `/api/v2/metrics/alerts`,
+		url: `/api/v2/metrics/${metricName}/alerts`,
 		method: 'GET',
-		params,
 		signal,
 	});
 };
 
-export const getGetMetricAlertsQueryKey = (params?: GetMetricAlertsParams) => {
-	return [`/api/v2/metrics/alerts`, ...(params ? [params] : [])] as const;
+export const getGetMetricAlertsQueryKey = ({
+	metricName,
+}: GetMetricAlertsPathParameters) => {
+	return [`/api/v2/metrics/${metricName}/alerts`] as const;
 };
 
 export const getGetMetricAlertsQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMetricAlerts>>,
 	TError = ErrorType<RenderErrorResponseDTO>,
 >(
-	params: GetMetricAlertsParams,
+	{ metricName }: GetMetricAlertsPathParameters,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricAlerts>>,
@@ -174,13 +177,19 @@ export const getGetMetricAlertsQueryOptions = <
 ) => {
 	const { query: queryOptions } = options ?? {};
 
-	const queryKey = queryOptions?.queryKey ?? getGetMetricAlertsQueryKey(params);
+	const queryKey =
+		queryOptions?.queryKey ?? getGetMetricAlertsQueryKey({ metricName });
 
 	const queryFn: QueryFunction<Awaited<ReturnType<typeof getMetricAlerts>>> = ({
 		signal,
-	}) => getMetricAlerts(params, signal);
+	}) => getMetricAlerts({ metricName }, signal);
 
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!metricName,
+		...queryOptions,
+	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getMetricAlerts>>,
 		TError,
 		TData
@@ -200,7 +209,7 @@ export function useGetMetricAlerts<
 	TData = Awaited<ReturnType<typeof getMetricAlerts>>,
 	TError = ErrorType<RenderErrorResponseDTO>,
 >(
-	params: GetMetricAlertsParams,
+	{ metricName }: GetMetricAlertsPathParameters,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricAlerts>>,
@@ -209,7 +218,7 @@ export function useGetMetricAlerts<
 		>;
 	},
 ): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetMetricAlertsQueryOptions(params, options);
+	const queryOptions = getGetMetricAlertsQueryOptions({ metricName }, options);
 
 	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
 		queryKey: QueryKey;
@@ -223,11 +232,11 @@ export function useGetMetricAlerts<
  */
 export const invalidateGetMetricAlerts = async (
 	queryClient: QueryClient,
-	params: GetMetricAlertsParams,
+	{ metricName }: GetMetricAlertsPathParameters,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
-		{ queryKey: getGetMetricAlertsQueryKey(params) },
+		{ queryKey: getGetMetricAlertsQueryKey({ metricName }) },
 		options,
 	);
 
@@ -239,11 +248,12 @@ export const invalidateGetMetricAlerts = async (
  * @summary Get metric attributes
  */
 export const getMetricAttributes = (
-	params: GetMetricAttributesParams,
+	{ metricName }: GetMetricAttributesPathParameters,
+	params?: GetMetricAttributesParams,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<GetMetricAttributes200>({
-		url: `/api/v2/metrics/attributes`,
+		url: `/api/v2/metrics/${metricName}/attributes`,
 		method: 'GET',
 		params,
 		signal,
@@ -251,16 +261,21 @@ export const getMetricAttributes = (
 };
 
 export const getGetMetricAttributesQueryKey = (
+	{ metricName }: GetMetricAttributesPathParameters,
 	params?: GetMetricAttributesParams,
 ) => {
-	return [`/api/v2/metrics/attributes`, ...(params ? [params] : [])] as const;
+	return [
+		`/api/v2/metrics/${metricName}/attributes`,
+		...(params ? [params] : []),
+	] as const;
 };
 
 export const getGetMetricAttributesQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMetricAttributes>>,
 	TError = ErrorType<RenderErrorResponseDTO>,
 >(
-	params: GetMetricAttributesParams,
+	{ metricName }: GetMetricAttributesPathParameters,
+	params?: GetMetricAttributesParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricAttributes>>,
@@ -272,13 +287,19 @@ export const getGetMetricAttributesQueryOptions = <
 	const { query: queryOptions } = options ?? {};
 
 	const queryKey =
-		queryOptions?.queryKey ?? getGetMetricAttributesQueryKey(params);
+		queryOptions?.queryKey ??
+		getGetMetricAttributesQueryKey({ metricName }, params);
 
 	const queryFn: QueryFunction<
 		Awaited<ReturnType<typeof getMetricAttributes>>
-	> = ({ signal }) => getMetricAttributes(params, signal);
+	> = ({ signal }) => getMetricAttributes({ metricName }, params, signal);
 
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!metricName,
+		...queryOptions,
+	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getMetricAttributes>>,
 		TError,
 		TData
@@ -298,7 +319,8 @@ export function useGetMetricAttributes<
 	TData = Awaited<ReturnType<typeof getMetricAttributes>>,
 	TError = ErrorType<RenderErrorResponseDTO>,
 >(
-	params: GetMetricAttributesParams,
+	{ metricName }: GetMetricAttributesPathParameters,
+	params?: GetMetricAttributesParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricAttributes>>,
@@ -307,7 +329,11 @@ export function useGetMetricAttributes<
 		>;
 	},
 ): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetMetricAttributesQueryOptions(params, options);
+	const queryOptions = getGetMetricAttributesQueryOptions(
+		{ metricName },
+		params,
+		options,
+	);
 
 	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
 		queryKey: QueryKey;
@@ -321,11 +347,12 @@ export function useGetMetricAttributes<
  */
 export const invalidateGetMetricAttributes = async (
 	queryClient: QueryClient,
-	params: GetMetricAttributesParams,
+	{ metricName }: GetMetricAttributesPathParameters,
+	params?: GetMetricAttributesParams,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
-		{ queryKey: getGetMetricAttributesQueryKey(params) },
+		{ queryKey: getGetMetricAttributesQueryKey({ metricName }, params) },
 		options,
 	);
 
@@ -337,28 +364,27 @@ export const invalidateGetMetricAttributes = async (
  * @summary Get metric dashboards
  */
 export const getMetricDashboards = (
-	params: GetMetricDashboardsParams,
+	{ metricName }: GetMetricDashboardsPathParameters,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<GetMetricDashboards200>({
-		url: `/api/v2/metrics/dashboards`,
+		url: `/api/v2/metrics/${metricName}/dashboards`,
 		method: 'GET',
-		params,
 		signal,
 	});
 };
 
-export const getGetMetricDashboardsQueryKey = (
-	params?: GetMetricDashboardsParams,
-) => {
-	return [`/api/v2/metrics/dashboards`, ...(params ? [params] : [])] as const;
+export const getGetMetricDashboardsQueryKey = ({
+	metricName,
+}: GetMetricDashboardsPathParameters) => {
+	return [`/api/v2/metrics/${metricName}/dashboards`] as const;
 };
 
 export const getGetMetricDashboardsQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMetricDashboards>>,
 	TError = ErrorType<RenderErrorResponseDTO>,
 >(
-	params: GetMetricDashboardsParams,
+	{ metricName }: GetMetricDashboardsPathParameters,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricDashboards>>,
@@ -370,13 +396,18 @@ export const getGetMetricDashboardsQueryOptions = <
 	const { query: queryOptions } = options ?? {};
 
 	const queryKey =
-		queryOptions?.queryKey ?? getGetMetricDashboardsQueryKey(params);
+		queryOptions?.queryKey ?? getGetMetricDashboardsQueryKey({ metricName });
 
 	const queryFn: QueryFunction<
 		Awaited<ReturnType<typeof getMetricDashboards>>
-	> = ({ signal }) => getMetricDashboards(params, signal);
+	> = ({ signal }) => getMetricDashboards({ metricName }, signal);
 
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!metricName,
+		...queryOptions,
+	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getMetricDashboards>>,
 		TError,
 		TData
@@ -396,7 +427,7 @@ export function useGetMetricDashboards<
 	TData = Awaited<ReturnType<typeof getMetricDashboards>>,
 	TError = ErrorType<RenderErrorResponseDTO>,
 >(
-	params: GetMetricDashboardsParams,
+	{ metricName }: GetMetricDashboardsPathParameters,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricDashboards>>,
@@ -405,7 +436,10 @@ export function useGetMetricDashboards<
 		>;
 	},
 ): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetMetricDashboardsQueryOptions(params, options);
+	const queryOptions = getGetMetricDashboardsQueryOptions(
+		{ metricName },
+		options,
+	);
 
 	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
 		queryKey: QueryKey;
@@ -419,11 +453,11 @@ export function useGetMetricDashboards<
  */
 export const invalidateGetMetricDashboards = async (
 	queryClient: QueryClient,
-	params: GetMetricDashboardsParams,
+	{ metricName }: GetMetricDashboardsPathParameters,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
-		{ queryKey: getGetMetricDashboardsQueryKey(params) },
+		{ queryKey: getGetMetricDashboardsQueryKey({ metricName }) },
 		options,
 	);
 
@@ -435,28 +469,27 @@ export const invalidateGetMetricDashboards = async (
  * @summary Get metric highlights
  */
 export const getMetricHighlights = (
-	params: GetMetricHighlightsParams,
+	{ metricName }: GetMetricHighlightsPathParameters,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<GetMetricHighlights200>({
-		url: `/api/v2/metrics/highlights`,
+		url: `/api/v2/metrics/${metricName}/highlights`,
 		method: 'GET',
-		params,
 		signal,
 	});
 };
 
-export const getGetMetricHighlightsQueryKey = (
-	params?: GetMetricHighlightsParams,
-) => {
-	return [`/api/v2/metrics/highlights`, ...(params ? [params] : [])] as const;
+export const getGetMetricHighlightsQueryKey = ({
+	metricName,
+}: GetMetricHighlightsPathParameters) => {
+	return [`/api/v2/metrics/${metricName}/highlights`] as const;
 };
 
 export const getGetMetricHighlightsQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMetricHighlights>>,
 	TError = ErrorType<RenderErrorResponseDTO>,
 >(
-	params: GetMetricHighlightsParams,
+	{ metricName }: GetMetricHighlightsPathParameters,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricHighlights>>,
@@ -468,13 +501,18 @@ export const getGetMetricHighlightsQueryOptions = <
 	const { query: queryOptions } = options ?? {};
 
 	const queryKey =
-		queryOptions?.queryKey ?? getGetMetricHighlightsQueryKey(params);
+		queryOptions?.queryKey ?? getGetMetricHighlightsQueryKey({ metricName });
 
 	const queryFn: QueryFunction<
 		Awaited<ReturnType<typeof getMetricHighlights>>
-	> = ({ signal }) => getMetricHighlights(params, signal);
+	> = ({ signal }) => getMetricHighlights({ metricName }, signal);
 
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!metricName,
+		...queryOptions,
+	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getMetricHighlights>>,
 		TError,
 		TData
@@ -494,7 +532,7 @@ export function useGetMetricHighlights<
 	TData = Awaited<ReturnType<typeof getMetricHighlights>>,
 	TError = ErrorType<RenderErrorResponseDTO>,
 >(
-	params: GetMetricHighlightsParams,
+	{ metricName }: GetMetricHighlightsPathParameters,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricHighlights>>,
@@ -503,7 +541,10 @@ export function useGetMetricHighlights<
 		>;
 	},
 ): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetMetricHighlightsQueryOptions(params, options);
+	const queryOptions = getGetMetricHighlightsQueryOptions(
+		{ metricName },
+		options,
+	);
 
 	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
 		queryKey: QueryKey;
@@ -517,17 +558,219 @@ export function useGetMetricHighlights<
  */
 export const invalidateGetMetricHighlights = async (
 	queryClient: QueryClient,
-	params: GetMetricHighlightsParams,
+	{ metricName }: GetMetricHighlightsPathParameters,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
-		{ queryKey: getGetMetricHighlightsQueryKey(params) },
+		{ queryKey: getGetMetricHighlightsQueryKey({ metricName }) },
 		options,
 	);
 
 	return queryClient;
 };
 
+/**
+ * This endpoint returns metadata information like metric description, unit, type, temporality, monotonicity for a specified metric
+ * @summary Get metric metadata
+ */
+export const getMetricMetadata = (
+	{ metricName }: GetMetricMetadataPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetMetricMetadata200>({
+		url: `/api/v2/metrics/${metricName}/metadata`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetMetricMetadataQueryKey = ({
+	metricName,
+}: GetMetricMetadataPathParameters) => {
+	return [`/api/v2/metrics/${metricName}/metadata`] as const;
+};
+
+export const getGetMetricMetadataQueryOptions = <
+	TData = Awaited<ReturnType<typeof getMetricMetadata>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ metricName }: GetMetricMetadataPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getMetricMetadata>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetMetricMetadataQueryKey({ metricName });
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getMetricMetadata>>
+	> = ({ signal }) => getMetricMetadata({ metricName }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!metricName,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getMetricMetadata>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetMetricMetadataQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getMetricMetadata>>
+>;
+export type GetMetricMetadataQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get metric metadata
+ */
+
+export function useGetMetricMetadata<
+	TData = Awaited<ReturnType<typeof getMetricMetadata>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ metricName }: GetMetricMetadataPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getMetricMetadata>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetMetricMetadataQueryOptions({ metricName }, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Get metric metadata
+ */
+export const invalidateGetMetricMetadata = async (
+	queryClient: QueryClient,
+	{ metricName }: GetMetricMetadataPathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetMetricMetadataQueryKey({ metricName }) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * This endpoint helps to update metadata information like metric description, unit, type, temporality, monotonicity for a specified metric
+ * @summary Update metric metadata
+ */
+export const updateMetricMetadata = (
+	{ metricName }: UpdateMetricMetadataPathParameters,
+	metricsexplorertypesUpdateMetricMetadataRequestDTO?: BodyType<MetricsexplorertypesUpdateMetricMetadataRequestDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v2/metrics/${metricName}/metadata`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: metricsexplorertypesUpdateMetricMetadataRequestDTO,
+		signal,
+	});
+};
+
+export const getUpdateMetricMetadataMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateMetricMetadata>>,
+		TError,
+		{
+			pathParams: UpdateMetricMetadataPathParameters;
+			data?: BodyType<MetricsexplorertypesUpdateMetricMetadataRequestDTO>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof updateMetricMetadata>>,
+	TError,
+	{
+		pathParams: UpdateMetricMetadataPathParameters;
+		data?: BodyType<MetricsexplorertypesUpdateMetricMetadataRequestDTO>;
+	},
+	TContext
+> => {
+	const mutationKey = ['updateMetricMetadata'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof updateMetricMetadata>>,
+		{
+			pathParams: UpdateMetricMetadataPathParameters;
+			data?: BodyType<MetricsexplorertypesUpdateMetricMetadataRequestDTO>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return updateMetricMetadata(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type UpdateMetricMetadataMutationResult = NonNullable<
+	Awaited<ReturnType<typeof updateMetricMetadata>>
+>;
+export type UpdateMetricMetadataMutationBody =
+	| BodyType<MetricsexplorertypesUpdateMetricMetadataRequestDTO>
+	| undefined;
+export type UpdateMetricMetadataMutationError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Update metric metadata
+ */
+export const useUpdateMetricMetadata = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateMetricMetadata>>,
+		TError,
+		{
+			pathParams: UpdateMetricMetadataPathParameters;
+			data?: BodyType<MetricsexplorertypesUpdateMetricMetadataRequestDTO>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof updateMetricMetadata>>,
+	TError,
+	{
+		pathParams: UpdateMetricMetadataPathParameters;
+		data?: BodyType<MetricsexplorertypesUpdateMetricMetadataRequestDTO>;
+	},
+	TContext
+> => {
+	return useMutation(getUpdateMetricMetadataMutationOptions(options));
+};
 /**
  * Returns raw time series data points for a metric within a time range (max 30 minutes). Each series includes labels and timestamp/value pairs.
  * @summary Inspect raw metric data points
@@ -611,188 +854,6 @@ export const useInspectMetrics = <
 > => {
 	return useMutation(getInspectMetricsMutationOptions(options));
 };
-/**
- * This endpoint returns metadata information like metric description, unit, type, temporality, monotonicity for a specified metric
- * @summary Get metric metadata
- */
-export const getMetricMetadata = (
-	params: GetMetricMetadataParams,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetMetricMetadata200>({
-		url: `/api/v2/metrics/metadata`,
-		method: 'GET',
-		params,
-		signal,
-	});
-};
-
-export const getGetMetricMetadataQueryKey = (
-	params?: GetMetricMetadataParams,
-) => {
-	return [`/api/v2/metrics/metadata`, ...(params ? [params] : [])] as const;
-};
-
-export const getGetMetricMetadataQueryOptions = <
-	TData = Awaited<ReturnType<typeof getMetricMetadata>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	params: GetMetricMetadataParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getMetricMetadata>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ?? getGetMetricMetadataQueryKey(params);
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof getMetricMetadata>>
-	> = ({ signal }) => getMetricMetadata(params, signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof getMetricMetadata>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetMetricMetadataQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getMetricMetadata>>
->;
-export type GetMetricMetadataQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get metric metadata
- */
-
-export function useGetMetricMetadata<
-	TData = Awaited<ReturnType<typeof getMetricMetadata>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	params: GetMetricMetadataParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getMetricMetadata>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetMetricMetadataQueryOptions(params, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return { ...query, queryKey: queryOptions.queryKey };
-}
-
-/**
- * @summary Get metric metadata
- */
-export const invalidateGetMetricMetadata = async (
-	queryClient: QueryClient,
-	params: GetMetricMetadataParams,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetMetricMetadataQueryKey(params) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * This endpoint helps to update metadata information like metric description, unit, type, temporality, monotonicity for a specified metric
- * @summary Update metric metadata
- */
-export const updateMetricMetadata = (
-	metricsexplorertypesUpdateMetricMetadataRequestDTO?: BodyType<MetricsexplorertypesUpdateMetricMetadataRequestDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v2/metrics/metadata`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: metricsexplorertypesUpdateMetricMetadataRequestDTO,
-		signal,
-	});
-};
-
-export const getUpdateMetricMetadataMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateMetricMetadata>>,
-		TError,
-		{ data?: BodyType<MetricsexplorertypesUpdateMetricMetadataRequestDTO> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof updateMetricMetadata>>,
-	TError,
-	{ data?: BodyType<MetricsexplorertypesUpdateMetricMetadataRequestDTO> },
-	TContext
-> => {
-	const mutationKey = ['updateMetricMetadata'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof updateMetricMetadata>>,
-		{ data?: BodyType<MetricsexplorertypesUpdateMetricMetadataRequestDTO> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return updateMetricMetadata(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type UpdateMetricMetadataMutationResult = NonNullable<
-	Awaited<ReturnType<typeof updateMetricMetadata>>
->;
-export type UpdateMetricMetadataMutationBody =
-	| BodyType<MetricsexplorertypesUpdateMetricMetadataRequestDTO>
-	| undefined;
-export type UpdateMetricMetadataMutationError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Update metric metadata
- */
-export const useUpdateMetricMetadata = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateMetricMetadata>>,
-		TError,
-		{ data?: BodyType<MetricsexplorertypesUpdateMetricMetadataRequestDTO> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof updateMetricMetadata>>,
-	TError,
-	{ data?: BodyType<MetricsexplorertypesUpdateMetricMetadataRequestDTO> },
-	TContext
-> => {
-	return useMutation(getUpdateMetricMetadataMutationOptions(options));
-};
 /**
  * Lightweight endpoint that checks if any non-SigNoz metrics have been ingested, used for onboarding status detection
  * @summary Check if non-SigNoz metrics have been received

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

@@ -10370,14 +10370,9 @@ export type ListMetrics200 = {
 	status: string;
 };
 
-export type GetMetricAlertsParams = {
-	/**
-	 * @type string
-	 * @description The name of the metric. May contain slashes (e.g. cloud-provider metrics like run.googleapis.com/request_latencies).
-	 */
+export type GetMetricAlertsPathParameters = {
 	metricName: string;
 };
-
 export type GetMetricAlerts200 = {
 	data: MetricsexplorertypesMetricAlertsResponseDTO;
 	/**
@@ -10386,20 +10381,18 @@ export type GetMetricAlerts200 = {
 	status: string;
 };
 
+export type GetMetricAttributesPathParameters = {
+	metricName: string;
+};
 export type GetMetricAttributesParams = {
-	/**
-	 * @type string
-	 * @description The name of the metric. May contain slashes (e.g. cloud-provider metrics like run.googleapis.com/request_latencies).
-	 */
-	metricName: string;
 	/**
 	 * @type integer,null
-	 * @description Start of the time range as a Unix timestamp in milliseconds.
+	 * @description undefined
 	 */
 	start?: number | null;
 	/**
 	 * @type integer,null
-	 * @description End of the time range as a Unix timestamp in milliseconds.
+	 * @description undefined
 	 */
 	end?: number | null;
 };
@@ -10412,14 +10405,9 @@ export type GetMetricAttributes200 = {
 	status: string;
 };
 
-export type GetMetricDashboardsParams = {
-	/**
-	 * @type string
-	 * @description The name of the metric. May contain slashes (e.g. cloud-provider metrics like run.googleapis.com/request_latencies).
-	 */
+export type GetMetricDashboardsPathParameters = {
 	metricName: string;
 };
-
 export type GetMetricDashboards200 = {
 	data: MetricsexplorertypesMetricDashboardsResponseDTO;
 	/**
@@ -10428,14 +10416,9 @@ export type GetMetricDashboards200 = {
 	status: string;
 };
 
-export type GetMetricHighlightsParams = {
-	/**
-	 * @type string
-	 * @description The name of the metric. May contain slashes (e.g. cloud-provider metrics like run.googleapis.com/request_latencies).
-	 */
+export type GetMetricHighlightsPathParameters = {
 	metricName: string;
 };
-
 export type GetMetricHighlights200 = {
 	data: MetricsexplorertypesMetricHighlightsResponseDTO;
 	/**
@@ -10444,24 +10427,22 @@ export type GetMetricHighlights200 = {
 	status: string;
 };
 
-export type InspectMetrics200 = {
-	data: MetricsexplorertypesInspectMetricsResponseDTO;
+export type GetMetricMetadataPathParameters = {
+	metricName: string;
+};
+export type GetMetricMetadata200 = {
+	data: MetricsexplorertypesMetricMetadataDTO;
 	/**
 	 * @type string
 	 */
 	status: string;
 };
 
-export type GetMetricMetadataParams = {
-	/**
-	 * @type string
-	 * @description The name of the metric. May contain slashes (e.g. cloud-provider metrics like run.googleapis.com/request_latencies).
-	 */
+export type UpdateMetricMetadataPathParameters = {
 	metricName: string;
 };
-
-export type GetMetricMetadata200 = {
-	data: MetricsexplorertypesMetricMetadataDTO;
+export type InspectMetrics200 = {
+	data: MetricsexplorertypesInspectMetricsResponseDTO;
 	/**
 	 * @type string
 	 */

frontend/src/container/MetricsExplorer/Explorer/TimeSeries.tsx

@@ -191,6 +191,9 @@ function TimeSeries({
 		if (metrics[0] && yAxisUnit) {
 			updateMetricMetadata(
 				{
+					pathParams: {
+						metricName: metricNames[0],
+					},
 					data: buildUpdateMetricYAxisUnitPayload(
 						metricNames[0],
 						metrics[0],

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

@@ -48,14 +48,18 @@ function AllAttributes({
 		isLoading: isLoadingAttributes,
 		isError: isErrorAttributes,
 		refetch: refetchAttributes,
-	} = useGetMetricAttributes({
-		metricName,
-		start: minTime ? Math.floor(minTime / 1000000) : undefined,
-		end: maxTime ? Math.floor(maxTime / 1000000) : undefined,
-	});
+	} = useGetMetricAttributes(
+		{
+			metricName,
+		},
+		{
+			start: minTime ? Math.floor(minTime / 1000000) : undefined,
+			end: maxTime ? Math.floor(maxTime / 1000000) : undefined,
+		},
+	);
 
 	const attributes = useMemo(
-		() => attributesData?.data.attributes ?? [],
+		() => attributesData?.data?.attributes ?? [],
 		[attributesData],
 	);
 

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

@@ -237,6 +237,9 @@ function Metadata({
 	const handleSave = useCallback(() => {
 		updateMetricMetadata(
 			{
+				pathParams: {
+					metricName,
+				},
 				data: transformUpdateMetricMetadataRequest(metricName, metricMetadataState),
 			},
 			{

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

@@ -56,7 +56,7 @@ function MetricDetails({
 	);
 
 	const metadata = useMemo(() => {
-		if (!metricMetadataResponse) {
+		if (!metricMetadataResponse?.data) {
 			return null;
 		}
 		const { type, description, unit, temporality, isMonotonic } =

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

@@ -195,12 +195,14 @@ describe('Metadata', () => {
 		expect(mockUseUpdateMetricMetadata).toHaveBeenCalledWith(
 			expect.objectContaining({
 				data: expect.objectContaining({
-					metricName: MOCK_METRIC_NAME,
 					type: MetrictypesTypeDTO.sum,
 					temporality: MetrictypesTemporalityDTO.cumulative,
 					unit: 'By',
 					isMonotonic: true,
 				}),
+				pathParams: {
+					metricName: MOCK_METRIC_NAME,
+				},
 			}),
 			expect.objectContaining({
 				onSuccess: expect.any(Function),

frontend/src/hooks/useInlineOverflowCount.ts

@@ -1,117 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-interface UseInlineOverflowCountOptions {
-	itemCount: number;
-	/** Horizontal gap between items, in px. */
-	gap?: number;
-	/** Width kept free at the end of the line for a trailing "+N" trigger, in px. */
-	reserveWidth?: number;
-	/** Pause measuring (e.g. while expanded) without unmounting. */
-	enabled?: boolean;
-}
-
-interface UseInlineOverflowCountResult {
-	containerRef: React.RefObject<HTMLDivElement>;
-	visibleCount: number;
-	overflowCount: number;
-}
-
-/**
- * Measures how many of a container's children (each marked
- * `data-overflow-item="true"`) fit on a single line, reserving `reserveWidth`
- * for a trailing "+N" trigger. Item widths are cached, so children hidden with
- * `display: none` still count toward the fit; measuring pauses while `enabled`
- * is false.
- */
-export function useInlineOverflowCount({
-	itemCount,
-	gap = 8,
-	reserveWidth = 0,
-	enabled = true,
-}: UseInlineOverflowCountOptions): UseInlineOverflowCountResult {
-	const containerRef = useRef<HTMLDivElement>(null);
-	const [visibleCount, setVisibleCount] = useState(itemCount);
-	const itemWidthsRef = useRef<number[]>([]);
-	const enabledRef = useRef(enabled);
-	enabledRef.current = enabled;
-
-	useEffect(() => {
-		itemWidthsRef.current = [];
-		setVisibleCount(itemCount);
-	}, [itemCount]);
-
-	const measure = useCallback((): void => {
-		const container = containerRef.current;
-		if (!container || !enabledRef.current) {
-			return;
-		}
-		const itemElements = Array.from(container.children).filter(
-			(itemElement): itemElement is HTMLElement =>
-				itemElement instanceof HTMLElement &&
-				itemElement.dataset.overflowItem === 'true',
-		);
-		if (itemElements.length === 0) {
-			setVisibleCount(0);
-			return;
-		}
-
-		itemElements.forEach((itemElement, index) => {
-			if (itemElement.offsetWidth > 0) {
-				itemWidthsRef.current[index] = itemElement.offsetWidth;
-			}
-		});
-		const cachedWidths: number[] = [];
-		for (let index = 0; index < itemElements.length; index += 1) {
-			const cachedWidth = itemWidthsRef.current[index];
-			if (cachedWidth == null) {
-				// Width not cached yet — reveal everything for one frame so it gets
-				// measured, then the next pass collapses accurately.
-				setVisibleCount(itemElements.length);
-				return;
-			}
-			cachedWidths.push(cachedWidth);
-		}
-
-		const containerWidth = container.clientWidth;
-		const totalWidth = cachedWidths.reduce(
-			(runningTotal, itemWidth, index) =>
-				runningTotal + itemWidth + (index > 0 ? gap : 0),
-			0,
-		);
-		if (totalWidth <= containerWidth) {
-			setVisibleCount(itemElements.length);
-			return;
-		}
-
-		const availableWidth = containerWidth - reserveWidth;
-		let usedWidth = 0;
-		let fitCount = 0;
-		for (let index = 0; index < cachedWidths.length; index += 1) {
-			const itemWidthWithGap = cachedWidths[index] + (index > 0 ? gap : 0);
-			if (usedWidth + itemWidthWithGap > availableWidth && fitCount > 0) {
-				break;
-			}
-			usedWidth += itemWidthWithGap;
-			fitCount += 1;
-		}
-		setVisibleCount(Math.max(1, fitCount));
-	}, [gap, reserveWidth]);
-
-	useEffect(() => {
-		const container = containerRef.current;
-		if (!container) {
-			return undefined;
-		}
-		const observer = new ResizeObserver(() => measure());
-		observer.observe(container);
-		Array.from(container.children).forEach((child) => observer.observe(child));
-		measure();
-		return (): void => observer.disconnect();
-	}, [measure, itemCount, enabled]);
-
-	return {
-		containerRef,
-		visibleCount,
-		overflowCount: Math.max(0, itemCount - visibleCount),
-	};
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/DashboardActions/DashboardActions.module.scss

@@ -1,7 +1,11 @@
 .dashboardActionsContainer {
 	display: flex;
 	flex-wrap: wrap;
-	align-items: center;
 	justify-content: flex-end;
 	gap: 12px;
 }
+
+.dashboardActionsSecondary {
+	display: flex;
+	gap: 12px;
+}

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

@@ -1,42 +1,32 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { FullScreenHandle } from 'react-full-screen';
 import { useTranslation } from 'react-i18next';
-import { generatePath } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import {
-	Braces,
 	ClipboardCopy,
 	Configure,
-	Copy,
+	Ellipsis,
 	FileJson,
 	Fullscreen,
-	Grid3X3,
 	LockKeyhole,
 	PenLine,
 	Plus,
-	SquareStack,
 	Trash2,
 } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
 import type { MenuItem } from '@signozhq/ui/dropdown-menu';
 import { toast } from '@signozhq/ui/sonner';
-import { cloneDashboardV2 } from 'api/generated/services/dashboard';
 import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
 import ROUTES from 'constants/routes';
+import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import { useDeleteDashboard } from 'hooks/dashboard/useDeleteDashboard';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import history from 'lib/history';
 import { useAppContext } from 'providers/App/App';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
 import { USER_ROLES } from 'types/roles';
 
 import ConfirmDeleteDialog from '../../components/ConfirmDeleteDialog/ConfirmDeleteDialog';
 import DashboardSettings from '../../DashboardSettings';
-import { useAddSection } from '../../PanelsAndSectionsLayout/Section/hooks/useAddSection';
-import SectionTitleModal from '../../PanelsAndSectionsLayout/Section/SectionTitleModal';
-import JsonEditorDrawer from '../JsonEditorDrawer/JsonEditorDrawer';
 import SettingsDrawer from '../SettingsDrawer';
 import styles from './DashboardActions.module.scss';
 import { useDashboardStore } from '../../store/useDashboardStore';
@@ -65,31 +55,14 @@ function DashboardActions({
 	const canEdit = useDashboardStore((s) => s.isEditable);
 	const { user } = useAppContext();
 	const { t } = useTranslation(['dashboard', 'common']);
-	const { safeNavigate } = useSafeNavigate();
-	const { showErrorModal } = useErrorModal();
 
 	const [isSettingsDrawerOpen, setIsSettingsDrawerOpen] =
 		useState<boolean>(false);
-	const [isJsonEditorOpen, setIsJsonEditorOpen] = useState<boolean>(false);
-	const [isCloning, setIsCloning] = useState<boolean>(false);
-	const [isNewSectionOpen, setIsNewSectionOpen] = useState<boolean>(false);
 
 	const [state, setCopy] = useCopyToClipboard();
 	const [isDeleteOpen, setIsDeleteOpen] = useState<boolean>(false);
 	const deleteDashboardMutation = useDeleteDashboard(dashboard.id);
 
-	const { addSection, isSaving: isAddingSection } = useAddSection({
-		layouts: dashboard.spec.layouts,
-	});
-
-	const handleCreateSection = useCallback(
-		async (title: string): Promise<void> => {
-			await addSection(title);
-			setIsNewSectionOpen(false);
-		},
-		[addSection],
-	);
-
 	useEffect(() => {
 		if (state.error) {
 			toast.error(t('something_went_wrong', { ns: 'common' }));
@@ -116,24 +89,6 @@ function DashboardActions({
 		URL.revokeObjectURL(url);
 	}, [dashboardDataJSON, title]);
 
-	const handleClone = useCallback(async (): Promise<void> => {
-		if (!dashboard.id) {
-			return;
-		}
-		try {
-			setIsCloning(true);
-			const response = await cloneDashboardV2({ id: dashboard.id });
-			toast.success('Dashboard cloned');
-			safeNavigate(
-				generatePath(ROUTES.DASHBOARD, { dashboardId: response.data.id }),
-			);
-		} catch (error) {
-			showErrorModal(error as APIError);
-		} finally {
-			setIsCloning(false);
-		}
-	}, [dashboard.id, safeNavigate, showErrorModal]);
-
 	const handleConfirmDelete = useCallback((): void => {
 		deleteDashboardMutation.mutate(undefined, {
 			onSuccess: () => {
@@ -144,24 +99,17 @@ function DashboardActions({
 	}, [deleteDashboardMutation]);
 
 	const menuItems = useMemo<MenuItem[]>(() => {
-		const dashboardGroup: MenuItem[] = [];
+		const editGroup: MenuItem[] = [];
 		if (canEdit) {
-			dashboardGroup.push({
+			editGroup.push({
 				key: 'rename',
 				label: 'Rename',
 				icon: <PenLine size={14} />,
 				onClick: onOpenRename,
 			});
 		}
-		dashboardGroup.push({
-			key: 'clone',
-			label: 'Clone dashboard',
-			icon: <Copy size={14} />,
-			disabled: isCloning,
-			onClick: (): void => void handleClone(),
-		});
 		if (isAuthor || user.role === USER_ROLES.ADMIN) {
-			dashboardGroup.push({
+			editGroup.push({
 				key: 'lock',
 				label: isDashboardLocked ? 'Unlock dashboard' : 'Lock dashboard',
 				icon: <LockKeyhole size={14} />,
@@ -169,14 +117,14 @@ function DashboardActions({
 				onClick: onLockToggle,
 			});
 		}
-		dashboardGroup.push({
+		editGroup.push({
 			key: 'fullscreen',
 			label: 'Full screen',
 			icon: <Fullscreen size={14} />,
 			onClick: handle.enter,
 		});
 
-		const dataGroup: MenuItem[] = [
+		const exportGroup: MenuItem[] = [
 			{
 				key: 'export',
 				label: 'Export JSON',
@@ -191,35 +139,7 @@ function DashboardActions({
 			},
 		];
 
-		const layoutGroup: MenuItem[] = [];
-		if (canEdit) {
-			layoutGroup.push({
-				key: 'new-section',
-				label: 'New section',
-				icon: <SquareStack size={14} />,
-				onClick: (): void => setIsNewSectionOpen(true),
-			});
-		}
-
-		const items: MenuItem[] = [
-			{
-				type: 'group',
-				key: 'group-dashboard',
-				label: 'Dashboard',
-				children: dashboardGroup,
-			},
-			{ type: 'group', key: 'group-data', label: 'Data', children: dataGroup },
-		];
-		if (layoutGroup.length > 0) {
-			items.push({
-				type: 'group',
-				key: 'group-layout',
-				label: 'Layout',
-				children: layoutGroup,
-			});
-		}
-		items.push(
-			{ type: 'divider', key: 'divider-danger' },
+		const dangerGroup: MenuItem[] = [
 			{
 				key: 'delete',
 				label: 'Delete dashboard',
@@ -227,85 +147,74 @@ function DashboardActions({
 				danger: true,
 				onClick: (): void => setIsDeleteOpen(true),
 			},
-		);
-		return items;
+		];
+
+		return [editGroup, exportGroup, dangerGroup]
+			.filter((group) => group.length > 0)
+			.flatMap((group, index) =>
+				index > 0 ? [{ type: 'divider' } as MenuItem, ...group] : group,
+			);
 	}, [
-		canEdit,
-		isCloning,
+		isDashboardLocked,
 		isAuthor,
 		user.role,
-		isDashboardLocked,
 		dashboard.createdBy,
 		onOpenRename,
-		handleClone,
 		onLockToggle,
 		handle.enter,
 		exportJSON,
 		setCopy,
 		dashboardDataJSON,
+		canEdit,
 	]);
 
 	return (
 		<div className={styles.dashboardActionsContainer}>
-			<DropdownMenuSimple menu={{ items: menuItems }}>
-				<Button
-					variant="solid"
-					color="secondary"
-					size="md"
-					prefix={<Grid3X3 size="md" />}
-					testId="options"
-				>
-					Actions
-				</Button>
-			</DropdownMenuSimple>
-			{canEdit && (
-				<>
+			<DateTimeSelectionV2 showAutoRefresh hideShareModal />
+			<div className={styles.dashboardActionsSecondary}>
+				<DropdownMenuSimple menu={{ items: menuItems }}>
 					<Button
 						variant="solid"
 						color="secondary"
-						prefix={<Configure size="md" />}
-						testId="show-drawer"
-						onClick={(): void => setIsSettingsDrawerOpen(true)}
+						size="icon"
+						prefix={<Ellipsis size="md" />}
+						testId="options"
+					/>
+				</DropdownMenuSimple>
+				{canEdit && (
+					<>
+						<Button
+							variant="solid"
+							color="secondary"
+							prefix={<Configure size="md" />}
+							testId="show-drawer"
+							onClick={(): void => setIsSettingsDrawerOpen(true)}
+							size="md"
+						>
+							Configure
+						</Button>
+						<SettingsDrawer
+							drawerTitle="Dashboard Configuration"
+							isOpen={isSettingsDrawerOpen}
+							onClose={(): void => setIsSettingsDrawerOpen(false)}
+						>
+							<DashboardSettings dashboard={dashboard} />
+						</SettingsDrawer>
+					</>
+				)}
+				{!isDashboardLocked && (
+					<Button
+						variant="solid"
+						color="primary"
+						onClick={onAddPanel}
+						prefix={<Plus size="md" />}
+						testId="add-panel-header"
 						size="md"
 					>
-						Configure
+						New Panel
 					</Button>
-					<SettingsDrawer
-						drawerTitle="Dashboard Configuration"
-						isOpen={isSettingsDrawerOpen}
-						onClose={(): void => setIsSettingsDrawerOpen(false)}
-					>
-						<DashboardSettings dashboard={dashboard} />
-					</SettingsDrawer>
-				</>
-			)}
-			<Button
-				variant="solid"
-				color="secondary"
-				prefix={<Braces size="md" />}
-				testId="edit-json"
-				onClick={(): void => setIsJsonEditorOpen(true)}
-				size="md"
-			>
-				Edit as JSON
-			</Button>
-			{!isDashboardLocked && (
-				<Button
-					variant="solid"
-					color="primary"
-					onClick={onAddPanel}
-					prefix={<Plus size="md" />}
-					testId="add-panel-header"
-					size="md"
-				>
-					New Panel
-				</Button>
-			)}
-			<JsonEditorDrawer
-				dashboard={dashboard}
-				isOpen={isJsonEditorOpen}
-				onClose={(): void => setIsJsonEditorOpen(false)}
-			/>
+				)}
+			</div>
 			<ConfirmDeleteDialog
 				open={isDeleteOpen}
 				title={`Delete dashboard"?`}
@@ -314,15 +223,6 @@ function DashboardActions({
 				onConfirm={handleConfirmDelete}
 				onClose={(): void => setIsDeleteOpen(false)}
 			/>
-			<SectionTitleModal
-				open={isNewSectionOpen}
-				heading="New section"
-				okText="Create section"
-				initialValue=""
-				isSaving={isAddingSection}
-				onClose={(): void => setIsNewSectionOpen(false)}
-				onSubmit={handleCreateSection}
-			/>
 		</div>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/DashboardInfo/DashboardInfo.module.scss

@@ -1,9 +1,19 @@
 .dashboardInfo {
 	display: flex;
-	flex: 1;
+	flex-direction: column;
+	gap: 8px;
+	width: 40%;
+
+	@media (min-width: 1280px) {
+		width: 30%;
+	}
+}
+
+.dashboardTitleContainer {
+	display: flex;
 	align-items: center;
 	gap: 8px;
-	min-width: 0;
+	width: 100%;
 }
 
 .dashboardImage {
@@ -11,8 +21,9 @@
 }
 
 .dashboardTitle {
-	flex: 0 1 auto;
+	flex: 1;
 	min-width: 0;
+	max-width: fit-content;
 	color: var(--l1-foreground);
 	font-size: 18px;
 	font-weight: 500;
@@ -26,19 +37,6 @@
 	cursor: text !important;
 }
 
-.descriptionIcon {
-	flex-shrink: 0;
-	color: var(--l2-foreground);
-	cursor: help;
-}
-
-.divider {
-	flex-shrink: 0;
-	width: 1px;
-	height: 18px;
-	background: var(--l2-border);
-}
-
 .dashboardTitleEditor {
 	display: flex;
 	align-items: center;
@@ -56,13 +54,8 @@
 	flex-shrink: 0;
 }
 
-/* Flexes into the remaining space and clips so the ResizeObserver can measure
-   how many tags fit before collapsing the rest into a `+N` badge. */
 .dashboardTags {
 	display: flex;
-	flex: 1 1 0;
-	align-items: center;
-	gap: 4px;
-	min-width: 0;
-	overflow: hidden;
+	flex-wrap: wrap;
+	gap: 8px;
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/DashboardInfo/DashboardInfo.tsx

@@ -1,5 +1,5 @@
 import { KeyboardEvent } from 'react';
-import { Check, Globe, LockKeyhole, SolidInfoCircle, X } from '@signozhq/icons';
+import { Check, Globe, LockKeyhole, X } from '@signozhq/icons';
 import { Badge } from '@signozhq/ui/badge';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
@@ -9,7 +9,6 @@ import cx from 'classnames';
 import { isEmpty } from 'lodash-es';
 
 import styles from './DashboardInfo.module.scss';
-import { useVisibleTagCount } from './useVisibleTagCount';
 import { useDashboardStore } from '../../store/useDashboardStore';
 
 interface DashboardInfoProps {
@@ -46,11 +45,6 @@ function DashboardInfo({
 	const hasTags = tags.length > 0;
 	const hasDescription = !isEmpty(description);
 
-	const { containerRef, visibleCount } = useVisibleTagCount(tags);
-	const needsOverflow = tags.length > visibleCount;
-	const visibleTags = needsOverflow ? tags.slice(0, visibleCount) : tags;
-	const remainingTags = needsOverflow ? tags.slice(visibleCount) : [];
-
 	const onKeyDown = (event: KeyboardEvent<HTMLInputElement>): void => {
 		if (event.key === 'Enter') {
 			event.preventDefault();
@@ -62,106 +56,83 @@ function DashboardInfo({
 
 	return (
 		<div className={styles.dashboardInfo}>
-			<img src={image} alt={title} className={styles.dashboardImage} />
+			<div className={styles.dashboardTitleContainer}>
+				<img src={image} alt={title} className={styles.dashboardImage} />
+				{isEditing ? (
+					<div className={styles.dashboardTitleEditor}>
+						<Input
+							autoFocus
+							value={draft}
+							testId="dashboard-title-input"
+							maxLength={120}
+							className={styles.dashboardTitleInput}
+							onChange={(e): void => onDraftChange(e.target.value)}
+							onKeyDown={onKeyDown}
+						/>
+						<Button
+							type="button"
+							variant="outlined"
+							color="primary"
+							size="icon"
+							className={styles.dashboardTitleActionButton}
+							aria-label="Save title"
+							testId="dashboard-title-save"
+							onClick={onCommit}
+						>
+							<Check size={14} />
+						</Button>
+						<Button
+							type="button"
+							variant="outlined"
+							color="secondary"
+							size="icon"
+							className={styles.dashboardTitleActionButton}
+							aria-label="Cancel title edit"
+							testId="dashboard-title-cancel"
+							onClick={onCancel}
+						>
+							<X size={14} />
+						</Button>
+					</div>
+				) : (
+					<TooltipSimple title={title}>
+						<Typography.Text
+							className={cx(styles.dashboardTitle, {
+								[styles.dashboardTitleHover]: canEdit,
+							})}
+							data-testid="dashboard-title"
+							onClick={canEdit ? onStartEdit : undefined}
+						>
+							{title}
+						</Typography.Text>
+					</TooltipSimple>
+				)}
 
-			{isEditing ? (
-				<div className={styles.dashboardTitleEditor}>
-					<Input
-						autoFocus
-						value={draft}
-						testId="dashboard-title-input"
-						maxLength={120}
-						className={styles.dashboardTitleInput}
-						onChange={(e): void => onDraftChange(e.target.value)}
-						onKeyDown={onKeyDown}
-					/>
-					<Button
-						type="button"
-						variant="outlined"
-						color="primary"
-						size="icon"
-						className={styles.dashboardTitleActionButton}
-						aria-label="Save title"
-						testId="dashboard-title-save"
-						onClick={onCommit}
-					>
-						<Check size={14} />
-					</Button>
-					<Button
-						type="button"
-						variant="outlined"
-						color="secondary"
-						size="icon"
-						className={styles.dashboardTitleActionButton}
-						aria-label="Cancel title edit"
-						testId="dashboard-title-cancel"
-						onClick={onCancel}
-					>
-						<X size={14} />
-					</Button>
+				{isPublicDashboard && (
+					<TooltipSimple title="This dashboard is publicly accessible">
+						<Globe size={14} />
+					</TooltipSimple>
+				)}
+
+				{isDashboardLocked && (
+					<TooltipSimple title="This dashboard is locked">
+						<LockKeyhole size={14} />
+					</TooltipSimple>
+				)}
+			</div>
+
+			{hasTags && (
+				<div className={styles.dashboardTags}>
+					{tags.map((tag) => (
+						<Badge key={tag} color="warning" variant="outline">
+							{tag}
+						</Badge>
+					))}
 				</div>
-			) : (
-				<TooltipSimple title={title}>
-					<Typography.Text
-						className={cx(styles.dashboardTitle, {
-							[styles.dashboardTitleHover]: canEdit,
-						})}
-						data-testid="dashboard-title"
-						onClick={canEdit ? onStartEdit : undefined}
-					>
-						{title}
-					</Typography.Text>
-				</TooltipSimple>
 			)}
 
 			{hasDescription && (
-				<TooltipSimple title={description}>
-					<SolidInfoCircle
-						className={styles.descriptionIcon}
-						size={14}
-						data-testid="dashboard-description-info"
-					/>
-				</TooltipSimple>
-			)}
-
-			{isPublicDashboard && (
-				<TooltipSimple title="This dashboard is publicly accessible">
-					<Globe size={14} />
-				</TooltipSimple>
-			)}
-
-			{isDashboardLocked && (
-				<TooltipSimple title="This dashboard is locked">
-					<LockKeyhole size={14} />
-				</TooltipSimple>
-			)}
-
-			{hasTags && (
-				<>
-					<span className={styles.divider} />
-					<div
-						ref={containerRef}
-						className={styles.dashboardTags}
-						data-testid="dashboard-tags"
-					>
-						{visibleTags.map((tag) => (
-							<Badge key={tag} color="warning" variant="outline">
-								{tag}
-							</Badge>
-						))}
-						{remainingTags.length > 0 && (
-							<TooltipSimple title={remainingTags.join(', ')}>
-								<Badge
-									color="warning"
-									variant="outline"
-									data-testid="dashboard-tags-overflow"
-								>
-									+{remainingTags.length}
-								</Badge>
-							</TooltipSimple>
-						)}
-					</div>
-				</>
+				<Typography.Text color="muted">{description}</Typography.Text>
 			)}
 		</div>
 	);

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/DashboardInfo/useVisibleTagCount.ts

@@ -1,62 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import {
-	BADGE_GAP,
-	estimateBadgeWidth,
-	OVERFLOW_BADGE_WIDTH,
-} from 'components/Alerts/LabelColumn/utils';
-
-interface Result {
-	containerRef: React.RefObject<HTMLDivElement>;
-	visibleCount: number;
-}
-
-/**
- * Measures how many tags fit in the container and returns the visible count,
- * reserving room for the `+N` overflow badge. Reuses the badge-width estimation
- * from the alerts LabelColumn so dashboards and alerts overflow identically.
- */
-export function useVisibleTagCount(tags: string[]): Result {
-	const containerRef = useRef<HTMLDivElement>(null);
-	const [visibleCount, setVisibleCount] = useState(tags.length);
-
-	const calculateVisible = useCallback(
-		(width: number): number => {
-			if (width <= 0) {
-				return 1;
-			}
-			const availableWidth = width - OVERFLOW_BADGE_WIDTH - BADGE_GAP;
-			let usedWidth = 0;
-			let count = 0;
-			for (const tag of tags) {
-				const badgeWidth = estimateBadgeWidth(tag) + BADGE_GAP;
-				if (usedWidth + badgeWidth > availableWidth && count > 0) {
-					break;
-				}
-				usedWidth += badgeWidth;
-				count += 1;
-			}
-			return Math.max(1, count);
-		},
-		[tags],
-	);
-
-	useEffect(() => {
-		const container = containerRef.current;
-		if (!container) {
-			return undefined;
-		}
-		const observer = new ResizeObserver((entries) => {
-			const entry = entries[0];
-			if (entry && entry.contentRect.width > 0) {
-				setVisibleCount(calculateVisible(entry.contentRect.width));
-			}
-		});
-		observer.observe(container);
-		if (container.clientWidth > 0) {
-			setVisibleCount(calculateVisible(container.clientWidth));
-		}
-		return (): void => observer.disconnect();
-	}, [calculateVisible]);
-
-	return { containerRef, visibleCount };
-}

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

@@ -5,9 +5,7 @@
 	color: var(--l2-foreground);
 	background-color: var(--l1-background);
 	padding: 16px;
-	box-shadow:
-		0 1px 0 0 var(--l2-border),
-		0 6px 12px -10px var(--l2-border);
+	box-shadow: 0 2px 2px 0px var(--l2-border);
 }
 
 .dashboardPageToolbarSubContainer {
@@ -18,22 +16,5 @@
 	display: flex;
 	align-items: flex-start;
 	justify-content: space-between;
-	gap: 16px;
 	width: 100%;
 }
-
-.toolbarRow2 {
-	width: 100%;
-	margin-top: 12px;
-
-	&::after {
-		display: block;
-		clear: both;
-		content: '';
-	}
-}
-
-.timeCluster {
-	float: right;
-	margin: 0 0 0 16px;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/JsonEditorDrawer/JsonEditorDrawer.module.scss

@@ -1,72 +0,0 @@
-.root {
-	:global(.ant-drawer-wrapper-body) {
-		border-left: 1px solid var(--l1-border);
-		background: var(--l2-background);
-	}
-
-	:global(.ant-drawer-header) {
-		height: 48px;
-		border-bottom: 1px solid var(--l1-border);
-
-		:global(.ant-drawer-title) {
-			color: var(--l2-foreground);
-			font-family: Inter;
-			font-size: 14px;
-			font-weight: 500;
-		}
-	}
-
-	:global(.ant-drawer-body) {
-		padding: 0;
-		display: flex;
-		min-height: 0;
-	}
-
-	:global(.ant-drawer-footer) {
-		padding: 12px 16px;
-		border-top: 1px solid var(--l1-border);
-	}
-}
-
-.body {
-	display: flex;
-	flex: 1;
-	min-width: 0;
-	min-height: 0;
-	flex-direction: column;
-}
-
-.editor {
-	flex: 1;
-	min-height: 0;
-}
-
-.footer {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 12px;
-}
-
-.validation {
-	min-width: 0;
-	overflow: hidden;
-	font-family: 'Space Mono', monospace;
-	font-size: 12px;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.validationValid {
-	color: var(--bg-forest-400);
-}
-
-.validationInvalid {
-	color: var(--bg-cherry-400);
-}
-
-.footerActions {
-	display: flex;
-	flex-shrink: 0;
-	gap: 8px;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/JsonEditorDrawer/JsonEditorDrawer.tsx

@@ -1,141 +0,0 @@
-import { KeyboardEvent, useCallback } from 'react';
-import MEditor from '@monaco-editor/react';
-import { Button } from '@signozhq/ui/button';
-import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
-import { Drawer } from 'antd';
-import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
-import { useCopyToClipboard } from 'react-use';
-import { toast } from '@signozhq/ui/sonner';
-
-import { defineJsonEditorTheme, JSON_EDITOR_THEME } from './editorTheme';
-import styles from './JsonEditorDrawer.module.scss';
-import JsonEditorToolbar from './JsonEditorToolbar';
-import { useJsonEditor } from './useJsonEditor';
-
-interface JsonEditorDrawerProps {
-	dashboard: DashboardtypesGettableDashboardV2DTO;
-	isOpen: boolean;
-	onClose: () => void;
-}
-
-function JsonEditorDrawer({
-	dashboard,
-	isOpen,
-	onClose,
-}: JsonEditorDrawerProps): JSX.Element {
-	const [, copyToClipboard] = useCopyToClipboard();
-
-	const { draft, setDraft, validity, isDirty, isSaving, format, reset, apply } =
-		useJsonEditor({ dashboard, isOpen, onApplied: onClose });
-
-	const onCopy = useCallback((): void => {
-		copyToClipboard(draft);
-		toast.success('JSON copied to clipboard');
-	}, [copyToClipboard, draft]);
-
-	const onDownload = useCallback((): void => {
-		const blob = new Blob([draft], { type: 'application/json' });
-		const url = URL.createObjectURL(blob);
-		const link = document.createElement('a');
-		link.href = url;
-		link.download = `${dashboard.name || 'dashboard'}.json`;
-		document.body.appendChild(link);
-		link.click();
-		document.body.removeChild(link);
-		URL.revokeObjectURL(url);
-	}, [draft, dashboard.name]);
-
-	const onKeyDown = useCallback(
-		(event: KeyboardEvent<HTMLDivElement>): void => {
-			if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
-				event.preventDefault();
-				void apply();
-			}
-		},
-		[apply],
-	);
-
-	const applyDisabled = !isDirty || !validity.valid || isSaving;
-	const validationText = validity.valid
-		? `Valid JSON · ${validity.lineCount} lines`
-		: `Line ${validity.errorLine ?? '?'} · ${validity.message ?? 'Invalid JSON'}`;
-
-	return (
-		<Drawer
-			title="Dashboard JSON"
-			placement="right"
-			width={660}
-			onClose={onClose}
-			open={isOpen}
-			rootClassName={styles.root}
-			footer={
-				<div className={styles.footer}>
-					<Typography.Text
-						className={cx(styles.validation, {
-							[styles.validationValid]: validity.valid,
-							[styles.validationInvalid]: !validity.valid,
-						})}
-						data-testid="json-editor-validation"
-					>
-						{validationText}
-					</Typography.Text>
-					<div className={styles.footerActions}>
-						<Button
-							variant="outlined"
-							color="secondary"
-							size="md"
-							testId="json-editor-cancel"
-							onClick={onClose}
-						>
-							Cancel
-						</Button>
-						<Button
-							variant="solid"
-							color="primary"
-							size="md"
-							testId="json-editor-apply"
-							disabled={applyDisabled}
-							onClick={(): void => void apply()}
-						>
-							Apply changes
-						</Button>
-					</div>
-				</div>
-			}
-		>
-			{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
-			<div className={styles.body} onKeyDown={onKeyDown}>
-				<JsonEditorToolbar
-					isDirty={isDirty}
-					onFormat={format}
-					onCopy={onCopy}
-					onDownload={onDownload}
-					onReset={reset}
-				/>
-				<div className={styles.editor}>
-					<MEditor
-						language="json"
-						height="100%"
-						value={draft}
-						onChange={(value): void => setDraft(value ?? '')}
-						options={{
-							scrollbar: { alwaysConsumeMouseWheel: false },
-							minimap: { enabled: false },
-							fontSize: 13,
-							fontFamily: 'Space Mono',
-						}}
-						theme="vs-dark"
-						onMount={(editor, monaco): void => {
-							defineJsonEditorTheme(monaco, editor.getContainerDomNode());
-							monaco.editor.setTheme(JSON_EDITOR_THEME);
-							void document.fonts.ready.then(() => monaco.editor.remeasureFonts());
-						}}
-					/>
-				</div>
-			</div>
-		</Drawer>
-	);
-}
-
-export default JsonEditorDrawer;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/JsonEditorDrawer/JsonEditorToolbar.module.scss

@@ -1,12 +0,0 @@
-.toolbar {
-	display: flex;
-	align-items: center;
-	gap: 4px;
-	padding: 8px 12px;
-	border-bottom: 1px solid var(--l1-border);
-	background: var(--l1-background);
-}
-
-.spacer {
-	flex: 1;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/JsonEditorDrawer/JsonEditorToolbar.tsx

@@ -1,69 +0,0 @@
-import { AlignLeft, Copy, Download, RotateCcw } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-
-import styles from './JsonEditorToolbar.module.scss';
-
-interface JsonEditorToolbarProps {
-	isDirty: boolean;
-	onFormat: () => void;
-	onCopy: () => void;
-	onDownload: () => void;
-	onReset: () => void;
-}
-
-function JsonEditorToolbar({
-	isDirty,
-	onFormat,
-	onCopy,
-	onDownload,
-	onReset,
-}: JsonEditorToolbarProps): JSX.Element {
-	return (
-		<div className={styles.toolbar}>
-			<Button
-				variant="ghost"
-				color="secondary"
-				size="sm"
-				prefix={<AlignLeft size={14} />}
-				testId="json-editor-format"
-				onClick={onFormat}
-			>
-				Format
-			</Button>
-			<Button
-				variant="ghost"
-				color="secondary"
-				size="sm"
-				prefix={<Copy size={14} />}
-				testId="json-editor-copy"
-				onClick={onCopy}
-			>
-				Copy
-			</Button>
-			<Button
-				variant="ghost"
-				color="secondary"
-				size="sm"
-				prefix={<Download size={14} />}
-				testId="json-editor-download"
-				onClick={onDownload}
-			>
-				Download
-			</Button>
-			<div className={styles.spacer} />
-			<Button
-				variant="ghost"
-				color="secondary"
-				size="sm"
-				prefix={<RotateCcw size={14} />}
-				testId="json-editor-reset"
-				disabled={!isDirty}
-				onClick={onReset}
-			>
-				Reset
-			</Button>
-		</div>
-	);
-}
-
-export default JsonEditorToolbar;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/JsonEditorDrawer/__tests__/JsonEditorDrawer.test.tsx

@@ -1,165 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
-
-import JsonEditorDrawer from '../JsonEditorDrawer';
-import { useJsonEditor } from '../useJsonEditor';
-
-jest.mock('../useJsonEditor', () => ({ useJsonEditor: jest.fn() }));
-
-jest.mock('@monaco-editor/react', () => ({
-	__esModule: true,
-	default: ({
-		value,
-		onChange,
-	}: {
-		value: string;
-		onChange: (next?: string) => void;
-	}): JSX.Element => (
-		<textarea
-			aria-label="json-editor"
-			data-testid="monaco"
-			value={value}
-			onChange={(e): void => onChange(e.target.value)}
-		/>
-	),
-}));
-
-jest.mock('@signozhq/ui/sonner', () => ({
-	toast: { success: jest.fn(), error: jest.fn() },
-}));
-
-jest.mock('react-use', () => ({
-	useCopyToClipboard: (): [unknown, jest.Mock] => [{}, jest.fn()],
-}));
-
-const mockUseJsonEditor = useJsonEditor as jest.Mock;
-
-const dashboard = {
-	id: 'dash-1',
-	name: 'My dashboard',
-} as unknown as DashboardtypesGettableDashboardV2DTO;
-
-function hookValue(
-	overrides: Partial<ReturnType<typeof useJsonEditor>> = {},
-): ReturnType<typeof useJsonEditor> {
-	return {
-		draft: '{\n  "a": 1\n}',
-		setDraft: jest.fn(),
-		validity: { valid: true, lineCount: 3 },
-		isDirty: true,
-		isSaving: false,
-		format: jest.fn(),
-		reset: jest.fn(),
-		apply: jest.fn().mockResolvedValue(undefined),
-		...overrides,
-	};
-}
-
-describe('JsonEditorDrawer', () => {
-	beforeEach(() => jest.clearAllMocks());
-
-	it('renders the toolbar, editor and footer actions when open', () => {
-		mockUseJsonEditor.mockReturnValue(hookValue());
-		render(<JsonEditorDrawer dashboard={dashboard} isOpen onClose={jest.fn()} />);
-
-		expect(screen.getByTestId('json-editor-format')).toBeInTheDocument();
-		expect(screen.getByTestId('json-editor-copy')).toBeInTheDocument();
-		expect(screen.getByTestId('json-editor-download')).toBeInTheDocument();
-		expect(screen.getByTestId('json-editor-reset')).toBeInTheDocument();
-		expect(screen.getByTestId('json-editor-apply')).toBeInTheDocument();
-		expect(screen.getByTestId('monaco')).toBeInTheDocument();
-	});
-
-	it('shows a valid status with the line count', () => {
-		mockUseJsonEditor.mockReturnValue(
-			hookValue({ validity: { valid: true, lineCount: 12 } }),
-		);
-		render(<JsonEditorDrawer dashboard={dashboard} isOpen onClose={jest.fn()} />);
-
-		expect(screen.getByTestId('json-editor-validation')).toHaveTextContent(
-			'Valid JSON · 12 lines',
-		);
-	});
-
-	it('shows the error line and message when invalid', () => {
-		mockUseJsonEditor.mockReturnValue(
-			hookValue({
-				validity: {
-					valid: false,
-					lineCount: 4,
-					errorLine: 3,
-					message: 'Unexpected token',
-				},
-			}),
-		);
-		render(<JsonEditorDrawer dashboard={dashboard} isOpen onClose={jest.fn()} />);
-
-		expect(screen.getByTestId('json-editor-validation')).toHaveTextContent(
-			'Line 3 · Unexpected token',
-		);
-	});
-
-	it('disables Apply when not dirty, invalid, or saving', () => {
-		mockUseJsonEditor.mockReturnValue(hookValue({ isDirty: false }));
-		const { rerender } = render(
-			<JsonEditorDrawer dashboard={dashboard} isOpen onClose={jest.fn()} />,
-		);
-		expect(screen.getByTestId('json-editor-apply')).toBeDisabled();
-
-		mockUseJsonEditor.mockReturnValue(
-			hookValue({ validity: { valid: false, lineCount: 1 } }),
-		);
-		rerender(
-			<JsonEditorDrawer dashboard={dashboard} isOpen onClose={jest.fn()} />,
-		);
-		expect(screen.getByTestId('json-editor-apply')).toBeDisabled();
-
-		mockUseJsonEditor.mockReturnValue(hookValue({ isSaving: true }));
-		rerender(
-			<JsonEditorDrawer dashboard={dashboard} isOpen onClose={jest.fn()} />,
-		);
-		expect(screen.getByTestId('json-editor-apply')).toBeDisabled();
-	});
-
-	it('wires toolbar and footer buttons to the hook callbacks', () => {
-		const value = hookValue();
-		mockUseJsonEditor.mockReturnValue(value);
-		const onClose = jest.fn();
-		render(<JsonEditorDrawer dashboard={dashboard} isOpen onClose={onClose} />);
-
-		fireEvent.click(screen.getByTestId('json-editor-format'));
-		expect(value.format).toHaveBeenCalled();
-
-		fireEvent.click(screen.getByTestId('json-editor-reset'));
-		expect(value.reset).toHaveBeenCalled();
-
-		fireEvent.click(screen.getByTestId('json-editor-apply'));
-		expect(value.apply).toHaveBeenCalled();
-
-		fireEvent.click(screen.getByTestId('json-editor-cancel'));
-		expect(onClose).toHaveBeenCalled();
-	});
-
-	it('forwards editor changes to setDraft', () => {
-		const value = hookValue();
-		mockUseJsonEditor.mockReturnValue(value);
-		render(<JsonEditorDrawer dashboard={dashboard} isOpen onClose={jest.fn()} />);
-
-		fireEvent.change(screen.getByTestId('monaco'), {
-			target: { value: '{"b":2}' },
-		});
-		expect(value.setDraft).toHaveBeenCalledWith('{"b":2}');
-	});
-
-	it('applies on Cmd/Ctrl+Enter', () => {
-		const value = hookValue();
-		mockUseJsonEditor.mockReturnValue(value);
-		render(<JsonEditorDrawer dashboard={dashboard} isOpen onClose={jest.fn()} />);
-
-		fireEvent.keyDown(screen.getByTestId('monaco'), {
-			key: 'Enter',
-			metaKey: true,
-		});
-		expect(value.apply).toHaveBeenCalled();
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/JsonEditorDrawer/__tests__/useJsonEditor.test.tsx

@@ -1,179 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import { updateDashboardV2 } from 'api/generated/services/dashboard';
-import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
-import { toast } from '@signozhq/ui/sonner';
-
-import { useJsonEditor } from '../useJsonEditor';
-
-const mockRefetch = jest.fn();
-const mockShowErrorModal = jest.fn();
-
-jest.mock('../../../store/useDashboardStore', () => ({
-	useDashboardStore: (selector: (state: unknown) => unknown): unknown =>
-		selector({ dashboardId: 'dash-1', refetch: mockRefetch }),
-}));
-
-jest.mock('providers/ErrorModalProvider', () => ({
-	useErrorModal: (): { showErrorModal: jest.Mock } => ({
-		showErrorModal: mockShowErrorModal,
-	}),
-}));
-
-jest.mock('api/generated/services/dashboard', () => ({
-	updateDashboardV2: jest.fn(),
-}));
-
-jest.mock('@signozhq/ui/sonner', () => ({
-	toast: { success: jest.fn(), error: jest.fn() },
-}));
-
-const mockUpdate = updateDashboardV2 as jest.Mock;
-const mockToastSuccess = toast.success as jest.Mock;
-
-const dashboard = {
-	id: 'dash-1',
-	name: 'My dashboard',
-	schemaVersion: 'v6',
-	image: 'icon.png',
-	tags: [{ key: 'env', value: 'prod' }],
-	spec: {
-		display: { name: 'My dashboard' },
-		panels: {},
-		layouts: [],
-		variables: [],
-	},
-} as unknown as DashboardtypesGettableDashboardV2DTO;
-
-const serialized = JSON.stringify(dashboard, null, 2);
-
-describe('useJsonEditor', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockUpdate.mockResolvedValue({});
-	});
-
-	it('seeds the draft from the dashboard and reports valid, non-dirty state', () => {
-		const { result } = renderHook(() =>
-			useJsonEditor({ dashboard, isOpen: true, onApplied: jest.fn() }),
-		);
-
-		expect(result.current.draft).toBe(serialized);
-		expect(result.current.isDirty).toBe(false);
-		expect(result.current.validity.valid).toBe(true);
-		expect(result.current.validity.lineCount).toBe(serialized.split('\n').length);
-	});
-
-	it('flags invalid JSON with a line number and marks the draft dirty', () => {
-		const { result } = renderHook(() =>
-			useJsonEditor({ dashboard, isOpen: true, onApplied: jest.fn() }),
-		);
-
-		act(() => result.current.setDraft('{\n  "name": ,\n}'));
-
-		expect(result.current.validity.valid).toBe(false);
-		expect(result.current.validity.message).toBeDefined();
-		expect(result.current.isDirty).toBe(true);
-	});
-
-	it('format() pretty-prints valid JSON and leaves invalid JSON untouched', () => {
-		const { result } = renderHook(() =>
-			useJsonEditor({ dashboard, isOpen: true, onApplied: jest.fn() }),
-		);
-
-		act(() => result.current.setDraft('{"a":1}'));
-		act(() => result.current.format());
-		expect(result.current.draft).toBe('{\n  "a": 1\n}');
-
-		act(() => result.current.setDraft('{bad'));
-		act(() => result.current.format());
-		expect(result.current.draft).toBe('{bad');
-	});
-
-	it('reset() restores the last-applied text', () => {
-		const { result } = renderHook(() =>
-			useJsonEditor({ dashboard, isOpen: true, onApplied: jest.fn() }),
-		);
-
-		act(() => result.current.setDraft('edited'));
-		expect(result.current.isDirty).toBe(true);
-
-		act(() => result.current.reset());
-		expect(result.current.draft).toBe(serialized);
-		expect(result.current.isDirty).toBe(false);
-	});
-
-	it('apply() is a no-op when the draft is unchanged or invalid', async () => {
-		const { result } = renderHook(() =>
-			useJsonEditor({ dashboard, isOpen: true, onApplied: jest.fn() }),
-		);
-
-		await act(async () => {
-			await result.current.apply();
-		});
-		expect(mockUpdate).not.toHaveBeenCalled();
-
-		act(() => result.current.setDraft('{bad'));
-		await act(async () => {
-			await result.current.apply();
-		});
-		expect(mockUpdate).not.toHaveBeenCalled();
-	});
-
-	it('apply() PUTs the narrowed body, toasts, refetches and calls onApplied', async () => {
-		const onApplied = jest.fn();
-		const { result } = renderHook(() =>
-			useJsonEditor({ dashboard, isOpen: true, onApplied }),
-		);
-
-		const next = { ...dashboard, name: 'Renamed' };
-		act(() => result.current.setDraft(JSON.stringify(next)));
-		await act(async () => {
-			await result.current.apply();
-		});
-
-		expect(mockUpdate).toHaveBeenCalledTimes(1);
-		expect(mockUpdate).toHaveBeenCalledWith(
-			{ id: 'dash-1' },
-			expect.objectContaining({
-				name: 'Renamed',
-				schemaVersion: 'v6',
-				spec: next.spec,
-				tags: next.tags,
-			}),
-		);
-		expect(mockToastSuccess).toHaveBeenCalled();
-		expect(mockRefetch).toHaveBeenCalled();
-		expect(onApplied).toHaveBeenCalled();
-	});
-
-	it('apply() surfaces errors through the error modal', async () => {
-		mockUpdate.mockRejectedValueOnce(new Error('boom'));
-		const { result } = renderHook(() =>
-			useJsonEditor({ dashboard, isOpen: true, onApplied: jest.fn() }),
-		);
-
-		act(() =>
-			result.current.setDraft(JSON.stringify({ ...dashboard, name: 'X' })),
-		);
-		await act(async () => {
-			await result.current.apply();
-		});
-
-		expect(mockShowErrorModal).toHaveBeenCalled();
-	});
-
-	it('re-seeds the draft when the drawer re-opens', () => {
-		const onApplied = jest.fn();
-		const { result, rerender } = renderHook(
-			(props: { isOpen: boolean }) =>
-				useJsonEditor({ dashboard, isOpen: props.isOpen, onApplied }),
-			{ initialProps: { isOpen: false } },
-		);
-
-		act(() => result.current.setDraft('stale edit'));
-		expect(result.current.draft).toBe('stale edit');
-
-		rerender({ isOpen: true });
-		expect(result.current.draft).toBe(serialized);
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/JsonEditorDrawer/dashboardToUpdatable.ts

@@ -1,26 +0,0 @@
-import type {
-	DashboardtypesGettableDashboardV2DTO,
-	DashboardtypesDashboardSpecDTO,
-	DashboardtypesUpdatableDashboardV2DTO,
-	TagtypesPostableTagDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-/**
- * Narrow a parsed (full Gettable-shaped) dashboard JSON down to the PUT-updatable
- * body. The editor shows the whole dashboard for readability, but the update
- * endpoint only accepts `{ name, schemaVersion, image, tags, spec }` — the
- * server owns `id`, `locked`, timestamps, etc., so we drop them here.
- */
-export function dashboardToUpdatable(
-	parsed: Record<string, unknown>,
-): DashboardtypesUpdatableDashboardV2DTO {
-	const dashboard = parsed as Partial<DashboardtypesGettableDashboardV2DTO>;
-
-	return {
-		name: dashboard.name ?? '',
-		schemaVersion: dashboard.schemaVersion ?? 'v6',
-		image: dashboard.image,
-		tags: (dashboard.tags as TagtypesPostableTagDTO[] | null | undefined) ?? null,
-		spec: dashboard.spec as DashboardtypesDashboardSpecDTO,
-	};
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/JsonEditorDrawer/editorTheme.ts

@@ -1,47 +0,0 @@
-import type { Monaco } from '@monaco-editor/react';
-
-export const JSON_EDITOR_THEME = 'signoz-json';
-
-function token(el: HTMLElement, name: string): string {
-	return getComputedStyle(el).getPropertyValue(name).trim().replace('#', '');
-}
-
-function isDark(hex: string): boolean {
-	if (hex.length < 6) {
-		return true;
-	}
-	const r = parseInt(hex.slice(0, 2), 16);
-	const g = parseInt(hex.slice(2, 4), 16);
-	const b = parseInt(hex.slice(4, 6), 16);
-	return 0.299 * r + 0.587 * g + 0.114 * b < 128;
-}
-
-export function defineJsonEditorTheme(monaco: Monaco, el: HTMLElement): void {
-	const background = token(el, '--l1-background');
-	const foreground = token(el, '--l1-foreground');
-	const keyColor = token(el, '--bg-vanilla-400');
-	const valueColor = token(el, '--bg-robin-400');
-
-	const rules: { token: string; foreground: string }[] = [];
-	if (keyColor) {
-		rules.push({ token: 'string.key.json', foreground: keyColor });
-	}
-	if (valueColor) {
-		rules.push({ token: 'string.value.json', foreground: valueColor });
-	}
-
-	const colors: Record<string, string> = {};
-	if (background) {
-		colors['editor.background'] = `#${background}`;
-	}
-	if (foreground) {
-		colors['editor.foreground'] = `#${foreground}`;
-	}
-
-	monaco.editor.defineTheme(JSON_EDITOR_THEME, {
-		base: isDark(background) ? 'vs-dark' : 'vs',
-		inherit: true,
-		rules,
-		colors,
-	});
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/JsonEditorDrawer/useJsonEditor.ts

@@ -1,148 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { toast } from '@signozhq/ui/sonner';
-import { updateDashboardV2 } from 'api/generated/services/dashboard';
-import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import { dashboardToUpdatable } from './dashboardToUpdatable';
-import { useDashboardStore } from '../../store/useDashboardStore';
-
-export interface JsonValidity {
-	valid: boolean;
-	lineCount: number;
-	/** 1-based line of the parse error, when known. */
-	errorLine?: number;
-	message?: string;
-}
-
-interface Params {
-	dashboard: DashboardtypesGettableDashboardV2DTO;
-	isOpen: boolean;
-	onApplied: () => void;
-}
-
-interface Result {
-	draft: string;
-	setDraft: (next: string) => void;
-	validity: JsonValidity;
-	isDirty: boolean;
-	isSaving: boolean;
-	format: () => void;
-	reset: () => void;
-	apply: () => Promise<void>;
-}
-
-const serialize = (dashboard: DashboardtypesGettableDashboardV2DTO): string =>
-	JSON.stringify(dashboard, null, 2);
-
-/** Derive a 1-based line number from a `JSON.parse` "position N" error message. */
-function errorLineFromMessage(
-	source: string,
-	message: string,
-): number | undefined {
-	const match = /position (\d+)/.exec(message);
-	if (!match) {
-		return undefined;
-	}
-	const position = Number(match[1]);
-	return source.slice(0, position).split('\n').length;
-}
-
-/**
- * Editor state for the dashboard JSON drawer: tracks the editable `draft`
- * against the last-applied text, exposes live validation, and applies changes
- * via the full-document update endpoint.
- */
-export function useJsonEditor({
-	dashboard,
-	isOpen,
-	onApplied,
-}: Params): Result {
-	const dashboardId = useDashboardStore((s) => s.dashboardId);
-	const refetch = useDashboardStore((s) => s.refetch);
-	const { showErrorModal } = useErrorModal();
-
-	const [appliedText, setAppliedText] = useState<string>(() =>
-		serialize(dashboard),
-	);
-	const [draft, setDraft] = useState<string>(appliedText);
-	const [isSaving, setIsSaving] = useState(false);
-
-	// Re-seed the editor from the current dashboard each time the drawer opens so
-	// it always reflects the latest persisted state (e.g. after a refetch).
-	useEffect(() => {
-		if (isOpen) {
-			const next = serialize(dashboard);
-			setAppliedText(next);
-			setDraft(next);
-		}
-	}, [isOpen, dashboard]);
-
-	const validity = useMemo<JsonValidity>(() => {
-		const lineCount = draft.split('\n').length;
-		try {
-			JSON.parse(draft);
-			return { valid: true, lineCount };
-		} catch (error) {
-			const message = error instanceof Error ? error.message : 'Invalid JSON';
-			return {
-				valid: false,
-				lineCount,
-				errorLine: errorLineFromMessage(draft, message),
-				message,
-			};
-		}
-	}, [draft]);
-
-	const isDirty = draft !== appliedText;
-
-	const format = useCallback((): void => {
-		try {
-			setDraft(JSON.stringify(JSON.parse(draft), null, 2));
-		} catch {
-			// Leave the draft untouched when it can't be parsed.
-		}
-	}, [draft]);
-
-	const reset = useCallback((): void => {
-		setDraft(appliedText);
-	}, [appliedText]);
-
-	const apply = useCallback(async (): Promise<void> => {
-		if (!validity.valid || !isDirty) {
-			return;
-		}
-		try {
-			setIsSaving(true);
-			const parsed = JSON.parse(draft) as Record<string, unknown>;
-			await updateDashboardV2({ id: dashboardId }, dashboardToUpdatable(parsed));
-			toast.success('Dashboard updated');
-			refetch();
-			onApplied();
-		} catch (error) {
-			showErrorModal(error as APIError);
-		} finally {
-			setIsSaving(false);
-		}
-	}, [
-		dashboardId,
-		validity.valid,
-		isDirty,
-		draft,
-		refetch,
-		onApplied,
-		showErrorModal,
-	]);
-
-	return {
-		draft,
-		setDraft,
-		validity,
-		isDirty,
-		isSaving,
-		format,
-		reset,
-		apply,
-	};
-}

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

@@ -12,7 +12,6 @@ import type {
 	DashboardtypesJSONPatchOperationDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { Base64Icons } from 'container/DashboardContainer/DashboardSettings/General/utils';
-import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import { useAppContext } from 'providers/App/App';
 import { usePanelTypeSelectionModalStore } from 'providers/Dashboard/helpers/panelTypeSelectionModalHelper';
 import { useErrorModal } from 'providers/ErrorModalProvider';
@@ -140,15 +139,7 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 				/>
 			</div>
 
-			{/* Row 2: the time selector floats top-right (declared first so the
-			    variables bar's content wraps around it); the variables bar
-			    collapses to one line and, when expanded, wraps full-width under it. */}
-			<div className={styles.toolbarRow2}>
-				<div className={styles.timeCluster}>
-					<DateTimeSelectionV2 showAutoRefresh hideShareModal />
-				</div>
-				<VariablesBar dashboard={dashboard} />
-			</div>
+			<VariablesBar dashboard={dashboard} />
 		</section>
 	);
 }

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

@@ -2,30 +2,21 @@ import { useEffect, useState } from 'react';
 import { Modal } from 'antd';
 import { Input } from '@signozhq/ui/input';
 
-interface SectionTitleModalProps {
+interface RenameSectionModalProps {
 	open: boolean;
-	/** Modal heading, e.g. "Rename section" / "New section". */
-	heading: string;
-	/** Confirm button label, e.g. "Rename" / "Create section". */
-	okText: string;
 	initialValue: string;
 	isSaving: boolean;
-	placeholder?: string;
 	onClose: () => void;
 	onSubmit: (title: string) => void;
 }
 
-/** Title-entry modal shared by section create and rename. */
-function SectionTitleModal({
+function RenameSectionModal({
 	open,
-	heading,
-	okText,
 	initialValue,
 	isSaving,
-	placeholder = 'Section name',
 	onClose,
 	onSubmit,
-}: SectionTitleModalProps): JSX.Element {
+}: RenameSectionModalProps): JSX.Element {
 	const [value, setValue] = useState<string>(initialValue);
 
 	// Reseed the field each time the modal opens.
@@ -45,19 +36,19 @@ function SectionTitleModal({
 	return (
 		<Modal
 			open={open}
-			title={heading}
+			title="Rename section"
 			onCancel={onClose}
 			onOk={submit}
-			okText={okText}
+			okText="Rename"
 			okButtonProps={{ disabled: isSaving || !value.trim() }}
 			destroyOnClose
 		>
 			<Input
-				testId="section-title-input"
+				testId="rename-section-input"
 				autoFocus
 				value={value}
 				maxLength={120}
-				placeholder={placeholder}
+				placeholder="Section name"
 				onChange={(e): void => setValue(e.target.value)}
 				onKeyDown={(e): void => {
 					if (e.key === 'Enter') {
@@ -70,4 +61,4 @@ function SectionTitleModal({
 	);
 }
 
-export default SectionTitleModal;
+export default RenameSectionModal;

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

@@ -13,7 +13,7 @@ import { useDashboardStore } from '../../../store/useDashboardStore';
 import { useDeleteSection } from '../hooks/useDeleteSection';
 import { useRenameSection } from '../hooks/useRenameSection';
 import { useToggleSectionCollapse } from '../hooks/useToggleSectionCollapse';
-import SectionTitleModal from '../SectionTitleModal';
+import RenameSectionModal from '../RenameSectionModal';
 import SectionGrid from '../SectionGrid/SectionGrid';
 import SectionHeader, {
 	type SectionDragHandle,
@@ -146,10 +146,8 @@ function Section({
 						)}
 					</div>
 				))}
-			<SectionTitleModal
+			<RenameSectionModal
 				open={isRenaming}
-				heading="Rename section"
-				okText="Rename"
 				initialValue={section.title}
 				isSaving={isSaving}
 				onClose={(): void => setIsRenaming(false)}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/useAddSection.ts

@@ -12,27 +12,6 @@ import {
 } from '../../../patchOps';
 import { useDashboardStore } from '../../../store/useDashboardStore';
 
-const SECTION_SELECTOR = '[data-testid^="dashboard-section-"]';
-
-/**
- * Waits (via rAF) for the refetch to render the appended section, then scrolls
- * it into view. Polls because `refetch` resolves before React commits the new
- * section to the DOM; bails after ~40 frames.
- */
-function scrollToNewSection(prevCount: number, attempts = 40): void {
-	const sections = document.querySelectorAll(SECTION_SELECTOR);
-	if (sections.length > prevCount) {
-		sections[sections.length - 1]?.scrollIntoView({
-			behavior: 'smooth',
-			block: 'center',
-		});
-		return;
-	}
-	if (attempts > 0) {
-		requestAnimationFrame(() => scrollToNewSection(prevCount, attempts - 1));
-	}
-}
-
 interface Params {
 	layouts: DashboardtypesLayoutDTO[] | undefined | null;
 }
@@ -63,12 +42,10 @@ export function useAddSection({ layouts }: Params): Result {
 				!layouts || layouts.length === 0
 					? reorderLayoutsOp([newGridLayout(trimmed)])
 					: addSectionOp(trimmed);
-			const prevSectionCount = document.querySelectorAll(SECTION_SELECTOR).length;
 			try {
 				setIsSaving(true);
 				await patchDashboardV2({ id: dashboardId }, [op]);
 				refetch();
-				scrollToNewSection(prevSectionCount);
 			} catch (error) {
 				showErrorModal(error as APIError);
 			} finally {

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/VariableSelector.tsx

@@ -101,7 +101,7 @@ function VariableSelector({
 				${variable.name}
 				{variable.description ? (
 					<Tooltip title={variable.description}>
-						<SolidInfoCircle className={styles.infoIcon} size={14} />
+						<SolidInfoCircle className={styles.infoIcon} size="md" />
 					</Tooltip>
 				) : null}
 			</Typography.Text>

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

@@ -1,55 +1,12 @@
+/* Mirrors the V1 dashboard variable bar: each variable is a connected pill —
+   a robin `$name` segment joined to a value segment. */
+/* Sits inside the already-padded sticky toolbar section, so it only needs a top
+   gap from the tags — horizontal/bottom padding comes from the toolbar. */
 .bar {
-	min-width: 0;
-}
-
-.strip {
-	display: flow-root;
-}
-
-.stripExpanded {
 	display: flex;
 	flex-wrap: wrap;
-	gap: 8px;
+	gap: 12px;
 	padding-top: 12px;
-	overflow: visible;
-	clear: both;
-
-	.variableSlot,
-	.moreButton {
-		margin: 0;
-	}
-
-	@media (prefers-reduced-motion: no-preference) {
-		animation: variablesExpandIn 200ms ease-out;
-	}
-}
-
-@keyframes variablesExpandIn {
-	from {
-		opacity: 0;
-		transform: translateY(-6px);
-	}
-
-	to {
-		opacity: 1;
-		transform: translateY(0);
-	}
-}
-
-.variableSlot {
-	display: inline-flex;
-	align-items: center;
-	margin-right: 8px;
-	vertical-align: top;
-}
-
-.variableSlotHidden {
-	display: none;
-}
-
-.moreButton {
-	display: inline-flex;
-	vertical-align: top;
 }
 
 .variableItem {
@@ -64,7 +21,7 @@
 	align-items: center;
 	gap: 4px;
 	padding: 6px 6px 6px 8px;
-	border: 1px solid var(--l3-border);
+	border: 1px solid var(--l1-border);
 	border-radius: 2px 0 0 2px;
 	background: var(--l3-background);
 	color: var(--bg-robin-300);
@@ -76,10 +33,8 @@
 }
 
 .infoIcon {
-	display: inline-flex;
-	margin-left: 2px;
+	margin-left: 4px;
 	color: var(--l2-foreground);
-	vertical-align: middle;
 }
 
 .variableValue {
@@ -87,7 +42,7 @@
 	min-width: 120px;
 	height: 32px;
 	align-items: center;
-	border: 1px solid var(--l3-border);
+	border: 1px solid var(--l1-border);
 	border-left: none;
 	border-radius: 0 2px 2px 0;
 	background: var(--l2-background);
@@ -100,6 +55,8 @@
 	}
 }
 
+/* Inner control fills the value segment; the segment provides the frame, so the
+   control itself is borderless/transparent. */
 .control {
 	width: 100%;
 	min-width: 120px;

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

@@ -1,9 +1,4 @@
-import { useState } from 'react';
-import { ChevronLeft } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import cx from 'classnames';
 import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
-import { useInlineOverflowCount } from 'hooks/useInlineOverflowCount';
 
 import { useVariableSelection } from './useVariableSelection';
 import VariableSelector from './VariableSelector';
@@ -16,76 +11,33 @@ interface VariablesBarProps {
 /**
  * Runtime variable selector bar shown above the panels. Renders one control per
  * dashboard variable; selections live in the store + URL (never the spec).
- *
- * The pills sit on the line left of the floated time selector and collapse the
- * overflow behind a `+N` trigger. Expanding lets the bar wrap onto full-width
- * lines that flow underneath the time selector. Every selector stays mounted
- * either way so auto-selection and option fetching keep driving the panels.
  */
 function VariablesBar({ dashboard }: VariablesBarProps): JSX.Element | null {
 	const { variables, dependencyData, selection, setSelection } =
 		useVariableSelection(dashboard);
-	const [expanded, setExpanded] = useState(false);
-	const { containerRef, visibleCount, overflowCount } = useInlineOverflowCount({
-		itemCount: variables.length,
-		gap: 8,
-		reserveWidth: 48,
-		enabled: !expanded,
-	});
 
 	if (variables.length === 0) {
 		return null;
 	}
 
-	const hasOverflow = overflowCount > 0;
-
 	return (
 		<div className={styles.bar} data-testid="dashboard-variables-bar">
-			<div
-				ref={containerRef}
-				className={cx(styles.strip, { [styles.stripExpanded]: expanded })}
-			>
-				{variables.map((variable, index) => (
-					<div
-						key={variable.name}
-						data-overflow-item="true"
-						className={cx(styles.variableSlot, {
-							[styles.variableSlotHidden]:
-								!expanded && hasOverflow && index >= visibleCount,
-						})}
-					>
-						<VariableSelector
-							variable={variable}
-							variables={variables}
-							parents={dependencyData.parentGraph[variable.name] ?? []}
-							selections={selection}
-							selection={
-								selection[variable.name] ?? {
-									value: variable.multiSelect ? [] : '',
-									allSelected: false,
-								}
-							}
-							onChange={(next): void => setSelection(variable.name, next)}
-						/>
-					</div>
-				))}
-
-				{hasOverflow && (
-					<span className={styles.moreButton}>
-						<Button
-							variant="outlined"
-							color="secondary"
-							size="md"
-							prefix={expanded ? <ChevronLeft size={14} /> : undefined}
-							aria-expanded={expanded}
-							testId="dashboard-variables-more"
-							onClick={(): void => setExpanded((prev) => !prev)}
-						>
-							{expanded ? 'Less' : `+${overflowCount}`}
-						</Button>
-					</span>
-				)}
-			</div>
+			{variables.map((variable) => (
+				<VariableSelector
+					key={variable.name}
+					variable={variable}
+					variables={variables}
+					parents={dependencyData.parentGraph[variable.name] ?? []}
+					selections={selection}
+					selection={
+						selection[variable.name] ?? {
+							value: variable.multiSelect ? [] : '',
+							allSelected: false,
+						}
+					}
+					onChange={(next): void => setSelection(variable.name, next)}
+				/>
+			))}
 		</div>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/selectors/ValueSelector.tsx

@@ -73,7 +73,7 @@ function ValueSelector({
 
 	return (
 		<CustomSelect
-			className={styles.control}
+			className={styles.select}
 			data-testid={testId}
 			options={optionData}
 			value={

frontend/src/styles.scss

@@ -794,13 +794,6 @@ notifications	-  2050
 	background: color-mix(in srgb, var(--l3-background) 20%, transparent);
 }
 
-// =================================================================
-// Monaco Editor style overrides
-.monaco-editor .find-widget.visible {
-	top: 30px !important;
-	right: 45px !important;
-}
-
 body.ai-assistant-panel-open {
 	.PylonChat-bubbleFrameContainer,
 	.PylonChat-chatWindowFrameContainer {

pkg/apiserver/signozapiserver/metricsexplorer.go

@@ -68,7 +68,7 @@ func (provider *provider) addMetricsExplorerRoutes(router *mux.Router) error {
 		return err
 	}
 
-	if err := router.Handle("/api/v2/metrics/attributes", handler.New(
+	if err := router.Handle("/api/v2/metrics/{metric_name}/attributes", handler.New(
 		provider.authzMiddleware.ViewAccess(provider.metricsExplorerHandler.GetMetricAttributes),
 		handler.OpenAPIDef{
 			ID:                  "GetMetricAttributes",
@@ -88,7 +88,7 @@ func (provider *provider) addMetricsExplorerRoutes(router *mux.Router) error {
 		return err
 	}
 
-	if err := router.Handle("/api/v2/metrics/metadata", handler.New(
+	if err := router.Handle("/api/v2/metrics/{metric_name}/metadata", handler.New(
 		provider.authzMiddleware.ViewAccess(provider.metricsExplorerHandler.GetMetricMetadata),
 		handler.OpenAPIDef{
 			ID:                  "GetMetricMetadata",
@@ -96,7 +96,6 @@ func (provider *provider) addMetricsExplorerRoutes(router *mux.Router) error {
 			Summary:             "Get metric metadata",
 			Description:         "This endpoint returns metadata information like metric description, unit, type, temporality, monotonicity for a specified metric",
 			Request:             nil,
-			RequestQuery:        new(metricsexplorertypes.MetricNameQuery),
 			RequestContentType:  "",
 			Response:            new(metricsexplorertypes.MetricMetadata),
 			ResponseContentType: "application/json",
@@ -108,7 +107,7 @@ func (provider *provider) addMetricsExplorerRoutes(router *mux.Router) error {
 		return err
 	}
 
-	if err := router.Handle("/api/v2/metrics/metadata", handler.New(
+	if err := router.Handle("/api/v2/metrics/{metric_name}/metadata", handler.New(
 		provider.authzMiddleware.EditAccess(provider.metricsExplorerHandler.UpdateMetricMetadata),
 		handler.OpenAPIDef{
 			ID:                  "UpdateMetricMetadata",
@@ -127,7 +126,7 @@ func (provider *provider) addMetricsExplorerRoutes(router *mux.Router) error {
 		return err
 	}
 
-	if err := router.Handle("/api/v2/metrics/highlights", handler.New(
+	if err := router.Handle("/api/v2/metrics/{metric_name}/highlights", handler.New(
 		provider.authzMiddleware.ViewAccess(provider.metricsExplorerHandler.GetMetricHighlights),
 		handler.OpenAPIDef{
 			ID:                  "GetMetricHighlights",
@@ -135,7 +134,6 @@ func (provider *provider) addMetricsExplorerRoutes(router *mux.Router) error {
 			Summary:             "Get metric highlights",
 			Description:         "This endpoint returns highlights like number of datapoints, totaltimeseries, active time series, last received time for a specified metric",
 			Request:             nil,
-			RequestQuery:        new(metricsexplorertypes.MetricNameQuery),
 			RequestContentType:  "",
 			Response:            new(metricsexplorertypes.MetricHighlightsResponse),
 			ResponseContentType: "application/json",
@@ -147,7 +145,7 @@ func (provider *provider) addMetricsExplorerRoutes(router *mux.Router) error {
 		return err
 	}
 
-	if err := router.Handle("/api/v2/metrics/alerts", handler.New(
+	if err := router.Handle("/api/v2/metrics/{metric_name}/alerts", handler.New(
 		provider.authzMiddleware.ViewAccess(provider.metricsExplorerHandler.GetMetricAlerts),
 		handler.OpenAPIDef{
 			ID:                  "GetMetricAlerts",
@@ -155,7 +153,6 @@ func (provider *provider) addMetricsExplorerRoutes(router *mux.Router) error {
 			Summary:             "Get metric alerts",
 			Description:         "This endpoint returns associated alerts for a specified metric",
 			Request:             nil,
-			RequestQuery:        new(metricsexplorertypes.MetricNameQuery),
 			RequestContentType:  "",
 			Response:            new(metricsexplorertypes.MetricAlertsResponse),
 			ResponseContentType: "application/json",
@@ -167,7 +164,7 @@ func (provider *provider) addMetricsExplorerRoutes(router *mux.Router) error {
 		return err
 	}
 
-	if err := router.Handle("/api/v2/metrics/dashboards", handler.New(
+	if err := router.Handle("/api/v2/metrics/{metric_name}/dashboards", handler.New(
 		provider.authzMiddleware.ViewAccess(provider.metricsExplorerHandler.GetMetricDashboards),
 		handler.OpenAPIDef{
 			ID:                  "GetMetricDashboards",
@@ -175,7 +172,6 @@ func (provider *provider) addMetricsExplorerRoutes(router *mux.Router) error {
 			Summary:             "Get metric dashboards",
 			Description:         "This endpoint returns associated dashboards for a specified metric",
 			Request:             nil,
-			RequestQuery:        new(metricsexplorertypes.MetricNameQuery),
 			RequestContentType:  "",
 			Response:            new(metricsexplorertypes.MetricDashboardsResponse),
 			ResponseContentType: "application/json",

pkg/modules/metricsexplorer/implmetricsexplorer/handler.go

@@ -11,8 +11,17 @@ import (
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
 	"github.com/SigNoz/signoz/pkg/types/metricsexplorertypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
+	"github.com/gorilla/mux"
 )
 
+func extractMetricName(req *http.Request) (string, error) {
+	metricName := mux.Vars(req)["metric_name"]
+	if metricName == "" {
+		return "", errors.NewInvalidInputf(errors.CodeInvalidInput, "metric_name is required in URL path")
+	}
+	return metricName, nil
+}
+
 type handler struct {
 	module metricsexplorer.Module
 }
@@ -107,17 +116,23 @@ func (h *handler) UpdateMetricMetadata(rw http.ResponseWriter, req *http.Request
 		return
 	}
 
+	// Extract metric_name from URL path
+	vars := mux.Vars(req)
+	metricName := vars["metric_name"]
+
+	if metricName == "" {
+		render.Error(rw, errors.NewInvalidInputf(errors.CodeInvalidInput, "metric_name is required in URL path"))
+		return
+	}
+
 	var in metricsexplorertypes.UpdateMetricMetadataRequest
 	if err := binding.JSON.BindBody(req.Body, &in); err != nil {
 		render.Error(rw, err)
 		return
 	}
 
-	if in.MetricName == "" {
-		render.Error(rw, errors.NewInvalidInputf(errors.CodeInvalidInput, "metricName is required"))
-		return
-	}
-
+	// Set metric name from URL path
+	in.MetricName = metricName
 	orgID := valuer.MustNewUUID(claims.OrgID)
 
 	err = h.module.UpdateMetricMetadata(req.Context(), orgID, &in)
@@ -136,16 +151,11 @@ func (h *handler) GetMetricMetadata(rw http.ResponseWriter, req *http.Request) {
 		return
 	}
 
-	var in metricsexplorertypes.MetricNameQuery
-	if err := binding.Query.BindQuery(req.URL.Query(), &in); err != nil {
+	metricName, err := extractMetricName(req)
+	if err != nil {
 		render.Error(rw, err)
 		return
 	}
-	if err := in.Validate(); err != nil {
-		render.Error(rw, err)
-		return
-	}
-	metricName := in.MetricName
 
 	orgID := valuer.MustNewUUID(claims.OrgID)
 
@@ -171,24 +181,20 @@ func (h *handler) GetMetricAlerts(rw http.ResponseWriter, req *http.Request) {
 		return
 	}
 
-	var in metricsexplorertypes.MetricNameQuery
-	if err := binding.Query.BindQuery(req.URL.Query(), &in); err != nil {
-		render.Error(rw, err)
-		return
-	}
-	if err := in.Validate(); err != nil {
+	metricName, err := extractMetricName(req)
+	if err != nil {
 		render.Error(rw, err)
 		return
 	}
 
 	orgID := valuer.MustNewUUID(claims.OrgID)
 
-	if err := h.checkMetricExists(req.Context(), orgID, in.MetricName); err != nil {
+	if err := h.checkMetricExists(req.Context(), orgID, metricName); err != nil {
 		render.Error(rw, err)
 		return
 	}
 
-	out, err := h.module.GetMetricAlerts(req.Context(), orgID, in.MetricName)
+	out, err := h.module.GetMetricAlerts(req.Context(), orgID, metricName)
 	if err != nil {
 		render.Error(rw, err)
 		return
@@ -203,24 +209,20 @@ func (h *handler) GetMetricDashboards(rw http.ResponseWriter, req *http.Request)
 		return
 	}
 
-	var in metricsexplorertypes.MetricNameQuery
-	if err := binding.Query.BindQuery(req.URL.Query(), &in); err != nil {
-		render.Error(rw, err)
-		return
-	}
-	if err := in.Validate(); err != nil {
+	metricName, err := extractMetricName(req)
+	if err != nil {
 		render.Error(rw, err)
 		return
 	}
 
 	orgID := valuer.MustNewUUID(claims.OrgID)
 
-	if err := h.checkMetricExists(req.Context(), orgID, in.MetricName); err != nil {
+	if err := h.checkMetricExists(req.Context(), orgID, metricName); err != nil {
 		render.Error(rw, err)
 		return
 	}
 
-	out, err := h.module.GetMetricDashboards(req.Context(), orgID, in.MetricName)
+	out, err := h.module.GetMetricDashboards(req.Context(), orgID, metricName)
 	if err != nil {
 		render.Error(rw, err)
 		return
@@ -235,24 +237,20 @@ func (h *handler) GetMetricHighlights(rw http.ResponseWriter, req *http.Request)
 		return
 	}
 
-	var in metricsexplorertypes.MetricNameQuery
-	if err := binding.Query.BindQuery(req.URL.Query(), &in); err != nil {
-		render.Error(rw, err)
-		return
-	}
-	if err := in.Validate(); err != nil {
+	metricName, err := extractMetricName(req)
+	if err != nil {
 		render.Error(rw, err)
 		return
 	}
 
 	orgID := valuer.MustNewUUID(claims.OrgID)
 
-	if err := h.checkMetricExists(req.Context(), orgID, in.MetricName); err != nil {
+	if err := h.checkMetricExists(req.Context(), orgID, metricName); err != nil {
 		render.Error(rw, err)
 		return
 	}
 
-	highlights, err := h.module.GetMetricHighlights(req.Context(), orgID, in.MetricName)
+	highlights, err := h.module.GetMetricHighlights(req.Context(), orgID, metricName)
 	if err != nil {
 		render.Error(rw, err)
 		return
@@ -267,12 +265,20 @@ func (h *handler) GetMetricAttributes(rw http.ResponseWriter, req *http.Request)
 		return
 	}
 
+	metricName, err := extractMetricName(req)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
 	var in metricsexplorertypes.MetricAttributesRequest
 	if err := binding.Query.BindQuery(req.URL.Query(), &in); err != nil {
 		render.Error(rw, err)
 		return
 	}
 
+	in.MetricName = metricName
+
 	if err := in.Validate(); err != nil {
 		render.Error(rw, err)
 		return
@@ -280,7 +286,7 @@ func (h *handler) GetMetricAttributes(rw http.ResponseWriter, req *http.Request)
 
 	orgID := valuer.MustNewUUID(claims.OrgID)
 
-	if err := h.checkMetricExists(req.Context(), orgID, in.MetricName); err != nil {
+	if err := h.checkMetricExists(req.Context(), orgID, metricName); err != nil {
 		render.Error(rw, err)
 		return
 	}

pkg/types/metricsexplorertypes/metricsexplorer.go

@@ -260,27 +260,11 @@ type MetricHighlightsResponse struct {
 	ActiveTimeSeries uint64 `json:"activeTimeSeries" required:"true"`
 }
 
-// MetricNameQuery represents the query parameters for endpoints that take a metric name.
-type MetricNameQuery struct {
-	MetricName string `query:"metricName" required:"true" description:"The name of the metric. May contain slashes (e.g. cloud-provider metrics like run.googleapis.com/request_latencies)."`
-}
-
-// Validate ensures MetricNameQuery contains acceptable values.
-func (q *MetricNameQuery) Validate() error {
-	if q == nil {
-		return errors.NewInvalidInputf(errors.CodeInvalidInput, "request is nil")
-	}
-	if q.MetricName == "" {
-		return errors.NewInvalidInputf(errors.CodeInvalidInput, "metricName is required")
-	}
-	return nil
-}
-
 // MetricAttributesRequest represents the query parameters for the metric attributes endpoint.
 type MetricAttributesRequest struct {
-	MetricName string `query:"metricName" required:"true" description:"The name of the metric. May contain slashes (e.g. cloud-provider metrics like run.googleapis.com/request_latencies)."`
-	Start      *int64 `query:"start" description:"Start of the time range as a Unix timestamp in milliseconds."`
-	End        *int64 `query:"end" description:"End of the time range as a Unix timestamp in milliseconds."`
+	MetricName string `json:"-"`
+	Start      *int64 `query:"start"`
+	End        *int64 `query:"end"`
 }
 
 // Validate ensures MetricAttributesRequest contains acceptable values.
@@ -289,10 +273,6 @@ func (req *MetricAttributesRequest) Validate() error {
 		return errors.NewInvalidInputf(errors.CodeInvalidInput, "request is nil")
 	}
 
-	if req.MetricName == "" {
-		return errors.NewInvalidInputf(errors.CodeInvalidInput, "metricName is required")
-	}
-
 	if req.Start != nil && req.End != nil {
 		if *req.Start >= *req.End {
 			return errors.NewInvalidInputf(errors.CodeInvalidInput, "start (%d) must be less than end (%d)", *req.Start, *req.End)