chore: broke down drilldown navigate into a saperate hook

fix: handle cancel functionality for Run Query Button (#10958 )
* fix: add ERR_CANCELED retry skip and new query key constants * refactor: add disabled prop and handleCancelQuery to shared query components (#10959) * refactor: add disabled prop and handleCancelQuery to shared query components * feat: add cancel query support to alert rule editing (#10960) * feat: add cancel query support to alert rule editing * feat: add cancel query support to CreateAlertV2 (#10961) * feat: add cancel query support to CreateAlertV2 * feat: add cancel query and AbortSignal support to MetricsExplorer Explorer (#10962) * feat: add cancel query and AbortSignal support to MetricsExplorer Explorer * feat: add cancel query support to MetricsExplorer Inspect (#10963) * feat: add cancel query support to MetricsExplorer Inspect * feat: add cancel query support to MetricsExplorer Summary (#10964) * feat: add cancel query support to MetricsExplorer Summary * feat: add cancel query support to MeterExplorer and dashboard widgets (#10965) * feat: add cancel query support to MeterExplorer and dashboard widgets * feat: add cancel query support to Logs, Traces, Exceptions and API Monitoring (#10972) * feat: add cancel query support to Logs, Traces, Errors, and API Monitoring * refactor: remove deprecated props and enforce strict query cancel interfaces (#10974) * refactor: remove deprecated props and enforce strict query cancel interfaces * fix: metrics explorer inspect cancel and run query bugs (#10975) * fix: metrics explorer inspect cancel and run query bugs * fix: api monitoring cancel and run query bugs (#10984) * feat: add cancelled query placeholder UI to alerts, explorers, exceptions, and api monitoring (#10988) * feat: add cancel query support to MeterExplorer and dashboard widgets * fix: api monitoring cancel and run query bugs * feat: add cancelled query placeholder UI to alerts, explorers, exceptions, and api monitoring * fix: cancelled placeholder for alert v2 and metrics inspect, use css modules * fix: cancelled placeholder race condition in metrics inspect auto-reset * fix: prioritize cancelled state over loading in metrics inspect content * fix: keep query builder rendered and match graph view height in inspect fallback * feat: add cancelled query placeholder to logs, traces, and dashboard widgets (#11007) * feat: add cancelled query placeholder to logs, traces, and dashboard widgets * fix: reset cancel on run and swap only chart body in widget graph * fix: use constants for max retry count (#11049) * fix: use semantic tokens
2026-04-23 12:20:31 +01:00 · 2026-04-23 13:46:19 +05:30 · 2026-04-23 06:58:50 +00:00 · 2026-04-22 21:22:45 +00:00 · 2026-04-22 17:37:38 +00:00 · 2026-04-22 17:27:39 +00:00
147 changed files with 10823 additions and 2902 deletions
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -10,6 +10,7 @@
 /frontend/src/container/OnboardingV2Container/AddDataSource/AddDataSource.tsx @makeavish

 # CI
+
 /deploy/ @therealpandey
 .github @therealpandey
 go.mod @therealpandey
@@ -108,6 +109,7 @@ go.mod @therealpandey
 /pkg/modules/role/ @therealpandey

 # IdentN Owners
+
 /pkg/identn/ @therealpandey
 /pkg/http/middleware/identn.go @therealpandey

@@ -115,6 +117,10 @@ go.mod @therealpandey

 /tests/integration/ @therealpandey

+# Flagger Owners
+
+/pkg/flagger/ @therealpandey
+
 # OpenAPI types generator

 /frontend/src/api @SigNoz/frontend-maintainers
@@ -134,6 +140,7 @@ go.mod @therealpandey
 /frontend/src/container/ListOfDashboard/ @SigNoz/pulse-frontend

 # Dashboard Widget Page
+
 /frontend/src/pages/DashboardWidget/ @SigNoz/pulse-frontend
 /frontend/src/container/NewWidget/ @SigNoz/pulse-frontend

@@ -149,6 +156,7 @@ go.mod @therealpandey
 /frontend/src/container/PublicDashboardContainer/ @SigNoz/pulse-frontend

 ## Dashboard Libs + Components
+
 /frontend/src/lib/uPlotV2/ @SigNoz/pulse-frontend
 /frontend/src/lib/dashboard/ @SigNoz/pulse-frontend
 /frontend/src/lib/dashboardVariables/ @SigNoz/pulse-frontend
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,23 +1,22 @@
 {
-	"eslint.workingDirectories": [
-		"./frontend"
-	],
-	"editor.formatOnSave": true,
-	"editor.defaultFormatter": "esbenp.prettier-vscode",
-	"editor.codeActionsOnSave": {
-		"source.fixAll.eslint": "explicit"
-	},
-	"prettier.requireConfig": true,
-	"[go]": {
-		"editor.formatOnSave": true,
-		"editor.defaultFormatter": "golang.go"
-	},
-	"[sql]": {
-		"editor.defaultFormatter": "adpyke.vscode-sql-formatter"
-	},
-	"[html]": {
-		"editor.defaultFormatter": "vscode.html-language-features"
-	},
-	"python-envs.defaultEnvManager": "ms-python.python:system",
-	"python-envs.pythonProjects": []
+  "oxc.typeAware": true,
+  "oxc.tsConfigPath": "./frontend/tsconfig.json",
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "oxc.oxc-vscode",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.oxc": "explicit"
+  },
+  "[go]": {
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "golang.go"
+  },
+  "[sql]": {
+    "editor.defaultFormatter": "adpyke.vscode-sql-formatter"
+  },
+  "[html]": {
+    "editor.defaultFormatter": "vscode.html-language-features"
+  },
+  "python-envs.defaultEnvManager": "ms-python.python:system",
+  "python-envs.pythonProjects": []
 }
+
--- a/docs/api/openapi.yml
+++ b/docs/api/openapi.yml
--- a/ee/zeus/httpzeus/provider.go
+++ b/ee/zeus/httpzeus/provider.go
@@ -7,6 +7,7 @@ import (
 	"io"
 	"net/http"
 	"net/url"
+	"time"

 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/factory"
@@ -37,6 +38,7 @@ func New(ctx context.Context, providerSettings factory.ProviderSettings, config
 		providerSettings.MeterProvider,
 		client.WithRequestResponseLog(true),
 		client.WithRetryCount(3),
+		client.WithTimeout(30*time.Second),
 	)
 	if err != nil {
 		return nil, err
--- a/frontend/.eslintignore
+++ b/frontend/.eslintignore
@@ -1,9 +0,0 @@
-node_modules
-build
-eslint-rules/
-stylelint-rules/
-*.typegen.ts
-i18-generate-hash.js
-src/parser/TraceOperatorParser/**
-
-orval.config.ts
--- a/frontend/.eslintrc.cjs
+++ b/frontend/.eslintrc.cjs
@@ -1,269 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const path = require('path');
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const rulesDirPlugin = require('eslint-plugin-rulesdir');
-// eslint-rules/ always points to frontend/eslint-rules/ regardless of workspace root.
-rulesDirPlugin.RULES_DIR = path.join(__dirname, 'eslint-rules');
-
-/**
- * ESLint Configuration for SigNoz Frontend
- */
-module.exports = {
-	ignorePatterns: [
-		'src/parser/*.ts',
-		'scripts/update-registry.js',
-		'scripts/generate-permissions-type.js',
-	],
-	env: {
-		browser: true,
-		es2021: true,
-		node: true,
-	},
-	extends: [
-		'eslint:recommended',
-		'plugin:react/recommended',
-		'plugin:@typescript-eslint/recommended',
-		'plugin:react-hooks/recommended',
-		'plugin:prettier/recommended',
-		'plugin:sonarjs/recommended',
-		'plugin:react/jsx-runtime',
-	],
-	parser: '@typescript-eslint/parser',
-	parserOptions: {
-		project: './tsconfig.json',
-		tsconfigRootDir: __dirname,
-		ecmaFeatures: {
-			jsx: true,
-		},
-		ecmaVersion: 2021,
-		sourceType: 'module',
-	},
-	plugins: [
-		'rulesdir', // Local custom rules
-		'react', // React-specific rules
-		'@typescript-eslint', // TypeScript linting
-		'simple-import-sort', // Auto-sort imports
-		'react-hooks', // React Hooks rules
-		'prettier', // Code formatting
-		// 'jest', // TODO: Wait support on Biome to enable again
-		'jsx-a11y', // Accessibility rules
-		'import', // Import/export linting
-		'sonarjs', // Code quality/complexity
-		// TODO: Uncomment after running: yarn add -D eslint-plugin-spellcheck
-		// 'spellcheck', // Correct spellings
-	],
-	settings: {
-		react: {
-			version: 'detect',
-		},
-		'import/resolver': {
-			node: {
-				paths: ['src'],
-				extensions: ['.js', '.jsx', '.ts', '.tsx'],
-			},
-		},
-	},
-	rules: {
-		// Asset migration — base-path safety
-		'rulesdir/no-unsupported-asset-pattern': 'error',
-
-		// Code quality rules
-		'prefer-const': 'error', // Enforces const for variables never reassigned
-		'no-var': 'error', // Disallows var, enforces let/const
-		'no-else-return': ['error', { allowElseIf: false }], // Reduces nesting by disallowing else after return
-		'no-cond-assign': 'error', // Prevents accidental assignment in conditions (if (x = 1) instead of if (x === 1))
-		'no-debugger': 'error', // Disallows debugger statements in production code
-		curly: 'error', // Requires curly braces for all control statements
-		eqeqeq: ['error', 'always', { null: 'ignore' }], // Enforces === and !== (allows == null for null/undefined check)
-		'no-console': ['error', { allow: ['warn', 'error'] }], // Warns on console.log, allows console.warn/error
-		// TODO: Change this to error in May 2026
-		'max-params': ['warn', 3], // a function can have max 3 params after which it should become an object
-
-		// TypeScript rules
-		'@typescript-eslint/explicit-function-return-type': 'error', // Requires explicit return types on functions
-		'@typescript-eslint/no-unused-vars': [
-			// Disallows unused variables/args
-			'error',
-			{
-				argsIgnorePattern: '^_', // Allows unused args prefixed with _ (e.g., _unusedParam)
-				varsIgnorePattern: '^_', // Allows unused vars prefixed with _ (e.g., _unusedVar)
-			},
-		],
-		'@typescript-eslint/no-explicit-any': 'warn', // Warns when using 'any' type (consider upgrading to error)
-		// TODO: Change to 'error' after fixing ~80 empty function placeholders in providers/contexts
-		'@typescript-eslint/no-empty-function': 'off', // Disallows empty function bodies
-		'@typescript-eslint/no-var-requires': 'error', // Disallows require() in TypeScript (use import instead)
-		'@typescript-eslint/ban-ts-comment': 'warn', // Allows @ts-ignore comments (sometimes needed for third-party libs)
-		'no-empty-function': 'off', // Disabled in favor of TypeScript version above
-
-		// React rules
-		'react/jsx-filename-extension': [
-			'error',
-			{
-				extensions: ['.tsx', '.jsx'], // Warns if JSX is used in non-.jsx/.tsx files
-			},
-		],
-		'react/prop-types': 'off', // Disabled - using TypeScript instead
-		'react/jsx-props-no-spreading': 'off', // Allows {...props} spreading (common in HOCs, forms, wrappers)
-		'react/no-array-index-key': 'error', // Prevents using array index as key (causes bugs when list changes)
-
-		// Accessibility rules
-		'jsx-a11y/label-has-associated-control': [
-			'error',
-			{
-				required: {
-					some: ['nesting', 'id'], // Labels must either wrap inputs or use htmlFor/id
-				},
-			},
-		],
-
-		// React Hooks rules
-		'react-hooks/rules-of-hooks': 'error', // Enforces Rules of Hooks (only call at top level)
-		'react-hooks/exhaustive-deps': 'warn', // Warns about missing dependencies in useEffect/useMemo/useCallback
-
-		// Import/export rules
-		'import/extensions': [
-			'error',
-			'ignorePackages',
-			{
-				js: 'never', // Disallows .js extension in imports
-				jsx: 'never', // Disallows .jsx extension in imports
-				ts: 'never', // Disallows .ts extension in imports
-				tsx: 'never', // Disallows .tsx extension in imports
-			},
-		],
-		'import/no-extraneous-dependencies': ['error', { devDependencies: true }], // Prevents importing packages not in package.json
-		'import/no-cycle': 'warn', // Warns about circular dependencies
-
-		// Import sorting rules
-		'simple-import-sort/imports': [
-			'error',
-			{
-				groups: [
-					['^react', '^@?\\w'], // React first, then external packages
-					['^@/'], // Absolute imports with @ alias
-					['^\\u0000'], // Side effect imports (import './file')
-					['^\\.'], // Relative imports
-					['^.+\\.s?css$'], // Style imports
-				],
-			},
-		],
-		'simple-import-sort/exports': 'error', // Auto-sorts exports
-
-		// Prettier - code formatting
-		'prettier/prettier': [
-			'error',
-			{},
-			{
-				usePrettierrc: true, // Uses .prettierrc.json for formatting rules
-			},
-		],
-
-		// SonarJS - code quality and complexity
-		'sonarjs/no-duplicate-string': 'off', // Disabled - can be noisy (enable periodically to check)
-
-		// State management governance
-		// Approved patterns: Zustand, nuqs (URL state), react-query (server state), useState/useRef/useReducer, localStorage/sessionStorage for simple cases
-		'no-restricted-imports': [
-			'error',
-			{
-				paths: [
-					{
-						name: 'redux',
-						message:
-							'[State mgmt] redux is deprecated. Migrate to Zustand, nuqs, or react-query.',
-					},
-					{
-						name: 'react-redux',
-						message:
-							'[State mgmt] react-redux is deprecated. Migrate to Zustand, nuqs, or react-query.',
-					},
-					{
-						name: 'xstate',
-						message:
-							'[State mgmt] xstate is deprecated. Migrate to Zustand or react-query.',
-					},
-					{
-						name: '@xstate/react',
-						message:
-							'[State mgmt] @xstate/react is deprecated. Migrate to Zustand or react-query.',
-					},
-					{
-						// Restrict React Context — useState/useRef/useReducer remain allowed
-						name: 'react',
-						importNames: ['createContext', 'useContext'],
-						message:
-							'[State mgmt] React Context is deprecated. Migrate shared state to Zustand.',
-					},
-					{
-						// immer used standalone as a store pattern is deprecated; Zustand bundles it internally
-						name: 'immer',
-						message:
-							'[State mgmt] Direct immer usage is deprecated. Use Zustand (which integrates immer via the immer middleware) instead.',
-					},
-				],
-			},
-		],
-		'no-restricted-syntax': [
-			'error',
-			{
-				selector:
-					// TODO: Make this generic on removal of redux
-					"CallExpression[callee.property.name='getState'][callee.object.name=/^use/]",
-				message:
-					'Avoid calling .getState() directly. Export a standalone action from the store instead.',
-			},
-		],
-	},
-	overrides: [
-		{
-			files: ['src/**/*.{jsx,tsx,ts}'],
-			excludedFiles: [
-				'**/*.test.{js,jsx,ts,tsx}',
-				'**/*.spec.{js,jsx,ts,tsx}',
-				'**/__tests__/**/*.{js,jsx,ts,tsx}',
-			],
-			rules: {
-				'no-restricted-properties': [
-					'error',
-					{
-						object: 'navigator',
-						property: 'clipboard',
-						message:
-							'Do not use navigator.clipboard directly since it does not work well with specific browsers. Use hook useCopyToClipboard from react-use library. https://streamich.github.io/react-use/?path=/story/side-effects-usecopytoclipboard--docs',
-					},
-				],
-			},
-		},
-		{
-			files: [
-				'**/*.test.{js,jsx,ts,tsx}',
-				'**/*.spec.{js,jsx,ts,tsx}',
-				'**/__tests__/**/*.{js,jsx,ts,tsx}',
-			],
-			rules: {
-				// Tests often have intentional duplication and complexity - disable SonarJS rules
-				'sonarjs/cognitive-complexity': 'off', // Tests can be complex
-				'sonarjs/no-identical-functions': 'off', // Similar test patterns are OK
-				'sonarjs/no-small-switch': 'off', // Small switches are OK in tests
-			},
-		},
-		{
-			files: ['src/api/generated/**/*.ts'],
-			rules: {
-				'@typescript-eslint/explicit-function-return-type': 'off',
-				'@typescript-eslint/explicit-module-boundary-types': 'off',
-				'no-nested-ternary': 'off',
-				'@typescript-eslint/no-unused-vars': 'warn',
-			},
-		},
-		{
-			// Store definition files are the only place .getState() is permitted —
-			// they are the canonical source for standalone action exports.
-			files: ['**/*Store.{ts,tsx}'],
-			rules: {
-				'no-restricted-syntax': 'off',
-			},
-		},
-	],
-};
--- a/frontend/.oxfmtrc.json
+++ b/frontend/.oxfmtrc.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "trailingComma": "all",
+  "useTabs": true,
+  "tabWidth": 1,
+  "singleQuote": true,
+  "jsxSingleQuote": false,
+  "semi": true,
+  "printWidth": 80,
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "quoteProps": "as-needed",
+  "proseWrap": "preserve",
+  "htmlWhitespaceSensitivity": "css",
+  "embeddedLanguageFormatting": "auto",
+  "sortPackageJson": false,
+  "ignorePatterns": [
+    "build",
+    "coverage",
+    "public/",
+    "**/*.md",
+    "**/*.json",
+    "src/parser/**",
+    "src/TraceOperator/parser/**"
+  ]
+}
--- a/frontend/.oxlintrc.json
+++ b/frontend/.oxlintrc.json
@@ -0,0 +1,615 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "jsPlugins": [
+    "./plugins/signoz.mjs",
+    "eslint-plugin-sonarjs"
+  ],
+  "plugins": [
+    "eslint",
+    "react",
+    "react-perf",
+    "typescript",
+    "unicorn",
+    "jsx-a11y",
+    "import",
+    "jest",
+    "promise",
+    "jsdoc"
+  ],
+  "categories": {
+    "correctness": "warn"
+    // TODO: Eventually turn this to error, and enable other categories
+  },
+  "env": {
+    "builtin": true,
+    "es2021": true,
+    "browser": true,
+    "jest": true,
+    "node": true
+  },
+  "options": {
+    "typeAware": true,
+    "typeCheck": false
+  },
+  "settings": {
+    "react": {
+      "version": "18.2.0"
+    }
+  },
+  "rules": {
+    "constructor-super": "error",
+    "for-direction": "error",
+    "getter-return": "error",
+    "no-async-promise-executor": "error",
+    "no-case-declarations": "error",
+    "no-class-assign": "error",
+    "no-compare-neg-zero": "error",
+    "no-cond-assign": "error",
+    // Prevents accidental assignment in conditions (if (x = 1) instead of if (x === 1))
+    "no-const-assign": "error",
+    "no-constant-binary-expression": "error",
+    "no-constant-condition": "error",
+    "no-control-regex": "error",
+    "no-debugger": "error",
+    // Disallows debugger statements in production code
+    "no-delete-var": "error",
+    "no-dupe-class-members": "error",
+    "no-dupe-else-if": "error",
+    "no-dupe-keys": "error",
+    "no-duplicate-case": "error",
+    "no-empty": "error",
+    "no-empty-character-class": "error",
+    "no-empty-pattern": "error",
+    "no-empty-static-block": "error",
+    "no-ex-assign": "error",
+    "no-extra-boolean-cast": "error",
+    "no-fallthrough": "error",
+    "no-func-assign": "error",
+    "no-global-assign": "error",
+    "no-import-assign": "error",
+    "no-invalid-regexp": "error",
+    "no-irregular-whitespace": "error",
+    "no-loss-of-precision": "error",
+    "no-misleading-character-class": "error",
+    "no-new-native-nonconstructor": "error",
+    "no-nonoctal-decimal-escape": "error",
+    "no-obj-calls": "error",
+    "no-prototype-builtins": "error",
+    "no-redeclare": "error",
+    "no-regex-spaces": "error",
+    "no-self-assign": "error",
+    "no-setter-return": "error",
+    "no-shadow-restricted-names": "warn",
+    // TODO: Change to error after migration to oxlint
+    "no-sparse-arrays": "error",
+    "no-this-before-super": "error",
+    "no-undef": "warn",
+    // TODO: Change to error after migration to oxlint
+    "no-unreachable": "warn",
+    // TODO: Change to error after the migration to oxlint
+    "no-unsafe-finally": "error",
+    "no-unsafe-negation": "error",
+    "no-unsafe-optional-chaining": "warn",
+    // TODO: Change to error after migration to oxlint
+    "no-unused-labels": "error",
+    "no-unused-private-class-members": "error",
+    "no-useless-backreference": "error",
+    "no-useless-catch": "error",
+    "no-useless-escape": "error",
+    "no-with": "error",
+    "require-yield": "error",
+    "use-isnan": "error",
+    "valid-typeof": "error",
+    "prefer-rest-params": "error",
+    "prefer-spread": "error",
+    "no-inner-declarations": "error",
+    // "no-octal": "error", // Not supported by oxlint
+    "react/display-name": "error",
+    "react/jsx-key": "warn",
+    // TODO: Change to error after migration to oxlint
+    "react/jsx-no-comment-textnodes": "error",
+    "react/jsx-no-duplicate-props": "error",
+    "react/jsx-no-target-blank": "warn",
+    // TODO: Change to error after migration to oxlint
+    "react/jsx-no-undef": "warn",
+    "react/no-children-prop": "error",
+    "react/no-danger-with-children": "error",
+    "react/no-direct-mutation-state": "error",
+    "react/no-find-dom-node": "error",
+    "react/no-is-mounted": "error",
+    "react/no-render-return-value": "error",
+    "react/no-string-refs": "error",
+    "react/no-unescaped-entities": "error",
+    "react/no-unknown-property": "error",
+    "react/require-render-return": "error",
+    "react/no-unsafe": "off",
+    "no-array-constructor": "error",
+    "@typescript-eslint/no-duplicate-enum-values": "warn",
+    // TODO: Change to error after migration to oxlint
+    "@typescript-eslint/no-empty-object-type": "error",
+    "@typescript-eslint/no-explicit-any": "warn",
+    // Warns when using 'any' type (consider upgrading to error)
+    "@typescript-eslint/no-empty-function": "off",
+    // TODO: Change to 'error' after fixing ~80 empty function placeholders in providers/contexts
+    "@typescript-eslint/ban-ts-comment": "warn",
+    // Warns when using @ts-ignore comments (sometimes needed for third-party libs)
+    "no-empty-function": "off",
+    // Disabled in favor of TypeScript version above
+    "@typescript-eslint/no-extra-non-null-assertion": "error",
+    "@typescript-eslint/no-misused-new": "error",
+    "@typescript-eslint/no-namespace": "error",
+    "@typescript-eslint/no-non-null-asserted-optional-chain": "error",
+    "@typescript-eslint/no-require-imports": "error",
+    "@typescript-eslint/no-this-alias": "error",
+    "@typescript-eslint/no-unnecessary-type-constraint": "warn",
+    // TODO: Change to error after migration to oxlint
+    "@typescript-eslint/no-unsafe-declaration-merging": "error",
+    "@typescript-eslint/no-unsafe-function-type": "error",
+    "no-unused-expressions": "warn",
+    // TODO: Change to error after migration to oxlint
+    "@typescript-eslint/no-wrapper-object-types": "error",
+    "@typescript-eslint/prefer-as-const": "error",
+    "@typescript-eslint/prefer-namespace-keyword": "error",
+    "@typescript-eslint/triple-slash-reference": "error",
+    "@typescript-eslint/adjacent-overload-signatures": "error",
+    "@typescript-eslint/ban-types": "error",
+    "@typescript-eslint/explicit-module-boundary-types": "warn",
+    "@typescript-eslint/no-empty-interface": "error",
+    "@typescript-eslint/no-inferrable-types": "error",
+    "@typescript-eslint/no-non-null-assertion": "warn",
+    "@typescript-eslint/no-unused-vars": [
+      // TypeScript-specific unused vars checking
+      "error",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_",
+        "caughtErrors": "none"
+      }
+    ],
+    "curly": "error",
+    // Requires curly braces for all control statements
+    // TODO: Change to error after migration to oxlint
+    "prefer-const": "warn",
+    // Enforces const for variables never reassigned
+    "no-var": "error",
+    // Disallows var, enforces let/const
+    "no-else-return": [
+      // Reduces nesting by disallowing else after return
+      "error",
+      {
+        "allowElseIf": false
+      }
+    ],
+    "eqeqeq": [
+      // Enforces === and !== (allows == null for null/undefined check)
+      "error",
+      "always",
+      {
+        "null": "ignore"
+      }
+    ],
+    "no-console": [
+      // Warns on console.log, allows console.warn/error
+      "error",
+      {
+        "allow": [
+          "warn",
+          "error"
+        ]
+      }
+    ],
+    "max-params": [
+      "warn",
+      3
+    ],
+    // Warns when functions have more than 3 parameters
+    "@typescript-eslint/explicit-function-return-type": "error",
+    // Requires explicit return types on functions
+    "@typescript-eslint/no-var-requires": "error",
+    // Disallows require() in TypeScript (use import instead)
+    // Disabled - using TypeScript instead
+    "react/jsx-props-no-spreading": "off",
+    // Allows {...props} spreading (common in HOCs, forms, wrappers)
+    "react/jsx-filename-extension": [
+      // Warns if JSX is used in non-.jsx/.tsx files
+      "error",
+      {
+        "extensions": [
+          ".tsx",
+          ".jsx"
+        ]
+      }
+    ],
+    "react/no-array-index-key": "error",
+    // Prevents using array index as key (causes bugs when list changes)
+    "jsx-a11y/label-has-associated-control": [
+      // Accessibility rules - Labels must either wrap inputs or use htmlFor/id
+      "error",
+      {
+        "required": {
+          "some": [
+            "nesting",
+            "id"
+          ]
+        }
+      }
+    ],
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        // Import/export rules - Disallows .js/.jsx/.ts/.tsx extension in imports
+        "js": "never",
+        "jsx": "never",
+        "ts": "never",
+        "tsx": "never"
+      }
+    ],
+    "import/no-cycle": "warn",
+    // Warns about circular dependencies
+    "import/first": "error",
+    "import/no-duplicates": "warn",
+    // TODO: Changed to warn during oxlint migration, should be changed to error
+    "arrow-body-style": "off",
+    "jest/no-disabled-tests": "warn",
+    // Jest test rules
+    "jest/no-focused-tests": "error",
+    "jest/no-identical-title": "warn",
+    "jest/prefer-to-have-length": "warn",
+    "jest/valid-expect": "warn",
+    // TODO: Change to error after migration to oxlint
+    // TODO: Change to error after migration to oxlint
+    "react-hooks/rules-of-hooks": "warn",
+    // React Hooks rules - Enforces Rules of Hooks (only call at top level)
+    "react-hooks/exhaustive-deps": "warn",
+    // Warns about missing dependencies in useEffect/useMemo/useCallback
+    // NOTE: The following react-hooks rules are not supported right know, follow the progress at https://github.com/oxc-project/oxc/issues/1022
+    // Most of them are for React Compiler, which we don't have enabled right know
+    // "react-hooks/config": "error",
+    // "react-hooks/error-boundaries": "error",
+    // "react-hooks/component-hook-factories": "error",
+    // "react-hooks/gating": "error",
+    // "react-hooks/globals": "error",
+    // "react-hooks/immutability": "error",
+    // "react-hooks/preserve-manual-memoization": "error",
+    // "react-hooks/purity": "error",
+    // "react-hooks/refs": "error",
+    // "react-hooks/set-state-in-effect": "error",
+    // "react-hooks/set-state-in-render": "error",
+    // "react-hooks/static-components": "error",
+    // "react-hooks/unsupported-syntax": "warn",
+    // "react-hooks/use-memo": "error",
+    // "react-hooks/incompatible-library": "warn",
+    "signoz/no-unsupported-asset-pattern": "error",
+    // Prevents the wrong usage of assets to break custom base path installations
+    "signoz/no-zustand-getstate-in-hooks": "error",
+    // Prevents useStore.getState() - export standalone actions instead
+    "signoz/no-navigator-clipboard": "error",
+    // Prevents navigator.clipboard - use useCopyToClipboard hook instead (disabled in tests via override)
+    "no-restricted-imports": [
+      "error",
+      {
+        "paths": [
+          {
+            "name": "redux",
+            "message": "[State mgmt] redux is deprecated. Migrate to Zustand, nuqs, or react-query."
+          },
+          {
+            "name": "react-redux",
+            "message": "[State mgmt] react-redux is deprecated. Migrate to Zustand, nuqs, or react-query."
+          },
+          {
+            "name": "xstate",
+            "message": "[State mgmt] xstate is deprecated. Migrate to Zustand or react-query."
+          },
+          {
+            "name": "@xstate/react",
+            "message": "[State mgmt] @xstate/react is deprecated. Migrate to Zustand or react-query."
+          },
+          {
+            "name": "react",
+            "importNames": [
+              "createContext",
+              "useContext"
+            ],
+            "message": "[State mgmt] React Context is deprecated. Migrate shared state to Zustand."
+          },
+          {
+            "name": "immer",
+            "message": "[State mgmt] Direct immer usage is deprecated. Use Zustand (which integrates immer via the immer middleware) instead."
+          }
+        ]
+      }
+    ],
+    "react/no-array-index-key": "warn",
+    // TODO: Changed to warn during oxlint migration, should be changed to error,
+
+    "unicorn/error-message": "warn",
+    "unicorn/escape-case": "warn",
+    "unicorn/new-for-builtins": "warn",
+    "unicorn/no-abusive-eslint-disable": "warn",
+    "unicorn/no-console-spaces": "warn",
+    "unicorn/no-instanceof-array": "warn",
+    "unicorn/no-invalid-remove-event-listener": "warn",
+    "unicorn/no-new-array": "warn",
+    "unicorn/no-new-buffer": "warn",
+    "unicorn/no-thenable": "warn",
+    "unicorn/no-unreadable-array-destructuring": "warn",
+    "unicorn/no-useless-fallback-in-spread": "warn",
+    "unicorn/no-useless-length-check": "warn",
+    "unicorn/no-useless-promise-resolve-reject": "warn",
+    "unicorn/no-useless-spread": "warn",
+    "unicorn/no-zero-fractions": "warn",
+    "unicorn/number-literal-case": "warn",
+    "unicorn/prefer-array-find": "warn",
+    "unicorn/prefer-array-flat": "warn",
+    "unicorn/prefer-array-flat-map": "warn",
+    "unicorn/prefer-array-index-of": "warn",
+    "unicorn/prefer-array-some": "warn",
+    "unicorn/prefer-at": "warn",
+    "unicorn/prefer-code-point": "warn",
+    "unicorn/prefer-date-now": "warn",
+    "unicorn/prefer-default-parameters": "warn",
+    "unicorn/prefer-includes": "warn",
+    "unicorn/prefer-modern-math-apis": "warn",
+    "unicorn/prefer-native-coercion-functions": "warn",
+    "unicorn/prefer-node-protocol": "off",
+    "unicorn/prefer-number-properties": "warn",
+    "unicorn/prefer-optional-catch-binding": "warn",
+    "unicorn/prefer-regexp-test": "warn",
+    "unicorn/prefer-set-has": "warn",
+    "unicorn/prefer-string-replace-all": "warn",
+    "unicorn/prefer-string-slice": "warn",
+    "unicorn/prefer-string-starts-ends-with": "warn",
+    "unicorn/prefer-string-trim-start-end": "warn",
+    "unicorn/prefer-type-error": "warn",
+    "unicorn/require-array-join-separator": "warn",
+    "unicorn/require-number-to-fixed-digits-argument": "warn",
+    "unicorn/throw-new-error": "warn",
+    "unicorn/consistent-function-scoping": "warn",
+    "unicorn/explicit-length-check": "warn",
+    "unicorn/filename-case": [
+      "warn",
+      {
+        "case": "kebabCase"
+      }
+    ],
+    "unicorn/no-array-for-each": "warn",
+    "unicorn/no-lonely-if": "warn",
+    "unicorn/no-negated-condition": "warn",
+    "unicorn/no-null": "warn",
+    "unicorn/no-object-as-default-parameter": "warn",
+    "unicorn/no-static-only-class": "warn",
+    "unicorn/no-this-assignment": "warn",
+    "unicorn/no-unreadable-iife": "warn",
+    "unicorn/no-useless-switch-case": "warn",
+    "unicorn/no-useless-undefined": "warn",
+    "unicorn/prefer-add-event-listener": "warn",
+    "unicorn/prefer-dom-node-append": "warn",
+    "unicorn/prefer-dom-node-dataset": "warn",
+    "unicorn/prefer-dom-node-remove": "warn",
+    "unicorn/prefer-dom-node-text-content": "warn",
+    "unicorn/prefer-keyboard-event-key": "warn",
+    "unicorn/prefer-math-trunc": "warn",
+    "unicorn/prefer-modern-dom-apis": "warn",
+    "unicorn/prefer-negative-index": "warn",
+    "unicorn/prefer-prototype-methods": "warn",
+    "unicorn/prefer-query-selector": "warn",
+    "unicorn/prefer-reflect-apply": "warn",
+    "unicorn/prefer-set-size": "warn",
+    "unicorn/prefer-spread": "warn",
+    "unicorn/prefer-ternary": "warn",
+    "unicorn/require-post-message-target-origin": "warn",
+    "oxc/bad-array-method-on-arguments": "error",
+    "oxc/bad-bitwise-operator": "error",
+    "oxc/bad-comparison-sequence": "error",
+    "oxc/bad-object-literal-comparison": "error",
+    "oxc/bad-replace-all-arg": "error",
+    "oxc/double-comparisons": "error",
+    "oxc/erasing-op": "error",
+    "oxc/misrefactored-assign-op": "error",
+    "oxc/missing-throw": "error",
+    "oxc/no-accumulating-spread": "error",
+    "oxc/no-async-endpoint-handlers": "error",
+    "oxc/no-const-enum": "error",
+    "oxc/number-arg-out-of-range": "error",
+    "oxc/only-used-in-recursion": "warn",
+    "oxc/uninvoked-array-callback": "error",
+    "jest/consistent-test-it": [
+      "warn",
+      {
+        "fn": "it"
+      }
+    ],
+    "jest/expect-expect": "warn",
+    "jest/no-alias-methods": "warn",
+    "jest/no-commented-out-tests": "warn",
+    "jest/no-conditional-expect": "warn",
+    "jest/no-deprecated-functions": "warn",
+    "jest/no-done-callback": "warn",
+    "jest/no-duplicate-hooks": "warn",
+    "jest/no-export": "warn",
+    "jest/no-jasmine-globals": "warn",
+    "jest/no-mocks-import": "warn",
+    "jest/no-standalone-expect": "warn",
+    "jest/no-test-prefixes": "warn",
+    "jest/no-test-return-statement": "warn",
+    "jest/prefer-called-with": "off", // The auto-fix for this can break the tests when the function has args
+    "jest/prefer-comparison-matcher": "warn",
+    "jest/prefer-equality-matcher": "warn",
+    "jest/prefer-expect-resolves": "warn",
+    "jest/prefer-hooks-on-top": "warn",
+    "jest/prefer-spy-on": "warn",
+    "jest/prefer-strict-equal": "warn",
+    "jest/prefer-to-be": "warn",
+    "jest/prefer-to-contain": "warn",
+    "jest/prefer-todo": "warn",
+    "jest/valid-describe-callback": "warn",
+    "jest/valid-title": "warn",
+    "promise/catch-or-return": "warn",
+    "promise/no-return-wrap": "error",
+    "promise/param-names": "warn",
+    "promise/always-return": "warn",
+    "promise/no-nesting": "warn",
+    "promise/no-promise-in-callback": "warn",
+    "promise/no-callback-in-promise": "warn",
+    "promise/avoid-new": "off",
+    "promise/no-new-statics": "error",
+    "promise/no-return-in-finally": "error",
+    "promise/valid-params": "error",
+    "import/no-default-export": "off",
+    "import/no-named-as-default": "warn",
+    "import/no-named-as-default-member": "warn",
+    "import/no-self-import": "error",
+    "import/no-webpack-loader-syntax": "error",
+    "jsx-a11y/alt-text": "error",
+    "jsx-a11y/anchor-has-content": "warn",
+    "jsx-a11y/anchor-is-valid": "warn",
+    "jsx-a11y/aria-activedescendant-has-tabindex": "error",
+    "jsx-a11y/aria-props": "error",
+    "jsx-a11y/aria-role": "error",
+    "jsx-a11y/aria-unsupported-elements": "error",
+    "jsx-a11y/autocomplete-valid": "error",
+    "jsx-a11y/click-events-have-key-events": "warn",
+    "jsx-a11y/heading-has-content": "error",
+    "jsx-a11y/html-has-lang": "error",
+    "jsx-a11y/iframe-has-title": "error",
+    "jsx-a11y/img-redundant-alt": "warn",
+    "jsx-a11y/media-has-caption": "warn",
+    "jsx-a11y/mouse-events-have-key-events": "warn",
+    "jsx-a11y/no-access-key": "error",
+    "jsx-a11y/no-autofocus": "warn",
+    "jsx-a11y/no-distracting-elements": "error",
+    "jsx-a11y/no-redundant-roles": "warn",
+    "jsx-a11y/role-has-required-aria-props": "warn",
+    "jsx-a11y/role-supports-aria-props": "error",
+    "jsx-a11y/scope": "error",
+    "jsx-a11y/tabindex-no-positive": "warn",
+
+    // SonarJS rules - migrated from ESLint
+    "sonarjs/cognitive-complexity": "warn", // TODO: Change to error after migration
+    // Prevents overly complex functions (use SonarQube/SonarCloud for detailed analysis)
+    "sonarjs/max-switch-cases": "error",
+    // Limits switch statement cases
+    "sonarjs/no-all-duplicated-branches": "error",
+    // Prevents identical if/else branches
+    "sonarjs/no-collapsible-if": "error",
+    // Suggests merging nested ifs
+    "sonarjs/no-collection-size-mischeck": "error",
+    // Validates collection size checks
+    "sonarjs/no-duplicated-branches": "error",
+    // Detects duplicate conditional branches
+    "sonarjs/no-duplicate-string": "off",
+    // Warns on repeated string literals (was disabled)
+    "sonarjs/no-element-overwrite": "error",
+    // Prevents array element overwrites
+    "sonarjs/no-empty-collection": "error",
+    // Detects empty collections
+    "sonarjs/no-extra-arguments": "off",
+    // Detects extra function arguments (TypeScript handles this)
+    "sonarjs/no-gratuitous-expressions": "error",
+    // Removes unnecessary expressions
+    "sonarjs/no-identical-conditions": "error",
+    // Prevents duplicate conditions
+    "sonarjs/no-identical-expressions": "error",
+    // Detects duplicate expressions
+    "sonarjs/no-identical-functions": "error",
+    // Finds duplicated function implementations
+    "sonarjs/no-ignored-return": "error",
+    // Ensures return values are used
+    "sonarjs/no-inverted-boolean-check": "off",
+    // Simplifies boolean checks (was disabled)
+    "sonarjs/no-nested-switch": "error",
+    // Prevents nested switch statements
+    "sonarjs/no-nested-template-literals": "error",
+    // Avoids nested template literals
+    "sonarjs/no-redundant-boolean": "warn", // TODO: Change to error after migration
+    // Removes redundant boolean literals
+    "sonarjs/no-redundant-jump": "error",
+    // Removes unnecessary returns/continues
+    "sonarjs/no-same-line-conditional": "error",
+    // Prevents same-line conditionals
+    "sonarjs/no-small-switch": "error",
+    // Discourages tiny switch statements
+    "sonarjs/no-unused-collection": "error",
+    // Finds unused collections
+    "sonarjs/no-use-of-empty-return-value": "error",
+    // Prevents using void returns
+    "sonarjs/non-existent-operator": "error",
+    // Catches typos like =+ instead of +=
+    "sonarjs/prefer-immediate-return": "error",
+    // Returns directly instead of assigning
+    "sonarjs/prefer-object-literal": "error",
+    // Prefers object literals
+    "sonarjs/prefer-single-boolean-return": "error",
+    // Simplifies boolean returns
+    "sonarjs/prefer-while": "error",
+    // Suggests while loops over for loops
+    "sonarjs/elseif-without-else": "off"
+    // Requires final else in if-else-if chains (was disabled)
+  },
+  "ignorePatterns": [
+    "src/parser/*.ts",
+    "scripts/update-registry.cjs",
+    "scripts/generate-permissions-type.cjs",
+    "**/node_modules",
+    "**/build",
+    "**/*.typegen.ts",
+    "**/i18-generate-hash.cjs",
+    "src/parser/TraceOperatorParser/**/*",
+    "**/orval.config.ts"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "src/api/generated/**/*.ts"
+      ],
+      "rules": {
+        "@typescript-eslint/explicit-function-return-type": "off",
+        "@typescript-eslint/explicit-module-boundary-types": "off",
+        "no-nested-ternary": "off",
+        "no-unused-vars": [
+          "warn",
+          {
+            "argsIgnorePattern": "^_",
+            "varsIgnorePattern": "^_",
+            "caughtErrors": "none"
+          }
+        ]
+      }
+    },
+    {
+      // Test files: disable clipboard rule and import/first
+      "files": [
+        "**/*.test.ts",
+        "**/*.test.tsx",
+        "**/*.test.js",
+        "**/*.test.jsx",
+        "**/*.spec.ts",
+        "**/*.spec.tsx",
+        "**/*.spec.js",
+        "**/*.spec.jsx",
+        "**/__tests__/**/*.ts",
+        "**/__tests__/**/*.tsx",
+        "**/__tests__/**/*.js",
+        "**/__tests__/**/*.jsx"
+      ],
+      "rules": {
+        "import/first": "off",
+        // Should ignore due to mocks
+        "signoz/no-navigator-clipboard": "off"
+        // Tests can use navigator.clipboard directly
+      }
+    },
+    {
+      // Store files are allowed to use .getState() as they export standalone actions
+      "files": [
+        "**/*Store.ts",
+        "**/*Store.tsx"
+      ],
+      "rules": {
+        "signoz/no-zustand-getstate-in-hooks": "off"
+      }
+    }
+  ]
+}
--- a/frontend/.vscode/settings.json
+++ b/frontend/.vscode/settings.json
@@ -1,8 +1,7 @@
 {
-	"editor.formatOnSave": true,
-	"editor.defaultFormatter": "esbenp.prettier-vscode",
-	"editor.codeActionsOnSave": {
-		"source.fixAll.eslint": "explicit"
-	},
-	"prettier.requireConfig": true
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "oxc.oxc-vscode",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.oxc": "explicit"
+  }
 }
--- a/frontend/eslint-rules/package.json
+++ b/frontend/eslint-rules/package.json
@@ -1,3 +0,0 @@
-{
-  "type": "commonjs"
-}
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -8,11 +8,12 @@
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
-    "prettify": "prettier --write .",
-    "fmt": "prettier --check .",
-    "lint": "eslint ./src && stylelint \"src/**/*.scss\"",
-    "lint:generated": "eslint ./src/api/generated --fix",
-    "lint:fix": "eslint ./src --fix",
+    "prettify": "oxfmt",
+    "fmt": "echo 'Disabled due to migration' || oxfmt --check",
+    "lint": "oxlint ./src && stylelint \"src/**/*.scss\"",
+    "lint:js": "oxlint ./src",
+    "lint:generated": "oxlint ./src/api/generated --fix",
+    "lint:fix": "oxlint ./src --fix",
    "lint:styles": "stylelint \"src/**/*.scss\"",
    "jest": "jest",
    "jest:coverage": "jest --coverage",
@@ -51,7 +52,7 @@
    "@signozhq/design-tokens": "2.1.4",
    "@signozhq/icons": "0.1.0",
    "@signozhq/resizable": "0.0.2",
-    "@signozhq/ui": "0.0.9",
+    "@signozhq/ui": "0.0.10",
    "@tanstack/react-table": "8.21.3",
    "@tanstack/react-virtual": "3.13.22",
    "@uiw/codemirror-theme-copilot": "4.23.11",
@@ -69,7 +70,6 @@
    "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",
@@ -201,21 +201,9 @@
    "@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-rulesdir": "0.2.2",
-    "eslint-plugin-simple-import-sort": "^7.0.0",
-    "eslint-plugin-sonarjs": "^0.12.0",
+    "eslint-plugin-sonarjs": "4.0.2",
    "husky": "^7.0.4",
    "imagemin": "^8.0.1",
    "imagemin-svgo": "^10.0.1",
@@ -227,10 +215,12 @@
    "msw": "1.3.2",
    "npm-run-all": "latest",
    "orval": "7.18.0",
+    "oxfmt": "0.41.0",
+    "oxlint": "1.59.0",
+    "oxlint-tsgolint": "0.20.0",
    "portfinder-sync": "^0.0.2",
    "postcss": "8.5.6",
    "postcss-scss": "4.0.9",
-    "prettier": "2.2.1",
    "prop-types": "15.8.1",
    "react-hooks-testing-library": "0.6.0",
    "react-resizable": "3.0.4",
@@ -251,7 +241,8 @@
  },
  "lint-staged": {
    "*.(js|jsx|ts|tsx)": [
-      "eslint --fix",
+      "echo 'Disabled due to migration' || oxfmt --check",
+      "oxlint --fix",
      "sh scripts/typecheck-staged.sh"
    ]
  },
@@ -275,4 +266,4 @@
    "tmp": "0.2.4",
    "vite": "npm:rolldown-vite@7.3.1"
  }
-}
+}
--- a/frontend/plugins/rules/no-navigator-clipboard.mjs
+++ b/frontend/plugins/rules/no-navigator-clipboard.mjs
@@ -0,0 +1,47 @@
+/**
+ * Rule: no-navigator-clipboard
+ *
+ * Prevents direct usage of navigator.clipboard.
+ *
+ * This rule catches patterns like:
+ *   navigator.clipboard.writeText(...)
+ *   navigator.clipboard.readText()
+ *   const cb = navigator.clipboard
+ *
+ * Instead, use the useCopyToClipboard hook from react-use library.
+ *
+ * ESLint equivalent:
+ * "no-restricted-properties": [
+ *   "error",
+ *   {
+ *     "object": "navigator",
+ *     "property": "clipboard",
+ *     "message": "Do not use navigator.clipboard directly..."
+ *   }
+ * ]
+ */
+
+export default {
+	create(context) {
+		return {
+			MemberExpression(node) {
+				const object = node.object;
+				const property = node.property;
+
+				// Check if it's navigator.clipboard
+				if (
+					object.type === 'Identifier' &&
+					object.name === 'navigator' &&
+					property.type === 'Identifier' &&
+					property.name === 'clipboard'
+				) {
+					context.report({
+						node,
+						message:
+							'Do not use navigator.clipboard directly since it does not work well with specific browsers. Use hook useCopyToClipboard from react-use library. https://streamich.github.io/react-use/?path=/story/side-effects-usecopytoclipboard--docs',
+					});
+				}
+			},
+		};
+	},
+};
--- a/frontend/plugins/rules/no-unsupported-asset-pattern.mjs
+++ b/frontend/plugins/rules/no-unsupported-asset-pattern.mjs
@@ -1,7 +1,5 @@
-'use strict';
-
 /**
- * ESLint rule: no-unsupported-asset-pattern
+ * Rule: no-unsupported-asset-pattern
 *
 * Enforces that all asset references (SVG, PNG, etc.) go through Vite's module
 * pipeline via ES imports (`import fooUrl from '@/assets/...'`) rather than
@@ -18,7 +16,7 @@
 *   4. ImportDeclaration / ImportExpression — static & dynamic imports
 */

-const {
+import {
 	hasAssetExtension,
 	containsAssetExtension,
 	extractUrlPath,
@@ -27,18 +25,10 @@ const {
 	isRelativePublicDir,
 	isValidAssetImport,
 	isExternalUrl,
-} = require('./shared/asset-patterns');
+} from './shared/asset-patterns.mjs';

-// Known public/ sub-directories that should never appear in dynamic asset paths.
 const PUBLIC_DIR_SEGMENTS = ['/Icons/', '/Images/', '/Logos/', '/svgs/'];

-/**
- * Recursively extracts the static string parts from a binary `+` expression or
- * template literal.  Returns `[null]` for any dynamic (non-string) node so
- * callers can detect that the prefix became unknowable.
- *
- * Example: `"/Icons/" + iconName + ".svg"` → ["/Icons/", null, ".svg"]
- */
 function collectBinaryStringParts(node) {
 	if (node.type === 'Literal' && typeof node.value === 'string')
 		return [node.value];
@@ -51,11 +41,10 @@ function collectBinaryStringParts(node) {
 	if (node.type === 'TemplateLiteral') {
 		return node.quasis.map((q) => q.value.raw);
 	}
-	// Unknown / dynamic node — signals "prefix is no longer fully static"
 	return [null];
 }

-module.exports = {
+export default {
 	meta: {
 		type: 'problem',
 		docs: {
@@ -89,13 +78,6 @@ module.exports = {

 	create(context) {
 		return {
-			/**
-			 * Catches plain string literals used as asset paths, e.g.:
-			 *   src="/Icons/logo.svg"   or   url("../public/Images/bg.png")
-			 *
-			 * Import declaration sources are skipped here — handled by ImportDeclaration.
-			 * Also unwraps CSS `url(...)` wrappers before checking.
-			 */
 			Literal(node) {
 				if (node.parent && node.parent.type === 'ImportDeclaration') {
 					return;
@@ -122,9 +104,6 @@ module.exports = {
 					return;
 				}

-				// Catches relative paths that start with "public/" e.g. 'public/Logos/aws-dark.svg'.
-				// isRelativePublicDir only covers known sub-dirs (Icons/, Logos/, etc.),
-				// so this handles the case where the full "public/" prefix is written explicitly.
 				if (isPublicRelative(value) && containsAssetExtension(value)) {
 					context.report({
 						node,
@@ -134,7 +113,6 @@ module.exports = {
 					return;
 				}

-				// Also check the path inside a CSS url("...") wrapper
 				const urlPath = extractUrlPath(value);
 				if (urlPath && isExternalUrl(urlPath)) return;
 				if (urlPath && isAbsolutePath(urlPath) && containsAssetExtension(urlPath)) {
@@ -170,11 +148,6 @@ module.exports = {
 				}
 			},

-			/**
-			 * Catches template literals used as asset paths, e.g.:
-			 *   `/Icons/${name}.svg`
-			 *   `url('/Images/${bg}.png')`
-			 */
 			TemplateLiteral(node) {
 				const quasis = node.quasis;
 				if (!quasis || quasis.length === 0) return;
@@ -201,7 +174,6 @@ module.exports = {
 					return;
 				}

-				// Expression-first template with known public-dir segment: `${base}/Icons/foo.svg`
 				const hasPublicSegment = quasis.some((q) =>
 					PUBLIC_DIR_SEGMENTS.some((seg) => q.value.raw.includes(seg)),
 				);
@@ -213,10 +185,7 @@ module.exports = {
 					return;
 				}

-				// No-interpolation template (single quasi): treat like a plain string
-				// and also unwrap any css url(...) wrapper.
 				if (quasis.length === 1) {
-					// Check the raw string first (no url() wrapper)
 					if (isPublicRelative(firstQuasi) && hasAssetExt) {
 						context.report({
 							node,
@@ -257,8 +226,6 @@ module.exports = {
 					return;
 				}

-				// CSS url() with an absolute path inside a multi-quasi template, e.g.:
-				//   `url('/Icons/${name}.svg')`
 				if (firstQuasi.includes('url(') && hasAssetExt) {
 					const urlMatch = firstQuasi.match(/^url\(\s*['"]?\//);
 					if (urlMatch) {
@@ -270,19 +237,10 @@ module.exports = {
 				}
 			},

-			/**
-			 * Catches string concatenation used to build asset paths, e.g.:
-			 *   "/Icons/" + name + ".svg"
-			 *
-			 * Collects the leading static parts (before the first dynamic value)
-			 * to determine the path prefix. If any part carries a known asset
-			 * extension, the expression is flagged.
-			 */
 			BinaryExpression(node) {
 				if (node.operator !== '+') return;

 				const parts = collectBinaryStringParts(node);
-				// Collect only the leading static parts; stop at the first dynamic (null) part
 				const prefixParts = [];
 				for (const part of parts) {
 					if (part === null) break;
@@ -322,14 +280,6 @@ module.exports = {
 				}
 			},

-			/**
-			 * Catches static asset imports that don't go through src/assets/, e.g.:
-			 *   import logo from '/public/Icons/logo.svg'   ← absolute path
-			 *   import logo from '../../public/logo.svg'    ← relative into public/
-			 *   import logo from '../somewhere/logo.svg'    ← outside src/assets/
-			 *
-			 * Valid pattern: import fooUrl from '@/assets/...' or relative within src/assets/
-			 */
 			ImportDeclaration(node) {
 				const src = node.source.value;
 				if (typeof src !== 'string') return;
@@ -354,13 +304,6 @@ module.exports = {
 				}
 			},

-			/**
-			 * Same checks as ImportDeclaration but for dynamic imports:
-			 *   const logo = await import('/Icons/logo.svg')
-			 *
-			 * Only literal sources are checked; fully dynamic expressions are ignored
-			 * since their paths cannot be statically analysed.
-			 */
 			ImportExpression(node) {
 				const src = node.source;
 				if (!src || src.type !== 'Literal' || typeof src.value !== 'string') return;
--- a/frontend/plugins/rules/no-zustand-getstate-in-hooks.mjs
+++ b/frontend/plugins/rules/no-zustand-getstate-in-hooks.mjs
@@ -0,0 +1,53 @@
+/**
+ * Rule: no-zustand-getstate-in-hooks
+ *
+ * Prevents calling .getState() on Zustand hooks.
+ *
+ * This rule catches patterns like:
+ *   useStore.getState()
+ *   useAppStore.getState()
+ *
+ * Instead, export a standalone action from the store.
+ *
+ * ESLint equivalent:
+ * "no-restricted-syntax": [
+ *   "error",
+ *   {
+ *     "selector": "CallExpression[callee.property.name='getState'][callee.object.name=/^use/]",
+ *     "message": "Avoid calling .getState() directly. Export a standalone action from the store instead."
+ *   }
+ * ]
+ */
+
+export default {
+	create(context) {
+		return {
+			CallExpression(node) {
+				const callee = node.callee;
+
+				// Check if it's a member expression (e.g., useStore.getState())
+				if (callee.type !== 'MemberExpression') {
+					return;
+				}
+
+				// Check if the property is 'getState'
+				const property = callee.property;
+				if (property.type !== 'Identifier' || property.name !== 'getState') {
+					return;
+				}
+
+				// Check if the object name starts with 'use'
+				const object = callee.object;
+				if (object.type !== 'Identifier' || !object.name.startsWith('use')) {
+					return;
+				}
+
+				context.report({
+					node,
+					message:
+						'Avoid calling .getState() directly. Export a standalone action from the store instead.',
+				});
+			},
+		};
+	},
+};
--- a/frontend/plugins/rules/shared/asset-patterns.mjs
+++ b/frontend/plugins/rules/shared/asset-patterns.mjs
@@ -1,6 +1,4 @@
-'use strict';
-
-const ALLOWED_ASSET_EXTENSIONS = [
+export const ALLOWED_ASSET_EXTENSIONS = [
 	'.svg',
 	'.png',
 	'.webp',
@@ -13,14 +11,14 @@ const ALLOWED_ASSET_EXTENSIONS = [
 * Returns true if the string ends with an asset extension.
 * e.g. "/Icons/foo.svg" → true, "/Icons/foo.svg.bak" → false
 */
-function hasAssetExtension(str) {
+export function hasAssetExtension(str) {
 	if (typeof str !== 'string') return false;
 	return ALLOWED_ASSET_EXTENSIONS.some((ext) => str.endsWith(ext));
 }

 // Like hasAssetExtension but also matches mid-string with boundary check,
 // e.g. "/foo.svg?v=1" → true, "/icons.svg-dir/" → true (- is non-alphanumeric boundary)
-function containsAssetExtension(str) {
+export function containsAssetExtension(str) {
 	if (typeof str !== 'string') return false;
 	return ALLOWED_ASSET_EXTENSIONS.some((ext) => {
 		const idx = str.indexOf(ext);
@@ -42,7 +40,7 @@ function containsAssetExtension(str) {
 *   "url(/Icons/foo.svg)" → "/Icons/foo.svg"
 * Returns null if the string is not a url() wrapper.
 */
-function extractUrlPath(str) {
+export function extractUrlPath(str) {
 	if (typeof str !== 'string') return null;
 	// Match url( [whitespace] [quote?] path [quote?] [whitespace] )
 	// Capture group: [^'")\s]+ matches path until quote, closing paren, or whitespace
@@ -54,7 +52,7 @@ function extractUrlPath(str) {
 * Returns true if the string is an absolute path (starts with /).
 * Absolute paths in url() bypass <base href> and fail under any URL prefix.
 */
-function isAbsolutePath(str) {
+export function isAbsolutePath(str) {
 	if (typeof str !== 'string') return false;
 	return str.startsWith('/') && !str.startsWith('//');
 }
@@ -63,7 +61,7 @@ function isAbsolutePath(str) {
 * Returns true if the path imports from the public/ directory.
 * Relative imports into public/ cause asset duplication in dist/.
 */
-function isPublicRelative(str) {
+export function isPublicRelative(str) {
 	if (typeof str !== 'string') return false;
 	return str.includes('/public/') || str.startsWith('public/');
 }
@@ -73,9 +71,9 @@ function isPublicRelative(str) {
 * e.g. "Icons/foo.svg", `Logos/aws-dark.svg`, "Images/bg.png"
 * These bypass Vite's module pipeline even without a leading slash.
 */
-const PUBLIC_DIR_SEGMENTS = ['Icons/', 'Images/', 'Logos/', 'svgs/'];
+export const PUBLIC_DIR_SEGMENTS = ['Icons/', 'Images/', 'Logos/', 'svgs/'];

-function isRelativePublicDir(str) {
+export function isRelativePublicDir(str) {
 	if (typeof str !== 'string') return false;
 	return PUBLIC_DIR_SEGMENTS.some((seg) => str.startsWith(seg));
 }
@@ -85,7 +83,7 @@ function isRelativePublicDir(str) {
 * Valid: @/assets/..., any relative path containing /assets/, or node_modules packages.
 * Invalid: absolute paths, public/ dir, or relative paths outside src/assets/.
 */
-function isValidAssetImport(str) {
+export function isValidAssetImport(str) {
 	if (typeof str !== 'string') return false;
 	if (str.startsWith('@/assets/')) return true;
 	if (str.includes('/assets/')) return true;
@@ -98,7 +96,7 @@ function isValidAssetImport(str) {
 * Returns true if the string is an external URL.
 * Used to avoid false positives on CDN/API URLs with asset extensions.
 */
-function isExternalUrl(str) {
+export function isExternalUrl(str) {
 	if (typeof str !== 'string') return false;
 	return (
 		str.startsWith('http://') ||
@@ -106,16 +104,3 @@ function isExternalUrl(str) {
 		str.startsWith('//')
 	);
 }
-
-module.exports = {
-	ALLOWED_ASSET_EXTENSIONS,
-	PUBLIC_DIR_SEGMENTS,
-	hasAssetExtension,
-	containsAssetExtension,
-	extractUrlPath,
-	isAbsolutePath,
-	isPublicRelative,
-	isRelativePublicDir,
-	isValidAssetImport,
-	isExternalUrl,
-};
--- a/frontend/plugins/signoz.mjs
+++ b/frontend/plugins/signoz.mjs
@@ -0,0 +1,21 @@
+/**
+ * Oxlint custom rules plugin for SigNoz.
+ *
+ * This plugin aggregates all custom SigNoz linting rules.
+ * Individual rules are defined in the ./rules directory.
+ */
+
+import noZustandGetStateInHooks from './rules/no-zustand-getstate-in-hooks.mjs';
+import noNavigatorClipboard from './rules/no-navigator-clipboard.mjs';
+import noUnsupportedAssetPattern from './rules/no-unsupported-asset-pattern.mjs';
+
+export default {
+	meta: {
+		name: 'signoz',
+	},
+	rules: {
+		'no-zustand-getstate-in-hooks': noZustandGetStateInHooks,
+		'no-navigator-clipboard': noNavigatorClipboard,
+		'no-unsupported-asset-pattern': noUnsupportedAssetPattern,
+	},
+};
--- a/frontend/scripts/generate-permissions-type.cjs
+++ b/frontend/scripts/generate-permissions-type.cjs
@@ -109,16 +109,16 @@ function generateTypeScriptFile(data) {
 	const resourcesStr = data.data.resources
 		.map(
 			(r) =>
-				`\t\t\t{\n\t\t\t\tname: '${r.name}',\n\t\t\t\ttype: '${r.type}',\n\t\t\t}`,
+				`\t\t\t{\n\t\t\t\tname: '${r.name}',\n\t\t\t\ttype: '${r.type}',\n\t\t\t},`,
 		)
-		.join(',\n');
+		.join('\n');

 	const relationsStr = Object.entries(data.data.relations)
 		.map(
 			([type, relations]) =>
-				`\t\t\t${type}: [${relations.map((r) => `'${r}'`).join(', ')}]`,
+				`\t\t\t${type}: [${relations.map((r) => `'${r}'`).join(', ')}],`,
 		)
-		.join(',\n');
+		.join('\n');

 	return `// AUTO GENERATED FILE - DO NOT EDIT - GENERATED BY scripts/generate-permissions-type
 export default {
@@ -180,7 +180,7 @@ async function main() {
 			PERMISSIONS_TYPE_FILE,
 		);
 		log('Linting generated file...');
-		execSync(`cd frontend && yarn eslint --fix ${relativePath}`, {
+		execSync(`cd frontend && yarn oxlint ${relativePath}`, {
 			cwd: rootDir,
 			stdio: 'inherit',
 		});
--- a/frontend/scripts/post-types-generation.sh
+++ b/frontend/scripts/post-types-generation.sh
@@ -16,20 +16,20 @@ echo "\n✅ Tag files renamed to index.ts"

 # Format generated files
 echo "\n\n---\nRunning prettier...\n"
-if ! prettier --write src/api/generated; then
-  echo "Prettier formatting failed!"
+if ! yarn prettify src/api/generated; then
+  echo "Formatting failed!"
  exit 1
 fi
-echo "\n✅ Prettier formatting successful"
+echo "\n✅ Formatting successful"


 # Fix linting issues
-echo "\n\n---\nRunning eslint...\n"
+echo "\n\n---\nRunning lint...\n"
 if ! yarn lint:generated; then
-  echo "ESLint check failed! Please fix linting errors before proceeding."
+  echo "Lint check failed! Please fix linting errors before proceeding."
  exit 1
 fi
-echo "\n✅ ESLint check successful"
+echo "\n✅ Lint check successful"


 # Check for type errors
--- a/frontend/src/api/generated/services/alerts/index.ts
+++ b/frontend/src/api/generated/services/alerts/index.ts
@@ -4,6 +4,7 @@
 * * regenerate with 'yarn generate:api'
 * SigNoz
 */
+import { useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	QueryClient,
@@ -12,12 +13,12 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useQuery } from 'react-query';

-import type { ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { GetAlerts200, RenderErrorResponseDTO } from '../sigNoz.schemas';

+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType } from '../../../generatedAPIInstance';
+
 /**
 * This endpoint returns alerts for the organization
 * @summary Get alerts
@@ -36,7 +37,7 @@ export const getGetAlertsQueryKey = () => {

 export const getGetAlertsQueryOptions = <
 	TData = Awaited<ReturnType<typeof getAlerts>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<Awaited<ReturnType<typeof getAlerts>>, TError, TData>;
 }) => {
@@ -66,7 +67,7 @@ export type GetAlertsQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useGetAlerts<
 	TData = Awaited<ReturnType<typeof getAlerts>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<Awaited<ReturnType<typeof getAlerts>>, TError, TData>;
 }): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
--- a/frontend/src/api/generated/services/authdomains/index.ts
+++ b/frontend/src/api/generated/services/authdomains/index.ts
@@ -4,6 +4,7 @@
 * * regenerate with 'yarn generate:api'
 * SigNoz
 */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,10 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';

-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	AuthtypesPostableAuthDomainDTO,
 	AuthtypesUpdateableAuthDomainDTO,
@@ -29,6 +27,9 @@ import type {
 	UpdateAuthDomainPathParameters,
 } from '../sigNoz.schemas';

+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
 /**
 * This endpoint lists all auth domains
 * @summary List all auth domains
@@ -47,7 +48,7 @@ export const getListAuthDomainsQueryKey = () => {

 export const getListAuthDomainsQueryOptions = <
 	TData = Awaited<ReturnType<typeof listAuthDomains>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof listAuthDomains>>,
@@ -81,7 +82,7 @@ export type ListAuthDomainsQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useListAuthDomains<
 	TData = Awaited<ReturnType<typeof listAuthDomains>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof listAuthDomains>>,
@@ -134,7 +135,7 @@ export const createAuthDomain = (

 export const getCreateAuthDomainMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createAuthDomain>>,
@@ -151,8 +152,8 @@ export const getCreateAuthDomainMutationOptions = <
 	const mutationKey = ['createAuthDomain'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -172,7 +173,8 @@ export const getCreateAuthDomainMutationOptions = <
 export type CreateAuthDomainMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createAuthDomain>>
 >;
-export type CreateAuthDomainMutationBody = BodyType<AuthtypesPostableAuthDomainDTO>;
+export type CreateAuthDomainMutationBody =
+	BodyType<AuthtypesPostableAuthDomainDTO>;
 export type CreateAuthDomainMutationError = ErrorType<RenderErrorResponseDTO>;

 /**
@@ -180,7 +182,7 @@ export type CreateAuthDomainMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useCreateAuthDomain = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createAuthDomain>>,
@@ -211,7 +213,7 @@ export const deleteAuthDomain = ({ id }: DeleteAuthDomainPathParameters) => {

 export const getDeleteAuthDomainMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteAuthDomain>>,
@@ -228,8 +230,8 @@ export const getDeleteAuthDomainMutationOptions = <
 	const mutationKey = ['deleteAuthDomain'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -257,7 +259,7 @@ export type DeleteAuthDomainMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useDeleteAuthDomain = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteAuthDomain>>,
@@ -293,7 +295,7 @@ export const updateAuthDomain = (

 export const getUpdateAuthDomainMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateAuthDomain>>,
@@ -316,8 +318,8 @@ export const getUpdateAuthDomainMutationOptions = <
 	const mutationKey = ['updateAuthDomain'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -340,7 +342,8 @@ export const getUpdateAuthDomainMutationOptions = <
 export type UpdateAuthDomainMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updateAuthDomain>>
 >;
-export type UpdateAuthDomainMutationBody = BodyType<AuthtypesUpdateableAuthDomainDTO>;
+export type UpdateAuthDomainMutationBody =
+	BodyType<AuthtypesUpdateableAuthDomainDTO>;
 export type UpdateAuthDomainMutationError = ErrorType<RenderErrorResponseDTO>;

 /**
@@ -348,7 +351,7 @@ export type UpdateAuthDomainMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useUpdateAuthDomain = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateAuthDomain>>,
--- a/frontend/src/api/generated/services/authz/index.ts
+++ b/frontend/src/api/generated/services/authz/index.ts
@@ -4,6 +4,7 @@
 * * regenerate with 'yarn generate:api'
 * SigNoz
 */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,10 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';

-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	AuthtypesTransactionDTO,
 	AuthzCheck200,
@@ -26,6 +24,9 @@ import type {
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';

+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
 /**
 * Checks if the authenticated user has permissions for given transactions
 * @summary Check permissions
@@ -45,7 +46,7 @@ export const authzCheck = (

 export const getAuthzCheckMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof authzCheck>>,
@@ -62,8 +63,8 @@ export const getAuthzCheckMutationOptions = <
 	const mutationKey = ['authzCheck'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -91,7 +92,7 @@ export type AuthzCheckMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useAuthzCheck = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof authzCheck>>,
@@ -127,7 +128,7 @@ export const getAuthzResourcesQueryKey = () => {

 export const getAuthzResourcesQueryOptions = <
 	TData = Awaited<ReturnType<typeof authzResources>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof authzResources>>,
@@ -161,7 +162,7 @@ export type AuthzResourcesQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useAuthzResources<
 	TData = Awaited<ReturnType<typeof authzResources>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof authzResources>>,
--- a/frontend/src/api/generated/services/channels/index.ts
+++ b/frontend/src/api/generated/services/channels/index.ts
@@ -4,6 +4,7 @@
 * * regenerate with 'yarn generate:api'
 * SigNoz
 */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,10 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';

-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	ConfigReceiverDTO,
 	CreateChannel201,
@@ -30,6 +28,9 @@ import type {
 	UpdateChannelByIDPathParameters,
 } from '../sigNoz.schemas';

+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
 /**
 * This endpoint lists all notification channels for the organization
 * @summary List notification channels
@@ -48,7 +49,7 @@ export const getListChannelsQueryKey = () => {

 export const getListChannelsQueryOptions = <
 	TData = Awaited<ReturnType<typeof listChannels>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof listChannels>>,
@@ -82,7 +83,7 @@ export type ListChannelsQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useListChannels<
 	TData = Awaited<ReturnType<typeof listChannels>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof listChannels>>,
@@ -135,7 +136,7 @@ export const createChannel = (

 export const getCreateChannelMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createChannel>>,
@@ -152,8 +153,8 @@ export const getCreateChannelMutationOptions = <
 	const mutationKey = ['createChannel'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -181,7 +182,7 @@ export type CreateChannelMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useCreateChannel = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createChannel>>,
@@ -212,7 +213,7 @@ export const deleteChannelByID = ({ id }: DeleteChannelByIDPathParameters) => {

 export const getDeleteChannelByIDMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteChannelByID>>,
@@ -229,8 +230,8 @@ export const getDeleteChannelByIDMutationOptions = <
 	const mutationKey = ['deleteChannelByID'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -258,7 +259,7 @@ export type DeleteChannelByIDMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useDeleteChannelByID = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteChannelByID>>,
@@ -299,7 +300,7 @@ export const getGetChannelByIDQueryKey = ({

 export const getGetChannelByIDQueryOptions = <
 	TData = Awaited<ReturnType<typeof getChannelByID>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetChannelByIDPathParameters,
 	options?: {
@@ -341,7 +342,7 @@ export type GetChannelByIDQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useGetChannelByID<
 	TData = Awaited<ReturnType<typeof getChannelByID>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetChannelByIDPathParameters,
 	options?: {
@@ -397,7 +398,7 @@ export const updateChannelByID = (

 export const getUpdateChannelByIDMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateChannelByID>>,
@@ -420,8 +421,8 @@ export const getUpdateChannelByIDMutationOptions = <
 	const mutationKey = ['updateChannelByID'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -452,7 +453,7 @@ export type UpdateChannelByIDMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useUpdateChannelByID = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateChannelByID>>,
@@ -495,7 +496,7 @@ export const testChannel = (

 export const getTestChannelMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof testChannel>>,
@@ -512,8 +513,8 @@ export const getTestChannelMutationOptions = <
 	const mutationKey = ['testChannel'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -541,7 +542,7 @@ export type TestChannelMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useTestChannel = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof testChannel>>,
@@ -579,7 +580,7 @@ export const testChannelDeprecated = (

 export const getTestChannelDeprecatedMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof testChannelDeprecated>>,
@@ -596,8 +597,8 @@ export const getTestChannelDeprecatedMutationOptions = <
 	const mutationKey = ['testChannelDeprecated'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -618,7 +619,8 @@ export type TestChannelDeprecatedMutationResult = NonNullable<
 	Awaited<ReturnType<typeof testChannelDeprecated>>
 >;
 export type TestChannelDeprecatedMutationBody = BodyType<ConfigReceiverDTO>;
-export type TestChannelDeprecatedMutationError = ErrorType<RenderErrorResponseDTO>;
+export type TestChannelDeprecatedMutationError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @deprecated
@@ -626,7 +628,7 @@ export type TestChannelDeprecatedMutationError = ErrorType<RenderErrorResponseDT
 */
 export const useTestChannelDeprecated = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof testChannelDeprecated>>,
--- a/frontend/src/api/generated/services/cloudintegration/index.ts
+++ b/frontend/src/api/generated/services/cloudintegration/index.ts
@@ -4,6 +4,7 @@
 * * regenerate with 'yarn generate:api'
 * SigNoz
 */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,10 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';

-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	AgentCheckIn200,
 	AgentCheckInDeprecated200,
@@ -48,6 +46,9 @@ import type {
 	UpdateServicePathParameters,
 } from '../sigNoz.schemas';

+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
 /**
 * [Deprecated] This endpoint is called by the deployed agent to check in
 * @deprecated
@@ -69,7 +70,7 @@ export const agentCheckInDeprecated = (

 export const getAgentCheckInDeprecatedMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof agentCheckInDeprecated>>,
@@ -92,8 +93,8 @@ export const getAgentCheckInDeprecatedMutationOptions = <
 	const mutationKey = ['agentCheckInDeprecated'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -116,8 +117,10 @@ export const getAgentCheckInDeprecatedMutationOptions = <
 export type AgentCheckInDeprecatedMutationResult = NonNullable<
 	Awaited<ReturnType<typeof agentCheckInDeprecated>>
 >;
-export type AgentCheckInDeprecatedMutationBody = BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
-export type AgentCheckInDeprecatedMutationError = ErrorType<RenderErrorResponseDTO>;
+export type AgentCheckInDeprecatedMutationBody =
+	BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
+export type AgentCheckInDeprecatedMutationError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @deprecated
@@ -125,7 +128,7 @@ export type AgentCheckInDeprecatedMutationError = ErrorType<RenderErrorResponseD
 */
 export const useAgentCheckInDeprecated = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof agentCheckInDeprecated>>,
@@ -172,7 +175,7 @@ export const getListAccountsQueryKey = ({

 export const getListAccountsQueryOptions = <
 	TData = Awaited<ReturnType<typeof listAccounts>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ cloudProvider }: ListAccountsPathParameters,
 	options?: {
@@ -215,7 +218,7 @@ export type ListAccountsQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useListAccounts<
 	TData = Awaited<ReturnType<typeof listAccounts>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ cloudProvider }: ListAccountsPathParameters,
 	options?: {
@@ -273,7 +276,7 @@ export const createAccount = (

 export const getCreateAccountMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createAccount>>,
@@ -296,8 +299,8 @@ export const getCreateAccountMutationOptions = <
 	const mutationKey = ['createAccount'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -320,7 +323,8 @@ export const getCreateAccountMutationOptions = <
 export type CreateAccountMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createAccount>>
 >;
-export type CreateAccountMutationBody = BodyType<CloudintegrationtypesPostableAccountDTO>;
+export type CreateAccountMutationBody =
+	BodyType<CloudintegrationtypesPostableAccountDTO>;
 export type CreateAccountMutationError = ErrorType<RenderErrorResponseDTO>;

 /**
@@ -328,7 +332,7 @@ export type CreateAccountMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useCreateAccount = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createAccount>>,
@@ -368,7 +372,7 @@ export const disconnectAccount = ({

 export const getDisconnectAccountMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof disconnectAccount>>,
@@ -385,8 +389,8 @@ export const getDisconnectAccountMutationOptions = <
 	const mutationKey = ['disconnectAccount'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -414,7 +418,7 @@ export type DisconnectAccountMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useDisconnectAccount = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof disconnectAccount>>,
@@ -456,7 +460,7 @@ export const getGetAccountQueryKey = ({

 export const getGetAccountQueryOptions = <
 	TData = Awaited<ReturnType<typeof getAccount>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ cloudProvider, id }: GetAccountPathParameters,
 	options?: {
@@ -497,7 +501,7 @@ export type GetAccountQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useGetAccount<
 	TData = Awaited<ReturnType<typeof getAccount>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ cloudProvider, id }: GetAccountPathParameters,
 	options?: {
@@ -553,7 +557,7 @@ export const updateAccount = (

 export const getUpdateAccountMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateAccount>>,
@@ -576,8 +580,8 @@ export const getUpdateAccountMutationOptions = <
 	const mutationKey = ['updateAccount'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -600,7 +604,8 @@ export const getUpdateAccountMutationOptions = <
 export type UpdateAccountMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updateAccount>>
 >;
-export type UpdateAccountMutationBody = BodyType<CloudintegrationtypesUpdatableAccountDTO>;
+export type UpdateAccountMutationBody =
+	BodyType<CloudintegrationtypesUpdatableAccountDTO>;
 export type UpdateAccountMutationError = ErrorType<RenderErrorResponseDTO>;

 /**
@@ -608,7 +613,7 @@ export type UpdateAccountMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useUpdateAccount = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateAccount>>,
@@ -650,7 +655,7 @@ export const updateService = (

 export const getUpdateServiceMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateService>>,
@@ -673,8 +678,8 @@ export const getUpdateServiceMutationOptions = <
 	const mutationKey = ['updateService'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -697,7 +702,8 @@ export const getUpdateServiceMutationOptions = <
 export type UpdateServiceMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updateService>>
 >;
-export type UpdateServiceMutationBody = BodyType<CloudintegrationtypesUpdatableServiceDTO>;
+export type UpdateServiceMutationBody =
+	BodyType<CloudintegrationtypesUpdatableServiceDTO>;
 export type UpdateServiceMutationError = ErrorType<RenderErrorResponseDTO>;

 /**
@@ -705,7 +711,7 @@ export type UpdateServiceMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useUpdateService = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateService>>,
@@ -749,7 +755,7 @@ export const agentCheckIn = (

 export const getAgentCheckInMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof agentCheckIn>>,
@@ -772,8 +778,8 @@ export const getAgentCheckInMutationOptions = <
 	const mutationKey = ['agentCheckIn'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -796,7 +802,8 @@ export const getAgentCheckInMutationOptions = <
 export type AgentCheckInMutationResult = NonNullable<
 	Awaited<ReturnType<typeof agentCheckIn>>
 >;
-export type AgentCheckInMutationBody = BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
+export type AgentCheckInMutationBody =
+	BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
 export type AgentCheckInMutationError = ErrorType<RenderErrorResponseDTO>;

 /**
@@ -804,7 +811,7 @@ export type AgentCheckInMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useAgentCheckIn = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof agentCheckIn>>,
@@ -851,7 +858,7 @@ export const getGetConnectionCredentialsQueryKey = ({

 export const getGetConnectionCredentialsQueryOptions = <
 	TData = Awaited<ReturnType<typeof getConnectionCredentials>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ cloudProvider }: GetConnectionCredentialsPathParameters,
 	options?: {
@@ -887,7 +894,8 @@ export const getGetConnectionCredentialsQueryOptions = <
 export type GetConnectionCredentialsQueryResult = NonNullable<
 	Awaited<ReturnType<typeof getConnectionCredentials>>
 >;
-export type GetConnectionCredentialsQueryError = ErrorType<RenderErrorResponseDTO>;
+export type GetConnectionCredentialsQueryError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Get connection credentials
@@ -895,7 +903,7 @@ export type GetConnectionCredentialsQueryError = ErrorType<RenderErrorResponseDT

 export function useGetConnectionCredentials<
 	TData = Awaited<ReturnType<typeof getConnectionCredentials>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ cloudProvider }: GetConnectionCredentialsPathParameters,
 	options?: {
@@ -965,7 +973,7 @@ export const getListServicesMetadataQueryKey = (

 export const getListServicesMetadataQueryOptions = <
 	TData = Awaited<ReturnType<typeof listServicesMetadata>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ cloudProvider }: ListServicesMetadataPathParameters,
 	params?: ListServicesMetadataParams,
@@ -1010,7 +1018,7 @@ export type ListServicesMetadataQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useListServicesMetadata<
 	TData = Awaited<ReturnType<typeof listServicesMetadata>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ cloudProvider }: ListServicesMetadataPathParameters,
 	params?: ListServicesMetadataParams,
@@ -1083,7 +1091,7 @@ export const getGetServiceQueryKey = (

 export const getGetServiceQueryOptions = <
 	TData = Awaited<ReturnType<typeof getService>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ cloudProvider, serviceId }: GetServicePathParameters,
 	params?: GetServiceParams,
@@ -1126,7 +1134,7 @@ export type GetServiceQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useGetService<
 	TData = Awaited<ReturnType<typeof getService>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ cloudProvider, serviceId }: GetServicePathParameters,
 	params?: GetServiceParams,
--- a/frontend/src/api/generated/services/dashboard/index.ts
+++ b/frontend/src/api/generated/services/dashboard/index.ts
@@ -4,6 +4,7 @@
 * * regenerate with 'yarn generate:api'
 * SigNoz
 */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,10 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';

-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	CreatePublicDashboard201,
 	CreatePublicDashboardPathParameters,
@@ -35,6 +33,9 @@ import type {
 	UpdatePublicDashboardPathParameters,
 } from '../sigNoz.schemas';

+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
 /**
 * This endpoint deletes the public sharing config and disables the public sharing of a dashboard
 * @summary Delete public dashboard
@@ -50,7 +51,7 @@ export const deletePublicDashboard = ({

 export const getDeletePublicDashboardMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deletePublicDashboard>>,
@@ -67,8 +68,8 @@ export const getDeletePublicDashboardMutationOptions = <
 	const mutationKey = ['deletePublicDashboard'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -89,14 +90,15 @@ export type DeletePublicDashboardMutationResult = NonNullable<
 	Awaited<ReturnType<typeof deletePublicDashboard>>
 >;

-export type DeletePublicDashboardMutationError = ErrorType<RenderErrorResponseDTO>;
+export type DeletePublicDashboardMutationError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Delete public dashboard
 */
 export const useDeletePublicDashboard = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deletePublicDashboard>>,
@@ -137,7 +139,7 @@ export const getGetPublicDashboardQueryKey = ({

 export const getGetPublicDashboardQueryOptions = <
 	TData = Awaited<ReturnType<typeof getPublicDashboard>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetPublicDashboardPathParameters,
 	options?: {
@@ -180,7 +182,7 @@ export type GetPublicDashboardQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useGetPublicDashboard<
 	TData = Awaited<ReturnType<typeof getPublicDashboard>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetPublicDashboardPathParameters,
 	options?: {
@@ -238,7 +240,7 @@ export const createPublicDashboard = (

 export const getCreatePublicDashboardMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createPublicDashboard>>,
@@ -261,8 +263,8 @@ export const getCreatePublicDashboardMutationOptions = <
 	const mutationKey = ['createPublicDashboard'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -285,15 +287,17 @@ export const getCreatePublicDashboardMutationOptions = <
 export type CreatePublicDashboardMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createPublicDashboard>>
 >;
-export type CreatePublicDashboardMutationBody = BodyType<DashboardtypesPostablePublicDashboardDTO>;
-export type CreatePublicDashboardMutationError = ErrorType<RenderErrorResponseDTO>;
+export type CreatePublicDashboardMutationBody =
+	BodyType<DashboardtypesPostablePublicDashboardDTO>;
+export type CreatePublicDashboardMutationError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Create public dashboard
 */
 export const useCreatePublicDashboard = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createPublicDashboard>>,
@@ -335,7 +339,7 @@ export const updatePublicDashboard = (

 export const getUpdatePublicDashboardMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updatePublicDashboard>>,
@@ -358,8 +362,8 @@ export const getUpdatePublicDashboardMutationOptions = <
 	const mutationKey = ['updatePublicDashboard'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -382,15 +386,17 @@ export const getUpdatePublicDashboardMutationOptions = <
 export type UpdatePublicDashboardMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updatePublicDashboard>>
 >;
-export type UpdatePublicDashboardMutationBody = BodyType<DashboardtypesUpdatablePublicDashboardDTO>;
-export type UpdatePublicDashboardMutationError = ErrorType<RenderErrorResponseDTO>;
+export type UpdatePublicDashboardMutationBody =
+	BodyType<DashboardtypesUpdatablePublicDashboardDTO>;
+export type UpdatePublicDashboardMutationError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Update public dashboard
 */
 export const useUpdatePublicDashboard = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updatePublicDashboard>>,
@@ -437,7 +443,7 @@ export const getGetPublicDashboardDataQueryKey = ({

 export const getGetPublicDashboardDataQueryOptions = <
 	TData = Awaited<ReturnType<typeof getPublicDashboardData>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetPublicDashboardDataPathParameters,
 	options?: {
@@ -472,7 +478,8 @@ export const getGetPublicDashboardDataQueryOptions = <
 export type GetPublicDashboardDataQueryResult = NonNullable<
 	Awaited<ReturnType<typeof getPublicDashboardData>>
 >;
-export type GetPublicDashboardDataQueryError = ErrorType<RenderErrorResponseDTO>;
+export type GetPublicDashboardDataQueryError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Get public dashboard data
@@ -480,7 +487,7 @@ export type GetPublicDashboardDataQueryError = ErrorType<RenderErrorResponseDTO>

 export function useGetPublicDashboardData<
 	TData = Awaited<ReturnType<typeof getPublicDashboardData>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetPublicDashboardDataPathParameters,
 	options?: {
@@ -542,7 +549,7 @@ export const getGetPublicDashboardWidgetQueryRangeQueryKey = ({

 export const getGetPublicDashboardWidgetQueryRangeQueryOptions = <
 	TData = Awaited<ReturnType<typeof getPublicDashboardWidgetQueryRange>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id, idx }: GetPublicDashboardWidgetQueryRangePathParameters,
 	options?: {
@@ -578,7 +585,8 @@ export const getGetPublicDashboardWidgetQueryRangeQueryOptions = <
 export type GetPublicDashboardWidgetQueryRangeQueryResult = NonNullable<
 	Awaited<ReturnType<typeof getPublicDashboardWidgetQueryRange>>
 >;
-export type GetPublicDashboardWidgetQueryRangeQueryError = ErrorType<RenderErrorResponseDTO>;
+export type GetPublicDashboardWidgetQueryRangeQueryError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Get query range result
@@ -586,7 +594,7 @@ export type GetPublicDashboardWidgetQueryRangeQueryError = ErrorType<RenderError

 export function useGetPublicDashboardWidgetQueryRange<
 	TData = Awaited<ReturnType<typeof getPublicDashboardWidgetQueryRange>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id, idx }: GetPublicDashboardWidgetQueryRangePathParameters,
 	options?: {
--- a/frontend/src/api/generated/services/downtimeschedules/index.ts
+++ b/frontend/src/api/generated/services/downtimeschedules/index.ts
@@ -4,6 +4,7 @@
 * * regenerate with 'yarn generate:api'
 * SigNoz
 */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,10 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';

-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	CreateDowntimeSchedule201,
 	DeleteDowntimeScheduleByIDPathParameters,
@@ -31,6 +29,9 @@ import type {
 	UpdateDowntimeScheduleByIDPathParameters,
 } from '../sigNoz.schemas';

+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
 /**
 * This endpoint lists all planned maintenance / downtime schedules
 * @summary List downtime schedules
@@ -55,7 +56,7 @@ export const getListDowntimeSchedulesQueryKey = (

 export const getListDowntimeSchedulesQueryOptions = <
 	TData = Awaited<ReturnType<typeof listDowntimeSchedules>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	params?: ListDowntimeSchedulesParams,
 	options?: {
@@ -93,7 +94,7 @@ export type ListDowntimeSchedulesQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useListDowntimeSchedules<
 	TData = Awaited<ReturnType<typeof listDowntimeSchedules>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	params?: ListDowntimeSchedulesParams,
 	options?: {
@@ -150,7 +151,7 @@ export const createDowntimeSchedule = (

 export const getCreateDowntimeScheduleMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createDowntimeSchedule>>,
@@ -167,8 +168,8 @@ export const getCreateDowntimeScheduleMutationOptions = <
 	const mutationKey = ['createDowntimeSchedule'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -188,15 +189,17 @@ export const getCreateDowntimeScheduleMutationOptions = <
 export type CreateDowntimeScheduleMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createDowntimeSchedule>>
 >;
-export type CreateDowntimeScheduleMutationBody = BodyType<RuletypesPostablePlannedMaintenanceDTO>;
-export type CreateDowntimeScheduleMutationError = ErrorType<RenderErrorResponseDTO>;
+export type CreateDowntimeScheduleMutationBody =
+	BodyType<RuletypesPostablePlannedMaintenanceDTO>;
+export type CreateDowntimeScheduleMutationError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Create downtime schedule
 */
 export const useCreateDowntimeSchedule = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createDowntimeSchedule>>,
@@ -229,7 +232,7 @@ export const deleteDowntimeScheduleByID = ({

 export const getDeleteDowntimeScheduleByIDMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteDowntimeScheduleByID>>,
@@ -246,8 +249,8 @@ export const getDeleteDowntimeScheduleByIDMutationOptions = <
 	const mutationKey = ['deleteDowntimeScheduleByID'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -268,14 +271,15 @@ export type DeleteDowntimeScheduleByIDMutationResult = NonNullable<
 	Awaited<ReturnType<typeof deleteDowntimeScheduleByID>>
 >;

-export type DeleteDowntimeScheduleByIDMutationError = ErrorType<RenderErrorResponseDTO>;
+export type DeleteDowntimeScheduleByIDMutationError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Delete downtime schedule
 */
 export const useDeleteDowntimeScheduleByID = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteDowntimeScheduleByID>>,
@@ -316,7 +320,7 @@ export const getGetDowntimeScheduleByIDQueryKey = ({

 export const getGetDowntimeScheduleByIDQueryOptions = <
 	TData = Awaited<ReturnType<typeof getDowntimeScheduleByID>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetDowntimeScheduleByIDPathParameters,
 	options?: {
@@ -351,7 +355,8 @@ export const getGetDowntimeScheduleByIDQueryOptions = <
 export type GetDowntimeScheduleByIDQueryResult = NonNullable<
 	Awaited<ReturnType<typeof getDowntimeScheduleByID>>
 >;
-export type GetDowntimeScheduleByIDQueryError = ErrorType<RenderErrorResponseDTO>;
+export type GetDowntimeScheduleByIDQueryError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Get downtime schedule by ID
@@ -359,7 +364,7 @@ export type GetDowntimeScheduleByIDQueryError = ErrorType<RenderErrorResponseDTO

 export function useGetDowntimeScheduleByID<
 	TData = Awaited<ReturnType<typeof getDowntimeScheduleByID>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetDowntimeScheduleByIDPathParameters,
 	options?: {
@@ -415,7 +420,7 @@ export const updateDowntimeScheduleByID = (

 export const getUpdateDowntimeScheduleByIDMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateDowntimeScheduleByID>>,
@@ -438,8 +443,8 @@ export const getUpdateDowntimeScheduleByIDMutationOptions = <
 	const mutationKey = ['updateDowntimeScheduleByID'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -462,15 +467,17 @@ export const getUpdateDowntimeScheduleByIDMutationOptions = <
 export type UpdateDowntimeScheduleByIDMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updateDowntimeScheduleByID>>
 >;
-export type UpdateDowntimeScheduleByIDMutationBody = BodyType<RuletypesPostablePlannedMaintenanceDTO>;
-export type UpdateDowntimeScheduleByIDMutationError = ErrorType<RenderErrorResponseDTO>;
+export type UpdateDowntimeScheduleByIDMutationBody =
+	BodyType<RuletypesPostablePlannedMaintenanceDTO>;
+export type UpdateDowntimeScheduleByIDMutationError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Update downtime schedule
 */
 export const useUpdateDowntimeScheduleByID = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateDowntimeScheduleByID>>,
--- a/frontend/src/api/generated/services/features/index.ts
+++ b/frontend/src/api/generated/services/features/index.ts
@@ -4,6 +4,7 @@
 * * regenerate with 'yarn generate:api'
 * SigNoz
 */
+import { useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	QueryClient,
@@ -12,12 +13,12 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useQuery } from 'react-query';

-import type { ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { GetFeatures200, RenderErrorResponseDTO } from '../sigNoz.schemas';

+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType } from '../../../generatedAPIInstance';
+
 /**
 * This endpoint returns the supported features and their details
 * @summary Get features
@@ -36,7 +37,7 @@ export const getGetFeaturesQueryKey = () => {

 export const getGetFeaturesQueryOptions = <
 	TData = Awaited<ReturnType<typeof getFeatures>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof getFeatures>>,
@@ -70,7 +71,7 @@ export type GetFeaturesQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useGetFeatures<
 	TData = Awaited<ReturnType<typeof getFeatures>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof getFeatures>>,
--- a/frontend/src/api/generated/services/fields/index.ts
+++ b/frontend/src/api/generated/services/fields/index.ts
@@ -4,6 +4,7 @@
 * * regenerate with 'yarn generate:api'
 * SigNoz
 */
+import { useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	QueryClient,
@@ -12,10 +13,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useQuery } from 'react-query';

-import type { ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	GetFieldsKeys200,
 	GetFieldsKeysParams,
@@ -24,6 +22,9 @@ import type {
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';

+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType } from '../../../generatedAPIInstance';
+
 /**
 * This endpoint returns field keys
 * @summary Get field keys
@@ -46,7 +47,7 @@ export const getGetFieldsKeysQueryKey = (params?: GetFieldsKeysParams) => {

 export const getGetFieldsKeysQueryOptions = <
 	TData = Awaited<ReturnType<typeof getFieldsKeys>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	params?: GetFieldsKeysParams,
 	options?: {
@@ -83,7 +84,7 @@ export type GetFieldsKeysQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useGetFieldsKeys<
 	TData = Awaited<ReturnType<typeof getFieldsKeys>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	params?: GetFieldsKeysParams,
 	options?: {
@@ -143,7 +144,7 @@ export const getGetFieldsValuesQueryKey = (params?: GetFieldsValuesParams) => {

 export const getGetFieldsValuesQueryOptions = <
 	TData = Awaited<ReturnType<typeof getFieldsValues>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	params?: GetFieldsValuesParams,
 	options?: {
@@ -180,7 +181,7 @@ export type GetFieldsValuesQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useGetFieldsValues<
 	TData = Awaited<ReturnType<typeof getFieldsValues>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	params?: GetFieldsValuesParams,
 	options?: {
--- a/frontend/src/api/generated/services/gateway/index.ts
+++ b/frontend/src/api/generated/services/gateway/index.ts
@@ -4,6 +4,7 @@
 * * regenerate with 'yarn generate:api'
 * SigNoz
 */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,10 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';

-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	CreateIngestionKey201,
 	CreateIngestionKeyLimit201,
@@ -37,6 +35,9 @@ import type {
 	UpdateIngestionKeyPathParameters,
 } from '../sigNoz.schemas';

+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
 /**
 * This endpoint returns the ingestion keys for a workspace
 * @summary Get ingestion keys for workspace
@@ -64,7 +65,7 @@ export const getGetIngestionKeysQueryKey = (

 export const getGetIngestionKeysQueryOptions = <
 	TData = Awaited<ReturnType<typeof getIngestionKeys>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	params?: GetIngestionKeysParams,
 	options?: {
@@ -101,7 +102,7 @@ export type GetIngestionKeysQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useGetIngestionKeys<
 	TData = Awaited<ReturnType<typeof getIngestionKeys>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	params?: GetIngestionKeysParams,
 	options?: {
@@ -158,7 +159,7 @@ export const createIngestionKey = (

 export const getCreateIngestionKeyMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createIngestionKey>>,
@@ -175,8 +176,8 @@ export const getCreateIngestionKeyMutationOptions = <
 	const mutationKey = ['createIngestionKey'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -196,7 +197,8 @@ export const getCreateIngestionKeyMutationOptions = <
 export type CreateIngestionKeyMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createIngestionKey>>
 >;
-export type CreateIngestionKeyMutationBody = BodyType<GatewaytypesPostableIngestionKeyDTO>;
+export type CreateIngestionKeyMutationBody =
+	BodyType<GatewaytypesPostableIngestionKeyDTO>;
 export type CreateIngestionKeyMutationError = ErrorType<RenderErrorResponseDTO>;

 /**
@@ -204,7 +206,7 @@ export type CreateIngestionKeyMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useCreateIngestionKey = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createIngestionKey>>,
@@ -237,7 +239,7 @@ export const deleteIngestionKey = ({

 export const getDeleteIngestionKeyMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteIngestionKey>>,
@@ -254,8 +256,8 @@ export const getDeleteIngestionKeyMutationOptions = <
 	const mutationKey = ['deleteIngestionKey'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -283,7 +285,7 @@ export type DeleteIngestionKeyMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useDeleteIngestionKey = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteIngestionKey>>,
@@ -319,7 +321,7 @@ export const updateIngestionKey = (

 export const getUpdateIngestionKeyMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateIngestionKey>>,
@@ -342,8 +344,8 @@ export const getUpdateIngestionKeyMutationOptions = <
 	const mutationKey = ['updateIngestionKey'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -366,7 +368,8 @@ export const getUpdateIngestionKeyMutationOptions = <
 export type UpdateIngestionKeyMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updateIngestionKey>>
 >;
-export type UpdateIngestionKeyMutationBody = BodyType<GatewaytypesPostableIngestionKeyDTO>;
+export type UpdateIngestionKeyMutationBody =
+	BodyType<GatewaytypesPostableIngestionKeyDTO>;
 export type UpdateIngestionKeyMutationError = ErrorType<RenderErrorResponseDTO>;

 /**
@@ -374,7 +377,7 @@ export type UpdateIngestionKeyMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useUpdateIngestionKey = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateIngestionKey>>,
@@ -418,7 +421,7 @@ export const createIngestionKeyLimit = (

 export const getCreateIngestionKeyLimitMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createIngestionKeyLimit>>,
@@ -441,8 +444,8 @@ export const getCreateIngestionKeyLimitMutationOptions = <
 	const mutationKey = ['createIngestionKeyLimit'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -465,15 +468,17 @@ export const getCreateIngestionKeyLimitMutationOptions = <
 export type CreateIngestionKeyLimitMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createIngestionKeyLimit>>
 >;
-export type CreateIngestionKeyLimitMutationBody = BodyType<GatewaytypesPostableIngestionKeyLimitDTO>;
-export type CreateIngestionKeyLimitMutationError = ErrorType<RenderErrorResponseDTO>;
+export type CreateIngestionKeyLimitMutationBody =
+	BodyType<GatewaytypesPostableIngestionKeyLimitDTO>;
+export type CreateIngestionKeyLimitMutationError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Create limit for the ingestion key
 */
 export const useCreateIngestionKeyLimit = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createIngestionKeyLimit>>,
@@ -512,7 +517,7 @@ export const deleteIngestionKeyLimit = ({

 export const getDeleteIngestionKeyLimitMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteIngestionKeyLimit>>,
@@ -529,8 +534,8 @@ export const getDeleteIngestionKeyLimitMutationOptions = <
 	const mutationKey = ['deleteIngestionKeyLimit'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -551,14 +556,15 @@ export type DeleteIngestionKeyLimitMutationResult = NonNullable<
 	Awaited<ReturnType<typeof deleteIngestionKeyLimit>>
 >;

-export type DeleteIngestionKeyLimitMutationError = ErrorType<RenderErrorResponseDTO>;
+export type DeleteIngestionKeyLimitMutationError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Delete limit for the ingestion key
 */
 export const useDeleteIngestionKeyLimit = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteIngestionKeyLimit>>,
@@ -594,7 +600,7 @@ export const updateIngestionKeyLimit = (

 export const getUpdateIngestionKeyLimitMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateIngestionKeyLimit>>,
@@ -617,8 +623,8 @@ export const getUpdateIngestionKeyLimitMutationOptions = <
 	const mutationKey = ['updateIngestionKeyLimit'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -641,15 +647,17 @@ export const getUpdateIngestionKeyLimitMutationOptions = <
 export type UpdateIngestionKeyLimitMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updateIngestionKeyLimit>>
 >;
-export type UpdateIngestionKeyLimitMutationBody = BodyType<GatewaytypesUpdatableIngestionKeyLimitDTO>;
-export type UpdateIngestionKeyLimitMutationError = ErrorType<RenderErrorResponseDTO>;
+export type UpdateIngestionKeyLimitMutationBody =
+	BodyType<GatewaytypesUpdatableIngestionKeyLimitDTO>;
+export type UpdateIngestionKeyLimitMutationError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Update limit for the ingestion key
 */
 export const useUpdateIngestionKeyLimit = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateIngestionKeyLimit>>,
@@ -700,7 +708,7 @@ export const getSearchIngestionKeysQueryKey = (

 export const getSearchIngestionKeysQueryOptions = <
 	TData = Awaited<ReturnType<typeof searchIngestionKeys>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	params: SearchIngestionKeysParams,
 	options?: {
@@ -738,7 +746,7 @@ export type SearchIngestionKeysQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useSearchIngestionKeys<
 	TData = Awaited<ReturnType<typeof searchIngestionKeys>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	params: SearchIngestionKeysParams,
 	options?: {
--- a/frontend/src/api/generated/services/global/index.ts
+++ b/frontend/src/api/generated/services/global/index.ts
@@ -4,6 +4,7 @@
 * * regenerate with 'yarn generate:api'
 * SigNoz
 */
+import { useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	QueryClient,
@@ -12,15 +13,15 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useQuery } from 'react-query';

-import type { ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	GetGlobalConfig200,
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';

+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType } from '../../../generatedAPIInstance';
+
 /**
 * This endpoint returns global config
 * @summary Get global config
@@ -39,7 +40,7 @@ export const getGetGlobalConfigQueryKey = () => {

 export const getGetGlobalConfigQueryOptions = <
 	TData = Awaited<ReturnType<typeof getGlobalConfig>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof getGlobalConfig>>,
@@ -73,7 +74,7 @@ export type GetGlobalConfigQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useGetGlobalConfig<
 	TData = Awaited<ReturnType<typeof getGlobalConfig>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof getGlobalConfig>>,
--- a/frontend/src/api/generated/services/health/index.ts
+++ b/frontend/src/api/generated/services/health/index.ts
@@ -4,6 +4,7 @@
 * * regenerate with 'yarn generate:api'
 * SigNoz
 */
+import { useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	QueryClient,
@@ -12,10 +13,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useQuery } from 'react-query';

-import type { ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	Healthz200,
 	Healthz503,
@@ -25,6 +23,9 @@ import type {
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';

+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType } from '../../../generatedAPIInstance';
+
 /**
 * @summary Health check
 */
@@ -42,7 +43,7 @@ export const getHealthzQueryKey = () => {

 export const getHealthzQueryOptions = <
 	TData = Awaited<ReturnType<typeof healthz>>,
-	TError = ErrorType<Healthz503>
+	TError = ErrorType<Healthz503>,
 >(options?: {
 	query?: UseQueryOptions<Awaited<ReturnType<typeof healthz>>, TError, TData>;
 }) => {
@@ -72,7 +73,7 @@ export type HealthzQueryError = ErrorType<Healthz503>;

 export function useHealthz<
 	TData = Awaited<ReturnType<typeof healthz>>,
-	TError = ErrorType<Healthz503>
+	TError = ErrorType<Healthz503>,
 >(options?: {
 	query?: UseQueryOptions<Awaited<ReturnType<typeof healthz>>, TError, TData>;
 }): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
@@ -119,7 +120,7 @@ export const getLivezQueryKey = () => {

 export const getLivezQueryOptions = <
 	TData = Awaited<ReturnType<typeof livez>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<Awaited<ReturnType<typeof livez>>, TError, TData>;
 }) => {
@@ -147,7 +148,7 @@ export type LivezQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useLivez<
 	TData = Awaited<ReturnType<typeof livez>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<Awaited<ReturnType<typeof livez>>, TError, TData>;
 }): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
@@ -191,7 +192,7 @@ export const getReadyzQueryKey = () => {

 export const getReadyzQueryOptions = <
 	TData = Awaited<ReturnType<typeof readyz>>,
-	TError = ErrorType<Readyz503>
+	TError = ErrorType<Readyz503>,
 >(options?: {
 	query?: UseQueryOptions<Awaited<ReturnType<typeof readyz>>, TError, TData>;
 }) => {
@@ -219,7 +220,7 @@ export type ReadyzQueryError = ErrorType<Readyz503>;

 export function useReadyz<
 	TData = Awaited<ReturnType<typeof readyz>>,
-	TError = ErrorType<Readyz503>
+	TError = ErrorType<Readyz503>,
 >(options?: {
 	query?: UseQueryOptions<Awaited<ReturnType<typeof readyz>>, TError, TData>;
 }): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
--- a/frontend/src/api/generated/services/logs/index.ts
+++ b/frontend/src/api/generated/services/logs/index.ts
@@ -4,6 +4,7 @@
 * * regenerate with 'yarn generate:api'
 * SigNoz
 */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,10 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';

-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	HandleExportRawDataPOSTParams,
 	ListPromotedAndIndexedPaths200,
@@ -27,6 +25,9 @@ import type {
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';

+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
 /**
 * This endpoints allows complex query exporting raw data for traces and logs
 * @summary Export raw data
@@ -48,7 +49,7 @@ export const handleExportRawDataPOST = (

 export const getHandleExportRawDataPOSTMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof handleExportRawDataPOST>>,
@@ -71,8 +72,8 @@ export const getHandleExportRawDataPOSTMutationOptions = <
 	const mutationKey = ['handleExportRawDataPOST'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -95,15 +96,17 @@ export const getHandleExportRawDataPOSTMutationOptions = <
 export type HandleExportRawDataPOSTMutationResult = NonNullable<
 	Awaited<ReturnType<typeof handleExportRawDataPOST>>
 >;
-export type HandleExportRawDataPOSTMutationBody = BodyType<Querybuildertypesv5QueryRangeRequestDTO>;
-export type HandleExportRawDataPOSTMutationError = ErrorType<RenderErrorResponseDTO>;
+export type HandleExportRawDataPOSTMutationBody =
+	BodyType<Querybuildertypesv5QueryRangeRequestDTO>;
+export type HandleExportRawDataPOSTMutationError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Export raw data
 */
 export const useHandleExportRawDataPOST = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof handleExportRawDataPOST>>,
@@ -145,7 +148,7 @@ export const getListPromotedAndIndexedPathsQueryKey = () => {

 export const getListPromotedAndIndexedPathsQueryOptions = <
 	TData = Awaited<ReturnType<typeof listPromotedAndIndexedPaths>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof listPromotedAndIndexedPaths>>,
@@ -172,7 +175,8 @@ export const getListPromotedAndIndexedPathsQueryOptions = <
 export type ListPromotedAndIndexedPathsQueryResult = NonNullable<
 	Awaited<ReturnType<typeof listPromotedAndIndexedPaths>>
 >;
-export type ListPromotedAndIndexedPathsQueryError = ErrorType<RenderErrorResponseDTO>;
+export type ListPromotedAndIndexedPathsQueryError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Promote and index paths
@@ -180,7 +184,7 @@ export type ListPromotedAndIndexedPathsQueryError = ErrorType<RenderErrorRespons

 export function useListPromotedAndIndexedPaths<
 	TData = Awaited<ReturnType<typeof listPromotedAndIndexedPaths>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof listPromotedAndIndexedPaths>>,
@@ -235,7 +239,7 @@ export const handlePromoteAndIndexPaths = (

 export const getHandlePromoteAndIndexPathsMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof handlePromoteAndIndexPaths>>,
@@ -252,8 +256,8 @@ export const getHandlePromoteAndIndexPathsMutationOptions = <
 	const mutationKey = ['handlePromoteAndIndexPaths'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -276,14 +280,15 @@ export type HandlePromoteAndIndexPathsMutationResult = NonNullable<
 export type HandlePromoteAndIndexPathsMutationBody = BodyType<
 	PromotetypesPromotePathDTO[] | null
 >;
-export type HandlePromoteAndIndexPathsMutationError = ErrorType<RenderErrorResponseDTO>;
+export type HandlePromoteAndIndexPathsMutationError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Promote and index paths
 */
 export const useHandlePromoteAndIndexPaths = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof handlePromoteAndIndexPaths>>,
--- a/frontend/src/api/generated/services/metrics/index.ts
+++ b/frontend/src/api/generated/services/metrics/index.ts
@@ -4,6 +4,7 @@
 * * regenerate with 'yarn generate:api'
 * SigNoz
 */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,10 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';

-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	GetMetricAlerts200,
 	GetMetricAlertsPathParameters,
@@ -45,6 +43,9 @@ import type {
 	UpdateMetricMetadataPathParameters,
 } from '../sigNoz.schemas';

+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
 /**
 * This endpoint returns a list of distinct metric names within the specified time range
 * @summary List metric names
@@ -67,7 +68,7 @@ export const getListMetricsQueryKey = (params?: ListMetricsParams) => {

 export const getListMetricsQueryOptions = <
 	TData = Awaited<ReturnType<typeof listMetrics>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	params?: ListMetricsParams,
 	options?: {
@@ -104,7 +105,7 @@ export type ListMetricsQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useListMetrics<
 	TData = Awaited<ReturnType<typeof listMetrics>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	params?: ListMetricsParams,
 	options?: {
@@ -165,7 +166,7 @@ export const getGetMetricAlertsQueryKey = ({

 export const getGetMetricAlertsQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMetricAlerts>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ metricName }: GetMetricAlertsPathParameters,
 	options?: {
@@ -208,7 +209,7 @@ export type GetMetricAlertsQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useGetMetricAlerts<
 	TData = Awaited<ReturnType<typeof getMetricAlerts>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ metricName }: GetMetricAlertsPathParameters,
 	options?: {
@@ -275,7 +276,7 @@ export const getGetMetricAttributesQueryKey = (

 export const getGetMetricAttributesQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMetricAttributes>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ metricName }: GetMetricAttributesPathParameters,
 	params?: GetMetricAttributesParams,
@@ -320,7 +321,7 @@ export type GetMetricAttributesQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useGetMetricAttributes<
 	TData = Awaited<ReturnType<typeof getMetricAttributes>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ metricName }: GetMetricAttributesPathParameters,
 	params?: GetMetricAttributesParams,
@@ -387,7 +388,7 @@ export const getGetMetricDashboardsQueryKey = ({

 export const getGetMetricDashboardsQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMetricDashboards>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ metricName }: GetMetricDashboardsPathParameters,
 	options?: {
@@ -430,7 +431,7 @@ export type GetMetricDashboardsQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useGetMetricDashboards<
 	TData = Awaited<ReturnType<typeof getMetricDashboards>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ metricName }: GetMetricDashboardsPathParameters,
 	options?: {
@@ -494,7 +495,7 @@ export const getGetMetricHighlightsQueryKey = ({

 export const getGetMetricHighlightsQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMetricHighlights>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ metricName }: GetMetricHighlightsPathParameters,
 	options?: {
@@ -537,7 +538,7 @@ export type GetMetricHighlightsQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useGetMetricHighlights<
 	TData = Awaited<ReturnType<typeof getMetricHighlights>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ metricName }: GetMetricHighlightsPathParameters,
 	options?: {
@@ -601,7 +602,7 @@ export const getGetMetricMetadataQueryKey = ({

 export const getGetMetricMetadataQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMetricMetadata>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ metricName }: GetMetricMetadataPathParameters,
 	options?: {
@@ -644,7 +645,7 @@ export type GetMetricMetadataQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useGetMetricMetadata<
 	TData = Awaited<ReturnType<typeof getMetricMetadata>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ metricName }: GetMetricMetadataPathParameters,
 	options?: {
@@ -702,7 +703,7 @@ export const updateMetricMetadata = (

 export const getUpdateMetricMetadataMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateMetricMetadata>>,
@@ -725,8 +726,8 @@ export const getUpdateMetricMetadataMutationOptions = <
 	const mutationKey = ['updateMetricMetadata'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -749,15 +750,17 @@ export const getUpdateMetricMetadataMutationOptions = <
 export type UpdateMetricMetadataMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updateMetricMetadata>>
 >;
-export type UpdateMetricMetadataMutationBody = BodyType<MetricsexplorertypesUpdateMetricMetadataRequestDTO>;
-export type UpdateMetricMetadataMutationError = ErrorType<RenderErrorResponseDTO>;
+export type UpdateMetricMetadataMutationBody =
+	BodyType<MetricsexplorertypesUpdateMetricMetadataRequestDTO>;
+export type UpdateMetricMetadataMutationError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Update metric metadata
 */
 export const useUpdateMetricMetadata = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateMetricMetadata>>,
@@ -800,7 +803,7 @@ export const inspectMetrics = (

 export const getInspectMetricsMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof inspectMetrics>>,
@@ -817,8 +820,8 @@ export const getInspectMetricsMutationOptions = <
 	const mutationKey = ['inspectMetrics'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -838,7 +841,8 @@ export const getInspectMetricsMutationOptions = <
 export type InspectMetricsMutationResult = NonNullable<
 	Awaited<ReturnType<typeof inspectMetrics>>
 >;
-export type InspectMetricsMutationBody = BodyType<MetricsexplorertypesInspectMetricsRequestDTO>;
+export type InspectMetricsMutationBody =
+	BodyType<MetricsexplorertypesInspectMetricsRequestDTO>;
 export type InspectMetricsMutationError = ErrorType<RenderErrorResponseDTO>;

 /**
@@ -846,7 +850,7 @@ export type InspectMetricsMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useInspectMetrics = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof inspectMetrics>>,
@@ -882,7 +886,7 @@ export const getGetMetricsOnboardingStatusQueryKey = () => {

 export const getGetMetricsOnboardingStatusQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMetricsOnboardingStatus>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof getMetricsOnboardingStatus>>,
@@ -909,7 +913,8 @@ export const getGetMetricsOnboardingStatusQueryOptions = <
 export type GetMetricsOnboardingStatusQueryResult = NonNullable<
 	Awaited<ReturnType<typeof getMetricsOnboardingStatus>>
 >;
-export type GetMetricsOnboardingStatusQueryError = ErrorType<RenderErrorResponseDTO>;
+export type GetMetricsOnboardingStatusQueryError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Check if non-SigNoz metrics have been received
@@ -917,7 +922,7 @@ export type GetMetricsOnboardingStatusQueryError = ErrorType<RenderErrorResponse

 export function useGetMetricsOnboardingStatus<
 	TData = Awaited<ReturnType<typeof getMetricsOnboardingStatus>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof getMetricsOnboardingStatus>>,
@@ -970,7 +975,7 @@ export const getMetricsStats = (

 export const getGetMetricsStatsMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof getMetricsStats>>,
@@ -987,8 +992,8 @@ export const getGetMetricsStatsMutationOptions = <
 	const mutationKey = ['getMetricsStats'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -1008,7 +1013,8 @@ export const getGetMetricsStatsMutationOptions = <
 export type GetMetricsStatsMutationResult = NonNullable<
 	Awaited<ReturnType<typeof getMetricsStats>>
 >;
-export type GetMetricsStatsMutationBody = BodyType<MetricsexplorertypesStatsRequestDTO>;
+export type GetMetricsStatsMutationBody =
+	BodyType<MetricsexplorertypesStatsRequestDTO>;
 export type GetMetricsStatsMutationError = ErrorType<RenderErrorResponseDTO>;

 /**
@@ -1016,7 +1022,7 @@ export type GetMetricsStatsMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useGetMetricsStats = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof getMetricsStats>>,
@@ -1053,7 +1059,7 @@ export const getMetricsTreemap = (

 export const getGetMetricsTreemapMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof getMetricsTreemap>>,
@@ -1070,8 +1076,8 @@ export const getGetMetricsTreemapMutationOptions = <
 	const mutationKey = ['getMetricsTreemap'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -1091,7 +1097,8 @@ export const getGetMetricsTreemapMutationOptions = <
 export type GetMetricsTreemapMutationResult = NonNullable<
 	Awaited<ReturnType<typeof getMetricsTreemap>>
 >;
-export type GetMetricsTreemapMutationBody = BodyType<MetricsexplorertypesTreemapRequestDTO>;
+export type GetMetricsTreemapMutationBody =
+	BodyType<MetricsexplorertypesTreemapRequestDTO>;
 export type GetMetricsTreemapMutationError = ErrorType<RenderErrorResponseDTO>;

 /**
@@ -1099,7 +1106,7 @@ export type GetMetricsTreemapMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useGetMetricsTreemap = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof getMetricsTreemap>>,
--- a/frontend/src/api/generated/services/orgs/index.ts
+++ b/frontend/src/api/generated/services/orgs/index.ts
@@ -4,6 +4,7 @@
 * * regenerate with 'yarn generate:api'
 * SigNoz
 */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,16 +16,16 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';

-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	GetMyOrganization200,
 	RenderErrorResponseDTO,
 	TypesOrganizationDTO,
 } from '../sigNoz.schemas';

+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
 /**
 * This endpoint returns the organization I belong to
 * @summary Get my organization
@@ -43,7 +44,7 @@ export const getGetMyOrganizationQueryKey = () => {

 export const getGetMyOrganizationQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMyOrganization>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof getMyOrganization>>,
@@ -77,7 +78,7 @@ export type GetMyOrganizationQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useGetMyOrganization<
 	TData = Awaited<ReturnType<typeof getMyOrganization>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof getMyOrganization>>,
@@ -128,7 +129,7 @@ export const updateMyOrganization = (

 export const getUpdateMyOrganizationMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateMyOrganization>>,
@@ -145,8 +146,8 @@ export const getUpdateMyOrganizationMutationOptions = <
 	const mutationKey = ['updateMyOrganization'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -167,14 +168,15 @@ export type UpdateMyOrganizationMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updateMyOrganization>>
 >;
 export type UpdateMyOrganizationMutationBody = BodyType<TypesOrganizationDTO>;
-export type UpdateMyOrganizationMutationError = ErrorType<RenderErrorResponseDTO>;
+export type UpdateMyOrganizationMutationError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Update my organization
 */
 export const useUpdateMyOrganization = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateMyOrganization>>,
--- a/frontend/src/api/generated/services/preferences/index.ts
+++ b/frontend/src/api/generated/services/preferences/index.ts
@@ -4,6 +4,7 @@
 * * regenerate with 'yarn generate:api'
 * SigNoz
 */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,10 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';

-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	GetOrgPreference200,
 	GetOrgPreferencePathParameters,
@@ -32,6 +30,9 @@ import type {
 	UpdateUserPreferencePathParameters,
 } from '../sigNoz.schemas';

+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
 /**
 * This endpoint lists all org preferences
 * @summary List org preferences
@@ -50,7 +51,7 @@ export const getListOrgPreferencesQueryKey = () => {

 export const getListOrgPreferencesQueryOptions = <
 	TData = Awaited<ReturnType<typeof listOrgPreferences>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof listOrgPreferences>>,
@@ -84,7 +85,7 @@ export type ListOrgPreferencesQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useListOrgPreferences<
 	TData = Awaited<ReturnType<typeof listOrgPreferences>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof listOrgPreferences>>,
@@ -141,7 +142,7 @@ export const getGetOrgPreferenceQueryKey = ({

 export const getGetOrgPreferenceQueryOptions = <
 	TData = Awaited<ReturnType<typeof getOrgPreference>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ name }: GetOrgPreferencePathParameters,
 	options?: {
@@ -184,7 +185,7 @@ export type GetOrgPreferenceQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useGetOrgPreference<
 	TData = Awaited<ReturnType<typeof getOrgPreference>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ name }: GetOrgPreferencePathParameters,
 	options?: {
@@ -240,7 +241,7 @@ export const updateOrgPreference = (

 export const getUpdateOrgPreferenceMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateOrgPreference>>,
@@ -263,8 +264,8 @@ export const getUpdateOrgPreferenceMutationOptions = <
 	const mutationKey = ['updateOrgPreference'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -287,15 +288,17 @@ export const getUpdateOrgPreferenceMutationOptions = <
 export type UpdateOrgPreferenceMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updateOrgPreference>>
 >;
-export type UpdateOrgPreferenceMutationBody = BodyType<PreferencetypesUpdatablePreferenceDTO>;
-export type UpdateOrgPreferenceMutationError = ErrorType<RenderErrorResponseDTO>;
+export type UpdateOrgPreferenceMutationBody =
+	BodyType<PreferencetypesUpdatablePreferenceDTO>;
+export type UpdateOrgPreferenceMutationError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Update org preference
 */
 export const useUpdateOrgPreference = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateOrgPreference>>,
@@ -337,7 +340,7 @@ export const getListUserPreferencesQueryKey = () => {

 export const getListUserPreferencesQueryOptions = <
 	TData = Awaited<ReturnType<typeof listUserPreferences>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof listUserPreferences>>,
@@ -371,7 +374,7 @@ export type ListUserPreferencesQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useListUserPreferences<
 	TData = Awaited<ReturnType<typeof listUserPreferences>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof listUserPreferences>>,
@@ -428,7 +431,7 @@ export const getGetUserPreferenceQueryKey = ({

 export const getGetUserPreferenceQueryOptions = <
 	TData = Awaited<ReturnType<typeof getUserPreference>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ name }: GetUserPreferencePathParameters,
 	options?: {
@@ -471,7 +474,7 @@ export type GetUserPreferenceQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useGetUserPreference<
 	TData = Awaited<ReturnType<typeof getUserPreference>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ name }: GetUserPreferencePathParameters,
 	options?: {
@@ -527,7 +530,7 @@ export const updateUserPreference = (

 export const getUpdateUserPreferenceMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateUserPreference>>,
@@ -550,8 +553,8 @@ export const getUpdateUserPreferenceMutationOptions = <
 	const mutationKey = ['updateUserPreference'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -574,15 +577,17 @@ export const getUpdateUserPreferenceMutationOptions = <
 export type UpdateUserPreferenceMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updateUserPreference>>
 >;
-export type UpdateUserPreferenceMutationBody = BodyType<PreferencetypesUpdatablePreferenceDTO>;
-export type UpdateUserPreferenceMutationError = ErrorType<RenderErrorResponseDTO>;
+export type UpdateUserPreferenceMutationBody =
+	BodyType<PreferencetypesUpdatablePreferenceDTO>;
+export type UpdateUserPreferenceMutationError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Update user preference
 */
 export const useUpdateUserPreference = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateUserPreference>>,
--- a/frontend/src/api/generated/services/querier/index.ts
+++ b/frontend/src/api/generated/services/querier/index.ts
@@ -4,22 +4,23 @@
 * * regenerate with 'yarn generate:api'
 * SigNoz
 */
+import { useMutation } from 'react-query';
 import type {
 	MutationFunction,
 	UseMutationOptions,
 	UseMutationResult,
 } from 'react-query';
-import { useMutation } from 'react-query';

-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
-	Querybuildertypesv5QueryRangeRequestDTO,
 	QueryRangeV5200,
+	Querybuildertypesv5QueryRangeRequestDTO,
 	RenderErrorResponseDTO,
 	ReplaceVariables200,
 } from '../sigNoz.schemas';

+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
 /**
 * Execute a composite query over a time range. Supports builder queries (traces, logs, metrics), formulas, trace operators, PromQL, and ClickHouse SQL.
 * @summary Query range
@@ -39,7 +40,7 @@ export const queryRangeV5 = (

 export const getQueryRangeV5MutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof queryRangeV5>>,
@@ -56,8 +57,8 @@ export const getQueryRangeV5MutationOptions = <
 	const mutationKey = ['queryRangeV5'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -77,7 +78,8 @@ export const getQueryRangeV5MutationOptions = <
 export type QueryRangeV5MutationResult = NonNullable<
 	Awaited<ReturnType<typeof queryRangeV5>>
 >;
-export type QueryRangeV5MutationBody = BodyType<Querybuildertypesv5QueryRangeRequestDTO>;
+export type QueryRangeV5MutationBody =
+	BodyType<Querybuildertypesv5QueryRangeRequestDTO>;
 export type QueryRangeV5MutationError = ErrorType<RenderErrorResponseDTO>;

 /**
@@ -85,7 +87,7 @@ export type QueryRangeV5MutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useQueryRangeV5 = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof queryRangeV5>>,
@@ -122,7 +124,7 @@ export const replaceVariables = (

 export const getReplaceVariablesMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof replaceVariables>>,
@@ -139,8 +141,8 @@ export const getReplaceVariablesMutationOptions = <
 	const mutationKey = ['replaceVariables'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -160,7 +162,8 @@ export const getReplaceVariablesMutationOptions = <
 export type ReplaceVariablesMutationResult = NonNullable<
 	Awaited<ReturnType<typeof replaceVariables>>
 >;
-export type ReplaceVariablesMutationBody = BodyType<Querybuildertypesv5QueryRangeRequestDTO>;
+export type ReplaceVariablesMutationBody =
+	BodyType<Querybuildertypesv5QueryRangeRequestDTO>;
 export type ReplaceVariablesMutationError = ErrorType<RenderErrorResponseDTO>;

 /**
@@ -168,7 +171,7 @@ export type ReplaceVariablesMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useReplaceVariables = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof replaceVariables>>,
--- a/frontend/src/api/generated/services/role/index.ts
+++ b/frontend/src/api/generated/services/role/index.ts
@@ -4,6 +4,7 @@
 * * regenerate with 'yarn generate:api'
 * SigNoz
 */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,10 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';

-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	AuthtypesPatchableObjectsDTO,
 	AuthtypesPatchableRoleDTO,
@@ -35,6 +33,9 @@ import type {
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';

+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
 /**
 * This endpoint lists all roles
 * @summary List roles
@@ -53,7 +54,7 @@ export const getListRolesQueryKey = () => {

 export const getListRolesQueryOptions = <
 	TData = Awaited<ReturnType<typeof listRoles>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<Awaited<ReturnType<typeof listRoles>>, TError, TData>;
 }) => {
@@ -83,7 +84,7 @@ export type ListRolesQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useListRoles<
 	TData = Awaited<ReturnType<typeof listRoles>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<Awaited<ReturnType<typeof listRoles>>, TError, TData>;
 }): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
@@ -132,7 +133,7 @@ export const createRole = (

 export const getCreateRoleMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createRole>>,
@@ -149,8 +150,8 @@ export const getCreateRoleMutationOptions = <
 	const mutationKey = ['createRole'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -178,7 +179,7 @@ export type CreateRoleMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useCreateRole = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createRole>>,
@@ -209,7 +210,7 @@ export const deleteRole = ({ id }: DeleteRolePathParameters) => {

 export const getDeleteRoleMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteRole>>,
@@ -226,8 +227,8 @@ export const getDeleteRoleMutationOptions = <
 	const mutationKey = ['deleteRole'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -255,7 +256,7 @@ export type DeleteRoleMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useDeleteRole = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteRole>>,
@@ -294,7 +295,7 @@ export const getGetRoleQueryKey = ({ id }: GetRolePathParameters) => {

 export const getGetRoleQueryOptions = <
 	TData = Awaited<ReturnType<typeof getRole>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRolePathParameters,
 	options?: {
@@ -330,7 +331,7 @@ export type GetRoleQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useGetRole<
 	TData = Awaited<ReturnType<typeof getRole>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRolePathParameters,
 	options?: {
@@ -382,7 +383,7 @@ export const patchRole = (

 export const getPatchRoleMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof patchRole>>,
@@ -405,8 +406,8 @@ export const getPatchRoleMutationOptions = <
 	const mutationKey = ['patchRole'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -437,7 +438,7 @@ export type PatchRoleMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const usePatchRole = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof patchRole>>,
@@ -485,7 +486,7 @@ export const getGetObjectsQueryKey = ({

 export const getGetObjectsQueryOptions = <
 	TData = Awaited<ReturnType<typeof getObjects>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id, relation }: GetObjectsPathParameters,
 	options?: {
@@ -526,7 +527,7 @@ export type GetObjectsQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useGetObjects<
 	TData = Awaited<ReturnType<typeof getObjects>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id, relation }: GetObjectsPathParameters,
 	options?: {
@@ -582,7 +583,7 @@ export const patchObjects = (

 export const getPatchObjectsMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof patchObjects>>,
@@ -605,8 +606,8 @@ export const getPatchObjectsMutationOptions = <
 	const mutationKey = ['patchObjects'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -637,7 +638,7 @@ export type PatchObjectsMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const usePatchObjects = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof patchObjects>>,
--- a/frontend/src/api/generated/services/routepolicies/index.ts
+++ b/frontend/src/api/generated/services/routepolicies/index.ts
@@ -4,6 +4,7 @@
 * * regenerate with 'yarn generate:api'
 * SigNoz
 */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,10 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';

-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	AlertmanagertypesPostableRoutePolicyDTO,
 	CreateRoutePolicy201,
@@ -31,6 +29,9 @@ import type {
 	UpdateRoutePolicyPathParameters,
 } from '../sigNoz.schemas';

+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
 /**
 * This endpoint lists all route policies for the organization
 * @summary List route policies
@@ -49,7 +50,7 @@ export const getGetAllRoutePoliciesQueryKey = () => {

 export const getGetAllRoutePoliciesQueryOptions = <
 	TData = Awaited<ReturnType<typeof getAllRoutePolicies>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof getAllRoutePolicies>>,
@@ -83,7 +84,7 @@ export type GetAllRoutePoliciesQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useGetAllRoutePolicies<
 	TData = Awaited<ReturnType<typeof getAllRoutePolicies>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof getAllRoutePolicies>>,
@@ -136,7 +137,7 @@ export const createRoutePolicy = (

 export const getCreateRoutePolicyMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createRoutePolicy>>,
@@ -153,8 +154,8 @@ export const getCreateRoutePolicyMutationOptions = <
 	const mutationKey = ['createRoutePolicy'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -174,7 +175,8 @@ export const getCreateRoutePolicyMutationOptions = <
 export type CreateRoutePolicyMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createRoutePolicy>>
 >;
-export type CreateRoutePolicyMutationBody = BodyType<AlertmanagertypesPostableRoutePolicyDTO>;
+export type CreateRoutePolicyMutationBody =
+	BodyType<AlertmanagertypesPostableRoutePolicyDTO>;
 export type CreateRoutePolicyMutationError = ErrorType<RenderErrorResponseDTO>;

 /**
@@ -182,7 +184,7 @@ export type CreateRoutePolicyMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useCreateRoutePolicy = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createRoutePolicy>>,
@@ -215,7 +217,7 @@ export const deleteRoutePolicyByID = ({

 export const getDeleteRoutePolicyByIDMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteRoutePolicyByID>>,
@@ -232,8 +234,8 @@ export const getDeleteRoutePolicyByIDMutationOptions = <
 	const mutationKey = ['deleteRoutePolicyByID'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -254,14 +256,15 @@ export type DeleteRoutePolicyByIDMutationResult = NonNullable<
 	Awaited<ReturnType<typeof deleteRoutePolicyByID>>
 >;

-export type DeleteRoutePolicyByIDMutationError = ErrorType<RenderErrorResponseDTO>;
+export type DeleteRoutePolicyByIDMutationError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Delete route policy
 */
 export const useDeleteRoutePolicyByID = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteRoutePolicyByID>>,
@@ -302,7 +305,7 @@ export const getGetRoutePolicyByIDQueryKey = ({

 export const getGetRoutePolicyByIDQueryOptions = <
 	TData = Awaited<ReturnType<typeof getRoutePolicyByID>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRoutePolicyByIDPathParameters,
 	options?: {
@@ -345,7 +348,7 @@ export type GetRoutePolicyByIDQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useGetRoutePolicyByID<
 	TData = Awaited<ReturnType<typeof getRoutePolicyByID>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRoutePolicyByIDPathParameters,
 	options?: {
@@ -401,7 +404,7 @@ export const updateRoutePolicy = (

 export const getUpdateRoutePolicyMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateRoutePolicy>>,
@@ -424,8 +427,8 @@ export const getUpdateRoutePolicyMutationOptions = <
 	const mutationKey = ['updateRoutePolicy'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -448,7 +451,8 @@ export const getUpdateRoutePolicyMutationOptions = <
 export type UpdateRoutePolicyMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updateRoutePolicy>>
 >;
-export type UpdateRoutePolicyMutationBody = BodyType<AlertmanagertypesPostableRoutePolicyDTO>;
+export type UpdateRoutePolicyMutationBody =
+	BodyType<AlertmanagertypesPostableRoutePolicyDTO>;
 export type UpdateRoutePolicyMutationError = ErrorType<RenderErrorResponseDTO>;

 /**
@@ -456,7 +460,7 @@ export type UpdateRoutePolicyMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useUpdateRoutePolicy = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateRoutePolicy>>,
--- a/frontend/src/api/generated/services/rules/index.ts
+++ b/frontend/src/api/generated/services/rules/index.ts
@@ -4,6 +4,7 @@
 * * regenerate with 'yarn generate:api'
 * SigNoz
 */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,10 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';

-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	CreateRule201,
 	DeleteRuleByIDPathParameters,
@@ -51,6 +49,9 @@ import type {
 	UpdateRuleByIDPathParameters,
 } from '../sigNoz.schemas';

+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
 /**
 * This endpoint lists all alert rules with their current evaluation state
 * @summary List alert rules
@@ -69,7 +70,7 @@ export const getListRulesQueryKey = () => {

 export const getListRulesQueryOptions = <
 	TData = Awaited<ReturnType<typeof listRules>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<Awaited<ReturnType<typeof listRules>>, TError, TData>;
 }) => {
@@ -99,7 +100,7 @@ export type ListRulesQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useListRules<
 	TData = Awaited<ReturnType<typeof listRules>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<Awaited<ReturnType<typeof listRules>>, TError, TData>;
 }): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
@@ -148,7 +149,7 @@ export const createRule = (

 export const getCreateRuleMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createRule>>,
@@ -165,8 +166,8 @@ export const getCreateRuleMutationOptions = <
 	const mutationKey = ['createRule'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -194,7 +195,7 @@ export type CreateRuleMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useCreateRule = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createRule>>,
@@ -225,7 +226,7 @@ export const deleteRuleByID = ({ id }: DeleteRuleByIDPathParameters) => {

 export const getDeleteRuleByIDMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteRuleByID>>,
@@ -242,8 +243,8 @@ export const getDeleteRuleByIDMutationOptions = <
 	const mutationKey = ['deleteRuleByID'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -271,7 +272,7 @@ export type DeleteRuleByIDMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useDeleteRuleByID = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteRuleByID>>,
@@ -310,7 +311,7 @@ export const getGetRuleByIDQueryKey = ({ id }: GetRuleByIDPathParameters) => {

 export const getGetRuleByIDQueryOptions = <
 	TData = Awaited<ReturnType<typeof getRuleByID>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRuleByIDPathParameters,
 	options?: {
@@ -352,7 +353,7 @@ export type GetRuleByIDQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useGetRuleByID<
 	TData = Awaited<ReturnType<typeof getRuleByID>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRuleByIDPathParameters,
 	options?: {
@@ -408,7 +409,7 @@ export const patchRuleByID = (

 export const getPatchRuleByIDMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof patchRuleByID>>,
@@ -431,8 +432,8 @@ export const getPatchRuleByIDMutationOptions = <
 	const mutationKey = ['patchRuleByID'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -463,7 +464,7 @@ export type PatchRuleByIDMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const usePatchRuleByID = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof patchRuleByID>>,
@@ -505,7 +506,7 @@ export const updateRuleByID = (

 export const getUpdateRuleByIDMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateRuleByID>>,
@@ -528,8 +529,8 @@ export const getUpdateRuleByIDMutationOptions = <
 	const mutationKey = ['updateRuleByID'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -560,7 +561,7 @@ export type UpdateRuleByIDMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useUpdateRuleByID = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateRuleByID>>,
@@ -613,7 +614,7 @@ export const getGetRuleHistoryFilterKeysQueryKey = (

 export const getGetRuleHistoryFilterKeysQueryOptions = <
 	TData = Awaited<ReturnType<typeof getRuleHistoryFilterKeys>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRuleHistoryFilterKeysPathParameters,
 	params?: GetRuleHistoryFilterKeysParams,
@@ -649,7 +650,8 @@ export const getGetRuleHistoryFilterKeysQueryOptions = <
 export type GetRuleHistoryFilterKeysQueryResult = NonNullable<
 	Awaited<ReturnType<typeof getRuleHistoryFilterKeys>>
 >;
-export type GetRuleHistoryFilterKeysQueryError = ErrorType<RenderErrorResponseDTO>;
+export type GetRuleHistoryFilterKeysQueryError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Get rule history filter keys
@@ -657,7 +659,7 @@ export type GetRuleHistoryFilterKeysQueryError = ErrorType<RenderErrorResponseDT

 export function useGetRuleHistoryFilterKeys<
 	TData = Awaited<ReturnType<typeof getRuleHistoryFilterKeys>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRuleHistoryFilterKeysPathParameters,
 	params?: GetRuleHistoryFilterKeysParams,
@@ -730,7 +732,7 @@ export const getGetRuleHistoryFilterValuesQueryKey = (

 export const getGetRuleHistoryFilterValuesQueryOptions = <
 	TData = Awaited<ReturnType<typeof getRuleHistoryFilterValues>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRuleHistoryFilterValuesPathParameters,
 	params?: GetRuleHistoryFilterValuesParams,
@@ -767,7 +769,8 @@ export const getGetRuleHistoryFilterValuesQueryOptions = <
 export type GetRuleHistoryFilterValuesQueryResult = NonNullable<
 	Awaited<ReturnType<typeof getRuleHistoryFilterValues>>
 >;
-export type GetRuleHistoryFilterValuesQueryError = ErrorType<RenderErrorResponseDTO>;
+export type GetRuleHistoryFilterValuesQueryError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Get rule history filter values
@@ -775,7 +778,7 @@ export type GetRuleHistoryFilterValuesQueryError = ErrorType<RenderErrorResponse

 export function useGetRuleHistoryFilterValues<
 	TData = Awaited<ReturnType<typeof getRuleHistoryFilterValues>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRuleHistoryFilterValuesPathParameters,
 	params?: GetRuleHistoryFilterValuesParams,
@@ -848,7 +851,7 @@ export const getGetRuleHistoryOverallStatusQueryKey = (

 export const getGetRuleHistoryOverallStatusQueryOptions = <
 	TData = Awaited<ReturnType<typeof getRuleHistoryOverallStatus>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRuleHistoryOverallStatusPathParameters,
 	params: GetRuleHistoryOverallStatusParams,
@@ -885,7 +888,8 @@ export const getGetRuleHistoryOverallStatusQueryOptions = <
 export type GetRuleHistoryOverallStatusQueryResult = NonNullable<
 	Awaited<ReturnType<typeof getRuleHistoryOverallStatus>>
 >;
-export type GetRuleHistoryOverallStatusQueryError = ErrorType<RenderErrorResponseDTO>;
+export type GetRuleHistoryOverallStatusQueryError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Get rule overall status timeline
@@ -893,7 +897,7 @@ export type GetRuleHistoryOverallStatusQueryError = ErrorType<RenderErrorRespons

 export function useGetRuleHistoryOverallStatus<
 	TData = Awaited<ReturnType<typeof getRuleHistoryOverallStatus>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRuleHistoryOverallStatusPathParameters,
 	params: GetRuleHistoryOverallStatusParams,
@@ -966,7 +970,7 @@ export const getGetRuleHistoryStatsQueryKey = (

 export const getGetRuleHistoryStatsQueryOptions = <
 	TData = Awaited<ReturnType<typeof getRuleHistoryStats>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRuleHistoryStatsPathParameters,
 	params: GetRuleHistoryStatsParams,
@@ -1010,7 +1014,7 @@ export type GetRuleHistoryStatsQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useGetRuleHistoryStats<
 	TData = Awaited<ReturnType<typeof getRuleHistoryStats>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRuleHistoryStatsPathParameters,
 	params: GetRuleHistoryStatsParams,
@@ -1083,7 +1087,7 @@ export const getGetRuleHistoryTimelineQueryKey = (

 export const getGetRuleHistoryTimelineQueryOptions = <
 	TData = Awaited<ReturnType<typeof getRuleHistoryTimeline>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRuleHistoryTimelinePathParameters,
 	params: GetRuleHistoryTimelineParams,
@@ -1119,7 +1123,8 @@ export const getGetRuleHistoryTimelineQueryOptions = <
 export type GetRuleHistoryTimelineQueryResult = NonNullable<
 	Awaited<ReturnType<typeof getRuleHistoryTimeline>>
 >;
-export type GetRuleHistoryTimelineQueryError = ErrorType<RenderErrorResponseDTO>;
+export type GetRuleHistoryTimelineQueryError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Get rule history timeline
@@ -1127,7 +1132,7 @@ export type GetRuleHistoryTimelineQueryError = ErrorType<RenderErrorResponseDTO>

 export function useGetRuleHistoryTimeline<
 	TData = Awaited<ReturnType<typeof getRuleHistoryTimeline>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRuleHistoryTimelinePathParameters,
 	params: GetRuleHistoryTimelineParams,
@@ -1200,7 +1205,7 @@ export const getGetRuleHistoryTopContributorsQueryKey = (

 export const getGetRuleHistoryTopContributorsQueryOptions = <
 	TData = Awaited<ReturnType<typeof getRuleHistoryTopContributors>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRuleHistoryTopContributorsPathParameters,
 	params: GetRuleHistoryTopContributorsParams,
@@ -1237,7 +1242,8 @@ export const getGetRuleHistoryTopContributorsQueryOptions = <
 export type GetRuleHistoryTopContributorsQueryResult = NonNullable<
 	Awaited<ReturnType<typeof getRuleHistoryTopContributors>>
 >;
-export type GetRuleHistoryTopContributorsQueryError = ErrorType<RenderErrorResponseDTO>;
+export type GetRuleHistoryTopContributorsQueryError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Get top contributors to rule firing
@@ -1245,7 +1251,7 @@ export type GetRuleHistoryTopContributorsQueryError = ErrorType<RenderErrorRespo

 export function useGetRuleHistoryTopContributors<
 	TData = Awaited<ReturnType<typeof getRuleHistoryTopContributors>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRuleHistoryTopContributorsPathParameters,
 	params: GetRuleHistoryTopContributorsParams,
@@ -1308,7 +1314,7 @@ export const testRule = (

 export const getTestRuleMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof testRule>>,
@@ -1325,8 +1331,8 @@ export const getTestRuleMutationOptions = <
 	const mutationKey = ['testRule'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -1354,7 +1360,7 @@ export type TestRuleMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useTestRule = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof testRule>>,
--- a/frontend/src/api/generated/services/serviceaccount/index.ts
+++ b/frontend/src/api/generated/services/serviceaccount/index.ts
@@ -4,6 +4,7 @@
 * * regenerate with 'yarn generate:api'
 * SigNoz
 */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,10 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';

-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	CreateServiceAccount201,
 	CreateServiceAccountKey201,
@@ -45,6 +43,9 @@ import type {
 	UpdateServiceAccountPathParameters,
 } from '../sigNoz.schemas';

+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
 /**
 * This endpoint lists the service accounts for an organisation
 * @summary List service accounts
@@ -63,7 +64,7 @@ export const getListServiceAccountsQueryKey = () => {

 export const getListServiceAccountsQueryOptions = <
 	TData = Awaited<ReturnType<typeof listServiceAccounts>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof listServiceAccounts>>,
@@ -97,7 +98,7 @@ export type ListServiceAccountsQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useListServiceAccounts<
 	TData = Awaited<ReturnType<typeof listServiceAccounts>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof listServiceAccounts>>,
@@ -150,7 +151,7 @@ export const createServiceAccount = (

 export const getCreateServiceAccountMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createServiceAccount>>,
@@ -167,8 +168,8 @@ export const getCreateServiceAccountMutationOptions = <
 	const mutationKey = ['createServiceAccount'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -188,15 +189,17 @@ export const getCreateServiceAccountMutationOptions = <
 export type CreateServiceAccountMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createServiceAccount>>
 >;
-export type CreateServiceAccountMutationBody = BodyType<ServiceaccounttypesPostableServiceAccountDTO>;
-export type CreateServiceAccountMutationError = ErrorType<RenderErrorResponseDTO>;
+export type CreateServiceAccountMutationBody =
+	BodyType<ServiceaccounttypesPostableServiceAccountDTO>;
+export type CreateServiceAccountMutationError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Create service account
 */
 export const useCreateServiceAccount = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createServiceAccount>>,
@@ -229,7 +232,7 @@ export const deleteServiceAccount = ({

 export const getDeleteServiceAccountMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteServiceAccount>>,
@@ -246,8 +249,8 @@ export const getDeleteServiceAccountMutationOptions = <
 	const mutationKey = ['deleteServiceAccount'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -268,14 +271,15 @@ export type DeleteServiceAccountMutationResult = NonNullable<
 	Awaited<ReturnType<typeof deleteServiceAccount>>
 >;

-export type DeleteServiceAccountMutationError = ErrorType<RenderErrorResponseDTO>;
+export type DeleteServiceAccountMutationError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Deletes a service account
 */
 export const useDeleteServiceAccount = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteServiceAccount>>,
@@ -316,7 +320,7 @@ export const getGetServiceAccountQueryKey = ({

 export const getGetServiceAccountQueryOptions = <
 	TData = Awaited<ReturnType<typeof getServiceAccount>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetServiceAccountPathParameters,
 	options?: {
@@ -359,7 +363,7 @@ export type GetServiceAccountQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useGetServiceAccount<
 	TData = Awaited<ReturnType<typeof getServiceAccount>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetServiceAccountPathParameters,
 	options?: {
@@ -415,7 +419,7 @@ export const updateServiceAccount = (

 export const getUpdateServiceAccountMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateServiceAccount>>,
@@ -438,8 +442,8 @@ export const getUpdateServiceAccountMutationOptions = <
 	const mutationKey = ['updateServiceAccount'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -462,15 +466,17 @@ export const getUpdateServiceAccountMutationOptions = <
 export type UpdateServiceAccountMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updateServiceAccount>>
 >;
-export type UpdateServiceAccountMutationBody = BodyType<ServiceaccounttypesPostableServiceAccountDTO>;
-export type UpdateServiceAccountMutationError = ErrorType<RenderErrorResponseDTO>;
+export type UpdateServiceAccountMutationBody =
+	BodyType<ServiceaccounttypesPostableServiceAccountDTO>;
+export type UpdateServiceAccountMutationError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Updates a service account
 */
 export const useUpdateServiceAccount = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateServiceAccount>>,
@@ -517,7 +523,7 @@ export const getListServiceAccountKeysQueryKey = ({

 export const getListServiceAccountKeysQueryOptions = <
 	TData = Awaited<ReturnType<typeof listServiceAccountKeys>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: ListServiceAccountKeysPathParameters,
 	options?: {
@@ -552,7 +558,8 @@ export const getListServiceAccountKeysQueryOptions = <
 export type ListServiceAccountKeysQueryResult = NonNullable<
 	Awaited<ReturnType<typeof listServiceAccountKeys>>
 >;
-export type ListServiceAccountKeysQueryError = ErrorType<RenderErrorResponseDTO>;
+export type ListServiceAccountKeysQueryError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary List service account keys
@@ -560,7 +567,7 @@ export type ListServiceAccountKeysQueryError = ErrorType<RenderErrorResponseDTO>

 export function useListServiceAccountKeys<
 	TData = Awaited<ReturnType<typeof listServiceAccountKeys>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: ListServiceAccountKeysPathParameters,
 	options?: {
@@ -618,7 +625,7 @@ export const createServiceAccountKey = (

 export const getCreateServiceAccountKeyMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createServiceAccountKey>>,
@@ -641,8 +648,8 @@ export const getCreateServiceAccountKeyMutationOptions = <
 	const mutationKey = ['createServiceAccountKey'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -665,15 +672,17 @@ export const getCreateServiceAccountKeyMutationOptions = <
 export type CreateServiceAccountKeyMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createServiceAccountKey>>
 >;
-export type CreateServiceAccountKeyMutationBody = BodyType<ServiceaccounttypesPostableFactorAPIKeyDTO>;
-export type CreateServiceAccountKeyMutationError = ErrorType<RenderErrorResponseDTO>;
+export type CreateServiceAccountKeyMutationBody =
+	BodyType<ServiceaccounttypesPostableFactorAPIKeyDTO>;
+export type CreateServiceAccountKeyMutationError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Create a service account key
 */
 export const useCreateServiceAccountKey = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createServiceAccountKey>>,
@@ -713,7 +722,7 @@ export const revokeServiceAccountKey = ({

 export const getRevokeServiceAccountKeyMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof revokeServiceAccountKey>>,
@@ -730,8 +739,8 @@ export const getRevokeServiceAccountKeyMutationOptions = <
 	const mutationKey = ['revokeServiceAccountKey'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -752,14 +761,15 @@ export type RevokeServiceAccountKeyMutationResult = NonNullable<
 	Awaited<ReturnType<typeof revokeServiceAccountKey>>
 >;

-export type RevokeServiceAccountKeyMutationError = ErrorType<RenderErrorResponseDTO>;
+export type RevokeServiceAccountKeyMutationError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Revoke a service account key
 */
 export const useRevokeServiceAccountKey = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof revokeServiceAccountKey>>,
@@ -795,7 +805,7 @@ export const updateServiceAccountKey = (

 export const getUpdateServiceAccountKeyMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateServiceAccountKey>>,
@@ -818,8 +828,8 @@ export const getUpdateServiceAccountKeyMutationOptions = <
 	const mutationKey = ['updateServiceAccountKey'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -842,15 +852,17 @@ export const getUpdateServiceAccountKeyMutationOptions = <
 export type UpdateServiceAccountKeyMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updateServiceAccountKey>>
 >;
-export type UpdateServiceAccountKeyMutationBody = BodyType<ServiceaccounttypesUpdatableFactorAPIKeyDTO>;
-export type UpdateServiceAccountKeyMutationError = ErrorType<RenderErrorResponseDTO>;
+export type UpdateServiceAccountKeyMutationBody =
+	BodyType<ServiceaccounttypesUpdatableFactorAPIKeyDTO>;
+export type UpdateServiceAccountKeyMutationError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Updates a service account key
 */
 export const useUpdateServiceAccountKey = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateServiceAccountKey>>,
@@ -897,7 +909,7 @@ export const getGetServiceAccountRolesQueryKey = ({

 export const getGetServiceAccountRolesQueryOptions = <
 	TData = Awaited<ReturnType<typeof getServiceAccountRoles>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetServiceAccountRolesPathParameters,
 	options?: {
@@ -932,7 +944,8 @@ export const getGetServiceAccountRolesQueryOptions = <
 export type GetServiceAccountRolesQueryResult = NonNullable<
 	Awaited<ReturnType<typeof getServiceAccountRoles>>
 >;
-export type GetServiceAccountRolesQueryError = ErrorType<RenderErrorResponseDTO>;
+export type GetServiceAccountRolesQueryError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Gets service account roles
@@ -940,7 +953,7 @@ export type GetServiceAccountRolesQueryError = ErrorType<RenderErrorResponseDTO>

 export function useGetServiceAccountRoles<
 	TData = Awaited<ReturnType<typeof getServiceAccountRoles>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetServiceAccountRolesPathParameters,
 	options?: {
@@ -998,7 +1011,7 @@ export const createServiceAccountRole = (

 export const getCreateServiceAccountRoleMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createServiceAccountRole>>,
@@ -1021,8 +1034,8 @@ export const getCreateServiceAccountRoleMutationOptions = <
 	const mutationKey = ['createServiceAccountRole'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -1045,15 +1058,17 @@ export const getCreateServiceAccountRoleMutationOptions = <
 export type CreateServiceAccountRoleMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createServiceAccountRole>>
 >;
-export type CreateServiceAccountRoleMutationBody = BodyType<ServiceaccounttypesPostableServiceAccountRoleDTO>;
-export type CreateServiceAccountRoleMutationError = ErrorType<RenderErrorResponseDTO>;
+export type CreateServiceAccountRoleMutationBody =
+	BodyType<ServiceaccounttypesPostableServiceAccountRoleDTO>;
+export type CreateServiceAccountRoleMutationError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Create service account role
 */
 export const useCreateServiceAccountRole = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createServiceAccountRole>>,
@@ -1093,7 +1108,7 @@ export const deleteServiceAccountRole = ({

 export const getDeleteServiceAccountRoleMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteServiceAccountRole>>,
@@ -1110,8 +1125,8 @@ export const getDeleteServiceAccountRoleMutationOptions = <
 	const mutationKey = ['deleteServiceAccountRole'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -1132,14 +1147,15 @@ export type DeleteServiceAccountRoleMutationResult = NonNullable<
 	Awaited<ReturnType<typeof deleteServiceAccountRole>>
 >;

-export type DeleteServiceAccountRoleMutationError = ErrorType<RenderErrorResponseDTO>;
+export type DeleteServiceAccountRoleMutationError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Delete service account role
 */
 export const useDeleteServiceAccountRole = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteServiceAccountRole>>,
@@ -1175,7 +1191,7 @@ export const getGetMyServiceAccountQueryKey = () => {

 export const getGetMyServiceAccountQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMyServiceAccount>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof getMyServiceAccount>>,
@@ -1209,7 +1225,7 @@ export type GetMyServiceAccountQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useGetMyServiceAccount<
 	TData = Awaited<ReturnType<typeof getMyServiceAccount>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof getMyServiceAccount>>,
@@ -1260,7 +1276,7 @@ export const updateMyServiceAccount = (

 export const getUpdateMyServiceAccountMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateMyServiceAccount>>,
@@ -1277,8 +1293,8 @@ export const getUpdateMyServiceAccountMutationOptions = <
 	const mutationKey = ['updateMyServiceAccount'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -1298,15 +1314,17 @@ export const getUpdateMyServiceAccountMutationOptions = <
 export type UpdateMyServiceAccountMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updateMyServiceAccount>>
 >;
-export type UpdateMyServiceAccountMutationBody = BodyType<ServiceaccounttypesPostableServiceAccountDTO>;
-export type UpdateMyServiceAccountMutationError = ErrorType<RenderErrorResponseDTO>;
+export type UpdateMyServiceAccountMutationBody =
+	BodyType<ServiceaccounttypesPostableServiceAccountDTO>;
+export type UpdateMyServiceAccountMutationError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Updates my service account
 */
 export const useUpdateMyServiceAccount = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateMyServiceAccount>>,
--- a/frontend/src/api/generated/services/sessions/index.ts
+++ b/frontend/src/api/generated/services/sessions/index.ts
@@ -4,6 +4,7 @@
 * * regenerate with 'yarn generate:api'
 * SigNoz
 */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,10 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';

-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	AuthtypesPostableEmailPasswordSessionDTO,
 	AuthtypesPostableRotateTokenDTO,
@@ -33,6 +31,9 @@ import type {
 	RotateSession200,
 } from '../sigNoz.schemas';

+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
 /**
 * This endpoint creates a session for a user using google callback
 * @summary Create session by google callback
@@ -51,7 +52,7 @@ export const getCreateSessionByGoogleCallbackQueryKey = () => {

 export const getCreateSessionByGoogleCallbackQueryOptions = <
 	TData = Awaited<ReturnType<typeof createSessionByGoogleCallback>>,
-	TError = ErrorType<CreateSessionByGoogleCallback303 | RenderErrorResponseDTO>
+	TError = ErrorType<CreateSessionByGoogleCallback303 | RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof createSessionByGoogleCallback>>,
@@ -88,7 +89,7 @@ export type CreateSessionByGoogleCallbackQueryError = ErrorType<

 export function useCreateSessionByGoogleCallback<
 	TData = Awaited<ReturnType<typeof createSessionByGoogleCallback>>,
-	TError = ErrorType<CreateSessionByGoogleCallback303 | RenderErrorResponseDTO>
+	TError = ErrorType<CreateSessionByGoogleCallback303 | RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof createSessionByGoogleCallback>>,
@@ -140,7 +141,7 @@ export const getCreateSessionByOIDCCallbackQueryKey = () => {

 export const getCreateSessionByOIDCCallbackQueryOptions = <
 	TData = Awaited<ReturnType<typeof createSessionByOIDCCallback>>,
-	TError = ErrorType<CreateSessionByOIDCCallback303 | RenderErrorResponseDTO>
+	TError = ErrorType<CreateSessionByOIDCCallback303 | RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof createSessionByOIDCCallback>>,
@@ -177,7 +178,7 @@ export type CreateSessionByOIDCCallbackQueryError = ErrorType<

 export function useCreateSessionByOIDCCallback<
 	TData = Awaited<ReturnType<typeof createSessionByOIDCCallback>>,
-	TError = ErrorType<CreateSessionByOIDCCallback303 | RenderErrorResponseDTO>
+	TError = ErrorType<CreateSessionByOIDCCallback303 | RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof createSessionByOIDCCallback>>,
@@ -246,7 +247,7 @@ export const createSessionBySAMLCallback = (

 export const getCreateSessionBySAMLCallbackMutationOptions = <
 	TError = ErrorType<CreateSessionBySAMLCallback303 | RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createSessionBySAMLCallback>>,
@@ -269,8 +270,8 @@ export const getCreateSessionBySAMLCallbackMutationOptions = <
 	const mutationKey = ['createSessionBySAMLCallback'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -293,7 +294,8 @@ export const getCreateSessionBySAMLCallbackMutationOptions = <
 export type CreateSessionBySAMLCallbackMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createSessionBySAMLCallback>>
 >;
-export type CreateSessionBySAMLCallbackMutationBody = BodyType<CreateSessionBySAMLCallbackBody>;
+export type CreateSessionBySAMLCallbackMutationBody =
+	BodyType<CreateSessionBySAMLCallbackBody>;
 export type CreateSessionBySAMLCallbackMutationError = ErrorType<
 	CreateSessionBySAMLCallback303 | RenderErrorResponseDTO
 >;
@@ -303,7 +305,7 @@ export type CreateSessionBySAMLCallbackMutationError = ErrorType<
 */
 export const useCreateSessionBySAMLCallback = <
 	TError = ErrorType<CreateSessionBySAMLCallback303 | RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createSessionBySAMLCallback>>,
@@ -340,7 +342,7 @@ export const deleteSession = () => {

 export const getDeleteSessionMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteSession>>,
@@ -357,8 +359,8 @@ export const getDeleteSessionMutationOptions = <
 	const mutationKey = ['deleteSession'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -384,7 +386,7 @@ export type DeleteSessionMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useDeleteSession = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteSession>>,
@@ -420,7 +422,7 @@ export const getGetSessionContextQueryKey = () => {

 export const getGetSessionContextQueryOptions = <
 	TData = Awaited<ReturnType<typeof getSessionContext>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof getSessionContext>>,
@@ -454,7 +456,7 @@ export type GetSessionContextQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useGetSessionContext<
 	TData = Awaited<ReturnType<typeof getSessionContext>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof getSessionContext>>,
@@ -507,7 +509,7 @@ export const createSessionByEmailPassword = (

 export const getCreateSessionByEmailPasswordMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createSessionByEmailPassword>>,
@@ -524,8 +526,8 @@ export const getCreateSessionByEmailPasswordMutationOptions = <
 	const mutationKey = ['createSessionByEmailPassword'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -545,15 +547,17 @@ export const getCreateSessionByEmailPasswordMutationOptions = <
 export type CreateSessionByEmailPasswordMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createSessionByEmailPassword>>
 >;
-export type CreateSessionByEmailPasswordMutationBody = BodyType<AuthtypesPostableEmailPasswordSessionDTO>;
-export type CreateSessionByEmailPasswordMutationError = ErrorType<RenderErrorResponseDTO>;
+export type CreateSessionByEmailPasswordMutationBody =
+	BodyType<AuthtypesPostableEmailPasswordSessionDTO>;
+export type CreateSessionByEmailPasswordMutationError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Create session by email and password
 */
 export const useCreateSessionByEmailPassword = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createSessionByEmailPassword>>,
@@ -567,9 +571,8 @@ export const useCreateSessionByEmailPassword = <
 	{ data: BodyType<AuthtypesPostableEmailPasswordSessionDTO> },
 	TContext
 > => {
-	const mutationOptions = getCreateSessionByEmailPasswordMutationOptions(
-		options,
-	);
+	const mutationOptions =
+		getCreateSessionByEmailPasswordMutationOptions(options);

 	return useMutation(mutationOptions);
 };
@@ -592,7 +595,7 @@ export const rotateSession = (

 export const getRotateSessionMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof rotateSession>>,
@@ -609,8 +612,8 @@ export const getRotateSessionMutationOptions = <
 	const mutationKey = ['rotateSession'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -630,7 +633,8 @@ export const getRotateSessionMutationOptions = <
 export type RotateSessionMutationResult = NonNullable<
 	Awaited<ReturnType<typeof rotateSession>>
 >;
-export type RotateSessionMutationBody = BodyType<AuthtypesPostableRotateTokenDTO>;
+export type RotateSessionMutationBody =
+	BodyType<AuthtypesPostableRotateTokenDTO>;
 export type RotateSessionMutationError = ErrorType<RenderErrorResponseDTO>;

 /**
@@ -638,7 +642,7 @@ export type RotateSessionMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useRotateSession = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof rotateSession>>,
--- a/frontend/src/api/generated/services/sigNoz.schemas.ts
+++ b/frontend/src/api/generated/services/sigNoz.schemas.ts
@@ -1024,16 +1024,17 @@ export interface CloudintegrationtypesOldAWSCollectionStrategyDTO {
 	s3_buckets?: CloudintegrationtypesOldAWSCollectionStrategyDTOS3Buckets;
 }

-export type CloudintegrationtypesOldAWSLogsStrategyDTOCloudwatchLogsSubscriptionsItem = {
-	/**
-	 * @type string
-	 */
-	filter_pattern?: string;
-	/**
-	 * @type string
-	 */
-	log_group_name_prefix?: string;
-};
+export type CloudintegrationtypesOldAWSLogsStrategyDTOCloudwatchLogsSubscriptionsItem =
+	{
+		/**
+		 * @type string
+		 */
+		filter_pattern?: string;
+		/**
+		 * @type string
+		 */
+		log_group_name_prefix?: string;
+	};

 export interface CloudintegrationtypesOldAWSLogsStrategyDTO {
 	/**
@@ -1045,16 +1046,17 @@ export interface CloudintegrationtypesOldAWSLogsStrategyDTO {
 		| null;
 }

-export type CloudintegrationtypesOldAWSMetricsStrategyDTOCloudwatchMetricStreamFiltersItem = {
-	/**
-	 * @type array
-	 */
-	MetricNames?: string[];
-	/**
-	 * @type string
-	 */
-	Namespace?: string;
-};
+export type CloudintegrationtypesOldAWSMetricsStrategyDTOCloudwatchMetricStreamFiltersItem =
+	{
+		/**
+		 * @type array
+		 */
+		MetricNames?: string[];
+		/**
+		 * @type string
+		 */
+		Namespace?: string;
+	};

 export interface CloudintegrationtypesOldAWSMetricsStrategyDTO {
 	/**
@@ -4774,7 +4776,7 @@ export interface RuletypesPostableRuleDTO {
 	 * @type string
 	 */
 	alert: string;
-	alertType?: RuletypesAlertTypeDTO;
+	alertType: RuletypesAlertTypeDTO;
 	/**
 	 * @type object
 	 */
@@ -4899,7 +4901,7 @@ export interface RuletypesRuleDTO {
 	 * @type string
 	 */
 	alert: string;
-	alertType?: RuletypesAlertTypeDTO;
+	alertType: RuletypesAlertTypeDTO;
 	/**
 	 * @type object
 	 */
@@ -4984,8 +4986,8 @@ export interface RuletypesRuleConditionDTO {
 	 */
 	algorithm?: string;
 	compositeQuery: RuletypesAlertCompositeQueryDTO;
-	matchType: RuletypesMatchTypeDTO;
-	op: RuletypesCompareOperatorDTO;
+	matchType?: RuletypesMatchTypeDTO;
+	op?: RuletypesCompareOperatorDTO;
 	/**
 	 * @type boolean
 	 */
--- a/frontend/src/api/generated/services/users/index.ts
+++ b/frontend/src/api/generated/services/users/index.ts
@@ -4,6 +4,7 @@
 * * regenerate with 'yarn generate:api'
 * SigNoz
 */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,10 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';

-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	CreateInvite201,
 	CreateResetPasswordToken201,
@@ -56,6 +54,9 @@ import type {
 	UpdateUserPathParameters,
 } from '../sigNoz.schemas';

+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
 /**
 * This endpoint returns the reset password token by id
 * @deprecated
@@ -80,7 +81,7 @@ export const getGetResetPasswordTokenDeprecatedQueryKey = ({

 export const getGetResetPasswordTokenDeprecatedQueryOptions = <
 	TData = Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetResetPasswordTokenDeprecatedPathParameters,
 	options?: {
@@ -115,7 +116,8 @@ export const getGetResetPasswordTokenDeprecatedQueryOptions = <
 export type GetResetPasswordTokenDeprecatedQueryResult = NonNullable<
 	Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>
 >;
-export type GetResetPasswordTokenDeprecatedQueryError = ErrorType<RenderErrorResponseDTO>;
+export type GetResetPasswordTokenDeprecatedQueryError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @deprecated
@@ -124,7 +126,7 @@ export type GetResetPasswordTokenDeprecatedQueryError = ErrorType<RenderErrorRes

 export function useGetResetPasswordTokenDeprecated<
 	TData = Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetResetPasswordTokenDeprecatedPathParameters,
 	options?: {
@@ -185,7 +187,7 @@ export const createInvite = (

 export const getCreateInviteMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createInvite>>,
@@ -202,8 +204,8 @@ export const getCreateInviteMutationOptions = <
 	const mutationKey = ['createInvite'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -231,7 +233,7 @@ export type CreateInviteMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useCreateInvite = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createInvite>>,
@@ -268,7 +270,7 @@ export const createBulkInvite = (

 export const getCreateBulkInviteMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createBulkInvite>>,
@@ -285,8 +287,8 @@ export const getCreateBulkInviteMutationOptions = <
 	const mutationKey = ['createBulkInvite'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -306,7 +308,8 @@ export const getCreateBulkInviteMutationOptions = <
 export type CreateBulkInviteMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createBulkInvite>>
 >;
-export type CreateBulkInviteMutationBody = BodyType<TypesPostableBulkInviteRequestDTO>;
+export type CreateBulkInviteMutationBody =
+	BodyType<TypesPostableBulkInviteRequestDTO>;
 export type CreateBulkInviteMutationError = ErrorType<RenderErrorResponseDTO>;

 /**
@@ -314,7 +317,7 @@ export type CreateBulkInviteMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useCreateBulkInvite = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createBulkInvite>>,
@@ -351,7 +354,7 @@ export const resetPassword = (

 export const getResetPasswordMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof resetPassword>>,
@@ -368,8 +371,8 @@ export const getResetPasswordMutationOptions = <
 	const mutationKey = ['resetPassword'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -397,7 +400,7 @@ export type ResetPasswordMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useResetPassword = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof resetPassword>>,
@@ -433,7 +436,7 @@ export const getListUsersDeprecatedQueryKey = () => {

 export const getListUsersDeprecatedQueryOptions = <
 	TData = Awaited<ReturnType<typeof listUsersDeprecated>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof listUsersDeprecated>>,
@@ -467,7 +470,7 @@ export type ListUsersDeprecatedQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useListUsersDeprecated<
 	TData = Awaited<ReturnType<typeof listUsersDeprecated>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof listUsersDeprecated>>,
@@ -514,7 +517,7 @@ export const deleteUser = ({ id }: DeleteUserPathParameters) => {

 export const getDeleteUserMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteUser>>,
@@ -531,8 +534,8 @@ export const getDeleteUserMutationOptions = <
 	const mutationKey = ['deleteUser'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -560,7 +563,7 @@ export type DeleteUserMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useDeleteUser = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteUser>>,
@@ -601,7 +604,7 @@ export const getGetUserDeprecatedQueryKey = ({

 export const getGetUserDeprecatedQueryOptions = <
 	TData = Awaited<ReturnType<typeof getUserDeprecated>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetUserDeprecatedPathParameters,
 	options?: {
@@ -644,7 +647,7 @@ export type GetUserDeprecatedQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useGetUserDeprecated<
 	TData = Awaited<ReturnType<typeof getUserDeprecated>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetUserDeprecatedPathParameters,
 	options?: {
@@ -700,7 +703,7 @@ export const updateUserDeprecated = (

 export const getUpdateUserDeprecatedMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateUserDeprecated>>,
@@ -723,8 +726,8 @@ export const getUpdateUserDeprecatedMutationOptions = <
 	const mutationKey = ['updateUserDeprecated'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -748,14 +751,15 @@ export type UpdateUserDeprecatedMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updateUserDeprecated>>
 >;
 export type UpdateUserDeprecatedMutationBody = BodyType<TypesDeprecatedUserDTO>;
-export type UpdateUserDeprecatedMutationError = ErrorType<RenderErrorResponseDTO>;
+export type UpdateUserDeprecatedMutationError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Update user
 */
 export const useUpdateUserDeprecated = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateUserDeprecated>>,
@@ -797,7 +801,7 @@ export const getGetMyUserDeprecatedQueryKey = () => {

 export const getGetMyUserDeprecatedQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMyUserDeprecated>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof getMyUserDeprecated>>,
@@ -831,7 +835,7 @@ export type GetMyUserDeprecatedQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useGetMyUserDeprecated<
 	TData = Awaited<ReturnType<typeof getMyUserDeprecated>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof getMyUserDeprecated>>,
@@ -884,7 +888,7 @@ export const forgotPassword = (

 export const getForgotPasswordMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof forgotPassword>>,
@@ -901,8 +905,8 @@ export const getForgotPasswordMutationOptions = <
 	const mutationKey = ['forgotPassword'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -922,7 +926,8 @@ export const getForgotPasswordMutationOptions = <
 export type ForgotPasswordMutationResult = NonNullable<
 	Awaited<ReturnType<typeof forgotPassword>>
 >;
-export type ForgotPasswordMutationBody = BodyType<TypesPostableForgotPasswordDTO>;
+export type ForgotPasswordMutationBody =
+	BodyType<TypesPostableForgotPasswordDTO>;
 export type ForgotPasswordMutationError = ErrorType<RenderErrorResponseDTO>;

 /**
@@ -930,7 +935,7 @@ export type ForgotPasswordMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useForgotPassword = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof forgotPassword>>,
@@ -971,7 +976,7 @@ export const getGetUsersByRoleIDQueryKey = ({

 export const getGetUsersByRoleIDQueryOptions = <
 	TData = Awaited<ReturnType<typeof getUsersByRoleID>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetUsersByRoleIDPathParameters,
 	options?: {
@@ -1013,7 +1018,7 @@ export type GetUsersByRoleIDQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useGetUsersByRoleID<
 	TData = Awaited<ReturnType<typeof getUsersByRoleID>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetUsersByRoleIDPathParameters,
 	options?: {
@@ -1069,7 +1074,7 @@ export const getListUsersQueryKey = () => {

 export const getListUsersQueryOptions = <
 	TData = Awaited<ReturnType<typeof listUsers>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<Awaited<ReturnType<typeof listUsers>>, TError, TData>;
 }) => {
@@ -1099,7 +1104,7 @@ export type ListUsersQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useListUsers<
 	TData = Awaited<ReturnType<typeof listUsers>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<Awaited<ReturnType<typeof listUsers>>, TError, TData>;
 }): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
@@ -1150,7 +1155,7 @@ export const getGetUserQueryKey = ({ id }: GetUserPathParameters) => {

 export const getGetUserQueryOptions = <
 	TData = Awaited<ReturnType<typeof getUser>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetUserPathParameters,
 	options?: {
@@ -1186,7 +1191,7 @@ export type GetUserQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useGetUser<
 	TData = Awaited<ReturnType<typeof getUser>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetUserPathParameters,
 	options?: {
@@ -1238,7 +1243,7 @@ export const updateUser = (

 export const getUpdateUserMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateUser>>,
@@ -1261,8 +1266,8 @@ export const getUpdateUserMutationOptions = <
 	const mutationKey = ['updateUser'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -1293,7 +1298,7 @@ export type UpdateUserMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useUpdateUser = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateUser>>,
@@ -1340,7 +1345,7 @@ export const getGetResetPasswordTokenQueryKey = ({

 export const getGetResetPasswordTokenQueryOptions = <
 	TData = Awaited<ReturnType<typeof getResetPasswordToken>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetResetPasswordTokenPathParameters,
 	options?: {
@@ -1383,7 +1388,7 @@ export type GetResetPasswordTokenQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useGetResetPasswordToken<
 	TData = Awaited<ReturnType<typeof getResetPasswordToken>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetResetPasswordTokenPathParameters,
 	options?: {
@@ -1436,7 +1441,7 @@ export const createResetPasswordToken = ({

 export const getCreateResetPasswordTokenMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createResetPasswordToken>>,
@@ -1453,8 +1458,8 @@ export const getCreateResetPasswordTokenMutationOptions = <
 	const mutationKey = ['createResetPasswordToken'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -1475,14 +1480,15 @@ export type CreateResetPasswordTokenMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createResetPasswordToken>>
 >;

-export type CreateResetPasswordTokenMutationError = ErrorType<RenderErrorResponseDTO>;
+export type CreateResetPasswordTokenMutationError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Create or regenerate reset password token for a user
 */
 export const useCreateResetPasswordToken = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createResetPasswordToken>>,
@@ -1523,7 +1529,7 @@ export const getGetRolesByUserIDQueryKey = ({

 export const getGetRolesByUserIDQueryOptions = <
 	TData = Awaited<ReturnType<typeof getRolesByUserID>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRolesByUserIDPathParameters,
 	options?: {
@@ -1565,7 +1571,7 @@ export type GetRolesByUserIDQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useGetRolesByUserID<
 	TData = Awaited<ReturnType<typeof getRolesByUserID>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRolesByUserIDPathParameters,
 	options?: {
@@ -1623,7 +1629,7 @@ export const setRoleByUserID = (

 export const getSetRoleByUserIDMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof setRoleByUserID>>,
@@ -1646,8 +1652,8 @@ export const getSetRoleByUserIDMutationOptions = <
 	const mutationKey = ['setRoleByUserID'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -1678,7 +1684,7 @@ export type SetRoleByUserIDMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useSetRoleByUserID = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof setRoleByUserID>>,
@@ -1718,7 +1724,7 @@ export const removeUserRoleByUserIDAndRoleID = ({

 export const getRemoveUserRoleByUserIDAndRoleIDMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof removeUserRoleByUserIDAndRoleID>>,
@@ -1735,8 +1741,8 @@ export const getRemoveUserRoleByUserIDAndRoleIDMutationOptions = <
 	const mutationKey = ['removeUserRoleByUserIDAndRoleID'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -1757,14 +1763,15 @@ export type RemoveUserRoleByUserIDAndRoleIDMutationResult = NonNullable<
 	Awaited<ReturnType<typeof removeUserRoleByUserIDAndRoleID>>
 >;

-export type RemoveUserRoleByUserIDAndRoleIDMutationError = ErrorType<RenderErrorResponseDTO>;
+export type RemoveUserRoleByUserIDAndRoleIDMutationError =
+	ErrorType<RenderErrorResponseDTO>;

 /**
 * @summary Remove a role from user
 */
 export const useRemoveUserRoleByUserIDAndRoleID = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof removeUserRoleByUserIDAndRoleID>>,
@@ -1778,9 +1785,8 @@ export const useRemoveUserRoleByUserIDAndRoleID = <
 	{ pathParams: RemoveUserRoleByUserIDAndRoleIDPathParameters },
 	TContext
 > => {
-	const mutationOptions = getRemoveUserRoleByUserIDAndRoleIDMutationOptions(
-		options,
-	);
+	const mutationOptions =
+		getRemoveUserRoleByUserIDAndRoleIDMutationOptions(options);

 	return useMutation(mutationOptions);
 };
@@ -1802,7 +1808,7 @@ export const getGetMyUserQueryKey = () => {

 export const getGetMyUserQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMyUser>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<Awaited<ReturnType<typeof getMyUser>>, TError, TData>;
 }) => {
@@ -1832,7 +1838,7 @@ export type GetMyUserQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useGetMyUser<
 	TData = Awaited<ReturnType<typeof getMyUser>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<Awaited<ReturnType<typeof getMyUser>>, TError, TData>;
 }): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
@@ -1879,7 +1885,7 @@ export const updateMyUserV2 = (

 export const getUpdateMyUserV2MutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateMyUserV2>>,
@@ -1896,8 +1902,8 @@ export const getUpdateMyUserV2MutationOptions = <
 	const mutationKey = ['updateMyUserV2'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -1925,7 +1931,7 @@ export type UpdateMyUserV2MutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useUpdateMyUserV2 = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateMyUserV2>>,
@@ -1960,7 +1966,7 @@ export const updateMyPassword = (

 export const getUpdateMyPasswordMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateMyPassword>>,
@@ -1977,8 +1983,8 @@ export const getUpdateMyPasswordMutationOptions = <
 	const mutationKey = ['updateMyPassword'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -1998,7 +2004,8 @@ export const getUpdateMyPasswordMutationOptions = <
 export type UpdateMyPasswordMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updateMyPassword>>
 >;
-export type UpdateMyPasswordMutationBody = BodyType<TypesChangePasswordRequestDTO>;
+export type UpdateMyPasswordMutationBody =
+	BodyType<TypesChangePasswordRequestDTO>;
 export type UpdateMyPasswordMutationError = ErrorType<RenderErrorResponseDTO>;

 /**
@@ -2006,7 +2013,7 @@ export type UpdateMyPasswordMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const useUpdateMyPassword = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateMyPassword>>,
--- a/frontend/src/api/generated/services/zeus/index.ts
+++ b/frontend/src/api/generated/services/zeus/index.ts
@@ -4,6 +4,7 @@
 * * regenerate with 'yarn generate:api'
 * SigNoz
 */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,10 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';

-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	GetHosts200,
 	RenderErrorResponseDTO,
@@ -26,6 +24,9 @@ import type {
 	ZeustypesPostableProfileDTO,
 } from '../sigNoz.schemas';

+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
 /**
 * This endpoint gets the host info from zeus.
 * @summary Get host info from Zeus.
@@ -44,7 +45,7 @@ export const getGetHostsQueryKey = () => {

 export const getGetHostsQueryOptions = <
 	TData = Awaited<ReturnType<typeof getHosts>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<Awaited<ReturnType<typeof getHosts>>, TError, TData>;
 }) => {
@@ -74,7 +75,7 @@ export type GetHostsQueryError = ErrorType<RenderErrorResponseDTO>;

 export function useGetHosts<
 	TData = Awaited<ReturnType<typeof getHosts>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<Awaited<ReturnType<typeof getHosts>>, TError, TData>;
 }): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
@@ -121,7 +122,7 @@ export const putHost = (

 export const getPutHostMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof putHost>>,
@@ -138,8 +139,8 @@ export const getPutHostMutationOptions = <
 	const mutationKey = ['putHost'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -167,7 +168,7 @@ export type PutHostMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const usePutHost = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof putHost>>,
@@ -202,7 +203,7 @@ export const putProfile = (

 export const getPutProfileMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof putProfile>>,
@@ -219,8 +220,8 @@ export const getPutProfileMutationOptions = <
 	const mutationKey = ['putProfile'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -248,7 +249,7 @@ export type PutProfileMutationError = ErrorType<RenderErrorResponseDTO>;
 */
 export const usePutProfile = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof putProfile>>,
--- a/frontend/src/api/thirdPartyApis/listOverview.ts
+++ b/frontend/src/api/thirdPartyApis/listOverview.ts
@@ -6,15 +6,20 @@ import { PayloadProps, Props } from 'types/api/thirdPartyApis/listOverview';

 const listOverview = async (
 	props: Props,
+	signal?: AbortSignal,
 ): Promise<SuccessResponseV2<PayloadProps>> => {
 	const { start, end, show_ip: showIp, filter } = props;
 	try {
-		const response = await axios.post(`/third-party-apis/overview/list`, {
-			start,
-			end,
-			show_ip: showIp,
-			filter,
-		});
+		const response = await axios.post(
+			`/third-party-apis/overview/list`,
+			{
+				start,
+				end,
+				show_ip: showIp,
+				filter,
+			},
+			{ signal },
+		);

 		return {
 			httpStatusCode: response.status,
--- a/frontend/src/components/MarkdownRenderer/CodeCopyBtn/CodeCopyBtn.tsx
+++ b/frontend/src/components/MarkdownRenderer/CodeCopyBtn/CodeCopyBtn.tsx
@@ -17,7 +17,7 @@ function CodeCopyBtn({
 		let copiedText = '';
 		if (children && Array.isArray(children)) {
 			setIsSnippetCopied(true);
-			// eslint-disable-next-line no-restricted-properties
+			// oxlint-disable-next-line signoz/no-navigator-clipboard
 			navigator.clipboard.writeText(children[0].props.children[0]).finally(() => {
 				copiedText = (children[0].props.children[0] as string).slice(0, 200); // slicing is done due to the limitation in accepted char length in attributes
 				setTimeout(() => {
--- a/frontend/src/components/NewSelect/CustomMultiSelect.tsx
+++ b/frontend/src/components/NewSelect/CustomMultiSelect.tsx
@@ -401,7 +401,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({

 		const textToCopy = selectedTexts.join(', ');

-		// eslint-disable-next-line no-restricted-properties
+		// oxlint-disable-next-line signoz/no-navigator-clipboard
 		navigator.clipboard.writeText(textToCopy).catch(console.error);
 	}, [selectedChips, selectedValues]);

--- a/frontend/src/components/QueryCancelledPlaceholder/QueryCancelledPlaceholder.module.scss
+++ b/frontend/src/components/QueryCancelledPlaceholder/QueryCancelledPlaceholder.module.scss
@@ -0,0 +1,26 @@
+.placeholder {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+	min-height: 240px;
+	width: 100%;
+	padding: 24px;
+	gap: 12px;
+}
+
+.emoji {
+	width: 48px;
+	height: 48px;
+}
+
+.text {
+	text-align: center;
+	font-size: 14px;
+	color: var(--muted-foreground);
+}
+
+.subText {
+	color: var(--foreground);
+}
--- a/frontend/src/components/QueryCancelledPlaceholder/QueryCancelledPlaceholder.tsx
+++ b/frontend/src/components/QueryCancelledPlaceholder/QueryCancelledPlaceholder.tsx
@@ -0,0 +1,31 @@
+import { Typography } from 'antd';
+import eyesEmojiUrl from 'assets/Images/eyesEmoji.svg';
+
+import styles from './QueryCancelledPlaceholder.module.scss';
+
+interface QueryCancelledPlaceholderProps {
+	subText?: string;
+}
+
+function QueryCancelledPlaceholder({
+	subText,
+}: QueryCancelledPlaceholderProps): JSX.Element {
+	return (
+		<div className={styles.placeholder}>
+			<img className={styles.emoji} src={eyesEmojiUrl} alt="eyes emoji" />
+			<Typography className={styles.text}>
+				Query cancelled.
+				<span className={styles.subText}>
+					{' '}
+					{subText || 'Click "Run Query" to load data.'}
+				</span>
+			</Typography>
+		</div>
+	);
+}
+
+QueryCancelledPlaceholder.defaultProps = {
+	subText: undefined,
+};
+
+export default QueryCancelledPlaceholder;
--- a/frontend/src/components/QueryCancelledPlaceholder/index.ts
+++ b/frontend/src/components/QueryCancelledPlaceholder/index.ts
@@ -0,0 +1 @@
+export { default } from './QueryCancelledPlaceholder';
--- a/frontend/src/constants/reactQuery.ts
+++ b/frontend/src/constants/reactQuery.ts
@@ -0,0 +1,8 @@
+/**
+ * Maximum number of retries for a failed react-query request before giving up.
+ * Used as the upper bound in the default `retry` predicate:
+ *   `return failureCount < MAX_QUERY_RETRIES;`
+ *
+ * This retries up to 3 times (4 attempts total including the initial request).
+ */
+export const MAX_QUERY_RETRIES = 3;
--- a/frontend/src/constants/reactQueryKeys.ts
+++ b/frontend/src/constants/reactQueryKeys.ts
@@ -25,7 +25,8 @@ export const REACT_QUERY_KEY = {
 	ALERT_RULE_TIMELINE_GRAPH: 'ALERT_RULE_TIMELINE_GRAPH',
 	GET_CONSUMER_LAG_DETAILS: 'GET_CONSUMER_LAG_DETAILS',
 	TOGGLE_ALERT_STATE: 'TOGGLE_ALERT_STATE',
-	GET_ALL_ALLERTS: 'GET_ALL_ALLERTS',
+	GET_ALL_ALERTS: 'GET_ALL_ALERTS',
+	ALERT_RULES_CHART_PREVIEW: 'ALERT_RULES_CHART_PREVIEW',
 	REMOVE_ALERT_RULE: 'REMOVE_ALERT_RULE',
 	DUPLICATE_ALERT_RULE: 'DUPLICATE_ALERT_RULE',
 	GET_HOST_LIST: 'GET_HOST_LIST',
--- a/frontend/src/container/AllError/index.tsx
+++ b/frontend/src/container/AllError/index.tsx
@@ -21,6 +21,7 @@ import { FilterConfirmProps } from 'antd/lib/table/interface';
 import logEvent from 'api/common/logEvent';
 import getAll from 'api/errors/getAll';
 import getErrorCounts from 'api/errors/getErrorCounts';
+import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import { ResizeTable } from 'components/ResizeTable';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import ROUTES from 'constants/routes';
@@ -36,6 +37,7 @@ import useUrlQuery from 'hooks/useUrlQuery';
 import createQueryParams from 'lib/createQueryParams';
 import history from 'lib/history';
 import { isUndefined } from 'lodash-es';
+import { useAllErrorsQueryState } from 'pages/AllErrors/QueryStateContext';
 import { useTimezone } from 'providers/Timezone';
 import { AppState } from 'store/reducers';
 import { ErrorResponse, SuccessResponse } from 'types/api';
@@ -121,7 +123,13 @@ function AllErrors(): JSX.Element {
 	const { queries } = useResourceAttribute();
 	const compositeData = useGetCompositeQueryParam();

-	const [{ isLoading, data }, errorCountResponse] = useQueries([
+	const setIsFetching = useAllErrorsQueryState((s) => s.setIsFetching);
+	const isCancelled = useAllErrorsQueryState((s) => s.isCancelled);
+
+	const [
+		{ isLoading, isFetching: isErrorsFetching, data },
+		errorCountResponse,
+	] = useQueries([
 		{
 			queryKey: ['getAllErrors', updatedPath, maxTime, minTime, compositeData],
 			queryFn: (): Promise<SuccessResponse<PayloadProps> | ErrorResponse> =>
@@ -162,6 +170,12 @@ function AllErrors(): JSX.Element {
 			enabled: !loading,
 		},
 	]);
+
+	const isFetching = isErrorsFetching || errorCountResponse.isFetching;
+	useEffect(() => {
+		setIsFetching(isFetching);
+	}, [isFetching, setIsFetching]);
+
 	const { notifications } = useNotifications();

 	useEffect(() => {
@@ -473,6 +487,12 @@ function AllErrors(): JSX.Element {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [errorCountResponse.data?.payload]);

+	if (isCancelled && !data?.payload?.length) {
+		return (
+			<QueryCancelledPlaceholder subText='Click "Run Query" to load exceptions.' />
+		);
+	}
+
 	return (
 		<ResizeTable
 			columns={columns}
--- a/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainList.tsx
+++ b/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainList.tsx
@@ -1,12 +1,16 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useQueryClient } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { LoadingOutlined } from '@ant-design/icons';
 import { Spin, Table } from 'antd';
 import logEvent from 'api/common/logEvent';
+import emptyStateUrl from 'assets/Icons/emptyState.svg';
 import cx from 'classnames';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
+import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import { initialQueriesMap } from 'constants/queryBuilder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import Toolbar from 'container/Toolbar/Toolbar';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
@@ -23,8 +27,6 @@ import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import DOCLINKS from 'utils/docLinks';

-import emptyStateUrl from '@/assets/Icons/emptyState.svg';
-
 import { ApiMonitoringHardcodedAttributeKeys } from '../../constants';
 import { DEFAULT_PARAMS, useApiMonitoringParams } from '../../queryParams';
 import { columnsConfig, formatDataForTable } from '../../utils';
@@ -40,6 +42,7 @@ function DomainList(): JSX.Element {
 		(state) => state.globalTime,
 	);

+	const queryClient = useQueryClient();
 	const { currentQuery, handleRunQuery } = useQueryBuilder();
 	const query = useMemo(() => currentQuery?.builder?.queryData[0] || null, [
 		currentQuery,
@@ -53,6 +56,19 @@ function DomainList(): JSX.Element {

 	const compositeData = useGetCompositeQueryParam();

+	const [isCancelled, setIsCancelled] = useState(false);
+
+	const handleCancelQuery = useCallback(() => {
+		queryClient.cancelQueries([REACT_QUERY_KEY.GET_DOMAINS_LIST]);
+		setIsCancelled(true);
+	}, [queryClient]);
+
+	const handleStageAndRunQuery = useCallback(() => {
+		setIsCancelled(false);
+		queryClient.invalidateQueries([REACT_QUERY_KEY.GET_DOMAINS_LIST]);
+		handleRunQuery();
+	}, [queryClient, handleRunQuery]);
+
 	const { data, isLoading, isFetching } = useListOverview({
 		start: minTime,
 		end: maxTime,
@@ -105,6 +121,13 @@ function DomainList(): JSX.Element {
 		[data],
 	);

+	// Auto-reset cancelled state when a new fetch starts
+	useEffect(() => {
+		if (isFetching) {
+			setIsCancelled(false);
+		}
+	}, [isFetching]);
+
 	// Open drawer if selectedDomain is set in URL
 	useEffect(() => {
 		if (selectedDomain && formattedDataForTable?.length > 0) {
@@ -119,7 +142,13 @@ function DomainList(): JSX.Element {
 		<section className={cx('api-module-right-section')}>
 			<Toolbar
 				showAutoRefresh={false}
-				rightActions={<RightToolbarActions onStageRunQuery={handleRunQuery} />}
+				rightActions={
+					<RightToolbarActions
+						onStageRunQuery={handleStageAndRunQuery}
+						isLoadingQueries={isFetching}
+						handleCancelQuery={handleCancelQuery}
+					/>
+				}
 			/>
 			<div className={cx('api-monitoring-list-header')}>
 				<QuerySearch
@@ -130,38 +159,44 @@ function DomainList(): JSX.Element {
 					hardcodedAttributeKeys={ApiMonitoringHardcodedAttributeKeys}
 				/>
 			</div>
-			{!isFetching && !isLoading && formattedDataForTable.length === 0 && (
-				<div className="no-filtered-domains-message-container">
-					<div className="no-filtered-domains-message-content">
-						<img
-							src={emptyStateUrl}
-							alt="thinking-emoji"
-							className="empty-state-svg"
-						/>
+			{isCancelled && formattedDataForTable.length === 0 && (
+				<QueryCancelledPlaceholder subText='Click "Run Query" to load API monitoring data.' />
+			)}
+			{!isCancelled &&
+				!isFetching &&
+				!isLoading &&
+				formattedDataForTable.length === 0 && (
+					<div className="no-filtered-domains-message-container">
+						<div className="no-filtered-domains-message-content">
+							<img
+								src={emptyStateUrl}
+								alt="thinking-emoji"
+								className="empty-state-svg"
+							/>

-						<div className="no-filtered-domains-message">
-							<div className="no-domain-title">
-								No External API calls detected with applied filters.
+							<div className="no-filtered-domains-message">
+								<div className="no-domain-title">
+									No External API calls detected with applied filters.
+								</div>
+								<div className="no-domain-subtitle">
+									Ensure all HTTP client spans are being sent with kind as{' '}
+									<span className="attribute">Client</span> and url set in{' '}
+									<span className="attribute">url.full</span> or{' '}
+									<span className="attribute">http.url</span> attribute.
+								</div>
+								<a
+									href={DOCLINKS.EXTERNAL_API_MONITORING}
+									target="_blank"
+									rel="noreferrer"
+									className="external-api-doc-link"
+								>
+									Learn how External API monitoring works in SigNoz{' '}
+									<MoveUpRight size={14} />
+								</a>
 							</div>
-							<div className="no-domain-subtitle">
-								Ensure all HTTP client spans are being sent with kind as{' '}
-								<span className="attribute">Client</span> and url set in{' '}
-								<span className="attribute">url.full</span> or{' '}
-								<span className="attribute">http.url</span> attribute.
-							</div>
-							<a
-								href={DOCLINKS.EXTERNAL_API_MONITORING}
-								target="_blank"
-								rel="noreferrer"
-								className="external-api-doc-link"
-							>
-								Learn how External API monitoring works in SigNoz{' '}
-								<MoveUpRight size={14} />
-							</a>
 						</div>
 					</div>
-				</div>
-			)}
+				)}
 			{(isFetching || isLoading || formattedDataForTable.length > 0) && (
 				<Table
 					className="api-monitoring-domain-list-table"
--- a/frontend/src/container/CreateAlertV2/QuerySection/ChartPreview/ChartPreview.tsx
+++ b/frontend/src/container/CreateAlertV2/QuerySection/ChartPreview/ChartPreview.tsx
@@ -18,9 +18,16 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 export interface ChartPreviewProps {
 	alertDef: AlertDef;
 	source?: YAxisSource;
+	isCancelled?: boolean;
+	onFetchingStateChange?: (isFetching: boolean) => void;
 }

-function ChartPreview({ alertDef, source }: ChartPreviewProps): JSX.Element {
+function ChartPreview({
+	alertDef,
+	source,
+	isCancelled = false,
+	onFetchingStateChange,
+}: ChartPreviewProps): JSX.Element {
 	const { currentQuery, panelType, stagedQuery } = useQueryBuilder();
 	const {
 		alertType,
@@ -88,6 +95,8 @@ function ChartPreview({ alertDef, source }: ChartPreviewProps): JSX.Element {
 			graphType={panelType || PANEL_TYPES.TIME_SERIES}
 			setQueryStatus={setQueryStatus}
 			additionalThresholds={thresholdState.thresholds}
+			isCancelled={isCancelled}
+			onFetchingStateChange={onFetchingStateChange}
 		/>
 	);

@@ -102,6 +111,8 @@ function ChartPreview({ alertDef, source }: ChartPreviewProps): JSX.Element {
 			graphType={panelType || PANEL_TYPES.TIME_SERIES}
 			setQueryStatus={setQueryStatus}
 			additionalThresholds={thresholdState.thresholds}
+			isCancelled={isCancelled}
+			onFetchingStateChange={onFetchingStateChange}
 		/>
 	);

--- a/frontend/src/container/CreateAlertV2/QuerySection/QuerySection.tsx
+++ b/frontend/src/container/CreateAlertV2/QuerySection/QuerySection.tsx
@@ -1,9 +1,11 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useQueryClient } from 'react-query';
 import { Button } from 'antd';
 import classNames from 'classnames';
 import { YAxisSource } from 'components/YAxisUnitSelector/types';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import QuerySectionComponent from 'container/FormAlertRules/QuerySection';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { getMetricNameFromQueryData } from 'hooks/useGetYAxisUnit';
@@ -62,7 +64,24 @@ function QuerySection(): JSX.Element {
 		return currentQueryKey !== stagedQueryKey;
 	}, [currentQuery, alertType, thresholdState, stagedQuery]);

+	const queryClient = useQueryClient();
+	const [isLoadingQueries, setIsLoadingQueries] = useState(false);
+	const [isCancelled, setIsCancelled] = useState(false);
+
+	useEffect(() => {
+		if (isLoadingQueries) {
+			setIsCancelled(false);
+		}
+	}, [isLoadingQueries]);
+
+	const handleCancelQuery = useCallback(() => {
+		queryClient.cancelQueries([REACT_QUERY_KEY.ALERT_RULES_CHART_PREVIEW]);
+		setIsCancelled(true);
+	}, [queryClient]);
+
 	const runQueryHandler = useCallback(() => {
+		setIsCancelled(false);
+		queryClient.invalidateQueries([REACT_QUERY_KEY.ALERT_RULES_CHART_PREVIEW]);
 		// Reset the source param when the query is changed
 		// Then manually run the query
 		if (source === YAxisSource.DASHBOARDS && didQueryChange) {
@@ -76,6 +95,7 @@ function QuerySection(): JSX.Element {
 		currentQuery,
 		didQueryChange,
 		handleRunQuery,
+		queryClient,
 		redirectWithQueryBuilderData,
 		source,
 	]);
@@ -106,7 +126,12 @@ function QuerySection(): JSX.Element {
 	return (
 		<div className="query-section">
 			<Stepper stepNumber={1} label="Define the query" />
-			<ChartPreview alertDef={alertDef} source={source} />
+			<ChartPreview
+				alertDef={alertDef}
+				source={source}
+				isCancelled={isCancelled}
+				onFetchingStateChange={setIsLoadingQueries}
+			/>
 			<div className="query-section-tabs">
 				<div className="query-section-query-actions">
 					{tabs.map((tab) => (
@@ -130,6 +155,8 @@ function QuerySection(): JSX.Element {
 				setQueryCategory={onQueryCategoryChange}
 				alertType={alertType}
 				runQuery={runQueryHandler}
+				isLoadingQueries={isLoadingQueries}
+				handleCancelQuery={handleCancelQuery}
 				alertDef={alertDef}
 				panelType={PANEL_TYPES.TIME_SERIES}
 				key={currentQuery.queryType}
--- a/frontend/src/container/DashboardContainer/visualization/charts/BarChart/BarChart.tsx
+++ b/frontend/src/container/DashboardContainer/visualization/charts/BarChart/BarChart.tsx
@@ -37,6 +37,7 @@ export default function BarChart(props: BarChartProps): JSX.Element {
 				yAxisUnit: rest.yAxisUnit,
 				decimalPrecision: rest.decimalPrecision,
 				isStackedBarChart: isStackedBarChart,
+				canPinTooltip: rest.canPinTooltip,
 			};
 			return <BarChartTooltip {...tooltipProps} />;
 		},
@@ -46,6 +47,7 @@ export default function BarChart(props: BarChartProps): JSX.Element {
 			rest.yAxisUnit,
 			rest.decimalPrecision,
 			isStackedBarChart,
+			rest.canPinTooltip,
 		],
 	);

--- a/frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper.tsx
+++ b/frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper.tsx
@@ -25,6 +25,8 @@ export default function ChartWrapper({
 	showTooltip = true,
 	showLegend = true,
 	canPinTooltip = false,
+	pinKey,
+	onClick,
 	syncMode,
 	syncKey,
 	onDestroy = noop,
@@ -101,6 +103,8 @@ export default function ChartWrapper({
 							<TooltipPlugin
 								config={config}
 								canPinTooltip={canPinTooltip}
+								pinKey={pinKey}
+								onClick={onClick}
 								syncMode={syncMode}
 								maxWidth={Math.max(
 									TOOLTIP_MIN_WIDTH,
--- a/frontend/src/container/DashboardContainer/visualization/charts/Histogram/Histogram.tsx
+++ b/frontend/src/container/DashboardContainer/visualization/charts/Histogram/Histogram.tsx
@@ -26,10 +26,11 @@ export default function Histogram(props: HistogramChartProps): JSX.Element {
 				...props,
 				yAxisUnit: rest.yAxisUnit,
 				decimalPrecision: rest.decimalPrecision,
+				canPinTooltip: rest.canPinTooltip,
 			};
 			return <HistogramTooltip {...tooltipProps} />;
 		},
-		[customTooltip, rest.yAxisUnit, rest.decimalPrecision],
+		[customTooltip, rest.yAxisUnit, rest.decimalPrecision, rest.canPinTooltip],
 	);

 	return (
--- a/frontend/src/container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries.tsx
+++ b/frontend/src/container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries.tsx
@@ -21,10 +21,17 @@ export default function TimeSeries(props: TimeSeriesChartProps): JSX.Element {
 				timezone: rest.timezone,
 				yAxisUnit: rest.yAxisUnit,
 				decimalPrecision: rest.decimalPrecision,
+				canPinTooltip: rest.canPinTooltip,
 			};
 			return <TimeSeriesTooltip {...tooltipProps} />;
 		},
-		[customTooltip, rest.timezone, rest.yAxisUnit, rest.decimalPrecision],
+		[
+			customTooltip,
+			rest.timezone,
+			rest.yAxisUnit,
+			rest.decimalPrecision,
+			rest.canPinTooltip,
+		],
 	);

 	return (
--- a/frontend/src/container/DashboardContainer/visualization/charts/types.ts
+++ b/frontend/src/container/DashboardContainer/visualization/charts/types.ts
@@ -13,6 +13,12 @@ interface BaseChartProps {
 	showTooltip?: boolean;
 	showLegend?: boolean;
 	canPinTooltip?: boolean;
+	/** Key that pins the tooltip while hovering. Defaults to DEFAULT_PIN_TOOLTIP_KEY ('l'). */
+	pinKey?: string;
+	/** Called when the user clicks the uPlot overlay. Receives resolved click data. */
+	onClick?: (clickData: TooltipClickData) => void;
+	yAxisUnit?: string;
+	decimalPrecision?: PrecisionOption;
 	pinnedTooltipElement?: (clickData: TooltipClickData) => React.ReactNode;
 	customTooltip?: (props: TooltipRenderArgs) => React.ReactNode;
 	'data-testid'?: string;
--- a/frontend/src/container/DashboardContainer/visualization/panels/BarPanel/BarPanel.tsx
+++ b/frontend/src/container/DashboardContainer/visualization/panels/BarPanel/BarPanel.tsx
@@ -121,6 +121,7 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 					legendConfig={{
 						position: widget?.legendPosition ?? LegendPosition.BOTTOM,
 					}}
+					canPinTooltip
 					plotRef={onPlotRef}
 					onDestroy={onPlotDestroy}
 					data={chartData as uPlot.AlignedData}
--- a/frontend/src/container/DashboardContainer/visualization/panels/HistogramPanel/HistogramPanel.tsx
+++ b/frontend/src/container/DashboardContainer/visualization/panels/HistogramPanel/HistogramPanel.tsx
@@ -89,6 +89,7 @@ function HistogramPanel(props: PanelWrapperProps): JSX.Element {
 					onDestroy={(): void => {
 						uPlotRef.current = null;
 					}}
+					canPinTooltip
 					yAxisUnit={widget.yAxisUnit}
 					decimalPrecision={widget.decimalPrecision}
 					isQueriesMerged={widget.mergeAllActiveQueries}
--- a/frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/TimeSeriesPanel.tsx
+++ b/frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/TimeSeriesPanel.tsx
@@ -112,6 +112,7 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 					legendConfig={{
 						position: widget?.legendPosition ?? LegendPosition.BOTTOM,
 					}}
+					canPinTooltip
 					timezone={timezone}
 					yAxisUnit={widget.yAxisUnit}
 					decimalPrecision={widget.decimalPrecision}
--- a/frontend/src/container/FormAlertRules/ChartPreview/index.tsx
+++ b/frontend/src/container/FormAlertRules/ChartPreview/index.tsx
@@ -4,12 +4,14 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
+import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import Spinner from 'components/Spinner';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { FeatureKeys } from 'constants/features';
 import { QueryParams } from 'constants/query';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import AnomalyAlertEvaluationView from 'container/AnomalyAlertEvaluationView';
 import { INITIAL_CRITICAL_THRESHOLD } from 'container/CreateAlertV2/context/constants';
 import { Threshold } from 'container/CreateAlertV2/context/types';
@@ -69,6 +71,8 @@ export interface ChartPreviewProps {
 	setQueryStatus?: (status: string) => void;
 	showSideLegend?: boolean;
 	additionalThresholds?: Threshold[];
+	isCancelled?: boolean;
+	onFetchingStateChange?: (isFetching: boolean) => void;
 }

 // eslint-disable-next-line sonarjs/cognitive-complexity
@@ -86,6 +90,8 @@ function ChartPreview({
 	setQueryStatus,
 	showSideLegend = false,
 	additionalThresholds,
+	isCancelled = false,
+	onFetchingStateChange,
 }: ChartPreviewProps): JSX.Element | null {
 	const { t } = useTranslation('alerts');
 	const dispatch = useDispatch();
@@ -185,7 +191,7 @@ function ChartPreview({
 		ENTITY_VERSION_V5,
 		{
 			queryKey: [
-				'chartPreview',
+				REACT_QUERY_KEY.ALERT_RULES_CHART_PREVIEW,
 				userQueryKey || JSON.stringify(query),
 				selectedInterval,
 				minTime,
@@ -193,9 +199,14 @@ function ChartPreview({
 				alertDef?.ruleType,
 			],
 			enabled: canQuery,
+			keepPreviousData: true,
 		},
 	);

+	useEffect(() => {
+		onFetchingStateChange?.(queryResponse.isFetching);
+	}, [queryResponse.isFetching, onFetchingStateChange]);
+
 	const graphRef = useRef<HTMLDivElement>(null);

 	useEffect((): void => {
@@ -334,11 +345,16 @@ function ChartPreview({

 	const chartData = getUPlotChartData(queryResponse?.data?.payload);

+	const hasResultData = !!queryResponse?.data?.payload?.data?.result?.length;
+
 	const isAnomalyDetectionAlert =
 		alertDef?.ruleType === AlertDetectionTypes.ANOMALY_DETECTION_ALERT;

 	const chartDataAvailable =
-		chartData && !queryResponse.isError && !queryResponse.isLoading;
+		chartData &&
+		hasResultData &&
+		!queryResponse.isLoading &&
+		(!queryResponse.isError || isCancelled);

 	const isAnomalyDetectionEnabled =
 		featureFlags?.find((flag) => flag.name === FeatureKeys.ANOMALY_DETECTION)
@@ -359,10 +375,14 @@ function ChartPreview({
 					{queryResponse.isLoading && (
 						<Spinner size="large" tip="Loading..." height="100%" />
 					)}
-					{(queryResponse?.isError || queryResponse?.error) && (
+					{(queryResponse?.isError || queryResponse?.error) && !isCancelled && (
 						<ErrorInPlace error={queryResponse.error as APIError} />
 					)}

+					{isCancelled && !queryResponse.isLoading && !hasResultData && (
+						<QueryCancelledPlaceholder subText='Click "Run Query" to load the chart preview.' />
+					)}
+
 					{chartDataAvailable && !isAnomalyDetectionAlert && (
 						<GridPanelSwitch
 							options={options}
@@ -403,6 +423,8 @@ ChartPreview.defaultProps = {
 	setQueryStatus: (): void => {},
 	showSideLegend: false,
 	additionalThresholds: undefined,
+	isCancelled: false,
+	onFetchingStateChange: undefined,
 };

 export default ChartPreview;
--- a/frontend/src/container/FormAlertRules/QuerySection.tsx
+++ b/frontend/src/container/FormAlertRules/QuerySection.tsx
@@ -24,15 +24,24 @@ import { FormContainer, StepHeading } from './styles';

 import './QuerySection.styles.scss';

+const ANOMALY_QUERY_SUPPORT_CLICKHOUSE_ISSUE =
+	'https://github.com/SigNoz/signoz/issues/11034';
+
+const ANOMALY_QUERY_SUPPORT_PROMQL_ISSUE =
+	'https://github.com/SigNoz/signoz/issues/11036';
+
 function QuerySection({
 	queryCategory,
 	setQueryCategory,
 	alertType,
 	runQuery,
+	isLoadingQueries,
+	handleCancelQuery,
 	alertDef,
 	panelType,
 	ruleId,
 	hideTitle,
+	isAnomalyDetection,
 }: QuerySectionProps): JSX.Element {
 	// init namespace for translations
 	const { t } = useTranslation('alerts');
@@ -74,6 +83,21 @@ function QuerySection({
 		/>
 	);

+	const anomalyDisabledTooltip = (url: string): JSX.Element => (
+		<span>
+			Coming soon for anomaly detection.{' '}
+			<Typography.Link
+				href={url}
+				target="_blank"
+				rel="noopener noreferrer"
+				style={{ color: 'inherit', textDecoration: 'underline' }}
+			>
+				Leave a thumbs-up
+			</Typography.Link>{' '}
+			to help us prioritize!
+		</span>
+	);
+
 	const tabs = [
 		{
 			label: (
@@ -88,17 +112,31 @@ function QuerySection({
 		},
 		{
 			label: (
-				<Tooltip title="ClickHouse">
-					<Button className="nav-btns">
+				<Tooltip
+					title={
+						isAnomalyDetection
+							? anomalyDisabledTooltip(ANOMALY_QUERY_SUPPORT_CLICKHOUSE_ISSUE)
+							: 'ClickHouse'
+					}
+				>
+					<Button className="nav-btns" disabled={isAnomalyDetection}>
 						<Terminal size={14} />
 						<Typography.Text>ClickHouse Query</Typography.Text>
 					</Button>
 				</Tooltip>
 			),
 			key: EQueryType.CLICKHOUSE,
+			disabled: isAnomalyDetection,
 		},
 	];

+	useEffect(() => {
+		if (isAnomalyDetection && queryCategory !== EQueryType.QUERY_BUILDER) {
+			setQueryCategory(EQueryType.QUERY_BUILDER);
+			setCurrentTab(EQueryType.QUERY_BUILDER);
+		}
+	}, [isAnomalyDetection, queryCategory, setQueryCategory]);
+
 	const items = useMemo(
 		() => [
 			{
@@ -114,19 +152,32 @@ function QuerySection({
 			},
 			{
 				label: (
-					<Tooltip title="ClickHouse">
-						<Button className="nav-btns">
+					<Tooltip
+						title={
+							isAnomalyDetection
+								? anomalyDisabledTooltip(ANOMALY_QUERY_SUPPORT_CLICKHOUSE_ISSUE)
+								: 'ClickHouse'
+						}
+					>
+						<Button className="nav-btns" disabled={isAnomalyDetection}>
 							<Terminal size={14} />
 							<Typography.Text>ClickHouse Query</Typography.Text>
 						</Button>
 					</Tooltip>
 				),
 				key: EQueryType.CLICKHOUSE,
+				disabled: isAnomalyDetection,
 			},
 			{
 				label: (
-					<Tooltip title="PromQL">
-						<Button className="nav-btns">
+					<Tooltip
+						title={
+							isAnomalyDetection
+								? anomalyDisabledTooltip(ANOMALY_QUERY_SUPPORT_PROMQL_ISSUE)
+								: 'PromQL'
+						}
+					>
+						<Button className="nav-btns" disabled={isAnomalyDetection}>
 							<PromQLIcon
 								fillColor={isDarkMode ? Color.BG_VANILLA_200 : Color.BG_INK_300}
 							/>
@@ -135,9 +186,10 @@ function QuerySection({
 					</Tooltip>
 				),
 				key: EQueryType.PROM,
+				disabled: isAnomalyDetection,
 			},
 		],
-		[isDarkMode],
+		[isDarkMode, isAnomalyDetection, anomalyDisabledTooltip],
 	);

 	const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();
@@ -176,6 +228,8 @@ function QuerySection({
 												queryType: queryCategory,
 											});
 										}}
+										handleCancelQuery={handleCancelQuery}
+										isLoadingQueries={isLoadingQueries}
 									/>
 								</span>
 							}
@@ -195,7 +249,11 @@ function QuerySection({
 							onChange={handleQueryCategoryChange}
 							tabBarExtraContent={
 								<span style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
-									<RunQueryBtn onStageRunQuery={runQuery} />
+									<RunQueryBtn
+										onStageRunQuery={runQuery}
+										handleCancelQuery={handleCancelQuery}
+										isLoadingQueries={isLoadingQueries}
+									/>
 								</span>
 							}
 							items={items}
@@ -205,16 +263,16 @@ function QuerySection({
 		}
 	};
 	const renderQuerySection = (c: EQueryType): JSX.Element | null => {
-		switch (c) {
-			case EQueryType.PROM:
-				return renderPromqlUI();
-			case EQueryType.CLICKHOUSE:
-				return renderChQueryUI();
-			case EQueryType.QUERY_BUILDER:
-				return renderMetricUI();
-			default:
-				return null;
+		if (c === EQueryType.PROM && !isAnomalyDetection) {
+			return renderPromqlUI();
 		}
+		if (c === EQueryType.CLICKHOUSE && !isAnomalyDetection) {
+			return renderChQueryUI();
+		}
+		if (c === EQueryType.QUERY_BUILDER) {
+			return renderMetricUI();
+		}
+		return null;
 	};

 	const step2Label = alertDef.alertType === 'METRIC_BASED_ALERT' ? '2' : '1';
@@ -237,14 +295,18 @@ interface QuerySectionProps {
 	setQueryCategory: (n: EQueryType) => void;
 	alertType: AlertTypes;
 	runQuery: VoidFunction;
+	isLoadingQueries: boolean;
+	handleCancelQuery: () => void;
 	alertDef: AlertDef;
 	panelType: PANEL_TYPES;
 	ruleId: string;
 	hideTitle?: boolean;
+	isAnomalyDetection?: boolean;
 }

 QuerySection.defaultProps = {
 	hideTitle: false,
+	isAnomalyDetection: false,
 };

 export default QuerySection;
--- a/frontend/src/container/FormAlertRules/index.tsx
+++ b/frontend/src/container/FormAlertRules/index.tsx
@@ -136,6 +136,19 @@ function FormAlertRules({

 	// use query client
 	const ruleCache = useQueryClient();
+	const [isChartQueryCancelled, setIsChartQueryCancelled] = useState(false);
+	const [isLoadingAlertQuery, setIsLoadingAlertQuery] = useState(false);
+
+	useEffect(() => {
+		if (isLoadingAlertQuery) {
+			setIsChartQueryCancelled(false);
+		}
+	}, [isLoadingAlertQuery]);
+
+	const handleCancelAlertQuery = useCallback(() => {
+		ruleCache.cancelQueries(REACT_QUERY_KEY.ALERT_RULES_CHART_PREVIEW);
+		setIsChartQueryCancelled(true);
+	}, [ruleCache]);

 	const isNewRule = !ruleId || isEmpty(ruleId);

@@ -702,6 +715,8 @@ function FormAlertRules({
 			yAxisUnit={yAxisUnit || ''}
 			graphType={panelType || PANEL_TYPES.TIME_SERIES}
 			setQueryStatus={setQueryStatus}
+			isCancelled={isChartQueryCancelled}
+			onFetchingStateChange={setIsLoadingAlertQuery}
 		/>
 	);

@@ -720,6 +735,8 @@ function FormAlertRules({
 			yAxisUnit={yAxisUnit || ''}
 			graphType={panelType || PANEL_TYPES.TIME_SERIES}
 			setQueryStatus={setQueryStatus}
+			isCancelled={isChartQueryCancelled}
+			onFetchingStateChange={setIsLoadingAlertQuery}
 		/>
 	);

@@ -902,11 +919,22 @@ function FormAlertRules({
 							queryCategory={currentQuery.queryType}
 							setQueryCategory={onQueryCategoryChange}
 							alertType={alertType || AlertTypes.METRICS_BASED_ALERT}
-							runQuery={(): void => handleRunQuery()}
+							runQuery={(): void => {
+								setIsChartQueryCancelled(false);
+								ruleCache.invalidateQueries([
+									REACT_QUERY_KEY.ALERT_RULES_CHART_PREVIEW,
+								]);
+								handleRunQuery();
+							}}
+							isLoadingQueries={isLoadingAlertQuery}
+							handleCancelQuery={handleCancelAlertQuery}
 							alertDef={alertDef}
 							panelType={panelType || PANEL_TYPES.TIME_SERIES}
 							key={currentQuery.queryType}
 							ruleId={ruleId}
+							isAnomalyDetection={
+								alertDef.ruleType === AlertDetectionTypes.ANOMALY_DETECTION_ALERT
+							}
 						/>

 						<RuleOptions
--- a/frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx
+++ b/frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx
@@ -6,6 +6,7 @@ import React, {
 	useRef,
 	useState,
 } from 'react';
+import { useQueryClient } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux'; // old code, TODO: fix this correctly
 import {
@@ -18,6 +19,7 @@ import cx from 'classnames';
 import { ToggleGraphProps } from 'components/Graph/types';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
+import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import Spinner from 'components/Spinner';
 import TimePreference from 'components/TimePreferenceDropDown';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
@@ -86,6 +88,7 @@ function FullView({

 	const fullViewRef = useRef<HTMLDivElement>(null);
 	const { handleRunQuery } = useQueryBuilder();
+	const queryClient = useQueryClient();

 	useEffect(() => {
 		setCurrentGraphRef(fullViewRef);
@@ -203,8 +206,8 @@ function FullView({
 		});
 	}, [selectedPanelType]);

-	const response = useGetQueryRange(requestData, ENTITY_VERSION_V5, {
-		queryKey: [
+	const queryRangeKey = useMemo(
+		() => [
 			widget?.query,
 			selectedPanelType,
 			requestData,
@@ -212,10 +215,28 @@ function FullView({
 			minTime,
 			maxTime,
 		],
+		[widget?.query, selectedPanelType, requestData, version, minTime, maxTime],
+	);
+
+	const response = useGetQueryRange(requestData, ENTITY_VERSION_V5, {
+		queryKey: queryRangeKey,
 		enabled: !isDependedDataLoaded,
 		keepPreviousData: true,
 	});

+	const [isCancelled, setIsCancelled] = useState(false);
+
+	useEffect(() => {
+		if (response.isFetching) {
+			setIsCancelled(false);
+		}
+	}, [response.isFetching]);
+
+	const handleCancelQuery = useCallback(() => {
+		queryClient.cancelQueries(queryRangeKey);
+		setIsCancelled(true);
+	}, [queryClient, queryRangeKey]);
+
 	const onDragSelect = useCallback((start: number, end: number): void => {
 		const startTimestamp = Math.trunc(start);
 		const endTimestamp = Math.trunc(end);
@@ -354,6 +375,8 @@ function FullView({
 									onStageRunQuery={(): void => {
 										handleRunQuery();
 									}}
+									isLoadingQueries={response.isFetching}
+									handleCancelQuery={handleCancelQuery}
 								/>
 							</>
 						)}
@@ -386,23 +409,27 @@ function FullView({
 									}}
 								/>
 							)}
-							<PanelWrapper
-								panelMode={PanelMode.STANDALONE_VIEW}
-								queryResponse={response}
-								widget={widget}
-								setRequestData={setRequestData}
-								isFullViewMode
-								onToggleModelHandler={onToggleModelHandler}
-								setGraphVisibility={setGraphsVisibilityStates}
-								graphVisibility={graphsVisibilityStates}
-								onDragSelect={customOnDragSelect ?? onDragSelect}
-								tableProcessedDataRef={tableProcessedDataRef}
-								searchTerm={searchTerm}
-								onClickHandler={onClickHandler}
-								enableDrillDown={enableDrillDown}
-								selectedGraph={selectedPanelType}
-								onColumnWidthsChange={onColumnWidthsChange}
-							/>
+							{isCancelled ? (
+								<QueryCancelledPlaceholder subText='Click "Run Query" to reload the widget.' />
+							) : (
+								<PanelWrapper
+									panelMode={PanelMode.STANDALONE_VIEW}
+									queryResponse={response}
+									widget={widget}
+									setRequestData={setRequestData}
+									isFullViewMode
+									onToggleModelHandler={onToggleModelHandler}
+									setGraphVisibility={setGraphsVisibilityStates}
+									graphVisibility={graphsVisibilityStates}
+									onDragSelect={customOnDragSelect ?? onDragSelect}
+									tableProcessedDataRef={tableProcessedDataRef}
+									searchTerm={searchTerm}
+									onClickHandler={onClickHandler}
+									enableDrillDown={enableDrillDown}
+									selectedGraph={selectedPanelType}
+									onColumnWidthsChange={onColumnWidthsChange}
+								/>
+							)}
 						</GraphContainer>
 					</div>
 				</>
--- a/frontend/src/container/InfraMonitoringK8s/Base/tests/K8sBaseList.test.tsx
+++ b/frontend/src/container/InfraMonitoringK8s/Base/tests/K8sBaseList.test.tsx
@@ -103,8 +103,8 @@ function renderComponent<T>({

 describe('K8sBaseList', () => {
 	describe('with items in the list', () => {
-		const itemId = Math.random().toString(36).substring(7);
-		const itemId2 = Math.random().toString(36).substring(7);
+		const itemId = Math.random().toString(36).slice(7);
+		const itemId2 = Math.random().toString(36).slice(7);
 		const onUrlUpdateMock = jest.fn<void, [UrlUpdateEvent]>();
 		const fetchListDataMock = jest.fn<
 			ReturnType<K8sBaseListProps<{ id: string; title: string }>['fetchListData']>,
@@ -163,10 +163,10 @@ describe('K8sBaseList', () => {

 		it('should render all the items in the list', async () => {
 			await waitFor(async () => {
-				expect(await screen.findByText(`PodId:${itemId}`)).toBeInTheDocument();
-				expect(await screen.findByText(`PodTitle:${itemId}`)).toBeInTheDocument();
-				expect(await screen.findByText(`PodId:${itemId2}`)).toBeInTheDocument();
-				expect(await screen.findByText(`PodTitle:${itemId2}`)).toBeInTheDocument();
+				await expect(screen.findByText(`PodId:${itemId}`)).resolves.toBeInTheDocument();
+				await expect(screen.findByText(`PodTitle:${itemId}`)).resolves.toBeInTheDocument();
+				await expect(screen.findByText(`PodId:${itemId2}`)).resolves.toBeInTheDocument();
+				await expect(screen.findByText(`PodTitle:${itemId2}`)).resolves.toBeInTheDocument();
 			});
 		});

@@ -178,7 +178,7 @@ describe('K8sBaseList', () => {
 			const [filters] = fetchListDataMock.mock.calls[0];
 			expect(filters.limit).toBe(10);
 			expect(filters.offset).toBe(0);
-			expect(filters.filters).toEqual({ items: [], op: 'AND' });
+			expect(filters.filters).toStrictEqual({ items: [], op: 'AND' });
 			expect(filters.groupBy).toBeUndefined();
 			expect(filters.orderBy).toBeUndefined();
 		});
@@ -358,8 +358,8 @@ describe('K8sBaseList', () => {
 			});

 			const [filters] = fetchListDataMock.mock.calls[0];
-			expect(filters.orderBy).toEqual({ columnName: 'cpu', order: 'desc' });
-			expect(filters.groupBy).toEqual(groupByValue);
+			expect(filters.orderBy).toStrictEqual({ columnName: 'cpu', order: 'desc' });
+			expect(filters.groupBy).toStrictEqual(groupByValue);
 			expect(filters.offset).toBe(20); // (3 - 1) * 10 = 20
 			expect(filters.limit).toBe(10);
 		});
@@ -1302,7 +1302,7 @@ describe('K8sBaseList', () => {

 			// Try to remove the Id column (canBeHidden=false)
 			act(() => {
-				// eslint-disable-next-line no-restricted-syntax
+				// oxlint-disable-next-line signoz/no-zustand-getstate-in-hooks
 				useInfraMonitoringTableColumnsStore
 					.getState()
 					.removeColumn(InfraMonitoringEntity.PODS, 'id');
--- a/frontend/src/container/LogsSearchFilter/SearchFields/utils.ts
+++ b/frontend/src/container/LogsSearchFilter/SearchFields/utils.ts
@@ -53,9 +53,9 @@ export const queryKOVPair = (): QueryFields[] => [
 ];

 export const initQueryKOVPair = (
-	name?: string = null,
-	op?: string = null,
-	value?: string | string[] = null,
+	name: string = null,
+	op: string = null,
+	value: string | string[] = null,
 ): QueryFields[] => [
 	{
 		type: QueryTypes.QUERY_KEY,
@@ -72,7 +72,7 @@ export const initQueryKOVPair = (
 ];

 export const prepareConditionOperator = (
-	op?: string = ConditionalOperators.AND,
+	op: string = ConditionalOperators.AND,
 ): QueryFields => {
 	return {
 		type: QueryTypes.CONDITIONAL_OPERATOR,
@@ -83,7 +83,7 @@ export const prepareConditionOperator = (
 export const createParsedQueryStructure = (
 	parsedQuery = [],
 ): QueryFields[][] => {
-	if (!parsedQuery.length) {
+	if (parsedQuery.length === 0) {
 		return parsedQuery;
 	}

@@ -98,7 +98,7 @@ export const createParsedQueryStructure = (
 			cond = null;
 			qCtr = -1;
 		}
-		const stagingArr = structuredArray[structuredArray.length - 1];
+		const stagingArr = structuredArray.at(-1);
 		const prevQuery =
 			Array.isArray(stagingArr) && qCtr >= 0 ? stagingArr[qCtr] : null;

@@ -129,8 +129,8 @@ export const hashCode = (s: string): string => {
 		return '0';
 	}
 	return `${Math.abs(
-		s.split('').reduce((a, b) => {
-			a = (a << 5) - a + b.charCodeAt(0);
+		[...s].reduce((a, b) => {
+			a = (a << 5) - a + b.codePointAt(0);
 			return a & a;
 		}, 0),
 	)}`;
--- a/frontend/src/container/MeterExplorer/Explorer/Explorer.tsx
+++ b/frontend/src/container/MeterExplorer/Explorer/Explorer.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useQueryClient } from 'react-query';
 import * as Sentry from '@sentry/react';
 import { Button, Tooltip } from 'antd';
 import logEvent from 'api/common/logEvent';
@@ -7,6 +8,7 @@ import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import { initialQueryMeterWithType, PANEL_TYPES } from 'constants/queryBuilder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
@@ -37,6 +39,20 @@ function Explorer(): JSX.Element {
 		currentQuery,
 	} = useQueryBuilder();
 	const { safeNavigate } = useSafeNavigate();
+	const queryClient = useQueryClient();
+	const [isLoadingQueries, setIsLoadingQueries] = useState(false);
+	const [isCancelled, setIsCancelled] = useState(false);
+
+	useEffect(() => {
+		if (isLoadingQueries) {
+			setIsCancelled(false);
+		}
+	}, [isLoadingQueries]);
+
+	const handleCancelQuery = useCallback(() => {
+		queryClient.cancelQueries([REACT_QUERY_KEY.GET_QUERY_RANGE]);
+		setIsCancelled(true);
+	}, [queryClient]);

 	const [showQuickFilters, setShowQuickFilters] = useState(true);

@@ -155,7 +171,11 @@ function Explorer(): JSX.Element {

 							<div className="explore-header-right-actions">
 								<DateTimeSelector showAutoRefresh />
-								<RightToolbarActions onStageRunQuery={(): void => handleRunQuery()} />
+								<RightToolbarActions
+									onStageRunQuery={(): void => handleRunQuery()}
+									isLoadingQueries={isLoadingQueries}
+									handleCancelQuery={handleCancelQuery}
+								/>
 							</div>
 						</div>
 						<QueryBuilderV2
@@ -171,7 +191,10 @@ function Explorer(): JSX.Element {
 						/>

 						<div className="explore-content">
-							<TimeSeries />
+							<TimeSeries
+								onFetchingStateChange={setIsLoadingQueries}
+								isCancelled={isCancelled}
+							/>
 						</div>
 					</div>
 					<ExplorerOptionWrapper
--- a/frontend/src/container/MeterExplorer/Explorer/QuerySection.tsx
+++ b/frontend/src/container/MeterExplorer/Explorer/QuerySection.tsx
@@ -1,43 +0,0 @@
-import { Button } from 'antd';
-import logEvent from 'api/common/logEvent';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { QueryBuilder } from 'container/QueryBuilder';
-import { ButtonWrapper } from 'container/TracesExplorer/QuerySection/styles';
-import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { MeterExplorerEventKeys, MeterExplorerEvents } from '../events';
-
-function QuerySection(): JSX.Element {
-	const { handleRunQuery } = useQueryBuilder();
-
-	const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.TIME_SERIES);
-
-	return (
-		<div className="query-section">
-			<QueryBuilder
-				panelType={panelTypes}
-				config={{ initialDataSource: DataSource.METRICS, queryVariant: 'static' }}
-				version="v4"
-				actions={
-					<ButtonWrapper>
-						<Button
-							onClick={(): void => {
-								handleRunQuery();
-								logEvent(MeterExplorerEvents.QueryBuilderQueryChanged, {
-									[MeterExplorerEventKeys.Tab]: 'explorer',
-								});
-							}}
-							type="primary"
-						>
-							Run Query
-						</Button>
-					</ButtonWrapper>
-				}
-			/>
-		</div>
-	);
-}
-
-export default QuerySection;
--- a/frontend/src/container/MeterExplorer/Explorer/TimeSeries.tsx
+++ b/frontend/src/container/MeterExplorer/Explorer/TimeSeries.tsx
@@ -1,10 +1,12 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useQueries } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { isAxiosError } from 'axios';
+import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { initialQueryMeterWithType, PANEL_TYPES } from 'constants/queryBuilder';
+import { MAX_QUERY_RETRIES } from 'constants/reactQuery';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import EmptyMetricsSearch from 'container/MetricsExplorer/Explorer/EmptyMetricsSearch';
 import { BuilderUnitsFilter } from 'container/QueryBuilder/filters/BuilderUnitsFilter';
@@ -21,7 +23,15 @@ import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';

-function TimeSeries(): JSX.Element {
+interface TimeSeriesProps {
+	onFetchingStateChange?: (isFetching: boolean) => void;
+	isCancelled?: boolean;
+}
+
+function TimeSeries({
+	onFetchingStateChange,
+	isCancelled = false,
+}: TimeSeriesProps): JSX.Element {
 	const { stagedQuery, currentQuery } = useQueryBuilder();
 	const { yAxisUnit, onUnitChange } = useUrlYAxisUnit('');

@@ -67,7 +77,11 @@ function TimeSeries(): JSX.Element {
 				minTime,
 				index,
 			],
-			queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
+			queryFn: ({
+				signal,
+			}: {
+				signal?: AbortSignal;
+			}): Promise<SuccessResponse<MetricRangePayloadProps>> =>
 				GetMetricQueryRange(
 					{
 						query: payload,
@@ -79,9 +93,15 @@ function TimeSeries(): JSX.Element {
 						},
 					},
 					ENTITY_VERSION_V5,
+					undefined,
+					signal,
 				),
 			enabled: !!payload,
-			retry: (failureCount: number, error: Error): boolean => {
+			retry: (failureCount: number, error: unknown): boolean => {
+				if (isAxiosError(error) && error.code === 'ERR_CANCELED') {
+					return false;
+				}
+
 				let status: number | undefined;

 				if (error instanceof APIError) {
@@ -94,7 +114,7 @@ function TimeSeries(): JSX.Element {
 					return false;
 				}

-				return failureCount < 3;
+				return failureCount < MAX_QUERY_RETRIES;
 			},
 			onError: (error: APIError): void => {
 				showErrorModal(error);
@@ -102,6 +122,11 @@ function TimeSeries(): JSX.Element {
 		})),
 	);

+	const isFetching = queries.some((q) => q.isFetching);
+	useEffect(() => {
+		onFetchingStateChange?.(isFetching);
+	}, [isFetching, onFetchingStateChange]);
+
 	const data = useMemo(() => queries.map(({ data }) => data) ?? [], [queries]);

 	const responseData = useMemo(
@@ -122,7 +147,11 @@ function TimeSeries(): JSX.Element {
 			<BuilderUnitsFilter onChange={onUnitChange} yAxisUnit={yAxisUnit} />
 			<div className="time-series-container">
 				{!hasMetricSelected && <EmptyMetricsSearch />}
-				{hasMetricSelected &&
+				{isCancelled && hasMetricSelected && (
+					<QueryCancelledPlaceholder subText='Click "Run Query" to load metrics.' />
+				)}
+				{!isCancelled &&
+					hasMetricSelected &&
 					responseData.map((datapoint, index) => (
 						<div
 							className="time-series-view-panel"
--- a/frontend/src/container/MetricsExplorer/Explorer/Explorer.tsx
+++ b/frontend/src/container/MetricsExplorer/Explorer/Explorer.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useQueryClient } from 'react-query';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
 import { Switch, Tooltip } from 'antd';
@@ -6,6 +7,7 @@ import logEvent from 'api/common/logEvent';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
@@ -54,6 +56,21 @@ function Explorer(): JSX.Element {
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
 	const [isMetricDetailsOpen, setIsMetricDetailsOpen] = useState(false);

+	const queryClient = useQueryClient();
+	const [isLoadingQueries, setIsLoadingQueries] = useState(false);
+	const [isCancelled, setIsCancelled] = useState(false);
+
+	useEffect(() => {
+		if (isLoadingQueries) {
+			setIsCancelled(false);
+		}
+	}, [isLoadingQueries]);
+
+	const handleCancelQuery = useCallback(() => {
+		queryClient.cancelQueries([REACT_QUERY_KEY.GET_QUERY_RANGE]);
+		setIsCancelled(true);
+	}, [queryClient]);
+
 	const metricNames = useMemo(() => {
 		const currentMetricNames: string[] = [];
 		stagedQuery?.builder.queryData.forEach((query) => {
@@ -307,7 +324,11 @@ function Explorer(): JSX.Element {
 					<div className="explore-header-right-actions">
 						{!isEmpty(warning) && <WarningPopover warningData={warning} />}
 						<DateTimeSelector showAutoRefresh />
-						<RightToolbarActions onStageRunQuery={(): void => handleRunQuery()} />
+						<RightToolbarActions
+							onStageRunQuery={(): void => handleRunQuery()}
+							isLoadingQueries={isLoadingQueries}
+							handleCancelQuery={handleCancelQuery}
+						/>
 					</div>
 				</div>
 				<QueryBuilderV2
@@ -319,6 +340,7 @@ function Explorer(): JSX.Element {
 				/>
 				<div className="explore-content">
 					<TimeSeries
+						onFetchingStateChange={setIsLoadingQueries}
 						showOneChartPerQuery={showOneChartPerQuery}
 						setWarning={setWarning}
 						areAllMetricUnitsSame={areAllMetricUnitsSame}
@@ -331,6 +353,7 @@ function Explorer(): JSX.Element {
 						yAxisUnit={yAxisUnit}
 						setYAxisUnit={setYAxisUnit}
 						showYAxisUnitSelector={showYAxisUnitSelector}
+						isCancelled={isCancelled}
 					/>
 				</div>
 			</div>
--- a/frontend/src/container/MetricsExplorer/Explorer/QuerySection.tsx
+++ b/frontend/src/container/MetricsExplorer/Explorer/QuerySection.tsx
@@ -1,7 +1,10 @@
-import { Button } from 'antd';
+import { useCallback } from 'react';
+import { useIsFetching, useQueryClient } from 'react-query';
 import logEvent from 'api/common/logEvent';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { QueryBuilder } from 'container/QueryBuilder';
+import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
 import { ButtonWrapper } from 'container/TracesExplorer/QuerySection/styles';
 import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -11,9 +14,16 @@ import { MetricsExplorerEventKeys, MetricsExplorerEvents } from '../events';

 function QuerySection(): JSX.Element {
 	const { handleRunQuery } = useQueryBuilder();
+	const queryClient = useQueryClient();

 	const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.TIME_SERIES);

+	const isLoadingQueries = useIsFetching([REACT_QUERY_KEY.GET_QUERY_RANGE]) > 0;
+
+	const handleCancelQuery = useCallback(() => {
+		queryClient.cancelQueries([REACT_QUERY_KEY.GET_QUERY_RANGE]);
+	}, [queryClient]);
+
 	return (
 		<div className="query-section">
 			<QueryBuilder
@@ -22,17 +32,16 @@ function QuerySection(): JSX.Element {
 				version="v4"
 				actions={
 					<ButtonWrapper>
-						<Button
-							onClick={(): void => {
+						<RunQueryBtn
+							onStageRunQuery={(): void => {
 								handleRunQuery();
 								logEvent(MetricsExplorerEvents.QueryBuilderQueryChanged, {
 									[MetricsExplorerEventKeys.Tab]: 'explorer',
 								});
 							}}
-							type="primary"
-						>
-							Run Query
-						</Button>
+							isLoadingQueries={isLoadingQueries}
+							handleCancelQuery={handleCancelQuery}
+						/>
 					</ButtonWrapper>
 				}
 			/>
--- a/frontend/src/container/MetricsExplorer/Explorer/TimeSeries.tsx
+++ b/frontend/src/container/MetricsExplorer/Explorer/TimeSeries.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useQueries, useQueryClient } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
@@ -11,10 +11,12 @@ import {
 } from 'api/generated/services/metrics';
 import { isAxiosError } from 'axios';
 import classNames from 'classnames';
+import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import YAxisUnitSelector from 'components/YAxisUnitSelector';
 import { YAxisSource } from 'components/YAxisUnitSelector/types';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { MAX_QUERY_RETRIES } from 'constants/reactQuery';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
 import { convertDataValueToMs } from 'container/TimeSeriesView/utils';
@@ -36,6 +38,7 @@ import {
 } from './utils';

 function TimeSeries({
+	onFetchingStateChange,
 	showOneChartPerQuery,
 	setWarning,
 	isMetricUnitsLoading,
@@ -46,6 +49,7 @@ function TimeSeries({
 	setYAxisUnit,
 	showYAxisUnitSelector,
 	metrics,
+	isCancelled = false,
 }: TimeSeriesProps): JSX.Element {
 	const { stagedQuery, currentQuery } = useQueryBuilder();

@@ -98,7 +102,11 @@ function TimeSeries({
 				minTime,
 				index,
 			],
-			queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
+			queryFn: ({
+				signal,
+			}: {
+				signal?: AbortSignal;
+			}): Promise<SuccessResponse<MetricRangePayloadProps>> =>
 				GetMetricQueryRange(
 					{
 						query: payload,
@@ -111,9 +119,15 @@ function TimeSeries({
 					},
 					// ENTITY_VERSION_V4,
 					ENTITY_VERSION_V5,
+					undefined,
+					signal,
 				),
 			enabled: !!payload,
-			retry: (failureCount: number, error: Error): boolean => {
+			retry: (failureCount: number, error: unknown): boolean => {
+				if (isAxiosError(error) && error.code === 'ERR_CANCELED') {
+					return false;
+				}
+
 				let status: number | undefined;

 				if (error instanceof APIError) {
@@ -126,11 +140,16 @@ function TimeSeries({
 					return false;
 				}

-				return failureCount < 3;
+				return failureCount < MAX_QUERY_RETRIES;
 			},
 		})),
 	);

+	const isFetching = queries.some((q) => q.isFetching);
+	useEffect(() => {
+		onFetchingStateChange?.(isFetching);
+	}, [isFetching, onFetchingStateChange]);
+
 	const data = useMemo(() => queries.map(({ data }) => data) ?? [], [queries]);

 	const responseData = useMemo(
@@ -231,7 +250,11 @@ function TimeSeries({
 				})}
 			>
 				{metricNames.length === 0 && <EmptyMetricsSearch />}
-				{metricNames.length > 0 &&
+				{isCancelled && metricNames.length > 0 && (
+					<QueryCancelledPlaceholder subText='Click "Run Query" to load metrics.' />
+				)}
+				{!isCancelled &&
+					metricNames.length > 0 &&
 					responseData.map((datapoint, index) => {
 						const isQueryDataItem = index < metricNames.length;
 						const metricName = isQueryDataItem ? metricNames[index] : undefined;
--- a/frontend/src/container/MetricsExplorer/Explorer/types.ts
+++ b/frontend/src/container/MetricsExplorer/Explorer/types.ts
@@ -3,6 +3,7 @@ import { MetricsexplorertypesMetricMetadataDTO } from 'api/generated/services/si
 import { Warning } from 'types/api';

 export interface TimeSeriesProps {
+	onFetchingStateChange?: (isFetching: boolean) => void;
 	showOneChartPerQuery: boolean;
 	setWarning: Dispatch<SetStateAction<Warning | undefined>>;
 	areAllMetricUnitsSame: boolean;
@@ -15,4 +16,5 @@ export interface TimeSeriesProps {
 	yAxisUnit: string | undefined;
 	setYAxisUnit: (unit: string) => void;
 	showYAxisUnitSelector: boolean;
+	isCancelled?: boolean;
 }
--- a/frontend/src/container/MetricsExplorer/Inspect/Inspect.styles.scss
+++ b/frontend/src/container/MetricsExplorer/Inspect/Inspect.styles.scss
@@ -4,9 +4,25 @@

 	.inspect-metrics-fallback {
 		display: flex;
-		align-items: center;
-		justify-content: center;
+		flex-direction: column;
+		gap: 32px;
 		height: 100%;
+
+		.inspect-metrics-fallback-header-placeholder {
+			// Reserve the same vertical space the GraphView header occupies
+			// (antd middle button height) so swapping chart ↔ fallback causes
+			// no layout shift.
+			height: 32px;
+			flex-shrink: 0;
+		}
+
+		.inspect-metrics-fallback-body {
+			flex: 1;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			min-height: 520px;
+		}
 	}

 	.inspect-metrics-title {
--- a/frontend/src/container/MetricsExplorer/Inspect/Inspect.tsx
+++ b/frontend/src/container/MetricsExplorer/Inspect/Inspect.tsx
@@ -1,9 +1,12 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useQueryClient } from 'react-query';
 import * as Sentry from '@sentry/react';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Drawer, Empty, Skeleton, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { useGetMetricMetadata } from 'api/generated/services/metrics';
+import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -109,6 +112,28 @@ function Inspect({
 		reset,
 	} = useInspectMetrics(appliedMetricName);

+	const [isCancelled, setIsCancelled] = useState(false);
+
+	// Auto-reset isCancelled only on the rising edge of a new fetch
+	// (transition from not-loading → loading). Watching `isLoading` directly
+	// races with the cancel flow — when the user cancels mid-fetch, loading
+	// is still true in the render right after setIsCancelled(true), which
+	// would immediately reset it.
+	const wasLoadingRef = useRef(false);
+	useEffect(() => {
+		const nowLoading = isInspectMetricsLoading || isInspectMetricsRefetching;
+		if (!wasLoadingRef.current && nowLoading) {
+			setIsCancelled(false);
+		}
+		wasLoadingRef.current = nowLoading;
+	}, [isInspectMetricsLoading, isInspectMetricsRefetching]);
+
+	const queryClient = useQueryClient();
+	const handleCancelInspectQuery = useCallback(() => {
+		queryClient.cancelQueries(REACT_QUERY_KEY.GET_INSPECT_METRICS_DETAILS);
+		setIsCancelled(true);
+	}, [queryClient]);
+
 	const handleDispatchMetricInspectionOptions = useCallback(
 		(action: MetricInspectionAction): void => {
 			dispatchMetricInspectionOptions(action);
@@ -167,96 +192,66 @@ function Inspect({
 		setExpandedViewOptions(null);
 	}, [inspectionStep]);

-	const content = useMemo(() => {
-		if (isInspectMetricsLoading && !isInspectMetricsRefetching) {
-			return (
-				<div
-					data-testid="inspect-metrics-loading"
-					className="inspect-metrics-fallback"
-				>
-					<Skeleton active />
-				</div>
+	const chartArea = useMemo(() => {
+		const renderFallback = (testId: string, body: JSX.Element): JSX.Element => (
+			<div data-testid={testId} className="inspect-metrics-fallback">
+				<div className="inspect-metrics-fallback-header-placeholder" />
+				<div className="inspect-metrics-fallback-body">{body}</div>
+			</div>
+		);
+
+		// Cancelled state takes precedence over any react-query state — ensures
+		// the placeholder shows immediately on cancel, regardless of whether
+		// isLoading/isRefetching has settled yet.
+		if (isCancelled) {
+			return renderFallback(
+				'inspect-metrics-cancelled',
+				<QueryCancelledPlaceholder subText='Click "Run Query" to see inspect results.' />,
 			);
 		}

-		if (isInspectMetricsError) {
-			const errorMessage = 'Error loading inspect metrics.';
+		if (isInspectMetricsLoading && !isInspectMetricsRefetching) {
+			return renderFallback('inspect-metrics-loading', <Skeleton active />);
+		}

-			return (
-				<div
-					data-testid="inspect-metrics-error"
-					className="inspect-metrics-fallback"
-				>
-					<Empty description={errorMessage} />
-				</div>
+		if (isInspectMetricsError) {
+			return renderFallback(
+				'inspect-metrics-error',
+				<Empty description="Error loading inspect metrics." />,
 			);
 		}

 		if (!inspectMetricsTimeSeries.length) {
-			return (
-				<div
-					data-testid="inspect-metrics-empty"
-					className="inspect-metrics-fallback"
-				>
-					<Empty description="No time series found for this metric to inspect." />
-				</div>
+			return renderFallback(
+				'inspect-metrics-empty',
+				<Empty description="No time series found for this metric to inspect." />,
 			);
 		}

 		return (
-			<div className="inspect-metrics-content">
-				<div className="inspect-metrics-content-first-col">
-					<GraphView
-						inspectMetricsTimeSeries={aggregatedTimeSeries}
-						formattedInspectMetricsTimeSeries={formattedInspectMetricsTimeSeries}
-						resetInspection={resetInspection}
-						metricName={appliedMetricName}
-						metricUnit={selectedMetricUnit}
-						metricType={selectedMetricType}
-						spaceAggregationSeriesMap={spaceAggregationSeriesMap}
-						inspectionStep={inspectionStep}
-						setPopoverOptions={setPopoverOptions}
-						setShowExpandedView={setShowExpandedView}
-						showExpandedView={showExpandedView}
-						setExpandedViewOptions={setExpandedViewOptions}
-						popoverOptions={popoverOptions}
-						metricInspectionAppliedOptions={metricInspectionOptions.appliedOptions}
-						isInspectMetricsRefetching={isInspectMetricsRefetching}
-					/>
-					<QueryBuilder
-						currentMetricName={currentMetricName}
-						setCurrentMetricName={setCurrentMetricName}
-						setAppliedMetricName={setAppliedMetricName}
-						spaceAggregationLabels={spaceAggregationLabels}
-						currentMetricInspectionOptions={metricInspectionOptions.currentOptions}
-						dispatchMetricInspectionOptions={handleDispatchMetricInspectionOptions}
-						inspectionStep={inspectionStep}
-						inspectMetricsTimeSeries={inspectMetricsTimeSeries}
-						currentQuery={currentQueryData}
-						setCurrentQuery={setCurrentQueryData}
-					/>
-				</div>
-				<div className="inspect-metrics-content-second-col">
-					<Stepper
-						inspectionStep={inspectionStep}
-						resetInspection={resetInspection}
-					/>
-					{showExpandedView && (
-						<ExpandedView
-							options={expandedViewOptions}
-							spaceAggregationSeriesMap={spaceAggregationSeriesMap}
-							step={inspectionStep}
-							metricInspectionAppliedOptions={metricInspectionOptions.appliedOptions}
-							timeAggregatedSeriesMap={timeAggregatedSeriesMap}
-						/>
-					)}
-				</div>
-			</div>
+			<GraphView
+				inspectMetricsTimeSeries={aggregatedTimeSeries}
+				formattedInspectMetricsTimeSeries={formattedInspectMetricsTimeSeries}
+				resetInspection={resetInspection}
+				metricName={appliedMetricName}
+				metricUnit={selectedMetricUnit}
+				metricType={selectedMetricType}
+				spaceAggregationSeriesMap={spaceAggregationSeriesMap}
+				inspectionStep={inspectionStep}
+				setPopoverOptions={setPopoverOptions}
+				setShowExpandedView={setShowExpandedView}
+				showExpandedView={showExpandedView}
+				setExpandedViewOptions={setExpandedViewOptions}
+				popoverOptions={popoverOptions}
+				metricInspectionAppliedOptions={metricInspectionOptions.appliedOptions}
+				isInspectMetricsRefetching={isInspectMetricsRefetching}
+			/>
 		);
 	}, [
 		isInspectMetricsLoading,
 		isInspectMetricsRefetching,
 		isInspectMetricsError,
+		isCancelled,
 		inspectMetricsTimeSeries,
 		aggregatedTimeSeries,
 		formattedInspectMetricsTimeSeries,
@@ -312,7 +307,46 @@ function Inspect({
 				className="inspect-metrics-modal"
 				destroyOnClose
 			>
-				{content}
+				<div className="inspect-metrics-content">
+					<div className="inspect-metrics-content-first-col">
+						{chartArea}
+						<QueryBuilder
+							currentMetricName={currentMetricName}
+							setCurrentMetricName={setCurrentMetricName}
+							setAppliedMetricName={setAppliedMetricName}
+							spaceAggregationLabels={spaceAggregationLabels}
+							currentMetricInspectionOptions={metricInspectionOptions.currentOptions}
+							dispatchMetricInspectionOptions={handleDispatchMetricInspectionOptions}
+							inspectionStep={inspectionStep}
+							inspectMetricsTimeSeries={inspectMetricsTimeSeries}
+							currentQuery={currentQueryData}
+							setCurrentQuery={setCurrentQueryData}
+							isLoadingQueries={isInspectMetricsLoading || isInspectMetricsRefetching}
+							handleCancelQuery={handleCancelInspectQuery}
+							onRunQuery={(): void => {
+								setIsCancelled(false);
+								queryClient.invalidateQueries([
+									REACT_QUERY_KEY.GET_INSPECT_METRICS_DETAILS,
+								]);
+							}}
+						/>
+					</div>
+					<div className="inspect-metrics-content-second-col">
+						<Stepper
+							inspectionStep={inspectionStep}
+							resetInspection={resetInspection}
+						/>
+						{showExpandedView && (
+							<ExpandedView
+								options={expandedViewOptions}
+								spaceAggregationSeriesMap={spaceAggregationSeriesMap}
+								step={inspectionStep}
+								metricInspectionAppliedOptions={metricInspectionOptions.appliedOptions}
+								timeAggregatedSeriesMap={timeAggregatedSeriesMap}
+							/>
+						)}
+					</div>
+				</div>
 			</Drawer>
 		</Sentry.ErrorBoundary>
 	);
--- a/frontend/src/container/MetricsExplorer/Inspect/QueryBuilder.tsx
+++ b/frontend/src/container/MetricsExplorer/Inspect/QueryBuilder.tsx
@@ -20,13 +20,22 @@ function QueryBuilder({
 	inspectMetricsTimeSeries,
 	currentQuery,
 	setCurrentQuery,
+	isLoadingQueries,
+	handleCancelQuery,
+	onRunQuery,
 }: QueryBuilderProps): JSX.Element {
 	const applyInspectionOptions = useCallback(() => {
+		onRunQuery?.();
 		setAppliedMetricName(currentMetricName ?? '');
 		dispatchMetricInspectionOptions({
 			type: 'APPLY_METRIC_INSPECTION_OPTIONS',
 		});
-	}, [currentMetricName, setAppliedMetricName, dispatchMetricInspectionOptions]);
+	}, [
+		currentMetricName,
+		setAppliedMetricName,
+		dispatchMetricInspectionOptions,
+		onRunQuery,
+	]);

 	return (
 		<div className="inspect-metrics-query-builder">
@@ -39,7 +48,11 @@ function QueryBuilder({
 				>
 					Query Builder
 				</Button>
-				<RunQueryBtn onStageRunQuery={applyInspectionOptions} />
+				<RunQueryBtn
+					onStageRunQuery={applyInspectionOptions}
+					handleCancelQuery={handleCancelQuery}
+					isLoadingQueries={isLoadingQueries}
+				/>
 			</div>
 			<Card className="inspect-metrics-query-builder-content">
 				<MetricNameSearch
--- a/frontend/src/container/MetricsExplorer/Inspect/tests/QueryBuilder.test.tsx
+++ b/frontend/src/container/MetricsExplorer/Inspect/tests/QueryBuilder.test.tsx
@@ -103,6 +103,8 @@ describe('QueryBuilder', () => {
 			filterExpression: '',
 		} as any,
 		setCurrentQuery: jest.fn(),
+		isLoadingQueries: false,
+		handleCancelQuery: jest.fn(),
 	};

 	beforeEach(() => {
--- a/frontend/src/container/MetricsExplorer/Inspect/types.ts
+++ b/frontend/src/container/MetricsExplorer/Inspect/types.ts
@@ -65,6 +65,9 @@ export interface QueryBuilderProps {
 	inspectMetricsTimeSeries: InspectMetricsSeries[];
 	currentQuery: IBuilderQuery;
 	setCurrentQuery: (query: IBuilderQuery) => void;
+	isLoadingQueries: boolean;
+	handleCancelQuery: () => void;
+	onRunQuery?: () => void;
 }

 export interface MetricNameSearchProps {
--- a/frontend/src/container/MetricsExplorer/Inspect/useInspectMetrics.ts
+++ b/frontend/src/container/MetricsExplorer/Inspect/useInspectMetrics.ts
@@ -1,6 +1,9 @@
 import { useCallback, useEffect, useMemo, useReducer, useState } from 'react';
 import { useQuery } from 'react-query';
 import { inspectMetrics } from 'api/generated/services/metrics';
+import { isAxiosError } from 'axios';
+import { MAX_QUERY_RETRIES } from 'constants/reactQuery';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { themeColors } from 'constants/theme';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { generateColor } from 'lib/uPlotLib/utils/generateColor';
@@ -107,7 +110,7 @@ export function useInspectMetrics(
 		isRefetching: isInspectMetricsRefetching,
 	} = useQuery({
 		queryKey: [
-			'inspectMetrics',
+			REACT_QUERY_KEY.GET_INSPECT_METRICS_DETAILS,
 			metricName,
 			start,
 			end,
@@ -127,6 +130,12 @@ export function useInspectMetrics(
 			),
 		enabled: !!metricName,
 		keepPreviousData: true,
+		retry: (failureCount: number, error: Error): boolean => {
+			if (isAxiosError(error) && error.code === 'ERR_CANCELED') {
+				return false;
+			}
+			return failureCount < MAX_QUERY_RETRIES;
+		},
 	});

 	const inspectMetricsData = useMemo(
--- a/frontend/src/container/MetricsExplorer/Summary/MetricsSearch.tsx
+++ b/frontend/src/container/MetricsExplorer/Summary/MetricsSearch.tsx
@@ -12,6 +12,8 @@ function MetricsSearch({
 	currentQueryFilterExpression,
 	setCurrentQueryFilterExpression,
 	isLoading,
+	handleCancelQuery,
+	onRunQuery,
 }: MetricsSearchProps): JSX.Element {
 	const handleOnChange = useCallback(
 		(expression: string): void => {
@@ -22,7 +24,8 @@ function MetricsSearch({

 	const handleStageAndRunQuery = useCallback(() => {
 		onChange(currentQueryFilterExpression);
-	}, [currentQueryFilterExpression, onChange]);
+		onRunQuery?.();
+	}, [currentQueryFilterExpression, onChange, onRunQuery]);

 	const handleRunQuery = useCallback(
 		(expression: string): void => {
@@ -53,6 +56,7 @@ function MetricsSearch({
 			<RunQueryBtn
 				onStageRunQuery={handleStageAndRunQuery}
 				isLoadingQueries={isLoading}
+				handleCancelQuery={handleCancelQuery}
 			/>
 			<div className="metrics-search-options">
 				<DateTimeSelectionV2
--- a/frontend/src/container/MetricsExplorer/Summary/Summary.tsx
+++ b/frontend/src/container/MetricsExplorer/Summary/Summary.tsx
@@ -4,6 +4,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux'; // old code, TODO: fix this correctly
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
+import { Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
@@ -17,6 +18,7 @@ import {
 	Querybuildertypesv5OrderByDTO,
 	Querybuildertypesv5OrderDirectionDTO,
 } from 'api/generated/services/sigNoz.schemas';
+import eyesEmojiUrl from 'assets/Images/eyesEmoji.svg';
 import { convertExpressionToFilters } from 'components/QueryBuilderV2/utils';
 import { initialQueriesMap } from 'constants/queryBuilder';
 import { usePageSize } from 'container/InfraMonitoringK8s/utils';
@@ -104,6 +106,8 @@ function Summary(): JSX.Element {
 		setCurrentQueryFilterExpression,
 	] = useState<string>(appliedFilterExpression);

+	const [isCancelled, setIsCancelled] = useState<boolean>(false);
+
 	useEffect(() => {
 		setCurrentQueryFilterExpression(appliedFilterExpression);
 	}, [appliedFilterExpression]);
@@ -164,6 +168,7 @@ function Summary(): JSX.Element {
 		isLoading: isGetMetricsStatsLoading,
 		isError: isGetMetricsStatsError,
 		error: metricsStatsError,
+		reset: resetMetricsStats,
 	} = useGetMetricsStats();

 	const {
@@ -172,6 +177,7 @@ function Summary(): JSX.Element {
 		isLoading: isGetMetricsTreemapLoading,
 		isError: isGetMetricsTreemapError,
 		error: metricsTreemapError,
+		reset: resetMetricsTreemap,
 	} = useGetMetricsTreemap();

 	const metricsStatsApiError = useMemo(
@@ -196,6 +202,40 @@ function Summary(): JSX.Element {
 		});
 	}, [metricsTreemapQuery, getMetricsTreemap]);

+	const handleCancelQuery = useCallback(() => {
+		resetMetricsStats();
+		resetMetricsTreemap();
+		setCurrentQueryFilterExpression(appliedFilterExpression);
+		setIsCancelled(true);
+	}, [
+		resetMetricsStats,
+		resetMetricsTreemap,
+		setCurrentQueryFilterExpression,
+		appliedFilterExpression,
+	]);
+
+	const handleRunQuery = useCallback(() => {
+		setIsCancelled(false);
+		getMetricsStats({
+			data: {
+				...metricsListQuery,
+				filter: { expression: currentQueryFilterExpression },
+			},
+		});
+		getMetricsTreemap({
+			data: {
+				...metricsTreemapQuery,
+				filter: { expression: currentQueryFilterExpression },
+			},
+		});
+	}, [
+		getMetricsStats,
+		getMetricsTreemap,
+		metricsListQuery,
+		metricsTreemapQuery,
+		currentQueryFilterExpression,
+	]);
+
 	const handleFilterChange = useCallback(
 		(expression: string) => {
 			const newFilters: TagFilter = {
@@ -330,11 +370,19 @@ function Summary(): JSX.Element {
 		!isGetMetricsTreemapLoading &&
 		!isGetMetricsTreemapError;

+	const isLoadingQueries =
+		isGetMetricsStatsLoading || isGetMetricsTreemapLoading;
+
 	const showFullScreenLoading =
-		(isGetMetricsStatsLoading || isGetMetricsTreemapLoading) &&
+		isLoadingQueries &&
 		formattedMetricsData.length === 0 &&
 		!treeMapData?.data[heatmapView]?.length;

+	const showNoMetrics =
+		isMetricsListDataEmpty &&
+		isMetricsTreeMapDataEmpty &&
+		!appliedFilterExpression;
+
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 			<div className="metrics-explorer-summary-tab">
@@ -343,13 +391,26 @@ function Summary(): JSX.Element {
 					onChange={handleFilterChange}
 					currentQueryFilterExpression={currentQueryFilterExpression}
 					setCurrentQueryFilterExpression={setCurrentQueryFilterExpression}
-					isLoading={isGetMetricsStatsLoading || isGetMetricsTreemapLoading}
+					isLoading={isLoadingQueries}
+					handleCancelQuery={handleCancelQuery}
+					onRunQuery={handleRunQuery}
 				/>
 				{showFullScreenLoading ? (
 					<MetricsLoading />
-				) : isMetricsListDataEmpty &&
-				  isMetricsTreeMapDataEmpty &&
-				  !appliedFilterExpression ? (
+				) : isCancelled ? (
+					<div className="no-logs-container">
+						<div className="no-logs-container-content">
+							<img className="eyes-emoji" src={eyesEmojiUrl} alt="eyes emoji" />
+							<Typography className="no-logs-text">
+								Query cancelled.
+								<span className="sub-text">
+									{' '}
+									Click &quot;Run Query&quot; to load metrics.
+								</span>
+							</Typography>
+						</div>
+					</div>
+				) : showNoMetrics ? (
 					<NoLogs dataSource={DataSource.METRICS} />
 				) : (
 					<>
--- a/frontend/src/container/MetricsExplorer/Summary/types.ts
+++ b/frontend/src/container/MetricsExplorer/Summary/types.ts
@@ -33,6 +33,8 @@ export interface MetricsSearchProps {
 	currentQueryFilterExpression: string;
 	setCurrentQueryFilterExpression: (expression: string) => void;
 	isLoading: boolean;
+	handleCancelQuery: () => void;
+	onRunQuery: () => void;
 }

 export interface MetricsTreemapProps {
--- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
+++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useMemo } from 'react';
-import { QueryKey } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Tabs, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
@@ -25,8 +24,8 @@ import PromQLQueryContainer from './QueryBuilder/promQL';
 import './QuerySection.styles.scss';
 function QuerySection({
 	selectedGraph,
-	queryRangeKey,
 	isLoadingQueries,
+	handleCancelQuery,
 	selectedWidget,
 	dashboardVersion,
 	dashboardId,
@@ -179,7 +178,7 @@ function QuerySection({
 							label="Stage & Run Query"
 							onStageRunQuery={handleRunQuery}
 							isLoadingQueries={isLoadingQueries}
-							queryRangeKey={queryRangeKey}
+							handleCancelQuery={handleCancelQuery}
 						/>
 					</span>
 				}
@@ -191,8 +190,8 @@ function QuerySection({

 interface QueryProps {
 	selectedGraph: PANEL_TYPES;
-	queryRangeKey?: QueryKey;
-	isLoadingQueries?: boolean;
+	isLoadingQueries: boolean;
+	handleCancelQuery: () => void;
 	selectedWidget: Widgets;
 	dashboardVersion?: string;
 	dashboardId?: string;
--- a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/index.tsx
+++ b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/index.tsx
@@ -1,5 +1,6 @@
 import { memo } from 'react';
 import { InfoCircleOutlined } from '@ant-design/icons';
+import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { Card } from 'container/GridCardLayout/styles';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
@@ -22,6 +23,7 @@ function WidgetGraph({
 	selectedWidget,
 	isLoadingPanelData,
 	enableDrillDown = false,
+	isCancelled = false,
 }: WidgetGraphContainerProps): JSX.Element {
 	const { currentQuery } = useQueryBuilder();

@@ -46,20 +48,24 @@ function WidgetGraph({
 				</div>
 				<DateTimeSelectionV2 showAutoRefresh={false} hideShareModal />
 			</div>
-			{queryResponse.error && (
+			{!isCancelled && queryResponse.error && (
 				<AlertIconContainer color="red" title={queryResponse.error.message}>
 					<InfoCircleOutlined />
 				</AlertIconContainer>
 			)}

-			<WidgetGraphComponent
-				isLoadingPanelData={isLoadingPanelData}
-				selectedGraph={selectedGraph}
-				queryResponse={queryResponse}
-				setRequestData={setRequestData}
-				selectedWidget={selectedWidget}
-				enableDrillDown={enableDrillDown}
-			/>
+			{isCancelled ? (
+				<QueryCancelledPlaceholder subText='Click "Run Query" to reload the chart.' />
+			) : (
+				<WidgetGraphComponent
+					isLoadingPanelData={isLoadingPanelData}
+					selectedGraph={selectedGraph}
+					queryResponse={queryResponse}
+					setRequestData={setRequestData}
+					selectedWidget={selectedWidget}
+					enableDrillDown={enableDrillDown}
+				/>
+			)}
 		</Container>
 	);
 }
--- a/frontend/src/container/NewWidget/LeftContainer/index.tsx
+++ b/frontend/src/container/NewWidget/LeftContainer/index.tsx
@@ -1,5 +1,5 @@
-import { memo, useEffect } from 'react';
-import { useMemo } from 'react';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { useQueryClient } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { ENTITY_VERSION_V5 } from 'constants/app';
@@ -34,6 +34,7 @@ function LeftContainer({
 	isNewPanel = false,
 }: WidgetGraphProps): JSX.Element {
 	const { stagedQuery } = useQueryBuilder();
+	const queryClient = useQueryClient();

 	const { selectedTime: globalSelectedInterval, minTime, maxTime } = useSelector<
 		AppState,
@@ -49,12 +50,25 @@ function LeftContainer({
 		],
 		[globalSelectedInterval, requestData, minTime, maxTime],
 	);
+	const [isCancelled, setIsCancelled] = useState(false);
+
+	const handleCancelQuery = useCallback(() => {
+		queryClient.cancelQueries(queryRangeKey);
+		setIsCancelled(true);
+	}, [queryClient, queryRangeKey]);
+
 	const queryResponse = useGetQueryRange(requestData, ENTITY_VERSION_V5, {
 		enabled: !!stagedQuery,
 		queryKey: queryRangeKey,
 		keepPreviousData: true,
 	});

+	useEffect(() => {
+		if (queryResponse.isFetching) {
+			setIsCancelled(false);
+		}
+	}, [queryResponse.isFetching]);
+
 	// Update parent component with query response for legend colors
 	useEffect(() => {
 		if (setQueryResponse) {
@@ -71,12 +85,13 @@ function LeftContainer({
 				selectedWidget={selectedWidget}
 				isLoadingPanelData={isLoadingPanelData}
 				enableDrillDown={enableDrillDown}
+				isCancelled={isCancelled}
 			/>
 			<QueryContainer className="query-section-left-container">
 				<QuerySection
 					selectedGraph={selectedGraph}
-					queryRangeKey={queryRangeKey}
 					isLoadingQueries={queryResponse.isFetching}
+					handleCancelQuery={handleCancelQuery}
 					selectedWidget={selectedWidget}
 					dashboardVersion={ENTITY_VERSION_V5}
 					dashboardId={dashboardData?.id}
--- a/frontend/src/container/NewWidget/RightContainer/index.tsx
+++ b/frontend/src/container/NewWidget/RightContainer/index.tsx
@@ -155,10 +155,10 @@ function RightContainer({
 		[],
 	);

-	const isAxisSectionVisible = useMemo(() => allowSoftMinMax || allowLogScale, [
-		allowSoftMinMax,
-		allowLogScale,
-	]);
+	const isAxisSectionVisible = useMemo(
+		() => allowSoftMinMax || allowLogScale,
+		[allowSoftMinMax, allowLogScale],
+	);

 	const isFormattingSectionVisible = useMemo(
 		() => allowYAxisUnit || allowDecimalPrecision || allowPanelColumnPreference,
@@ -177,7 +177,7 @@ function RightContainer({
 			 * TODO: @ahrefabhi Enable this after we are done other settings in chart appearance section
 			 */

-			// eslint-disable-next-line sonarjs/no-redundant-boolean
+			// oxlint-disable-next-line no-constant-binary-expression
 			false &&
 			(allowFillMode ||
 				allowLineStyle ||
--- a/frontend/src/container/NewWidget/types.ts
+++ b/frontend/src/container/NewWidget/types.ts
@@ -50,4 +50,5 @@ export type WidgetGraphContainerProps = {
 	selectedWidget: Widgets;
 	isLoadingPanelData: boolean;
 	enableDrillDown?: boolean;
+	isCancelled?: boolean;
 };
--- a/frontend/src/container/OnboardingQuestionaire/OnboardingFooter/OnboardingFooter.tsx
+++ b/frontend/src/container/OnboardingQuestionaire/OnboardingFooter/OnboardingFooter.tsx
@@ -13,7 +13,7 @@ export function OnboardingFooter(): JSX.Element {
 					rel="noreferrer"
 				>
 					{/* hippa.svg does not exist in src/assets — suppressed until asset is added */}
-					{/* eslint-disable-next-line rulesdir/no-unsupported-asset-pattern */}
+					{/* eslint-disable-next-line signoz/no-unsupported-asset-pattern */}
 					<img src="/logos/hippa.svg" alt="HIPPA" className="footer-logo" />
 					<span className="footer-text">HIPPA</span>
 				</a>
@@ -25,7 +25,7 @@ export function OnboardingFooter(): JSX.Element {
 					rel="noreferrer"
 				>
 					{/* soc2.svg does not exist in src/assets — suppressed until asset is added */}
-					{/* eslint-disable-next-line rulesdir/no-unsupported-asset-pattern */}
+					{/* eslint-disable-next-line signoz/no-unsupported-asset-pattern */}
 					<img src="/logos/soc2.svg" alt="SOC2" className="footer-logo" />
 					<span className="footer-text">SOC2</span>
 				</a>
--- a/frontend/src/container/QueryBuilder/components/RunQueryBtn/RunQueryBtn.tsx
+++ b/frontend/src/container/QueryBuilder/components/RunQueryBtn/RunQueryBtn.tsx
@@ -1,5 +1,3 @@
-import { useCallback } from 'react';
-import { QueryKey, useIsFetching, useQueryClient } from 'react-query';
 import { Button } from '@signozhq/ui';
 import cx from 'classnames';
 import {
@@ -12,14 +10,23 @@ import {
 import { getUserOperatingSystem, UserOperatingSystem } from 'utils/getUserOS';

 import './RunQueryBtn.scss';
-interface RunQueryBtnProps {
+
+type RunQueryBtnProps = {
 	className?: string;
 	label?: string;
-	isLoadingQueries?: boolean;
-	handleCancelQuery?: () => void;
-	onStageRunQuery?: () => void;
-	queryRangeKey?: QueryKey;
-}
+	disabled?: boolean;
+} & (
+	| {
+			onStageRunQuery: () => void;
+			handleCancelQuery: () => void;
+			isLoadingQueries: boolean;
+	  }
+	| {
+			onStageRunQuery?: never;
+			handleCancelQuery?: never;
+			isLoadingQueries?: never;
+	  }
+);

 function RunQueryBtn({
 	className,
@@ -27,26 +34,10 @@ function RunQueryBtn({
 	isLoadingQueries,
 	handleCancelQuery,
 	onStageRunQuery,
-	queryRangeKey,
+	disabled,
 }: RunQueryBtnProps): JSX.Element {
 	const isMac = getUserOperatingSystem() === UserOperatingSystem.MACOS;
-	const queryClient = useQueryClient();
-	const isKeyFetchingCount = useIsFetching(
-		queryRangeKey as QueryKey | undefined,
-	);
-	const isLoading =
-		typeof isLoadingQueries === 'boolean'
-			? isLoadingQueries
-			: isKeyFetchingCount > 0;
-
-	const onCancel = useCallback(() => {
-		if (handleCancelQuery) {
-			return handleCancelQuery();
-		}
-		if (queryRangeKey) {
-			queryClient.cancelQueries(queryRangeKey);
-		}
-	}, [handleCancelQuery, queryClient, queryRangeKey]);
+	const isLoading = isLoadingQueries ?? false;

 	return isLoading ? (
 		<Button
@@ -54,7 +45,7 @@ function RunQueryBtn({
 			type="button"
 			prefix={<Loader2 size={14} className="loading-icon animate-spin" />}
 			className={cx('cancel-query-btn', className)}
-			onClick={onCancel}
+			onClick={handleCancelQuery}
 		>
 			Cancel
 		</Button>
@@ -63,7 +54,7 @@ function RunQueryBtn({
 			color="primary"
 			type="button"
 			className={cx('run-query-btn', className)}
-			disabled={isLoading || !onStageRunQuery}
+			disabled={disabled}
 			onClick={onStageRunQuery}
 			prefix={<Play size={14} />}
 		>
--- a/frontend/src/container/QueryBuilder/components/RunQueryBtn/test/RunQueryBtn.test.tsx
+++ b/frontend/src/container/QueryBuilder/components/RunQueryBtn/test/RunQueryBtn.test.tsx
@@ -1,18 +1,8 @@
-// frontend/src/container/QueryBuilder/components/RunQueryBtn/__tests__/RunQueryBtn.test.tsx
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';

 import RunQueryBtn from '../RunQueryBtn';

-jest.mock('react-query', () => {
-	const actual = jest.requireActual('react-query');
-	return {
-		...actual,
-		useIsFetching: jest.fn(),
-		useQueryClient: jest.fn(),
-	};
-});
-import { useIsFetching, useQueryClient } from 'react-query';
-
 // Mock OS util
 jest.mock('utils/getUserOS', () => ({
 	getUserOperatingSystem: jest.fn(),
@@ -26,79 +16,60 @@ describe('RunQueryBtn', () => {
 		(getUserOperatingSystem as jest.Mock).mockReturnValue(
 			UserOperatingSystem.MACOS,
 		);
-		(useIsFetching as jest.Mock).mockReturnValue(0);
-		(useQueryClient as jest.Mock).mockReturnValue({
-			cancelQueries: jest.fn(),
-		});
 	});

-	test('uses isLoadingQueries prop over useIsFetching', () => {
-		// Simulate fetching but prop forces not loading
-		(useIsFetching as jest.Mock).mockReturnValue(1);
+	test('renders run state and triggers on click', async () => {
+		const user = userEvent.setup();
 		const onRun = jest.fn();
-		render(<RunQueryBtn onStageRunQuery={onRun} isLoadingQueries={false} />);
-		// Should show "Run Query" (not cancel)
-		const runBtn = screen.getByRole('button', { name: /run query/i });
-		expect(runBtn).toBeInTheDocument();
-		expect(runBtn).toBeEnabled();
-	});
-
-	test('fallback cancel: uses handleCancelQuery when no key provided', () => {
-		(useIsFetching as jest.Mock).mockReturnValue(0);
-		const cancelQueries = jest.fn();
-		(useQueryClient as jest.Mock).mockReturnValue({ cancelQueries });
-
 		const onCancel = jest.fn();
-		render(<RunQueryBtn isLoadingQueries handleCancelQuery={onCancel} />);
-
-		const cancelBtn = screen.getByRole('button', { name: /cancel/i });
-		fireEvent.click(cancelBtn);
-		expect(onCancel).toHaveBeenCalledTimes(1);
-		expect(cancelQueries).not.toHaveBeenCalled();
-	});
-
-	test('renders run state and triggers on click', () => {
-		const onRun = jest.fn();
-		render(<RunQueryBtn onStageRunQuery={onRun} />);
+		render(
+			<RunQueryBtn
+				onStageRunQuery={onRun}
+				handleCancelQuery={onCancel}
+				isLoadingQueries={false}
+			/>,
+		);
 		const btn = screen.getByRole('button', { name: /run query/i });
 		expect(btn).toBeEnabled();
-		fireEvent.click(btn);
+		await user.click(btn);
 		expect(onRun).toHaveBeenCalledTimes(1);
 	});

-	test('disabled when onStageRunQuery is undefined', () => {
-		render(<RunQueryBtn />);
-		expect(screen.getByRole('button', { name: /run query/i })).toBeDisabled();
-	});
-
-	test('shows cancel state and calls handleCancelQuery', () => {
+	test('shows cancel state and calls handleCancelQuery', async () => {
+		const user = userEvent.setup();
+		const onRun = jest.fn();
 		const onCancel = jest.fn();
-		render(<RunQueryBtn isLoadingQueries handleCancelQuery={onCancel} />);
+		render(
+			<RunQueryBtn
+				onStageRunQuery={onRun}
+				handleCancelQuery={onCancel}
+				isLoadingQueries
+			/>,
+		);
 		const cancel = screen.getByRole('button', { name: /cancel/i });
-		fireEvent.click(cancel);
+		await user.click(cancel);
 		expect(onCancel).toHaveBeenCalledTimes(1);
 	});

-	test('derives loading from queryKey via useIsFetching and cancels via queryClient', () => {
-		(useIsFetching as jest.Mock).mockReturnValue(1);
-		const cancelQueries = jest.fn();
-		(useQueryClient as jest.Mock).mockReturnValue({ cancelQueries });
+	test('disabled when disabled prop is true', () => {
+		render(<RunQueryBtn disabled />);
+		expect(screen.getByRole('button', { name: /run query/i })).toBeDisabled();
+	});

-		const queryKey = ['GET_QUERY_RANGE', '1h', { some: 'req' }, 1, 2];
-		render(<RunQueryBtn queryRangeKey={queryKey} />);
-
-		// Button switches to cancel state
-		const cancelBtn = screen.getByRole('button', { name: /cancel/i });
-		expect(cancelBtn).toBeInTheDocument();
-
-		// Clicking cancel calls cancelQueries with the key
-		fireEvent.click(cancelBtn);
-		expect(cancelQueries).toHaveBeenCalledWith(queryKey);
+	test('disabled when no props provided', () => {
+		render(<RunQueryBtn />);
+		expect(
+			screen.getByRole('button', { name: /run query/i }),
+		).toBeInTheDocument();
 	});

 	test('shows Command + CornerDownLeft on mac', () => {
 		const { container } = render(
-			<RunQueryBtn onStageRunQuery={(): void => {}} />,
+			<RunQueryBtn
+				onStageRunQuery={jest.fn()}
+				handleCancelQuery={jest.fn()}
+				isLoadingQueries={false}
+			/>,
 		);
 		expect(container.querySelector('.lucide-command')).toBeInTheDocument();
 		expect(
@@ -111,7 +82,11 @@ describe('RunQueryBtn', () => {
 			UserOperatingSystem.WINDOWS,
 		);
 		const { container } = render(
-			<RunQueryBtn onStageRunQuery={(): void => {}} />,
+			<RunQueryBtn
+				onStageRunQuery={jest.fn()}
+				handleCancelQuery={jest.fn()}
+				isLoadingQueries={false}
+			/>,
 		);
 		expect(container.querySelector('.lucide-chevron-up')).toBeInTheDocument();
 		expect(container.querySelector('.lucide-command')).not.toBeInTheDocument();
@@ -121,8 +96,14 @@ describe('RunQueryBtn', () => {
 	});

 	test('renders custom label when provided', () => {
-		const onRun = jest.fn();
-		render(<RunQueryBtn onStageRunQuery={onRun} label="Stage & Run Query" />);
+		render(
+			<RunQueryBtn
+				onStageRunQuery={jest.fn()}
+				handleCancelQuery={jest.fn()}
+				isLoadingQueries={false}
+				label="Stage & Run Query"
+			/>,
+		);
 		expect(
 			screen.getByRole('button', { name: /stage & run query/i }),
 		).toBeInTheDocument();
--- a/frontend/src/container/QueryBuilder/components/ToolbarActions/RightToolbarActions.tsx
+++ b/frontend/src/container/QueryBuilder/components/ToolbarActions/RightToolbarActions.tsx
@@ -1,5 +1,4 @@
-import { MutableRefObject, useEffect } from 'react';
-import { useQueryClient } from 'react-query';
+import { useEffect } from 'react';
 import { LogsExplorerShortcuts } from 'constants/shortcuts/logsExplorerShortcuts';
 import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';

@@ -9,23 +8,19 @@ import './ToolbarActions.styles.scss';

 interface RightToolbarActionsProps {
 	onStageRunQuery: () => void;
-	isLoadingQueries?: boolean;
-	listQueryKeyRef?: MutableRefObject<any>;
-	chartQueryKeyRef?: MutableRefObject<any>;
+	isLoadingQueries: boolean;
+	handleCancelQuery: () => void;
 	showLiveLogs?: boolean;
 }

 export default function RightToolbarActions({
 	onStageRunQuery,
 	isLoadingQueries,
-	listQueryKeyRef,
-	chartQueryKeyRef,
+	handleCancelQuery,
 	showLiveLogs,
 }: RightToolbarActionsProps): JSX.Element {
 	const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();

-	const queryClient = useQueryClient();
-
 	useEffect(() => {
 		if (showLiveLogs) {
 			return;
@@ -42,20 +37,11 @@ export default function RightToolbarActions({
 	if (showLiveLogs) {
 		return (
 			<div className="right-toolbar-actions-container">
-				<RunQueryBtn />
+				<RunQueryBtn disabled />
 			</div>
 		);
 	}

-	const handleCancelQuery = (): void => {
-		if (listQueryKeyRef?.current) {
-			queryClient.cancelQueries(listQueryKeyRef.current);
-		}
-		if (chartQueryKeyRef?.current) {
-			queryClient.cancelQueries(chartQueryKeyRef.current);
-		}
-	};
-
 	return (
 		<div className="right-toolbar-actions-container">
 			<RunQueryBtn
@@ -68,8 +54,5 @@ export default function RightToolbarActions({
 }

 RightToolbarActions.defaultProps = {
-	isLoadingQueries: false,
-	listQueryKeyRef: null,
-	chartQueryKeyRef: null,
 	showLiveLogs: false,
 };
--- a/frontend/src/container/QueryBuilder/components/ToolbarActions/tests/ToolbarActions.test.tsx
+++ b/frontend/src/container/QueryBuilder/components/ToolbarActions/tests/ToolbarActions.test.tsx
@@ -92,7 +92,12 @@ describe('ToolbarActions', () => {
 		const onStageRunQuery = jest.fn();
 		const { queryByText } = render(
 			<MockQueryClientProvider>
-				<RightToolbarActions onStageRunQuery={onStageRunQuery} />,
+				<RightToolbarActions
+					onStageRunQuery={onStageRunQuery}
+					isLoadingQueries={false}
+					handleCancelQuery={jest.fn()}
+				/>
+				,
 			</MockQueryClientProvider>,
 		);

--- a/frontend/src/container/QueryTable/Drilldown/tests/useBaseDrilldownNavigate.test.ts
+++ b/frontend/src/container/QueryTable/Drilldown/tests/useBaseDrilldownNavigate.test.ts
@@ -0,0 +1,282 @@
+import { renderHook } from '@testing-library/react';
+import ROUTES from 'constants/routes';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import { getViewQuery } from '../drilldownUtils';
+import { AggregateData } from '../useAggregateDrilldown';
+import useBaseDrilldownNavigate, {
+	buildDrilldownUrl,
+	getRoute,
+} from '../useBaseDrilldownNavigate';
+
+const mockSafeNavigate = jest.fn();
+
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): { safeNavigate: typeof mockSafeNavigate } => ({ safeNavigate: mockSafeNavigate }),
+}));
+
+jest.mock('../drilldownUtils', () => ({
+	...jest.requireActual('../drilldownUtils'),
+	getViewQuery: jest.fn(),
+}));
+
+const mockGetViewQuery = getViewQuery as jest.Mock;
+
+// ─── Fixtures ────────────────────────────────────────────────────────────────
+
+const MOCK_QUERY: Query = {
+	id: 'q1',
+	queryType: 'builder' as any,
+	builder: {
+		queryData: [
+			{
+				queryName: 'A',
+				dataSource: 'metrics' as any,
+				groupBy: [],
+				expression: '',
+				disabled: false,
+				functions: [],
+				legend: '',
+				having: [],
+				limit: null,
+				stepInterval: undefined,
+				orderBy: [],
+			},
+		],
+		queryFormulas: [],
+		queryTraceOperator: [],
+	},
+	promql: [],
+	clickhouse_sql: [],
+};
+
+const MOCK_VIEW_QUERY: Query = {
+	...MOCK_QUERY,
+	builder: {
+		...MOCK_QUERY.builder,
+		queryData: [
+			{
+				...MOCK_QUERY.builder.queryData[0],
+				filters: { items: [], op: 'AND' },
+			},
+		],
+	},
+};
+
+const MOCK_AGGREGATE_DATA: AggregateData = {
+	queryName: 'A',
+	filters: [{ filterKey: 'service_name', filterValue: 'auth', operator: '=' }],
+	timeRange: { startTime: 1000000, endTime: 2000000 },
+};
+
+// ─── getRoute ─────────────────────────────────────────────────────────────────
+
+describe('getRoute', () => {
+	it.each([
+		['view_logs', ROUTES.LOGS_EXPLORER],
+		['view_metrics', ROUTES.METRICS_EXPLORER],
+		['view_traces', ROUTES.TRACES_EXPLORER],
+	])('maps %s to the correct explorer route', (key, expected) => {
+		expect(getRoute(key)).toBe(expected);
+	});
+
+	it('returns empty string for an unknown key', () => {
+		expect(getRoute('view_dashboard')).toBe('');
+	});
+});
+
+// ─── buildDrilldownUrl ────────────────────────────────────────────────────────
+
+describe('buildDrilldownUrl', () => {
+	beforeEach(() => {
+		mockGetViewQuery.mockReturnValue(MOCK_VIEW_QUERY);
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('returns null for an unknown drilldown key', () => {
+		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_dashboard');
+		expect(url).toBeNull();
+	});
+
+	it('returns null when getViewQuery returns null', () => {
+		mockGetViewQuery.mockReturnValue(null);
+		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_logs');
+		expect(url).toBeNull();
+	});
+
+	it('returns a URL starting with the logs explorer route for view_logs', () => {
+		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_logs');
+		expect(url).not.toBeNull();
+		expect(url).toContain(ROUTES.LOGS_EXPLORER);
+	});
+
+	it('returns a URL starting with the traces explorer route for view_traces', () => {
+		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_traces');
+		expect(url).toContain(ROUTES.TRACES_EXPLORER);
+	});
+
+	it('includes compositeQuery param in the URL', () => {
+		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_logs');
+		expect(url).toContain('compositeQuery=');
+	});
+
+	it('includes startTime and endTime when aggregateData has a timeRange', () => {
+		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_logs');
+		expect(url).toContain('startTime=1000000');
+		expect(url).toContain('endTime=2000000');
+	});
+
+	it('omits startTime and endTime when aggregateData has no timeRange', () => {
+		const { timeRange: _, ...withoutTimeRange } = MOCK_AGGREGATE_DATA;
+		const url = buildDrilldownUrl(MOCK_QUERY, withoutTimeRange, 'view_logs');
+		expect(url).not.toContain('startTime=');
+		expect(url).not.toContain('endTime=');
+	});
+
+	it('includes summaryFilters param for view_metrics', () => {
+		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_metrics');
+		expect(url).toContain(ROUTES.METRICS_EXPLORER);
+		expect(url).toContain('summaryFilters=');
+	});
+
+	it('does not include summaryFilters param for non-metrics routes', () => {
+		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_logs');
+		expect(url).not.toContain('summaryFilters=');
+	});
+
+	it('handles null aggregateData by passing empty filters and empty queryName', () => {
+		const url = buildDrilldownUrl(MOCK_QUERY, null, 'view_logs');
+		expect(url).not.toBeNull();
+		expect(mockGetViewQuery).toHaveBeenCalledWith(MOCK_QUERY, [], 'view_logs', '');
+	});
+
+	it('passes aggregateData filters and queryName to getViewQuery', () => {
+		buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_logs');
+		expect(mockGetViewQuery).toHaveBeenCalledWith(
+			MOCK_QUERY,
+			MOCK_AGGREGATE_DATA.filters,
+			'view_logs',
+			MOCK_AGGREGATE_DATA.queryName,
+		);
+	});
+});
+
+// ─── useBaseDrilldownNavigate ─────────────────────────────────────────────────
+
+describe('useBaseDrilldownNavigate', () => {
+	beforeEach(() => {
+		mockGetViewQuery.mockReturnValue(MOCK_VIEW_QUERY);
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('calls safeNavigate with the built URL on a valid key', () => {
+		const { result } = renderHook(() =>
+			useBaseDrilldownNavigate({
+				resolvedQuery: MOCK_QUERY,
+				aggregateData: MOCK_AGGREGATE_DATA,
+			}),
+		);
+
+		result.current('view_logs');
+
+		expect(mockSafeNavigate).toHaveBeenCalledTimes(1);
+		const [url] = mockSafeNavigate.mock.calls[0];
+		expect(url).toContain(ROUTES.LOGS_EXPLORER);
+		expect(url).toContain('compositeQuery=');
+	});
+
+	it('opens the explorer in a new tab', () => {
+		const { result } = renderHook(() =>
+			useBaseDrilldownNavigate({
+				resolvedQuery: MOCK_QUERY,
+				aggregateData: MOCK_AGGREGATE_DATA,
+			}),
+		);
+
+		result.current('view_traces');
+
+		expect(mockSafeNavigate).toHaveBeenCalledWith(
+			expect.any(String),
+			{ newTab: true },
+		);
+	});
+
+	it('calls callback after successful navigation', () => {
+		const callback = jest.fn();
+		const { result } = renderHook(() =>
+			useBaseDrilldownNavigate({
+				resolvedQuery: MOCK_QUERY,
+				aggregateData: MOCK_AGGREGATE_DATA,
+				callback,
+			}),
+		);
+
+		result.current('view_logs');
+
+		expect(callback).toHaveBeenCalledTimes(1);
+	});
+
+	it('does not call safeNavigate for an unknown key', () => {
+		const { result } = renderHook(() =>
+			useBaseDrilldownNavigate({
+				resolvedQuery: MOCK_QUERY,
+				aggregateData: MOCK_AGGREGATE_DATA,
+			}),
+		);
+
+		result.current('view_dashboard');
+
+		expect(mockSafeNavigate).not.toHaveBeenCalled();
+	});
+
+	it('still calls callback when the key is unknown', () => {
+		const callback = jest.fn();
+		const { result } = renderHook(() =>
+			useBaseDrilldownNavigate({
+				resolvedQuery: MOCK_QUERY,
+				aggregateData: MOCK_AGGREGATE_DATA,
+				callback,
+			}),
+		);
+
+		result.current('view_dashboard');
+
+		expect(callback).toHaveBeenCalledTimes(1);
+		expect(mockSafeNavigate).not.toHaveBeenCalled();
+	});
+
+	it('still calls callback when getViewQuery returns null', () => {
+		mockGetViewQuery.mockReturnValue(null);
+		const callback = jest.fn();
+		const { result } = renderHook(() =>
+			useBaseDrilldownNavigate({
+				resolvedQuery: MOCK_QUERY,
+				aggregateData: MOCK_AGGREGATE_DATA,
+				callback,
+			}),
+		);
+
+		result.current('view_logs');
+
+		expect(callback).toHaveBeenCalledTimes(1);
+		expect(mockSafeNavigate).not.toHaveBeenCalled();
+	});
+
+	it('handles null aggregateData without throwing', () => {
+		const { result } = renderHook(() =>
+			useBaseDrilldownNavigate({
+				resolvedQuery: MOCK_QUERY,
+				aggregateData: null,
+			}),
+		);
+
+		expect(() => result.current('view_logs')).not.toThrow();
+		expect(mockSafeNavigate).toHaveBeenCalledTimes(1);
+	});
+});
--- a/frontend/src/container/QueryTable/Drilldown/drilldownUtils.tsx
+++ b/frontend/src/container/QueryTable/Drilldown/drilldownUtils.tsx
@@ -166,7 +166,7 @@ export const getAggregateColumnHeader = (
 	};
 };

-const getFiltersFromMetric = (metric: any): FilterData[] =>
+export const getFiltersFromMetric = (metric: any): FilterData[] =>
 	Object.keys(metric).map((key) => ({
 		filterKey: key,
 		filterValue: metric[key],
--- a/frontend/src/container/QueryTable/Drilldown/useBaseAggregateOptions.tsx
+++ b/frontend/src/container/QueryTable/Drilldown/useBaseAggregateOptions.tsx
@@ -2,14 +2,10 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { LinkOutlined, LoadingOutlined } from '@ant-design/icons';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
 import useUpdatedQuery from 'container/GridCardLayout/useResolveQuery';
 import { processContextLinks } from 'container/NewWidget/RightContainer/ContextLinks/utils';
 import useContextVariables from 'hooks/dashboard/useContextVariables';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import createQueryParams from 'lib/createQueryParams';
 import ContextMenu from 'periscope/components/ContextMenu';
 import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
 import { ContextLinksData } from 'types/api/dashboard/getAll';
@@ -17,9 +13,10 @@ import { Query } from 'types/api/queryBuilder/queryBuilderData';

 import { ContextMenuItem } from './contextConfig';
 import { getDataLinks } from './dataLinksUtils';
-import { getAggregateColumnHeader, getViewQuery } from './drilldownUtils';
+import { getAggregateColumnHeader } from './drilldownUtils';
 import { getBaseContextConfig } from './menuOptions';
 import { AggregateData } from './useAggregateDrilldown';
+import useBaseDrilldownNavigate from './useBaseDrilldownNavigate';

 interface UseBaseAggregateOptionsProps {
 	query: Query;
@@ -37,19 +34,6 @@ interface BaseAggregateOptionsConfig {
 	items?: ContextMenuItem;
 }

-const getRoute = (key: string): string => {
-	switch (key) {
-		case 'view_logs':
-			return ROUTES.LOGS_EXPLORER;
-		case 'view_metrics':
-			return ROUTES.METRICS_EXPLORER;
-		case 'view_traces':
-			return ROUTES.TRACES_EXPLORER;
-		default:
-			return '';
-	}
-};
-
 const useBaseAggregateOptions = ({
 	query,
 	onClose,
@@ -62,10 +46,8 @@ const useBaseAggregateOptions = ({
 	baseAggregateOptionsConfig: BaseAggregateOptionsConfig;
 } => {
 	const [resolvedQuery, setResolvedQuery] = useState<Query>(query);
-	const {
-		getUpdatedQuery,
-		isLoading: isResolveQueryLoading,
-	} = useUpdatedQuery();
+	const { getUpdatedQuery, isLoading: isResolveQueryLoading } =
+		useUpdatedQuery();
 	const { dashboardData } = useDashboardStore();

 	useEffect(() => {
@@ -87,8 +69,6 @@ const useBaseAggregateOptions = ({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [query, aggregateData, panelType]);

-	const { safeNavigate } = useSafeNavigate();
-
 	// Use the new useContextVariables hook
 	const { processedVariables } = useContextVariables({
 		maxValues: 2,
@@ -122,50 +102,16 @@ const useBaseAggregateOptions = ({
 					{label}
 				</ContextMenu.Item>
 			));
-		} catch (error) {
+		} catch {
 			return [];
 		}
 	}, [contextLinks, processedVariables, onClose, aggregateData, query]);

-	const handleBaseDrilldown = useCallback(
-		(key: string): void => {
-			const route = getRoute(key);
-			const timeRange = aggregateData?.timeRange;
-			const filtersToAdd = aggregateData?.filters || [];
-			const viewQuery = getViewQuery(
-				resolvedQuery,
-				filtersToAdd,
-				key,
-				aggregateData?.queryName || '',
-			);
-
-			let queryParams = {
-				[QueryParams.compositeQuery]: encodeURIComponent(JSON.stringify(viewQuery)),
-				...(timeRange && {
-					[QueryParams.startTime]: timeRange?.startTime.toString(),
-					[QueryParams.endTime]: timeRange?.endTime.toString(),
-				}),
-			} as Record<string, string>;
-
-			if (route === ROUTES.METRICS_EXPLORER) {
-				queryParams = {
-					...queryParams,
-					[QueryParams.summaryFilters]: JSON.stringify(
-						viewQuery?.builder.queryData[0].filters,
-					),
-				};
-			}
-
-			if (route) {
-				safeNavigate(`${route}?${createQueryParams(queryParams)}`, {
-					newTab: true,
-				});
-			}
-
-			onClose();
-		},
-		[resolvedQuery, safeNavigate, onClose, aggregateData],
-	);
+	const handleBaseDrilldown = useBaseDrilldownNavigate({
+		resolvedQuery,
+		aggregateData,
+		callback: onClose,
+	});

 	const { pathname } = useLocation();

--- a/frontend/src/container/QueryTable/Drilldown/useBaseDrilldownNavigate.ts
+++ b/frontend/src/container/QueryTable/Drilldown/useBaseDrilldownNavigate.ts
@@ -0,0 +1,117 @@
+import { useCallback } from 'react';
+import { QueryParams } from 'constants/query';
+import ROUTES from 'constants/routes';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import createQueryParams from 'lib/createQueryParams';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import { getViewQuery } from './drilldownUtils';
+import { AggregateData } from './useAggregateDrilldown';
+
+type DrilldownKey = 'view_logs' | 'view_metrics' | 'view_traces';
+
+const DRILLDOWN_ROUTE_MAP: Record<DrilldownKey, string> = {
+	view_logs: ROUTES.LOGS_EXPLORER,
+	view_metrics: ROUTES.METRICS_EXPLORER,
+	view_traces: ROUTES.TRACES_EXPLORER,
+};
+
+const getRoute = (key: string): string =>
+	DRILLDOWN_ROUTE_MAP[key as DrilldownKey] ?? '';
+
+interface UseBaseDrilldownNavigateProps {
+	resolvedQuery: Query;
+	aggregateData: AggregateData | null;
+	callback?: () => void;
+}
+
+const useBaseDrilldownNavigate = ({
+	resolvedQuery,
+	aggregateData,
+	callback,
+}: UseBaseDrilldownNavigateProps): ((key: string) => void) => {
+	const { safeNavigate } = useSafeNavigate();
+
+	return useCallback(
+		(key: string): void => {
+			const route = getRoute(key);
+			const viewQuery = getViewQuery(
+				resolvedQuery,
+				aggregateData?.filters ?? [],
+				key,
+				aggregateData?.queryName ?? '',
+			);
+
+			if (!viewQuery || !route) {
+				callback?.();
+				return;
+			}
+
+			const timeRange = aggregateData?.timeRange;
+			let queryParams: Record<string, string> = {
+				[QueryParams.compositeQuery]: encodeURIComponent(JSON.stringify(viewQuery)),
+				...(timeRange && {
+					[QueryParams.startTime]: timeRange.startTime.toString(),
+					[QueryParams.endTime]: timeRange.endTime.toString(),
+				}),
+			};
+
+			if (route === ROUTES.METRICS_EXPLORER) {
+				queryParams = {
+					...queryParams,
+					[QueryParams.summaryFilters]: JSON.stringify(
+						viewQuery.builder.queryData[0].filters,
+					),
+				};
+			}
+
+			safeNavigate(`${route}?${createQueryParams(queryParams)}`, {
+				newTab: true,
+			});
+
+			callback?.();
+		},
+		[resolvedQuery, safeNavigate, callback, aggregateData],
+	);
+};
+
+export function buildDrilldownUrl(
+	resolvedQuery: Query,
+	aggregateData: AggregateData | null,
+	key: string,
+): string | null {
+	const route = getRoute(key);
+	const viewQuery = getViewQuery(
+		resolvedQuery,
+		aggregateData?.filters ?? [],
+		key,
+		aggregateData?.queryName ?? '',
+	);
+
+	if (!viewQuery || !route) {
+		return null;
+	}
+
+	const timeRange = aggregateData?.timeRange;
+	let queryParams: Record<string, string> = {
+		[QueryParams.compositeQuery]: encodeURIComponent(JSON.stringify(viewQuery)),
+		...(timeRange && {
+			[QueryParams.startTime]: timeRange.startTime.toString(),
+			[QueryParams.endTime]: timeRange.endTime.toString(),
+		}),
+	};
+
+	if (route === ROUTES.METRICS_EXPLORER) {
+		queryParams = {
+			...queryParams,
+			[QueryParams.summaryFilters]: JSON.stringify(
+				viewQuery.builder.queryData[0].filters,
+			),
+		};
+	}
+
+	return `${route}?${createQueryParams(queryParams)}`;
+}
+
+export { getRoute };
+export default useBaseDrilldownNavigate;
--- a/frontend/src/hooks/queryBuilder/useGetQueryRange.ts
+++ b/frontend/src/hooks/queryBuilder/useGetQueryRange.ts
@@ -2,6 +2,7 @@ import { useMemo } from 'react';
 import { useQuery, UseQueryOptions, UseQueryResult } from 'react-query';
 import { isAxiosError } from 'axios';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { MAX_QUERY_RETRIES } from 'constants/reactQuery';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { updateBarStepInterval } from 'container/GridCardLayout/utils';
 import { useDashboardVariablesByType } from 'hooks/dashboard/useDashboardVariablesByType';
@@ -132,6 +133,10 @@ export const useGetQueryRange: UseGetQueryRange = (
 			return options.retry;
 		}
 		return (failureCount: number, error: Error): boolean => {
+			if (isAxiosError(error) && error.code === 'ERR_CANCELED') {
+				return false;
+			}
+
 			let status: number | undefined;

 			if (error instanceof APIError) {
@@ -144,7 +149,7 @@ export const useGetQueryRange: UseGetQueryRange = (
 				return false;
 			}

-			return failureCount < 3;
+			return failureCount < MAX_QUERY_RETRIES;
 		};
 	}, [options?.retry]);

--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Abhi Kumar	1f602a216e	chore: broke down drilldown navigate into a saperate hook	2026-04-23 13:46:19 +05:30
Ashwin Bhatkal	021f1c5775	fix: handle cancel functionality for Run Query Button (#10958 ) * fix: add ERR_CANCELED retry skip and new query key constants * refactor: add disabled prop and handleCancelQuery to shared query components (#10959) * refactor: add disabled prop and handleCancelQuery to shared query components * feat: add cancel query support to alert rule editing (#10960) * feat: add cancel query support to alert rule editing * feat: add cancel query support to CreateAlertV2 (#10961) * feat: add cancel query support to CreateAlertV2 * feat: add cancel query and AbortSignal support to MetricsExplorer Explorer (#10962) * feat: add cancel query and AbortSignal support to MetricsExplorer Explorer * feat: add cancel query support to MetricsExplorer Inspect (#10963) * feat: add cancel query support to MetricsExplorer Inspect * feat: add cancel query support to MetricsExplorer Summary (#10964) * feat: add cancel query support to MetricsExplorer Summary * feat: add cancel query support to MeterExplorer and dashboard widgets (#10965) * feat: add cancel query support to MeterExplorer and dashboard widgets * feat: add cancel query support to Logs, Traces, Exceptions and API Monitoring (#10972) * feat: add cancel query support to Logs, Traces, Errors, and API Monitoring * refactor: remove deprecated props and enforce strict query cancel interfaces (#10974) * refactor: remove deprecated props and enforce strict query cancel interfaces * fix: metrics explorer inspect cancel and run query bugs (#10975) * fix: metrics explorer inspect cancel and run query bugs * fix: api monitoring cancel and run query bugs (#10984) * feat: add cancelled query placeholder UI to alerts, explorers, exceptions, and api monitoring (#10988) * feat: add cancel query support to MeterExplorer and dashboard widgets * fix: api monitoring cancel and run query bugs * feat: add cancelled query placeholder UI to alerts, explorers, exceptions, and api monitoring * fix: cancelled placeholder for alert v2 and metrics inspect, use css modules * fix: cancelled placeholder race condition in metrics inspect auto-reset * fix: prioritize cancelled state over loading in metrics inspect content * fix: keep query builder rendered and match graph view height in inspect fallback * feat: add cancelled query placeholder to logs, traces, and dashboard widgets (#11007) * feat: add cancelled query placeholder to logs, traces, and dashboard widgets * fix: reset cancel on run and swap only chart body in widget graph * fix: use constants for max retry count (#11049) * fix: use semantic tokens	2026-04-23 06:58:50 +00:00
Abhishek Kumar Singh	30d3f754b5	feat: markdown renderer (#10682 ) Some checks failed build-staging / prepare (push) Has been cancelled Details build-staging / js-build (push) Has been cancelled Details build-staging / go-build (push) Has been cancelled Details build-staging / staging (push) Has been cancelled Details Release Drafter / update_release_draft (push) Has been cancelled Details * chore: custom notifiers in alert manager * chore: lint fixs * chore: fix email linter * chore: added tracing to msteamsv2 notifier * feat: alert manager template to template title and notification body * chore: updated test name + code for timeout errors * chore: added utils for using variables with $ notation * chore: exposed templates for alertmanager types * feat: added preprocessor for alert templater * chore: hooked preProcess function in expandTitle and body, added labels and annotations in alertdata * chore: fix lint issues * chore: added handling for missing variable used in template * feat: converted alerttemplater to interface and updated tests * refactor: added extractCommonKV instead of 2 different functions * test: fix preprocessor test case * feat: added support for and in templating * chore: lint fix * chore: renamed the interface * chore: added test for missing function * refactor: test case and sb related changed * refactor: comments and test improvements * chore: lint fix * chore: updated comments * feat: added basic html markdown templater * chore: updated newline to markdown format * feat: slack blockkit renderer using goldmark * test: added test for html rendering * feat: integrated slack blockit in markdownrenderer package and removed plaintext format * chore: updated br with new line in test and logs added * refactor: review comments * refactor: lint fixes * chore: updated licenses for notifiers * chore: updated email notifier from upstream * feat: return single templating result from with flag for template type * fix: variables with symbols in template * feat: slack mrkdwn renderer * feat: custom raw html renderer to escape <no value> * chore: integrated slack mrkdwn renderer and added NoOp formatter * chore: removed notifier test files * fix: concurrent rendering in markdown renderer * refactor: changes as per internal review * chore: lint issue * chore: removed special handling for softline break * refactor: removed logger as markdown renderer dependency * refactor: changed markdown renderer from interface to package-level functions --------- Co-authored-by: Srikanth Chekuri <srikanth.chekuri92@gmail.com>	2026-04-22 21:22:45 +00:00
Abhi kumar	d5dcdf382c	chore: added changes for pinning tooltip with a shortcut key (#10953 ) Some checks failed build-staging / prepare (push) Has been cancelled Details build-staging / js-build (push) Has been cancelled Details build-staging / go-build (push) Has been cancelled Details build-staging / staging (push) Has been cancelled Details Release Drafter / update_release_draft (push) Has been cancelled Details * chore: added changes for pinning tooltip with a shortcut key * chore: updated tooltipplugin tests * chore: added support for onclick in tooltip * chore: fixed minor issue * chore: updated tooltip pinning desings * chore: minor changes * chore: updated failing test * chore: updated pr review changes * chore: fixed tooltip tests * chore: fixed module css issues * chore: pr review fixes * chore: replaced kbd component with component from signozui * chore: updated the tokens * chore: updated tokens * chore: updated pinned color * chore: updated footer styles * chore: fixed linter issue	2026-04-22 17:37:38 +00:00
aniketio-ctrl	ce5e3e7943	feat(billing): increase zeus http client timeout (#11061 ) * feat(billing): add zeus put meters api * feat(billing): add zeus put meters api * feat(billing): increase zeuss http client timeour	2026-04-22 17:27:39 +00:00
Vinicius Lourenço	4846634c87	chore(oxlint): migrate from eslint (#10176 ) * feat(oxc): move from eslint/prettier to oxlint/oxfmt * fix(scripts): formatted and linted * fix(k8s-base-list): add again the ignore rule * fix(fmt): permissions type * fix(permissions): generate correct file for format * fix(k8s): wrong update on test methods caused it to be wrong	2026-04-22 13:40:59 +00:00
Srikanth Chekuri	e015310b5b	chore: add request examples for alert rules (#11023 ) * chore: add request examples for alert rules * chore: address ci	2026-04-22 13:10:52 +00:00
Vinicius Lourenço	c64cd0b692	fix(alert-rules): disable clickhouse/prompql for anomaly detection (#11038 ) * refactor(alert-rules): disable clickhouse/prompql for anomaly detection * fix(query-section): try fix issue with timing/useEffect delay * fix(getUploadChartData): ensure there's no way to crash due to bad sync state * fix(get-upload-chart-data): render as empty instead of skip series to be more safer	2026-04-22 13:01:42 +00:00
Vikrant Gupta	484b22c12a	chore(codeowner): add @therealpandey as codeowner (#11055 ) Some checks failed build-staging / prepare (push) Has been cancelled Details build-staging / js-build (push) Has been cancelled Details build-staging / go-build (push) Has been cancelled Details build-staging / staging (push) Has been cancelled Details Release Drafter / update_release_draft (push) Has been cancelled Details	2026-04-22 09:51:02 +00:00
				`@@ -0,0 +1 @@`
				`export { default } from './QueryCancelledPlaceholder';`