refactor: clean up state initialization and destructuring in AWS and HeroSection components

* refactor(telemetrytypes): replace JSONDataTypeIndex with TelemetryFieldKeySkipIndex

* revert: mcp related changes

* fix: openapi fails

---------

Co-authored-by: Ankit Nayan <ankit@signoz.io>

docs/api/openapi.yml

@@ -2933,8 +2933,8 @@ components:
       type: object
     PromotetypesWrappedIndex:
       properties:
-        column_type:
-          type: string
+        fieldDataType:
+          $ref: '#/components/schemas/TelemetrytypesFieldDataType'
         granularity:
           type: integer
         type:

frontend/plugins/rules/prefer-signoz-ui-icons.js

@@ -0,0 +1,56 @@
+'use strict';
+
+/**
+ * ESLint rule: prefer-signoz-ui-icons
+ *
+ * Warn when UI components/icons are imported from non-design-system packages.
+ * Current governance:
+ * - Use @signozhq/ui for UI primitives.
+ * - Use @signozhq/icons for icons.
+ */
+module.exports = {
+	meta: {
+		type: 'suggestion',
+		docs: {
+			description:
+				'Prefer @signozhq/ui and @signozhq/icons over external UI/icon packages',
+			category: 'Design System',
+			recommended: false,
+		},
+		schema: [],
+		messages: {
+			preferSignozUi:
+				'Import UI components from "@signozhq/ui" instead of "{{ source }}".',
+			preferSignozIcons:
+				'Import icons from "@signozhq/icons" instead of "{{ source }}".',
+		},
+	},
+
+	create(context) {
+		return {
+			ImportDeclaration(node) {
+				const source = node.source && node.source.value;
+				if (typeof source !== 'string') {
+					return;
+				}
+
+				if (source === 'antd') {
+					context.report({
+						node,
+						messageId: 'preferSignozUi',
+						data: { source },
+					});
+					return;
+				}
+
+				if (source === '@ant-design/icons') {
+					context.report({
+						node,
+						messageId: 'preferSignozIcons',
+						data: { source },
+					});
+				}
+			},
+		};
+	},
+};

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

@@ -3701,10 +3701,7 @@ export interface PromotetypesPromotePathDTO {
 }
 
 export interface PromotetypesWrappedIndexDTO {
-	/**
-	 * @type string
-	 */
-	column_type?: string;
+	fieldDataType?: TelemetrytypesFieldDataTypeDTO;
 	/**
 	 * @type integer
 	 */

frontend/src/components/CodeBlock/CodeBlock.module.scss

@@ -0,0 +1,22 @@
+.codeBlock {
+	position: relative;
+}
+
+.codeBlockSyntaxHighlighter {
+	background-color: var(--l2-background) !important;
+	border-radius: 4px !important;
+	border: 1px solid var(--l2-border) !important;
+	color: var(--l2-foreground) !important;
+
+	pre {
+		color: var(--l2-foreground) !important;
+		font-family: 'Geist Mono' !important;
+		font-size: 12px !important;
+	}
+
+	code {
+		color: var(--l1-foreground) !important;
+		font-family: 'Geist Mono' !important;
+		font-size: 12px !important;
+	}
+}

frontend/src/components/CodeBlock/CodeBlock.test.tsx

@@ -0,0 +1,46 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+import CodeBlock from './CodeBlock';
+
+const mockCopyToClipboard = jest.fn();
+
+jest.mock('react-use', () => ({
+	useCopyToClipboard: (): [unknown, (text: string) => void] => [
+		undefined,
+		mockCopyToClipboard,
+	],
+}));
+
+describe('CodeBlock', () => {
+	beforeEach(() => {
+		mockCopyToClipboard.mockReset();
+	});
+
+	it('renders code block mode by default', () => {
+		render(<CodeBlock code={'const x = 1;\n'} language="javascript" />);
+
+		const container = screen.getByTestId('code-block-container');
+		expect(container).toBeInTheDocument();
+		expect(container).toHaveTextContent('const x = 1;');
+	});
+
+	it('renders inline code when inline is true', () => {
+		render(<CodeBlock code="inline value" inline />);
+
+		const inlineCode = screen.getByText('inline value');
+		expect(inlineCode.tagName.toLowerCase()).toBe('code');
+		expect(screen.queryByTestId('code-block-container')).not.toBeInTheDocument();
+	});
+
+	it('copies code and triggers callback', async () => {
+		const onCopy = jest.fn();
+		render(<CodeBlock code="SELECT * FROM logs;" onCopy={onCopy} />);
+
+		fireEvent.click(screen.getByRole('button', { name: /copy code/i }));
+
+		await waitFor(() => {
+			expect(mockCopyToClipboard).toHaveBeenCalledWith('SELECT * FROM logs;');
+		});
+		expect(onCopy).toHaveBeenCalledWith('SELECT * FROM logs;');
+	});
+});

frontend/src/components/CodeBlock/CodeBlock.tsx

@@ -0,0 +1,89 @@
+import { useMemo, useState } from 'react';
+import { useCopyToClipboard } from 'react-use';
+import { Check, Copy } from '@signozhq/icons';
+import { Button } from '@signozhq/ui';
+import SyntaxHighlighter, {
+	a11yDark,
+} from 'components/MarkdownRenderer/syntaxHighlighter';
+
+import styles from './CodeBlock.module.scss';
+
+export interface CodeBlockProps {
+	code: string;
+	language?: string;
+	className?: string;
+	inline?: boolean;
+	showLineNumbers?: boolean;
+	showCopyButton?: boolean;
+	onCopy?: (copiedCode: string) => void;
+}
+
+function CodeBlock({
+	code,
+	language = 'text',
+	className,
+	inline = false,
+	showLineNumbers = false,
+	showCopyButton = true,
+	onCopy,
+}: CodeBlockProps): JSX.Element {
+	const [isCopied, setIsCopied] = useState(false);
+	const [, copyToClipboard] = useCopyToClipboard();
+	const normalizedCode = useMemo(() => code?.replace(/\n$/, '') ?? '', [code]);
+
+	const handleCopy = (): void => {
+		copyToClipboard(normalizedCode);
+		setIsCopied(true);
+		onCopy?.(normalizedCode);
+
+		setTimeout(() => {
+			setIsCopied(false);
+		}, 1000);
+	};
+
+	if (inline) {
+		return <code className={className}>{normalizedCode}</code>;
+	}
+
+	return (
+		<div
+			className={`${styles.codeBlock} ${className}`}
+			style={{ position: 'relative' }}
+			data-testid="code-block-container"
+		>
+			{showCopyButton ? (
+				<Button
+					variant="ghost"
+					color="secondary"
+					size="sm"
+					onClick={handleCopy}
+					prefix={isCopied ? <Check size={14} /> : <Copy size={14} />}
+					aria-label="Copy code"
+					title={isCopied ? 'Copied' : 'Copy'}
+					style={{ position: 'absolute', right: 8, top: 8, zIndex: 1 }}
+				/>
+			) : null}
+			<SyntaxHighlighter
+				style={a11yDark}
+				language={language}
+				PreTag="div"
+				showLineNumbers={showLineNumbers}
+				wrapLongLines
+				className={styles.codeBlockSyntaxHighlighter}
+			>
+				{normalizedCode}
+			</SyntaxHighlighter>
+		</div>
+	);
+}
+
+CodeBlock.defaultProps = {
+	language: 'text',
+	className: undefined,
+	inline: false,
+	showLineNumbers: false,
+	showCopyButton: true,
+	onCopy: undefined,
+};
+
+export default CodeBlock;

frontend/src/components/LogDetail/index.tsx

@@ -10,6 +10,7 @@ import cx from 'classnames';
 import { LogType } from 'components/Logs/LogStateIndicator/LogStateIndicator';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
 import { convertExpressionToFilters } from 'components/QueryBuilderV2/utils';
+import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { QueryParams } from 'constants/query';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
@@ -46,6 +47,7 @@ import {
 	TextSelect,
 	X,
 } from 'lucide-react';
+import { useAppContext } from 'providers/App/App';
 import { AppState } from 'store/reducers';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
@@ -79,6 +81,10 @@ function LogDetailInner({
 	const [selectedView, setSelectedView] = useState<VIEWS>(selectedTab);
 
 	const [isFilterVisible, setIsFilterVisible] = useState<boolean>(false);
+	const { featureFlags } = useAppContext();
+	const isBodyJsonQueryEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.BODY_JSON_ENABLED)
+			?.active || false;
 
 	const [filters, setFilters] = useState<TagFilter | null>(null);
 	const [isEdit, setIsEdit] = useState<boolean>(false);
@@ -208,11 +214,29 @@ function LogDetailInner({
 		}
 	};
 
+	const logBody = useMemo(() => {
+		if (!isBodyJsonQueryEnabled) {
+			return log?.body || '';
+		}
+
+		try {
+			const json = JSON.parse(log?.body || '');
+
+			if (typeof json?.message === 'string' && json.message !== '') {
+				return json.message;
+			}
+
+			return log?.body || '';
+		} catch (error) {
+			return log?.body || '';
+		}
+	}, [isBodyJsonQueryEnabled, log?.body]);
+
 	const htmlBody = useMemo(
 		() => ({
-			__html: getSanitizedLogBody(log?.body || '', { shouldEscapeHtml: true }),
+			__html: getSanitizedLogBody(logBody || '', { shouldEscapeHtml: true }),
 		}),
-		[log?.body],
+		[logBody],
 	);
 
 	const handleJSONCopy = (): void => {
@@ -418,7 +442,7 @@ function LogDetailInner({
 				<div className="log-detail-drawer__log">
 					<Divider type="vertical" className={cx('log-type-indicator', logType)} />
 					<Tooltip
-						title={removeEscapeCharacters(log?.body)}
+						title={removeEscapeCharacters(logBody)}
 						placement="left"
 						mouseLeaveDelay={0}
 					>

frontend/src/constants/features.ts

@@ -9,4 +9,5 @@ export enum FeatureKeys {
 	ANOMALY_DETECTION = 'anomaly_detection',
 	ONBOARDING_V3 = 'onboarding_v3',
 	DOT_METRICS_ENABLED = 'dot_metrics_enabled',
+	BODY_JSON_ENABLED = 'body_json_enabled',
 }

frontend/src/container/Integrations/CloudIntegration/AlertMessage.tsx

@@ -1,8 +1,8 @@
-import { Color } from '@signozhq/design-tokens';
-import { Alert, Spin } from 'antd';
-import { LoaderCircle, TriangleAlert } from 'lucide-react';
+import { Callout } from '@signozhq/ui';
+import { Spin } from 'antd';
+import { LoaderCircle } from 'lucide-react';
 
-import { ModalStateEnum } from '../types';
+import { ModalStateEnum } from '../HeroSection/types';
 
 function AlertMessage({
 	modalState,
@@ -12,14 +12,13 @@ function AlertMessage({
 	switch (modalState) {
 		case ModalStateEnum.WAITING:
 			return (
-				<Alert
-					message={
+				<Callout
+					title={
 						<div className="cloud-account-setup-form__alert-message">
 							<Spin
 								indicator={
 									<LoaderCircle
 										size={14}
-										color={Color.BG_AMBER_400}
 										className="anticon anticon-loading anticon-spin ant-spin-dot"
 									/>
 								}
@@ -28,21 +27,19 @@ function AlertMessage({
 							<span className="retry-time">10</span> secs...
 						</div>
 					}
-					className="cloud-account-setup-form__alert"
-					type="warning"
+					type="info"
+					showIcon={false}
 				/>
 			);
 		case ModalStateEnum.ERROR:
 			return (
-				<Alert
-					message={
+				<Callout
+					title={
 						<div className="cloud-account-setup-form__alert-message">
-							<TriangleAlert type="solid" size={15} color={Color.BG_SAKURA_400} />
 							{`We couldn't establish a connection to your AWS account. Please try again`}
 						</div>
 					}
 					type="error"
-					className="cloud-account-setup-form__alert"
 				/>
 			);
 		default:

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/AccountActions/AccountActions.style.scss

@@ -117,6 +117,12 @@
 		min-width: 140px !important;
 	}
 
+	&.azure {
+		.ant-select-selector {
+			min-width: 282px !important;
+		}
+	}
+
 	.ant-select-item-option-active {
 		background: var(--l3-background) !important;
 	}

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/AccountActions/AccountActions.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom-v5-compat';
 import { Color } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui';
@@ -6,19 +6,29 @@ import { Select, Skeleton } from 'antd';
 import { SelectProps } from 'antd/lib';
 import logEvent from 'api/common/logEvent';
 import { useListAccounts } from 'api/generated/services/cloudintegration';
+import cx from 'classnames';
 import { getAccountById } from 'container/Integrations/CloudIntegration/utils';
-import { INTEGRATION_TYPES } from 'container/Integrations/constants';
+import {
+	CloudAccount as IntegrationCloudAccount,
+	IntegrationType,
+} from 'container/Integrations/types';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { ChevronDown, Dot, PencilLine, Plug, Plus } from 'lucide-react';
 
-import { mapAccountDtoToAwsCloudAccount } from '../../mapAwsCloudAccountFromDto';
-import { CloudAccount } from '../../types';
-import AccountSettingsModal from './AccountSettingsModal';
-import CloudAccountSetupModal from './CloudAccountSetupModal';
+import AzureCloudAccountSetupModal from '../../AzureCloudServices/AddNewAccount/CloudAccountSetupModal';
+import AzureAccountSettingsModal from '../../AzureCloudServices/EditAccount/AccountSettingsModal';
+import {
+	mapAccountDtoToAwsCloudAccount,
+	mapAccountDtoToAzureCloudAccount,
+} from '../../mapCloudAccountFromDto';
+import AwsCloudAccountSetupModal from '../AddNewAccount/CloudAccountSetupModal';
+import AwsAccountSettingsModal from '../EditAccount/AccountSettingsModal';
+import { CloudAccount as AwsCloudAccount } from '../types';
 
 import './AccountActions.style.scss';
 
 function AccountActionsRenderer({
+	type,
 	accounts,
 	isLoading,
 	activeAccount,
@@ -27,9 +37,10 @@ function AccountActionsRenderer({
 	onIntegrationModalOpen,
 	onAccountSettingsModalOpen,
 }: {
-	accounts: CloudAccount[] | undefined;
+	type: IntegrationType;
+	accounts: IntegrationCloudAccount[] | undefined;
 	isLoading: boolean;
-	activeAccount: CloudAccount | null;
+	activeAccount: IntegrationCloudAccount | null;
 	selectOptions: SelectProps['options'];
 	onAccountChange: (value: string) => void;
 	onIntegrationModalOpen: () => void;
@@ -57,9 +68,11 @@ function AccountActionsRenderer({
 						<Select
 							value={activeAccount?.providerAccountId}
 							options={selectOptions}
-							rootClassName="cloud-account-selector"
+							rootClassName={cx('cloud-account-selector', {
+								[type.toLowerCase()]: type,
+							})}
 							popupMatchSelectWidth={false}
-							placeholder="Select AWS Account"
+							placeholder={`Select ${type} Account`}
 							suffixIcon={<ChevronDown size={16} color={Color.BG_VANILLA_400} />}
 							onChange={onAccountChange}
 						/>
@@ -102,21 +115,49 @@ function AccountActionsRenderer({
 	);
 }
 
-function AccountActions(): JSX.Element {
+function AccountActions({ type }: { type: IntegrationType }): JSX.Element {
 	const urlQuery = useUrlQuery();
 	const navigate = useNavigate();
+
 	const { data: listAccountsResponse, isLoading } = useListAccounts({
-		cloudProvider: INTEGRATION_TYPES.AWS,
+		cloudProvider: type,
 	});
-	const accounts = useMemo((): CloudAccount[] | undefined => {
+
+	const accounts = useMemo((): IntegrationCloudAccount[] | undefined => {
 		const raw = listAccountsResponse?.data?.accounts;
+
 		if (!raw) {
 			return undefined;
 		}
-		return raw
-			.map(mapAccountDtoToAwsCloudAccount)
-			.filter((account): account is CloudAccount => account !== null);
-	}, [listAccountsResponse]);
+
+		const mappedAccounts: IntegrationCloudAccount[] = [];
+
+		if (type === IntegrationType.AWS_SERVICES) {
+			raw.forEach((account) => {
+				if (!account) {
+					return;
+				}
+				const mapped = mapAccountDtoToAwsCloudAccount(account);
+				if (mapped) {
+					mappedAccounts.push(mapped);
+				}
+			});
+		}
+
+		if (type === IntegrationType.AZURE_SERVICES) {
+			raw.forEach((account) => {
+				if (!account) {
+					return;
+				}
+				const mapped = mapAccountDtoToAzureCloudAccount(account);
+				if (mapped) {
+					mappedAccounts.push(mapped);
+				}
+			});
+		}
+
+		return mappedAccounts;
+	}, [listAccountsResponse, type]);
 
 	const initialAccount = useMemo(
 		() =>
@@ -127,9 +168,8 @@ function AccountActions(): JSX.Element {
 		[accounts, urlQuery],
 	);
 
-	const [activeAccount, setActiveAccount] = useState<CloudAccount | null>(
-		initialAccount,
-	);
+	const [activeAccount, setActiveAccount] =
+		useState<IntegrationCloudAccount | null>(initialAccount);
 
 	// Update state when initial value changes
 	useEffect(() => {
@@ -149,16 +189,17 @@ function AccountActions(): JSX.Element {
 	}, [initialAccount]);
 
 	const [isIntegrationModalOpen, setIsIntegrationModalOpen] = useState(false);
+
 	const startAccountConnectionAttempt = (): void => {
 		setIsIntegrationModalOpen(true);
-		logEvent('AWS Integration: Account connection attempt started', {});
+		logEvent(`${type} Integration: Account connection attempt started`, {});
 	};
 
 	const [isAccountSettingsModalOpen, setIsAccountSettingsModalOpen] =
 		useState(false);
 	const openAccountSettings = (): void => {
 		setIsAccountSettingsModalOpen(true);
-		logEvent('AWS Integration: Account settings viewed', {
+		logEvent(`${type} Integration: Account settings viewed`, {
 			cloudAccountId: activeAccount?.cloud_account_id,
 		});
 	};
@@ -166,13 +207,16 @@ function AccountActions(): JSX.Element {
 	// log telemetry event when an account is viewed.
 	useEffect(() => {
 		if (activeAccount) {
-			logEvent('AWS Integration: Account viewed', {
+			logEvent(`${type} Integration: Account viewed`, {
 				cloudAccountId: activeAccount?.cloud_account_id,
 				status: activeAccount?.status,
-				enabledRegions: activeAccount?.config?.regions,
+				enabledRegions:
+					'regions' in activeAccount.config
+						? activeAccount.config.regions
+						: activeAccount.config.resource_groups,
 			});
 		}
-	}, [activeAccount]);
+	}, [activeAccount, type]);
 
 	const selectOptions: SelectProps['options'] = useMemo(
 		() =>
@@ -188,6 +232,7 @@ function AccountActions(): JSX.Element {
 	return (
 		<div className="hero-section__actions">
 			<AccountActionsRenderer
+				type={type}
 				accounts={accounts}
 				isLoading={isLoading}
 				activeAccount={activeAccount}
@@ -204,17 +249,39 @@ function AccountActions(): JSX.Element {
 			/>
 
 			{isIntegrationModalOpen && (
-				<CloudAccountSetupModal
-					onClose={(): void => setIsIntegrationModalOpen(false)}
-				/>
+				<>
+					{type === IntegrationType.AWS_SERVICES && (
+						<AwsCloudAccountSetupModal
+							onClose={(): void => setIsIntegrationModalOpen(false)}
+						/>
+					)}
+					{type === IntegrationType.AZURE_SERVICES && (
+						<AzureCloudAccountSetupModal
+							onClose={(): void => setIsIntegrationModalOpen(false)}
+						/>
+					)}
+				</>
 			)}
 
 			{isAccountSettingsModalOpen && activeAccount && (
-				<AccountSettingsModal
-					onClose={(): void => setIsAccountSettingsModalOpen(false)}
-					account={activeAccount}
-					setActiveAccount={setActiveAccount}
-				/>
+				<>
+					{type === IntegrationType.AWS_SERVICES && (
+						<AwsAccountSettingsModal
+							onClose={(): void => setIsAccountSettingsModalOpen(false)}
+							account={activeAccount as AwsCloudAccount}
+							setActiveAccount={
+								setActiveAccount as Dispatch<SetStateAction<AwsCloudAccount | null>>
+							}
+						/>
+					)}
+					{type === IntegrationType.AZURE_SERVICES && (
+						<AzureAccountSettingsModal
+							onClose={(): void => setIsAccountSettingsModalOpen(false)}
+							account={activeAccount}
+							setActiveAccount={setActiveAccount}
+						/>
+					)}
+				</>
 			)}
 		</div>
 	);

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/AddNewAccount/CloudAccountSetupModal.style.scss

@@ -0,0 +1,346 @@
+.cloud-account-setup-modal {
+	background: var(--l1-background);
+	color: var(--l1-foreground);
+
+	[data-slot='drawer-title'] {
+		color: var(--l1-foreground);
+	}
+
+	> div {
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+	}
+
+	&__content {
+		flex: 1;
+		overflow-y: auto;
+		min-height: 0;
+		scrollbar-width: thin;
+		padding-right: 16px;
+
+		&::-webkit-scrollbar-thumb {
+			background: var(--l1-border);
+		}
+
+		&::-webkit-scrollbar-track {
+			background: var(--l1-background);
+		}
+
+		scrollbar-width: thin;
+		scrollbar-color: var(--l3-background) var(--l1-background);
+	}
+
+	.cloud-account-setup-prerequisites {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+
+		&__title {
+			color: var(--l1-foreground);
+			font-size: 14px;
+			font-weight: 500;
+			line-height: 20px;
+			letter-spacing: -0.07px;
+		}
+
+		&__list {
+			display: flex;
+			flex-direction: column;
+			gap: 8px;
+			list-style: none;
+			padding: 0;
+			margin: 0;
+		}
+
+		&__list-item {
+			color: var(--l2-foreground);
+			font-size: 13px;
+			line-height: 18px;
+			letter-spacing: -0.06px;
+
+			display: flex;
+			align-items: center;
+			gap: 16px;
+
+			&-bullet {
+				color: var(--primary);
+				font-weight: 500;
+			}
+
+			&-text {
+				display: flex;
+				align-items: center;
+				gap: 4px;
+			}
+		}
+
+		&__list-item-highlight {
+			color: var(--l1-foreground);
+			font-weight: 500;
+		}
+	}
+
+	.cloud-account-setup-how-it-works-accordion {
+		display: flex;
+		flex-direction: column;
+		margin: 24px 0;
+
+		&__title {
+			display: flex;
+			align-items: center;
+
+			color: var(--l1-foreground);
+			font-size: 14px;
+			font-weight: 500;
+			line-height: 20px;
+			letter-spacing: -0.07px;
+
+			border-radius: 4px;
+			border: 1px solid var(--l2-border);
+			background: var(--l2-background);
+			padding: 4px 16px 4px 0px;
+
+			&.open {
+				border-bottom-left-radius: 0;
+				border-bottom-right-radius: 0;
+			}
+		}
+
+		&__description {
+			display: flex;
+			flex-direction: column;
+			gap: 16px;
+			padding: 16px;
+			opacity: 0;
+			transform: translateY(-8px);
+			animation: cloud-account-setup-accordion-reveal 220ms ease-out forwards;
+
+			border-radius: 4px;
+
+			border-top: none;
+			border-top-left-radius: 0;
+			border-top-right-radius: 0;
+
+			border: 1px solid var(--l2-border);
+			background: var(--l2-background);
+
+			&-item {
+				display: flex;
+				flex-direction: column;
+				gap: 8px;
+
+				color: var(--l1-foreground);
+				font-size: 13px;
+				line-height: 18px;
+				letter-spacing: -0.06px;
+			}
+
+			@media (prefers-reduced-motion: reduce) {
+				animation: none;
+				opacity: 1;
+				transform: none;
+			}
+		}
+	}
+
+	.cloud-account-setup-form__code-block-tabs {
+		padding: 8px;
+		border-radius: 4px;
+		border: 1px solid var(--l2-border);
+		background: var(--l2-background);
+
+		&-header {
+			display: flex;
+			flex-direction: column;
+			gap: 12px;
+
+			margin-bottom: 12px;
+
+			&-title {
+				color: var(--l1-foreground);
+				font-size: 14px;
+				font-weight: 500;
+				line-height: 20px;
+				letter-spacing: -0.07px;
+			}
+
+			&-description {
+				color: var(--l2-foreground);
+				font-size: 12px;
+				font-weight: 400;
+				line-height: 18px;
+				letter-spacing: -0.06px;
+			}
+		}
+
+		[role='tablist'] {
+			gap: 8px !important;
+		}
+
+		[role='tabpanel'] {
+			padding: 0 !important;
+		}
+
+		[data-slot='tabs-trigger'] {
+			padding: 4px 24px !important;
+			border: none !important;
+			background-color: transparent !important;
+			font-size: 12px !important;
+		}
+	}
+
+	@keyframes cloud-account-setup-accordion-reveal {
+		from {
+			opacity: 0;
+			transform: translateY(-8px);
+		}
+
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	.account-setup-modal-footer {
+		&__confirm-button {
+			background: var(--primary-background);
+			color: var(--primary-foreground);
+			font-size: 12px;
+			font-weight: 500;
+		}
+		&__confirm-selection-count {
+			font-family: 'Geist Mono';
+		}
+		&__close-button {
+			background: var(--l1-background);
+			border: 1px solid var(--l1-border);
+			border-radius: 2px;
+			color: var(--l1-foreground);
+			font-family: 'Inter';
+			font-size: 12px;
+			font-weight: 500;
+
+			&:hover {
+				border-color: var(--l1-border);
+				color: var(--l1-foreground);
+			}
+		}
+	}
+
+	.cloud-account-setup-form {
+		.disabled {
+			opacity: 0.4;
+		}
+
+		&,
+		&__content {
+			display: flex;
+			flex-direction: column;
+			gap: 24px;
+		}
+
+		&__alert {
+			width: 100%;
+
+			[data-slot='callout'] {
+				width: 100%;
+				box-sizing: border-box;
+			}
+
+			&-message {
+				display: flex;
+				align-items: center;
+				gap: 8px;
+				color: var(--l1-foreground);
+
+				.retry-time {
+					font-family: 'Geist Mono';
+					font-size: 14px;
+					font-weight: 600;
+					line-height: 22px;
+					letter-spacing: -0.07px;
+				}
+			}
+		}
+
+		&__form-group {
+			display: flex;
+			flex-direction: column;
+			gap: 12px;
+		}
+
+		&__title {
+			color: var(--l1-foreground);
+			font-size: 14px;
+			font-weight: 500;
+			line-height: 20px;
+			letter-spacing: -0.07px;
+		}
+		&__description {
+			color: var(--l2-foreground);
+			font-size: 12px;
+			font-weight: 400;
+			line-height: 18px;
+			letter-spacing: -0.06px;
+		}
+		&__select {
+			.ant-select-selection-item {
+				color: var(--l1-foreground);
+				font-size: 14px;
+				line-height: 20px;
+				letter-spacing: -0.07px;
+			}
+		}
+		&__form-item {
+			margin: 0;
+		}
+		&__include-all-regions-switch {
+			display: flex;
+			align-items: center;
+			gap: 10px;
+			color: var(--l2-foreground);
+			font-size: 12px;
+			line-height: 18px;
+			letter-spacing: -0.06px;
+			margin-bottom: 12px;
+			&-label {
+				background-color: transparent;
+				border: none;
+				color: var(--l2-foreground);
+				font-size: 12px;
+				line-height: 18px;
+				letter-spacing: -0.06px;
+				cursor: pointer;
+			}
+		}
+		&__note {
+			padding: 12px;
+			color: var(--callout-primary-description);
+			font-size: 12px;
+			line-height: 22px;
+			letter-spacing: -0.06px;
+			border-radius: 4px;
+			border: 1px solid
+				color-mix(in srgb, var(--primary-background) 10%, transparent);
+			background: color-mix(in srgb, var(--primary-background) 10%, transparent);
+		}
+		&__submit-button {
+			border-radius: 2px;
+			background: var(--primary-background);
+			color: var(--primary-foreground);
+			font-size: 14px;
+			font-weight: 500;
+			line-height: 20px;
+			&-content {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				gap: 8px;
+			}
+			&:disabled {
+				opacity: 0.4;
+			}
+		}
+	}
+}

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/AddNewAccount/CloudAccountSetupModal.tsx

@@ -8,8 +8,8 @@ import {
 	ActiveViewEnum,
 	IntegrationModalProps,
 	ModalStateEnum,
-} from '../types';
-import { RegionForm } from './RegionForm';
+} from '../../../HeroSection/types';
+import { RegionForm } from '../RegionForm/RegionForm';
 
 import './CloudAccountSetupModal.style.scss';
 
@@ -74,8 +74,6 @@ function CloudAccountSetupModal({
 		isConnectionParamsLoading,
 		setSelectedRegions,
 		setIncludeAllRegions,
-		isLoading,
-		isGeneratingUrl,
 		handleConnectionSuccess,
 		handleConnectionTimeout,
 		handleConnectionError,

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/EditAccount/AccountSettingsModal.tsx

@@ -9,10 +9,10 @@ import useUrlQuery from 'hooks/useUrlQuery';
 import history from 'lib/history';
 import { Save } from 'lucide-react';
 
-import logEvent from '../../../../../../api/common/logEvent';
-import { CloudAccount } from '../../types';
-import { RegionSelector } from './RegionSelector';
-import RemoveIntegrationAccount from './RemoveIntegrationAccount';
+import logEvent from '../../../../../api/common/logEvent';
+import RemoveIntegrationAccount from '../../RemoveAccount/RemoveIntegrationAccount';
+import { RegionSelector } from '../RegionForm/RegionSelector';
+import { CloudAccount } from '../types';
 
 import './AccountSettingsModal.style.scss';
 
@@ -110,11 +110,7 @@ function AccountSettingsModal({
 		form,
 		selectedRegions,
 		includeAllRegions,
-		account?.id,
-		handleRemoveIntegrationAccountSuccess,
-		isSaveDisabled,
-		handleSubmit,
-		isLoading,
+		account?.providerAccountId,
 		setSelectedRegions,
 		setIncludeAllRegions,
 	]);
@@ -133,6 +129,7 @@ function AccountSettingsModal({
 			<RemoveIntegrationAccount
 				accountId={account?.id}
 				onRemoveIntegrationAccountSuccess={handleRemoveIntegrationAccountSuccess}
+				cloudProvider={INTEGRATION_TYPES.AWS}
 			/>
 
 			<Button

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/HeroSection.tsx

@@ -1,28 +0,0 @@
-import awsDarkLogoUrl from '@/assets/Logos/aws-dark.svg';
-
-import AccountActions from './components/AccountActions';
-
-import './HeroSection.style.scss';
-
-function HeroSection(): JSX.Element {
-	return (
-		<div className="hero-section">
-			<div className="hero-section__details">
-				<div className="hero-section__details-header">
-					<div className="hero-section__icon">
-						<img src={awsDarkLogoUrl} alt="AWS" />
-					</div>
-
-					<div className="hero-section__details-title">AWS</div>
-				</div>
-				<div className="hero-section__details-description">
-					AWS is a cloud computing platform that provides a range of services for
-					building and running applications.
-				</div>
-			</div>
-			<AccountActions />
-		</div>
-	);
-}
-
-export default HeroSection;

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/CloudAccountSetupModal.style.scss

@@ -1,180 +0,0 @@
-.cloud-account-setup-modal {
-	background: var(--l1-background);
-	color: var(--l1-foreground);
-
-	[data-slot='drawer-title'] {
-		color: var(--l1-foreground);
-	}
-
-	> div {
-		display: flex;
-		flex-direction: column;
-		overflow: hidden;
-	}
-
-	&__content {
-		flex: 1;
-		overflow-y: auto;
-		min-height: 0;
-		scrollbar-width: thin;
-
-		&::-webkit-scrollbar {
-			width: 2px;
-		}
-	}
-
-	.account-setup-modal-footer {
-		&__confirm-button {
-			background: var(--primary-background);
-			color: var(--primary-foreground);
-			font-size: 12px;
-			font-weight: 500;
-		}
-		&__confirm-selection-count {
-			font-family: 'Geist Mono';
-		}
-		&__close-button {
-			background: var(--l1-background);
-			border: 1px solid var(--l1-border);
-			border-radius: 2px;
-			color: var(--l1-foreground);
-			font-family: 'Inter';
-			font-size: 12px;
-			font-weight: 500;
-
-			&:hover {
-				border-color: var(--l1-border);
-				color: var(--l1-foreground);
-			}
-		}
-	}
-
-	.cloud-account-setup-form {
-		.disabled {
-			opacity: 0.4;
-		}
-
-		&,
-		&__content {
-			display: flex;
-			flex-direction: column;
-			gap: 24px;
-		}
-
-		&__alert {
-			&.ant-alert {
-				padding: 12px;
-				border-radius: 6px;
-				font-size: 14px;
-				line-height: 22px; /* 157.143% */
-				letter-spacing: -0.07px;
-			}
-
-			&.ant-alert-error {
-				color: var(--danger-foreground);
-				border: 1px solid
-					color-mix(in srgb, var(--danger-background) 10%, transparent);
-				background: color-mix(in srgb, var(--danger-background) 10%, transparent);
-			}
-
-			&.ant-alert-warning {
-				color: var(--warning-foreground);
-				border: 1px solid
-					color-mix(in srgb, var(--warning-background) 10%, transparent);
-				background: color-mix(in srgb, var(--warning-background) 10%, transparent);
-			}
-
-			&-message {
-				display: flex;
-				align-items: center;
-				gap: 8px;
-				color: var(--l1-foreground);
-
-				.retry-time {
-					font-family: 'Geist Mono';
-					font-size: 14px;
-					font-weight: 600;
-					line-height: 22px;
-					letter-spacing: -0.07px;
-				}
-			}
-		}
-		&__form-group {
-			display: flex;
-			flex-direction: column;
-			gap: 12px;
-		}
-		&__title {
-			color: var(--l1-foreground);
-			font-size: 14px;
-			font-weight: 500;
-			line-height: 20px;
-			letter-spacing: -0.07px;
-		}
-		&__description {
-			color: var(--l2-foreground);
-			font-size: 12px;
-			font-weight: 400;
-			line-height: 18px;
-			letter-spacing: -0.06px;
-		}
-		&__select {
-			.ant-select-selection-item {
-				color: var(--l1-foreground);
-				font-size: 14px;
-				line-height: 20px;
-				letter-spacing: -0.07px;
-			}
-		}
-		&__form-item {
-			margin: 0;
-		}
-		&__include-all-regions-switch {
-			display: flex;
-			align-items: center;
-			gap: 10px;
-			color: var(--l2-foreground);
-			font-size: 12px;
-			line-height: 18px;
-			letter-spacing: -0.06px;
-			margin-bottom: 12px;
-			&-label {
-				background-color: transparent;
-				border: none;
-				color: var(--l2-foreground);
-				font-size: 12px;
-				line-height: 18px;
-				letter-spacing: -0.06px;
-				cursor: pointer;
-			}
-		}
-		&__note {
-			padding: 12px;
-			color: var(--callout-primary-description);
-			font-size: 12px;
-			line-height: 22px;
-			letter-spacing: -0.06px;
-			border-radius: 4px;
-			border: 1px solid
-				color-mix(in srgb, var(--primary-background) 10%, transparent);
-			background: color-mix(in srgb, var(--primary-background) 10%, transparent);
-		}
-		&__submit-button {
-			border-radius: 2px;
-			background: var(--primary-background);
-			color: var(--primary-foreground);
-			font-size: 14px;
-			font-weight: 500;
-			line-height: 20px;
-			&-content {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				gap: 8px;
-			}
-			&:disabled {
-				opacity: 0.4;
-			}
-		}
-	}
-}

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/IntegrateNowFormSections.tsx

@@ -5,7 +5,7 @@ import { ChevronDown } from 'lucide-react';
 import { Region } from 'utils/regions';
 import { popupContainer } from 'utils/selectPopupContainer';
 
-import { RegionSelector } from './RegionSelector';
+import { RegionSelector } from './RegionForm/RegionSelector';
 
 // Form section components
 function RegionDeploymentSection({

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/RegionForm/RegionForm.tsx

@@ -3,15 +3,18 @@ import { Form } from 'antd';
 import { useGetAccount } from 'api/generated/services/cloudintegration';
 import cx from 'classnames';
 import { INTEGRATION_TYPES } from 'container/Integrations/constants';
+import {
+	ModalStateEnum,
+	RegionFormProps,
+} from 'container/Integrations/HeroSection/types';
 import { regions } from 'utils/regions';
 
-import { ModalStateEnum, RegionFormProps } from '../types';
-import AlertMessage from './AlertMessage';
+import AlertMessage from '../../AlertMessage';
 import {
 	ComplianceNote,
 	MonitoringRegionsSection,
 	RegionDeploymentSection,
-} from './IntegrateNowFormSections';
+} from '../IntegrateNowFormSections';
 import RenderConnectionFields from './RenderConnectionParams';
 
 export function RegionForm({
@@ -76,8 +79,6 @@ export function RegionForm({
 			layout="vertical"
 			onFinish={onSubmit}
 		>
-			<AlertMessage modalState={modalState} />
-
 			<div
 				className={cx(`cloud-account-setup-form__content`, {
 					disabled: isFormDisabled,
@@ -100,6 +101,10 @@ export function RegionForm({
 					isFormDisabled={isFormDisabled}
 				/>
 			</div>
+
+			<div className="cloud-account-setup-form__alert">
+				<AlertMessage modalState={modalState} />
+			</div>
 		</Form>
 	);
 }

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/S3BucketsSelector/S3BucketsSelector.tsx

@@ -4,7 +4,7 @@ import { useListAccounts } from 'api/generated/services/cloudintegration';
 import { INTEGRATION_TYPES } from 'container/Integrations/constants';
 import useUrlQuery from 'hooks/useUrlQuery';
 
-import { mapAccountDtoToAwsCloudAccount } from '../mapAwsCloudAccountFromDto';
+import { mapAccountDtoToAwsCloudAccount } from '../../mapCloudAccountFromDto';
 import { CloudAccount } from '../types';
 
 import './S3BucketsSelector.styles.scss';

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/ServiceDetails/ServiceDetails.tsx

@@ -12,14 +12,14 @@ import {
 	useUpdateService,
 } from 'api/generated/services/cloudintegration';
 import {
+	CloudintegrationtypesServiceConfigDTO,
 	CloudintegrationtypesServiceDTO,
 	ListServicesMetadata200,
 } from 'api/generated/services/sigNoz.schemas';
 import CloudServiceDataCollected from 'components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected';
 import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
-import ServiceDashboards from 'container/Integrations/CloudIntegration/AmazonWebServices/ServiceDashboards/ServiceDashboards';
-import { INTEGRATION_TYPES } from 'container/Integrations/constants';
-import { IServiceStatus } from 'container/Integrations/types';
+import ServiceDashboards from 'container/Integrations/CloudIntegration/ServiceDashboards/ServiceDashboards';
+import { IntegrationType, IServiceStatus } from 'container/Integrations/types';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { Save, X } from 'lucide-react';
 
@@ -36,7 +36,81 @@ type ServiceDetailsData = CloudintegrationtypesServiceDTO & {
 	status?: IServiceStatus;
 };
 
-function ServiceDetails(): JSX.Element | null {
+const EMPTY_FORM_VALUES: ServiceConfigFormValues = {
+	logsEnabled: false,
+	metricsEnabled: false,
+	s3BucketsByRegion: {},
+};
+
+function getInitialFormValues(
+	type: IntegrationType,
+	serviceDetailsData?: ServiceDetailsData,
+): ServiceConfigFormValues {
+	const integrationConfig =
+		type === IntegrationType.AWS_SERVICES
+			? serviceDetailsData?.cloudIntegrationService?.config?.aws
+			: serviceDetailsData?.cloudIntegrationService?.config?.azure;
+
+	return {
+		logsEnabled: integrationConfig?.logs?.enabled || false,
+		metricsEnabled: integrationConfig?.metrics?.enabled || false,
+		s3BucketsByRegion:
+			type === IntegrationType.AWS_SERVICES
+				? serviceDetailsData?.cloudIntegrationService?.config?.aws?.logs
+						?.s3Buckets || {}
+				: {},
+	};
+}
+
+function getServiceConfigPayload({
+	type,
+	serviceId,
+	logsEnabled,
+	metricsEnabled,
+	isLogsSupported,
+	isMetricsSupported,
+	s3BucketsByRegion,
+}: {
+	type: IntegrationType;
+	serviceId: string;
+	logsEnabled: boolean;
+	metricsEnabled: boolean;
+	isLogsSupported: boolean;
+	isMetricsSupported: boolean;
+	s3BucketsByRegion: Record<string, string[]>;
+}): CloudintegrationtypesServiceConfigDTO {
+	if (type === IntegrationType.AWS_SERVICES) {
+		return {
+			aws: {
+				logs: {
+					enabled: isLogsSupported ? logsEnabled : false,
+					s3Buckets:
+						serviceId === 's3sync' && isLogsSupported ? s3BucketsByRegion : {},
+				},
+				metrics: {
+					enabled: isMetricsSupported ? metricsEnabled : false,
+				},
+			},
+		};
+	}
+
+	return {
+		azure: {
+			logs: {
+				enabled: isLogsSupported ? logsEnabled : false,
+			},
+			metrics: {
+				enabled: isMetricsSupported ? metricsEnabled : false,
+			},
+		},
+	};
+}
+
+function ServiceDetails({
+	type,
+}: {
+	type: IntegrationType;
+}): JSX.Element | null {
 	const urlQuery = useUrlQuery();
 	const cloudAccountId = urlQuery.get('cloudAccountId');
 	const serviceId = urlQuery.get('service');
@@ -51,7 +125,7 @@ function ServiceDetails(): JSX.Element | null {
 		isLoading: isServiceDetailsLoading,
 	} = useGetService(
 		{
-			cloudProvider: INTEGRATION_TYPES.AWS,
+			cloudProvider: type,
 			serviceId: serviceId || '',
 		},
 		{
@@ -65,10 +139,17 @@ function ServiceDetails(): JSX.Element | null {
 		},
 	);
 
-	const awsConfig = serviceDetailsData?.cloudIntegrationService?.config?.aws;
+	const integrationConfig =
+		type === IntegrationType.AWS_SERVICES
+			? serviceDetailsData?.cloudIntegrationService?.config?.aws
+			: serviceDetailsData?.cloudIntegrationService?.config?.azure;
 	const isServiceEnabledInPersistedConfig =
-		Boolean(awsConfig?.logs?.enabled) || Boolean(awsConfig?.metrics?.enabled);
+		Boolean(integrationConfig?.logs?.enabled) ||
+		Boolean(integrationConfig?.metrics?.enabled);
 	const serviceDetailsId = serviceDetailsData?.id;
+	const isLogsSupported = serviceDetailsData?.supportedSignals?.logs || false;
+	const isMetricsSupported =
+		serviceDetailsData?.supportedSignals?.metrics || false;
 
 	const {
 		control,
@@ -77,43 +158,31 @@ function ServiceDetails(): JSX.Element | null {
 		watch,
 		formState: { isDirty },
 	} = useForm<ServiceConfigFormValues>({
-		defaultValues: {
-			logsEnabled: awsConfig?.logs?.enabled || false,
-			metricsEnabled: awsConfig?.metrics?.enabled || false,
-			s3BucketsByRegion: awsConfig?.logs?.s3Buckets || {},
-		},
+		defaultValues: getInitialFormValues(type, serviceDetailsData),
 	});
 
-	const resetToAwsConfig = useCallback((): void => {
-		reset({
-			logsEnabled: awsConfig?.logs?.enabled || false,
-			metricsEnabled: awsConfig?.metrics?.enabled || false,
-			s3BucketsByRegion: awsConfig?.logs?.s3Buckets || {},
-		});
-	}, [awsConfig, reset]);
+	const resetToConfig = useCallback((): void => {
+		reset(getInitialFormValues(type, serviceDetailsData));
+	}, [reset, serviceDetailsData, type]);
 
 	// Ensure form state does not leak across service switches while new details load.
 	useEffect(() => {
-		reset({
-			logsEnabled: false,
-			metricsEnabled: false,
-			s3BucketsByRegion: {},
-		});
+		reset(EMPTY_FORM_VALUES);
 	}, [reset, serviceId]);
 
 	useEffect(() => {
-		resetToAwsConfig();
-	}, [resetToAwsConfig, serviceDetailsId]);
+		resetToConfig();
+	}, [resetToConfig, serviceDetailsId]);
 
 	// log telemetry event on visiting details of a service.
 	useEffect(() => {
 		if (serviceId) {
-			logEvent('AWS Integration: Service viewed', {
+			logEvent(`${type} Integration: Service viewed`, {
 				cloudAccountId,
 				serviceId,
 			});
 		}
-	}, [cloudAccountId, serviceId]);
+	}, [cloudAccountId, serviceId, type]);
 
 	const { mutate: updateService, isLoading: isUpdatingServiceConfig } =
 		useUpdateService();
@@ -121,8 +190,8 @@ function ServiceDetails(): JSX.Element | null {
 	const queryClient = useQueryClient();
 
 	const handleDiscard = useCallback((): void => {
-		resetToAwsConfig();
-	}, [resetToAwsConfig]);
+		resetToConfig();
+	}, [resetToConfig]);
 
 	const onSubmit = useCallback(
 		async (values: ServiceConfigFormValues): Promise<void> => {
@@ -141,25 +210,25 @@ function ServiceDetails(): JSX.Element | null {
 					return;
 				}
 
+				const serviceConfigPayload = getServiceConfigPayload({
+					type,
+					serviceId,
+					logsEnabled,
+					metricsEnabled,
+					isLogsSupported,
+					isMetricsSupported,
+					s3BucketsByRegion: normalizedS3BucketsByRegion,
+				});
+
 				updateService(
 					{
 						pathParams: {
-							cloudProvider: INTEGRATION_TYPES.AWS,
+							cloudProvider: type,
 							id: cloudAccountId,
 							serviceId,
 						},
 						data: {
-							config: {
-								aws: {
-									logs: {
-										enabled: logsEnabled,
-										s3Buckets: normalizedS3BucketsByRegion,
-									},
-									metrics: {
-										enabled: metricsEnabled,
-									},
-								},
-							},
+							config: serviceConfigPayload,
 						},
 					},
 					{
@@ -170,7 +239,7 @@ function ServiceDetails(): JSX.Element | null {
 
 							const servicesListQueryKey = getListServicesMetadataQueryKey(
 								{
-									cloudProvider: INTEGRATION_TYPES.AWS,
+									cloudProvider: type,
 								},
 								{
 									cloud_integration_id: cloudAccountId,
@@ -203,7 +272,7 @@ function ServiceDetails(): JSX.Element | null {
 							invalidateGetService(
 								queryClient,
 								{
-									cloudProvider: INTEGRATION_TYPES.AWS,
+									cloudProvider: type,
 									serviceId,
 								},
 								{
@@ -214,14 +283,14 @@ function ServiceDetails(): JSX.Element | null {
 							invalidateListServicesMetadata(
 								queryClient,
 								{
-									cloudProvider: INTEGRATION_TYPES.AWS,
+									cloudProvider: type,
 								},
 								{
 									cloud_integration_id: cloudAccountId,
 								},
 							);
 
-							logEvent('AWS Integration: Service settings saved', {
+							logEvent(`${type} Integration: Service settings saved`, {
 								cloudAccountId,
 								serviceId,
 								logsEnabled,
@@ -241,7 +310,16 @@ function ServiceDetails(): JSX.Element | null {
 				console.error('Form submission failed:', error);
 			}
 		},
-		[serviceId, cloudAccountId, updateService, queryClient, reset],
+		[
+			serviceId,
+			cloudAccountId,
+			updateService,
+			queryClient,
+			reset,
+			type,
+			isLogsSupported,
+			isMetricsSupported,
+		],
 	);
 
 	if (isServiceDetailsLoading) {
@@ -262,10 +340,6 @@ function ServiceDetails(): JSX.Element | null {
 		const logsEnabled = watch('logsEnabled');
 		const s3BucketsByRegion = watch('s3BucketsByRegion');
 
-		const isLogsSupported = serviceDetailsData?.supportedSignals?.logs || false;
-		const isMetricsSupported =
-			serviceDetailsData?.supportedSignals?.metrics || false;
-
 		const hasUnsavedChanges = isDirty;
 
 		const isS3SyncBucketsMissing =

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/ServicesTabs.tsx

@@ -1,29 +0,0 @@
-import useUrlQuery from 'hooks/useUrlQuery';
-
-import HeroSection from './HeroSection/HeroSection';
-import ServiceDetails from './ServiceDetails/ServiceDetails';
-import ServicesList from './ServicesList';
-
-import './ServicesTabs.style.scss';
-
-function ServicesTabs(): JSX.Element {
-	const urlQuery = useUrlQuery();
-	const cloudAccountId = urlQuery.get('cloudAccountId') || '';
-
-	return (
-		<div className="services-tabs">
-			<HeroSection />
-
-			<div className="services-section">
-				<div className="services-section__sidebar">
-					<ServicesList cloudAccountId={cloudAccountId} />
-				</div>
-				<div className="services-section__content">
-					<ServiceDetails />
-				</div>
-			</div>
-		</div>
-	);
-}
-
-export default ServicesTabs;

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/__tests__/utils.tsx

@@ -1,4 +1,5 @@
 import { render, RenderResult, screen, waitFor } from '@testing-library/react';
+import { IntegrationType } from 'container/Integrations/types';
 import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
 
 import ServiceDetails from '../ServiceDetails/ServiceDetails';
@@ -11,10 +12,11 @@ import { accountsResponse } from './mockData';
 const renderServiceDetails = (
 	_initialConfigLogsS3Buckets: Record<string, string[]> = {},
 	_serviceId = 's3sync',
+	type: IntegrationType = IntegrationType.AWS_SERVICES,
 ): RenderResult =>
 	render(
 		<MockQueryClientProvider>
-			<ServiceDetails />
+			<ServiceDetails type={type} />
 		</MockQueryClientProvider>,
 	);
 

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/mapAwsCloudAccountFromDto.ts

@@ -1,25 +0,0 @@
-import { CloudintegrationtypesAccountDTO } from 'api/generated/services/sigNoz.schemas';
-
-import { CloudAccount } from './types';
-
-export function mapAccountDtoToAwsCloudAccount(
-	account: CloudintegrationtypesAccountDTO,
-): CloudAccount | null {
-	if (!account.providerAccountId) {
-		return null;
-	}
-
-	return {
-		id: account.id,
-		cloud_account_id: account.id,
-		config: {
-			regions: account.config?.aws?.regions ?? [],
-		},
-		status: {
-			integration: {
-				last_heartbeat_ts_ms: account.agentReport?.timestampMillis ?? 0,
-			},
-		},
-		providerAccountId: account.providerAccountId,
-	};
-}

frontend/src/container/Integrations/CloudIntegration/AzureCloudServices/AddNewAccount/CloudAccountSetupModal.tsx

@@ -0,0 +1,351 @@
+import { useCallback, useRef, useState } from 'react';
+import { Color } from '@signozhq/design-tokens';
+import { ChevronDown, ChevronRight } from '@signozhq/icons';
+import { Button, Callout, DrawerWrapper, Tabs } from '@signozhq/ui';
+import { Form, Select, Spin } from 'antd';
+import { useGetAccount } from 'api/generated/services/cloudintegration';
+import { CloudintegrationtypesAccountDTO } from 'api/generated/services/sigNoz.schemas';
+import CodeBlock from 'components/CodeBlock/CodeBlock';
+import {
+	AZURE_REGIONS,
+	INTEGRATION_TYPES,
+} from 'container/Integrations/constants';
+import {
+	IntegrationModalProps,
+	ModalStateEnum,
+} from 'container/Integrations/HeroSection/types';
+import { LoaderCircle, SquareArrowOutUpRight } from 'lucide-react';
+import { popupContainer } from 'utils/selectPopupContainer';
+
+import { useIntegrationModal } from '../../../../../hooks/integration/azure/useIntegrationModal';
+import RenderConnectionFields from '../../AmazonWebServices/RegionForm/RenderConnectionParams';
+
+import '../../AmazonWebServices/AddNewAccount/CloudAccountSetupModal.style.scss';
+
+function CloudAccountSetupModal({
+	onClose,
+}: IntegrationModalProps): JSX.Element {
+	const {
+		form,
+		modalState,
+		isLoading,
+		accountId,
+		connectionCommands,
+		handleSubmit,
+		handleClose,
+		connectionParams,
+		isConnectionParamsLoading,
+		handleConnectionSuccess,
+		handleConnectionTimeout,
+		handleConnectionError,
+	} = useIntegrationModal({ onClose });
+
+	const startTimeRef = useRef(Date.now());
+	const refetchInterval = 10 * 1000;
+	const errorTimeout = 10 * 60 * 1000;
+
+	const [isHowItWorksOpen, setIsHowItWorksOpen] = useState(true);
+	const [activeTab, setActiveTab] = useState('cli');
+
+	useGetAccount(
+		{
+			cloudProvider: INTEGRATION_TYPES.AZURE,
+			id: accountId ?? '',
+		},
+		{
+			query: {
+				enabled: Boolean(accountId) && modalState === ModalStateEnum.WAITING,
+				refetchInterval,
+				select: (response): CloudintegrationtypesAccountDTO => response.data,
+				onSuccess: (account) => {
+					const isConnected =
+						Boolean(account.providerAccountId) && account.removedAt === null;
+
+					if (isConnected) {
+						handleConnectionSuccess({
+							cloudAccountId: account.providerAccountId ?? account.id,
+							status: account.agentReport,
+						});
+					} else if (Date.now() - startTimeRef.current >= errorTimeout) {
+						handleConnectionTimeout({ id: accountId });
+					}
+				},
+				onError: () => {
+					handleConnectionError();
+				},
+			},
+		},
+	);
+
+	const renderAlert = useCallback((): JSX.Element | null => {
+		if (modalState === ModalStateEnum.WAITING) {
+			return (
+				<div className="cloud-account-setup-form__alert">
+					<Callout
+						title={
+							<div className="cloud-account-setup-form__alert-message">
+								<Spin
+									indicator={
+										<LoaderCircle
+											size={14}
+											className="anticon anticon-loading anticon-spin ant-spin-dot"
+										/>
+									}
+								/>
+								Waiting for Azure account connection, retrying in{' '}
+								<span className="retry-time">10</span> secs...
+							</div>
+						}
+						type="info"
+						showIcon={false}
+					/>
+				</div>
+			);
+		}
+
+		if (modalState === ModalStateEnum.ERROR) {
+			return (
+				<div className="cloud-account-setup-form__alert">
+					<Callout
+						title={
+							<div className="cloud-account-setup-form__alert-message">
+								We couldn&apos;t establish a connection to your Azure account. Please
+								try again
+							</div>
+						}
+						type="error"
+					/>
+				</div>
+			);
+		}
+
+		return null;
+	}, [modalState]);
+
+	const footer = (
+		<div className="cloud-account-setup-modal__footer">
+			{modalState === ModalStateEnum.FORM && (
+				<Button
+					variant="solid"
+					color="primary"
+					prefix={<SquareArrowOutUpRight size={17} color={Color.BG_VANILLA_100} />}
+					onClick={handleSubmit}
+					loading={isLoading}
+				>
+					Generate Azure Setup Commands
+				</Button>
+			)}
+		</div>
+	);
+
+	return (
+		<DrawerWrapper
+			open={true}
+			className="cloud-account-setup-modal"
+			onOpenChange={(open): void => {
+				if (!open) {
+					handleClose();
+				}
+			}}
+			direction="right"
+			showCloseButton
+			title="Add Azure Account"
+			width="wide"
+			footer={footer}
+		>
+			<div className="cloud-account-setup-modal__content">
+				<div className="cloud-account-setup-prerequisites">
+					<div className="cloud-account-setup-prerequisites__title">
+						Prerequisites
+					</div>
+
+					<ul className="cloud-account-setup-prerequisites__list">
+						<li className="cloud-account-setup-prerequisites__list-item">
+							<span className="cloud-account-setup-prerequisites__list-item-bullet">
+								—
+							</span>{' '}
+							<span className="cloud-account-setup-prerequisites__list-item-text">
+								Ensure that you&apos;re logged in to the Azure workspace which you want
+								to monitor.
+							</span>
+						</li>
+						<li className="cloud-account-setup-prerequisites__list-item">
+							<span className="cloud-account-setup-prerequisites__list-item-bullet">
+								—
+							</span>{' '}
+							<span className="cloud-account-setup-prerequisites__list-item-text">
+								Ensure that you either have the{' '}
+								<span className="cloud-account-setup-prerequisites__list-item-highlight">
+									Owner
+								</span>{' '}
+								role OR
+							</span>
+						</li>
+						<li className="cloud-account-setup-prerequisites__list-item">
+							<span className="cloud-account-setup-prerequisites__list-item-bullet">
+								—
+							</span>{' '}
+							<span className="cloud-account-setup-prerequisites__list-item-text">
+								Both the{' '}
+								<span className="cloud-account-setup-prerequisites__list-item-highlight">
+									Contributor
+								</span>{' '}
+								and{' '}
+								<span className="cloud-account-setup-prerequisites__list-item-highlight">
+									user access admin
+								</span>{' '}
+								roles
+							</span>
+						</li>
+					</ul>
+				</div>
+
+				<div className="cloud-account-setup-how-it-works-accordion">
+					<div
+						className={`cloud-account-setup-how-it-works-accordion__title ${
+							isHowItWorksOpen ? 'open' : ''
+						}`}
+					>
+						<Button
+							variant="link"
+							color="secondary"
+							onClick={(): void => setIsHowItWorksOpen(!isHowItWorksOpen)}
+							prefix={isHowItWorksOpen ? <ChevronDown /> : <ChevronRight />}
+						/>
+
+						<span className="cloud-account-setup-how-it-works-accordion__title-text">
+							How it works?
+						</span>
+					</div>
+					{isHowItWorksOpen && (
+						<div className="cloud-account-setup-how-it-works-accordion__description">
+							<div className="cloud-account-setup-how-it-works-accordion__description-item">
+								SigNoz will create new resource-group to manage the resources required
+								for this integration. The following steps will create a User-Assigned
+								Managed Identity with the necessary permissions and follows the
+								Principle of Least Privilege.
+							</div>
+							<div className="cloud-account-setup-how-it-works__description-item">
+								Once the Integration template is deployed, you can enable the services
+								you want to monitor right here in Signoz dashboard.
+							</div>
+						</div>
+					)}
+				</div>
+
+				<Form
+					form={form}
+					className="cloud-account-setup-form"
+					layout="vertical"
+					initialValues={{ resourceGroups: [] }}
+				>
+					<div className="cloud-account-setup-form__content">
+						<div className="cloud-account-setup-form__form-group">
+							<div className="cloud-account-setup-form__title">
+								Where should we deploy the SigNoz collector resources?
+							</div>
+							<div className="cloud-account-setup-form__description">
+								Choose the Azure region for deployment.
+							</div>
+							<Form.Item
+								name="region"
+								rules={[{ required: true, message: 'Please select a region' }]}
+								className="cloud-account-setup-form__form-item"
+							>
+								<Select
+									placeholder="e.g. East US"
+									options={AZURE_REGIONS.map((region) => ({
+										label: `${region.label} (${region.value})`,
+										value: region.value,
+									}))}
+									getPopupContainer={popupContainer}
+									disabled={modalState === ModalStateEnum.WAITING}
+								/>
+							</Form.Item>
+						</div>
+
+						<div className="cloud-account-setup-form__form-group">
+							<div className="cloud-account-setup-form__title">
+								Which resource groups do you want to monitor?
+							</div>
+							<div className="cloud-account-setup-form__description">
+								Add one or more Azure resource group names.
+							</div>
+							<Form.Item
+								name="resourceGroups"
+								rules={[
+									{
+										required: true,
+										type: 'array',
+										min: 1,
+										message: 'Please add at least one resource group',
+									},
+								]}
+								className="cloud-account-setup-form__form-item"
+							>
+								<Select
+									mode="tags"
+									placeholder="e.g. prod-platform-rg"
+									tokenSeparators={[',']}
+									disabled={modalState === ModalStateEnum.WAITING}
+								/>
+							</Form.Item>
+						</div>
+
+						<RenderConnectionFields
+							isConnectionParamsLoading={isConnectionParamsLoading}
+							connectionParams={connectionParams}
+							isFormDisabled={modalState === ModalStateEnum.WAITING}
+						/>
+
+						{connectionCommands && (
+							<div className="cloud-account-setup-form__code-block-tabs-container">
+								<div className="cloud-account-setup-form__code-block-tabs-header">
+									<div className="cloud-account-setup-form__code-block-tabs-header-title">
+										Deploy Agent
+									</div>
+									<div className="cloud-account-setup-form__code-block-tabs-header-description">
+										Copy the command and then use it to create the deployment stack.
+									</div>
+								</div>
+								<Tabs
+									className="cloud-account-setup-form__code-block-tabs"
+									items={[
+										{
+											key: 'cli',
+											label: 'CLI',
+											children: <CodeBlock code={connectionCommands?.cliCommand || ''} />,
+										},
+										{
+											key: 'powershell',
+											label: 'PowerShell',
+											children: (
+												<CodeBlock
+													code={connectionCommands?.cloudPowerShellCommand || ''}
+												/>
+											),
+										},
+									]}
+									value={activeTab}
+									onChange={(key): void => setActiveTab(key)}
+									variant="primary"
+								/>
+							</div>
+						)}
+
+						{renderAlert()}
+
+						{modalState === ModalStateEnum.WAITING && (
+							<div className="cloud-account-setup-status-message">
+								After running the command, return here and wait for automatic connection
+								detection.
+							</div>
+						)}
+					</div>
+				</Form>
+			</div>
+		</DrawerWrapper>
+	);
+}
+
+export default CloudAccountSetupModal;

frontend/src/container/Integrations/CloudIntegration/AzureCloudServices/EditAccount/AccountSettingsModal.tsx

@@ -0,0 +1,150 @@
+import { Dispatch, SetStateAction, useMemo } from 'react';
+import { useQueryClient } from 'react-query';
+import { Button, DrawerWrapper } from '@signozhq/ui';
+import { Form, Select } from 'antd';
+import { invalidateListAccounts } from 'api/generated/services/cloudintegration';
+import { INTEGRATION_TYPES } from 'container/Integrations/constants';
+import { CloudAccount } from 'container/Integrations/types';
+import { Save } from 'lucide-react';
+
+import { useAccountSettingsModal } from '../../../../../hooks/integration/azure/useAccountSettingsModal';
+import RemoveIntegrationAccount from '../../RemoveAccount/RemoveIntegrationAccount';
+
+import '../../AmazonWebServices/EditAccount/AccountSettingsModal.style.scss';
+
+interface AccountSettingsModalProps {
+	onClose: () => void;
+	account: CloudAccount;
+	setActiveAccount: Dispatch<SetStateAction<CloudAccount | null>>;
+}
+
+function AccountSettingsModal({
+	onClose,
+	account,
+	setActiveAccount,
+}: AccountSettingsModalProps): JSX.Element {
+	const {
+		form,
+		isLoading,
+		resourceGroups,
+		isSaveDisabled,
+		setResourceGroups,
+		handleSubmit,
+		handleClose,
+	} = useAccountSettingsModal({ onClose, account, setActiveAccount });
+
+	const queryClient = useQueryClient();
+
+	const azureConfig = useMemo(
+		() => ('deployment_region' in account.config ? account.config : null),
+		[account.config],
+	);
+
+	return (
+		<DrawerWrapper
+			open={true}
+			className="account-settings-modal"
+			title="Account Settings"
+			direction="right"
+			showCloseButton
+			onOpenChange={(open): void => {
+				if (!open) {
+					handleClose();
+				}
+			}}
+			width="wide"
+			footer={
+				<div className="account-settings-modal__footer">
+					<RemoveIntegrationAccount
+						accountId={account?.id}
+						onRemoveIntegrationAccountSuccess={(): void => {
+							void invalidateListAccounts(queryClient, {
+								cloudProvider: INTEGRATION_TYPES.AZURE,
+							});
+							setActiveAccount(null);
+							handleClose();
+						}}
+						cloudProvider={INTEGRATION_TYPES.AZURE}
+					/>
+					<Button
+						variant="solid"
+						color="secondary"
+						disabled={isSaveDisabled}
+						onClick={handleSubmit}
+						loading={isLoading}
+						prefix={<Save size={14} />}
+					>
+						Update Changes
+					</Button>
+				</div>
+			}
+		>
+			<Form
+				form={form}
+				layout="vertical"
+				initialValues={{
+					resourceGroups: azureConfig?.resource_groups || [],
+				}}
+			>
+				<div className="account-settings-modal__body">
+					<div className="account-settings-modal__body-account-info">
+						<div className="account-settings-modal__body-account-info-connected-account-details">
+							<div className="account-settings-modal__body-account-info-connected-account-details-title">
+								Connected Account details
+							</div>
+							<div className="account-settings-modal__body-account-info-connected-account-details-account-id">
+								Azure Subscription:{' '}
+								<span className="account-settings-modal__body-account-info-connected-account-details-account-id-account-id">
+									{account?.providerAccountId}
+								</span>
+							</div>
+						</div>
+					</div>
+
+					{azureConfig?.deployment_region && (
+						<div className="account-settings-modal__body-region-selector">
+							<div className="account-settings-modal__body-region-selector-title">
+								Deployment region
+							</div>
+							<div className="account-settings-modal__body-region-selector-description">
+								{azureConfig.deployment_region}
+							</div>
+						</div>
+					)}
+
+					<div className="account-settings-modal__body-region-selector">
+						<div className="account-settings-modal__body-region-selector-title">
+							Resource groups
+						</div>
+						<div className="account-settings-modal__body-region-selector-description">
+							Update the resource groups that should be monitored.
+						</div>
+
+						<Form.Item
+							name="resourceGroups"
+							rules={[
+								{
+									required: true,
+									type: 'array',
+									min: 1,
+									message: 'Please add at least one resource group',
+								},
+							]}
+						>
+							<Select
+								mode="tags"
+								value={resourceGroups}
+								onChange={(values): void => {
+									setResourceGroups(values);
+									form.setFieldValue('resourceGroups', values);
+								}}
+							/>
+						</Form.Item>
+					</div>
+				</div>
+			</Form>
+		</DrawerWrapper>
+	);
+}
+
+export default AccountSettingsModal;

frontend/src/container/Integrations/CloudIntegration/CloudIntegration.tsx

@@ -1,16 +1,15 @@
 import { IntegrationType } from 'container/Integrations/types';
 
-import AWSTabs from './AmazonWebServices/ServicesTabs';
 import Header from './Header/Header';
+import ServicesTabs from './ServiceTabs/ServicesTabs';
 
 import './CloudIntegration.styles.scss';
 
 const CloudIntegration = ({ type }: { type: IntegrationType }): JSX.Element => {
 	return (
 		<div className="cloud-integration-container">
-			<Header title={type} />
-
-			{type === IntegrationType.AWS_SERVICES && <AWSTabs />}
+			<Header type={type} />
+			<ServicesTabs type={type} />
 		</div>
 	);
 };

frontend/src/container/Integrations/CloudIntegration/Header/Header.tsx

@@ -7,7 +7,7 @@ import { Blocks, LifeBuoy } from 'lucide-react';
 
 import './Header.styles.scss';
 
-function Header({ title }: { title: IntegrationType }): JSX.Element {
+function Header({ type }: { type: IntegrationType }): JSX.Element {
 	return (
 		<div className="cloud-header">
 			<div className="cloud-header__navigation">
@@ -25,27 +25,30 @@ function Header({ title }: { title: IntegrationType }): JSX.Element {
 							),
 						},
 						{
-							title: <div className="cloud-header__breadcrumb-title">{title}</div>,
+							title: <div className="cloud-header__breadcrumb-title">{type}</div>,
 						},
 					]}
 				/>
 			</div>
-			<div className="cloud-header__actions">
-				<Button
-					variant="solid"
-					size="sm"
-					color="secondary"
-					onClick={(): void => {
-						window.open(
-							'https://signoz.io/blog/native-aws-integrations-with-autodiscovery/',
-							'_blank',
-						);
-					}}
-					prefix={<LifeBuoy size={12} />}
-				>
-					Get Help
-				</Button>
-			</div>
+
+			{type === IntegrationType.AWS_SERVICES && (
+				<div className="cloud-header__actions">
+					<Button
+						variant="solid"
+						size="sm"
+						color="secondary"
+						onClick={(): void => {
+							window.open(
+								'https://signoz.io/blog/native-aws-integrations-with-autodiscovery/',
+								'_blank',
+							);
+						}}
+						prefix={<LifeBuoy size={12} />}
+					>
+						Get Help
+					</Button>
+				</div>
+			)}
 		</div>
 	);
 }

frontend/src/container/Integrations/CloudIntegration/RemoveAccount/RemoveIntegrationAccount.scss

@@ -1,9 +1,16 @@
 .remove-integration-account-modal {
+	&__cloud-provider {
+		color: var(--l1-foreground);
+		font-weight: 500;
+		font-size: 14px;
+		line-height: 20px;
+		letter-spacing: -0.07px;
+	}
+
 	.ant-modal-content {
 		background-color: var(--l1-background);
 		border: 1px solid var(--l3-background);
 		border-radius: 4px;
-		padding: 12px;
 	}
 
 	.ant-modal-close {

frontend/src/container/Integrations/CloudIntegration/RemoveAccount/RemoveIntegrationAccount.tsx

@@ -11,9 +11,11 @@ import { Unlink } from 'lucide-react';
 import './RemoveIntegrationAccount.scss';
 
 function RemoveIntegrationAccount({
+	cloudProvider,
 	accountId,
 	onRemoveIntegrationAccountSuccess,
 }: {
+	cloudProvider: string;
 	accountId: string;
 	onRemoveIntegrationAccountSuccess: () => void;
 }): JSX.Element {
@@ -79,9 +81,12 @@ function RemoveIntegrationAccount({
 				}}
 			>
 				Removing this account will remove all components created for sending
-				telemetry to SigNoz in your AWS account within the next ~15 minutes
-				(cloudformation stacks named signoz-integration-telemetry-collection in
-				enabled regions). <br />
+				telemetry to SigNoz in your{' '}
+				<span className="remove-integration-account-modal__cloud-provider">
+					{cloudProvider}
+				</span>{' '}
+				account within the next ~15 minutes (cloudformation stacks named
+				signoz-integration-telemetry-collection in enabled regions). <br />
 				<br />
 				After that, you can delete the cloudformation stack that was created
 				manually when connecting this account.

frontend/src/container/Integrations/CloudIntegration/ServiceItem.tsx

@@ -1,7 +1,7 @@
 import cx from 'classnames';
 import LineClampedText from 'periscope/components/LineClampedText/LineClampedText';
 
-import { Service } from './types';
+import { Service } from './AmazonWebServices/types';
 
 function ServiceItem({
 	service,

frontend/src/container/Integrations/CloudIntegration/ServiceTabs/ServicesTabs.tsx

@@ -0,0 +1,30 @@
+import { IntegrationType } from 'container/Integrations/types';
+import useUrlQuery from 'hooks/useUrlQuery';
+
+import HeroSection from '../../HeroSection/HeroSection';
+import ServiceDetails from '../AmazonWebServices/ServiceDetails/ServiceDetails';
+import ServicesList from '../ServicesList';
+
+import './ServicesTabs.style.scss';
+
+function ServicesTabs({ type }: { type: IntegrationType }): JSX.Element {
+	const urlQuery = useUrlQuery();
+	const cloudAccountId = urlQuery.get('cloudAccountId') || '';
+
+	return (
+		<div className="services-tabs">
+			<HeroSection type={type} />
+
+			<div className="services-section">
+				<div className="services-section__sidebar">
+					<ServicesList cloudAccountId={cloudAccountId} type={type} />
+				</div>
+				<div className="services-section__content">
+					<ServiceDetails type={type} />
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default ServicesTabs;

frontend/src/container/Integrations/CloudIntegration/ServicesList.tsx

@@ -4,15 +4,20 @@ import { Skeleton } from 'antd';
 import { useListServicesMetadata } from 'api/generated/services/cloudintegration';
 import type { CloudintegrationtypesServiceMetadataDTO } from 'api/generated/services/sigNoz.schemas';
 import cx from 'classnames';
+import { IntegrationType } from 'container/Integrations/types';
 import useUrlQuery from 'hooks/useUrlQuery';
 
 import emptyStateIconUrl from '@/assets/Icons/emptyState.svg';
 
 interface ServicesListProps {
 	cloudAccountId: string;
+	type: IntegrationType;
 }
 
-function ServicesList({ cloudAccountId }: ServicesListProps): JSX.Element {
+function ServicesList({
+	cloudAccountId,
+	type,
+}: ServicesListProps): JSX.Element {
 	const urlQuery = useUrlQuery();
 	const navigate = useNavigate();
 	const hasValidCloudAccountId = Boolean(cloudAccountId);
@@ -22,7 +27,7 @@ function ServicesList({ cloudAccountId }: ServicesListProps): JSX.Element {
 
 	const { data: servicesMetadata, isLoading } = useListServicesMetadata(
 		{
-			cloudProvider: 'aws',
+			cloudProvider: type,
 		},
 		serviceQueryParams,
 	);

frontend/src/container/Integrations/CloudIntegration/mapCloudAccountFromDto.ts

@@ -0,0 +1,49 @@
+import { CloudintegrationtypesAccountDTO } from 'api/generated/services/sigNoz.schemas';
+import { CloudAccount as IntegrationCloudAccount } from 'container/Integrations/types';
+
+import { CloudAccount as AwsCloudAccount } from './AmazonWebServices/types';
+
+export function mapAccountDtoToAwsCloudAccount(
+	account: CloudintegrationtypesAccountDTO,
+): AwsCloudAccount | null {
+	if (!account.providerAccountId) {
+		return null;
+	}
+
+	return {
+		id: account.id,
+		cloud_account_id: account.id,
+		config: {
+			regions: account.config?.aws?.regions ?? [],
+		},
+		status: {
+			integration: {
+				last_heartbeat_ts_ms: account.agentReport?.timestampMillis ?? 0,
+			},
+		},
+		providerAccountId: account.providerAccountId,
+	};
+}
+
+export function mapAccountDtoToAzureCloudAccount(
+	account: CloudintegrationtypesAccountDTO,
+): IntegrationCloudAccount | null {
+	if (!account.providerAccountId) {
+		return null;
+	}
+
+	return {
+		id: account.id,
+		cloud_account_id: account.id,
+		config: {
+			deployment_region: account.config?.azure?.deploymentRegion ?? '',
+			resource_groups: account.config?.azure?.resourceGroups ?? [],
+		},
+		status: {
+			integration: {
+				last_heartbeat_ts_ms: account.agentReport?.timestampMillis ?? 0,
+			},
+		},
+		providerAccountId: account.providerAccountId,
+	};
+}

frontend/src/container/Integrations/CloudIntegration/utils.ts

@@ -1,5 +1,32 @@
+import { ONE_CLICK_INTEGRATIONS } from '../constants';
+import { IntegrationType } from '../types';
+
 export const getAccountById = <T extends { cloud_account_id: string }>(
 	accounts: T[],
 	accountId: string,
 ): T | null =>
 	accounts.find((account) => account.cloud_account_id === accountId) || null;
+
+interface IntegrationMetadata {
+	title: string;
+	description: string;
+	logo: string;
+}
+
+export const getIntegrationMetadata = (
+	type: IntegrationType,
+): IntegrationMetadata => {
+	const integration = ONE_CLICK_INTEGRATIONS.find(
+		(integration) => integration.id === type,
+	);
+
+	if (!integration) {
+		return { title: '', description: '', logo: '' };
+	}
+
+	return {
+		title: integration.title,
+		description: integration.description,
+		logo: integration.icon,
+	};
+};

frontend/src/container/Integrations/HeroSection/HeroSection.tsx

@@ -0,0 +1,33 @@
+import { IntegrationType } from 'container/Integrations/types';
+
+import AccountActions from '../CloudIntegration/AmazonWebServices/AccountActions/AccountActions';
+import { getIntegrationMetadata } from '../CloudIntegration/utils';
+
+import './HeroSection.style.scss';
+
+function HeroSection({ type }: { type: IntegrationType }): JSX.Element {
+	const {
+		title,
+		description,
+		logo: integrationLogo,
+	} = getIntegrationMetadata(type);
+
+	return (
+		<div className="hero-section">
+			<div className="hero-section__details">
+				<div className="hero-section__details-header">
+					<div className="hero-section__icon">
+						<img src={integrationLogo} alt={type} />
+					</div>
+
+					<div className="hero-section__details-title">{title}</div>
+				</div>
+				<div className="hero-section__details-description">{description}</div>
+			</div>
+
+			<AccountActions type={type} />
+		</div>
+	);
+}
+
+export default HeroSection;

frontend/src/container/Integrations/IntegrationDetailPage/IntegrationDetailPage.styles.scss

@@ -9,53 +9,6 @@
 		flex-direction: column;
 		gap: 16px;
 
-		.error-container {
-			display: flex;
-			border-radius: 6px;
-			border: 1px solid var(--l1-border);
-			background: var(--l1-background);
-			align-items: center;
-			justify-content: center;
-			flex-direction: column;
-
-			.error-content {
-				display: flex;
-				flex-direction: column;
-				justify-content: center;
-				height: 300px;
-				gap: 15px;
-
-				.error-btns {
-					display: flex;
-					flex-direction: row;
-					gap: 16px;
-					align-items: center;
-
-					.retry-btn {
-						display: flex;
-						align-items: center;
-					}
-
-					.contact-support {
-						display: flex;
-						align-items: center;
-						gap: 4px;
-						cursor: pointer;
-
-						.text {
-							color: var(--callout-primary-description);
-							font-weight: 500;
-						}
-					}
-				}
-
-				.error-state-svg {
-					height: 40px;
-					width: 40px;
-				}
-			}
-		}
-
 		.loading-integration-details {
 			display: flex;
 			flex-direction: column;
@@ -327,6 +280,36 @@
 			}
 		}
 	}
+
+	.error-container {
+		display: flex;
+		border-radius: 6px;
+		border: 1px solid var(--l1-border);
+		background: var(--l1-background);
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+
+		.error-content {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			height: 300px;
+			gap: 15px;
+
+			.error-btns {
+				display: flex;
+				flex-direction: row;
+				gap: 12px;
+				align-items: center;
+			}
+
+			.error-state-svg {
+				height: 40px;
+				width: 40px;
+			}
+		}
+	}
 }
 
 .remove-integration-modal {

frontend/src/container/Integrations/IntegrationDetailPage/IntegrationDetailPage.tsx

@@ -1,6 +1,5 @@
 import { useState } from 'react';
 import { useHistory, useParams } from 'react-router-dom';
-import { Color } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui';
 import { Flex, Skeleton, Typography } from 'antd';
 import ROUTES from 'constants/routes';
@@ -55,8 +54,19 @@ function IntegrationDetailPage(): JSX.Element {
 		),
 	);
 
-	if (integrationId === INTEGRATION_TYPES.AWS) {
-		return <CloudIntegration type={IntegrationType.AWS_SERVICES} />;
+	if (
+		integrationId === INTEGRATION_TYPES.AWS ||
+		integrationId === INTEGRATION_TYPES.AZURE
+	) {
+		return (
+			<CloudIntegration
+				type={
+					integrationId === INTEGRATION_TYPES.AWS
+						? IntegrationType.AWS_SERVICES
+						: IntegrationType.AZURE_SERVICES
+				}
+			/>
+		);
 	}
 
 	return (
@@ -85,20 +95,20 @@ function IntegrationDetailPage(): JSX.Element {
 						<div className="error-btns">
 							<Button
 								variant="solid"
-								color="primary"
+								color="secondary"
 								onClick={(): Promise<any> => refetch()}
 								prefix={<RotateCw size={14} />}
 							>
 								Retry
 							</Button>
-							<div
-								className="contact-support"
+							<Button
+								variant="solid"
+								color="secondary"
 								onClick={(): void => handleContactSupport(isCloudUserVal)}
+								suffix={<MoveUpRight size={12} />}
 							>
-								<Typography.Link className="text">Contact Support </Typography.Link>
-
-								<MoveUpRight size={14} color={Color.BG_ROBIN_400} />
-							</div>
+								Contact Support
+							</Button>
 						</div>
 					</div>
 				</div>

frontend/src/container/Integrations/OneClickIntegrations/OneClickIntegrations.tsx

@@ -22,6 +22,7 @@ function OneClickIntegrations(props: OneClickIntegrationsProps): JSX.Element {
 		if (!query) {
 			return ONE_CLICK_INTEGRATIONS;
 		}
+
 		return ONE_CLICK_INTEGRATIONS.filter(
 			(integration) =>
 				integration.title.toLowerCase().includes(query) ||

frontend/src/container/Integrations/constants.ts

@@ -53,7 +53,7 @@ export const AZURE_INTEGRATION = {
 	is_new: true,
 };
 
-export const ONE_CLICK_INTEGRATIONS = [AWS_INTEGRATION];
+export const ONE_CLICK_INTEGRATIONS = [AWS_INTEGRATION, AZURE_INTEGRATION];
 
 export const AZURE_REGIONS: AzureRegion[] = [
 	{

frontend/src/container/Integrations/types.ts

@@ -4,8 +4,8 @@ import {
 } from './CloudIntegration/AmazonWebServices/types';
 
 export enum IntegrationType {
-	AWS_SERVICES = 'aws-services',
-	AZURE_SERVICES = 'azure-services',
+	AWS_SERVICES = 'aws',
+	AZURE_SERVICES = 'azure',
 }
 
 interface LogField {
@@ -89,6 +89,7 @@ export interface CloudAccount {
 	cloud_account_id: string;
 	config: AzureCloudAccountConfig | AWSCloudAccountConfig;
 	status: AccountStatus | IServiceStatus;
+	providerAccountId: string;
 }
 
 export interface AzureCloudAccountConfig {

frontend/src/container/LogDetailedView/BodyTitleRenderer.tsx

@@ -8,8 +8,19 @@ import {
 	OPERATORS,
 	QUERY_BUILDER_FUNCTIONS,
 } from 'constants/antlrQueryConstants';
+import { FeatureKeys } from 'constants/features';
+import { QueryParams } from 'constants/query';
 import { useActiveLog } from 'hooks/logs/useActiveLog';
+import { useGetSearchQueryParam } from 'hooks/queryBuilder/useGetSearchQueryParam';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { ICurrentQueryData } from 'hooks/useHandleExplorerTabChange';
 import { useNotifications } from 'hooks/useNotifications';
+import { ExplorerViews } from 'pages/LogsExplorer/utils';
+import { useAppContext } from 'providers/App/App';
+import {
+	BaseAutocompleteData,
+	DataTypes,
+} from 'types/api/queryBuilder/queryAutocompleteResponse';
 
 import { TitleWrapper } from './BodyTitleRenderer.styles';
 import { DROPDOWN_KEY } from './constant';
@@ -25,17 +36,32 @@ function BodyTitleRenderer({
 	parentIsArray = false,
 	nodeKey,
 	value,
+	handleChangeSelectedView,
 }: BodyTitleRendererProps): JSX.Element {
 	const { onAddToQuery } = useActiveLog();
+	const { stagedQuery, updateQueriesData } = useQueryBuilder();
+
+	const { featureFlags } = useAppContext();
 	const [, setCopy] = useCopyToClipboard();
 	const { notifications } = useNotifications();
+	const viewName = useGetSearchQueryParam(QueryParams.viewName) || '';
+
+	const cleanedNodeKey = removeObjectFromString(nodeKey);
+	const isBodyJsonQueryEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.BODY_JSON_ENABLED)
+			?.active || false;
+
+	// Group by is supported only for body json query enabled and not for array elements
+	const isGroupBySupported =
+		isBodyJsonQueryEnabled && !cleanedNodeKey.includes('[]');
 
 	const filterHandler = (isFilterIn: boolean) => (): void => {
 		if (parentIsArray) {
 			onAddToQuery(
 				generateFieldKeyForArray(
-					removeObjectFromString(nodeKey),
+					cleanedNodeKey,
 					getDataTypes(value),
+					isBodyJsonQueryEnabled,
 				),
 				`${value}`,
 				isFilterIn
@@ -45,7 +71,7 @@ function BodyTitleRenderer({
 			);
 		} else {
 			onAddToQuery(
-				`body.${removeObjectFromString(nodeKey)}`,
+				`body.${cleanedNodeKey}`,
 				`${value}`,
 				isFilterIn ? OPERATORS['='] : OPERATORS['!='],
 				getDataTypes(value),
@@ -53,10 +79,67 @@ function BodyTitleRenderer({
 		}
 	};
 
+	const groupByHandler = useCallback((): void => {
+		if (!stagedQuery) {
+			return;
+		}
+
+		const groupByKey = parentIsArray
+			? generateFieldKeyForArray(
+					cleanedNodeKey,
+					getDataTypes(value),
+					isBodyJsonQueryEnabled,
+				)
+			: `body.${cleanedNodeKey}`;
+
+		const fieldDataType = getDataTypes(value);
+		const normalizedDataType: DataTypes | undefined = Object.values(
+			DataTypes,
+		).includes(fieldDataType as DataTypes)
+			? (fieldDataType as DataTypes)
+			: undefined;
+
+		const updatedQuery = updateQueriesData(
+			stagedQuery,
+			'queryData',
+			(item, index) => {
+				if (index === 0) {
+					const newGroupByItem: BaseAutocompleteData = {
+						key: groupByKey,
+						type: '',
+						dataType: normalizedDataType,
+					};
+
+					return { ...item, groupBy: [...(item.groupBy || []), newGroupByItem] };
+				}
+
+				return item;
+			},
+		);
+
+		const queryData: ICurrentQueryData = {
+			name: viewName,
+			id: updatedQuery.id,
+			query: updatedQuery,
+		};
+
+		handleChangeSelectedView?.(ExplorerViews.TIMESERIES, queryData);
+	}, [
+		cleanedNodeKey,
+		handleChangeSelectedView,
+		isBodyJsonQueryEnabled,
+		parentIsArray,
+		stagedQuery,
+		updateQueriesData,
+		value,
+		viewName,
+	]);
+
 	const onClickHandler: MenuProps['onClick'] = (props): void => {
 		const mapper = {
 			[DROPDOWN_KEY.FILTER_IN]: filterHandler(true),
 			[DROPDOWN_KEY.FILTER_OUT]: filterHandler(false),
+			[DROPDOWN_KEY.GROUP_BY]: groupByHandler,
 		};
 
 		const handler = mapper[props.key];
@@ -76,6 +159,14 @@ function BodyTitleRenderer({
 				key: DROPDOWN_KEY.FILTER_OUT,
 				label: `Filter out ${value}`,
 			},
+			...(isGroupBySupported
+				? [
+						{
+							key: DROPDOWN_KEY.GROUP_BY,
+							label: `Group by ${nodeKey}`,
+						},
+					]
+				: []),
 		],
 		onClick: onClickHandler,
 	};
@@ -84,7 +175,6 @@ function BodyTitleRenderer({
 		(e: React.MouseEvent): void => {
 			// Prevent tree node expansion/collapse
 			e.stopPropagation();
-			const cleanedKey = removeObjectFromString(nodeKey);
 			let copyText: string;
 
 			// Check if value is an object or array
@@ -106,8 +196,8 @@ function BodyTitleRenderer({
 
 			if (copyText) {
 				const notificationMessage = isObject
-					? `${cleanedKey} object copied to clipboard`
-					: `${cleanedKey} copied to clipboard`;
+					? `${cleanedNodeKey} object copied to clipboard`
+					: `${cleanedNodeKey} copied to clipboard`;
 
 				notifications.success({
 					message: notificationMessage,
@@ -115,7 +205,7 @@ function BodyTitleRenderer({
 				});
 			}
 		},
-		[nodeKey, parentIsArray, setCopy, value, notifications],
+		[cleanedNodeKey, parentIsArray, setCopy, value, notifications],
 	);
 
 	return (

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

@@ -1,3 +1,4 @@
+import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { MetricsType } from 'container/MetricsApplication/constant';
 import { ILog } from 'types/api/logs/log';
 
@@ -6,6 +7,7 @@ export interface BodyTitleRendererProps {
 	nodeKey: string;
 	value: unknown;
 	parentIsArray?: boolean;
+	handleChangeSelectedView?: ChangeViewFunctionType;
 }
 
 export type AnyObject = { [key: string]: any };

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

@@ -2,6 +2,7 @@ import React, { useCallback, useMemo, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Popover, Spin, Tooltip, Tree } from 'antd';
+import type { DataNode } from 'antd/es/tree';
 import GroupByIcon from 'assets/CustomIcons/GroupByIcon';
 import cx from 'classnames';
 import CopyClipboardHOC from 'components/Logs/CopyClipboardHOC';
@@ -57,7 +58,7 @@ interface ITableViewActionsProps {
 }
 
 // Memoized Tree Component
-const MemoizedTree = React.memo<{ treeData: any[] }>(({ treeData }) => (
+const MemoizedTree = React.memo<{ treeData: DataNode[] }>(({ treeData }) => (
 	<Tree
 		defaultExpandAll
 		showLine
@@ -74,50 +75,54 @@ const BodyContent: React.FC<{
 	record: DataType;
 	bodyHtml: { __html: string };
 	textToCopy: string;
-}> = React.memo(({ fieldData, record, bodyHtml, textToCopy }) => {
-	const { isLoading, treeData, error } = useAsyncJSONProcessing(
-		fieldData.value,
-		record.field === 'body',
-	);
-
-	// Show JSON tree if available, otherwise show HTML content
-	if (record.field === 'body' && treeData) {
-		return <MemoizedTree treeData={treeData} />;
-	}
-
-	if (record.field === 'body' && isLoading) {
-		return (
-			<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-				<Spin size="small" />
-				<span style={{ color: Color.BG_SIENNA_400 }}>Processing JSON...</span>
-			</div>
+	handleChangeSelectedView?: ChangeViewFunctionType;
+}> = React.memo(
+	({ fieldData, record, bodyHtml, textToCopy, handleChangeSelectedView }) => {
+		const { isLoading, treeData, error } = useAsyncJSONProcessing(
+			fieldData.value,
+			record.field === 'body',
+			handleChangeSelectedView,
 		);
-	}
 
-	if (record.field === 'body' && error) {
-		return (
-			<span
-				style={{ color: Color.BG_SIENNA_400, whiteSpace: 'pre-wrap', tabSize: 4 }}
-			>
-				Error parsing Body JSON
-			</span>
-		);
-	}
+		// Show JSON tree if available, otherwise show HTML content
+		if (record.field === 'body' && treeData) {
+			return <MemoizedTree treeData={treeData} />;
+		}
 
-	if (record.field === 'body') {
-		return (
-			<CopyClipboardHOC entityKey="body" textToCopy={textToCopy}>
+		if (record.field === 'body' && isLoading) {
+			return (
+				<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+					<Spin size="small" />
+					<span style={{ color: Color.BG_SIENNA_400 }}>Processing JSON...</span>
+				</div>
+			);
+		}
+
+		if (record.field === 'body' && error) {
+			return (
 				<span
 					style={{ color: Color.BG_SIENNA_400, whiteSpace: 'pre-wrap', tabSize: 4 }}
 				>
-					<span dangerouslySetInnerHTML={bodyHtml} />
+					Error parsing Body JSON
 				</span>
-			</CopyClipboardHOC>
-		);
-	}
+			);
+		}
 
-	return null;
-});
+		if (record.field === 'body') {
+			return (
+				<CopyClipboardHOC entityKey="body" textToCopy={textToCopy}>
+					<span
+						style={{ color: Color.BG_SIENNA_400, whiteSpace: 'pre-wrap', tabSize: 4 }}
+					>
+						<span dangerouslySetInnerHTML={bodyHtml} />
+					</span>
+				</CopyClipboardHOC>
+			);
+		}
+
+		return null;
+	},
+);
 
 BodyContent.displayName = 'BodyContent';
 
@@ -319,6 +324,7 @@ export default function TableViewActions(
 						record={record}
 						bodyHtml={bodyHtml}
 						textToCopy={textToCopy}
+						handleChangeSelectedView={handleChangeSelectedView}
 					/>
 				);
 
@@ -342,6 +348,7 @@ export default function TableViewActions(
 		fieldData,
 		bodyHtml,
 		textToCopy,
+		handleChangeSelectedView,
 		formatTimezoneAdjustedTimestamp,
 		cleanTimestamp,
 	]);
@@ -355,6 +362,7 @@ export default function TableViewActions(
 					record={record}
 					bodyHtml={bodyHtml}
 					textToCopy={textToCopy}
+					handleChangeSelectedView={handleChangeSelectedView}
 				/>
 				{!isListViewPanel &&
 					!RESTRICTED_SELECTED_FIELDS.includes(fieldFilterKey) && (

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

@@ -1,5 +1,8 @@
 import { useEffect, useRef, useState } from 'react';
+import { FeatureKeys } from 'constants/features';
+import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { isEmpty } from 'lodash-es';
+import { useAppContext } from 'providers/App/App';
 
 import { jsonToDataNodes, recursiveParseJSON } from '../utils';
 
@@ -9,6 +12,7 @@ const MAX_BODY_BYTES = 100 * 1024; // 100 KB
 const useAsyncJSONProcessing = (
 	value: string,
 	shouldProcess: boolean,
+	handleChangeSelectedView?: ChangeViewFunctionType,
 ): {
 	isLoading: boolean;
 	treeData: any[] | null;
@@ -25,6 +29,10 @@ const useAsyncJSONProcessing = (
 	});
 
 	const processingRef = useRef<boolean>(false);
+	const { featureFlags } = useAppContext();
+	const isBodyJsonQueryEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.BODY_JSON_ENABLED)
+			?.active || false;
 
 	// eslint-disable-next-line sonarjs/cognitive-complexity
 	useEffect((): (() => void) => {
@@ -47,7 +55,10 @@ const useAsyncJSONProcessing = (
 				try {
 					const parsedBody = recursiveParseJSON(value);
 					if (!isEmpty(parsedBody)) {
-						const treeData = jsonToDataNodes(parsedBody);
+						const treeData = jsonToDataNodes(parsedBody, {
+							isBodyJsonQueryEnabled,
+							handleChangeSelectedView,
+						});
 						setJsonState({ isLoading: false, treeData, error: null });
 					} else {
 						setJsonState({ isLoading: false, treeData: null, error: null });
@@ -73,7 +84,10 @@ const useAsyncJSONProcessing = (
 						try {
 							const parsedBody = recursiveParseJSON(value);
 							if (!isEmpty(parsedBody)) {
-								const treeData = jsonToDataNodes(parsedBody);
+								const treeData = jsonToDataNodes(parsedBody, {
+									isBodyJsonQueryEnabled,
+									handleChangeSelectedView,
+								});
 								setJsonState({ isLoading: false, treeData, error: null });
 							} else {
 								setJsonState({ isLoading: false, treeData: null, error: null });
@@ -101,7 +115,7 @@ const useAsyncJSONProcessing = (
 		return (): void => {
 			processingRef.current = false;
 		};
-	}, [value, shouldProcess]);
+	}, [value, shouldProcess, isBodyJsonQueryEnabled, handleChangeSelectedView]);
 
 	return jsonState;
 };

frontend/src/container/LogDetailedView/constant.ts

@@ -1,4 +1,5 @@
 export const DROPDOWN_KEY = {
 	FILTER_IN: 'filterIn',
 	FILTER_OUT: 'filterOut',
+	GROUP_BY: 'groupBy',
 };

frontend/src/container/LogDetailedView/utils.tsx

@@ -1,5 +1,6 @@
 import Convert from 'ansi-to-html';
 import type { DataNode } from 'antd/es/tree';
+import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { MetricsType } from 'container/MetricsApplication/constant';
 import dompurify from 'dompurify';
 import { uniqueId } from 'lodash-es';
@@ -34,13 +35,32 @@ export const recursiveParseJSON = (obj: string): Record<string, unknown> => {
 	}
 };
 
-export const computeDataNode = (
-	key: string,
-	valueIsArray: boolean,
-	value: unknown,
-	nodeKey: string,
-	parentIsArray: boolean,
-): DataNode => ({
+type JsonToDataNodesOptions = {
+	parentKey?: string;
+	parentIsArray?: boolean;
+	isBodyJsonQueryEnabled?: boolean;
+	handleChangeSelectedView?: ChangeViewFunctionType;
+};
+
+type ComputeDataNodeOptions = {
+	key: string;
+	valueIsArray: boolean;
+	value: unknown;
+	nodeKey: string;
+	parentIsArray: boolean;
+	isBodyJsonQueryEnabled?: boolean;
+	handleChangeSelectedView?: ChangeViewFunctionType;
+};
+
+export const computeDataNode = ({
+	key,
+	valueIsArray,
+	value,
+	nodeKey,
+	parentIsArray,
+	isBodyJsonQueryEnabled = false,
+	handleChangeSelectedView,
+}: ComputeDataNodeOptions): DataNode => ({
 	key: uniqueId(),
 	title: (
 		<BodyTitleRenderer
@@ -48,20 +68,30 @@ export const computeDataNode = (
 			nodeKey={nodeKey}
 			value={value}
 			parentIsArray={parentIsArray}
+			handleChangeSelectedView={handleChangeSelectedView}
 		/>
 	),
-	children: jsonToDataNodes(
-		value as Record<string, unknown>,
-		valueIsArray ? `${nodeKey}[*]` : nodeKey,
-		valueIsArray,
-	),
+	children: jsonToDataNodes(value as Record<string, unknown>, {
+		parentKey: valueIsArray
+			? `${nodeKey}${isBodyJsonQueryEnabled ? '[]' : '[*]'}`
+			: nodeKey,
+		parentIsArray: valueIsArray,
+		isBodyJsonQueryEnabled,
+		handleChangeSelectedView,
+	}),
 });
 
 export function jsonToDataNodes(
 	json: Record<string, unknown>,
-	parentKey = '',
-	parentIsArray = false,
+	options: JsonToDataNodesOptions = {},
 ): DataNode[] {
+	const {
+		parentKey = '',
+		parentIsArray = false,
+		isBodyJsonQueryEnabled = false,
+		handleChangeSelectedView,
+	} = options;
+
 	return Object.entries(json).map(([key, value]) => {
 		let nodeKey = parentKey || key;
 		if (parentIsArray) {
@@ -74,7 +104,15 @@ export function jsonToDataNodes(
 
 		if (parentIsArray) {
 			if (typeof value === 'object' && value !== null) {
-				return computeDataNode(key, valueIsArray, value, nodeKey, parentIsArray);
+				return computeDataNode({
+					key,
+					valueIsArray,
+					value,
+					nodeKey,
+					parentIsArray,
+					isBodyJsonQueryEnabled,
+					handleChangeSelectedView,
+				});
 			}
 
 			return {
@@ -85,14 +123,31 @@ export function jsonToDataNodes(
 						nodeKey={nodeKey}
 						value={value}
 						parentIsArray={parentIsArray}
+						handleChangeSelectedView={handleChangeSelectedView}
 					/>
 				),
-				children: jsonToDataNodes({}, nodeKey, valueIsArray),
+				children: jsonToDataNodes(
+					{},
+					{
+						parentKey: nodeKey,
+						parentIsArray: valueIsArray,
+						isBodyJsonQueryEnabled,
+						handleChangeSelectedView,
+					},
+				),
 			};
 		}
 
 		if (typeof value === 'object' && value !== null) {
-			return computeDataNode(key, valueIsArray, value, nodeKey, parentIsArray);
+			return computeDataNode({
+				key,
+				valueIsArray,
+				value,
+				nodeKey,
+				parentIsArray,
+				isBodyJsonQueryEnabled,
+				handleChangeSelectedView,
+			});
 		}
 		return {
 			key: uniqueId(),
@@ -102,6 +157,7 @@ export function jsonToDataNodes(
 					nodeKey={nodeKey}
 					value={value}
 					parentIsArray={parentIsArray}
+					handleChangeSelectedView={handleChangeSelectedView}
 				/>
 			),
 		};
@@ -123,6 +179,7 @@ export function flattenObject(obj: AnyObject, prefix = ''): AnyObject {
 export const generateFieldKeyForArray = (
 	fieldKey: string,
 	dataType: DataTypes,
+	isBodyJsonQueryEnabled = false,
 ): string => {
 	let lastDotIndex = fieldKey.lastIndexOf('.');
 	let resultNodeKey = fieldKey;
@@ -138,6 +195,16 @@ export const generateFieldKeyForArray = (
 			newResultNodeKey = resultNodeKey.substring(0, lastDotIndex);
 		}
 	}
+
+	// When filtering for a value inside an array, the query builder expects the
+	// last array segment to be referenced without the trailing `[]`.
+	// Examples:
+	// - has(body.config.features, 'fast_checkout')
+	// - has(body.config.features[].items, 'pen')
+	// - has(body.config.features[].items[].variants, 'ballpen')
+	if (isBodyJsonQueryEnabled && newResultNodeKey.endsWith('[]')) {
+		newResultNodeKey = newResultNodeKey.slice(0, -2);
+	}
 	return `body.${newResultNodeKey}`;
 };
 

frontend/src/hooks/Integrations/useGetIntegrationStatus.ts

@@ -7,6 +7,13 @@ import {
 	GetIntegrationStatusProps,
 } from 'types/api/integrations/types';
 
+export function isOneClickIntegration(integrationId: string): boolean {
+	return (
+		integrationId === INTEGRATION_TYPES.AWS ||
+		integrationId === INTEGRATION_TYPES.AZURE
+	);
+}
+
 export const useGetIntegrationStatus = ({
 	integrationId,
 }: GetIntegrationPayloadProps): UseQueryResult<
@@ -20,5 +27,5 @@ export const useGetIntegrationStatus = ({
 		enabled:
 			!!integrationId &&
 			integrationId !== '' &&
-			integrationId !== INTEGRATION_TYPES.AWS,
+			!isOneClickIntegration(integrationId),
 	});

frontend/src/hooks/integration/aws/useIntegrationModal.ts

@@ -20,11 +20,11 @@ import {
 	CloudintegrationtypesCredentialsDTO,
 	CloudintegrationtypesPostableAccountDTO,
 } from 'api/generated/services/sigNoz.schemas';
+import { INTEGRATION_TYPES } from 'container/Integrations/constants';
 import {
 	ActiveViewEnum,
 	ModalStateEnum,
-} from 'container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/types';
-import { INTEGRATION_TYPES } from 'container/Integrations/constants';
+} from 'container/Integrations/HeroSection/types';
 import useAxiosError from 'hooks/useAxiosError';
 import { regions } from 'utils/regions';
 

frontend/src/hooks/integration/azure/useAccountSettingsModal.ts

@@ -0,0 +1,142 @@
+import {
+	Dispatch,
+	SetStateAction,
+	useCallback,
+	useEffect,
+	useMemo,
+	useState,
+} from 'react';
+import { toast } from '@signozhq/ui';
+import { Form } from 'antd';
+import { FormInstance } from 'antd/lib';
+import { useUpdateAccount } from 'api/generated/services/cloudintegration';
+import { INTEGRATION_TYPES } from 'container/Integrations/constants';
+import { CloudAccount } from 'container/Integrations/types';
+import { isEqual } from 'lodash-es';
+
+import logEvent from '../../../api/common/logEvent';
+
+interface UseAccountSettingsModalProps {
+	onClose: () => void;
+	account: CloudAccount;
+	setActiveAccount: Dispatch<SetStateAction<CloudAccount | null>>;
+}
+
+interface UseAccountSettingsModal {
+	form: FormInstance;
+	isLoading: boolean;
+	resourceGroups: string[];
+	isSaveDisabled: boolean;
+	setResourceGroups: Dispatch<SetStateAction<string[]>>;
+	handleSubmit: () => Promise<void>;
+	handleClose: () => void;
+}
+
+export function useAccountSettingsModal({
+	onClose,
+	account,
+	setActiveAccount,
+}: UseAccountSettingsModalProps): UseAccountSettingsModal {
+	const [form] = Form.useForm();
+	const { mutate: updateAccount, isLoading } = useUpdateAccount();
+	const accountConfig = useMemo(
+		() => ('deployment_region' in account.config ? account.config : null),
+		[account.config],
+	);
+	const [resourceGroups, setResourceGroups] = useState<string[]>(
+		accountConfig?.resource_groups || [],
+	);
+
+	useEffect(() => {
+		if (!accountConfig) {
+			return;
+		}
+
+		form.setFieldsValue({
+			region: accountConfig.deployment_region,
+			resourceGroups: accountConfig.resource_groups,
+		});
+		setResourceGroups(accountConfig.resource_groups);
+	}, [accountConfig, form]);
+
+	const handleSubmit = useCallback(async (): Promise<void> => {
+		try {
+			const values = await form.validateFields();
+
+			updateAccount(
+				{
+					pathParams: {
+						cloudProvider: INTEGRATION_TYPES.AZURE,
+						id: account?.id || '',
+					},
+					data: {
+						config: {
+							azure: {
+								resourceGroups: values.resourceGroups || [],
+							},
+						},
+					},
+				},
+				{
+					onSuccess: () => {
+						const nextConfig = {
+							deployment_region: accountConfig?.deployment_region || '',
+							resource_groups: values.resourceGroups || [],
+						};
+
+						setActiveAccount({
+							...account,
+							config: nextConfig,
+						});
+						onClose();
+
+						toast.success('Account settings updated successfully', {
+							position: 'bottom-right',
+						});
+
+						logEvent('Azure Integration: Account settings updated', {
+							cloudAccountId: account.cloud_account_id,
+							deploymentRegion: nextConfig.deployment_region,
+							resourceGroups: nextConfig.resource_groups,
+						});
+					},
+					onError: (error) => {
+						toast.error('Failed to update account settings', {
+							description: error?.message,
+							position: 'bottom-right',
+						});
+					},
+				},
+			);
+		} catch (error) {
+			console.error('Form submission failed:', error);
+		}
+	}, [form, updateAccount, account, setActiveAccount, onClose]);
+
+	const isSaveDisabled = useMemo(() => {
+		if (!accountConfig) {
+			return true;
+		}
+
+		const formResourceGroups = resourceGroups || [];
+
+		return isEqual(
+			[...formResourceGroups].sort(),
+			[...accountConfig.resource_groups].sort(),
+		);
+	}, [accountConfig, resourceGroups, form]);
+
+	const handleClose = useCallback(() => {
+		onClose();
+	}, [onClose]);
+
+	return {
+		form,
+		isLoading,
+		resourceGroups,
+		isSaveDisabled,
+		setResourceGroups,
+		handleSubmit,
+		handleClose,
+	};
+}

frontend/src/hooks/integration/azure/useIntegrationModal.ts

@@ -0,0 +1,188 @@
+import { Dispatch, SetStateAction, useCallback, useState } from 'react';
+import { useQueryClient } from 'react-query';
+import { toast } from '@signozhq/ui';
+import { Form, FormInstance } from 'antd';
+import {
+	CreateAccountMutationResult,
+	GetConnectionCredentialsQueryResult,
+	invalidateListAccounts,
+	useCreateAccount,
+	useGetConnectionCredentials,
+} from 'api/generated/services/cloudintegration';
+import {
+	CloudintegrationtypesCredentialsDTO,
+	CloudintegrationtypesPostableAccountDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { INTEGRATION_TYPES } from 'container/Integrations/constants';
+import { ModalStateEnum } from 'container/Integrations/HeroSection/types';
+import useAxiosError from 'hooks/useAxiosError';
+
+import logEvent from '../../../api/common/logEvent';
+
+interface UseIntegrationModalProps {
+	onClose: () => void;
+}
+
+interface UseAzureIntegrationModal {
+	form: FormInstance;
+	modalState: ModalStateEnum;
+	isLoading: boolean;
+	accountId?: string;
+	connectionCommands: {
+		cliCommand: string;
+		cloudPowerShellCommand: string;
+	} | null;
+	setModalState: Dispatch<SetStateAction<ModalStateEnum>>;
+	handleSubmit: () => Promise<void>;
+	handleClose: () => void;
+	connectionParams?: CloudintegrationtypesCredentialsDTO;
+	isConnectionParamsLoading: boolean;
+	handleConnectionSuccess: (payload: {
+		cloudAccountId: string;
+		status?: unknown;
+	}) => void;
+	handleConnectionTimeout: (payload: { id?: string }) => void;
+	handleConnectionError: () => void;
+}
+
+export function useIntegrationModal({
+	onClose,
+}: UseIntegrationModalProps): UseAzureIntegrationModal {
+	const queryClient = useQueryClient();
+	const [form] = Form.useForm();
+	const [modalState, setModalState] = useState<ModalStateEnum>(
+		ModalStateEnum.FORM,
+	);
+	const [isLoading, setIsLoading] = useState(false);
+	const [accountId, setAccountId] = useState<string | undefined>(undefined);
+	const [connectionCommands, setConnectionCommands] = useState<{
+		cliCommand: string;
+		cloudPowerShellCommand: string;
+	} | null>(null);
+
+	const handleClose = useCallback((): void => {
+		setModalState(ModalStateEnum.FORM);
+		setConnectionCommands(null);
+		onClose();
+	}, [onClose]);
+
+	const handleConnectionSuccess = useCallback(
+		(payload: { cloudAccountId: string; status?: unknown }): void => {
+			logEvent('Azure Integration: Account connected', {
+				cloudAccountId: payload.cloudAccountId,
+				status: payload.status,
+			});
+			toast.success('Azure account connected successfully', {
+				position: 'bottom-right',
+			});
+			void invalidateListAccounts(queryClient, {
+				cloudProvider: INTEGRATION_TYPES.AZURE,
+			});
+			handleClose();
+		},
+		[handleClose, queryClient],
+	);
+
+	const handleConnectionTimeout = useCallback(
+		(payload: { id?: string }): void => {
+			setModalState(ModalStateEnum.ERROR);
+			logEvent('Azure Integration: Account connection attempt timed out', {
+				id: payload.id,
+			});
+		},
+		[],
+	);
+
+	const handleConnectionError = useCallback((): void => {
+		setModalState(ModalStateEnum.ERROR);
+	}, []);
+
+	const { mutate: createAccount } = useCreateAccount();
+	const handleError = useAxiosError();
+
+	const { data: connectionParams, isLoading: isConnectionParamsLoading } =
+		useGetConnectionCredentials<GetConnectionCredentialsQueryResult>(
+			{
+				cloudProvider: INTEGRATION_TYPES.AZURE,
+			},
+			{
+				query: {
+					onError: handleError,
+				},
+			},
+		);
+
+	const handleSubmit = useCallback(async (): Promise<void> => {
+		try {
+			setIsLoading(true);
+			const values = await form.validateFields();
+
+			const payload: CloudintegrationtypesPostableAccountDTO = {
+				config: {
+					azure: {
+						deploymentRegion: values.region,
+						resourceGroups: values.resourceGroups || [],
+					},
+				},
+				credentials: {
+					ingestionUrl: connectionParams?.data?.ingestionUrl || values.ingestionUrl,
+					ingestionKey: connectionParams?.data?.ingestionKey || values.ingestionKey,
+					sigNozApiUrl: connectionParams?.data?.sigNozApiUrl || values.sigNozApiUrl,
+					sigNozApiKey: connectionParams?.data?.sigNozApiKey || values.sigNozApiKey,
+				},
+			};
+
+			createAccount(
+				{
+					pathParams: { cloudProvider: INTEGRATION_TYPES.AZURE },
+					data: payload,
+				},
+				{
+					onSuccess: (response: CreateAccountMutationResult) => {
+						const nextAccountId = response.data.id;
+						const artifact = response.data.connectionArtifact.azure;
+
+						logEvent('Azure Integration: Account connection commands generated', {
+							id: nextAccountId,
+						});
+
+						setConnectionCommands({
+							cliCommand: artifact?.cliCommand || '',
+							cloudPowerShellCommand: artifact?.cloudPowerShellCommand || '',
+						});
+						setModalState(ModalStateEnum.WAITING);
+						setAccountId(nextAccountId);
+					},
+					onError: () => {
+						setModalState(ModalStateEnum.ERROR);
+						toast.error('Failed to create account connection', {
+							position: 'bottom-right',
+						});
+					},
+				},
+			);
+		} catch (error) {
+			console.error('Form submission failed:', error);
+		} finally {
+			setIsLoading(false);
+		}
+	}, [form, connectionParams, createAccount]);
+
+	return {
+		form,
+		modalState,
+		isLoading,
+		accountId,
+		connectionCommands,
+		setModalState,
+		handleSubmit,
+		handleClose,
+		connectionParams: connectionParams?.data as
+			| CloudintegrationtypesCredentialsDTO
+			| undefined,
+		isConnectionParamsLoading,
+		handleConnectionSuccess,
+		handleConnectionTimeout,
+		handleConnectionError,
+	};
+}

go.mod

@@ -8,7 +8,7 @@ require (
 	github.com/ClickHouse/clickhouse-go/v2 v2.40.1
 	github.com/DATA-DOG/go-sqlmock v1.5.2
 	github.com/SigNoz/govaluate v0.0.0-20240203125216-988004ccc7fd
-	github.com/SigNoz/signoz-otel-collector v0.144.3-rc.4
+	github.com/SigNoz/signoz-otel-collector v0.144.3
 	github.com/antlr4-go/antlr/v4 v4.13.1
 	github.com/antonmedv/expr v1.15.3
 	github.com/cespare/xxhash/v2 v2.3.0

go.sum

@@ -108,8 +108,8 @@ github.com/SigNoz/expr v1.17.7-beta h1:FyZkleM5dTQ0O6muQfwGpoH5A2ohmN/XTasRCO72g
 github.com/SigNoz/expr v1.17.7-beta/go.mod h1:8/vRC7+7HBzESEqt5kKpYXxrxkr31SaO8r40VO/1IT4=
 github.com/SigNoz/govaluate v0.0.0-20240203125216-988004ccc7fd h1:Bk43AsDYe0fhkbj57eGXx8H3ZJ4zhmQXBnrW523ktj8=
 github.com/SigNoz/govaluate v0.0.0-20240203125216-988004ccc7fd/go.mod h1:nxRcH/OEdM8QxzH37xkGzomr1O0JpYBRS6pwjsWW6Pc=
-github.com/SigNoz/signoz-otel-collector v0.144.3-rc.4 h1:EskJkEMfuuIyArWhV8SleDV/fuKxiaEGTXrCZIFqDT4=
-github.com/SigNoz/signoz-otel-collector v0.144.3-rc.4/go.mod h1:9pLVpcIQvUT88ZiNnZN/MI+XLruvwC+Xm2UzPmGjNfA=
+github.com/SigNoz/signoz-otel-collector v0.144.3 h1:/7PPIqIpPsaWtrgnfHam2XVYP41ZlgEKLHzQO8oVxcA=
+github.com/SigNoz/signoz-otel-collector v0.144.3/go.mod h1:9pLVpcIQvUT88ZiNnZN/MI+XLruvwC+Xm2UzPmGjNfA=
 github.com/Yiling-J/theine-go v0.6.2 h1:1GeoXeQ0O0AUkiwj2S9Jc0Mzx+hpqzmqsJ4kIC4M9AY=
 github.com/Yiling-J/theine-go v0.6.2/go.mod h1:08QpMa5JZ2pKN+UJCRrCasWYO1IKCdl54Xa836rpmDU=
 github.com/afex/hystrix-go v0.0.0-20180502004556-fa1af6a1f4f5/go.mod h1:SkGFH1ia65gfNATL8TAiHDNxPzPdmEL5uirI2Uyuz6c=

pkg/modules/promote/implpromote/module.go

@@ -32,27 +32,17 @@ func NewModule(metadataStore telemetrytypes.MetadataStore, telemetrystore teleme
 }
 
 func (m *module) ListPromotedAndIndexedPaths(ctx context.Context) ([]promotetypes.PromotePath, error) {
-	logsIndexes, err := m.metadataStore.ListLogsJSONIndexes(ctx)
+	indexes, err := m.metadataStore.ListLogsJSONIndexes(ctx)
 	if err != nil {
 		return nil, err
 	}
-	// Flatten the map values (which are slices) into a single slice
-	indexes := slices.Concat(slices.Collect(maps.Values(logsIndexes))...)
 
 	aggr := map[string][]promotetypes.WrappedIndex{}
 	for _, index := range indexes {
-		path, columnType, err := schemamigrator.UnfoldJSONSubColumnIndexExpr(index.Expression)
-		if err != nil {
-			return nil, err
-		}
-
-		// clean backticks from the path
-		path = strings.ReplaceAll(path, "`", "")
-
-		aggr[path] = append(aggr[path], promotetypes.WrappedIndex{
-			ColumnType:  columnType,
-			Type:        index.Type,
-			Granularity: index.Granularity,
+		aggr[index.Name] = append(aggr[index.Name], promotetypes.WrappedIndex{
+			FieldDataType: index.FieldDataType,
+			Type:          index.IndexType,
+			Granularity:   index.Granularity,
 		})
 	}
 	promotedPaths, err := m.listPromotedPaths(ctx)

pkg/querier/postprocess.go

@@ -627,27 +627,17 @@ func convertTimeSeriesDataToScalar(tsData *qbtypes.TimeSeriesData, queryName str
 		return &qbtypes.ScalarData{QueryName: queryName}
 	}
 
-	// Series can have ragged label sets; build the column schema from the
-	// union of all label keys (first-seen order) and fill rows by key lookup.
-	keyOrder := []telemetrytypes.TelemetryFieldKey{}
-	keyIndex := map[string]int{}
-	for _, series := range tsData.Aggregations[0].Series {
-		for _, label := range series.Labels {
-			if _, ok := keyIndex[label.Key.Name]; ok {
-				continue
-			}
-			keyIndex[label.Key.Name] = len(keyOrder)
-			keyOrder = append(keyOrder, label.Key)
-		}
-	}
+	columns := []*qbtypes.ColumnDescriptor{}
 
-	columns := make([]*qbtypes.ColumnDescriptor, 0, len(keyOrder)+len(tsData.Aggregations))
-	for _, key := range keyOrder {
-		columns = append(columns, &qbtypes.ColumnDescriptor{
-			TelemetryFieldKey: key,
-			QueryName:         queryName,
-			Type:              qbtypes.ColumnTypeGroup,
-		})
+	// Add group columns from first series
+	if len(tsData.Aggregations[0].Series) > 0 {
+		for _, label := range tsData.Aggregations[0].Series[0].Labels {
+			columns = append(columns, &qbtypes.ColumnDescriptor{
+				TelemetryFieldKey: label.Key,
+				QueryName:         queryName,
+				Type:              qbtypes.ColumnTypeGroup,
+			})
+		}
 	}
 
 	// Add aggregation columns
@@ -665,18 +655,18 @@ func convertTimeSeriesDataToScalar(tsData *qbtypes.TimeSeriesData, queryName str
 		})
 	}
 
-	// Build rows.
-	groupColCount := len(keyOrder)
+	// Build rows
 	data := [][]any{}
 	for seriesIdx, series := range tsData.Aggregations[0].Series {
 		row := make([]any, len(columns))
 
-		// Place each label under its key's column (by lookup, not index).
-		for _, label := range series.Labels {
-			row[keyIndex[label.Key.Name]] = label.Value
+		// Add group values
+		for i, label := range series.Labels {
+			row[i] = label.Value
 		}
 
 		// Add aggregation values (last value)
+		groupColCount := len(series.Labels)
 		for aggIdx, agg := range tsData.Aggregations {
 			if seriesIdx < len(agg.Series) && len(agg.Series[seriesIdx].Values) > 0 {
 				lastValue := agg.Series[seriesIdx].Values[len(agg.Series[seriesIdx].Values)-1].Value

pkg/querier/postprocess_test.go

@@ -1,53 +0,0 @@
-package querier
-
-import (
-	"testing"
-
-	"github.com/stretchr/testify/assert"
-	"github.com/stretchr/testify/require"
-
-	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
-	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
-)
-
-// Multiple series with different number of labels, shouldn't panic and should align labels correctly.
-func TestConvertTimeSeriesDataToScalar_RaggedLabels(t *testing.T) {
-	label := func(name string, value any) *qbtypes.Label {
-		return &qbtypes.Label{
-			Key:   telemetrytypes.TelemetryFieldKey{Name: name},
-			Value: value,
-		}
-	}
-	series := func(labels []*qbtypes.Label, value float64) *qbtypes.TimeSeries {
-		return &qbtypes.TimeSeries{
-			Labels: labels,
-			Values: []*qbtypes.TimeSeriesValue{{Timestamp: 1, Value: value}},
-		}
-	}
-
-	tsData := &qbtypes.TimeSeriesData{
-		QueryName: "A",
-		Aggregations: []*qbtypes.AggregationBucket{{
-			Index: 0,
-			Series: []*qbtypes.TimeSeries{
-				series([]*qbtypes.Label{label("label_1", "orphan-0")}, 20),
-				series([]*qbtypes.Label{label("label_1", "box-0"), label("label_2", "rpc-0")}, 10),
-			},
-		}},
-	}
-
-	var sd *qbtypes.ScalarData
-	require.NotPanics(t, func() {
-		sd = convertTimeSeriesDataToScalar(tsData, "A")
-	})
-
-	require.NotNil(t, sd)
-	require.Len(t, sd.Columns, 3)
-	assert.Equal(t, "label_1", sd.Columns[0].Name)
-	assert.Equal(t, "label_2", sd.Columns[1].Name)
-	assert.Equal(t, "__result_0", sd.Columns[2].Name)
-
-	require.Len(t, sd.Data, 2)
-	assert.Equal(t, []any{"orphan-0", nil, 20.0}, sd.Data[0])
-	assert.Equal(t, []any{"box-0", "rpc-0", 10.0}, sd.Data[1])
-}

pkg/querybuilder/collision.go

@@ -204,7 +204,7 @@ func AdjustKey(key *telemetrytypes.TelemetryFieldKey, keys map[string][]*telemet
 		// Downstream query builder should handle multiple matching keys with their own metadata
 		// and not rely on this function to do so.
 		materialized := true
-		indexes := []telemetrytypes.JSONDataTypeIndex{}
+		indexes := []telemetrytypes.TelemetryFieldKeySkipIndex{}
 		fieldContextsSeen := map[telemetrytypes.FieldContext]bool{}
 		dataTypesSeen := map[telemetrytypes.FieldDataType]bool{}
 		for _, matchingKey := range matchingKeys {

pkg/telemetrylogs/json_condition_builder.go

@@ -195,8 +195,8 @@ func (c *jsonConditionBuilder) buildPrimitiveTerminalCondition(node *telemetryty
 	// the field genuinely holds the empty/zero value.
 	//
 	// Note: indexing is also skipped for Array Nested fields because they cannot be indexed.
-	indexed := slices.ContainsFunc(node.TerminalConfig.Key.Indexes, func(index telemetrytypes.JSONDataTypeIndex) bool {
-		return index.Type == node.TerminalConfig.ElemType
+	indexed := slices.ContainsFunc(node.TerminalConfig.Key.Indexes, func(index telemetrytypes.TelemetryFieldKeySkipIndex) bool {
+		return telemetrytypes.MappingFieldDataTypeToJSONDataType[index.FieldDataType] == node.TerminalConfig.ElemType
 	})
 	isExistsCheck := operator == qbtypes.FilterOperatorExists || operator == qbtypes.FilterOperatorNotExists
 	if node.TerminalConfig.ElemType.IndexSupported && indexed && !isExistsCheck {

pkg/telemetrylogs/json_stmt_builder_test.go

@@ -1127,9 +1127,12 @@ func buildTestTelemetryMetadataStore(t *testing.T, addIndexes bool) *telemetryty
 					return entry.Path == path && entry.Type == jsonType
 				})
 				if idx >= 0 {
-					key.Indexes = append(key.Indexes, telemetrytypes.JSONDataTypeIndex{
-						Type:             jsonType,
-						ColumnExpression: schemamigrator.JSONSubColumnIndexExpr(LogsV2BodyV2Column, path, jsonType.StringValue()),
+					key.Indexes = append(key.Indexes, telemetrytypes.TelemetryFieldKeySkipIndex{
+						Name:            path,
+						FieldContext:    telemetrytypes.FieldContextBody,
+						FieldDataType:   fdt,
+						BaseColumn:      LogsV2BodyV2Column,
+						IndexExpression: schemamigrator.JSONSubColumnIndexExpr(LogsV2BodyV2Column, path, jsonType.StringValue()),
 					})
 				}
 			}

pkg/telemetrymetadata/body_json_metadata.go

@@ -106,7 +106,7 @@ func (t *telemetryMetaStore) buildJSONPlans(keys []*telemetrytypes.TelemetryFiel
 	return nil
 }
 
-func (t *telemetryMetaStore) getJSONPathIndexes(ctx context.Context, paths ...string) (map[string][]telemetrytypes.JSONDataTypeIndex, error) {
+func (t *telemetryMetaStore) getJSONPathIndexes(ctx context.Context, paths ...string) (map[string][]telemetrytypes.TelemetryFieldKeySkipIndex, error) {
 	filteredPaths := []string{}
 	for _, path := range paths {
 		// skip array paths; since they don't have any indexes
@@ -116,47 +116,22 @@ func (t *telemetryMetaStore) getJSONPathIndexes(ctx context.Context, paths ...st
 		filteredPaths = append(filteredPaths, path)
 	}
 	if len(filteredPaths) == 0 {
-		return make(map[string][]telemetrytypes.JSONDataTypeIndex), nil
+		return make(map[string][]telemetrytypes.TelemetryFieldKeySkipIndex), nil
 	}
 
 	// list indexes for the paths
-	indexesMap, err := t.ListLogsJSONIndexes(ctx, filteredPaths...)
+	indexes, err := t.ListLogsJSONIndexes(ctx, filteredPaths...)
 	if err != nil {
 		return nil, errors.WrapInternalf(err, CodeFailLoadLogsJSONIndexes, "failed to list JSON path indexes")
 	}
 
 	// build a set of indexes
-	cleanIndexes := make(map[string][]telemetrytypes.JSONDataTypeIndex)
-	for path, indexes := range indexesMap {
-		for _, index := range indexes {
-			columnExpr, columnType, err := schemamigrator.UnfoldJSONSubColumnIndexExpr(index.Expression)
-			if err != nil {
-				return nil, errors.WrapInternalf(err, CodeFailLoadLogsJSONIndexes, "failed to unfold JSON sub column index expression: %s", index.Expression)
-			}
-
-			jsonDataType, found := telemetrytypes.MappingStringToJSONDataType[columnType]
-			if !found {
-				t.logger.ErrorContext(ctx, "failed to map column type to JSON data type", slog.String("column_type", columnType), slog.String("column_expr", columnExpr))
-				continue
-			}
-
-			if jsonDataType == telemetrytypes.String {
-				cleanIndexes[path] = append(cleanIndexes[path], telemetrytypes.JSONDataTypeIndex{
-					Type:             telemetrytypes.String,
-					ColumnExpression: columnExpr,
-					IndexExpression:  index.Expression,
-				})
-			} else if strings.HasPrefix(index.Type, "minmax") {
-				cleanIndexes[path] = append(cleanIndexes[path], telemetrytypes.JSONDataTypeIndex{
-					Type:             jsonDataType,
-					ColumnExpression: columnExpr,
-					IndexExpression:  index.Expression,
-				})
-			}
-		}
+	fieldPathToIndexes := make(map[string][]telemetrytypes.TelemetryFieldKeySkipIndex)
+	for _, index := range indexes {
+		fieldPathToIndexes[index.Name] = append(fieldPathToIndexes[index.Name], index)
 	}
 
-	return cleanIndexes, nil
+	return fieldPathToIndexes, nil
 }
 
 func buildListLogsJSONIndexesQuery(cluster string, filters ...string) (string, []any) {
@@ -173,14 +148,15 @@ func buildListLogsJSONIndexesQuery(cluster string, filters ...string) (string, [
 
 	filterExprs := []string{}
 	for _, filter := range filters {
-		filterExprs = append(filterExprs, sb.ILike("expr", fmt.Sprintf("%%%s%%", querybuilder.FormatValueForContains(filter))))
+		// Remove backticks from actual expr cuz paths from metadata doesn't have backticks
+		filterExprs = append(filterExprs, sb.ILike("replaceAll(expr, '`', '')", fmt.Sprintf("%%%s%%", querybuilder.FormatValueForContains(filter))))
 	}
 	sb.Where(sb.Or(filterExprs...))
 
 	return sb.BuildWithFlavor(sqlbuilder.ClickHouse)
 }
 
-func (t *telemetryMetaStore) ListLogsJSONIndexes(ctx context.Context, filters ...string) (map[string][]schemamigrator.Index, error) {
+func (t *telemetryMetaStore) ListLogsJSONIndexes(ctx context.Context, filters ...string) ([]telemetrytypes.TelemetryFieldKeySkipIndex, error) {
 	ctx = withTelemetryContext(ctx, "ListLogsJSONIndexes")
 	query, args := buildListLogsJSONIndexesQuery(t.telemetrystore.Cluster(), filters...)
 	rows, err := t.telemetrystore.ClickhouseDB().Query(ctx, query, args...)
@@ -189,7 +165,7 @@ func (t *telemetryMetaStore) ListLogsJSONIndexes(ctx context.Context, filters ..
 	}
 	defer rows.Close()
 
-	indexes := make(map[string][]schemamigrator.Index)
+	indexes := []telemetrytypes.TelemetryFieldKeySkipIndex{}
 	for rows.Next() {
 		var name string
 		var typeFull string
@@ -198,11 +174,39 @@ func (t *telemetryMetaStore) ListLogsJSONIndexes(ctx context.Context, filters ..
 		if err := rows.Scan(&name, &typeFull, &expr, &granularity); err != nil {
 			return nil, errors.WrapInternalf(err, CodeFailLoadLogsJSONIndexes, "failed to scan string indexed column")
 		}
-		indexes[name] = append(indexes[name], schemamigrator.Index{
-			Name:        name,
-			Type:        typeFull,
-			Expression:  expr,
-			Granularity: int(granularity),
+
+		columnExpr, columnType, err := schemamigrator.UnfoldJSONSubColumnIndexExpr(expr)
+		if err != nil {
+			return nil, errors.WrapInternalf(err, CodeFailLoadLogsJSONIndexes, "failed to unfold JSON sub column index expression: %s", expr)
+		}
+
+		fdt, found := telemetrytypes.MappingJSONDataTypeToFieldDataType[columnType]
+		if !found {
+			t.logger.ErrorContext(ctx, "failed to map JSON data type to field data type", slog.String("column_type", columnType), slog.String("column_expr", columnExpr))
+			continue
+		}
+
+		baseColumn := ""
+		fieldName := ""
+		switch {
+		case strings.HasPrefix(columnExpr, telemetrylogs.BodyV2ColumnPrefix):
+			baseColumn = telemetrylogs.BodyV2ColumnPrefix
+			fieldName = strings.TrimPrefix(columnExpr, telemetrylogs.BodyV2ColumnPrefix)
+		case strings.HasPrefix(columnExpr, telemetrylogs.BodyPromotedColumnPrefix):
+			baseColumn = telemetrylogs.BodyPromotedColumnPrefix
+			fieldName = strings.TrimPrefix(columnExpr, telemetrylogs.BodyPromotedColumnPrefix)
+		}
+		fieldName = strings.ReplaceAll(fieldName, "`", "")
+
+		indexes = append(indexes, telemetrytypes.TelemetryFieldKeySkipIndex{
+			Name:            fieldName,
+			FieldContext:    telemetrytypes.FieldContextBody,
+			FieldDataType:   fdt,
+			BaseColumn:      baseColumn,
+			IndexName:       name,
+			IndexType:       typeFull,
+			IndexExpression: expr,
+			Granularity:     int(granularity),
 		})
 	}
 

pkg/telemetrymetadata/body_json_metadata_test.go

@@ -36,7 +36,7 @@ func TestBuildListLogsJSONIndexesQuery(t *testing.T) {
 			cluster: "test-cluster",
 			filters: []string{"foo", "bar"},
 			expectedSQL: "SELECT name, type_full, expr, granularity FROM clusterAllReplicas('test-cluster', system.data_skipping_indices) " +
-				"WHERE database = ? AND table = ? AND (LOWER(expr) LIKE LOWER(?) OR LOWER(expr) LIKE LOWER(?)) AND (LOWER(expr) LIKE LOWER(?) OR LOWER(expr) LIKE LOWER(?))",
+				"WHERE database = ? AND table = ? AND (LOWER(expr) LIKE LOWER(?) OR LOWER(expr) LIKE LOWER(?)) AND (LOWER(replaceAll(expr, '`', '')) LIKE LOWER(?) OR LOWER(replaceAll(expr, '`', '')) LIKE LOWER(?))",
 			expectedArgs: []any{
 				telemetrylogs.DBName,
 				telemetrylogs.LogsV2LocalTableName,

pkg/types/promotetypes/types.go

@@ -10,10 +10,10 @@ import (
 )
 
 type WrappedIndex struct {
-	JSONDataType telemetrytypes.JSONDataType `json:"-"`
-	ColumnType   string                      `json:"column_type"`
-	Type         string                      `json:"type"`
-	Granularity  int                         `json:"granularity"`
+	JSONDataType  telemetrytypes.JSONDataType  `json:"-"`
+	FieldDataType telemetrytypes.FieldDataType `json:"fieldDataType"`
+	Type          string                       `json:"type"`
+	Granularity   int                          `json:"granularity"`
 }
 
 type PromotePath struct {
@@ -60,12 +60,12 @@ func (i *PromotePath) ValidateAndSetDefaults() error {
 			return errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "index granularity must be greater than 0")
 		}
 
-		jsonDataType, ok := telemetrytypes.MappingStringToJSONDataType[index.ColumnType]
+		jsonDataType, ok := telemetrytypes.MappingFieldDataTypeToJSONDataType[index.FieldDataType]
 		if !ok {
-			return errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "invalid column type: %s", index.ColumnType)
+			return errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "invalid column type: %s", index.FieldDataType)
 		}
 		if !jsonDataType.IndexSupported {
-			return errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "index is not supported for column type: %s", index.ColumnType)
+			return errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "index is not supported for column type: %s", index.FieldDataType)
 		}
 
 		i.Indexes[idx].JSONDataType = jsonDataType

pkg/types/telemetrytypes/field.go

@@ -37,9 +37,9 @@ type TelemetryFieldKey struct {
 	FieldContext  FieldContext  `json:"fieldContext,omitzero"`
 	FieldDataType FieldDataType `json:"fieldDataType,omitzero"`
 
-	JSONPlan     JSONAccessPlan      `json:"-"`
-	Indexes      []JSONDataTypeIndex `json:"-"`
-	Materialized bool                `json:"-"` // refers to promoted in case of body.... fields
+	JSONPlan     JSONAccessPlan               `json:"-"`
+	Indexes      []TelemetryFieldKeySkipIndex `json:"-"`
+	Materialized bool                         `json:"-"` // refers to promoted in case of body.... fields
 
 	Evolutions []*EvolutionEntry `json:"-"`
 }
@@ -102,7 +102,7 @@ func (f TelemetryFieldKey) String() string {
 			if i > 0 {
 				sb.WriteString("; ")
 			}
-			fmt.Fprintf(&sb, "{type=%s, columnExpr=%s, indexExpr=%s}", index.Type.StringValue(), index.ColumnExpression, index.IndexExpression)
+			fmt.Fprintf(&sb, "{type=%s, indexExpr=%s}", MappingFieldDataTypeToJSONDataType[index.FieldDataType].StringValue(), index.IndexExpression)
 		}
 		sb.WriteString("]")
 	}
@@ -400,3 +400,14 @@ func NewFieldValueSelectorFromPostableFieldValueParams(params PostableFieldValue
 
 	return fieldValueSelector
 }
+
+type TelemetryFieldKeySkipIndex struct {
+	Name            string        `json:"name"` // Name is TelemetryFieldKey.Name not IndexName from ClickHouse
+	FieldContext    FieldContext  `json:"fieldContext,omitzero"`
+	FieldDataType   FieldDataType `json:"fieldDataType,omitzero"`
+	BaseColumn      string        `json:"baseColumn"`
+	IndexName       string        `json:"indexName"`
+	IndexType       string        `json:"indexType"`
+	IndexExpression string        `json:"indexExpression"`
+	Granularity     int           `json:"granularity"`
+}

pkg/types/telemetrytypes/json_datatype.go

@@ -1,11 +1,5 @@
 package telemetrytypes
 
-type JSONDataTypeIndex struct {
-	Type             JSONDataType
-	ColumnExpression string
-	IndexExpression  string
-}
-
 type JSONDataType struct {
 	str            string // Store the correct case for ClickHouse
 	IsArray        bool
@@ -32,18 +26,17 @@ var (
 	ArrayJSON    = JSONDataType{"Array(JSON)", true, "JSON", false}
 )
 
-var MappingStringToJSONDataType = map[string]JSONDataType{
-	"String":                   String,
-	"Int64":                    Int64,
-	"Float64":                  Float64,
-	"Bool":                     Bool,
-	"Dynamic":                  Dynamic,
-	"Array(Nullable(String))":  ArrayString,
-	"Array(Nullable(Int64))":   ArrayInt64,
-	"Array(Nullable(Float64))": ArrayFloat64,
-	"Array(Nullable(Bool))":    ArrayBool,
-	"Array(Dynamic)":           ArrayDynamic,
-	"Array(JSON)":              ArrayJSON,
+var MappingJSONDataTypeToFieldDataType = map[string]FieldDataType{
+	"String":                   FieldDataTypeString,
+	"Int64":                    FieldDataTypeInt64,
+	"Float64":                  FieldDataTypeFloat64,
+	"Bool":                     FieldDataTypeBool,
+	"Array(Nullable(String))":  FieldDataTypeArrayString,
+	"Array(Nullable(Int64))":   FieldDataTypeArrayInt64,
+	"Array(Nullable(Float64))": FieldDataTypeArrayFloat64,
+	"Array(Nullable(Bool))":    FieldDataTypeArrayBool,
+	"Array(Dynamic)":           FieldDataTypeArrayDynamic,
+	"Array(JSON)":              FieldDataTypeArrayJSON,
 }
 
 var MappingFieldDataTypeToJSONDataType = map[FieldDataType]JSONDataType{

pkg/types/telemetrytypes/store.go

@@ -3,7 +3,6 @@ package telemetrytypes
 import (
 	"context"
 
-	schemamigrator "github.com/SigNoz/signoz-otel-collector/cmd/signozschemamigrator/schema_migrator"
 	"github.com/SigNoz/signoz/pkg/types/metrictypes"
 )
 
@@ -35,7 +34,7 @@ type MetadataStore interface {
 	FetchTemporalityAndTypeMulti(ctx context.Context, queryTimeRangeStartTs, queryTimeRangeEndTs uint64, metricNames ...string) (map[string]metrictypes.Temporality, map[string]metrictypes.Type, error)
 
 	// ListLogsJSONIndexes lists the JSON indexes for the logs table.
-	ListLogsJSONIndexes(ctx context.Context, filters ...string) (map[string][]schemamigrator.Index, error)
+	ListLogsJSONIndexes(ctx context.Context, filters ...string) ([]TelemetryFieldKeySkipIndex, error)
 
 	// ListPromotedPaths lists the promoted paths.
 	GetPromotedPaths(ctx context.Context, paths ...string) (map[string]bool, error)

pkg/types/telemetrytypes/telemetrytypestest/metadata_store.go

@@ -4,7 +4,6 @@ import (
 	"context"
 	"strings"
 
-	schemamigrator "github.com/SigNoz/signoz-otel-collector/cmd/signozschemamigrator/schema_migrator"
 	"github.com/SigNoz/signoz/pkg/types/metrictypes"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 )
@@ -18,7 +17,7 @@ type MockMetadataStore struct {
 	TemporalityMap             map[string]metrictypes.Temporality
 	TypeMap                    map[string]metrictypes.Type
 	PromotedPathsMap           map[string]bool
-	LogsJSONIndexesMap         map[string][]schemamigrator.Index
+	LogsJSONIndexes            []telemetrytypes.TelemetryFieldKeySkipIndex
 	ColumnEvolutionMetadataMap map[string][]*telemetrytypes.EvolutionEntry
 	LookupKeysMap              map[telemetrytypes.MetricMetadataLookupKey]int64
 	// StaticFields holds signal-specific intrinsic field definitions (e.g. telemetrylogs.IntrinsicFields).
@@ -34,7 +33,7 @@ func NewMockMetadataStore() *MockMetadataStore {
 		TemporalityMap:             make(map[string]metrictypes.Temporality),
 		TypeMap:                    make(map[string]metrictypes.Type),
 		PromotedPathsMap:           make(map[string]bool),
-		LogsJSONIndexesMap:         make(map[string][]schemamigrator.Index),
+		LogsJSONIndexes:            []telemetrytypes.TelemetryFieldKeySkipIndex{},
 		ColumnEvolutionMetadataMap: make(map[string][]*telemetrytypes.EvolutionEntry),
 		LookupKeysMap:              make(map[telemetrytypes.MetricMetadataLookupKey]int64),
 		StaticFields:               make(map[string]telemetrytypes.TelemetryFieldKey),
@@ -369,8 +368,8 @@ func (m *MockMetadataStore) GetPromotedPaths(ctx context.Context, paths ...strin
 }
 
 // ListLogsJSONIndexes lists the JSON indexes for the logs table.
-func (m *MockMetadataStore) ListLogsJSONIndexes(ctx context.Context, filters ...string) (map[string][]schemamigrator.Index, error) {
-	return m.LogsJSONIndexesMap, nil
+func (m *MockMetadataStore) ListLogsJSONIndexes(ctx context.Context, filters ...string) ([]telemetrytypes.TelemetryFieldKeySkipIndex, error) {
+	return m.LogsJSONIndexes, nil
 }
 
 func (m *MockMetadataStore) updateColumnEvolutionMetadataForKeys(_ context.Context, keysToUpdate []*telemetrytypes.TelemetryFieldKey) map[string][]*telemetrytypes.EvolutionEntry {