feat(vite): migrate from webpack (#10392)

* fix(frontend): dynamic vars load with empty textbox variables

.github/workflows/build-enterprise.yaml

@@ -58,19 +58,19 @@ jobs:
         run: |
           mkdir -p frontend
           echo 'CI=1' > frontend/.env
-          echo 'INTERCOM_APP_ID="${{ secrets.INTERCOM_APP_ID }}"' >> frontend/.env
-          echo 'SEGMENT_ID="${{ secrets.SEGMENT_ID }}"' >> frontend/.env
-          echo 'SENTRY_AUTH_TOKEN="${{ secrets.SENTRY_AUTH_TOKEN }}"' >> frontend/.env
-          echo 'SENTRY_ORG="${{ secrets.SENTRY_ORG }}"' >> frontend/.env
-          echo 'SENTRY_PROJECT_ID="${{ secrets.SENTRY_PROJECT_ID }}"' >> frontend/.env
-          echo 'SENTRY_DSN="${{ secrets.SENTRY_DSN }}"' >> frontend/.env
-          echo 'TUNNEL_URL="${{ secrets.TUNNEL_URL }}"' >> frontend/.env
-          echo 'TUNNEL_DOMAIN="${{ secrets.TUNNEL_DOMAIN }}"' >> frontend/.env
-          echo 'POSTHOG_KEY="${{ secrets.POSTHOG_KEY }}"' >> frontend/.env
-          echo 'PYLON_APP_ID="${{ secrets.PYLON_APP_ID }}"' >> frontend/.env
-          echo 'APPCUES_APP_ID="${{ secrets.APPCUES_APP_ID }}"' >> frontend/.env
-          echo 'PYLON_IDENTITY_SECRET="${{ secrets.PYLON_IDENTITY_SECRET }}"' >> frontend/.env
-          echo 'DOCS_BASE_URL="https://signoz.io"' >> frontend/.env
+          echo 'VITE_INTERCOM_APP_ID="${{ secrets.INTERCOM_APP_ID }}"' >> frontend/.env
+          echo 'VITE_SEGMENT_ID="${{ secrets.SEGMENT_ID }}"' >> frontend/.env
+          echo 'VITE_SENTRY_AUTH_TOKEN="${{ secrets.SENTRY_AUTH_TOKEN }}"' >> frontend/.env
+          echo 'VITE_SENTRY_ORG="${{ secrets.SENTRY_ORG }}"' >> frontend/.env
+          echo 'VITE_SENTRY_PROJECT_ID="${{ secrets.SENTRY_PROJECT_ID }}"' >> frontend/.env
+          echo 'VITE_SENTRY_DSN="${{ secrets.SENTRY_DSN }}"' >> frontend/.env
+          echo 'VITE_TUNNEL_URL="${{ secrets.TUNNEL_URL }}"' >> frontend/.env
+          echo 'VITE_TUNNEL_DOMAIN="${{ secrets.TUNNEL_DOMAIN }}"' >> frontend/.env
+          echo 'VITE_POSTHOG_KEY="${{ secrets.POSTHOG_KEY }}"' >> frontend/.env
+          echo 'VITE_PYLON_APP_ID="${{ secrets.PYLON_APP_ID }}"' >> frontend/.env
+          echo 'VITE_APPCUES_APP_ID="${{ secrets.APPCUES_APP_ID }}"' >> frontend/.env
+          echo 'VITE_PYLON_IDENTITY_SECRET="${{ secrets.PYLON_IDENTITY_SECRET }}"' >> frontend/.env
+          echo 'VITE_DOCS_BASE_URL="https://signoz.io"' >> frontend/.env
       - name: cache-dotenv
         uses: actions/cache@v4
         with:

.github/workflows/build-staging.yaml

@@ -64,12 +64,12 @@ jobs:
         run: |
           mkdir -p frontend
           echo 'CI=1' > frontend/.env
-          echo 'TUNNEL_URL="${{ secrets.NP_TUNNEL_URL }}"' >> frontend/.env
-          echo 'TUNNEL_DOMAIN="${{ secrets.NP_TUNNEL_DOMAIN }}"' >> frontend/.env
-          echo 'PYLON_APP_ID="${{ secrets.NP_PYLON_APP_ID }}"' >> frontend/.env
-          echo 'APPCUES_APP_ID="${{ secrets.NP_APPCUES_APP_ID }}"' >> frontend/.env
-          echo 'PYLON_IDENTITY_SECRET="${{ secrets.NP_PYLON_IDENTITY_SECRET }}"' >> frontend/.env
-          echo 'DOCS_BASE_URL="https://staging.signoz.io"' >> frontend/.env
+          echo 'VITE_TUNNEL_URL="${{ secrets.NP_TUNNEL_URL }}"' >> frontend/.env
+          echo 'VITE_TUNNEL_DOMAIN="${{ secrets.NP_TUNNEL_DOMAIN }}"' >> frontend/.env
+          echo 'VITE_PYLON_APP_ID="${{ secrets.NP_PYLON_APP_ID }}"' >> frontend/.env
+          echo 'VITE_APPCUES_APP_ID="${{ secrets.NP_APPCUES_APP_ID }}"' >> frontend/.env
+          echo 'VITE_PYLON_IDENTITY_SECRET="${{ secrets.NP_PYLON_IDENTITY_SECRET }}"' >> frontend/.env
+          echo 'VITE_DOCS_BASE_URL="https://staging.signoz.io"' >> frontend/.env
       - name: cache-dotenv
         uses: actions/cache@v4
         with:

.github/workflows/gor-signoz.yaml

@@ -24,19 +24,19 @@ jobs:
       - name: dotenv-frontend
         working-directory: frontend
         run: |
-          echo 'INTERCOM_APP_ID="${{ secrets.INTERCOM_APP_ID }}"' > .env
-          echo 'SEGMENT_ID="${{ secrets.SEGMENT_ID }}"' >> .env
-          echo 'SENTRY_AUTH_TOKEN="${{ secrets.SENTRY_AUTH_TOKEN }}"' >> .env
-          echo 'SENTRY_ORG="${{ secrets.SENTRY_ORG }}"' >> .env
-          echo 'SENTRY_PROJECT_ID="${{ secrets.SENTRY_PROJECT_ID }}"' >> .env
-          echo 'SENTRY_DSN="${{ secrets.SENTRY_DSN }}"' >> .env
-          echo 'TUNNEL_URL="${{ secrets.TUNNEL_URL }}"' >> .env
-          echo 'TUNNEL_DOMAIN="${{ secrets.TUNNEL_DOMAIN }}"' >> .env
-          echo 'POSTHOG_KEY="${{ secrets.POSTHOG_KEY }}"' >> .env
-          echo 'PYLON_APP_ID="${{ secrets.PYLON_APP_ID }}"' >> .env
-          echo 'APPCUES_APP_ID="${{ secrets.APPCUES_APP_ID }}"' >> .env
-          echo 'PYLON_IDENTITY_SECRET="${{ secrets.PYLON_IDENTITY_SECRET }}"' >> .env
-          echo 'DOCS_BASE_URL="https://signoz.io"' >> .env
+          echo 'VITE_INTERCOM_APP_ID="${{ secrets.INTERCOM_APP_ID }}"' > .env
+          echo 'VITE_SEGMENT_ID="${{ secrets.SEGMENT_ID }}"' >> .env
+          echo 'VITE_SENTRY_AUTH_TOKEN="${{ secrets.SENTRY_AUTH_TOKEN }}"' >> .env
+          echo 'VITE_SENTRY_ORG="${{ secrets.SENTRY_ORG }}"' >> .env
+          echo 'VITE_SENTRY_PROJECT_ID="${{ secrets.SENTRY_PROJECT_ID }}"' >> .env
+          echo 'VITE_SENTRY_DSN="${{ secrets.SENTRY_DSN }}"' >> .env
+          echo 'VITE_TUNNEL_URL="${{ secrets.TUNNEL_URL }}"' >> .env
+          echo 'VITE_TUNNEL_DOMAIN="${{ secrets.TUNNEL_DOMAIN }}"' >> .env
+          echo 'VITE_POSTHOG_KEY="${{ secrets.POSTHOG_KEY }}"' >> .env
+          echo 'VITE_PYLON_APP_ID="${{ secrets.PYLON_APP_ID }}"' >> .env
+          echo 'VITE_APPCUES_APP_ID="${{ secrets.APPCUES_APP_ID }}"' >> .env
+          echo 'VITE_PYLON_IDENTITY_SECRET="${{ secrets.PYLON_IDENTITY_SECRET }}"' >> .env
+          echo 'VITE_DOCS_BASE_URL="https://signoz.io"' >> .env
       - name: node-setup
         uses: actions/setup-node@v5
         with:

.github/workflows/jsci.yaml

@@ -103,8 +103,9 @@ jobs:
           make py-test-setup
 
       - name: Generate permissions.type.ts
+        working-directory: ./frontend
         run: |
-          node frontend/scripts/generate-permissions-type.js
+          yarn generate:permissions-type
 
       - name: Teardown test environment
         if: always()

Makefile

@@ -238,4 +238,4 @@ py-clean: ## Clear all pycache and pytest cache from tests directory recursively
 .PHONY: gen-mocks
 gen-mocks:
 	@echo ">> Generating mocks"
-	@mockery --config .mockery.yml
+	@mockery --config .mockery.yml

frontend/.babelrc

@@ -1,16 +0,0 @@
-{
-	"presets": [
-		"@babel/preset-env",
-		["@babel/preset-react", { "runtime": "automatic" }],
-		"@babel/preset-typescript"
-	],
-	"plugins": [
-		"react-hot-loader/babel",
-		"@babel/plugin-proposal-class-properties"
-	],
-	"env": {
-		"production": {
-			"presets": ["minify"]
-		}
-	}
-}

frontend/.eslintrc.cjs

@@ -11,7 +11,6 @@ module.exports = {
 		browser: true,
 		es2021: true,
 		node: true,
-		'jest/globals': true,
 	},
 	extends: [
 		'eslint:recommended',
@@ -25,6 +24,7 @@ module.exports = {
 	parser: '@typescript-eslint/parser',
 	parserOptions: {
 		project: './tsconfig.json',
+		tsconfigRootDir: __dirname,
 		ecmaFeatures: {
 			jsx: true,
 		},
@@ -37,7 +37,7 @@ module.exports = {
 		'simple-import-sort', // Auto-sort imports
 		'react-hooks', // React Hooks rules
 		'prettier', // Code formatting
-		'jest', // Jest test rules
+		// 'jest', // TODO: Wait support on Biome to enable again
 		'jsx-a11y', // Accessibility rules
 		'import', // Import/export linting
 		'sonarjs', // Code quality/complexity

frontend/.nvmrc

@@ -1 +1 @@
-16.15.0
+22

frontend/__mocks__/env.ts

@@ -0,0 +1,4 @@
+export const ENVIRONMENT = {
+	baseURL: process.env.VITE_FRONTEND_API_ENDPOINT || '',
+	wsURL: process.env.VITE_WEBSOCKET_API_ENDPOINT || '',
+};

frontend/babel.config.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+	presets: [
+		['@babel/preset-env', { modules: 'auto' }],
+		['@babel/preset-react', { runtime: 'automatic' }],
+		['@babel/preset-typescript'],
+	],
+	plugins: ['@babel/plugin-proposal-class-properties'],
+	env: {
+		test: {
+			presets: [
+				[
+					'@babel/preset-env',
+					{ modules: 'commonjs', targets: { node: 'current' } },
+				],
+				['@babel/preset-react', { runtime: 'automatic' }],
+				['@babel/preset-typescript'],
+			],
+		},
+	},
+};

frontend/babel.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-	presets: [
-		['@babel/preset-env', { targets: { node: 'current' } }],
-		'@babel/preset-typescript',
-	],
-};

frontend/bundlesize.config.json

@@ -1,8 +0,0 @@
-{
-	"files": [
-		{
-			"path": "./build/**.js",
-			"maxSize": "1.2MB"
-		}
-	]
-}

frontend/example.env

@@ -1,8 +1,8 @@
 NODE_ENV="development"
 BUNDLE_ANALYSER="true"
-FRONTEND_API_ENDPOINT="http://localhost:8080/"
-PYLON_APP_ID="pylon-app-id"
-APPCUES_APP_ID="appcess-app-id"
-PYLON_IDENTITY_SECRET="pylon-identity-secret"
+VITE_FRONTEND_API_ENDPOINT="http://localhost:8080/"
+VITE_PYLON_APP_ID="pylon-app-id"
+VITE_APPCUES_APP_ID="appcess-app-id"
+VITE_PYLON_IDENTITY_SECRET="pylon-identity-secret"
 
-CI="1"
+CI="1"

frontend/index.html

@@ -1,127 +1,119 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<meta
-			http-equiv="Cache-Control"
-			content="no-cache, no-store, must-revalidate, max-age: 0"
-		/>
-		<meta http-equiv="Pragma" content="no-cache" />
-		<meta http-equiv="Expires" content="0" />
-
-		<!-- Preconnect to CDNs -->
-		<link rel="preconnect" href="https://fonts.googleapis.com" />
-		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-		<link rel="preconnect" href="https://cdn.vercel.com" crossorigin />
-
-		<link
-			href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
-			rel="stylesheet"
-		/>
-
-		<title data-react-helmet="true">
-			Open source Observability platform | SigNoz
-		</title>
-		<meta
-			data-react-helmet="true"
-			property="og:title"
-			content="Open source Observability platform | SigNoz"
-		/>
-		<meta
-			data-react-helmet="true"
-			name="description"
-			content="SigNoz is an open source observability platform to help you find issues in your deployed applications & solve them quickly. It provides a single pane of glass for metrics, traces and logs with deep filtering and aggregation to pin down specific issues very quickly."
-		/>
-		<meta
-			data-react-helmet="true"
-			property="og:description"
-			content="SigNoz is an open source observability platform to help you find issues in your deployed applications & solve them quickly. It provides a single pane of glass for metrics, traces and logs with deep filtering and aggregation to pin down specific issues very quickly."
-		/>
-		<meta
-			data-react-helmet="true"
-			property="og:image"
-			content="/images/signoz-hero-image.webp"
-		/>
-		<meta
-			data-react-helmet="true"
-			name="twitter:image"
-			content="/images/signoz-hero-image.webp"
-		/>
-		<meta
-			data-react-helmet="true"
-			name="twitter:image:alt"
-			content="Image for Open source Observability platform | SigNoz"
-		/>
-		<meta
-			data-react-helmet="true"
-			name="twitter:card"
-			content="summary_large_image"
-		/>
-		<meta data-react-helmet="true" name="docusaurus_locale" content="en" />
-		<meta data-react-helmet="true" name="docusaurus_tag" content="default" />
-		<meta name="robots" content="noindex" />
-		<link data-react-helmet="true" rel="shortcut icon" href="/favicon.ico" />
-
-		<% if (htmlWebpackPlugin.options.templateParameters.preloadFonts) { %> <%
-		htmlWebpackPlugin.options.templateParameters.preloadFonts.forEach(function(font)
-		{ %>
-		<link
-			rel="preload"
-			href="<%= font.href %>"
-			as="<%= font.as %>"
-			type="<%= font.type %>"
-			crossorigin="<%= font.crossorigin %>"
-		/>
-		<% }); %> <% } %>
-	</head>
-	<body data-theme="default">
-		<noscript>You need to enable JavaScript to run this app.</noscript>
-		<div id="root"></div>
-
-		<script>
-			const PYLON_APP_ID = '<%= htmlWebpackPlugin.options.PYLON_APP_ID %>';
-			(function () {
-				var e = window;
-				var t = document;
-				var n = function () {
-					n.e(arguments);
-				};
-				n.q = [];
-				n.e = function (e) {
-					n.q.push(e);
-				};
-				e.Pylon = n;
-				var r = function () {
-					var e = t.createElement('script');
-					e.setAttribute('type', 'text/javascript');
-					e.setAttribute('async', 'true');
-					e.setAttribute(
-						'src',
-						'https://widget.usepylon.com/widget/' + PYLON_APP_ID,
-					);
-					var n = t.getElementsByTagName('script')[0];
-					n.parentNode.insertBefore(e, n);
-				};
-				if (t.readyState === 'complete') {
-					r();
-				} else if (e.addEventListener) {
-					e.addEventListener('load', r, false);
-				}
-			})();
-		</script>
-		<script type="text/javascript">
-			window.AppcuesSettings = { enableURLDetection: true };
-		</script>
-		<script>
-			const APPCUES_APP_ID = '<%= htmlWebpackPlugin.options.APPCUES_APP_ID %>';
-			(function (d, t) {
-				var a = d.createElement(t);
-				a.async = 1;
-				a.src = '//fast.appcues.com/' + APPCUES_APP_ID + '.js';
-				var s = d.getElementsByTagName(t)[0];
-				s.parentNode.insertBefore(a, s);
-			})(document, 'script');
-		</script>
-		<link rel="stylesheet" href="/css/uPlot.min.css" />
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta
+			http-equiv="Cache-Control"
+			content="no-cache, no-store, must-revalidate, max-age: 0"
+		/>
+		<meta http-equiv="Pragma" content="no-cache" />
+		<meta http-equiv="Expires" content="0" />
+
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link rel="preconnect" href="https://cdn.vercel.com" crossorigin />
+
+		<link
+			href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
+			rel="stylesheet"
+		/>
+
+		<title data-react-helmet="true">
+			Open source Observability platform | SigNoz
+		</title>
+		<meta
+			data-react-helmet="true"
+			property="og:title"
+			content="Open source Observability platform | SigNoz"
+		/>
+		<meta
+			data-react-helmet="true"
+			name="description"
+			content="SigNoz is an open source observability platform to help you find issues in your deployed applications & solve them quickly. It provides a single pane of glass for metrics, traces and logs with deep filtering and aggregation to pin down specific issues very quickly."
+		/>
+		<meta
+			data-react-helmet="true"
+			property="og:description"
+			content="SigNoz is an open source observability platform to help you find issues in your deployed applications & solve them quickly. It provides a single pane of glass for metrics, traces and logs with deep filtering and aggregation to pin down specific issues very quickly."
+		/>
+		<meta
+			data-react-helmet="true"
+			property="og:image"
+			content="/images/signoz-hero-image.webp"
+		/>
+		<meta
+			data-react-helmet="true"
+			name="twitter:image"
+			content="/images/signoz-hero-image.webp"
+		/>
+		<meta
+			data-react-helmet="true"
+			name="twitter:image:alt"
+			content="Image for Open source Observability platform | SigNoz"
+		/>
+		<meta
+			data-react-helmet="true"
+			name="twitter:card"
+			content="summary_large_image"
+		/>
+		<meta data-react-helmet="true" name="docusaurus_locale" content="en" />
+		<meta data-react-helmet="true" name="docusaurus_tag" content="default" />
+		<meta name="robots" content="noindex" />
+		<link data-react-helmet="true" rel="shortcut icon" href="/favicon.ico" />
+	</head>
+	<body data-theme="default">
+		<noscript>You need to enable JavaScript to run this app.</noscript>
+		<div id="root"></div>
+
+		<script>
+			var PYLON_APP_ID = '<%- PYLON_APP_ID %>';
+			if (PYLON_APP_ID) {
+				(function () {
+					var e = window;
+					var t = document;
+					var n = function () {
+						n.e(arguments);
+					};
+					n.q = [];
+					n.e = function (e) {
+						n.q.push(e);
+					};
+					e.Pylon = n;
+					var r = function () {
+						var e = t.createElement('script');
+						e.setAttribute('type', 'text/javascript');
+						e.setAttribute('async', 'true');
+						e.setAttribute(
+							'src',
+							'https://widget.usepylon.com/widget/' + PYLON_APP_ID,
+						);
+						var n = t.getElementsByTagName('script')[0];
+						n.parentNode.insertBefore(e, n);
+					};
+					if (t.readyState === 'complete') {
+						r();
+					} else if (e.addEventListener) {
+						e.addEventListener('load', r, false);
+					}
+				})();
+			}
+		</script>
+		<script type="text/javascript">
+			window.AppcuesSettings = { enableURLDetection: true };
+		</script>
+		<script>
+			var APPCUES_APP_ID = '<%- APPCUES_APP_ID %>';
+			if (APPCUES_APP_ID) {
+				(function (d, t) {
+					var a = d.createElement(t);
+					a.async = 1;
+					a.src = '//fast.appcues.com/' + APPCUES_APP_ID + '.js';
+					var s = d.getElementsByTagName(t)[0];
+					s.parentNode.insertBefore(a, s);
+				})(document, 'script');
+			}
+		</script>
+		<link rel="stylesheet" href="/css/uPlot.min.css" />
+		<script type="module" src="./src/index.tsx"></script>
+	</body>
+</html>

frontend/jest.config.ts

@@ -17,29 +17,49 @@ const config: Config.InitialOptions = {
 		'^hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^src/hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^.*/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
+		'^constants/env$': '<rootDir>/__mocks__/env.ts',
+		'^src/constants/env$': '<rootDir>/__mocks__/env.ts',
 		'^@signozhq/icons$':
 			'<rootDir>/node_modules/@signozhq/icons/dist/index.esm.js',
 		'^react-syntax-highlighter/dist/esm/(.*)$':
 			'<rootDir>/node_modules/react-syntax-highlighter/dist/cjs/$1',
+		'^@signozhq/sonner$':
+			'<rootDir>/node_modules/@signozhq/sonner/dist/sonner.js',
+		'^@signozhq/button$':
+			'<rootDir>/node_modules/@signozhq/button/dist/button.js',
+		'^@signozhq/calendar$':
+			'<rootDir>/node_modules/@signozhq/calendar/dist/calendar.js',
+		'^@signozhq/badge': '<rootDir>/node_modules/@signozhq/badge/dist/badge.js',
+		'^@signozhq/checkbox':
+			'<rootDir>/node_modules/@signozhq/checkbox/dist/checkbox.js',
+		'^@signozhq/switch': '<rootDir>/node_modules/@signozhq/switch/dist/switch.js',
+		'^@signozhq/callout':
+			'<rootDir>/node_modules/@signozhq/callout/dist/callout.js',
+		'^@signozhq/combobox':
+			'<rootDir>/node_modules/@signozhq/combobox/dist/combobox.js',
+		'^@signozhq/input': '<rootDir>/node_modules/@signozhq/input/dist/input.js',
+		'^@signozhq/command':
+			'<rootDir>/node_modules/@signozhq/command/dist/command.js',
+		'^@signozhq/radio-group':
+			'<rootDir>/node_modules/@signozhq/radio-group/dist/radio-group.js',
 	},
-	globals: {
-		extensionsToTreatAsEsm: ['.ts'],
-		'ts-jest': {
-			useESM: true,
-			isolatedModules: true,
-			tsconfig: '<rootDir>/tsconfig.jest.json',
-		},
-	},
+	extensionsToTreatAsEsm: ['.ts'],
 	testMatch: ['<rootDir>/src/**/*?(*.)(test).(ts|js)?(x)'],
 	preset: 'ts-jest/presets/js-with-ts-esm',
 	transform: {
-		'^.+\\.(ts|tsx)?$': 'ts-jest',
+		'^.+\\.(ts|tsx)?$': [
+			'ts-jest',
+			{
+				useESM: true,
+				tsconfig: '<rootDir>/tsconfig.jest.json',
+			},
+		],
 		'^.+\\.(js|jsx)$': 'babel-jest',
 	},
 	transformIgnorePatterns: [
-		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@signozhq/design-tokens|@signozhq/table|@signozhq/calendar|@signozhq/input|@signozhq/popover|@signozhq/button|@signozhq/sonner|@signozhq/*|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn)/)',
+		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@signozhq/design-tokens|@signozhq/table|@signozhq/calendar|@signozhq/input|@signozhq/popover|@signozhq/button|@signozhq/sonner|@signozhq/*|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana)/)',
 	],
-	setupFilesAfterEnv: ['<rootDir>jest.setup.ts'],
+	setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],
 	moduleDirectories: ['node_modules', 'src'],
 	testEnvironment: 'jest-environment-jsdom',

frontend/package.json

@@ -1,293 +1,283 @@
 {
-	"name": "frontend",
-	"version": "1.0.0",
-	"description": "",
-	"main": "webpack.config.js",
-	"scripts": {
-		"i18n:generate-hash": "node ./i18-generate-hash.js",
-		"dev": "cross-env NODE_ENV=development webpack serve --progress",
-		"build": "webpack --config=webpack.config.prod.js --progress",
-		"prettify": "prettier --write .",
-		"fmt": "prettier --check .",
-		"lint": "eslint ./src",
-		"lint:fix": "eslint ./src --fix",
-		"jest": "jest",
-		"jest:coverage": "jest --coverage",
-		"jest:watch": "jest --watch",
-		"postinstall": "yarn i18n:generate-hash && (is-ci || yarn husky:configure)  && node scripts/update-registry.js",
-		"husky:configure": "cd .. && husky install frontend/.husky && cd frontend && chmod ug+x .husky/*",
-		"commitlint": "commitlint --edit $1",
-		"test": "jest",
-		"test:changedsince": "jest --changedSince=main --coverage --silent",
-		"generate:api": "orval --config ./orval.config.ts && sh scripts/post-types-generation.sh",
-		"generate:permissions-type": "node scripts/generate-permissions-type.js"
-	},
-	"engines": {
-		"node": ">=16.15.0"
-	},
-	"author": "",
-	"license": "ISC",
-	"dependencies": {
-		"@ant-design/colors": "6.0.0",
-		"@ant-design/icons": "4.8.0",
-		"@codemirror/autocomplete": "6.18.6",
-		"@codemirror/lang-javascript": "6.2.3",
-		"@dnd-kit/core": "6.1.0",
-		"@dnd-kit/modifiers": "7.0.0",
-		"@dnd-kit/sortable": "8.0.0",
-		"@dnd-kit/utilities": "3.2.2",
-		"@grafana/data": "^11.2.3",
-		"@mdx-js/loader": "2.3.0",
-		"@mdx-js/react": "2.3.0",
-		"@monaco-editor/react": "^4.3.1",
-		"@playwright/test": "1.55.1",
-		"@radix-ui/react-tabs": "1.0.4",
-		"@radix-ui/react-tooltip": "1.0.7",
-		"@sentry/react": "8.41.0",
-		"@sentry/webpack-plugin": "2.22.6",
-		"@signozhq/badge": "0.0.2",
-		"@signozhq/button": "0.0.2",
-		"@signozhq/calendar": "0.0.0",
-		"@signozhq/callout": "0.0.2",
-		"@signozhq/checkbox": "0.0.2",
-		"@signozhq/combobox": "0.0.2",
-		"@signozhq/command": "0.0.0",
-		"@signozhq/design-tokens": "2.1.1",
-		"@signozhq/icons": "0.1.0",
-		"@signozhq/input": "0.0.2",
-		"@signozhq/popover": "0.0.0",
-		"@signozhq/radio-group": "0.0.2",
-		"@signozhq/resizable": "0.0.0",
-		"@signozhq/sonner": "0.1.0",
-		"@signozhq/switch": "0.0.2",
-		"@signozhq/table": "0.3.7",
-		"@signozhq/tooltip": "0.0.2",
-		"@tanstack/react-table": "8.20.6",
-		"@tanstack/react-virtual": "3.11.2",
-		"@uiw/codemirror-theme-copilot": "4.23.11",
-		"@uiw/codemirror-theme-github": "4.24.1",
-		"@uiw/react-codemirror": "4.23.10",
-		"@uiw/react-md-editor": "3.23.5",
-		"@visx/group": "3.3.0",
-		"@visx/hierarchy": "3.12.0",
-		"@visx/shape": "3.5.0",
-		"@visx/tooltip": "3.3.0",
-		"@xstate/react": "^3.0.0",
-		"ansi-to-html": "0.7.2",
-		"antd": "5.11.0",
-		"antd-table-saveas-excel": "2.2.1",
-		"antlr4": "4.13.2",
-		"axios": "1.12.0",
-		"babel-eslint": "^10.1.0",
-		"babel-jest": "^29.6.4",
-		"babel-loader": "9.1.3",
-		"babel-plugin-named-asset-import": "^0.3.7",
-		"babel-preset-minify": "^0.5.1",
-		"babel-preset-react-app": "^10.0.1",
-		"chart.js": "3.9.1",
-		"chartjs-adapter-date-fns": "^2.0.0",
-		"chartjs-plugin-annotation": "^1.4.0",
-		"classnames": "2.3.2",
-		"color": "^4.2.1",
-		"color-alpha": "1.1.3",
-		"cross-env": "^7.0.3",
-		"crypto-js": "4.2.0",
-		"css-loader": "5.0.0",
-		"css-minimizer-webpack-plugin": "5.0.1",
-		"d3-hierarchy": "3.1.2",
-		"dayjs": "^1.10.7",
-		"dompurify": "3.2.4",
-		"dotenv": "8.2.0",
-		"event-source-polyfill": "1.0.31",
-		"eventemitter3": "5.0.1",
-		"file-loader": "6.1.1",
-		"fontfaceobserver": "2.3.0",
-		"history": "4.10.1",
-		"html-webpack-plugin": "5.5.0",
-		"http-proxy-middleware": "3.0.5",
-		"http-status-codes": "2.3.0",
-		"i18next": "^21.6.12",
-		"i18next-browser-languagedetector": "^6.1.3",
-		"i18next-http-backend": "^1.3.2",
-		"immer": "11.1.3",
-		"jest": "^27.5.1",
-		"js-base64": "^3.7.2",
-		"less": "^4.1.2",
-		"less-loader": "^10.2.0",
-		"lodash-es": "^4.17.21",
-		"lucide-react": "0.498.0",
-		"mini-css-extract-plugin": "2.4.5",
-		"motion": "12.4.13",
-		"nuqs": "2.8.8",
-		"overlayscrollbars": "^2.8.1",
-		"overlayscrollbars-react": "^0.5.6",
-		"papaparse": "5.4.1",
-		"posthog-js": "1.298.0",
-		"rc-tween-one": "3.0.6",
-		"react": "18.2.0",
-		"react-addons-update": "15.6.3",
-		"react-beautiful-dnd": "13.1.1",
-		"react-dnd": "16.0.1",
-		"react-dnd-html5-backend": "16.0.1",
-		"react-dom": "18.2.0",
-		"react-drag-listview": "2.0.0",
-		"react-error-boundary": "4.0.11",
-		"react-force-graph-2d": "^1.29.1",
-		"react-full-screen": "1.1.1",
-		"react-grid-layout": "^1.3.4",
-		"react-helmet-async": "1.3.0",
-		"react-i18next": "^11.16.1",
-		"react-lottie": "1.2.10",
-		"react-markdown": "8.0.7",
-		"react-query": "3.39.3",
-		"react-redux": "^7.2.2",
-		"react-router-dom": "^5.2.0",
-		"react-router-dom-v5-compat": "6.27.0",
-		"react-syntax-highlighter": "15.5.0",
-		"react-use": "^17.3.2",
-		"react-virtuoso": "4.0.3",
-		"redux": "^4.0.5",
-		"redux-thunk": "^2.3.0",
-		"rehype-raw": "7.0.0",
-		"rrule": "2.8.1",
-		"stream": "^0.0.2",
-		"style-loader": "1.3.0",
-		"styled-components": "^5.3.11",
-		"terser-webpack-plugin": "^5.2.5",
-		"timestamp-nano": "^1.0.0",
-		"ts-node": "^10.2.1",
-		"tsconfig-paths-webpack-plugin": "^3.5.1",
-		"typescript": "^4.0.5",
-		"uplot": "1.6.31",
-		"uuid": "^8.3.2",
-		"web-vitals": "^0.2.4",
-		"webpack": "5.94.0",
-		"webpack-dev-server": "^5.2.1",
-		"webpack-retry-chunk-load-plugin": "3.1.1",
-		"xstate": "^4.31.0",
-		"zustand": "5.0.11"
-	},
-	"browserslist": {
-		"production": [
-			">0.2%",
-			"not dead",
-			"not op_mini all"
-		],
-		"development": [
-			"last 1 chrome version",
-			"last 1 firefox version",
-			"last 1 safari version"
-		]
-	},
-	"devDependencies": {
-		"@babel/core": "^7.22.11",
-		"@babel/plugin-proposal-class-properties": "^7.18.6",
-		"@babel/plugin-syntax-jsx": "^7.12.13",
-		"@babel/preset-env": "^7.22.14",
-		"@babel/preset-react": "^7.12.13",
-		"@babel/preset-typescript": "^7.21.4",
-		"@commitlint/cli": "^16.3.0",
-		"@commitlint/config-conventional": "^16.2.4",
-		"@faker-js/faker": "9.3.0",
-		"@jest/globals": "^27.5.1",
-		"@testing-library/jest-dom": "5.16.5",
-		"@testing-library/react": "13.4.0",
-		"@testing-library/user-event": "14.4.3",
-		"@types/color": "^3.0.3",
-		"@types/compression-webpack-plugin": "^9.0.0",
-		"@types/copy-webpack-plugin": "^8.0.1",
-		"@types/crypto-js": "4.2.2",
-		"@types/dompurify": "^2.4.0",
-		"@types/event-source-polyfill": "^1.0.0",
-		"@types/fontfaceobserver": "2.1.0",
-		"@types/jest": "^27.5.1",
-		"@types/lodash-es": "^4.17.4",
-		"@types/mini-css-extract-plugin": "^2.5.1",
-		"@types/node": "^16.10.3",
-		"@types/papaparse": "5.3.7",
-		"@types/react": "18.0.26",
-		"@types/react-addons-update": "0.14.21",
-		"@types/react-beautiful-dnd": "13.1.8",
-		"@types/react-dom": "18.0.10",
-		"@types/react-grid-layout": "^1.1.2",
-		"@types/react-helmet-async": "1.0.3",
-		"@types/react-lottie": "1.2.10",
-		"@types/react-redux": "^7.1.11",
-		"@types/react-resizable": "3.0.3",
-		"@types/react-router-dom": "^5.1.6",
-		"@types/react-syntax-highlighter": "15.5.13",
-		"@types/redux-mock-store": "1.0.4",
-		"@types/styled-components": "^5.1.4",
-		"@types/uuid": "^8.3.1",
-		"@types/webpack": "^5.28.0",
-		"@types/webpack-dev-server": "^4.7.2",
-		"@typescript-eslint/eslint-plugin": "^4.33.0",
-		"@typescript-eslint/parser": "^4.33.0",
-		"autoprefixer": "10.4.19",
-		"babel-plugin-styled-components": "^1.12.0",
-		"compression-webpack-plugin": "9.0.0",
-		"copy-webpack-plugin": "^11.0.0",
-		"eslint": "^7.32.0",
-		"eslint-config-prettier": "^8.3.0",
-		"eslint-plugin-import": "^2.28.1",
-		"eslint-plugin-jest": "^26.9.0",
-		"eslint-plugin-jsx-a11y": "^6.5.1",
-		"eslint-plugin-prettier": "^4.0.0",
-		"eslint-plugin-react": "^7.24.0",
-		"eslint-plugin-react-hooks": "^4.3.0",
-		"eslint-plugin-simple-import-sort": "^7.0.0",
-		"eslint-plugin-sonarjs": "^0.12.0",
-		"husky": "^7.0.4",
-		"image-minimizer-webpack-plugin": "^4.0.0",
-		"imagemin": "^8.0.1",
-		"imagemin-svgo": "^10.0.1",
-		"is-ci": "^3.0.1",
-		"jest-styled-components": "^7.0.8",
-		"lint-staged": "^12.5.0",
-		"msw": "1.3.2",
-		"npm-run-all": "latest",
-		"orval": "7.18.0",
-		"portfinder-sync": "^0.0.2",
-		"postcss": "8.4.38",
-		"prettier": "2.2.1",
-		"prop-types": "15.8.1",
-		"raw-loader": "4.0.2",
-		"react-hooks-testing-library": "0.6.0",
-		"react-hot-loader": "^4.13.0",
-		"react-resizable": "3.0.4",
-		"redux-mock-store": "1.5.4",
-		"sass": "1.66.1",
-		"sass-loader": "13.3.2",
-		"sharp": "^0.33.4",
-		"ts-jest": "^27.1.5",
-		"ts-node": "^10.2.1",
-		"typescript-plugin-css-modules": "5.2.0",
-		"webpack-bundle-analyzer": "^4.5.0",
-		"webpack-cli": "^5.1.4"
-	},
-	"lint-staged": {
-		"*.(js|jsx|ts|tsx)": [
-			"eslint --fix",
-			"sh scripts/typecheck-staged.sh"
-		]
-	},
-	"resolutions": {
-		"@types/react": "18.0.26",
-		"@types/react-dom": "18.0.10",
-		"debug": "4.3.4",
-		"semver": "7.5.4",
-		"xml2js": "0.5.0",
-		"phin": "^3.7.1",
-		"body-parser": "1.20.3",
-		"http-proxy-middleware": "3.0.5",
-		"cross-spawn": "7.0.5",
-		"cookie": "^0.7.1",
-		"serialize-javascript": "6.0.2",
-		"prismjs": "1.30.0",
-		"got": "11.8.5",
-		"form-data": "4.0.4",
-		"brace-expansion": "^2.0.2",
-		"on-headers": "^1.1.0",
-		"tmp": "0.2.4"
-	}
-}
+  "name": "frontend",
+  "version": "1.0.0",
+  "description": "",
+  "type": "module",
+  "scripts": {
+    "i18n:generate-hash": "node ./i18-generate-hash.cjs",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "prettify": "prettier --write .",
+    "fmt": "prettier --check .",
+    "lint": "eslint ./src",
+    "lint:fix": "eslint ./src --fix",
+    "jest": "jest",
+    "jest:coverage": "jest --coverage",
+    "jest:watch": "jest --watch",
+    "postinstall": "yarn i18n:generate-hash && (is-ci || yarn husky:configure)  && node scripts/update-registry.cjs",
+    "husky:configure": "cd .. && husky install frontend/.husky && cd frontend && chmod ug+x .husky/*",
+    "commitlint": "commitlint --edit $1",
+    "test": "jest",
+    "test:changedsince": "jest --changedSince=main --coverage --silent",
+    "generate:api": "orval --config ./orval.config.ts && sh scripts/post-types-generation.sh",
+    "generate:permissions-type": "node scripts/generate-permissions-type.cjs"
+  },
+  "engines": {
+    "node": ">=22.0.0"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@ant-design/colors": "6.0.0",
+    "@ant-design/icons": "4.8.0",
+    "@codemirror/autocomplete": "6.18.6",
+    "@codemirror/lang-javascript": "6.2.3",
+    "@dnd-kit/core": "6.1.0",
+    "@dnd-kit/modifiers": "7.0.0",
+    "@dnd-kit/sortable": "8.0.0",
+    "@dnd-kit/utilities": "3.2.2",
+    "@grafana/data": "^11.2.3",
+    "@mdx-js/loader": "2.3.0",
+    "@mdx-js/react": "2.3.0",
+    "@monaco-editor/react": "^4.3.1",
+    "@playwright/test": "1.55.1",
+    "@radix-ui/react-tabs": "1.0.4",
+    "@radix-ui/react-tooltip": "1.0.7",
+    "@sentry/react": "8.41.0",
+    "@sentry/vite-plugin": "2.22.6",
+    "@signozhq/badge": "0.0.2",
+    "@signozhq/button": "0.0.2",
+    "@signozhq/calendar": "0.0.0",
+    "@signozhq/callout": "0.0.2",
+    "@signozhq/checkbox": "0.0.2",
+    "@signozhq/combobox": "0.0.2",
+    "@signozhq/command": "0.0.0",
+    "@signozhq/design-tokens": "2.1.1",
+    "@signozhq/icons": "0.1.0",
+    "@signozhq/input": "0.0.2",
+    "@signozhq/popover": "0.0.0",
+    "@signozhq/radio-group": "0.0.2",
+    "@signozhq/resizable": "0.0.0",
+    "@signozhq/sonner": "0.1.0",
+    "@signozhq/switch": "0.0.2",
+    "@signozhq/table": "0.3.7",
+    "@signozhq/tooltip": "0.0.2",
+    "@tanstack/react-table": "8.20.6",
+    "@tanstack/react-virtual": "3.11.2",
+    "@uiw/codemirror-theme-copilot": "4.23.11",
+    "@uiw/codemirror-theme-github": "4.24.1",
+    "@uiw/react-codemirror": "4.23.10",
+    "@uiw/react-md-editor": "3.23.5",
+    "@visx/group": "3.3.0",
+    "@visx/hierarchy": "3.12.0",
+    "@visx/shape": "3.5.0",
+    "@visx/tooltip": "3.3.0",
+    "@vitejs/plugin-react": "5.1.4",
+    "@xstate/react": "^3.0.0",
+    "ansi-to-html": "0.7.2",
+    "antd": "5.11.0",
+    "antd-table-saveas-excel": "2.2.1",
+    "antlr4": "4.13.2",
+    "axios": "1.12.0",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^29.6.4",
+    "babel-loader": "9.1.3",
+    "babel-plugin-named-asset-import": "^0.3.7",
+    "babel-preset-minify": "^0.5.1",
+    "babel-preset-react-app": "^10.0.1",
+    "chart.js": "3.9.1",
+    "chartjs-adapter-date-fns": "^2.0.0",
+    "chartjs-plugin-annotation": "^1.4.0",
+    "classnames": "2.3.2",
+    "color": "^4.2.1",
+    "color-alpha": "2.0.0",
+    "cross-env": "^7.0.3",
+    "crypto-js": "4.2.0",
+    "d3-hierarchy": "3.1.2",
+    "dayjs": "^1.10.7",
+    "dompurify": "3.2.4",
+    "dotenv": "8.2.0",
+    "event-source-polyfill": "1.0.31",
+    "eventemitter3": "5.0.1",
+    "fontfaceobserver": "2.3.0",
+    "history": "4.10.1",
+    "http-proxy-middleware": "3.0.5",
+    "http-status-codes": "2.3.0",
+    "i18next": "^21.6.12",
+    "i18next-browser-languagedetector": "^6.1.3",
+    "i18next-http-backend": "^1.3.2",
+    "immer": "11.1.3",
+    "jest": "30.2.0",
+    "js-base64": "^3.7.2",
+    "lodash-es": "^4.17.21",
+    "lucide-react": "0.498.0",
+    "mini-css-extract-plugin": "2.4.5",
+    "motion": "12.4.13",
+    "nuqs": "2.8.8",
+    "overlayscrollbars": "^2.8.1",
+    "overlayscrollbars-react": "^0.5.6",
+    "papaparse": "5.4.1",
+    "posthog-js": "1.298.0",
+    "rc-tween-one": "3.0.6",
+    "react": "18.2.0",
+    "react-addons-update": "15.6.3",
+    "react-beautiful-dnd": "13.1.1",
+    "react-dnd": "16.0.1",
+    "react-dnd-html5-backend": "16.0.1",
+    "react-dom": "18.2.0",
+    "react-drag-listview": "2.0.0",
+    "react-error-boundary": "4.0.11",
+    "react-force-graph-2d": "^1.29.1",
+    "react-full-screen": "1.1.1",
+    "react-grid-layout": "^1.3.4",
+    "react-helmet-async": "1.3.0",
+    "react-i18next": "^11.16.1",
+    "react-lottie": "1.2.10",
+    "react-markdown": "8.0.7",
+    "react-query": "3.39.3",
+    "react-redux": "^7.2.2",
+    "react-router-dom": "^5.2.0",
+    "react-router-dom-v5-compat": "6.27.0",
+    "react-syntax-highlighter": "15.5.0",
+    "react-use": "^17.3.2",
+    "react-virtuoso": "4.0.3",
+    "redux": "^4.0.5",
+    "redux-thunk": "^2.3.0",
+    "rehype-raw": "7.0.0",
+    "rollup-plugin-visualizer": "7.0.0",
+    "rrule": "2.8.1",
+    "stream": "^0.0.2",
+    "styled-components": "^5.3.11",
+    "timestamp-nano": "^1.0.0",
+    "ts-node": "^10.2.1",
+    "typescript": "5.9.3",
+    "uplot": "1.6.31",
+    "uuid": "^8.3.2",
+    "vite": "npm:rolldown-vite@7.3.1",
+    "vite-plugin-html": "3.2.2",
+    "web-vitals": "^0.2.4",
+    "xstate": "^4.31.0",
+    "zustand": "5.0.11"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/core": "^7.22.11",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-syntax-jsx": "^7.12.13",
+    "@babel/preset-env": "^7.22.14",
+    "@babel/preset-react": "^7.12.13",
+    "@babel/preset-typescript": "^7.21.4",
+    "@commitlint/cli": "^20.4.2",
+    "@commitlint/config-conventional": "^20.4.2",
+    "@faker-js/faker": "9.3.0",
+    "@jest/globals": "30.2.0",
+    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/react": "13.4.0",
+    "@testing-library/user-event": "14.4.3",
+    "@types/color": "^3.0.3",
+    "@types/crypto-js": "4.2.2",
+    "@types/dompurify": "^2.4.0",
+    "@types/event-source-polyfill": "^1.0.0",
+    "@types/fontfaceobserver": "2.1.0",
+    "@types/jest": "30.0.0",
+    "@types/lodash-es": "^4.17.4",
+    "@types/mini-css-extract-plugin": "^2.5.1",
+    "@types/node": "^16.10.3",
+    "@types/papaparse": "5.3.7",
+    "@types/react": "18.0.26",
+    "@types/react-addons-update": "0.14.21",
+    "@types/react-beautiful-dnd": "13.1.8",
+    "@types/react-dom": "18.0.10",
+    "@types/react-grid-layout": "^1.1.2",
+    "@types/react-helmet-async": "1.0.3",
+    "@types/react-lottie": "1.2.10",
+    "@types/react-redux": "^7.1.11",
+    "@types/react-resizable": "3.0.3",
+    "@types/react-router-dom": "^5.1.6",
+    "@types/react-syntax-highlighter": "15.5.13",
+    "@types/redux-mock-store": "1.0.4",
+    "@types/styled-components": "^5.1.4",
+    "@types/uuid": "^8.3.1",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "autoprefixer": "10.4.19",
+    "babel-plugin-styled-components": "^1.12.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jest": "^29.15.0",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-simple-import-sort": "^7.0.0",
+    "eslint-plugin-sonarjs": "^0.12.0",
+    "husky": "^7.0.4",
+    "imagemin": "^8.0.1",
+    "imagemin-svgo": "^10.0.1",
+    "is-ci": "^3.0.1",
+    "jest-environment-jsdom": "29.7.0",
+    "jest-environment-node": "29.7.0",
+    "jest-styled-components": "^7.2.0",
+    "lint-staged": "^12.5.0",
+    "msw": "1.3.2",
+    "npm-run-all": "latest",
+    "orval": "7.18.0",
+    "portfinder-sync": "^0.0.2",
+    "postcss": "8.5.6",
+    "prettier": "2.2.1",
+    "prop-types": "15.8.1",
+    "react-hooks-testing-library": "0.6.0",
+    "react-resizable": "3.0.4",
+    "redux-mock-store": "1.5.4",
+    "sass": "1.97.3",
+    "sharp": "0.34.5",
+    "svgo": "4.0.0",
+    "ts-api-utils": "2.4.0",
+    "ts-jest": "29.4.6",
+    "ts-node": "^10.2.1",
+    "typescript-plugin-css-modules": "5.2.0",
+    "vite-plugin-checker": "0.12.0",
+    "vite-plugin-compression": "0.5.1",
+    "vite-plugin-image-optimizer": "2.0.3",
+    "vite-tsconfig-paths": "6.1.1"
+  },
+  "lint-staged": {
+    "*.(js|jsx|ts|tsx)": [
+      "eslint --fix",
+      "sh scripts/typecheck-staged.sh"
+    ]
+  },
+  "resolutions": {
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.10",
+    "debug": "4.3.4",
+    "semver": "7.5.4",
+    "xml2js": "0.5.0",
+    "phin": "^3.7.1",
+    "body-parser": "1.20.3",
+    "http-proxy-middleware": "3.0.5",
+    "cross-spawn": "7.0.5",
+    "cookie": "^0.7.1",
+    "serialize-javascript": "6.0.2",
+    "prismjs": "1.30.0",
+    "got": "11.8.5",
+    "form-data": "4.0.4",
+    "brace-expansion": "^2.0.2",
+    "on-headers": "^1.1.0",
+    "tmp": "0.2.4",
+    "vite": "npm:rolldown-vite@7.3.1"
+  }
+}

frontend/scripts/update-registry.cjs

@@ -27,7 +27,7 @@ const signozPackages = Object.keys(allDeps).filter((dep) =>
 const fileContent = `// -------------------------------------------------------------------------
 // AUTO-GENERATED FILE
 // -------------------------------------------------------------------------
-// This file is generated by scripts/update-registry.js automatically
+// This file is generated by scripts/update-registry.cjs automatically
 // whenever you run 'yarn install' or 'npm install'.
 //
 // It forces VS Code to index these specific packages to fix auto-import

frontend/src/AppRoutes/index.tsx

@@ -218,9 +218,9 @@ function App(): JSX.Element {
 			pathname === ROUTES.ONBOARDING ||
 			pathname.startsWith('/public/dashboard/')
 		) {
-			window.Pylon('hideChatBubble');
+			window.Pylon?.('hideChatBubble');
 		} else {
-			window.Pylon('showChatBubble');
+			window.Pylon?.('showChatBubble');
 		}
 	}, [pathname]);
 

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

@@ -29,10 +29,6 @@ import type {
 	UpdateAuthDomainPathParameters,
 } from '../sigNoz.schemas';
 
-type AwaitedInput<T> = PromiseLike<T> | T;
-
-type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
-
 /**
  * This endpoint lists all auth domains
  * @summary List all auth domains

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

@@ -26,10 +26,6 @@ import type {
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';
 
-type AwaitedInput<T> = PromiseLike<T> | T;
-
-type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
-
 /**
  * Checks if the authenticated user has permissions for given transactions
  * @summary Check permissions

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

@@ -35,10 +35,6 @@ import type {
 	UpdatePublicDashboardPathParameters,
 } from '../sigNoz.schemas';
 
-type AwaitedInput<T> = PromiseLike<T> | T;
-
-type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
-
 /**
  * This endpoint deletes the public sharing config and disables the public sharing of a dashboard
  * @summary Delete public dashboard

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

@@ -18,10 +18,6 @@ import type { ErrorType } from '../../../generatedAPIInstance';
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { GetFeatures200, RenderErrorResponseDTO } from '../sigNoz.schemas';
 
-type AwaitedInput<T> = PromiseLike<T> | T;
-
-type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
-
 /**
  * This endpoint returns the supported features and their details
  * @summary Get features

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

@@ -24,10 +24,6 @@ import type {
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';
 
-type AwaitedInput<T> = PromiseLike<T> | T;
-
-type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
-
 /**
  * This endpoint returns field keys
  * @summary Get field keys

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

@@ -37,10 +37,6 @@ import type {
 	UpdateIngestionKeyPathParameters,
 } from '../sigNoz.schemas';
 
-type AwaitedInput<T> = PromiseLike<T> | T;
-
-type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
-
 /**
  * This endpoint returns the ingestion keys for a workspace
  * @summary Get ingestion keys for workspace

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

@@ -21,10 +21,6 @@ import type {
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';
 
-type AwaitedInput<T> = PromiseLike<T> | T;
-
-type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
-
 /**
  * This endpoint returns global config
  * @summary Get global config

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

@@ -25,10 +25,6 @@ import type {
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';
 
-type AwaitedInput<T> = PromiseLike<T> | T;
-
-type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
-
 /**
  * This endpoints promotes and indexes paths
  * @summary Promote and index paths

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

@@ -42,10 +42,6 @@ import type {
 	UpdateMetricMetadataPathParameters,
 } from '../sigNoz.schemas';
 
-type AwaitedInput<T> = PromiseLike<T> | T;
-
-type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
-
 /**
  * This endpoint returns a list of distinct metric names within the specified time range
  * @summary List metric names

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

@@ -25,10 +25,6 @@ import type {
 	TypesOrganizationDTO,
 } from '../sigNoz.schemas';
 
-type AwaitedInput<T> = PromiseLike<T> | T;
-
-type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
-
 /**
  * This endpoint returns the organization I belong to
  * @summary Get my organization

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

@@ -32,10 +32,6 @@ import type {
 	UpdateUserPreferencePathParameters,
 } from '../sigNoz.schemas';
 
-type AwaitedInput<T> = PromiseLike<T> | T;
-
-type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
-
 /**
  * This endpoint lists all org preferences
  * @summary List org preferences

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

@@ -20,10 +20,6 @@ import type {
 	ReplaceVariables200,
 } from '../sigNoz.schemas';
 
-type AwaitedInput<T> = PromiseLike<T> | T;
-
-type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
-
 /**
  * Execute a composite query over a time range. Supports builder queries (traces, logs, metrics), formulas, trace operators, PromQL, and ClickHouse SQL.
  * @summary Query range

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

@@ -35,10 +35,6 @@ import type {
 	RoletypesPostableRoleDTO,
 } from '../sigNoz.schemas';
 
-type AwaitedInput<T> = PromiseLike<T> | T;
-
-type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
-
 /**
  * This endpoint lists all roles
  * @summary List roles

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

@@ -41,10 +41,6 @@ import type {
 	UpdateServiceAccountStatusPathParameters,
 } from '../sigNoz.schemas';
 
-type AwaitedInput<T> = PromiseLike<T> | T;
-
-type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
-
 /**
  * This endpoint lists the service accounts for an organisation
  * @summary List service accounts

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

@@ -33,10 +33,6 @@ import type {
 	RotateSession200,
 } from '../sigNoz.schemas';
 
-type AwaitedInput<T> = PromiseLike<T> | T;
-
-type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
-
 /**
  * This endpoint creates a session for a user using google callback
  * @summary Create session by google callback

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

@@ -51,10 +51,6 @@ import type {
 	UpdateUserPathParameters,
 } from '../sigNoz.schemas';
 
-type AwaitedInput<T> = PromiseLike<T> | T;
-
-type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
-
 /**
  * This endpoint changes the password by id
  * @summary Change password

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

@@ -26,10 +26,6 @@ import type {
 	ZeustypesPostableProfileDTO,
 } from '../sigNoz.schemas';
 
-type AwaitedInput<T> = PromiseLike<T> | T;
-
-type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
-
 /**
  * This endpoint gets the host info from zeus.
  * @summary Get host info from Zeus.

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

@@ -1,7 +1,7 @@
 // -------------------------------------------------------------------------
 // AUTO-GENERATED FILE
 // -------------------------------------------------------------------------
-// This file is generated by scripts/update-registry.js automatically
+// This file is generated by scripts/update-registry.cjs automatically
 // whenever you run 'yarn install' or 'npm install'.
 //
 // It forces VS Code to index these specific packages to fix auto-import

frontend/src/components/DraggableTableRow/tests/__snapshots__/DraggableTableRow.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`DraggableTableRow Snapshot test should render DraggableTableRow 1`] = `
 <DocumentFragment>

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Editor renders correctly with custom props 1`] = `
 <div>

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`MessageTip custom action 1`] = `
 .c0 {

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Not Found page test should render Not Found page without errors 1`] = `
 <DocumentFragment>

frontend/src/container/AllAlertChannels/__tests__/AlertChannels.test.tsx

@@ -74,7 +74,7 @@ describe('Alert Channels Settings List page', () => {
 			});
 
 			await waitFor(() => {
-				expect(successNotification).toBeCalledWith({
+				expect(successNotification).toHaveBeenCalledWith({
 					message: 'Success',
 					description: 'channel_delete_success',
 				});

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

@@ -3,14 +3,16 @@ import { UseQueryResult } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Card, Skeleton, Typography } from 'antd';
 import cx from 'classnames';
+import { useGetGraphCustomSeries } from 'components/CeleryTask/useGetGraphCustomSeries';
 import { useNavigateToExplorer } from 'components/CeleryTask/useNavigateToExplorer';
+import Uplot from 'components/Uplot';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import {
 	getCustomFiltersForBarChart,
 	getFormattedEndPointStatusCodeChartData,
 	getStatusCodeBarChartWidgetData,
 	statusCodeWidgetInfo,
 } from 'container/ApiMonitoring/utils';
-import BarChart from 'container/DashboardContainer/visualization/charts/BarChart/BarChart';
 import { handleGraphClick } from 'container/GridCardLayout/GridCard/utils';
 import { useGraphClickToShowButton } from 'container/GridCardLayout/useGraphClickToShowButton';
 import useNavigateToExplorerPages from 'container/GridCardLayout/useNavigateToExplorerPages';
@@ -18,16 +20,15 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import { useNotifications } from 'hooks/useNotifications';
+import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
 import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
-import { LegendPosition } from 'lib/uPlotV2/components/types';
 import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
-import { useTimezone } from 'providers/Timezone';
 import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { Options } from 'uplot';
 
 import ErrorState from './ErrorState';
-import { prepareStatusCodeBarChartsConfig } from './utils';
 
 function StatusCodeBarCharts({
 	endPointStatusCodeBarChartsDataQuery,
@@ -66,6 +67,13 @@ function StatusCodeBarCharts({
 	} = endPointStatusCodeLatencyBarChartsDataQuery;
 
 	const { startTime: minTime, endTime: maxTime } = timeRange;
+	const legendScrollPositionRef = useRef<{
+		scrollTop: number;
+		scrollLeft: number;
+	}>({
+		scrollTop: 0,
+		scrollLeft: 0,
+	});
 
 	const graphRef = useRef<HTMLDivElement>(null);
 	const dimensions = useResizeObserver(graphRef);
@@ -111,7 +119,6 @@ function StatusCodeBarCharts({
 
 	const navigateToExplorer = useNavigateToExplorer();
 	const { currentQuery } = useQueryBuilder();
-	const { timezone } = useTimezone();
 
 	const navigateToExplorerPages = useNavigateToExplorerPages();
 	const { notifications } = useNotifications();
@@ -127,6 +134,12 @@ function StatusCodeBarCharts({
 		[],
 	);
 
+	const { getCustomSeries } = useGetGraphCustomSeries({
+		isDarkMode,
+		drawStyle: 'bars',
+		colorMapping,
+	});
+
 	const widget = useMemo<Widgets>(
 		() =>
 			getStatusCodeBarChartWidgetData(domainName, {
@@ -180,36 +193,49 @@ function StatusCodeBarCharts({
 		],
 	);
 
-	const config = useMemo(() => {
-		const apiResponse =
-			currentWidgetInfoIndex === 0
-				? formattedEndPointStatusCodeBarChartsDataPayload
-				: formattedEndPointStatusCodeLatencyBarChartsDataPayload;
-		return prepareStatusCodeBarChartsConfig({
-			timezone,
+	const options = useMemo(
+		() =>
+			getUPlotChartOptions({
+				apiResponse:
+					currentWidgetInfoIndex === 0
+						? formattedEndPointStatusCodeBarChartsDataPayload
+						: formattedEndPointStatusCodeLatencyBarChartsDataPayload,
+				isDarkMode,
+				dimensions,
+				yAxisUnit: statusCodeWidgetInfo[currentWidgetInfoIndex].yAxisUnit,
+				softMax: null,
+				softMin: null,
+				minTimeScale: minTime,
+				maxTimeScale: maxTime,
+				panelType: PANEL_TYPES.BAR,
+				onClickHandler: graphClickHandler,
+				customSeries: getCustomSeries,
+				onDragSelect,
+				colorMapping,
+				query: currentQuery,
+				legendScrollPosition: legendScrollPositionRef.current,
+				setLegendScrollPosition: (position: {
+					scrollTop: number;
+					scrollLeft: number;
+				}) => {
+					legendScrollPositionRef.current = position;
+				},
+			}),
+		[
+			minTime,
+			maxTime,
+			currentWidgetInfoIndex,
+			dimensions,
+			formattedEndPointStatusCodeBarChartsDataPayload,
+			formattedEndPointStatusCodeLatencyBarChartsDataPayload,
 			isDarkMode,
-			query: currentQuery,
+			graphClickHandler,
+			getCustomSeries,
 			onDragSelect,
-			onClick: graphClickHandler,
-			apiResponse,
-			minTimeScale: minTime,
-			maxTimeScale: maxTime,
-			yAxisUnit: statusCodeWidgetInfo[currentWidgetInfoIndex].yAxisUnit,
 			colorMapping,
-		});
-	}, [
-		currentQuery,
-		isDarkMode,
-		minTime,
-		maxTime,
-		graphClickHandler,
-		onDragSelect,
-		formattedEndPointStatusCodeBarChartsDataPayload,
-		formattedEndPointStatusCodeLatencyBarChartsDataPayload,
-		timezone,
-		currentWidgetInfoIndex,
-		colorMapping,
-	]);
+			currentQuery,
+		],
+	);
 
 	const renderCardContent = useCallback(
 		(query: UseQueryResult<SuccessResponse<any>, unknown>): JSX.Element => {
@@ -227,20 +253,11 @@ function StatusCodeBarCharts({
 							!query.isLoading && !query?.data?.payload?.data?.result?.length,
 					})}
 				>
-					<BarChart
-						config={config}
-						data={chartData}
-						width={dimensions.width}
-						height={dimensions.height}
-						timezone={timezone}
-						legendConfig={{
-							position: LegendPosition.BOTTOM,
-						}}
-					/>
+					<Uplot options={options as Options} data={chartData} />
 				</div>
 			);
 		},
-		[config, chartData, dimensions, timezone],
+		[options, chartData],
 	);
 
 	return (

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/utils.ts

@@ -1,83 +0,0 @@
-import { ExecStats } from 'api/v5/v5';
-import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { buildBaseConfig } from 'container/DashboardContainer/visualization/panels/utils/baseConfigBuilder';
-import { getLegend } from 'lib/dashboard/getQueryResults';
-import getLabelName from 'lib/getLabelName';
-import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
-import { DrawStyle } from 'lib/uPlotV2/config/types';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { get } from 'lodash-es';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { QueryData } from 'types/api/widgets/getQuery';
-import { v4 as uuid } from 'uuid';
-
-export const prepareStatusCodeBarChartsConfig = ({
-	timezone,
-	isDarkMode,
-	query,
-	onDragSelect,
-	onClick,
-	apiResponse,
-	minTimeScale,
-	maxTimeScale,
-	yAxisUnit,
-	colorMapping,
-}: {
-	timezone: Timezone;
-	isDarkMode: boolean;
-	query: Query;
-	onDragSelect: (startTime: number, endTime: number) => void;
-	onClick?: OnClickPluginOpts['onClick'];
-	minTimeScale?: number;
-	maxTimeScale?: number;
-	apiResponse: MetricRangePayloadProps;
-	yAxisUnit?: string;
-	colorMapping?: Record<string, string>;
-}): UPlotConfigBuilder => {
-	const stepIntervals: ExecStats['stepIntervals'] = get(
-		apiResponse,
-		'data.newResult.meta.stepIntervals',
-		{},
-	);
-	const minStepInterval = Math.min(...Object.values(stepIntervals));
-
-	const config = buildBaseConfig({
-		id: uuid(),
-		yAxisUnit: yAxisUnit,
-		apiResponse,
-		isDarkMode,
-		onDragSelect,
-		timezone,
-		onClick,
-		minTimeScale,
-		maxTimeScale,
-		stepInterval: minStepInterval,
-		panelType: PANEL_TYPES.BAR,
-	});
-
-	const seriesList: QueryData[] = apiResponse?.data?.result || [];
-	seriesList.forEach((series) => {
-		const baseLabelName = getLabelName(
-			series.metric,
-			series.queryName || '', // query
-			series.legend || '',
-		);
-
-		const label = query ? getLegend(series, query, baseLabelName) : baseLabelName;
-
-		const currentStepInterval = get(stepIntervals, series.queryName, undefined);
-
-		config.addSeries({
-			scaleKey: 'y',
-			drawStyle: DrawStyle.Bar,
-			label: label,
-			colorMapping: colorMapping ?? {},
-			isDarkMode,
-			stepInterval: currentStepInterval,
-		});
-	});
-
-	return config;
-};

frontend/src/container/ApiMonitoring/__tests__/StatusCodeBarCharts.test.tsx

@@ -21,15 +21,10 @@ interface MockQueryResult {
 }
 
 // Mocks
-jest.mock(
-	'container/DashboardContainer/visualization/charts/BarChart/BarChart',
-	() => ({
-		__esModule: true,
-		default: jest
-			.fn()
-			.mockImplementation(() => <div data-testid="bar-chart-mock" />),
-	}),
-);
+jest.mock('components/Uplot', () => ({
+	__esModule: true,
+	default: jest.fn().mockImplementation(() => <div data-testid="uplot-mock" />),
+}));
 
 jest.mock('components/CeleryTask/useGetGraphCustomSeries', () => ({
 	useGetGraphCustomSeries: (): { getCustomSeries: jest.Mock } => ({
@@ -75,24 +70,6 @@ jest.mock('hooks/useNotifications', () => ({
 	useNotifications: (): { notifications: [] } => ({ notifications: [] }),
 }));
 
-jest.mock('providers/Timezone', () => ({
-	useTimezone: (): {
-		timezone: {
-			name: string;
-			value: string;
-			offset: string;
-			searchIndex: string;
-		};
-	} => ({
-		timezone: {
-			name: 'UTC',
-			value: 'UTC',
-			offset: '+00:00',
-			searchIndex: 'UTC',
-		},
-	}),
-}));
-
 jest.mock('lib/uPlotLib/getUplotChartOptions', () => ({
 	getUPlotChartOptions: jest.fn().mockReturnValue({}),
 }));
@@ -342,7 +319,7 @@ describe('StatusCodeBarCharts', () => {
 			mockData.payload,
 			'sum',
 		);
-		expect(screen.getByTestId('bar-chart-mock')).toBeInTheDocument();
+		expect(screen.getByTestId('uplot-mock')).toBeInTheDocument();
 		expect(screen.getByText('Number of calls')).toBeInTheDocument();
 		expect(screen.getByText('Latency')).toBeInTheDocument();
 	});

frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.test.tsx

@@ -39,7 +39,7 @@ const mockProps: WidgetGraphComponentProps = {
 		columnUnits: {},
 		description: '',
 		fillSpans: false,
-		id: '17f905f6-d355-46bd-a78e-cbc87e6f58cc',
+		id: 'w-17f905f6-d355-46bd-a78e-cbc87e6f58cc',
 		mergeAllActiveQueries: false,
 		nullZeroValues: 'zero',
 		opacity: '1',

frontend/src/container/InfraMonitoringHosts/InfraMonitoring.styles.scss

@@ -190,6 +190,11 @@
 			.ant-table-cell:nth-child(n + 3) {
 				padding-right: 24px;
 			}
+			.status-header {
+				display: flex;
+				align-items: center;
+				gap: 4px;
+			}
 			.memory-usage-header {
 				display: flex;
 				align-items: center;

frontend/src/container/InfraMonitoringHosts/utils.tsx

@@ -146,7 +146,14 @@ export const getHostsListColumns = (): ColumnType<HostRowData>[] => [
 		),
 	},
 	{
-		title: 'Status',
+		title: (
+			<div className="status-header">
+				Status
+				<Tooltip title="Sent system metrics in last 10 mins">
+					<InfoCircleOutlined />
+				</Tooltip>
+			</div>
+		),
 		dataIndex: 'active',
 		key: 'active',
 		width: 100,

frontend/src/container/PanelWrapper/__tests__/__snapshots__/TablePanelWrapper.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Table panel wrappper tests table should render fine with the query response and column units 1`] = `
 .c1 {

frontend/src/container/PanelWrapper/__tests__/__snapshots__/ValuePanelWrapper.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Value panel wrappper tests should render tooltip when there are conflicting thresholds 1`] = `
 .c1 {

frontend/src/container/PipelinePage/tests/CreatePipelineButton.test.tsx

@@ -53,7 +53,7 @@ describe('PipelinePage container test', () => {
 		expect(editButton).toBeInTheDocument();
 		await userEvent.click(editButton);
 
-		expect(logEvent).toBeCalledWith('Logs: Pipelines: Entered Edit Mode', {
+		expect(logEvent).toHaveBeenCalledWith('Logs: Pipelines: Entered Edit Mode', {
 			source: 'signoz-ui',
 		});
 	});
@@ -78,8 +78,11 @@ describe('PipelinePage container test', () => {
 		expect(editButton).toBeInTheDocument();
 		await userEvent.click(editButton);
 
-		expect(logEvent).toBeCalledWith('Logs: Pipelines: Clicked Add New Pipeline', {
-			source: 'signoz-ui',
-		});
+		expect(logEvent).toHaveBeenCalledWith(
+			'Logs: Pipelines: Clicked Add New Pipeline',
+			{
+				source: 'signoz-ui',
+			},
+		);
 	});
 });

frontend/src/container/PipelinePage/tests/__snapshots__/AddNewPipeline.test.tsx.snap

@@ -1,3 +1,3 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`PipelinePage container test should render AddNewPipeline section 1`] = `<DocumentFragment />`;

frontend/src/container/PipelinePage/tests/__snapshots__/CreatePipelineButton.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`PipelinePage container test should render CreatePipelineButton section 1`] = `
 <DocumentFragment>

frontend/src/container/PipelinePage/tests/__snapshots__/DeleteAction.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`PipelinePage container test should render DeleteAction section 1`] = `
 <DocumentFragment>

frontend/src/container/PipelinePage/tests/__snapshots__/DragAction.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`PipelinePage container test should render DragAction section 1`] = `
 <DocumentFragment>

frontend/src/container/PipelinePage/tests/__snapshots__/EditAction.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`PipelinePage container test should render EditAction section 1`] = `
 <DocumentFragment>

frontend/src/container/PipelinePage/tests/__snapshots__/PipelineActions.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`PipelinePage container test should render PipelineActions section 1`] = `
 <DocumentFragment>

frontend/src/container/PipelinePage/tests/__snapshots__/PipelineExpandView.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`PipelinePage should render PipelineExpandView section 1`] = `
 <DocumentFragment>

frontend/src/container/PipelinePage/tests/__snapshots__/PipelinePageLayout.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`PipelinePage container test should render PipelinePageLayout section 1`] = `
 <DocumentFragment>

frontend/src/container/PipelinePage/tests/__snapshots__/PipelinesSearchSection.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`PipelinePage container test should render PipelinesSearchSection section 1`] = `
 <DocumentFragment>

frontend/src/container/PipelinePage/tests/__snapshots__/TableExpandIcon.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`PipelinePage container test should render TableExpandIcon section 1`] = `
 <DocumentFragment>

frontend/src/container/PipelinePage/tests/__snapshots__/TagInput.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Pipeline Page should render TagInput section 1`] = `
 <DocumentFragment>

frontend/src/container/PipelinePage/tests/__snapshots__/Tags.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`PipelinePage container test should render Tags section 1`] = `
 <DocumentFragment>

frontend/src/container/QueryBuilder/components/ToolbarActions/tests/ToolbarActions.test.tsx

@@ -51,10 +51,10 @@ describe('ToolbarActions', () => {
 		expect(queryByTestId('clickhouse-view')).not.toBeInTheDocument();
 
 		await userEvent.click(screen.getByTestId('search-view'));
-		expect(handleChangeSelectedView).toBeCalled();
+		expect(handleChangeSelectedView).toHaveBeenCalled();
 
 		await userEvent.click(screen.getByTestId('query-builder-view'));
-		expect(handleChangeSelectedView).toBeCalled();
+		expect(handleChangeSelectedView).toHaveBeenCalled();
 	});
 
 	it('renders - clickhouse view and test view switching', async () => {
@@ -78,14 +78,14 @@ describe('ToolbarActions', () => {
 		expect(clickHouseView).toBeInTheDocument();
 
 		await userEvent.click(clickHouseView as HTMLElement);
-		expect(handleChangeSelectedView).toBeCalled();
+		expect(handleChangeSelectedView).toHaveBeenCalled();
 
 		// Test that timeseries view is also present and clickable
 		const timeseriesView = queryByTestId('query-builder-view');
 		expect(timeseriesView).toBeInTheDocument();
 
 		await userEvent.click(timeseriesView as HTMLElement);
-		expect(handleChangeSelectedView).toBeCalled();
+		expect(handleChangeSelectedView).toHaveBeenCalled();
 	});
 
 	it('RightToolbarActions - render correctly with props', async () => {
@@ -99,6 +99,6 @@ describe('ToolbarActions', () => {
 		const runQueryBtn = queryByText('Run Query');
 		expect(runQueryBtn).toBeInTheDocument();
 		await userEvent.click(runQueryBtn as HTMLElement);
-		expect(onStageRunQuery).toBeCalled();
+		expect(onStageRunQuery).toHaveBeenCalled();
 	});
 });

frontend/src/container/TraceFlameGraph/__tests__/__snapshots__/TraceFlameGraph.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`loads and displays greeting 1`] = `
 <DocumentFragment>

frontend/src/pages/TracesFunnels/TracesFunnels.styles.scss

@@ -1,5 +1,5 @@
-@import './components/Header/Header.styles.scss';
-@import './components/SearchBar/SearchBar.styles.scss';
+@use 'components/Header/Header.styles.scss';
+@use 'components/SearchBar/SearchBar.styles.scss';
 
 .traces-funnels {
 	margin-top: 113px;

frontend/src/providers/Dashboard/store/__tests__/variableFetchStore.test.ts

@@ -25,7 +25,7 @@ function resetStore(): void {
 
 function mockContext(overrides: Partial<VariableFetchContext> = {}): void {
 	getVariableDependencyContextSpy.mockReturnValue({
-		doAllVariablesHaveValuesSelected: false,
+		doAllQueryVariablesHaveValuesSelected: false,
 		variableTypes: {},
 		dynamicVariableOrder: [],
 		dependencyData: null,
@@ -175,9 +175,9 @@ describe('variableFetchStore', () => {
 			expect(storeSnapshot.cycleIds.b).toBe(1);
 		});
 
-		it('should set dynamic variables to waiting when not all variables have values', () => {
+		it('should set dynamic variables to waiting when not all query variables have values', () => {
 			mockContext({
-				doAllVariablesHaveValuesSelected: false,
+				doAllQueryVariablesHaveValuesSelected: false,
 				dependencyData: buildDependencyData({ order: [] }),
 				variableTypes: { dyn1: 'DYNAMIC' },
 				dynamicVariableOrder: ['dyn1'],
@@ -190,9 +190,9 @@ describe('variableFetchStore', () => {
 			expect(storeSnapshot.states.dyn1).toBe('waiting');
 		});
 
-		it('should set dynamic variables to loading when all variables have values', () => {
+		it('should set dynamic variables to loading when all query variables have values', () => {
 			mockContext({
-				doAllVariablesHaveValuesSelected: true,
+				doAllQueryVariablesHaveValuesSelected: true,
 				dependencyData: buildDependencyData({ order: [] }),
 				variableTypes: { dyn1: 'DYNAMIC' },
 				dynamicVariableOrder: ['dyn1'],
@@ -523,5 +523,77 @@ describe('variableFetchStore', () => {
 
 			expect(variableFetchStore.getSnapshot().states.b).toBe('revalidating');
 		});
+
+		it('should enqueue dynamic variables immediately when all query variables are settled', () => {
+			mockContext({
+				dependencyData: buildDependencyData({
+					transitiveDescendants: { customVar: [] },
+					parentDependencyGraph: {},
+				}),
+				variableTypes: { q1: 'QUERY', customVar: 'CUSTOM', dyn1: 'DYNAMIC' },
+				dynamicVariableOrder: ['dyn1'],
+			});
+
+			variableFetchStore.update((d) => {
+				d.states.q1 = 'idle';
+				d.states.customVar = 'idle';
+				d.states.dyn1 = 'idle';
+			});
+
+			enqueueDescendantsOfVariable('customVar');
+
+			const snapshot = variableFetchStore.getSnapshot();
+			expect(snapshot.states.dyn1).toBe('loading');
+			expect(snapshot.cycleIds.dyn1).toBe(1);
+		});
+
+		it('should set dynamic variables to waiting when query variables are not yet settled', () => {
+			// a is a query variable still loading; changing customVar should queue dyn1 as waiting
+			mockContext({
+				dependencyData: buildDependencyData({
+					transitiveDescendants: { customVar: [] },
+					parentDependencyGraph: {},
+				}),
+				variableTypes: { a: 'QUERY', customVar: 'CUSTOM', dyn1: 'DYNAMIC' },
+				dynamicVariableOrder: ['dyn1'],
+			});
+
+			variableFetchStore.update((d) => {
+				d.states.a = 'loading';
+				d.states.customVar = 'idle';
+				d.states.dyn1 = 'idle';
+			});
+
+			enqueueDescendantsOfVariable('customVar');
+
+			expect(variableFetchStore.getSnapshot().states.dyn1).toBe('waiting');
+		});
+
+		it('should set dynamic variables to waiting when a query descendant is now loading', () => {
+			// a -> b (QUERY), dyn1 (DYNAMIC). When a changes, b starts loading,
+			// so dyn1 should wait until b settles.
+			mockContext({
+				dependencyData: buildDependencyData({
+					transitiveDescendants: { a: ['b'] },
+					parentDependencyGraph: { b: ['a'] },
+				}),
+				variableTypes: { a: 'QUERY', b: 'QUERY', dyn1: 'DYNAMIC' },
+				dynamicVariableOrder: ['dyn1'],
+			});
+
+			variableFetchStore.update((d) => {
+				d.states.a = 'idle';
+				d.states.b = 'idle';
+				d.states.dyn1 = 'idle';
+			});
+
+			enqueueDescendantsOfVariable('a');
+
+			const snapshot = variableFetchStore.getSnapshot();
+			// b's parent (a) is idle → b starts loading
+			expect(snapshot.states.b).toBe('loading');
+			// dyn1 must wait because b is now loading (not settled)
+			expect(snapshot.states.dyn1).toBe('waiting');
+		});
 	});
 });

frontend/src/providers/Dashboard/store/dashboardVariables/__tests__/dashboardVariablesStore.test.ts

@@ -134,7 +134,7 @@ describe('dashboardVariablesStore', () => {
 			expect(dependencyData).not.toBeNull();
 		});
 
-		it('should report doAllVariablesHaveValuesSelected as true when all variables have selectedValue', () => {
+		it('should report doAllQueryVariablesHaveValuesSelected as true when all query variables have values', () => {
 			setDashboardVariablesStore({
 				dashboardId: 'dash-1',
 				variables: {
@@ -146,18 +146,46 @@ describe('dashboardVariablesStore', () => {
 					}),
 					region: createVariable({
 						name: 'region',
-						type: 'CUSTOM',
+						type: 'QUERY',
 						order: 1,
 						selectedValue: 'us-east',
 					}),
 				},
 			});
 
-			const { doAllVariablesHaveValuesSelected } = getVariableDependencyContext();
-			expect(doAllVariablesHaveValuesSelected).toBe(true);
+			const {
+				doAllQueryVariablesHaveValuesSelected,
+			} = getVariableDependencyContext();
+			expect(doAllQueryVariablesHaveValuesSelected).toBe(true);
 		});
 
-		it('should report doAllVariablesHaveValuesSelected as false when some variables lack selectedValue', () => {
+		it('should report doAllQueryVariablesHaveValuesSelected as false when a query variable lacks a selectedValue', () => {
+			setDashboardVariablesStore({
+				dashboardId: 'dash-1',
+				variables: {
+					env: createVariable({
+						name: 'env',
+						type: 'QUERY',
+						order: 0,
+						selectedValue: 'prod',
+					}),
+					region: createVariable({
+						name: 'region',
+						type: 'QUERY',
+						order: 1,
+						selectedValue: undefined,
+					}),
+				},
+			});
+
+			const {
+				doAllQueryVariablesHaveValuesSelected,
+			} = getVariableDependencyContext();
+			expect(doAllQueryVariablesHaveValuesSelected).toBe(false);
+		});
+
+		it('should ignore non-QUERY variables when computing doAllQueryVariablesHaveValuesSelected', () => {
+			// env (QUERY) has a value; region (CUSTOM) and dyn1 (DYNAMIC) do not — they are ignored
 			setDashboardVariablesStore({
 				dashboardId: 'dash-1',
 				variables: {
@@ -173,62 +201,22 @@ describe('dashboardVariablesStore', () => {
 						order: 1,
 						selectedValue: undefined,
 					}),
-				},
-			});
-
-			const { doAllVariablesHaveValuesSelected } = getVariableDependencyContext();
-			expect(doAllVariablesHaveValuesSelected).toBe(false);
-		});
-
-		it('should treat DYNAMIC variable with allSelected=true and selectedValue=null as having a value', () => {
-			setDashboardVariablesStore({
-				dashboardId: 'dash-1',
-				variables: {
 					dyn1: createVariable({
 						name: 'dyn1',
 						type: 'DYNAMIC',
-						order: 0,
-						selectedValue: null as any,
-						allSelected: true,
-					}),
-					env: createVariable({
-						name: 'env',
-						type: 'QUERY',
-						order: 1,
-						selectedValue: 'prod',
+						order: 2,
+						selectedValue: '',
 					}),
 				},
 			});
 
-			const { doAllVariablesHaveValuesSelected } = getVariableDependencyContext();
-			expect(doAllVariablesHaveValuesSelected).toBe(true);
+			const {
+				doAllQueryVariablesHaveValuesSelected,
+			} = getVariableDependencyContext();
+			expect(doAllQueryVariablesHaveValuesSelected).toBe(true);
 		});
 
-		it('should treat DYNAMIC variable with allSelected=true and selectedValue=undefined as having a value', () => {
-			setDashboardVariablesStore({
-				dashboardId: 'dash-1',
-				variables: {
-					dyn1: createVariable({
-						name: 'dyn1',
-						type: 'DYNAMIC',
-						order: 0,
-						selectedValue: undefined,
-						allSelected: true,
-					}),
-					env: createVariable({
-						name: 'env',
-						type: 'QUERY',
-						order: 1,
-						selectedValue: 'prod',
-					}),
-				},
-			});
-
-			const { doAllVariablesHaveValuesSelected } = getVariableDependencyContext();
-			expect(doAllVariablesHaveValuesSelected).toBe(true);
-		});
-
-		it('should treat DYNAMIC variable with allSelected=true and empty string selectedValue as having a value', () => {
+		it('should return true for doAllQueryVariablesHaveValuesSelected when there are no query variables', () => {
 			setDashboardVariablesStore({
 				dashboardId: 'dash-1',
 				variables: {
@@ -237,61 +225,72 @@ describe('dashboardVariablesStore', () => {
 						type: 'DYNAMIC',
 						order: 0,
 						selectedValue: '',
-						allSelected: true,
-					}),
-					env: createVariable({
-						name: 'env',
-						type: 'QUERY',
-						order: 1,
-						selectedValue: 'prod',
 					}),
 				},
 			});
 
-			const { doAllVariablesHaveValuesSelected } = getVariableDependencyContext();
-			expect(doAllVariablesHaveValuesSelected).toBe(true);
+			const {
+				doAllQueryVariablesHaveValuesSelected,
+			} = getVariableDependencyContext();
+			expect(doAllQueryVariablesHaveValuesSelected).toBe(true);
 		});
 
-		it('should treat DYNAMIC variable with allSelected=true and empty array selectedValue as having a value', () => {
+		// Any non-nil, non-empty-array selectedValue is treated as selected
+		it.each([
+			{ label: 'numeric 0', selectedValue: 0 as number },
+			{ label: 'boolean false', selectedValue: false as boolean },
+			// ideally not possible but till we have concrete schema, we should not block dynamic variables
+			{ label: 'empty string', selectedValue: '' },
+			{
+				label: 'non-empty array',
+				selectedValue: ['a', 'b'] as (string | number | boolean)[],
+			},
+		])('should return true when selectedValue is $label', ({ selectedValue }) => {
 			setDashboardVariablesStore({
 				dashboardId: 'dash-1',
 				variables: {
-					dyn1: createVariable({
-						name: 'dyn1',
-						type: 'DYNAMIC',
-						order: 0,
-						selectedValue: [] as any,
-						allSelected: true,
-					}),
 					env: createVariable({
 						name: 'env',
 						type: 'QUERY',
-						order: 1,
-						selectedValue: 'prod',
-					}),
-				},
-			});
-
-			const { doAllVariablesHaveValuesSelected } = getVariableDependencyContext();
-			expect(doAllVariablesHaveValuesSelected).toBe(true);
-		});
-
-		it('should report false when a DYNAMIC variable has empty selectedValue and allSelected is not true', () => {
-			setDashboardVariablesStore({
-				dashboardId: 'dash-1',
-				variables: {
-					dyn1: createVariable({
-						name: 'dyn1',
-						type: 'DYNAMIC',
 						order: 0,
-						selectedValue: '',
-						allSelected: false,
+						selectedValue,
 					}),
 				},
 			});
 
-			const { doAllVariablesHaveValuesSelected } = getVariableDependencyContext();
-			expect(doAllVariablesHaveValuesSelected).toBe(false);
+			const {
+				doAllQueryVariablesHaveValuesSelected,
+			} = getVariableDependencyContext();
+			expect(doAllQueryVariablesHaveValuesSelected).toBe(true);
 		});
+
+		// null/undefined (tested above) and empty array are treated as not selected
+		it.each([
+			{
+				label: 'null',
+				selectedValue: null as IDashboardVariable['selectedValue'],
+			},
+			{ label: 'empty array', selectedValue: [] as (string | number | boolean)[] },
+		])(
+			'should return false when selectedValue is $label',
+			({ selectedValue }) => {
+				setDashboardVariablesStore({
+					dashboardId: 'dash-1',
+					variables: {
+						env: createVariable({
+							name: 'env',
+							type: 'QUERY',
+							order: 0,
+							selectedValue,
+						}),
+					},
+				});
+
+				const {
+					doAllQueryVariablesHaveValuesSelected,
+				} = getVariableDependencyContext();
+				expect(doAllQueryVariablesHaveValuesSelected).toBe(false);
+			},
+		);
 	});
 });

frontend/src/providers/Dashboard/store/dashboardVariables/dashboardVariablesStore.ts

@@ -1,4 +1,4 @@
-import { isEmpty, isUndefined } from 'lodash-es';
+import { isNil } from 'lodash-es';
 
 import createStore from '../store';
 import { VariableFetchContext } from '../variableFetchStore';
@@ -68,28 +68,28 @@ export function updateDashboardVariablesStore({
  */
 export function getVariableDependencyContext(): VariableFetchContext {
 	const state = dashboardVariablesStore.getSnapshot();
+	// Dynamic variables should only wait on query variables having values,
+	// not on CUSTOM, TEXTBOX, or other types.
+	const doAllQueryVariablesHaveValuesSelected = Object.values(
+		state.variables,
+	).every((variable) => {
+		if (variable.type !== 'QUERY') {
+			return true;
+		}
 
-	// If every variable already has a selectedValue (e.g. persisted from
-	// localStorage/URL), dynamic variables can start in parallel.
-	// Otherwise they wait for query vars to settle first.
-	const doAllVariablesHaveValuesSelected = Object.values(state.variables).every(
-		(variable) => {
-			if (
-				variable.type === 'DYNAMIC' &&
-				(variable.selectedValue === null || isEmpty(variable.selectedValue)) &&
-				variable.allSelected === true
-			) {
-				return true;
-			}
+		if (isNil(variable.selectedValue)) {
+			return false;
+		}
 
-			return (
-				!isUndefined(variable.selectedValue) && !isEmpty(variable.selectedValue)
-			);
-		},
-	);
+		if (Array.isArray(variable.selectedValue)) {
+			return variable.selectedValue.length > 0;
+		}
+
+		return true;
+	});
 
 	return {
-		doAllVariablesHaveValuesSelected,
+		doAllQueryVariablesHaveValuesSelected,
 		variableTypes: state.variableTypes,
 		dynamicVariableOrder: state.dynamicVariableOrder,
 		dependencyData: state.dependencyData,

frontend/src/providers/Dashboard/store/variableFetchStore.ts

@@ -36,7 +36,7 @@ export type VariableFetchContext = Pick<
 	IDashboardVariablesStoreState,
 	'variableTypes' | 'dynamicVariableOrder' | 'dependencyData'
 > & {
-	doAllVariablesHaveValuesSelected: boolean;
+	doAllQueryVariablesHaveValuesSelected: boolean;
 };
 
 const initialState: IVariableFetchStoreState = {
@@ -88,7 +88,7 @@ export function initializeVariableFetchStore(variableNames: string[]): void {
  */
 export function enqueueFetchOfAllVariables(): void {
 	const {
-		doAllVariablesHaveValuesSelected,
+		doAllQueryVariablesHaveValuesSelected,
 		dependencyData,
 		variableTypes,
 		dynamicVariableOrder,
@@ -116,7 +116,7 @@ export function enqueueFetchOfAllVariables(): void {
 		// otherwise wait for query variables to settle first
 		dynamicVariableOrder.forEach((name) => {
 			draft.cycleIds[name] = (draft.cycleIds[name] || 0) + 1;
-			draft.states[name] = doAllVariablesHaveValuesSelected
+			draft.states[name] = doAllQueryVariablesHaveValuesSelected
 				? resolveFetchState(draft, name)
 				: 'waiting';
 		});
@@ -208,7 +208,11 @@ export function onVariableFetchFailure(name: string): void {
  * ensures parents are set before children within a single update).
  */
 export function enqueueDescendantsOfVariable(name: string): void {
-	const { dependencyData, variableTypes } = getVariableDependencyContext();
+	const {
+		dependencyData,
+		variableTypes,
+		dynamicVariableOrder,
+	} = getVariableDependencyContext();
 	if (!dependencyData) {
 		return;
 	}
@@ -230,5 +234,18 @@ export function enqueueDescendantsOfVariable(name: string): void {
 				? resolveFetchState(draft, desc)
 				: 'waiting';
 		});
+
+		// Dynamic variables implicitly depend on all query variable values.
+		// If all query variables are currently settled, start them immediately;
+		// otherwise they wait until query vars finish (unlocked via onVariableFetchComplete).
+		dynamicVariableOrder.forEach((dynName) => {
+			draft.cycleIds[dynName] = (draft.cycleIds[dynName] || 0) + 1;
+			draft.states[dynName] = areAllQueryVariablesSettled(
+				draft.states,
+				variableTypes,
+			)
+				? resolveFetchState(draft, dynName)
+				: 'waiting';
+		});
 	});
 }

frontend/src/styles.scss

@@ -1,10 +1,10 @@
+@use './periscope.scss';
+
 @import '@signozhq/design-tokens/dist/style.css';
 @import 'overlayscrollbars/overlayscrollbars.css';
 
 @import '@signozhq/design-tokens/dist/themes/signoz-tokens.css';
 
-@import './periscope.scss';
-
 /* Import fonts from CDN */
 @import url('https://fonts.googleapis.com/css2?family=Work+Sans&wght@500&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Space+Mono&display=swap');

frontend/src/utils/__tests__/__snapshots__/spanToTree.test.ts.snap

@@ -1,39 +1,39 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`utils/spanToTree should return a single tree on valid trace data 1`] = `
-Object {
-  "missingSpanTree": Array [],
-  "spanTree": Array [
-    Object {
-      "childReferences": Array [
-        Object {
+{
+  "missingSpanTree": [],
+  "spanTree": [
+    {
+      "childReferences": [
+        {
           "RefType": "CHILD_OF",
           "SpanId": "",
           "TraceId": "0000000000000000span_1",
         },
       ],
-      "children": Array [
-        Object {
-          "childReferences": Array [
-            Object {
+      "children": [
+        {
+          "childReferences": [
+            {
               "RefType": "CHILD_OF",
               "SpanId": "span_1",
               "TraceId": "0000000000000000span_1",
             },
           ],
-          "children": Array [
-            Object {
-              "childReferences": Array [
-                Object {
+          "children": [
+            {
+              "childReferences": [
+                {
                   "RefType": "CHILD_OF",
                   "SpanId": "span_2",
                   "TraceId": "0000000000000000span_1",
                 },
               ],
-              "children": Array [],
-              "event": Array [
-                Object {
-                  "attributeMap": Object {
+              "children": [],
+              "event": [
+                {
+                  "attributeMap": {
                     "event": "HTTP request received S3",
                     "level": "info",
                     "method": "GET",
@@ -46,15 +46,15 @@ Object {
               "id": "span_3",
               "isProcessed": true,
               "name": "HTTP GET SPAN 3",
-              "nonChildReferences": Array [],
+              "nonChildReferences": [],
               "serviceColour": "",
               "serviceName": "frontend",
               "spanKind": "Lorem Ipsum2",
               "startTime": 1657275433246,
               "statusCodeString": "Unset2",
               "statusMessage": "Server2",
-              "tags": Array [
-                Object {
+              "tags": [
+                {
                   "key": "host.name.span3",
                   "value": "span_3",
                 },
@@ -63,9 +63,9 @@ Object {
               "value": 683273000,
             },
           ],
-          "event": Array [
-            Object {
-              "attributeMap": Object {
+          "event": [
+            {
+              "attributeMap": {
                 "event": "HTTP request received S2",
                 "level": "info",
                 "method": "GET",
@@ -78,15 +78,15 @@ Object {
           "id": "span_2",
           "isProcessed": true,
           "name": "HTTP GET SPAN 2",
-          "nonChildReferences": Array [],
+          "nonChildReferences": [],
           "serviceColour": "",
           "serviceName": "frontend",
           "spanKind": "Lorem Ipsum1",
           "startTime": 1657275433246,
           "statusCodeString": "Unset1",
           "statusMessage": "Server1",
-          "tags": Array [
-            Object {
+          "tags": [
+            {
               "key": "host.name.span2",
               "value": "span_2",
             },
@@ -95,9 +95,9 @@ Object {
           "value": 683273000,
         },
       ],
-      "event": Array [
-        Object {
-          "attributeMap": Object {
+      "event": [
+        {
+          "attributeMap": {
             "event": "HTTP request received S1",
             "level": "info",
             "method": "GET",
@@ -109,15 +109,15 @@ Object {
       "hasError": false,
       "id": "span_1",
       "name": "HTTP GET SPAN 1",
-      "nonChildReferences": Array [],
+      "nonChildReferences": [],
       "serviceColour": "",
       "serviceName": "frontend",
       "spanKind": "Lorem Ipsum",
       "startTime": 1657275433246,
       "statusCodeString": "Unset",
       "statusMessage": "Server",
-      "tags": Array [
-        Object {
+      "tags": [
+        {
           "key": "host.name.span1",
           "value": "span_1",
         },
@@ -130,22 +130,22 @@ Object {
 `;
 
 exports[`utils/spanToTree should return a single tree on valid trace data 2`] = `
-Object {
-  "missingSpanTree": Array [
-    Object {
-      "children": Array [
-        Object {
-          "childReferences": Array [
-            Object {
+{
+  "missingSpanTree": [
+    {
+      "children": [
+        {
+          "childReferences": [
+            {
               "RefType": "CHILD_OF",
               "SpanId": "span_2",
               "TraceId": "0000000000000000span_1",
             },
           ],
-          "children": Array [],
-          "event": Array [
-            Object {
-              "attributeMap": Object {
+          "children": [],
+          "event": [
+            {
+              "attributeMap": {
                 "event": "HTTP request received S3",
                 "level": "info",
                 "method": "GET",
@@ -158,15 +158,15 @@ Object {
           "id": "span_3",
           "isProcessed": true,
           "name": "HTTP GET SPAN 3",
-          "nonChildReferences": Array [],
+          "nonChildReferences": [],
           "serviceColour": "",
           "serviceName": "frontend",
           "spanKind": "Lorem Ipsum2",
           "startTime": 1657275433246,
           "statusCodeString": "Unset2",
           "statusMessage": "Server2",
-          "tags": Array [
-            Object {
+          "tags": [
+            {
               "key": "host.name.span3",
               "value": "span_3",
             },
@@ -184,24 +184,24 @@ Object {
       "startTime": null,
       "statusCodeString": "",
       "statusMessage": "",
-      "tags": Array [],
+      "tags": [],
       "time": null,
       "value": null,
     },
   ],
-  "spanTree": Array [
-    Object {
-      "childReferences": Array [
-        Object {
+  "spanTree": [
+    {
+      "childReferences": [
+        {
           "RefType": "CHILD_OF",
           "SpanId": "",
           "TraceId": "0000000000000000span_1",
         },
       ],
-      "children": Array [],
-      "event": Array [
-        Object {
-          "attributeMap": Object {
+      "children": [],
+      "event": [
+        {
+          "attributeMap": {
             "event": "HTTP request received S1",
             "level": "info",
             "method": "GET",
@@ -213,15 +213,15 @@ Object {
       "hasError": false,
       "id": "span_1",
       "name": "HTTP GET SPAN 1",
-      "nonChildReferences": Array [],
+      "nonChildReferences": [],
       "serviceColour": "",
       "serviceName": "frontend",
       "spanKind": "Lorem Ipsum",
       "startTime": 1657275433246,
       "statusCodeString": "Unset",
       "statusMessage": "Server",
-      "tags": Array [
-        Object {
+      "tags": [
+        {
           "key": "host.name.span1",
           "value": "span_1",
         },

frontend/src/utils/__tests__/app.test.ts

@@ -1,34 +1,26 @@
+import { getLocation } from 'utils/getLocation';
+
 import { buildAbsolutePath } from '../app';
 
+jest.mock('utils/getLocation');
+
 const BASE_PATH = '/some-base-path';
 
-describe('buildAbsolutePath', () => {
-	const originalLocation = window.location;
-
-	afterEach(() => {
-		Object.defineProperty(window, 'location', {
-			writable: true,
-			value: originalLocation,
-		});
+const mockLocation = (pathname: string): void => {
+	(getLocation as jest.Mock).mockReturnValue({
+		pathname,
+		href: `http://localhost:8080${pathname}`,
+		origin: 'http://localhost:8080',
+		protocol: 'http:',
+		host: 'localhost',
+		hostname: 'localhost',
+		port: '',
+		search: '',
+		hash: '',
 	});
+};
 
-	const mockLocation = (pathname: string): void => {
-		Object.defineProperty(window, 'location', {
-			writable: true,
-			value: {
-				pathname,
-				href: `http://localhost:8080${pathname}`,
-				origin: 'http://localhost:8080',
-				protocol: 'http:',
-				host: 'localhost',
-				hostname: 'localhost',
-				port: '',
-				search: '',
-				hash: '',
-			},
-		});
-	};
-
+describe('buildAbsolutePath', () => {
 	describe('when base path ends with a forward slash', () => {
 		beforeEach(() => {
 			mockLocation(`${BASE_PATH}/`);

frontend/src/utils/app.ts

@@ -2,6 +2,7 @@ import getLocalStorage from 'api/browser/localstorage/get';
 import { FeatureKeys } from 'constants/features';
 import { SKIP_ONBOARDING } from 'constants/onboarding';
 import { get } from 'lodash-es';
+import { getLocation } from 'utils/getLocation';
 
 export const isOnboardingSkipped = (): boolean =>
 	getLocalStorage(SKIP_ONBOARDING) === 'true';
@@ -57,7 +58,7 @@ export function buildAbsolutePath({
 	relativePath: string;
 	urlQueryString?: string;
 }): string {
-	const { pathname } = window.location;
+	const { pathname } = getLocation();
 	// ensure base path always ends with a forward slash
 	const basePath = pathname.endsWith('/') ? pathname : `${pathname}/`;
 

frontend/src/utils/getLocation.ts

@@ -0,0 +1 @@
+export const getLocation = (): Location => window.location;

frontend/src/vite-env.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="vite/client" />
+
+declare module '*.md' {
+	const content: string;
+	export default content;
+}
+
+declare module '*.md?raw' {
+	const content: string;
+	export default content;
+}
+
+interface ImportMetaEnv {
+	readonly VITE_FRONTEND_API_ENDPOINT: string;
+	readonly VITE_WEBSOCKET_API_ENDPOINT: string;
+	readonly VITE_PYLON_APP_ID: string;
+	readonly VITE_PYLON_IDENTITY_SECRET: string;
+	readonly VITE_APPCUES_APP_ID: string;
+	readonly VITE_POSTHOG_KEY: string;
+	readonly VITE_SENTRY_AUTH_TOKEN: string;
+	readonly VITE_SENTRY_ORG: string;
+	readonly VITE_SENTRY_PROJECT_ID: string;
+	readonly VITE_SENTRY_DSN: string;
+	readonly VITE_TUNNEL_URL: string;
+	readonly VITE_TUNNEL_DOMAIN: string;
+	readonly VITE_DOCS_BASE_URL: string;
+}
+
+interface ImportMeta {
+	readonly env: ImportMetaEnv;
+}

frontend/tsconfig.jest.json

@@ -4,4 +4,4 @@
 		"target": "es6",
 		"noEmit": false
 	}
-}
+}

frontend/tsconfig.json

@@ -5,7 +5,7 @@
 		"noImplicitAny": true,
 		"noImplicitReturns": true,
 		"module": "esnext",
-		"target": "es5",
+		"target": "es2018",
 		"jsx": "react-jsx",
 		"allowJs": true,
 		"strict": true,
@@ -15,13 +15,14 @@
 		"lib": ["dom", "dom.iterable", "esnext"],
 		"allowSyntheticDefaultImports": true,
 		"noFallthroughCasesInSwitch": true,
-		"moduleResolution": "node",
+		"moduleResolution": "bundler",
 		"resolveJsonModule": true,
 		"isolatedModules": true,
 		"noEmit": true,
 		"baseUrl": "./src",
 		"paths": {
-			"@constants/*": ["/container/OnboardingContainer/constants/*"]
+			"*": ["./*"],
+			"@constants/*": ["./container/OnboardingContainer/constants/*"]
 		},
 		"downlevelIteration": true,
 		"plugins": [
@@ -29,7 +30,7 @@
 				"name": "typescript-plugin-css-modules"
 			}
 		],
-		"types": ["node", "jest"]
+		"types": ["vite/client", "node", "jest"]
 	},
 	"exclude": ["node_modules", "src/parser/*.ts", "src/parser/TraceOperatorParser/*.ts", "orval.config.ts"],
 	"include": [
@@ -37,15 +38,14 @@
 		"./src/**/*.ts",
 		"src/**/*.tsx",
 		"src/**/*.d.ts",
-		"./babel.config.js",
+		"babel.config.cjs",
 		"./jest.config.ts",
-		"./.eslintrc.js",
+		"./.eslintrc.cjs",
 		"./__mocks__",
 		"./conf/default.conf",
 		"./public",
 		"./commitlint.config.ts",
-		"./webpack.config.js",
-		"./webpack.config.prod.js",
+		"./vite.config.ts",
 		"./jest.setup.ts",
 		"./tests/**.ts",
 		"./**/*.d.ts",

frontend/vite.config.ts

@@ -0,0 +1,137 @@
+import { sentryVitePlugin } from '@sentry/vite-plugin';
+import react from '@vitejs/plugin-react';
+import { readFileSync } from 'fs';
+import { resolve } from 'path';
+import { visualizer } from 'rollup-plugin-visualizer';
+import type { Plugin, UserConfig } from 'vite';
+import { defineConfig, loadEnv } from 'vite';
+import vitePluginChecker from 'vite-plugin-checker';
+import viteCompression from 'vite-plugin-compression';
+import { createHtmlPlugin } from 'vite-plugin-html';
+import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+function rawMarkdownPlugin(): Plugin {
+	return {
+		name: 'raw-markdown',
+		transform(_, id): any {
+			if (id.endsWith('.md')) {
+				const content = readFileSync(id, 'utf-8');
+				return {
+					code: `export default ${JSON.stringify(content)};`,
+					map: null,
+				};
+			}
+			return undefined;
+		},
+	};
+}
+
+export default defineConfig(
+	({ mode }): UserConfig => {
+		const env = loadEnv(mode, process.cwd(), '');
+
+		const plugins = [
+			tsconfigPaths(),
+			rawMarkdownPlugin(),
+			react(),
+			createHtmlPlugin({
+				inject: {
+					data: {
+						PYLON_APP_ID: env.VITE_PYLON_APP_ID || '',
+						APPCUES_APP_ID: env.VITE_APPCUES_APP_ID || '',
+					},
+				},
+			}),
+			vitePluginChecker({
+				typescript: true,
+				// this doubles the build tim
+				// disabled to use Biome/tsgo (in the future) as alternative
+				enableBuild: false,
+			}),
+		];
+
+		if (env.VITE_SENTRY_AUTH_TOKEN) {
+			plugins.push(
+				sentryVitePlugin({
+					authToken: env.VITE_SENTRY_AUTH_TOKEN,
+					org: env.VITE_SENTRY_ORG,
+					project: env.VITE_SENTRY_PROJECT_ID,
+				}),
+			);
+		}
+
+		if (env.BUNDLE_ANALYSER === 'true') {
+			plugins.push(
+				visualizer({
+					open: true,
+					gzipSize: true,
+					brotliSize: true,
+				}),
+			);
+		}
+
+		if (env.NODE_ENV === 'production') {
+			plugins.push(
+				ViteImageOptimizer({
+					jpeg: { quality: 80 },
+					jpg: { quality: 80 },
+				}),
+			);
+			plugins.push(viteCompression());
+		}
+
+		return {
+			plugins,
+			resolve: {
+				alias: {
+					utils: resolve(__dirname, './src/utils'),
+					types: resolve(__dirname, './src/types'),
+					constants: resolve(__dirname, './src/constants'),
+					parser: resolve(__dirname, './src/parser'),
+					providers: resolve(__dirname, './src/providers'),
+					lib: resolve(__dirname, './src/lib'),
+				},
+			},
+			css: {
+				preprocessorOptions: {
+					less: {
+						javascriptEnabled: true,
+					},
+				},
+			},
+			define: {
+				// TODO: Remove this in favor of import.meta.env
+				'process.env': JSON.stringify({
+					NODE_ENV: mode,
+					FRONTEND_API_ENDPOINT: env.VITE_FRONTEND_API_ENDPOINT,
+					WEBSOCKET_API_ENDPOINT: env.VITE_WEBSOCKET_API_ENDPOINT,
+					PYLON_APP_ID: env.VITE_PYLON_APP_ID,
+					PYLON_IDENTITY_SECRET: env.VITE_PYLON_IDENTITY_SECRET,
+					APPCUES_APP_ID: env.VITE_APPCUES_APP_ID,
+					POSTHOG_KEY: env.VITE_POSTHOG_KEY,
+					SENTRY_AUTH_TOKEN: env.VITE_SENTRY_AUTH_TOKEN,
+					SENTRY_ORG: env.VITE_SENTRY_ORG,
+					SENTRY_PROJECT_ID: env.VITE_SENTRY_PROJECT_ID,
+					SENTRY_DSN: env.VITE_SENTRY_DSN,
+					TUNNEL_URL: env.VITE_TUNNEL_URL,
+					TUNNEL_DOMAIN: env.VITE_TUNNEL_DOMAIN,
+					DOCS_BASE_URL: env.VITE_DOCS_BASE_URL,
+				}),
+			},
+			build: {
+				sourcemap: true,
+				outDir: 'build',
+				cssMinify: 'esbuild',
+			},
+			server: {
+				open: true,
+				port: 3301,
+				host: true,
+			},
+			preview: {
+				port: 3301,
+			},
+		};
+	},
+);

frontend/webpack.config.js

@@ -1,173 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-// shared config (dev and prod)
-const { resolve } = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const { sentryWebpackPlugin } = require('@sentry/webpack-plugin');
-const portFinderSync = require('portfinder-sync');
-const dotenv = require('dotenv');
-const webpack = require('webpack');
-const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
-const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
-
-dotenv.config();
-
-console.log(resolve(__dirname, './src/'));
-
-const cssLoader = 'css-loader';
-const sassLoader = 'sass-loader';
-const styleLoader = 'style-loader';
-
-const plugins = [
-	new HtmlWebpackPlugin({
-		template: 'src/index.html.ejs',
-		PYLON_APP_ID: process.env.PYLON_APP_ID,
-		APPCUES_APP_ID: process.env.APPCUES_APP_ID,
-		POSTHOG_KEY: process.env.POSTHOG_KEY,
-		SENTRY_AUTH_TOKEN: process.env.SENTRY_AUTH_TOKEN,
-		SENTRY_ORG: process.env.SENTRY_ORG,
-		SENTRY_PROJECT_ID: process.env.SENTRY_PROJECT_ID,
-		SENTRY_DSN: process.env.SENTRY_DSN,
-		TUNNEL_URL: process.env.TUNNEL_URL,
-		TUNNEL_DOMAIN: process.env.TUNNEL_DOMAIN,
-	}),
-	new webpack.ProvidePlugin({
-		process: 'process/browser',
-	}),
-	new webpack.DefinePlugin({
-		'process.env': JSON.stringify({
-			NODE_ENV: process.env.NODE_ENV,
-			FRONTEND_API_ENDPOINT: process.env.FRONTEND_API_ENDPOINT,
-			WEBSOCKET_API_ENDPOINT: process.env.WEBSOCKET_API_ENDPOINT,
-			PYLON_APP_ID: process.env.PYLON_APP_ID,
-			PYLON_IDENTITY_SECRET: process.env.PYLON_IDENTITY_SECRET,
-			APPCUES_APP_ID: process.env.APPCUES_APP_ID,
-			POSTHOG_KEY: process.env.POSTHOG_KEY,
-			SENTRY_AUTH_TOKEN: process.env.SENTRY_AUTH_TOKEN,
-			SENTRY_ORG: process.env.SENTRY_ORG,
-			SENTRY_PROJECT_ID: process.env.SENTRY_PROJECT_ID,
-			SENTRY_DSN: process.env.SENTRY_DSN,
-			TUNNEL_URL: process.env.TUNNEL_URL,
-			TUNNEL_DOMAIN: process.env.TUNNEL_DOMAIN,
-			DOCS_BASE_URL: process.env.DOCS_BASE_URL,
-		}),
-	}),
-	sentryWebpackPlugin({
-		authToken: process.env.SENTRY_AUTH_TOKEN,
-		org: process.env.SENTRY_ORG,
-		project: process.env.SENTRY_PROJECT_ID,
-	}),
-];
-
-if (process.env.BUNDLE_ANALYSER === 'true') {
-	plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'server' }));
-}
-
-/**
- * @type {import('webpack').Configuration}
- */
-const config = {
-	mode: 'development',
-	devtool: 'source-map',
-	entry: resolve(__dirname, './src/index.tsx'),
-	devServer: {
-		historyApiFallback: {
-			disableDotRule: true,
-		},
-		open: true,
-		hot: true,
-		liveReload: true,
-		port: portFinderSync.getPort(3301),
-		static: {
-			directory: resolve(__dirname, 'public'),
-			publicPath: '/',
-			watch: true,
-		},
-		allowedHosts: 'all',
-	},
-	target: 'web',
-	output: {
-		path: resolve(__dirname, './build'),
-		publicPath: '/',
-	},
-	resolve: {
-		extensions: ['.ts', '.tsx', '.js', '.jsx'],
-		plugins: [new TsconfigPathsPlugin({})],
-		fallback: { 'process/browser': require.resolve('process/browser') },
-	},
-	module: {
-		rules: [
-			{
-				test: [/\.jsx?$/, /\.tsx?$/],
-				use: ['babel-loader'],
-				exclude: /node_modules/,
-			},
-			// Add a rule for Markdown files using raw-loader
-			{
-				test: /\.md$/,
-				use: 'raw-loader',
-			},
-			{
-				test: /\.css$/,
-				use: [
-					styleLoader,
-					{
-						loader: cssLoader,
-						options: {
-							modules: true,
-						},
-					},
-				],
-			},
-			{
-				test: /\.(jpe?g|png|gif|svg)$/i,
-				type: 'asset',
-			},
-			{
-				test: /\.(ttf|eot|woff|woff2)$/,
-				use: ['file-loader'],
-			},
-			{
-				test: /\.less$/i,
-				use: [
-					{
-						loader: styleLoader,
-					},
-					{
-						loader: cssLoader,
-						options: {
-							modules: true,
-						},
-					},
-					{
-						loader: 'less-loader',
-						options: {
-							lessOptions: {
-								javascriptEnabled: true,
-							},
-						},
-					},
-				],
-			},
-			{
-				test: /\.s[ac]ss$/i,
-				use: [
-					// Creates `style` nodes from JS strings
-					styleLoader,
-					// Translates CSS into CommonJS
-					cssLoader,
-					// Compiles Sass to CSS
-					sassLoader,
-				],
-			},
-		],
-	},
-	plugins,
-	performance: {
-		hints: false,
-	},
-	optimization: {
-		minimize: false,
-	},
-};
-
-module.exports = config;

frontend/webpack.config.prod.js

@@ -1,256 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
-// shared config (dev and prod)
-const { resolve } = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CopyPlugin = require('copy-webpack-plugin');
-const { sentryWebpackPlugin } = require('@sentry/webpack-plugin');
-const CompressionPlugin = require('compression-webpack-plugin');
-const dotenv = require('dotenv');
-const webpack = require('webpack');
-const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
-const { RetryChunkLoadPlugin } = require('webpack-retry-chunk-load-plugin');
-const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
-
-dotenv.config();
-
-const cssLoader = 'css-loader';
-const sassLoader = 'sass-loader';
-const styleLoader = 'style-loader';
-
-const plugins = [
-	new HtmlWebpackPlugin({
-		template: 'src/index.html.ejs',
-		PYLON_APP_ID: process.env.PYLON_APP_ID,
-		APPCUES_APP_ID: process.env.APPCUES_APP_ID,
-		POSTHOG_KEY: process.env.POSTHOG_KEY,
-		SENTRY_AUTH_TOKEN: process.env.SENTRY_AUTH_TOKEN,
-		SENTRY_ORG: process.env.SENTRY_ORG,
-		SENTRY_PROJECT_ID: process.env.SENTRY_PROJECT_ID,
-		SENTRY_DSN: process.env.SENTRY_DSN,
-		TUNNEL_URL: process.env.TUNNEL_URL,
-		TUNNEL_DOMAIN: process.env.TUNNEL_DOMAIN,
-	}),
-	new CompressionPlugin({
-		exclude: /.map$/,
-	}),
-	new CopyPlugin({
-		patterns: [{ from: resolve(__dirname, 'public/'), to: '.' }],
-	}),
-	new webpack.ProvidePlugin({
-		process: 'process/browser',
-	}),
-	new webpack.DefinePlugin({
-		'process.env': JSON.stringify({
-			FRONTEND_API_ENDPOINT: process.env.FRONTEND_API_ENDPOINT,
-			WEBSOCKET_API_ENDPOINT: process.env.WEBSOCKET_API_ENDPOINT,
-			PYLON_APP_ID: process.env.PYLON_APP_ID,
-			PYLON_IDENTITY_SECRET: process.env.PYLON_IDENTITY_SECRET,
-			APPCUES_APP_ID: process.env.APPCUES_APP_ID,
-			POSTHOG_KEY: process.env.POSTHOG_KEY,
-			SENTRY_AUTH_TOKEN: process.env.SENTRY_AUTH_TOKEN,
-			SENTRY_ORG: process.env.SENTRY_ORG,
-			SENTRY_PROJECT_ID: process.env.SENTRY_PROJECT_ID,
-			SENTRY_DSN: process.env.SENTRY_DSN,
-			TUNNEL_URL: process.env.TUNNEL_URL,
-			TUNNEL_DOMAIN: process.env.TUNNEL_DOMAIN,
-			DOCS_BASE_URL: process.env.DOCS_BASE_URL,
-		}),
-	}),
-	new MiniCssExtractPlugin(),
-	sentryWebpackPlugin({
-		authToken: process.env.SENTRY_AUTH_TOKEN,
-		org: process.env.SENTRY_ORG,
-		project: process.env.SENTRY_PROJECT_ID,
-	}),
-	new RetryChunkLoadPlugin({
-		maxRetries: 2,
-	}),
-];
-
-if (process.env.BUNDLE_ANALYSER === 'true') {
-	plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'server' }));
-}
-
-const config = {
-	mode: 'production',
-	devtool: 'source-map',
-	entry: resolve(__dirname, './src/index.tsx'),
-	output: {
-		path: resolve(__dirname, './build'),
-		publicPath: '/',
-		filename: '[name].[contenthash].js',
-	},
-	resolve: {
-		extensions: ['.ts', '.tsx', '.js', '.jsx'],
-		plugins: [new TsconfigPathsPlugin({})],
-		fallback: { 'process/browser': require.resolve('process/browser') },
-	},
-	cache: {
-		type: 'filesystem',
-		allowCollectingMemory: true,
-		cacheDirectory: resolve(__dirname, '.temp_cache'),
-		buildDependencies: {
-			// This makes all dependencies of this file - build dependencies
-			config: [__filename],
-			// By default webpack and loaders are build dependencies
-		},
-	},
-
-	module: {
-		rules: [
-			{
-				test: [/\.jsx?$/, /\.tsx?$/],
-				use: ['babel-loader'],
-				exclude: /node_modules/,
-			},
-			{
-				test: /\.md$/,
-				use: 'raw-loader',
-			},
-			{
-				test: /\.css$/,
-				use: [
-					MiniCssExtractPlugin.loader,
-					{
-						loader: cssLoader,
-						options: {
-							modules: true,
-						},
-					},
-				],
-			},
-			{
-				test: /\.s[ac]ss$/i,
-				use: [
-					// Creates `style` nodes from JS strings
-					styleLoader,
-					// Translates CSS into CommonJS
-					cssLoader,
-					// Compiles Sass to CSS
-					sassLoader,
-				],
-			},
-			{
-				test: /\.(jpe?g|png|gif|svg)$/i,
-				type: 'asset',
-			},
-
-			{
-				test: /\.(ttf|eot|woff|woff2)$/,
-				use: ['file-loader'],
-			},
-			{
-				test: /\.less$/i,
-				use: [
-					{
-						loader: styleLoader,
-					},
-					{
-						loader: cssLoader,
-						options: {
-							modules: true,
-						},
-					},
-					{
-						loader: 'less-loader',
-						options: {
-							lessOptions: {
-								javascriptEnabled: true,
-							},
-						},
-					},
-				],
-			},
-		],
-	},
-	plugins,
-	optimization: {
-		chunkIds: 'named',
-		concatenateModules: false,
-		emitOnErrors: true,
-		flagIncludedChunks: true,
-		innerGraph: true, // tells webpack whether to conduct inner graph analysis for unused exports.
-		mangleWasmImports: true,
-		mergeDuplicateChunks: true,
-		minimize: true,
-		nodeEnv: 'production',
-		runtimeChunk: {
-			name: (entrypoint) => `runtime~${entrypoint.name}`,
-		},
-		minimizer: [
-			new TerserPlugin({
-				parallel: true,
-				terserOptions: {
-					compress: true,
-					keep_classnames: true,
-					keep_fnames: false,
-					sourceMap: false,
-					safari10: true,
-					parse: {
-						html5_comments: false,
-					},
-				},
-			}),
-			new CssMinimizerPlugin(),
-			new ImageMinimizerPlugin({
-				minimizer: [
-					{
-						implementation: ImageMinimizerPlugin.sharpMinify,
-						options: {
-							encodeOptions: {
-								jpeg: {
-									quality: 80,
-								},
-								webp: {
-									lossless: true,
-								},
-								avif: {
-									lossless: true,
-								},
-								png: {},
-								gif: {},
-							},
-						},
-					},
-					{
-						implementation: ImageMinimizerPlugin.imageminMinify,
-						options: {
-							plugins: [
-								[
-									'svgo',
-									{
-										plugins: [
-											{
-												name: 'preset-default',
-												params: {
-													overrides: {
-														removeViewBox: false,
-														addAttributesToSVGElement: {
-															params: {
-																attributes: [{ xmlns: 'http://www.w3.org/2000/svg' }],
-															},
-														},
-													},
-												},
-											},
-										],
-									},
-								],
-							],
-						},
-					},
-				],
-			}),
-		],
-	},
-	performance: {
-		hints: 'warning',
-	},
-};
-
-module.exports = config;

pkg/query-service/app/clickhouseReader/reader.go

@@ -3541,6 +3541,45 @@ func (r *ClickHouseReader) GetCountOfThings(ctx context.Context, query string) (
 	return count, nil
 }
 
+func (r *ClickHouseReader) GetActiveHostsFromMetricMetadata(ctx context.Context, metricNames []string, hostNameAttr string, sinceUnixMilli int64) (map[string]bool, error) {
+	activeHosts := map[string]bool{}
+
+	query := fmt.Sprintf(
+		`SELECT DISTINCT attr_string_value
+		FROM %s.%s
+		WHERE metric_name IN @metricNames
+		  AND attr_name = @attrName
+		  AND last_reported_unix_milli >= @sinceUnixMilli`,
+		signozMetricDBName,
+		constants.SIGNOZ_METADATA_TABLENAME,
+	)
+
+	rows, err := r.db.Query(ctx, query,
+		clickhouse.Named("metricNames", metricNames),
+		clickhouse.Named("attrName", hostNameAttr),
+		clickhouse.Named("sinceUnixMilli", sinceUnixMilli),
+	)
+	if err != nil {
+		return nil, errorsV2.WrapInternalf(err, errorsV2.CodeInternal, "error querying active hosts")
+	}
+	defer rows.Close()
+
+	for rows.Next() {
+		var hostName string
+		if err := rows.Scan(&hostName); err != nil {
+			return nil, errorsV2.WrapInternalf(err, errorsV2.CodeInternal, "error scanning active host row")
+		}
+		if hostName != "" {
+			activeHosts[hostName] = true
+		}
+	}
+	if err := rows.Err(); err != nil {
+		return nil, errorsV2.WrapInternalf(err, errorsV2.CodeInternal, "error iterating active host rows")
+	}
+
+	return activeHosts, nil
+}
+
 func (r *ClickHouseReader) GetLatestReceivedMetric(
 	ctx context.Context, metricNames []string, labelValues map[string]string,
 ) (*model.MetricStatus, *model.ApiError) {

pkg/query-service/app/inframetrics/common.go

@@ -10,55 +10,110 @@ import (
 )
 
 var dotMetricMap = map[string]string{
-	"system_filesystem_usage":               "system.filesystem.usage",
-	"system_cpu_time":                       "system.cpu.time",
-	"system_memory_usage":                   "system.memory.usage",
-	"system_cpu_load_average_15m":           "system.cpu.load_average.15m",
-	"host_name":                             "host.name",
-	"k8s_cluster_name":                      "k8s.cluster.name",
-	"k8s_node_name":                         "k8s.node.name",
-	"k8s_pod_memory_usage":                  "k8s.pod.memory.usage",
-	"k8s_pod_cpu_request_utilization":       "k8s.pod.cpu_request_utilization",
-	"k8s_pod_memory_request_utilization":    "k8s.pod.memory_request_utilization",
-	"k8s_pod_cpu_limit_utilization":         "k8s.pod.cpu_limit_utilization",
-	"k8s_pod_memory_limit_utilization":      "k8s.pod.memory_limit_utilization",
-	"k8s_container_restarts":                "k8s.container.restarts",
-	"k8s_pod_phase":                         "k8s.pod.phase",
-	"k8s_node_allocatable_cpu":              "k8s.node.allocatable_cpu",
-	"k8s_node_allocatable_memory":           "k8s.node.allocatable_memory",
-	"k8s_node_memory_usage":                 "k8s.node.memory.usage",
-	"k8s_node_condition_ready":              "k8s.node.condition_ready",
-	"k8s_daemonset_desired_scheduled_nodes": "k8s.daemonset.desired_scheduled_nodes",
-	"k8s_daemonset_current_scheduled_nodes": "k8s.daemonset.current_scheduled_nodes",
-	"k8s_deployment_desired":                "k8s.deployment.desired",
-	"k8s_deployment_available":              "k8s.deployment.available",
-	"k8s_job_desired_successful_pods":       "k8s.job.desired_successful_pods",
-	"k8s_job_active_pods":                   "k8s.job.active_pods",
-	"k8s_job_failed_pods":                   "k8s.job.failed_pods",
-	"k8s_job_successful_pods":               "k8s.job.successful_pods",
-	"k8s_statefulset_desired_pods":          "k8s.statefulset.desired_pods",
-	"k8s_statefulset_current_pods":          "k8s.statefulset.current_pods",
-	"k8s_namespace_name":                    "k8s.namespace.name",
-	"k8s_deployment_name":                   "k8s.deployment.name",
-	"k8s_cronjob_name":                      "k8s.cronjob.name",
-	"k8s_job_name":                          "k8s.job.name",
-	"k8s_daemonset_name":                    "k8s.daemonset.name",
-	"os_type":                               "os.type",
-	"process_cgroup":                        "process.cgroup",
-	"process_pid":                           "process.pid",
-	"process_parent_pid":                    "process.parent_pid",
-	"process_owner":                         "process.owner",
-	"process_executable_path":               "process.executable.path",
-	"process_executable_name":               "process.executable.name",
-	"process_command_line":                  "process.command_line",
-	"process_command":                       "process.command",
-	"process_memory_usage":                  "process.memory.usage",
-	"k8s_persistentvolumeclaim_name":        "k8s.persistentvolumeclaim.name",
-	"k8s_volume_available":                  "k8s.volume.available",
-	"k8s_volume_capacity":                   "k8s.volume.capacity",
-	"k8s_volume_inodes":                     "k8s.volume.inodes",
-	"k8s_volume_inodes_free":                "k8s.volume.inodes.free",
-	// add additional mappings as needed
+	"system_uptime":                  "system.uptime",
+	"system_cpu_physical_count":      "system.cpu.physical.count",
+	"system_cpu_logical_count":       "system.cpu.logical.count",
+	"system_cpu_time":                "system.cpu.time",
+	"system_cpu_frequency":           "system.cpu.frequency",
+	"system_cpu_utilization":         "system.cpu.utilization",
+	"system_cpu_load_average_15m":    "system.cpu.load_average.15m",
+	"system_memory_usage":            "system.memory.usage",
+	"system_memory_limit":            "system.memory.limit",
+	"system_memory_utilization":      "system.memory.utilization",
+	"system_memory_linux_available":  "system.memory.linux.available",
+	"system_memory_linux_shared":     "system.memory.linux.shared",
+	"system_memory_linux_slab_usage": "system.memory.linux.slab.usage",
+	"system_paging_usage":            "system.paging.usage",
+	"system_paging_utilization":      "system.paging.utilization",
+	"system_paging_faults":           "system.paging.faults",
+	"system_paging_operations":       "system.paging.operations",
+	"system_disk_io":                 "system.disk.io",
+	"system_disk_operations":         "system.disk.operations",
+	"system_disk_io_time":            "system.disk.io_time",
+	"system_disk_operation_time":     "system.disk.operation_time",
+	"system_disk_merged":             "system.disk.merged",
+	"system_disk_limit":              "system.disk.limit",
+	"system_filesystem_usage":        "system.filesystem.usage",
+	"system_filesystem_utilization":  "system.filesystem.utilization",
+	"system_filesystem_limit":        "system.filesystem.limit",
+	"system_network_errors":          "system.network.errors",
+	"system_network_io":              "system.network.io",
+	"system_network_connections":     "system.network.connections",
+	"system_network_dropped":         "system.network.dropped",
+	"system_network_packets":         "system.network.packets",
+	"system_processes_count":         "system.processes.count",
+	"system_processes_created":       "system.processes.created",
+	"system_disk_pending_operations": "system.disk.pending_operations",
+	"system_disk_weighted_io_time":   "system.disk.weighted_io_time",
+	"system_filesystem_inodes_usage": "system.filesystem.inodes.usage",
+	"system_network_conntrack_count": "system.network.conntrack.count",
+	"system_network_conntrack_max":   "system.network.conntrack.max",
+	"system_cpu_load_average_1m":     "system.cpu.load_average.1m",
+	"system_cpu_load_average_5m":     "system.cpu.load_average.5m",
+
+	"host_name":                              "host.name",
+	"k8s_cluster_name":                       "k8s.cluster.name",
+	"k8s_node_name":                          "k8s.node.name",
+	"k8s_pod_memory_usage":                   "k8s.pod.memory.usage",
+	"k8s_pod_cpu_request_utilization":        "k8s.pod.cpu_request_utilization",
+	"k8s_pod_memory_request_utilization":     "k8s.pod.memory_request_utilization",
+	"k8s_pod_cpu_limit_utilization":          "k8s.pod.cpu_limit_utilization",
+	"k8s_pod_memory_limit_utilization":       "k8s.pod.memory_limit_utilization",
+	"k8s_container_restarts":                 "k8s.container.restarts",
+	"k8s_pod_phase":                          "k8s.pod.phase",
+	"k8s_node_allocatable_cpu":               "k8s.node.allocatable_cpu",
+	"k8s_node_allocatable_memory":            "k8s.node.allocatable_memory",
+	"k8s_node_memory_usage":                  "k8s.node.memory.usage",
+	"k8s_node_condition_ready":               "k8s.node.condition_ready",
+	"k8s_daemonset_desired_scheduled_nodes":  "k8s.daemonset.desired_scheduled_nodes",
+	"k8s_daemonset_current_scheduled_nodes":  "k8s.daemonset.current_scheduled_nodes",
+	"k8s_deployment_desired":                 "k8s.deployment.desired",
+	"k8s_deployment_available":               "k8s.deployment.available",
+	"k8s_job_desired_successful_pods":        "k8s.job.desired_successful_pods",
+	"k8s_job_active_pods":                    "k8s.job.active_pods",
+	"k8s_job_failed_pods":                    "k8s.job.failed_pods",
+	"k8s_job_successful_pods":                "k8s.job.successful_pods",
+	"k8s_statefulset_desired_pods":           "k8s.statefulset.desired_pods",
+	"k8s_statefulset_current_pods":           "k8s.statefulset.current_pods",
+	"k8s_namespace_name":                     "k8s.namespace.name",
+	"k8s_deployment_name":                    "k8s.deployment.name",
+	"k8s_cronjob_name":                       "k8s.cronjob.name",
+	"k8s_job_name":                           "k8s.job.name",
+	"k8s_daemonset_name":                     "k8s.daemonset.name",
+	"os_type":                                "os.type",
+	"process_cgroup":                         "process.cgroup",
+	"process_pid":                            "process.pid",
+	"process_parent_pid":                     "process.parent_pid",
+	"process_owner":                          "process.owner",
+	"process_executable_path":                "process.executable.path",
+	"process_executable_name":                "process.executable.name",
+	"process_command_line":                   "process.command_line",
+	"process_command":                        "process.command",
+	"process_memory_usage":                   "process.memory.usage",
+	"process_memory_virtual":                 "process.memory.virtual",
+	"process_cpu_time":                       "process.cpu.time",
+	"process_disk_io":                        "process.disk.io",
+	"nfs_client_net_count":                   "nfs.client.net.count",
+	"nfs_client_net_tcp_connection_accepted": "nfs.client.net.tcp.connection.accepted",
+	"nfs_client_operation_count":             "nfs.client.operation.count",
+	"nfs_client_procedure_count":             "nfs.client.procedure.count",
+	"nfs_client_rpc_authrefresh_count":       "nfs.client.rpc.authrefresh.count",
+	"nfs_client_rpc_count":                   "nfs.client.rpc.count",
+	"nfs_client_rpc_retransmit_count":        "nfs.client.rpc.retransmit.count",
+	"nfs_server_fh_stale_count":              "nfs.server.fh.stale.count",
+	"nfs_server_io":                          "nfs.server.io",
+	"nfs_server_net_count":                   "nfs.server.net.count",
+	"nfs_server_net_tcp_connection_accepted": "nfs.server.net.tcp.connection.accepted",
+	"nfs_server_operation_count":             "nfs.server.operation.count",
+	"nfs_server_procedure_count":             "nfs.server.procedure.count",
+	"nfs_server_repcache_requests":           "nfs.server.repcache.requests",
+	"nfs_server_rpc_count":                   "nfs.server.rpc.count",
+	"nfs_server_thread_count":                "nfs.server.thread.count",
+	"k8s_persistentvolumeclaim_name":         "k8s.persistentvolumeclaim.name",
+	"k8s_volume_available":                   "k8s.volume.available",
+	"k8s_volume_capacity":                    "k8s.volume.capacity",
+	"k8s_volume_inodes":                      "k8s.volume.inodes",
+	"k8s_volume_inodes_free":                 "k8s.volume.inodes.free",
 
 	"k8s_pod_uid":              "k8s.pod.uid",
 	"k8s_pod_name":             "k8s.pod.name",

pkg/query-service/app/inframetrics/hosts.go

@@ -73,6 +73,53 @@ var (
 		"load15":     GetDotMetrics("system_cpu_load_average_15m"),
 		"wait":       GetDotMetrics("system_cpu_time"),
 	}
+	uniqueMetricNamesForHosts = []string{
+		GetDotMetrics("system_uptime"),
+		GetDotMetrics("system_cpu_time"),
+		GetDotMetrics("system_cpu_load_average_1m"),
+		GetDotMetrics("system_cpu_load_average_5m"),
+		GetDotMetrics("system_cpu_load_average_15m"),
+		GetDotMetrics("system_memory_usage"),
+		GetDotMetrics("system_paging_usage"),
+		GetDotMetrics("system_paging_faults"),
+		GetDotMetrics("system_paging_operations"),
+		GetDotMetrics("system_disk_io"),
+		GetDotMetrics("system_disk_operations"),
+		GetDotMetrics("system_disk_io_time"),
+		GetDotMetrics("system_disk_operation_time"),
+		GetDotMetrics("system_disk_merged"),
+		GetDotMetrics("system_disk_pending_operations"),
+		GetDotMetrics("system_disk_weighted_io_time"),
+		GetDotMetrics("system_filesystem_usage"),
+		GetDotMetrics("system_filesystem_inodes_usage"),
+		GetDotMetrics("system_network_io"),
+		GetDotMetrics("system_network_errors"),
+		GetDotMetrics("system_network_connections"),
+		GetDotMetrics("system_network_dropped"),
+		GetDotMetrics("system_network_packets"),
+		GetDotMetrics("system_processes_count"),
+		GetDotMetrics("system_processes_created"),
+		GetDotMetrics("process_cpu_time"),
+		GetDotMetrics("process_disk_io"),
+		GetDotMetrics("process_memory_usage"),
+		GetDotMetrics("process_memory_virtual"),
+		GetDotMetrics("nfs_client_net_count"),
+		GetDotMetrics("nfs_client_net_tcp_connection_accepted"),
+		GetDotMetrics("nfs_client_operation_count"),
+		GetDotMetrics("nfs_client_procedure_count"),
+		GetDotMetrics("nfs_client_rpc_authrefresh_count"),
+		GetDotMetrics("nfs_client_rpc_count"),
+		GetDotMetrics("nfs_client_rpc_retransmit_count"),
+		GetDotMetrics("nfs_server_fh_stale_count"),
+		GetDotMetrics("nfs_server_io"),
+		GetDotMetrics("nfs_server_net_count"),
+		GetDotMetrics("nfs_server_net_tcp_connection_accepted"),
+		GetDotMetrics("nfs_server_operation_count"),
+		GetDotMetrics("nfs_server_procedure_count"),
+		GetDotMetrics("nfs_server_repcache_requests"),
+		GetDotMetrics("nfs_server_rpc_count"),
+		GetDotMetrics("nfs_server_thread_count"),
+	}
 )
 
 func NewHostsRepo(reader interfaces.Reader, querierV2 interfaces.Querier) *HostsRepo {
@@ -131,62 +178,9 @@ func (h *HostsRepo) GetHostAttributeValues(ctx context.Context, req v3.FilterAtt
 	return &v3.FilterAttributeValueResponse{StringAttributeValues: hostNames}, nil
 }
 
-func (h *HostsRepo) getActiveHosts(ctx context.Context, orgID valuer.UUID, req model.HostListRequest) (map[string]bool, error) {
-	activeStatus := map[string]bool{}
-	step := common.MinAllowedStepInterval(req.Start, req.End)
-
-	hasHostName := false
-	for _, key := range req.GroupBy {
-		if key.Key == hostNameAttrKey {
-			hasHostName = true
-		}
-	}
-
-	if !hasHostName {
-		req.GroupBy = append(req.GroupBy, v3.AttributeKey{Key: hostNameAttrKey})
-	}
-
-	params := v3.QueryRangeParamsV3{
-		Start: time.Now().Add(-time.Minute * 10).UTC().UnixMilli(),
-		End:   time.Now().UTC().UnixMilli(),
-		Step:  step,
-		CompositeQuery: &v3.CompositeQuery{
-			BuilderQueries: map[string]*v3.BuilderQuery{
-				"A": {
-					QueryName:    "A",
-					StepInterval: step,
-					DataSource:   v3.DataSourceMetrics,
-					AggregateAttribute: v3.AttributeKey{
-						Key:      metricToUseForHostAttributes,
-						DataType: v3.AttributeKeyDataTypeFloat64,
-					},
-					Temporality:      v3.Unspecified,
-					Filters:          req.Filters,
-					GroupBy:          req.GroupBy,
-					Expression:       "A",
-					TimeAggregation:  v3.TimeAggregationAvg,
-					SpaceAggregation: v3.SpaceAggregationAvg,
-					Disabled:         false,
-				},
-			},
-			QueryType: v3.QueryTypeBuilder,
-			PanelType: v3.PanelTypeGraph,
-		},
-	}
-
-	queryResponse, _, err := h.querierV2.QueryRange(ctx, orgID, &params)
-	if err != nil {
-		return nil, err
-	}
-
-	for _, result := range queryResponse {
-		for _, series := range result.Series {
-			name := series.Labels[hostNameAttrKey]
-			activeStatus[name] = true
-		}
-	}
-
-	return activeStatus, nil
+func (h *HostsRepo) getActiveHosts(ctx context.Context) (map[string]bool, error) {
+	tenMinAgo := time.Now().Add(-10 * time.Minute).UTC().UnixMilli()
+	return h.reader.GetActiveHostsFromMetricMetadata(ctx, uniqueMetricNamesForHosts, hostNameAttrKey, tenMinAgo)
 }
 
 func (h *HostsRepo) getMetadataAttributes(ctx context.Context, req model.HostListRequest) (map[string]map[string]string, error) {
@@ -450,7 +444,7 @@ func (h *HostsRepo) GetHostList(ctx context.Context, orgID valuer.UUID, req mode
 		return resp, err
 	}
 
-	activeHosts, err := h.getActiveHosts(ctx, orgID, req)
+	activeHosts, err := h.getActiveHosts(ctx)
 	if err != nil {
 		return resp, err
 	}

pkg/query-service/interfaces/interface.go

@@ -99,6 +99,7 @@ type Reader interface {
 	SubscribeToQueryProgress(queryId string) (<-chan model.QueryProgress, func(), *model.ApiError)
 
 	GetCountOfThings(ctx context.Context, query string) (uint64, error)
+	GetActiveHostsFromMetricMetadata(ctx context.Context, metricNames []string, hostNameAttr string, sinceUnixMilli int64) (map[string]bool, error)
 
 	GetMetricsExistenceAndEarliestTime(ctx context.Context, metricNames []string) (uint64, uint64, error)