Merge branch 'qf-scroll-layout' into bottom-strip-shell

<!--Reference issues using `Closes #issue-number` to enable automatic
closure on merge. -->
#### Issues closed by this PR

Closes https://github.com/SigNoz/pulse-pod/issues/321

docs/api/openapi.yml

@@ -3454,29 +3454,6 @@ 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:
@@ -3656,13 +3633,6 @@ components:
         timeRangeEnabled:
           type: boolean
       type: object
-    DashboardtypesGettablePublicDashboardData:
-      properties:
-        dashboard:
-          $ref: '#/components/schemas/DashboardtypesDashboard'
-        publicDashboard:
-          $ref: '#/components/schemas/DashboardtypesGettablePublicDasbhboard'
-      type: object
     DashboardtypesGettablePublicDashboardDataV2:
       properties:
         dashboard:
@@ -4447,9 +4417,6 @@ components:
       - normal
       - percent
       type: string
-    DashboardtypesStorableDashboardData:
-      additionalProperties: {}
-      type: object
     DashboardtypesTableFormatting:
       properties:
         columnUnits:
@@ -7225,22 +7192,6 @@ 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:
@@ -7251,16 +7202,6 @@ components:
       required:
       - dashboards
       type: object
-    MetricsexplorertypesMetricDashboardsResponse:
-      properties:
-        dashboards:
-          items:
-            $ref: '#/components/schemas/MetricsexplorertypesMetricDashboard'
-          nullable: true
-          type: array
-      required:
-      - dashboards
-      type: object
     MetricsexplorertypesMetricHighlightsResponse:
       properties:
         activeTimeSeries:
@@ -13303,112 +13244,6 @@ 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
@@ -19660,74 +19495,6 @@ 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.Get(ctx, orgID, publicDashboard.DashboardID)
+	dashboard, err := module.GetV2(ctx, orgID, publicDashboard.DashboardID)
 	if err != nil {
 		return err
 	}
@@ -90,15 +90,6 @@ 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 {
@@ -116,24 +107,6 @@ 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 {
@@ -189,7 +162,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.Get(ctx, orgID, publicDashboard.DashboardID)
+	dashboard, err := module.GetV2(ctx, orgID, publicDashboard.DashboardID)
 	if err != nil {
 		return err
 	}
@@ -200,34 +173,13 @@ 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.Get(ctx, orgID, dashboardID)
+	dashboard, err := module.GetV2(ctx, orgID, dashboardID)
 	if err != nil {
 		return err
 	}
@@ -260,10 +212,6 @@ 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)
 }
@@ -346,30 +294,10 @@ 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)
 }
@@ -377,12 +305,3 @@ 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.GetByMetricNames(ctx, orgID, []string{metricName}); err != nil {
+	if dashboards, err := m.dashboard.GetByMetricNamesV2(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/public/locales/en-GB/titles.json

@@ -33,6 +33,7 @@
 	"NOT_FOUND": "SigNoz | Page Not Found",
 	"LOGS": "SigNoz | Logs",
 	"LOGS_EXPLORER": "SigNoz | Logs Explorer",
+	"LIVE_LOGS": "SigNoz | Live Logs",
 	"HOME_PAGE": "Open source Observability Platform | SigNoz",
 	"PASSWORD_RESET": "SigNoz | Password Reset",
 	"LIST_LICENSES": "SigNoz | List of Licenses",

frontend/public/locales/en/titles.json

@@ -42,6 +42,7 @@
 	"NOT_FOUND": "SigNoz | Page Not Found",
 	"LOGS": "SigNoz | Logs",
 	"LOGS_EXPLORER": "SigNoz | Logs Explorer",
+	"LIVE_LOGS": "SigNoz | Live Logs",
 	"LOGS_PIPELINES": "SigNoz | Logs Pipelines",
 	"HOME_PAGE": "Open source Observability Platform | SigNoz",
 	"PASSWORD_RESET": "SigNoz | Password Reset",

frontend/src/AppRoutes/__tests__/Private.test.tsx

@@ -1596,6 +1596,7 @@ describe('PrivateRoute', () => {
 			// route definition comes last, and both keys are authz-aware either way.
 			LOGS: { path: ROUTES.LOGS, deniedRoles: DENIED_ROLES },
 			LOGS_EXPLORER: { path: ROUTES.LOGS_EXPLORER, deniedRoles: DENIED_ROLES },
+			LIVE_LOGS: { path: ROUTES.LIVE_LOGS, deniedRoles: DENIED_ROLES },
 			METRICS_EXPLORER: {
 				path: ROUTES.METRICS_EXPLORER,
 				deniedRoles: DENIED_ROLES,

frontend/src/AppRoutes/pageComponents.ts

@@ -154,6 +154,10 @@ export const Logs = Loadable(
 	() => import(/* webpackChunkName: "Logs" */ 'pages/LogsModulePage'),
 );
 
+export const LiveLogs = Loadable(
+	() => import(/* webpackChunkName: "Live Logs" */ 'pages/LiveLogs'),
+);
+
 export const PipelinePage = Loadable(
 	() => import(/* webpackChunkName: "Pipelines" */ 'pages/LogsModulePage'),
 );

frontend/src/AppRoutes/routes.ts

@@ -23,6 +23,7 @@ import {
 	LicensePage,
 	ListAllALertsPage,
 	LLMObservabilityPage,
+	LiveLogs,
 	Login,
 	Logs,
 	LogsIndexToFields,
@@ -281,6 +282,13 @@ const routes: AppRoutes[] = [
 		key: 'LOGS',
 		isPrivate: true,
 	},
+	{
+		path: ROUTES.LIVE_LOGS,
+		exact: true,
+		component: LiveLogs,
+		key: 'LIVE_LOGS',
+		isPrivate: true,
+	},
 	{
 		path: ROUTES.LOGS_PIPELINES,
 		exact: true,

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

@@ -36,16 +36,12 @@ import type {
 	GetDashboardV2200,
 	GetDashboardV2PathParameters,
 	GetPublicDashboard200,
-	GetPublicDashboardData200,
-	GetPublicDashboardDataPathParameters,
 	GetPublicDashboardDataV2200,
 	GetPublicDashboardDataV2PathParameters,
 	GetPublicDashboardPanelQueryRangeV2200,
 	GetPublicDashboardPanelQueryRangeV2Params,
 	GetPublicDashboardPanelQueryRangeV2PathParameters,
 	GetPublicDashboardPathParameters,
-	GetPublicDashboardWidgetQueryRange200,
-	GetPublicDashboardWidgetQueryRangePathParameters,
 	GetSystemDashboard200,
 	GetSystemDashboardPathParameters,
 	ListDashboardViews200,
@@ -474,217 +470,6 @@ 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,8 +24,6 @@ import type {
 	GetMetricAlertsParams,
 	GetMetricAttributes200,
 	GetMetricAttributesParams,
-	GetMetricDashboards200,
-	GetMetricDashboardsParams,
 	GetMetricDashboardsV2200,
 	GetMetricDashboardsV2Params,
 	GetMetricHighlights200,
@@ -1096,104 +1094,6 @@ 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,50 +4886,6 @@ 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
@@ -5868,6 +5824,11 @@ export interface DashboardtypesDashboardViewDTO {
 	updatedAt?: string;
 }
 
+export enum DashboardtypesSourceDTO {
+	user = 'user',
+	system = 'system',
+	integration = 'integration',
+}
 export interface TagtypesGettableTagDTO {
 	/**
 	 * @type string
@@ -5945,11 +5906,6 @@ export interface DashboardtypesGettablePublicDasbhboardDTO {
 	timeRangeEnabled?: boolean;
 }
 
-export interface DashboardtypesGettablePublicDashboardDataDTO {
-	dashboard?: DashboardtypesDashboardDTO;
-	publicDashboard?: DashboardtypesGettablePublicDasbhboardDTO;
-}
-
 export interface DashboardtypesGettablePublicDashboardDataV2DTO {
 	dashboard?: DashboardtypesGettableDashboardV2DTO;
 	publicDashboard?: DashboardtypesGettablePublicDasbhboardDTO;
@@ -9022,25 +8978,6 @@ 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
@@ -9048,13 +8985,6 @@ export interface MetricsexplorertypesMetricDashboardPanelsResponseDTO {
 	dashboards: DashboardtypesDashboardPanelRefDTO[] | null;
 }
 
-export interface MetricsexplorertypesMetricDashboardsResponseDTO {
-	/**
-	 * @type array,null
-	 */
-	dashboards: MetricsexplorertypesMetricDashboardDTO[] | null;
-}
-
 export interface MetricsexplorertypesMetricHighlightsResponseDTO {
 	/**
 	 * @type integer
@@ -12488,29 +12418,6 @@ 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
@@ -13468,22 +13375,6 @@ 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/LogDetail/LogDetail.interfaces.ts

@@ -1,7 +1,7 @@
 import { DrawerProps } from 'antd';
-import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { AddToQueryHOCProps } from 'components/Logs/AddToQueryHOC';
-import { ActionItemProps } from 'container/LogDetailedView/LogDetailedView.types';
+import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
+import { ActionItemProps } from 'container/LogDetailedView/ActionItem';
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
 

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

@@ -19,6 +19,10 @@ jest.mock('periscope/components/DataViewer', () => ({
 }));
 
 // Force v2 for these tests regardless of route.
+jest.mock('../useIsLogDetailsV2', () => ({
+	useIsLogDetailsV2: (): boolean => true,
+}));
+
 const mockLog: ILog = {
 	id: 'log-1',
 	timestamp: '2024-01-15T09:45:30Z',
@@ -54,7 +58,7 @@ function renderDrawer(props: Partial<LogDetailProps> = {}): void {
 	);
 }
 
-describe('LogDetail drawer — header', () => {
+describe('LogDetail drawer — header (isLogDetailsV2)', () => {
 	afterEach(() => {
 		jest.clearAllMocks();
 		localStorage.clear();

frontend/src/components/LogDetail/index.tsx

@@ -1,10 +1,16 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { useCopyToClipboard } from 'react-use';
 import { Color, Spacing } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui/button';
 import { Drawer, Tooltip } from 'antd';
 import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
+import { Divider } from '@signozhq/ui/divider';
 import { Typography } from '@signozhq/ui/typography';
-import LogStateIndicator from 'components/Logs/LogStateIndicator/LogStateIndicator';
+import cx from 'classnames';
+import LogStateIndicator, {
+	LogType,
+} from 'components/Logs/LogStateIndicator/LogStateIndicator';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
 import { convertExpressionToFilters } from 'components/QueryBuilderV2/utils';
 import { FeatureKeys } from 'constants/features';
@@ -13,24 +19,33 @@ import ContextView from 'container/LogDetailedView/ContextView/ContextView';
 import InfraMetrics from 'container/LogDetailedView/InfraMetrics/InfraMetrics';
 import Overview from 'container/LogDetailedView/Overview';
 import {
+	aggregateAttributesResourcesToString,
 	getSanitizedLogBody,
 	removeEscapeCharacters,
 } from 'container/LogDetailedView/utils';
 import useInitialQuery from 'container/LogsExplorerContext/useInitialQuery';
 import { useOptionsMenu } from 'container/OptionsMenu';
 import { FontSize } from 'container/OptionsMenu/types';
+import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useNotifications } from 'hooks/useNotifications';
 import { cloneDeep } from 'lodash-es';
 import {
 	ArrowDown,
 	ArrowUp,
+	Braces,
+	ChevronDown,
+	ChevronUp,
+	Compass,
+	Copy,
 	Filter,
 	Histogram,
 	Table,
 	TextSelect,
 	X,
 } from '@signozhq/icons';
+import { JsonView } from 'periscope/components/JsonView';
 import { useAppContext } from 'providers/App/App';
 import { ILogBody } from 'types/api/logs/log';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
@@ -41,6 +56,7 @@ import { LogDetailInnerProps, LogDetailProps } from './LogDetail.interfaces';
 import LogDetailsHeader from './LogDetailsHeader/LogDetailsHeader';
 import { useLogNavigation } from './LogDetailsHeader/useLogNavigation';
 import LogHighlights from './LogHighlights/LogHighlights';
+import { useIsLogDetailsV2 } from './useIsLogDetailsV2';
 
 import './LogDetails.styles.scss';
 
@@ -48,8 +64,11 @@ import './LogDetails.styles.scss';
 function LogDetailInner({
 	log,
 	onClose,
+	onAddToQuery,
+	onClickActionItem,
 	selectedTab,
 	isListViewPanel = false,
+	listViewPanelSelectedFields,
 	handleChangeSelectedView,
 	logs,
 	onNavigateLog,
@@ -62,6 +81,7 @@ function LogDetailInner({
 	const [contextQuery, setContextQuery] = useState<Query | undefined>(
 		initialContextQuery,
 	);
+	const [, copyToClipboard] = useCopyToClipboard();
 	const [selectedView, setSelectedView] = useState<VIEWS>(selectedTab);
 
 	const [isFilterVisible, setIsFilterVisible] = useState<boolean>(false);
@@ -74,6 +94,8 @@ function LogDetailInner({
 	const [isEdit, setIsEdit] = useState<boolean>(false);
 	const { stagedQuery } = useQueryBuilder();
 
+	const isLogDetailsV2 = useIsLogDetailsV2();
+
 	// Handle clicks outside to close drawer, except on explicitly ignored regions
 	useEffect(() => {
 		const handleClickOutside = (e: MouseEvent): void => {
@@ -151,6 +173,12 @@ function LogDetailInner({
 
 	const isDarkMode = useIsDarkMode();
 
+	const { notifications } = useNotifications();
+
+	const { onLogCopy } = useCopyLogLink(log?.id);
+
+	const LogJsonData = log ? aggregateAttributesResourcesToString(log) : '';
+
 	const handleModeChange = (value: string): void => {
 		setSelectedView(value as VIEWS);
 		setIsEdit(false);
@@ -192,6 +220,13 @@ function LogDetailInner({
 		[logBody],
 	);
 
+	const handleJSONCopy = (): void => {
+		copyToClipboard(LogJsonData);
+		notifications.success({
+			message: 'Copied to clipboard',
+		});
+	};
+
 	const handleQueryExpressionChange = useCallback(
 		(value: string, queryIndex: number) => {
 			// update the query at the given index
@@ -260,6 +295,8 @@ function LogDetailInner({
 		}
 	};
 
+	const logType = log?.attributes_string?.log_level || LogType.INFO;
+
 	return (
 		<Drawer
 			width="60%"
@@ -267,15 +304,69 @@ function LogDetailInner({
 			maskClosable={false}
 			getContainer={getContainer}
 			title={
-				<LogDetailsHeader
-					log={log}
-					onNavigatePrev={goToPrev}
-					onNavigateNext={goToNext}
-					isPrevDisabled={isPrevDisabled}
-					isNextDisabled={isNextDisabled}
-					showOpenInExplorer={!!handleOpenInExplorer}
-					onOpenInExplorer={handleOpenInExplorer}
-				/>
+				isLogDetailsV2 ? (
+					<LogDetailsHeader
+						log={log}
+						onNavigatePrev={goToPrev}
+						onNavigateNext={goToNext}
+						isPrevDisabled={isPrevDisabled}
+						isNextDisabled={isNextDisabled}
+						showOpenInExplorer={!!handleOpenInExplorer}
+						onOpenInExplorer={handleOpenInExplorer}
+					/>
+				) : (
+					<div className="log-detail-drawer__title" data-log-detail-ignore="true">
+						<div className="log-detail-drawer__title-left">
+							<Divider type="vertical" className={cx('log-type-indicator', LogType)} />
+							<Typography.Text className="title">Log details</Typography.Text>
+						</div>
+						<div className="log-detail-drawer__title-right">
+							<div className="log-arrows">
+								<Tooltip
+									title={isPrevDisabled ? '' : 'Move to previous log'}
+									placement="top"
+									mouseLeaveDelay={0}
+								>
+									<Button
+										variant="outlined"
+										color="secondary"
+										prefix={<ChevronUp size={14} />}
+										className="log-arrow-btn log-arrow-btn-up"
+										disabled={isPrevDisabled}
+										onClick={goToPrev}
+									/>
+								</Tooltip>
+								<Tooltip
+									title={isNextDisabled ? '' : 'Move to next log'}
+									placement="top"
+									mouseLeaveDelay={0}
+								>
+									<Button
+										variant="outlined"
+										color="secondary"
+										prefix={<ChevronDown size={14} />}
+										className="log-arrow-btn log-arrow-btn-down"
+										disabled={isNextDisabled}
+										onClick={goToNext}
+									/>
+								</Tooltip>
+							</div>
+							{handleOpenInExplorer && (
+								<div>
+									<Button
+										variant="outlined"
+										color="secondary"
+										prefix={<Compass size={16} />}
+										className="open-in-explorer-btn"
+										onClick={handleOpenInExplorer}
+									>
+										Open in Explorer
+									</Button>
+								</div>
+							)}
+						</div>
+					</div>
+				)
 			}
 			placement="right"
 			onClose={drawerCloseHandler}
@@ -294,11 +385,15 @@ function LogDetailInner({
 				data-testid="log-detail-drawer"
 			>
 				<div className="log-detail-drawer__log">
-					<LogStateIndicator
-						severityText={log.severity_text}
-						severityNumber={log.severity_number}
-						fontSize={options?.fontSize ?? FontSize.MEDIUM}
-					/>
+					{isLogDetailsV2 ? (
+						<LogStateIndicator
+							severityText={log.severity_text}
+							severityNumber={log.severity_number}
+							fontSize={options?.fontSize ?? FontSize.MEDIUM}
+						/>
+					) : (
+						<Divider type="vertical" className={cx('log-type-indicator', logType)} />
+					)}
 					<Tooltip
 						title={removeEscapeCharacters(logBody)}
 						placement="left"
@@ -310,9 +405,9 @@ function LogDetailInner({
 					<div className="log-overflow-shadow">&nbsp;</div>
 				</div>
 
-				<LogHighlights log={log} />
+				{isLogDetailsV2 && <LogHighlights log={log} />}
 
-				<div className="log-detail-drawer__section-divider" />
+				{isLogDetailsV2 && <div className="log-detail-drawer__section-divider" />}
 
 				<div className="tabs-and-search">
 					<ToggleGroupSimple
@@ -330,6 +425,21 @@ function LogDetailInner({
 									</div>
 								),
 							},
+							// V2's DataViewer has its own Pretty/JSON toggle, so the separate
+							// JSON tab is redundant.
+							...(isLogDetailsV2
+								? []
+								: [
+										{
+											value: VIEW_TYPES.JSON,
+											label: (
+												<div className="view-title">
+													<Braces size={14} />
+													JSON
+												</div>
+											),
+										},
+									]),
 							{
 								value: VIEW_TYPES.CONTEXT,
 								label: (
@@ -368,6 +478,26 @@ function LogDetailInner({
 								/>
 							</Tooltip>
 						)}
+
+						{/* V2 moves copy actions into the header ⋯ menu */}
+						{!isLogDetailsV2 && (
+							<Tooltip
+								title={selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'}
+								placement="topLeft"
+								aria-label={
+									selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'
+								}
+								mouseLeaveDelay={0}
+							>
+								<Button
+									variant="link"
+									color="secondary"
+									size="sm"
+									prefix={<Copy size={12} />}
+									onClick={selectedView === VIEW_TYPES.JSON ? handleJSONCopy : onLogCopy}
+								/>
+							</Tooltip>
+						)}
 					</div>
 				</div>
 				{isFilterVisible && contextQuery?.builder.queryData[0] && (
@@ -384,11 +514,19 @@ function LogDetailInner({
 				{selectedView === VIEW_TYPES.OVERVIEW && (
 					<Overview
 						logData={log}
+						onAddToQuery={onAddToQuery}
+						onClickActionItem={onClickActionItem}
 						isListViewPanel={isListViewPanel}
+						selectedOptions={options}
+						listViewPanelSelectedFields={listViewPanelSelectedFields}
 						handleChangeSelectedView={handleChangeSelectedView}
 						onApplyLogFilter={onApplyLogFilter}
 					/>
 				)}
+				{!isLogDetailsV2 && selectedView === VIEW_TYPES.JSON && (
+					<JsonView data={LogJsonData} height="68vh" />
+				)}
+
 				{selectedView === VIEW_TYPES.CONTEXT && (
 					<ContextView
 						log={log}

frontend/src/components/LogDetail/useIsLogDetailsV2.ts

@@ -0,0 +1,11 @@
+import ROUTES from 'constants/routes';
+import { useLocation } from 'react-router-dom';
+
+export function useIsLogDetailsV2(): boolean {
+	const { pathname } = useLocation();
+	return (
+		pathname === ROUTES.LOGS_EXPLORER ||
+		pathname.startsWith(ROUTES.INFRASTRUCTURE_MONITORING_BASE) ||
+		pathname.startsWith(`${ROUTES.ALL_DASHBOARD}/`)
+	);
+}

frontend/src/components/Logs/CopyClipboardHOC.tsx

@@ -0,0 +1,54 @@
+import { ReactNode, useCallback, useEffect } from 'react';
+import { useCopyToClipboard } from 'react-use';
+import { Popover } from 'antd';
+import { useNotifications } from 'hooks/useNotifications';
+
+function CopyClipboardHOC({
+	entityKey,
+	textToCopy,
+	tooltipText = 'Copy to clipboard',
+	children,
+}: CopyClipboardHOCProps): JSX.Element {
+	const [value, setCopy] = useCopyToClipboard();
+	const { notifications } = useNotifications();
+	useEffect(() => {
+		if (value.value) {
+			const key = entityKey || '';
+
+			const notificationMessage = `${key} copied to clipboard`;
+
+			notifications.success({
+				message: notificationMessage,
+				key: notificationMessage,
+			});
+		}
+	}, [value, notifications, entityKey]);
+
+	const onClick = useCallback((): void => {
+		setCopy(textToCopy);
+	}, [setCopy, textToCopy]);
+
+	return (
+		<span onClick={onClick} role="presentation" tabIndex={-1}>
+			<Popover
+				placement="top"
+				overlayClassName="drawer-popover"
+				content={<span style={{ fontSize: '0.9rem' }}>{tooltipText}</span>}
+			>
+				{children}
+			</Popover>
+		</span>
+	);
+}
+
+interface CopyClipboardHOCProps {
+	entityKey: string | undefined;
+	textToCopy: string;
+	tooltipText?: string;
+	children: ReactNode;
+}
+
+export default CopyClipboardHOC;
+CopyClipboardHOC.defaultProps = {
+	tooltipText: 'Copy to clipboard',
+};

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

@@ -2,6 +2,8 @@
 	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

@@ -0,0 +1,33 @@
+// 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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,79 @@
+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,27 +6,12 @@
 	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

@@ -0,0 +1,38 @@
+// 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,6 +5,11 @@ 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>;
 }
@@ -74,6 +79,36 @@ 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,20 +5,32 @@ 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>();
@@ -50,11 +62,16 @@ function RouteTab({
 		label: name,
 		key,
 		tabKey: route,
-		children: <Component />,
+		children: (
+			<OverlayScrollbar>
+				<Component />
+			</OverlayScrollbar>
+		),
 	}));
 
 	return (
 		<Tabs
+			className={cx(styles.routeTab, className)}
 			onChange={onChange}
 			destroyInactiveTabPane
 			activeKey={currentRoute?.key || activeKey}

frontend/src/constants/localStorage.ts

@@ -47,4 +47,5 @@ export enum LOCALSTORAGE {
 	DASHBOARDS_LIST_VIEWS = 'DASHBOARDS_LIST_VIEWS',
 	DASHBOARD_V2_PANEL_COLUMN_WIDTHS = 'DASHBOARD_V2_PANEL_COLUMN_WIDTHS',
 	LLM_ATTRIBUTE_MAPPING_TEST_SPAN = 'LLM_ATTRIBUTE_MAPPING_TEST_SPAN',
+	SAVED_VIEW_ENABLED = 'SAVED_VIEW_ENABLED',
 }

frontend/src/constants/routes.ts

@@ -38,6 +38,7 @@ const ROUTES = {
 	LOGS_BASE: '/logs',
 	LOGS: '/logs/logs-explorer',
 	LOGS_EXPLORER: '/logs/logs-explorer',
+	LIVE_LOGS: '/logs/logs-explorer/live',
 	LOGS_PIPELINES: '/logs/pipelines',
 	PASSWORD_RESET: '/password-reset',
 	LIST_LICENSES: '/licenses',

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

@@ -1,23 +1,15 @@
-.api-monitoring-page {
-	display: flex;
-	height: 100%;
+.api-monitoring-explorer {
+	.api-quick-filters-header {
+		padding: 12px;
+		border-bottom: 1px solid var(--l1-border);
+		border-right: 1px solid var(--l1-border);
 
-	.api-quick-filter-left-section {
-		width: 0%;
-		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		gap: 6px;
 
-		.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;
-		}
+		font-size: 14px;
+		line-height: 18px;
 	}
 
 	.api-module-right-section {
@@ -161,16 +153,6 @@
 			}
 		}
 	}
-
-	&.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,8 +1,7 @@
 import { useEffect } from 'react';
 import * as Sentry from '@sentry/react';
 import logEvent from 'api/common/logEvent';
-import cx from 'classnames';
-import QuickFilters from 'components/QuickFilters/QuickFilters';
+import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
 import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
@@ -20,20 +19,21 @@ function Explorer(): JSX.Element {
 
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<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>
+			<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,
+				}}
+			>
 				<DomainList />
-			</div>
+			</QuickFiltersLayout>
 		</Sentry.ErrorBoundary>
 	);
 }

frontend/src/container/AppLayout/AppLayout.styles.scss

@@ -53,6 +53,10 @@
 		z-index: 0;
 		background: var(--l1-background);
 
+		// Column so the bottom strip sits under the scrolling content, not inside it.
+		display: flex;
+		flex-direction: column;
+
 		&.full-screen-content {
 			width: 100%;
 		}
@@ -70,7 +74,9 @@
 
 .chat-support-gateway {
 	position: fixed;
-	bottom: 20px;
+	// Lifted above the bottom strip. Don't extend this pattern — new fixed-bottom
+	// UI belongs in the bounded layout, not in another offset here.
+	bottom: calc(20px + var(--bottom-strip-height, 0px));
 	right: 20px;
 	z-index: 1000;
 

frontend/src/container/AppLayout/index.tsx

@@ -43,6 +43,7 @@ import { USER_PREFERENCES } from 'constants/userPreferences';
 import AIAssistantModal from 'container/AIAssistant/AIAssistantModal';
 import AIAssistantPanel from 'container/AIAssistant/AIAssistantPanel';
 import { useAIAssistantStore } from 'container/AIAssistant/store/useAIAssistantStore';
+import BottomStrip from 'container/BottomStrip';
 import SideNav from 'container/SideNav';
 import TopNav from 'container/TopNav';
 import dayjs from 'dayjs';
@@ -51,6 +52,7 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
 import { useNotifications } from 'hooks/useNotifications';
+import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
 import useTabVisibility from 'hooks/useTabFocus';
 import history from 'lib/history';
 import { isNull } from 'lodash-es';
@@ -402,6 +404,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	}, [pathname]);
 
 	const isToDisplayLayout = isLoggedIn;
+	const isSavedViewEnabled = useSavedViewEnabled();
 
 	const routeKey = useMemo(() => getRouteKey(pathname), [pathname]);
 	const pageTitle = t(routeKey);
@@ -868,6 +871,10 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 								</OverlayScrollbar>
 							</LayoutContent>
 						</Sentry.ErrorBoundary>
+
+						{isSavedViewEnabled && isToDisplayLayout && !renderFullScreen && (
+							<BottomStrip />
+						)}
 					</div>
 
 					{isLoggedIn && isAIAssistantEnabled && (

frontend/src/container/AppLayout/styles.ts

@@ -12,8 +12,12 @@ export const Layout = styled(LayoutComponent)`
 	}
 `;
 
+// Takes the height left in `.app-content` after the bottom strip.
+// `min-height: 0` is not needed right now, overlayscrollbars already sets
+// `overflow: auto` here. Kept so this does not break if that goes away.
 export const LayoutContent = styled(LayoutComponent.Content)`
-	height: 100%;
+	flex: 1;
+	min-height: 0;
 	&::-webkit-scrollbar {
 		width: 0.1rem;
 	}

frontend/src/container/BottomStrip/BottomStrip.module.scss

@@ -0,0 +1,40 @@
+.strip {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 12px;
+
+	flex-shrink: 0;
+	height: var(--bottom-strip-height);
+	padding: 0 12px;
+
+	background: var(--l2-background);
+	border-top: 1px solid var(--l2-border);
+
+	// font styles
+	font-family: var(--font-family-sf-mono, monospace);
+	font-size: 13px;
+	font-weight: var(--font-weight-normal);
+	line-height: var(--line-height-none);
+
+	// Above page content, below the body-portalled overlays that are meant to
+	// cover the strip.
+	position: relative;
+	z-index: 1;
+}
+
+.left,
+.right {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	min-width: 0;
+}
+
+// Temporary placeholder for the left slot. Replaced later.
+.version {
+	color: var(--l2-foreground);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}

frontend/src/container/BottomStrip/__tests__/BottomStrip.test.tsx

@@ -0,0 +1,49 @@
+import { render } from 'tests/test-utils';
+
+import BottomStrip, {
+	BOTTOM_STRIP_HEIGHT,
+	BOTTOM_STRIP_HEIGHT_VAR,
+	BOTTOM_STRIP_ON_CLASS,
+} from '..';
+
+describe('BottomStrip', () => {
+	it('publishes the body class and height property while mounted', () => {
+		const { unmount } = render(<BottomStrip />);
+
+		expect(document.body.classList.contains(BOTTOM_STRIP_ON_CLASS)).toBe(true);
+		expect(document.body.style.getPropertyValue(BOTTOM_STRIP_HEIGHT_VAR)).toBe(
+			`${BOTTOM_STRIP_HEIGHT}px`,
+		);
+
+		unmount();
+
+		expect(document.body.classList.contains(BOTTOM_STRIP_ON_CLASS)).toBe(false);
+		expect(document.body.style.getPropertyValue(BOTTOM_STRIP_HEIGHT_VAR)).toBe(
+			'',
+		);
+	});
+
+	// The string is whatever the Go build injected, so it is rendered untouched —
+	// same as SideNav. Release tags carry the "v", local builds do not.
+	it.each([['v0.134.67'], ['main-64f1c2a']])(
+		'renders the build version %p exactly as given',
+		(version) => {
+			const { getByTestId } = render(<BottomStrip />, undefined, {
+				appContextOverrides: {
+					versionData: { version, ee: 'Y', setupCompleted: true },
+				},
+			});
+
+			expect(getByTestId('bottom-strip-version')).toHaveTextContent(version);
+		},
+	);
+
+	it('renders the strip without a version when none is available', () => {
+		const { getByTestId, queryByTestId } = render(<BottomStrip />, undefined, {
+			appContextOverrides: { versionData: null },
+		});
+
+		expect(getByTestId('bottom-strip')).toBeInTheDocument();
+		expect(queryByTestId('bottom-strip-version')).not.toBeInTheDocument();
+	});
+});

frontend/src/container/BottomStrip/index.tsx

@@ -0,0 +1,42 @@
+import { useLayoutEffect } from 'react';
+import { useAppContext } from 'providers/App/App';
+
+import styles from './BottomStrip.module.scss';
+
+export const BOTTOM_STRIP_HEIGHT = 24;
+
+export const BOTTOM_STRIP_ON_CLASS = 'bottom-strip-on';
+export const BOTTOM_STRIP_HEIGHT_VAR = '--bottom-strip-height';
+
+function BottomStrip(): JSX.Element {
+	const { versionData } = useAppContext();
+	const version = versionData?.version?.trim();
+
+	useLayoutEffect(() => {
+		document.body.classList.add(BOTTOM_STRIP_ON_CLASS);
+		document.body.style.setProperty(
+			BOTTOM_STRIP_HEIGHT_VAR,
+			`${BOTTOM_STRIP_HEIGHT}px`,
+		);
+
+		return (): void => {
+			document.body.classList.remove(BOTTOM_STRIP_ON_CLASS);
+			document.body.style.removeProperty(BOTTOM_STRIP_HEIGHT_VAR);
+		};
+	}, []);
+
+	return (
+		<div className={styles.strip} data-testid="bottom-strip">
+			<div className={styles.left}>
+				{version && (
+					<span className={styles.version} data-testid="bottom-strip-version">
+						{version}
+					</span>
+				)}
+			</div>
+			<div className={styles.right} />
+		</div>
+	);
+}
+
+export default BottomStrip;

frontend/src/container/CreateAlertV2/Footer/styles.scss

@@ -1,6 +1,8 @@
 .create-alert-v2-footer {
 	position: fixed;
-	bottom: 0;
+	// Lifted above the bottom strip. Don't extend this pattern — new fixed-bottom
+	// UI belongs in the bounded layout, not in another offset here.
+	bottom: var(--bottom-strip-height, 0px);
 	left: 63px;
 	right: 0;
 	background-color: var(--l1-background);

frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss

@@ -1,6 +1,8 @@
 .explorer-options-container {
 	position: fixed;
-	bottom: 0px;
+	// Lifted above the bottom strip. Don't extend this pattern — new fixed-bottom
+	// UI belongs in the bounded layout, not in another offset here.
+	bottom: var(--bottom-strip-height, 0px);
 	left: calc(50% + 240px);
 	transform: translate(calc(-50% - 120px), 0);
 	transition: left 0.2s linear;

frontend/src/container/ExplorerOptions/ExplorerOptionsHideArea.styles.scss

@@ -1,6 +1,8 @@
 .explorer-option-droppable-container {
 	position: fixed;
-	bottom: 0;
+	// Lifted above the bottom strip. Don't extend this pattern — new fixed-bottom
+	// UI belongs in the bounded layout, not in another offset here.
+	bottom: var(--bottom-strip-height, 0px);
 	width: -webkit-fill-available;
 	height: 24px;
 	display: flex;

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityEvents/EventsContent.tsx

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import type { ColumnsType } from 'antd/lib/table';
 import { ResizeTable } from 'components/ResizeTable';
 import FieldRenderer from 'container/LogDetailedView/FieldRenderer';
-import { DataType } from 'container/LogDetailedView/LogDetailedView.types';
+import { DataType } from 'container/LogDetailedView/TableView';
 
 import styles from './EventsContent.module.scss';
 

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

@@ -65,8 +65,6 @@
 }
 
 .trace-explorer-page {
-	display: flex;
-
 	// Meant to fix the query builder colors
 	--input-background: var(--l2-background);
 	--input-hover-background: var(--l2-background);
@@ -75,32 +73,8 @@
 	--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,12 +2,10 @@ 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 QuickFilters from 'components/QuickFilters/QuickFilters';
+import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
 import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
@@ -188,26 +186,21 @@ function Explorer(): JSX.Element {
 
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<div
+			<QuickFiltersLayout
 				className="trace-explorer-page"
-				data-testid="llm-observability-explorer"
+				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);
+					},
+				}}
 			>
-				<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">
 					<div className="trace-explorer-header">
 						<Toolbar
 							showAutoRefresh
@@ -291,7 +284,7 @@ function Explorer(): JSX.Element {
 						)}
 					</div>
 				</div>
-			</div>
+			</QuickFiltersLayout>
 		</Sentry.ErrorBoundary>
 	);
 }

frontend/src/container/LogDetailedView/ActionItem.tsx

@@ -0,0 +1,64 @@
+import { memo, useCallback, useMemo } from 'react';
+import { CircleMinus, CirclePlus } from '@signozhq/icons';
+import { Button, Col, Popover } from 'antd';
+import { OPERATORS } from 'constants/queryBuilder';
+import { removeJSONStringifyQuotes } from 'lib/removeJSONStringifyQuotes';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+
+function ActionItem({
+	fieldKey,
+	fieldValue,
+	onClickActionItem,
+}: ActionItemProps): JSX.Element {
+	const handleClick = useCallback(
+		(operator: string) => {
+			const validatedFieldValue = removeJSONStringifyQuotes(fieldValue);
+
+			onClickActionItem(fieldKey, validatedFieldValue, operator);
+		},
+		[onClickActionItem, fieldKey, fieldValue],
+	);
+
+	const onClickHandler = useCallback(
+		(operator: string) => (): void => {
+			handleClick(operator);
+		},
+		[handleClick],
+	);
+
+	const PopOverMenuContent = useMemo(
+		() => (
+			<Col>
+				<Button type="text" size="small" onClick={onClickHandler(OPERATORS.IN)}>
+					<CirclePlus size={12} /> Filter for value
+				</Button>
+				<br />
+				<Button type="text" size="small" onClick={onClickHandler(OPERATORS.NIN)}>
+					<CircleMinus size={12} /> Filter out value
+				</Button>
+			</Col>
+		),
+		[onClickHandler],
+	);
+	return (
+		<Popover placement="bottomLeft" content={PopOverMenuContent} trigger="click">
+			<Button type="text" size="small">
+				...
+			</Button>
+		</Popover>
+	);
+}
+
+export interface ActionItemProps {
+	fieldKey: string;
+	fieldValue: string;
+	onClickActionItem: (
+		fieldKey: string,
+		fieldValue: string,
+		operator: string,
+		dataType?: DataTypes,
+		fieldType?: string,
+	) => void;
+}
+
+export default memo(ActionItem);

frontend/src/container/LogDetailedView/BodyTitleRenderer.styles.ts

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+export const TitleWrapper = styled.span`
+	user-select: text !important;
+	cursor: text;
+
+	.hover-reveal {
+		visibility: hidden;
+	}
+
+	&:hover .hover-reveal {
+		visibility: visible;
+	}
+`;

frontend/src/container/LogDetailedView/BodyTitleRenderer.tsx

@@ -0,0 +1,247 @@
+import { useCallback } from 'react';
+import { useCopyToClipboard } from 'react-use';
+import { orange } from '@ant-design/colors';
+import { Settings } from '@signozhq/icons';
+import {
+	type BaseMenuItem,
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from '@signozhq/ui/dropdown-menu';
+import {
+	negateOperator,
+	OPERATORS,
+	QUERY_BUILDER_FUNCTIONS,
+} from 'constants/antlrQueryConstants';
+import { FeatureKeys } from 'constants/features';
+import { useActiveLog } from 'hooks/logs/useActiveLog';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { ICurrentQueryData } from 'hooks/useHandleExplorerTabChange';
+import { useNotifications } from 'hooks/useNotifications';
+import { ExplorerViews } from 'pages/LogsExplorer/utils';
+import { useAppContext } from 'providers/App/App';
+import {
+	BaseAutocompleteData,
+	DataTypes,
+} from 'types/api/queryBuilder/queryAutocompleteResponse';
+
+import { TitleWrapper } from './BodyTitleRenderer.styles';
+import { DROPDOWN_KEY } from './constant';
+import { BodyTitleRendererProps } from './LogDetailedView.types';
+import {
+	generateFieldKeyForArray,
+	getDataTypes,
+	removeObjectFromString,
+} from './utils';
+
+function BodyTitleRenderer({
+	title,
+	parentIsArray = false,
+	nodeKey,
+	value,
+	handleChangeSelectedView,
+}: BodyTitleRendererProps): JSX.Element {
+	const { onAddToQuery } = useActiveLog();
+	const { stagedQuery, updateQueriesData } = useQueryBuilder();
+
+	const { featureFlags } = useAppContext();
+	const [, setCopy] = useCopyToClipboard();
+	const { notifications } = useNotifications();
+
+	const cleanedNodeKey = removeObjectFromString(nodeKey);
+	const isBodyJsonQueryEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.USE_JSON_BODY)
+			?.active || false;
+
+	// Group by is supported only for body json query enabled and not for array elements
+	const isGroupBySupported =
+		isBodyJsonQueryEnabled && !cleanedNodeKey.includes('[]');
+
+	const filterHandler = (isFilterIn: boolean) => (): void => {
+		if (parentIsArray) {
+			onAddToQuery(
+				generateFieldKeyForArray(
+					cleanedNodeKey,
+					getDataTypes(value),
+					isBodyJsonQueryEnabled,
+				),
+				`${value}`,
+				isFilterIn
+					? QUERY_BUILDER_FUNCTIONS.HAS
+					: negateOperator(QUERY_BUILDER_FUNCTIONS.HAS),
+				parentIsArray ? getDataTypes([value]) : getDataTypes(value),
+			);
+		} else {
+			onAddToQuery(
+				`body.${cleanedNodeKey}`,
+				`${value}`,
+				isFilterIn ? OPERATORS['='] : OPERATORS['!='],
+				getDataTypes(value),
+			);
+		}
+	};
+
+	const groupByHandler = useCallback((): void => {
+		if (!stagedQuery) {
+			return;
+		}
+
+		const groupByKey = parentIsArray
+			? generateFieldKeyForArray(
+					cleanedNodeKey,
+					getDataTypes(value),
+					isBodyJsonQueryEnabled,
+				)
+			: `body.${cleanedNodeKey}`;
+
+		const fieldDataType = getDataTypes(value);
+		const normalizedDataType: DataTypes | undefined = Object.values(
+			DataTypes,
+		).includes(fieldDataType as DataTypes)
+			? (fieldDataType as DataTypes)
+			: undefined;
+
+		const updatedQuery = updateQueriesData(
+			stagedQuery,
+			'queryData',
+			(item, index) => {
+				if (index === 0) {
+					const newGroupByItem: BaseAutocompleteData = {
+						key: groupByKey,
+						type: '',
+						dataType: normalizedDataType,
+					};
+
+					return { ...item, groupBy: [...(item.groupBy || []), newGroupByItem] };
+				}
+
+				return item;
+			},
+		);
+
+		const queryData: ICurrentQueryData = {
+			query: updatedQuery,
+		};
+
+		handleChangeSelectedView?.(ExplorerViews.TIMESERIES, queryData);
+	}, [
+		cleanedNodeKey,
+		handleChangeSelectedView,
+		isBodyJsonQueryEnabled,
+		parentIsArray,
+		stagedQuery,
+		updateQueriesData,
+		value,
+	]);
+
+	const onClickHandler = (key: string): void => {
+		const mapper = {
+			[DROPDOWN_KEY.FILTER_IN]: filterHandler(true),
+			[DROPDOWN_KEY.FILTER_OUT]: filterHandler(false),
+			[DROPDOWN_KEY.GROUP_BY]: groupByHandler,
+		};
+
+		const handler = mapper[key];
+
+		if (handler) {
+			handler();
+		}
+	};
+
+	const menuItems: BaseMenuItem[] = [
+		{
+			key: DROPDOWN_KEY.FILTER_IN,
+			label: `Filter for ${value}`,
+		},
+		{
+			key: DROPDOWN_KEY.FILTER_OUT,
+			label: `Filter out ${value}`,
+		},
+		...(isGroupBySupported
+			? [
+					{
+						key: DROPDOWN_KEY.GROUP_BY,
+						label: `Group by ${nodeKey}`,
+					},
+				]
+			: []),
+	];
+
+	const handleNodeClick = useCallback(
+		(e: React.MouseEvent): void => {
+			// Prevent tree node expansion/collapse
+			e.stopPropagation();
+			let copyText: string;
+
+			// Check if value is an object or array
+			const isObject = typeof value === 'object' && value !== null;
+
+			if (isObject) {
+				// For objects/arrays, stringify the entire structure
+				copyText = JSON.stringify(value, null, 2);
+			} else if (parentIsArray) {
+				// array elements
+				copyText = `${value}`;
+			} else {
+				// primitive values
+				const valueStr = typeof value === 'string' ? value : String(value);
+				copyText = valueStr;
+			}
+
+			setCopy(copyText);
+
+			if (copyText) {
+				const notificationMessage = isObject
+					? `${cleanedNodeKey} object copied to clipboard`
+					: `${cleanedNodeKey} copied to clipboard`;
+
+				notifications.success({
+					message: notificationMessage,
+					key: notificationMessage,
+				});
+			}
+		},
+		[cleanedNodeKey, parentIsArray, setCopy, value, notifications],
+	);
+
+	return (
+		<TitleWrapper onClick={handleNodeClick}>
+			{typeof value !== 'object' && (
+				<span
+					onClick={(e): void => {
+						e.stopPropagation();
+						e.preventDefault();
+					}}
+					onMouseDown={(e): void => e.preventDefault()}
+				>
+					<DropdownMenu>
+						<DropdownMenuTrigger asChild>
+							<Settings style={{ marginRight: 8 }} className="hover-reveal" />
+						</DropdownMenuTrigger>
+						<DropdownMenuContent align="start">
+							<div data-log-detail-ignore="true">
+								{menuItems.map((item) => (
+									<DropdownMenuItem
+										key={item.key}
+										onSelect={(): void => onClickHandler(item.key as string)}
+									>
+										{item.label}
+									</DropdownMenuItem>
+								))}
+							</div>
+						</DropdownMenuContent>
+					</DropdownMenu>
+				</span>
+			)}
+			{title.toString()}{' '}
+			{!parentIsArray && typeof value !== 'object' && (
+				<span>
+					: <span style={{ color: orange[6] }}>{`${value}`}</span>
+				</span>
+			)}
+		</TitleWrapper>
+	);
+}
+
+export default BodyTitleRenderer;

frontend/src/container/LogDetailedView/JsonView.tsx

@@ -0,0 +1,92 @@
+import { useMemo, useState } from 'react';
+import MEditor, { EditorProps, Monaco } from '@monaco-editor/react';
+import { Color } from '@signozhq/design-tokens';
+import { Switch } from '@signozhq/ui/switch';
+import { Typography } from '@signozhq/ui/typography';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+import { JSONViewProps } from './LogDetailedView.types';
+import { aggregateAttributesResourcesToString } from './utils';
+
+import './JsonView.styles.scss';
+
+function JSONView({ logData }: JSONViewProps): JSX.Element {
+	const [isWrapWord, setIsWrapWord] = useState<boolean>(true);
+
+	const LogJsonData = useMemo(
+		() => aggregateAttributesResourcesToString(logData),
+		[logData],
+	);
+
+	const isDarkMode = useIsDarkMode();
+
+	const options: EditorProps['options'] = {
+		automaticLayout: true,
+		readOnly: true,
+		wordWrap: isWrapWord ? 'on' : 'off',
+		minimap: {
+			enabled: false,
+		},
+		fontWeight: '400',
+		// fontFamily: 'SF Mono',
+		fontFamily: 'Geist Mono',
+		fontSize: 13,
+		lineHeight: 18,
+		colorDecorators: true,
+		scrollBeyondLastLine: false,
+		scrollbar: {
+			vertical: 'hidden',
+			horizontal: 'hidden',
+		},
+		folding: false,
+	};
+
+	const handleWrapWord = (checked: boolean): void => {
+		setIsWrapWord(checked);
+	};
+
+	function setEditorTheme(monaco: Monaco): void {
+		monaco.editor.defineTheme('my-theme', {
+			base: 'vs-dark',
+			inherit: true,
+			rules: [
+				{ token: 'string.key.json', foreground: Color.BG_VANILLA_400 },
+				{ token: 'string.value.json', foreground: Color.BG_ROBIN_400 },
+			],
+			colors: {
+				'editor.background': Color.BG_INK_400,
+			},
+			// fontFamily: 'SF Mono',
+			fontFamily: 'Space Mono',
+			fontSize: 12,
+			fontWeight: 'normal',
+			lineHeight: 18,
+			letterSpacing: -0.06,
+		});
+	}
+
+	return (
+		<div className="json-view-container">
+			<MEditor
+				value={LogJsonData}
+				language="json"
+				options={options}
+				onChange={(): void => {}}
+				height="68vh"
+				theme={isDarkMode ? 'my-theme' : 'light'}
+				beforeMount={setEditorTheme}
+			/>
+
+			<div className="json-view-footer">
+				<div className="log-switch">
+					<div className="wrap-word-switch">
+						<Typography.Text>Wrap text</Typography.Text>
+						<Switch value={isWrapWord} onChange={handleWrapWord} />
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default JSONView;

frontend/src/container/LogDetailedView/LogDetailedView.types.ts

@@ -1,5 +1,14 @@
+import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { MetricsType } from 'container/MetricsApplication/constant';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { ILog } from 'types/api/logs/log';
+
+export interface BodyTitleRendererProps {
+	title: string;
+	nodeKey: string;
+	value: unknown;
+	parentIsArray?: boolean;
+	handleChangeSelectedView?: ChangeViewFunctionType;
+}
 
 export type AnyObject = { [key: string]: any };
 
@@ -13,21 +22,6 @@ export interface IFieldAttributes {
 	logType?: MetricsType;
 }
 
-/** One key/field/value row in an attribute table. */
-export interface DataType {
-	key: string;
-	field: string;
-	value: string;
-}
-
-export interface ActionItemProps {
-	fieldKey: string;
-	fieldValue: string;
-	onClickActionItem: (
-		fieldKey: string,
-		fieldValue: string,
-		operator: string,
-		dataType?: DataTypes,
-		fieldType?: string,
-	) => void;
+export interface JSONViewProps {
+	logData: ILog;
 }

frontend/src/container/LogDetailedView/Overview.tsx

@@ -1,13 +1,32 @@
-import { ReactNode } from 'react';
+import { ReactNode, useState } from 'react';
+import MEditor, { EditorProps, Monaco } from '@monaco-editor/react';
+import { Color } from '@signozhq/design-tokens';
+import { Button } from '@signozhq/ui/button';
+import { Input } from '@signozhq/ui/input';
+import { Switch } from '@signozhq/ui/switch';
+import { Collapse } from 'antd';
+import { Divider } from '@signozhq/ui/divider';
+import { Badge } from '@signozhq/ui/badge';
+import { Typography } from '@signozhq/ui/typography';
+import { AddToQueryHOCProps } from 'components/Logs/AddToQueryHOC';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
+import { OptionsQuery } from 'container/OptionsMenu/types';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { ChevronDown, ChevronRight, Search } from '@signozhq/icons';
+import { useIsLogDetailsV2 } from 'components/LogDetail/useIsLogDetailsV2';
 import { DataViewer } from 'periscope/components/DataViewer';
+import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
 
+import { ActionItemProps } from './ActionItem';
 import { useLogAttributeActions } from './hooks/useLogAttributeActions';
+import TableView from './TableView';
 import {
 	aggregateAttributesResourcesToObject,
 	buildPrettyViewData,
+	getBodyDisplayString,
 	getSanitizedLogBody,
+	removeEscapeCharacters,
 } from './utils';
 
 import './Overview.styles.scss';
@@ -19,58 +38,247 @@ const MAX_BODY_SANITIZE_CHARS = 64 * 1024;
 interface OverviewProps {
 	logData: ILog;
 	isListViewPanel?: boolean;
+	selectedOptions: OptionsQuery;
+	listViewPanelSelectedFields?: IField[] | null;
 	handleChangeSelectedView?: ChangeViewFunctionType;
 	onApplyLogFilter?: (expression: string) => void;
 }
 
+type Props = OverviewProps &
+	Partial<Pick<ActionItemProps, 'onClickActionItem'>> &
+	Pick<AddToQueryHOCProps, 'onAddToQuery'>;
+
 function Overview({
 	logData,
+	onAddToQuery,
+	onClickActionItem,
 	isListViewPanel = false,
+	selectedOptions,
+	listViewPanelSelectedFields,
 	handleChangeSelectedView,
 	onApplyLogFilter,
-}: OverviewProps): JSX.Element {
+}: Props): JSX.Element {
+	const [isWrapWord, setIsWrapWord] = useState<boolean>(true);
+	const [isSearchVisible, setIsSearchVisible] = useState<boolean>(true);
+	const [isAttributesExpanded, setIsAttributesExpanded] =
+		useState<boolean>(true);
+	const [fieldSearchInput, setFieldSearchInput] = useState<string>('');
+
+	const isDarkMode = useIsDarkMode();
+
 	const { actions, visibleActions } = useLogAttributeActions({
 		handleChangeSelectedView,
 		isListViewPanel,
 		onApplyLogFilter,
 	});
 
-	const raw = aggregateAttributesResourcesToObject(logData);
-	const prettyData = buildPrettyViewData(raw);
+	const isLogDetailsV2 = useIsLogDetailsV2();
+
+	if (isLogDetailsV2) {
+		const raw = aggregateAttributesResourcesToObject(logData);
+		const prettyData = buildPrettyViewData(raw);
+		return (
+			<div className="overview-container">
+				<DataViewer
+					data={prettyData}
+					drawerKey="logs-details"
+					fontSize={13}
+					prettyViewProps={{
+						actions,
+						visibleActions,
+						renderLeafValue: (value, keyPath): ReactNode | undefined => {
+							// Sanitize (unescape + ANSI→color) string values under `body`.
+							// Skip huge ones (render raw, still safe) to avoid the sanitize
+							// choke;
+							if (
+								typeof value !== 'string' ||
+								keyPath[keyPath.length - 1] !== 'body' ||
+								value.length > MAX_BODY_SANITIZE_CHARS
+							) {
+								return undefined;
+							}
+							return (
+								<span
+									className="log-body-value"
+									// Safe: getSanitizedLogBody runs the value through dompurify.
+									// eslint-disable-next-line react/no-danger
+									dangerouslySetInnerHTML={{
+										__html: getSanitizedLogBody(value, { shouldEscapeHtml: true }),
+									}}
+								/>
+							);
+						},
+					}}
+					jsonString={JSON.stringify(raw, null, 2)}
+				/>
+			</div>
+		);
+	}
+
+	const options: EditorProps['options'] = {
+		automaticLayout: true,
+		readOnly: true,
+		wordWrap: isWrapWord ? 'on' : 'off',
+		minimap: {
+			enabled: false,
+		},
+		fontWeight: '400',
+		fontFamily: 'Geist Mono',
+		fontSize: 13,
+		lineHeight: 18,
+		colorDecorators: true,
+		scrollBeyondLastLine: false,
+		scrollbar: {
+			vertical: 'hidden',
+			horizontal: 'hidden',
+		},
+	};
+
+	const handleWrapWord = (checked: boolean): void => {
+		setIsWrapWord(checked);
+	};
+
+	function setEditorTheme(monaco: Monaco): void {
+		monaco.editor.defineTheme('my-theme', {
+			base: 'vs-dark',
+			inherit: true,
+			rules: [
+				{ token: 'string.key.json', foreground: Color.BG_VANILLA_400 },
+				{ token: 'string.value.json', foreground: Color.BG_ROBIN_400 },
+			],
+			colors: {
+				'editor.background': Color.BG_INK_400,
+			},
+		});
+	}
+
+	const handleSearchVisible = (): void => {
+		setIsSearchVisible(!isSearchVisible);
+	};
+
+	const toogleAttributePanelOpenState = (): void => {
+		setIsAttributesExpanded(!isAttributesExpanded);
+	};
 
 	return (
 		<div className="overview-container">
-			<DataViewer
-				data={prettyData}
-				drawerKey="logs-details"
-				fontSize={13}
-				prettyViewProps={{
-					actions,
-					visibleActions,
-					renderLeafValue: (value, keyPath): ReactNode | undefined => {
-						// Sanitize (unescape + ANSI→color) string values under `body`.
-						// Skip huge ones (render raw, still safe) to avoid the sanitize
-						// choke;
-						if (
-							typeof value !== 'string' ||
-							keyPath[keyPath.length - 1] !== 'body' ||
-							value.length > MAX_BODY_SANITIZE_CHARS
-						) {
-							return undefined;
-						}
-						return (
-							<span
-								className="log-body-value"
-								// Safe: getSanitizedLogBody runs the value through dompurify.
-								// eslint-disable-next-line react/no-danger
-								dangerouslySetInnerHTML={{
-									__html: getSanitizedLogBody(value, { shouldEscapeHtml: true }),
-								}}
-							/>
-						);
+			<Collapse
+				defaultActiveKey={['1']}
+				expandIcon={(props): ReactNode =>
+					props.isActive ? <ChevronDown size={14} /> : <ChevronRight size={14} />
+				}
+				items={[
+					{
+						key: '1',
+						label: (
+							<Badge color="vanilla">
+								<Typography.Text style={{ color: Color.BG_ROBIN_400 }}>
+									body
+								</Typography.Text>
+							</Badge>
+						),
+						children: (
+							<div className="logs-body-content">
+								<MEditor
+									value={removeEscapeCharacters(getBodyDisplayString(logData.body))}
+									language="json"
+									options={options}
+									onChange={(): void => {}}
+									height="20vh"
+									theme={isDarkMode ? 'my-theme' : 'light'}
+									onMount={(_, monaco): void => {
+										document.fonts.ready.then(() => {
+											monaco.editor.remeasureFonts();
+										});
+									}}
+									beforeMount={setEditorTheme}
+								/>
+								<Divider
+									style={{
+										margin: 0,
+										border: isDarkMode
+											? `1px solid ${Color.BG_SLATE_500}`
+											: `1px solid ${Color.BG_VANILLA_200}`,
+									}}
+								/>
+								<div className="log-switch">
+									<div className="wrap-word-switch">
+										<Typography.Text>Wrap text</Typography.Text>
+										<Switch value={isWrapWord} onChange={handleWrapWord} />
+									</div>
+								</div>
+							</div>
+						),
+						// extra: <Badge className="tag" color="vanilla">JSON</Badge>,
+						className: 'collapse-content',
 					},
-				}}
-				jsonString={JSON.stringify(raw, null, 2)}
+				]}
+			/>
+
+			<Collapse
+				className="attribute-table"
+				defaultActiveKey={['1']}
+				bordered={false}
+				expandIcon={(props): ReactNode =>
+					props.isActive ? <ChevronDown size={14} /> : <ChevronRight size={14} />
+				}
+				items={[
+					{
+						key: '1',
+						label: (
+							<div
+								className="attribute-tab-header"
+								onClick={toogleAttributePanelOpenState}
+							>
+								<Badge color="vanilla">
+									<Typography.Text style={{ color: Color.BG_ROBIN_400 }}>
+										Attributes
+									</Typography.Text>
+								</Badge>
+
+								{isAttributesExpanded && (
+									<Button
+										variant="link"
+										color="none"
+										className="action-btn"
+										prefix={<Search size={12} />}
+										onClick={(e): void => {
+											e.stopPropagation();
+											handleSearchVisible();
+										}}
+									>
+										Search
+									</Button>
+								)}
+							</div>
+						),
+						children: (
+							<>
+								{isSearchVisible && (
+									<Input
+										autoFocus
+										placeholder="Search for a field..."
+										className="search-input"
+										value={fieldSearchInput}
+										onChange={(e): void => setFieldSearchInput(e.target.value)}
+									/>
+								)}
+
+								<TableView
+									logData={logData}
+									onAddToQuery={onAddToQuery}
+									fieldSearchInput={fieldSearchInput}
+									onClickActionItem={onClickActionItem}
+									isListViewPanel={isListViewPanel}
+									selectedOptions={selectedOptions}
+									listViewPanelSelectedFields={listViewPanelSelectedFields}
+									handleChangeSelectedView={handleChangeSelectedView}
+								/>
+							</>
+						),
+						className: 'collapse-content attribute-collapse',
+					},
+				]}
 			/>
 		</div>
 	);
@@ -78,6 +286,7 @@ function Overview({
 
 Overview.defaultProps = {
 	isListViewPanel: false,
+	listViewPanelSelectedFields: null,
 	handleChangeSelectedView: undefined,
 };
 

frontend/src/container/LogDetailedView/TableView.styles.scss

@@ -0,0 +1,93 @@
+.attribute-table-container {
+	.ant-table {
+		background: var(--l2-background);
+
+		.ant-table-row:hover {
+			.ant-table-cell {
+				.value-field {
+					.action-btn {
+						display: flex;
+						position: absolute;
+						top: 50%;
+						right: 16px;
+						transform: translateY(-50%);
+						gap: 4px;
+					}
+				}
+			}
+		}
+
+		.ant-table-cell {
+			border: 1px solid var(--l1-border);
+			background: var(--l2-background);
+			vertical-align: top;
+		}
+
+		.attribute-name {
+			.ant-btn {
+				&:hover {
+					background-color: none !important;
+				}
+			}
+		}
+
+		.attribute-pin {
+			cursor: pointer;
+
+			padding: 14px 8px 8px;
+			vertical-align: top;
+			text-align: center;
+
+			.log-attribute-pin {
+				padding: 0;
+
+				display: flex;
+				justify-content: center;
+				align-items: center;
+
+				.pin-attribute-icon {
+					border: none;
+
+					&.pinned svg {
+						fill: var(--accent-primary);
+					}
+				}
+			}
+		}
+
+		.value-field-container {
+			background: var(--l2-background);
+
+			&.attribute-pin {
+				background: var(--l2-background);
+			}
+
+			.value-field {
+				font-family: 'Geist Mono';
+
+				position: relative;
+			}
+
+			.action-btn {
+				display: none;
+				width: max-content;
+				position: absolute;
+				padding: 0 16px;
+				right: 0;
+
+				.filter-btn {
+					display: flex;
+					align-items: center;
+					border: none;
+					box-shadow: none;
+					border-radius: 2px;
+					background: var(--l3-background);
+					padding: 2px 3px;
+					gap: 3px;
+					height: 18px;
+					width: 20px;
+				}
+			}
+		}
+	}
+}

frontend/src/container/LogDetailedView/TableView.tsx

@@ -0,0 +1,349 @@
+import { useEffect, useMemo, useState } from 'react';
+import { generatePath } from 'react-router-dom';
+import { Link, Pin } from '@signozhq/icons';
+import { Color } from '@signozhq/design-tokens';
+import { Button, Space, TableColumnsType as ColumnsType, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+import AddToQueryHOC, {
+	AddToQueryHOCProps,
+} from 'components/Logs/AddToQueryHOC';
+import { ResizeTable } from 'components/ResizeTable';
+import { OPERATORS } from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
+import { MetricsType } from 'container/MetricsApplication/constant';
+import { FontSize, OptionsQuery } from 'container/OptionsMenu/types';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import history from 'lib/history';
+import { fieldSearchFilter } from 'lib/logs/fieldSearch';
+import { removeJSONStringifyQuotes } from 'lib/removeJSONStringifyQuotes';
+import { IField } from 'types/api/logs/fields';
+import { ILog } from 'types/api/logs/log';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { openInNewTab } from 'utils/navigation';
+
+import { ActionItemProps } from './ActionItem';
+import { RESTRICTED_SELECTED_FIELDS } from './config';
+import FieldRenderer from './FieldRenderer';
+import TableViewActions from './TableView/TableViewActions';
+import {
+	filterKeyForField,
+	findKeyPath,
+	flattenObject,
+	getFieldAttributes,
+} from './utils';
+
+import './TableView.styles.scss';
+
+interface TableViewProps {
+	logData: ILog;
+	fieldSearchInput: string;
+	selectedOptions: OptionsQuery;
+	isListViewPanel?: boolean;
+	listViewPanelSelectedFields?: IField[] | null;
+	handleChangeSelectedView?: ChangeViewFunctionType;
+}
+
+type Props = TableViewProps &
+	Partial<Pick<ActionItemProps, 'onClickActionItem'>> &
+	Pick<AddToQueryHOCProps, 'onAddToQuery'>;
+
+function TableView({
+	logData,
+	fieldSearchInput,
+	onAddToQuery,
+	onClickActionItem,
+	isListViewPanel = false,
+	selectedOptions,
+	listViewPanelSelectedFields,
+	handleChangeSelectedView,
+}: Props): JSX.Element | null {
+	const [isfilterInLoading, setIsFilterInLoading] = useState<boolean>(false);
+	const [isfilterOutLoading, setIsFilterOutLoading] = useState<boolean>(false);
+	const isDarkMode = useIsDarkMode();
+
+	const [pinnedAttributes, setPinnedAttributes] = useState<
+		Record<string, boolean>
+	>({});
+
+	useEffect(() => {
+		const pinnedAttributes: Record<string, boolean> = {};
+
+		if (isListViewPanel) {
+			listViewPanelSelectedFields?.forEach((val) => {
+				const path = findKeyPath(logData, val.name, '');
+				if (path) {
+					pinnedAttributes[path] = true;
+				}
+			});
+		} else {
+			// eslint-disable-next-line sonarjs/no-identical-functions
+			selectedOptions.selectColumns.forEach((val) => {
+				const path = findKeyPath(logData, val.name, '');
+				if (path) {
+					pinnedAttributes[path] = true;
+				}
+			});
+		}
+		// pin trace_id by default when present
+		if (logData?.trace_id) {
+			pinnedAttributes.trace_id = true;
+		}
+
+		setPinnedAttributes(pinnedAttributes);
+	}, [
+		logData,
+		selectedOptions.selectColumns,
+		listViewPanelSelectedFields,
+		isListViewPanel,
+	]);
+
+	// When USE_JSON_BODY is enabled, body arrives as a pre-parsed object. Serialize it
+	// back to a string so flattenObject keeps `body` as a single table row instead of
+	// recursively expanding it into dotted sub-keys (body.message, body.foo.bar, …),
+	// which would break the tree view in BodyContent that relies on record.field === 'body'.
+	const flattenLogData: Record<string, string> | null = useMemo(() => {
+		if (!logData) {
+			return null;
+		}
+		const normalizedLog =
+			typeof logData.body === 'object' && logData.body !== null
+				? { ...logData, body: JSON.stringify(logData.body) }
+				: logData;
+		return flattenObject(normalizedLog);
+	}, [logData]);
+
+	const handleClick = (
+		operator: string,
+		fieldKey: string,
+		fieldValue: string,
+		dataType: string | undefined,
+		fieldType: string | undefined,
+	): void => {
+		const validatedFieldValue = removeJSONStringifyQuotes(fieldValue);
+		if (onClickActionItem) {
+			onClickActionItem(
+				fieldKey,
+				validatedFieldValue,
+				operator,
+				dataType as DataTypes,
+				fieldType,
+			);
+		}
+	};
+
+	const onClickHandler =
+		(
+			operator: string,
+			fieldKey: string,
+			fieldValue: string,
+			dataType: string | undefined,
+			fieldType: MetricsType | undefined,
+		) =>
+		(): void => {
+			handleClick(operator, fieldKey, fieldValue, dataType, fieldType);
+			if (operator === OPERATORS['=']) {
+				setIsFilterInLoading(true);
+			}
+			if (operator === OPERATORS['!=']) {
+				setIsFilterOutLoading(true);
+			}
+		};
+
+	if (logData === null) {
+		return null;
+	}
+
+	const dataSource =
+		flattenLogData !== null &&
+		Object.keys(flattenLogData)
+			.filter((field) => fieldSearchFilter(field, fieldSearchInput))
+			.map((key) => ({
+				key,
+				field: key,
+				value: JSON.stringify(flattenLogData[key]),
+			}));
+
+	const onTraceHandler = (
+		record: DataType,
+		event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+	): void => {
+		if (flattenLogData === null) {
+			return;
+		}
+
+		const traceId = flattenLogData[record.field];
+
+		const spanId = flattenLogData?.span_id;
+
+		if (traceId) {
+			const basePath = generatePath(ROUTES.TRACE_DETAIL, {
+				id: traceId,
+			});
+
+			const route = spanId ? `${basePath}?spanId=${spanId}` : basePath;
+
+			if (event.ctrlKey || event.metaKey) {
+				// open the trace in new tab
+				openInNewTab(route);
+			} else {
+				history.push(route);
+			}
+		}
+	};
+
+	if (!dataSource) {
+		return null;
+	}
+
+	const columns: ColumnsType<DataType> = [
+		{
+			title: '',
+			dataIndex: 'pin',
+			key: 'pin',
+			width: 5,
+			align: 'left',
+			className: 'attribute-pin value-field-container',
+			render: (fieldData: Record<string, string>, record): JSX.Element => {
+				let pinColor = isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500;
+
+				if (pinnedAttributes[record?.key]) {
+					pinColor = Color.BG_ROBIN_500;
+				}
+
+				return (
+					<div className="log-attribute-pin value-field">
+						<div
+							className={cx(
+								'pin-attribute-icon',
+								pinnedAttributes[record?.key] ? 'pinned' : '',
+							)}
+						>
+							{pinnedAttributes[record?.key] && <Pin size={14} color={pinColor} />}
+						</div>
+					</div>
+				);
+			},
+		},
+		{
+			title: 'Field',
+			dataIndex: 'field',
+			key: 'field',
+			width: 50,
+			align: 'left',
+			ellipsis: true,
+			className: 'attribute-name',
+			render: (field: string, record): JSX.Element => {
+				const renderedField = <FieldRenderer field={field} />;
+
+				if (record.field === 'trace_id') {
+					const traceId = flattenLogData[record.field];
+
+					return (
+						<Space size="middle" className="log-attribute">
+							<Typography.Text>{renderedField}</Typography.Text>
+
+							{traceId && (
+								<Tooltip title="Inspect in Trace" mouseLeaveDelay={0}>
+									<Button
+										className="periscope-btn"
+										onClick={(
+											event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+										): void => {
+											onTraceHandler(record, event);
+										}}
+									>
+										<Link size={15} />
+									</Button>
+								</Tooltip>
+							)}
+						</Space>
+					);
+				}
+
+				const fieldFilterKey = filterKeyForField(field);
+				const { dataType } = getFieldAttributes(field);
+				if (!RESTRICTED_SELECTED_FIELDS.includes(fieldFilterKey)) {
+					return (
+						<AddToQueryHOC
+							fieldKey={fieldFilterKey}
+							fieldValue={flattenLogData[field]}
+							onAddToQuery={onAddToQuery}
+							fontSize={FontSize.SMALL}
+							dataType={dataType as DataTypes}
+						>
+							{renderedField}
+						</AddToQueryHOC>
+					);
+				}
+				return renderedField;
+			},
+		},
+		{
+			title: 'Value',
+			key: 'value',
+			width: 70,
+			ellipsis: false,
+			className: 'value-field-container attribute-value',
+			render: (fieldData: Record<string, string>, record): JSX.Element => (
+				<TableViewActions
+					fieldData={fieldData}
+					record={record}
+					isListViewPanel={isListViewPanel}
+					isfilterInLoading={isfilterInLoading}
+					isfilterOutLoading={isfilterOutLoading}
+					onClickHandler={onClickHandler}
+					handleChangeSelectedView={handleChangeSelectedView}
+				/>
+			),
+		},
+	];
+	function sortPinnedAttributes(
+		data: Record<string, string>[],
+		sortingObj: Record<string, boolean>,
+	): Record<string, string>[] {
+		const sortingKeys = Object.keys(sortingObj);
+		return data.sort((a, b) => {
+			const aKey = a.key;
+			const bKey = b.key;
+			const aSortIndex = sortingKeys.indexOf(aKey);
+			const bSortIndex = sortingKeys.indexOf(bKey);
+
+			if (sortingObj[aKey] && !sortingObj[bKey]) {
+				return -1;
+			}
+			if (!sortingObj[aKey] && sortingObj[bKey]) {
+				return 1;
+			}
+			return aSortIndex - bSortIndex;
+		});
+	}
+
+	const sortedAttributes = sortPinnedAttributes(dataSource, pinnedAttributes);
+
+	return (
+		<ResizeTable
+			columns={columns}
+			tableLayout="fixed"
+			dataSource={sortedAttributes}
+			pagination={false}
+			showHeader={false}
+			className="attribute-table-container"
+		/>
+	);
+}
+
+TableView.defaultProps = {
+	isListViewPanel: false,
+	listViewPanelSelectedFields: null,
+	handleChangeSelectedView: undefined,
+};
+
+export interface DataType {
+	key: string;
+	field: string;
+	value: string;
+}
+
+export default TableView;

frontend/src/container/LogDetailedView/TableView/TableViewActions.styles.scss

@@ -0,0 +1,62 @@
+.open-popover {
+	&.value-field {
+		.action-btn {
+			display: flex !important;
+			position: absolute !important;
+			top: 50% !important;
+			right: 16px !important;
+			transform: translateY(-50%) !important;
+			gap: 4px !important;
+		}
+	}
+}
+
+.selectable-tree {
+	.ant-tree-node-content-wrapper {
+		user-select: text !important;
+		cursor: text !important;
+		min-width: 0;
+	}
+
+	.ant-tree-title {
+		user-select: text !important;
+		cursor: text !important;
+		overflow-wrap: anywhere;
+	}
+}
+
+.table-view-actions-content {
+	.ant-popover-inner {
+		border-radius: 4px;
+		border: 1px solid var(--l1-border);
+		background: linear-gradient(
+			139deg,
+			color-mix(in srgb, var(--card) 80%, transparent) 0%,
+			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
+		);
+		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+		backdrop-filter: blur(20px);
+		padding: 0px;
+		.more-filter-actions {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+			color: var(--l1-foreground);
+			font-family: Inter;
+			font-size: 14px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: normal;
+			letter-spacing: 0.14px;
+			padding: 12px 18px 12px 14px;
+
+			.ant-btn-icon {
+				margin-inline-end: 0px;
+			}
+		}
+
+		.more-filter-actions:hover {
+			background-color: unset !important;
+		}
+	}
+}

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

@@ -0,0 +1,532 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import { Color } from '@signozhq/design-tokens';
+import { Button, Popover, Spin, Tooltip, Tree } from 'antd';
+import type { DataNode } from 'antd/es/tree';
+import GroupByIcon from 'assets/CustomIcons/GroupByIcon';
+import cx from 'classnames';
+import CopyClipboardHOC from 'components/Logs/CopyClipboardHOC';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { OPERATORS } from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
+import { MetricsType } from 'container/MetricsApplication/constant';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { ICurrentQueryData } from 'hooks/useHandleExplorerTabChange';
+import {
+	ArrowDownToDot,
+	ArrowUpFromDot,
+	Ellipsis,
+	RefreshCw,
+} from '@signozhq/icons';
+import { ExplorerViews } from 'pages/LogsExplorer/utils';
+import { useTimezone } from 'providers/Timezone';
+import {
+	BaseAutocompleteData,
+	DataTypes,
+} from 'types/api/queryBuilder/queryAutocompleteResponse';
+
+import { RESTRICTED_SELECTED_FIELDS } from '../config';
+import { DataType } from '../TableView';
+import {
+	filterKeyForField,
+	getFieldAttributes,
+	getSanitizedLogBody,
+	parseFieldValue,
+	removeEscapeCharacters,
+} from '../utils';
+import useAsyncJSONProcessing from './useAsyncJSONProcessing';
+
+import './TableViewActions.styles.scss';
+
+interface ITableViewActionsProps {
+	fieldData: Record<string, string>;
+	record: DataType;
+	isListViewPanel: boolean;
+	isfilterInLoading: boolean;
+	isfilterOutLoading: boolean;
+	onClickHandler: (
+		operator: string,
+		fieldKey: string,
+		fieldValue: string,
+		dataType: string | undefined,
+		logType: MetricsType | undefined,
+	) => () => void;
+	handleChangeSelectedView?: ChangeViewFunctionType;
+}
+
+// Memoized Tree Component
+const MemoizedTree = React.memo<{ treeData: DataNode[] }>(({ treeData }) => (
+	<Tree
+		defaultExpandAll
+		showLine
+		treeData={treeData}
+		className="selectable-tree"
+	/>
+));
+
+MemoizedTree.displayName = 'MemoizedTree';
+
+// Body Content Component
+const BodyContent: React.FC<{
+	fieldData: Record<string, string>;
+	record: DataType;
+	bodyHtml: { __html: string };
+	textToCopy: string;
+	handleChangeSelectedView?: ChangeViewFunctionType;
+}> = React.memo(
+	({ fieldData, record, bodyHtml, textToCopy, handleChangeSelectedView }) => {
+		const { isLoading, treeData, error } = useAsyncJSONProcessing(
+			fieldData.value,
+			record.field === 'body',
+			handleChangeSelectedView,
+		);
+
+		// Show JSON tree if available, otherwise show HTML content
+		if (record.field === 'body' && treeData) {
+			return <MemoizedTree treeData={treeData} />;
+		}
+
+		if (record.field === 'body' && isLoading) {
+			return (
+				<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+					<Spin size="small" />
+					<span style={{ color: Color.BG_SIENNA_400 }}>Processing JSON...</span>
+				</div>
+			);
+		}
+
+		if (record.field === 'body' && error) {
+			return (
+				<span
+					style={{ color: Color.BG_SIENNA_400, whiteSpace: 'pre-wrap', tabSize: 4 }}
+				>
+					Error parsing Body JSON
+				</span>
+			);
+		}
+
+		if (record.field === 'body') {
+			return (
+				<CopyClipboardHOC entityKey="body" textToCopy={textToCopy}>
+					<span
+						style={{ color: Color.BG_SIENNA_400, whiteSpace: 'pre-wrap', tabSize: 4 }}
+					>
+						<span dangerouslySetInnerHTML={bodyHtml} />
+					</span>
+				</CopyClipboardHOC>
+			);
+		}
+
+		return null;
+	},
+);
+
+BodyContent.displayName = 'BodyContent';
+
+export default function TableViewActions(
+	props: ITableViewActionsProps,
+): React.ReactElement {
+	const {
+		fieldData,
+		record,
+		isListViewPanel,
+		isfilterInLoading,
+		isfilterOutLoading,
+		onClickHandler,
+		handleChangeSelectedView,
+	} = props;
+
+	const { pathname } = useLocation();
+	const { stagedQuery, updateQueriesData } = useQueryBuilder();
+	const { dataType, logType: fieldType } = getFieldAttributes(record.field);
+
+	// there is no option for where clause in live logs page or infra monitoring
+	const isLiveLogsOrInfraPage = useMemo(
+		() =>
+			pathname === ROUTES.LIVE_LOGS ||
+			pathname === ROUTES.INFRASTRUCTURE_MONITORING_HOSTS ||
+			pathname === ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES,
+		[pathname],
+	);
+
+	const [isOpen, setIsOpen] = useState<boolean>(false);
+
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+
+	// Memoize bodyHtml computation
+	const bodyHtml = useMemo(() => {
+		if (record.field !== 'body') {
+			return { __html: '' };
+		}
+
+		return {
+			__html: getSanitizedLogBody(record.value, { shouldEscapeHtml: true }),
+		};
+	}, [record.field, record.value]);
+
+	const fieldFilterKey = filterKeyForField(fieldData.field);
+
+	const handleGroupByAttribute = useCallback((): void => {
+		if (!stagedQuery) {
+			return;
+		}
+		const normalizedDataType: DataTypes | undefined =
+			dataType && Object.values(DataTypes).includes(dataType as DataTypes)
+				? (dataType as DataTypes)
+				: undefined;
+
+		const updatedQuery = updateQueriesData(
+			stagedQuery,
+			'queryData',
+			(item, index) => {
+				// Only add groupBy for index 0
+				if (index === 0) {
+					const newGroupByItem: BaseAutocompleteData = {
+						key: fieldFilterKey,
+						type: fieldType || '',
+						dataType: normalizedDataType,
+					};
+
+					const updatedGroupBy = [...(item.groupBy || []), newGroupByItem];
+
+					return { ...item, groupBy: updatedGroupBy };
+				}
+
+				return item;
+			},
+		);
+
+		const queryData: ICurrentQueryData = {
+			query: updatedQuery,
+		};
+
+		handleChangeSelectedView?.(ExplorerViews.TIMESERIES, queryData);
+	}, [
+		stagedQuery,
+		updateQueriesData,
+		fieldFilterKey,
+		fieldType,
+		dataType,
+		handleChangeSelectedView,
+	]);
+
+	const handleReplaceFilter = useCallback((): void => {
+		if (!stagedQuery) {
+			return;
+		}
+		const normalizedDataType: DataTypes | undefined =
+			dataType && Object.values(DataTypes).includes(dataType as DataTypes)
+				? (dataType as DataTypes)
+				: undefined;
+
+		const updatedQuery = updateQueriesData(
+			stagedQuery,
+			'queryData',
+			(item, index) => {
+				// Only replace filters for index 0
+				if (index === 0) {
+					const newFilterItem: BaseAutocompleteData = {
+						key: fieldFilterKey,
+						type: fieldType || '',
+						dataType: normalizedDataType,
+					};
+
+					// Create new filter items array with single IN filter
+					const newFilters = {
+						items: [
+							{
+								id: '',
+								key: newFilterItem,
+								op: OPERATORS.IN,
+								value: [parseFieldValue(fieldData.value)],
+							},
+						],
+						op: 'AND',
+					};
+
+					// Clear the expression and update filters
+					return {
+						...item,
+						filters: newFilters,
+						filter: { expression: '' },
+					};
+				}
+
+				return item;
+			},
+		);
+
+		const queryData: ICurrentQueryData = {
+			query: updatedQuery,
+		};
+
+		handleChangeSelectedView?.(ExplorerViews.LIST, queryData);
+	}, [
+		stagedQuery,
+		updateQueriesData,
+		fieldFilterKey,
+		fieldType,
+		dataType,
+		fieldData,
+		handleChangeSelectedView,
+	]);
+
+	// Memoize textToCopy computation
+	const textToCopy = useMemo(() => {
+		let text = fieldData.value;
+		try {
+			text = text.replace(/^"|"$/g, '');
+		} catch (error) {
+			console.error(
+				'Failed to remove starting and ending quotes from the value',
+				error,
+			);
+		}
+		// If the value is valid JSON (object or array), pretty-print it for copying
+		try {
+			const parsed = JSON.parse(text);
+			if (typeof parsed === 'object' && parsed !== null) {
+				return JSON.stringify(parsed, null, 2);
+			}
+		} catch {
+			// not JSON, return as-is
+		}
+		return text;
+	}, [fieldData.value]);
+
+	// Memoize cleanTimestamp computation
+	const cleanTimestamp = useMemo(() => {
+		if (record.field !== 'timestamp') {
+			return '';
+		}
+		return fieldData.value.replace(/^["']|["']$/g, '');
+	}, [record.field, fieldData.value]);
+
+	const renderFieldContent = useCallback((): JSX.Element => {
+		const commonStyles: React.CSSProperties = {
+			color: Color.BG_SIENNA_400,
+			whiteSpace: 'pre-wrap',
+			tabSize: 4,
+		};
+
+		switch (record.field) {
+			case 'body':
+				return (
+					<BodyContent
+						fieldData={fieldData}
+						record={record}
+						bodyHtml={bodyHtml}
+						textToCopy={textToCopy}
+						handleChangeSelectedView={handleChangeSelectedView}
+					/>
+				);
+
+			case 'timestamp':
+				return (
+					<span style={commonStyles}>
+						{formatTimezoneAdjustedTimestamp(
+							cleanTimestamp,
+							DATE_TIME_FORMATS.UTC_US_MS,
+						)}
+					</span>
+				);
+
+			default:
+				return (
+					<span style={commonStyles}>{removeEscapeCharacters(fieldData.value)}</span>
+				);
+		}
+	}, [
+		record,
+		fieldData,
+		bodyHtml,
+		textToCopy,
+		handleChangeSelectedView,
+		formatTimezoneAdjustedTimestamp,
+		cleanTimestamp,
+	]);
+
+	// Early return for body field with async processing
+	if (record.field === 'body') {
+		return (
+			<div className={cx('value-field', isOpen ? 'open-popover' : '')}>
+				<BodyContent
+					fieldData={fieldData}
+					record={record}
+					bodyHtml={bodyHtml}
+					textToCopy={textToCopy}
+					handleChangeSelectedView={handleChangeSelectedView}
+				/>
+				{!isListViewPanel &&
+					!RESTRICTED_SELECTED_FIELDS.includes(fieldFilterKey) && (
+						<span className="action-btn">
+							<Tooltip title="Filter for value" mouseLeaveDelay={0}>
+								<Button
+									className="filter-btn periscope-btn"
+									icon={
+										isfilterInLoading ? (
+											<Spin size="small" />
+										) : (
+											<ArrowDownToDot size={14} style={{ transform: 'rotate(90deg)' }} />
+										)
+									}
+									onClick={onClickHandler(
+										OPERATORS['='],
+										fieldFilterKey,
+										parseFieldValue(fieldData.value),
+										dataType,
+										fieldType,
+									)}
+								/>
+							</Tooltip>
+							<Tooltip title="Filter out value" mouseLeaveDelay={0}>
+								<Button
+									className="filter-btn periscope-btn"
+									icon={
+										isfilterOutLoading ? (
+											<Spin size="small" />
+										) : (
+											<ArrowUpFromDot size={14} style={{ transform: 'rotate(90deg)' }} />
+										)
+									}
+									onClick={onClickHandler(
+										OPERATORS['!='],
+										fieldFilterKey,
+										parseFieldValue(fieldData.value),
+										dataType,
+										fieldType,
+									)}
+								/>
+							</Tooltip>
+							{!isLiveLogsOrInfraPage && (
+								<Popover
+									open={isOpen}
+									onOpenChange={setIsOpen}
+									arrow={false}
+									content={
+										<div data-log-detail-ignore="true">
+											<Button
+												className="more-filter-actions"
+												type="text"
+												icon={<GroupByIcon />}
+												onClick={handleGroupByAttribute}
+											>
+												Group By Attribute
+											</Button>
+											<Button
+												className="more-filter-actions"
+												type="text"
+												icon={<RefreshCw size={14} />}
+												onClick={handleReplaceFilter}
+											>
+												Replace filters with this value
+											</Button>
+										</div>
+									}
+									rootClassName="table-view-actions-content"
+									trigger="hover"
+									placement="bottomLeft"
+								>
+									<Button
+										icon={<Ellipsis size={14} />}
+										className="filter-btn periscope-btn"
+									/>
+								</Popover>
+							)}
+						</span>
+					)}
+			</div>
+		);
+	}
+
+	return (
+		<div className={cx('value-field', isOpen ? 'open-popover' : '')}>
+			<CopyClipboardHOC entityKey={fieldFilterKey} textToCopy={textToCopy}>
+				{renderFieldContent()}
+			</CopyClipboardHOC>
+			{!isListViewPanel &&
+				!RESTRICTED_SELECTED_FIELDS.includes(fieldFilterKey) && (
+					<span className="action-btn">
+						<Tooltip title="Filter for value" mouseLeaveDelay={0}>
+							<Button
+								className="filter-btn periscope-btn"
+								icon={
+									isfilterInLoading ? (
+										<Spin size="small" />
+									) : (
+										<ArrowDownToDot size={14} style={{ transform: 'rotate(90deg)' }} />
+									)
+								}
+								onClick={onClickHandler(
+									OPERATORS['='],
+									fieldFilterKey,
+									parseFieldValue(fieldData.value),
+									dataType,
+									fieldType,
+								)}
+							/>
+						</Tooltip>
+						<Tooltip title="Filter out value" mouseLeaveDelay={0}>
+							<Button
+								className="filter-btn periscope-btn"
+								icon={
+									isfilterOutLoading ? (
+										<Spin size="small" />
+									) : (
+										<ArrowUpFromDot size={14} style={{ transform: 'rotate(90deg)' }} />
+									)
+								}
+								onClick={onClickHandler(
+									OPERATORS['!='],
+									fieldFilterKey,
+									parseFieldValue(fieldData.value),
+									dataType,
+									fieldType,
+								)}
+							/>
+						</Tooltip>
+						{!isLiveLogsOrInfraPage && (
+							<Popover
+								open={isOpen}
+								onOpenChange={setIsOpen}
+								arrow={false}
+								content={
+									<div data-log-detail-ignore="true">
+										<Button
+											className="more-filter-actions"
+											type="text"
+											icon={<GroupByIcon />}
+											onClick={handleGroupByAttribute}
+										>
+											Group By Attribute
+										</Button>
+										<Button
+											className="more-filter-actions"
+											type="text"
+											icon={<RefreshCw size={14} />}
+											onClick={handleReplaceFilter}
+										>
+											Replace filters with this value
+										</Button>
+									</div>
+								}
+								rootClassName="table-view-actions-content"
+								trigger="hover"
+								placement="bottomLeft"
+							>
+								<Button
+									icon={<Ellipsis size={14} />}
+									className="filter-btn periscope-btn"
+								/>
+							</Popover>
+						)}
+					</span>
+				)}
+		</div>
+	);
+}
+
+TableViewActions.defaultProps = {
+	handleChangeSelectedView: undefined,
+};

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

@@ -0,0 +1,366 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { useGetSavedViewParams } from 'hooks/saveViews/useGetSavedViewParams';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { ExplorerViews } from 'pages/LogsExplorer/utils';
+
+import { RESTRICTED_SELECTED_FIELDS } from '../../config';
+import TableViewActions from '../TableViewActions';
+import useAsyncJSONProcessing from '../useAsyncJSONProcessing';
+
+// Mock data for tests
+let mockCopyToClipboard: jest.Mock;
+let mockNotificationsSuccess: jest.Mock;
+
+// Mock the components and hooks
+jest.mock('components/Logs/CopyClipboardHOC', () => ({
+	__esModule: true,
+	default: ({
+		children,
+		textToCopy,
+		entityKey,
+	}: {
+		children: React.ReactNode;
+		textToCopy: string;
+		entityKey: string;
+	}): JSX.Element => (
+		<div
+			className="CopyClipboardHOC"
+			data-testid={`copy-clipboard-${entityKey}`}
+			data-text-to-copy={textToCopy}
+			onClick={(): void => {
+				if (mockCopyToClipboard) {
+					mockCopyToClipboard(textToCopy);
+				}
+				if (mockNotificationsSuccess) {
+					mockNotificationsSuccess({
+						message: `${entityKey} copied to clipboard`,
+						key: `${entityKey} copied to clipboard`,
+					});
+				}
+			}}
+			role="button"
+			tabIndex={0}
+		>
+			{children}
+		</div>
+	),
+}));
+
+jest.mock('../useAsyncJSONProcessing', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+jest.mock('antd', () => {
+	const antd = jest.requireActual('antd');
+	return {
+		...antd,
+		// Render popover content inline to make its children testable
+		Popover: ({ content, children }: any): JSX.Element => (
+			<div data-testid="popover">
+				<div data-testid="popover-content">{content}</div>
+				{children}
+			</div>
+		),
+	};
+});
+
+jest.mock('providers/Timezone', () => ({
+	useTimezone: (): {
+		formatTimezoneAdjustedTimestamp: (timestamp: string) => string;
+	} => ({
+		formatTimezoneAdjustedTimestamp: (timestamp: string): string => timestamp,
+	}),
+}));
+
+jest.mock('react-router-dom', () => ({
+	useLocation: (): {
+		pathname: string;
+		search: string;
+		hash: string;
+		state: null;
+	} => ({
+		pathname: '/test',
+		search: '',
+		hash: '',
+		state: null,
+	}),
+}));
+
+jest.mock('hooks/queryBuilder/useQueryBuilder');
+jest.mock('hooks/saveViews/useGetSavedViewParams');
+
+describe('TableViewActions', () => {
+	const TEST_VALUE = 'test value';
+	const TEST_FIELD = 'test-field';
+	const ACTION_BUTTON_TEST_ID = '.action-btn';
+	const defaultProps = {
+		fieldData: {
+			field: TEST_FIELD,
+			value: TEST_VALUE,
+		},
+		record: {
+			key: 'test-key',
+			field: TEST_FIELD,
+			value: TEST_VALUE,
+		},
+		isListViewPanel: false,
+		isfilterInLoading: false,
+		isfilterOutLoading: false,
+		onClickHandler: jest.fn(),
+		handleChangeSelectedView: jest.fn(),
+	};
+
+	beforeEach(() => {
+		mockCopyToClipboard = jest.fn();
+		mockNotificationsSuccess = jest.fn();
+		defaultProps.onClickHandler = jest.fn();
+		defaultProps.handleChangeSelectedView = jest.fn();
+
+		// Default mock for useAsyncJSONProcessing
+		const mockUseAsyncJSONProcessing = jest.mocked(useAsyncJSONProcessing);
+		mockUseAsyncJSONProcessing.mockReturnValue({
+			isLoading: false,
+			treeData: null,
+			error: null,
+		});
+
+		// Default mock for useQueryBuilder
+		jest.mocked(useQueryBuilder).mockReturnValue({
+			stagedQuery: null,
+			updateQueriesData: jest.fn((query, type, callback) => {
+				const updatedBuilder = {
+					...query.builder,
+					[type]: query.builder[type].map(callback),
+				};
+				return {
+					...query,
+					builder: updatedBuilder,
+				};
+			}),
+		} as any);
+
+		// Default mock for useGetSavedViewParams
+		jest
+			.mocked(useGetSavedViewParams)
+			.mockReturnValue({ viewName: '', viewKey: '' });
+	});
+
+	it('should render without crashing', () => {
+		render(
+			<TableViewActions
+				fieldData={defaultProps.fieldData}
+				record={defaultProps.record}
+				isListViewPanel={defaultProps.isListViewPanel}
+				isfilterInLoading={defaultProps.isfilterInLoading}
+				isfilterOutLoading={defaultProps.isfilterOutLoading}
+				onClickHandler={defaultProps.onClickHandler}
+				handleChangeSelectedView={defaultProps.handleChangeSelectedView}
+			/>,
+		);
+		expect(screen.getByText(TEST_VALUE)).toBeInTheDocument();
+	});
+
+	it('should not render action buttons for restricted fields', () => {
+		RESTRICTED_SELECTED_FIELDS.forEach((field) => {
+			const { container } = render(
+				<TableViewActions
+					fieldData={{
+						...defaultProps.fieldData,
+						field,
+					}}
+					record={{
+						...defaultProps.record,
+						field,
+					}}
+					isListViewPanel={defaultProps.isListViewPanel}
+					isfilterInLoading={defaultProps.isfilterInLoading}
+					isfilterOutLoading={defaultProps.isfilterOutLoading}
+					onClickHandler={defaultProps.onClickHandler}
+					handleChangeSelectedView={defaultProps.handleChangeSelectedView}
+				/>,
+			);
+			// Verify that action buttons are not rendered for restricted fields
+			expect(
+				container.querySelector(ACTION_BUTTON_TEST_ID),
+			).not.toBeInTheDocument();
+		});
+	});
+
+	it('should render action buttons for non-restricted fields', () => {
+		const { container } = render(
+			<TableViewActions
+				fieldData={defaultProps.fieldData}
+				record={defaultProps.record}
+				isListViewPanel={defaultProps.isListViewPanel}
+				isfilterInLoading={defaultProps.isfilterInLoading}
+				isfilterOutLoading={defaultProps.isfilterOutLoading}
+				onClickHandler={defaultProps.onClickHandler}
+				handleChangeSelectedView={defaultProps.handleChangeSelectedView}
+			/>,
+		);
+		// Verify that action buttons are rendered for non-restricted fields
+		expect(container.querySelector(ACTION_BUTTON_TEST_ID)).toBeInTheDocument();
+	});
+
+	it('should call handleChangeSelectedView when clicking group by', () => {
+		const mockStagedQuery = {
+			id: 'test-query-id',
+			queryType: 'queryBuilder',
+			builder: {
+				queryData: [
+					{
+						queryName: 'A',
+						dataSource: 'logs',
+						aggregateOperator: 'count',
+						functions: [],
+						filter: {},
+						groupBy: [],
+						expression: '',
+						disabled: false,
+						having: [],
+						limit: null,
+						stepInterval: null,
+						orderBy: [],
+						legend: '',
+					},
+				],
+				queryFormulas: [],
+				queryTraceOperator: [],
+			},
+			promql: [],
+			clickhouse_sql: [],
+		};
+
+		const mockUpdateQueriesData = jest.fn((query, type, callback) => {
+			const section = query.builder?.[type];
+			if (!Array.isArray(section)) {
+				return query;
+			}
+			return {
+				...query,
+				builder: {
+					...query.builder,
+					[type]: section.map(callback),
+				},
+			};
+		});
+
+		jest.mocked(useQueryBuilder).mockReturnValue({
+			stagedQuery: mockStagedQuery,
+			updateQueriesData: mockUpdateQueriesData,
+		} as any);
+
+		jest
+			.mocked(useGetSavedViewParams)
+			.mockReturnValue({ viewName: '', viewKey: '' });
+
+		render(
+			<TableViewActions
+				fieldData={defaultProps.fieldData}
+				record={defaultProps.record}
+				isListViewPanel={defaultProps.isListViewPanel}
+				isfilterInLoading={defaultProps.isfilterInLoading}
+				isfilterOutLoading={defaultProps.isfilterOutLoading}
+				onClickHandler={defaultProps.onClickHandler}
+				handleChangeSelectedView={defaultProps.handleChangeSelectedView}
+			/>,
+		);
+
+		fireEvent.click(screen.getByText('Group By Attribute'));
+
+		expect(defaultProps.handleChangeSelectedView).toHaveBeenCalledWith(
+			ExplorerViews.TIMESERIES,
+			expect.objectContaining({
+				query: expect.objectContaining({
+					builder: expect.objectContaining({
+						queryData: expect.arrayContaining([
+							expect.objectContaining({
+								groupBy: expect.arrayContaining([
+									expect.objectContaining({
+										key: TEST_FIELD,
+										type: '',
+									}),
+								]),
+							}),
+						]),
+					}),
+				}),
+			}),
+		);
+	});
+
+	it('should not render action buttons in list view panel', () => {
+		const { container } = render(
+			<TableViewActions
+				fieldData={defaultProps.fieldData}
+				record={defaultProps.record}
+				isListViewPanel
+				isfilterInLoading={defaultProps.isfilterInLoading}
+				isfilterOutLoading={defaultProps.isfilterOutLoading}
+				onClickHandler={defaultProps.onClickHandler}
+				handleChangeSelectedView={defaultProps.handleChangeSelectedView}
+			/>,
+		);
+		// Verify that action buttons are not rendered in list view panel
+		expect(
+			container.querySelector(ACTION_BUTTON_TEST_ID),
+		).not.toBeInTheDocument();
+	});
+
+	it('should copy non-JSON body text without quotes when user clicks on body', () => {
+		// Setup: body field with surrounding quotes
+		const bodyValueWithQuotes =
+			'"FeatureFlag \'kafkaQueueProblems\' is enabled, sleeping 1 second"';
+		const expectedCopiedText =
+			"FeatureFlag 'kafkaQueueProblems' is enabled, sleeping 1 second";
+
+		const bodyProps = {
+			fieldData: {
+				field: 'body',
+				value: bodyValueWithQuotes,
+			},
+			record: {
+				key: 'body-key',
+				field: 'body',
+				value: bodyValueWithQuotes,
+			},
+			isListViewPanel: false,
+			isfilterInLoading: false,
+			isfilterOutLoading: false,
+			onClickHandler: jest.fn(),
+			handleChangeSelectedView: jest.fn(),
+		};
+
+		// Render component with body field
+		render(
+			<TableViewActions
+				fieldData={bodyProps.fieldData}
+				record={bodyProps.record}
+				isListViewPanel={bodyProps.isListViewPanel}
+				isfilterInLoading={bodyProps.isfilterInLoading}
+				isfilterOutLoading={bodyProps.isfilterOutLoading}
+				onClickHandler={bodyProps.onClickHandler}
+				handleChangeSelectedView={bodyProps.handleChangeSelectedView}
+			/>,
+		);
+
+		// Find the clickable copy area for body
+		const copyArea = screen.getByTestId('copy-clipboard-body');
+
+		// Verify it has the correct text to copy (without quotes)
+		expect(copyArea).toHaveAttribute('data-text-to-copy', expectedCopiedText);
+
+		// Action: User clicks on body content
+		fireEvent.click(copyArea);
+
+		// Assert: Text was copied without surrounding quotes
+		expect(mockCopyToClipboard).toHaveBeenCalledWith(expectedCopiedText);
+
+		// Assert: Success notification shown
+		expect(mockNotificationsSuccess).toHaveBeenCalledWith({
+			message: 'body copied to clipboard',
+			key: 'body copied to clipboard',
+		});
+	});
+});

frontend/src/container/LogDetailedView/TableView/useAsyncJSONProcessing.ts

@@ -0,0 +1,129 @@
+import { useEffect, useRef, useState } from 'react';
+import { FeatureKeys } from 'constants/features';
+import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
+import { isEmpty } from 'lodash-es';
+import { useAppContext } from 'providers/App/App';
+
+import { jsonToDataNodes, recursiveParseJSON } from '../utils';
+
+const MAX_BODY_BYTES = 100 * 1024; // 100 KB
+
+// Hook for async JSON processing
+const useAsyncJSONProcessing = (
+	value: string | Record<string, unknown>,
+	shouldProcess: boolean,
+	handleChangeSelectedView?: ChangeViewFunctionType,
+): {
+	isLoading: boolean;
+	treeData: any[] | null;
+	error: string | null;
+} => {
+	const [jsonState, setJsonState] = useState<{
+		isLoading: boolean;
+		treeData: any[] | null;
+		error: string | null;
+	}>({
+		isLoading: false,
+		treeData: null,
+		error: null,
+	});
+
+	const processingRef = useRef<boolean>(false);
+	const { featureFlags } = useAppContext();
+	const isBodyJsonQueryEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.USE_JSON_BODY)
+			?.active || false;
+
+	// eslint-disable-next-line sonarjs/cognitive-complexity
+	useEffect((): (() => void) => {
+		if (!shouldProcess || processingRef.current) {
+			return (): void => {};
+		}
+
+		// When value is already a parsed object skip the size check and JSON parsing
+		const parseBody = (): Record<string, unknown> | null => {
+			if (typeof value === 'object' && value !== null) {
+				return value as Record<string, unknown>;
+			}
+			const byteSize = new Blob([value as string]).size;
+			if (byteSize > MAX_BODY_BYTES) {
+				return null;
+			}
+			return recursiveParseJSON(value as string);
+		};
+
+		processingRef.current = true;
+		setJsonState({ isLoading: true, treeData: null, error: null });
+
+		// Option 1: Using setTimeout for non-blocking processing
+		const processAsync = (): void => {
+			setTimeout(() => {
+				try {
+					const parsedBody = parseBody();
+					if (parsedBody && !isEmpty(parsedBody)) {
+						const treeData = jsonToDataNodes(parsedBody, {
+							isBodyJsonQueryEnabled,
+							handleChangeSelectedView,
+						});
+						setJsonState({ isLoading: false, treeData, error: null });
+					} else {
+						setJsonState({ isLoading: false, treeData: null, error: null });
+					}
+				} catch (error) {
+					setJsonState({
+						isLoading: false,
+						treeData: null,
+						error: error instanceof Error ? error.message : 'Parsing failed',
+					});
+				} finally {
+					processingRef.current = false;
+				}
+			}, 0);
+		};
+
+		// Option 2: Using requestIdleCallback for better performance
+		const processWithIdleCallback = (): void => {
+			if ('requestIdleCallback' in window) {
+				requestIdleCallback(
+					// eslint-disable-next-line sonarjs/no-identical-functions
+					(): void => {
+						try {
+							const parsedBody = parseBody();
+							if (parsedBody && !isEmpty(parsedBody)) {
+								const treeData = jsonToDataNodes(parsedBody, {
+									isBodyJsonQueryEnabled,
+									handleChangeSelectedView,
+								});
+								setJsonState({ isLoading: false, treeData, error: null });
+							} else {
+								setJsonState({ isLoading: false, treeData: null, error: null });
+							}
+						} catch (error) {
+							setJsonState({
+								isLoading: false,
+								treeData: null,
+								error: error instanceof Error ? error.message : 'Parsing failed',
+							});
+						} finally {
+							processingRef.current = false;
+						}
+					},
+					{ timeout: 1000 },
+				);
+			} else {
+				processAsync();
+			}
+		};
+
+		processWithIdleCallback();
+
+		// Cleanup function
+		return (): void => {
+			processingRef.current = false;
+		};
+	}, [value, shouldProcess, isBodyJsonQueryEnabled, handleChangeSelectedView]);
+
+	return jsonState;
+};
+
+export default useAsyncJSONProcessing;

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

@@ -0,0 +1,108 @@
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+
+import BodyTitleRenderer from '../BodyTitleRenderer';
+
+let mockSetCopy: jest.Mock;
+const mockNotification = jest.fn();
+
+jest.mock('hooks/logs/useActiveLog', () => ({
+	useActiveLog: (): any => ({
+		onAddToQuery: jest.fn(),
+	}),
+}));
+
+jest.mock('react-use', () => ({
+	useCopyToClipboard: (): any => {
+		mockSetCopy = jest.fn();
+		return [{ value: null }, mockSetCopy];
+	},
+}));
+
+jest.mock('hooks/useNotifications', () => ({
+	useNotifications: (): any => ({
+		notifications: {
+			success: mockNotification,
+			error: jest.fn(),
+			info: jest.fn(),
+			warning: jest.fn(),
+			open: jest.fn(),
+			destroy: jest.fn(),
+		},
+	}),
+}));
+
+describe('BodyTitleRenderer', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('should copy primitive value when node is clicked', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		render(
+			<BodyTitleRenderer
+				title="name"
+				nodeKey="user.name"
+				value="John"
+				parentIsArray={false}
+			/>,
+		);
+
+		await user.click(screen.getByText('name'));
+
+		await waitFor(() => {
+			expect(mockSetCopy).toHaveBeenCalledWith('John');
+			expect(mockNotification).toHaveBeenCalledWith(
+				expect.objectContaining({
+					message: expect.stringContaining('user.name'),
+				}),
+			);
+		});
+	});
+
+	it('should copy array element value when clicked', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		render(
+			<BodyTitleRenderer
+				title="0"
+				nodeKey="items[*].0"
+				value="arrayElement"
+				parentIsArray
+			/>,
+		);
+
+		await user.click(screen.getByText('0'));
+
+		await waitFor(() => {
+			expect(mockSetCopy).toHaveBeenCalledWith('arrayElement');
+		});
+	});
+
+	it('should copy entire object when object node is clicked', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const testObject = { id: 123, active: true };
+
+		render(
+			<BodyTitleRenderer
+				title="metadata"
+				nodeKey="user.metadata"
+				value={testObject}
+				parentIsArray={false}
+			/>,
+		);
+
+		await user.click(screen.getByText('metadata'));
+
+		await waitFor(() => {
+			const callArg = mockSetCopy.mock.calls[0][0];
+			const expectedJson = JSON.stringify(testObject, null, 2);
+			expect(callArg).toBe(expectedJson);
+			expect(mockNotification).toHaveBeenCalledWith(
+				expect.objectContaining({
+					message: expect.stringContaining('object copied'),
+				}),
+			);
+		});
+	});
+});

frontend/src/container/LogDetailedView/hooks/useLogAttributeActions.tsx

@@ -1,7 +1,9 @@
 import { useCallback, useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
 import { CircleMinus, CirclePlus, Layers, RefreshCw } from '@signozhq/icons';
 import { convertFiltersToExpression } from 'components/QueryBuilderV2/utils';
 import { FeatureKeys } from 'constants/features';
+import ROUTES from 'constants/routes';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { ICurrentQueryData } from 'hooks/useHandleExplorerTabChange';
@@ -51,6 +53,7 @@ export function useLogAttributeActions({
 	isListViewPanel = false,
 	onApplyLogFilter,
 }: UseLogAttributeActionsParams): UseLogAttributeActionsResult {
+	const { pathname } = useLocation();
 	const { stagedQuery, updateQueriesData } = useQueryBuilder();
 	const { featureFlags } = useAppContext();
 
@@ -58,6 +61,8 @@ export function useLogAttributeActions({
 		featureFlags?.find((flag) => flag.name === FeatureKeys.USE_JSON_BODY)
 			?.active || false;
 
+	const isLiveLogs = pathname === ROUTES.LIVE_LOGS;
+
 	const filterFor = useCallback(
 		(context: FieldContext, isFilterIn: boolean): void => {
 			const target = buildLogFilterTarget(
@@ -214,7 +219,8 @@ export function useLogAttributeActions({
 				shouldHide: (_key, fieldKeyPath): boolean =>
 					!handleChangeSelectedView ||
 					!buildLogFilterTarget(fieldKeyPath, undefined, isBodyJsonQueryEnabled)
-						.groupBySupported,
+						.groupBySupported ||
+					isLiveLogs,
 			},
 			{
 				key: LogDetailsAction.REPLACE_FILTER,
@@ -222,7 +228,7 @@ export function useLogAttributeActions({
 				icon: <RefreshCw size={12} />,
 				onClick: replaceFilter,
 				shouldHide: (_key, fieldKeyPath): boolean =>
-					!handleChangeSelectedView || isRestricted(fieldKeyPath),
+					!handleChangeSelectedView || isRestricted(fieldKeyPath) || isLiveLogs,
 			},
 		];
 	}, [
@@ -230,6 +236,7 @@ export function useLogAttributeActions({
 		groupBy,
 		replaceFilter,
 		isBodyJsonQueryEnabled,
+		isLiveLogs,
 		handleChangeSelectedView,
 		onApplyLogFilter,
 	]);

frontend/src/container/LogDetailedView/utils.tsx

@@ -1,7 +1,10 @@
 import * as Sentry from '@sentry/react';
 import Convert from 'ansi-to-html';
+import type { DataNode } from 'antd/es/tree';
+import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { MetricsType } from 'container/MetricsApplication/constant';
 import dompurify from 'dompurify';
+import { uniqueId } from 'lodash-es';
 import {
 	ILog,
 	ILogAggregateAttributesResources,
@@ -10,6 +13,7 @@ import {
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { FORBID_DOM_PURIFY_ATTR, FORBID_DOM_PURIFY_TAGS } from 'utils/app';
 
+import BodyTitleRenderer from './BodyTitleRenderer';
 import { typeToArrayTypeMapper } from './config';
 import { AnyObject, IFieldAttributes } from './LogDetailedView.types';
 
@@ -36,6 +40,135 @@ export const recursiveParseJSON = (obj: string): Record<string, unknown> => {
 	}
 };
 
+type JsonToDataNodesOptions = {
+	parentKey?: string;
+	parentIsArray?: boolean;
+	isBodyJsonQueryEnabled?: boolean;
+	handleChangeSelectedView?: ChangeViewFunctionType;
+};
+
+type ComputeDataNodeOptions = {
+	key: string;
+	valueIsArray: boolean;
+	value: unknown;
+	nodeKey: string;
+	parentIsArray: boolean;
+	isBodyJsonQueryEnabled?: boolean;
+	handleChangeSelectedView?: ChangeViewFunctionType;
+};
+
+export const computeDataNode = ({
+	key,
+	valueIsArray,
+	value,
+	nodeKey,
+	parentIsArray,
+	isBodyJsonQueryEnabled = false,
+	handleChangeSelectedView,
+}: ComputeDataNodeOptions): DataNode => ({
+	key: uniqueId(),
+	title: (
+		<BodyTitleRenderer
+			title={`${key} ${valueIsArray ? '[...]' : ''}`}
+			nodeKey={nodeKey}
+			value={value}
+			parentIsArray={parentIsArray}
+			handleChangeSelectedView={handleChangeSelectedView}
+		/>
+	),
+	children: jsonToDataNodes(value as Record<string, unknown>, {
+		parentKey: valueIsArray
+			? `${nodeKey}${isBodyJsonQueryEnabled ? '[]' : '[*]'}`
+			: nodeKey,
+		parentIsArray: valueIsArray,
+		isBodyJsonQueryEnabled,
+		handleChangeSelectedView,
+	}),
+});
+
+export function jsonToDataNodes(
+	json: Record<string, unknown>,
+	options: JsonToDataNodesOptions = {},
+): DataNode[] {
+	const {
+		parentKey = '',
+		parentIsArray = false,
+		isBodyJsonQueryEnabled = false,
+		handleChangeSelectedView,
+	} = options;
+
+	return Object.entries(json).map(([key, value]) => {
+		let nodeKey = parentKey || key;
+		if (parentIsArray) {
+			nodeKey += `.${value}`;
+		} else if (parentKey) {
+			nodeKey += `.${key}`;
+		}
+
+		const valueIsArray = Array.isArray(value);
+
+		if (parentIsArray) {
+			if (typeof value === 'object' && value !== null) {
+				return computeDataNode({
+					key,
+					valueIsArray,
+					value,
+					nodeKey,
+					parentIsArray,
+					isBodyJsonQueryEnabled,
+					handleChangeSelectedView,
+				});
+			}
+
+			return {
+				key: uniqueId(),
+				title: (
+					<BodyTitleRenderer
+						title={value as string}
+						nodeKey={nodeKey}
+						value={value}
+						parentIsArray={parentIsArray}
+						handleChangeSelectedView={handleChangeSelectedView}
+					/>
+				),
+				children: jsonToDataNodes(
+					{},
+					{
+						parentKey: nodeKey,
+						parentIsArray: valueIsArray,
+						isBodyJsonQueryEnabled,
+						handleChangeSelectedView,
+					},
+				),
+			};
+		}
+
+		if (typeof value === 'object' && value !== null) {
+			return computeDataNode({
+				key,
+				valueIsArray,
+				value,
+				nodeKey,
+				parentIsArray,
+				isBodyJsonQueryEnabled,
+				handleChangeSelectedView,
+			});
+		}
+		return {
+			key: uniqueId(),
+			title: (
+				<BodyTitleRenderer
+					title={key}
+					nodeKey={nodeKey}
+					value={value}
+					parentIsArray={parentIsArray}
+					handleChangeSelectedView={handleChangeSelectedView}
+				/>
+			),
+		};
+	});
+}
+
 export function flattenObject(obj: AnyObject, prefix = ''): AnyObject {
 	return Object.keys(obj).reduce((acc: AnyObject, k: string): AnyObject => {
 		const pre = prefix.length ? `${prefix}.` : '';
@@ -121,6 +254,14 @@ export const getFieldAttributes = (field: string): IFieldAttributes => {
 // Returns key to be used when filtering for `field` via
 // the query builder. This is useful for powering filtering
 // by field values from log details view.
+export const filterKeyForField = (field: string): string => {
+	// Must work for all 3 of the following types of cases
+	// timestamp -> timestamp
+	// attributes_string.log.file -> log.file
+	// resources_string.k8s.pod.name -> k8s.pod.name
+	const fieldAttribs = getFieldAttributes(field);
+	return fieldAttribs?.newField || field;
+};
 
 export const aggregateAttributesResourcesToObject = (
 	logData: ILog,
@@ -277,6 +418,16 @@ export const escapeHtml = (unsafe: string): string =>
 		.replace(/'/g, '&#039;');
 
 // parse field value to remove escaping characters
+export const parseFieldValue = (value: string): string => {
+	try {
+		return JSON.parse(value);
+	} catch (error) {
+		return value;
+	}
+};
+
+// now we do not want to render colors everywhere like in tooltip and monaco editor hence we remove such codes to make
+// the log line readable
 export const removeEscapeCharacters = (str: string): string =>
 	(str ?? '')
 		.replace(/\\x1[bB][[0-9;]*m/g, '')
@@ -307,6 +458,10 @@ export const unescapeString = (str: string): string =>
 			String.fromCharCode(parseInt(hex, 16)),
 		); // Replaces Unicode escape sequences
 
+export function removeExtraSpaces(input: string): string {
+	return input.replace(/\s+/g, ' ').trim();
+}
+
 export function findKeyPath(
 	obj: AnyObject,
 	targetKey: string,

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

@@ -1,18 +1,7 @@
 .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 {
-		width: 100%;
+		// Clearance for the fixed ExplorerOptions bar.
+		padding-bottom: 80px;
 
 		// Meant to fix the query builder colors
 		--input-background: var(--l2-background);
@@ -83,14 +72,6 @@
 			}
 		}
 	}
-
-	&.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,9 +3,8 @@ 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 QuickFilters from 'components/QuickFilters/QuickFilters';
+import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
 import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import { initialQueryMeterWithType, PANEL_TYPES } from 'constants/queryBuilder';
@@ -121,29 +120,21 @@ function Explorer(): JSX.Element {
 
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<div
-				className={cx('meter-explorer-container', {
-					'quick-filters-open': showQuickFilters,
-				})}
+			<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-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">
@@ -196,7 +187,7 @@ function Explorer(): JSX.Element {
 						splitedQueries={splitedQueries}
 					/>
 				</div>
-			</div>
+			</QuickFiltersLayout>
 		</Sentry.ErrorBoundary>
 	);
 }

frontend/src/container/MetricsExplorer/Inspect/ExpandedView.tsx

@@ -7,7 +7,7 @@ import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import classNames from 'classnames';
 import ResizeTable from 'components/ResizeTable/ResizeTable';
-import { DataType } from 'container/LogDetailedView/LogDetailedView.types';
+import { DataType } from 'container/LogDetailedView/TableView';
 import { CircleArrowDown, CircleArrowRight, Focus } from '@signozhq/icons';
 
 import { MetricsExplorerEventKeys, MetricsExplorerEvents } from '../events';

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

@@ -6,7 +6,7 @@ import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { useGetMetricAttributes } from 'api/generated/services/metrics';
 import { ResizeTable } from 'components/ResizeTable';
-import { DataType } from 'container/LogDetailedView/LogDetailedView.types';
+import { DataType } from 'container/LogDetailedView/TableView';
 import {
 	Check,
 	Copy,

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

@@ -21,7 +21,7 @@ import YAxisUnitSelector from 'components/YAxisUnitSelector';
 import { YAxisSource } from 'components/YAxisUnitSelector/types';
 import { getUniversalNameFromMetricUnit } from 'components/YAxisUnitSelector/utils';
 import FieldRenderer from 'container/LogDetailedView/FieldRenderer';
-import { DataType } from 'container/LogDetailedView/LogDetailedView.types';
+import { DataType } from 'container/LogDetailedView/TableView';
 import { useNotifications } from 'hooks/useNotifications';
 import { PenLine, Save, X } from '@signozhq/icons';
 

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

@@ -1,7 +1,6 @@
 import {
 	MetricsexplorertypesMetricAlertDTO,
 	MetricsexplorertypesMetricAttributeDTO,
-	MetricsexplorertypesMetricDashboardDTO,
 	MetricsexplorertypesMetricHighlightsResponseDTO,
 	MetricsexplorertypesMetricMetadataDTO,
 	MetrictypesTemporalityDTO,
@@ -55,8 +54,6 @@ 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,9 +60,6 @@
 	.metrics-table-container {
 		padding-bottom: 48px;
 		.ant-table {
-			margin-left: -16px;
-			margin-right: -16px;
-
 			.ant-table-thead > tr > th {
 				padding: 12px;
 				font-weight: 500;
@@ -184,7 +181,9 @@
 
 		.ant-pagination {
 			position: fixed;
-			bottom: 0;
+			// Lifted above the bottom strip. Don't extend this pattern — new
+			// fixed-bottom UI belongs in the bounded layout, not in another offset here.
+			bottom: var(--bottom-strip-height, 0px);
 			width: calc(100% - 54px);
 			background: var(--l1-background);
 			padding: 16px;

frontend/src/container/TopNav/DateTimeSelectionV2/constants.ts

@@ -207,4 +207,4 @@ export const routesToSkip = [
 	ROUTES.AI_OBSERVABILITY_EXPLORER,
 ];
 
-export const routesToDisable = [ROUTES.LOGS_EXPLORER];
+export const routesToDisable = [ROUTES.LOGS_EXPLORER, ROUTES.LIVE_LOGS];

frontend/src/hooks/infraMonitoring/useHandleLogsPagination.tsx

@@ -0,0 +1,183 @@
+import {
+	Dispatch,
+	SetStateAction,
+	useCallback,
+	useEffect,
+	useMemo,
+	useState,
+} from 'react';
+import { DEFAULT_PER_PAGE_VALUE } from 'container/Controls/config';
+import { ORDERBY_FILTERS } from 'container/QueryBuilder/filters/OrderByFilter/config';
+import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
+import { isEqual } from 'lodash-es';
+import { ILog } from 'types/api/logs/log';
+import {
+	IBuilderQuery,
+	TagFilterItem,
+} from 'types/api/queryBuilder/queryBuilderData';
+
+interface TimeRange {
+	startTime: number;
+	endTime: number;
+}
+
+interface UsePaginatedLogsProps {
+	timeRange: TimeRange;
+	filters: IBuilderQuery['filters'];
+	queryKeyFilters?: string[];
+	excludeFilterKeys?: string[];
+	basePayload: GetQueryResultsProps;
+}
+
+interface UseHandleLogsPagination {
+	logs: ILog[];
+	hasReachedEndOfLogs: boolean;
+	isPaginating: boolean;
+	currentPage: number;
+	resetLogsList: boolean;
+	setIsPaginating: Dispatch<SetStateAction<boolean>>;
+	handleNewData: (currentData: any) => void;
+	loadMoreLogs: () => void;
+	shouldResetPage: boolean;
+	queryPayload: GetQueryResultsProps;
+}
+
+export const useHandleLogsPagination = ({
+	timeRange,
+	filters,
+	queryKeyFilters = [],
+	excludeFilterKeys = [],
+	basePayload,
+}: UsePaginatedLogsProps): UseHandleLogsPagination => {
+	const [logs, setLogs] = useState<ILog[]>([]);
+	const [hasReachedEndOfLogs, setHasReachedEndOfLogs] = useState(false);
+	const [restFilters, setRestFilters] = useState<TagFilterItem[]>([]);
+	const [resetLogsList, setResetLogsList] = useState<boolean>(false);
+	const [page, setPage] = useState(1);
+	const [prevTimeRange, setPrevTimeRange] = useState<TimeRange | null>(
+		timeRange,
+	);
+	const [isPaginating, setIsPaginating] = useState(false);
+
+	const { shouldResetPage, newRestFilters } = useMemo(() => {
+		const newRestFilters = filters?.items?.filter((item) => {
+			const keyToCheck = item.key?.key ?? '';
+			return (
+				!queryKeyFilters.includes(keyToCheck) &&
+				!excludeFilterKeys.includes(keyToCheck)
+			);
+		});
+
+		const areFiltersSame = isEqual(restFilters, newRestFilters);
+
+		const shouldResetPage =
+			!areFiltersSame ||
+			timeRange.startTime !== prevTimeRange?.startTime ||
+			timeRange.endTime !== prevTimeRange?.endTime;
+
+		return { shouldResetPage, newRestFilters };
+	}, [
+		filters,
+		timeRange,
+		prevTimeRange,
+		queryKeyFilters,
+		excludeFilterKeys,
+		restFilters,
+	]);
+
+	const currentPage = useMemo(() => {
+		if (shouldResetPage) {
+			return 1;
+		}
+		return page;
+	}, [shouldResetPage, page]);
+
+	// Handle data updates
+	const handleNewData = useCallback(
+		(currentData: any) => {
+			if (!currentData[0].list) {
+				setHasReachedEndOfLogs(true);
+				return;
+			}
+
+			const currentLogs: ILog[] =
+				currentData[0].list?.map((item: any) => ({
+					...item.data,
+					timestamp: item.timestamp,
+				})) || [];
+
+			if (resetLogsList) {
+				setLogs(currentLogs);
+				setResetLogsList(false);
+				return;
+			}
+
+			const newLogs = currentLogs.filter(
+				(newLog) => !logs.some((existingLog) => isEqual(existingLog, newLog)),
+			);
+
+			if (newLogs.length > 0) {
+				setLogs((prev) => [...prev, ...newLogs]);
+			}
+		},
+		[logs, resetLogsList],
+	);
+
+	// Reset logic
+	useEffect(() => {
+		if (shouldResetPage) {
+			setPage(1);
+			setLogs([]);
+			setResetLogsList(true);
+		}
+
+		setPrevTimeRange(timeRange);
+		setRestFilters(newRestFilters || []);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [shouldResetPage, timeRange]);
+
+	const loadMoreLogs = useCallback(() => {
+		if (!logs.length) {
+			return;
+		}
+		setPage((prev) => prev + 1);
+		setIsPaginating(true);
+	}, [logs]);
+
+	const queryPayload = useMemo(
+		() => ({
+			...basePayload,
+			query: {
+				...basePayload.query,
+				builder: {
+					...basePayload.query.builder,
+					queryData: [
+						{
+							...basePayload.query.builder.queryData[0],
+							pageSize: DEFAULT_PER_PAGE_VALUE,
+							offset: (currentPage - 1) * DEFAULT_PER_PAGE_VALUE,
+							orderBy: [
+								{ columnName: 'timestamp', order: ORDERBY_FILTERS.DESC },
+								{ columnName: 'id', order: ORDERBY_FILTERS.DESC },
+							],
+						},
+					],
+				},
+			},
+		}),
+		[basePayload, currentPage],
+	);
+
+	return {
+		logs,
+		hasReachedEndOfLogs,
+		isPaginating,
+		currentPage,
+		resetLogsList,
+		queryPayload,
+		setIsPaginating,
+		handleNewData,
+		loadMoreLogs,
+		shouldResetPage,
+	};
+};

frontend/src/hooks/useSavedViewEnabled.ts

@@ -0,0 +1,11 @@
+import getLocalStorageKey from 'api/browser/localstorage/get';
+import { LOCALSTORAGE } from 'constants/localStorage';
+import { useState } from 'react';
+
+export function useSavedViewEnabled(): boolean {
+	const [isEnabled] = useState(
+		() => getLocalStorageKey(LOCALSTORAGE.SAVED_VIEW_ENABLED) === 'true',
+	);
+
+	return isEnabled;
+}

frontend/src/lib/logs/fieldSearch.ts

@@ -0,0 +1,9 @@
+export const fieldSearchFilter = (
+	searchSpace = '',
+	currentValue = '',
+): boolean => {
+	if (!currentValue || !searchSpace) {
+		return true;
+	}
+	return searchSpace.toLowerCase().indexOf(currentValue.toLowerCase()) !== -1;
+};

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

@@ -1,11 +1,4 @@
 .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;
@@ -18,14 +11,4 @@
 	.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,13 +5,11 @@ 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 QuickFilters from 'components/QuickFilters/QuickFilters';
+import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
 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';
@@ -59,63 +57,52 @@ function AllErrors(): JSX.Element {
 	const quickFilterFieldApis = useSignalFieldApis();
 
 	return (
-		<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>
-							}
+		<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}
 						/>
-						<ResourceAttributesFilterV2 />
-						<RouteTab
-							routes={routes}
-							activeKey={pathname}
-							history={history}
-							showRightSection={false}
+						<HeaderRightSection
+							enableAnnouncements={false}
+							enableShare
+							enableFeedback
 						/>
-					</>
-				</TypicalOverlayScrollbar>
-			</section>
-		</div>
+					</div>
+				}
+			/>
+			<ResourceAttributesFilterV2 />
+			<RouteTab
+				routes={routes}
+				activeKey={pathname}
+				history={history}
+				showRightSection={false}
+			/>
+		</QuickFiltersLayout>
 	);
 }
 

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

@@ -1,11 +1,4 @@
 .api-monitoring-page {
-	flex: 1;
-	display: flex;
-
-	.ant-tabs {
-		flex: 1;
-	}
-
 	.ant-tabs-nav {
 		padding: 0 16px;
 		margin-bottom: 0px;
@@ -15,22 +8,6 @@
 		}
 	}
 
-	.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,9 +13,12 @@ function ApiMonitoringPage(): JSX.Element {
 	const routes: TabRoutes[] = [Explorer];
 
 	return (
-		<div className="api-monitoring-page">
-			<RouteTab routes={routes} activeKey={pathname} history={history} />
-		</div>
+		<RouteTab
+			className="api-monitoring-page"
+			routes={routes}
+			activeKey={pathname}
+			history={history}
+		/>
 	);
 }
 

frontend/src/pages/DashboardPage/DashboardContainer/components/LockedIndicator/LockedIndicator.module.scss

@@ -2,7 +2,9 @@
 	display: flex;
 	flex-direction: column;
 	position: fixed;
-	bottom: 0;
+	// Lifted above the bottom strip. Don't extend this pattern — new fixed-bottom
+	// UI belongs in the bounded layout, not in another offset here.
+	bottom: var(--bottom-strip-height, 0px);
 	left: 0;
 	width: 100%;
 	z-index: 100;

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

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

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

@@ -1,16 +1,4 @@
 .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;
@@ -20,25 +8,6 @@
 		}
 	}
 
-	.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,8 +13,11 @@ export default function LogsModulePage(): JSX.Element {
 	const routes: TabRoutes[] = [logsExplorer, logsPipelines, logSaveView];
 
 	return (
-		<div className="logs-module-container">
-			<RouteTab routes={routes} activeKey={pathname} history={history} />
-		</div>
+		<RouteTab
+			className="logs-module-container"
+			routes={routes}
+			activeKey={pathname}
+			history={history}
+		/>
 	);
 }

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

@@ -1,13 +1,4 @@
 .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;
@@ -17,22 +8,6 @@
 		}
 	}
 
-	.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,8 +68,11 @@ export default function MessagingQueuesMainPage(): JSX.Element {
 	];
 
 	return (
-		<div className="messaging-queues-module-container">
-			<RouteTab routes={routes} activeKey={pathname} history={history} />
-		</div>
+		<RouteTab
+			className="messaging-queues-module-container"
+			routes={routes}
+			activeKey={pathname}
+			history={history}
+		/>
 	);
 }

frontend/src/pages/MeterExplorer/MeterExplorerPage.tsx

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

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

@@ -1,13 +1,4 @@
 .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;
@@ -18,20 +9,7 @@
 	}
 
 	.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,9 +42,12 @@ function MetricsExplorerPage(): JSX.Element {
 	useShareBuilderUrl({ defaultValue: defaultQuery });
 
 	return (
-		<div className="metrics-explorer-page">
-			<RouteTab routes={routes} activeKey={pathname} history={history} />
-		</div>
+		<RouteTab
+			className="metrics-explorer-page"
+			routes={routes}
+			activeKey={pathname}
+			history={history}
+		/>
 	);
 }
 

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

@@ -65,8 +65,6 @@
 }
 
 .trace-explorer-page {
-	display: flex;
-
 	// Meant to fix the query builder colors
 	--input-background: var(--l2-background);
 	--input-hover-background: var(--l2-background);
@@ -75,32 +73,8 @@
 	--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,12 +2,10 @@ 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 QuickFilters from 'components/QuickFilters/QuickFilters';
+import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
 import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
@@ -261,23 +259,20 @@ function TracesExplorer(): JSX.Element {
 
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<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,
-					})}
-				>
+			<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-header">
 						<Toolbar
 							showAutoRefresh
@@ -369,7 +364,7 @@ function TracesExplorer(): JSX.Element {
 						handleChangeSelectedView={handleChangeSelectedView}
 					/>
 				</div>
-			</div>
+			</QuickFiltersLayout>
 		</Sentry.ErrorBoundary>
 	);
 }

frontend/src/pages/TracesModulePage/TracesModulePage.tsx

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

frontend/src/utils/permission/index.ts

@@ -95,6 +95,7 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	VERSION: ['ADMIN', 'EDITOR', 'VIEWER'],
 	LOGS: ['ADMIN', 'EDITOR', 'VIEWER'],
 	LOGS_EXPLORER: ['ADMIN', 'EDITOR', 'VIEWER'],
+	LIVE_LOGS: ['ADMIN', 'EDITOR', 'VIEWER'],
 	LIST_LICENSES: ['ADMIN'],
 	LOGS_INDEX_FIELDS: ['ADMIN', 'EDITOR', 'VIEWER'],
 	LOGS_PIPELINES: ['ADMIN', 'EDITOR', 'VIEWER'],
@@ -168,6 +169,7 @@ export const routeWithInitialAuthZSupport = {
 	TRACE_DETAIL: true,
 	LOGS: true,
 	LOGS_EXPLORER: true,
+	LIVE_LOGS: true,
 	ROLES_SETTINGS: true,
 	ROLE_CREATE: true,
 	ROLE_DETAILS: true,

pkg/apiserver/signozapiserver/dashboard.go

@@ -630,62 +630,6 @@ 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,26 +167,6 @@ 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,12 +19,6 @@ 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)
 
@@ -34,23 +28,6 @@ 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
 
 	// ════════════════════════════════════════════════════════════════════════
@@ -118,10 +95,6 @@ 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)
@@ -130,14 +103,6 @@ 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,11 +3,9 @@ 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"
@@ -29,22 +27,6 @@ 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()
@@ -61,7 +43,7 @@ func (handler *handler) CreatePublic(rw http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	_, err = handler.module.Get(ctx, valuer.MustNewUUID(claims.OrgID), id)
+	_, err = handler.module.GetV2(ctx, valuer.MustNewUUID(claims.OrgID), id)
 	if err != nil {
 		render.Error(rw, err)
 		return
@@ -99,7 +81,7 @@ func (handler *handler) GetPublic(rw http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	_, err = handler.module.Get(ctx, valuer.MustNewUUID(claims.OrgID), id)
+	_, err = handler.module.GetV2(ctx, valuer.MustNewUUID(claims.OrgID), id)
 	if err != nil {
 		render.Error(rw, err)
 		return
@@ -114,107 +96,6 @@ 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()
@@ -231,7 +112,7 @@ func (handler *handler) UpdatePublic(rw http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	_, err = handler.module.Get(ctx, valuer.MustNewUUID(claims.OrgID), id)
+	_, err = handler.module.GetV2(ctx, valuer.MustNewUUID(claims.OrgID), id)
 	if err != nil {
 		render.Error(rw, err)
 		return
@@ -275,7 +156,7 @@ func (handler *handler) DeletePublic(rw http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	_, err = handler.module.Get(ctx, valuer.MustNewUUID(claims.OrgID), id)
+	_, err = handler.module.GetV2(ctx, valuer.MustNewUUID(claims.OrgID), id)
 	if err != nil {
 		render.Error(rw, err)
 		return

pkg/modules/dashboard/impldashboard/module.go

@@ -2,8 +2,6 @@ package impldashboard
 
 import (
 	"context"
-	"log/slog"
-	"slices"
 
 	"github.com/SigNoz/signoz/pkg/analytics"
 	"github.com/SigNoz/signoz/pkg/errors"
@@ -11,7 +9,6 @@ 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"
@@ -42,194 +39,6 @@ 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 {
@@ -248,14 +57,6 @@ 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")
 }
@@ -275,213 +76,3 @@ 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,38 +196,6 @@ 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,7 +23,6 @@ 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"
@@ -390,18 +389,6 @@ 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")
@@ -414,22 +401,6 @@ 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,7 +17,6 @@ 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)
@@ -33,7 +32,6 @@ 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,7 +58,6 @@ 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"
@@ -376,12 +375,6 @@ 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)
@@ -946,14 +939,6 @@ 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,14 +1,8 @@
 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"
 )
@@ -22,7 +16,6 @@ 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 {
@@ -38,31 +31,8 @@ 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]interface{}
-
-	GettableDashboard = Dashboard
-
-	UpdatableDashboard = StorableDashboardData
-
-	PostableDashboard = StorableDashboardData
-
-	ListableDashboard []*GettableDashboard
+	StorableDashboardData map[string]any
 )
 
 // readString reads a string field from the untyped data blob, yielding "" when
@@ -72,135 +42,6 @@ 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 {
@@ -212,247 +53,3 @@ 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,7 +1,6 @@
 package dashboardtypes
 
 import (
-	"context"
 	"testing"
 
 	"github.com/SigNoz/signoz/pkg/types"
@@ -20,69 +19,6 @@ 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,6 +95,13 @@ 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,11 +53,6 @@ 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{
@@ -101,108 +96,6 @@ 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,21 +50,17 @@ func TestErrIfNotMutable_BySource(t *testing.T) {
 	cases := []struct {
 		source      Source
 		mutable     bool
-		deletable   bool
-		lockable    bool
 		publishable bool
 	}{
-		{SourceUser, true, true, true, true},
-		{SourceSystem, true, false, false, false},
-		{SourceIntegration, false, false, false, false},
+		{SourceUser, true, true},
+		{SourceSystem, false, false},
+		{SourceIntegration, false, false},
 	}
 
 	for _, tc := range cases {
 		t.Run(tc.source.StringValue(), func(t *testing.T) {
-			d := &Dashboard{Source: tc.source}
+			d := &DashboardV2{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

@@ -1,13 +0,0 @@
-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,19 +240,6 @@ 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 {