refactor: remove unused Azure account configuration interfaces

- Moved AWS-related components to a new directory structure for better organization.
- Updated import paths to reflect the new structure.
- Removed unused components and styles related to the previous integration setup.
- Adjusted constants and integration logic to ensure compatibility with the new structure.

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

@@ -6,6 +6,7 @@ import (
 
 	"github.com/SigNoz/signoz/ee/licensing/httplicensing"
 	"github.com/SigNoz/signoz/ee/query-service/usage"
+	"github.com/SigNoz/signoz/pkg/alertmanager"
 	"github.com/SigNoz/signoz/pkg/global"
 	"github.com/SigNoz/signoz/pkg/http/middleware"
 	baseapp "github.com/SigNoz/signoz/pkg/query-service/app"
@@ -48,6 +49,7 @@ func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz, config signoz.
 		CloudIntegrationsController:   opts.CloudIntegrationsController,
 		LogsParsingPipelineController: opts.LogsParsingPipelineController,
 		FluxInterval:                  opts.FluxInterval,
+		AlertmanagerAPI:               alertmanager.NewAPI(signoz.Alertmanager),
 		LicensingAPI:                  httplicensing.NewLicensingAPI(signoz.Licensing),
 		Signoz:                        signoz,
 		QueryParserAPI:                queryparser.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.QueryParser),

frontend/.eslintignore

@@ -1,7 +1,5 @@
 node_modules
 build
-eslint-rules/
-stylelint-rules/
 *.typegen.ts
 i18-generate-hash.js
 src/parser/TraceOperatorParser/**

frontend/.eslintrc.cjs

@@ -1,10 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const path = require('path');
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const rulesDirPlugin = require('eslint-plugin-rulesdir');
-// eslint-rules/ always points to frontend/eslint-rules/ regardless of workspace root.
-rulesDirPlugin.RULES_DIR = path.join(__dirname, 'eslint-rules');
-
 /**
  * ESLint Configuration for SigNoz Frontend
  */
@@ -39,7 +32,6 @@ module.exports = {
 		sourceType: 'module',
 	},
 	plugins: [
-		'rulesdir', // Local custom rules
 		'react', // React-specific rules
 		'@typescript-eslint', // TypeScript linting
 		'simple-import-sort', // Auto-sort imports
@@ -64,9 +56,6 @@ module.exports = {
 		},
 	},
 	rules: {
-		// Asset migration — base-path safety
-		'rulesdir/no-unsupported-asset-pattern': 'error',
-
 		// Code quality rules
 		'prefer-const': 'error', // Enforces const for variables never reassigned
 		'no-var': 'error', // Disallows var, enforces let/const

frontend/.stylelintrc.cjs

@@ -1,9 +0,0 @@
-const path = require('path');
-
-module.exports = {
-	plugins: [path.join(__dirname, 'stylelint-rules/no-unsupported-asset-url.js')],
-	customSyntax: 'postcss-scss',
-	rules: {
-		'local/no-unsupported-asset-url': true,
-	},
-};

frontend/eslint-rules/no-unsupported-asset-pattern.js

@@ -1,390 +0,0 @@
-'use strict';
-
-/**
- * ESLint rule: no-unsupported-asset-pattern
- *
- * Enforces that all asset references (SVG, PNG, etc.) go through Vite's module
- * pipeline via ES imports (`import fooUrl from '@/assets/...'`) rather than
- * hard-coded strings or public/ paths.
- *
- * Why this matters: when the app is served from a sub-path (base-path deployment),
- * Vite rewrites ES import URLs automatically. String literals and public/ references
- * bypass that rewrite and break at runtime.
- *
- * Covers four AST patterns:
- *   1. Literal        — plain string: "/Icons/logo.svg"
- *   2. TemplateLiteral — template string: `/Icons/${name}.svg`
- *   3. BinaryExpression — concatenation: "/Icons/" + name + ".svg"
- *   4. ImportDeclaration / ImportExpression — static & dynamic imports
- */
-
-const {
-	hasAssetExtension,
-	containsAssetExtension,
-	extractUrlPath,
-	isAbsolutePath,
-	isPublicRelative,
-	isRelativePublicDir,
-	isValidAssetImport,
-	isExternalUrl,
-} = require('./shared/asset-patterns');
-
-// Known public/ sub-directories that should never appear in dynamic asset paths.
-const PUBLIC_DIR_SEGMENTS = ['/Icons/', '/Images/', '/Logos/', '/svgs/'];
-
-/**
- * Recursively extracts the static string parts from a binary `+` expression or
- * template literal.  Returns `[null]` for any dynamic (non-string) node so
- * callers can detect that the prefix became unknowable.
- *
- * Example: `"/Icons/" + iconName + ".svg"` → ["/Icons/", null, ".svg"]
- */
-function collectBinaryStringParts(node) {
-	if (node.type === 'Literal' && typeof node.value === 'string')
-		return [node.value];
-	if (node.type === 'BinaryExpression' && node.operator === '+') {
-		return [
-			...collectBinaryStringParts(node.left),
-			...collectBinaryStringParts(node.right),
-		];
-	}
-	if (node.type === 'TemplateLiteral') {
-		return node.quasis.map((q) => q.value.raw);
-	}
-	// Unknown / dynamic node — signals "prefix is no longer fully static"
-	return [null];
-}
-
-module.exports = {
-	meta: {
-		type: 'problem',
-		docs: {
-			description:
-				'Disallow Vite-unsafe asset reference patterns that break runtime base-path deployments',
-			category: 'Asset Migration',
-			recommended: true,
-		},
-		schema: [],
-		messages: {
-			absoluteString:
-				'Absolute asset path "{{ value }}" is not base-path-safe. ' +
-				"Use an ES import instead: import fooUrl from '@/assets/...' and reference the variable.",
-			templateLiteral:
-				'Dynamic asset path with absolute prefix is not base-path-safe. ' +
-				"Use new URL('./asset.svg', import.meta.url).href for dynamic asset paths.",
-			absoluteImport:
-				'Asset imported via absolute path is not supported. ' +
-				"Use import fooUrl from '@/assets/...' instead.",
-			publicImport:
-				"Assets in public/ bypass Vite's module pipeline — their URLs are not base-path-aware and will break when the app is served from a sub-path (e.g. /app/). " +
-				"Use an ES import instead: import fooUrl from '@/assets/...' so Vite injects the correct base path.",
-			relativePublicString:
-				'Relative public-dir path "{{ value }}" is not base-path-safe. ' +
-				"Use an ES import instead: import fooUrl from '@/assets/...' and reference the variable.",
-			invalidAssetImport:
-				"Asset '{{ src }}' must be imported from src/assets/ using either '@/assets/...' " +
-				'or a relative path into src/assets/.',
-		},
-	},
-
-	create(context) {
-		return {
-			/**
-			 * Catches plain string literals used as asset paths, e.g.:
-			 *   src="/Icons/logo.svg"   or   url("../public/Images/bg.png")
-			 *
-			 * Import declaration sources are skipped here — handled by ImportDeclaration.
-			 * Also unwraps CSS `url(...)` wrappers before checking.
-			 */
-			Literal(node) {
-				if (node.parent && node.parent.type === 'ImportDeclaration') {
-					return;
-				}
-				const value = node.value;
-				if (typeof value !== 'string') return;
-				if (isExternalUrl(value)) return;
-
-				if (isAbsolutePath(value) && containsAssetExtension(value)) {
-					context.report({
-						node,
-						messageId: 'absoluteString',
-						data: { value },
-					});
-					return;
-				}
-
-				if (isRelativePublicDir(value) && containsAssetExtension(value)) {
-					context.report({
-						node,
-						messageId: 'relativePublicString',
-						data: { value },
-					});
-					return;
-				}
-
-				// Catches relative paths that start with "public/" e.g. 'public/Logos/aws-dark.svg'.
-				// isRelativePublicDir only covers known sub-dirs (Icons/, Logos/, etc.),
-				// so this handles the case where the full "public/" prefix is written explicitly.
-				if (isPublicRelative(value) && containsAssetExtension(value)) {
-					context.report({
-						node,
-						messageId: 'relativePublicString',
-						data: { value },
-					});
-					return;
-				}
-
-				// Also check the path inside a CSS url("...") wrapper
-				const urlPath = extractUrlPath(value);
-				if (urlPath && isExternalUrl(urlPath)) return;
-				if (urlPath && isAbsolutePath(urlPath) && containsAssetExtension(urlPath)) {
-					context.report({
-						node,
-						messageId: 'absoluteString',
-						data: { value: urlPath },
-					});
-					return;
-				}
-				if (
-					urlPath &&
-					isRelativePublicDir(urlPath) &&
-					containsAssetExtension(urlPath)
-				) {
-					context.report({
-						node,
-						messageId: 'relativePublicString',
-						data: { value: urlPath },
-					});
-					return;
-				}
-				if (
-					urlPath &&
-					isPublicRelative(urlPath) &&
-					containsAssetExtension(urlPath)
-				) {
-					context.report({
-						node,
-						messageId: 'relativePublicString',
-						data: { value: urlPath },
-					});
-				}
-			},
-
-			/**
-			 * Catches template literals used as asset paths, e.g.:
-			 *   `/Icons/${name}.svg`
-			 *   `url('/Images/${bg}.png')`
-			 */
-			TemplateLiteral(node) {
-				const quasis = node.quasis;
-				if (!quasis || quasis.length === 0) return;
-
-				const firstQuasi = quasis[0].value.raw;
-				if (isExternalUrl(firstQuasi)) return;
-
-				const hasAssetExt = quasis.some((q) => containsAssetExtension(q.value.raw));
-
-				if (isAbsolutePath(firstQuasi) && hasAssetExt) {
-					context.report({
-						node,
-						messageId: 'templateLiteral',
-					});
-					return;
-				}
-
-				if (isRelativePublicDir(firstQuasi) && hasAssetExt) {
-					context.report({
-						node,
-						messageId: 'relativePublicString',
-						data: { value: firstQuasi },
-					});
-					return;
-				}
-
-				// Expression-first template with known public-dir segment: `${base}/Icons/foo.svg`
-				const hasPublicSegment = quasis.some((q) =>
-					PUBLIC_DIR_SEGMENTS.some((seg) => q.value.raw.includes(seg)),
-				);
-				if (hasPublicSegment && hasAssetExt) {
-					context.report({
-						node,
-						messageId: 'templateLiteral',
-					});
-					return;
-				}
-
-				// No-interpolation template (single quasi): treat like a plain string
-				// and also unwrap any css url(...) wrapper.
-				if (quasis.length === 1) {
-					// Check the raw string first (no url() wrapper)
-					if (isPublicRelative(firstQuasi) && hasAssetExt) {
-						context.report({
-							node,
-							messageId: 'relativePublicString',
-							data: { value: firstQuasi },
-						});
-						return;
-					}
-
-					const urlPath = extractUrlPath(firstQuasi);
-					if (urlPath && isExternalUrl(urlPath)) return;
-					if (urlPath && isAbsolutePath(urlPath) && hasAssetExtension(urlPath)) {
-						context.report({
-							node,
-							messageId: 'templateLiteral',
-						});
-						return;
-					}
-					if (
-						urlPath &&
-						isRelativePublicDir(urlPath) &&
-						hasAssetExtension(urlPath)
-					) {
-						context.report({
-							node,
-							messageId: 'relativePublicString',
-							data: { value: urlPath },
-						});
-						return;
-					}
-					if (urlPath && isPublicRelative(urlPath) && hasAssetExtension(urlPath)) {
-						context.report({
-							node,
-							messageId: 'relativePublicString',
-							data: { value: urlPath },
-						});
-					}
-					return;
-				}
-
-				// CSS url() with an absolute path inside a multi-quasi template, e.g.:
-				//   `url('/Icons/${name}.svg')`
-				if (firstQuasi.includes('url(') && hasAssetExt) {
-					const urlMatch = firstQuasi.match(/^url\(\s*['"]?\//);
-					if (urlMatch) {
-						context.report({
-							node,
-							messageId: 'templateLiteral',
-						});
-					}
-				}
-			},
-
-			/**
-			 * Catches string concatenation used to build asset paths, e.g.:
-			 *   "/Icons/" + name + ".svg"
-			 *
-			 * Collects the leading static parts (before the first dynamic value)
-			 * to determine the path prefix. If any part carries a known asset
-			 * extension, the expression is flagged.
-			 */
-			BinaryExpression(node) {
-				if (node.operator !== '+') return;
-
-				const parts = collectBinaryStringParts(node);
-				// Collect only the leading static parts; stop at the first dynamic (null) part
-				const prefixParts = [];
-				for (const part of parts) {
-					if (part === null) break;
-					prefixParts.push(part);
-				}
-				const staticPrefix = prefixParts.join('');
-
-				if (isExternalUrl(staticPrefix)) return;
-
-				const hasExt = parts.some(
-					(part) => part !== null && containsAssetExtension(part),
-				);
-
-				if (isAbsolutePath(staticPrefix) && hasExt) {
-					context.report({
-						node,
-						messageId: 'templateLiteral',
-					});
-					return;
-				}
-
-				if (isPublicRelative(staticPrefix) && hasExt) {
-					context.report({
-						node,
-						messageId: 'relativePublicString',
-						data: { value: staticPrefix },
-					});
-					return;
-				}
-
-				if (isRelativePublicDir(staticPrefix) && hasExt) {
-					context.report({
-						node,
-						messageId: 'relativePublicString',
-						data: { value: staticPrefix },
-					});
-				}
-			},
-
-			/**
-			 * Catches static asset imports that don't go through src/assets/, e.g.:
-			 *   import logo from '/public/Icons/logo.svg'   ← absolute path
-			 *   import logo from '../../public/logo.svg'    ← relative into public/
-			 *   import logo from '../somewhere/logo.svg'    ← outside src/assets/
-			 *
-			 * Valid pattern: import fooUrl from '@/assets/...' or relative within src/assets/
-			 */
-			ImportDeclaration(node) {
-				const src = node.source.value;
-				if (typeof src !== 'string') return;
-				if (!hasAssetExtension(src)) return;
-
-				if (isAbsolutePath(src)) {
-					context.report({ node, messageId: 'absoluteImport' });
-					return;
-				}
-
-				if (isPublicRelative(src)) {
-					context.report({ node, messageId: 'publicImport' });
-					return;
-				}
-
-				if (!isValidAssetImport(src)) {
-					context.report({
-						node,
-						messageId: 'invalidAssetImport',
-						data: { src },
-					});
-				}
-			},
-
-			/**
-			 * Same checks as ImportDeclaration but for dynamic imports:
-			 *   const logo = await import('/Icons/logo.svg')
-			 *
-			 * Only literal sources are checked; fully dynamic expressions are ignored
-			 * since their paths cannot be statically analysed.
-			 */
-			ImportExpression(node) {
-				const src = node.source;
-				if (!src || src.type !== 'Literal' || typeof src.value !== 'string') return;
-				const value = src.value;
-				if (!hasAssetExtension(value)) return;
-
-				if (isAbsolutePath(value)) {
-					context.report({ node, messageId: 'absoluteImport' });
-					return;
-				}
-
-				if (isPublicRelative(value)) {
-					context.report({ node, messageId: 'publicImport' });
-					return;
-				}
-
-				if (!isValidAssetImport(value)) {
-					context.report({
-						node,
-						messageId: 'invalidAssetImport',
-						data: { src: value },
-					});
-				}
-			},
-		};
-	},
-};

frontend/eslint-rules/package.json

@@ -1,3 +0,0 @@
-{
-  "type": "commonjs"
-}

frontend/eslint-rules/shared/asset-patterns.js

@@ -1,121 +0,0 @@
-'use strict';
-
-const ALLOWED_ASSET_EXTENSIONS = [
-	'.svg',
-	'.png',
-	'.webp',
-	'.jpg',
-	'.jpeg',
-	'.gif',
-];
-
-/**
- * Returns true if the string ends with an asset extension.
- * e.g. "/Icons/foo.svg" → true, "/Icons/foo.svg.bak" → false
- */
-function hasAssetExtension(str) {
-	if (typeof str !== 'string') return false;
-	return ALLOWED_ASSET_EXTENSIONS.some((ext) => str.endsWith(ext));
-}
-
-// Like hasAssetExtension but also matches mid-string with boundary check,
-// e.g. "/foo.svg?v=1" → true, "/icons.svg-dir/" → true (- is non-alphanumeric boundary)
-function containsAssetExtension(str) {
-	if (typeof str !== 'string') return false;
-	return ALLOWED_ASSET_EXTENSIONS.some((ext) => {
-		const idx = str.indexOf(ext);
-		if (idx === -1) return false;
-		const afterIdx = idx + ext.length;
-		// Broad boundary (any non-alphanumeric) is intentional — the real guard against
-		// false positives is the upstream conditions (isAbsolutePath, isRelativePublicDir, etc.)
-		// that must pass before this is reached. "/icons.svg-dir/" → true (- is a boundary).
-		return afterIdx >= str.length || /[^a-zA-Z0-9]/.test(str[afterIdx]);
-	});
-}
-
-/**
- * Extracts the asset path from a CSS url() wrapper.
- * Handles single quotes, double quotes, unquoted, and whitespace variations.
- * e.g.
- *   "url('/Icons/foo.svg')" → "/Icons/foo.svg"
- *   "url( '../assets/bg.png' )" → "../assets/bg.png"
- *   "url(/Icons/foo.svg)" → "/Icons/foo.svg"
- * Returns null if the string is not a url() wrapper.
- */
-function extractUrlPath(str) {
-	if (typeof str !== 'string') return null;
-	// Match url( [whitespace] [quote?] path [quote?] [whitespace] )
-	// Capture group: [^'")\s]+ matches path until quote, closing paren, or whitespace
-	const match = str.match(/^url\(\s*['"]?([^'")\s]+)['"]?\s*\)$/);
-	return match ? match[1] : null;
-}
-
-/**
- * Returns true if the string is an absolute path (starts with /).
- * Absolute paths in url() bypass <base href> and fail under any URL prefix.
- */
-function isAbsolutePath(str) {
-	if (typeof str !== 'string') return false;
-	return str.startsWith('/') && !str.startsWith('//');
-}
-
-/**
- * Returns true if the path imports from the public/ directory.
- * Relative imports into public/ cause asset duplication in dist/.
- */
-function isPublicRelative(str) {
-	if (typeof str !== 'string') return false;
-	return str.includes('/public/') || str.startsWith('public/');
-}
-
-/**
- * Returns true if the string is a relative reference into a known public-dir folder.
- * e.g. "Icons/foo.svg", `Logos/aws-dark.svg`, "Images/bg.png"
- * These bypass Vite's module pipeline even without a leading slash.
- */
-const PUBLIC_DIR_SEGMENTS = ['Icons/', 'Images/', 'Logos/', 'svgs/'];
-
-function isRelativePublicDir(str) {
-	if (typeof str !== 'string') return false;
-	return PUBLIC_DIR_SEGMENTS.some((seg) => str.startsWith(seg));
-}
-
-/**
- * Returns true if an asset import path is valid (goes through Vite's module pipeline).
- * Valid: @/assets/..., any relative path containing /assets/, or node_modules packages.
- * Invalid: absolute paths, public/ dir, or relative paths outside src/assets/.
- */
-function isValidAssetImport(str) {
-	if (typeof str !== 'string') return false;
-	if (str.startsWith('@/assets/')) return true;
-	if (str.includes('/assets/')) return true;
-	// Not starting with . or / means it's a node_modules package — always valid
-	if (!str.startsWith('.') && !str.startsWith('/')) return true;
-	return false;
-}
-
-/**
- * Returns true if the string is an external URL.
- * Used to avoid false positives on CDN/API URLs with asset extensions.
- */
-function isExternalUrl(str) {
-	if (typeof str !== 'string') return false;
-	return (
-		str.startsWith('http://') ||
-		str.startsWith('https://') ||
-		str.startsWith('//')
-	);
-}
-
-module.exports = {
-	ALLOWED_ASSET_EXTENSIONS,
-	PUBLIC_DIR_SEGMENTS,
-	hasAssetExtension,
-	containsAssetExtension,
-	extractUrlPath,
-	isAbsolutePath,
-	isPublicRelative,
-	isRelativePublicDir,
-	isValidAssetImport,
-	isExternalUrl,
-};

frontend/package.json

@@ -10,10 +10,9 @@
     "preview": "vite preview",
     "prettify": "prettier --write .",
     "fmt": "prettier --check .",
-    "lint": "eslint ./src && stylelint \"src/**/*.scss\"",
+    "lint": "eslint ./src",
     "lint:generated": "eslint ./src/api/generated --fix",
     "lint:fix": "eslint ./src --fix",
-    "lint:styles": "stylelint \"src/**/*.scss\"",
     "jest": "jest",
     "jest:coverage": "jest --coverage",
     "jest:watch": "jest --watch",
@@ -66,6 +65,7 @@
     "@signozhq/sonner": "0.1.0",
     "@signozhq/switch": "0.0.2",
     "@signozhq/table": "0.3.7",
+    "@signozhq/tabs": "0.0.11",
     "@signozhq/toggle-group": "0.0.1",
     "@signozhq/tooltip": "0.0.2",
     "@signozhq/ui": "0.0.5",
@@ -230,7 +230,6 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-plugin-rulesdir": "0.2.2",
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "eslint-plugin-sonarjs": "^0.12.0",
     "husky": "^7.0.4",
@@ -246,7 +245,6 @@
     "orval": "7.18.0",
     "portfinder-sync": "^0.0.2",
     "postcss": "8.5.6",
-    "postcss-scss": "4.0.9",
     "prettier": "2.2.1",
     "prop-types": "15.8.1",
     "react-hooks-testing-library": "0.6.0",
@@ -254,8 +252,6 @@
     "redux-mock-store": "1.5.4",
     "sass": "1.97.3",
     "sharp": "0.34.5",
-    "stylelint": "17.7.0",
-    "stylelint-scss": "7.0.0",
     "svgo": "4.0.0",
     "ts-api-utils": "2.4.0",
     "ts-jest": "29.4.6",

frontend/public/svgs/dotted-double-line.svg

@@ -0,0 +1,312 @@
+<svg width="929" height="8" viewBox="0 0 929 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="2" height="2" rx="1" fill="#242834"/>
+<rect x="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="12" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="18" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="24" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="30" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="36" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="42" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="48" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="54" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="60" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="66" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="72" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="78" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="84" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="90" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="96" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="102" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="108" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="114" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="120" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="126" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="132" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="138" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="144" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="150" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="156" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="162" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="168" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="174" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="180" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="186" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="192" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="198" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="204" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="210" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="216" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="222" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="228" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="234" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="240" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="246" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="252" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="258" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="264" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="270" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="276" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="282" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="288" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="294" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="300" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="306" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="312" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="318" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="324" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="330" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="336" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="342" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="348" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="354" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="360" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="366" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="372" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="378" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="384" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="390" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="396" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="402" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="408" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="414" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="420" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="426" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="432" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="438" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="444" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="450" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="456" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="462" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="468" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="474" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="480" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="486" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="492" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="498" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="504" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="510" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="516" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="522" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="528" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="534" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="540" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="546" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="552" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="558" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="564" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="570" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="576" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="582" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="588" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="594" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="600" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="606" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="612" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="618" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="624" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="630" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="636" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="642" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="648" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="654" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="660" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="666" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="672" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="678" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="684" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="690" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="696" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="702" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="708" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="714" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="720" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="726" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="732" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="738" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="744" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="750" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="756" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="762" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="768" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="774" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="780" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="786" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="792" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="798" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="804" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="810" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="816" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="822" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="828" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="834" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="840" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="846" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="852" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="858" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="864" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="870" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="876" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="882" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="888" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="894" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="900" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="906" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="912" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="918" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="924" width="2" height="2" rx="1" fill="#242834"/>
+<rect y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="6" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="12" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="18" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="24" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="30" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="36" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="42" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="48" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="54" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="60" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="66" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="72" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="78" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="84" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="90" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="96" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="102" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="108" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="114" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="120" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="126" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="132" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="138" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="144" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="150" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="156" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="162" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="168" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="174" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="180" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="186" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="192" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="198" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="204" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="210" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="216" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="222" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="228" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="234" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="240" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="246" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="252" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="258" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="264" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="270" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="276" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="282" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="288" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="294" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="300" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="306" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="312" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="318" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="324" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="330" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="336" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="342" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="348" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="354" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="360" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="366" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="372" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="378" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="384" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="390" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="396" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="402" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="408" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="414" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="420" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="426" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="432" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="438" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="444" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="450" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="456" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="462" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="468" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="474" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="480" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="486" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="492" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="498" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="504" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="510" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="516" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="522" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="528" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="534" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="540" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="546" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="552" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="558" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="564" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="570" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="576" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="582" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="588" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="594" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="600" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="606" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="612" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="618" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="624" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="630" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="636" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="642" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="648" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="654" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="660" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="666" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="672" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="678" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="684" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="690" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="696" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="702" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="708" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="714" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="720" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="726" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="732" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="738" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="744" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="750" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="756" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="762" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="768" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="774" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="780" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="786" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="792" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="798" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="804" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="810" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="816" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="822" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="828" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="834" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="840" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="846" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="852" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="858" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="864" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="870" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="876" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="882" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="888" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="894" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="900" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="906" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="912" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="918" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="924" y="6" width="2" height="2" rx="1" fill="#242834"/>
+</svg>

frontend/src/AppRoutes/pageComponents.ts

@@ -244,12 +244,18 @@ export const ShortcutsPage = Loadable(
 	() => import(/* webpackChunkName: "ShortcutsPage" */ 'pages/Settings'),
 );
 
-export const InstalledIntegrations = Loadable(
+export const Integrations = Loadable(
 	() =>
 		import(
 			/* webpackChunkName: "InstalledIntegrations" */ 'pages/IntegrationsModulePage'
 		),
 );
+export const IntegrationsDetailsPage = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "IntegrationsDetailsPage" */ 'pages/IntegrationsDetailsPage'
+		),
+);
 
 export const MessagingQueuesMainPage = Loadable(
 	() =>

frontend/src/AppRoutes/routes.ts

@@ -18,7 +18,8 @@ import {
 	ForgotPassword,
 	Home,
 	InfrastructureMonitoring,
-	InstalledIntegrations,
+	Integrations,
+	IntegrationsDetailsPage,
 	LicensePage,
 	ListAllALertsPage,
 	LiveLogs,
@@ -389,10 +390,17 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 		key: 'WORKSPACE_ACCESS_RESTRICTED',
 	},
+	{
+		path: ROUTES.INTEGRATIONS_DETAIL,
+		exact: true,
+		component: IntegrationsDetailsPage,
+		isPrivate: true,
+		key: 'INTEGRATIONS_DETAIL',
+	},
 	{
 		path: ROUTES.INTEGRATIONS,
 		exact: true,
-		component: InstalledIntegrations,
+		component: Integrations,
 		isPrivate: true,
 		key: 'INTEGRATIONS',
 	},

frontend/src/api/Integrations/removeAwsIntegrationAccount.ts

@@ -1,19 +0,0 @@
-import axios from 'api';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-
-const removeAwsIntegrationAccount = async (
-	accountId: string,
-): Promise<SuccessResponse<Record<string, never>> | ErrorResponse> => {
-	const response = await axios.post(
-		`/cloud-integrations/aws/accounts/${accountId}/disconnect`,
-	);
-
-	return {
-		statusCode: 200,
-		error: null,
-		message: response.data.status,
-		payload: response.data.data,
-	};
-};
-
-export default removeAwsIntegrationAccount;

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

@@ -1,97 +0,0 @@
-/**
- * ! Do not edit manually
- * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
- * SigNoz
- */
-import type {
-	InvalidateOptions,
-	QueryClient,
-	QueryFunction,
-	QueryKey,
-	UseQueryOptions,
-	UseQueryResult,
-} from 'react-query';
-import { useQuery } from 'react-query';
-
-import type { ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
-import type { GetAlerts200, RenderErrorResponseDTO } from '../sigNoz.schemas';
-
-/**
- * This endpoint returns alerts for the organization
- * @summary Get alerts
- */
-export const getAlerts = (signal?: AbortSignal) => {
-	return GeneratedAPIInstance<GetAlerts200>({
-		url: `/api/v1/alerts`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetAlertsQueryKey = () => {
-	return [`/api/v1/alerts`] as const;
-};
-
-export const getGetAlertsQueryOptions = <
-	TData = Awaited<ReturnType<typeof getAlerts>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(options?: {
-	query?: UseQueryOptions<Awaited<ReturnType<typeof getAlerts>>, TError, TData>;
-}) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getGetAlertsQueryKey();
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof getAlerts>>> = ({
-		signal,
-	}) => getAlerts(signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof getAlerts>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetAlertsQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getAlerts>>
->;
-export type GetAlertsQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get alerts
- */
-
-export function useGetAlerts<
-	TData = Awaited<ReturnType<typeof getAlerts>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(options?: {
-	query?: UseQueryOptions<Awaited<ReturnType<typeof getAlerts>>, TError, TData>;
-}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetAlertsQueryOptions(options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary Get alerts
- */
-export const invalidateGetAlerts = async (
-	queryClient: QueryClient,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetAlertsQueryKey() },
-		options,
-	);
-
-	return queryClient;
-};

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

@@ -1,646 +0,0 @@
-/**
- * ! Do not edit manually
- * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
- * SigNoz
- */
-import type {
-	InvalidateOptions,
-	MutationFunction,
-	QueryClient,
-	QueryFunction,
-	QueryKey,
-	UseMutationOptions,
-	UseMutationResult,
-	UseQueryOptions,
-	UseQueryResult,
-} from 'react-query';
-import { useMutation, useQuery } from 'react-query';
-
-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
-import type {
-	ConfigReceiverDTO,
-	CreateChannel201,
-	DeleteChannelByIDPathParameters,
-	GetChannelByID200,
-	GetChannelByIDPathParameters,
-	ListChannels200,
-	RenderErrorResponseDTO,
-	UpdateChannelByIDPathParameters,
-} from '../sigNoz.schemas';
-
-/**
- * This endpoint lists all notification channels for the organization
- * @summary List notification channels
- */
-export const listChannels = (signal?: AbortSignal) => {
-	return GeneratedAPIInstance<ListChannels200>({
-		url: `/api/v1/channels`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getListChannelsQueryKey = () => {
-	return [`/api/v1/channels`] as const;
-};
-
-export const getListChannelsQueryOptions = <
-	TData = Awaited<ReturnType<typeof listChannels>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof listChannels>>,
-		TError,
-		TData
-	>;
-}) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getListChannelsQueryKey();
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof listChannels>>> = ({
-		signal,
-	}) => listChannels(signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof listChannels>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type ListChannelsQueryResult = NonNullable<
-	Awaited<ReturnType<typeof listChannels>>
->;
-export type ListChannelsQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary List notification channels
- */
-
-export function useListChannels<
-	TData = Awaited<ReturnType<typeof listChannels>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof listChannels>>,
-		TError,
-		TData
-	>;
-}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getListChannelsQueryOptions(options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary List notification channels
- */
-export const invalidateListChannels = async (
-	queryClient: QueryClient,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getListChannelsQueryKey() },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * This endpoint creates a notification channel
- * @summary Create notification channel
- */
-export const createChannel = (
-	configReceiverDTO: BodyType<ConfigReceiverDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<CreateChannel201>({
-		url: `/api/v1/channels`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: configReceiverDTO,
-		signal,
-	});
-};
-
-export const getCreateChannelMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createChannel>>,
-		TError,
-		{ data: BodyType<ConfigReceiverDTO> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof createChannel>>,
-	TError,
-	{ data: BodyType<ConfigReceiverDTO> },
-	TContext
-> => {
-	const mutationKey = ['createChannel'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof createChannel>>,
-		{ data: BodyType<ConfigReceiverDTO> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return createChannel(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type CreateChannelMutationResult = NonNullable<
-	Awaited<ReturnType<typeof createChannel>>
->;
-export type CreateChannelMutationBody = BodyType<ConfigReceiverDTO>;
-export type CreateChannelMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Create notification channel
- */
-export const useCreateChannel = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createChannel>>,
-		TError,
-		{ data: BodyType<ConfigReceiverDTO> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof createChannel>>,
-	TError,
-	{ data: BodyType<ConfigReceiverDTO> },
-	TContext
-> => {
-	const mutationOptions = getCreateChannelMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
-/**
- * This endpoint deletes a notification channel by ID
- * @summary Delete notification channel
- */
-export const deleteChannelByID = ({ id }: DeleteChannelByIDPathParameters) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v1/channels/${id}`,
-		method: 'DELETE',
-	});
-};
-
-export const getDeleteChannelByIDMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteChannelByID>>,
-		TError,
-		{ pathParams: DeleteChannelByIDPathParameters },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof deleteChannelByID>>,
-	TError,
-	{ pathParams: DeleteChannelByIDPathParameters },
-	TContext
-> => {
-	const mutationKey = ['deleteChannelByID'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof deleteChannelByID>>,
-		{ pathParams: DeleteChannelByIDPathParameters }
-	> = (props) => {
-		const { pathParams } = props ?? {};
-
-		return deleteChannelByID(pathParams);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type DeleteChannelByIDMutationResult = NonNullable<
-	Awaited<ReturnType<typeof deleteChannelByID>>
->;
-
-export type DeleteChannelByIDMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Delete notification channel
- */
-export const useDeleteChannelByID = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteChannelByID>>,
-		TError,
-		{ pathParams: DeleteChannelByIDPathParameters },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof deleteChannelByID>>,
-	TError,
-	{ pathParams: DeleteChannelByIDPathParameters },
-	TContext
-> => {
-	const mutationOptions = getDeleteChannelByIDMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
-/**
- * This endpoint returns a notification channel by ID
- * @summary Get notification channel by ID
- */
-export const getChannelByID = (
-	{ id }: GetChannelByIDPathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetChannelByID200>({
-		url: `/api/v1/channels/${id}`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetChannelByIDQueryKey = ({
-	id,
-}: GetChannelByIDPathParameters) => {
-	return [`/api/v1/channels/${id}`] as const;
-};
-
-export const getGetChannelByIDQueryOptions = <
-	TData = Awaited<ReturnType<typeof getChannelByID>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(
-	{ id }: GetChannelByIDPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getChannelByID>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getGetChannelByIDQueryKey({ id });
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof getChannelByID>>> = ({
-		signal,
-	}) => getChannelByID({ id }, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!id,
-		...queryOptions,
-	} as UseQueryOptions<
-		Awaited<ReturnType<typeof getChannelByID>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetChannelByIDQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getChannelByID>>
->;
-export type GetChannelByIDQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get notification channel by ID
- */
-
-export function useGetChannelByID<
-	TData = Awaited<ReturnType<typeof getChannelByID>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(
-	{ id }: GetChannelByIDPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getChannelByID>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetChannelByIDQueryOptions({ id }, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary Get notification channel by ID
- */
-export const invalidateGetChannelByID = async (
-	queryClient: QueryClient,
-	{ id }: GetChannelByIDPathParameters,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetChannelByIDQueryKey({ id }) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * This endpoint updates a notification channel by ID
- * @summary Update notification channel
- */
-export const updateChannelByID = (
-	{ id }: UpdateChannelByIDPathParameters,
-	configReceiverDTO: BodyType<ConfigReceiverDTO>,
-) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v1/channels/${id}`,
-		method: 'PUT',
-		headers: { 'Content-Type': 'application/json' },
-		data: configReceiverDTO,
-	});
-};
-
-export const getUpdateChannelByIDMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateChannelByID>>,
-		TError,
-		{
-			pathParams: UpdateChannelByIDPathParameters;
-			data: BodyType<ConfigReceiverDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof updateChannelByID>>,
-	TError,
-	{
-		pathParams: UpdateChannelByIDPathParameters;
-		data: BodyType<ConfigReceiverDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['updateChannelByID'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof updateChannelByID>>,
-		{
-			pathParams: UpdateChannelByIDPathParameters;
-			data: BodyType<ConfigReceiverDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return updateChannelByID(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type UpdateChannelByIDMutationResult = NonNullable<
-	Awaited<ReturnType<typeof updateChannelByID>>
->;
-export type UpdateChannelByIDMutationBody = BodyType<ConfigReceiverDTO>;
-export type UpdateChannelByIDMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Update notification channel
- */
-export const useUpdateChannelByID = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateChannelByID>>,
-		TError,
-		{
-			pathParams: UpdateChannelByIDPathParameters;
-			data: BodyType<ConfigReceiverDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof updateChannelByID>>,
-	TError,
-	{
-		pathParams: UpdateChannelByIDPathParameters;
-		data: BodyType<ConfigReceiverDTO>;
-	},
-	TContext
-> => {
-	const mutationOptions = getUpdateChannelByIDMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
-/**
- * This endpoint tests a notification channel by sending a test notification
- * @summary Test notification channel
- */
-export const testChannel = (
-	configReceiverDTO: BodyType<ConfigReceiverDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v1/channels/test`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: configReceiverDTO,
-		signal,
-	});
-};
-
-export const getTestChannelMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof testChannel>>,
-		TError,
-		{ data: BodyType<ConfigReceiverDTO> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof testChannel>>,
-	TError,
-	{ data: BodyType<ConfigReceiverDTO> },
-	TContext
-> => {
-	const mutationKey = ['testChannel'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof testChannel>>,
-		{ data: BodyType<ConfigReceiverDTO> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return testChannel(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type TestChannelMutationResult = NonNullable<
-	Awaited<ReturnType<typeof testChannel>>
->;
-export type TestChannelMutationBody = BodyType<ConfigReceiverDTO>;
-export type TestChannelMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Test notification channel
- */
-export const useTestChannel = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof testChannel>>,
-		TError,
-		{ data: BodyType<ConfigReceiverDTO> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof testChannel>>,
-	TError,
-	{ data: BodyType<ConfigReceiverDTO> },
-	TContext
-> => {
-	const mutationOptions = getTestChannelMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
-/**
- * Deprecated: use /api/v1/channels/test instead
- * @deprecated
- * @summary Test notification channel (deprecated)
- */
-export const testChannelDeprecated = (
-	configReceiverDTO: BodyType<ConfigReceiverDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v1/testChannel`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: configReceiverDTO,
-		signal,
-	});
-};
-
-export const getTestChannelDeprecatedMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof testChannelDeprecated>>,
-		TError,
-		{ data: BodyType<ConfigReceiverDTO> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof testChannelDeprecated>>,
-	TError,
-	{ data: BodyType<ConfigReceiverDTO> },
-	TContext
-> => {
-	const mutationKey = ['testChannelDeprecated'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof testChannelDeprecated>>,
-		{ data: BodyType<ConfigReceiverDTO> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return testChannelDeprecated(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type TestChannelDeprecatedMutationResult = NonNullable<
-	Awaited<ReturnType<typeof testChannelDeprecated>>
->;
-export type TestChannelDeprecatedMutationBody = BodyType<ConfigReceiverDTO>;
-export type TestChannelDeprecatedMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @deprecated
- * @summary Test notification channel (deprecated)
- */
-export const useTestChannelDeprecated = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof testChannelDeprecated>>,
-		TError,
-		{ data: BodyType<ConfigReceiverDTO> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof testChannelDeprecated>>,
-	TError,
-	{ data: BodyType<ConfigReceiverDTO> },
-	TContext
-> => {
-	const mutationOptions = getTestChannelDeprecatedMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};

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

@@ -1,482 +0,0 @@
-/**
- * ! Do not edit manually
- * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
- * SigNoz
- */
-import type {
-	InvalidateOptions,
-	MutationFunction,
-	QueryClient,
-	QueryFunction,
-	QueryKey,
-	UseMutationOptions,
-	UseMutationResult,
-	UseQueryOptions,
-	UseQueryResult,
-} from 'react-query';
-import { useMutation, useQuery } from 'react-query';
-
-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
-import type {
-	AlertmanagertypesPostableRoutePolicyDTO,
-	CreateRoutePolicy201,
-	DeleteRoutePolicyByIDPathParameters,
-	GetAllRoutePolicies200,
-	GetRoutePolicyByID200,
-	GetRoutePolicyByIDPathParameters,
-	RenderErrorResponseDTO,
-	UpdateRoutePolicy200,
-	UpdateRoutePolicyPathParameters,
-} from '../sigNoz.schemas';
-
-/**
- * This endpoint lists all route policies for the organization
- * @summary List route policies
- */
-export const getAllRoutePolicies = (signal?: AbortSignal) => {
-	return GeneratedAPIInstance<GetAllRoutePolicies200>({
-		url: `/api/v1/route_policies`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetAllRoutePoliciesQueryKey = () => {
-	return [`/api/v1/route_policies`] as const;
-};
-
-export const getGetAllRoutePoliciesQueryOptions = <
-	TData = Awaited<ReturnType<typeof getAllRoutePolicies>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof getAllRoutePolicies>>,
-		TError,
-		TData
-	>;
-}) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getGetAllRoutePoliciesQueryKey();
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof getAllRoutePolicies>>
-	> = ({ signal }) => getAllRoutePolicies(signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof getAllRoutePolicies>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetAllRoutePoliciesQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getAllRoutePolicies>>
->;
-export type GetAllRoutePoliciesQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary List route policies
- */
-
-export function useGetAllRoutePolicies<
-	TData = Awaited<ReturnType<typeof getAllRoutePolicies>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof getAllRoutePolicies>>,
-		TError,
-		TData
-	>;
-}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetAllRoutePoliciesQueryOptions(options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary List route policies
- */
-export const invalidateGetAllRoutePolicies = async (
-	queryClient: QueryClient,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetAllRoutePoliciesQueryKey() },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * This endpoint creates a route policy
- * @summary Create route policy
- */
-export const createRoutePolicy = (
-	alertmanagertypesPostableRoutePolicyDTO: BodyType<AlertmanagertypesPostableRoutePolicyDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<CreateRoutePolicy201>({
-		url: `/api/v1/route_policies`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: alertmanagertypesPostableRoutePolicyDTO,
-		signal,
-	});
-};
-
-export const getCreateRoutePolicyMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createRoutePolicy>>,
-		TError,
-		{ data: BodyType<AlertmanagertypesPostableRoutePolicyDTO> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof createRoutePolicy>>,
-	TError,
-	{ data: BodyType<AlertmanagertypesPostableRoutePolicyDTO> },
-	TContext
-> => {
-	const mutationKey = ['createRoutePolicy'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof createRoutePolicy>>,
-		{ data: BodyType<AlertmanagertypesPostableRoutePolicyDTO> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return createRoutePolicy(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type CreateRoutePolicyMutationResult = NonNullable<
-	Awaited<ReturnType<typeof createRoutePolicy>>
->;
-export type CreateRoutePolicyMutationBody = BodyType<AlertmanagertypesPostableRoutePolicyDTO>;
-export type CreateRoutePolicyMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Create route policy
- */
-export const useCreateRoutePolicy = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createRoutePolicy>>,
-		TError,
-		{ data: BodyType<AlertmanagertypesPostableRoutePolicyDTO> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof createRoutePolicy>>,
-	TError,
-	{ data: BodyType<AlertmanagertypesPostableRoutePolicyDTO> },
-	TContext
-> => {
-	const mutationOptions = getCreateRoutePolicyMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
-/**
- * This endpoint deletes a route policy by ID
- * @summary Delete route policy
- */
-export const deleteRoutePolicyByID = ({
-	id,
-}: DeleteRoutePolicyByIDPathParameters) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v1/route_policies/${id}`,
-		method: 'DELETE',
-	});
-};
-
-export const getDeleteRoutePolicyByIDMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteRoutePolicyByID>>,
-		TError,
-		{ pathParams: DeleteRoutePolicyByIDPathParameters },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof deleteRoutePolicyByID>>,
-	TError,
-	{ pathParams: DeleteRoutePolicyByIDPathParameters },
-	TContext
-> => {
-	const mutationKey = ['deleteRoutePolicyByID'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof deleteRoutePolicyByID>>,
-		{ pathParams: DeleteRoutePolicyByIDPathParameters }
-	> = (props) => {
-		const { pathParams } = props ?? {};
-
-		return deleteRoutePolicyByID(pathParams);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type DeleteRoutePolicyByIDMutationResult = NonNullable<
-	Awaited<ReturnType<typeof deleteRoutePolicyByID>>
->;
-
-export type DeleteRoutePolicyByIDMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Delete route policy
- */
-export const useDeleteRoutePolicyByID = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteRoutePolicyByID>>,
-		TError,
-		{ pathParams: DeleteRoutePolicyByIDPathParameters },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof deleteRoutePolicyByID>>,
-	TError,
-	{ pathParams: DeleteRoutePolicyByIDPathParameters },
-	TContext
-> => {
-	const mutationOptions = getDeleteRoutePolicyByIDMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
-/**
- * This endpoint returns a route policy by ID
- * @summary Get route policy by ID
- */
-export const getRoutePolicyByID = (
-	{ id }: GetRoutePolicyByIDPathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetRoutePolicyByID200>({
-		url: `/api/v1/route_policies/${id}`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetRoutePolicyByIDQueryKey = ({
-	id,
-}: GetRoutePolicyByIDPathParameters) => {
-	return [`/api/v1/route_policies/${id}`] as const;
-};
-
-export const getGetRoutePolicyByIDQueryOptions = <
-	TData = Awaited<ReturnType<typeof getRoutePolicyByID>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(
-	{ id }: GetRoutePolicyByIDPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getRoutePolicyByID>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ?? getGetRoutePolicyByIDQueryKey({ id });
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof getRoutePolicyByID>>
-	> = ({ signal }) => getRoutePolicyByID({ id }, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!id,
-		...queryOptions,
-	} as UseQueryOptions<
-		Awaited<ReturnType<typeof getRoutePolicyByID>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetRoutePolicyByIDQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getRoutePolicyByID>>
->;
-export type GetRoutePolicyByIDQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get route policy by ID
- */
-
-export function useGetRoutePolicyByID<
-	TData = Awaited<ReturnType<typeof getRoutePolicyByID>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(
-	{ id }: GetRoutePolicyByIDPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getRoutePolicyByID>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetRoutePolicyByIDQueryOptions({ id }, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary Get route policy by ID
- */
-export const invalidateGetRoutePolicyByID = async (
-	queryClient: QueryClient,
-	{ id }: GetRoutePolicyByIDPathParameters,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetRoutePolicyByIDQueryKey({ id }) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * This endpoint updates a route policy by ID
- * @summary Update route policy
- */
-export const updateRoutePolicy = (
-	{ id }: UpdateRoutePolicyPathParameters,
-	alertmanagertypesPostableRoutePolicyDTO: BodyType<AlertmanagertypesPostableRoutePolicyDTO>,
-) => {
-	return GeneratedAPIInstance<UpdateRoutePolicy200>({
-		url: `/api/v1/route_policies/${id}`,
-		method: 'PUT',
-		headers: { 'Content-Type': 'application/json' },
-		data: alertmanagertypesPostableRoutePolicyDTO,
-	});
-};
-
-export const getUpdateRoutePolicyMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateRoutePolicy>>,
-		TError,
-		{
-			pathParams: UpdateRoutePolicyPathParameters;
-			data: BodyType<AlertmanagertypesPostableRoutePolicyDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof updateRoutePolicy>>,
-	TError,
-	{
-		pathParams: UpdateRoutePolicyPathParameters;
-		data: BodyType<AlertmanagertypesPostableRoutePolicyDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['updateRoutePolicy'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof updateRoutePolicy>>,
-		{
-			pathParams: UpdateRoutePolicyPathParameters;
-			data: BodyType<AlertmanagertypesPostableRoutePolicyDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return updateRoutePolicy(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type UpdateRoutePolicyMutationResult = NonNullable<
-	Awaited<ReturnType<typeof updateRoutePolicy>>
->;
-export type UpdateRoutePolicyMutationBody = BodyType<AlertmanagertypesPostableRoutePolicyDTO>;
-export type UpdateRoutePolicyMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Update route policy
- */
-export const useUpdateRoutePolicy = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateRoutePolicy>>,
-		TError,
-		{
-			pathParams: UpdateRoutePolicyPathParameters;
-			data: BodyType<AlertmanagertypesPostableRoutePolicyDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof updateRoutePolicy>>,
-	TError,
-	{
-		pathParams: UpdateRoutePolicyPathParameters;
-		data: BodyType<AlertmanagertypesPostableRoutePolicyDTO>;
-	},
-	TContext
-> => {
-	const mutationOptions = getUpdateRoutePolicyMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};

frontend/src/api/integration/aws/index.ts

@@ -1,88 +0,0 @@
-import axios from 'api';
-import {
-	CloudAccount,
-	Service,
-	ServiceData,
-	UpdateServiceConfigPayload,
-	UpdateServiceConfigResponse,
-} from 'container/CloudIntegrationPage/ServicesSection/types';
-import {
-	AccountConfigPayload,
-	AccountConfigResponse,
-	ConnectionParams,
-	ConnectionUrlResponse,
-} from 'types/api/integrations/aws';
-
-export const getAwsAccounts = async (): Promise<CloudAccount[]> => {
-	const response = await axios.get('/cloud-integrations/aws/accounts');
-
-	return response.data.data.accounts;
-};
-
-export const getAwsServices = async (
-	cloudAccountId?: string,
-): Promise<Service[]> => {
-	const params = cloudAccountId
-		? { cloud_account_id: cloudAccountId }
-		: undefined;
-	const response = await axios.get('/cloud-integrations/aws/services', {
-		params,
-	});
-
-	return response.data.data.services;
-};
-
-export const getServiceDetails = async (
-	serviceId: string,
-	cloudAccountId?: string,
-): Promise<ServiceData> => {
-	const params = cloudAccountId
-		? { cloud_account_id: cloudAccountId }
-		: undefined;
-	const response = await axios.get(
-		`/cloud-integrations/aws/services/${serviceId}`,
-		{ params },
-	);
-	return response.data.data;
-};
-
-export const generateConnectionUrl = async (params: {
-	agent_config: { region: string };
-	account_config: { regions: string[] };
-	account_id?: string;
-}): Promise<ConnectionUrlResponse> => {
-	const response = await axios.post(
-		'/cloud-integrations/aws/accounts/generate-connection-url',
-		params,
-	);
-	return response.data.data;
-};
-
-export const updateAccountConfig = async (
-	accountId: string,
-	payload: AccountConfigPayload,
-): Promise<AccountConfigResponse> => {
-	const response = await axios.post<AccountConfigResponse>(
-		`/cloud-integrations/aws/accounts/${accountId}/config`,
-		payload,
-	);
-	return response.data;
-};
-
-export const updateServiceConfig = async (
-	serviceId: string,
-	payload: UpdateServiceConfigPayload,
-): Promise<UpdateServiceConfigResponse> => {
-	const response = await axios.post<UpdateServiceConfigResponse>(
-		`/cloud-integrations/aws/services/${serviceId}/config`,
-		payload,
-	);
-	return response.data;
-};
-
-export const getConnectionParams = async (): Promise<ConnectionParams> => {
-	const response = await axios.get(
-		'/cloud-integrations/aws/accounts/generate-connection-params',
-	);
-	return response.data.data;
-};

frontend/src/assets/NotFound.tsx

@@ -1,5 +1,3 @@
-import notFound404Url from '@/assets/Images/notFound404.png';
-
 function NotFound(): JSX.Element {
 	return (
 		<img
@@ -7,7 +5,7 @@ function NotFound(): JSX.Element {
 				maxHeight: 480,
 				maxWidth: 480,
 			}}
-			src={notFound404Url}
+			src="/Images/notFound404.png"
 			alt="not-found"
 		/>
 	);

frontend/src/auto-import-registry.d.ts

@@ -28,6 +28,7 @@ import '@signozhq/resizable';
 import '@signozhq/sonner';
 import '@signozhq/switch';
 import '@signozhq/table';
+import '@signozhq/tabs';
 import '@signozhq/toggle-group';
 import '@signozhq/tooltip';
 import '@signozhq/ui';

frontend/src/components/AppLoading/AppLoading.tsx

@@ -3,8 +3,6 @@ import get from 'api/browser/localstorage/get';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { THEME_MODE } from 'hooks/useDarkMode/constant';
 
-import signozBrandLogoUrl from '@/assets/Logos/signoz-brand-logo.svg';
-
 import './AppLoading.styles.scss';
 
 function AppLoading(): JSX.Element {
@@ -26,7 +24,11 @@ function AppLoading(): JSX.Element {
 			<div className="perilin-bg" />
 			<div className="app-loading-content">
 				<div className="brand">
-					<img src={signozBrandLogoUrl} alt="SigNoz" className="brand-logo" />
+					<img
+						src="/Logos/signoz-brand-logo.svg"
+						alt="SigNoz"
+						className="brand-logo"
+					/>
 
 					<Typography.Title level={2} className="brand-title">
 						SigNoz

frontend/src/components/AppLoading/__tests__/AppLoading.test.tsx

@@ -47,7 +47,7 @@ describe('AppLoading', () => {
 		// Check for brand logo
 		const logo = screen.getByAltText(SIGNOZ_TEXT);
 		expect(logo).toBeInTheDocument();
-		expect(logo).toHaveAttribute('src', 'test-file-stub');
+		expect(logo).toHaveAttribute('src', '/Logos/signoz-brand-logo.svg');
 
 		// Check for brand title
 		const title = screen.getByText(SIGNOZ_TEXT);

frontend/src/components/AuthPageContainer/AuthHeader.tsx

@@ -2,8 +2,6 @@ import { useCallback } from 'react';
 import { Button } from '@signozhq/button';
 import { LifeBuoy } from 'lucide-react';
 
-import signozBrandLogoUrl from '@/assets/Logos/signoz-brand-logo.svg';
-
 import './AuthHeader.styles.scss';
 
 function AuthHeader(): JSX.Element {
@@ -15,7 +13,7 @@ function AuthHeader(): JSX.Element {
 		<header className="auth-header">
 			<div className="auth-header-logo">
 				<img
-					src={signozBrandLogoUrl}
+					src="/Logos/signoz-brand-logo.svg"
 					alt="SigNoz"
 					className="auth-header-logo-icon"
 				/>

frontend/src/components/ChangelogModal/__test__/ChangelogRenderer.test.tsx

@@ -34,7 +34,7 @@ const mockChangelog: ChangelogSchema = {
 				id: 1,
 				documentId: 'doc1',
 				ext: '.webp',
-				url: 'assets/uploads/feature1.webp',
+				url: '/uploads/feature1.webp',
 				mime: 'image/webp',
 				alternativeText: null,
 			},

frontend/src/components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected.styles.scss

@@ -0,0 +1,34 @@
+.cloud-service-data-collected {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+
+	.cloud-service-data-collected-table {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+
+		.cloud-service-data-collected-table-heading {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			gap: 8px;
+
+			color: var(--l2-foreground);
+
+			/* Bifrost (Ancient)/Content/sm */
+			font-family: Inter;
+			font-size: 13px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 20px; /* 142.857% */
+			letter-spacing: -0.07px;
+		}
+
+		.cloud-service-data-collected-table-logs {
+			border-radius: 6px;
+			border: 1px solid var(--l3-background);
+			background: var(--l1-background);
+		}
+	}
+}

frontend/src/components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected.tsx

@@ -1,13 +1,18 @@
 import { Table } from 'antd';
+import {
+	CloudintegrationtypesCollectedLogAttributeDTO,
+	CloudintegrationtypesCollectedMetricDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { BarChart2, ScrollText } from 'lucide-react';
 
-import { ServiceData } from './types';
+import './CloudServiceDataCollected.styles.scss';
 
 function CloudServiceDataCollected({
 	logsData,
 	metricsData,
 }: {
-	logsData: ServiceData['data_collected']['logs'];
-	metricsData: ServiceData['data_collected']['metrics'];
+	logsData: CloudintegrationtypesCollectedLogAttributeDTO[] | null | undefined;
+	metricsData: CloudintegrationtypesCollectedMetricDTO[] | null | undefined;
 }): JSX.Element {
 	const logsColumns = [
 		{
@@ -61,24 +66,30 @@ function CloudServiceDataCollected({
 	return (
 		<div className="cloud-service-data-collected">
 			{logsData && logsData.length > 0 && (
-				<div className="cloud-service-data-collected__table">
-					<div className="cloud-service-data-collected__table-heading">Logs</div>
+				<div className="cloud-service-data-collected-table">
+					<div className="cloud-service-data-collected-table-heading">
+						<ScrollText size={14} />
+						Logs
+					</div>
 					<Table
 						columns={logsColumns}
 						dataSource={logsData}
 						{...tableProps}
-						className="cloud-service-data-collected__table-logs"
+						className="cloud-service-data-collected-table-logs"
 					/>
 				</div>
 			)}
 			{metricsData && metricsData.length > 0 && (
-				<div className="cloud-service-data-collected__table">
-					<div className="cloud-service-data-collected__table-heading">Metrics</div>
+				<div className="cloud-service-data-collected-table">
+					<div className="cloud-service-data-collected-table-heading">
+						<BarChart2 size={14} />
+						Metrics
+					</div>
 					<Table
 						columns={metricsColumns}
 						dataSource={metricsData}
 						{...tableProps}
-						className="cloud-service-data-collected__table-metrics"
+						className="cloud-service-data-collected-table-metrics"
 					/>
 				</div>
 			)}

frontend/src/components/HeaderRightSection/FeedbackModal.tsx

@@ -3,8 +3,8 @@ import { useLocation } from 'react-router-dom';
 import { toast } from '@signozhq/sonner';
 import { Button, Input, Radio, RadioChangeEvent, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
+import { handleContactSupport } from 'container/Integrations/utils';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import { handleContactSupport } from 'pages/Integrations/utils';
 
 function FeedbackModal({ onClose }: { onClose: () => void }): JSX.Element {
 	const [activeTab, setActiveTab] = useState('feedback');

frontend/src/components/HeaderRightSection/__tests__/FeedbackModal.test.tsx

@@ -4,8 +4,8 @@ import { toast } from '@signozhq/sonner';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import logEvent from 'api/common/logEvent';
+import { handleContactSupport } from 'container/Integrations/utils';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import { handleContactSupport } from 'pages/Integrations/utils';
 
 import FeedbackModal from '../FeedbackModal';
 
@@ -30,7 +30,7 @@ jest.mock('hooks/useGetTenantLicense', () => ({
 	useGetTenantLicense: jest.fn(),
 }));
 
-jest.mock('pages/Integrations/utils', () => ({
+jest.mock('container/Integrations/utils', () => ({
 	handleContactSupport: jest.fn(),
 }));
 

frontend/src/components/HostMetricsDetail/Containers/Containers.tsx

@@ -1,9 +1,6 @@
 import { useTranslation } from 'react-i18next';
 import { Space, Typography } from 'antd';
 
-import broomUrl from '@/assets/Icons/broom.svg';
-import infraContainersUrl from '@/assets/Icons/infraContainers.svg';
-
 import WaitlistFragment from '../WaitlistFragment/WaitlistFragment';
 
 import './Containers.styles.scss';
@@ -19,7 +16,7 @@ function Containers(): JSX.Element {
 				<div className="dev-status-container">
 					<div className="infra-container-card">
 						<img
-							src={infraContainersUrl}
+							src="/Icons/infraContainers.svg"
 							alt="infra-container"
 							width={32}
 							height={32}
@@ -32,7 +29,7 @@ function Containers(): JSX.Element {
 
 					<div className="infra-container-working-msg">
 						<Space>
-							<img src={broomUrl} alt="broom" width={24} height={24} />
+							<img src="/Icons/broom.svg" alt="broom" width={24} height={24} />
 							<Text className="infra-container-card-text">{t('working_message')}</Text>
 						</Space>
 					</div>

frontend/src/components/HostMetricsDetail/Processes/Processes.tsx

@@ -1,9 +1,6 @@
 import { useTranslation } from 'react-i18next';
 import { Space, Typography } from 'antd';
 
-import broomUrl from '@/assets/Icons/broom.svg';
-import infraContainersUrl from '@/assets/Icons/infraContainers.svg';
-
 import WaitlistFragment from '../WaitlistFragment/WaitlistFragment';
 
 import './Processes.styles.scss';
@@ -19,7 +16,7 @@ function Processes(): JSX.Element {
 				<div className="dev-status-container">
 					<div className="infra-container-card">
 						<img
-							src={infraContainersUrl}
+							src="/Icons/infraContainers.svg"
 							alt="infra-container"
 							width={32}
 							height={32}
@@ -31,7 +28,7 @@ function Processes(): JSX.Element {
 
 					<div className="infra-container-working-msg">
 						<Space>
-							<img src={broomUrl} alt="broom" width={24} height={24} />
+							<img src="/Icons/broom.svg" alt="broom" width={24} height={24} />
 							<Text className="infra-container-card-text">{t('working_message')}</Text>
 						</Space>
 					</div>

frontend/src/components/NotFound/__snapshots__/NotFound.test.tsx.snap

@@ -101,7 +101,7 @@ exports[`Not Found page test should render Not Found page without errors 1`] = `
   >
     <img
       alt="not-found"
-      src="test-file-stub"
+      src="/Images/notFound404.png"
       style="max-height: 480px; max-width: 480px;"
     />
     <div

frontend/src/components/PanelDataLoading/PanelDataLoading.tsx

@@ -1,14 +1,16 @@
 import { Typography } from 'antd';
 
-import loadingPlaneUrl from '@/assets/Icons/loading-plane.gif';
-
 import './PanelDataLoading.styles.scss';
 
 export function PanelDataLoading(): JSX.Element {
 	return (
 		<div className="loading-panel-data">
 			<div className="loading-panel-data-content">
-				<img className="loading-gif" src={loadingPlaneUrl} alt="wait-icon" />
+				<img
+					className="loading-gif"
+					src="/Icons/loading-plane.gif"
+					alt="wait-icon"
+				/>
 
 				<Typography.Text>Fetching data...</Typography.Text>
 			</div>

frontend/src/components/WelcomeLeftContainer/index.tsx

@@ -2,8 +2,6 @@ import { ReactChild } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Card, Space, Typography } from 'antd';
 
-import signozBrandLogoUrl from '@/assets/Logos/signoz-brand-logo.svg';
-
 import { Container, LeftContainer, Logo } from './styles';
 
 const { Title } = Typography;
@@ -18,7 +16,7 @@ function WelcomeLeftContainer({
 		<Container>
 			<LeftContainer direction="vertical">
 				<Space align="center">
-					<Logo src={signozBrandLogoUrl} alt="logo" />
+					<Logo src="/Logos/signoz-brand-logo.svg" alt="logo" />
 					<Title style={{ fontSize: '46px', margin: 0 }}>SigNoz</Title>
 				</Space>
 				<Typography>{t('monitor_signup')}</Typography>

frontend/src/components/createGuardedRoute/createGuardedRoute.tsx

@@ -7,8 +7,6 @@ import {
 } from 'hooks/useAuthZ/types';
 import { parsePermission } from 'hooks/useAuthZ/utils';
 
-import noDataUrl from '@/assets/Icons/no-data.svg';
-
 import ErrorBoundaryFallback from '../../pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import AppLoading from '../AppLoading/AppLoading';
 import { GuardAuthZ } from '../GuardAuthZ/GuardAuthZ';
@@ -25,7 +23,7 @@ function OnNoPermissionsFallback(response: {
 	return (
 		<div className="guard-authz-error-no-authz">
 			<div className="guard-authz-error-no-authz-content">
-				<img src={noDataUrl} alt="No permission" />
+				<img src="/Icons/no-data.svg" alt="No permission" />
 				<h3>Uh-oh! You don’t have permission to view this page.</h3>
 				<p>
 					You need the following permission to view this page:

frontend/src/constants/routes.ts

@@ -65,6 +65,7 @@ const ROUTES = {
 	WORKSPACE_SUSPENDED: '/workspace-suspended',
 	SHORTCUTS: '/settings/shortcuts',
 	INTEGRATIONS: '/integrations',
+	INTEGRATIONS_DETAIL: '/integrations/:integrationId',
 	MESSAGING_QUEUES_BASE: '/messaging-queues',
 	MESSAGING_QUEUES_KAFKA: '/messaging-queues/kafka',
 	MESSAGING_QUEUES_KAFKA_DETAIL: '/messaging-queues/kafka/detail',

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/TopErrors.tsx

@@ -24,8 +24,6 @@ import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
-import emptyStateUrl from '@/assets/Icons/emptyState.svg';
-
 import EndPointsDropDown from './components/EndPointsDropDown';
 import ErrorState from './components/ErrorState';
 import { SPAN_ATTRIBUTES } from './constants';
@@ -211,7 +209,7 @@ function TopErrors({
 								<div className="no-filtered-endpoints-message-container">
 									<div className="no-filtered-endpoints-message-content">
 										<img
-											src={emptyStateUrl}
+											src="/Icons/emptyState.svg"
 											alt="thinking-emoji"
 											className="empty-state-svg"
 										/>

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/DependentServices.tsx

@@ -10,8 +10,6 @@ import {
 import { UnfoldVertical } from 'lucide-react';
 import { SuccessResponse } from 'types/api';
 
-import emptyStateUrl from '@/assets/Icons/emptyState.svg';
-
 import ErrorState from './ErrorState';
 
 import '../DomainDetails.styles.scss';
@@ -80,7 +78,7 @@ function DependentServices({
 								<div className="no-status-code-data-message-container">
 									<div className="no-status-code-data-message-content">
 										<img
-											src={emptyStateUrl}
+											src="/Icons/emptyState.svg"
 											alt="thinking-emoji"
 											className="empty-state-svg"
 										/>

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/EndPointDetailsZeroState.tsx

@@ -1,8 +1,6 @@
 import { UseQueryResult } from 'react-query';
 import { SuccessResponse } from 'types/api';
 
-import noDataUrl from '@/assets/Icons/no-data.svg';
-
 import EndPointsDropDown from './EndPointsDropDown';
 
 function EndPointDetailsZeroState({
@@ -16,7 +14,7 @@ function EndPointDetailsZeroState({
 		<div className="end-point-details-zero-state-wrapper">
 			<div className="end-point-details-zero-state-content">
 				<img
-					src={noDataUrl}
+					src="/Icons/no-data.svg"
 					alt="no-data"
 					width={32}
 					height={32}

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/ErrorState.tsx

@@ -1,15 +1,13 @@
 import { Button, Typography } from 'antd';
 import { RotateCw } from 'lucide-react';
 
-import awwSnapUrl from '@/assets/Icons/awwSnap.svg';
-
 function ErrorState({ refetch }: { refetch: () => void }): JSX.Element {
 	return (
 		<div className="error-state-container">
 			<div className="error-state-content-wrapper">
 				<div className="error-state-content">
 					<div className="icon">
-						<img src={awwSnapUrl} alt="awwSnap" width={32} height={32} />
+						<img src="/Icons/awwSnap.svg" alt="awwSnap" width={32} height={32} />
 					</div>
 					<div className="error-state-text">
 						<Typography.Text>Uh-oh :/ We ran into an error.</Typography.Text>

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/StatusCodeTable.tsx

@@ -7,8 +7,6 @@ import {
 } from 'container/ApiMonitoring/utils';
 import { SuccessResponse } from 'types/api';
 
-import emptyStateUrl from '@/assets/Icons/emptyState.svg';
-
 import ErrorState from './ErrorState';
 
 function StatusCodeTable({
@@ -54,7 +52,7 @@ function StatusCodeTable({
 							<div className="no-status-code-data-message-container">
 								<div className="no-status-code-data-message-content">
 									<img
-										src={emptyStateUrl}
+										src="/Icons/emptyState.svg"
 										alt="thinking-emoji"
 										className="empty-state-svg"
 									/>

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

@@ -23,8 +23,6 @@ import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import DOCLINKS from 'utils/docLinks';
 
-import emptyStateUrl from '@/assets/Icons/emptyState.svg';
-
 import { ApiMonitoringHardcodedAttributeKeys } from '../../constants';
 import { DEFAULT_PARAMS, useApiMonitoringParams } from '../../queryParams';
 import { columnsConfig, formatDataForTable } from '../../utils';
@@ -134,7 +132,7 @@ function DomainList(): JSX.Element {
 				<div className="no-filtered-domains-message-container">
 					<div className="no-filtered-domains-message-content">
 						<img
-							src={emptyStateUrl}
+							src="/Icons/emptyState.svg"
 							alt="thinking-emoji"
 							className="empty-state-svg"
 						/>

frontend/src/container/CloudIntegrationPage/CloudIntegrationPage.tsx

@@ -1,24 +0,0 @@
-import {
-	IntegrationType,
-	RequestIntegrationBtn,
-} from 'pages/Integrations/RequestIntegrationBtn';
-
-import Header from './Header/Header';
-import HeroSection from './HeroSection/HeroSection';
-import ServicesTabs from './ServicesSection/ServicesTabs';
-
-function CloudIntegrationPage(): JSX.Element {
-	return (
-		<div>
-			<Header />
-			<HeroSection />
-			<RequestIntegrationBtn
-				type={IntegrationType.AWS_SERVICES}
-				message="Can't find the AWS service you're looking for? Request more integrations"
-			/>
-			<ServicesTabs />
-		</div>
-	);
-}
-
-export default CloudIntegrationPage;

frontend/src/container/CloudIntegrationPage/HeroSection/HeroSection.tsx

@@ -1,37 +0,0 @@
-import { useIsDarkMode } from 'hooks/useDarkMode';
-
-import integrationsHeroBgUrl from '@/assets/Images/integrations-hero-bg.png';
-import awsDarkUrl from '@/assets/Logos/aws-dark.svg';
-
-import AccountActions from './components/AccountActions';
-
-import './HeroSection.style.scss';
-
-function HeroSection(): JSX.Element {
-	const isDarkMode = useIsDarkMode();
-	return (
-		<div
-			className="hero-section"
-			style={
-				isDarkMode
-					? {
-							backgroundImage: `url('${integrationsHeroBgUrl}')`,
-					  }
-					: {}
-			}
-		>
-			<div className="hero-section__icon">
-				<img src={awsDarkUrl} alt="aws-logo" />
-			</div>
-			<div className="hero-section__details">
-				<div className="title">Amazon Web Services</div>
-				<div className="description">
-					One-click setup for AWS monitoring with SigNoz
-				</div>
-				<AccountActions />
-			</div>
-		</div>
-	);
-}
-
-export default HeroSection;

frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountSettingsModal.tsx

@@ -1,213 +0,0 @@
-import { Dispatch, SetStateAction, useCallback } from 'react';
-import { useQueryClient } from 'react-query';
-import { Form, Select, Switch } from 'antd';
-import SignozModal from 'components/SignozModal/SignozModal';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import {
-	getRegionPreviewText,
-	useAccountSettingsModal,
-} from 'hooks/integration/aws/useAccountSettingsModal';
-import useUrlQuery from 'hooks/useUrlQuery';
-import history from 'lib/history';
-
-import logEvent from '../../../../api/common/logEvent';
-import { CloudAccount } from '../../ServicesSection/types';
-import { RegionSelector } from './RegionSelector';
-import RemoveIntegrationAccount from './RemoveIntegrationAccount';
-
-import './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,
-		selectedRegions,
-		includeAllRegions,
-		isRegionSelectOpen,
-		isSaveDisabled,
-		setSelectedRegions,
-		setIncludeAllRegions,
-		setIsRegionSelectOpen,
-		handleIncludeAllRegionsChange,
-		handleSubmit,
-		handleClose,
-	} = useAccountSettingsModal({ onClose, account, setActiveAccount });
-
-	const queryClient = useQueryClient();
-	const urlQuery = useUrlQuery();
-
-	const handleRemoveIntegrationAccountSuccess = (): void => {
-		queryClient.invalidateQueries([REACT_QUERY_KEY.AWS_ACCOUNTS]);
-		urlQuery.delete('cloudAccountId');
-		handleClose();
-		history.replace({ search: urlQuery.toString() });
-
-		logEvent('AWS Integration: Account removed', {
-			id: account?.id,
-			cloudAccountId: account?.cloud_account_id,
-		});
-	};
-
-	const handleRegionDeselect = useCallback(
-		(item: string): void => {
-			if (selectedRegions.includes(item)) {
-				setSelectedRegions(selectedRegions.filter((region) => region !== item));
-				if (includeAllRegions) {
-					setIncludeAllRegions(false);
-				}
-			}
-		},
-		[
-			selectedRegions,
-			includeAllRegions,
-			setSelectedRegions,
-			setIncludeAllRegions,
-		],
-	);
-
-	const renderRegionSelector = useCallback(() => {
-		if (isRegionSelectOpen) {
-			return (
-				<RegionSelector
-					selectedRegions={selectedRegions}
-					setSelectedRegions={setSelectedRegions}
-					setIncludeAllRegions={setIncludeAllRegions}
-				/>
-			);
-		}
-
-		return (
-			<>
-				<div className="account-settings-modal__body-regions-switch-switch ">
-					<Switch
-						checked={includeAllRegions}
-						onChange={handleIncludeAllRegionsChange}
-					/>
-					<button
-						className="account-settings-modal__body-regions-switch-switch-label"
-						type="button"
-						onClick={(): void => handleIncludeAllRegionsChange(!includeAllRegions)}
-					>
-						Include all regions
-					</button>
-				</div>
-				<Select
-					suffixIcon={null}
-					placeholder="Select Region(s)"
-					className="cloud-account-setup-form__select account-settings-modal__body-regions-select integrations-select"
-					onClick={(): void => setIsRegionSelectOpen(true)}
-					mode="multiple"
-					maxTagCount={3}
-					value={getRegionPreviewText(selectedRegions)}
-					open={false}
-					onDeselect={handleRegionDeselect}
-				/>
-			</>
-		);
-	}, [
-		isRegionSelectOpen,
-		includeAllRegions,
-		handleIncludeAllRegionsChange,
-		selectedRegions,
-		handleRegionDeselect,
-		setSelectedRegions,
-		setIncludeAllRegions,
-		setIsRegionSelectOpen,
-	]);
-
-	const renderAccountDetails = useCallback(
-		() => (
-			<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">
-						AWS Account:{' '}
-						<span className="account-settings-modal__body-account-info-connected-account-details-account-id-account-id">
-							{account?.id}
-						</span>
-					</div>
-				</div>
-			</div>
-		),
-		[account?.id],
-	);
-
-	const modalTitle = (
-		<div className="account-settings-modal__title">
-			Account settings for{' '}
-			<span className="account-settings-modal__title-account-id">
-				{account?.id}
-			</span>
-		</div>
-	);
-
-	return (
-		<SignozModal
-			open
-			title={modalTitle}
-			onCancel={handleClose}
-			onOk={handleSubmit}
-			okText="Save"
-			okButtonProps={{
-				disabled: isSaveDisabled,
-				className: 'account-settings-modal__footer-save-button',
-				loading: isLoading,
-			}}
-			cancelButtonProps={{
-				className: 'account-settings-modal__footer-close-button',
-			}}
-			width={672}
-			rootClassName="account-settings-modal"
-		>
-			<Form
-				form={form}
-				layout="vertical"
-				initialValues={{
-					selectedRegions,
-					includeAllRegions,
-				}}
-			>
-				<div className="account-settings-modal__body">
-					{renderAccountDetails()}
-
-					<Form.Item
-						name="selectedRegions"
-						rules={[
-							{
-								validator: async (): Promise<void> => {
-									if (selectedRegions.length === 0) {
-										throw new Error('Please select at least one region to monitor');
-									}
-								},
-								message: 'Please select at least one region to monitor',
-							},
-						]}
-					>
-						{renderRegionSelector()}
-					</Form.Item>
-
-					<div className="integration-detail-content">
-						<RemoveIntegrationAccount
-							accountId={account?.id}
-							onRemoveIntegrationAccountSuccess={handleRemoveIntegrationAccountSuccess}
-						/>
-					</div>
-				</div>
-			</Form>
-		</SignozModal>
-	);
-}
-
-export default AccountSettingsModal;

frontend/src/container/CloudIntegrationPage/HeroSection/components/RegionForm.tsx

@@ -1,109 +0,0 @@
-import { useRef } from 'react';
-import { Form } from 'antd';
-import cx from 'classnames';
-import { useAccountStatus } from 'hooks/integration/aws/useAccountStatus';
-import { AccountStatusResponse } from 'types/api/integrations/aws';
-import { regions } from 'utils/regions';
-
-import logEvent from '../../../../api/common/logEvent';
-import { ModalStateEnum, RegionFormProps } from '../types';
-import AlertMessage from './AlertMessage';
-import {
-	ComplianceNote,
-	MonitoringRegionsSection,
-	RegionDeploymentSection,
-} from './IntegrateNowFormSections';
-import RenderConnectionFields from './RenderConnectionParams';
-
-const allRegions = (): string[] =>
-	regions.flatMap((r) => r.subRegions.map((sr) => sr.name));
-
-const getRegionPreviewText = (regions: string[]): string[] => {
-	if (regions.includes('all')) {
-		return allRegions();
-	}
-	return regions;
-};
-
-export function RegionForm({
-	form,
-	modalState,
-	setModalState,
-	selectedRegions,
-	includeAllRegions,
-	onIncludeAllRegionsChange,
-	onRegionSelect,
-	onSubmit,
-	accountId,
-	selectedDeploymentRegion,
-	handleRegionChange,
-	connectionParams,
-	isConnectionParamsLoading,
-}: RegionFormProps): JSX.Element {
-	const startTimeRef = useRef(Date.now());
-	const refetchInterval = 10 * 1000;
-	const errorTimeout = 10 * 60 * 1000;
-
-	const { isLoading: isAccountStatusLoading } = useAccountStatus(accountId, {
-		refetchInterval,
-		enabled: !!accountId && modalState === ModalStateEnum.WAITING,
-		onSuccess: (data: AccountStatusResponse) => {
-			if (data.data.status.integration.last_heartbeat_ts_ms !== null) {
-				setModalState(ModalStateEnum.SUCCESS);
-				logEvent('AWS Integration: Account connected', {
-					cloudAccountId: data?.data?.cloud_account_id,
-					status: data?.data?.status,
-				});
-			} else if (Date.now() - startTimeRef.current >= errorTimeout) {
-				setModalState(ModalStateEnum.ERROR);
-				logEvent('AWS Integration: Account connection attempt timed out', {
-					id: accountId,
-				});
-			}
-		},
-		onError: () => {
-			setModalState(ModalStateEnum.ERROR);
-		},
-	});
-
-	const isFormDisabled =
-		modalState === ModalStateEnum.WAITING || isAccountStatusLoading;
-
-	return (
-		<Form
-			form={form}
-			className="cloud-account-setup-form"
-			layout="vertical"
-			onFinish={onSubmit}
-		>
-			<AlertMessage modalState={modalState} />
-
-			<div
-				className={cx(`cloud-account-setup-form__content`, {
-					disabled: isFormDisabled,
-				})}
-			>
-				<RegionDeploymentSection
-					regions={regions}
-					handleRegionChange={handleRegionChange}
-					isFormDisabled={isFormDisabled}
-					selectedDeploymentRegion={selectedDeploymentRegion}
-				/>
-				<MonitoringRegionsSection
-					includeAllRegions={includeAllRegions}
-					selectedRegions={selectedRegions}
-					onIncludeAllRegionsChange={onIncludeAllRegionsChange}
-					getRegionPreviewText={getRegionPreviewText}
-					onRegionSelect={onRegionSelect}
-					isFormDisabled={isFormDisabled}
-				/>
-				<ComplianceNote />
-				<RenderConnectionFields
-					isConnectionParamsLoading={isConnectionParamsLoading}
-					connectionParams={connectionParams}
-					isFormDisabled={isFormDisabled}
-				/>
-			</div>
-		</Form>
-	);
-}

frontend/src/container/CloudIntegrationPage/HeroSection/components/RemoveIntegrationAccount.scss

@@ -1,47 +0,0 @@
-.remove-integration-account {
-	display: flex;
-	justify-content: space-between;
-	padding: 16px;
-	border-radius: 4px;
-	border: 1px solid rgba(218, 85, 101, 0.2);
-	background: rgba(218, 85, 101, 0.06);
-	&__header {
-		display: flex;
-		flex-direction: column;
-		gap: 6px;
-	}
-
-	&__title {
-		color: var(--bg-cherry-500);
-		font-size: 14px;
-		letter-spacing: -0.07px;
-	}
-
-	&__subtitle {
-		color: var(--bg-cherry-300);
-		font-size: 14px;
-		line-height: 22px;
-		letter-spacing: -0.07px;
-	}
-
-	&__button {
-		display: flex;
-		align-items: center;
-		background: var(--bg-cherry-500);
-		border: none;
-		color: var(--bg-vanilla-100);
-		font-size: 12px;
-		font-weight: 500;
-		line-height: 13.3px; /* 110.833% */
-		padding: 9px 13px;
-		.ant-btn-icon {
-			margin-inline-end: 4px !important;
-		}
-
-		&:hover {
-			&.ant-btn-default {
-				color: var(--bg-vanilla-300) !important;
-			}
-		}
-	}
-}

frontend/src/container/CloudIntegrationPage/HeroSection/components/RemoveIntegrationAccount.tsx

@@ -1,94 +0,0 @@
-import { useState } from 'react';
-import { useMutation } from 'react-query';
-import { Button, Modal } from 'antd';
-import logEvent from 'api/common/logEvent';
-import removeAwsIntegrationAccount from 'api/Integrations/removeAwsIntegrationAccount';
-import { SOMETHING_WENT_WRONG } from 'constants/api';
-import { useNotifications } from 'hooks/useNotifications';
-import { X } from 'lucide-react';
-import { INTEGRATION_TELEMETRY_EVENTS } from 'pages/Integrations/utils';
-
-import './RemoveIntegrationAccount.scss';
-
-function RemoveIntegrationAccount({
-	accountId,
-	onRemoveIntegrationAccountSuccess,
-}: {
-	accountId: string;
-	onRemoveIntegrationAccountSuccess: () => void;
-}): JSX.Element {
-	const { notifications } = useNotifications();
-	const [isModalOpen, setIsModalOpen] = useState(false);
-
-	const showModal = (): void => {
-		setIsModalOpen(true);
-	};
-
-	const {
-		mutate: removeIntegration,
-		isLoading: isRemoveIntegrationLoading,
-	} = useMutation(removeAwsIntegrationAccount, {
-		onSuccess: () => {
-			onRemoveIntegrationAccountSuccess?.();
-			setIsModalOpen(false);
-		},
-		onError: () => {
-			notifications.error({
-				message: SOMETHING_WENT_WRONG,
-			});
-		},
-	});
-	const handleOk = (): void => {
-		logEvent(INTEGRATION_TELEMETRY_EVENTS.AWS_INTEGRATION_ACCOUNT_REMOVED, {
-			accountId,
-		});
-		removeIntegration(accountId);
-	};
-
-	const handleCancel = (): void => {
-		setIsModalOpen(false);
-	};
-
-	return (
-		<div className="remove-integration-account">
-			<div className="remove-integration-account__header">
-				<div className="remove-integration-account__title">Remove Integration</div>
-				<div className="remove-integration-account__subtitle">
-					Removing this integration won&apos;t delete any existing data but will stop
-					collecting new data from AWS.
-				</div>
-			</div>
-			<Button
-				className="remove-integration-account__button"
-				icon={<X size={14} />}
-				onClick={(): void => showModal()}
-			>
-				Remove
-			</Button>
-			<Modal
-				className="remove-integration-modal"
-				open={isModalOpen}
-				title="Remove integration"
-				onOk={handleOk}
-				onCancel={handleCancel}
-				okText="Remove Integration"
-				okButtonProps={{
-					danger: true,
-					disabled: isRemoveIntegrationLoading,
-				}}
-			>
-				<div className="remove-integration-modal__text">
-					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 />
-					<br />
-					After that, you can delete the cloudformation stack that was created
-					manually when connecting this account.
-				</div>
-			</Modal>
-		</div>
-	);
-}
-
-export default RemoveIntegrationAccount;

frontend/src/container/CloudIntegrationPage/HeroSection/components/SuccessView.style.scss

@@ -1,156 +0,0 @@
-.cloud-account-setup-success-view {
-	display: flex;
-	flex-direction: column;
-	gap: 40px;
-	text-align: center;
-	padding-top: 34px;
-	p,
-	h3,
-	h4 {
-		margin: 0;
-	}
-	&__content {
-		display: flex;
-		flex-direction: column;
-		gap: 14px;
-		.cloud-account-setup-success-view {
-			&__title {
-				h3 {
-					color: var(--bg-vanilla-100);
-					font-size: 20px;
-					font-weight: 500;
-					line-height: 32px;
-				}
-			}
-			&__description {
-				color: var(--bg-vanilla-400);
-				font-size: 14px;
-				font-weight: 400;
-				line-height: 20px;
-				letter-spacing: -0.07px;
-			}
-		}
-	}
-	&__what-next {
-		display: flex;
-		flex-direction: column;
-		gap: 18px;
-		text-align: left;
-		&-title {
-			color: var(--bg-slate-50);
-			font-size: 11px;
-			font-weight: 500;
-			line-height: 18px;
-			letter-spacing: 0.88px;
-			text-transform: uppercase;
-		}
-		.what-next-items-wrapper {
-			display: flex;
-			flex-direction: column;
-			gap: 12px;
-			&__item {
-				display: flex;
-				gap: 10px;
-				align-items: baseline;
-				&.ant-alert {
-					padding: 14px;
-					border-radius: 8px;
-					font-size: 14px;
-					line-height: 20px; /* 142.857% */
-					letter-spacing: -0.21px;
-				}
-				&.ant-alert-info {
-					border: 1px solid rgba(63, 94, 204, 0.5);
-					background: rgba(78, 116, 248, 0.2);
-					color: var(--bg-robin-400);
-				}
-
-				.what-next-item {
-					color: var(--bg-robin-400);
-					&-bullet-icon {
-						font-size: 20px;
-						line-height: 20px;
-					}
-					&-text {
-						font-size: 14px;
-						font-weight: 500;
-						line-height: 20px;
-						letter-spacing: -0.21px;
-					}
-				}
-			}
-		}
-	}
-	&__footer {
-		padding-top: 18px;
-		.ant-btn {
-			background: var(--bg-robin-500);
-			color: var(--bg-vanilla-100);
-			font-size: 14px;
-			font-weight: 500;
-			line-height: 20px;
-			height: 36px;
-		}
-	}
-}
-.lottie-container {
-	position: absolute;
-	width: 743.5px;
-	height: 990.342px;
-	top: -100px;
-	left: -36px;
-	z-index: 1;
-}
-
-.lightMode {
-	.cloud-account-setup-success-view {
-		&__content {
-			.cloud-account-setup-success-view {
-				&__title {
-					h3 {
-						color: var(--bg-ink-500);
-					}
-				}
-
-				&__description {
-					color: var(--bg-ink-400);
-				}
-			}
-		}
-
-		&__what-next {
-			&-title {
-				color: var(--bg-ink-500);
-			}
-
-			.what-next-items-wrapper {
-				&__item {
-					&.ant-alert-info {
-						border: 1px solid rgba(63, 94, 204, 0.2);
-						background: rgba(78, 116, 248, 0.1);
-						color: var(--bg-robin-500);
-					}
-
-					.what-next-item {
-						color: var(--bg-robin-500);
-
-						&-text {
-							color: var(--bg-robin-500);
-						}
-					}
-				}
-			}
-		}
-
-		&__footer {
-			.ant-btn {
-				background: var(--bg-robin-500);
-				color: var(--bg-vanilla-100);
-
-				&:hover {
-					background: var(--bg-robin-400);
-				}
-			}
-		}
-	}
-}

frontend/src/container/CloudIntegrationPage/HeroSection/components/SuccessView.tsx

@@ -1,75 +0,0 @@
-import { useState } from 'react';
-import Lottie from 'react-lottie';
-import { Alert } from 'antd';
-import integrationsSuccess from 'assets/Lotties/integrations-success.json';
-
-import solidCheckCircleUrl from '@/assets/Icons/solid-check-circle.svg';
-
-import './SuccessView.style.scss';
-
-export function SuccessView(): JSX.Element {
-	const [isAnimationComplete, setIsAnimationComplete] = useState(false);
-
-	const defaultOptions = {
-		loop: false,
-		autoplay: true,
-		animationData: integrationsSuccess,
-		rendererSettings: {
-			preserveAspectRatio: 'xMidYMid slice',
-		},
-	};
-
-	return (
-		<>
-			{!isAnimationComplete && (
-				<div className="lottie-container">
-					<Lottie
-						options={defaultOptions}
-						height={990.342}
-						width={743.5}
-						eventListeners={[
-							{
-								eventName: 'complete',
-								callback: (): void => setIsAnimationComplete(true),
-							},
-						]}
-					/>
-				</div>
-			)}
-			<div className="cloud-account-setup-success-view">
-				<div className="cloud-account-setup-success-view__icon">
-					<img src={solidCheckCircleUrl} alt="Success" />
-				</div>
-				<div className="cloud-account-setup-success-view__content">
-					<div className="cloud-account-setup-success-view__title">
-						<h3>🎉 Success! </h3>
-						<h3>Your AWS Web Service integration is all set.</h3>
-					</div>
-					<div className="cloud-account-setup-success-view__description">
-						<p>Your observability journey is off to a great start. </p>
-						<p>Now that your data is flowing, here’s what you can do next:</p>
-					</div>
-				</div>
-				<div className="cloud-account-setup-success-view__what-next">
-					<h4 className="cloud-account-setup-success-view__what-next-title">
-						WHAT NEXT
-					</h4>
-					<div className="what-next-items-wrapper">
-						<Alert
-							message={
-								<div className="what-next-items-wrapper__item">
-									<div className="what-next-item-bullet-icon">•</div>
-									<div className="what-next-item-text">
-										Set up your AWS services effortlessly under your enabled account.
-									</div>
-								</div>
-							}
-							type="info"
-							className="what-next-items-wrapper__item"
-						/>
-					</div>
-				</div>
-			</div>
-		</>
-	);
-}

frontend/src/container/CloudIntegrationPage/ServicesSection/CloudServiceDashboards.tsx

@@ -1,50 +0,0 @@
-import { Link } from 'react-router-dom';
-
-import { ServiceData } from './types';
-
-function DashboardItem({
-	dashboard,
-}: {
-	dashboard: ServiceData['assets']['dashboards'][number];
-}): JSX.Element {
-	const content = (
-		<>
-			<div className="cloud-service-dashboard-item__title">{dashboard.title}</div>
-			<div className="cloud-service-dashboard-item__preview">
-				<img
-					src={dashboard.image}
-					alt={dashboard.title}
-					className="cloud-service-dashboard-item__preview-image"
-				/>
-			</div>
-		</>
-	);
-
-	return (
-		<div className="cloud-service-dashboard-item">
-			{dashboard.url ? (
-				<Link to={dashboard.url} className="cloud-service-dashboard-item__link">
-					{content}
-				</Link>
-			) : (
-				content
-			)}
-		</div>
-	);
-}
-
-function CloudServiceDashboards({
-	service,
-}: {
-	service: ServiceData;
-}): JSX.Element {
-	return (
-		<>
-			{service.assets.dashboards.map((dashboard) => (
-				<DashboardItem key={dashboard.id} dashboard={dashboard} />
-			))}
-		</>
-	);
-}
-
-export default CloudServiceDashboards;

frontend/src/container/CloudIntegrationPage/ServicesSection/ConfigureServiceModal.styles.scss

@@ -1,89 +0,0 @@
-.configure-service-modal {
-	&__body {
-		display: flex;
-		flex-direction: column;
-		border-radius: 3px;
-		border: 1px solid var(--bg-slate-500);
-		padding: 14px;
-
-		&-regions-switch-switch {
-			display: flex;
-			align-items: center;
-			gap: 6px;
-
-			&-label {
-				color: var(--bg-vanilla-100);
-				font-size: 14px;
-				font-weight: 500;
-				line-height: 20px;
-				letter-spacing: -0.07px;
-			}
-		}
-
-		&-switch-description {
-			margin-top: 4px;
-			color: var(--bg-vanilla-400);
-			font-size: 12px;
-			font-weight: 400;
-			line-height: 18px;
-			letter-spacing: -0.06px;
-		}
-		&-form-item {
-			&:last-child {
-				margin-bottom: 0px;
-			}
-		}
-	}
-	.ant-modal-body {
-		padding-bottom: 0;
-	}
-	.ant-modal-footer {
-		margin: 0;
-		padding-bottom: 12px;
-	}
-}
-
-.lightMode {
-	.configure-service-modal {
-		&__body {
-			border-color: var(--bg-vanilla-300);
-
-			&-regions-switch-switch {
-				&-label {
-					color: var(--bg-ink-500);
-				}
-			}
-
-			&-switch-description {
-				color: var(--bg-ink-400);
-			}
-		}
-
-		.ant-btn {
-			&.ant-btn-default {
-				background: var(--bg-vanilla-100);
-				border: 1px solid var(--bg-vanilla-300);
-				color: var(--bg-ink-400);
-
-				&:hover {
-					border-color: var(--bg-vanilla-400);
-					color: var(--bg-ink-500);
-				}
-			}
-
-			&.ant-btn-primary {
-				// Keep primary button same as dark mode
-				background: var(--bg-robin-500);
-				color: var(--bg-vanilla-100);
-
-				&:hover {
-					background: var(--bg-robin-400);
-				}
-
-				&:disabled {
-					opacity: 0.6;
-				}
-			}
-		}
-	}
-}

frontend/src/container/CloudIntegrationPage/ServicesSection/ConfigureServiceModal.tsx

@@ -1,243 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { useQueryClient } from 'react-query';
-import { Form, Switch } from 'antd';
-import SignozModal from 'components/SignozModal/SignozModal';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import {
-	ServiceConfig,
-	SupportedSignals,
-} from 'container/CloudIntegrationPage/ServicesSection/types';
-import { useUpdateServiceConfig } from 'hooks/integration/aws/useUpdateServiceConfig';
-import { isEqual } from 'lodash-es';
-
-import logEvent from '../../../api/common/logEvent';
-import S3BucketsSelector from './S3BucketsSelector';
-
-import './ConfigureServiceModal.styles.scss';
-
-export interface IConfigureServiceModalProps {
-	isOpen: boolean;
-	onClose: () => void;
-	serviceName: string;
-	serviceId: string;
-	cloudAccountId: string;
-	supportedSignals: SupportedSignals;
-	initialConfig?: ServiceConfig;
-}
-
-function ConfigureServiceModal({
-	isOpen,
-	onClose,
-	serviceName,
-	serviceId,
-	cloudAccountId,
-	initialConfig,
-	supportedSignals,
-}: IConfigureServiceModalProps): JSX.Element {
-	const [form] = Form.useForm();
-	const [isLoading, setIsLoading] = useState(false);
-
-	// Track current form values
-	const initialValues = useMemo(
-		() => ({
-			metrics: initialConfig?.metrics?.enabled || false,
-			logs: initialConfig?.logs?.enabled || false,
-			s3Buckets: initialConfig?.logs?.s3_buckets || {},
-		}),
-		[initialConfig],
-	);
-	const [currentValues, setCurrentValues] = useState(initialValues);
-
-	const isSaveDisabled = useMemo(
-		() =>
-			// disable only if current values are same as the initial config
-			currentValues.metrics === initialValues.metrics &&
-			currentValues.logs === initialValues.logs &&
-			isEqual(currentValues.s3Buckets, initialValues.s3Buckets),
-		[currentValues, initialValues],
-	);
-
-	const handleS3BucketsChange = useCallback(
-		(bucketsByRegion: Record<string, string[]>) => {
-			setCurrentValues((prev) => ({
-				...prev,
-				s3Buckets: bucketsByRegion,
-			}));
-			form.setFieldsValue({ s3Buckets: bucketsByRegion });
-		},
-		[form],
-	);
-
-	const {
-		mutate: updateServiceConfig,
-		isLoading: isUpdating,
-	} = useUpdateServiceConfig();
-
-	const queryClient = useQueryClient();
-
-	const handleSubmit = useCallback(async (): Promise<void> => {
-		try {
-			const values = await form.validateFields();
-			setIsLoading(true);
-
-			updateServiceConfig(
-				{
-					serviceId,
-					payload: {
-						cloud_account_id: cloudAccountId,
-						config: {
-							logs: {
-								enabled: values.logs,
-								s3_buckets: values.s3Buckets,
-							},
-							metrics: {
-								enabled: values.metrics,
-							},
-						},
-					},
-				},
-				{
-					onSuccess: () => {
-						queryClient.invalidateQueries([
-							REACT_QUERY_KEY.AWS_SERVICE_DETAILS,
-							serviceId,
-						]);
-						onClose();
-
-						logEvent('AWS Integration: Service settings saved', {
-							cloudAccountId,
-							serviceId,
-							logsEnabled: values?.logs,
-							metricsEnabled: values?.metrics,
-						});
-					},
-					onError: (error) => {
-						console.error('Failed to update service config:', error);
-					},
-				},
-			);
-		} catch (error) {
-			console.error('Form submission failed:', error);
-		} finally {
-			setIsLoading(false);
-		}
-	}, [
-		form,
-		updateServiceConfig,
-		serviceId,
-		cloudAccountId,
-		queryClient,
-		onClose,
-	]);
-
-	const handleClose = useCallback(() => {
-		form.resetFields();
-		onClose();
-	}, [form, onClose]);
-
-	return (
-		<SignozModal
-			title={
-				<div className="account-settings-modal__title">Configure {serviceName}</div>
-			}
-			centered
-			open={isOpen}
-			okText="Save"
-			okButtonProps={{
-				disabled: isSaveDisabled,
-				className: 'account-settings-modal__footer-save-button',
-				loading: isLoading || isUpdating,
-			}}
-			onCancel={handleClose}
-			onOk={handleSubmit}
-			cancelText="Close"
-			cancelButtonProps={{
-				className: 'account-settings-modal__footer-close-button',
-			}}
-			width={672}
-			rootClassName=" configure-service-modal"
-		>
-			<Form
-				form={form}
-				layout="vertical"
-				initialValues={{
-					metrics: initialConfig?.metrics?.enabled || false,
-					logs: initialConfig?.logs?.enabled || false,
-					s3Buckets: initialConfig?.logs?.s3_buckets || {},
-				}}
-			>
-				<div className=" configure-service-modal__body">
-					{supportedSignals.metrics && (
-						<Form.Item
-							name="metrics"
-							valuePropName="checked"
-							className="configure-service-modal__body-form-item"
-						>
-							<div className="configure-service-modal__body-regions-switch-switch">
-								<Switch
-									checked={currentValues.metrics}
-									onChange={(checked): void => {
-										setCurrentValues((prev) => ({ ...prev, metrics: checked }));
-										form.setFieldsValue({ metrics: checked });
-									}}
-								/>
-								<span className="configure-service-modal__body-regions-switch-switch-label">
-									Metric Collection
-								</span>
-							</div>
-							<div className="configure-service-modal__body-switch-description">
-								Metric Collection is enabled for this AWS account. We recommend keeping
-								this enabled, but you can disable metric collection if you do not want
-								to monitor your AWS infrastructure.
-							</div>
-						</Form.Item>
-					)}
-
-					{supportedSignals.logs && (
-						<>
-							<Form.Item
-								name="logs"
-								valuePropName="checked"
-								className="configure-service-modal__body-form-item"
-							>
-								<div className="configure-service-modal__body-regions-switch-switch">
-									<Switch
-										checked={currentValues.logs}
-										onChange={(checked): void => {
-											setCurrentValues((prev) => ({ ...prev, logs: checked }));
-											form.setFieldsValue({ logs: checked });
-										}}
-									/>
-									<span className="configure-service-modal__body-regions-switch-switch-label">
-										Log Collection
-									</span>
-								</div>
-								<div className="configure-service-modal__body-switch-description">
-									To ingest logs from your AWS services, you must complete several steps
-								</div>
-							</Form.Item>
-
-							{currentValues.logs && serviceId === 's3sync' && (
-								<Form.Item name="s3Buckets" noStyle>
-									<S3BucketsSelector
-										initialBucketsByRegion={currentValues.s3Buckets}
-										onChange={handleS3BucketsChange}
-									/>
-								</Form.Item>
-							)}
-						</>
-					)}
-				</div>
-			</Form>
-		</SignozModal>
-	);
-}
-
-ConfigureServiceModal.defaultProps = {
-	initialConfig: {
-		metrics: { enabled: false },
-		logs: { enabled: false },
-	},
-};
-
-export default ConfigureServiceModal;

frontend/src/container/CloudIntegrationPage/ServicesSection/ServiceDetails.tsx

@@ -1,189 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import { Button, Tabs, TabsProps } from 'antd';
-import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
-import Spinner from 'components/Spinner';
-import CloudServiceDashboards from 'container/CloudIntegrationPage/ServicesSection/CloudServiceDashboards';
-import CloudServiceDataCollected from 'container/CloudIntegrationPage/ServicesSection/CloudServiceDataCollected';
-import { IServiceStatus } from 'container/CloudIntegrationPage/ServicesSection/types';
-import dayjs from 'dayjs';
-import { useServiceDetails } from 'hooks/integration/aws/useServiceDetails';
-import useUrlQuery from 'hooks/useUrlQuery';
-
-import logEvent from '../../../api/common/logEvent';
-import ConfigureServiceModal from './ConfigureServiceModal';
-
-const getStatus = (
-	logsLastReceivedTimestamp: number | undefined,
-	metricsLastReceivedTimestamp: number | undefined,
-): { text: string; className: string } => {
-	if (!logsLastReceivedTimestamp && !metricsLastReceivedTimestamp) {
-		return { text: 'No Data Yet', className: 'service-status--no-data' };
-	}
-
-	const latestTimestamp = Math.max(
-		logsLastReceivedTimestamp || 0,
-		metricsLastReceivedTimestamp || 0,
-	);
-
-	const isStale = dayjs().diff(dayjs(latestTimestamp), 'minute') > 30;
-
-	if (isStale) {
-		return { text: 'Stale Data', className: 'service-status--stale-data' };
-	}
-
-	return { text: 'Connected', className: 'service-status--connected' };
-};
-
-function ServiceStatus({
-	serviceStatus,
-}: {
-	serviceStatus: IServiceStatus | undefined;
-}): JSX.Element {
-	const logsLastReceivedTimestamp = serviceStatus?.logs?.last_received_ts_ms;
-	const metricsLastReceivedTimestamp =
-		serviceStatus?.metrics?.last_received_ts_ms;
-
-	const { text, className } = getStatus(
-		logsLastReceivedTimestamp,
-		metricsLastReceivedTimestamp,
-	);
-
-	return <div className={`service-status ${className}`}>{text}</div>;
-}
-
-function getTabItems(serviceDetailsData: any): TabsProps['items'] {
-	const dashboards = serviceDetailsData?.assets.dashboards || [];
-	const dataCollected = serviceDetailsData?.data_collected || {};
-	const items: TabsProps['items'] = [];
-
-	if (dashboards.length) {
-		items.push({
-			key: 'dashboards',
-			label: `Dashboards (${dashboards.length})`,
-			children: <CloudServiceDashboards service={serviceDetailsData} />,
-		});
-	}
-
-	items.push({
-		key: 'data-collected',
-		label: 'Data Collected',
-		children: (
-			<CloudServiceDataCollected
-				logsData={dataCollected.logs || []}
-				metricsData={dataCollected.metrics || []}
-			/>
-		),
-	});
-
-	return items;
-}
-
-function ServiceDetails(): JSX.Element | null {
-	const urlQuery = useUrlQuery();
-	const cloudAccountId = urlQuery.get('cloudAccountId');
-	const serviceId = urlQuery.get('service');
-	const [isConfigureServiceModalOpen, setIsConfigureServiceModalOpen] = useState(
-		false,
-	);
-	const openServiceConfigModal = (): void => {
-		setIsConfigureServiceModalOpen(true);
-		logEvent('AWS Integration: Service settings viewed', {
-			cloudAccountId,
-			serviceId,
-		});
-	};
-
-	const { data: serviceDetailsData, isLoading } = useServiceDetails(
-		serviceId || '',
-		cloudAccountId || undefined,
-	);
-
-	const { config, supported_signals } = serviceDetailsData ?? {};
-
-	const totalSupportedSignals = Object.entries(supported_signals || {}).filter(
-		([, value]) => !!value,
-	).length;
-	const enabledSignals = useMemo(
-		() =>
-			Object.values(config || {}).filter((item) => item && item.enabled).length,
-		[config],
-	);
-
-	const isAnySignalConfigured = useMemo(
-		() => !!config?.logs?.enabled || !!config?.metrics?.enabled,
-		[config],
-	);
-
-	// log telemetry event on visiting details of a service.
-	useEffect(() => {
-		if (serviceId) {
-			logEvent('AWS Integration: Service viewed', {
-				cloudAccountId,
-				serviceId,
-			});
-		}
-	}, [cloudAccountId, serviceId]);
-
-	if (isLoading) {
-		return <Spinner size="large" height="50vh" />;
-	}
-
-	if (!serviceDetailsData) {
-		return null;
-	}
-
-	const tabItems = getTabItems(serviceDetailsData);
-
-	return (
-		<div className="service-details">
-			<div className="service-details__title-bar">
-				<div className="service-details__details-title">Details</div>
-				<div className="service-details__right-actions">
-					{isAnySignalConfigured && (
-						<ServiceStatus serviceStatus={serviceDetailsData.status} />
-					)}
-
-					{!!cloudAccountId &&
-						(isAnySignalConfigured ? (
-							<Button
-								className="configure-button configure-button--default"
-								onClick={openServiceConfigModal}
-							>
-								Configure ({enabledSignals}/{totalSupportedSignals})
-							</Button>
-						) : (
-							<Button
-								type="primary"
-								className="configure-button configure-button--primary"
-								onClick={openServiceConfigModal}
-							>
-								Enable Service
-							</Button>
-						))}
-				</div>
-			</div>
-			<div className="service-details__overview">
-				<MarkdownRenderer
-					variables={{}}
-					markdownContent={serviceDetailsData?.overview}
-				/>
-			</div>
-			<div className="service-details__tabs">
-				<Tabs items={tabItems} />
-			</div>
-			{isConfigureServiceModalOpen && (
-				<ConfigureServiceModal
-					isOpen
-					onClose={(): void => setIsConfigureServiceModalOpen(false)}
-					serviceName={serviceDetailsData.title}
-					serviceId={serviceId || ''}
-					cloudAccountId={cloudAccountId || ''}
-					initialConfig={serviceDetailsData.config}
-					supportedSignals={serviceDetailsData.supported_signals || {}}
-				/>
-			)}
-		</div>
-	);
-}
-
-export default ServiceDetails;

frontend/src/container/CloudIntegrationPage/ServicesSection/ServicesList.tsx

@@ -1,75 +0,0 @@
-import { useCallback, useEffect, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom-v5-compat';
-import Spinner from 'components/Spinner';
-import { useGetAccountServices } from 'hooks/integration/aws/useGetAccountServices';
-import useUrlQuery from 'hooks/useUrlQuery';
-
-import ServiceItem from './ServiceItem';
-
-interface ServicesListProps {
-	cloudAccountId: string;
-	filter: 'all_services' | 'enabled' | 'available';
-}
-
-function ServicesList({
-	cloudAccountId,
-	filter,
-}: ServicesListProps): JSX.Element {
-	const urlQuery = useUrlQuery();
-	const navigate = useNavigate();
-	const { data: services = [], isLoading } = useGetAccountServices(
-		cloudAccountId,
-	);
-	const activeService = urlQuery.get('service');
-
-	const handleActiveService = useCallback(
-		(serviceId: string): void => {
-			const latestUrlQuery = new URLSearchParams(window.location.search);
-			latestUrlQuery.set('service', serviceId);
-			navigate({ search: latestUrlQuery.toString() });
-		},
-		[navigate],
-	);
-
-	const filteredServices = useMemo(() => {
-		if (filter === 'all_services') {
-			return services;
-		}
-
-		return services.filter((service) => {
-			const isEnabled =
-				service?.config?.logs?.enabled || service?.config?.metrics?.enabled;
-			return filter === 'enabled' ? isEnabled : !isEnabled;
-		});
-	}, [services, filter]);
-
-	useEffect(() => {
-		if (activeService || !services?.length) {
-			return;
-		}
-
-		handleActiveService(services[0].id);
-	}, [services, activeService, handleActiveService]);
-
-	if (isLoading) {
-		return <Spinner size="large" height="25vh" />;
-	}
-	if (!services) {
-		return <div>No services found</div>;
-	}
-
-	return (
-		<div className="services-list">
-			{filteredServices.map((service) => (
-				<ServiceItem
-					key={service.id}
-					service={service}
-					onClick={handleActiveService}
-					isActive={service.id === activeService}
-				/>
-			))}
-		</div>
-	);
-}
-
-export default ServicesList;

frontend/src/container/CloudIntegrationPage/ServicesSection/ServicesTabs.tsx

@@ -1,124 +0,0 @@
-import { useMemo, useState } from 'react';
-import { useQuery } from 'react-query';
-import { Color } from '@signozhq/design-tokens';
-import type { SelectProps, TabsProps } from 'antd';
-import { Select, Tabs } from 'antd';
-import { getAwsServices } from 'api/integration/aws';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import useUrlQuery from 'hooks/useUrlQuery';
-import { ChevronDown } from 'lucide-react';
-
-import ServiceDetails from './ServiceDetails';
-import ServicesList from './ServicesList';
-
-import './ServicesTabs.style.scss';
-
-export enum ServiceFilterType {
-	ALL_SERVICES = 'all_services',
-	ENABLED = 'enabled',
-	AVAILABLE = 'available',
-}
-
-interface ServicesFilterProps {
-	cloudAccountId: string;
-	onFilterChange: (value: ServiceFilterType) => void;
-}
-
-function ServicesFilter({
-	cloudAccountId,
-	onFilterChange,
-}: ServicesFilterProps): JSX.Element | null {
-	const { data: services, isLoading } = useQuery(
-		[REACT_QUERY_KEY.AWS_SERVICES, cloudAccountId],
-		() => getAwsServices(cloudAccountId),
-	);
-
-	const { enabledCount, availableCount } = useMemo(() => {
-		if (!services) {
-			return { enabledCount: 0, availableCount: 0 };
-		}
-
-		return services.reduce(
-			(acc, service) => {
-				const isEnabled =
-					service?.config?.logs?.enabled || service?.config?.metrics?.enabled;
-				return {
-					enabledCount: acc.enabledCount + (isEnabled ? 1 : 0),
-					availableCount: acc.availableCount + (isEnabled ? 0 : 1),
-				};
-			},
-			{ enabledCount: 0, availableCount: 0 },
-		);
-	}, [services]);
-
-	const selectOptions: SelectProps['options'] = useMemo(
-		() => [
-			{ value: 'all_services', label: `All Services (${services?.length || 0})` },
-			{ value: 'enabled', label: `Enabled (${enabledCount})` },
-			{ value: 'available', label: `Available (${availableCount})` },
-		],
-		[services, enabledCount, availableCount],
-	);
-
-	if (isLoading) {
-		return null;
-	}
-	if (!services?.length) {
-		return null;
-	}
-
-	return (
-		<div className="services-filter">
-			<Select
-				style={{ width: '100%' }}
-				defaultValue={ServiceFilterType.ALL_SERVICES}
-				options={selectOptions}
-				className="services-sidebar__select"
-				suffixIcon={<ChevronDown size={16} color={Color.BG_VANILLA_400} />}
-				onChange={onFilterChange}
-			/>
-		</div>
-	);
-}
-
-function ServicesSection(): JSX.Element {
-	const urlQuery = useUrlQuery();
-	const cloudAccountId = urlQuery.get('cloudAccountId') || '';
-
-	const [activeFilter, setActiveFilter] = useState<
-		'all_services' | 'enabled' | 'available'
-	>('all_services');
-
-	return (
-		<div className="services-section">
-			<div className="services-section__sidebar">
-				<ServicesFilter
-					cloudAccountId={cloudAccountId}
-					onFilterChange={setActiveFilter}
-				/>
-				<ServicesList cloudAccountId={cloudAccountId} filter={activeFilter} />
-			</div>
-			<div className="services-section__content">
-				<ServiceDetails />
-			</div>
-		</div>
-	);
-}
-
-function ServicesTabs(): JSX.Element {
-	const tabItems: TabsProps['items'] = [
-		{
-			key: 'services',
-			label: 'Services For Integration',
-			children: <ServicesSection />,
-		},
-	];
-
-	return (
-		<div className="services-tabs">
-			<Tabs defaultActiveKey="services" items={tabItems} />
-		</div>
-	);
-}
-
-export default ServicesTabs;

frontend/src/container/CloudIntegrationPage/ServicesSection/__tests__/ConfigureServiceModalS3Sync.test.tsx

@@ -1,161 +0,0 @@
-import { act, fireEvent, screen, waitFor } from '@testing-library/react';
-import { server } from 'mocks-server/server';
-import { rest, RestRequest } from 'msw'; // Import RestRequest for req.json() typing
-
-import { UpdateServiceConfigPayload } from '../types';
-import { accountsResponse, CLOUD_ACCOUNT_ID, initialBuckets } from './mockData';
-import {
-	assertGenericModalElements,
-	assertS3SyncSpecificElements,
-	renderModal,
-} from './utils';
-
-// --- MOCKS ---
-jest.mock('hooks/useUrlQuery', () => ({
-	__esModule: true,
-	default: jest.fn(() => ({
-		get: jest.fn((paramName: string) => {
-			if (paramName === 'cloudAccountId') {
-				return CLOUD_ACCOUNT_ID;
-			}
-			return null;
-		}),
-	})),
-}));
-
-// --- TEST SUITE ---
-describe('ConfigureServiceModal for S3 Sync service', () => {
-	jest.setTimeout(10000);
-	beforeEach(() => {
-		server.use(
-			rest.get(
-				'http://localhost/api/v1/cloud-integrations/aws/accounts',
-				(req, res, ctx) => res(ctx.json(accountsResponse)),
-			),
-		);
-	});
-
-	it('should render with logs collection switch and bucket selectors (no buckets initially selected)', async () => {
-		act(() => {
-			renderModal({}); // No initial S3 buckets, defaults to 's3sync' serviceId
-		});
-		await assertGenericModalElements(); // Use new generic assertion
-		await assertS3SyncSpecificElements({}); // Use new S3-specific assertion
-	});
-
-	it('should render with logs collection switch and bucket selectors (some buckets initially selected)', async () => {
-		act(() => {
-			renderModal(initialBuckets); // Defaults to 's3sync' serviceId
-		});
-		await assertGenericModalElements(); // Use new generic assertion
-		await assertS3SyncSpecificElements(initialBuckets); // Use new S3-specific assertion
-	});
-
-	it('should enable save button after adding a new bucket via combobox', async () => {
-		act(() => {
-			renderModal(initialBuckets); // Defaults to 's3sync' serviceId
-		});
-		await assertGenericModalElements();
-		await assertS3SyncSpecificElements(initialBuckets);
-
-		expect(screen.getByRole('button', { name: /save/i })).toBeDisabled();
-
-		const targetCombobox = screen.getAllByRole('combobox')[0];
-		const newBucketName = 'a-newly-added-bucket';
-
-		act(() => {
-			fireEvent.change(targetCombobox, { target: { value: newBucketName } });
-			fireEvent.keyDown(targetCombobox, {
-				key: 'Enter',
-				code: 'Enter',
-				keyCode: 13,
-			});
-		});
-
-		await waitFor(() => {
-			expect(screen.getByLabelText(newBucketName)).toBeInTheDocument();
-			expect(screen.getByRole('button', { name: /save/i })).toBeEnabled();
-		});
-	});
-
-	it('should send updated bucket configuration on save', async () => {
-		let capturedPayload: UpdateServiceConfigPayload | null = null;
-		const mockUpdateConfigUrl =
-			'http://localhost/api/v1/cloud-integrations/aws/services/s3sync/config';
-
-		// Override POST handler specifically for this test to capture payload
-		server.use(
-			rest.post(mockUpdateConfigUrl, async (req: RestRequest, res, ctx) => {
-				capturedPayload = await req.json();
-				return res(ctx.status(200), ctx.json({ message: 'Config updated' }));
-			}),
-		);
-		act(() => {
-			renderModal(initialBuckets); // Defaults to 's3sync' serviceId
-		});
-		await assertGenericModalElements();
-		await assertS3SyncSpecificElements(initialBuckets);
-
-		expect(screen.getByRole('button', { name: /save/i })).toBeDisabled();
-
-		const newBucketName = 'another-new-bucket';
-		// As before, targeting the first combobox, assumed to be for 'ap-south-1'.
-		const targetCombobox = screen.getAllByRole('combobox')[0];
-
-		act(() => {
-			fireEvent.change(targetCombobox, { target: { value: newBucketName } });
-			fireEvent.keyDown(targetCombobox, {
-				key: 'Enter',
-				code: 'Enter',
-				keyCode: 13,
-			});
-		});
-
-		await waitFor(() => {
-			expect(screen.getByLabelText(newBucketName)).toBeInTheDocument();
-			expect(screen.getByRole('button', { name: /save/i })).toBeEnabled();
-			act(() => {
-				fireEvent.click(screen.getByRole('button', { name: /save/i }));
-			});
-		});
-
-		await waitFor(() => {
-			expect(capturedPayload).not.toBeNull();
-		});
-
-		expect(capturedPayload).toEqual({
-			cloud_account_id: CLOUD_ACCOUNT_ID,
-			config: {
-				logs: {
-					enabled: true,
-					s3_buckets: {
-						'us-east-2': ['first-bucket', 'second-bucket'], // Existing buckets
-						'ap-south-1': [newBucketName], // Newly added bucket for the first region
-					},
-				},
-				metrics: {},
-			},
-		});
-	});
-
-	it('should not render S3 bucket region selector UI for services other than s3sync', async () => {
-		const otherServiceId = 'cloudwatch';
-		act(() => {
-			renderModal({}, otherServiceId);
-		});
-		await assertGenericModalElements();
-
-		await waitFor(() => {
-			expect(
-				screen.queryByRole('heading', { name: /select s3 buckets by region/i }),
-			).not.toBeInTheDocument();
-
-			const regions = accountsResponse.data.accounts[0]?.config?.regions || [];
-			regions.forEach((region) => {
-				expect(
-					screen.queryByText(`Enter S3 bucket names for ${region}`),
-				).not.toBeInTheDocument();
-			});
-		});
-	});
-});

frontend/src/container/CloudIntegrationPage/ServicesSection/__tests__/mockData.ts

@@ -1,44 +0,0 @@
-import { IConfigureServiceModalProps } from '../ConfigureServiceModal';
-
-const CLOUD_ACCOUNT_ID = '123456789012';
-
-const initialBuckets = { 'us-east-2': ['first-bucket', 'second-bucket'] };
-
-const accountsResponse = {
-	status: 'success',
-	data: {
-		accounts: [
-			{
-				id: 'a1b2c3d4-e5f6-7890-1234-567890abcdef',
-				cloud_account_id: CLOUD_ACCOUNT_ID,
-				config: {
-					regions: ['ap-south-1', 'ap-south-2', 'us-east-1', 'us-east-2'],
-				},
-				status: {
-					integration: {
-						last_heartbeat_ts_ms: 1747114366214,
-					},
-				},
-			},
-		],
-	},
-};
-
-const defaultModalProps: Omit<IConfigureServiceModalProps, 'initialConfig'> = {
-	isOpen: true,
-	onClose: jest.fn(),
-	serviceName: 'S3 Sync',
-	serviceId: 's3sync',
-	cloudAccountId: CLOUD_ACCOUNT_ID,
-	supportedSignals: {
-		logs: true,
-		metrics: false,
-	},
-};
-
-export {
-	accountsResponse,
-	CLOUD_ACCOUNT_ID,
-	defaultModalProps,
-	initialBuckets,
-};

frontend/src/container/CloudIntegrationPage/ServicesSection/__tests__/utils.tsx

@@ -1,78 +0,0 @@
-import { render, RenderResult, screen, waitFor } from '@testing-library/react';
-import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
-
-import ConfigureServiceModal from '../ConfigureServiceModal';
-import { accountsResponse, defaultModalProps } from './mockData';
-
-/**
- * Renders the ConfigureServiceModal with specified S3 bucket initial configurations.
- */
-const renderModal = (
-	initialConfigLogsS3Buckets: Record<string, string[]> = {},
-	serviceId = 's3sync',
-): RenderResult => {
-	const initialConfig = {
-		logs: { enabled: true, s3_buckets: initialConfigLogsS3Buckets },
-		metrics: { enabled: false },
-	};
-
-	return render(
-		<MockQueryClientProvider>
-			<ConfigureServiceModal
-				{...defaultModalProps}
-				serviceId={serviceId}
-				initialConfig={initialConfig}
-			/>
-		</MockQueryClientProvider>,
-	);
-};
-
-/**
- * Asserts that generic UI elements of the modal are present.
- */
-const assertGenericModalElements = async (): Promise<void> => {
-	await waitFor(() => {
-		expect(screen.getByRole('switch')).toBeInTheDocument();
-		expect(screen.getByText(/log collection/i)).toBeInTheDocument();
-		expect(
-			screen.getByText(
-				/to ingest logs from your aws services, you must complete several steps/i,
-			),
-		).toBeInTheDocument();
-	});
-};
-
-/**
- * Asserts the state of S3 bucket selectors for each region, specific to S3 Sync.
- */
-const assertS3SyncSpecificElements = async (
-	expectedBucketsByRegion: Record<string, string[]> = {},
-): Promise<void> => {
-	const regions = accountsResponse.data.accounts[0]?.config?.regions || [];
-
-	await waitFor(() => {
-		expect(
-			screen.getByRole('heading', { name: /select s3 buckets by region/i }),
-		).toBeInTheDocument();
-
-		regions.forEach((region) => {
-			expect(screen.getByText(region)).toBeInTheDocument();
-			const bucketsForRegion = expectedBucketsByRegion[region] || [];
-			if (bucketsForRegion.length > 0) {
-				bucketsForRegion.forEach((bucket) => {
-					expect(screen.getByText(bucket)).toBeInTheDocument();
-				});
-			} else {
-				expect(
-					screen.getByText(`Enter S3 bucket names for ${region}`),
-				).toBeInTheDocument();
-			}
-		});
-	});
-};
-
-export {
-	assertGenericModalElements,
-	assertS3SyncSpecificElements,
-	renderModal,
-};

frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper.tsx

@@ -25,7 +25,6 @@ export default function ChartWrapper({
 	showTooltip = true,
 	showLegend = true,
 	canPinTooltip = false,
-	pinKey,
 	syncMode,
 	syncKey,
 	onDestroy = noop,
@@ -94,7 +93,6 @@ export default function ChartWrapper({
 							<TooltipPlugin
 								config={config}
 								canPinTooltip={canPinTooltip}
-								pinKey={pinKey}
 								syncMode={syncMode}
 								maxWidth={Math.max(
 									TOOLTIP_MIN_WIDTH,

frontend/src/container/DashboardContainer/visualization/charts/types.ts

@@ -14,8 +14,6 @@ interface BaseChartProps {
 	showLegend?: boolean;
 	timezone?: Timezone;
 	canPinTooltip?: boolean;
-	/** Key that pins the tooltip while hovering. Defaults to DEFAULT_PIN_TOOLTIP_KEY ('l'). */
-	pinKey?: string;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
 	pinnedTooltipElement?: (clickData: TooltipClickData) => React.ReactNode;

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/BarPanel.tsx

@@ -121,7 +121,6 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 					legendConfig={{
 						position: widget?.legendPosition ?? LegendPosition.BOTTOM,
 					}}
-					canPinTooltip
 					plotRef={onPlotRef}
 					onDestroy={onPlotDestroy}
 					yAxisUnit={widget.yAxisUnit}

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/TimeSeriesPanel.tsx

@@ -112,7 +112,6 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 					legendConfig={{
 						position: widget?.legendPosition ?? LegendPosition.BOTTOM,
 					}}
-					canPinTooltip
 					yAxisUnit={widget.yAxisUnit}
 					decimalPrecision={widget.decimalPrecision}
 					timezone={timezone}

frontend/src/container/EmptyLogsSearch/EmptyLogsSearch.tsx

@@ -7,8 +7,6 @@ import { EmptyLogsListConfig } from 'container/LogsExplorerList/utils';
 import { Delete } from 'lucide-react';
 import { DataSource, PanelTypeKeys } from 'types/common/queryBuilder';
 
-import emptyStateUrl from '@/assets/Icons/emptyState.svg';
-
 import './EmptyLogsSearch.styles.scss';
 
 interface EmptyLogsSearchProps {
@@ -48,7 +46,7 @@ export default function EmptyLogsSearch({
 			<div className="empty-logs-search__row">
 				<div className="empty-logs-search__content">
 					<img
-						src={emptyStateUrl}
+						src="/Icons/emptyState.svg"
 						alt="thinking-emoji"
 						className="empty-state-svg"
 					/>

frontend/src/container/ForgotPassword/index.tsx

@@ -11,8 +11,6 @@ import history from 'lib/history';
 import APIError from 'types/api/error';
 import { OrgSessionContext } from 'types/api/v2/sessions/context/get';
 
-import tvUrl from '@/assets/svgs/tv.svg';
-
 import SuccessScreen from './SuccessScreen';
 
 import './ForgotPassword.styles.scss';
@@ -133,7 +131,7 @@ function ForgotPassword({
 			>
 				<div className="login-form-header">
 					<div className="login-form-emoji">
-						<img src={tvUrl} alt="TV" width="32" height="32" />
+						<img src="/svgs/tv.svg" alt="TV" width="32" height="32" />
 					</div>
 					<h4 className="forgot-password-title">Forgot your password?</h4>
 					<p className="forgot-password-description">

frontend/src/container/FullScreenHeader/FullScreenHeader.tsx

@@ -1,7 +1,5 @@
 import history from 'lib/history';
 
-import signozBrandLogoUrl from '@/assets/Logos/signoz-brand-logo.svg';
-
 import './FullScreenHeader.styles.scss';
 
 export default function FullScreenHeader({
@@ -15,7 +13,7 @@ export default function FullScreenHeader({
 	return (
 		<div className="full-screen-header-container">
 			<div className="brand-logo" onClick={handleLogoClick}>
-				<img src={signozBrandLogoUrl} alt="SigNoz" />
+				<img src="/Logos/signoz-brand-logo.svg" alt="SigNoz" />
 
 				<div className="brand-logo-name">SigNoz</div>
 			</div>

frontend/src/container/GridCardLayout/DashboardEmptyState/DashboardEmptyState.tsx

@@ -16,10 +16,6 @@ import {
 import { ROLES, USER_ROLES } from 'types/roles';
 import { ComponentTypes } from 'utils/permission';
 
-import dashboardEmojiUrl from '@/assets/Icons/dashboard_emoji.svg';
-import landscapeUrl from '@/assets/Icons/landscape.svg';
-import toolsUrl from '@/assets/Icons/tools.svg';
-
 import './DashboardEmptyState.styles.scss';
 
 export default function DashboardEmptyState(): JSX.Element {
@@ -76,7 +72,7 @@ export default function DashboardEmptyState(): JSX.Element {
 			<div className="dashboard-content">
 				<section className="heading">
 					<img
-						src={dashboardEmojiUrl}
+						src="/Icons/dashboard_emoji.svg"
 						alt="header-image"
 						style={{ height: '32px', width: '32px' }}
 					/>
@@ -92,7 +88,7 @@ export default function DashboardEmptyState(): JSX.Element {
 						<div className="actions-configure">
 							<div className="actions-configure-text">
 								<img
-									src={toolsUrl}
+									src="/Icons/tools.svg"
 									alt="header-image"
 									style={{ height: '14px', width: '14px' }}
 								/>
@@ -129,7 +125,7 @@ export default function DashboardEmptyState(): JSX.Element {
 						<div className="actions-add-panel">
 							<div className="actions-panel-text">
 								<img
-									src={landscapeUrl}
+									src="/Icons/landscape.svg"
 									alt="header-image"
 									style={{ height: '14px', width: '14px' }}
 								/>

frontend/src/container/Home/AlertRules/AlertRules.tsx

@@ -14,10 +14,6 @@ import { useAppContext } from 'providers/App/App';
 import { GettableAlert } from 'types/api/alerts/get';
 import { USER_ROLES } from 'types/roles';
 
-import beaconUrl from '@/assets/Icons/beacon.svg';
-
-import { getItemIcon } from '../constants';
-
 export default function AlertRules({
 	onUpdateChecklistDoneItem,
 	loadingUserPreferences,
@@ -69,7 +65,11 @@ export default function AlertRules({
 		<div className="empty-state-container">
 			<div className="empty-state-content-container">
 				<div className="empty-state-content">
-					<img src={beaconUrl} alt="empty-alert-icon" className="empty-state-icon" />
+					<img
+						src="/Icons/beacon.svg"
+						alt="empty-alert-icon"
+						className="empty-state-icon"
+					/>
 
 					<div className="empty-title">No Alert rules yet.</div>
 
@@ -156,7 +156,11 @@ export default function AlertRules({
 					>
 						<div className="alert-rule-item-name-container home-data-item-name-container">
 							<img
-								src={getItemIcon(rule.id)}
+								src={
+									Math.random() % 2 === 0
+										? '/Icons/eight-ball.svg'
+										: '/Icons/circus-tent.svg'
+								}
 								alt="alert-rules"
 								className="alert-rules-img"
 							/>

frontend/src/container/Home/Dashboards/Dashboards.tsx

@@ -11,10 +11,6 @@ import { useAppContext } from 'providers/App/App';
 import { Dashboard } from 'types/api/dashboard/getAll';
 import { USER_ROLES } from 'types/roles';
 
-import dialsUrl from '@/assets/Icons/dials.svg';
-
-import { getItemIcon } from '../constants';
-
 export default function Dashboards({
 	onUpdateChecklistDoneItem,
 	loadingUserPreferences,
@@ -56,7 +52,11 @@ export default function Dashboards({
 		<div className="empty-state-container">
 			<div className="empty-state-content-container">
 				<div className="empty-state-content">
-					<img src={dialsUrl} alt="empty-alert-icon" className="empty-state-icon" />
+					<img
+						src="/Icons/dials.svg"
+						alt="empty-alert-icon"
+						className="empty-state-icon"
+					/>
 
 					<div className="empty-title">You don’t have any dashboards yet.</div>
 
@@ -135,7 +135,11 @@ export default function Dashboards({
 						>
 							<div className="dashboard-item-name-container home-data-item-name-container">
 								<img
-									src={getItemIcon(dashboard.id)}
+									src={
+										Math.random() % 2 === 0
+											? '/Icons/eight-ball.svg'
+											: '/Icons/circus-tent.svg'
+									}
 									alt="alert-rules"
 									className="alert-rules-img"
 								/>

frontend/src/container/Home/DataSourceInfo/DataSourceInfo.tsx

@@ -10,10 +10,6 @@ import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
 import { LicensePlatform } from 'types/api/licensesV3/getActive';
 
-import containerPlusUrl from '@/assets/Icons/container-plus.svg';
-import helloWaveUrl from '@/assets/Icons/hello-wave.svg';
-import hurrayUrl from '@/assets/Icons/hurray.svg';
-
 import { DOCS_LINKS } from '../constants';
 
 function DataSourceInfo({
@@ -72,7 +68,7 @@ function DataSourceInfo({
 					<div className="workspace-ready-container">
 						<div className="workspace-ready-header">
 							<span className="workspace-ready-title">
-								<img src={hurrayUrl} alt="hurray" />
+								<img src="/Icons/hurray.svg" alt="hurray" />
 								Your workspace is ready
 							</span>
 
@@ -81,7 +77,7 @@ function DataSourceInfo({
 								color="primary"
 								size="sm"
 								className="periscope-btn primary"
-								prefixIcon={<img src={containerPlusUrl} alt="plus" />}
+								prefixIcon={<img src="/Icons/container-plus.svg" alt="plus" />}
 								onClick={handleConnect}
 								role="button"
 								tabIndex={0}
@@ -139,7 +135,7 @@ function DataSourceInfo({
 			<div className="hello-wave-container">
 				<div className="hello-wave-img-container">
 					<img
-						src={helloWaveUrl}
+						src="/Icons/hello-wave.svg"
 						alt="hello-wave"
 						className="hello-wave-img"
 						width={36}

frontend/src/container/Home/Home.tsx

@@ -33,15 +33,6 @@ import { isIngestionActive } from 'utils/app';
 import { isModifierKeyPressed } from 'utils/app';
 import { popupContainer } from 'utils/selectPopupContainer';
 
-import crackerUrl from '@/assets/Icons/cracker.svg';
-import dashboardUrl from '@/assets/Icons/dashboard.svg';
-import spinnerHalfBlueUrl from '@/assets/Icons/spinner-half-blue.svg';
-import wrenchUrl from '@/assets/Icons/wrench.svg';
-import allInOneUrl from '@/assets/Images/allInOne.svg';
-import allInOneLightModeUrl from '@/assets/Images/allInOneLightMode.svg';
-import dottedDividerUrl from '@/assets/Images/dotted-divider.svg';
-import perilianBackgroundUrl from '@/assets/Images/perilianBackground.svg';
-
 import AlertRules from './AlertRules/AlertRules';
 import { defaultChecklistItemsState } from './constants';
 import Dashboards from './Dashboards/Dashboards';
@@ -322,7 +313,7 @@ export default function Home(): JSX.Element {
 										className="periscope-btn secondary welcome-checklist-btn"
 									>
 										<img
-											src={spinnerHalfBlueUrl}
+											src="/Icons/spinner-half-blue.svg"
 											alt="spinner-half-blue"
 											width={16}
 											height={16}
@@ -349,7 +340,7 @@ export default function Home(): JSX.Element {
 					/>
 
 					<div className="divider">
-						<img src={dottedDividerUrl} alt="divider" />
+						<img src="/Images/dotted-divider.svg" alt="divider" />
 					</div>
 
 					<div className="active-ingestions-container">
@@ -492,7 +483,7 @@ export default function Home(): JSX.Element {
 										<div className="section-content">
 											<div className="section-icon">
 												<img
-													src={wrenchUrl}
+													src="/Icons/wrench.svg"
 													alt="wrench"
 													width={16}
 													height={16}
@@ -567,7 +558,12 @@ export default function Home(): JSX.Element {
 									<div className="section-container">
 										<div className="section-content">
 											<div className="section-icon">
-												<img src={dashboardUrl} alt="dashboard" width={16} height={16} />
+												<img
+													src="/Icons/dashboard.svg"
+													alt="dashboard"
+													width={16}
+													height={16}
+												/>
 											</div>
 
 											<div className="section-title">
@@ -606,7 +602,7 @@ export default function Home(): JSX.Element {
 										<div className="section-content">
 											<div className="section-icon">
 												<img
-													src={crackerUrl}
+													src="/Icons/cracker.svg"
 													alt="cracker"
 													width={16}
 													height={16}
@@ -685,7 +681,7 @@ export default function Home(): JSX.Element {
 											<div className="checklist-container-right-img">
 												<div className="checklist-img-bg-container">
 													<img
-														src={perilianBackgroundUrl}
+														src="/Images/perilianBackground.svg"
 														alt="not-found"
 														className="checklist-img-bg"
 													/>
@@ -693,7 +689,11 @@ export default function Home(): JSX.Element {
 
 												<div className="checklist-img-container">
 													<img
-														src={isDarkMode ? allInOneUrl : allInOneLightModeUrl}
+														src={
+															isDarkMode
+																? '/Images/allInOne.svg'
+																: '/Images/allInOneLightMode.svg'
+														}
 														alt="checklist-img"
 														className="checklist-img"
 													/>

frontend/src/container/Home/SavedViews/SavedViews.tsx

@@ -20,11 +20,6 @@ import { ViewProps } from 'types/api/saveViews/types';
 import { DataSource } from 'types/common/queryBuilder';
 import { USER_ROLES } from 'types/roles';
 
-import floppyDiscUrl from '@/assets/Icons/floppy-disc.svg';
-import logsUrl from '@/assets/Icons/logs.svg';
-
-import { getItemIcon } from '../constants';
-
 export default function SavedViews({
 	onUpdateChecklistDoneItem,
 	loadingUserPreferences,
@@ -156,7 +151,7 @@ export default function SavedViews({
 			<div className="empty-state-content-container">
 				<div className="empty-state-content">
 					<img
-						src={floppyDiscUrl}
+						src="/Icons/floppy-disc.svg"
 						alt="empty-alert-icon"
 						className="empty-state-icon"
 					/>
@@ -229,7 +224,9 @@ export default function SavedViews({
 					>
 						<div className="saved-view-item-name-container home-data-item-name-container">
 							<img
-								src={getItemIcon(String(view.id))}
+								src={
+									view.id % 2 === 0 ? '/Icons/eight-ball.svg' : '/Icons/circus-tent.svg'
+								}
 								alt="alert-rules"
 								className="alert-rules-img"
 							/>
@@ -348,7 +345,7 @@ export default function SavedViews({
 									className={selectedEntity === 'logs' ? 'selected tab' : 'tab'}
 									onClick={(): void => handleTabChange('logs')}
 								>
-									<img src={logsUrl} alt="logs-icon" className="logs-icon" />
+									<img src="/Icons/logs.svg" alt="logs-icon" className="logs-icon" />
 									Logs
 								</Button>
 								<Button

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

@@ -32,8 +32,6 @@ import { Tags } from 'types/reducer/trace';
 import { USER_ROLES } from 'types/roles';
 import { isModifierKeyPressed } from 'utils/app';
 
-import triangleRulerUrl from '@/assets/Icons/triangle-ruler.svg';
-
 import { FeatureKeys } from '../../../constants/features';
 import { DOCS_LINKS } from '../constants';
 import { columns, TIME_PICKER_OPTIONS } from './constants';
@@ -53,7 +51,7 @@ const EmptyState = memo(
 			<div className="empty-state-content-container">
 				<div className="empty-state-content">
 					<img
-						src={triangleRulerUrl}
+						src="/Icons/triangle-ruler.svg"
 						alt="empty-alert-icon"
 						className="empty-state-icon"
 					/>

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

@@ -18,8 +18,6 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import { USER_ROLES } from 'types/roles';
 import { isModifierKeyPressed } from 'utils/app';
 
-import triangleRulerUrl from '@/assets/Icons/triangle-ruler.svg';
-
 import { DOCS_LINKS } from '../constants';
 import { columns, TIME_PICKER_OPTIONS } from './constants';
 
@@ -105,7 +103,7 @@ export default function ServiceTraces({
 				<div className="empty-state-content-container">
 					<div className="empty-state-content">
 						<img
-							src={triangleRulerUrl}
+							src="/Icons/triangle-ruler.svg"
 							alt="empty-alert-icon"
 							className="empty-state-icon"
 						/>

frontend/src/container/Home/constants.ts

@@ -1,20 +1,8 @@
 import { ORG_PREFERENCES } from 'constants/orgPreferences';
 import ROUTES from 'constants/routes';
 
-import circusTentUrl from '@/assets/Icons/circus-tent.svg';
-import eightBallUrl from '@/assets/Icons/eight-ball.svg';
-
 import { ChecklistItem } from './HomeChecklist/HomeChecklist';
 
-const ITEM_ICONS = [circusTentUrl, eightBallUrl];
-
-export function getItemIcon(id: string): string {
-	if (!id) {
-		return ITEM_ICONS[0];
-	}
-	return ITEM_ICONS[id.charCodeAt(id.length - 1) % ITEM_ICONS.length];
-}
-
 export const checkListStepToPreferenceKeyMap = {
 	WILL_DO_LATER: ORG_PREFERENCES.WELCOME_CHECKLIST_DO_LATER,
 	SEND_LOGS: ORG_PREFERENCES.WELCOME_CHECKLIST_SEND_LOGS_SKIPPED,

frontend/src/container/HostMetricsLoading/HostMetricsLoading.tsx

@@ -2,8 +2,6 @@ import { useTranslation } from 'react-i18next';
 import { Typography } from 'antd';
 import { DataSource } from 'types/common/queryBuilder';
 
-import loadingPlaneUrl from '@/assets/Icons/loading-plane.gif';
-
 import './HostMetricsLoading.styles.scss';
 
 export function HostMetricsLoading(): JSX.Element {
@@ -11,7 +9,11 @@ export function HostMetricsLoading(): JSX.Element {
 	return (
 		<div className="loading-host-metrics">
 			<div className="loading-host-metrics-content">
-				<img className="loading-gif" src={loadingPlaneUrl} alt="wait-icon" />
+				<img
+					className="loading-gif"
+					src="/Icons/loading-plane.gif"
+					alt="wait-icon"
+				/>
 
 				<Typography>
 					{t('pending_data_placeholder', {

frontend/src/container/InfraMonitoringHosts/HostsEmptyOrIncorrectMetrics.tsx

@@ -1,7 +1,5 @@
 import { Typography } from 'antd';
 
-import eyesEmojiUrl from '@/assets/Images/eyesEmoji.svg';
-
 export default function HostsEmptyOrIncorrectMetrics({
 	noData,
 	incorrectData,
@@ -12,7 +10,7 @@ export default function HostsEmptyOrIncorrectMetrics({
 	return (
 		<div className="hosts-empty-state-container">
 			<div className="hosts-empty-state-container-content">
-				<img className="eyes-emoji" src={eyesEmojiUrl} alt="eyes emoji" />
+				<img className="eyes-emoji" src="/Images/eyesEmoji.svg" alt="eyes emoji" />
 
 				{noData && (
 					<div className="no-hosts-message">

frontend/src/container/InfraMonitoringHosts/HostsListTable.tsx

@@ -15,9 +15,6 @@ import { InfraMonitoringEvents } from 'constants/events';
 import { isModifierKeyPressed } from 'utils/app';
 import { openInNewTab } from 'utils/navigation';
 
-import emptyStateUrl from '@/assets/Icons/emptyState.svg';
-import eyesEmojiUrl from '@/assets/Images/eyesEmoji.svg';
-
 import HostsEmptyOrIncorrectMetrics from './HostsEmptyOrIncorrectMetrics';
 import {
 	EmptyOrLoadingViewProps,
@@ -77,7 +74,7 @@ function EmptyOrLoadingView(
 		return (
 			<div className="hosts-empty-state-container">
 				<div className="hosts-empty-state-container-content">
-					<img className="eyes-emoji" src={eyesEmojiUrl} alt="eyes emoji" />
+					<img className="eyes-emoji" src="/Images/eyesEmoji.svg" alt="eyes emoji" />
 					<div className="no-hosts-message">
 						<Typography.Title level={5} className="no-hosts-message-title">
 							Queried time range is before earliest host metrics
@@ -96,7 +93,7 @@ function EmptyOrLoadingView(
 			<div className="no-filtered-hosts-message-container">
 				<div className="no-filtered-hosts-message-content">
 					<img
-						src={emptyStateUrl}
+						src="/Icons/emptyState.svg"
 						alt="thinking-emoji"
 						className="empty-state-svg"
 					/>

frontend/src/container/InfraMonitoringK8s/Clusters/K8sClustersList.tsx

@@ -26,8 +26,6 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import { buildAbsolutePath, isModifierKeyPressed } from 'utils/app';
 import { openInNewTab } from 'utils/navigation';
 
-import emptyStateUrl from '@/assets/Icons/emptyState.svg';
-
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
 import {
@@ -657,7 +655,7 @@ function K8sClustersList({
 						<div className="no-filtered-hosts-message-container">
 							<div className="no-filtered-hosts-message-content">
 								<img
-									src={emptyStateUrl}
+									src="/Icons/emptyState.svg"
 									alt="thinking-emoji"
 									className="empty-state-svg"
 								/>

frontend/src/container/InfraMonitoringK8s/DaemonSets/K8sDaemonSetsList.tsx

@@ -27,8 +27,6 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import { buildAbsolutePath, isModifierKeyPressed } from 'utils/app';
 import { openInNewTab } from 'utils/navigation';
 
-import emptyStateUrl from '@/assets/Icons/emptyState.svg';
-
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
 import {
@@ -679,7 +677,7 @@ function K8sDaemonSetsList({
 						<div className="no-filtered-hosts-message-container">
 							<div className="no-filtered-hosts-message-content">
 								<img
-									src={emptyStateUrl}
+									src="/Icons/emptyState.svg"
 									alt="thinking-emoji"
 									className="empty-state-svg"
 								/>

frontend/src/container/InfraMonitoringK8s/Deployments/K8sDeploymentsList.tsx

@@ -29,8 +29,6 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import { buildAbsolutePath, isModifierKeyPressed } from 'utils/app';
 import { openInNewTab } from 'utils/navigation';
 
-import emptyStateUrl from '@/assets/Icons/emptyState.svg';
-
 import {
 	GetK8sEntityToAggregateAttribute,
 	INFRA_MONITORING_K8S_PARAMS_KEYS,
@@ -686,7 +684,7 @@ function K8sDeploymentsList({
 						<div className="no-filtered-hosts-message-container">
 							<div className="no-filtered-hosts-message-content">
 								<img
-									src={emptyStateUrl}
+									src="/Icons/emptyState.svg"
 									alt="thinking-emoji"
 									className="empty-state-svg"
 								/>

frontend/src/container/InfraMonitoringK8s/Jobs/K8sJobsList.tsx

@@ -29,8 +29,6 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import { buildAbsolutePath, isModifierKeyPressed } from 'utils/app';
 import { openInNewTab } from 'utils/navigation';
 
-import emptyStateUrl from '@/assets/Icons/emptyState.svg';
-
 import {
 	GetK8sEntityToAggregateAttribute,
 	INFRA_MONITORING_K8S_PARAMS_KEYS,
@@ -647,7 +645,7 @@ function K8sJobsList({
 							<div className="no-filtered-hosts-message-container">
 								<div className="no-filtered-hosts-message-content">
 									<img
-										src={emptyStateUrl}
+										src="/Icons/emptyState.svg"
 										alt="thinking-emoji"
 										className="empty-state-svg"
 									/>

frontend/src/container/InfraMonitoringK8s/K8sEmptyOrIncorrectMetrics.tsx

@@ -1,7 +1,5 @@
 import { Typography } from 'antd';
 
-import eyesEmojiUrl from '@/assets/Images/eyesEmoji.svg';
-
 export default function HostsEmptyOrIncorrectMetrics({
 	noData,
 	incorrectData,
@@ -12,7 +10,7 @@ export default function HostsEmptyOrIncorrectMetrics({
 	return (
 		<div className="hosts-empty-state-container">
 			<div className="hosts-empty-state-container-content">
-				<img className="eyes-emoji" src={eyesEmojiUrl} alt="eyes emoji" />
+				<img className="eyes-emoji" src="/Images/eyesEmoji.svg" alt="eyes emoji" />
 
 				{noData && (
 					<div className="no-hosts-message">

frontend/src/container/InfraMonitoringK8s/Namespaces/K8sNamespacesList.tsx

@@ -28,8 +28,6 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import { buildAbsolutePath, isModifierKeyPressed } from 'utils/app';
 import { openInNewTab } from 'utils/navigation';
 
-import emptyStateUrl from '@/assets/Icons/emptyState.svg';
-
 import {
 	GetK8sEntityToAggregateAttribute,
 	INFRA_MONITORING_K8S_PARAMS_KEYS,
@@ -681,7 +679,7 @@ function K8sNamespacesList({
 						<div className="no-filtered-hosts-message-container">
 							<div className="no-filtered-hosts-message-content">
 								<img
-									src={emptyStateUrl}
+									src="/Icons/emptyState.svg"
 									alt="thinking-emoji"
 									className="empty-state-svg"
 								/>

frontend/src/container/InfraMonitoringK8s/Nodes/K8sNodesList.tsx

@@ -28,8 +28,6 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import { buildAbsolutePath, isModifierKeyPressed } from 'utils/app';
 import { openInNewTab } from 'utils/navigation';
 
-import emptyStateUrl from '@/assets/Icons/emptyState.svg';
-
 import {
 	GetK8sEntityToAggregateAttribute,
 	INFRA_MONITORING_K8S_PARAMS_KEYS,
@@ -659,7 +657,7 @@ function K8sNodesList({
 						<div className="no-filtered-hosts-message-container">
 							<div className="no-filtered-hosts-message-content">
 								<img
-									src={emptyStateUrl}
+									src="/Icons/emptyState.svg"
 									alt="thinking-emoji"
 									className="empty-state-svg"
 								/>

frontend/src/container/InfraMonitoringK8s/Pods/K8sPodLists.tsx

@@ -31,8 +31,6 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import { buildAbsolutePath, isModifierKeyPressed } from 'utils/app';
 import { openInNewTab } from 'utils/navigation';
 
-import emptyStateUrl from '@/assets/Icons/emptyState.svg';
-
 import {
 	GetK8sEntityToAggregateAttribute,
 	INFRA_MONITORING_K8S_PARAMS_KEYS,
@@ -714,7 +712,7 @@ function K8sPodsList({
 						<div className="no-filtered-hosts-message-container">
 							<div className="no-filtered-hosts-message-content">
 								<img
-									src={emptyStateUrl}
+									src="/Icons/emptyState.svg"
 									alt="thinking-emoji"
 									className="empty-state-svg"
 								/>

frontend/src/container/InfraMonitoringK8s/StatefulSets/K8sStatefulSetsList.tsx

@@ -29,8 +29,6 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import { buildAbsolutePath, isModifierKeyPressed } from 'utils/app';
 import { openInNewTab } from 'utils/navigation';
 
-import emptyStateUrl from '@/assets/Icons/emptyState.svg';
-
 import {
 	GetK8sEntityToAggregateAttribute,
 	INFRA_MONITORING_K8S_PARAMS_KEYS,
@@ -683,7 +681,7 @@ function K8sStatefulSetsList({
 						<div className="no-filtered-hosts-message-container">
 							<div className="no-filtered-hosts-message-content">
 								<img
-									src={emptyStateUrl}
+									src="/Icons/emptyState.svg"
 									alt="thinking-emoji"
 									className="empty-state-svg"
 								/>

frontend/src/container/InfraMonitoringK8s/Volumes/K8sVolumesList.tsx

@@ -29,8 +29,6 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import { buildAbsolutePath, isModifierKeyPressed } from 'utils/app';
 import { openInNewTab } from 'utils/navigation';
 
-import emptyStateUrl from '@/assets/Icons/emptyState.svg';
-
 import {
 	GetK8sEntityToAggregateAttribute,
 	INFRA_MONITORING_K8S_PARAMS_KEYS,
@@ -638,7 +636,7 @@ function K8sVolumesList({
 						<div className="no-filtered-hosts-message-container">
 							<div className="no-filtered-hosts-message-content">
 								<img
-									src={emptyStateUrl}
+									src="/Icons/emptyState.svg"
 									alt="thinking-emoji"
 									className="empty-state-svg"
 								/>

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

@@ -1,8 +1,10 @@
 .hero-section {
-	height: 308px;
-	padding: 26px 16px;
+	padding: 16px;
+
 	display: flex;
-	gap: 24px;
+	flex-direction: column;
+	gap: 16px;
+
 	position: relative;
 	overflow: hidden;
 	background-position: right;
@@ -10,35 +12,37 @@
 	background-repeat: no-repeat;
 	border-bottom: 1px solid var(--bg-slate-500);
 
-	&__icon {
-		height: fit-content;
-		background-color: var(--bg-ink-400);
-		padding: 12px;
-		border: 1px solid var(--bg-ink-300);
-		border-radius: 6px;
-		width: 60px;
-		height: 60px;
-		display: flex;
-		align-items: center;
-		img {
-			width: 100%;
-		}
-	}
-
 	&__details {
 		display: flex;
 		flex-direction: column;
 		gap: 12px;
 
-		.title {
-			color: var(--bg-vanilla-100);
-			font-size: 24px;
-			font-weight: 500;
-			line-height: 20px;
-			letter-spacing: -0.12px;
+		&-header {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			gap: 16px;
+
+			&__icon {
+				height: fit-content;
+				background-color: var(--bg-ink-400);
+				padding: 12px;
+				border: 1px solid var(--bg-ink-300);
+				border-radius: 6px;
+				width: 60px;
+				height: 60px;
+			}
+
+			&__title {
+				color: var(--bg-vanilla-100);
+				font-size: 24px;
+				font-weight: 500;
+				line-height: 20px;
+				letter-spacing: -0.12px;
+			}
 		}
 
-		.description {
+		&__description {
 			color: var(--bg-vanilla-400);
 			font-size: 12px;
 			font-weight: 400;

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

@@ -0,0 +1,26 @@
+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="/Logos/aws-dark.svg" 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/AccountActions.style.scss

@@ -4,14 +4,57 @@
 
 		&-with-account {
 			display: flex;
-			flex-direction: column;
-			gap: 10px;
+			flex-direction: row;
+			align-items: center;
+			justify-content: space-between;
+			flex-wrap: wrap;
+			gap: 16px;
+
+			border-radius: 4px;
+			border: 1px solid var(--l3-background);
+			background: var(--l1-background);
+
+			.selected-cloud-integration-account-status {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				border-right: 1px solid var(--l3-background);
+				border-radius: none;
+				width: 32px;
+			}
+
+			&-selector-container {
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+
+				.account-selector-label {
+					color: var(--bg-vanilla-400);
+					font-size: 12px;
+					font-weight: 400;
+					line-height: 16px;
+					padding: 8px 16px;
+				}
+
+				.account-selector {
+					.ant-select {
+						background-color: transparent !important;
+						border: none !important;
+						box-shadow: none !important;
+
+						.ant-select-selector {
+							background: transparent !important;
+							border: none !important;
+							box-shadow: none !important;
+						}
+					}
+				}
+			}
 		}
 	}
 
 	&__input-skeleton {
 		width: 300px;
-		margin-bottom: 16px;
 	}
 
 	&__new-account-button-skeleton {
@@ -22,11 +65,13 @@
 	&__account-settings-button-skeleton {
 		width: 140px;
 	}
+
 	&__action-buttons {
 		display: flex;
 		align-items: center;
 		gap: 8px;
 	}
+
 	&__action-button {
 		font-family: 'Inter';
 		border-radius: 2px;
@@ -54,44 +99,6 @@
 	}
 }
 
-.cloud-account-selector {
-	border-radius: 2px;
-	border: 1px solid var(--bg-ink-300);
-	background: linear-gradient(
-		139deg,
-		rgba(18, 19, 23, 0.8) 0%,
-		rgba(18, 19, 23, 0.9) 98.68%
-	);
-	box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-	-webkit-backdrop-filter: blur(20px);
-	backdrop-filter: blur(20px);
-	.ant-select-selector {
-		border-color: var(--bg-slate-400) !important;
-		background: var(--bg-ink-300) !important;
-		padding: 6px 8px !important;
-	}
-	.ant-select-selection-item {
-		color: var(--bg-vanilla-400);
-		font-size: 12px;
-		font-weight: 400;
-		line-height: 16px;
-	}
-
-	.account-option-item {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		&__selected {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			height: 14px;
-			width: 14px;
-			background-color: rgba(192, 193, 195, 0.2); /* #C0C1C3 with 0.2 opacity */
-			border-radius: 2px;
-		}
-	}
-}
 .lightMode {
 	.hero-section__action-button {
 		&.primary {

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

@@ -1,58 +1,23 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom-v5-compat';
+import { Button } from '@signozhq/button';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Select, Skeleton } from 'antd';
-import type { SelectProps } from 'antd/lib';
+import { Select, Skeleton } from 'antd';
+import { SelectProps } from 'antd/lib';
 import logEvent from 'api/common/logEvent';
-import { useAwsAccounts } from 'hooks/integration/aws/useAwsAccounts';
+import { useListAccounts } from 'api/generated/services/cloudintegration';
+import { getAccountById } from 'container/Integrations/CloudIntegration/utils';
+import { INTEGRATION_TYPES } from 'container/Integrations/constants';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { Check, ChevronDown } from 'lucide-react';
+import { ChevronDown, Dot, PencilLine, Plug, Plus } from 'lucide-react';
 
-import { CloudAccount } from '../../ServicesSection/types';
+import { mapAccountDtoToAwsCloudAccount } from '../../mapAwsCloudAccountFromDto';
+import { CloudAccount } from '../../types';
 import AccountSettingsModal from './AccountSettingsModal';
 import CloudAccountSetupModal from './CloudAccountSetupModal';
 
 import './AccountActions.style.scss';
 
-interface AccountOptionItemProps {
-	label: React.ReactNode;
-	isSelected: boolean;
-}
-
-function AccountOptionItem({
-	label,
-	isSelected,
-}: AccountOptionItemProps): JSX.Element {
-	return (
-		<div className="account-option-item">
-			{label}
-			{isSelected && (
-				<div className="account-option-item__selected">
-					<Check size={12} color={Color.BG_VANILLA_100} />
-				</div>
-			)}
-		</div>
-	);
-}
-
-function renderOption(
-	option: any,
-	activeAccountId: string | undefined,
-): JSX.Element {
-	return (
-		<AccountOptionItem
-			label={option.label}
-			isSelected={option.value === activeAccountId}
-		/>
-	);
-}
-
-const getAccountById = (
-	accounts: CloudAccount[],
-	accountId: string,
-): CloudAccount | null =>
-	accounts.find((account) => account.cloud_account_id === accountId) || null;
-
 function AccountActionsRenderer({
 	accounts,
 	isLoading,
@@ -73,55 +38,51 @@ function AccountActionsRenderer({
 	if (isLoading) {
 		return (
 			<div className="hero-section__actions-with-account">
-				<Skeleton.Input
-					active
-					size="large"
-					block
-					className="hero-section__input-skeleton"
-				/>
-				<div className="hero-section__action-buttons">
-					<Skeleton.Button
-						active
-						size="large"
-						className="hero-section__new-account-button-skeleton"
-					/>
-					<Skeleton.Button
-						active
-						size="large"
-						className="hero-section__account-settings-button-skeleton"
-					/>
-				</div>
+				<Skeleton.Input active block className="hero-section__input-skeleton" />
 			</div>
 		);
 	}
+
 	if (accounts?.length) {
 		return (
 			<div className="hero-section__actions-with-account">
-				<Select
-					value={`Account: ${activeAccount?.cloud_account_id}`}
-					options={selectOptions}
-					rootClassName="cloud-account-selector"
-					placeholder="Select AWS Account"
-					suffixIcon={<ChevronDown size={16} color={Color.BG_VANILLA_400} />}
-					optionRender={(option): JSX.Element =>
-						renderOption(option, activeAccount?.cloud_account_id)
-					}
-					onChange={onAccountChange}
-				/>
+				<div className="hero-section__actions-with-account-selector-container">
+					<div className="selected-cloud-integration-account-status">
+						<Dot size={24} color={Color.BG_FOREST_500} />
+					</div>
+
+					<div className="account-selector-label">Account:</div>
+
+					<span className="account-selector">
+						<Select
+							value={activeAccount?.providerAccountId}
+							options={selectOptions}
+							rootClassName="cloud-account-selector"
+							placeholder="Select AWS Account"
+							suffixIcon={<ChevronDown size={16} color={Color.BG_VANILLA_400} />}
+							onChange={onAccountChange}
+						/>
+					</span>
+				</div>
 				<div className="hero-section__action-buttons">
 					<Button
-						type="primary"
-						className="hero-section__action-button primary"
-						onClick={onIntegrationModalOpen}
-					>
-						Add New AWS Account
-					</Button>
-					<Button
-						type="default"
-						className="hero-section__action-button secondary"
+						variant="link"
+						size="sm"
+						color="secondary"
+						prefixIcon={<PencilLine size={14} />}
 						onClick={onAccountSettingsModalOpen}
 					>
-						Account Settings
+						Edit Account
+					</Button>
+
+					<Button
+						variant="link"
+						size="sm"
+						color="secondary"
+						onClick={onIntegrationModalOpen}
+						prefixIcon={<Plus size={14} />}
+					>
+						Add New Account
 					</Button>
 				</div>
 			</div>
@@ -129,8 +90,11 @@ function AccountActionsRenderer({
 	}
 	return (
 		<Button
-			className="hero-section__action-button primary"
+			variant="solid"
+			color="primary"
+			prefixIcon={<Plug size={14} />}
 			onClick={onIntegrationModalOpen}
+			size="sm"
 		>
 			Integrate Now
 		</Button>
@@ -140,7 +104,18 @@ function AccountActionsRenderer({
 function AccountActions(): JSX.Element {
 	const urlQuery = useUrlQuery();
 	const navigate = useNavigate();
-	const { data: accounts, isLoading } = useAwsAccounts();
+	const { data: listAccountsResponse, isLoading } = useListAccounts({
+		cloudProvider: INTEGRATION_TYPES.AWS,
+	});
+	const accounts = useMemo((): CloudAccount[] | undefined => {
+		const raw = listAccountsResponse?.data?.accounts;
+		if (!raw) {
+			return undefined;
+		}
+		return raw
+			.map(mapAccountDtoToAwsCloudAccount)
+			.filter((account): account is CloudAccount => account !== null);
+	}, [listAccountsResponse]);
 
 	const initialAccount = useMemo(
 		() =>
@@ -162,7 +137,13 @@ function AccountActions(): JSX.Element {
 			const latestUrlQuery = new URLSearchParams(window.location.search);
 			latestUrlQuery.set('cloudAccountId', initialAccount.cloud_account_id);
 			navigate({ search: latestUrlQuery.toString() });
+			return;
 		}
+
+		setActiveAccount(null);
+		const latestUrlQuery = new URLSearchParams(window.location.search);
+		latestUrlQuery.delete('cloudAccountId');
+		navigate({ search: latestUrlQuery.toString() });
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [initialAccount]);
 
@@ -198,7 +179,7 @@ function AccountActions(): JSX.Element {
 			accounts?.length
 				? accounts.map((account) => ({
 						value: account.cloud_account_id,
-						label: account.cloud_account_id,
+						label: account.providerAccountId,
 				  }))
 				: [],
 		[accounts],
@@ -228,10 +209,10 @@ function AccountActions(): JSX.Element {
 				/>
 			)}
 
-			{isAccountSettingsModalOpen && (
+			{isAccountSettingsModalOpen && activeAccount && (
 				<AccountSettingsModal
 					onClose={(): void => setIsAccountSettingsModalOpen(false)}
-					account={activeAccount as CloudAccount}
+					account={activeAccount}
 					setActiveAccount={setActiveAccount}
 				/>
 			)}

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

@@ -14,8 +14,13 @@
 		border-radius: 3px;
 		border: 1px solid var(--bg-slate-500);
 		padding: 14px;
+
 		&-account-info {
 			&-connected-account-details {
+				display: flex;
+				flex-direction: column;
+				gap: 8px;
+
 				&-title {
 					color: var(--bg-vanilla-100);
 					font-size: 14px;
@@ -38,40 +43,36 @@
 				}
 			}
 		}
-		&-regions-switch {
+
+		&-region-selector {
 			display: flex;
 			flex-direction: column;
-			gap: 10px;
+			gap: 4px;
+
 			&-title {
-				color: var(--bg-vanilla-100);
+				color: var(--l1-foreground);
 				font-size: 14px;
 				font-weight: 500;
 				line-height: 20px;
 				letter-spacing: -0.07px;
 			}
-			&-switch {
-				display: flex;
-				align-items: center;
-				gap: 10px;
-				&-label {
-					color: var(--bg-vanilla-400);
-					background-color: transparent;
-					border: none;
-					font-family: Inter;
-					font-size: 12px;
-					font-weight: 400;
-					line-height: 18px;
-					letter-spacing: -0.005em;
-					cursor: pointer;
-				}
+
+			&-description {
+				color: var(--l2-foreground);
+				font-size: 12px;
+				line-height: 18px;
+				letter-spacing: -0.06px;
 			}
 		}
-		&-regions-select {
-			margin-top: 8px;
-		}
 	}
 
 	&__footer {
+		padding: 16px;
+		display: flex;
+		flex-direction: row;
+		gap: 10px;
+		justify-content: space-between;
+
 		&-close-button,
 		&-save-button {
 			color: var(--bg-vanilla-100);

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

@@ -0,0 +1,166 @@
+import { Dispatch, SetStateAction, useCallback } from 'react';
+import { useQueryClient } from 'react-query';
+import { Button } from '@signozhq/button';
+import { DrawerWrapper } from '@signozhq/drawer';
+import { Form } from 'antd';
+import { invalidateListAccounts } from 'api/generated/services/cloudintegration';
+import { INTEGRATION_TYPES } from 'container/Integrations/constants';
+import { useAccountSettingsModal } from 'hooks/integration/aws/useAccountSettingsModal';
+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 './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,
+		selectedRegions,
+		includeAllRegions,
+		isSaveDisabled,
+		setSelectedRegions,
+		setIncludeAllRegions,
+		handleSubmit,
+		handleClose,
+	} = useAccountSettingsModal({ onClose, account, setActiveAccount });
+
+	const queryClient = useQueryClient();
+	const urlQuery = useUrlQuery();
+
+	const handleRemoveIntegrationAccountSuccess = useCallback((): void => {
+		void invalidateListAccounts(queryClient, {
+			cloudProvider: INTEGRATION_TYPES.AWS,
+		});
+		urlQuery.delete('cloudAccountId');
+		setActiveAccount(null);
+		handleClose();
+		history.replace({ search: urlQuery.toString() });
+
+		logEvent('AWS Integration: Account removed', {
+			id: account?.id,
+			cloudAccountId: account?.cloud_account_id,
+		});
+	}, [
+		queryClient,
+		urlQuery,
+		setActiveAccount,
+		handleClose,
+		account?.id,
+		account?.cloud_account_id,
+	]);
+
+	const renderAccountDetails = useCallback(() => {
+		return (
+			<Form
+				form={form}
+				layout="vertical"
+				initialValues={{
+					selectedRegions,
+					includeAllRegions,
+				}}
+			>
+				<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">
+								AWS Account:{' '}
+								<span className="account-settings-modal__body-account-info-connected-account-details-account-id-account-id">
+									{account?.id}
+								</span>
+							</div>
+						</div>
+					</div>
+
+					<div className="account-settings-modal__body-region-selector">
+						<div className="account-settings-modal__body-region-selector-title">
+							Which regions do you want to monitor?
+						</div>
+						<div className="account-settings-modal__body-region-selector-description">
+							Choose only the regions you want SigNoz to monitor.
+						</div>
+
+						<RegionSelector
+							selectedRegions={selectedRegions}
+							setSelectedRegions={setSelectedRegions}
+							setIncludeAllRegions={setIncludeAllRegions}
+						/>
+					</div>
+				</div>
+
+				<div className="account-settings-modal__footer">
+					<RemoveIntegrationAccount
+						accountId={account?.id}
+						onRemoveIntegrationAccountSuccess={handleRemoveIntegrationAccountSuccess}
+					/>
+
+					<Button
+						variant="solid"
+						color="secondary"
+						disabled={isSaveDisabled}
+						onClick={handleSubmit}
+						loading={isLoading}
+						prefixIcon={<Save size={14} />}
+					>
+						Update Changes
+					</Button>
+				</div>
+			</Form>
+		);
+	}, [
+		form,
+		selectedRegions,
+		includeAllRegions,
+		account?.id,
+		handleRemoveIntegrationAccountSuccess,
+		isSaveDisabled,
+		handleSubmit,
+		isLoading,
+		setSelectedRegions,
+		setIncludeAllRegions,
+	]);
+
+	const handleDrawerOpenChange = useCallback(
+		(open: boolean): void => {
+			if (!open) {
+				handleClose();
+			}
+		},
+		[handleClose],
+	);
+
+	return (
+		<DrawerWrapper
+			open={true}
+			type="panel"
+			className="account-settings-modal"
+			header={{
+				title: 'Account Settings',
+			}}
+			direction="right"
+			showCloseButton
+			content={renderAccountDetails()}
+			onOpenChange={handleDrawerOpenChange}
+		/>
+	);
+}
+
+export default AccountSettingsModal;

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

@@ -1,4 +1,26 @@
 .cloud-account-setup-modal {
+	> div {
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+	}
+
+	&__content {
+		flex: 1;
+		overflow-y: auto;
+		min-height: 0;
+		scrollbar-width: thin;
+
+		&::-webkit-scrollbar {
+			width: 2px;
+		}
+	}
+
+	&__footer {
+		padding: 16px;
+		margin-bottom: 16px;
+	}
+
 	.account-setup-modal-footer {
 		&__confirm-button {
 			background: var(--bg-robin-500);
@@ -20,6 +42,8 @@
 	}
 
 	.cloud-account-setup-form {
+		padding: 16px;
+
 		.disabled {
 			opacity: 0.4;
 		}

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

@@ -1,8 +1,7 @@
 import { useCallback } from 'react';
-import { useQueryClient } from 'react-query';
+import { Button } from '@signozhq/button';
 import { Color } from '@signozhq/design-tokens';
-import SignozModal from 'components/SignozModal/SignozModal';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { DrawerWrapper } from '@signozhq/drawer';
 import { useIntegrationModal } from 'hooks/integration/aws/useIntegrationModal';
 import { SquareArrowOutUpRight } from 'lucide-react';
 
@@ -12,19 +11,15 @@ import {
 	ModalStateEnum,
 } from '../types';
 import { RegionForm } from './RegionForm';
-import { RegionSelector } from './RegionSelector';
-import { SuccessView } from './SuccessView';
 
 import './CloudAccountSetupModal.style.scss';
 
 function CloudAccountSetupModal({
 	onClose,
 }: IntegrationModalProps): JSX.Element {
-	const queryClient = useQueryClient();
 	const {
 		form,
 		modalState,
-		setModalState,
 		isLoading,
 		activeView,
 		selectedRegions,
@@ -32,97 +27,86 @@ function CloudAccountSetupModal({
 		isGeneratingUrl,
 		setSelectedRegions,
 		setIncludeAllRegions,
-		handleIncludeAllRegionsChange,
 		handleRegionSelect,
 		handleSubmit,
 		handleClose,
 		setActiveView,
-		allRegions,
 		accountId,
-		selectedDeploymentRegion,
 		handleRegionChange,
 		connectionParams,
 		isConnectionParamsLoading,
+		handleConnectionSuccess,
+		handleConnectionTimeout,
+		handleConnectionError,
 	} = useIntegrationModal({ onClose });
 
 	const renderContent = useCallback(() => {
-		if (modalState === ModalStateEnum.SUCCESS) {
-			return <SuccessView />;
-		}
-
-		if (activeView === ActiveViewEnum.SELECT_REGIONS) {
-			return (
-				<RegionSelector
+		return (
+			<div className="cloud-account-setup-modal__content">
+				<RegionForm
+					form={form}
+					modalState={modalState}
 					selectedRegions={selectedRegions}
+					includeAllRegions={includeAllRegions}
+					onRegionSelect={handleRegionSelect}
+					onSubmit={handleSubmit}
+					accountId={accountId}
+					handleRegionChange={handleRegionChange}
+					connectionParams={connectionParams}
+					isConnectionParamsLoading={isConnectionParamsLoading}
 					setSelectedRegions={setSelectedRegions}
 					setIncludeAllRegions={setIncludeAllRegions}
+					onConnectionSuccess={handleConnectionSuccess}
+					onConnectionTimeout={handleConnectionTimeout}
+					onConnectionError={handleConnectionError}
 				/>
-			);
-		}
 
-		return (
-			<RegionForm
-				form={form}
-				modalState={modalState}
-				setModalState={setModalState}
-				selectedRegions={selectedRegions}
-				includeAllRegions={includeAllRegions}
-				onIncludeAllRegionsChange={handleIncludeAllRegionsChange}
-				onRegionSelect={handleRegionSelect}
-				onSubmit={handleSubmit}
-				accountId={accountId}
-				selectedDeploymentRegion={selectedDeploymentRegion}
-				handleRegionChange={handleRegionChange}
-				connectionParams={connectionParams}
-				isConnectionParamsLoading={isConnectionParamsLoading}
-			/>
+				<div className="cloud-account-setup-modal__footer">
+					<Button
+						variant="solid"
+						color="primary"
+						prefixIcon={
+							<SquareArrowOutUpRight size={17} color={Color.BG_VANILLA_100} />
+						}
+						onClick={handleSubmit}
+						disabled={
+							selectedRegions.length === 0 ||
+							isLoading ||
+							isGeneratingUrl ||
+							modalState === ModalStateEnum.WAITING
+						}
+					>
+						Launch Cloud Formation Template
+					</Button>
+				</div>
+			</div>
 		);
 	}, [
 		modalState,
-		activeView,
 		form,
-		setModalState,
 		selectedRegions,
 		includeAllRegions,
-		handleIncludeAllRegionsChange,
 		handleRegionSelect,
 		handleSubmit,
 		accountId,
-		selectedDeploymentRegion,
 		handleRegionChange,
 		connectionParams,
 		isConnectionParamsLoading,
 		setSelectedRegions,
 		setIncludeAllRegions,
+		isLoading,
+		isGeneratingUrl,
+		handleConnectionSuccess,
+		handleConnectionTimeout,
+		handleConnectionError,
 	]);
 
 	const getSelectedRegionsCount = useCallback(
-		(): number =>
-			selectedRegions.includes('all') ? allRegions.length : selectedRegions.length,
-		[selectedRegions, allRegions],
+		(): number => selectedRegions.length,
+		[selectedRegions],
 	);
 
 	const getModalConfig = useCallback(() => {
-		// Handle success state first
-		if (modalState === ModalStateEnum.SUCCESS) {
-			return {
-				title: 'AWS Integration',
-				okText: (
-					<div className="cloud-account-setup-success-view__footer-button">
-						Continue
-					</div>
-				),
-				block: true,
-				onOk: (): void => {
-					queryClient.invalidateQueries([REACT_QUERY_KEY.AWS_ACCOUNTS]);
-					handleClose();
-				},
-				cancelButtonProps: { style: { display: 'none' } },
-				disabled: false,
-			};
-		}
-
-		// Handle other views
 		const viewConfigs = {
 			[ActiveViewEnum.FORM]: {
 				title: 'Add AWS Account',
@@ -155,35 +139,31 @@ function CloudAccountSetupModal({
 		isLoading,
 		isGeneratingUrl,
 		activeView,
-		handleClose,
 		setActiveView,
-		queryClient,
 	]);
 
 	const modalConfig = getModalConfig();
 
+	const handleDrawerOpenChange = (open: boolean): void => {
+		if (!open) {
+			handleClose();
+		}
+	};
+
 	return (
-		<SignozModal
-			open
+		<DrawerWrapper
+			open={true}
+			type="panel"
 			className="cloud-account-setup-modal"
-			title={modalConfig.title}
-			onCancel={handleClose}
-			onOk={modalConfig.onOk}
-			okText={modalConfig.okText}
-			okButtonProps={{
-				loading: isLoading,
-				disabled: selectedRegions.length === 0 || modalConfig.disabled,
-				className:
-					activeView === ActiveViewEnum.FORM
-						? 'cloud-account-setup-form__submit-button'
-						: 'account-setup-modal-footer__confirm-button',
-				block: activeView === ActiveViewEnum.FORM,
+			// allowOutsideClick={false}
+			content={renderContent()}
+			onOpenChange={handleDrawerOpenChange}
+			direction="right"
+			showCloseButton
+			header={{
+				title: modalConfig.title,
 			}}
-			cancelButtonProps={modalConfig.cancelButtonProps}
-			width={672}
-		>
-			{renderContent()}
-		</SignozModal>
+		/>
 	);
 }
 

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

@@ -1,17 +1,19 @@
+import { Dispatch, SetStateAction } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Form, Select, Switch } from 'antd';
+import { Form, Select } from 'antd';
 import { ChevronDown } from 'lucide-react';
 import { Region } from 'utils/regions';
+import { popupContainer } from 'utils/selectPopupContainer';
+
+import { RegionSelector } from './RegionSelector';
 
 // Form section components
 function RegionDeploymentSection({
 	regions,
-	selectedDeploymentRegion,
 	handleRegionChange,
 	isFormDisabled,
 }: {
 	regions: Region[];
-	selectedDeploymentRegion: string | undefined;
 	handleRegionChange: (value: string) => void;
 	isFormDisabled: boolean;
 }): JSX.Element {
@@ -33,8 +35,8 @@ function RegionDeploymentSection({
 					suffixIcon={<ChevronDown size={16} color={Color.BG_VANILLA_400} />}
 					className="cloud-account-setup-form__select integrations-select"
 					onChange={handleRegionChange}
-					value={selectedDeploymentRegion}
 					disabled={isFormDisabled}
+					getPopupContainer={popupContainer}
 				>
 					{regions.flatMap((region) =>
 						region.subRegions.map((subRegion) => (
@@ -50,19 +52,13 @@ function RegionDeploymentSection({
 }
 
 function MonitoringRegionsSection({
-	includeAllRegions,
 	selectedRegions,
-	onIncludeAllRegionsChange,
-	getRegionPreviewText,
-	onRegionSelect,
-	isFormDisabled,
+	setSelectedRegions,
+	setIncludeAllRegions,
 }: {
-	includeAllRegions: boolean;
 	selectedRegions: string[];
-	onIncludeAllRegionsChange: (checked: boolean) => void;
-	getRegionPreviewText: (regions: string[]) => string[];
-	onRegionSelect: () => void;
-	isFormDisabled: boolean;
+	setSelectedRegions: Dispatch<SetStateAction<string[]>>;
+	setIncludeAllRegions: Dispatch<SetStateAction<boolean>>;
 }): JSX.Element {
 	return (
 		<div className="cloud-account-setup-form__form-group">
@@ -73,51 +69,12 @@ function MonitoringRegionsSection({
 				Choose only the regions you want SigNoz to monitor. You can enable all at
 				once, or pick specific ones:
 			</div>
-			<Form.Item
-				name="monitorRegions"
-				rules={[
-					{
-						validator: async (): Promise<void> => {
-							if (selectedRegions.length === 0) {
-								return Promise.reject();
-							}
-							return Promise.resolve();
-						},
-						message: 'Please select at least one region to monitor',
-					},
-				]}
-				className="cloud-account-setup-form__form-item"
-			>
-				<div className="cloud-account-setup-form__include-all-regions-switch">
-					<Switch
-						size="small"
-						checked={includeAllRegions}
-						onChange={onIncludeAllRegionsChange}
-						disabled={isFormDisabled}
-					/>
-					<button
-						className="cloud-account-setup-form__include-all-regions-switch-label"
-						type="button"
-						onClick={(): void =>
-							!isFormDisabled
-								? onIncludeAllRegionsChange(!includeAllRegions)
-								: undefined
-						}
-					>
-						Include all regions
-					</button>
-				</div>
-				<Select
-					suffixIcon={null}
-					placeholder="Select Region(s)"
-					className="cloud-account-setup-form__select integrations-select"
-					onClick={!isFormDisabled ? onRegionSelect : undefined}
-					mode="multiple"
-					maxTagCount={3}
-					value={getRegionPreviewText(selectedRegions)}
-					open={false}
-				/>
-			</Form.Item>
+
+			<RegionSelector
+				selectedRegions={selectedRegions}
+				setSelectedRegions={setSelectedRegions}
+				setIncludeAllRegions={setIncludeAllRegions}
+			/>
 		</div>
 	);
 }

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

@@ -0,0 +1,105 @@
+import { useRef } from 'react';
+import { Form } from 'antd';
+import { useGetAccount } from 'api/generated/services/cloudintegration';
+import cx from 'classnames';
+import { INTEGRATION_TYPES } from 'container/Integrations/constants';
+import { regions } from 'utils/regions';
+
+import { ModalStateEnum, RegionFormProps } from '../types';
+import AlertMessage from './AlertMessage';
+import {
+	ComplianceNote,
+	MonitoringRegionsSection,
+	RegionDeploymentSection,
+} from './IntegrateNowFormSections';
+import RenderConnectionFields from './RenderConnectionParams';
+
+export function RegionForm({
+	form,
+	modalState,
+	selectedRegions,
+	onSubmit,
+	accountId,
+	handleRegionChange,
+	connectionParams,
+	isConnectionParamsLoading,
+	setSelectedRegions,
+	setIncludeAllRegions,
+	onConnectionSuccess,
+	onConnectionTimeout,
+	onConnectionError,
+}: RegionFormProps): JSX.Element {
+	const startTimeRef = useRef(Date.now());
+	const refetchInterval = 10 * 1000;
+	const errorTimeout = 10 * 60 * 1000;
+
+	const { isLoading: isAccountStatusLoading } = useGetAccount(
+		{
+			cloudProvider: INTEGRATION_TYPES.AWS,
+			id: accountId ?? '',
+		},
+		{
+			query: {
+				refetchInterval,
+				enabled: !!accountId && modalState === ModalStateEnum.WAITING,
+				onSuccess: (response) => {
+					const isConnected =
+						Boolean(response.data.providerAccountId) &&
+						response.data.removedAt === null;
+
+					if (isConnected) {
+						const cloudAccountId =
+							response.data.providerAccountId ?? response.data.id;
+
+						onConnectionSuccess({
+							cloudAccountId,
+							status: response.data.agentReport,
+						});
+					} else if (Date.now() - startTimeRef.current >= errorTimeout) {
+						onConnectionTimeout({ id: accountId });
+					}
+				},
+				onError: () => {
+					onConnectionError();
+				},
+			},
+		},
+	);
+
+	const isFormDisabled =
+		modalState === ModalStateEnum.WAITING || isAccountStatusLoading;
+
+	return (
+		<Form
+			form={form}
+			className="cloud-account-setup-form"
+			layout="vertical"
+			onFinish={onSubmit}
+		>
+			<AlertMessage modalState={modalState} />
+
+			<div
+				className={cx(`cloud-account-setup-form__content`, {
+					disabled: isFormDisabled,
+				})}
+			>
+				<RegionDeploymentSection
+					regions={regions}
+					handleRegionChange={handleRegionChange}
+					isFormDisabled={isFormDisabled}
+				/>
+				<MonitoringRegionsSection
+					selectedRegions={selectedRegions}
+					setSelectedRegions={setSelectedRegions}
+					setIncludeAllRegions={setIncludeAllRegions}
+				/>
+				<ComplianceNote />
+				<RenderConnectionFields
+					isConnectionParamsLoading={isConnectionParamsLoading}
+					connectionParams={connectionParams}
+					isFormDisabled={isFormDisabled}
+				/>
+			</div>
+		</Form>
+	);
+}

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

@@ -1,5 +1,6 @@
 .select-all {
-	margin-bottom: 20px;
+	margin-top: 16px;
+	margin-bottom: 16px;
 }
 
 .regions-grid {
@@ -19,3 +20,11 @@
 	gap: 10px;
 	align-items: center;
 }
+
+.region-selector-footer {
+	margin-top: 36px;
+
+	display: flex;
+	justify-content: flex-end;
+	gap: 8px;
+}

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

@@ -28,10 +28,12 @@ export function RegionSelector({
 		<div className="region-selector">
 			<div className="select-all">
 				<Checkbox
-					checked={selectedRegions.includes('all')}
+					checked={
+						allRegionIds.length > 0 &&
+						allRegionIds.every((regionId) => selectedRegions.includes(regionId))
+					}
 					indeterminate={
-						selectedRegions.length > 20 &&
-						selectedRegions.length < allRegionIds.length
+						selectedRegions.length > 0 && selectedRegions.length < allRegionIds.length
 					}
 					onChange={(e): void => handleSelectAll(e.target.checked)}
 				>
@@ -46,10 +48,7 @@ export function RegionSelector({
 						{region.subRegions.map((subRegion) => (
 							<Checkbox
 								key={subRegion.id}
-								checked={
-									selectedRegions.includes('all') ||
-									selectedRegions.includes(subRegion.id)
-								}
+								checked={selectedRegions.includes(subRegion.id)}
 								onChange={(): void => handleRegionSelect(subRegion.id)}
 							>
 								{subRegion.name}