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

docs/api/openapi.yml

@@ -6167,6 +6167,10 @@ paths:
         name: searchText
         schema:
           type: string
+      - in: query
+        name: source
+        schema:
+          type: string
       responses:
         "200":
           content:

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,295 +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/dialog": "0.0.2",
-		"@signozhq/drawer": "0.0.4",
-		"@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/public/locales/en-GB/routes.json

@@ -13,6 +13,5 @@
 	"pipelines": "Pipelines",
 	"archives": "Archives",
 	"logs_to_metrics": "Logs To Metrics",
-	"roles": "Roles",
-	"members": "Members"
+	"roles": "Roles"
 }

frontend/public/locales/en/routes.json

@@ -13,6 +13,5 @@
 	"pipelines": "Pipelines",
 	"archives": "Archives",
 	"logs_to_metrics": "Logs To Metrics",
-	"roles": "Roles",
-	"members": "Members"
+	"roles": "Roles"
 }

frontend/public/locales/en/titles.json

@@ -74,6 +74,5 @@
 	"METER_EXPLORER": "SigNoz | Meter Explorer",
 	"METER_EXPLORER_VIEWS": "SigNoz | Meter Explorer Views",
 	"METER": "SigNoz | Meter",
-	"ROLES_SETTINGS": "SigNoz | Roles",
-	"MEMBERS_SETTINGS": "SigNoz | Members"
+	"ROLES_SETTINGS": "SigNoz | Roles"
 }

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/ErrorResponseHandlerForGeneratedAPIs.ts

@@ -2,7 +2,7 @@ import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
 import APIError from 'types/api/error';
 
-// Handles errors from generated API hooks (which use RenderErrorResponseDTO)
+// @deprecated Use convertToApiError instead
 export function ErrorResponseHandlerForGeneratedAPIs(
 	error: AxiosError<RenderErrorResponseDTO>,
 ): never {
@@ -46,3 +46,34 @@ export function ErrorResponseHandlerForGeneratedAPIs(
 		},
 	});
 }
+
+// convertToApiError converts an AxiosError from generated API
+// hooks into an APIError.
+export function convertToApiError(
+	error: AxiosError<RenderErrorResponseDTO> | null,
+): APIError | undefined {
+	if (!error) {
+		return undefined;
+	}
+
+	const response = error.response;
+	const errorData = response?.data?.error;
+
+	return new APIError({
+		httpStatusCode: response?.status || error.status || 500,
+		error: {
+			code:
+				errorData?.code ||
+				String(response?.status || error.code || 'unknown_error'),
+			message:
+				errorData?.message ||
+				response?.statusText ||
+				error.message ||
+				'Something went wrong',
+			url: errorData?.url ?? '',
+			errors: (errorData?.errors ?? []).map((e) => ({
+				message: e.message ?? '',
+			})),
+		},
+	});
+}

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/sigNoz.schemas.ts

@@ -3451,6 +3451,11 @@ export type ListMetricsParams = {
 	 * @description undefined
 	 */
 	searchText?: string;
+	/**
+	 * @type string
+	 * @description undefined
+	 */
+	source?: string;
 };
 
 export type ListMetrics200 = {

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/api/metricsExplorer/getMetricsTreeMap.ts

@@ -1,54 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { TreemapViewType } from 'container/MetricsExplorer/Summary/types';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
-
-export interface MetricsTreeMapPayload {
-	filters: TagFilter;
-	limit?: number;
-	treemap?: TreemapViewType;
-}
-
-export interface MetricsTreeMapResponse {
-	status: string;
-	data: {
-		[TreemapViewType.TIMESERIES]: TimeseriesData[];
-		[TreemapViewType.SAMPLES]: SamplesData[];
-	};
-}
-
-export interface TimeseriesData {
-	percentage: number;
-	total_value: number;
-	metric_name: string;
-}
-
-export interface SamplesData {
-	percentage: number;
-	metric_name: string;
-}
-
-export const getMetricsTreeMap = async (
-	props: MetricsTreeMapPayload,
-	signal?: AbortSignal,
-	headers?: Record<string, string>,
-): Promise<SuccessResponse<MetricsTreeMapResponse> | ErrorResponse> => {
-	try {
-		const response = await axios.post('/metrics/treemap', props, {
-			signal,
-			headers,
-		});
-
-		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data,
-			params: props,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
-};

frontend/src/api/metricsExplorer/updateMetricMetadata.ts

@@ -1,36 +0,0 @@
-import axios from 'api';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-
-import { Temporality } from './getMetricDetails';
-import { MetricType } from './getMetricsList';
-
-export interface UpdateMetricMetadataProps {
-	description: string;
-	metricType: MetricType;
-	temporality?: Temporality;
-	isMonotonic?: boolean;
-	unit?: string;
-}
-
-export interface UpdateMetricMetadataResponse {
-	success: boolean;
-	message: string;
-}
-
-const updateMetricMetadata = async (
-	metricName: string,
-	props: UpdateMetricMetadataProps,
-): Promise<SuccessResponse<UpdateMetricMetadataResponse> | ErrorResponse> => {
-	const response = await axios.post(`/metrics/${metricName}/metadata`, {
-		...props,
-	});
-
-	return {
-		statusCode: 200,
-		error: null,
-		message: response.data.status,
-		payload: response.data.data,
-	};
-};
-
-export default updateMetricMetadata;

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
@@ -18,8 +18,6 @@ import '@signozhq/checkbox';
 import '@signozhq/combobox';
 import '@signozhq/command';
 import '@signozhq/design-tokens';
-import '@signozhq/dialog';
-import '@signozhq/drawer';
 import '@signozhq/icons';
 import '@signozhq/input';
 import '@signozhq/popover';

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/EditMemberDrawer/EditMemberDrawer.styles.scss

@@ -1,324 +0,0 @@
-.edit-member-drawer {
-	&__layout {
-		display: flex;
-		flex-direction: column;
-		height: calc(100vh - 48px);
-	}
-
-	&__body {
-		flex: 1;
-		overflow-y: auto;
-		display: flex;
-		flex-direction: column;
-		gap: 16px;
-		padding: 20px 16px;
-	}
-
-	&__field {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-	}
-
-	&__label {
-		font-size: 14px;
-		font-weight: 400;
-		color: var(--vanilla-400, #c0c1c3);
-		line-height: 20px;
-		letter-spacing: -0.07px;
-		cursor: default;
-	}
-
-	&__input {
-		height: 32px;
-		width: 100%;
-		background: var(--bg-ink-300, #16181d) !important;
-		border-color: var(--slate-400, #1d212d) !important;
-		color: var(--vanilla-100, #fff) !important;
-		border-radius: 2px;
-
-		&::placeholder {
-			color: var(--vanilla-400, #c0c1c3);
-		}
-	}
-
-	&__input-wrapper {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		height: 32px;
-		padding: 0 8px;
-		border-radius: 2px;
-		background: var(--bg-ink-300, #16181d);
-		border: 1px solid var(--slate-400, #1d212d);
-
-		&--disabled {
-			cursor: not-allowed;
-			opacity: 0.8;
-		}
-	}
-
-	&__email-text {
-		font-size: 14px;
-		font-weight: 400;
-		color: var(--vanilla-400, #c0c1c3);
-		line-height: 18px;
-		letter-spacing: -0.07px;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		flex: 1;
-	}
-
-	&__lock-icon {
-		color: var(--vanilla-400, #c0c1c3);
-		flex-shrink: 0;
-		margin-left: 6px;
-		opacity: 0.6;
-	}
-
-	&__role-select {
-		width: 100%;
-		height: 32px;
-
-		.ant-select-selector {
-			height: 32px !important;
-			background: var(--bg-ink-300, #16181d) !important;
-			border-color: var(--slate-400, #1d212d) !important;
-			border-radius: 2px !important;
-			padding: 0 8px !important;
-			display: flex;
-			align-items: center;
-		}
-
-		.ant-select-selection-item {
-			font-size: 14px;
-			color: var(--vanilla-100, #fff);
-			line-height: 32px !important;
-			letter-spacing: -0.07px;
-		}
-
-		.ant-select-arrow {
-			color: var(--vanilla-400, #c0c1c3);
-		}
-
-		&:not(.ant-select-disabled):hover .ant-select-selector {
-			border-color: var(--vanilla-400, #c0c1c3) !important;
-		}
-	}
-
-	&__meta {
-		display: flex;
-		flex-direction: column;
-		gap: 16px;
-		margin-top: 4px;
-	}
-
-	&__meta-item {
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-	}
-
-	&__meta-label {
-		font-family: Inter, sans-serif;
-		font-size: 12px;
-		font-weight: 500;
-		color: var(--vanilla-400, #c0c1c3);
-		line-height: 20px;
-		letter-spacing: 0.48px;
-		text-transform: uppercase;
-	}
-
-	&__footer {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		width: 100%;
-		height: 56px;
-		padding: 0 16px;
-		border-top: 1px solid var(--slate-400, #1d212d);
-		flex-shrink: 0;
-		background: var(--bg-ink-400, #121317);
-	}
-
-	&__footer-left {
-		display: flex;
-		align-items: center;
-		gap: 16px;
-	}
-
-	&__footer-right {
-		display: flex;
-		align-items: center;
-		gap: 12px;
-	}
-
-	&__footer-divider {
-		width: 1px;
-		height: 21px;
-		background: var(--slate-400, #1d212d);
-		flex-shrink: 0;
-	}
-
-	&__footer-btn {
-		display: inline-flex;
-		align-items: center;
-		gap: 6px;
-		padding: 0;
-		background: transparent;
-		border: none;
-		cursor: pointer;
-		font-family: Inter, sans-serif;
-		font-size: 11px;
-		font-weight: 400;
-		line-height: 1;
-		letter-spacing: 0;
-		transition: opacity 0.15s ease;
-
-		&:disabled {
-			opacity: 0.5;
-			cursor: not-allowed;
-		}
-
-		&:not(:disabled):hover {
-			opacity: 0.8;
-		}
-
-		&--danger {
-			color: var(--bg-cherry-500, #e5484d);
-		}
-
-		&--warning {
-			color: var(--bg-amber-500, #ffcd56);
-		}
-	}
-
-	&__delete-body {
-		font-size: 13px;
-		font-weight: 400;
-		color: var(--vanilla-400, #b0b2b4);
-		line-height: 20px;
-		letter-spacing: -0.065px;
-		margin: 0;
-
-		strong {
-			font-weight: 500;
-			color: var(--vanilla-100, #fff);
-		}
-	}
-
-	&__delete-footer {
-		display: flex;
-		justify-content: flex-end;
-		gap: 8px;
-		margin-top: 24px;
-	}
-}
-
-.reset-link-dialog {
-	[data-slot='dialog-description'] {
-		width: 510px;
-	}
-
-	&__content {
-		display: flex;
-		flex-direction: column;
-		gap: 16px;
-	}
-
-	&__description {
-		font-size: 13px;
-		font-weight: 400;
-		color: var(--vanilla-400, #b0b2b4);
-		line-height: 20px;
-		letter-spacing: -0.065px;
-		margin: 0;
-		white-space: normal;
-		word-break: break-word;
-	}
-
-	&__link-row {
-		display: flex;
-		align-items: center;
-		height: 32px;
-		overflow: hidden;
-		background: var(--bg-ink-300, #16181d);
-		border: 1px solid var(--slate-400, #1d212d);
-		border-radius: 2px;
-	}
-
-	&__link-text-wrap {
-		flex: 1;
-		min-width: 0;
-		overflow: hidden;
-	}
-
-	&__link-text {
-		display: block;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		padding: 0 8px;
-		font-size: 14px;
-		font-weight: 400;
-		color: var(--vanilla-400, #c0c1c3);
-		line-height: 18px;
-		letter-spacing: -0.07px;
-	}
-
-	&__copy-btn {
-		flex-shrink: 0;
-		height: 32px !important;
-		border-radius: 0 2px 2px 0 !important;
-		border-top: none !important;
-		border-right: none !important;
-		border-bottom: none !important;
-		border-left: 1px solid var(--slate-400, #1d212d) !important;
-		min-width: 64px;
-	}
-}
-
-.lightMode {
-	.edit-member-drawer {
-		&__label,
-		&__email-text,
-		&__meta-label {
-			color: #5a5f6e;
-		}
-
-		&__input {
-			background: #f5f5f7 !important;
-			border-color: #d9d9d9 !important;
-			color: #1d1f29 !important;
-		}
-
-		&__input-wrapper {
-			background: #f5f5f7;
-			border-color: #d9d9d9;
-		}
-
-		&__role-select {
-			.ant-select-selector {
-				background: #f5f5f7 !important;
-				border-color: #d9d9d9 !important;
-			}
-
-			.ant-select-selection-item {
-				color: #1d1f29;
-			}
-		}
-
-		&__footer-divider {
-			background: #e8e8e8;
-		}
-
-		&__delete-body {
-			color: #5a5f6e;
-
-			strong {
-				color: #1d1f29;
-			}
-		}
-	}
-}

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

@@ -1,471 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { Badge } from '@signozhq/badge';
-import { Button } from '@signozhq/button';
-import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
-import { DrawerWrapper } from '@signozhq/drawer';
-import {
-	Check,
-	ChevronDown,
-	Copy,
-	Link,
-	LockKeyhole,
-	RefreshCw,
-	Trash2,
-	X,
-} from '@signozhq/icons';
-import { Input } from '@signozhq/input';
-import { toast } from '@signozhq/sonner';
-import { Select } from 'antd';
-import getResetPasswordToken from 'api/v1/factor_password/getResetPasswordToken';
-import sendInvite from 'api/v1/invite/create';
-import cancelInvite from 'api/v1/invite/id/delete';
-import deleteUser from 'api/v1/user/id/delete';
-import update from 'api/v1/user/id/update';
-import { MemberRow } from 'components/MembersTable/MembersTable';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import ROUTES from 'constants/routes';
-import { useTimezone } from 'providers/Timezone';
-import { ROLES } from 'types/roles';
-
-import './EditMemberDrawer.styles.scss';
-
-export interface EditMemberDrawerProps {
-	member: MemberRow | null;
-	open: boolean;
-	onClose: () => void;
-	onSuccess: () => void;
-}
-
-const INVITE_PREFIX = 'invite-';
-
-function formatRoleLabel(role: string): string {
-	return role.charAt(0).toUpperCase() + role.slice(1).toLowerCase();
-}
-
-// eslint-disable-next-line sonarjs/cognitive-complexity
-function EditMemberDrawer({
-	member,
-	open,
-	onClose,
-	onSuccess,
-}: EditMemberDrawerProps): JSX.Element {
-	const { formatTimezoneAdjustedTimestamp } = useTimezone();
-
-	const [displayName, setDisplayName] = useState('');
-	const [selectedRole, setSelectedRole] = useState<ROLES>('VIEWER');
-	const [isSaving, setIsSaving] = useState(false);
-	const [isDeleting, setIsDeleting] = useState(false);
-	const [isGeneratingLink, setIsGeneratingLink] = useState(false);
-	const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
-	const [resetLink, setResetLink] = useState<string | null>(null);
-	const [showResetLinkDialog, setShowResetLinkDialog] = useState(false);
-	const [hasCopiedResetLink, setHasCopiedResetLink] = useState(false);
-
-	const isInvited = member?.status === 'Invited';
-	// Invited member IDs are prefixed with 'invite-'; strip it to get the real invite ID
-	const inviteId =
-		isInvited && member ? member.id.slice(INVITE_PREFIX.length) : null;
-
-	useEffect(() => {
-		if (member) {
-			setDisplayName(member.name);
-			setSelectedRole(member.role);
-		}
-	}, [member]);
-
-	const isDirty =
-		member !== null &&
-		(displayName !== member.name || selectedRole !== member.role);
-
-	const formatTimestamp = useCallback(
-		(ts: string | null | undefined): string => {
-			if (!ts) {
-				return '—';
-			}
-			const d = new Date(ts);
-			if (Number.isNaN(d.getTime())) {
-				return '—';
-			}
-			return formatTimezoneAdjustedTimestamp(ts, DATE_TIME_FORMATS.DASH_DATETIME);
-		},
-		[formatTimezoneAdjustedTimestamp],
-	);
-
-	const handleSave = useCallback(async (): Promise<void> => {
-		if (!member || !isDirty) {
-			return;
-		}
-		setIsSaving(true);
-		try {
-			if (isInvited && inviteId) {
-				await cancelInvite({ id: inviteId });
-				await sendInvite({
-					email: member.email,
-					name: displayName,
-					role: selectedRole,
-					frontendBaseUrl: window.location.origin,
-				});
-				toast.success('Invite updated successfully', { richColors: true });
-			} else {
-				await update({
-					userId: member.id,
-					displayName,
-					role: selectedRole,
-				});
-				toast.success('Member details updated successfully', { richColors: true });
-			}
-			onSuccess();
-			onClose();
-		} catch {
-			toast.error(
-				isInvited ? 'Failed to update invite' : 'Failed to update member details',
-				{ richColors: true },
-			);
-		} finally {
-			setIsSaving(false);
-		}
-	}, [
-		member,
-		isDirty,
-		isInvited,
-		inviteId,
-		displayName,
-		selectedRole,
-		onSuccess,
-		onClose,
-	]);
-
-	const handleDelete = useCallback(async (): Promise<void> => {
-		if (!member) {
-			return;
-		}
-		setIsDeleting(true);
-		try {
-			if (isInvited && inviteId) {
-				await cancelInvite({ id: inviteId });
-				toast.success('Invitation cancelled successfully', { richColors: true });
-			} else {
-				await deleteUser({ userId: member.id });
-				toast.success('Member deleted successfully', { richColors: true });
-			}
-			setShowDeleteConfirm(false);
-			onSuccess();
-			onClose();
-		} catch {
-			toast.error(
-				isInvited ? 'Failed to cancel invitation' : 'Failed to delete member',
-				{ richColors: true },
-			);
-		} finally {
-			setIsDeleting(false);
-		}
-	}, [member, isInvited, inviteId, onSuccess, onClose]);
-
-	const handleGenerateResetLink = useCallback(async (): Promise<void> => {
-		if (!member) {
-			return;
-		}
-		setIsGeneratingLink(true);
-		try {
-			const response = await getResetPasswordToken({ userId: member.id });
-			if (response?.data?.token) {
-				const link = `${window.location.origin}/password-reset?token=${response.data.token}`;
-				setResetLink(link);
-				setHasCopiedResetLink(false);
-				setShowResetLinkDialog(true);
-				onClose();
-			}
-		} catch {
-			toast.error('Failed to generate password reset link', {
-				richColors: true,
-				position: 'top-right',
-			});
-		} finally {
-			setIsGeneratingLink(false);
-		}
-	}, [member, onClose]);
-
-	const handleCopyResetLink = useCallback(async (): Promise<void> => {
-		if (!resetLink) {
-			return;
-		}
-		try {
-			await navigator.clipboard.writeText(resetLink);
-			setHasCopiedResetLink(true);
-			setTimeout(() => setHasCopiedResetLink(false), 2000);
-			toast.success('Reset link copied to clipboard', { richColors: true });
-		} catch {
-			toast.error('Failed to copy link', {
-				richColors: true,
-			});
-		}
-	}, [resetLink]);
-
-	const handleCopyInviteLink = useCallback(async (): Promise<void> => {
-		if (!member?.token) {
-			toast.error('Invite link is not available', {
-				richColors: true,
-				position: 'top-right',
-			});
-			return;
-		}
-		const inviteLink = `${window.location.origin}${ROUTES.SIGN_UP}?token=${member.token}`;
-		try {
-			await navigator.clipboard.writeText(inviteLink);
-			toast.success('Invite link copied to clipboard', {
-				richColors: true,
-				position: 'top-right',
-			});
-		} catch {
-			toast.error('Failed to copy invite link', {
-				richColors: true,
-				position: 'top-right',
-			});
-		}
-	}, [member]);
-
-	const handleClose = useCallback((): void => {
-		setShowDeleteConfirm(false);
-		onClose();
-	}, [onClose]);
-
-	const joinedOnLabel = isInvited ? 'Invited On' : 'Joined On';
-
-	const drawerContent = (
-		<div className="edit-member-drawer__layout">
-			<div className="edit-member-drawer__body">
-				<div className="edit-member-drawer__field">
-					<label className="edit-member-drawer__label" htmlFor="member-name">
-						Name
-					</label>
-					<Input
-						id="member-name"
-						value={displayName}
-						onChange={(e): void => setDisplayName(e.target.value)}
-						className="edit-member-drawer__input"
-						placeholder="Enter name"
-					/>
-				</div>
-
-				<div className="edit-member-drawer__field">
-					<label className="edit-member-drawer__label" htmlFor="member-email">
-						Email Address
-					</label>
-					<div className="edit-member-drawer__input-wrapper edit-member-drawer__input-wrapper--disabled">
-						<span className="edit-member-drawer__email-text">
-							{member?.email || '—'}
-						</span>
-						<LockKeyhole size={16} className="edit-member-drawer__lock-icon" />
-					</div>
-				</div>
-
-				<div className="edit-member-drawer__field">
-					<label className="edit-member-drawer__label" htmlFor="member-role">
-						Roles
-					</label>
-					<Select
-						id="member-role"
-						value={selectedRole}
-						onChange={(role): void => setSelectedRole(role as ROLES)}
-						className="edit-member-drawer__role-select"
-						suffixIcon={<ChevronDown size={14} />}
-						getPopupContainer={(triggerNode): HTMLElement =>
-							(triggerNode?.closest('.edit-member-drawer') as HTMLElement) ||
-							document.body
-						}
-					>
-						<Select.Option value="ADMIN">{formatRoleLabel('ADMIN')}</Select.Option>
-						<Select.Option value="EDITOR">{formatRoleLabel('EDITOR')}</Select.Option>
-						<Select.Option value="VIEWER">{formatRoleLabel('VIEWER')}</Select.Option>
-					</Select>
-				</div>
-
-				<div className="edit-member-drawer__meta">
-					<div className="edit-member-drawer__meta-item">
-						<span className="edit-member-drawer__meta-label">Status</span>
-						{member?.status === 'Active' ? (
-							<Badge color="forest" variant="outline">
-								ACTIVE
-							</Badge>
-						) : (
-							<Badge color="amber" variant="outline">
-								INVITED
-							</Badge>
-						)}
-					</div>
-
-					<div className="edit-member-drawer__meta-item">
-						<span className="edit-member-drawer__meta-label">{joinedOnLabel}</span>
-						<Badge color="vanilla">{formatTimestamp(member?.joinedOn)}</Badge>
-					</div>
-					{!isInvited && (
-						<div className="edit-member-drawer__meta-item">
-							<span className="edit-member-drawer__meta-label">Last Modified</span>
-							<Badge color="vanilla">{formatTimestamp(member?.updatedAt)}</Badge>
-						</div>
-					)}
-				</div>
-			</div>
-
-			<div className="edit-member-drawer__footer">
-				<div className="edit-member-drawer__footer-left">
-					<button
-						type="button"
-						className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--danger"
-						onClick={(): void => setShowDeleteConfirm(true)}
-					>
-						<Trash2 size={12} />
-						{isInvited ? 'Cancel Invite' : 'Delete Member'}
-					</button>
-
-					<div className="edit-member-drawer__footer-divider" />
-
-					{isInvited ? (
-						<button
-							type="button"
-							className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--warning"
-							onClick={handleCopyInviteLink}
-							disabled={!member?.token}
-						>
-							<Link size={12} />
-							Copy Invite Link
-						</button>
-					) : (
-						<button
-							type="button"
-							className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--warning"
-							onClick={handleGenerateResetLink}
-							disabled={isGeneratingLink}
-						>
-							<RefreshCw size={12} />
-							{isGeneratingLink ? 'Generating...' : 'Generate Password Reset Link'}
-						</button>
-					)}
-				</div>
-
-				<div className="edit-member-drawer__footer-right">
-					<Button variant="solid" color="secondary" size="sm" onClick={handleClose}>
-						<X size={14} />
-						Cancel
-					</Button>
-
-					<Button
-						variant="solid"
-						color="primary"
-						size="sm"
-						disabled={!isDirty || isSaving}
-						onClick={handleSave}
-					>
-						{isSaving ? 'Saving...' : 'Save Member Details'}
-					</Button>
-				</div>
-			</div>
-		</div>
-	);
-
-	const deleteDialogTitle = isInvited ? 'Cancel Invitation' : 'Delete Member';
-	const deleteDialogBody = isInvited
-		? `Are you sure you want to cancel the invitation for ${member?.email}? They will no longer be able to join the workspace using this invite.`
-		: `Are you sure you want to delete ${
-				member?.name || member?.email
-		  }? This will permanently remove their access to the workspace.`;
-	const deleteConfirmLabel = isInvited ? 'Cancel Invite' : 'Delete Member';
-
-	return (
-		<>
-			<DrawerWrapper
-				open={open}
-				onOpenChange={(isOpen): void => {
-					if (!isOpen) {
-						handleClose();
-					}
-				}}
-				direction="right"
-				type="panel"
-				showCloseButton
-				showOverlay={false}
-				allowOutsideClick
-				header={{ title: 'Member Details' }}
-				content={drawerContent}
-				className="edit-member-drawer"
-			/>
-
-			<DialogWrapper
-				open={showResetLinkDialog}
-				onOpenChange={(isOpen): void => {
-					if (!isOpen) {
-						setShowResetLinkDialog(false);
-					}
-				}}
-				title="Password Reset Link"
-				showCloseButton
-				width="base"
-				className="reset-link-dialog"
-			>
-				<div className="reset-link-dialog__content">
-					<p className="reset-link-dialog__description">
-						This creates a one-time link the team member can use to set a new password
-						for their SigNoz account.
-					</p>
-					<div className="reset-link-dialog__link-row">
-						<div className="reset-link-dialog__link-text-wrap">
-							<span className="reset-link-dialog__link-text">{resetLink}</span>
-						</div>
-						<Button
-							variant="outlined"
-							color="secondary"
-							size="sm"
-							onClick={handleCopyResetLink}
-							prefixIcon={
-								hasCopiedResetLink ? <Check size={12} /> : <Copy size={12} />
-							}
-							className="reset-link-dialog__copy-btn"
-						>
-							{hasCopiedResetLink ? 'Copied!' : 'Copy'}
-						</Button>
-					</div>
-				</div>
-			</DialogWrapper>
-
-			<DialogWrapper
-				open={showDeleteConfirm}
-				onOpenChange={(isOpen): void => {
-					if (!isOpen) {
-						setShowDeleteConfirm(false);
-					}
-				}}
-				title={deleteDialogTitle}
-				width="narrow"
-				className="alert-dialog"
-				showCloseButton={false}
-				disableOutsideClick={false}
-			>
-				<p className="edit-member-drawer__delete-body">{deleteDialogBody}</p>
-
-				<DialogFooter className="edit-member-drawer__delete-footer">
-					<Button
-						variant="solid"
-						color="secondary"
-						size="sm"
-						onClick={(): void => setShowDeleteConfirm(false)}
-					>
-						<X size={12} />
-						Cancel
-					</Button>
-					<Button
-						variant="solid"
-						color="destructive"
-						size="sm"
-						disabled={isDeleting}
-						onClick={handleDelete}
-					>
-						<Trash2 size={12} />
-						{isDeleting ? 'Processing...' : deleteConfirmLabel}
-					</Button>
-				</DialogFooter>
-			</DialogWrapper>
-		</>
-	);
-}
-
-export default EditMemberDrawer;

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/InviteMembersModal/InviteMembersModal.styles.scss

@@ -1,420 +0,0 @@
-.invite-members-modal {
-	display: flex !important;
-	flex-direction: column !important;
-	max-width: 700px !important;
-	padding: 0 !important;
-	gap: 0 !important;
-	background: #121317 !important;
-	border: 1px solid #161922 !important;
-	border-radius: 4px !important;
-	box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.04) !important;
-
-	[data-slot='dialog-header'] {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 16px;
-		border-bottom: 1px solid #161922;
-		margin: 0;
-		flex-shrink: 0;
-		background: transparent;
-	}
-
-	[data-slot='dialog-title'] {
-		font-family: Inter, sans-serif;
-		font-size: 13px;
-		font-weight: 400;
-		line-height: 1;
-		letter-spacing: -0.065px;
-		color: #ffffff;
-		margin: 0;
-	}
-
-	// Close button rendered by DialogWrapper
-	[data-slot='dialog-close'] {
-		color: #c0c1c3;
-		opacity: 0.7;
-		transition: opacity 0.15s;
-		background: transparent;
-		border: none;
-
-		&:hover {
-			opacity: 1;
-		}
-	}
-}
-
-// ─── Content area ─────────────────────────────────────────────────────────────
-.invite-members-modal__content {
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-	padding: 16px;
-	flex: 1;
-}
-
-// ─── Table Structure ──────────────────────────────────────────────────────────
-.invite-members-modal__table {
-	width: 100%;
-	min-height: 0;
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-}
-
-.invite-members-modal__table-header {
-	display: flex;
-	gap: 16px;
-	align-items: center;
-	flex-shrink: 0;
-	height: auto;
-	width: 100%;
-	justify-content: flex-end;
-
-	.email-header {
-		flex: 0 0 220px;
-		width: 220px;
-	}
-
-	.role-header {
-		flex: 1 0 0;
-		min-width: 0;
-	}
-
-	.action-header {
-		flex: 0 0 32px;
-		width: 32px;
-	}
-
-	.table-header-cell {
-		color: var(--l1-foreground);
-		font-family: Inter, sans-serif;
-		font-size: 13px;
-		font-style: normal;
-		font-weight: 600;
-		line-height: 100%;
-		letter-spacing: -0.065px;
-	}
-}
-
-.invite-members-modal__container {
-	display: flex;
-	flex-direction: column;
-	gap: 16px !important;
-	width: 100%;
-	flex: 0 1 auto;
-	min-height: 0;
-	overflow-x: hidden;
-}
-
-// ─── Rows & Cells ─────────────────────────────────────────────────────────────
-.team-member-row {
-	display: flex;
-	width: 100%;
-	gap: 16px;
-
-	> div.email-cell {
-		flex: 0 0 220px;
-		width: 220px;
-	}
-
-	> div.role-cell {
-		flex: 1 0 0;
-		min-width: 0;
-	}
-
-	> div.action-cell {
-		flex: 0 0 32px;
-		width: 32px;
-	}
-}
-
-.team-member-cell {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-
-	&.action-cell {
-		display: flex;
-		align-items: flex-end;
-		justify-content: center;
-		height: 32px;
-	}
-}
-
-// ─── Form Elements ────────────────────────────────────────────────────────────
-.team-member-email-input {
-	width: 100%;
-	height: 32px !important;
-	border-radius: 2px;
-	background: var(--l3-background);
-	border: 1px solid var(--l3-border);
-	color: var(--l1-foreground);
-	font-family: Inter, sans-serif;
-	font-size: 13px;
-	font-weight: 400;
-	line-height: 1;
-	letter-spacing: -0.065px;
-	padding: 6px 8px;
-	box-sizing: border-box;
-
-	&::placeholder {
-		color: var(--l3-foreground);
-	}
-
-	&:hover {
-		border-color: var(--l3-border);
-	}
-
-	&:focus {
-		border-color: var(--bg-robin-500);
-		box-shadow: none;
-	}
-}
-
-.team-member-role-select {
-	width: 100%;
-
-	.ant-select-selector {
-		height: 32px !important;
-		border-radius: 2px !important;
-		background: var(--l3-background) !important;
-		border: 1px solid var(--l3-border) !important;
-		color: var(--l1-foreground) !important;
-		font-family: Inter, sans-serif !important;
-		font-size: 13px !important;
-		font-weight: 400 !important;
-		line-height: 1 !important;
-		letter-spacing: -0.065px !important;
-		padding: 0 8px !important;
-		box-sizing: border-box !important;
-
-		.ant-select-selection-placeholder {
-			color: var(--l3-foreground) !important;
-		}
-
-		.ant-select-selection-item {
-			color: var(--l1-foreground) !important;
-			line-height: 30px !important;
-		}
-	}
-
-	.ant-select-arrow {
-		color: var(--l3-foreground) !important;
-	}
-
-	&.ant-select-focused .ant-select-selector {
-		border-color: var(--bg-robin-500) !important;
-	}
-
-	&:hover .ant-select-selector {
-		border-color: var(--bg-robin-500) !important;
-	}
-}
-
-// ─── Actions ──────────────────────────────────────────────────────────────────
-.remove-team-member-button {
-	display: flex !important;
-	align-items: center !important;
-	justify-content: center !important;
-	width: 32px !important;
-	height: 32px !important;
-	min-width: 32px !important;
-	border: none !important;
-	border-radius: 2px !important;
-	background: transparent !important;
-	color: #e5484d !important;
-	opacity: 0.6 !important;
-	cursor: pointer;
-	padding: 0 !important;
-	transition: background-color 0.2s, opacity 0.2s;
-	box-shadow: none !important;
-
-	svg {
-		color: #e5484d !important;
-		width: 14px !important;
-		height: 14px !important;
-	}
-
-	&:hover {
-		background: rgba(229, 72, 77, 0.1) !important;
-		opacity: 0.9 !important;
-		color: #e5484d !important;
-
-		svg {
-			color: #e5484d !important;
-		}
-	}
-
-	&:active {
-		opacity: 0.7 !important;
-		background: rgba(229, 72, 77, 0.15) !important;
-	}
-
-	&:focus-visible {
-		outline: 2px solid var(--bg-robin-500);
-		outline-offset: 2px;
-	}
-}
-
-// ─── Validation ───────────────────────────────────────────────────────────────
-.email-error-message {
-	font-size: 12px;
-	font-weight: 400;
-	line-height: 16px;
-	margin-top: 4px;
-	width: 100%;
-	display: block;
-	color: var(--bg-cherry-500);
-}
-
-.invite-team-members-error-callout {
-	background: rgba(229, 72, 77, 0.1);
-	border: 1px solid rgba(229, 72, 77, 0.2);
-	border-radius: 4px;
-	animation: horizontal-shaking 300ms ease-out;
-}
-
-@keyframes horizontal-shaking {
-	0% {
-		transform: translateX(0);
-	}
-	25% {
-		transform: translateX(5px);
-	}
-	50% {
-		transform: translateX(-5px);
-	}
-	75% {
-		transform: translateX(5px);
-	}
-	100% {
-		transform: translateX(0);
-	}
-}
-
-// ─── Footer ───────────────────────────────────────────────────────────────────
-.invite-members-modal__footer {
-	display: flex !important;
-	flex-direction: row !important;
-	align-items: center !important;
-	justify-content: space-between !important;
-	padding: 0 16px !important;
-	height: 64px !important;
-	min-height: 64px !important;
-	border-top: 1px solid #161922 !important;
-	gap: 0 !important;
-	flex-shrink: 0;
-}
-
-.invite-members-modal__footer-right {
-	display: flex;
-	align-items: center;
-	gap: 12px;
-}
-
-.add-another-member-button {
-	&:hover {
-		border-color: var(--bg-robin-500) !important;
-		border-style: dashed !important;
-		color: var(--l1-foreground);
-
-		svg,
-		[class*='icon'] {
-			color: var(--l1-foreground) !important;
-		}
-	}
-}
-
-// ─── Light mode overrides ─────────────────────────────────────────────────────
-.lightMode {
-	.invite-members-modal {
-		background: #ffffff !important;
-		border-color: #e9e9e9 !important;
-
-		[data-slot='dialog-header'] {
-			border-bottom-color: #e9e9e9;
-		}
-
-		[data-slot='dialog-title'] {
-			color: #121317;
-		}
-	}
-
-	.invite-members-modal__table-header {
-		.table-header-cell {
-			color: var(--l3-foreground);
-		}
-	}
-
-	.team-member-email-input {
-		background: var(--bg-vanilla-200) !important;
-		border-color: var(--bg-vanilla-300) !important;
-		color: var(--text-ink-500) !important;
-
-		&::placeholder {
-			color: var(--text-neutral-light-200) !important;
-		}
-
-		&:hover {
-			border-color: var(--bg-vanilla-300) !important;
-		}
-
-		&:focus {
-			border-color: var(--bg-robin-500) !important;
-		}
-	}
-
-	.team-member-role-select {
-		.ant-select-selector {
-			background: var(--l3-background) !important;
-			border: 1px solid var(--l3-border) !important;
-			color: var(--l1-foreground) !important;
-
-			.ant-select-selection-placeholder {
-				color: var(--l3-foreground) !important;
-			}
-			.ant-select-selection-item {
-				color: var(--l1-foreground) !important;
-			}
-		}
-		.ant-select-arrow {
-			color: var(--l3-foreground) !important;
-		}
-	}
-
-	.remove-team-member-button {
-		color: var(--bg-cherry-500) !important;
-
-		svg {
-			color: var(--bg-cherry-500) !important;
-		}
-
-		&:hover {
-			background: rgba(245, 101, 101, 0.1) !important;
-		}
-	}
-
-	.add-another-member-button {
-		border-color: var(--text-vanilla-300) !important;
-		color: var(--l3-foreground);
-
-		svg {
-			color: var(--l3-foreground) !important;
-		}
-
-		&:hover {
-			border-color: var(--bg-robin-500) !important;
-			color: var(--l1-foreground);
-			background: rgba(78, 116, 248, 0.1) !important;
-
-			svg {
-				color: var(--l1-foreground) !important;
-			}
-		}
-	}
-
-	.invite-members-modal__footer {
-		border-top-color: #e9e9e9 !important;
-	}
-}

frontend/src/components/InviteMembersModal/InviteMembersModal.tsx

@@ -1,335 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Button } from '@signozhq/button';
-import { Callout } from '@signozhq/callout';
-import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
-import { Input } from '@signozhq/input';
-import { toast } from '@signozhq/sonner';
-import { Select, Typography } from 'antd';
-import sendInvite from 'api/v1/invite/create';
-import { cloneDeep, debounce } from 'lodash-es';
-import { ChevronDown, CircleAlert, Plus, Trash2, X } from 'lucide-react';
-import { ROLES } from 'types/roles';
-import { v4 as uuid } from 'uuid';
-
-import './InviteMembersModal.styles.scss';
-
-interface InviteRow {
-	id: string;
-	email: string;
-	role: ROLES | '';
-}
-
-export interface InviteMembersModalProps {
-	open: boolean;
-	onClose: () => void;
-	onSuccess?: () => void;
-}
-
-const EMPTY_ROW = (): InviteRow => ({ id: uuid(), email: '', role: '' });
-
-const isRowTouched = (row: InviteRow): boolean =>
-	row.email.trim() !== '' || Boolean(row.role && row.role.trim() !== '');
-
-function InviteMembersModal({
-	open,
-	onClose,
-	onSuccess,
-}: InviteMembersModalProps): JSX.Element {
-	const [rows, setRows] = useState<InviteRow[]>([]);
-	const [isSubmitting, setIsSubmitting] = useState(false);
-	const [emailValidity, setEmailValidity] = useState<Record<string, boolean>>(
-		{},
-	);
-	const [hasInvalidEmails, setHasInvalidEmails] = useState<boolean>(false);
-	const [hasInvalidRoles, setHasInvalidRoles] = useState<boolean>(false);
-
-	const resetAndClose = useCallback((): void => {
-		setRows([EMPTY_ROW(), EMPTY_ROW(), EMPTY_ROW()]);
-		setEmailValidity({});
-		setHasInvalidEmails(false);
-		setHasInvalidRoles(false);
-		onClose();
-	}, [onClose]);
-
-	useEffect(() => {
-		if (open) {
-			setRows([EMPTY_ROW(), EMPTY_ROW(), EMPTY_ROW()]);
-		}
-	}, [open]);
-
-	const getValidationErrorMessage = (): string => {
-		if (hasInvalidEmails && hasInvalidRoles) {
-			return 'Please enter valid emails and select roles for team members';
-		}
-		if (hasInvalidEmails) {
-			return 'Please enter valid emails for team members';
-		}
-		return 'Please select roles for team members';
-	};
-
-	const validateAllUsers = useCallback((): boolean => {
-		let isValid = true;
-		let hasEmailErrors = false;
-		let hasRoleErrors = false;
-
-		const updatedEmailValidity: Record<string, boolean> = {};
-
-		const touchedRows = rows.filter(isRowTouched);
-
-		touchedRows.forEach((row) => {
-			const emailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(row.email);
-			const roleValid = Boolean(row.role && row.role.trim() !== '');
-
-			if (!emailValid || !row.email) {
-				isValid = false;
-				hasEmailErrors = true;
-			}
-			if (!roleValid) {
-				isValid = false;
-				hasRoleErrors = true;
-			}
-
-			if (row.id) {
-				updatedEmailValidity[row.id] = emailValid;
-			}
-		});
-
-		setEmailValidity(updatedEmailValidity);
-		setHasInvalidEmails(hasEmailErrors);
-		setHasInvalidRoles(hasRoleErrors);
-
-		return isValid;
-	}, [rows]);
-
-	const debouncedValidateEmail = useMemo(
-		() =>
-			debounce((email: string, rowId: string) => {
-				const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
-				setEmailValidity((prev) => ({ ...prev, [rowId]: isValid }));
-			}, 500),
-		[],
-	);
-
-	const updateEmail = (id: string, email: string): void => {
-		const updatedRows = cloneDeep(rows);
-		const rowToUpdate = updatedRows.find((r) => r.id === id);
-		if (rowToUpdate) {
-			rowToUpdate.email = email;
-			setRows(updatedRows);
-
-			if (hasInvalidEmails) {
-				setHasInvalidEmails(false);
-			}
-			if (emailValidity[id] === false) {
-				setEmailValidity((prev) => ({ ...prev, [id]: true }));
-			}
-
-			debouncedValidateEmail(email, id);
-		}
-	};
-
-	const updateRole = (id: string, role: ROLES): void => {
-		const updatedRows = cloneDeep(rows);
-		const rowToUpdate = updatedRows.find((r) => r.id === id);
-		if (rowToUpdate) {
-			rowToUpdate.role = role;
-			setRows(updatedRows);
-
-			if (hasInvalidRoles) {
-				setHasInvalidRoles(false);
-			}
-		}
-	};
-
-	const addRow = (): void => {
-		setRows((prev) => [...prev, EMPTY_ROW()]);
-	};
-
-	const removeRow = (id: string): void => {
-		setRows((prev) => prev.filter((r) => r.id !== id));
-	};
-
-	const handleSubmit = useCallback(async (): Promise<void> => {
-		if (!validateAllUsers()) {
-			return;
-		}
-
-		const touchedRows = rows.filter(isRowTouched);
-		if (touchedRows.length === 0) {
-			return;
-		}
-
-		setIsSubmitting(true);
-		let hasError = false;
-
-		await Promise.all(
-			touchedRows.map(
-				async (row): Promise<void> => {
-					try {
-						await sendInvite({
-							email: row.email.trim(),
-							name: '',
-							role: row.role as ROLES,
-							frontendBaseUrl: window.location.origin,
-						});
-					} catch (err: unknown) {
-						hasError = true;
-						const apiErr = err as {
-							response?: { status: number };
-							getErrorMessage?: () => string;
-						};
-						if (apiErr?.response?.status === 409) {
-							toast.error(`${row.email} is already a member`, { richColors: true });
-						} else {
-							const errorMessage = apiErr?.getErrorMessage?.() ?? 'An error occurred';
-							toast.error(`Failed to invite ${row.email}: ${errorMessage}`, {
-								richColors: true,
-							});
-						}
-					}
-				},
-			),
-		);
-
-		setIsSubmitting(false);
-
-		if (!hasError) {
-			toast.success('Invites sent successfully', { richColors: true });
-			resetAndClose();
-			onSuccess?.();
-		} else {
-			onSuccess?.();
-		}
-	}, [rows, onSuccess, resetAndClose, validateAllUsers]);
-
-	const touchedRows = rows.filter(isRowTouched);
-	const isSubmitDisabled = isSubmitting || touchedRows.length === 0;
-
-	return (
-		<DialogWrapper
-			title="Invite Team Members"
-			open={open}
-			onOpenChange={(isOpen): void => {
-				if (!isOpen) {
-					resetAndClose();
-				}
-			}}
-			showCloseButton
-			width="wide"
-			className="invite-members-modal"
-			disableOutsideClick
-		>
-			<div className="invite-members-modal__content">
-				<div className="invite-members-modal__table">
-					<div className="invite-members-modal__table-header">
-						<div className="table-header-cell email-header">Email address</div>
-						<div className="table-header-cell role-header">Roles</div>
-						<div className="table-header-cell action-header" />
-					</div>
-					<div className="invite-members-modal__container">
-						{rows.map(
-							(row): JSX.Element => (
-								<div key={row.id} className="team-member-row">
-									<div className="team-member-cell email-cell">
-										<Input
-											type="email"
-											placeholder="john@signoz.io"
-											value={row.email}
-											onChange={(e): void => updateEmail(row.id, e.target.value)}
-											className="team-member-email-input"
-										/>
-										{emailValidity[row.id] === false && row.email.trim() !== '' && (
-											<Typography.Text className="email-error-message">
-												Invalid email address
-											</Typography.Text>
-										)}
-									</div>
-									<div className="team-member-cell role-cell">
-										<Select
-											value={row.role || undefined}
-											onChange={(role): void => updateRole(row.id, role as ROLES)}
-											className="team-member-role-select"
-											placeholder="Select roles"
-											suffixIcon={<ChevronDown size={14} />}
-											getPopupContainer={(triggerNode): HTMLElement =>
-												(triggerNode?.closest('.invite-members-modal') as HTMLElement) ||
-												document.body
-											}
-										>
-											<Select.Option value="VIEWER">Viewer</Select.Option>
-											<Select.Option value="EDITOR">Editor</Select.Option>
-											<Select.Option value="ADMIN">Admin</Select.Option>
-										</Select>
-									</div>
-									<div className="team-member-cell action-cell">
-										{rows.length > 1 && (
-											<Button
-												variant="ghost"
-												color="secondary"
-												className="remove-team-member-button"
-												onClick={(): void => removeRow(row.id)}
-												aria-label="Remove row"
-											>
-												<Trash2 size={12} />
-											</Button>
-										)}
-									</div>
-								</div>
-							),
-						)}
-					</div>
-				</div>
-
-				{(hasInvalidEmails || hasInvalidRoles) && (
-					<Callout
-						type="error"
-						size="small"
-						showIcon
-						icon={<CircleAlert size={12} />}
-						className="invite-team-members-error-callout"
-						description={getValidationErrorMessage()}
-					/>
-				)}
-			</div>
-
-			{/* Footer */}
-			<DialogFooter className="invite-members-modal__footer">
-				<Button
-					variant="dashed"
-					color="secondary"
-					size="sm"
-					className="add-another-member-button"
-					prefixIcon={<Plus size={12} />}
-					onClick={addRow}
-				>
-					Add another
-				</Button>
-
-				<div className="invite-members-modal__footer-right">
-					<Button
-						type="button"
-						variant="solid"
-						color="secondary"
-						size="sm"
-						onClick={resetAndClose}
-					>
-						<X size={12} />
-						Cancel
-					</Button>
-
-					<Button
-						variant="solid"
-						color="primary"
-						size="sm"
-						onClick={handleSubmit}
-						disabled={isSubmitDisabled}
-					>
-						{isSubmitting ? 'Inviting...' : 'Invite Team Members'}
-					</Button>
-				</div>
-			</DialogFooter>
-		</DialogWrapper>
-	);
-}
-
-export default InviteMembersModal;

frontend/src/components/MembersTable/MembersTable.styles.scss

@@ -1,250 +0,0 @@
-// ─── Table wrapper ────────────────────────────────────────────────────────────
-.members-table-wrapper {
-	display: flex;
-	flex-direction: column;
-	flex: 1;
-	min-height: 0;
-	overflow: hidden;
-	border-radius: 4px;
-}
-
-// ─── Ant Design Table overrides ───────────────────────────────────────────────
-.members-table {
-	// Flatten Ant Design chrome
-	.ant-table {
-		background: transparent;
-		font-size: 14px;
-	}
-
-	.ant-table-container {
-		border-radius: 0 !important;
-		border: none !important;
-	}
-
-	// ── Header ──────────────────────────────────────────────────────────────
-	.ant-table-thead {
-		> tr > th,
-		> tr > td {
-			background: var(--bg-ink-500, #0b0c0e);
-			font-family: Inter, sans-serif;
-			font-size: 11px;
-			font-weight: 600;
-			letter-spacing: 0.44px;
-			text-transform: uppercase;
-			color: var(--vanilla-400, #c0c1c3);
-			line-height: 18px;
-			padding: 8px 16px;
-			border-bottom: none !important;
-			border-top: none !important;
-
-			// Remove the column divider pseudo-element
-			&::before {
-				display: none !important;
-			}
-
-			// Sorter icon color
-			.ant-table-column-sorter {
-				color: var(--vanilla-400, #c0c1c3);
-				opacity: 0.6;
-			}
-
-			.ant-table-column-sorter-up.active,
-			.ant-table-column-sorter-down.active {
-				color: var(--vanilla-100, #ffffff);
-				opacity: 1;
-			}
-		}
-	}
-
-	// ── Body rows ────────────────────────────────────────────────────────────
-	.ant-table-tbody {
-		> tr > td {
-			border-bottom: none !important;
-			padding: 8px 16px;
-			background: transparent;
-			transition: none;
-		}
-
-		// Even-indexed rows (0, 2, 4 …) get a subtle tint — matches Figma
-		> tr.members-table-row--tinted > td {
-			background: rgba(171, 189, 255, 0.02);
-		}
-
-		// Hover — slightly brighter tint
-		> tr:hover > td {
-			background: rgba(171, 189, 255, 0.04) !important;
-		}
-	}
-
-	// Remove outer table border
-	.ant-table-wrapper,
-	.ant-table-container,
-	.ant-spin-nested-loading,
-	.ant-spin-container {
-		border: none !important;
-		box-shadow: none !important;
-	}
-
-	// ── Status cell — right-align badge and add 4px right padding ─────────
-	.member-status-cell {
-		padding-right: 4px !important;
-	}
-}
-
-// ─── Name / Email cell ────────────────────────────────────────────────────────
-.member-name-email-cell {
-	display: flex;
-	align-items: center;
-	gap: 4px;
-	height: 22px;
-	overflow: hidden;
-
-	.member-name {
-		font-size: 14px;
-		font-weight: 500;
-		color: var(--vanilla-400, #c0c1c3);
-		line-height: 20px;
-		letter-spacing: -0.07px;
-		white-space: nowrap;
-		flex-shrink: 0;
-	}
-
-	.member-email {
-		font-size: 14px;
-		font-weight: 400;
-		color: var(--slate-50, #62687c);
-		line-height: 20px;
-		letter-spacing: -0.07px;
-		flex: 1 0 0;
-		min-width: 0;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-}
-
-// ─── Joined On ────────────────────────────────────────────────────────────────
-.member-joined-date {
-	font-size: 14px;
-	font-weight: 400;
-	color: var(--vanilla-400, #c0c1c3);
-	line-height: 18px;
-	letter-spacing: -0.07px;
-	white-space: nowrap;
-}
-
-.member-joined-dash {
-	font-size: 14px;
-	color: var(--slate-50, #62687c);
-	line-height: 18px;
-	letter-spacing: -0.07px;
-}
-
-// ─── Empty state ─────────────────────────────────────────────────────────────
-.members-empty-state {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	padding: 48px 16px;
-	gap: 8px;
-
-	&__emoji {
-		font-size: 24px;
-		line-height: 1;
-	}
-
-	&__text {
-		font-size: 14px;
-		font-weight: 400;
-		color: var(--vanilla-400, #c0c1c3);
-		margin: 0;
-		line-height: 20px;
-
-		strong {
-			font-weight: 500;
-			color: var(--vanilla-100, #ffffff);
-		}
-	}
-}
-
-// ─── Pagination ───────────────────────────────────────────────────────────────
-.members-table-pagination {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	padding: 8px 16px;
-
-	.ant-pagination-total-text {
-		margin-right: auto;
-	}
-
-	.members-pagination-range {
-		font-family: Inter, sans-serif;
-		font-size: 12px;
-		color: var(--vanilla-400, #c0c1c3);
-	}
-
-	.members-pagination-total {
-		font-family: Inter, sans-serif;
-		font-size: 12px;
-		color: var(--vanilla-400, #c0c1c3);
-		opacity: 0.5;
-	}
-}
-
-// ─── Light mode overrides ─────────────────────────────────────────────────────
-.lightMode {
-	.members-table {
-		.ant-table-thead {
-			> tr > th,
-			> tr > td {
-				background: #f5f5f7;
-				color: #5a5f6e;
-			}
-		}
-
-		.ant-table-tbody {
-			> tr.members-table-row--tinted > td {
-				background: rgba(0, 0, 0, 0.015);
-			}
-
-			> tr:hover > td {
-				background: rgba(0, 0, 0, 0.03) !important;
-			}
-		}
-	}
-
-	.member-name-email-cell {
-		.member-name {
-			color: #1d1f29;
-		}
-
-		.member-email {
-			color: #5a5f6e;
-		}
-	}
-
-	.member-joined-dash {
-		color: #5a5f6e;
-	}
-
-	.member-joined-date {
-		color: #1d1f29;
-	}
-
-	.members-empty-state {
-		&__text {
-			color: #5a5f6e;
-
-			strong {
-				color: #1d1f29;
-			}
-		}
-	}
-
-	.members-pagination-range,
-	.members-pagination-total {
-		color: #5a5f6e;
-	}
-}

frontend/src/components/MembersTable/MembersTable.tsx

@@ -1,232 +0,0 @@
-import type React from 'react';
-import { Badge } from '@signozhq/badge';
-import { Pagination, Table, Tooltip } from 'antd';
-import type { ColumnsType, SorterResult } from 'antd/es/table/interface';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { useTimezone } from 'providers/Timezone';
-import { ROLES } from 'types/roles';
-
-import './MembersTable.styles.scss';
-
-export interface MemberRow {
-	id: string;
-	name: string;
-	email: string;
-	role: ROLES;
-	status: 'Active' | 'Invited';
-	joinedOn: string | null;
-	updatedAt?: string | null;
-	token?: string | null;
-}
-
-interface MembersTableProps {
-	data: MemberRow[];
-	loading: boolean;
-	total: number;
-	currentPage: number;
-	pageSize: number;
-	searchQuery: string;
-	onPageChange: (page: number) => void;
-	onRowClick?: (member: MemberRow) => void;
-	onSortChange?: (
-		sorter: SorterResult<MemberRow> | SorterResult<MemberRow>[],
-	) => void;
-}
-
-function formatRoleLabel(role: string): string {
-	return role.charAt(0).toUpperCase() + role.slice(1).toLowerCase();
-}
-
-function NameEmailCell({
-	name,
-	email,
-}: {
-	name: string;
-	email: string;
-}): JSX.Element {
-	return (
-		<div className="member-name-email-cell">
-			{name && (
-				<span className="member-name" title={name}>
-					{name}
-				</span>
-			)}
-			<Tooltip title={email} overlayClassName="member-tooltip">
-				<span className="member-email">{email}</span>
-			</Tooltip>
-		</div>
-	);
-}
-
-function StatusBadge({ status }: { status: MemberRow['status'] }): JSX.Element {
-	if (status === 'Active') {
-		return (
-			<Badge color="forest" variant="outline">
-				ACTIVE
-			</Badge>
-		);
-	}
-	return (
-		<Badge color="amber" variant="outline">
-			INVITED
-		</Badge>
-	);
-}
-
-function MembersEmptyState({
-	searchQuery,
-}: {
-	searchQuery: string;
-}): JSX.Element {
-	return (
-		<div className="members-empty-state">
-			<span className="members-empty-state__emoji">🧐</span>
-			{searchQuery ? (
-				<p className="members-empty-state__text">
-					No results for <strong>{searchQuery}</strong>
-				</p>
-			) : (
-				<p className="members-empty-state__text">No members found</p>
-			)}
-		</div>
-	);
-}
-
-function MembersTable({
-	data,
-	loading,
-	total,
-	currentPage,
-	pageSize,
-	searchQuery,
-	onPageChange,
-	onRowClick,
-	onSortChange,
-}: MembersTableProps): JSX.Element {
-	const { formatTimezoneAdjustedTimestamp } = useTimezone();
-
-	const formatJoinedOn = (date: string | null): string => {
-		if (!date) {
-			return '—';
-		}
-		const d = new Date(date);
-		if (Number.isNaN(d.getTime())) {
-			return '—';
-		}
-		return formatTimezoneAdjustedTimestamp(date, DATE_TIME_FORMATS.DASH_DATETIME);
-	};
-
-	const columns: ColumnsType<MemberRow> = [
-		{
-			title: 'Name / Email',
-			dataIndex: 'name',
-			key: 'name',
-			render: (_, record): JSX.Element => (
-				<NameEmailCell name={record.name} email={record.email} />
-			),
-		},
-		{
-			title: 'Roles',
-			dataIndex: 'role',
-			key: 'role',
-			width: 180,
-			render: (role: ROLES): JSX.Element => (
-				<Badge color="vanilla">{formatRoleLabel(role)}</Badge>
-			),
-		},
-
-		{
-			title: 'Status',
-			dataIndex: 'status',
-			key: 'status',
-			width: 100,
-			align: 'right' as const,
-			className: 'member-status-cell',
-			sorter: (a, b): number => a.status.localeCompare(b.status),
-			render: (status: MemberRow['status']): JSX.Element => (
-				<StatusBadge status={status} />
-			),
-		},
-		{
-			title: 'Joined On',
-			dataIndex: 'joinedOn',
-			key: 'joinedOn',
-			width: 250,
-			align: 'right' as const,
-			sorter: (a, b): number => {
-				if (!a.joinedOn && !b.joinedOn) {
-					return 0;
-				}
-				if (!a.joinedOn) {
-					return 1;
-				}
-				if (!b.joinedOn) {
-					return -1;
-				}
-				return new Date(a.joinedOn).getTime() - new Date(b.joinedOn).getTime();
-			},
-			render: (joinedOn: string | null): JSX.Element => {
-				const formatted = formatJoinedOn(joinedOn);
-				const isDash = formatted === '—';
-				return (
-					<span className={isDash ? 'member-joined-dash' : 'member-joined-date'}>
-						{formatted}
-					</span>
-				);
-			},
-		},
-	];
-
-	const showPaginationTotal = (_total: number, range: number[]): JSX.Element => (
-		<>
-			<span className="members-pagination-range">
-				{range[0]} &#8212; {range[1]}
-			</span>
-			<span className="members-pagination-total"> of {_total}</span>
-		</>
-	);
-
-	return (
-		<div className="members-table-wrapper">
-			<Table<MemberRow>
-				columns={columns}
-				dataSource={data}
-				rowKey="id"
-				loading={loading}
-				pagination={false}
-				rowClassName={(_, index): string =>
-					index % 2 === 0 ? 'members-table-row--tinted' : ''
-				}
-				onRow={(record): React.HTMLAttributes<HTMLElement> => ({
-					onClick: (): void => onRowClick?.(record),
-					style: onRowClick ? { cursor: 'pointer' } : undefined,
-				})}
-				onChange={(_, __, sorter): void => {
-					if (onSortChange) {
-						onSortChange(
-							sorter as SorterResult<MemberRow> | SorterResult<MemberRow>[],
-						);
-					}
-				}}
-				showSorterTooltip={false}
-				locale={{
-					emptyText: <MembersEmptyState searchQuery={searchQuery} />,
-				}}
-				className="members-table"
-			/>
-			{total > pageSize && (
-				<Pagination
-					current={currentPage}
-					pageSize={pageSize}
-					total={total}
-					showTotal={showPaginationTotal}
-					showSizeChanger={false}
-					onChange={onPageChange}
-					className="members-table-pagination"
-				/>
-			)}
-		</div>
-	);
-}
-
-export default MembersTable;

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/components/QueryBuilderV2/QueryBuilderV2.styles.scss

@@ -60,11 +60,30 @@
 			gap: 8px;
 
 			margin-left: 108px;
+			position: relative;
+
+			/* Vertical dashed line connecting query elements */
+			&::after {
+				content: '';
+				position: absolute;
+				left: -28px;
+				top: 0;
+				bottom: 0;
+				width: 1px;
+				background: repeating-linear-gradient(
+					to bottom,
+					#1d212d,
+					#1d212d 4px,
+					transparent 4px,
+					transparent 8px
+				);
+			}
 
 			.code-mirror-where-clause,
 			.query-aggregation-container,
 			.query-add-ons,
-			.metrics-aggregation-section-content {
+			.metrics-aggregation-section-content,
+			.metrics-container {
 				position: relative;
 
 				&::before {
@@ -102,6 +121,10 @@
 			.qb-elements-container {
 				margin-left: 0px;
 
+				&::after {
+					display: none;
+				}
+
 				.code-mirror-where-clause,
 				.query-aggregation-container,
 				.query-add-ons,
@@ -333,28 +356,7 @@
 				text-transform: uppercase;
 
 				&::before {
-					content: '';
-					height: 120px;
-					content: '';
-					position: absolute;
-					left: 0;
-					top: 31px;
-					bottom: 0;
-					width: 1px;
-					background: repeating-linear-gradient(
-						to bottom,
-						#1d212d,
-						#1d212d 4px,
-						transparent 4px,
-						transparent 8px
-					);
-					left: 15px;
-				}
-
-				&.has-trace-operator {
-					&::before {
-						height: 0px;
-					}
+					display: none;
 				}
 			}
 
@@ -462,10 +464,21 @@
 
 		.qb-content-section {
 			.qb-elements-container {
+				&::after {
+					background: repeating-linear-gradient(
+						to bottom,
+						var(--bg-vanilla-300),
+						var(--bg-vanilla-300) 4px,
+						transparent 4px,
+						transparent 8px
+					);
+				}
+
 				.code-mirror-where-clause,
 				.query-aggregation-container,
 				.query-add-ons,
-				.metrics-aggregation-section-content {
+				.metrics-aggregation-section-content,
+				.metrics-container {
 					&::before {
 						border-left: 6px dotted var(--bg-vanilla-300);
 					}
@@ -529,18 +542,6 @@
 
 		.qb-entity-options {
 			.options {
-				.query-name {
-					&::before {
-						background: repeating-linear-gradient(
-							to bottom,
-							var(--bg-vanilla-300),
-							var(--bg-vanilla-300) 4px,
-							transparent 4px,
-							transparent 8px
-						);
-					}
-				}
-
 				.formula-name {
 					&::before {
 						background: repeating-linear-gradient(

frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx

@@ -207,6 +207,7 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 							queryVariant={config?.queryVariant || 'dropdown'}
 							showOnlyWhereClause={showOnlyWhereClause}
 							isListViewPanel={isListViewPanel}
+							signalSource={currentQuery.builder.queryData[0].source as 'meter' | ''}
 							onSignalSourceChange={onSignalSourceChange || ((): void => {})}
 							signalSourceChangeEnabled={signalSourceChangeEnabled}
 							queriesCount={1}

frontend/src/components/QueryBuilderV2/QueryV2/MetricsSelect/MetricsSelect.tsx

@@ -1,14 +1,13 @@
-import { memo, useCallback, useMemo, useState } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { Select } from 'antd';
 import {
 	initialQueriesMap,
 	initialQueryMeterWithType,
 	PANEL_TYPES,
 } from 'constants/queryBuilder';
-import { AggregatorFilter } from 'container/QueryBuilder/filters';
+import { MetricNameSelector } from 'container/QueryBuilder/filters';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
-import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 import { SelectOption } from 'types/common/select';
@@ -44,21 +43,12 @@ export const MetricsSelect = memo(function MetricsSelect({
 	signalSourceChangeEnabled: boolean;
 	savePreviousQuery: boolean;
 }): JSX.Element {
-	const [attributeKeys, setAttributeKeys] = useState<BaseAutocompleteData[]>([]);
-
 	const { handleChangeAggregatorAttribute } = useQueryOperations({
 		index,
 		query,
 		entityVersion: version,
 	});
 
-	const handleAggregatorAttributeChange = useCallback(
-		(value: BaseAutocompleteData, isEditMode?: boolean) => {
-			handleChangeAggregatorAttribute(value, isEditMode, attributeKeys || []);
-		},
-		[handleChangeAggregatorAttribute, attributeKeys],
-	);
-
 	const {
 		updateAllQueriesOperators,
 		handleSetQueryData,
@@ -164,12 +154,10 @@ export const MetricsSelect = memo(function MetricsSelect({
 				/>
 			)}
 
-			<AggregatorFilter
-				onChange={handleAggregatorAttributeChange}
+			<MetricNameSelector
+				onChange={handleChangeAggregatorAttribute}
 				query={query}
-				index={index}
 				signalSource={signalSource || ''}
-				setAttributeKeys={setAttributeKeys}
 			/>
 		</div>
 	);

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx

@@ -202,8 +202,8 @@ function QueryAddOns({
 		} else {
 			filteredAddOns = Object.values(ADD_ONS);
 
-			// Filter out group_by for metrics data source
 			if (query.dataSource === DataSource.METRICS) {
+				// Filter out group_by for metrics data source (handled in MetricsAggregateSection)
 				filteredAddOns = filteredAddOns.filter(
 					(addOn) => addOn.key !== ADD_ONS_KEYS.GROUP_BY,
 				);

frontend/src/components/QueryBuilderV2/__tests__/QueryBuilder.PrevQuery.test.tsx

@@ -43,6 +43,7 @@ jest.mock(
 );
 jest.mock('container/QueryBuilder/filters', () => ({
 	AggregatorFilter: (): JSX.Element => <div />,
+	MetricNameSelector: (): JSX.Element => <div />,
 }));
 // Mock hooks
 jest.mock('hooks/queryBuilder/useQueryBuilder');

frontend/src/constants/queryBuilder.ts

@@ -1,4 +1,5 @@
 // ** Helpers
+import { MetrictypesTypeDTO } from 'api/generated/services/sigNoz.schemas';
 import { createIdFromObjectFields } from 'lib/createIdFromObjectFields';
 import { createNewBuilderItemName } from 'lib/newQueryBuilder/createNewBuilderItemName';
 import { IAttributeValuesResponse } from 'types/api/queryBuilder/getAttributesValues';
@@ -177,7 +178,7 @@ export const initialQueryBuilderFormValues: IBuilderQuery = {
 		{
 			metricName: '',
 			temporality: '',
-			timeAggregation: MetricAggregateOperator.COUNT,
+			timeAggregation: MetricAggregateOperator.AVG,
 			spaceAggregation: MetricAggregateOperator.SUM,
 			reduceTo: ReduceOperators.AVG,
 		},
@@ -225,7 +226,7 @@ export const initialQueryBuilderFormMeterValues: IBuilderQuery = {
 		{
 			metricName: '',
 			temporality: '',
-			timeAggregation: MeterAggregateOperator.COUNT,
+			timeAggregation: MeterAggregateOperator.AVG,
 			spaceAggregation: MeterAggregateOperator.SUM,
 			reduceTo: ReduceOperators.AVG,
 		},
@@ -371,6 +372,31 @@ export enum ATTRIBUTE_TYPES {
 	EXPONENTIAL_HISTOGRAM = 'ExponentialHistogram',
 }
 
+const METRIC_TYPE_TO_ATTRIBUTE_TYPE: Record<
+	MetrictypesTypeDTO,
+	ATTRIBUTE_TYPES
+> = {
+	[MetrictypesTypeDTO.sum]: ATTRIBUTE_TYPES.SUM,
+	[MetrictypesTypeDTO.gauge]: ATTRIBUTE_TYPES.GAUGE,
+	[MetrictypesTypeDTO.histogram]: ATTRIBUTE_TYPES.HISTOGRAM,
+	[MetrictypesTypeDTO.summary]: ATTRIBUTE_TYPES.GAUGE,
+	[MetrictypesTypeDTO.exponentialhistogram]:
+		ATTRIBUTE_TYPES.EXPONENTIAL_HISTOGRAM,
+};
+
+export function toAttributeType(
+	metricType: MetrictypesTypeDTO | undefined,
+	isMonotonic?: boolean,
+): ATTRIBUTE_TYPES | '' {
+	if (!metricType) {
+		return '';
+	}
+	if (metricType === MetrictypesTypeDTO.sum && isMonotonic === false) {
+		return ATTRIBUTE_TYPES.GAUGE;
+	}
+	return METRIC_TYPE_TO_ATTRIBUTE_TYPE[metricType] || '';
+}
+
 export type IQueryBuilderState = 'search';
 
 export const QUERY_BUILDER_SEARCH_VALUES = {

frontend/src/constants/reactQueryKeys.ts

@@ -49,7 +49,6 @@ export const REACT_QUERY_KEY = {
 
 	// Metrics Explorer Query Keys
 	GET_METRICS_LIST: 'GET_METRICS_LIST',
-	GET_METRICS_TREE_MAP: 'GET_METRICS_TREE_MAP',
 	GET_METRICS_LIST_FILTER_KEYS: 'GET_METRICS_LIST_FILTER_KEYS',
 	GET_METRICS_LIST_FILTER_VALUES: 'GET_METRICS_LIST_FILTER_VALUES',
 	GET_METRIC_DETAILS: 'GET_METRIC_DETAILS',

frontend/src/constants/routes.ts

@@ -56,7 +56,6 @@ const ROUTES = {
 	TRACE_EXPLORER: '/trace-explorer',
 	BILLING: '/settings/billing',
 	ROLES_SETTINGS: '/settings/roles',
-	MEMBERS_SETTINGS: '/settings/members',
 	SUPPORT: '/support',
 	LOGS_SAVE_VIEWS: '/logs/saved-views',
 	TRACES_SAVE_VIEWS: '/traces/saved-views',

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/CreateAlertV2/Footer/__tests__/utils.test.ts

@@ -441,7 +441,7 @@ describe('Footer utils', () => {
 											reduceTo: undefined,
 											spaceAggregation: 'sum',
 											temporality: undefined,
-											timeAggregation: 'count',
+											timeAggregation: 'avg',
 										},
 									],
 									disabled: false,

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

@@ -1,3 +1,4 @@
+import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PrecisionOption } from 'components/Graph/types';
 import { LegendConfig, TooltipRenderArgs } from 'lib/uPlotV2/components/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
@@ -8,7 +9,7 @@ interface BaseChartProps {
 	height: number;
 	showTooltip?: boolean;
 	showLegend?: boolean;
-	timezone: string;
+	timezone?: Timezone;
 	canPinTooltip?: boolean;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;

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

@@ -129,12 +129,12 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 					onDestroy={onPlotDestroy}
 					yAxisUnit={widget.yAxisUnit}
 					decimalPrecision={widget.decimalPrecision}
-					timezone={timezone.value}
 					data={chartData as uPlot.AlignedData}
 					width={containerDimensions.width}
 					height={containerDimensions.height}
 					layoutChildren={layoutChildren}
 					isStackedBarChart={widget.stackedBarChart ?? false}
+					timezone={timezone}
 				>
 					<ContextMenu
 						coordinates={coordinates}

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/utils.ts

@@ -5,12 +5,7 @@ import { getInitialStackedBands } from 'container/DashboardContainer/visualizati
 import { getLegend } from 'lib/dashboard/getQueryResults';
 import getLabelName from 'lib/getLabelName';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
-import {
-	DrawStyle,
-	LineInterpolation,
-	LineStyle,
-	VisibilityMode,
-} from 'lib/uPlotV2/config/types';
+import { DrawStyle } from 'lib/uPlotV2/config/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 import { get } from 'lodash-es';
 import { Widgets } from 'types/api/dashboard/getAll';
@@ -63,7 +58,12 @@ export function prepareBarPanelConfig({
 	const minStepInterval = Math.min(...Object.values(stepIntervals));
 
 	const builder = buildBaseConfig({
-		widget,
+		id: widget.id,
+		thresholds: widget.thresholds,
+		yAxisUnit: widget.yAxisUnit,
+		softMin: widget.softMin ?? undefined,
+		softMax: widget.softMax ?? undefined,
+		isLogScale: widget.isLogScale,
 		isDarkMode,
 		onClick,
 		onDragSelect,
@@ -98,14 +98,8 @@ export function prepareBarPanelConfig({
 		builder.addSeries({
 			scaleKey: 'y',
 			drawStyle: DrawStyle.Bar,
-			panelType: PANEL_TYPES.BAR,
 			label: label,
 			colorMapping: widget.customLegendColors ?? {},
-			spanGaps: false,
-			lineStyle: LineStyle.Solid,
-			lineInterpolation: LineInterpolation.Spline,
-			showPoints: VisibilityMode.Never,
-			pointSize: 5,
 			isDarkMode,
 			stepInterval: currentStepInterval,
 		});

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

@@ -100,7 +100,7 @@ function HistogramPanel(props: PanelWrapperProps): JSX.Element {
 					yAxisUnit={widget.yAxisUnit}
 					decimalPrecision={widget.decimalPrecision}
 					syncMode={DashboardCursorSync.Crosshair}
-					timezone={timezone.value}
+					timezone={timezone}
 					data={chartData as uPlot.AlignedData}
 					width={containerDimensions.width}
 					height={containerDimensions.height}

frontend/src/container/DashboardContainer/visualization/panels/HistogramPanel/utils.ts

@@ -154,7 +154,12 @@ export function prepareHistogramPanelConfig({
 	isDarkMode: boolean;
 }): UPlotConfigBuilder {
 	const builder = buildBaseConfig({
-		widget,
+		id: widget.id,
+		thresholds: widget.thresholds,
+		yAxisUnit: widget.yAxisUnit,
+		softMin: widget.softMin ?? undefined,
+		softMax: widget.softMax ?? undefined,
+		isLogScale: widget.isLogScale,
 		isDarkMode,
 		apiResponse,
 		panelMode,
@@ -191,10 +196,8 @@ export function prepareHistogramPanelConfig({
 		builder.addSeries({
 			label: '',
 			scaleKey: 'y',
-			drawStyle: DrawStyle.Bar,
-			panelType: PANEL_TYPES.HISTOGRAM,
+			drawStyle: DrawStyle.Histogram,
 			colorMapping: widget.customLegendColors ?? {},
-			spanGaps: false,
 			barWidthFactor: 1,
 			pointSize: 5,
 			lineColor: '#3f5ecc',
@@ -216,10 +219,8 @@ export function prepareHistogramPanelConfig({
 			builder.addSeries({
 				label: label,
 				scaleKey: 'y',
-				drawStyle: DrawStyle.Bar,
-				panelType: PANEL_TYPES.HISTOGRAM,
+				drawStyle: DrawStyle.Histogram,
 				colorMapping: widget.customLegendColors ?? {},
-				spanGaps: false,
 				barWidthFactor: 1,
 				pointSize: 5,
 				isDarkMode,

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

@@ -118,7 +118,7 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 					}}
 					yAxisUnit={widget.yAxisUnit}
 					decimalPrecision={widget.decimalPrecision}
-					timezone={timezone.value}
+					timezone={timezone}
 					data={chartData as uPlot.AlignedData}
 					width={containerDimensions.width}
 					height={containerDimensions.height}

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/utils.ts

@@ -82,7 +82,12 @@ export const prepareUPlotConfig = ({
 	const minStepInterval = Math.min(...Object.values(stepIntervals));
 
 	const builder = buildBaseConfig({
-		widget,
+		id: widget.id,
+		thresholds: widget.thresholds,
+		yAxisUnit: widget.yAxisUnit,
+		softMin: widget.softMin ?? undefined,
+		softMax: widget.softMax ?? undefined,
+		isLogScale: widget.isLogScale,
 		isDarkMode,
 		onClick,
 		onDragSelect,
@@ -120,7 +125,6 @@ export const prepareUPlotConfig = ({
 				: VisibilityMode.Never,
 			pointSize: 5,
 			isDarkMode,
-			panelType: PANEL_TYPES.TIME_SERIES,
 		});
 	});
 

frontend/src/container/DashboardContainer/visualization/panels/utils/__tests__/baseConfigBuilder.test.ts

@@ -1,11 +1,11 @@
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 import { STEP_INTERVAL_MULTIPLIER } from 'lib/uPlotV2/constants';
-import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';
 
 import { PanelMode } from '../../types';
-import { buildBaseConfig } from '../baseConfigBuilder';
+import { BaseConfigBuilderProps, buildBaseConfig } from '../baseConfigBuilder';
 
 jest.mock(
 	'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils',
@@ -27,16 +27,25 @@ jest.mock('lib/uPlotLib/plugins/onClickPlugin', () => ({
 	default: jest.fn().mockReturnValue({ name: 'onClickPlugin' }),
 }));
 
-const createWidget = (overrides: Partial<Widgets> = {}): Widgets =>
-	({
-		id: 'widget-1',
-		yAxisUnit: 'ms',
-		isLogScale: false,
-		softMin: undefined,
-		softMax: undefined,
-		thresholds: [],
-		...overrides,
-	} as Widgets);
+const createBaseConfigBuilderProps = (
+	overrides: Partial<
+		Pick<
+			BaseConfigBuilderProps,
+			'id' | 'yAxisUnit' | 'isLogScale' | 'softMin' | 'softMax' | 'thresholds'
+		>
+	> = {},
+): Pick<
+	BaseConfigBuilderProps,
+	'id' | 'yAxisUnit' | 'isLogScale' | 'softMin' | 'softMax' | 'thresholds'
+> => ({
+	id: 'widget-1',
+	yAxisUnit: 'ms',
+	isLogScale: false,
+	softMin: undefined,
+	softMax: undefined,
+	thresholds: [],
+	...overrides,
+});
 
 const createApiResponse = (
 	overrides: Partial<MetricRangePayloadProps> = {},
@@ -47,7 +56,7 @@ const createApiResponse = (
 	} as MetricRangePayloadProps);
 
 const baseProps = {
-	widget: createWidget(),
+	...createBaseConfigBuilderProps(),
 	apiResponse: createApiResponse(),
 	isDarkMode: true,
 	panelMode: PanelMode.DASHBOARD_VIEW,
@@ -63,14 +72,14 @@ describe('buildBaseConfig', () => {
 		expect(typeof builder.getLegendItems).toBe('function');
 	});
 
-	it('configures builder with widgetId and DASHBOARD_VIEW preferences', () => {
+	it('configures builder with id and DASHBOARD_VIEW preferences', () => {
 		const builder = buildBaseConfig({
 			...baseProps,
 			panelMode: PanelMode.DASHBOARD_VIEW,
-			widget: createWidget({ id: 'my-widget' }),
+			...createBaseConfigBuilderProps({ id: 'my-widget' }),
 		});
 
-		expect(builder.getWidgetId()).toBe('my-widget');
+		expect(builder.getId()).toBe('my-widget');
 		expect(builder.getShouldSaveSelectionPreference()).toBe(true);
 	});
 
@@ -127,7 +136,7 @@ describe('buildBaseConfig', () => {
 	it('configures log scale on y axis when widget.isLogScale is true', () => {
 		const builder = buildBaseConfig({
 			...baseProps,
-			widget: createWidget({ isLogScale: true }),
+			...createBaseConfigBuilderProps({ isLogScale: true }),
 		});
 
 		const config = builder.getConfig();
@@ -171,7 +180,7 @@ describe('buildBaseConfig', () => {
 	it('adds thresholds from widget', () => {
 		const builder = buildBaseConfig({
 			...baseProps,
-			widget: createWidget({
+			...createBaseConfigBuilderProps({
 				thresholds: [
 					{
 						thresholdValue: 80,
@@ -179,7 +188,7 @@ describe('buildBaseConfig', () => {
 						thresholdUnit: 'ms',
 						thresholdLabel: 'High',
 					},
-				] as Widgets['thresholds'],
+				] as ThresholdProps[],
 			}),
 		});
 

frontend/src/container/DashboardContainer/visualization/panels/utils/baseConfigBuilder.ts

@@ -1,5 +1,6 @@
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 import onClickPlugin, {
 	OnClickPluginOpts,
 } from 'lib/uPlotLib/plugins/onClickPlugin';
@@ -9,28 +10,32 @@ import {
 } from 'lib/uPlotV2/config/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 import { ThresholdsDrawHookOptions } from 'lib/uPlotV2/hooks/types';
-import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';
 
 import { PanelMode } from '../types';
 
 export interface BaseConfigBuilderProps {
-	widget: Widgets;
+	id: string;
+	thresholds?: ThresholdProps[];
 	apiResponse: MetricRangePayloadProps;
 	isDarkMode: boolean;
 	onClick?: OnClickPluginOpts['onClick'];
 	onDragSelect?: (startTime: number, endTime: number) => void;
 	timezone?: Timezone;
-	panelMode: PanelMode;
+	panelMode?: PanelMode;
 	panelType: PANEL_TYPES;
 	minTimeScale?: number;
 	maxTimeScale?: number;
 	stepInterval?: number;
+	isLogScale?: boolean;
+	yAxisUnit?: string;
+	softMin?: number;
+	softMax?: number;
 }
 
 export function buildBaseConfig({
-	widget,
+	id,
 	isDarkMode,
 	onClick,
 	onDragSelect,
@@ -38,9 +43,14 @@ export function buildBaseConfig({
 	timezone,
 	panelMode,
 	panelType,
+	thresholds,
 	minTimeScale,
 	maxTimeScale,
 	stepInterval,
+	isLogScale,
+	yAxisUnit,
+	softMin,
+	softMax,
 }: BaseConfigBuilderProps): UPlotConfigBuilder {
 	const tzDate = timezone
 		? (timestamp: number): Date =>
@@ -48,28 +58,27 @@ export function buildBaseConfig({
 		: undefined;
 
 	const builder = new UPlotConfigBuilder({
+		id,
 		onDragSelect,
-		widgetId: widget.id,
 		tzDate,
 		shouldSaveSelectionPreference: panelMode === PanelMode.DASHBOARD_VIEW,
-		selectionPreferencesSource: [
-			PanelMode.DASHBOARD_VIEW,
-			PanelMode.STANDALONE_VIEW,
-		].includes(panelMode)
-			? SelectionPreferencesSource.LOCAL_STORAGE
+		selectionPreferencesSource: panelMode
+			? [PanelMode.DASHBOARD_VIEW, PanelMode.STANDALONE_VIEW].includes(panelMode)
+				? SelectionPreferencesSource.LOCAL_STORAGE
+				: SelectionPreferencesSource.IN_MEMORY
 			: SelectionPreferencesSource.IN_MEMORY,
 		stepInterval,
 	});
 
 	const thresholdOptions: ThresholdsDrawHookOptions = {
 		scaleKey: 'y',
-		thresholds: (widget.thresholds || []).map((threshold) => ({
+		thresholds: (thresholds || []).map((threshold) => ({
 			thresholdValue: threshold.thresholdValue ?? 0,
 			thresholdColor: threshold.thresholdColor,
 			thresholdUnit: threshold.thresholdUnit,
 			thresholdLabel: threshold.thresholdLabel,
 		})),
-		yAxisUnit: widget.yAxisUnit,
+		yAxisUnit: yAxisUnit,
 	};
 
 	builder.addThresholds(thresholdOptions);
@@ -79,8 +88,8 @@ export function buildBaseConfig({
 		time: true,
 		min: minTimeScale,
 		max: maxTimeScale,
-		logBase: widget.isLogScale ? 10 : undefined,
-		distribution: widget.isLogScale
+		logBase: isLogScale ? 10 : undefined,
+		distribution: isLogScale
 			? DistributionType.Logarithmic
 			: DistributionType.Linear,
 	});
@@ -91,11 +100,11 @@ export function buildBaseConfig({
 		time: false,
 		min: undefined,
 		max: undefined,
-		softMin: widget.softMin ?? undefined,
-		softMax: widget.softMax ?? undefined,
+		softMin: softMin,
+		softMax: softMax,
 		thresholds: thresholdOptions,
-		logBase: widget.isLogScale ? 10 : undefined,
-		distribution: widget.isLogScale
+		logBase: isLogScale ? 10 : undefined,
+		distribution: isLogScale
 			? DistributionType.Logarithmic
 			: DistributionType.Linear,
 	});
@@ -114,7 +123,7 @@ export function buildBaseConfig({
 		show: true,
 		side: 2,
 		isDarkMode,
-		isLogScale: widget.isLogScale,
+		isLogScale,
 		panelType,
 	});
 
@@ -123,8 +132,8 @@ export function buildBaseConfig({
 		show: true,
 		side: 3,
 		isDarkMode,
-		isLogScale: widget.isLogScale,
-		yAxisUnit: widget.yAxisUnit,
+		isLogScale,
+		yAxisUnit,
 		panelType,
 	});
 

frontend/src/container/ExplorerOptions/utils.ts

@@ -15,7 +15,7 @@ export const getRandomColor = (): string => {
 };
 
 export const DATASOURCE_VS_ROUTES: Record<DataSource, string> = {
-	[DataSource.METRICS]: ROUTES.METRICS_EXPLORER,
+	[DataSource.METRICS]: ROUTES.METRICS_EXPLORER_EXPLORER,
 	[DataSource.TRACES]: ROUTES.TRACES_EXPLORER,
 	[DataSource.LOGS]: ROUTES.LOGS_EXPLORER,
 };

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/MembersSettings/MembersSettings.styles.scss

@@ -1,105 +0,0 @@
-.members-settings {
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-	padding: 16px 8px 24px 16px;
-	height: 100%;
-}
-
-.members-settings__header {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-
-	.ant-typography {
-		margin-bottom: 0 !important;
-	}
-}
-
-.members-settings__title {
-	font-size: 18px !important;
-	font-weight: 500 !important;
-	color: var(--vanilla-100) !important;
-	letter-spacing: -0.09px;
-	line-height: 28px !important;
-	margin: 0 !important;
-}
-
-.members-settings__subtitle {
-	font-size: 14px;
-	color: var(--vanilla-400);
-	letter-spacing: -0.07px;
-	line-height: 20px;
-}
-
-.members-settings__controls {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}
-
-.members-filter-trigger {
-	display: flex;
-	align-items: center;
-	gap: 4px;
-	border: 1px solid var(--border);
-	border-radius: 2px;
-	background-color: var(--l2-background);
-
-	&__chevron {
-		flex-shrink: 0;
-		color: var(--card-foreground);
-	}
-}
-
-.members-filter-dropdown {
-	.ant-dropdown-menu {
-		background: rgba(18, 19, 23, 0.9);
-		border: 1px solid var(--slate-400);
-		border-radius: 4px;
-		backdrop-filter: blur(20px);
-		padding: 11px 13px;
-		box-shadow: 4px 10px 16px 0 rgba(0, 0, 0, 0.2);
-	}
-
-	.ant-dropdown-menu-item {
-		background: transparent;
-		padding: 4px 0;
-
-		&:hover {
-			background: transparent;
-		}
-	}
-}
-
-.members-filter-option {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 16px;
-	font-size: 14px;
-	color: var(--vanilla-100);
-	letter-spacing: 0.14px;
-	min-width: 170px;
-
-	&__check {
-		color: var(--vanilla-100);
-		font-size: 14px;
-	}
-}
-
-.members-settings__search {
-	flex: 1;
-	min-width: 0;
-}
-
-.members-search-input {
-	height: 32px;
-	color: var(--l1-foreground);
-	background-color: var(--l2-background);
-	border-color: var(--border);
-
-	&::placeholder {
-		color: var(--l2-foreground);
-	}
-}

frontend/src/container/MembersSettings/MembersSettings.tsx

@@ -1,256 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { useQuery } from 'react-query';
-import { useHistory } from 'react-router-dom';
-import { Button } from '@signozhq/button';
-import { ChevronDown, Plus } from '@signozhq/icons';
-import { Input } from '@signozhq/input';
-import type { MenuProps } from 'antd';
-import { Dropdown, Typography } from 'antd';
-import getPendingInvites from 'api/v1/invite/get';
-import getAll from 'api/v1/user/get';
-import EditMemberDrawer from 'components/EditMemberDrawer/EditMemberDrawer';
-import InviteMembersModal from 'components/InviteMembersModal/InviteMembersModal';
-import MembersTable, { MemberRow } from 'components/MembersTable/MembersTable';
-import useUrlQuery from 'hooks/useUrlQuery';
-import { useAppContext } from 'providers/App/App';
-
-import './MembersSettings.styles.scss';
-
-const PAGE_SIZE = 20;
-
-type FilterMode = 'all' | 'invited';
-
-function MembersSettings(): JSX.Element {
-	const { org } = useAppContext();
-	const history = useHistory();
-	const urlQuery = useUrlQuery();
-
-	const pageParam = parseInt(urlQuery.get('page') ?? '1', 10);
-	const currentPage = Number.isNaN(pageParam) || pageParam < 1 ? 1 : pageParam;
-
-	const [searchQuery, setSearchQuery] = useState('');
-	const [filterMode, setFilterMode] = useState<FilterMode>('all');
-	const [isInviteModalOpen, setIsInviteModalOpen] = useState(false);
-	const [selectedMember, setSelectedMember] = useState<MemberRow | null>(null);
-
-	const {
-		data: usersData,
-		isLoading: isUsersLoading,
-		refetch: refetchUsers,
-	} = useQuery({
-		queryFn: getAll,
-		queryKey: ['getOrgUser', org?.[0]?.id],
-	});
-
-	const {
-		data: invitesData,
-		isLoading: isInvitesLoading,
-		refetch: refetchInvites,
-	} = useQuery({
-		queryFn: getPendingInvites,
-		queryKey: ['getPendingInvites'],
-	});
-
-	const isLoading = isUsersLoading || isInvitesLoading;
-
-	const allMembers = useMemo((): MemberRow[] => {
-		const activeMembers: MemberRow[] = (usersData?.data ?? []).map((user) => ({
-			id: user.id,
-			name: user.displayName,
-			email: user.email,
-			role: user.role,
-			status: 'Active' as const,
-			joinedOn: user.createdAt ? String(user.createdAt) : null,
-			updatedAt: (user as { updatedAt?: number }).updatedAt
-				? String((user as { updatedAt?: number }).updatedAt)
-				: null,
-		}));
-
-		const pendingInvites: MemberRow[] = (invitesData?.data ?? []).map(
-			(invite) => ({
-				id: `invite-${invite.id}`,
-				name: invite.name ?? '',
-				email: invite.email,
-				role: invite.role,
-				status: 'Invited' as const,
-				joinedOn: invite.createdAt ? String(invite.createdAt) : null,
-				token: invite.token ?? null,
-			}),
-		);
-
-		return [...activeMembers, ...pendingInvites];
-	}, [usersData, invitesData]);
-
-	const filteredMembers = useMemo((): MemberRow[] => {
-		let result = allMembers;
-
-		if (filterMode === 'invited') {
-			result = result.filter((m) => m.status === 'Invited');
-		}
-
-		if (searchQuery.trim()) {
-			const q = searchQuery.toLowerCase();
-			result = result.filter(
-				(m) =>
-					m.name.toLowerCase().includes(q) || m.email.toLowerCase().includes(q),
-			);
-		}
-
-		return result;
-	}, [allMembers, filterMode, searchQuery]);
-
-	const paginatedMembers = useMemo((): MemberRow[] => {
-		const start = (currentPage - 1) * PAGE_SIZE;
-		return filteredMembers.slice(start, start + PAGE_SIZE);
-	}, [filteredMembers, currentPage]);
-
-	const setPage = useCallback(
-		(page: number): void => {
-			urlQuery.set('page', String(page));
-			history.replace({ search: urlQuery.toString() });
-		},
-		[history, urlQuery],
-	);
-
-	const pendingCount = invitesData?.data?.length ?? 0;
-	const totalCount = allMembers.length;
-
-	const filterMenuItems: MenuProps['items'] = [
-		{
-			key: 'all',
-			label: (
-				<div className="members-filter-option">
-					<span>All members ⎯ {totalCount}</span>
-					{filterMode === 'all' && (
-						<span className="members-filter-option__check">✓</span>
-					)}
-				</div>
-			),
-			onClick: (): void => {
-				setFilterMode('all');
-				setPage(1);
-			},
-		},
-		{
-			key: 'invited',
-			label: (
-				<div className="members-filter-option">
-					<span>Pending invites ⎯ {pendingCount}</span>
-					{filterMode === 'invited' && (
-						<span className="members-filter-option__check">✓</span>
-					)}
-				</div>
-			),
-			onClick: (): void => {
-				setFilterMode('invited');
-				setPage(1);
-			},
-		},
-	];
-
-	const filterLabel =
-		filterMode === 'all'
-			? `All members ⎯ ${totalCount}`
-			: `Pending invites ⎯ ${pendingCount}`;
-
-	const handleInviteSuccess = useCallback((): void => {
-		refetchUsers();
-		refetchInvites();
-	}, [refetchUsers, refetchInvites]);
-
-	const handleRowClick = useCallback((member: MemberRow): void => {
-		setSelectedMember(member);
-	}, []);
-
-	const handleDrawerClose = useCallback((): void => {
-		setSelectedMember(null);
-	}, []);
-
-	const handleMemberEditSuccess = useCallback((): void => {
-		refetchUsers();
-		refetchInvites();
-		setSelectedMember(null);
-	}, [refetchUsers, refetchInvites]);
-
-	return (
-		<>
-			<div className="members-settings">
-				<div className="members-settings__header">
-					<Typography.Title level={5} className="members-settings__title">
-						Members
-					</Typography.Title>
-					<Typography.Text className="members-settings__subtitle">
-						Overview of people added to this workspace.
-					</Typography.Text>
-				</div>
-
-				{/* Controls row */}
-				<div className="members-settings__controls">
-					<Dropdown
-						menu={{ items: filterMenuItems }}
-						trigger={['click']}
-						overlayClassName="members-filter-dropdown"
-					>
-						<Button
-							variant="solid"
-							size="sm"
-							color="secondary"
-							className="members-filter-trigger"
-						>
-							<span>{filterLabel}</span>
-							<ChevronDown size={12} className="members-filter-trigger__chevron" />
-						</Button>
-					</Dropdown>
-
-					<div className="members-settings__search">
-						<Input
-							placeholder="Search by name or email..."
-							value={searchQuery}
-							onChange={(e): void => {
-								setSearchQuery(e.target.value);
-								setPage(1);
-							}}
-							className="members-search-input"
-							color="secondary"
-						/>
-					</div>
-
-					<Button
-						variant="solid"
-						size="sm"
-						color="primary"
-						onClick={(): void => setIsInviteModalOpen(true)}
-					>
-						<Plus size={12} />
-						Invite member
-					</Button>
-				</div>
-			</div>
-			<MembersTable
-				data={paginatedMembers}
-				loading={isLoading}
-				total={filteredMembers.length}
-				currentPage={currentPage}
-				pageSize={PAGE_SIZE}
-				searchQuery={searchQuery}
-				onPageChange={setPage}
-				onRowClick={handleRowClick}
-			/>
-
-			<InviteMembersModal
-				open={isInviteModalOpen}
-				onClose={(): void => setIsInviteModalOpen(false)}
-				onSuccess={handleInviteSuccess}
-			/>
-
-			<EditMemberDrawer
-				member={selectedMember}
-				open={selectedMember !== null}
-				onClose={handleDrawerClose}
-				onSuccess={handleMemberEditSuccess}
-			/>
-		</>
-	);
-}
-
-export default MembersSettings;

frontend/src/container/MeterExplorer/Explorer/TimeSeries.tsx

@@ -6,6 +6,7 @@ import { isAxiosError } from 'axios';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { initialQueryMeterWithType, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import EmptyMetricsSearch from 'container/MetricsExplorer/Explorer/EmptyMetricsSearch';
 import { BuilderUnitsFilter } from 'container/QueryBuilder/filters/BuilderUnitsFilter';
 import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
 import { convertDataValueToMs } from 'container/TimeSeriesView/utils';
@@ -115,27 +116,34 @@ function TimeSeries(): JSX.Element {
 		setYAxisUnit(value);
 	};
 
+	const hasMetricSelected = useMemo(
+		() => currentQuery.builder.queryData.some((q) => q.aggregateAttribute?.key),
+		[currentQuery],
+	);
+
 	return (
 		<div className="meter-time-series-container">
 			<BuilderUnitsFilter onChange={onUnitChangeHandler} yAxisUnit={yAxisUnit} />
 			<div className="time-series-container">
-				{responseData.map((datapoint, index) => (
-					<div
-						className="time-series-view-panel"
-						// eslint-disable-next-line react/no-array-index-key
-						key={index}
-					>
-						<TimeSeriesView
-							isFilterApplied={false}
-							isError={queries[index].isError}
-							isLoading={queries[index].isLoading}
-							data={datapoint}
-							dataSource={DataSource.METRICS}
-							yAxisUnit={yAxisUnit}
-							panelType={PANEL_TYPES.BAR}
-						/>
-					</div>
-				))}
+				{!hasMetricSelected && <EmptyMetricsSearch />}
+				{hasMetricSelected &&
+					responseData.map((datapoint, index) => (
+						<div
+							className="time-series-view-panel"
+							// eslint-disable-next-line react/no-array-index-key
+							key={index}
+						>
+							<TimeSeriesView
+								isFilterApplied={false}
+								isError={queries[index].isError}
+								isLoading={queries[index].isLoading}
+								data={datapoint}
+								dataSource={DataSource.METRICS}
+								yAxisUnit={yAxisUnit}
+								panelType={PANEL_TYPES.BAR}
+							/>
+						</div>
+					))}
 			</div>
 		</div>
 	);

frontend/src/container/MetricsExplorer/Explorer/EmptyMetricsSearch.tsx

@@ -1,13 +1,21 @@
 import { Typography } from 'antd';
 import { Empty } from 'antd/lib';
 
-export default function EmptyMetricsSearch(): JSX.Element {
+interface EmptyMetricsSearchProps {
+	hasQueryResult?: boolean;
+}
+
+export default function EmptyMetricsSearch({
+	hasQueryResult,
+}: EmptyMetricsSearchProps): JSX.Element {
 	return (
 		<div className="empty-metrics-search">
 			<Empty
 				description={
 					<Typography.Title level={5}>
-						Please build and run a valid query to see the result
+						{hasQueryResult
+							? 'No data'
+							: 'Select a metric and run a query to see the results'}
 					</Typography.Title>
 				}
 			/>

frontend/src/container/MetricsExplorer/Explorer/Explorer.tsx

@@ -12,14 +12,21 @@ import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interface
 import DateTimeSelector from 'container/TopNav/DateTimeSelectionV2';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
+import {
+	ICurrentQueryData,
+	useHandleExplorerTabChange,
+} from 'hooks/useHandleExplorerTabChange';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { isEmpty } from 'lodash-es';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
+import { ExplorerViews } from 'pages/LogsExplorer/utils';
 import { Warning } from 'types/api';
 import { Dashboard } from 'types/api/dashboard/getAll';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { MetricAggregation } from 'types/api/v5/queryRange';
 import { DataSource } from 'types/common/queryBuilder';
 import { generateExportToDashboardLink } from 'utils/dashboard/generateExportToDashboardLink';
+import { explorerViewToPanelType } from 'utils/explorerUtils';
 import { v4 as uuid } from 'uuid';
 
 import { MetricsExplorerEventKeys, MetricsExplorerEvents } from '../events';
@@ -42,15 +49,20 @@ function Explorer(): JSX.Element {
 		stagedQuery,
 		updateAllQueriesOperators,
 		currentQuery,
+		handleSetConfig,
 	} = useQueryBuilder();
 	const { safeNavigate } = useSafeNavigate();
+	const { handleExplorerTabChange } = useHandleExplorerTabChange();
 	const [isMetricDetailsOpen, setIsMetricDetailsOpen] = useState(false);
 
 	const metricNames = useMemo(() => {
 		const currentMetricNames: string[] = [];
 		stagedQuery?.builder.queryData.forEach((query) => {
-			if (query.aggregateAttribute?.key) {
-				currentMetricNames.push(query.aggregateAttribute?.key);
+			const metricName =
+				query.aggregateAttribute?.key ||
+				(query.aggregations?.[0] as MetricAggregation | undefined)?.metricName;
+			if (metricName) {
+				currentMetricNames.push(metricName);
 			}
 		});
 		return currentMetricNames;
@@ -69,7 +81,7 @@ function Explorer(): JSX.Element {
 			!isMetricUnitsLoading &&
 			!isMetricUnitsError &&
 			units.length > 0 &&
-			units.every((unit) => unit && unit === units[0]),
+			units.every((unit) => unit === units[0]),
 		[units, isMetricUnitsLoading, isMetricUnitsError],
 	);
 
@@ -176,6 +188,16 @@ function Explorer(): JSX.Element {
 
 	useShareBuilderUrl({ defaultValue: defaultQuery });
 
+	const handleChangeSelectedView = useCallback(
+		(view: ExplorerViews, querySearchParameters?: ICurrentQueryData): void => {
+			const nextPanelType =
+				explorerViewToPanelType[view] || PANEL_TYPES.TIME_SERIES;
+			handleSetConfig(nextPanelType, DataSource.METRICS);
+			handleExplorerTabChange(nextPanelType, querySearchParameters);
+		},
+		[handleSetConfig, handleExplorerTabChange],
+	);
+
 	const handleExport = useCallback(
 		(
 			dashboard: Dashboard | null,
@@ -348,6 +370,7 @@ function Explorer(): JSX.Element {
 				onExport={handleExport}
 				isOneChartPerQuery={showOneChartPerQuery}
 				splitedQueries={splitedQueries}
+				handleChangeSelectedView={handleChangeSelectedView}
 			/>
 			{isMetricDetailsOpen && selectedMetricName && (
 				<MetricDetails

frontend/src/container/MetricsExplorer/Explorer/TimeSeries.tsx

@@ -28,6 +28,7 @@ import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
+import EmptyMetricsSearch from './EmptyMetricsSearch';
 import { TimeSeriesProps } from './types';
 import {
 	buildUpdateMetricYAxisUnitPayload,
@@ -209,7 +210,7 @@ function TimeSeries({
 						{showSaveUnitButton && (
 							<div className="save-unit-container">
 								<Typography.Text>
-									Save the selected unit for this metric?
+									Set the selected unit as the metric unit?
 								</Typography.Text>
 								<Button
 									type="primary"
@@ -229,64 +230,71 @@ function TimeSeries({
 					'time-series-container': changeLayoutForOneChartPerQuery,
 				})}
 			>
-				{responseData.map((datapoint, index) => {
-					const isQueryDataItem = index < metricNames.length;
-					const metricName = isQueryDataItem ? metricNames[index] : undefined;
-					const metricUnit = isQueryDataItem ? metricUnits[index] : undefined;
+				{metricNames.length === 0 && <EmptyMetricsSearch />}
+				{metricNames.length > 0 &&
+					responseData.map((datapoint, index) => {
+						const isQueryDataItem = index < metricNames.length;
+						const metricName = isQueryDataItem ? metricNames[index] : undefined;
+						const metricUnit = isQueryDataItem ? metricUnits[index] : undefined;
 
-					// Show the no unit warning if -
-					// 1. The metric query is not loading
-					// 2. The metric units are not loading
-					// 3. There are more than one metric
-					// 4. The current metric unit is empty
-					// 5. Is a queryData item
-					const isMetricUnitEmpty =
-						isQueryDataItem &&
-						!queries[index].isLoading &&
-						!isMetricUnitsLoading &&
-						metricUnits.length > 1 &&
-						!metricUnit &&
-						metricName;
+						// Show the no unit warning if -
+						// 1. The metric query is not loading
+						// 2. The metric units are not loading
+						// 3. There are more than one metric
+						// 4. The current metric unit is empty
+						// 5. Is a queryData item
+						const isMetricUnitEmpty =
+							isQueryDataItem &&
+							!queries[index].isLoading &&
+							!isMetricUnitsLoading &&
+							metricUnits.length > 1 &&
+							!metricUnit &&
+							metricName;
 
-					const currentYAxisUnit = yAxisUnit || metricUnit;
+						const currentYAxisUnit = yAxisUnit || metricUnit;
 
-					return (
-						<div
-							className="time-series-view"
-							// eslint-disable-next-line react/no-array-index-key
-							key={index}
-						>
-							{isMetricUnitEmpty && metricName && (
-								<Tooltip
-									className="no-unit-warning"
-									title={
-										<Typography.Text>
-											This metric does not have a unit. Please set one for it in the{' '}
-											<Typography.Link
-												onClick={(): void => handleOpenMetricDetails(metricName)}
-											>
-												metric details
-											</Typography.Link>{' '}
-											page.
-										</Typography.Text>
-									}
-								>
-									<AlertTriangle size={16} color={Color.BG_AMBER_400} />
-								</Tooltip>
-							)}
-							<TimeSeriesView
-								isFilterApplied={false}
-								isError={queries[index].isError}
-								isLoading={queries[index].isLoading || isMetricUnitsLoading}
-								data={datapoint}
-								yAxisUnit={currentYAxisUnit}
-								dataSource={DataSource.METRICS}
-								error={queries[index].error as APIError}
-								setWarning={setWarning}
-							/>
-						</div>
-					);
-				})}
+						return (
+							<div
+								className="time-series-view"
+								// eslint-disable-next-line react/no-array-index-key
+								key={index}
+							>
+								{isMetricUnitEmpty && metricName && (
+									<Tooltip
+										className="no-unit-warning"
+										title={
+											<Typography.Text>
+												No unit is set for this metric. You can assign one from the{' '}
+												<Typography.Link
+													onClick={(): void => handleOpenMetricDetails(metricName)}
+												>
+													metric details
+												</Typography.Link>{' '}
+												page.
+											</Typography.Text>
+										}
+									>
+										<AlertTriangle
+											size={16}
+											color={Color.BG_AMBER_400}
+											role="img"
+											aria-label="no unit warning"
+										/>
+									</Tooltip>
+								)}
+								<TimeSeriesView
+									isFilterApplied={false}
+									isError={queries[index].isError}
+									isLoading={queries[index].isLoading || isMetricUnitsLoading}
+									data={datapoint}
+									yAxisUnit={currentYAxisUnit}
+									dataSource={DataSource.METRICS}
+									error={queries[index].error as APIError}
+									setWarning={setWarning}
+								/>
+							</div>
+						);
+					})}
 			</div>
 		</>
 	);

frontend/src/container/MetricsExplorer/Explorer/__tests__/EmptyMetricsSearch.test.tsx

@@ -0,0 +1,19 @@
+import { render, screen } from '@testing-library/react';
+
+import EmptyMetricsSearch from '../EmptyMetricsSearch';
+
+describe('EmptyMetricsSearch', () => {
+	it('shows select metric message when no query has been run', () => {
+		render(<EmptyMetricsSearch />);
+
+		expect(
+			screen.getByText('Select a metric and run a query to see the results'),
+		).toBeInTheDocument();
+	});
+
+	it('shows no data message when a query returned empty results', () => {
+		render(<EmptyMetricsSearch hasQueryResult />);
+
+		expect(screen.getByText('No data')).toBeInTheDocument();
+	});
+});

frontend/src/container/MetricsExplorer/Explorer/__tests__/Explorer.test.tsx

@@ -8,10 +8,11 @@ import {
 	MetrictypesTemporalityDTO,
 	MetrictypesTypeDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { initialQueriesMap } from 'constants/queryBuilder';
 import * as useOptionsMenuHooks from 'container/OptionsMenu';
 import * as useUpdateDashboardHooks from 'hooks/dashboard/useUpdateDashboard';
 import * as useQueryBuilderHooks from 'hooks/queryBuilder/useQueryBuilder';
+import * as useHandleExplorerTabChangeHooks from 'hooks/useHandleExplorerTabChange';
 import * as appContextHooks from 'providers/App/App';
 import { ErrorModalProvider } from 'providers/ErrorModalProvider';
 import * as timezoneHooks from 'providers/Timezone';
@@ -29,6 +30,8 @@ const queryClient = new QueryClient();
 const mockUpdateAllQueriesOperators = jest
 	.fn()
 	.mockReturnValue(initialQueriesMap[DataSource.METRICS]);
+const mockHandleSetConfig = jest.fn();
+const mockHandleExplorerTabChange = jest.fn();
 const mockUseQueryBuilderData = {
 	handleRunQuery: jest.fn(),
 	stagedQuery: initialQueriesMap[DataSource.METRICS],
@@ -40,7 +43,7 @@ const mockUseQueryBuilderData = {
 	handleSetQueryData: jest.fn(),
 	handleSetFormulaData: jest.fn(),
 	handleSetQueryItemData: jest.fn(),
-	handleSetConfig: jest.fn(),
+	handleSetConfig: mockHandleSetConfig,
 	removeQueryBuilderEntityByIndex: jest.fn(),
 	removeQueryTypeItemByIndex: jest.fn(),
 	isDefaultQuery: jest.fn(),
@@ -135,6 +138,11 @@ jest.spyOn(appContextHooks, 'useAppContext').mockReturnValue({
 jest.spyOn(useQueryBuilderHooks, 'useQueryBuilder').mockReturnValue({
 	...mockUseQueryBuilderData,
 } as any);
+jest
+	.spyOn(useHandleExplorerTabChangeHooks, 'useHandleExplorerTabChange')
+	.mockReturnValue({
+		handleExplorerTabChange: mockHandleExplorerTabChange,
+	});
 
 const Y_AXIS_UNIT_SELECTOR_TEST_ID = 'y-axis-unit-selector';
 
@@ -157,26 +165,6 @@ describe('Explorer', () => {
 		jest.clearAllMocks();
 	});
 
-	it('should render Explorer query builder with metrics datasource selected', () => {
-		jest.spyOn(useQueryBuilderHooks, 'useQueryBuilder').mockReturnValue({
-			...mockUseQueryBuilderData,
-			stagedQuery: initialQueriesMap[DataSource.TRACES],
-		} as any);
-
-		(useSearchParams as jest.Mock).mockReturnValue([
-			new URLSearchParams({ isOneChartPerQueryEnabled: 'false' }),
-			mockSetSearchParams,
-		]);
-
-		renderExplorer();
-
-		expect(mockUpdateAllQueriesOperators).toHaveBeenCalledWith(
-			initialQueriesMap[DataSource.METRICS],
-			PANEL_TYPES.TIME_SERIES,
-			DataSource.METRICS,
-		);
-	});
-
 	it('should enable one chart per query toggle when oneChartPerQuery=true in URL', () => {
 		(useSearchParams as jest.Mock).mockReturnValue([
 			new URLSearchParams({ isOneChartPerQueryEnabled: 'true' }),
@@ -241,20 +229,46 @@ describe('Explorer', () => {
 		expect(yAxisUnitSelector).not.toBeInTheDocument();
 	});
 
-	it('should hide y axis unit selector for multiple metrics with different units', () => {
+	it('one chart per query toggle should be forced on and disabled when multiple metrics have different units', () => {
+		const mockQueryData = {
+			...initialQueriesMap[DataSource.METRICS].builder.queryData[0],
+			aggregateAttribute: {
+				...(initialQueriesMap[DataSource.METRICS].builder.queryData[0]
+					.aggregateAttribute as BaseAutocompleteData),
+				key: 'metric1',
+			},
+		};
+		const mockStagedQueryWithMultipleQueries = {
+			...initialQueriesMap[DataSource.METRICS],
+			builder: {
+				...initialQueriesMap[DataSource.METRICS].builder,
+				queryData: [mockQueryData, mockQueryData],
+			},
+		};
+
+		jest.spyOn(useQueryBuilderHooks, 'useQueryBuilder').mockReturnValue(({
+			...mockUseQueryBuilderData,
+			stagedQuery: mockStagedQueryWithMultipleQueries,
+		} as Partial<QueryBuilderContextType>) as QueryBuilderContextType);
+
 		jest.spyOn(useGetMetricsHooks, 'useGetMetrics').mockReturnValue({
 			isLoading: false,
 			isError: false,
-			metrics: [MOCK_METRIC_METADATA, MOCK_METRIC_METADATA],
+			metrics: [
+				{ ...MOCK_METRIC_METADATA, unit: 'seconds' },
+				{ ...MOCK_METRIC_METADATA, unit: 'bytes' },
+			],
 		});
 
+		(useSearchParams as jest.Mock).mockReturnValue([
+			new URLSearchParams({ isOneChartPerQueryEnabled: 'false' }),
+			mockSetSearchParams,
+		]);
+
 		renderExplorer();
 
-		const yAxisUnitSelector = screen.queryByTestId(Y_AXIS_UNIT_SELECTOR_TEST_ID);
-		expect(yAxisUnitSelector).not.toBeInTheDocument();
-
-		// One chart per query toggle should be disabled
 		const oneChartPerQueryToggle = screen.getByRole('switch');
+		expect(oneChartPerQueryToggle).toBeChecked();
 		expect(oneChartPerQueryToggle).toBeDisabled();
 	});
 
@@ -327,4 +341,158 @@ describe('Explorer', () => {
 		const oneChartPerQueryToggle = screen.getByRole('switch');
 		expect(oneChartPerQueryToggle).toBeEnabled();
 	});
+
+	it('one chart per query toggle should be enabled when multiple metrics have no unit', () => {
+		const metricWithNoUnit = {
+			type: MetrictypesTypeDTO.sum,
+			description: 'metric without unit',
+			unit: '',
+			temporality: MetrictypesTemporalityDTO.cumulative,
+			isMonotonic: true,
+		};
+		const mockQueryData = {
+			...initialQueriesMap[DataSource.METRICS].builder.queryData[0],
+			aggregateAttribute: {
+				...(initialQueriesMap[DataSource.METRICS].builder.queryData[0]
+					.aggregateAttribute as BaseAutocompleteData),
+				key: 'metric1',
+			},
+		};
+		const mockStagedQueryWithMultipleQueries = {
+			...initialQueriesMap[DataSource.METRICS],
+			builder: {
+				...initialQueriesMap[DataSource.METRICS].builder,
+				queryData: [mockQueryData, mockQueryData],
+			},
+		};
+
+		jest.spyOn(useQueryBuilderHooks, 'useQueryBuilder').mockReturnValue(({
+			...mockUseQueryBuilderData,
+			stagedQuery: mockStagedQueryWithMultipleQueries,
+		} as Partial<QueryBuilderContextType>) as QueryBuilderContextType);
+
+		jest.spyOn(useGetMetricsHooks, 'useGetMetrics').mockReturnValue({
+			isLoading: false,
+			isError: false,
+			metrics: [metricWithNoUnit, metricWithNoUnit],
+		});
+
+		(useSearchParams as jest.Mock).mockReturnValue([
+			new URLSearchParams({ isOneChartPerQueryEnabled: 'false' }),
+			mockSetSearchParams,
+		]);
+
+		renderExplorer();
+
+		const oneChartPerQueryToggle = screen.getByRole('switch');
+		// Toggle should be enabled (not forced/disabled) since both metrics
+		// have the same unit (no unit) and should be viewable on the same graph
+		expect(oneChartPerQueryToggle).toBeEnabled();
+		expect(oneChartPerQueryToggle).not.toBeChecked();
+	});
+
+	describe('loading saved views with v5 query format', () => {
+		const EMPTY_STATE_TEXT = 'Select a metric and run a query to see the results';
+
+		it('should show empty state when no metric is selected', () => {
+			(useSearchParams as jest.Mock).mockReturnValue([
+				new URLSearchParams({}),
+				mockSetSearchParams,
+			]);
+			jest.spyOn(useGetMetricsHooks, 'useGetMetrics').mockReturnValue({
+				isLoading: false,
+				isError: false,
+				metrics: [],
+			});
+			jest.spyOn(useQueryBuilderHooks, 'useQueryBuilder').mockReturnValue({
+				...mockUseQueryBuilderData,
+			} as any);
+
+			renderExplorer();
+
+			expect(screen.getByText(EMPTY_STATE_TEXT)).toBeInTheDocument();
+		});
+
+		it('should not show empty state when saved view has v5 aggregations format', () => {
+			(useSearchParams as jest.Mock).mockReturnValue([
+				new URLSearchParams({}),
+				mockSetSearchParams,
+			]);
+			jest.spyOn(useGetMetricsHooks, 'useGetMetrics').mockReturnValue({
+				isLoading: false,
+				isError: false,
+				metrics: [MOCK_METRIC_METADATA],
+			});
+
+			// saved view loaded back from v5 format
+			// aggregateAttribute.key is empty (lost in v3/v4 -> v5 -> v3/v4 round trip)
+			// but aggregations[0].metricName has metric name
+			// TODO(srikanthccv): remove this mess
+			const mockQueryData = {
+				...initialQueriesMap[DataSource.METRICS].builder.queryData[0],
+				aggregateAttribute: {
+					...(initialQueriesMap[DataSource.METRICS].builder.queryData[0]
+						.aggregateAttribute as BaseAutocompleteData),
+					key: '',
+				},
+				aggregations: [
+					{
+						metricName: 'http_requests_total',
+						temporality: 'cumulative',
+						timeAggregation: 'rate',
+						spaceAggregation: 'sum',
+					},
+				],
+			};
+			jest.spyOn(useQueryBuilderHooks, 'useQueryBuilder').mockReturnValue(({
+				...mockUseQueryBuilderData,
+				stagedQuery: {
+					...initialQueriesMap[DataSource.METRICS],
+					builder: {
+						...initialQueriesMap[DataSource.METRICS].builder,
+						queryData: [mockQueryData],
+					},
+				},
+			} as Partial<QueryBuilderContextType>) as QueryBuilderContextType);
+
+			renderExplorer();
+
+			expect(screen.queryByText(EMPTY_STATE_TEXT)).not.toBeInTheDocument();
+		});
+
+		it('should not show empty state when query uses v3 aggregateAttribute format', () => {
+			(useSearchParams as jest.Mock).mockReturnValue([
+				new URLSearchParams({}),
+				mockSetSearchParams,
+			]);
+			jest.spyOn(useGetMetricsHooks, 'useGetMetrics').mockReturnValue({
+				isLoading: false,
+				isError: false,
+				metrics: [MOCK_METRIC_METADATA],
+			});
+
+			const mockQueryData = {
+				...initialQueriesMap[DataSource.METRICS].builder.queryData[0],
+				aggregateAttribute: {
+					...(initialQueriesMap[DataSource.METRICS].builder.queryData[0]
+						.aggregateAttribute as BaseAutocompleteData),
+					key: 'system_cpu_usage',
+				},
+			};
+			jest.spyOn(useQueryBuilderHooks, 'useQueryBuilder').mockReturnValue(({
+				...mockUseQueryBuilderData,
+				stagedQuery: {
+					...initialQueriesMap[DataSource.METRICS],
+					builder: {
+						...initialQueriesMap[DataSource.METRICS].builder,
+						queryData: [mockQueryData],
+					},
+				},
+			} as Partial<QueryBuilderContextType>) as QueryBuilderContextType);
+
+			renderExplorer();
+
+			expect(screen.queryByText(EMPTY_STATE_TEXT)).not.toBeInTheDocument();
+		});
+	});
 });

frontend/src/container/MetricsExplorer/Explorer/__tests__/TimeSeries.test.tsx

@@ -1,4 +1,4 @@
-import { render, RenderResult, screen, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import * as metricsExplorerHooks from 'api/generated/services/metrics';
 
@@ -56,7 +56,7 @@ const mockSetYAxisUnit = jest.fn();
 
 function renderTimeSeries(
 	overrides: Partial<TimeSeriesProps> = {},
-): RenderResult {
+): ReturnType<typeof render> {
 	return render(
 		<TimeSeries
 			showOneChartPerQuery={false}
@@ -84,45 +84,57 @@ describe('TimeSeries', () => {
 		} as Partial<UseUpdateMetricMetadataReturnType>) as UseUpdateMetricMetadataReturnType);
 	});
 
+	it('shows select metric message when no metric is selected', () => {
+		renderTimeSeries({ metricNames: [] });
+
+		expect(
+			screen.getByText('Select a metric and run a query to see the results'),
+		).toBeInTheDocument();
+		expect(screen.queryByText('TimeSeriesView')).not.toBeInTheDocument();
+	});
+
+	it('renders chart view when a metric is selected', () => {
+		renderTimeSeries({
+			metricNames: ['metric1'],
+			metricUnits: ['count'],
+			metrics: [MOCK_METRIC_METADATA],
+		});
+
+		expect(screen.getByText('TimeSeriesView')).toBeInTheDocument();
+		expect(
+			screen.queryByText('Select a metric and run a query to see the results'),
+		).not.toBeInTheDocument();
+	});
+
 	it('should render a warning icon when a metric has no unit among multiple metrics', () => {
-		const user = userEvent.setup();
-		const { container } = renderTimeSeries({
+		renderTimeSeries({
 			metricUnits: ['', 'count'],
 			metricNames: ['metric1', 'metric2'],
 			metrics: [undefined, undefined],
 		});
 
-		const alertIcon = container.querySelector('.no-unit-warning') as HTMLElement;
-		user.hover(alertIcon);
-		waitFor(() =>
-			expect(
-				screen.findByText('This metric does not have a unit'),
-			).toBeInTheDocument(),
-		);
+		expect(
+			screen.getByRole('img', { name: 'no unit warning' }),
+		).toBeInTheDocument();
 	});
 
-	it('clicking on warning icon tooltip should open metric details modal', async () => {
+	it('warning tooltip shows metric details link', async () => {
 		const user = userEvent.setup();
-		const { container } = renderTimeSeries({
+		renderTimeSeries({
 			metricUnits: ['', 'count'],
 			metricNames: ['metric1', 'metric2'],
 			metrics: [MOCK_METRIC_METADATA, MOCK_METRIC_METADATA],
 			yAxisUnit: 'seconds',
 		});
 
-		const alertIcon = container.querySelector('.no-unit-warning') as HTMLElement;
-		user.hover(alertIcon);
+		const alertIcon = screen.getByRole('img', { name: 'no unit warning' });
+		await user.hover(alertIcon);
 
-		const metricDetailsLink = await screen.findByText('metric details');
-		user.click(metricDetailsLink);
-
-		waitFor(() =>
-			expect(mockSetIsMetricDetailsOpen).toHaveBeenCalledWith('metric1'),
-		);
+		expect(await screen.findByText('metric details')).toBeInTheDocument();
 	});
 
-	it('shows Save unit button when metric had no unit but one is selected', async () => {
-		const { findByText, getByRole } = renderTimeSeries({
+	it('shows save unit prompt with enabled button when metric has no unit and a unit is selected', async () => {
+		renderTimeSeries({
 			metricUnits: [undefined],
 			metricNames: ['metric1'],
 			metrics: [MOCK_METRIC_METADATA],
@@ -131,38 +143,10 @@ describe('TimeSeries', () => {
 		});
 
 		expect(
-			await findByText('Save the selected unit for this metric?'),
+			await screen.findByText('Set the selected unit as the metric unit?'),
 		).toBeInTheDocument();
 
-		const yesButton = getByRole('button', { name: 'Yes' });
-		expect(yesButton).toBeInTheDocument();
+		const yesButton = screen.getByRole('button', { name: 'Yes' });
 		expect(yesButton).toBeEnabled();
 	});
-
-	it('clicking on save unit button shoould upated metric metadata', async () => {
-		const user = userEvent.setup();
-		const { getByRole } = renderTimeSeries({
-			metricUnits: [''],
-			metricNames: ['metric1'],
-			metrics: [MOCK_METRIC_METADATA],
-			yAxisUnit: 'seconds',
-			showYAxisUnitSelector: true,
-		});
-
-		const yesButton = getByRole('button', { name: /Yes/i });
-		await user.click(yesButton);
-
-		expect(mockUpdateMetricMetadata).toHaveBeenCalledWith(
-			{
-				pathParams: {
-					metricName: 'metric1',
-				},
-				data: expect.objectContaining({ unit: 'seconds' }),
-			},
-			expect.objectContaining({
-				onSuccess: expect.any(Function),
-				onError: expect.any(Function),
-			}),
-		);
-	});
 });

frontend/src/container/MetricsExplorer/Explorer/__tests__/utils.test.tsx

@@ -139,4 +139,14 @@ describe('getMetricUnits', () => {
 		expect(result).toHaveLength(1);
 		expect(result[0]).toBe('s');
 	});
+
+	it('should return undefined for metrics with no unit', () => {
+		const result = getMetricUnits([
+			{ ...MOCK_METRIC_METADATA, unit: '' },
+			{ ...MOCK_METRIC_METADATA, unit: '' },
+		]);
+		expect(result).toHaveLength(2);
+		expect(result[0]).toBeUndefined();
+		expect(result[1]).toBeUndefined();
+	});
 });

frontend/src/container/MetricsExplorer/Inspect/MetricNameSearch.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { Typography } from 'antd';
 import { initialQueriesMap } from 'constants/queryBuilder';
-import { AggregatorFilter } from 'container/QueryBuilder/filters';
+import { MetricNameSelector } from 'container/QueryBuilder/filters';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource } from 'types/common/queryBuilder';
 
@@ -27,7 +27,7 @@ function MetricNameSearch({
 			className="inspect-metrics-input-group metric-name-search"
 		>
 			<Typography.Text>From</Typography.Text>
-			<AggregatorFilter
+			<MetricNameSelector
 				defaultValue={searchText ?? ''}
 				query={initialQueriesMap[DataSource.METRICS].builder.queryData[0]}
 				onSelect={handleSetMetricName}

frontend/src/container/MetricsExplorer/Inspect/__tests__/QueryBuilder.test.tsx

@@ -1,8 +1,9 @@
 import { QueryClient, QueryClientProvider } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { Provider } from 'react-redux';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import * as metricsService from 'api/generated/services/metrics';
 import { MetricType } from 'api/metricsExplorer/getMetricsList';
 import * as appContextHooks from 'providers/App/App';
 import store from 'store';
@@ -23,27 +24,31 @@ jest.mock('react-router-dom', () => ({
 	}),
 }));
 
-jest.mock('container/QueryBuilder/filters', () => ({
-	AggregatorFilter: ({ onSelect, onChange, defaultValue }: any): JSX.Element => (
-		<div data-testid="mock-aggregator-filter">
-			<input
-				data-testid="metric-name-input"
-				defaultValue={defaultValue}
-				onChange={(e: React.ChangeEvent<HTMLInputElement>): void =>
-					onChange({ key: e.target.value })
-				}
-			/>
-			<button
-				type="button"
-				data-testid="select-metric-button"
-				onClick={(): void => onSelect({ key: 'test_metric_2' })}
-			>
-				Select Metric
-			</button>
-		</div>
-	),
+jest.mock('api/generated/services/metrics', () => ({
+	useListMetrics: jest.fn().mockReturnValue({
+		isFetching: false,
+		isError: false,
+		data: { data: { metrics: [] } },
+	}),
+	useUpdateMetricMetadata: jest.fn().mockReturnValue({
+		mutate: jest.fn(),
+		isLoading: false,
+	}),
 }));
 
+jest.mock('hooks/useDebounce', () => ({
+	__esModule: true,
+	default: <T,>(value: T): T => value,
+}));
+
+jest.mock(
+	'container/QueryBuilder/filters/QueryBuilderSearch/OptionRenderer',
+	() => ({
+		__esModule: true,
+		default: ({ value }: { value: string }): JSX.Element => <span>{value}</span>,
+	}),
+);
+
 jest.spyOn(appContextHooks, 'useAppContext').mockReturnValue({
 	user: {
 		role: 'admin',
@@ -123,6 +128,24 @@ describe('QueryBuilder', () => {
 
 	it('should call setCurrentMetricName when metric name is selected', async () => {
 		const user = userEvent.setup();
+		(metricsService.useListMetrics as jest.Mock).mockReturnValue({
+			isFetching: false,
+			isError: false,
+			data: {
+				data: {
+					metrics: [
+						{
+							metricName: 'test_metric_2',
+							type: 'Sum',
+							isMonotonic: true,
+							description: '',
+							temporality: 'cumulative',
+							unit: '',
+						},
+					],
+				},
+			},
+		});
 
 		render(
 			<QueryClientProvider client={queryClient}>
@@ -137,8 +160,12 @@ describe('QueryBuilder', () => {
 
 		expect(screen.getByText('From')).toBeInTheDocument();
 
-		const selectButton = screen.getByTestId('select-metric-button');
-		await user.click(selectButton);
+		const input = within(metricNameSearch).getByRole('combobox');
+		fireEvent.change(input, { target: { value: 'test_metric_2' } });
+
+		const options = document.querySelectorAll('.ant-select-item');
+		expect(options.length).toBeGreaterThan(0);
+		await user.click(options[0] as HTMLElement);
 
 		expect(mockSetCurrentMetricName).toHaveBeenCalledWith('test_metric_2');
 	});

frontend/src/container/MetricsExplorer/MetricDetails/AllAttributes.tsx

@@ -33,6 +33,7 @@ const COPY_FEEDBACK_DURATION_MS = 1500;
 function AllAttributes({
 	metricName,
 	metricType,
+	isMonotonic,
 	minTime,
 	maxTime,
 }: AllAttributesProps): JSX.Element {
@@ -73,6 +74,7 @@ function AllAttributes({
 				undefined,
 				groupBy,
 				limit,
+				isMonotonic,
 			);
 			handleExplorerTabChange(
 				PANEL_TYPES.TIME_SERIES,
@@ -82,6 +84,7 @@ function AllAttributes({
 					id: metricName,
 				},
 				ROUTES.METRICS_EXPLORER_EXPLORER,
+				true,
 			);
 			logEvent(MetricsExplorerEvents.OpenInExplorerClicked, {
 				[MetricsExplorerEventKeys.MetricName]: metricName,
@@ -90,15 +93,19 @@ function AllAttributes({
 				[MetricsExplorerEventKeys.AttributeKey]: groupBy,
 			});
 		},
-		[metricName, metricType, handleExplorerTabChange],
+		[metricName, metricType, isMonotonic, handleExplorerTabChange],
 	);
 
 	const goToMetricsExploreWithAppliedAttribute = useCallback(
 		(key: string, value: string) => {
-			const compositeQuery = getMetricDetailsQuery(metricName, metricType, {
-				key,
-				value,
-			});
+			const compositeQuery = getMetricDetailsQuery(
+				metricName,
+				metricType,
+				{ key, value },
+				undefined,
+				undefined,
+				isMonotonic,
+			);
 			handleExplorerTabChange(
 				PANEL_TYPES.TIME_SERIES,
 				{
@@ -107,6 +114,7 @@ function AllAttributes({
 					id: metricName,
 				},
 				ROUTES.METRICS_EXPLORER_EXPLORER,
+				true,
 			);
 			logEvent(MetricsExplorerEvents.OpenInExplorerClicked, {
 				[MetricsExplorerEventKeys.MetricName]: metricName,
@@ -116,7 +124,7 @@ function AllAttributes({
 				[MetricsExplorerEventKeys.AttributeValue]: value,
 			});
 		},
-		[metricName, metricType, handleExplorerTabChange],
+		[metricName, metricType, isMonotonic, handleExplorerTabChange],
 	);
 
 	const handleKeyMenuItemClick = useCallback(

frontend/src/container/MetricsExplorer/MetricDetails/AllAttributesValue.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { Button, Input, Menu, Popover, Tooltip, Typography } from 'antd';
-import { useNotifications } from 'hooks/useNotifications';
 import { Check, Copy, Search, SquareArrowOutUpRight } from 'lucide-react';
 
 import MetricDetailsErrorState from './MetricDetailsErrorState';
@@ -39,7 +38,6 @@ export function AllAttributesValue({
 	const [allValuesSearch, setAllValuesSearch] = useState('');
 	const [copiedValue, setCopiedValue] = useState<string | null>(null);
 	const [, copyToClipboard] = useCopyToClipboard();
-	const { notifications } = useNotifications();
 	const copyTimerRef = useRef<ReturnType<typeof setTimeout>>();
 
 	const handleCopyWithFeedback = useCallback(
@@ -62,21 +60,13 @@ export function AllAttributesValue({
 					break;
 				case 'copy-value':
 					handleCopyWithFeedback(attribute);
-					notifications.success({
-						message: 'Value copied!',
-					});
 					break;
 				default:
 					break;
 			}
 			setAttributePopoverKey(null);
 		},
-		[
-			goToMetricsExploreWithAppliedAttribute,
-			filterKey,
-			handleCopyWithFeedback,
-			notifications,
-		],
+		[goToMetricsExploreWithAppliedAttribute, filterKey, handleCopyWithFeedback],
 	);
 
 	const attributePopoverContent = useCallback(
@@ -169,26 +159,35 @@ export function AllAttributesValue({
 
 	return (
 		<div className="all-attributes-value">
-			{filterValue.slice(0, INITIAL_VISIBLE_COUNT).map((attribute) => (
-				<Popover
-					key={attribute}
-					content={attributePopoverContent(attribute)}
-					trigger="click"
-					overlayClassName="metric-details-popover attribute-value-popover-overlay"
-					open={attributePopoverKey === `${filterKey}-${attribute}`}
-					onOpenChange={(open): void => {
-						if (!open) {
-							setAttributePopoverKey(null);
-						} else {
-							setAttributePopoverKey(`${filterKey}-${attribute}`);
-						}
-					}}
-				>
-					<Button key={attribute} type="text">
-						<Typography.Text>{attribute}</Typography.Text>
-					</Button>
-				</Popover>
-			))}
+			{filterValue.slice(0, INITIAL_VISIBLE_COUNT).map((attribute) => {
+				const isCopied = copiedValue === attribute;
+				return (
+					<div key={attribute} className="all-attributes-value-item">
+						<Popover
+							content={attributePopoverContent(attribute)}
+							trigger="click"
+							overlayClassName="metric-details-popover attribute-value-popover-overlay"
+							open={attributePopoverKey === `${filterKey}-${attribute}`}
+							onOpenChange={(open): void => {
+								if (!open) {
+									setAttributePopoverKey(null);
+								} else {
+									setAttributePopoverKey(`${filterKey}-${attribute}`);
+								}
+							}}
+						>
+							<Button type="text">
+								<Typography.Text>{attribute}</Typography.Text>
+							</Button>
+						</Popover>
+						{isCopied && (
+							<span className="copy-feedback">
+								<Check size={12} />
+							</span>
+						)}
+					</div>
+				);
+			})}
 			{filterValue.length > INITIAL_VISIBLE_COUNT && (
 				<Popover
 					content={allValuesPopoverContent}

frontend/src/container/MetricsExplorer/MetricDetails/DashboardsAndAlertsPopover.tsx

@@ -9,9 +9,6 @@ import {
 } from 'api/generated/services/metrics';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import useUrlQuery from 'hooks/useUrlQuery';
-import history from 'lib/history';
 import { Bell, Grid } from 'lucide-react';
 import { pluralize } from 'utils/pluralize';
 
@@ -20,9 +17,6 @@ import { DashboardsAndAlertsPopoverProps } from './types';
 function DashboardsAndAlertsPopover({
 	metricName,
 }: DashboardsAndAlertsPopoverProps): JSX.Element | null {
-	const { safeNavigate } = useSafeNavigate();
-	const params = useUrlQuery();
-
 	const {
 		data: alertsData,
 		isLoading: isLoadingAlerts,
@@ -74,8 +68,10 @@ function DashboardsAndAlertsPopover({
 					<Typography.Link
 						key={alert.alertId}
 						onClick={(): void => {
-							params.set(QueryParams.ruleId, alert.alertId);
-							history.push(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`);
+							window.open(
+								`${ROUTES.ALERT_OVERVIEW}?${QueryParams.ruleId}=${alert.alertId}`,
+								'_blank',
+							);
 						}}
 						className="dashboards-popover-content-item"
 					>
@@ -85,7 +81,7 @@ function DashboardsAndAlertsPopover({
 			}));
 		}
 		return null;
-	}, [alerts, params]);
+	}, [alerts]);
 
 	const dashboardsPopoverContent = useMemo(() => {
 		if (dashboards && dashboards.length > 0) {
@@ -95,10 +91,11 @@ function DashboardsAndAlertsPopover({
 					<Typography.Link
 						key={dashboard.dashboardId}
 						onClick={(): void => {
-							safeNavigate(
+							window.open(
 								generatePath(ROUTES.DASHBOARD, {
 									dashboardId: dashboard.dashboardId,
 								}),
+								'_blank',
 							);
 						}}
 						className="dashboards-popover-content-item"
@@ -109,7 +106,7 @@ function DashboardsAndAlertsPopover({
 			}));
 		}
 		return null;
-	}, [dashboards, safeNavigate]);
+	}, [dashboards]);
 
 	if (isLoadingAlerts || isLoadingDashboards) {
 		return (

frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.styles.scss

@@ -245,6 +245,18 @@
 							background: var(--bg-slate-300);
 							border-radius: 1px;
 						}
+						.all-attributes-value-item {
+							display: flex;
+							align-items: center;
+							gap: 4px;
+
+							.copy-feedback {
+								display: inline-flex;
+								align-items: center;
+								color: var(--bg-forest-500);
+								animation: fade-in-out 1.5s ease-in-out;
+							}
+						}
 						.ant-btn {
 							text-align: left;
 							width: fit-content;
@@ -398,9 +410,8 @@
 					}
 
 					.all-attributes-key {
-						.ant-typography:last-child {
-							color: var(--bg-vanilla-200);
-							background-color: var(--bg-robin-300);
+						.all-attributes-contribution {
+							color: var(--bg-slate-400);
 						}
 					}
 				}
@@ -582,6 +593,14 @@
 			background: var(--bg-vanilla-100) !important;
 		}
 	}
+
+	.all-values-popover {
+		.all-values-item {
+			&:hover {
+				background: rgba(0, 0, 0, 0.04);
+			}
+		}
+	}
 }
 
 @keyframes fade-in-out {

frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.tsx

@@ -80,7 +80,14 @@ function MetricDetails({
 
 	const goToMetricsExplorerwithSelectedMetric = useCallback(() => {
 		if (metricName) {
-			const compositeQuery = getMetricDetailsQuery(metricName, metadata?.type);
+			const compositeQuery = getMetricDetailsQuery(
+				metricName,
+				metadata?.type,
+				undefined,
+				undefined,
+				undefined,
+				metadata?.isMonotonic,
+			);
 			handleExplorerTabChange(
 				PANEL_TYPES.TIME_SERIES,
 				{
@@ -89,6 +96,7 @@ function MetricDetails({
 					id: metricName,
 				},
 				ROUTES.METRICS_EXPLORER_EXPLORER,
+				true,
 			);
 			logEvent(MetricsExplorerEvents.OpenInExplorerClicked, {
 				[MetricsExplorerEventKeys.MetricName]: metricName,
@@ -96,7 +104,12 @@ function MetricDetails({
 				[MetricsExplorerEventKeys.Modal]: 'metric-details',
 			});
 		}
-	}, [metricName, handleExplorerTabChange, metadata?.type]);
+	}, [
+		metricName,
+		handleExplorerTabChange,
+		metadata?.type,
+		metadata?.isMonotonic,
+	]);
 
 	useEffect(() => {
 		logEvent(MetricsExplorerEvents.ModalOpened, {
@@ -182,6 +195,7 @@ function MetricDetails({
 				<AllAttributes
 					metricName={metricName}
 					metricType={metadata?.type}
+					isMonotonic={metadata?.isMonotonic}
 					minTime={minTime}
 					maxTime={maxTime}
 				/>

frontend/src/container/MetricsExplorer/MetricDetails/__tests__/DashboardsAndAlertsPopover.test.tsx

@@ -14,21 +14,8 @@ import {
 	MOCK_METRIC_NAME,
 } from './testUtlls';
 
-const mockSafeNavigate = jest.fn();
-jest.mock('hooks/useSafeNavigate', () => ({
-	useSafeNavigate: (): any => ({
-		safeNavigate: mockSafeNavigate,
-	}),
-}));
-const mockSetQuery = jest.fn();
-const mockUrlQuery = {
-	set: mockSetQuery,
-	toString: jest.fn(),
-};
-jest.mock('hooks/useUrlQuery', () => ({
-	__esModule: true,
-	default: jest.fn(() => mockUrlQuery),
-}));
+const mockWindowOpen = jest.fn();
+Object.defineProperty(window, 'open', { value: mockWindowOpen });
 
 const useGetMetricAlertsMock = jest.spyOn(
 	metricsExplorerHooks,
@@ -43,6 +30,7 @@ describe('DashboardsAndAlertsPopover', () => {
 	beforeEach(() => {
 		useGetMetricAlertsMock.mockReturnValue(getMockAlertsData());
 		useGetMetricDashboardsMock.mockReturnValue(getMockDashboardsData());
+		mockWindowOpen.mockClear();
 	});
 
 	it('renders the popover correctly with multiple dashboards and alerts', () => {
@@ -140,9 +128,10 @@ describe('DashboardsAndAlertsPopover', () => {
 		// Click on the first dashboard
 		await userEvent.click(screen.getByText(MOCK_DASHBOARD_1.dashboardName));
 
-		// Should navigate to the dashboard
-		expect(mockSafeNavigate).toHaveBeenCalledWith(
+		// Should open dashboard in new tab
+		expect(mockWindowOpen).toHaveBeenCalledWith(
 			`/dashboard/${MOCK_DASHBOARD_1.dashboardId}`,
+			'_blank',
 		);
 	});
 
@@ -158,10 +147,9 @@ describe('DashboardsAndAlertsPopover', () => {
 		// Click on the first alert rule
 		await userEvent.click(screen.getByText(MOCK_ALERT_1.alertName));
 
-		// Should navigate to the alert rule
-		expect(mockSetQuery).toHaveBeenCalledWith(
-			QueryParams.ruleId,
-			MOCK_ALERT_1.alertId,
+		expect(mockWindowOpen).toHaveBeenCalledWith(
+			`/alerts/overview?${QueryParams.ruleId}=${MOCK_ALERT_1.alertId}`,
+			'_blank',
 		);
 	});
 

frontend/src/container/MetricsExplorer/MetricDetails/__tests__/utils.test.ts

@@ -2,6 +2,7 @@ import {
 	MetrictypesTemporalityDTO,
 	MetrictypesTypeDTO,
 } from 'api/generated/services/sigNoz.schemas';
+import { ATTRIBUTE_TYPES } from 'constants/queryBuilder';
 
 import {
 	determineIsMonotonic,
@@ -139,7 +140,7 @@ describe('MetricDetails utils', () => {
 				TEST_METRIC_NAME,
 			);
 			expect(query.builder.queryData[0]?.aggregateAttribute?.type).toBe(
-				MetrictypesTypeDTO.sum,
+				ATTRIBUTE_TYPES.SUM,
 			);
 			expect(query.builder.queryData[0]?.aggregateOperator).toBe('rate');
 			expect(query.builder.queryData[0]?.timeAggregation).toBe('rate');
@@ -156,7 +157,7 @@ describe('MetricDetails utils', () => {
 				TEST_METRIC_NAME,
 			);
 			expect(query.builder.queryData[0]?.aggregateAttribute?.type).toBe(
-				MetrictypesTypeDTO.gauge,
+				ATTRIBUTE_TYPES.GAUGE,
 			);
 			expect(query.builder.queryData[0]?.aggregateOperator).toBe('avg');
 			expect(query.builder.queryData[0]?.timeAggregation).toBe('avg');
@@ -173,7 +174,7 @@ describe('MetricDetails utils', () => {
 				TEST_METRIC_NAME,
 			);
 			expect(query.builder.queryData[0]?.aggregateAttribute?.type).toBe(
-				MetrictypesTypeDTO.summary,
+				ATTRIBUTE_TYPES.GAUGE,
 			);
 			expect(query.builder.queryData[0]?.aggregateOperator).toBe('noop');
 			expect(query.builder.queryData[0]?.timeAggregation).toBe('noop');
@@ -190,7 +191,7 @@ describe('MetricDetails utils', () => {
 				TEST_METRIC_NAME,
 			);
 			expect(query.builder.queryData[0]?.aggregateAttribute?.type).toBe(
-				MetrictypesTypeDTO.histogram,
+				ATTRIBUTE_TYPES.HISTOGRAM,
 			);
 			expect(query.builder.queryData[0]?.aggregateOperator).toBe('noop');
 			expect(query.builder.queryData[0]?.timeAggregation).toBe('noop');
@@ -207,7 +208,7 @@ describe('MetricDetails utils', () => {
 				TEST_METRIC_NAME,
 			);
 			expect(query.builder.queryData[0]?.aggregateAttribute?.type).toBe(
-				MetrictypesTypeDTO.exponentialhistogram,
+				ATTRIBUTE_TYPES.EXPONENTIAL_HISTOGRAM,
 			);
 			expect(query.builder.queryData[0]?.aggregateOperator).toBe('noop');
 			expect(query.builder.queryData[0]?.timeAggregation).toBe('noop');

frontend/src/container/MetricsExplorer/MetricDetails/types.ts

@@ -34,6 +34,7 @@ export interface MetadataProps {
 export interface AllAttributesProps {
 	metricName: string;
 	metricType: MetrictypesTypeDTO | undefined;
+	isMonotonic?: boolean;
 	minTime?: number;
 	maxTime?: number;
 }

frontend/src/container/MetricsExplorer/MetricDetails/utils.tsx

@@ -5,7 +5,7 @@ import {
 	MetrictypesTypeDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { SpaceAggregation, TimeAggregation } from 'api/v5/v5';
-import { initialQueriesMap } from 'constants/queryBuilder';
+import { initialQueriesMap, toAttributeType } from 'constants/queryBuilder';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
@@ -88,15 +88,25 @@ export function getMetricDetailsQuery(
 	filter?: { key: string; value: string },
 	groupBy?: string,
 	limit?: number,
+	isMonotonic?: boolean,
 ): Query {
 	let timeAggregation;
 	let spaceAggregation;
 	let aggregateOperator;
+	const isNonMonotonicSum =
+		metricType === MetrictypesTypeDTO.sum && isMonotonic === false;
+
 	switch (metricType) {
 		case MetrictypesTypeDTO.sum:
-			timeAggregation = 'rate';
-			spaceAggregation = 'sum';
-			aggregateOperator = 'rate';
+			if (isNonMonotonicSum) {
+				timeAggregation = 'avg';
+				spaceAggregation = 'avg';
+				aggregateOperator = 'avg';
+			} else {
+				timeAggregation = 'rate';
+				spaceAggregation = 'sum';
+				aggregateOperator = 'rate';
+			}
 			break;
 		case MetrictypesTypeDTO.gauge:
 			timeAggregation = 'avg';
@@ -121,6 +131,8 @@ export function getMetricDetailsQuery(
 			break;
 	}
 
+	const attributeType = toAttributeType(metricType, isMonotonic);
+
 	return {
 		...initialQueriesMap[DataSource.METRICS],
 		builder: {
@@ -129,8 +141,8 @@ export function getMetricDetailsQuery(
 					...initialQueriesMap[DataSource.METRICS].builder.queryData[0],
 					aggregateAttribute: {
 						key: metricName,
-						type: metricType ?? '',
-						id: `${metricName}----${metricType}---string--`,
+						type: attributeType,
+						id: `${metricName}----${attributeType}---string--`,
 						dataType: DataTypes.String,
 					},
 					aggregations: [