refactor(frontend): remove the old logs explorer

The page and its redux slice were the only callers of the logs list and
aggregate endpoints removed in the previous commit, so it rendered
nothing. Dropping it takes the logs store, the logql parser and the
legacy log api clients with it.

LogViewMode moves to container/OptionsMenu/types and the restricted-field
constants to container/LogDetailedView/config, their only remaining
consumers.

docs/api/openapi.yml

@@ -171,6 +171,14 @@ components:
       - kind
       - spec
       type: object
+    AlertmanagertypesChannelDefect:
+      enum:
+      - none
+      - missing_type
+      - multiple_notifiers
+      - unsupported_notifier
+      - unrepresentable
+      type: string
     AlertmanagertypesChannelEmailConfig:
       properties:
         headers:
@@ -384,13 +392,83 @@ components:
       required:
       - routingKey
       type: object
+    AlertmanagertypesChannelRepair:
+      properties:
+        action:
+          $ref: '#/components/schemas/AlertmanagertypesChannelRepairAction'
+        applied:
+          type: boolean
+        blockers:
+          items:
+            type: string
+          type: array
+        channels:
+          items:
+            $ref: '#/components/schemas/AlertmanagertypesListedNotificationChannel'
+          nullable: true
+          type: array
+        defect:
+          $ref: '#/components/schemas/AlertmanagertypesChannelDefect'
+        detail:
+          type: string
+        id:
+          type: string
+      required:
+      - id
+      - defect
+      - action
+      - applied
+      type: object
+    AlertmanagertypesChannelRepairAction:
+      enum:
+      - none
+      - retype
+      - split
+      - delete
+      type: string
+    AlertmanagertypesChannelSlackAction:
+      properties:
+        confirm:
+          $ref: '#/components/schemas/AlertmanagertypesChannelSlackConfirmation'
+        name:
+          type: string
+        style:
+          type: string
+        text:
+          type: string
+        type:
+          type: string
+        url:
+          type: string
+        value:
+          type: string
+      required:
+      - type
+      - text
+      type: object
     AlertmanagertypesChannelSlackConfig:
       properties:
+        actions:
+          items:
+            $ref: '#/components/schemas/AlertmanagertypesChannelSlackAction'
+          type: array
         apiUrl:
           format: password
           type: string
         channel:
           type: string
+        color:
+          type: string
+        fallback:
+          type: string
+        fields:
+          items:
+            $ref: '#/components/schemas/AlertmanagertypesChannelSlackField'
+          type: array
+        footer:
+          type: string
+        pretext:
+          type: string
         sendResolved:
           nullable: true
           type: boolean
@@ -398,9 +476,37 @@ components:
           type: string
         title:
           type: string
+        titleLink:
+          type: string
       required:
       - apiUrl
       type: object
+    AlertmanagertypesChannelSlackConfirmation:
+      properties:
+        dismissText:
+          type: string
+        okText:
+          type: string
+        text:
+          type: string
+        title:
+          type: string
+      required:
+      - text
+      type: object
+    AlertmanagertypesChannelSlackField:
+      properties:
+        short:
+          nullable: true
+          type: boolean
+        title:
+          type: string
+        value:
+          type: string
+      required:
+      - title
+      - value
+      type: object
     AlertmanagertypesChannelWebhookConfig:
       properties:
         bearerToken:
@@ -969,6 +1075,11 @@ components:
       - duration
       - repeatType
       type: object
+    AlertmanagertypesRepairChannelParams:
+      properties:
+        apply:
+          type: boolean
+      type: object
     AlertmanagertypesRepeatOn:
       enum:
       - sunday
@@ -3552,79 +3663,6 @@ components:
         hide:
           type: boolean
       type: object
-    DashboardtypesHeatmapAxes:
-      properties:
-        yScale:
-          $ref: '#/components/schemas/DashboardtypesHeatmapYScale'
-      type: object
-    DashboardtypesHeatmapChartAppearance:
-      properties:
-        colors:
-          $ref: '#/components/schemas/DashboardtypesHeatmapColors'
-      type: object
-    DashboardtypesHeatmapColorMode:
-      enum:
-      - palette
-      - opacity
-      type: string
-    DashboardtypesHeatmapColorScale:
-      enum:
-      - log
-      - sqrt
-      - linear
-      type: string
-    DashboardtypesHeatmapColors:
-      properties:
-        fill:
-          type: string
-        maxCount:
-          nullable: true
-          type: number
-        minCount:
-          nullable: true
-          type: number
-        mode:
-          $ref: '#/components/schemas/DashboardtypesHeatmapColorMode'
-        palette:
-          $ref: '#/components/schemas/DashboardtypesHeatmapPalette'
-        scale:
-          $ref: '#/components/schemas/DashboardtypesHeatmapColorScale'
-        steps:
-          type: integer
-      type: object
-    DashboardtypesHeatmapPalette:
-      enum:
-      - ice
-      - moss
-      - rust
-      - graphite
-      - ember
-      - lagoon
-      - orchid
-      - verdant
-      - lava
-      - beacon
-      type: string
-    DashboardtypesHeatmapPanelSpec:
-      properties:
-        axes:
-          $ref: '#/components/schemas/DashboardtypesHeatmapAxes'
-        chartAppearance:
-          $ref: '#/components/schemas/DashboardtypesHeatmapChartAppearance'
-        formatting:
-          $ref: '#/components/schemas/DashboardtypesPanelFormatting'
-        legend:
-          $ref: '#/components/schemas/DashboardtypesLegend'
-        visualization:
-          $ref: '#/components/schemas/DashboardtypesBasicVisualization'
-      type: object
-    DashboardtypesHeatmapYScale:
-      enum:
-      - auto
-      - linear
-      - log
-      - symlog
-      type: string
     DashboardtypesHistogramBuckets:
       properties:
         bucketCount:
@@ -3977,7 +4015,6 @@ components:
       discriminator:
         mapping:
           signoz/BarChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec'
-          signoz/HeatmapPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec'
           signoz/HistogramPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec'
           signoz/ListPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
           signoz/NumberPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpec'
@@ -3995,7 +4032,6 @@ components:
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec'
-      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec'
       type: object
     DashboardtypesPanelPluginKind:
       enum:
@@ -4007,7 +4043,6 @@ components:
       - signoz/HistogramPanel
       - signoz/ListPanel
       - signoz/TextPanel
-      - signoz/HeatmapPanel
       type: string
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec:
       properties:
@@ -4021,18 +4056,6 @@ components:
       - kind
       - spec
       type: object
-    DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec:
-      properties:
-        kind:
-          enum:
-          - signoz/HeatmapPanel
-          type: string
-        spec:
-          $ref: '#/components/schemas/DashboardtypesHeatmapPanelSpec'
-      required:
-      - kind
-      - spec
-      type: object
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec:
       properties:
         kind:
@@ -20330,6 +20353,85 @@ paths:
       summary: Update notification channel
       tags:
       - channels
+  /api/v2/notification_channels/{id}/repair:
+    post:
+      deprecated: false
+      description: 'This endpoint diagnoses a stored channel that the v2 API cannot
+        read and applies the fitting action: a channel carrying several notifier configurations
+        is split into one channel per configuration, keeping this ID for the first;
+        a channel whose notifier kind v2 does not model is deleted; a channel with
+        an empty stored type has it rewritten from its data. A delete is refused while
+        a routing policy still names the channel. Nothing is written unless apply=true;
+        by default the response only shows what would happen.'
+      operationId: RepairNotificationChannel
+      parameters:
+      - in: query
+        name: apply
+        schema:
+          type: boolean
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/AlertmanagertypesRepairChannelParams'
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/AlertmanagertypesChannelRepair'
+                  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:
+        - notification-channel:update
+      - tokenizer:
+        - notification-channel:update
+      summary: Repair notification channel
+      tags:
+      - channels
   /api/v2/notification_channels/test:
     post:
       deprecated: false

frontend/__mocks__/uplotMock.ts

@@ -2,8 +2,6 @@
 
 // Mock for uplot library used in tests
 export interface MockUPlotInstance {
-	/** Consumers read `root.parentElement` to detect a re-mounted container. */
-	root: HTMLDivElement;
 	setData: jest.Mock;
 	setSize: jest.Mock;
 	destroy: jest.Mock;
@@ -19,20 +17,13 @@ export interface MockUPlotPaths {
 }
 
 // Create mock instance methods
-const createMockUPlotInstance = (target?: HTMLElement): MockUPlotInstance => {
-	const root = document.createElement('div');
-	// Real uPlot mounts its root inside the target; without it a re-render reads
-	// `root.parentElement` off undefined and throws.
-	target?.appendChild(root);
-	return {
-		root,
-		setData: jest.fn(),
-		setSize: jest.fn(),
-		destroy: jest.fn(),
-		redraw: jest.fn(),
-		setSeries: jest.fn(),
-	};
-};
+const createMockUPlotInstance = (): MockUPlotInstance => ({
+	setData: jest.fn(),
+	setSize: jest.fn(),
+	destroy: jest.fn(),
+	redraw: jest.fn(),
+	setSeries: jest.fn(),
+});
 
 // Path builder: (self, seriesIdx, idx0, idx1) => paths or null
 const createMockPathBuilder = (name: string): jest.Mock =>
@@ -62,16 +53,14 @@ const mockTzDate = jest.fn(
 function MockUPlot(
 	_options: unknown,
 	_data: unknown,
-	target: HTMLElement,
+	_target: HTMLElement,
 ): MockUPlotInstance {
-	return createMockUPlotInstance(target);
+	return createMockUPlotInstance();
 }
 
 // Add static methods to the constructor
 MockUPlot.tzDate = mockTzDate;
 MockUPlot.paths = mockPaths;
-// Pinned so canvas-space maths in draw hooks is deterministic under jsdom.
-MockUPlot.pxRatio = 1;
 
 // Export the constructor as default
 export default MockUPlot;

frontend/public/locales/en/titles.json

@@ -43,7 +43,6 @@
 	"NOT_FOUND": "SigNoz | Page Not Found",
 	"LOGS": "SigNoz | Logs",
 	"LOGS_EXPLORER": "SigNoz | Logs Explorer",
-	"OLD_LOGS_EXPLORER": "SigNoz | Old Logs Explorer",
 	"LIVE_LOGS": "SigNoz | Live Logs",
 	"LOGS_PIPELINES": "SigNoz | Logs Pipelines",
 	"HOME_PAGE": "Open source Observability Platform | SigNoz",

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

@@ -1602,10 +1602,6 @@ describe('PrivateRoute', () => {
 			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 },
-			OLD_LOGS_EXPLORER: {
-				path: ROUTES.OLD_LOGS_EXPLORER,
-				deniedRoles: DENIED_ROLES,
-			},
 			METRICS_EXPLORER: {
 				path: ROUTES.METRICS_EXPLORER,
 				deniedRoles: DENIED_ROLES,

frontend/src/AppRoutes/pageComponents.ts

@@ -169,10 +169,6 @@ export const LogsExplorer = Loadable(
 	() => import(/* webpackChunkName: "Logs Explorer" */ 'pages/LogsModulePage'),
 );
 
-export const OldLogsExplorer = Loadable(
-	() => import(/* webpackChunkName: "Logs Explorer" */ 'pages/Logs'),
-);
-
 export const LiveLogs = Loadable(
 	() => import(/* webpackChunkName: "Live Logs" */ 'pages/LiveLogs'),
 );

frontend/src/AppRoutes/routes.ts

@@ -32,7 +32,6 @@ import {
 	MessagingQueuesMainPage,
 	MeterExplorerPage,
 	MetricsExplorer,
-	OldLogsExplorer,
 	OnboardingV2,
 	OrgOnboarding,
 	PasswordReset,
@@ -308,13 +307,6 @@ const routes: AppRoutes[] = [
 		key: 'LOGS_EXPLORER',
 		isPrivate: true,
 	},
-	{
-		path: ROUTES.OLD_LOGS_EXPLORER,
-		exact: true,
-		component: OldLogsExplorer,
-		key: 'OLD_LOGS_EXPLORER',
-		isPrivate: true,
-	},
 	{
 		path: ROUTES.LIVE_LOGS,
 		exact: true,

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

@@ -21,6 +21,7 @@ import type {
 	AlertmanagertypesPostableChannelDTO,
 	AlertmanagertypesPostableNotificationChannelDTO,
 	AlertmanagertypesReceiverDTO,
+	AlertmanagertypesRepairChannelParamsDTO,
 	AlertmanagertypesTestableNotificationChannelDTO,
 	AlertmanagertypesUpdatableNotificationChannelDTO,
 	CreateChannel201,
@@ -35,6 +36,9 @@ import type {
 	ListNotificationChannels200,
 	ListNotificationChannelsParams,
 	RenderErrorResponseDTO,
+	RepairNotificationChannel200,
+	RepairNotificationChannelParams,
+	RepairNotificationChannelPathParameters,
 	UpdateChannelByIDPathParameters,
 	UpdateNotificationChannel200,
 	UpdateNotificationChannelPathParameters,
@@ -1144,6 +1148,113 @@ export const useUpdateNotificationChannel = <
 > => {
 	return useMutation(getUpdateNotificationChannelMutationOptions(options));
 };
+/**
+ * This endpoint diagnoses a stored channel that the v2 API cannot read and applies the fitting action: a channel carrying several notifier configurations is split into one channel per configuration, keeping this ID for the first; a channel whose notifier kind v2 does not model is deleted; a channel with an empty stored type has it rewritten from its data. A delete is refused while a routing policy still names the channel. Nothing is written unless apply=true; by default the response only shows what would happen.
+ * @summary Repair notification channel
+ */
+export const repairNotificationChannel = (
+	{ id }: RepairNotificationChannelPathParameters,
+	alertmanagertypesRepairChannelParamsDTO?: BodyType<AlertmanagertypesRepairChannelParamsDTO>,
+	params?: RepairNotificationChannelParams,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<RepairNotificationChannel200>({
+		url: `/api/v2/notification_channels/${id}/repair`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: alertmanagertypesRepairChannelParamsDTO,
+		params,
+		signal,
+	});
+};
+
+export const getRepairNotificationChannelMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof repairNotificationChannel>>,
+		TError,
+		{
+			pathParams: RepairNotificationChannelPathParameters;
+			data?: BodyType<AlertmanagertypesRepairChannelParamsDTO>;
+			params?: RepairNotificationChannelParams;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof repairNotificationChannel>>,
+	TError,
+	{
+		pathParams: RepairNotificationChannelPathParameters;
+		data?: BodyType<AlertmanagertypesRepairChannelParamsDTO>;
+		params?: RepairNotificationChannelParams;
+	},
+	TContext
+> => {
+	const mutationKey = ['repairNotificationChannel'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof repairNotificationChannel>>,
+		{
+			pathParams: RepairNotificationChannelPathParameters;
+			data?: BodyType<AlertmanagertypesRepairChannelParamsDTO>;
+			params?: RepairNotificationChannelParams;
+		}
+	> = (props) => {
+		const { pathParams, data, params } = props ?? {};
+
+		return repairNotificationChannel(pathParams, data, params);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type RepairNotificationChannelMutationResult = NonNullable<
+	Awaited<ReturnType<typeof repairNotificationChannel>>
+>;
+export type RepairNotificationChannelMutationBody =
+	| BodyType<AlertmanagertypesRepairChannelParamsDTO>
+	| undefined;
+export type RepairNotificationChannelMutationError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Repair notification channel
+ */
+export const useRepairNotificationChannel = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof repairNotificationChannel>>,
+		TError,
+		{
+			pathParams: RepairNotificationChannelPathParameters;
+			data?: BodyType<AlertmanagertypesRepairChannelParamsDTO>;
+			params?: RepairNotificationChannelParams;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof repairNotificationChannel>>,
+	TError,
+	{
+		pathParams: RepairNotificationChannelPathParameters;
+		data?: BodyType<AlertmanagertypesRepairChannelParamsDTO>;
+		params?: RepairNotificationChannelParams;
+	},
+	TContext
+> => {
+	return useMutation(getRepairNotificationChannelMutationOptions(options));
+};
 /**
  * This endpoint sends a test notification for the configuration in the request body. The channel need not exist and nothing is persisted, so the body carries a configuration only.
  * @summary Test notification channel

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

@@ -40,7 +40,73 @@ export interface AlertmanagertypesChannelDTO {
 export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelSlackConfigDTOKind {
 	slack = 'slack',
 }
+export interface AlertmanagertypesChannelSlackConfirmationDTO {
+	/**
+	 * @type string
+	 */
+	dismissText?: string;
+	/**
+	 * @type string
+	 */
+	okText?: string;
+	/**
+	 * @type string
+	 */
+	text: string;
+	/**
+	 * @type string
+	 */
+	title?: string;
+}
+
+export interface AlertmanagertypesChannelSlackActionDTO {
+	confirm?: AlertmanagertypesChannelSlackConfirmationDTO;
+	/**
+	 * @type string
+	 */
+	name?: string;
+	/**
+	 * @type string
+	 */
+	style?: string;
+	/**
+	 * @type string
+	 */
+	text: string;
+	/**
+	 * @type string
+	 */
+	type: string;
+	/**
+	 * @type string
+	 */
+	url?: string;
+	/**
+	 * @type string
+	 */
+	value?: string;
+}
+
+export interface AlertmanagertypesChannelSlackFieldDTO {
+	/**
+	 * @type boolean,null
+	 */
+	short?: boolean | null;
+	/**
+	 * @type string
+	 */
+	title: string;
+	/**
+	 * @type string
+	 */
+	value: string;
+}
+
 export interface AlertmanagertypesChannelSlackConfigDTO {
+	/**
+	 * @type array
+	 */
+	actions?: AlertmanagertypesChannelSlackActionDTO[];
 	/**
 	 * @type string
 	 * @format password
@@ -50,6 +116,26 @@ export interface AlertmanagertypesChannelSlackConfigDTO {
 	 * @type string
 	 */
 	channel?: string;
+	/**
+	 * @type string
+	 */
+	color?: string;
+	/**
+	 * @type string
+	 */
+	fallback?: string;
+	/**
+	 * @type array
+	 */
+	fields?: AlertmanagertypesChannelSlackFieldDTO[];
+	/**
+	 * @type string
+	 */
+	footer?: string;
+	/**
+	 * @type string
+	 */
+	pretext?: string;
 	/**
 	 * @type boolean,null
 	 */
@@ -62,6 +148,10 @@ export interface AlertmanagertypesChannelSlackConfigDTO {
 	 * @type string
 	 */
 	title?: string;
+	/**
+	 * @type string
+	 */
+	titleLink?: string;
 }
 
 export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelSlackConfigDTO {
@@ -506,6 +596,13 @@ export type AlertmanagertypesChannelConfigDTO =
 	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJSMOpsConfigDTO
 	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelIncidentIOConfigDTO;
 
+export enum AlertmanagertypesChannelDefectDTO {
+	none = 'none',
+	missing_type = 'missing_type',
+	multiple_notifiers = 'multiple_notifiers',
+	unsupported_notifier = 'unsupported_notifier',
+	unrepresentable = 'unrepresentable',
+}
 export enum AlertmanagertypesChannelKindDTO {
 	slack = 'slack',
 	email = 'email',
@@ -527,6 +624,63 @@ export enum AlertmanagertypesChannelListSortDTO {
 	created_at = 'created_at',
 	name = 'name',
 }
+export enum AlertmanagertypesChannelRepairActionDTO {
+	none = 'none',
+	retype = 'retype',
+	split = 'split',
+	delete = 'delete',
+}
+export interface AlertmanagertypesListedNotificationChannelDTO {
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt: string;
+	/**
+	 * @type string
+	 */
+	displayName: string;
+	/**
+	 * @type string
+	 */
+	id: string;
+	kind: AlertmanagertypesChannelKindDTO;
+	/**
+	 * @type string
+	 */
+	name: string;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt: string;
+}
+
+export interface AlertmanagertypesChannelRepairDTO {
+	action: AlertmanagertypesChannelRepairActionDTO;
+	/**
+	 * @type boolean
+	 */
+	applied: boolean;
+	/**
+	 * @type array
+	 */
+	blockers?: string[];
+	/**
+	 * @type array,null
+	 */
+	channels?: AlertmanagertypesListedNotificationChannelDTO[] | null;
+	defect: AlertmanagertypesChannelDefectDTO;
+	/**
+	 * @type string
+	 */
+	detail?: string;
+	/**
+	 * @type string
+	 */
+	id: string;
+}
+
 export interface ModelLabelSetDTO {
 	[key: string]: string;
 }
@@ -1020,32 +1174,6 @@ export interface AlertmanagertypesJiraReceiverConfigDTO {
 	wont_fix_resolution?: string;
 }
 
-export interface AlertmanagertypesListedNotificationChannelDTO {
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt: string;
-	/**
-	 * @type string
-	 */
-	displayName: string;
-	/**
-	 * @type string
-	 */
-	id: string;
-	kind: AlertmanagertypesChannelKindDTO;
-	/**
-	 * @type string
-	 */
-	name: string;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt: string;
-}
-
 export interface AlertmanagertypesListableNotificationChannelDTO {
 	/**
 	 * @type array
@@ -2449,6 +2577,13 @@ export interface AlertmanagertypesReceiverDTO {
 	wechat_configs?: ConfigWechatConfigDTO[];
 }
 
+export interface AlertmanagertypesRepairChannelParamsDTO {
+	/**
+	 * @type boolean
+	 */
+	apply?: boolean;
+}
+
 export interface AlertmanagertypesTestableNotificationChannelDTO {
 	config: AlertmanagertypesChannelConfigDTO;
 }
@@ -5072,83 +5207,6 @@ export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDa
 	spec: DashboardtypesTextPanelSpecDTO;
 }
 
-export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTOKind {
-	'signoz/HeatmapPanel' = 'signoz/HeatmapPanel',
-}
-export enum DashboardtypesHeatmapYScaleDTO {
-	auto = 'auto',
-	linear = 'linear',
-	log = 'log',
-	symlog = 'symlog',
-}
-export interface DashboardtypesHeatmapAxesDTO {
-	yScale?: DashboardtypesHeatmapYScaleDTO;
-}
-
-export enum DashboardtypesHeatmapColorModeDTO {
-	palette = 'palette',
-	opacity = 'opacity',
-}
-export enum DashboardtypesHeatmapPaletteDTO {
-	ice = 'ice',
-	moss = 'moss',
-	rust = 'rust',
-	graphite = 'graphite',
-	ember = 'ember',
-	lagoon = 'lagoon',
-	orchid = 'orchid',
-	verdant = 'verdant',
-	lava = 'lava',
-	beacon = 'beacon',
-}
-export enum DashboardtypesHeatmapColorScaleDTO {
-	log = 'log',
-	sqrt = 'sqrt',
-	linear = 'linear',
-}
-export interface DashboardtypesHeatmapColorsDTO {
-	/**
-	 * @type string
-	 */
-	fill?: string;
-	/**
-	 * @type number,null
-	 */
-	maxCount?: number | null;
-	/**
-	 * @type number,null
-	 */
-	minCount?: number | null;
-	mode?: DashboardtypesHeatmapColorModeDTO;
-	palette?: DashboardtypesHeatmapPaletteDTO;
-	scale?: DashboardtypesHeatmapColorScaleDTO;
-	/**
-	 * @type integer
-	 */
-	steps?: number;
-}
-
-export interface DashboardtypesHeatmapChartAppearanceDTO {
-	colors?: DashboardtypesHeatmapColorsDTO;
-}
-
-export interface DashboardtypesHeatmapPanelSpecDTO {
-	axes?: DashboardtypesHeatmapAxesDTO;
-	chartAppearance?: DashboardtypesHeatmapChartAppearanceDTO;
-	formatting?: DashboardtypesPanelFormattingDTO;
-	legend?: DashboardtypesLegendDTO;
-	visualization?: DashboardtypesBasicVisualizationDTO;
-}
-
-export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTO {
-	/**
-	 * @enum signoz/HeatmapPanel
-	 * @type string
-	 */
-	kind: DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTOKind;
-	spec: DashboardtypesHeatmapPanelSpecDTO;
-}
-
 export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpecDTO
@@ -5157,8 +5215,7 @@ export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpecDTO
-	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpecDTO
-	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTO;
+	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpecDTO;
 
 export enum Querybuildertypesv5RequestTypeDTO {
 	scalar = 'scalar',
@@ -6083,7 +6140,6 @@ export enum DashboardtypesPanelPluginKindDTO {
 	'signoz/HistogramPanel' = 'signoz/HistogramPanel',
 	'signoz/ListPanel' = 'signoz/ListPanel',
 	'signoz/TextPanel' = 'signoz/TextPanel',
-	'signoz/HeatmapPanel' = 'signoz/HeatmapPanel',
 }
 /**
  * @nullable
@@ -13473,6 +13529,25 @@ export type UpdateNotificationChannel200 = {
 	status: string;
 };
 
+export type RepairNotificationChannelPathParameters = {
+	id: string;
+};
+export type RepairNotificationChannelParams = {
+	/**
+	 * @type boolean
+	 * @description undefined
+	 */
+	apply?: boolean;
+};
+
+export type RepairNotificationChannel200 = {
+	data: AlertmanagertypesChannelRepairDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type GetMyOrganization200 = {
 	data: TypesOrganizationDTO;
 	/**

frontend/src/api/logs/AddToSelectedField.ts

@@ -1,23 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps, Props } from 'types/api/logs/addToSelectedFields';
-
-const addToSelectedFields = async (
-	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
-	try {
-		const data = await axios.post(`/logs/fields`, props);
-		return {
-			statusCode: 200,
-			error: null,
-			message: '',
-			payload: data.data,
-		};
-	} catch (error) {
-		return Promise.reject(ErrorResponseHandler(error as AxiosError));
-	}
-};
-
-export default addToSelectedFields;

frontend/src/api/logs/GetLogs.ts

@@ -1,26 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps, Props } from 'types/api/logs/getLogs';
-
-const GetLogs = async (
-	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
-	try {
-		const data = await axios.get(`/logs`, {
-			params: props,
-		});
-
-		return {
-			statusCode: 200,
-			error: null,
-			message: '',
-			payload: data.data.results,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
-};
-
-export default GetLogs;

frontend/src/api/logs/GetLogsAggregate.ts

@@ -1,26 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps, Props } from 'types/api/logs/getLogsAggregate';
-
-const GetLogsAggregate = async (
-	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
-	try {
-		const data = await axios.get(`/logs/aggregate`, {
-			params: props,
-		});
-
-		return {
-			statusCode: 200,
-			error: null,
-			message: '',
-			payload: data.data.items,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
-};
-
-export default GetLogsAggregate;

frontend/src/api/logs/GetSearchFields.ts

@@ -1,24 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps } from 'types/api/logs/getSearchFields';
-
-const GetSearchFields = async (): Promise<
-	SuccessResponse<PayloadProps> | ErrorResponse
-> => {
-	try {
-		const data = await axios.get(`/logs/fields`);
-
-		return {
-			statusCode: 200,
-			error: null,
-			message: '',
-			payload: data.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
-};
-
-export default GetSearchFields;

frontend/src/api/logs/RemoveFromSelectedField.ts

@@ -1,23 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps, Props } from 'types/api/logs/addToSelectedFields';
-
-const removeSelectedField = async (
-	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
-	try {
-		const data = await axios.post(`/logs/fields`, props);
-		return {
-			statusCode: 200,
-			error: null,
-			message: '',
-			payload: data.data,
-		};
-	} catch (error) {
-		return Promise.reject(ErrorResponseHandler(error as AxiosError));
-	}
-};
-
-export default removeSelectedField;

frontend/src/api/logs/livetail.ts

@@ -1,22 +0,0 @@
-import apiV1 from 'api/apiV1';
-import getLocalStorageKey from 'api/browser/localstorage/get';
-import { ENVIRONMENT } from 'constants/env';
-import { LOCALSTORAGE } from 'constants/localStorage';
-import { EventSourcePolyfill } from 'event-source-polyfill';
-import { withBasePath } from 'utils/basePath';
-
-// 10 min in ms
-const TIMEOUT_IN_MS = 10 * 60 * 1000;
-
-export const LiveTail = (queryParams: string): EventSourcePolyfill =>
-	new EventSourcePolyfill(
-		ENVIRONMENT.baseURL
-			? `${ENVIRONMENT.baseURL}${apiV1}logs/tail?${queryParams}`
-			: withBasePath(`${apiV1}logs/tail?${queryParams}`),
-		{
-			headers: {
-				Authorization: `Bearer ${getLocalStorageKey(LOCALSTORAGE.AUTH_TOKEN)}`,
-			},
-			heartbeatTimeout: TIMEOUT_IN_MS,
-		},
-	);

frontend/src/api/querySuggestions/types.ts

@@ -1,21 +1,15 @@
 import type {
 	GetAIObservabilityFieldsKeys200,
 	GetAIObservabilityFieldsValues200,
-	GetAIObservabilityFieldsKeysParams,
-	GetAIObservabilityFieldsValuesParams,
 	GetFieldsKeys200,
 	GetFieldsKeysParams,
 	GetFieldsValues200,
 	GetFieldsValuesParams,
 } from 'api/generated/services/sigNoz.schemas';
 
-export type FieldKeysConfig =
-	| GetFieldsKeysParams
-	| GetAIObservabilityFieldsKeysParams;
+export type FieldKeysConfig = GetFieldsKeysParams;
 
-export type FieldValuesConfig =
-	| GetFieldsValuesParams
-	| GetAIObservabilityFieldsValuesParams;
+export type FieldValuesConfig = GetFieldsValuesParams;
 
 export type FieldKeysConfigProp = Omit<
 	FieldKeysConfig,

frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.ts

@@ -198,10 +198,6 @@ function createBaseSpec(
 				: undefined,
 		legend: isEmpty(queryData.legend) ? undefined : queryData.legend,
 		having: normalizeHaving(queryData.having),
-		// Heatmap only. Every other request type rejects an axis, and
-		// `panelTypeDataSourceFormValuesMap` is what keeps one from being carried onto a
-		// query the panel type switched away from.
-		bucketOptions: queryData.bucketOptions,
 		functions: isEmpty(queryData.functions)
 			? undefined
 			: queryData.functions.map((func: QueryFunction): QueryFunction => {

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { Button, InputNumber, Popover, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
-import { LogViewMode } from 'container/LogsTable';
+import { LogViewMode } from 'container/OptionsMenu/types';
 import { FontSize, OptionsMenuConfig } from 'container/OptionsMenu/types';
 import {
 	Check,

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/BucketOptions/BucketOptions.module.scss

@@ -1,144 +0,0 @@
-/**
- * Borrows the query builder's control metrics rather than the component defaults the
- * toggle group and number input ship with: 36px tall, 2px radius, and the
- * `--query-builder-v2-*` surface the selects above this row already paint on.
- */
-.bucketOptions {
-	--toggle-group-radius: var(--radius-1);
-	--toggle-group-item-size: 36px;
-	--toggle-group-item-font-size: 13px;
-	--toggle-group-item-padding-left: var(--spacing-6);
-	--toggle-group-item-padding-right: var(--spacing-6);
-
-	// Repeated from `.query-add-ons` rather than inherited: the section also renders on a
-	// formula, which has no add-ons ancestor to pick the toggle palette up from.
-	--toggle-group-secondary-bg: var(
-		--query-builder-v2-toggle-group-background-color,
-		var(--l1-background-hover)
-	);
-	--toggle-group-secondary-border: var(
-		--query-builder-v2-toggle-group-border-color,
-		var(--l2-border)
-	);
-	--toggle-group-secondary-active-bg: var(
-		--query-builder-v2-toggle-group-active-background-color,
-		var(--l1-background)
-	);
-	--toggle-group-secondary-bg-hover: var(
-		--query-builder-v2-toggle-group-background-color-hover,
-		var(--l2-background)
-	);
-
-	--input-height: 36px;
-	--input-font-size: 13px;
-	--input-border-radius: var(--radius-1);
-	--input-border-color: var(--query-builder-v2-border-color, var(--l2-border));
-	--input-background: var(
-		--query-builder-v2-background-color,
-		var(--l2-background)
-	);
-	--input-foreground: var(--query-builder-v2-color, var(--l2-foreground));
-
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-6);
-
-	padding: var(--spacing-4);
-	box-sizing: border-box;
-	border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-	border-radius: var(--radius-1);
-	background: var(--query-builder-v2-background-color, var(--l2-background));
-}
-
-.controls {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: var(--spacing-8);
-}
-
-/** One label paired with its control, at the same 10px rhythm as the aggregate rows. */
-.field {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-5);
-}
-
-.bounds {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: var(--spacing-4);
-}
-
-.label {
-	color: var(--l3-foreground);
-	font-family: 'Geist Mono';
-	font-size: 12px;
-	font-weight: var(--font-weight-medium);
-	line-height: 18px;
-	letter-spacing: 0.48px;
-	text-transform: uppercase;
-	white-space: nowrap;
-}
-
-/**
- * The toggle group exposes a font-size token but no family, so each item's label carries
- * the query builder's value type itself.
- */
-.toggleLabel {
-	font-family: 'Geist Mono';
-	font-size: 13px;
-	font-weight: var(--font-weight-normal);
-	letter-spacing: -0.07px;
-}
-
-/** Surface and metrics come from the `--input-*` tokens above; only the family has none. */
-.numberInput {
-	width: 104px;
-
-	font-family: 'Geist Mono';
-	letter-spacing: -0.07px;
-}
-
-/** Bounds read as a sequence of values, so they take the value type in a flat pill. */
-.bound {
-	padding: var(--spacing-1) var(--spacing-3);
-	border-radius: var(--radius-1);
-
-	font-family: 'Geist Mono';
-	font-size: 13px;
-	line-height: 20px;
-	letter-spacing: -0.07px;
-
-	color: var(--query-builder-v2-color, var(--l2-foreground));
-	background: var(--l3-background);
-}
-
-.overflowBound {
-	background: transparent;
-	color: var(--l3-foreground);
-}
-
-.muted {
-	font-family: 'Geist Mono';
-	font-size: 13px;
-	line-height: 20px;
-	color: var(--l3-foreground);
-}
-
-.hint {
-	margin: 0;
-	max-width: 72ch;
-
-	font-family: 'Geist Mono';
-	font-size: 12px;
-	line-height: 18px;
-	color: var(--l3-foreground);
-}
-
-.closeBtn {
-	margin-left: auto;
-	width: 36px;
-	height: 36px;
-}

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/BucketOptions/BucketOptions.tsx

@@ -1,268 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { Button } from 'antd';
-import cx from 'classnames';
-import { InputNumber } from '@signozhq/ui/input-number';
-import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
-import { ChevronUp } from '@signozhq/icons';
-import { Querybuildertypesv5BucketOptionsDTO } from 'api/generated/services/sigNoz.schemas';
-
-import {
-	BUCKET_KIND_HINTS,
-	BUCKET_KIND_OPTIONS,
-	DEFAULT_NUM_BUCKETS,
-	LOG_BANDS_OPTIONS,
-	MAX_NUM_BUCKETS,
-} from './constants';
-import {
-	bandsPerDoublingFromScale,
-	BucketKindOption,
-	formatUpperBound,
-	hasBoundsBeyondPreview,
-	isLinearBuckets,
-	kindOptionOf,
-	linearBuckets,
-	logBuckets,
-	logScaleOf,
-	previewUpperBounds,
-	scaleFromBandsPerDoubling,
-} from './utils';
-
-import styles from './BucketOptions.module.scss';
-
-function BucketOptions({
-	bucketOptions,
-	unit,
-	onChange,
-	onClose,
-}: {
-	bucketOptions?: Querybuildertypesv5BucketOptionsDTO;
-	/** The panel's y-axis unit, so the previewed bounds read the way the axis will. */
-	unit?: string;
-	onChange: (next: Querybuildertypesv5BucketOptionsDTO | undefined) => void;
-	/** Omitted where the section isn't dismissable, as on a formula. */
-	onClose?: () => void;
-}): JSX.Element {
-	// A linear axis has no bounds to describe until it has a max value, so the picked
-	// kind is held here rather than read back off the emitted options: it has to survive
-	// the gap between choosing Linear and filling the field in.
-	const [kind, setKind] = useState<BucketKindOption>(
-		kindOptionOf(bucketOptions),
-	);
-	const linearSpec =
-		bucketOptions && isLinearBuckets(bucketOptions)
-			? bucketOptions.spec
-			: undefined;
-	const [logScale, setLogScale] = useState<number>(logScaleOf(bucketOptions));
-	const [maxValue, setMaxValue] = useState<number | null>(
-		linearSpec?.maxValue ?? null,
-	);
-	const [numBuckets, setNumBuckets] = useState<number | null>(
-		linearSpec?.numBuckets ?? null,
-	);
-
-	const emitLinear = useCallback(
-		(nextMaxValue: number | null, nextNumBuckets: number | null): void => {
-			// An incomplete linear axis is sent as no axis at all rather than as a spec the
-			// request would reject.
-			if (nextMaxValue === null || nextMaxValue <= 0) {
-				onChange(undefined);
-				return;
-			}
-
-			onChange(linearBuckets(nextMaxValue, nextNumBuckets));
-		},
-		[onChange],
-	);
-
-	const handleKindChange = useCallback(
-		(value: string): void => {
-			// Radix clears the value when the active item is clicked again; a bucket axis is
-			// always one of the three, so keep the current pick instead.
-			if (!value) {
-				return;
-			}
-
-			const nextKind = value as BucketKindOption;
-			setKind(nextKind);
-
-			if (nextKind === 'auto') {
-				onChange(undefined);
-			} else if (nextKind === 'log') {
-				onChange(logBuckets(logScale));
-			} else {
-				emitLinear(maxValue, numBuckets);
-			}
-		},
-		[emitLinear, logScale, maxValue, numBuckets, onChange],
-	);
-
-	const handleBandsChange = useCallback(
-		(value: string): void => {
-			if (!value) {
-				return;
-			}
-
-			const nextScale = scaleFromBandsPerDoubling(Number(value));
-			setLogScale(nextScale);
-			onChange(logBuckets(nextScale));
-		},
-		[onChange],
-	);
-
-	const handleMaxValueChange = useCallback(
-		(value: number | string | null): void => {
-			const next = value === null || value === '' ? null : Number(value);
-			setMaxValue(next);
-			emitLinear(next, numBuckets);
-		},
-		[emitLinear, numBuckets],
-	);
-
-	const handleNumBucketsChange = useCallback(
-		(value: number | string | null): void => {
-			const next = value === null || value === '' ? null : Number(value);
-			setNumBuckets(next);
-			emitLinear(maxValue, next);
-		},
-		[emitLinear, maxValue],
-	);
-
-	// The toggle group takes a ReactNode label, which is how each item picks up the
-	// query builder's value type — the component exposes no font-family token.
-	const kindItems = useMemo(
-		() =>
-			BUCKET_KIND_OPTIONS.map(({ value, label }) => ({
-				value,
-				label: <span className={styles.toggleLabel}>{label}</span>,
-				'aria-label': label,
-			})),
-		[],
-	);
-
-	const bandItems = useMemo(
-		() =>
-			LOG_BANDS_OPTIONS.map(({ value, label }) => ({
-				value,
-				label: <span className={styles.toggleLabel}>{label}</span>,
-				'aria-label': label,
-			})),
-		[],
-	);
-
-	// The kind toggle can be ahead of what has been emitted, so the preview describes
-	// the picked kind rather than the emitted options.
-	const previewedOptions = useMemo(():
-		| Querybuildertypesv5BucketOptionsDTO
-		| undefined => {
-		if (kind === 'log') {
-			return logBuckets(logScale);
-		}
-		if (kind === 'linear' && maxValue !== null) {
-			return linearBuckets(maxValue, numBuckets);
-		}
-		return undefined;
-	}, [kind, logScale, maxValue, numBuckets]);
-
-	const bounds =
-		kind === 'linear' && !previewedOptions
-			? undefined
-			: previewUpperBounds(previewedOptions);
-
-	return (
-		<div className={styles.bucketOptions} data-testid="bucket-options">
-			<div className={styles.controls}>
-				<div className={styles.field}>
-					<span className={styles.label}>Bucket by</span>
-					<ToggleGroupSimple
-						type="single"
-						value={kind}
-						items={kindItems}
-						onChange={handleKindChange}
-						testId="bucket-options-kind"
-					/>
-				</div>
-
-				{kind === 'log' && (
-					<div className={styles.field}>
-						<span className={styles.label}>Bands per doubling</span>
-						<ToggleGroupSimple
-							type="single"
-							value={String(bandsPerDoublingFromScale(logScale))}
-							items={bandItems}
-							onChange={handleBandsChange}
-							testId="bucket-options-bands"
-						/>
-					</div>
-				)}
-
-				{kind === 'linear' && (
-					<>
-						<div className={styles.field}>
-							<span className={styles.label}>Max value</span>
-							<InputNumber
-								className={styles.numberInput}
-								min={0}
-								value={maxValue}
-								onChange={handleMaxValueChange}
-								placeholder="Required"
-								status={maxValue !== null && maxValue <= 0 ? 'error' : undefined}
-								data-testid="bucket-options-max-value"
-							/>
-						</div>
-						<div className={styles.field}>
-							<span className={styles.label}>Buckets</span>
-							<InputNumber
-								className={styles.numberInput}
-								min={1}
-								max={MAX_NUM_BUCKETS}
-								precision={0}
-								value={numBuckets}
-								onChange={handleNumBucketsChange}
-								placeholder={String(DEFAULT_NUM_BUCKETS)}
-								data-testid="bucket-options-num-buckets"
-							/>
-						</div>
-					</>
-				)}
-
-				{onClose && (
-					<Button
-						className={cx('periscope-btn', 'ghost', styles.closeBtn)}
-						icon={<ChevronUp size={16} />}
-						onClick={onClose}
-						data-testid="bucket-options-close"
-					/>
-				)}
-			</div>
-
-			<div className={styles.bounds} data-testid="bucket-options-bounds">
-				<span className={styles.label}>Bounds</span>
-				{bounds ? (
-					<>
-						{bounds.map((bound) => (
-							<span className={styles.bound} key={bound}>
-								{formatUpperBound(bound, unit)}
-							</span>
-						))}
-						{hasBoundsBeyondPreview(previewedOptions) && (
-							<span className={styles.muted}>…</span>
-						)}
-						<span className={cx(styles.bound, styles.overflowBound)}>+Inf</span>
-					</>
-				) : (
-					<span className={styles.muted}>Set a max value to see the bounds</span>
-				)}
-			</div>
-
-			<p className={styles.hint}>{BUCKET_KIND_HINTS[kind]}</p>
-		</div>
-	);
-}
-
-BucketOptions.defaultProps = {
-	bucketOptions: undefined,
-	unit: undefined,
-	onClose: undefined,
-};
-
-export default BucketOptions;

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/BucketOptions/__tests__/utils.test.ts

@@ -1,89 +0,0 @@
-import { MAX_LOG_SCALE } from '../constants';
-import {
-	bandsPerDoublingFromScale,
-	formatUpperBound,
-	hasBoundsBeyondPreview,
-	kindOptionOf,
-	linearBuckets,
-	logBuckets,
-	previewUpperBounds,
-	scaleFromBandsPerDoubling,
-} from '../utils';
-
-describe('bucket option scales', () => {
-	it.each([
-		[0, 1],
-		[1, 2],
-		[2, 4],
-		[3, 8],
-		[4, 16],
-	])('scale %i is %i bands per doubling', (scale, bands) => {
-		expect(bandsPerDoublingFromScale(scale)).toBe(bands);
-		expect(scaleFromBandsPerDoubling(bands)).toBe(scale);
-	});
-});
-
-describe('kindOptionOf', () => {
-	it('reads no options as auto', () => {
-		expect(kindOptionOf(undefined)).toBe('auto');
-	});
-
-	it('reads the kind off the options', () => {
-		expect(kindOptionOf(logBuckets(MAX_LOG_SCALE))).toBe('log');
-		expect(kindOptionOf(linearBuckets(10, null))).toBe('linear');
-	});
-});
-
-describe('previewUpperBounds', () => {
-	it('doubles at one band per doubling', () => {
-		expect(previewUpperBounds(logBuckets(0))).toStrictEqual([
-			1, 2, 4, 8, 16, 32, 64, 128,
-		]);
-	});
-
-	it('falls back to the finest log axis when no options are set', () => {
-		const bounds = previewUpperBounds(undefined);
-
-		expect(bounds).toHaveLength(8);
-		// 16 bands per doubling: the eighth bound is 2^(7/16), still short of the first doubling.
-		expect(bounds?.[7]).toBeCloseTo(2 ** (7 / 16));
-	});
-
-	it('spaces a linear axis evenly by bucket width', () => {
-		expect(previewUpperBounds(linearBuckets(100, 10))).toStrictEqual(
-			[10, 20, 30, 40, 50, 60, 70, 80, 90, 100].slice(0, 8),
-		);
-	});
-
-	it('stops at the last bucket when the axis has fewer than the preview shows', () => {
-		expect(previewUpperBounds(linearBuckets(9, 3))).toStrictEqual([3, 6, 9]);
-	});
-
-	it('has no bounds to preview for a linear axis without a usable max value', () => {
-		expect(previewUpperBounds(linearBuckets(0, null))).toBeUndefined();
-		expect(previewUpperBounds(linearBuckets(-1, null))).toBeUndefined();
-	});
-});
-
-describe('hasBoundsBeyondPreview', () => {
-	it('is always true for a log axis, which has no top', () => {
-		expect(hasBoundsBeyondPreview(logBuckets(0))).toBe(true);
-		expect(hasBoundsBeyondPreview(undefined)).toBe(true);
-	});
-
-	it('tracks whether a linear axis runs past the preview', () => {
-		expect(hasBoundsBeyondPreview(linearBuckets(100, 4))).toBe(false);
-		expect(hasBoundsBeyondPreview(linearBuckets(100, 20))).toBe(true);
-	});
-});
-
-describe('formatUpperBound', () => {
-	it('reads a bound in the panel unit when one is set', () => {
-		expect(formatUpperBound(1, 'ms')).toContain('ms');
-	});
-
-	it('keeps three significant digits when unitless', () => {
-		expect(formatUpperBound(128, undefined)).toBe('128');
-		expect(formatUpperBound(2 ** (1 / 16), undefined)).toBe('1.04');
-	});
-});

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/BucketOptions/constants.ts

@@ -1,46 +0,0 @@
-/**
- * Mirrors the limits `querybuildertypesv5` validates `bucketOptions` against. The
- * builder keeps its own copy so an out-of-range axis is refused before the request
- * rather than after it.
- */
-
-/**
- * A log axis spaces bounds at 2^scale bands per doubling. MaxLogScale is the
- * resolution ClickHouse buckets at, so it is both the finest available and what an
- * absent `bucketOptions` resolves to.
- */
-export const MAX_LOG_SCALE = 4;
-
-export const MAX_NUM_BUCKETS = 512;
-
-export const DEFAULT_NUM_BUCKETS = 60;
-
-/**
- * The bands-per-doubling the toggle offers, coarsest first. Each is 2^scale for a
- * scale in [0, MAX_LOG_SCALE]: a negative scale is a whole number of doublings per
- * band instead, which has no bands-per-doubling label.
- */
-export const LOG_BANDS_PER_DOUBLING = [1, 2, 4, 8, 16] as const;
-
-/** How many leading upper bounds the bounds strip previews before eliding. */
-export const PREVIEW_BOUND_COUNT = 8;
-
-/** The kind toggle's options. `auto` sends no options and lets the server choose. */
-export const BUCKET_KIND_OPTIONS = [
-	{ value: 'auto', label: 'Auto' },
-	{ value: 'log', label: 'Log' },
-	{ value: 'linear', label: 'Linear' },
-];
-
-export const LOG_BANDS_OPTIONS = LOG_BANDS_PER_DOUBLING.map((bands) => ({
-	value: String(bands),
-	label: String(bands),
-}));
-
-export const BUCKET_KIND_HINTS = {
-	auto:
-		'Bounds are picked for you: a log axis at 16 bands per doubling, the finest the query can return.',
-	log: 'Bounds are spaced evenly on a log axis, so every band is the same height on screen and the tail stays readable. Fewer bands per doubling means fewer, coarser bands.',
-	linear:
-		'Bounds are spaced evenly from 0 up to the max value, so a band covers the same width wherever it sits. Everything above the max value lands in a single overflow band.',
-};

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/BucketOptions/utils.ts

@@ -1,130 +0,0 @@
-import {
-	Querybuildertypesv5BucketOptionsDTO,
-	Querybuildertypesv5BucketOptionsLinearDTO,
-	Querybuildertypesv5BucketOptionsLinearDTOKind,
-	Querybuildertypesv5BucketOptionsLogDTO,
-	Querybuildertypesv5BucketOptionsLogDTOKind,
-} from 'api/generated/services/sigNoz.schemas';
-import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
-
-import {
-	DEFAULT_NUM_BUCKETS,
-	MAX_LOG_SCALE,
-	PREVIEW_BOUND_COUNT,
-} from './constants';
-
-/**
- * The toggle's own vocabulary: the two kinds the request takes, plus `auto` for
- * sending no options at all and letting the server pick the axis.
- */
-export type BucketKindOption = 'auto' | 'log' | 'linear';
-
-export const isLinearBuckets = (
-	bucketOptions: Querybuildertypesv5BucketOptionsDTO,
-): bucketOptions is Querybuildertypesv5BucketOptionsLinearDTO =>
-	bucketOptions.kind === Querybuildertypesv5BucketOptionsLinearDTOKind.linear;
-
-export const linearBuckets = (
-	maxValue: number,
-	numBuckets: number | null,
-): Querybuildertypesv5BucketOptionsLinearDTO => ({
-	kind: Querybuildertypesv5BucketOptionsLinearDTOKind.linear,
-	spec: { maxValue, ...(numBuckets ? { numBuckets } : {}) },
-});
-
-export const logBuckets = (
-	scale: number,
-): Querybuildertypesv5BucketOptionsLogDTO => ({
-	kind: Querybuildertypesv5BucketOptionsLogDTOKind.log,
-	spec: { scale },
-});
-
-/**
- * The log spec's scale, defaulted the way the server defaults it. A linear axis has
- * no scale, so it reads as the default too.
- */
-export const logScaleOf = (
-	bucketOptions: Querybuildertypesv5BucketOptionsDTO | undefined,
-): number =>
-	bucketOptions && !isLinearBuckets(bucketOptions)
-		? (bucketOptions.spec.scale ?? MAX_LOG_SCALE)
-		: MAX_LOG_SCALE;
-
-export const bandsPerDoublingFromScale = (scale: number): number => 2 ** scale;
-
-export const scaleFromBandsPerDoubling = (bands: number): number =>
-	Math.round(Math.log2(bands));
-
-export const kindOptionOf = (
-	bucketOptions: Querybuildertypesv5BucketOptionsDTO | undefined,
-): BucketKindOption => {
-	if (!bucketOptions) {
-		return 'auto';
-	}
-
-	return isLinearBuckets(bucketOptions) ? 'linear' : 'log';
-};
-
-/**
- * The leading upper bounds the axis will carry. A log axis is anchored at 1 — band
- * index 0's boundary — and a linear one at the top of its first band; both continue
- * past what the strip shows, and everything above the last one lands in the overflow
- * band the UI labels separately.
- *
- * `undefined` for a linear axis with no max value yet: without a top there is nothing
- * to divide.
- */
-export function previewUpperBounds(
-	bucketOptions: Querybuildertypesv5BucketOptionsDTO | undefined,
-): number[] | undefined {
-	if (bucketOptions && isLinearBuckets(bucketOptions)) {
-		const { maxValue, numBuckets = DEFAULT_NUM_BUCKETS } = bucketOptions.spec;
-
-		if (!Number.isFinite(maxValue) || maxValue <= 0 || numBuckets <= 0) {
-			return undefined;
-		}
-
-		const width = maxValue / numBuckets;
-
-		return Array.from(
-			{ length: Math.min(numBuckets, PREVIEW_BOUND_COUNT) },
-			(_, index) => (index + 1) * width,
-		);
-	}
-
-	const bands = bandsPerDoublingFromScale(logScaleOf(bucketOptions));
-
-	return Array.from(
-		{ length: PREVIEW_BOUND_COUNT },
-		(_, index) => 2 ** (index / bands),
-	);
-}
-
-/**
- * Whether the strip elides bounds after the ones it shows. A linear axis with no more
- * buckets than the strip holds ends where the strip does.
- */
-export function hasBoundsBeyondPreview(
-	bucketOptions: Querybuildertypesv5BucketOptionsDTO | undefined,
-): boolean {
-	if (!bucketOptions || !isLinearBuckets(bucketOptions)) {
-		return true;
-	}
-
-	return (
-		(bucketOptions.spec.numBuckets ?? DEFAULT_NUM_BUCKETS) > PREVIEW_BOUND_COUNT
-	);
-}
-
-/**
- * A bound is a value on the panel's own axis, so it reads in the panel's unit when one
- * is set. Unitless, three significant digits keep the tightly spaced bounds of a fine
- * log axis distinguishable without printing the float in full.
- */
-export function formatUpperBound(bound: number, unit?: string): string {
-	if (unit) {
-		return getYAxisFormattedValue(String(bound), unit);
-	}
-
-	return Number(bound.toPrecision(3)).toString();
-}

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

@@ -3,21 +3,14 @@ import { Button, Tooltip } from 'antd';
 import cx from 'classnames';
 import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
-import { ATTRIBUTE_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { GroupByFilter } from 'container/QueryBuilder/filters/GroupByFilter/GroupByFilter';
 import { OrderByFilter } from 'container/QueryBuilder/filters/OrderByFilter/OrderByFilter';
 import { ReduceToFilter } from 'container/QueryBuilder/filters/ReduceToFilter/ReduceToFilter';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
 import { get, isEmpty } from 'lodash-es';
-import {
-	BarChart,
-	ChevronUp,
-	ExternalLink,
-	Grid3X3,
-	ScrollText,
-} from '@signozhq/icons';
-import { Querybuildertypesv5BucketOptionsDTO } from 'api/generated/services/sigNoz.schemas';
+import { BarChart, ChevronUp, ExternalLink, ScrollText } from '@signozhq/icons';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { MetricAggregation } from 'types/api/v5/queryRange';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
@@ -32,7 +25,6 @@ import {
 	resolveQueryBuilderFields,
 } from '../../queryBuilderFields.utils';
 
-import BucketOptions from './BucketOptions/BucketOptions';
 import HavingFilter from './HavingFilter/HavingFilter';
 import { buildDefaultLegendFromGroupBy } from './utils';
 
@@ -65,7 +57,6 @@ const ADD_ONS_KEYS_TO_QUERY_PATH: Omit<
 	[QueryBuilderField.Limit]: 'limit',
 	[QueryBuilderField.Legend]: 'legend',
 	[QueryBuilderField.ReduceTo]: 'reduceTo',
-	[QueryBuilderField.BucketOptions]: 'bucketOptions',
 };
 
 const ADD_ONS: AddOn[] = [
@@ -125,22 +116,6 @@ const REDUCE_TO: AddOn = {
 		'https://signoz.io/docs/userguide/query-builder-v5/#result-manipulation',
 };
 
-// Offered only by a heatmap over metrics: the bucket axis is what a heatmap plots
-// against, and no other panel type sends one. A histogram brings its own buckets.
-const HISTOGRAM_ATTRIBUTE_TYPES = new Set<string>([
-	ATTRIBUTE_TYPES.HISTOGRAM,
-	ATTRIBUTE_TYPES.EXPONENTIAL_HISTOGRAM,
-]);
-
-const BUCKET_OPTIONS: AddOn = {
-	icon: <Grid3X3 size={14} />,
-	label: 'Bucket by',
-	key: QueryBuilderField.BucketOptions,
-	description:
-		'Choose how the bucket axis is spaced — logarithmically, so every band is the same height and the tail stays readable, or linearly up to a max value. Left to Auto, the query picks the finest log axis it can return.',
-	docLink: 'https://signoz.io/docs/userguide/query-builder-v5/',
-};
-
 const hasValue = (value: unknown): boolean =>
 	value != null && value !== '' && !(Array.isArray(value) && value.length === 0);
 
@@ -221,7 +196,7 @@ function QueryAddOns({
 		isForTraceOperator,
 	});
 
-	const { handleSetQueryData, currentQuery } = useQueryBuilder();
+	const { handleSetQueryData } = useQueryBuilder();
 
 	const supportedAddOns = useMemo((): AddOn[] => {
 		let addOns: AddOn[];
@@ -235,25 +210,8 @@ function QueryAddOns({
 			addOns = [...ADD_ONS];
 		}
 
-		if (showReduceTo) {
-			addOns = [...addOns, REDUCE_TO];
-		}
-
-		if (
-			panelType === PANEL_TYPES.HEATMAP &&
-			query.dataSource === DataSource.METRICS &&
-			!HISTOGRAM_ATTRIBUTE_TYPES.has(query.aggregateAttribute?.type ?? '')
-		) {
-			addOns = [...addOns, BUCKET_OPTIONS];
-		}
-
-		return addOns;
-	}, [
-		panelType,
-		query.dataSource,
-		query.aggregateAttribute?.type,
-		showReduceTo,
-	]);
+		return showReduceTo ? [...addOns, REDUCE_TO] : addOns;
+	}, [panelType, query.dataSource, showReduceTo]);
 
 	const resolvedFields = useMemo(
 		() =>
@@ -434,13 +392,6 @@ function QueryAddOns({
 		[handleChangeQueryData],
 	);
 
-	const handleChangeBucketOptions = useCallback(
-		(value: Querybuildertypesv5BucketOptionsDTO | undefined) => {
-			handleChangeQueryData('bucketOptions', value);
-		},
-		[handleChangeQueryData],
-	);
-
 	return (
 		<div className="query-add-ons" data-testid="query-add-ons">
 			{selectedViews.length > 0 && (
@@ -608,19 +559,6 @@ function QueryAddOns({
 							/>
 						</div>
 					)}
-
-					{selectedViews.find(
-						(view) => view.key === QueryBuilderField.BucketOptions,
-					) && (
-						<div className="add-on-content" data-testid="bucket-options-content">
-							<BucketOptions
-								bucketOptions={query.bucketOptions}
-								unit={currentQuery.unit}
-								onChange={handleChangeBucketOptions}
-								onClose={(): void => handleRemoveView(QueryBuilderField.BucketOptions)}
-							/>
-						</div>
-					)}
 				</div>
 			)}
 

frontend/src/components/QueryBuilderV2/__tests__/QueryAddOns.test.tsx

@@ -1,4 +1,4 @@
-import { ATTRIBUTE_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import {
 	fireEvent,
 	render,
@@ -26,10 +26,8 @@ jest.mock('hooks/queryBuilder/useQueryBuilderOperations', () => ({
 jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
 	useQueryBuilder: (): {
 		handleSetQueryData: typeof mockHandleSetQueryData;
-		currentQuery: { unit: string | undefined };
 	} => ({
 		handleSetQueryData: mockHandleSetQueryData,
-		currentQuery: { unit: undefined },
 	}),
 }));
 
@@ -332,158 +330,4 @@ describe('QueryAddOns', () => {
 			expect.anything(),
 		);
 	});
-	describe('bucket options', () => {
-		function renderHeatmap(overrides: Partial<any> = {}): void {
-			render(
-				<QueryAddOns
-					query={baseQuery({ dataSource: DataSource.METRICS, ...overrides })}
-					version="v5"
-					isRawQuery={false}
-					showReduceTo={false}
-					panelType={PANEL_TYPES.HEATMAP}
-					index={0}
-					isForTraceOperator={false}
-				/>,
-			);
-		}
-
-		it('is offered on a metrics heatmap only', () => {
-			renderHeatmap();
-
-			expect(
-				screen.getByTestId('query-add-on-bucket_options'),
-			).toBeInTheDocument();
-		});
-
-		it('is not offered on other panel types', () => {
-			render(
-				<QueryAddOns
-					query={baseQuery({ dataSource: DataSource.METRICS })}
-					version="v5"
-					isRawQuery={false}
-					showReduceTo={false}
-					panelType={PANEL_TYPES.TIME_SERIES}
-					index={0}
-					isForTraceOperator={false}
-				/>,
-			);
-
-			expect(
-				screen.queryByTestId('query-add-on-bucket_options'),
-			).not.toBeInTheDocument();
-		});
-
-		it('is not offered on a heatmap over another signal', () => {
-			render(
-				<QueryAddOns
-					query={baseQuery({ dataSource: DataSource.LOGS })}
-					version="v5"
-					isRawQuery={false}
-					showReduceTo={false}
-					panelType={PANEL_TYPES.HEATMAP}
-					index={0}
-					isForTraceOperator={false}
-				/>,
-			);
-
-			expect(
-				screen.queryByTestId('query-add-on-bucket_options'),
-			).not.toBeInTheDocument();
-		});
-
-		it.each([ATTRIBUTE_TYPES.HISTOGRAM, ATTRIBUTE_TYPES.EXPONENTIAL_HISTOGRAM])(
-			'is not offered for a %s metric, which carries its own buckets',
-			(type) => {
-				renderHeatmap({
-					aggregateAttribute: { key: 'http_duration_bucket', type },
-				});
-
-				expect(
-					screen.queryByTestId('query-add-on-bucket_options'),
-				).not.toBeInTheDocument();
-			},
-		);
-
-		it("auto-opens on the query's own kind", () => {
-			renderHeatmap({ bucketOptions: { kind: 'log', spec: { scale: 0 } } });
-
-			expect(screen.getByTestId('bucket-options-content')).toBeInTheDocument();
-			expect(screen.getByRole('radio', { name: 'Log' })).toBeChecked();
-			expect(screen.getByRole('radio', { name: '1' })).toBeChecked();
-		});
-
-		it('sends no options for Auto', async () => {
-			const user = userEvent.setup();
-			renderHeatmap({ bucketOptions: { kind: 'log', spec: { scale: 0 } } });
-
-			await user.click(screen.getByRole('radio', { name: 'Auto' }));
-
-			expect(mockHandleChangeQueryData).toHaveBeenCalledWith(
-				'bucketOptions',
-				undefined,
-			);
-		});
-
-		it('sends the scale the picked bands per doubling resolve to', async () => {
-			const user = userEvent.setup();
-			renderHeatmap({ bucketOptions: { kind: 'log', spec: { scale: 4 } } });
-
-			await user.click(screen.getByRole('radio', { name: '1' }));
-
-			expect(mockHandleChangeQueryData).toHaveBeenCalledWith('bucketOptions', {
-				kind: 'log',
-				spec: { scale: 0 },
-			});
-		});
-
-		it('previews the bounds the picked axis will carry', () => {
-			renderHeatmap({ bucketOptions: { kind: 'log', spec: { scale: 0 } } });
-
-			const bounds = within(screen.getByTestId('bucket-options-bounds'));
-			['1', '2', '4', '8', '16', '32', '64', '128', '+Inf'].forEach((bound) => {
-				expect(bounds.getByText(bound)).toBeInTheDocument();
-			});
-		});
-
-		it('sends nothing for a linear axis until it has a max value', async () => {
-			const user = userEvent.setup();
-			renderHeatmap({ bucketOptions: { kind: 'log', spec: { scale: 0 } } });
-
-			await user.click(screen.getByRole('radio', { name: 'Linear' }));
-
-			expect(mockHandleChangeQueryData).toHaveBeenLastCalledWith(
-				'bucketOptions',
-				undefined,
-			);
-			expect(
-				screen.getByText('Set a max value to see the bounds'),
-			).toBeInTheDocument();
-		});
-
-		it('sends the linear axis once a max value is filled in', async () => {
-			const user = userEvent.setup();
-			renderHeatmap({ bucketOptions: { kind: 'log', spec: { scale: 0 } } });
-
-			await user.click(screen.getByRole('radio', { name: 'Linear' }));
-			await user.type(screen.getByTestId('bucket-options-max-value'), '500');
-
-			await waitFor(() => {
-				expect(mockHandleChangeQueryData).toHaveBeenLastCalledWith(
-					'bucketOptions',
-					{ kind: 'linear', spec: { maxValue: 500 } },
-				);
-			});
-		});
-
-		it('closes back to the toggle bar', async () => {
-			const user = userEvent.setup();
-			renderHeatmap({ bucketOptions: { kind: 'log', spec: { scale: 0 } } });
-
-			await user.click(screen.getByTestId('bucket-options-close'));
-
-			expect(
-				screen.queryByTestId('bucket-options-content'),
-			).not.toBeInTheDocument();
-		});
-	});
 });

frontend/src/components/QueryBuilderV2/queryBuilderFields.types.ts

@@ -16,7 +16,6 @@ export enum QueryBuilderField {
 	Limit = 'limit',
 	Legend = 'legend_format',
 	ReduceTo = 'reduce_to',
-	BucketOptions = 'bucket_options',
 	// Builder level
 	Formula = 'formula',
 	AdditionalQueries = 'additional_queries',

frontend/src/components/QueryBuilderV2/queryBuilderFields.utils.ts

@@ -76,7 +76,6 @@ export const RAW_QUERY_FIELDS: Omit<
 	[QueryBuilderField.Limit]: { state: 'hidden' },
 	[QueryBuilderField.Legend]: { state: 'hidden' },
 	[QueryBuilderField.ReduceTo]: { state: 'hidden' },
-	[QueryBuilderField.BucketOptions]: { state: 'hidden' },
 	[QueryBuilderField.Formula]: { state: 'hidden' },
 	[QueryBuilderField.OrderBy]: { state: 'pinned' },
 };

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

@@ -15,7 +15,7 @@ import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import CheckboxFilterHeader from './CheckboxFilterHeader';
 import CheckboxValueRow from './CheckboxValueRow';
 import LogsQuickFilterEmptyState from './LogsQuickFilterEmptyState';
-import useActiveQueryIndex from './useActiveQueryIndex';
+import useActiveQueryIndex from 'components/QuickFilters/hooks/useActiveQueryIndex';
 import useCheckboxDisclosure from './useCheckboxDisclosure';
 import useCheckboxFilterActions from './useCheckboxFilterActions';
 import useCheckboxFilterState from './useCheckboxFilterState';

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2.testUtils.tsx

@@ -56,6 +56,57 @@ export function mockFieldsValuesAPI(response: {
 	);
 }
 
+/**
+ * Records every request the AI observability values endpoint receives, so a test
+ * can assert both the routing and the query params it was called with.
+ */
+export function mockAIObservabilityFieldsValuesAPI(response: {
+	relatedValues?: (string | null)[];
+	stringValues?: (string | null)[];
+	numberValues?: (number | null)[];
+}): { requests: URLSearchParams[] } {
+	const requests: URLSearchParams[] = [];
+
+	server.use(
+		rest.get(
+			'http://localhost/api/v1/ai_observability/fields/values',
+			(req, res, ctx) => {
+				requests.push(req.url.searchParams);
+
+				return res(
+					ctx.status(200),
+					ctx.json({
+						status: 'success',
+						data: {
+							values: {
+								relatedValues: response.relatedValues ?? [],
+								stringValues: response.stringValues ?? [],
+								numberValues: response.numberValues ?? [],
+							},
+						},
+					}),
+				);
+			},
+		),
+	);
+
+	return { requests };
+}
+
+/** Fails the test if the signal-wide values endpoint is hit at all. */
+export function forbidFieldsValuesAPI(): { called: boolean } {
+	const state = { called: false };
+
+	server.use(
+		rest.get('http://localhost/api/v1/fields/values', (_, res, ctx) => {
+			state.called = true;
+			return res(ctx.status(200), ctx.json({ status: 'success', data: {} }));
+		}),
+	);
+
+	return state;
+}
+
 export function mockFieldsValuesAPILoading(): void {
 	server.use(
 		rest.get('http://localhost/api/v1/fields/values', (_, res, ctx) =>

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2.tsx

@@ -16,7 +16,7 @@ import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import { NON_SELECTED_OPERATORS } from '../checkboxFilterQuery';
-import useActiveQueryIndex from '../useActiveQueryIndex';
+import useActiveQueryIndex from 'components/QuickFilters/hooks/useActiveQueryIndex';
 import useCheckboxDisclosure from '../useCheckboxDisclosure';
 import useCheckboxFilterActions from '../useCheckboxFilterActions';
 import useCheckboxFilterState from '../useCheckboxFilterState';

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2.aiObservability.test.tsx

@@ -0,0 +1,81 @@
+import { screen, waitFor } from '@testing-library/react';
+import { render } from 'tests/test-utils';
+
+import { QuickFiltersSource } from '../../../../types';
+
+import CheckboxFilterV2 from '../CheckboxFilterV2';
+import {
+	DEFAULT_FILTER,
+	DEFAULT_USE_FIELD_APIS,
+	forbidFieldsValuesAPI,
+	mockAIObservabilityFieldsValuesAPI,
+	mockFieldsValuesAPI,
+	setupServer,
+} from '../CheckboxFilterV2.testUtils';
+
+setupServer();
+
+describe('CheckboxFilterV2 - AI observability routing', () => {
+	it('reads values from the AI observability endpoint and never the signal-wide one', async () => {
+		const aiEndpoint = mockAIObservabilityFieldsValuesAPI({
+			stringValues: ['openai', 'anthropic'],
+		});
+		const fieldsEndpoint = forbidFieldsValuesAPI();
+
+		render(
+			<CheckboxFilterV2
+				filter={DEFAULT_FILTER}
+				source={QuickFiltersSource.AI_OBSERVABILITY}
+				useFieldApis={DEFAULT_USE_FIELD_APIS}
+			/>,
+		);
+
+		await expect(screen.findByText('openai')).resolves.toBeInTheDocument();
+		expect(screen.getByText('anthropic')).toBeInTheDocument();
+		expect(fieldsEndpoint.called).toBe(false);
+		expect(aiEndpoint.requests).toHaveLength(1);
+	});
+
+	it('forwards the filter key and the time range to the AI observability endpoint', async () => {
+		const aiEndpoint = mockAIObservabilityFieldsValuesAPI({
+			stringValues: ['openai'],
+		});
+
+		render(
+			<CheckboxFilterV2
+				filter={DEFAULT_FILTER}
+				source={QuickFiltersSource.AI_OBSERVABILITY}
+				useFieldApis={DEFAULT_USE_FIELD_APIS}
+			/>,
+		);
+
+		await screen.findByText('openai');
+
+		const params = aiEndpoint.requests[0];
+		expect(params.get('name')).toBe(DEFAULT_FILTER.attributeKey.key);
+		expect(params.get('startUnixMilli')).toBe(
+			String(DEFAULT_USE_FIELD_APIS.startUnixMilli),
+		);
+		expect(params.get('endUnixMilli')).toBe(
+			String(DEFAULT_USE_FIELD_APIS.endUnixMilli),
+		);
+	});
+
+	it('keeps non-AI sources on the signal-wide endpoint', async () => {
+		mockFieldsValuesAPI({ stringValues: ['production'] });
+		const aiEndpoint = mockAIObservabilityFieldsValuesAPI({
+			stringValues: ['should-not-be-used'],
+		});
+
+		render(
+			<CheckboxFilterV2
+				filter={DEFAULT_FILTER}
+				source={QuickFiltersSource.TRACES_EXPLORER}
+				useFieldApis={DEFAULT_USE_FIELD_APIS}
+			/>,
+		);
+
+		await expect(screen.findByText('production')).resolves.toBeInTheDocument();
+		await waitFor(() => expect(aiEndpoint.requests).toHaveLength(0));
+	});
+});

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/useFieldValues.tsx

@@ -1,11 +1,12 @@
 import { useMemo } from 'react';
-import { useGetFieldsValues } from 'api/generated/services/fields';
 import { TelemetrytypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+import { FieldValuesConfig } from 'api/querySuggestions/types';
 import {
 	IQuickFiltersConfig,
 	QuickFiltersSource,
 } from 'components/QuickFilters/types';
-import { FIELD_API_CACHE_TIME } from 'constants/queryCacheTime';
+import { useFieldValuesSuggestion } from 'hooks/querySuggestions/useFieldValuesSuggestion';
+import { BuilderQueryType } from 'types/api/v5/queryRange';
 import { DATA_SOURCE_TO_SIGNAL } from 'types/common/queryBuilder';
 
 interface UseFieldValuesProps {
@@ -42,32 +43,43 @@ export function useFieldValues({
 	endUnixMilli,
 	enabled,
 }: UseFieldValuesProps): UseFieldValuesReturn {
-	const { data, isLoading, isFetching } = useGetFieldsValues(
-		{
-			signal: filter.dataSource
-				? DATA_SOURCE_TO_SIGNAL[filter.dataSource]
-				: undefined,
-			name: filter.attributeKey.key,
-			searchText,
-			existingQuery,
-			metricNamespace,
-			source: source ? QUICK_FILTERS_SOURCE_TO_SOURCE[source] : undefined,
-			startUnixMilli,
-			// This field does not affect the backend but I wanted to keep it here
-			// in case we add the support in the future
-			endUnixMilli,
-		},
-		{
-			query: {
-				enabled,
-				cacheTime: FIELD_API_CACHE_TIME,
-				keepPreviousData: true,
-			},
-		},
-	);
+	const isAIObservability = source === QuickFiltersSource.AI_OBSERVABILITY;
+
+	const builderQueryType: BuilderQueryType | undefined = isAIObservability
+		? 'builder_ai_query'
+		: undefined;
+
+	// The AI values endpoint is already gen_ai-scoped: no signal, no source.
+	const fieldValuesConfig: FieldValuesConfig = isAIObservability
+		? {
+				name: filter.attributeKey.key,
+				searchText,
+				existingQuery,
+				startUnixMilli,
+				endUnixMilli,
+			}
+		: {
+				signal: filter.dataSource
+					? DATA_SOURCE_TO_SIGNAL[filter.dataSource]
+					: undefined,
+				name: filter.attributeKey.key,
+				searchText,
+				existingQuery,
+				metricNamespace,
+				source: source ? QUICK_FILTERS_SOURCE_TO_SOURCE[source] : undefined,
+				startUnixMilli,
+				// This field does not affect the backend but I wanted to keep it here
+				// in case we add the support in the future
+				endUnixMilli,
+			};
+
+	const {
+		data: values,
+		isLoading,
+		isFetching,
+	} = useFieldValuesSuggestion(fieldValuesConfig, builderQueryType, { enabled });
 
 	const relatedValues: string[] = useMemo(() => {
-		const values = data?.data?.values;
 		if (!values) {
 			return [];
 		}
@@ -78,10 +90,9 @@ export function useFieldValues({
 					value !== null && value !== undefined && value !== '',
 			) || []
 		);
-	}, [data]);
+	}, [values]);
 
 	const allValues: string[] = useMemo(() => {
-		const values = data?.data?.values;
 		if (!values) {
 			return [];
 		}
@@ -101,7 +112,7 @@ export function useFieldValues({
 				.map((value) => value.toString()) || [];
 
 		return [...stringValues, ...numberValues, ...boolValues];
-	}, [data]);
+	}, [values]);
 
 	return { relatedValues, allValues, isLoading, isFetching };
 }

frontend/src/components/QuickFilters/FilterRenderers/Duration/Duration.tsx

@@ -1,11 +1,11 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Collapse } from 'antd';
 import { Undo2 } from '@signozhq/icons';
+import useActiveQueryIndex from 'components/QuickFilters/hooks/useActiveQueryIndex';
 import {
 	IQuickFiltersConfig,
 	QuickFiltersSource,
 } from 'components/QuickFilters/types';
-import { PANEL_TYPES } from 'constants/queryBuilder';
 import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -39,7 +39,7 @@ function Duration({
 }: {
 	filter: IQuickFiltersConfig;
 	onFilterChange?: (query: Query) => void;
-	source?: QuickFiltersSource;
+	source: QuickFiltersSource;
 }): JSX.Element {
 	const [selectedFilters, setSelectedFilters] =
 		useState<
@@ -52,26 +52,11 @@ function Duration({
 		filter.defaultOpen ? 'durationNano' : '',
 	]);
 
-	const {
-		currentQuery,
-		redirectWithQueryBuilderData,
-		lastUsedQuery,
-		panelType,
-	} = useQueryBuilder();
+	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
 
 	const compositeQuery = useGetCompositeQueryParam();
 
-	const isListView = panelType === PANEL_TYPES.LIST;
-	// In ListView mode, use index 0 for most sources; for TRACES_EXPLORER, use lastUsedQuery
-	// Otherwise use lastUsedQuery for non-ListView modes
-	const activeQueryIndex = useMemo(() => {
-		if (isListView) {
-			return source === QuickFiltersSource.TRACES_EXPLORER
-				? lastUsedQuery || 0
-				: 0;
-		}
-		return lastUsedQuery || 0;
-	}, [isListView, source, lastUsedQuery]);
+	const activeQueryIndex = useActiveQueryIndex(source);
 
 	// eslint-disable-next-line sonarjs/cognitive-complexity
 	const syncSelectedFilters = useMemo((): FilterType => {

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -35,6 +35,7 @@ import { isFunction } from 'lodash-es';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import Checkbox from './FilterRenderers/Checkbox/Checkbox';
+import useActiveQueryIndex from './hooks/useActiveQueryIndex';
 import CheckboxV2 from './FilterRenderers/Checkbox/v2/CheckboxFilterV2';
 import Duration from './FilterRenderers/Duration/Duration';
 import Slider from './FilterRenderers/Slider/Slider';
@@ -113,14 +114,13 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 	const shouldShowDropdownInListView =
 		isListView && source === QuickFiltersSource.TRACES_EXPLORER;
 
-	const activeQueryIndex = useMemo(() => {
-		if (isListView) {
-			return source === QuickFiltersSource.TRACES_EXPLORER
-				? lastUsedQuery || 0
-				: 0;
-		}
-		return lastUsedQuery || 0;
-	}, [isListView, source, lastUsedQuery]);
+	// AI observability builds a single query in the row-level views, so there is
+	// no query for the selector to switch between.
+	const isAIObservabilityRowView =
+		source === QuickFiltersSource.AI_OBSERVABILITY &&
+		(isListView || panelType === PANEL_TYPES.TRACE);
+
+	const activeQueryIndex = useActiveQueryIndex(source);
 
 	// clear all the filters for the query which is in sync with filters
 	const handleReset = (): void => {
@@ -167,9 +167,10 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 		currentQuery.builder.queryData?.[lastUsedQuery || 0]?.queryName;
 
 	// In ListView, always show the 0th query's name; otherwise use the active query's name
-	const displayedQueryName = isListView
-		? showQueryName && currentQuery.builder.queryData?.[0]?.queryName
-		: lastQueryName;
+	const displayedQueryName =
+		isListView || isAIObservabilityRowView
+			? showQueryName && currentQuery.builder.queryData?.[0]?.queryName
+			: lastQueryName;
 
 	const handleQueryChange = (value: number): void => {
 		setLastUsedQuery(value);
@@ -182,7 +183,9 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 			<Typography.Text className="text">
 				{displayedQueryName ? 'Filters for' : 'Filters'}
 			</Typography.Text>
-			{queryOptions.length > 1 && (!isListView || shouldShowDropdownInListView) ? (
+			{queryOptions.length > 1 &&
+			!isAIObservabilityRowView &&
+			(!isListView || shouldShowDropdownInListView) ? (
 				<Combobox open={open} onOpenChange={setOpen}>
 					<ComboboxTrigger
 						placeholder="Select a query"
@@ -318,6 +321,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 							return (
 								<Duration
 									key={filter.attributeKey.key}
+									source={source}
 									filter={filter}
 									onFilterChange={onFilterChange}
 								/>

frontend/src/components/QuickFilters/QuickFiltersSettings/OtherFilters.tsx

@@ -1,12 +1,14 @@
 import { useMemo } from 'react';
 import { Button, Skeleton } from 'antd';
-import { useGetFieldsKeys } from 'api/generated/services/fields';
 import { TelemetrytypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+import { FieldKeysConfig } from 'api/querySuggestions/types';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { SIGNAL_DATA_SOURCE_MAP } from 'components/QuickFilters/QuickFiltersSettings/constants';
 import { SignalType } from 'components/QuickFilters/types';
 import { buildCompositeKey } from 'container/OptionsMenu/utils';
+import { useFieldKeysSuggestion } from 'hooks/querySuggestions/useFieldKeysSuggestion';
 import {
+	BuilderQueryType,
 	FieldContext,
 	FieldDataType,
 	TelemetryFieldKey,
@@ -41,23 +43,31 @@ function OtherFilters({
 	setAddedFilters: React.Dispatch<React.SetStateAction<TelemetryFieldKey[]>>;
 }): JSX.Element {
 	const isMeterDataSource = signal === SignalType.METER_EXPLORER;
+	const isAIObservability = signal === SignalType.AI_OBSERVABILITY;
 
-	const { data, isFetching } = useGetFieldsKeys(
-		{
-			searchText: inputValue,
-			signal: signal
-				? DATA_SOURCE_TO_SIGNAL[SIGNAL_DATA_SOURCE_MAP[signal]]
-				: undefined,
-			source: isMeterDataSource ? TelemetrytypesSourceDTO.meter : undefined,
-		},
-		{ query: { enabled: !!signal } },
+	const builderQueryType: BuilderQueryType | undefined = isAIObservability
+		? 'builder_ai_query'
+		: undefined;
+
+	const fieldKeysConfig: FieldKeysConfig = isAIObservability
+		? { searchText: inputValue }
+		: {
+				searchText: inputValue,
+				signal: signal
+					? DATA_SOURCE_TO_SIGNAL[SIGNAL_DATA_SOURCE_MAP[signal]]
+					: undefined,
+				source: isMeterDataSource ? TelemetrytypesSourceDTO.meter : undefined,
+			};
+
+	const { data: fetchedKeys, isFetching } = useFieldKeysSuggestion(
+		fieldKeysConfig,
+		builderQueryType,
 	);
 
 	const otherFilters = useMemo<TelemetryFieldKey[]>(() => {
-		const rawSuggestions = Object.values(data?.data?.keys ?? {}).flat();
 		// Normalize: synthesize the composite `key` once so downstream reads (dedupe,
 		// add, render) can trust it.
-		const suggestions: TelemetryFieldKey[] = rawSuggestions.map((attr) => ({
+		const suggestions: TelemetryFieldKey[] = (fetchedKeys ?? []).map((attr) => ({
 			name: attr.name,
 			signal: attr.signal as TelemetryFieldKey['signal'],
 			fieldContext: attr.fieldContext as FieldContext,
@@ -71,7 +81,7 @@ function OtherFilters({
 			),
 		);
 		return suggestions.filter((attr) => !addedKeys.has(attr.key as string));
-	}, [data, addedFilters]);
+	}, [fetchedKeys, addedFilters]);
 
 	const handleAddFilter = (filter: TelemetryFieldKey): void => {
 		setAddedFilters((prev) => [...prev, filter]);

frontend/src/components/QuickFilters/QuickFiltersSettings/__tests__/OtherFilters.test.tsx

@@ -0,0 +1,81 @@
+import { screen, waitFor } from '@testing-library/react';
+import { ENVIRONMENT } from 'constants/env';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { render } from 'tests/test-utils';
+
+import { SignalType } from '../../types';
+import OtherFilters from '../OtherFilters';
+
+const BASE_URL = ENVIRONMENT.baseURL;
+const FIELDS_KEYS_URL = `${BASE_URL}/api/v1/fields/keys`;
+const AI_KEYS_URL = `${BASE_URL}/api/v1/ai_observability/fields/keys`;
+
+function keysResponse(name: string): Record<string, unknown> {
+	return {
+		status: 'success',
+		data: {
+			complete: true,
+			keys: {
+				[name]: [{ name, fieldContext: 'attribute', fieldDataType: 'string' }],
+			},
+		},
+	};
+}
+
+describe('OtherFilters - AI observability keys', () => {
+	let fieldsKeysCalled: boolean;
+	let aiKeysParams: URLSearchParams | undefined;
+
+	beforeEach(() => {
+		fieldsKeysCalled = false;
+		aiKeysParams = undefined;
+
+		server.use(
+			rest.get(FIELDS_KEYS_URL, (_, res, ctx) => {
+				fieldsKeysCalled = true;
+				return res(ctx.status(200), ctx.json(keysResponse('http.route')));
+			}),
+			rest.get(AI_KEYS_URL, (req, res, ctx) => {
+				aiKeysParams = req.url.searchParams;
+				return res(ctx.status(200), ctx.json(keysResponse('gen_ai.request.model')));
+			}),
+		);
+	});
+
+	function renderOtherFilters(signal: SignalType): void {
+		render(
+			<OtherFilters
+				signal={signal}
+				inputValue=""
+				addedFilters={[]}
+				setAddedFilters={jest.fn()}
+			/>,
+		);
+	}
+
+	it('reads AI observability keys from their own endpoint', async () => {
+		renderOtherFilters(SignalType.AI_OBSERVABILITY);
+
+		await expect(
+			screen.findByText('gen_ai.request.model'),
+		).resolves.toBeInTheDocument();
+		expect(fieldsKeysCalled).toBe(false);
+	});
+
+	it('does not narrow the AI keys by fieldContext', async () => {
+		renderOtherFilters(SignalType.AI_OBSERVABILITY);
+
+		// A `trace` context would return only the computed per-trace aggregates,
+		// which cannot be filtered on.
+		await waitFor(() => expect(aiKeysParams).toBeDefined());
+		expect(aiKeysParams?.get('fieldContext')).toBeNull();
+	});
+
+	it('keeps other signals on the signal-wide keys endpoint', async () => {
+		renderOtherFilters(SignalType.TRACES);
+
+		await expect(screen.findByText('http.route')).resolves.toBeInTheDocument();
+		await waitFor(() => expect(aiKeysParams).toBeUndefined());
+	});
+});

frontend/src/components/QuickFilters/QuickFiltersSettings/constants.ts

@@ -7,4 +7,5 @@ export const SIGNAL_DATA_SOURCE_MAP = {
 	[SignalType.EXCEPTIONS]: DataSource.TRACES,
 	[SignalType.API_MONITORING]: DataSource.TRACES,
 	[SignalType.METER_EXPLORER]: DataSource.METRICS,
+	[SignalType.AI_OBSERVABILITY]: DataSource.TRACES,
 };

frontend/src/components/QuickFilters/hooks/__tests__/useActiveQueryIndex.test.ts

@@ -0,0 +1,81 @@
+import { renderHook } from '@testing-library/react';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+
+import { QuickFiltersSource } from '../../types';
+import useActiveQueryIndex from '../useActiveQueryIndex';
+
+jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
+	useQueryBuilder: jest.fn(),
+}));
+
+const LAST_USED_QUERY = 2;
+
+function mockQueryBuilder(panelType: PANEL_TYPES): void {
+	(useQueryBuilder as jest.Mock).mockReturnValue({
+		lastUsedQuery: LAST_USED_QUERY,
+		panelType,
+	});
+}
+
+describe('useActiveQueryIndex', () => {
+	describe('AI observability builds a single query in the row-level views', () => {
+		it.each([PANEL_TYPES.LIST, PANEL_TYPES.TRACE])(
+			'drives the first query in %s',
+			(panelType) => {
+				mockQueryBuilder(panelType);
+
+				const { result } = renderHook(() =>
+					useActiveQueryIndex(QuickFiltersSource.AI_OBSERVABILITY),
+				);
+
+				expect(result.current).toBe(0);
+			},
+		);
+
+		it.each([PANEL_TYPES.TIME_SERIES, PANEL_TYPES.TABLE])(
+			'follows the last used query in %s',
+			(panelType) => {
+				mockQueryBuilder(panelType);
+
+				const { result } = renderHook(() =>
+					useActiveQueryIndex(QuickFiltersSource.AI_OBSERVABILITY),
+				);
+
+				expect(result.current).toBe(LAST_USED_QUERY);
+			},
+		);
+	});
+
+	describe('other sources are unchanged', () => {
+		it('lets the traces explorer track the last used query in list view', () => {
+			mockQueryBuilder(PANEL_TYPES.LIST);
+
+			const { result } = renderHook(() =>
+				useActiveQueryIndex(QuickFiltersSource.TRACES_EXPLORER),
+			);
+
+			expect(result.current).toBe(LAST_USED_QUERY);
+		});
+
+		it('pins single-query sources to the first query in list view', () => {
+			mockQueryBuilder(PANEL_TYPES.LIST);
+
+			const { result } = renderHook(() =>
+				useActiveQueryIndex(QuickFiltersSource.INFRA_MONITORING),
+			);
+
+			expect(result.current).toBe(0);
+		});
+
+		it('tracks the last used query outside list view', () => {
+			mockQueryBuilder(PANEL_TYPES.TIME_SERIES);
+
+			const { result } = renderHook(() =>
+				useActiveQueryIndex(QuickFiltersSource.LOGS_EXPLORER),
+			);
+
+			expect(result.current).toBe(LAST_USED_QUERY);
+		});
+	});
+});

frontend/src/components/QuickFilters/hooks/useActiveQueryIndex.ts

@@ -15,13 +15,21 @@ function useActiveQueryIndex(source: QuickFiltersSource): number {
 	const isListView = panelType === PANEL_TYPES.LIST;
 
 	return useMemo(() => {
+		// AI observability builds a single query in the row-level views, so its
+		// filters always drive the first one there.
+		if (source === QuickFiltersSource.AI_OBSERVABILITY) {
+			return isListView || panelType === PANEL_TYPES.TRACE
+				? 0
+				: lastUsedQuery || 0;
+		}
+
 		if (isListView) {
 			return source === QuickFiltersSource.TRACES_EXPLORER
 				? lastUsedQuery || 0
 				: 0;
 		}
 		return lastUsedQuery || 0;
-	}, [isListView, source, lastUsedQuery]);
+	}, [isListView, panelType, source, lastUsedQuery]);
 }
 
 export default useActiveQueryIndex;

frontend/src/components/QuickFilters/types.ts

@@ -24,6 +24,7 @@ export enum SignalType {
 	API_MONITORING = 'api_monitoring',
 	EXCEPTIONS = 'exceptions',
 	METER_EXPLORER = 'meter',
+	AI_OBSERVABILITY = 'ai_observability',
 }
 
 /**
@@ -69,6 +70,7 @@ export enum QuickFiltersSource {
 	API_MONITORING = 'api-monitoring',
 	EXCEPTIONS = 'exceptions',
 	METER_EXPLORER = 'meter',
+	AI_OBSERVABILITY = 'ai-observability',
 }
 
 /**

frontend/src/constants/panelTypes.ts

@@ -31,8 +31,6 @@ export const getComponentForPanelType = (
 		[PANEL_TYPES.BAR]: Uplot,
 		[PANEL_TYPES.PIE]: null,
 		[PANEL_TYPES.HISTOGRAM]: Uplot,
-		// V2-only kind; it renders through the V2 panel registry.
-		[PANEL_TYPES.HEATMAP]: null,
 		// Dashboards v2 renders this kind; nothing reaches the V1 chart map for it.
 		[PANEL_TYPES.TEXT]: null,
 		[PANEL_TYPES.EMPTY_WIDGET]: null,

frontend/src/constants/queryBuilder.ts

@@ -338,7 +338,6 @@ export enum PANEL_TYPES {
 	BAR = 'bar',
 	PIE = 'pie',
 	HISTOGRAM = 'histogram',
-	HEATMAP = 'heatmap',
 	TEXT = 'text',
 	EMPTY_WIDGET = 'EMPTY_WIDGET',
 }

frontend/src/constants/queryBuilderOperators.ts

@@ -527,21 +527,6 @@ export const metricsHistogramSpaceAggregateOperatorOptions: SelectOption<
 	},
 ];
 
-/**
- * A heatmap's Y axis is the `le` labels themselves, so every percentile draws the grid a
- * count already draws. Sum is also what the statement builder forces on a histogram
- * heatmap whatever is asked for, so it is the only honest option to offer.
- */
-export const metricsHeatmapHistogramSpaceAggregateOperatorOptions: SelectOption<
-	string,
-	string
->[] = [
-	{
-		value: MetricAggregateOperator.COUNT,
-		label: 'Count',
-	},
-];
-
 export const metricsEmptyTimeAggregateOperatorOptions: SelectOption<
 	string,
 	string

frontend/src/constants/reactQueryKeys.ts

@@ -109,6 +109,9 @@ export const REACT_QUERY_KEY = {
 	// Field Keys Suggestion Query Keys
 	FIELD_KEYS_SUGGESTION: 'FIELD_KEYS_SUGGESTION',
 
+	// Field Values Suggestion Query Keys
+	FIELD_VALUES_SUGGESTION: 'FIELD_VALUES_SUGGESTION',
+
 	// AI Assistant Query Keys
 	AI_ASSISTANT_EMPTY_STATE_CHIPS: 'AI_ASSISTANT_EMPTY_STATE_CHIPS',
 } as const;

frontend/src/constants/routes.ts

@@ -38,7 +38,6 @@ const ROUTES = {
 	NOT_FOUND: '/not-found',
 	LOGS_BASE: '/logs',
 	LOGS: '/logs/logs-explorer',
-	OLD_LOGS_EXPLORER: '/logs/old-logs-explorer',
 	LOGS_EXPLORER: '/logs/logs-explorer',
 	LIVE_LOGS: '/logs/logs-explorer/live',
 	LOGS_PIPELINES: '/logs/pipelines',

frontend/src/container/CreateAlertV2/Footer/__tests__/utils.test.ts

@@ -467,7 +467,6 @@ describe('Footer utils', () => {
 											timeAggregation: 'avg',
 										},
 									],
-									bucketOptions: undefined,
 									disabled: false,
 									filter: {
 										expression: '',

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

@@ -8,18 +8,13 @@ import cx from 'classnames';
 import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
 import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
+import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
-import { AVAILABLE_EXPORT_PANEL_TYPES } from 'constants/panelTypes';
-import { initialQueryAIWithType, PANEL_TYPES } from 'constants/queryBuilder';
+import { initialQueryAIWithType } from 'constants/queryBuilder';
 import { usePageActions } from 'container/AIAssistant/pageActions/usePageActions';
-import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
-import { useOptionsMenu } from 'container/OptionsMenu';
-import LeftToolbarActions from 'container/QueryBuilder/components/ToolbarActions/LeftToolbarActions';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import Toolbar from 'container/Toolbar/Toolbar';
-import { ExportDashboard } from 'hooks/dashboard/useExportDashboards';
-import { useGetExportToDashboardLink } from 'hooks/dashboard/useGetExportToDashboardLink';
 import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
@@ -28,7 +23,6 @@ import {
 	useHandleExplorerTabChange,
 } from 'hooks/useHandleExplorerTabChange';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { isEmpty } from 'lodash-es';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import { ExplorerViews } from 'pages/LogsExplorer/utils';
@@ -37,7 +31,7 @@ import {
 	tracesChangeViewAction,
 	tracesRunQueryAction,
 	tracesSaveViewAction,
-} from 'pages/TracesExplorer/aiActions';
+} from './aiActions';
 import { Warning } from 'types/api';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
@@ -45,12 +39,10 @@ import {
 	explorerViewToPanelType,
 	getExplorerViewFromUrl,
 } from 'utils/explorerUtils';
-import { v4 } from 'uuid';
 
-import { TOOLBAR_VIEWS } from './constants';
-import { getExportQueryData, getQueryByPanelType } from './explorerUtils';
+import LeftToolbarActions from '../ToolbarActions/LeftToolbarActions';
+import { DEFAULT_PANEL_TYPE, TOOLBAR_VIEWS } from './constants';
 import ListView from './ListView/ListView';
-import { defaultSelectedColumns } from './ListView/configs';
 import QuerySection from './QuerySection/QuerySection';
 import TableView from './TableView/TableView';
 import TimeSeriesView from './TimeSeriesView/TimeSeriesView';
@@ -60,7 +52,6 @@ import './Explorer.styles.scss';
 
 function Explorer(): JSX.Element {
 	const {
-		panelType,
 		updateAllQueriesOperators,
 		handleRunQuery,
 		stagedQuery,
@@ -72,20 +63,12 @@ function Explorer(): JSX.Element {
 
 	const isAIAssistantEnabled = useIsAIAssistantEnabled();
 
-	const { options } = useOptionsMenu({
-		dataSource: DataSource.TRACES,
-		aggregateOperator: 'noop',
-		initialOptions: {
-			selectColumns: defaultSelectedColumns,
-		},
-	});
-
 	const [searchParams] = useSearchParams();
 	const queryClient = useQueryClient();
 	const listQueryKeyRef = useRef<any>();
 
 	// Get panel type from URL
-	const panelTypesFromUrl = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
+	const panelTypesFromUrl = useGetPanelTypesQueryParam(DEFAULT_PANEL_TYPE);
 	const [isLoadingQueries, setIsLoadingQueries] = useState<boolean>(false);
 	const [isCancelled, setIsCancelled] = useState(false);
 
@@ -112,19 +95,24 @@ function Explorer(): JSX.Element {
 	const [warning, setWarning] = useState<Warning | undefined>();
 	const [isOpen, setOpen] = useState<boolean>(true);
 
+	const { startUnixMilli, endUnixMilli } = useSignalFieldApis();
+	// existingQuery is left unset so related values auto-extract from the current query
+	const quickFiltersFieldApis = useMemo(
+		() => ({ startUnixMilli, endUnixMilli }),
+		[startUnixMilli, endUnixMilli],
+	);
+
 	const defaultQuery = useMemo(
 		(): Query =>
 			updateAllQueriesOperators(
 				initialQueryAIWithType,
-				PANEL_TYPES.LIST,
+				DEFAULT_PANEL_TYPE,
 				DataSource.TRACES,
 			),
 		[updateAllQueriesOperators],
 	);
 
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
-	const { safeNavigate } = useSafeNavigate();
-	const getExportToDashboardLink = useGetExportToDashboardLink();
 
 	const handleChangeSelectedView = useCallback(
 		(view: ExplorerViews, querySearchParameters?: ICurrentQueryData): void => {
@@ -139,7 +127,7 @@ function Explorer(): JSX.Element {
 		},
 		[handleExplorerTabChange, handleSetConfig],
 	);
-
+	//TODO: check if we need to enable AI Assistant page actions on LLM o11y
 	// ─── AI Assistant page actions (only when license feature is on) ───────────
 	const aiActions = useMemo(
 		() =>
@@ -179,59 +167,6 @@ function Explorer(): JSX.Element {
 	usePageActions('traces-explorer', aiActions);
 	// ───────────────────────────────────────────────────────────────────────────
 
-	const exportDefaultQuery = useMemo(
-		() =>
-			getQueryByPanelType(
-				stagedQuery || initialQueryAIWithType,
-				panelType || PANEL_TYPES.LIST,
-			),
-		[stagedQuery, panelType],
-	);
-
-	const handleExport = useCallback(
-		(dashboard: ExportDashboard | null, isNewDashboard?: boolean): void => {
-			if (!dashboard || !panelType) {
-				return;
-			}
-
-			const panelTypeParam = AVAILABLE_EXPORT_PANEL_TYPES.includes(panelType)
-				? panelType
-				: PANEL_TYPES.TIME_SERIES;
-
-			const widgetId = v4();
-
-			const query = getExportQueryData(
-				exportDefaultQuery,
-				panelTypeParam,
-				options,
-			);
-
-			logEvent('Traces Explorer: Add to dashboard successful', {
-				panelType,
-				isNewDashboard,
-				dashboardName: dashboard?.title,
-			});
-
-			const dashboardEditView = getExportToDashboardLink({
-				query,
-				panelType: panelTypeParam,
-				dashboardId: dashboard.id,
-				widgetId,
-			});
-
-			if (dashboardEditView) {
-				safeNavigate(dashboardEditView);
-			}
-		},
-		[
-			exportDefaultQuery,
-			panelType,
-			safeNavigate,
-			options,
-			getExportToDashboardLink,
-		],
-	);
-
 	useShareBuilderUrl({ defaultValue: defaultQuery });
 
 	const logEventCalledRef = useRef(false);
@@ -260,8 +195,9 @@ function Explorer(): JSX.Element {
 				<Card className="filter" hidden={!isOpen}>
 					<QuickFilters
 						className="qf-traces-explorer"
-						source={QuickFiltersSource.TRACES_EXPLORER}
-						signal={SignalType.TRACES}
+						source={QuickFiltersSource.AI_OBSERVABILITY}
+						signal={SignalType.AI_OBSERVABILITY}
+						useFieldApis={quickFiltersFieldApis}
 						handleFilterVisibilityChange={(): void => {
 							setOpen(!isOpen);
 						}}
@@ -354,14 +290,6 @@ function Explorer(): JSX.Element {
 							</div>
 						)}
 					</div>
-
-					<ExplorerOptionWrapper
-						disabled={!stagedQuery}
-						query={exportDefaultQuery}
-						sourcepage={DataSource.TRACES}
-						onExport={handleExport}
-						handleChangeSelectedView={handleChangeSelectedView}
-					/>
 				</div>
 			</div>
 		</Sentry.ErrorBoundary>

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

@@ -12,25 +12,17 @@ import { QueryKey } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import logEvent from 'api/common/logEvent';
-import DownloadOptionsMenu from 'components/DownloadOptionsMenu/DownloadOptionsMenu';
 import ListViewOrderBy from 'components/OrderBy/ListViewOrderBy';
 import type { TableColumnDef } from 'components/TanStackTableView/types';
 import { ENTITY_VERSION_V5 } from 'constants/app';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import { QueryParams } from 'constants/query';
 import { initialQueryAIWithType, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { useOptionsMenu } from 'container/OptionsMenu';
 import { CustomTimeType } from 'container/TopNav/DateTimeSelectionV2/types';
-import TraceExplorerControls from 'container/TracesExplorer/Controls';
-import {
-	getTraceLink,
-	transformSpanRows,
-} from 'container/TracesExplorer/ListView/utils';
-import {
-	getFieldColumn,
-	TracesTableRow,
-} from 'container/TracesExplorer/TracesTable/getFieldColumn';
-import TracesTable from 'container/TracesExplorer/TracesTable/TracesTable';
+import { getTraceLink, transformSpanRows } from './utils';
+import { getFieldColumn, TracesTableRow } from '../TracesTable/getFieldColumn';
+import TracesTable from '../TracesTable/TracesTable';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { Pagination } from 'hooks/queryPagination';
@@ -42,6 +34,7 @@ import { Warning } from 'types/api';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
+import TraceExplorerControls from '../Controls';
 import { getListViewQuery } from '../explorerUtils';
 import {
 	defaultSelectedColumns,
@@ -79,14 +72,6 @@ function ListView({
 		loading: timeRangeUpdateLoading,
 	} = useSelector<AppState, GlobalReducer>((state) => state.globalTime);
 
-	const { options, config } = useOptionsMenu({
-		dataSource: DataSource.TRACES,
-		aggregateOperator: 'count',
-		initialOptions: {
-			selectColumns: defaultSelectedColumns,
-		},
-	});
-
 	const { queryData: paginationQueryData } = useUrlQueryData<Pagination>(
 		QueryParams.pagination,
 	);
@@ -98,19 +83,6 @@ function ListView({
 		[stagedQuery, orderBy],
 	);
 
-	// Stable sorted-name signature for the queryKey.
-	// - Drag updates selectColumns; raw queryKey would churn on reorder.
-	// - Trace API fetches only listed columns → add/remove must refetch.
-	// - Sorted-name signature: stable on reorder, changes on add/remove.
-	const selectColumnsSignature = useMemo(
-		() =>
-			(options?.selectColumns ?? [])
-				.map((c) => c.name)
-				.sort()
-				.join(','),
-		[options?.selectColumns],
-	);
-
 	const queryKey = useMemo(
 		() => [
 			REACT_QUERY_KEY.GET_QUERY_RANGE,
@@ -120,7 +92,6 @@ function ListView({
 			stagedQuery,
 			panelType,
 			paginationConfig,
-			selectColumnsSignature,
 			orderBy,
 		],
 		[
@@ -128,7 +99,6 @@ function ListView({
 			panelType,
 			globalSelectedTime,
 			paginationConfig,
-			selectColumnsSignature,
 			maxTime,
 			minTime,
 			orderBy,
@@ -150,7 +120,7 @@ function ListView({
 			},
 			tableParams: {
 				pagination: paginationConfig,
-				selectColumns: options?.selectColumns,
+				selectColumns: defaultSelectedColumns,
 			},
 		},
 		ENTITY_VERSION_V5,
@@ -158,10 +128,7 @@ function ListView({
 			queryKey,
 			enabled:
 				// don't make api call while the time range state in redux is loading
-				!timeRangeUpdateLoading &&
-				!!stagedQuery &&
-				panelType === PANEL_TYPES.LIST &&
-				!!options?.selectColumns?.length,
+				!timeRangeUpdateLoading && !!stagedQuery && panelType === PANEL_TYPES.LIST,
 		},
 	);
 
@@ -186,28 +153,20 @@ function ListView({
 		[queryTableDataResult],
 	);
 
-	const columns = useMemo<TableColumnDef<TracesTableRow>[]>(() => {
-		const fields = [
-			TIMESTAMP_FIELD,
-			...(options?.selectColumns ?? []).filter(
-				(field) => field.name !== TIMESTAMP_FIELD.name,
+	// TODO(ai-explorer): static columns until the preferences framework lands.
+	const columns = useMemo<TableColumnDef<TracesTableRow>[]>(
+		() =>
+			[TIMESTAMP_FIELD, ...defaultSelectedColumns].map((field) =>
+				getFieldColumn(field),
 			),
-		];
-		return fields.map((field) => getFieldColumn(field));
-	}, [options?.selectColumns]);
+		[],
+	);
 
 	const rows = useMemo(
 		() => transformSpanRows(queryTableData),
 		[queryTableData],
 	);
 
-	const handleColumnOrderChange = useCallback(
-		(reordered: TableColumnDef<TracesTableRow>[]): void => {
-			config?.addColumn?.onReorder(reordered.map((column) => column.id));
-		},
-		[config],
-	);
-
 	const handleOrderChange = useCallback((value: string) => {
 		setOrderBy(value);
 	}, []);
@@ -235,15 +194,9 @@ function ListView({
 					/>
 				</div>
 
-				<DownloadOptionsMenu
-					dataSource={DataSource.TRACES}
-					selectedColumns={options?.selectColumns}
-				/>
-
 				<TraceExplorerControls
 					isLoading={isFetching}
 					totalCount={rows.length}
-					config={config}
 					perPageOptions={PER_PAGE_OPTIONS}
 				/>
 			</div>
@@ -251,6 +204,8 @@ function ListView({
 			<TracesTable
 				data={rows}
 				columns={columns}
+				columnStorageKey={LOCALSTORAGE.AI_OBSERVABILITY_LIST_COLUMNS}
+				respectColumnOrder
 				panelType="LIST"
 				getRowHref={getTraceLink}
 				isLoading={isLoading}
@@ -258,8 +213,6 @@ function ListView({
 				isError={isError}
 				error={error}
 				isFilterApplied={isFilterApplied}
-				onColumnOrderChange={handleColumnOrderChange}
-				onColumnRemove={config?.addColumn?.onRemove}
 			/>
 		</div>
 	);

frontend/src/container/LLMObservability/Explorer/ListView/configs.ts

@@ -1,19 +1,41 @@
 import type { TelemetryFieldKey } from 'api/v5/v5';
 import { DEFAULT_PER_PAGE_OPTIONS } from 'hooks/queryPagination';
 
-export const defaultSelectedColumns: string[] = [
-	'service.name',
-	'name',
-	'duration_nano',
-	'http_method',
-	'response_status_code',
-	'timestamp',
-];
-
-export const PER_PAGE_OPTIONS: number[] = [10, ...DEFAULT_PER_PAGE_OPTIONS];
-
 // Pinned timestamp column
+// The list query returns timestamp, trace_id and span_id whether or not they are selected.
 export const TIMESTAMP_FIELD = {
 	name: 'timestamp',
 	fieldContext: 'span',
 } as TelemetryFieldKey;
+
+export const defaultSelectedColumns: TelemetryFieldKey[] = [
+	{
+		name: 'service.name',
+		signal: 'traces',
+		fieldContext: 'resource',
+		fieldDataType: 'string',
+	},
+	{
+		name: 'name',
+		signal: 'traces',
+		fieldContext: 'span',
+		fieldDataType: 'string',
+	},
+	{
+		name: 'duration_nano',
+		signal: 'traces',
+		fieldContext: 'span',
+	},
+	{
+		name: 'http_method',
+		signal: 'traces',
+		fieldContext: 'span',
+	},
+	{
+		name: 'response_status_code',
+		signal: 'traces',
+		fieldContext: 'span',
+	},
+];
+
+export const PER_PAGE_OPTIONS: number[] = [10, ...DEFAULT_PER_PAGE_OPTIONS];

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

@@ -1,47 +1,8 @@
-import { Link } from 'react-router-dom';
-import type { TableColumnsType as ColumnsType } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
-import { Typography } from '@signozhq/ui/typography';
-import { TelemetryFieldKey } from 'api/v5/v5';
 import type { TracesTableRow } from '../TracesTable/getFieldColumn';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import ROUTES from 'constants/routes';
-import { buildCompositeKey } from 'container/OptionsMenu/utils';
-import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
 import { formUrlParams } from 'container/TraceDetail/utils';
-import { TimestampInput } from 'hooks/useTimezoneFormatter/useTimezoneFormatter';
-import { RowData } from 'lib/query/createTableColumnsFromQuery';
-import LineClampedText from 'periscope/components/LineClampedText/LineClampedText';
-import { ILog } from 'types/api/logs/log';
 import { QueryDataV3 } from 'types/api/widgets/getQuery';
 
-export function BlockLink({
-	children,
-	to,
-	openInNewTab,
-}: {
-	children: React.ReactNode;
-	to: string;
-	openInNewTab: boolean;
-}): any {
-	// Display block to make the whole cell clickable
-	return (
-		<Link
-			to={to}
-			style={{ display: 'block' }}
-			target={openInNewTab ? '_blank' : '_self'}
-		>
-			{children}
-		</Link>
-	);
-}
-
-export const transformDataWithDate = (
-	data: QueryDataV3[],
-): Omit<ILog, 'timestamp'>[] =>
-	data[0]?.list?.map(({ data, timestamp }) => ({ ...data, date: timestamp })) ||
-	[];
-
 export const getTraceLink = (record: Record<string, unknown>): string => {
 	function readId(value: unknown): string {
 		if (typeof value === 'string' || typeof value === 'number') {
@@ -60,95 +21,6 @@ export const getTraceLink = (record: Record<string, unknown>): string => {
 	})}`;
 };
 
-export const getListColumns = (
-	selectedColumns: TelemetryFieldKey[],
-	formatTimezoneAdjustedTimestamp: (
-		input: TimestampInput,
-		format?: string,
-	) => string | number,
-): ColumnsType<RowData> => {
-	const initialColumns: ColumnsType<RowData> = [
-		{
-			dataIndex: 'date',
-			key: 'date',
-			title: 'Timestamp',
-			width: 145,
-			render: (value, item): JSX.Element => {
-				const date =
-					typeof value === 'string'
-						? formatTimezoneAdjustedTimestamp(
-								value,
-								DATE_TIME_FORMATS.ISO_DATETIME_MS,
-							)
-						: formatTimezoneAdjustedTimestamp(
-								value / 1e6,
-								DATE_TIME_FORMATS.ISO_DATETIME_MS,
-							);
-				return (
-					<BlockLink to={getTraceLink(item)} openInNewTab={false}>
-						<Typography.Text>{date}</Typography.Text>
-					</BlockLink>
-				);
-			},
-		},
-	];
-
-	const columns: ColumnsType<RowData> =
-		selectedColumns.map((props) => {
-			const name = props?.name || (props as any)?.key;
-			const fieldContext = props?.fieldContext || (props as any)?.type;
-			return {
-				title: name,
-				dataIndex: name,
-				key: buildCompositeKey(name, fieldContext),
-				width: 145,
-				render: (value, item): JSX.Element => {
-					if (value === '') {
-						return (
-							<BlockLink to={getTraceLink(item)} openInNewTab={false}>
-								<Typography data-testid={name}>N/A</Typography>
-							</BlockLink>
-						);
-					}
-
-					if (
-						name === 'httpMethod' ||
-						name === 'responseStatusCode' ||
-						name === 'response_status_code' ||
-						name === 'http_method'
-					) {
-						return (
-							<BlockLink to={getTraceLink(item)} openInNewTab={false}>
-								<Badge data-testid={name} color="sakura" variant="outline">
-									{value}
-								</Badge>
-							</BlockLink>
-						);
-					}
-
-					if (name === 'durationNano' || name === 'duration_nano') {
-						return (
-							<BlockLink to={getTraceLink(item)} openInNewTab={false}>
-								<Typography data-testid={name}>{getMs(value)}ms</Typography>
-							</BlockLink>
-						);
-					}
-
-					return (
-						<BlockLink to={getTraceLink(item)} openInNewTab={false}>
-							<Typography data-testid={name}>
-								<LineClampedText text={value} lines={3} />
-							</Typography>
-						</BlockLink>
-					);
-				},
-				responsive: ['md'],
-			};
-		}) || [];
-
-	return [...initialColumns, ...columns];
-};
-
 // Reshapes the query-range list payload into table rows. `id` mirrors span_id so
 // TanStack sees genuine row changes on orderBy toggles instead of falling back to
 // positional ids; `timestamp` is lifted from the wrapping ListItem.

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

@@ -4,8 +4,10 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
 import { DataSource } from 'types/common/queryBuilder';
 
+import { DEFAULT_PANEL_TYPE } from '../constants';
+
 function QuerySection(): JSX.Element {
-	const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
+	const panelTypes = useGetPanelTypesQueryParam(DEFAULT_PANEL_TYPE);
 
 	const isRawQuery = useMemo(
 		() => panelTypes === PANEL_TYPES.LIST || panelTypes === PANEL_TYPES.TRACE,

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

@@ -107,7 +107,7 @@ function TableView({
 						dataSource={DataSource.TRACES}
 						data={data}
 						query={stagedQuery || initialQueriesMap.traces}
-						fileName="traces-table"
+						fileName="ai-traces-table"
 					/>
 				</div>
 			)}

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

@@ -126,6 +126,7 @@ function TimeSeriesViewContainer({
 				dataSource={dataSource}
 				setWarning={setWarning}
 				allowExport
+				exportFileName="ai-traces-timeseries"
 			/>
 		</div>
 	);

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

@@ -55,6 +55,9 @@ function TracesTable({
 	const isDataAbsent =
 		!isLoading && !isFetching && !isError && data.length === 0;
 
+	// Rows can land before the field keys, and mounting then renders a partial column set.
+	const canMountTable = !isError && !isLoading && data.length !== 0;
+
 	const handleRowClick = useCallback(
 		(row: TracesTableRow): void => {
 			history.push(getRowHref(row));
@@ -83,7 +86,7 @@ function TracesTable({
 				<EmptyLogsSearch dataSource={DataSource.TRACES} panelType={panelType} />
 			)}
 
-			{!isError && data.length !== 0 && (
+			{canMountTable && (
 				<div className={styles.tableWrapper}>
 					<TanStackTable<TracesTableRow>
 						data={data}

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

@@ -0,0 +1,72 @@
+import { useState } from 'react';
+import { useColumnStore } from 'components/TanStackTableView/useColumnStore';
+import { LOCALSTORAGE } from 'constants/localStorage';
+import { render, screen, userEvent } from 'tests/test-utils';
+
+import { buildTraceViewColumns } from '../../TracesView/configs';
+import TracesTable from '../TracesTable';
+
+const STORAGE_KEY = LOCALSTORAGE.AI_OBSERVABILITY_TRACE_VIEW_COLUMNS;
+const PERSISTED_KEY = `@signoz/table-columns/${STORAGE_KEY}`;
+
+const ROWS = [{ id: 't1', trace_id: 'abc', 'service.name': 'checkout' }];
+
+const COLUMNS = buildTraceViewColumns([
+	{ name: 'trace_id' },
+	{ name: 'service.name', fieldContext: 'resource' },
+	{ name: 'start_time' },
+]);
+
+function RaceHarness(): JSX.Element {
+	const [columnsReady, setColumnsReady] = useState(false);
+
+	return (
+		<>
+			<button type="button" onClick={(): void => setColumnsReady(true)}>
+				columns-ready
+			</button>
+			<TracesTable
+				data={ROWS}
+				columns={columnsReady ? COLUMNS : []}
+				columnStorageKey={STORAGE_KEY}
+				respectColumnOrder
+				panelType="TRACE"
+				getRowHref={(): string => '/trace/abc'}
+				isLoading={!columnsReady}
+				isFetching={false}
+				isError={false}
+				error={null}
+				isFilterApplied={false}
+			/>
+		</>
+	);
+}
+
+const persistedState = (): { hiddenColumnIds: string[] } | null => {
+	const raw = localStorage.getItem(PERSISTED_KEY);
+	return raw ? (JSON.parse(raw) as { hiddenColumnIds: string[] }) : null;
+};
+
+describe('TracesTable column-init race', () => {
+	beforeEach(() => {
+		useColumnStore.setState({ tables: {} });
+		localStorage.clear();
+	});
+
+	it('does not persist empty defaults when rows land before columns', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		render(<RaceHarness />);
+
+		expect(screen.getByText(/pending_data_placeholder/i)).toBeInTheDocument();
+		expect(screen.queryByRole('table')).not.toBeInTheDocument();
+		expect(useColumnStore.getState().tables[STORAGE_KEY]).toBeUndefined();
+		expect(persistedState()).toBeNull();
+
+		await user.click(screen.getByRole('button', { name: 'columns-ready' }));
+
+		await expect(screen.findByRole('table')).resolves.toBeInTheDocument();
+		expect(screen.getByText('trace_id')).toBeInTheDocument();
+		expect(screen.queryByText('start_time')).not.toBeInTheDocument();
+		expect(persistedState()?.hiddenColumnIds).toStrictEqual(['start_time']);
+	});
+});

frontend/src/container/LLMObservability/Explorer/TracesTable/constants.ts

@@ -1,6 +1,13 @@
 // Field-name allowlists that drive signal-specific cell rendering. Both legacy
 // camelCase and snake_case variants are listed because the API has shipped both.
-export const TIMESTAMP_FIELD_NAMES = new Set(['timestamp']);
+
+// start/end/last_activity_time come from the per-trace query, unlike span timestamp.
+export const TIMESTAMP_FIELD_NAMES = new Set([
+	'timestamp',
+	'start_time',
+	'end_time',
+	'last_activity_time',
+]);
 
 export const STATUS_FIELD_NAMES = new Set([
 	'httpMethod',
@@ -13,6 +20,12 @@ export const STATUS_FIELD_NAMES = new Set([
 	'http.response.status_code',
 ]);
 
-export const DURATION_FIELD_NAMES = new Set(['durationNano', 'duration_nano']);
+// trace_/max_llm_duration_nano are trace-level durations the per-trace query computes.
+export const DURATION_FIELD_NAMES = new Set([
+	'durationNano',
+	'duration_nano',
+	'trace_duration_nano',
+	'max_llm_duration_nano',
+]);
 
 export const TRACE_ID_FIELD_NAMES = new Set(['traceID', 'trace_id']);

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

@@ -67,6 +67,7 @@ function TracesView({
 		onFieldsChange,
 		requiredFields,
 		isLoading: isColumnsLoading,
+		canPersistColumns,
 	} = useTraceViewColumns();
 
 	const {
@@ -168,9 +169,22 @@ function TracesView({
 		setOrderBy(value);
 	}, []);
 
+	// Without the full column set there is no pool to pick from, so the control is dropped.
 	const fieldsSelectorConfig = useMemo(
-		() => ({ fieldsSelector: { value: selectedFields, onFieldsChange } }),
-		[selectedFields, onFieldsChange],
+		() =>
+			canPersistColumns
+				? { fieldsSelector: { value: selectedFields, onFieldsChange } }
+				: null,
+		[canPersistColumns, selectedFields, onFieldsChange],
+	);
+
+	// Rendering the pool unfiltered would surface columns the defaults keep hidden.
+	const tableColumns = useMemo(
+		() =>
+			canPersistColumns
+				? columns
+				: columns.filter((column) => column.defaultVisibility !== false),
+		[canPersistColumns, columns],
 	);
 
 	return (
@@ -207,8 +221,12 @@ function TracesView({
 
 			<TracesTable
 				data={rows}
-				columns={columns}
-				columnStorageKey={LOCALSTORAGE.AI_OBSERVABILITY_TRACE_VIEW_COLUMNS}
+				columns={tableColumns}
+				columnStorageKey={
+					canPersistColumns
+						? LOCALSTORAGE.AI_OBSERVABILITY_TRACE_VIEW_COLUMNS
+						: undefined
+				}
 				respectColumnOrder
 				panelType="TRACE"
 				getRowHref={getTraceLink}

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

@@ -0,0 +1,190 @@
+import { ENVIRONMENT } from 'constants/env';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { render, screen, waitFor } from 'tests/test-utils';
+import {
+	TelemetrytypesFieldContextDTO,
+	TelemetrytypesFieldDataTypeDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { useColumnStore } from 'components/TanStackTableView/useColumnStore';
+import { LOCALSTORAGE } from 'constants/localStorage';
+import { initialQueryAIWithType, PANEL_TYPES } from 'constants/queryBuilder';
+
+import TracesView from '../TracesView';
+
+const STORAGE_KEY = LOCALSTORAGE.AI_OBSERVABILITY_TRACE_VIEW_COLUMNS;
+const PERSISTED_KEY = `@signoz/table-columns/${STORAGE_KEY}`;
+const QUERY_RANGE_URL = `${ENVIRONMENT.baseURL}/api/v5/query_range`;
+const FIELD_KEYS_URL = `${ENVIRONMENT.baseURL}/api/v1/ai_observability/fields/keys`;
+
+const OPTIONS_TRIGGER = 'options_menu.options';
+
+const ROWS = [
+	{
+		timestamp: '2024-07-19T08:39:58.735245Z',
+		data: {
+			'service.name': 'checkout',
+			root_span_name: 'HTTP GET',
+			trace_duration_nano: 55306000,
+			span_count: 8,
+			trace_id: '0000000000000000344ded1387b08a7e',
+		},
+	},
+];
+
+const mockRows = (): void => {
+	server.use(
+		rest.post(QUERY_RANGE_URL, (_req, res, ctx) =>
+			res(
+				ctx.status(200),
+				ctx.json({
+					data: {
+						type: 'trace',
+						data: { results: [{ queryName: 'A', rows: ROWS }] },
+					},
+				}),
+			),
+		),
+	);
+};
+
+const mockFieldKeys = (names: string[]): void => {
+	server.use(
+		rest.get(FIELD_KEYS_URL, (_req, res, ctx) =>
+			res(
+				ctx.status(200),
+				ctx.json({
+					status: 'success',
+					data: {
+						complete: true,
+						keys: Object.fromEntries(
+							names.map((name) => [
+								name,
+								[
+									{
+										name,
+										fieldContext: TelemetrytypesFieldContextDTO.trace,
+										fieldDataType: TelemetrytypesFieldDataTypeDTO.float64,
+									},
+								],
+							]),
+						),
+					},
+				}),
+			),
+		),
+	);
+};
+
+const mockFieldKeysFailure = (): void => {
+	server.use(
+		rest.get(FIELD_KEYS_URL, (_req, res, ctx) =>
+			res(ctx.status(500), ctx.json({ status: 'error' })),
+		),
+	);
+};
+
+const persistedState = (): { hiddenColumnIds: string[] } | null => {
+	const raw = localStorage.getItem(PERSISTED_KEY);
+	return raw ? (JSON.parse(raw) as { hiddenColumnIds: string[] }) : null;
+};
+
+const renderTracesView = (): ReturnType<typeof render> =>
+	render(
+		<TracesView
+			isFilterApplied={false}
+			setWarning={jest.fn()}
+			setIsLoadingQueries={jest.fn()}
+		/>,
+		{},
+		{
+			initialRoute: '/llm-observability/traces',
+			queryBuilderOverrides: {
+				panelType: PANEL_TYPES.TRACE,
+				stagedQuery: initialQueryAIWithType,
+				currentQuery: initialQueryAIWithType,
+			} as never,
+		},
+	);
+
+describe('TracesView column persistence', () => {
+	beforeEach(() => {
+		useColumnStore.setState({ tables: {} });
+		localStorage.clear();
+		mockRows();
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	// Rows are virtualised, so a mounted table stands in for "rows arrived".
+	const findTable = (): Promise<HTMLElement> => screen.findByRole('table');
+
+	it('seeds the persisted defaults once the field keys arrive', async () => {
+		mockFieldKeys(['llm_call_count', 'tool_call_count']);
+		renderTracesView();
+
+		await findTable();
+
+		await waitFor(() => {
+			expect(persistedState()?.hiddenColumnIds).toStrictEqual([
+				'start_time',
+				'end_time',
+				'error_count',
+				'input',
+				'output',
+				'trace:tool_call_count:float64',
+			]);
+		});
+		expect(screen.getByText(OPTIONS_TRIGGER)).toBeInTheDocument();
+		expect(screen.getByText('llm_call_count')).toBeInTheDocument();
+	});
+
+	it('persists nothing when the field keys fail', async () => {
+		mockFieldKeysFailure();
+		renderTracesView();
+
+		await findTable();
+
+		expect(useColumnStore.getState().tables[STORAGE_KEY]).toBeUndefined();
+		expect(persistedState()).toBeNull();
+	});
+
+	it('drops the column picker when the field keys fail', async () => {
+		mockFieldKeysFailure();
+		renderTracesView();
+
+		await findTable();
+
+		expect(screen.queryByText(OPTIONS_TRIGGER)).not.toBeInTheDocument();
+	});
+
+	it('renders only the default-visible columns when the field keys fail', async () => {
+		mockFieldKeysFailure();
+		renderTracesView();
+
+		await findTable();
+
+		expect(screen.getByText('root_span_name')).toBeInTheDocument();
+		expect(screen.getByText('trace_id')).toBeInTheDocument();
+		expect(screen.queryByText('input')).not.toBeInTheDocument();
+		expect(screen.queryByText('output')).not.toBeInTheDocument();
+	});
+
+	it('leaves an existing selection untouched while the field keys fail', async () => {
+		const existing = {
+			hiddenColumnIds: ['trace:tool_call_count:float64', 'input', 'output'],
+			columnOrder: ['trace_id', 'resource:service.name'],
+			columnSizing: {},
+		};
+		localStorage.setItem(PERSISTED_KEY, JSON.stringify(existing));
+
+		mockFieldKeysFailure();
+		renderTracesView();
+
+		await findTable();
+
+		expect(persistedState()).toStrictEqual(existing);
+	});
+});

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

@@ -149,6 +149,62 @@ describe('useTraceViewColumns', () => {
 		);
 	});
 
+	describe('when the keys fetch fails', () => {
+		beforeEach(() => {
+			server.use(
+				rest.get(
+					`${ENVIRONMENT.baseURL}/api/v1/ai_observability/fields/keys`,
+					(_req, res, ctx) => res(ctx.status(500), ctx.json({ status: 'error' })),
+				),
+			);
+		});
+
+		it('does not persist defaults', async () => {
+			await renderColumns();
+
+			expect(useColumnStore.getState().tables[STORAGE_KEY]).toBeUndefined();
+			expect(
+				localStorage.getItem(`@signoz/table-columns/${STORAGE_KEY}`),
+			).toBeNull();
+		});
+
+		it('reports the column state as not persistable', async () => {
+			const { result } = await renderColumns();
+
+			expect(result.current.canPersistColumns).toBe(false);
+		});
+
+		it('ignores a selection change instead of persisting a partial set', async () => {
+			const { result } = await renderColumns();
+
+			act(() => {
+				result.current.onFieldsChange([{ name: 'trace_id' }]);
+			});
+
+			expect(useColumnStore.getState().tables[STORAGE_KEY]).toBeUndefined();
+		});
+
+		it('seeds the defaults once a later fetch succeeds', async () => {
+			const { unmount } = await renderColumns();
+			unmount();
+
+			mockAggregateKeys(AGGREGATE_KEYS);
+			const { result } = await renderColumns();
+
+			expect(result.current.canPersistColumns).toBe(true);
+			expect(fieldNames(result.current.selectedFields)).toStrictEqual([
+				'service.name',
+				'root_span_name',
+				'trace_duration_nano',
+				'span_count',
+				'trace_id',
+				'llm_call_count',
+				'total_tokens',
+				'estimated_total_cost',
+			]);
+		});
+	});
+
 	it('hides the columns dropped from the selection', async () => {
 		const { result } = await renderColumns();
 

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

@@ -8,7 +8,7 @@ export const PER_PAGE_OPTIONS: number[] = [10, ...DEFAULT_PER_PAGE_OPTIONS];
 /** Always visible: it is the row's link to the trace. */
 export const TRACE_ID_COLUMN_ID = 'trace_id';
 
-/** Everything else starts hidden, including any aggregate the endpoint adds later. */
+/** Everything else starts hidden; only applied at first init, since the store persists hidden ids. */
 const DEFAULT_VISIBLE_FIELDS = new Set([
 	'service.name',
 	'root_span_name',

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

@@ -35,11 +35,17 @@ interface UseTraceViewColumns {
 	onFieldsChange: (next: TelemetryFieldKey[]) => void;
 	requiredFields: readonly string[];
 	isLoading: boolean;
+	/** False until the keys fetch lands; a partial set must not reach the persisted store. */
+	canPersistColumns: boolean;
 }
 
 // TODO(ai-explorer): browser-local only, unlike the list views' `?options=` columns.
 export function useTraceViewColumns(): UseTraceViewColumns {
-	const { data: fetchedFields = [], isFetched } = useFieldKeysSuggestion(
+	const {
+		data: fetchedFields = [],
+		isFetched,
+		isSuccess,
+	} = useFieldKeysSuggestion(
 		{
 			...TRACE_VIEW_FIELD_KEYS,
 			signal: DATA_SOURCE_TO_SIGNAL[DataSource.TRACES],
@@ -60,10 +66,10 @@ export function useTraceViewColumns(): UseTraceViewColumns {
 
 	// Defaults from a partial column set would persist as the user's own choice.
 	useEffect(() => {
-		if (isFetched) {
+		if (isSuccess) {
 			initializeFromDefaults(STORAGE_KEY, columns);
 		}
-	}, [isFetched, columns]);
+	}, [isSuccess, columns]);
 
 	const hiddenColumnIds = useHiddenColumnIds(STORAGE_KEY);
 	const columnOrder = useColumnOrder(STORAGE_KEY);
@@ -83,6 +89,10 @@ export function useTraceViewColumns(): UseTraceViewColumns {
 
 	const onFieldsChange = useCallback(
 		(next: TelemetryFieldKey[]): void => {
+			if (!isSuccess) {
+				return;
+			}
+
 			const keptIds = new Set(next.map(columnIdOf));
 
 			columns.forEach((column) => {
@@ -96,7 +106,7 @@ export function useTraceViewColumns(): UseTraceViewColumns {
 			// Columns missing from the order sort last, so the visible ones suffice.
 			setColumnOrder(STORAGE_KEY, next.map(columnIdOf));
 		},
-		[columns],
+		[columns, isSuccess],
 	);
 
 	return {
@@ -105,5 +115,6 @@ export function useTraceViewColumns(): UseTraceViewColumns {
 		onFieldsChange,
 		requiredFields: [TRACE_ID_COLUMN_ID],
 		isLoading: !isFetched,
+		canPersistColumns: isSuccess,
 	};
 }

frontend/src/container/LLMObservability/Explorer/constants.ts

@@ -1,7 +1,17 @@
 import { TelemetrytypesFieldContextDTO } from 'api/generated/services/sigNoz.schemas';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { TelemetryFieldKey } from 'types/api/v5/queryRange';
 
+export const DEFAULT_PANEL_TYPE = PANEL_TYPES.TRACE;
+
 export const TOOLBAR_VIEWS = {
+	trace: {
+		name: 'trace',
+		label: 'Trace',
+		disabled: false,
+		show: true,
+		key: 'trace',
+	},
 	list: {
 		name: 'list',
 		label: 'List',
@@ -15,13 +25,6 @@ export const TOOLBAR_VIEWS = {
 		show: true,
 		key: 'timeseries',
 	},
-	trace: {
-		name: 'trace',
-		label: 'Trace',
-		disabled: false,
-		show: true,
-		key: 'trace',
-	},
 	table: {
 		name: 'table',
 		label: 'Table',

frontend/src/container/LLMObservability/Explorer/explorerUtils.ts

@@ -1,6 +1,5 @@
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import { OptionsQuery } from 'container/OptionsMenu/types';
-import { cloneDeep, set } from 'lodash-es';
+import { initialQueriesMap } from 'constants/queryBuilder';
+import { cloneDeep } from 'lodash-es';
 import { OrderByPayload, Query } from 'types/api/queryBuilder/queryBuilderData';
 
 export const getListViewQuery = (
@@ -31,31 +30,3 @@ export const getListViewQuery = (
 
 	return query;
 };
-
-export const getQueryByPanelType = (
-	stagedQuery: Query,
-	panelType: PANEL_TYPES,
-): Query => {
-	if (panelType === PANEL_TYPES.LIST || panelType === PANEL_TYPES.TRACE) {
-		return getListViewQuery(stagedQuery);
-	}
-	return stagedQuery;
-};
-
-export const getExportQueryData = (
-	query: Query,
-	panelType: PANEL_TYPES,
-	options: OptionsQuery,
-): Query => {
-	if (panelType === PANEL_TYPES.LIST) {
-		const updatedQuery = cloneDeep(query);
-		set(
-			updatedQuery,
-			'builder.queryData[0].selectColumns',
-			options.selectColumns,
-		);
-
-		return updatedQuery;
-	}
-	return query;
-};

frontend/src/container/LLMObservability/ToolbarActions/LeftToolbarActions.tsx

@@ -1,19 +1,21 @@
-import {
-	ArrowUpToLine,
-	Atom,
-	Filter,
-	SquareMousePointer,
-	Terminal,
-	Binoculars,
-} from '@signozhq/icons';
+import { ArrowUpToLine, Filter } from '@signozhq/icons';
 import { Button, Tooltip } from 'antd';
 import cx from 'classnames';
 import { ExplorerViews } from 'pages/LogsExplorer/utils';
 
+import { TOOLBAR_VIEW_CONFIG } from './toolbarViewsConfig';
+
 import './ToolbarActions.styles.scss';
 
+interface ToolbarViewItem {
+	name: string;
+	key: string;
+	show?: boolean;
+	disabled?: boolean;
+}
+
 interface LeftToolbarActionsProps {
-	items: any;
+	items: Record<string, ToolbarViewItem>;
 	selectedView: string;
 	onChangeSelectedView: (view: ExplorerViews) => void;
 	showFilter: boolean;
@@ -29,8 +31,6 @@ export default function LeftToolbarActions({
 	showFilter,
 	handleFilterVisibilityChange,
 }: LeftToolbarActionsProps): JSX.Element {
-	const { clickhouse, list, timeseries, table, trace } = items;
-
 	return (
 		<div className="left-toolbar">
 			{!showFilter && (
@@ -41,91 +41,34 @@ export default function LeftToolbarActions({
 					</Button>
 				</Tooltip>
 			)}
+			{/* Buttons render in the order the caller declares its views. */}
 			<div className="left-toolbar-query-actions">
-				{list?.show && (
-					<Tooltip title="List View">
-						<Button
-							disabled={list.disabled}
-							className={cx(
-								'list-view-tab',
-								'explorer-view-option',
-								selectedView === list.key ? activeTab : '',
-							)}
-							onClick={(): void => onChangeSelectedView(list.key)}
-						>
-							<SquareMousePointer size={14} data-testid="search-view" />
-							List View
-						</Button>
-					</Tooltip>
-				)}
+				{Object.values(items).map((item) => {
+					const config = TOOLBAR_VIEW_CONFIG[item?.key];
 
-				{trace?.show && (
-					<Tooltip title="Trace View">
-						<Button
-							disabled={trace.disabled}
-							className={cx(
-								'trace-view-tab',
-								'explorer-view-option',
-								selectedView === trace.key ? activeTab : '',
-							)}
-							onClick={(): void => onChangeSelectedView(trace.key)}
-						>
-							<SquareMousePointer size={14} data-testid="trace-view" />
-							Trace View
-						</Button>
-					</Tooltip>
-				)}
+					if (!item?.show || !config) {
+						return null;
+					}
 
-				{timeseries?.show && (
-					<Tooltip title="Time Series">
-						<Button
-							disabled={timeseries.disabled}
-							className={cx(
-								'timeseries-view-tab',
-								'explorer-view-option',
-								selectedView === timeseries.key ? activeTab : '',
-							)}
-							onClick={(): void => onChangeSelectedView(timeseries.key)}
-						>
-							<Atom size={14} data-testid="query-builder-view" />
-							Time Series
-						</Button>
-					</Tooltip>
-				)}
+					const { icon: Icon, label, className, testId } = config;
 
-				{clickhouse?.show && (
-					<Tooltip title="Clickhouse">
-						<Button
-							disabled={clickhouse.disabled}
-							className={cx(
-								'clickhouse-view-tab',
-								'explorer-view-option',
-								selectedView === clickhouse.key ? activeTab : '',
-							)}
-							onClick={(): void => onChangeSelectedView(clickhouse.key)}
-						>
-							<Terminal size={14} data-testid="clickhouse-view" />
-							Clickhouse
-						</Button>
-					</Tooltip>
-				)}
-
-				{table?.show && (
-					<Tooltip title="Table">
-						<Button
-							disabled={table.disabled}
-							className={cx(
-								'table-view-tab',
-								'explorer-view-option',
-								selectedView === table.key ? activeTab : '',
-							)}
-							onClick={(): void => onChangeSelectedView(table.key)}
-						>
-							<Binoculars size={14} data-testid="query-builder-view-v2" />
-							Table
-						</Button>
-					</Tooltip>
-				)}
+					return (
+						<Tooltip key={item.key} title={label}>
+							<Button
+								disabled={item.disabled}
+								className={cx(
+									className,
+									'explorer-view-option',
+									selectedView === item.key ? activeTab : '',
+								)}
+								onClick={(): void => onChangeSelectedView(item.key as ExplorerViews)}
+							>
+								<Icon size={14} data-testid={testId} />
+								{label}
+							</Button>
+						</Tooltip>
+					);
+				})}
 			</div>
 		</div>
 	);

frontend/src/container/LLMObservability/ToolbarActions/toolbarViewsConfig.ts

@@ -0,0 +1,47 @@
+import {
+	Atom,
+	Binoculars,
+	SquareMousePointer,
+	Terminal,
+} from '@signozhq/icons';
+import { ExplorerViews } from 'pages/LogsExplorer/utils';
+
+export interface ToolbarViewConfig {
+	icon: typeof Atom;
+	label: string;
+	className: string;
+	testId: string;
+}
+
+export const TOOLBAR_VIEW_CONFIG: Record<string, ToolbarViewConfig> = {
+	[ExplorerViews.LIST]: {
+		icon: SquareMousePointer,
+		label: 'List View',
+		className: 'list-view-tab',
+		testId: 'search-view',
+	},
+	[ExplorerViews.TRACE]: {
+		icon: SquareMousePointer,
+		label: 'Trace View',
+		className: 'trace-view-tab',
+		testId: 'trace-view',
+	},
+	[ExplorerViews.TIMESERIES]: {
+		icon: Atom,
+		label: 'Time Series',
+		className: 'timeseries-view-tab',
+		testId: 'query-builder-view',
+	},
+	[ExplorerViews.CLICKHOUSE]: {
+		icon: Terminal,
+		label: 'Clickhouse',
+		className: 'clickhouse-view-tab',
+		testId: 'clickhouse-view',
+	},
+	[ExplorerViews.TABLE]: {
+		icon: Binoculars,
+		label: 'Table',
+		className: 'table-view-tab',
+		testId: 'query-builder-view-v2',
+	},
+};

frontend/src/container/LogControls/index.tsx

@@ -1,136 +0,0 @@
-import { memo, useMemo } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { useDispatch, useSelector } from 'react-redux';
-import { Button, Flex } from 'antd';
-import { Divider } from '@signozhq/ui/divider';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import Controls from 'container/Controls';
-import Download from 'container/Download/Download';
-import { getGlobalTime } from 'container/LogsSearchFilter/utils';
-import dayjs from 'dayjs';
-import { Pagination } from 'hooks/queryPagination';
-import { getMinMaxForSelectedTime } from 'lib/getMinMax';
-import { FlatLogData } from 'lib/logs/flatLogData';
-import { OrderPreferenceItems } from 'pages/Logs/config';
-// eslint-disable-next-line no-restricted-imports
-import { Dispatch } from 'redux';
-import { AppState } from 'store/reducers';
-import AppActions from 'types/actions';
-import {
-	GET_NEXT_LOG_LINES,
-	GET_PREVIOUS_LOG_LINES,
-	RESET_ID_START_AND_END,
-	SET_LOG_LINES_PER_PAGE,
-} from 'types/actions/logs';
-import { GlobalReducer } from 'types/reducer/globalTime';
-import { ILogsReducer } from 'types/reducer/logs';
-
-import { Container } from './styles';
-import { SkipBack } from '@signozhq/icons';
-
-function LogControls(): JSX.Element | null {
-	const {
-		logLinesPerPage,
-		liveTail,
-		isLoading: isLogsLoading,
-		isLoadingAggregate,
-		logs,
-		order,
-	} = useSelector<AppState, ILogsReducer>((state) => state.logs);
-	const globalTime = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-
-	const dispatch = useDispatch<Dispatch<AppActions>>();
-
-	const handleLogLinesPerPageChange = (e: Pagination['limit']): void => {
-		dispatch({
-			type: SET_LOG_LINES_PER_PAGE,
-			payload: {
-				logsLinesPerPage: e,
-			},
-		});
-	};
-
-	const handleGoToLatest = (): void => {
-		const { maxTime, minTime } = getMinMaxForSelectedTime(
-			globalTime.selectedTime,
-			globalTime.minTime,
-			globalTime.maxTime,
-		);
-
-		const updatedGlobalTime = getGlobalTime(globalTime.selectedTime, {
-			maxTime,
-			minTime,
-		});
-
-		if (updatedGlobalTime) {
-			dispatch({
-				type: RESET_ID_START_AND_END,
-				payload: updatedGlobalTime,
-			});
-		}
-	};
-
-	const handleNavigatePrevious = (): void => {
-		dispatch({
-			type: GET_PREVIOUS_LOG_LINES,
-		});
-	};
-
-	const handleNavigateNext = (): void => {
-		dispatch({
-			type: GET_NEXT_LOG_LINES,
-		});
-	};
-
-	const flattenLogData = useMemo(
-		() =>
-			logs.map((log) => {
-				const timestamp =
-					typeof log.timestamp === 'string'
-						? dayjs(log.timestamp).format(DATE_TIME_FORMATS.ISO_DATETIME_MS)
-						: dayjs(log.timestamp / 1e6).format(DATE_TIME_FORMATS.ISO_DATETIME_MS);
-
-				return FlatLogData({
-					...log,
-					timestamp,
-				});
-			}),
-		[logs],
-	);
-
-	const isLoading = isLogsLoading || isLoadingAggregate;
-
-	if (liveTail !== 'STOPPED') {
-		return null;
-	}
-
-	return (
-		<Container>
-			<Download data={flattenLogData} isLoading={isLoading} fileName="log_data" />
-			<Button
-				loading={isLoading}
-				size="small"
-				type="link"
-				disabled={order === OrderPreferenceItems.ASC}
-				onClick={handleGoToLatest}
-			>
-				<Flex align="center" gap="4px">
-					<SkipBack size="md" /> Go to latest
-				</Flex>
-			</Button>
-			<Divider type="vertical" />
-			<Controls
-				isLoading={isLoading}
-				totalCount={logs.length}
-				countPerPage={logLinesPerPage}
-				handleNavigatePrevious={handleNavigatePrevious}
-				handleNavigateNext={handleNavigateNext}
-				handleCountItemsPerPageChange={handleLogLinesPerPageChange}
-			/>
-		</Container>
-	);
-}
-
-export default memo(LogControls);

frontend/src/container/LogControls/styles.ts

@@ -1,14 +0,0 @@
-import { Button } from 'antd';
-import styled from 'styled-components';
-
-export const Container = styled.div`
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	gap: 0.5rem;
-`;
-
-export const DownloadLogButton = styled(Button)`
-	display: flex;
-	align-items: center;
-`;

frontend/src/container/LogDetailedView/TableView.tsx

@@ -1,6 +1,4 @@
 import { useEffect, useMemo, useState } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { useDispatch } from 'react-redux';
 import { generatePath } from 'react-router-dom';
 import { Link, Pin } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
@@ -14,23 +12,19 @@ import { ResizeTable } from 'components/ResizeTable';
 import { OPERATORS } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
-import { RESTRICTED_SELECTED_FIELDS } from 'container/LogsFilters/config';
 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';
-// eslint-disable-next-line no-restricted-imports
-import { Dispatch } from 'redux';
-import AppActions from 'types/actions';
-import { SET_DETAILED_LOG_DATA } from 'types/actions/logs';
 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 {
@@ -65,7 +59,6 @@ function TableView({
 	listViewPanelSelectedFields,
 	handleChangeSelectedView,
 }: Props): JSX.Element | null {
-	const dispatch = useDispatch<Dispatch<AppActions>>();
 	const [isfilterInLoading, setIsFilterInLoading] = useState<boolean>(false);
 	const [isfilterOutLoading, setIsFilterOutLoading] = useState<boolean>(false);
 	const isDarkMode = useIsDarkMode();
@@ -185,11 +178,6 @@ function TableView({
 		const spanId = flattenLogData?.span_id;
 
 		if (traceId) {
-			dispatch({
-				type: SET_DETAILED_LOG_DATA,
-				payload: null,
-			});
-
 			const basePath = generatePath(ROUTES.TRACE_DETAIL, {
 				id: traceId,
 			});

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

@@ -10,7 +10,6 @@ import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { OPERATORS } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
-import { RESTRICTED_SELECTED_FIELDS } from 'container/LogsFilters/config';
 import { MetricsType } from 'container/MetricsApplication/constant';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { ICurrentQueryData } from 'hooks/useHandleExplorerTabChange';
@@ -27,6 +26,7 @@ import {
 	DataTypes,
 } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
+import { RESTRICTED_SELECTED_FIELDS } from '../config';
 import { DataType } from '../TableView';
 import {
 	filterKeyForField,
@@ -141,10 +141,9 @@ export default function TableViewActions(
 	const { stagedQuery, updateQueriesData } = useQueryBuilder();
 	const { dataType, logType: fieldType } = getFieldAttributes(record.field);
 
-	// there is no option for where clause in old logs explorer and live logs page or infra monitoring
-	const isOldLogsExplorerOrLiveLogsPage = useMemo(
+	// there is no option for where clause in live logs page or infra monitoring
+	const isLiveLogsOrInfraPage = useMemo(
 		() =>
-			pathname === ROUTES.OLD_LOGS_EXPLORER ||
 			pathname === ROUTES.LIVE_LOGS ||
 			pathname === ROUTES.INFRASTRUCTURE_MONITORING_HOSTS ||
 			pathname === ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES,
@@ -400,7 +399,7 @@ export default function TableViewActions(
 									)}
 								/>
 							</Tooltip>
-							{!isOldLogsExplorerOrLiveLogsPage && (
+							{!isLiveLogsOrInfraPage && (
 								<Popover
 									open={isOpen}
 									onOpenChange={setIsOpen}
@@ -487,7 +486,7 @@ export default function TableViewActions(
 								)}
 							/>
 						</Tooltip>
-						{!isOldLogsExplorerOrLiveLogsPage && (
+						{!isLiveLogsOrInfraPage && (
 							<Popover
 								open={isOpen}
 								onOpenChange={setIsOpen}

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

@@ -1,9 +1,9 @@
 import { fireEvent, render, screen } from '@testing-library/react';
-import { RESTRICTED_SELECTED_FIELDS } from 'container/LogsFilters/config';
 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';
 

frontend/src/container/LogDetailedView/config.ts

@@ -1,5 +1,10 @@
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
+export const RESTRICTED_SELECTED_FIELDS = ['timestamp', 'id'];
+
+// Fields that can be filtered on but not grouped by in the log details view.
+export const RESTRICTED_GROUP_BY_FIELDS = ['body', 'trace_id'];
+
 export const typeToArrayTypeMapper: { [key in DataTypes]: DataTypes } = {
 	[DataTypes.String]: DataTypes.ArrayString,
 	[DataTypes.Float64]: DataTypes.ArrayFloat64,

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

@@ -61,8 +61,7 @@ export function useLogAttributeActions({
 		featureFlags?.find((flag) => flag.name === FeatureKeys.USE_JSON_BODY)
 			?.active || false;
 
-	const isOldExplorerOrLive =
-		pathname === ROUTES.OLD_LOGS_EXPLORER || pathname === ROUTES.LIVE_LOGS;
+	const isLiveLogs = pathname === ROUTES.LIVE_LOGS;
 
 	const filterFor = useCallback(
 		(context: FieldContext, isFilterIn: boolean): void => {
@@ -221,7 +220,7 @@ export function useLogAttributeActions({
 					!handleChangeSelectedView ||
 					!buildLogFilterTarget(fieldKeyPath, undefined, isBodyJsonQueryEnabled)
 						.groupBySupported ||
-					isOldExplorerOrLive,
+					isLiveLogs,
 			},
 			{
 				key: LogDetailsAction.REPLACE_FILTER,
@@ -229,9 +228,7 @@ export function useLogAttributeActions({
 				icon: <RefreshCw size={12} />,
 				onClick: replaceFilter,
 				shouldHide: (_key, fieldKeyPath): boolean =>
-					!handleChangeSelectedView ||
-					isRestricted(fieldKeyPath) ||
-					isOldExplorerOrLive,
+					!handleChangeSelectedView || isRestricted(fieldKeyPath) || isLiveLogs,
 			},
 		];
 	}, [
@@ -239,7 +236,7 @@ export function useLogAttributeActions({
 		groupBy,
 		replaceFilter,
 		isBodyJsonQueryEnabled,
-		isOldExplorerOrLive,
+		isLiveLogs,
 		handleChangeSelectedView,
 		onApplyLogFilter,
 	]);

frontend/src/container/LogDetailedView/index.tsx

@@ -1,168 +0,0 @@
-import { memo, useCallback } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { connect, useDispatch, useSelector } from 'react-redux';
-import { useHistory } from 'react-router-dom';
-import LogDetail from 'components/LogDetail';
-import { VIEW_TYPES } from 'components/LogDetail/constants';
-import ROUTES from 'constants/routes';
-import { getOldLogsOperatorFromNew } from 'hooks/logs/useActiveLog';
-import { getGeneratedFilterQueryString } from 'lib/getGeneratedFilterQueryString';
-import getStep from 'lib/getStep';
-import { getIdConditions } from 'pages/Logs/utils';
-// eslint-disable-next-line no-restricted-imports
-import { bindActionCreators, Dispatch } from 'redux';
-import { ThunkDispatch } from 'redux-thunk';
-import { getLogs } from 'store/actions/logs/getLogs';
-import { getLogsAggregate } from 'store/actions/logs/getLogsAggregate';
-import { AppState } from 'store/reducers';
-import AppActions from 'types/actions';
-import {
-	SET_DETAILED_LOG_DATA,
-	SET_SEARCH_QUERY_STRING,
-	TOGGLE_LIVE_TAIL,
-} from 'types/actions/logs';
-import { GlobalReducer } from 'types/reducer/globalTime';
-import { ILogsReducer } from 'types/reducer/logs';
-
-type LogDetailedViewProps = {
-	getLogs: (props: Parameters<typeof getLogs>[0]) => ReturnType<typeof getLogs>;
-	getLogsAggregate: (
-		props: Parameters<typeof getLogsAggregate>[0],
-	) => ReturnType<typeof getLogsAggregate>;
-};
-
-function LogDetailedView({
-	getLogs,
-	getLogsAggregate,
-}: LogDetailedViewProps): JSX.Element {
-	const history = useHistory();
-	const {
-		detailedLog,
-		searchFilter: { queryString },
-		logLinesPerPage,
-		idStart,
-		liveTail,
-		idEnd,
-		order,
-	} = useSelector<AppState, ILogsReducer>((state) => state.logs);
-	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-
-	const dispatch = useDispatch<Dispatch<AppActions>>();
-
-	const onDrawerClose = (): void => {
-		dispatch({
-			type: SET_DETAILED_LOG_DATA,
-			payload: null,
-		});
-	};
-
-	const handleAddToQuery = useCallback(
-		(fieldKey: string, fieldValue: string, operator: string) => {
-			const newOperator = getOldLogsOperatorFromNew(operator);
-			const updatedQueryString = getGeneratedFilterQueryString(
-				fieldKey,
-				fieldValue,
-				newOperator,
-				queryString,
-			);
-
-			history.replace(`${ROUTES.OLD_LOGS_EXPLORER}?q=${updatedQueryString}`);
-		},
-		[history, queryString],
-	);
-
-	const handleClickActionItem = useCallback(
-		(fieldKey: string, fieldValue: string, operator: string): void => {
-			const newOperator = getOldLogsOperatorFromNew(operator);
-			const updatedQueryString = getGeneratedFilterQueryString(
-				fieldKey,
-				fieldValue,
-				newOperator,
-				queryString,
-			);
-
-			dispatch({
-				type: SET_SEARCH_QUERY_STRING,
-				payload: {
-					searchQueryString: updatedQueryString,
-				},
-			});
-
-			if (liveTail === 'STOPPED') {
-				getLogs({
-					q: updatedQueryString,
-					limit: logLinesPerPage,
-					orderBy: 'timestamp',
-					order,
-					timestampStart: minTime,
-					timestampEnd: maxTime,
-					...getIdConditions(idStart, idEnd, order),
-				});
-				getLogsAggregate({
-					timestampStart: minTime,
-					timestampEnd: maxTime,
-					step: getStep({
-						start: minTime,
-						end: maxTime,
-						inputFormat: 'ns',
-					}),
-					q: updatedQueryString,
-				});
-			} else if (liveTail === 'PLAYING') {
-				dispatch({
-					type: TOGGLE_LIVE_TAIL,
-					payload: 'PAUSED',
-				});
-				setTimeout(
-					() =>
-						dispatch({
-							type: TOGGLE_LIVE_TAIL,
-							payload: liveTail,
-						}),
-					0,
-				);
-			}
-		},
-		[
-			dispatch,
-			getLogs,
-			getLogsAggregate,
-			idEnd,
-			idStart,
-			liveTail,
-			logLinesPerPage,
-			maxTime,
-			minTime,
-			order,
-			queryString,
-		],
-	);
-
-	return (
-		<LogDetail
-			selectedTab={VIEW_TYPES.OVERVIEW}
-			log={detailedLog}
-			onClose={onDrawerClose}
-			onAddToQuery={handleAddToQuery}
-			onClickActionItem={handleClickActionItem}
-		/>
-	);
-}
-
-interface DispatchProps {
-	getLogs: (props: Parameters<typeof getLogs>[0]) => (dispatch: never) => void;
-	getLogsAggregate: (
-		props: Parameters<typeof getLogsAggregate>[0],
-	) => (dispatch: never) => void;
-}
-
-const mapDispatchToProps = (
-	dispatch: ThunkDispatch<unknown, unknown, AppActions>,
-): DispatchProps => ({
-	getLogs: bindActionCreators(getLogs, dispatch),
-	getLogsAggregate: bindActionCreators(getLogsAggregate, dispatch),
-});
-
-export default connect(null, mapDispatchToProps)(memo(LogDetailedView as any));

frontend/src/container/LogDetailedView/logAttributeActions.utils.ts

@@ -5,10 +5,6 @@ import {
 	QUERY_BUILDER_FUNCTIONS,
 } from 'constants/antlrQueryConstants';
 import { OPERATORS as QUERY_BUILDER_OPERATORS } from 'constants/queryBuilder';
-import {
-	RESTRICTED_GROUP_BY_FIELDS,
-	RESTRICTED_SELECTED_FIELDS,
-} from 'container/LogsFilters/config';
 import { MetricsType } from 'container/MetricsApplication/constant';
 import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearchV2/utils';
 import { chooseAutocompleteFromCustomValue } from 'lib/newQueryBuilder/chooseAutocompleteFromCustomValue';
@@ -18,6 +14,10 @@ import {
 } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 
+import {
+	RESTRICTED_GROUP_BY_FIELDS,
+	RESTRICTED_SELECTED_FIELDS,
+} from './config';
 import { LogAttributeBucket } from './constants';
 import { generateFieldKeyForArray, getDataTypes } from './utils';
 

frontend/src/container/LogLiveTail/config.ts

@@ -1,26 +0,0 @@
-export const TIME_PICKER_OPTIONS = [
-	{
-		value: 5,
-		label: '5m',
-	},
-	{
-		value: 15,
-		label: '15m',
-	},
-	{
-		value: 30,
-		label: '30m',
-	},
-	{
-		value: 60,
-		label: '1hr',
-	},
-	{
-		value: 360,
-		label: '6hrs',
-	},
-	{
-		value: 720,
-		label: '12hrs',
-	},
-];

frontend/src/container/LogLiveTail/index.tsx

@@ -1,270 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { connect, useDispatch, useSelector } from 'react-redux';
-import { green } from '@ant-design/colors';
-import { Pause, Play, EllipsisVertical } from '@signozhq/icons';
-import { Button, Flex, Popover, Select, Space } from 'antd';
-import { LiveTail } from 'api/logs/livetail';
-import dayjs from 'dayjs';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useNotifications } from 'hooks/useNotifications';
-import getStep from 'lib/getStep';
-import { throttle } from 'lodash-es';
-// eslint-disable-next-line no-restricted-imports
-import { bindActionCreators, Dispatch } from 'redux';
-import { ThunkDispatch } from 'redux-thunk';
-import { getLogsAggregate } from 'store/actions/logs/getLogsAggregate';
-import { AppState } from 'store/reducers';
-import AppActions from 'types/actions';
-import { UPDATE_AUTO_REFRESH_DISABLED } from 'types/actions/globalTime';
-import {
-	FLUSH_LOGS,
-	PUSH_LIVE_TAIL_EVENT,
-	SET_LIVE_TAIL_START_TIME,
-	SET_LOADING,
-	TOGGLE_LIVE_TAIL,
-} from 'types/actions/logs';
-import { TLogsLiveTailState } from 'types/api/logs/liveTail';
-import { ILog } from 'types/api/logs/log';
-import { GlobalReducer } from 'types/reducer/globalTime';
-import { ILogsReducer } from 'types/reducer/logs';
-import { popupContainer } from 'utils/selectPopupContainer';
-
-import { TIME_PICKER_OPTIONS } from './config';
-import { StopContainer, TimePickerCard, TimePickerSelect } from './styles';
-
-function LogLiveTail({ getLogsAggregate }: Props): JSX.Element {
-	const {
-		liveTail,
-		searchFilter: { queryString },
-		liveTailStartRange,
-		logs,
-		idEnd,
-		idStart,
-	} = useSelector<AppState, ILogsReducer>((state) => state.logs);
-
-	const isDarkMode = useIsDarkMode();
-
-	const { selectedAutoRefreshInterval } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-	const { notifications } = useNotifications();
-
-	const dispatch = useDispatch<Dispatch<AppActions>>();
-	const handleLiveTail = (toggleState: TLogsLiveTailState): void => {
-		dispatch({
-			type: TOGGLE_LIVE_TAIL,
-			payload: toggleState,
-		});
-		dispatch({
-			type: UPDATE_AUTO_REFRESH_DISABLED,
-			payload: toggleState === 'PLAYING',
-		});
-	};
-
-	const batchedEventsRef = useRef<ILog[]>([]);
-
-	const pushLiveLog = useCallback(() => {
-		dispatch({
-			type: PUSH_LIVE_TAIL_EVENT,
-			payload: batchedEventsRef.current.reverse(),
-		});
-		batchedEventsRef.current = [];
-	}, [dispatch]);
-
-	const pushLiveLogThrottled = useMemo(
-		() => throttle(pushLiveLog, 1000),
-		[pushLiveLog],
-	);
-
-	const batchLiveLog = useCallback(
-		(e: { data: string }): void => {
-			batchedEventsRef.current.push(JSON.parse(e.data as string) as never);
-			pushLiveLogThrottled();
-		},
-		[pushLiveLogThrottled],
-	);
-
-	const firstLogsId = useMemo(() => logs[0]?.id, [logs]);
-
-	// This ref depicts thats whether the live tail is played from paused state or not.
-	const liveTailSourceRef = useRef<EventSource>();
-
-	useEffect(() => {
-		if (liveTail === 'PLAYING') {
-			const timeStamp = dayjs().subtract(liveTailStartRange, 'minute').valueOf();
-			const queryParams = new URLSearchParams({
-				...(queryString ? { q: queryString } : {}),
-				timestampStart: (timeStamp * 1e6) as never,
-				...(liveTailSourceRef.current && firstLogsId
-					? {
-							idGt: firstLogsId,
-						}
-					: {}),
-			});
-
-			if (liveTailSourceRef.current) {
-				liveTailSourceRef.current.close();
-			}
-
-			const source = LiveTail(queryParams.toString());
-			liveTailSourceRef.current = source;
-			source.onmessage = function connectionMessage(e): void {
-				batchLiveLog(e);
-			};
-			source.onerror = function connectionError(event: unknown): void {
-				console.error(event);
-				source.close();
-				dispatch({
-					type: TOGGLE_LIVE_TAIL,
-					payload: 'STOPPED',
-				});
-				dispatch({
-					type: SET_LOADING,
-					payload: false,
-				});
-				notifications.error({
-					message: 'Live tail stopped due to some error.',
-				});
-			};
-		}
-
-		if (liveTail === 'STOPPED') {
-			liveTailSourceRef.current = undefined;
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [liveTail, queryString, notifications, dispatch]);
-
-	const handleLiveTailStart = (): void => {
-		handleLiveTail('PLAYING');
-		const startTime =
-			dayjs().subtract(liveTailStartRange, 'minute').valueOf() * 1e6;
-
-		const endTime = dayjs().valueOf() * 1e6;
-
-		getLogsAggregate({
-			timestampStart: startTime,
-			timestampEnd: endTime,
-			step: getStep({
-				start: startTime,
-				end: endTime,
-				inputFormat: 'ns',
-			}),
-			q: queryString,
-			...(idStart ? { idGt: idStart } : {}),
-			...(idEnd ? { idLt: idEnd } : {}),
-		});
-
-		if (!liveTailSourceRef.current) {
-			dispatch({
-				type: FLUSH_LOGS,
-			});
-		}
-	};
-
-	const OptionsPopOverContent = useMemo(
-		() => (
-			<TimePickerSelect
-				getPopupContainer={popupContainer}
-				disabled={liveTail === 'PLAYING'}
-				value={liveTailStartRange}
-				onChange={(value): void => {
-					if (typeof value === 'number') {
-						dispatch({
-							type: SET_LIVE_TAIL_START_TIME,
-							payload: value,
-						});
-					}
-				}}
-			>
-				{TIME_PICKER_OPTIONS.map((optionData) => (
-					<Select.Option key={optionData.label} value={optionData.value}>
-						Last {optionData.label}
-					</Select.Option>
-				))}
-			</TimePickerSelect>
-		),
-		[dispatch, liveTail, liveTailStartRange],
-	);
-
-	const isDisabled = useMemo(
-		() => selectedAutoRefreshInterval?.length > 0,
-		[selectedAutoRefreshInterval],
-	);
-
-	const onLiveTailStop = (): void => {
-		handleLiveTail('STOPPED');
-		dispatch({
-			type: UPDATE_AUTO_REFRESH_DISABLED,
-			payload: false,
-		});
-		dispatch({
-			type: SET_LOADING,
-			payload: false,
-		});
-		if (liveTailSourceRef.current) {
-			liveTailSourceRef.current.close();
-		}
-	};
-
-	return (
-		<TimePickerCard>
-			<Space size={0} align="center">
-				{liveTail === 'PLAYING' ? (
-					<Button
-						type="primary"
-						onClick={onLiveTailStop}
-						title="Pause live tail"
-						style={{ background: green[6] }}
-					>
-						<Flex align="center" gap={4}>
-							<span>Pause</span>
-							<Pause size="md" />
-						</Flex>
-					</Button>
-				) : (
-					<Button
-						type="primary"
-						onClick={handleLiveTailStart}
-						title="Start live tail"
-						disabled={isDisabled}
-					>
-						<Flex align="center" gap={4}>
-							Go Live <Play size="md" />
-						</Flex>
-					</Button>
-				)}
-
-				{liveTail !== 'STOPPED' && (
-					<Button type="dashed" onClick={onLiveTailStop} title="Exit live tail">
-						<StopContainer isDarkMode={isDarkMode} />
-					</Button>
-				)}
-
-				<Popover
-					getPopupContainer={popupContainer}
-					placement="bottomRight"
-					title="Select Live Tail Timing"
-					trigger="click"
-					content={OptionsPopOverContent}
-				>
-					<EllipsisVertical size="lg" />
-				</Popover>
-			</Space>
-		</TimePickerCard>
-	);
-}
-
-interface DispatchProps {
-	getLogsAggregate: typeof getLogsAggregate;
-}
-
-type Props = DispatchProps;
-
-const mapDispatchToProps = (
-	dispatch: ThunkDispatch<unknown, unknown, AppActions>,
-): DispatchProps => ({
-	getLogsAggregate: bindActionCreators(getLogsAggregate, dispatch),
-});
-
-export default connect(null, mapDispatchToProps)(LogLiveTail);

frontend/src/container/LogLiveTail/styles.ts

@@ -1,25 +0,0 @@
-import { Card, Select } from 'antd';
-import styled from 'styled-components';
-
-export const TimePickerCard = styled(Card)`
-	.ant-card-body {
-		display: flex;
-		padding: 0;
-	}
-`;
-
-export const TimePickerSelect = styled(Select)`
-	min-width: 100px;
-`;
-
-interface Props {
-	isDarkMode: boolean;
-}
-
-export const StopContainer = styled.div<Props>`
-	height: 0.8rem;
-	width: 0.8rem;
-	border-radius: 0.1rem;
-	background-color: ${({ isDarkMode }): string =>
-		isDarkMode ? '#fff' : '#000'};
-`;

frontend/src/container/LogsAggregate/index.tsx

@@ -1,95 +0,0 @@
-import { useMemo } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { connect, useSelector } from 'react-redux';
-import { blue } from '@ant-design/colors';
-import Graph from 'components/Graph';
-import Spinner from 'components/Spinner';
-import dayjs from 'dayjs';
-import useInterval from 'hooks/useInterval';
-import getStep from 'lib/getStep';
-// eslint-disable-next-line no-restricted-imports
-import { bindActionCreators } from 'redux';
-import { ThunkDispatch } from 'redux-thunk';
-import { getLogsAggregate } from 'store/actions/logs/getLogsAggregate';
-import { AppState } from 'store/reducers';
-import AppActions from 'types/actions';
-import { ILogsReducer } from 'types/reducer/logs';
-
-import { Container } from './styles';
-
-function LogsAggregate({ getLogsAggregate }: DispatchProps): JSX.Element {
-	const {
-		searchFilter: { queryString },
-		idEnd,
-		idStart,
-		isLoadingAggregate,
-		logsAggregate,
-		liveTail,
-		liveTailStartRange,
-	} = useSelector<AppState, ILogsReducer>((state) => state.logs);
-
-	useInterval(
-		() => {
-			const startTime =
-				dayjs().subtract(liveTailStartRange, 'minute').valueOf() * 1e6;
-
-			const endTime = dayjs().valueOf() * 1e6;
-
-			getLogsAggregate({
-				timestampStart: startTime,
-				timestampEnd: endTime,
-				step: getStep({
-					start: startTime,
-					end: endTime,
-					inputFormat: 'ns',
-				}),
-				q: queryString,
-				...(idStart ? { idGt: idStart } : {}),
-				...(idEnd ? { idLt: idEnd } : {}),
-			});
-		},
-		60000,
-		liveTail === 'PLAYING',
-	);
-
-	const graphData = useMemo(
-		() => ({
-			labels: logsAggregate.map((s) => new Date(s.timestamp / 1000000)),
-			datasets: [
-				{
-					data: logsAggregate.map((s) => s.value),
-					backgroundColor: blue[4],
-				},
-			],
-		}),
-		[logsAggregate],
-	);
-
-	return (
-		<Container>
-			{isLoadingAggregate ? (
-				<Spinner size="default" height="100%" />
-			) : (
-				<Graph
-					name="usage"
-					data={graphData}
-					type="bar"
-					containerHeight="100%"
-					animate
-				/>
-			)}
-		</Container>
-	);
-}
-
-interface DispatchProps {
-	getLogsAggregate: typeof getLogsAggregate;
-}
-
-const mapDispatchToProps = (
-	dispatch: ThunkDispatch<unknown, unknown, AppActions>,
-): DispatchProps => ({
-	getLogsAggregate: bindActionCreators(getLogsAggregate, dispatch),
-});
-
-export default connect(null, mapDispatchToProps)(LogsAggregate);

frontend/src/container/LogsAggregate/styles.ts

@@ -1,11 +0,0 @@
-import { Card } from 'antd';
-import styled from 'styled-components';
-
-export const Container = styled(Card)`
-	position: relative;
-	margin: 0.5rem 0;
-	.ant-card-body {
-		height: 20vh;
-		min-height: 200px;
-	}
-`;

frontend/src/container/LogsFilters/FieldItem.tsx

@@ -1,93 +0,0 @@
-import { ReactNode, useCallback, useMemo, useState } from 'react';
-import { Loader } from '@signozhq/icons';
-import { Button, Popover, Spin } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import {
-	IField,
-	IInterestingFields,
-	ISelectedFields,
-} from 'types/api/logs/fields';
-
-import { ICON_STYLE } from './config';
-import { Field } from './styles';
-
-function FieldItem({
-	name,
-	buttonIcon,
-	buttonOnClick,
-	fieldData,
-	fieldIndex,
-	isLoading,
-	iconHoverText,
-}: FieldItemProps): JSX.Element {
-	const [isHovered, setIsHovered] = useState<boolean>(false);
-	const isDarkMode = useIsDarkMode();
-
-	const onClickHandler = useCallback(() => {
-		if (!isLoading && buttonOnClick) {
-			buttonOnClick({ fieldData, fieldIndex });
-		}
-	}, [buttonOnClick, fieldData, fieldIndex, isLoading]);
-
-	const renderContent = useMemo(() => {
-		if (isLoading) {
-			return (
-				<Spin
-					spinning
-					size="small"
-					indicator={<Loader className="animate-spin" />}
-				/>
-			);
-		}
-
-		if (isHovered) {
-			return (
-				<Popover content={<Typography>{iconHoverText}</Typography>}>
-					<Button
-						size="small"
-						type="text"
-						icon={buttonIcon}
-						onClick={onClickHandler}
-					/>
-				</Popover>
-			);
-		}
-
-		return null;
-	}, [buttonIcon, iconHoverText, isHovered, isLoading, onClickHandler]);
-
-	const onMouseHoverHandler = useCallback(
-		(value: boolean) => (): void => {
-			setIsHovered(value);
-		},
-		[],
-	);
-
-	return (
-		<Field
-			onMouseEnter={onMouseHoverHandler(true)}
-			onMouseLeave={onMouseHoverHandler(false)}
-			isDarkMode={isDarkMode}
-		>
-			<Typography style={ICON_STYLE.PLUS}>{name}</Typography>
-
-			{renderContent}
-		</Field>
-	);
-}
-
-interface FieldItemProps {
-	name: string;
-	buttonIcon: ReactNode;
-	buttonOnClick: (props: {
-		fieldData: IInterestingFields | ISelectedFields;
-		fieldIndex: number;
-	}) => void;
-	fieldData: IField;
-	fieldIndex: number;
-	isLoading: boolean;
-	iconHoverText: string;
-}
-
-export default FieldItem;

frontend/src/container/LogsFilters/config.ts

@@ -1,11 +0,0 @@
-import { blue, red } from '@ant-design/colors';
-
-export const RESTRICTED_SELECTED_FIELDS = ['timestamp', 'id'];
-
-// Fields that can be filtered on but not grouped by in the log details view.
-export const RESTRICTED_GROUP_BY_FIELDS = ['body', 'trace_id'];
-
-export const ICON_STYLE = {
-	PLUS: { color: blue[5] },
-	CLOSE: { color: red[5] },
-};

frontend/src/container/LogsFilters/index.tsx

@@ -1,119 +0,0 @@
-import { ChangeEvent, useCallback, useState } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
-import { CirclePlus, X } from '@signozhq/icons';
-import { Input } from '@signozhq/ui/input';
-import { Col } from 'antd';
-import CategoryHeading from 'components/Logs/CategoryHeading';
-import { fieldSearchFilter } from 'lib/logs/fieldSearch';
-import { AppState } from 'store/reducers';
-import { ILogsReducer } from 'types/reducer/logs';
-
-import { ICON_STYLE, RESTRICTED_SELECTED_FIELDS } from './config';
-import FieldItem from './FieldItem';
-import { CategoryContainer, FieldContainer } from './styles';
-import { IHandleInterestProps, IHandleRemoveInterestProps } from './types';
-import { onHandleAddInterest, onHandleRemoveInterest } from './utils';
-
-function LogsFilters(): JSX.Element {
-	const {
-		fields: { interesting, selected },
-	} = useSelector<AppState, ILogsReducer>((state) => state.logs);
-
-	const [selectedFieldLoading, setSelectedFieldLoading] = useState<number[]>([]);
-	const [interestingFieldLoading, setInterestingFieldLoading] = useState<
-		number[]
-	>([]);
-
-	const [filterValuesInput, setFilterValuesInput] = useState('');
-	const handleSearch = (e: ChangeEvent<HTMLInputElement>): void => {
-		setFilterValuesInput((e.target as HTMLInputElement).value);
-	};
-
-	const onHandleAddSelectedToInteresting = useCallback(
-		({ fieldData, fieldIndex }: IHandleInterestProps) =>
-			(): Promise<void> =>
-				onHandleAddInterest({
-					fieldData,
-					fieldIndex,
-					interesting,
-					interestingFieldLoading,
-					setInterestingFieldLoading,
-					selected,
-				}),
-		[interesting, interestingFieldLoading, selected],
-	);
-
-	const onHandleRemoveSelected = useCallback(
-		({ fieldData, fieldIndex }: IHandleRemoveInterestProps) =>
-			(): Promise<void> =>
-				onHandleRemoveInterest({
-					fieldData,
-					fieldIndex,
-					interesting,
-					interestingFieldLoading,
-					selected,
-					setSelectedFieldLoading,
-				}),
-		[interesting, interestingFieldLoading, selected, setSelectedFieldLoading],
-	);
-
-	return (
-		<Col flex="250px">
-			<Input
-				placeholder="Filter Values"
-				onInput={handleSearch}
-				value={filterValuesInput}
-				onChange={handleSearch}
-			/>
-
-			<CategoryContainer>
-				<CategoryHeading>SELECTED FIELDS</CategoryHeading>
-				<FieldContainer>
-					{selected
-						.filter((field) => fieldSearchFilter(field.name, filterValuesInput))
-						.filter((field) => RESTRICTED_SELECTED_FIELDS.indexOf(field.name) === -1)
-						.map((field, idx) => (
-							<FieldItem
-								key={`${JSON.stringify(field)}`}
-								name={field.name}
-								fieldData={field}
-								fieldIndex={idx}
-								buttonIcon={<X style={ICON_STYLE.CLOSE} size="md" />}
-								buttonOnClick={onHandleRemoveSelected({
-									fieldData: field,
-									fieldIndex: idx,
-								})}
-								isLoading={selectedFieldLoading.includes(idx)}
-								iconHoverText="Remove from Selected Fields"
-							/>
-						))}
-				</FieldContainer>
-			</CategoryContainer>
-			<CategoryContainer>
-				<CategoryHeading>INTERESTING FIELDS</CategoryHeading>
-				<FieldContainer>
-					{interesting
-						.filter((field) => fieldSearchFilter(field.name, filterValuesInput))
-						.map((field, idx) => (
-							<FieldItem
-								key={`${JSON.stringify(field)}`}
-								name={field.name}
-								fieldData={field}
-								fieldIndex={idx}
-								buttonIcon={<CirclePlus style={ICON_STYLE.PLUS} size="md" />}
-								buttonOnClick={onHandleAddSelectedToInteresting({
-									fieldData: field,
-									fieldIndex: idx,
-								})}
-								isLoading={interestingFieldLoading.includes(idx)}
-								iconHoverText="Add to Selected Fields"
-							/>
-						))}
-				</FieldContainer>
-			</CategoryContainer>
-		</Col>
-	);
-}
-
-export default LogsFilters;

frontend/src/container/LogsFilters/styles.ts

@@ -1,29 +0,0 @@
-import { blue, grey } from '@ant-design/colors';
-import { Typography } from '@signozhq/ui/typography';
-import styled from 'styled-components';
-
-export const CategoryContainer = styled.div`
-	margin: 1rem 0;
-	padding-left: 0.2rem;
-`;
-
-export const FieldContainer = styled(Typography.Text)`
-	margin: 0.2rem 0;
-	color: ${blue[4]};
-`;
-
-export const Field = styled.div<{ isDarkMode: boolean }>`
-	border-radius: 0.5rem;
-	padding: 0.3rem 0.5rem;
-	height: 2rem;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	&:hover {
-		background: ${({ isDarkMode }): string => (isDarkMode ? grey[7] : '#ddd')};
-	}
-`;
-
-export const ExtractField = styled(Typography.Text)`
-	color: ${blue[4]};
-`;

frontend/src/container/LogsFilters/types.ts

@@ -1,36 +0,0 @@
-import { SetStateAction } from 'react';
-import {
-	IField,
-	IInterestingFields,
-	ISelectedFields,
-} from 'types/api/logs/fields';
-
-type SetLoading = (value: SetStateAction<number[]>) => void;
-
-export type IHandleInterestProps = {
-	fieldData: IInterestingFields;
-	fieldIndex: number;
-};
-
-export type IHandleRemoveInterestProps = {
-	fieldData: ISelectedFields;
-	fieldIndex: number;
-};
-
-export interface OnHandleAddInterestProps {
-	setInterestingFieldLoading: SetLoading;
-	fieldIndex: number;
-	fieldData: ISelectedFields;
-	interesting: IField[];
-	interestingFieldLoading: number[];
-	selected: IField[];
-}
-
-export interface OnHandleRemoveInterestProps {
-	setSelectedFieldLoading: SetLoading;
-	selected: IField[];
-	interesting: IField[];
-	interestingFieldLoading: number[];
-	fieldData: IInterestingFields;
-	fieldIndex: number;
-}

frontend/src/container/LogsFilters/utils.ts

@@ -1,105 +0,0 @@
-import { message } from 'antd';
-import addToSelectedFields from 'api/logs/AddToSelectedField';
-import removeSelectedField from 'api/logs/RemoveFromSelectedField';
-import store from 'store';
-import {
-	UPDATE_INTERESTING_FIELDS,
-	UPDATE_SELECTED_FIELDS,
-} from 'types/actions/logs';
-import { ErrorResponse } from 'types/api';
-
-import { RESTRICTED_SELECTED_FIELDS } from './config';
-import { OnHandleAddInterestProps, OnHandleRemoveInterestProps } from './types';
-
-export const onHandleAddInterest = async ({
-	setInterestingFieldLoading,
-	fieldIndex,
-	fieldData,
-	interesting,
-	interestingFieldLoading,
-	selected,
-}: OnHandleAddInterestProps): Promise<void> => {
-	const { dispatch } = store;
-
-	setInterestingFieldLoading((prevState: number[]) => {
-		prevState.push(fieldIndex);
-		return [...prevState];
-	});
-
-	try {
-		await addToSelectedFields({
-			...fieldData,
-			selected: true,
-		});
-
-		dispatch({
-			type: UPDATE_INTERESTING_FIELDS,
-			payload: {
-				field: interesting.filter((e) => e.name !== fieldData.name),
-				type: 'selected',
-			},
-		});
-
-		dispatch({
-			type: UPDATE_SELECTED_FIELDS,
-			payload: {
-				field: [...selected, fieldData],
-				type: 'selected',
-			},
-		});
-	} catch (errRes) {
-		message.error((errRes as ErrorResponse)?.error);
-	} finally {
-		setInterestingFieldLoading(
-			interestingFieldLoading.filter((e) => e !== fieldIndex),
-		);
-	}
-};
-
-export const onHandleRemoveInterest = async ({
-	setSelectedFieldLoading,
-	selected,
-	interesting,
-	interestingFieldLoading,
-	fieldData,
-	fieldIndex,
-}: OnHandleRemoveInterestProps): Promise<void> => {
-	if (RESTRICTED_SELECTED_FIELDS.includes(fieldData.name)) {
-		return;
-	}
-
-	const { dispatch } = store;
-
-	setSelectedFieldLoading((prevState) => {
-		prevState.push(fieldIndex);
-		return [...prevState];
-	});
-
-	try {
-		await removeSelectedField({
-			...fieldData,
-			selected: false,
-		});
-		dispatch({
-			type: UPDATE_SELECTED_FIELDS,
-			payload: {
-				field: selected.filter((e) => e.name !== fieldData.name),
-				type: 'selected',
-			},
-		});
-
-		dispatch({
-			type: UPDATE_INTERESTING_FIELDS,
-			payload: {
-				field: [...interesting, fieldData],
-				type: 'interesting',
-			},
-		});
-	} catch (errRes) {
-		message.error((errRes as ErrorResponse)?.error);
-	} finally {
-		setSelectedFieldLoading(
-			interestingFieldLoading.filter((e) => e !== fieldIndex),
-		);
-	}
-};

frontend/src/container/LogsSearchFilter/SearchFields/ActionBar.tsx

@@ -1,27 +0,0 @@
-import { Button, Row } from 'antd';
-
-interface SearchFieldsActionBarProps {
-	applyUpdate: VoidFunction;
-	clearFilters: VoidFunction;
-}
-
-export function SearchFieldsActionBar({
-	applyUpdate,
-	clearFilters,
-}: SearchFieldsActionBarProps): JSX.Element | null {
-	return (
-		<Row style={{ justifyContent: 'flex-end', paddingRight: '2.4rem' }}>
-			<Button
-				type="default"
-				onClick={clearFilters}
-				style={{ marginRight: '1rem' }}
-			>
-				Clear Filter
-			</Button>
-			<Button type="primary" onClick={applyUpdate}>
-				Apply
-			</Button>
-		</Row>
-	);
-}
-export default SearchFieldsActionBar;

frontend/src/container/LogsSearchFilter/SearchFields/FieldKey.tsx

@@ -1,19 +0,0 @@
-import { Typography } from '@signozhq/ui/typography';
-
-interface FieldKeyProps {
-	name: string;
-	type: string;
-}
-
-function FieldKey({ name, type }: FieldKeyProps): JSX.Element {
-	return (
-		<span style={{ margin: '0.25rem 0', display: 'flex', gap: '0.5rem' }}>
-			<Typography.Text>{name}</Typography.Text>
-			<Typography.Text color="muted" italic>
-				{type}
-			</Typography.Text>
-		</span>
-	);
-}
-
-export default FieldKey;

frontend/src/container/LogsSearchFilter/SearchFields/QueryBuilder/QueryBuilder.tsx

@@ -1,259 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
-import { SquareX, X } from '@signozhq/icons';
-import { Input } from '@signozhq/ui/input';
-import { Button, Select } from 'antd';
-import CategoryHeading from 'components/Logs/CategoryHeading';
-import {
-	ConditionalOperators,
-	QueryOperatorsMultiVal,
-	QueryOperatorsSingleVal,
-} from 'lib/logql/tokens';
-import { AppState } from 'store/reducers';
-import { ILogsReducer } from 'types/reducer/logs';
-
-import FieldKey from '../FieldKey';
-import { QueryFieldContainer } from '../styles';
-import { QueryFields } from '../utils';
-import { Container, QueryWrapper } from './styles';
-
-const { Option } = Select;
-
-function QueryConditionField({
-	query,
-	queryIndex,
-	onUpdate,
-}: QueryConditionFieldProps): JSX.Element {
-	const allOptions = Object.values(ConditionalOperators);
-	return (
-		<Select
-			defaultValue={
-				(query as QueryFields).value &&
-				(
-					(query as QueryFields)
-						?.value as unknown as QueryFields as unknown as string
-				).toUpperCase()
-			}
-			onChange={(e): void => {
-				onUpdate({ ...query, value: e }, queryIndex);
-			}}
-		>
-			{allOptions.map((cond) => (
-				<Option key={cond} value={cond} label={cond}>
-					{cond}
-				</Option>
-			))}
-		</Select>
-	);
-}
-
-interface QueryFieldProps {
-	query: Query;
-	queryIndex: number;
-	onUpdate: (query: Query, queryIndex: number) => void;
-	onDelete: (queryIndex: number) => void;
-}
-function QueryField({
-	query,
-	queryIndex,
-	onUpdate,
-	onDelete,
-}: QueryFieldProps): JSX.Element | null {
-	const [isDropDownOpen, setIsDropDownOpen] = useState(false);
-
-	const {
-		fields: { selected },
-	} = useSelector<AppState, ILogsReducer>((store) => store.logs);
-	const getFieldType = useCallback(
-		(inputKey: string): string => {
-			const selectedField = selected.find((field) => inputKey === field.name);
-			if (selectedField) {
-				return selectedField.type;
-			}
-			return '';
-		},
-		[selected],
-	);
-
-	const fieldType = useMemo(
-		() => getFieldType(query[0].value as string),
-		[getFieldType, query],
-	);
-
-	const handleChange = (qIdx: number, value: string): void => {
-		const updatedQuery = [...query];
-		updatedQuery[qIdx].value = value || '';
-
-		if (qIdx === 1) {
-			if (Object.values(QueryOperatorsMultiVal).includes(value)) {
-				if (!Array.isArray(updatedQuery[2].value)) {
-					updatedQuery[2].value = [];
-				}
-			} else if (
-				Object.values(QueryOperatorsSingleVal).includes(value) &&
-				Array.isArray(updatedQuery[2].value)
-			) {
-				updatedQuery[2].value = '';
-			}
-		}
-		onUpdate(updatedQuery, queryIndex);
-	};
-
-	const handleClear = (): void => {
-		onDelete(queryIndex);
-	};
-	if (!Array.isArray(query)) {
-		return null;
-	}
-
-	return (
-		<QueryFieldContainer
-			style={{ ...(queryIndex === 0 && { gridColumnStart: 2 }) }}
-		>
-			<div style={{ flex: 1, minWidth: 100 }}>
-				<FieldKey name={(query[0] && query[0].value) as string} type={fieldType} />
-			</div>
-			<Select
-				defaultActiveFirstOption={false}
-				placeholder="Select Operator"
-				defaultValue={
-					query[1] && query[1].value
-						? (query[1].value as string).toUpperCase()
-						: null
-				}
-				onChange={(e): void => handleChange(1, e)}
-				style={{ minWidth: 150 }}
-			>
-				{Object.values({
-					...QueryOperatorsMultiVal,
-					...QueryOperatorsSingleVal,
-				}).map((cond) => (
-					<Option key={cond} value={cond} label={cond}>
-						{cond}
-					</Option>
-				))}
-			</Select>
-			<div style={{ flex: 2 }}>
-				{Array.isArray(query[2].value) ||
-				Object.values(QueryOperatorsMultiVal).some(
-					(op) => op.toUpperCase() === (query[1].value as string)?.toUpperCase(),
-				) ? (
-					<Select
-						mode="tags"
-						style={{ width: '100%' }}
-						open={isDropDownOpen}
-						onChange={(e): void => handleChange(2, e as never)}
-						defaultValue={(query[2] && query[2].value) || []}
-						notFoundContent={null}
-						onInputKeyDown={(): void => setIsDropDownOpen(true)}
-						onSelect={(): void => setIsDropDownOpen(false)}
-					/>
-				) : (
-					<Input
-						onChange={(e): void => {
-							handleChange(2, e.target.value);
-						}}
-						style={{ width: '100%' }}
-						defaultValue={query[2] && query[2].value}
-						value={query[2] && query[2].value}
-					/>
-				)}
-			</div>
-
-			<Button
-				icon={<X size="md" />}
-				type="text"
-				size="small"
-				onClick={handleClear}
-			/>
-		</QueryFieldContainer>
-	);
-}
-
-interface QueryConditionFieldProps {
-	query: QueryFields;
-	queryIndex: number;
-	onUpdate: (arg0: unknown, arg1: number) => void;
-}
-
-export type Query = { value: string | string[]; type: string }[];
-
-export interface QueryBuilderProps {
-	keyPrefix: string;
-	onDropDownToggleHandler: (value: boolean) => VoidFunction;
-	fieldsQuery: QueryFields[][];
-	setFieldsQuery: (q: QueryFields[][]) => void;
-	syncKeyPrefix: () => void;
-}
-
-function QueryBuilder({
-	keyPrefix,
-	fieldsQuery,
-	setFieldsQuery,
-	onDropDownToggleHandler,
-	syncKeyPrefix,
-}: QueryBuilderProps): JSX.Element {
-	const handleUpdate = (query: Query, queryIndex: number): void => {
-		const updated = [...fieldsQuery];
-		updated[queryIndex] = query as never; // parseQuery(query) as never;
-		setFieldsQuery(updated);
-	};
-
-	const handleDelete = (queryIndex: number): void => {
-		const updated = [...fieldsQuery];
-		if (queryIndex !== 0) {
-			updated.splice(queryIndex - 1, 2);
-		} else {
-			updated.splice(queryIndex, 2);
-		}
-
-		setFieldsQuery(updated);
-
-		// initiate re-render query panel
-		syncKeyPrefix();
-	};
-
-	const QueryUI = (
-		fieldsQuery: QueryFields[][],
-	): JSX.Element | JSX.Element[] => {
-		const result: JSX.Element[] = [];
-		fieldsQuery.forEach((query, idx) => {
-			if (Array.isArray(query) && query.length > 1) {
-				result.push(
-					<QueryField
-						key={keyPrefix}
-						query={query}
-						queryIndex={idx}
-						onUpdate={handleUpdate}
-						onDelete={handleDelete}
-					/>,
-				);
-			} else {
-				result.push(
-					<div key={keyPrefix}>
-						<QueryConditionField
-							query={Array.isArray(query) ? query[0] : query}
-							queryIndex={idx}
-							onUpdate={handleUpdate as never}
-						/>
-					</div>,
-				);
-			}
-		});
-		return result;
-	};
-
-	return (
-		<>
-			<Container isMargin={fieldsQuery.length === 0}>
-				<CategoryHeading>LOG QUERY BUILDER</CategoryHeading>
-				<SquareX onClick={onDropDownToggleHandler(false)} size="md" />
-			</Container>
-
-			<QueryWrapper key={keyPrefix}>{QueryUI(fieldsQuery)}</QueryWrapper>
-		</>
-	);
-}
-
-export default QueryBuilder;

frontend/src/container/LogsSearchFilter/SearchFields/QueryBuilder/styles.ts

@@ -1,17 +0,0 @@
-import styled from 'styled-components';
-
-interface Props {
-	isMargin: boolean;
-}
-export const Container = styled.div<Props>`
-	display: flex;
-	justify-content: space-between;
-	width: 100%;
-	margin-bottom: ${(props): string => (props.isMargin ? '2rem' : '0')};
-`;
-
-export const QueryWrapper = styled.div`
-	display: grid;
-	grid-template-columns: 80px 1fr;
-	margin: 0.5rem 0px;
-`;

frontend/src/container/LogsSearchFilter/SearchFields/Suggestions.tsx

@@ -1,62 +0,0 @@
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
-import { Button } from 'antd';
-import CategoryHeading from 'components/Logs/CategoryHeading';
-import map from 'lodash-es/map';
-import { AppState } from 'store/reducers';
-// import { ADD_SEARCH_FIELD_QUERY_STRING } from 'types/actions/logs';
-import { ILogsReducer } from 'types/reducer/logs';
-
-import FieldKey from './FieldKey';
-
-interface SuggestedItemProps {
-	name: string;
-	type: string;
-	applySuggestion: (name: string) => void;
-}
-function SuggestedItem({
-	name,
-	type,
-	applySuggestion,
-}: SuggestedItemProps): JSX.Element {
-	const addSuggestedField = (): void => {
-		applySuggestion(name);
-	};
-	return (
-		<Button
-			type="text"
-			style={{ display: 'block', padding: '0.2rem' }}
-			onClick={addSuggestedField}
-		>
-			<FieldKey name={name} type={type} />
-		</Button>
-	);
-}
-
-interface SuggestionsProps {
-	applySuggestion: (name: string) => void;
-}
-
-function Suggestions({ applySuggestion }: SuggestionsProps): JSX.Element {
-	const {
-		fields: { selected },
-	} = useSelector<AppState, ILogsReducer>((store) => store.logs);
-
-	return (
-		<div>
-			<CategoryHeading>SUGGESTIONS</CategoryHeading>
-			<div>
-				{map(selected, (field) => (
-					<SuggestedItem
-						key={JSON.stringify(field)}
-						name={field.name}
-						type={field.type}
-						applySuggestion={applySuggestion}
-					/>
-				))}
-			</div>
-		</div>
-	);
-}
-
-export default Suggestions;

frontend/src/container/LogsSearchFilter/SearchFields/index.tsx

@@ -1,123 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
-import { useNotifications } from 'hooks/useNotifications';
-import { reverseParser } from 'lib/logql';
-import { flatten } from 'lodash-es';
-import { AppState } from 'store/reducers';
-import { ILogsReducer } from 'types/reducer/logs';
-
-import { SearchFieldsActionBar } from './ActionBar';
-import QueryBuilder from './QueryBuilder/QueryBuilder';
-import Suggestions from './Suggestions';
-import {
-	createParsedQueryStructure,
-	fieldsQueryIsvalid,
-	hashCode,
-	initQueryKOVPair,
-	prepareConditionOperator,
-	QueryFields,
-} from './utils';
-
-export interface SearchFieldsProps {
-	onDropDownToggleHandler: (value: boolean) => VoidFunction;
-	updateQueryString: (value: string) => void;
-}
-
-function SearchFields({
-	onDropDownToggleHandler,
-	updateQueryString,
-}: SearchFieldsProps): JSX.Element {
-	const {
-		searchFilter: { parsedQuery },
-	} = useSelector<AppState, ILogsReducer>((store) => store.logs);
-
-	const [fieldsQuery, setFieldsQuery] = useState(
-		createParsedQueryStructure([...parsedQuery] as never[]),
-	);
-
-	const keyPrefixRef = useRef(hashCode(JSON.stringify(fieldsQuery)));
-
-	const { notifications } = useNotifications();
-
-	useEffect(() => {
-		const updatedFieldsQuery = createParsedQueryStructure([
-			...parsedQuery,
-		] as never[]);
-		setFieldsQuery(updatedFieldsQuery);
-		const incomingHashCode = hashCode(JSON.stringify(updatedFieldsQuery));
-		if (incomingHashCode !== keyPrefixRef.current) {
-			keyPrefixRef.current = incomingHashCode;
-		}
-	}, [parsedQuery]);
-
-	// syncKeyPrefix initiates re-render. useful in situations like
-	// delete field (in search panel). this method allows condiitonally
-	// setting keyPrefix as doing it on every update of query initiates
-	// a re-render. this is a problem for text fields where input focus goes away.
-	const syncKeyPrefix = (): void => {
-		keyPrefixRef.current = hashCode(JSON.stringify(fieldsQuery));
-	};
-
-	const addSuggestedField = useCallback(
-		(name: string): void => {
-			if (!name) {
-				return;
-			}
-
-			const query = [...fieldsQuery];
-
-			if (fieldsQuery.length > 0) {
-				query.push([prepareConditionOperator()]);
-			}
-
-			const newField: QueryFields[] = [];
-			initQueryKOVPair(name).forEach((q) => newField.push(q));
-
-			query.push(newField);
-			keyPrefixRef.current = hashCode(JSON.stringify(query));
-			setFieldsQuery(query);
-		},
-		[fieldsQuery, setFieldsQuery],
-	);
-
-	const applyUpdate = useCallback((): void => {
-		const flatParsedQuery = flatten(fieldsQuery);
-
-		if (!fieldsQueryIsvalid(flatParsedQuery)) {
-			notifications.error({
-				message: 'Please enter a valid criteria for each of the selected fields',
-			});
-			return;
-		}
-
-		keyPrefixRef.current = hashCode(JSON.stringify(flatParsedQuery));
-		updateQueryString(reverseParser(flatParsedQuery));
-		onDropDownToggleHandler(false)();
-	}, [fieldsQuery, notifications, onDropDownToggleHandler, updateQueryString]);
-
-	const clearFilters = useCallback((): void => {
-		keyPrefixRef.current = hashCode(JSON.stringify([]));
-		setFieldsQuery([]);
-		updateQueryString('');
-	}, [updateQueryString]);
-
-	return (
-		<>
-			<QueryBuilder
-				key={keyPrefixRef.current}
-				keyPrefix={keyPrefixRef.current}
-				onDropDownToggleHandler={onDropDownToggleHandler}
-				fieldsQuery={fieldsQuery}
-				setFieldsQuery={setFieldsQuery}
-				syncKeyPrefix={syncKeyPrefix}
-			/>
-			<SearchFieldsActionBar
-				applyUpdate={applyUpdate}
-				clearFilters={clearFilters}
-			/>
-			<Suggestions applySuggestion={addSuggestedField} />
-		</>
-	);
-}
-export default SearchFields;

frontend/src/container/LogsSearchFilter/SearchFields/styles.tsx

@@ -1,16 +0,0 @@
-import { blue } from '@ant-design/colors';
-import styled from 'styled-components';
-
-export const QueryFieldContainer = styled.div`
-	padding: 0.25rem 0.5rem;
-	margin: 0.1rem 0.5rem 0;
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	border-radius: 0.25rem;
-	gap: 1rem;
-	width: 100%;
-	&:hover {
-		background: ${blue[6]};
-	}
-`;

frontend/src/container/LogsSearchFilter/SearchFields/utils.ts

@@ -1,137 +0,0 @@
-// @ts-nocheck
-
-import {
-	ConditionalOperators,
-	QueryTypes,
-	ValidTypeSequence,
-	ValidTypeValue,
-} from 'lib/logql/tokens';
-
-export interface QueryFields {
-	type: keyof typeof QueryTypes;
-	value: string | string[];
-}
-
-export function fieldsQueryIsvalid(queryFields: QueryFields[]): boolean {
-	let lastOp: string;
-	let result = true;
-	queryFields.forEach((q, idx) => {
-		if (!q.value || q.value === null || q.value === '') {
-			result = false;
-		}
-
-		if (Array.isArray(q.value) && q.value.length === 0) {
-			result = false;
-		}
-
-		const nextOp = idx < queryFields.length ? queryFields[idx + 1] : undefined;
-		if (!ValidTypeSequence(lastOp?.type, q?.type, nextOp?.type)) {
-			result = false;
-		}
-
-		if (!ValidTypeValue(lastOp?.value, q.value)) {
-			result = false;
-		}
-		lastOp = q;
-	});
-	return result;
-}
-
-export const queryKOVPair = (): QueryFields[] => [
-	{
-		type: QueryTypes.QUERY_KEY,
-		value: null,
-	},
-	{
-		type: QueryTypes.QUERY_OPERATOR,
-		value: null,
-	},
-	{
-		type: QueryTypes.QUERY_VALUE,
-		value: null,
-	},
-];
-
-export const initQueryKOVPair = (
-	name: string = null,
-	op: string = null,
-	value: string | string[] = null,
-): QueryFields[] => [
-	{
-		type: QueryTypes.QUERY_KEY,
-		value: name,
-	},
-	{
-		type: QueryTypes.QUERY_OPERATOR,
-		value: op,
-	},
-	{
-		type: QueryTypes.QUERY_VALUE,
-		value: value,
-	},
-];
-
-export const prepareConditionOperator = (
-	op: string = ConditionalOperators.AND,
-): QueryFields => {
-	return {
-		type: QueryTypes.CONDITIONAL_OPERATOR,
-		value: op,
-	};
-};
-
-export const createParsedQueryStructure = (
-	parsedQuery = [],
-): QueryFields[][] => {
-	if (parsedQuery.length === 0) {
-		return parsedQuery;
-	}
-
-	const structuredArray = [queryKOVPair()];
-
-	let cond;
-	let qCtr = -1;
-	parsedQuery.forEach((query) => {
-		if (cond) {
-			structuredArray.push(cond);
-			structuredArray.push(queryKOVPair());
-			cond = null;
-			qCtr = -1;
-		}
-		const stagingArr = structuredArray.at(-1);
-		const prevQuery =
-			Array.isArray(stagingArr) && qCtr >= 0 ? stagingArr[qCtr] : null;
-
-		if (query.type === QueryTypes.QUERY_KEY) {
-			stagingArr[qCtr + 1] = query;
-		} else if (
-			query.type === QueryTypes.QUERY_OPERATOR &&
-			prevQuery &&
-			prevQuery.type === QueryTypes.QUERY_KEY
-		) {
-			stagingArr[qCtr + 1] = query;
-		} else if (
-			query.type === QueryTypes.QUERY_VALUE &&
-			prevQuery &&
-			prevQuery.type === QueryTypes.QUERY_OPERATOR
-		) {
-			stagingArr[qCtr + 1] = query;
-		} else if (query.type === QueryTypes.CONDITIONAL_OPERATOR) {
-			cond = query;
-		}
-		qCtr++;
-	});
-	return structuredArray;
-};
-
-export const hashCode = (s: string): string => {
-	if (!s) {
-		return '0';
-	}
-	return `${Math.abs(
-		[...s].reduce((a, b) => {
-			a = (a << 5) - a + b.codePointAt(0);
-			return a & a;
-		}, 0),
-	)}`;
-};

frontend/src/container/LogsSearchFilter/index.tsx

@@ -1,230 +0,0 @@
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { connect, useDispatch, useSelector } from 'react-redux';
-import { Input, InputRef, Popover } from 'antd';
-import useUrlQuery from 'hooks/useUrlQuery';
-import getStep from 'lib/getStep';
-import debounce from 'lodash-es/debounce';
-import { getIdConditions } from 'pages/Logs/utils';
-// eslint-disable-next-line no-restricted-imports
-import { bindActionCreators, Dispatch } from 'redux';
-import { ThunkDispatch } from 'redux-thunk';
-import { GetLogsFields } from 'store/actions/logs/getFields';
-import { getLogs } from 'store/actions/logs/getLogs';
-import { getLogsAggregate } from 'store/actions/logs/getLogsAggregate';
-import { AppState } from 'store/reducers';
-import AppActions from 'types/actions';
-import {
-	FLUSH_LOGS,
-	SET_LOADING,
-	SET_LOADING_AGGREGATE,
-	TOGGLE_LIVE_TAIL,
-} from 'types/actions/logs';
-import { GlobalReducer } from 'types/reducer/globalTime';
-import { ILogsReducer } from 'types/reducer/logs';
-import { popupContainer } from 'utils/selectPopupContainer';
-
-import SearchFields from './SearchFields';
-import { Container, DropDownContainer } from './styles';
-import { useSearchParser } from './useSearchParser';
-
-function SearchFilter({
-	getLogs,
-	getLogsAggregate,
-	getLogsFields,
-}: SearchFilterProps): JSX.Element {
-	const { updateQueryString, queryString } = useSearchParser();
-	const [searchText, setSearchText] = useState(queryString);
-	const [showDropDown, setShowDropDown] = useState(false);
-	const searchRef = useRef<InputRef>(null);
-	const { logLinesPerPage, idEnd, idStart, liveTail, order } = useSelector<
-		AppState,
-		ILogsReducer
-	>((state) => state.logs);
-
-	const globalTime = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-	const dispatch = useDispatch<Dispatch<AppActions>>();
-
-	// keep sync with url queryString
-	useEffect(() => {
-		setSearchText(queryString);
-	}, [queryString]);
-
-	const debouncedupdateQueryString = useMemo(
-		() => debounce(updateQueryString, 300),
-		[updateQueryString],
-	);
-
-	const onDropDownToggleHandler = useCallback(
-		(value: boolean) => (): void => {
-			setShowDropDown(value);
-		},
-		[],
-	);
-
-	const handleSearch = useCallback(
-		(customQuery: string) => {
-			getLogsFields();
-			const { maxTime, minTime } = globalTime;
-
-			if (liveTail === 'PLAYING') {
-				dispatch({
-					type: TOGGLE_LIVE_TAIL,
-					payload: 'PAUSED',
-				});
-				dispatch({
-					type: FLUSH_LOGS,
-				});
-				dispatch({
-					type: TOGGLE_LIVE_TAIL,
-					payload: liveTail,
-				});
-				dispatch({
-					type: SET_LOADING,
-					payload: false,
-				});
-
-				getLogsAggregate({
-					timestampStart: minTime,
-					timestampEnd: maxTime,
-					step: getStep({
-						start: minTime,
-						end: maxTime,
-						inputFormat: 'ns',
-					}),
-					q: customQuery,
-					...(idStart ? { idGt: idStart } : {}),
-					...(idEnd ? { idLt: idEnd } : {}),
-				});
-			} else {
-				getLogs({
-					q: customQuery,
-					limit: logLinesPerPage,
-					orderBy: 'timestamp',
-					order,
-					timestampStart: minTime,
-					timestampEnd: maxTime,
-					...getIdConditions(idStart, idEnd, order),
-				});
-
-				getLogsAggregate({
-					timestampStart: minTime,
-					timestampEnd: maxTime,
-					step: getStep({
-						start: minTime,
-						end: maxTime,
-						inputFormat: 'ns',
-					}),
-					q: customQuery,
-				});
-			}
-		},
-		[
-			dispatch,
-			getLogs,
-			getLogsAggregate,
-			idEnd,
-			idStart,
-			liveTail,
-			logLinesPerPage,
-			globalTime,
-			getLogsFields,
-			order,
-		],
-	);
-
-	const urlQuery = useUrlQuery();
-	const urlQueryString = urlQuery.get('q');
-
-	useEffect(() => {
-		dispatch({
-			type: SET_LOADING,
-			payload: true,
-		});
-		dispatch({
-			type: SET_LOADING_AGGREGATE,
-			payload: true,
-		});
-
-		const debouncedHandleSearch = debounce(handleSearch, 600);
-
-		debouncedHandleSearch(urlQueryString || '');
-
-		return (): void => {
-			debouncedHandleSearch.cancel();
-		};
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [
-		urlQueryString,
-		idEnd,
-		idStart,
-		logLinesPerPage,
-		dispatch,
-		globalTime.maxTime,
-		globalTime.minTime,
-		order,
-	]);
-
-	const onPopOverChange = useCallback(
-		(isVisible: boolean) => {
-			onDropDownToggleHandler(isVisible)();
-		},
-		[onDropDownToggleHandler],
-	);
-
-	return (
-		<Container>
-			<Popover
-				getPopupContainer={popupContainer}
-				placement="bottom"
-				content={
-					<DropDownContainer>
-						<SearchFields
-							updateQueryString={updateQueryString}
-							onDropDownToggleHandler={onDropDownToggleHandler}
-						/>
-					</DropDownContainer>
-				}
-				trigger="click"
-				overlayInnerStyle={{
-					width: `${searchRef?.current?.input?.offsetWidth || 0}px`,
-				}}
-				open={showDropDown}
-				destroyTooltipOnHide
-				onOpenChange={onPopOverChange}
-			>
-				<Input.Search
-					ref={searchRef}
-					placeholder="Search Filter"
-					value={searchText}
-					onChange={(e): void => {
-						const { value } = e.target;
-						setSearchText(value);
-					}}
-					onSearch={debouncedupdateQueryString}
-					allowClear
-				/>
-			</Popover>
-		</Container>
-	);
-}
-
-interface DispatchProps {
-	getLogs: typeof getLogs;
-	getLogsAggregate: typeof getLogsAggregate;
-	getLogsFields: typeof GetLogsFields;
-}
-
-type SearchFilterProps = DispatchProps;
-
-const mapDispatchToProps = (
-	dispatch: ThunkDispatch<unknown, unknown, AppActions>,
-): DispatchProps => ({
-	getLogs: bindActionCreators(getLogs, dispatch),
-	getLogsAggregate: bindActionCreators(getLogsAggregate, dispatch),
-	getLogsFields: bindActionCreators(GetLogsFields, dispatch),
-});
-
-export default connect(null, mapDispatchToProps)(memo(SearchFilter));

frontend/src/container/LogsSearchFilter/styles.ts

@@ -1,14 +0,0 @@
-import { Card } from 'antd';
-import styled from 'styled-components';
-
-export const DropDownContainer = styled(Card)`
-	.ant-card-body {
-		width: 100%;
-	}
-`;
-
-export const Container = styled.div`
-	width: 100%;
-	flex: 1;
-	position: relative;
-`;

frontend/src/container/LogsSearchFilter/useSearchParser.ts

@@ -1,81 +0,0 @@
-import { useCallback, useEffect } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { useDispatch, useSelector } from 'react-redux';
-import { QueryParams } from 'constants/query';
-import useUrlQuery from 'hooks/useUrlQuery';
-import { getMinMaxForSelectedTime } from 'lib/getMinMax';
-import history from 'lib/history';
-import { parseQuery } from 'lib/logql';
-import isEqual from 'lodash-es/isEqual';
-// eslint-disable-next-line no-restricted-imports
-import { Dispatch } from 'redux';
-import { AppState } from 'store/reducers';
-import AppActions from 'types/actions';
-import {
-	SET_SEARCH_QUERY_PARSED_PAYLOAD,
-	SET_SEARCH_QUERY_STRING,
-} from 'types/actions/logs';
-import { GlobalReducer } from 'types/reducer/globalTime';
-import { ILogsReducer } from 'types/reducer/logs';
-
-import { getGlobalTime } from './utils';
-
-export function useSearchParser(): {
-	queryString: string;
-	parsedQuery: unknown;
-	updateQueryString: (arg0: string) => void;
-} {
-	const dispatch = useDispatch<Dispatch<AppActions>>();
-	const {
-		searchFilter: { parsedQuery, queryString },
-		order,
-	} = useSelector<AppState, ILogsReducer>((store) => store.logs);
-
-	const urlQuery = useUrlQuery();
-	const parsedFilters = urlQuery.get('q');
-
-	const { minTime, maxTime, selectedTime } = useSelector<
-		AppState,
-		GlobalReducer
-	>((store) => store.globalTime);
-
-	const updateQueryString = useCallback(
-		(updatedQueryString: string) => {
-			history.replace({
-				pathname: history.location.pathname,
-				search: `?${QueryParams.q}=${updatedQueryString}&${QueryParams.order}=${order}`,
-			});
-
-			const globalTime = getMinMaxForSelectedTime(selectedTime, minTime, maxTime);
-
-			dispatch({
-				type: SET_SEARCH_QUERY_STRING,
-				payload: {
-					searchQueryString: updatedQueryString,
-					globalTime: getGlobalTime(selectedTime, globalTime),
-				},
-			});
-
-			const parsedQueryFromString = parseQuery(updatedQueryString);
-			if (!isEqual(parsedQuery, parsedQueryFromString)) {
-				dispatch({
-					type: SET_SEARCH_QUERY_PARSED_PAYLOAD,
-					payload: parsedQueryFromString,
-				});
-			}
-		},
-		// need to hide this warning as we don't want to update the query string on every change
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[dispatch, parsedQuery, selectedTime, queryString],
-	);
-
-	useEffect(() => {
-		updateQueryString(parsedFilters || '');
-	}, [parsedFilters, updateQueryString]);
-
-	return {
-		queryString,
-		parsedQuery,
-		updateQueryString,
-	};
-}

frontend/src/container/LogsSearchFilter/utils.ts

@@ -1,15 +0,0 @@
-import {
-	CustomTimeType,
-	Time,
-} from 'container/TopNav/DateTimeSelectionV2/types';
-import { GetMinMaxPayload } from 'lib/getMinMax';
-
-export const getGlobalTime = (
-	selectedTime: Time | CustomTimeType,
-	globalTime: GetMinMaxPayload,
-): GetMinMaxPayload | undefined => {
-	if (selectedTime === 'custom') {
-		return undefined;
-	}
-	return globalTime;
-};

frontend/src/container/LogsTable/index.tsx

@@ -1,164 +0,0 @@
-import { memo, useCallback, useMemo } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
-import { Virtuoso } from 'react-virtuoso';
-import { Card } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import LogDetail from 'components/LogDetail';
-import { VIEW_TYPES } from 'components/LogDetail/constants';
-// components
-import ListLogView from 'components/Logs/ListLogView';
-import RawLogView from 'components/Logs/RawLogView';
-import LogsTableView from 'components/Logs/TableView';
-import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-import Spinner from 'components/Spinner';
-import { CARD_BODY_STYLE } from 'constants/card';
-import { LOCALSTORAGE } from 'constants/localStorage';
-import { useOptionsMenu } from 'container/OptionsMenu';
-import { useActiveLog } from 'hooks/logs/useActiveLog';
-import { AppState } from 'store/reducers';
-import { DataSource, StringOperators } from 'types/common/queryBuilder';
-// interfaces
-import { ILogsReducer } from 'types/reducer/logs';
-
-// styles
-import { Container, Heading } from './styles';
-
-import './logsTable.styles.scss';
-
-export type LogViewMode = 'raw' | 'table' | 'list';
-
-type LogsTableProps = {
-	viewMode: LogViewMode;
-	linesPerRow: number;
-};
-
-function LogsTable(props: LogsTableProps): JSX.Element {
-	const { viewMode, linesPerRow } = props;
-
-	const { activeLog, onClearActiveLog, onAddToQuery, onSetActiveLog } =
-		useActiveLog();
-
-	const {
-		logs,
-		fields: { selected },
-		isLoading,
-		liveTail,
-	} = useSelector<AppState, ILogsReducer>((state) => state.logs);
-
-	const isLiveTail = useMemo(
-		() => logs.length === 0 && liveTail === 'PLAYING',
-		[logs?.length, liveTail],
-	);
-
-	const isNoLogs = useMemo(
-		() => logs.length === 0 && liveTail === 'STOPPED',
-		[logs?.length, liveTail],
-	);
-
-	const { options } = useOptionsMenu({
-		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
-		// this component will alwyays be called on old logs explorer page itself!
-		dataSource: DataSource.LOGS,
-		// and we do not have table / timeseries aggregated views in the old logs explorer!
-		aggregateOperator: StringOperators.NOOP,
-	});
-
-	const getItemContent = useCallback(
-		(index: number): JSX.Element => {
-			const log = logs[index];
-
-			if (viewMode === 'raw') {
-				return (
-					<RawLogView
-						key={log.id}
-						data={log}
-						linesPerRow={linesPerRow}
-						selectedFields={selected}
-						fontSize={options.fontSize}
-					/>
-				);
-			}
-
-			return (
-				<ListLogView
-					key={log.id}
-					logData={log}
-					selectedFields={selected}
-					linesPerRow={linesPerRow}
-					onAddToQuery={onAddToQuery}
-					onSetActiveLog={onSetActiveLog}
-					fontSize={options.fontSize}
-				/>
-			);
-		},
-		[
-			logs,
-			viewMode,
-			selected,
-			linesPerRow,
-			onAddToQuery,
-			onSetActiveLog,
-			options.fontSize,
-		],
-	);
-
-	const renderContent = useMemo(() => {
-		if (viewMode === 'table') {
-			return (
-				<LogsTableView
-					onClickExpand={onSetActiveLog}
-					logs={logs}
-					fields={selected}
-					linesPerRow={linesPerRow}
-					fontSize={options.fontSize}
-				/>
-			);
-		}
-
-		return (
-			<Card className="logs-card" bodyStyle={CARD_BODY_STYLE}>
-				<OverlayScrollbar isVirtuoso>
-					<Virtuoso totalCount={logs.length} itemContent={getItemContent} />
-				</OverlayScrollbar>
-			</Card>
-		);
-	}, [
-		getItemContent,
-		linesPerRow,
-		logs,
-		onSetActiveLog,
-		options.fontSize,
-		selected,
-		viewMode,
-	]);
-
-	if (isLoading) {
-		return <Spinner height={20} tip="Getting Logs" />;
-	}
-
-	return (
-		<Container>
-			{viewMode !== 'table' && (
-				<Heading>
-					<Typography.Text>Event</Typography.Text>
-				</Heading>
-			)}
-
-			{isLiveTail && <Typography>Getting live logs...</Typography>}
-
-			{isNoLogs && <Typography>No logs lines found</Typography>}
-
-			{renderContent}
-			<LogDetail
-				selectedTab={VIEW_TYPES.OVERVIEW}
-				log={activeLog}
-				onClose={onClearActiveLog}
-				onAddToQuery={onAddToQuery}
-				onClickActionItem={onAddToQuery}
-			/>
-		</Container>
-	);
-}
-
-export default memo(LogsTable);

frontend/src/container/LogsTable/logsTable.styles.scss

@@ -1,3 +0,0 @@
-.logs-card {
-	flex: 1;
-}

frontend/src/container/LogsTable/styles.ts

@@ -1,20 +0,0 @@
-import { Card } from 'antd';
-import styled from 'styled-components';
-
-export const Container = styled.div`
-	overflow-x: hidden;
-	width: 100%;
-	margin-bottom: 1rem;
-	margin-top: 0.5rem;
-	display: flex;
-	flex-direction: column;
-	flex: 1;
-`;
-
-export const Heading = styled(Card)`
-	margin-bottom: 0.1rem;
-	height: 32px;
-	.ant-card-body {
-		padding: 0.3rem 0.5rem;
-	}
-`;

frontend/src/container/NewExplorerCTA/config.ts

@@ -1,8 +1,6 @@
 import ROUTES from 'constants/routes';
 
 export const buttonText: Record<string, string> = {
-	[ROUTES.LOGS_EXPLORER]: 'Old Explorer',
 	[ROUTES.TRACE]: 'New Explorer',
-	[ROUTES.OLD_LOGS_EXPLORER]: 'New Explorer',
 	[ROUTES.TRACES_EXPLORER]: 'Old Explorer',
 };