feat: maketrace columns appear in a specific order

docs/api/openapi.yml

@@ -3454,6 +3454,29 @@ components:
       required:
       - customValue
       type: object
+    DashboardtypesDashboard:
+      properties:
+        createdAt:
+          format: date-time
+          type: string
+        createdBy:
+          type: string
+        data:
+          $ref: '#/components/schemas/DashboardtypesStorableDashboardData'
+        id:
+          type: string
+        locked:
+          type: boolean
+        org_id:
+          type: string
+        source:
+          $ref: '#/components/schemas/DashboardtypesSource'
+        updatedAt:
+          format: date-time
+          type: string
+        updatedBy:
+          type: string
+      type: object
     DashboardtypesDashboardPanelRef:
       properties:
         dashboardId:
@@ -3633,6 +3656,13 @@ components:
         timeRangeEnabled:
           type: boolean
       type: object
+    DashboardtypesGettablePublicDashboardData:
+      properties:
+        dashboard:
+          $ref: '#/components/schemas/DashboardtypesDashboard'
+        publicDashboard:
+          $ref: '#/components/schemas/DashboardtypesGettablePublicDasbhboard'
+      type: object
     DashboardtypesGettablePublicDashboardDataV2:
       properties:
         dashboard:
@@ -4417,6 +4447,9 @@ components:
       - normal
       - percent
       type: string
+    DashboardtypesStorableDashboardData:
+      additionalProperties: {}
+      type: object
     DashboardtypesTableFormatting:
       properties:
         columnUnits:
@@ -7192,6 +7225,22 @@ components:
       - attributes
       - totalKeys
       type: object
+    MetricsexplorertypesMetricDashboard:
+      properties:
+        dashboardId:
+          type: string
+        dashboardName:
+          type: string
+        widgetId:
+          type: string
+        widgetName:
+          type: string
+      required:
+      - dashboardName
+      - dashboardId
+      - widgetId
+      - widgetName
+      type: object
     MetricsexplorertypesMetricDashboardPanelsResponse:
       properties:
         dashboards:
@@ -7202,6 +7251,16 @@ components:
       required:
       - dashboards
       type: object
+    MetricsexplorertypesMetricDashboardsResponse:
+      properties:
+        dashboards:
+          items:
+            $ref: '#/components/schemas/MetricsexplorertypesMetricDashboard'
+          nullable: true
+          type: array
+      required:
+      - dashboards
+      type: object
     MetricsexplorertypesMetricHighlightsResponse:
       properties:
         activeTimeSeries:
@@ -13244,6 +13303,112 @@ paths:
       summary: Update org preference
       tags:
       - preferences
+  /api/v1/public/dashboards/{id}:
+    get:
+      deprecated: false
+      description: This endpoint returns the sanitized dashboard data for public access
+      operationId: GetPublicDashboardData
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/DashboardtypesGettablePublicDashboardData'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "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:
+      - anonymous:
+        - public-dashboard:read
+      summary: Get public dashboard data
+      tags:
+      - dashboard
+  /api/v1/public/dashboards/{id}/widgets/{idx}/query_range:
+    get:
+      deprecated: false
+      description: This endpoint return query range results for a widget of public
+        dashboard
+      operationId: GetPublicDashboardWidgetQueryRange
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      - in: path
+        name: idx
+        required: true
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/Querybuildertypesv5QueryRangeResponse'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "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:
+      - anonymous:
+        - public-dashboard:read
+      summary: Get query range result
+      tags:
+      - dashboard
   /api/v1/roles:
     get:
       deprecated: false
@@ -19495,6 +19660,74 @@ paths:
       summary: Get metric attributes
       tags:
       - metrics
+  /api/v2/metrics/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
+        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":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/MetricsexplorertypesMetricDashboardsResponse'
+                  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
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: Get metric dashboards
+      tags:
+      - metrics
   /api/v2/metrics/highlights:
     get:
       deprecated: false

ee/modules/dashboard/impldashboard/module.go

@@ -52,7 +52,7 @@ func (module *module) CreatePublic(ctx context.Context, orgID valuer.UUID, publi
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}
 
-	dashboard, err := module.GetV2(ctx, orgID, publicDashboard.DashboardID)
+	dashboard, err := module.Get(ctx, orgID, publicDashboard.DashboardID)
 	if err != nil {
 		return err
 	}
@@ -90,6 +90,15 @@ func (module *module) GetPublic(ctx context.Context, orgID valuer.UUID, dashboar
 	return dashboardtypes.NewPublicDashboardFromStorablePublicDashboard(storablePublicDashboard), nil
 }
 
+func (module *module) GetDashboardByPublicID(ctx context.Context, id valuer.UUID) (*dashboardtypes.Dashboard, error) {
+	storableDashboard, err := module.store.GetDashboardByPublicID(ctx, id.StringValue())
+	if err != nil {
+		return nil, err
+	}
+
+	return dashboardtypes.NewDashboardFromStorableDashboard(storableDashboard), nil
+}
+
 func (module *module) GetPublicDashboardSelectorsAndOrg(ctx context.Context, id valuer.UUID, orgs []*types.Organization) ([]coretypes.Selector, valuer.UUID, error) {
 	orgIDs := make([]string, len(orgs))
 	for idx, org := range orgs {
@@ -107,6 +116,24 @@ func (module *module) GetPublicDashboardSelectorsAndOrg(ctx context.Context, id
 	}, storableDashboard.OrgID, nil
 }
 
+func (module *module) GetPublicWidgetQueryRange(ctx context.Context, id valuer.UUID, widgetIdx, startTime, endTime uint64) (*querybuildertypesv5.QueryRangeResponse, error) {
+	ctx = ctxtypes.NewContextWithCommentVals(ctx, map[string]string{
+		instrumentationtypes.CodeNamespace:    "dashboard",
+		instrumentationtypes.CodeFunctionName: "GetPublicWidgetQueryRange",
+	})
+	dashboard, err := module.GetDashboardByPublicID(ctx, id)
+	if err != nil {
+		return nil, err
+	}
+
+	query, err := dashboard.GetWidgetQuery(startTime, endTime, widgetIdx, module.settings.Logger())
+	if err != nil {
+		return nil, err
+	}
+
+	return module.querier.QueryRange(ctx, dashboard.OrgID, query)
+}
+
 func (module *module) GetDashboardByPublicIDV2(ctx context.Context, id valuer.UUID) (*dashboardtypes.DashboardV2, error) {
 	storableDashboard, err := module.store.GetDashboardByPublicID(ctx, id.StringValue())
 	if err != nil {
@@ -162,7 +189,7 @@ func (module *module) UpdatePublic(ctx context.Context, orgID valuer.UUID, publi
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}
 
-	dashboard, err := module.GetV2(ctx, orgID, publicDashboard.DashboardID)
+	dashboard, err := module.Get(ctx, orgID, publicDashboard.DashboardID)
 	if err != nil {
 		return err
 	}
@@ -173,13 +200,34 @@ func (module *module) UpdatePublic(ctx context.Context, orgID valuer.UUID, publi
 	return module.store.UpdatePublic(ctx, dashboardtypes.NewStorablePublicDashboardFromPublicDashboard(publicDashboard))
 }
 
+func (module *module) Delete(ctx context.Context, orgID valuer.UUID, id valuer.UUID) error {
+	dashboard, err := module.Get(ctx, orgID, id)
+	if err != nil {
+		return err
+	}
+
+	if err := dashboard.ErrIfNotDeletable(); err != nil {
+		return err
+	}
+
+	if dashboard.Locked {
+		return errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "dashboard is locked, please unlock the dashboard to be delete it")
+	}
+
+	return module.delete(ctx, orgID, id)
+}
+
+func (module *module) DeleteUnsafe(ctx context.Context, orgID, id valuer.UUID) error {
+	return module.delete(ctx, orgID, id)
+}
+
 func (module *module) DeletePublic(ctx context.Context, orgID valuer.UUID, dashboardID valuer.UUID) error {
 	_, err := module.licensing.GetActive(ctx, orgID)
 	if err != nil {
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}
 
-	dashboard, err := module.GetV2(ctx, orgID, dashboardID)
+	dashboard, err := module.Get(ctx, orgID, dashboardID)
 	if err != nil {
 		return err
 	}
@@ -212,6 +260,10 @@ func (module *module) Collect(ctx context.Context, orgID valuer.UUID) (map[strin
 	return stats, nil
 }
 
+func (module *module) Create(ctx context.Context, orgID valuer.UUID, createdBy string, creator valuer.UUID, source dashboardtypes.Source, data dashboardtypes.PostableDashboard) (*dashboardtypes.Dashboard, error) {
+	return module.pkgDashboardModule.Create(ctx, orgID, createdBy, creator, source, data)
+}
+
 func (module *module) CreateV2(ctx context.Context, orgID valuer.UUID, createdBy string, creator valuer.UUID, source dashboardtypes.Source, postable dashboardtypes.PostableDashboardV2) (*dashboardtypes.DashboardV2, error) {
 	return module.pkgDashboardModule.CreateV2(ctx, orgID, createdBy, creator, source, postable)
 }
@@ -294,10 +346,30 @@ func (module *module) DeleteView(ctx context.Context, orgID valuer.UUID, id valu
 	return module.pkgDashboardModule.DeleteView(ctx, orgID, id)
 }
 
+func (module *module) Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*dashboardtypes.Dashboard, error) {
+	return module.pkgDashboardModule.Get(ctx, orgID, id)
+}
+
+func (module *module) GetByMetricNames(ctx context.Context, orgID valuer.UUID, metricNames []string) (map[string][]dashboardtypes.DashboardPanelRef, error) {
+	return module.pkgDashboardModule.GetByMetricNames(ctx, orgID, metricNames)
+}
+
 func (module *module) GetByMetricNamesV2(ctx context.Context, orgID valuer.UUID, metricNames []string) (map[string][]dashboardtypes.DashboardPanelRef, error) {
 	return module.pkgDashboardModule.GetByMetricNamesV2(ctx, orgID, metricNames)
 }
 
+func (module *module) List(ctx context.Context, orgID valuer.UUID) ([]*dashboardtypes.Dashboard, error) {
+	return module.pkgDashboardModule.List(ctx, orgID)
+}
+
+func (module *module) Update(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, data dashboardtypes.UpdatableDashboard, diff int) (*dashboardtypes.Dashboard, error) {
+	return module.pkgDashboardModule.Update(ctx, orgID, id, updatedBy, data, diff)
+}
+
+func (module *module) LockUnlock(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, isAdmin bool, lock bool) error {
+	return module.pkgDashboardModule.LockUnlock(ctx, orgID, id, updatedBy, isAdmin, lock)
+}
+
 func (module *module) ReconcileSystemDashboards(ctx context.Context, orgID valuer.UUID) error {
 	return module.pkgDashboardModule.ReconcileSystemDashboards(ctx, orgID)
 }
@@ -305,3 +377,12 @@ func (module *module) ReconcileSystemDashboards(ctx context.Context, orgID value
 func (module *module) GetSystemDashboard(ctx context.Context, orgID valuer.UUID, name string) (*dashboardtypes.DashboardV2, error) {
 	return module.pkgDashboardModule.GetSystemDashboard(ctx, orgID, name)
 }
+
+func (module *module) delete(ctx context.Context, orgID, id valuer.UUID) error {
+	return module.store.RunInTx(ctx, func(ctx context.Context) error {
+		if err := module.store.DeletePublic(ctx, id.String()); err != nil && !errors.Ast(err, errors.TypeNotFound) {
+			return err
+		}
+		return module.store.Delete(ctx, orgID, id)
+	})
+}

ee/modules/metricreductionrule/implmetricreductionrule/module.go

@@ -462,7 +462,7 @@ func (m *module) relatedAssetImpact(ctx context.Context, orgID valuer.UUID, metr
 		droppedSet[label] = struct{}{}
 	}
 
-	if dashboards, err := m.dashboard.GetByMetricNamesV2(ctx, orgID, []string{metricName}); err != nil {
+	if dashboards, err := m.dashboard.GetByMetricNames(ctx, orgID, []string{metricName}); err != nil {
 		m.logger.WarnContext(ctx, "failed to fetch related dashboards for reduction preview", slog.String("metric_name", metricName), errors.Attr(err))
 	} else {
 		for _, item := range dashboards[metricName] {

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

@@ -36,12 +36,16 @@ import type {
 	GetDashboardV2200,
 	GetDashboardV2PathParameters,
 	GetPublicDashboard200,
+	GetPublicDashboardData200,
+	GetPublicDashboardDataPathParameters,
 	GetPublicDashboardDataV2200,
 	GetPublicDashboardDataV2PathParameters,
 	GetPublicDashboardPanelQueryRangeV2200,
 	GetPublicDashboardPanelQueryRangeV2Params,
 	GetPublicDashboardPanelQueryRangeV2PathParameters,
 	GetPublicDashboardPathParameters,
+	GetPublicDashboardWidgetQueryRange200,
+	GetPublicDashboardWidgetQueryRangePathParameters,
 	GetSystemDashboard200,
 	GetSystemDashboardPathParameters,
 	ListDashboardViews200,
@@ -470,6 +474,217 @@ export const useUpdatePublicDashboard = <
 > => {
 	return useMutation(getUpdatePublicDashboardMutationOptions(options));
 };
+/**
+ * This endpoint returns the sanitized dashboard data for public access
+ * @summary Get public dashboard data
+ */
+export const getPublicDashboardData = (
+	{ id }: GetPublicDashboardDataPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetPublicDashboardData200>({
+		url: `/api/v1/public/dashboards/${id}`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetPublicDashboardDataQueryKey = ({
+	id,
+}: GetPublicDashboardDataPathParameters) => {
+	return [`/api/v1/public/dashboards/${id}`] as const;
+};
+
+export const getGetPublicDashboardDataQueryOptions = <
+	TData = Awaited<ReturnType<typeof getPublicDashboardData>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ id }: GetPublicDashboardDataPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getPublicDashboardData>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetPublicDashboardDataQueryKey({ id });
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getPublicDashboardData>>
+	> = ({ signal }) => getPublicDashboardData({ id }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: id !== null && id !== undefined,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getPublicDashboardData>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetPublicDashboardDataQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getPublicDashboardData>>
+>;
+export type GetPublicDashboardDataQueryError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get public dashboard data
+ */
+
+export function useGetPublicDashboardData<
+	TData = Awaited<ReturnType<typeof getPublicDashboardData>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ id }: GetPublicDashboardDataPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getPublicDashboardData>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetPublicDashboardDataQueryOptions({ id }, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return withQueryKey(query, queryOptions.queryKey);
+}
+
+/**
+ * @summary Get public dashboard data
+ */
+export const invalidateGetPublicDashboardData = async (
+	queryClient: QueryClient,
+	{ id }: GetPublicDashboardDataPathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetPublicDashboardDataQueryKey({ id }) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * This endpoint return query range results for a widget of public dashboard
+ * @summary Get query range result
+ */
+export const getPublicDashboardWidgetQueryRange = (
+	{ id, idx }: GetPublicDashboardWidgetQueryRangePathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetPublicDashboardWidgetQueryRange200>({
+		url: `/api/v1/public/dashboards/${id}/widgets/${idx}/query_range`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetPublicDashboardWidgetQueryRangeQueryKey = ({
+	id,
+	idx,
+}: GetPublicDashboardWidgetQueryRangePathParameters) => {
+	return [`/api/v1/public/dashboards/${id}/widgets/${idx}/query_range`] as const;
+};
+
+export const getGetPublicDashboardWidgetQueryRangeQueryOptions = <
+	TData = Awaited<ReturnType<typeof getPublicDashboardWidgetQueryRange>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ id, idx }: GetPublicDashboardWidgetQueryRangePathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getPublicDashboardWidgetQueryRange>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ??
+		getGetPublicDashboardWidgetQueryRangeQueryKey({ id, idx });
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getPublicDashboardWidgetQueryRange>>
+	> = ({ signal }) => getPublicDashboardWidgetQueryRange({ id, idx }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: id !== null && id !== undefined && idx !== null && idx !== undefined,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getPublicDashboardWidgetQueryRange>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetPublicDashboardWidgetQueryRangeQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getPublicDashboardWidgetQueryRange>>
+>;
+export type GetPublicDashboardWidgetQueryRangeQueryError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get query range result
+ */
+
+export function useGetPublicDashboardWidgetQueryRange<
+	TData = Awaited<ReturnType<typeof getPublicDashboardWidgetQueryRange>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ id, idx }: GetPublicDashboardWidgetQueryRangePathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getPublicDashboardWidgetQueryRange>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetPublicDashboardWidgetQueryRangeQueryOptions(
+		{ id, idx },
+		options,
+	);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return withQueryKey(query, queryOptions.queryKey);
+}
+
+/**
+ * @summary Get query range result
+ */
+export const invalidateGetPublicDashboardWidgetQueryRange = async (
+	queryClient: QueryClient,
+	{ id, idx }: GetPublicDashboardWidgetQueryRangePathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetPublicDashboardWidgetQueryRangeQueryKey({ id, idx }) },
+		options,
+	);
+
+	return queryClient;
+};
+
 /**
  * Returns every saved view in the calling user's org. Saved views are shared org-wide.
  * @summary List dashboard saved views

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

@@ -24,6 +24,8 @@ import type {
 	GetMetricAlertsParams,
 	GetMetricAttributes200,
 	GetMetricAttributesParams,
+	GetMetricDashboards200,
+	GetMetricDashboardsParams,
 	GetMetricDashboardsV2200,
 	GetMetricDashboardsV2Params,
 	GetMetricHighlights200,
@@ -1094,6 +1096,104 @@ export const invalidateGetMetricAttributes = async (
 	return queryClient;
 };
 
+/**
+ * This endpoint returns associated dashboards for a specified metric
+ * @summary Get metric dashboards
+ */
+export const getMetricDashboards = (
+	params: GetMetricDashboardsParams,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetMetricDashboards200>({
+		url: `/api/v2/metrics/dashboards`,
+		method: 'GET',
+		params,
+		signal,
+	});
+};
+
+export const getGetMetricDashboardsQueryKey = (
+	params?: GetMetricDashboardsParams,
+) => {
+	return [`/api/v2/metrics/dashboards`, ...(params ? [params] : [])] as const;
+};
+
+export const getGetMetricDashboardsQueryOptions = <
+	TData = Awaited<ReturnType<typeof getMetricDashboards>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	params: GetMetricDashboardsParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getMetricDashboards>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetMetricDashboardsQueryKey(params);
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getMetricDashboards>>
+	> = ({ signal }) => getMetricDashboards(params, signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof getMetricDashboards>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetMetricDashboardsQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getMetricDashboards>>
+>;
+export type GetMetricDashboardsQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get metric dashboards
+ */
+
+export function useGetMetricDashboards<
+	TData = Awaited<ReturnType<typeof getMetricDashboards>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	params: GetMetricDashboardsParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getMetricDashboards>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetMetricDashboardsQueryOptions(params, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return withQueryKey(query, queryOptions.queryKey);
+}
+
+/**
+ * @summary Get metric dashboards
+ */
+export const invalidateGetMetricDashboards = async (
+	queryClient: QueryClient,
+	params: GetMetricDashboardsParams,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetMetricDashboardsQueryKey(params) },
+		options,
+	);
+
+	return queryClient;
+};
+
 /**
  * This endpoint returns highlights like number of datapoints, totaltimeseries, active time series, last received time for a specified metric
  * @summary Get metric highlights

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

@@ -4886,6 +4886,50 @@ export interface DashboardtypesCustomVariableSpecDTO {
 	customValue: string;
 }
 
+export interface DashboardtypesStorableDashboardDataDTO {
+	[key: string]: unknown;
+}
+
+export enum DashboardtypesSourceDTO {
+	user = 'user',
+	system = 'system',
+	integration = 'integration',
+}
+export interface DashboardtypesDashboardDTO {
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: string;
+	/**
+	 * @type string
+	 */
+	createdBy?: string;
+	data?: DashboardtypesStorableDashboardDataDTO;
+	/**
+	 * @type string
+	 */
+	id?: string;
+	/**
+	 * @type boolean
+	 */
+	locked?: boolean;
+	/**
+	 * @type string
+	 */
+	org_id?: string;
+	source?: DashboardtypesSourceDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: string;
+	/**
+	 * @type string
+	 */
+	updatedBy?: string;
+}
+
 export interface DashboardtypesDashboardPanelRefDTO {
 	/**
 	 * @type string
@@ -5824,11 +5868,6 @@ export interface DashboardtypesDashboardViewDTO {
 	updatedAt?: string;
 }
 
-export enum DashboardtypesSourceDTO {
-	user = 'user',
-	system = 'system',
-	integration = 'integration',
-}
 export interface TagtypesGettableTagDTO {
 	/**
 	 * @type string
@@ -5906,6 +5945,11 @@ export interface DashboardtypesGettablePublicDasbhboardDTO {
 	timeRangeEnabled?: boolean;
 }
 
+export interface DashboardtypesGettablePublicDashboardDataDTO {
+	dashboard?: DashboardtypesDashboardDTO;
+	publicDashboard?: DashboardtypesGettablePublicDasbhboardDTO;
+}
+
 export interface DashboardtypesGettablePublicDashboardDataV2DTO {
 	dashboard?: DashboardtypesGettableDashboardV2DTO;
 	publicDashboard?: DashboardtypesGettablePublicDasbhboardDTO;
@@ -8978,6 +9022,25 @@ export interface MetricsexplorertypesMetricAttributesResponseDTO {
 	totalKeys: number;
 }
 
+export interface MetricsexplorertypesMetricDashboardDTO {
+	/**
+	 * @type string
+	 */
+	dashboardId: string;
+	/**
+	 * @type string
+	 */
+	dashboardName: string;
+	/**
+	 * @type string
+	 */
+	widgetId: string;
+	/**
+	 * @type string
+	 */
+	widgetName: string;
+}
+
 export interface MetricsexplorertypesMetricDashboardPanelsResponseDTO {
 	/**
 	 * @type array,null
@@ -8985,6 +9048,13 @@ export interface MetricsexplorertypesMetricDashboardPanelsResponseDTO {
 	dashboards: DashboardtypesDashboardPanelRefDTO[] | null;
 }
 
+export interface MetricsexplorertypesMetricDashboardsResponseDTO {
+	/**
+	 * @type array,null
+	 */
+	dashboards: MetricsexplorertypesMetricDashboardDTO[] | null;
+}
+
 export interface MetricsexplorertypesMetricHighlightsResponseDTO {
 	/**
 	 * @type integer
@@ -12418,6 +12488,29 @@ export type GetOrgPreference200 = {
 export type UpdateOrgPreferencePathParameters = {
 	name: string;
 };
+export type GetPublicDashboardDataPathParameters = {
+	id: string;
+};
+export type GetPublicDashboardData200 = {
+	data: DashboardtypesGettablePublicDashboardDataDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type GetPublicDashboardWidgetQueryRangePathParameters = {
+	id: string;
+	idx: string;
+};
+export type GetPublicDashboardWidgetQueryRange200 = {
+	data: Querybuildertypesv5QueryRangeResponseDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type ListRoles200 = {
 	/**
 	 * @type array
@@ -13375,6 +13468,22 @@ 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).
+	 */
+	metricName: string;
+};
+
+export type GetMetricDashboards200 = {
+	data: MetricsexplorertypesMetricDashboardsResponseDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type GetMetricHighlightsParams = {
 	/**
 	 * @type string

frontend/src/components/QuickFilters/QuickFilters.styles.scss

@@ -2,8 +2,6 @@
 	display: flex;
 	flex-direction: row;
 	position: relative;
-	flex: 1;
-	min-height: 0;
 
 	.quick-filters-settings-container {
 		flex: 0 0 0;

frontend/src/components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout.module.scss

@@ -1,33 +0,0 @@
-// The one `overflow: hidden` in the chain. Ancestors (RouteTab, AppLayout)
-// only hand height down; each pane below owns its own scroll.
-.layout {
-	display: flex;
-	flex: 1;
-	height: 100%;
-	min-height: 0;
-	overflow: hidden;
-}
-
-// Positioned so overlays (settings drawer) paint above the content pane
-// without changing this pane's layout width.
-.filters {
-	width: 280px;
-	flex-shrink: 0;
-	display: flex;
-	flex-direction: column;
-	min-height: 0;
-	position: relative;
-	overflow: visible;
-	z-index: 2;
-}
-
-// Bounded box for the OverlayScrollbar inside it (`.overlay-scrollbar` is
-// `height: 100%`), which owns the scrolling.
-.content {
-	flex: 1;
-	min-width: 0;
-	min-height: 0;
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-}

frontend/src/components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout.tsx

@@ -1,54 +0,0 @@
-import { ComponentProps, ReactNode } from 'react';
-import cx from 'classnames';
-import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-
-import QuickFilters from '../QuickFilters';
-
-import styles from './QuickFiltersLayout.module.scss';
-
-// Same optionality as `<QuickFilters />` in JSX (honours its defaultProps).
-type QuickFiltersElementProps = JSX.LibraryManagedAttributes<
-	typeof QuickFilters,
-	ComponentProps<typeof QuickFilters>
->;
-
-export interface QuickFiltersLayoutProps {
-	quickFilterProps: QuickFiltersElementProps;
-	showFilters: boolean;
-	className?: string;
-	contentClassName?: string;
-	testId?: string;
-	children: ReactNode;
-}
-
-function QuickFiltersLayout({
-	quickFilterProps,
-	showFilters,
-	className,
-	contentClassName,
-	testId,
-	children,
-}: QuickFiltersLayoutProps): JSX.Element {
-	return (
-		<div className={cx(styles.layout, className)} data-testid={testId}>
-			{showFilters && (
-				<aside
-					className={styles.filters}
-					data-testid="quick-filters-layout-filters"
-				>
-					<QuickFilters {...quickFilterProps} />
-				</aside>
-			)}
-			<section
-				className={cx(styles.content, contentClassName)}
-				data-testid="quick-filters-layout-content"
-			>
-				<OverlayScrollbar>
-					<div>{children}</div>
-				</OverlayScrollbar>
-			</section>
-		</div>
-	);
-}
-
-export default QuickFiltersLayout;

frontend/src/components/QuickFilters/QuickFiltersLayout/__tests__/QuickFiltersLayout.test.tsx

@@ -1,79 +0,0 @@
-import { render, screen } from 'tests/test-utils';
-
-import { QuickFiltersSource } from '../../types';
-import QuickFiltersLayout from '../QuickFiltersLayout';
-
-jest.mock('../QuickFiltersLayout.module.scss', () => ({
-	__esModule: true,
-	default: {
-		layout: 'layout',
-		filters: 'filters',
-		content: 'content',
-	},
-}));
-
-jest.mock('../../QuickFilters', () => ({
-	__esModule: true,
-	default: ({ source }: { source: string }): JSX.Element => (
-		<div data-testid="quick-filters">{source}</div>
-	),
-}));
-
-const quickFilterProps = {
-	source: QuickFiltersSource.TRACES_EXPLORER,
-	handleFilterVisibilityChange: jest.fn(),
-};
-
-describe('QuickFiltersLayout', () => {
-	it('renders QuickFilters with the given props inside the filters pane', () => {
-		render(
-			<QuickFiltersLayout showFilters quickFilterProps={quickFilterProps}>
-				<div>content</div>
-			</QuickFiltersLayout>,
-		);
-
-		const filtersPane = screen.getByTestId('quick-filters-layout-filters');
-		expect(filtersPane).toContainElement(screen.getByTestId('quick-filters'));
-		expect(screen.getByTestId('quick-filters')).toHaveTextContent(
-			QuickFiltersSource.TRACES_EXPLORER,
-		);
-		expect(screen.getByTestId('quick-filters-layout-content')).toHaveTextContent(
-			'content',
-		);
-	});
-
-	it('does not render the filters pane when showFilters is false', () => {
-		render(
-			<QuickFiltersLayout showFilters={false} quickFilterProps={quickFilterProps}>
-				<div>content</div>
-			</QuickFiltersLayout>,
-		);
-
-		expect(
-			screen.queryByTestId('quick-filters-layout-filters'),
-		).not.toBeInTheDocument();
-		expect(screen.queryByTestId('quick-filters')).not.toBeInTheDocument();
-		expect(screen.getByText('content')).toBeInTheDocument();
-	});
-
-	it('merges classNames onto the root and content panes', () => {
-		render(
-			<QuickFiltersLayout
-				showFilters
-				quickFilterProps={quickFilterProps}
-				className="page-root"
-				contentClassName="page-content"
-				testId="page"
-			>
-				<div>content</div>
-			</QuickFiltersLayout>,
-		);
-
-		const root = screen.getByTestId('page');
-		expect(root).toHaveClass('layout', 'page-root');
-		expect(screen.getByTestId('quick-filters-layout-content')).toHaveClass(
-			'content',
-			'page-content',
-		);
-	});
-});

frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.styles.scss

@@ -6,12 +6,27 @@
 	left: 0;
 	z-index: 999;
 	width: 342px;
-	height: 100%;
 	background: var(--l1-background);
 	transition: width 0.05s ease-in-out;
 	overflow: hidden;
 	color: var(--l1-foreground);
 
+	&.qf-logs-explorer {
+		height: calc(100vh - 45px);
+	}
+
+	&.qf-exceptions {
+		height: 100vh;
+	}
+
+	&.qf-api-monitoring {
+		height: calc(100vh - 45px);
+	}
+
+	&.qf-traces-explorer {
+		height: calc(100vh - 45px);
+	}
+
 	&.hidden {
 		width: 0;
 	}

frontend/src/components/RouteTab/RouteTab.module.scss

@@ -1,38 +0,0 @@
-// Hands the parent's height down to the active pane and lets the pane scroll
-// its own content, so TopNav and the tab bar stay put. Child combinators only
-// (nested Tabs must not be caught).
-.routeTab {
-	flex: 1;
-	min-height: 0;
-}
-
-.routeTab > :global(.ant-tabs-content-holder) {
-	display: flex;
-	flex-direction: column;
-}
-
-.routeTab > :global(.ant-tabs-content-holder) > :global(.ant-tabs-content) {
-	flex: 1;
-	min-height: 0;
-	display: flex;
-	flex-direction: column;
-}
-
-.routeTab
-	> :global(.ant-tabs-content-holder)
-	> :global(.ant-tabs-content)
-	> :global(.ant-tabs-tabpane-active) {
-	flex: 1;
-	min-height: 0;
-	display: flex;
-	flex-direction: column;
-}
-
-.routeTab
-	> :global(.ant-tabs-content-holder)
-	> :global(.ant-tabs-content)
-	> :global(.ant-tabs-tabpane-active)
-	> :global(.overlay-scrollbar) {
-	flex: 1;
-	min-height: 0;
-}

frontend/src/components/RouteTab/RouteTab.test.tsx

@@ -5,11 +5,6 @@ import { fireEvent, render, screen } from 'tests/test-utils';
 import RouteTab from './index';
 import { RouteTabProps } from './types';
 
-jest.mock('./RouteTab.module.scss', () => ({
-	__esModule: true,
-	default: { routeTab: 'routeTab' },
-}));
-
 function DummyComponent1(): JSX.Element {
 	return <div>Dummy Component 1</div>;
 }
@@ -79,36 +74,6 @@ describe('RouteTab component', () => {
 		expect(history.location.pathname).toBe('/tab2');
 	});
 
-	it('applies the layout class alongside a custom className', () => {
-		const history = createMemoryHistory();
-		const { container } = render(
-			<Router history={history}>
-				<RouteTab
-					history={history}
-					routes={testRoutes}
-					activeKey="Tab1"
-					className="custom-tabs"
-				/>
-			</Router>,
-		);
-		expect(container.querySelector('.ant-tabs')).toHaveClass(
-			'routeTab',
-			'custom-tabs',
-		);
-	});
-
-	it('renders the active tab content inside an overlay scrollbar', () => {
-		const history = createMemoryHistory();
-		const { container } = render(
-			<Router history={history}>
-				<RouteTab history={history} routes={testRoutes} activeKey="Tab1" />
-			</Router>,
-		);
-		expect(
-			container.querySelector('.ant-tabs-tabpane-active > .overlay-scrollbar'),
-		).toHaveTextContent('Dummy Component 1');
-	});
-
 	it('calls onChangeHandler on tab change', () => {
 		const onChangeHandler = jest.fn();
 		const history = createMemoryHistory();

frontend/src/components/RouteTab/index.tsx

@@ -5,32 +5,20 @@ import {
 	useParams,
 } from 'react-router-dom';
 import { Tabs, TabsProps } from 'antd';
-import cx from 'classnames';
 import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
-import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 
 import { RouteTabProps } from './types';
 
-import styles from './RouteTab.module.scss';
-
 interface Params {
 	[key: string]: string;
 }
 
-/**
- * Each pane scrolls its own content inside an OverlayScrollbar, so the tab bar
- * stays put. Mounted as the page root the pane is bounded to the viewport; inside
- * a plain block wrapper the scroller is inert and the page scrolls as usual.
- * Pane content that needs a bounded box must size itself with `height: 100%`
- * (the scroller's viewport is block flow, so `flex: 1` has no effect there).
- */
 function RouteTab({
 	routes,
 	activeKey,
 	onChangeHandler,
 	history,
 	showRightSection,
-	className,
 	...rest
 }: RouteTabProps & TabsProps): JSX.Element {
 	const params = useParams<Params>();
@@ -62,16 +50,11 @@ function RouteTab({
 		label: name,
 		key,
 		tabKey: route,
-		children: (
-			<OverlayScrollbar>
-				<Component />
-			</OverlayScrollbar>
-		),
+		children: <Component />,
 	}));
 
 	return (
 		<Tabs
-			className={cx(styles.routeTab, className)}
 			onChange={onChange}
 			destroyInactiveTabPane
 			activeKey={currentRoute?.key || activeKey}

frontend/src/container/ApiMonitoring/Explorer/Explorer.styles.scss

@@ -1,15 +1,23 @@
-.api-monitoring-explorer {
-	.api-quick-filters-header {
-		padding: 12px;
-		border-bottom: 1px solid var(--l1-border);
-		border-right: 1px solid var(--l1-border);
+.api-monitoring-page {
+	display: flex;
+	height: 100%;
 
-		display: flex;
-		align-items: center;
-		gap: 6px;
+	.api-quick-filter-left-section {
+		width: 0%;
+		flex-shrink: 0;
 
-		font-size: 14px;
-		line-height: 18px;
+		.api-quick-filters-header {
+			padding: 12px;
+			border-bottom: 1px solid var(--l1-border);
+			border-right: 1px solid var(--l1-border);
+
+			display: flex;
+			align-items: center;
+			gap: 6px;
+
+			font-size: 14px;
+			line-height: 18px;
+		}
 	}
 
 	.api-module-right-section {
@@ -153,6 +161,16 @@
 			}
 		}
 	}
+
+	&.filter-visible {
+		.api-quick-filter-left-section {
+			width: 260px;
+		}
+
+		.api-module-right-section {
+			width: calc(100% - 260px);
+		}
+	}
 }
 
 .no-filtered-domains-message-container {

frontend/src/container/ApiMonitoring/Explorer/Explorer.tsx

@@ -1,7 +1,8 @@
 import { useEffect } from 'react';
 import * as Sentry from '@sentry/react';
 import logEvent from 'api/common/logEvent';
-import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
+import cx from 'classnames';
+import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
@@ -19,21 +20,20 @@ function Explorer(): JSX.Element {
 
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<QuickFiltersLayout
-				className="api-monitoring-explorer"
-				showFilters
-				quickFilterProps={{
-					className: 'qf-api-monitoring',
-					source: QuickFiltersSource.API_MONITORING,
-					signal: SignalType.API_MONITORING,
-					showFilterCollapse: false,
-					showQueryName: false,
-					handleFilterVisibilityChange: (): void => {},
-					useFieldApis: quickFilterFieldApis,
-				}}
-			>
+			<div className={cx('api-monitoring-page', 'filter-visible')}>
+				<section className="api-quick-filter-left-section">
+					<QuickFilters
+						className="qf-api-monitoring"
+						source={QuickFiltersSource.API_MONITORING}
+						signal={SignalType.API_MONITORING}
+						showFilterCollapse={false}
+						showQueryName={false}
+						handleFilterVisibilityChange={(): void => {}}
+						useFieldApis={quickFilterFieldApis}
+					/>
+				</section>
 				<DomainList />
-			</QuickFiltersLayout>
+			</div>
 		</Sentry.ErrorBoundary>
 	);
 }

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MappingsTable.module.scss

@@ -1,7 +1,6 @@
 .tableWrapper {
 	display: flex;
 	flex-direction: column;
-	gap: var(--spacing-4);
 }
 
 .toolbar {

frontend/src/container/LLMObservability/AttributeMapping/LLMObservabilityAttributeMapping.module.scss

@@ -2,11 +2,10 @@
 	display: flex;
 	flex-direction: column;
 	gap: var(--spacing-4);
-	padding: var(--spacing-2) var(--spacing-8);
 
-	--tabs-content-padding: 0;
-	--tabs-text-color: var(--l1-foreground);
-	--tabs-active-text-color: var(--l1-foreground);
+	:global(.ant-tabs-tabpane) {
+		padding: var(--spacing-0) var(--spacing-8);
+	}
 }
 
 .pageError {

frontend/src/container/LLMObservability/AttributeMapping/LLMObservabilityAttributeMapping.tsx

@@ -1,9 +1,8 @@
 import { useCallback } from 'react';
-import { Divider } from '@signozhq/ui/divider';
-import { Tabs } from '@signozhq/ui/tabs';
+import { Tabs } from 'antd';
 import { useConfirmableAction } from 'hooks/useConfirmableAction';
 
-import AttributeMappingHeader from './components/AttributeMappingHeader/AttributeMappingHeader';
+import AttributeMappingActions from './components/AttributeMappingActions/AttributeMappingActions';
 import AttributeMappingsTab from './AttributeMappingsTab/AttributeMappingsTab';
 import DiscardChangesDialog from './components/DiscardChangesDialog/DiscardChangesDialog';
 import GroupFormDrawer from './components/GroupFormDrawer/GroupFormDrawer';
@@ -59,24 +58,23 @@ function LLMObservabilityAttributeMapping(): JSX.Element {
 			className={styles.llmObservabilityAttributeMapping}
 			data-testid="llm-observability-attribute-mapping-page"
 		>
-			<AttributeMappingHeader
-				isDirty={editor.isDirty}
-				isSaving={editor.isSaving}
-				onDiscard={discardConfirm.request}
-				onSave={editor.save}
-			/>
-
 			{editor.saveError && (
 				<div className={styles.pageError} role="alert">
 					{editor.saveError}
 				</div>
 			)}
-			<Divider />
 
 			<Tabs
-				testId="attribute-mapping-tabs"
-				defaultValue={MAPPINGS_TAB_KEY}
+				defaultActiveKey={MAPPINGS_TAB_KEY}
 				items={tabItems}
+				tabBarExtraContent={
+					<AttributeMappingActions
+						isDirty={editor.isDirty}
+						isSaving={editor.isSaving}
+						onDiscard={discardConfirm.request}
+						onSave={editor.save}
+					/>
+				}
 			/>
 			{groupDrawer.isOpen && (
 				<GroupFormDrawer

frontend/src/container/LLMObservability/AttributeMapping/TestTab/__tests__/TestTab.test.tsx

@@ -63,6 +63,26 @@ const EDITED_SPAN_JSON = `{
   }
 }`;
 
+const SPAN_WITH_EXTRA_KEY_JSON = `{
+  "attributes": {
+    "input.value": "What is quantum computing?"
+  },
+  "resource": {
+    "service.name": "llm-gateway"
+  },
+  "demo": {
+    "name": "demo"
+  }
+}`;
+
+const EXTRA_KEY_RESULT_SPAN = {
+	attributes: {
+		'input.value': 'What is quantum computing?',
+		[MAPPED_ATTRIBUTE_KEY]: 'What is quantum computing?',
+	},
+	resource: { 'service.name': 'llm-gateway' },
+};
+
 const SPAN_INPUT_KEY = LOCALSTORAGE.LLM_ATTRIBUTE_MAPPING_TEST_SPAN;
 
 describe('TestTab — sample-span flow', () => {
@@ -104,6 +124,47 @@ describe('TestTab — sample-span flow', () => {
 		expect(screen.queryByTestId('test-error')).not.toBeInTheDocument();
 	});
 
+	it('trims extra top-level keys and sends only the envelope', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		let body: { spans?: { attributes?: Record<string, unknown> }[] } | undefined;
+		server.use(
+			rest.post(TEST_ENDPOINT, async (req, res, ctx) => {
+				body = await req.json();
+				return res(
+					ctx.status(200),
+					ctx.json(makeTestResponse([EXTRA_KEY_RESULT_SPAN])),
+				);
+			}),
+		);
+
+		render(<LLMObservabilityAttributeMapping />);
+
+		await user.click(screen.getByRole('tab', { name: 'Test' }));
+		const runBtn = await screen.findByTestId('run-test-button');
+
+		await user.clear(screen.getByTestId('monaco'));
+		await user.paste(SPAN_WITH_EXTRA_KEY_JSON);
+
+		await waitFor(() =>
+			expect(screen.getByTestId('monaco')).toHaveValue(SPAN_WITH_EXTRA_KEY_JSON),
+		);
+		expect(screen.queryByTestId('test-input-error')).not.toBeInTheDocument();
+
+		await user.click(runBtn);
+
+		await expect(
+			screen.findByTestId('test-results'),
+		).resolves.toBeInTheDocument();
+		expect(body?.spans?.[0]?.attributes).toStrictEqual({
+			'input.value': 'What is quantum computing?',
+		});
+		expect(screen.getByTestId('test-result-0-attributes')).toHaveTextContent(
+			MAPPED_ATTRIBUTE_KEY,
+		);
+		expect(screen.getByTestId('test-result-0-resource')).toBeInTheDocument();
+		expect(screen.getByText('populated')).toBeInTheDocument();
+	});
+
 	it('surfaces a backend error and renders no results', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		server.use(

frontend/src/container/LLMObservability/AttributeMapping/TestTab/__tests__/testPayload.test.ts

@@ -0,0 +1,51 @@
+import { parseSpanInput } from '../testPayload';
+
+describe('parseSpanInput', () => {
+	it('reads the envelope and trims extra top-level keys', () => {
+		const span = parseSpanInput(`{
+			"attributes": { "llm.model_name": "gpt-4o" },
+			"resource": { "service.name": "llm-gateway" },
+			"demo": { "name": "demo" }
+		}`);
+
+		expect(span.attributes).toStrictEqual({ 'llm.model_name': 'gpt-4o' });
+		expect(span.resource).toStrictEqual({ 'service.name': 'llm-gateway' });
+	});
+
+	it('reads a clean envelope', () => {
+		const span = parseSpanInput(`{
+			"attributes": { "llm.model_name": "gpt-4o" },
+			"resource": { "service.name": "llm-gateway" }
+		}`);
+
+		expect(span.attributes).toStrictEqual({ 'llm.model_name': 'gpt-4o' });
+		expect(span.resource).toStrictEqual({ 'service.name': 'llm-gateway' });
+	});
+
+	it('treats an envelope-less object as a bare attribute map', () => {
+		const span = parseSpanInput('{ "llm.model_name": "gpt-4o", "demo": "x" }');
+
+		expect(span.attributes).toStrictEqual({
+			'llm.model_name': 'gpt-4o',
+			demo: 'x',
+		});
+		expect(span.resource).toStrictEqual({});
+	});
+
+	it('drops an envelope key that is not an object', () => {
+		const span = parseSpanInput(
+			'{ "attributes": { "llm.provider": "openai" }, "resource": "oops" }',
+		);
+
+		expect(span.attributes).toStrictEqual({ 'llm.provider': 'openai' });
+		expect(span.resource).toStrictEqual({});
+	});
+
+	it.each([
+		['   ', 'Paste a JSON span object to run the test.'],
+		['{ "a": }', 'Invalid JSON — check for trailing commas or missing quotes.'],
+		['[1, 2]', 'Span must be a JSON object of attribute key-value pairs.'],
+	])('rejects %p', (input, message) => {
+		expect(() => parseSpanInput(input)).toThrow(message);
+	});
+});

frontend/src/container/LLMObservability/AttributeMapping/TestTab/testPayload.ts

@@ -51,13 +51,9 @@ function isPlainObject(value: unknown): value is Record<string, unknown> {
 	return value !== null && typeof value === 'object' && !Array.isArray(value);
 }
 
+// Any other top-level key (a real span carries name, spanId, kind...) is trimmed.
 function isSpanEnvelope(parsed: Record<string, unknown>): boolean {
-	const keys = Object.keys(parsed);
-	return (
-		keys.length > 0 &&
-		keys.every((key) => key === 'attributes' || key === 'resource') &&
-		(isPlainObject(parsed.attributes) || isPlainObject(parsed.resource))
-	);
+	return isPlainObject(parsed.attributes) || isPlainObject(parsed.resource);
 }
 
 export function parseSpanInput(input: string): SpantypesSpanMapperTestSpanDTO {

frontend/src/container/LLMObservability/AttributeMapping/__tests__/LLMObservabilityAttributeMapping.test.tsx

@@ -72,20 +72,15 @@ describe('LLMObservabilityAttributeMapping', () => {
 		const attributeMappingsTab = screen.getByRole('tab', {
 			name: 'Attribute Mappings',
 		});
-		expect(attributeMappingsTab).toHaveAttribute('data-state', 'active');
+		expect(attributeMappingsTab).toHaveAttribute('aria-selected', 'true');
 		await expect(
 			screen.findByTestId('attribute-mappings-tab'),
 		).resolves.toBeInTheDocument();
 	});
 
-	it('renders the header with its description and no Save/Discard while pristine', () => {
+	it('renders no Save/Discard while pristine', () => {
 		render(<LLMObservabilityAttributeMapping />);
 
-		expect(
-			screen.getByText(
-				'Configure source-to-target attribute remapping for LLM traces',
-			),
-		).toBeInTheDocument();
 		// The actions only appear once there are staged changes.
 		expect(screen.queryByTestId('save-changes-btn')).not.toBeInTheDocument();
 		expect(screen.queryByTestId('discard-changes-btn')).not.toBeInTheDocument();
@@ -124,7 +119,11 @@ describe('LLMObservabilityAttributeMapping', () => {
 
 		await user.click(screen.getByRole('tab', { name: 'Attribute Mappings' }));
 		await screen.findByTestId('attribute-mappings-tab');
-		expect(screen.queryByTestId('span-json-editor')).not.toBeInTheDocument();
+		// antd keeps a visited pane mounted and marks it aria-hidden, rather than
+		// unmounting it the way the previous tabs did.
+		expect(
+			screen.getByTestId('span-json-editor').closest('[role="tabpanel"]'),
+		).toHaveAttribute('aria-hidden', 'true');
 
 		await user.click(screen.getByRole('tab', { name: 'Test' }));
 

frontend/src/container/LLMObservability/AttributeMapping/components/AttributeMappingActions/AttributeMappingActions.module.scss

@@ -0,0 +1,10 @@
+.actions {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-6);
+}
+
+.unsavedChanges {
+	font-size: var(--periscope-font-size-base);
+	color: var(--accent-amber);
+}

frontend/src/container/LLMObservability/AttributeMapping/components/AttributeMappingActions/AttributeMappingActions.tsx

@@ -0,0 +1,53 @@
+import { Button } from '@signozhq/ui/button';
+
+import { useCanManageAttributeMapping } from '../../hooks/useCanManageAttributeMapping';
+import styles from './AttributeMappingActions.module.scss';
+
+interface AttributeMappingActionsProps {
+	isDirty: boolean;
+	isSaving: boolean;
+	onDiscard: () => void;
+	onSave: () => void;
+}
+
+function AttributeMappingActions({
+	isDirty,
+	isSaving,
+	onDiscard,
+	onSave,
+}: AttributeMappingActionsProps): JSX.Element | null {
+	const canManage = useCanManageAttributeMapping();
+
+	if (!canManage || !isDirty) {
+		return null;
+	}
+
+	return (
+		<div className={styles.actions}>
+			<span className={styles.unsavedChanges} data-testid="unsaved-changes">
+				Unsaved changes
+			</span>
+			<Button
+				variant="outlined"
+				color="secondary"
+				onClick={onDiscard}
+				disabled={isSaving}
+				testId="discard-changes-btn"
+			>
+				Discard
+			</Button>
+			<Button
+				variant="solid"
+				color="primary"
+				onClick={onSave}
+				loading={isSaving}
+				disabled={isSaving}
+				testId="save-changes-btn"
+			>
+				{isSaving ? 'Saving…' : 'Save changes'}
+			</Button>
+		</div>
+	);
+}
+
+export default AttributeMappingActions;

frontend/src/container/LLMObservability/AttributeMapping/components/AttributeMappingHeader/AttributeMappingHeader.module.scss

@@ -1,18 +0,0 @@
-.pageHeader {
-	display: flex;
-	align-items: flex-start;
-	justify-content: space-between;
-	margin-left: var(--spacing-2);
-	margin-top: var(--spacing-4);
-}
-
-.pageHeaderActions {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-6);
-}
-
-.unsavedChanges {
-	font-size: var(--periscope-font-size-base);
-	color: var(--accent-amber);
-}

frontend/src/container/LLMObservability/AttributeMapping/components/AttributeMappingHeader/AttributeMappingHeader.tsx

@@ -1,56 +0,0 @@
-import { Button } from '@signozhq/ui/button';
-import { Typography } from '@signozhq/ui/typography';
-
-import { useCanManageAttributeMapping } from '../../hooks/useCanManageAttributeMapping';
-import styles from './AttributeMappingHeader.module.scss';
-
-interface AttributeMappingHeaderProps {
-	isDirty: boolean;
-	isSaving: boolean;
-	onDiscard: () => void;
-	onSave: () => void;
-}
-
-function AttributeMappingHeader({
-	isDirty,
-	isSaving,
-	onDiscard,
-	onSave,
-}: AttributeMappingHeaderProps): JSX.Element {
-	const canManage = useCanManageAttributeMapping();
-	return (
-		<header className={styles.pageHeader}>
-			<Typography.Text as="p" size="base" color="muted">
-				Configure source-to-target attribute remapping for LLM traces
-			</Typography.Text>
-			{canManage && isDirty && (
-				<div className={styles.pageHeaderActions}>
-					<span className={styles.unsavedChanges} data-testid="unsaved-changes">
-						Unsaved changes
-					</span>
-					<Button
-						variant="outlined"
-						color="secondary"
-						onClick={onDiscard}
-						disabled={isSaving}
-						testId="discard-changes-btn"
-					>
-						Discard
-					</Button>
-					<Button
-						variant="solid"
-						color="primary"
-						onClick={onSave}
-						loading={isSaving}
-						disabled={isSaving}
-						testId="save-changes-btn"
-					>
-						{isSaving ? 'Saving…' : 'Save changes'}
-					</Button>
-				</div>
-			)}
-		</header>
-	);
-}
-
-export default AttributeMappingHeader;

frontend/src/container/LLMObservability/AttributeMapping/components/GroupFormDrawer/GroupFormDrawer.module.scss

@@ -1,4 +1,7 @@
 .groupForm {
+	--input-foreground: var(--l1-foreground);
+	--input-placeholder-color: var(--l3-foreground);
+
 	display: flex;
 	flex-direction: column;
 	gap: var(--spacing-10);
@@ -18,11 +21,8 @@
 }
 
 .groupFormLabel {
-	font-size: var(--font-size-xs);
-	font-weight: var(--font-weight-semibold);
-	text-transform: uppercase;
-	letter-spacing: 0.04em;
-	color: var(--l3-foreground);
+	font-size: var(--periscope-font-size-base);
+	color: var(--l2-foreground);
 }
 
 .groupFormHint {

frontend/src/container/LLMObservability/AttributeMapping/components/GroupFormDrawer/components/ConditionKeyList/ConditionKeyList.module.scss

@@ -5,17 +5,12 @@
 }
 
 .label {
-	font-size: var(--font-size-xs);
-	font-weight: var(--font-weight-semibold);
-	text-transform: uppercase;
-	letter-spacing: 0.04em;
-	color: var(--l3-foreground);
+	font-size: var(--periscope-font-size-base);
+	color: var(--l2-foreground);
 }
 
 .labelHint {
-	font-weight: var(--font-weight-normal);
-	text-transform: none;
-	letter-spacing: normal;
+	color: var(--l3-foreground);
 }
 
 .keys {

frontend/src/container/LLMObservability/AttributeMapping/components/MapperFormDrawer/MapperFormDrawer.module.scss

@@ -1,4 +1,6 @@
 .form {
+	--input-foreground: var(--l1-foreground);
+	--input-placeholder-color: var(--l3-foreground);
 	display: flex;
 	flex-direction: column;
 	gap: var(--spacing-10);
@@ -12,17 +14,12 @@
 }
 
 .label {
-	font-size: var(--font-size-xs);
-	font-weight: var(--font-weight-semibold);
-	text-transform: uppercase;
-	letter-spacing: 0.04em;
-	color: var(--l3-foreground);
+	font-size: var(--periscope-font-size-base);
+	color: var(--l2-foreground);
 }
 
 .labelHint {
-	font-weight: var(--font-weight-normal);
-	text-transform: none;
-	letter-spacing: normal;
+	color: var(--l3-foreground);
 }
 
 .hint {

frontend/src/container/LLMObservability/Explorer/Explorer.styles.scss

@@ -65,6 +65,8 @@
 }
 
 .trace-explorer-page {
+	display: flex;
+
 	// Meant to fix the query builder colors
 	--input-background: var(--l2-background);
 	--input-hover-background: var(--l2-background);
@@ -73,8 +75,32 @@
 	--input-hover-border-color: var(--internal-ant-border-color-hover);
 	--input-focus-border-color: var(--internal-ant-border-color-hover);
 
+	.filter {
+		width: 260px;
+		height: 100%;
+		min-height: 100vh;
+
+		border-right: 0px;
+		border: 1px solid var(--l1-border);
+		background-color: var(--l1-background);
+
+		> .ant-card-body {
+			padding: 0;
+			width: 258px;
+		}
+	}
+
 	.trace-explorer {
+		width: 100%;
 		background: var(--l1-background);
+
+		> .ant-card-body {
+			padding: 0;
+		}
+
 		border-color: var(--l1-border);
 	}
+	.trace-explorer.filters-expanded {
+		width: calc(100% - 260px);
+	}
 }

frontend/src/container/LLMObservability/Explorer/Explorer.tsx

@@ -2,10 +2,12 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
+import { Card } from 'antd';
 import logEvent from 'api/common/logEvent';
+import cx from 'classnames';
 import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
 import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
-import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
+import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
@@ -186,21 +188,26 @@ function Explorer(): JSX.Element {
 
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<QuickFiltersLayout
+			<div
 				className="trace-explorer-page"
-				testId="llm-observability-explorer"
-				showFilters={isOpen}
-				quickFilterProps={{
-					className: 'qf-traces-explorer',
-					source: QuickFiltersSource.AI_OBSERVABILITY,
-					signal: SignalType.AI_OBSERVABILITY,
-					useFieldApis: quickFiltersFieldApis,
-					handleFilterVisibilityChange: (): void => {
-						setOpen(!isOpen);
-					},
-				}}
+				data-testid="llm-observability-explorer"
 			>
-				<div className="trace-explorer">
+				<Card className="filter" hidden={!isOpen}>
+					<QuickFilters
+						className="qf-traces-explorer"
+						source={QuickFiltersSource.AI_OBSERVABILITY}
+						signal={SignalType.AI_OBSERVABILITY}
+						useFieldApis={quickFiltersFieldApis}
+						handleFilterVisibilityChange={(): void => {
+							setOpen(!isOpen);
+						}}
+					/>
+				</Card>
+				<div
+					className={cx('trace-explorer', {
+						'filters-expanded': isOpen,
+					})}
+				>
 					<div className="trace-explorer-header">
 						<Toolbar
 							showAutoRefresh
@@ -284,7 +291,7 @@ function Explorer(): JSX.Element {
 						)}
 					</div>
 				</div>
-			</QuickFiltersLayout>
+			</div>
 		</Sentry.ErrorBoundary>
 	);
 }

frontend/src/container/LLMObservability/Explorer/TracesTable/__tests__/TracesTable.test.tsx

@@ -11,10 +11,12 @@ const PERSISTED_KEY = `@signoz/table-columns/${STORAGE_KEY}`;
 
 const ROWS = [{ id: 't1', trace_id: 'abc', 'service.name': 'checkout' }];
 
+// An aggregate outside the default order starts hidden, so the persisted
+// defaults are observable.
 const COLUMNS = buildTraceViewColumns([
 	{ name: 'trace_id' },
 	{ name: 'service.name', fieldContext: 'resource' },
-	{ name: 'start_time' },
+	{ name: 'unlisted_aggregate' },
 ]);
 
 function RaceHarness(): JSX.Element {
@@ -66,7 +68,9 @@ describe('TracesTable column-init race', () => {
 
 		await expect(screen.findByRole('table')).resolves.toBeInTheDocument();
 		expect(screen.getByText('trace_id')).toBeInTheDocument();
-		expect(screen.queryByText('start_time')).not.toBeInTheDocument();
-		expect(persistedState()?.hiddenColumnIds).toStrictEqual(['start_time']);
+		expect(screen.queryByText('unlisted_aggregate')).not.toBeInTheDocument();
+		expect(persistedState()?.hiddenColumnIds).toStrictEqual([
+			'unlisted_aggregate',
+		]);
 	});
 });

frontend/src/container/LLMObservability/Explorer/TracesView/__tests__/TracesView.test.tsx

@@ -128,14 +128,7 @@ describe('TracesView column persistence', () => {
 		await findTable();
 
 		await waitFor(() => {
-			expect(persistedState()?.hiddenColumnIds).toStrictEqual([
-				'start_time',
-				'end_time',
-				'error_count',
-				'input',
-				'output',
-				'trace:tool_call_count:float64',
-			]);
+			expect(persistedState()?.hiddenColumnIds).toStrictEqual([]);
 		});
 		expect(screen.getByText(OPTIONS_TRIGGER)).toBeInTheDocument();
 		expect(screen.getByText('llm_call_count')).toBeInTheDocument();
@@ -160,7 +153,7 @@ describe('TracesView column persistence', () => {
 		expect(screen.queryByText(OPTIONS_TRIGGER)).not.toBeInTheDocument();
 	});
 
-	it('renders only the default-visible columns when the field keys fail', async () => {
+	it('renders the display-only columns when the field keys fail', async () => {
 		mockFieldKeysFailure();
 		renderTracesView();
 
@@ -168,8 +161,8 @@ describe('TracesView column persistence', () => {
 
 		expect(screen.getByText('root_span_name')).toBeInTheDocument();
 		expect(screen.getByText('trace_id')).toBeInTheDocument();
-		expect(screen.queryByText('input')).not.toBeInTheDocument();
-		expect(screen.queryByText('output')).not.toBeInTheDocument();
+		expect(screen.getByText('input')).toBeInTheDocument();
+		expect(screen.queryByText('llm_call_count')).not.toBeInTheDocument();
 	});
 
 	it('leaves an existing selection untouched while the field keys fail', async () => {

frontend/src/container/LLMObservability/Explorer/TracesView/__tests__/useTraceViewColumns.test.tsx

@@ -109,17 +109,24 @@ describe('useTraceViewColumns', () => {
 		const { result } = await renderColumns();
 
 		expect(columnNames(result.current.columns)).toStrictEqual([
+			'trace_id',
 			'service.name',
 			'root_span_name',
+			'estimated_total_cost',
 			'trace_duration_nano',
 			'span_count',
-			'trace_id',
+			'total_tokens',
+			'input_tokens',
+			'output_tokens',
+			'distinct_tool_count',
+			'llm_call_count',
+			'tool_call_count',
 			'start_time',
 			'end_time',
 			'error_count',
 			'input',
 			'output',
-			...AGGREGATE_KEYS,
+			'max_llm_duration_nano',
 		]);
 	});
 
@@ -127,14 +134,24 @@ describe('useTraceViewColumns', () => {
 		const { result } = await renderColumns();
 
 		expect(fieldNames(result.current.selectedFields)).toStrictEqual([
+			'trace_id',
 			'service.name',
 			'root_span_name',
+			'estimated_total_cost',
 			'trace_duration_nano',
 			'span_count',
-			'trace_id',
-			'llm_call_count',
 			'total_tokens',
-			'estimated_total_cost',
+			'input_tokens',
+			'output_tokens',
+			'distinct_tool_count',
+			'llm_call_count',
+			'tool_call_count',
+			'start_time',
+			'end_time',
+			'error_count',
+			'input',
+			'output',
+			'max_llm_duration_nano',
 		]);
 	});
 
@@ -193,14 +210,24 @@ describe('useTraceViewColumns', () => {
 
 			expect(result.current.canPersistColumns).toBe(true);
 			expect(fieldNames(result.current.selectedFields)).toStrictEqual([
+				'trace_id',
 				'service.name',
 				'root_span_name',
+				'estimated_total_cost',
 				'trace_duration_nano',
 				'span_count',
-				'trace_id',
-				'llm_call_count',
 				'total_tokens',
-				'estimated_total_cost',
+				'input_tokens',
+				'output_tokens',
+				'distinct_tool_count',
+				'llm_call_count',
+				'tool_call_count',
+				'start_time',
+				'end_time',
+				'error_count',
+				'input',
+				'output',
+				'max_llm_duration_nano',
 			]);
 		});
 	});

frontend/src/container/LLMObservability/Explorer/TracesView/configs.tsx

@@ -5,20 +5,43 @@ import { DEFAULT_PER_PAGE_OPTIONS } from 'hooks/queryPagination';
 
 export const PER_PAGE_OPTIONS: number[] = [10, ...DEFAULT_PER_PAGE_OPTIONS];
 
-/** Always visible: it is the row's link to the trace. */
+/** Always present: it is the row's link to the trace, but it can be reordered. */
 export const TRACE_ID_COLUMN_ID = 'trace_id';
 
-/** Everything else starts hidden; only applied at first init, since the store persists hidden ids. */
-const DEFAULT_VISIBLE_FIELDS = new Set([
+/** Fallback order, until the user drags a column; unlisted fields keep the order the keys endpoint returns them in. */
+const DEFAULT_COLUMN_ORDER = [
+	TRACE_ID_COLUMN_ID,
 	'service.name',
 	'root_span_name',
+	'estimated_total_cost',
 	'trace_duration_nano',
 	'span_count',
-	'llm_call_count',
 	'total_tokens',
-	'estimated_total_cost',
-	TRACE_ID_COLUMN_ID,
-]);
+	'input_tokens',
+	'output_tokens',
+	'distinct_tool_count',
+	'llm_call_count',
+	'tool_call_count',
+	'start_time',
+	'end_time',
+	'error_count',
+	'input',
+	'output',
+	'max_llm_duration_nano',
+];
+
+const orderRank = (field: TelemetryFieldKey): number => {
+	const index = DEFAULT_COLUMN_ORDER.indexOf(field.name);
+	return index === -1 ? Number.MAX_SAFE_INTEGER : index;
+};
+
+export const sortByDefaultOrder = (
+	fields: TelemetryFieldKey[],
+): TelemetryFieldKey[] =>
+	[...fields].sort((a, b) => orderRank(a) - orderRank(b));
+
+/** Anything the keys endpoint adds beyond the ordered set starts hidden; only applied at first init, since the store persists hidden ids. */
+const DEFAULT_VISIBLE_FIELDS = new Set(DEFAULT_COLUMN_ORDER);
 
 export const buildTraceViewColumns = (
 	fields: TelemetryFieldKey[],
@@ -27,7 +50,7 @@ export const buildTraceViewColumns = (
 		...getFieldColumn(field),
 		defaultVisibility: DEFAULT_VISIBLE_FIELDS.has(field.name),
 		// The shared column builder pins anything in TIMESTAMP_FIELD_NAMES; these stay movable.
-		enableMove: field.name !== TRACE_ID_COLUMN_ID,
+		enableMove: true,
 		enableRemove: field.name !== TRACE_ID_COLUMN_ID,
 		canBeHidden: field.name !== TRACE_ID_COLUMN_ID,
 	}));

frontend/src/container/LLMObservability/Explorer/TracesView/useTraceViewColumns.ts

@@ -21,7 +21,11 @@ import {
 	TRACE_VIEW_COLUMN_EXTRA_FIELDS,
 	TRACE_VIEW_FIELD_KEYS,
 } from '../constants';
-import { buildTraceViewColumns, TRACE_ID_COLUMN_ID } from './configs';
+import {
+	buildTraceViewColumns,
+	sortByDefaultOrder,
+	TRACE_ID_COLUMN_ID,
+} from './configs';
 
 const STORAGE_KEY = LOCALSTORAGE.AI_OBSERVABILITY_TRACE_VIEW_COLUMNS;
 
@@ -55,7 +59,10 @@ export function useTraceViewColumns(): UseTraceViewColumns {
 	);
 
 	const availableFields = useMemo(
-		() => mergeExtraFields(TRACE_VIEW_COLUMN_EXTRA_FIELDS, fetchedFields),
+		() =>
+			sortByDefaultOrder(
+				mergeExtraFields(TRACE_VIEW_COLUMN_EXTRA_FIELDS, fetchedFields),
+			),
 		[fetchedFields],
 	);
 

frontend/src/container/LLMObservability/Settings/ModelPricing/LLMObservabilityModelPricing.module.scss

@@ -2,11 +2,10 @@
 	display: flex;
 	flex-direction: column;
 	gap: var(--spacing-8);
-	--tabs-content-padding: 0;
-	margin-top: var(--spacing-3);
-	padding: var(--spacing-0) var(--spacing-8);
-	--tabs-text-color: var(--l1-foreground);
-	--tabs-active-text-color: var(--l1-foreground);
+
+	:global(.ant-tabs-tabpane) {
+		padding: var(--spacing-0) var(--spacing-8);
+	}
 }
 
 .tabLabel {

frontend/src/container/LLMObservability/Settings/ModelPricing/LLMObservabilityModelPricing.tsx

@@ -1,5 +1,5 @@
 import { Badge } from '@signozhq/ui/badge';
-import { Tabs } from '@signozhq/ui/tabs';
+import { Tabs } from 'antd';
 import { useListUnmappedLLMModels } from 'api/generated/services/llmpricingrules';
 import { parseAsStringEnum, useQueryState } from 'nuqs';
 
@@ -26,7 +26,7 @@ function LLMObservabilityModelPricing(): JSX.Element {
 			data-testid="llm-observability-model-pricing-page"
 		>
 			<Tabs
-				value={activeTab}
+				activeKey={activeTab}
 				onChange={(key): void => {
 					void setActiveTab(key as typeof activeTab);
 				}}

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/ModelCostDrawer.module.scss

@@ -1,3 +1,7 @@
+.fieldLabel {
+	composes: fieldLabel from './shared.module.scss';
+}
+
 .drawerSection {
 	composes: drawerSection from './shared.module.scss';
 }
@@ -17,6 +21,9 @@
 	--dialog-header-padding: var(--spacing-10) var(--spacing-12);
 	--dialog-footer-padding: var(--spacing-8) var(--spacing-12);
 
+	--input-foreground: var(--l1-foreground);
+	--input-placeholder-color: var(--l3-foreground);
+
 	display: flex;
 	overflow: hidden;
 

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/ModelCostDrawer.tsx

@@ -109,7 +109,7 @@ function ModelCostDrawer({
 			drawerHeaderProps={{ className: styles.title }}
 		>
 			<div className={styles.drawerSection}>
-				<label htmlFor="billing-model-id">
+				<label htmlFor="billing-model-id" className={styles.fieldLabel}>
 					Billing Model ID{' '}
 					<span className={styles.required} aria-hidden="true">
 						*
@@ -144,7 +144,9 @@ function ModelCostDrawer({
 			</div>
 
 			<div className={styles.drawerSection}>
-				<label htmlFor="provider-select">Provider</label>
+				<label htmlFor="provider-select" className={styles.fieldLabel}>
+					Provider
+				</label>
 				<Controller
 					name="provider"
 					control={control}

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/ExtraPricingBuckets/ExtraPricingBuckets.module.scss

@@ -1,3 +1,7 @@
+.fieldLabel {
+	composes: fieldLabel from '../../shared.module.scss';
+}
+
 .drawerSection {
 	composes: drawerSection from '../../shared.module.scss';
 }

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/ExtraPricingBuckets/ExtraPricingBuckets.tsx

@@ -67,9 +67,7 @@ function ExtraPricingBuckets({
 	return (
 		<div className={cx(styles.extraBucketsSection, styles.drawerSection)}>
 			<div className={styles.extraBucketsSectionHead}>
-				<Typography.Text as="span" size="small" color="muted">
-					Extra Pricing Buckets
-				</Typography.Text>
+				<span className={styles.fieldLabel}>Extra Pricing Buckets</span>
 				<Typography.Text as="span" size="small" color="muted">
 					Optional
 				</Typography.Text>
@@ -116,7 +114,9 @@ function ExtraPricingBuckets({
 
 			{addedBuckets.length > 0 && (
 				<div className={cx(styles.pricingField, styles.cacheModeField)}>
-					<label htmlFor="cache-mode">Cache mode</label>
+					<label htmlFor="cache-mode" className={styles.fieldLabel}>
+						Cache mode
+					</label>
 					<SelectSimple
 						id="cache-mode"
 						value={pricing.cacheMode}

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/PatternEditor/PatternEditor.module.scss

@@ -1,3 +1,7 @@
+.fieldLabel {
+	composes: fieldLabel from '../../shared.module.scss';
+}
+
 .drawerSection {
 	composes: drawerSection from '../../shared.module.scss';
 }

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/PatternEditor/PatternEditor.tsx

@@ -37,12 +37,12 @@ function PatternEditor({
 
 	return (
 		<div className={styles.drawerSection}>
-			<Typography.Text as="span">
+			<span className={styles.fieldLabel}>
 				Model name patterns{' '}
 				<Typography.Text as="span" color="muted">
 					(prefix match)
 				</Typography.Text>
-			</Typography.Text>
+			</span>
 			<div className={styles.patternBox}>
 				<div className={styles.patternChips}>
 					{patterns.map((pattern) => (

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/PricingFields/PricingFields.module.scss

@@ -1,3 +1,7 @@
+.fieldLabel {
+	composes: fieldLabel from '../../shared.module.scss';
+}
+
 .drawerSection {
 	composes: drawerSection from '../../shared.module.scss';
 }

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/PricingFields/PricingFields.tsx

@@ -24,9 +24,7 @@ function PricingFields({
 	return (
 		<div className={cx(styles.drawerSection, styles.drawerSurface)}>
 			<div className={styles.drawerSurfaceHead}>
-				<Typography.Text size="base" weight="bold">
-					Pricing (per 1M tokens, USD)
-				</Typography.Text>
+				<span className={styles.fieldLabel}>Pricing (per 1M tokens, USD)</span>
 
 				{isReadOnly && (
 					<span className={styles.managedLabel} data-testid="drawer-readonly-label">
@@ -38,7 +36,7 @@ function PricingFields({
 			</div>
 			<div className={styles.pricingGrid}>
 				<div className={styles.pricingField}>
-					<label htmlFor="input-cost">
+					<label htmlFor="input-cost" className={styles.fieldLabel}>
 						Input Cost{' '}
 						<span className={styles.required} aria-hidden="true">
 							*
@@ -58,7 +56,7 @@ function PricingFields({
 					/>
 				</div>
 				<div className={styles.pricingField}>
-					<label htmlFor="output-cost">
+					<label htmlFor="output-cost" className={styles.fieldLabel}>
 						Output Cost{' '}
 						<span className={styles.required} aria-hidden="true">
 							*

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/SourceSelector/SourceSelector.module.scss

@@ -1,3 +1,7 @@
+.fieldLabel {
+	composes: fieldLabel from '../../shared.module.scss';
+}
+
 .drawerSection {
 	composes: drawerSection from '../../shared.module.scss';
 }

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/SourceSelector/SourceSelector.tsx

@@ -2,7 +2,6 @@ import { useState } from 'react';
 import { Button } from '@signozhq/ui/button';
 import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
 import { Lock } from '@signozhq/icons';
-import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 
 import styles from './SourceSelector.module.scss';
@@ -42,9 +41,7 @@ function SourceSelector({
 	return (
 		<div className={cx(styles.drawerSection, styles.drawerSurface)}>
 			<div className={styles.drawerSurfaceHead}>
-				<Typography.Text weight="bold" size="base">
-					Source
-				</Typography.Text>
+				<span className={styles.fieldLabel}>Source</span>
 
 				{isReadOnly && (
 					<span className={styles.managedLabel} data-testid="drawer-managed-label">

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/shared.module.scss

@@ -47,6 +47,14 @@
 	color: var(--accent-cherry);
 }
 
+/* Single treatment for every label in the drawer, so field labels and the */
+.fieldLabel {
+	font-size: var(--periscope-font-size-base);
+	font-weight: var(--font-weight-medium);
+	line-height: var(--spacing-10);
+	color: var(--l2-foreground);
+}
+
 .pricingField {
 	display: flex;
 	flex-direction: column;

frontend/src/container/LLMObservability/Settings/ModelPricing/UnpricedModelsTab/__tests__/UnpricedModelsTab.test.tsx

@@ -167,7 +167,7 @@ describe('UnpricedModelsTab (integration)', () => {
 
 		await screen.findByTestId(`unpriced-model-name-${MODEL}`);
 
-		// Open the row's dropdown and take the "Create pricing for …" escape hatch
+		// Open the row's dropdown and take the "Create a new pricing model" escape hatch
 		// instead of mapping onto an existing billing model.
 		await user.click(screen.getByTestId(`map-to-select-${MODEL}`));
 		await user.click(await screen.findByTestId(`map-to-create-${MODEL}`));

frontend/src/container/LLMObservability/Settings/ModelPricing/UnpricedModelsTab/components/MapToBillingModelSelect/MapToBillingModelSelect.module.scss

@@ -14,6 +14,24 @@
 	width: 280px;
 }
 
+.footer {
+	padding: var(--spacing-2);
+	background-color: var(--l2-background);
+}
+
+.createItem {
+	gap: var(--spacing-4);
+	font-style: normal;
+	color: var(--accent-primary);
+	--command-item-cursor: pointer;
+	--command-item-svg-size: var(--spacing-7);
+
+	&[data-selected='true'] {
+		background-color: var(--callout-primary-background);
+		color: var(--accent-primary);
+	}
+}
+
 .skeletonList {
 	display: flex;
 	flex-direction: column;

frontend/src/container/LLMObservability/Settings/ModelPricing/UnpricedModelsTab/components/MapToBillingModelSelect/MapToBillingModelSelect.tsx

@@ -119,15 +119,18 @@ function MapToBillingModelSelect({
 						    options scroll. Escape hatch when no existing billing model fits:
 						    define this model's own pricing rather than mapping onto another. */}
 						<ComboboxSeparator alwaysRender />
-						<ComboboxCreateItem
-							inputValue={modelName}
-							value={`create-pricing-${modelName}`}
-							prefix={<Plus size={14} />}
-							onSelect={handleCreateNew}
-							testId={`map-to-create-${modelName}`}
-						>
-							Create pricing for &quot;{modelName}&quot;
-						</ComboboxCreateItem>
+						<div className={styles.footer}>
+							<ComboboxCreateItem
+								className={styles.createItem}
+								inputValue={modelName}
+								value={`create-pricing-${modelName}`}
+								prefix={<Plus size={14} />}
+								onSelect={handleCreateNew}
+								testId={`map-to-create-${modelName}`}
+							>
+								Create a new pricing model
+							</ComboboxCreateItem>
+						</div>
 					</ComboboxCommand>
 				</ComboboxContent>
 			</Combobox>

frontend/src/container/MeterExplorer/Explorer/Explorer.styles.scss

@@ -1,7 +1,18 @@
 .meter-explorer-container {
+	display: flex;
+	flex-direction: row;
+
+	.meter-explorer-quick-filters-section {
+		width: 280px;
+		border-right: 1px solid var(--l1-border);
+
+		&.hidden {
+			display: none;
+		}
+	}
+
 	.meter-explorer-content-section {
-		// Clearance for the fixed ExplorerOptions bar.
-		padding-bottom: 80px;
+		width: 100%;
 
 		// Meant to fix the query builder colors
 		--input-background: var(--l2-background);
@@ -72,6 +83,14 @@
 			}
 		}
 	}
+
+	&.quick-filters-open {
+		.meter-explorer-content-section {
+			width: calc(100% - 280px);
+		}
+	}
+
+	padding-bottom: 80px;
 }
 
 .dashboards-and-alerts-popover-container {

frontend/src/container/MeterExplorer/Explorer/Explorer.tsx

@@ -3,8 +3,9 @@ import { useQueryClient } from 'react-query';
 import * as Sentry from '@sentry/react';
 import { Button, Tooltip } from 'antd';
 import logEvent from 'api/common/logEvent';
+import cx from 'classnames';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
-import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
+import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import { initialQueryMeterWithType, PANEL_TYPES } from 'constants/queryBuilder';
@@ -120,21 +121,29 @@ function Explorer(): JSX.Element {
 
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<QuickFiltersLayout
-				className="meter-explorer-container"
-				showFilters={showQuickFilters}
-				quickFilterProps={{
-					className: 'qf-meter-explorer',
-					source: QuickFiltersSource.METER_EXPLORER,
-					signal: SignalType.METER_EXPLORER,
-					showFilterCollapse: true,
-					showQueryName: false,
-					handleFilterVisibilityChange: (): void => {
-						setShowQuickFilters(!showQuickFilters);
-					},
-					useFieldApis: quickFilterFieldApis,
-				}}
+			<div
+				className={cx('meter-explorer-container', {
+					'quick-filters-open': showQuickFilters,
+				})}
 			>
+				<div
+					className={cx('meter-explorer-quick-filters-section', {
+						hidden: !showQuickFilters,
+					})}
+				>
+					<QuickFilters
+						className="qf-meter-explorer"
+						source={QuickFiltersSource.METER_EXPLORER}
+						signal={SignalType.METER_EXPLORER}
+						showFilterCollapse
+						showQueryName={false}
+						handleFilterVisibilityChange={(): void => {
+							setShowQuickFilters(!showQuickFilters);
+						}}
+						useFieldApis={quickFilterFieldApis}
+					/>
+				</div>
+
 				<div className="meter-explorer-content-section">
 					<div className="meter-explorer-explore-content">
 						<div className="explore-header">
@@ -187,7 +196,7 @@ function Explorer(): JSX.Element {
 						splitedQueries={splitedQueries}
 					/>
 				</div>
-			</QuickFiltersLayout>
+			</div>
 		</Sentry.ErrorBoundary>
 	);
 }

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

@@ -1,6 +1,7 @@
 import {
 	MetricsexplorertypesMetricAlertDTO,
 	MetricsexplorertypesMetricAttributeDTO,
+	MetricsexplorertypesMetricDashboardDTO,
 	MetricsexplorertypesMetricHighlightsResponseDTO,
 	MetricsexplorertypesMetricMetadataDTO,
 	MetrictypesTemporalityDTO,
@@ -54,6 +55,8 @@ export type MetricHighlight = MetricsexplorertypesMetricHighlightsResponseDTO;
 
 export type MetricAlert = MetricsexplorertypesMetricAlertDTO;
 
+export type MetricDashboard = MetricsexplorertypesMetricDashboardDTO;
+
 export type MetricMetadata = MetricsexplorertypesMetricMetadataDTO;
 export interface MetricMetadataFormState {
 	type: MetrictypesTypeDTO;

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

@@ -60,6 +60,9 @@
 	.metrics-table-container {
 		padding-bottom: 48px;
 		.ant-table {
+			margin-left: -16px;
+			margin-right: -16px;
+
 			.ant-table-thead > tr > th {
 				padding: 12px;
 				font-weight: 500;

frontend/src/pages/AllErrors/AllErrors.styles.scss

@@ -1,4 +1,11 @@
 .all-errors-page {
+	display: flex;
+	height: 100%;
+	.all-errors-quick-filter-section {
+		width: 0%;
+		flex-shrink: 0;
+	}
+
 	.all-errors-right-section {
 		.right-toolbar-actions-container {
 			display: flex;
@@ -11,4 +18,14 @@
 	.ant-tabs {
 		margin: 0 8px;
 	}
+
+	&.filter-visible {
+		.all-errors-quick-filter-section {
+			width: 260px;
+		}
+
+		.all-errors-right-section {
+			width: calc(100% - 260px);
+		}
+	}
 }

frontend/src/pages/AllErrors/index.tsx

@@ -5,11 +5,13 @@ import { Filter } from '@signozhq/icons';
 import { Button, Tooltip } from 'antd';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
+import cx from 'classnames';
 import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
-import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
+import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import RouteTab from 'components/RouteTab';
+import TypicalOverlayScrollbar from 'components/TypicalOverlayScrollbar/TypicalOverlayScrollbar';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import ResourceAttributesFilterV2 from 'container/ResourceAttributeFilterV2/ResourceAttributesFilterV2';
@@ -57,52 +59,63 @@ function AllErrors(): JSX.Element {
 	const quickFilterFieldApis = useSignalFieldApis();
 
 	return (
-		<QuickFiltersLayout
-			className="all-errors-page"
-			contentClassName="all-errors-right-section"
-			showFilters={showFilters}
-			quickFilterProps={{
-				className: 'qf-exceptions',
-				source: QuickFiltersSource.EXCEPTIONS,
-				signal: SignalType.EXCEPTIONS,
-				handleFilterVisibilityChange,
-				useFieldApis: quickFilterFieldApis,
-			}}
-		>
-			<Toolbar
-				showAutoRefresh={false}
-				leftActions={
-					!showFilters ? (
-						<Tooltip title="Show Filters">
-							<Button onClick={handleFilterVisibilityChange} className="filter-btn">
-								<Filter size="md" />
-							</Button>
-						</Tooltip>
-					) : undefined
-				}
-				rightActions={
-					<div className="right-toolbar-actions-container">
-						<RightToolbarActions
-							onStageRunQuery={handleRunQuery}
-							isLoadingQueries={isLoadingQueries}
-							handleCancelQuery={handleCancelQuery}
+		<div className={cx('all-errors-page', showFilters ? 'filter-visible' : '')}>
+			{showFilters && (
+				<section className={cx('all-errors-quick-filter-section')}>
+					<QuickFilters
+						className="qf-exceptions"
+						source={QuickFiltersSource.EXCEPTIONS}
+						signal={SignalType.EXCEPTIONS}
+						handleFilterVisibilityChange={handleFilterVisibilityChange}
+						useFieldApis={quickFilterFieldApis}
+					/>
+				</section>
+			)}
+			<section
+				className={cx(
+					'all-errors-right-section',
+					showFilters ? 'filter-visible' : '',
+				)}
+			>
+				<TypicalOverlayScrollbar>
+					<>
+						<Toolbar
+							showAutoRefresh={false}
+							leftActions={
+								!showFilters ? (
+									<Tooltip title="Show Filters">
+										<Button onClick={handleFilterVisibilityChange} className="filter-btn">
+											<Filter size="md" />
+										</Button>
+									</Tooltip>
+								) : undefined
+							}
+							rightActions={
+								<div className="right-toolbar-actions-container">
+									<RightToolbarActions
+										onStageRunQuery={handleRunQuery}
+										isLoadingQueries={isLoadingQueries}
+										handleCancelQuery={handleCancelQuery}
+									/>
+									<HeaderRightSection
+										enableAnnouncements={false}
+										enableShare
+										enableFeedback
+									/>
+								</div>
+							}
 						/>
-						<HeaderRightSection
-							enableAnnouncements={false}
-							enableShare
-							enableFeedback
+						<ResourceAttributesFilterV2 />
+						<RouteTab
+							routes={routes}
+							activeKey={pathname}
+							history={history}
+							showRightSection={false}
 						/>
-					</div>
-				}
-			/>
-			<ResourceAttributesFilterV2 />
-			<RouteTab
-				routes={routes}
-				activeKey={pathname}
-				history={history}
-				showRightSection={false}
-			/>
-		</QuickFiltersLayout>
+					</>
+				</TypicalOverlayScrollbar>
+			</section>
+		</div>
 	);
 }
 

frontend/src/pages/ApiMonitoring/ApiMonitoringPage.styles.scss

@@ -1,4 +1,11 @@
 .api-monitoring-page {
+	flex: 1;
+	display: flex;
+
+	.ant-tabs {
+		flex: 1;
+	}
+
 	.ant-tabs-nav {
 		padding: 0 16px;
 		margin-bottom: 0px;
@@ -8,6 +15,22 @@
 		}
 	}
 
+	.ant-tabs-content-holder {
+		display: flex;
+
+		.ant-tabs-content {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+
+			.ant-tabs-tabpane {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+			}
+		}
+	}
+
 	.tab-item {
 		display: flex;
 		justify-content: center;

frontend/src/pages/ApiMonitoring/ApiMonitoringPage.tsx

@@ -13,12 +13,9 @@ function ApiMonitoringPage(): JSX.Element {
 	const routes: TabRoutes[] = [Explorer];
 
 	return (
-		<RouteTab
-			className="api-monitoring-page"
-			routes={routes}
-			activeKey={pathname}
-			history={history}
-		/>
+		<div className="api-monitoring-page">
+			<RouteTab routes={routes} activeKey={pathname} history={history} />
+		</div>
 	);
 }
 

frontend/src/pages/InfrastructureMonitoring/InfrastructureMonitoring.styles.scss

@@ -1,4 +1,13 @@
 .infra-monitoring-module-container {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+
+	.ant-tabs {
+		height: 100%;
+	}
+
 	.ant-tabs-nav {
 		padding: 0 8px;
 		margin-bottom: 0px;
@@ -8,6 +17,22 @@
 		}
 	}
 
+	.ant-tabs-content-holder {
+		display: flex;
+
+		.ant-tabs-content {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+
+			.ant-tabs-tabpane {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+			}
+		}
+	}
+
 	.tab-item {
 		display: flex;
 		justify-content: center;

frontend/src/pages/InfrastructureMonitoring/InfrastructureMonitoringPage.tsx

@@ -13,11 +13,8 @@ export default function InfrastructureMonitoringPage(): JSX.Element {
 	const routes: TabRoutes[] = [Hosts, Kubernetes];
 
 	return (
-		<RouteTab
-			className="infra-monitoring-module-container"
-			routes={routes}
-			activeKey={pathname}
-			history={history}
-		/>
+		<div className="infra-monitoring-module-container">
+			<RouteTab routes={routes} activeKey={pathname} history={history} />
+		</div>
 	);
 }

frontend/src/pages/LLMObservability/LLMObservability.styles.scss

@@ -22,5 +22,6 @@
 		justify-content: center;
 		align-items: center;
 		gap: var(--spacing-4);
+		padding: var(--spacing-1) var(--spacing-0);
 	}
 }

frontend/src/pages/LogsModulePage/LogsModulePage.styles.scss

@@ -1,4 +1,16 @@
 .logs-module-container {
+	flex: 1;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+
+	.ant-tabs {
+		flex: 1;
+		min-height: 0;
+		display: flex;
+		flex-direction: column;
+	}
+
 	.ant-tabs-nav {
 		padding: 0 16px;
 		margin-bottom: 0px;
@@ -8,6 +20,25 @@
 		}
 	}
 
+	.ant-tabs-content-holder {
+		display: flex;
+		min-height: 0;
+
+		.ant-tabs-content {
+			flex: 1;
+			min-height: 0;
+			display: flex;
+			flex-direction: column;
+
+			.ant-tabs-tabpane {
+				flex: 1;
+				min-height: 0;
+				display: flex;
+				flex-direction: column;
+			}
+		}
+	}
+
 	.tab-item {
 		display: flex;
 		justify-content: center;

frontend/src/pages/LogsModulePage/LogsModulePage.tsx

@@ -13,11 +13,8 @@ export default function LogsModulePage(): JSX.Element {
 	const routes: TabRoutes[] = [logsExplorer, logsPipelines, logSaveView];
 
 	return (
-		<RouteTab
-			className="logs-module-container"
-			routes={routes}
-			activeKey={pathname}
-			history={history}
-		/>
+		<div className="logs-module-container">
+			<RouteTab routes={routes} activeKey={pathname} history={history} />
+		</div>
 	);
 }

frontend/src/pages/MessagingQueues/MessagingQueuesMainPage.styles.scss

@@ -1,4 +1,13 @@
 .messaging-queues-module-container {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+
+	.ant-tabs {
+		height: 100%;
+	}
+
 	.ant-tabs-nav {
 		padding: 0 8px;
 		margin-bottom: 0px;
@@ -8,6 +17,22 @@
 		}
 	}
 
+	.ant-tabs-content-holder {
+		display: flex;
+
+		.ant-tabs-content {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+
+			.ant-tabs-tabpane {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+			}
+		}
+	}
+
 	.tab-item {
 		display: flex;
 		justify-content: center;

frontend/src/pages/MessagingQueues/MessagingQueuesMainPage.tsx

@@ -68,11 +68,8 @@ export default function MessagingQueuesMainPage(): JSX.Element {
 	];
 
 	return (
-		<RouteTab
-			className="messaging-queues-module-container"
-			routes={routes}
-			activeKey={pathname}
-			history={history}
-		/>
+		<div className="messaging-queues-module-container">
+			<RouteTab routes={routes} activeKey={pathname} history={history} />
+		</div>
 	);
 }

frontend/src/pages/MeterExplorer/MeterExplorerPage.tsx

@@ -14,13 +14,14 @@ function MeterExplorerPage(): JSX.Element {
 	const routes: TabRoutes[] = [Meter, Explorer, Views];
 
 	return (
-		<RouteTab
-			className="meter-explorer-page"
-			routes={routes}
-			activeKey={pathname}
-			history={history}
-			defaultActiveKey={ROUTES.METER}
-		/>
+		<div className="meter-explorer-page">
+			<RouteTab
+				routes={routes}
+				activeKey={pathname}
+				history={history}
+				defaultActiveKey={ROUTES.METER}
+			/>
+		</div>
 	);
 }
 

frontend/src/pages/MetricsExplorer/MetricsExplorerPage.styles.scss

@@ -1,4 +1,13 @@
 .metrics-explorer-page {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+
+	.ant-tabs {
+		height: 100%;
+	}
+
 	.ant-tabs-nav {
 		padding-left: 16px;
 		margin-bottom: 0px;
@@ -9,7 +18,20 @@
 	}
 
 	.ant-tabs-content-holder {
+		display: flex;
 		padding: 16px;
+
+		.ant-tabs-content {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+
+			.ant-tabs-tabpane {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+			}
+		}
 	}
 
 	.tab-item {

frontend/src/pages/MetricsExplorer/MetricsExplorerPage.tsx

@@ -42,12 +42,9 @@ function MetricsExplorerPage(): JSX.Element {
 	useShareBuilderUrl({ defaultValue: defaultQuery });
 
 	return (
-		<RouteTab
-			className="metrics-explorer-page"
-			routes={routes}
-			activeKey={pathname}
-			history={history}
-		/>
+		<div className="metrics-explorer-page">
+			<RouteTab routes={routes} activeKey={pathname} history={history} />
+		</div>
 	);
 }
 

frontend/src/pages/TracesExplorer/TracesExplorer.styles.scss

@@ -65,6 +65,8 @@
 }
 
 .trace-explorer-page {
+	display: flex;
+
 	// Meant to fix the query builder colors
 	--input-background: var(--l2-background);
 	--input-hover-background: var(--l2-background);
@@ -73,8 +75,32 @@
 	--input-hover-border-color: var(--internal-ant-border-color-hover);
 	--input-focus-border-color: var(--internal-ant-border-color-hover);
 
+	.filter {
+		width: 260px;
+		height: 100%;
+		min-height: 100vh;
+
+		border-right: 0px;
+		border: 1px solid var(--l1-border);
+		background-color: var(--l1-background);
+
+		> .ant-card-body {
+			padding: 0;
+			width: 258px;
+		}
+	}
+
 	.trace-explorer {
+		width: 100%;
 		background: var(--l1-background);
+
+		> .ant-card-body {
+			padding: 0;
+		}
+
 		border-color: var(--l1-border);
 	}
+	.trace-explorer.filters-expanded {
+		width: calc(100% - 260px);
+	}
 }

frontend/src/pages/TracesExplorer/index.tsx

@@ -2,10 +2,12 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
+import { Card } from 'antd';
 import logEvent from 'api/common/logEvent';
+import cx from 'classnames';
 import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
 import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
-import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
+import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
@@ -259,20 +261,23 @@ function TracesExplorer(): JSX.Element {
 
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<QuickFiltersLayout
-				className="trace-explorer-page"
-				showFilters={isOpen}
-				quickFilterProps={{
-					className: 'qf-traces-explorer',
-					source: QuickFiltersSource.TRACES_EXPLORER,
-					signal: SignalType.TRACES,
-					handleFilterVisibilityChange: (): void => {
-						setOpen(!isOpen);
-					},
-					useFieldApis: quickFilterFieldApis,
-				}}
-			>
-				<div className="trace-explorer">
+			<div className="trace-explorer-page">
+				<Card className="filter" hidden={!isOpen}>
+					<QuickFilters
+						className="qf-traces-explorer"
+						source={QuickFiltersSource.TRACES_EXPLORER}
+						signal={SignalType.TRACES}
+						handleFilterVisibilityChange={(): void => {
+							setOpen(!isOpen);
+						}}
+						useFieldApis={quickFilterFieldApis}
+					/>
+				</Card>
+				<div
+					className={cx('trace-explorer', {
+						'filters-expanded': isOpen,
+					})}
+				>
 					<div className="trace-explorer-header">
 						<Toolbar
 							showAutoRefresh
@@ -364,7 +369,7 @@ function TracesExplorer(): JSX.Element {
 						handleChangeSelectedView={handleChangeSelectedView}
 					/>
 				</div>
-			</QuickFiltersLayout>
+			</div>
 		</Sentry.ErrorBoundary>
 	);
 }

frontend/src/pages/TracesModulePage/TracesModulePage.tsx

@@ -25,15 +25,16 @@ function TracesModulePage(): JSX.Element {
 	};
 
 	return (
-		<RouteTab
-			className="traces-module-container"
-			routes={routes}
-			activeKey={
-				pathname.includes(ROUTES.TRACES_FUNNELS) ? ROUTES.TRACES_FUNNELS : pathname
-			}
-			history={history}
-			onChangeHandler={handleTabChange}
-		/>
+		<div className="traces-module-container">
+			<RouteTab
+				routes={routes}
+				activeKey={
+					pathname.includes(ROUTES.TRACES_FUNNELS) ? ROUTES.TRACES_FUNNELS : pathname
+				}
+				history={history}
+				onChangeHandler={handleTabChange}
+			/>
+		</div>
 	);
 }
 

pkg/apiserver/signozapiserver/dashboard.go

@@ -630,6 +630,62 @@ func (provider *provider) addDashboardRoutes(router *mux.Router) error {
 		return err
 	}
 
+	if err := router.Handle("/api/v1/public/dashboards/{id}", handler.New(provider.authzMiddleware.CheckWithoutClaims(
+		provider.dashboardHandler.GetPublicData,
+		authtypes.Relation{Verb: coretypes.VerbRead},
+		coretypes.ResourceMetaResourcePublicDashboard,
+		func(req *http.Request, orgs []*types.Organization) ([]coretypes.Selector, valuer.UUID, error) {
+			id, err := valuer.NewUUID(mux.Vars(req)["id"])
+			if err != nil {
+				return nil, valuer.UUID{}, err
+			}
+
+			return provider.dashboardModule.GetPublicDashboardSelectorsAndOrg(req.Context(), id, orgs)
+		}, []string{}), handler.OpenAPIDef{
+		ID:                  "GetPublicDashboardData",
+		Tags:                []string{"dashboard"},
+		Summary:             "Get public dashboard data",
+		Description:         "This endpoint returns the sanitized dashboard data for public access",
+		Request:             nil,
+		RequestContentType:  "",
+		Response:            new(dashboardtypes.GettablePublicDashboardData),
+		ResponseContentType: "application/json",
+		SuccessStatusCode:   http.StatusOK,
+		ErrorStatusCodes:    []int{},
+		Deprecated:          false,
+		SecuritySchemes:     newAnonymousSecuritySchemes([]string{coretypes.ResourceMetaResourcePublicDashboard.Scope(coretypes.VerbRead)}),
+	})).Methods(http.MethodGet).GetError(); err != nil {
+		return err
+	}
+
+	if err := router.Handle("/api/v1/public/dashboards/{id}/widgets/{idx}/query_range", handler.New(provider.authzMiddleware.CheckWithoutClaims(
+		provider.dashboardHandler.GetPublicWidgetQueryRange,
+		authtypes.Relation{Verb: coretypes.VerbRead},
+		coretypes.ResourceMetaResourcePublicDashboard,
+		func(req *http.Request, orgs []*types.Organization) ([]coretypes.Selector, valuer.UUID, error) {
+			id, err := valuer.NewUUID(mux.Vars(req)["id"])
+			if err != nil {
+				return nil, valuer.UUID{}, err
+			}
+
+			return provider.dashboardModule.GetPublicDashboardSelectorsAndOrg(req.Context(), id, orgs)
+		}, []string{}), handler.OpenAPIDef{
+		ID:                  "GetPublicDashboardWidgetQueryRange",
+		Tags:                []string{"dashboard"},
+		Summary:             "Get query range result",
+		Description:         "This endpoint return query range results for a widget of public dashboard",
+		Request:             nil,
+		RequestContentType:  "",
+		Response:            new(querybuildertypesv5.QueryRangeResponse),
+		ResponseContentType: "application/json",
+		SuccessStatusCode:   http.StatusOK,
+		ErrorStatusCodes:    []int{},
+		Deprecated:          false,
+		SecuritySchemes:     newAnonymousSecuritySchemes([]string{coretypes.ResourceMetaResourcePublicDashboard.Scope(coretypes.VerbRead)}),
+	})).Methods(http.MethodGet).GetError(); err != nil {
+		return err
+	}
+
 	if err := router.Handle("/api/v2/public/dashboards/{id}", handler.New(provider.authzMiddleware.CheckWithoutClaims(
 		provider.dashboardHandler.GetPublicDataV2,
 		authtypes.Relation{Verb: coretypes.VerbRead},

pkg/apiserver/signozapiserver/metricsexplorer.go

@@ -167,6 +167,26 @@ func (provider *provider) addMetricsExplorerRoutes(router *mux.Router) error {
 		return err
 	}
 
+	if err := router.Handle("/api/v2/metrics/dashboards", handler.New(
+		provider.authzMiddleware.ViewAccess(provider.metricsExplorerHandler.GetMetricDashboards),
+		handler.OpenAPIDef{
+			ID:                  "GetMetricDashboards",
+			Tags:                []string{"metrics"},
+			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",
+			SuccessStatusCode:   http.StatusOK,
+			ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusUnauthorized, http.StatusNotFound, http.StatusInternalServerError},
+			Deprecated:          false,
+			SecuritySchemes:     newSecuritySchemes(types.RoleViewer),
+		})).Methods(http.MethodGet).GetError(); err != nil {
+		return err
+	}
+
 	if err := router.Handle("/api/v3/metrics/dashboards", handler.New(
 		provider.authzMiddleware.ViewAccess(provider.metricsExplorerHandler.GetMetricDashboardsV2),
 		handler.OpenAPIDef{

pkg/modules/dashboard/dashboard.go

@@ -19,6 +19,12 @@ type Module interface {
 	// gets the public sharing config for the dashboard
 	GetPublic(context.Context, valuer.UUID, valuer.UUID) (*dashboardtypes.PublicDashboard, error)
 
+	// get the dashboard data by public dashboard id
+	GetDashboardByPublicID(context.Context, valuer.UUID) (*dashboardtypes.Dashboard, error)
+
+	// gets the query results by widget index and public shared id for a dashboard
+	GetPublicWidgetQueryRange(context.Context, valuer.UUID, uint64, uint64, uint64) (*querybuildertypesv5.QueryRangeResponse, error)
+
 	// gets the selectors and org for the given public dashboard
 	GetPublicDashboardSelectorsAndOrg(context.Context, valuer.UUID, []*types.Organization) ([]coretypes.Selector, valuer.UUID, error)
 
@@ -28,6 +34,23 @@ type Module interface {
 	// deletes the public sharing config and disables public sharing for the dashboard
 	DeletePublic(context.Context, valuer.UUID, valuer.UUID) error
 
+	Create(ctx context.Context, orgID valuer.UUID, createdBy string, creator valuer.UUID, source dashboardtypes.Source, data dashboardtypes.PostableDashboard) (*dashboardtypes.Dashboard, error)
+
+	Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*dashboardtypes.Dashboard, error)
+
+	List(ctx context.Context, orgID valuer.UUID) ([]*dashboardtypes.Dashboard, error)
+
+	Update(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, data dashboardtypes.UpdatableDashboard, diff int) (*dashboardtypes.Dashboard, error)
+
+	LockUnlock(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, isAdmin bool, lock bool) error
+
+	Delete(ctx context.Context, orgID valuer.UUID, id valuer.UUID) error
+
+	// DeleteUnsafe deletes a dashboard bypassing the guards. Intended for internal system callers.
+	DeleteUnsafe(ctx context.Context, orgID valuer.UUID, id valuer.UUID) error
+
+	GetByMetricNames(ctx context.Context, orgID valuer.UUID, metricNames []string) (map[string][]dashboardtypes.DashboardPanelRef, error)
+
 	statsreporter.StatsCollector
 
 	// ════════════════════════════════════════════════════════════════════════
@@ -95,6 +118,10 @@ type Handler interface {
 
 	GetPublic(http.ResponseWriter, *http.Request)
 
+	GetPublicData(http.ResponseWriter, *http.Request)
+
+	GetPublicWidgetQueryRange(http.ResponseWriter, *http.Request)
+
 	GetPublicDataV2(http.ResponseWriter, *http.Request)
 
 	GetPublicWidgetQueryRangeV2(http.ResponseWriter, *http.Request)
@@ -103,6 +130,14 @@ type Handler interface {
 
 	DeletePublic(http.ResponseWriter, *http.Request)
 
+	Create(http.ResponseWriter, *http.Request)
+
+	Update(http.ResponseWriter, *http.Request)
+
+	LockUnlock(http.ResponseWriter, *http.Request)
+
+	Delete(http.ResponseWriter, *http.Request)
+
 	// ════════════════════════════════════════════════════════════════════════
 	// v2 dashboard methods
 	// ════════════════════════════════════════════════════════════════════════

pkg/modules/dashboard/impldashboard/handler.go

@@ -3,9 +3,11 @@ package impldashboard
 import (
 	"context"
 	"net/http"
+	"strconv"
 	"time"
 
 	"github.com/SigNoz/signoz/pkg/authz"
+	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/factory"
 	"github.com/SigNoz/signoz/pkg/http/binding"
 	"github.com/SigNoz/signoz/pkg/http/render"
@@ -27,6 +29,22 @@ func NewHandler(module dashboard.Module, providerSettings factory.ProviderSettin
 	return &handler{module: module, providerSettings: providerSettings, authz: authz}
 }
 
+func (handler *handler) Create(rw http.ResponseWriter, r *http.Request) {
+	render.Error(rw, dashboardtypes.NewV1DeprecatedError("create a dashboard with POST /api/v2/dashboards"))
+}
+
+func (handler *handler) Update(rw http.ResponseWriter, r *http.Request) {
+	render.Error(rw, dashboardtypes.NewV1DeprecatedError("update a dashboard with PUT /api/v2/dashboards/{id}, or patch it with PATCH /api/v2/dashboards/{id}"))
+}
+
+func (handler *handler) LockUnlock(rw http.ResponseWriter, r *http.Request) {
+	render.Error(rw, dashboardtypes.NewV1DeprecatedError("lock a dashboard with PUT /api/v2/dashboards/{id}/lock, or unlock it with DELETE /api/v2/dashboards/{id}/lock"))
+}
+
+func (handler *handler) Delete(rw http.ResponseWriter, r *http.Request) {
+	render.Error(rw, dashboardtypes.NewV1DeprecatedError("delete a dashboard with DELETE /api/v2/dashboards/{id}"))
+}
+
 func (handler *handler) CreatePublic(rw http.ResponseWriter, r *http.Request) {
 	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
 	defer cancel()
@@ -43,7 +61,7 @@ func (handler *handler) CreatePublic(rw http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	_, err = handler.module.GetV2(ctx, valuer.MustNewUUID(claims.OrgID), id)
+	_, err = handler.module.Get(ctx, valuer.MustNewUUID(claims.OrgID), id)
 	if err != nil {
 		render.Error(rw, err)
 		return
@@ -81,7 +99,7 @@ func (handler *handler) GetPublic(rw http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	_, err = handler.module.GetV2(ctx, valuer.MustNewUUID(claims.OrgID), id)
+	_, err = handler.module.Get(ctx, valuer.MustNewUUID(claims.OrgID), id)
 	if err != nil {
 		render.Error(rw, err)
 		return
@@ -96,6 +114,107 @@ func (handler *handler) GetPublic(rw http.ResponseWriter, r *http.Request) {
 	render.Success(rw, http.StatusOK, dashboardtypes.NewGettablePublicDashboard(publicDashboard))
 }
 
+func (handler *handler) GetPublicData(rw http.ResponseWriter, r *http.Request) {
+	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
+	defer cancel()
+
+	id, err := valuer.NewUUID(mux.Vars(r)["id"])
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	dashboard, err := handler.module.GetDashboardByPublicID(ctx, id)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	publicDashboard, err := handler.module.GetPublic(ctx, dashboard.OrgID, valuer.MustNewUUID(dashboard.ID))
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	gettablePublicDashboardData, err := dashboardtypes.NewPublicDashboardDataFromDashboard(dashboard, publicDashboard)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusOK, gettablePublicDashboardData)
+}
+
+func (handler *handler) GetPublicWidgetQueryRange(rw http.ResponseWriter, r *http.Request) {
+	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
+	defer cancel()
+
+	id, err := valuer.NewUUID(mux.Vars(r)["id"])
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	widgetIndex, ok := mux.Vars(r)["idx"]
+	if !ok {
+		render.Error(rw, errors.New(errors.TypeInvalidInput, dashboardtypes.ErrCodePublicDashboardInvalidInput, "widget index is missing from the path"))
+		return
+	}
+
+	dashboard, err := handler.module.GetDashboardByPublicID(ctx, id)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	publicDashboard, err := handler.module.GetPublic(ctx, dashboard.OrgID, valuer.MustNewUUID(dashboard.ID))
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	widgetIdx, err := strconv.ParseUint(widgetIndex, 10, 64)
+	if err != nil {
+		render.Error(rw, errors.New(errors.TypeInvalidInput, dashboardtypes.ErrCodePublicDashboardInvalidInput, "invalid widget index"))
+		return
+	}
+
+	var startTime, endTime uint64
+	if publicDashboard.TimeRangeEnabled {
+		startTimeUint, err := strconv.ParseUint(r.URL.Query().Get("startTime"), 10, 64)
+		if err != nil {
+			render.Error(rw, errors.New(errors.TypeInvalidInput, dashboardtypes.ErrCodePublicDashboardInvalidInput, "invalid startTime"))
+			return
+		}
+
+		endTimeUint, err := strconv.ParseUint(r.URL.Query().Get("endTime"), 10, 64)
+		if err != nil {
+			render.Error(rw, errors.New(errors.TypeInvalidInput, dashboardtypes.ErrCodePublicDashboardInvalidInput, "invalid endTime"))
+			return
+		}
+
+		startTime = startTimeUint
+		endTime = endTimeUint
+	} else {
+		timeRange, err := time.ParseDuration(publicDashboard.DefaultTimeRange)
+		if err != nil {
+			// this should't happen as we shouldn't let such values in DB
+			panic(err)
+		}
+
+		startTime = uint64(time.Now().Add(-timeRange).UnixMilli())
+		endTime = uint64(time.Now().UnixMilli())
+	}
+
+	queryRangeResults, err := handler.module.GetPublicWidgetQueryRange(ctx, id, widgetIdx, startTime, endTime)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusOK, queryRangeResults)
+}
+
 func (handler *handler) UpdatePublic(rw http.ResponseWriter, r *http.Request) {
 	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
 	defer cancel()
@@ -112,7 +231,7 @@ func (handler *handler) UpdatePublic(rw http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	_, err = handler.module.GetV2(ctx, valuer.MustNewUUID(claims.OrgID), id)
+	_, err = handler.module.Get(ctx, valuer.MustNewUUID(claims.OrgID), id)
 	if err != nil {
 		render.Error(rw, err)
 		return
@@ -156,7 +275,7 @@ func (handler *handler) DeletePublic(rw http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	_, err = handler.module.GetV2(ctx, valuer.MustNewUUID(claims.OrgID), id)
+	_, err = handler.module.Get(ctx, valuer.MustNewUUID(claims.OrgID), id)
 	if err != nil {
 		render.Error(rw, err)
 		return

pkg/modules/dashboard/impldashboard/module.go

@@ -2,6 +2,8 @@ package impldashboard
 
 import (
 	"context"
+	"log/slog"
+	"slices"
 
 	"github.com/SigNoz/signoz/pkg/analytics"
 	"github.com/SigNoz/signoz/pkg/errors"
@@ -9,6 +11,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/dashboard"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
 	"github.com/SigNoz/signoz/pkg/modules/tag"
+	"github.com/SigNoz/signoz/pkg/querybuilder"
 	"github.com/SigNoz/signoz/pkg/queryparser"
 	"github.com/SigNoz/signoz/pkg/types"
 	"github.com/SigNoz/signoz/pkg/types/coretypes"
@@ -39,6 +42,194 @@ func NewModule(store dashboardtypes.Store, settings factory.ProviderSettings, an
 		systemDashboardRegistry: systemDashboardRegistry,
 	}
 }
+
+func (module *module) Create(ctx context.Context, orgID valuer.UUID, createdBy string, creator valuer.UUID, source dashboardtypes.Source, postableDashboard dashboardtypes.PostableDashboard) (*dashboardtypes.Dashboard, error) {
+	dashboard, err := dashboardtypes.NewDashboard(orgID, createdBy, source, postableDashboard)
+	if err != nil {
+		return nil, err
+	}
+
+	storableDashboard, err := dashboardtypes.NewStorableDashboardFromDashboard(dashboard)
+	if err != nil {
+		return nil, err
+	}
+
+	err = module.store.Create(ctx, storableDashboard)
+	if err != nil {
+		return nil, err
+	}
+
+	module.analytics.TrackUser(ctx, orgID.String(), creator.String(), "Dashboard Created", dashboardtypes.NewStatsFromStorableDashboards([]*dashboardtypes.StorableDashboard{storableDashboard}))
+	return dashboard, nil
+}
+
+func (module *module) Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*dashboardtypes.Dashboard, error) {
+	storableDashboard, err := module.store.Get(ctx, orgID, id)
+	if err != nil {
+		return nil, err
+	}
+
+	return dashboardtypes.NewDashboardFromStorableDashboard(storableDashboard), nil
+}
+
+func (module *module) List(ctx context.Context, orgID valuer.UUID) ([]*dashboardtypes.Dashboard, error) {
+	storableDashboards, err := module.store.List(ctx, orgID)
+	if err != nil {
+		return nil, err
+	}
+
+	// system dashboards are hidden from the listing endpoint but still gettable by id.
+	filtered := make([]*dashboardtypes.StorableDashboard, 0, len(storableDashboards))
+	for _, storable := range storableDashboards {
+		if storable.Source == dashboardtypes.SourceSystem {
+			continue
+		}
+		filtered = append(filtered, storable)
+	}
+
+	return dashboardtypes.NewDashboardsFromStorableDashboards(filtered), nil
+}
+
+func (module *module) Update(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, updatableDashboard dashboardtypes.UpdatableDashboard, diff int) (*dashboardtypes.Dashboard, error) {
+	dashboard, err := module.Get(ctx, orgID, id)
+	if err != nil {
+		return nil, err
+	}
+
+	if err := dashboard.ErrIfNotMutable(); err != nil {
+		return nil, err
+	}
+
+	err = dashboard.Update(ctx, updatableDashboard, updatedBy, diff)
+	if err != nil {
+		return nil, err
+	}
+
+	storableDashboard, err := dashboardtypes.NewStorableDashboardFromDashboard(dashboard)
+	if err != nil {
+		return nil, err
+	}
+
+	err = module.store.Update(ctx, orgID, storableDashboard)
+	if err != nil {
+		return nil, err
+	}
+
+	return dashboard, nil
+}
+
+func (module *module) LockUnlock(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, isAdmin bool, lock bool) error {
+	dashboard, err := module.Get(ctx, orgID, id)
+	if err != nil {
+		return err
+	}
+
+	if err := dashboard.ErrIfNotLockable(); err != nil {
+		return err
+	}
+
+	err = dashboard.LockUnlock(lock, isAdmin, updatedBy)
+	if err != nil {
+		return err
+	}
+	storableDashboard, err := dashboardtypes.NewStorableDashboardFromDashboard(dashboard)
+	if err != nil {
+		return err
+	}
+
+	err = module.store.Update(ctx, orgID, storableDashboard)
+	if err != nil {
+		return err
+	}
+
+	return nil
+}
+
+func (module *module) Delete(ctx context.Context, orgID valuer.UUID, id valuer.UUID) error {
+	dashboard, err := module.Get(ctx, orgID, id)
+	if err != nil {
+		return err
+	}
+
+	if err := dashboard.ErrIfNotDeletable(); err != nil {
+		return err
+	}
+
+	if dashboard.Locked {
+		return errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "dashboard is locked, please unlock the dashboard to be delete it")
+	}
+
+	err = module.store.Delete(ctx, orgID, id)
+	if err != nil {
+		return err
+	}
+
+	return nil
+}
+
+func (module *module) DeleteUnsafe(ctx context.Context, orgID valuer.UUID, id valuer.UUID) error {
+	return module.store.Delete(ctx, orgID, id)
+}
+
+func (module *module) GetByMetricNames(ctx context.Context, orgID valuer.UUID, metricNames []string) (map[string][]dashboardtypes.DashboardPanelRef, error) {
+	dashboards, err := module.List(ctx, orgID)
+	if err != nil {
+		return nil, err
+	}
+
+	result := make(map[string][]dashboardtypes.DashboardPanelRef)
+
+	for _, dashboard := range dashboards {
+		dashData := dashboard.Data
+		dashTitle, _ := dashData["title"].(string)
+		widgets, ok := dashData["widgets"].([]interface{})
+		if !ok {
+			continue
+		}
+
+		for _, w := range widgets {
+			widget, ok := w.(map[string]interface{})
+			if !ok {
+				continue
+			}
+
+			widgetTitle, _ := widget["title"].(string)
+			widgetID, _ := widget["id"].(string)
+
+			query, ok := widget["query"].(map[string]interface{})
+			if !ok {
+				continue
+			}
+
+			// Track which metrics were found in this widget, along with the
+			// group-by and filter labels referenced for each metric. CH/PromQL
+			// paths are presence-only and leave the label sets empty.
+			foundMetrics := make(map[string]bool)
+			groupByByMetric := make(map[string][]string)
+			filterByByMetric := make(map[string][]string)
+
+			// Check all three query types
+			module.checkBuilderQueriesForMetricNames(query, metricNames, foundMetrics, groupByByMetric, filterByByMetric)
+			module.checkClickHouseQueriesForMetricNames(ctx, query, metricNames, foundMetrics)
+			module.checkPromQLQueriesForMetricNames(ctx, query, metricNames, foundMetrics)
+
+			// Add widget to results for all found metrics
+			for metricName := range foundMetrics {
+				result[metricName] = append(result[metricName], dashboardtypes.DashboardPanelRef{
+					DashboardID:   dashboard.ID,
+					DashboardName: dashTitle,
+					PanelID:       widgetID,
+					PanelName:     widgetTitle,
+					GroupBy:       groupByByMetric[metricName],
+					FilterBy:      filterByByMetric[metricName],
+				})
+			}
+		}
+	}
+
+	return result, nil
+}
+
 func (module *module) Collect(ctx context.Context, orgID valuer.UUID) (map[string]any, error) {
 	dashboards, err := module.store.List(ctx, orgID)
 	if err != nil {
@@ -57,6 +248,14 @@ func (module *module) GetPublic(_ context.Context, _, _ valuer.UUID) (*dashboard
 	return nil, errors.Newf(errors.TypeUnsupported, dashboardtypes.ErrCodePublicDashboardUnsupported, "not implemented")
 }
 
+func (module *module) GetDashboardByPublicID(_ context.Context, _ valuer.UUID) (*dashboardtypes.Dashboard, error) {
+	return nil, errors.Newf(errors.TypeUnsupported, dashboardtypes.ErrCodePublicDashboardUnsupported, "not implemented")
+}
+
+func (module *module) GetPublicWidgetQueryRange(context.Context, valuer.UUID, uint64, uint64, uint64) (*qbtypes.QueryRangeResponse, error) {
+	return nil, errors.Newf(errors.TypeUnsupported, dashboardtypes.ErrCodePublicDashboardUnsupported, "not implemented")
+}
+
 func (module *module) GetDashboardByPublicIDV2(_ context.Context, _ valuer.UUID) (*dashboardtypes.DashboardV2, error) {
 	return nil, errors.Newf(errors.TypeUnsupported, dashboardtypes.ErrCodePublicDashboardUnsupported, "not implemented")
 }
@@ -76,3 +275,213 @@ func (module *module) UpdatePublic(_ context.Context, _ valuer.UUID, _ *dashboar
 func (module *module) DeletePublic(_ context.Context, _ valuer.UUID, _ valuer.UUID) error {
 	return errors.Newf(errors.TypeUnsupported, dashboardtypes.ErrCodePublicDashboardUnsupported, "not implemented")
 }
+
+// checkBuilderQueriesForMetricNames checks builder.queryData[] for aggregations[].metricName.
+// For each queryData entry whose dataSource is "metrics" and that references a
+// target metric, it accumulates (deduped) the group-by and filter labels used
+// by that entry into groupByByMetric/filterByByMetric, keyed by metric name.
+func (module *module) checkBuilderQueriesForMetricNames(query map[string]interface{}, metricNames []string, foundMetrics map[string]bool, groupByByMetric, filterByByMetric map[string][]string) {
+	builder, ok := query["builder"].(map[string]interface{})
+	if !ok {
+		return
+	}
+
+	queryData, ok := builder["queryData"].([]interface{})
+	if !ok {
+		return
+	}
+
+	for _, qd := range queryData {
+		data, ok := qd.(map[string]interface{})
+		if !ok {
+			continue
+		}
+
+		// Check dataSource is metrics
+		if dataSource, ok := data["dataSource"].(string); !ok || dataSource != "metrics" {
+			continue
+		}
+
+		// Check aggregations[].metricName
+		aggregations, ok := data["aggregations"].([]interface{})
+		if !ok {
+			continue
+		}
+
+		entryMetrics := make([]string, 0, len(aggregations))
+		for _, agg := range aggregations {
+			aggMap, ok := agg.(map[string]interface{})
+			if !ok {
+				continue
+			}
+
+			metricName, ok := aggMap["metricName"].(string)
+			if !ok || metricName == "" {
+				continue
+			}
+
+			if slices.Contains(metricNames, metricName) {
+				foundMetrics[metricName] = true
+				entryMetrics = append(entryMetrics, metricName)
+			}
+		}
+
+		if len(entryMetrics) == 0 {
+			continue
+		}
+
+		groupBy := extractBuilderGroupByLabels(data)
+		filterBy := extractBuilderFilterLabels(data)
+		for _, metricName := range entryMetrics {
+			groupByByMetric[metricName] = appendDedup(groupByByMetric[metricName], groupBy...)
+			filterByByMetric[metricName] = appendDedup(filterByByMetric[metricName], filterBy...)
+		}
+	}
+}
+
+func extractBuilderGroupByLabels(data map[string]interface{}) []string {
+	gb, ok := data["groupBy"].([]interface{})
+	if !ok {
+		return nil
+	}
+
+	out := make([]string, 0, len(gb))
+	for _, g := range gb {
+		gm, ok := g.(map[string]interface{})
+		if !ok {
+			continue
+		}
+		if name, ok := gm["name"].(string); ok && name != "" {
+			out = append(out, name)
+			continue
+		}
+		// v3: groupBy[].key may be a plain string ...
+		if key, ok := gm["key"].(string); ok && key != "" {
+			out = append(out, key)
+			continue
+		}
+		// ... or a nested object {key: "<name>"}.
+		if km, ok := gm["key"].(map[string]interface{}); ok {
+			if key, ok := km["key"].(string); ok && key != "" {
+				out = append(out, key)
+			}
+		}
+	}
+	return out
+}
+
+func extractBuilderFilterLabels(data map[string]interface{}) []string {
+	out := []string{}
+
+	// v5: filter.expression
+	if f, ok := data["filter"].(map[string]interface{}); ok {
+		if expr, ok := f["expression"].(string); ok && expr != "" {
+			for _, sel := range querybuilder.QueryStringToKeysSelectors(expr) {
+				if sel != nil && sel.Name != "" {
+					out = append(out, sel.Name)
+				}
+			}
+		}
+	}
+
+	// v3: filters.items[].key.key
+	if f, ok := data["filters"].(map[string]interface{}); ok {
+		if items, ok := f["items"].([]interface{}); ok {
+			for _, it := range items {
+				im, ok := it.(map[string]interface{})
+				if !ok {
+					continue
+				}
+				km, ok := im["key"].(map[string]interface{})
+				if !ok {
+					continue
+				}
+				if key, ok := km["key"].(string); ok && key != "" {
+					out = append(out, key)
+				}
+			}
+		}
+	}
+
+	return out
+}
+
+func appendDedup(dst []string, values ...string) []string {
+	for _, v := range values {
+		if v == "" || slices.Contains(dst, v) {
+			continue
+		}
+		dst = append(dst, v)
+	}
+	return dst
+}
+
+// checkClickHouseQueriesForMetricNames checks clickhouse_sql[] array for metric names in query strings.
+func (module *module) checkClickHouseQueriesForMetricNames(ctx context.Context, query map[string]interface{}, metricNames []string, foundMetrics map[string]bool) {
+	clickhouseSQL, ok := query["clickhouse_sql"].([]interface{})
+	if !ok {
+		return
+	}
+
+	for _, chQuery := range clickhouseSQL {
+		chQueryMap, ok := chQuery.(map[string]interface{})
+		if !ok {
+			continue
+		}
+
+		queryStr, ok := chQueryMap["query"].(string)
+		if !ok || queryStr == "" {
+			continue
+		}
+
+		// Parse query to extract metric names
+		result, err := module.queryParser.AnalyzeQueryFilter(ctx, qbtypes.QueryTypeClickHouseSQL, queryStr)
+		if err != nil {
+			// Log warning and continue - parsing errors shouldn't break the search
+			module.settings.Logger().WarnContext(ctx, "failed to parse ClickHouse query", slog.String("query", queryStr), errors.Attr(err))
+			continue
+		}
+
+		// Check if any of the search metric names are in the extracted metric names
+		for _, metricName := range metricNames {
+			if slices.Contains(result.MetricNames, metricName) {
+				foundMetrics[metricName] = true
+			}
+		}
+	}
+}
+
+// checkPromQLQueriesForMetricNames checks promql[] array for metric names in query strings.
+func (module *module) checkPromQLQueriesForMetricNames(ctx context.Context, query map[string]interface{}, metricNames []string, foundMetrics map[string]bool) {
+	promQL, ok := query["promql"].([]interface{})
+	if !ok {
+		return
+	}
+
+	for _, promQuery := range promQL {
+		promQueryMap, ok := promQuery.(map[string]interface{})
+		if !ok {
+			continue
+		}
+
+		queryStr, ok := promQueryMap["query"].(string)
+		if !ok || queryStr == "" {
+			continue
+		}
+
+		// Parse query to extract metric names
+		result, err := module.queryParser.AnalyzeQueryFilter(ctx, qbtypes.QueryTypePromQL, queryStr)
+		if err != nil {
+			// Log warning and continue - parsing errors shouldn't break the search
+			module.settings.Logger().WarnContext(ctx, "failed to parse PromQL query", slog.String("query", queryStr), errors.Attr(err))
+			continue
+		}
+
+		// Check if any of the search metric names are in the extracted metric names
+		for _, metricName := range metricNames {
+			if slices.Contains(result.MetricNames, metricName) {
+				foundMetrics[metricName] = true
+			}
+		}
+	}
+}

pkg/modules/metricsexplorer/implmetricsexplorer/handler.go

@@ -196,6 +196,38 @@ func (h *handler) GetMetricAlerts(rw http.ResponseWriter, req *http.Request) {
 	render.Success(rw, http.StatusOK, out)
 }
 
+func (h *handler) GetMetricDashboards(rw http.ResponseWriter, req *http.Request) {
+	claims, err := authtypes.ClaimsFromContext(req.Context())
+	if err != nil {
+		render.Error(rw, err)
+		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 {
+		render.Error(rw, err)
+		return
+	}
+
+	orgID := valuer.MustNewUUID(claims.OrgID)
+
+	if err := h.checkMetricExists(req.Context(), orgID, in.MetricName); err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	out, err := h.module.GetMetricDashboards(req.Context(), orgID, in.MetricName)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+	render.Success(rw, http.StatusOK, out)
+}
+
 func (h *handler) GetMetricDashboardsV2(rw http.ResponseWriter, req *http.Request) {
 	claims, err := authtypes.ClaimsFromContext(req.Context())
 	if err != nil {

pkg/modules/metricsexplorer/implmetricsexplorer/module.go

@@ -23,6 +23,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/telemetryschema/metricstelemetryschema"
 	"github.com/SigNoz/signoz/pkg/telemetrystore"
 	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
+	"github.com/SigNoz/signoz/pkg/types/dashboardtypes"
 	"github.com/SigNoz/signoz/pkg/types/featuretypes"
 	"github.com/SigNoz/signoz/pkg/types/instrumentationtypes"
 	"github.com/SigNoz/signoz/pkg/types/metricsexplorertypes"
@@ -389,6 +390,18 @@ func (m *module) GetMetricAlerts(ctx context.Context, orgID valuer.UUID, metricN
 	}, nil
 }
 
+func (m *module) GetMetricDashboards(ctx context.Context, orgID valuer.UUID, metricName string) (*metricsexplorertypes.MetricDashboardsResponse, error) {
+	if metricName == "" {
+		return nil, errors.NewInvalidInputf(errors.CodeInvalidInput, "metricName is required")
+	}
+	data, err := m.dashboardModule.GetByMetricNames(ctx, orgID, []string{metricName})
+	if err != nil {
+		return nil, errors.WrapInternalf(err, errors.CodeInternal, "failed to get dashboards for metric")
+	}
+
+	return newMetricDashboardsResponse(data[metricName]), nil
+}
+
 func (m *module) GetMetricDashboardsV2(ctx context.Context, orgID valuer.UUID, metricName string) (*metricsexplorertypes.MetricDashboardPanelsResponse, error) {
 	if metricName == "" {
 		return nil, errors.NewInvalidInputf(errors.CodeInvalidInput, "metricName is required")
@@ -401,6 +414,22 @@ func (m *module) GetMetricDashboardsV2(ctx context.Context, orgID valuer.UUID, m
 	return metricsexplorertypes.NewMetricDashboardPanelsResponse(data[metricName]), nil
 }
 
+func newMetricDashboardsResponse(dashboardList []dashboardtypes.DashboardPanelRef) *metricsexplorertypes.MetricDashboardsResponse {
+	dashboards := make([]metricsexplorertypes.MetricDashboard, 0, len(dashboardList))
+	for _, item := range dashboardList {
+		dashboards = append(dashboards, metricsexplorertypes.MetricDashboard{
+			DashboardName: item.DashboardName,
+			DashboardID:   item.DashboardID,
+			WidgetID:      item.PanelID,
+			WidgetName:    item.PanelName,
+		})
+	}
+
+	return &metricsexplorertypes.MetricDashboardsResponse{
+		Dashboards: dashboards,
+	}
+}
+
 // GetMetricHighlights returns highlights for a metric including data points, last received, total time series, and active time series.
 func (m *module) GetMetricHighlights(ctx context.Context, orgID valuer.UUID, metricName string) (*metricsexplorertypes.MetricHighlightsResponse, error) {
 	if metricName == "" {

pkg/modules/metricsexplorer/metricsexplorer.go

@@ -17,6 +17,7 @@ type Handler interface {
 	GetMetricAttributes(http.ResponseWriter, *http.Request)
 	UpdateMetricMetadata(http.ResponseWriter, *http.Request)
 	GetMetricAlerts(http.ResponseWriter, *http.Request)
+	GetMetricDashboards(http.ResponseWriter, *http.Request)
 	GetMetricDashboardsV2(http.ResponseWriter, *http.Request)
 	GetMetricHighlights(http.ResponseWriter, *http.Request)
 	GetOnboardingStatus(http.ResponseWriter, *http.Request)
@@ -32,6 +33,7 @@ type Module interface {
 	GetMetricMetadataMulti(ctx context.Context, orgID valuer.UUID, metricNames []string) (map[string]*metricsexplorertypes.MetricMetadata, error)
 	UpdateMetricMetadata(ctx context.Context, orgID valuer.UUID, req *metricsexplorertypes.UpdateMetricMetadataRequest) error
 	GetMetricAlerts(ctx context.Context, orgID valuer.UUID, metricName string) (*metricsexplorertypes.MetricAlertsResponse, error)
+	GetMetricDashboards(ctx context.Context, orgID valuer.UUID, metricName string) (*metricsexplorertypes.MetricDashboardsResponse, error)
 	GetMetricDashboardsV2(ctx context.Context, orgID valuer.UUID, metricName string) (*metricsexplorertypes.MetricDashboardPanelsResponse, error)
 	GetMetricHighlights(ctx context.Context, orgID valuer.UUID, metricName string) (*metricsexplorertypes.MetricHighlightsResponse, error)
 	GetMetricAttributes(ctx context.Context, orgID valuer.UUID, req *metricsexplorertypes.MetricAttributesRequest) (*metricsexplorertypes.MetricAttributesResponse, error)

pkg/query-service/app/http_handler.go

@@ -58,6 +58,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/types"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
 	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
+	"github.com/SigNoz/signoz/pkg/types/dashboardtypes"
 	"github.com/SigNoz/signoz/pkg/types/featuretypes"
 	"github.com/SigNoz/signoz/pkg/types/instrumentationtypes"
 	"github.com/SigNoz/signoz/pkg/types/licensetypes"
@@ -375,6 +376,12 @@ func (aH *APIHandler) RegisterRoutes(router *mux.Router, am *middleware.AuthZ) {
 	router.HandleFunc("/api/v1/rules/{id}/history/top_contributors", am.ViewAccess(aH.getRuleStateHistoryTopContributors)).Methods(http.MethodPost)
 	router.HandleFunc("/api/v1/rules/{id}/history/overall_status", am.ViewAccess(aH.getOverallStateTransitions)).Methods(http.MethodPost)
 
+	router.HandleFunc("/api/v1/dashboards", am.ViewAccess(aH.List)).Methods(http.MethodGet)
+	router.HandleFunc("/api/v1/dashboards", am.EditAccess(aH.Signoz.Handlers.Dashboard.Create)).Methods(http.MethodPost)
+	router.HandleFunc("/api/v1/dashboards/{id}", am.ViewAccess(aH.Get)).Methods(http.MethodGet)
+	router.HandleFunc("/api/v1/dashboards/{id}", am.EditAccess(aH.Signoz.Handlers.Dashboard.Update)).Methods(http.MethodPut)
+	router.HandleFunc("/api/v1/dashboards/{id}", am.EditAccess(aH.Signoz.Handlers.Dashboard.Delete)).Methods(http.MethodDelete)
+	router.HandleFunc("/api/v1/dashboards/{id}/lock", am.EditAccess(aH.Signoz.Handlers.Dashboard.LockUnlock)).Methods(http.MethodPut)
 	router.HandleFunc("/api/v2/variables/query", am.ViewAccess(aH.queryDashboardVarsV2)).Methods(http.MethodPost)
 
 	router.HandleFunc("/api/v1/explorer/views", am.ViewAccess(aH.Signoz.Handlers.SavedView.List)).Methods(http.MethodGet)
@@ -939,6 +946,14 @@ func prepareQuery(r *http.Request) (string, error) {
 	return newQuery, nil
 }
 
+func (aH *APIHandler) Get(rw http.ResponseWriter, r *http.Request) {
+	render.Error(rw, dashboardtypes.NewV1DeprecatedError("get a dashboard with GET /api/v2/dashboards/{id}"))
+}
+
+func (aH *APIHandler) List(rw http.ResponseWriter, r *http.Request) {
+	render.Error(rw, dashboardtypes.NewV1DeprecatedError("list dashboards with GET /api/v2/dashboards"))
+}
+
 func (aH *APIHandler) queryDashboardVarsV2(w http.ResponseWriter, r *http.Request) {
 	query, err := prepareQuery(r)
 	if err != nil {

pkg/types/dashboardtypes/dashboard.go

@@ -1,8 +1,14 @@
 package dashboardtypes
 
 import (
+	"context"
+	"encoding/json"
+	"log/slog"
+	"time"
+
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/types"
+	"github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/valuer"
 	"github.com/uptrace/bun"
 )
@@ -16,6 +22,7 @@ var (
 	ErrCodeDashboardImmutable          = errors.MustNewCode("dashboard_immutable")
 	ErrCodeDashboardInvalidPatch       = errors.MustNewCode("dashboard_invalid_patch")
 	ErrCodeDashboardMigrationFailed    = errors.MustNewCode("dashboard_migration_failed")
+	ErrCodeDashboardV1Deprecated       = errors.MustNewCode("dashboard_deprecated")
 )
 
 type StorableDashboard struct {
@@ -31,8 +38,31 @@ type StorableDashboard struct {
 	Name   string                `bun:"name,type:text,notnull"`
 }
 
+type Dashboard struct {
+	types.TimeAuditable
+	types.UserAuditable
+
+	ID     string                `json:"id"`
+	Data   StorableDashboardData `json:"data"`
+	Locked bool                  `json:"locked"`
+	OrgID  valuer.UUID           `json:"org_id"`
+	Source Source                `json:"source"`
+}
+
+type LockUnlockDashboard struct {
+	Locked *bool `json:"locked"`
+}
+
 type (
-	StorableDashboardData map[string]any
+	StorableDashboardData map[string]interface{}
+
+	GettableDashboard = Dashboard
+
+	UpdatableDashboard = StorableDashboardData
+
+	PostableDashboard = StorableDashboardData
+
+	ListableDashboard []*GettableDashboard
 )
 
 // readString reads a string field from the untyped data blob, yielding "" when
@@ -42,6 +72,135 @@ func (d StorableDashboardData) readString(key string) string {
 	return s
 }
 
+func NewStorableDashboardFromDashboard(dashboard *Dashboard) (*StorableDashboard, error) {
+	dashboardID, err := valuer.NewUUID(dashboard.ID)
+	if err != nil {
+		return nil, errors.Wrapf(err, errors.TypeInvalidInput, errors.CodeInvalidInput, "id is not a valid uuid")
+	}
+
+	if !dashboard.Source.IsValid() {
+		return nil, errors.Newf(errors.TypeInvalidInput, ErrCodeDashboardInvalidSource, "invalid dashboard source %q, must be one of user, system, integration", dashboard.Source.StringValue())
+	}
+
+	return &StorableDashboard{
+		Identifiable: types.Identifiable{
+			ID: dashboardID,
+		},
+		TimeAuditable: types.TimeAuditable{
+			CreatedAt: dashboard.CreatedAt,
+			UpdatedAt: dashboard.UpdatedAt,
+		},
+		UserAuditable: types.UserAuditable{
+			CreatedBy: dashboard.CreatedBy,
+			UpdatedBy: dashboard.UpdatedBy,
+		},
+		OrgID:  dashboard.OrgID,
+		Data:   dashboard.Data,
+		Locked: dashboard.Locked,
+		Source: dashboard.Source,
+	}, nil
+}
+
+func NewDashboard(orgID valuer.UUID, createdBy string, source Source, storableDashboardData StorableDashboardData) (*Dashboard, error) {
+	if !source.IsValid() {
+		return nil, errors.Newf(errors.TypeInvalidInput, ErrCodeDashboardInvalidSource, "invalid dashboard source %q, must be one of user, system, integration", source.StringValue())
+	}
+
+	currentTime := time.Now()
+
+	return &Dashboard{
+		ID: valuer.GenerateUUID().StringValue(),
+		TimeAuditable: types.TimeAuditable{
+			CreatedAt: currentTime,
+			UpdatedAt: currentTime,
+		},
+		UserAuditable: types.UserAuditable{
+			CreatedBy: createdBy,
+			UpdatedBy: createdBy,
+		},
+		OrgID:  orgID,
+		Data:   storableDashboardData,
+		Locked: source == SourceIntegration,
+		Source: source,
+	}, nil
+}
+
+func NewDashboardFromStorableDashboard(storableDashboard *StorableDashboard) *Dashboard {
+	return &Dashboard{
+		ID: storableDashboard.ID.StringValue(),
+		TimeAuditable: types.TimeAuditable{
+			CreatedAt: storableDashboard.CreatedAt,
+			UpdatedAt: storableDashboard.UpdatedAt,
+		},
+		UserAuditable: types.UserAuditable{
+			CreatedBy: storableDashboard.CreatedBy,
+			UpdatedBy: storableDashboard.UpdatedBy,
+		},
+		OrgID:  storableDashboard.OrgID,
+		Data:   storableDashboard.Data,
+		Locked: storableDashboard.Locked,
+		Source: storableDashboard.Source,
+	}
+}
+
+func NewDashboardsFromStorableDashboards(storableDashboards []*StorableDashboard) []*Dashboard {
+	dashboards := make([]*Dashboard, len(storableDashboards))
+	for idx, storableDashboard := range storableDashboards {
+		dashboards[idx] = NewDashboardFromStorableDashboard(storableDashboard)
+	}
+
+	return dashboards
+}
+
+func NewGettableDashboardsFromDashboards(dashboards []*Dashboard) ([]*GettableDashboard, error) {
+	gettableDashboards := make([]*GettableDashboard, len(dashboards))
+	for idx, dashboard := range dashboards {
+		gettableDashboard, err := NewGettableDashboardFromDashboard(dashboard)
+		if err != nil {
+			return nil, err
+		}
+		gettableDashboards[idx] = gettableDashboard
+	}
+	return gettableDashboards, nil
+}
+
+func NewGettableDashboardFromDashboard(dashboard *Dashboard) (*GettableDashboard, error) {
+	return &GettableDashboard{
+		ID:            dashboard.ID,
+		TimeAuditable: dashboard.TimeAuditable,
+		UserAuditable: dashboard.UserAuditable,
+		OrgID:         dashboard.OrgID,
+		Data:          dashboard.Data,
+		Locked:        dashboard.Locked,
+		Source:        dashboard.Source,
+	}, nil
+}
+
+func (storableDashboardData *StorableDashboardData) GetWidgetIds() []string {
+	data := *storableDashboardData
+	widgetIds := []string{}
+	if data != nil && data["widgets"] != nil {
+		widgets, ok := data["widgets"]
+		if ok {
+			data, ok := widgets.([]interface{})
+			if ok {
+				for _, widget := range data {
+					sData, ok := widget.(map[string]interface{})
+					if ok && sData["query"] != nil && sData["id"] != nil {
+						id, ok := sData["id"].(string)
+
+						if ok {
+							widgetIds = append(widgetIds, id)
+						}
+
+					}
+				}
+			}
+		}
+	}
+	return widgetIds
+}
+
 // ErrIfNotDeletable gates deletion on the columns alone, never on Data, so a
 // dashboard whose data is corrupt or stuck on the v1 schema stays deletable.
 func (storable StorableDashboard) ErrIfNotDeletable() error {
@@ -53,3 +212,247 @@ func (storable StorableDashboard) ErrIfNotDeletable() error {
 	}
 	return nil
 }
+
+func (dashboard *Dashboard) ErrIfNotMutable() error {
+	if dashboard.Source == SourceIntegration {
+		return errors.Newf(errors.TypeInvalidInput, ErrCodeDashboardImmutable, "integration dashboards cannot be modified")
+	}
+	return nil
+}
+
+func (dashboard *Dashboard) ErrIfNotDeletable() error {
+	if err := dashboard.ErrIfNotMutable(); err != nil {
+		return err
+	}
+	if dashboard.Source == SourceSystem {
+		return errors.Newf(errors.TypeInvalidInput, ErrCodeDashboardImmutable, "system dashboards cannot be deleted")
+	}
+	return nil
+}
+
+func (dashboard *Dashboard) ErrIfNotLockable() error {
+	if err := dashboard.ErrIfNotMutable(); err != nil {
+		return err
+	}
+	if dashboard.Source == SourceSystem {
+		return errors.Newf(errors.TypeInvalidInput, ErrCodeDashboardImmutable, "system dashboards cannot be locked or unlocked")
+	}
+	return nil
+}
+
+func (dashboard *Dashboard) ErrIfNotPublishable() error {
+	if err := dashboard.ErrIfNotMutable(); err != nil {
+		return err
+	}
+	if dashboard.Source == SourceSystem {
+		return errors.Newf(errors.TypeInvalidInput, ErrCodeDashboardImmutable, "system dashboards cannot be made public")
+	}
+	return nil
+}
+
+func (dashboard *Dashboard) CanUpdate(ctx context.Context, data StorableDashboardData, diff int) error {
+	if dashboard.Locked {
+		return errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "cannot update a locked dashboard, please unlock the dashboard to update")
+	}
+
+	existingIDs := dashboard.Data.GetWidgetIds()
+	newIDs := data.GetWidgetIds()
+	newIdsMap := make(map[string]bool)
+	for _, id := range newIDs {
+		newIdsMap[id] = true
+	}
+
+	differenceMap := make(map[string]bool)
+	difference := []string{}
+	for _, id := range existingIDs {
+		if _, found := newIdsMap[id]; !found && !differenceMap[id] {
+			difference = append(difference, id)
+			differenceMap[id] = true
+		}
+	}
+
+	// Allow multiple decisions only if diff == 0
+	if diff > 0 && len(difference) > diff {
+		return errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "deleting more than one panel is not supported")
+	}
+
+	return nil
+}
+
+func (dashboard *Dashboard) Update(ctx context.Context, updatableDashboard UpdatableDashboard, updatedBy string, diff int) error {
+	err := dashboard.CanUpdate(ctx, updatableDashboard, diff)
+	if err != nil {
+		return err
+	}
+	dashboard.UpdatedBy = updatedBy
+	dashboard.UpdatedAt = time.Now()
+	dashboard.Data = updatableDashboard
+	return nil
+}
+
+func (dashboard *Dashboard) CanLockUnlock(isAdmin bool, updatedBy string) error {
+	if dashboard.CreatedBy != updatedBy && !isAdmin {
+		return errors.Newf(errors.TypeForbidden, errors.CodeForbidden, "you are not authorized to lock/unlock this dashboard")
+	}
+	return nil
+}
+
+func (dashboard *Dashboard) LockUnlock(lock bool, isAdmin bool, updatedBy string) error {
+	err := dashboard.CanLockUnlock(isAdmin, updatedBy)
+	if err != nil {
+		return err
+	}
+	dashboard.Locked = lock
+	dashboard.UpdatedBy = updatedBy
+	dashboard.UpdatedAt = time.Now()
+	return nil
+}
+
+func (lockUnlockDashboard *LockUnlockDashboard) UnmarshalJSON(src []byte) error {
+	var lockUnlock struct {
+		Locked *bool `json:"lock"`
+	}
+
+	err := json.Unmarshal(src, &lockUnlock)
+	if err != nil {
+		return err
+	}
+
+	if lockUnlock.Locked == nil {
+		return errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "lock is missing in the request payload")
+	}
+
+	lockUnlockDashboard.Locked = lockUnlock.Locked
+	return nil
+}
+
+func (dashboard *Dashboard) GetWidgetQuery(startTime, endTime, widgetIndex uint64, logger *slog.Logger) (*querybuildertypesv5.QueryRangeRequest, error) {
+	type dashboardData struct {
+		Widgets []struct {
+			PanelTypes string `json:"panelTypes"`
+			Query      struct {
+				Builder struct {
+					QueryData          []map[string]any `json:"queryData"`
+					QueryFormulas      []map[string]any `json:"queryFormulas"`
+					QueryTraceOperator []map[string]any `json:"queryTraceOperator"`
+				} `json:"builder"`
+				ClickhouseSQL []map[string]any `json:"clickhouse_sql"`
+				PromQL        []map[string]any `json:"promql"`
+				QueryType     string           `json:"queryType"`
+			} `json:"query"`
+			FillGaps bool `json:"fillSpans"`
+		} `json:"widgets"`
+	}
+
+	dataJSON, err := json.Marshal(dashboard.Data)
+	if err != nil {
+		return nil, errors.Wrapf(err, errors.TypeInvalidInput, ErrCodeDashboardInvalidData, "invalid dashboard data")
+	}
+
+	var data dashboardData
+	err = json.Unmarshal(dataJSON, &data)
+	if err != nil {
+		return nil, errors.Wrapf(err, errors.TypeInvalidInput, ErrCodeDashboardInvalidData, "invalid dashboard data")
+	}
+
+	if int(widgetIndex) >= len(data.Widgets) {
+		return nil, errors.Newf(errors.TypeInvalidInput, ErrCodeDashboardInvalidInput, "widget with index %v doesn't exist", widgetIndex)
+	}
+
+	compositeQueries := []any{}
+	widgetData := data.Widgets[widgetIndex]
+	switch widgetData.Query.QueryType {
+	case "builder":
+		for _, query := range widgetData.Query.Builder.QueryData {
+			queryName, ok := query["queryName"].(string)
+			if !ok {
+				return nil, errors.New(errors.TypeInvalidInput, ErrCodeDashboardInvalidWidgetQuery, "cannot type cast query name as string")
+			}
+			compositeQueries = append(compositeQueries, querybuildertypesv5.WrapInV5Envelope(queryName, query, "builder_query"))
+		}
+		for _, query := range widgetData.Query.Builder.QueryFormulas {
+			queryName, ok := query["queryName"].(string)
+			if !ok {
+				return nil, errors.New(errors.TypeInvalidInput, ErrCodeDashboardInvalidWidgetQuery, "cannot type cast query name as string")
+			}
+			compositeQueries = append(compositeQueries, querybuildertypesv5.WrapInV5Envelope(queryName, query, "builder_formula"))
+		}
+		for _, query := range widgetData.Query.Builder.QueryTraceOperator {
+			queryName, ok := query["queryName"].(string)
+			if !ok {
+				return nil, errors.New(errors.TypeInvalidInput, ErrCodeDashboardInvalidWidgetQuery, "cannot type cast query name as string")
+			}
+			compositeQueries = append(compositeQueries, querybuildertypesv5.WrapInV5Envelope(queryName, query, "builder_trace_operator"))
+		}
+	case "clickhouse_sql":
+		for _, query := range widgetData.Query.ClickhouseSQL {
+			envelope := map[string]any{
+				"type": "clickhouse_sql",
+				"spec": map[string]any{
+					"name":     query["name"],
+					"query":    query["query"],
+					"disabled": query["disabled"],
+					"legend":   query["legend"],
+				},
+			}
+			compositeQueries = append(compositeQueries, envelope)
+		}
+	case "promql":
+		for _, query := range widgetData.Query.PromQL {
+			envelope := map[string]any{
+				"type": "promql",
+				"spec": map[string]any{
+					"name":     query["name"],
+					"query":    query["query"],
+					"disabled": query["disabled"],
+					"legend":   query["legend"],
+				},
+			}
+			compositeQueries = append(compositeQueries, envelope)
+		}
+	}
+
+	queryRangeReq := map[string]any{
+		"schemaVersion": "v1",
+		"start":         startTime,
+		"end":           endTime,
+		"requestType":   dashboard.getQueryRequestTypeFromPanelType(widgetData.PanelTypes),
+		"compositeQuery": map[string]any{
+			"queries": compositeQueries,
+		},
+		"formatOptions": map[string]any{
+			"fillGaps":               widgetData.FillGaps,
+			"formatTableResultForUI": widgetData.PanelTypes == "table",
+		},
+	}
+
+	req, err := json.Marshal(queryRangeReq)
+	if err != nil {
+		return nil, errors.Wrapf(err, errors.TypeInvalidInput, ErrCodeDashboardInvalidWidgetQuery, "invalid query request")
+	}
+
+	queryRangeRequest := new(querybuildertypesv5.QueryRangeRequest)
+	err = json.Unmarshal(req, queryRangeRequest)
+	if err != nil {
+		return nil, errors.Wrapf(err, errors.TypeInvalidInput, ErrCodeDashboardInvalidWidgetQuery, "invalid query request")
+	}
+
+	return queryRangeRequest, nil
+}
+
+func (dashboard *Dashboard) getQueryRequestTypeFromPanelType(panelType string) querybuildertypesv5.RequestType {
+	switch panelType {
+	case "graph", "bar":
+		return querybuildertypesv5.RequestTypeTimeSeries
+	case "table", "pie", "value":
+		return querybuildertypesv5.RequestTypeScalar
+	case "trace":
+		return querybuildertypesv5.RequestTypeTrace
+	case "list":
+		return querybuildertypesv5.RequestTypeRaw
+	case "histogram":
+		return querybuildertypesv5.RequestTypeDistribution
+	}
+
+	return querybuildertypesv5.RequestTypeUnknown
+}

pkg/types/dashboardtypes/dashboard_test.go

@@ -1,6 +1,7 @@
 package dashboardtypes
 
 import (
+	"context"
 	"testing"
 
 	"github.com/SigNoz/signoz/pkg/types"
@@ -19,6 +20,69 @@ func makeTestWidgets(ids ...string) []interface{} {
 	return widgets
 }
 
+func TestCanUpdate_MultipleDeletions_ByDiff(t *testing.T) {
+	testCases := []struct {
+		name    string
+		diff    int
+		updated []string
+		wantErr bool
+	}{
+		{
+			name:    "diff-0-allows-multi-delete",
+			diff:    0,
+			updated: []string{"a"}, // deleting 2 widgets (b, c)
+			wantErr: false,
+		},
+		{
+			name:    "diff-1-blocks-multi-delete",
+			diff:    1,
+			updated: []string{"a"}, // deleting 2 widgets (b, c) > diff(1)
+			wantErr: true,
+		},
+		{
+			name:    "diff-1-allows-single-delete",
+			diff:    1,
+			updated: []string{"a", "b"}, // deleting 1 widget (c) = diff(1)
+			wantErr: false,
+		},
+		{
+			name:    "diff-2-allows-two-deletions",
+			diff:    2,
+			updated: []string{"a"}, // deleting 2 widgets (b, c) = diff(2)
+			wantErr: false,
+		},
+		{
+			name:    "diff-1-blocks-three-deletions",
+			diff:    1,
+			updated: []string{}, // deleting all 3 widgets > diff(1)
+			wantErr: true,
+		},
+	}
+
+	for _, tc := range testCases {
+		t.Run(tc.name, func(t *testing.T) {
+			ctx := context.Background()
+
+			orgID := valuer.GenerateUUID()
+			initial := StorableDashboardData{
+				"widgets": makeTestWidgets("a", "b", "c"),
+			}
+			d, err := NewDashboard(orgID, "tester", SourceUser, initial)
+			assert.NoError(t, err)
+
+			updated := StorableDashboardData{
+				"widgets": makeTestWidgets(tc.updated...),
+			}
+			err = d.CanUpdate(ctx, updated, tc.diff)
+			if tc.wantErr {
+				assert.Error(t, err)
+			} else {
+				assert.NoError(t, err)
+			}
+		})
+	}
+}
+
 func TestStorableDashboardErrIfNotDeletable(t *testing.T) {
 	testCases := []struct {
 		subtestName     string

pkg/types/dashboardtypes/perses_dashboard.go

@@ -95,13 +95,6 @@ func (d *DashboardV2) ErrIfNotUpdatable() error {
 	return nil
 }
 
-func (d *DashboardV2) ErrIfNotPublishable() error {
-	if d.Source == SourceSystem {
-		return errors.Newf(errors.TypeInvalidInput, ErrCodeDashboardImmutable, "system dashboards cannot be made public")
-	}
-	return d.ErrIfNotMutable()
-}
-
 func (d *DashboardV2) Update(updatable UpdatableDashboardV2, updatedBy string, resolvedTags []*tagtypes.Tag) error {
 	if err := d.ErrIfNotUpdatable(); err != nil {
 		return err

pkg/types/dashboardtypes/public_dashboard.go

@@ -53,6 +53,11 @@ type UpdatablePublicDashboard struct {
 	DefaultTimeRange string `json:"defaultTimeRange"`
 }
 
+type GettablePublicDashboardData struct {
+	Dashboard       *Dashboard                `json:"dashboard"`
+	PublicDashboard *GettablePublicDasbhboard `json:"publicDashboard"`
+}
+
 func NewPublicDashboard(timeRangeEnabled bool, defaultTimeRange string, dashboardID valuer.UUID) *PublicDashboard {
 	return &PublicDashboard{
 		Identifiable: types.Identifiable{
@@ -96,6 +101,108 @@ func NewGettablePublicDashboard(publicDashboard *PublicDashboard) *GettablePubli
 	}
 }
 
+func NewPublicDashboardDataFromDashboard(dashboard *Dashboard, publicDashboard *PublicDashboard) (*GettablePublicDashboardData, error) {
+	type dashboardData struct {
+		Widgets []struct {
+			PanelTypes string `json:"panelTypes"`
+			Query      struct {
+				Builder struct {
+					QueryData          []map[string]any `json:"queryData"`
+					QueryFormulas      []map[string]any `json:"queryFormulas"`
+					QueryTraceOperator []map[string]any `json:"queryTraceOperator"`
+				} `json:"builder"`
+				ClickhouseSQL []map[string]any `json:"clickhouse_sql"`
+				PromQL        []map[string]any `json:"promql"`
+				QueryType     string           `json:"queryType"`
+			} `json:"query"`
+		} `json:"widgets"`
+	}
+
+	dataJSON, err := json.Marshal(dashboard.Data)
+	if err != nil {
+		return nil, errors.Wrapf(err, errors.TypeInvalidInput, ErrCodeDashboardInvalidData, "invalid dashboard data")
+	}
+
+	var data dashboardData
+	err = json.Unmarshal(dataJSON, &data)
+	if err != nil {
+		return nil, errors.Wrapf(err, errors.TypeInvalidInput, ErrCodeDashboardInvalidData, "invalid dashboard data")
+	}
+
+	for idx, widget := range data.Widgets {
+		updatedQueryData := []map[string]any{}
+		for _, queryData := range widget.Query.Builder.QueryData {
+			updatedQueryMap := map[string]any{}
+			updatedQueryMap["aggregations"] = queryData["aggregations"]
+			updatedQueryMap["legend"] = queryData["legend"]
+			updatedQueryMap["queryName"] = queryData["queryName"]
+			updatedQueryMap["expression"] = queryData["expression"]
+			updatedQueryMap["groupBy"] = queryData["groupBy"]
+			updatedQueryMap["dataSource"] = queryData["dataSource"]
+			updatedQueryData = append(updatedQueryData, updatedQueryMap)
+		}
+		widget.Query.Builder.QueryData = updatedQueryData
+
+		updatedQueryFormulas := []map[string]any{}
+		for _, queryFormula := range widget.Query.Builder.QueryFormulas {
+			updatedQueryFormulaMap := map[string]any{}
+			updatedQueryFormulaMap["legend"] = queryFormula["legend"]
+			updatedQueryFormulaMap["queryName"] = queryFormula["queryName"]
+			updatedQueryFormulaMap["expression"] = queryFormula["expression"]
+			updatedQueryFormulas = append(updatedQueryFormulas, updatedQueryFormulaMap)
+		}
+		widget.Query.Builder.QueryFormulas = updatedQueryFormulas
+
+		updatedQueryTraceOperator := []map[string]any{}
+		for _, queryTraceOperator := range widget.Query.Builder.QueryTraceOperator {
+			updatedQueryTraceOperatorMap := map[string]any{}
+			updatedQueryTraceOperatorMap["aggregations"] = queryTraceOperator["aggregations"]
+			updatedQueryTraceOperatorMap["legend"] = queryTraceOperator["legend"]
+			updatedQueryTraceOperatorMap["queryName"] = queryTraceOperator["queryName"]
+			updatedQueryTraceOperatorMap["expression"] = queryTraceOperator["expression"]
+			updatedQueryTraceOperatorMap["groupBy"] = queryTraceOperator["groupBy"]
+			updatedQueryTraceOperatorMap["dataSource"] = queryTraceOperator["dataSource"]
+			updatedQueryTraceOperator = append(updatedQueryTraceOperator, updatedQueryTraceOperatorMap)
+		}
+		widget.Query.Builder.QueryTraceOperator = updatedQueryTraceOperator
+
+		updatedClickhouseSQLQuery := []map[string]any{}
+		for _, clickhouseSQLQuery := range widget.Query.ClickhouseSQL {
+			updatedClickhouseSQLQueryMap := make(map[string]any)
+			updatedClickhouseSQLQueryMap["legend"] = clickhouseSQLQuery["legend"]
+			updatedClickhouseSQLQueryMap["name"] = clickhouseSQLQuery["name"]
+			updatedClickhouseSQLQuery = append(updatedClickhouseSQLQuery, updatedClickhouseSQLQueryMap)
+		}
+		widget.Query.ClickhouseSQL = updatedClickhouseSQLQuery
+
+		updatedPromQLQuery := []map[string]any{}
+		for _, promQLQuery := range widget.Query.PromQL {
+			updatedPromQLQueryMap := make(map[string]any)
+			updatedPromQLQueryMap["legend"] = promQLQuery["legend"]
+			updatedPromQLQueryMap["name"] = promQLQuery["name"]
+			updatedPromQLQuery = append(updatedPromQLQuery, updatedPromQLQueryMap)
+		}
+		widget.Query.PromQL = updatedPromQLQuery
+
+		if widgets, ok := dashboard.Data["widgets"].([]any); ok {
+			if widgetMap, ok := widgets[idx].(map[string]any); ok {
+				widgetMap["query"] = widget.Query
+			}
+		}
+	}
+
+	return &GettablePublicDashboardData{
+		Dashboard: &Dashboard{
+			Data: dashboard.Data,
+		},
+		PublicDashboard: &GettablePublicDasbhboard{
+			TimeRangeEnabled: publicDashboard.TimeRangeEnabled,
+			DefaultTimeRange: publicDashboard.DefaultTimeRange,
+			PublicPath:       publicDashboard.PublicPath(),
+		},
+	}, nil
+}
+
 func (typ *PublicDashboard) Update(timeRangeEnabled bool, defaultTimeRange string) {
 	typ.TimeRangeEnabled = timeRangeEnabled
 	typ.DefaultTimeRange = defaultTimeRange

pkg/types/dashboardtypes/source_test.go

@@ -50,17 +50,21 @@ func TestErrIfNotMutable_BySource(t *testing.T) {
 	cases := []struct {
 		source      Source
 		mutable     bool
+		deletable   bool
+		lockable    bool
 		publishable bool
 	}{
-		{SourceUser, true, true},
-		{SourceSystem, false, false},
-		{SourceIntegration, false, false},
+		{SourceUser, true, true, true, true},
+		{SourceSystem, true, false, false, false},
+		{SourceIntegration, false, false, false, false},
 	}
 
 	for _, tc := range cases {
 		t.Run(tc.source.StringValue(), func(t *testing.T) {
-			d := &DashboardV2{Source: tc.source}
+			d := &Dashboard{Source: tc.source}
 			assert.Equal(t, tc.mutable, d.ErrIfNotMutable() == nil)
+			assert.Equal(t, tc.deletable, d.ErrIfNotDeletable() == nil)
+			assert.Equal(t, tc.lockable, d.ErrIfNotLockable() == nil)
 			assert.Equal(t, tc.publishable, d.ErrIfNotPublishable() == nil)
 		})
 	}

pkg/types/dashboardtypes/v1_deprecation.go

@@ -0,0 +1,13 @@
+package dashboardtypes
+
+import "github.com/SigNoz/signoz/pkg/errors"
+
+// V2DashboardAPIDocsLink documents the v2 dashboard API — its endpoints and request bodies.
+const V2DashboardAPIDocsLink = "https://signoz.io/docs/dashboards/dashboards-v2-api/"
+
+// NewV1DeprecatedError builds the error a deprecated v1 dashboard endpoint returns.
+// useInstead names the v2 endpoint to call; the docs link is appended for the details.
+func NewV1DeprecatedError(useInstead string) error {
+	return errors.Newf(errors.TypeUnsupported, ErrCodeDashboardV1Deprecated,
+		"the v1 dashboard API is deprecated; instead, %s. See %s", useInstead, V2DashboardAPIDocsLink)
+}

pkg/types/metricsexplorertypes/metricsexplorer.go

@@ -240,6 +240,19 @@ type MetricAlertsResponse struct {
 	Alerts []MetricAlert `json:"alerts" required:"true" nullable:"true"`
 }
 
+// MetricDashboard represents a dashboard/widget referencing a metric.
+type MetricDashboard struct {
+	DashboardName string `json:"dashboardName" required:"true"`
+	DashboardID   string `json:"dashboardId" required:"true"`
+	WidgetID      string `json:"widgetId" required:"true"`
+	WidgetName    string `json:"widgetName" required:"true"`
+}
+
+// MetricDashboardsResponse represents the response for metric dashboards endpoint.
+type MetricDashboardsResponse struct {
+	Dashboards []MetricDashboard `json:"dashboards" required:"true" nullable:"true"`
+}
+
 // MetricDashboardPanelsResponse is the response for the v2 metric dashboards
 // endpoint: the dashboard panels that reference the metric.
 type MetricDashboardPanelsResponse struct {

tests/integration/tests/dashboard/01_dashboard.py

@@ -0,0 +1,60 @@
+import uuid
+from collections.abc import Callable
+from http import HTTPStatus
+
+import pytest
+import requests
+from wiremock.resources.mappings import Mapping
+
+from fixtures.auth import USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD, add_license
+from fixtures.types import Operation, SigNoz, TestContainerDocker
+
+DOCS_LINK = "https://signoz.io/docs/dashboards/dashboards-v2-api/"
+
+
+def test_apply_license(
+    signoz: SigNoz,
+    create_user_admin: Operation,  # pylint: disable=unused-argument
+    make_http_mocks: Callable[[TestContainerDocker, list[Mapping]], None],
+    get_token: Callable[[str, str], str],
+) -> None:
+    add_license(signoz, make_http_mocks, get_token)
+
+
+@pytest.mark.parametrize(
+    "deprecated_request",
+    [
+        ("POST", "/api/v1/dashboards", {"title": "Sample Title", "uploadedGrafana": False, "version": "v5"}),
+        ("GET", "/api/v1/dashboards", None),
+        ("GET", f"/api/v1/dashboards/{uuid.uuid4()}", None),
+        ("PUT", f"/api/v1/dashboards/{uuid.uuid4()}", {"title": "Sample Title"}),
+        ("DELETE", f"/api/v1/dashboards/{uuid.uuid4()}", None),
+        ("PUT", f"/api/v1/dashboards/{uuid.uuid4()}/lock", {"lock": True}),
+    ],
+)
+def test_v1_dashboard_endpoints_are_deprecated(
+    signoz: SigNoz,
+    create_user_admin: Operation,  # pylint: disable=unused-argument
+    get_token: Callable[[str, str], str],
+    deprecated_request: tuple[str, str, dict | None],
+):
+    """Every v1 dashboard endpoint is superseded by v2 and answers with a
+    deprecation error naming its replacement — the id in the path is never
+    resolved, so a random one still gets the deprecation error rather than a 404."""
+    method, path, body = deprecated_request
+    admin_token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+
+    response = requests.request(
+        method,
+        signoz.self.host_configs["8080"].get(path),
+        json=body,
+        headers={"Authorization": f"Bearer {admin_token}"},
+        timeout=2,
+    )
+
+    assert response.status_code == HTTPStatus.NOT_IMPLEMENTED, response.text
+    error = response.json()["error"]
+    assert error["code"] == "dashboard_deprecated"
+    assert "the v1 dashboard API is deprecated" in error["message"]
+    assert "/api/v2/dashboards" in error["message"]
+    assert DOCS_LINK in error["message"]