feat: minor fix

To avoid confusing with otel span

deploy/docker-swarm/docker-compose.ha.yaml

@@ -190,7 +190,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.119.0
+    image: signoz/signoz:v0.118.0
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.119.0
+    image: signoz/signoz:v0.118.0
     ports:
       - "8080:8080" # signoz port
     volumes:

deploy/docker/docker-compose.ha.yaml

@@ -181,7 +181,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.119.0}
+    image: signoz/signoz:${VERSION:-v0.118.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

deploy/docker/docker-compose.yaml

@@ -109,7 +109,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.119.0}
+    image: signoz/signoz:${VERSION:-v0.118.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

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

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

frontend/.eslintignore

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

frontend/.eslintrc.cjs

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

frontend/.stylelintrc.cjs

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

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

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

frontend/eslint-rules/package.json

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

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

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

frontend/package.json

@@ -10,10 +10,9 @@
     "preview": "vite preview",
     "prettify": "prettier --write .",
     "fmt": "prettier --check .",
-    "lint": "eslint ./src && stylelint \"src/**/*.scss\"",
+    "lint": "eslint ./src",
     "lint:generated": "eslint ./src/api/generated --fix",
     "lint:fix": "eslint ./src --fix",
-    "lint:styles": "stylelint \"src/**/*.scss\"",
     "jest": "jest",
     "jest:coverage": "jest --coverage",
     "jest:watch": "jest --watch",
@@ -68,7 +67,7 @@
     "@signozhq/table": "0.3.7",
     "@signozhq/toggle-group": "0.0.1",
     "@signozhq/tooltip": "0.0.2",
-    "@signozhq/ui": "0.0.5",
+    "@signozhq/ui": "0.0.6",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",
@@ -140,10 +139,12 @@
     "react-helmet-async": "1.3.0",
     "react-hook-form": "7.71.2",
     "react-i18next": "^11.16.1",
+    "react-json-tree": "^0.20.0",
     "react-lottie": "1.2.10",
     "react-markdown": "8.0.7",
     "react-query": "3.39.3",
     "react-redux": "^7.2.2",
+    "react-rnd": "^10.5.3",
     "react-router-dom": "^5.2.0",
     "react-router-dom-v5-compat": "6.27.0",
     "react-syntax-highlighter": "15.5.0",
@@ -230,7 +231,6 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-plugin-rulesdir": "0.2.2",
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "eslint-plugin-sonarjs": "^0.12.0",
     "husky": "^7.0.4",
@@ -246,7 +246,6 @@
     "orval": "7.18.0",
     "portfinder-sync": "^0.0.2",
     "postcss": "8.5.6",
-    "postcss-scss": "4.0.9",
     "prettier": "2.2.1",
     "prop-types": "15.8.1",
     "react-hooks-testing-library": "0.6.0",
@@ -254,8 +253,6 @@
     "redux-mock-store": "1.5.4",
     "sass": "1.97.3",
     "sharp": "0.34.5",
-    "stylelint": "17.7.0",
-    "stylelint-scss": "7.0.0",
     "svgo": "4.0.0",
     "ts-api-utils": "2.4.0",
     "ts-jest": "29.4.6",

frontend/src/AppRoutes/pageComponents.ts

@@ -65,6 +65,13 @@ export const TraceDetail = Loadable(
 		),
 );
 
+export const TraceDetailV3 = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "TraceDetailV3 Page" */ 'pages/TraceDetailV3Page/index'
+		),
+);
+
 export const UsageExplorerPage = Loadable(
 	() => import(/* webpackChunkName: "UsageExplorerPage" */ 'modules/Usage'),
 );

frontend/src/AppRoutes/routes.ts

@@ -47,6 +47,7 @@ import {
 	StatusPage,
 	SupportPage,
 	TraceDetail,
+	TraceDetailV3,
 	TraceFilter,
 	TracesExplorer,
 	TracesFunnelDetails,
@@ -140,10 +141,17 @@ const routes: AppRoutes[] = [
 	{
 		path: ROUTES.TRACE_DETAIL,
 		exact: true,
-		component: TraceDetail,
+		component: TraceDetailV3,
 		isPrivate: true,
 		key: 'TRACE_DETAIL',
 	},
+	{
+		path: ROUTES.TRACE_DETAIL_OLD,
+		exact: true,
+		component: TraceDetail,
+		isPrivate: true,
+		key: 'TRACE_DETAIL_OLD',
+	},
 	{
 		path: ROUTES.SETTINGS,
 		exact: false,

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

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

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

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

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

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

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

@@ -0,0 +1,121 @@
+/**
+ * ! Do not edit manually
+ * * The file has been auto-generated using Orval for SigNoz
+ * * regenerate with 'yarn generate:api'
+ * SigNoz
+ */
+import type {
+	MutationFunction,
+	UseMutationOptions,
+	UseMutationResult,
+} from 'react-query';
+import { useMutation } from 'react-query';
+
+import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type {
+	GetWaterfall200,
+	GetWaterfallPathParameters,
+	RenderErrorResponseDTO,
+	TracedetailtypesWaterfallRequestDTO,
+} from '../sigNoz.schemas';
+
+/**
+ * Returns the waterfall view of spans for a given trace ID with tree structure, metadata, and windowed pagination
+ * @summary Get waterfall view for a trace
+ */
+export const getWaterfall = (
+	{ traceID }: GetWaterfallPathParameters,
+	tracedetailtypesWaterfallRequestDTO: BodyType<TracedetailtypesWaterfallRequestDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetWaterfall200>({
+		url: `/api/v3/traces/${traceID}/waterfall`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: tracedetailtypesWaterfallRequestDTO,
+		signal,
+	});
+};
+
+export const getGetWaterfallMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof getWaterfall>>,
+		TError,
+		{
+			pathParams: GetWaterfallPathParameters;
+			data: BodyType<TracedetailtypesWaterfallRequestDTO>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof getWaterfall>>,
+	TError,
+	{
+		pathParams: GetWaterfallPathParameters;
+		data: BodyType<TracedetailtypesWaterfallRequestDTO>;
+	},
+	TContext
+> => {
+	const mutationKey = ['getWaterfall'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+		  'mutationKey' in options.mutation &&
+		  options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof getWaterfall>>,
+		{
+			pathParams: GetWaterfallPathParameters;
+			data: BodyType<TracedetailtypesWaterfallRequestDTO>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return getWaterfall(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type GetWaterfallMutationResult = NonNullable<
+	Awaited<ReturnType<typeof getWaterfall>>
+>;
+export type GetWaterfallMutationBody = BodyType<TracedetailtypesWaterfallRequestDTO>;
+export type GetWaterfallMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get waterfall view for a trace
+ */
+export const useGetWaterfall = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof getWaterfall>>,
+		TError,
+		{
+			pathParams: GetWaterfallPathParameters;
+			data: BodyType<TracedetailtypesWaterfallRequestDTO>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof getWaterfall>>,
+	TError,
+	{
+		pathParams: GetWaterfallPathParameters;
+		data: BodyType<TracedetailtypesWaterfallRequestDTO>;
+	},
+	TContext
+> => {
+	const mutationOptions = getGetWaterfallMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};

frontend/src/api/trace/getTraceV3.tsx

@@ -0,0 +1,66 @@
+import { ApiV3Instance as axios } from 'api';
+import { omit } from 'lodash-es';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import {
+	GetTraceV3PayloadProps,
+	GetTraceV3SuccessResponse,
+	SpanV3,
+} from 'types/api/trace/getTraceV3';
+
+const getTraceV3 = async (
+	props: GetTraceV3PayloadProps,
+): Promise<SuccessResponse<GetTraceV3SuccessResponse> | ErrorResponse> => {
+	let uncollapsedSpans = [...props.uncollapsedSpans];
+	if (!props.isSelectedSpanIDUnCollapsed) {
+		uncollapsedSpans = uncollapsedSpans.filter(
+			(node) => node !== props.selectedSpanId,
+		);
+	} else if (
+		props.selectedSpanId &&
+		!uncollapsedSpans.includes(props.selectedSpanId)
+	) {
+		// V3 backend only uses uncollapsedSpans list (unlike V2 which also interprets
+		// isSelectedSpanIDUnCollapsed server-side), so explicitly add the selected span
+		uncollapsedSpans.push(props.selectedSpanId);
+	}
+	const postData: GetTraceV3PayloadProps = {
+		...props,
+		uncollapsedSpans,
+	};
+	const response = await axios.post<GetTraceV3SuccessResponse>(
+		`/traces/${props.traceId}/waterfall`,
+		omit(postData, 'traceId'),
+	);
+
+	// V3 API wraps response in { status, data }
+	const rawPayload = (response.data as any).data || response.data;
+
+	// Derive 'service.name' from resource for convenience — only derived field
+	const spans: SpanV3[] = (rawPayload.spans || []).map((span: any) => ({
+		...span,
+		'service.name': span.resource?.['service.name'] || '',
+	}));
+
+	// V3 API returns startTimestampMillis/endTimestampMillis as relative durations (ms from epoch offset),
+	// not absolute unix millis like V2. The span timestamps are absolute unix millis.
+	// Convert by using the first span's timestamp as the base if there's a mismatch.
+	let { startTimestampMillis, endTimestampMillis } = rawPayload;
+	if (
+		spans.length > 0 &&
+		spans[0].timestamp > 0 &&
+		startTimestampMillis < spans[0].timestamp / 10
+	) {
+		const durationMillis = endTimestampMillis - startTimestampMillis;
+		startTimestampMillis = spans[0].timestamp;
+		endTimestampMillis = startTimestampMillis + durationMillis;
+	}
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: 'Success',
+		payload: { ...rawPayload, spans, startTimestampMillis, endTimestampMillis },
+	};
+};
+
+export default getTraceV3;

frontend/src/assets/NotFound.tsx

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

frontend/src/components/AppLoading/AppLoading.tsx

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

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

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

frontend/src/components/AuthPageContainer/AuthHeader.tsx

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

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

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

frontend/src/components/DetailsPanel/DetailsHeader/DetailsHeader.styles.scss

@@ -0,0 +1,40 @@
+.details-header {
+	// ghost + secondary missing hover bg token in @signozhq/button
+	--button-ghost-hover-background: var(--l3-background);
+
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 12px;
+	border-bottom: 1px solid var(--l1-border);
+	height: 36px;
+	background: var(--l2-background);
+
+	&__icon-btn {
+		flex-shrink: 0;
+	}
+
+	&__title {
+		font-size: 13px;
+		font-weight: 500;
+		color: var(--l1-foreground);
+		flex: 1;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	&__actions {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		flex-shrink: 0;
+	}
+
+	&__nav {
+		display: flex;
+		align-items: center;
+		gap: 2px;
+	}
+}

frontend/src/components/DetailsPanel/DetailsHeader/DetailsHeader.tsx

@@ -0,0 +1,59 @@
+import { ReactNode } from 'react';
+import { Button } from '@signozhq/button';
+import { X } from '@signozhq/icons';
+
+import './DetailsHeader.styles.scss';
+
+export interface HeaderAction {
+	key: string;
+	component: ReactNode; // check later if we can use direct btn itself or not.
+}
+
+export interface DetailsHeaderProps {
+	title: string;
+	onClose: () => void;
+	actions?: HeaderAction[];
+	closePosition?: 'left' | 'right';
+	className?: string;
+}
+
+function DetailsHeader({
+	title,
+	onClose,
+	actions,
+	closePosition = 'right',
+	className,
+}: DetailsHeaderProps): JSX.Element {
+	const closeButton = (
+		<Button
+			variant="ghost"
+			size="icon"
+			color="secondary"
+			onClick={onClose}
+			aria-label="Close"
+			className="details-header__icon-btn"
+		>
+			<X size={14} />
+		</Button>
+	);
+
+	return (
+		<div className={`details-header ${className || ''}`}>
+			{closePosition === 'left' && closeButton}
+
+			<span className="details-header__title">{title}</span>
+
+			{actions && (
+				<div className="details-header__actions">
+					{actions.map((action) => (
+						<div key={action.key}>{action.component}</div>
+					))}
+				</div>
+			)}
+
+			{closePosition === 'right' && closeButton}
+		</div>
+	);
+}
+
+export default DetailsHeader;

frontend/src/components/DetailsPanel/DetailsPanelDrawer.styles.scss

@@ -0,0 +1,7 @@
+.details-panel-drawer {
+	&__body {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+	}
+}

frontend/src/components/DetailsPanel/DetailsPanelDrawer.tsx

@@ -0,0 +1,36 @@
+import { DrawerWrapper } from '@signozhq/drawer';
+
+import './DetailsPanelDrawer.styles.scss';
+
+interface DetailsPanelDrawerProps {
+	isOpen: boolean;
+	onClose: () => void;
+	children: React.ReactNode;
+	className?: string;
+}
+
+function DetailsPanelDrawer({
+	isOpen,
+	onClose,
+	children,
+	className,
+}: DetailsPanelDrawerProps): JSX.Element {
+	return (
+		<DrawerWrapper
+			open={isOpen}
+			onOpenChange={(open): void => {
+				if (!open) {
+					onClose();
+				}
+			}}
+			direction="right"
+			type="panel"
+			showOverlay={false}
+			allowOutsideClick
+			className={`details-panel-drawer ${className || ''}`}
+			content={<div className="details-panel-drawer__body">{children}</div>}
+		/>
+	);
+}
+
+export default DetailsPanelDrawer;

frontend/src/components/DetailsPanel/index.ts

@@ -0,0 +1,8 @@
+export type {
+	DetailsHeaderProps,
+	HeaderAction,
+} from './DetailsHeader/DetailsHeader';
+export { default as DetailsHeader } from './DetailsHeader/DetailsHeader';
+export { default as DetailsPanelDrawer } from './DetailsPanelDrawer';
+export type { DetailsPanelState, UseDetailsPanelOptions } from './types';
+export { default as useDetailsPanel } from './useDetailsPanel';

frontend/src/components/DetailsPanel/types.ts

@@ -0,0 +1,10 @@
+export interface DetailsPanelState {
+	isOpen: boolean;
+	open: () => void;
+	close: () => void;
+}
+
+export interface UseDetailsPanelOptions {
+	entityId: string | undefined;
+	onClose?: () => void;
+}

frontend/src/components/DetailsPanel/useDetailsPanel.ts

@@ -0,0 +1,29 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { DetailsPanelState, UseDetailsPanelOptions } from './types';
+
+function useDetailsPanel({
+	entityId,
+	onClose,
+}: UseDetailsPanelOptions): DetailsPanelState {
+	const [isOpen, setIsOpen] = useState<boolean>(false);
+	const prevEntityIdRef = useRef<string>('');
+
+	useEffect(() => {
+		const currentId = entityId || '';
+		if (currentId && currentId !== prevEntityIdRef.current) {
+			setIsOpen(true);
+		}
+		prevEntityIdRef.current = currentId;
+	}, [entityId]);
+
+	const open = useCallback(() => setIsOpen(true), []);
+	const close = useCallback(() => {
+		setIsOpen(false);
+		onClose?.();
+	}, [onClose]);
+
+	return { isOpen, open, close };
+}
+
+export default useDetailsPanel;

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

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

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

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

frontend/src/components/LogDetail/index.tsx

@@ -15,7 +15,6 @@ import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import ContextView from 'container/LogDetailedView/ContextView/ContextView';
 import InfraMetrics from 'container/LogDetailedView/InfraMetrics/InfraMetrics';
-import JSONView from 'container/LogDetailedView/JsonView';
 import Overview from 'container/LogDetailedView/Overview';
 import {
 	aggregateAttributesResourcesToString,
@@ -45,6 +44,7 @@ import {
 	TextSelect,
 	X,
 } from 'lucide-react';
+import { JsonView } from 'periscope/components/JsonView';
 import { AppState } from 'store/reducers';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
@@ -527,7 +527,9 @@ function LogDetailInner({
 						handleChangeSelectedView={handleChangeSelectedView}
 					/>
 				)}
-				{selectedView === VIEW_TYPES.JSON && <JSONView logData={log} />}
+				{selectedView === VIEW_TYPES.JSON && (
+					<JsonView data={LogJsonData} height="68vh" />
+				)}
 
 				{selectedView === VIEW_TYPES.CONTEXT && (
 					<ContextView

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

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

frontend/src/components/PanelDataLoading/PanelDataLoading.tsx

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

frontend/src/components/TimelineV3/TimelineV3.styles.scss

@@ -0,0 +1,4 @@
+.timeline-v3-container {
+	// flex: 1;
+	overflow: visible;
+}

frontend/src/components/TimelineV3/TimelineV3.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useState } from 'react';
+import { useMeasure } from 'react-use';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+import {
+	getIntervals,
+	getMinimumIntervalsBasedOnWidth,
+	Interval,
+} from './utils';
+
+import './TimelineV3.styles.scss';
+
+interface ITimelineV3Props {
+	startTimestamp: number;
+	endTimestamp: number;
+	timelineHeight: number;
+	offsetTimestamp: number;
+}
+
+function TimelineV3(props: ITimelineV3Props): JSX.Element {
+	const {
+		startTimestamp,
+		endTimestamp,
+		timelineHeight,
+		offsetTimestamp,
+	} = props;
+	const [intervals, setIntervals] = useState<Interval[]>([]);
+	const [ref, { width }] = useMeasure<HTMLDivElement>();
+	const isDarkMode = useIsDarkMode();
+
+	useEffect(() => {
+		const spread = endTimestamp - startTimestamp;
+		if (spread < 0) {
+			return;
+		}
+
+		const minIntervals = getMinimumIntervalsBasedOnWidth(width);
+		const intervalisedSpread = (spread / minIntervals) * 1.0;
+		const intervals = getIntervals(intervalisedSpread, spread, offsetTimestamp);
+
+		setIntervals(intervals);
+	}, [startTimestamp, endTimestamp, width, offsetTimestamp]);
+
+	if (endTimestamp < startTimestamp) {
+		console.error(
+			'endTimestamp cannot be less than startTimestamp',
+			startTimestamp,
+			endTimestamp,
+		);
+		return <div />;
+	}
+
+	const strokeColor = isDarkMode ? ' rgb(192,193,195,0.8)' : 'black';
+
+	return (
+		<div ref={ref as never} className="timeline-v3-container">
+			<svg
+				width={width}
+				height={timelineHeight * 2.5}
+				xmlns="http://www.w3.org/2000/svg"
+				overflow="visible"
+			>
+				{intervals &&
+					intervals.length > 0 &&
+					intervals.map((interval, index) => (
+						<g
+							transform={`translate(${(interval.percentage * width) / 100},0)`}
+							key={`${interval.percentage + interval.label + index}`}
+							textAnchor="middle"
+							fontSize="0.6rem"
+						>
+							<text
+								x={index === intervals.length - 1 ? -10 : 0}
+								y={timelineHeight * 2}
+								fill={strokeColor}
+							>
+								{interval.label}
+							</text>
+							<line y1={0} y2={timelineHeight} stroke={strokeColor} strokeWidth="1" />
+						</g>
+					))}
+			</svg>
+		</div>
+	);
+}
+
+export default TimelineV3;

frontend/src/components/TimelineV3/utils.ts

@@ -0,0 +1,88 @@
+import {
+	IIntervalUnit,
+	Interval,
+	INTERVAL_UNITS,
+	resolveTimeFromInterval,
+} from 'components/TimelineV2/utils';
+import { toFixed } from 'utils/toFixed';
+
+export type { Interval };
+
+/** Fewer intervals than TimelineV2 for a cleaner flamegraph ruler. */
+export function getMinimumIntervalsBasedOnWidth(width: number): number {
+	if (width < 640) {
+		return 3;
+	}
+	if (width < 768) {
+		return 4;
+	}
+	if (width < 1024) {
+		return 5;
+	}
+	return 6;
+}
+
+/**
+ * Computes timeline intervals with offset-aware labels.
+ * Labels reflect absolute time from trace start (offsetTimestamp + elapsed),
+ * so when zoomed into a window, the first tick shows e.g. "50ms" not "0ms".
+ */
+export function getIntervals(
+	intervalSpread: number,
+	baseSpread: number,
+	offsetTimestamp: number,
+): Interval[] {
+	const integerPartString = intervalSpread.toString().split('.')[0];
+	const integerPartLength = integerPartString.length;
+
+	const intervalSpreadNormalized =
+		intervalSpread < 1.0
+			? intervalSpread
+			: Math.floor(Number(integerPartString) / 10 ** (integerPartLength - 1)) *
+			  10 ** (integerPartLength - 1);
+
+	// Unit must suit both: (1) tick granularity (intervalSpread) and (2) label magnitude
+	// (offsetTimestamp). When zoomed deep into a trace, labels show offsetTimestamp + elapsed,
+	// so we must pick a unit where that value is readable (e.g. "500.00s" not "500000.00ms").
+	const valueForUnitSelection = Math.max(offsetTimestamp, intervalSpread);
+	let intervalUnit: IIntervalUnit = INTERVAL_UNITS[0];
+	for (let idx = INTERVAL_UNITS.length - 1; idx >= 0; idx -= 1) {
+		const standardInterval = INTERVAL_UNITS[idx];
+		if (valueForUnitSelection * standardInterval.multiplier >= 1) {
+			intervalUnit = INTERVAL_UNITS[idx];
+			break;
+		}
+	}
+
+	const intervals: Interval[] = [
+		{
+			label: `${toFixed(
+				resolveTimeFromInterval(offsetTimestamp, intervalUnit),
+				2,
+			)}${intervalUnit.name}`,
+			percentage: 0,
+		},
+	];
+
+	// Only show even-interval ticks — skip the trailing partial tick at the edge.
+	// The last even tick sits before the full width, so it doesn't conflict with
+	// span duration labels that may have sub-millisecond precision.
+	let elapsedIntervals = 0;
+
+	while (
+		elapsedIntervals + intervalSpreadNormalized <= baseSpread &&
+		intervals.length < 20
+	) {
+		elapsedIntervals += intervalSpreadNormalized;
+		const labelTime = offsetTimestamp + elapsedIntervals;
+
+		intervals.push({
+			label: `${toFixed(resolveTimeFromInterval(labelTime, intervalUnit), 2)}${
+				intervalUnit.name
+			}`,
+			percentage: (elapsedIntervals / baseSpread) * 100,
+		});
+	}
+
+	return intervals;
+}

frontend/src/components/WelcomeLeftContainer/index.tsx

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

frontend/src/components/createGuardedRoute/createGuardedRoute.tsx

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

frontend/src/constants/localStorage.ts

@@ -37,4 +37,5 @@ export enum LOCALSTORAGE {
 	SHOW_FREQUENCY_CHART = 'SHOW_FREQUENCY_CHART',
 	DISSMISSED_COST_METER_INFO = 'DISMISSED_COST_METER_INFO',
 	DISMISSED_API_KEYS_DEPRECATION_BANNER = 'DISMISSED_API_KEYS_DEPRECATION_BANNER',
+	TRACE_DETAILS_SPAN_DETAILS_POSITION = 'TRACE_DETAILS_SPAN_DETAILS_POSITION',
 }

frontend/src/constants/reactQueryKeys.ts

@@ -32,6 +32,7 @@ export const REACT_QUERY_KEY = {
 	UPDATE_ALERT_RULE: 'UPDATE_ALERT_RULE',
 	GET_ACTIVE_LICENSE_V3: 'GET_ACTIVE_LICENSE_V3',
 	GET_TRACE_V2_WATERFALL: 'GET_TRACE_V2_WATERFALL',
+	GET_TRACE_V3_WATERFALL: 'GET_TRACE_V3_WATERFALL',
 	GET_TRACE_V2_FLAMEGRAPH: 'GET_TRACE_V2_FLAMEGRAPH',
 	GET_POD_LIST: 'GET_POD_LIST',
 	GET_NODE_LIST: 'GET_NODE_LIST',

frontend/src/constants/routes.ts

@@ -8,6 +8,7 @@ const ROUTES = {
 	SERVICE_MAP: '/service-map',
 	TRACE: '/trace',
 	TRACE_DETAIL: '/trace/:id',
+	TRACE_DETAIL_OLD: '/trace-old/:id',
 	TRACES_EXPLORER: '/traces-explorer',
 	ONBOARDING: '/onboarding',
 	GET_STARTED: '/get-started',

frontend/src/constants/theme.ts

@@ -33,6 +33,102 @@ const themeColors = {
 		purple: '#800080',
 		cyan: '#00FFFF',
 	},
+	traceDetailColorsV3: {
+		// Blues
+		blue1: '#2F80ED',
+		blue2: '#3366E6',
+		blue3: '#4682B4',
+		blue4: '#1F63E0',
+		blue5: '#3A7AED',
+		blue6: '#5A9DF5',
+		blue7: '#2874A6',
+		blue8: '#2E86C1',
+		blue9: '#3498DB',
+		blue10: '#1E90FF',
+		blue11: '#4169E1',
+
+		// Cyans / Teals
+		cyan1: '#00CEC9',
+		cyan2: '#22A6F2',
+		cyan3: '#00B0AA',
+		cyan4: '#33D6C2',
+		cyan5: '#66E9DA',
+		cyan6: '#48DBFB',
+		cyan7: '#00BFFF',
+		cyan8: '#63B8FF',
+		teal1: '#009688',
+		teal2: '#1ABC9C',
+		teal3: '#48C9B0',
+		teal4: '#76D7C4',
+		teal5: '#20B2AA',
+
+		// Greens
+		green1: '#27AE60',
+		green2: '#3CB371',
+		green3: '#1E8449',
+		green4: '#2ECC71',
+		green5: '#58D68D',
+		green6: '#229954',
+		green7: '#52BE80',
+		green8: '#82E0AA',
+		green9: '#73C6B6',
+
+		// Limes
+		lime1: '#A3E635',
+		lime2: '#B9F18D',
+		lime3: '#84CC16',
+		lime4: '#65A30D',
+
+		// Yellows
+		yellow1: '#F1C40F',
+		yellow2: '#F7DC6F',
+		yellow3: '#F9E79F',
+		yellow4: '#F4D03F',
+		yellow5: '#D4AC0D',
+
+		// Golds / Ambers
+		gold1: '#F2C94C',
+		gold2: '#FFD93D',
+		gold3: '#FFCA28',
+		gold4: '#B7950B',
+		gold5: '#D4A017',
+
+		// Oranges (non-red)
+		orange1: '#F39C12',
+		orange2: '#E67E22',
+		orange3: '#F5B041',
+		orange4: '#D35400',
+		orange5: '#EB984E',
+		orange6: '#FAD7A0',
+
+		// Purples / Violets
+		purple1: '#BB6BD9',
+		purple2: '#9B51E0',
+		purple3: '#DA77F2',
+		purple4: '#C77DFF',
+		purple5: '#6C5CE7',
+		purple6: '#8E44AD',
+		purple7: '#9B59B6',
+		purple8: '#BB8FCE',
+		purple9: '#7D3C98',
+		purple10: '#A569BD',
+
+		// Lavenders
+		lavender1: '#AF7AC5',
+		lavender2: '#C39BD3',
+		lavender3: '#D2B4DE',
+
+		// Pinks / Magentas
+		pink1: '#E91E8C',
+		pink2: '#FF6FD8',
+		pink3: '#F06292',
+		pink4: '#CE93D8',
+
+		// Salmons / Corals (distinct from error red)
+		salmon1: '#FF8A65',
+		salmon2: '#FFAB91',
+		salmon3: '#E0876A',
+	},
 	chartcolors: {
 		// Blues (3)
 		dodgerBlue: '#2F80ED',

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,8 +1,5 @@
 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';
@@ -15,13 +12,13 @@ function HeroSection(): JSX.Element {
 			style={
 				isDarkMode
 					? {
-							backgroundImage: `url('${integrationsHeroBgUrl}')`,
+							backgroundImage: `url('/Images/integrations-hero-bg.png')`,
 					  }
 					: {}
 			}
 		>
 			<div className="hero-section__icon">
-				<img src={awsDarkUrl} alt="aws-logo" />
+				<img src="/Logos/aws-dark.svg" 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,8 +3,6 @@ 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 {
@@ -38,7 +36,7 @@ export function SuccessView(): JSX.Element {
 			)}
 			<div className="cloud-account-setup-success-view">
 				<div className="cloud-account-setup-success-view__icon">
-					<img src={solidCheckCircleUrl} alt="Success" />
+					<img src="Icons/solid-check-circle.svg" alt="Success" />
 				</div>
 				<div className="cloud-account-setup-success-view__content">
 					<div className="cloud-account-setup-success-view__title">

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

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

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

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

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

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

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

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

frontend/src/container/EmptyLogsSearch/EmptyLogsSearch.styles.scss

@@ -123,6 +123,7 @@
 				&__row {
 					display: flex;
 					flex-direction: row;
+					flex-wrap: wrap;
 					align-items: flex-end;
 					max-width: 825px;
 					gap: 25px;

frontend/src/container/EmptyLogsSearch/EmptyLogsSearch.tsx

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

frontend/src/container/ForgotPassword/index.tsx

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

frontend/src/container/FullScreenHeader/FullScreenHeader.tsx

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

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

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

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

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

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

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

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

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

frontend/src/container/Home/Home.tsx

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

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

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

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

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

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

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

frontend/src/container/Home/constants.ts

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

frontend/src/container/HostMetricsLoading/HostMetricsLoading.tsx

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

frontend/src/container/InfraMonitoringHosts/HostsEmptyOrIncorrectMetrics.tsx

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

frontend/src/container/InfraMonitoringHosts/HostsListTable.tsx

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

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

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

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

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

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

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

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

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

frontend/src/container/InfraMonitoringK8s/K8sEmptyOrIncorrectMetrics.tsx

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

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

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

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

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

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

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

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

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

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

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

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

@@ -9,8 +9,6 @@ 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';
@@ -61,7 +59,7 @@ export function AlertsEmptyState(): JSX.Element {
 					<div className="alert-content">
 						<section className="heading">
 							<img
-								src={alertEmojiUrl}
+								src="/Icons/alert_emoji.svg"
 								alt="alert-header"
 								style={{ height: '32px', width: '32px' }}
 							/>

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

@@ -15,9 +15,6 @@ 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';
@@ -28,91 +25,91 @@ const templatesList: DashboardTemplate[] = [
 		icon: <Drill />,
 		id: 'blank',
 		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
+		previewImage: '/Images/blankDashboardTemplatePreview.svg',
 	},
 	{
 		name: 'Alert Manager',
 		icon: <ConciergeBell />,
 		id: 'alertManager',
 		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
+		previewImage: '/Images/blankDashboardTemplatePreview.svg',
 	},
 	{
 		name: 'Apache',
 		icon: <ApacheIcon />,
 		id: 'apache',
 		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
+		previewImage: '/Images/blankDashboardTemplatePreview.svg',
 	},
 	{
 		name: 'Docker',
 		icon: <DockerIcon />,
 		id: 'docker',
 		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
+		previewImage: '/Images/blankDashboardTemplatePreview.svg',
 	},
 	{
 		name: 'Elasticsearch',
 		icon: <ElasticSearchIcon />,
 		id: 'elasticSearch',
 		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
+		previewImage: '/Images/blankDashboardTemplatePreview.svg',
 	},
 	{
 		name: 'MongoDB',
 		icon: <MongoDBIcon />,
 		id: 'mongoDB',
 		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
+		previewImage: '/Images/blankDashboardTemplatePreview.svg',
 	},
 	{
 		name: 'Heroku',
 		icon: <HerokuIcon />,
 		id: 'heroku',
 		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
+		previewImage: '/Images/blankDashboardTemplatePreview.svg',
 	},
 	{
 		name: 'Nginx',
 		icon: <NginxIcon />,
 		id: 'nginx',
 		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
+		previewImage: '/Images/blankDashboardTemplatePreview.svg',
 	},
 	{
 		name: 'Kubernetes',
 		icon: <KubernetesIcon />,
 		id: 'kubernetes',
 		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
+		previewImage: '/Images/blankDashboardTemplatePreview.svg',
 	},
 	{
 		name: 'MySQL',
 		icon: <MySQLIcon />,
 		id: 'mySQL',
 		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
+		previewImage: '/Images/blankDashboardTemplatePreview.svg',
 	},
 	{
 		name: 'PostgreSQL',
 		icon: <PostgreSQLIcon />,
 		id: 'postgreSQL',
 		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
+		previewImage: '/Images/blankDashboardTemplatePreview.svg',
 	},
 	{
 		name: 'Redis',
 		icon: <RedisIcon />,
 		id: 'redis',
 		description: 'Create a custom dashboard from scratch.',
-		previewImage: redisTemplatePreviewUrl,
+		previewImage: '/Images/redisTemplatePreview.svg',
 	},
 	{
 		name: 'AWS',
 		icon: <DraftingCompass size={14} />,
 		id: 'aws',
 		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
+		previewImage: '/Images/blankDashboardTemplatePreview.svg',
 	},
 ];
 

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -84,10 +84,6 @@ 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';
@@ -679,7 +675,11 @@ function DashboardsList(): JSX.Element {
 					</div>
 				) : dashboardFetchError ? (
 					<div className="dashboard-error-state">
-						<img src={awwSnapUrl} alt="something went wrong" className="error-img" />
+						<img
+							src="/Icons/awwSnap.svg"
+							alt="something went wrong"
+							className="error-img"
+						/>
 
 						<Typography.Text className="error-text">
 							Something went wrong :/ Please retry or contact support.
@@ -705,7 +705,11 @@ function DashboardsList(): JSX.Element {
 					</div>
 				) : dashboards.length === 0 && !searchString ? (
 					<div className="dashboard-empty-state">
-						<img src={dashboardsUrl} alt="dashboards" className="dashboard-img" />
+						<img
+							src="/Icons/dashboards.svg"
+							alt="dashboards"
+							className="dashboard-img"
+						/>
 						<section className="text">
 							<Typography.Text className="no-dashboard">
 								No dashboards yet.{' '}
@@ -785,7 +789,7 @@ function DashboardsList(): JSX.Element {
 
 						{dashboards.length === 0 ? (
 							<div className="no-search">
-								<img src={emptyStateUrl} alt="img" className="img" />
+								<img src="/Icons/emptyState.svg" 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,8 +21,6 @@ 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';
@@ -139,7 +137,11 @@ function LiveLogsList({
 		() => (
 			<div className="live-logs-list-loading">
 				<div className="loading-live-logs-content">
-					<img className="loading-gif" src={loadingPlaneUrl} alt="wait-icon" />
+					<img
+						className="loading-gif"
+						src="/Icons/loading-plane.gif"
+						alt="wait-icon"
+					/>
 
 					<Typography>Fetching live logs...</Typography>
 				</div>

frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.styles.scss

@@ -11,6 +11,12 @@
 	}
 }
 
+.infra-metrics-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+	gap: 24px;
+}
+
 .infra-metrics-card {
 	margin: 1rem 0;
 	height: 300px;

frontend/src/container/LogDetailedView/InfraMetrics/NodeMetrics.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useRef } from 'react';
 import { useQueries, UseQueryResult } from 'react-query';
-import { Card, Col, Row, Skeleton, Typography } from 'antd';
+import { Card, Skeleton, Typography } from 'antd';
 import cx from 'classnames';
 import Uplot from 'components/Uplot';
 import { ENTITY_VERSION_V4 } from 'constants/app';
@@ -163,16 +163,16 @@ function NodeMetrics({
 		);
 	};
 	return (
-		<Row gutter={24}>
+		<div className="infra-metrics-grid">
 			{queries.map((query, idx) => (
-				<Col span={12} key={widgetInfo[idx].title}>
+				<div key={widgetInfo[idx].title}>
 					<Typography.Text>{widgetInfo[idx].title}</Typography.Text>
 					<Card bordered className="infra-metrics-card" ref={graphRef}>
 						{renderCardContent(query, idx)}
 					</Card>
-				</Col>
+				</div>
 			))}
-		</Row>
+		</div>
 	);
 }
 

frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useRef } from 'react';
 import { useQueries, UseQueryResult } from 'react-query';
-import { Card, Col, Row, Skeleton, Typography } from 'antd';
+import { Card, Skeleton, Typography } from 'antd';
 import cx from 'classnames';
 import Uplot from 'components/Uplot';
 import { ENTITY_VERSION_V4 } from 'constants/app';
@@ -146,16 +146,16 @@ function PodMetrics({
 	};
 
 	return (
-		<Row gutter={24}>
+		<div className="infra-metrics-grid">
 			{queries.map((query, idx) => (
-				<Col span={12} key={podWidgetInfo[idx].title}>
+				<div key={podWidgetInfo[idx].title}>
 					<Typography.Text>{podWidgetInfo[idx].title}</Typography.Text>
 					<Card bordered className="infra-metrics-card" ref={graphRef}>
 						{renderCardContent(query, idx)}
 					</Card>
-				</Col>
+				</div>
 			))}
-		</Row>
+		</div>
 	);
 }
 

frontend/src/container/Login/index.tsx

@@ -15,8 +15,6 @@ 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';
@@ -307,7 +305,7 @@ function Login(): JSX.Element {
 			<FormContainer form={form} onFinish={onSubmitHandler}>
 				<div className="login-form-header">
 					<div className="login-form-emoji">
-						<img src={tvUrl} alt="TV" width="32" height="32" />
+						<img src="/svgs/tv.svg" alt="TV" width="32" height="32" />
 					</div>
 					<Typography.Title level={4} className="login-form-title">
 						Sign in to your workspace

frontend/src/container/LogsError/LogsError.tsx

@@ -3,8 +3,6 @@ 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 {
@@ -21,7 +19,11 @@ export default function LogsError(): JSX.Element {
 	return (
 		<div className="logs-error-container">
 			<div className="logs-error-content">
-				<img src={awwSnapUrl} alt="error-emoji" className="error-state-svg" />
+				<img
+					src="/Icons/awwSnap.svg"
+					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,8 +4,6 @@ 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 {
@@ -26,7 +24,7 @@ export default function QueryStatus(
 		if (error) {
 			return (
 				<img
-					src={solidXCircleUrl}
+					src="/Icons/solid-x-circle.svg"
 					alt="header"
 					className="error"
 					style={{ height: '14px', width: '14px' }}

frontend/src/container/LogsLoading/LogsLoading.tsx

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

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

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

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

@@ -13,8 +13,6 @@ 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';
 
@@ -97,7 +95,7 @@ function MetricsTable({
 								data-testid="metrics-table-empty-state"
 							>
 								<img
-									src={emptyStateUrl}
+									src="/Icons/emptyState.svg"
 									alt="thinking-emoji"
 									className="empty-state-svg"
 								/>

frontend/src/container/NoLogs/NoLogs.tsx

@@ -7,8 +7,6 @@ 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({
@@ -52,7 +50,7 @@ export default function NoLogs({
 	return (
 		<div className="no-logs-container">
 			<div className="no-logs-container-content">
-				<img className="eyes-emoji" src={eyesEmojiUrl} alt="eyes emoji" />
+				<img className="eyes-emoji" src="/Images/eyesEmoji.svg" alt="eyes emoji" />
 				<Typography className="no-logs-text">
 					No {dataSource} yet.
 					<span className="sub-text">

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

@@ -23,15 +23,6 @@ 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;
@@ -148,7 +139,7 @@ export default function ConnectionStatus(): JSX.Element {
 					<Header
 						entity="java"
 						heading="Java OpenTelemetry Instrumentation"
-						imgURL={javaPngUrl}
+						imgURL="/Logos/java.png"
 						docsURL="https://signoz.io/docs/instrumentation/java/"
 						imgClassName="supported-language-img"
 					/>
@@ -159,7 +150,7 @@ export default function ConnectionStatus(): JSX.Element {
 					<Header
 						entity="python"
 						heading="Python OpenTelemetry Instrumentation"
-						imgURL={pythonPngUrl}
+						imgURL="/Logos/python.png"
 						docsURL="https://signoz.io/docs/instrumentation/python/"
 						imgClassName="supported-language-img"
 					/>
@@ -170,7 +161,7 @@ export default function ConnectionStatus(): JSX.Element {
 					<Header
 						entity="javascript"
 						heading="Javascript OpenTelemetry Instrumentation"
-						imgURL={javascriptPngUrl}
+						imgURL="/Logos/javascript.png"
 						docsURL="https://signoz.io/docs/instrumentation/javascript/"
 						imgClassName="supported-language-img"
 					/>
@@ -180,7 +171,7 @@ export default function ConnectionStatus(): JSX.Element {
 					<Header
 						entity="go"
 						heading="Go OpenTelemetry Instrumentation"
-						imgURL={goPngUrl}
+						imgURL="/Logos/go.png"
 						docsURL="https://signoz.io/docs/instrumentation/golang/"
 						imgClassName="supported-language-img"
 					/>
@@ -190,7 +181,7 @@ export default function ConnectionStatus(): JSX.Element {
 					<Header
 						entity="rails"
 						heading="Ruby on Rails OpenTelemetry Instrumentation"
-						imgURL={railsPngUrl}
+						imgURL="/Logos/rails.png"
 						docsURL="https://signoz.io/docs/instrumentation/ruby-on-rails/"
 						imgClassName="supported-language-img"
 					/>
@@ -200,7 +191,7 @@ export default function ConnectionStatus(): JSX.Element {
 					<Header
 						entity="rust"
 						heading="Rust OpenTelemetry Instrumentation"
-						imgURL={rustPngUrl}
+						imgURL="/Logos/rust.png"
 						docsURL="https://signoz.io/docs/instrumentation/rust/"
 						imgClassName="supported-language-img"
 					/>
@@ -210,7 +201,7 @@ export default function ConnectionStatus(): JSX.Element {
 					<Header
 						entity="rust"
 						heading="Elixir OpenTelemetry Instrumentation"
-						imgURL={elixirPngUrl}
+						imgURL="/Logos/elixir.png"
 						docsURL="https://signoz.io/docs/instrumentation/elixir/"
 						imgClassName="supported-language-img"
 					/>
@@ -220,7 +211,7 @@ export default function ConnectionStatus(): JSX.Element {
 					<Header
 						entity="swift"
 						heading="Swift OpenTelemetry Instrumentation"
-						imgURL={swiftPngUrl}
+						imgURL="/Logos/swift.png"
 						docsURL="https://signoz.io/docs/instrumentation/swift/"
 						imgClassName="supported-language-img"
 					/>