feat: enhance styling for Azure and AWS account management

docs/api/openapi.yml

@@ -668,8 +668,8 @@ components:
       properties:
         aws:
           $ref: '#/components/schemas/CloudintegrationtypesAWSAccountConfig'
-      required:
-      - aws
+        azure:
+          $ref: '#/components/schemas/CloudintegrationtypesAzureAccountConfig'
       type: object
     CloudintegrationtypesAgentReport:
       nullable: true
@@ -693,6 +693,90 @@ components:
           nullable: true
           type: array
       type: object
+    CloudintegrationtypesAzureAccountConfig:
+      properties:
+        deploymentRegion:
+          type: string
+        resourceGroups:
+          items:
+            type: string
+          type: array
+      required:
+      - deploymentRegion
+      - resourceGroups
+      type: object
+    CloudintegrationtypesAzureConnectionArtifact:
+      properties:
+        cliCommand:
+          type: string
+        cloudPowerShellCommand:
+          type: string
+      required:
+      - cliCommand
+      - cloudPowerShellCommand
+      type: object
+    CloudintegrationtypesAzureIntegrationConfig:
+      properties:
+        deploymentRegion:
+          type: string
+        resourceGroups:
+          items:
+            type: string
+          type: array
+        telemetryCollectionStrategy:
+          items:
+            $ref: '#/components/schemas/CloudintegrationtypesAzureTelemetryCollectionStrategy'
+          type: array
+      required:
+      - deploymentRegion
+      - resourceGroups
+      - telemetryCollectionStrategy
+      type: object
+    CloudintegrationtypesAzureLogsCollectionStrategy:
+      properties:
+        categoryGroups:
+          items:
+            type: string
+          type: array
+      required:
+      - categoryGroups
+      type: object
+    CloudintegrationtypesAzureMetricsCollectionStrategy:
+      type: object
+    CloudintegrationtypesAzureServiceConfig:
+      properties:
+        logs:
+          $ref: '#/components/schemas/CloudintegrationtypesAzureServiceLogsConfig'
+        metrics:
+          $ref: '#/components/schemas/CloudintegrationtypesAzureServiceMetricsConfig'
+      required:
+      - logs
+      - metrics
+      type: object
+    CloudintegrationtypesAzureServiceLogsConfig:
+      properties:
+        enabled:
+          type: boolean
+      type: object
+    CloudintegrationtypesAzureServiceMetricsConfig:
+      properties:
+        enabled:
+          type: boolean
+      type: object
+    CloudintegrationtypesAzureTelemetryCollectionStrategy:
+      properties:
+        logs:
+          $ref: '#/components/schemas/CloudintegrationtypesAzureLogsCollectionStrategy'
+        metrics:
+          $ref: '#/components/schemas/CloudintegrationtypesAzureMetricsCollectionStrategy'
+        resourceProvider:
+          type: string
+        resourceType:
+          type: string
+      required:
+      - resourceProvider
+      - resourceType
+      type: object
     CloudintegrationtypesCloudIntegrationService:
       nullable: true
       properties:
@@ -737,8 +821,8 @@ components:
       properties:
         aws:
           $ref: '#/components/schemas/CloudintegrationtypesAWSConnectionArtifact'
-      required:
-      - aws
+        azure:
+          $ref: '#/components/schemas/CloudintegrationtypesAzureConnectionArtifact'
       type: object
     CloudintegrationtypesCredentials:
       properties:
@@ -910,8 +994,8 @@ components:
       properties:
         aws:
           $ref: '#/components/schemas/CloudintegrationtypesAWSPostableAccountConfig'
-      required:
-      - aws
+        azure:
+          $ref: '#/components/schemas/CloudintegrationtypesAzureAccountConfig'
       type: object
     CloudintegrationtypesPostableAgentCheckIn:
       properties:
@@ -934,8 +1018,8 @@ components:
       properties:
         aws:
           $ref: '#/components/schemas/CloudintegrationtypesAWSIntegrationConfig'
-      required:
-      - aws
+        azure:
+          $ref: '#/components/schemas/CloudintegrationtypesAzureIntegrationConfig'
       type: object
     CloudintegrationtypesService:
       properties:
@@ -972,8 +1056,8 @@ components:
       properties:
         aws:
           $ref: '#/components/schemas/CloudintegrationtypesAWSServiceConfig'
-      required:
-      - aws
+        azure:
+          $ref: '#/components/schemas/CloudintegrationtypesAzureServiceConfig'
       type: object
     CloudintegrationtypesServiceID:
       enum:
@@ -990,6 +1074,8 @@ components:
       - s3sync
       - sns
       - sqs
+      - storageaccountsblob
+      - cdnprofile
       type: string
     CloudintegrationtypesServiceMetadata:
       properties:
@@ -1018,16 +1104,32 @@ components:
       properties:
         aws:
           $ref: '#/components/schemas/CloudintegrationtypesAWSTelemetryCollectionStrategy'
-      required:
-      - aws
+        azure:
+          $ref: '#/components/schemas/CloudintegrationtypesAzureTelemetryCollectionStrategy'
       type: object
     CloudintegrationtypesUpdatableAccount:
       properties:
         config:
-          $ref: '#/components/schemas/CloudintegrationtypesAccountConfig'
+          $ref: '#/components/schemas/CloudintegrationtypesUpdatableAccountConfig'
       required:
       - config
       type: object
+    CloudintegrationtypesUpdatableAccountConfig:
+      properties:
+        aws:
+          $ref: '#/components/schemas/CloudintegrationtypesAWSAccountConfig'
+        azure:
+          $ref: '#/components/schemas/CloudintegrationtypesUpdatableAzureAccountConfig'
+      type: object
+    CloudintegrationtypesUpdatableAzureAccountConfig:
+      properties:
+        resourceGroups:
+          items:
+            type: string
+          type: array
+      required:
+      - resourceGroups
+      type: object
     CloudintegrationtypesUpdatableService:
       properties:
         config:

frontend/.eslintrc.cjs

@@ -66,6 +66,7 @@ module.exports = {
 	rules: {
 		// Asset migration — base-path safety
 		'rulesdir/no-unsupported-asset-pattern': 'error',
+		'rulesdir/prefer-signoz-ui-icons': 'warn',
 
 		// Code quality rules
 		'prefer-const': 'error', // Enforces const for variables never reassigned

frontend/eslint-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

@@ -795,7 +795,8 @@ export interface CloudintegrationtypesAccountDTO {
 }
 
 export interface CloudintegrationtypesAccountConfigDTO {
-	aws: CloudintegrationtypesAWSAccountConfigDTO;
+	aws?: CloudintegrationtypesAWSAccountConfigDTO;
+	azure?: CloudintegrationtypesAzureAccountConfigDTO;
 }
 
 /**
@@ -829,6 +830,86 @@ export interface CloudintegrationtypesAssetsDTO {
 	dashboards?: CloudintegrationtypesDashboardDTO[] | null;
 }
 
+export interface CloudintegrationtypesAzureAccountConfigDTO {
+	/**
+	 * @type string
+	 */
+	deploymentRegion: string;
+	/**
+	 * @type array
+	 */
+	resourceGroups: string[];
+}
+
+export interface CloudintegrationtypesAzureConnectionArtifactDTO {
+	/**
+	 * @type string
+	 */
+	cliCommand: string;
+	/**
+	 * @type string
+	 */
+	cloudPowerShellCommand: string;
+}
+
+export interface CloudintegrationtypesAzureIntegrationConfigDTO {
+	/**
+	 * @type string
+	 */
+	deploymentRegion: string;
+	/**
+	 * @type array
+	 */
+	resourceGroups: string[];
+	/**
+	 * @type array
+	 */
+	telemetryCollectionStrategy: CloudintegrationtypesAzureTelemetryCollectionStrategyDTO[];
+}
+
+export interface CloudintegrationtypesAzureLogsCollectionStrategyDTO {
+	/**
+	 * @type array
+	 */
+	categoryGroups: string[];
+}
+
+export interface CloudintegrationtypesAzureMetricsCollectionStrategyDTO {
+	[key: string]: unknown;
+}
+
+export interface CloudintegrationtypesAzureServiceConfigDTO {
+	logs: CloudintegrationtypesAzureServiceLogsConfigDTO;
+	metrics: CloudintegrationtypesAzureServiceMetricsConfigDTO;
+}
+
+export interface CloudintegrationtypesAzureServiceLogsConfigDTO {
+	/**
+	 * @type boolean
+	 */
+	enabled?: boolean;
+}
+
+export interface CloudintegrationtypesAzureServiceMetricsConfigDTO {
+	/**
+	 * @type boolean
+	 */
+	enabled?: boolean;
+}
+
+export interface CloudintegrationtypesAzureTelemetryCollectionStrategyDTO {
+	logs?: CloudintegrationtypesAzureLogsCollectionStrategyDTO;
+	metrics?: CloudintegrationtypesAzureMetricsCollectionStrategyDTO;
+	/**
+	 * @type string
+	 */
+	resourceProvider: string;
+	/**
+	 * @type string
+	 */
+	resourceType: string;
+}
+
 /**
  * @nullable
  */
@@ -890,7 +971,8 @@ export interface CloudintegrationtypesCollectedMetricDTO {
 }
 
 export interface CloudintegrationtypesConnectionArtifactDTO {
-	aws: CloudintegrationtypesAWSConnectionArtifactDTO;
+	aws?: CloudintegrationtypesAWSConnectionArtifactDTO;
+	azure?: CloudintegrationtypesAzureConnectionArtifactDTO;
 }
 
 export interface CloudintegrationtypesCredentialsDTO {
@@ -1072,7 +1154,8 @@ export interface CloudintegrationtypesPostableAccountDTO {
 }
 
 export interface CloudintegrationtypesPostableAccountConfigDTO {
-	aws: CloudintegrationtypesAWSPostableAccountConfigDTO;
+	aws?: CloudintegrationtypesAWSPostableAccountConfigDTO;
+	azure?: CloudintegrationtypesAzureAccountConfigDTO;
 }
 
 /**
@@ -1107,7 +1190,8 @@ export interface CloudintegrationtypesPostableAgentCheckInDTO {
 }
 
 export interface CloudintegrationtypesProviderIntegrationConfigDTO {
-	aws: CloudintegrationtypesAWSIntegrationConfigDTO;
+	aws?: CloudintegrationtypesAWSIntegrationConfigDTO;
+	azure?: CloudintegrationtypesAzureIntegrationConfigDTO;
 }
 
 export interface CloudintegrationtypesServiceDTO {
@@ -1135,7 +1219,8 @@ export interface CloudintegrationtypesServiceDTO {
 }
 
 export interface CloudintegrationtypesServiceConfigDTO {
-	aws: CloudintegrationtypesAWSServiceConfigDTO;
+	aws?: CloudintegrationtypesAWSServiceConfigDTO;
+	azure?: CloudintegrationtypesAzureServiceConfigDTO;
 }
 
 export enum CloudintegrationtypesServiceIDDTO {
@@ -1152,6 +1237,8 @@ export enum CloudintegrationtypesServiceIDDTO {
 	s3sync = 's3sync',
 	sns = 'sns',
 	sqs = 'sqs',
+	storageaccountsblob = 'storageaccountsblob',
+	cdnprofile = 'cdnprofile',
 }
 export interface CloudintegrationtypesServiceMetadataDTO {
 	/**
@@ -1184,11 +1271,24 @@ export interface CloudintegrationtypesSupportedSignalsDTO {
 }
 
 export interface CloudintegrationtypesTelemetryCollectionStrategyDTO {
-	aws: CloudintegrationtypesAWSTelemetryCollectionStrategyDTO;
+	aws?: CloudintegrationtypesAWSTelemetryCollectionStrategyDTO;
+	azure?: CloudintegrationtypesAzureTelemetryCollectionStrategyDTO;
 }
 
 export interface CloudintegrationtypesUpdatableAccountDTO {
-	config: CloudintegrationtypesAccountConfigDTO;
+	config: CloudintegrationtypesUpdatableAccountConfigDTO;
+}
+
+export interface CloudintegrationtypesUpdatableAccountConfigDTO {
+	aws?: CloudintegrationtypesAWSAccountConfigDTO;
+	azure?: CloudintegrationtypesUpdatableAzureAccountConfigDTO;
+}
+
+export interface CloudintegrationtypesUpdatableAzureAccountConfigDTO {
+	/**
+	 * @type array
+	 */
+	resourceGroups: string[];
 }
 
 export interface CloudintegrationtypesUpdatableServiceDTO {

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/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,10 @@ 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,17 +191,19 @@ 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,
 		});
 	};
@@ -167,13 +211,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(
 		() =>
@@ -189,6 +236,7 @@ function AccountActions(): JSX.Element {
 	return (
 		<div className="hero-section__actions">
 			<AccountActionsRenderer
+				type={type}
 				accounts={accounts}
 				isLoading={isLoading}
 				activeAccount={activeAccount}
@@ -205,17 +253,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,
@@ -123,8 +192,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> => {
@@ -143,25 +212,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,
 						},
 					},
 					{
@@ -172,7 +241,7 @@ function ServiceDetails(): JSX.Element | null {
 
 							const servicesListQueryKey = getListServicesMetadataQueryKey(
 								{
-									cloudProvider: INTEGRATION_TYPES.AWS,
+									cloudProvider: type,
 								},
 								{
 									cloud_integration_id: cloudAccountId,
@@ -205,7 +274,7 @@ function ServiceDetails(): JSX.Element | null {
 							invalidateGetService(
 								queryClient,
 								{
-									cloudProvider: INTEGRATION_TYPES.AWS,
+									cloudProvider: type,
 									serviceId,
 								},
 								{
@@ -216,14 +285,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,
@@ -243,7 +312,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) {
@@ -264,10 +342,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 {
@@ -81,9 +83,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,31 @@
+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';
@@ -63,8 +62,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 (
@@ -93,20 +103,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/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';
 
@@ -164,7 +164,8 @@ export function useIntegrationModal({
 				{
 					onSuccess: (response: CreateAccountMutationResult) => {
 						const accountId = response.data.id;
-						const connectionUrl = response.data.connectionArtifact.aws.connectionUrl;
+						const connectionUrl =
+							response.data.connectionArtifact.aws?.connectionUrl ?? '';
 
 						logEvent(
 							'AWS Integration: Account connection attempt redirected to AWS',

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,190 @@
+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,
+	};
+}

pkg/modules/cloudintegration/implcloudintegration/handler.go

@@ -373,7 +373,13 @@ func (handler *handler) UpdateService(rw http.ResponseWriter, r *http.Request) {
 
 	// update or create service
 	if svc.CloudIntegrationService == nil {
-		cloudIntegrationService := cloudintegrationtypes.NewCloudIntegrationService(serviceID, cloudIntegrationID, req.Config)
+		var cloudIntegrationService *cloudintegrationtypes.CloudIntegrationService
+		cloudIntegrationService, err = cloudintegrationtypes.NewCloudIntegrationService(serviceID, cloudIntegrationID, provider, req.Config)
+		if err != nil {
+			render.Error(rw, err)
+			return
+		}
+
 		err = handler.module.CreateService(ctx, orgID, cloudIntegrationService, provider)
 	} else {
 		err = svc.CloudIntegrationService.Update(provider, serviceID, req.Config)

pkg/types/cloudintegrationtypes/account.go

@@ -29,8 +29,13 @@ type AgentReport struct {
 }
 
 type AccountConfig struct {
-	// required till new providers are added
-	AWS *AWSAccountConfig `json:"aws" required:"true" nullable:"false"`
+	AWS   *AWSAccountConfig   `json:"aws,omitempty" required:"false" nullable:"false"`
+	Azure *AzureAccountConfig `json:"azure,omitempty" required:"false" nullable:"false"`
+}
+
+type UpdatableAccountConfig struct {
+	AWS   *UpdatableAWSAccountConfig   `json:"aws,omitempty" required:"false" nullable:"false"`
+	Azure *UpdatableAzureAccountConfig `json:"azure,omitempty" required:"false" nullable:"false"`
 }
 
 type PostableAccount struct {
@@ -41,7 +46,8 @@ type PostableAccount struct {
 type PostableAccountConfig struct {
 	// as agent version is common for all providers, we can keep it at top level of this struct
 	AgentVersion string
-	AWS          *AWSPostableAccountConfig `json:"aws" required:"true" nullable:"false"`
+	AWS          *AWSPostableAccountConfig   `json:"aws,omitempty" required:"false" nullable:"false"`
+	Azure        *AzurePostableAccountConfig `json:"azure,omitempty" required:"false" nullable:"false"`
 }
 
 type Credentials struct {
@@ -58,7 +64,8 @@ type GettableAccountWithConnectionArtifact struct {
 
 type ConnectionArtifact struct {
 	// required till new providers are added
-	AWS *AWSConnectionArtifact `json:"aws" required:"true" nullable:"false"`
+	AWS   *AWSConnectionArtifact   `json:"aws,omitempty" required:"false" nullable:"false"`
+	Azure *AzureConnectionArtifact `json:"azure,omitempty" required:"false" nullable:"false"`
 }
 
 type GetConnectionArtifactRequest = PostableAccount
@@ -68,7 +75,7 @@ type GettableAccounts struct {
 }
 
 type UpdatableAccount struct {
-	Config *AccountConfig `json:"config" required:"true" nullable:"false"`
+	Config *UpdatableAccountConfig `json:"config" required:"true" nullable:"false"`
 }
 
 func NewAccount(orgID valuer.UUID, provider CloudProviderType, config *AccountConfig) *Account {
@@ -119,6 +126,13 @@ func NewAccountFromStorable(storableAccount *StorableCloudIntegration) (*Account
 			return nil, err
 		}
 		account.Config.AWS = awsConfig
+	case CloudProviderTypeAzure:
+		azureConfig := new(AzureAccountConfig)
+		err := json.Unmarshal([]byte(storableAccount.Config), azureConfig)
+		if err != nil {
+			return nil, err
+		}
+		account.Config.Azure = azureConfig
 	}
 
 	if storableAccount.LastAgentReport != nil {
@@ -179,6 +193,24 @@ func NewAccountConfigFromPostable(provider CloudProviderType, config *PostableAc
 		}
 
 		return &AccountConfig{AWS: &AWSAccountConfig{Regions: config.AWS.Regions}}, nil
+	case CloudProviderTypeAzure:
+		if config.Azure == nil {
+			return nil, errors.NewInvalidInputf(ErrCodeInvalidInput, "Azure config can not be nil for Azure provider")
+		}
+
+		if config.Azure.DeploymentRegion == "" {
+			return nil, errors.NewInvalidInputf(ErrCodeInvalidInput, "deployment region is required for Azure provider")
+		}
+
+		if err := validateAzureRegion(config.Azure.DeploymentRegion); err != nil {
+			return nil, err
+		}
+
+		if len(config.Azure.ResourceGroups) == 0 {
+			return nil, errors.NewInvalidInputf(ErrCodeInvalidInput, "at least one resource group is required for Azure provider")
+		}
+
+		return &AccountConfig{Azure: &AzureAccountConfig{DeploymentRegion: config.Azure.DeploymentRegion, ResourceGroups: config.Azure.ResourceGroups}}, nil
 	default:
 		return nil, errors.NewInvalidInputf(ErrCodeCloudProviderInvalidInput, "invalid cloud provider: %s", provider.StringValue())
 	}
@@ -202,6 +234,16 @@ func NewAccountConfigFromUpdatable(provider CloudProviderType, config *Updatable
 		}
 
 		return &AccountConfig{AWS: &AWSAccountConfig{Regions: config.Config.AWS.Regions}}, nil
+	case CloudProviderTypeAzure:
+		if config.Config.Azure == nil {
+			return nil, errors.NewInvalidInputf(ErrCodeInvalidInput, "Azure config can not be nil for Azure provider")
+		}
+
+		if len(config.Config.Azure.ResourceGroups) == 0 {
+			return nil, errors.NewInvalidInputf(ErrCodeInvalidInput, "at least one resource group is required for Azure provider")
+		}
+
+		return &AccountConfig{Azure: &AzureAccountConfig{ResourceGroups: config.Config.Azure.ResourceGroups}}, nil
 	default:
 		return nil, errors.NewInvalidInputf(ErrCodeCloudProviderInvalidInput, "invalid cloud provider: %s", provider.StringValue())
 	}
@@ -223,8 +265,14 @@ func GetSigNozAPIURLFromDeployment(deployment *zeustypes.GettableDeployment) (st
 }
 
 func (account *Account) Update(provider CloudProviderType, config *AccountConfig) error {
+	// deployment region can not be updated once set for Azure
+	if provider == CloudProviderTypeAzure {
+		config.Azure.DeploymentRegion = account.Config.Azure.DeploymentRegion
+	}
+
 	account.Config = config
 	account.UpdatedAt = time.Now()
+
 	return nil
 }
 
@@ -288,6 +336,10 @@ func (config *AccountConfig) ToJSON() ([]byte, error) {
 		return json.Marshal(config.AWS)
 	}
 
+	if config.Azure != nil {
+		return json.Marshal(config.Azure)
+	}
+
 	return nil, errors.NewInternalf(errors.CodeInternal, "no provider account config found")
 }
 

pkg/types/cloudintegrationtypes/checkin.go

@@ -48,7 +48,8 @@ type IntegrationConfig struct {
 }
 
 type ProviderIntegrationConfig struct {
-	AWS *AWSIntegrationConfig `json:"aws" required:"true" nullable:"false"`
+	AWS   *AWSIntegrationConfig   `json:"aws,omitempty" required:"false" nullable:"false"`
+	Azure *AzureIntegrationConfig `json:"azure,omitempty" required:"false" nullable:"false"`
 }
 
 // NewGettableAgentCheckIn constructs a backward-compatible response from an AgentCheckInResponse.

pkg/types/cloudintegrationtypes/cloudintegration.go

@@ -61,7 +61,8 @@ type StorableCloudIntegrationService struct {
 // Following Service config types are only internally used to store service config in DB and use JSON snake case keys for backward compatibility.
 
 type StorableServiceConfig struct {
-	AWS *StorableAWSServiceConfig
+	AWS   *StorableAWSServiceConfig
+	Azure *StorableAzureServiceConfig
 }
 
 type StorableAWSServiceConfig struct {
@@ -78,6 +79,19 @@ type StorableAWSMetricsServiceConfig struct {
 	Enabled bool `json:"enabled"`
 }
 
+type StorableAzureServiceConfig struct {
+	Logs    *StorableAzureLogsServiceConfig    `json:"logs,omitempty"`
+	Metrics *StorableAzureMetricsServiceConfig `json:"metrics,omitempty"`
+}
+
+type StorableAzureLogsServiceConfig struct {
+	Enabled bool `json:"enabled"`
+}
+
+type StorableAzureMetricsServiceConfig struct {
+	Enabled bool `json:"enabled"`
+}
+
 // Scan scans value from DB.
 func (r *StorableAgentReport) Scan(src any) error {
 	var data []byte
@@ -187,6 +201,30 @@ func newStorableServiceConfig(provider CloudProviderType, serviceID ServiceID, s
 		}
 
 		return &StorableServiceConfig{AWS: storableAWSServiceConfig}, nil
+	case CloudProviderTypeAzure:
+		storableAzureServiceConfig := new(StorableAzureServiceConfig)
+
+		if supportedSignals.Logs {
+			if serviceConfig.Azure.Logs == nil {
+				return nil, errors.NewInvalidInputf(ErrCodeCloudIntegrationInvalidConfig, "logs config is required for Azure service: %s", serviceID.StringValue())
+			}
+
+			storableAzureServiceConfig.Logs = &StorableAzureLogsServiceConfig{
+				Enabled: serviceConfig.Azure.Logs.Enabled,
+			}
+		}
+
+		if supportedSignals.Metrics {
+			if serviceConfig.Azure.Metrics == nil {
+				return nil, errors.NewInvalidInputf(ErrCodeCloudIntegrationInvalidConfig, "metrics config is required for Azure service: %s", serviceID.StringValue())
+			}
+
+			storableAzureServiceConfig.Metrics = &StorableAzureMetricsServiceConfig{
+				Enabled: serviceConfig.Azure.Metrics.Enabled,
+			}
+		}
+
+		return &StorableServiceConfig{Azure: storableAzureServiceConfig}, nil
 	default:
 		return nil, errors.NewInvalidInputf(ErrCodeCloudProviderInvalidInput, "invalid cloud provider: %s", provider.StringValue())
 	}
@@ -201,6 +239,13 @@ func newStorableServiceConfigFromJSON(provider CloudProviderType, jsonStr string
 			return nil, errors.WrapInternalf(err, errors.CodeInternal, "couldn't parse AWS service config JSON")
 		}
 		return &StorableServiceConfig{AWS: awsConfig}, nil
+	case CloudProviderTypeAzure:
+		azureConfig := new(StorableAzureServiceConfig)
+		err := json.Unmarshal([]byte(jsonStr), azureConfig)
+		if err != nil {
+			return nil, errors.WrapInternalf(err, errors.CodeInternal, "couldn't parse Azure service config JSON")
+		}
+		return &StorableServiceConfig{Azure: azureConfig}, nil
 	default:
 		return nil, errors.NewInvalidInputf(ErrCodeCloudProviderInvalidInput, "invalid cloud provider: %s", provider.StringValue())
 	}
@@ -214,6 +259,13 @@ func (config *StorableServiceConfig) toJSON(provider CloudProviderType) ([]byte,
 			return nil, errors.WrapInternalf(err, errors.CodeInternal, "couldn't serialize AWS service config to JSON")
 		}
 
+		return jsonBytes, nil
+	case CloudProviderTypeAzure:
+		jsonBytes, err := json.Marshal(config.Azure)
+		if err != nil {
+			return nil, errors.WrapInternalf(err, errors.CodeInternal, "couldn't serialize Azure service config to JSON")
+		}
+
 		return jsonBytes, nil
 	default:
 		return nil, errors.NewInvalidInputf(ErrCodeCloudProviderInvalidInput, "invalid cloud provider: %s", provider.StringValue())

pkg/types/cloudintegrationtypes/cloudprovider_aws.go

@@ -23,6 +23,8 @@ type AWSAccountConfig struct {
 	Regions []string `json:"regions" required:"true" nullable:"false"`
 }
 
+type UpdatableAWSAccountConfig = AWSAccountConfig
+
 // OldAWSCollectionStrategy is the backward-compatible snake_case form of AWSCollectionStrategy,
 // used in the legacy integration_config response field for older agents.
 type OldAWSCollectionStrategy struct {

pkg/types/cloudintegrationtypes/cloudprovider_azure.go

@@ -0,0 +1,64 @@
+package cloudintegrationtypes
+
+type AzureAccountConfig struct {
+	DeploymentRegion string   `json:"deploymentRegion" required:"true"`
+	ResourceGroups   []string `json:"resourceGroups" required:"true" nullable:"false"`
+}
+
+type UpdatableAzureAccountConfig struct {
+	ResourceGroups []string `json:"resourceGroups" required:"true" nullable:"false"`
+}
+
+type AzurePostableAccountConfig = AzureAccountConfig
+
+type AzureConnectionArtifact struct {
+	CLICommand             string `json:"cliCommand" required:"true"`
+	CloudPowerShellCommand string `json:"cloudPowerShellCommand" required:"true"`
+}
+
+type AzureServiceConfig struct {
+	Logs    *AzureServiceLogsConfig    `json:"logs" required:"true"`
+	Metrics *AzureServiceMetricsConfig `json:"metrics" required:"true"`
+}
+
+type AzureServiceLogsConfig struct {
+	Enabled bool `json:"enabled"`
+}
+
+type AzureServiceMetricsConfig struct {
+	Enabled bool `json:"enabled"`
+}
+
+type AzureTelemetryCollectionStrategy struct {
+	//https://learn.microsoft.com/en-us/azure/azure-resource-manager/management/resource-providers-and-types
+	ResourceProvider string                          `json:"resourceProvider" required:"true"`
+	ResourceType     string                          `json:"resourceType" required:"true"`
+	Metrics          *AzureMetricsCollectionStrategy `json:"metrics,omitempty" required:"false" nullable:"false"`
+	Logs             *AzureLogsCollectionStrategy    `json:"logs,omitempty" required:"false" nullable:"false"`
+}
+
+// AzureMetricsCollectionStrategy no additional config required for metrics, will be added in future as required.
+type AzureMetricsCollectionStrategy struct{}
+
+type AzureLogsCollectionStrategy struct {
+	// List of categories to enable for diagnostic settings, to start with it will have 'allLogs' and no filtering.
+	CategoryGroups []string `json:"categoryGroups" required:"true" nullable:"false"`
+}
+
+type AzureIntegrationConfig struct {
+	DeploymentRegion            string                              `json:"deploymentRegion" required:"true"`
+	ResourceGroups              []string                            `json:"resourceGroups" required:"true" nullable:"false"`
+	TelemetryCollectionStrategy []*AzureTelemetryCollectionStrategy `json:"telemetryCollectionStrategy" required:"true" nullable:"false"`
+}
+
+func NewAzureIntegrationConfig(
+	deploymentRegion string,
+	resourceGroups []string,
+	strategies []*AzureTelemetryCollectionStrategy,
+) *AzureIntegrationConfig {
+	return &AzureIntegrationConfig{
+		DeploymentRegion:            deploymentRegion,
+		ResourceGroups:              resourceGroups,
+		TelemetryCollectionStrategy: strategies,
+	}
+}

pkg/types/cloudintegrationtypes/regions.go

@@ -165,3 +165,13 @@ func validateAWSRegion(region string) error {
 
 	return errors.NewInvalidInputf(ErrCodeInvalidCloudRegion, "invalid AWS region: %s", region)
 }
+
+func validateAzureRegion(region string) error {
+	for _, r := range SupportedRegions[CloudProviderTypeAzure] {
+		if r.StringValue() == region {
+			return nil
+		}
+	}
+
+	return errors.NewInvalidInputf(ErrCodeInvalidCloudRegion, "invalid Azure region: %s", region)
+}

pkg/types/cloudintegrationtypes/service.go

@@ -21,8 +21,8 @@ type CloudIntegrationService struct {
 }
 
 type ServiceConfig struct {
-	// required till new providers are added
-	AWS *AWSServiceConfig `json:"aws" required:"true" nullable:"false"`
+	AWS   *AWSServiceConfig   `json:"aws,omitempty" required:"false" nullable:"false"`
+	Azure *AzureServiceConfig `json:"azure,omitempty" required:"false" nullable:"false"`
 }
 
 // ServiceMetadata helps to quickly list available services and whether it is enabled or not.
@@ -88,7 +88,8 @@ type DataCollected struct {
 // TelemetryCollectionStrategy is cloud provider specific configuration for signal collection,
 // this is used by agent to understand the nitty-gritty for collecting telemetry for the cloud provider.
 type TelemetryCollectionStrategy struct {
-	AWS *AWSTelemetryCollectionStrategy `json:"aws" required:"true" nullable:"false"`
+	AWS   *AWSTelemetryCollectionStrategy   `json:"aws,omitempty" required:"false" nullable:"false"`
+	Azure *AzureTelemetryCollectionStrategy `json:"azure,omitempty" required:"false" nullable:"false"`
 }
 
 // Assets represents the collection of dashboards.
@@ -122,7 +123,18 @@ type Dashboard struct {
 	Definition  dashboardtypes.StorableDashboardData `json:"definition,omitempty"`
 }
 
-func NewCloudIntegrationService(serviceID ServiceID, cloudIntegrationID valuer.UUID, config *ServiceConfig) *CloudIntegrationService {
+func NewCloudIntegrationService(serviceID ServiceID, cloudIntegrationID valuer.UUID, provider CloudProviderType, config *ServiceConfig) (*CloudIntegrationService, error) {
+	switch provider {
+	case CloudProviderTypeAWS:
+		if config.AWS == nil {
+			return nil, errors.NewInvalidInputf(ErrCodeInvalidInput, "AWS config is required for AWS service")
+		}
+	case CloudProviderTypeAzure:
+		if config.Azure == nil {
+			return nil, errors.NewInvalidInputf(ErrCodeInvalidInput, "Azure config is required for Azure service")
+		}
+	}
+
 	return &CloudIntegrationService{
 		Identifiable: types.Identifiable{
 			ID: valuer.GenerateUUID(),
@@ -134,7 +146,7 @@ func NewCloudIntegrationService(serviceID ServiceID, cloudIntegrationID valuer.U
 		Type:               serviceID,
 		Config:             config,
 		CloudIntegrationID: cloudIntegrationID,
-	}
+	}, nil
 }
 
 func NewCloudIntegrationServiceFromStorable(stored *StorableCloudIntegrationService, config *ServiceConfig) *CloudIntegrationService {
@@ -191,6 +203,22 @@ func NewServiceConfigFromJSON(provider CloudProviderType, jsonString string) (*S
 		}
 
 		return &ServiceConfig{AWS: awsServiceConfig}, nil
+	case CloudProviderTypeAzure:
+		azureServiceConfig := new(AzureServiceConfig)
+
+		if storableServiceConfig.Azure.Logs != nil {
+			azureServiceConfig.Logs = &AzureServiceLogsConfig{
+				Enabled: storableServiceConfig.Azure.Logs.Enabled,
+			}
+		}
+
+		if storableServiceConfig.Azure.Metrics != nil {
+			azureServiceConfig.Metrics = &AzureServiceMetricsConfig{
+				Enabled: storableServiceConfig.Azure.Metrics.Enabled,
+			}
+		}
+
+		return &ServiceConfig{Azure: azureServiceConfig}, nil
 	default:
 		return nil, errors.NewInvalidInputf(ErrCodeCloudProviderInvalidInput, "invalid cloud provider: %s", provider.StringValue())
 	}
@@ -228,6 +256,10 @@ func (config *ServiceConfig) IsServiceEnabled(provider CloudProviderType) bool {
 		logsEnabled := config.AWS.Logs != nil && config.AWS.Logs.Enabled
 		metricsEnabled := config.AWS.Metrics != nil && config.AWS.Metrics.Enabled
 		return logsEnabled || metricsEnabled
+	case CloudProviderTypeAzure:
+		logsEnabled := config.Azure.Logs != nil && config.Azure.Logs.Enabled
+		metricsEnabled := config.Azure.Metrics != nil && config.Azure.Metrics.Enabled
+		return logsEnabled || metricsEnabled
 	default:
 		return false
 	}
@@ -239,6 +271,8 @@ func (config *ServiceConfig) IsMetricsEnabled(provider CloudProviderType) bool {
 	switch provider {
 	case CloudProviderTypeAWS:
 		return config.AWS.Metrics != nil && config.AWS.Metrics.Enabled
+	case CloudProviderTypeAzure:
+		return config.Azure.Metrics != nil && config.Azure.Metrics.Enabled
 	default:
 		return false
 	}
@@ -249,6 +283,8 @@ func (config *ServiceConfig) IsLogsEnabled(provider CloudProviderType) bool {
 	switch provider {
 	case CloudProviderTypeAWS:
 		return config.AWS.Logs != nil && config.AWS.Logs.Enabled
+	case CloudProviderTypeAzure:
+		return config.Azure.Logs != nil && config.Azure.Logs.Enabled
 	default:
 		return false
 	}
@@ -331,4 +367,3 @@ func GetDashboardsFromAssets(
 
 	return dashboards
 }
-

pkg/types/cloudintegrationtypes/serviceid.go

@@ -23,6 +23,10 @@ var (
 	AWSServiceS3Sync      = ServiceID{valuer.NewString("s3sync")}
 	AWSServiceSNS         = ServiceID{valuer.NewString("sns")}
 	AWSServiceSQS         = ServiceID{valuer.NewString("sqs")}
+
+	// Azure services.
+	AzureServiceStorageAccountsBlob = ServiceID{valuer.NewString("storageaccountsblob")}
+	AzureServiceCDNProfile          = ServiceID{valuer.NewString("cdnprofile")}
 )
 
 func (ServiceID) Enum() []any {
@@ -40,6 +44,8 @@ func (ServiceID) Enum() []any {
 		AWSServiceS3Sync,
 		AWSServiceSNS,
 		AWSServiceSQS,
+		AzureServiceStorageAccountsBlob,
+		AzureServiceCDNProfile,
 	}
 }
 
@@ -60,6 +66,10 @@ var SupportedServices = map[CloudProviderType][]ServiceID{
 		AWSServiceSNS,
 		AWSServiceSQS,
 	},
+	CloudProviderTypeAzure: {
+		AzureServiceStorageAccountsBlob,
+		AzureServiceCDNProfile,
+	},
 }
 
 func NewServiceID(provider CloudProviderType, service string) (ServiceID, error) {