fix(metrics-explorer): stop the summary table clipping inside the tab scroller

The per-page viewport heights ignored the trial/payment banners, so the
save/discard footer fell outside the pane and the new overflow rule clipped
it. The pane is bounded to the viewport now, so height: 100% is enough.

docs/api/openapi.yml

@@ -3321,53 +3321,6 @@ components:
         repeatVariable:
           type: string
       type: object
-    DashboardtypesAreaChartAppearance:
-      properties:
-        fillMode:
-          $ref: '#/components/schemas/DashboardtypesAreaFillMode'
-        fillOpacity:
-          $ref: '#/components/schemas/DashboardtypesFillOpacity'
-        lineInterpolation:
-          $ref: '#/components/schemas/DashboardtypesLineInterpolation'
-        lineStyle:
-          $ref: '#/components/schemas/DashboardtypesLineStyle'
-        showPoints:
-          type: boolean
-        spanGaps:
-          $ref: '#/components/schemas/DashboardtypesSpanGaps'
-      type: object
-    DashboardtypesAreaChartPanelSpec:
-      properties:
-        axes:
-          $ref: '#/components/schemas/DashboardtypesAxes'
-        chartAppearance:
-          $ref: '#/components/schemas/DashboardtypesAreaChartAppearance'
-        formatting:
-          $ref: '#/components/schemas/DashboardtypesPanelFormatting'
-        legend:
-          $ref: '#/components/schemas/DashboardtypesLegend'
-        thresholds:
-          items:
-            $ref: '#/components/schemas/DashboardtypesThresholdWithLabel'
-          nullable: true
-          type: array
-        visualization:
-          $ref: '#/components/schemas/DashboardtypesAreaChartVisualization'
-      type: object
-    DashboardtypesAreaChartVisualization:
-      properties:
-        fillSpans:
-          type: boolean
-        stack:
-          $ref: '#/components/schemas/DashboardtypesStackMode'
-        timePreference:
-          $ref: '#/components/schemas/DashboardtypesTimePreference'
-      type: object
-    DashboardtypesAreaFillMode:
-      enum:
-      - solid
-      - gradient
-      type: string
     DashboardtypesAxes:
       properties:
         isLogScale:
@@ -3599,11 +3552,6 @@ components:
       - gradient
       - none
       type: string
-    DashboardtypesFillOpacity:
-      maximum: 1
-      minimum: 0
-      nullable: true
-      type: number
     DashboardtypesGettableDashboardV2:
       properties:
         createdAt:
@@ -4066,7 +4014,6 @@ components:
     DashboardtypesPanelPlugin:
       discriminator:
         mapping:
-          signoz/AreaChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec'
           signoz/BarChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec'
           signoz/HistogramPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec'
           signoz/ListPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
@@ -4079,7 +4026,6 @@ components:
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec'
-      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec'
@@ -4091,7 +4037,6 @@ components:
       enum:
       - signoz/TimeSeriesPanel
       - signoz/BarChartPanel
-      - signoz/AreaChartPanel
       - signoz/NumberPanel
       - signoz/PieChartPanel
       - signoz/TablePanel
@@ -4099,18 +4044,6 @@ components:
       - signoz/ListPanel
       - signoz/TextPanel
       type: string
-    DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec:
-      properties:
-        kind:
-          enum:
-          - signoz/AreaChartPanel
-          type: string
-        spec:
-          $ref: '#/components/schemas/DashboardtypesAreaChartPanelSpec'
-      required:
-      - kind
-      - spec
-      type: object
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec:
       properties:
         kind:
@@ -4441,12 +4374,6 @@ components:
             are connected.
           type: boolean
       type: object
-    DashboardtypesStackMode:
-      enum:
-      - none
-      - normal
-      - percent
-      type: string
     DashboardtypesStorableDashboardData:
       additionalProperties: {}
       type: object
@@ -11175,9 +11102,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - cloud-integration:read
+        - VIEWER
       - tokenizer:
-        - cloud-integration:read
+        - VIEWER
       summary: Agent check-in
       tags:
       - cloudintegration
@@ -11227,9 +11154,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - cloud-integration:list
+        - ADMIN
       - tokenizer:
-        - cloud-integration:list
+        - ADMIN
       summary: List accounts
       tags:
       - cloudintegration
@@ -11284,9 +11211,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - cloud-integration:create
+        - ADMIN
       - tokenizer:
-        - cloud-integration:create
+        - ADMIN
       summary: Create account
       tags:
       - cloudintegration
@@ -11329,9 +11256,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - cloud-integration:delete
+        - ADMIN
       - tokenizer:
-        - cloud-integration:delete
+        - ADMIN
       summary: Disconnect account
       tags:
       - cloudintegration
@@ -11397,9 +11324,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - cloud-integration:read
+        - ADMIN
       - tokenizer:
-        - cloud-integration:read
+        - ADMIN
       summary: Get account
       tags:
       - cloudintegration
@@ -11446,9 +11373,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - cloud-integration:update
+        - ADMIN
       - tokenizer:
-        - cloud-integration:update
+        - ADMIN
       summary: Update account
       tags:
       - cloudintegration
@@ -11504,9 +11431,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - cloud-integration:list
+        - ADMIN
       - tokenizer:
-        - cloud-integration:list
+        - ADMIN
       summary: List account services metadata
       tags:
       - cloudintegration
@@ -11579,9 +11506,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - cloud-integration:read
+        - ADMIN
       - tokenizer:
-        - cloud-integration:read
+        - ADMIN
       summary: Get service for account
       tags:
       - cloudintegration
@@ -11633,9 +11560,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - cloud-integration:update
+        - ADMIN
       - tokenizer:
-        - cloud-integration:update
+        - ADMIN
       summary: Update service
       tags:
       - cloudintegration
@@ -11690,9 +11617,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - cloud-integration:read
+        - VIEWER
       - tokenizer:
-        - cloud-integration:read
+        - VIEWER
       summary: Agent check-in
       tags:
       - cloudintegration
@@ -11743,17 +11670,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ingestion-key:create
-        - serviceaccount:create
-        - factor-api-key:create
-        - serviceaccount:attach
-        - role:attach
+        - ADMIN
       - tokenizer:
-        - ingestion-key:create
-        - serviceaccount:create
-        - factor-api-key:create
-        - serviceaccount:attach
-        - role:attach
+        - ADMIN
       summary: Get connection credentials
       tags:
       - cloudintegration
@@ -11803,8 +11722,10 @@ paths:
                 $ref: '#/components/schemas/RenderErrorResponse'
           description: Internal Server Error
       security:
-      - api_key: []
-      - tokenizer: []
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
       summary: List services metadata
       tags:
       - cloudintegration
@@ -11859,8 +11780,10 @@ paths:
                 $ref: '#/components/schemas/RenderErrorResponse'
           description: Internal Server Error
       security:
-      - api_key: []
-      - tokenizer: []
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
       summary: Get service
       tags:
       - cloudintegration

frontend/public/locales/en-GB/titles.json

@@ -4,6 +4,7 @@
 	"GET_STARTED": "SigNoz | Get Started",
 	"SERVICE_METRICS": "SigNoz | Service Metrics",
 	"SERVICE_MAP": "SigNoz | Service Map",
+	"TRACE": "SigNoz | Trace",
 	"HOME": "SigNoz | Home",
 	"TRACE_DETAIL": "SigNoz | Trace Detail",
 	"TRACES_EXPLORER": "SigNoz | Traces Explorer",
@@ -55,6 +56,7 @@
 	"SERVICE_ACCOUNTS_SETTINGS": "SigNoz | Service Accounts",
 	"MCP_SERVER": "SigNoz | MCP Server",
 	"AI_ASSISTANT": "SigNoz | AI Assistant",
+	"TRACE_DETAIL_OLD": "SigNoz | Trace Detail",
 	"SERVICE_TOP_LEVEL_OPERATIONS": "SigNoz | Service Operations",
 	"ROLE_DETAILS": "SigNoz | Role Details",
 	"TRACES_FUNNELS_DETAIL": "SigNoz | Funnel",

frontend/public/locales/en/titles.json

@@ -14,6 +14,7 @@
 	"GET_STARTED_AZURE_MONITORING": "SigNoz | Get Started | AZURE",
 	"GET_STARTED": "SigNoz | Get Started with SigNoz Cloud",
 	"GET_STARTED_WITH_CLOUD": "SigNoz | Get Started with SigNoz Cloud",
+	"TRACE": "SigNoz | Trace",
 	"TRACE_DETAIL": "SigNoz | Trace Detail",
 	"TRACES_EXPLORER": "SigNoz | Traces Explorer",
 	"SETTINGS": "SigNoz | Settings",
@@ -42,6 +43,7 @@
 	"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",
@@ -77,6 +79,7 @@
 	"SERVICE_ACCOUNTS_SETTINGS": "SigNoz | Service Accounts",
 	"MCP_SERVER": "SigNoz | MCP Server",
 	"AI_ASSISTANT": "SigNoz | AI Assistant",
+	"TRACE_DETAIL_OLD": "SigNoz | Trace Detail",
 	"SERVICE_TOP_LEVEL_OPERATIONS": "SigNoz | Service Operations",
 	"ROLE_DETAILS": "SigNoz | Role Details",
 	"ROLE_CREATE": "SigNoz | Create Role",

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

@@ -1588,15 +1588,24 @@ describe('PrivateRoute', () => {
 				deniedRoles: DENIED_ROLES,
 			},
 			TRACES_EXPLORER: { path: ROUTES.TRACES_EXPLORER, deniedRoles: DENIED_ROLES },
+			TRACE: { path: ROUTES.TRACE, deniedRoles: DENIED_ROLES },
 			TRACE_DETAIL: {
 				path: ROUTES.TRACE_DETAIL.replace(':id', 'trace-id-1'),
 				deniedRoles: DENIED_ROLES,
 			},
+			TRACE_DETAIL_OLD: {
+				path: ROUTES.TRACE_DETAIL_OLD.replace(':id', 'trace-id-1'),
+				deniedRoles: DENIED_ROLES,
+			},
 			// LOGS and LOGS_EXPLORER share a path - matchPath resolves it to whichever
 			// route definition comes last, and both keys are authz-aware either way.
 			LOGS: { path: ROUTES.LOGS, deniedRoles: DENIED_ROLES },
 			LOGS_EXPLORER: { path: ROUTES.LOGS_EXPLORER, deniedRoles: DENIED_ROLES },
 			LIVE_LOGS: { path: ROUTES.LIVE_LOGS, deniedRoles: DENIED_ROLES },
+			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

@@ -53,6 +53,17 @@ export const TracesFunnelDetails = Loadable(
 		),
 );
 
+export const TraceFilter = Loadable(
+	() => import(/* webpackChunkName: "Trace Filter Page" */ 'pages/Trace'),
+);
+
+export const TraceDetailOldRedirect = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "TraceDetailOldRedirect" */ 'pages/TraceDetailOldRedirect/index'
+		),
+);
+
 export const TraceDetailV3 = Loadable(
 	() =>
 		import(
@@ -154,6 +165,14 @@ export const Logs = Loadable(
 	() => import(/* webpackChunkName: "Logs" */ 'pages/LogsModulePage'),
 );
 
+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

@@ -26,11 +26,13 @@ import {
 	LiveLogs,
 	Login,
 	Logs,
+	LogsExplorer,
 	LogsIndexToFields,
 	LogsSaveViews,
 	MessagingQueuesMainPage,
 	MeterExplorerPage,
 	MetricsExplorer,
+	OldLogsExplorer,
 	OnboardingV2,
 	OrgOnboarding,
 	PasswordReset,
@@ -45,7 +47,9 @@ import {
 	SomethingWentWrong,
 	StatusPage,
 	SupportPage,
+	TraceDetailOldRedirect,
 	TraceDetailV3,
+	TraceFilter,
 	TracesExplorer,
 	TracesFunnelDetails,
 	TracesFunnels,
@@ -128,6 +132,14 @@ const routes: AppRoutes[] = [
 		exact: true,
 		key: 'LOGS_SAVE_VIEWS',
 	},
+	// Legacy /trace-old/:id redirects to the current /trace/:id view.
+	{
+		path: ROUTES.TRACE_DETAIL_OLD,
+		exact: true,
+		component: TraceDetailOldRedirect,
+		isPrivate: true,
+		key: 'TRACE_DETAIL_OLD',
+	},
 	{
 		path: ROUTES.TRACE_DETAIL,
 		exact: true,
@@ -212,6 +224,13 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 		key: 'ALERT_OVERVIEW',
 	},
+	{
+		path: ROUTES.TRACE,
+		exact: true,
+		component: TraceFilter,
+		isPrivate: true,
+		key: 'TRACE',
+	},
 	{
 		path: ROUTES.TRACES_EXPLORER,
 		exact: true,
@@ -282,6 +301,20 @@ const routes: AppRoutes[] = [
 		key: 'LOGS',
 		isPrivate: true,
 	},
+	{
+		path: ROUTES.LOGS_EXPLORER,
+		exact: true,
+		component: LogsExplorer,
+		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/sigNoz.schemas.ts

@@ -4144,52 +4144,6 @@ export interface DashboardGridLayoutSpecDTO {
 	repeatVariable?: string;
 }
 
-export enum DashboardtypesAreaFillModeDTO {
-	solid = 'solid',
-	gradient = 'gradient',
-}
-/**
- * @minimum 0
- * @maximum 1
- * @nullable
- */
-export type DashboardtypesFillOpacityDTO = number | null;
-
-export enum DashboardtypesLineInterpolationDTO {
-	linear = 'linear',
-	spline = 'spline',
-	step_after = 'step_after',
-	step_before = 'step_before',
-}
-export enum DashboardtypesLineStyleDTO {
-	solid = 'solid',
-	dashed = 'dashed',
-}
-export interface DashboardtypesSpanGapsDTO {
-	/**
-	 * @type string
-	 * @description The maximum gap size to connect when fillOnlyBelow is true. Gaps larger than this duration are left disconnected.
-	 */
-	fillLessThan?: string;
-	/**
-	 * @type boolean
-	 * @description Controls whether lines connect across null values. When false (default), all gaps are connected. When true, only gaps smaller than fillLessThan are connected.
-	 */
-	fillOnlyBelow?: boolean;
-}
-
-export interface DashboardtypesAreaChartAppearanceDTO {
-	fillMode?: DashboardtypesAreaFillModeDTO;
-	fillOpacity?: DashboardtypesFillOpacityDTO | null;
-	lineInterpolation?: DashboardtypesLineInterpolationDTO;
-	lineStyle?: DashboardtypesLineStyleDTO;
-	/**
-	 * @type boolean
-	 */
-	showPoints?: boolean;
-	spanGaps?: DashboardtypesSpanGapsDTO;
-}
-
 export interface DashboardtypesAxesDTO {
 	/**
 	 * @type boolean
@@ -4267,11 +4221,6 @@ export interface DashboardtypesThresholdWithLabelDTO {
 	value: number;
 }
 
-export enum DashboardtypesStackModeDTO {
-	none = 'none',
-	normal = 'normal',
-	percent = 'percent',
-}
 export enum DashboardtypesTimePreferenceDTO {
 	global_time = 'global_time',
 	last_5_min = 'last_5_min',
@@ -4284,27 +4233,6 @@ export enum DashboardtypesTimePreferenceDTO {
 	last_1_week = 'last_1_week',
 	last_1_month = 'last_1_month',
 }
-export interface DashboardtypesAreaChartVisualizationDTO {
-	/**
-	 * @type boolean
-	 */
-	fillSpans?: boolean;
-	stack?: DashboardtypesStackModeDTO;
-	timePreference?: DashboardtypesTimePreferenceDTO;
-}
-
-export interface DashboardtypesAreaChartPanelSpecDTO {
-	axes?: DashboardtypesAxesDTO;
-	chartAppearance?: DashboardtypesAreaChartAppearanceDTO;
-	formatting?: DashboardtypesPanelFormattingDTO;
-	legend?: DashboardtypesLegendDTO;
-	/**
-	 * @type array,null
-	 */
-	thresholds?: DashboardtypesThresholdWithLabelDTO[] | null;
-	visualization?: DashboardtypesAreaChartVisualizationDTO;
-}
-
 export interface DashboardtypesBarChartVisualizationDTO {
 	/**
 	 * @type boolean
@@ -5002,6 +4930,29 @@ export enum DashboardtypesFillModeDTO {
 	gradient = 'gradient',
 	none = 'none',
 }
+export enum DashboardtypesLineInterpolationDTO {
+	linear = 'linear',
+	spline = 'spline',
+	step_after = 'step_after',
+	step_before = 'step_before',
+}
+export enum DashboardtypesLineStyleDTO {
+	solid = 'solid',
+	dashed = 'dashed',
+}
+export interface DashboardtypesSpanGapsDTO {
+	/**
+	 * @type string
+	 * @description The maximum gap size to connect when fillOnlyBelow is true. Gaps larger than this duration are left disconnected.
+	 */
+	fillLessThan?: string;
+	/**
+	 * @type boolean
+	 * @description Controls whether lines connect across null values. When false (default), all gaps are connected. When true, only gaps smaller than fillLessThan are connected.
+	 */
+	fillOnlyBelow?: boolean;
+}
+
 export interface DashboardtypesTimeSeriesChartAppearanceDTO {
 	fillMode?: DashboardtypesFillModeDTO;
 	lineInterpolation?: DashboardtypesLineInterpolationDTO;
@@ -5054,18 +5005,6 @@ export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDa
 	spec: DashboardtypesBarChartPanelSpecDTO;
 }
 
-export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpecDTOKind {
-	'signoz/AreaChartPanel' = 'signoz/AreaChartPanel',
-}
-export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpecDTO {
-	/**
-	 * @enum signoz/AreaChartPanel
-	 * @type string
-	 */
-	kind: DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpecDTOKind;
-	spec: DashboardtypesAreaChartPanelSpecDTO;
-}
-
 export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpecDTOKind {
 	'signoz/NumberPanel' = 'signoz/NumberPanel',
 }
@@ -5271,7 +5210,6 @@ export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDa
 export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpecDTO
-	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpecDTO
@@ -6196,7 +6134,6 @@ export interface DashboardtypesListableDashboardViewDTO {
 export enum DashboardtypesPanelPluginKindDTO {
 	'signoz/TimeSeriesPanel' = 'signoz/TimeSeriesPanel',
 	'signoz/BarChartPanel' = 'signoz/BarChartPanel',
-	'signoz/AreaChartPanel' = 'signoz/AreaChartPanel',
 	'signoz/NumberPanel' = 'signoz/NumberPanel',
 	'signoz/PieChartPanel' = 'signoz/PieChartPanel',
 	'signoz/TablePanel' = 'signoz/TablePanel',

frontend/src/api/logs/AddToSelectedField.ts

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

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

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

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

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

@@ -0,0 +1,22 @@
+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/trace/getFilters.ts

@@ -0,0 +1,49 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import omitBy from 'lodash-es/omitBy';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { PayloadProps, Props } from 'types/api/trace/getFilters';
+
+const getFilters = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	try {
+		const duration =
+			omitBy(props.other, (_, key) => !key.startsWith('duration')) || [];
+
+		const nonDuration = omitBy(props.other, (_, key) =>
+			key.startsWith('duration'),
+		);
+
+		const exclude: string[] = [];
+
+		props.isFilterExclude.forEach((value, key) => {
+			if (value) {
+				exclude.push(key);
+			}
+		});
+
+		const response = await axios.post<PayloadProps>(`/getSpanFilters`, {
+			start: props.start,
+			end: props.end,
+			getFilters: props.getFilters,
+			...nonDuration,
+			maxDuration: String((duration.duration || [])[0] || ''),
+			minDuration: String((duration.duration || [])[1] || ''),
+			exclude,
+			spanKind: props.spanKind,
+		});
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getFilters;

frontend/src/api/trace/getSpans.ts

@@ -0,0 +1,62 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import omitBy from 'lodash-es/omitBy';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { PayloadProps, Props } from 'types/api/trace/getSpans';
+
+const getSpans = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	try {
+		const updatedSelectedTags = props.selectedTags.map((e) => ({
+			Key: `${e.Key}.(string)`,
+			Operator: e.Operator,
+			StringValues: e.StringValues,
+			NumberValues: e.NumberValues,
+			BoolValues: e.BoolValues,
+		}));
+
+		const exclude: string[] = [];
+
+		props.isFilterExclude.forEach((value, key) => {
+			if (value) {
+				exclude.push(key);
+			}
+		});
+
+		const other = Object.fromEntries(props.selectedFilter);
+
+		const duration = omitBy(other, (_, key) => !key.startsWith('duration')) || [];
+
+		const nonDuration = omitBy(other, (_, key) => key.startsWith('duration'));
+
+		const response = await axios.post<PayloadProps>(
+			`/getFilteredSpans/aggregates`,
+			{
+				start: String(props.start),
+				end: String(props.end),
+				function: props.function,
+				groupBy: props.groupBy === 'none' ? '' : props.groupBy,
+				step: props.step,
+				tags: updatedSelectedTags,
+				...nonDuration,
+				maxDuration: String((duration.duration || [])[0] || ''),
+				minDuration: String((duration.duration || [])[1] || ''),
+				exclude,
+				spanKind: props.spanKind,
+			},
+		);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getSpans;

frontend/src/api/trace/getSpansAggregate.ts

@@ -0,0 +1,65 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import omitBy from 'lodash-es/omitBy';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { PayloadProps, Props } from 'types/api/trace/getSpanAggregate';
+import { TraceFilterEnum } from 'types/reducer/trace';
+
+const getSpanAggregate = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	try {
+		const preProps = {
+			start: String(props.start),
+			end: String(props.end),
+			limit: props.limit,
+			offset: props.offset,
+			order: props.order,
+			orderParam: props.orderParam,
+		};
+
+		const exclude: TraceFilterEnum[] = [];
+
+		props.isFilterExclude.forEach((value, key) => {
+			if (value) {
+				exclude.push(key);
+			}
+		});
+
+		const updatedSelectedTags = props.selectedTags.map((e) => ({
+			Key: `${e.Key}.(string)`,
+			Operator: e.Operator,
+			StringValues: e.StringValues,
+			NumberValues: e.NumberValues,
+			BoolValues: e.BoolValues,
+		}));
+
+		const other = Object.fromEntries(props.selectedFilter);
+
+		const duration = omitBy(other, (_, key) => !key.startsWith('duration')) || [];
+
+		const nonDuration = omitBy(other, (_, key) => key.startsWith('duration'));
+
+		const response = await axios.post<PayloadProps>(`/getFilteredSpans`, {
+			...preProps,
+			tags: updatedSelectedTags,
+			...nonDuration,
+			maxDuration: String((duration.duration || [])[0] || ''),
+			minDuration: String((duration.duration || [])[1] || ''),
+			exclude,
+			spanKind: props.spanKind,
+		});
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getSpanAggregate;

frontend/src/api/trace/getTagFilter.ts

@@ -0,0 +1,49 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { omitBy } from 'lodash-es';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { PayloadProps, Props } from 'types/api/trace/getTagFilters';
+import { TraceFilterEnum } from 'types/reducer/trace';
+
+const getTagFilters = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	try {
+		const duration =
+			omitBy(props.other, (_, key) => !key.startsWith('duration')) || [];
+
+		const exclude: TraceFilterEnum[] = [];
+
+		props.isFilterExclude.forEach((value, key) => {
+			if (value) {
+				exclude.push(key);
+			}
+		});
+
+		const nonDuration = omitBy(props.other, (_, key) =>
+			key.startsWith('duration'),
+		);
+
+		const response = await axios.post<PayloadProps>(`/getTagFilters`, {
+			start: String(props.start),
+			end: String(props.end),
+			...nonDuration,
+			maxDuration: String((duration.duration || [])[0] || ''),
+			minDuration: String((duration.duration || [])[1] || ''),
+			exclude,
+			spanKind: props.spanKind,
+		});
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getTagFilters;

frontend/src/api/trace/getTagValue.ts

@@ -0,0 +1,31 @@
+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/trace/getTagValue';
+
+const getTagValue = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	try {
+		const response = await axios.post<PayloadProps>(`/getTagValues`, {
+			start: props.start.toString(),
+			end: props.end.toString(),
+			tagKey: {
+				Key: props.tagKey.Key,
+				Type: props.tagKey.Type,
+			},
+			spanKind: props.spanKind,
+		});
+		return {
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getTagValue;

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

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+
+import { CategoryHeadingText } from './styles';
+
+interface ICategoryHeadingProps {
+	children: ReactNode;
+}
+function CategoryHeading({ children }: ICategoryHeadingProps): JSX.Element {
+	return <CategoryHeadingText color="muted">{children}</CategoryHeadingText>;
+}
+
+export default CategoryHeading;

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

@@ -0,0 +1,6 @@
+import { Typography } from '@signozhq/ui/typography';
+import styled from 'styled-components';
+
+export const CategoryHeadingText = styled(Typography.Text)`
+	font-size: 0.8rem;
+`;

frontend/src/components/Logs/TableView/config.ts

@@ -0,0 +1,33 @@
+import { CSSProperties } from 'react';
+import { Color } from '@signozhq/design-tokens';
+import { TableProps } from 'antd';
+
+export function getDefaultCellStyle(isDarkMode?: boolean): CSSProperties {
+	return {
+		paddingTop: 4,
+		paddingBottom: 6,
+		paddingRight: 8,
+		paddingLeft: 8,
+		color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_400,
+		fontSize: '14px',
+		fontStyle: 'normal',
+		fontWeight: 400,
+		lineHeight: '18px',
+		letterSpacing: '-0.07px',
+		marginBottom: '0px',
+		minWidth: '10rem',
+		width: 'auto',
+	};
+}
+
+export const defaultTableStyle: CSSProperties = {
+	minWidth: '40rem',
+};
+
+export const defaultListViewPanelStyle: CSSProperties = {
+	maxWidth: '40rem',
+};
+
+export const tableScroll: TableProps<Record<string, unknown>>['scroll'] = {
+	x: true,
+};

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

@@ -0,0 +1,24 @@
+import { Table } from 'antd';
+
+// config
+import { tableScroll } from './config';
+import { LogsTableViewProps } from './types';
+import { useTableView } from './useTableView';
+
+function LogsTableView(props: LogsTableViewProps): JSX.Element {
+	const { dataSource, columns } = useTableView(props);
+
+	return (
+		<Table
+			size="small"
+			columns={columns}
+			dataSource={dataSource}
+			pagination={false}
+			rowKey="id"
+			bordered
+			scroll={tableScroll}
+		/>
+	);
+}
+
+export default LogsTableView;

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

@@ -0,0 +1,32 @@
+import { Color } from '@signozhq/design-tokens';
+import { FontSize } from 'container/OptionsMenu/types';
+import styled from 'styled-components';
+
+interface TableBodyContentProps {
+	linesPerRow: number;
+	fontSize: FontSize;
+	isDarkMode?: boolean;
+}
+
+export const TableBodyContent = styled.div<TableBodyContentProps>`
+	margin-bottom: 0;
+	color: ${(props): string =>
+		props.isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_400};
+	font-size: 14px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 18px; /* 128.571% */
+	letter-spacing: -0.07px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: ${(props): number => props.linesPerRow};
+	line-clamp: ${(props): number => props.linesPerRow};
+	-webkit-box-orient: vertical;
+	${({ fontSize }): string =>
+		fontSize === FontSize.SMALL
+			? `font-size:11px; line-height:16px;`
+			: fontSize === FontSize.MEDIUM
+				? `font-size:13px; line-height:20px;`
+				: `font-size:14px; line-height:24px;`}
+`;

frontend/src/components/Logs/TableView/types.ts

@@ -1,5 +1,40 @@
-import { TableColumnType as ColumnType } from 'antd';
+import {
+	TableColumnsType as ColumnsType,
+	TableColumnType as ColumnType,
+} from 'antd';
+import { FontSize } from 'container/OptionsMenu/types';
+import { IField } from 'types/api/logs/fields';
+import { ILog } from 'types/api/logs/log';
 
 export type ColumnTypeRender<T = unknown> = ReturnType<
 	NonNullable<ColumnType<T>['render']>
 >;
+
+export type LogsTableViewProps = {
+	logs: ILog[];
+	fields: IField[];
+	linesPerRow: number;
+	fontSize: FontSize;
+	onClickExpand?: (log: ILog) => void;
+};
+
+export type UseTableViewResult = {
+	columns: ColumnsType<Record<string, unknown>>;
+	dataSource: Record<string, string>[];
+};
+
+export type UseTableViewProps = {
+	appendTo?: 'center' | 'end';
+	onOpenLogsContext?: (log: ILog) => void;
+	onClickExpand?: (log: ILog) => void;
+	activeLog?: ILog | null;
+	activeLogIndex?: number;
+	activeContextLog?: ILog | null;
+	isListViewPanel?: boolean;
+} & LogsTableViewProps;
+
+export type ActionsColumnProps = {
+	logId: string;
+	logs: ILog[];
+	onOpenLogsContext?: (log: ILog) => void;
+};

frontend/src/components/Logs/TableView/useTableView.styles.scss

@@ -0,0 +1,59 @@
+.text {
+	color: var(--l2-foreground);
+	font-size: 14px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 18px; /* 128.571% */
+	letter-spacing: -0.07px;
+
+	&.small {
+		font-size: 11px;
+		line-height: 16px;
+	}
+
+	&.medium {
+		font-size: 13px;
+		line-height: 20px;
+	}
+
+	&.large {
+		font-size: 14px;
+		line-height: 24px;
+	}
+}
+
+.state-indicator {
+	width: 15px;
+	.log-state-indicator {
+		padding: 0px;
+	}
+}
+
+.table-timestamp {
+	display: flex;
+	align-items: center;
+
+	.timestamp-text {
+		color: var(--l1-foreground);
+		margin: 0 !important;
+	}
+}
+
+.paragraph {
+	margin: 0;
+	padding: 0px !important;
+	&.small {
+		font-size: 11px !important;
+		line-height: 16px !important;
+	}
+
+	&.medium {
+		font-size: 13px !important;
+		line-height: 20px !important;
+	}
+
+	&.large {
+		font-size: 14px !important;
+		line-height: 24px !important;
+	}
+}

frontend/src/components/Logs/TableView/useTableView.tsx

@@ -0,0 +1,180 @@
+import { useMemo } from 'react';
+import { TableColumnsType as ColumnsType } from 'antd';
+import cx from 'classnames';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { FlatLogData } from 'lib/logs/flatLogData';
+import { useTimezone } from 'providers/Timezone';
+
+import LogStateIndicator from '../LogStateIndicator/LogStateIndicator';
+import {
+	defaultListViewPanelStyle,
+	defaultTableStyle,
+	getDefaultCellStyle,
+} from './config';
+import { TableBodyContent } from './styles';
+import {
+	ColumnTypeRender,
+	UseTableViewProps,
+	UseTableViewResult,
+} from './types';
+
+import './useTableView.styles.scss';
+
+export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
+	const {
+		logs,
+		fields,
+		linesPerRow,
+		fontSize,
+		appendTo = 'center',
+		isListViewPanel,
+	} = props;
+
+	const isDarkMode = useIsDarkMode();
+
+	const flattenLogData = useMemo(
+		() => logs.map((log) => FlatLogData(log)),
+		[logs],
+	);
+
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+
+	const bodyColumnStyle = useMemo(
+		() => ({
+			...defaultTableStyle,
+			...(fields.length > 2 ? { width: 'auto' } : {}),
+		}),
+		[fields.length],
+	);
+
+	const columns: ColumnsType<Record<string, unknown>> = useMemo(() => {
+		const fieldColumns: ColumnsType<Record<string, unknown>> = fields
+			.filter((e) => !['id', 'body', 'timestamp'].includes(e.name))
+			.map(({ name }) => ({
+				title: name,
+				dataIndex: name,
+				accessorKey: name,
+				id: name.toLowerCase().replace(/\./g, '_'),
+				key: name,
+				render: (field): ColumnTypeRender<Record<string, unknown>> => ({
+					props: {
+						style: {
+							...(isListViewPanel
+								? defaultListViewPanelStyle
+								: getDefaultCellStyle(isDarkMode)),
+							display: '-webkit-box',
+							WebkitLineClamp: linesPerRow,
+							WebkitBoxOrient: 'vertical',
+							overflow: 'hidden',
+							wordBreak: 'break-all',
+						},
+					},
+					children: <p className={cx('paragraph', fontSize)}>{field}</p>,
+				}),
+			}));
+
+		if (isListViewPanel) {
+			return [...fieldColumns];
+		}
+
+		return [
+			{
+				// We do not need any title and data index for the log state indicator
+				title: '',
+				dataIndex: '',
+				key: 'state-indicator',
+				accessorKey: 'state-indicator',
+				id: 'state-indicator',
+				render: (_, item): ColumnTypeRender<Record<string, unknown>> => ({
+					children: (
+						<div className={cx('state-indicator', fontSize)}>
+							<LogStateIndicator
+								fontSize={fontSize}
+								severityText={item.severity_text as string}
+								severityNumber={item.severity_number as number}
+							/>
+						</div>
+					),
+				}),
+			},
+			...(fields.some((field) => field.name === 'timestamp')
+				? [
+						{
+							title: 'timestamp',
+							dataIndex: 'timestamp',
+							key: 'timestamp',
+							accessorKey: 'timestamp',
+							id: 'timestamp',
+							// https://github.com/ant-design/ant-design/discussions/36886
+							render: (
+								field: string | number,
+							): ColumnTypeRender<Record<string, unknown>> => {
+								const date =
+									typeof field === 'string'
+										? formatTimezoneAdjustedTimestamp(
+												field,
+												DATE_TIME_FORMATS.ISO_DATETIME_MS,
+											)
+										: formatTimezoneAdjustedTimestamp(
+												field / 1e6,
+												DATE_TIME_FORMATS.ISO_DATETIME_MS,
+											);
+								return {
+									children: (
+										<div className="table-timestamp">
+											<p className={cx('timestamp-text text', fontSize)}>{date}</p>
+										</div>
+									),
+								};
+							},
+						},
+					]
+				: []),
+			...(appendTo === 'center' ? fieldColumns : []),
+			...(fields.some((field) => field.name === 'body')
+				? [
+						{
+							title: 'body',
+							dataIndex: 'body',
+							key: 'body',
+							accessorKey: 'body',
+							id: 'body',
+							render: (
+								field: string | number,
+							): ColumnTypeRender<Record<string, unknown>> => ({
+								props: {
+									style: bodyColumnStyle,
+								},
+								children: (
+									<TableBodyContent
+										dangerouslySetInnerHTML={{
+											__html: getSanitizedLogBody(field as string, {
+												shouldEscapeHtml: true,
+											}),
+										}}
+										fontSize={fontSize}
+										linesPerRow={linesPerRow}
+										isDarkMode={isDarkMode}
+									/>
+								),
+							}),
+						},
+					]
+				: []),
+			...(appendTo === 'end' ? fieldColumns : []),
+		];
+	}, [
+		fields,
+		isListViewPanel,
+		appendTo,
+		isDarkMode,
+		linesPerRow,
+		fontSize,
+		formatTimezoneAdjustedTimestamp,
+		bodyColumnStyle,
+	]);
+
+	return { columns, dataSource: flattenLogData };
+};

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/OptionsMenu/types';
+import { LogViewMode } from 'container/LogsTable';
 import { FontSize, OptionsMenuConfig } from 'container/OptionsMenu/types';
 import {
 	Check,

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

@@ -6,27 +6,31 @@ import {
 	IQuickFiltersConfig,
 	QuickFiltersSource,
 } from 'components/QuickFilters/types';
-import { getMs } from 'utils/timeUtils';
+import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { cloneDeep, isArray, isEqual, isFunction } from 'lodash-es';
+import { DurationSection } from 'pages/TracesExplorer/Filter/DurationSection';
 import {
 	AllTraceFilterKeys,
 	AllTraceFilterKeyValue,
+	HandleRunProps,
 	traceFilterKeys,
-} from 'constants/traceFilterKeys';
+	unionTagFilterItems,
+} from 'pages/TracesExplorer/Filter/filterUtils';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { v4 as uuid } from 'uuid';
 
 import { clearFilterFromQuery } from '../shared/filterQuery';
 import { SectionActionButton } from '../shared/SectionActionButton/SectionActionButton';
-import { DurationSection } from './DurationSection';
-import { FilterType, HandleRunProps, unionTagFilterItems } from './utils';
 
 import './Duration.styles.scss';
 
-export type { FilterType };
+export type FilterType = Record<
+	AllTraceFilterKeys,
+	{ values: string[] | string; keys: BaseAutocompleteData }
+>;
 
 function Duration({
 	filter,

frontend/src/components/QuickFilters/FilterRenderers/Duration/utils.ts

@@ -1,101 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import { AllTraceFilterKeys } from 'constants/traceFilterKeys';
-import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
-
-export type FilterType = Record<
-	AllTraceFilterKeys,
-	{ values: string[] | string; keys: BaseAutocompleteData }
->;
-
-export interface HandleRunProps {
-	resetAll?: boolean;
-	clearByType?: AllTraceFilterKeys;
-}
-
-function convertToStringArr(value: string | string[] | undefined): string[] {
-	if (value) {
-		if (typeof value === 'string') {
-			return [value];
-		}
-		return value;
-	}
-	return [];
-}
-
-export const addFilter = (
-	filterType: AllTraceFilterKeys,
-	value: string,
-	setSelectedFilters: Dispatch<
-		SetStateAction<
-			| Record<
-					AllTraceFilterKeys,
-					{ values: string[] | string; keys: BaseAutocompleteData }
-			  >
-			| undefined
-		>
-	>,
-	keys: BaseAutocompleteData,
-): void => {
-	setSelectedFilters((prevFilters) => {
-		const isDuration = [
-			'durationNanoMax',
-			'durationNanoMin',
-			'durationNano',
-		].includes(filterType);
-
-		// Convert value to string array
-		const valueArray = convertToStringArr(value);
-
-		// If previous filters are undefined, initialize them
-		if (!prevFilters) {
-			return {
-				[filterType]: { values: isDuration ? value : valueArray, keys },
-			} as unknown as FilterType;
-		}
-
-		// If the filter type doesn't exist, initialize it
-		if (!prevFilters[filterType]?.values.length) {
-			return {
-				...prevFilters,
-				[filterType]: { values: isDuration ? value : valueArray, keys },
-			};
-		}
-
-		// If the value already exists, don't add it again
-		if (convertToStringArr(prevFilters[filterType].values).includes(value)) {
-			return prevFilters;
-		}
-
-		// Otherwise, add the value to the existing array
-		return {
-			...prevFilters,
-			[filterType]: {
-				values: isDuration
-					? value
-					: [...convertToStringArr(prevFilters[filterType].values), value],
-				keys,
-			},
-		};
-	});
-};
-
-/** Merges two filter lists; later items win on the same key + operator. */
-export function unionTagFilterItems(
-	items1: TagFilterItem[],
-	items2: TagFilterItem[],
-): TagFilterItem[] {
-	const unionMap = new Map<string, TagFilterItem>();
-
-	items1?.forEach((item) => {
-		const keyOp = `${item?.key?.key}_${item?.op}`;
-		unionMap.set(keyOp, item);
-	});
-
-	items2?.forEach((item) => {
-		const keyOp = `${item?.key?.key}_${item?.op}`;
-		unionMap.set(keyOp, item);
-	});
-
-	return Array.from(unionMap?.values());
-}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

frontend/src/components/RouteTab/index.tsx

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

frontend/src/constants/localStorage.ts

@@ -41,6 +41,7 @@ export enum LOCALSTORAGE {
 	DISMISSED_API_KEYS_DEPRECATION_BANNER = 'DISMISSED_API_KEYS_DEPRECATION_BANNER',
 	TRACE_DETAILS_SPAN_DETAILS_POSITION = 'TRACE_DETAILS_SPAN_DETAILS_POSITION',
 	LICENSE_KEY_CALLOUT_DISMISSED = 'LICENSE_KEY_CALLOUT_DISMISSED',
+	TRACE_DETAILS_PREFER_OLD_VIEW = 'TRACE_DETAILS_PREFER_OLD_VIEW',
 	DASHBOARD_PREFERENCES = 'DASHBOARD_PREFERENCES',
 	ACTIVE_SIGNOZ_INSTANCE_URL = 'ACTIVE_SIGNOZ_INSTANCE_URL',
 	DASHBOARDS_LIST_VISIBLE_COLUMNS = 'DASHBOARDS_LIST_VISIBLE_COLUMNS',

frontend/src/constants/panelTypes.ts

@@ -29,7 +29,6 @@ export const getComponentForPanelType = (
 		[PANEL_TYPES.LIST]:
 			dataSource === DataSource.LOGS ? LogsPanelComponent : TracesTableComponent,
 		[PANEL_TYPES.BAR]: Uplot,
-		[PANEL_TYPES.AREA]: Uplot,
 		[PANEL_TYPES.PIE]: null,
 		[PANEL_TYPES.HISTOGRAM]: Uplot,
 		// Dashboards v2 renders this kind; nothing reaches the V1 chart map for it.

frontend/src/constants/queryBuilder.ts

@@ -336,7 +336,6 @@ export enum PANEL_TYPES {
 	LIST = 'list',
 	TRACE = 'trace',
 	BAR = 'bar',
-	AREA = 'area',
 	PIE = 'pie',
 	HISTOGRAM = 'histogram',
 	TEXT = 'text',

frontend/src/constants/resourceAttributes.ts

@@ -1,4 +1,4 @@
-import { OperatorValues } from 'hooks/useResourceAttribute/types';
+import { OperatorValues } from 'types/reducer/trace';
 
 export const OperatorConversions: Array<{
 	label: string;

frontend/src/constants/routes.ts

@@ -6,8 +6,9 @@ const ROUTES = {
 	SERVICE_METRICS: '/services/:servicename',
 	SERVICE_TOP_LEVEL_OPERATIONS: '/services/:servicename/top-level-operations',
 	SERVICE_MAP: '/service-map',
-	TRACE_BASE: '/trace',
+	TRACE: '/trace',
 	TRACE_DETAIL: '/trace/:id',
+	TRACE_DETAIL_OLD: '/trace-old/:id',
 	TRACES_EXPLORER: '/traces-explorer',
 	ONBOARDING: '/onboarding',
 	GET_STARTED_WITH_CLOUD: '/get-started-with-signoz-cloud',
@@ -37,6 +38,7 @@ 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/constants/traceFilterKeys.ts

@@ -1,124 +0,0 @@
-import { SPAN_ATTRIBUTES } from 'container/ApiMonitoring/Explorer/Domains/DomainDetails/constants';
-import {
-	BaseAutocompleteData,
-	DataTypes,
-} from 'types/api/queryBuilder/queryAutocompleteResponse';
-
-/** Trace attribute key -> label shown in quick filters, the options menu and APM "view traces" links. */
-export const AllTraceFilterKeyValue: Record<string, string> = {
-	durationNanoMin: 'Duration',
-	durationNano: 'Duration',
-	duration_nano: 'Duration',
-	durationNanoMax: 'Duration',
-	'deployment.environment': 'Environment',
-	hasError: 'Status',
-	has_error: 'Status',
-	serviceName: 'Service Name',
-	'service.name': 'service.name',
-	name: 'Operation / Name',
-	rpcMethod: 'RPC Method',
-	'rpc.method': 'RPC Method',
-	responseStatusCode: 'Status Code',
-	response_status_code: 'Status Code',
-	httpHost: 'HTTP Host',
-	http_host: 'HTTP Host',
-	httpMethod: 'HTTP Method',
-	http_method: 'HTTP Method',
-	httpRoute: 'HTTP Route',
-	'http.route': 'HTTP Route',
-	httpUrl: 'HTTP URL',
-	[SPAN_ATTRIBUTES.HTTP_URL]: 'HTTP URL',
-	traceID: 'Trace ID',
-	trace_id: 'Trace ID',
-} as const;
-
-export type AllTraceFilterKeys = keyof typeof AllTraceFilterKeyValue;
-
-export const traceFilterKeys: Record<AllTraceFilterKeys, BaseAutocompleteData> =
-	{
-		durationNano: {
-			key: 'durationNano',
-			dataType: DataTypes.Float64,
-			type: 'tag',
-			id: 'durationNano--float64--tag--true',
-		},
-		hasError: {
-			key: 'hasError',
-			dataType: DataTypes.bool,
-			type: 'tag',
-			id: 'hasError--bool--tag--true',
-		},
-		serviceName: {
-			key: 'serviceName',
-			dataType: DataTypes.String,
-			type: 'tag',
-			id: 'serviceName--string--tag--true',
-		},
-
-		'deployment.environment': {
-			key: 'deployment.environment',
-			dataType: DataTypes.String,
-			type: 'resource',
-			id: 'deployment.environment--string--resource--false',
-		},
-		name: {
-			key: 'name',
-			dataType: DataTypes.String,
-			type: 'tag',
-			id: 'name--string--tag--true',
-		},
-		rpcMethod: {
-			key: 'rpcMethod',
-			dataType: DataTypes.String,
-			type: 'tag',
-			id: 'rpcMethod--string--tag--true',
-		},
-		responseStatusCode: {
-			key: 'responseStatusCode',
-			dataType: DataTypes.String,
-			type: 'tag',
-			id: 'responseStatusCode--string--tag--true',
-		},
-		httpHost: {
-			key: 'httpHost',
-			dataType: DataTypes.String,
-			type: 'tag',
-			id: 'httpHost--string--tag--true',
-		},
-		httpMethod: {
-			key: 'httpMethod',
-			dataType: DataTypes.String,
-			type: 'tag',
-			id: 'httpMethod--string--tag--true',
-		},
-		httpRoute: {
-			key: 'httpRoute',
-			dataType: DataTypes.String,
-			type: 'tag',
-			id: 'httpRoute--string--tag--true',
-		},
-		httpUrl: {
-			key: 'httpUrl',
-			dataType: DataTypes.String,
-			type: 'tag',
-			id: 'httpUrl--string--tag--true',
-		},
-		traceID: {
-			key: 'traceID',
-			dataType: DataTypes.String,
-			type: 'tag',
-			id: 'traceID--string--tag--true',
-		},
-		durationNanoMin: {
-			key: 'durationNanoMin',
-			dataType: DataTypes.Float64,
-			type: 'tag',
-			id: 'durationNanoMin--float64--tag--true',
-		},
-		durationNanoMax: {
-			key: 'durationNanoMax',
-			dataType: DataTypes.Float64,
-			type: 'tag',
-			id: 'durationNanoMax--float64--tag--true',
-		},
-	} as const;

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

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

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

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

frontend/src/container/GantChart/GantChart.styles.scss

@@ -0,0 +1,16 @@
+.span-container {
+	.spanDetails {
+		position: absolute;
+		height: 50px;
+		padding: 8px;
+		min-width: 150px;
+		background: lightcyan;
+		color: black;
+		bottom: 24px;
+		left: 0;
+
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+}

frontend/src/container/GantChart/Span/index.tsx

@@ -0,0 +1,96 @@
+import { useEffect } from 'react';
+import { Popover } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
+import dayjs from 'dayjs';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useTimezone } from 'providers/Timezone';
+import { toFixed } from 'utils/toFixed';
+
+import { SpanBorder, SpanLine, SpanText, SpanWrapper } from './styles';
+
+import '../GantChart.styles.scss';
+
+interface SpanLengthProps {
+	globalStart: number;
+	startTime: number;
+	name: string;
+	width: string;
+	leftOffset: string;
+	bgColor: string;
+	inMsCount: number;
+}
+
+function Span(props: SpanLengthProps): JSX.Element {
+	const { width, leftOffset, bgColor, inMsCount, startTime, name, globalStart } =
+		props;
+	const isDarkMode = useIsDarkMode();
+	const { time, timeUnitName } = convertTimeToRelevantUnit(inMsCount);
+
+	const { timezone } = useTimezone();
+
+	useEffect(() => {
+		document.documentElement.scrollTop = document.documentElement.clientHeight;
+		document.documentElement.scrollLeft = document.documentElement.clientWidth;
+	}, []);
+
+	const getContent = (): JSX.Element => {
+		const timeStamp = dayjs(startTime)
+			.tz(timezone.value)
+			.format(DATE_TIME_FORMATS.TIME_UTC_MS);
+		const startTimeInMs = startTime - globalStart;
+		return (
+			<div>
+				<Typography.Text style={{ marginBottom: '8px' }}>
+					{' '}
+					Duration : {inMsCount}
+				</Typography.Text>
+				<br />
+				<Typography.Text style={{ marginBottom: '8px' }}>
+					Start Time: {startTimeInMs}ms [{timeStamp}]{' '}
+				</Typography.Text>
+			</div>
+		);
+	};
+
+	return (
+		<SpanWrapper className="span-container">
+			<SpanLine
+				className="spanLine"
+				isDarkMode={isDarkMode}
+				bgColor={bgColor}
+				leftOffset={leftOffset}
+				width={width}
+			/>
+
+			<div>
+				<Popover
+					style={{
+						left: `${leftOffset}%`,
+					}}
+					title={name}
+					content={getContent()}
+					trigger="hover"
+					placement="left"
+					autoAdjustOverflow
+				>
+					<SpanBorder
+						className="spanTrack"
+						isDarkMode={isDarkMode}
+						bgColor={bgColor}
+						leftOffset={leftOffset}
+						width={width}
+					/>
+				</Popover>
+			</div>
+
+			<SpanText isDarkMode={isDarkMode} leftOffset={leftOffset}>{`${toFixed(
+				time,
+				2,
+			)} ${timeUnitName}`}</SpanText>
+		</SpanWrapper>
+	);
+}
+
+export default Span;

frontend/src/container/GantChart/Span/styles.ts

@@ -0,0 +1,52 @@
+import { Typography } from '@signozhq/ui/typography';
+import styled from 'styled-components';
+
+interface Props {
+	width: string;
+	leftOffset: string;
+	bgColor: string;
+	isDarkMode: boolean;
+}
+
+export const SpanLine = styled.div<Props>`
+	width: ${({ leftOffset }): string => `${leftOffset}%`};
+	height: 0px;
+	border-bottom: 0.1px solid
+		${({ isDarkMode }): string => (isDarkMode ? '#303030' : '#c0c0c0')};
+	top: 50%;
+	position: absolute;
+`;
+
+export const SpanBorder = styled.div<Props>`
+	background: ${({ bgColor }): string => bgColor};
+	border-radius: 5px;
+	height: 0.625rem;
+	width: ${({ width }): string => `${width}%`};
+	left: ${({ leftOffset }): string => `${leftOffset}%`};
+	top: 35%;
+	position: absolute;
+`;
+
+export const SpanWrapper = styled.div`
+	display: flex;
+	width: 100%;
+	flex-direction: row;
+	align-items: center;
+	position: relative;
+	z-index: 2;
+	min-height: 2rem;
+`;
+interface SpanTextProps extends Pick<Props, 'leftOffset'> {
+	isDarkMode: boolean;
+}
+
+export const SpanText = styled(Typography.Text)<SpanTextProps>`
+	&&& {
+		left: ${({ leftOffset }): string => `${leftOffset}%`};
+		top: 65%;
+		position: absolute;
+		width: max-content;
+		color: ${({ isDarkMode }): string => (isDarkMode ? '#ACACAC' : '#666')};
+		font-size: 0.75rem;
+	}
+`;

frontend/src/container/GantChart/SpanName/index.tsx

@@ -0,0 +1,22 @@
+import { Container, Service, Span, SpanWrapper } from './styles';
+
+function SpanNameComponent({
+	name,
+	serviceName,
+}: SpanNameComponentProps): JSX.Element {
+	return (
+		<Container title={`${name} ${serviceName}`}>
+			<SpanWrapper>
+				<Span truncate={1}>{name}</Span>
+				<Service truncate={1}>{serviceName}</Service>
+			</SpanWrapper>
+		</Container>
+	);
+}
+
+interface SpanNameComponentProps {
+	name: string;
+	serviceName: string;
+}
+
+export default SpanNameComponent;

frontend/src/container/GantChart/SpanName/styles.ts

@@ -0,0 +1,41 @@
+import { Typography } from '@signozhq/ui/typography';
+import styled from 'styled-components';
+
+export const Span = styled(Typography.Text)`
+	&&& {
+		font-size: 0.75rem;
+		margin: 0;
+		/* border-bottom: 1px solid grey; */
+	}
+`;
+
+export const Service = styled(Typography.Text)`
+	&&& {
+		color: #acacac;
+		font-size: 0.75rem;
+	}
+`;
+
+export const SpanWrapper = styled.div`
+	display: flex;
+	flex-direction: column;
+	margin-left: 0.625rem;
+	width: 10rem;
+`;
+
+export const SpanConnector = styled.div`
+	width: 37px;
+	border: 1px solid #303030;
+	height: 0;
+`;
+
+export const Container = styled.div`
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+`;
+
+export const SpanName = styled.div`
+	width: fit-content;
+	border-bottom: 1px solid black;
+`;

frontend/src/container/GantChart/Trace/index.tsx

@@ -0,0 +1,233 @@
+import {
+	Dispatch,
+	MouseEventHandler,
+	SetStateAction,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
+import { ChevronDown, ChevronRight } from '@signozhq/icons';
+import { Col } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { StyledCol, StyledRow } from 'components/Styled';
+import {
+	IIntervalUnit,
+	SPAN_DETAILS_LEFT_COL_WIDTH,
+} from 'container/TraceDetail/utils';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { ITraceTree } from 'types/api/trace/getTraceItem';
+
+import { ITraceMetaData } from '..';
+import Span from '../Span';
+import SpanName from '../SpanName';
+import { getMetaDataFromSpanTree, getTopLeftFromBody } from '../utils';
+import {
+	CardComponent,
+	CardContainer,
+	CaretContainer,
+	HoverCard,
+	styles,
+	Wrapper,
+} from './styles';
+import { getIconStyles } from './utils';
+
+function Trace(props: TraceProps): JSX.Element {
+	const {
+		name,
+		activeHoverId,
+		setActiveHoverId,
+		globalSpread,
+		globalStart,
+		serviceName,
+		startTime,
+		value,
+		serviceColour,
+		id,
+		setActiveSelectedId,
+		activeSelectedId,
+		level,
+		activeSpanPath,
+		isExpandAll,
+		intervalUnit,
+		children,
+		isMissing,
+	} = props;
+
+	const isDarkMode = useIsDarkMode();
+
+	const [isOpen, setOpen] = useState<boolean>(activeSpanPath[level] === id);
+
+	const localTreeExpandInteraction = useRef<boolean | 0>(0); // Boolean is for the state of the expansion whereas the number i.e. 0 is for skipping the user interaction.
+
+	useEffect(() => {
+		if (localTreeExpandInteraction.current !== 0) {
+			setOpen(localTreeExpandInteraction.current);
+			localTreeExpandInteraction.current = 0;
+		} else if (!isOpen) {
+			setOpen(activeSpanPath[level] === id);
+		}
+	}, [activeSpanPath, isOpen, id, level]);
+
+	useEffect(() => {
+		if (isExpandAll) {
+			setOpen(isExpandAll);
+		} else {
+			setOpen(activeSpanPath[level] === id);
+		}
+	}, [isExpandAll, activeSpanPath, id, level]);
+
+	const isOnlyChild = children.length === 1;
+	const [top, setTop] = useState<number>(0);
+
+	const ref = useRef<HTMLUListElement>(null);
+
+	useEffect(() => {
+		if (activeSelectedId === id) {
+			ref.current?.scrollIntoView({
+				block: 'nearest',
+				behavior: 'auto',
+				inline: 'nearest',
+			});
+		}
+	}, [activeSelectedId, id]);
+
+	const onMouseEnterHandler = (): void => {
+		setActiveHoverId(id);
+		if (ref.current) {
+			const { top } = getTopLeftFromBody(ref.current);
+			setTop(top);
+		}
+	};
+
+	const onMouseLeaveHandler = (): void => {
+		setActiveHoverId('');
+	};
+
+	const onClick = (): void => {
+		setActiveSelectedId(id);
+	};
+
+	const onClickTreeExpansion: MouseEventHandler<HTMLDivElement> = (
+		event,
+	): void => {
+		event.stopPropagation();
+		setOpen((state) => {
+			localTreeExpandInteraction.current = !isOpen;
+			return !state;
+		});
+	};
+	const { totalSpans } = getMetaDataFromSpanTree(props);
+
+	const inMsCount = value;
+	const nodeLeftOffset = ((startTime - globalStart) * 1e2) / globalSpread;
+	const width = (value * 1e2) / (globalSpread * 1e6);
+	const panelWidth = SPAN_DETAILS_LEFT_COL_WIDTH - level * (16 + 1) - 48;
+
+	const iconStyles = useMemo(() => getIconStyles(), []);
+
+	const icon = useMemo(
+		() =>
+			isOpen ? (
+				<ChevronDown size="md" style={iconStyles} />
+			) : (
+				<ChevronRight size="md" style={iconStyles} />
+			),
+		[isOpen, iconStyles],
+	);
+
+	return (
+		<Wrapper
+			onMouseEnter={onMouseEnterHandler}
+			onMouseLeave={onMouseLeaveHandler}
+			isOnlyChild={isOnlyChild}
+			ref={ref}
+			isDarkMode={isDarkMode}
+		>
+			<HoverCard
+				top={top}
+				isHovered={activeHoverId === id}
+				isSelected={activeSelectedId === id}
+				isDarkMode={isDarkMode}
+			/>
+
+			<CardContainer isMissing={isMissing} onClick={onClick}>
+				<StyledCol flex={`${panelWidth}px`} styledclass={[styles.overFlowHidden]}>
+					<StyledRow styledclass={[styles.flexNoWrap]}>
+						<Col>
+							{totalSpans !== 1 && (
+								<CardComponent
+									isOnlyChild={isOnlyChild}
+									isDarkMode={isDarkMode}
+									onClick={onClickTreeExpansion}
+								>
+									<Typography style={{ wordBreak: 'normal' }}>{totalSpans}</Typography>
+									<CaretContainer>{icon}</CaretContainer>
+								</CardComponent>
+							)}
+						</Col>
+						<Col>
+							<SpanName name={name} serviceName={serviceName} />
+						</Col>
+					</StyledRow>
+				</StyledCol>
+				<Col flex="1">
+					<Span
+						globalStart={globalStart}
+						startTime={startTime}
+						name={name}
+						leftOffset={nodeLeftOffset.toString()}
+						width={width.toString()}
+						bgColor={serviceColour}
+						inMsCount={inMsCount / 1e6}
+					/>
+				</Col>
+			</CardContainer>
+
+			{isOpen && (
+				<>
+					{children.map((child) => (
+						<Trace
+							key={child.id}
+							activeHoverId={activeHoverId}
+							setActiveHoverId={setActiveHoverId}
+							{...child}
+							globalSpread={globalSpread}
+							globalStart={globalStart}
+							setActiveSelectedId={setActiveSelectedId}
+							activeSelectedId={activeSelectedId}
+							level={level + 1}
+							activeSpanPath={activeSpanPath}
+							isExpandAll={isExpandAll}
+							intervalUnit={intervalUnit}
+							isMissing={child.isMissing}
+						/>
+					))}
+				</>
+			)}
+		</Wrapper>
+	);
+}
+
+Trace.defaultProps = {
+	isMissing: false,
+};
+
+interface ITraceGlobal {
+	globalSpread: ITraceMetaData['spread'];
+	globalStart: ITraceMetaData['globalStart'];
+}
+
+interface TraceProps extends ITraceTree, ITraceGlobal {
+	activeHoverId: string;
+	setActiveHoverId: Dispatch<SetStateAction<string>>;
+	setActiveSelectedId: Dispatch<SetStateAction<string>>;
+	activeSelectedId: string;
+	level: number;
+	activeSpanPath: string[];
+	isExpandAll: boolean;
+	intervalUnit: IIntervalUnit;
+	isMissing?: boolean;
+}
+
+export default Trace;

frontend/src/container/GantChart/Trace/styles.ts

@@ -0,0 +1,113 @@
+import { volcano } from '@ant-design/colors';
+import styled, {
+	css,
+	DefaultTheme,
+	ThemedCssFunction,
+} from 'styled-components';
+
+interface Props {
+	isOnlyChild: boolean;
+}
+
+export const Wrapper = styled.ul<Props>`
+	display: flex;
+	flex-direction: column;
+	padding-bottom: 0.5rem;
+	padding-top: 0.5rem;
+	position: relative;
+	z-index: 1;
+	ul {
+		border-left: ${({ isOnlyChild }): StyledCSS =>
+			isOnlyChild && 'none'} !important;
+
+		${({ isOnlyChild }): StyledCSS =>
+			isOnlyChild &&
+			css`
+				&:before {
+					border-left: 1px solid #434343;
+					display: inline-block;
+					content: '';
+					height: 54px;
+					position: absolute;
+					left: 0;
+					top: -35px;
+				}
+			`}
+	}
+`;
+
+export const CardContainer = styled.li<{ isMissing?: boolean }>`
+	display: flex;
+	width: 100%;
+	cursor: pointer;
+	border-radius: 0.25rem;
+	z-index: 2;
+	${({ isMissing }): string =>
+		isMissing ? `border: 1px dashed ${volcano[6]} !important;` : ''}
+`;
+
+interface Props {
+	isDarkMode: boolean;
+}
+
+export type StyledCSS =
+	| ReturnType<ThemedCssFunction<DefaultTheme>>
+	| string
+	| false
+	| undefined;
+
+export const CardComponent = styled.div<Props>`
+	border: 1px solid
+		${({ isDarkMode }): StyledCSS => (isDarkMode ? '#434343' : '#333')};
+	box-sizing: border-box;
+	border-radius: 2px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 1px 8px;
+	background: ${({ isDarkMode }): StyledCSS =>
+		isDarkMode ? '#1d1d1d' : '#ddd'};
+	height: 22px;
+`;
+
+export const CaretContainer = styled.span`
+	margin-left: 0.304rem;
+`;
+
+interface HoverCardProps {
+	isHovered: boolean;
+	isSelected: boolean;
+	top: number;
+	isDarkMode: boolean;
+}
+
+export const HoverCard = styled.div<HoverCardProps>`
+	display: ${({ isSelected, isHovered }): string =>
+		isSelected || isHovered ? 'block' : 'none'};
+	width: 200%;
+	background-color: ${({ isHovered, isDarkMode }): string => {
+		if (isHovered) {
+			return isDarkMode ? '#262626' : '#ddd';
+		}
+		return isDarkMode ? '#4f4f4f' : '#bbb';
+	}};
+	position: absolute;
+	top: 0;
+	left: -100%;
+	right: 0;
+	height: 3rem;
+	opacity: 0.5;
+`;
+
+const flexNoWrap = css`
+	flex-wrap: nowrap;
+`;
+
+const overFlowHidden = css`
+	overflow: hidden;
+`;
+
+export const styles = {
+	flexNoWrap,
+	overFlowHidden,
+};

frontend/src/container/GantChart/Trace/utils.ts

@@ -0,0 +1,3 @@
+export const getIconStyles = (): Record<string, string> => ({
+	color: 'var(--l1-foreground)',
+});

frontend/src/container/GantChart/index.tsx

@@ -0,0 +1,91 @@
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { SquareMinus, SquarePlus } from '@signozhq/icons';
+import { IIntervalUnit } from 'container/TraceDetail/utils';
+import { ITraceTree } from 'types/api/trace/getTraceItem';
+
+import { CardContainer, CardWrapper, CollapseButton } from './styles';
+import Trace from './Trace';
+import { getSpanPath } from './utils';
+
+function GanttChart(props: GanttChartProps): JSX.Element {
+	const {
+		data,
+		traceMetaData,
+		activeHoverId,
+		setActiveHoverId,
+		activeSelectedId,
+		setActiveSelectedId,
+		spanId,
+		intervalUnit,
+	} = props;
+
+	const { globalStart, spread: globalSpread } = traceMetaData;
+
+	const [isExpandAll, setIsExpandAll] = useState<boolean>(false);
+	const [activeSpanPath, setActiveSpanPath] = useState<string[]>([]);
+
+	useEffect(() => {
+		setActiveSpanPath(getSpanPath(data, spanId));
+	}, [spanId, data]);
+
+	useEffect(() => {
+		setActiveSpanPath(getSpanPath(data, activeSelectedId));
+	}, [activeSelectedId, data]);
+
+	const handleCollapse = (): void => {
+		setIsExpandAll((prev) => !prev);
+	};
+	return (
+		<CardContainer>
+			<CollapseButton
+				onClick={handleCollapse}
+				title={isExpandAll ? 'Collapse All' : 'Expand All'}
+			>
+				{isExpandAll ? (
+					<SquareMinus size={16} style={{ color: 'var(--accent-primary)' }} />
+				) : (
+					<SquarePlus size={16} style={{ color: 'var(--accent-primary)' }} />
+				)}
+			</CollapseButton>
+			<CardWrapper>
+				<Trace
+					activeHoverId={activeHoverId}
+					activeSpanPath={activeSpanPath}
+					setActiveHoverId={setActiveHoverId}
+					key={data.id}
+					{...{
+						...data,
+						globalSpread,
+						globalStart,
+						setActiveSelectedId,
+						activeSelectedId,
+					}}
+					level={0}
+					isExpandAll={isExpandAll}
+					intervalUnit={intervalUnit}
+				/>
+			</CardWrapper>
+		</CardContainer>
+	);
+}
+
+export interface ITraceMetaData {
+	globalEnd: number;
+	globalStart: number;
+	levels: number;
+	spread: number;
+	totalSpans: number;
+}
+
+export interface GanttChartProps {
+	data: ITraceTree;
+	traceMetaData: ITraceMetaData;
+	activeSelectedId: string;
+	activeHoverId: string;
+	setActiveHoverId: Dispatch<SetStateAction<string>>;
+	setActiveSelectedId: Dispatch<SetStateAction<string>>;
+	spanId: string;
+	intervalUnit: IIntervalUnit;
+}
+
+export default GanttChart;

frontend/src/container/GantChart/styles.ts

@@ -0,0 +1,48 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.ul`
+	padding-left: 0;
+	position: absolute;
+	width: 100%;
+	height: 100%;
+
+	ul {
+		list-style: none;
+		border-left: 1px solid #434343;
+		padding-left: 1rem;
+		width: 100%;
+		margin: 0px;
+	}
+
+	ul li {
+		position: relative;
+
+		&:before {
+			position: absolute;
+			left: -1rem;
+			top: 10px;
+			content: '';
+			height: 1px;
+			width: 1rem;
+			background-color: #434343;
+		}
+	}
+`;
+
+export const CardWrapper = styled.div`
+	display: flex;
+	width: 100%;
+	margin-left: 1rem;
+	margin-top: 1.5rem;
+`;
+
+export const CardContainer = styled.li`
+	display: flex;
+	width: 100%;
+	position: relative;
+`;
+
+export const CollapseButton = styled.div`
+	position: absolute;
+	top: 0;
+`;

frontend/src/container/GantChart/utils.ts

@@ -0,0 +1,203 @@
+import { set } from 'lodash-es';
+import { ITraceForest, ITraceTree } from 'types/api/trace/getTraceItem';
+
+interface GetTraceMetaData {
+	globalStart: number;
+	globalEnd: number;
+	spread: number;
+	totalSpans: number;
+	levels: number;
+}
+export const getMetaDataFromSpanTree = (
+	treeData: ITraceTree,
+): GetTraceMetaData => {
+	let globalStart = Number.POSITIVE_INFINITY;
+	let globalEnd = Number.NEGATIVE_INFINITY;
+	let totalSpans = 0;
+	let levels = 1;
+	const traverse = (treeNode: ITraceTree, level = 0): void => {
+		if (!treeNode) {
+			return;
+		}
+		totalSpans += 1;
+		levels = Math.max(levels, level);
+		const { startTime } = treeNode;
+		const endTime = startTime + treeNode.value;
+		globalStart = Math.min(globalStart, startTime);
+		globalEnd = Math.max(globalEnd, endTime);
+
+		treeNode.children.forEach((childNode) => {
+			traverse(childNode, level + 1);
+		});
+	};
+	traverse(treeData, 1);
+
+	globalStart *= 1e6;
+	globalEnd *= 1e6;
+
+	return {
+		globalStart,
+		globalEnd,
+		spread: globalEnd - globalStart,
+		totalSpans,
+		levels,
+	};
+};
+
+export function getTopLeftFromBody(elem: HTMLElement): {
+	top: number;
+	left: number;
+} {
+	const box = elem.getBoundingClientRect();
+
+	const { body } = document;
+	const docEl = document.documentElement;
+
+	const scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
+	const scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
+
+	const clientTop = docEl.clientTop || body.clientTop || 0;
+	const clientLeft = docEl.clientLeft || body.clientLeft || 0;
+
+	const top = box.top + scrollTop - clientTop;
+	const left = box.left + scrollLeft - clientLeft;
+
+	return { top: Math.round(top), left: Math.round(left) };
+}
+
+export const getNodeById = (
+	searchingId: string,
+	treesData: ITraceForest | undefined,
+): ITraceForest => {
+	const newtreeData: ITraceForest = {} as ITraceForest;
+
+	const traverse = (
+		treeNode: ITraceTree,
+		setCallBack: (arg0: ITraceTree) => void,
+		level = 0,
+	): void => {
+		if (!treeNode) {
+			return;
+		}
+
+		if (searchingId === treeNode.id) {
+			setCallBack(treeNode);
+		}
+
+		treeNode.children.forEach((childNode) => {
+			traverse(childNode, setCallBack, level + 1);
+		});
+	};
+
+	const spanTreeSetCallback = (
+		path: (keyof ITraceForest)[],
+		value: ITraceTree,
+	): ITraceForest => set(newtreeData, path, [value]);
+
+	if (treesData?.spanTree) {
+		treesData.spanTree.forEach((tree) => {
+			traverse(tree, (value) => spanTreeSetCallback(['spanTree'], value), 1);
+		});
+	}
+
+	if (treesData?.missingSpanTree) {
+		treesData.missingSpanTree.forEach((tree) => {
+			traverse(
+				tree,
+				(value) => spanTreeSetCallback(['missingSpanTree'], value),
+				1,
+			);
+		});
+	}
+
+	return newtreeData;
+};
+
+const getSpanWithoutChildren = (
+	span: ITraceTree,
+): Omit<ITraceTree, 'children'> => ({
+	id: span.id,
+	name: span.name,
+	parent: span.parent,
+	serviceColour: span.serviceColour,
+	serviceName: span.serviceName,
+	startTime: span.startTime,
+	tags: span.tags,
+	time: span.time,
+	value: span.value,
+	event: span.event,
+	hasError: span.hasError,
+	spanKind: span.spanKind,
+	statusCodeString: span.statusCodeString,
+	statusMessage: span.statusMessage,
+});
+
+export const isSpanPresentInSearchString = (
+	searchedString: string,
+	tree: ITraceTree,
+): boolean => {
+	const parsedTree = getSpanWithoutChildren(tree);
+
+	const stringifyTree = JSON.stringify(parsedTree);
+
+	return stringifyTree.includes(searchedString);
+};
+
+export const isSpanPresent = (
+	tree: ITraceTree,
+	searchedKey: string,
+): ITraceTree[] => {
+	const foundNode: ITraceTree[] = [];
+
+	const traverse = (
+		treeNode: ITraceTree,
+		level = 0,
+		foundNode: ITraceTree[],
+	): void => {
+		if (!treeNode) {
+			return;
+		}
+
+		const isPresent = isSpanPresentInSearchString(searchedKey, treeNode);
+
+		if (isPresent) {
+			foundNode.push(treeNode);
+		}
+
+		treeNode.children.forEach((childNode) => {
+			traverse(childNode, level + 1, foundNode);
+		});
+	};
+	traverse(tree, 1, foundNode);
+
+	return foundNode;
+};
+
+export const getSpanPath = (tree: ITraceTree, spanId: string): string[] => {
+	const spanPath: string[] = [];
+
+	const traverse = (treeNode: ITraceTree): boolean => {
+		if (!treeNode) {
+			return false;
+		}
+
+		spanPath.push(treeNode.id);
+
+		if (spanId === treeNode.id) {
+			return true;
+		}
+
+		let foundInChild = false;
+		treeNode.children.forEach((childNode) => {
+			if (traverse(childNode)) {
+				foundInChild = true;
+			}
+		});
+		if (!foundInChild) {
+			spanPath.pop();
+		}
+		return foundInChild;
+	};
+	traverse(tree);
+	return spanPath;
+};

frontend/src/container/Home/Services/ServiceMetrics.tsx

@@ -28,7 +28,7 @@ import {
 } from 'types/api/licensesV3/getActive';
 import { ServicesList } from 'types/api/metrics/getService';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { Tags } from 'hooks/useResourceAttribute/types';
+import { Tags } from 'types/reducer/trace';
 import { USER_ROLES } from 'types/roles';
 import { isModifierKeyPressed } from 'utils/app';
 import { openInNewTab } from 'utils/navigation';

frontend/src/container/InfraMonitoringHostsV2/constants.tsx

@@ -82,7 +82,7 @@ export function getHostMetricsQueryPayload(
 	start: number,
 	end: number,
 ): ReturnType<typeof getHostQueryPayload> {
-	return getHostQueryPayload(host.hostName, start, end);
+	return getHostQueryPayload(host.hostName, start, end, true);
 }
 
 export { hostWidgetInfo };

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityTraces/traceListColumns.tsx

@@ -3,7 +3,7 @@ import { Badge } from '@signozhq/ui/badge';
 import { Typography } from '@signozhq/ui/typography';
 import HttpStatusBadge from 'components/HttpStatusBadge/HttpStatusBadge';
 import { TextNoData } from '../../components/TextNoData';
-import { getMs } from 'utils/timeUtils';
+import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
 import {
 	BlockLink,
 	getTraceLink,

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

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

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

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

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

@@ -1,7 +1,6 @@
 import type { TracesTableRow } from '../TracesTable/getFieldColumn';
-import { generatePath } from 'react-router-dom';
 import ROUTES from 'constants/routes';
-import { formUrlParams } from 'utils/traceUtils';
+import { formUrlParams } from 'container/TraceDetail/utils';
 import { QueryDataV3 } from 'types/api/widgets/getQuery';
 
 export const getTraceLink = (record: Record<string, unknown>): string => {
@@ -15,11 +14,7 @@ export const getTraceLink = (record: Record<string, unknown>): string => {
 	const traceId = readId(record.traceID) || readId(record.trace_id);
 	const spanId = readId(record.spanID) || readId(record.span_id);
 
-	if (!traceId) {
-		return '';
-	}
-
-	return `${generatePath(ROUTES.TRACE_DETAIL, { id: traceId })}${formUrlParams({
+	return `${ROUTES.TRACE}/${traceId}${formUrlParams({
 		spanId,
 		levelUp: 0,
 		levelDown: 0,

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

@@ -3,7 +3,7 @@ import { Badge } from '@signozhq/ui/badge';
 import TanStackTable from 'components/TanStackTableView';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import ROUTES from 'constants/routes';
-import { getMs } from 'utils/timeUtils';
+import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
 import { useTimezone } from 'providers/Timezone';
 
 import {

frontend/src/container/LLMObservability/Overview/Overview.module.scss

@@ -10,11 +10,3 @@
 		display: none;
 	}
 }
-
-.errorState {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: var(--spacing-2);
-	padding: var(--spacing-8);
-}

frontend/src/container/LLMObservability/Overview/Overview.tsx

@@ -1,41 +1,19 @@
-import { Typography } from '@signozhq/ui/typography';
-import Spinner from 'components/Spinner';
 import DashboardContainer from 'pages/DashboardPage/DashboardContainer';
 
-import { useSystemDashboard } from './hooks/useSystemDashboard';
+import { useSeededDashboardV2 } from './hooks/useSeededDashboardV2';
 import styles from './Overview.module.scss';
 
 function Overview(): JSX.Element {
-	const { dashboard, isLoading, isError, error, refetch } = useSystemDashboard();
+	//TODO: this is a temporary solution to get the seeded dashboard. We should fetch this json from the backend.
+	const { dashboard, refetch } = useSeededDashboardV2();
 
-	const renderContent = (): JSX.Element => {
-		if (isLoading) {
-			return <Spinner tip="Loading dashboard..." />;
-		}
-
-		if (isError || !dashboard) {
-			return (
-				<div className={styles.errorState}>
-					<Typography.Title>Failed to load dashboard</Typography.Title>
-					<Typography.Text>
-						{error?.response?.data?.error?.message ?? error?.message}
-					</Typography.Text>
-				</div>
-			);
-		}
-
-		return (
+	return (
+		<div className={styles.overview} data-testid="llm-observability-overview">
 			<DashboardContainer
 				dashboard={dashboard}
 				refetch={refetch}
 				canEditDashboardOverride={false}
 			/>
-		);
-	};
-
-	return (
-		<div className={styles.overview} data-testid="llm-observability-overview">
-			{renderContent()}
 		</div>
 	);
 }

frontend/src/container/LLMObservability/Overview/hooks/useSeededDashboardV2.ts

@@ -0,0 +1,33 @@
+import { useQueryClient } from 'react-query';
+
+import { getGetDashboardV2QueryKey } from 'api/generated/services/dashboard';
+import type {
+	DashboardtypesGettableDashboardV2DTO,
+	GetDashboardV2200,
+} from 'api/generated/services/sigNoz.schemas';
+
+import dashboardV2Json from '../json/dashboard.json';
+
+const dashboard =
+	dashboardV2Json as unknown as DashboardtypesGettableDashboardV2DTO;
+
+export interface UseSeededDashboardV2Result {
+	dashboard: DashboardtypesGettableDashboardV2DTO;
+	refetch: () => void;
+}
+
+const noop = (): void => {};
+
+export function useSeededDashboardV2(): UseSeededDashboardV2Result {
+	const queryClient = useQueryClient();
+
+	const key = getGetDashboardV2QueryKey({ id: dashboard.id });
+	if (queryClient.getQueryData<GetDashboardV2200>(key) === undefined) {
+		queryClient.setQueryData<GetDashboardV2200>(key, {
+			data: dashboard,
+			status: 'success',
+		});
+	}
+
+	return { dashboard, refetch: noop };
+}

frontend/src/container/LLMObservability/Overview/hooks/useSystemDashboard.ts

@@ -1,56 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import { useQueryClient } from 'react-query';
-
-import {
-	getGetDashboardV2QueryKey,
-	useGetSystemDashboard,
-} from 'api/generated/services/dashboard';
-import type { GetSystemDashboardQueryError } from 'api/generated/services/dashboard';
-import type {
-	DashboardtypesGettableDashboardV2DTO,
-	GetDashboardV2200,
-} from 'api/generated/services/sigNoz.schemas';
-
-const SYSTEM_DASHBOARD_NAME = 'ai-o11y-overview';
-
-const DASHBOARD_ID = 'llm-observability-overview';
-
-export interface UseSystemDashboardResult {
-	dashboard: DashboardtypesGettableDashboardV2DTO | undefined;
-	isLoading: boolean;
-	isError: boolean;
-	error: GetSystemDashboardQueryError | null;
-	refetch: () => void;
-}
-
-export function useSystemDashboard(): UseSystemDashboardResult {
-	const queryClient = useQueryClient();
-	const { data, isLoading, isError, error, refetch } = useGetSystemDashboard(
-		{ name: SYSTEM_DASHBOARD_NAME },
-		{ query: { staleTime: Infinity, refetchOnMount: false } },
-	);
-
-	const dashboard = useMemo(
-		() =>
-			data
-				? ({
-						...data.data,
-						id: DASHBOARD_ID,
-					} as DashboardtypesGettableDashboardV2DTO)
-				: undefined,
-		[data],
-	);
-
-	if (dashboard) {
-		queryClient.setQueryData<GetDashboardV2200>(
-			getGetDashboardV2QueryKey({ id: DASHBOARD_ID }),
-			{ data: dashboard, status: 'success' },
-		);
-	}
-
-	const refetchDashboard = useCallback((): void => {
-		void refetch();
-	}, [refetch]);
-
-	return { dashboard, isLoading, isError, error, refetch: refetchDashboard };
-}

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

@@ -24,35 +24,6 @@ jest.mock('container/LLMObservability/Explorer/Explorer', () => ({
 	default: (): JSX.Element => <div data-testid="llm-observability-explorer" />,
 }));
 
-const SYSTEM_DASHBOARD_ENDPOINT = '*/api/v2/dashboards/system/ai-o11y-overview';
-
-function setupSystemDashboard(): void {
-	server.use(
-		rest.get(SYSTEM_DASHBOARD_ENDPOINT, (_req, res, ctx) =>
-			res(
-				ctx.status(200),
-				ctx.json({
-					status: 'success',
-					data: {
-						orgId: 'org',
-						locked: true,
-						name: 'signoz---ai-o11y-overview',
-						schemaVersion: 'v6',
-						source: 'system',
-						tags: null,
-						spec: {
-							display: { name: 'AI Observability Overview' },
-							variables: [],
-							panels: {},
-							layouts: [],
-						},
-					},
-				}),
-			),
-		),
-	);
-}
-
 function setupList(items = mockRules): void {
 	server.use(
 		rest.get(LLM_PRICING_ENDPOINT, (_req, res, ctx) =>
@@ -70,17 +41,14 @@ describe('LLMObservability (integration)', () => {
 		server.resetHandlers();
 	});
 
-	it('renders the overview panel and the tab bar on the overview route', async () => {
-		setupSystemDashboard();
+	it('renders the overview panel and the tab bar on the overview route', () => {
 		render(<LLMObservability />, undefined, {
 			initialRoute: ROUTES.AI_OBSERVABILITY_OVERVIEW,
 		});
 
 		expect(screen.getByTestId('llm-observability-tabs')).toBeInTheDocument();
 		expect(screen.getByTestId('llm-observability-overview')).toBeInTheDocument();
-		await waitFor(() =>
-			expect(screen.getByTestId('llm-overview-dashboard')).toBeInTheDocument(),
-		);
+		expect(screen.getByTestId('llm-overview-dashboard')).toBeInTheDocument();
 		expect(screen.getByRole('tab', { name: 'Overview' })).toBeInTheDocument();
 		expect(screen.getByRole('tab', { name: 'Explorer' })).toBeInTheDocument();
 		expect(

frontend/src/container/LogControls/index.tsx

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

@@ -0,0 +1,14 @@
+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/InfraMetrics/InfraMetrics.tsx

@@ -28,7 +28,7 @@ function InfraMetrics({
 	dataSource = DataSource.LOGS,
 }: MetricsDataProps): JSX.Element {
 	const [selectedView, setSelectedView] = useState<string>(() =>
-		nodeName || hostName ? VIEW_TYPES.NODE : VIEW_TYPES.POD,
+		podName ? VIEW_TYPES.POD : VIEW_TYPES.NODE,
 	);
 
 	const viewOptions = useMemo(() => {
@@ -60,10 +60,6 @@ function InfraMetrics({
 	}, [podName]);
 
 	const handleModeChange = (value: string): void => {
-		// single toggle-group emits '' on re-click of the pressed item
-		if (!value) {
-			return;
-		}
 		setSelectedView(value);
 	};
 

frontend/src/container/LogDetailedView/InfraMetrics/NodeMetrics.tsx

@@ -4,8 +4,9 @@ import { Card, Skeleton } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import Uplot from 'components/Uplot';
-import { ENTITY_VERSION_V5 } from 'constants/app';
+import { ENTITY_VERSION_V4 } from 'constants/app';
 import dayjs from 'dayjs';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
@@ -60,9 +61,9 @@ function NodeMetrics({
 	const widgetInfo = nodeName ? nodeWidgetInfo : hostWidgetInfo;
 	const queries = useQueries(
 		queryPayloads.map((payload) => ({
-			queryKey: ['metrics', payload, ENTITY_VERSION_V5, 'NODE'],
+			queryKey: ['metrics', payload, ENTITY_VERSION_V4, 'NODE'],
 			queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
-				GetMetricQueryRange(payload, ENTITY_VERSION_V5),
+				GetMetricQueryRange(payload, ENTITY_VERSION_V4),
 			enabled: !!payload,
 		})),
 	);
@@ -84,6 +85,7 @@ function NodeMetrics({
 	);
 
 	const { timezone } = useTimezone();
+	const { currentQuery } = useQueryBuilder();
 
 	const options = useMemo(
 		() =>
@@ -101,7 +103,7 @@ function NodeMetrics({
 					tzDate: (timestamp: number) =>
 						uPlot.tzDate(new Date(timestamp * 1e3), timezone.value),
 					timezone: timezone.value,
-					query: queryPayloads[idx].query,
+					query: currentQuery,
 					legendScrollPosition: legendScrollPositionRef.current,
 					setLegendScrollPosition: (position: {
 						scrollTop: number;
@@ -120,7 +122,7 @@ function NodeMetrics({
 			verticalLineTimestamp,
 			end,
 			timezone.value,
-			queryPayloads,
+			currentQuery,
 		],
 	);
 

frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx

@@ -4,8 +4,9 @@ import { Card, Skeleton } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import Uplot from 'components/Uplot';
-import { ENTITY_VERSION_V5 } from 'constants/app';
+import { ENTITY_VERSION_V4 } from 'constants/app';
 import dayjs from 'dayjs';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
@@ -57,9 +58,9 @@ function PodMetrics({
 	);
 	const queries = useQueries(
 		queryPayloads.map((payload) => ({
-			queryKey: ['metrics', payload, ENTITY_VERSION_V5, 'POD'],
+			queryKey: ['metrics', payload, ENTITY_VERSION_V4, 'POD'],
 			queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
-				GetMetricQueryRange(payload, ENTITY_VERSION_V5),
+				GetMetricQueryRange(payload, ENTITY_VERSION_V4),
 			enabled: !!payload,
 		})),
 	);
@@ -73,6 +74,7 @@ function PodMetrics({
 		[queries],
 	);
 	const { timezone } = useTimezone();
+	const { currentQuery } = useQueryBuilder();
 
 	const options = useMemo(
 		() =>
@@ -90,7 +92,7 @@ function PodMetrics({
 					tzDate: (timestamp: number) =>
 						uPlot.tzDate(new Date(timestamp * 1e3), timezone.value),
 					timezone: timezone.value,
-					query: queryPayloads[idx].query,
+					query: currentQuery,
 					legendScrollPosition: legendScrollPositionRef.current,
 					setLegendScrollPosition: (position: {
 						scrollTop: number;
@@ -108,7 +110,7 @@ function PodMetrics({
 			end,
 			verticalLineTimestamp,
 			timezone.value,
-			queryPayloads,
+			currentQuery,
 		],
 	);
 

frontend/src/container/LogDetailedView/InfraMetrics/constants.ts

@@ -1,13 +1,18 @@
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
+import type { Having } from 'types/api/queryBuilder/queryBuilderData';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import type { Having } from 'types/api/v5/queryRange';
+import type { Having as HavingV5 } from 'types/api/v5/queryRange';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 
-const buildSumGreaterThanZeroHaving = (metricKey: string): Having => ({
-	expression: `sum(${metricKey}) > 0`,
-});
+const buildSumGreaterThanZeroHaving = (
+	metricKey: string,
+	useV5HavingFormat: boolean,
+): Having[] | HavingV5 =>
+	useV5HavingFormat
+		? { expression: `sum(${metricKey}) > 0` }
+		: [{ columnName: `SUM(${metricKey})`, op: '>', value: 0 }];
 
 export const getPodQueryPayload = (
 	clusterName: string,
@@ -1545,6 +1550,7 @@ export const getHostQueryPayload = (
 	hostName: string,
 	start: number,
 	end: number,
+	useV5HavingFormat = false,
 ): GetQueryResultsProps[] => {
 	const hostNameKey = 'host.name';
 	const cpuTimeKey = 'system.cpu.time';
@@ -1807,7 +1813,7 @@ export const getHostQueryPayload = (
 									type: 'tag',
 								},
 							],
-							having: buildSumGreaterThanZeroHaving(fsUsageKey),
+							having: buildSumGreaterThanZeroHaving(fsUsageKey, useV5HavingFormat),
 							legend: '{{mountpoint}}',
 							limit: null,
 							orderBy: [],
@@ -1856,7 +1862,7 @@ export const getHostQueryPayload = (
 									type: 'tag',
 								},
 							],
-							having: buildSumGreaterThanZeroHaving(fsUsageKey),
+							having: buildSumGreaterThanZeroHaving(fsUsageKey, useV5HavingFormat),
 							legend: '{{mountpoint}}',
 							limit: null,
 							orderBy: [],
@@ -2082,7 +2088,7 @@ export const getHostQueryPayload = (
 									type: 'tag',
 								},
 							],
-							having: buildSumGreaterThanZeroHaving(netIoKey),
+							having: buildSumGreaterThanZeroHaving(netIoKey, useV5HavingFormat),
 							legend: '{{device}}::{{direction}}',
 							limit: 30,
 							orderBy: [],
@@ -2538,7 +2544,7 @@ export const getHostQueryPayload = (
 									type: 'tag',
 								},
 							],
-							having: buildSumGreaterThanZeroHaving(diskOpsKey),
+							having: buildSumGreaterThanZeroHaving(diskOpsKey, useV5HavingFormat),
 							legend: '{{device}}::{{direction}}',
 							limit: null,
 							orderBy: [],
@@ -2607,7 +2613,7 @@ export const getHostQueryPayload = (
 									type: 'tag',
 								},
 							],
-							having: buildSumGreaterThanZeroHaving(diskPendingKey),
+							having: buildSumGreaterThanZeroHaving(diskPendingKey, useV5HavingFormat),
 							legend: '{{device}}',
 							limit: null,
 							orderBy: [],
@@ -2683,7 +2689,7 @@ export const getHostQueryPayload = (
 									type: 'tag',
 								},
 							],
-							having: buildSumGreaterThanZeroHaving(diskOpTimeKey),
+							having: buildSumGreaterThanZeroHaving(diskOpTimeKey, useV5HavingFormat),
 							legend: '{{device}}::{{direction}}',
 							limit: null,
 							orderBy: [],

frontend/src/container/LogDetailedView/TableView.tsx

@@ -1,4 +1,6 @@
 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';
@@ -12,19 +14,23 @@ 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 {
@@ -59,6 +65,7 @@ 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();
@@ -178,6 +185,11 @@ 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,6 +10,7 @@ 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';
@@ -26,7 +27,6 @@ import {
 	DataTypes,
 } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
-import { RESTRICTED_SELECTED_FIELDS } from '../config';
 import { DataType } from '../TableView';
 import {
 	filterKeyForField,
@@ -141,9 +141,10 @@ export default function TableViewActions(
 	const { stagedQuery, updateQueriesData } = useQueryBuilder();
 	const { dataType, logType: fieldType } = getFieldAttributes(record.field);
 
-	// there is no option for where clause in live logs page or infra monitoring
-	const isLiveLogsOrInfraPage = useMemo(
+	// there is no option for where clause in old logs explorer and live logs page or infra monitoring
+	const isOldLogsExplorerOrLiveLogsPage = useMemo(
 		() =>
+			pathname === ROUTES.OLD_LOGS_EXPLORER ||
 			pathname === ROUTES.LIVE_LOGS ||
 			pathname === ROUTES.INFRASTRUCTURE_MONITORING_HOSTS ||
 			pathname === ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES,
@@ -399,7 +400,7 @@ export default function TableViewActions(
 									)}
 								/>
 							</Tooltip>
-							{!isLiveLogsOrInfraPage && (
+							{!isOldLogsExplorerOrLiveLogsPage && (
 								<Popover
 									open={isOpen}
 									onOpenChange={setIsOpen}
@@ -486,7 +487,7 @@ export default function TableViewActions(
 								)}
 							/>
 						</Tooltip>
-						{!isLiveLogsOrInfraPage && (
+						{!isOldLogsExplorerOrLiveLogsPage && (
 							<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,10 +1,5 @@
 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,7 +61,8 @@ export function useLogAttributeActions({
 		featureFlags?.find((flag) => flag.name === FeatureKeys.USE_JSON_BODY)
 			?.active || false;
 
-	const isLiveLogs = pathname === ROUTES.LIVE_LOGS;
+	const isOldExplorerOrLive =
+		pathname === ROUTES.OLD_LOGS_EXPLORER || pathname === ROUTES.LIVE_LOGS;
 
 	const filterFor = useCallback(
 		(context: FieldContext, isFilterIn: boolean): void => {
@@ -220,7 +221,7 @@ export function useLogAttributeActions({
 					!handleChangeSelectedView ||
 					!buildLogFilterTarget(fieldKeyPath, undefined, isBodyJsonQueryEnabled)
 						.groupBySupported ||
-					isLiveLogs,
+					isOldExplorerOrLive,
 			},
 			{
 				key: LogDetailsAction.REPLACE_FILTER,
@@ -228,7 +229,9 @@ export function useLogAttributeActions({
 				icon: <RefreshCw size={12} />,
 				onClick: replaceFilter,
 				shouldHide: (_key, fieldKeyPath): boolean =>
-					!handleChangeSelectedView || isRestricted(fieldKeyPath) || isLiveLogs,
+					!handleChangeSelectedView ||
+					isRestricted(fieldKeyPath) ||
+					isOldExplorerOrLive,
 			},
 		];
 	}, [
@@ -236,7 +239,7 @@ export function useLogAttributeActions({
 		groupBy,
 		replaceFilter,
 		isBodyJsonQueryEnabled,
-		isLiveLogs,
+		isOldExplorerOrLive,
 		handleChangeSelectedView,
 		onApplyLogFilter,
 	]);

frontend/src/container/LogDetailedView/index.tsx

@@ -0,0 +1,168 @@
+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,6 +5,10 @@ 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';
@@ -14,10 +18,6 @@ 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,16 @@
+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]};
+	}
+`;