feat: change color pallete

* chore: broke down drilldown navigate into a saperate hook

* chore: fmt fix

cmd/community/Dockerfile

@@ -11,7 +11,7 @@ RUN apk update && \
 
 
 COPY ./target/${OS}-${TARGETARCH}/signoz-community /root/signoz
-COPY ./templates/email /root/templates
+COPY ./templates /root/templates
 COPY frontend/build/ /etc/signoz/web/
 
 RUN chmod 755 /root /root/signoz

cmd/community/Dockerfile.multi-arch

@@ -12,7 +12,7 @@ RUN apk update && \
     rm -rf /var/cache/apk/*
 
 COPY ./target/${OS}-${ARCH}/signoz-community /root/signoz-community
-COPY ./templates/email /root/templates
+COPY ./templates /root/templates
 COPY frontend/build/ /etc/signoz/web/
 
 RUN chmod 755 /root /root/signoz-community

cmd/enterprise/Dockerfile

@@ -11,7 +11,7 @@ RUN apk update && \
 
 
 COPY ./target/${OS}-${TARGETARCH}/signoz /root/signoz
-COPY ./templates/email /root/templates
+COPY ./templates /root/templates
 COPY frontend/build/ /etc/signoz/web/
 
 RUN chmod 755 /root /root/signoz

cmd/enterprise/Dockerfile.integration

@@ -26,7 +26,7 @@ RUN go mod download
 COPY ./cmd/ ./cmd/
 COPY ./ee/ ./ee/
 COPY ./pkg/ ./pkg/
-COPY ./templates/email /root/templates
+COPY ./templates /root/templates
 
 COPY Makefile Makefile
 RUN TARGET_DIR=/root ARCHS=${TARGETARCH} ZEUS_URL=${ZEUSURL} LICENSE_URL=${ZEUSURL}/api/v1 make go-build-enterprise-race

cmd/enterprise/Dockerfile.multi-arch

@@ -12,7 +12,7 @@ RUN apk update && \
     rm -rf /var/cache/apk/*
 
 COPY ./target/${OS}-${ARCH}/signoz /root/signoz
-COPY ./templates/email /root/templates
+COPY ./templates /root/templates
 COPY frontend/build/ /etc/signoz/web/
 
 RUN chmod 755 /root /root/signoz

cmd/enterprise/Dockerfile.with-web.integration

@@ -35,7 +35,7 @@ RUN go mod download
 COPY ./cmd/ ./cmd/
 COPY ./ee/ ./ee/
 COPY ./pkg/ ./pkg/
-COPY ./templates/email /root/templates
+COPY ./templates /root/templates
 
 COPY Makefile Makefile
 RUN TARGET_DIR=/root ARCHS=${TARGETARCH} ZEUS_URL=${ZEUSURL} LICENSE_URL=${ZEUSURL}/api/v1 make go-build-enterprise-race

conf/example.yaml

@@ -182,6 +182,11 @@ alertmanager:
     poll_interval: 1m
     # The URL under which Alertmanager is externally reachable (for example, if Alertmanager is served via a reverse proxy). Used for generating relative and absolute links back to Alertmanager itself.
     external_url: http://localhost:8080
+    # The list of globs from which SigNoz's alertmanager notification templates are loaded (e.g. the email.signoz.html layout).
+    # This mirrors the upstream alertmanager `templates` config option. The upstream default templates (default.tmpl, email.tmpl)
+    # are always loaded from the embedded alertmanager assets, so only SigNoz's own templates need to be listed here.
+    templates:
+      - /opt/signoz/conf/templates/alertmanager/*.gotmpl
     # The global configuration for the alertmanager. All the exahustive fields can be found in the upstream: https://github.com/prometheus/alertmanager/blob/efa05feffd644ba4accb526e98a8c6545d26a783/config/config.go#L833
     global:
       # ResolveTimeout is the time after which an alert is declared resolved if it has not been updated.

docs/api/openapi.yml

@@ -129,6 +129,8 @@ components:
           type: string
         schedule:
           $ref: '#/components/schemas/AlertmanagertypesSchedule'
+        scope:
+          type: string
         status:
           $ref: '#/components/schemas/AlertmanagertypesMaintenanceStatus'
         updatedAt:
@@ -272,6 +274,8 @@ components:
           type: string
         schedule:
           $ref: '#/components/schemas/AlertmanagertypesSchedule'
+        scope:
+          type: string
       required:
       - name
       - schedule

ee/modules/cloudintegration/implcloudintegration/module.go

@@ -535,7 +535,7 @@ func (module *module) getOrCreateAPIKey(ctx context.Context, orgID valuer.UUID,
 func (module *module) provisionDashboards(ctx context.Context, orgID valuer.UUID, createdBy string, creator valuer.UUID, provider cloudintegrationtypes.CloudProviderType, service *cloudintegrationtypes.CloudIntegrationService, serviceDefinition *cloudintegrationtypes.ServiceDefinition) error {
 	// TODO: DB calls are in for loop, can be optimized later.
 	for _, dashboard := range serviceDefinition.Assets.Dashboards {
-		slug := cloudintegrationtypes.IntegrationDashboardSlug(provider, service.Type, dashboard.ID)
+		slug := cloudintegrationtypes.CloudIntegrationDashboardSlug(provider, service.Type, dashboard.ID)
 
 		existing, err := module.store.GetIntegrationDashboardBySlug(ctx, orgID, cloudintegrationtypes.IntegrationDashboardProviderCloudIntegration, slug)
 		if err != nil && !errors.Ast(err, errors.TypeNotFound) {
@@ -562,7 +562,7 @@ func (module *module) provisionDashboards(ctx context.Context, orgID valuer.UUID
 // deprovisionDashboards deletes all dashboard and integration_dashboard rows for the given service.
 // make sure to call this within a transaction.
 func (module *module) deprovisionDashboards(ctx context.Context, orgID valuer.UUID, provider cloudintegrationtypes.CloudProviderType, serviceID cloudintegrationtypes.ServiceID) error {
-	slugPrefix := cloudintegrationtypes.IntegrationDashboardSlugPrefix(provider, serviceID)
+	slugPrefix := cloudintegrationtypes.CloudIntegrationDashboardSlugPrefix(provider, serviceID)
 	rows, err := module.store.ListIntegrationDashboardsBySlugPrefix(ctx, orgID, cloudintegrationtypes.IntegrationDashboardProviderCloudIntegration, slugPrefix)
 	if err != nil {
 		return err
@@ -588,7 +588,7 @@ func (module *module) deprovisionDashboards(ctx context.Context, orgID valuer.UU
 // TODO: remove this hack and send idiomatic response to client.
 func (module *module) enrichDashboardIDs(ctx context.Context, orgID valuer.UUID, provider cloudintegrationtypes.CloudProviderType, serviceID cloudintegrationtypes.ServiceID, serviceDefinition *cloudintegrationtypes.ServiceDefinition) error {
 	for i, d := range serviceDefinition.Assets.Dashboards {
-		slug := cloudintegrationtypes.IntegrationDashboardSlug(provider, serviceID, d.ID)
+		slug := cloudintegrationtypes.CloudIntegrationDashboardSlug(provider, serviceID, d.ID)
 		row, err := module.store.GetIntegrationDashboardBySlug(ctx, orgID, cloudintegrationtypes.IntegrationDashboardProviderCloudIntegration, slug)
 		if err != nil {
 			if errors.Ast(err, errors.TypeNotFound) {

ee/query-service/app/api/api.go

@@ -9,7 +9,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/global"
 	"github.com/SigNoz/signoz/pkg/http/middleware"
 	baseapp "github.com/SigNoz/signoz/pkg/query-service/app"
-	"github.com/SigNoz/signoz/pkg/query-service/app/cloudintegrations"
 	"github.com/SigNoz/signoz/pkg/query-service/app/integrations"
 	"github.com/SigNoz/signoz/pkg/query-service/app/logparsingpipeline"
 	"github.com/SigNoz/signoz/pkg/query-service/interfaces"
@@ -24,7 +23,6 @@ type APIHandlerOptions struct {
 	DataConnector                 interfaces.Reader
 	UsageManager                  *usage.Manager
 	IntegrationsController        *integrations.Controller
-	CloudIntegrationsController   *cloudintegrations.Controller
 	LogsParsingPipelineController *logparsingpipeline.LogParsingPipelineController
 	GatewayUrl                    string
 	// Querier Influx Interval
@@ -42,7 +40,6 @@ func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz, config signoz.
 	baseHandler, err := baseapp.NewAPIHandler(baseapp.APIHandlerOpts{
 		Reader:                        opts.DataConnector,
 		IntegrationsController:        opts.IntegrationsController,
-		CloudIntegrationsController:   opts.CloudIntegrationsController,
 		LogsParsingPipelineController: opts.LogsParsingPipelineController,
 		FluxInterval:                  opts.FluxInterval,
 		LicensingAPI:                  httplicensing.NewLicensingAPI(signoz.Licensing),
@@ -91,17 +88,6 @@ func (ah *APIHandler) RegisterRoutes(router *mux.Router, am *middleware.AuthZ) {
 
 }
 
-func (ah *APIHandler) RegisterCloudIntegrationsRoutes(router *mux.Router, am *middleware.AuthZ) {
-
-	ah.APIHandler.RegisterCloudIntegrationsRoutes(router, am)
-
-	router.HandleFunc(
-		"/api/v1/cloud-integrations/{cloudProvider}/accounts/generate-connection-params",
-		am.EditAccess(ah.CloudIntegrationsGenerateConnectionParams),
-	).Methods(http.MethodGet)
-
-}
-
 func (ah *APIHandler) getVersion(w http.ResponseWriter, r *http.Request) {
 	versionResponse := basemodel.GetVersionResponse{
 		Version:        version.Info.Version(),

ee/query-service/app/api/featureFlags.go

@@ -89,6 +89,15 @@ func (ah *APIHandler) getFeatureFlags(w http.ResponseWriter, r *http.Request) {
 		Route:      "",
 	})
 
+	useDashboardV2 := ah.Signoz.Flagger.BooleanOrEmpty(ctx, flagger.FeatureUseDashboardV2, evalCtx)
+	featureSet = append(featureSet, &licensetypes.Feature{
+		Name:       valuer.NewString(flagger.FeatureUseDashboardV2.String()),
+		Active:     useDashboardV2,
+		Usage:      0,
+		UsageLimit: -1,
+		Route:      "",
+	})
+
 	if constants.IsDotMetricsEnabled {
 		for idx, feature := range featureSet {
 			if feature.Name == licensetypes.DotMetricsEnabled {

ee/query-service/app/server.go

@@ -30,7 +30,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/query-service/agentConf"
 	baseapp "github.com/SigNoz/signoz/pkg/query-service/app"
 	"github.com/SigNoz/signoz/pkg/query-service/app/clickhouseReader"
-	"github.com/SigNoz/signoz/pkg/query-service/app/cloudintegrations"
 	"github.com/SigNoz/signoz/pkg/query-service/app/integrations"
 	"github.com/SigNoz/signoz/pkg/query-service/app/logparsingpipeline"
 	"github.com/SigNoz/signoz/pkg/query-service/app/opamp"
@@ -86,20 +85,13 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 	// initiate opamp
 	opAmpModel.Init(signoz.SQLStore, signoz.Instrumentation.Logger(), signoz.Modules.OrgGetter)
 
-	integrationsController, err := integrations.NewController(signoz.SQLStore)
+	integrationsController, err := integrations.NewController(signoz.SQLStore, signoz.Modules.Dashboard)
 	if err != nil {
 		return nil, fmt.Errorf(
 			"couldn't create integrations controller: %w", err,
 		)
 	}
 
-	cloudIntegrationsController, err := cloudintegrations.NewController(signoz.SQLStore)
-	if err != nil {
-		return nil, fmt.Errorf(
-			"couldn't create cloud provider integrations controller: %w", err,
-		)
-	}
-
 	// ingestion pipelines manager
 	logParsingPipelineController, err := logparsingpipeline.NewLogParsingPipelinesController(
 		signoz.SQLStore,
@@ -134,7 +126,6 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 		DataConnector:                 reader,
 		UsageManager:                  usageManager,
 		IntegrationsController:        integrationsController,
-		CloudIntegrationsController:   cloudIntegrationsController,
 		LogsParsingPipelineController: logParsingPipelineController,
 		FluxInterval:                  config.Querier.FluxInterval,
 		GatewayUrl:                    config.Gateway.URL.String(),
@@ -200,7 +191,6 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 	apiHandler.RegisterRoutes(r, am)
 	apiHandler.RegisterLogsRoutes(r, am)
 	apiHandler.RegisterIntegrationRoutes(r, am)
-	apiHandler.RegisterCloudIntegrationsRoutes(r, am)
 	apiHandler.RegisterQueryRangeV3Routes(r, am)
 	apiHandler.RegisterInfraMetricsRoutes(r, am)
 	apiHandler.RegisterQueryRangeV4Routes(r, am)

frontend/index.html

@@ -94,6 +94,19 @@
 				}
 			})();
 		</script>
+		<script type="application/json" id="signoz-boot-settings">
+			[[.Settings]]
+		</script>
+		<script>
+			try {
+				var _el = document.getElementById('signoz-boot-settings');
+				window.signozBootData = {
+					settings: _el ? JSON.parse(_el.textContent) : null,
+				};
+			} catch (e) {
+				window.signozBootData = { settings: null };
+			}
+		</script>
 		<noscript>You need to enable JavaScript to run this app.</noscript>
 		<div id="root"></div>
 
@@ -135,7 +148,10 @@
 		</script>
 		<script>
 			var APPCUES_APP_ID = '<%- APPCUES_APP_ID %>';
-			if (APPCUES_APP_ID) {
+			var appcuesSettings =
+				((window.signozBootData || {}).settings || {}).appcues || {};
+			var appcuesEnabled = appcuesSettings.enabled !== false;
+			if (APPCUES_APP_ID && appcuesEnabled) {
 				(function (d, t) {
 					var a = d.createElement(t);
 					a.async = 1;

frontend/src/AppRoutes/index.tsx

@@ -35,6 +35,7 @@ import { PreferenceContextProvider } from 'providers/preferences/context/Prefere
 import { QueryBuilderProvider } from 'providers/QueryBuilder';
 import { LicenseStatus } from 'types/api/licensesV3/getActive';
 import { extractDomain } from 'utils/app';
+import { bootSettings } from 'utils/bootData';
 
 import { Home } from './pageComponents';
 import PrivateRoute from './Private';
@@ -332,7 +333,7 @@ function App(): JSX.Element {
 
 	useEffect(() => {
 		if (isCloudUser || isEnterpriseSelfHostedUser) {
-			if (process.env.POSTHOG_KEY) {
+			if (bootSettings.posthog.enabled && process.env.POSTHOG_KEY) {
 				posthog.init(process.env.POSTHOG_KEY, {
 					api_host: 'https://us.i.posthog.com',
 					person_profiles: 'identified_only', // or 'always' to create profiles for anonymous users as well

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

@@ -225,6 +225,10 @@ export interface AlertmanagertypesPlannedMaintenanceDTO {
 	 */
 	name: string;
 	schedule: AlertmanagertypesScheduleDTO;
+	/**
+	 * @type string
+	 */
+	scope?: string;
 	status: AlertmanagertypesMaintenanceStatusDTO;
 	/**
 	 * @type string
@@ -1714,6 +1718,10 @@ export interface AlertmanagertypesPostablePlannedMaintenanceDTO {
 	 */
 	name: string;
 	schedule: AlertmanagertypesScheduleDTO;
+	/**
+	 * @type string
+	 */
+	scope?: string;
 }
 
 export interface AlertmanagertypesPostableRoutePolicyDTO {

frontend/src/constants/app.ts

@@ -10,9 +10,6 @@ export const DEFAULT_AUTH0_APP_REDIRECTION_PATH = ROUTES.APPLICATION;
 
 export const INVITE_MEMBERS_HASH = '#invite-team-members';
 
-export const SIGNOZ_UPGRADE_PLAN_URL =
-	'https://upgrade.signoz.io/upgrade-from-app';
-
 export const DASHBOARD_TIME_IN_DURATION = 'refreshInterval';
 
 export const DEFAULT_ENTITY_VERSION = 'v3';

frontend/src/constants/features.ts

@@ -11,4 +11,5 @@ export enum FeatureKeys {
 	DOT_METRICS_ENABLED = 'dot_metrics_enabled',
 	USE_JSON_BODY = 'use_json_body',
 	USE_FINE_GRAINED_AUTHZ = 'use_fine_grained_authz',
+	USE_DASHBOARD_V2 = 'use_dashboard_v2',
 }

frontend/src/container/AllAlertChannels/__tests__/CreateAlertChannelNormalUser.test.tsx

@@ -1,4 +1,3 @@
-import { SIGNOZ_UPGRADE_PLAN_URL } from 'constants/app';
 import CreateAlertChannels from 'container/CreateAlertChannels';
 import { ChannelType } from 'container/CreateAlertChannels/config';
 import {
@@ -313,16 +312,6 @@ describe('Create Alert Channel (Normal User)', () => {
 				expect(screen.getByText('Microsoft Teams')).toBeInTheDocument();
 			});
 
-			it.skip('Should check if the upgrade plan message is shown', () => {
-				expect(screen.getByText('Upgrade to a Paid Plan')).toBeInTheDocument();
-				expect(
-					screen.getByText(/This feature is available for paid plans only./),
-				).toBeInTheDocument();
-				const link = screen.getByRole('link', { name: 'Click here' });
-				expect(link).toBeInTheDocument();
-				expect(link).toHaveAttribute('href', SIGNOZ_UPGRADE_PLAN_URL);
-				expect(screen.getByText(/to Upgrade/)).toBeInTheDocument();
-			});
 			it('Should check if the form buttons are displayed properly (Save, Test, Back)', () => {
 				expect(
 					screen.getByRole('button', { name: 'button_save_channel' }),

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/__tests__/utils.test.ts

@@ -0,0 +1,282 @@
+import { Widgets } from 'types/api/dashboard/getAll';
+import {
+	MetricRangePayloadProps,
+	MetricRangePayloadV3,
+} from 'types/api/metrics/getQueryRange';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import { PanelMode } from '../../types';
+import { prepareBarPanelConfig } from '../utils';
+import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
+
+jest.mock(
+	'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils',
+	() => ({
+		getStoredSeriesVisibility: jest.fn(),
+	}),
+);
+
+jest.mock('lib/uPlotLib/plugins/onClickPlugin', () => ({
+	__esModule: true,
+	default: jest.fn().mockReturnValue({ name: 'onClickPlugin' }),
+}));
+
+jest.mock('lib/dashboard/getQueryResults', () => ({
+	getLegend: jest.fn(
+		(_queryData: unknown, _query: unknown, labelName: string) =>
+			`legend-${labelName}`,
+	),
+}));
+
+jest.mock('lib/getLabelName', () => ({
+	__esModule: true,
+	default: jest.fn(
+		(_metric: unknown, _queryName: string, _legend: string) => 'baseLabel',
+	),
+}));
+
+jest.mock(
+	'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils',
+	() => ({
+		getInitialStackedBands: jest.fn().mockReturnValue([]),
+	}),
+);
+
+const getLegendMock = jest.requireMock('lib/dashboard/getQueryResults')
+	.getLegend as jest.Mock;
+const getLabelNameMock = jest.requireMock('lib/getLabelName')
+	.default as jest.Mock;
+const getInitialStackedBandsMock = jest.requireMock(
+	'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils',
+).getInitialStackedBands as jest.Mock;
+
+const createApiResponse = (
+	result: MetricRangePayloadProps['data']['result'] = [],
+): MetricRangePayloadProps => ({
+	data: {
+		result,
+		resultType: 'matrix',
+		newResult: null as unknown as MetricRangePayloadV3,
+	},
+});
+
+const createWidget = (overrides: Partial<Widgets> = {}): Widgets =>
+	({
+		id: 'widget-1',
+		yAxisUnit: 'ms',
+		isLogScale: false,
+		thresholds: [],
+		customLegendColors: {},
+		...overrides,
+	}) as Widgets;
+
+const defaultTimezone = {
+	name: 'UTC',
+	value: 'UTC',
+	offset: 'UTC',
+	searchIndex: 'UTC',
+};
+
+describe('BarPanel utils', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		getLabelNameMock.mockReturnValue('baseLabel');
+		getLegendMock.mockImplementation(
+			(_queryData: unknown, _query: unknown, labelName: string) =>
+				`legend-${labelName}`,
+		);
+	});
+
+	describe('prepareBarPanelData', () => {
+		it('returns aligned data with timestamps and empty series when result is empty', () => {
+			const data = prepareChartData(createApiResponse([]));
+			expect(data).toHaveLength(1);
+			expect(data[0]).toStrictEqual([]);
+		});
+
+		it('returns timestamps and one series of y values for single series', () => {
+			const data = prepareChartData(
+				createApiResponse([
+					{
+						metric: {},
+						queryName: 'Q',
+						legend: 'Series A',
+						values: [
+							[1000, '10'],
+							[2000, '20'],
+						],
+					} as MetricRangePayloadProps['data']['result'][0],
+				]),
+			);
+			expect(data).toHaveLength(2);
+			expect(data[0]).toStrictEqual([1000, 2000]);
+			expect(data[1]).toStrictEqual([10, 20]);
+		});
+
+		it('merges timestamps and fills missing values with null for multiple series', () => {
+			const data = prepareChartData(
+				createApiResponse([
+					{
+						metric: {},
+						queryName: 'Q1',
+						values: [
+							[1000, '1'],
+							[3000, '3'],
+						],
+					} as MetricRangePayloadProps['data']['result'][0],
+					{
+						metric: {},
+						queryName: 'Q2',
+						values: [
+							[1000, '10'],
+							[2000, '20'],
+						],
+					} as MetricRangePayloadProps['data']['result'][0],
+				]),
+			);
+			expect(data[0]).toStrictEqual([1000, 2000, 3000]);
+			expect(data[1]).toStrictEqual([1, null, 3]);
+			expect(data[2]).toStrictEqual([10, 20, null]);
+		});
+	});
+
+	describe('prepareBarPanelConfig', () => {
+		const baseParams = {
+			widget: createWidget(),
+			isDarkMode: true,
+			currentQuery: {} as Query,
+			onClick: jest.fn(),
+			onDragSelect: jest.fn(),
+			apiResponse: createApiResponse(),
+			timezone: defaultTimezone,
+			panelMode: PanelMode.DASHBOARD_VIEW,
+		};
+
+		it('adds no series when apiResponse has empty result', () => {
+			const config = prepareBarPanelConfig(baseParams).getConfig();
+			expect(config.series).toHaveLength(1);
+		});
+
+		it('adds one series per result item', () => {
+			const apiResponse = createApiResponse([
+				{
+					metric: {},
+					queryName: 'Q1',
+					values: [[1000, '1']],
+				} as MetricRangePayloadProps['data']['result'][0],
+				{
+					metric: {},
+					queryName: 'Q2',
+					values: [[1000, '2']],
+				} as MetricRangePayloadProps['data']['result'][0],
+			]);
+			const config = prepareBarPanelConfig({
+				...baseParams,
+				apiResponse,
+			}).getConfig();
+			expect(config.series).toHaveLength(3);
+		});
+
+		it('uses getLegend for label when currentQuery is provided', () => {
+			const apiResponse = createApiResponse([
+				{
+					metric: {},
+					queryName: 'Q1',
+					legend: 'L1',
+					values: [[1000, '1']],
+				} as MetricRangePayloadProps['data']['result'][0],
+			]);
+			const config = prepareBarPanelConfig({
+				...baseParams,
+				apiResponse,
+				currentQuery: {} as Query,
+			}).getConfig();
+			expect(getLegendMock).toHaveBeenCalled();
+			expect(config.series?.[1]).toMatchObject({ label: 'legend-baseLabel' });
+		});
+
+		it('uses getLabelName for label when currentQuery is null', () => {
+			getLegendMock.mockReset();
+			const apiResponse = createApiResponse([
+				{
+					metric: { __name__: 'requests' },
+					queryName: 'Q1',
+					values: [[1000, '1']],
+				} as MetricRangePayloadProps['data']['result'][0],
+			]);
+			prepareBarPanelConfig({
+				...baseParams,
+				apiResponse,
+				currentQuery: null as unknown as Query,
+			});
+			expect(getLabelNameMock).toHaveBeenCalled();
+			expect(getLegendMock).not.toHaveBeenCalled();
+		});
+
+		it('passes result metric to each series for cross-panel sync', () => {
+			const metric = { host: 'server1', __name__: 'http_requests' };
+			const apiResponse = createApiResponse([
+				{
+					metric,
+					queryName: 'Q1',
+					values: [[1000, '1']],
+				} as MetricRangePayloadProps['data']['result'][0],
+			]);
+			const config = prepareBarPanelConfig({
+				...baseParams,
+				apiResponse,
+			}).getConfig();
+			expect(config.series?.[1]).toMatchObject({ metric });
+		});
+
+		it('uses widget customLegendColors for series stroke', () => {
+			const widget = createWidget({
+				customLegendColors: { 'legend-baseLabel': '#ff0000' },
+			});
+			const apiResponse = createApiResponse([
+				{
+					metric: {},
+					queryName: 'Q',
+					values: [[1000, '1']],
+				} as MetricRangePayloadProps['data']['result'][0],
+			]);
+			const config = prepareBarPanelConfig({
+				...baseParams,
+				widget,
+				apiResponse,
+			}).getConfig();
+			expect(config.series?.[1]).toMatchObject({ stroke: '#ff0000' });
+		});
+
+		it('calls getInitialStackedBands when widget is stackedBarChart', () => {
+			const widget = createWidget({ stackedBarChart: true });
+			const apiResponse = createApiResponse([
+				{
+					metric: {},
+					queryName: 'Q1',
+					values: [[1000, '1']],
+				} as MetricRangePayloadProps['data']['result'][0],
+				{
+					metric: {},
+					queryName: 'Q2',
+					values: [[1000, '2']],
+				} as MetricRangePayloadProps['data']['result'][0],
+			]);
+			prepareBarPanelConfig({ ...baseParams, widget, apiResponse });
+			// seriesCount = result.length + 1 = 3
+			expect(getInitialStackedBandsMock).toHaveBeenCalledWith(3);
+		});
+
+		it('does not call getInitialStackedBands for non-stacked chart', () => {
+			const apiResponse = createApiResponse([
+				{
+					metric: {},
+					queryName: 'Q1',
+					values: [[1000, '1']],
+				} as MetricRangePayloadProps['data']['result'][0],
+			]);
+			prepareBarPanelConfig({ ...baseParams, apiResponse });
+			expect(getInitialStackedBandsMock).not.toHaveBeenCalled();
+		});
+	});
+});

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/__tests__/utils.test.ts

@@ -303,6 +303,27 @@ describe('TimeSeriesPanel utils', () => {
 			expect(seriesConfig!.stroke).toBe('#ff0000');
 		});
 
+		it('passes result metric to each series for cross-panel sync', () => {
+			const metric = { host: 'server1', __name__: 'cpu' };
+			const apiResponse = createApiResponse([
+				{
+					metric,
+					queryName: 'Q',
+					values: [
+						[1000, '1'],
+						[2000, '2'],
+					],
+				} as MetricRangePayloadProps['data']['result'][0],
+			]);
+
+			const config = prepareUPlotConfig({
+				...baseParams,
+				apiResponse,
+			}).getConfig();
+
+			expect(config.series?.[1]).toMatchObject({ metric });
+		});
+
 		it('adds multiple series when result has multiple items', () => {
 			const apiResponse = createApiResponse([
 				{

frontend/src/container/PlannedDowntime/PlannedDowntime.styles.scss

@@ -81,6 +81,20 @@
 		}
 	}
 
+	.alert-rule-scope {
+		margin-bottom: 12px;
+
+		.ant-radio-wrapper {
+			color: var(--l1-foreground);
+		}
+	}
+
+	.alert-rule-all-warning {
+		font-size: 12px;
+		font-weight: 400;
+		color: var(--l2-foreground);
+	}
+
 	.formItemWithBullet {
 		margin-bottom: 0;
 	}

frontend/src/container/PlannedDowntime/PlannedDowntimeForm.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Check } from '@signozhq/icons';
+import { Check, Info } from '@signozhq/icons';
 import {
 	Button,
 	DatePicker,
@@ -8,9 +8,11 @@ import {
 	FormInstance,
 	Input,
 	Modal,
+	Radio,
 	Select,
 	SelectProps,
 	Spin,
+	Tooltip,
 } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import type { DefaultOptionType } from 'antd/es/select';
@@ -70,14 +72,18 @@ const TZ_OPTIONS: DefaultOptionType[] = ALL_TIME_ZONES.map(
 	}),
 );
 
+type AlertRuleScope = 'all' | 'specific';
+
 interface PlannedDowntimeFormData {
 	name: string;
 	startTime: dayjs.Dayjs | null;
 	endTime: dayjs.Dayjs | null;
 	recurrence?: AlertmanagertypesRecurrenceDTO;
+	alertRuleScope: AlertRuleScope;
 	alertRules: DefaultOptionType[];
 	recurrenceSelect?: AlertmanagertypesRecurrenceDTO;
 	timezone?: string;
+	scope?: string;
 }
 
 const customFormat = DATE_TIME_FORMATS.ORDINAL_DATETIME;
@@ -127,6 +133,12 @@ export function PlannedDowntimeForm(
 			recurrenceOptions.doesNotRepeat.value,
 	);
 
+	const [alertRuleScope, setAlertRuleScope] = useState<AlertRuleScope>(
+		initialValues.id && (initialValues.alertIds || []).length === 0
+			? 'all'
+			: 'specific',
+	);
+
 	const { notifications } = useNotifications();
 	const { showErrorModal } = useErrorModal();
 
@@ -140,10 +152,14 @@ export function PlannedDowntimeForm(
 	const saveHandler = useCallback(
 		async (values: PlannedDowntimeFormData) => {
 			const data: AlertmanagertypesPostablePlannedMaintenanceDTO = {
-				alertIds: values.alertRules
-					.map((alert) => alert.value)
-					.filter((alert) => alert !== undefined) as string[],
+				alertIds:
+					values.alertRuleScope === 'all'
+						? []
+						: (values.alertRules
+								.map((alert) => alert.value)
+								.filter((alert) => alert !== undefined) as string[]),
 				name: values.name,
+				scope: values.scope,
 				schedule: {
 					startTime: values.startTime?.format(),
 					endTime: values.endTime?.format(),
@@ -262,12 +278,13 @@ export function PlannedDowntimeForm(
 		const startTime = schedule?.recurrence?.startTime || schedule?.startTime;
 		const endTime = schedule?.recurrence?.endTime || schedule?.endTime;
 
+		const initialAlertIds = initialValues.alertIds || [];
+
 		return {
 			name: defaultTo(initialValues.name, ''),
-			alertRules: getAlertOptionsFromIds(
-				initialValues.alertIds || [],
-				alertOptions,
-			),
+			alertRuleScope:
+				isEditMode && initialAlertIds.length === 0 ? 'all' : 'specific',
+			alertRules: getAlertOptionsFromIds(initialAlertIds, alertOptions),
 			startTime: startTime ? dayjs(startTime).tz(schedule.timezone) : null,
 			endTime: endTime ? dayjs(endTime).tz(schedule.timezone) : null,
 			recurrence: {
@@ -278,11 +295,13 @@ export function PlannedDowntimeForm(
 				duration: getDurationInfo(schedule?.recurrence?.duration)?.value ?? '',
 			} as AlertmanagertypesRecurrenceDTO,
 			timezone: schedule?.timezone as string,
+			scope: initialValues.scope || '',
 		};
 	}, [initialValues, alertOptions]);
 
 	useEffect(() => {
 		setSelectedTags(formattedInitialValues.alertRules);
+		setAlertRuleScope(formattedInitialValues.alertRuleScope);
 		form.setFieldsValue({ ...formattedInitialValues });
 	}, [form, formattedInitialValues, initialValues]);
 
@@ -311,7 +330,7 @@ export function PlannedDowntimeForm(
 			default:
 				return `Scheduled for ${formattedStartDate} starting at ${formattedStartTime}.`;
 		}
-	}, [formData, recurrenceType, timezone]);
+	}, [formData, recurrenceType]);
 
 	const endTimeText = useMemo((): string => {
 		const endTime = formData.endTime;
@@ -322,7 +341,7 @@ export function PlannedDowntimeForm(
 		const formattedEndTime = endTime.format(TIME_FORMAT);
 		const formattedEndDate = endTime.format(DATE_FORMAT);
 		return `Scheduled to end maintenance on ${formattedEndDate} at ${formattedEndTime}.`;
-	}, [formData, recurrenceType, timezone]);
+	}, [formData, recurrenceType]);
 
 	return (
 		<Modal
@@ -345,6 +364,7 @@ export function PlannedDowntimeForm(
 				onFinish={onFinish}
 				onValuesChange={(): void => {
 					setRecurrenceType(form.getFieldValue('recurrence')?.repeatType as string);
+					setAlertRuleScope(form.getFieldValue('alertRuleScope') as AlertRuleScope);
 					handleFormData(form.getFieldsValue());
 				}}
 				autoComplete="off"
@@ -444,50 +464,107 @@ export function PlannedDowntimeForm(
 					<div className="scheduleTimeInfoText">{endTimeText}</div>
 				)}
 				<div>
-					<div className="alert-rule-form">
-						<Typography style={{ marginBottom: 8 }}>Silence Alerts</Typography>
-						<Typography style={{ marginBottom: 8 }} className="alert-rule-info">
-							(Leave empty to silence all alerts)
-						</Typography>
-					</div>
-					<Form.Item noStyle shouldUpdate>
-						<AlertRuleTags
-							closable
-							selectedTags={selectedTags}
-							handleClose={handleClose}
-						/>
-					</Form.Item>
-					<Form.Item name={alertRuleFormName}>
-						<Select
-							placeholder="Search for alerts rules or groups..."
-							mode="multiple"
-							status={isError ? 'error' : undefined}
-							loading={isLoading}
-							tagRender={noTagRenderer}
-							onChange={handleAlertRulesChange}
-							showSearch
-							options={alertOptions}
-							filterOption={(input, option): boolean =>
-								(option?.label as string)?.toLowerCase()?.includes(input.toLowerCase())
-							}
-							notFoundContent={
-								isLoading ? (
-									<span>
-										<Spin size="small" /> Loading...
-									</span>
-								) : (
-									<span>No alert available.</span>
-								)
-							}
-						>
-							{alertOptions?.map((option) => (
-								<Select.Option key={option.value} value={option.value}>
-									{option.label}
-								</Select.Option>
-							))}
-						</Select>
+					<Typography style={{ marginBottom: 8 }}>Silence Alerts</Typography>
+					<Form.Item
+						name="alertRuleScope"
+						initialValue="specific"
+						className="alert-rule-scope"
+					>
+						<Radio.Group>
+							<Radio value="all">All alert rules</Radio>
+							<Radio value="specific">Specific alert rules</Radio>
+						</Radio.Group>
 					</Form.Item>
+					{alertRuleScope === 'specific' && (
+						<>
+							<Form.Item noStyle shouldUpdate>
+								<AlertRuleTags
+									closable
+									selectedTags={selectedTags}
+									handleClose={handleClose}
+								/>
+							</Form.Item>
+							<Form.Item
+								name={alertRuleFormName}
+								rules={[
+									{
+										validator: async (
+											_rule,
+											value: DefaultOptionType[] | undefined,
+										): Promise<void> => {
+											if (!value || value.length === 0) {
+												throw new Error(
+													'Select at least one alert rule, or choose "All alert rules" to silence everything.',
+												);
+											}
+										},
+									},
+								]}
+							>
+								<Select
+									placeholder="Search for alert rules or groups..."
+									mode="multiple"
+									status={isError ? 'error' : undefined}
+									loading={isLoading}
+									tagRender={noTagRenderer}
+									onChange={handleAlertRulesChange}
+									showSearch
+									options={alertOptions}
+									filterOption={(input, option): boolean =>
+										(option?.label as string)
+											?.toLowerCase()
+											?.includes(input.toLowerCase())
+									}
+									notFoundContent={
+										isLoading ? (
+											<span>
+												<Spin size="small" /> Loading...
+											</span>
+										) : (
+											<span>No alert available.</span>
+										)
+									}
+								>
+									{alertOptions?.map((option) => (
+										<Select.Option key={option.value} value={option.value}>
+											{option.label}
+										</Select.Option>
+									))}
+								</Select>
+							</Form.Item>
+						</>
+					)}
 				</div>
+				<Form.Item
+					label={
+						<span>
+							Scope&nbsp;
+							<Tooltip
+								mouseLeaveDelay={0.3}
+								title={
+									<span>
+										Scope the planned downtime by alert labels.{' '}
+										<a
+											href="https://signoz.io/docs/alerts-management/planned-maintenance/#scoping-with-label-expressions"
+											target="_blank"
+											rel="noopener noreferrer"
+										>
+											Learn more
+										</a>
+									</span>
+								}
+							>
+								<Info size={13} />
+							</Tooltip>
+						</span>
+					}
+					name="scope"
+				>
+					<Input.TextArea
+						placeholder='e.g. env = "prod" AND region = "us-east-1"'
+						autoSize={{ minRows: 2, maxRows: 4 }}
+					/>
+				</Form.Item>
 				<Form.Item style={{ marginBottom: 0 }}>
 					<ModalButtonWrapper>
 						<Button

frontend/src/container/PlannedDowntime/PlannedDowntimeList.tsx

@@ -204,7 +204,7 @@ export function CollapseListContent({
 						selectedTags={alertOptions}
 					/>
 				) : (
-					'-'
+					<Tag className="all-alerts-tag">All alert rules</Tag>
 				),
 			)}
 		</Flex>

frontend/src/container/QueryTable/Drilldown/__tests__/useBaseDrilldownNavigate.test.ts

@@ -0,0 +1,296 @@
+import { renderHook } from '@testing-library/react';
+import ROUTES from 'constants/routes';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import { getViewQuery } from '../drilldownUtils';
+import { AggregateData } from '../useAggregateDrilldown';
+import useBaseDrilldownNavigate, {
+	buildDrilldownUrl,
+	getRoute,
+} from '../useBaseDrilldownNavigate';
+
+const mockSafeNavigate = jest.fn();
+
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): { safeNavigate: typeof mockSafeNavigate } => ({
+		safeNavigate: mockSafeNavigate,
+	}),
+}));
+
+jest.mock('../drilldownUtils', () => ({
+	...jest.requireActual('../drilldownUtils'),
+	getViewQuery: jest.fn(),
+}));
+
+const mockGetViewQuery = getViewQuery as jest.Mock;
+
+// ─── Fixtures ────────────────────────────────────────────────────────────────
+
+const MOCK_QUERY: Query = {
+	id: 'q1',
+	queryType: 'builder' as any,
+	builder: {
+		queryData: [
+			{
+				queryName: 'A',
+				dataSource: 'metrics' as any,
+				groupBy: [],
+				expression: '',
+				disabled: false,
+				functions: [],
+				legend: '',
+				having: [],
+				limit: null,
+				stepInterval: undefined,
+				orderBy: [],
+			},
+		],
+		queryFormulas: [],
+		queryTraceOperator: [],
+	},
+	promql: [],
+	clickhouse_sql: [],
+};
+
+const MOCK_VIEW_QUERY: Query = {
+	...MOCK_QUERY,
+	builder: {
+		...MOCK_QUERY.builder,
+		queryData: [
+			{
+				...MOCK_QUERY.builder.queryData[0],
+				filters: { items: [], op: 'AND' },
+			},
+		],
+	},
+};
+
+const MOCK_AGGREGATE_DATA: AggregateData = {
+	queryName: 'A',
+	filters: [{ filterKey: 'service_name', filterValue: 'auth', operator: '=' }],
+	timeRange: { startTime: 1000000, endTime: 2000000 },
+};
+
+// ─── getRoute ─────────────────────────────────────────────────────────────────
+
+describe('getRoute', () => {
+	it.each([
+		['view_logs', ROUTES.LOGS_EXPLORER],
+		['view_metrics', ROUTES.METRICS_EXPLORER],
+		['view_traces', ROUTES.TRACES_EXPLORER],
+	])('maps %s to the correct explorer route', (key, expected) => {
+		expect(getRoute(key)).toBe(expected);
+	});
+
+	it('returns empty string for an unknown key', () => {
+		expect(getRoute('view_dashboard')).toBe('');
+	});
+});
+
+// ─── buildDrilldownUrl ────────────────────────────────────────────────────────
+
+describe('buildDrilldownUrl', () => {
+	beforeEach(() => {
+		mockGetViewQuery.mockReturnValue(MOCK_VIEW_QUERY);
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('returns null for an unknown drilldown key', () => {
+		const url = buildDrilldownUrl(
+			MOCK_QUERY,
+			MOCK_AGGREGATE_DATA,
+			'view_dashboard',
+		);
+		expect(url).toBeNull();
+	});
+
+	it('returns null when getViewQuery returns null', () => {
+		mockGetViewQuery.mockReturnValue(null);
+		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_logs');
+		expect(url).toBeNull();
+	});
+
+	it('returns a URL starting with the logs explorer route for view_logs', () => {
+		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_logs');
+		expect(url).not.toBeNull();
+		expect(url).toContain(ROUTES.LOGS_EXPLORER);
+	});
+
+	it('returns a URL starting with the traces explorer route for view_traces', () => {
+		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_traces');
+		expect(url).toContain(ROUTES.TRACES_EXPLORER);
+	});
+
+	it('includes compositeQuery param in the URL', () => {
+		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_logs');
+		expect(url).toContain('compositeQuery=');
+	});
+
+	it('includes startTime and endTime when aggregateData has a timeRange', () => {
+		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_logs');
+		expect(url).toContain('startTime=1000000');
+		expect(url).toContain('endTime=2000000');
+	});
+
+	it('omits startTime and endTime when aggregateData has no timeRange', () => {
+		const { timeRange: _, ...withoutTimeRange } = MOCK_AGGREGATE_DATA;
+		const url = buildDrilldownUrl(MOCK_QUERY, withoutTimeRange, 'view_logs');
+		expect(url).not.toContain('startTime=');
+		expect(url).not.toContain('endTime=');
+	});
+
+	it('includes summaryFilters param for view_metrics', () => {
+		const url = buildDrilldownUrl(
+			MOCK_QUERY,
+			MOCK_AGGREGATE_DATA,
+			'view_metrics',
+		);
+		expect(url).toContain(ROUTES.METRICS_EXPLORER);
+		expect(url).toContain('summaryFilters=');
+	});
+
+	it('does not include summaryFilters param for non-metrics routes', () => {
+		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_logs');
+		expect(url).not.toContain('summaryFilters=');
+	});
+
+	it('handles null aggregateData by passing empty filters and empty queryName', () => {
+		const url = buildDrilldownUrl(MOCK_QUERY, null, 'view_logs');
+		expect(url).not.toBeNull();
+		expect(mockGetViewQuery).toHaveBeenCalledWith(
+			MOCK_QUERY,
+			[],
+			'view_logs',
+			'',
+		);
+	});
+
+	it('passes aggregateData filters and queryName to getViewQuery', () => {
+		buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_logs');
+		expect(mockGetViewQuery).toHaveBeenCalledWith(
+			MOCK_QUERY,
+			MOCK_AGGREGATE_DATA.filters,
+			'view_logs',
+			MOCK_AGGREGATE_DATA.queryName,
+		);
+	});
+});
+
+// ─── useBaseDrilldownNavigate ─────────────────────────────────────────────────
+
+describe('useBaseDrilldownNavigate', () => {
+	beforeEach(() => {
+		mockGetViewQuery.mockReturnValue(MOCK_VIEW_QUERY);
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('calls safeNavigate with the built URL on a valid key', () => {
+		const { result } = renderHook(() =>
+			useBaseDrilldownNavigate({
+				resolvedQuery: MOCK_QUERY,
+				aggregateData: MOCK_AGGREGATE_DATA,
+			}),
+		);
+
+		result.current('view_logs');
+
+		expect(mockSafeNavigate).toHaveBeenCalledTimes(1);
+		const [url] = mockSafeNavigate.mock.calls[0];
+		expect(url).toContain(ROUTES.LOGS_EXPLORER);
+		expect(url).toContain('compositeQuery=');
+	});
+
+	it('opens the explorer in a new tab', () => {
+		const { result } = renderHook(() =>
+			useBaseDrilldownNavigate({
+				resolvedQuery: MOCK_QUERY,
+				aggregateData: MOCK_AGGREGATE_DATA,
+			}),
+		);
+
+		result.current('view_traces');
+
+		expect(mockSafeNavigate).toHaveBeenCalledWith(expect.any(String), {
+			newTab: true,
+		});
+	});
+
+	it('calls callback after successful navigation', () => {
+		const callback = jest.fn();
+		const { result } = renderHook(() =>
+			useBaseDrilldownNavigate({
+				resolvedQuery: MOCK_QUERY,
+				aggregateData: MOCK_AGGREGATE_DATA,
+				callback,
+			}),
+		);
+
+		result.current('view_logs');
+
+		expect(callback).toHaveBeenCalledTimes(1);
+	});
+
+	it('does not call safeNavigate for an unknown key', () => {
+		const { result } = renderHook(() =>
+			useBaseDrilldownNavigate({
+				resolvedQuery: MOCK_QUERY,
+				aggregateData: MOCK_AGGREGATE_DATA,
+			}),
+		);
+
+		result.current('view_dashboard');
+
+		expect(mockSafeNavigate).not.toHaveBeenCalled();
+	});
+
+	it('still calls callback when the key is unknown', () => {
+		const callback = jest.fn();
+		const { result } = renderHook(() =>
+			useBaseDrilldownNavigate({
+				resolvedQuery: MOCK_QUERY,
+				aggregateData: MOCK_AGGREGATE_DATA,
+				callback,
+			}),
+		);
+
+		result.current('view_dashboard');
+
+		expect(callback).toHaveBeenCalledTimes(1);
+		expect(mockSafeNavigate).not.toHaveBeenCalled();
+	});
+
+	it('still calls callback when getViewQuery returns null', () => {
+		mockGetViewQuery.mockReturnValue(null);
+		const callback = jest.fn();
+		const { result } = renderHook(() =>
+			useBaseDrilldownNavigate({
+				resolvedQuery: MOCK_QUERY,
+				aggregateData: MOCK_AGGREGATE_DATA,
+				callback,
+			}),
+		);
+
+		result.current('view_logs');
+
+		expect(callback).toHaveBeenCalledTimes(1);
+		expect(mockSafeNavigate).not.toHaveBeenCalled();
+	});
+
+	it('handles null aggregateData without throwing', () => {
+		const { result } = renderHook(() =>
+			useBaseDrilldownNavigate({
+				resolvedQuery: MOCK_QUERY,
+				aggregateData: null,
+			}),
+		);
+
+		expect(() => result.current('view_logs')).not.toThrow();
+		expect(mockSafeNavigate).toHaveBeenCalledTimes(1);
+	});
+});

frontend/src/container/QueryTable/Drilldown/drilldownUtils.tsx

@@ -168,7 +168,7 @@ export const getAggregateColumnHeader = (
 	};
 };
 
-const getFiltersFromMetric = (metric: any): FilterData[] =>
+export const getFiltersFromMetric = (metric: any): FilterData[] =>
 	Object.keys(metric).map((key) => ({
 		filterKey: key,
 		filterValue: metric[key],

frontend/src/container/QueryTable/Drilldown/useBaseAggregateOptions.tsx

@@ -2,14 +2,10 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { Link, Loader } from '@signozhq/icons';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
 import useUpdatedQuery from 'container/GridCardLayout/useResolveQuery';
 import { processContextLinks } from 'container/NewWidget/RightContainer/ContextLinks/utils';
 import useContextVariables from 'hooks/dashboard/useContextVariables';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import createQueryParams from 'lib/createQueryParams';
 import ContextMenu from 'periscope/components/ContextMenu';
 import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
 import { ContextLinksData } from 'types/api/dashboard/getAll';
@@ -18,9 +14,10 @@ import { openInNewTab } from 'utils/navigation';
 
 import { ContextMenuItem } from './contextConfig';
 import { getDataLinks } from './dataLinksUtils';
-import { getAggregateColumnHeader, getViewQuery } from './drilldownUtils';
+import { getAggregateColumnHeader } from './drilldownUtils';
 import { getBaseContextConfig } from './menuOptions';
 import { AggregateData } from './useAggregateDrilldown';
+import useBaseDrilldownNavigate from './useBaseDrilldownNavigate';
 
 interface UseBaseAggregateOptionsProps {
 	query: Query;
@@ -38,19 +35,6 @@ interface BaseAggregateOptionsConfig {
 	items?: ContextMenuItem;
 }
 
-const getRoute = (key: string): string => {
-	switch (key) {
-		case 'view_logs':
-			return ROUTES.LOGS_EXPLORER;
-		case 'view_metrics':
-			return ROUTES.METRICS_EXPLORER;
-		case 'view_traces':
-			return ROUTES.TRACES_EXPLORER;
-		default:
-			return '';
-	}
-};
-
 const useBaseAggregateOptions = ({
 	query,
 	onClose,
@@ -86,8 +70,6 @@ const useBaseAggregateOptions = ({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [query, aggregateData, panelType]);
 
-	const { safeNavigate } = useSafeNavigate();
-
 	// Use the new useContextVariables hook
 	const { processedVariables } = useContextVariables({
 		maxValues: 2,
@@ -121,50 +103,16 @@ const useBaseAggregateOptions = ({
 					{label}
 				</ContextMenu.Item>
 			));
-		} catch (error) {
+		} catch {
 			return [];
 		}
 	}, [contextLinks, processedVariables, onClose, aggregateData, query]);
 
-	const handleBaseDrilldown = useCallback(
-		(key: string): void => {
-			const route = getRoute(key);
-			const timeRange = aggregateData?.timeRange;
-			const filtersToAdd = aggregateData?.filters || [];
-			const viewQuery = getViewQuery(
-				resolvedQuery,
-				filtersToAdd,
-				key,
-				aggregateData?.queryName || '',
-			);
-
-			let queryParams = {
-				[QueryParams.compositeQuery]: encodeURIComponent(JSON.stringify(viewQuery)),
-				...(timeRange && {
-					[QueryParams.startTime]: timeRange?.startTime.toString(),
-					[QueryParams.endTime]: timeRange?.endTime.toString(),
-				}),
-			} as Record<string, string>;
-
-			if (route === ROUTES.METRICS_EXPLORER) {
-				queryParams = {
-					...queryParams,
-					[QueryParams.summaryFilters]: JSON.stringify(
-						viewQuery?.builder.queryData[0].filters,
-					),
-				};
-			}
-
-			if (route) {
-				safeNavigate(`${route}?${createQueryParams(queryParams)}`, {
-					newTab: true,
-				});
-			}
-
-			onClose();
-		},
-		[resolvedQuery, safeNavigate, onClose, aggregateData],
-	);
+	const handleBaseDrilldown = useBaseDrilldownNavigate({
+		resolvedQuery,
+		aggregateData,
+		callback: onClose,
+	});
 
 	const { pathname } = useLocation();
 

frontend/src/container/QueryTable/Drilldown/useBaseDrilldownNavigate.ts

@@ -0,0 +1,117 @@
+import { useCallback } from 'react';
+import { QueryParams } from 'constants/query';
+import ROUTES from 'constants/routes';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import createQueryParams from 'lib/createQueryParams';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import { getViewQuery } from './drilldownUtils';
+import { AggregateData } from './useAggregateDrilldown';
+
+type DrilldownKey = 'view_logs' | 'view_metrics' | 'view_traces';
+
+const DRILLDOWN_ROUTE_MAP: Record<DrilldownKey, string> = {
+	view_logs: ROUTES.LOGS_EXPLORER,
+	view_metrics: ROUTES.METRICS_EXPLORER,
+	view_traces: ROUTES.TRACES_EXPLORER,
+};
+
+const getRoute = (key: string): string =>
+	DRILLDOWN_ROUTE_MAP[key as DrilldownKey] ?? '';
+
+interface UseBaseDrilldownNavigateProps {
+	resolvedQuery: Query;
+	aggregateData: AggregateData | null;
+	callback?: () => void;
+}
+
+const useBaseDrilldownNavigate = ({
+	resolvedQuery,
+	aggregateData,
+	callback,
+}: UseBaseDrilldownNavigateProps): ((key: string) => void) => {
+	const { safeNavigate } = useSafeNavigate();
+
+	return useCallback(
+		(key: string): void => {
+			const route = getRoute(key);
+			const viewQuery = getViewQuery(
+				resolvedQuery,
+				aggregateData?.filters ?? [],
+				key,
+				aggregateData?.queryName ?? '',
+			);
+
+			if (!viewQuery || !route) {
+				callback?.();
+				return;
+			}
+
+			const timeRange = aggregateData?.timeRange;
+			let queryParams: Record<string, string> = {
+				[QueryParams.compositeQuery]: encodeURIComponent(JSON.stringify(viewQuery)),
+				...(timeRange && {
+					[QueryParams.startTime]: timeRange.startTime.toString(),
+					[QueryParams.endTime]: timeRange.endTime.toString(),
+				}),
+			};
+
+			if (route === ROUTES.METRICS_EXPLORER) {
+				queryParams = {
+					...queryParams,
+					[QueryParams.summaryFilters]: JSON.stringify(
+						viewQuery.builder.queryData[0].filters,
+					),
+				};
+			}
+
+			safeNavigate(`${route}?${createQueryParams(queryParams)}`, {
+				newTab: true,
+			});
+
+			callback?.();
+		},
+		[resolvedQuery, safeNavigate, callback, aggregateData],
+	);
+};
+
+export function buildDrilldownUrl(
+	resolvedQuery: Query,
+	aggregateData: AggregateData | null,
+	key: string,
+): string | null {
+	const route = getRoute(key);
+	const viewQuery = getViewQuery(
+		resolvedQuery,
+		aggregateData?.filters ?? [],
+		key,
+		aggregateData?.queryName ?? '',
+	);
+
+	if (!viewQuery || !route) {
+		return null;
+	}
+
+	const timeRange = aggregateData?.timeRange;
+	let queryParams: Record<string, string> = {
+		[QueryParams.compositeQuery]: encodeURIComponent(JSON.stringify(viewQuery)),
+		...(timeRange && {
+			[QueryParams.startTime]: timeRange.startTime.toString(),
+			[QueryParams.endTime]: timeRange.endTime.toString(),
+		}),
+	};
+
+	if (route === ROUTES.METRICS_EXPLORER) {
+		queryParams = {
+			...queryParams,
+			[QueryParams.summaryFilters]: JSON.stringify(
+				viewQuery.builder.queryData[0].filters,
+			),
+		};
+	}
+
+	return `${route}?${createQueryParams(queryParams)}`;
+}
+
+export { getRoute };
+export default useBaseDrilldownNavigate;

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/__tests__/syncCursorRegistry.test.ts

@@ -0,0 +1,29 @@
+import { syncCursorRegistry } from '../syncCursorRegistry';
+
+describe('syncCursorRegistry', () => {
+	describe('metadata', () => {
+		it('returns undefined for unknown key', () => {
+			expect(syncCursorRegistry.getMetadata('unknown-meta')).toBeUndefined();
+		});
+
+		it('stores and retrieves metadata by syncKey', () => {
+			const metadata = { yAxisUnit: 'ms', groupBy: [] };
+			syncCursorRegistry.setMetadata('meta-key', metadata);
+			expect(syncCursorRegistry.getMetadata('meta-key')).toBe(metadata);
+		});
+	});
+
+	describe('activeSeriesMetric', () => {
+		it('returns null (not undefined) for unknown key', () => {
+			expect(
+				syncCursorRegistry.getActiveSeriesMetric('unknown-metric'),
+			).toBeNull();
+		});
+
+		it('stores and retrieves metric by syncKey', () => {
+			const metric = { host: 'server1', __name__: 'cpu' };
+			syncCursorRegistry.setActiveSeriesMetric('metric-key', metric);
+			expect(syncCursorRegistry.getActiveSeriesMetric('metric-key')).toBe(metric);
+		});
+	});
+});

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/__tests__/syncDisplayHook.test.ts

@@ -0,0 +1,627 @@
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import uPlot from 'uplot';
+
+import { syncCursorRegistry } from '../syncCursorRegistry';
+import { createSyncDisplayHook } from '../syncDisplayHook';
+import {
+	SyncTooltipFilterMode,
+	type TooltipControllerState,
+	type TooltipSyncMetadata,
+} from '../types';
+
+jest.mock('../syncCursorRegistry', () => ({
+	syncCursorRegistry: {
+		setMetadata: jest.fn(),
+		getMetadata: jest.fn(),
+		setActiveSeriesMetric: jest.fn(),
+		getActiveSeriesMetric: jest.fn(),
+	},
+}));
+
+const mockRegistry = syncCursorRegistry as {
+	setMetadata: jest.Mock;
+	getMetadata: jest.Mock;
+	setActiveSeriesMetric: jest.Mock;
+	getActiveSeriesMetric: jest.Mock;
+};
+
+const SYNC_KEY = 'test-sync-key';
+
+// Builds a single-query groupByPerQuery from a list of dimension keys.
+const makeGroupByPerQuery = (
+	...keys: string[]
+): Record<string, BaseAutocompleteData[]> => ({
+	A: keys.map((key) => ({ key, type: 'tag' as const })),
+});
+
+function makeUPlotRoot(includeCrosshair = true): HTMLElement {
+	const root = document.createElement('div');
+	if (includeCrosshair) {
+		const el = document.createElement('div');
+		el.className = 'u-cursor-y';
+		root.append(el);
+	}
+	return root;
+}
+
+type FakeSeries = { metric?: Record<string, string>; show?: boolean };
+
+function makeFakeUPlot(opts: {
+	cursorEvent?: MouseEvent | null;
+	cursorLeft?: number;
+	series?: FakeSeries[];
+	includeCrosshair?: boolean;
+}): uPlot {
+	return {
+		root: makeUPlotRoot(opts.includeCrosshair ?? true),
+		cursor: {
+			event: opts.cursorEvent !== undefined ? opts.cursorEvent : null,
+			left: opts.cursorLeft ?? 50,
+		},
+		series: opts.series ?? [
+			{},
+			{ metric: { host: 'server1' } },
+			{ metric: { host: 'server2' } },
+		],
+		setSeries: jest.fn(),
+	} as unknown as uPlot;
+}
+
+function makeController(
+	focusedSeriesIndex: number | null = null,
+): TooltipControllerState {
+	return {
+		focusedSeriesIndex,
+		syncedSeriesIndexes: null,
+	} as TooltipControllerState;
+}
+
+// Convenience cast used throughout assertions.
+function mockSetSeries(u: uPlot): jest.Mock {
+	return (u as unknown as { setSeries: jest.Mock }).setSeries;
+}
+
+function getCrosshair(u: uPlot): HTMLElement {
+	const el = u.root.querySelector<HTMLElement>('.u-cursor-y');
+	if (!el) {
+		throw new Error('crosshair element missing');
+	}
+	return el;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('createSyncDisplayHook', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	// ── guard ────────────────────────────────────────────────────────────────
+
+	describe('no crosshair element', () => {
+		it('returns early without calling registry when .u-cursor-y absent', () => {
+			const hook = createSyncDisplayHook(SYNC_KEY, undefined, makeController());
+			const u = makeFakeUPlot({ includeCrosshair: false });
+			hook(u);
+			expect(mockRegistry.setMetadata).not.toHaveBeenCalled();
+			expect(mockRegistry.getMetadata).not.toHaveBeenCalled();
+			expect(mockSetSeries(u)).not.toHaveBeenCalled();
+		});
+	});
+
+	// ── source panel ─────────────────────────────────────────────────────────
+
+	describe('source behavior (cursor.event != null)', () => {
+		it('writes syncMetadata to registry', () => {
+			const syncMetadata: TooltipSyncMetadata = { yAxisUnit: 'ms' };
+			const hook = createSyncDisplayHook(SYNC_KEY, syncMetadata, makeController());
+			const u = makeFakeUPlot({ cursorEvent: new MouseEvent('mousemove') });
+			hook(u);
+			expect(mockRegistry.setMetadata).toHaveBeenCalledWith(
+				SYNC_KEY,
+				syncMetadata,
+			);
+		});
+
+		it('writes focused series metric when focusedSeriesIndex is set', () => {
+			const series: FakeSeries[] = [
+				{},
+				{ metric: { host: 'server1' } },
+				{ metric: { host: 'server2' } },
+			];
+			const hook = createSyncDisplayHook(SYNC_KEY, undefined, makeController(1));
+			const u = makeFakeUPlot({
+				cursorEvent: new MouseEvent('mousemove'),
+				series,
+			});
+			hook(u);
+			expect(mockRegistry.setActiveSeriesMetric).toHaveBeenCalledWith(SYNC_KEY, {
+				host: 'server1',
+			});
+		});
+
+		it('writes null metric when focusedSeriesIndex is null', () => {
+			const hook = createSyncDisplayHook(
+				SYNC_KEY,
+				undefined,
+				makeController(null),
+			);
+			const u = makeFakeUPlot({ cursorEvent: new MouseEvent('mousemove') });
+			hook(u);
+			expect(mockRegistry.setActiveSeriesMetric).toHaveBeenCalledWith(
+				SYNC_KEY,
+				null,
+			);
+		});
+
+		it('clears controller.syncedSeriesIndexes', () => {
+			const controller = makeController();
+			controller.syncedSeriesIndexes = [1, 2];
+			const hook = createSyncDisplayHook(SYNC_KEY, undefined, controller);
+			const u = makeFakeUPlot({ cursorEvent: new MouseEvent('mousemove') });
+			hook(u);
+			expect(controller.syncedSeriesIndexes).toBeNull();
+		});
+
+		it('shows crosshair and does not read from registry', () => {
+			const hook = createSyncDisplayHook(SYNC_KEY, undefined, makeController());
+			const u = makeFakeUPlot({ cursorEvent: new MouseEvent('mousemove') });
+			hook(u);
+			expect(getCrosshair(u).style.display).toBe('');
+			expect(mockRegistry.getMetadata).not.toHaveBeenCalled();
+		});
+	});
+
+	// ── receiver panel ───────────────────────────────────────────────────────
+
+	describe('receiver behavior (cursor.event is null)', () => {
+		describe('crosshair visibility', () => {
+			it('shows crosshair when yAxisUnit matches source', () => {
+				mockRegistry.getMetadata.mockReturnValue({ yAxisUnit: 'ms' });
+				mockRegistry.getActiveSeriesMetric.mockReturnValue(null);
+				const hook = createSyncDisplayHook(
+					SYNC_KEY,
+					{ yAxisUnit: 'ms' },
+					makeController(),
+				);
+				const u = makeFakeUPlot({ cursorEvent: null });
+				hook(u);
+				expect(getCrosshair(u).style.display).toBe('');
+			});
+
+			it('hides crosshair when yAxisUnit differs from source', () => {
+				mockRegistry.getMetadata.mockReturnValue({ yAxisUnit: 'bytes' });
+				mockRegistry.getActiveSeriesMetric.mockReturnValue(null);
+				const hook = createSyncDisplayHook(
+					SYNC_KEY,
+					{ yAxisUnit: 'ms' },
+					makeController(),
+				);
+				const u = makeFakeUPlot({ cursorEvent: null });
+				hook(u);
+				expect(getCrosshair(u).style.display).toBe('none');
+			});
+		});
+
+		// ── exact groupBy match ───────────────────────────────────────────────
+
+		describe('exact groupBy match', () => {
+			const groupByPerQuery = makeGroupByPerQuery('host');
+			const series: FakeSeries[] = [
+				{},
+				{ metric: { host: 'server1' } },
+				{ metric: { host: 'server2' } },
+			];
+
+			it('focuses the matching series and records it on the controller', () => {
+				mockRegistry.getMetadata.mockReturnValue({
+					yAxisUnit: 'ms',
+					groupByPerQuery,
+				});
+				mockRegistry.getActiveSeriesMetric.mockReturnValue({ host: 'server2' });
+				const controller = makeController();
+				const hook = createSyncDisplayHook(
+					SYNC_KEY,
+					{ yAxisUnit: 'ms', groupByPerQuery },
+					controller,
+				);
+				const u = makeFakeUPlot({ cursorEvent: null, cursorLeft: 50, series });
+				hook(u);
+				expect(mockSetSeries(u)).toHaveBeenCalledWith(2, { focus: true });
+				expect(controller.syncedSeriesIndexes).toStrictEqual([2]);
+			});
+
+			it('unfocuses all and emits empty matches (Filtered) when active metric is null', () => {
+				mockRegistry.getMetadata.mockReturnValue({
+					yAxisUnit: 'ms',
+					groupByPerQuery,
+				});
+				mockRegistry.getActiveSeriesMetric.mockReturnValue(null);
+				const controller = makeController();
+				const hook = createSyncDisplayHook(
+					SYNC_KEY,
+					{ yAxisUnit: 'ms', groupByPerQuery },
+					controller,
+				);
+				const u = makeFakeUPlot({ cursorEvent: null, cursorLeft: 50, series });
+				hook(u);
+				expect(mockSetSeries(u)).toHaveBeenCalledWith(null, { focus: false });
+				expect(controller.syncedSeriesIndexes).toStrictEqual([]);
+			});
+
+			it('unfocuses all when metric matches no series', () => {
+				mockRegistry.getMetadata.mockReturnValue({
+					yAxisUnit: 'ms',
+					groupByPerQuery,
+				});
+				mockRegistry.getActiveSeriesMetric.mockReturnValue({
+					host: 'unknown-server',
+				});
+				const controller = makeController();
+				const hook = createSyncDisplayHook(
+					SYNC_KEY,
+					{ yAxisUnit: 'ms', groupByPerQuery },
+					controller,
+				);
+				const u = makeFakeUPlot({ cursorEvent: null, cursorLeft: 50, series });
+				hook(u);
+				expect(mockSetSeries(u)).toHaveBeenCalledWith(null, { focus: false });
+				expect(controller.syncedSeriesIndexes).toStrictEqual([]);
+			});
+
+			it('clears syncedSeriesIndexes when cursor is off-plot (left < 0)', () => {
+				mockRegistry.getMetadata.mockReturnValue({
+					yAxisUnit: 'ms',
+					groupByPerQuery,
+				});
+				mockRegistry.getActiveSeriesMetric.mockReturnValue({ host: 'server1' });
+				const controller = makeController();
+				const hook = createSyncDisplayHook(
+					SYNC_KEY,
+					{ yAxisUnit: 'ms', groupByPerQuery },
+					controller,
+				);
+				const u = makeFakeUPlot({ cursorEvent: null, cursorLeft: -1, series });
+				hook(u);
+				expect(mockSetSeries(u)).toHaveBeenCalledWith(null, { focus: false });
+				expect(controller.syncedSeriesIndexes).toBeNull();
+				expect(mockRegistry.getActiveSeriesMetric).not.toHaveBeenCalled();
+			});
+
+			it('never focuses series at index 0 (x-axis)', () => {
+				const sameMetric = { host: 'server1' };
+				mockRegistry.getMetadata.mockReturnValue({
+					yAxisUnit: 'ms',
+					groupByPerQuery,
+				});
+				mockRegistry.getActiveSeriesMetric.mockReturnValue(sameMetric);
+				const controller = makeController();
+				const hook = createSyncDisplayHook(
+					SYNC_KEY,
+					{ yAxisUnit: 'ms', groupByPerQuery },
+					controller,
+				);
+				const u = makeFakeUPlot({
+					cursorEvent: null,
+					cursorLeft: 50,
+					// Index 0 has the same metric — it must always be skipped.
+					series: [{ metric: sameMetric }, { metric: { host: 'other' } }],
+				});
+				hook(u);
+				expect(mockSetSeries(u)).toHaveBeenCalledWith(null, { focus: false });
+				expect(controller.syncedSeriesIndexes).toStrictEqual([]);
+			});
+
+			it('skips hidden series (show === false)', () => {
+				mockRegistry.getMetadata.mockReturnValue({
+					yAxisUnit: 'ms',
+					groupByPerQuery,
+				});
+				mockRegistry.getActiveSeriesMetric.mockReturnValue({ host: 'server1' });
+				const controller = makeController();
+				const hook = createSyncDisplayHook(
+					SYNC_KEY,
+					{ yAxisUnit: 'ms', groupByPerQuery },
+					controller,
+				);
+				const u = makeFakeUPlot({
+					cursorEvent: null,
+					cursorLeft: 50,
+					series: [
+						{},
+						{ metric: { host: 'server1' }, show: false },
+						{ metric: { host: 'server1' } },
+					],
+				});
+				hook(u);
+				expect(mockSetSeries(u)).toHaveBeenCalledWith(2, { focus: true });
+				expect(controller.syncedSeriesIndexes).toStrictEqual([2]);
+			});
+		});
+
+		// ── partial groupBy overlap ───────────────────────────────────────────
+
+		describe('partial groupBy overlap', () => {
+			it('subset — records every receiver series matching on the common key', () => {
+				// Source groupBy=[host], receiver groupBy=[host, service].
+				// Hook focuses the first match; the rest are surfaced via controller.syncedSeriesIndexes.
+				const sourceGroupBy = makeGroupByPerQuery('host');
+				const receiverGroupBy = makeGroupByPerQuery('host', 'service');
+				const series: FakeSeries[] = [
+					{},
+					{ metric: { host: 'server1', service: 'api' } },
+					{ metric: { host: 'server1', service: 'frontend' } },
+					{ metric: { host: 'server2', service: 'api' } },
+				];
+				mockRegistry.getMetadata.mockReturnValue({
+					yAxisUnit: 'ms',
+					groupByPerQuery: sourceGroupBy,
+				});
+				mockRegistry.getActiveSeriesMetric.mockReturnValue({ host: 'server1' });
+				const controller = makeController();
+				const hook = createSyncDisplayHook(
+					SYNC_KEY,
+					{ yAxisUnit: 'ms', groupByPerQuery: receiverGroupBy },
+					controller,
+				);
+				const u = makeFakeUPlot({ cursorEvent: null, cursorLeft: 50, series });
+				hook(u);
+				expect(mockSetSeries(u)).toHaveBeenCalledWith(1, { focus: true });
+				expect(controller.syncedSeriesIndexes).toStrictEqual([1, 2]);
+			});
+
+			it('superset — records the one receiver series matching on the common key', () => {
+				// Source groupBy=[host, service], receiver groupBy=[host].
+				const sourceGroupBy = makeGroupByPerQuery('host', 'service');
+				const receiverGroupBy = makeGroupByPerQuery('host');
+				const series: FakeSeries[] = [
+					{},
+					{ metric: { host: 'server1' } },
+					{ metric: { host: 'server2' } },
+				];
+				mockRegistry.getMetadata.mockReturnValue({
+					yAxisUnit: 'ms',
+					groupByPerQuery: sourceGroupBy,
+				});
+				mockRegistry.getActiveSeriesMetric.mockReturnValue({
+					host: 'server1',
+					service: 'api',
+				});
+				const controller = makeController();
+				const hook = createSyncDisplayHook(
+					SYNC_KEY,
+					{ yAxisUnit: 'ms', groupByPerQuery: receiverGroupBy },
+					controller,
+				);
+				const u = makeFakeUPlot({ cursorEvent: null, cursorLeft: 50, series });
+				hook(u);
+				expect(mockSetSeries(u)).toHaveBeenCalledWith(1, { focus: true });
+				expect(controller.syncedSeriesIndexes).toStrictEqual([1]);
+			});
+
+			it('partial — matches on the intersecting key only', () => {
+				// Source groupBy=[host, service], receiver groupBy=[service, region].
+				// Common key is [service]. Both receiver series with service=api match.
+				const sourceGroupBy = makeGroupByPerQuery('host', 'service');
+				const receiverGroupBy = makeGroupByPerQuery('service', 'region');
+				const series: FakeSeries[] = [
+					{},
+					{ metric: { service: 'api', region: 'us-east' } },
+					{ metric: { service: 'api', region: 'eu-west' } },
+					{ metric: { service: 'frontend', region: 'us-east' } },
+				];
+				mockRegistry.getMetadata.mockReturnValue({
+					yAxisUnit: 'ms',
+					groupByPerQuery: sourceGroupBy,
+				});
+				mockRegistry.getActiveSeriesMetric.mockReturnValue({
+					host: 'server1',
+					service: 'api',
+				});
+				const controller = makeController();
+				const hook = createSyncDisplayHook(
+					SYNC_KEY,
+					{ yAxisUnit: 'ms', groupByPerQuery: receiverGroupBy },
+					controller,
+				);
+				const u = makeFakeUPlot({ cursorEvent: null, cursorLeft: 50, series });
+				hook(u);
+				expect(mockSetSeries(u)).toHaveBeenCalledWith(1, { focus: true });
+				expect(controller.syncedSeriesIndexes).toStrictEqual([1, 2]);
+			});
+		});
+
+		// ── union across queries in groupByPerQuery ───────────────────────────
+
+		describe('union across queries', () => {
+			it("treats the panel's effective groupBy as the union across its queries", () => {
+				// Source has query A=[host]; receiver has A=[host], B=[service].
+				// The shared key is `host` — receiver matches on that.
+				const sourceGroupBy: Record<string, BaseAutocompleteData[]> = {
+					A: [{ key: 'host', type: 'tag' }],
+				};
+				const receiverGroupBy: Record<string, BaseAutocompleteData[]> = {
+					A: [{ key: 'host', type: 'tag' }],
+					B: [{ key: 'service', type: 'tag' }],
+				};
+				mockRegistry.getMetadata.mockReturnValue({
+					yAxisUnit: 'ms',
+					groupByPerQuery: sourceGroupBy,
+				});
+				mockRegistry.getActiveSeriesMetric.mockReturnValue({ host: 'server1' });
+				const controller = makeController();
+				const hook = createSyncDisplayHook(
+					SYNC_KEY,
+					{ yAxisUnit: 'ms', groupByPerQuery: receiverGroupBy },
+					controller,
+				);
+				const u = makeFakeUPlot({
+					cursorEvent: null,
+					cursorLeft: 50,
+					series: [
+						{},
+						{ metric: { host: 'server1' } },
+						{ metric: { host: 'server2' } },
+					],
+				});
+				hook(u);
+				expect(controller.syncedSeriesIndexes).toStrictEqual([1]);
+			});
+		});
+
+		// ── no overlap (Filtered mode default) ────────────────────────────────
+
+		describe('no overlap → Filtered mode emits []', () => {
+			it('emits [] when groupBy keys are completely different', () => {
+				mockRegistry.getMetadata.mockReturnValue({
+					yAxisUnit: 'ms',
+					groupByPerQuery: makeGroupByPerQuery('host'),
+				});
+				mockRegistry.getActiveSeriesMetric.mockReturnValue({ host: 'server1' });
+				const controller = makeController();
+				const hook = createSyncDisplayHook(
+					SYNC_KEY,
+					{ yAxisUnit: 'ms', groupByPerQuery: makeGroupByPerQuery('service') },
+					controller,
+				);
+				const u = makeFakeUPlot({ cursorEvent: null });
+				hook(u);
+				expect(controller.syncedSeriesIndexes).toStrictEqual([]);
+			});
+
+			it('emits [] when receiver groupBy is empty', () => {
+				mockRegistry.getMetadata.mockReturnValue({
+					yAxisUnit: 'ms',
+					groupByPerQuery: makeGroupByPerQuery('host'),
+				});
+				mockRegistry.getActiveSeriesMetric.mockReturnValue({ host: 'server1' });
+				const controller = makeController();
+				const hook = createSyncDisplayHook(
+					SYNC_KEY,
+					{ yAxisUnit: 'ms', groupByPerQuery: {} },
+					controller,
+				);
+				const u = makeFakeUPlot({ cursorEvent: null });
+				hook(u);
+				expect(controller.syncedSeriesIndexes).toStrictEqual([]);
+			});
+
+			it('emits [] when source groupBy is absent', () => {
+				mockRegistry.getMetadata.mockReturnValue({ yAxisUnit: 'ms' });
+				const controller = makeController();
+				const hook = createSyncDisplayHook(
+					SYNC_KEY,
+					{ yAxisUnit: 'ms', groupByPerQuery: makeGroupByPerQuery('host') },
+					controller,
+				);
+				const u = makeFakeUPlot({ cursorEvent: null });
+				hook(u);
+				expect(controller.syncedSeriesIndexes).toStrictEqual([]);
+			});
+		});
+
+		// ── filterMode: All ──────────────────────────────────────────────────
+
+		describe('filterMode All', () => {
+			it('emits null (no filter) when there is no overlap in groupBy', () => {
+				mockRegistry.getMetadata.mockReturnValue({
+					yAxisUnit: 'ms',
+					groupByPerQuery: makeGroupByPerQuery('host'),
+				});
+				mockRegistry.getActiveSeriesMetric.mockReturnValue({ host: 'server1' });
+				const controller = makeController();
+				const hook = createSyncDisplayHook(
+					SYNC_KEY,
+					{
+						yAxisUnit: 'ms',
+						groupByPerQuery: makeGroupByPerQuery('service'),
+						filterMode: SyncTooltipFilterMode.All,
+					},
+					controller,
+				);
+				const u = makeFakeUPlot({ cursorEvent: null });
+				hook(u);
+				expect(controller.syncedSeriesIndexes).toBeNull();
+			});
+
+			it('emits null when metric matches no series', () => {
+				const groupByPerQuery = makeGroupByPerQuery('host');
+				mockRegistry.getMetadata.mockReturnValue({
+					yAxisUnit: 'ms',
+					groupByPerQuery,
+				});
+				mockRegistry.getActiveSeriesMetric.mockReturnValue({ host: 'unknown' });
+				const controller = makeController();
+				const hook = createSyncDisplayHook(
+					SYNC_KEY,
+					{
+						yAxisUnit: 'ms',
+						groupByPerQuery,
+						filterMode: SyncTooltipFilterMode.All,
+					},
+					controller,
+				);
+				const u = makeFakeUPlot({ cursorEvent: null, cursorLeft: 50 });
+				hook(u);
+				expect(controller.syncedSeriesIndexes).toBeNull();
+			});
+		});
+
+		// ── caching ───────────────────────────────────────────────────────────
+
+		describe('caching optimizations', () => {
+			it('reuses the crosshair element across multiple invocations', () => {
+				mockRegistry.getMetadata.mockReturnValue({ yAxisUnit: 'ms' });
+				mockRegistry.getActiveSeriesMetric.mockReturnValue(null);
+				const hook = createSyncDisplayHook(
+					SYNC_KEY,
+					{ yAxisUnit: 'ms' },
+					makeController(),
+				);
+				const u = makeFakeUPlot({ cursorEvent: null });
+				const spy = jest.spyOn(u.root, 'querySelector');
+				hook(u);
+				hook(u);
+				hook(u);
+				// querySelector should only be called once regardless of invocation count.
+				expect(spy).toHaveBeenCalledTimes(1);
+			});
+
+			it('recomputes common keys when source groupByPerQuery reference changes', () => {
+				const hostGroupBy = makeGroupByPerQuery('host');
+				const serviceGroupBy = makeGroupByPerQuery('service');
+				const series: FakeSeries[] = [
+					{},
+					{ metric: { host: 'server1', service: 'api' } },
+					{ metric: { host: 'server2', service: 'frontend' } },
+				];
+				const hook = createSyncDisplayHook(
+					SYNC_KEY,
+					{ groupByPerQuery: makeGroupByPerQuery('host', 'service') },
+					makeController(),
+				);
+				const u = makeFakeUPlot({ cursorEvent: null, cursorLeft: 50, series });
+
+				// First call: source groups by host → matches series 1.
+				mockRegistry.getMetadata.mockReturnValue({
+					groupByPerQuery: hostGroupBy,
+				});
+				mockRegistry.getActiveSeriesMetric.mockReturnValue({ host: 'server1' });
+				hook(u);
+				expect(mockSetSeries(u)).toHaveBeenCalledWith(1, { focus: true });
+
+				jest.clearAllMocks();
+
+				// Second call: source now groups by service → matches series 2.
+				mockRegistry.getMetadata.mockReturnValue({
+					groupByPerQuery: serviceGroupBy,
+				});
+				mockRegistry.getActiveSeriesMetric.mockReturnValue({
+					service: 'frontend',
+				});
+				hook(u);
+				expect(mockSetSeries(u)).toHaveBeenCalledWith(2, { focus: true });
+			});
+		});
+	});
+});

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/AnalyticsPanel/AnalyticsPanel.tsx

@@ -7,8 +7,8 @@ import {
 } from '@signozhq/ui/tabs';
 import cx from 'classnames';
 import { DetailsHeader } from 'components/DetailsPanel';
-import { themeColors } from 'constants/theme';
-import { generateColor } from 'lib/uPlotLib/utils/generateColor';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { generateColorPair } from 'pages/TraceDetailsV3/utils/generateColorPair';
 import { FloatingPanel } from 'periscope/components/FloatingPanel';
 
 import { useTraceStore } from '../../stores/traceStore';
@@ -35,6 +35,7 @@ function AnalyticsPanel({
 }: AnalyticsPanelProps): JSX.Element | null {
 	const aggregations = useTraceStore((s) => s.aggregations);
 	const colorByFieldName = useTraceStore((s) => s.colorByField.name);
+	const isDarkMode = useIsDarkMode();
 
 	const execTimePct = useMemo(
 		() =>
@@ -57,13 +58,16 @@ function AnalyticsPanel({
 			return [];
 		}
 		return Object.entries(execTimePct)
-			.map(([group, percentage]) => ({
-				group,
-				percentage,
-				color: generateColor(group, themeColors.traceDetailColorsV3),
-			}))
+			.map(([group, percentage]) => {
+				const pair = generateColorPair(group);
+				return {
+					group,
+					percentage,
+					color: isDarkMode ? pair.color : pair.colorDark,
+				};
+			})
 			.sort((a, b) => b.percentage - a.percentage);
-	}, [execTimePct]);
+	}, [execTimePct, isDarkMode]);
 
 	const spanCountRows = useMemo(() => {
 		if (!spanCounts) {
@@ -71,14 +75,17 @@ function AnalyticsPanel({
 		}
 		const max = Math.max(...Object.values(spanCounts), 1);
 		return Object.entries(spanCounts)
-			.map(([group, count]) => ({
-				group,
-				count,
-				max,
-				color: generateColor(group, themeColors.traceDetailColorsV3),
-			}))
+			.map(([group, count]) => {
+				const pair = generateColorPair(group);
+				return {
+					group,
+					count,
+					max,
+					color: isDarkMode ? pair.color : pair.colorDark,
+				};
+			})
 			.sort((a, b) => b.count - a.count);
-	}, [spanCounts]);
+	}, [spanCounts, isDarkMode]);
 
 	if (!isOpen) {
 		return null;

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/DockModeSwitcher.tsx

@@ -0,0 +1,77 @@
+import { ReactNode } from 'react';
+import { Dock, PanelBottom, PanelRight } from '@signozhq/icons';
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/ui/toggle-group';
+import {
+	TooltipContent,
+	TooltipProvider,
+	TooltipRoot,
+	TooltipTrigger,
+} from '@signozhq/ui/tooltip';
+
+import { SpanDetailVariant } from './constants';
+
+interface DockOption {
+	value: SpanDetailVariant;
+	icon: ReactNode;
+	tooltip: string;
+}
+
+const DOCK_OPTIONS: DockOption[] = [
+	{
+		value: SpanDetailVariant.DIALOG,
+		icon: <Dock size={14} />,
+		tooltip: 'Open as floating panel',
+	},
+	{
+		value: SpanDetailVariant.DOCKED,
+		icon: <PanelBottom size={14} />,
+		tooltip: 'Dock at the bottom',
+	},
+	{
+		value: SpanDetailVariant.DOCKED_RIGHT,
+		icon: <PanelRight size={14} />,
+		tooltip: 'Dock on the right',
+	},
+];
+
+interface DockModeSwitcherProps {
+	value: SpanDetailVariant;
+	onChange: (value: SpanDetailVariant) => void;
+	tooltipClassName?: string;
+}
+
+function DockModeSwitcher({
+	value,
+	onChange,
+	tooltipClassName,
+}: DockModeSwitcherProps): JSX.Element {
+	return (
+		<TooltipProvider>
+			<ToggleGroup
+				type="single"
+				value={value}
+				onChange={(v): void => {
+					if (v) {
+						onChange(v as SpanDetailVariant);
+					}
+				}}
+				size="sm"
+			>
+				{DOCK_OPTIONS.map((option) => (
+					<TooltipRoot key={option.value}>
+						<TooltipTrigger asChild>
+							<span>
+								<ToggleGroupItem value={option.value}>{option.icon}</ToggleGroupItem>
+							</span>
+						</TooltipTrigger>
+						<TooltipContent className={tooltipClassName}>
+							{option.tooltip}
+						</TooltipContent>
+					</TooltipRoot>
+				))}
+			</ToggleGroup>
+		</TooltipProvider>
+	);
+}
+
+export default DockModeSwitcher;

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanDetailsPanel.module.scss

@@ -3,6 +3,10 @@
 	display: flex;
 	flex-direction: column;
 	overflow: hidden;
+
+	:global(.details-header) {
+		height: 39px;
+	}
 }
 
 .body {

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanDetailsPanel.tsx

@@ -1,25 +1,16 @@
 import { useCallback, useMemo } from 'react';
-import { Button } from '@signozhq/ui/button';
 import {
 	TabsContent,
 	TabsList,
 	TabsRoot,
 	TabsTrigger,
 } from '@signozhq/ui/tabs';
-import {
-	TooltipRoot,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from '@signozhq/ui/tooltip';
 import {
 	Bookmark,
 	CalendarClock,
 	ChartColumnBig,
-	Dock,
 	Link2,
 	List,
-	PanelBottom,
 	ScrollText,
 	Timer,
 } from '@signozhq/icons';
@@ -61,6 +52,7 @@ import {
 	SpanDetailVariant,
 	VISIBLE_ACTIONS,
 } from './constants';
+import DockModeSwitcher from './DockModeSwitcher';
 import { useSpanAttributeActions } from './hooks/useSpanAttributeActions';
 import { useTracePinnedFields } from './hooks/useTracePinnedFields';
 import {
@@ -492,31 +484,14 @@ function SpanDetailsPanel({
 		];
 
 		if (onVariantChange) {
-			const isDocked = variant === SpanDetailVariant.DOCKED;
 			actions.push({
-				key: 'dock-toggle',
+				key: 'dock-mode',
 				component: (
-					<TooltipProvider>
-						<TooltipRoot>
-							<TooltipTrigger asChild>
-								<Button
-									variant="ghost"
-									size="icon"
-									color="secondary"
-									onClick={(): void =>
-										onVariantChange(
-											isDocked ? SpanDetailVariant.DIALOG : SpanDetailVariant.DOCKED,
-										)
-									}
-								>
-									{isDocked ? <Dock size={14} /> : <PanelBottom size={14} />}
-								</Button>
-							</TooltipTrigger>
-							<TooltipContent className={styles.dockToggleTooltip}>
-								{isDocked ? 'Open as floating panel' : 'Dock at the bottom'}
-							</TooltipContent>
-						</TooltipRoot>
-					</TooltipProvider>
+					<DockModeSwitcher
+						value={variant}
+						onChange={onVariantChange}
+						tooltipClassName={styles.dockToggleTooltip}
+					/>
 				),
 			});
 		}
@@ -553,7 +528,10 @@ function SpanDetailsPanel({
 		</>
 	);
 
-	if (variant === SpanDetailVariant.DOCKED) {
+	if (
+		variant === SpanDetailVariant.DOCKED ||
+		variant === SpanDetailVariant.DOCKED_RIGHT
+	) {
 		return <div className={styles.root}>{content}</div>;
 	}
 

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/constants.ts

@@ -22,6 +22,7 @@ export enum SpanDetailVariant {
 	DRAWER = 'drawer',
 	DIALOG = 'dialog',
 	DOCKED = 'docked',
+	DOCKED_RIGHT = 'right',
 }
 
 export const KEY_ATTRIBUTE_KEYS: Record<string, string[]> = {

frontend/src/pages/TraceDetailsV3/SpanHoverCard/SpanHoverCard.tsx

@@ -5,6 +5,7 @@ import {
 	TooltipTrigger,
 } from '@signozhq/ui/tooltip';
 import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
+import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useTraceStore } from 'pages/TraceDetailsV3/stores/traceStore';
 import { getSpanAttribute, resolveSpanColor } from 'pages/TraceDetailsV3/utils';
 import { useMemo } from 'react';
@@ -101,6 +102,7 @@ export function SpanHoverCard({
 }: SpanHoverCardProps): JSX.Element {
 	const previewFields = useTraceStore((s) => s.previewFields);
 	const colorByFieldName = useTraceStore((s) => s.colorByField.name);
+	const isDarkMode = useIsDarkMode();
 
 	const hoverCardData = useMemo(() => {
 		if (!hoveredSpanId) {
@@ -121,11 +123,12 @@ export function SpanHoverCard({
 			})
 			.filter((r): r is SpanPreviewRow => r !== null);
 
+		const pair = resolveSpanColor(span, colorByFieldName);
 		return {
 			anchorTop: idx * rowHeight,
 			tooltip: {
 				spanName: span.name,
-				color: resolveSpanColor(span, colorByFieldName),
+				color: isDarkMode ? pair.color : pair.colorDark,
 				hasError: span.has_error,
 				relativeStartMs: span.timestamp - traceStartTime,
 				durationMs: span.duration_nano / 1e6,
@@ -139,6 +142,7 @@ export function SpanHoverCard({
 		colorByFieldName,
 		rowHeight,
 		traceStartTime,
+		isDarkMode,
 	]);
 
 	return (

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceDetailsHeader.module.scss

@@ -8,6 +8,7 @@
 	align-items: center;
 	padding: 8px 16px;
 	gap: 8px;
+	min-height: 52px;
 
 	// KeyValueLabel renders with a global `.key-value-label` root; keep it from
 	// shrinking on the trace details header.
@@ -20,6 +21,28 @@
 	flex-shrink: 0;
 }
 
+.traceIdSection {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	flex-shrink: 0;
+}
+
+.filterSection {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	min-width: 0;
+	margin-left: auto;
+}
+
+.headerActions {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	flex-shrink: 0;
+}
+
 .filter {
 	min-width: 0;
 }
@@ -29,15 +52,6 @@
 	flex: 1;
 }
 
-.oldViewBtn {
-	flex-shrink: 0;
-}
-
-.analyticsBtn {
-	flex-shrink: 0;
-	margin-left: auto;
-}
-
 .subHeader {
 	display: flex;
 	align-items: center;

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceDetailsHeader.tsx

@@ -21,6 +21,7 @@ import {
 	ArrowLeft,
 	CalendarClock,
 	ChartPie,
+	CornerUpLeft,
 	Server,
 	Timer,
 } from '@signozhq/icons';
@@ -117,7 +118,7 @@ function TraceDetailsHeader({
 		<div className={styles.wrapper}>
 			<div className={styles.header}>
 				{!isFilterExpanded && (
-					<>
+					<div className={styles.traceIdSection}>
 						<Button
 							variant="solid"
 							color="secondary"
@@ -133,20 +134,39 @@ function TraceDetailsHeader({
 							badgeValue={traceID || ''}
 							maxCharacters={100}
 						/>
-					</>
+					</div>
 				)}
 				{isDataLoaded && (
-					<>
+					<div
+						className={cx(
+							styles.filterSection,
+							isFilterExpanded && styles.isExpanded,
+						)}
+					>
 						{!isFilterExpanded && (
-							<>
-								<TooltipProvider>
+							<TooltipProvider>
+								<div className={styles.headerActions}>
 									<TooltipRoot>
 										<TooltipTrigger asChild>
 											<Button
 												variant="ghost"
 												size="icon"
 												color="secondary"
-												className={styles.analyticsBtn}
+												aria-label="Switch to legacy trace view"
+												onClick={handleSwitchToOldView}
+											>
+												<CornerUpLeft size={14} />
+											</Button>
+										</TooltipTrigger>
+										<TooltipContent>Switch to legacy trace view</TooltipContent>
+									</TooltipRoot>
+									<TooltipRoot>
+										<TooltipTrigger asChild>
+											<Button
+												variant="ghost"
+												size="icon"
+												color="secondary"
+												aria-label="Analytics"
 												onClick={(): void => setIsAnalyticsOpen((prev) => !prev)}
 											>
 												<ChartPie size={14} />
@@ -154,15 +174,18 @@ function TraceDetailsHeader({
 										</TooltipTrigger>
 										<TooltipContent>Analytics</TooltipContent>
 									</TooltipRoot>
-								</TooltipProvider>
-								<TraceOptionsMenu
-									showTraceDetails={showTraceDetails}
-									onToggleTraceDetails={handleToggleTraceDetails}
-									onOpenPreviewFields={(): void => setIsPreviewFieldsOpen(true)}
-								/>
-							</>
+									<TraceOptionsMenu
+										showTraceDetails={showTraceDetails}
+										onToggleTraceDetails={handleToggleTraceDetails}
+										onOpenPreviewFields={(): void => setIsPreviewFieldsOpen(true)}
+									/>
+								</div>
+							</TooltipProvider>
 						)}
-						<div className={cx(styles.filter, isFilterExpanded && styles.isExpanded)}>
+						<div
+							key="filter"
+							className={cx(styles.filter, isFilterExpanded && styles.isExpanded)}
+						>
 							<Filters
 								startTime={filterMetadata.startTime}
 								endTime={filterMetadata.endTime}
@@ -173,18 +196,7 @@ function TraceDetailsHeader({
 								onCollapse={(): void => setIsFilterExpanded(false)}
 							/>
 						</div>
-						{!isFilterExpanded && (
-							<Button
-								variant="solid"
-								color="secondary"
-								size="sm"
-								className={styles.oldViewBtn}
-								onClick={handleSwitchToOldView}
-							>
-								Legacy View
-							</Button>
-						)}
-					</>
+					</div>
 				)}
 			</div>
 

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceOptionsMenu.tsx

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import type { MenuItem } from '@signozhq/ui/dropdown-menu';
 import { Button } from '@signozhq/ui/button';
 import { DropdownMenuSimple as Dropdown } from '@signozhq/ui/dropdown-menu';
-import { Ellipsis } from '@signozhq/icons';
+import { Settings2 } from '@signozhq/icons';
 
 import { useTraceStore } from '../stores/traceStore';
 
@@ -93,7 +93,8 @@ function TraceOptionsMenu({
 				variant="ghost"
 				size="icon"
 				color="secondary"
-				prefix={<Ellipsis size={14} />}
+				aria-label="Trace options"
+				prefix={<Settings2 size={14} />}
 			/>
 		</Dropdown>
 	);

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/__tests__/TraceDetailsHeader.test.tsx

@@ -6,6 +6,7 @@ import TraceDetailsHeader from '../TraceDetailsHeader';
 
 const mockGoBack = jest.fn();
 const mockPush = jest.fn();
+const mockReplace = jest.fn();
 const mockHasInAppHistory = jest.fn();
 
 jest.mock('lib/history', () => ({
@@ -13,13 +14,47 @@ jest.mock('lib/history', () => ({
 	default: {
 		goBack: (): void => mockGoBack(),
 		push: (path: string): void => mockPush(path),
-		replace: jest.fn(),
+		replace: (path: string): void => mockReplace(path),
 		location: { pathname: '/', search: '' },
 		listen: (): (() => void) => (): void => undefined,
 	},
 	hasInAppHistory: (): boolean => mockHasInAppHistory(),
 }));
 
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useParams: (): { id: string } => ({ id: 'trace-123' }),
+}));
+
+const mockSetLocalStorageKey = jest.fn();
+jest.mock('api/browser/localstorage/set', () => ({
+	__esModule: true,
+	default: (key: string, value: string): void =>
+		mockSetLocalStorageKey(key, value),
+}));
+
+jest.mock(
+	'../../TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters',
+	() => ({
+		__esModule: true,
+		default: (): JSX.Element => <div data-testid="filters-stub" />,
+	}),
+);
+
+jest.mock('../../SpanDetailsPanel/AnalyticsPanel/AnalyticsPanel', () => ({
+	__esModule: true,
+	default: ({ isOpen }: { isOpen: boolean }): JSX.Element => (
+		<div data-testid="analytics-panel" data-open={isOpen ? 'true' : 'false'} />
+	),
+}));
+
+jest.mock('components/FieldsSelector', () => ({
+	__esModule: true,
+	default: ({ isOpen }: { isOpen: boolean }): JSX.Element => (
+		<div data-testid="fields-selector" data-open={isOpen ? 'true' : 'false'} />
+	),
+}));
+
 const baseProps = {
 	filterMetadata: {
 		startTime: 0,
@@ -58,3 +93,70 @@ describe('TraceDetailsHeader – back button', () => {
 		expect(mockGoBack).not.toHaveBeenCalled();
 	});
 });
+
+describe('TraceDetailsHeader – action cluster', () => {
+	beforeEach(() => {
+		mockReplace.mockClear();
+		mockSetLocalStorageKey.mockClear();
+	});
+
+	it('does not render the action buttons while data is still loading', () => {
+		render(<TraceDetailsHeader {...baseProps} isDataLoaded={false} />);
+
+		expect(
+			screen.queryByRole('button', { name: /switch to legacy trace view/i }),
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByRole('button', { name: /^analytics$/i }),
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByRole('button', { name: /trace options/i }),
+		).not.toBeInTheDocument();
+	});
+
+	it('renders Legacy View, Analytics, and Settings action buttons once data is loaded', () => {
+		render(<TraceDetailsHeader {...baseProps} isDataLoaded />);
+
+		expect(
+			screen.getByRole('button', { name: /switch to legacy trace view/i }),
+		).toBeInTheDocument();
+		expect(
+			screen.getByRole('button', { name: /^analytics$/i }),
+		).toBeInTheDocument();
+		expect(
+			screen.getByRole('button', { name: /trace options/i }),
+		).toBeInTheDocument();
+	});
+
+	it('routes to the legacy trace view and persists the preference on click', () => {
+		render(<TraceDetailsHeader {...baseProps} isDataLoaded />);
+
+		fireEvent.click(
+			screen.getByRole('button', { name: /switch to legacy trace view/i }),
+		);
+
+		expect(mockSetLocalStorageKey).toHaveBeenCalledWith(
+			'TRACE_DETAILS_PREFER_OLD_VIEW',
+			'true',
+		);
+		expect(mockReplace).toHaveBeenCalledTimes(1);
+		expect(mockReplace).toHaveBeenCalledWith(
+			expect.stringContaining('/trace-old/trace-123'),
+		);
+	});
+
+	it('toggles the AnalyticsPanel open state when the Analytics button is clicked', () => {
+		render(<TraceDetailsHeader {...baseProps} isDataLoaded />);
+
+		const panel = screen.getByTestId('analytics-panel');
+		expect(panel).toHaveAttribute('data-open', 'false');
+
+		const analyticsBtn = screen.getByRole('button', { name: /^analytics$/i });
+
+		fireEvent.click(analyticsBtn);
+		expect(panel).toHaveAttribute('data-open', 'true');
+
+		fireEvent.click(analyticsBtn);
+		expect(panel).toHaveAttribute('data-open', 'false');
+	});
+});

frontend/src/pages/TraceDetailsV3/TraceDetailsV3.module.scss

@@ -4,13 +4,28 @@
 	flex-direction: column;
 }
 
+.layoutRow {
+	display: flex;
+	flex: 1;
+	min-height: 0;
+	overflow: hidden;
+}
+
 .content {
 	display: flex;
 	flex-direction: column;
 	flex: 1;
+	min-width: 0;
 	overflow: hidden;
 }
 
+.rightDock {
+	display: flex;
+	flex-direction: column;
+	border-left: 1px solid var(--l2-border);
+	min-width: 0;
+}
+
 // Shared Ant Collapse chrome reset for both the flamegraph and waterfall
 // collapse panels.
 .flameCollapse,

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/drawUtils.test.ts

@@ -87,6 +87,7 @@ describe('Canvas Draw Utils', () => {
 				spanRectsArray,
 				eventRectsArray: [],
 				color: '#1890ff',
+				colorDark: '#000',
 				isDarkMode: false,
 				metrics: METRICS,
 			});
@@ -94,7 +95,9 @@ describe('Canvas Draw Utils', () => {
 			expect(ctx.beginPath).toHaveBeenCalled();
 			expect(ctx.roundRect).toHaveBeenCalledWith(10, 1, 100, 22, 2);
 			expect(ctx.fill).toHaveBeenCalled();
-			expect(ctx.stroke).not.toHaveBeenCalled();
+			// Rest state draws a subtle 1px rgba(0,0,0,0.3) outline to match spec
+			expect(ctx.stroke).toHaveBeenCalled();
+			expect(ctx.strokeStyle).toBe('rgba(0, 0, 0, 0.3)');
 			expect(spanRectsArray).toHaveLength(1);
 			expect(spanRectsArray[0]).toMatchObject({
 				x: 10,
@@ -126,15 +129,17 @@ describe('Canvas Draw Utils', () => {
 				spanRectsArray,
 				eventRectsArray: [],
 				color: '#2F80ED',
+				colorDark: '#000',
 				isDarkMode: false,
 				metrics: METRICS,
 				selectedSpanId: 'sel',
 			});
 
-			// Selected spans get solid l2-background fill + dashed border
+			// Selected spans get solid l2-background fill + dashed border.
+			// Light mode uses colorDark for the stroke for contrast against l2-background.
 			expect(ctx.fill).toHaveBeenCalled();
 			expect(ctx.setLineDash).toHaveBeenCalledWith(DASHED_BORDER_LINE_DASH);
-			expect(ctx.strokeStyle).toBe('#2F80ED');
+			expect(ctx.strokeStyle).toBe('#000');
 			expect(ctx.lineWidth).toBe(2);
 			expect(ctx.stroke).toHaveBeenCalled();
 			expect(ctx.setLineDash).toHaveBeenLastCalledWith([]);
@@ -161,6 +166,7 @@ describe('Canvas Draw Utils', () => {
 				spanRectsArray,
 				eventRectsArray: [],
 				color: '#2F80ED',
+				colorDark: '#000',
 				isDarkMode: false,
 				metrics: METRICS,
 				hoveredSpanId: 'hov',
@@ -193,6 +199,7 @@ describe('Canvas Draw Utils', () => {
 				spanRectsArray,
 				eventRectsArray: [],
 				color: '#000',
+				colorDark: '#000',
 				isDarkMode: false,
 				metrics: METRICS,
 			});
@@ -230,6 +237,7 @@ describe('Canvas Draw Utils', () => {
 				spanRectsArray,
 				eventRectsArray: [],
 				color: '#000',
+				colorDark: '#000',
 				isDarkMode: false,
 				metrics: METRICS,
 			});
@@ -254,6 +262,7 @@ describe('Canvas Draw Utils', () => {
 				spanRectsArray: [],
 				eventRectsArray: [],
 				color: '#000',
+				colorDark: '#000',
 				isDarkMode: false,
 				metrics: METRICS,
 			});
@@ -279,6 +288,7 @@ describe('Canvas Draw Utils', () => {
 				spanRectsArray: [],
 				eventRectsArray: [],
 				color: '#000',
+				colorDark: '#000',
 				isDarkMode: false,
 				metrics: METRICS,
 			});
@@ -314,6 +324,7 @@ describe('Canvas Draw Utils', () => {
 				spanRectsArray: [],
 				eventRectsArray: [],
 				color: '#000',
+				colorDark: '#000',
 				isDarkMode: false,
 				metrics: METRICS,
 			});
@@ -344,6 +355,7 @@ describe('Canvas Draw Utils', () => {
 				spanRectsArray: [],
 				eventRectsArray: [],
 				color: '#000',
+				colorDark: '#000',
 				isDarkMode: false,
 				metrics: METRICS,
 			});
@@ -371,8 +383,8 @@ describe('Canvas Draw Utils', () => {
 			expect(ctx.save).toHaveBeenCalled();
 			expect(ctx.translate).toHaveBeenCalledWith(50, 11);
 			expect(ctx.rotate).toHaveBeenCalledWith(Math.PI / 4);
-			expect(ctx.fillStyle).toBe('rgb(220, 38, 38)');
-			expect(ctx.strokeStyle).toBe('rgb(153, 27, 27)');
+			expect(ctx.fillStyle).toBe('#FC4E4E');
+			expect(ctx.strokeStyle).toBe('#fb0707');
 			expect(ctx.fillRect).toHaveBeenCalledWith(-3, -3, 6, 6);
 			expect(ctx.strokeRect).toHaveBeenCalledWith(-3, -3, 6, 6);
 			expect(ctx.restore).toHaveBeenCalled();
@@ -408,8 +420,8 @@ describe('Canvas Draw Utils', () => {
 				eventDotSize: 6,
 			});
 
-			expect(ctx.fillStyle).toBe('rgb(239, 68, 68)');
-			expect(ctx.strokeStyle).toBe('rgb(185, 28, 28)');
+			expect(ctx.fillStyle).toBe('#FC4E4E');
+			expect(ctx.strokeStyle).toBe('#fb0707');
 		});
 
 		it('falls back to cyan/blue for unparseable span colors', () => {
@@ -461,6 +473,7 @@ describe('Canvas Draw Utils', () => {
 				spanRectsArray: [],
 				eventRectsArray: [],
 				color: '#000',
+				colorDark: '#000',
 				isDarkMode: false,
 				metrics: METRICS,
 				hoveredSpanId: 'p',
@@ -483,6 +496,7 @@ describe('Canvas Draw Utils', () => {
 				spanRectsArray: [],
 				eventRectsArray: [],
 				color: '#000',
+				colorDark: '#000',
 				isDarkMode: false,
 				metrics: METRICS,
 				selectedSpanId: 'p',
@@ -524,6 +538,7 @@ describe('Canvas Draw Utils', () => {
 				spanRectsArray: [],
 				eventRectsArray: [],
 				color: '#000',
+				colorDark: '#000',
 				isDarkMode: false,
 				metrics: METRICS,
 			});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/utils.presentation.test.ts

@@ -3,11 +3,13 @@ import { TelemetryFieldKey } from 'types/api/v5/queryRange';
 import { getFlamegraphSpanGroupValue, getSpanColor } from '../utils';
 import { MOCK_SPAN } from './testUtils';
 
-const mockGenerateColor = jest.fn();
+const mockGenerateColorPair = jest.fn();
 
-jest.mock('lib/uPlotLib/utils/generateColor', () => ({
-	generateColor: (key: string, colorMap: Record<string, string>): string =>
-		mockGenerateColor(key, colorMap),
+jest.mock('pages/TraceDetailsV3/utils/generateColorPair', () => ({
+	generateColorPair: (name: string): { color: string; colorDark: string } =>
+		mockGenerateColorPair(name),
+	RESERVED_ERROR: '#FC4E4E',
+	darkenHex: (hex: string): string => hex,
 }));
 
 const SERVICE_FIELD: TelemetryFieldKey = {
@@ -24,48 +26,39 @@ const HOST_FIELD: TelemetryFieldKey = {
 describe('Presentation / Styling Utils', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
-		mockGenerateColor.mockReturnValue('#2F80ED');
+		mockGenerateColorPair.mockReturnValue({
+			color: '#2F80ED',
+			colorDark: '#1a4d99',
+		});
 	});
 
 	describe('getSpanColor', () => {
 		it('uses generated colour from groupValue for normal span', () => {
-			mockGenerateColor.mockReturnValue('#1890ff');
+			mockGenerateColorPair.mockReturnValue({
+				color: '#1890ff',
+				colorDark: '#0d5599',
+			});
 
-			const color = getSpanColor({
+			const result = getSpanColor({
 				span: { ...MOCK_SPAN, hasError: false },
 				isDarkMode: false,
 				groupValue: 'my-bucket',
 			});
 
-			expect(mockGenerateColor).toHaveBeenCalledWith(
-				'my-bucket',
-				expect.any(Object),
-			);
-			expect(color).toBe('#1890ff');
+			expect(mockGenerateColorPair).toHaveBeenCalledWith('my-bucket');
+			expect(result.color).toBe('#1890ff');
+			expect(result.colorDark).toBe('#0d5599');
 		});
 
-		it('overrides with error color in light mode when span has error', () => {
-			mockGenerateColor.mockReturnValue('#1890ff');
-
-			const color = getSpanColor({
+		it('overrides with reserved error color when span has error', () => {
+			const result = getSpanColor({
 				span: { ...MOCK_SPAN, hasError: true },
 				isDarkMode: false,
 				groupValue: 'my-bucket',
 			});
 
-			expect(color).toBe('rgb(220, 38, 38)');
-		});
-
-		it('overrides with error color in dark mode when span has error', () => {
-			mockGenerateColor.mockReturnValue('#1890ff');
-
-			const color = getSpanColor({
-				span: { ...MOCK_SPAN, hasError: true },
-				isDarkMode: true,
-				groupValue: 'my-bucket',
-			});
-
-			expect(color).toBe('rgb(239, 68, 68)');
+			expect(result.color).toBe('#FC4E4E');
+			expect(result.colorDark).toBe('#FC4E4E');
 		});
 	});
 

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/constants.ts

@@ -13,7 +13,7 @@ export const EVENT_DOT_SIZE_RATIO = EVENT_DOT_SIZE / SPAN_BAR_HEIGHT;
 export const MIN_EVENT_DOT_SIZE = 4;
 export const MAX_EVENT_DOT_SIZE = EVENT_DOT_SIZE;
 
-export const LABEL_FONT = '11px Inter, sans-serif';
+export const LABEL_FONT = '500 11px Inter, sans-serif';
 export const LABEL_PADDING_X = 8;
 export const MIN_WIDTH_FOR_NAME = 30;
 export const MIN_WIDTH_FOR_NAME_AND_DURATION = 80;

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphDraw.ts

@@ -1,6 +1,5 @@
 import React, { RefObject, useCallback, useMemo, useRef } from 'react';
-import { themeColors } from 'constants/theme';
-import { generateColor } from 'lib/uPlotLib/utils/generateColor';
+import { generateColorPair } from 'pages/TraceDetailsV3/utils/generateColorPair';
 import { useTraceStore } from 'pages/TraceDetailsV3/stores/traceStore';
 import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
 import { TelemetryFieldKey } from 'types/api/v5/queryRange';
@@ -118,7 +117,11 @@ function drawLevel(args: DrawLevelArgs): void {
 		width = clamp(width, 1, Infinity);
 
 		const groupValue = getFlamegraphSpanGroupValue(span, colorByField);
-		const color = getSpanColor({ span, isDarkMode, groupValue });
+		const { color, colorDark } = getSpanColor({
+			span,
+			isDarkMode,
+			groupValue,
+		});
 
 		const isDimmedByFilter =
 			!!isFilterActiveInLevel &&
@@ -135,6 +138,7 @@ function drawLevel(args: DrawLevelArgs): void {
 			spanRectsArray,
 			eventRectsArray,
 			color,
+			colorDark,
 			isDarkMode,
 			metrics,
 			selectedSpanId,
@@ -155,6 +159,7 @@ interface DrawConnectorLinesArgs {
 	viewportHeight: number;
 	metrics: FlamegraphRowMetrics;
 	colorByField: TelemetryFieldKey;
+	isDarkMode: boolean;
 }
 
 function drawConnectorLines(args: DrawConnectorLinesArgs): void {
@@ -168,6 +173,7 @@ function drawConnectorLines(args: DrawConnectorLinesArgs): void {
 		viewportHeight,
 		metrics,
 		colorByField,
+		isDarkMode,
 	} = args;
 
 	ctx.save();
@@ -197,8 +203,8 @@ function drawConnectorLines(args: DrawConnectorLinesArgs): void {
 			{ serviceName: conn.serviceName, resource: conn.resource },
 			colorByField,
 		);
-		const color = generateColor(groupValue, themeColors.traceDetailColorsV3);
-		ctx.strokeStyle = color;
+		const pair = generateColorPair(groupValue);
+		ctx.strokeStyle = isDarkMode ? pair.color : pair.colorDark;
 
 		const x = clamp(xFrac * cssWidth, 0, cssWidth);
 		ctx.beginPath();
@@ -294,6 +300,7 @@ export function useFlamegraphDraw(
 			viewportHeight,
 			metrics,
 			colorByField,
+			isDarkMode,
 		});
 
 		const spanRectsArray: SpanRect[] = [];

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphHover.ts

@@ -211,11 +211,14 @@ export function useFlamegraphHover(
 					durationMs: span.durationNano / 1e6,
 					clientX: e.clientX,
 					clientY: e.clientY,
-					spanColor: getSpanColor({
-						span,
-						isDarkMode,
-						groupValue: getFlamegraphSpanGroupValue(span, colorByField),
-					}),
+					spanColor: ((): string => {
+						const pair = getSpanColor({
+							span,
+							isDarkMode,
+							groupValue: getFlamegraphSpanGroupValue(span, colorByField),
+						});
+						return isDarkMode ? pair.color : pair.colorDark;
+					})(),
 					event: {
 						name: event.name,
 						timeOffsetMs: eventTimeMs - span.timestamp,
@@ -244,11 +247,14 @@ export function useFlamegraphHover(
 					durationMs: span.durationNano / 1e6,
 					clientX: e.clientX,
 					clientY: e.clientY,
-					spanColor: getSpanColor({
-						span,
-						isDarkMode,
-						groupValue: getFlamegraphSpanGroupValue(span, colorByField),
-					}),
+					spanColor: ((): string => {
+						const pair = getSpanColor({
+							span,
+							isDarkMode,
+							groupValue: getFlamegraphSpanGroupValue(span, colorByField),
+						});
+						return isDarkMode ? pair.color : pair.colorDark;
+					})(),
 					previewRows: buildPreviewRows(span),
 				});
 				updateCursor(canvas, span);

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/utils.ts

@@ -1,8 +1,12 @@
 /* eslint-disable sonarjs/cognitive-complexity */
-import { themeColors } from 'constants/theme';
 import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
-import { generateColor } from 'lib/uPlotLib/utils/generateColor';
 import { getSpanAttribute } from 'pages/TraceDetailsV3/utils';
+import {
+	ColorPair,
+	darkenHex,
+	generateColorPair,
+	RESERVED_ERROR,
+} from 'pages/TraceDetailsV3/utils/generateColorPair';
 import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
 import { TelemetryFieldKey } from 'types/api/v5/queryRange';
 
@@ -106,15 +110,12 @@ interface GetSpanColorArgs {
 	groupValue: string;
 }
 
-export function getSpanColor(args: GetSpanColorArgs): string {
-	const { span, isDarkMode, groupValue } = args;
-	let color = generateColor(groupValue, themeColors.traceDetailColorsV3);
-
+export function getSpanColor(args: GetSpanColorArgs): ColorPair {
+	const { span, groupValue } = args;
 	if (span.hasError) {
-		color = isDarkMode ? 'rgb(239, 68, 68)' : 'rgb(220, 38, 38)';
+		return { color: RESERVED_ERROR, colorDark: RESERVED_ERROR };
 	}
-
-	return color;
+	return generateColorPair(groupValue);
 }
 
 export interface EventDotColor {
@@ -130,8 +131,8 @@ export function getEventDotColor(
 ): EventDotColor {
 	if (isError) {
 		return {
-			fill: isDarkMode ? 'rgb(239, 68, 68)' : 'rgb(220, 38, 38)',
-			stroke: isDarkMode ? 'rgb(185, 28, 28)' : 'rgb(153, 27, 27)',
+			fill: RESERVED_ERROR,
+			stroke: darkenHex(RESERVED_ERROR, 0.22),
 		};
 	}
 
@@ -209,6 +210,9 @@ interface DrawSpanBarArgs {
 	spanRectsArray: SpanRect[];
 	eventRectsArray: EventRect[];
 	color: string;
+	// Darkened variant used as foreground (stroke + label) on light mode
+	// hover/selected, where the base color sits against a near-white panel.
+	colorDark: string;
 	isDarkMode: boolean;
 	metrics: FlamegraphRowMetrics;
 	selectedSpanId?: string | null;
@@ -228,6 +232,7 @@ export function drawSpanBar(args: DrawSpanBarArgs): void {
 		spanRectsArray,
 		eventRectsArray,
 		color,
+		colorDark,
 		isDarkMode,
 		metrics,
 		selectedSpanId,
@@ -259,15 +264,21 @@ export function drawSpanBar(args: DrawSpanBarArgs): void {
 		if (isSelected) {
 			ctx.setLineDash(DASHED_BORDER_LINE_DASH);
 		}
-		ctx.strokeStyle = color;
+		ctx.strokeStyle = isDarkMode ? color : colorDark;
 		ctx.lineWidth = isSelected ? 2 : 1;
 		ctx.stroke();
 		if (isSelected) {
 			ctx.setLineDash([]);
 		}
 	} else {
-		ctx.fillStyle = color;
+		// Light mode uses the darkened variant as fill so bars contrast against
+		// the white panel background; dark mode keeps the bright base.
+		ctx.fillStyle = isDarkMode ? color : colorDark;
 		ctx.fill();
+		// Subtle outline to match spec: 1px semi-transparent black border at rest
+		ctx.strokeStyle = 'rgba(0, 0, 0, 0.3)';
+		ctx.lineWidth = 1;
+		ctx.stroke();
 	}
 
 	spanRectsArray.push({
@@ -292,7 +303,10 @@ export function drawSpanBar(args: DrawSpanBarArgs): void {
 		const eventX = x + (clampedOffset / 100) * width;
 		const eventY = spanY + metrics.SPAN_BAR_HEIGHT / 2;
 
-		const dotColor = getEventDotColor(color, event.isError, isDarkMode);
+		// Event dots derive from the effective bar color so they track the
+		// light/dark variant the bar is rendered with.
+		const parentBarColor = isDarkMode ? color : colorDark;
+		const dotColor = getEventDotColor(parentBarColor, event.isError, isDarkMode);
 		const eventKey = `${span.spanId}-${event.name}-${event.timeUnixNano}`;
 		const isEventHovered = hoveredEventKey === eventKey;
 		const dotSize = isEventHovered
@@ -328,6 +342,7 @@ export function drawSpanBar(args: DrawSpanBarArgs): void {
 		y: spanY,
 		width,
 		color,
+		colorDark,
 		isSelectedOrHovered,
 		isDarkMode,
 		spanBarHeight: metrics.SPAN_BAR_HEIGHT,
@@ -347,6 +362,7 @@ interface DrawSpanLabelArgs {
 	y: number;
 	width: number;
 	color: string;
+	colorDark: string;
 	isSelectedOrHovered: boolean;
 	isDarkMode: boolean;
 	spanBarHeight: number;
@@ -360,6 +376,7 @@ function drawSpanLabel(args: DrawSpanLabelArgs): void {
 		y,
 		width,
 		color,
+		colorDark,
 		isSelectedOrHovered,
 		isDarkMode,
 		spanBarHeight,
@@ -379,11 +396,12 @@ function drawSpanLabel(args: DrawSpanLabelArgs): void {
 	ctx.clip();
 
 	ctx.font = LABEL_FONT;
+	const hoverLabelColor = isDarkMode ? color : colorDark;
 	ctx.fillStyle = isSelectedOrHovered
-		? color
+		? hoverLabelColor
 		: isDarkMode
-			? 'rgba(0, 0, 0, 0.9)'
-			: 'rgba(255, 255, 255, 0.9)';
+			? 'rgba(0, 0, 0, 0.7)'
+			: 'rgba(255, 255, 255, 0.95)';
 	ctx.textBaseline = 'middle';
 
 	const textY = y + spanBarHeight / 2;

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters.module.scss

@@ -3,12 +3,6 @@
 	align-items: center;
 	gap: 12px;
 
-	// QuerySearch child sets `query-builder-search-v2` globally; size it to the
-	// search container by reaching into the descendant.
-	:global(.query-builder-search-v2) {
-		width: 100%;
-	}
-
 	// ToggleGroup children use generated class names; nest the global selectors
 	// under the local row so they only apply inside this filter row.
 	:global([class*='toggle-group']) {
@@ -20,8 +14,43 @@
 	}
 }
 
+// Expanded-mode root: grows to fill .filter wrapper, and lets the search
+// input flex within. In collapsed mode none of these grow — the whole
+// Filters region is content-sized (just the pill + result + toggle).
 .isExpanded {
 	flex: 1;
+
+	.searchInput {
+		flex: 1;
+	}
+
+	.searchAndNav {
+		flex: 1;
+	}
+}
+
+.categoryControls {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+}
+
+.searchInput {
+	display: flex;
+	align-items: center;
+	min-width: 0;
+}
+
+.searchPill {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+}
+
+.searchAndNav {
+	display: flex;
+	align-items: center;
+	min-width: 0;
 }
 
 .searchContainer {
@@ -29,6 +58,25 @@
 	min-width: 0;
 }
 
+.resultActions {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	flex-shrink: 0;
+}
+
+.expandedActions {
+	display: flex;
+	align-items: center;
+	gap: 2px;
+}
+
+.highlightControl {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+}
+
 .pill {
 	display: flex;
 	align-items: center;
@@ -85,14 +133,6 @@
 	border-radius: 4px;
 }
 
-.collapseBtn {
-	flex-shrink: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	box-shadow: none;
-}
-
 .highlightErrorsToggle {
 	display: flex;
 	align-items: center;
@@ -100,37 +140,3 @@
 	flex-shrink: 0;
 	white-space: nowrap;
 }
-
-.preNextToggle {
-	display: flex;
-	flex-shrink: 0;
-	gap: 12px;
-}
-
-.preNextCount {
-	display: flex;
-	align-items: center;
-	margin: auto;
-	color: var(--l2-foreground);
-	font-family: 'Geist Mono';
-	font-size: 12px;
-	font-weight: 400;
-	line-height: 18px;
-}
-
-.filterStatus {
-	display: flex;
-	align-items: center;
-	gap: 6px;
-	flex-shrink: 0;
-	color: var(--l2-foreground);
-	font-family: 'Geist Mono';
-	font-size: 12px;
-	font-weight: 400;
-	line-height: 18px;
-}
-
-.hasError {
-	color: var(--destructive);
-	cursor: help;
-}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters.tsx

@@ -1,15 +1,7 @@
 import { useCallback, useRef, useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
-import {
-	ChevronDown,
-	ChevronUp,
-	Copy,
-	Info,
-	Loader,
-	Search,
-	X,
-} from '@signozhq/icons';
+import { ChevronsRight, Copy, Search, X } from '@signozhq/icons';
 import { Switch } from '@signozhq/ui/switch';
 import { ToggleGroup, ToggleGroupItem } from '@signozhq/ui/toggle-group';
 import { toast } from '@signozhq/ui/sonner';
@@ -21,7 +13,6 @@ import {
 	TooltipTrigger,
 } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
-import { AxiosError } from 'axios';
 import cx from 'classnames';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
 import { convertExpressionToFilters } from 'components/QueryBuilderV2/utils';
@@ -42,6 +33,7 @@ import {
 	SpanCategory,
 	useSpanCategoryFilter,
 } from './hooks/useSpanCategoryFilter';
+import QueryResult from './QueryResult';
 
 import styles from './Filters.module.scss';
 
@@ -152,6 +144,16 @@ function Filters({
 		runQuery(expressionRef.current);
 	}, [runQuery]);
 
+	const handleClear = useCallback((): void => {
+		setExpression('');
+		expressionRef.current = '';
+		setFilters({ items: [], op: 'AND' });
+		setFilteredSpanIds([]);
+		onFilteredSpansChange?.([], false);
+		setCurrentSearchedIndex(0);
+		setNoData(false);
+	}, [onFilteredSpansChange]);
+
 	// Expression-based filter hooks
 	const filterProps = {
 		expression,
@@ -266,164 +268,167 @@ function Filters({
 		</div>
 	);
 
-	const statusIndicators = (
-		<>
-			{isFetching && <Loader className="animate-spin" />}
-			{error && (
-				<TooltipRoot>
-					<TooltipTrigger asChild>
-						<span className={cx(styles.filterStatus, styles.hasError)}>
-							<Info />
-							API error
-						</span>
-					</TooltipTrigger>
-					<TooltipContent>
-						{(error as AxiosError)?.message || 'Something went wrong'}
-					</TooltipContent>
-				</TooltipRoot>
-			)}
-			{!error && noData && (
-				<Typography.Text className={styles.filterStatus}>
-					No results found
-				</Typography.Text>
-			)}
-		</>
+	const hasExpression = expression.trim().length > 0;
+	const hasResults = filteredSpanIds.length > 0;
+
+	const handlePrev = useCallback((): void => {
+		handlePrevNext(currentSearchedIndex - 1);
+		setCurrentSearchedIndex((prev) => prev - 1);
+	}, [currentSearchedIndex, handlePrevNext]);
+
+	const handleNext = useCallback((): void => {
+		handlePrevNext(currentSearchedIndex + 1);
+		setCurrentSearchedIndex((prev) => prev + 1);
+	}, [currentSearchedIndex, handlePrevNext]);
+
+	const pill = (
+		/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
+		<div className={styles.pill} onClick={onExpand}>
+			<Search size={12} />
+			<span className={styles.pillText}>{expression || 'Search...'}</span>
+			{expression && <span className={styles.pillIndicator} />}
+		</div>
 	);
 
-	// --- COLLAPSED VIEW ---
-	if (!isExpanded) {
-		const pill = (
-			/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
-			<div className={styles.pill} onClick={onExpand}>
-				<Search size={12} />
-				<span className={styles.pillText}>{expression || 'Search...'}</span>
-				{expression && <span className={styles.pillIndicator} />}
-			</div>
-		);
+	const pillWithPopover = expression ? (
+		<TooltipRoot>
+			<TooltipTrigger asChild>{pill}</TooltipTrigger>
+			<TooltipContent side="bottom" align="start">
+				<div className={styles.pillPopover}>
+					<div className={styles.pillPopoverHeader}>
+						<Typography.Text>Search query</Typography.Text>
+						<Button
+							variant="ghost"
+							size="icon"
+							color="secondary"
+							onClick={(): void => {
+								setCopy(expression);
+								toast.success('Copied to clipboard', {
+									richColors: false,
+									position: 'top-right',
+								});
+							}}
+						>
+							<Copy size={12} />
+						</Button>
+					</div>
+					<div className={styles.pillPopoverExpression}>{expression}</div>
+				</div>
+			</TooltipContent>
+		</TooltipRoot>
+	) : (
+		pill
+	);
 
-		return (
-			<TooltipProvider>
-				<div className={styles.root}>
-					{expression ? (
-						<TooltipRoot>
-							<TooltipTrigger asChild>{pill}</TooltipTrigger>
-							<TooltipContent side="bottom" align="start">
-								<div className={styles.pillPopover}>
-									<div className={styles.pillPopoverHeader}>
-										<Typography.Text>Search query</Typography.Text>
+	// Mode-conditional render: only one of (pill | QuerySearch) is mounted
+	// at a time. Collapsing unmounts the editor — half-written queries are
+	// dropped, so collapse can't accidentally commit a malformed expression
+	// and fire an erroring /query_range request.
+	return (
+		<TooltipProvider>
+			{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+			<div
+				className={cx(styles.root, isExpanded && styles.isExpanded)}
+				ref={containerRef}
+				onBlur={(e): void => {
+					const relatedTarget = e.relatedTarget as Node | null;
+					const blurredIntoSelf = !!containerRef.current?.contains(relatedTarget);
+					if (!blurredIntoSelf) {
+						handleBlur();
+					}
+				}}
+			>
+				{isExpanded && (
+					<div className={styles.categoryControls}>
+						<ToggleGroup
+							type="single"
+							value={selectedCategory}
+							onChange={(value): void => {
+								if (value) {
+									handleCategoryChange(value as SpanCategory);
+								}
+							}}
+							size="sm"
+						>
+							{categories.map((category) => (
+								<ToggleGroupItem key={category} value={category}>
+									{category}
+								</ToggleGroupItem>
+							))}
+						</ToggleGroup>
+					</div>
+				)}
+
+				<div className={styles.searchInput}>
+					{isExpanded ? (
+						<div className={styles.searchAndNav}>
+							<div className={styles.searchContainer}>
+								<QuerySearch
+									queryData={{
+										...BASE_FILTER_QUERY,
+										filters,
+										filter: { expression },
+									}}
+									onChange={handleExpressionChange}
+									onRun={handleRunQuery}
+									dataSource={DataSource.TRACES}
+									placeholder="Enter your filter query (e.g., http.status_code >= 500 AND service.name = 'frontend')"
+								/>
+							</div>
+						</div>
+					) : (
+						<div className={styles.searchPill}>{pillWithPopover}</div>
+					)}
+				</div>
+
+				<div className={styles.resultActions}>
+					<QueryResult
+						hasExpression={hasExpression}
+						hasResults={hasResults}
+						isFetching={isFetching}
+						error={error}
+						noData={noData}
+						currentIndex={currentSearchedIndex}
+						total={filteredSpanIds.length}
+						onPrev={handlePrev}
+						onNext={handleNext}
+						showNavigation={isExpanded}
+					/>
+					{isExpanded && (
+						<div className={styles.expandedActions}>
+							{hasExpression && (
+								<TooltipRoot>
+									<TooltipTrigger asChild>
 										<Button
 											variant="ghost"
 											size="icon"
 											color="secondary"
-											onClick={(): void => {
-												setCopy(expression);
-												toast.success('Copied to clipboard', {
-													richColors: false,
-													position: 'top-right',
-												});
-											}}
+											onClick={handleClear}
 										>
-											<Copy size={12} />
+											<X size={14} />
 										</Button>
-									</div>
-									<div className={styles.pillPopoverExpression}>{expression}</div>
-								</div>
-							</TooltipContent>
-						</TooltipRoot>
-					) : (
-						pill
+									</TooltipTrigger>
+									<TooltipContent>Clear filter</TooltipContent>
+								</TooltipRoot>
+							)}
+							<TooltipRoot>
+								<TooltipTrigger asChild>
+									<Button
+										variant="ghost"
+										size="icon"
+										color="secondary"
+										onClick={onCollapse}
+									>
+										<ChevronsRight size={14} />
+									</Button>
+								</TooltipTrigger>
+								<TooltipContent>Collapse filters</TooltipContent>
+							</TooltipRoot>
+						</div>
 					)}
-					{highlightErrorsToggle}
-					{statusIndicators}
 				</div>
-			</TooltipProvider>
-		);
-	}
 
-	// --- EXPANDED VIEW ---
-	return (
-		<TooltipProvider>
-			<div className={cx(styles.root, styles.isExpanded)}>
-				<ToggleGroup
-					type="single"
-					value={selectedCategory}
-					onChange={(value): void => {
-						if (value) {
-							handleCategoryChange(value as SpanCategory);
-						}
-					}}
-					size="sm"
-				>
-					{categories.map((category) => (
-						<ToggleGroupItem key={category} value={category}>
-							{category}
-						</ToggleGroupItem>
-					))}
-				</ToggleGroup>
-				{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
-				<div
-					className={styles.searchContainer}
-					ref={containerRef}
-					onBlur={(e): void => {
-						if (!containerRef.current?.contains(e.relatedTarget as Node)) {
-							handleBlur();
-						}
-					}}
-				>
-					<QuerySearch
-						queryData={{
-							...BASE_FILTER_QUERY,
-							filters,
-							filter: { expression },
-						}}
-						onChange={handleExpressionChange}
-						onRun={handleRunQuery}
-						dataSource={DataSource.TRACES}
-						placeholder="Enter your filter query (e.g., http.status_code >= 500 AND service.name = 'frontend')"
-					/>
-				</div>
-				{filteredSpanIds.length > 0 && (
-					<div className={styles.preNextToggle}>
-						<Typography.Text className={styles.preNextCount}>
-							{currentSearchedIndex + 1} / {filteredSpanIds.length}
-						</Typography.Text>
-						<Button
-							variant="ghost"
-							size="icon"
-							color="secondary"
-							disabled={currentSearchedIndex === 0}
-							onClick={(): void => {
-								handlePrevNext(currentSearchedIndex - 1);
-								setCurrentSearchedIndex((prev) => prev - 1);
-							}}
-						>
-							<ChevronUp size={14} />
-						</Button>
-						<Button
-							variant="ghost"
-							size="icon"
-							color="secondary"
-							disabled={currentSearchedIndex === filteredSpanIds.length - 1}
-							onClick={(): void => {
-								handlePrevNext(currentSearchedIndex + 1);
-								setCurrentSearchedIndex((prev) => prev + 1);
-							}}
-						>
-							<ChevronDown size={14} />
-						</Button>
-					</div>
-				)}
-				<Button
-					variant="ghost"
-					size="icon"
-					color="secondary"
-					className={styles.collapseBtn}
-					onClick={onCollapse}
-				>
-					<X size={14} />
-				</Button>
-				{highlightErrorsToggle}
-				{statusIndicators}
+				<div className={styles.highlightControl}>{highlightErrorsToggle}</div>
 			</div>
 		</TooltipProvider>
 	);

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Filters/QueryResult.module.scss

@@ -0,0 +1,32 @@
+.resultNavCount {
+	padding: 0 6px;
+	white-space: nowrap;
+	color: var(--l1-foreground);
+	font-family: 'Geist Mono';
+	font-size: 12px;
+}
+
+.resultNavDivider {
+	width: 1px;
+	height: 14px;
+	background: var(--l3-border);
+	margin: 0 4px;
+	flex-shrink: 0;
+}
+
+.filterStatus {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	flex-shrink: 0;
+	color: var(--l2-foreground);
+	font-family: 'Geist Mono';
+	font-size: 12px;
+	font-weight: 400;
+	line-height: 18px;
+}
+
+.hasError {
+	color: var(--destructive);
+	cursor: help;
+}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Filters/QueryResult.tsx

@@ -0,0 +1,111 @@
+import { ChevronDown, ChevronUp, Info, Loader } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import {
+	TooltipContent,
+	TooltipRoot,
+	TooltipTrigger,
+} from '@signozhq/ui/tooltip';
+import { Typography } from '@signozhq/ui/typography';
+import { AxiosError } from 'axios';
+import cx from 'classnames';
+
+import styles from './QueryResult.module.scss';
+
+type QueryResultProps = {
+	hasExpression: boolean;
+	hasResults: boolean;
+	isFetching: boolean;
+	error: unknown;
+	noData: boolean;
+	currentIndex: number;
+	total: number;
+	onPrev: () => void;
+	onNext: () => void;
+	showNavigation?: boolean;
+};
+
+function QueryResult({
+	hasExpression,
+	hasResults,
+	isFetching,
+	error,
+	noData,
+	currentIndex,
+	total,
+	onPrev,
+	onNext,
+	showNavigation = true,
+}: QueryResultProps): JSX.Element | null {
+	if (!hasExpression) {
+		return null;
+	}
+
+	let content: JSX.Element | null = null;
+	if (hasResults && showNavigation) {
+		// Prefer count over loader on refresh so stale results stay visible.
+		content = (
+			<>
+				<Typography.Text className={styles.resultNavCount}>
+					{currentIndex + 1} / {total}
+				</Typography.Text>
+				<Button
+					variant="ghost"
+					size="icon"
+					color="secondary"
+					disabled={currentIndex === 0}
+					onClick={onPrev}
+				>
+					<ChevronUp size={14} />
+				</Button>
+				<Button
+					variant="ghost"
+					size="icon"
+					color="secondary"
+					disabled={currentIndex === total - 1}
+					onClick={onNext}
+				>
+					<ChevronDown size={14} />
+				</Button>
+			</>
+		);
+	} else if (isFetching) {
+		content = <Loader className="animate-spin" />;
+	} else if (error) {
+		content = (
+			<TooltipRoot>
+				<TooltipTrigger asChild>
+					<span className={cx(styles.filterStatus, styles.hasError)}>
+						<Info />
+						API error
+					</span>
+				</TooltipTrigger>
+				<TooltipContent>
+					{(error as AxiosError)?.message || 'Something went wrong'}
+				</TooltipContent>
+			</TooltipRoot>
+		);
+	} else if (noData) {
+		content = (
+			<Typography.Text className={styles.filterStatus}>
+				No results found
+			</Typography.Text>
+		);
+	}
+
+	if (!content) {
+		return null;
+	}
+
+	return (
+		<>
+			{content}
+			{showNavigation && <span className={styles.resultNavDivider} />}
+		</>
+	);
+}
+
+QueryResult.defaultProps = {
+	showNavigation: true,
+};
+
+export default QueryResult;

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Success.module.scss

@@ -433,6 +433,7 @@
 	border-radius: 50%;
 	flex-shrink: 0;
 	margin: 0 6px;
+	background-color: var(--service-dot-color);
 
 	&.hasError {
 		box-shadow: 0 0 0 2px rgba(255, 70, 70, 0.3);
@@ -514,7 +515,7 @@
 .spanBar {
 	position: absolute;
 	height: 18px;
-	top: 5px;
+	top: 3px;
 	border-radius: 2px;
 	display: flex;
 	align-items: center;
@@ -522,7 +523,9 @@
 	overflow: hidden;
 	cursor: pointer;
 	white-space: nowrap;
-	color: rgba(0, 0, 0, 0.9);
+	// Theme-resolved in JS: dark text on the bright dark-mode fill, white text on
+	// the darkened light-mode fill. See SpanDuration in Success.tsx.
+	color: var(--span-text-color);
 	background-color: var(--span-color);
 	border: 1px solid transparent;
 }
@@ -548,7 +551,6 @@
 
 .spanDurationText {
 	color: inherit;
-	opacity: 0.8;
 	font-size: 10px;
 	margin-left: 8px;
 	flex-shrink: 0;
@@ -607,25 +609,6 @@
 	}
 }
 
-// `.spanBar` text color is the one place where semantic tokens don't fit
-// cleanly: in dark mode the bar's bright `--span-color` background needs dark
-// text; in light mode `generateColor` produces darker bar fills, so the text
-// must flip to white.
-:global(.lightMode) {
-	.root {
-		.spanDuration .spanBar {
-			color: rgba(255, 255, 255, 0.9);
-		}
-
-		.timelineRow:hover .spanBar,
-		.timelineRow.hoveredSpan .spanBar,
-		.isInterested .spanBar,
-		.isSelectedNonMatching .spanBar {
-			color: var(--span-color);
-		}
-	}
-}
-
 // Tooltips for the row's hover-revealed action buttons (Copy / Add to Funnel).
 // Bumped above FloatingPanel (z-index 999) so they stay visible when the
 // SpanDetailsPanel is docked as a floating panel.

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Success.tsx

@@ -29,6 +29,7 @@ import HttpStatusBadge from 'components/HttpStatusBadge/HttpStatusBadge';
 import TimelineV3 from 'components/TimelineV3/TimelineV3';
 import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
 import { useCopySpanLink } from 'hooks/trace/useCopySpanLink';
+import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { colorToRgb } from 'lib/uPlotLib/utils/generateColor';
@@ -214,8 +215,12 @@ const SpanOverview = memo(function SpanOverview({
 	const isRootSpan = span.level === 0;
 	const { onSpanCopy } = useCopySpanLink(span);
 	const colorByFieldName = useTraceStore((s) => s.colorByField.name);
+	const isDarkMode = useIsDarkMode();
 
-	const color = resolveSpanColor(span, colorByFieldName);
+	const { color, colorDark } = resolveSpanColor(span, colorByFieldName);
+	// Single theme-resolved color: bright base in dark mode, darkened variant in
+	// light mode so the dot stands out against the white panel.
+	const effectiveColor = isDarkMode ? color : colorDark;
 
 	// Smart highlighting logic
 	const {
@@ -317,7 +322,11 @@ const SpanOverview = memo(function SpanOverview({
 			{/* Colored service dot */}
 			<span
 				className={cx(styles.treeIcon, { [styles.hasError]: span.has_error })}
-				style={{ backgroundColor: color }}
+				style={
+					{
+						'--service-dot-color': effectiveColor,
+					} as React.CSSProperties
+				}
 			/>
 
 			{/* Span name + service name */}
@@ -391,9 +400,16 @@ export const SpanDuration = memo(function SpanDuration({
 	const width = (span.duration_nano * 1e2) / (spread * 1e6);
 
 	const colorByFieldName = useTraceStore((s) => s.colorByField.name);
-	const color = resolveSpanColor(span, colorByFieldName);
-	// `resolveSpanColor` returns a CSS variable for errors; `colorToRgb` can't parse it.
-	const rgbColor = span.has_error ? '239, 68, 68' : colorToRgb(color);
+	const isDarkMode = useIsDarkMode();
+	const { color, colorDark } = resolveSpanColor(span, colorByFieldName);
+	// Single theme-resolved color: bright base in dark mode, darkened variant in
+	// light mode (so the bar stands out against the white panel and hover/selected
+	// foregrounds stay legible). The bar's text flips dark↔white to suit the fill.
+	const effectiveColor = isDarkMode ? color : colorDark;
+	const rgbColor = colorToRgb(effectiveColor);
+	const spanTextColor = isDarkMode
+		? 'rgba(0, 0, 0, 0.7)'
+		: 'rgba(255, 255, 255, 0.95)';
 
 	const {
 		isSelected,
@@ -424,8 +440,9 @@ export const SpanDuration = memo(function SpanDuration({
 					{
 						left: `${leftOffset}%`,
 						width: `${width}%`,
-						'--span-color': color,
+						'--span-color': effectiveColor,
 						'--span-color-rgb': rgbColor,
+						'--span-text-color': spanTextColor,
 					} as React.CSSProperties
 				}
 			>
@@ -893,7 +910,7 @@ function Success(props: ISuccessProps): JSX.Element {
 					/>
 					{/* Left panel - table with horizontal scroll */}
 					<ResizableBox
-						direction="horizontal"
+						handle="right"
 						defaultWidth={DEFAULT_SIDEBAR_WIDTH}
 						minWidth={MIN_SIDEBAR_WIDTH}
 						maxWidth={MAX_SIDEBAR_WIDTH}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/__tests__/UnifiedSpanClick.test.tsx

@@ -103,6 +103,7 @@ jest.mock('components/TimelineV3/TimelineV3', () => {
 jest.mock('lib/uPlotLib/utils/generateColor', () => ({
 	generateColor: (): string => '#1890ff',
 	colorToRgb: (): string => '24, 144, 255',
+	hashFn: (): number => 0,
 }));
 
 jest.mock('container/TraceDetail/utils', () => ({

frontend/src/pages/TraceDetailsV3/index.tsx

@@ -242,9 +242,13 @@ function TraceDetailsV3(): JSX.Element {
 		() =>
 			(getLocalStorageKey(
 				LOCALSTORAGE.TRACE_DETAILS_SPAN_DETAILS_POSITION,
-			) as SpanDetailVariant) || SpanDetailVariant.DIALOG,
+			) as SpanDetailVariant) || SpanDetailVariant.DOCKED_RIGHT,
 	);
 
+	const RIGHT_DOCK_MIN = 480;
+	const RIGHT_DOCK_MAX = 720;
+	const [rightDockWidth, setRightDockWidth] = useState(RIGHT_DOCK_MIN);
+
 	const handleVariantChange = useCallback(
 		(newVariant: SpanDetailVariant): void => {
 			setLocalStorageKey(
@@ -291,7 +295,9 @@ function TraceDetailsV3(): JSX.Element {
 		(!!errorFetchingTraceData || !traceData?.payload?.spans?.length);
 
 	const isDocked = spanDetailVariant === SpanDetailVariant.DOCKED;
+	const isRightDocked = spanDetailVariant === SpanDetailVariant.DOCKED_RIGHT;
 	const isWaterfallDocked = panelState.isOpen && isDocked;
+	const showRightDock = panelState.isOpen && isRightDocked;
 
 	const waterfallChildren = (
 		<ResizableBox
@@ -332,94 +338,118 @@ function TraceDetailsV3(): JSX.Element {
 					<NoData />
 				) : (
 					<>
-						<div className={styles.content}>
-							<Collapse
-								// @ts-expect-error motion is passed through to rc-collapse to disable animation
-								motion={false}
-								activeKey={activeKeys.filter((k) => k === 'flame')}
-								onChange={(): void => handleCollapseChange('flame')}
-								size="small"
-								className={styles.flameCollapse}
-								items={[
-									{
-										key: 'flame',
-										label: (
-											<div className={styles.collapseLabel}>
-												<span className={styles.collapseTitle}>
-													Flame Graph
-													{traceData?.payload?.totalSpansCount &&
-														traceData.payload.totalSpansCount > FLAMEGRAPH_SPAN_LIMIT && (
-															<WarningPopover
-																message="The total span count exceeds the visualization limit. Displaying a sampled subset of spans in flamegraph."
-																placement="bottomLeft"
-															/>
-														)}
-												</span>
-												{traceData?.payload?.totalSpansCount ? (
-													<span className={styles.collapseCount}>
-														<span className={styles.collapseCountItem}>
-															<ChartNoAxesGantt size={13} />
-															Spans: {traceData.payload.totalSpansCount}
-														</span>
-														<span
-															className={cx(styles.collapseCountItem, {
-																[styles.hasErrors]: traceData.payload.totalErrorSpansCount > 0,
-															})}
-														>
-															<TriangleAlert size={13} />
-															Errors: {traceData.payload.totalErrorSpansCount ?? 0}
-														</span>
+						<div className={styles.layoutRow}>
+							<div className={styles.content}>
+								<Collapse
+									// @ts-expect-error motion is passed through to rc-collapse to disable animation
+									motion={false}
+									activeKey={activeKeys.filter((k) => k === 'flame')}
+									onChange={(): void => handleCollapseChange('flame')}
+									size="small"
+									className={styles.flameCollapse}
+									items={[
+										{
+											key: 'flame',
+											label: (
+												<div className={styles.collapseLabel}>
+													<span className={styles.collapseTitle}>
+														Flame Graph
+														{traceData?.payload?.totalSpansCount &&
+															traceData.payload.totalSpansCount > FLAMEGRAPH_SPAN_LIMIT && (
+																<WarningPopover
+																	message="The total span count exceeds the visualization limit. Displaying a sampled subset of spans in flamegraph."
+																	placement="bottomLeft"
+																/>
+															)}
 													</span>
-												) : null}
-											</div>
-										),
-										children: (
-											<ResizableBox defaultHeight={300} minHeight={100} maxHeight={400}>
-												<TraceFlamegraph
-													filteredSpanIds={filteredSpanIds}
-													isFilterActive={isFilterActive}
-													selectedSpan={selectedSpan}
-													totalSpansCount={totalSpansCount}
-												/>
-											</ResizableBox>
-										),
-									},
-								]}
-							/>
+													{traceData?.payload?.totalSpansCount ? (
+														<span className={styles.collapseCount}>
+															<span className={styles.collapseCountItem}>
+																<ChartNoAxesGantt size={13} />
+																Spans: {traceData.payload.totalSpansCount}
+															</span>
+															<span
+																className={cx(styles.collapseCountItem, {
+																	[styles.hasErrors]: traceData.payload.totalErrorSpansCount > 0,
+																})}
+															>
+																<TriangleAlert size={13} />
+																Errors: {traceData.payload.totalErrorSpansCount ?? 0}
+															</span>
+														</span>
+													) : null}
+												</div>
+											),
+											children: (
+												<ResizableBox defaultHeight={300} minHeight={100} maxHeight={400}>
+													<TraceFlamegraph
+														filteredSpanIds={filteredSpanIds}
+														isFilterActive={isFilterActive}
+														selectedSpan={selectedSpan}
+														totalSpansCount={totalSpansCount}
+													/>
+												</ResizableBox>
+											),
+										},
+									]}
+								/>
 
-							<Collapse
-								// @ts-expect-error motion is passed through to rc-collapse to disable animation
-								motion={false}
-								activeKey={activeKeys.filter((k) => k === 'waterfall')}
-								onChange={(): void => handleCollapseChange('waterfall')}
-								size="small"
-								className={cx(styles.waterfallCollapse, {
-									[styles.isDocked]: isWaterfallDocked,
-								})}
-								items={[
-									{
-										key: 'waterfall',
-										label: 'Waterfall',
-										children: activeKeys.includes('waterfall') ? waterfallChildren : null,
-									},
-								]}
-							/>
+								<Collapse
+									// @ts-expect-error motion is passed through to rc-collapse to disable animation
+									motion={false}
+									activeKey={activeKeys.filter((k) => k === 'waterfall')}
+									onChange={(): void => handleCollapseChange('waterfall')}
+									size="small"
+									className={cx(styles.waterfallCollapse, {
+										[styles.isDocked]: isWaterfallDocked,
+									})}
+									items={[
+										{
+											key: 'waterfall',
+											label: 'Waterfall',
+											children: activeKeys.includes('waterfall')
+												? waterfallChildren
+												: null,
+										},
+									]}
+								/>
 
-							{panelState.isOpen && isDocked && (
-								<div className={styles.dockedSpanDetails}>
+								{panelState.isOpen && isDocked && (
+									<div className={styles.dockedSpanDetails}>
+										<SpanDetailsPanel
+											panelState={panelState}
+											selectedSpan={selectedSpan}
+											variant={SpanDetailVariant.DOCKED}
+											onVariantChange={handleVariantChange}
+											traceStartTime={traceData?.payload?.startTimestampMillis}
+											traceEndTime={traceData?.payload?.endTimestampMillis}
+										/>
+									</div>
+								)}
+							</div>
+
+							{showRightDock && (
+								<ResizableBox
+									handle="left"
+									defaultWidth={rightDockWidth}
+									minWidth={RIGHT_DOCK_MIN}
+									maxWidth={RIGHT_DOCK_MAX}
+									onResize={setRightDockWidth}
+									className={styles.rightDock}
+								>
 									<SpanDetailsPanel
 										panelState={panelState}
 										selectedSpan={selectedSpan}
-										variant={SpanDetailVariant.DOCKED}
+										variant={SpanDetailVariant.DOCKED_RIGHT}
 										onVariantChange={handleVariantChange}
 										traceStartTime={traceData?.payload?.startTimestampMillis}
 										traceEndTime={traceData?.payload?.endTimestampMillis}
 									/>
-								</div>
+								</ResizableBox>
 							)}
 						</div>
 
-						{panelState.isOpen && !isDocked && (
+						{panelState.isOpen && spanDetailVariant === SpanDetailVariant.DIALOG && (
 							<SpanDetailsPanel
 								panelState={panelState}
 								selectedSpan={selectedSpan}

frontend/src/pages/TraceDetailsV3/utils.ts

@@ -1,7 +1,11 @@
-import { themeColors } from 'constants/theme';
-import { generateColor } from 'lib/uPlotLib/utils/generateColor';
 import { SpanV3 } from 'types/api/trace/getTraceV3';
 
+import {
+	ColorPair,
+	generateColorPair,
+	RESERVED_ERROR,
+} from './utils/generateColorPair';
+
 /**
  * Look up an attribute from both `resource` and `attributes` on a span.
  * Resources are checked first (service.name, k8s.* etc. live there).
@@ -92,18 +96,16 @@ export function getSpanGroupValue(
 
 /**
  * Resolves the rendering colour for a span. Error spans always get the
- * semantic destructive colour; everything else is derived deterministically
- * from its group value via `generateColor`.
+ * reserved error colour; everything else is derived deterministically from its
+ * group value via `generateColorPair`. Returns both the base color and a
+ * darkened variant for light-mode hover/selected foregrounds.
  */
 export function resolveSpanColor(
 	span: SpanV3,
 	colorByFieldName: string,
-): string {
+): ColorPair {
 	if (span.has_error) {
-		return 'var(--destructive)';
+		return { color: RESERVED_ERROR, colorDark: RESERVED_ERROR };
 	}
-	return generateColor(
-		getSpanGroupValue(span, colorByFieldName),
-		themeColors.traceDetailColorsV3,
-	);
+	return generateColorPair(getSpanGroupValue(span, colorByFieldName));
 }

frontend/src/pages/TraceDetailsV3/utils/__tests__/generateColorPair.test.ts

@@ -0,0 +1,126 @@
+import {
+	darkenHex,
+	generateColorPair,
+	PALETTE_V3,
+	RESERVED_ERROR,
+	RESERVED_OK,
+	RESERVED_WARNING,
+} from '../generateColorPair';
+
+describe('generateColorPair', () => {
+	it('is deterministic: same name returns the same pair across calls', () => {
+		const a = generateColorPair('payment-service');
+		const b = generateColorPair('payment-service');
+		expect(a).toBe(b); // cache hit returns the same reference
+		expect(a.color).toBe(b.color);
+		expect(a.colorDark).toBe(b.colorDark);
+	});
+
+	it('returns a palette color for a normal name', () => {
+		const { color } = generateColorPair('any-service');
+		expect(PALETTE_V3).toContain(color);
+	});
+
+	it('colorDark differs from color (darker variant computed via darkenHex)', () => {
+		const { color, colorDark } = generateColorPair('checkout-svc');
+		expect(colorDark).not.toBe(color);
+		expect(colorDark).toMatch(/^#[0-9a-f]{6}$/i);
+	});
+
+	it('produces different colors for different names (palette wraps modulo length)', () => {
+		const a = generateColorPair('aaa');
+		const b = generateColorPair('bbb');
+		// Not strictly guaranteed (hash collisions exist with 28 buckets), but
+		// for these two short strings djb2 produces different bucket indices.
+		expect(a.color).not.toBe(b.color);
+	});
+});
+
+describe('darkenHex', () => {
+	it('returns a darker hex than the input for amount > 0', () => {
+		const input = '#4D6BD8';
+		const out = darkenHex(input, 0.22);
+		expect(out).toMatch(/^#[0-9a-f]{6}$/i);
+		expect(out).not.toBe(input);
+	});
+
+	it('handles amount = 0 as a near-identity', () => {
+		const out = darkenHex('#4D6BD8', 0);
+		// HSL round-trip may shift a digit; only assert format.
+		expect(out).toMatch(/^#[0-9a-f]{6}$/i);
+	});
+});
+
+describe('reserved status colors', () => {
+	it('matches spec section 8 hexes', () => {
+		expect(RESERVED_ERROR).toBe('#FC4E4E');
+		expect(RESERVED_WARNING).toBe('#fbbf24');
+		expect(RESERVED_OK).toBe('#4ade80');
+	});
+});
+
+// Visual inspection table: each palette color paired with its darkenHex(0.22)
+// variant. Confirms the darkening produces a distinct, non-collapsed hex per
+// entry. Run with `yarn jest generateColorPair --verbose` to see the table.
+describe('PALETTE_V3 darken-pair table', () => {
+	const PALETTE_NAMES = [
+		'Slate blue',
+		'Sage',
+		'Amber',
+		'Dusty pink',
+		'Lavender',
+		'Peach',
+		'Sky teal',
+		'Sakura',
+		'Terracotta',
+		'Forest',
+		'Cornflower',
+		'Iris',
+		'Olive gold',
+		'Mint',
+		'Mauve',
+		'Dusty teal',
+		'Burnt orange',
+		'Pistachio',
+		'Periwinkle',
+		'Coral blush',
+		'Sienna',
+		'Robin',
+		'Sandy gold',
+		'Powder blue',
+		'Umber',
+		'Aqua',
+		'Warm tan',
+		'Antique rose',
+	];
+
+	it.each(
+		PALETTE_V3.map((hex, i) => [PALETTE_NAMES[i] ?? `idx-${i}`, hex] as const),
+	)('%s (%s) darkens to a distinct hex', (name, hex) => {
+		const dark = darkenHex(hex, 0.22);
+		expect(dark).toMatch(/^#[0-9a-f]{6}$/i);
+		expect(dark.toLowerCase()).not.toBe(hex.toLowerCase());
+	});
+
+	it('all 28 darkened variants are unique (no collisions)', () => {
+		const darks = PALETTE_V3.map((hex) => darkenHex(hex, 0.22).toLowerCase());
+		const unique = new Set(darks);
+		expect(unique.size).toBe(PALETTE_V3.length);
+	});
+
+	it('prints the base→dark table for visual inspection', () => {
+		// eslint-disable-next-line no-console
+		console.log('\nPALETTE_V3 base → darkenHex(0.22) pairs:');
+		// eslint-disable-next-line no-console
+		console.log('idx  name          base     dark');
+		PALETTE_V3.forEach((hex, i) => {
+			const dark = darkenHex(hex, 0.22);
+			const name = (PALETTE_NAMES[i] ?? '').padEnd(13);
+			const idx = String(i).padStart(2, ' ');
+			// eslint-disable-next-line no-console
+			console.log(`${idx}   ${name} ${hex}  ${dark}`);
+		});
+		// Sentinel assertion so the test is not flagged as having none.
+		expect(PALETTE_V3).toHaveLength(28);
+	});
+});

frontend/src/pages/TraceDetailsV3/utils/generateColorPair.ts

@@ -0,0 +1,111 @@
+// Source-of-truth doc: ./COLOR_PALETTE.md
+//
+// Color system for TraceDetailsV3 (waterfall + flamegraph). Returns a base
+// color (deterministic per group name) plus a darkened variant used as the
+// light-mode foreground / fill. Reuses the shared djb2 `hashFn`.
+
+import { hashFn } from 'lib/uPlotLib/utils/generateColor';
+
+// 28 colors from the doc's "Updated Colour Palette" (Section 1), in doc order.
+// Hash output `% PALETTE.length` adjusts automatically if entries are added.
+export const PALETTE_V3: readonly string[] = [
+	'#4D6BD8', // Slate blue
+	'#84B270', // Sage
+	'#EB9E40', // Amber
+	'#D58998', // Dusty pink
+	'#8278D5', // Lavender
+	'#E69C6F', // Peach
+	'#3CB4DA', // Sky teal
+	'#F24769', // Sakura
+	'#D4694A', // Terracotta
+	'#25E192', // Forest
+	'#5BA2D6', // Cornflower
+	'#9D57D0', // Iris
+	'#D4B638', // Olive gold
+	'#6CC4A4', // Mint
+	'#D188CB', // Mauve
+	'#2FB59B', // Dusty teal
+	'#E68340', // Burnt orange
+	'#B8C474', // Pistachio
+	'#3C84E5', // Periwinkle
+	'#E29F8E', // Coral blush
+	'#C56330', // Sienna
+	'#4E74F8', // Robin
+	'#E8B752', // Sandy gold
+	'#8DBEDF', // Powder blue
+	'#8B7544', // Umber
+	'#23C4F8', // Aqua
+	'#CB874A', // Warm tan
+	'#C886A9', // Antique rose
+];
+
+// Reserved status colors per spec section 8. Error is wired today;
+// warning + OK are exported for future use (no render path consumes them yet).
+export const RESERVED_ERROR = '#FC4E4E';
+export const RESERVED_WARNING = '#fbbf24';
+export const RESERVED_OK = '#4ade80';
+
+function hexToHsl(hex: string): [number, number, number] {
+	const n = parseInt(hex.slice(1), 16);
+	const r = ((n >> 16) & 255) / 255;
+	const g = ((n >> 8) & 255) / 255;
+	const b = (n & 255) / 255;
+	const mx = Math.max(r, g, b);
+	const mn = Math.min(r, g, b);
+	const d = mx - mn;
+	const l = (mx + mn) / 2;
+	const s = d === 0 ? 0 : d / (1 - Math.abs(2 * l - 1));
+	let h: number;
+	if (d === 0) {
+		h = 0;
+	} else if (mx === r) {
+		h = 60 * (((g - b) / d) % 6);
+	} else if (mx === g) {
+		h = 60 * ((b - r) / d + 2);
+	} else {
+		h = 60 * ((r - g) / d + 4);
+	}
+	return [(h + 360) % 360, s * 100, l * 100];
+}
+
+function hslToHex(h: number, s: number, l: number): string {
+	const S = s / 100;
+	const L = l / 100;
+	const k = (n: number): number => (n + h / 30) % 12;
+	const a = S * Math.min(L, 1 - L);
+	const f = (n: number): number =>
+		Math.round(
+			255 * (L - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)))),
+		);
+	return `#${[f(0), f(8), f(4)]
+		.map((v) => v.toString(16).padStart(2, '0'))
+		.join('')}`;
+}
+
+export function darkenHex(hex: string, amount: number): string {
+	const [h, s, l] = hexToHsl(hex);
+	return hslToHex(h, s, Math.max(0, l * (1 - amount)));
+}
+
+export interface ColorPair {
+	color: string;
+	colorDark: string;
+}
+
+// Distinct-name cardinality is bounded by deployment service count (~10s, not 1000s),
+// so unbounded growth is not a concern.
+const cache = new Map<string, ColorPair>();
+
+export function generateColorPair(name: string): ColorPair {
+	const hit = cache.get(name);
+	if (hit) {
+		return hit;
+	}
+	const base = PALETTE_V3[hashFn(name) % PALETTE_V3.length];
+	const result: ColorPair = {
+		color: base,
+		colorDark: darkenHex(base, 0.22),
+	};
+	cache.set(name, result);
+	return result;
+}

frontend/src/periscope/components/ResizableBox/ResizableBox.styles.scss

@@ -23,20 +23,36 @@
 			background: var(--primary);
 		}
 
-		&--vertical {
-			bottom: 0;
+		&--top,
+		&--bottom {
 			left: 0;
 			right: 0;
 			height: 1px;
 			cursor: row-resize;
 		}
 
-		&--horizontal {
-			right: 0;
+		&--left,
+		&--right {
 			top: 0;
 			bottom: 0;
 			width: 1px;
 			cursor: col-resize;
 		}
+
+		&--top {
+			top: 0;
+		}
+
+		&--bottom {
+			bottom: 0;
+		}
+
+		&--left {
+			left: 0;
+		}
+
+		&--right {
+			right: 0;
+		}
 	}
 }

frontend/src/periscope/components/ResizableBox/ResizableBox.tsx

@@ -2,9 +2,15 @@ import { useCallback, useRef, useState } from 'react';
 
 import './ResizableBox.styles.scss';
 
+export type ResizableBoxHandle = 'top' | 'right' | 'bottom' | 'left';
+
 export interface ResizableBoxProps {
 	children: React.ReactNode;
-	direction?: 'vertical' | 'horizontal';
+	// Which edge the resize handle sits on. The edge determines the axis:
+	// 'top'/'bottom' → vertical resize (height), 'left'/'right' → horizontal
+	// resize (width). Dragging the handle away from the content grows the box;
+	// dragging it toward the content shrinks it.
+	handle?: ResizableBoxHandle;
 	defaultHeight?: number;
 	minHeight?: number;
 	maxHeight?: number;
@@ -18,7 +24,7 @@ export interface ResizableBoxProps {
 
 function ResizableBox({
 	children,
-	direction = 'vertical',
+	handle = 'bottom',
 	defaultHeight = 200,
 	minHeight = 50,
 	maxHeight = Infinity,
@@ -29,7 +35,8 @@ function ResizableBox({
 	disabled = false,
 	className,
 }: ResizableBoxProps): JSX.Element {
-	const isHorizontal = direction === 'horizontal';
+	const isHorizontal = handle === 'left' || handle === 'right';
+	const isStartHandle = handle === 'top' || handle === 'left';
 	const [size, setSize] = useState(isHorizontal ? defaultWidth : defaultHeight);
 	const containerRef = useRef<HTMLDivElement>(null);
 
@@ -40,10 +47,13 @@ function ResizableBox({
 			const startSize = size;
 			const min = isHorizontal ? minWidth : minHeight;
 			const max = isHorizontal ? maxWidth : maxHeight;
+			// Start-edge handle: pointer moving away from content (negative delta)
+			// grows the box, so invert the sign.
+			const deltaSign = isStartHandle ? -1 : 1;
 
 			const onMouseMove = (moveEvent: MouseEvent): void => {
 				const currentPos = isHorizontal ? moveEvent.clientX : moveEvent.clientY;
-				const delta = currentPos - startPos;
+				const delta = (currentPos - startPos) * deltaSign;
 				const newSize = Math.min(max, Math.max(min, startSize + delta));
 				setSize(newSize);
 				onResize?.(newSize);
@@ -61,7 +71,16 @@ function ResizableBox({
 			document.addEventListener('mousemove', onMouseMove);
 			document.addEventListener('mouseup', onMouseUp);
 		},
-		[size, isHorizontal, minWidth, maxWidth, minHeight, maxHeight, onResize],
+		[
+			size,
+			isHorizontal,
+			isStartHandle,
+			minWidth,
+			maxWidth,
+			minHeight,
+			maxHeight,
+			onResize,
+		],
 	);
 
 	const containerStyle = disabled
@@ -69,7 +88,7 @@ function ResizableBox({
 		: isHorizontal
 			? { width: size }
 			: { height: size };
-	const handleClass = `resizable-box__handle resizable-box__handle--${direction}`;
+	const handleClass = `resizable-box__handle resizable-box__handle--${handle}`;
 
 	return (
 		<div

frontend/src/typings/window.ts

@@ -1,5 +1,6 @@
 // eslint-disable-next-line no-restricted-imports
 import { compose, Store } from 'redux';
+import type { WebSettings } from 'types/generated/webSettings';
 
 declare global {
 	interface Window {
@@ -7,6 +8,7 @@ declare global {
 		pylon: any;
 		Appcues: Record<string, any>;
 		__REDUX_DEVTOOLS_EXTENSION_COMPOSE__: typeof compose;
+		signozBootData?: { settings: WebSettings | null };
 	}
 }
 

frontend/src/utils/__tests__/bootData.test.ts

@@ -0,0 +1,74 @@
+export {};
+
+type BootData = typeof import('../bootData');
+
+function loadModule(settings?: object | null): BootData {
+	(window as any).signozBootData =
+		settings !== undefined ? { settings } : undefined;
+	let mod!: BootData;
+	jest.isolateModules(() => {
+		// oxlint-disable-next-line typescript-eslint/no-require-imports, typescript-eslint/no-var-requires
+		mod = require('../bootData');
+	});
+	return mod;
+}
+
+afterEach(() => {
+	delete (window as any).signozBootData;
+});
+
+describe('when window.signozBootData is absent', () => {
+	it('defaults posthog and appcues to enabled', () => {
+		const { bootSettings } = loadModule();
+		expect(bootSettings.posthog.enabled).toBe(true);
+		expect(bootSettings.appcues.enabled).toBe(true);
+	});
+});
+
+describe('when window.signozBootData.settings is null (injection failed)', () => {
+	it('defaults posthog and appcues to enabled', () => {
+		const { bootSettings } = loadModule(null);
+		expect(bootSettings.posthog.enabled).toBe(true);
+		expect(bootSettings.appcues.enabled).toBe(true);
+	});
+});
+
+describe('when window.signozBootData.settings is populated', () => {
+	it('reads posthog enabled: true', () => {
+		const { bootSettings } = loadModule({ posthog: { enabled: true } });
+		expect(bootSettings.posthog.enabled).toBe(true);
+	});
+
+	it('reads posthog enabled: false', () => {
+		const { bootSettings } = loadModule({ posthog: { enabled: false } });
+		expect(bootSettings.posthog.enabled).toBe(false);
+	});
+
+	it('reads appcues enabled: true', () => {
+		const { bootSettings } = loadModule({ appcues: { enabled: true } });
+		expect(bootSettings.appcues.enabled).toBe(true);
+	});
+
+	it('reads appcues enabled: false', () => {
+		const { bootSettings } = loadModule({ appcues: { enabled: false } });
+		expect(bootSettings.appcues.enabled).toBe(false);
+	});
+
+	it('missing sub-namespace defaults to enabled', () => {
+		const { bootSettings } = loadModule({ posthog: { enabled: false } });
+		expect(bootSettings.appcues.enabled).toBe(true);
+	});
+});
+
+describe('when window.signozBootData exists but settings is undefined', () => {
+	it('defaults posthog and appcues to enabled', () => {
+		(window as any).signozBootData = {};
+		let mod!: BootData;
+		jest.isolateModules(() => {
+			// oxlint-disable-next-line typescript-eslint/no-require-imports, typescript-eslint/no-var-requires
+			mod = require('../bootData');
+		});
+		expect(mod.bootSettings.posthog.enabled).toBe(true);
+		expect(mod.bootSettings.appcues.enabled).toBe(true);
+	});
+});

frontend/src/utils/bootData.ts

@@ -0,0 +1,11 @@
+import type { WebSettings } from 'types/generated/webSettings';
+
+const raw = window.signozBootData?.settings as
+	| Partial<WebSettings>
+	| null
+	| undefined;
+
+export const bootSettings: Readonly<WebSettings> = {
+	posthog: { enabled: raw?.posthog?.enabled ?? true },
+	appcues: { enabled: raw?.appcues?.enabled ?? true },
+};

frontend/vite.config.ts

@@ -23,6 +23,20 @@ function devBasePathPlugin(basePath: string): Plugin {
 	};
 }
 
+function devBootDataPlugin(env: Record<string, string>): Plugin {
+	return {
+		name: 'dev-boot-data',
+		apply: 'serve',
+		transformIndexHtml(html): string {
+			const settings = {
+				posthog: { enabled: env.VITE_POSTHOG_ENABLED !== 'false' },
+				appcues: { enabled: env.VITE_APPCUES_ENABLED !== 'false' },
+			};
+			return html.replaceAll('[[.Settings]]', JSON.stringify(settings));
+		},
+	};
+}
+
 function rawMarkdownPlugin(): Plugin {
 	return {
 		name: 'raw-markdown',
@@ -47,6 +61,7 @@ export default defineConfig(({ mode }): UserConfig => {
 		tsconfigPaths(),
 		rawMarkdownPlugin(),
 		devBasePathPlugin(basePath),
+		devBootDataPlugin(env),
 		react(),
 		createHtmlPlugin({
 			inject: {

pkg/alertmanager/alertmanagernotify/email/email.go

@@ -23,7 +23,13 @@ import (
 	"sync"
 	"time"
 
+	htmltemplate "html/template"
+
+	"github.com/SigNoz/signoz/pkg/alertmanager/alertmanagertemplate"
 	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/templating/markdownrenderer"
+	"github.com/SigNoz/signoz/pkg/types/alertmanagertypes"
+	"github.com/SigNoz/signoz/pkg/types/ruletypes"
 	commoncfg "github.com/prometheus/common/config"
 
 	"github.com/prometheus/alertmanager/config"
@@ -34,20 +40,39 @@ import (
 
 const (
 	Integration = "email"
+
+	// alertEmailLayoutTemplate is the name of the HTML layout template that
+	// wraps the rendered alert bodies. It is loaded into the notification
+	// template (n.tmpl) from the alertmanager templates config and lives at
+	// templates/alertmanager/email.gotmpl.
+	alertEmailLayoutTemplate = "email.signoz.html"
 )
 
 // Email implements a Notifier for email notifications.
 type Email struct {
-	conf     *config.EmailConfig
-	tmpl     *template.Template
-	logger   *slog.Logger
-	hostname string
+	conf      *config.EmailConfig
+	tmpl      *template.Template
+	logger    *slog.Logger
+	hostname  string
+	templater alertmanagertypes.Templater
+}
+
+// layoutData is the value passed to the email.signoz.html layout
+// template. It embeds NotificationTemplateData so templates can reference
+// `.Alert.Status`, `.Alert.TotalFiring`, `.Alert.TotalResolved`,
+// `.NotificationTemplateData.ExternalURL`, etc. alongside the rendered
+// Title and per-alert Bodies.
+type layoutData struct {
+	alertmanagertypes.NotificationTemplateData
+	Title  string
+	Bodies []htmltemplate.HTML
 }
 
 var errNoAuthUsernameConfigured = errors.NewInternalf(errors.CodeInternal, "no auth username configured")
 
-// New returns a new Email notifier.
-func New(c *config.EmailConfig, t *template.Template, l *slog.Logger) *Email {
+// New returns a new Email notifier. When the email.signoz.html layout is
+// not defined in t, custom-body alerts fall back to plain <div>-wrapped HTML.
+func New(c *config.EmailConfig, t *template.Template, l *slog.Logger, templater alertmanagertypes.Templater) *Email {
 	if _, ok := c.Headers["Subject"]; !ok {
 		c.Headers["Subject"] = config.DefaultEmailSubject
 	}
@@ -63,7 +88,7 @@ func New(c *config.EmailConfig, t *template.Template, l *slog.Logger) *Email {
 	if err != nil {
 		h = "localhost.localdomain"
 	}
-	return &Email{conf: c, tmpl: t, logger: l, hostname: h}
+	return &Email{conf: c, tmpl: t, logger: l, hostname: h, templater: templater}
 }
 
 // auth resolves a string of authentication mechanisms.
@@ -199,9 +224,9 @@ func (n *Email) Notify(ctx context.Context, as ...*types.Alert) (bool, error) {
 
 	if ok, mech := c.Extension("AUTH"); ok {
 		auth, err := n.auth(mech)
-		if err != nil && err != errNoAuthUsernameConfigured {
+		if err != nil && !errors.Is(err, errNoAuthUsernameConfigured) {
 			return true, errors.WrapInternalf(err, errors.CodeInternal, "find auth mechanism")
-		} else if err == errNoAuthUsernameConfigured {
+		} else if errors.Is(err, errNoAuthUsernameConfigured) {
 			n.logger.DebugContext(ctx, "no auth username configured. Attempting to send email without authenticating")
 		}
 		if auth != nil {
@@ -245,6 +270,16 @@ func (n *Email) Notify(ctx context.Context, as ...*types.Alert) (bool, error) {
 		}
 	}
 
+	// Prepare the content for the email. subject, when non-empty, overrides
+	// the configured Subject header for this notification only. We deliberately
+	// do not mutate n.conf.Headers here: the config map is shared across
+	// concurrent notifications to the same receiver.
+	subject, htmlBody, err := n.prepareContent(ctx, as)
+	if err != nil {
+		n.logger.ErrorContext(ctx, "failed to prepare notification content", errors.Attr(err))
+		return false, err
+	}
+
 	// Send the email headers and body.
 	message, err := c.Data()
 	if err != nil {
@@ -262,6 +297,10 @@ func (n *Email) Notify(ctx context.Context, as ...*types.Alert) (bool, error) {
 
 	buffer := &bytes.Buffer{}
 	for header, t := range n.conf.Headers {
+		if header == "Subject" {
+			fmt.Fprintf(buffer, "%s: %s\r\n", header, mime.QEncoding.Encode("utf-8", subject))
+			continue
+		}
 		value, err := n.tmpl.ExecuteTextString(t, data)
 		if err != nil {
 			return false, errors.WrapInternalf(err, errors.CodeInternal, "execute %q header template", header)
@@ -336,7 +375,7 @@ func (n *Email) Notify(ctx context.Context, as ...*types.Alert) (bool, error) {
 		}
 	}
 
-	if len(n.conf.HTML) > 0 {
+	if htmlBody != "" {
 		// Html template
 		// Preferred alternative placed last per section 5.1.4 of RFC 2046
 		// https://www.ietf.org/rfc/rfc2046.txt
@@ -347,12 +386,8 @@ func (n *Email) Notify(ctx context.Context, as ...*types.Alert) (bool, error) {
 		if err != nil {
 			return false, errors.WrapInternalf(err, errors.CodeInternal, "create part for html template")
 		}
-		body, err := n.tmpl.ExecuteHTMLString(n.conf.HTML, data)
-		if err != nil {
-			return false, errors.WrapInternalf(err, errors.CodeInternal, "execute html template")
-		}
 		qw := quotedprintable.NewWriter(w)
-		_, err = qw.Write([]byte(body))
+		_, err = qw.Write([]byte(htmlBody))
 		if err != nil {
 			return true, errors.WrapInternalf(err, errors.CodeInternal, "write HTML part")
 		}
@@ -381,6 +416,124 @@ func (n *Email) Notify(ctx context.Context, as ...*types.Alert) (bool, error) {
 	return false, nil
 }
 
+// prepareContent returns a subject override (empty when the default config
+// Subject should be used) and the HTML body for the email. Callers must treat
+// the subject as local state and never write it back to n.conf.Headers.
+func (n *Email) prepareContent(ctx context.Context, alerts []*types.Alert) (string, string, error) {
+	customTitle, customBody := alertmanagertemplate.ExtractTemplatesFromAnnotations(alerts)
+	result, err := n.templater.Expand(ctx, alertmanagertypes.ExpandRequest{
+		TitleTemplate:        customTitle,
+		BodyTemplate:         customBody,
+		DefaultTitleTemplate: n.conf.Headers["Subject"],
+		DefaultBodyTemplate:  n.conf.HTML,
+	}, alerts)
+	if err != nil {
+		return "", "", err
+	}
+
+	subject := result.Title
+
+	if !result.IsDefaultBody {
+		// Custom-body path: render each expanded markdown body to HTML, then
+		// wrap the whole thing in the email.signoz.html layout (or fall
+		// back to plain <div> wrapping when the layout template is not loaded).
+		for i, body := range result.Body {
+			if body == "" {
+				continue
+			}
+			rendered, err := markdownrenderer.RenderHTML(body)
+			if err != nil {
+				return "", "", err
+			}
+			result.Body[i] = rendered
+		}
+		appendRelatedLinkButtons(alerts, result.Body)
+		html, err := n.renderLayout(result)
+		if err != nil {
+			n.logger.WarnContext(ctx, "custom email template rendering failed, falling back to plain <div> wrap", errors.Attr(err))
+			return subject, wrapBodiesAsDivs(result.Body), nil
+		}
+		return subject, html, nil
+	}
+
+	return subject, result.Body[0], nil
+}
+
+// renderLayout wraps result in the email.signoz.html HTML layout loaded
+// into n.tmpl from the alertmanager templates config. Returns an error when the
+// layout template is not defined (e.g. in tests where no templates are loaded)
+// so prepareContent can fall back to plain <div> wrapping.
+func (n *Email) renderLayout(result *alertmanagertypes.ExpandResult) (string, error) {
+	bodies := make([]htmltemplate.HTML, 0, len(result.Body))
+	for _, b := range result.Body {
+		bodies = append(bodies, htmltemplate.HTML(b))
+	}
+	data := layoutData{Title: result.Title, Bodies: bodies}
+	if result.NotificationData != nil {
+		data.NotificationTemplateData = *result.NotificationData
+	}
+	html, err := n.tmpl.ExecuteHTMLString(`{{ template "`+alertEmailLayoutTemplate+`" . }}`, data)
+	if err != nil {
+		return "", errors.WrapInternalf(err, errors.CodeInternal, "failed to render email layout")
+	}
+	return html, nil
+}
+
+// appendRelatedLinkButtons appends "View Related Logs/Traces" buttons to each
+// per-alert body when the rule manager attached the corresponding annotation.
+// bodies is positionally aligned with alerts (see alertmanagertemplate.Prepare);
+// empty bodies are skipped so we never attach a button to an alert that produced
+// no visible content.
+func appendRelatedLinkButtons(alerts []*types.Alert, bodies []string) {
+	for i := range bodies {
+		if i >= len(alerts) || bodies[i] == "" {
+			continue
+		}
+		if link := alerts[i].Annotations[ruletypes.AnnotationRelatedLogs]; link != "" {
+			bodies[i] += htmlButton("View Related Logs", string(link))
+		}
+		if link := alerts[i].Annotations[ruletypes.AnnotationRelatedTraces]; link != "" {
+			bodies[i] += htmlButton("View Related Traces", string(link))
+		}
+	}
+}
+
+func wrapBodiesAsDivs(bodies []string) string {
+	var b strings.Builder
+	for _, part := range bodies {
+		if part == "" {
+			continue
+		}
+		b.WriteString("<div>")
+		b.WriteString(part)
+		b.WriteString("</div>")
+	}
+	return b.String()
+}
+
+func htmlButton(text, url string) string {
+	return fmt.Sprintf(`
+	<a href="%s" target="_blank" style="text-decoration: none;">
+<button style="
+    padding: 6px 16px;
+    /* Default System Font */
+    font-family: sans-serif;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.5;
+    /* Light Theme & Dynamic Background (Solid) */
+    color: #111827;
+    background-color: #f9fafb;
+    /* Static Outline */
+    border: 1px solid #d1d5db;
+    border-radius: 4px;
+    cursor: pointer;
+">
+  %s
+</button>
+</a>`, url, text)
+}
+
 type loginAuth struct {
 	username, password string
 }

pkg/alertmanager/alertmanagernotify/email/email_test.go

@@ -8,6 +8,7 @@ import (
 	"context"
 	"fmt"
 	"io"
+	"log/slog"
 	"net"
 	"net/http"
 	"net/url"
@@ -17,7 +18,10 @@ import (
 	"testing"
 	"time"
 
+	"github.com/SigNoz/signoz/pkg/alertmanager/alertmanagertemplate"
 	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/types/alertmanagertypes"
+	"github.com/SigNoz/signoz/pkg/types/ruletypes"
 	"github.com/emersion/go-smtp"
 	commoncfg "github.com/prometheus/common/config"
 	"github.com/prometheus/common/model"
@@ -42,6 +46,11 @@ const (
 	emailFrom = "alertmanager@example.com"
 )
 
+// testTemplater returns a Templater bound to tmpl with a discard logger.
+func testTemplater(tmpl *template.Template) alertmanagertypes.Templater {
+	return alertmanagertemplate.New(tmpl, slog.New(slog.DiscardHandler))
+}
+
 // email represents an email returned by the MailDev REST API.
 // See https://github.com/djfarrelly/MailDev/blob/master/docs/rest.md.
 type email struct {
@@ -162,7 +171,7 @@ func notifyEmailWithContext(ctx context.Context, t *testing.T, cfg *config.Email
 		return nil, false, err
 	}
 
-	email := New(cfg, tmpl, promslog.NewNopLogger())
+	email := New(cfg, tmpl, promslog.NewNopLogger(), testTemplater(tmpl))
 
 	retry, err := email.Notify(ctx, firingAlert)
 	if err != nil {
@@ -706,7 +715,7 @@ func TestEmailRejected(t *testing.T) {
 	tmpl, firingAlert, err := prepare(cfg)
 	require.NoError(t, err)
 
-	e := New(cfg, tmpl, promslog.NewNopLogger())
+	e := New(cfg, tmpl, promslog.NewNopLogger(), testTemplater(tmpl))
 
 	// Send the alert to mock SMTP server.
 	retry, err := e.Notify(context.Background(), firingAlert)
@@ -1030,6 +1039,135 @@ func TestEmailImplicitTLS(t *testing.T) {
 	}
 }
 
+func TestPrepareContent(t *testing.T) {
+	t.Run("default title template; custom body template", func(t *testing.T) {
+		tmpl, err := template.FromGlobs([]string{})
+		require.NoError(t, err)
+		tmpl.ExternalURL, _ = url.Parse("http://am")
+
+		bodyTpl := "line $labels.instance"
+		a1 := &types.Alert{
+			Alert: model.Alert{
+				Labels: model.LabelSet{
+					model.LabelName("instance"): model.LabelValue("one"),
+				},
+				Annotations: model.LabelSet{
+					model.LabelName(ruletypes.AnnotationBodyTemplate): model.LabelValue(bodyTpl),
+				},
+			},
+		}
+		a2 := &types.Alert{
+			Alert: model.Alert{
+				Labels: model.LabelSet{
+					model.LabelName("instance"): model.LabelValue("two"),
+				},
+				Annotations: model.LabelSet{
+					model.LabelName(ruletypes.AnnotationBodyTemplate): model.LabelValue(bodyTpl),
+				},
+			},
+		}
+		alerts := []*types.Alert{a1, a2}
+
+		cfg := &config.EmailConfig{Headers: map[string]string{"Subject": "subj"}}
+		n := New(cfg, tmpl, promslog.NewNopLogger(), testTemplater(tmpl))
+
+		ctx := context.Background()
+		subject, htmlBody, err := n.prepareContent(ctx, alerts)
+		require.NoError(t, err)
+		require.Equal(t, "subj", subject)
+		require.Equal(t, "<div><p>line one</p>\n</div><div><p>line two</p>\n</div>", htmlBody)
+	})
+
+	t.Run("custom title template; default body HTML template", func(t *testing.T) {
+		tmpl, err := template.FromGlobs([]string{})
+		require.NoError(t, err)
+		tmpl.ExternalURL, _ = url.Parse("http://am")
+
+		firingAlert := &types.Alert{
+			Alert: model.Alert{
+				Labels: model.LabelSet{},
+				Annotations: model.LabelSet{
+					model.LabelName(ruletypes.AnnotationTitleTemplate): model.LabelValue("fixed from $alert.status"),
+				},
+				StartsAt: time.Now(),
+				EndsAt:   time.Now().Add(time.Hour),
+			},
+		}
+		alerts := []*types.Alert{firingAlert}
+		cfg := &config.EmailConfig{
+			Headers: map[string]string{},
+			HTML:    "Status: {{ .Status }}",
+		}
+		n := New(cfg, tmpl, promslog.NewNopLogger(), testTemplater(tmpl))
+
+		ctx := context.Background()
+		subject, htmlBody, err := n.prepareContent(ctx, alerts)
+		require.NoError(t, err)
+		require.Equal(t, "Status: firing", htmlBody)
+		require.Equal(t, "fixed from firing", subject)
+	})
+
+	t.Run("default template without HTML", func(t *testing.T) {
+		cfg := &config.EmailConfig{Headers: map[string]string{"Subject": "the email subject"}}
+		tmpl, err := template.FromGlobs([]string{})
+		require.NoError(t, err)
+		tmpl.ExternalURL, _ = url.Parse("http://am")
+		n := New(cfg, tmpl, promslog.NewNopLogger(), testTemplater(tmpl))
+
+		firingAlert := &types.Alert{
+			Alert: model.Alert{
+				Labels:   model.LabelSet{},
+				StartsAt: time.Now(),
+				EndsAt:   time.Now().Add(time.Hour),
+			},
+		}
+		alerts := []*types.Alert{firingAlert}
+		ctx := context.Background()
+		subject, htmlBody, err := n.prepareContent(ctx, alerts)
+		require.NoError(t, err)
+		require.Equal(t, "", htmlBody)
+		require.Equal(t, "the email subject", subject)
+	})
+
+	t.Run("custom title template; custom body template", func(t *testing.T) {
+		// Load the email.signoz.html layout into the notification template
+		// the same way the alertmanager server does via the templates config.
+		tmpl, err := template.FromGlobs([]string{"../../../../templates/alertmanager/*.gotmpl"})
+		require.NoError(t, err)
+		tmpl.ExternalURL, _ = url.Parse("http://am")
+
+		firingAlert := &types.Alert{
+			Alert: model.Alert{
+				Labels: model.LabelSet{
+					model.LabelName("instance"): model.LabelValue("two"),
+				},
+				Annotations: model.LabelSet{
+					model.LabelName(ruletypes.AnnotationTitleTemplate): model.LabelValue("fixed from $alert.status"),
+					model.LabelName(ruletypes.AnnotationBodyTemplate):  model.LabelValue("line $labels.instance"),
+				},
+				StartsAt: time.Now(),
+				EndsAt:   time.Now().Add(time.Hour),
+			},
+		}
+		alerts := []*types.Alert{firingAlert}
+		cfg := &config.EmailConfig{
+			Headers: map[string]string{"Subject": "subject"},
+			HTML:    "Well, what are you?",
+		}
+
+		n := New(cfg, tmpl, promslog.NewNopLogger(), testTemplater(tmpl))
+
+		ctx := context.Background()
+		subject, htmlBody, err := n.prepareContent(ctx, alerts)
+		require.NoError(t, err)
+		require.Contains(t, htmlBody, "<!DOCTYPE html>")
+		require.Contains(t, htmlBody, "<p>line two</p>")
+		require.NotContains(t, htmlBody, "Well, what are you?")
+		require.Equal(t, subject, "fixed from firing")
+		require.NotContains(t, subject, "subject")
+	})
+}
+
 func ptrTo(b bool) *bool {
 	return &b
 }

pkg/alertmanager/alertmanagernotify/msteamsv2/msteamsv2.go

@@ -15,7 +15,9 @@ import (
 	"slices"
 	"strings"
 
+	"github.com/SigNoz/signoz/pkg/alertmanager/alertmanagertemplate"
 	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/types/alertmanagertypes"
 	commoncfg "github.com/prometheus/common/config"
 	"github.com/prometheus/common/model"
 
@@ -44,6 +46,7 @@ type Notifier struct {
 	retrier      *notify.Retrier
 	webhookURL   *config.SecretURL
 	postJSONFunc func(ctx context.Context, client *http.Client, url string, body io.Reader) (*http.Response, error)
+	templater    alertmanagertypes.Templater
 }
 
 // https://learn.microsoft.com/en-us/connectors/teams/?tabs=text1#adaptivecarditemschema
@@ -52,7 +55,7 @@ type Content struct {
 	Type    string   `json:"type"`
 	Version string   `json:"version"`
 	Body    []Body   `json:"body"`
-	Msteams Msteams  `json:"msteams,omitempty"`
+	Msteams Msteams  `json:"msteams,omitzero"`
 	Actions []Action `json:"actions"`
 }
 
@@ -94,7 +97,7 @@ type teamsMessage struct {
 }
 
 // New returns a new notifier that uses the Microsoft Teams Power Platform connector.
-func New(c *config.MSTeamsV2Config, t *template.Template, titleLink string, l *slog.Logger, httpOpts ...commoncfg.HTTPClientOption) (*Notifier, error) {
+func New(c *config.MSTeamsV2Config, t *template.Template, titleLink string, l *slog.Logger, templater alertmanagertypes.Templater, httpOpts ...commoncfg.HTTPClientOption) (*Notifier, error) {
 	client, err := notify.NewClientWithTracing(*c.HTTPConfig, Integration, httpOpts...)
 	if err != nil {
 		return nil, err
@@ -109,6 +112,7 @@ func New(c *config.MSTeamsV2Config, t *template.Template, titleLink string, l *s
 		retrier:      &notify.Retrier{},
 		webhookURL:   c.WebhookURL,
 		postJSONFunc: notify.PostJSON,
+		templater:    templater,
 	}
 
 	return n, nil
@@ -128,25 +132,11 @@ func (n *Notifier) Notify(ctx context.Context, as ...*types.Alert) (bool, error)
 		return false, err
 	}
 
-	title := tmpl(n.conf.Title)
-	if err != nil {
-		return false, err
-	}
-
 	titleLink := tmpl(n.titleLink)
 	if err != nil {
 		return false, err
 	}
 
-	alerts := types.Alerts(as...)
-	color := colorGrey
-	switch alerts.Status() {
-	case model.AlertFiring:
-		color = colorRed
-	case model.AlertResolved:
-		color = colorGreen
-	}
-
 	var url string
 	if n.conf.WebhookURL != nil {
 		url = n.conf.WebhookURL.String()
@@ -158,6 +148,12 @@ func (n *Notifier) Notify(ctx context.Context, as ...*types.Alert) (bool, error)
 		url = strings.TrimSpace(string(content))
 	}
 
+	bodyBlocks, err := n.prepareContent(ctx, as)
+	if err != nil {
+		n.logger.ErrorContext(ctx, "failed to prepare notification content", errors.Attr(err))
+		return false, err
+	}
+
 	// A message as referenced in https://learn.microsoft.com/en-us/connectors/teams/?tabs=text1%2Cdotnet#request-body-schema
 	t := teamsMessage{
 		Type: "message",
@@ -169,17 +165,7 @@ func (n *Notifier) Notify(ctx context.Context, as ...*types.Alert) (bool, error)
 					Schema:  "http://adaptivecards.io/schemas/adaptive-card.json",
 					Type:    "AdaptiveCard",
 					Version: "1.2",
-					Body: []Body{
-						{
-							Type:   "TextBlock",
-							Text:   title,
-							Weight: "Bolder",
-							Size:   "Medium",
-							Wrap:   true,
-							Style:  "heading",
-							Color:  color,
-						},
-					},
+					Body:    bodyBlocks,
 					Actions: []Action{
 						{
 							Type:  "Action.OpenUrl",
@@ -195,20 +181,6 @@ func (n *Notifier) Notify(ctx context.Context, as ...*types.Alert) (bool, error)
 		},
 	}
 
-	// add labels and annotations to the body of all alerts
-	for _, alert := range as {
-		t.Attachments[0].Content.Body = append(t.Attachments[0].Content.Body, Body{
-			Type:   "TextBlock",
-			Text:   "Alerts",
-			Weight: "Bolder",
-			Size:   "Medium",
-			Wrap:   true,
-			Color:  color,
-		})
-
-		t.Attachments[0].Content.Body = append(t.Attachments[0].Content.Body, n.createLabelsAndAnnotationsBody(alert)...)
-	}
-
 	var payload bytes.Buffer
 	if err = json.NewEncoder(&payload).Encode(t); err != nil {
 		return false, err
@@ -228,6 +200,75 @@ func (n *Notifier) Notify(ctx context.Context, as ...*types.Alert) (bool, error)
 	return shouldRetry, err
 }
 
+// prepareContent builds the Adaptive Card body blocks for the notification.
+// The first block is always the title; the remainder depends on whether the
+// alerts carried a custom body template.
+func (n *Notifier) prepareContent(ctx context.Context, alerts []*types.Alert) ([]Body, error) {
+	customTitle, customBody := alertmanagertemplate.ExtractTemplatesFromAnnotations(alerts)
+	result, err := n.templater.Expand(ctx, alertmanagertypes.ExpandRequest{
+		TitleTemplate:        customTitle,
+		BodyTemplate:         customBody,
+		DefaultTitleTemplate: n.conf.Title,
+		DefaultBodyTemplate:  n.conf.Text,
+	}, alerts)
+	if err != nil {
+		return nil, err
+	}
+
+	color := colorGrey
+	switch types.Alerts(alerts...).Status() {
+	case model.AlertFiring:
+		color = colorRed
+	case model.AlertResolved:
+		color = colorGreen
+	}
+
+	blocks := []Body{{
+		Type:   "TextBlock",
+		Text:   result.Title,
+		Weight: "Bolder",
+		Size:   "Medium",
+		Wrap:   true,
+		Style:  "heading",
+		Color:  color,
+	}}
+
+	if result.IsDefaultBody {
+		for _, alert := range alerts {
+			blocks = append(blocks, Body{
+				Type:   "TextBlock",
+				Text:   "Alerts",
+				Weight: "Bolder",
+				Size:   "Medium",
+				Wrap:   true,
+				Color:  color,
+			})
+			blocks = append(blocks, n.createLabelsAndAnnotationsBody(alert)...)
+		}
+		return blocks, nil
+	}
+
+	// Custom body path: result.Body is positionally aligned with alerts;
+	// entries for alerts whose template rendered empty are kept as "" so we
+	// can skip them here without shifting the per-alert color index.
+	for i, body := range result.Body {
+		if body == "" || i >= len(alerts) {
+			continue
+		}
+		perAlertColor := colorRed
+		if alerts[i].Resolved() {
+			perAlertColor = colorGreen
+		}
+		blocks = append(blocks, Body{
+			Type:  "TextBlock",
+			Text:  body,
+			Wrap:  true,
+			Color: perAlertColor,
+		})
+	}
+	return blocks, nil
+}
+
 func (*Notifier) createLabelsAndAnnotationsBody(alert *types.Alert) []Body {
 	bodies := []Body{}
 	bodies = append(bodies, Body{
@@ -258,7 +299,8 @@ func (*Notifier) createLabelsAndAnnotationsBody(alert *types.Alert) []Body {
 
 	annotationsFacts := []Fact{}
 	for k, v := range alert.Annotations {
-		if slices.Contains([]string{"summary", "related_logs", "related_traces"}, string(k)) {
+		if slices.Contains([]string{"summary", "related_logs", "related_traces"}, string(k)) ||
+			alertmanagertypes.IsPrivateAnnotation(string(k)) {
 			continue
 		}
 		annotationsFacts = append(annotationsFacts, Fact{Title: string(k), Value: string(v)})

pkg/alertmanager/alertmanagernotify/msteamsv2/msteamsv2_test.go

@@ -8,6 +8,7 @@ import (
 	"context"
 	"encoding/json"
 	"io"
+	"log/slog"
 	"net/http"
 	"net/http/httptest"
 	"net/url"
@@ -15,6 +16,9 @@ import (
 	"testing"
 	"time"
 
+	"github.com/SigNoz/signoz/pkg/alertmanager/alertmanagertemplate"
+	"github.com/SigNoz/signoz/pkg/types/alertmanagertypes"
+	"github.com/SigNoz/signoz/pkg/types/ruletypes"
 	commoncfg "github.com/prometheus/common/config"
 	"github.com/prometheus/common/model"
 	"github.com/prometheus/common/promslog"
@@ -23,21 +27,28 @@ import (
 	test "github.com/SigNoz/signoz/pkg/alertmanager/alertmanagernotify/alertmanagernotifytest"
 	"github.com/prometheus/alertmanager/config"
 	"github.com/prometheus/alertmanager/notify"
+	"github.com/prometheus/alertmanager/template"
 	"github.com/prometheus/alertmanager/types"
 )
 
+func newTestTemplater(tmpl *template.Template) alertmanagertypes.Templater {
+	return alertmanagertemplate.New(tmpl, slog.New(slog.DiscardHandler))
+}
+
 // This is a test URL that has been modified to not be valid.
 var testWebhookURL, _ = url.Parse("https://example.westeurope.logic.azure.com:443/workflows/xxx/triggers/manual/paths/invoke?api-version=2016-06-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=xxx")
 
 func TestMSTeamsV2Retry(t *testing.T) {
+	tmpl := test.CreateTmpl(t)
 	notifier, err := New(
 		&config.MSTeamsV2Config{
 			WebhookURL: &config.SecretURL{URL: testWebhookURL},
 			HTTPConfig: &commoncfg.HTTPClientConfig{},
 		},
-		test.CreateTmpl(t),
+		tmpl,
 		`{{ template "msteamsv2.default.titleLink" . }}`,
 		promslog.NewNopLogger(),
+		newTestTemplater(tmpl),
 	)
 	require.NoError(t, err)
 
@@ -64,14 +75,16 @@ func TestNotifier_Notify_WithReason(t *testing.T) {
 	}
 	for _, tt := range tests {
 		t.Run(tt.name, func(t *testing.T) {
+			tmpl := test.CreateTmpl(t)
 			notifier, err := New(
 				&config.MSTeamsV2Config{
 					WebhookURL: &config.SecretURL{URL: testWebhookURL},
 					HTTPConfig: &commoncfg.HTTPClientConfig{},
 				},
-				test.CreateTmpl(t),
+				tmpl,
 				`{{ template "msteamsv2.default.titleLink" . }}`,
 				promslog.NewNopLogger(),
+				newTestTemplater(tmpl),
 			)
 			require.NoError(t, err)
 
@@ -153,7 +166,8 @@ func TestMSTeamsV2Templating(t *testing.T) {
 		t.Run(tc.title, func(t *testing.T) {
 			tc.cfg.WebhookURL = &config.SecretURL{URL: u}
 			tc.cfg.HTTPConfig = &commoncfg.HTTPClientConfig{}
-			pd, err := New(tc.cfg, test.CreateTmpl(t), tc.titleLink, promslog.NewNopLogger())
+			tmpl := test.CreateTmpl(t)
+			pd, err := New(tc.cfg, tmpl, tc.titleLink, promslog.NewNopLogger(), newTestTemplater(tmpl))
 			require.NoError(t, err)
 
 			ctx := context.Background()
@@ -186,20 +200,124 @@ func TestMSTeamsV2RedactedURL(t *testing.T) {
 	defer fn()
 
 	secret := "secret"
+	tmpl := test.CreateTmpl(t)
 	notifier, err := New(
 		&config.MSTeamsV2Config{
 			WebhookURL: &config.SecretURL{URL: u},
 			HTTPConfig: &commoncfg.HTTPClientConfig{},
 		},
-		test.CreateTmpl(t),
+		tmpl,
 		`{{ template "msteamsv2.default.titleLink" . }}`,
 		promslog.NewNopLogger(),
+		newTestTemplater(tmpl),
 	)
 	require.NoError(t, err)
 
 	test.AssertNotifyLeaksNoSecret(ctx, t, notifier, secret)
 }
 
+func TestPrepareContent(t *testing.T) {
+	t.Run("default template - firing alerts", func(t *testing.T) {
+		tmpl := test.CreateTmpl(t)
+		notifier, err := New(
+			&config.MSTeamsV2Config{
+				WebhookURL: &config.SecretURL{URL: testWebhookURL},
+				HTTPConfig: &commoncfg.HTTPClientConfig{},
+				Title:      "Alertname: {{ .CommonLabels.alertname }}",
+			},
+			tmpl,
+			`{{ template "msteamsv2.default.titleLink" . }}`,
+			promslog.NewNopLogger(),
+			newTestTemplater(tmpl),
+		)
+		require.NoError(t, err)
+
+		ctx := context.Background()
+		ctx = notify.WithGroupKey(ctx, "1")
+
+		alerts := []*types.Alert{
+			{
+				Alert: model.Alert{
+					Labels: model.LabelSet{"alertname": "test"},
+					// Custom body template
+					Annotations: model.LabelSet{
+						ruletypes.AnnotationBodyTemplate: "Firing alert: $alertname",
+					},
+					StartsAt: time.Now(),
+					EndsAt:   time.Now().Add(time.Hour),
+				},
+			},
+		}
+		blocks, err := notifier.prepareContent(ctx, alerts)
+		require.NoError(t, err)
+		require.NotEmpty(t, blocks)
+		// First block should be the title with color (firing = red)
+		require.Equal(t, "Bolder", blocks[0].Weight)
+		require.Equal(t, colorRed, blocks[0].Color)
+		// verify title text
+		require.Equal(t, "Alertname: test", blocks[0].Text)
+		// verify body text
+		require.Equal(t, "Firing alert: test", blocks[1].Text)
+	})
+
+	t.Run("custom template - per-alert color", func(t *testing.T) {
+		tmpl := test.CreateTmpl(t)
+		notifier, err := New(
+			&config.MSTeamsV2Config{
+				WebhookURL: &config.SecretURL{URL: testWebhookURL},
+				HTTPConfig: &commoncfg.HTTPClientConfig{},
+			},
+			tmpl,
+			`{{ template "msteamsv2.default.titleLink" . }}`,
+			promslog.NewNopLogger(),
+			newTestTemplater(tmpl),
+		)
+		require.NoError(t, err)
+
+		ctx := context.Background()
+		ctx = notify.WithGroupKey(ctx, "1")
+
+		alerts := []*types.Alert{
+			{
+				Alert: model.Alert{
+					Labels: model.LabelSet{"alertname": "test1"},
+					Annotations: model.LabelSet{
+						"summary":                         "test",
+						ruletypes.AnnotationTitleTemplate: "Custom Title",
+						ruletypes.AnnotationBodyTemplate:  "custom body $alertname",
+					},
+					StartsAt: time.Now(),
+					EndsAt:   time.Now().Add(time.Hour),
+				},
+			},
+			{
+				Alert: model.Alert{
+					Labels: model.LabelSet{"alertname": "test2"},
+					Annotations: model.LabelSet{
+						"summary":                         "test",
+						ruletypes.AnnotationTitleTemplate: "Custom Title",
+						ruletypes.AnnotationBodyTemplate:  "custom body $alertname",
+					},
+					StartsAt: time.Now().Add(-time.Hour),
+					EndsAt:   time.Now().Add(-time.Minute),
+				},
+			},
+		}
+		blocks, err := notifier.prepareContent(ctx, alerts)
+		require.NoError(t, err)
+		require.NotEmpty(t, blocks)
+		// total 3 blocks: title and 2 body blocks
+		require.True(t, len(blocks) == 3)
+		// First block: title color is overall color of the alerts
+		require.Equal(t, colorRed, blocks[0].Color)
+		// verify title text
+		require.Equal(t, "Custom Title", blocks[0].Text)
+		// Body blocks should have per-alert color
+		require.Equal(t, colorRed, blocks[1].Color)   // firing
+		require.Equal(t, colorGreen, blocks[2].Color) // resolved
+	})
+}
+
 func TestMSTeamsV2ReadingURLFromFile(t *testing.T) {
 	ctx, u, fn := test.GetContextWithCancelingURL()
 	defer fn()
@@ -209,14 +327,16 @@ func TestMSTeamsV2ReadingURLFromFile(t *testing.T) {
 	_, err = f.WriteString(u.String() + "\n")
 	require.NoError(t, err, "writing to temp file failed")
 
+	tmpl := test.CreateTmpl(t)
 	notifier, err := New(
 		&config.MSTeamsV2Config{
 			WebhookURLFile: f.Name(),
 			HTTPConfig:     &commoncfg.HTTPClientConfig{},
 		},
-		test.CreateTmpl(t),
+		tmpl,
 		`{{ template "msteamsv2.default.titleLink" . }}`,
 		promslog.NewNopLogger(),
+		newTestTemplater(tmpl),
 	)
 	require.NoError(t, err)
 

pkg/alertmanager/alertmanagernotify/opsgenie/opsgenie.go

@@ -15,7 +15,10 @@ import (
 	"os"
 	"strings"
 
+	"github.com/SigNoz/signoz/pkg/alertmanager/alertmanagertemplate"
 	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/templating/markdownrenderer"
+	"github.com/SigNoz/signoz/pkg/types/alertmanagertypes"
 	commoncfg "github.com/prometheus/common/config"
 	"github.com/prometheus/common/model"
 
@@ -34,25 +37,27 @@ const maxMessageLenRunes = 130
 
 // Notifier implements a Notifier for OpsGenie notifications.
 type Notifier struct {
-	conf    *config.OpsGenieConfig
-	tmpl    *template.Template
-	logger  *slog.Logger
-	client  *http.Client
-	retrier *notify.Retrier
+	conf      *config.OpsGenieConfig
+	tmpl      *template.Template
+	logger    *slog.Logger
+	client    *http.Client
+	retrier   *notify.Retrier
+	templater alertmanagertypes.Templater
 }
 
 // New returns a new OpsGenie notifier.
-func New(c *config.OpsGenieConfig, t *template.Template, l *slog.Logger, httpOpts ...commoncfg.HTTPClientOption) (*Notifier, error) {
+func New(c *config.OpsGenieConfig, t *template.Template, l *slog.Logger, templater alertmanagertypes.Templater, httpOpts ...commoncfg.HTTPClientOption) (*Notifier, error) {
 	client, err := notify.NewClientWithTracing(*c.HTTPConfig, Integration, httpOpts...)
 	if err != nil {
 		return nil, err
 	}
 	return &Notifier{
-		conf:    c,
-		tmpl:    t,
-		logger:  l,
-		client:  client,
-		retrier: &notify.Retrier{RetryCodes: []int{http.StatusTooManyRequests}},
+		conf:      c,
+		tmpl:      t,
+		logger:    l,
+		client:    client,
+		retrier:   &notify.Retrier{RetryCodes: []int{http.StatusTooManyRequests}},
+		templater: templater,
 	}, nil
 }
 
@@ -123,6 +128,55 @@ func safeSplit(s, sep string) []string {
 	return b
 }
 
+// prepareContent expands alert templates and returns the OpsGenie-ready title
+// (truncated to the 130-rune limit) and HTML description. Custom bodies are
+// rendered to HTML and stitched together with <hr> dividers; default bodies
+// are joined with newlines (OpsGenie's legacy plain-text description).
+func (n *Notifier) prepareContent(ctx context.Context, alerts []*types.Alert) (string, string, error) {
+	customTitle, customBody := alertmanagertemplate.ExtractTemplatesFromAnnotations(alerts)
+	result, err := n.templater.Expand(ctx, alertmanagertypes.ExpandRequest{
+		TitleTemplate:        customTitle,
+		BodyTemplate:         customBody,
+		DefaultTitleTemplate: n.conf.Message,
+		DefaultBodyTemplate:  n.conf.Description,
+	}, alerts)
+	if err != nil {
+		return "", "", err
+	}
+
+	var description string
+	if result.IsDefaultBody {
+		description = strings.Join(result.Body, "\n")
+	} else {
+		var b strings.Builder
+		first := true
+		for _, part := range result.Body {
+			if part == "" {
+				continue
+			}
+			rendered, renderErr := markdownrenderer.RenderHTML(part)
+			if renderErr != nil {
+				return "", "", renderErr
+			}
+			if !first {
+				b.WriteString("<hr>")
+			}
+			b.WriteString("<div>")
+			b.WriteString(rendered)
+			b.WriteString("</div>")
+			first = false
+		}
+		description = b.String()
+	}
+
+	title, truncated := notify.TruncateInRunes(result.Title, maxMessageLenRunes)
+	if truncated {
+		n.logger.WarnContext(ctx, "Truncated message", slog.Int("max_runes", maxMessageLenRunes))
+	}
+
+	return title, description, nil
+}
+
 // Create requests for a list of alerts.
 func (n *Notifier) createRequests(ctx context.Context, as ...*types.Alert) ([]*http.Request, bool, error) {
 	key, err := notify.ExtractGroupKey(ctx)
@@ -168,9 +222,10 @@ func (n *Notifier) createRequests(ctx context.Context, as ...*types.Alert) ([]*h
 		}
 		requests = append(requests, req.WithContext(ctx))
 	default:
-		message, truncated := notify.TruncateInRunes(tmpl(n.conf.Message), maxMessageLenRunes)
-		if truncated {
-			logger.WarnContext(ctx, "Truncated message", slog.Any("alert", key), slog.Int("max_runes", maxMessageLenRunes))
+		message, description, err := n.prepareContent(ctx, as)
+		if err != nil {
+			n.logger.ErrorContext(ctx, "failed to prepare notification content", errors.Attr(err))
+			return nil, false, err
 		}
 
 		createEndpointURL := n.conf.APIURL.Copy()
@@ -209,7 +264,7 @@ func (n *Notifier) createRequests(ctx context.Context, as ...*types.Alert) ([]*h
 		msg := &opsGenieCreateMessage{
 			Alias:       alias,
 			Message:     message,
-			Description: tmpl(n.conf.Description),
+			Description: description,
 			Details:     details,
 			Source:      tmpl(n.conf.Source),
 			Responders:  responders,

pkg/alertmanager/alertmanagernotify/opsgenie/opsgenie_test.go

@@ -8,12 +8,16 @@ import (
 	"context"
 	"fmt"
 	"io"
+	"log/slog"
 	"net/http"
 	"net/url"
 	"os"
 	"testing"
 	"time"
 
+	"github.com/SigNoz/signoz/pkg/alertmanager/alertmanagertemplate"
+	"github.com/SigNoz/signoz/pkg/types/alertmanagertypes"
+	"github.com/SigNoz/signoz/pkg/types/ruletypes"
 	commoncfg "github.com/prometheus/common/config"
 	"github.com/prometheus/common/model"
 	"github.com/prometheus/common/promslog"
@@ -22,16 +26,23 @@ import (
 	"github.com/prometheus/alertmanager/config"
 	"github.com/prometheus/alertmanager/notify"
 	"github.com/prometheus/alertmanager/notify/test"
+	"github.com/prometheus/alertmanager/template"
 	"github.com/prometheus/alertmanager/types"
 )
 
+func newTestTemplater(tmpl *template.Template) alertmanagertypes.Templater {
+	return alertmanagertemplate.New(tmpl, slog.New(slog.DiscardHandler))
+}
+
 func TestOpsGenieRetry(t *testing.T) {
+	tmpl := test.CreateTmpl(t)
 	notifier, err := New(
 		&config.OpsGenieConfig{
 			HTTPConfig: &commoncfg.HTTPClientConfig{},
 		},
-		test.CreateTmpl(t),
+		tmpl,
 		promslog.NewNopLogger(),
+		newTestTemplater(tmpl),
 	)
 	require.NoError(t, err)
 
@@ -47,14 +58,16 @@ func TestOpsGenieRedactedURL(t *testing.T) {
 	defer fn()
 
 	key := "key"
+	tmpl := test.CreateTmpl(t)
 	notifier, err := New(
 		&config.OpsGenieConfig{
 			APIURL:     &config.URL{URL: u},
 			APIKey:     config.Secret(key),
 			HTTPConfig: &commoncfg.HTTPClientConfig{},
 		},
-		test.CreateTmpl(t),
+		tmpl,
 		promslog.NewNopLogger(),
+		newTestTemplater(tmpl),
 	)
 	require.NoError(t, err)
 
@@ -72,14 +85,16 @@ func TestGettingOpsGegineApikeyFromFile(t *testing.T) {
 	_, err = f.WriteString(key)
 	require.NoError(t, err, "writing to temp file failed")
 
+	tmpl := test.CreateTmpl(t)
 	notifier, err := New(
 		&config.OpsGenieConfig{
 			APIURL:     &config.URL{URL: u},
 			APIKeyFile: f.Name(),
 			HTTPConfig: &commoncfg.HTTPClientConfig{},
 		},
-		test.CreateTmpl(t),
+		tmpl,
 		promslog.NewNopLogger(),
+		newTestTemplater(tmpl),
 	)
 	require.NoError(t, err)
 
@@ -202,7 +217,7 @@ func TestOpsGenie(t *testing.T) {
 		},
 	} {
 		t.Run(tc.title, func(t *testing.T) {
-			notifier, err := New(tc.cfg, tmpl, logger)
+			notifier, err := New(tc.cfg, tmpl, logger, newTestTemplater(tmpl))
 			require.NoError(t, err)
 
 			ctx := context.Background()
@@ -278,7 +293,7 @@ func TestOpsGenieWithUpdate(t *testing.T) {
 		APIURL:       &config.URL{URL: u},
 		HTTPConfig:   &commoncfg.HTTPClientConfig{},
 	}
-	notifierWithUpdate, err := New(&opsGenieConfigWithUpdate, tmpl, promslog.NewNopLogger())
+	notifierWithUpdate, err := New(&opsGenieConfigWithUpdate, tmpl, promslog.NewNopLogger(), newTestTemplater(tmpl))
 	alert := &types.Alert{
 		Alert: model.Alert{
 			StartsAt: time.Now(),
@@ -321,7 +336,7 @@ func TestOpsGenieApiKeyFile(t *testing.T) {
 		APIURL:     &config.URL{URL: u},
 		HTTPConfig: &commoncfg.HTTPClientConfig{},
 	}
-	notifierWithUpdate, err := New(&opsGenieConfigWithUpdate, tmpl, promslog.NewNopLogger())
+	notifierWithUpdate, err := New(&opsGenieConfigWithUpdate, tmpl, promslog.NewNopLogger(), newTestTemplater(tmpl))
 
 	require.NoError(t, err)
 	requests, _, err := notifierWithUpdate.createRequests(ctx)
@@ -329,6 +344,99 @@ func TestOpsGenieApiKeyFile(t *testing.T) {
 	require.Equal(t, "GenieKey my_secret_api_key", requests[0].Header.Get("Authorization"))
 }
 
+func TestPrepareContent(t *testing.T) {
+	t.Run("default template", func(t *testing.T) {
+		tmpl := test.CreateTmpl(t)
+		logger := promslog.NewNopLogger()
+
+		notifier := &Notifier{
+			conf: &config.OpsGenieConfig{
+				Message:     `{{ .CommonLabels.Message }}`,
+				Description: `{{ .CommonLabels.Description }}`,
+			},
+			tmpl:      tmpl,
+			logger:    logger,
+			templater: newTestTemplater(tmpl),
+		}
+
+		ctx := context.Background()
+		ctx = notify.WithGroupKey(ctx, "1")
+
+		alert := &types.Alert{
+			Alert: model.Alert{
+				Labels: model.LabelSet{
+					"Message":     "Firing alert: test",
+					"Description": "Check runbook for more details",
+				},
+				StartsAt: time.Now(),
+				EndsAt:   time.Now().Add(time.Hour),
+			},
+		}
+
+		alerts := []*types.Alert{alert}
+
+		title, desc, prepErr := notifier.prepareContent(ctx, alerts)
+		require.NoError(t, prepErr)
+		require.Equal(t, "Firing alert: test", title)
+		require.Equal(t, "Check runbook for more details", desc)
+	})
+
+	t.Run("custom template", func(t *testing.T) {
+		tmpl := test.CreateTmpl(t)
+		logger := promslog.NewNopLogger()
+
+		notifier := &Notifier{
+			conf: &config.OpsGenieConfig{
+				Message:     `{{ .CommonLabels.Message }}`,
+				Description: `{{ .CommonLabels.Description }}`,
+			},
+			tmpl:      tmpl,
+			logger:    logger,
+			templater: newTestTemplater(tmpl),
+		}
+
+		ctx := context.Background()
+		ctx = notify.WithGroupKey(ctx, "1")
+
+		alert1 := &types.Alert{
+			Alert: model.Alert{
+				Labels: model.LabelSet{
+					"service":   "payment",
+					"namespace": "potter-the-harry",
+				},
+				Annotations: model.LabelSet{
+					ruletypes.AnnotationTitleTemplate: "High request throughput for $service",
+					ruletypes.AnnotationBodyTemplate:  "Alert firing in NS: $labels.namespace",
+				},
+				StartsAt: time.Now(),
+				EndsAt:   time.Now().Add(time.Hour),
+			},
+		}
+		alert2 := &types.Alert{
+			Alert: model.Alert{
+				Labels: model.LabelSet{
+					"service":   "payment",
+					"namespace": "smart-the-rat",
+				},
+				Annotations: model.LabelSet{
+					ruletypes.AnnotationTitleTemplate: "High request throughput for $service",
+					ruletypes.AnnotationBodyTemplate:  "Alert firing in NS: $labels.namespace",
+				},
+				StartsAt: time.Now(),
+				EndsAt:   time.Now().Add(time.Hour),
+			},
+		}
+
+		alerts := []*types.Alert{alert1, alert2}
+
+		title, desc, err := notifier.prepareContent(ctx, alerts)
+		require.NoError(t, err)
+		require.Equal(t, "High request throughput for payment", title)
+		// Each alert body wrapped in <div>, separated by <hr>
+		require.Equal(t, "<div><p>Alert firing in NS: potter-the-harry</p>\n</div><hr><div><p>Alert firing in NS: smart-the-rat</p>\n</div>", desc)
+	})
+}
+
 func readBody(t *testing.T, r *http.Request) string {
 	t.Helper()
 	body, err := io.ReadAll(r.Body)

pkg/alertmanager/alertmanagernotify/pagerduty/pagerduty.go

@@ -15,7 +15,9 @@ import (
 	"os"
 	"strings"
 
+	"github.com/SigNoz/signoz/pkg/alertmanager/alertmanagertemplate"
 	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/types/alertmanagertypes"
 	"github.com/alecthomas/units"
 	commoncfg "github.com/prometheus/common/config"
 	"github.com/prometheus/common/model"
@@ -40,21 +42,22 @@ const (
 
 // Notifier implements a Notifier for PagerDuty notifications.
 type Notifier struct {
-	conf    *config.PagerdutyConfig
-	tmpl    *template.Template
-	logger  *slog.Logger
-	apiV1   string // for tests.
-	client  *http.Client
-	retrier *notify.Retrier
+	conf      *config.PagerdutyConfig
+	tmpl      *template.Template
+	logger    *slog.Logger
+	apiV1     string // for tests.
+	client    *http.Client
+	retrier   *notify.Retrier
+	templater alertmanagertypes.Templater
 }
 
 // New returns a new PagerDuty notifier.
-func New(c *config.PagerdutyConfig, t *template.Template, l *slog.Logger, httpOpts ...commoncfg.HTTPClientOption) (*Notifier, error) {
+func New(c *config.PagerdutyConfig, t *template.Template, l *slog.Logger, templater alertmanagertypes.Templater, httpOpts ...commoncfg.HTTPClientOption) (*Notifier, error) {
 	client, err := notify.NewClientWithTracing(*c.HTTPConfig, Integration, httpOpts...)
 	if err != nil {
 		return nil, err
 	}
-	n := &Notifier{conf: c, tmpl: t, logger: l, client: client}
+	n := &Notifier{conf: c, tmpl: t, logger: l, client: client, templater: templater}
 	if c.ServiceKey != "" || c.ServiceKeyFile != "" {
 		n.apiV1 = "https://events.pagerduty.com/generic/2010-04-15/create_event.json"
 		// Retrying can solve the issue on 403 (rate limiting) and 5xx response codes.
@@ -143,11 +146,12 @@ func (n *Notifier) notifyV1(
 	key notify.Key,
 	data *template.Data,
 	details map[string]any,
+	title string,
 ) (bool, error) {
 	var tmplErr error
 	tmpl := notify.TmplText(n.tmpl, data, &tmplErr)
 
-	description, truncated := notify.TruncateInRunes(tmpl(n.conf.Description), maxV1DescriptionLenRunes)
+	description, truncated := notify.TruncateInRunes(title, maxV1DescriptionLenRunes)
 	if truncated {
 		n.logger.WarnContext(ctx, "Truncated description", slog.Any("key", key), slog.Int("max_runes", maxV1DescriptionLenRunes))
 	}
@@ -203,6 +207,7 @@ func (n *Notifier) notifyV2(
 	key notify.Key,
 	data *template.Data,
 	details map[string]any,
+	title string,
 ) (bool, error) {
 	var tmplErr error
 	tmpl := notify.TmplText(n.tmpl, data, &tmplErr)
@@ -211,7 +216,7 @@ func (n *Notifier) notifyV2(
 		n.conf.Severity = "error"
 	}
 
-	summary, truncated := notify.TruncateInRunes(tmpl(n.conf.Description), maxV2SummaryLenRunes)
+	summary, truncated := notify.TruncateInRunes(title, maxV2SummaryLenRunes)
 	if truncated {
 		n.logger.WarnContext(ctx, "Truncated summary", slog.Any("key", key), slog.Int("max_runes", maxV2SummaryLenRunes))
 	}
@@ -294,6 +299,22 @@ func (n *Notifier) notifyV2(
 	return retry, err
 }
 
+// prepareTitle expands the notification title. PagerDuty has no body surface
+// we care about — the description/summary field is what users see as the
+// incident headline, so we feed the configured Description as the default
+// title template and ignore any custom body_template entirely.
+func (n *Notifier) prepareTitle(ctx context.Context, alerts []*types.Alert) (string, error) {
+	customTitle, _ := alertmanagertemplate.ExtractTemplatesFromAnnotations(alerts)
+	result, err := n.templater.Expand(ctx, alertmanagertypes.ExpandRequest{
+		TitleTemplate:        customTitle,
+		DefaultTitleTemplate: n.conf.Description,
+	}, alerts)
+	if err != nil {
+		return "", err
+	}
+	return result.Title, nil
+}
+
 // Notify implements the Notifier interface.
 func (n *Notifier) Notify(ctx context.Context, as ...*types.Alert) (bool, error) {
 	key, err := notify.ExtractGroupKey(ctx)
@@ -302,6 +323,12 @@ func (n *Notifier) Notify(ctx context.Context, as ...*types.Alert) (bool, error)
 	}
 	logger := n.logger.With(slog.Any("group_key", key))
 
+	title, err := n.prepareTitle(ctx, as)
+	if err != nil {
+		n.logger.ErrorContext(ctx, "failed to prepare notification content", errors.Attr(err))
+		return false, err
+	}
+
 	var (
 		alerts    = types.Alerts(as...)
 		data      = notify.GetTemplateData(ctx, n.tmpl, as, logger)
@@ -329,7 +356,7 @@ func (n *Notifier) Notify(ctx context.Context, as ...*types.Alert) (bool, error)
 	if n.apiV1 != "" {
 		nf = n.notifyV1
 	}
-	retry, err := nf(ctx, eventType, key, data, details)
+	retry, err := nf(ctx, eventType, key, data, details, title)
 	if err != nil {
 		if ctx.Err() != nil {
 			err = errors.WrapInternalf(err, errors.CodeInternal, "failed to notify PagerDuty: %v", context.Cause(ctx))

pkg/alertmanager/alertmanagernotify/pagerduty/pagerduty_test.go

@@ -9,6 +9,7 @@ import (
 	"context"
 	"encoding/json"
 	"io"
+	"log/slog"
 	"net/http"
 	"net/http/httptest"
 	"net/url"
@@ -17,7 +18,10 @@ import (
 	"testing"
 	"time"
 
+	"github.com/SigNoz/signoz/pkg/alertmanager/alertmanagertemplate"
 	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/types/alertmanagertypes"
+	"github.com/SigNoz/signoz/pkg/types/ruletypes"
 	commoncfg "github.com/prometheus/common/config"
 	"github.com/prometheus/common/model"
 	"github.com/prometheus/common/promslog"
@@ -30,14 +34,20 @@ import (
 	"github.com/prometheus/alertmanager/types"
 )
 
+func newTestTemplater(tmpl *template.Template) alertmanagertypes.Templater {
+	return alertmanagertemplate.New(tmpl, slog.New(slog.DiscardHandler))
+}
+
 func TestPagerDutyRetryV1(t *testing.T) {
+	tmpl := test.CreateTmpl(t)
 	notifier, err := New(
 		&config.PagerdutyConfig{
 			ServiceKey: config.Secret("01234567890123456789012345678901"),
 			HTTPConfig: &commoncfg.HTTPClientConfig{},
 		},
-		test.CreateTmpl(t),
+		tmpl,
 		promslog.NewNopLogger(),
+		newTestTemplater(tmpl),
 	)
 	require.NoError(t, err)
 
@@ -49,13 +59,15 @@ func TestPagerDutyRetryV1(t *testing.T) {
 }
 
 func TestPagerDutyRetryV2(t *testing.T) {
+	tmpl := test.CreateTmpl(t)
 	notifier, err := New(
 		&config.PagerdutyConfig{
 			RoutingKey: config.Secret("01234567890123456789012345678901"),
 			HTTPConfig: &commoncfg.HTTPClientConfig{},
 		},
-		test.CreateTmpl(t),
+		tmpl,
 		promslog.NewNopLogger(),
+		newTestTemplater(tmpl),
 	)
 	require.NoError(t, err)
 
@@ -71,13 +83,15 @@ func TestPagerDutyRedactedURLV1(t *testing.T) {
 	defer fn()
 
 	key := "01234567890123456789012345678901"
+	tmpl := test.CreateTmpl(t)
 	notifier, err := New(
 		&config.PagerdutyConfig{
 			ServiceKey: config.Secret(key),
 			HTTPConfig: &commoncfg.HTTPClientConfig{},
 		},
-		test.CreateTmpl(t),
+		tmpl,
 		promslog.NewNopLogger(),
+		newTestTemplater(tmpl),
 	)
 	require.NoError(t, err)
 	notifier.apiV1 = u.String()
@@ -90,14 +104,16 @@ func TestPagerDutyRedactedURLV2(t *testing.T) {
 	defer fn()
 
 	key := "01234567890123456789012345678901"
+	tmpl := test.CreateTmpl(t)
 	notifier, err := New(
 		&config.PagerdutyConfig{
 			URL:        &config.URL{URL: u},
 			RoutingKey: config.Secret(key),
 			HTTPConfig: &commoncfg.HTTPClientConfig{},
 		},
-		test.CreateTmpl(t),
+		tmpl,
 		promslog.NewNopLogger(),
+		newTestTemplater(tmpl),
 	)
 	require.NoError(t, err)
 
@@ -114,13 +130,15 @@ func TestPagerDutyV1ServiceKeyFromFile(t *testing.T) {
 	ctx, u, fn := test.GetContextWithCancelingURL()
 	defer fn()
 
+	tmpl := test.CreateTmpl(t)
 	notifier, err := New(
 		&config.PagerdutyConfig{
 			ServiceKeyFile: f.Name(),
 			HTTPConfig:     &commoncfg.HTTPClientConfig{},
 		},
-		test.CreateTmpl(t),
+		tmpl,
 		promslog.NewNopLogger(),
+		newTestTemplater(tmpl),
 	)
 	require.NoError(t, err)
 	notifier.apiV1 = u.String()
@@ -138,14 +156,16 @@ func TestPagerDutyV2RoutingKeyFromFile(t *testing.T) {
 	ctx, u, fn := test.GetContextWithCancelingURL()
 	defer fn()
 
+	tmpl := test.CreateTmpl(t)
 	notifier, err := New(
 		&config.PagerdutyConfig{
 			URL:            &config.URL{URL: u},
 			RoutingKeyFile: f.Name(),
 			HTTPConfig:     &commoncfg.HTTPClientConfig{},
 		},
-		test.CreateTmpl(t),
+		tmpl,
 		promslog.NewNopLogger(),
+		newTestTemplater(tmpl),
 	)
 	require.NoError(t, err)
 
@@ -302,7 +322,8 @@ func TestPagerDutyTemplating(t *testing.T) {
 		t.Run(tc.title, func(t *testing.T) {
 			tc.cfg.URL = &config.URL{URL: u}
 			tc.cfg.HTTPConfig = &commoncfg.HTTPClientConfig{}
-			pd, err := New(tc.cfg, test.CreateTmpl(t), promslog.NewNopLogger())
+			tmpl := test.CreateTmpl(t)
+			pd, err := New(tc.cfg, tmpl, promslog.NewNopLogger(), newTestTemplater(tmpl))
 			require.NoError(t, err)
 			if pd.apiV1 != "" {
 				pd.apiV1 = u.String()
@@ -392,13 +413,15 @@ func TestEventSizeEnforcement(t *testing.T) {
 		Details:    bigDetailsV1,
 	}
 
+	tmpl := test.CreateTmpl(t)
 	notifierV1, err := New(
 		&config.PagerdutyConfig{
 			ServiceKey: config.Secret("01234567890123456789012345678901"),
 			HTTPConfig: &commoncfg.HTTPClientConfig{},
 		},
-		test.CreateTmpl(t),
+		tmpl,
 		promslog.NewNopLogger(),
+		newTestTemplater(tmpl),
 	)
 	require.NoError(t, err)
 
@@ -420,8 +443,9 @@ func TestEventSizeEnforcement(t *testing.T) {
 			RoutingKey: config.Secret("01234567890123456789012345678901"),
 			HTTPConfig: &commoncfg.HTTPClientConfig{},
 		},
-		test.CreateTmpl(t),
+		tmpl,
 		promslog.NewNopLogger(),
+		newTestTemplater(tmpl),
 	)
 	require.NoError(t, err)
 
@@ -536,7 +560,8 @@ func TestPagerDutyEmptySrcHref(t *testing.T) {
 		Links:      links,
 	}
 
-	pagerDuty, err := New(&pagerDutyConfig, test.CreateTmpl(t), promslog.NewNopLogger())
+	pdTmpl := test.CreateTmpl(t)
+	pagerDuty, err := New(&pagerDutyConfig, pdTmpl, promslog.NewNopLogger(), newTestTemplater(pdTmpl))
 	require.NoError(t, err)
 
 	ctx := context.Background()
@@ -603,7 +628,8 @@ func TestPagerDutyTimeout(t *testing.T) {
 				Timeout:    tt.timeout,
 			}
 
-			pd, err := New(&cfg, test.CreateTmpl(t), promslog.NewNopLogger())
+			tmpl := test.CreateTmpl(t)
+			pd, err := New(&cfg, tmpl, promslog.NewNopLogger(), newTestTemplater(tmpl))
 			require.NoError(t, err)
 
 			ctx := context.Background()
@@ -881,3 +907,79 @@ func TestRenderDetails(t *testing.T) {
 		})
 	}
 }
+
+func TestPrepareContent(t *testing.T) {
+	prepareContext := func() context.Context {
+		ctx := context.Background()
+		ctx = notify.WithGroupKey(ctx, "1")
+		ctx = notify.WithReceiverName(ctx, "test-receiver")
+		ctx = notify.WithGroupLabels(ctx, model.LabelSet{"alertname": "HighCPU for Payment service"})
+		return ctx
+	}
+	t.Run("default template uses go text template config for title", func(t *testing.T) {
+		tmpl := test.CreateTmpl(t)
+		notifier, err := New(
+			&config.PagerdutyConfig{
+				RoutingKey:  config.Secret("01234567890123456789012345678901"),
+				HTTPConfig:  &commoncfg.HTTPClientConfig{},
+				Description: `{{ .CommonLabels.alertname }} ({{ .Status | toUpper }})`,
+			},
+			tmpl,
+			promslog.NewNopLogger(),
+			newTestTemplater(tmpl),
+		)
+		require.NoError(t, err)
+
+		ctx := prepareContext()
+
+		alerts := []*types.Alert{
+			{
+				Alert: model.Alert{
+					Labels:   model.LabelSet{"alertname": "HighCPU for Payment service"},
+					StartsAt: time.Now(),
+					EndsAt:   time.Now().Add(time.Hour),
+				},
+			},
+		}
+
+		title, err := notifier.prepareTitle(ctx, alerts)
+		require.NoError(t, err)
+		require.Equal(t, "HighCPU for Payment service (FIRING)", title)
+	})
+
+	t.Run("custom template uses $variable annotation for title", func(t *testing.T) {
+		tmpl := test.CreateTmpl(t)
+		notifier, err := New(
+			&config.PagerdutyConfig{
+				RoutingKey: config.Secret("01234567890123456789012345678901"),
+				HTTPConfig: &commoncfg.HTTPClientConfig{},
+			},
+			tmpl,
+			promslog.NewNopLogger(),
+			newTestTemplater(tmpl),
+		)
+		require.NoError(t, err)
+
+		ctx := prepareContext()
+
+		alerts := []*types.Alert{
+			{
+				Alert: model.Alert{
+					Labels: model.LabelSet{
+						"alertname": "HighCPU",
+						"service":   "api-server",
+					},
+					Annotations: model.LabelSet{
+						ruletypes.AnnotationTitleTemplate: "$rule.name on $service is in $alert.status state",
+					},
+					StartsAt: time.Now().Add(-time.Hour),
+					EndsAt:   time.Now(),
+				},
+			},
+		}
+
+		title, err := notifier.prepareTitle(ctx, alerts)
+		require.NoError(t, err)
+		require.Equal(t, "HighCPU on api-server is in resolved state", title)
+	})
+}

pkg/alertmanager/alertmanagernotify/receiver.go

@@ -26,7 +26,7 @@ var customNotifierIntegrations = []string{
 	msteamsv2.Integration,
 }
 
-func NewReceiverIntegrations(nc alertmanagertypes.Receiver, tmpl *template.Template, logger *slog.Logger) ([]notify.Integration, error) {
+func NewReceiverIntegrations(nc alertmanagertypes.Receiver, tmpl *template.Template, logger *slog.Logger, templater alertmanagertypes.Templater) ([]notify.Integration, error) {
 	upstreamIntegrations, err := receiver.BuildReceiverIntegrations(nc, tmpl, logger)
 	if err != nil {
 		return nil, err
@@ -53,23 +53,25 @@ func NewReceiverIntegrations(nc alertmanagertypes.Receiver, tmpl *template.Templ
 	}
 
 	for i, c := range nc.WebhookConfigs {
-		add(webhook.Integration, i, c, func(l *slog.Logger) (notify.Notifier, error) { return webhook.New(c, tmpl, l) })
+		add(webhook.Integration, i, c, func(l *slog.Logger) (notify.Notifier, error) { return webhook.New(c, tmpl, l, templater) })
 	}
 	for i, c := range nc.EmailConfigs {
-		add(email.Integration, i, c, func(l *slog.Logger) (notify.Notifier, error) { return email.New(c, tmpl, l), nil })
+		add(email.Integration, i, c, func(l *slog.Logger) (notify.Notifier, error) {
+			return email.New(c, tmpl, l, templater), nil
+		})
 	}
 	for i, c := range nc.PagerdutyConfigs {
-		add(pagerduty.Integration, i, c, func(l *slog.Logger) (notify.Notifier, error) { return pagerduty.New(c, tmpl, l) })
+		add(pagerduty.Integration, i, c, func(l *slog.Logger) (notify.Notifier, error) { return pagerduty.New(c, tmpl, l, templater) })
 	}
 	for i, c := range nc.OpsGenieConfigs {
-		add(opsgenie.Integration, i, c, func(l *slog.Logger) (notify.Notifier, error) { return opsgenie.New(c, tmpl, l) })
+		add(opsgenie.Integration, i, c, func(l *slog.Logger) (notify.Notifier, error) { return opsgenie.New(c, tmpl, l, templater) })
 	}
 	for i, c := range nc.SlackConfigs {
-		add(slack.Integration, i, c, func(l *slog.Logger) (notify.Notifier, error) { return slack.New(c, tmpl, l) })
+		add(slack.Integration, i, c, func(l *slog.Logger) (notify.Notifier, error) { return slack.New(c, tmpl, l, templater) })
 	}
 	for i, c := range nc.MSTeamsV2Configs {
 		add(msteamsv2.Integration, i, c, func(l *slog.Logger) (notify.Notifier, error) {
-			return msteamsv2.New(c, tmpl, `{{ template "msteamsv2.default.titleLink" . }}`, l)
+			return msteamsv2.New(c, tmpl, `{{ template "msteamsv2.default.titleLink" . }}`, l, templater)
 		})
 	}
 

pkg/alertmanager/alertmanagernotify/slack/slack.go

@@ -14,7 +14,11 @@ import (
 	"os"
 	"strings"
 
+	"github.com/SigNoz/signoz/pkg/alertmanager/alertmanagertemplate"
 	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/templating/markdownrenderer"
+	"github.com/SigNoz/signoz/pkg/types/alertmanagertypes"
+	"github.com/SigNoz/signoz/pkg/types/ruletypes"
 	commoncfg "github.com/prometheus/common/config"
 
 	"github.com/prometheus/alertmanager/config"
@@ -25,6 +29,8 @@ import (
 
 const (
 	Integration = "slack"
+	colorRed    = "#FF0000"
+	colorGreen  = "#00FF00"
 )
 
 // https://api.slack.com/reference/messaging/attachments#legacy_fields - 1024, no units given, assuming runes or characters.
@@ -32,17 +38,18 @@ const maxTitleLenRunes = 1024
 
 // Notifier implements a Notifier for Slack notifications.
 type Notifier struct {
-	conf    *config.SlackConfig
-	tmpl    *template.Template
-	logger  *slog.Logger
-	client  *http.Client
-	retrier *notify.Retrier
+	conf      *config.SlackConfig
+	tmpl      *template.Template
+	logger    *slog.Logger
+	client    *http.Client
+	retrier   *notify.Retrier
+	templater alertmanagertypes.Templater
 
 	postJSONFunc func(ctx context.Context, client *http.Client, url string, body io.Reader) (*http.Response, error)
 }
 
 // New returns a new Slack notification handler.
-func New(c *config.SlackConfig, t *template.Template, l *slog.Logger, httpOpts ...commoncfg.HTTPClientOption) (*Notifier, error) {
+func New(c *config.SlackConfig, t *template.Template, l *slog.Logger, templater alertmanagertypes.Templater, httpOpts ...commoncfg.HTTPClientOption) (*Notifier, error) {
 	client, err := notify.NewClientWithTracing(*c.HTTPConfig, Integration, httpOpts...)
 	if err != nil {
 		return nil, err
@@ -54,6 +61,7 @@ func New(c *config.SlackConfig, t *template.Template, l *slog.Logger, httpOpts .
 		logger:       l,
 		client:       client,
 		retrier:      &notify.Retrier{},
+		templater:    templater,
 		postJSONFunc: notify.PostJSON,
 	}, nil
 }
@@ -81,9 +89,10 @@ type attachment struct {
 	Actions    []config.SlackAction `json:"actions,omitempty"`
 	ImageURL   string               `json:"image_url,omitempty"`
 	ThumbURL   string               `json:"thumb_url,omitempty"`
-	Footer     string               `json:"footer"`
+	Footer     string               `json:"footer,omitempty"`
 	Color      string               `json:"color,omitempty"`
 	MrkdwnIn   []string             `json:"mrkdwn_in,omitempty"`
+	Blocks     []any                `json:"blocks,omitempty"`
 }
 
 // Notify implements the Notifier interface.
@@ -100,79 +109,15 @@ func (n *Notifier) Notify(ctx context.Context, as ...*types.Alert) (bool, error)
 		data     = notify.GetTemplateData(ctx, n.tmpl, as, logger)
 		tmplText = notify.TmplText(n.tmpl, data, &err)
 	)
-	var markdownIn []string
 
-	if len(n.conf.MrkdwnIn) == 0 {
-		markdownIn = []string{"fallback", "pretext", "text"}
-	} else {
-		markdownIn = n.conf.MrkdwnIn
+	attachments, err := n.prepareContent(ctx, as, tmplText)
+	if err != nil {
+		n.logger.ErrorContext(ctx, "failed to prepare notification content", errors.Attr(err))
+		return false, err
 	}
 
-	title, truncated := notify.TruncateInRunes(tmplText(n.conf.Title), maxTitleLenRunes)
-	if truncated {
-		logger.WarnContext(ctx, "Truncated title", slog.Int("max_runes", maxTitleLenRunes))
-	}
-	att := &attachment{
-		Title:      title,
-		TitleLink:  tmplText(n.conf.TitleLink),
-		Pretext:    tmplText(n.conf.Pretext),
-		Text:       tmplText(n.conf.Text),
-		Fallback:   tmplText(n.conf.Fallback),
-		CallbackID: tmplText(n.conf.CallbackID),
-		ImageURL:   tmplText(n.conf.ImageURL),
-		ThumbURL:   tmplText(n.conf.ThumbURL),
-		Footer:     tmplText(n.conf.Footer),
-		Color:      tmplText(n.conf.Color),
-		MrkdwnIn:   markdownIn,
-	}
-
-	numFields := len(n.conf.Fields)
-	if numFields > 0 {
-		fields := make([]config.SlackField, numFields)
-		for index, field := range n.conf.Fields {
-			// Check if short was defined for the field otherwise fallback to the global setting
-			var short bool
-			if field.Short != nil {
-				short = *field.Short
-			} else {
-				short = n.conf.ShortFields
-			}
-
-			// Rebuild the field by executing any templates and setting the new value for short
-			fields[index] = config.SlackField{
-				Title: tmplText(field.Title),
-				Value: tmplText(field.Value),
-				Short: &short,
-			}
-		}
-		att.Fields = fields
-	}
-
-	numActions := len(n.conf.Actions)
-	if numActions > 0 {
-		actions := make([]config.SlackAction, numActions)
-		for index, action := range n.conf.Actions {
-			slackAction := config.SlackAction{
-				Type:  tmplText(action.Type),
-				Text:  tmplText(action.Text),
-				URL:   tmplText(action.URL),
-				Style: tmplText(action.Style),
-				Name:  tmplText(action.Name),
-				Value: tmplText(action.Value),
-			}
-
-			if action.ConfirmField != nil {
-				slackAction.ConfirmField = &config.SlackConfirmationField{
-					Title:       tmplText(action.ConfirmField.Title),
-					Text:        tmplText(action.ConfirmField.Text),
-					OkText:      tmplText(action.ConfirmField.OkText),
-					DismissText: tmplText(action.ConfirmField.DismissText),
-				}
-			}
-
-			actions[index] = slackAction
-		}
-		att.Actions = actions
+	if len(attachments) > 0 {
+		n.addFieldsAndActions(&attachments[0], tmplText)
 	}
 
 	req := &request{
@@ -182,7 +127,7 @@ func (n *Notifier) Notify(ctx context.Context, as ...*types.Alert) (bool, error)
 		IconURL:     tmplText(n.conf.IconURL),
 		LinkNames:   n.conf.LinkNames,
 		Text:        tmplText(n.conf.MessageText),
-		Attachments: []attachment{*att},
+		Attachments: attachments,
 	}
 	if err != nil {
 		return false, err
@@ -238,6 +183,150 @@ func (n *Notifier) Notify(ctx context.Context, as ...*types.Alert) (bool, error)
 	return retry, nil
 }
 
+// prepareContent expands alert templates and returns the Slack attachment(s)
+// ready to send. When alerts carry a custom body template, one title-only
+// attachment plus one body attachment per alert is returned so that each alert
+// can get its own firing/resolved color and per-alert action buttons.
+func (n *Notifier) prepareContent(ctx context.Context, alerts []*types.Alert, tmplText func(string) string) ([]attachment, error) {
+	customTitle, customBody := alertmanagertemplate.ExtractTemplatesFromAnnotations(alerts)
+	result, err := n.templater.Expand(ctx, alertmanagertypes.ExpandRequest{
+		TitleTemplate:        customTitle,
+		BodyTemplate:         customBody,
+		DefaultTitleTemplate: n.conf.Title,
+		DefaultBodyTemplate:  n.conf.Text,
+	}, alerts)
+	if err != nil {
+		return nil, err
+	}
+
+	title, truncated := notify.TruncateInRunes(result.Title, maxTitleLenRunes)
+	if truncated {
+		n.logger.WarnContext(ctx, "Truncated title", slog.Int("max_runes", maxTitleLenRunes))
+	}
+
+	if result.IsDefaultBody {
+		var markdownIn []string
+		if len(n.conf.MrkdwnIn) == 0 {
+			markdownIn = []string{"fallback", "pretext", "text"}
+		} else {
+			markdownIn = n.conf.MrkdwnIn
+		}
+		return []attachment{
+			{
+				Title:      title,
+				TitleLink:  tmplText(n.conf.TitleLink),
+				Pretext:    tmplText(n.conf.Pretext),
+				Text:       result.Body[0],
+				Fallback:   tmplText(n.conf.Fallback),
+				CallbackID: tmplText(n.conf.CallbackID),
+				ImageURL:   tmplText(n.conf.ImageURL),
+				ThumbURL:   tmplText(n.conf.ThumbURL),
+				Footer:     tmplText(n.conf.Footer),
+				Color:      tmplText(n.conf.Color),
+				MrkdwnIn:   markdownIn,
+			},
+		}, nil
+	}
+
+	// Custom template path: one title attachment + one attachment per
+	// non-empty alert body. result.Body is positionally aligned with alerts,
+	// so we index alerts[i] directly and skip empty entries.
+	attachments := make([]attachment, 0, 1+len(result.Body))
+	attachments = append(attachments, attachment{
+		Title:     title,
+		TitleLink: tmplText(n.conf.TitleLink),
+	})
+
+	for i, body := range result.Body {
+		if body == "" || i >= len(alerts) {
+			continue
+		}
+
+		// Custom bodies are authored in markdown; render each non-empty body to
+		// Slack's mrkdwn flavour. Default bodies skip this because the Text
+		// template is already channel-ready.
+		rendered, renderErr := markdownrenderer.RenderSlackMrkdwn(body)
+		if renderErr != nil {
+			return nil, renderErr
+		}
+
+		color := colorRed
+		if alerts[i].Resolved() {
+			color = colorGreen
+		}
+		attachments = append(attachments, attachment{
+			Text:     rendered,
+			Color:    color,
+			MrkdwnIn: []string{"text"},
+			Actions:  buildRelatedLinkActions(alerts[i]),
+		})
+	}
+
+	return attachments, nil
+}
+
+// buildRelatedLinkActions returns the "View Related Logs/Traces" action
+// buttons for an alert, or nil when no related-link annotations are present.
+func buildRelatedLinkActions(alert *types.Alert) []config.SlackAction {
+	var actions []config.SlackAction
+	if link := alert.Annotations[ruletypes.AnnotationRelatedLogs]; link != "" {
+		actions = append(actions, config.SlackAction{Type: "button", Text: "View Related Logs", URL: string(link)})
+	}
+	if link := alert.Annotations[ruletypes.AnnotationRelatedTraces]; link != "" {
+		actions = append(actions, config.SlackAction{Type: "button", Text: "View Related Traces", URL: string(link)})
+	}
+	return actions
+}
+
+// addFieldsAndActions populates fields and actions on the attachment from the Slack config.
+func (n *Notifier) addFieldsAndActions(att *attachment, tmplText func(string) string) {
+	numFields := len(n.conf.Fields)
+	if numFields > 0 {
+		fields := make([]config.SlackField, numFields)
+		for index, field := range n.conf.Fields {
+			var short bool
+			if field.Short != nil {
+				short = *field.Short
+			} else {
+				short = n.conf.ShortFields
+			}
+			fields[index] = config.SlackField{
+				Title: tmplText(field.Title),
+				Value: tmplText(field.Value),
+				Short: &short,
+			}
+		}
+		att.Fields = fields
+	}
+
+	numActions := len(n.conf.Actions)
+	if numActions > 0 {
+		actions := make([]config.SlackAction, numActions)
+		for index, action := range n.conf.Actions {
+			slackAction := config.SlackAction{
+				Type:  tmplText(action.Type),
+				Text:  tmplText(action.Text),
+				URL:   tmplText(action.URL),
+				Style: tmplText(action.Style),
+				Name:  tmplText(action.Name),
+				Value: tmplText(action.Value),
+			}
+
+			if action.ConfirmField != nil {
+				slackAction.ConfirmField = &config.SlackConfirmationField{
+					Title:       tmplText(action.ConfirmField.Title),
+					Text:        tmplText(action.ConfirmField.Text),
+					OkText:      tmplText(action.ConfirmField.OkText),
+					DismissText: tmplText(action.ConfirmField.DismissText),
+				}
+			}
+
+			actions[index] = slackAction
+		}
+		att.Actions = actions
+	}
+}
+
 // checkResponseError parses out the error message from Slack API response.
 func checkResponseError(resp *http.Response) (bool, error) {
 	body, err := io.ReadAll(resp.Body)

pkg/alertmanager/alertmanagernotify/slack/slack_test.go

@@ -17,6 +17,9 @@ import (
 	"testing"
 	"time"
 
+	"github.com/SigNoz/signoz/pkg/alertmanager/alertmanagertemplate"
+	"github.com/SigNoz/signoz/pkg/types/alertmanagertypes"
+	"github.com/SigNoz/signoz/pkg/types/ruletypes"
 	commoncfg "github.com/prometheus/common/config"
 	"github.com/prometheus/common/model"
 	"github.com/prometheus/common/promslog"
@@ -29,13 +32,19 @@ import (
 	"github.com/prometheus/alertmanager/types"
 )
 
+func newTestTemplater(tmpl *template.Template) alertmanagertypes.Templater {
+	return alertmanagertemplate.New(tmpl, slog.New(slog.DiscardHandler))
+}
+
 func TestSlackRetry(t *testing.T) {
+	tmpl := test.CreateTmpl(t)
 	notifier, err := New(
 		&config.SlackConfig{
 			HTTPConfig: &commoncfg.HTTPClientConfig{},
 		},
-		test.CreateTmpl(t),
+		tmpl,
 		promslog.NewNopLogger(),
+		newTestTemplater(tmpl),
 	)
 	require.NoError(t, err)
 
@@ -49,13 +58,15 @@ func TestSlackRedactedURL(t *testing.T) {
 	ctx, u, fn := test.GetContextWithCancelingURL()
 	defer fn()
 
+	tmpl := test.CreateTmpl(t)
 	notifier, err := New(
 		&config.SlackConfig{
 			APIURL:     &config.SecretURL{URL: u},
 			HTTPConfig: &commoncfg.HTTPClientConfig{},
 		},
-		test.CreateTmpl(t),
+		tmpl,
 		promslog.NewNopLogger(),
+		newTestTemplater(tmpl),
 	)
 	require.NoError(t, err)
 
@@ -71,13 +82,15 @@ func TestGettingSlackURLFromFile(t *testing.T) {
 	_, err = f.WriteString(u.String())
 	require.NoError(t, err, "writing to temp file failed")
 
+	tmpl := test.CreateTmpl(t)
 	notifier, err := New(
 		&config.SlackConfig{
 			APIURLFile: f.Name(),
 			HTTPConfig: &commoncfg.HTTPClientConfig{},
 		},
-		test.CreateTmpl(t),
+		tmpl,
 		promslog.NewNopLogger(),
+		newTestTemplater(tmpl),
 	)
 	require.NoError(t, err)
 
@@ -93,13 +106,15 @@ func TestTrimmingSlackURLFromFile(t *testing.T) {
 	_, err = f.WriteString(u.String() + "\n\n")
 	require.NoError(t, err, "writing to temp file failed")
 
+	tmpl := test.CreateTmpl(t)
 	notifier, err := New(
 		&config.SlackConfig{
 			APIURLFile: f.Name(),
 			HTTPConfig: &commoncfg.HTTPClientConfig{},
 		},
-		test.CreateTmpl(t),
+		tmpl,
 		promslog.NewNopLogger(),
+		newTestTemplater(tmpl),
 	)
 	require.NoError(t, err)
 
@@ -184,6 +199,7 @@ func TestNotifier_Notify_WithReason(t *testing.T) {
 	for _, tt := range tests {
 		t.Run(tt.name, func(t *testing.T) {
 			apiurl, _ := url.Parse("https://slack.com/post.Message")
+			tmpl := test.CreateTmpl(t)
 			notifier, err := New(
 				&config.SlackConfig{
 					NotifierConfig: config.NotifierConfig{},
@@ -191,8 +207,9 @@ func TestNotifier_Notify_WithReason(t *testing.T) {
 					APIURL:         &config.SecretURL{URL: apiurl},
 					Channel:        "channelname",
 				},
-				test.CreateTmpl(t),
+				tmpl,
 				promslog.NewNopLogger(),
+				newTestTemplater(tmpl),
 			)
 			require.NoError(t, err)
 
@@ -242,6 +259,7 @@ func TestSlackTimeout(t *testing.T) {
 	for name, tt := range tests {
 		t.Run(name, func(t *testing.T) {
 			u, _ := url.Parse("https://slack.com/post.Message")
+			tmpl := test.CreateTmpl(t)
 			notifier, err := New(
 				&config.SlackConfig{
 					NotifierConfig: config.NotifierConfig{},
@@ -250,8 +268,9 @@ func TestSlackTimeout(t *testing.T) {
 					Channel:        "channelname",
 					Timeout:        tt.timeout,
 				},
-				test.CreateTmpl(t),
+				tmpl,
 				promslog.NewNopLogger(),
+				newTestTemplater(tmpl),
 			)
 			require.NoError(t, err)
 			notifier.postJSONFunc = func(ctx context.Context, client *http.Client, url string, body io.Reader) (*http.Response, error) {
@@ -282,6 +301,225 @@ func TestSlackTimeout(t *testing.T) {
 	}
 }
 
+// setupTestContext creates a context with group key, receiver name, and group labels
+// required by the notification processor.
+func setupTestContext() context.Context {
+	ctx := context.Background()
+	ctx = notify.WithGroupKey(ctx, "test-group")
+	ctx = notify.WithReceiverName(ctx, "slack")
+	ctx = notify.WithGroupLabels(ctx, model.LabelSet{
+		"alertname": "TestAlert",
+		"severity":  "critical",
+	})
+	return ctx
+}
+
+func TestPrepareContent(t *testing.T) {
+	t.Run("default template uses go text template config for title and body", func(t *testing.T) {
+		// When alerts have no custom annotation templates (title_template / body_template),
+		tmpl := test.CreateTmpl(t)
+		templater := newTestTemplater(tmpl)
+		notifier := &Notifier{
+			conf: &config.SlackConfig{
+				Title:     `{{ .CommonLabels.alertname }} ({{ .Status | toUpper }})`,
+				Text:      `{{ range .Alerts }}Alert: {{ .Labels.alertname }} - severity {{ .Labels.severity }}{{ end }}`,
+				Color:     `{{ if eq .Status "firing" }}danger{{ else }}good{{ end }}`,
+				TitleLink: "https://alertmanager.signoz.com",
+			},
+			tmpl:      tmpl,
+			logger:    slog.New(slog.DiscardHandler),
+			templater: templater,
+		}
+
+		ctx := setupTestContext()
+		alerts := []*types.Alert{
+			{Alert: model.Alert{
+				Labels:   model.LabelSet{ruletypes.LabelAlertName: "HighCPU", ruletypes.LabelSeverityName: "critical"},
+				StartsAt: time.Now(),
+				EndsAt:   time.Now().Add(time.Hour),
+			}},
+		}
+
+		// Build tmplText the same way Notify does
+		var err error
+		data := notify.GetTemplateData(ctx, tmpl, alerts, slog.New(slog.DiscardHandler))
+		tmplText := notify.TmplText(tmpl, data, &err)
+
+		atts, attErr := notifier.prepareContent(ctx, alerts, tmplText)
+		require.NoError(t, attErr)
+		require.NoError(t, err)
+		require.Len(t, atts, 1)
+
+		require.Equal(t, "HighCPU (FIRING)", atts[0].Title)
+		require.Equal(t, "Alert: HighCPU - severity critical", atts[0].Text)
+		// Color is templated — firing alert should be "danger"
+		require.Equal(t, "danger", atts[0].Color)
+		// No BlockKit blocks for default template
+		require.Nil(t, atts[0].Blocks)
+		// Default markdownIn when config has none
+		require.Equal(t, []string{"fallback", "pretext", "text"}, atts[0].MrkdwnIn)
+	})
+
+	t.Run("custom template produces 1+N attachments with per-alert color", func(t *testing.T) {
+		// When alerts carry custom $variable annotation templates (title_template / body_template)
+		tmpl := test.CreateTmpl(t)
+		templater := newTestTemplater(tmpl)
+		notifier := &Notifier{
+			conf: &config.SlackConfig{
+				Title:     "default title fallback",
+				Text:      "default text fallback",
+				TitleLink: "https://alertmanager.signoz.com",
+			},
+			tmpl:      tmpl,
+			logger:    slog.New(slog.DiscardHandler),
+			templater: templater,
+		}
+		tmplText := func(s string) string { return s }
+
+		bodyTemplate := `## $rule.name
+
+**Service:** *$labels.service*
+**Instance:** *$labels.instance*
+**Region:** *$labels.region*
+**Method:** *$labels.http_method*
+
+---
+
+| Metric | Value |
+|--------|-------|
+| **Current** | *$value* |
+| **Threshold** | *$threshold.value* |
+
+**Status:** $alert.status | **Severity:** $labels.severity`
+		titleTemplate := "[$alert.status] $rule.name — $labels.service"
+
+		ctx := setupTestContext()
+		firingAlert := &types.Alert{
+			Alert: model.Alert{
+				Labels:   model.LabelSet{ruletypes.LabelAlertName: "HighCPU", ruletypes.LabelSeverityName: "critical", "service": "api-server", "instance": "i-0abc123", "region": "us-east-1", "http_method": "GET"},
+				StartsAt: time.Now(),
+				EndsAt:   time.Now().Add(time.Hour),
+				Annotations: model.LabelSet{
+					ruletypes.AnnotationTitleTemplate: model.LabelValue(titleTemplate),
+					ruletypes.AnnotationBodyTemplate:  model.LabelValue(bodyTemplate),
+					"value":                           "100",
+					"threshold.value":                 "200",
+				},
+			},
+		}
+		resolvedAlert := &types.Alert{
+			Alert: model.Alert{
+				Labels:   model.LabelSet{ruletypes.LabelAlertName: "HighCPU", ruletypes.LabelSeverityName: "critical", "service": "api-server", "instance": "i-0abc123", "region": "us-east-1", "http_method": "GET"},
+				StartsAt: time.Now().Add(-2 * time.Hour),
+				EndsAt:   time.Now().Add(-time.Hour),
+				Annotations: model.LabelSet{
+					ruletypes.AnnotationTitleTemplate: model.LabelValue(titleTemplate),
+					ruletypes.AnnotationBodyTemplate:  model.LabelValue(bodyTemplate),
+					"value":                           "50",
+					"threshold.value":                 "200",
+				},
+			},
+		}
+
+		atts, err := notifier.prepareContent(ctx, []*types.Alert{firingAlert, resolvedAlert}, tmplText)
+		require.NoError(t, err)
+
+		// 1 title attachment + 2 body attachments (one per alert)
+		require.Len(t, atts, 3)
+
+		// First attachment: title-only, no color, no blocks
+		require.Equal(t, "[firing] HighCPU — api-server", atts[0].Title)
+		require.Empty(t, atts[0].Color)
+		require.Nil(t, atts[0].Blocks)
+		require.Equal(t, "https://alertmanager.signoz.com", atts[0].TitleLink)
+
+		expectedFiringBody := "*HighCPU*\n\n" +
+			"*Service:* _api-server_\n*Instance:* _i-0abc123_\n*Region:* _us-east-1_\n*Method:* _GET_\n\n" +
+			"---\n\n" +
+			"```\nMetric    | Value\n----------|------\nCurrent   | 100  \nThreshold | 200  \n```\n\n" +
+			"*Status:* firing | *Severity:* critical\n\n"
+
+		expectedResolvedBody := "*HighCPU*\n\n" +
+			"*Service:* _api-server_\n*Instance:* _i-0abc123_\n*Region:* _us-east-1_\n*Method:* _GET_\n\n" +
+			"---\n\n" +
+			"```\nMetric    | Value\n----------|------\nCurrent   | 50   \nThreshold | 200  \n```\n\n" +
+			"*Status:* resolved | *Severity:* critical\n\n"
+
+		// Second attachment: firing alert body rendered as slack mrkdwn text, red color
+		require.Nil(t, atts[1].Blocks)
+		require.Equal(t, "#FF0000", atts[1].Color)
+		require.Equal(t, []string{"text"}, atts[1].MrkdwnIn)
+		require.Equal(t, expectedFiringBody, atts[1].Text)
+
+		// Third attachment: resolved alert body rendered as slack mrkdwn text, green color
+		require.Nil(t, atts[2].Blocks)
+		require.Equal(t, "#00FF00", atts[2].Color)
+		require.Equal(t, []string{"text"}, atts[2].MrkdwnIn)
+		require.Equal(t, expectedResolvedBody, atts[2].Text)
+	})
+
+	t.Run("default template with fields and actions", func(t *testing.T) {
+		// Verifies that addFieldsAndActions (called from Notify after prepareContent)
+		// correctly populates fields and actions on the attachment from config.
+		tmpl := test.CreateTmpl(t)
+		templater := newTestTemplater(tmpl)
+		short := true
+		notifier := &Notifier{
+			conf: &config.SlackConfig{
+				Title: `{{ .CommonLabels.alertname }}`,
+				Text:  "alert text",
+				Color: "warning",
+				Fields: []*config.SlackField{
+					{Title: "Severity", Value: "critical", Short: &short},
+					{Title: "Service", Value: "api-server", Short: &short},
+				},
+				Actions: []*config.SlackAction{
+					{Type: "button", Text: "View Alert", URL: "https://alertmanager.signoz.com"},
+				},
+				TitleLink: "https://alertmanager.signoz.com",
+			},
+			tmpl:      tmpl,
+			logger:    slog.New(slog.DiscardHandler),
+			templater: templater,
+		}
+		tmplText := func(s string) string { return s }
+
+		ctx := setupTestContext()
+		alerts := []*types.Alert{
+			{Alert: model.Alert{
+				Labels:   model.LabelSet{ruletypes.LabelAlertName: "TestAlert"},
+				StartsAt: time.Now(),
+				EndsAt:   time.Now().Add(time.Hour),
+			}},
+		}
+		atts, err := notifier.prepareContent(ctx, alerts, tmplText)
+		require.NoError(t, err)
+		require.Len(t, atts, 1)
+
+		// prepareContent does not populate fields/actions — that's done by
+		// addFieldsAndActions which is called from Notify.
+		require.Nil(t, atts[0].Fields)
+		require.Nil(t, atts[0].Actions)
+
+		// Simulate what Notify does after prepareContent
+		notifier.addFieldsAndActions(&atts[0], tmplText)
+
+		// Verify fields
+		require.Len(t, atts[0].Fields, 2)
+		require.Equal(t, "Severity", atts[0].Fields[0].Title)
+		require.Equal(t, "critical", atts[0].Fields[0].Value)
+		require.True(t, *atts[0].Fields[0].Short)
+		require.Equal(t, "Service", atts[0].Fields[1].Title)
+		require.Equal(t, "api-server", atts[0].Fields[1].Value)
+
+		// Verify actions
+		require.Len(t, atts[0].Actions, 1)
+		require.Equal(t, "button", atts[0].Actions[0].Type)
+		require.Equal(t, "View Alert", atts[0].Actions[0].Text)
+		require.Equal(t, "https://alertmanager.signoz.com", atts[0].Actions[0].URL)
+	})
+}
+
 func TestSlackMessageField(t *testing.T) {
 	// 1. Setup a fake Slack server
 	server := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
@@ -329,7 +567,7 @@ func TestSlackMessageField(t *testing.T) {
 	tmpl.ExternalURL = u
 
 	logger := slog.New(slog.DiscardHandler)
-	notifier, err := New(conf, tmpl, logger)
+	notifier, err := New(conf, tmpl, logger, newTestTemplater(tmpl))
 	if err != nil {
 		t.Fatal(err)
 	}

pkg/alertmanager/alertmanagernotify/webhook/webhook.go

@@ -14,6 +14,7 @@ import (
 	"strings"
 
 	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/types/alertmanagertypes"
 	commoncfg "github.com/prometheus/common/config"
 
 	"github.com/prometheus/alertmanager/config"
@@ -28,15 +29,16 @@ const (
 
 // Notifier implements a Notifier for generic webhooks.
 type Notifier struct {
-	conf    *config.WebhookConfig
-	tmpl    *template.Template
-	logger  *slog.Logger
-	client  *http.Client
-	retrier *notify.Retrier
+	conf      *config.WebhookConfig
+	tmpl      *template.Template
+	logger    *slog.Logger
+	client    *http.Client
+	retrier   *notify.Retrier
+	templater alertmanagertypes.Templater
 }
 
 // New returns a new Webhook.
-func New(conf *config.WebhookConfig, t *template.Template, l *slog.Logger, httpOpts ...commoncfg.HTTPClientOption) (*Notifier, error) {
+func New(conf *config.WebhookConfig, t *template.Template, l *slog.Logger, templater alertmanagertypes.Templater, httpOpts ...commoncfg.HTTPClientOption) (*Notifier, error) {
 	client, err := notify.NewClientWithTracing(*conf.HTTPConfig, Integration, httpOpts...)
 	if err != nil {
 		return nil, err
@@ -48,7 +50,8 @@ func New(conf *config.WebhookConfig, t *template.Template, l *slog.Logger, httpO
 		client: client,
 		// Webhooks are assumed to respond with 2xx response codes on a successful
 		// request and 5xx response codes are assumed to be recoverable.
-		retrier: &notify.Retrier{},
+		retrier:   &notify.Retrier{},
+		templater: templater,
 	}, nil
 }
 

pkg/alertmanager/alertmanagernotify/webhook/webhook_test.go

@@ -9,6 +9,7 @@ import (
 	"context"
 	"fmt"
 	"io"
+	"log/slog"
 	"net/http"
 	"net/http/httptest"
 	"os"
@@ -20,6 +21,7 @@ import (
 	"github.com/prometheus/common/promslog"
 	"github.com/stretchr/testify/require"
 
+	"github.com/SigNoz/signoz/pkg/alertmanager/alertmanagertemplate"
 	"github.com/prometheus/alertmanager/config"
 	"github.com/prometheus/alertmanager/notify"
 	"github.com/prometheus/alertmanager/notify/test"
@@ -27,13 +29,15 @@ import (
 )
 
 func TestWebhookRetry(t *testing.T) {
+	tmpl := test.CreateTmpl(t)
 	notifier, err := New(
 		&config.WebhookConfig{
 			URL:        config.SecretTemplateURL("http://example.com"),
 			HTTPConfig: &commoncfg.HTTPClientConfig{},
 		},
-		test.CreateTmpl(t),
+		tmpl,
 		promslog.NewNopLogger(),
+		alertmanagertemplate.New(tmpl, slog.Default()),
 	)
 	if err != nil {
 		require.NoError(t, err)
@@ -96,13 +100,16 @@ func TestWebhookRedactedURL(t *testing.T) {
 	defer fn()
 
 	secret := "secret"
+	tmpl := test.CreateTmpl(t)
+	templater := alertmanagertemplate.New(tmpl, slog.Default())
 	notifier, err := New(
 		&config.WebhookConfig{
 			URL:        config.SecretTemplateURL(u.String()),
 			HTTPConfig: &commoncfg.HTTPClientConfig{},
 		},
-		test.CreateTmpl(t),
+		tmpl,
 		promslog.NewNopLogger(),
+		templater,
 	)
 	require.NoError(t, err)
 
@@ -118,13 +125,15 @@ func TestWebhookReadingURLFromFile(t *testing.T) {
 	_, err = f.WriteString(u.String() + "\n")
 	require.NoError(t, err, "writing to temp file failed")
 
+	tmpl := test.CreateTmpl(t)
 	notifier, err := New(
 		&config.WebhookConfig{
 			URLFile:    f.Name(),
 			HTTPConfig: &commoncfg.HTTPClientConfig{},
 		},
-		test.CreateTmpl(t),
+		tmpl,
 		promslog.NewNopLogger(),
+		alertmanagertemplate.New(tmpl, slog.Default()),
 	)
 	require.NoError(t, err)
 
@@ -178,13 +187,15 @@ func TestWebhookURLTemplating(t *testing.T) {
 		t.Run(tc.name, func(t *testing.T) {
 			calledURL = "" // Reset for each test
 
+			tmpl := test.CreateTmpl(t)
 			notifier, err := New(
 				&config.WebhookConfig{
 					URL:        config.SecretTemplateURL(tc.url),
 					HTTPConfig: &commoncfg.HTTPClientConfig{},
 				},
-				test.CreateTmpl(t),
+				tmpl,
 				promslog.NewNopLogger(),
+				alertmanagertemplate.New(tmpl, slog.Default()),
 			)
 			require.NoError(t, err)
 

pkg/alertmanager/alertmanagerserver/config.go

@@ -28,6 +28,13 @@ type Config struct {
 
 	// Configuration for the notification log.
 	NFLog NFLogConfig `mapstructure:"nflog"`
+
+	// Templates is the list of globs from which SigNoz's alertmanager notification
+	// templates are loaded (e.g. the email.signoz.html layout). This mirrors the
+	// upstream alertmanager `templates` config option (https://github.com/prometheus/alertmanager/blob/3b06b97af4d146e141af92885a185891eb79a5b0/config/config.go#L412).
+	// The upstream default templates (default.tmpl, email.tmpl) are always loaded
+	// from the embedded alertmanager assets, so only SigNoz's own templates are listed here.
+	Templates []string `mapstructure:"templates"`
 }
 
 type AlertsConfig struct {
@@ -100,5 +107,6 @@ func NewConfig() Config {
 			MaintenanceInterval: 15 * time.Minute,
 			Retention:           120 * time.Hour,
 		},
+		Templates: []string{"/root/templates/alertmanager/*.gotmpl"},
 	}
 }

pkg/alertmanager/alertmanagerserver/maintenance_muter.go

@@ -42,7 +42,14 @@ func (m *MaintenanceMuter) Mutes(ctx context.Context, lset model.LabelSet) bool
 	}
 	now := time.Now()
 	for _, mw := range m.getMaintenances(ctx) {
-		if mw.ShouldSkip(ruleID, now) {
+		skip, err := mw.ShouldSkip(ruleID, now, lset)
+		if err != nil {
+			m.logger.ErrorContext(ctx, "failed to test maintenance window skip condition",
+				slog.String("maintenance_id", mw.ID.StringValue()),
+				slog.String("scope", mw.Scope),
+				slog.Any("error", err),
+			)
+		} else if skip {
 			return true
 		}
 	}
@@ -61,7 +68,14 @@ func (m *MaintenanceMuter) MutedBy(ctx context.Context, lset model.LabelSet) []s
 	var ids []string
 	now := time.Now()
 	for _, mw := range m.getMaintenances(ctx) {
-		if mw.ShouldSkip(ruleID, now) {
+		skip, err := mw.ShouldSkip(ruleID, now, lset)
+		if err != nil {
+			m.logger.ErrorContext(ctx, "failed to test maintenance window skip condition",
+				slog.String("maintenance_id", mw.ID.StringValue()),
+				slog.String("scope", mw.Scope),
+				slog.Any("error", err),
+			)
+		} else if skip {
 			ids = append(ids, mw.ID.String())
 		}
 	}

pkg/alertmanager/alertmanagerserver/server.go

@@ -10,6 +10,7 @@ import (
 	"github.com/prometheus/alertmanager/types"
 	"golang.org/x/sync/errgroup"
 
+	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/prometheus/alertmanager/dispatch"
 	"github.com/prometheus/alertmanager/featurecontrol"
 	"github.com/prometheus/alertmanager/inhibit"
@@ -23,8 +24,8 @@ import (
 	"github.com/prometheus/common/model"
 
 	"github.com/SigNoz/signoz/pkg/alertmanager/alertmanagernotify"
+	"github.com/SigNoz/signoz/pkg/alertmanager/alertmanagertemplate"
 	"github.com/SigNoz/signoz/pkg/alertmanager/nfmanager"
-	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/types/alertmanagertypes"
 )
 
@@ -65,6 +66,7 @@ type Server struct {
 	muter               *MaintenanceMuter
 	marker              *types.MemMarker
 	tmpl                *template.Template
+	templater           alertmanagertypes.Templater
 	wg                  sync.WaitGroup
 	stopc               chan struct{}
 	notificationManager nfmanager.NotificationManager
@@ -242,13 +244,21 @@ func (server *Server) SetConfig(ctx context.Context, alertmanagerConfig *alertma
 	config := alertmanagerConfig.AlertmanagerConfig()
 
 	var err error
-	server.tmpl, err = alertmanagertypes.FromGlobs(config.Templates)
+	// Load SigNoz's alertmanager notification templates from the configured
+	// globs. The upstream default templates (default.tmpl, email.tmpl) are
+	// always loaded from the embedded alertmanager assets inside FromGlobs, so
+	// only SigNoz's own templates (e.g. the email.signoz.html layout) are listed
+	// here. The upstream config.Templates field is not used: SigNoz never
+	// populates it (there is no per-org template configuration).
+	server.tmpl, err = alertmanagertypes.FromGlobs(server.srvConfig.Templates)
 	if err != nil {
 		return err
 	}
 
 	server.tmpl.ExternalURL = server.srvConfig.ExternalURL
 
+	server.templater = alertmanagertemplate.New(server.tmpl, server.logger)
+
 	// Build the routing tree and record which receivers are used.
 	routes := dispatch.NewRoute(config.Route, nil)
 	activeReceivers := make(map[string]struct{})
@@ -265,7 +275,7 @@ func (server *Server) SetConfig(ctx context.Context, alertmanagerConfig *alertma
 			server.logger.InfoContext(ctx, "skipping creation of receiver not referenced by any route", slog.String("receiver", rcv.Name))
 			continue
 		}
-		integrations, err := alertmanagernotify.NewReceiverIntegrations(rcv, server.tmpl, server.logger)
+		integrations, err := alertmanagernotify.NewReceiverIntegrations(rcv, server.tmpl, server.logger, server.templater)
 		if err != nil {
 			return err
 		}
@@ -342,7 +352,7 @@ func (server *Server) SetConfig(ctx context.Context, alertmanagerConfig *alertma
 
 func (server *Server) TestReceiver(ctx context.Context, receiver alertmanagertypes.Receiver) error {
 	testAlert := alertmanagertypes.NewTestAlert(receiver, time.Now(), time.Now())
-	return alertmanagertypes.TestReceiver(ctx, receiver, alertmanagernotify.NewReceiverIntegrations, server.alertmanagerConfig, server.tmpl, server.logger, testAlert.Labels, testAlert)
+	return alertmanagertypes.TestReceiver(ctx, receiver, alertmanagernotify.NewReceiverIntegrations, server.alertmanagerConfig, server.tmpl, server.logger, server.templater, testAlert.Labels, testAlert)
 }
 
 func (server *Server) TestAlert(ctx context.Context, receiversMap map[*alertmanagertypes.PostableAlert][]string, config *alertmanagertypes.NotificationConfig) error {
@@ -425,6 +435,7 @@ func (server *Server) TestAlert(ctx context.Context, receiversMap map[*alertmana
 					server.alertmanagerConfig,
 					server.tmpl,
 					server.logger,
+					server.templater,
 					group.groupLabels,
 					group.alerts...,
 				)

pkg/alertmanager/alertmanagerserver/server_e2e_test.go

@@ -41,7 +41,7 @@ func TestEndToEndAlertManagerFlow(t *testing.T) {
 			Identifiable: types.Identifiable{
 				ID: valuer.GenerateUUID(),
 			},
-			Expression:     `ruleId == "high-cpu-usage" && severity == "critical"`,
+			Expression:     `ruleId = "high-cpu-usage" AND severity = "critical"`,
 			ExpressionKind: alertmanagertypes.RuleBasedExpression,
 			Name:           "high-cpu-usage",
 			Description:    "High CPU critical alerts to webhook",
@@ -53,7 +53,7 @@ func TestEndToEndAlertManagerFlow(t *testing.T) {
 			Identifiable: types.Identifiable{
 				ID: valuer.GenerateUUID(),
 			},
-			Expression:     `ruleId == "high-cpu-usage" && severity == "warning"`,
+			Expression:     `ruleId = "high-cpu-usage" AND severity = "warning"`,
 			ExpressionKind: alertmanagertypes.RuleBasedExpression,
 			Name:           "high-cpu-usage",
 			Description:    "High CPU warning alerts to webhook",
@@ -87,18 +87,25 @@ func TestEndToEndAlertManagerFlow(t *testing.T) {
 	err = notificationManager.SetNotificationConfig(orgID, "high-cpu-usage", &notifConfig)
 	require.NoError(t, err)
 
-	mwID := valuer.GenerateUUID()
+	activeSchedule := &alertmanagertypes.Schedule{
+		Timezone:  "UTC",
+		StartTime: time.Now().Add(-time.Hour),
+		EndTime:   time.Now().Add(time.Hour),
+	}
+	// mwRuleIDAndScope: only critical high-cpu-usage alerts.
+	mwRuleIDAndScope := valuer.GenerateUUID()
+	// mwRuleIDOnly: all high-cpu-usage alerts regardless of severity.
+	mwRuleIDOnly := valuer.GenerateUUID()
+	// mwScopeOnly: all critical alerts regardless of rule ID.
+	mwScopeOnly := valuer.GenerateUUID()
+
 	maintenanceStore := alertmanagertypestest.NewMockMaintenanceStore(t)
 	maintenanceStore.On("ListPlannedMaintenance", mock.Anything, orgID).Return(
-		[]*alertmanagertypes.PlannedMaintenance{{
-			ID: mwID,
-			Schedule: &alertmanagertypes.Schedule{
-				Timezone:  "UTC",
-				StartTime: time.Now().Add(-time.Hour),
-				EndTime:   time.Now().Add(time.Hour),
-			},
-			RuleIDs: []string{"high-cpu-usage"},
-		}}, nil,
+		[]*alertmanagertypes.PlannedMaintenance{
+			{ID: mwRuleIDAndScope, Schedule: activeSchedule, RuleIDs: []string{"high-cpu-usage"}, Scope: `severity = "critical"`},
+			{ID: mwRuleIDOnly, Schedule: activeSchedule, RuleIDs: []string{"high-cpu-usage"}},
+			{ID: mwScopeOnly, Schedule: activeSchedule, Scope: `severity = "critical"`},
+		}, nil,
 	)
 
 	srvCfg := NewConfig()
@@ -249,18 +256,42 @@ func TestEndToEndAlertManagerFlow(t *testing.T) {
 		require.Equal(t, "{__receiver__=\"webhook\"}:{cluster=\"prod-cluster\", instance=\"server-03\", ruleId=\"high-cpu-usage\"}", alertGroups[2].GroupKey)
 	})
 
-	t.Run("verify_muting", func(t *testing.T) {
-		req, err := http.NewRequest(http.MethodGet, "/alerts", nil)
-		require.NoError(t, err)
-		params, err := alertmanagertypes.NewGettableAlertsParams(req)
-		require.NoError(t, err)
-		alerts, err := server.GetAlerts(ctx, params)
-		require.NoError(t, err)
+	req, err := http.NewRequest(http.MethodGet, "/alerts", nil)
+	require.NoError(t, err)
+	params, err := alertmanagertypes.NewGettableAlertsParams(req)
+	require.NoError(t, err)
+	alerts, err := server.GetAlerts(ctx, params)
+	require.NoError(t, err)
+
+	t.Run("verify_muting_ruleid_and_scope", func(t *testing.T) {
+		// Window with ruleID + scope mutes only alerts matching both.
+		for _, alert := range alerts {
+			if alert.Labels["ruleId"] == "high-cpu-usage" && alert.Labels["severity"] == "critical" {
+				require.Contains(t, alert.Status.MutedBy, mwRuleIDAndScope.String())
+			} else {
+				require.NotContains(t, alert.Status.MutedBy, mwRuleIDAndScope.String())
+			}
+		}
+	})
+
+	t.Run("verify_muting_ruleid_only", func(t *testing.T) {
+		// Window with ruleID but no scope mutes all severities for that rule.
 		for _, alert := range alerts {
 			if alert.Labels["ruleId"] == "high-cpu-usage" {
-				require.Equal(t, []string{mwID.String()}, alert.Status.MutedBy)
+				require.Contains(t, alert.Status.MutedBy, mwRuleIDOnly.String())
 			} else {
-				require.Empty(t, alert.Status.MutedBy)
+				require.NotContains(t, alert.Status.MutedBy, mwRuleIDOnly.String())
+			}
+		}
+	})
+
+	t.Run("verify_muting_scope_only", func(t *testing.T) {
+		// Window with scope but no ruleIDs mutes all critical alerts regardless of rule.
+		for _, alert := range alerts {
+			if alert.Labels["severity"] == "critical" {
+				require.Contains(t, alert.Status.MutedBy, mwScopeOnly.String())
+			} else {
+				require.NotContains(t, alert.Status.MutedBy, mwScopeOnly.String())
 			}
 		}
 	})

pkg/alertmanager/alertmanagerstore/sqlalertmanagerstore/maintenance.go

@@ -89,6 +89,7 @@ func (r *maintenance) CreatePlannedMaintenance(ctx context.Context, maintenance
 		Description: maintenance.Description,
 		Schedule:    maintenance.Schedule,
 		OrgID:       claims.OrgID,
+		Scope:       maintenance.Scope,
 	}
 
 	maintenanceRules := make([]*alertmanagertypes.StorablePlannedMaintenanceRule, 0)
@@ -123,7 +124,6 @@ func (r *maintenance) CreatePlannedMaintenance(ctx context.Context, maintenance
 				NewInsert().
 				Model(&maintenanceRules).
 				Exec(ctx)
-
 			if err != nil {
 				return err
 			}
@@ -141,6 +141,7 @@ func (r *maintenance) CreatePlannedMaintenance(ctx context.Context, maintenance
 		Description: storablePlannedMaintenance.Description,
 		Schedule:    storablePlannedMaintenance.Schedule,
 		RuleIDs:     maintenance.AlertIds,
+		Scope:       maintenance.Scope,
 		CreatedAt:   storablePlannedMaintenance.CreatedAt,
 		CreatedBy:   storablePlannedMaintenance.CreatedBy,
 		UpdatedAt:   storablePlannedMaintenance.UpdatedAt,
@@ -189,6 +190,7 @@ func (r *maintenance) UpdatePlannedMaintenance(ctx context.Context, maintenance
 		Description: maintenance.Description,
 		Schedule:    maintenance.Schedule,
 		OrgID:       claims.OrgID,
+		Scope:       maintenance.Scope,
 	}
 
 	storablePlannedMaintenanceRules := make([]*alertmanagertypes.StorablePlannedMaintenanceRule, 0)
@@ -224,7 +226,6 @@ func (r *maintenance) UpdatePlannedMaintenance(ctx context.Context, maintenance
 			Model(new(alertmanagertypes.StorablePlannedMaintenanceRule)).
 			Where("planned_maintenance_id = ?", storablePlannedMaintenance.ID.StringValue()).
 			Exec(ctx)
-
 		if err != nil {
 			return err
 		}
@@ -241,7 +242,6 @@ func (r *maintenance) UpdatePlannedMaintenance(ctx context.Context, maintenance
 		}
 
 		return nil
-
 	})
 	if err != nil {
 		return err

pkg/alertmanager/alertmanagertemplate/alertmanagertemplate.go

@@ -15,13 +15,6 @@ import (
 	"github.com/prometheus/common/model"
 )
 
-// Templater expands user-authored title and body templates against a group
-// of alerts and returns channel-ready strings along with the aggregate data
-// a caller might reuse (e.g. to render an email layout around the body).
-type Templater interface {
-	Expand(ctx context.Context, req alertmanagertypes.ExpandRequest, alerts []*types.Alert) (*alertmanagertypes.ExpandResult, error)
-}
-
 type templater struct {
 	tmpl   *template.Template
 	logger *slog.Logger
@@ -29,7 +22,7 @@ type templater struct {
 
 // New returns a Templater bound to the given Prometheus alertmanager
 // template and logger.
-func New(tmpl *template.Template, logger *slog.Logger) Templater {
+func New(tmpl *template.Template, logger *slog.Logger) alertmanagertypes.Templater {
 	return &templater{tmpl: tmpl, logger: logger}
 }
 
@@ -137,6 +130,9 @@ func (at *templater) expandTitle(
 }
 
 // expandBody expands the body template for each individual alert. Returns nil if the template is empty.
+// Non-nil results are positionally aligned with ntd.Alerts: sb[i] corresponds to alerts[i], and
+// entries for alerts whose template expands to empty are kept as "" so callers can index per-alert
+// metadata (related links, firing/resolved color) by the same index.
 func (at *templater) expandBody(
 	bodyTemplate string,
 	ntd *alertmanagertypes.NotificationTemplateData,
@@ -144,7 +140,7 @@ func (at *templater) expandBody(
 	if bodyTemplate == "" {
 		return nil, nil, nil
 	}
-	var sb []string
+	sb := make([]string, len(ntd.Alerts))
 	missingVars := make(map[string]bool)
 	for i := range ntd.Alerts {
 		processRes, err := preProcessTemplateAndData(bodyTemplate, &ntd.Alerts[i])
@@ -155,13 +151,10 @@ func (at *templater) expandBody(
 		if err != nil {
 			return nil, nil, errors.NewInvalidInputf(errors.CodeInvalidInput, "failed to execute custom body template: %s", err.Error())
 		}
-		// add unknown variables and templated text to the result
 		for k := range processRes.UnknownVars {
 			missingVars[k] = true
 		}
-		if strings.TrimSpace(part) != "" {
-			sb = append(sb, strings.TrimSpace(part))
-		}
+		sb[i] = strings.TrimSpace(part)
 	}
 	return sb, missingVars, nil
 }
@@ -189,17 +182,20 @@ func (at *templater) buildNotificationTemplateData(
 		externalURL = at.tmpl.ExternalURL.String()
 	}
 
-	commonAnnotations := extractCommonKV(alerts, func(a *types.Alert) model.LabelSet { return a.Annotations })
+	// Raw (including private `_*`) kv first so buildRuleInfo can read the
+	// private rule annotations. The filtered copies are what ends up
+	// on the template-visible surfaces.
+	rawCommonAnnotations := extractCommonKV(alerts, func(a *types.Alert) model.LabelSet { return a.Annotations })
 	commonLabels := extractCommonKV(alerts, func(a *types.Alert) model.LabelSet { return a.Labels })
 
 	// aggregate labels and annotations from all alerts
 	labels := aggregateKV(alerts, func(a *types.Alert) model.LabelSet { return a.Labels })
 	annotations := aggregateKV(alerts, func(a *types.Alert) model.LabelSet { return a.Annotations })
 
-	// Strip private annotations from surfaces visible to templates or
-	// notifications; the structured fields on AlertInfo/RuleInfo already hold
-	// anything a template needs from them.
-	commonAnnotations = alertmanagertypes.FilterPublicAnnotations(commonAnnotations)
+	// Strip private annotations from template-visible surfaces; the structured
+	// fields on AlertInfo/RuleInfo already hold anything a template needs from
+	// them.
+	commonAnnotations := alertmanagertypes.FilterPublicAnnotations(rawCommonAnnotations)
 	annotations = alertmanagertypes.FilterPublicAnnotations(annotations)
 
 	// build the alert data slice
@@ -233,7 +229,7 @@ func (at *templater) buildNotificationTemplateData(
 			TotalFiring:   firing,
 			TotalResolved: resolved,
 		},
-		Rule:              buildRuleInfo(commonLabels, commonAnnotations),
+		Rule:              buildRuleInfo(commonLabels, rawCommonAnnotations),
 		GroupLabels:       gl,
 		CommonLabels:      commonLabels,
 		CommonAnnotations: commonAnnotations,

pkg/alertmanager/alertmanagertemplate/alertmanagertemplate_test.go

@@ -19,7 +19,7 @@ import (
 
 // testSetup returns an AlertTemplater and a context pre-populated with group key,
 // receiver name, and group labels for use in tests.
-func testSetup(t *testing.T) (Templater, context.Context) {
+func testSetup(t *testing.T) (alertmanagertypes.Templater, context.Context) {
 	t.Helper()
 	tmpl := test.CreateTmpl(t)
 	ctx := context.Background()

pkg/alertmanager/nfmanager/rulebasednotification/provider.go

@@ -3,7 +3,6 @@ package rulebasednotification
 import (
 	"context"
 	"log/slog"
-	"strings"
 	"sync"
 
 	"github.com/SigNoz/signoz/pkg/alertmanager/nfmanager"
@@ -235,65 +234,13 @@ func (r *provider) Match(ctx context.Context, orgID string, ruleID string, set m
 	return matchedChannels, nil
 }
 
-// convertLabelSetToEnv converts a flat label set with dotted keys into a nested map structure for expr env.
-// when both a leaf and a deeper nested path exist (e.g. "foo" and "foo.bar"),
-// the nested structure takes precedence. That means we will replace an existing leaf at any
-// intermediate path with a map so we can materialize the deeper structure.
-// TODO(srikanthccv): we need a better solution to handle this, remove the following
-// when we update the expr to support dotted keys.
+// convertLabelSetToEnv delegates to alertmanagertypes.ConvertLabelSetToEnv and
+// logs when a key is a prefix of another (e.g. "foo" alongside "foo.bar").
 func (r *provider) convertLabelSetToEnv(ctx context.Context, labelSet model.LabelSet) map[string]interface{} {
-	env := make(map[string]interface{})
-
-	logForReview := false
-
-	for lk, lv := range labelSet {
-		key := strings.TrimSpace(string(lk))
-		value := string(lv)
-
-		if strings.Contains(key, ".") {
-			parts := strings.Split(key, ".")
-			current := env
-
-			for i, raw := range parts {
-				part := strings.TrimSpace(raw)
-
-				last := i == len(parts)-1
-				if last {
-					if _, isMap := current[part].(map[string]interface{}); isMap {
-						logForReview = true
-						// deeper structure already exists; do not overwrite.
-						break
-					}
-					current[part] = value
-					break
-				}
-
-				// ensure a map so we can keep descending.
-				if nextMap, ok := current[part].(map[string]interface{}); ok {
-					current = nextMap
-					continue
-				}
-
-				// if absent or a leaf, replace it with a map.
-				newMap := make(map[string]interface{})
-				current[part] = newMap
-				current = newMap
-			}
-			continue
-		}
-
-		// if a map already sits here (due to nested keys), keep the map (nested wins).
-		if _, isMap := env[key].(map[string]interface{}); isMap {
-			logForReview = true
-			continue
-		}
-		env[key] = value
-	}
-
-	if logForReview {
+	env, conflict := alertmanagertypes.ConvertLabelSetToEnv(labelSet)
+	if conflict {
 		r.settings.Logger().InfoContext(ctx, "found label set with conflicting prefix dotted keys", slog.Any("labels", labelSet))
 	}
-
 	return env
 }
 

pkg/alertmanager/nfmanager/rulebasednotification/provider_test.go

@@ -925,72 +925,3 @@ func TestProvider_CreateRoutes(t *testing.T) {
 		})
 	}
 }
-
-func TestConvertLabelSetToEnv(t *testing.T) {
-	tests := []struct {
-		name     string
-		labelSet model.LabelSet
-		expected map[string]interface{}
-	}{
-		{
-			name: "simple keys",
-			labelSet: model.LabelSet{
-				"key1": "value1",
-				"key2": "value2",
-			},
-			expected: map[string]interface{}{
-				"key1": "value1",
-				"key2": "value2",
-			},
-		},
-		{
-			name: "nested keys",
-			labelSet: model.LabelSet{
-				"foo.bar": "value1",
-				"foo.baz": "value2",
-			},
-			expected: map[string]interface{}{
-				"foo": map[string]interface{}{
-					"bar": "value1",
-					"baz": "value2",
-				},
-			},
-		},
-		{
-			name: "conflict - nested structure wins",
-			labelSet: model.LabelSet{
-				"foo.bar.baz": "deep",
-				"foo.bar":     "shallow",
-			},
-			expected: map[string]interface{}{
-				"foo": map[string]interface{}{
-					"bar": map[string]interface{}{
-						"baz": "deep",
-					},
-				},
-			},
-		},
-		{
-			name: "conflict - leaf value vs nested",
-			labelSet: model.LabelSet{
-				"foo.bar": "value",
-				"foo":     "should_be_ignored",
-			},
-			expected: map[string]interface{}{
-				"foo": map[string]interface{}{
-					"bar": "value",
-				},
-			},
-		},
-	}
-
-	provider := &provider{
-		settings: factory.NewScopedProviderSettings(createTestProviderSettings(), "provider_test"),
-	}
-	for _, tt := range tests {
-		t.Run(tt.name, func(t *testing.T) {
-			result := provider.convertLabelSetToEnv(context.Background(), tt.labelSet)
-			assert.Equal(t, tt.expected, result)
-		})
-	}
-}

pkg/config/envprovider/provider_test.go

@@ -2,6 +2,8 @@ package envprovider
 
 import (
 	"context"
+	"os"
+	"strings"
 	"testing"
 
 	"github.com/SigNoz/signoz/pkg/config"
@@ -9,7 +11,21 @@ import (
 	"github.com/stretchr/testify/require"
 )
 
+// clearSignozEnv unsets all existing SIGNOZ_* env vars for the duration of the test.
+func clearSignozEnv(t *testing.T) {
+	t.Helper()
+	for _, kv := range os.Environ() {
+		if strings.HasPrefix(kv, prefix) {
+			key := strings.SplitN(kv, "=", 2)[0]
+			orig, _ := os.LookupEnv(key)
+			os.Unsetenv(key)
+			t.Cleanup(func() { os.Setenv(key, orig) })
+		}
+	}
+}
+
 func TestGetWithStrings(t *testing.T) {
+	clearSignozEnv(t)
 	t.Setenv("SIGNOZ_K1_K2", "string")
 	t.Setenv("SIGNOZ_K3__K4", "string")
 	t.Setenv("SIGNOZ_K5__K6_K7__K8", "string")
@@ -31,6 +47,7 @@ func TestGetWithStrings(t *testing.T) {
 }
 
 func TestGetWithNoPrefix(t *testing.T) {
+	clearSignozEnv(t)
 	t.Setenv("K1_K2", "string")
 	t.Setenv("K3_K4", "string")
 	expected := map[string]any{}
@@ -43,6 +60,7 @@ func TestGetWithNoPrefix(t *testing.T) {
 }
 
 func TestGetWithGoTypes(t *testing.T) {
+	clearSignozEnv(t)
 	t.Setenv("SIGNOZ_BOOL", "true")
 	t.Setenv("SIGNOZ_STRING", "string")
 	t.Setenv("SIGNOZ_INT", "1")

pkg/emailing/config.go

@@ -65,7 +65,7 @@ func newConfig() factory.Config {
 	return &Config{
 		Enabled: false,
 		Templates: Templates{
-			Directory: "/root/templates",
+			Directory: "/root/templates/email",
 			Format: Format{
 				Header: Header{
 					Enabled: false,

pkg/flagger/registry.go

@@ -3,14 +3,15 @@ package flagger
 import "github.com/SigNoz/signoz/pkg/types/featuretypes"
 
 var (
-	FeatureUseSpanMetrics    = featuretypes.MustNewName("use_span_metrics")
-	FeatureKafkaSpanEval     = featuretypes.MustNewName("kafka_span_eval")
-	FeatureHideRootUser      = featuretypes.MustNewName("hide_root_user")
-	FeatureGetMetersFromZeus = featuretypes.MustNewName("get_meters_from_zeus")
-	FeaturePutMetersInZeus   = featuretypes.MustNewName("put_meters_in_zeus")
-	FeatureUseMeterReporter  = featuretypes.MustNewName("use_meter_reporter")
-	FeatureUseJSONBody            = featuretypes.MustNewName("use_json_body")
-	FeatureUseFineGrainedAuthz    = featuretypes.MustNewName("use_fine_grained_authz")
+	FeatureUseSpanMetrics      = featuretypes.MustNewName("use_span_metrics")
+	FeatureKafkaSpanEval       = featuretypes.MustNewName("kafka_span_eval")
+	FeatureHideRootUser        = featuretypes.MustNewName("hide_root_user")
+	FeatureGetMetersFromZeus   = featuretypes.MustNewName("get_meters_from_zeus")
+	FeaturePutMetersInZeus     = featuretypes.MustNewName("put_meters_in_zeus")
+	FeatureUseMeterReporter    = featuretypes.MustNewName("use_meter_reporter")
+	FeatureUseJSONBody         = featuretypes.MustNewName("use_json_body")
+	FeatureUseFineGrainedAuthz = featuretypes.MustNewName("use_fine_grained_authz")
+	FeatureUseDashboardV2      = featuretypes.MustNewName("use_dashboard_v2")
 )
 
 func MustNewRegistry() featuretypes.Registry {
@@ -79,6 +80,14 @@ func MustNewRegistry() featuretypes.Registry {
 			DefaultVariant: featuretypes.MustNewName("disabled"),
 			Variants:       featuretypes.NewBooleanVariants(),
 		},
+		&featuretypes.Feature{
+			Name:           FeatureUseDashboardV2,
+			Kind:           featuretypes.KindBoolean,
+			Stage:          featuretypes.StageExperimental,
+			Description:    "Controls whether dashboard v2 is enabled",
+			DefaultVariant: featuretypes.MustNewName("disabled"),
+			Variants:       featuretypes.NewBooleanVariants(),
+		},
 	)
 	if err != nil {
 		panic(err)

pkg/modules/user/impluser/setter.go

@@ -3,7 +3,6 @@ package impluser
 import (
 	"context"
 	"log/slog"
-	"slices"
 	"strings"
 	"time"
 
@@ -21,7 +20,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
 	"github.com/SigNoz/signoz/pkg/types/coretypes"
 	"github.com/SigNoz/signoz/pkg/types/emailtypes"
-	"github.com/SigNoz/signoz/pkg/types/integrationtypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 )
 
@@ -371,10 +369,6 @@ func (module *setter) DeleteUser(ctx context.Context, orgID valuer.UUID, id stri
 		return errors.WithAdditionalf(err, "cannot delete already deleted user")
 	}
 
-	if slices.Contains(integrationtypes.AllIntegrationUserEmails, integrationtypes.IntegrationUserEmail(user.Email.String())) {
-		return errors.New(errors.TypeForbidden, errors.CodeForbidden, "integration user cannot be deleted")
-	}
-
 	deleter, err := module.store.GetUser(ctx, valuer.MustNewUUID(deletedBy))
 	if err != nil {
 		return err

pkg/query-service/app/cloudintegrations/Readme.md

@@ -1,5 +0,0 @@
-# SigNoz Cloud Integrations
-
-Cloud integrations are unlike the rest of SigNoz integrations.
-They have a different UX and so require a different API.
-They will also be limited in number and are not expected to have community contributed implementations

pkg/query-service/app/cloudintegrations/accountsRepo.go

@@ -1,220 +0,0 @@
-package cloudintegrations
-
-import (
-	"context"
-	"database/sql"
-	"fmt"
-	"strings"
-	"time"
-
-	"github.com/SigNoz/signoz/pkg/query-service/model"
-	"github.com/SigNoz/signoz/pkg/sqlstore"
-	"github.com/SigNoz/signoz/pkg/types"
-	"github.com/SigNoz/signoz/pkg/types/integrationtypes"
-	"github.com/SigNoz/signoz/pkg/valuer"
-)
-
-type cloudProviderAccountsRepository interface {
-	listConnected(ctx context.Context, orgId string, provider string) ([]integrationtypes.CloudIntegration, *model.ApiError)
-
-	get(ctx context.Context, orgId string, provider string, id string) (*integrationtypes.CloudIntegration, *model.ApiError)
-
-	getConnectedCloudAccount(ctx context.Context, orgId string, provider string, accountID string) (*integrationtypes.CloudIntegration, *model.ApiError)
-
-	// Insert an account or update it by (cloudProvider, id)
-	// for specified non-empty fields
-	upsert(
-		ctx context.Context,
-		orgId string,
-		provider string,
-		id *string,
-		config *integrationtypes.AccountConfig,
-		accountId *string,
-		agentReport *integrationtypes.AgentReport,
-		removedAt *time.Time,
-	) (*integrationtypes.CloudIntegration, *model.ApiError)
-}
-
-func newCloudProviderAccountsRepository(store sqlstore.SQLStore) (
-	*cloudProviderAccountsSQLRepository, error,
-) {
-	return &cloudProviderAccountsSQLRepository{
-		store: store,
-	}, nil
-}
-
-type cloudProviderAccountsSQLRepository struct {
-	store sqlstore.SQLStore
-}
-
-func (r *cloudProviderAccountsSQLRepository) listConnected(
-	ctx context.Context, orgId string, cloudProvider string,
-) ([]integrationtypes.CloudIntegration, *model.ApiError) {
-	accounts := []integrationtypes.CloudIntegration{}
-
-	err := r.store.BunDB().NewSelect().
-		Model(&accounts).
-		Where("org_id = ?", orgId).
-		Where("provider = ?", cloudProvider).
-		Where("removed_at is NULL").
-		Where("account_id is not NULL").
-		Where("last_agent_report is not NULL").
-		Order("created_at").
-		Scan(ctx)
-
-	if err != nil {
-		return nil, model.InternalError(fmt.Errorf(
-			"could not query connected cloud accounts: %w", err,
-		))
-	}
-
-	return accounts, nil
-}
-
-func (r *cloudProviderAccountsSQLRepository) get(
-	ctx context.Context, orgId string, provider string, id string,
-) (*integrationtypes.CloudIntegration, *model.ApiError) {
-	var result integrationtypes.CloudIntegration
-
-	err := r.store.BunDB().NewSelect().
-		Model(&result).
-		Where("org_id = ?", orgId).
-		Where("provider = ?", provider).
-		Where("id = ?", id).
-		Scan(ctx)
-
-	if err == sql.ErrNoRows {
-		return nil, model.NotFoundError(fmt.Errorf(
-			"couldn't find account with Id %s", id,
-		))
-	} else if err != nil {
-		return nil, model.InternalError(fmt.Errorf(
-			"couldn't query cloud provider accounts: %w", err,
-		))
-	}
-
-	return &result, nil
-}
-
-func (r *cloudProviderAccountsSQLRepository) getConnectedCloudAccount(
-	ctx context.Context, orgId string, provider string, accountId string,
-) (*integrationtypes.CloudIntegration, *model.ApiError) {
-	var result integrationtypes.CloudIntegration
-
-	err := r.store.BunDB().NewSelect().
-		Model(&result).
-		Where("org_id = ?", orgId).
-		Where("provider = ?", provider).
-		Where("account_id = ?", accountId).
-		Where("last_agent_report is not NULL").
-		Where("removed_at is NULL").
-		Scan(ctx)
-
-	if err == sql.ErrNoRows {
-		return nil, model.NotFoundError(fmt.Errorf(
-			"couldn't find connected cloud account %s", accountId,
-		))
-	} else if err != nil {
-		return nil, model.InternalError(fmt.Errorf(
-			"couldn't query cloud provider accounts: %w", err,
-		))
-	}
-
-	return &result, nil
-}
-
-func (r *cloudProviderAccountsSQLRepository) upsert(
-	ctx context.Context,
-	orgId string,
-	provider string,
-	id *string,
-	config *integrationtypes.AccountConfig,
-	accountId *string,
-	agentReport *integrationtypes.AgentReport,
-	removedAt *time.Time,
-) (*integrationtypes.CloudIntegration, *model.ApiError) {
-	// Insert
-	if id == nil {
-		temp := valuer.GenerateUUID().StringValue()
-		id = &temp
-	}
-
-	// Prepare clause for setting values in `on conflict do update`
-	onConflictSetStmts := []string{}
-	setColStatement := func(col string) string {
-		return fmt.Sprintf("%s=excluded.%s", col, col)
-	}
-
-	if config != nil {
-		onConflictSetStmts = append(
-			onConflictSetStmts, setColStatement("config"),
-		)
-	}
-
-	if accountId != nil {
-		onConflictSetStmts = append(
-			onConflictSetStmts, setColStatement("account_id"),
-		)
-	}
-
-	if agentReport != nil {
-		onConflictSetStmts = append(
-			onConflictSetStmts, setColStatement("last_agent_report"),
-		)
-	}
-
-	if removedAt != nil {
-		onConflictSetStmts = append(
-			onConflictSetStmts, setColStatement("removed_at"),
-		)
-	}
-
-	// set updated_at to current timestamp if it's an upsert
-	onConflictSetStmts = append(
-		onConflictSetStmts, setColStatement("updated_at"),
-	)
-
-	onConflictClause := ""
-	if len(onConflictSetStmts) > 0 {
-		onConflictClause = fmt.Sprintf(
-			"conflict(id) do update SET\n%s",
-			strings.Join(onConflictSetStmts, ",\n"),
-		)
-	}
-
-	integration := integrationtypes.CloudIntegration{
-		OrgID:        orgId,
-		Provider:     provider,
-		Identifiable: types.Identifiable{ID: valuer.MustNewUUID(*id)},
-		TimeAuditable: types.TimeAuditable{
-			CreatedAt: time.Now(),
-			UpdatedAt: time.Now(),
-		},
-		Config:          config,
-		AccountID:       accountId,
-		LastAgentReport: agentReport,
-		RemovedAt:       removedAt,
-	}
-
-	_, dbErr := r.store.BunDB().NewInsert().
-		Model(&integration).
-		On(onConflictClause).
-		Exec(ctx)
-
-	if dbErr != nil {
-		// for now returning internal error even if there is a conflict,
-		// will be handled better in the future iteration
-		return nil, model.InternalError(fmt.Errorf(
-			"could not upsert cloud account record: %w", dbErr,
-		))
-	}
-
-	upsertedAccount, apiErr := r.get(ctx, orgId, provider, *id)
-	if apiErr != nil {
-		return nil, model.InternalError(fmt.Errorf(
-			"couldn't fetch upserted account by id: %w", apiErr.ToError(),
-		))
-	}
-
-	return upsertedAccount, nil
-}

pkg/query-service/app/cloudintegrations/constants.go

@@ -1,43 +0,0 @@
-package cloudintegrations
-
-import (
-	"github.com/SigNoz/signoz/pkg/errors"
-)
-
-var (
-	CodeInvalidCloudRegion    = errors.MustNewCode("invalid_cloud_region")
-	CodeMismatchCloudProvider = errors.MustNewCode("cloud_provider_mismatch")
-)
-
-// List of all valid cloud regions on Amazon Web Services
-var ValidAWSRegions = map[string]bool{
-	"af-south-1":     true, // Africa (Cape Town).
-	"ap-east-1":      true, // Asia Pacific (Hong Kong).
-	"ap-northeast-1": true, // Asia Pacific (Tokyo).
-	"ap-northeast-2": true, // Asia Pacific (Seoul).
-	"ap-northeast-3": true, // Asia Pacific (Osaka).
-	"ap-south-1":     true, // Asia Pacific (Mumbai).
-	"ap-south-2":     true, // Asia Pacific (Hyderabad).
-	"ap-southeast-1": true, // Asia Pacific (Singapore).
-	"ap-southeast-2": true, // Asia Pacific (Sydney).
-	"ap-southeast-3": true, // Asia Pacific (Jakarta).
-	"ap-southeast-4": true, // Asia Pacific (Melbourne).
-	"ca-central-1":   true, // Canada (Central).
-	"ca-west-1":      true, // Canada West (Calgary).
-	"eu-central-1":   true, // Europe (Frankfurt).
-	"eu-central-2":   true, // Europe (Zurich).
-	"eu-north-1":     true, // Europe (Stockholm).
-	"eu-south-1":     true, // Europe (Milan).
-	"eu-south-2":     true, // Europe (Spain).
-	"eu-west-1":      true, // Europe (Ireland).
-	"eu-west-2":      true, // Europe (London).
-	"eu-west-3":      true, // Europe (Paris).
-	"il-central-1":   true, // Israel (Tel Aviv).
-	"me-central-1":   true, // Middle East (UAE).
-	"me-south-1":     true, // Middle East (Bahrain).
-	"sa-east-1":      true, // South America (Sao Paulo).
-	"us-east-1":      true, // US East (N. Virginia).
-	"us-east-2":      true, // US East (Ohio).
-	"us-west-1":      true, // US West (N. California).
-	"us-west-2":      true, // US West (Oregon).
-}

pkg/query-service/app/cloudintegrations/controller.go

@@ -1,625 +0,0 @@
-package cloudintegrations
-
-import (
-	"context"
-	"fmt"
-	"net/url"
-	"slices"
-	"strings"
-	"time"
-
-	"github.com/SigNoz/signoz/pkg/errors"
-	"github.com/SigNoz/signoz/pkg/query-service/app/cloudintegrations/services"
-	"github.com/SigNoz/signoz/pkg/query-service/model"
-	"github.com/SigNoz/signoz/pkg/sqlstore"
-	"github.com/SigNoz/signoz/pkg/types"
-	"github.com/SigNoz/signoz/pkg/types/dashboardtypes"
-	"github.com/SigNoz/signoz/pkg/types/integrationtypes"
-	"github.com/SigNoz/signoz/pkg/valuer"
-	"golang.org/x/exp/maps"
-)
-
-var SupportedCloudProviders = []string{
-	"aws",
-}
-
-func validateCloudProviderName(name string) *model.ApiError {
-	if !slices.Contains(SupportedCloudProviders, name) {
-		return model.BadRequest(fmt.Errorf("invalid cloud provider: %s", name))
-	}
-	return nil
-}
-
-type Controller struct {
-	accountsRepo      cloudProviderAccountsRepository
-	serviceConfigRepo ServiceConfigDatabase
-}
-
-func NewController(sqlStore sqlstore.SQLStore) (*Controller, error) {
-	accountsRepo, err := newCloudProviderAccountsRepository(sqlStore)
-	if err != nil {
-		return nil, fmt.Errorf("couldn't create cloud provider accounts repo: %w", err)
-	}
-
-	serviceConfigRepo, err := newServiceConfigRepository(sqlStore)
-	if err != nil {
-		return nil, fmt.Errorf("couldn't create cloud provider service config repo: %w", err)
-	}
-
-	return &Controller{
-		accountsRepo:      accountsRepo,
-		serviceConfigRepo: serviceConfigRepo,
-	}, nil
-}
-
-type ConnectedAccountsListResponse struct {
-	Accounts []integrationtypes.Account `json:"accounts"`
-}
-
-func (c *Controller) ListConnectedAccounts(ctx context.Context, orgId string, cloudProvider string) (
-	*ConnectedAccountsListResponse, *model.ApiError,
-) {
-	if apiErr := validateCloudProviderName(cloudProvider); apiErr != nil {
-		return nil, apiErr
-	}
-
-	accountRecords, apiErr := c.accountsRepo.listConnected(ctx, orgId, cloudProvider)
-	if apiErr != nil {
-		return nil, model.WrapApiError(apiErr, "couldn't list cloud accounts")
-	}
-
-	connectedAccounts := []integrationtypes.Account{}
-	for _, a := range accountRecords {
-		connectedAccounts = append(connectedAccounts, a.Account())
-	}
-
-	return &ConnectedAccountsListResponse{
-		Accounts: connectedAccounts,
-	}, nil
-}
-
-type GenerateConnectionUrlRequest struct {
-	// Optional. To be specified for updates.
-	AccountId *string `json:"account_id,omitempty"`
-
-	AccountConfig integrationtypes.AccountConfig `json:"account_config"`
-
-	AgentConfig SigNozAgentConfig `json:"agent_config"`
-}
-
-type SigNozAgentConfig struct {
-	// The region in which SigNoz agent should be installed.
-	Region string `json:"region"`
-
-	IngestionUrl string `json:"ingestion_url"`
-	IngestionKey string `json:"ingestion_key"`
-	SigNozAPIUrl string `json:"signoz_api_url"`
-	SigNozAPIKey string `json:"signoz_api_key"`
-
-	Version string `json:"version,omitempty"`
-}
-
-type GenerateConnectionUrlResponse struct {
-	AccountId     string `json:"account_id"`
-	ConnectionUrl string `json:"connection_url"`
-}
-
-func (c *Controller) GenerateConnectionUrl(ctx context.Context, orgId string, cloudProvider string, req GenerateConnectionUrlRequest) (*GenerateConnectionUrlResponse, *model.ApiError) {
-	// Account connection with a simple connection URL may not be available for all providers.
-	if cloudProvider != "aws" {
-		return nil, model.BadRequest(fmt.Errorf("unsupported cloud provider: %s", cloudProvider))
-	}
-
-	account, apiErr := c.accountsRepo.upsert(
-		ctx, orgId, cloudProvider, req.AccountId, &req.AccountConfig, nil, nil, nil,
-	)
-	if apiErr != nil {
-		return nil, model.WrapApiError(apiErr, "couldn't upsert cloud account")
-	}
-
-	agentVersion := "v0.0.8"
-	if req.AgentConfig.Version != "" {
-		agentVersion = req.AgentConfig.Version
-	}
-
-	connectionUrl := fmt.Sprintf(
-		"https://%s.console.aws.amazon.com/cloudformation/home?region=%s#/stacks/quickcreate?",
-		req.AgentConfig.Region, req.AgentConfig.Region,
-	)
-
-	for qp, value := range map[string]string{
-		"param_SigNozIntegrationAgentVersion": agentVersion,
-		"param_SigNozApiUrl":                  req.AgentConfig.SigNozAPIUrl,
-		"param_SigNozApiKey":                  req.AgentConfig.SigNozAPIKey,
-		"param_SigNozAccountId":               account.ID.StringValue(),
-		"param_IngestionUrl":                  req.AgentConfig.IngestionUrl,
-		"param_IngestionKey":                  req.AgentConfig.IngestionKey,
-		"stackName":                           "signoz-integration",
-		"templateURL": fmt.Sprintf(
-			"https://signoz-integrations.s3.us-east-1.amazonaws.com/aws-quickcreate-template-%s.json",
-			agentVersion,
-		),
-	} {
-		connectionUrl += fmt.Sprintf("&%s=%s", qp, url.QueryEscape(value))
-	}
-
-	return &GenerateConnectionUrlResponse{
-		AccountId:     account.ID.StringValue(),
-		ConnectionUrl: connectionUrl,
-	}, nil
-}
-
-type AccountStatusResponse struct {
-	Id             string                         `json:"id"`
-	CloudAccountId *string                        `json:"cloud_account_id,omitempty"`
-	Status         integrationtypes.AccountStatus `json:"status"`
-}
-
-func (c *Controller) GetAccountStatus(ctx context.Context, orgId string, cloudProvider string, accountId string) (
-	*AccountStatusResponse, *model.ApiError,
-) {
-	if apiErr := validateCloudProviderName(cloudProvider); apiErr != nil {
-		return nil, apiErr
-	}
-
-	account, apiErr := c.accountsRepo.get(ctx, orgId, cloudProvider, accountId)
-	if apiErr != nil {
-		return nil, apiErr
-	}
-
-	resp := AccountStatusResponse{
-		Id:             account.ID.StringValue(),
-		CloudAccountId: account.AccountID,
-		Status:         account.Status(),
-	}
-
-	return &resp, nil
-}
-
-type AgentCheckInRequest struct {
-	ID        string `json:"account_id"`
-	AccountID string `json:"cloud_account_id"`
-	// Arbitrary cloud specific Agent data
-	Data map[string]any `json:"data,omitempty"`
-}
-
-type AgentCheckInResponse struct {
-	AccountId      string     `json:"account_id"`
-	CloudAccountId string     `json:"cloud_account_id"`
-	RemovedAt      *time.Time `json:"removed_at"`
-
-	IntegrationConfig IntegrationConfigForAgent `json:"integration_config"`
-}
-
-type IntegrationConfigForAgent struct {
-	EnabledRegions []string `json:"enabled_regions"`
-
-	TelemetryCollectionStrategy *CompiledCollectionStrategy `json:"telemetry,omitempty"`
-}
-
-func (c *Controller) CheckInAsAgent(ctx context.Context, orgId string, cloudProvider string, req AgentCheckInRequest) (*AgentCheckInResponse, error) {
-	if apiErr := validateCloudProviderName(cloudProvider); apiErr != nil {
-		return nil, apiErr
-	}
-
-	existingAccount, apiErr := c.accountsRepo.get(ctx, orgId, cloudProvider, req.ID)
-	if existingAccount != nil && existingAccount.AccountID != nil && *existingAccount.AccountID != req.AccountID {
-		return nil, model.BadRequest(fmt.Errorf(
-			"can't check in with new %s account id %s for account %s with existing %s id %s",
-			cloudProvider, req.AccountID, existingAccount.ID.StringValue(), cloudProvider, *existingAccount.AccountID,
-		))
-	}
-
-	existingAccount, apiErr = c.accountsRepo.getConnectedCloudAccount(ctx, orgId, cloudProvider, req.AccountID)
-	if existingAccount != nil && existingAccount.ID.StringValue() != req.ID {
-		return nil, model.BadRequest(fmt.Errorf(
-			"can't check in to %s account %s with id %s. already connected with id %s",
-			cloudProvider, req.AccountID, req.ID, existingAccount.ID.StringValue(),
-		))
-	}
-
-	agentReport := integrationtypes.AgentReport{
-		TimestampMillis: time.Now().UnixMilli(),
-		Data:            req.Data,
-	}
-
-	account, apiErr := c.accountsRepo.upsert(
-		ctx, orgId, cloudProvider, &req.ID, nil, &req.AccountID, &agentReport, nil,
-	)
-	if apiErr != nil {
-		return nil, model.WrapApiError(apiErr, "couldn't upsert cloud account")
-	}
-
-	// prepare and return integration config to be consumed by agent
-	compiledStrategy, err := NewCompiledCollectionStrategy(cloudProvider)
-	if err != nil {
-		return nil, model.InternalError(fmt.Errorf(
-			"couldn't init telemetry collection strategy: %w", err,
-		))
-	}
-
-	agentConfig := IntegrationConfigForAgent{
-		EnabledRegions:              []string{},
-		TelemetryCollectionStrategy: compiledStrategy,
-	}
-
-	if account.Config != nil && account.Config.EnabledRegions != nil {
-		agentConfig.EnabledRegions = account.Config.EnabledRegions
-	}
-
-	services, err := services.Map(cloudProvider)
-	if err != nil {
-		return nil, err
-	}
-
-	svcConfigs, apiErr := c.serviceConfigRepo.getAllForAccount(
-		ctx, orgId, account.ID.StringValue(),
-	)
-	if apiErr != nil {
-		return nil, model.WrapApiError(
-			apiErr, "couldn't get service configs for cloud account",
-		)
-	}
-
-	// accumulate config in a fixed order to ensure same config generated across runs
-	configuredServices := maps.Keys(svcConfigs)
-	slices.Sort(configuredServices)
-
-	for _, svcType := range configuredServices {
-		definition, ok := services[svcType]
-		if !ok {
-			continue
-		}
-		config := svcConfigs[svcType]
-
-		err := AddServiceStrategy(svcType, compiledStrategy, definition.Strategy, config)
-		if err != nil {
-			return nil, err
-		}
-	}
-
-	return &AgentCheckInResponse{
-		AccountId:         account.ID.StringValue(),
-		CloudAccountId:    *account.AccountID,
-		RemovedAt:         account.RemovedAt,
-		IntegrationConfig: agentConfig,
-	}, nil
-}
-
-type UpdateAccountConfigRequest struct {
-	Config integrationtypes.AccountConfig `json:"config"`
-}
-
-func (c *Controller) UpdateAccountConfig(ctx context.Context, orgId string, cloudProvider string, accountId string, req UpdateAccountConfigRequest) (*integrationtypes.Account, *model.ApiError) {
-	if apiErr := validateCloudProviderName(cloudProvider); apiErr != nil {
-		return nil, apiErr
-	}
-
-	accountRecord, apiErr := c.accountsRepo.upsert(
-		ctx, orgId, cloudProvider, &accountId, &req.Config, nil, nil, nil,
-	)
-	if apiErr != nil {
-		return nil, model.WrapApiError(apiErr, "couldn't upsert cloud account")
-	}
-
-	account := accountRecord.Account()
-
-	return &account, nil
-}
-
-func (c *Controller) DisconnectAccount(ctx context.Context, orgId string, cloudProvider string, accountId string) (*integrationtypes.CloudIntegration, *model.ApiError) {
-	if apiErr := validateCloudProviderName(cloudProvider); apiErr != nil {
-		return nil, apiErr
-	}
-
-	account, apiErr := c.accountsRepo.get(ctx, orgId, cloudProvider, accountId)
-	if apiErr != nil {
-		return nil, model.WrapApiError(apiErr, "couldn't disconnect account")
-	}
-
-	tsNow := time.Now()
-	account, apiErr = c.accountsRepo.upsert(
-		ctx, orgId, cloudProvider, &accountId, nil, nil, nil, &tsNow,
-	)
-	if apiErr != nil {
-		return nil, model.WrapApiError(apiErr, "couldn't disconnect account")
-	}
-
-	return account, nil
-}
-
-type ListServicesResponse struct {
-	Services []ServiceSummary `json:"services"`
-}
-
-func (c *Controller) ListServices(
-	ctx context.Context,
-	orgID string,
-	cloudProvider string,
-	cloudAccountId *string,
-) (*ListServicesResponse, *model.ApiError) {
-	if apiErr := validateCloudProviderName(cloudProvider); apiErr != nil {
-		return nil, apiErr
-	}
-
-	definitions, apiErr := services.List(cloudProvider)
-	if apiErr != nil {
-		return nil, model.WrapApiError(apiErr, "couldn't list cloud services")
-	}
-
-	svcConfigs := map[string]*integrationtypes.CloudServiceConfig{}
-	if cloudAccountId != nil {
-		activeAccount, apiErr := c.accountsRepo.getConnectedCloudAccount(
-			ctx, orgID, cloudProvider, *cloudAccountId,
-		)
-		if apiErr != nil {
-			return nil, model.WrapApiError(apiErr, "couldn't get active account")
-		}
-		svcConfigs, apiErr = c.serviceConfigRepo.getAllForAccount(
-			ctx, orgID, activeAccount.ID.StringValue(),
-		)
-		if apiErr != nil {
-			return nil, model.WrapApiError(
-				apiErr, "couldn't get service configs for cloud account",
-			)
-		}
-	}
-
-	summaries := []ServiceSummary{}
-	for _, def := range definitions {
-		summary := ServiceSummary{
-			Metadata: def.Metadata,
-		}
-		summary.Config = svcConfigs[summary.Id]
-
-		summaries = append(summaries, summary)
-	}
-
-	return &ListServicesResponse{
-		Services: summaries,
-	}, nil
-}
-
-func (c *Controller) GetServiceDetails(
-	ctx context.Context,
-	orgID string,
-	cloudProvider string,
-	serviceId string,
-	cloudAccountId *string,
-) (*ServiceDetails, error) {
-	if apiErr := validateCloudProviderName(cloudProvider); apiErr != nil {
-		return nil, apiErr
-	}
-
-	definition, err := services.GetServiceDefinition(cloudProvider, serviceId)
-	if err != nil {
-		return nil, err
-	}
-
-	details := ServiceDetails{
-		Definition: *definition,
-	}
-
-	if cloudAccountId != nil {
-
-		activeAccount, apiErr := c.accountsRepo.getConnectedCloudAccount(
-			ctx, orgID, cloudProvider, *cloudAccountId,
-		)
-		if apiErr != nil {
-			return nil, model.WrapApiError(apiErr, "couldn't get active account")
-		}
-
-		config, apiErr := c.serviceConfigRepo.get(
-			ctx, orgID, activeAccount.ID.StringValue(), serviceId,
-		)
-		if apiErr != nil && apiErr.Type() != model.ErrorNotFound {
-			return nil, model.WrapApiError(apiErr, "couldn't fetch service config")
-		}
-
-		if config != nil {
-			details.Config = config
-
-			enabled := false
-			if config.Metrics != nil && config.Metrics.Enabled {
-				enabled = true
-			}
-
-			// add links to service dashboards, making them clickable.
-			for i, d := range definition.Assets.Dashboards {
-				dashboardUuid := c.dashboardUuid(
-					cloudProvider, serviceId, d.Id,
-				)
-				if enabled {
-					definition.Assets.Dashboards[i].Url = fmt.Sprintf("/dashboard/%s", dashboardUuid)
-				} else {
-					definition.Assets.Dashboards[i].Url = "" // to unset the in-memory URL if enabled once and disabled afterwards
-				}
-			}
-		}
-	}
-
-	return &details, nil
-}
-
-type UpdateServiceConfigRequest struct {
-	CloudAccountId string                              `json:"cloud_account_id"`
-	Config         integrationtypes.CloudServiceConfig `json:"config"`
-}
-
-func (u *UpdateServiceConfigRequest) Validate(def *services.Definition) error {
-	if def.Id != services.S3Sync && u.Config.Logs != nil && u.Config.Logs.S3Buckets != nil {
-		return errors.NewInvalidInputf(errors.CodeInvalidInput, "s3 buckets can only be added to service-type[%s]", services.S3Sync)
-	} else if def.Id == services.S3Sync && u.Config.Logs != nil && u.Config.Logs.S3Buckets != nil {
-		for region := range u.Config.Logs.S3Buckets {
-			if _, found := ValidAWSRegions[region]; !found {
-				return errors.NewInvalidInputf(CodeInvalidCloudRegion, "invalid cloud region: %s", region)
-			}
-		}
-	}
-
-	return nil
-}
-
-type UpdateServiceConfigResponse struct {
-	Id     string                              `json:"id"`
-	Config integrationtypes.CloudServiceConfig `json:"config"`
-}
-
-func (c *Controller) UpdateServiceConfig(
-	ctx context.Context,
-	orgID string,
-	cloudProvider string,
-	serviceType string,
-	req *UpdateServiceConfigRequest,
-) (*UpdateServiceConfigResponse, error) {
-	if apiErr := validateCloudProviderName(cloudProvider); apiErr != nil {
-		return nil, apiErr
-	}
-
-	// can only update config for a valid service.
-	definition, err := services.GetServiceDefinition(cloudProvider, serviceType)
-	if err != nil {
-		return nil, err
-	}
-
-	if err := req.Validate(definition); err != nil {
-		return nil, err
-	}
-
-	// can only update config for a connected cloud account id
-	_, apiErr := c.accountsRepo.getConnectedCloudAccount(
-		ctx, orgID, cloudProvider, req.CloudAccountId,
-	)
-	if apiErr != nil {
-		return nil, model.WrapApiError(apiErr, "couldn't find connected cloud account")
-	}
-
-	updatedConfig, apiErr := c.serviceConfigRepo.upsert(
-		ctx, orgID, cloudProvider, req.CloudAccountId, serviceType, req.Config,
-	)
-	if apiErr != nil {
-		return nil, model.WrapApiError(apiErr, "couldn't update service config")
-	}
-
-	return &UpdateServiceConfigResponse{
-		Id:     serviceType,
-		Config: *updatedConfig,
-	}, nil
-}
-
-// All dashboards that are available based on cloud integrations configuration
-// across all cloud providers
-func (c *Controller) AvailableDashboards(ctx context.Context, orgId valuer.UUID) ([]*dashboardtypes.Dashboard, *model.ApiError) {
-	allDashboards := []*dashboardtypes.Dashboard{}
-
-	for _, provider := range []string{"aws"} {
-		providerDashboards, apiErr := c.AvailableDashboardsForCloudProvider(ctx, orgId, provider)
-		if apiErr != nil {
-			return nil, model.WrapApiError(
-				apiErr, fmt.Sprintf("couldn't get available dashboards for %s", provider),
-			)
-		}
-
-		allDashboards = append(allDashboards, providerDashboards...)
-	}
-
-	return allDashboards, nil
-}
-
-func (c *Controller) AvailableDashboardsForCloudProvider(ctx context.Context, orgID valuer.UUID, cloudProvider string) ([]*dashboardtypes.Dashboard, *model.ApiError) {
-	accountRecords, apiErr := c.accountsRepo.listConnected(ctx, orgID.StringValue(), cloudProvider)
-	if apiErr != nil {
-		return nil, model.WrapApiError(apiErr, "couldn't list connected cloud accounts")
-	}
-
-	// for v0, service dashboards are only available when metrics are enabled.
-	servicesWithAvailableMetrics := map[string]*time.Time{}
-
-	for _, ar := range accountRecords {
-		if ar.AccountID != nil {
-			configsBySvcId, apiErr := c.serviceConfigRepo.getAllForAccount(
-				ctx, orgID.StringValue(), ar.ID.StringValue(),
-			)
-			if apiErr != nil {
-				return nil, apiErr
-			}
-
-			for svcId, config := range configsBySvcId {
-				if config.Metrics != nil && config.Metrics.Enabled {
-					servicesWithAvailableMetrics[svcId] = &ar.CreatedAt
-				}
-			}
-		}
-	}
-
-	allServices, apiErr := services.List(cloudProvider)
-	if apiErr != nil {
-		return nil, apiErr
-	}
-
-	svcDashboards := []*dashboardtypes.Dashboard{}
-	for _, svc := range allServices {
-		serviceDashboardsCreatedAt := servicesWithAvailableMetrics[svc.Id]
-		if serviceDashboardsCreatedAt != nil {
-			for _, d := range svc.Assets.Dashboards {
-				author := fmt.Sprintf("%s-integration", cloudProvider)
-				svcDashboards = append(svcDashboards, &dashboardtypes.Dashboard{
-					ID:     c.dashboardUuid(cloudProvider, svc.Id, d.Id),
-					Locked: true,
-					Data:   *d.Definition,
-					TimeAuditable: types.TimeAuditable{
-						CreatedAt: *serviceDashboardsCreatedAt,
-						UpdatedAt: *serviceDashboardsCreatedAt,
-					},
-					UserAuditable: types.UserAuditable{
-						CreatedBy: author,
-						UpdatedBy: author,
-					},
-					OrgID: orgID,
-				})
-			}
-			servicesWithAvailableMetrics[svc.Id] = nil
-		}
-	}
-
-	return svcDashboards, nil
-}
-func (c *Controller) GetDashboardById(ctx context.Context, orgId valuer.UUID, dashboardUuid string) (*dashboardtypes.Dashboard, *model.ApiError) {
-	cloudProvider, _, _, apiErr := c.parseDashboardUuid(dashboardUuid)
-	if apiErr != nil {
-		return nil, apiErr
-	}
-
-	allDashboards, apiErr := c.AvailableDashboardsForCloudProvider(ctx, orgId, cloudProvider)
-	if apiErr != nil {
-		return nil, model.WrapApiError(apiErr, "couldn't list available dashboards")
-	}
-
-	for _, d := range allDashboards {
-		if d.ID == dashboardUuid {
-			return d, nil
-		}
-	}
-
-	return nil, model.NotFoundError(fmt.Errorf("couldn't find dashboard with uuid: %s", dashboardUuid))
-}
-
-func (c *Controller) dashboardUuid(
-	cloudProvider string, svcId string, dashboardId string,
-) string {
-	return fmt.Sprintf("cloud-integration--%s--%s--%s", cloudProvider, svcId, dashboardId)
-}
-
-func (c *Controller) parseDashboardUuid(dashboardUuid string) (cloudProvider string, svcId string, dashboardId string, apiErr *model.ApiError) {
-	parts := strings.SplitN(dashboardUuid, "--", 4)
-	if len(parts) != 4 || parts[0] != "cloud-integration" {
-		return "", "", "", model.BadRequest(fmt.Errorf("invalid cloud integration dashboard id"))
-	}
-
-	return parts[1], parts[2], parts[3], nil
-}
-
-func (c *Controller) IsCloudIntegrationDashboardUuid(dashboardUuid string) bool {
-	_, _, _, apiErr := c.parseDashboardUuid(dashboardUuid)
-	return apiErr == nil
-}

pkg/query-service/app/cloudintegrations/models.go

@@ -1,94 +0,0 @@
-package cloudintegrations
-
-import (
-	"github.com/SigNoz/signoz/pkg/errors"
-	"github.com/SigNoz/signoz/pkg/query-service/app/cloudintegrations/services"
-	"github.com/SigNoz/signoz/pkg/types/integrationtypes"
-)
-
-type ServiceSummary struct {
-	services.Metadata
-
-	Config *integrationtypes.CloudServiceConfig `json:"config"`
-}
-
-type ServiceDetails struct {
-	services.Definition
-
-	Config           *integrationtypes.CloudServiceConfig `json:"config"`
-	ConnectionStatus *ServiceConnectionStatus             `json:"status,omitempty"`
-}
-
-type AccountStatus struct {
-	Integration AccountIntegrationStatus `json:"integration"`
-}
-
-type AccountIntegrationStatus struct {
-	LastHeartbeatTsMillis *int64 `json:"last_heartbeat_ts_ms"`
-}
-
-type LogsConfig struct {
-	Enabled   bool                `json:"enabled"`
-	S3Buckets map[string][]string `json:"s3_buckets,omitempty"`
-}
-
-type MetricsConfig struct {
-	Enabled bool `json:"enabled"`
-}
-
-type ServiceConnectionStatus struct {
-	Logs    *SignalConnectionStatus `json:"logs"`
-	Metrics *SignalConnectionStatus `json:"metrics"`
-}
-
-type SignalConnectionStatus struct {
-	LastReceivedTsMillis int64  `json:"last_received_ts_ms"` // epoch milliseconds
-	LastReceivedFrom     string `json:"last_received_from"`  // resource identifier
-}
-
-type CompiledCollectionStrategy = services.CollectionStrategy
-
-func NewCompiledCollectionStrategy(provider string) (*CompiledCollectionStrategy, error) {
-	if provider == "aws" {
-		return &CompiledCollectionStrategy{
-			Provider:   "aws",
-			AWSMetrics: &services.AWSMetricsStrategy{},
-			AWSLogs:    &services.AWSLogsStrategy{},
-		}, nil
-	}
-	return nil, errors.NewNotFoundf(services.CodeUnsupportedCloudProvider, "unsupported cloud provider: %s", provider)
-}
-
-// Helper for accumulating strategies for enabled services.
-func AddServiceStrategy(serviceType string, cs *CompiledCollectionStrategy,
-	definitionStrat *services.CollectionStrategy, config *integrationtypes.CloudServiceConfig) error {
-	if definitionStrat.Provider != cs.Provider {
-		return errors.NewInternalf(CodeMismatchCloudProvider, "can't add %s service strategy to compiled strategy for %s",
-			definitionStrat.Provider, cs.Provider)
-	}
-
-	if cs.Provider == "aws" {
-		if config.Logs != nil && config.Logs.Enabled {
-			if serviceType == services.S3Sync {
-				// S3 bucket sync; No cloudwatch logs are appended for this service type;
-				// Though definition is populated with a custom cloudwatch group that helps in calculating logs connection status
-				cs.S3Buckets = config.Logs.S3Buckets
-			} else if definitionStrat.AWSLogs != nil { // services that includes a logs subscription
-				cs.AWSLogs.Subscriptions = append(
-					cs.AWSLogs.Subscriptions,
-					definitionStrat.AWSLogs.Subscriptions...,
-				)
-			}
-		}
-		if config.Metrics != nil && config.Metrics.Enabled && definitionStrat.AWSMetrics != nil {
-			cs.AWSMetrics.StreamFilters = append(
-				cs.AWSMetrics.StreamFilters,
-				definitionStrat.AWSMetrics.StreamFilters...,
-			)
-		}
-
-		return nil
-	}
-
-	return errors.NewNotFoundf(services.CodeUnsupportedCloudProvider, "unsupported cloud provider: %s", cs.Provider)
-}

pkg/query-service/app/cloudintegrations/serviceconfig_db.go

@@ -1,165 +0,0 @@
-package cloudintegrations
-
-import (
-	"context"
-	"database/sql"
-	"fmt"
-	"time"
-
-	"github.com/SigNoz/signoz/pkg/query-service/model"
-	"github.com/SigNoz/signoz/pkg/sqlstore"
-	"github.com/SigNoz/signoz/pkg/types"
-	"github.com/SigNoz/signoz/pkg/types/integrationtypes"
-	"github.com/SigNoz/signoz/pkg/valuer"
-)
-
-type ServiceConfigDatabase interface {
-	get(
-		ctx context.Context,
-		orgID string,
-		cloudAccountId string,
-		serviceType string,
-	) (*integrationtypes.CloudServiceConfig, *model.ApiError)
-
-	upsert(
-		ctx context.Context,
-		orgID string,
-		cloudProvider string,
-		cloudAccountId string,
-		serviceId string,
-		config integrationtypes.CloudServiceConfig,
-	) (*integrationtypes.CloudServiceConfig, *model.ApiError)
-
-	getAllForAccount(
-		ctx context.Context,
-		orgID string,
-		cloudAccountId string,
-	) (
-		configsBySvcId map[string]*integrationtypes.CloudServiceConfig,
-		apiErr *model.ApiError,
-	)
-}
-
-func newServiceConfigRepository(store sqlstore.SQLStore) (
-	*serviceConfigSQLRepository, error,
-) {
-	return &serviceConfigSQLRepository{
-		store: store,
-	}, nil
-}
-
-type serviceConfigSQLRepository struct {
-	store sqlstore.SQLStore
-}
-
-func (r *serviceConfigSQLRepository) get(
-	ctx context.Context,
-	orgID string,
-	cloudAccountId string,
-	serviceType string,
-) (*integrationtypes.CloudServiceConfig, *model.ApiError) {
-
-	var result integrationtypes.CloudIntegrationService
-
-	err := r.store.BunDB().NewSelect().
-		Model(&result).
-		Join("JOIN cloud_integration ci ON ci.id = cis.cloud_integration_id").
-		Where("ci.org_id = ?", orgID).
-		Where("ci.id = ?", cloudAccountId).
-		Where("cis.type = ?", serviceType).
-		Scan(ctx)
-
-	if err == sql.ErrNoRows {
-		return nil, model.NotFoundError(fmt.Errorf(
-			"couldn't find config for cloud account %s",
-			cloudAccountId,
-		))
-	} else if err != nil {
-		return nil, model.InternalError(fmt.Errorf(
-			"couldn't query cloud service config: %w", err,
-		))
-	}
-
-	return &result.Config, nil
-
-}
-
-func (r *serviceConfigSQLRepository) upsert(
-	ctx context.Context,
-	orgID string,
-	cloudProvider string,
-	cloudAccountId string,
-	serviceId string,
-	config integrationtypes.CloudServiceConfig,
-) (*integrationtypes.CloudServiceConfig, *model.ApiError) {
-
-	// get cloud integration id from account id
-	// if the account is not connected, we don't need to upsert the config
-	var cloudIntegrationId string
-	err := r.store.BunDB().NewSelect().
-		Model((*integrationtypes.CloudIntegration)(nil)).
-		Column("id").
-		Where("provider = ?", cloudProvider).
-		Where("account_id = ?", cloudAccountId).
-		Where("org_id = ?", orgID).
-		Where("removed_at is NULL").
-		Where("last_agent_report is not NULL").
-		Scan(ctx, &cloudIntegrationId)
-
-	if err != nil {
-		return nil, model.InternalError(fmt.Errorf(
-			"couldn't query cloud integration id: %w", err,
-		))
-	}
-
-	serviceConfig := integrationtypes.CloudIntegrationService{
-		Identifiable: types.Identifiable{ID: valuer.GenerateUUID()},
-		TimeAuditable: types.TimeAuditable{
-			CreatedAt: time.Now(),
-			UpdatedAt: time.Now(),
-		},
-		Config:             config,
-		Type:               serviceId,
-		CloudIntegrationID: cloudIntegrationId,
-	}
-	_, err = r.store.BunDB().NewInsert().
-		Model(&serviceConfig).
-		On("conflict(cloud_integration_id, type) do update set config=excluded.config, updated_at=excluded.updated_at").
-		Exec(ctx)
-	if err != nil {
-		return nil, model.InternalError(fmt.Errorf(
-			"could not upsert cloud service config: %w", err,
-		))
-	}
-
-	return &serviceConfig.Config, nil
-
-}
-
-func (r *serviceConfigSQLRepository) getAllForAccount(
-	ctx context.Context,
-	orgID string,
-	cloudAccountId string,
-) (map[string]*integrationtypes.CloudServiceConfig, *model.ApiError) {
-	serviceConfigs := []integrationtypes.CloudIntegrationService{}
-
-	err := r.store.BunDB().NewSelect().
-		Model(&serviceConfigs).
-		Join("JOIN cloud_integration ci ON ci.id = cis.cloud_integration_id").
-		Where("ci.id = ?", cloudAccountId).
-		Where("ci.org_id = ?", orgID).
-		Scan(ctx)
-	if err != nil {
-		return nil, model.InternalError(fmt.Errorf(
-			"could not query service configs from db: %w", err,
-		))
-	}
-
-	result := map[string]*integrationtypes.CloudServiceConfig{}
-
-	for _, r := range serviceConfigs {
-		result[r.Type] = &r.Config
-	}
-
-	return result, nil
-}

pkg/query-service/app/cloudintegrations/services/definitions/aws/alb/icon.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 85 85" fill="#fff" fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round"><use xlink:href="#A" x="2.5" y="2.5"/><symbol id="A" overflow="visible"><g stroke="none"><path d="M0 41.579C0 20.293 17.84 3.157 40 3.157s40 17.136 40 38.422S62.16 80 40 80 0 62.864 0 41.579z" fill="#9d5025"/><path d="M0 38.422C0 17.136 17.84 0 40 0s40 17.136 40 38.422-17.84 38.422-40 38.422S0 59.707 0 38.422z" fill="#f58536"/><path d="M51.672 7.387v13.952H28.327V7.387zm18.061 40.378v11.364h-11.83V47.765zm-14.958 0v11.364h-11.83V47.765zm-18.206 0v11.364h-11.83V47.765zm-14.959 0v11.364H9.78V47.765z"/><path d="M14.63 37.929h2.13v11.149h-2.13z"/><path d="M14.63 37.929h17.088v2.045H14.63z"/><path d="M29.589 37.929h2.13v11.149H29.59zm18.206 0h2.13v11.149h-2.13z"/><path d="M47.795 37.929h17.088v2.045H47.795z"/><path d="M62.754 37.929h2.13v11.149h-2.129zm-40.631-7.954h2.13v8.977h-2.13zM38.935 19.28h2.13v10.859h-2.129z"/><path d="M22.123 29.116h35.32v2.045h-35.32z"/><path d="M55.314 29.975h2.13v8.977h-2.129z"/></g></symbol></svg>

pkg/query-service/app/cloudintegrations/services/definitions/aws/alb/integration.json

@@ -1,467 +0,0 @@
-{
-  "id": "alb",
-  "title": "ALB",
-  "icon": "file://icon.svg",
-  "overview": "file://overview.md",
-  "supported_signals": {
-    "metrics": true,
-    "logs": false
-  },
-  "data_collected": {
-    "metrics": [
-      {
-        "name": "aws_ApplicationELB_ActiveConnectionCount_count",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_ActiveConnectionCount_max",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_ActiveConnectionCount_min",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_ActiveConnectionCount_sum",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_AnomalousHostCount_count",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_AnomalousHostCount_max",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_AnomalousHostCount_min",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_AnomalousHostCount_sum",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_ConsumedLCUs_count",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_ConsumedLCUs_max",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_ConsumedLCUs_min",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_ConsumedLCUs_sum",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_HTTPCode_Target_2XX_Count_count",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_HTTPCode_Target_2XX_Count_max",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_HTTPCode_Target_2XX_Count_min",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_HTTPCode_Target_2XX_Count_sum",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_HTTPCode_Target_4XX_Count_count",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_HTTPCode_Target_4XX_Count_max",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_HTTPCode_Target_4XX_Count_min",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_HTTPCode_Target_4XX_Count_sum",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_HealthyHostCount_count",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_HealthyHostCount_max",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_HealthyHostCount_min",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_HealthyHostCount_sum",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_HealthyStateDNS_count",
-        "unit": "None",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_HealthyStateDNS_max",
-        "unit": "None",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_HealthyStateDNS_min",
-        "unit": "None",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_HealthyStateDNS_sum",
-        "unit": "None",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_HealthyStateRouting_count",
-        "unit": "None",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_HealthyStateRouting_max",
-        "unit": "None",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_HealthyStateRouting_min",
-        "unit": "None",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_HealthyStateRouting_sum",
-        "unit": "None",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_MitigatedHostCount_count",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_MitigatedHostCount_max",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_MitigatedHostCount_min",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_MitigatedHostCount_sum",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_NewConnectionCount_count",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_NewConnectionCount_max",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_NewConnectionCount_min",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_NewConnectionCount_sum",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_PeakLCUs_count",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_PeakLCUs_max",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_PeakLCUs_min",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_PeakLCUs_sum",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_ProcessedBytes_count",
-        "unit": "Bytes",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_ProcessedBytes_max",
-        "unit": "Bytes",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_ProcessedBytes_min",
-        "unit": "Bytes",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_ProcessedBytes_sum",
-        "unit": "Bytes",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_RequestCountPerTarget_count",
-        "unit": "None",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_RequestCountPerTarget_max",
-        "unit": "None",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_RequestCountPerTarget_min",
-        "unit": "None",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_RequestCountPerTarget_sum",
-        "unit": "None",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_RequestCount_count",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_RequestCount_max",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_RequestCount_min",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_RequestCount_sum",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_TargetResponseTime_count",
-        "unit": "Seconds",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_TargetResponseTime_max",
-        "unit": "Seconds",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_TargetResponseTime_min",
-        "unit": "Seconds",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_TargetResponseTime_sum",
-        "unit": "Seconds",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_UnHealthyHostCount_count",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_UnHealthyHostCount_max",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_UnHealthyHostCount_min",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_UnHealthyHostCount_sum",
-        "unit": "Count",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_UnhealthyStateDNS_count",
-        "unit": "None",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_UnhealthyStateDNS_max",
-        "unit": "None",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_UnhealthyStateDNS_min",
-        "unit": "None",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_UnhealthyStateDNS_sum",
-        "unit": "None",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_UnhealthyStateRouting_count",
-        "unit": "None",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_UnhealthyStateRouting_max",
-        "unit": "None",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_UnhealthyStateRouting_min",
-        "unit": "None",
-        "type": "Gauge",
-        "description": ""
-      },
-      {
-        "name": "aws_ApplicationELB_UnhealthyStateRouting_sum",
-        "unit": "None",
-        "type": "Gauge",
-        "description": ""
-      }
-    ],
-    "logs": []
-  },
-  "telemetry_collection_strategy": {
-    "aws_metrics": {
-      "cloudwatch_metric_stream_filters": [
-        {
-          "Namespace": "AWS/ApplicationELB"
-        }
-      ]
-    }
-  },
-  "assets": {
-    "dashboards": [
-      {
-        "id": "overview",
-        "title": "ALB Overview",
-        "description": "Overview of Application Load Balancer",
-        "image": "file://assets/dashboards/overview.png",
-        "definition": "file://assets/dashboards/overview.json"
-      }
-    ]
-  }
-}