chore: addressed comments

frontend/.eslintignore

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

frontend/.eslintrc.cjs

@@ -1,3 +1,10 @@
+// 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
  */
@@ -32,6 +39,7 @@ module.exports = {
 		sourceType: 'module',
 	},
 	plugins: [
+		'rulesdir', // Local custom rules
 		'react', // React-specific rules
 		'@typescript-eslint', // TypeScript linting
 		'simple-import-sort', // Auto-sort imports
@@ -56,6 +64,9 @@ 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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,390 @@
+'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

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

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

@@ -0,0 +1,121 @@
+'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,9 +10,10 @@
     "preview": "vite preview",
     "prettify": "prettier --write .",
     "fmt": "prettier --check .",
-    "lint": "eslint ./src",
+    "lint": "eslint ./src && stylelint \"src/**/*.scss\"",
     "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",
@@ -229,6 +230,7 @@
     "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",
@@ -244,6 +246,7 @@
     "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",
@@ -251,6 +254,8 @@
     "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/src/assets/NotFound.tsx

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

frontend/src/components/AppLoading/AppLoading.tsx

@@ -3,6 +3,8 @@ 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 {
@@ -24,11 +26,7 @@ function AppLoading(): JSX.Element {
 			<div className="perilin-bg" />
 			<div className="app-loading-content">
 				<div className="brand">
-					<img
-						src="/Logos/signoz-brand-logo.svg"
-						alt="SigNoz"
-						className="brand-logo"
-					/>
+					<img src={signozBrandLogoUrl} 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', '/Logos/signoz-brand-logo.svg');
+		expect(logo).toHaveAttribute('src', 'test-file-stub');
 
 		// Check for brand title
 		const title = screen.getByText(SIGNOZ_TEXT);

frontend/src/components/AuthPageContainer/AuthHeader.tsx

@@ -2,6 +2,8 @@ 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 {
@@ -13,7 +15,7 @@ function AuthHeader(): JSX.Element {
 		<header className="auth-header">
 			<div className="auth-header-logo">
 				<img
-					src="/Logos/signoz-brand-logo.svg"
+					src={signozBrandLogoUrl}
 					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: '/uploads/feature1.webp',
+				url: 'assets/uploads/feature1.webp',
 				mime: 'image/webp',
 				alternativeText: null,
 			},

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

@@ -1,6 +1,9 @@
 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';
@@ -16,7 +19,7 @@ function Containers(): JSX.Element {
 				<div className="dev-status-container">
 					<div className="infra-container-card">
 						<img
-							src="/Icons/infraContainers.svg"
+							src={infraContainersUrl}
 							alt="infra-container"
 							width={32}
 							height={32}
@@ -29,7 +32,7 @@ function Containers(): JSX.Element {
 
 					<div className="infra-container-working-msg">
 						<Space>
-							<img src="/Icons/broom.svg" alt="broom" width={24} height={24} />
+							<img src={broomUrl} 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,6 +1,9 @@
 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';
@@ -16,7 +19,7 @@ function Processes(): JSX.Element {
 				<div className="dev-status-container">
 					<div className="infra-container-card">
 						<img
-							src="/Icons/infraContainers.svg"
+							src={infraContainersUrl}
 							alt="infra-container"
 							width={32}
 							height={32}
@@ -28,7 +31,7 @@ function Processes(): JSX.Element {
 
 					<div className="infra-container-working-msg">
 						<Space>
-							<img src="/Icons/broom.svg" alt="broom" width={24} height={24} />
+							<img src={broomUrl} 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="/Images/notFound404.png"
+      src="test-file-stub"
       style="max-height: 480px; max-width: 480px;"
     />
     <div

frontend/src/components/PanelDataLoading/PanelDataLoading.tsx

@@ -1,16 +1,14 @@
 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="/Icons/loading-plane.gif"
-					alt="wait-icon"
-				/>
+				<img className="loading-gif" src={loadingPlaneUrl} alt="wait-icon" />
 
 				<Typography.Text>Fetching data...</Typography.Text>
 			</div>

frontend/src/components/WelcomeLeftContainer/index.tsx

@@ -2,6 +2,8 @@ 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;
@@ -16,7 +18,7 @@ function WelcomeLeftContainer({
 		<Container>
 			<LeftContainer direction="vertical">
 				<Space align="center">
-					<Logo src="/Logos/signoz-brand-logo.svg" alt="logo" />
+					<Logo src={signozBrandLogoUrl} alt="logo" />
 					<Title style={{ fontSize: '46px', margin: 0 }}>SigNoz</Title>
 				</Space>
 				<Typography>{t('monitor_signup')}</Typography>

frontend/src/components/createGuardedRoute/createGuardedRoute.tsx

@@ -7,6 +7,8 @@ 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';
@@ -23,7 +25,7 @@ function OnNoPermissionsFallback(response: {
 	return (
 		<div className="guard-authz-error-no-authz">
 			<div className="guard-authz-error-no-authz-content">
-				<img src="/Icons/no-data.svg" alt="No permission" />
+				<img src={noDataUrl} 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/container/ApiMonitoring/Explorer/Domains/DomainDetails/TopErrors.tsx

@@ -24,6 +24,8 @@ 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';
@@ -209,7 +211,7 @@ function TopErrors({
 								<div className="no-filtered-endpoints-message-container">
 									<div className="no-filtered-endpoints-message-content">
 										<img
-											src="/Icons/emptyState.svg"
+											src={emptyStateUrl}
 											alt="thinking-emoji"
 											className="empty-state-svg"
 										/>

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

@@ -10,6 +10,8 @@ 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';
@@ -78,7 +80,7 @@ function DependentServices({
 								<div className="no-status-code-data-message-container">
 									<div className="no-status-code-data-message-content">
 										<img
-											src="/Icons/emptyState.svg"
+											src={emptyStateUrl}
 											alt="thinking-emoji"
 											className="empty-state-svg"
 										/>

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

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

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

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

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

@@ -23,6 +23,8 @@ 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';
@@ -132,7 +134,7 @@ function DomainList(): JSX.Element {
 				<div className="no-filtered-domains-message-container">
 					<div className="no-filtered-domains-message-content">
 						<img
-							src="/Icons/emptyState.svg"
+							src={emptyStateUrl}
 							alt="thinking-emoji"
 							className="empty-state-svg"
 						/>

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

@@ -1,5 +1,8 @@
 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';
@@ -12,13 +15,13 @@ function HeroSection(): JSX.Element {
 			style={
 				isDarkMode
 					? {
-							backgroundImage: `url('/Images/integrations-hero-bg.png')`,
+							backgroundImage: `url('${integrationsHeroBgUrl}')`,
 					  }
 					: {}
 			}
 		>
 			<div className="hero-section__icon">
-				<img src="/Logos/aws-dark.svg" alt="aws-logo" />
+				<img src={awsDarkUrl} alt="aws-logo" />
 			</div>
 			<div className="hero-section__details">
 				<div className="title">Amazon Web Services</div>

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

@@ -3,6 +3,8 @@ 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 {
@@ -36,7 +38,7 @@ export function SuccessView(): JSX.Element {
 			)}
 			<div className="cloud-account-setup-success-view">
 				<div className="cloud-account-setup-success-view__icon">
-					<img src="Icons/solid-check-circle.svg" alt="Success" />
+					<img src={solidCheckCircleUrl} alt="Success" />
 				</div>
 				<div className="cloud-account-setup-success-view__content">
 					<div className="cloud-account-setup-success-view__title">

frontend/src/container/EmptyLogsSearch/EmptyLogsSearch.tsx

@@ -7,6 +7,8 @@ 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 {
@@ -46,7 +48,7 @@ export default function EmptyLogsSearch({
 			<div className="empty-logs-search__row">
 				<div className="empty-logs-search__content">
 					<img
-						src="/Icons/emptyState.svg"
+						src={emptyStateUrl}
 						alt="thinking-emoji"
 						className="empty-state-svg"
 					/>

frontend/src/container/ForgotPassword/index.tsx

@@ -11,6 +11,8 @@ 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';
@@ -131,7 +133,7 @@ function ForgotPassword({
 			>
 				<div className="login-form-header">
 					<div className="login-form-emoji">
-						<img src="/svgs/tv.svg" alt="TV" width="32" height="32" />
+						<img src={tvUrl} 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,5 +1,7 @@
 import history from 'lib/history';
 
+import signozBrandLogoUrl from '@/assets/Logos/signoz-brand-logo.svg';
+
 import './FullScreenHeader.styles.scss';
 
 export default function FullScreenHeader({
@@ -13,7 +15,7 @@ export default function FullScreenHeader({
 	return (
 		<div className="full-screen-header-container">
 			<div className="brand-logo" onClick={handleLogoClick}>
-				<img src="/Logos/signoz-brand-logo.svg" alt="SigNoz" />
+				<img src={signozBrandLogoUrl} alt="SigNoz" />
 
 				<div className="brand-logo-name">SigNoz</div>
 			</div>

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

@@ -16,6 +16,10 @@ 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 {
@@ -72,7 +76,7 @@ export default function DashboardEmptyState(): JSX.Element {
 			<div className="dashboard-content">
 				<section className="heading">
 					<img
-						src="/Icons/dashboard_emoji.svg"
+						src={dashboardEmojiUrl}
 						alt="header-image"
 						style={{ height: '32px', width: '32px' }}
 					/>
@@ -88,7 +92,7 @@ export default function DashboardEmptyState(): JSX.Element {
 						<div className="actions-configure">
 							<div className="actions-configure-text">
 								<img
-									src="/Icons/tools.svg"
+									src={toolsUrl}
 									alt="header-image"
 									style={{ height: '14px', width: '14px' }}
 								/>
@@ -125,7 +129,7 @@ export default function DashboardEmptyState(): JSX.Element {
 						<div className="actions-add-panel">
 							<div className="actions-panel-text">
 								<img
-									src="/Icons/landscape.svg"
+									src={landscapeUrl}
 									alt="header-image"
 									style={{ height: '14px', width: '14px' }}
 								/>

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

@@ -14,6 +14,10 @@ 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,
@@ -65,11 +69,7 @@ export default function AlertRules({
 		<div className="empty-state-container">
 			<div className="empty-state-content-container">
 				<div className="empty-state-content">
-					<img
-						src="/Icons/beacon.svg"
-						alt="empty-alert-icon"
-						className="empty-state-icon"
-					/>
+					<img src={beaconUrl} alt="empty-alert-icon" className="empty-state-icon" />
 
 					<div className="empty-title">No Alert rules yet.</div>
 
@@ -156,11 +156,7 @@ export default function AlertRules({
 					>
 						<div className="alert-rule-item-name-container home-data-item-name-container">
 							<img
-								src={
-									Math.random() % 2 === 0
-										? '/Icons/eight-ball.svg'
-										: '/Icons/circus-tent.svg'
-								}
+								src={getItemIcon(rule.id)}
 								alt="alert-rules"
 								className="alert-rules-img"
 							/>

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

@@ -11,6 +11,10 @@ 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,
@@ -52,11 +56,7 @@ export default function Dashboards({
 		<div className="empty-state-container">
 			<div className="empty-state-content-container">
 				<div className="empty-state-content">
-					<img
-						src="/Icons/dials.svg"
-						alt="empty-alert-icon"
-						className="empty-state-icon"
-					/>
+					<img src={dialsUrl} alt="empty-alert-icon" className="empty-state-icon" />
 
 					<div className="empty-title">You don’t have any dashboards yet.</div>
 
@@ -135,11 +135,7 @@ export default function Dashboards({
 						>
 							<div className="dashboard-item-name-container home-data-item-name-container">
 								<img
-									src={
-										Math.random() % 2 === 0
-											? '/Icons/eight-ball.svg'
-											: '/Icons/circus-tent.svg'
-									}
+									src={getItemIcon(dashboard.id)}
 									alt="alert-rules"
 									className="alert-rules-img"
 								/>

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

@@ -10,6 +10,10 @@ 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({
@@ -68,7 +72,7 @@ function DataSourceInfo({
 					<div className="workspace-ready-container">
 						<div className="workspace-ready-header">
 							<span className="workspace-ready-title">
-								<img src="/Icons/hurray.svg" alt="hurray" />
+								<img src={hurrayUrl} alt="hurray" />
 								Your workspace is ready
 							</span>
 
@@ -77,7 +81,7 @@ function DataSourceInfo({
 								color="primary"
 								size="sm"
 								className="periscope-btn primary"
-								prefixIcon={<img src="/Icons/container-plus.svg" alt="plus" />}
+								prefixIcon={<img src={containerPlusUrl} alt="plus" />}
 								onClick={handleConnect}
 								role="button"
 								tabIndex={0}
@@ -135,7 +139,7 @@ function DataSourceInfo({
 			<div className="hello-wave-container">
 				<div className="hello-wave-img-container">
 					<img
-						src="/Icons/hello-wave.svg"
+						src={helloWaveUrl}
 						alt="hello-wave"
 						className="hello-wave-img"
 						width={36}

frontend/src/container/Home/Home.tsx

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

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

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

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

@@ -32,6 +32,8 @@ 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';
@@ -51,7 +53,7 @@ const EmptyState = memo(
 			<div className="empty-state-content-container">
 				<div className="empty-state-content">
 					<img
-						src="/Icons/triangle-ruler.svg"
+						src={triangleRulerUrl}
 						alt="empty-alert-icon"
 						className="empty-state-icon"
 					/>

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

@@ -18,6 +18,8 @@ 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';
 
@@ -103,7 +105,7 @@ export default function ServiceTraces({
 				<div className="empty-state-content-container">
 					<div className="empty-state-content">
 						<img
-							src="/Icons/triangle-ruler.svg"
+							src={triangleRulerUrl}
 							alt="empty-alert-icon"
 							className="empty-state-icon"
 						/>

frontend/src/container/Home/constants.ts

@@ -1,8 +1,20 @@
 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,6 +2,8 @@ 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 {
@@ -9,11 +11,7 @@ export function HostMetricsLoading(): JSX.Element {
 	return (
 		<div className="loading-host-metrics">
 			<div className="loading-host-metrics-content">
-				<img
-					className="loading-gif"
-					src="/Icons/loading-plane.gif"
-					alt="wait-icon"
-				/>
+				<img className="loading-gif" src={loadingPlaneUrl} alt="wait-icon" />
 
 				<Typography>
 					{t('pending_data_placeholder', {

frontend/src/container/InfraMonitoringHosts/HostsEmptyOrIncorrectMetrics.tsx

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

frontend/src/container/InfraMonitoringHosts/HostsListTable.tsx

@@ -15,6 +15,9 @@ 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,
@@ -74,7 +77,7 @@ function EmptyOrLoadingView(
 		return (
 			<div className="hosts-empty-state-container">
 				<div className="hosts-empty-state-container-content">
-					<img className="eyes-emoji" src="/Images/eyesEmoji.svg" alt="eyes emoji" />
+					<img className="eyes-emoji" src={eyesEmojiUrl} 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
@@ -93,7 +96,7 @@ function EmptyOrLoadingView(
 			<div className="no-filtered-hosts-message-container">
 				<div className="no-filtered-hosts-message-content">
 					<img
-						src="/Icons/emptyState.svg"
+						src={emptyStateUrl}
 						alt="thinking-emoji"
 						className="empty-state-svg"
 					/>

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

@@ -26,6 +26,8 @@ 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 {
@@ -655,7 +657,7 @@ function K8sClustersList({
 						<div className="no-filtered-hosts-message-container">
 							<div className="no-filtered-hosts-message-content">
 								<img
-									src="/Icons/emptyState.svg"
+									src={emptyStateUrl}
 									alt="thinking-emoji"
 									className="empty-state-svg"
 								/>

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

@@ -27,6 +27,8 @@ 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 {
@@ -677,7 +679,7 @@ function K8sDaemonSetsList({
 						<div className="no-filtered-hosts-message-container">
 							<div className="no-filtered-hosts-message-content">
 								<img
-									src="/Icons/emptyState.svg"
+									src={emptyStateUrl}
 									alt="thinking-emoji"
 									className="empty-state-svg"
 								/>

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

@@ -29,6 +29,8 @@ 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,
@@ -684,7 +686,7 @@ function K8sDeploymentsList({
 						<div className="no-filtered-hosts-message-container">
 							<div className="no-filtered-hosts-message-content">
 								<img
-									src="/Icons/emptyState.svg"
+									src={emptyStateUrl}
 									alt="thinking-emoji"
 									className="empty-state-svg"
 								/>

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

@@ -29,6 +29,8 @@ 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,
@@ -645,7 +647,7 @@ function K8sJobsList({
 							<div className="no-filtered-hosts-message-container">
 								<div className="no-filtered-hosts-message-content">
 									<img
-										src="/Icons/emptyState.svg"
+										src={emptyStateUrl}
 										alt="thinking-emoji"
 										className="empty-state-svg"
 									/>

frontend/src/container/InfraMonitoringK8s/K8sEmptyOrIncorrectMetrics.tsx

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

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

@@ -28,6 +28,8 @@ 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,
@@ -679,7 +681,7 @@ function K8sNamespacesList({
 						<div className="no-filtered-hosts-message-container">
 							<div className="no-filtered-hosts-message-content">
 								<img
-									src="/Icons/emptyState.svg"
+									src={emptyStateUrl}
 									alt="thinking-emoji"
 									className="empty-state-svg"
 								/>

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

@@ -28,6 +28,8 @@ 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,
@@ -657,7 +659,7 @@ function K8sNodesList({
 						<div className="no-filtered-hosts-message-container">
 							<div className="no-filtered-hosts-message-content">
 								<img
-									src="/Icons/emptyState.svg"
+									src={emptyStateUrl}
 									alt="thinking-emoji"
 									className="empty-state-svg"
 								/>

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

@@ -31,6 +31,8 @@ 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,
@@ -712,7 +714,7 @@ function K8sPodsList({
 						<div className="no-filtered-hosts-message-container">
 							<div className="no-filtered-hosts-message-content">
 								<img
-									src="/Icons/emptyState.svg"
+									src={emptyStateUrl}
 									alt="thinking-emoji"
 									className="empty-state-svg"
 								/>

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

@@ -29,6 +29,8 @@ 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 +683,7 @@ function K8sStatefulSetsList({
 						<div className="no-filtered-hosts-message-container">
 							<div className="no-filtered-hosts-message-content">
 								<img
-									src="/Icons/emptyState.svg"
+									src={emptyStateUrl}
 									alt="thinking-emoji"
 									className="empty-state-svg"
 								/>

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

@@ -29,6 +29,8 @@ 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,
@@ -636,7 +638,7 @@ function K8sVolumesList({
 						<div className="no-filtered-hosts-message-container">
 							<div className="no-filtered-hosts-message-content">
 								<img
-									src="/Icons/emptyState.svg"
+									src={emptyStateUrl}
 									alt="thinking-emoji"
 									className="empty-state-svg"
 								/>

frontend/src/container/ListAlertRules/AlertsEmptyState/AlertsEmptyState.tsx

@@ -9,6 +9,8 @@ import { useAppContext } from 'providers/App/App';
 import { DataSource } from 'types/common/queryBuilder';
 import { isModifierKeyPressed } from 'utils/app';
 
+import alertEmojiUrl from '@/assets/Icons/alert_emoji.svg';
+
 import AlertInfoCard from './AlertInfoCard';
 import { ALERT_CARDS, ALERT_INFO_LINKS } from './alertLinks';
 import InfoLinkText from './InfoLinkText';
@@ -59,7 +61,7 @@ export function AlertsEmptyState(): JSX.Element {
 					<div className="alert-content">
 						<section className="heading">
 							<img
-								src="/Icons/alert_emoji.svg"
+								src={alertEmojiUrl}
 								alt="alert-header"
 								style={{ height: '32px', width: '32px' }}
 							/>

frontend/src/container/ListOfDashboard/DashboardTemplates/DashboardTemplatesModal.tsx

@@ -15,6 +15,9 @@ import cx from 'classnames';
 import { ConciergeBell, DraftingCompass, Drill, Plus, X } from 'lucide-react';
 import { DashboardTemplate } from 'types/api/dashboard/getAll';
 
+import blankDashboardTemplatePreviewUrl from '@/assets/Images/blankDashboardTemplatePreview.svg';
+import redisTemplatePreviewUrl from '@/assets/Images/redisTemplatePreview.svg';
+
 import { filterTemplates } from '../utils';
 
 import './DashboardTemplatesModal.styles.scss';
@@ -25,91 +28,91 @@ const templatesList: DashboardTemplate[] = [
 		icon: <Drill />,
 		id: 'blank',
 		description: 'Create a custom dashboard from scratch.',
-		previewImage: '/Images/blankDashboardTemplatePreview.svg',
+		previewImage: blankDashboardTemplatePreviewUrl,
 	},
 	{
 		name: 'Alert Manager',
 		icon: <ConciergeBell />,
 		id: 'alertManager',
 		description: 'Create a custom dashboard from scratch.',
-		previewImage: '/Images/blankDashboardTemplatePreview.svg',
+		previewImage: blankDashboardTemplatePreviewUrl,
 	},
 	{
 		name: 'Apache',
 		icon: <ApacheIcon />,
 		id: 'apache',
 		description: 'Create a custom dashboard from scratch.',
-		previewImage: '/Images/blankDashboardTemplatePreview.svg',
+		previewImage: blankDashboardTemplatePreviewUrl,
 	},
 	{
 		name: 'Docker',
 		icon: <DockerIcon />,
 		id: 'docker',
 		description: 'Create a custom dashboard from scratch.',
-		previewImage: '/Images/blankDashboardTemplatePreview.svg',
+		previewImage: blankDashboardTemplatePreviewUrl,
 	},
 	{
 		name: 'Elasticsearch',
 		icon: <ElasticSearchIcon />,
 		id: 'elasticSearch',
 		description: 'Create a custom dashboard from scratch.',
-		previewImage: '/Images/blankDashboardTemplatePreview.svg',
+		previewImage: blankDashboardTemplatePreviewUrl,
 	},
 	{
 		name: 'MongoDB',
 		icon: <MongoDBIcon />,
 		id: 'mongoDB',
 		description: 'Create a custom dashboard from scratch.',
-		previewImage: '/Images/blankDashboardTemplatePreview.svg',
+		previewImage: blankDashboardTemplatePreviewUrl,
 	},
 	{
 		name: 'Heroku',
 		icon: <HerokuIcon />,
 		id: 'heroku',
 		description: 'Create a custom dashboard from scratch.',
-		previewImage: '/Images/blankDashboardTemplatePreview.svg',
+		previewImage: blankDashboardTemplatePreviewUrl,
 	},
 	{
 		name: 'Nginx',
 		icon: <NginxIcon />,
 		id: 'nginx',
 		description: 'Create a custom dashboard from scratch.',
-		previewImage: '/Images/blankDashboardTemplatePreview.svg',
+		previewImage: blankDashboardTemplatePreviewUrl,
 	},
 	{
 		name: 'Kubernetes',
 		icon: <KubernetesIcon />,
 		id: 'kubernetes',
 		description: 'Create a custom dashboard from scratch.',
-		previewImage: '/Images/blankDashboardTemplatePreview.svg',
+		previewImage: blankDashboardTemplatePreviewUrl,
 	},
 	{
 		name: 'MySQL',
 		icon: <MySQLIcon />,
 		id: 'mySQL',
 		description: 'Create a custom dashboard from scratch.',
-		previewImage: '/Images/blankDashboardTemplatePreview.svg',
+		previewImage: blankDashboardTemplatePreviewUrl,
 	},
 	{
 		name: 'PostgreSQL',
 		icon: <PostgreSQLIcon />,
 		id: 'postgreSQL',
 		description: 'Create a custom dashboard from scratch.',
-		previewImage: '/Images/blankDashboardTemplatePreview.svg',
+		previewImage: blankDashboardTemplatePreviewUrl,
 	},
 	{
 		name: 'Redis',
 		icon: <RedisIcon />,
 		id: 'redis',
 		description: 'Create a custom dashboard from scratch.',
-		previewImage: '/Images/redisTemplatePreview.svg',
+		previewImage: redisTemplatePreviewUrl,
 	},
 	{
 		name: 'AWS',
 		icon: <DraftingCompass size={14} />,
 		id: 'aws',
 		description: 'Create a custom dashboard from scratch.',
-		previewImage: '/Images/blankDashboardTemplatePreview.svg',
+		previewImage: blankDashboardTemplatePreviewUrl,
 	},
 ];
 

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -84,6 +84,10 @@ import {
 import APIError from 'types/api/error';
 import { isModifierKeyPressed } from 'utils/app';
 
+import awwSnapUrl from '@/assets/Icons/awwSnap.svg';
+import dashboardsUrl from '@/assets/Icons/dashboards.svg';
+import emptyStateUrl from '@/assets/Icons/emptyState.svg';
+
 import DashboardTemplatesModal from './DashboardTemplates/DashboardTemplatesModal';
 import ImportJSON from './ImportJSON';
 import { RequestDashboardBtn } from './RequestDashboardBtn';
@@ -675,11 +679,7 @@ function DashboardsList(): JSX.Element {
 					</div>
 				) : dashboardFetchError ? (
 					<div className="dashboard-error-state">
-						<img
-							src="/Icons/awwSnap.svg"
-							alt="something went wrong"
-							className="error-img"
-						/>
+						<img src={awwSnapUrl} alt="something went wrong" className="error-img" />
 
 						<Typography.Text className="error-text">
 							Something went wrong :/ Please retry or contact support.
@@ -705,11 +705,7 @@ function DashboardsList(): JSX.Element {
 					</div>
 				) : dashboards.length === 0 && !searchString ? (
 					<div className="dashboard-empty-state">
-						<img
-							src="/Icons/dashboards.svg"
-							alt="dashboards"
-							className="dashboard-img"
-						/>
+						<img src={dashboardsUrl} alt="dashboards" className="dashboard-img" />
 						<section className="text">
 							<Typography.Text className="no-dashboard">
 								No dashboards yet.{' '}
@@ -789,7 +785,7 @@ function DashboardsList(): JSX.Element {
 
 						{dashboards.length === 0 ? (
 							<div className="no-search">
-								<img src="/Icons/emptyState.svg" alt="img" className="img" />
+								<img src={emptyStateUrl} alt="img" className="img" />
 								<Typography.Text className="text">
 									No dashboards found for {searchString}. Create a new dashboard?
 								</Typography.Text>

frontend/src/container/LiveLogs/LiveLogsList/index.tsx

@@ -21,6 +21,8 @@ import { useEventSource } from 'providers/EventSource';
 import { ILog } from 'types/api/logs/log';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
 
+import loadingPlaneUrl from '@/assets/Icons/loading-plane.gif';
+
 import { LiveLogsListProps } from './types';
 
 import './LiveLogsList.styles.scss';
@@ -137,11 +139,7 @@ function LiveLogsList({
 		() => (
 			<div className="live-logs-list-loading">
 				<div className="loading-live-logs-content">
-					<img
-						className="loading-gif"
-						src="/Icons/loading-plane.gif"
-						alt="wait-icon"
-					/>
+					<img className="loading-gif" src={loadingPlaneUrl} alt="wait-icon" />
 
 					<Typography>Fetching live logs...</Typography>
 				</div>

frontend/src/container/Login/index.tsx

@@ -15,6 +15,8 @@ import { ErrorV2 } from 'types/api';
 import APIError from 'types/api/error';
 import { SessionsContext } from 'types/api/v2/sessions/context/get';
 
+import tvUrl from '@/assets/svgs/tv.svg';
+
 import { FormContainer, Label, ParentContainer } from './styles';
 
 import './Login.styles.scss';
@@ -305,7 +307,7 @@ function Login(): JSX.Element {
 			<FormContainer form={form} onFinish={onSubmitHandler}>
 				<div className="login-form-header">
 					<div className="login-form-emoji">
-						<img src="/svgs/tv.svg" alt="TV" width="32" height="32" />
+						<img src={tvUrl} alt="TV" width="32" height="32" />
 					</div>
 					<Typography.Title level={4} className="login-form-title">
 						Sign in to your workspace

frontend/src/container/LogsError/LogsError.tsx

@@ -3,6 +3,8 @@ import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import history from 'lib/history';
 import { ArrowRight } from 'lucide-react';
 
+import awwSnapUrl from '@/assets/Icons/awwSnap.svg';
+
 import './LogsError.styles.scss';
 
 export default function LogsError(): JSX.Element {
@@ -19,11 +21,7 @@ export default function LogsError(): JSX.Element {
 	return (
 		<div className="logs-error-container">
 			<div className="logs-error-content">
-				<img
-					src="/Icons/awwSnap.svg"
-					alt="error-emoji"
-					className="error-state-svg"
-				/>
+				<img src={awwSnapUrl} alt="error-emoji" className="error-state-svg" />
 				<Typography.Text>
 					<span className="aww-snap">Aw snap :/ </span> Something went wrong. Please
 					try again or contact support.

frontend/src/container/LogsExplorerViews/QueryStatus.tsx

@@ -4,6 +4,8 @@ import { Color } from '@signozhq/design-tokens';
 import { Spin } from 'antd';
 import { CircleCheck } from 'lucide-react';
 
+import solidXCircleUrl from '@/assets/Icons/solid-x-circle.svg';
+
 import './QueryStatus.styles.scss';
 
 interface IQueryStatusProps {
@@ -24,7 +26,7 @@ export default function QueryStatus(
 		if (error) {
 			return (
 				<img
-					src="/Icons/solid-x-circle.svg"
+					src={solidXCircleUrl}
 					alt="header"
 					className="error"
 					style={{ height: '14px', width: '14px' }}

frontend/src/container/LogsLoading/LogsLoading.tsx

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

frontend/src/container/MetricsExplorer/MetricsLoading/MetricsLoading.tsx

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

frontend/src/container/MetricsExplorer/Summary/MetricsTable.tsx

@@ -13,6 +13,8 @@ import { Querybuildertypesv5OrderDirectionDTO } from 'api/generated/services/sig
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
 import { Info } from 'lucide-react';
 
+import emptyStateUrl from '@/assets/Icons/emptyState.svg';
+
 import { MetricsListItemRowData, MetricsTableProps } from './types';
 import { getMetricsTableColumns } from './utils';
 
@@ -95,7 +97,7 @@ function MetricsTable({
 								data-testid="metrics-table-empty-state"
 							>
 								<img
-									src="/Icons/emptyState.svg"
+									src={emptyStateUrl}
 									alt="thinking-emoji"
 									className="empty-state-svg"
 								/>

frontend/src/container/NoLogs/NoLogs.tsx

@@ -7,6 +7,8 @@ import { ArrowUpRight } from 'lucide-react';
 import { DataSource } from 'types/common/queryBuilder';
 import DOCLINKS from 'utils/docLinks';
 
+import eyesEmojiUrl from '@/assets/Images/eyesEmoji.svg';
+
 import './NoLogs.styles.scss';
 
 export default function NoLogs({
@@ -50,7 +52,7 @@ export default function NoLogs({
 	return (
 		<div className="no-logs-container">
 			<div className="no-logs-container-content">
-				<img className="eyes-emoji" src="/Images/eyesEmoji.svg" alt="eyes emoji" />
+				<img className="eyes-emoji" src={eyesEmojiUrl} alt="eyes emoji" />
 				<Typography className="no-logs-text">
 					No {dataSource} yet.
 					<span className="sub-text">

frontend/src/container/OnboardingContainer/Steps/ConnectionStatus/ConnectionStatus.tsx

@@ -23,6 +23,15 @@ import { PayloadProps as QueryServicePayloadProps } from 'types/api/metrics/getS
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { Tags } from 'types/reducer/trace';
 
+import elixirPngUrl from '@/assets/Logos/elixir.png';
+import goPngUrl from '@/assets/Logos/go.png';
+import javaPngUrl from '@/assets/Logos/java.png';
+import javascriptPngUrl from '@/assets/Logos/javascript.png';
+import pythonPngUrl from '@/assets/Logos/python.png';
+import railsPngUrl from '@/assets/Logos/rails.png';
+import rustPngUrl from '@/assets/Logos/rust.png';
+import swiftPngUrl from '@/assets/Logos/swift.png';
+
 import './ConnectionStatus.styles.scss';
 
 const pollingInterval = 10000;
@@ -139,7 +148,7 @@ export default function ConnectionStatus(): JSX.Element {
 					<Header
 						entity="java"
 						heading="Java OpenTelemetry Instrumentation"
-						imgURL="/Logos/java.png"
+						imgURL={javaPngUrl}
 						docsURL="https://signoz.io/docs/instrumentation/java/"
 						imgClassName="supported-language-img"
 					/>
@@ -150,7 +159,7 @@ export default function ConnectionStatus(): JSX.Element {
 					<Header
 						entity="python"
 						heading="Python OpenTelemetry Instrumentation"
-						imgURL="/Logos/python.png"
+						imgURL={pythonPngUrl}
 						docsURL="https://signoz.io/docs/instrumentation/python/"
 						imgClassName="supported-language-img"
 					/>
@@ -161,7 +170,7 @@ export default function ConnectionStatus(): JSX.Element {
 					<Header
 						entity="javascript"
 						heading="Javascript OpenTelemetry Instrumentation"
-						imgURL="/Logos/javascript.png"
+						imgURL={javascriptPngUrl}
 						docsURL="https://signoz.io/docs/instrumentation/javascript/"
 						imgClassName="supported-language-img"
 					/>
@@ -171,7 +180,7 @@ export default function ConnectionStatus(): JSX.Element {
 					<Header
 						entity="go"
 						heading="Go OpenTelemetry Instrumentation"
-						imgURL="/Logos/go.png"
+						imgURL={goPngUrl}
 						docsURL="https://signoz.io/docs/instrumentation/golang/"
 						imgClassName="supported-language-img"
 					/>
@@ -181,7 +190,7 @@ export default function ConnectionStatus(): JSX.Element {
 					<Header
 						entity="rails"
 						heading="Ruby on Rails OpenTelemetry Instrumentation"
-						imgURL="/Logos/rails.png"
+						imgURL={railsPngUrl}
 						docsURL="https://signoz.io/docs/instrumentation/ruby-on-rails/"
 						imgClassName="supported-language-img"
 					/>
@@ -191,7 +200,7 @@ export default function ConnectionStatus(): JSX.Element {
 					<Header
 						entity="rust"
 						heading="Rust OpenTelemetry Instrumentation"
-						imgURL="/Logos/rust.png"
+						imgURL={rustPngUrl}
 						docsURL="https://signoz.io/docs/instrumentation/rust/"
 						imgClassName="supported-language-img"
 					/>
@@ -201,7 +210,7 @@ export default function ConnectionStatus(): JSX.Element {
 					<Header
 						entity="rust"
 						heading="Elixir OpenTelemetry Instrumentation"
-						imgURL="/Logos/elixir.png"
+						imgURL={elixirPngUrl}
 						docsURL="https://signoz.io/docs/instrumentation/elixir/"
 						imgClassName="supported-language-img"
 					/>
@@ -211,7 +220,7 @@ export default function ConnectionStatus(): JSX.Element {
 					<Header
 						entity="swift"
 						heading="Swift OpenTelemetry Instrumentation"
-						imgURL="/Logos/swift.png"
+						imgURL={swiftPngUrl}
 						docsURL="https://signoz.io/docs/instrumentation/swift/"
 						imgClassName="supported-language-img"
 					/>

frontend/src/container/OnboardingContainer/Steps/LogsConnectionStatus/LogsConnectionStatus.tsx

@@ -18,6 +18,13 @@ import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 
+import cmdTerminalSvgUrl from '@/assets/Logos/cmd-terminal.svg';
+import dockerSvgUrl from '@/assets/Logos/docker.svg';
+import kubernetesSvgUrl from '@/assets/Logos/kubernetes.svg';
+import nodeJsSvgUrl from '@/assets/Logos/node-js.svg';
+import softwareWindowSvgUrl from '@/assets/Logos/software-window.svg';
+import syslogsSvgUrl from '@/assets/Logos/syslogs.svg';
+
 import './LogsConnectionStatus.styles.scss';
 
 const enum ApplicationLogsType {
@@ -165,7 +172,7 @@ export default function LogsConnectionStatus(): JSX.Element {
 					<Header
 						entity="kubernetes"
 						heading="Collecting Kubernetes Pod logs"
-						imgURL="/Logos/kubernetes.svg"
+						imgURL={kubernetesSvgUrl}
 						docsURL="https://signoz.io/docs/userguide/collect_kubernetes_pod_logs/#collect-kubernetes-pod-logs-in-signoz-cloud"
 						imgClassName="supported-logs-type-img"
 					/>
@@ -176,7 +183,7 @@ export default function LogsConnectionStatus(): JSX.Element {
 					<Header
 						entity="docker"
 						heading="Collecting Docker container logs"
-						imgURL="/Logos/docker.svg"
+						imgURL={dockerSvgUrl}
 						docsURL="https://signoz.io/docs/userguide/collect_docker_logs/"
 						imgClassName="supported-logs-type-img"
 					/>
@@ -187,7 +194,7 @@ export default function LogsConnectionStatus(): JSX.Element {
 					<Header
 						entity="syslog"
 						heading="Collecting Syslogs"
-						imgURL="/Logos/syslogs.svg"
+						imgURL={syslogsSvgUrl}
 						docsURL="https://signoz.io/docs/userguide/collecting_syslogs/"
 						imgClassName="supported-logs-type-img"
 					/>
@@ -197,7 +204,7 @@ export default function LogsConnectionStatus(): JSX.Element {
 					<Header
 						entity="nodejs"
 						heading="Collecting NodeJS winston logs"
-						imgURL="/Logos/node-js.svg"
+						imgURL={nodeJsSvgUrl}
 						docsURL="https://signoz.io/docs/userguide/collecting_nodejs_winston_logs/"
 						imgClassName="supported-logs-type-img"
 					/>
@@ -212,11 +219,11 @@ export default function LogsConnectionStatus(): JSX.Element {
 								? 'Collecting Application Logs from Log file'
 								: 'Collecting Application Logs Using OTEL SDK'
 						}
-						imgURL={`/Logos/${
+						imgURL={
 							logType === ApplicationLogsType.FROM_LOG_FILE
-								? 'software-window'
-								: 'cmd-terminal'
-						}.svg`}
+								? softwareWindowSvgUrl
+								: cmdTerminalSvgUrl
+						}
 						docsURL={
 							logType === ApplicationLogsType.FROM_LOG_FILE
 								? 'https://signoz.io/docs/userguide/collect_logs_from_file/'

frontend/src/container/OnboardingContainer/common/ModuleStepsContainer/ModuleStepsContainer.tsx

@@ -17,6 +17,8 @@ import { isEmpty, isNull } from 'lodash-es';
 import { UserPlus } from 'lucide-react';
 import { isModifierKeyPressed } from 'utils/app';
 
+import signozBrandLogoUrl from '@/assets/Logos/signoz-brand-logo.svg';
+
 import { useOnboardingContext } from '../../context/OnboardingContext';
 import {
 	ModuleProps,
@@ -381,7 +383,7 @@ export default function ModuleStepsContainer({
 				<div>
 					<div className="steps-container-header">
 						<div className="brand-logo" onClick={handleLogoClick}>
-							<img src="/Logos/signoz-brand-logo.svg" alt="SigNoz" />
+							<img src={signozBrandLogoUrl} alt="SigNoz" />
 
 							<div className="brand-logo-name">SigNoz</div>
 						</div>

frontend/src/container/OnboardingContainer/utils/dataSourceUtils.ts

@@ -1,5 +1,38 @@
 import ROUTES from 'constants/routes';
 
+import azureAksSvgUrl from '@/assets/Logos/azure-aks.svg';
+import azureAppServiceSvgUrl from '@/assets/Logos/azure-app-service.svg';
+import azureBlobStorageSvgUrl from '@/assets/Logos/azure-blob-storage.svg';
+import azureContainerAppsSvgUrl from '@/assets/Logos/azure-container-apps.svg';
+import azureFunctionsSvgUrl from '@/assets/Logos/azure-functions.svg';
+import azureSqlDatabaseMetricsSvgUrl from '@/assets/Logos/azure-sql-database-metrics.svg';
+import azureVmSvgUrl from '@/assets/Logos/azure-vm.svg';
+import cloudwatchPngUrl from '@/assets/Logos/cloudwatch.png';
+import cmdTerminalSvgUrl from '@/assets/Logos/cmd-terminal.svg';
+import dockerSvgUrl from '@/assets/Logos/docker.svg';
+import dotnetPngUrl from '@/assets/Logos/dotnet.png';
+import ec2SvgUrl from '@/assets/Logos/ec2.svg';
+import ecsSvgUrl from '@/assets/Logos/ecs.svg';
+import eksSvgUrl from '@/assets/Logos/eks.svg';
+import elixirPngUrl from '@/assets/Logos/elixir.png';
+import fluentBitPngUrl from '@/assets/Logos/fluent-bit.png';
+import fluentdPngUrl from '@/assets/Logos/fluentd.png';
+import goPngUrl from '@/assets/Logos/go.png';
+import herokuPngUrl from '@/assets/Logos/heroku.png';
+import httpPngUrl from '@/assets/Logos/http.png';
+import javaPngUrl from '@/assets/Logos/java.png';
+import javascriptPngUrl from '@/assets/Logos/javascript.png';
+import kubernetesSvgUrl from '@/assets/Logos/kubernetes.svg';
+import logstashSvgUrl from '@/assets/Logos/logstash.svg';
+import phpPngUrl from '@/assets/Logos/php.png';
+import pythonPngUrl from '@/assets/Logos/python.png';
+import railsPngUrl from '@/assets/Logos/rails.png';
+import rustPngUrl from '@/assets/Logos/rust.png';
+import softwareWindowSvgUrl from '@/assets/Logos/software-window.svg';
+import swiftPngUrl from '@/assets/Logos/swift.png';
+import syslogsSvgUrl from '@/assets/Logos/syslogs.svg';
+import vercelPngUrl from '@/assets/Logos/vercel.png';
+
 import { ModuleProps } from '../OnboardingContainer';
 import { DataSourceType } from '../Steps/DataSource/DataSource';
 
@@ -89,230 +122,230 @@ export const frameworksMap = {
 export const defaultApplicationDataSource = {
 	name: 'java',
 	id: 'java',
-	imgURL: `Logos/java.png`,
+	imgURL: javaPngUrl,
 };
 
 const supportedLanguages = [
 	{
 		name: 'java',
 		id: 'java',
-		imgURL: `/Logos/java.png`,
+		imgURL: javaPngUrl,
 	},
 	{
 		name: 'python',
 		id: 'python',
-		imgURL: `/Logos/python.png`,
+		imgURL: pythonPngUrl,
 	},
 	{
 		name: 'go',
 		id: 'go',
-		imgURL: `/Logos/go.png`,
+		imgURL: goPngUrl,
 	},
 	{
 		name: 'javascript',
 		id: 'javascript',
-		imgURL: `/Logos/javascript.png`,
+		imgURL: javascriptPngUrl,
 	},
 	{
 		name: 'rails',
 		id: 'rails',
-		imgURL: `/Logos/rails.png`,
+		imgURL: railsPngUrl,
 	},
 	{
 		name: '.NET',
 		id: 'dotnet',
-		imgURL: `/Logos/dotnet.png`,
+		imgURL: dotnetPngUrl,
 	},
 	{
 		name: 'rust',
 		id: 'rust',
-		imgURL: `/Logos/rust.png`,
+		imgURL: rustPngUrl,
 	},
 	{
 		name: 'elixir',
 		id: 'elixir',
-		imgURL: `/Logos/elixir.png`,
+		imgURL: elixirPngUrl,
 	},
 	{
 		name: 'swift',
 		id: 'swift',
-		imgURL: `/Logos/swift.png`,
+		imgURL: swiftPngUrl,
 	},
 	{
 		name: 'php',
 		id: 'php',
-		imgURL: `/Logos/php.png`,
+		imgURL: phpPngUrl,
 	},
 ];
 
 export const defaultLogsType = {
 	name: 'Kubernetes Pod Logs',
 	id: 'kubernetes',
-	imgURL: `/Logos/kubernetes.svg`,
+	imgURL: kubernetesSvgUrl,
 };
 
 const supportedLogsTypes = [
 	{
 		name: 'Kubernetes Pod Logs',
 		id: 'kubernetes',
-		imgURL: `/Logos/kubernetes.svg`,
+		imgURL: kubernetesSvgUrl,
 	},
 	{
 		name: 'Docker Container Logs',
 		id: 'docker',
-		imgURL: `/Logos/docker.svg`,
+		imgURL: dockerSvgUrl,
 	},
 	{
 		name: 'SysLogs',
 		id: 'syslogs',
-		imgURL: `/Logos/syslogs.svg`,
+		imgURL: syslogsSvgUrl,
 	},
 	{
 		name: 'Application Logs',
 		id: 'application_logs',
-		imgURL: `/Logos/software-window.svg`,
+		imgURL: softwareWindowSvgUrl,
 	},
 	{
 		name: 'FluentBit',
 		id: 'fluentBit',
-		imgURL: `/Logos/fluent-bit.png`,
+		imgURL: fluentBitPngUrl,
 	},
 	{
 		name: 'FluentD',
 		id: 'fluentD',
-		imgURL: `/Logos/fluentd.png`,
+		imgURL: fluentdPngUrl,
 	},
 	{
 		name: 'LogStash',
 		id: 'logStash',
-		imgURL: `/Logos/logstash.svg`,
+		imgURL: logstashSvgUrl,
 	},
 	{
 		name: 'Heroku',
 		id: 'heroku',
-		imgURL: `/Logos/heroku.png`,
+		imgURL: herokuPngUrl,
 	},
 	{
 		name: 'Vercel',
 		id: 'vercel',
-		imgURL: `/Logos/vercel.png`,
+		imgURL: vercelPngUrl,
 	},
 	{
 		name: 'HTTP',
 		id: 'http',
-		imgURL: `/Logos/http.png`,
+		imgURL: httpPngUrl,
 	},
 	{
 		name: 'Cloudwatch',
 		id: 'cloudwatch',
-		imgURL: `/Logos/cloudwatch.png`,
+		imgURL: cloudwatchPngUrl,
 	},
 ];
 
 export const defaultInfraMetricsType = {
 	name: 'Kubernetes Infra Metrics',
 	id: 'kubernetesInfraMetrics',
-	imgURL: `/Logos/kubernetes.svg`,
+	imgURL: kubernetesSvgUrl,
 };
 
 const supportedInfraMetrics = [
 	{
 		name: 'Kubernetes Infra Metrics',
 		id: 'kubernetesInfraMetrics',
-		imgURL: `/Logos/kubernetes.svg`,
+		imgURL: kubernetesSvgUrl,
 	},
 	{
 		name: 'HostMetrics',
 		id: 'hostMetrics',
-		imgURL: `/Logos/software-window.svg`,
+		imgURL: softwareWindowSvgUrl,
 	},
 	{
 		name: 'Other Metrics',
 		id: 'otherMetrics',
-		imgURL: `/Logos/cmd-terminal.svg`,
+		imgURL: cmdTerminalSvgUrl,
 	},
 ];
 
 export const defaultAwsServices = {
 	name: 'EC2 - App/Server Logs',
 	id: 'awsEc2ApplicationLogs',
-	imgURL: `/Logos/ec2.svg`,
+	imgURL: ec2SvgUrl,
 };
 
 const supportedAwsServices = [
 	{
 		name: 'EC2 - App/Server Logs',
 		id: 'awsEc2ApplicationLogs',
-		imgURL: `/Logos/ec2.svg`,
+		imgURL: ec2SvgUrl,
 	},
 	{
 		name: 'EC2 - Infra Metrics',
 		id: 'awsEc2InfrastructureMetrics',
-		imgURL: `/Logos/ec2.svg`,
+		imgURL: ec2SvgUrl,
 	},
 	{
 		name: 'ECS - EC2',
 		id: 'awsEcsEc2',
-		imgURL: `/Logos/ecs.svg`,
+		imgURL: ecsSvgUrl,
 	},
 	{
 		name: 'ECS - Fargate',
 		id: 'awsEcsFargate',
-		imgURL: `/Logos/ecs.svg`,
+		imgURL: ecsSvgUrl,
 	},
 	{
 		name: 'ECS - External',
 		id: 'awsEcsExternal',
-		imgURL: `/Logos/ecs.svg`,
+		imgURL: ecsSvgUrl,
 	},
 	{
 		name: 'EKS',
 		id: 'awsEks',
-		imgURL: `/Logos/eks.svg`,
+		imgURL: eksSvgUrl,
 	},
 ];
 
 export const defaultAzureServices = {
 	name: 'VM',
 	id: 'azureVm',
-	imgURL: `/Logos/azure-vm.svg`,
+	imgURL: azureVmSvgUrl,
 };
 
 const supportedAzureServices = [
 	{
 		name: 'VM',
 		id: 'azureVm',
-		imgURL: `/Logos/azure-vm.svg`,
+		imgURL: azureVmSvgUrl,
 	},
 	{
 		name: 'App Service',
 		id: 'azureAppService',
-		imgURL: `/Logos/azure-app-service.svg`,
+		imgURL: azureAppServiceSvgUrl,
 	},
 	{
 		name: 'AKS',
 		id: 'azureAks',
-		imgURL: `/Logos/azure-aks.svg`,
+		imgURL: azureAksSvgUrl,
 	},
 	{
 		name: 'Azure Functions',
 		id: 'azureFunctions',
-		imgURL: `/Logos/azure-functions.svg`,
+		imgURL: azureFunctionsSvgUrl,
 	},
 	{
 		name: 'Azure Container Apps',
 		id: 'azureContainerApps',
-		imgURL: `/Logos/azure-container-apps.svg`,
+		imgURL: azureContainerAppsSvgUrl,
 	},
 	{
 		name: 'SQL Database Metrics',
 		id: 'azureSQLDatabaseMetrics',
-		imgURL: `/Logos/azure-sql-database-metrics.svg`,
+		imgURL: azureSqlDatabaseMetricsSvgUrl,
 	},
 	{
 		name: 'Azure Blob Storage',
 		id: 'azureBlobStorage',
-		imgURL: `/Logos/azure-blob-storage.svg`,
+		imgURL: azureBlobStorageSvgUrl,
 	},
 ];
 

frontend/src/container/OnboardingQuestionaire/OnboardingFooter/OnboardingFooter.tsx

@@ -1,3 +1,4 @@
+// hippa.svg and soc2.svg do not exist in src/assets — suppressed until assets are added
 import { Dot } from 'lucide-react';
 
 import './OnboardingFooter.styles.scss';
@@ -12,6 +13,7 @@ export function OnboardingFooter(): JSX.Element {
 					className="footer-content"
 					rel="noreferrer"
 				>
+					{/* eslint-disable-next-line rulesdir/no-unsupported-asset-pattern */}
 					<img src="/logos/hippa.svg" alt="HIPPA" className="footer-logo" />
 					<span className="footer-text">HIPPA</span>
 				</a>
@@ -22,6 +24,7 @@ export function OnboardingFooter(): JSX.Element {
 					className="footer-content"
 					rel="noreferrer"
 				>
+					{/* eslint-disable-next-line rulesdir/no-unsupported-asset-pattern */}
 					<img src="/logos/soc2.svg" alt="SOC2" className="footer-logo" />
 					<span className="footer-text">SOC2</span>
 				</a>

frontend/src/container/OnboardingQuestionaire/OnboardingHeader/OnboardingHeader.tsx

@@ -1,10 +1,12 @@
+import signozBrandLogoUrl from '@/assets/Logos/signoz-brand-logo.svg';
+
 import './OnboardingHeader.styles.scss';
 
 export function OnboardingHeader(): JSX.Element {
 	return (
 		<div className="header-container">
 			<div className="logo-container">
-				<img src="/Logos/signoz-brand-logo.svg" alt="SigNoz" />
+				<img src={signozBrandLogoUrl} alt="SigNoz" />
 				<span className="logo-text">SigNoz</span>
 			</div>
 		</div>

frontend/src/container/OnboardingQuestionaire/OnboardingQuestionHeader/OnboardingQuestionHeader.tsx

@@ -1,5 +1,7 @@
 import { Typography } from 'antd';
 
+import barberPoolUrl from '@/assets/svgs/barber-pool.svg';
+
 interface OnboardingQuestionHeaderProps {
 	title: string;
 	subtitle: string;
@@ -12,7 +14,7 @@ export function OnboardingQuestionHeader({
 	return (
 		<div className="onboarding-header-section">
 			<div className="onboarding-header-icon">
-				<img src="/svgs/barber-pool.svg" alt="SigNoz" width="32" height="32" />
+				<img src={barberPoolUrl} alt="SigNoz" width="32" height="32" />
 			</div>
 			<Typography.Title level={4} className="onboarding-header-title">
 				{title}

frontend/src/container/PaginatedTraceFlamegraph/TraceFlamegraphStates/Error/Error.tsx

@@ -1,6 +1,8 @@
 import { Tooltip, Typography } from 'antd';
 import { AxiosError } from 'axios';
 
+import noDataUrl from '@/assets/Icons/no-data.svg';
+
 import './Error.styles.scss';
 
 interface IErrorProps {
@@ -13,7 +15,7 @@ function Error(props: IErrorProps): JSX.Element {
 	return (
 		<div className="error-flamegraph">
 			<img
-				src="/Icons/no-data.svg"
+				src={noDataUrl}
 				alt="error-flamegraph"
 				className="error-flamegraph-img"
 			/>

frontend/src/container/PublicDashboardContainer/PublicDashboardContainer.tsx

@@ -18,6 +18,8 @@ import { SuccessResponseV2 } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { PublicDashboardDataProps } from 'types/api/dashboard/public/get';
 
+import signozBrandLogoUrl from '@/assets/Logos/signoz-brand-logo.svg';
+
 import Panel from './Panel';
 
 import './PublicDashboardContainer.styles.scss';
@@ -130,11 +132,7 @@ function PublicDashboardContainer({
 			<div className="public-dashboard-header">
 				<div className="public-dashboard-header-left">
 					<div className="brand-logo">
-						<img
-							src="/Logos/signoz-brand-logo.svg"
-							alt="SigNoz"
-							className="brand-logo-img"
-						/>
+						<img src={signozBrandLogoUrl} alt="SigNoz" className="brand-logo-img" />
 
 						<Typography className="brand-logo-name">SigNoz</Typography>
 					</div>

frontend/src/container/RoutingPolicies/RoutingPolicyList.tsx

@@ -2,6 +2,9 @@ import { useMemo } from 'react';
 import { Button, Table, TableProps, Typography } from 'antd';
 import { RotateCw } from 'lucide-react';
 
+import awwSnapUrl from '@/assets/Icons/awwSnap.svg';
+import emptyStateUrl from '@/assets/Icons/emptyState.svg';
+
 import RoutingPolicyListItem from './RoutingPolicyListItem';
 import { RoutingPolicy, RoutingPolicyListProps } from './types';
 
@@ -36,10 +39,10 @@ function RoutingPolicyList({
 		() => (
 			<div className="no-routing-policies-message-container">
 				{showError ? (
-					<img src="/Icons/awwSnap.svg" alt="aww-snap" className="error-state-svg" />
+					<img src={awwSnapUrl} alt="aww-snap" className="error-state-svg" />
 				) : (
 					<img
-						src="/Icons/emptyState.svg"
+						src={emptyStateUrl}
 						alt="thinking-emoji"
 						className="empty-state-svg"
 					/>

frontend/src/container/SideNav/SideNav.tsx

@@ -66,6 +66,8 @@ import { isModifierKeyPressed } from 'utils/app';
 import { showErrorNotification } from 'utils/error';
 import { openInNewTab } from 'utils/navigation';
 
+import signozBrandLogoUrl from '@/assets/Logos/signoz-brand-logo.svg';
+
 import { useCmdK } from '../../providers/cmdKProvider';
 import { routeConfig } from './config';
 import { getQueryString } from './helper';
@@ -958,7 +960,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 									onClickHandler(ROUTES.HOME, event);
 								}}
 							>
-								<img src="/Logos/signoz-brand-logo.svg" alt="SigNoz" />
+								<img src={signozBrandLogoUrl} alt="SigNoz" />
 							</div>
 
 							{licenseTag && (

frontend/src/container/SpanDetailsDrawer/NoData/NoData.tsx

@@ -1,5 +1,7 @@
 import { Typography } from 'antd';
 
+import noDataUrl from '@/assets/Icons/no-data.svg';
+
 import './NoData.styles.scss';
 
 interface INoDataProps {
@@ -11,7 +13,7 @@ function NoData(props: INoDataProps): JSX.Element {
 
 	return (
 		<div className="no-data">
-			<img src="/Icons/no-data.svg" alt="no-data" className="no-data-img" />
+			<img src={noDataUrl} alt="no-data" className="no-data-img" />
 			<Typography.Text className="no-data-text">
 				No {name} found for selected span
 			</Typography.Text>

frontend/src/container/SpanDetailsDrawer/SpanLogs/SpanLogs.tsx

@@ -30,6 +30,8 @@ import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 import { v4 as uuid } from 'uuid';
 
+import noDataUrl from '@/assets/Icons/no-data.svg';
+
 import './spanLogs.styles.scss';
 
 interface SpanLogsProps {
@@ -233,7 +235,7 @@ function SpanLogs({
 	const renderNoLogsFound = (): JSX.Element => (
 		<div className="span-logs-empty-content">
 			<section className="description">
-				<img src="/Icons/no-data.svg" alt="no-data" className="no-data-img" />
+				<img src={noDataUrl} alt="no-data" className="no-data-img" />
 				<Typography.Text className="no-data-text-1">
 					No logs found for selected span.
 					<span className="no-data-text-2">View logs for the current trace.</span>

frontend/src/container/TraceWaterfall/TraceWaterfallStates/Success/Success.tsx

@@ -33,6 +33,8 @@ import { useAppContext } from 'providers/App/App';
 import { Span } from 'types/api/trace/getTraceV2';
 import { toFixed } from 'utils/toFixed';
 
+import funnelAddUrl from '@/assets/Icons/funnel-add.svg';
+
 import Filters from './Filters/Filters';
 
 import './Success.styles.scss';
@@ -189,7 +191,7 @@ function SpanOverview({
 										icon={
 											<img
 												className="add-funnel-button__icon"
-												src="/Icons/funnel-add.svg"
+												src={funnelAddUrl}
 												alt="funnel-icon"
 											/>
 										}

frontend/src/container/TracesExplorer/TraceLoading/TraceLoading.tsx

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

frontend/src/pages/AlertDetails/AlertNotFound/AlertNotFound.tsx

@@ -7,6 +7,10 @@ import { LifeBuoy, List } from 'lucide-react';
 import { handleContactSupport } from 'pages/Integrations/utils';
 import { isModifierKeyPressed } from 'utils/app';
 
+import broomUrl from '@/assets/Icons/broom.svg';
+import constructionUrl from '@/assets/Icons/construction.svg';
+import noDataUrl from '@/assets/Icons/no-data.svg';
+
 import './AlertNotFound.styles.scss';
 
 interface AlertNotFoundProps {
@@ -28,7 +32,7 @@ function AlertNotFound({ isTestAlert }: AlertNotFoundProps): JSX.Element {
 	return (
 		<div className="alert-not-found">
 			<section className="description">
-				<img src="/Icons/no-data.svg" alt="no-data" className="not-found-img" />
+				<img src={noDataUrl} alt="no-data" className="not-found-img" />
 				<Typography.Text className="not-found-text">
 					Uh-oh! We couldn&apos;t find the given alert rule.
 				</Typography.Text>
@@ -42,17 +46,13 @@ function AlertNotFound({ isTestAlert }: AlertNotFoundProps): JSX.Element {
 				{!isTestAlert && (
 					<>
 						<div className="reason">
-							<img
-								src="/Icons/construction.svg"
-								alt="no-data"
-								className="construction-img"
-							/>
+							<img src={constructionUrl} alt="no-data" className="construction-img" />
 							<Typography.Text className="text">
 								The alert rule link is incorrect, please verify it once.
 							</Typography.Text>
 						</div>
 						<div className="reason">
-							<img src="/Icons/broom.svg" alt="no-data" className="broom-img" />
+							<img src={broomUrl} alt="no-data" className="broom-img" />
 							<Typography.Text className="text">
 								The alert rule you&apos;re trying to check has been deleted.
 							</Typography.Text>
@@ -61,7 +61,7 @@ function AlertNotFound({ isTestAlert }: AlertNotFoundProps): JSX.Element {
 				)}
 				{isTestAlert && (
 					<div className="reason">
-						<img src="/Icons/broom.svg" alt="no-data" className="broom-img" />
+						<img src={broomUrl} alt="no-data" className="broom-img" />
 						<Typography.Text className="text">
 							You clicked on the Alert notification link received when testing a new
 							Alert rule. Once the alert rule is saved, future notifications will link

frontend/src/pages/ErrorBoundaryFallback/ErrorBoundaryFallback.tsx

@@ -5,6 +5,8 @@ import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { Home, LifeBuoy } from 'lucide-react';
 import { handleContactSupport } from 'pages/Integrations/utils';
 
+import cloudUrl from '@/assets/Images/cloud.svg';
+
 import './ErrorBoundaryFallback.styles.scss';
 
 function ErrorBoundaryFallback(): JSX.Element {
@@ -23,7 +25,7 @@ function ErrorBoundaryFallback(): JSX.Element {
 		<div className="error-boundary-fallback-container">
 			<div className="error-boundary-fallback-content">
 				<div className="error-icon">
-					<img src="/Images/cloud.svg" alt="error-cloud-icon" />
+					<img src={cloudUrl} alt="error-cloud-icon" />
 				</div>
 				<div className="title">Something went wrong :/</div>
 

frontend/src/pages/GettingStarted/renderConfig.tsx

@@ -10,6 +10,16 @@ import { Typography } from 'antd';
 import Slack from 'container/SideNav/Slack';
 import store from 'store';
 
+import elixirPngUrl from '@/assets/Logos/elixir.png';
+import goPngUrl from '@/assets/Logos/go.png';
+import javaPngUrl from '@/assets/Logos/java.png';
+import javascriptPngUrl from '@/assets/Logos/javascript.png';
+import msNetFrameworkPngUrl from '@/assets/Logos/ms-net-framework.png';
+import phpPngUrl from '@/assets/Logos/php.png';
+import pythonPngUrl from '@/assets/Logos/python.png';
+import railsPngUrl from '@/assets/Logos/rails.png';
+import rustPngUrl from '@/assets/Logos/rust.png';
+
 import { TGetStartedContentSection } from './types';
 
 export const GetStartedContent = (): TGetStartedContentSection[] => {
@@ -23,14 +33,14 @@ export const GetStartedContent = (): TGetStartedContentSection[] => {
 				{
 					title: 'Instrument your Java Application',
 					icon: (
-						<img src={`/Logos/java.png?currentVersion=${currentVersion}`} alt="" />
+						<img src={`${javaPngUrl}?currentVersion=${currentVersion}`} alt="" />
 					),
 					url: 'https://signoz.io/docs/instrumentation/java/',
 				},
 				{
 					title: 'Instrument your Python Application',
 					icon: (
-						<img src={`/Logos/python.png?currentVersion=${currentVersion}`} alt="" />
+						<img src={`${pythonPngUrl}?currentVersion=${currentVersion}`} alt="" />
 					),
 					url: 'https://signoz.io/docs/instrumentation/python/',
 				},
@@ -38,7 +48,7 @@ export const GetStartedContent = (): TGetStartedContentSection[] => {
 					title: 'Instrument your JS Application',
 					icon: (
 						<img
-							src={`/Logos/javascript.png?currentVersion=${currentVersion}`}
+							src={`${javascriptPngUrl}?currentVersion=${currentVersion}`}
 							alt=""
 						/>
 					),
@@ -46,16 +56,14 @@ export const GetStartedContent = (): TGetStartedContentSection[] => {
 				},
 				{
 					title: 'Instrument your Go Application',
-					icon: (
-						<img src={`/Logos/go.png?currentVersion=${currentVersion}`} alt="" />
-					),
+					icon: <img src={`${goPngUrl}?currentVersion=${currentVersion}`} alt="" />,
 					url: 'https://signoz.io/docs/instrumentation/golang/',
 				},
 				{
 					title: 'Instrument your .NET Application',
 					icon: (
 						<img
-							src={`/Logos/ms-net-framework.png?currentVersion=${currentVersion}`}
+							src={`${msNetFrameworkPngUrl}?currentVersion=${currentVersion}`}
 							alt=""
 						/>
 					),
@@ -63,29 +71,27 @@ export const GetStartedContent = (): TGetStartedContentSection[] => {
 				},
 				{
 					title: 'Instrument your PHP Application',
-					icon: (
-						<img src={`/Logos/php.png?currentVersion=${currentVersion}`} alt="" />
-					),
+					icon: <img src={`${phpPngUrl}?currentVersion=${currentVersion}`} alt="" />,
 					url: 'https://signoz.io/docs/instrumentation/php/',
 				},
 				{
 					title: 'Instrument your Rails Application',
 					icon: (
-						<img src={`/Logos/rails.png?currentVersion=${currentVersion}`} alt="" />
+						<img src={`${railsPngUrl}?currentVersion=${currentVersion}`} alt="" />
 					),
 					url: 'https://signoz.io/docs/instrumentation/ruby-on-rails/',
 				},
 				{
 					title: 'Instrument your Rust Application',
 					icon: (
-						<img src={`/Logos/rust.png?currentVersion=${currentVersion}`} alt="" />
+						<img src={`${rustPngUrl}?currentVersion=${currentVersion}`} alt="" />
 					),
 					url: 'https://signoz.io/docs/instrumentation/rust/',
 				},
 				{
 					title: 'Instrument your Elixir Application',
 					icon: (
-						<img src={`/Logos/elixir.png?currentVersion=${currentVersion}`} alt="" />
+						<img src={`${elixirPngUrl}?currentVersion=${currentVersion}`} alt="" />
 					),
 					url: 'https://signoz.io/docs/instrumentation/elixir/',
 				},

frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailPage.tsx

@@ -6,6 +6,8 @@ import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { defaultTo } from 'lodash-es';
 import { ArrowLeft, MoveUpRight, RotateCw } from 'lucide-react';
 
+import awwSnapUrl from '@/assets/Icons/awwSnap.svg';
+
 import { handleContactSupport } from '../utils';
 import IntegrationDetailContent from './IntegrationDetailContent';
 import IntegrationDetailHeader from './IntegrationDetailHeader';
@@ -84,11 +86,7 @@ function IntegrationDetailPage(props: IntegrationDetailPageProps): JSX.Element {
 			) : isError ? (
 				<div className="error-container">
 					<div className="error-content">
-						<img
-							src="/Icons/awwSnap.svg"
-							alt="error-emoji"
-							className="error-state-svg"
-						/>
+						<img src={awwSnapUrl} alt="error-emoji" className="error-state-svg" />
 						<Typography.Text>
 							Something went wrong :/ Please retry or contact support.
 						</Typography.Text>

frontend/src/pages/Integrations/IntegrationsList.tsx

@@ -6,6 +6,9 @@ import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { MoveUpRight, RotateCw } from 'lucide-react';
 import { IntegrationsProps } from 'types/api/integrations/types';
 
+import awwSnapUrl from '@/assets/Icons/awwSnap.svg';
+import awsDarkUrl from '@/assets/Logos/aws-dark.svg';
+
 import { handleContactSupport, INTEGRATION_TYPES } from './utils';
 
 import './Integrations.styles.scss';
@@ -19,7 +22,7 @@ export const AWS_INTEGRATION = {
 		email: 'integrations@signoz.io',
 		homepage: 'https://signoz.io',
 	},
-	icon: `Logos/aws-dark.svg`,
+	icon: awsDarkUrl,
 	is_installed: false,
 	is_new: true,
 };
@@ -60,11 +63,7 @@ function IntegrationsList(props: IntegrationsListProps): JSX.Element {
 			{!loading && isError && (
 				<div className="error-container">
 					<div className="error-content">
-						<img
-							src="/Icons/awwSnap.svg"
-							alt="error-emoji"
-							className="error-state-svg"
-						/>
+						<img src={awwSnapUrl} alt="error-emoji" className="error-state-svg" />
 						<Typography.Text>
 							Something went wrong :/ Please retry or contact support.
 						</Typography.Text>

frontend/src/pages/PublicDashboard/index.tsx

@@ -3,6 +3,8 @@ import { Typography } from 'antd';
 import { useGetPublicDashboardData } from 'hooks/dashboard/useGetPublicDashboardData';
 import { FrownIcon } from 'lucide-react';
 
+import signozBrandLogoUrl from '@/assets/Logos/signoz-brand-logo.svg';
+
 import PublicDashboardContainer from '../../container/PublicDashboardContainer';
 
 import './PublicDashboard.styles.scss';
@@ -38,11 +40,7 @@ function PublicDashboardPage(): JSX.Element {
 
 					<div className="public-dashboard-error-content-header">
 						<div className="brand">
-							<img
-								src="/Logos/signoz-brand-logo.svg"
-								alt="SigNoz"
-								className="brand-logo"
-							/>
+							<img src={signozBrandLogoUrl} alt="SigNoz" className="brand-logo" />
 
 							<Typography.Title level={2} className="brand-title">
 								SigNoz

frontend/src/pages/SignUp/SignUp.tsx

@@ -13,6 +13,8 @@ import { useNotifications } from 'hooks/useNotifications';
 import { ArrowRight, CircleAlert } from 'lucide-react';
 import APIError from 'types/api/error';
 
+import tvUrl from '@/assets/svgs/tv.svg';
+
 import { FormContainer, Label } from './styles';
 
 import './SignUp.styles.scss';
@@ -130,7 +132,7 @@ function SignUp(): JSX.Element {
 			<div className="signup-card">
 				<div className="signup-form-header">
 					<div className="signup-header-icon">
-						<img src="/svgs/tv.svg" alt="TV" width="32" height="32" />
+						<img src={tvUrl} alt="TV" width="32" height="32" />
 					</div>
 					<Typography.Title level={4} className="signup-header-title">
 						Create your account

frontend/src/pages/TraceDetailV2/NoData/NoData.tsx

@@ -3,6 +3,10 @@ import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { LifeBuoy, RefreshCw } from 'lucide-react';
 import { handleContactSupport } from 'pages/Integrations/utils';
 
+import broomUrl from '@/assets/Icons/broom.svg';
+import constructionUrl from '@/assets/Icons/construction.svg';
+import noDataUrl from '@/assets/Icons/no-data.svg';
+
 import './NoData.styles.scss';
 
 function NoData(): JSX.Element {
@@ -11,7 +15,7 @@ function NoData(): JSX.Element {
 	return (
 		<div className="not-found-trace">
 			<section className="description">
-				<img src="/Icons/no-data.svg" alt="no-data" className="not-found-img" />
+				<img src={noDataUrl} alt="no-data" className="not-found-img" />
 				<Typography.Text className="not-found-text-1">
 					Uh-oh! We cannot show the selected trace.
 					<span className="not-found-text-2">
@@ -21,18 +25,14 @@ function NoData(): JSX.Element {
 			</section>
 			<section className="reasons">
 				<div className="reason-1">
-					<img
-						src="/Icons/construction.svg"
-						alt="no-data"
-						className="construction-img"
-					/>
+					<img src={constructionUrl} alt="no-data" className="construction-img" />
 					<Typography.Text className="text">
 						The trace data has not been rendered on your SigNoz server yet. You can
 						wait for a bit and refresh this page if this is the case.
 					</Typography.Text>
 				</div>
 				<div className="reason-2">
-					<img src="/Icons/broom.svg" alt="no-data" className="broom-img" />
+					<img src={broomUrl} alt="no-data" className="broom-img" />
 					<Typography.Text className="text">
 						The trace has been deleted as the data has crossed it’s retention period.
 					</Typography.Text>

frontend/src/pages/TracesFunnelDetails/components/FunnelResults/EmptyFunnelResults.tsx

@@ -1,5 +1,7 @@
 import LearnMore from 'components/LearnMore/LearnMore';
 
+import emptyFunnelIconUrl from '@/assets/Icons/empty-funnel-icon.svg';
+
 import './EmptyFunnelResults.styles.scss';
 
 function EmptyFunnelResults({
@@ -13,7 +15,7 @@ function EmptyFunnelResults({
 		<div className="funnel-results funnel-results--empty">
 			<div className="empty-funnel-results">
 				<div className="empty-funnel-results__icon">
-					<img src="/Icons/empty-funnel-icon.svg" alt="Empty funnel results" />
+					<img src={emptyFunnelIconUrl} alt="Empty funnel results" />
 				</div>
 				<div className="empty-funnel-results__title">{title}</div>
 				<div className="empty-funnel-results__description">{description}</div>

frontend/src/pages/TracesFunnelDetails/components/FunnelResults/FunnelTable.tsx

@@ -1,5 +1,7 @@
 import { Empty, Table, TableColumnProps as ColumnProps, Tooltip } from 'antd';
 
+import solidInfoCircleUrl from '@/assets/Icons/solid-info-circle.svg';
+
 import './FunnelTable.styles.scss';
 
 interface FunnelTableProps {
@@ -23,7 +25,7 @@ function FunnelTable({
 				<div className="funnel-table__title">{title}</div>
 				<div className="funnel-table__actions">
 					<Tooltip title={tooltip ?? null}>
-						<img src="/Icons/solid-info-circle.svg" alt="info" />
+						<img src={solidInfoCircleUrl} alt="info" />
 					</Tooltip>
 				</div>
 			</div>

frontend/src/pages/TracesFunnels/components/FunnelsEmptyState/FunnelsEmptyState.tsx

@@ -3,6 +3,8 @@ import LearnMore from 'components/LearnMore/LearnMore';
 import { Plus } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 
+import alertEmojiUrl from '@/assets/Icons/alert_emoji.svg';
+
 import './FunnelsEmptyState.styles.scss';
 
 interface FunnelsEmptyStateProps {
@@ -19,7 +21,7 @@ function FunnelsEmptyState({
 			<div className="funnels-empty__content">
 				<section className="funnels-empty__header">
 					<img
-						src="/Icons/alert_emoji.svg"
+						src={alertEmojiUrl}
 						alt="funnels-empty-icon"
 						className="funnels-empty__icon"
 					/>

frontend/src/pages/WorkspaceAccessRestricted/WorkspaceAccessRestricted.tsx

@@ -5,6 +5,8 @@ import history from 'lib/history';
 import { useAppContext } from 'providers/App/App';
 import { LicensePlatform, LicenseState } from 'types/api/licensesV3/getActive';
 
+import featureGraphicCorrelationUrl from '@/assets/Images/feature-graphic-correlation.svg';
+
 import './WorkspaceAccessRestricted.styles.scss';
 
 function WorkspaceAccessRestricted(): JSX.Element {
@@ -113,10 +115,7 @@ function WorkspaceAccessRestricted(): JSX.Element {
 								</Col>
 							</Row>
 							<div className="workspace-access-restricted__creative">
-								<img
-									src="/Images/feature-graphic-correlation.svg"
-									alt="correlation-graphic"
-								/>
+								<img src={featureGraphicCorrelationUrl} alt="correlation-graphic" />
 							</div>
 						</>
 					)}

frontend/src/pages/WorkspaceSuspended/WorkspaceSuspended.tsx

@@ -23,6 +23,8 @@ import APIError from 'types/api/error';
 import { LicensePlatform, LicenseState } from 'types/api/licensesV3/getActive';
 import { getFormattedDateWithMinutes } from 'utils/timeUtils';
 
+import featureGraphicCorrelationUrl from '@/assets/Images/feature-graphic-correlation.svg';
+
 import './WorkspaceSuspended.styles.scss';
 
 function WorkspaceSuspended(): JSX.Element {
@@ -165,10 +167,7 @@ function WorkspaceSuspended(): JSX.Element {
 								</Row>
 							)}
 							<div className="workspace-suspended__creative">
-								<img
-									src="/Images/feature-graphic-correlation.svg"
-									alt="correlation-graphic"
-								/>
+								<img src={featureGraphicCorrelationUrl} alt="correlation-graphic" />
 							</div>
 						</>
 					)}

frontend/stylelint-rules/no-unsupported-asset-url.js

@@ -0,0 +1,124 @@
+/**
+ * Stylelint rule: local/no-unsupported-asset-url
+ *
+ * Disallows asset URLs in CSS `url()` declarations that are not base-path-safe.
+ * When SigNoz is served from a sub-path (e.g. /app/), absolute and public-dir
+ * relative paths break because they bypass Vite's module pipeline and don't get
+ * the runtime base-path prefix.
+ *
+ * Flagged patterns:
+ *   - Absolute paths:          url('/icons/logo.svg')
+ *   - Public-relative paths:   url('../public/icons/logo.svg')
+ *   - Public-dir segments:     url('Icons/logo.svg')  (resolves from public/)
+ *
+ * Required pattern (base-path-safe):
+ *   - src/assets ES import:    import logo from '../../assets/icons/logo.svg'
+ *                              then reference via the imported variable in JS/TS.
+ *   - Relative from src/assets in SCSS: url('../../assets/icons/logo.svg')
+ *
+ * See: https://vitejs.dev/guide/assets  (Static Asset Handling)
+ */
+import stylelint from 'stylelint';
+import { createRequire } from 'module';
+
+const require = createRequire(import.meta.url);
+const {
+	containsAssetExtension,
+	isAbsolutePath,
+	isPublicRelative,
+	isRelativePublicDir,
+} = require('../eslint-rules/shared/asset-patterns');
+
+const ruleName = 'local/no-unsupported-asset-url';
+
+/**
+ * Extracts all url() inner path strings from a CSS declaration value.
+ * Handles single-quoted, double-quoted, and unquoted url() forms.
+ * e.g. "url('/a.svg') url('/b.png') repeat" → ['/a.svg', '/b.png']
+ */
+function extractUrlPaths(value) {
+	if (typeof value !== 'string') return [];
+	const paths = [];
+	const urlPattern = /url\(\s*['"]?([^'")\s]+)['"]?\s*\)/g;
+	let match = urlPattern.exec(value);
+	while (match !== null) {
+		paths.push(match[1]);
+		match = urlPattern.exec(value);
+	}
+	return paths;
+}
+
+const meta = {};
+
+const messages = stylelint.utils.ruleMessages(ruleName, {
+	absolutePath: (urlPath) =>
+		`Absolute asset path "${urlPath}" in url() is not base-path-safe. ` +
+		`Use a relative path from src/assets/ instead: url('../../assets/...')`,
+	publicPath: () =>
+		`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 a relative path from src/assets/ instead: url('../../assets/...')`,
+	relativePath: (urlPath) =>
+		`Relative public-dir path "${urlPath}" in url() is not base-path-safe. ` +
+		`Use a relative path from src/assets/ instead: url('../../assets/...')`,
+});
+
+/**
+ * Rule implementation. Walks every CSS declaration in the file and checks
+ * each url() path against three forbidden patterns (absolute, public-relative,
+ * public-dir segment). Reports a violation with a fix hint for each match.
+ *
+ * `primaryOption` is the value from the stylelint config — the rule is a no-op
+ * when falsy (i.e. `"local/no-unsupported-asset-url": [false]`).
+ *
+ * @type {import('stylelint').Rule}
+ */
+const rule = (primaryOption) => {
+	return (root, result) => {
+		if (!primaryOption) return;
+
+		root.walkDecls((decl) => {
+			const urlPaths = extractUrlPaths(decl.value);
+
+			for (const urlPath of urlPaths) {
+				// Pattern #1: absolute path with asset extension
+				if (isAbsolutePath(urlPath) && containsAssetExtension(urlPath)) {
+					stylelint.utils.report({
+						message: messages.absolutePath(urlPath),
+						node: decl,
+						result,
+						ruleName,
+					});
+					continue;
+				}
+
+				// Pattern #2: relative path into public/ with asset extension
+				if (isPublicRelative(urlPath) && containsAssetExtension(urlPath)) {
+					stylelint.utils.report({
+						message: messages.publicPath(),
+						node: decl,
+						result,
+						ruleName,
+					});
+					continue;
+				}
+
+				// Pattern #3: relative public-dir segment, e.g. url('Icons/foo.svg')
+				if (isRelativePublicDir(urlPath) && containsAssetExtension(urlPath)) {
+					stylelint.utils.report({
+						message: messages.relativePath(urlPath),
+						node: decl,
+						result,
+						ruleName,
+					});
+				}
+			}
+		});
+	};
+};
+
+rule.ruleName = ruleName;
+rule.messages = messages;
+rule.meta = meta;
+
+export { ruleName, rule, meta };
+export default { ruleName, rule, meta };

frontend/yarn.lock

@@ -2486,6 +2486,24 @@
   resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-7.0.1.tgz#457233b0a18741b7711855044102b82bae7a070b"
   integrity sha512-URg8UM6lfC9ZYqFipItRSxYJdgpU5d2Z4KnjsJ+rj6tgAmGme7E+PQNCiud8g0HDaZKMovu2qjfa0f5Ge0Vlsg==
 
+"@cacheable/memory@^2.0.8":
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/@cacheable/memory/-/memory-2.0.8.tgz#244b735e4d087c7826f2ce3ea45b57a56b272792"
+  integrity sha512-FvEb29x5wVwu/Kf93IWwsOOEuhHh6dYCJF3vcKLzXc0KXIW181AOzv6ceT4ZpBHDvAfG60eqb+ekmrnLHIy+jw==
+  dependencies:
+    "@cacheable/utils" "^2.4.0"
+    "@keyv/bigmap" "^1.3.1"
+    hookified "^1.15.1"
+    keyv "^5.6.0"
+
+"@cacheable/utils@^2.4.0":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@cacheable/utils/-/utils-2.4.1.tgz#614ab46e4e2adf94785d8adaadbf40873d0eb12d"
+  integrity sha512-eiFgzCbIneyMlLOmNG4g9xzF7Hv3Mga4LjxjcSC/ues6VYq2+gUbQI8JqNuw/ZM8tJIeIaBGpswAsqV2V7ApgA==
+  dependencies:
+    hashery "^1.5.1"
+    keyv "^5.6.0"
+
 "@codemirror/autocomplete@6.18.6", "@codemirror/autocomplete@^6.0.0":
   version "6.18.6"
   resolved "https://registry.yarnpkg.com/@codemirror/autocomplete/-/autocomplete-6.18.6.tgz#de26e864a1ec8192a1b241eb86addbb612964ddb"
@@ -2902,6 +2920,41 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
+"@csstools/css-calc@^3.1.1":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@csstools/css-calc/-/css-calc-3.2.0.tgz#15ca1a80a026ced0f6c4e12124c398e3db8e1617"
+  integrity sha512-bR9e6o2BDB12jzN/gIbjHa5wLJ4UjD1CB9pM7ehlc0ddk6EBz+yYS1EV2MF55/HUxrHcB/hehAyt5vhsA3hx7w==
+
+"@csstools/css-parser-algorithms@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@csstools/css-parser-algorithms/-/css-parser-algorithms-4.0.0.tgz#e1c65dc09378b42f26a111fca7f7075fc2c26164"
+  integrity sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==
+
+"@csstools/css-syntax-patches-for-csstree@^1.1.2":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.1.3.tgz#3204cf40deb97db83e225b0baa9e37d9c3bd344d"
+  integrity sha512-SH60bMfrRCJF3morcdk57WklujF4Jr/EsQUzqkarfHXEFcAR1gg7fS/chAE922Sehgzc1/+Tz5H3Ypa1HiEKrg==
+
+"@csstools/css-tokenizer@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@csstools/css-tokenizer/-/css-tokenizer-4.0.0.tgz#798a33950d11226a0ebb6acafa60f5594424967f"
+  integrity sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==
+
+"@csstools/media-query-list-parser@^5.0.0":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@csstools/media-query-list-parser/-/media-query-list-parser-5.0.0.tgz#99e8d03ff6f9f8df8cf9876e0f17d075e6dae9e7"
+  integrity sha512-T9lXmZOfnam3eMERPsszjY5NK0jX8RmThmmm99FZ8b7z8yMaFZWKwLWGZuTwdO3ddRY5fy13GmmEYZXB4I98Eg==
+
+"@csstools/selector-resolve-nested@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@csstools/selector-resolve-nested/-/selector-resolve-nested-4.0.0.tgz#ccc38c2cdc14c3ddd1d94647803facef654d47e2"
+  integrity sha512-9vAPxmp+Dx3wQBIUwc1v7Mdisw1kbbaGqXUM8QLTgWg7SoPGYtXBsMXvsFs/0Bn5yoFhcktzxNZGNaUt0VjgjA==
+
+"@csstools/selector-specificity@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-6.0.0.tgz#ef28e27c1ded1d8e5c54879a9399e7055aed1920"
+  integrity sha512-4sSgl78OtOXEX/2d++8A83zHNTgwCJMaR24FvsYL7Uf/VS8HZk9PTwR51elTbGqMuwH3szLvvOXEaVnqn0Z3zA==
+
 "@ctrl/tinycolor@^3.4.0":
   version "3.6.0"
   resolved "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.0.tgz"
@@ -3899,6 +3952,19 @@
   resolved "https://registry.yarnpkg.com/@jsep-plugin/ternary/-/ternary-1.1.4.tgz#1ac778bee799137f116cc108f3bf58b9615c45c3"
   integrity sha512-ck5wiqIbqdMX6WRQztBL7ASDty9YLgJ3sSAK5ZpBzXeySvFGCzIvM6UiAI4hTZ22fEcYQVV/zhUbNscggW+Ukg==
 
+"@keyv/bigmap@^1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@keyv/bigmap/-/bigmap-1.3.1.tgz#fc82fa83947e7ff68c6798d08907db842771ef2c"
+  integrity sha512-WbzE9sdmQtKy8vrNPa9BRnwZh5UF4s1KTmSK0KUVLo3eff5BlQNNWDnFOouNpKfPKDnms9xynJjsMYjMaT/aFQ==
+  dependencies:
+    hashery "^1.4.0"
+    hookified "^1.15.0"
+
+"@keyv/serialize@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@keyv/serialize/-/serialize-1.1.1.tgz#0c01dd3a3483882af7cf3878d4e71d505c81fc4a"
+  integrity sha512-dXn3FZhPv0US+7dtJsIi2R+c7qWYiReoEh5zUntWCf4oSpMNib8FDhSoed6m3QyZdx5hK7iLFkYk3rNxwt8vTA==
+
 "@lezer/common@^1.0.0", "@lezer/common@^1.1.0", "@lezer/common@^1.2.0":
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/@lezer/common/-/common-1.2.3.tgz#138fcddab157d83da557554851017c6c1e5667fd"
@@ -5782,6 +5848,11 @@
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-4.6.0.tgz#3c7c9c46e678feefe7a2e5bb609d3dbd665ffb3f"
   integrity sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw==
 
+"@sindresorhus/merge-streams@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@sindresorhus/merge-streams/-/merge-streams-4.0.0.tgz#abb11d99aeb6d27f1b563c38147a72d50058e339"
+  integrity sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==
+
 "@sinonjs/commons@^3.0.0", "@sinonjs/commons@^3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-3.0.1.tgz#1029357e44ca901a615585f6d27738dbc89084cd"
@@ -7481,6 +7552,11 @@ ansi-regex@^6.0.1:
   resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz"
   integrity sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==
 
+ansi-regex@^6.2.2:
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-6.2.2.tgz#60216eea464d864597ce2832000738a0589650c1"
+  integrity sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==
+
 ansi-styles@^3.2.1:
   version "3.2.1"
   resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz"
@@ -8526,6 +8602,17 @@ cacheable-request@^7.0.2:
     normalize-url "^6.0.1"
     responselike "^2.0.0"
 
+cacheable@^2.3.4:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/cacheable/-/cacheable-2.3.4.tgz#8d8114c01aa603d2441e4d8fd57ac6a25a585177"
+  integrity sha512-djgxybDbw9fL/ZWMI3+CE8ZilNxcwFkVtDc1gJ+IlOSSWkSMPQabhV/XCHTQ6pwwN6aivXPZ43omTooZiX06Ew==
+  dependencies:
+    "@cacheable/memory" "^2.0.8"
+    "@cacheable/utils" "^2.4.0"
+    hookified "^1.15.0"
+    keyv "^5.6.0"
+    qified "^0.9.0"
+
 call-bind-apply-helpers@^1.0.0, call-bind-apply-helpers@^1.0.1, call-bind-apply-helpers@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz#4b5428c222be985d79c3d82657479dbe0b59b2d6"
@@ -8960,6 +9047,11 @@ color@^4.2.1:
     color-convert "^2.0.1"
     color-string "^1.9.0"
 
+colord@^2.9.3:
+  version "2.9.3"
+  resolved "https://registry.yarnpkg.com/colord/-/colord-2.9.3.tgz#4f8ce919de456f1d5c1c368c307fe20f3e59fb43"
+  integrity sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==
+
 colorette@^2.0.16:
   version "2.0.20"
   resolved "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz"
@@ -9196,6 +9288,16 @@ cosmiconfig@^9.0.0:
     js-yaml "^4.1.0"
     parse-json "^5.2.0"
 
+cosmiconfig@^9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-9.0.1.tgz#df110631a8547b5d1a98915271986f06e3011379"
+  integrity sha512-hr4ihw+DBqcvrsEDioRO31Z17x71pUYoNe/4h6Z0wB72p7MU7/9gH8Q3s12NFhHPfYBBOV3qyfUxmr/Yn3shnQ==
+  dependencies:
+    env-paths "^2.2.1"
+    import-fresh "^3.3.0"
+    js-yaml "^4.1.0"
+    parse-json "^5.2.0"
+
 create-require@^1.1.0:
   version "1.1.1"
   resolved "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz"
@@ -9246,6 +9348,11 @@ css-color-keywords@^1.0.0:
   resolved "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz"
   integrity sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==
 
+css-functions-list@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/css-functions-list/-/css-functions-list-3.3.3.tgz#c4ab5008659de2e3baf3752c8fdef7662f3ffe23"
+  integrity sha512-8HFEBPKhOpJPEPu70wJJetjKta86Gw9+CCyCnB3sui2qQfOvRyqBy4IKLKKAwdMpWb2lHXWk9Wb4Z6AmaUT1Pg==
+
 css-in-js-utils@^3.1.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-3.1.0.tgz"
@@ -9305,6 +9412,14 @@ css-tree@^3.0.1:
     mdn-data "2.12.2"
     source-map-js "^1.0.1"
 
+css-tree@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-3.2.1.tgz#86cac7011561272b30e6b1e042ba6ce047aa7518"
+  integrity sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==
+  dependencies:
+    mdn-data "2.27.1"
+    source-map-js "^1.2.1"
+
 css-tree@~2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-2.2.1.tgz#36115d382d60afd271e377f9c5f67d02bd48c032"
@@ -10601,6 +10716,11 @@ eslint-plugin-react@^7.24.0:
     string.prototype.matchall "^4.0.12"
     string.prototype.repeat "^1.0.0"
 
+eslint-plugin-rulesdir@0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-rulesdir/-/eslint-plugin-rulesdir-0.2.2.tgz#84756ec39cd8503b1fe8af6a02a5da361e2bd076"
+  integrity sha512-qhBtmrWgehAIQeMDJ+Q+PnOz1DWUZMPeVrI0wE9NZtnpIMFUfh3aPKFYt2saeMSemZRrvUtjWfYwepsC8X+mjQ==
+
 eslint-plugin-simple-import-sort@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-7.0.0.tgz#a1dad262f46d2184a90095a60c66fef74727f0f8"
@@ -10884,7 +11004,7 @@ fast-diff@^1.1.2:
   resolved "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz"
   integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
 
-fast-glob@^3.2.11, fast-glob@^3.2.7:
+fast-glob@^3.2.11, fast-glob@^3.2.7, fast-glob@^3.3.3:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.3.tgz#d06d585ce8dba90a16b0505c543c3ccfb3aeb818"
   integrity sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==
@@ -10953,6 +11073,11 @@ fast_array_intersect@1.1.0:
   resolved "https://registry.yarnpkg.com/fast_array_intersect/-/fast_array_intersect-1.1.0.tgz#8e8a83d95c515fd55bfb2b02da94da3d7f1c2b8b"
   integrity sha512-/DCilZlUdz2XyNDF+ASs0PwY+RKG9Y4Silp/gbS72Cvbg4oibc778xcecg+pnNyiNHYgh/TApsiDTjpdniyShw==
 
+fastest-levenshtein@^1.0.16:
+  version "1.0.16"
+  resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz#210e61b6ff181de91ea9b3d1b84fdedd47e034e5"
+  integrity sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==
+
 fastest-stable-stringify@^2.0.2:
   version "2.0.2"
   resolved "https://registry.npmjs.org/fastest-stable-stringify/-/fastest-stable-stringify-2.0.2.tgz"
@@ -10996,6 +11121,13 @@ figures@^3.0.0:
   dependencies:
     escape-string-regexp "^1.0.5"
 
+file-entry-cache@^11.1.2:
+  version "11.1.2"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-11.1.2.tgz#5b2014aac2259b5591ae6fd7f6d1ed2153545abe"
+  integrity sha512-N2WFfK12gmrK1c1GXOqiAJ1tc5YE+R53zvQ+t5P8S5XhnmKYVB5eZEiLNZKDSmoG8wqqbF9EXYBBW/nef19log==
+  dependencies:
+    flat-cache "^6.1.20"
+
 file-entry-cache@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
@@ -11072,11 +11204,25 @@ flat-cache@^3.0.4:
     keyv "^4.5.3"
     rimraf "^3.0.2"
 
+flat-cache@^6.1.20:
+  version "6.1.22"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-6.1.22.tgz#e9f31d567179bb5f0f2fc011e6f89af2cc94f918"
+  integrity sha512-N2dnzVJIphnNsjHcrxGW7DePckJ6haPrSFqpsBUhHYgwtKGVq4JrBGielEGD2fCVnsGm1zlBVZ8wGhkyuetgug==
+  dependencies:
+    cacheable "^2.3.4"
+    flatted "^3.4.2"
+    hookified "^1.15.0"
+
 flatted@^3.2.9:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.3.tgz#67c8fad95454a7c7abebf74bb78ee74a44023358"
   integrity sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==
 
+flatted@^3.4.2:
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.4.2.tgz#f5c23c107f0f37de8dbdf24f13722b3b98d52726"
+  integrity sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==
+
 float-tooltip@^1.7:
   version "1.7.5"
   resolved "https://registry.yarnpkg.com/float-tooltip/-/float-tooltip-1.7.5.tgz#7083bf78f0de5a97f9c2d6aa8e90d2139f34047f"
@@ -11298,7 +11444,7 @@ get-caller-file@^2.0.5:
   resolved "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
-get-east-asian-width@^1.0.0:
+get-east-asian-width@^1.0.0, get-east-asian-width@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/get-east-asian-width/-/get-east-asian-width-1.5.0.tgz#ce7008fe345edcf5497a6f557cfa54bc318a9ce7"
   integrity sha512-CQ+bEO+Tva/qlmw24dCejulK5pMzVnUOFOijVogd3KQs07HnRIgp8TGipvCCRT06xeYEbpbgwaCxglFyiuIcmA==
@@ -11476,6 +11622,22 @@ global-dirs@^0.1.1:
   dependencies:
     ini "^1.3.4"
 
+global-modules@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-2.0.0.tgz#997605ad2345f27f51539bea26574421215c7780"
+  integrity sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==
+  dependencies:
+    global-prefix "^3.0.0"
+
+global-prefix@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/global-prefix/-/global-prefix-3.0.0.tgz#fc85f73064df69f50421f47f883fe5b913ba9b97"
+  integrity sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==
+  dependencies:
+    ini "^1.3.5"
+    kind-of "^6.0.2"
+    which "^1.3.1"
+
 globals@^11.1.0:
   version "11.12.0"
   resolved "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz"
@@ -11527,6 +11689,23 @@ globby@^12.0.0:
     merge2 "^1.4.1"
     slash "^4.0.0"
 
+globby@^16.2.0:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-16.2.0.tgz#6ab1351fbac1d9b9e47ed423814c2ad41af308ea"
+  integrity sha512-QrJia2qDf5BB/V6HYlDTs0I0lBahyjLzpGQg3KT7FnCdTonAyPy2RtY802m2k4ALx6Dp752f82WsOczEVr3l6Q==
+  dependencies:
+    "@sindresorhus/merge-streams" "^4.0.0"
+    fast-glob "^3.3.3"
+    ignore "^7.0.5"
+    is-path-inside "^4.0.0"
+    slash "^5.1.0"
+    unicorn-magic "^0.4.0"
+
+globjoin@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/globjoin/-/globjoin-0.1.4.tgz#2f4494ac8919e3767c5cbb691e9f463324285d43"
+  integrity sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==
+
 globrex@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/globrex/-/globrex-0.1.2.tgz#dd5d9ec826232730cd6793a5e33a9302985e6098"
@@ -11603,6 +11782,11 @@ has-flag@^4.0.0:
   resolved "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
+has-flag@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-5.0.1.tgz#5483db2ae02a472d1d0691462fc587d1843cd940"
+  integrity sha512-CsNUt5x9LUdx6hnk/E2SZLsDyvfqANZSUq4+D3D8RzDJ2M+HDTIkF60ibS1vHaK55vzgiZw1bEPFG9yH7l33wA==
+
 has-property-descriptors@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz"
@@ -11660,6 +11844,13 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+hashery@^1.4.0, hashery@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/hashery/-/hashery-1.5.1.tgz#4ba82ad54911ac617467870845d57a9fe508a400"
+  integrity sha512-iZyKG96/JwPz1N55vj2Ie2vXbhu440zfUfJvSwEqEbeLluk7NnapfGqa7LH0mOsnDxTF85Mx8/dyR6HfqcbmbQ==
+  dependencies:
+    hookified "^1.15.0"
+
 hasown@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.0.tgz#f4c513d454a57b7c7e1650778de226b11700546c"
@@ -11946,6 +12137,16 @@ hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-
   dependencies:
     react-is "^16.7.0"
 
+hookified@^1.15.0, hookified@^1.15.1:
+  version "1.15.1"
+  resolved "https://registry.yarnpkg.com/hookified/-/hookified-1.15.1.tgz#b1fafeaa5489cdc29cb85546a8f837ed4ffbbcb6"
+  integrity sha512-MvG/clsADq1GPM2KGo2nyfaWVyn9naPiXrqIe4jYjXNZQt238kWyOGrsyc/DmRAQ+Re6yeo6yX/yoNCG5KAEVg==
+
+hookified@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/hookified/-/hookified-2.1.1.tgz#50e21c700e447d5c30e4ff8574e8ff28cbd641f0"
+  integrity sha512-AHb76R16GB5EsPBE2J7Ko5kiEyXwviB9P5SMrAKcuAu4vJPZttViAbj9+tZeaQE5zjDme+1vcHP78Yj/WoAveA==
+
 hosted-git-info@^2.1.4:
   version "2.8.9"
   resolved "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz"
@@ -11990,6 +12191,11 @@ html-parse-stringify@^3.0.1:
   dependencies:
     void-elements "3.1.0"
 
+html-tags@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-5.1.0.tgz#ec7214b57b3e50e2a4cec39414454338a94291f8"
+  integrity sha512-n6l5uca7/y5joxZ3LUePhzmBFUJ+U2YWzhMa8XUTecSeSlQiZdF5XAd/Q3/WUl0VsXgUwWi8I7CNIwdI5WN1SQ==
+
 html-void-elements@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/html-void-elements/-/html-void-elements-2.0.1.tgz#29459b8b05c200b6c5ee98743c41b979d577549f"
@@ -12147,6 +12353,11 @@ ignore@^5.2.0:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
   integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
 
+ignore@^7.0.5:
+  version "7.0.5"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-7.0.5.tgz#4cb5f6cd7d4c7ab0365738c7aea888baa6d7efd9"
+  integrity sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==
+
 image-size@~0.5.0:
   version "0.5.5"
   resolved "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz"
@@ -12217,7 +12428,7 @@ import-local@^3.2.0:
     pkg-dir "^4.2.0"
     resolve-cwd "^3.0.0"
 
-import-meta-resolve@^4.0.0:
+import-meta-resolve@^4.0.0, import-meta-resolve@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/import-meta-resolve/-/import-meta-resolve-4.2.0.tgz#08cb85b5bd37ecc8eb1e0f670dc2767002d43734"
   integrity sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==
@@ -12260,7 +12471,7 @@ ini@4.1.1:
   resolved "https://registry.yarnpkg.com/ini/-/ini-4.1.1.tgz#d95b3d843b1e906e56d6747d5447904ff50ce7a1"
   integrity sha512-QQnnxNyfvmHFIsj7gkPcYymR8Jdw/o7mp5ZFihxn6h8Ci6fh3Dx4E1gPjpQEpIuPo9XVNY/ZUwh4BPMjGyL01g==
 
-ini@^1.3.4:
+ini@^1.3.4, ini@^1.3.5:
   version "1.3.8"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
   integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
@@ -12652,6 +12863,11 @@ is-obj@^2.0.0:
   resolved "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz"
   integrity sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==
 
+is-path-inside@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-4.0.0.tgz#805aeb62c47c1b12fc3fd13bfb3ed1e7430071db"
+  integrity sha512-lJJV/5dYS+RcL8uQdBDW9c9uWFLLBNRyFhnAKXw5tVqLlKZ4RMGZKv+YQ/IA3OhD+RpbJa1LLFM1FQPGyIXvOA==
+
 is-plain-obj@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz"
@@ -13720,7 +13936,14 @@ keyv@^4.0.0, keyv@^4.5.3:
   dependencies:
     json-buffer "3.0.1"
 
-kind-of@^6.0.3:
+keyv@^5.6.0:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/keyv/-/keyv-5.6.0.tgz#03044074c6b4d072d0a62c7b9fa649537baf0105"
+  integrity sha512-CYDD3SOtsHtyXeEORYRx2qBtpDJFjRTGXUtmNEMGyzYOKj1TE3tycdlho7kA1Ufx9OYWZzg52QFBGALTirzDSw==
+  dependencies:
+    "@keyv/serialize" "^1.1.1"
+
+kind-of@^6.0.2, kind-of@^6.0.3:
   version "6.0.3"
   resolved "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
@@ -13730,6 +13953,11 @@ kleur@^4.0.3:
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780"
   integrity sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==
 
+known-css-properties@^0.37.0:
+  version "0.37.0"
+  resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.37.0.tgz#10ebe49b9dbb6638860ff8a002fb65a053f4aec5"
+  integrity sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ==
+
 language-subtag-registry@^0.3.20:
   version "0.3.23"
   resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz#23529e04d9e3b74679d70142df3fd2eb6ec572e7"
@@ -14263,6 +14491,11 @@ math-intrinsics@^1.1.0:
   resolved "https://registry.yarnpkg.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz#a0dd74be81e2aa5c2f27e65ce283605ee4e2b7f9"
   integrity sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==
 
+mathml-tag-names@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-4.0.0.tgz#295494906312f849a9236e6cd9accc902814d477"
+  integrity sha512-aa6AU2Pcx0VP/XWnh8IGL0SYSgQHDT6Ucror2j2mXeFAlN3ahaNs8EZtG1YiticMkSLj3Gt6VPFfZogt7G5iFQ==
+
 mdast-util-definitions@^5.0.0:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/mdast-util-definitions/-/mdast-util-definitions-5.1.2.tgz#9910abb60ac5d7115d6819b57ae0bcef07a3f7a7"
@@ -14482,6 +14715,11 @@ mdn-data@2.12.2:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.12.2.tgz#9ae6c41a9e65adf61318b32bff7b64fbfb13f8cf"
   integrity sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==
 
+mdn-data@2.27.1, mdn-data@^2.25.0:
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.27.1.tgz#e37b9c50880b75366c4d40ac63d9bbcacdb61f0e"
+  integrity sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==
+
 mdurl@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-2.0.0.tgz#80676ec0433025dd3e17ee983d0fe8de5a2237e0"
@@ -14512,6 +14750,11 @@ meow@^13.0.0:
   resolved "https://registry.yarnpkg.com/meow/-/meow-13.2.0.tgz#6b7d63f913f984063b3cc261b6e8800c4cd3474f"
   integrity sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==
 
+meow@^14.1.0:
+  version "14.1.0"
+  resolved "https://registry.yarnpkg.com/meow/-/meow-14.1.0.tgz#3cd2d16ad534829ab12fcb5010fc2fdb89facd31"
+  integrity sha512-EDYo6VlmtnumlcBCbh1gLJ//9jvM/ndXHfVXIFrZVr6fGcwTUyCTFNTLCKuY3ffbK8L/+3Mzqnd58RojiZqHVw==
+
 meow@^8.0.0, meow@^8.1.2:
   version "8.1.2"
   resolved "https://registry.npmjs.org/meow/-/meow-8.1.2.tgz"
@@ -16134,6 +16377,11 @@ postcss-load-config@^3.1.4:
     lilconfig "^2.0.5"
     yaml "^1.10.2"
 
+postcss-media-query-parser@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz#27b39c6f4d94f81b1a73b8f76351c609e5cef244"
+  integrity sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==
+
 postcss-modules-extract-imports@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz#cda1f047c0ae80c97dbe28c3e76a43b88025741d"
@@ -16155,6 +16403,21 @@ postcss-modules-scope@^3.1.1:
   dependencies:
     postcss-selector-parser "^7.0.0"
 
+postcss-resolve-nested-selector@^0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.6.tgz#3d84dec809f34de020372c41b039956966896686"
+  integrity sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw==
+
+postcss-safe-parser@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-7.0.1.tgz#36e4f7e608111a0ca940fd9712ce034718c40ec0"
+  integrity sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==
+
+postcss-scss@4.0.9:
+  version "4.0.9"
+  resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-4.0.9.tgz#a03c773cd4c9623cb04ce142a52afcec74806685"
+  integrity sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==
+
 postcss-selector-parser@^7.0.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz#4d6af97eba65d73bc4d84bcb343e865d7dd16262"
@@ -16163,6 +16426,14 @@ postcss-selector-parser@^7.0.0:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
+postcss-selector-parser@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-7.1.1.tgz#e75d2e0d843f620e5df69076166f4e16f891cb9f"
+  integrity sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
 postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
   version "4.2.0"
   resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
@@ -16186,6 +16457,15 @@ postcss@^8.0.0:
     picocolors "^1.0.0"
     source-map-js "^1.2.0"
 
+postcss@^8.5.8:
+  version "8.5.9"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.5.9.tgz#f6ee9e0b94f0f19c97d2f172bfbd7fc71fe1cca4"
+  integrity sha512-7a70Nsot+EMX9fFU3064K/kdHWZqGVY+BADLyXc8Dfv+mTLLVl6JzJpPaCZ2kQL9gIJvKXSLMHhqdRRjwQeFtw==
+  dependencies:
+    nanoid "^3.3.11"
+    picocolors "^1.1.1"
+    source-map-js "^1.2.1"
+
 posthog-js@1.298.0:
   version "1.298.0"
   resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.298.0.tgz#54730988a753220aef54af0c4e69960633917450"
@@ -16356,6 +16636,13 @@ pure-rand@^7.0.0:
   resolved "https://registry.yarnpkg.com/pure-rand/-/pure-rand-7.0.1.tgz#6f53a5a9e3e4a47445822af96821ca509ed37566"
   integrity sha512-oTUZM/NAZS8p7ANR3SHh30kXB+zK2r2BPcEn/awJIbOvq82WoMN4p62AWWp3Hhw50G0xMsw1mhIBLqHw64EcNQ==
 
+qified@^0.9.0:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/qified/-/qified-0.9.1.tgz#7d3fc03abf293bac97525f9b046a09cf7cbf5385"
+  integrity sha512-n7mar4T0xQ+39dE2vGTAlbxUEpndwPANH0kDef1/MYsB8Bba9wshkybIRx74qgcvKQPEWErf9AqAdYjhzY2Ilg==
+  dependencies:
+    hookified "^2.1.1"
+
 qrcode.react@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-3.1.0.tgz#5c91ddc0340f768316fbdb8fff2765134c2aecd8"
@@ -18256,6 +18543,11 @@ slash@^4.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-4.0.0.tgz#2422372176c4c6c5addb5e2ada885af984b396a7"
   integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==
 
+slash@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-5.1.0.tgz#be3adddcdf09ac38eebe8dcdc7b1a57a75b095ce"
+  integrity sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==
+
 slice-ansi@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/slice-ansi/-/slice-ansi-3.0.0.tgz"
@@ -18558,6 +18850,14 @@ string-width@^7.0.0, string-width@^7.2.0:
     get-east-asian-width "^1.0.0"
     strip-ansi "^7.1.0"
 
+string-width@^8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-8.2.0.tgz#bdb6a9bd6d7800db635adae96cdb0443fec56c42"
+  integrity sha512-6hJPQ8N0V0P3SNmP6h2J99RLuzrWz2gvT7VnK5tKvrNqJoyS9W4/Fb8mo31UiPvy00z7DQXkP2hnKBVav76thw==
+  dependencies:
+    get-east-asian-width "^1.5.0"
+    strip-ansi "^7.1.2"
+
 string.prototype.includes@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz#eceef21283640761a81dbe16d6c7171a4edf7d92"
@@ -18712,6 +19012,13 @@ strip-ansi@^7.1.0:
   dependencies:
     ansi-regex "^6.0.1"
 
+strip-ansi@^7.1.2:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.2.0.tgz#d22a269522836a627af8d04b5c3fd2c7fa3e32e3"
+  integrity sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==
+  dependencies:
+    ansi-regex "^6.2.2"
+
 strip-bom@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz"
@@ -18785,6 +19092,62 @@ styled-components@^5.3.11:
     shallowequal "^1.1.0"
     supports-color "^5.5.0"
 
+stylelint-scss@7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-7.0.0.tgz#fae9346e6a1e15039422a7e46b3390e39508218d"
+  integrity sha512-H88kCC+6Vtzj76NsC8rv6x/LW8slBzIbyeSjsKVlS+4qaEJoDrcJR4L+8JdrR2ORdTscrBzYWiiT2jq6leYR1Q==
+  dependencies:
+    css-tree "^3.0.1"
+    is-plain-object "^5.0.0"
+    known-css-properties "^0.37.0"
+    mdn-data "^2.25.0"
+    postcss-media-query-parser "^0.2.3"
+    postcss-resolve-nested-selector "^0.1.6"
+    postcss-selector-parser "^7.1.1"
+    postcss-value-parser "^4.2.0"
+
+stylelint@17.7.0:
+  version "17.7.0"
+  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-17.7.0.tgz#5c142285fa31014d61040830310ade0a3038a0cf"
+  integrity sha512-n/+4RheCRl+cecGnF+S/Adz59iCRaK9BVznJYB+a7GOksfwNzjiOPnYv17pTO0HgRse9IiqbMtekGNhOb2tVYQ==
+  dependencies:
+    "@csstools/css-calc" "^3.1.1"
+    "@csstools/css-parser-algorithms" "^4.0.0"
+    "@csstools/css-syntax-patches-for-csstree" "^1.1.2"
+    "@csstools/css-tokenizer" "^4.0.0"
+    "@csstools/media-query-list-parser" "^5.0.0"
+    "@csstools/selector-resolve-nested" "^4.0.0"
+    "@csstools/selector-specificity" "^6.0.0"
+    colord "^2.9.3"
+    cosmiconfig "^9.0.1"
+    css-functions-list "^3.3.3"
+    css-tree "^3.2.1"
+    debug "^4.4.3"
+    fast-glob "^3.3.3"
+    fastest-levenshtein "^1.0.16"
+    file-entry-cache "^11.1.2"
+    global-modules "^2.0.0"
+    globby "^16.2.0"
+    globjoin "^0.1.4"
+    html-tags "^5.1.0"
+    ignore "^7.0.5"
+    import-meta-resolve "^4.2.0"
+    is-plain-object "^5.0.0"
+    mathml-tag-names "^4.0.0"
+    meow "^14.1.0"
+    micromatch "^4.0.8"
+    normalize-path "^3.0.0"
+    picocolors "^1.1.1"
+    postcss "^8.5.8"
+    postcss-safe-parser "^7.0.1"
+    postcss-selector-parser "^7.1.1"
+    postcss-value-parser "^4.2.0"
+    string-width "^8.2.0"
+    supports-hyperlinks "^4.4.0"
+    svg-tags "^1.0.0"
+    table "^6.9.0"
+    write-file-atomic "^7.0.1"
+
 stylis@^4.0.13, stylis@^4.0.6:
   version "4.1.3"
   resolved "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz"
@@ -18806,6 +19169,11 @@ stylus@^0.62.0:
     sax "~1.3.0"
     source-map "^0.7.3"
 
+supports-color@^10.2.2:
+  version "10.2.2"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-10.2.2.tgz#466c2978cc5cd0052d542a0b576461c2b802ebb4"
+  integrity sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g==
+
 supports-color@^5.3.0, supports-color@^5.5.0:
   version "5.5.0"
   resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz"
@@ -18832,6 +19200,14 @@ supports-color@^9.2.2:
   resolved "https://registry.npmjs.org/supports-color/-/supports-color-9.3.1.tgz"
   integrity sha512-knBY82pjmnIzK3NifMo3RxEIRD9E0kIzV4BKcyTZ9+9kWgLMxd4PrsTSMoFQUabgRBbF8KOLRDCyKgNV+iK44Q==
 
+supports-hyperlinks@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-4.4.0.tgz#b25ed8e5ef67388d1ce1e83029c07df19d36b870"
+  integrity sha512-UKbpT93hN5Nr9go5UY7bopIB9YQlMz9nm/ct4IXt/irb5YRkn9WaqrOBJGZ5Pwvsd5FQzSVeYlGdXoCAPQZrPg==
+  dependencies:
+    has-flag "^5.0.1"
+    supports-color "^10.2.2"
+
 supports-preserve-symlinks-flag@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
@@ -18847,6 +19223,11 @@ svg-path-properties@^1.0.4:
   resolved "https://registry.yarnpkg.com/svg-path-properties/-/svg-path-properties-1.3.0.tgz#7f47e61dcac380c9f4d04f642df7e69b127274fa"
   integrity sha512-R1+z37FrqyS3UXDhajNfvMxKI0smuVdedqOo4YbAQUfGqA86B9mGvr2IEXrwjjvGzCtdIKy/ad9N8m6YclaKAw==
 
+svg-tags@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
+  integrity sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==
+
 svgo@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-4.0.0.tgz#17e0fa2eaccf429e0ec0d2179169abde9ba8ad3d"
@@ -18907,7 +19288,7 @@ synckit@^0.11.8:
   dependencies:
     "@pkgr/core" "^0.2.9"
 
-table@^6.0.9:
+table@^6.0.9, table@^6.9.0:
   version "6.9.0"
   resolved "https://registry.yarnpkg.com/table/-/table-6.9.0.tgz#50040afa6264141c7566b3b81d4d82c47a8668f5"
   integrity sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==
@@ -19484,6 +19865,11 @@ unicorn-magic@^0.3.0:
   resolved "https://registry.yarnpkg.com/unicorn-magic/-/unicorn-magic-0.3.0.tgz#4efd45c85a69e0dd576d25532fbfa22aa5c8a104"
   integrity sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==
 
+unicorn-magic@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/unicorn-magic/-/unicorn-magic-0.4.0.tgz#78c6a090fd6d07abd2468b83b385603e00dfdb24"
+  integrity sha512-wH590V9VNgYH9g3lH9wWjTrUoKsjLF6sGLjhR4sH1LWpLmCOH0Zf7PukhDA8BiS7KHe4oPNkcTHqYkj7SOGUOw==
+
 unified@^10.0.0, unified@^10.1.2, unified@~10.1.1:
   version "10.1.2"
   resolved "https://registry.yarnpkg.com/unified/-/unified-10.1.2.tgz#b1d64e55dafe1f0b98bb6c719881103ecf6c86df"
@@ -20147,6 +20533,13 @@ which-typed-array@^1.1.9:
     has-tostringtag "^1.0.0"
     is-typed-array "^1.1.10"
 
+which@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
+  integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
+  dependencies:
+    isexe "^2.0.0"
+
 which@^2.0.1, which@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
@@ -20230,6 +20623,13 @@ write-file-atomic@^5.0.1:
     imurmurhash "^0.1.4"
     signal-exit "^4.0.1"
 
+write-file-atomic@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-7.0.1.tgz#0e2a450ab5aa306bcfcd3aed61833b10cc4fb885"
+  integrity sha512-OTIk8iR8/aCRWBqvxrzxR0hgxWpnYBblY1S5hDWBQfk/VFmJwzmJgQFN3WsoUKHISv2eAwe+PpbUzyL1CKTLXg==
+  dependencies:
+    signal-exit "^4.0.1"
+
 ws@^8.11.0:
   version "8.19.0"
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.19.0.tgz#ddc2bdfa5b9ad860204f5a72a4863a8895fd8c8b"

pkg/modules/cloudintegration/implcloudintegration/fs/definitions/aws/alb/assets/dashboards/overview.json

@@ -99,7 +99,7 @@
       "multiSelect": false,
       "name": "Account",
       "order": 0,
-      "queryValue": "SELECT JSONExtractString(labels, 'cloud_account_id') as cloud_account_id\nFROM signoz_metrics.distributed_time_series_v4_1day\nWHERE \n    metric_name like 'aws_ApplicationELB_ConsumedLCUs_max'\nGROUP BY cloud_account_id",
+      "queryValue": "SELECT JSONExtractString(labels, 'cloud.account.id') as `cloud.account.id`\nFROM signoz_metrics.distributed_time_series_v4_1day\nWHERE \n    metric_name like 'aws_ApplicationELB_ConsumedLCUs_max'\nGROUP BY `cloud.account.id`",
       "showALLOption": false,
       "sort": "DISABLED",
       "textboxValue": "",
@@ -115,7 +115,7 @@
       "multiSelect": false,
       "name": "Region",
       "order": 1,
-      "queryValue": "SELECT JSONExtractString(labels, 'cloud_region') as cloud_region\nFROM signoz_metrics.distributed_time_series_v4_1day\nWHERE \n    metric_name like 'aws_ApplicationELB_ConsumedLCUs_max'\n    and JSONExtractString(labels, 'cloud_account_id') IN {{.Account}}\nGROUP BY cloud_region\n",
+      "queryValue": "SELECT JSONExtractString(labels, 'cloud.region') as `cloud.region`\nFROM signoz_metrics.distributed_time_series_v4_1day\nWHERE \n    metric_name like 'aws_ApplicationELB_ConsumedLCUs_max'\n    and JSONExtractString(labels, 'cloud.account.id') IN {{.Account}}\nGROUP BY `cloud.region`\n",
       "showALLOption": false,
       "sort": "DISABLED",
       "textboxValue": "",
@@ -158,10 +158,10 @@
                     "id": "b282d9f1",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -171,10 +171,10 @@
                     "id": "71837c70",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -221,18 +221,18 @@
                 },
                 {
                   "dataType": "string",
-                  "id": "cloud_account_id--string--tag--false",
+                  "id": "cloud.account.id--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "cloud_account_id",
+                  "key": "cloud.account.id",
                   "type": "tag"
                 },
                 {
                   "dataType": "string",
-                  "id": "cloud_region--string--tag--false",
+                  "id": "cloud.region--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "cloud_region",
+                  "key": "cloud.region",
                   "type": "tag"
                 }
               ],
@@ -364,10 +364,10 @@
                     "id": "448b551a",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -377,10 +377,10 @@
                     "id": "a8821216",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -427,18 +427,18 @@
                 },
                 {
                   "dataType": "string",
-                  "id": "cloud_account_id--string--tag--false",
+                  "id": "cloud.account.id--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "cloud_account_id",
+                  "key": "cloud.account.id",
                   "type": "tag"
                 },
                 {
                   "dataType": "string",
-                  "id": "cloud_region--string--tag--false",
+                  "id": "cloud.region--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "cloud_region",
+                  "key": "cloud.region",
                   "type": "tag"
                 }
               ],
@@ -570,10 +570,10 @@
                     "id": "702a8765",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -583,10 +583,10 @@
                     "id": "32985f2d",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -625,18 +625,18 @@
               "groupBy": [
                 {
                   "dataType": "string",
-                  "id": "cloud_account_id--string--tag--false",
+                  "id": "cloud.account.id--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "cloud_account_id",
+                  "key": "cloud.account.id",
                   "type": "tag"
                 },
                 {
                   "dataType": "string",
-                  "id": "cloud_region--string--tag--false",
+                  "id": "cloud.region--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "cloud_region",
+                  "key": "cloud.region",
                   "type": "tag"
                 },
                 {
@@ -776,10 +776,10 @@
                     "id": "5807a1e3",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -789,10 +789,10 @@
                     "id": "0dd63d0c",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -826,18 +826,18 @@
                 },
                 {
                   "dataType": "string",
-                  "id": "cloud_account_id--string--tag--false",
+                  "id": "cloud.account.id--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "cloud_account_id",
+                  "key": "cloud.account.id",
                   "type": "tag"
                 },
                 {
                   "dataType": "string",
-                  "id": "cloud_region--string--tag--false",
+                  "id": "cloud.region--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "cloud_region",
+                  "key": "cloud.region",
                   "type": "tag"
                 }
               ],
@@ -969,10 +969,10 @@
                     "id": "72c256c0",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -982,10 +982,10 @@
                     "id": "b433c2a1",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1019,18 +1019,18 @@
                 },
                 {
                   "dataType": "string",
-                  "id": "cloud_account_id--string--tag--false",
+                  "id": "cloud.account.id--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "cloud_account_id",
+                  "key": "cloud.account.id",
                   "type": "tag"
                 },
                 {
                   "dataType": "string",
-                  "id": "cloud_region--string--tag--false",
+                  "id": "cloud.region--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "cloud_region",
+                  "key": "cloud.region",
                   "type": "tag"
                 }
               ],
@@ -1162,10 +1162,10 @@
                     "id": "9226a37c",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1175,10 +1175,10 @@
                     "id": "c3ff0c8f",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1221,18 +1221,18 @@
                 },
                 {
                   "dataType": "string",
-                  "id": "cloud_account_id--string--tag--false",
+                  "id": "cloud.account.id--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "cloud_account_id",
+                  "key": "cloud.account.id",
                   "type": "tag"
                 },
                 {
                   "dataType": "string",
-                  "id": "cloud_region--string--tag--false",
+                  "id": "cloud.region--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "cloud_region",
+                  "key": "cloud.region",
                   "type": "tag"
                 }
               ],
@@ -1364,10 +1364,10 @@
                     "id": "20627274",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1377,10 +1377,10 @@
                     "id": "cd861e27",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1401,18 +1401,18 @@
                 },
                 {
                   "dataType": "string",
-                  "id": "cloud_account_id--string--tag--false",
+                  "id": "cloud.account.id--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "cloud_account_id",
+                  "key": "cloud.account.id",
                   "type": "tag"
                 },
                 {
                   "dataType": "string",
-                  "id": "cloud_region--string--tag--false",
+                  "id": "cloud.region--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "cloud_region",
+                  "key": "cloud.region",
                   "type": "tag"
                 }
               ],
@@ -1544,10 +1544,10 @@
                     "id": "7d4a3494",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1557,10 +1557,10 @@
                     "id": "3c307858",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1594,18 +1594,18 @@
                 },
                 {
                   "dataType": "string",
-                  "id": "cloud_account_id--string--tag--false",
+                  "id": "cloud.account.id--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "cloud_account_id",
+                  "key": "cloud.account.id",
                   "type": "tag"
                 },
                 {
                   "dataType": "string",
-                  "id": "cloud_region--string--tag--false",
+                  "id": "cloud.region--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "cloud_region",
+                  "key": "cloud.region",
                   "type": "tag"
                 }
               ],
@@ -1737,10 +1737,10 @@
                     "id": "a416e862",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1750,10 +1750,10 @@
                     "id": "ed7d0a39",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1774,18 +1774,18 @@
                 },
                 {
                   "dataType": "string",
-                  "id": "cloud_account_id--string--tag--false",
+                  "id": "cloud.account.id--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "cloud_account_id",
+                  "key": "cloud.account.id",
                   "type": "tag"
                 },
                 {
                   "dataType": "string",
-                  "id": "cloud_region--string--tag--false",
+                  "id": "cloud.region--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "cloud_region",
+                  "key": "cloud.region",
                   "type": "tag"
                 }
               ],

pkg/modules/cloudintegration/implcloudintegration/fs/definitions/aws/api-gateway/assets/dashboards/overview.json

@@ -393,7 +393,7 @@
       "multiSelect": false,
       "name": "Account",
       "order": 0,
-      "queryValue": "SELECT JSONExtractString(labels, 'cloud_account_id') as `cloud_account_id`\nFROM signoz_metrics.distributed_time_series_v4_1day\nWHERE \n metric_name like '%aws_ApiGateway%'\nGROUP BY `cloud_account_id`",
+      "queryValue": "SELECT JSONExtractString(labels, 'cloud.account.id') as `cloud.account.id`\nFROM signoz_metrics.distributed_time_series_v4_1day\nWHERE \n metric_name like '%aws_ApiGateway%'\nGROUP BY `cloud.account.id`\n\n",
       "showALLOption": false,
       "sort": "DISABLED",
       "textboxValue": "",
@@ -409,7 +409,7 @@
       "multiSelect": false,
       "name": "Region",
       "order": 1,
-      "queryValue": "SELECT JSONExtractString(labels, 'cloud_region') as `cloud_region`\nFROM signoz_metrics.distributed_time_series_v4_1day\nWHERE \n metric_name like '%aws_ApiGateway%'\n and JSONExtractString(labels, 'cloud_account_id') IN {{.Account}}\nGROUP BY `cloud_region`",
+      "queryValue": "SELECT JSONExtractString(labels, 'cloud.region') as `cloud.region`\nFROM signoz_metrics.distributed_time_series_v4_1day\nWHERE \n metric_name like '%aws_ApiGateway%'\n and JSONExtractString(labels, 'cloud.account.id') IN {{.Account}}\nGROUP BY `cloud.region`\n",
       "showALLOption": false,
       "sort": "DISABLED",
       "textboxValue": "",
@@ -471,10 +471,10 @@
                     "id": "81918ce2",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -484,10 +484,10 @@
                     "id": "114c7ff4",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -522,6 +522,7 @@
         "id": "rest-requests-query",
         "queryType": "builder"
       },
+      
       "softMax": 0,
       "softMin": 0,
       "stackedBarChart": false,
@@ -577,10 +578,10 @@
                     "id": "3c67d1fc",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -590,10 +591,10 @@
                     "id": "e2a96f23",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -628,6 +629,7 @@
         "id": "rest-latency-query",
         "queryType": "builder"
       },
+      
       "softMax": 0,
       "softMin": 0,
       "stackedBarChart": false,
@@ -683,10 +685,10 @@
                     "id": "b3ebaf28",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -696,10 +698,10 @@
                     "id": "f2030d94",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -734,6 +736,7 @@
         "id": "rest-5xx-query",
         "queryType": "builder"
       },
+      
       "softMax": 0,
       "softMin": 0,
       "stackedBarChart": false,
@@ -789,10 +792,10 @@
                     "id": "5f2f2892",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -802,10 +805,10 @@
                     "id": "960ee6d2",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -840,6 +843,7 @@
         "id": "rest-integ-latency-query",
         "queryType": "builder"
       },
+      
       "softMax": 0,
       "softMin": 0,
       "stackedBarChart": false,
@@ -895,10 +899,10 @@
                     "id": "8ec09e30",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -908,10 +912,10 @@
                     "id": "d1622884",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -946,6 +950,7 @@
         "id": "rest-cache-hit-query",
         "queryType": "builder"
       },
+      
       "softMax": 0,
       "softMin": 0,
       "stackedBarChart": false,
@@ -1001,10 +1006,10 @@
                     "id": "f02d484d",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1014,10 +1019,10 @@
                     "id": "4d8ddc75",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1052,6 +1057,7 @@
         "id": "rest-cache-miss-query",
         "queryType": "builder"
       },
+      
       "softMax": 0,
       "softMin": 0,
       "stackedBarChart": false,
@@ -1113,10 +1119,10 @@
                     "id": "http2",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1126,10 +1132,10 @@
                     "id": "http3",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1164,6 +1170,7 @@
         "id": "http-count-query",
         "queryType": "builder"
       },
+      
       "softMax": 0,
       "softMin": 0,
       "stackedBarChart": false,
@@ -1219,10 +1226,10 @@
                     "id": "http4xx2",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1232,10 +1239,10 @@
                     "id": "http4xx3",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1270,6 +1277,7 @@
         "id": "http-4xx-query",
         "queryType": "builder"
       },
+      
       "softMax": 0,
       "softMin": 0,
       "stackedBarChart": false,
@@ -1325,10 +1333,10 @@
                     "id": "http5xx2",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1338,10 +1346,10 @@
                     "id": "http5xx3",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1376,6 +1384,7 @@
         "id": "http-5xx-query",
         "queryType": "builder"
       },
+      
       "softMax": 0,
       "softMin": 0,
       "stackedBarChart": false,
@@ -1431,10 +1440,10 @@
                     "id": "httplat2",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1444,10 +1453,10 @@
                     "id": "httplat3",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1482,6 +1491,7 @@
         "id": "http-latency-query",
         "queryType": "builder"
       },
+      
       "softMax": 0,
       "softMin": 0,
       "stackedBarChart": false,
@@ -1537,10 +1547,10 @@
                     "id": "httpdata2",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1550,10 +1560,10 @@
                     "id": "httpdata3",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1588,6 +1598,7 @@
         "id": "http-data-query",
         "queryType": "builder"
       },
+      
       "softMax": 0,
       "softMin": 0,
       "stackedBarChart": false,
@@ -1649,10 +1660,10 @@
                     "id": "wscon2",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1662,10 +1673,10 @@
                     "id": "wscon3",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1700,6 +1711,7 @@
         "id": "ws-connect-query",
         "queryType": "builder"
       },
+      
       "softMax": 0,
       "softMin": 0,
       "stackedBarChart": false,
@@ -1755,10 +1767,10 @@
                     "id": "wsmsg2",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1768,10 +1780,10 @@
                     "id": "wsmsg3",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1806,6 +1818,7 @@
         "id": "ws-message-query",
         "queryType": "builder"
       },
+      
       "softMax": 0,
       "softMin": 0,
       "stackedBarChart": false,
@@ -1861,10 +1874,10 @@
                     "id": "wscli2",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1874,10 +1887,10 @@
                     "id": "wscli3",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1912,6 +1925,7 @@
         "id": "ws-client-error-query",
         "queryType": "builder"
       },
+      
       "softMax": 0,
       "softMin": 0,
       "stackedBarChart": false,
@@ -1967,10 +1981,10 @@
                     "id": "wsexec2",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1980,10 +1994,10 @@
                     "id": "wsexec3",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -2018,6 +2032,7 @@
         "id": "ws-exec-error-query",
         "queryType": "builder"
       },
+      
       "softMax": 0,
       "softMin": 0,
       "stackedBarChart": false,
@@ -2073,10 +2088,10 @@
                     "id": "wsint2",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -2086,10 +2101,10 @@
                     "id": "wsint3",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -2124,6 +2139,7 @@
         "id": "ws-integ-error-query",
         "queryType": "builder"
       },
+      
       "softMax": 0,
       "softMin": 0,
       "stackedBarChart": false,
@@ -2185,10 +2201,10 @@
                     "id": "commonintlat2",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -2198,10 +2214,10 @@
                     "id": "commonintlat3",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -2257,6 +2273,7 @@
         "id": "common-integ-latency-query",
         "queryType": "builder"
       },
+      
       "softMax": 0,
       "softMin": 0,
       "stackedBarChart": false,

pkg/modules/cloudintegration/implcloudintegration/fs/definitions/aws/dynamodb/assets/dashboards/overview.json

@@ -153,7 +153,7 @@
       "multiSelect": false,
       "name": "Region",
       "order": 1,
-      "queryValue": "SELECT DISTINCT JSONExtractString(labels, 'cloud_region') AS region\nFROM signoz_metrics.distributed_time_series_v4_1day\nWHERE metric_name like '%aws_DynamoDB%' AND JSONExtractString(labels, 'cloud_account_id') IN {{.Account}} GROUP BY region",
+      "queryValue": "SELECT DISTINCT JSONExtractString(labels, 'cloud.region') AS region\nFROM signoz_metrics.distributed_time_series_v4_1day\nWHERE metric_name like '%aws_DynamoDB%' AND JSONExtractString(labels, 'cloud.account.id') IN {{.Account}} GROUP BY region",
       "showALLOption": false,
       "sort": "DISABLED",
       "textboxValue": "",
@@ -169,7 +169,7 @@
       "multiSelect": false,
       "name": "Account",
       "order": 0,
-      "queryValue": "SELECT DISTINCT JSONExtractString(labels, 'cloud_account_id') AS cloud_account_id\nFROM signoz_metrics.distributed_time_series_v4_1day\nWHERE metric_name like '%aws_DynamoDB%' GROUP BY cloud_account_id",
+      "queryValue": "SELECT DISTINCT JSONExtractString(labels, 'cloud.account.id') AS `cloud.account.id`\nFROM signoz_metrics.distributed_time_series_v4_1day\nWHERE metric_name like '%aws_DynamoDB%' GROUP BY `cloud.account.id`",
       "showALLOption": false,
       "sort": "ASC",
       "textboxValue": "",
@@ -184,7 +184,7 @@
       "multiSelect": true,
       "name": "Table",
       "order": 2,
-      "queryValue": "SELECT DISTINCT JSONExtractString(labels, 'TableName') AS table FROM signoz_metrics.distributed_time_series_v4_1day WHERE metric_name like '%aws_DynamoDB%' AND JSONExtractString(labels, 'cloud_account_id') IN {{.Account}}  AND JSONExtractString(labels, 'cloud_region') IN {{.Region}} and table != '' GROUP BY table\n",
+      "queryValue": "SELECT DISTINCT JSONExtractString(labels, 'TableName') AS table FROM signoz_metrics.distributed_time_series_v4_1day WHERE metric_name like '%aws_DynamoDB%' AND JSONExtractString(labels, 'cloud.account.id') IN {{.Account}}  AND JSONExtractString(labels, 'cloud.region') IN {{.Region}} and table != '' GROUP BY table\n",
       "showALLOption": true,
       "sort": "ASC",
       "textboxValue": "",
@@ -228,10 +228,10 @@
                     "id": "fc55895c",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -241,10 +241,10 @@
                     "id": "8b3f3e0b",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -384,10 +384,10 @@
                     "id": "f7b176f8",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -397,10 +397,10 @@
                     "id": "9a023ab7",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -540,10 +540,10 @@
                     "id": "ec5ebf95",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -553,10 +553,10 @@
                     "id": "5b2fb00e",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -696,10 +696,10 @@
                     "id": "3815cf09",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -709,10 +709,10 @@
                     "id": "a783bd91",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -852,10 +852,10 @@
                     "id": "edcbcb83",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -865,10 +865,10 @@
                     "id": "224766cb",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1008,10 +1008,10 @@
                     "id": "c237482a",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1021,10 +1021,10 @@
                     "id": "e3a117d5",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1164,10 +1164,10 @@
                     "id": "b867513b",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1177,10 +1177,10 @@
                     "id": "9c10cbaa",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1344,10 +1344,10 @@
                     "id": "7e2aa806",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1357,10 +1357,10 @@
                     "id": "dd49e062",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1524,10 +1524,10 @@
                     "id": "b3e029fa",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1537,10 +1537,10 @@
                     "id": "e6764d50",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1680,10 +1680,10 @@
                     "id": "80ba9142",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1693,10 +1693,10 @@
                     "id": "9c802cf0",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1836,10 +1836,10 @@
                     "id": "db6edb77",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1849,10 +1849,10 @@
                     "id": "8b86de4a",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -2016,10 +2016,10 @@
                     "id": "93bef7f0",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -2029,10 +2029,10 @@
                     "id": "4a293ec8",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -2196,10 +2196,10 @@
                     "id": "28fcd3cd",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -2209,10 +2209,10 @@
                     "id": "619578e5",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -2376,10 +2376,10 @@
                     "id": "5a060b5e",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -2389,10 +2389,10 @@
                     "id": "3a1cb5ff",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -2532,10 +2532,10 @@
                     "id": "58bc06b3",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -2545,10 +2545,10 @@
                     "id": "d6d7a8fb",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -2654,4 +2654,4 @@
       "yAxisUnit": "none"
     }
   ]
-}
+}

pkg/modules/cloudintegration/implcloudintegration/fs/definitions/aws/ec2/assets/dashboards/overview.json

@@ -72,7 +72,7 @@
       "multiSelect": false,
       "name": "Account",
       "order": 0,
-      "queryValue": "SELECT JSONExtractString(labels, 'cloud_account_id') as cloud_account_id\nFROM signoz_metrics.distributed_time_series_v4_1day\nWHERE \n    metric_name like 'aws_EC2_CPUUtilization_sum'\nGROUP BY cloud_account_id",
+      "queryValue": "SELECT JSONExtractString(labels, 'cloud.account.id') as `cloud.account.id`\nFROM signoz_metrics.distributed_time_series_v4_1day\nWHERE \n    metric_name like 'aws_EC2_CPUUtilization_sum'\nGROUP BY `cloud.account.id`",
       "showALLOption": false,
       "sort": "DISABLED",
       "textboxValue": "",
@@ -87,7 +87,7 @@
       "multiSelect": false,
       "name": "Region",
       "order": 0,
-      "queryValue": "\nSELECT JSONExtractString(labels, 'cloud_region') as cloud_region\nFROM signoz_metrics.distributed_time_series_v4_1day\nWHERE \n    metric_name like 'aws_EC2_CPUUtilization_sum'\n    and JSONExtractString(labels, 'cloud_account_id') IN {{.Account}}\nGROUP BY cloud_region",
+      "queryValue": "\nSELECT JSONExtractString(labels, 'cloud.region') as `cloud.region`\nFROM signoz_metrics.distributed_time_series_v4_1day\nWHERE \n    metric_name like 'aws_EC2_CPUUtilization_sum'\n    and JSONExtractString(labels, 'cloud.account.id') IN {{.Account}}\nGROUP BY `cloud.region`",
       "showALLOption": false,
       "sort": "DISABLED",
       "textboxValue": "",
@@ -130,10 +130,10 @@
                     "id": "d302d50d",
                     "key": {
                       "dataType": "string",
-                      "id": "service_instance_id--string--tag--false",
+                      "id": "service.instance.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "service_instance_id",
+                      "key": "service.instance.id",
                       "type": "tag"
                     },
                     "op": "!=",
@@ -143,10 +143,10 @@
                     "id": "e6c54e87",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -156,10 +156,10 @@
                     "id": "7907211a",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -172,31 +172,31 @@
               "groupBy": [
                 {
                   "dataType": "string",
-                  "id": "service_instance_id--string--tag--false",
+                  "id": "service.instance.id--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "service_instance_id",
+                  "key": "service.instance.id",
                   "type": "tag"
                 },
                 {
                   "dataType": "string",
-                  "id": "cloud_account_id--string--tag--false",
+                  "id": "cloud.account.id--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "cloud_account_id",
+                  "key": "cloud.account.id",
                   "type": "tag"
                 },
                 {
                   "dataType": "string",
-                  "id": "cloud_region--string--tag--false",
+                  "id": "cloud.region--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "cloud_region",
+                  "key": "cloud.region",
                   "type": "tag"
                 }
               ],
               "having": [],
-              "legend": "{{service_instance_id}}",
+              "legend": "{{service.instance.id}}",
               "limit": null,
               "orderBy": [],
               "queryName": "A",
@@ -323,10 +323,10 @@
                     "id": "30ded0dc",
                     "key": {
                       "dataType": "string",
-                      "id": "service_instance_id--string--tag--false",
+                      "id": "service.instance.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "service_instance_id",
+                      "key": "service.instance.id",
                       "type": "tag"
                     },
                     "op": "!=",
@@ -336,10 +336,10 @@
                     "id": "c935f6ec",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -349,10 +349,10 @@
                     "id": "d092fef8",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -365,31 +365,31 @@
               "groupBy": [
                 {
                   "dataType": "string",
-                  "id": "service_instance_id--string--tag--false",
+                  "id": "service.instance.id--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "service_instance_id",
+                  "key": "service.instance.id",
                   "type": "tag"
                 },
                 {
                   "dataType": "string",
-                  "id": "cloud_account_id--string--tag--false",
+                  "id": "cloud.account.id--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "cloud_account_id",
+                  "key": "cloud.account.id",
                   "type": "tag"
                 },
                 {
                   "dataType": "string",
-                  "id": "cloud_region--string--tag--false",
+                  "id": "cloud.region--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "cloud_region",
+                  "key": "cloud.region",
                   "type": "tag"
                 }
               ],
               "having": [],
-              "legend": "{{service_instance_id}}",
+              "legend": "{{service.instance.id}}",
               "limit": null,
               "orderBy": [],
               "queryName": "A",
@@ -516,10 +516,10 @@
                     "id": "a5fbfa4a",
                     "key": {
                       "dataType": "string",
-                      "id": "service_instance_id--string--tag--false",
+                      "id": "service.instance.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "service_instance_id",
+                      "key": "service.instance.id",
                       "type": "tag"
                     },
                     "op": "!=",
@@ -529,10 +529,10 @@
                     "id": "87071f13",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -542,10 +542,10 @@
                     "id": "c84a88c4",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -558,31 +558,31 @@
               "groupBy": [
                 {
                   "dataType": "string",
-                  "id": "service_instance_id--string--tag--false",
+                  "id": "service.instance.id--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "service_instance_id",
+                  "key": "service.instance.id",
                   "type": "tag"
                 },
                 {
                   "dataType": "string",
-                  "id": "cloud_account_id--string--tag--false",
+                  "id": "cloud.account.id--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "cloud_account_id",
+                  "key": "cloud.account.id",
                   "type": "tag"
                 },
                 {
                   "dataType": "string",
-                  "id": "cloud_region--string--tag--false",
+                  "id": "cloud.region--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "cloud_region",
+                  "key": "cloud.region",
                   "type": "tag"
                 }
               ],
               "having": [],
-              "legend": "{{service_instance_id}} - Reads",
+              "legend": "{{service.instance.id}} - Reads",
               "limit": null,
               "orderBy": [],
               "queryName": "A",
@@ -610,10 +610,10 @@
                     "id": "4d10ca4b",
                     "key": {
                       "dataType": "string",
-                      "id": "service_instance_id--string--tag--false",
+                      "id": "service.instance.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "service_instance_id",
+                      "key": "service.instance.id",
                       "type": "tag"
                     },
                     "op": "!=",
@@ -623,10 +623,10 @@
                     "id": "fc2db932",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -636,10 +636,10 @@
                     "id": "a3fd74c0",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -652,31 +652,31 @@
               "groupBy": [
                 {
                   "dataType": "string",
-                  "id": "service_instance_id--string--tag--false",
+                  "id": "service.instance.id--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "service_instance_id",
+                  "key": "service.instance.id",
                   "type": "tag"
                 },
                 {
                   "dataType": "string",
-                  "id": "cloud_account_id--string--tag--false",
+                  "id": "cloud.account.id--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "cloud_account_id",
+                  "key": "cloud.account.id",
                   "type": "tag"
                 },
                 {
                   "dataType": "string",
-                  "id": "cloud_region--string--tag--false",
+                  "id": "cloud.region--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "cloud_region",
+                  "key": "cloud.region",
                   "type": "tag"
                 }
               ],
               "having": [],
-              "legend": "{{service_instance_id}} - Writes",
+              "legend": "{{service.instance.id}} - Writes",
               "limit": null,
               "orderBy": [],
               "queryName": "B",
@@ -803,10 +803,10 @@
                     "id": "85d84806",
                     "key": {
                       "dataType": "string",
-                      "id": "service_instance_id--string--tag--false",
+                      "id": "service.instance.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "service_instance_id",
+                      "key": "service.instance.id",
                       "type": "tag"
                     },
                     "op": "!=",
@@ -816,10 +816,10 @@
                     "id": "f2074606",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -829,10 +829,10 @@
                     "id": "134c7ca9",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -845,31 +845,31 @@
               "groupBy": [
                 {
                   "dataType": "string",
-                  "id": "service_instance_id--string--tag--false",
+                  "id": "service.instance.id--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "service_instance_id",
+                  "key": "service.instance.id",
                   "type": "tag"
                 },
                 {
                   "dataType": "string",
-                  "id": "cloud_account_id--string--tag--false",
+                  "id": "cloud.account.id--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "cloud_account_id",
+                  "key": "cloud.account.id",
                   "type": "tag"
                 },
                 {
                   "dataType": "string",
-                  "id": "cloud_region--string--tag--false",
+                  "id": "cloud.region--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "cloud_region",
+                  "key": "cloud.region",
                   "type": "tag"
                 }
               ],
               "having": [],
-              "legend": "{{service_instance_id}} - Reads",
+              "legend": "{{service.instance.id}} - Reads",
               "limit": null,
               "orderBy": [],
               "queryName": "A",
@@ -897,10 +897,10 @@
                     "id": "47e0c00f",
                     "key": {
                       "dataType": "string",
-                      "id": "service_instance_id--string--tag--false",
+                      "id": "service.instance.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "service_instance_id",
+                      "key": "service.instance.id",
                       "type": "tag"
                     },
                     "op": "!=",
@@ -910,10 +910,10 @@
                     "id": "0a157dfe",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -923,10 +923,10 @@
                     "id": "a7d1e8df",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -939,31 +939,31 @@
               "groupBy": [
                 {
                   "dataType": "string",
-                  "id": "service_instance_id--string--tag--false",
+                  "id": "service.instance.id--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "service_instance_id",
+                  "key": "service.instance.id",
                   "type": "tag"
                 },
                 {
                   "dataType": "string",
-                  "id": "cloud_account_id--string--tag--false",
+                  "id": "cloud.account.id--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "cloud_account_id",
+                  "key": "cloud.account.id",
                   "type": "tag"
                 },
                 {
                   "dataType": "string",
-                  "id": "cloud_region--string--tag--false",
+                  "id": "cloud.region--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "cloud_region",
+                  "key": "cloud.region",
                   "type": "tag"
                 }
               ],
               "having": [],
-              "legend": "{{service_instance_id}} - Writes",
+              "legend": "{{service.instance.id}} - Writes",
               "limit": null,
               "orderBy": [],
               "queryName": "B",
@@ -1090,10 +1090,10 @@
                     "id": "12d6748d",
                     "key": {
                       "dataType": "string",
-                      "id": "service_instance_id--string--tag--false",
+                      "id": "service.instance.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "service_instance_id",
+                      "key": "service.instance.id",
                       "type": "tag"
                     },
                     "op": "!=",
@@ -1103,10 +1103,10 @@
                     "id": "df3a8da1",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1116,10 +1116,10 @@
                     "id": "81ec53f4",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1132,31 +1132,31 @@
               "groupBy": [
                 {
                   "dataType": "string",
-                  "id": "service_instance_id--string--tag--false",
+                  "id": "service.instance.id--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "service_instance_id",
+                  "key": "service.instance.id",
                   "type": "tag"
                 },
                 {
                   "dataType": "string",
-                  "id": "cloud_account_id--string--tag--false",
+                  "id": "cloud.account.id--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "cloud_account_id",
+                  "key": "cloud.account.id",
                   "type": "tag"
                 },
                 {
                   "dataType": "string",
-                  "id": "cloud_region--string--tag--false",
+                  "id": "cloud.region--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "cloud_region",
+                  "key": "cloud.region",
                   "type": "tag"
                 }
               ],
               "having": [],
-              "legend": "{{service_instance_id}}",
+              "legend": "{{service.instance.id}}",
               "limit": null,
               "orderBy": [],
               "queryName": "A",
@@ -1283,10 +1283,10 @@
                     "id": "d301aaa7",
                     "key": {
                       "dataType": "string",
-                      "id": "service_instance_id--string--tag--false",
+                      "id": "service.instance.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "service_instance_id",
+                      "key": "service.instance.id",
                       "type": "tag"
                     },
                     "op": "!=",
@@ -1296,10 +1296,10 @@
                     "id": "e8afaa3b",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_account_id--string--tag--false",
+                      "id": "cloud.account.id--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_account_id",
+                      "key": "cloud.account.id",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1309,10 +1309,10 @@
                     "id": "d67487ab",
                     "key": {
                       "dataType": "string",
-                      "id": "cloud_region--string--tag--false",
+                      "id": "cloud.region--string--tag--false",
                       "isColumn": false,
                       "isJSON": false,
-                      "key": "cloud_region",
+                      "key": "cloud.region",
                       "type": "tag"
                     },
                     "op": "=",
@@ -1325,31 +1325,31 @@
               "groupBy": [
                 {
                   "dataType": "string",
-                  "id": "service_instance_id--string--tag--false",
+                  "id": "service.instance.id--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "service_instance_id",
+                  "key": "service.instance.id",
                   "type": "tag"
                 },
                 {
                   "dataType": "string",
-                  "id": "cloud_account_id--string--tag--false",
+                  "id": "cloud.account.id--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "cloud_account_id",
+                  "key": "cloud.account.id",
                   "type": "tag"
                 },
                 {
                   "dataType": "string",
-                  "id": "cloud_region--string--tag--false",
+                  "id": "cloud.region--string--tag--false",
                   "isColumn": false,
                   "isJSON": false,
-                  "key": "cloud_region",
+                  "key": "cloud.region",
                   "type": "tag"
                 }
               ],
               "having": [],
-              "legend": "{{service_instance_id}}",
+              "legend": "{{service.instance.id}}",
               "limit": null,
               "orderBy": [],
               "queryName": "A",
@@ -1443,4 +1443,4 @@
       "yAxisUnit": "binBps"
     }
   ]
-}
+}