fix: remove handling of normalized properties for scope

Otherwise it will be impossible to query if scope attribute also
exists with same name - name and version

.gitignore

@@ -231,4 +231,5 @@ cython_debug/
 # LSP config files
 pyrightconfig.json
 
-
+# agents
+.claude/settings.local.json

.mockery.yml

@@ -8,14 +8,6 @@ packages:
       filename: "alertmanager.go"
       structname: 'Mock{{.InterfaceName}}'
       pkgname: '{{.SrcPackageName}}test'
-  github.com/SigNoz/signoz/pkg/types/alertmanagertypes:
-    interfaces:
-      MaintenanceStore:
-    config:
-      dir: '{{.InterfaceDir}}/alertmanagertypestest'
-      filename: "maintenance.go"
-      structname: 'Mock{{.InterfaceName}}'
-      pkgname: '{{.SrcPackageName}}test'
   github.com/SigNoz/signoz/pkg/tokenizer:
     config:
       all: true

docs/api/openapi.yml

@@ -96,53 +96,6 @@ components:
       - createdAt
       - updatedAt
       type: object
-    AlertmanagertypesMaintenanceKind:
-      enum:
-      - fixed
-      - recurring
-      type: string
-    AlertmanagertypesMaintenanceStatus:
-      enum:
-      - active
-      - upcoming
-      - expired
-      type: string
-    AlertmanagertypesPlannedMaintenance:
-      properties:
-        alertIds:
-          items:
-            type: string
-          nullable: true
-          type: array
-        createdAt:
-          format: date-time
-          type: string
-        createdBy:
-          type: string
-        description:
-          type: string
-        id:
-          type: string
-        kind:
-          $ref: '#/components/schemas/AlertmanagertypesMaintenanceKind'
-        name:
-          type: string
-        schedule:
-          $ref: '#/components/schemas/AlertmanagertypesSchedule'
-        status:
-          $ref: '#/components/schemas/AlertmanagertypesMaintenanceStatus'
-        updatedAt:
-          format: date-time
-          type: string
-        updatedBy:
-          type: string
-      required:
-      - id
-      - name
-      - schedule
-      - status
-      - kind
-      type: object
     AlertmanagertypesPostableChannel:
       oneOf:
       - required:
@@ -259,23 +212,6 @@ components:
       required:
       - name
       type: object
-    AlertmanagertypesPostablePlannedMaintenance:
-      properties:
-        alertIds:
-          items:
-            type: string
-          nullable: true
-          type: array
-        description:
-          type: string
-        name:
-          type: string
-        schedule:
-          $ref: '#/components/schemas/AlertmanagertypesSchedule'
-      required:
-      - name
-      - schedule
-      type: object
     AlertmanagertypesPostableRoutePolicy:
       properties:
         channels:
@@ -301,60 +237,6 @@ components:
       - channels
       - name
       type: object
-    AlertmanagertypesRecurrence:
-      properties:
-        duration:
-          type: string
-        endTime:
-          format: date-time
-          nullable: true
-          type: string
-        repeatOn:
-          items:
-            $ref: '#/components/schemas/AlertmanagertypesRepeatOn'
-          nullable: true
-          type: array
-        repeatType:
-          $ref: '#/components/schemas/AlertmanagertypesRepeatType'
-        startTime:
-          format: date-time
-          type: string
-      required:
-      - startTime
-      - duration
-      - repeatType
-      type: object
-    AlertmanagertypesRepeatOn:
-      enum:
-      - sunday
-      - monday
-      - tuesday
-      - wednesday
-      - thursday
-      - friday
-      - saturday
-      type: string
-    AlertmanagertypesRepeatType:
-      enum:
-      - daily
-      - weekly
-      - monthly
-      type: string
-    AlertmanagertypesSchedule:
-      properties:
-        endTime:
-          format: date-time
-          type: string
-        recurrence:
-          $ref: '#/components/schemas/AlertmanagertypesRecurrence'
-        startTime:
-          format: date-time
-          type: string
-        timezone:
-          type: string
-      required:
-      - timezone
-      type: object
     AuthtypesAttributeMapping:
       properties:
         email:
@@ -5255,6 +5137,17 @@ components:
         message:
           type: string
       type: object
+    RuletypesMaintenanceKind:
+      enum:
+      - fixed
+      - recurring
+      type: string
+    RuletypesMaintenanceStatus:
+      enum:
+      - active
+      - upcoming
+      - expired
+      type: string
     RuletypesMatchType:
       enum:
       - at_least_once
@@ -5282,6 +5175,59 @@ components:
       - table
       - graph
       type: string
+    RuletypesPlannedMaintenance:
+      properties:
+        alertIds:
+          items:
+            type: string
+          nullable: true
+          type: array
+        createdAt:
+          format: date-time
+          type: string
+        createdBy:
+          type: string
+        description:
+          type: string
+        id:
+          type: string
+        kind:
+          $ref: '#/components/schemas/RuletypesMaintenanceKind'
+        name:
+          type: string
+        schedule:
+          $ref: '#/components/schemas/RuletypesSchedule'
+        status:
+          $ref: '#/components/schemas/RuletypesMaintenanceStatus'
+        updatedAt:
+          format: date-time
+          type: string
+        updatedBy:
+          type: string
+      required:
+      - id
+      - name
+      - schedule
+      - status
+      - kind
+      type: object
+    RuletypesPostablePlannedMaintenance:
+      properties:
+        alertIds:
+          items:
+            type: string
+          nullable: true
+          type: array
+        description:
+          type: string
+        name:
+          type: string
+        schedule:
+          $ref: '#/components/schemas/RuletypesSchedule'
+      required:
+      - name
+      - schedule
+      type: object
     RuletypesPostableRule:
       properties:
         alert:
@@ -5334,6 +5280,29 @@ components:
       - clickhouse_sql
       - promql
       type: string
+    RuletypesRecurrence:
+      properties:
+        duration:
+          type: string
+        endTime:
+          format: date-time
+          nullable: true
+          type: string
+        repeatOn:
+          items:
+            $ref: '#/components/schemas/RuletypesRepeatOn'
+          nullable: true
+          type: array
+        repeatType:
+          $ref: '#/components/schemas/RuletypesRepeatType'
+        startTime:
+          format: date-time
+          type: string
+      required:
+      - startTime
+      - duration
+      - repeatType
+      type: object
     RuletypesRenotify:
       properties:
         alertStates:
@@ -5345,6 +5314,22 @@ components:
         interval:
           type: string
       type: object
+    RuletypesRepeatOn:
+      enum:
+      - sunday
+      - monday
+      - tuesday
+      - wednesday
+      - thursday
+      - friday
+      - saturday
+      type: string
+    RuletypesRepeatType:
+      enum:
+      - daily
+      - weekly
+      - monthly
+      type: string
     RuletypesRollingWindow:
       properties:
         evalWindow:
@@ -5464,6 +5449,21 @@ components:
       - promql_rule
       - anomaly_rule
       type: string
+    RuletypesSchedule:
+      properties:
+        endTime:
+          format: date-time
+          type: string
+        recurrence:
+          $ref: '#/components/schemas/RuletypesRecurrence'
+        startTime:
+          format: date-time
+          type: string
+        timezone:
+          type: string
+      required:
+      - timezone
+      type: object
     RuletypesScheduleType:
       enum:
       - hourly
@@ -8024,7 +8024,7 @@ paths:
                 properties:
                   data:
                     items:
-                      $ref: '#/components/schemas/AlertmanagertypesPlannedMaintenance'
+                      $ref: '#/components/schemas/RuletypesPlannedMaintenance'
                     type: array
                   status:
                     type: string
@@ -8067,7 +8067,7 @@ paths:
         content:
           application/json:
             schema:
-              $ref: '#/components/schemas/AlertmanagertypesPostablePlannedMaintenance'
+              $ref: '#/components/schemas/RuletypesPostablePlannedMaintenance'
       responses:
         "201":
           content:
@@ -8075,7 +8075,7 @@ paths:
               schema:
                 properties:
                   data:
-                    $ref: '#/components/schemas/AlertmanagertypesPlannedMaintenance'
+                    $ref: '#/components/schemas/RuletypesPlannedMaintenance'
                   status:
                     type: string
                 required:
@@ -8178,7 +8178,7 @@ paths:
               schema:
                 properties:
                   data:
-                    $ref: '#/components/schemas/AlertmanagertypesPlannedMaintenance'
+                    $ref: '#/components/schemas/RuletypesPlannedMaintenance'
                   status:
                     type: string
                 required:
@@ -8232,7 +8232,7 @@ paths:
         content:
           application/json:
             schema:
-              $ref: '#/components/schemas/AlertmanagertypesPostablePlannedMaintenance'
+              $ref: '#/components/schemas/RuletypesPostablePlannedMaintenance'
       responses:
         "204":
           description: No Content

ee/query-service/rules/manager.go

@@ -13,6 +13,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/errors"
 	baserules "github.com/SigNoz/signoz/pkg/query-service/rules"
 	"github.com/SigNoz/signoz/pkg/types/ruletypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
 )
 
 func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error) {
@@ -48,7 +49,7 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 		rules = append(rules, tr)
 
 		// create ch rule task for evaluation
-		task = newTask(baserules.TaskTypeCh, opts.TaskName, evaluation.GetFrequency().Duration(), rules, opts.ManagerOpts, opts.NotifyFunc)
+		task = newTask(baserules.TaskTypeCh, opts.TaskName, evaluation.GetFrequency().Duration(), rules, opts.ManagerOpts, opts.NotifyFunc, opts.MaintenanceStore, opts.OrgID)
 
 	} else if opts.Rule.RuleType == ruletypes.RuleTypeProm {
 
@@ -72,7 +73,7 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 		rules = append(rules, pr)
 
 		// create promql rule task for evaluation
-		task = newTask(baserules.TaskTypeProm, opts.TaskName, evaluation.GetFrequency().Duration(), rules, opts.ManagerOpts, opts.NotifyFunc)
+		task = newTask(baserules.TaskTypeProm, opts.TaskName, evaluation.GetFrequency().Duration(), rules, opts.ManagerOpts, opts.NotifyFunc, opts.MaintenanceStore, opts.OrgID)
 
 	} else if opts.Rule.RuleType == ruletypes.RuleTypeAnomaly {
 		// create anomaly rule
@@ -95,7 +96,7 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 		rules = append(rules, ar)
 
 		// create anomaly rule task for evaluation
-		task = newTask(baserules.TaskTypeCh, opts.TaskName, evaluation.GetFrequency().Duration(), rules, opts.ManagerOpts, opts.NotifyFunc)
+		task = newTask(baserules.TaskTypeCh, opts.TaskName, evaluation.GetFrequency().Duration(), rules, opts.ManagerOpts, opts.NotifyFunc, opts.MaintenanceStore, opts.OrgID)
 
 	} else {
 		return nil, errors.NewInvalidInputf(errors.CodeInvalidInput, "unsupported rule type %s. Supported types: %s, %s", opts.Rule.RuleType, ruletypes.RuleTypeProm, ruletypes.RuleTypeThreshold)
@@ -209,9 +210,9 @@ func TestNotification(opts baserules.PrepareTestRuleOptions) (int, error) {
 }
 
 // newTask returns an appropriate group for the rule type
-func newTask(taskType baserules.TaskType, name string, frequency time.Duration, rules []baserules.Rule, opts *baserules.ManagerOptions, notify baserules.NotifyFunc) baserules.Task {
+func newTask(taskType baserules.TaskType, name string, frequency time.Duration, rules []baserules.Rule, opts *baserules.ManagerOptions, notify baserules.NotifyFunc, maintenanceStore ruletypes.MaintenanceStore, orgID valuer.UUID) baserules.Task {
 	if taskType == baserules.TaskTypeCh {
-		return baserules.NewRuleTask(name, "", frequency, rules, opts, notify)
+		return baserules.NewRuleTask(name, "", frequency, rules, opts, notify, maintenanceStore, orgID)
 	}
-	return baserules.NewPromRuleTask(name, "", frequency, rules, opts, notify)
+	return baserules.NewPromRuleTask(name, "", frequency, rules, opts, notify, maintenanceStore, orgID)
 }

frontend/orval.config.ts

@@ -34,7 +34,7 @@ export default defineConfig({
 					signal: true,
 					useOperationIdAsQueryKey: false,
 				},
-				useDates: false,
+				useDates: true,
 				useNamedParameters: true,
 				enumGenerationType: 'enum',
 				mutator: {

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

@@ -18,7 +18,6 @@ import type {
 } from 'react-query';
 
 import type {
-	AlertmanagertypesPostablePlannedMaintenanceDTO,
 	CreateDowntimeSchedule201,
 	DeleteDowntimeScheduleByIDPathParameters,
 	GetDowntimeScheduleByID200,
@@ -26,6 +25,7 @@ import type {
 	ListDowntimeSchedules200,
 	ListDowntimeSchedulesParams,
 	RenderErrorResponseDTO,
+	RuletypesPostablePlannedMaintenanceDTO,
 	UpdateDowntimeScheduleByIDPathParameters,
 } from '../sigNoz.schemas';
 
@@ -135,14 +135,14 @@ export const invalidateListDowntimeSchedules = async (
  * @summary Create downtime schedule
  */
 export const createDowntimeSchedule = (
-	alertmanagertypesPostablePlannedMaintenanceDTO?: BodyType<AlertmanagertypesPostablePlannedMaintenanceDTO>,
+	ruletypesPostablePlannedMaintenanceDTO?: BodyType<RuletypesPostablePlannedMaintenanceDTO>,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<CreateDowntimeSchedule201>({
 		url: `/api/v1/downtime_schedules`,
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
-		data: alertmanagertypesPostablePlannedMaintenanceDTO,
+		data: ruletypesPostablePlannedMaintenanceDTO,
 		signal,
 	});
 };
@@ -154,13 +154,13 @@ export const getCreateDowntimeScheduleMutationOptions = <
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createDowntimeSchedule>>,
 		TError,
-		{ data?: BodyType<AlertmanagertypesPostablePlannedMaintenanceDTO> },
+		{ data?: BodyType<RuletypesPostablePlannedMaintenanceDTO> },
 		TContext
 	>;
 }): UseMutationOptions<
 	Awaited<ReturnType<typeof createDowntimeSchedule>>,
 	TError,
-	{ data?: BodyType<AlertmanagertypesPostablePlannedMaintenanceDTO> },
+	{ data?: BodyType<RuletypesPostablePlannedMaintenanceDTO> },
 	TContext
 > => {
 	const mutationKey = ['createDowntimeSchedule'];
@@ -174,7 +174,7 @@ export const getCreateDowntimeScheduleMutationOptions = <
 
 	const mutationFn: MutationFunction<
 		Awaited<ReturnType<typeof createDowntimeSchedule>>,
-		{ data?: BodyType<AlertmanagertypesPostablePlannedMaintenanceDTO> }
+		{ data?: BodyType<RuletypesPostablePlannedMaintenanceDTO> }
 	> = (props) => {
 		const { data } = props ?? {};
 
@@ -188,7 +188,7 @@ export type CreateDowntimeScheduleMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createDowntimeSchedule>>
 >;
 export type CreateDowntimeScheduleMutationBody =
-	| BodyType<AlertmanagertypesPostablePlannedMaintenanceDTO>
+	| BodyType<RuletypesPostablePlannedMaintenanceDTO>
 	| undefined;
 export type CreateDowntimeScheduleMutationError =
 	ErrorType<RenderErrorResponseDTO>;
@@ -203,13 +203,13 @@ export const useCreateDowntimeSchedule = <
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createDowntimeSchedule>>,
 		TError,
-		{ data?: BodyType<AlertmanagertypesPostablePlannedMaintenanceDTO> },
+		{ data?: BodyType<RuletypesPostablePlannedMaintenanceDTO> },
 		TContext
 	>;
 }): UseMutationResult<
 	Awaited<ReturnType<typeof createDowntimeSchedule>>,
 	TError,
-	{ data?: BodyType<AlertmanagertypesPostablePlannedMaintenanceDTO> },
+	{ data?: BodyType<RuletypesPostablePlannedMaintenanceDTO> },
 	TContext
 > => {
 	return useMutation(getCreateDowntimeScheduleMutationOptions(options));
@@ -403,14 +403,14 @@ export const invalidateGetDowntimeScheduleByID = async (
  */
 export const updateDowntimeScheduleByID = (
 	{ id }: UpdateDowntimeScheduleByIDPathParameters,
-	alertmanagertypesPostablePlannedMaintenanceDTO?: BodyType<AlertmanagertypesPostablePlannedMaintenanceDTO>,
+	ruletypesPostablePlannedMaintenanceDTO?: BodyType<RuletypesPostablePlannedMaintenanceDTO>,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<void>({
 		url: `/api/v1/downtime_schedules/${id}`,
 		method: 'PUT',
 		headers: { 'Content-Type': 'application/json' },
-		data: alertmanagertypesPostablePlannedMaintenanceDTO,
+		data: ruletypesPostablePlannedMaintenanceDTO,
 		signal,
 	});
 };
@@ -424,7 +424,7 @@ export const getUpdateDowntimeScheduleByIDMutationOptions = <
 		TError,
 		{
 			pathParams: UpdateDowntimeScheduleByIDPathParameters;
-			data?: BodyType<AlertmanagertypesPostablePlannedMaintenanceDTO>;
+			data?: BodyType<RuletypesPostablePlannedMaintenanceDTO>;
 		},
 		TContext
 	>;
@@ -433,7 +433,7 @@ export const getUpdateDowntimeScheduleByIDMutationOptions = <
 	TError,
 	{
 		pathParams: UpdateDowntimeScheduleByIDPathParameters;
-		data?: BodyType<AlertmanagertypesPostablePlannedMaintenanceDTO>;
+		data?: BodyType<RuletypesPostablePlannedMaintenanceDTO>;
 	},
 	TContext
 > => {
@@ -450,7 +450,7 @@ export const getUpdateDowntimeScheduleByIDMutationOptions = <
 		Awaited<ReturnType<typeof updateDowntimeScheduleByID>>,
 		{
 			pathParams: UpdateDowntimeScheduleByIDPathParameters;
-			data?: BodyType<AlertmanagertypesPostablePlannedMaintenanceDTO>;
+			data?: BodyType<RuletypesPostablePlannedMaintenanceDTO>;
 		}
 	> = (props) => {
 		const { pathParams, data } = props ?? {};
@@ -465,7 +465,7 @@ export type UpdateDowntimeScheduleByIDMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updateDowntimeScheduleByID>>
 >;
 export type UpdateDowntimeScheduleByIDMutationBody =
-	| BodyType<AlertmanagertypesPostablePlannedMaintenanceDTO>
+	| BodyType<RuletypesPostablePlannedMaintenanceDTO>
 	| undefined;
 export type UpdateDowntimeScheduleByIDMutationError =
 	ErrorType<RenderErrorResponseDTO>;
@@ -482,7 +482,7 @@ export const useUpdateDowntimeScheduleByID = <
 		TError,
 		{
 			pathParams: UpdateDowntimeScheduleByIDPathParameters;
-			data?: BodyType<AlertmanagertypesPostablePlannedMaintenanceDTO>;
+			data?: BodyType<RuletypesPostablePlannedMaintenanceDTO>;
 		},
 		TContext
 	>;
@@ -491,7 +491,7 @@ export const useUpdateDowntimeScheduleByID = <
 	TError,
 	{
 		pathParams: UpdateDowntimeScheduleByIDPathParameters;
-		data?: BodyType<AlertmanagertypesPostablePlannedMaintenanceDTO>;
+		data?: BodyType<RuletypesPostablePlannedMaintenanceDTO>;
 	},
 	TContext
 > => {

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

@@ -9,7 +9,7 @@ export interface AlertmanagertypesChannelDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	createdAt?: string;
+	createdAt?: Date;
 	/**
 	 * @type string
 	 */
@@ -34,7 +34,7 @@ export interface AlertmanagertypesChannelDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	updatedAt?: string;
+	updatedAt?: Date;
 }
 
 export interface ModelLabelSetDTO {
@@ -62,7 +62,7 @@ export interface AlertmanagertypesDeprecatedGettableAlertDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	endsAt?: string;
+	endsAt?: Date;
 	/**
 	 * @type string
 	 */
@@ -80,7 +80,7 @@ export interface AlertmanagertypesDeprecatedGettableAlertDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	startsAt?: string;
+	startsAt?: Date;
 	status?: TypesAlertStatusDTO;
 }
 
@@ -97,7 +97,7 @@ export interface AlertmanagertypesGettableRoutePolicyDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	createdAt: string;
+	createdAt: Date;
 	/**
 	 * @type string,null
 	 */
@@ -127,116 +127,13 @@ export interface AlertmanagertypesGettableRoutePolicyDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	updatedAt: string;
+	updatedAt: Date;
 	/**
 	 * @type string,null
 	 */
 	updatedBy?: string | null;
 }
 
-export enum AlertmanagertypesMaintenanceKindDTO {
-	fixed = 'fixed',
-	recurring = 'recurring',
-}
-export enum AlertmanagertypesMaintenanceStatusDTO {
-	active = 'active',
-	upcoming = 'upcoming',
-	expired = 'expired',
-}
-export enum AlertmanagertypesRepeatOnDTO {
-	sunday = 'sunday',
-	monday = 'monday',
-	tuesday = 'tuesday',
-	wednesday = 'wednesday',
-	thursday = 'thursday',
-	friday = 'friday',
-	saturday = 'saturday',
-}
-export enum AlertmanagertypesRepeatTypeDTO {
-	daily = 'daily',
-	weekly = 'weekly',
-	monthly = 'monthly',
-}
-export interface AlertmanagertypesRecurrenceDTO {
-	/**
-	 * @type string
-	 */
-	duration: string;
-	/**
-	 * @type string,null
-	 * @format date-time
-	 */
-	endTime?: string | null;
-	/**
-	 * @type array,null
-	 */
-	repeatOn?: AlertmanagertypesRepeatOnDTO[] | null;
-	repeatType: AlertmanagertypesRepeatTypeDTO;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	startTime: string;
-}
-
-export interface AlertmanagertypesScheduleDTO {
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	endTime?: string;
-	recurrence?: AlertmanagertypesRecurrenceDTO;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	startTime?: string;
-	/**
-	 * @type string
-	 */
-	timezone: string;
-}
-
-export interface AlertmanagertypesPlannedMaintenanceDTO {
-	/**
-	 * @type array,null
-	 */
-	alertIds?: string[] | null;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt?: string;
-	/**
-	 * @type string
-	 */
-	createdBy?: string;
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type string
-	 */
-	id: string;
-	kind: AlertmanagertypesMaintenanceKindDTO;
-	/**
-	 * @type string
-	 */
-	name: string;
-	schedule: AlertmanagertypesScheduleDTO;
-	status: AlertmanagertypesMaintenanceStatusDTO;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt?: string;
-	/**
-	 * @type string
-	 */
-	updatedBy?: string;
-}
-
 export interface ConfigAuthorizationDTO {
 	/**
 	 * @type string
@@ -1700,22 +1597,6 @@ export type AlertmanagertypesPostableChannelDTO = unknown & {
 	wechat_configs?: ConfigWechatConfigDTO[];
 };
 
-export interface AlertmanagertypesPostablePlannedMaintenanceDTO {
-	/**
-	 * @type array,null
-	 */
-	alertIds?: string[] | null;
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type string
-	 */
-	name: string;
-	schedule: AlertmanagertypesScheduleDTO;
-}
-
 export interface AlertmanagertypesPostableRoutePolicyDTO {
 	/**
 	 * @type array,null
@@ -1953,7 +1834,7 @@ export interface AuthtypesGettableAuthDomainDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	createdAt?: string;
+	createdAt?: Date;
 	/**
 	 * @type string
 	 */
@@ -1970,7 +1851,7 @@ export interface AuthtypesGettableAuthDomainDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	updatedAt?: string;
+	updatedAt?: Date;
 }
 
 export interface AuthtypesGettableTokenDTO {
@@ -2128,7 +2009,7 @@ export interface AuthtypesRoleDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	createdAt?: string;
+	createdAt?: Date;
 	/**
 	 * @type string
 	 */
@@ -2153,7 +2034,7 @@ export interface AuthtypesRoleDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	updatedAt?: string;
+	updatedAt?: Date;
 }
 
 export interface AuthtypesSessionContextDTO {
@@ -2181,7 +2062,7 @@ export interface AuthtypesUserRoleDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	createdAt: string;
+	createdAt: Date;
 	/**
 	 * @type string
 	 */
@@ -2195,7 +2076,7 @@ export interface AuthtypesUserRoleDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	updatedAt: string;
+	updatedAt: Date;
 	/**
 	 * @type string
 	 */
@@ -2207,7 +2088,7 @@ export interface AuthtypesUserWithRolesDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	createdAt?: string;
+	createdAt?: Date;
 	/**
 	 * @type string
 	 */
@@ -2236,7 +2117,7 @@ export interface AuthtypesUserWithRolesDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	updatedAt?: string;
+	updatedAt?: Date;
 	/**
 	 * @type array,null
 	 */
@@ -2403,7 +2284,7 @@ export interface CloudintegrationtypesAccountDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	createdAt?: string;
+	createdAt?: Date;
 	/**
 	 * @type string
 	 */
@@ -2424,12 +2305,12 @@ export interface CloudintegrationtypesAccountDTO {
 	 * @type string,null
 	 * @format date-time
 	 */
-	removedAt: string | null;
+	removedAt: Date | null;
 	/**
 	 * @type string
 	 * @format date-time
 	 */
-	updatedAt?: string;
+	updatedAt?: Date;
 }
 
 export interface DashboardtypesStorableDashboardDataDTO {
@@ -2560,7 +2441,7 @@ export type CloudintegrationtypesCloudIntegrationServiceDTOAnyOf = {
 	 * @type string
 	 * @format date-time
 	 */
-	createdAt?: string;
+	createdAt?: Date;
 	/**
 	 * @type string
 	 */
@@ -2570,7 +2451,7 @@ export type CloudintegrationtypesCloudIntegrationServiceDTOAnyOf = {
 	 * @type string
 	 * @format date-time
 	 */
-	updatedAt?: string;
+	updatedAt?: Date;
 };
 
 /**
@@ -2764,12 +2645,12 @@ export interface CloudintegrationtypesGettableAgentCheckInDTO {
 	 * @type string,null
 	 * @format date-time
 	 */
-	removed_at: string | null;
+	removed_at: Date | null;
 	/**
 	 * @type string,null
 	 * @format date-time
 	 */
-	removedAt: string | null;
+	removedAt: Date | null;
 }
 
 export interface CloudintegrationtypesServiceMetadataDTO {
@@ -3004,7 +2885,7 @@ export interface DashboardtypesDashboardDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	createdAt?: string;
+	createdAt?: Date;
 	/**
 	 * @type string
 	 */
@@ -3026,7 +2907,7 @@ export interface DashboardtypesDashboardDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	updatedAt?: string;
+	updatedAt?: Date;
 	/**
 	 * @type string
 	 */
@@ -3208,7 +3089,7 @@ export interface GatewaytypesLimitDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	created_at?: string;
+	created_at?: Date;
 	/**
 	 * @type string
 	 */
@@ -3230,7 +3111,7 @@ export interface GatewaytypesLimitDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	updated_at?: string;
+	updated_at?: Date;
 }
 
 export interface GatewaytypesIngestionKeyDTO {
@@ -3238,12 +3119,12 @@ export interface GatewaytypesIngestionKeyDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	created_at?: string;
+	created_at?: Date;
 	/**
 	 * @type string
 	 * @format date-time
 	 */
-	expires_at?: string;
+	expires_at?: Date;
 	/**
 	 * @type string
 	 */
@@ -3264,7 +3145,7 @@ export interface GatewaytypesIngestionKeyDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	updated_at?: string;
+	updated_at?: Date;
 	/**
 	 * @type string
 	 */
@@ -3288,7 +3169,7 @@ export interface GatewaytypesPostableIngestionKeyDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	expires_at?: string;
+	expires_at?: Date;
 	/**
 	 * @type string
 	 */
@@ -4558,7 +4439,7 @@ export interface LlmpricingruletypesLLMPricingRuleDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	createdAt?: string;
+	createdAt?: Date;
 	/**
 	 * @type string
 	 */
@@ -4597,13 +4478,13 @@ export interface LlmpricingruletypesLLMPricingRuleDTO {
 	 * @type string,null
 	 * @format date-time
 	 */
-	syncedAt?: string | null;
+	syncedAt?: Date | null;
 	unit: LlmpricingruletypesLLMPricingRuleUnitDTO;
 	/**
 	 * @type string
 	 * @format date-time
 	 */
-	updatedAt?: string;
+	updatedAt?: Date;
 	/**
 	 * @type string
 	 */
@@ -5829,7 +5710,7 @@ export interface Querybuildertypesv5RawRowDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	timestamp?: string;
+	timestamp?: Date;
 }
 
 export interface Querybuildertypesv5RawDataDTO {
@@ -6235,6 +6116,15 @@ export interface RuletypesGettableTestRuleDTO {
 	message?: string;
 }
 
+export enum RuletypesMaintenanceKindDTO {
+	fixed = 'fixed',
+	recurring = 'recurring',
+}
+export enum RuletypesMaintenanceStatusDTO {
+	active = 'active',
+	upcoming = 'upcoming',
+	expired = 'expired',
+}
 export interface RuletypesRenotifyDTO {
 	/**
 	 * @type array
@@ -6266,6 +6156,116 @@ export interface RuletypesNotificationSettingsDTO {
 	usePolicy?: boolean;
 }
 
+export enum RuletypesRepeatOnDTO {
+	sunday = 'sunday',
+	monday = 'monday',
+	tuesday = 'tuesday',
+	wednesday = 'wednesday',
+	thursday = 'thursday',
+	friday = 'friday',
+	saturday = 'saturday',
+}
+export enum RuletypesRepeatTypeDTO {
+	daily = 'daily',
+	weekly = 'weekly',
+	monthly = 'monthly',
+}
+export interface RuletypesRecurrenceDTO {
+	/**
+	 * @type string
+	 */
+	duration: string;
+	/**
+	 * @type string,null
+	 * @format date-time
+	 */
+	endTime?: Date | null;
+	/**
+	 * @type array,null
+	 */
+	repeatOn?: RuletypesRepeatOnDTO[] | null;
+	repeatType: RuletypesRepeatTypeDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	startTime: Date;
+}
+
+export interface RuletypesScheduleDTO {
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	endTime?: Date;
+	recurrence?: RuletypesRecurrenceDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	startTime?: Date;
+	/**
+	 * @type string
+	 */
+	timezone: string;
+}
+
+export interface RuletypesPlannedMaintenanceDTO {
+	/**
+	 * @type array,null
+	 */
+	alertIds?: string[] | null;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: Date;
+	/**
+	 * @type string
+	 */
+	createdBy?: string;
+	/**
+	 * @type string
+	 */
+	description?: string;
+	/**
+	 * @type string
+	 */
+	id: string;
+	kind: RuletypesMaintenanceKindDTO;
+	/**
+	 * @type string
+	 */
+	name: string;
+	schedule: RuletypesScheduleDTO;
+	status: RuletypesMaintenanceStatusDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: Date;
+	/**
+	 * @type string
+	 */
+	updatedBy?: string;
+}
+
+export interface RuletypesPostablePlannedMaintenanceDTO {
+	/**
+	 * @type array,null
+	 */
+	alertIds?: string[] | null;
+	/**
+	 * @type string
+	 */
+	description?: string;
+	/**
+	 * @type string
+	 */
+	name: string;
+	schedule: RuletypesScheduleDTO;
+}
+
 export type RuletypesPostableRuleDTOAnnotations = { [key: string]: string };
 
 export type RuletypesPostableRuleDTOLabels = { [key: string]: string };
@@ -6406,7 +6406,7 @@ export interface RuletypesRuleDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	createdAt?: string;
+	createdAt?: Date;
 	/**
 	 * @type string
 	 */
@@ -6455,7 +6455,7 @@ export interface RuletypesRuleDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	updatedAt?: string;
+	updatedAt?: Date;
 	/**
 	 * @type string
 	 */
@@ -6474,7 +6474,7 @@ export interface ServiceaccounttypesGettableFactorAPIKeyDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	createdAt?: string;
+	createdAt?: Date;
 	/**
 	 * @type integer
 	 * @minimum 0
@@ -6488,7 +6488,7 @@ export interface ServiceaccounttypesGettableFactorAPIKeyDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	lastObservedAt: string;
+	lastObservedAt: Date;
 	/**
 	 * @type string
 	 */
@@ -6501,7 +6501,7 @@ export interface ServiceaccounttypesGettableFactorAPIKeyDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	updatedAt?: string;
+	updatedAt?: Date;
 }
 
 export interface ServiceaccounttypesGettableFactorAPIKeyWithKeyDTO {
@@ -6546,7 +6546,7 @@ export interface ServiceaccounttypesServiceAccountDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	createdAt?: string;
+	createdAt?: Date;
 	/**
 	 * @type string
 	 */
@@ -6571,7 +6571,7 @@ export interface ServiceaccounttypesServiceAccountDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	updatedAt?: string;
+	updatedAt?: Date;
 }
 
 export interface ServiceaccounttypesServiceAccountRoleDTO {
@@ -6579,7 +6579,7 @@ export interface ServiceaccounttypesServiceAccountRoleDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	createdAt?: string;
+	createdAt?: Date;
 	/**
 	 * @type string
 	 */
@@ -6597,7 +6597,7 @@ export interface ServiceaccounttypesServiceAccountRoleDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	updatedAt?: string;
+	updatedAt?: Date;
 }
 
 export interface ServiceaccounttypesServiceAccountWithRolesDTO {
@@ -6605,7 +6605,7 @@ export interface ServiceaccounttypesServiceAccountWithRolesDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	createdAt?: string;
+	createdAt?: Date;
 	/**
 	 * @type string
 	 */
@@ -6634,7 +6634,7 @@ export interface ServiceaccounttypesServiceAccountWithRolesDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	updatedAt?: string;
+	updatedAt?: Date;
 }
 
 export interface ServiceaccounttypesUpdatableFactorAPIKeyDTO {
@@ -6676,7 +6676,7 @@ export interface SpantypesSpanMapperGroupDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	createdAt?: string;
+	createdAt?: Date;
 	/**
 	 * @type string
 	 */
@@ -6701,7 +6701,7 @@ export interface SpantypesSpanMapperGroupDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	updatedAt?: string;
+	updatedAt?: Date;
 	/**
 	 * @type string
 	 */
@@ -6770,7 +6770,7 @@ export interface SpantypesSpanMapperDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	createdAt?: string;
+	createdAt?: Date;
 	/**
 	 * @type string
 	 */
@@ -6796,7 +6796,7 @@ export interface SpantypesSpanMapperDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	updatedAt?: string;
+	updatedAt?: Date;
 	/**
 	 * @type string
 	 */
@@ -7163,7 +7163,7 @@ export interface TypesDeprecatedUserDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	createdAt?: string;
+	createdAt?: Date;
 	/**
 	 * @type string
 	 */
@@ -7196,7 +7196,7 @@ export interface TypesDeprecatedUserDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	updatedAt?: string;
+	updatedAt?: Date;
 }
 
 export interface TypesIdentifiableDTO {
@@ -7211,7 +7211,7 @@ export interface TypesInviteDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	createdAt?: string;
+	createdAt?: Date;
 	/**
 	 * @type string
 	 */
@@ -7244,7 +7244,7 @@ export interface TypesInviteDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	updatedAt?: string;
+	updatedAt?: Date;
 }
 
 export interface TypesOrganizationDTO {
@@ -7256,7 +7256,7 @@ export interface TypesOrganizationDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	createdAt?: string;
+	createdAt?: Date;
 	/**
 	 * @type string
 	 */
@@ -7278,7 +7278,7 @@ export interface TypesOrganizationDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	updatedAt?: string;
+	updatedAt?: Date;
 }
 
 export interface TypesPostableInviteDTO {
@@ -7345,7 +7345,7 @@ export interface TypesResetPasswordTokenDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	expiresAt?: string;
+	expiresAt?: Date;
 	/**
 	 * @type string
 	 */
@@ -7372,7 +7372,7 @@ export interface TypesUserDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	createdAt?: string;
+	createdAt?: Date;
 	/**
 	 * @type string
 	 */
@@ -7401,7 +7401,7 @@ export interface TypesUserDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	updatedAt?: string;
+	updatedAt?: Date;
 }
 
 export interface ZeustypesHostDTO {
@@ -7793,7 +7793,7 @@ export type ListDowntimeSchedules200 = {
 	/**
 	 * @type array
 	 */
-	data: AlertmanagertypesPlannedMaintenanceDTO[];
+	data: RuletypesPlannedMaintenanceDTO[];
 	/**
 	 * @type string
 	 */
@@ -7801,7 +7801,7 @@ export type ListDowntimeSchedules200 = {
 };
 
 export type CreateDowntimeSchedule201 = {
-	data: AlertmanagertypesPlannedMaintenanceDTO;
+	data: RuletypesPlannedMaintenanceDTO;
 	/**
 	 * @type string
 	 */
@@ -7815,7 +7815,7 @@ export type GetDowntimeScheduleByIDPathParameters = {
 	id: string;
 };
 export type GetDowntimeScheduleByID200 = {
-	data: AlertmanagertypesPlannedMaintenanceDTO;
+	data: RuletypesPlannedMaintenanceDTO;
 	/**
 	 * @type string
 	 */

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

@@ -59,7 +59,7 @@ function getDeleteTooltip(
 
 function getInviteButtonLabel(
 	isLoading: boolean,
-	existingToken: { expiresAt?: string } | undefined,
+	existingToken: { expiresAt?: Date } | undefined,
 	isExpired: boolean,
 	notFound: boolean,
 ): string {

frontend/src/components/FieldsSelector/FieldsSelector.tsx

@@ -1,176 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { toast } from '@signozhq/ui/sonner';
-import { Button } from '@signozhq/ui/button';
-import { Input } from '@signozhq/ui/input';
-import useDebouncedFn from 'hooks/useDebouncedFunction';
-import { Check, TableColumnsSplit, X } from '@signozhq/icons';
-import { FloatingPanel } from 'periscope/components/FloatingPanel';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
-import { DataSource } from 'types/common/queryBuilder';
-
-import AddedFields from './AddedFields';
-import OtherFields from './OtherFields';
-
-import styles from './FieldsSelector.module.scss';
-
-const DEFAULT_PANEL_WIDTH = 350;
-const DEFAULT_PANEL_HEIGHT_OFFSET = 100;
-const DEFAULT_PANEL_RIGHT_INSET = 100;
-const DEFAULT_PANEL_TOP_INSET = 50;
-
-interface FieldsSelectorProps {
-	isOpen: boolean;
-	title: string;
-	fields: TelemetryFieldKey[];
-	onFieldsChange: (fields: TelemetryFieldKey[]) => void;
-	onClose: () => void;
-	signal: DataSource;
-	maxFields?: number;
-	width?: number;
-	height?: number;
-	defaultPosition?: { x: number; y: number };
-}
-
-function FieldsSelector({
-	isOpen,
-	title,
-	fields,
-	onFieldsChange,
-	onClose,
-	signal,
-	maxFields,
-	width = DEFAULT_PANEL_WIDTH,
-	height,
-	defaultPosition,
-}: FieldsSelectorProps): JSX.Element | null {
-	if (!isOpen) {
-		return null;
-	}
-
-	const resolvedHeight =
-		height ?? window.innerHeight - DEFAULT_PANEL_HEIGHT_OFFSET;
-	const resolvedPosition = defaultPosition ?? {
-		x: window.innerWidth - width - DEFAULT_PANEL_RIGHT_INSET,
-		y: DEFAULT_PANEL_TOP_INSET,
-	};
-	const [draftFields, setDraftFields] = useState<TelemetryFieldKey[]>(fields);
-	const [inputValue, setInputValue] = useState('');
-	const [debouncedInputValue, setDebouncedInputValue] = useState('');
-
-	const debouncedUpdate = useDebouncedFn((value) => {
-		setDebouncedInputValue(value as string);
-	}, 400);
-
-	const handleInputChange = useCallback(
-		(e: React.ChangeEvent<HTMLInputElement>): void => {
-			const value = e.target.value.trim().toLowerCase();
-			setInputValue(value);
-			debouncedUpdate(value);
-		},
-		[debouncedUpdate],
-	);
-
-	const handleAdd = useCallback(
-		(field: TelemetryFieldKey): void => {
-			if (maxFields !== undefined && draftFields.length >= maxFields) {
-				return;
-			}
-			if (draftFields.some((f) => f.name === field.name)) {
-				return;
-			}
-			setDraftFields((prev) => [...prev, field]);
-		},
-		[draftFields, maxFields],
-	);
-
-	const handleSave = useCallback((): void => {
-		onFieldsChange(draftFields);
-		toast.success('Saved successfully', {
-			position: 'top-right',
-		});
-		onClose();
-	}, [draftFields, onFieldsChange, onClose]);
-
-	const handleDiscard = useCallback((): void => {
-		setDraftFields(fields);
-	}, [fields]);
-
-	const hasUnsavedChanges = useMemo(
-		() =>
-			!(
-				draftFields.length === fields.length &&
-				draftFields.every((f, i) => f.name === fields[i]?.name)
-			),
-		[draftFields, fields],
-	);
-
-	const isAtLimit = maxFields !== undefined && draftFields.length >= maxFields;
-
-	return (
-		<FloatingPanel
-			isOpen
-			width={width}
-			height={resolvedHeight}
-			defaultPosition={resolvedPosition}
-			enableResizing={false}
-		>
-			<div className={styles.root}>
-				<div className={styles.header}>
-					<div className={styles.title}>
-						<TableColumnsSplit size={16} />
-						{title}
-					</div>
-					<X className={styles.closeIcon} size={16} onClick={onClose} />
-				</div>
-
-				<section>
-					<Input
-						className={styles.searchInput}
-						type="text"
-						value={inputValue}
-						placeholder="Search for a field..."
-						onChange={handleInputChange}
-					/>
-				</section>
-
-				<AddedFields
-					inputValue={inputValue}
-					fields={draftFields}
-					onFieldsChange={setDraftFields}
-					maxFields={maxFields}
-				/>
-
-				<OtherFields
-					signal={signal}
-					debouncedInputValue={debouncedInputValue}
-					addedFields={draftFields}
-					onAdd={handleAdd}
-					isAtLimit={isAtLimit}
-				/>
-
-				{hasUnsavedChanges && (
-					<div className={styles.footer}>
-						<Button
-							variant="outlined"
-							color="secondary"
-							onClick={handleDiscard}
-							prefix={<X width={14} height={14} />}
-						>
-							Discard
-						</Button>
-						<Button
-							variant="solid"
-							color="primary"
-							onClick={handleSave}
-							prefix={<Check width={14} height={14} />}
-						>
-							Save changes
-						</Button>
-					</div>
-				)}
-			</div>
-		</FloatingPanel>
-	);
-}
-
-export default FieldsSelector;

frontend/src/components/FieldsSelector/index.ts

@@ -1 +0,0 @@
-export { default } from './FieldsSelector';

frontend/src/components/HeaderRightSection/HeaderRightSection.tsx

@@ -5,8 +5,6 @@ import { Button } from '@signozhq/ui/button';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Popover } from 'antd';
 import logEvent from 'api/common/logEvent';
-import { AIAssistantEvents } from 'container/AIAssistant/events';
-import { normalizePage } from 'container/AIAssistant/hooks/useAIAssistantAnalyticsContext';
 import {
 	openAIAssistant,
 	useAIAssistantStore,
@@ -52,14 +50,6 @@ function HeaderRightSection({
 		setOpenAnnouncementsModal(false);
 	}, [location.pathname]);
 
-	const handleOpenAIAssistant = useCallback((): void => {
-		void logEvent(AIAssistantEvents.Opened, {
-			source: 'header',
-			currentPage: normalizePage(location.pathname),
-		});
-		openAIAssistant();
-	}, [location.pathname]);
-
 	const handleOpenShareURLModal = useCallback((): void => {
 		logEvent('Share: Clicked', {
 			page: location.pathname,
@@ -111,7 +101,7 @@ function HeaderRightSection({
 						<Button
 							variant="solid"
 							color="secondary"
-							onClick={handleOpenAIAssistant}
+							onClick={openAIAssistant}
 							aria-label={
 								showHeaderPendingBadge
 									? pendingUserInputCount === 1

frontend/src/components/ServiceAccountDrawer/__tests__/EditKeyModal.test.tsx

@@ -28,7 +28,7 @@ const mockKey: ServiceaccounttypesGettableFactorAPIKeyDTO = {
 	id: 'key-1',
 	name: 'Original Key Name',
 	expiresAt: 0,
-	lastObservedAt: null as unknown as string,
+	lastObservedAt: null as unknown as Date,
 	serviceAccountId: 'sa-1',
 };
 

frontend/src/components/ServiceAccountDrawer/__tests__/KeysTab.test.tsx

@@ -29,14 +29,14 @@ const keys: ServiceaccounttypesGettableFactorAPIKeyDTO[] = [
 		id: 'key-1',
 		name: 'Production Key',
 		expiresAt: 0,
-		lastObservedAt: null as unknown as string,
+		lastObservedAt: null as unknown as Date,
 		serviceAccountId: 'sa-1',
 	},
 	{
 		id: 'key-2',
 		name: 'Staging Key',
 		expiresAt: 1924905600, // 2030-12-31
-		lastObservedAt: '2026-03-10T10:00:00Z',
+		lastObservedAt: new Date('2026-03-10T10:00:00Z'),
 		serviceAccountId: 'sa-1',
 	},
 ];

frontend/src/constants/reactQueryKeys.ts

@@ -108,7 +108,4 @@ export const REACT_QUERY_KEY = {
 
 	// Dashboard Grid Card Query Keys
 	DASHBOARD_GRID_CARD_QUERY_RANGE: 'DASHBOARD_GRID_CARD_QUERY_RANGE',
-
-	// Fields Selector Query Keys
-	GET_FIELDS_SELECTOR_SUGGESTIONS: 'GET_FIELDS_SELECTOR_SUGGESTIONS',
 } as const;

frontend/src/container/AIAssistant/AIAssistantModal/AIAssistantModal.tsx

@@ -1,20 +1,13 @@
 import { useCallback, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import { Button } from '@signozhq/ui/button';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import ROUTES from 'constants/routes';
 import { History, Maximize2, Minus, Plus, Sparkles, X } from '@signozhq/icons';
 
-import logEvent from 'api/common/logEvent';
-
 import HistorySidebar from '../components/ConversationsList';
 import ConversationView from '../ConversationView';
-import { AIAssistantEvents } from '../events';
-import {
-	normalizePage,
-	useAIAssistantAnalyticsContext,
-} from '../hooks/useAIAssistantAnalyticsContext';
 import { useAIAssistantStore } from '../store/useAIAssistantStore';
 import { VariantContext } from '../VariantContext';
 
@@ -31,7 +24,6 @@ import styles from './AIAssistantModal.module.scss';
 // eslint-disable-next-line sonarjs/cognitive-complexity
 export default function AIAssistantModal(): JSX.Element | null {
 	const history = useHistory();
-	const { pathname } = useLocation();
 	const [showHistory, setShowHistory] = useState(false);
 
 	const isOpen = useAIAssistantStore((s) => s.isModalOpen);
@@ -44,7 +36,6 @@ export default function AIAssistantModal(): JSX.Element | null {
 	const startNewConversation = useAIAssistantStore(
 		(s) => s.startNewConversation,
 	);
-	const analyticsCtx = useAIAssistantAnalyticsContext();
 
 	useEffect(() => {
 		const handleKeyDown = (e: KeyboardEvent): void => {
@@ -64,10 +55,6 @@ export default function AIAssistantModal(): JSX.Element | null {
 				} else {
 					startNewConversation();
 					setShowHistory(false);
-					void logEvent(AIAssistantEvents.Opened, {
-						source: 'shortcut',
-						currentPage: normalizePage(pathname),
-					});
 					openModal();
 				}
 				return;
@@ -81,7 +68,7 @@ export default function AIAssistantModal(): JSX.Element | null {
 
 		window.addEventListener('keydown', handleKeyDown);
 		return (): void => window.removeEventListener('keydown', handleKeyDown);
-	}, [isOpen, openModal, closeModal, startNewConversation, pathname]);
+	}, [isOpen, openModal, closeModal, startNewConversation]);
 
 	// ── Handlers ────────────────────────────────────────────────────────────────
 
@@ -90,28 +77,15 @@ export default function AIAssistantModal(): JSX.Element | null {
 			return;
 		}
 		closeModal();
-		// Router state tells AIAssistantPage to skip its mount-time Opened fire:
-		// the assistant was already open in the modal, so this is a surface
-		// switch, not a new open.
 		history.push(
 			ROUTES.AI_ASSISTANT.replace(':conversationId', activeConversationId),
-			{ fromInApp: true },
 		);
 	}, [activeConversationId, closeModal, history]);
 
 	const handleNew = useCallback(() => {
-		void logEvent(AIAssistantEvents.NewChatClicked, {
-			...analyticsCtx,
-			// useAIAssistantAnalyticsContext() runs above this component's
-			// VariantContext.Provider, so the hook reports the default 'page'
-			// mode. Override here: the modal collapses to 'sidepane' in our
-			// taxonomy alongside the drawer.
-			mode: 'sidepane',
-			source: 'header',
-		});
 		startNewConversation();
 		setShowHistory(false);
-	}, [startNewConversation, analyticsCtx]);
+	}, [startNewConversation]);
 
 	const handleHistorySelect = useCallback(() => {
 		setShowHistory(false);

frontend/src/container/AIAssistant/AIAssistantPanel/AIAssistantPanel.tsx

@@ -5,12 +5,8 @@ import { TooltipSimple } from '@signozhq/ui/tooltip';
 import ROUTES from 'constants/routes';
 import { History, Maximize2, Plus, Sparkles, X } from '@signozhq/icons';
 
-import logEvent from 'api/common/logEvent';
-
 import ConversationsList from '../components/ConversationsList';
 import ConversationView from '../ConversationView';
-import { AIAssistantEvents } from '../events';
-import { useAIAssistantAnalyticsContext } from '../hooks/useAIAssistantAnalyticsContext';
 import { useAIAssistantStore } from '../store/useAIAssistantStore';
 import { VariantContext } from '../VariantContext';
 
@@ -36,35 +32,21 @@ export default function AIAssistantPanel(): JSX.Element | null {
 	const startNewConversation = useAIAssistantStore(
 		(s) => s.startNewConversation,
 	);
-	const analyticsCtx = useAIAssistantAnalyticsContext();
 
 	const handleExpand = useCallback(() => {
 		if (!activeConversationId) {
 			return;
 		}
 		closeDrawer();
-		// Router state tells AIAssistantPage to skip its mount-time Opened fire:
-		// the assistant was already open in the drawer, so this is a surface
-		// switch, not a new open.
 		history.push(
 			ROUTES.AI_ASSISTANT.replace(':conversationId', activeConversationId),
-			{ fromInApp: true },
 		);
 	}, [activeConversationId, closeDrawer, history]);
 
 	const handleNew = useCallback(() => {
-		void logEvent(AIAssistantEvents.NewChatClicked, {
-			...analyticsCtx,
-			// useAIAssistantAnalyticsContext() runs above this component's
-			// VariantContext.Provider, so the hook reports the default 'page'
-			// mode. Override here: this handler only runs when the drawer
-			// itself is mounted, which is unambiguously the sidepane surface.
-			mode: 'sidepane',
-			source: 'header',
-		});
 		startNewConversation();
 		setShowHistory(false);
-	}, [startNewConversation, analyticsCtx]);
+	}, [startNewConversation]);
 
 	// When user picks a conversation from the list, close the sidebar
 	const handleHistorySelect = useCallback(() => {

frontend/src/container/AIAssistant/AIAssistantTrigger/AIAssistantTrigger.tsx

@@ -1,13 +1,9 @@
-import { useCallback } from 'react';
 import { matchPath, useLocation } from 'react-router-dom';
 import { Button } from '@signozhq/ui/button';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
-import logEvent from 'api/common/logEvent';
 import ROUTES from 'constants/routes';
 import { Bot } from '@signozhq/icons';
 
-import { AIAssistantEvents } from '../events';
-import { normalizePage } from '../hooks/useAIAssistantAnalyticsContext';
 import {
 	openAIAssistant,
 	useAIAssistantStore,
@@ -29,14 +25,6 @@ export default function AIAssistantTrigger(): JSX.Element | null {
 		exact: true,
 	});
 
-	const handleOpen = useCallback((): void => {
-		void logEvent(AIAssistantEvents.Opened, {
-			source: 'icon',
-			currentPage: normalizePage(pathname),
-		});
-		openAIAssistant();
-	}, [pathname]);
-
 	if (isDrawerOpen || isModalOpen || isFullScreenPage) {
 		return null;
 	}
@@ -47,7 +35,7 @@ export default function AIAssistantTrigger(): JSX.Element | null {
 				variant="solid"
 				color="primary"
 				className={styles.trigger}
-				onClick={handleOpen}
+				onClick={openAIAssistant}
 				aria-label="Open AI Assistant"
 			>
 				<Bot size={20} />

frontend/src/container/AIAssistant/ConversationView/ConversationView.tsx

@@ -1,15 +1,11 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import cx from 'classnames';
 
-import logEvent from 'api/common/logEvent';
-
 import ChatInput, { autoContextKey } from '../components/ChatInput';
 import ConversationSkeleton from '../components/ConversationSkeleton';
 import VirtualizedMessages from '../components/VirtualizedMessages';
-import { AIAssistantEvents } from '../events';
 import { getAutoContexts } from '../getAutoContexts';
-import { useAIAssistantAnalyticsContext } from '../hooks/useAIAssistantAnalyticsContext';
 import { useAIAssistantStore } from '../store/useAIAssistantStore';
 import { MessageAttachment } from '../types';
 import { MessageContext } from '../../../api/ai-assistant/chat';
@@ -43,7 +39,6 @@ export default function ConversationView({
 	);
 	const sendMessage = useAIAssistantStore((s) => s.sendMessage);
 	const cancelStream = useAIAssistantStore((s) => s.cancelStream);
-	const analyticsCtx = useAIAssistantAnalyticsContext(conversationId);
 
 	// Auto-derived contexts come from the route the user is currently looking
 	// at (dashboard detail, service metrics, an explorer, …). Skip when the
@@ -87,50 +82,14 @@ export default function ConversationView({
 			attachments?: MessageAttachment[],
 			contexts?: MessageContext[],
 		) => {
-			const hasAuto = contexts?.some((c) => c.source === 'auto') ?? false;
-			const hasManual = contexts?.some((c) => c.source === 'mention') ?? false;
-			let contextType: 'manual' | 'auto' | 'both' | undefined;
-			if (hasAuto && hasManual) {
-				contextType = 'both';
-			} else if (hasAuto) {
-				contextType = 'auto';
-			} else if (hasManual) {
-				contextType = 'manual';
-			}
-			void logEvent(AIAssistantEvents.MessageSent, {
-				...analyticsCtx,
-				queryLength: text.length,
-				hasContext: hasAuto || hasManual,
-				contextType,
-				respondingToClarification: Boolean(pendingClarificationHere),
-			});
 			void sendMessage(text, attachments, contexts);
 		},
-		[sendMessage, analyticsCtx, pendingClarificationHere],
+		[sendMessage],
 	);
 
-	// Wall-clock timestamp of the current streaming start, used to compute
-	// `secondsSinceStart` on Cancel clicked. Cleared whenever streaming ends.
-	const streamStartedAtRef = useRef<number | null>(null);
-	useEffect(() => {
-		if (!isStreamingHere) {
-			streamStartedAtRef.current = null;
-			return;
-		}
-		if (streamStartedAtRef.current === null) {
-			streamStartedAtRef.current = Date.now();
-		}
-	}, [isStreamingHere]);
-
 	const handleCancel = useCallback(() => {
-		const startedAt = streamStartedAtRef.current;
-		void logEvent(AIAssistantEvents.CancelClicked, {
-			threadId: analyticsCtx.threadId,
-			secondsSinceStart:
-				startedAt !== null ? Math.round((Date.now() - startedAt) / 1000) : null,
-		});
 		cancelStream(conversationId);
-	}, [cancelStream, conversationId, analyticsCtx.threadId]);
+	}, [cancelStream, conversationId]);
 
 	const messages = conversation?.messages ?? [];
 	const showDisclaimer = messages.length > 0;
@@ -175,7 +134,6 @@ export default function ConversationView({
 				conversationId={conversationId}
 				messages={messages}
 				isStreaming={isStreamingHere}
-				onSendSuggestedPrompt={(text): void => handleSend(text)}
 			/>
 			{showDisclaimer && (
 				<div className={disclaimerClass} role="note" aria-live="polite">

frontend/src/container/AIAssistant/components/ActionsSection/ActionsSection.tsx

@@ -41,68 +41,12 @@ import {
 	Undo,
 } from '@signozhq/icons';
 
-import logEvent from 'api/common/logEvent';
-
-import { AIAssistantEvents, SuggestedPromptCategory } from '../../events';
-import { useAIAssistantAnalyticsContext } from '../../hooks/useAIAssistantAnalyticsContext';
 import { useAIAssistantStore } from '../../store/useAIAssistantStore';
 
 import styles from './ActionsSection.module.scss';
 
 interface ActionsSectionProps {
 	actions: MessageActionDTO[];
-	/** ID of the assistant message these actions belong to — used in analytics. */
-	messageId: string;
-}
-
-/**
- * Resource-type strings the backend uses for `open_resource` and rollback
- * actions. Centralized here so the route/module lookups below stay in sync.
- */
-const ResourceType = {
-	dashboard: 'dashboard',
-	alert: 'alert',
-	service: 'service',
-	saved_view: 'saved_view',
-	logs_explorer: 'logs_explorer',
-	traces_explorer: 'traces_explorer',
-	metrics_explorer: 'metrics_explorer',
-} as const;
-
-/** Maps an open_resource action's resourceType to its product module name. */
-function targetModuleForResource(resourceType: string): string | null {
-	switch (resourceType) {
-		case ResourceType.dashboard:
-			return 'dashboards';
-		case ResourceType.alert:
-			return 'alerts';
-		case ResourceType.service:
-			return 'apm';
-		case ResourceType.saved_view:
-			return 'savedViews';
-		case ResourceType.logs_explorer:
-			return 'logs';
-		case ResourceType.traces_explorer:
-			return 'traces';
-		case ResourceType.metrics_explorer:
-			return 'metrics';
-		default:
-			return null;
-	}
-}
-
-/** Maps an apply_filter signal to its product module name. */
-function targetModuleForSignal(signal: ApplyFilterSignalDTO): string | null {
-	switch (signal) {
-		case ApplyFilterSignalDTO.logs:
-			return 'logs';
-		case ApplyFilterSignalDTO.traces:
-			return 'traces';
-		case ApplyFilterSignalDTO.metrics:
-			return 'metrics';
-		default:
-			return null;
-	}
 }
 
 type ChipState = 'idle' | 'loading' | 'success' | 'error';
@@ -150,23 +94,23 @@ function resourceRoute(
 	resourceId: string,
 ): string | null {
 	switch (resourceType) {
-		case ResourceType.dashboard:
+		case 'dashboard':
 			return ROUTES.DASHBOARD.replace(':dashboardId', resourceId);
-		case ResourceType.alert: {
+		case 'alert': {
 			const params = new URLSearchParams({ [QueryParams.ruleId]: resourceId });
 			return `${ROUTES.EDIT_ALERTS}?${params.toString()}`;
 		}
-		case ResourceType.service:
+		case 'service':
 			return ROUTES.SERVICE_METRICS.replace(':servicename', resourceId);
-		case ResourceType.saved_view:
+		case 'saved_view':
 			// No detail route — saved views land on the list page.
 			// Caller may provide signal-aware metadata in future; default to logs.
 			return ROUTES.LOGS_SAVE_VIEWS;
-		case ResourceType.logs_explorer:
+		case 'logs_explorer':
 			return ROUTES.LOGS_EXPLORER;
-		case ResourceType.traces_explorer:
+		case 'traces_explorer':
 			return ROUTES.TRACES_EXPLORER;
-		case ResourceType.metrics_explorer:
+		case 'metrics_explorer':
 			return ROUTES.METRICS_EXPLORER_EXPLORER;
 		default:
 			return null;
@@ -280,24 +224,6 @@ function actionKey(action: MessageActionDTO, index: number): string {
 		: `${action.kind}:${action.label}:${index}`;
 }
 
-/**
- * Resolves the prompt to send for a follow_up action. The chip's `label` is
- * the short display text (e.g. "Python setup"); the real prompt lives in
- * `input.intent` per the schema doc. Falls back to label defensively so a
- * malformed server payload doesn't drop the click silently. Both branches
- * are trimmed so whitespace-only payloads don't become whitespace messages.
- */
-function followUpIntent(action: MessageActionDTO): string {
-	const intent = action.input?.intent;
-	if (typeof intent === 'string') {
-		const trimmed = intent.trim();
-		if (trimmed.length > 0) {
-			return trimmed;
-		}
-	}
-	return action.label.trim();
-}
-
 /** Maps a signal to its target explorer route. */
 function explorerRouteForSignal(signal: ApplyFilterSignalDTO): string | null {
 	switch (signal) {
@@ -427,12 +353,10 @@ function rollbackCall(
  */
 export default function ActionsSection({
 	actions,
-	messageId,
 }: ActionsSectionProps): JSX.Element | null {
 	const history = useHistory();
 	const { pathname } = useLocation();
 	const sendMessage = useAIAssistantStore((s) => s.sendMessage);
-	const { threadId, page, mode } = useAIAssistantAnalyticsContext();
 	const { redirectWithQueryBuilderData, handleSetQueryData } = useQueryBuilder();
 
 	// Per-chip click state, keyed by chip key (see `key` below). Persists
@@ -506,39 +430,13 @@ export default function ActionsSection({
 		switch (action.kind) {
 			case MessageActionKindDTO.open_docs: {
 				if (action.url) {
-					void logEvent(AIAssistantEvents.DocOpened, {
-						threadId,
-						messageId,
-						docPath: action.url,
-					});
 					openInNewTab(action.url);
 				}
 				break;
 			}
 			case MessageActionKindDTO.follow_up: {
-				const intent = followUpIntent(action);
-				if (intent) {
-					// Fire SuggestedPromptClicked + MessageSent so analytics can compute
-					// both the click-through rate against follow-ups offered *and* keep
-					// the unified send funnel intact. `category` distinguishes server-
-					// emitted follow-ups from the empty-state grid. `promptId` stays the
-					// label so dashboards group identical chip texts together regardless
-					// of the dynamic intent payload.
-					void logEvent(AIAssistantEvents.SuggestedPromptClicked, {
-						threadId,
-						messageId,
-						promptId: action.label,
-						category: SuggestedPromptCategory.FollowUp,
-					});
-					void logEvent(AIAssistantEvents.MessageSent, {
-						threadId,
-						page,
-						mode,
-						queryLength: intent.length,
-						hasContext: false,
-						respondingToClarification: false,
-					});
-					void sendMessage(intent);
+				if (action.label) {
+					void sendMessage(action.label);
 				}
 				break;
 			}
@@ -546,12 +444,6 @@ export default function ActionsSection({
 				if (action.resourceType && action.resourceId) {
 					const path = resourceRoute(action.resourceType, action.resourceId);
 					if (path) {
-						void logEvent(AIAssistantEvents.ResourceOpened, {
-							threadId,
-							messageId,
-							targetModule: targetModuleForResource(action.resourceType),
-							resourceId: action.resourceId,
-						});
 						history.push(path);
 					}
 				}
@@ -564,13 +456,6 @@ export default function ActionsSection({
 				break;
 			}
 			case MessageActionKindDTO.apply_filter: {
-				if (action.signal) {
-					void logEvent(AIAssistantEvents.ApplyFilterClicked, {
-						threadId,
-						messageId,
-						targetModule: targetModuleForSignal(action.signal),
-					});
-				}
 				applyFilter(action, {
 					history,
 					pathname,

frontend/src/container/AIAssistant/components/ChatInput/ChatInput.tsx

@@ -5,17 +5,13 @@ import { Badge } from '@signozhq/ui/badge';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
 import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/ui/popover';
-import { toast } from '@signozhq/ui/sonner';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import type { UploadFile } from 'antd';
-import getSessionStorage from 'api/browser/sessionstorage/get';
-import setSessionStorage from 'api/browser/sessionstorage/set';
 import {
 	getListRulesQueryKey,
 	useListRules,
 } from 'api/generated/services/rules';
 import type { ListRules200 } from 'api/generated/services/sigNoz.schemas';
-import logEvent from 'api/common/logEvent';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useGetAllDashboard } from 'hooks/dashboard/useGetAllDashboard';
 import { useQueryService } from 'hooks/useQueryService';
@@ -26,8 +22,6 @@ import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
-import { AIAssistantEvents, getBrowserInfo } from '../../events';
-import { useAIAssistantAnalyticsContext } from '../../hooks/useAIAssistantAnalyticsContext';
 import { useSpeechRecognition } from '../../hooks/useSpeechRecognition';
 import { MessageAttachment } from '../../types';
 import { MessageContext } from '../../../../api/ai-assistant/chat';
@@ -143,8 +137,6 @@ function autoContextCategory(ctx: MessageContext): string {
 const MAX_INPUT_LENGTH = 20000;
 const WARNING_THRESHOLD = 15000;
 const HOME_SERVICES_INTERVAL = 30 * 60 * 1000;
-/** sessionStorage key for the "voice input failed this tab" flag. */
-const VOICE_UNAVAILABLE_KEY = 'ai-assistant-voice-unavailable';
 
 const CONTEXT_CATEGORIES = ['Dashboards', 'Alerts', 'Services'] as const;
 
@@ -376,28 +368,6 @@ export default function ChatInput({
 
 	// ── Voice input ────────────────────────────────────────────────────────────
 
-	const analyticsCtx = useAIAssistantAnalyticsContext();
-	// Captured at the start of a voice session, consumed when it ends.
-	// Tracks both the trigger (button vs. PTT shortcut) and the wall-clock
-	// start time so we can attribute `durationMs` on the Voice input used
-	// event regardless of which control ended the session.
-	const voiceStartedAtRef = useRef<number | null>(null);
-	const voiceSourceRef = useRef<'button' | 'shortcut' | null>(null);
-	// Set to true after a `network`, `not-allowed`, or `not-supported` failure
-	// so we hide the mic button for the rest of the tab session — silent
-	// retries don't help, and Chromium derivatives without the Google Speech
-	// API key always fail with `network` no matter how many times the user
-	// clicks. Persisted to sessionStorage so a page reload doesn't surface the
-	// button again (closing the tab still resets, in case the user fixed
-	// permissions or switched browsers).
-	const [voiceUnavailable, setVoiceUnavailable] = useState(
-		() => getSessionStorage(VOICE_UNAVAILABLE_KEY) === 'true',
-	);
-	const markVoiceUnavailable = useCallback((): void => {
-		setVoiceUnavailable(true);
-		setSessionStorage(VOICE_UNAVAILABLE_KEY, 'true');
-	}, []);
-
 	const {
 		isListening,
 		isSupported,
@@ -418,81 +388,9 @@ export default function ChatInput({
 				setText(capText(committedTextRef.current + separator + transcriptText));
 			}
 		},
-		onError: (error) => {
-			// Guard against double-fire: Chrome can fire `onerror` more than
-			// once per session when `continuous = true` (it retries internally
-			// before giving up). Only fire the analytics event for the first
-			// error in a given session — voiceSourceRef being null means we've
-			// already handled it.
-			const source = voiceSourceRef.current;
-			if (source === null) {
-				return;
-			}
-			voiceStartedAtRef.current = null;
-			voiceSourceRef.current = null;
-			void logEvent(AIAssistantEvents.VoiceInputFailed, {
-				...analyticsCtx,
-				...getBrowserInfo(),
-				source,
-				errorType: error,
-			});
-			if (error === 'network') {
-				markVoiceUnavailable();
-				toast.error('Voice input unavailable in this browser', {
-					description:
-						'This browser cannot reach the speech recognition service. Try Google Chrome or Microsoft Edge.',
-				});
-			} else if (error === 'not-allowed') {
-				markVoiceUnavailable();
-				toast.error('Microphone access denied', {
-					description:
-						'Grant microphone permission in your browser settings to use voice input.',
-				});
-			} else if (error === 'not-supported') {
-				markVoiceUnavailable();
-				toast.error('Voice input is not supported in this browser.');
-			}
-			// `no-speech` is benign (just silence) — don't toast or hide.
-		},
 	});
 
-	const showMic = isSupported && micPermission !== 'denied' && !voiceUnavailable;
-
-	const startVoiceInput = useCallback(
-		(source: 'button' | 'shortcut') => {
-			// Defense in depth: the button is hidden when `voiceUnavailable` is
-			// true, but the PTT shortcut listener can still call us. Bailing here
-			// keeps a single source of truth and prevents repeat `Voice input
-			// failed` events in the same session.
-			if (voiceUnavailable) {
-				return;
-			}
-			voiceStartedAtRef.current = Date.now();
-			voiceSourceRef.current = source;
-			start();
-		},
-		[start, voiceUnavailable],
-	);
-
-	const fireVoiceInputEvent = useCallback(
-		(outcome: 'sent' | 'discarded') => {
-			const startedAt = voiceStartedAtRef.current;
-			const source = voiceSourceRef.current;
-			voiceStartedAtRef.current = null;
-			voiceSourceRef.current = null;
-			if (startedAt === null || source === null) {
-				return;
-			}
-			void logEvent(AIAssistantEvents.VoiceInputUsed, {
-				...analyticsCtx,
-				...getBrowserInfo(),
-				source,
-				outcome,
-				durationMs: Date.now() - startedAt,
-			});
-		},
-		[analyticsCtx],
-	);
+	const showMic = isSupported && micPermission !== 'denied';
 
 	// Stop recording and immediately send whatever is in the textarea.
 	const handleStopAndSend = useCallback(async () => {
@@ -500,17 +398,15 @@ export default function ChatInput({
 		committedTextRef.current = capText(text);
 		// Stop recognition without triggering onTranscript again (would double-append).
 		discard();
-		fireVoiceInputEvent('sent');
 		await handleSend();
-	}, [text, discard, handleSend, capText, fireVoiceInputEvent]);
+	}, [text, discard, handleSend, capText]);
 
 	// Stop recording and revert the textarea to what it was before voice started.
 	const handleDiscard = useCallback(() => {
 		discard();
-		fireVoiceInputEvent('discarded');
 		setText(committedTextRef.current);
 		textareaRef.current?.focus();
-	}, [discard, fireVoiceInputEvent]);
+	}, [discard]);
 
 	// ── Push-to-talk (Cmd/Ctrl + Shift + Space) ────────────────────────────────
 	// Hold the combo to record; release Space to submit. We track which key
@@ -519,7 +415,7 @@ export default function ChatInput({
 	// "session active" ref so a held key only calls `start()` once.
 	const pttActiveRef = useRef(false);
 	useEffect(() => {
-		if (!isSupported || micPermission === 'denied' || voiceUnavailable) {
+		if (!isSupported || micPermission === 'denied') {
 			return undefined;
 		}
 
@@ -536,7 +432,7 @@ export default function ChatInput({
 				return; // ignore auto-repeat
 			}
 			pttActiveRef.current = true;
-			startVoiceInput('shortcut');
+			start();
 		};
 
 		const handleKeyUp = (e: KeyboardEvent): void => {
@@ -570,10 +466,9 @@ export default function ChatInput({
 	}, [
 		isSupported,
 		micPermission,
-		voiceUnavailable,
 		disabled,
 		isStreaming,
-		startVoiceInput,
+		start,
 		handleStopAndSend,
 	]);
 
@@ -1008,7 +903,7 @@ export default function ChatInput({
 								<Button
 									variant="ghost"
 									size="icon"
-									onClick={(): void => startVoiceInput('button')}
+									onClick={start}
 									disabled={disabled}
 									aria-label="Start voice input"
 									className={styles.micBtn}

frontend/src/container/AIAssistant/components/ClarificationForm/ClarificationForm.tsx

@@ -9,7 +9,6 @@ import {
 	SelectItem,
 	SelectTrigger,
 } from '@signozhq/ui/select';
-import logEvent from 'api/common/logEvent';
 import { ClarificationFieldTypeDTO } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
 import type {
 	ClarificationEventDTO,
@@ -17,8 +16,6 @@ import type {
 } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
 import { CircleHelp, Send, X } from '@signozhq/icons';
 
-import { AIAssistantEvents } from '../../events';
-import { useAIAssistantAnalyticsContext } from '../../hooks/useAIAssistantAnalyticsContext';
 import { useAIAssistantStore } from '../../store/useAIAssistantStore';
 
 import styles from './ClarificationForm.module.scss';
@@ -47,8 +44,6 @@ export default function ClarificationForm({
 	const isStreaming = useAIAssistantStore(
 		(s) => s.streams[conversationId]?.isStreaming ?? false,
 	);
-	const { threadId, page, mode } =
-		useAIAssistantAnalyticsContext(conversationId);
 
 	const fields = clarification.fields ?? [];
 	const initialAnswers = Object.fromEntries(
@@ -65,18 +60,6 @@ export default function ClarificationForm({
 
 	const handleSubmit = async (): Promise<void> => {
 		setSubmitted(true);
-		// Approximate queryLength as the JSON encoding of the form answers — the
-		// clarification API doesn't render a single user-visible string, but the
-		// JSON size is a reasonable stand-in for "how much did the user provide".
-		const queryLength = JSON.stringify(answers).length;
-		void logEvent(AIAssistantEvents.MessageSent, {
-			threadId,
-			page,
-			mode,
-			queryLength,
-			hasContext: false,
-			respondingToClarification: true,
-		});
 		await submitClarification(
 			conversationId,
 			clarification.clarificationId,
@@ -86,10 +69,6 @@ export default function ClarificationForm({
 
 	const handleCancel = (): void => {
 		setCancelled(true);
-		void logEvent(AIAssistantEvents.CancelClicked, {
-			threadId,
-			secondsSinceStart: null,
-		});
 		cancelStream(conversationId);
 	};
 

frontend/src/container/AIAssistant/components/ConversationsList/ConversationsList.tsx

@@ -5,9 +5,6 @@ import { Input } from '@signozhq/ui/input';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Plus, Search } from '@signozhq/icons';
 
-import logEvent from 'api/common/logEvent';
-
-import { AIAssistantEvents } from '../../events';
 import { useAIAssistantStore } from '../../store/useAIAssistantStore';
 import { Conversation } from '../../types';
 import { useVariant } from '../../VariantContext';
@@ -139,17 +136,6 @@ export default function ConversationsList({
 
 	const handleSelect = (id: string): void => {
 		const conv = conversations[id];
-		// Skip re-selecting the currently active thread — Notion-style click on
-		// the highlighted row in the history list shouldn't inflate the funnel.
-		const isReselectingActive = id === activeConversationId;
-		if (conv?.threadId && !isReselectingActive) {
-			void logEvent(AIAssistantEvents.ThreadOpenedFromHistory, {
-				threadId: conv.threadId,
-				threadAgeDays: Math.floor(
-					(Date.now() - conv.createdAt) / (24 * 60 * 60 * 1000),
-				),
-			});
-		}
 		if (conv?.threadId) {
 			// Always load from backend — refreshes messages and reconnects
 			// to active execution if the thread is still busy.

frontend/src/container/AIAssistant/components/MessageBubble/MessageBubble.tsx

@@ -144,7 +144,7 @@ export default function MessageBubble({
 						)}
 
 						{!isUser && message.actions && message.actions.length > 0 && (
-							<ActionsSection actions={message.actions} messageId={message.id} />
+							<ActionsSection actions={message.actions} />
 						)}
 					</div>
 				</div>

frontend/src/container/AIAssistant/components/MessageFeedback/MessageFeedback.tsx

@@ -8,10 +8,6 @@ import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { Check, Copy, RefreshCw, ThumbsDown, ThumbsUp } from '@signozhq/icons';
 import { useTimezone } from 'providers/Timezone';
 
-import logEvent from 'api/common/logEvent';
-
-import { AIAssistantEvents } from '../../events';
-import { useAIAssistantAnalyticsContext } from '../../hooks/useAIAssistantAnalyticsContext';
 import { useAIAssistantStore } from '../../store/useAIAssistantStore';
 import { FeedbackRating, Message } from '../../types';
 
@@ -58,7 +54,6 @@ export default function MessageFeedback({
 	const submitMessageFeedback = useAIAssistantStore(
 		(s) => s.submitMessageFeedback,
 	);
-	const { threadId } = useAIAssistantAnalyticsContext();
 
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();
 
@@ -96,21 +91,10 @@ export default function MessageFeedback({
 	}, [message.createdAt]);
 
 	const handleCopy = useCallback((): void => {
-		void logEvent(AIAssistantEvents.MessageCopied, {
-			role: message.role,
-			messageId: message.id,
-			hadToolCalls: Boolean(message.blocks?.some((b) => b.type === 'tool_call')),
-		});
 		copyToClipboard(message.content);
 		setCopied(true);
 		setTimeout(() => setCopied(false), 1500);
-	}, [
-		copyToClipboard,
-		message.content,
-		message.id,
-		message.role,
-		message.blocks,
-	]);
+	}, [copyToClipboard, message.content]);
 
 	const handleVote = useCallback(
 		(rating: FeedbackRating): void => {
@@ -123,31 +107,20 @@ export default function MessageFeedback({
 				return;
 			}
 			setVote(rating);
-			void logEvent(AIAssistantEvents.FeedbackSubmitted, {
-				messageId: message.id,
-				threadId,
-				rating: 'up',
-				hasComment: false,
-				commentLength: 0,
-			});
 			submitMessageFeedback(message.id, rating);
 		},
-		[vote, message.id, submitMessageFeedback, threadId],
+		[vote, message.id, submitMessageFeedback],
 	);
 
 	const handleSubmitNegative = useCallback((): void => {
 		setVote('negative');
 		setIsNegativeDialogOpen(false);
-		const trimmed = negativeComment.trim();
-		void logEvent(AIAssistantEvents.FeedbackSubmitted, {
-			messageId: message.id,
-			threadId,
-			rating: 'down',
-			hasComment: trimmed.length > 0,
-			commentLength: trimmed.length,
-		});
-		submitMessageFeedback(message.id, 'negative', trimmed || undefined);
-	}, [message.id, negativeComment, submitMessageFeedback, threadId]);
+		submitMessageFeedback(
+			message.id,
+			'negative',
+			negativeComment.trim() || undefined,
+		);
+	}, [message.id, negativeComment, submitMessageFeedback]);
 
 	return (
 		<>

frontend/src/container/AIAssistant/components/UserMessageActions/UserMessageActions.tsx

@@ -4,9 +4,6 @@ import { Button } from '@signozhq/ui/button';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Check, Copy } from '@signozhq/icons';
 
-import logEvent from 'api/common/logEvent';
-
-import { AIAssistantEvents } from '../../events';
 import { Message } from '../../types';
 
 import styles from './UserMessageActions.module.scss';
@@ -28,15 +25,10 @@ export default function UserMessageActions({
 	const [, copyToClipboard] = useCopyToClipboard();
 
 	const handleCopy = useCallback((): void => {
-		void logEvent(AIAssistantEvents.MessageCopied, {
-			role: message.role,
-			messageId: message.id,
-			hadToolCalls: false,
-		});
 		copyToClipboard(message.content);
 		setCopied(true);
 		setTimeout(() => setCopied(false), 1500);
-	}, [copyToClipboard, message.content, message.id, message.role]);
+	}, [copyToClipboard, message.content]);
 
 	return (
 		<div className={styles.actions}>

frontend/src/container/AIAssistant/components/VirtualizedMessages/VirtualizedMessages.tsx

@@ -10,10 +10,6 @@ import {
 	Sparkles,
 } from '@signozhq/icons';
 
-import logEvent from 'api/common/logEvent';
-
-import { AIAssistantEvents, SuggestedPromptCategory } from '../../events';
-import { useAIAssistantAnalyticsContext } from '../../hooks/useAIAssistantAnalyticsContext';
 import { useAIAssistantStore } from '../../store/useAIAssistantStore';
 import { Message, StreamingEventItem } from '../../types';
 import MessageBubble from '../MessageBubble';
@@ -50,24 +46,17 @@ interface VirtualizedMessagesProps {
 	conversationId: string;
 	messages: Message[];
 	isStreaming: boolean;
-	/**
-	 * Called when a user clicks an empty-state suggested prompt. Routed
-	 * through the parent so analytics (Message sent) fire with the same
-	 * page/mode/context attribution as a normal send.
-	 */
-	onSendSuggestedPrompt: (text: string) => void;
 }
 
 export default function VirtualizedMessages({
 	conversationId,
 	messages,
 	isStreaming,
-	onSendSuggestedPrompt,
 }: VirtualizedMessagesProps): JSX.Element {
+	const sendMessage = useAIAssistantStore((s) => s.sendMessage);
 	const regenerateAssistantMessage = useAIAssistantStore(
 		(s) => s.regenerateAssistantMessage,
 	);
-	const { threadId } = useAIAssistantAnalyticsContext(conversationId);
 	const streamingStatus = useAIAssistantStore(
 		(s) => s.streams[conversationId]?.streamingStatus ?? '',
 	);
@@ -96,13 +85,9 @@ export default function VirtualizedMessages({
 			if (isStreaming) {
 				return;
 			}
-			void logEvent(AIAssistantEvents.RegenerateClicked, {
-				messageId,
-				threadId,
-			});
 			void regenerateAssistantMessage(conversationId, messageId);
 		},
-		[conversationId, isStreaming, regenerateAssistantMessage, threadId],
+		[conversationId, isStreaming, regenerateAssistantMessage],
 	);
 
 	// Scroll all the way to the actual bottom — including the 64px of bottom
@@ -161,11 +146,7 @@ export default function VirtualizedMessages({
 							color="secondary"
 							className={styles.emptyChip}
 							onClick={(): void => {
-								void logEvent(AIAssistantEvents.SuggestedPromptClicked, {
-									promptId: s.text,
-									category: SuggestedPromptCategory.EmptyState,
-								});
-								onSendSuggestedPrompt(s.text);
+								sendMessage(s.text);
 							}}
 							prefix={<s.icon size={14} />}
 						>

frontend/src/container/AIAssistant/components/blocks/ConfirmBlock/ConfirmBlock.tsx

@@ -1,10 +1,7 @@
 import cx from 'classnames';
 import { Button } from '@signozhq/ui/button';
-import logEvent from 'api/common/logEvent';
 import { Check, X } from '@signozhq/icons';
 
-import { AIAssistantEvents } from '../../../events';
-import { useAIAssistantAnalyticsContext } from '../../../hooks/useAIAssistantAnalyticsContext';
 import { useAIAssistantStore } from '../../../store/useAIAssistantStore';
 import { useMessageContext } from '../../MessageContext';
 
@@ -40,7 +37,6 @@ export default function ConfirmBlock({
 	const answeredBlocks = useAIAssistantStore((s) => s.answeredBlocks);
 	const markBlockAnswered = useAIAssistantStore((s) => s.markBlockAnswered);
 	const sendMessage = useAIAssistantStore((s) => s.sendMessage);
-	const { threadId, page, mode } = useAIAssistantAnalyticsContext();
 
 	// Durable answered state — survives re-renders/remounts
 	const answeredChoice = messageId ? answeredBlocks[messageId] : undefined;
@@ -51,14 +47,6 @@ export default function ConfirmBlock({
 		if (messageId) {
 			markBlockAnswered(messageId, choice);
 		}
-		void logEvent(AIAssistantEvents.MessageSent, {
-			threadId,
-			page,
-			mode,
-			queryLength: responseText.length,
-			hasContext: false,
-			respondingToClarification: false,
-		});
 		sendMessage(responseText);
 	};
 

frontend/src/container/AIAssistant/components/blocks/InteractiveQuestion/InteractiveQuestion.tsx

@@ -1,11 +1,8 @@
 import { useState } from 'react';
 import cx from 'classnames';
 import { Button } from '@signozhq/ui/button';
-import logEvent from 'api/common/logEvent';
 import { Checkbox, Radio } from 'antd';
 
-import { AIAssistantEvents } from '../../../events';
-import { useAIAssistantAnalyticsContext } from '../../../hooks/useAIAssistantAnalyticsContext';
 import { useAIAssistantStore } from '../../../store/useAIAssistantStore';
 import { useMessageContext } from '../../MessageContext';
 
@@ -39,7 +36,6 @@ export default function InteractiveQuestion({
 	const answeredBlocks = useAIAssistantStore((s) => s.answeredBlocks);
 	const markBlockAnswered = useAIAssistantStore((s) => s.markBlockAnswered);
 	const sendMessage = useAIAssistantStore((s) => s.sendMessage);
-	const { threadId, page, mode } = useAIAssistantAnalyticsContext();
 
 	// Persist selected state locally only for the pending (not-yet-submitted) case
 	const [selected, setSelected] = useState<string[]>([]);
@@ -56,14 +52,6 @@ export default function InteractiveQuestion({
 		if (messageId) {
 			markBlockAnswered(messageId, answer);
 		}
-		void logEvent(AIAssistantEvents.MessageSent, {
-			threadId,
-			page,
-			mode,
-			queryLength: answer.length,
-			hasContext: false,
-			respondingToClarification: false,
-		});
 		sendMessage(answer);
 	};
 

frontend/src/container/AIAssistant/events.ts

@@ -1,81 +0,0 @@
-/**
- * Analytics event names for the AI Assistant feature. Backend-emitted events
- * (Execution finished, Approval resolved, Resource mutated, Clarification
- * requested, Limit hit) are not declared here — they fire from the AI service.
- */
-
-export interface BrowserInfo {
-	browserName: string;
-	browserVersion: string;
-}
-
-type NavigatorWithBrandHints = Navigator & {
-	userAgentData?: { brands: { brand: string; version: string }[] };
-	brave?: { isBrave: () => Promise<boolean> };
-};
-
-/**
- * We mainly need to distinguish Chrome / Edge (Speech API works) from Chromium
- * derivatives (no Google API key → voice fails with `network`). UA sniffing is
- * the source of truth for derivative identification; `userAgentData` is used
- * only as a fast happy path for Chrome / Edge. Brave needs its own probe — it
- * advertises Chrome in both UA and brand hints.
- */
-export function getBrowserInfo(): BrowserInfo {
-	if (typeof navigator === 'undefined') {
-		return { browserName: 'unknown', browserVersion: 'unknown' };
-	}
-	const nav = navigator as NavigatorWithBrandHints;
-	const ua = nav.userAgent;
-
-	// Order matters: derivatives put "Chrome" in their UA; Chrome puts "Safari".
-	const matchers: { name: string; re: RegExp }[] = [
-		{ name: 'Edge', re: /Edg(?:e|A|iOS)?\/([\d.]+)/ },
-		{ name: 'Opera', re: /OPR\/([\d.]+)/ },
-		{ name: 'Vivaldi', re: /Vivaldi\/([\d.]+)/ },
-		{ name: 'Chrome', re: /Chrome\/([\d.]+)/ },
-		{ name: 'Firefox', re: /Firefox\/([\d.]+)/ },
-		{ name: 'Safari', re: /Version\/([\d.]+).*Safari/ },
-	];
-	let browserName = 'unknown';
-	let browserVersion = 'unknown';
-	for (const { name, re } of matchers) {
-		const m = ua.match(re);
-		if (m) {
-			browserName = name;
-			browserVersion = m[1];
-			break;
-		}
-	}
-
-	// Brave hides as Chrome in UA + brand hints; its probe is the only tell.
-	if (nav.brave?.isBrave) {
-		browserName = 'Brave';
-	}
-
-	return { browserName, browserVersion };
-}
-
-export const SuggestedPromptCategory = {
-	FollowUp: 'follow_up',
-	EmptyState: 'empty_state',
-} as const;
-export type SuggestedPromptCategory =
-	(typeof SuggestedPromptCategory)[keyof typeof SuggestedPromptCategory];
-
-export enum AIAssistantEvents {
-	Opened = 'AI Assistant: Opened',
-	MessageSent = 'AI Assistant: Message sent',
-	SuggestedPromptClicked = 'AI Assistant: Suggested prompt clicked',
-	CancelClicked = 'AI Assistant: Cancel clicked',
-	RegenerateClicked = 'AI Assistant: Regenerate clicked',
-	MessageCopied = 'AI Assistant: Message copied',
-	FeedbackSubmitted = 'AI Assistant: Feedback submitted',
-	ResourceOpened = 'AI Assistant: Resource opened',
-	DocOpened = 'AI Assistant: Doc opened',
-	ApplyFilterClicked = 'AI Assistant: Apply filter clicked',
-	ThreadOpenedFromHistory = 'AI Assistant: Thread opened from history',
-	VoiceInputUsed = 'AI Assistant: Voice input used',
-	VoiceInputFailed = 'AI Assistant: Voice input failed',
-	NewChatClicked = 'AI Assistant: New chat clicked',
-}

frontend/src/container/AIAssistant/hooks/useAIAssistantAnalyticsContext.ts

@@ -1,60 +0,0 @@
-import { matchPath, useLocation } from 'react-router-dom';
-
-import ROUTES from 'constants/routes';
-
-import { useAIAssistantStore } from '../store/useAIAssistantStore';
-import { useVariant } from '../VariantContext';
-
-export interface AIAssistantAnalyticsContext {
-	/** Backend thread ID for the resolved conversation; undefined before the first send. */
-	threadId: string | undefined;
-	/**
-	 * Normalised route template for the current page (e.g. `/dashboard/:dashboardId`).
-	 * Falls back to the raw pathname for routes not in ROUTES. We normalise to keep
-	 * analytics cardinality bounded and avoid leaking customer identifiers
-	 * (dashboard IDs, service names, trace IDs, conversation IDs) into the event.
-	 */
-	page: string;
-	/** Surface the assistant is rendered on. `panel` / `modal` collapse to `sidepane`. */
-	mode: 'sidepane' | 'full_screen';
-}
-
-// Pre-sorted longest-first so more specific templates match before their
-// less specific siblings (e.g. `/services/:s/top-level-operations` wins
-// over `/services/:s`). Module-level — ROUTES is static.
-const ROUTE_TEMPLATES = Object.values(ROUTES).sort(
-	(a, b) => b.length - a.length,
-);
-
-export function normalizePage(pathname: string): string {
-	for (const template of ROUTE_TEMPLATES) {
-		if (matchPath(pathname, { path: template, exact: true })) {
-			return template;
-		}
-	}
-	return pathname;
-}
-
-/**
- * Shared base attributes for AI Assistant analytics events (Message sent,
- * Cancel clicked, Feedback submitted, Resource/Doc/Apply filter, …).
- *
- * Pass `conversationId` when the caller is scoped to a specific
- * conversation (e.g. `ClarificationForm`, `VirtualizedMessages`); omit
- * to fall back to the store's active conversation.
- */
-export function useAIAssistantAnalyticsContext(
-	conversationId?: string,
-): AIAssistantAnalyticsContext {
-	const { pathname } = useLocation();
-	const variant = useVariant();
-	const threadId = useAIAssistantStore((s) => {
-		const id = conversationId ?? s.activeConversationId;
-		return id ? s.conversations[id]?.threadId : undefined;
-	});
-	return {
-		threadId,
-		page: normalizePage(pathname),
-		mode: variant === 'page' ? 'full_screen' : 'sidepane',
-	};
-}

frontend/src/container/DashboardContainer/DashboardDescription/Description.styles.scss

@@ -186,40 +186,77 @@
 		display: flex;
 		flex-direction: column;
 
-		section {
+		.section-1 {
 			display: flex;
 			flex-direction: column;
 			align-items: start;
+			border-bottom: 1px solid var(--l1-border);
 
 			.ant-btn {
 				display: flex;
 				width: 100%;
-				height: unset;
-				padding: 8px;
+				height: 20px;
+				padding: 16px 18px 18px 14px;
 				align-items: center;
-				gap: 12px;
+				gap: 6px;
 				color: var(--l2-foreground);
 				font-family: Inter;
-				font-size: 13px;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: normal;
+				letter-spacing: 0.14px;
+				.ant-btn-icon {
+					margin-inline-end: 0px;
+				}
+			}
+		}
+		.section-2 {
+			display: flex;
+			flex-direction: column;
+			align-items: start;
+			border-bottom: 1px solid var(--l1-border);
+
+			.ant-btn {
+				display: flex;
+				width: 100%;
+				height: 20px;
+				padding: 16px 18px 18px 14px;
+				align-items: center;
+				gap: 6px;
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 14px;
 				font-style: normal;
 				font-weight: 400;
 				line-height: normal;
 				letter-spacing: 0.14px;
-				border-top: none;
 
 				.ant-btn-icon {
 					margin-inline-end: 0px;
 				}
 			}
 		}
+		.delete-dashboard {
+			display: flex;
+			flex-direction: column;
+			align-items: start;
 
-		.section-1,
-		.section-2 {
-			border-bottom: 1px solid var(--l1-border);
-		}
-
-		.delete-dashboard .ant-btn {
-			color: var(--bg-cherry-400) !important;
+			.ant-typography {
+				display: flex;
+				width: 100%;
+				height: 20px;
+				padding: 16px 18px 18px 14px;
+				align-items: center;
+				gap: 6px;
+				color: var(--bg-cherry-400) !important;
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: normal;
+				letter-spacing: 0.14px;
+			}
 		}
 	}
 }

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.styles.scss

@@ -211,12 +211,7 @@
 			display: grid;
 			grid-template-columns: max-content 1fr;
 
-			.typography-variables {
-				display: block;
-			}
-
 			.default-value-description {
-				display: block;
 				color: var(--l2-foreground);
 				font-family: Inter;
 				font-size: 11px;

frontend/src/container/DashboardContainer/DashboardSettings/General/AddBadges/AddBadges.module.scss

@@ -1,49 +0,0 @@
-.badgesContainer {
-	display: flex;
-	align-items: center;
-	flex-flow: wrap;
-	gap: 6px;
-}
-
-.badgeContainer {
-	color: var(--bg-sienna-400);
-	font-family: 'Space Mono';
-	font-size: 13px;
-	font-style: normal;
-	font-weight: 500;
-	line-height: 20px;
-	letter-spacing: 0.52px;
-	height: 24px;
-	flex-shrink: 0;
-	border-radius: 50px;
-	border: 1px solid color-mix(in srgb, var(--bg-sienna-500) 20%, transparent);
-	background: color-mix(in srgb, var(--bg-sienna-500) 10%, transparent);
-	padding: 2px 8px;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-}
-
-.inputContainer {
-	> div {
-		margin: 0;
-	}
-	padding-left: 0px !important;
-	padding-right: 0px !important;
-}
-
-.tagsInput {
-	display: flex;
-	border: none;
-	padding: 0px;
-	width: 183px;
-	height: 24px;
-	padding: 3px 1px;
-	flex-shrink: 0;
-}
-
-.editInput {
-	.ant-form-item {
-		margin-bottom: 0px;
-	}
-}

frontend/src/container/DashboardContainer/DashboardSettings/General/AddBadges/index.tsx

@@ -1,115 +0,0 @@
-import { Dispatch, SetStateAction, useState } from 'react';
-import { Col, Tooltip } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
-import Input from 'components/Input';
-
-import styles from './AddBadges.module.scss';
-
-function AddTags({ tags, setTags }: AddTagsProps): JSX.Element {
-	const [inputValue, setInputValue] = useState<string>('');
-	const [editInputIndex, setEditInputIndex] = useState(-1);
-	const [editInputValue, setEditInputValue] = useState('');
-
-	const handleInputConfirm = (): void => {
-		if (inputValue) {
-			setTags([...tags, inputValue]);
-		}
-		setInputValue('');
-	};
-
-	const handleEditInputConfirm = (): void => {
-		const newTags = [...tags];
-		newTags[editInputIndex] = editInputValue;
-		setTags(newTags);
-		setEditInputIndex(-1);
-		setInputValue('');
-	};
-
-	const handleClose = (removedTag: string): void => {
-		const newTags = tags.filter((tag) => tag !== removedTag);
-		setTags(newTags);
-	};
-
-	const onChangeHandler = (
-		value: string,
-		func: Dispatch<SetStateAction<string>>,
-	): void => {
-		func(value);
-	};
-
-	return (
-		<div className={styles.badgesContainer}>
-			{tags.map((tag, index) => {
-				if (editInputIndex === index) {
-					return (
-						<Col key={tag} lg={4} className={styles.editInput}>
-							<Input
-								size="small"
-								value={editInputValue}
-								onChangeHandler={(event): void =>
-									onChangeHandler(event.target.value, setEditInputValue)
-								}
-								onBlurHandler={handleEditInputConfirm}
-								onPressEnterHandler={handleEditInputConfirm}
-							/>
-						</Col>
-					);
-				}
-
-				const isLongTag = tag.length > 20;
-
-				const tagElem = (
-					<Badge
-						key={tag}
-						color="vanilla"
-						className={styles.badgeContainer}
-						closable
-						onClose={(e): void => {
-							e.preventDefault();
-							handleClose(tag);
-						}}
-					>
-						<span
-							onDoubleClick={(e): void => {
-								setEditInputIndex(index);
-								setEditInputValue(tag);
-								e.preventDefault();
-							}}
-						>
-							{isLongTag ? `${tag.slice(0, 20)}...` : tag}
-						</span>
-					</Badge>
-				);
-
-				return isLongTag ? (
-					<Tooltip title={tag} key={tag}>
-						{tagElem}
-					</Tooltip>
-				) : (
-					tagElem
-				);
-			})}
-
-			<Col className={styles.inputContainer}>
-				<Input
-					type="text"
-					value={inputValue}
-					rootClassName={styles.tagsInput}
-					placeholder="Start typing your tag name"
-					onChangeHandler={(event): void =>
-						onChangeHandler(event.target.value, setInputValue)
-					}
-					onBlurHandler={handleInputConfirm}
-					onPressEnterHandler={handleInputConfirm}
-				/>
-			</Col>
-		</div>
-	);
-}
-
-interface AddTagsProps {
-	tags: string[];
-	setTags: Dispatch<SetStateAction<string[]>>;
-}
-
-export default AddTags;

frontend/src/container/DashboardContainer/DashboardSettings/General/index.tsx

@@ -11,7 +11,7 @@ import {
 	SyncTooltipFilterMode,
 } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 import { isEqual } from 'lodash-es';
-import { Check, ExternalLink, SolidInfoCircle, X } from '@signozhq/icons';
+import { Check, ExternalLink, Info, X } from '@signozhq/icons';
 import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
 
 import styles from './GeneralSettings.module.scss';
@@ -201,7 +201,7 @@ function GeneralDashboardSettings(): JSX.Element {
 						placement="top"
 						mouseEnterDelay={0.5}
 					>
-						<SolidInfoCircle size="md" className={styles.crossPanelSyncInfoIcon} />
+						<Info size={14} className={styles.crossPanelSyncInfoIcon} />
 					</Tooltip>
 				</div>
 				<div className={styles.crossPanelSyncRow}>

frontend/src/container/DashboardContainerV2/DashboardContainerV2.module.scss

@@ -1,11 +0,0 @@
-.container {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-}
-
-.body {
-	flex: 1;
-	padding: 12px 24px;
-	overflow: auto;
-}

frontend/src/container/DashboardContainerV2/DashboardDescriptionV2/SettingsDrawer/SettingsDrawer.styles.scss

@@ -1,43 +0,0 @@
-.settings-container-root {
-	.ant-drawer-wrapper-body {
-		border-left: 1px solid var(--l1-border);
-		background: var(--l2-background);
-		box-shadow: -4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-
-		.ant-drawer-header {
-			height: 48px;
-			border-bottom: 1px solid var(--l1-border);
-			padding: 14px 14px 14px 11px;
-
-			.ant-drawer-header-title {
-				gap: 16px;
-
-				.ant-drawer-title {
-					color: var(--l2-foreground);
-					font-family: Inter;
-					font-size: 14px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 20px; /* 142.857% */
-					letter-spacing: -0.07px;
-					padding-left: 16px;
-					border-left: 1px solid var(--l1-border);
-				}
-
-				.ant-drawer-close {
-					height: 16px;
-					width: 16px;
-					margin-inline-end: 0px !important;
-				}
-			}
-		}
-
-		.ant-drawer-body {
-			padding: 16px;
-
-			&::-webkit-scrollbar {
-				width: 0.1rem;
-			}
-		}
-	}
-}

frontend/src/container/DashboardContainerV2/DashboardDescriptionV2/SettingsDrawer/index.tsx

@@ -1,34 +0,0 @@
-import { memo, PropsWithChildren, ReactElement } from 'react';
-import { Drawer } from 'antd';
-import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-
-import './SettingsDrawer.styles.scss';
-
-type SettingsDrawerProps = PropsWithChildren<{
-	drawerTitle: string;
-	isOpen: boolean;
-	onClose: () => void;
-}>;
-
-function SettingsDrawer({
-	children,
-	drawerTitle,
-	isOpen,
-	onClose,
-}: SettingsDrawerProps): JSX.Element {
-	return (
-		<Drawer
-			title={drawerTitle}
-			placement="right"
-			width="50%"
-			onClose={onClose}
-			open={isOpen}
-			rootClassName="settings-container-root"
-		>
-			{/* Need to type cast because of OverlayScrollbar type definition. We should be good once we remove it. */}
-			<OverlayScrollbar>{children as ReactElement}</OverlayScrollbar>
-		</Drawer>
-	);
-}
-
-export default memo(SettingsDrawer);

frontend/src/container/DashboardContainerV2/DashboardDescriptionV2/index.tsx

@@ -1,395 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import { FullScreenHandle } from 'react-full-screen';
-import { useTranslation } from 'react-i18next';
-import { useCopyToClipboard } from 'react-use';
-import {
-	Check,
-	ClipboardCopy,
-	Ellipsis,
-	FileJson,
-	Fullscreen,
-	Globe,
-	LockKeyhole,
-	PenLine,
-	Plus,
-	X,
-} from '@signozhq/icons';
-import { Button, Card, Input, Modal, Popover, Tag, Tooltip } from 'antd';
-import { toast } from '@signozhq/ui/sonner';
-import { Typography } from '@signozhq/ui/typography';
-import logEvent from 'api/common/logEvent';
-import {
-	lockDashboardV2,
-	patchDashboardV2,
-	unlockDashboardV2,
-} from 'api/generated/services/dashboard';
-import type { DashboardtypesJSONPatchOperationDTO } from 'api/generated/services/sigNoz.schemas';
-import ConfigureIcon from 'assets/Integrations/ConfigureIcon';
-import { DeleteButton } from 'container/ListOfDashboard/TableComponents/DeleteButton';
-import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
-import useComponentPermission from 'hooks/useComponentPermission';
-import { isEmpty } from 'lodash-es';
-import { useAppContext } from 'providers/App/App';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-import { USER_ROLES } from 'types/roles';
-
-import { Base64Icons } from '../../DashboardContainer/DashboardSettings/General/utils';
-import DashboardSettingsV2 from '../DashboardSettings';
-import DashboardHeader from '../components/DashboardHeader/DashboardHeader';
-import SettingsDrawer from './SettingsDrawer';
-
-import '../../DashboardContainer/DashboardDescription/Description.styles.scss';
-
-import type { V2Dashboard } from '../utils';
-
-interface DashboardDescriptionV2Props {
-	dashboard: V2Dashboard | undefined;
-	handle: FullScreenHandle;
-	onRefetch: () => void;
-}
-
-// eslint-disable-next-line sonarjs/cognitive-complexity
-function DashboardDescriptionV2(props: DashboardDescriptionV2Props): JSX.Element {
-	const { dashboard, handle, onRefetch } = props;
-
-	const id = dashboard?.id ?? '';
-	const isDashboardLocked = !!dashboard?.locked;
-
-	const [isSettingsDrawerOpen, setIsSettingsDrawerOpen] =
-		useState<boolean>(false);
-
-	const title = dashboard?.spec?.display?.name ?? '';
-	const description = dashboard?.spec?.display?.description ?? '';
-	const image = dashboard?.image || Base64Icons[0];
-	const tags = useMemo(
-		() =>
-			(dashboard?.tags ?? []).map((t) =>
-				t.key === t.value ? t.key : `${t.key}:${t.value}`,
-			),
-		[dashboard?.tags],
-	);
-
-	const [updatedTitle, setUpdatedTitle] = useState<string>(title);
-
-	const { user } = useAppContext();
-	const [editDashboard] = useComponentPermission(['edit_dashboard'], user.role);
-	const [isDashboardSettingsOpen, setIsDashbordSettingsOpen] =
-		useState<boolean>(false);
-	const [isRenameDashboardOpen, setIsRenameDashboardOpen] =
-		useState<boolean>(false);
-
-	const isAuthor =
-		!!user?.email && !!dashboard?.createdBy && dashboard.createdBy === user.email;
-	const addPanelPermission = !isDashboardLocked;
-	// V2 public dashboard wiring lives separately; treat as not-public for chrome.
-	const isPublicDashboard = false;
-
-	const { showErrorModal } = useErrorModal();
-	const { t } = useTranslation(['dashboard', 'common']);
-
-	const [isRenameLoading, setIsRenameLoading] = useState<boolean>(false);
-
-	useEffect(() => {
-		if (dashboard) {setUpdatedTitle(title);}
-	}, [dashboard, title]);
-
-	const handleLockDashboardToggle = async (): Promise<void> => {
-		if (!id) {return;}
-		setIsDashbordSettingsOpen(false);
-		try {
-			if (isDashboardLocked) {
-				await unlockDashboardV2({ id });
-				toast.success('Dashboard unlocked');
-			} else {
-				await lockDashboardV2({ id });
-				toast.success('Dashboard locked');
-			}
-			onRefetch();
-		} catch (error) {
-			showErrorModal(error as APIError);
-		}
-	};
-
-	const onNameChangeHandler = async (): Promise<void> => {
-		const trimmed = updatedTitle.trim();
-		if (!id || !trimmed || trimmed === title) {
-			setIsRenameDashboardOpen(false);
-			return;
-		}
-		try {
-			setIsRenameLoading(true);
-			const patch: DashboardtypesJSONPatchOperationDTO[] = [
-				{
-					op: 'replace' as DashboardtypesJSONPatchOperationDTO['op'],
-					path: '/spec/display/name',
-					value: trimmed,
-				},
-			];
-			await patchDashboardV2({ id }, patch);
-			toast.success('Dashboard renamed successfully');
-			setIsRenameDashboardOpen(false);
-			onRefetch();
-		} catch (error) {
-			showErrorModal(error as APIError);
-			setIsRenameDashboardOpen(true);
-		} finally {
-			setIsRenameLoading(false);
-		}
-	};
-
-	const onEmptyWidgetHandler = (): void => {
-		logEvent('Dashboard Detail V2: Add new panel clicked', {
-			dashboardId: id,
-		});
-		toast.info('V2 panel editor coming next');
-	};
-
-	const [state, setCopy] = useCopyToClipboard();
-
-	useEffect(() => {
-		if (state.error) {
-			toast.error(t('something_went_wrong', { ns: 'common' }));
-		}
-		if (state.value) {
-			toast.success(t('success', { ns: 'common' }));
-		}
-	}, [state.error, state.value, t]);
-
-	const dashboardDataJSON = (): string =>
-		JSON.stringify(dashboard ?? {}, null, 2);
-
-	const exportJSON = (): void => {
-		const blob = new Blob([dashboardDataJSON()], { type: 'application/json' });
-		const url = URL.createObjectURL(blob);
-		const link = document.createElement('a');
-		link.href = url;
-		link.download = `${title || 'dashboard'}.json`;
-		document.body.appendChild(link);
-		link.click();
-		document.body.removeChild(link);
-		URL.revokeObjectURL(url);
-	};
-
-	const onConfigureClick = (): void => {
-		setIsSettingsDrawerOpen(true);
-	};
-
-	const onSettingsDrawerClose = (): void => {
-		setIsSettingsDrawerOpen(false);
-	};
-
-	return (
-		<Card className="dashboard-description-container">
-			<DashboardHeader title={title} image={image} />
-			<section className="dashboard-details">
-				<div className="left-section">
-					<img src={image} alt="dashboard-img" className="dashboard-img" />
-					<Tooltip title={title.length > 30 ? title : ''}>
-						<Typography.Text
-							className="dashboard-title"
-							data-testid="dashboard-title"
-						>
-							{title}
-						</Typography.Text>
-					</Tooltip>
-
-					{isPublicDashboard && (
-						<Tooltip title="This dashboard is publicly accessible">
-							<Globe size={14} className="public-dashboard-icon" />
-						</Tooltip>
-					)}
-
-					{isDashboardLocked && (
-						<Tooltip title="This dashboard is locked">
-							<LockKeyhole size={14} className="lock-dashboard-icon" />
-						</Tooltip>
-					)}
-				</div>
-				<div className="right-section">
-					<DateTimeSelectionV2 showAutoRefresh hideShareModal />
-					<Popover
-						open={isDashboardSettingsOpen}
-						arrow={false}
-						onOpenChange={(visible): void => setIsDashbordSettingsOpen(visible)}
-						rootClassName="dashboard-settings"
-						content={
-							<div className="menu-content">
-								<section className="section-1">
-									{(isAuthor || user.role === USER_ROLES.ADMIN) && (
-										<Tooltip
-											title={
-												dashboard?.createdBy === 'integration' &&
-												'Dashboards created by integrations cannot be unlocked'
-											}
-										>
-											<Button
-												type="text"
-												icon={<LockKeyhole size={14} />}
-												disabled={dashboard?.createdBy === 'integration'}
-												onClick={handleLockDashboardToggle}
-												data-testid="lock-unlock-dashboard"
-											>
-												{isDashboardLocked ? 'Unlock Dashboard' : 'Lock Dashboard'}
-											</Button>
-										</Tooltip>
-									)}
-
-									{!isDashboardLocked && editDashboard && (
-										<Button
-											type="text"
-											icon={<PenLine size={14} />}
-											onClick={(): void => {
-												setIsRenameDashboardOpen(true);
-												setIsDashbordSettingsOpen(false);
-											}}
-										>
-											Rename
-										</Button>
-									)}
-
-									<Button
-										type="text"
-										icon={<Fullscreen size={14} />}
-										onClick={handle.enter}
-									>
-										Full screen
-									</Button>
-								</section>
-								<section className="section-2">
-									<Button
-										type="text"
-										icon={<FileJson size={14} />}
-										onClick={(): void => {
-											exportJSON();
-											setIsDashbordSettingsOpen(false);
-										}}
-									>
-										Export JSON
-									</Button>
-									<Button
-										type="text"
-										icon={<ClipboardCopy size={14} />}
-										onClick={(): void => {
-											setCopy(dashboardDataJSON());
-											setIsDashbordSettingsOpen(false);
-										}}
-									>
-										Copy as JSON
-									</Button>
-								</section>
-								<section className="delete-dashboard">
-									<DeleteButton
-										createdBy={dashboard?.createdBy || ''}
-										name={title}
-										id={id}
-										isLocked={isDashboardLocked}
-										routeToListPage
-									/>
-								</section>
-							</div>
-						}
-						trigger="click"
-						placement="bottomRight"
-					>
-						<Button
-							icon={<Ellipsis size={14} />}
-							type="text"
-							className="icons"
-							data-testid="options"
-						/>
-					</Popover>
-					{!isDashboardLocked && editDashboard && (
-						<>
-							<Button
-								type="text"
-								className="configure-button"
-								icon={<ConfigureIcon />}
-								data-testid="show-drawer"
-								onClick={onConfigureClick}
-							>
-								Configure
-							</Button>
-							<SettingsDrawer
-								drawerTitle="Dashboard Configuration"
-								isOpen={isSettingsDrawerOpen}
-								onClose={onSettingsDrawerClose}
-							>
-								<DashboardSettingsV2
-									dashboard={dashboard}
-									onRefetch={onRefetch}
-								/>
-							</SettingsDrawer>
-						</>
-					)}
-					{!isDashboardLocked && addPanelPermission && (
-						<Button
-							className="add-panel-btn"
-							onClick={onEmptyWidgetHandler}
-							icon={<Plus size="md" />}
-							type="primary"
-							data-testid="add-panel-header"
-						>
-							New Panel
-						</Button>
-					)}
-				</div>
-			</section>
-			{tags.length > 0 && (
-				<div className="dashboard-tags">
-					{tags.map((tag) => (
-						<Tag key={tag} className="tag">
-							{tag}
-						</Tag>
-					))}
-				</div>
-			)}
-			{!isEmpty(description) && (
-				<section className="dashboard-description-section">{description}</section>
-			)}
-
-			<Modal
-				open={isRenameDashboardOpen}
-				title="Rename Dashboard"
-				onOk={onNameChangeHandler}
-				onCancel={(): void => {
-					setIsRenameDashboardOpen(false);
-				}}
-				rootClassName="rename-dashboard"
-				footer={
-					<div className="dashboard-rename">
-						<Button
-							type="primary"
-							icon={<Check size={14} />}
-							className="rename-btn"
-							onClick={onNameChangeHandler}
-							disabled={isRenameLoading}
-						>
-							Rename Dashboard
-						</Button>
-						<Button
-							type="text"
-							icon={<X size={14} />}
-							className="cancel-btn"
-							onClick={(): void => setIsRenameDashboardOpen(false)}
-						>
-							Cancel
-						</Button>
-					</div>
-				}
-			>
-				<div className="dashboard-content">
-					<Typography.Text className="name-text">Enter a new name</Typography.Text>
-					<Input
-						data-testid="dashboard-name"
-						className="dashboard-name-input"
-						value={updatedTitle}
-						onChange={(e): void => setUpdatedTitle(e.target.value)}
-					/>
-				</div>
-			</Modal>
-		</Card>
-	);
-}
-
-export default DashboardDescriptionV2;

frontend/src/container/DashboardContainerV2/DashboardSettings/General/GeneralSettings.module.scss

@@ -1,227 +0,0 @@
-.overviewContent {
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-}
-
-.overviewSettings {
-	border-radius: 3px;
-	border: 1px solid var(--l1-border);
-	padding: 16px !important;
-}
-
-.crossPanelSyncGroup {
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-}
-
-.crossPanelSyncSectionTitle {
-	color: var(--l1-foreground);
-	font-family: Inter;
-	font-size: 14px;
-	font-weight: 500;
-	line-height: 20px;
-}
-
-.crossPanelSyncSectionHeader {
-	display: flex;
-	align-items: center;
-	gap: 6px;
-	align-self: flex-start;
-}
-
-.crossPanelSyncInfoIcon {
-	cursor: help;
-	color: var(--l3-foreground);
-}
-
-.crossPanelSyncTooltipContent {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	max-width: 300px;
-}
-
-.crossPanelSyncTooltipTitle {
-	font-size: 14px;
-}
-
-.crossPanelSyncTooltipDescription {
-	font-size: 12px;
-	line-height: 1.5;
-}
-
-.crossPanelSyncTooltipDocLink {
-	display: flex;
-	align-items: center;
-	gap: 4px;
-	color: var(--primary-background);
-	font-size: 12px;
-	margin-top: 4px;
-}
-
-.crossPanelSyncRow {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	align-items: center;
-	gap: 16px;
-
-	& + & {
-		padding-top: 16px;
-		border-top: 1px solid var(--l1-border);
-	}
-}
-
-.crossPanelSyncInfo {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-}
-
-.crossPanelSyncTitle {
-	color: var(--l2-foreground);
-	font-family: Inter;
-	font-size: 14px;
-	font-weight: 400;
-	line-height: 20px;
-}
-
-.crossPanelSyncDescription {
-	color: var(--l3-foreground);
-	font-family: Inter;
-	font-size: 13px;
-	font-weight: 400;
-	line-height: 20px;
-}
-
-.nameIconInput {
-	display: flex;
-}
-
-.dashboardImageInput {
-	:global(.ant-select-selector) {
-		display: flex;
-		width: 32px;
-		height: 32px;
-		padding: 6px;
-		justify-content: center;
-		align-items: center;
-		border-radius: 2px 0px 0px 2px;
-		border: 1px solid var(--l1-border) !important;
-		background: var(--l3-background) !important;
-
-		:global(.ant-select-selection-item) {
-			display: flex;
-			align-items: center;
-		}
-	}
-
-	&:global(.ant-select-dropdown) {
-		padding: 0px !important;
-	}
-
-	:global(.ant-select-item) {
-		padding: 0px;
-		align-items: center;
-		justify-content: center;
-
-		:global(.ant-select-item-option-content) {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
-	}
-}
-
-.listItemImage {
-	height: 16px;
-	width: 16px;
-}
-
-.dashboardNameInput {
-	border-radius: 0px 2px 2px 0px;
-	border: 1px solid var(--l1-border);
-	background: var(--l3-background);
-}
-
-.dashboardName {
-	color: var(--l2-foreground);
-	font-family: Inter;
-	font-size: 14px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 20px;
-	margin-bottom: 0.5rem;
-}
-
-.descriptionTextArea {
-	padding: 6px 6px 6px 8px;
-	border-radius: 2px;
-	border: 1px solid var(--l1-border);
-	background: var(--l3-background);
-}
-
-.overviewSettingsFooter {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	width: -webkit-fill-available;
-	padding: 12px 16px 12px 0px;
-	position: fixed;
-	bottom: 0;
-	height: 32px;
-	border-top: 1px solid var(--l1-border);
-	background: var(--l2-background);
-}
-
-.unsaved {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}
-
-.unsavedDot {
-	width: 6px;
-	height: 6px;
-	border-radius: 50px;
-	background: var(--primary-background);
-	box-shadow: 0px 0px 6px 0px
-		color-mix(in srgb, var(--primary-background) 40%, transparent);
-}
-
-.unsavedChanges {
-	color: var(--bg-robin-400);
-	font-family: Inter;
-	font-size: 14px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 24px;
-	letter-spacing: -0.07px;
-}
-
-.footerActionBtns {
-	display: flex;
-	gap: 8px;
-}
-
-.discardBtn {
-	margin: '16px 0';
-	color: var(--l1-foreground);
-	font-family: Inter;
-	font-size: 12px;
-	font-style: normal;
-	font-weight: 500;
-	line-height: 24px;
-}
-
-.saveBtn {
-	margin: 0px !important;
-	color: var(--l1-foreground);
-	font-family: Inter;
-	font-size: 12px;
-	font-style: normal;
-	font-weight: 500;
-	line-height: 24px;
-}

frontend/src/container/DashboardContainerV2/DashboardSettings/General/index.tsx

@@ -1,363 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-// eslint-disable-next-line signoz/no-antd-components -- TODO: migrate Radio to @signozhq/ui/radio-group
-import { Col, Input, Radio, Select, Space, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import AddTags from 'container/DashboardContainer/DashboardSettings/General/AddBadges';
-import { useDashboardCursorSyncMode } from 'hooks/dashboard/useDashboardCursorSyncMode';
-import { useSyncTooltipFilterMode } from 'hooks/dashboard/useSyncTooltipFilterMode';
-import {
-	DashboardCursorSync,
-	SyncTooltipFilterMode,
-} from 'lib/uPlotV2/plugins/TooltipPlugin/types';
-import { isEqual } from 'lodash-es';
-import { Check, ExternalLink, SolidInfoCircle, X } from '@signozhq/icons';
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import type {
-	DashboardtypesJSONPatchOperationDTO,
-	TagtypesPostableTagDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { toast } from '@signozhq/ui/sonner';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import styles from './GeneralSettings.module.scss';
-import { Button } from './styles';
-import { Base64Icons } from './utils';
-import logEvent from 'api/common/logEvent';
-import { Events } from 'constants/events';
-import { getAbsoluteUrl } from 'utils/basePath';
-
-import type { V2Dashboard } from '../../utils';
-
-const { Option } = Select;
-
-interface Props {
-	dashboard: V2Dashboard | undefined;
-	onRefetch: () => void;
-}
-
-// Convert V2 tags ({key, value}[]) into "key:value" strings for the V1
-// AddTags component (which expects string[]), and back on save.
-//
-// V2 tags require both `key` and `value` to be non-empty server-side
-// (returns `tag_invalid_value` otherwise). To preserve the V1 single-word
-// tag UX, a string with no ':' is round-tripped as `{key: x, value: x}` and
-// collapsed back to just `x` for display.
-function tagsToStrings(tags: TagtypesPostableTagDTO[]): string[] {
-	return tags.map((t) => (t.key === t.value ? t.key : `${t.key}:${t.value}`));
-}
-
-function stringsToTags(tagStrings: string[]): TagtypesPostableTagDTO[] {
-	return tagStrings
-		.map((s) => {
-			const trimmed = s.trim();
-			const idx = trimmed.indexOf(':');
-			if (idx === -1) {
-				return { key: trimmed, value: trimmed };
-			}
-			const key = trimmed.slice(0, idx).trim();
-			const value = trimmed.slice(idx + 1).trim();
-			return { key, value: value || key };
-		})
-		.filter((t) => t.key.length > 0);
-}
-
-function GeneralDashboardSettingsV2({
-	dashboard,
-	onRefetch,
-}: Props): JSX.Element {
-	const id = dashboard?.id ?? '';
-
-	const [cursorSyncMode, setCursorSyncMode] = useDashboardCursorSyncMode(id);
-	const [syncTooltipFilterMode, setSyncTooltipFilterMode] =
-		useSyncTooltipFilterMode(id);
-
-	const title = dashboard?.spec?.display?.name ?? '';
-	const description = dashboard?.spec?.display?.description ?? '';
-	const image = dashboard?.image || Base64Icons[0];
-	const tagsAsStrings = useMemo(
-		() => tagsToStrings(dashboard?.tags ?? []),
-		[dashboard?.tags],
-	);
-
-	const [updatedTitle, setUpdatedTitle] = useState<string>(title);
-	const [updatedTags, setUpdatedTags] = useState<string[]>(tagsAsStrings);
-	const [updatedDescription, setUpdatedDescription] =
-		useState<string>(description);
-	const [updatedImage, setUpdatedImage] = useState<string>(image);
-	const [isSaving, setIsSaving] = useState<boolean>(false);
-	const [numberOfUnsavedChanges, setNumberOfUnsavedChanges] =
-		useState<number>(0);
-
-	const { t } = useTranslation('common');
-	const { showErrorModal } = useErrorModal();
-
-	// Sync state when dashboard refetches after a save
-	useEffect(() => {
-		setUpdatedTitle(title);
-		setUpdatedDescription(description);
-		setUpdatedImage(image);
-		setUpdatedTags(tagsAsStrings);
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [dashboard?.updatedAt]);
-
-	const buildPatch = (): DashboardtypesJSONPatchOperationDTO[] => {
-		const ops: DashboardtypesJSONPatchOperationDTO[] = [];
-		const replace = (
-			path: string,
-			value: unknown,
-		): DashboardtypesJSONPatchOperationDTO => ({
-			op: 'replace' as DashboardtypesJSONPatchOperationDTO['op'],
-			path,
-			value,
-		});
-
-		if (updatedTitle !== title) {
-			ops.push(replace('/spec/display/name', updatedTitle));
-		}
-		if (updatedDescription !== description) {
-			ops.push(replace('/spec/display/description', updatedDescription));
-		}
-		if (updatedImage !== image) {
-			ops.push(replace('/image', updatedImage));
-		}
-		if (!isEqual(updatedTags, tagsAsStrings)) {
-			ops.push(replace('/tags', stringsToTags(updatedTags)));
-		}
-		return ops;
-	};
-
-	const onSaveHandler = async (): Promise<void> => {
-		if (!id) {
-			return;
-		}
-		const ops = buildPatch();
-		if (ops.length === 0) {
-			return;
-		}
-
-		try {
-			setIsSaving(true);
-			await patchDashboardV2({ id }, ops);
-			toast.success('Dashboard updated');
-			onRefetch();
-		} catch (error) {
-			showErrorModal(error as APIError);
-		} finally {
-			setIsSaving(false);
-		}
-	};
-
-	useEffect(() => {
-		let n = 0;
-		const initialValues = [title, description, tagsAsStrings, image];
-		const updatedValues = [
-			updatedTitle,
-			updatedDescription,
-			updatedTags,
-			updatedImage,
-		];
-		initialValues.forEach((val, index) => {
-			if (!isEqual(val, updatedValues[index])) {
-				n += 1;
-			}
-		});
-		setNumberOfUnsavedChanges(n);
-	}, [
-		description,
-		image,
-		tagsAsStrings,
-		title,
-		updatedDescription,
-		updatedImage,
-		updatedTags,
-		updatedTitle,
-	]);
-
-	const discardHandler = (): void => {
-		setUpdatedTitle(title);
-		setUpdatedImage(image);
-		setUpdatedTags(tagsAsStrings);
-		setUpdatedDescription(description);
-	};
-
-	return (
-		<div className={styles.overviewContent}>
-			<Col className={styles.overviewSettings}>
-				<Space
-					direction="vertical"
-					style={{
-						width: '100%',
-						display: 'flex',
-						flexDirection: 'column',
-						gap: '21px',
-					}}
-				>
-					<div>
-						<Typography className={styles.dashboardName}>Dashboard Name</Typography>
-						<section className={styles.nameIconInput}>
-							<Select
-								defaultActiveFirstOption
-								data-testid="dashboard-image"
-								suffixIcon={null}
-								rootClassName={styles.dashboardImageInput}
-								value={updatedImage}
-								onChange={(value: string): void => setUpdatedImage(value)}
-							>
-								{Base64Icons.map((icon) => (
-									<Option value={icon} key={icon}>
-										<img
-											src={icon}
-											alt="dashboard-icon"
-											className={styles.listItemImage}
-										/>
-									</Option>
-								))}
-							</Select>
-							<Input
-								data-testid="dashboard-name"
-								className={styles.dashboardNameInput}
-								value={updatedTitle}
-								onChange={(e): void => setUpdatedTitle(e.target.value)}
-							/>
-						</section>
-					</div>
-
-					<div>
-						<Typography className={styles.dashboardName}>Description</Typography>
-						<Input.TextArea
-							data-testid="dashboard-desc"
-							rows={6}
-							value={updatedDescription}
-							className={styles.descriptionTextArea}
-							onChange={(e): void => setUpdatedDescription(e.target.value)}
-						/>
-					</div>
-					<div>
-						<Typography className={styles.dashboardName}>Tags</Typography>
-						<AddTags tags={updatedTags} setTags={setUpdatedTags} />
-					</div>
-				</Space>
-			</Col>
-			<Col className={`${styles.overviewSettings} ${styles.crossPanelSyncGroup}`}>
-				<div className={styles.crossPanelSyncSectionHeader}>
-					<Typography.Text className={styles.crossPanelSyncSectionTitle}>
-						Cross-Panel Sync
-					</Typography.Text>
-					<Tooltip
-						title={
-							<div className={styles.crossPanelSyncTooltipContent}>
-								<strong className={styles.crossPanelSyncTooltipTitle}>
-									Cross-Panel Sync
-								</strong>
-								<span className={styles.crossPanelSyncTooltipDescription}>
-									Sync crosshair and tooltip across all the dashboard panels
-								</span>
-								<a
-									href="https://signoz.io/docs/dashboards/interactivity/#cross-panel-sync"
-									target="_blank"
-									rel="noopener noreferrer"
-									className={styles.crossPanelSyncTooltipDocLink}
-								>
-									Learn more
-									<ExternalLink size={12} />
-								</a>
-							</div>
-						}
-						placement="top"
-						mouseEnterDelay={0.5}
-					>
-						<SolidInfoCircle size="md" className={styles.crossPanelSyncInfoIcon} />
-					</Tooltip>
-				</div>
-				<div className={styles.crossPanelSyncRow}>
-					<div className={styles.crossPanelSyncInfo}>
-						<Typography.Text className={styles.crossPanelSyncTitle}>
-							Sync Mode
-						</Typography.Text>
-						<Typography.Text className={styles.crossPanelSyncDescription}>
-							Sync crosshair and tooltip across all the dashboard panels
-						</Typography.Text>
-					</div>
-					<Radio.Group
-						value={cursorSyncMode}
-						onChange={(e): void => {
-							setCursorSyncMode(e.target.value as DashboardCursorSync);
-						}}
-					>
-						<Radio.Button value={DashboardCursorSync.None}>No Sync</Radio.Button>
-						<Radio.Button value={DashboardCursorSync.Crosshair}>
-							Crosshair
-						</Radio.Button>
-						<Radio.Button value={DashboardCursorSync.Tooltip}>Tooltip</Radio.Button>
-					</Radio.Group>
-				</div>
-				{cursorSyncMode === DashboardCursorSync.Tooltip && (
-					<div className={styles.crossPanelSyncRow}>
-						<div className={styles.crossPanelSyncInfo}>
-							<Typography.Text className={styles.crossPanelSyncTitle}>
-								Synced Tooltip Series
-							</Typography.Text>
-							<Typography.Text className={styles.crossPanelSyncDescription}>
-								Show only series that intersect on group-by, or every series with the
-								matching ones highlighted
-							</Typography.Text>
-						</div>
-						<Radio.Group
-							value={syncTooltipFilterMode}
-							onChange={(e): void => {
-								logEvent(Events.TOOLTIP_SYNC_MODE_CHANGED, {
-									path: getAbsoluteUrl(window.location.pathname),
-									mode: e.target.value,
-								});
-								setSyncTooltipFilterMode(e.target.value as SyncTooltipFilterMode);
-							}}
-						>
-							<Radio.Button value={SyncTooltipFilterMode.All}>All</Radio.Button>
-							<Radio.Button value={SyncTooltipFilterMode.Filtered}>
-								Filtered
-							</Radio.Button>
-						</Radio.Group>
-					</div>
-				)}
-			</Col>
-			{numberOfUnsavedChanges > 0 && (
-				<div className={styles.overviewSettingsFooter}>
-					<div className={styles.unsaved}>
-						<div className={styles.unsavedDot} />
-						<Typography.Text className={styles.unsavedChanges}>
-							{numberOfUnsavedChanges} unsaved change
-							{numberOfUnsavedChanges > 1 && 's'}
-						</Typography.Text>
-					</div>
-					<div className={styles.footerActionBtns}>
-						<Button
-							disabled={isSaving}
-							icon={<X size={14} />}
-							onClick={discardHandler}
-							type="text"
-							className={styles.discardBtn}
-						>
-							Discard
-						</Button>
-						<Button
-							style={{ margin: '16px 0' }}
-							disabled={isSaving}
-							loading={isSaving}
-							icon={<Check size={14} />}
-							data-testid="save-dashboard-config"
-							onClick={onSaveHandler}
-							type="primary"
-							className={styles.saveBtn}
-						>
-							{t('save')}
-						</Button>
-					</div>
-				</div>
-			)}
-		</div>
-	);
-}
-
-export default GeneralDashboardSettingsV2;

frontend/src/container/DashboardContainerV2/DashboardSettings/General/styles.ts

@@ -1,20 +0,0 @@
-import { Button as ButtonComponent, Drawer } from 'antd';
-import styled from 'styled-components';
-
-export const Container = styled.div`
-	margin-top: 0.5rem;
-`;
-
-export const Button = styled(ButtonComponent)`
-	&&& {
-		display: flex;
-		align-items: center;
-	}
-`;
-
-export const DrawerContainer = styled(Drawer)`
-	.ant-drawer-header {
-		padding: 0;
-		border: none;
-	}
-`;

frontend/src/container/DashboardContainerV2/DashboardSettings/index.tsx

@@ -1,67 +0,0 @@
-import { Button, Empty, Tabs } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import { Braces, Globe, Table } from '@signozhq/icons';
-
-import '../../DashboardContainer/DashboardSettings/DashboardSettingsContent.styles.scss';
-
-import GeneralDashboardSettingsV2 from './General';
-import type { V2Dashboard } from '../utils';
-
-interface Props {
-	dashboard: V2Dashboard | undefined;
-	onRefetch: () => void;
-}
-
-function Placeholder({ message }: { message: string }): JSX.Element {
-	return (
-		<div style={{ padding: 24 }}>
-			<Empty
-				image={Empty.PRESENTED_IMAGE_SIMPLE}
-				description={<Typography.Text>{message}</Typography.Text>}
-			/>
-		</div>
-	);
-}
-
-function DashboardSettingsV2({ dashboard, onRefetch }: Props): JSX.Element {
-	const items = [
-		{
-			label: (
-				<Button type="text" icon={<Table size={14} />}>
-					General
-				</Button>
-			),
-			key: 'general',
-			children: (
-				<GeneralDashboardSettingsV2
-					dashboard={dashboard}
-					onRefetch={onRefetch}
-				/>
-			),
-		},
-		{
-			label: (
-				<Button type="text" icon={<Braces size={14} />}>
-					Variables
-				</Button>
-			),
-			key: 'variables',
-			children: <Placeholder message="V2 dashboard variables coming next." />,
-		},
-		{
-			label: (
-				<Button type="text" icon={<Globe size={14} />}>
-					Publish
-				</Button>
-			),
-			key: 'public-dashboard',
-			children: (
-				<Placeholder message="V2 public dashboard publishing coming next." />
-			),
-		},
-	];
-
-	return <Tabs items={items} />;
-}
-
-export default DashboardSettingsV2;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/AddSectionControl.module.scss

@@ -1,17 +0,0 @@
-.addButton {
-	display: inline-flex;
-	align-items: center;
-	gap: 6px;
-	margin-top: 8px;
-	padding: 8px 12px;
-	background: transparent;
-	border: 1px dashed var(--bg-slate-400, #1d212d);
-	border-radius: 4px;
-	color: var(--bg-vanilla-400, #8993ae);
-	cursor: pointer;
-
-	&:hover {
-		border-color: var(--bg-robin-500);
-		color: var(--bg-vanilla-100, #fff);
-	}
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/AddSectionControl.tsx

@@ -1,75 +0,0 @@
-import { useState } from 'react';
-import { Plus } from '@signozhq/icons';
-import type { DashboardtypesLayoutDTO } from 'api/generated/services/sigNoz.schemas';
-
-import type { DashboardSectionV2 } from '../utils';
-import { useAddSection } from './hooks/useAddSection';
-import { useFirstSectionMigration } from './hooks/useFirstSectionMigration';
-import FirstSectionMigrationModal from './FirstSectionMigrationModal';
-import styles from './AddSectionControl.module.scss';
-
-const DEFAULT_SECTION_TITLE = 'New section';
-
-interface Props {
-	sections: DashboardSectionV2[];
-	layouts: DashboardtypesLayoutDTO[] | undefined | null;
-	dashboardId: string | undefined;
-	isSectioned: boolean;
-	onRefetch: () => void;
-}
-
-function AddSectionControl({
-	sections,
-	layouts,
-	dashboardId,
-	isSectioned,
-	onRefetch,
-}: Props): JSX.Element {
-	const [isMigrationOpen, setIsMigrationOpen] = useState(false);
-	const { addSection } = useAddSection({ layouts, dashboardId, onRefetch });
-	const { migrate, isSaving } = useFirstSectionMigration({
-		sections,
-		dashboardId,
-		onRefetch,
-	});
-
-	// Free-flowing dashboard with existing panels → must migrate before sections
-	// can coexist (every panel must belong to a section once any exists).
-	const needsMigration =
-		!isSectioned && sections.some((s) => s.items.length > 0);
-
-	const handleClick = (): void => {
-		if (needsMigration) {
-			setIsMigrationOpen(true);
-			return;
-		}
-		void addSection(DEFAULT_SECTION_TITLE);
-	};
-
-	const handleConfirmMigration = async (): Promise<void> => {
-		await migrate(DEFAULT_SECTION_TITLE);
-		setIsMigrationOpen(false);
-	};
-
-	return (
-		<>
-			<button
-				type="button"
-				className={styles.addButton}
-				onClick={handleClick}
-				data-testid="add-section"
-			>
-				<Plus size={14} />
-				Add section
-			</button>
-			<FirstSectionMigrationModal
-				open={isMigrationOpen}
-				isSaving={isSaving}
-				onClose={(): void => setIsMigrationOpen(false)}
-				onConfirm={handleConfirmMigration}
-			/>
-		</>
-	);
-}
-
-export default AddSectionControl;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/FirstSectionMigrationModal.tsx

@@ -1,41 +0,0 @@
-import { Modal } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-
-interface Props {
-	open: boolean;
-	isSaving: boolean;
-	onClose: () => void;
-	onConfirm: () => void;
-}
-
-/**
- * Shown when the user adds the first section to a free-flowing dashboard that
- * already has panels. Confirms grouping the existing panels into a section
- * before proceeding.
- */
-function FirstSectionMigrationModal({
-	open,
-	isSaving,
-	onClose,
-	onConfirm,
-}: Props): JSX.Element {
-	return (
-		<Modal
-			open={open}
-			title="Group panels into sections?"
-			onCancel={onClose}
-			onOk={onConfirm}
-			okText="Continue"
-			okButtonProps={{ disabled: isSaving, 'data-testid': 'confirm-migration' }}
-			destroyOnClose
-		>
-			<Typography.Text>
-				This dashboard&apos;s panels are currently free-flowing. Adding a section
-				will move the existing panels into their own section, and a new empty
-				section will be added below. You can rename sections afterwards.
-			</Typography.Text>
-		</Modal>
-	);
-}
-
-export default FirstSectionMigrationModal;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/GridCardLayoutV2.module.scss

@@ -1,4 +0,0 @@
-.emptyState {
-	padding: 48px;
-	text-align: center;
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/PanelActionsMenu.module.scss

@@ -1,16 +0,0 @@
-.trigger {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	padding: 2px;
-	background: transparent;
-	border: none;
-	border-radius: 2px;
-	color: var(--bg-vanilla-400, #8993ae);
-	cursor: pointer;
-
-	&:hover {
-		color: var(--bg-vanilla-100, #fff);
-		background: var(--bg-slate-400, #1d212d);
-	}
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/PanelActionsMenu.tsx

@@ -1,95 +0,0 @@
-import { useMemo } from 'react';
-import { EllipsisVertical, FolderInput, Trash2 } from '@signozhq/icons';
-import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
-import type { MenuItem } from '@signozhq/ui/dropdown-menu';
-
-import type { DashboardSectionV2 } from '../utils';
-import type { MovePanelArgs } from './hooks/useMovePanelToSection';
-import type { DeletePanelArgs } from './hooks/useDeletePanel';
-import styles from './PanelActionsMenu.module.scss';
-
-interface Props {
-	panelId: string;
-	currentLayoutIndex: number;
-	sections: DashboardSectionV2[];
-	onMovePanel?: (args: MovePanelArgs) => void;
-	onDeletePanel?: (args: DeletePanelArgs) => void;
-}
-
-function PanelActionsMenu({
-	panelId,
-	currentLayoutIndex,
-	sections,
-	onMovePanel,
-	onDeletePanel,
-}: Props): JSX.Element {
-	const items = useMemo<MenuItem[]>(() => {
-		const result: MenuItem[] = [];
-
-		if (onMovePanel) {
-			const targets = sections.filter(
-				(s) => s.title && s.layoutIndex !== currentLayoutIndex,
-			);
-			if (targets.length === 0) {
-				result.push({
-					key: 'move',
-					label: 'Move to section',
-					icon: <FolderInput size={14} />,
-					disabled: true,
-				});
-			} else {
-				result.push({
-					key: 'move',
-					label: 'Move to section',
-					icon: <FolderInput size={14} />,
-					children: targets.map((s) => ({
-						key: `move-${s.layoutIndex}`,
-						label: s.title,
-						onClick: (): void =>
-							onMovePanel({
-								panelId,
-								fromLayoutIndex: currentLayoutIndex,
-								toLayoutIndex: s.layoutIndex,
-							}),
-					})),
-				});
-			}
-		}
-
-		if (onDeletePanel) {
-			if (result.length > 0) {
-				result.push({ type: 'divider' });
-			}
-			result.push({
-				key: 'delete-panel',
-				danger: true,
-				icon: <Trash2 size={14} />,
-				label: 'Delete panel',
-				onClick: (): void =>
-					onDeletePanel({ panelId, layoutIndex: currentLayoutIndex }),
-			});
-		}
-
-		return result;
-	}, [sections, currentLayoutIndex, panelId, onMovePanel, onDeletePanel]);
-
-	return (
-		<DropdownMenuSimple menu={{ items }}>
-			<button
-				type="button"
-				className={styles.trigger}
-				aria-label="Panel actions"
-				data-testid={`panel-actions-${panelId}`}
-				// Stop pointer/mouse down from reaching the RGL drag handle this
-				// button lives inside, so opening the menu never starts a panel drag.
-				onPointerDown={(e): void => e.stopPropagation()}
-				onMouseDown={(e): void => e.stopPropagation()}
-				onClick={(e): void => e.stopPropagation()}
-			>
-				<EllipsisVertical size={14} />
-			</button>
-		</DropdownMenuSimple>
-	);
-}
-
-export default PanelActionsMenu;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/PanelTypeSelectionModalV2.module.scss

@@ -1,22 +0,0 @@
-.grid {
-	display: grid;
-	grid-template-columns: repeat(2, 1fr);
-	gap: 8px;
-}
-
-.typeButton {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	padding: 12px;
-	background: var(--bg-ink-400, #0b0c0e);
-	border: 1px solid var(--bg-slate-400, #1d212d);
-	border-radius: 4px;
-	color: var(--bg-vanilla-100, #fff);
-	cursor: pointer;
-	text-align: left;
-
-	&:hover {
-		border-color: var(--bg-robin-500);
-	}
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/PanelTypeSelectionModalV2.tsx

@@ -1,82 +0,0 @@
-import { Modal } from 'antd';
-import {
-	BarChart,
-	ChartLine,
-	ChartPie,
-	Hash,
-	List,
-	Table,
-} from '@signozhq/icons';
-
-import styles from './PanelTypeSelectionModalV2.module.scss';
-
-interface PanelType {
-	pluginKind: string;
-	label: string;
-	icon: JSX.Element;
-}
-
-const PANEL_TYPES: PanelType[] = [
-	{
-		pluginKind: 'signoz/TimeSeriesPanel',
-		label: 'Time Series',
-		icon: <ChartLine size={16} />,
-	},
-	{ pluginKind: 'signoz/NumberPanel', label: 'Value', icon: <Hash size={16} /> },
-	{ pluginKind: 'signoz/TablePanel', label: 'Table', icon: <Table size={16} /> },
-	{
-		pluginKind: 'signoz/BarChartPanel',
-		label: 'Bar Chart',
-		icon: <BarChart size={16} />,
-	},
-	{
-		pluginKind: 'signoz/PieChartPanel',
-		label: 'Pie Chart',
-		icon: <ChartPie size={16} />,
-	},
-	{
-		pluginKind: 'signoz/HistogramPanel',
-		label: 'Histogram',
-		icon: <BarChart size={16} />,
-	},
-	{ pluginKind: 'signoz/ListPanel', label: 'List', icon: <List size={16} /> },
-];
-
-interface Props {
-	open: boolean;
-	onClose: () => void;
-	onSelect: (pluginKind: string) => void;
-}
-
-function PanelTypeSelectionModalV2({
-	open,
-	onClose,
-	onSelect,
-}: Props): JSX.Element {
-	return (
-		<Modal
-			open={open}
-			title="Select a panel type"
-			onCancel={onClose}
-			footer={null}
-			destroyOnClose
-		>
-			<div className={styles.grid}>
-				{PANEL_TYPES.map((type) => (
-					<button
-						key={type.pluginKind}
-						type="button"
-						className={styles.typeButton}
-						data-testid={`panel-type-${type.pluginKind}`}
-						onClick={(): void => onSelect(type.pluginKind)}
-					>
-						{type.icon}
-						{type.label}
-					</button>
-				))}
-			</div>
-		</Modal>
-	);
-}
-
-export default PanelTypeSelectionModalV2;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/PanelV2.module.scss

@@ -1,52 +0,0 @@
-.panel {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	width: 100%;
-	background: var(--bg-ink-400, #0b0c0e);
-	border: 1px solid var(--bg-slate-400, #1d212d);
-	border-radius: 4px;
-	overflow: hidden;
-}
-
-.header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 8px 12px;
-	border-bottom: 1px solid var(--bg-slate-400, #1d212d);
-	cursor: grab;
-}
-
-.headerLeft {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	min-width: 0;
-}
-
-.headerTitle {
-	margin: 0;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.badge {
-	margin-inline-end: 0;
-}
-
-.body {
-	flex: 1;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: 12px;
-	color: var(--bg-vanilla-400, #8993ae);
-	font-size: 12px;
-	text-align: center;
-}
-
-.bodyKind {
-	margin-bottom: 6px;
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/PanelV2.tsx

@@ -1,93 +0,0 @@
-import { useMemo } from 'react';
-import { Tooltip } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
-import { Typography } from '@signozhq/ui/typography';
-import { EllipsisVertical } from '@signozhq/icons';
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-
-import type { DashboardSectionV2 } from '../utils';
-import type { MovePanelArgs } from './hooks/useMovePanelToSection';
-import type { DeletePanelArgs } from './hooks/useDeletePanel';
-import PanelActionsMenu from './PanelActionsMenu';
-import styles from './PanelV2.module.scss';
-
-interface Props {
-	panel: DashboardtypesPanelDTO | undefined;
-	panelId: string;
-	/**
-	 * Placeholder: true once this panel's section enters the viewport. The panel
-	 * query-loading implementation (later PR) will consume this to lazily fetch
-	 * data. Currently unused on purpose.
-	 */
-	isVisible?: boolean;
-	/** Section actions — present only in editable sectioned mode. */
-	currentLayoutIndex?: number;
-	sections?: DashboardSectionV2[];
-	onMovePanel?: (args: MovePanelArgs) => void;
-	onDeletePanel?: (args: DeletePanelArgs) => void;
-}
-
-function PanelV2({
-	panel,
-	panelId,
-	isVisible,
-	currentLayoutIndex,
-	sections,
-	onMovePanel,
-	onDeletePanel,
-}: Props): JSX.Element {
-	const name = panel?.spec?.display?.name || `Panel ${panelId.slice(0, 6)}`;
-	const description = panel?.spec?.display?.description;
-	const kind = panel?.spec?.plugin?.kind?.replace(/^signoz\//, '') ?? 'unknown';
-	const queryCount = panel?.spec?.queries?.length ?? 0;
-
-	const headerTitle = useMemo(() => {
-		if (!description) {
-			return name;
-		}
-		return (
-			<Tooltip title={description}>
-				<span>{name}</span>
-			</Tooltip>
-		);
-	}, [name, description]);
-
-	return (
-		<div
-			className={styles.panel}
-			data-panel-visible={isVisible ? 'true' : 'false'}
-		>
-			<div className={`${styles.header} panel-drag-handle`}>
-				<div className={styles.headerLeft}>
-					<Typography.Text className={styles.headerTitle}>
-						{headerTitle}
-					</Typography.Text>
-					<Badge className={styles.badge}>{kind}</Badge>
-				</div>
-				{currentLayoutIndex !== undefined && (onMovePanel || onDeletePanel) ? (
-					<PanelActionsMenu
-						panelId={panelId}
-						currentLayoutIndex={currentLayoutIndex}
-						sections={sections ?? []}
-						onMovePanel={onMovePanel}
-						onDeletePanel={onDeletePanel}
-					/>
-				) : (
-					<EllipsisVertical size={14} />
-				)}
-			</div>
-
-			<div className={styles.body}>
-				<div>
-					<div className={styles.bodyKind}>{kind} panel</div>
-					<div>
-						{queryCount} {queryCount === 1 ? 'query' : 'queries'} · chart rendering
-						coming next
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-}
-
-export default PanelV2;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/RenameSectionModal.tsx

@@ -1,64 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Modal } from 'antd';
-import { Input } from '@signozhq/ui/input';
-
-interface Props {
-	open: boolean;
-	initialValue: string;
-	isSaving: boolean;
-	onClose: () => void;
-	onSubmit: (title: string) => void;
-}
-
-function RenameSectionModal({
-	open,
-	initialValue,
-	isSaving,
-	onClose,
-	onSubmit,
-}: Props): JSX.Element {
-	const [value, setValue] = useState<string>(initialValue);
-
-	// Reseed the field each time the modal opens.
-	useEffect(() => {
-		if (open) {
-			setValue(initialValue);
-		}
-	}, [open, initialValue]);
-
-	const submit = (): void => {
-		const trimmed = value.trim();
-		if (trimmed) {
-			onSubmit(trimmed);
-		}
-	};
-
-	return (
-		<Modal
-			open={open}
-			title="Rename section"
-			onCancel={onClose}
-			onOk={submit}
-			okText="Rename"
-			okButtonProps={{ disabled: isSaving || !value.trim() }}
-			destroyOnClose
-		>
-			<Input
-				testId="rename-section-input"
-				autoFocus
-				value={value}
-				maxLength={120}
-				placeholder="Section name"
-				onChange={(e): void => setValue(e.target.value)}
-				onKeyDown={(e): void => {
-					if (e.key === 'Enter') {
-						e.preventDefault();
-						submit();
-					}
-				}}
-			/>
-		</Modal>
-	);
-}
-
-export default RenameSectionModal;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section.module.scss

@@ -1,9 +0,0 @@
-.section {
-	margin-bottom: 12px;
-	border: 1px solid var(--bg-slate-500);
-	border-radius: 4px;
-}
-
-.dragging {
-	opacity: 0.8;
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section.tsx

@@ -1,160 +0,0 @@
-import { useRef, useState } from 'react';
-import { Modal } from 'antd';
-
-import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
-
-import type { DashboardSectionV2 } from '../utils';
-import { useRenameSection } from './hooks/useRenameSection';
-import { useToggleSectionCollapse } from './hooks/useToggleSectionCollapse';
-import { useDeleteSection } from './hooks/useDeleteSection';
-import type { MovePanelArgs } from './hooks/useMovePanelToSection';
-import type { AddPanelArgs } from './hooks/useAddPanelToSection';
-import type { DeletePanelArgs } from './hooks/useDeletePanel';
-import PanelTypeSelectionModalV2 from './PanelTypeSelectionModalV2';
-import RenameSectionModal from './RenameSectionModal';
-import SectionGrid from './SectionGrid';
-import SectionHeader, { type SectionDragHandle } from './SectionHeader';
-import styles from './Section.module.scss';
-
-interface Props {
-	section: DashboardSectionV2;
-	dashboardId: string | undefined;
-	isEditable: boolean;
-	onRefetch: () => void;
-	/** All sections + move handler, for the per-panel "Move to section" action. */
-	sections?: DashboardSectionV2[];
-	onMovePanel?: (args: MovePanelArgs) => void;
-	/** Adds a panel to this section; present only in editable sectioned mode. */
-	onAddPanel?: (args: AddPanelArgs) => void;
-	/** Deletes a panel from this section. */
-	onDeletePanel?: (args: DeletePanelArgs) => void;
-	/** Provided by SortableSection in sectioned mode; absent for untitled/free-flow sections. */
-	dragHandle?: SectionDragHandle;
-}
-
-function Section({
-	section,
-	dashboardId,
-	isEditable,
-	onRefetch,
-	sections,
-	onMovePanel,
-	onAddPanel,
-	onDeletePanel,
-	dragHandle,
-}: Props): JSX.Element {
-	const containerRef = useRef<HTMLDivElement>(null);
-	// Placeholder signal for lazy panel query-loading (consumed in a later PR):
-	// true once the section scrolls into (or near) the viewport.
-	const isVisible = useIntersectionObserver(containerRef, {
-		rootMargin: '200px',
-	});
-
-	const { open, toggle } = useToggleSectionCollapse({
-		layoutIndex: section.layoutIndex,
-		initialOpen: section.open,
-		dashboardId,
-	});
-
-	const [isRenaming, setIsRenaming] = useState(false);
-	const { rename, isSaving } = useRenameSection({
-		layoutIndex: section.layoutIndex,
-		dashboardId,
-		onRefetch,
-	});
-
-	const handleRenameSubmit = async (title: string): Promise<void> => {
-		const ok = await rename(title);
-		if (ok) {
-			setIsRenaming(false);
-		}
-	};
-
-	const [isAddingPanel, setIsAddingPanel] = useState(false);
-	const handleSelectPanelType = (pluginKind: string): void => {
-		onAddPanel?.({ layoutIndex: section.layoutIndex, pluginKind });
-		setIsAddingPanel(false);
-	};
-
-	const { deleteSection } = useDeleteSection({
-		section,
-		dashboardId,
-		onRefetch,
-	});
-	const confirmDeleteSection = (): void => {
-		Modal.confirm({
-			title: `Delete section "${section.title ?? ''}"?`,
-			content: 'Panels in this section will be removed.',
-			okText: 'Delete',
-			okButtonProps: { danger: true },
-			centered: true,
-			onOk: () => deleteSection(),
-		});
-	};
-
-	const grid = (
-		<SectionGrid
-			items={section.items}
-			layoutIndex={section.layoutIndex}
-			dashboardId={dashboardId}
-			isEditable={isEditable}
-			onRefetch={onRefetch}
-			isVisible={isVisible}
-			sections={sections}
-			onMovePanel={onMovePanel}
-			onDeletePanel={onDeletePanel}
-		/>
-	);
-
-	if (!section.title) {
-		// Untitled section — just the grid (no header chrome), but still observed
-		// for the viewport signal.
-		return (
-			<div
-				ref={containerRef}
-				data-testid={`dashboard-section-${section.id}`}
-				data-section-layout-index={section.layoutIndex}
-			>
-				{grid}
-			</div>
-		);
-	}
-
-	return (
-		<div
-			ref={containerRef}
-			className={styles.section}
-			data-testid={`dashboard-section-${section.id}`}
-			data-section-layout-index={section.layoutIndex}
-		>
-			<SectionHeader
-				sectionId={section.id}
-				title={section.title}
-				open={open}
-				onToggle={toggle}
-				repeatVariable={section.repeatVariable}
-				dragHandle={dragHandle}
-				onRename={isEditable ? (): void => setIsRenaming(true) : undefined}
-				onAddPanel={
-					isEditable && onAddPanel ? (): void => setIsAddingPanel(true) : undefined
-				}
-				onDeleteSection={isEditable ? confirmDeleteSection : undefined}
-			/>
-			{open ? grid : null}
-			<RenameSectionModal
-				open={isRenaming}
-				initialValue={section.title}
-				isSaving={isSaving}
-				onClose={(): void => setIsRenaming(false)}
-				onSubmit={handleRenameSubmit}
-			/>
-			<PanelTypeSelectionModalV2
-				open={isAddingPanel}
-				onClose={(): void => setIsAddingPanel(false)}
-				onSelect={handleSelectPanelType}
-			/>
-		</div>
-	);
-}
-
-export default Section;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/SectionActionsMenu.module.scss

@@ -1,16 +0,0 @@
-.trigger {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	padding: 2px;
-	background: transparent;
-	border: none;
-	border-radius: 2px;
-	color: var(--bg-vanilla-400, #8993ae);
-	cursor: pointer;
-
-	&:hover {
-		color: var(--bg-vanilla-100, #fff);
-		background: var(--bg-slate-400, #1d212d);
-	}
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/SectionActionsMenu.tsx

@@ -1,68 +0,0 @@
-import { useMemo } from 'react';
-import { EllipsisVertical, PenLine, Plus, Trash2 } from '@signozhq/icons';
-import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
-import type { MenuItem } from '@signozhq/ui/dropdown-menu';
-
-import styles from './SectionActionsMenu.module.scss';
-
-interface Props {
-	sectionId: string;
-	onAddPanel?: () => void;
-	onRename?: () => void;
-	onDeleteSection?: () => void;
-}
-
-function SectionActionsMenu({
-	sectionId,
-	onAddPanel,
-	onRename,
-	onDeleteSection,
-}: Props): JSX.Element {
-	const items = useMemo<MenuItem[]>(() => {
-		const result: MenuItem[] = [];
-		if (onAddPanel) {
-			result.push({
-				key: 'add-panel',
-				icon: <Plus size={14} />,
-				label: 'Add panel',
-				onClick: onAddPanel,
-			});
-		}
-		if (onRename) {
-			result.push({
-				key: 'rename',
-				icon: <PenLine size={14} />,
-				label: 'Rename section',
-				onClick: onRename,
-			});
-		}
-		if (onDeleteSection) {
-			result.push(
-				{ type: 'divider' },
-				{
-					key: 'delete-section',
-					danger: true,
-					icon: <Trash2 size={14} />,
-					label: 'Delete section',
-					onClick: onDeleteSection,
-				},
-			);
-		}
-		return result;
-	}, [onAddPanel, onRename, onDeleteSection]);
-
-	return (
-		<DropdownMenuSimple menu={{ items }}>
-			<button
-				type="button"
-				className={styles.trigger}
-				aria-label="Section actions"
-				data-testid={`dashboard-section-actions-${sectionId}`}
-			>
-				<EllipsisVertical size={14} />
-			</button>
-		</DropdownMenuSimple>
-	);
-}
-
-export default SectionActionsMenu;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/SectionDragPreview.module.scss

@@ -1,7 +0,0 @@
-.preview {
-	border: 1px solid var(--bg-robin-500);
-	border-radius: 4px;
-	background: var(--bg-ink-400, #0b0c0e);
-	box-shadow: 0 8px 24px rgb(0 0 0 / 40%);
-	cursor: grabbing;
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/SectionDragPreview.tsx

@@ -1,32 +0,0 @@
-import type { DashboardSectionV2 } from '../utils';
-import SectionHeader from './SectionHeader';
-import styles from './SectionDragPreview.module.scss';
-
-interface Props {
-	section: DashboardSectionV2;
-}
-
-/**
- * Lightweight preview rendered inside the DragOverlay while a section is being
- * dragged. Deliberately header-only (no react-grid-layout) so the overlay is
- * cheap and never triggers RGL width re-measurement.
- */
-function SectionDragPreview({ section }: Props): JSX.Element {
-	const panelCount = section.items.length;
-	const title = `${section.title ?? ''} · ${panelCount} ${
-		panelCount === 1 ? 'panel' : 'panels'
-	}`;
-
-	return (
-		<div className={styles.preview}>
-			<SectionHeader
-				sectionId={`${section.id}-preview`}
-				title={title}
-				open={false}
-				onToggle={(): void => undefined}
-			/>
-		</div>
-	);
-}
-
-export default SectionDragPreview;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/SectionGrid.module.scss

@@ -1,12 +0,0 @@
-.grid {
-	// Override react-grid-layout's default red drag/resize placeholder with the
-	// SigNoz brand blue.
-	:global(.react-grid-item.react-grid-placeholder) {
-		background: var(--bg-robin-500);
-		opacity: 0.2;
-		border-radius: 4px;
-		transition-duration: 100ms;
-		z-index: 2;
-		user-select: none;
-	}
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/SectionGrid.tsx

@@ -1,129 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import GridLayout, {
-	type ItemCallback,
-	WidthProvider,
-	type Layout,
-} from 'react-grid-layout';
-
-import type { DashboardSectionV2 } from '../utils';
-import { usePersistLayout } from './hooks/usePersistLayout';
-import type { MovePanelArgs } from './hooks/useMovePanelToSection';
-import type { DeletePanelArgs } from './hooks/useDeletePanel';
-import PanelV2 from './PanelV2';
-import styles from './SectionGrid.module.scss';
-
-const ResponsiveGridLayout = WidthProvider(GridLayout);
-
-interface Props {
-	items: DashboardSectionV2['items'];
-	layoutIndex: number;
-	dashboardId: string | undefined;
-	isEditable: boolean;
-	onRefetch: () => void;
-	/** Forwarded to panels — true when the parent section is in the viewport. */
-	isVisible?: boolean;
-	/** All sections + move handler — present only in editable sectioned mode (panel "Move to section"). */
-	sections?: DashboardSectionV2[];
-	onMovePanel?: (args: MovePanelArgs) => void;
-	onDeletePanel?: (args: DeletePanelArgs) => void;
-}
-
-function SectionGrid({
-	items,
-	layoutIndex,
-	dashboardId,
-	isEditable,
-	onRefetch,
-	isVisible,
-	sections,
-	onMovePanel,
-	onDeletePanel,
-}: Props): JSX.Element {
-	const rglLayout = useMemo<Layout[]>(
-		() =>
-			items.map((item) => ({
-				i: item.id,
-				x: item.x,
-				y: item.y,
-				w: item.width,
-				h: item.height,
-			})),
-		[items],
-	);
-
-	const { handleLayoutChange } = usePersistLayout({
-		layoutIndex,
-		items,
-		dashboardId,
-		onRefetch,
-	});
-
-	// On drop, if the pointer is released over a different section, move the
-	// panel there instead of repositioning it within this section. RGL clamps
-	// the dragged item visually to this grid, but the pointer is free, so we
-	// hit-test the release point against section containers.
-	const handleDragStop = useCallback<ItemCallback>(
-		// eslint-disable-next-line max-params -- signature fixed by react-grid-layout's ItemCallback
-		(layout, oldItem, _newItem, _placeholder, event) => {
-			// Deterministically hit-test the release point against section
-			// containers (rect-based, so the dragged item on top doesn't interfere).
-			const targetEl = Array.from(
-				document.querySelectorAll<HTMLElement>('[data-section-layout-index]'),
-			).find((el) => {
-				const r = el.getBoundingClientRect();
-				return (
-					event.clientX >= r.left &&
-					event.clientX <= r.right &&
-					event.clientY >= r.top &&
-					event.clientY <= r.bottom
-				);
-			});
-			const attr = targetEl?.getAttribute('data-section-layout-index');
-			const targetIndex = attr != null ? Number(attr) : null;
-
-			if (onMovePanel && targetIndex != null && targetIndex !== layoutIndex) {
-				onMovePanel({
-					panelId: oldItem.i,
-					fromLayoutIndex: layoutIndex,
-					toLayoutIndex: targetIndex,
-				});
-				return;
-			}
-			handleLayoutChange(layout);
-		},
-		[onMovePanel, layoutIndex, handleLayoutChange],
-	);
-
-	return (
-		<ResponsiveGridLayout
-			className={styles.grid}
-			cols={12}
-			rowHeight={45}
-			autoSize
-			useCSSTransforms
-			layout={rglLayout}
-			draggableHandle=".panel-drag-handle"
-			isDraggable={isEditable}
-			isResizable={isEditable}
-			onDragStop={handleDragStop}
-			onResizeStop={handleLayoutChange}
-			margin={[8, 8]}
-		>
-			{items.map((item) => (
-				<div key={item.id}>
-					<PanelV2
-						panel={item.panel}
-						panelId={item.id}
-						isVisible={isVisible}
-						currentLayoutIndex={layoutIndex}
-						sections={isEditable ? sections : undefined}
-						onMovePanel={isEditable ? onMovePanel : undefined}
-						onDeletePanel={isEditable ? onDeletePanel : undefined}
-					/>
-				</div>
-			))}
-		</ResponsiveGridLayout>
-	);
-}
-
-export default SectionGrid;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/SectionHeader.module.scss

@@ -1,52 +0,0 @@
-.header {
-	display: flex;
-	align-items: center;
-	gap: 4px;
-	padding: 8px 12px;
-
-	&.headerOpen {
-		border-bottom: 1px solid var(--bg-slate-500);
-	}
-}
-
-.dragHandle {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	padding: 0;
-	background: transparent;
-	border: none;
-	color: var(--bg-vanilla-400, #8993ae);
-	cursor: grab;
-
-	&:active {
-		cursor: grabbing;
-	}
-}
-
-.toggle {
-	flex: 1;
-	display: flex;
-	align-items: center;
-	justify-content: flex-start;
-	gap: 4px;
-	padding: 0;
-	background: transparent;
-	border: none;
-	color: inherit;
-	text-align: left;
-	cursor: pointer;
-	min-width: 0;
-}
-
-.title {
-	margin-left: 4px;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.repeatBadge {
-	margin-left: 8px;
-	opacity: 0.6;
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/SectionHeader.tsx

@@ -1,80 +0,0 @@
-import type { DraggableAttributes } from '@dnd-kit/core';
-import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
-import { ChevronDown, ChevronRight, GripVertical } from '@signozhq/icons';
-import { Typography } from '@signozhq/ui/typography';
-
-import SectionActionsMenu from './SectionActionsMenu';
-import styles from './SectionHeader.module.scss';
-
-export interface SectionDragHandle {
-	attributes: DraggableAttributes;
-	listeners: SyntheticListenerMap | undefined;
-	setActivatorNodeRef: (element: HTMLElement | null) => void;
-}
-
-interface Props {
-	sectionId: string;
-	title: string;
-	open: boolean;
-	onToggle: () => void;
-	repeatVariable?: string;
-	dragHandle?: SectionDragHandle;
-	onRename?: () => void;
-	onAddPanel?: () => void;
-	onDeleteSection?: () => void;
-}
-
-function SectionHeader({
-	sectionId,
-	title,
-	open,
-	onToggle,
-	repeatVariable,
-	dragHandle,
-	onRename,
-	onAddPanel,
-	onDeleteSection,
-}: Props): JSX.Element {
-	const hasActions = !!(onAddPanel || onRename || onDeleteSection);
-	return (
-		<div className={`${styles.header} ${open ? styles.headerOpen : ''}`}>
-			{dragHandle ? (
-				<button
-					type="button"
-					className={styles.dragHandle}
-					ref={dragHandle.setActivatorNodeRef}
-					aria-label="Drag to reorder section"
-					data-testid={`dashboard-section-drag-${sectionId}`}
-					{...dragHandle.attributes}
-					{...dragHandle.listeners}
-				>
-					<GripVertical size={14} />
-				</button>
-			) : null}
-			<button
-				type="button"
-				className={styles.toggle}
-				onClick={onToggle}
-				data-testid={`dashboard-section-toggle-${sectionId}`}
-			>
-				{open ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
-				<Typography.Text className={styles.title}>{title}</Typography.Text>
-				{repeatVariable ? (
-					<Typography.Text className={styles.repeatBadge}>
-						(repeats per ${repeatVariable})
-					</Typography.Text>
-				) : null}
-			</button>
-			{hasActions ? (
-				<SectionActionsMenu
-					sectionId={sectionId}
-					onAddPanel={onAddPanel}
-					onRename={onRename}
-					onDeleteSection={onDeleteSection}
-				/>
-			) : null}
-		</div>
-	);
-}
-
-export default SectionHeader;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/SectionList.tsx

@@ -1,124 +0,0 @@
-import { useMemo } from 'react';
-import { closestCenter, DndContext, DragOverlay } from '@dnd-kit/core';
-import {
-	restrictToParentElement,
-	restrictToVerticalAxis,
-} from '@dnd-kit/modifiers';
-import {
-	SortableContext,
-	verticalListSortingStrategy,
-} from '@dnd-kit/sortable';
-import type { DashboardtypesLayoutDTO } from 'api/generated/services/sigNoz.schemas';
-
-import type { DashboardSectionV2 } from '../utils';
-import { useSectionDragReorder } from './hooks/useSectionDragReorder';
-import { useMovePanelToSection } from './hooks/useMovePanelToSection';
-import { useAddPanelToSection } from './hooks/useAddPanelToSection';
-import { useDeletePanel } from './hooks/useDeletePanel';
-import Section from './Section';
-import SectionDragPreview from './SectionDragPreview';
-import SortableSection from './SortableSection';
-
-interface Props {
-	sections: DashboardSectionV2[];
-	layouts: DashboardtypesLayoutDTO[] | undefined | null;
-	dashboardId: string | undefined;
-	isEditable: boolean;
-	onRefetch: () => void;
-}
-
-function SectionList({
-	sections,
-	layouts,
-	dashboardId,
-	isEditable,
-	onRefetch,
-}: Props): JSX.Element {
-	const {
-		sensors,
-		orderedSections,
-		activeSection,
-		onDragStart,
-		onDragEnd,
-		onDragCancel,
-	} = useSectionDragReorder({ sections, layouts, dashboardId, onRefetch });
-
-	const onMovePanel = useMovePanelToSection({
-		sections,
-		dashboardId,
-		onRefetch,
-	});
-	const onAddPanel = useAddPanelToSection({ sections, dashboardId, onRefetch });
-	const onDeletePanel = useDeletePanel({ sections, dashboardId, onRefetch });
-
-	// Only titled sections participate in reordering; untitled (free-flow)
-	// blocks render in place without a drag handle.
-	const sortableIds = useMemo(
-		() => orderedSections.filter((s) => s.title).map((s) => s.id),
-		[orderedSections],
-	);
-
-	if (!isEditable) {
-		return (
-			<>
-				{sections.map((section) => (
-					<Section
-						key={section.id}
-						section={section}
-						dashboardId={dashboardId}
-						isEditable={isEditable}
-						onRefetch={onRefetch}
-					/>
-				))}
-			</>
-		);
-	}
-
-	return (
-		<DndContext
-			sensors={sensors}
-			collisionDetection={closestCenter}
-			modifiers={[restrictToVerticalAxis, restrictToParentElement]}
-			onDragStart={onDragStart}
-			onDragEnd={onDragEnd}
-			onDragCancel={onDragCancel}
-		>
-			<SortableContext items={sortableIds} strategy={verticalListSortingStrategy}>
-				{orderedSections.map((section) =>
-					section.title ? (
-						<SortableSection
-							key={section.id}
-							section={section}
-							dashboardId={dashboardId}
-							isEditable={isEditable}
-							onRefetch={onRefetch}
-							sections={sections}
-							onMovePanel={onMovePanel}
-							onAddPanel={onAddPanel}
-							onDeletePanel={onDeletePanel}
-						/>
-					) : (
-						<Section
-							key={section.id}
-							section={section}
-							dashboardId={dashboardId}
-							isEditable={isEditable}
-							onRefetch={onRefetch}
-							sections={sections}
-							onMovePanel={onMovePanel}
-							onAddPanel={onAddPanel}
-							onDeletePanel={onDeletePanel}
-						/>
-					),
-				)}
-			</SortableContext>
-			{/* dropAnimation disabled: optimistic reorder already places the section,
-			    so animating the overlay back would cause a visible snap/shake. */}
-			<DragOverlay dropAnimation={null}>
-				{activeSection ? <SectionDragPreview section={activeSection} /> : null}
-			</DragOverlay>
-		</DndContext>
-	);
-}
-
-export default SectionList;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/SortableSection.tsx

@@ -1,68 +0,0 @@
-import { useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-
-import type { DashboardSectionV2 } from '../utils';
-import type { MovePanelArgs } from './hooks/useMovePanelToSection';
-import type { AddPanelArgs } from './hooks/useAddPanelToSection';
-import type { DeletePanelArgs } from './hooks/useDeletePanel';
-import Section from './Section';
-
-interface Props {
-	section: DashboardSectionV2;
-	dashboardId: string | undefined;
-	isEditable: boolean;
-	onRefetch: () => void;
-	sections: DashboardSectionV2[];
-	onMovePanel: (args: MovePanelArgs) => void;
-	onAddPanel: (args: AddPanelArgs) => void;
-	onDeletePanel: (args: DeletePanelArgs) => void;
-}
-
-function SortableSection({
-	section,
-	dashboardId,
-	isEditable,
-	onRefetch,
-	sections,
-	onMovePanel,
-	onAddPanel,
-	onDeletePanel,
-}: Props): JSX.Element {
-	const {
-		attributes,
-		listeners,
-		setNodeRef,
-		setActivatorNodeRef,
-		transform,
-		transition,
-		isDragging,
-	} = useSortable({ id: section.id });
-
-	// dnd-kit drives the drag transform per-frame, so this must be an inline
-	// style — there is no static-stylesheet equivalent for a live transform.
-	// While dragging, the original is hidden (the DragOverlay renders the moving
-	// preview); keeping it in place preserves the gap and lets siblings animate.
-	const style: React.CSSProperties = {
-		transform: CSS.Transform.toString(transform),
-		transition,
-		opacity: isDragging ? 0 : undefined,
-	};
-
-	return (
-		<div ref={setNodeRef} style={style}>
-			<Section
-				section={section}
-				dashboardId={dashboardId}
-				isEditable={isEditable}
-				onRefetch={onRefetch}
-				sections={sections}
-				onMovePanel={onMovePanel}
-				onAddPanel={onAddPanel}
-				onDeletePanel={onDeletePanel}
-				dragHandle={{ attributes, listeners, setActivatorNodeRef }}
-			/>
-		</div>
-	);
-}
-
-export default SortableSection;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/hooks/useAddPanelToSection.ts

@@ -1,77 +0,0 @@
-import { useCallback } from 'react';
-import { v4 as uuid } from 'uuid';
-
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import {
-	addPanelToSectionOps,
-	createDefaultPanel,
-	panelRef,
-} from '../../patchOps';
-import type { DashboardSectionV2 } from '../../utils';
-
-interface Params {
-	sections: DashboardSectionV2[];
-	dashboardId: string | undefined;
-	onRefetch: () => void;
-}
-
-export interface AddPanelArgs {
-	layoutIndex: number;
-	pluginKind: string;
-}
-
-/**
- * Creates a new panel and places its item ref at the bottom of the target
- * section, as one atomic patch. Structure-only: the panel is a valid minimal
- * placeholder (its query is filled in once the panel editor lands).
- */
-export function useAddPanelToSection({
-	sections,
-	dashboardId,
-	onRefetch,
-}: Params): (args: AddPanelArgs) => Promise<void> {
-	const { showErrorModal } = useErrorModal();
-
-	return useCallback(
-		async ({ layoutIndex, pluginKind }: AddPanelArgs): Promise<void> => {
-			if (!dashboardId) {
-				return;
-			}
-			const target = sections.find((s) => s.layoutIndex === layoutIndex);
-			if (!target) {
-				return;
-			}
-
-			const panelId = uuid();
-			const nextY = target.items.reduce(
-				(max, i) => Math.max(max, i.y + i.height),
-				0,
-			);
-
-			try {
-				await patchDashboardV2(
-					{ id: dashboardId },
-					addPanelToSectionOps({
-						panelId,
-						panel: createDefaultPanel(pluginKind),
-						layoutIndex,
-						item: {
-							x: 0,
-							y: nextY,
-							width: 6,
-							height: 6,
-							content: { $ref: panelRef(panelId) },
-						},
-					}),
-				);
-				onRefetch();
-			} catch (error) {
-				showErrorModal(error as APIError);
-			}
-		},
-		[sections, dashboardId, onRefetch, showErrorModal],
-	);
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/hooks/useAddSection.ts

@@ -1,58 +0,0 @@
-import { useCallback, useState } from 'react';
-
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import type { DashboardtypesLayoutDTO } from 'api/generated/services/sigNoz.schemas';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import { addSectionOp, newGridLayout, reorderLayoutsOp } from '../../patchOps';
-
-interface Params {
-	layouts: DashboardtypesLayoutDTO[] | undefined | null;
-	dashboardId: string | undefined;
-	onRefetch: () => void;
-}
-
-interface Result {
-	addSection: (title: string) => Promise<void>;
-	isSaving: boolean;
-}
-
-/**
- * Appends an empty titled section. When the dashboard has no layouts yet, the
- * layouts array is created via a `replace` (an `add` to a missing/empty array
- * pointer is unreliable); otherwise a new Grid is appended.
- */
-export function useAddSection({
-	layouts,
-	dashboardId,
-	onRefetch,
-}: Params): Result {
-	const [isSaving, setIsSaving] = useState(false);
-	const { showErrorModal } = useErrorModal();
-
-	const addSection = useCallback(
-		async (title: string): Promise<void> => {
-			const trimmed = title.trim();
-			if (!dashboardId || !trimmed) {
-				return;
-			}
-			const op =
-				!layouts || layouts.length === 0
-					? reorderLayoutsOp([newGridLayout(trimmed)])
-					: addSectionOp(trimmed);
-			try {
-				setIsSaving(true);
-				await patchDashboardV2({ id: dashboardId }, [op]);
-				onRefetch();
-			} catch (error) {
-				showErrorModal(error as APIError);
-			} finally {
-				setIsSaving(false);
-			}
-		},
-		[layouts, dashboardId, onRefetch, showErrorModal],
-	);
-
-	return { addSection, isSaving };
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/hooks/useDeletePanel.ts

@@ -1,55 +0,0 @@
-import { useCallback } from 'react';
-
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import { removePanelOp, replaceSectionItemsOp } from '../../patchOps';
-import type { DashboardSectionV2 } from '../../utils';
-
-interface Params {
-	sections: DashboardSectionV2[];
-	dashboardId: string | undefined;
-	onRefetch: () => void;
-}
-
-export interface DeletePanelArgs {
-	panelId: string;
-	layoutIndex: number;
-}
-
-/**
- * Removes a panel: drops its item ref from the section's items and deletes the
- * panel from `spec.panels`, as one atomic patch.
- */
-export function useDeletePanel({
-	sections,
-	dashboardId,
-	onRefetch,
-}: Params): (args: DeletePanelArgs) => Promise<void> {
-	const { showErrorModal } = useErrorModal();
-
-	return useCallback(
-		async ({ panelId, layoutIndex }: DeletePanelArgs): Promise<void> => {
-			if (!dashboardId) {
-				return;
-			}
-			const section = sections.find((s) => s.layoutIndex === layoutIndex);
-			if (!section) {
-				return;
-			}
-
-			const nextItems = section.items.filter((i) => i.id !== panelId);
-			try {
-				await patchDashboardV2({ id: dashboardId }, [
-					replaceSectionItemsOp(layoutIndex, nextItems),
-					removePanelOp(panelId),
-				]);
-				onRefetch();
-			} catch (error) {
-				showErrorModal(error as APIError);
-			}
-		},
-		[sections, dashboardId, onRefetch, showErrorModal],
-	);
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/hooks/useDeleteSection.ts

@@ -1,54 +0,0 @@
-import { useCallback, useState } from 'react';
-
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import type { DashboardtypesJSONPatchOperationDTO } from 'api/generated/services/sigNoz.schemas';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import { removePanelOp, removeSectionOp } from '../../patchOps';
-import type { DashboardSectionV2 } from '../../utils';
-
-interface Params {
-	section: DashboardSectionV2;
-	dashboardId: string | undefined;
-	onRefetch: () => void;
-}
-
-interface Result {
-	deleteSection: () => Promise<void>;
-	isSaving: boolean;
-}
-
-/**
- * Deletes a section: removes its Grid layout and deletes every panel it
- * contained from `spec.panels` (orphan cleanup), as one atomic patch.
- */
-export function useDeleteSection({
-	section,
-	dashboardId,
-	onRefetch,
-}: Params): Result {
-	const [isSaving, setIsSaving] = useState(false);
-	const { showErrorModal } = useErrorModal();
-
-	const deleteSection = useCallback(async (): Promise<void> => {
-		if (!dashboardId) {
-			return;
-		}
-		const ops: DashboardtypesJSONPatchOperationDTO[] = section.items.map((i) =>
-			removePanelOp(i.id),
-		);
-		ops.push(removeSectionOp(section.layoutIndex));
-		try {
-			setIsSaving(true);
-			await patchDashboardV2({ id: dashboardId }, ops);
-			onRefetch();
-		} catch (error) {
-			showErrorModal(error as APIError);
-		} finally {
-			setIsSaving(false);
-		}
-	}, [section, dashboardId, onRefetch, showErrorModal]);
-
-	return { deleteSection, isSaving };
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/hooks/useFirstSectionMigration.ts

@@ -1,67 +0,0 @@
-import { useCallback, useState } from 'react';
-
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import type { DashboardtypesJSONPatchOperationDTO } from 'api/generated/services/sigNoz.schemas';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import { addSectionOp, titleUntitledSectionOp } from '../../patchOps';
-import type { DashboardSectionV2 } from '../../utils';
-
-interface Params {
-	sections: DashboardSectionV2[];
-	dashboardId: string | undefined;
-	onRefetch: () => void;
-}
-
-interface Result {
-	migrate: (newSectionTitle: string) => Promise<void>;
-	isSaving: boolean;
-}
-
-/**
- * Converts a free-flowing dashboard into a sectioned one: every existing
- * untitled layout that holds panels is titled in place ("Section 1", "Section
- * 2", …), then the brand-new section the user asked for is appended — all in one
- * atomic patch. Used once the user confirms the migration prompt.
- */
-export function useFirstSectionMigration({
-	sections,
-	dashboardId,
-	onRefetch,
-}: Params): Result {
-	const [isSaving, setIsSaving] = useState(false);
-	const { showErrorModal } = useErrorModal();
-
-	const migrate = useCallback(
-		async (newSectionTitle: string): Promise<void> => {
-			const trimmed = newSectionTitle.trim();
-			if (!dashboardId || !trimmed) {
-				return;
-			}
-
-			const ops: DashboardtypesJSONPatchOperationDTO[] = [];
-			let counter = 1;
-			sections.forEach((s) => {
-				if (!s.title && s.items.length > 0) {
-					ops.push(titleUntitledSectionOp(s.layoutIndex, `Section ${counter}`));
-					counter += 1;
-				}
-			});
-			ops.push(addSectionOp(trimmed));
-
-			try {
-				setIsSaving(true);
-				await patchDashboardV2({ id: dashboardId }, ops);
-				onRefetch();
-			} catch (error) {
-				showErrorModal(error as APIError);
-			} finally {
-				setIsSaving(false);
-			}
-		},
-		[sections, dashboardId, onRefetch, showErrorModal],
-	);
-
-	return { migrate, isSaving };
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/hooks/useMovePanelToSection.ts

@@ -1,80 +0,0 @@
-import { useCallback } from 'react';
-
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import { movePanelBetweenSectionsOps } from '../../patchOps';
-import type { DashboardSectionV2 } from '../../utils';
-
-export interface MovePanelArgs {
-	panelId: string;
-	fromLayoutIndex: number;
-	toLayoutIndex: number;
-}
-
-interface Params {
-	sections: DashboardSectionV2[];
-	dashboardId: string | undefined;
-	onRefetch: () => void;
-}
-
-/**
- * Relocates a panel's item ref from one section to another. The panel itself
- * stays in `spec.panels`; only the grid item moves, dropped into a free row at
- * the bottom of the target section. Persisted as one atomic patch.
- */
-export function useMovePanelToSection({
-	sections,
-	dashboardId,
-	onRefetch,
-}: Params): (args: MovePanelArgs) => Promise<void> {
-	const { showErrorModal } = useErrorModal();
-
-	return useCallback(
-		async ({
-			panelId,
-			fromLayoutIndex,
-			toLayoutIndex,
-		}: MovePanelArgs): Promise<void> => {
-			if (!dashboardId || fromLayoutIndex === toLayoutIndex) {
-				return;
-			}
-
-			const source = sections.find((s) => s.layoutIndex === fromLayoutIndex);
-			const target = sections.find((s) => s.layoutIndex === toLayoutIndex);
-			if (!source || !target) {
-				return;
-			}
-
-			const moved = source.items.find((i) => i.id === panelId);
-			if (!moved) {
-				return;
-			}
-
-			const sourceItems = source.items.filter((i) => i.id !== panelId);
-			// Place at a fresh row at the bottom of the target section.
-			const nextY = target.items.reduce(
-				(max, i) => Math.max(max, i.y + i.height),
-				0,
-			);
-			const targetItems = [...target.items, { ...moved, x: 0, y: nextY }];
-
-			try {
-				await patchDashboardV2(
-					{ id: dashboardId },
-					movePanelBetweenSectionsOps({
-						sourceIndex: fromLayoutIndex,
-						sourceItems,
-						targetIndex: toLayoutIndex,
-						targetItems,
-					}),
-				);
-				onRefetch();
-			} catch (error) {
-				showErrorModal(error as APIError);
-			}
-		},
-		[sections, dashboardId, onRefetch, showErrorModal],
-	);
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/hooks/usePersistLayout.ts

@@ -1,104 +0,0 @@
-import { useCallback, useState } from 'react';
-import type { Layout } from 'react-grid-layout';
-
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import { replaceSectionItemsOp } from '../../patchOps';
-import type { GridItemV2 } from '../../utils';
-
-interface Params {
-	layoutIndex: number;
-	items: GridItemV2[];
-	dashboardId: string | undefined;
-	onRefetch: () => void;
-}
-
-interface Result {
-	handleLayoutChange: (rglLayout: Layout[]) => void;
-	isSaving: boolean;
-}
-
-/** Maps an RGL layout back onto the section's grid items, preserving panel refs. */
-function mergeRglLayout(
-	rglLayout: Layout[],
-	items: GridItemV2[],
-): GridItemV2[] {
-	const byId = new Map(items.map((item) => [item.id, item]));
-	return rglLayout
-		.map((entry) => {
-			const existing = byId.get(entry.i);
-			if (!existing) {
-				return null;
-			}
-			return {
-				...existing,
-				x: entry.x,
-				y: entry.y,
-				width: entry.w,
-				height: entry.h,
-			};
-		})
-		.filter((item): item is GridItemV2 => item !== null);
-}
-
-function hasGeometryChanged(next: GridItemV2[], prev: GridItemV2[]): boolean {
-	if (next.length !== prev.length) {
-		return true;
-	}
-	const prevById = new Map(prev.map((item) => [item.id, item]));
-	return next.some((item) => {
-		const before = prevById.get(item.id);
-		if (!before) {
-			return true;
-		}
-		return (
-			before.x !== item.x ||
-			before.y !== item.y ||
-			before.width !== item.width ||
-			before.height !== item.height
-		);
-	});
-}
-
-/**
- * Persists panel geometry within a single section. Call the returned handler
- * from RGL's `onDragStop`/`onResizeStop` (stop events only — not continuous
- * `onLayoutChange`) to limit network churn.
- */
-export function usePersistLayout({
-	layoutIndex,
-	items,
-	dashboardId,
-	onRefetch,
-}: Params): Result {
-	const [isSaving, setIsSaving] = useState(false);
-	const { showErrorModal } = useErrorModal();
-
-	const handleLayoutChange = useCallback(
-		async (rglLayout: Layout[]): Promise<void> => {
-			if (!dashboardId) {
-				return;
-			}
-			const nextItems = mergeRglLayout(rglLayout, items);
-			if (!hasGeometryChanged(nextItems, items)) {
-				return;
-			}
-			try {
-				setIsSaving(true);
-				await patchDashboardV2({ id: dashboardId }, [
-					replaceSectionItemsOp(layoutIndex, nextItems),
-				]);
-				onRefetch();
-			} catch (error) {
-				showErrorModal(error as APIError);
-			} finally {
-				setIsSaving(false);
-			}
-		},
-		[dashboardId, items, layoutIndex, onRefetch, showErrorModal],
-	);
-
-	return { handleLayoutChange, isSaving };
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/hooks/useRenameSection.ts

@@ -1,53 +0,0 @@
-import { useCallback, useState } from 'react';
-
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import { renameSectionOp } from '../../patchOps';
-
-interface Params {
-	layoutIndex: number;
-	dashboardId: string | undefined;
-	onRefetch: () => void;
-}
-
-interface Result {
-	rename: (title: string) => Promise<boolean>;
-	isSaving: boolean;
-}
-
-/** Renames a section's title via `replace /spec/layouts/<i>/spec/display/title`. */
-export function useRenameSection({
-	layoutIndex,
-	dashboardId,
-	onRefetch,
-}: Params): Result {
-	const [isSaving, setIsSaving] = useState(false);
-	const { showErrorModal } = useErrorModal();
-
-	const rename = useCallback(
-		async (title: string): Promise<boolean> => {
-			const trimmed = title.trim();
-			if (!dashboardId || !trimmed) {
-				return false;
-			}
-			try {
-				setIsSaving(true);
-				await patchDashboardV2({ id: dashboardId }, [
-					renameSectionOp(layoutIndex, trimmed),
-				]);
-				onRefetch();
-				return true;
-			} catch (error) {
-				showErrorModal(error as APIError);
-				return false;
-			} finally {
-				setIsSaving(false);
-			}
-		},
-		[dashboardId, layoutIndex, onRefetch, showErrorModal],
-	);
-
-	return { rename, isSaving };
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/hooks/useSectionDragReorder.ts

@@ -1,129 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import {
-	type DragEndEvent,
-	type DragStartEvent,
-	KeyboardSensor,
-	PointerSensor,
-	useSensor,
-	useSensors,
-} from '@dnd-kit/core';
-import { arrayMove, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
-
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import type { DashboardtypesLayoutDTO } from 'api/generated/services/sigNoz.schemas';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import { reorderLayoutsOp } from '../../patchOps';
-import type { DashboardSectionV2 } from '../../utils';
-
-interface Params {
-	sections: DashboardSectionV2[];
-	layouts: DashboardtypesLayoutDTO[] | undefined | null;
-	dashboardId: string | undefined;
-	onRefetch: () => void;
-}
-
-interface Result {
-	sensors: ReturnType<typeof useSensors>;
-	/** Display order — optimistically reordered on drop so the UI doesn't wait on refetch. */
-	orderedSections: DashboardSectionV2[];
-	/** The section currently being dragged (for the DragOverlay preview), or null. */
-	activeSection: DashboardSectionV2 | null;
-	onDragStart: (event: DragStartEvent) => void;
-	onDragEnd: (event: DragEndEvent) => void;
-	onDragCancel: () => void;
-}
-
-/**
- * Owns section-reorder drag state. Reorders happen optimistically in local
- * state (keyed by stable section id) and persist via a single
- * `replace /spec/layouts` patch; the optimistic order is cleared once fresh
- * server data arrives. Each section maps 1:1 to a Grid layout via `layoutIndex`,
- * so the new layouts array is rebuilt by mapping the reordered sections back.
- */
-export function useSectionDragReorder({
-	sections,
-	layouts,
-	dashboardId,
-	onRefetch,
-}: Params): Result {
-	const [activeId, setActiveId] = useState<string | null>(null);
-	const [localOrderIds, setLocalOrderIds] = useState<string[] | null>(null);
-	const { showErrorModal } = useErrorModal();
-
-	const sensors = useSensors(
-		useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
-		useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
-	);
-
-	// Server data is the source of truth — drop optimistic order whenever it changes.
-	useEffect(() => {
-		setLocalOrderIds(null);
-	}, [sections]);
-
-	const orderedSections = useMemo<DashboardSectionV2[]>(() => {
-		if (!localOrderIds) {
-			return sections;
-		}
-		const byId = new Map(sections.map((s) => [s.id, s]));
-		const ordered = localOrderIds
-			.map((id) => byId.get(id))
-			.filter((s): s is DashboardSectionV2 => s !== undefined);
-		return ordered.length === sections.length ? ordered : sections;
-	}, [sections, localOrderIds]);
-
-	const onDragStart = useCallback((event: DragStartEvent): void => {
-		setActiveId(String(event.active.id));
-	}, []);
-
-	const onDragCancel = useCallback((): void => {
-		setActiveId(null);
-	}, []);
-
-	const onDragEnd = useCallback(
-		async (event: DragEndEvent): Promise<void> => {
-			setActiveId(null);
-			const { active, over } = event;
-			if (!over || active.id === over.id || !dashboardId || !layouts) {
-				return;
-			}
-
-			const oldIndex = orderedSections.findIndex((s) => s.id === active.id);
-			const newIndex = orderedSections.findIndex((s) => s.id === over.id);
-			if (oldIndex < 0 || newIndex < 0) {
-				return;
-			}
-
-			const newOrdered = arrayMove(orderedSections, oldIndex, newIndex);
-			setLocalOrderIds(newOrdered.map((s) => s.id));
-
-			const newLayouts = newOrdered
-				.map((s) => layouts[s.layoutIndex])
-				.filter((l): l is DashboardtypesLayoutDTO => l !== undefined);
-
-			try {
-				await patchDashboardV2({ id: dashboardId }, [reorderLayoutsOp(newLayouts)]);
-				onRefetch();
-			} catch (error) {
-				setLocalOrderIds(null); // revert optimistic order on failure
-				showErrorModal(error as APIError);
-			}
-		},
-		[orderedSections, layouts, dashboardId, onRefetch, showErrorModal],
-	);
-
-	const activeSection = useMemo(
-		() => orderedSections.find((s) => s.id === activeId) ?? null,
-		[orderedSections, activeId],
-	);
-
-	return {
-		sensors,
-		orderedSections,
-		activeSection,
-		onDragStart,
-		onDragEnd,
-		onDragCancel,
-	};
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/hooks/useToggleSectionCollapse.ts

@@ -1,55 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import { setSectionCollapseOp } from '../../patchOps';
-
-interface Params {
-	layoutIndex: number;
-	initialOpen: boolean;
-	dashboardId: string | undefined;
-}
-
-interface Result {
-	open: boolean;
-	toggle: () => void;
-}
-
-/**
- * Owns a section's expand/collapse state. The toggle is optimistic (snappy UI)
- * and persists to `spec.layouts[i].spec.display.collapse.open` in the
- * background — no refetch, since collapse is a lightweight UI preference and a
- * full dashboard refetch would flicker. Reverts on patch failure.
- */
-export function useToggleSectionCollapse({
-	layoutIndex,
-	initialOpen,
-	dashboardId,
-}: Params): Result {
-	const [open, setOpen] = useState<boolean>(initialOpen);
-	const { showErrorModal } = useErrorModal();
-
-	// Reconcile with server state when it changes (e.g. after a refetch).
-	useEffect(() => {
-		setOpen(initialOpen);
-	}, [initialOpen]);
-
-	const toggle = useCallback((): void => {
-		setOpen((prev) => {
-			const next = !prev;
-			if (dashboardId) {
-				patchDashboardV2({ id: dashboardId }, [
-					setSectionCollapseOp(layoutIndex, next),
-				]).catch((error) => {
-					setOpen(prev); // revert on failure
-					showErrorModal(error as APIError);
-				});
-			}
-			return next;
-		});
-	}, [dashboardId, layoutIndex, showErrorModal]);
-
-	return { open, toggle };
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/index.tsx

@@ -1,104 +0,0 @@
-import { useMemo } from 'react';
-
-import { Empty } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import type {
-	DashboardtypesLayoutDTO,
-	DashboardtypesPanelDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-import { layoutsToSections } from '../utils';
-import AddSectionControl from './AddSectionControl';
-import Section from './Section';
-import SectionList from './SectionList';
-import styles from './GridCardLayoutV2.module.scss';
-
-import 'react-grid-layout/css/styles.css';
-import 'react-resizable/css/styles.css';
-
-interface Props {
-	layouts: DashboardtypesLayoutDTO[] | undefined | null;
-	panels: Record<string, DashboardtypesPanelDTO | undefined> | undefined;
-	dashboardId: string | undefined;
-	isEditable: boolean;
-	onRefetch: () => void;
-}
-
-function GridCardLayoutV2({
-	layouts,
-	panels,
-	dashboardId,
-	isEditable,
-	onRefetch,
-}: Props): JSX.Element {
-	const sections = useMemo(
-		() => layoutsToSections(layouts, panels),
-		[layouts, panels],
-	);
-
-	const isEmpty =
-		sections.length === 0 || sections.every((s) => s.items.length === 0);
-
-	// Sectioned mode = at least one titled layout. Sections then become a
-	// draggable, reorderable list; otherwise the dashboard is a single
-	// free-flowing grid with no section chrome or reordering.
-	const isSectioned = useMemo(() => sections.some((s) => !!s.title), [sections]);
-
-	const renderContent = (): JSX.Element => {
-		if (isEmpty) {
-			return (
-				<div className={styles.emptyState}>
-					<Empty
-						image={Empty.PRESENTED_IMAGE_SIMPLE}
-						description={
-							<Typography.Text>No panels in this dashboard yet</Typography.Text>
-						}
-					/>
-				</div>
-			);
-		}
-
-		if (isSectioned) {
-			return (
-				<SectionList
-					sections={sections}
-					layouts={layouts}
-					dashboardId={dashboardId}
-					isEditable={isEditable}
-					onRefetch={onRefetch}
-				/>
-			);
-		}
-
-		return (
-			<>
-				{sections.map((section) => (
-					<Section
-						key={section.id}
-						section={section}
-						dashboardId={dashboardId}
-						isEditable={isEditable}
-						onRefetch={onRefetch}
-					/>
-				))}
-			</>
-		);
-	};
-
-	return (
-		<>
-			{renderContent()}
-			{isEditable ? (
-				<AddSectionControl
-					sections={sections}
-					layouts={layouts}
-					dashboardId={dashboardId}
-					isSectioned={isSectioned}
-					onRefetch={onRefetch}
-				/>
-			) : null}
-		</>
-	);
-}
-
-export default GridCardLayoutV2;

frontend/src/container/DashboardContainerV2/components/DashboardHeader/DashboardBreadcrumbs.styles.scss

@@ -1,63 +0,0 @@
-.dashboard-breadcrumbs {
-	width: 100%;
-	height: 48px;
-	display: flex;
-	gap: 6px;
-	align-items: center;
-	max-width: 80%;
-
-	.dashboard-btn {
-		display: flex;
-		align-items: center;
-		color: var(--l2-foreground);
-		font-family: Inter;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 20px; /* 142.857% */
-		letter-spacing: -0.07px;
-		padding: 0px;
-		height: 20px;
-	}
-
-	.dashboard-btn:hover {
-		background-color: unset;
-	}
-
-	.id-btn {
-		display: flex;
-		align-items: center;
-		gap: 4px;
-		padding: 0px 2px;
-		border-radius: 2px;
-		background: color-mix(in srgb, var(--bg-robin-400) 10%, transparent);
-		color: var(--bg-robin-400);
-		font-family: Inter;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 20px; /* 142.857% */
-		height: 20px;
-
-		max-width: calc(100% - 120px);
-
-		span {
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-
-		.ant-btn-icon {
-			margin-inline-end: 4px;
-		}
-	}
-	.id-btn:hover {
-		background: color-mix(in srgb, var(--bg-robin-400) 10%, transparent);
-		color: var(--bg-robin-300);
-	}
-
-	.dashboard-icon-image {
-		height: 14px;
-		width: 14px;
-	}
-}

frontend/src/container/DashboardContainerV2/components/DashboardHeader/DashboardBreadcrumbs.tsx

@@ -1,58 +0,0 @@
-import { useCallback } from 'react';
-import { Button } from 'antd';
-import getSessionStorageApi from 'api/browser/sessionstorage/get';
-import ROUTES from 'constants/routes';
-import { DASHBOARDS_LIST_QUERY_PARAMS_STORAGE_KEY } from 'hooks/dashboard/useDashboardsListQueryParams';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import { LayoutGrid } from '@signozhq/icons';
-
-import { Base64Icons } from '../../../DashboardContainer/DashboardSettings/General/utils';
-
-import './DashboardBreadcrumbs.styles.scss';
-
-interface Props {
-	title: string;
-	image?: string;
-}
-
-function DashboardBreadcrumbs({ title, image }: Props): JSX.Element {
-	const { safeNavigate } = useSafeNavigate();
-
-	const goToListPage = useCallback(() => {
-		const dashboardsListQueryParamsString = getSessionStorageApi(
-			DASHBOARDS_LIST_QUERY_PARAMS_STORAGE_KEY,
-		);
-
-		if (dashboardsListQueryParamsString) {
-			safeNavigate({
-				pathname: ROUTES.ALL_DASHBOARD,
-				search: `?${dashboardsListQueryParamsString}`,
-			});
-		} else {
-			safeNavigate(ROUTES.ALL_DASHBOARD);
-		}
-	}, [safeNavigate]);
-
-	return (
-		<div className="dashboard-breadcrumbs">
-			<Button
-				type="text"
-				icon={<LayoutGrid size={14} />}
-				className="dashboard-btn"
-				onClick={goToListPage}
-			>
-				Dashboard /
-			</Button>
-			<Button type="text" className="id-btn dashboard-name-btn">
-				<img
-					src={image || Base64Icons[0]}
-					alt="dashboard-icon"
-					className="dashboard-icon-image"
-				/>
-				{title}
-			</Button>
-		</div>
-	);
-}
-
-export default DashboardBreadcrumbs;

frontend/src/container/DashboardContainerV2/components/DashboardHeader/DashboardHeader.styles.scss

@@ -1,9 +0,0 @@
-.dashboard-header {
-	border-bottom: 1px solid var(--l1-border);
-	display: flex;
-	justify-content: space-between;
-	gap: 16px;
-	align-items: center;
-	padding: 0 8px;
-	box-sizing: border-box;
-}

frontend/src/container/DashboardContainerV2/components/DashboardHeader/DashboardHeader.tsx

@@ -1,22 +0,0 @@
-import { memo } from 'react';
-import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
-
-import DashboardBreadcrumbs from './DashboardBreadcrumbs';
-
-import './DashboardHeader.styles.scss';
-
-interface Props {
-	title: string;
-	image?: string;
-}
-
-function DashboardHeader({ title, image }: Props): JSX.Element {
-	return (
-		<div className="dashboard-header">
-			<DashboardBreadcrumbs title={title} image={image} />
-			<HeaderRightSection enableAnnouncements={false} enableShare enableFeedback />
-		</div>
-	);
-}
-
-export default memo(DashboardHeader);

frontend/src/container/DashboardContainerV2/index.tsx

@@ -1,46 +0,0 @@
-import { FullScreen, useFullScreenHandle } from 'react-full-screen';
-
-import useComponentPermission from 'hooks/useComponentPermission';
-import { useAppContext } from 'providers/App/App';
-
-import DashboardDescriptionV2 from './DashboardDescriptionV2';
-import GridCardLayoutV2 from './GridCardLayoutV2';
-import type { V2Dashboard } from './utils';
-import styles from './DashboardContainerV2.module.scss';
-
-interface Props {
-	dashboard: V2Dashboard | undefined;
-	onRefetch: () => void;
-}
-
-function DashboardContainerV2({ dashboard, onRefetch }: Props): JSX.Element {
-	const fullScreenHandle = useFullScreenHandle();
-	const spec = dashboard?.spec;
-
-	const { user } = useAppContext();
-	const [editDashboard] = useComponentPermission(['edit_dashboard'], user.role);
-	const isEditable = !dashboard?.locked && editDashboard;
-
-	return (
-		<FullScreen handle={fullScreenHandle}>
-			<div className={styles.container}>
-				<DashboardDescriptionV2
-					dashboard={dashboard}
-					handle={fullScreenHandle}
-					onRefetch={onRefetch}
-				/>
-				<div className={styles.body}>
-					<GridCardLayoutV2
-						layouts={spec?.layouts}
-						panels={spec?.panels ?? undefined}
-						dashboardId={dashboard?.id}
-						isEditable={isEditable}
-						onRefetch={onRefetch}
-					/>
-				</div>
-			</div>
-		</FullScreen>
-	);
-}
-
-export default DashboardContainerV2;

frontend/src/container/DashboardContainerV2/patchOps.ts

@@ -1,189 +0,0 @@
-import type {
-	DashboardGridItemDTO,
-	DashboardtypesJSONPatchOperationDTO,
-	DashboardtypesLayoutDTO,
-	DashboardtypesPanelDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { DashboardtypesJSONPatchOperationDTOOp } from 'api/generated/services/sigNoz.schemas';
-
-import type { GridItemV2 } from './utils';
-
-/**
- * Pure RFC-6902 JSON-Patch builders for the V2 dashboard spec. These are
- * intentionally side-effect-free (no React, no network) so they can be unit
- * tested and reused by the layout hooks. JSON pointers target the postable
- * shape: `/spec/layouts/...`, `/spec/panels/...` (matches the existing V2
- * patches in DashboardSettings/General and DashboardDescriptionV2).
- */
-
-const { add, replace, remove } = DashboardtypesJSONPatchOperationDTOOp;
-
-const PANEL_REF_PREFIX = '#/spec/panels/';
-
-export function panelRef(panelId: string): string {
-	return `${PANEL_REF_PREFIX}${panelId}`;
-}
-
-/**
- * Builds a minimal, backend-valid panel for a given plugin kind. The spec
- * requires exactly one query whose plugin kind is allowed for the panel;
- * `signoz/BuilderQuery` is allowed for every panel kind and its contents are not
- * validated, so an empty builder query is the safe default. The real query is
- * filled in once the panel editor lands.
- */
-export function createDefaultPanel(pluginKind: string): DashboardtypesPanelDTO {
-	// The DTO types plugin/query kinds as large generated enum unions; the kind
-	// here is chosen dynamically by the user, so we build the structurally-valid
-	// shape and assert the type.
-	return {
-		kind: 'Panel',
-		spec: {
-			display: { name: 'New panel' },
-			plugin: { kind: pluginKind, spec: {} },
-			queries: [
-				{
-					kind: 'TimeSeriesQuery',
-					spec: { plugin: { kind: 'signoz/BuilderQuery', spec: { name: 'A' } } },
-				},
-			],
-		},
-	} as unknown as DashboardtypesPanelDTO;
-}
-
-/** Converts a UI grid item back into the spec's grid-item DTO shape. */
-export function gridItemToDTO(item: GridItemV2): DashboardGridItemDTO {
-	return {
-		x: item.x,
-		y: item.y,
-		width: item.width,
-		height: item.height,
-		content: { $ref: panelRef(item.id) },
-	};
-}
-
-/** Replace the entire items array of one section (used on panel move/resize). */
-export function replaceSectionItemsOp(
-	layoutIndex: number,
-	items: GridItemV2[],
-): DashboardtypesJSONPatchOperationDTO {
-	return {
-		op: replace,
-		path: `/spec/layouts/${layoutIndex}/spec/items`,
-		value: items.map(gridItemToDTO),
-	};
-}
-
-/** Replace the whole layouts array (used on section reorder — avoids move-index ambiguity). */
-export function reorderLayoutsOp(
-	layouts: DashboardtypesLayoutDTO[],
-): DashboardtypesJSONPatchOperationDTO {
-	return { op: replace, path: '/spec/layouts', value: layouts };
-}
-
-/** An empty titled Grid layout (one section). */
-export function newGridLayout(title: string): DashboardtypesLayoutDTO {
-	return {
-		kind: 'Grid' as DashboardtypesLayoutDTO['kind'],
-		spec: { display: { title, collapse: { open: true } }, items: [] },
-	};
-}
-
-/** Append a new, empty titled Grid section. */
-export function addSectionOp(
-	title: string,
-): DashboardtypesJSONPatchOperationDTO {
-	return { op: add, path: '/spec/layouts/-', value: newGridLayout(title) };
-}
-
-interface AddPanelToSectionArgs {
-	panelId: string;
-	panel: DashboardtypesPanelDTO;
-	layoutIndex: number;
-	item: DashboardGridItemDTO;
-}
-
-/** Add a panel to `spec.panels` and an item ref into a section, as one atomic patch. */
-export function addPanelToSectionOps({
-	panelId,
-	panel,
-	layoutIndex,
-	item,
-}: AddPanelToSectionArgs): DashboardtypesJSONPatchOperationDTO[] {
-	return [
-		{ op: add, path: `/spec/panels/${panelId}`, value: panel },
-		{ op: add, path: `/spec/layouts/${layoutIndex}/spec/items/-`, value: item },
-	];
-}
-
-interface MovePanelArgs {
-	sourceIndex: number;
-	sourceItems: GridItemV2[];
-	targetIndex: number;
-	targetItems: GridItemV2[];
-}
-
-/** Move a panel's item ref from one section to another (panel stays in spec.panels). */
-export function movePanelBetweenSectionsOps({
-	sourceIndex,
-	sourceItems,
-	targetIndex,
-	targetItems,
-}: MovePanelArgs): DashboardtypesJSONPatchOperationDTO[] {
-	return [
-		replaceSectionItemsOp(sourceIndex, sourceItems),
-		replaceSectionItemsOp(targetIndex, targetItems),
-	];
-}
-
-/** Rename an existing section's title. */
-export function renameSectionOp(
-	layoutIndex: number,
-	title: string,
-): DashboardtypesJSONPatchOperationDTO {
-	return {
-		op: replace,
-		path: `/spec/layouts/${layoutIndex}/spec/display/title`,
-		value: title,
-	};
-}
-
-/** Persist a section's collapse state. `add` safely replaces the collapse object if present. */
-export function setSectionCollapseOp(
-	layoutIndex: number,
-	open: boolean,
-): DashboardtypesJSONPatchOperationDTO {
-	return {
-		op: add,
-		path: `/spec/layouts/${layoutIndex}/spec/display/collapse`,
-		value: { open },
-	};
-}
-
-/**
- * First-section migration: give an existing untitled (free-flowing) layout a
- * title, turning it into a section in place while preserving its panels.
- */
-export function titleUntitledSectionOp(
-	layoutIndex: number,
-	title: string,
-): DashboardtypesJSONPatchOperationDTO {
-	return {
-		op: add,
-		path: `/spec/layouts/${layoutIndex}/spec/display`,
-		value: { title, collapse: { open: true } },
-	};
-}
-
-/** Remove a section. Panel cleanup (orphaned refs) is handled by the caller. */
-export function removeSectionOp(
-	layoutIndex: number,
-): DashboardtypesJSONPatchOperationDTO {
-	return { op: remove, path: `/spec/layouts/${layoutIndex}` };
-}
-
-/** Remove a panel definition from `spec.panels`. */
-export function removePanelOp(
-	panelId: string,
-): DashboardtypesJSONPatchOperationDTO {
-	return { op: remove, path: `/spec/panels/${panelId}` };
-}

frontend/src/container/DashboardContainerV2/utils.ts

@@ -1,157 +0,0 @@
-import type {
-	DashboardtypesGettableDashboardV2DTO,
-	DashboardtypesLayoutDTO,
-	DashboardtypesPanelDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-export type V2Dashboard = DashboardtypesGettableDashboardV2DTO;
-
-export interface GridItemV2 {
-	id: string;
-	x: number;
-	y: number;
-	width: number;
-	height: number;
-	panel: DashboardtypesPanelDTO | undefined;
-}
-
-const PANEL_REF_PREFIX = '#/spec/panels/';
-
-export function extractPanelIdFromRef(ref: string | undefined): string | null {
-	if (!ref) {
-		return null;
-	}
-	if (!ref.startsWith(PANEL_REF_PREFIX)) {
-		return null;
-	}
-	return ref.slice(PANEL_REF_PREFIX.length);
-}
-
-export function flattenGridLayout(
-	layouts: DashboardtypesLayoutDTO[] | undefined | null,
-	panels: Record<string, DashboardtypesPanelDTO | undefined> | undefined,
-): GridItemV2[] {
-	if (!layouts?.length) {
-		return [];
-	}
-
-	const items: GridItemV2[] = [];
-	layouts.forEach((layoutEnvelope) => {
-		if (layoutEnvelope?.kind !== 'Grid') {
-			return;
-		}
-		const gridItems = layoutEnvelope.spec?.items ?? [];
-		gridItems.forEach((item) => {
-			const id = extractPanelIdFromRef(item.content?.$ref);
-			if (!id) {
-				return;
-			}
-			items.push({
-				id,
-				x: item.x ?? 0,
-				y: item.y ?? 0,
-				width: item.width ?? 6,
-				height: item.height ?? 6,
-				panel: panels?.[id],
-			});
-		});
-	});
-
-	return items;
-}
-
-/**
- * A section corresponds to one entry in `spec.layouts`. If the Grid has a
- * `display.title`, it renders with a collapsible header; otherwise it is a
- * "default" untitled section (visually just the grid).
- */
-export interface DashboardSectionV2 {
-	/**
-	 * Stable identity used for React keys and dnd-kit sortable item ids. Derived
-	 * from the section's content (its first panel ref) so it survives reordering
-	 * — unlike the positional `layoutIndex`. See `getSectionStableId`.
-	 */
-	id: string;
-	/** Position of this section's Grid in `spec.layouts`. All JSON-Patch ops target by this. */
-	layoutIndex: number;
-	title: string | undefined;
-	open: boolean;
-	items: GridItemV2[];
-	repeatVariable: string | undefined;
-}
-
-/**
- * Derives a stable id for a section from its content. Reordering sections changes
- * their `layoutIndex` but not their content, so keying off the first panel ref
- * keeps React component instances (and any local state) bound to the right
- * section across a reorder. Empty sections fall back to a positional id — they
- * are rarely reordered, and a future backend `id` on the layout spec is the
- * proper long-term fix.
- */
-export function getSectionStableId(
-	items: GridItemV2[],
-	layoutIndex: number,
-): string {
-	if (items.length > 0) {
-		return `sec-${items[0].id}`;
-	}
-	return `sec-empty-${layoutIndex}`;
-}
-
-export function layoutsToSections(
-	layouts: DashboardtypesLayoutDTO[] | undefined | null,
-	panels: Record<string, DashboardtypesPanelDTO | undefined> | undefined,
-): DashboardSectionV2[] {
-	if (!layouts?.length) {
-		return [];
-	}
-
-	return layouts
-		.map((layoutEnvelope, idx) => {
-			if (layoutEnvelope?.kind !== 'Grid') {
-				return null;
-			}
-			const spec = layoutEnvelope.spec;
-			const items: GridItemV2[] = (spec?.items ?? [])
-				.map((item) => {
-					const id = extractPanelIdFromRef(item.content?.$ref);
-					if (!id) {
-						return null;
-					}
-					return {
-						id,
-						x: item.x ?? 0,
-						y: item.y ?? 0,
-						width: item.width ?? 6,
-						height: item.height ?? 6,
-						panel: panels?.[id],
-					};
-				})
-				.filter((it): it is GridItemV2 => it !== null);
-
-			const title = spec?.display?.title;
-			// `open` defaults to true when no collapse field is set (the section
-			// is expanded by default).
-			const open = spec?.display?.collapse?.open !== false;
-
-			return {
-				id: getSectionStableId(items, idx),
-				layoutIndex: idx,
-				title,
-				open,
-				items,
-				repeatVariable: spec?.repeatVariable,
-			};
-		})
-		.filter((s): s is DashboardSectionV2 => s !== null);
-}
-
-export function getPanelKindLabel(
-	panel: DashboardtypesPanelDTO | undefined,
-): string {
-	const kind = panel?.spec?.plugin?.kind;
-	if (!kind) {
-		return 'unknown';
-	}
-	return kind.replace(/^signoz\//, '');
-}

frontend/src/container/GridCardLayout/WidgetHeader/WidgetHeader.styles.scss

@@ -26,13 +26,10 @@
 	gap: 8px;
 	overflow: hidden;
 	text-overflow: ellipsis;
-	flex: 1;
-	min-width: 0;
 }
 
 .widget-header-title {
 	max-width: 80%;
-	min-width: 0;
 }
 
 .widget-header-actions {

frontend/src/container/IngestionSettings/MultiIngestionSettings.tsx

@@ -438,7 +438,9 @@ function MultiIngestionSettings(): JSX.Element {
 							data: {
 								name: values.name,
 								tags: updatedTags,
-								expires_at: dayjs(values.expires_at).endOf('day').toISOString(),
+								expires_at: new Date(
+									dayjs(values.expires_at).endOf('day').toISOString(),
+								),
 							},
 						},
 						{
@@ -469,11 +471,13 @@ function MultiIngestionSettings(): JSX.Element {
 					const requestPayload = {
 						name: values.name,
 						tags: updatedTags,
-						expires_at: dayjs(values.expires_at).endOf('day').toISOString(),
+						expires_at: new Date(dayjs(values.expires_at).endOf('day').toISOString()),
 					};
 
 					createIngestionKey(
-						{ data: requestPayload },
+						{
+							data: requestPayload,
+						},
 						{
 							onSuccess: (_data) => {
 								notifications.success({

frontend/src/container/IngestionSettings/__tests__/MultiIngestionSettings.test.tsx

@@ -79,12 +79,12 @@ describe('MultiIngestionSettings Page', () => {
 				keys: [
 					{
 						name: 'Key One',
-						expires_at: TEST_EXPIRES_AT,
+						expires_at: new Date(TEST_EXPIRES_AT),
 						value: 'secret',
 						workspace_id: TEST_WORKSPACE_ID,
 						id: 'k1',
-						created_at: TEST_CREATED_UPDATED,
-						updated_at: TEST_CREATED_UPDATED,
+						created_at: new Date(TEST_CREATED_UPDATED),
+						updated_at: new Date(TEST_CREATED_UPDATED),
 						tags: [],
 						limits: [
 							{
@@ -160,12 +160,12 @@ describe('MultiIngestionSettings Page', () => {
 				keys: [
 					{
 						name: 'Key Logs',
-						expires_at: TEST_EXPIRES_AT,
+						expires_at: new Date(TEST_EXPIRES_AT),
 						value: 'secret',
 						workspace_id: TEST_WORKSPACE_ID,
 						id: 'k2',
-						created_at: TEST_CREATED_UPDATED,
-						updated_at: TEST_CREATED_UPDATED,
+						created_at: new Date(TEST_CREATED_UPDATED),
+						updated_at: new Date(TEST_CREATED_UPDATED),
 						tags: [],
 						limits: [
 							{
@@ -238,12 +238,12 @@ describe('MultiIngestionSettings Page', () => {
 				keys: [
 					{
 						name: KEY_NAME,
-						expires_at: TEST_EXPIRES_AT,
+						expires_at: new Date(TEST_EXPIRES_AT),
 						value: 'secret',
 						workspace_id: TEST_WORKSPACE_ID,
 						id: 'k1',
-						created_at: TEST_CREATED_UPDATED,
-						updated_at: TEST_CREATED_UPDATED,
+						created_at: new Date(TEST_CREATED_UPDATED),
+						updated_at: new Date(TEST_CREATED_UPDATED),
 						tags: [],
 						limits: [
 							{
@@ -299,12 +299,12 @@ describe('MultiIngestionSettings Page', () => {
 				keys: [
 					{
 						name: 'Key Regular',
-						expires_at: TEST_EXPIRES_AT,
+						expires_at: new Date(TEST_EXPIRES_AT),
 						value: 'secret1',
 						workspace_id: TEST_WORKSPACE_ID,
 						id: 'k1',
-						created_at: TEST_CREATED_UPDATED,
-						updated_at: TEST_CREATED_UPDATED,
+						created_at: new Date(TEST_CREATED_UPDATED),
+						updated_at: new Date(TEST_CREATED_UPDATED),
 						tags: [],
 						limits: [],
 					},
@@ -319,12 +319,12 @@ describe('MultiIngestionSettings Page', () => {
 				keys: [
 					{
 						name: 'Key Search Result',
-						expires_at: TEST_EXPIRES_AT,
+						expires_at: new Date(TEST_EXPIRES_AT),
 						value: 'secret2',
 						workspace_id: TEST_WORKSPACE_ID,
 						id: 'k2',
-						created_at: TEST_CREATED_UPDATED,
-						updated_at: TEST_CREATED_UPDATED,
+						created_at: new Date(TEST_CREATED_UPDATED),
+						updated_at: new Date(TEST_CREATED_UPDATED),
 						tags: [],
 						limits: [],
 					},

frontend/src/container/ListAlertRules/__test__/utils.test.ts

@@ -13,9 +13,9 @@ describe('filterAlerts', () => {
 	const mockAlertBase: Partial<RuletypesRuleDTO> = {
 		state: 'active' as RuletypesAlertStateDTO,
 		disabled: false,
-		createdAt: '2024-01-01T00:00:00Z',
+		createdAt: new Date('2024-01-01T00:00:00Z'),
 		createdBy: 'test-user',
-		updatedAt: '2024-01-01T00:00:00Z',
+		updatedAt: new Date('2024-01-01T00:00:00Z'),
 		updatedBy: 'test-user',
 		version: '1',
 		condition: {

frontend/src/container/MembersSettings/__tests__/MembersSettings.integration.test.tsx

@@ -20,7 +20,7 @@ const mockUsers: TypesUserDTO[] = [
 		displayName: 'Alice Smith',
 		email: 'alice@signoz.io',
 		status: 'active',
-		createdAt: '2024-01-01T00:00:00.000Z',
+		createdAt: new Date('2024-01-01T00:00:00.000Z'),
 		orgId: 'org-1',
 	},
 	{
@@ -28,7 +28,7 @@ const mockUsers: TypesUserDTO[] = [
 		displayName: 'Bob Jones',
 		email: 'bob@signoz.io',
 		status: 'active',
-		createdAt: '2024-01-02T00:00:00.000Z',
+		createdAt: new Date('2024-01-02T00:00:00.000Z'),
 		orgId: 'org-1',
 	},
 	{
@@ -36,7 +36,7 @@ const mockUsers: TypesUserDTO[] = [
 		displayName: '',
 		email: 'charlie@signoz.io',
 		status: 'pending_invite',
-		createdAt: '2024-01-03T00:00:00.000Z',
+		createdAt: new Date('2024-01-03T00:00:00.000Z'),
 		orgId: 'org-1',
 	},
 	{
@@ -44,7 +44,7 @@ const mockUsers: TypesUserDTO[] = [
 		displayName: 'Dave Deleted',
 		email: 'dave@signoz.io',
 		status: 'deleted',
-		createdAt: '2024-01-04T00:00:00.000Z',
+		createdAt: new Date('2024-01-04T00:00:00.000Z'),
 		orgId: 'org-1',
 	},
 ];

frontend/src/container/NewWidget/WidgetModals/DiscardChangesModal.tsx

@@ -1,53 +0,0 @@
-import { SolidAlertTriangle } from '@signozhq/icons';
-import { ConfirmDialog } from '@signozhq/ui/dialog';
-import { Typography } from '@signozhq/ui/typography';
-
-export interface DiscardChangesModalProps {
-	open: boolean;
-	isNewPanel: boolean;
-	panelTitle?: string;
-	dashboardTitle?: string;
-	onDiscard: () => void;
-	onClose: () => void;
-}
-
-export default function DiscardChangesModal({
-	open,
-	isNewPanel,
-	panelTitle,
-	dashboardTitle,
-	onDiscard,
-	onClose,
-}: DiscardChangesModalProps): JSX.Element {
-	const dashboardName = dashboardTitle ? (
-		<>
-			{' '}
-			to <strong>{dashboardTitle}</strong>
-		</>
-	) : null;
-	const panelLabel = panelTitle ? <strong>{panelTitle}</strong> : 'this panel';
-
-	return (
-		<ConfirmDialog
-			open={open}
-			onOpenChange={(next): void => {
-				if (!next) {
-					onClose();
-				}
-			}}
-			title="Discard changes?"
-			titleIcon={<SolidAlertTriangle size={14} color="#fdd600" />}
-			confirmText="Discard"
-			confirmColor="destructive"
-			cancelText="Keep editing"
-			onConfirm={onDiscard}
-			onCancel={onClose}
-		>
-			{isNewPanel ? (
-				<Typography>This new panel won&apos;t be added{dashboardName}.</Typography>
-			) : (
-				<Typography>Your unsaved edits to {panelLabel} will be lost.</Typography>
-			)}
-		</ConfirmDialog>
-	);
-}

frontend/src/container/NewWidget/__test__/utils.test.ts

@@ -1,17 +1,13 @@
 import {
-	initialAutocompleteData,
 	initialQueryBuilderFormValuesMap,
 	PANEL_TYPES,
 } from 'constants/queryBuilder';
-import { cloneDeep } from 'lodash-es';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { MetricAggregation } from 'types/api/v5/queryRange';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource } from 'types/common/queryBuilder';
 
 import type { PartialPanelTypes } from '../utils';
-import { getIsQueryModified, handleQueryChange } from '../utils';
+import { handleQueryChange } from '../utils';
 
 const buildSupersetQuery = (extras?: Record<string, unknown>): Query => ({
 	queryType: EQueryType.QUERY_BUILDER,
@@ -41,128 +37,6 @@ const buildSupersetQuery = (extras?: Record<string, unknown>): Query => ({
 	},
 });
 
-const buildMetricsQuery = (
-	overrides?: Partial<{
-		metricName: string;
-		aggregateAttributeKey: string;
-		legend: string;
-		groupByKey: string;
-	}>,
-): Query => ({
-	queryType: EQueryType.QUERY_BUILDER,
-	promql: [],
-	clickhouse_sql: [],
-	id: 'query-id',
-	unit: '',
-	builder: {
-		queryFormulas: [],
-		queryData: [
-			{
-				...initialQueryBuilderFormValuesMap[DataSource.METRICS],
-				queryName: 'A',
-				aggregateAttribute: overrides?.aggregateAttributeKey
-					? {
-							...initialAutocompleteData,
-							key: overrides.aggregateAttributeKey,
-							type: 'tag',
-							dataType: DataTypes.Float64,
-						}
-					: cloneDeep(initialAutocompleteData),
-				aggregations: [
-					{
-						metricName: overrides?.metricName ?? 'system.cpu.load',
-						temporality: '',
-						timeAggregation: 'rate',
-						spaceAggregation: 'sum',
-						reduceTo: 'avg',
-					} as MetricAggregation,
-				],
-				legend: overrides?.legend ?? '',
-				groupBy: overrides?.groupByKey
-					? [
-							{
-								...initialAutocompleteData,
-								key: overrides.groupByKey,
-								type: 'tag',
-								dataType: DataTypes.String,
-							},
-						]
-					: [],
-			},
-		],
-		queryTraceOperator: [],
-	},
-});
-
-describe('getIsQueryModified', () => {
-	it('returns false when baseline is null (new unsaved panel with no edits anchor)', () => {
-		const current = buildMetricsQuery();
-		expect(getIsQueryModified(current, null)).toBe(false);
-	});
-
-	it('returns false when baseline is undefined', () => {
-		const current = buildMetricsQuery();
-		expect(getIsQueryModified(current, undefined)).toBe(false);
-	});
-
-	it('returns false when current only differs by auto-backfilled aggregateAttribute', () => {
-		// saved widget query: aggregateAttribute is the v5-style empty initial value
-		// (stripped from persisted spec; spread back in as initialAutocompleteData on load)
-		const savedQuery = buildMetricsQuery({ metricName: 'system.cpu.load' });
-		// after MetricNameSelector edit-mode backfill, currentQuery has the populated
-		// aggregateAttribute while the rest of the query is identical
-		const currentQuery = buildMetricsQuery({
-			metricName: 'system.cpu.load',
-			aggregateAttributeKey: 'system.cpu.load',
-		});
-		expect(getIsQueryModified(currentQuery, savedQuery)).toBe(false);
-	});
-
-	it('returns true when the user edits the legend', () => {
-		const baseline = buildMetricsQuery({ metricName: 'system.cpu.load' });
-		const edited = buildMetricsQuery({
-			metricName: 'system.cpu.load',
-			legend: 'cpu-load',
-		});
-		expect(getIsQueryModified(edited, baseline)).toBe(true);
-	});
-
-	it('returns true when the user picks a different metric (aggregations diverges)', () => {
-		const baseline = buildMetricsQuery({ metricName: 'system.cpu.load' });
-		const edited = buildMetricsQuery({ metricName: 'system.memory.usage' });
-		expect(getIsQueryModified(edited, baseline)).toBe(true);
-	});
-
-	it('returns true when the user adds a groupBy', () => {
-		const baseline = buildMetricsQuery({ metricName: 'system.cpu.load' });
-		const edited = buildMetricsQuery({
-			metricName: 'system.cpu.load',
-			groupByKey: 'host.name',
-		});
-		expect(getIsQueryModified(edited, baseline)).toBe(true);
-	});
-
-	it('returns true on existing widget when current diverges from saved (Stage-and-Run silent-loss flow)', () => {
-		// After Edit → Stage and Run, stagedQuery is reset to match currentQuery.
-		// The dirty check must compare against the SAVED widget query, not stagedQuery.
-		const savedQuery = buildMetricsQuery({ metricName: 'system.cpu.load' });
-		const currentQuery = buildMetricsQuery({ metricName: 'system.memory.usage' });
-		expect(getIsQueryModified(currentQuery, savedQuery)).toBe(true);
-	});
-
-	it('returns false for a new panel where currentQuery still matches stagedQuery baseline', () => {
-		const stagedQuery = buildMetricsQuery();
-		const currentQuery = buildMetricsQuery();
-		expect(getIsQueryModified(currentQuery, stagedQuery)).toBe(false);
-	});
-
-	it('returns true for a new panel where currentQuery has been edited away from stagedQuery', () => {
-		const stagedQuery = buildMetricsQuery();
-		const currentQuery = buildMetricsQuery({ legend: 'custom' });
-		expect(getIsQueryModified(currentQuery, stagedQuery)).toBe(true);
-	});
-});
-
 describe('handleQueryChange', () => {
 	it('sets list-specific fields when switching to LIST', () => {
 		const superset = buildSupersetQuery();

frontend/src/container/NewWidget/index.tsx

@@ -1,17 +1,18 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { UseQueryResult } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { generatePath } from 'react-router-dom';
-import { Check, X } from '@signozhq/icons';
+import { Check, SolidAlertTriangle, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import {
 	ResizableHandle,
 	ResizablePanel,
 	ResizablePanelGroup,
 } from '@signozhq/ui/resizable';
-import { Flex } from 'antd';
+import { Flex, Modal, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
@@ -68,6 +69,7 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import { getGraphType, getGraphTypeForFormat } from 'utils/getGraphType';
 
 import LeftContainer from './LeftContainer';
+import QueryTypeTag from './LeftContainer/QueryTypeTag';
 import RightContainer from './RightContainer';
 import { ThresholdProps } from './RightContainer/Threshold/types';
 import TimeItems, { timePreferance } from './RightContainer/timeItems';
@@ -80,7 +82,6 @@ import {
 	placeWidgetAtBottom,
 	placeWidgetBetweenRows,
 } from './utils';
-import DiscardChangesModal from './WidgetModals/DiscardChangesModal';
 
 import './NewWidget.styles.scss';
 
@@ -97,6 +98,8 @@ function NewWidget({
 
 	const { dashboardVariables } = useDashboardVariables();
 
+	const { t } = useTranslation(['dashboard']);
+
 	const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();
 
 	const {
@@ -107,6 +110,11 @@ function NewWidget({
 		setSupersetQuery,
 	} = useQueryBuilder();
 
+	const isQueryModified = useMemo(
+		() => getIsQueryModified(currentQuery, stagedQuery),
+		[currentQuery, stagedQuery],
+	);
+
 	const { selectedTime: globalSelectedInterval } = useSelector<
 		AppState,
 		GlobalReducer
@@ -131,23 +139,6 @@ function NewWidget({
 
 	const query = useUrlQuery();
 
-	// For existing widgets, compare currentQuery against the saved widget query
-	// (stable across Stage-and-Run cycles). For new panels with no saved baseline,
-	// fall back to stagedQuery so initial edits still trigger the warning.
-	const savedWidgetQuery = useMemo(() => {
-		const widgetId = query.get('widgetId');
-		const match = widgets?.find((w) => w.id === widgetId);
-		if (!match || match.panelTypes === PANEL_GROUP_TYPES.ROW) {
-			return null;
-		}
-		return (match as Widgets).query ?? null;
-	}, [widgets, query]);
-
-	const isQueryModified = useMemo(
-		() => getIsQueryModified(currentQuery, savedWidgetQuery ?? stagedQuery),
-		[currentQuery, savedWidgetQuery, stagedQuery],
-	);
-
 	const [isNewDashboard, setIsNewDashboard] = useState<boolean>(false);
 
 	const logEventCalledRef = useRef(false);
@@ -237,6 +228,7 @@ function NewWidget({
 		Record<string, string>
 	>(selectedWidget?.customLegendColors || {});
 
+	const [saveModal, setSaveModal] = useState(false);
 	const [discardModal, setDiscardModal] = useState(false);
 
 	const [bucketWidth, setBucketWidth] = useState<number>(
@@ -348,6 +340,7 @@ function NewWidget({
 	]);
 
 	const closeModal = (): void => {
+		setSaveModal(false);
 		setDiscardModal(false);
 	};
 
@@ -600,7 +593,7 @@ function NewWidget({
 			},
 		};
 
-		return updateDashboardMutation.mutateAsync(dashboard, {
+		updateDashboardMutation.mutateAsync(dashboard, {
 			onSuccess: () => {
 				setToScrollWidgetId(selectedWidget?.id || '');
 				navigateToDashboardPage();
@@ -695,9 +688,9 @@ function NewWidget({
 				})),
 			}),
 		});
-		onClickSaveHandler();
+		setSaveModal(true);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [onClickSaveHandler]);
+	}, [isNewPanel]);
 
 	const isNewTraceLogsAvailable =
 		currentQuery.queryType === EQueryType.QUERY_BUILDER &&
@@ -958,14 +951,57 @@ function NewWidget({
 					</ResizablePanel>
 				</ResizablePanelGroup>
 			</PanelContainer>
-			<DiscardChangesModal
+			<Modal
+				title={
+					isQueryModified ? (
+						<Space>
+							<SolidAlertTriangle size={16} color="#fdd600" />
+							Unsaved Changes
+						</Space>
+					) : (
+						'Save Widget'
+					)
+				}
+				focusTriggerAfterClose
+				forceRender
+				destroyOnClose
+				closable
+				onCancel={closeModal}
+				onOk={onClickSaveHandler}
+				confirmLoading={updateDashboardMutation.isLoading}
+				centered
+				open={saveModal}
+				width={600}
+			>
+				{!isQueryModified ? (
+					<Typography>
+						{t('your_graph_build_with')}{' '}
+						<QueryTypeTag queryType={currentQuery.queryType} />{' '}
+						{t('dashboard_ok_confirm')}
+					</Typography>
+				) : (
+					<Typography>{t('dashboard_unsave_changes')} </Typography>
+				)}
+			</Modal>
+			<Modal
+				title={
+					<Space>
+						<SolidAlertTriangle size={16} color="#fdd600" />
+						Unsaved Changes
+					</Space>
+				}
+				focusTriggerAfterClose
+				forceRender
+				destroyOnClose
+				closable
+				onCancel={closeModal}
+				onOk={discardChanges}
+				centered
 				open={discardModal}
-				isNewPanel={isNewPanel}
-				panelTitle={title}
-				dashboardTitle={dashboardData?.data?.title}
-				onDiscard={discardChanges}
-				onClose={closeModal}
-			/>
+				width={600}
+			>
+				<Typography>{t('dashboard_unsave_changes')}</Typography>
+			</Modal>
 		</Container>
 	);
 }

frontend/src/container/NewWidget/utils.ts

@@ -1,4 +1,5 @@
 import { Layout } from 'react-grid-layout';
+import { omitIdFromQuery } from 'components/ExplorerCard/utils';
 import { PrecisionOptionsEnum } from 'components/Graph/types';
 import { YAxisCategoryNames } from 'components/YAxisUnitSelector/constants';
 import {
@@ -25,84 +26,16 @@ import { DataSource } from 'types/common/queryBuilder';
 
 import { getCategoryName } from './RightContainer/dataFormatCategories';
 
-// Asks "would saving the current panel change the persisted widget spec?".
-//
-// `adjustQueryForV5` is deliberately not reused here: in addition to stripping
-// the legacy v4 fields, it also resurrects them onto each metric
-// `aggregations[i]`. That migration step is correct on save but bleeds
-// asymmetrically across a comparator — the live query still carries the
-// legacy defaults from `initialQueryBuilderFormValuesMap` while a previously
-// saved widget had them stripped.
-const stripQueryDataForCompare = (
-	queryData: IBuilderQuery,
-): Record<string, unknown> => {
-	const {
-		aggregateAttribute: _aggregateAttribute,
-		aggregateOperator: _aggregateOperator,
-		timeAggregation: _timeAggregation,
-		spaceAggregation: _spaceAggregation,
-		reduceTo: _reduceTo,
-		filters: _filters,
-		...retained
-	} = queryData ?? ({} as IBuilderQuery);
-
-	const groupBy = (retained.groupBy ?? []).map((entry) => {
-		const { id: _id, ...rest } = entry;
-		return rest;
-	});
-
-	return {
-		...retained,
-		groupBy,
-		source: retained.source || '',
-	};
-};
-
-const normalizeForDirtyCheck = (query: Query): Record<string, unknown> => {
-	const { id: _id, unit, builder, ...rest } = query;
-	return {
-		...rest,
-		// `id` is regenerated on every Stage and Run; `unit` flips between ''
-		// and undefined depending on whether the user has touched the selector.
-		unit: unit || '',
-		builder: {
-			...builder,
-			queryData: (builder?.queryData ?? []).map(stripQueryDataForCompare),
-		},
-	};
-};
-
-// `lodash.isEqual` distinguishes `{a: undefined}` from `{}`; for the dirty
-// check those are the same. Initial-values spreads on the live query
-// frequently leave such explicit-undefined keys.
-const stripUndefined = (value: unknown): unknown => {
-	if (Array.isArray(value)) {
-		return value.map(stripUndefined);
-	}
-	if (value && typeof value === 'object') {
-		const out: Record<string, unknown> = {};
-		Object.entries(value as Record<string, unknown>).forEach(([k, v]) => {
-			if (v === undefined) {
-				return;
-			}
-			out[k] = stripUndefined(v);
-		});
-		return out;
-	}
-	return value;
-};
-
 export const getIsQueryModified = (
 	currentQuery: Query,
-	baselineQuery: Query | null | undefined,
+	stagedQuery: Query | null,
 ): boolean => {
-	if (!baselineQuery) {
+	if (!stagedQuery) {
 		return false;
 	}
-	return !isEqual(
-		stripUndefined(normalizeForDirtyCheck(baselineQuery)),
-		stripUndefined(normalizeForDirtyCheck(currentQuery)),
-	);
+	const omitIdFromStageQuery = omitIdFromQuery(stagedQuery);
+	const omitIdFromCurrentQuery = omitIdFromQuery(currentQuery);
+	return !isEqual(omitIdFromStageQuery, omitIdFromCurrentQuery);
 };
 
 export type PartialPanelTypes = {

frontend/src/container/PlannedDowntime/PlannedDowntime.tsx

@@ -9,7 +9,7 @@ import {
 	useListDowntimeSchedules,
 } from 'api/generated/services/downtimeschedules';
 import { useListRules } from 'api/generated/services/rules';
-import type { AlertmanagertypesPlannedMaintenanceDTO } from 'api/generated/services/sigNoz.schemas';
+import type { RuletypesPlannedMaintenanceDTO } from 'api/generated/services/sigNoz.schemas';
 import dayjs from 'dayjs';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { useNotifications } from 'hooks/useNotifications';
@@ -24,7 +24,7 @@ import { PlannedDowntimeDeleteModal } from './PlannedDowntimeDeleteModal';
 import { PlannedDowntimeForm } from './PlannedDowntimeForm';
 import { PlannedDowntimeList } from './PlannedDowntimeList';
 import {
-	defaultInitialValues,
+	defautlInitialValues,
 	deleteDowntimeHandler,
 } from './PlannedDowntimeutils';
 
@@ -48,8 +48,8 @@ export function PlannedDowntime(): JSX.Element {
 	const urlQuery = useUrlQuery();
 
 	const [initialValues, setInitialValues] =
-		useState<Partial<AlertmanagertypesPlannedMaintenanceDTO>>(
-			defaultInitialValues,
+		useState<Partial<RuletypesPlannedMaintenanceDTO & { editMode: boolean }>>(
+			defautlInitialValues,
 		);
 
 	const downtimeSchedules = useListDowntimeSchedules();
@@ -148,7 +148,7 @@ export function PlannedDowntime(): JSX.Element {
 						<Button
 							type="primary"
 							onClick={(): void => {
-								setInitialValues(defaultInitialValues);
+								setInitialValues({ ...defautlInitialValues, editMode: false });
 								setIsOpen(true);
 								setEditMode(false);
 								form.resetFields();

frontend/src/container/PlannedDowntime/PlannedDowntimeForm.tsx

@@ -20,9 +20,9 @@ import {
 	updateDowntimeScheduleByID,
 } from 'api/generated/services/downtimeschedules';
 import type {
-	AlertmanagertypesPlannedMaintenanceDTO,
-	AlertmanagertypesPostablePlannedMaintenanceDTO,
-	AlertmanagertypesRecurrenceDTO,
+	RuletypesPlannedMaintenanceDTO,
+	RuletypesPostablePlannedMaintenanceDTO,
+	RuletypesRecurrenceDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
@@ -46,6 +46,8 @@ import { AlertRuleTags } from './PlannedDowntimeList';
 import {
 	getAlertOptionsFromIds,
 	getDurationInfo,
+	getEndTime,
+	handleTimeConversion,
 	isScheduleRecurring,
 	recurrenceOptions,
 	recurrenceOptionWithSubmenu,
@@ -62,28 +64,24 @@ const TIME_FORMAT = DATE_TIME_FORMATS.TIME;
 const DATE_FORMAT = DATE_TIME_FORMATS.ORDINAL_DATE;
 const ORDINAL_FORMAT = DATE_TIME_FORMATS.ORDINAL_ONLY;
 
-const TZ_OPTIONS: DefaultOptionType[] = ALL_TIME_ZONES.map(
-	(timezone: string) => ({
-		label: timezone,
-		value: timezone,
-		key: timezone,
-	}),
-);
-
 interface PlannedDowntimeFormData {
 	name: string;
-	startTime: dayjs.Dayjs | null;
-	endTime: dayjs.Dayjs | null;
-	recurrence?: AlertmanagertypesRecurrenceDTO;
+	startTime: dayjs.Dayjs | string;
+	endTime: dayjs.Dayjs | string;
+	recurrence?: RuletypesRecurrenceDTO | null;
 	alertRules: DefaultOptionType[];
-	recurrenceSelect?: AlertmanagertypesRecurrenceDTO;
+	recurrenceSelect?: RuletypesRecurrenceDTO;
 	timezone?: string;
 }
 
 const customFormat = DATE_TIME_FORMATS.ORDINAL_DATETIME;
 
 interface PlannedDowntimeFormProps {
-	initialValues: Partial<AlertmanagertypesPlannedMaintenanceDTO>;
+	initialValues: Partial<
+		RuletypesPlannedMaintenanceDTO & {
+			editMode: boolean;
+		}
+	>;
 	alertOptions: DefaultOptionType[];
 	isError: boolean;
 	isLoading: boolean;
@@ -91,7 +89,7 @@ interface PlannedDowntimeFormProps {
 	setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
 	refetchAllSchedules: () => void;
 	isEditMode: boolean;
-	form: FormInstance;
+	form: FormInstance<any>;
 }
 
 export function PlannedDowntimeForm(
@@ -109,46 +107,66 @@ export function PlannedDowntimeForm(
 		form,
 	} = props;
 
-	const [selectedTags, setSelectedTags] = React.useState<DefaultOptionType[]>(
-		[],
-	);
+	const [selectedTags, setSelectedTags] = React.useState<
+		DefaultOptionType | DefaultOptionType[]
+	>([]);
 	const alertRuleFormName = 'alertRules';
 	const [saveLoading, setSaveLoading] = useState(false);
 	const [durationUnit, setDurationUnit] = useState<string>(
-		getDurationInfo(initialValues.schedule?.recurrence?.duration)?.unit || 'm',
+		getDurationInfo(initialValues.schedule?.recurrence?.duration as string)
+			?.unit || 'm',
 	);
 
 	const [formData, setFormData] = useState<Partial<PlannedDowntimeFormData>>({
 		timezone: initialValues.schedule?.timezone,
 	});
 
-	const [recurrenceType, setRecurrenceType] = useState<string>(
-		initialValues.schedule?.recurrence?.repeatType ||
+	const [recurrenceType, setRecurrenceType] = useState<string | null>(
+		(initialValues.schedule?.recurrence?.repeatType as string) ||
 			recurrenceOptions.doesNotRepeat.value,
 	);
 
+	const timezoneInitialValue = !isEmpty(initialValues.schedule?.timezone)
+		? (initialValues.schedule?.timezone as string)
+		: undefined;
+
 	const { notifications } = useNotifications();
 	const { showErrorModal } = useErrorModal();
 
-	const requiredFieldRule = [{ required: true }];
-
 	const datePickerFooter = (mode: any): any =>
 		mode === 'time' ? (
 			<span style={{ color: 'gray' }}>Please select the time</span>
 		) : null;
 
-	const saveHandler = useCallback(
+	const saveHanlder = useCallback(
 		async (values: PlannedDowntimeFormData) => {
-			const data: AlertmanagertypesPostablePlannedMaintenanceDTO = {
+			const shouldKeepLocalTime = !isEditMode;
+			const data: RuletypesPostablePlannedMaintenanceDTO = {
 				alertIds: values.alertRules
 					.map((alert) => alert.value)
 					.filter((alert) => alert !== undefined) as string[],
 				name: values.name,
 				schedule: {
-					startTime: values.startTime?.format(),
-					endTime: values.endTime?.format(),
-					timezone: values.timezone!,
-					recurrence: values.recurrence,
+					startTime: new Date(
+						handleTimeConversion(
+							values.startTime,
+							timezoneInitialValue,
+							values.timezone,
+							shouldKeepLocalTime,
+						),
+					),
+					timezone: values.timezone as string,
+					endTime: values.endTime
+						? new Date(
+								handleTimeConversion(
+									values.endTime,
+									timezoneInitialValue,
+									values.timezone,
+									shouldKeepLocalTime,
+								),
+							)
+						: undefined,
+					recurrence: values.recurrence as RuletypesRecurrenceDTO,
 				},
 			};
 
@@ -180,58 +198,50 @@ export function PlannedDowntimeForm(
 			notifications,
 			refetchAllSchedules,
 			setIsOpen,
+			timezoneInitialValue,
 			showErrorModal,
 		],
 	);
 	const onFinish = async (values: PlannedDowntimeFormData): Promise<void> => {
-		const { recurrence } = values;
 		const recurrenceData =
-			!recurrence ||
-			recurrence.repeatType === recurrenceOptions.doesNotRepeat.value
+			values?.recurrence?.repeatType === recurrenceOptions.doesNotRepeat.value
 				? undefined
 				: {
-						duration: recurrence.duration
-							? `${recurrence.duration}${durationUnit}`
-							: '',
-						startTime: values.startTime!.format(),
-						endTime: values.endTime?.format(),
-						repeatOn: recurrence.repeatOn,
-						repeatType: recurrence.repeatType,
+						duration: values.recurrence?.duration
+							? `${values.recurrence?.duration}${durationUnit}`
+							: undefined,
+						endTime: !isEmpty(values.endTime)
+							? handleTimeConversion(
+									values.endTime,
+									timezoneInitialValue,
+									values.timezone,
+									!isEditMode,
+								)
+							: undefined,
+						startTime: handleTimeConversion(
+							values.startTime,
+							timezoneInitialValue,
+							values.timezone,
+							!isEditMode,
+						),
+						repeatOn: !values.recurrence?.repeatOn?.length
+							? undefined
+							: values.recurrence?.repeatOn,
+						repeatType: values.recurrence?.repeatType,
 					};
 
-		await saveHandler({
+		const payloadValues = {
 			...values,
-			recurrence: recurrenceData,
-		});
+			recurrence: recurrenceData as RuletypesRecurrenceDTO | undefined,
+		};
+		await saveHanlder(payloadValues);
 	};
 
-	const handleFormData = (data: Partial<PlannedDowntimeFormData>): void => {
-		const { startTime, endTime, timezone } = data;
-		const update: Partial<PlannedDowntimeFormData> = {};
-
-		// If the set timezone doesn't match, update it.
-		if (
-			startTime &&
-			timezone &&
-			startTime.format() !== startTime.tz(timezone, true).format()
-		) {
-			update.startTime = startTime.tz(timezone, true);
-		}
-		if (
-			endTime &&
-			timezone &&
-			endTime.format() !== endTime.tz(timezone, true).format()
-		) {
-			update.endTime = endTime.tz(timezone, true);
-		}
-
-		if (!isEmpty(update)) {
-			data = { ...data, ...update };
-			form.setFieldsValue({ ...update });
-		}
-
-		setFormData(data);
-	};
+	const formValidationRules = [
+		{
+			required: true,
+		},
+	];
 
 	const handleOk = async (): Promise<void> => {
 		await form.validateFields().catch(() => {
@@ -239,11 +249,16 @@ export function PlannedDowntimeForm(
 		});
 	};
 
-	const handleCancel = (): void => setIsOpen(false);
+	const handleCancel = (): void => {
+		setIsOpen(false);
+	};
 
-	const handleAlertRulesChange: SelectProps['onChange'] = (_value, options) => {
+	const handleChange = (
+		_value: string,
+		options: DefaultOptionType | DefaultOptionType[],
+	): void => {
 		form.setFieldValue(alertRuleFormName, options);
-		setSelectedTags(Array.isArray(options) ? options : [options]);
+		setSelectedTags(options);
 	};
 
 	const noTagRenderer: SelectProps['tagRender'] = () => <></>;
@@ -252,51 +267,113 @@ export function PlannedDowntimeForm(
 		if (!removedTag) {
 			return;
 		}
-		const newTags = selectedTags.filter((tag) => tag.value !== removedTag);
+		const newTags = selectedTags.filter(
+			(tag: DefaultOptionType) => tag.value !== removedTag,
+		);
 		form.setFieldValue(alertRuleFormName, newTags);
 		setSelectedTags(newTags);
 	};
 
-	const formattedInitialValues = useMemo((): PlannedDowntimeFormData => {
-		const { schedule } = initialValues;
-		const startTime = schedule?.recurrence?.startTime || schedule?.startTime;
-		const endTime = schedule?.recurrence?.endTime || schedule?.endTime;
-
-		return {
+	const formatedInitialValues = useMemo(() => {
+		const formData: PlannedDowntimeFormData = {
 			name: defaultTo(initialValues.name, ''),
 			alertRules: getAlertOptionsFromIds(
 				initialValues.alertIds || [],
 				alertOptions,
 			),
-			startTime: startTime ? dayjs(startTime).tz(schedule.timezone) : null,
-			endTime: endTime ? dayjs(endTime).tz(schedule.timezone) : null,
+			endTime: getEndTime(initialValues) ? dayjs(getEndTime(initialValues)) : '',
+			startTime: initialValues.schedule?.startTime
+				? dayjs(initialValues.schedule?.startTime)
+				: '',
 			recurrence: {
-				...schedule?.recurrence,
-				repeatType: !isScheduleRecurring(schedule)
+				...initialValues.schedule?.recurrence,
+				repeatType: (!isScheduleRecurring(initialValues?.schedule)
 					? recurrenceOptions.doesNotRepeat.value
-					: schedule?.recurrence?.repeatType,
-				duration: getDurationInfo(schedule?.recurrence?.duration)?.value ?? '',
-			} as AlertmanagertypesRecurrenceDTO,
-			timezone: schedule?.timezone as string,
+					: initialValues.schedule?.recurrence
+							?.repeatType) as RuletypesRecurrenceDTO['repeatType'],
+				duration: String(
+					getDurationInfo(initialValues.schedule?.recurrence?.duration as string)
+						?.value ?? '',
+				),
+			} as RuletypesRecurrenceDTO,
+			timezone: initialValues.schedule?.timezone as string,
 		};
+		return formData;
 	}, [initialValues, alertOptions]);
 
 	useEffect(() => {
-		setSelectedTags(formattedInitialValues.alertRules);
-		form.setFieldsValue({ ...formattedInitialValues });
-	}, [form, formattedInitialValues, initialValues]);
+		setSelectedTags(formatedInitialValues.alertRules);
+		form.setFieldsValue({ ...formatedInitialValues });
+	}, [form, formatedInitialValues, initialValues]);
+
+	const timeZoneItems: DefaultOptionType[] = ALL_TIME_ZONES.map(
+		(timezone: string) => ({
+			label: timezone,
+			value: timezone,
+			key: timezone,
+		}),
+	);
+
+	const getTimezoneFormattedTime = (
+		time: string | dayjs.Dayjs,
+		timeZone?: string,
+		isEditMode?: boolean,
+		format?: string,
+	): string => {
+		if (!time) {
+			return '';
+		}
+		if (!timeZone) {
+			return dayjs(time).format(format);
+		}
+		return dayjs(time).tz(timeZone, isEditMode).format(format);
+	};
 
 	const startTimeText = useMemo((): string => {
-		const startTime = formData.startTime;
+		let startTime = formData?.startTime;
+		if (recurrenceType !== recurrenceOptions.doesNotRepeat.value) {
+			startTime =
+				(formData?.recurrence?.startTime
+					? dayjs(formData.recurrence.startTime).toISOString()
+					: '') ||
+				formData?.startTime ||
+				'';
+		}
+
 		if (!startTime) {
 			return '';
 		}
 
-		const daysOfWeek = formData.recurrence?.repeatOn;
+		if (formData.timezone) {
+			startTime = handleTimeConversion(
+				startTime,
+				timezoneInitialValue,
+				formData?.timezone,
+				!isEditMode,
+			);
+		}
+		const daysOfWeek = formData?.recurrence?.repeatOn;
 
-		const formattedStartTime = startTime.format(TIME_FORMAT);
-		const formattedStartDate = startTime.format(DATE_FORMAT);
-		const ordinalFormat = startTime.format(ORDINAL_FORMAT);
+		const formattedStartTime = getTimezoneFormattedTime(
+			startTime,
+			formData.timezone,
+			!isEditMode,
+			TIME_FORMAT,
+		);
+
+		const formattedStartDate = getTimezoneFormattedTime(
+			startTime,
+			formData.timezone,
+			!isEditMode,
+			DATE_FORMAT,
+		);
+
+		const ordinalFormat = getTimezoneFormattedTime(
+			startTime,
+			formData.timezone,
+			!isEditMode,
+			ORDINAL_FORMAT,
+		);
 
 		const formattedDaysOfWeek = daysOfWeek?.join(', ');
 		switch (recurrenceType) {
@@ -311,18 +388,49 @@ export function PlannedDowntimeForm(
 			default:
 				return `Scheduled for ${formattedStartDate} starting at ${formattedStartTime}.`;
 		}
-	}, [formData, recurrenceType, timezone]);
+	}, [formData, recurrenceType, isEditMode, timezoneInitialValue]);
 
 	const endTimeText = useMemo((): string => {
-		const endTime = formData.endTime;
+		let endTime = formData?.endTime;
+		if (recurrenceType !== recurrenceOptions.doesNotRepeat.value) {
+			endTime =
+				(formData?.recurrence?.endTime
+					? dayjs(formData.recurrence.endTime).toISOString()
+					: '') || '';
+
+			if (!isEditMode && !endTime) {
+				endTime = formData?.endTime || '';
+			}
+		}
+
 		if (!endTime) {
 			return '';
 		}
 
-		const formattedEndTime = endTime.format(TIME_FORMAT);
-		const formattedEndDate = endTime.format(DATE_FORMAT);
+		if (formData.timezone) {
+			endTime = handleTimeConversion(
+				endTime,
+				timezoneInitialValue,
+				formData?.timezone,
+				!isEditMode,
+			);
+		}
+
+		const formattedEndTime = getTimezoneFormattedTime(
+			endTime,
+			formData.timezone,
+			!isEditMode,
+			TIME_FORMAT,
+		);
+
+		const formattedEndDate = getTimezoneFormattedTime(
+			endTime,
+			formData.timezone,
+			!isEditMode,
+			DATE_FORMAT,
+		);
 		return `Scheduled to end maintenance on ${formattedEndDate} at ${formattedEndTime}.`;
-	}, [formData, recurrenceType, timezone]);
+	}, [formData, recurrenceType, isEditMode, timezoneInitialValue]);
 
 	return (
 		<Modal
@@ -338,28 +446,33 @@ export function PlannedDowntimeForm(
 			footer={null}
 		>
 			<Form<PlannedDowntimeFormData>
-				name={isEditMode ? 'edit-form' : 'create-form'}
+				name={initialValues.editMode ? 'edit-form' : 'create-form'}
 				form={form}
 				layout="vertical"
 				className="createForm"
 				onFinish={onFinish}
 				onValuesChange={(): void => {
 					setRecurrenceType(form.getFieldValue('recurrence')?.repeatType as string);
-					handleFormData(form.getFieldsValue());
+					setFormData(form.getFieldsValue());
 				}}
 				autoComplete="off"
 			>
-				<Form.Item label="Name" name="name" rules={requiredFieldRule}>
+				<Form.Item label="Name" name="name" rules={formValidationRules}>
 					<Input placeholder="e.g. Upgrade downtime" />
 				</Form.Item>
 				<Form.Item
 					label="Starts from"
 					name="startTime"
-					rules={requiredFieldRule}
+					rules={formValidationRules}
 					className={!isEmpty(startTimeText) ? 'formItemWithBullet' : ''}
+					getValueProps={(value): any => ({
+						value: value ? dayjs(value).tz(timezoneInitialValue) : undefined,
+					})}
 				>
 					<DatePicker
-						format={(date) => date.format(customFormat)}
+						format={(date): string =>
+							dayjs(date).tz(timezoneInitialValue).format(customFormat)
+						}
 						showTime
 						renderExtraFooter={datePickerFooter}
 						showNow={false}
@@ -372,7 +485,7 @@ export function PlannedDowntimeForm(
 				<Form.Item
 					label="Repeats every"
 					name={['recurrence', 'repeatType']}
-					rules={requiredFieldRule}
+					rules={formValidationRules}
 				>
 					<Select
 						placeholder="Select option..."
@@ -383,7 +496,7 @@ export function PlannedDowntimeForm(
 					<Form.Item
 						label="Weekly occurernce"
 						name={['recurrence', 'repeatOn']}
-						rules={requiredFieldRule}
+						rules={formValidationRules}
 					>
 						<Select
 							placeholder="Select option..."
@@ -397,14 +510,16 @@ export function PlannedDowntimeForm(
 						<Form.Item
 							label="Duration"
 							name={['recurrence', 'duration']}
-							rules={requiredFieldRule}
+							rules={formValidationRules}
 						>
 							<Input
 								addonAfter={
 									<Select
 										defaultValue="m"
 										value={durationUnit}
-										onChange={(value): void => setDurationUnit(value)}
+										onChange={(value): void => {
+											setDurationUnit(value);
+										}}
 									>
 										<Select.Option value="m">Mins</Select.Option>
 										<Select.Option value="h">Hours</Select.Option>
@@ -418,8 +533,8 @@ export function PlannedDowntimeForm(
 							/>
 						</Form.Item>
 					)}
-				<Form.Item label="Timezone" name="timezone" rules={requiredFieldRule}>
-					<Select options={TZ_OPTIONS} placeholder="Select timezone" showSearch />
+				<Form.Item label="Timezone" name="timezone" rules={formValidationRules}>
+					<Select options={timeZoneItems} placeholder="Select timezone" showSearch />
 				</Form.Item>
 				<Form.Item
 					label="Ends on"
@@ -431,9 +546,14 @@ export function PlannedDowntimeForm(
 						},
 					]}
 					className={!isEmpty(endTimeText) ? 'formItemWithBullet' : ''}
+					getValueProps={(value): any => ({
+						value: value ? dayjs(value).tz(timezoneInitialValue) : undefined,
+					})}
 				>
 					<DatePicker
-						format={(date) => date.format(customFormat)}
+						format={(date): string =>
+							dayjs(date).tz(timezoneInitialValue).format(customFormat)
+						}
 						showTime
 						showNow={false}
 						renderExtraFooter={datePickerFooter}
@@ -464,7 +584,7 @@ export function PlannedDowntimeForm(
 							status={isError ? 'error' : undefined}
 							loading={isLoading}
 							tagRender={noTagRenderer}
-							onChange={handleAlertRulesChange}
+							onChange={handleChange}
 							showSearch
 							options={alertOptions}
 							filterOption={(input, option): boolean =>

frontend/src/container/PlannedDowntime/PlannedDowntimeList.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useEffect } from 'react';
+import { ReactNode, useEffect } from 'react';
 import { UseQueryResult } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
 import { Collapse, Flex, Space, Table, TableProps, Tag, Tooltip } from 'antd';
@@ -7,8 +7,8 @@ import type { DefaultOptionType } from 'antd/es/select';
 import type {
 	ListDowntimeSchedules200,
 	RenderErrorResponseDTO,
-	AlertmanagertypesPlannedMaintenanceDTO,
-	AlertmanagertypesScheduleDTO,
+	RuletypesPlannedMaintenanceDTO,
+	RuletypesRecurrenceDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import type { ErrorType } from 'api/generatedAPIInstance';
 import cx from 'classnames';
@@ -19,11 +19,12 @@ import { CalendarClock, PenLine, Trash2 } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
 import { USER_ROLES } from 'types/roles';
 
-import { showErrorNotification } from 'utils/error';
+import { showErrorNotification } from '../../utils/error';
 import {
 	formatDateTime,
 	getAlertOptionsFromIds,
 	getDuration,
+	getEndTime,
 	recurrenceInfo,
 } from './PlannedDowntimeutils';
 
@@ -125,28 +126,29 @@ export function CollapseListContent({
 	created_at,
 	created_by_name,
 	created_by_email,
-	schedule,
+	timeframe,
+	repeats,
 	updated_at,
 	updated_by_name,
 	alertOptions,
+	timezone,
 }: {
 	created_at?: string;
 	created_by_name?: string;
 	created_by_email?: string;
-	schedule?: AlertmanagertypesScheduleDTO;
+	timeframe: [string | undefined | null, string | undefined | null];
+	repeats?: RuletypesRecurrenceDTO | null;
 	updated_at?: string;
 	updated_by_name?: string;
 	alertOptions?: DefaultOptionType[];
+	timezone?: string;
 }): JSX.Element {
-	const repeats = schedule?.recurrence;
 	const renderItems = (title: string, value: ReactNode): JSX.Element => (
 		<div className="render-item-collapse-list">
 			<Typography>{title}</Typography>
 			<div className="render-item-value">{value}</div>
 		</div>
 	);
-	const startTime = formatDateTime(schedule?.startTime, schedule?.timezone);
-	const endTime = formatDateTime(schedule?.endTime, schedule?.timezone);
 
 	return (
 		<Flex vertical>
@@ -181,20 +183,16 @@ export function CollapseListContent({
 
 			{renderItems(
 				'Timeframe',
-				schedule?.startTime ? (
-					<Typography>{`${startTime} ⎯ ${endTime}`}</Typography>
+				timeframe[0] || timeframe[1] ? (
+					<Typography>{`${formatDateTime(timeframe[0])} ⎯ ${formatDateTime(
+						timeframe[1],
+					)}`}</Typography>
 				) : (
 					'-'
 				),
 			)}
-			{renderItems(
-				'Timezone',
-				<Typography>{schedule?.timezone || '-'}</Typography>,
-			)}
-			{renderItems(
-				'Repeats',
-				<Typography>{recurrenceInfo(repeats, schedule?.timezone)}</Typography>,
-			)}
+			{renderItems('Timezone', <Typography>{timezone || '-'}</Typography>)}
+			{renderItems('Repeats', <Typography>{recurrenceInfo(repeats)}</Typography>)}
 			{renderItems(
 				'Alerts silenced',
 				alertOptions?.length ? (
@@ -214,7 +212,7 @@ export function CollapseListContent({
 export function CustomCollapseList(
 	props: DowntimeSchedulesTableData & {
 		setInitialValues: React.Dispatch<
-			React.SetStateAction<Partial<AlertmanagertypesPlannedMaintenanceDTO>>
+			React.SetStateAction<Partial<RuletypesPlannedMaintenanceDTO>>
 		>;
 		setModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
 		handleDeleteDowntime: (id: string, name: string) => void;
@@ -234,12 +232,22 @@ export function CustomCollapseList(
 		setModalOpen,
 		handleDeleteDowntime,
 		setEditMode,
+		kind,
 	} = props;
 
 	const scheduleTime = schedule?.startTime
-		? dayjs(schedule.startTime).tz(schedule.timezone)
-		: createdAt || '';
-	const formattedDateAndTime = `Start time ⎯ ${formatDateTime(scheduleTime)} ${schedule?.timezone}`;
+		? dayjs(schedule.startTime).toISOString()
+		: createdAt
+			? dayjs(createdAt).toISOString()
+			: '';
+	// Combine time and date
+	const formattedDateAndTime = `Start time ⎯ ${formatDateTime(
+		defaultTo(scheduleTime, ''),
+	)} ${schedule?.timezone}`;
+	const endTime = getEndTime({
+		kind,
+		schedule,
+	} as Partial<RuletypesPlannedMaintenanceDTO>);
 
 	return (
 		<>
@@ -249,16 +257,21 @@ export function CustomCollapseList(
 						<HeaderComponent
 							duration={
 								schedule?.recurrence?.duration
-									? schedule.recurrence.duration
-									: getDuration(schedule?.startTime || '', schedule?.endTime || '')
+									? (schedule?.recurrence?.duration as string)
+									: getDuration(
+											schedule?.startTime ? dayjs(schedule.startTime).toISOString() : '',
+											schedule?.endTime ? dayjs(schedule.endTime).toISOString() : '',
+										)
 							}
 							name={defaultTo(name, '')}
-							handleEdit={() => {
+							handleEdit={(): void => {
 								setInitialValues({ ...props });
 								setModalOpen(true);
 								setEditMode(true);
 							}}
-							handleDelete={() => handleDeleteDowntime(id ?? '', name || '')}
+							handleDelete={(): void => {
+								handleDeleteDowntime(id ?? '', name || '');
+							}}
 						/>
 					}
 					key={id ?? ''}
@@ -266,10 +279,17 @@ export function CustomCollapseList(
 					<CollapseListContent
 						created_at={createdAt ? dayjs(createdAt).toISOString() : ''}
 						created_by_name={defaultTo(createdBy, '')}
-						schedule={schedule}
+						timeframe={[
+							schedule?.startTime?.toString(),
+							typeof endTime === 'string' ? endTime : endTime?.toString(),
+						]}
+						repeats={
+							schedule?.recurrence as RuletypesRecurrenceDTO | null | undefined
+						}
 						updated_at={updatedAt ? dayjs(updatedAt).toISOString() : ''}
 						updated_by_name={defaultTo(updatedBy, '')}
 						alertOptions={alertOptions}
+						timezone={defaultTo(schedule?.timezone, '')}
 					/>
 				</Panel>
 			</Collapse>
@@ -281,10 +301,9 @@ export function CustomCollapseList(
 	);
 }
 
-export type DowntimeSchedulesTableData =
-	AlertmanagertypesPlannedMaintenanceDTO & {
-		alertOptions: DefaultOptionType[];
-	};
+export type DowntimeSchedulesTableData = RuletypesPlannedMaintenanceDTO & {
+	alertOptions: DefaultOptionType[];
+};
 
 export function PlannedDowntimeList({
 	downtimeSchedules,
@@ -301,7 +320,7 @@ export function PlannedDowntimeList({
 	>;
 	alertOptions: DefaultOptionType[];
 	setInitialValues: React.Dispatch<
-		React.SetStateAction<Partial<AlertmanagertypesPlannedMaintenanceDTO>>
+		React.SetStateAction<Partial<RuletypesPlannedMaintenanceDTO>>
 	>;
 	setModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
 	handleDeleteDowntime: (id: string, name: string) => void;

frontend/src/container/PlannedDowntime/PlannedDowntimeutils.ts

@@ -5,14 +5,14 @@ import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import type {
 	DeleteDowntimeScheduleByIDPathParameters,
 	RenderErrorResponseDTO,
-	AlertmanagertypesPlannedMaintenanceDTO,
-	AlertmanagertypesRecurrenceDTO,
+	RuletypesPlannedMaintenanceDTO,
+	RuletypesRecurrenceDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import type { ErrorType } from 'api/generatedAPIInstance';
 import { AxiosError } from 'axios';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import dayjs, { Dayjs } from 'dayjs';
-import { isEmpty } from 'lodash-es';
+import dayjs from 'dayjs';
+import { isEmpty, isEqual } from 'lodash-es';
 import APIError from 'types/api/error';
 
 type DateTimeString = string | null | undefined;
@@ -38,20 +38,14 @@ export const getDuration = (
 	return `${hours} hours`;
 };
 
-export const formatDateTime = (
-	dateTimeString?: string | Dayjs | null,
-	timezone?: string,
-): string => {
+export const formatDateTime = (dateTimeString?: string | null): string => {
 	if (!dateTimeString) {
 		return 'N/A';
 	}
 
-	let dt = dayjs(dateTimeString);
-	if (timezone) {
-		dt = dt.tz(timezone);
-	}
-
-	return dt.format(DATE_TIME_FORMATS.MONTH_DATETIME);
+	return dayjs(dateTimeString.slice(0, 19)).format(
+		DATE_TIME_FORMATS.MONTH_DATETIME,
+	);
 };
 
 export const getAlertOptionsFromIds = (
@@ -66,8 +60,7 @@ export const getAlertOptionsFromIds = (
 	);
 
 export const recurrenceInfo = (
-	recurrence?: AlertmanagertypesRecurrenceDTO | null,
-	timezone?: string,
+	recurrence?: RuletypesRecurrenceDTO | null,
 ): string => {
 	if (!recurrence) {
 		return 'No';
@@ -76,10 +69,10 @@ export const recurrenceInfo = (
 	const { startTime, duration, repeatOn, repeatType, endTime } = recurrence;
 
 	const formattedStartTime = startTime
-		? formatDateTime(startTime, timezone)
+		? formatDateTime(dayjs(startTime).toISOString())
 		: '';
 	const formattedEndTime = endTime
-		? `to ${formatDateTime(endTime, timezone)}`
+		? `to ${formatDateTime(dayjs(endTime).toISOString())}`
 		: '';
 	const weeklyRepeatString = repeatOn ? `on ${repeatOn.join(', ')}` : '';
 	const durationString = duration ? `- Duration: ${duration}` : '';
@@ -87,20 +80,22 @@ export const recurrenceInfo = (
 	return `Repeats - ${repeatType} ${weeklyRepeatString} from ${formattedStartTime} ${formattedEndTime} ${durationString}`;
 };
 
-export const defaultInitialValues: Partial<AlertmanagertypesPlannedMaintenanceDTO> =
-	{
-		name: '',
-		description: '',
-		schedule: {
-			timezone: '',
-			endTime: undefined,
-			recurrence: undefined,
-			startTime: undefined,
-		},
-		alertIds: [],
-		createdAt: undefined,
-		createdBy: undefined,
-	};
+export const defautlInitialValues: Partial<
+	RuletypesPlannedMaintenanceDTO & { editMode: boolean }
+> = {
+	name: '',
+	description: '',
+	schedule: {
+		timezone: '',
+		endTime: undefined,
+		recurrence: undefined,
+		startTime: undefined,
+	},
+	alertIds: [],
+	createdAt: undefined,
+	createdBy: undefined,
+	editMode: false,
+};
 
 type DeleteDowntimeScheduleProps = {
 	deleteDowntimeScheduleAsync: UseMutateAsyncFunction<
@@ -215,6 +210,75 @@ export const recurrenceOptionWithSubmenu: Option[] = [
 	recurrenceOptions.monthly,
 ];
 
+export const getRecurrenceOptionFromValue = (
+	value?: string | Option | null,
+): Option | null | undefined => {
+	if (!value) {
+		return null;
+	}
+	if (typeof value === 'string') {
+		return Object.values(recurrenceOptions).find(
+			(option) => option.value === value,
+		);
+	}
+	return value;
+};
+
+export const getEndTime = ({
+	kind,
+	schedule,
+}: Partial<
+	RuletypesPlannedMaintenanceDTO & {
+		editMode: boolean;
+	}
+>): string | dayjs.Dayjs => {
+	if (kind === 'fixed') {
+		return schedule?.endTime ? dayjs(schedule.endTime).toISOString() : '';
+	}
+
+	return schedule?.recurrence?.endTime
+		? dayjs(schedule.recurrence.endTime).toISOString()
+		: '';
+};
+
 export const isScheduleRecurring = (
-	schedule?: AlertmanagertypesPlannedMaintenanceDTO['schedule'] | null,
+	schedule?: RuletypesPlannedMaintenanceDTO['schedule'] | null,
 ): boolean => (schedule ? !isEmpty(schedule?.recurrence) : false);
+
+function convertUtcOffsetToTimezoneOffset(offsetMinutes: number): string {
+	const sign = offsetMinutes >= 0 ? '+' : '-';
+	const absOffset = Math.abs(offsetMinutes);
+	const hours = String(Math.floor(absOffset / 60)).padStart(2, '0');
+	const minutes = String(absOffset % 60).padStart(2, '0');
+	return `${sign}${hours}:${minutes}`;
+}
+
+export function formatWithTimezone(
+	dateValue?: string | dayjs.Dayjs,
+	timezone?: string,
+): string {
+	const parsedDate =
+		typeof dateValue === 'string' ? dateValue : dateValue?.format();
+
+	// Get the target timezone offset
+	const targetOffset = convertUtcOffsetToTimezoneOffset(
+		dayjs(dateValue).tz(timezone).utcOffset(),
+	);
+
+	return `${parsedDate?.substring(0, 19)}${targetOffset}`;
+}
+
+export function handleTimeConversion(
+	dateValue: string | dayjs.Dayjs,
+	timezoneInit?: string,
+	timezone?: string,
+	shouldKeepLocalTime?: boolean,
+): string {
+	const timezoneChanged = !isEqual(timezoneInit, timezone);
+	const initialTime = dayjs(dateValue).tz(timezoneInit);
+
+	const formattedTime = formatWithTimezone(initialTime, timezone);
+	return timezoneChanged
+		? formattedTime
+		: dayjs(dateValue).tz(timezone, shouldKeepLocalTime).format();
+}

frontend/src/container/PlannedDowntime/__test__/PlannedDowntime.test.tsx

@@ -27,10 +27,10 @@ const MOCK_DATE_3 = '2024-01-03';
 const MOCK_DOWNTIME_1 = createMockDowntime({
 	id: '1',
 	name: MOCK_DOWNTIME_1_NAME,
-	createdAt: MOCK_DATE_1,
-	updatedAt: MOCK_DATE_1,
+	createdAt: new Date(MOCK_DATE_1),
+	updatedAt: new Date(MOCK_DATE_1),
 	schedule: buildSchedule({
-		startTime: MOCK_DATE_1,
+		startTime: new Date(MOCK_DATE_1),
 		timezone: 'UTC',
 	}),
 	alertIds: [],
@@ -39,10 +39,10 @@ const MOCK_DOWNTIME_1 = createMockDowntime({
 const MOCK_DOWNTIME_2 = createMockDowntime({
 	id: '2',
 	name: MOCK_DOWNTIME_2_NAME,
-	createdAt: MOCK_DATE_2,
-	updatedAt: MOCK_DATE_2,
+	createdAt: new Date(MOCK_DATE_2),
+	updatedAt: new Date(MOCK_DATE_2),
 	schedule: buildSchedule({
-		startTime: MOCK_DATE_2,
+		startTime: new Date(MOCK_DATE_2),
 		timezone: 'UTC',
 	}),
 	alertIds: [],
@@ -51,10 +51,10 @@ const MOCK_DOWNTIME_2 = createMockDowntime({
 const MOCK_DOWNTIME_3 = createMockDowntime({
 	id: '3',
 	name: MOCK_DOWNTIME_3_NAME,
-	createdAt: MOCK_DATE_3,
-	updatedAt: MOCK_DATE_3,
+	createdAt: new Date(MOCK_DATE_3),
+	updatedAt: new Date(MOCK_DATE_3),
 	schedule: buildSchedule({
-		startTime: MOCK_DATE_3,
+		startTime: new Date(MOCK_DATE_3),
 		timezone: 'UTC',
 	}),
 	alertIds: [],

frontend/src/container/PlannedDowntime/__test__/testUtils.ts

@@ -1,15 +1,15 @@
 import type {
-	AlertmanagertypesScheduleDTO,
-	AlertmanagertypesPlannedMaintenanceDTO,
+	RuletypesPlannedMaintenanceDTO,
+	RuletypesScheduleDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import {
-	AlertmanagertypesMaintenanceKindDTO,
-	AlertmanagertypesMaintenanceStatusDTO,
+	RuletypesMaintenanceKindDTO,
+	RuletypesMaintenanceStatusDTO,
 } from 'api/generated/services/sigNoz.schemas';
 
 export const buildSchedule = (
-	schedule: Partial<AlertmanagertypesScheduleDTO>,
-): AlertmanagertypesScheduleDTO => ({
+	schedule: Partial<RuletypesScheduleDTO>,
+): RuletypesScheduleDTO => ({
 	timezone: schedule?.timezone ?? '',
 	startTime: schedule?.startTime,
 	endTime: schedule?.endTime,
@@ -17,14 +17,14 @@ export const buildSchedule = (
 });
 
 export const createMockDowntime = (
-	overrides: Partial<AlertmanagertypesPlannedMaintenanceDTO>,
-): AlertmanagertypesPlannedMaintenanceDTO => ({
+	overrides: Partial<RuletypesPlannedMaintenanceDTO>,
+): RuletypesPlannedMaintenanceDTO => ({
 	id: overrides.id ?? '0',
 	name: overrides.name ?? '',
 	description: overrides.description ?? '',
 	schedule: buildSchedule({
 		timezone: 'UTC',
-		startTime: '2024-01-01',
+		startTime: new Date('2024-01-01'),
 		...overrides.schedule,
 	}),
 	alertIds: overrides.alertIds ?? [],
@@ -32,6 +32,6 @@ export const createMockDowntime = (
 	createdBy: overrides.createdBy ?? '',
 	updatedAt: overrides.updatedAt,
 	updatedBy: overrides.updatedBy ?? '',
-	kind: overrides.kind ?? AlertmanagertypesMaintenanceKindDTO.recurring,
-	status: overrides.status ?? AlertmanagertypesMaintenanceStatusDTO.active,
+	kind: overrides.kind ?? RuletypesMaintenanceKindDTO.recurring,
+	status: overrides.status ?? RuletypesMaintenanceStatusDTO.active,
 });