chore: update test cases

.gitignore

@@ -1,11 +1,8 @@
 
 node_modules
 
-# editor
 .vscode
 !.vscode/settings.json
-.zed
-.idea
 
 deploy/docker/environment_tiny/common_test
 frontend/node_modules
@@ -34,6 +31,8 @@ frontend/yarn-debug.log*
 frontend/yarn-error.log*
 frontend/src/constants/env.ts
 
+.idea
+
 **/build
 **/storage
 **/locust-scripts/__pycache__/
@@ -230,3 +229,5 @@ cython_debug/
 pyrightconfig.json
 
 
+# cursor files
+frontend/.cursor/

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

@@ -10,7 +10,6 @@ import (
 	"github.com/SigNoz/signoz/ee/query-service/usage"
 	"github.com/SigNoz/signoz/pkg/alertmanager"
 	"github.com/SigNoz/signoz/pkg/global"
-	"github.com/SigNoz/signoz/pkg/http/handler"
 	"github.com/SigNoz/signoz/pkg/http/middleware"
 	querierAPI "github.com/SigNoz/signoz/pkg/querier"
 	baseapp "github.com/SigNoz/signoz/pkg/query-service/app"
@@ -107,10 +106,7 @@ func (ah *APIHandler) RegisterRoutes(router *mux.Router, am *middleware.AuthZ) {
 	router.HandleFunc("/api/v4/query_range", am.ViewAccess(ah.queryRangeV4)).Methods(http.MethodPost)
 
 	// v5
-	router.Handle("/api/v5/query_range", handler.New(
-		am.ViewAccess(ah.queryRangeV5),
-		querierAPI.QueryRangeV5OpenAPIDef,
-	)).Methods(http.MethodPost)
+	router.HandleFunc("/api/v5/query_range", am.ViewAccess(ah.queryRangeV5)).Methods(http.MethodPost)
 
 	router.HandleFunc("/api/v5/substitute_vars", am.ViewAccess(ah.QuerierAPI.ReplaceVariables)).Methods(http.MethodPost)
 

frontend/.cursor/rules/testing-conventions.mdc

@@ -1,74 +0,0 @@
----
-description: Core testing conventions - imports, rendering, MSW, interactions, queries
-globs: **/*.test.{ts,tsx}
-alwaysApply: false
----
-
-# Testing Conventions
-
-## Imports
-
-Always import from the test harness, never directly from `@testing-library/react`:
-
-```ts
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-import { server, rest } from 'mocks-server/server';
-```
-
-## Router
-
-Use the built-in router in `render`:
-
-```ts
-render(<Page />, undefined, { initialRoute: '/traces-explorer' });
-```
-
-Only mock `useLocation` / `useParams` if the test depends on their values.
-
-## MSW
-
-Global MSW server runs automatically. Override per-test:
-
-```ts
-server.use(
-  rest.get('*/api/v1/foo', (_req, res, ctx) =>
-    res(ctx.status(200), ctx.json({ ok: true })))
-);
-```
-
-Keep large response fixtures in `mocks-server/__mockdata_`.
-
-## Interactions
-
-- Prefer `userEvent` for real user interactions (click, type, select, tab).
-- Use `fireEvent` only for low-level events not covered by `userEvent` (e.g., scroll, resize). Wrap in `act(...)` if needed.
-- Always `await` interactions:
-
-```ts
-const user = userEvent.setup({ pointerEventsCheck: 0 });
-await user.click(screen.getByRole('button', { name: /save/i }));
-```
-
-## Timers
-
-No global fake timers. Per-test only, for debounce/throttle:
-
-```ts
-jest.useFakeTimers();
-const user = userEvent.setup({ advanceTimers: (ms) => jest.advanceTimersByTime(ms) });
-await user.type(screen.getByRole('textbox'), 'query');
-jest.advanceTimersByTime(400);
-jest.useRealTimers();
-```
-
-## Queries
-
-Prefer accessible queries: `getByRole` > `findByRole` > `getByLabelText` > visible text > `data-testid` (last resort).
-
-## Anti-patterns
-
-- Never import from `@testing-library/react` directly
-- Never use global fake timers
-- Never wrap `render` in `act(...)`
-- Never mock infra dependencies locally (router, react-query)
-- Limit to 3-5 focused tests per file

frontend/.cursor/rules/testing-mock-strategy.mdc

@@ -1,54 +0,0 @@
----
-description: When to use global vs local mocks in tests
-globs: **/*.test.{ts,tsx}
-alwaysApply: false
----
-
-# Mock Strategy
-
-## Use Global Mocks For
-
-High-frequency dependencies (20+ test files):
-- Core infrastructure: react-router-dom, react-query, antd
-- Browser APIs: ResizeObserver, matchMedia, localStorage
-- Utility libraries: date-fns, lodash
-
-Available global mock files (from jest.config.ts):
-- `uplot` -> `__mocks__/uplotMock.ts`
-
-## Use Local Mocks For
-
-- Business logic dependencies (API endpoints, custom hooks, domain components)
-- Test-specific behavior (different data per test, error scenarios, loading states)
-
-## Decision Tree
-
-```
-Used in 20+ test files?
-  YES -> Global mock
-  NO  -> Business logic or test-specific?
-    YES -> Local mock
-    NO  -> Consider global if usage grows
-```
-
-## Correct Usage
-
-```ts
-// Global mocks are already available - just import
-import { useLocation } from 'react-router-dom';
-
-// Local mocks for business logic
-jest.mock('../api/tracesService', () => ({
-  getTraces: jest.fn(() => mockTracesData),
-}));
-```
-
-## Anti-patterns
-
-```ts
-// Never re-mock globally mocked dependencies locally
-jest.mock('react-router-dom', () => ({ ... }));
-
-// Never put test-specific data in global mocks
-jest.mock('../api/tracesService', () => ({ getTraces: jest.fn(() => specificTestData) }));
-```

frontend/.cursor/rules/testing-type-safety.mdc

@@ -1,54 +0,0 @@
----
-description: TypeScript type safety requirements for Jest tests
-globs: **/*.test.{ts,tsx}
-alwaysApply: false
----
-
-# TypeScript Type Safety in Tests
-
-All Jest tests must be fully type-safe. Never use `any`.
-
-## Mock Function Typing
-
-```ts
-// Use jest.mocked for module mocks
-import useFoo from 'hooks/useFoo';
-jest.mock('hooks/useFoo');
-const mockUseFoo = jest.mocked(useFoo);
-
-// Use jest.MockedFunction for standalone mocks
-const mockFetch = jest.fn() as jest.MockedFunction<(id: number) => Promise<User>>;
-```
-
-## Mock Data
-
-Define interfaces for all mock data:
-
-```ts
-const mockUser: User = { id: 1, name: 'John', email: 'john@example.com' };
-
-const mockProps: ComponentProps = {
-  title: 'Test',
-  data: [mockUser],
-  onSelect: jest.fn() as jest.MockedFunction<(user: User) => void>,
-};
-```
-
-## Hook Mocking Pattern
-
-```ts
-import useFoo from 'hooks/useFoo';
-jest.mock('hooks/useFoo');
-const mockUseFoo = jest.mocked(useFoo);
-mockUseFoo.mockReturnValue(/* minimal shape */);
-```
-
-Prefer helpers (`rqSuccess`, `rqLoading`, `rqError`) for React Query results.
-
-## Checklist
-
-- All mock functions use `jest.MockedFunction<T>` or `jest.mocked()`
-- All mock data has proper interfaces
-- No `any` types in test files
-- Component props are typed
-- API response types are defined

frontend/.cursorrules

@@ -0,0 +1,484 @@
+# Persona
+You are an expert developer with deep knowledge of Jest, React Testing Library, MSW, and TypeScript, tasked with creating unit tests for this repository.
+
+# Auto-detect TypeScript Usage
+Check for TypeScript in the project through tsconfig.json or package.json dependencies.
+Adjust syntax based on this detection.
+
+# TypeScript Type Safety for Jest Tests
+**CRITICAL**: All Jest tests MUST be fully type-safe with proper TypeScript types.
+
+**Type Safety Requirements:**
+- Use proper TypeScript interfaces for all mock data
+- Type all Jest mock functions with `jest.MockedFunction<T>`
+- Use generic types for React components and hooks
+- Define proper return types for mock functions
+- Use `as const` for literal types when needed
+- Avoid `any` type – use proper typing instead
+
+# Unit Testing Focus
+Focus on critical functionality (business logic, utility functions, component behavior)
+Mock dependencies (API calls, external modules) before imports
+Test multiple data scenarios (valid inputs, invalid inputs, edge cases)
+Write maintainable tests with descriptive names grouped in describe blocks
+
+# Global vs Local Mocks
+**Use Global Mocks for:**
+- High-frequency dependencies (20+ test files)
+- Core infrastructure (react-router-dom, react-query, antd)
+- Standard implementations across the app
+- Browser APIs (ResizeObserver, matchMedia, localStorage)
+- Utility libraries (date-fns, lodash)
+
+**Use Local Mocks for:**
+- Business logic dependencies (5-15 test files)
+- Test-specific behavior (different data per test)
+- API endpoints with specific responses
+- Domain-specific components
+- Error scenarios and edge cases
+
+**Global Mock Files Available (from jest.config.ts):**
+- `uplot` → `__mocks__/uplotMock.ts`
+
+# Repo-specific Testing Conventions
+
+## Imports
+Always import from our harness:
+```ts
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+```
+For API mocks:
+```ts
+import { server, rest } from 'mocks-server/server';
+```
+Do not import directly from `@testing-library/react`.
+
+## Router
+Use the router built into render:
+```ts
+render(<Page />, undefined, { initialRoute: '/traces-explorer' });
+```
+Only mock `useLocation` / `useParams` if the test depends on them.
+
+## Hook Mocks
+Pattern:
+```ts
+import useFoo from 'hooks/useFoo';
+jest.mock('hooks/useFoo');
+const mockUseFoo = jest.mocked(useFoo);
+mockUseFoo.mockReturnValue(/* minimal shape */ as any);
+```
+Prefer helpers (`rqSuccess`, `rqLoading`, `rqError`) for React Query results.
+
+## MSW
+Global MSW server runs automatically.
+Override per-test:
+```ts
+server.use(
+  rest.get('*/api/v1/foo', (_req, res, ctx) => res(ctx.status(200), ctx.json({ ok: true })))
+);
+```
+Keep large responses in `mocks-server/__mockdata_`.
+
+## Interactions
+- Prefer `userEvent` for real user interactions (click, type, select, tab).
+- Use `fireEvent` only for low-level/programmatic events not covered by `userEvent` (e.g., scroll, resize, setting `element.scrollTop` for virtualization). Wrap in `act(...)` if needed.
+- Always await interactions:
+```ts
+const user = userEvent.setup({ pointerEventsCheck: 0 });
+await user.click(screen.getByRole('button', { name: /save/i }));
+```
+
+```ts
+// Example: virtualized list scroll (no userEvent helper)
+const scroller = container.querySelector('[data-test-id="virtuoso-scroller"]') as HTMLElement;
+scroller.scrollTop = targetScrollTop;
+act(() => { fireEvent.scroll(scroller); });
+```
+
+## Timers
+❌ No global fake timers.
+✅ Per-test only, for debounce/throttle:
+```ts
+jest.useFakeTimers();
+const user = userEvent.setup({ advanceTimers: (ms) => jest.advanceTimersByTime(ms) });
+await user.type(screen.getByRole('textbox'), 'query');
+jest.advanceTimersByTime(400);
+jest.useRealTimers();
+```
+
+## Queries
+Prefer accessible queries (`getByRole`, `findByRole`, `getByLabelText`).
+Fallback: visible text.
+Last resort: `data-testid`.
+
+# Example Test (using only configured global mocks)
+```ts
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import { server, rest } from 'mocks-server/server';
+import MyComponent from '../MyComponent';
+
+describe('MyComponent', () => {
+  it('renders and interacts', async () => {
+    const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+    server.use(
+      rest.get('*/api/v1/example', (_req, res, ctx) => res(ctx.status(200), ctx.json({ value: 42 })))
+    );
+
+    render(<MyComponent />, undefined, { initialRoute: '/foo' });
+
+    expect(await screen.findByText(/value: 42/i)).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: /refresh/i }));
+    await waitFor(() => expect(screen.getByText(/loading/i)).toBeInTheDocument());
+  });
+});
+```
+
+# Anti-patterns
+❌ Importing RTL directly
+❌ Using global fake timers
+❌ Wrapping render in `act(...)`
+❌ Mocking infra dependencies locally (router, react-query)
+✅ Use our harness (`tests/test-utils`)
+✅ Use MSW for API overrides
+✅ Use userEvent + await
+✅ Pin time only in tests that assert relative dates
+
+# Best Practices
+- **Critical Functionality**: Prioritize testing business logic and utilities
+- **Dependency Mocking**: Global mocks for infra, local mocks for business logic
+- **Data Scenarios**: Always test valid, invalid, and edge cases
+- **Descriptive Names**: Make test intent clear
+- **Organization**: Group related tests in describe
+- **Consistency**: Match repo conventions
+- **Edge Cases**: Test null, undefined, unexpected values
+- **Limit Scope**: 3–5 focused tests per file
+- **Use Helpers**: `rqSuccess`, `makeUser`, etc.
+- **No Any**: Enforce type safety
+
+# Example Test
+```ts
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import { server, rest } from 'mocks-server/server';
+import MyComponent from '../MyComponent';
+
+describe('MyComponent', () => {
+  it('renders and interacts', async () => {
+    const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+    server.use(
+      rest.get('*/api/v1/example', (_req, res, ctx) => res(ctx.status(200), ctx.json({ value: 42 })))
+    );
+
+    render(<MyComponent />, undefined, { initialRoute: '/foo' });
+
+    expect(await screen.findByText(/value: 42/i)).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: /refresh/i }));
+    await waitFor(() => expect(screen.getByText(/loading/i)).toBeInTheDocument());
+  });
+});
+```
+
+# Anti-patterns
+❌ Importing RTL directly
+❌ Using global fake timers
+❌ Wrapping render in `act(...)`
+❌ Mocking infra dependencies locally (router, react-query)
+✅ Use our harness (`tests/test-utils`)
+✅ Use MSW for API overrides
+✅ Use userEvent + await
+✅ Pin time only in tests that assert relative dates
+
+# TypeScript Type Safety Examples
+
+## Proper Mock Typing
+```ts
+// ✅ GOOD - Properly typed mocks
+interface User {
+  id: number;
+  name: string;
+  email: string;
+}
+
+interface ApiResponse<T> {
+  data: T;
+  status: number;
+  message: string;
+}
+
+// Type the mock functions
+const mockFetchUser = jest.fn() as jest.MockedFunction<(id: number) => Promise<ApiResponse<User>>>;
+const mockUpdateUser = jest.fn() as jest.MockedFunction<(user: User) => Promise<ApiResponse<User>>>;
+
+// Mock implementation with proper typing
+mockFetchUser.mockResolvedValue({
+  data: { id: 1, name: 'John Doe', email: 'john@example.com' },
+  status: 200,
+  message: 'Success'
+});
+
+// ❌ BAD - Using any type
+const mockFetchUser = jest.fn() as any; // Don't do this
+```
+
+## React Component Testing with Types
+```ts
+// ✅ GOOD - Properly typed component testing
+interface ComponentProps {
+  title: string;
+  data: User[];
+  onUserSelect: (user: User) => void;
+  isLoading?: boolean;
+}
+
+const TestComponent: React.FC<ComponentProps> = ({ title, data, onUserSelect, isLoading = false }) => {
+  // Component implementation
+};
+
+describe('TestComponent', () => {
+  it('should render with proper props', () => {
+    // Arrange - Type the props properly
+    const mockProps: ComponentProps = {
+      title: 'Test Title',
+      data: [{ id: 1, name: 'John', email: 'john@example.com' }],
+      onUserSelect: jest.fn() as jest.MockedFunction<(user: User) => void>,
+      isLoading: false
+    };
+    
+    // Act
+    render(<TestComponent {...mockProps} />);
+    
+    // Assert
+    expect(screen.getByText('Test Title')).toBeInTheDocument();
+  });
+});
+```
+
+## Hook Testing with Types
+```ts
+// ✅ GOOD - Properly typed hook testing
+interface UseUserDataReturn {
+  user: User | null;
+  loading: boolean;
+  error: string | null;
+  refetch: () => void;
+}
+
+const useUserData = (id: number): UseUserDataReturn => {
+  // Hook implementation
+};
+
+describe('useUserData', () => {
+  it('should return user data with proper typing', () => {
+    // Arrange
+    const mockUser: User = { id: 1, name: 'John', email: 'john@example.com' };
+    mockFetchUser.mockResolvedValue({
+      data: mockUser,
+      status: 200,
+      message: 'Success'
+    });
+    
+    // Act
+    const { result } = renderHook(() => useUserData(1));
+    
+    // Assert
+    expect(result.current.user).toEqual(mockUser);
+    expect(result.current.loading).toBe(false);
+    expect(result.current.error).toBeNull();
+  });
+});
+```
+
+## Global Mock Type Safety
+```ts
+// ✅ GOOD - Type-safe global mocks
+// In __mocks__/routerMock.ts
+export const mockUseLocation = (overrides: Partial<Location> = {}): Location => ({
+  pathname: '/traces',
+  search: '',
+  hash: '',
+  state: null,
+  key: 'test-key',
+  ...overrides,
+});
+
+// In test files
+const location = useLocation(); // Properly typed from global mock
+expect(location.pathname).toBe('/traces');
+```
+
+# TypeScript Configuration for Jest
+
+## Required Jest Configuration
+```json
+// jest.config.ts
+{
+  "preset": "ts-jest/presets/js-with-ts-esm",
+  "globals": {
+    "ts-jest": {
+      "useESM": true,
+      "isolatedModules": true,
+      "tsconfig": "<rootDir>/tsconfig.jest.json"
+    }
+  },
+  "extensionsToTreatAsEsm": [".ts", ".tsx"],
+  "moduleFileExtensions": ["ts", "tsx", "js", "json"]
+}
+```
+
+## TypeScript Jest Configuration
+```json
+// tsconfig.jest.json
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "types": ["jest", "@testing-library/jest-dom"],
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "node"
+  },
+  "include": [
+    "src/**/*",
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "__mocks__/**/*"
+  ]
+}
+```
+
+## Common Type Safety Patterns
+
+### Mock Function Typing
+```ts
+// ✅ GOOD - Proper mock function typing
+const mockApiCall = jest.fn() as jest.MockedFunction<typeof apiCall>;
+const mockEventHandler = jest.fn() as jest.MockedFunction<(event: Event) => void>;
+
+// ❌ BAD - Using any
+const mockApiCall = jest.fn() as any;
+```
+
+### Generic Mock Typing
+```ts
+// ✅ GOOD - Generic mock typing
+interface MockApiResponse<T> {
+  data: T;
+  status: number;
+}
+
+const mockFetchData = jest.fn() as jest.MockedFunction<
+  <T>(endpoint: string) => Promise<MockApiResponse<T>>
+>;
+
+// Usage
+mockFetchData<User>('/users').mockResolvedValue({
+  data: { id: 1, name: 'John' },
+  status: 200
+});
+```
+
+### React Testing Library with Types
+```ts
+// ✅ GOOD - Typed testing utilities
+import { render, screen, RenderResult } from '@testing-library/react';
+import { ComponentProps } from 'react';
+
+type TestComponentProps = ComponentProps<typeof TestComponent>;
+
+const renderTestComponent = (props: Partial<TestComponentProps> = {}): RenderResult => {
+  const defaultProps: TestComponentProps = {
+    title: 'Test',
+    data: [],
+    onSelect: jest.fn(),
+    ...props
+  };
+  
+  return render(<TestComponent {...defaultProps} />);
+};
+```
+
+### Error Handling with Types
+```ts
+// ✅ GOOD - Typed error handling
+interface ApiError {
+  message: string;
+  code: number;
+  details?: Record<string, unknown>;
+}
+
+const mockApiError: ApiError = {
+  message: 'API Error',
+  code: 500,
+  details: { endpoint: '/users' }
+};
+
+mockFetchUser.mockRejectedValue(new Error(JSON.stringify(mockApiError)));
+```
+
+## Type Safety Checklist
+- [ ] All mock functions use `jest.MockedFunction<T>`
+- [ ] All mock data has proper interfaces
+- [ ] No `any` types in test files
+- [ ] Generic types are used where appropriate
+- [ ] Error types are properly defined
+- [ ] Component props are typed
+- [ ] Hook return types are defined
+- [ ] API response types are defined
+- [ ] Global mocks are type-safe
+- [ ] Test utilities are properly typed
+
+# Mock Decision Tree
+```
+Is it used in 20+ test files?
+├─ YES → Use Global Mock
+│   ├─ react-router-dom
+│   ├─ react-query
+│   ├─ antd components
+│   └─ browser APIs
+│
+└─ NO → Is it business logic?
+    ├─ YES → Use Local Mock
+    │   ├─ API endpoints
+    │   ├─ Custom hooks
+    │   └─ Domain components
+    │
+    └─ NO → Is it test-specific?
+        ├─ YES → Use Local Mock
+        │   ├─ Error scenarios
+        │   ├─ Loading states
+        │   └─ Specific data
+        │
+        └─ NO → Consider Global Mock
+            └─ If it becomes frequently used
+```
+
+# Common Anti-Patterns to Avoid
+
+❌ **Don't mock global dependencies locally:**
+```js
+// BAD - This is already globally mocked
+jest.mock('react-router-dom', () => ({ ... }));
+```
+
+❌ **Don't create global mocks for test-specific data:**
+```js
+// BAD - This should be local
+jest.mock('../api/tracesService', () => ({
+  getTraces: jest.fn(() => specificTestData)
+}));
+```
+
+✅ **Do use global mocks for infrastructure:**
+```js
+// GOOD - Use global mock
+import { useLocation } from 'react-router-dom';
+```
+
+✅ **Do create local mocks for business logic:**
+```js
+// GOOD - Local mock for specific test needs
+jest.mock('../api/tracesService', () => ({
+  getTraces: jest.fn(() => mockTracesData)
+}));
+```

frontend/__mocks__/useSafeNavigate.ts

@@ -2,6 +2,8 @@
 interface SafeNavigateOptions {
 	replace?: boolean;
 	state?: unknown;
+	newTab?: boolean;
+	event?: MouseEvent | React.MouseEvent;
 }
 
 interface SafeNavigateTo {
@@ -20,9 +22,7 @@ interface UseSafeNavigateReturn {
 
 export const useSafeNavigate = (): UseSafeNavigateReturn => ({
 	safeNavigate: jest.fn(
-		(to: SafeNavigateToType, options?: SafeNavigateOptions) => {
-			console.log(`Mock safeNavigate called with:`, to, options);
-		},
+		(_to: SafeNavigateToType, _options?: SafeNavigateOptions) => {},
 	) as jest.MockedFunction<
 		(to: SafeNavigateToType, options?: SafeNavigateOptions) => void
 	>,

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

@@ -20,20 +20,17 @@ import { useMutation, useQuery } from 'react-query';
 import { GeneratedAPIInstance } from '../../../index';
 import type {
 	GetMetricAlerts200,
-	GetMetricAlertsPathParameters,
+	GetMetricAlertsParams,
 	GetMetricAttributes200,
-	GetMetricAttributesParams,
-	GetMetricAttributesPathParameters,
 	GetMetricDashboards200,
-	GetMetricDashboardsPathParameters,
+	GetMetricDashboardsParams,
 	GetMetricHighlights200,
-	GetMetricHighlightsPathParameters,
+	GetMetricHighlightsParams,
 	GetMetricMetadata200,
-	GetMetricMetadataPathParameters,
+	GetMetricMetadataParams,
 	GetMetricsStats200,
 	GetMetricsTreemap200,
-	ListMetrics200,
-	ListMetricsParams,
+	MetricsexplorertypesMetricAttributesRequestDTO,
 	MetricsexplorertypesStatsRequestDTO,
 	MetricsexplorertypesTreemapRequestDTO,
 	MetricsexplorertypesUpdateMetricMetadataRequestDTO,
@@ -46,128 +43,30 @@ type AwaitedInput<T> = PromiseLike<T> | T;
 type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
 
 /**
- * This endpoint returns a list of distinct metric names within the specified time range
- * @summary List metric names
+ * This endpoint returns associated alerts for a specified metric
+ * @summary Get metric alerts
  */
-export const listMetrics = (
-	params?: ListMetricsParams,
+export const getMetricAlerts = (
+	params: GetMetricAlertsParams,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<ListMetrics200>({
-		url: `/api/v2/metrics`,
+	return GeneratedAPIInstance<GetMetricAlerts200>({
+		url: `/api/v2/metric/alerts`,
 		method: 'GET',
 		params,
 		signal,
 	});
 };
 
-export const getListMetricsQueryKey = (params?: ListMetricsParams) => {
-	return ['listMetrics', ...(params ? [params] : [])] as const;
-};
-
-export const getListMetricsQueryOptions = <
-	TData = Awaited<ReturnType<typeof listMetrics>>,
-	TError = RenderErrorResponseDTO
->(
-	params?: ListMetricsParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof listMetrics>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getListMetricsQueryKey(params);
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof listMetrics>>> = ({
-		signal,
-	}) => listMetrics(params, signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof listMetrics>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type ListMetricsQueryResult = NonNullable<
-	Awaited<ReturnType<typeof listMetrics>>
->;
-export type ListMetricsQueryError = RenderErrorResponseDTO;
-
-/**
- * @summary List metric names
- */
-
-export function useListMetrics<
-	TData = Awaited<ReturnType<typeof listMetrics>>,
-	TError = RenderErrorResponseDTO
->(
-	params?: ListMetricsParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof listMetrics>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getListMetricsQueryOptions(params, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary List metric names
- */
-export const invalidateListMetrics = async (
-	queryClient: QueryClient,
-	params?: ListMetricsParams,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getListMetricsQueryKey(params) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * This endpoint returns associated alerts for a specified metric
- * @summary Get metric alerts
- */
-export const getMetricAlerts = (
-	{ metricName }: GetMetricAlertsPathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetMetricAlerts200>({
-		url: `/api/v2/metrics/${metricName}/alerts`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetMetricAlertsQueryKey = ({
-	metricName,
-}: GetMetricAlertsPathParameters) => {
-	return ['getMetricAlerts'] as const;
+export const getGetMetricAlertsQueryKey = (params?: GetMetricAlertsParams) => {
+	return ['getMetricAlerts', ...(params ? [params] : [])] as const;
 };
 
 export const getGetMetricAlertsQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMetricAlerts>>,
 	TError = RenderErrorResponseDTO
 >(
-	{ metricName }: GetMetricAlertsPathParameters,
+	params: GetMetricAlertsParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricAlerts>>,
@@ -178,19 +77,13 @@ export const getGetMetricAlertsQueryOptions = <
 ) => {
 	const { query: queryOptions } = options ?? {};
 
-	const queryKey =
-		queryOptions?.queryKey ?? getGetMetricAlertsQueryKey({ metricName });
+	const queryKey = queryOptions?.queryKey ?? getGetMetricAlertsQueryKey(params);
 
 	const queryFn: QueryFunction<Awaited<ReturnType<typeof getMetricAlerts>>> = ({
 		signal,
-	}) => getMetricAlerts({ metricName }, signal);
+	}) => getMetricAlerts(params, signal);
 
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!metricName,
-		...queryOptions,
-	} as UseQueryOptions<
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
 		Awaited<ReturnType<typeof getMetricAlerts>>,
 		TError,
 		TData
@@ -210,7 +103,7 @@ export function useGetMetricAlerts<
 	TData = Awaited<ReturnType<typeof getMetricAlerts>>,
 	TError = RenderErrorResponseDTO
 >(
-	{ metricName }: GetMetricAlertsPathParameters,
+	params: GetMetricAlertsParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricAlerts>>,
@@ -219,7 +112,7 @@ export function useGetMetricAlerts<
 		>;
 	},
 ): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetMetricAlertsQueryOptions({ metricName }, options);
+	const queryOptions = getGetMetricAlertsQueryOptions(params, options);
 
 	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
 		queryKey: QueryKey;
@@ -235,126 +128,11 @@ export function useGetMetricAlerts<
  */
 export const invalidateGetMetricAlerts = async (
 	queryClient: QueryClient,
-	{ metricName }: GetMetricAlertsPathParameters,
+	params: GetMetricAlertsParams,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
-		{ queryKey: getGetMetricAlertsQueryKey({ metricName }) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * This endpoint returns attribute keys and their unique values for a specified metric
- * @summary Get metric attributes
- */
-export const getMetricAttributes = (
-	{ metricName }: GetMetricAttributesPathParameters,
-	params?: GetMetricAttributesParams,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetMetricAttributes200>({
-		url: `/api/v2/metrics/${metricName}/attributes`,
-		method: 'GET',
-		params,
-		signal,
-	});
-};
-
-export const getGetMetricAttributesQueryKey = (
-	{ metricName }: GetMetricAttributesPathParameters,
-	params?: GetMetricAttributesParams,
-) => {
-	return ['getMetricAttributes', ...(params ? [params] : [])] as const;
-};
-
-export const getGetMetricAttributesQueryOptions = <
-	TData = Awaited<ReturnType<typeof getMetricAttributes>>,
-	TError = RenderErrorResponseDTO
->(
-	{ metricName }: GetMetricAttributesPathParameters,
-	params?: GetMetricAttributesParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getMetricAttributes>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ??
-		getGetMetricAttributesQueryKey({ metricName }, params);
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof getMetricAttributes>>
-	> = ({ signal }) => getMetricAttributes({ metricName }, params, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!metricName,
-		...queryOptions,
-	} as UseQueryOptions<
-		Awaited<ReturnType<typeof getMetricAttributes>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetMetricAttributesQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getMetricAttributes>>
->;
-export type GetMetricAttributesQueryError = RenderErrorResponseDTO;
-
-/**
- * @summary Get metric attributes
- */
-
-export function useGetMetricAttributes<
-	TData = Awaited<ReturnType<typeof getMetricAttributes>>,
-	TError = RenderErrorResponseDTO
->(
-	{ metricName }: GetMetricAttributesPathParameters,
-	params?: GetMetricAttributesParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getMetricAttributes>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetMetricAttributesQueryOptions(
-		{ metricName },
-		params,
-		options,
-	);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary Get metric attributes
- */
-export const invalidateGetMetricAttributes = async (
-	queryClient: QueryClient,
-	{ metricName }: GetMetricAttributesPathParameters,
-	params?: GetMetricAttributesParams,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetMetricAttributesQueryKey({ metricName }, params) },
+		{ queryKey: getGetMetricAlertsQueryKey(params) },
 		options,
 	);
 
@@ -366,27 +144,28 @@ export const invalidateGetMetricAttributes = async (
  * @summary Get metric dashboards
  */
 export const getMetricDashboards = (
-	{ metricName }: GetMetricDashboardsPathParameters,
+	params: GetMetricDashboardsParams,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<GetMetricDashboards200>({
-		url: `/api/v2/metrics/${metricName}/dashboards`,
+		url: `/api/v2/metric/dashboards`,
 		method: 'GET',
+		params,
 		signal,
 	});
 };
 
-export const getGetMetricDashboardsQueryKey = ({
-	metricName,
-}: GetMetricDashboardsPathParameters) => {
-	return ['getMetricDashboards'] as const;
+export const getGetMetricDashboardsQueryKey = (
+	params?: GetMetricDashboardsParams,
+) => {
+	return ['getMetricDashboards', ...(params ? [params] : [])] as const;
 };
 
 export const getGetMetricDashboardsQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMetricDashboards>>,
 	TError = RenderErrorResponseDTO
 >(
-	{ metricName }: GetMetricDashboardsPathParameters,
+	params: GetMetricDashboardsParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricDashboards>>,
@@ -398,18 +177,13 @@ export const getGetMetricDashboardsQueryOptions = <
 	const { query: queryOptions } = options ?? {};
 
 	const queryKey =
-		queryOptions?.queryKey ?? getGetMetricDashboardsQueryKey({ metricName });
+		queryOptions?.queryKey ?? getGetMetricDashboardsQueryKey(params);
 
 	const queryFn: QueryFunction<
 		Awaited<ReturnType<typeof getMetricDashboards>>
-	> = ({ signal }) => getMetricDashboards({ metricName }, signal);
+	> = ({ signal }) => getMetricDashboards(params, signal);
 
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!metricName,
-		...queryOptions,
-	} as UseQueryOptions<
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
 		Awaited<ReturnType<typeof getMetricDashboards>>,
 		TError,
 		TData
@@ -429,7 +203,7 @@ export function useGetMetricDashboards<
 	TData = Awaited<ReturnType<typeof getMetricDashboards>>,
 	TError = RenderErrorResponseDTO
 >(
-	{ metricName }: GetMetricDashboardsPathParameters,
+	params: GetMetricDashboardsParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricDashboards>>,
@@ -438,10 +212,7 @@ export function useGetMetricDashboards<
 		>;
 	},
 ): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetMetricDashboardsQueryOptions(
-		{ metricName },
-		options,
-	);
+	const queryOptions = getGetMetricDashboardsQueryOptions(params, options);
 
 	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
 		queryKey: QueryKey;
@@ -457,11 +228,11 @@ export function useGetMetricDashboards<
  */
 export const invalidateGetMetricDashboards = async (
 	queryClient: QueryClient,
-	{ metricName }: GetMetricDashboardsPathParameters,
+	params: GetMetricDashboardsParams,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
-		{ queryKey: getGetMetricDashboardsQueryKey({ metricName }) },
+		{ queryKey: getGetMetricDashboardsQueryKey(params) },
 		options,
 	);
 
@@ -473,27 +244,28 @@ export const invalidateGetMetricDashboards = async (
  * @summary Get metric highlights
  */
 export const getMetricHighlights = (
-	{ metricName }: GetMetricHighlightsPathParameters,
+	params: GetMetricHighlightsParams,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<GetMetricHighlights200>({
-		url: `/api/v2/metrics/${metricName}/highlights`,
+		url: `/api/v2/metric/highlights`,
 		method: 'GET',
+		params,
 		signal,
 	});
 };
 
-export const getGetMetricHighlightsQueryKey = ({
-	metricName,
-}: GetMetricHighlightsPathParameters) => {
-	return ['getMetricHighlights'] as const;
+export const getGetMetricHighlightsQueryKey = (
+	params?: GetMetricHighlightsParams,
+) => {
+	return ['getMetricHighlights', ...(params ? [params] : [])] as const;
 };
 
 export const getGetMetricHighlightsQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMetricHighlights>>,
 	TError = RenderErrorResponseDTO
 >(
-	{ metricName }: GetMetricHighlightsPathParameters,
+	params: GetMetricHighlightsParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricHighlights>>,
@@ -505,18 +277,13 @@ export const getGetMetricHighlightsQueryOptions = <
 	const { query: queryOptions } = options ?? {};
 
 	const queryKey =
-		queryOptions?.queryKey ?? getGetMetricHighlightsQueryKey({ metricName });
+		queryOptions?.queryKey ?? getGetMetricHighlightsQueryKey(params);
 
 	const queryFn: QueryFunction<
 		Awaited<ReturnType<typeof getMetricHighlights>>
-	> = ({ signal }) => getMetricHighlights({ metricName }, signal);
+	> = ({ signal }) => getMetricHighlights(params, signal);
 
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!metricName,
-		...queryOptions,
-	} as UseQueryOptions<
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
 		Awaited<ReturnType<typeof getMetricHighlights>>,
 		TError,
 		TData
@@ -536,7 +303,7 @@ export function useGetMetricHighlights<
 	TData = Awaited<ReturnType<typeof getMetricHighlights>>,
 	TError = RenderErrorResponseDTO
 >(
-	{ metricName }: GetMetricHighlightsPathParameters,
+	params: GetMetricHighlightsParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricHighlights>>,
@@ -545,10 +312,7 @@ export function useGetMetricHighlights<
 		>;
 	},
 ): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetMetricHighlightsQueryOptions(
-		{ metricName },
-		options,
-	);
+	const queryOptions = getGetMetricHighlightsQueryOptions(params, options);
 
 	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
 		queryKey: QueryKey;
@@ -564,115 +328,11 @@ export function useGetMetricHighlights<
  */
 export const invalidateGetMetricHighlights = async (
 	queryClient: QueryClient,
-	{ metricName }: GetMetricHighlightsPathParameters,
+	params: GetMetricHighlightsParams,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
-		{ queryKey: getGetMetricHighlightsQueryKey({ metricName }) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * This endpoint returns metadata information like metric description, unit, type, temporality, monotonicity for a specified metric
- * @summary Get metric metadata
- */
-export const getMetricMetadata = (
-	{ metricName }: GetMetricMetadataPathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetMetricMetadata200>({
-		url: `/api/v2/metrics/${metricName}/metadata`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetMetricMetadataQueryKey = ({
-	metricName,
-}: GetMetricMetadataPathParameters) => {
-	return ['getMetricMetadata'] as const;
-};
-
-export const getGetMetricMetadataQueryOptions = <
-	TData = Awaited<ReturnType<typeof getMetricMetadata>>,
-	TError = RenderErrorResponseDTO
->(
-	{ metricName }: GetMetricMetadataPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getMetricMetadata>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ?? getGetMetricMetadataQueryKey({ metricName });
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof getMetricMetadata>>
-	> = ({ signal }) => getMetricMetadata({ metricName }, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!metricName,
-		...queryOptions,
-	} as UseQueryOptions<
-		Awaited<ReturnType<typeof getMetricMetadata>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetMetricMetadataQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getMetricMetadata>>
->;
-export type GetMetricMetadataQueryError = RenderErrorResponseDTO;
-
-/**
- * @summary Get metric metadata
- */
-
-export function useGetMetricMetadata<
-	TData = Awaited<ReturnType<typeof getMetricMetadata>>,
-	TError = RenderErrorResponseDTO
->(
-	{ metricName }: GetMetricMetadataPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getMetricMetadata>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetMetricMetadataQueryOptions({ metricName }, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary Get metric metadata
- */
-export const invalidateGetMetricMetadata = async (
-	queryClient: QueryClient,
-	{ metricName }: GetMetricMetadataPathParameters,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetMetricMetadataQueryKey({ metricName }) },
+		{ queryKey: getGetMetricHighlightsQueryKey(params) },
 		options,
 	);
 
@@ -778,6 +438,189 @@ export const useUpdateMetricMetadata = <
 
 	return useMutation(mutationOptions);
 };
+/**
+ * This endpoint returns attribute keys and their unique values for a specified metric
+ * @summary Get metric attributes
+ */
+export const getMetricAttributes = (
+	metricsexplorertypesMetricAttributesRequestDTO: MetricsexplorertypesMetricAttributesRequestDTO,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetMetricAttributes200>({
+		url: `/api/v2/metrics/attributes`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: metricsexplorertypesMetricAttributesRequestDTO,
+		signal,
+	});
+};
+
+export const getGetMetricAttributesMutationOptions = <
+	TError = RenderErrorResponseDTO,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof getMetricAttributes>>,
+		TError,
+		{ data: MetricsexplorertypesMetricAttributesRequestDTO },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof getMetricAttributes>>,
+	TError,
+	{ data: MetricsexplorertypesMetricAttributesRequestDTO },
+	TContext
+> => {
+	const mutationKey = ['getMetricAttributes'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+		  'mutationKey' in options.mutation &&
+		  options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof getMetricAttributes>>,
+		{ data: MetricsexplorertypesMetricAttributesRequestDTO }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return getMetricAttributes(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type GetMetricAttributesMutationResult = NonNullable<
+	Awaited<ReturnType<typeof getMetricAttributes>>
+>;
+export type GetMetricAttributesMutationBody = MetricsexplorertypesMetricAttributesRequestDTO;
+export type GetMetricAttributesMutationError = RenderErrorResponseDTO;
+
+/**
+ * @summary Get metric attributes
+ */
+export const useGetMetricAttributes = <
+	TError = RenderErrorResponseDTO,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof getMetricAttributes>>,
+		TError,
+		{ data: MetricsexplorertypesMetricAttributesRequestDTO },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof getMetricAttributes>>,
+	TError,
+	{ data: MetricsexplorertypesMetricAttributesRequestDTO },
+	TContext
+> => {
+	const mutationOptions = getGetMetricAttributesMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};
+/**
+ * This endpoint returns metadata information like metric description, unit, type, temporality, monotonicity for a specified metric
+ * @summary Get metric metadata
+ */
+export const getMetricMetadata = (
+	params: GetMetricMetadataParams,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetMetricMetadata200>({
+		url: `/api/v2/metrics/metadata`,
+		method: 'GET',
+		params,
+		signal,
+	});
+};
+
+export const getGetMetricMetadataQueryKey = (
+	params?: GetMetricMetadataParams,
+) => {
+	return ['getMetricMetadata', ...(params ? [params] : [])] as const;
+};
+
+export const getGetMetricMetadataQueryOptions = <
+	TData = Awaited<ReturnType<typeof getMetricMetadata>>,
+	TError = RenderErrorResponseDTO
+>(
+	params: GetMetricMetadataParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getMetricMetadata>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetMetricMetadataQueryKey(params);
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getMetricMetadata>>
+	> = ({ signal }) => getMetricMetadata(params, signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof getMetricMetadata>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetMetricMetadataQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getMetricMetadata>>
+>;
+export type GetMetricMetadataQueryError = RenderErrorResponseDTO;
+
+/**
+ * @summary Get metric metadata
+ */
+
+export function useGetMetricMetadata<
+	TData = Awaited<ReturnType<typeof getMetricMetadata>>,
+	TError = RenderErrorResponseDTO
+>(
+	params: GetMetricMetadataParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getMetricMetadata>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetMetricMetadataQueryOptions(params, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	query.queryKey = queryOptions.queryKey;
+
+	return query;
+}
+
+/**
+ * @summary Get metric metadata
+ */
+export const invalidateGetMetricMetadata = async (
+	queryClient: QueryClient,
+	params: GetMetricMetadataParams,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetMetricMetadataQueryKey(params) },
+		options,
+	);
+
+	return queryClient;
+};
+
 /**
  * This endpoint provides list of metrics with their number of samples and timeseries for the given time range
  * @summary Get metrics statistics

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

@@ -1,107 +0,0 @@
-/**
- * ! Do not edit manually
- * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
- * SigNoz
- */
-import type {
-	MutationFunction,
-	UseMutationOptions,
-	UseMutationResult,
-} from 'react-query';
-import { useMutation } from 'react-query';
-
-import { GeneratedAPIInstance } from '../../../index';
-import type {
-	Querybuildertypesv5QueryRangeRequestDTO,
-	QueryRangeV5200,
-	RenderErrorResponseDTO,
-} from '../sigNoz.schemas';
-
-type AwaitedInput<T> = PromiseLike<T> | T;
-
-type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
-
-/**
- * Execute a composite query over a time range. Supports builder queries (traces, logs, metrics), formulas, trace operators, PromQL, and ClickHouse SQL.
- * @summary Query range
- */
-export const queryRangeV5 = (
-	querybuildertypesv5QueryRangeRequestDTO: Querybuildertypesv5QueryRangeRequestDTO,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<QueryRangeV5200>({
-		url: `/api/v5/query_range`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: querybuildertypesv5QueryRangeRequestDTO,
-		signal,
-	});
-};
-
-export const getQueryRangeV5MutationOptions = <
-	TError = RenderErrorResponseDTO,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof queryRangeV5>>,
-		TError,
-		{ data: Querybuildertypesv5QueryRangeRequestDTO },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof queryRangeV5>>,
-	TError,
-	{ data: Querybuildertypesv5QueryRangeRequestDTO },
-	TContext
-> => {
-	const mutationKey = ['queryRangeV5'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof queryRangeV5>>,
-		{ data: Querybuildertypesv5QueryRangeRequestDTO }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return queryRangeV5(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type QueryRangeV5MutationResult = NonNullable<
-	Awaited<ReturnType<typeof queryRangeV5>>
->;
-export type QueryRangeV5MutationBody = Querybuildertypesv5QueryRangeRequestDTO;
-export type QueryRangeV5MutationError = RenderErrorResponseDTO;
-
-/**
- * @summary Query range
- */
-export const useQueryRangeV5 = <
-	TError = RenderErrorResponseDTO,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof queryRangeV5>>,
-		TError,
-		{ data: Querybuildertypesv5QueryRangeRequestDTO },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof queryRangeV5>>,
-	TError,
-	{ data: Querybuildertypesv5QueryRangeRequestDTO },
-	TContext
-> => {
-	const mutationOptions = getQueryRangeV5MutationOptions(options);
-
-	return useMutation(mutationOptions);
-};

frontend/src/api/metricsExplorer/v2/getMetricMetadata.ts

@@ -11,10 +11,13 @@ export const getMetricMetadata = async (
 ): Promise<SuccessResponseV2<MetricMetadataResponse> | ErrorResponseV2> => {
 	try {
 		const encodedMetricName = encodeURIComponent(metricName);
-		const response = await axios.get(`/metrics/${encodedMetricName}/metadata`, {
-			signal,
-			headers,
-		});
+		const response = await axios.get(
+			`/metrics/metadata?metricName=${encodedMetricName}`,
+			{
+				signal,
+				headers,
+			},
+		);
 
 		return {
 			httpStatusCode: response.status,

frontend/src/components/GuardAuthZ/GuardAuthZ.test.tsx

@@ -1,332 +0,0 @@
-import { ReactElement } from 'react-markdown/lib/react-markdown';
-import { ENVIRONMENT } from 'constants/env';
-import { BrandedPermission, buildPermission } from 'hooks/useAuthZ/utils';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
-import { render, screen, waitFor } from 'tests/test-utils';
-
-import { GuardAuthZ } from './GuardAuthZ';
-
-const BASE_URL = ENVIRONMENT.baseURL || '';
-
-describe('GuardAuthZ', () => {
-	const TestChild = (): ReactElement => <div>Protected Content</div>;
-	const LoadingFallback = (): ReactElement => <div>Loading...</div>;
-	const ErrorFallback = (error: Error): ReactElement => (
-		<div>Error occurred: {error.message}</div>
-	);
-	const NoPermissionFallback = (_response: {
-		requiredPermissionName: BrandedPermission;
-	}): ReactElement => <div>Access denied</div>;
-	const NoPermissionFallbackWithSuggestions = (response: {
-		requiredPermissionName: BrandedPermission;
-	}): ReactElement => (
-		<div>
-			Access denied. Required permission: {response.requiredPermissionName}
-		</div>
-	);
-
-	it('should render children when permission is granted', async () => {
-		const permission = buildPermission('read', 'dashboard:*');
-
-		server.use(
-			rest.post(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
-				return res(
-					ctx.status(200),
-					ctx.json({
-						[permission]: true,
-					}),
-				);
-			}),
-		);
-
-		render(
-			<GuardAuthZ relation="read" object="dashboard:*">
-				<TestChild />
-			</GuardAuthZ>,
-		);
-
-		await waitFor(() => {
-			expect(screen.getByText('Protected Content')).toBeInTheDocument();
-		});
-	});
-
-	it('should render fallbackOnLoading when loading', () => {
-		server.use(
-			rest.post(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
-				return res(ctx.status(200), ctx.json({}));
-			}),
-		);
-
-		render(
-			<GuardAuthZ
-				relation="read"
-				object="dashboard:*"
-				fallbackOnLoading={<LoadingFallback />}
-			>
-				<TestChild />
-			</GuardAuthZ>,
-		);
-
-		expect(screen.getByText('Loading...')).toBeInTheDocument();
-		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
-	});
-
-	it('should render null when loading and no fallbackOnLoading provided', () => {
-		server.use(
-			rest.post(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
-				return res(ctx.status(200), ctx.json({}));
-			}),
-		);
-
-		const { container } = render(
-			<GuardAuthZ relation="read" object="dashboard:*">
-				<TestChild />
-			</GuardAuthZ>,
-		);
-
-		expect(container.firstChild).toBeNull();
-		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
-	});
-
-	it('should render fallbackOnError when API error occurs', async () => {
-		const errorMessage = 'Internal Server Error';
-
-		server.use(
-			rest.post(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
-				return res(ctx.status(500), ctx.json({ error: errorMessage }));
-			}),
-		);
-
-		render(
-			<GuardAuthZ
-				relation="read"
-				object="dashboard:*"
-				fallbackOnError={ErrorFallback}
-			>
-				<TestChild />
-			</GuardAuthZ>,
-		);
-
-		await waitFor(() => {
-			expect(screen.getByText(/Error occurred:/)).toBeInTheDocument();
-		});
-
-		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
-	});
-
-	it('should pass error object to fallbackOnError function', async () => {
-		const errorMessage = 'Network request failed';
-		let receivedError: Error | null = null;
-
-		const errorFallbackWithCapture = (error: Error): ReactElement => {
-			receivedError = error;
-			return <div>Captured error: {error.message}</div>;
-		};
-
-		server.use(
-			rest.post(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
-				return res(ctx.status(500), ctx.json({ error: errorMessage }));
-			}),
-		);
-
-		render(
-			<GuardAuthZ
-				relation="read"
-				object="dashboard:*"
-				fallbackOnError={errorFallbackWithCapture}
-			>
-				<TestChild />
-			</GuardAuthZ>,
-		);
-
-		await waitFor(() => {
-			expect(receivedError).not.toBeNull();
-		});
-
-		expect(receivedError).toBeInstanceOf(Error);
-		expect(screen.getByText(/Captured error:/)).toBeInTheDocument();
-	});
-
-	it('should render null when error occurs and no fallbackOnError provided', async () => {
-		server.use(
-			rest.post(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
-				return res(ctx.status(500), ctx.json({ error: 'Internal Server Error' }));
-			}),
-		);
-
-		const { container } = render(
-			<GuardAuthZ relation="read" object="dashboard:*">
-				<TestChild />
-			</GuardAuthZ>,
-		);
-
-		await waitFor(() => {
-			expect(container.firstChild).toBeNull();
-		});
-
-		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
-	});
-
-	it('should render fallbackOnNoPermissions when permission is denied', async () => {
-		const permission = buildPermission('update', 'dashboard:123');
-
-		server.use(
-			rest.post(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
-				return res(
-					ctx.status(200),
-					ctx.json({
-						[permission]: false,
-					}),
-				);
-			}),
-		);
-
-		render(
-			<GuardAuthZ
-				relation="update"
-				object="dashboard:123"
-				fallbackOnNoPermissions={NoPermissionFallback}
-			>
-				<TestChild />
-			</GuardAuthZ>,
-		);
-
-		await waitFor(() => {
-			expect(screen.getByText('Access denied')).toBeInTheDocument();
-		});
-
-		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
-	});
-
-	it('should render null when permission is denied and no fallbackOnNoPermissions provided', async () => {
-		const permission = buildPermission('update', 'dashboard:123');
-
-		server.use(
-			rest.post(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
-				return res(
-					ctx.status(200),
-					ctx.json({
-						[permission]: false,
-					}),
-				);
-			}),
-		);
-
-		const { container } = render(
-			<GuardAuthZ relation="update" object="dashboard:123">
-				<TestChild />
-			</GuardAuthZ>,
-		);
-
-		await waitFor(() => {
-			expect(container.firstChild).toBeNull();
-		});
-
-		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
-	});
-
-	it('should render null when permissions object is null', async () => {
-		server.use(
-			rest.post(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
-				return res(ctx.status(200), ctx.json(null));
-			}),
-		);
-
-		const { container } = render(
-			<GuardAuthZ relation="read" object="dashboard:*">
-				<TestChild />
-			</GuardAuthZ>,
-		);
-
-		await waitFor(() => {
-			expect(container.firstChild).toBeNull();
-		});
-
-		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
-	});
-
-	it('should pass requiredPermissionName to fallbackOnNoPermissions', async () => {
-		const permission = buildPermission('update', 'dashboard:123');
-
-		server.use(
-			rest.post(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
-				return res(
-					ctx.status(200),
-					ctx.json({
-						[permission]: false,
-					}),
-				);
-			}),
-		);
-
-		render(
-			<GuardAuthZ
-				relation="update"
-				object="dashboard:123"
-				fallbackOnNoPermissions={NoPermissionFallbackWithSuggestions}
-			>
-				<TestChild />
-			</GuardAuthZ>,
-		);
-
-		await waitFor(() => {
-			expect(
-				screen.getByText(/Access denied. Required permission:/),
-			).toBeInTheDocument();
-		});
-
-		expect(screen.getByText(new RegExp(permission))).toBeInTheDocument();
-		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
-	});
-
-	it('should handle different relation and object combinations', async () => {
-		const permission1 = buildPermission('read', 'dashboard:*');
-		const permission2 = buildPermission('delete', 'dashboard:456');
-
-		server.use(
-			rest.post(`${BASE_URL}/api/v1/permissions/check`, (req, res, ctx) => {
-				const body = req.body as {
-					permissions: Array<{ relation: string; object: string }>;
-				};
-				const perm = body.permissions[0];
-				const permKey = `${perm.relation}/${perm.object}`;
-
-				if (permKey === permission1) {
-					return res(
-						ctx.status(200),
-						ctx.json({
-							[permission1]: true,
-						}),
-					);
-				}
-				return res(
-					ctx.status(200),
-					ctx.json({
-						[permission2]: true,
-					}),
-				);
-			}),
-		);
-
-		const { rerender } = render(
-			<GuardAuthZ relation="read" object="dashboard:*">
-				<TestChild />
-			</GuardAuthZ>,
-		);
-
-		await waitFor(() => {
-			expect(screen.getByText('Protected Content')).toBeInTheDocument();
-		});
-
-		rerender(
-			<GuardAuthZ relation="delete" object="dashboard:456">
-				<TestChild />
-			</GuardAuthZ>,
-		);
-
-		await waitFor(() => {
-			expect(screen.getByText('Protected Content')).toBeInTheDocument();
-		});
-	});
-});

frontend/src/components/GuardAuthZ/GuardAuthZ.tsx

@@ -1,50 +0,0 @@
-import { ReactElement } from 'react';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
-import {
-	AuthZObject,
-	AuthZRelation,
-	BrandedPermission,
-	buildPermission,
-} from 'hooks/useAuthZ/utils';
-
-export type GuardAuthZProps<R extends AuthZRelation> = {
-	children: ReactElement;
-	relation: R;
-	object: AuthZObject<R>;
-	fallbackOnLoading?: JSX.Element;
-	fallbackOnError?: (error: Error) => JSX.Element;
-	fallbackOnNoPermissions?: (response: {
-		requiredPermissionName: BrandedPermission;
-	}) => JSX.Element;
-};
-
-export function GuardAuthZ<R extends AuthZRelation>({
-	children,
-	relation,
-	object,
-	fallbackOnLoading,
-	fallbackOnError,
-	fallbackOnNoPermissions,
-}: GuardAuthZProps<R>): JSX.Element | null {
-	const permission = buildPermission<R>(relation, object);
-
-	const { permissions, isLoading, error } = useAuthZ([permission]);
-
-	if (isLoading) {
-		return fallbackOnLoading ?? null;
-	}
-
-	if (error) {
-		return fallbackOnError?.(error) ?? null;
-	}
-
-	if (!permissions?.[permission]?.isGranted) {
-		return (
-			fallbackOnNoPermissions?.({
-				requiredPermissionName: permission,
-			}) ?? null
-		);
-	}
-
-	return children;
-}

frontend/src/components/GuardAuthZ/createGuardedRoute.styles.scss

@@ -1,46 +0,0 @@
-.guard-authz-error-no-authz {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	width: 100%;
-	height: 100%;
-
-	padding: 24px;
-
-	.guard-authz-error-no-authz-content {
-		display: flex;
-		flex-direction: column;
-		justify-content: flex-start;
-		gap: 8px;
-		max-width: 500px;
-	}
-
-	img {
-		width: 32px;
-		height: 32px;
-	}
-
-	h3 {
-		font-size: 18px;
-		color: var(--bg-vanilla-100);
-		line-height: 18px;
-	}
-
-	p {
-		font-size: 14px;
-		color: var(--bg-vanilla-400);
-		line-height: 18px;
-
-		pre {
-			display: flex;
-			align-items: center;
-			background-color: var(--bg-slate-400);
-			cursor: pointer;
-
-			svg {
-				margin-left: 2px;
-			}
-		}
-	}
-}

frontend/src/components/GuardAuthZ/createGuardedRoute.test.tsx

@@ -1,489 +0,0 @@
-import { ReactElement } from 'react';
-import type { RouteComponentProps } from 'react-router-dom';
-import { ENVIRONMENT } from 'constants/env';
-import { buildPermission } from 'hooks/useAuthZ/utils';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
-import { render, screen, waitFor } from 'tests/test-utils';
-
-import { createGuardedRoute } from './createGuardedRoute';
-
-const BASE_URL = ENVIRONMENT.baseURL || '';
-
-describe('createGuardedRoute', () => {
-	const TestComponent = ({ testProp }: { testProp: string }): ReactElement => (
-		<div>Test Component: {testProp}</div>
-	);
-
-	it('should render component when permission is granted', async () => {
-		const permission = buildPermission('read', 'dashboard:*');
-
-		server.use(
-			rest.post(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
-				return res(
-					ctx.status(200),
-					ctx.json({
-						[permission]: true,
-					}),
-				);
-			}),
-		);
-
-		const GuardedComponent = createGuardedRoute(
-			TestComponent,
-			'read',
-			'dashboard:*',
-		);
-
-		const mockMatch = {
-			params: {},
-			isExact: true,
-			path: '/dashboard',
-			url: '/dashboard',
-		};
-
-		const props = {
-			testProp: 'test-value',
-			match: mockMatch,
-			location: ({} as unknown) as RouteComponentProps['location'],
-			history: ({} as unknown) as RouteComponentProps['history'],
-		};
-
-		render(<GuardedComponent {...props} />);
-
-		await waitFor(() => {
-			expect(screen.getByText('Test Component: test-value')).toBeInTheDocument();
-		});
-	});
-
-	it('should substitute route parameters in object string', async () => {
-		const permission = buildPermission('read', 'dashboard:123');
-
-		server.use(
-			rest.post(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
-				return res(
-					ctx.status(200),
-					ctx.json({
-						[permission]: true,
-					}),
-				);
-			}),
-		);
-
-		const GuardedComponent = createGuardedRoute(
-			TestComponent,
-			'read',
-			'dashboard:{id}',
-		);
-
-		const mockMatch = {
-			params: { id: '123' },
-			isExact: true,
-			path: '/dashboard/:id',
-			url: '/dashboard/123',
-		};
-
-		const props = {
-			testProp: 'test-value',
-			match: mockMatch,
-			location: ({} as unknown) as RouteComponentProps['location'],
-			history: ({} as unknown) as RouteComponentProps['history'],
-		};
-
-		render(<GuardedComponent {...props} />);
-
-		await waitFor(() => {
-			expect(screen.getByText('Test Component: test-value')).toBeInTheDocument();
-		});
-	});
-
-	it('should handle multiple route parameters', async () => {
-		const permission = buildPermission('update', 'dashboard:123:456');
-
-		server.use(
-			rest.post(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
-				return res(
-					ctx.status(200),
-					ctx.json({
-						[permission]: true,
-					}),
-				);
-			}),
-		);
-
-		const GuardedComponent = createGuardedRoute(
-			TestComponent,
-			'update',
-			'dashboard:{id}:{version}',
-		);
-
-		const mockMatch = {
-			params: { id: '123', version: '456' },
-			isExact: true,
-			path: '/dashboard/:id/:version',
-			url: '/dashboard/123/456',
-		};
-
-		const props = {
-			testProp: 'test-value',
-			match: mockMatch,
-			location: ({} as unknown) as RouteComponentProps['location'],
-			history: ({} as unknown) as RouteComponentProps['history'],
-		};
-
-		render(<GuardedComponent {...props} />);
-
-		await waitFor(() => {
-			expect(screen.getByText('Test Component: test-value')).toBeInTheDocument();
-		});
-	});
-
-	it('should keep placeholder when route parameter is missing', async () => {
-		const permission = buildPermission('read', 'dashboard:{id}');
-
-		server.use(
-			rest.post(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
-				return res(
-					ctx.status(200),
-					ctx.json({
-						[permission]: true,
-					}),
-				);
-			}),
-		);
-
-		const GuardedComponent = createGuardedRoute(
-			TestComponent,
-			'read',
-			'dashboard:{id}',
-		);
-
-		const mockMatch = {
-			params: {},
-			isExact: true,
-			path: '/dashboard',
-			url: '/dashboard',
-		};
-
-		const props = {
-			testProp: 'test-value',
-			match: mockMatch,
-			location: ({} as unknown) as RouteComponentProps['location'],
-			history: ({} as unknown) as RouteComponentProps['history'],
-		};
-
-		render(<GuardedComponent {...props} />);
-
-		await waitFor(() => {
-			expect(screen.getByText('Test Component: test-value')).toBeInTheDocument();
-		});
-	});
-
-	it('should render loading fallback when loading', () => {
-		server.use(
-			rest.post(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
-				return res(ctx.status(200), ctx.json({}));
-			}),
-		);
-
-		const GuardedComponent = createGuardedRoute(
-			TestComponent,
-			'read',
-			'dashboard:*',
-		);
-
-		const mockMatch = {
-			params: {},
-			isExact: true,
-			path: '/dashboard',
-			url: '/dashboard',
-		};
-
-		const props = {
-			testProp: 'test-value',
-			match: mockMatch,
-			location: ({} as unknown) as RouteComponentProps['location'],
-			history: ({} as unknown) as RouteComponentProps['history'],
-		};
-
-		render(<GuardedComponent {...props} />);
-
-		expect(screen.getByText('SigNoz')).toBeInTheDocument();
-		expect(
-			screen.queryByText('Test Component: test-value'),
-		).not.toBeInTheDocument();
-	});
-
-	it('should render error fallback when API error occurs', async () => {
-		server.use(
-			rest.post(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
-				return res(ctx.status(500), ctx.json({ error: 'Internal Server Error' }));
-			}),
-		);
-
-		const GuardedComponent = createGuardedRoute(
-			TestComponent,
-			'read',
-			'dashboard:*',
-		);
-
-		const mockMatch = {
-			params: {},
-			isExact: true,
-			path: '/dashboard',
-			url: '/dashboard',
-		};
-
-		const props = {
-			testProp: 'test-value',
-			match: mockMatch,
-			location: ({} as unknown) as RouteComponentProps['location'],
-			history: ({} as unknown) as RouteComponentProps['history'],
-		};
-
-		render(<GuardedComponent {...props} />);
-
-		await waitFor(() => {
-			expect(screen.getByText(/Something went wrong/i)).toBeInTheDocument();
-		});
-
-		expect(
-			screen.queryByText('Test Component: test-value'),
-		).not.toBeInTheDocument();
-	});
-
-	it('should render no permissions fallback when permission is denied', async () => {
-		const permission = buildPermission('update', 'dashboard:123');
-
-		server.use(
-			rest.post(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
-				return res(
-					ctx.status(200),
-					ctx.json({
-						[permission]: false,
-					}),
-				);
-			}),
-		);
-
-		const GuardedComponent = createGuardedRoute(
-			TestComponent,
-			'update',
-			'dashboard:{id}',
-		);
-
-		const mockMatch = {
-			params: { id: '123' },
-			isExact: true,
-			path: '/dashboard/:id',
-			url: '/dashboard/123',
-		};
-
-		const props = {
-			testProp: 'test-value',
-			match: mockMatch,
-			location: ({} as unknown) as RouteComponentProps['location'],
-			history: ({} as unknown) as RouteComponentProps['history'],
-		};
-
-		render(<GuardedComponent {...props} />);
-
-		await waitFor(() => {
-			const heading = document.querySelector('h3');
-			expect(heading).toBeInTheDocument();
-			expect(heading?.textContent).toMatch(/permission to view/i);
-		});
-
-		expect(screen.getByText(permission, { exact: false })).toBeInTheDocument();
-		expect(
-			screen.queryByText('Test Component: test-value'),
-		).not.toBeInTheDocument();
-	});
-
-	it('should pass all props to wrapped component', async () => {
-		const permission = buildPermission('read', 'dashboard:*');
-
-		server.use(
-			rest.post(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
-				return res(
-					ctx.status(200),
-					ctx.json({
-						[permission]: true,
-					}),
-				);
-			}),
-		);
-
-		const ComponentWithMultipleProps = ({
-			prop1,
-			prop2,
-			prop3,
-		}: {
-			prop1: string;
-			prop2: number;
-			prop3: boolean;
-		}): ReactElement => (
-			<div>
-				{prop1} - {prop2} - {prop3.toString()}
-			</div>
-		);
-
-		const GuardedComponent = createGuardedRoute(
-			ComponentWithMultipleProps,
-			'read',
-			'dashboard:*',
-		);
-
-		const mockMatch = {
-			params: {},
-			isExact: true,
-			path: '/dashboard',
-			url: '/dashboard',
-		};
-
-		const props = {
-			prop1: 'value1',
-			prop2: 42,
-			prop3: true,
-			match: mockMatch,
-			location: ({} as unknown) as RouteComponentProps['location'],
-			history: ({} as unknown) as RouteComponentProps['history'],
-		};
-
-		render(<GuardedComponent {...props} />);
-
-		await waitFor(() => {
-			expect(screen.getByText('value1 - 42 - true')).toBeInTheDocument();
-		});
-	});
-
-	it('should memoize resolved object based on route params', async () => {
-		const permission1 = buildPermission('read', 'dashboard:123');
-		const permission2 = buildPermission('read', 'dashboard:456');
-
-		let requestCount = 0;
-		const requestedPermissions: string[] = [];
-
-		server.use(
-			rest.post(`${BASE_URL}/api/v1/permissions/check`, (req, res, ctx) => {
-				requestCount++;
-				const body = req.body as {
-					permissions: Array<{ relation: string; object: string }>;
-				};
-				const perm = body.permissions[0];
-				requestedPermissions.push(`${perm.relation}/${perm.object}`);
-
-				if (perm.object === 'dashboard:123') {
-					return res(
-						ctx.status(200),
-						ctx.json({
-							[permission1]: true,
-						}),
-					);
-				}
-
-				return res(
-					ctx.status(200),
-					ctx.json({
-						[permission2]: true,
-					}),
-				);
-			}),
-		);
-
-		const GuardedComponent = createGuardedRoute(
-			TestComponent,
-			'read',
-			'dashboard:{id}',
-		);
-
-		const mockMatch1 = {
-			params: { id: '123' },
-			isExact: true,
-			path: '/dashboard/:id',
-			url: '/dashboard/123',
-		};
-
-		const props1 = {
-			testProp: 'test-value-1',
-			match: mockMatch1,
-			location: ({} as unknown) as RouteComponentProps['location'],
-			history: ({} as unknown) as RouteComponentProps['history'],
-		};
-
-		const { unmount } = render(<GuardedComponent {...props1} />);
-
-		await waitFor(() => {
-			expect(screen.getByText('Test Component: test-value-1')).toBeInTheDocument();
-		});
-
-		expect(requestCount).toBe(1);
-		expect(requestedPermissions).toContain('read/dashboard:123');
-
-		unmount();
-
-		const mockMatch2 = {
-			params: { id: '456' },
-			isExact: true,
-			path: '/dashboard/:id',
-			url: '/dashboard/456',
-		};
-
-		const props2 = {
-			testProp: 'test-value-2',
-			match: mockMatch2,
-			location: ({} as unknown) as RouteComponentProps['location'],
-			history: ({} as unknown) as RouteComponentProps['history'],
-		};
-
-		render(<GuardedComponent {...props2} />);
-
-		await waitFor(() => {
-			expect(screen.getByText('Test Component: test-value-2')).toBeInTheDocument();
-		});
-
-		expect(requestCount).toBe(2);
-		expect(requestedPermissions).toContain('read/dashboard:456');
-	});
-
-	it('should handle different relation types', async () => {
-		const permission = buildPermission('delete', 'dashboard:789');
-
-		server.use(
-			rest.post(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
-				return res(
-					ctx.status(200),
-					ctx.json({
-						[permission]: true,
-					}),
-				);
-			}),
-		);
-
-		const GuardedComponent = createGuardedRoute(
-			TestComponent,
-			'delete',
-			'dashboard:{id}',
-		);
-
-		const mockMatch = {
-			params: { id: '789' },
-			isExact: true,
-			path: '/dashboard/:id',
-			url: '/dashboard/789',
-		};
-
-		const props = {
-			testProp: 'test-value',
-			match: mockMatch,
-			location: ({} as unknown) as RouteComponentProps['location'],
-			history: ({} as unknown) as RouteComponentProps['history'],
-		};
-
-		render(<GuardedComponent {...props} />);
-
-		await waitFor(() => {
-			expect(screen.getByText('Test Component: test-value')).toBeInTheDocument();
-		});
-	});
-});

frontend/src/components/GuardAuthZ/createGuardedRoute.tsx

@@ -1,79 +0,0 @@
-import { ComponentType, ReactElement, useMemo } from 'react';
-import { RouteComponentProps } from 'react-router-dom';
-import { toast } from '@signozhq/sonner';
-import {
-	AuthZObject,
-	AuthZRelation,
-	BrandedPermission,
-} from 'hooks/useAuthZ/utils';
-import { Copy } from 'lucide-react';
-
-import { useCopyToClipboard } from '../../hooks/useCopyToClipboard';
-import ErrorBoundaryFallback from '../../pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
-import AppLoading from '../AppLoading/AppLoading';
-import { GuardAuthZ } from './GuardAuthZ';
-
-import './createGuardedRoute.styles.scss';
-
-const onErrorFallback = (): JSX.Element => <ErrorBoundaryFallback />;
-
-function OnNoPermissionsFallback(response: {
-	requiredPermissionName: BrandedPermission;
-}): ReactElement {
-	const { copyToClipboard } = useCopyToClipboard();
-	const onClickToCopy = (): void => {
-		copyToClipboard(response.requiredPermissionName, 'required-permission');
-
-		toast.success('Permission copied to clipboard');
-	};
-
-	return (
-		<div className="guard-authz-error-no-authz">
-			<div className="guard-authz-error-no-authz-content">
-				<img src="/Icons/no-data.svg" alt="No permission" />
-				<h3>Uh-oh! You don’t have permission to view this page.</h3>
-				<p>
-					You need the following permission to view this page:
-					<br />
-					<pre onClick={onClickToCopy}>
-						{response.requiredPermissionName} <Copy size={12} />
-					</pre>
-					Ask your SigNoz administrator to grant access.
-				</p>
-			</div>
-		</div>
-	);
-}
-
-// eslint-disable-next-line @typescript-eslint/ban-types
-export function createGuardedRoute<P extends object, R extends AuthZRelation>(
-	Component: ComponentType<P>,
-	relation: R,
-	object: AuthZObject<R>,
-): ComponentType<P & RouteComponentProps<Record<string, string>>> {
-	return function GuardedRouteComponent(
-		props: P & RouteComponentProps<Record<string, string>>,
-	): ReactElement {
-		const resolvedObject = useMemo(() => {
-			const paramPattern = /\{([^}]+)\}/g;
-			return object.replace(paramPattern, (match, paramName) => {
-				const paramValue = props.match?.params?.[paramName];
-				return paramValue !== undefined ? paramValue : match;
-			}) as AuthZObject<R>;
-		}, [props.match?.params]);
-
-		return (
-			<GuardAuthZ
-				relation={relation}
-				object={resolvedObject}
-				fallbackOnLoading={<AppLoading />}
-				fallbackOnError={onErrorFallback}
-				fallbackOnNoPermissions={(response): ReactElement => (
-					<OnNoPermissionsFallback {...response} />
-				)}
-			>
-				<Component {...props} />
-			</GuardAuthZ>
-		);
-	};
-}

frontend/src/components/GuardAuthZ/index.ts

@@ -1,3 +0,0 @@
-export { createGuardedRoute } from './createGuardedRoute';
-export type { GuardAuthZProps } from './GuardAuthZ';
-export { GuardAuthZ } from './GuardAuthZ';

frontend/src/components/LogDetail/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable sonarjs/cognitive-complexity */
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useCopyToClipboard, useLocation } from 'react-use';
 import { Color, Spacing } from '@signozhq/design-tokens';
@@ -214,7 +214,7 @@ function LogDetailInner({
 	};
 
 	// Go to logs explorer page with the log data
-	const handleOpenInExplorer = (): void => {
+	const handleOpenInExplorer = (e?: React.MouseEvent): void => {
 		const queryParams = {
 			[QueryParams.activeLogId]: `"${log?.id}"`,
 			[QueryParams.startTime]: minTime?.toString() || '',
@@ -227,7 +227,9 @@ function LogDetailInner({
 				),
 			),
 		};
-		safeNavigate(`${ROUTES.LOGS_EXPLORER}?${createQueryParams(queryParams)}`);
+		safeNavigate(`${ROUTES.LOGS_EXPLORER}?${createQueryParams(queryParams)}`, {
+			event: e,
+		});
 	};
 
 	const handleQueryExpressionChange = useCallback(

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/constants.ts

@@ -14,6 +14,6 @@ export const VIEW_TYPES = {
 export const SPAN_ATTRIBUTES = {
 	URL_PATH: 'http.url',
 	RESPONSE_STATUS_CODE: 'response_status_code',
-	SERVER_NAME: 'http_host',
+	SERVER_NAME: 'net.peer.name',
 	SERVER_PORT: 'net.peer.port',
 } as const;

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

@@ -4,7 +4,6 @@ import { rest, server } from 'mocks-server/server';
 import { fireEvent, render, screen, waitFor, within } from 'tests/test-utils';
 import { DataSource } from 'types/common/queryBuilder';
 
-import { SPAN_ATTRIBUTES } from '../Explorer/Domains/DomainDetails/constants';
 import TopErrors from '../Explorer/Domains/DomainDetails/TopErrors';
 import { getTopErrorsQueryPayload } from '../utils';
 
@@ -216,7 +215,7 @@ describe('TopErrors', () => {
 					value: 'true',
 				}),
 				expect.objectContaining({
-					key: expect.objectContaining({ key: SPAN_ATTRIBUTES.SERVER_NAME }),
+					key: expect.objectContaining({ key: 'net.peer.name' }),
 					op: '=',
 					value: 'test-domain',
 				}),

frontend/src/container/ApiMonitoring/utils.tsx

@@ -638,7 +638,7 @@ export const getEndPointsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											key: SPAN_ATTRIBUTES.SERVER_NAME,
-											type: '',
+											type: 'tag',
 										},
 										op: '=',
 										value: domainName,
@@ -685,7 +685,7 @@ export const getEndPointsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											key: SPAN_ATTRIBUTES.SERVER_NAME,
-											type: '',
+											type: 'tag',
 										},
 										op: '=',
 										value: domainName,
@@ -733,7 +733,7 @@ export const getEndPointsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											key: SPAN_ATTRIBUTES.SERVER_NAME,
-											type: '',
+											type: 'tag',
 										},
 										op: '=',
 										value: domainName,
@@ -780,7 +780,7 @@ export const getEndPointsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											key: SPAN_ATTRIBUTES.SERVER_NAME,
-											type: '',
+											type: 'tag',
 										},
 										op: '=',
 										value: domainName,
@@ -1302,7 +1302,7 @@ export const getTopErrorsCoRelationQueryFilters = (
 		{
 			id: 'e8a043b7',
 			key: {
-				key: SPAN_ATTRIBUTES.SERVER_NAME,
+				key: 'net.peer.name',
 				dataType: DataTypes.String,
 				type: '',
 			},
@@ -2198,7 +2198,7 @@ export const getEndPointZeroStateQueryPayload = (
 									key: {
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										dataType: DataTypes.String,
-										type: '',
+										type: 'tag',
 									},
 									op: '=',
 									value: domainName,
@@ -2793,7 +2793,7 @@ export const getStatusCodeBarChartWidgetData = (
 								key: {
 									dataType: DataTypes.String,
 									key: SPAN_ATTRIBUTES.SERVER_NAME,
-									type: '',
+									type: 'tag',
 								},
 								op: '=',
 								value: domainName,

frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx

@@ -70,8 +70,8 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 								</Tag>
 							) : undefined
 						}
-						onClick={(): void => {
-							onSelect(option.selection);
+						onClick={(e): void => {
+							onSelect(option.selection, e);
 						}}
 						data-testid={`alert-type-card-${option.selection}`}
 					>
@@ -108,7 +108,7 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 }
 
 interface SelectAlertTypeProps {
-	onSelect: (typ: AlertTypes) => void;
+	onSelect: (type: AlertTypes, event?: React.MouseEvent) => void;
 }
 
 export default SelectAlertType;

frontend/src/container/CreateAlertV2/Footer/Footer.tsx

@@ -33,9 +33,9 @@ function Footer(): JSX.Element {
 	const { currentQuery } = useQueryBuilder();
 	const { safeNavigate } = useSafeNavigate();
 
-	const handleDiscard = (): void => {
+	const handleDiscard = (e: React.MouseEvent): void => {
 		discardAlertRule();
-		safeNavigate('/alerts');
+		safeNavigate('/alerts', { event: e });
 	};
 
 	const alertValidationMessage = useMemo(

frontend/src/container/DashboardContainer/DashboardDescription/__tests__/DashboardDescription.test.tsx

@@ -161,6 +161,7 @@ describe('Dashboard landing page actions header tests', () => {
 		// Verify navigation was called with correct URL
 		expect(mockSafeNavigate).toHaveBeenCalledWith(
 			'/dashboard?columnKey=updatedAt&order=descend&page=1&search=',
+			expect.objectContaining({ event: expect.any(Object) }),
 		);
 
 		// Ensure the URL contains only essential dashboard list params

frontend/src/container/DashboardContainer/DashboardVariablesSelection/DashboardVariableSelection.styles.scss

@@ -50,10 +50,6 @@
 	}
 
 	.variable-select {
-		.ant-select-selector {
-			overflow-y: hidden !important;
-		}
-
 		.ant-select-item {
 			display: flex;
 			align-items: center;

frontend/src/container/DashboardContainer/components/DashboardHeader/DashboardBreadcrumbs.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import React, { useCallback } from 'react';
 import { Button } from 'antd';
 import ROUTES from 'constants/routes';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
@@ -23,16 +23,19 @@ function DashboardBreadcrumbs(): JSX.Element {
 
 	const { title = '', image = Base64Icons[0] } = selectedData || {};
 
-	const goToListPage = useCallback(() => {
-		const urlParams = new URLSearchParams();
-		urlParams.set('columnKey', listSortOrder.columnKey as string);
-		urlParams.set('order', listSortOrder.order as string);
-		urlParams.set('page', listSortOrder.pagination as string);
-		urlParams.set('search', listSortOrder.search as string);
+	const goToListPage = useCallback(
+		(e?: React.MouseEvent) => {
+			const urlParams = new URLSearchParams();
+			urlParams.set('columnKey', listSortOrder.columnKey as string);
+			urlParams.set('order', listSortOrder.order as string);
+			urlParams.set('page', listSortOrder.pagination as string);
+			urlParams.set('search', listSortOrder.search as string);
 
-		const generatedUrl = `${ROUTES.ALL_DASHBOARD}?${urlParams.toString()}`;
-		safeNavigate(generatedUrl);
-	}, [listSortOrder, safeNavigate]);
+			const generatedUrl = `${ROUTES.ALL_DASHBOARD}?${urlParams.toString()}`;
+			safeNavigate(generatedUrl, { event: e });
+		},
+		[listSortOrder, safeNavigate],
+	);
 
 	return (
 		<div className="dashboard-breadcrumbs">

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

@@ -1,4 +1,3 @@
-import { ExecStats } from 'api/v5/v5';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { getInitialStackedBands } from 'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils';
@@ -55,13 +54,6 @@ export function prepareBarPanelConfig({
 	minTimeScale?: number;
 	maxTimeScale?: number;
 }): UPlotConfigBuilder {
-	const stepIntervals: ExecStats['stepIntervals'] = get(
-		apiResponse,
-		'data.newResult.meta.stepIntervals',
-		{},
-	);
-	const minStepInterval = Math.min(...Object.values(stepIntervals));
-
 	const builder = buildBaseConfig({
 		widget,
 		isDarkMode,
@@ -73,7 +65,12 @@ export function prepareBarPanelConfig({
 		panelType: PANEL_TYPES.BAR,
 		minTimeScale,
 		maxTimeScale,
-		stepInterval: minStepInterval,
+	});
+
+	builder.setCursor({
+		focus: {
+			prox: 1e3,
+		},
 	});
 
 	if (widget.stackedBarChart) {
@@ -81,6 +78,12 @@ export function prepareBarPanelConfig({
 		builder.setBands(getInitialStackedBands(seriesCount));
 	}
 
+	const stepIntervals: Record<string, number> = get(
+		apiResponse,
+		'data.newResult.meta.stepIntervals',
+		{},
+	);
+
 	const seriesList: QueryData[] = apiResponse?.data?.result || [];
 	seriesList.forEach((series) => {
 		const baseLabelName = getLabelName(

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

@@ -1,4 +1,3 @@
-import { ExecStats } from 'api/v5/v5';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import {
@@ -15,7 +14,6 @@ import {
 	VisibilityMode,
 } from 'lib/uPlotV2/config/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import get from 'lodash-es/get';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
@@ -56,13 +54,6 @@ export const prepareUPlotConfig = ({
 	minTimeScale?: number;
 	maxTimeScale?: number;
 }): UPlotConfigBuilder => {
-	const stepIntervals: ExecStats['stepIntervals'] = get(
-		apiResponse,
-		'data.newResult.meta.stepIntervals',
-		{},
-	);
-	const minStepInterval = Math.min(...Object.values(stepIntervals));
-
 	const builder = buildBaseConfig({
 		widget,
 		isDarkMode,
@@ -74,12 +65,9 @@ export const prepareUPlotConfig = ({
 		panelType: PANEL_TYPES.TIME_SERIES,
 		minTimeScale,
 		maxTimeScale,
-		stepInterval: minStepInterval,
 	});
 
-	const seriesList = apiResponse.data?.result || [];
-
-	seriesList.forEach((series) => {
+	apiResponse.data?.result?.forEach((series) => {
 		const baseLabelName = getLabelName(
 			series.metric,
 			series.queryName || '', // query

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

@@ -1,233 +0,0 @@
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { STEP_INTERVAL_MULTIPLIER } from 'lib/uPlotV2/constants';
-import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import uPlot from 'uplot';
-
-import { PanelMode } from '../../types';
-import { buildBaseConfig } from '../baseConfigBuilder';
-
-jest.mock(
-	'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils',
-	() => ({
-		getStoredSeriesVisibility: jest.fn(),
-	}),
-);
-
-jest.mock('lib/uPlotV2/utils', () => ({
-	calculateWidthBasedOnStepInterval: jest.fn(),
-}));
-
-const calculateWidthBasedOnStepIntervalMock = jest.requireMock(
-	'lib/uPlotV2/utils',
-).calculateWidthBasedOnStepInterval as jest.Mock;
-
-jest.mock('lib/uPlotLib/plugins/onClickPlugin', () => ({
-	__esModule: true,
-	default: jest.fn().mockReturnValue({ name: 'onClickPlugin' }),
-}));
-
-const createWidget = (overrides: Partial<Widgets> = {}): Widgets =>
-	({
-		id: 'widget-1',
-		yAxisUnit: 'ms',
-		isLogScale: false,
-		softMin: undefined,
-		softMax: undefined,
-		thresholds: [],
-		...overrides,
-	} as Widgets);
-
-const createApiResponse = (
-	overrides: Partial<MetricRangePayloadProps> = {},
-): MetricRangePayloadProps =>
-	({
-		data: { result: [], resultType: 'matrix', newResult: null },
-		...overrides,
-	} as MetricRangePayloadProps);
-
-const baseProps = {
-	widget: createWidget(),
-	apiResponse: createApiResponse(),
-	isDarkMode: true,
-	panelMode: PanelMode.DASHBOARD_VIEW,
-	panelType: PANEL_TYPES.TIME_SERIES,
-};
-
-describe('buildBaseConfig', () => {
-	it('returns a UPlotConfigBuilder instance', () => {
-		const builder = buildBaseConfig(baseProps);
-
-		expect(builder).toBeDefined();
-		expect(typeof builder.getConfig).toBe('function');
-		expect(typeof builder.getLegendItems).toBe('function');
-	});
-
-	it('configures builder with widgetId and DASHBOARD_VIEW preferences', () => {
-		const builder = buildBaseConfig({
-			...baseProps,
-			panelMode: PanelMode.DASHBOARD_VIEW,
-			widget: createWidget({ id: 'my-widget' }),
-		});
-
-		expect(builder.getWidgetId()).toBe('my-widget');
-		expect(builder.getShouldSaveSelectionPreference()).toBe(true);
-	});
-
-	it('configures builder with IN_MEMORY selection when panelMode is DASHBOARD_EDIT', () => {
-		const builder = buildBaseConfig({
-			...baseProps,
-			panelMode: PanelMode.DASHBOARD_EDIT,
-		});
-
-		expect(builder.getShouldSaveSelectionPreference()).toBe(false);
-		const config = builder.getConfig();
-		expect(config.series).toBeDefined();
-	});
-
-	it('passes stepInterval to builder and cursor prox uses width * multiplier', () => {
-		const stepInterval = 60;
-		const mockWidth = 100;
-		calculateWidthBasedOnStepIntervalMock.mockReturnValue(mockWidth);
-
-		const builder = buildBaseConfig({
-			...baseProps,
-			stepInterval,
-		});
-
-		const config = builder.getConfig();
-		const prox = config.cursor?.hover?.prox;
-		expect(typeof prox).toBe('function');
-
-		const uPlotInstance = {} as uPlot;
-		const proxResult = (prox as (u: uPlot) => number)(uPlotInstance);
-
-		expect(calculateWidthBasedOnStepIntervalMock).toHaveBeenCalledWith({
-			uPlotInstance,
-			stepInterval,
-		});
-		expect(proxResult).toBe(mockWidth * STEP_INTERVAL_MULTIPLIER);
-	});
-
-	it('adds x scale with time config and min/max when provided', () => {
-		const builder = buildBaseConfig({
-			...baseProps,
-			minTimeScale: 1000,
-			maxTimeScale: 2000,
-		});
-
-		const config = builder.getConfig();
-		expect(config.scales?.x).toBeDefined();
-		expect(config.scales?.x?.time).toBe(true);
-		const range = config.scales?.x?.range;
-		expect(Array.isArray(range)).toBe(true);
-		expect((range as [number, number])[0]).toBe(1000);
-	});
-
-	it('configures log scale on y axis when widget.isLogScale is true', () => {
-		const builder = buildBaseConfig({
-			...baseProps,
-			widget: createWidget({ isLogScale: true }),
-		});
-
-		const config = builder.getConfig();
-		expect(config.scales?.y).toBeDefined();
-		expect(config.scales?.y?.log).toBe(10);
-	});
-
-	it('adds onClick plugin when onClick is a function', () => {
-		const onClickPlugin = jest.requireMock('lib/uPlotLib/plugins/onClickPlugin')
-			.default;
-		const onClick = jest.fn();
-
-		buildBaseConfig({
-			...baseProps,
-			onClick,
-			apiResponse: createApiResponse(),
-		});
-
-		expect(onClickPlugin).toHaveBeenCalledWith({
-			onClick,
-			apiResponse: expect.any(Object),
-		});
-	});
-
-	it('does not add onClick plugin when onClick is not a function', () => {
-		const onClickPlugin = jest.requireMock('lib/uPlotLib/plugins/onClickPlugin')
-			.default;
-
-		const builder = buildBaseConfig({
-			...baseProps,
-		});
-
-		const config = builder.getConfig();
-		const plugins = config.plugins ?? [];
-		expect(
-			plugins.some((p) => (p as { name?: string }).name === 'onClickPlugin'),
-		).toBe(false);
-		expect(onClickPlugin).not.toHaveBeenCalled();
-	});
-
-	it('adds thresholds from widget', () => {
-		const builder = buildBaseConfig({
-			...baseProps,
-			widget: createWidget({
-				thresholds: [
-					{
-						thresholdValue: 80,
-						thresholdColor: '#ff0000',
-						thresholdUnit: 'ms',
-						thresholdLabel: 'High',
-					},
-				] as Widgets['thresholds'],
-			}),
-		});
-
-		const config = builder.getConfig();
-		const drawHooks = config.hooks?.draw ?? [];
-		expect(drawHooks.length).toBeGreaterThan(0);
-	});
-
-	it('adds x and y axes with correct scaleKeys and panelType', () => {
-		const builder = buildBaseConfig(baseProps);
-
-		const config = builder.getConfig();
-		expect(config.axes).toHaveLength(2);
-		expect(config.axes?.[0].scale).toBe('x');
-		expect(config.axes?.[1].scale).toBe('y');
-	});
-
-	it('sets tzDate when timezone is provided', () => {
-		const builder = buildBaseConfig({
-			...baseProps,
-			timezone: {
-				name: 'America/New_York',
-				value: 'America/New_York',
-				offset: 'UTC-5',
-				searchIndex: 'America/New_York',
-			},
-		});
-
-		const config = builder.getConfig();
-		expect(config.tzDate).toBeDefined();
-		expect(typeof config.tzDate).toBe('function');
-	});
-
-	it('leaves tzDate undefined when timezone is not provided', () => {
-		const builder = buildBaseConfig(baseProps);
-
-		const config = builder.getConfig();
-		expect(config.tzDate).toBeUndefined();
-	});
-
-	it('register setSelect hook when onDragSelect is provided', () => {
-		const onDragSelect = jest.fn();
-		const builder = buildBaseConfig({
-			...baseProps,
-			onDragSelect,
-		});
-
-		const config = builder.getConfig();
-		expect(config.hooks?.setSelect).toBeDefined();
-	});
-});

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

@@ -26,7 +26,6 @@ export interface BaseConfigBuilderProps {
 	panelType: PANEL_TYPES;
 	minTimeScale?: number;
 	maxTimeScale?: number;
-	stepInterval?: number;
 }
 
 export function buildBaseConfig({
@@ -40,7 +39,6 @@ export function buildBaseConfig({
 	panelType,
 	minTimeScale,
 	maxTimeScale,
-	stepInterval,
 }: BaseConfigBuilderProps): UPlotConfigBuilder {
 	const tzDate = timezone
 		? (timestamp: number): Date =>
@@ -58,7 +56,6 @@ export function buildBaseConfig({
 		].includes(panelMode)
 			? SelectionPreferencesSource.LOCAL_STORAGE
 			: SelectionPreferencesSource.IN_MEMORY,
-		stepInterval,
 	});
 
 	const thresholdOptions: ThresholdsDrawHookOptions = {

frontend/src/container/ErrorDetails/index.tsx

@@ -16,6 +16,7 @@ import { isUndefined } from 'lodash-es';
 import { urlKey } from 'pages/ErrorDetails/utils';
 import { useTimezone } from 'providers/Timezone';
 import { PayloadProps as GetByErrorTypeAndServicePayload } from 'types/api/errors/getByErrorTypeAndService';
+import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { keyToExclude } from './config';
 import { DashedContainer, EditorContainer, EventContainer } from './styles';
@@ -111,14 +112,19 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 			value: errorDetail[key as keyof GetByErrorTypeAndServicePayload],
 		}));
 
-	const onClickTraceHandler = (): void => {
+	const onClickTraceHandler = (event: React.MouseEvent): void => {
 		logEvent('Exception: Navigate to trace detail page', {
 			groupId: errorDetail?.groupID,
 			spanId: errorDetail.spanID,
 			traceId: errorDetail.traceID,
 			exceptionId: errorDetail?.errorId,
 		});
-		history.push(`/trace/${errorDetail.traceID}?spanId=${errorDetail.spanID}`);
+		const path = `/trace/${errorDetail.traceID}?spanId=${errorDetail.spanID}`;
+		if (isModifierKeyPressed(event)) {
+			openInNewTab(path);
+		} else {
+			history.push(path);
+		}
 	};
 
 	const logEventCalledRef = useRef(false);

frontend/src/container/FormAlertRules/index.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQueryClient } from 'react-query';
 import { useSelector } from 'react-redux';
@@ -329,13 +329,18 @@ function FormAlertRules({
 		}
 	}, [alertDef, currentQuery?.queryType, queryOptions]);
 
-	const onCancelHandler = useCallback(() => {
-		urlQuery.delete(QueryParams.compositeQuery);
-		urlQuery.delete(QueryParams.panelTypes);
-		urlQuery.delete(QueryParams.ruleId);
-		urlQuery.delete(QueryParams.relativeTime);
-		safeNavigate(`${ROUTES.LIST_ALL_ALERT}?${urlQuery.toString()}`);
-	}, [safeNavigate, urlQuery]);
+	const onCancelHandler = useCallback(
+		(e?: React.MouseEvent) => {
+			urlQuery.delete(QueryParams.compositeQuery);
+			urlQuery.delete(QueryParams.panelTypes);
+			urlQuery.delete(QueryParams.ruleId);
+			urlQuery.delete(QueryParams.relativeTime);
+			safeNavigate(`${ROUTES.LIST_ALL_ALERT}?${urlQuery.toString()}`, {
+				event: e,
+			});
+		},
+		[safeNavigate, urlQuery],
+	);
 
 	// onQueryCategoryChange handles changes to query category
 	// in state as well as sets additional defaults

frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx

@@ -1,5 +1,11 @@
 /* eslint-disable sonarjs/cognitive-complexity */
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, {
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
 import { useSelector } from 'react-redux';
 import {
 	LoadingOutlined,
@@ -279,9 +285,9 @@ function FullView({
 											<Button
 												className="switch-edit-btn"
 												disabled={response.isFetching || response.isLoading}
-												onClick={(): void => {
+												onClick={(e: React.MouseEvent): void => {
 													if (dashboardEditView) {
-														safeNavigate(dashboardEditView);
+														safeNavigate(dashboardEditView, { event: e });
 													}
 												}}
 											>

frontend/src/container/Home/Home.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable sonarjs/no-duplicate-string */
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useMutation, useQuery } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Popover } from 'antd';
@@ -28,6 +28,7 @@ import { UserPreference } from 'types/api/preferences/preference';
 import { DataSource } from 'types/common/queryBuilder';
 import { USER_ROLES } from 'types/roles';
 import { isIngestionActive } from 'utils/app';
+import { navigateToPage } from 'utils/navigation';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import AlertRules from './AlertRules/AlertRules';
@@ -413,12 +414,12 @@ export default function Home(): JSX.Element {
 											role="button"
 											tabIndex={0}
 											className="active-ingestion-card-actions"
-											onClick={(): void => {
+											onClick={(e: React.MouseEvent): void => {
 												// eslint-disable-next-line sonarjs/no-duplicate-string
 												logEvent('Homepage: Ingestion Active Explore clicked', {
 													source: 'Logs',
 												});
-												history.push(ROUTES.LOGS_EXPLORER);
+												navigateToPage(ROUTES.LOGS_EXPLORER, history.push, e);
 											}}
 											onKeyDown={(e): void => {
 												if (e.key === 'Enter') {
@@ -455,11 +456,11 @@ export default function Home(): JSX.Element {
 											className="active-ingestion-card-actions"
 											role="button"
 											tabIndex={0}
-											onClick={(): void => {
+											onClick={(e: React.MouseEvent): void => {
 												logEvent('Homepage: Ingestion Active Explore clicked', {
 													source: 'Traces',
 												});
-												history.push(ROUTES.TRACES_EXPLORER);
+												navigateToPage(ROUTES.TRACES_EXPLORER, history.push, e);
 											}}
 											onKeyDown={(e): void => {
 												if (e.key === 'Enter') {
@@ -496,11 +497,11 @@ export default function Home(): JSX.Element {
 											className="active-ingestion-card-actions"
 											role="button"
 											tabIndex={0}
-											onClick={(): void => {
+											onClick={(e: React.MouseEvent): void => {
 												logEvent('Homepage: Ingestion Active Explore clicked', {
 													source: 'Metrics',
 												});
-												history.push(ROUTES.METRICS_EXPLORER);
+												navigateToPage(ROUTES.METRICS_EXPLORER, history.push, e);
 											}}
 											onKeyDown={(e): void => {
 												if (e.key === 'Enter') {
@@ -550,11 +551,11 @@ export default function Home(): JSX.Element {
 												type="default"
 												className="periscope-btn secondary"
 												icon={<Wrench size={14} />}
-												onClick={(): void => {
+												onClick={(e: React.MouseEvent): void => {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Logs',
 													});
-													history.push(ROUTES.LOGS_EXPLORER);
+													navigateToPage(ROUTES.LOGS_EXPLORER, history.push, e);
 												}}
 											>
 												Open Logs Explorer
@@ -564,11 +565,11 @@ export default function Home(): JSX.Element {
 												type="default"
 												className="periscope-btn secondary"
 												icon={<Wrench size={14} />}
-												onClick={(): void => {
+												onClick={(e: React.MouseEvent): void => {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Traces',
 													});
-													history.push(ROUTES.TRACES_EXPLORER);
+													navigateToPage(ROUTES.TRACES_EXPLORER, history.push, e);
 												}}
 											>
 												Open Traces Explorer
@@ -578,11 +579,11 @@ export default function Home(): JSX.Element {
 												type="default"
 												className="periscope-btn secondary"
 												icon={<Wrench size={14} />}
-												onClick={(): void => {
+												onClick={(e: React.MouseEvent): void => {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Metrics',
 													});
-													history.push(ROUTES.METRICS_EXPLORER_EXPLORER);
+													navigateToPage(ROUTES.METRICS_EXPLORER_EXPLORER, history.push, e);
 												}}
 											>
 												Open Metrics Explorer
@@ -619,11 +620,11 @@ export default function Home(): JSX.Element {
 												type="default"
 												className="periscope-btn secondary"
 												icon={<Plus size={14} />}
-												onClick={(): void => {
+												onClick={(e: React.MouseEvent): void => {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Dashboards',
 													});
-													history.push(ROUTES.ALL_DASHBOARD);
+													navigateToPage(ROUTES.ALL_DASHBOARD, history.push, e);
 												}}
 											>
 												Create dashboard
@@ -661,11 +662,11 @@ export default function Home(): JSX.Element {
 												type="default"
 												className="periscope-btn secondary"
 												icon={<Plus size={14} />}
-												onClick={(): void => {
+												onClick={(e: React.MouseEvent): void => {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Alerts',
 													});
-													history.push(ROUTES.ALERTS_NEW);
+													navigateToPage(ROUTES.ALERTS_NEW, history.push, e);
 												}}
 											>
 												Create an alert

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

@@ -1,4 +1,4 @@
-import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { QueryKey } from 'react-query';
 import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
@@ -116,7 +116,7 @@ const ServicesListTable = memo(
 		onRowClick,
 	}: {
 		services: ServicesList[];
-		onRowClick: (record: ServicesList) => void;
+		onRowClick: (record: ServicesList, event: React.MouseEvent) => void;
 	}): JSX.Element => (
 		<div className="services-list-container home-data-item-container metrics-services-list">
 			<div className="services-list">
@@ -125,8 +125,8 @@ const ServicesListTable = memo(
 					dataSource={services}
 					pagination={false}
 					className="services-table"
-					onRow={(record): { onClick: () => void } => ({
-						onClick: (): void => onRowClick(record),
+					onRow={(record: ServicesList): Record<string, unknown> => ({
+						onClick: (event: React.MouseEvent): void => onRowClick(record, event),
 					})}
 				/>
 			</div>
@@ -284,11 +284,11 @@ function ServiceMetrics({
 	}, [onUpdateChecklistDoneItem, loadingUserPreferences, servicesExist]);
 
 	const handleRowClick = useCallback(
-		(record: ServicesList) => {
+		(record: ServicesList, event: React.MouseEvent) => {
 			logEvent('Homepage: Service clicked', {
 				serviceName: record.serviceName,
 			});
-			safeNavigate(`${ROUTES.APPLICATION}/${record.serviceName}`);
+			safeNavigate(`${ROUTES.APPLICATION}/${record.serviceName}`, { event });
 		},
 		[safeNavigate],
 	);

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { Button, Select, Skeleton, Table } from 'antd';
@@ -172,13 +172,13 @@ export default function ServiceTraces({
 						dataSource={top5Services}
 						pagination={false}
 						className="services-table"
-						onRow={(record): { onClick: () => void } => ({
-							onClick: (): void => {
+						onRow={(record: ServicesList): Record<string, unknown> => ({
+							onClick: (event: React.MouseEvent): void => {
 								logEvent('Homepage: Service clicked', {
 									serviceName: record.serviceName,
 								});
 
-								safeNavigate(`${ROUTES.APPLICATION}/${record.serviceName}`);
+								safeNavigate(`${ROUTES.APPLICATION}/${record.serviceName}`, { event });
 							},
 						})}
 					/>

frontend/src/container/InfraMonitoringHosts/HostsListTable.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { LoadingOutlined } from '@ant-design/icons';
 import {
 	Skeleton,
@@ -11,6 +11,7 @@ import {
 import { SorterResult } from 'antd/es/table/interface';
 import logEvent from 'api/common/logEvent';
 import { InfraMonitoringEvents } from 'constants/events';
+import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import HostsEmptyOrIncorrectMetrics from './HostsEmptyOrIncorrectMetrics';
 import {
@@ -76,7 +77,16 @@ export default function HostsListTable({
 		[],
 	);
 
-	const handleRowClick = (record: HostRowData): void => {
+	const handleRowClick = (
+		record: HostRowData,
+		event: React.MouseEvent,
+	): void => {
+		if (isModifierKeyPressed(event)) {
+			const params = new URLSearchParams(window.location.search);
+			params.set('hostName', record.hostName);
+			openInNewTab(`${window.location.pathname}?${params.toString()}`);
+			return;
+		}
 		onHostClick(record.hostName);
 		logEvent(InfraMonitoringEvents.ItemClicked, {
 			entity: InfraMonitoringEvents.HostEntity,
@@ -180,8 +190,8 @@ export default function HostsListTable({
 			tableLayout="fixed"
 			rowKey={(record): string => record.hostName}
 			onChange={handleTableChange}
-			onRow={(record): { onClick: () => void; className: string } => ({
-				onClick: (): void => handleRowClick(record),
+			onRow={(record: HostRowData): Record<string, unknown> => ({
+				onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
 				className: 'clickable-row',
 			})}
 		/>

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

@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -24,6 +24,7 @@ import { ChevronDown, ChevronRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
@@ -451,7 +452,19 @@ function K8sClustersList({
 		);
 	}, [selectedClusterName, groupBy.length, clustersData, nestedClustersData]);
 
-	const handleRowClick = (record: K8sClustersRowData): void => {
+	const handleRowClick = (
+		record: K8sClustersRowData,
+		event: React.MouseEvent,
+	): void => {
+		if (event && isModifierKeyPressed(event)) {
+			const newParams = new URLSearchParams(searchParams);
+			newParams.set(
+				INFRA_MONITORING_K8S_PARAMS_KEYS.CLUSTER_NAME,
+				record.clusterUID,
+			);
+			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
+			return;
+		}
 		if (groupBy.length === 0) {
 			setSelectedRowData(null);
 			setselectedClusterName(record.clusterUID);
@@ -515,8 +528,19 @@ function K8sClustersList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
-						onRow={(record): { onClick: () => void; className: string } => ({
-							onClick: (): void => {
+						onRow={(
+							record,
+						): { onClick: (event: React.MouseEvent) => void; className: string } => ({
+							onClick: (event: React.MouseEvent): void => {
+								if (event && isModifierKeyPressed(event)) {
+									const newParams = new URLSearchParams(searchParams);
+									newParams.set(
+										INFRA_MONITORING_K8S_PARAMS_KEYS.CLUSTER_NAME,
+										record.clusterUID,
+									);
+									openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
+									return;
+								}
 								setselectedClusterName(record.clusterUID);
 							},
 							className: 'expanded-clickable-row',
@@ -707,8 +731,10 @@ function K8sClustersList({
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}
-				onRow={(record): { onClick: () => void; className: string } => ({
-					onClick: (): void => handleRowClick(record),
+				onRow={(
+					record,
+				): { onClick: (event: React.MouseEvent) => void; className: string } => ({
+					onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
 					className: 'clickable-row',
 				})}
 				expandable={{

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

@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -25,6 +25,7 @@ import { ChevronDown, ChevronRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
@@ -457,7 +458,19 @@ function K8sDaemonSetsList({
 		nestedDaemonSetsData,
 	]);
 
-	const handleRowClick = (record: K8sDaemonSetsRowData): void => {
+	const handleRowClick = (
+		record: K8sDaemonSetsRowData,
+		event?: React.MouseEvent,
+	): void => {
+		if (event && isModifierKeyPressed(event)) {
+			const newParams = new URLSearchParams(searchParams);
+			newParams.set(
+				INFRA_MONITORING_K8S_PARAMS_KEYS.DAEMONSET_UID,
+				record.daemonsetUID,
+			);
+			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
+			return;
+		}
 		if (groupBy.length === 0) {
 			setSelectedRowData(null);
 			setSelectedDaemonSetUID(record.daemonsetUID);
@@ -521,8 +534,19 @@ function K8sDaemonSetsList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
-						onRow={(record): { onClick: () => void; className: string } => ({
-							onClick: (): void => {
+						onRow={(
+							record,
+						): { onClick: (event: React.MouseEvent) => void; className: string } => ({
+							onClick: (event: React.MouseEvent): void => {
+								if (event && isModifierKeyPressed(event)) {
+									const newParams = new URLSearchParams(searchParams);
+									newParams.set(
+										INFRA_MONITORING_K8S_PARAMS_KEYS.DAEMONSET_UID,
+										record.daemonsetUID,
+									);
+									openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
+									return;
+								}
 								setSelectedDaemonSetUID(record.daemonsetUID);
 							},
 							className: 'expanded-clickable-row',
@@ -715,8 +739,10 @@ function K8sDaemonSetsList({
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}
-				onRow={(record): { onClick: () => void; className: string } => ({
-					onClick: (): void => handleRowClick(record),
+				onRow={(
+					record,
+				): { onClick: (event: React.MouseEvent) => void; className: string } => ({
+					onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
 					className: 'clickable-row',
 				})}
 				expandable={{

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

@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -25,6 +25,7 @@ import { ChevronDown, ChevronRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
@@ -463,7 +464,19 @@ function K8sDeploymentsList({
 		nestedDeploymentsData,
 	]);
 
-	const handleRowClick = (record: K8sDeploymentsRowData): void => {
+	const handleRowClick = (
+		record: K8sDeploymentsRowData,
+		event?: React.MouseEvent,
+	): void => {
+		if (event && isModifierKeyPressed(event)) {
+			const newParams = new URLSearchParams(searchParams);
+			newParams.set(
+				INFRA_MONITORING_K8S_PARAMS_KEYS.DEPLOYMENT_UID,
+				record.deploymentUID,
+			);
+			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
+			return;
+		}
 		if (groupBy.length === 0) {
 			setSelectedRowData(null);
 			setselectedDeploymentUID(record.deploymentUID);
@@ -527,8 +540,19 @@ function K8sDeploymentsList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
-						onRow={(record): { onClick: () => void; className: string } => ({
-							onClick: (): void => {
+						onRow={(
+							record,
+						): { onClick: (event: React.MouseEvent) => void; className: string } => ({
+							onClick: (event: React.MouseEvent): void => {
+								if (event && isModifierKeyPressed(event)) {
+									const newParams = new URLSearchParams(searchParams);
+									newParams.set(
+										INFRA_MONITORING_K8S_PARAMS_KEYS.DEPLOYMENT_UID,
+										record.deploymentUID,
+									);
+									openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
+									return;
+								}
 								setselectedDeploymentUID(record.deploymentUID);
 							},
 							className: 'expanded-clickable-row',
@@ -722,8 +746,10 @@ function K8sDeploymentsList({
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}
-				onRow={(record): { onClick: () => void; className: string } => ({
-					onClick: (): void => handleRowClick(record),
+				onRow={(
+					record,
+				): { onClick: (event: React.MouseEvent) => void; className: string } => ({
+					onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
 					className: 'clickable-row',
 				})}
 				expandable={{

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

@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -25,6 +25,7 @@ import { ChevronDown, ChevronRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
@@ -428,7 +429,16 @@ function K8sJobsList({
 		return jobsData.find((job) => job.jobName === selectedJobUID) || null;
 	}, [selectedJobUID, groupBy.length, jobsData, nestedJobsData]);
 
-	const handleRowClick = (record: K8sJobsRowData): void => {
+	const handleRowClick = (
+		record: K8sJobsRowData,
+		event: React.MouseEvent,
+	): void => {
+		if (event && isModifierKeyPressed(event)) {
+			const newParams = new URLSearchParams(searchParams);
+			newParams.set(INFRA_MONITORING_K8S_PARAMS_KEYS.JOB_UID, record.jobUID);
+			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
+			return;
+		}
 		if (groupBy.length === 0) {
 			setSelectedRowData(null);
 			setselectedJobUID(record.jobUID);
@@ -492,8 +502,16 @@ function K8sJobsList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
-						onRow={(record): { onClick: () => void; className: string } => ({
-							onClick: (): void => {
+						onRow={(
+							record,
+						): { onClick: (event: React.MouseEvent) => void; className: string } => ({
+							onClick: (event: React.MouseEvent): void => {
+								if (event && isModifierKeyPressed(event)) {
+									const newParams = new URLSearchParams(searchParams);
+									newParams.set(INFRA_MONITORING_K8S_PARAMS_KEYS.JOB_UID, record.jobUID);
+									openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
+									return;
+								}
 								setselectedJobUID(record.jobUID);
 							},
 							className: 'expanded-clickable-row',
@@ -684,8 +702,10 @@ function K8sJobsList({
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}
-				onRow={(record): { onClick: () => void; className: string } => ({
-					onClick: (): void => handleRowClick(record),
+				onRow={(
+					record,
+				): { onClick: (event: React.MouseEvent) => void; className: string } => ({
+					onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
 					className: 'clickable-row',
 				})}
 				expandable={{

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

@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -24,6 +24,7 @@ import { ChevronDown, ChevronRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
@@ -459,7 +460,19 @@ function K8sNamespacesList({
 		nestedNamespacesData,
 	]);
 
-	const handleRowClick = (record: K8sNamespacesRowData): void => {
+	const handleRowClick = (
+		record: K8sNamespacesRowData,
+		event: React.MouseEvent,
+	): void => {
+		if (event && isModifierKeyPressed(event)) {
+			const newParams = new URLSearchParams(searchParams);
+			newParams.set(
+				INFRA_MONITORING_K8S_PARAMS_KEYS.NAMESPACE_UID,
+				record.namespaceUID,
+			);
+			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
+			return;
+		}
 		if (groupBy.length === 0) {
 			setSelectedRowData(null);
 			setselectedNamespaceUID(record.namespaceUID);
@@ -523,8 +536,19 @@ function K8sNamespacesList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
-						onRow={(record): { onClick: () => void; className: string } => ({
-							onClick: (): void => {
+						onRow={(
+							record,
+						): { onClick: (event: React.MouseEvent) => void; className: string } => ({
+							onClick: (event: React.MouseEvent): void => {
+								if (isModifierKeyPressed(event)) {
+									const newParams = new URLSearchParams(searchParams);
+									newParams.set(
+										INFRA_MONITORING_K8S_PARAMS_KEYS.NAMESPACE_UID,
+										record.namespaceUID,
+									);
+									openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
+									return;
+								}
 								setselectedNamespaceUID(record.namespaceUID);
 							},
 							className: 'expanded-clickable-row',
@@ -716,8 +740,10 @@ function K8sNamespacesList({
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}
-				onRow={(record): { onClick: () => void; className: string } => ({
-					onClick: (): void => handleRowClick(record),
+				onRow={(
+					record,
+				): { onClick: (event: React.MouseEvent) => void; className: string } => ({
+					onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
 					className: 'clickable-row',
 				})}
 				expandable={{

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

@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -24,6 +24,7 @@ import { ChevronDown, ChevronRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
@@ -438,7 +439,16 @@ function K8sNodesList({
 		return nodesData.find((node) => node.nodeUID === selectedNodeUID) || null;
 	}, [selectedNodeUID, groupBy.length, nodesData, nestedNodesData]);
 
-	const handleRowClick = (record: K8sNodesRowData): void => {
+	const handleRowClick = (
+		record: K8sNodesRowData,
+		event: React.MouseEvent,
+	): void => {
+		if (event && isModifierKeyPressed(event)) {
+			const newParams = new URLSearchParams(searchParams);
+			newParams.set(INFRA_MONITORING_K8S_PARAMS_KEYS.NODE_UID, record.nodeUID);
+			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
+			return;
+		}
 		if (groupBy.length === 0) {
 			setSelectedRowData(null);
 			setSelectedNodeUID(record.nodeUID);
@@ -503,8 +513,19 @@ function K8sNodesList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
-						onRow={(record): { onClick: () => void; className: string } => ({
-							onClick: (): void => {
+						onRow={(
+							record,
+						): { onClick: (event: React.MouseEvent) => void; className: string } => ({
+							onClick: (event: React.MouseEvent): void => {
+								if (isModifierKeyPressed(event)) {
+									const newParams = new URLSearchParams(searchParams);
+									newParams.set(
+										INFRA_MONITORING_K8S_PARAMS_KEYS.NODE_UID,
+										record.nodeUID,
+									);
+									openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
+									return;
+								}
 								setSelectedNodeUID(record.nodeUID);
 							},
 							className: 'expanded-clickable-row',
@@ -695,8 +716,10 @@ function K8sNodesList({
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}
-				onRow={(record): { onClick: () => void; className: string } => ({
-					onClick: (): void => handleRowClick(record),
+				onRow={(
+					record,
+				): { onClick: (event: React.MouseEvent) => void; className: string } => ({
+					onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
 					className: 'clickable-row',
 				})}
 				expandable={{

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

@@ -1,5 +1,5 @@
 /* eslint-disable no-restricted-syntax */
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -26,6 +26,7 @@ import { ChevronDown, ChevronRight, CornerDownRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
@@ -495,7 +496,16 @@ function K8sPodsList({
 		}
 	}, [selectedRowData, fetchGroupedByRowData]);
 
-	const handleRowClick = (record: K8sPodsRowData): void => {
+	const handleRowClick = (
+		record: K8sPodsRowData,
+		event: React.MouseEvent,
+	): void => {
+		if (event && isModifierKeyPressed(event)) {
+			const newParams = new URLSearchParams(searchParams);
+			newParams.set(INFRA_MONITORING_K8S_PARAMS_KEYS.POD_UID, record.podUID);
+			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
+			return;
+		}
 		if (groupBy.length === 0) {
 			setSelectedPodUID(record.podUID);
 			setSearchParams({
@@ -615,8 +625,14 @@ function K8sPodsList({
 							spinning: isFetchingGroupedByRowData || isLoadingGroupedByRowData,
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
-						onRow={(record): { onClick: () => void; className: string } => ({
-							onClick: (): void => {
+						onRow={(record: K8sPodsRowData): Record<string, unknown> => ({
+							onClick: (event: React.MouseEvent): void => {
+								if (isModifierKeyPressed(event)) {
+									const newParams = new URLSearchParams(searchParams);
+									newParams.set(INFRA_MONITORING_K8S_PARAMS_KEYS.POD_UID, record.podUID);
+									openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
+									return;
+								}
 								setSelectedPodUID(record.podUID);
 							},
 							className: 'expanded-clickable-row',
@@ -752,8 +768,8 @@ function K8sPodsList({
 				scroll={{ x: true }}
 				tableLayout="fixed"
 				onChange={handleTableChange}
-				onRow={(record): { onClick: () => void; className: string } => ({
-					onClick: (): void => handleRowClick(record),
+				onRow={(record: K8sPodsRowData): Record<string, unknown> => ({
+					onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
 					className: 'clickable-row',
 				})}
 				expandable={{

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

@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -25,6 +25,7 @@ import { ChevronDown, ChevronRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
@@ -460,7 +461,19 @@ function K8sStatefulSetsList({
 		nestedStatefulSetsData,
 	]);
 
-	const handleRowClick = (record: K8sStatefulSetsRowData): void => {
+	const handleRowClick = (
+		record: K8sStatefulSetsRowData,
+		event: React.MouseEvent,
+	): void => {
+		if (event && isModifierKeyPressed(event)) {
+			const newParams = new URLSearchParams(searchParams);
+			newParams.set(
+				INFRA_MONITORING_K8S_PARAMS_KEYS.STATEFULSET_UID,
+				record.statefulsetUID,
+			);
+			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
+			return;
+		}
 		if (groupBy.length === 0) {
 			setSelectedRowData(null);
 			setselectedStatefulSetUID(record.statefulsetUID);
@@ -524,8 +537,19 @@ function K8sStatefulSetsList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
-						onRow={(record): { onClick: () => void; className: string } => ({
-							onClick: (): void => {
+						onRow={(
+							record,
+						): { onClick: (event: React.MouseEvent) => void; className: string } => ({
+							onClick: (event: React.MouseEvent): void => {
+								if (event && isModifierKeyPressed(event)) {
+									const newParams = new URLSearchParams(searchParams);
+									newParams.set(
+										INFRA_MONITORING_K8S_PARAMS_KEYS.STATEFULSET_UID,
+										record.statefulsetUID,
+									);
+									openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
+									return;
+								}
 								setselectedStatefulSetUID(record.statefulsetUID);
 							},
 							className: 'expanded-clickable-row',
@@ -718,8 +742,8 @@ function K8sStatefulSetsList({
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}
-				onRow={(record): { onClick: () => void; className: string } => ({
-					onClick: (): void => handleRowClick(record),
+				onRow={(record) => ({
+					onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
 					className: 'clickable-row',
 				})}
 				expandable={{

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

@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -25,6 +25,7 @@ import { ChevronDown, ChevronRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
@@ -390,7 +391,16 @@ function K8sVolumesList({
 		);
 	}, [selectedVolumeUID, volumesData, groupBy.length, nestedVolumesData]);
 
-	const handleRowClick = (record: K8sVolumesRowData): void => {
+	const handleRowClick = (
+		record: K8sVolumesRowData,
+		event: React.MouseEvent,
+	): void => {
+		if (event && isModifierKeyPressed(event)) {
+			const newParams = new URLSearchParams(searchParams);
+			newParams.set(INFRA_MONITORING_K8S_PARAMS_KEYS.VOLUME_UID, record.volumeUID);
+			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
+			return;
+		}
 		if (groupBy.length === 0) {
 			setSelectedRowData(null);
 			setselectedVolumeUID(record.volumeUID);
@@ -454,8 +464,19 @@ function K8sVolumesList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
-						onRow={(record): { onClick: () => void; className: string } => ({
-							onClick: (): void => {
+						onRow={(
+							record,
+						): { onClick: (event: React.MouseEvent) => void; className: string } => ({
+							onClick: (event: React.MouseEvent): void => {
+								if (event && isModifierKeyPressed(event)) {
+									const newParams = new URLSearchParams(searchParams);
+									newParams.set(
+										INFRA_MONITORING_K8S_PARAMS_KEYS.VOLUME_UID,
+										record.volumeUID,
+									);
+									openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
+									return;
+								}
 								setselectedVolumeUID(record.volumeUID);
 							},
 							className: 'expanded-clickable-row',
@@ -641,8 +662,10 @@ function K8sVolumesList({
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}
-				onRow={(record): { onClick: () => void; className: string } => ({
-					onClick: (): void => handleRowClick(record),
+				onRow={(
+					record,
+				): { onClick: (event: React.MouseEvent) => void; className: string } => ({
+					onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
 					className: 'clickable-row',
 				})}
 				expandable={{

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

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { PlusOutlined } from '@ant-design/icons';
 import { Button, Divider, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
@@ -7,6 +7,7 @@ import useComponentPermission from 'hooks/useComponentPermission';
 import history from 'lib/history';
 import { useAppContext } from 'providers/App/App';
 import { DataSource } from 'types/common/queryBuilder';
+import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import AlertInfoCard from './AlertInfoCard';
 import { ALERT_CARDS, ALERT_INFO_LINKS } from './alertLinks';
@@ -36,9 +37,13 @@ export function AlertsEmptyState(): JSX.Element {
 
 	const [loading, setLoading] = useState(false);
 
-	const onClickNewAlertHandler = useCallback(() => {
+	const onClickNewAlertHandler = useCallback((e: React.MouseEvent) => {
 		setLoading(false);
-		history.push(ROUTES.ALERTS_NEW);
+		if (isModifierKeyPressed(e)) {
+			openInNewTab(ROUTES.ALERTS_NEW);
+		} else {
+			history.push(ROUTES.ALERTS_NEW);
+		}
 	}, []);
 
 	return (

frontend/src/container/ListAlertRules/ListAlert.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/display-name */
-import { useCallback, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { UseQueryResult } from 'react-query';
 import { PlusOutlined } from '@ant-design/icons';
@@ -100,16 +100,22 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 		});
 	}, [notificationsApi, t]);
 
-	const onClickNewAlertHandler = useCallback(() => {
-		logEvent('Alert: New alert button clicked', {
-			number: allAlertRules?.length,
-			layout: 'new',
-		});
-		safeNavigate(ROUTES.ALERT_TYPE_SELECTION);
+	const onClickNewAlertHandler = useCallback(
+		(e: React.MouseEvent): void => {
+			logEvent('Alert: New alert button clicked', {
+				number: allAlertRules?.length,
+				layout: 'new',
+			});
+			safeNavigate(ROUTES.ALERT_TYPE_SELECTION, { event: e });
+		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
+		[],
+	);
 
-	const onEditHandler = (record: GettableAlert, openInNewTab: boolean): void => {
+	const onEditHandler = (
+		record: GettableAlert,
+		options?: { event?: React.MouseEvent; newTab?: boolean },
+	): void => {
 		const compositeQuery = sanitizeDefaultAlertQuery(
 			mapQueryDataFromApi(record.condition.compositeQuery),
 			record.alertType as AlertTypes,
@@ -125,11 +131,10 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 
 		setEditLoader(false);
 
-		if (openInNewTab) {
-			window.open(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`, '_blank');
-		} else {
-			safeNavigate(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`);
-		}
+		safeNavigate(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`, {
+			event: options?.event,
+			newTab: options?.newTab,
+		});
 	};
 
 	const onCloneHandler = (
@@ -266,7 +271,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 				const onClickHandler = (e: React.MouseEvent<HTMLElement>): void => {
 					e.stopPropagation();
 					e.preventDefault();
-					onEditHandler(record, e.metaKey || e.ctrlKey);
+					onEditHandler(record, { event: e });
 				};
 
 				return <Typography.Link onClick={onClickHandler}>{value}</Typography.Link>;
@@ -331,7 +336,9 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 							/>,
 							<ColumnButton
 								key="2"
-								onClick={(): void => onEditHandler(record, false)}
+								onClick={(e: React.MouseEvent): void =>
+									onEditHandler(record, { event: e })
+								}
 								type="link"
 								loading={editLoader}
 							>
@@ -339,7 +346,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 							</ColumnButton>,
 							<ColumnButton
 								key="3"
-								onClick={(): void => onEditHandler(record, true)}
+								onClick={(): void => onEditHandler(record, { newTab: true })}
 								type="link"
 								loading={editLoader}
 							>

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -416,11 +416,7 @@ function DashboardsList(): JSX.Element {
 
 				const onClickHandler = (event: React.MouseEvent<HTMLElement>): void => {
 					event.stopPropagation();
-					if (event.metaKey || event.ctrlKey) {
-						window.open(getLink(), '_blank');
-					} else {
-						safeNavigate(getLink());
-					}
+					safeNavigate(getLink(), { event });
 					logEvent('Dashboard List: Clicked on dashboard', {
 						dashboardId: dashboard.id,
 						dashboardName: dashboard.name,

frontend/src/container/MetricsApplication/Tabs/Overview.tsx

@@ -31,6 +31,7 @@ import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 import { secondsToMilliseconds } from 'utils/timeUtils';
 import { v4 as uuid } from 'uuid';
 
@@ -235,7 +236,7 @@ function Application(): JSX.Element {
 			timestamp: number,
 			apmToTraceQuery: Query,
 			isViewLogsClicked?: boolean,
-		): (() => void) => (): void => {
+		): ((e: React.MouseEvent) => void) => (e: React.MouseEvent): void => {
 			const endTime = secondsToMilliseconds(timestamp);
 			const startTime = secondsToMilliseconds(timestamp - stepInterval);
 
@@ -259,7 +260,11 @@ function Application(): JSX.Element {
 				queryString,
 			);
 
-			history.push(newPath);
+			if (isModifierKeyPressed(e)) {
+				openInNewTab(newPath);
+			} else {
+				history.push(newPath);
+			}
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[stepInterval],

frontend/src/container/MetricsApplication/Tabs/Overview/GraphControlsPanel/GraphControlsPanel.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
 import { Binoculars, DraftingCompass, ScrollText } from 'lucide-react';
@@ -6,9 +7,9 @@ import './GraphControlsPanel.styles.scss';
 
 interface GraphControlsPanelProps {
 	id: string;
-	onViewLogsClick?: () => void;
-	onViewTracesClick: () => void;
-	onViewAPIMonitoringClick?: () => void;
+	onViewLogsClick?: (e: React.MouseEvent) => void;
+	onViewTracesClick: (e: React.MouseEvent) => void;
+	onViewAPIMonitoringClick?: (e: React.MouseEvent) => void;
 }
 
 function GraphControlsPanel({

frontend/src/container/MetricsApplication/Tabs/util.ts

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useMemo, useRef } from 'react';
+import React, { Dispatch, SetStateAction, useMemo, useRef } from 'react';
 import { QueryParams } from 'constants/query';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
@@ -42,7 +42,10 @@ interface OnViewTracePopupClickProps {
 	apmToTraceQuery: Query;
 	isViewLogsClicked?: boolean;
 	stepInterval?: number;
-	safeNavigate: (url: string) => void;
+	safeNavigate: (
+		url: string,
+		options?: { event?: React.MouseEvent | MouseEvent },
+	) => void;
 }
 
 interface OnViewAPIMonitoringPopupClickProps {
@@ -51,8 +54,10 @@ interface OnViewAPIMonitoringPopupClickProps {
 	stepInterval?: number;
 	domainName: string;
 	isError: boolean;
-
-	safeNavigate: (url: string) => void;
+	safeNavigate: (
+		url: string,
+		options?: { event?: React.MouseEvent | MouseEvent },
+	) => void;
 }
 
 export function generateExplorerPath(
@@ -93,8 +98,8 @@ export function onViewTracePopupClick({
 	isViewLogsClicked,
 	stepInterval,
 	safeNavigate,
-}: OnViewTracePopupClickProps): VoidFunction {
-	return (): void => {
+}: OnViewTracePopupClickProps): (e?: React.MouseEvent) => void {
+	return (e?: React.MouseEvent): void => {
 		const endTime = secondsToMilliseconds(timestamp);
 		const startTime = secondsToMilliseconds(timestamp - (stepInterval || 60));
 
@@ -118,7 +123,7 @@ export function onViewTracePopupClick({
 			queryString,
 		);
 
-		safeNavigate(newPath);
+		safeNavigate(newPath, { event: e });
 	};
 }
 
@@ -149,8 +154,8 @@ export function onViewAPIMonitoringPopupClick({
 	isError,
 	stepInterval,
 	safeNavigate,
-}: OnViewAPIMonitoringPopupClickProps): VoidFunction {
-	return (): void => {
+}: OnViewAPIMonitoringPopupClickProps): (e?: React.MouseEvent) => void {
+	return (e?: React.MouseEvent): void => {
 		const endTime = timestamp + (stepInterval || 60);
 		const startTime = timestamp - (stepInterval || 60);
 		const filters = {
@@ -190,7 +195,7 @@ export function onViewAPIMonitoringPopupClick({
 			filters,
 		);
 
-		safeNavigate(newPath);
+		safeNavigate(newPath, { event: e });
 	};
 }
 

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

@@ -8,6 +8,7 @@ import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import history from 'lib/history';
 import { Bell, Grid } from 'lucide-react';
+import { navigateToPage } from 'utils/navigation';
 
 import { DashboardsAndAlertsPopoverProps } from './types';
 
@@ -25,9 +26,10 @@ function DashboardsAndAlertsPopover({
 				label: (
 					<Typography.Link
 						key={alert.alert_id}
-						onClick={(): void => {
+						onClick={(e): void => {
 							params.set(QueryParams.ruleId, alert.alert_id);
-							history.push(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`);
+							const path = `${ROUTES.ALERT_OVERVIEW}?${params.toString()}`;
+							navigateToPage(path, history.push, e);
 						}}
 						className="dashboards-popover-content-item"
 					>
@@ -55,11 +57,12 @@ function DashboardsAndAlertsPopover({
 				label: (
 					<Typography.Link
 						key={dashboard.dashboard_id}
-						onClick={(): void => {
+						onClick={(e): void => {
 							safeNavigate(
 								generatePath(ROUTES.DASHBOARD, {
 									dashboardId: dashboard.dashboard_id,
 								}),
+								{ event: e },
 							);
 						}}
 						className="dashboards-popover-content-item"

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

@@ -118,6 +118,7 @@ describe('DashboardsAndAlertsPopover', () => {
 		// Should navigate to the dashboard
 		expect(mockSafeNavigate).toHaveBeenCalledWith(
 			`/dashboard/${mockDashboard1.dashboard_id}`,
+			expect.objectContaining({ event: expect.any(Object) }),
 		);
 	});
 

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

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import React, { useCallback } from 'react';
 import { LoadingOutlined } from '@ant-design/icons';
 import {
 	Spin,
@@ -107,8 +107,9 @@ function MetricsTable({
 					onChange: onPaginationChange,
 					total: totalCount,
 				}}
-				onRow={(record): { onClick: () => void; className: string } => ({
-					onClick: (): void => openMetricDetails(record.key, 'list'),
+				onRow={(record: MetricsListItemRowData): Record<string, unknown> => ({
+					onClick: (event: React.MouseEvent): void =>
+						openMetricDetails(record.key, 'list', event),
 					className: 'clickable-row',
 				})}
 			/>

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

@@ -1,5 +1,5 @@
 /* eslint-disable no-nested-ternary */
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
@@ -14,6 +14,7 @@ import { AppState } from 'store/reducers';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { MetricsExplorerEventKeys, MetricsExplorerEvents } from '../events';
 import InspectModal from '../Inspect';
@@ -209,7 +210,15 @@ function Summary(): JSX.Element {
 	const openMetricDetails = (
 		metricName: string,
 		view: 'list' | 'treemap',
+		event?: React.MouseEvent,
 	): void => {
+		if (event && isModifierKeyPressed(event)) {
+			const newParams = new URLSearchParams(searchParams);
+			newParams.set(IS_METRIC_DETAILS_OPEN_KEY, 'true');
+			newParams.set(SELECTED_METRIC_NAME_KEY, metricName);
+			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
+			return;
+		}
 		setSelectedMetricName(metricName);
 		setIsMetricDetailsOpen(true);
 		setSearchParams({

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

@@ -194,7 +194,11 @@ describe('MetricsTable', () => {
 		);
 
 		fireEvent.click(screen.getByText('Metric 1'));
-		expect(mockOpenMetricDetails).toHaveBeenCalledWith('metric1', 'list');
+		expect(mockOpenMetricDetails).toHaveBeenCalledWith(
+			'metric1',
+			'list',
+			expect.any(Object),
+		);
 	});
 
 	it('calls setOrderBy when column header is clicked', () => {

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

@@ -14,7 +14,11 @@ export interface MetricsTableProps {
 	onPaginationChange: (page: number, pageSize: number) => void;
 	setOrderBy: (orderBy: OrderByPayload) => void;
 	totalCount: number;
-	openMetricDetails: (metricName: string, view: 'list' | 'treemap') => void;
+	openMetricDetails: (
+		metricName: string,
+		view: 'list' | 'treemap',
+		event?: React.MouseEvent,
+	) => void;
 	queryFilters: TagFilter;
 }
 
@@ -28,7 +32,11 @@ export interface MetricsTreemapProps {
 	isLoading: boolean;
 	isError: boolean;
 	viewType: TreemapViewType;
-	openMetricDetails: (metricName: string, view: 'list' | 'treemap') => void;
+	openMetricDetails: (
+		metricName: string,
+		view: 'list' | 'treemap',
+		event?: React.MouseEvent,
+	) => void;
 	setHeatmapView: (value: TreemapViewType) => void;
 }
 

frontend/src/container/NewExplorerCTA/index.tsx

@@ -1,9 +1,10 @@
-import { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
 import { Badge, Button } from 'antd';
 import ROUTES from 'constants/routes';
 import history from 'lib/history';
 import { Undo } from 'lucide-react';
+import { navigateToPage } from 'utils/navigation';
 
 import { buttonText, RIBBON_STYLES } from './config';
 
@@ -21,23 +22,30 @@ function NewExplorerCTA(): JSX.Element | null {
 		[location.pathname],
 	);
 
-	const onClickHandler = useCallback((): void => {
-		if (location.pathname === ROUTES.LOGS_EXPLORER) {
-			history.push(ROUTES.OLD_LOGS_EXPLORER);
-		} else if (location.pathname === ROUTES.TRACE) {
-			history.push(ROUTES.TRACES_EXPLORER);
-		} else if (location.pathname === ROUTES.OLD_LOGS_EXPLORER) {
-			history.push(ROUTES.LOGS_EXPLORER);
-		} else if (location.pathname === ROUTES.TRACES_EXPLORER) {
-			history.push(ROUTES.TRACE);
-		}
-	}, [location.pathname]);
+	const onClickHandler = useCallback(
+		(e?: React.MouseEvent): void => {
+			let targetPath: string;
+			if (location.pathname === ROUTES.LOGS_EXPLORER) {
+				targetPath = ROUTES.OLD_LOGS_EXPLORER;
+			} else if (location.pathname === ROUTES.TRACE) {
+				targetPath = ROUTES.TRACES_EXPLORER;
+			} else if (location.pathname === ROUTES.OLD_LOGS_EXPLORER) {
+				targetPath = ROUTES.LOGS_EXPLORER;
+			} else if (location.pathname === ROUTES.TRACES_EXPLORER) {
+				targetPath = ROUTES.TRACE;
+			} else {
+				return;
+			}
+			navigateToPage(targetPath, history.push, e);
+		},
+		[location.pathname],
+	);
 
 	const button = useMemo(
 		() => (
 			<Button
 				icon={<Undo size={16} />}
-				onClick={onClickHandler}
+				onClick={(e): void => onClickHandler(e)}
 				data-testid="newExplorerCTA"
 				type="text"
 				className="periscope-btn link"

frontend/src/container/OnboardingContainer/OnboardingContainer.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
 import { useEffectOnce } from 'react-use';
@@ -17,6 +17,7 @@ import { InviteMemberFormValues } from 'container/OrganizationSettings/PendingIn
 import history from 'lib/history';
 import { UserPlus } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
+import { navigateToPage } from 'utils/navigation';
 
 import ModuleStepsContainer from './common/ModuleStepsContainer/ModuleStepsContainer';
 import { stepsMap } from './constants/stepsConfig';
@@ -252,9 +253,13 @@ export default function Onboarding(): JSX.Element {
 		}
 	};
 
-	const handleNext = (): void => {
+	const handleNext = (e?: React.MouseEvent): void => {
 		if (activeStep <= 3) {
-			history.push(moduleRouteMap[selectedModule.id as ModulesMap]);
+			navigateToPage(
+				moduleRouteMap[selectedModule.id as ModulesMap],
+				history.push,
+				e,
+			);
 		}
 	};
 
@@ -317,9 +322,9 @@ export default function Onboarding(): JSX.Element {
 			{activeStep === 1 && (
 				<div className="onboarding-page">
 					<div
-						onClick={(): void => {
+						onClick={(e): void => {
 							logEvent('Onboarding V2: Skip Button Clicked', {});
-							history.push(ROUTES.APPLICATION);
+							navigateToPage(ROUTES.APPLICATION, history.push, e);
 						}}
 						className="skip-to-console"
 					>
@@ -355,7 +360,11 @@ export default function Onboarding(): JSX.Element {
 						</div>
 					</div>
 					<div className="continue-to-next-step">
-						<Button type="primary" icon={<ArrowRightOutlined />} onClick={handleNext}>
+						<Button
+							type="primary"
+							icon={<ArrowRightOutlined />}
+							onClick={(e): void => handleNext(e)}
+						>
 							{t('get_started')}
 						</Button>
 					</div>
@@ -386,17 +395,16 @@ export default function Onboarding(): JSX.Element {
 			{activeStep > 1 && (
 				<div className="stepsContainer">
 					<ModuleStepsContainer
-						onReselectModule={(): void => {
+						onReselectModule={(e?: React.MouseEvent): void => {
 							setCurrent(current - 1);
 							setActiveStep(activeStep - 1);
 							setSelectedModule(useCases.APM);
 							resetProgress();
 
-							if (isOnboardingV3Enabled) {
-								history.push(ROUTES.GET_STARTED_WITH_CLOUD);
-							} else {
-								history.push(ROUTES.GET_STARTED);
-							}
+							const path = isOnboardingV3Enabled
+								? ROUTES.GET_STARTED_WITH_CLOUD
+								: ROUTES.GET_STARTED;
+							navigateToPage(path, history.push, e);
 						}}
 						selectedModule={selectedModule}
 						selectedModuleSteps={selectedModuleSteps}

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

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -23,6 +23,7 @@ import {
 import { useNotifications } from 'hooks/useNotifications';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { Blocks, Check } from 'lucide-react';
+import { navigateToPage } from 'utils/navigation';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import './DataSource.styles.scss';
@@ -141,13 +142,13 @@ export default function DataSource(): JSX.Element {
 		}
 	};
 
-	const goToIntegrationsPage = (): void => {
+	const goToIntegrationsPage = (e?: React.MouseEvent): void => {
 		logEvent('Onboarding V2: Go to integrations', {
 			module: selectedModule?.id,
 			dataSource: selectedDataSource?.name,
 			framework: selectedFramework,
 		});
-		history.push(ROUTES.INTEGRATIONS);
+		navigateToPage(ROUTES.INTEGRATIONS, history.push, e);
 	};
 
 	return (
@@ -249,7 +250,7 @@ export default function DataSource(): JSX.Element {
 								page which allows more sources of sending data
 							</Typography.Text>
 							<Button
-								onClick={goToIntegrationsPage}
+								onClick={(e): void => goToIntegrationsPage(e)}
 								icon={<Blocks size={14} />}
 								className="navigate-integrations-page-btn"
 							>

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

@@ -2,7 +2,7 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable react/jsx-no-comment-textnodes */
 /* eslint-disable sonarjs/prefer-single-boolean-return */
-import { SetStateAction, useState } from 'react';
+import React, { SetStateAction, useState } from 'react';
 import {
 	ArrowLeftOutlined,
 	ArrowRightOutlined,
@@ -19,6 +19,7 @@ import { hasFrameworks } from 'container/OnboardingContainer/utils/dataSourceUti
 import history from 'lib/history';
 import { isEmpty, isNull } from 'lodash-es';
 import { UserPlus } from 'lucide-react';
+import { navigateToPage } from 'utils/navigation';
 
 import { useOnboardingContext } from '../../context/OnboardingContext';
 import {
@@ -142,7 +143,7 @@ export default function ModuleStepsContainer({
 		return true;
 	};
 
-	const redirectToModules = (): void => {
+	const redirectToModules = (event?: React.MouseEvent): void => {
 		logEvent('Onboarding V2 Complete', {
 			module: selectedModule.id,
 			dataSource: selectedDataSource?.id,
@@ -152,26 +153,28 @@ export default function ModuleStepsContainer({
 			serviceName,
 		});
 
+		let targetPath: string;
 		if (selectedModule.id === ModulesMap.APM) {
-			history.push(ROUTES.APPLICATION);
+			targetPath = ROUTES.APPLICATION;
 		} else if (selectedModule.id === ModulesMap.LogsManagement) {
-			history.push(ROUTES.LOGS_EXPLORER);
+			targetPath = ROUTES.LOGS_EXPLORER;
 		} else if (selectedModule.id === ModulesMap.InfrastructureMonitoring) {
-			history.push(ROUTES.APPLICATION);
+			targetPath = ROUTES.APPLICATION;
 		} else if (selectedModule.id === ModulesMap.AwsMonitoring) {
-			history.push(ROUTES.APPLICATION);
+			targetPath = ROUTES.APPLICATION;
 		} else {
-			history.push(ROUTES.APPLICATION);
+			targetPath = ROUTES.APPLICATION;
 		}
+		navigateToPage(targetPath, history.push, event);
 	};
 
-	const handleNext = (): void => {
+	const handleNext = (event?: React.MouseEvent): void => {
 		const isValid = isValidForm();
 
 		if (isValid) {
 			if (current === lastStepIndex) {
 				resetProgress();
-				redirectToModules();
+				redirectToModules(event);
 				return;
 			}
 
@@ -379,8 +382,8 @@ export default function ModuleStepsContainer({
 		}
 	};
 
-	const handleLogoClick = (): void => {
-		history.push('/home');
+	const handleLogoClick = (e: React.MouseEvent): void => {
+		navigateToPage('/home', history.push, e);
 	};
 
 	return (
@@ -400,7 +403,7 @@ export default function ModuleStepsContainer({
 							style={{ display: 'flex', alignItems: 'center' }}
 							type="default"
 							icon={<LeftCircleOutlined />}
-							onClick={onReselectModule}
+							onClick={(e): void => onReselectModule(e)}
 						>
 							{selectedModule.title}
 						</Button>
@@ -470,7 +473,11 @@ export default function ModuleStepsContainer({
 					>
 						Back
 					</Button>
-					<Button onClick={handleNext} type="primary" icon={<ArrowRightOutlined />}>
+					<Button
+						onClick={(e): void => handleNext(e)}
+						type="primary"
+						icon={<ArrowRightOutlined />}
+					>
 						{current < lastStepIndex ? 'Continue to next step' : 'Done'}
 					</Button>
 					<LaunchChatSupport

frontend/src/container/OnboardingV2Container/AddDataSource/AddDataSource.tsx

@@ -21,6 +21,7 @@ import history from 'lib/history';
 import { isEmpty } from 'lodash-es';
 import { CheckIcon, Goal, UserPlus, X } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
+import { navigateToPage } from 'utils/navigation';
 
 import OnboardingIngestionDetails from '../IngestionDetails/IngestionDetails';
 import InviteTeamMembers from '../InviteTeamMembers/InviteTeamMembers';
@@ -413,7 +414,10 @@ function OnboardingAddDataSource(): JSX.Element {
 		]);
 	}, [org]);
 
-	const handleUpdateCurrentStep = (step: number): void => {
+	const handleUpdateCurrentStep = (
+		step: number,
+		event?: React.MouseEvent,
+	): void => {
 		setCurrentStep(step);
 
 		if (step === 1) {
@@ -443,43 +447,45 @@ function OnboardingAddDataSource(): JSX.Element {
 				...setupStepItemsBase.slice(2),
 			]);
 		} else if (step === 3) {
+			let targetPath: string;
 			switch (selectedDataSource?.module) {
 				case 'apm':
-					history.push(ROUTES.APPLICATION);
+					targetPath = ROUTES.APPLICATION;
 					break;
 				case 'logs':
-					history.push(ROUTES.LOGS);
+					targetPath = ROUTES.LOGS;
 					break;
 				case 'metrics':
-					history.push(ROUTES.METRICS_EXPLORER);
+					targetPath = ROUTES.METRICS_EXPLORER;
 					break;
 				case 'dashboards':
-					history.push(ROUTES.ALL_DASHBOARD);
+					targetPath = ROUTES.ALL_DASHBOARD;
 					break;
 				case 'infra-monitoring-hosts':
-					history.push(ROUTES.INFRASTRUCTURE_MONITORING_HOSTS);
+					targetPath = ROUTES.INFRASTRUCTURE_MONITORING_HOSTS;
 					break;
 				case 'infra-monitoring-k8s':
-					history.push(ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES);
+					targetPath = ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES;
 					break;
 				case 'messaging-queues-kafka':
-					history.push(ROUTES.MESSAGING_QUEUES_KAFKA);
+					targetPath = ROUTES.MESSAGING_QUEUES_KAFKA;
 					break;
 				case 'messaging-queues-celery':
-					history.push(ROUTES.MESSAGING_QUEUES_CELERY_TASK);
+					targetPath = ROUTES.MESSAGING_QUEUES_CELERY_TASK;
 					break;
 				case 'integrations':
-					history.push(ROUTES.INTEGRATIONS);
+					targetPath = ROUTES.INTEGRATIONS;
 					break;
 				case 'home':
-					history.push(ROUTES.HOME);
+					targetPath = ROUTES.HOME;
 					break;
 				case 'api-monitoring':
-					history.push(ROUTES.API_MONITORING);
+					targetPath = ROUTES.API_MONITORING;
 					break;
 				default:
-					history.push(ROUTES.APPLICATION);
+					targetPath = ROUTES.APPLICATION;
 			}
+			navigateToPage(targetPath, history.push, event);
 		}
 	};
 
@@ -628,7 +634,7 @@ function OnboardingAddDataSource(): JSX.Element {
 							<X
 								size={14}
 								className="onboarding-header-container-close-icon"
-								onClick={(): void => {
+								onClick={(e): void => {
 									logEvent(
 										`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.CLOSE_ONBOARDING_CLICKED}`,
 										{
@@ -636,7 +642,7 @@ function OnboardingAddDataSource(): JSX.Element {
 										},
 									);
 
-									history.push(ROUTES.HOME);
+									navigateToPage(ROUTES.HOME, history.push, e);
 								}}
 							/>
 							<Typography.Text>Get Started (2/4)</Typography.Text>
@@ -963,7 +969,7 @@ function OnboardingAddDataSource(): JSX.Element {
 													type="primary"
 													disabled={!selectedDataSource}
 													shape="round"
-													onClick={(): void => {
+													onClick={(e): void => {
 														logEvent(
 															`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.CONFIGURED_PRODUCT}`,
 															{
@@ -977,7 +983,7 @@ function OnboardingAddDataSource(): JSX.Element {
 															selectedEnvironment || selectedFramework || selectedDataSource;
 
 														if (currentEntity?.internalRedirect && currentEntity?.link) {
-															history.push(currentEntity.link);
+															navigateToPage(currentEntity.link, history.push, e);
 														} else {
 															handleUpdateCurrentStep(2);
 														}
@@ -1048,7 +1054,7 @@ function OnboardingAddDataSource(): JSX.Element {
 									<Button
 										type="primary"
 										shape="round"
-										onClick={(): void => {
+										onClick={(e): void => {
 											logEvent(
 												`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.CONTINUE_BUTTON_CLICKED}`,
 												{
@@ -1060,7 +1066,7 @@ function OnboardingAddDataSource(): JSX.Element {
 											);
 
 											handleFilterByCategory('All');
-											handleUpdateCurrentStep(3);
+											handleUpdateCurrentStep(3, e);
 										}}
 									>
 										Continue

frontend/src/container/SideNav/SideNav.tsx

@@ -65,6 +65,7 @@ import AppReducer from 'types/reducer/app';
 import { USER_ROLES } from 'types/roles';
 import { checkVersionState } from 'utils/app';
 import { showErrorNotification } from 'utils/error';
+import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { useCmdK } from '../../providers/cmdKProvider';
 import { routeConfig } from './config';
@@ -306,8 +307,6 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 		icon: <Cog size={16} />,
 	};
 
-	const isCtrlMetaKey = (e: MouseEvent): boolean => e.ctrlKey || e.metaKey;
-
 	const isLatestVersion = checkVersionState(currentVersion, latestVersion);
 
 	const [
@@ -436,10 +435,6 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 
 	const isWorkspaceBlocked = trialInfo?.workSpaceBlock || false;
 
-	const openInNewTab = (path: string): void => {
-		window.open(path, '_blank');
-	};
-
 	const onClickGetStarted = (event: MouseEvent): void => {
 		logEvent('Sidebar: Menu clicked', {
 			menuRoute: '/get-started',
@@ -450,7 +445,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 			? ROUTES.GET_STARTED_WITH_CLOUD
 			: ROUTES.GET_STARTED;
 
-		if (isCtrlMetaKey(event)) {
+		if (isModifierKeyPressed(event)) {
 			openInNewTab(onboaringRoute);
 		} else {
 			history.push(onboaringRoute);
@@ -465,7 +460,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 			const queryString = getQueryString(availableParams || [], params);
 
 			if (pathname !== key) {
-				if (event && isCtrlMetaKey(event)) {
+				if (event && isModifierKeyPressed(event)) {
 					openInNewTab(`${key}?${queryString.join('&')}`);
 				} else {
 					history.push(`${key}?${queryString.join('&')}`, {
@@ -664,7 +659,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 
 	const handleMenuItemClick = (event: MouseEvent, item: SidebarItem): void => {
 		if (item.key === ROUTES.SETTINGS) {
-			if (isCtrlMetaKey(event)) {
+			if (isModifierKeyPressed(event)) {
 				openInNewTab(settingsRoute);
 			} else {
 				history.push(settingsRoute);
@@ -842,6 +837,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 		}
 	};
 
+	// eslint-disable-next-line sonarjs/cognitive-complexity
 	const handleHelpSupportMenuItemClick = (info: SidebarItem): void => {
 		const item = helpSupportDropdownMenuItems.find(
 			(item) => !('type' in item) && item.key === info.key,
@@ -851,6 +847,8 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 			window.open(item.url, '_blank');
 		}
 
+		const event = (info as SidebarItem & { domEvent?: MouseEvent }).domEvent;
+
 		if (item && !('type' in item)) {
 			logEvent('Help Popover: Item clicked', {
 				menuRoute: item.key,
@@ -859,10 +857,18 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 
 			switch (item.key) {
 				case ROUTES.SHORTCUTS:
-					history.push(ROUTES.SHORTCUTS);
+					if (event && isModifierKeyPressed(event)) {
+						openInNewTab(ROUTES.SHORTCUTS);
+					} else {
+						history.push(ROUTES.SHORTCUTS);
+					}
 					break;
 				case 'invite-collaborators':
-					history.push(`${ROUTES.ORG_SETTINGS}#invite-team-members`);
+					if (event && isModifierKeyPressed(event)) {
+						openInNewTab(`${ROUTES.ORG_SETTINGS}#invite-team-members`);
+					} else {
+						history.push(`${ROUTES.ORG_SETTINGS}#invite-team-members`);
+					}
 					break;
 				case 'chat-support':
 					if (window.pylon) {
@@ -881,6 +887,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 		}
 	};
 
+	// eslint-disable-next-line sonarjs/cognitive-complexity
 	const handleSettingsMenuItemClick = (info: SidebarItem): void => {
 		const item = userSettingsDropdownMenuItems.find(
 			(item) => item?.key === info.key,
@@ -898,15 +905,30 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 			menuRoute: item?.key,
 			menuLabel,
 		});
+
+		const event = (info as SidebarItem & { domEvent?: MouseEvent }).domEvent;
+
 		switch (info.key) {
 			case 'account':
-				history.push(ROUTES.MY_SETTINGS);
+				if (event && isModifierKeyPressed(event)) {
+					openInNewTab(ROUTES.MY_SETTINGS);
+				} else {
+					history.push(ROUTES.MY_SETTINGS);
+				}
 				break;
 			case 'workspace':
-				history.push(ROUTES.SETTINGS);
+				if (event && isModifierKeyPressed(event)) {
+					openInNewTab(ROUTES.SETTINGS);
+				} else {
+					history.push(ROUTES.SETTINGS);
+				}
 				break;
 			case 'license':
-				history.push(ROUTES.LIST_LICENSES);
+				if (event && isModifierKeyPressed(event)) {
+					openInNewTab(ROUTES.LIST_LICENSES);
+				} else {
+					history.push(ROUTES.LIST_LICENSES);
+				}
 				break;
 			case 'logout':
 				Logout();

frontend/src/hooks/__tests__/useSafeNavigate.test.ts

@@ -0,0 +1,106 @@
+/**
+ * Tests for useSafeNavigate's mock contract.
+ *
+ * The real useSafeNavigate hook is globally replaced by a mock via
+ * jest.config.ts moduleNameMapper, so we cannot test the real
+ * implementation here. Instead we verify:
+ *
+ * 1. The mock accepts the new `event` and `newTab` options without
+ *    type errors — ensuring component tests that pass these options
+ *    won't break.
+ * 2. The shouldOpenNewTab decision logic (extracted inline below)
+ *    matches the real hook's behaviour.
+ */
+
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { isModifierKeyPressed } from 'utils/navigation';
+
+/**
+ * Mirrors the shouldOpenNewTab logic from the real useSafeNavigate hook.
+ * Kept in sync manually — any drift will be caught by integration tests.
+ */
+interface NavigateOptions {
+	newTab?: boolean;
+	event?: MouseEvent | React.MouseEvent;
+}
+
+const shouldOpenNewTab = (options?: NavigateOptions): boolean =>
+	Boolean(
+		options?.newTab || (options?.event && isModifierKeyPressed(options.event)),
+	);
+
+describe('useSafeNavigate mock contract', () => {
+	it('mock returns a safeNavigate function', () => {
+		const { safeNavigate } = useSafeNavigate();
+		expect(typeof safeNavigate).toBe('function');
+	});
+
+	it('safeNavigate accepts string path with event option', () => {
+		const { safeNavigate } = useSafeNavigate();
+		const event = { metaKey: true, ctrlKey: false } as MouseEvent;
+
+		expect(() => {
+			safeNavigate('/alerts', { event });
+		}).not.toThrow();
+
+		expect(safeNavigate).toHaveBeenCalledWith('/alerts', { event });
+	});
+
+	it('safeNavigate accepts string path with newTab option', () => {
+		const { safeNavigate } = useSafeNavigate();
+
+		expect(() => {
+			safeNavigate('/dashboard', { newTab: true });
+		}).not.toThrow();
+
+		expect(safeNavigate).toHaveBeenCalledWith('/dashboard', { newTab: true });
+	});
+
+	it('safeNavigate accepts SafeNavigateParams with event option', () => {
+		const { safeNavigate } = useSafeNavigate();
+		const event = { metaKey: false, ctrlKey: true } as MouseEvent;
+
+		expect(() => {
+			safeNavigate({ pathname: '/settings', search: '?tab=general' }, { event });
+		}).not.toThrow();
+
+		expect(safeNavigate).toHaveBeenCalledWith(
+			{ pathname: '/settings', search: '?tab=general' },
+			{ event },
+		);
+	});
+});
+
+describe('shouldOpenNewTab decision logic', () => {
+	it('returns true when newTab is true', () => {
+		expect(shouldOpenNewTab({ newTab: true })).toBe(true);
+	});
+
+	it('returns true when event has metaKey pressed', () => {
+		const event = { metaKey: true, ctrlKey: false } as MouseEvent;
+		expect(shouldOpenNewTab({ event })).toBe(true);
+	});
+
+	it('returns true when event has ctrlKey pressed', () => {
+		const event = { metaKey: false, ctrlKey: true } as MouseEvent;
+		expect(shouldOpenNewTab({ event })).toBe(true);
+	});
+
+	it('returns false when event has no modifier keys', () => {
+		const event = { metaKey: false, ctrlKey: false } as MouseEvent;
+		expect(shouldOpenNewTab({ event })).toBe(false);
+	});
+
+	it('returns false when no options provided', () => {
+		expect(shouldOpenNewTab()).toBe(false);
+		expect(shouldOpenNewTab(undefined)).toBe(false);
+	});
+
+	it('returns false when options provided without event or newTab', () => {
+		expect(shouldOpenNewTab({})).toBe(false);
+	});
+
+	it('newTab takes precedence even without event', () => {
+		expect(shouldOpenNewTab({ newTab: true })).toBe(true);
+	});
+});

frontend/src/hooks/useAuthZ/useAuthZ.test.tsx

@@ -1,444 +0,0 @@
-import { ReactElement } from 'react';
-import { renderHook, waitFor } from '@testing-library/react';
-import { ENVIRONMENT } from 'constants/env';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
-import { AllTheProviders } from 'tests/test-utils';
-
-import { useAuthZ } from './useAuthZ';
-import { BrandedPermission, buildPermission } from './utils';
-
-const BASE_URL = ENVIRONMENT.baseURL || '';
-
-const wrapper = ({ children }: { children: ReactElement }): ReactElement => (
-	<AllTheProviders>{children}</AllTheProviders>
-);
-
-describe('useAuthZ', () => {
-	it('should fetch and return permissions successfully', async () => {
-		const permission1 = buildPermission('read', 'dashboard:*');
-		const permission2 = buildPermission('update', 'dashboard:123');
-
-		const mockApiResponse = {
-			[permission1]: true,
-			[permission2]: false,
-		};
-
-		const expectedResponse = {
-			[permission1]: {
-				isGranted: true,
-			},
-			[permission2]: {
-				isGranted: false,
-			},
-		};
-
-		server.use(
-			rest.post(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
-				return res(ctx.status(200), ctx.json(mockApiResponse));
-			}),
-		);
-
-		const { result } = renderHook(() => useAuthZ([permission1, permission2]), {
-			wrapper,
-		});
-
-		expect(result.current.isLoading).toBe(true);
-		expect(result.current.permissions).toBeNull();
-
-		await waitFor(() => {
-			expect(result.current.isLoading).toBe(false);
-		});
-
-		expect(result.current.error).toBeNull();
-		expect(result.current.permissions).toEqual(expectedResponse);
-	});
-
-	it('should handle API errors', async () => {
-		const permission = buildPermission('read', 'dashboard:*');
-
-		server.use(
-			rest.post(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
-				return res(ctx.status(500), ctx.json({ error: 'Internal Server Error' }));
-			}),
-		);
-
-		const { result } = renderHook(() => useAuthZ([permission]), {
-			wrapper,
-		});
-
-		await waitFor(() => {
-			expect(result.current.isLoading).toBe(false);
-		});
-
-		expect(result.current.error).not.toBeNull();
-		expect(result.current.permissions).toBeNull();
-	});
-
-	it('should refetch when permissions array changes', async () => {
-		const permission1 = buildPermission('read', 'dashboard:*');
-		const permission2 = buildPermission('update', 'dashboard:123');
-		const permission3 = buildPermission('delete', 'dashboard:456');
-
-		let requestCount = 0;
-
-		server.use(
-			rest.post(`${BASE_URL}/api/v1/permissions/check`, (req, res, ctx) => {
-				requestCount++;
-				const body = req.body as {
-					permissions: Array<{ relation: string; object: string }>;
-				};
-
-				if (body.permissions.length === 1) {
-					return res(
-						ctx.status(200),
-						ctx.json({
-							[permission1]: true,
-						}),
-					);
-				}
-
-				return res(
-					ctx.status(200),
-					ctx.json({
-						[permission1]: true,
-						[permission2]: false,
-						[permission3]: true,
-					}),
-				);
-			}),
-		);
-
-		const { result, rerender } = renderHook<
-			ReturnType<typeof useAuthZ>,
-			BrandedPermission[]
-		>((permissions) => useAuthZ(permissions), {
-			wrapper,
-			initialProps: [permission1],
-		});
-
-		await waitFor(() => {
-			expect(result.current.isLoading).toBe(false);
-		});
-
-		expect(requestCount).toBe(1);
-		expect(result.current.permissions).toEqual({
-			[permission1]: {
-				isGranted: true,
-			},
-		});
-
-		rerender([permission1, permission2, permission3]);
-
-		await waitFor(() => {
-			expect(result.current.isLoading).toBe(false);
-		});
-
-		expect(requestCount).toBe(2);
-		expect(result.current.permissions).toEqual({
-			[permission1]: {
-				isGranted: true,
-			},
-			[permission2]: {
-				isGranted: false,
-			},
-			[permission3]: {
-				isGranted: true,
-			},
-		});
-	});
-
-	it('should not refetch when permissions array order changes but content is the same', async () => {
-		const permission1 = buildPermission('read', 'dashboard:*');
-		const permission2 = buildPermission('update', 'dashboard:123');
-
-		let requestCount = 0;
-
-		server.use(
-			rest.post(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
-				requestCount++;
-				return res(
-					ctx.status(200),
-					ctx.json({
-						[permission1]: true,
-						[permission2]: false,
-					}),
-				);
-			}),
-		);
-
-		const { result, rerender } = renderHook<
-			ReturnType<typeof useAuthZ>,
-			BrandedPermission[]
-		>((permissions) => useAuthZ(permissions), {
-			wrapper,
-			initialProps: [permission1, permission2],
-		});
-
-		await waitFor(() => {
-			expect(result.current.isLoading).toBe(false);
-		});
-
-		expect(requestCount).toBe(1);
-
-		rerender([permission2, permission1]);
-
-		await waitFor(() => {
-			expect(result.current.isLoading).toBe(false);
-		});
-
-		expect(requestCount).toBe(1);
-	});
-
-	it('should handle empty permissions array', async () => {
-		server.use(
-			rest.post(`${BASE_URL}/api/v1/permissions/check`, (_req, res, ctx) => {
-				return res(ctx.status(200), ctx.json({}));
-			}),
-		);
-
-		const { result } = renderHook(() => useAuthZ([]), {
-			wrapper,
-		});
-
-		expect(result.current.isLoading).toBe(false);
-		expect(result.current.error).toBeNull();
-		expect(result.current.permissions).toEqual({});
-	});
-
-	it('should send correct payload format to API', async () => {
-		const permission1 = buildPermission('read', 'dashboard:*');
-		const permission2 = buildPermission('update', 'dashboard:123');
-
-		let receivedPayload: any = null;
-
-		server.use(
-			rest.post(`${BASE_URL}/api/v1/permissions/check`, async (req, res, ctx) => {
-				receivedPayload = await req.json();
-				return res(
-					ctx.status(200),
-					ctx.json({
-						[permission1]: true,
-						[permission2]: false,
-					}),
-				);
-			}),
-		);
-
-		const { result } = renderHook(() => useAuthZ([permission1, permission2]), {
-			wrapper,
-		});
-
-		await waitFor(() => {
-			expect(result.current.isLoading).toBe(false);
-		});
-
-		expect(receivedPayload).toEqual({
-			permissions: [
-				{ relation: 'read', object: 'dashboard:*' },
-				{ relation: 'update', object: 'dashboard:123' },
-			],
-		});
-	});
-
-	it('should batch multiple hooks into single flight request', async () => {
-		const permission1 = buildPermission('read', 'dashboard:*');
-		const permission2 = buildPermission('update', 'dashboard:123');
-		const permission3 = buildPermission('delete', 'dashboard:456');
-		const permission4 = buildPermission('create', 'dashboards');
-
-		let requestCount = 0;
-		const receivedPayloads: any[] = [];
-
-		server.use(
-			rest.post(`${BASE_URL}/api/v1/permissions/check`, async (req, res, ctx) => {
-				requestCount++;
-				const payload = await req.json();
-				receivedPayloads.push(payload);
-
-				const allPermissions = [permission1, permission2, permission3, permission4];
-
-				const response: Record<string, boolean> = {};
-				payload.permissions.forEach((p: { relation: string; object: string }) => {
-					const perm = `${p.relation}/${p.object}` as BrandedPermission;
-					if (allPermissions.includes(perm)) {
-						response[perm] = perm === permission1 || perm === permission3;
-					}
-				});
-
-				return res(ctx.status(200), ctx.json(response));
-			}),
-		);
-
-		const { result: result1 } = renderHook(() => useAuthZ([permission1]), {
-			wrapper,
-		});
-
-		const { result: result2 } = renderHook(() => useAuthZ([permission2]), {
-			wrapper,
-		});
-
-		const { result: result3 } = renderHook(() => useAuthZ([permission3]), {
-			wrapper,
-		});
-
-		await waitFor(
-			() => {
-				expect(result1.current.isLoading).toBe(false);
-				expect(result2.current.isLoading).toBe(false);
-				expect(result3.current.isLoading).toBe(false);
-			},
-			{ timeout: 200 },
-		);
-
-		expect(requestCount).toBe(1);
-		expect(receivedPayloads).toHaveLength(1);
-		expect(receivedPayloads[0].permissions).toHaveLength(3);
-		expect(receivedPayloads[0].permissions).toEqual(
-			expect.arrayContaining([
-				{ relation: 'read', object: 'dashboard:*' },
-				{ relation: 'update', object: 'dashboard:123' },
-				{ relation: 'delete', object: 'dashboard:456' },
-			]),
-		);
-
-		expect(result1.current.permissions).toEqual({
-			[permission1]: { isGranted: true },
-		});
-		expect(result2.current.permissions).toEqual({
-			[permission2]: { isGranted: false },
-		});
-		expect(result3.current.permissions).toEqual({
-			[permission3]: { isGranted: true },
-		});
-	});
-
-	it('should create separate batches for calls after single flight window', async () => {
-		const permission1 = buildPermission('read', 'dashboard:*');
-		const permission2 = buildPermission('update', 'dashboard:123');
-		const permission3 = buildPermission('delete', 'dashboard:456');
-
-		let requestCount = 0;
-		const receivedPayloads: any[] = [];
-
-		server.use(
-			rest.post(`${BASE_URL}/api/v1/permissions/check`, async (req, res, ctx) => {
-				requestCount++;
-				const payload = await req.json();
-				receivedPayloads.push(payload);
-
-				const response: Record<string, boolean> = {};
-				payload.permissions.forEach((p: { relation: string; object: string }) => {
-					const perm = `${p.relation}/${p.object}` as BrandedPermission;
-					response[perm] = perm === permission1 || perm === permission3;
-				});
-
-				return res(ctx.status(200), ctx.json(response));
-			}),
-		);
-
-		const { result: result1 } = renderHook(() => useAuthZ([permission1]), {
-			wrapper,
-		});
-
-		await waitFor(
-			() => {
-				expect(result1.current.isLoading).toBe(false);
-			},
-			{ timeout: 200 },
-		);
-
-		expect(requestCount).toBe(1);
-		expect(receivedPayloads[0].permissions).toHaveLength(1);
-
-		await new Promise((resolve) => setTimeout(resolve, 100));
-
-		const { result: result2 } = renderHook(() => useAuthZ([permission2]), {
-			wrapper,
-		});
-
-		const { result: result3 } = renderHook(() => useAuthZ([permission3]), {
-			wrapper,
-		});
-
-		await waitFor(
-			() => {
-				expect(result2.current.isLoading).toBe(false);
-				expect(result3.current.isLoading).toBe(false);
-			},
-			{ timeout: 200 },
-		);
-
-		expect(requestCount).toBe(2);
-		expect(receivedPayloads).toHaveLength(2);
-		expect(receivedPayloads[1].permissions).toHaveLength(2);
-		expect(receivedPayloads[1].permissions).toEqual(
-			expect.arrayContaining([
-				{ relation: 'update', object: 'dashboard:123' },
-				{ relation: 'delete', object: 'dashboard:456' },
-			]),
-		);
-	});
-
-	it('should not leak state between separate batches', async () => {
-		const permission1 = buildPermission('read', 'dashboard:*');
-		const permission2 = buildPermission('update', 'dashboard:123');
-		const permission3 = buildPermission('delete', 'dashboard:456');
-
-		let requestCount = 0;
-
-		server.use(
-			rest.post(`${BASE_URL}/api/v1/permissions/check`, async (req, res, ctx) => {
-				requestCount++;
-				const payload = await req.json();
-
-				const response: Record<string, boolean> = {};
-				payload.permissions.forEach((p: { relation: string; object: string }) => {
-					const perm = `${p.relation}/${p.object}` as BrandedPermission;
-					response[perm] = perm === permission1 || perm === permission3;
-				});
-
-				return res(ctx.status(200), ctx.json(response));
-			}),
-		);
-
-		const { result: result1 } = renderHook(() => useAuthZ([permission1]), {
-			wrapper,
-		});
-
-		await waitFor(
-			() => {
-				expect(result1.current.isLoading).toBe(false);
-			},
-			{ timeout: 200 },
-		);
-
-		expect(requestCount).toBe(1);
-		expect(result1.current.permissions).toEqual({
-			[permission1]: { isGranted: true },
-		});
-
-		await new Promise((resolve) => setTimeout(resolve, 100));
-
-		const { result: result2 } = renderHook(() => useAuthZ([permission2]), {
-			wrapper,
-		});
-
-		await waitFor(
-			() => {
-				expect(result2.current.isLoading).toBe(false);
-			},
-			{ timeout: 200 },
-		);
-
-		expect(requestCount).toBe(2);
-		expect(result1.current.permissions).toEqual({
-			[permission1]: { isGranted: true },
-		});
-		expect(result2.current.permissions).toEqual({
-			[permission2]: { isGranted: false },
-		});
-		expect(result1.current.permissions).not.toHaveProperty(permission2);
-		expect(result2.current.permissions).not.toHaveProperty(permission1);
-	});
-});

frontend/src/hooks/useAuthZ/useAuthZ.tsx

@@ -1,136 +0,0 @@
-import { useMemo } from 'react';
-import { useQueries } from 'react-query';
-import api from 'api';
-
-import { BrandedPermission } from './utils';
-
-export type UseAuthZPermissionResult = {
-	isGranted: boolean;
-};
-
-export type AuthZCheckResponse = Record<
-	BrandedPermission,
-	UseAuthZPermissionResult
->;
-
-export type UseAuthZResult = {
-	isLoading: boolean;
-	error: Error | null;
-	permissions: AuthZCheckResponse | null;
-};
-
-let ctx: Promise<AuthZCheckResponse> | null;
-let pendingPermissions: BrandedPermission[] = [];
-const SINGLE_FLIGHT_WAIT_TIME_MS = 50;
-const AUTHZ_CACHE_TIME = 20_000;
-
-function dispatchPermission(
-	permission: BrandedPermission,
-): Promise<AuthZCheckResponse> {
-	pendingPermissions.push(permission);
-
-	if (!ctx) {
-		let resolve: (v: AuthZCheckResponse) => void, reject: (reason?: any) => void;
-		ctx = new Promise<AuthZCheckResponse>((r, re) => {
-			resolve = r;
-			reject = re;
-		});
-
-		setTimeout(() => {
-			const copiedPermissions = pendingPermissions.slice();
-			pendingPermissions = [];
-			ctx = null;
-
-			fetchManyPermissions(copiedPermissions).then(resolve).catch(reject);
-		}, SINGLE_FLIGHT_WAIT_TIME_MS);
-	}
-
-	return ctx;
-}
-
-async function fetchManyPermissions(
-	permissions: BrandedPermission[],
-): Promise<AuthZCheckResponse> {
-	const permissionsPayload = permissions.map((permission) => {
-		const [relation, object] = permission.split('/');
-
-		return {
-			relation,
-			object,
-		};
-	});
-
-	const permissionsCheckResponse = await api
-		.post<Record<string, boolean>>('/permissions/check', {
-			permissions: permissionsPayload,
-		})
-		.then((response) => response.data);
-
-	return Object.keys(permissionsCheckResponse).reduce<AuthZCheckResponse>(
-		(acc, permission): AuthZCheckResponse => {
-			acc[permission as BrandedPermission] = {
-				isGranted: !!permissionsCheckResponse[permission],
-			};
-			return acc;
-		},
-		{} as AuthZCheckResponse,
-	);
-}
-
-export function useAuthZ(permissions: BrandedPermission[]): UseAuthZResult {
-	const queryResults = useQueries(
-		permissions.map((permission) => {
-			return {
-				queryKey: ['authz', permission],
-				cacheTime: AUTHZ_CACHE_TIME,
-				refetchOnMount: false,
-				refetchIntervalInBackground: false,
-				refetchOnWindowFocus: false,
-				refetchOnReconnect: true,
-				queryFn: async (): Promise<AuthZCheckResponse> => {
-					const response = await dispatchPermission(permission);
-
-					return {
-						[permission]: {
-							isGranted: response[permission].isGranted,
-						},
-					};
-				},
-			};
-		}),
-	);
-
-	const isLoading = useMemo(() => queryResults.some((q) => q.isLoading), [
-		queryResults,
-	]);
-	const error = useMemo(
-		() =>
-			!isLoading
-				? (queryResults.find((q) => !!q.error)?.error as Error) || null
-				: null,
-		[isLoading, queryResults],
-	);
-	const data = useMemo(() => {
-		if (isLoading || error) {
-			return null;
-		}
-
-		return queryResults.reduce((acc, q) => {
-			if (!q.data) {
-				return acc;
-			}
-
-			for (const [key, value] of Object.entries(q.data)) {
-				acc[key as BrandedPermission] = value;
-			}
-
-			return acc;
-		}, {} as AuthZCheckResponse);
-	}, [isLoading, error, queryResults]);
-
-	return {
-		isLoading,
-		error,
-		permissions: data ?? null,
-	};
-}

frontend/src/hooks/useAuthZ/utils.ts

@@ -1,32 +0,0 @@
-export type AuthZRelation =
-	| 'list'
-	| 'create'
-	| 'read'
-	| 'update'
-	| 'delete'
-	| 'assignee';
-export type AuthZResource = 'dashboard';
-export type AuthZObject<R extends AuthZRelation> = R extends 'list' | 'create'
-	? `${AuthZResource}s`
-	: `${AuthZResource}:${string}`;
-
-export type AuthZPermissionCheck<R extends AuthZRelation> = {
-	object: AuthZObject<R>;
-	relation: R;
-};
-
-export type BrandedPermission = string & { __brandedPermission: true };
-
-export function buildPermission<R extends AuthZRelation>(
-	relation: R,
-	object: AuthZObject<R>,
-): BrandedPermission {
-	return `${relation}/${object}` as BrandedPermission;
-}
-
-export function buildObjectString(
-	resource: AuthZResource,
-	objectId: string,
-): `${AuthZResource}:${string}` {
-	return `${resource}:${objectId}`;
-}

frontend/src/hooks/useSafeNavigate.ts

@@ -1,11 +1,13 @@
-import { useCallback } from 'react';
+import React, { useCallback } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
 import { cloneDeep, isEqual } from 'lodash-es';
+import { isModifierKeyPressed } from 'utils/navigation';
 
 interface NavigateOptions {
 	replace?: boolean;
 	state?: any;
 	newTab?: boolean;
+	event?: MouseEvent | React.MouseEvent;
 }
 
 interface SafeNavigateParams {
@@ -105,6 +107,7 @@ export const useSafeNavigate = (
 	const location = useLocation();
 
 	const safeNavigate = useCallback(
+		// eslint-disable-next-line sonarjs/cognitive-complexity
 		(to: string | SafeNavigateParams, options?: NavigateOptions) => {
 			const currentUrl = new URL(
 				`${location.pathname}${location.search}`,
@@ -122,8 +125,10 @@ export const useSafeNavigate = (
 				);
 			}
 
-			// If newTab is true, open in new tab and return early
-			if (options?.newTab) {
+			const shouldOpenNewTab =
+				options?.newTab || (options?.event && isModifierKeyPressed(options.event));
+
+			if (shouldOpenNewTab) {
 				const targetPath =
 					typeof to === 'string'
 						? to

frontend/src/lib/uPlotV2/config/UPlotConfigBuilder.ts

@@ -7,16 +7,11 @@ import { merge } from 'lodash-es';
 import noop from 'lodash-es/noop';
 import uPlot, { Cursor, Hooks, Options } from 'uplot';
 
-import {
-	DEFAULT_CURSOR_CONFIG,
-	DEFAULT_HOVER_PROXIMITY_VALUE,
-	DEFAULT_PLOT_CONFIG,
-	STEP_INTERVAL_MULTIPLIER,
-} from '../constants';
-import { calculateWidthBasedOnStepInterval } from '../utils';
 import {
 	ConfigBuilder,
 	ConfigBuilderProps,
+	DEFAULT_CURSOR_CONFIG,
+	DEFAULT_PLOT_CONFIG,
 	LegendItem,
 	SelectionPreferencesSource,
 } from './types';
@@ -50,8 +45,6 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 
 	private axes: Record<string, UPlotAxisBuilder> = {};
 
-	private stepInterval: number | undefined;
-
 	readonly scales: UPlotScaleBuilder[] = [];
 
 	private bands: uPlot.Band[] = [];
@@ -86,7 +79,6 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 			tzDate,
 			selectionPreferencesSource,
 			shouldSaveSelectionPreference,
-			stepInterval,
 		} = args ?? {};
 		if (widgetId) {
 			this.widgetId = widgetId;
@@ -104,10 +96,6 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 			this.shouldSaveSelectionPreference = shouldSaveSelectionPreference;
 		}
 
-		if (stepInterval) {
-			this.stepInterval = stepInterval;
-		}
-
 		this.onDragSelect = noop;
 		if (onDragSelect) {
 			this.onDragSelect = onDragSelect;
@@ -384,31 +372,6 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 		return this.widgetId;
 	}
 
-	/**
-	 * Get cursor configuration
-	 */
-	getCursorConfig(): Cursor {
-		if (this.stepInterval) {
-			const cursorConfig = {
-				...DEFAULT_CURSOR_CONFIG,
-				hover: {
-					...DEFAULT_CURSOR_CONFIG.hover,
-					prox: this.stepInterval
-						? (uPlotInstance: uPlot): number => {
-								const width = calculateWidthBasedOnStepInterval({
-									uPlotInstance,
-									stepInterval: this.stepInterval ?? 0,
-								});
-								return width * STEP_INTERVAL_MULTIPLIER;
-						  }
-						: DEFAULT_HOVER_PROXIMITY_VALUE,
-				},
-			};
-			return merge({}, DEFAULT_CURSOR_CONFIG, cursorConfig, this.cursor);
-		}
-		return merge({}, DEFAULT_CURSOR_CONFIG, this.cursor);
-	}
-
 	/**
 	 * Build the final uPlot.Options configuration
 	 */
@@ -450,7 +413,7 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 		config.hooks = this.hooks;
 		config.select = this.select;
 
-		config.cursor = this.getCursorConfig();
+		config.cursor = merge({}, DEFAULT_CURSOR_CONFIG, this.cursor);
 		config.tzDate = this.tzDate;
 		config.plugins = this.plugins.length > 0 ? this.plugins : undefined;
 		config.bands = this.bands.length > 0 ? this.bands : undefined;

frontend/src/lib/uPlotV2/config/UPlotSeriesBuilder.ts

@@ -1,7 +1,6 @@
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { themeColors } from 'constants/theme';
 import { generateColor } from 'lib/uPlotLib/utils/generateColor';
-import { calculateWidthBasedOnStepInterval } from 'lib/uPlotV2/utils';
 import uPlot, { Series } from 'uplot';
 
 import {
@@ -292,16 +291,21 @@ function getBarPathBuilder({
 			idx1: number,
 		): Series.Paths | null => {
 			let effectiveBarMaxWidth = barMaxWidth;
-			const widthBasedOnStepInterval = calculateWidthBasedOnStepInterval({
-				uPlotInstance: self,
-				stepInterval,
-			});
 
-			if (widthBasedOnStepInterval > 0) {
-				effectiveBarMaxWidth = Math.min(
-					effectiveBarMaxWidth,
-					widthBasedOnStepInterval,
-				);
+			const xScale = self.scales.x as uPlot.Scale | undefined;
+			if (xScale && typeof xScale.min === 'number') {
+				const start = xScale.min as number;
+				const end = start + stepInterval;
+				const startPx = self.valToPos(start, 'x');
+				const endPx = self.valToPos(end, 'x');
+				const intervalPx = Math.abs(endPx - startPx);
+
+				if (intervalPx > 0) {
+					effectiveBarMaxWidth =
+						typeof barMaxWidth === 'number'
+							? Math.min(barMaxWidth, intervalPx)
+							: intervalPx;
+				}
 			}
 
 			const barsCfgKey = `bars|${barAlignment}|${barWidthFactor}|${effectiveBarMaxWidth}`;

frontend/src/lib/uPlotV2/config/__tests__/UPlotConfigBuilder.test.ts

@@ -1,10 +1,6 @@
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import uPlot from 'uplot';
 
-import {
-	DEFAULT_HOVER_PROXIMITY_VALUE,
-	STEP_INTERVAL_MULTIPLIER,
-} from '../../constants';
 import type { SeriesProps } from '../types';
 import { DrawStyle, SelectionPreferencesSource } from '../types';
 import { UPlotConfigBuilder } from '../UPlotConfigBuilder';
@@ -17,14 +13,6 @@ jest.mock(
 	}),
 );
 
-jest.mock('lib/uPlotV2/utils', () => ({
-	calculateWidthBasedOnStepInterval: jest.fn(),
-}));
-
-const calculateWidthBasedOnStepIntervalMock = jest.requireMock(
-	'lib/uPlotV2/utils',
-).calculateWidthBasedOnStepInterval as jest.Mock;
-
 const getStoredSeriesVisibilityMock = jest.requireMock(
 	'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils',
 ) as {
@@ -396,52 +384,6 @@ describe('UPlotConfigBuilder', () => {
 		expect(config.cursor?.points).toBeDefined();
 	});
 
-	describe('getCursorConfig', () => {
-		it('returns default cursor merged with custom cursor when no stepInterval', () => {
-			const builder = new UPlotConfigBuilder();
-
-			builder.setCursor({
-				drag: { setScale: false },
-			});
-
-			const cursorConfig = builder.getCursorConfig();
-
-			expect(cursorConfig.drag?.setScale).toBe(false);
-			expect(cursorConfig.hover?.prox).toBe(DEFAULT_HOVER_PROXIMITY_VALUE);
-			expect(cursorConfig.points).toBeDefined();
-		});
-
-		it('returns hover prox as DEFAULT_HOVER_PROXIMITY_VALUE when stepInterval is not set', () => {
-			const builder = new UPlotConfigBuilder();
-
-			const cursorConfig = builder.getCursorConfig();
-
-			expect(cursorConfig.hover?.prox).toBe(DEFAULT_HOVER_PROXIMITY_VALUE);
-		});
-
-		it('returns hover prox as function when stepInterval is set, computing width * multiplier', () => {
-			const stepInterval = 60;
-			const mockWidth = 100;
-			calculateWidthBasedOnStepIntervalMock.mockReturnValue(mockWidth);
-
-			const builder = new UPlotConfigBuilder({ stepInterval });
-			const cursorConfig = builder.getCursorConfig();
-
-			expect(typeof cursorConfig.hover?.prox).toBe('function');
-
-			const uPlotInstance = {} as uPlot;
-			const proxResult = (cursorConfig.hover!.prox as (u: uPlot) => number)(
-				uPlotInstance,
-			);
-
-			expect(calculateWidthBasedOnStepIntervalMock).toHaveBeenCalledWith({
-				uPlotInstance,
-				stepInterval,
-			});
-			expect(proxResult).toBe(mockWidth * STEP_INTERVAL_MULTIPLIER);
-		});
-	});
-
 	it('adds plugins and includes them in config', () => {
 		const builder = new UPlotConfigBuilder();
 		const plugin: uPlot.Plugin = {

frontend/src/lib/uPlotV2/config/types.ts

@@ -1,6 +1,6 @@
 import { PrecisionOption } from 'components/Graph/types';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import uPlot, { Series } from 'uplot';
+import uPlot, { Cursor, Options, Series } from 'uplot';
 
 import { ThresholdsDrawHookOptions } from '../hooks/types';
 
@@ -39,7 +39,6 @@ export interface ConfigBuilderProps {
 	tzDate?: uPlot.LocalDateFromUnix;
 	selectionPreferencesSource?: SelectionPreferencesSource;
 	shouldSaveSelectionPreference?: boolean;
-	stepInterval?: number;
 }
 
 /**
@@ -187,3 +186,47 @@ export interface LegendItem {
 	color: uPlot.Series['stroke'];
 	show: boolean;
 }
+
+export const DEFAULT_PLOT_CONFIG: Partial<Options> = {
+	focus: {
+		alpha: 0.3,
+	},
+	cursor: {
+		focus: {
+			prox: 30,
+		},
+	},
+	legend: {
+		show: false,
+	},
+	padding: [16, 16, 8, 8],
+	series: [],
+	hooks: {},
+};
+
+const POINTS_FILL_COLOR = '#FFFFFF';
+
+export const DEFAULT_CURSOR_CONFIG: Cursor = {
+	drag: { setScale: true },
+	points: {
+		one: true,
+		size: (u, seriesIdx) => (u.series[seriesIdx]?.points?.size ?? 0) * 3,
+		width: (_u, _seriesIdx, size) => size / 4,
+		stroke: (u, seriesIdx): string => {
+			const points = u.series[seriesIdx]?.points;
+			const strokeFn =
+				typeof points?.stroke === 'function' ? points.stroke : undefined;
+			const strokeValue =
+				strokeFn !== undefined
+					? strokeFn(u, seriesIdx)
+					: typeof points?.stroke === 'string'
+					? points.stroke
+					: '';
+			return `${strokeValue}90`;
+		},
+		fill: (): string => POINTS_FILL_COLOR,
+	},
+	focus: {
+		prox: 30,
+	},
+};

frontend/src/lib/uPlotV2/constants.ts

@@ -1,48 +0,0 @@
-import { Cursor, Options } from 'uplot';
-
-const POINTS_FILL_COLOR = '#FFFFFF';
-
-export const DEFAULT_HOVER_PROXIMITY_VALUE = 30; // only snap if within 30px horizontally
-export const DEFAULT_FOCUS_PROXIMITY_VALUE = 1e6;
-export const STEP_INTERVAL_MULTIPLIER = 3; // multiply the width computed by STEP_INTERVAL_MULTIPLIER to get the hover prox value
-
-export const DEFAULT_PLOT_CONFIG: Partial<Options> = {
-	focus: {
-		alpha: 0.3,
-	},
-	legend: {
-		show: false,
-	},
-	padding: [16, 16, 8, 8],
-	series: [],
-	hooks: {},
-};
-
-export const DEFAULT_CURSOR_CONFIG: Cursor = {
-	drag: { setScale: true },
-	points: {
-		one: true,
-		size: (u, seriesIdx) => (u.series[seriesIdx]?.points?.size ?? 0) * 3,
-		width: (_u, _seriesIdx, size) => size / 4,
-		stroke: (u, seriesIdx): string => {
-			const points = u.series[seriesIdx]?.points;
-			const strokeFn =
-				typeof points?.stroke === 'function' ? points.stroke : undefined;
-			const strokeValue =
-				strokeFn !== undefined
-					? strokeFn(u, seriesIdx)
-					: typeof points?.stroke === 'string'
-					? points.stroke
-					: '';
-			return `${strokeValue}90`;
-		},
-		fill: (): string => POINTS_FILL_COLOR,
-	},
-	focus: {
-		prox: DEFAULT_FOCUS_PROXIMITY_VALUE,
-	},
-	hover: {
-		prox: DEFAULT_HOVER_PROXIMITY_VALUE,
-		bias: 0,
-	},
-};

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/tooltipController.ts

@@ -87,7 +87,7 @@ export function shouldShowTooltipForSync(
 export function shouldShowTooltipForInteraction(
 	controller: TooltipControllerState,
 ): boolean {
-	return controller.focusedSeriesIndex != null;
+	return controller.focusedSeriesIndex != null || controller.isAnySeriesActive;
 }
 
 export function updateHoverState(

frontend/src/lib/uPlotV2/utils/__tests__/index.test.ts

@@ -1,70 +0,0 @@
-import uPlot from 'uplot';
-
-import { calculateWidthBasedOnStepInterval } from '../index';
-
-describe('calculateWidthBasedOnStepInterval', () => {
-	it('returns pixel width between start and start+stepInterval when xScale exists with numeric min', () => {
-		const valToPos = jest
-			.fn()
-			.mockReturnValueOnce(100) // startPx for start
-			.mockReturnValueOnce(250); // endPx for start + stepInterval
-
-		const uPlotInstance = ({
-			scales: { x: { min: 1000 } },
-			valToPos,
-		} as unknown) as uPlot;
-
-		const result = calculateWidthBasedOnStepInterval({
-			uPlotInstance,
-			stepInterval: 60,
-		});
-
-		expect(valToPos).toHaveBeenCalledWith(1000, 'x');
-		expect(valToPos).toHaveBeenCalledWith(1060, 'x');
-		expect(result).toBe(150); // Math.abs(250 - 100)
-	});
-
-	it('returns absolute pixel width when endPx is less than startPx', () => {
-		const valToPos = jest.fn().mockReturnValueOnce(250).mockReturnValueOnce(100);
-
-		const uPlotInstance = ({
-			scales: { x: { min: 0 } },
-			valToPos,
-		} as unknown) as uPlot;
-
-		const result = calculateWidthBasedOnStepInterval({
-			uPlotInstance,
-			stepInterval: 60,
-		});
-
-		expect(result).toBe(150); // Math.abs(100 - 250)
-	});
-
-	it('returns 0 when xScale is undefined', () => {
-		const uPlotInstance = ({
-			scales: { x: undefined },
-			valToPos: jest.fn(),
-		} as unknown) as uPlot;
-
-		const result = calculateWidthBasedOnStepInterval({
-			uPlotInstance,
-			stepInterval: 60,
-		});
-
-		expect(result).toBe(0);
-	});
-
-	it('returns 0 when xScale.min is not a number', () => {
-		const uPlotInstance = ({
-			scales: { x: { min: undefined } },
-			valToPos: jest.fn(),
-		} as unknown) as uPlot;
-
-		const result = calculateWidthBasedOnStepInterval({
-			uPlotInstance,
-			stepInterval: 60,
-		});
-
-		expect(result).toBe(0);
-	});
-});

frontend/src/lib/uPlotV2/utils/index.ts

@@ -1,17 +0,0 @@
-export function calculateWidthBasedOnStepInterval({
-	uPlotInstance,
-	stepInterval,
-}: {
-	uPlotInstance: uPlot;
-	stepInterval: number;
-}): number {
-	const xScale = uPlotInstance.scales.x;
-	if (xScale && typeof xScale.min === 'number') {
-		const start = xScale.min as number;
-		const end = start + stepInterval;
-		const startPx = uPlotInstance.valToPos(start, 'x');
-		const endPx = uPlotInstance.valToPos(end, 'x');
-		return Math.abs(endPx - startPx);
-	}
-	return 0;
-}

frontend/src/pages/AlertDetails/AlertDetails.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import { Breadcrumb, Button, Divider } from 'antd';
@@ -18,6 +18,7 @@ import {
 	NEW_ALERT_SCHEMA_VERSION,
 	PostableAlertRuleV2,
 } from 'types/api/alerts/alertTypesV2';
+import { navigateToPage } from 'utils/navigation';
 
 import AlertHeader from './AlertHeader/AlertHeader';
 import AlertNotFound from './AlertNotFound';
@@ -58,11 +59,11 @@ function BreadCrumbItem({
 	if (isLast) {
 		return <div className="breadcrumb-item breadcrumb-item--last">{title}</div>;
 	}
-	const handleNavigate = (): void => {
+	const handleNavigate = (e: React.MouseEvent): void => {
 		if (!route) {
 			return;
 		}
-		history.push(ROUTES.LIST_ALL_ALERT);
+		navigateToPage(ROUTES.LIST_ALL_ALERT, history.push, e);
 	};
 
 	return (

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Button, Typography } from 'antd';
 import ROUTES from 'constants/routes';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
@@ -15,8 +16,8 @@ function AlertNotFound({ isTestAlert }: AlertNotFoundProps): JSX.Element {
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
 	const { safeNavigate } = useSafeNavigate();
 
-	const checkAllRulesHandler = (): void => {
-		safeNavigate(ROUTES.LIST_ALL_ALERT);
+	const checkAllRulesHandler = (e?: React.MouseEvent): void => {
+		safeNavigate(ROUTES.LIST_ALL_ALERT, { event: e });
 	};
 
 	const contactSupportHandler = (): void => {

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

@@ -69,7 +69,10 @@ describe('AlertNotFound', () => {
 		const user = userEvent.setup();
 		render(<AlertNotFound isTestAlert={false} />);
 		await user.click(screen.getByText('Check all rules'));
-		expect(mockSafeNavigate).toHaveBeenCalledWith(ROUTES.LIST_ALL_ALERT);
+		expect(mockSafeNavigate).toHaveBeenCalledWith(
+			ROUTES.LIST_ALL_ALERT,
+			expect.objectContaining({ event: expect.any(Object) }),
+		);
 	});
 
 	it('should navigate to the correct support page for cloud users when button is clicked', async () => {

frontend/src/pages/AlertTypeSelection/AlertTypeSelection.tsx

@@ -18,7 +18,7 @@ function AlertTypeSelectionPage(): JSX.Element {
 	}, []);
 
 	const handleSelectType = useCallback(
-		(type: AlertTypes): void => {
+		(type: AlertTypes, event?: React.MouseEvent): void => {
 			// For anamoly based alert, we need to set the ruleType to anomaly_rule
 			// and alertType to metrics_based_alert
 			if (type === AlertTypes.ANOMALY_BASED_ALERT) {
@@ -41,7 +41,7 @@ function AlertTypeSelectionPage(): JSX.Element {
 				queryParams.set(QueryParams.showClassicCreateAlertsPage, 'true');
 			}
 
-			safeNavigate(`${ROUTES.ALERTS_NEW}?${queryParams.toString()}`);
+			safeNavigate(`${ROUTES.ALERTS_NEW}?${queryParams.toString()}`, { event });
 		},
 		[queryParams, safeNavigate],
 	);

frontend/src/pages/Integrations/Header.tsx

@@ -1,14 +1,14 @@
-import { useHistory } from 'react-router-dom';
 import { Button, Flex, Typography } from 'antd';
 import ROUTES from 'constants/routes';
+import history from 'lib/history';
 import { ArrowRight } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
+import { navigateToPage } from 'utils/navigation';
 import { routePermission } from 'utils/permission';
 
 import './Integrations.styles.scss';
 
 function Header(): JSX.Element {
-	const history = useHistory();
 	const { user } = useAppContext();
 
 	const isGetStartedWithCloudAllowed = routePermission.GET_STARTED_WITH_CLOUD.includes(
@@ -30,7 +30,9 @@ function Header(): JSX.Element {
 					<Button
 						className="periscope-btn primary view-data-sources-btn"
 						type="primary"
-						onClick={(): void => history.push(ROUTES.GET_STARTED_WITH_CLOUD)}
+						onClick={(e): void =>
+							navigateToPage(ROUTES.GET_STARTED_WITH_CLOUD, history.push, e)
+						}
 					>
 						<span>View 150+ Data Sources</span>
 						<ArrowRight size={14} />

frontend/src/pages/MessagingQueues/MQDetailPage/MQDetailPage.tsx

@@ -7,6 +7,7 @@ import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import useUrlQuery from 'hooks/useUrlQuery';
+import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import {
 	MessagingQueuesViewType,
@@ -64,8 +65,14 @@ function MQDetailPage(): JSX.Element {
 		selectedView !== MessagingQueuesViewType.dropRate.value &&
 		selectedView !== MessagingQueuesViewType.metricPage.value;
 
-	const handleBackClick = (): void => {
-		history.push(ROUTES.MESSAGING_QUEUES_KAFKA);
+	const handleBackClick = (
+		event?: React.MouseEvent | React.KeyboardEvent,
+	): void => {
+		if (event && isModifierKeyPressed(event as React.MouseEvent)) {
+			openInNewTab(ROUTES.MESSAGING_QUEUES_KAFKA);
+		} else {
+			history.push(ROUTES.MESSAGING_QUEUES_KAFKA);
+		}
 	};
 
 	return (
@@ -77,7 +84,7 @@ function MQDetailPage(): JSX.Element {
 						className="message-queue-text"
 						onKeyDown={(e): void => {
 							if (e.key === 'Enter' || e.key === ' ') {
-								handleBackClick();
+								handleBackClick(e);
 							}
 						}}
 						role="button"

frontend/src/pages/MessagingQueues/MQDetails/MQTables/MQTables.tsx

@@ -30,6 +30,7 @@ import {
 	setConfigDetail,
 } from 'pages/MessagingQueues/MessagingQueuesUtils';
 import { ErrorResponse, SuccessResponse } from 'types/api';
+import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 import { formatNumericValue } from 'utils/numericUtils';
 
 import { getTableDataForProducerLatencyOverview } from './MQTableUtils';
@@ -80,7 +81,12 @@ export function getColumns(
 								onClick={(e): void => {
 									e.preventDefault();
 									e.stopPropagation();
-									history.push(`/services/${encodeURIComponent(text)}`);
+									const path = `/services/${encodeURIComponent(text)}`;
+									if (isModifierKeyPressed(e)) {
+										openInNewTab(path);
+									} else {
+										history.push(path);
+									}
 								}}
 							>
 								{text}

frontend/src/pages/MessagingQueues/MessagingQueues.tsx

@@ -10,6 +10,7 @@ import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
+import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import {
 	KAFKA_SETUP_DOC_LINK,
@@ -23,26 +24,40 @@ function MessagingQueues(): JSX.Element {
 	const history = useHistory();
 	const { t } = useTranslation('messagingQueuesKafkaOverview');
 
-	const redirectToDetailsPage = (callerView?: string): void => {
+	const redirectToDetailsPage = (
+		callerView?: string,
+		event?: React.MouseEvent,
+	): void => {
 		logEvent('Messaging Queues: View details clicked', {
 			page: 'Messaging Queues Overview',
 			source: callerView,
 		});
 
-		history.push(
-			`${ROUTES.MESSAGING_QUEUES_KAFKA_DETAIL}?${QueryParams.mqServiceView}=${callerView}`,
-		);
+		const path = `${ROUTES.MESSAGING_QUEUES_KAFKA_DETAIL}?${QueryParams.mqServiceView}=${callerView}`;
+		if (event && isModifierKeyPressed(event)) {
+			openInNewTab(path);
+		} else {
+			history.push(path);
+		}
 	};
 
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
 
-	const getStartedRedirect = (link: string, sourceCard: string): void => {
+	const getStartedRedirect = (
+		link: string,
+		sourceCard: string,
+		event?: React.MouseEvent,
+	): void => {
 		logEvent('Messaging Queues: Get started clicked', {
 			source: sourceCard,
 			link: isCloudUserVal ? link : KAFKA_SETUP_DOC_LINK,
 		});
 		if (isCloudUserVal) {
-			history.push(link);
+			if (event && isModifierKeyPressed(event)) {
+				openInNewTab(link);
+			} else {
+				history.push(link);
+			}
 		} else {
 			window.open(KAFKA_SETUP_DOC_LINK, '_blank');
 		}
@@ -79,10 +94,11 @@ function MessagingQueues(): JSX.Element {
 						<div className="button-grp">
 							<Button
 								type="default"
-								onClick={(): void =>
+								onClick={(e): void =>
 									getStartedRedirect(
 										`${ROUTES.GET_STARTED_APPLICATION_MONITORING}?${QueryParams.getStartedSource}=kafka&${QueryParams.getStartedSourceService}=${MessagingQueueHealthCheckService.Consumers}`,
 										'Configure Consumer',
+										e,
 									)
 								}
 							>
@@ -98,10 +114,11 @@ function MessagingQueues(): JSX.Element {
 						<div className="button-grp">
 							<Button
 								type="default"
-								onClick={(): void =>
+								onClick={(e): void =>
 									getStartedRedirect(
 										`${ROUTES.GET_STARTED_APPLICATION_MONITORING}?${QueryParams.getStartedSource}=kafka&${QueryParams.getStartedSourceService}=${MessagingQueueHealthCheckService.Producers}`,
 										'Configure Producer',
+										e,
 									)
 								}
 							>
@@ -117,10 +134,11 @@ function MessagingQueues(): JSX.Element {
 						<div className="button-grp">
 							<Button
 								type="default"
-								onClick={(): void =>
+								onClick={(e): void =>
 									getStartedRedirect(
 										`${ROUTES.GET_STARTED_INFRASTRUCTURE_MONITORING}?${QueryParams.getStartedSource}=kafka&${QueryParams.getStartedSourceService}=${MessagingQueueHealthCheckService.Kafka}`,
 										'Monitor kafka',
+										e,
 									)
 								}
 							>
@@ -143,8 +161,8 @@ function MessagingQueues(): JSX.Element {
 						<div className="button-grp">
 							<Button
 								type="default"
-								onClick={(): void =>
-									redirectToDetailsPage(MessagingQueuesViewType.consumerLag.value)
+								onClick={(e): void =>
+									redirectToDetailsPage(MessagingQueuesViewType.consumerLag.value, e)
 								}
 							>
 								{t('summarySection.viewDetailsButton')}
@@ -161,8 +179,8 @@ function MessagingQueues(): JSX.Element {
 						<div className="button-grp">
 							<Button
 								type="default"
-								onClick={(): void =>
-									redirectToDetailsPage(MessagingQueuesViewType.producerLatency.value)
+								onClick={(e): void =>
+									redirectToDetailsPage(MessagingQueuesViewType.producerLatency.value, e)
 								}
 							>
 								{t('summarySection.viewDetailsButton')}
@@ -179,8 +197,11 @@ function MessagingQueues(): JSX.Element {
 						<div className="button-grp">
 							<Button
 								type="default"
-								onClick={(): void =>
-									redirectToDetailsPage(MessagingQueuesViewType.partitionLatency.value)
+								onClick={(e): void =>
+									redirectToDetailsPage(
+										MessagingQueuesViewType.partitionLatency.value,
+										e,
+									)
 								}
 							>
 								{t('summarySection.viewDetailsButton')}
@@ -197,8 +218,8 @@ function MessagingQueues(): JSX.Element {
 						<div className="button-grp">
 							<Button
 								type="default"
-								onClick={(): void =>
-									redirectToDetailsPage(MessagingQueuesViewType.dropRate.value)
+								onClick={(e): void =>
+									redirectToDetailsPage(MessagingQueuesViewType.dropRate.value, e)
 								}
 							>
 								{t('summarySection.viewDetailsButton')}
@@ -215,8 +236,8 @@ function MessagingQueues(): JSX.Element {
 						<div className="button-grp">
 							<Button
 								type="default"
-								onClick={(): void =>
-									redirectToDetailsPage(MessagingQueuesViewType.metricPage.value)
+								onClick={(e): void =>
+									redirectToDetailsPage(MessagingQueuesViewType.metricPage.value, e)
 								}
 							>
 								{t('summarySection.viewDetailsButton')}

frontend/src/pages/Settings/Settings.tsx

@@ -16,6 +16,7 @@ import history from 'lib/history';
 import { Cog } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { USER_ROLES } from 'types/roles';
+import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { getRoutes } from './utils';
 
@@ -184,12 +185,6 @@ function SettingsPage(): JSX.Element {
 		],
 	);
 
-	const isCtrlMetaKey = (e: MouseEvent): boolean => e.ctrlKey || e.metaKey;
-
-	const openInNewTab = (path: string): void => {
-		window.open(path, '_blank');
-	};
-
 	const onClickHandler = useCallback(
 		(key: string, event: MouseEvent | null) => {
 			const params = new URLSearchParams(search);
@@ -198,7 +193,7 @@ function SettingsPage(): JSX.Element {
 			const queryString = getQueryString(availableParams || [], params);
 
 			if (pathname !== key) {
-				if (event && isCtrlMetaKey(event)) {
+				if (event && isModifierKeyPressed(event)) {
 					openInNewTab(`${key}?${queryString.join('&')}`);
 				} else {
 					history.push(`${key}?${queryString.join('&')}`, {

frontend/src/pages/WorkspaceLocked/WorkspaceLocked.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-unescaped-entities */
-import { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMutation } from 'react-query';
 import type { TabsProps } from 'antd';
@@ -27,6 +27,7 @@ import { CircleArrowRight } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import APIError from 'types/api/error';
 import { LicensePlatform } from 'types/api/licensesV3/getActive';
+import { navigateToPage } from 'utils/navigation';
 import { getFormattedDate } from 'utils/timeUtils';
 
 import CustomerStoryCard from './CustomerStoryCard';
@@ -133,10 +134,10 @@ export default function WorkspaceBlocked(): JSX.Element {
 		});
 	};
 
-	const handleViewBilling = (): void => {
+	const handleViewBilling = (e?: React.MouseEvent): void => {
 		logEvent('Workspace Blocked: User Clicked View Billing', {});
 
-		history.push(ROUTES.BILLING);
+		navigateToPage(ROUTES.BILLING, history.push, e);
 	};
 
 	const renderCustomerStories = (
@@ -296,7 +297,7 @@ export default function WorkspaceBlocked(): JSX.Element {
 										type="link"
 										size="small"
 										role="button"
-										onClick={handleViewBilling}
+										onClick={(e): void => handleViewBilling(e)}
 									>
 										View Billing
 									</Button>

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

@@ -0,0 +1,123 @@
+import {
+	isModifierKeyPressed,
+	navigateToPage,
+	openInNewTab,
+} from '../navigation';
+
+describe('navigation utilities', () => {
+	const originalWindowOpen = window.open;
+
+	beforeEach(() => {
+		window.open = jest.fn();
+	});
+
+	afterEach(() => {
+		window.open = originalWindowOpen;
+	});
+
+	describe('isModifierKeyPressed', () => {
+		const createMouseEvent = (overrides: Partial<MouseEvent> = {}): MouseEvent =>
+			({
+				metaKey: false,
+				ctrlKey: false,
+				...overrides,
+			} as MouseEvent);
+
+		it('returns true when metaKey is pressed (Cmd on Mac)', () => {
+			const event = createMouseEvent({ metaKey: true });
+			expect(isModifierKeyPressed(event)).toBe(true);
+		});
+
+		it('returns true when ctrlKey is pressed (Ctrl on Windows/Linux)', () => {
+			const event = createMouseEvent({ ctrlKey: true });
+			expect(isModifierKeyPressed(event)).toBe(true);
+		});
+
+		it('returns true when both metaKey and ctrlKey are pressed', () => {
+			const event = createMouseEvent({ metaKey: true, ctrlKey: true });
+			expect(isModifierKeyPressed(event)).toBe(true);
+		});
+
+		it('returns false when neither modifier key is pressed', () => {
+			const event = createMouseEvent();
+			expect(isModifierKeyPressed(event)).toBe(false);
+		});
+
+		it('returns false when only shiftKey or altKey are pressed', () => {
+			const event = createMouseEvent({
+				shiftKey: true,
+				altKey: true,
+			} as Partial<MouseEvent>);
+			expect(isModifierKeyPressed(event)).toBe(false);
+		});
+	});
+
+	describe('openInNewTab', () => {
+		it('calls window.open with the given path and _blank target', () => {
+			openInNewTab('/dashboard');
+			expect(window.open).toHaveBeenCalledWith('/dashboard', '_blank');
+		});
+
+		it('handles full URLs', () => {
+			openInNewTab('https://example.com/page');
+			expect(window.open).toHaveBeenCalledWith(
+				'https://example.com/page',
+				'_blank',
+			);
+		});
+
+		it('handles paths with query strings', () => {
+			openInNewTab('/alerts?tab=AlertRules&relativeTime=30m');
+			expect(window.open).toHaveBeenCalledWith(
+				'/alerts?tab=AlertRules&relativeTime=30m',
+				'_blank',
+			);
+		});
+	});
+
+	describe('navigateToPage', () => {
+		const mockNavigate = jest.fn() as jest.MockedFunction<(path: string) => void>;
+
+		beforeEach(() => {
+			mockNavigate.mockClear();
+		});
+
+		it('opens new tab when metaKey is pressed', () => {
+			const event = { metaKey: true, ctrlKey: false } as MouseEvent;
+			navigateToPage('/services', mockNavigate, event);
+
+			expect(window.open).toHaveBeenCalledWith('/services', '_blank');
+			expect(mockNavigate).not.toHaveBeenCalled();
+		});
+
+		it('opens new tab when ctrlKey is pressed', () => {
+			const event = { metaKey: false, ctrlKey: true } as MouseEvent;
+			navigateToPage('/services', mockNavigate, event);
+
+			expect(window.open).toHaveBeenCalledWith('/services', '_blank');
+			expect(mockNavigate).not.toHaveBeenCalled();
+		});
+
+		it('calls navigate callback when no modifier key is pressed', () => {
+			const event = { metaKey: false, ctrlKey: false } as MouseEvent;
+			navigateToPage('/services', mockNavigate, event);
+
+			expect(mockNavigate).toHaveBeenCalledWith('/services');
+			expect(window.open).not.toHaveBeenCalled();
+		});
+
+		it('calls navigate callback when no event is provided', () => {
+			navigateToPage('/services', mockNavigate);
+
+			expect(mockNavigate).toHaveBeenCalledWith('/services');
+			expect(window.open).not.toHaveBeenCalled();
+		});
+
+		it('calls navigate callback when event is undefined', () => {
+			navigateToPage('/dashboard', mockNavigate, undefined);
+
+			expect(mockNavigate).toHaveBeenCalledWith('/dashboard');
+			expect(window.open).not.toHaveBeenCalled();
+		});
+	});
+});

frontend/src/utils/navigation.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+
+/**
+ * Returns true if the user is holding Cmd (Mac) or Ctrl (Windows/Linux)
+ * during a click event — the universal "open in new tab" modifier.
+ */
+export const isModifierKeyPressed = (
+	event: MouseEvent | React.MouseEvent,
+): boolean => event.metaKey || event.ctrlKey;
+
+/**
+ * Opens the given path in a new browser tab.
+ */
+export const openInNewTab = (path: string): void => {
+	window.open(path, '_blank');
+};
+
+/**
+ * Navigates to a path, respecting modifier keys. If Cmd/Ctrl is held,
+ * the path is opened in a new tab. Otherwise, the provided `navigate`
+ * callback is invoked for SPA navigation.
+ *
+ * @param path - The target URL path
+ * @param navigate - SPA navigation callback (e.g. history.push, safeNavigate)
+ * @param event - Optional mouse event to check for modifier keys
+ */
+export const navigateToPage = (
+	path: string,
+	navigate: (path: string) => void,
+	event?: MouseEvent | React.MouseEvent,
+): void => {
+	if (event && isModifierKeyPressed(event)) {
+		openInNewTab(path);
+	} else {
+		navigate(path);
+	}
+};

pkg/apiserver/signozapiserver/metricsexplorer.go

@@ -10,26 +10,6 @@ import (
 )
 
 func (provider *provider) addMetricsExplorerRoutes(router *mux.Router) error {
-	if err := router.Handle("/api/v2/metrics", handler.New(
-		provider.authZ.ViewAccess(provider.metricsExplorerHandler.ListMetrics),
-		handler.OpenAPIDef{
-			ID:                  "ListMetrics",
-			Tags:                []string{"metrics"},
-			Summary:             "List metric names",
-			Description:         "This endpoint returns a list of distinct metric names within the specified time range",
-			Request:             nil,
-			RequestQuery:        new(metricsexplorertypes.ListMetricsParams),
-			RequestContentType:  "",
-			Response:            new(metricsexplorertypes.ListMetricsResponse),
-			ResponseContentType: "application/json",
-			SuccessStatusCode:   http.StatusOK,
-			ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusUnauthorized, http.StatusInternalServerError},
-			Deprecated:          false,
-			SecuritySchemes:     newSecuritySchemes(types.RoleViewer),
-		})).Methods(http.MethodGet).GetError(); err != nil {
-		return err
-	}
-
 	if err := router.Handle("/api/v2/metrics/stats", handler.New(
 		provider.authZ.ViewAccess(provider.metricsExplorerHandler.GetStats),
 		handler.OpenAPIDef{
@@ -68,27 +48,26 @@ func (provider *provider) addMetricsExplorerRoutes(router *mux.Router) error {
 		return err
 	}
 
-	if err := router.Handle("/api/v2/metrics/{metric_name}/attributes", handler.New(
+	if err := router.Handle("/api/v2/metrics/attributes", handler.New(
 		provider.authZ.ViewAccess(provider.metricsExplorerHandler.GetMetricAttributes),
 		handler.OpenAPIDef{
 			ID:                  "GetMetricAttributes",
 			Tags:                []string{"metrics"},
 			Summary:             "Get metric attributes",
 			Description:         "This endpoint returns attribute keys and their unique values for a specified metric",
-			Request:             nil,
-			RequestQuery:        new(metricsexplorertypes.MetricAttributesRequest),
-			RequestContentType:  "",
+			Request:             new(metricsexplorertypes.MetricAttributesRequest),
+			RequestContentType:  "application/json",
 			Response:            new(metricsexplorertypes.MetricAttributesResponse),
 			ResponseContentType: "application/json",
 			SuccessStatusCode:   http.StatusOK,
 			ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusUnauthorized, http.StatusInternalServerError},
 			Deprecated:          false,
 			SecuritySchemes:     newSecuritySchemes(types.RoleViewer),
-		})).Methods(http.MethodGet).GetError(); err != nil {
+		})).Methods(http.MethodPost).GetError(); err != nil {
 		return err
 	}
 
-	if err := router.Handle("/api/v2/metrics/{metric_name}/metadata", handler.New(
+	if err := router.Handle("/api/v2/metrics/metadata", handler.New(
 		provider.authZ.ViewAccess(provider.metricsExplorerHandler.GetMetricMetadata),
 		handler.OpenAPIDef{
 			ID:                  "GetMetricMetadata",
@@ -96,6 +75,7 @@ func (provider *provider) addMetricsExplorerRoutes(router *mux.Router) error {
 			Summary:             "Get metric metadata",
 			Description:         "This endpoint returns metadata information like metric description, unit, type, temporality, monotonicity for a specified metric",
 			Request:             nil,
+			RequestQuery:        new(metricsexplorertypes.MetricNameParams),
 			RequestContentType:  "",
 			Response:            new(metricsexplorertypes.MetricMetadata),
 			ResponseContentType: "application/json",
@@ -126,7 +106,7 @@ func (provider *provider) addMetricsExplorerRoutes(router *mux.Router) error {
 		return err
 	}
 
-	if err := router.Handle("/api/v2/metrics/{metric_name}/highlights", handler.New(
+	if err := router.Handle("/api/v2/metric/highlights", handler.New(
 		provider.authZ.ViewAccess(provider.metricsExplorerHandler.GetMetricHighlights),
 		handler.OpenAPIDef{
 			ID:                  "GetMetricHighlights",
@@ -134,6 +114,7 @@ func (provider *provider) addMetricsExplorerRoutes(router *mux.Router) error {
 			Summary:             "Get metric highlights",
 			Description:         "This endpoint returns highlights like number of datapoints, totaltimeseries, active time series, last received time for a specified metric",
 			Request:             nil,
+			RequestQuery:        new(metricsexplorertypes.MetricNameParams),
 			RequestContentType:  "",
 			Response:            new(metricsexplorertypes.MetricHighlightsResponse),
 			ResponseContentType: "application/json",
@@ -145,7 +126,7 @@ func (provider *provider) addMetricsExplorerRoutes(router *mux.Router) error {
 		return err
 	}
 
-	if err := router.Handle("/api/v2/metrics/{metric_name}/alerts", handler.New(
+	if err := router.Handle("/api/v2/metric/alerts", handler.New(
 		provider.authZ.ViewAccess(provider.metricsExplorerHandler.GetMetricAlerts),
 		handler.OpenAPIDef{
 			ID:                  "GetMetricAlerts",
@@ -153,6 +134,7 @@ func (provider *provider) addMetricsExplorerRoutes(router *mux.Router) error {
 			Summary:             "Get metric alerts",
 			Description:         "This endpoint returns associated alerts for a specified metric",
 			Request:             nil,
+			RequestQuery:        new(metricsexplorertypes.MetricNameParams),
 			RequestContentType:  "",
 			Response:            new(metricsexplorertypes.MetricAlertsResponse),
 			ResponseContentType: "application/json",
@@ -164,7 +146,7 @@ func (provider *provider) addMetricsExplorerRoutes(router *mux.Router) error {
 		return err
 	}
 
-	if err := router.Handle("/api/v2/metrics/{metric_name}/dashboards", handler.New(
+	if err := router.Handle("/api/v2/metric/dashboards", handler.New(
 		provider.authZ.ViewAccess(provider.metricsExplorerHandler.GetMetricDashboards),
 		handler.OpenAPIDef{
 			ID:                  "GetMetricDashboards",
@@ -172,6 +154,7 @@ func (provider *provider) addMetricsExplorerRoutes(router *mux.Router) error {
 			Summary:             "Get metric dashboards",
 			Description:         "This endpoint returns associated dashboards for a specified metric",
 			Request:             nil,
+			RequestQuery:        new(metricsexplorertypes.MetricNameParams),
 			RequestContentType:  "",
 			Response:            new(metricsexplorertypes.MetricDashboardsResponse),
 			ResponseContentType: "application/json",

pkg/http/handler/handler.go

@@ -7,7 +7,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/http/render"
 	"github.com/swaggest/openapi-go"
-	"github.com/swaggest/openapi-go/openapi3"
 )
 
 type ServeOpenAPIFunc func(openapi.OperationContext)
@@ -60,39 +59,7 @@ func (handler *handler) ServeOpenAPI(opCtx openapi.OperationContext) {
 	}
 
 	// Add request structure
-	reqOpts := []openapi.ContentOption{openapi.WithContentType(handler.openAPIDef.RequestContentType)}
-	if len(handler.openAPIDef.RequestExamples) > 0 {
-		reqOpts = append(reqOpts, openapi.WithCustomize(func(cor openapi.ContentOrReference) {
-			rbOrRef, ok := cor.(*openapi3.RequestBodyOrRef)
-			if !ok || rbOrRef.RequestBody == nil {
-				return
-			}
-			ct := handler.openAPIDef.RequestContentType
-			if ct == "" {
-				ct = "application/json"
-			}
-			mt, exists := rbOrRef.RequestBody.Content[ct]
-			if !exists {
-				return
-			}
-			if mt.Examples == nil {
-				mt.Examples = make(map[string]openapi3.ExampleOrRef)
-			}
-			for _, ex := range handler.openAPIDef.RequestExamples {
-				val := ex.Value
-				oaExample := openapi3.Example{Value: &val}
-				if ex.Summary != "" {
-					oaExample.WithSummary(ex.Summary)
-				}
-				if ex.Description != "" {
-					oaExample.WithDescription(ex.Description)
-				}
-				mt.Examples[ex.Name] = openapi3.ExampleOrRef{Example: &oaExample}
-			}
-			rbOrRef.RequestBody.Content[ct] = mt
-		}))
-	}
-	opCtx.AddReqStructure(handler.openAPIDef.Request, reqOpts...)
+	opCtx.AddReqStructure(handler.openAPIDef.Request, openapi.WithContentType(handler.openAPIDef.RequestContentType))
 
 	// Add request query structure
 	opCtx.AddReqStructure(handler.openAPIDef.RequestQuery)

pkg/http/handler/openapi.go

@@ -9,14 +9,6 @@ import (
 	"github.com/swaggest/rest/openapi"
 )
 
-// OpenAPIExample is a named example for an OpenAPI operation.
-type OpenAPIExample struct {
-	Name        string
-	Summary     string
-	Description string
-	Value       any
-}
-
 // Def is the definition of an OpenAPI operation
 type OpenAPIDef struct {
 	ID                  string
@@ -26,7 +18,6 @@ type OpenAPIDef struct {
 	Request             any
 	RequestQuery        any
 	RequestContentType  string
-	RequestExamples     []OpenAPIExample
 	Response            any
 	ResponseContentType string
 	SuccessStatusCode   int

pkg/modules/metricsexplorer/implmetricsexplorer/handler.go

@@ -13,14 +13,6 @@ import (
 	"github.com/gorilla/mux"
 )
 
-func extractMetricName(req *http.Request) (string, error) {
-	metricName := mux.Vars(req)["metric_name"]
-	if metricName == "" {
-		return "", errors.NewInvalidInputf(errors.CodeInvalidInput, "metric_name is required in URL path")
-	}
-	return metricName, nil
-}
-
 type handler struct {
 	module metricsexplorer.Module
 }
@@ -32,34 +24,6 @@ func NewHandler(m metricsexplorer.Module) metricsexplorer.Handler {
 	}
 }
 
-func (h *handler) ListMetrics(rw http.ResponseWriter, req *http.Request) {
-	claims, err := authtypes.ClaimsFromContext(req.Context())
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	var params metricsexplorertypes.ListMetricsParams
-	if err := binding.Query.BindQuery(req.URL.Query(), &params); err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	if err := params.Validate(); err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	orgID := valuer.MustNewUUID(claims.OrgID)
-	out, err := h.module.ListMetrics(req.Context(), orgID, &params)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	render.Success(rw, http.StatusOK, out)
-}
-
 func (h *handler) GetStats(rw http.ResponseWriter, req *http.Request) {
 	claims, err := authtypes.ClaimsFromContext(req.Context())
 	if err != nil {
@@ -150,23 +114,28 @@ func (h *handler) GetMetricMetadata(rw http.ResponseWriter, req *http.Request) {
 		return
 	}
 
-	metricName, err := extractMetricName(req)
-	if err != nil {
+	var params metricsexplorertypes.MetricNameParams
+	if err := binding.Query.BindQuery(req.URL.Query(), &params); err != nil {
 		render.Error(rw, err)
 		return
 	}
 
+	if params.MetricName == "" {
+		render.Error(rw, errors.NewInvalidInputf(errors.CodeInvalidInput, "metricName query parameter is required"))
+		return
+	}
+
 	orgID := valuer.MustNewUUID(claims.OrgID)
 
-	metadataMap, err := h.module.GetMetricMetadataMulti(req.Context(), orgID, []string{metricName})
+	metadataMap, err := h.module.GetMetricMetadataMulti(req.Context(), orgID, []string{params.MetricName})
 	if err != nil {
 		render.Error(rw, err)
 		return
 	}
 
-	metadata, ok := metadataMap[metricName]
+	metadata, ok := metadataMap[params.MetricName]
 	if !ok || metadata == nil {
-		render.Error(rw, errors.NewNotFoundf(errors.CodeNotFound, "metadata not found for metric %q", metricName))
+		render.Error(rw, errors.NewNotFoundf(errors.CodeNotFound, "metadata not found for metric %q", params.MetricName))
 		return
 	}
 
@@ -180,14 +149,19 @@ func (h *handler) GetMetricAlerts(rw http.ResponseWriter, req *http.Request) {
 		return
 	}
 
-	metricName, err := extractMetricName(req)
-	if err != nil {
+	var params metricsexplorertypes.MetricNameParams
+	if err := binding.Query.BindQuery(req.URL.Query(), &params); err != nil {
 		render.Error(rw, err)
 		return
 	}
 
+	if params.MetricName == "" {
+		render.Error(rw, errors.NewInvalidInputf(errors.CodeInvalidInput, "metricName query parameter is required"))
+		return
+	}
+
 	orgID := valuer.MustNewUUID(claims.OrgID)
-	out, err := h.module.GetMetricAlerts(req.Context(), orgID, metricName)
+	out, err := h.module.GetMetricAlerts(req.Context(), orgID, params.MetricName)
 	if err != nil {
 		render.Error(rw, err)
 		return
@@ -202,14 +176,19 @@ func (h *handler) GetMetricDashboards(rw http.ResponseWriter, req *http.Request)
 		return
 	}
 
-	metricName, err := extractMetricName(req)
-	if err != nil {
+	var params metricsexplorertypes.MetricNameParams
+	if err := binding.Query.BindQuery(req.URL.Query(), &params); err != nil {
 		render.Error(rw, err)
 		return
 	}
 
+	if params.MetricName == "" {
+		render.Error(rw, errors.NewInvalidInputf(errors.CodeInvalidInput, "metricName query parameter is required"))
+		return
+	}
+
 	orgID := valuer.MustNewUUID(claims.OrgID)
-	out, err := h.module.GetMetricDashboards(req.Context(), orgID, metricName)
+	out, err := h.module.GetMetricDashboards(req.Context(), orgID, params.MetricName)
 	if err != nil {
 		render.Error(rw, err)
 		return
@@ -224,14 +203,19 @@ func (h *handler) GetMetricHighlights(rw http.ResponseWriter, req *http.Request)
 		return
 	}
 
-	metricName, err := extractMetricName(req)
-	if err != nil {
+	var params metricsexplorertypes.MetricNameParams
+	if err := binding.Query.BindQuery(req.URL.Query(), &params); err != nil {
 		render.Error(rw, err)
 		return
 	}
 
+	if params.MetricName == "" {
+		render.Error(rw, errors.NewInvalidInputf(errors.CodeInvalidInput, "metricName query parameter is required"))
+		return
+	}
+
 	orgID := valuer.MustNewUUID(claims.OrgID)
-	highlights, err := h.module.GetMetricHighlights(req.Context(), orgID, metricName)
+	highlights, err := h.module.GetMetricHighlights(req.Context(), orgID, params.MetricName)
 	if err != nil {
 		render.Error(rw, err)
 		return
@@ -246,21 +230,8 @@ func (h *handler) GetMetricAttributes(rw http.ResponseWriter, req *http.Request)
 		return
 	}
 
-	metricName, err := extractMetricName(req)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
 	var in metricsexplorertypes.MetricAttributesRequest
-	if err := binding.Query.BindQuery(req.URL.Query(), &in); err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	in.MetricName = metricName
-
-	if err := in.Validate(); err != nil {
+	if err := binding.JSON.BindBody(req.Body, &in); err != nil {
 		render.Error(rw, err)
 		return
 	}

pkg/modules/metricsexplorer/implmetricsexplorer/module.go

@@ -56,88 +56,6 @@ func NewModule(ts telemetrystore.TelemetryStore, telemetryMetadataStore telemetr
 	}
 }
 
-func (m *module) ListMetrics(ctx context.Context, orgID valuer.UUID, params *metricsexplorertypes.ListMetricsParams) (*metricsexplorertypes.ListMetricsResponse, error) {
-	if err := params.Validate(); err != nil {
-		return nil, err
-	}
-
-	sb := sqlbuilder.NewSelectBuilder()
-	sb.Select("DISTINCT metric_name")
-
-	if params.Start != nil && params.End != nil {
-		start, end, distributedTsTable, _ := telemetrymetrics.WhichTSTableToUse(uint64(*params.Start), uint64(*params.End), nil)
-		sb.From(fmt.Sprintf("%s.%s", telemetrymetrics.DBName, distributedTsTable))
-		sb.Where(sb.Between("unix_milli", start, end))
-	} else {
-		sb.From(fmt.Sprintf("%s.%s", telemetrymetrics.DBName, telemetrymetrics.TimeseriesV41weekTableName))
-	}
-
-	sb.Where(sb.E("__normalized", false))
-
-	if params.Search != "" {
-		searchLower := strings.ToLower(params.Search)
-		searchLower = strings.ReplaceAll(searchLower, "%", "\\%")
-		searchLower = strings.ReplaceAll(searchLower, "_", "\\_")
-		sb.Where(sb.Like("lower(metric_name)", fmt.Sprintf("%%%s%%", searchLower)))
-	}
-
-	sb.OrderBy("metric_name ASC")
-	sb.Limit(params.Limit)
-
-	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
-
-	valueCtx := ctxtypes.SetClickhouseMaxThreads(ctx, m.config.TelemetryStore.Threads)
-	db := m.telemetryStore.ClickhouseDB()
-	rows, err := db.Query(valueCtx, query, args...)
-	if err != nil {
-		return nil, errors.WrapInternalf(err, errors.CodeInternal, "failed to list metrics")
-	}
-	defer rows.Close()
-
-	metricNames := make([]string, 0)
-	for rows.Next() {
-		var name string
-		if err := rows.Scan(&name); err != nil {
-			return nil, errors.WrapInternalf(err, errors.CodeInternal, "failed to scan metric name")
-		}
-		metricNames = append(metricNames, name)
-	}
-
-	if err := rows.Err(); err != nil {
-		return nil, errors.WrapInternalf(err, errors.CodeInternal, "error iterating metric names")
-	}
-
-	if len(metricNames) == 0 {
-		return &metricsexplorertypes.ListMetricsResponse{
-			Metrics: []metricsexplorertypes.ListMetric{},
-		}, nil
-	}
-
-	metadata, err := m.GetMetricMetadataMulti(ctx, orgID, metricNames)
-	if err != nil {
-		return nil, err
-	}
-
-	metrics := make([]metricsexplorertypes.ListMetric, 0, len(metricNames))
-	for _, name := range metricNames {
-		metric := metricsexplorertypes.ListMetric{
-			MetricName: name,
-		}
-		if meta, ok := metadata[name]; ok && meta != nil {
-			metric.Description = meta.Description
-			metric.MetricType = meta.MetricType
-			metric.MetricUnit = meta.MetricUnit
-			metric.Temporality = meta.Temporality
-			metric.IsMonotonic = meta.IsMonotonic
-		}
-		metrics = append(metrics, metric)
-	}
-
-	return &metricsexplorertypes.ListMetricsResponse{
-		Metrics: metrics,
-	}, nil
-}
-
 func (m *module) GetStats(ctx context.Context, orgID valuer.UUID, req *metricsexplorertypes.StatsRequest) (*metricsexplorertypes.StatsResponse, error) {
 	if err := req.Validate(); err != nil {
 		return nil, err

pkg/modules/metricsexplorer/metricsexplorer.go

@@ -10,7 +10,6 @@ import (
 
 // Handler exposes HTTP handlers for the metrics module.
 type Handler interface {
-	ListMetrics(http.ResponseWriter, *http.Request)
 	GetStats(http.ResponseWriter, *http.Request)
 	GetTreemap(http.ResponseWriter, *http.Request)
 	GetMetricMetadata(http.ResponseWriter, *http.Request)
@@ -23,7 +22,6 @@ type Handler interface {
 
 // Module represents the metrics module interface.
 type Module interface {
-	ListMetrics(ctx context.Context, orgID valuer.UUID, params *metricsexplorertypes.ListMetricsParams) (*metricsexplorertypes.ListMetricsResponse, error)
 	GetStats(ctx context.Context, orgID valuer.UUID, req *metricsexplorertypes.StatsRequest) (*metricsexplorertypes.StatsResponse, error)
 	GetTreemap(ctx context.Context, orgID valuer.UUID, req *metricsexplorertypes.TreemapRequest) (*metricsexplorertypes.TreemapResponse, error)
 	GetMetricMetadataMulti(ctx context.Context, orgID valuer.UUID, metricNames []string) (map[string]*metricsexplorertypes.MetricMetadata, error)

pkg/modules/thirdpartyapi/translator.go

@@ -12,30 +12,60 @@ import (
 )
 
 const (
-	derivedKeyHTTPURL  = "http_url" // https://signoz.io/docs/traces-management/guides/derived-fields-spans/#http_url
-	derivedKeyHTTPHost = "http_host"
+	urlPathKeyLegacy       = "http.url"
+	serverAddressKeyLegacy = "net.peer.name"
+
+	urlPathKey       = "url.full"
+	serverAddressKey = "server.address"
 )
 
 var defaultStepInterval = 60 * time.Second
 
-var (
-	groupByKeyHTTPHost = qbtypes.GroupByKey{
-		TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
-			Name:          derivedKeyHTTPHost,
-			FieldDataType: telemetrytypes.FieldDataTypeString,
-			FieldContext:  telemetrytypes.FieldContextSpan,
-			Signal:        telemetrytypes.SignalTraces,
+type SemconvFieldMapping struct {
+	LegacyField  string
+	CurrentField string
+	FieldType    telemetrytypes.FieldDataType
+	Context      telemetrytypes.FieldContext
+}
+
+var dualSemconvGroupByKeys = map[string][]qbtypes.GroupByKey{
+	"server": {
+		{
+			TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
+				Name:          serverAddressKey,
+				FieldDataType: telemetrytypes.FieldDataTypeString,
+				FieldContext:  telemetrytypes.FieldContextAttribute,
+				Signal:        telemetrytypes.SignalTraces,
+			},
 		},
-	}
-	groupByKeyHTTPURL = qbtypes.GroupByKey{
-		TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
-			Name:          derivedKeyHTTPURL,
-			FieldDataType: telemetrytypes.FieldDataTypeString,
-			FieldContext:  telemetrytypes.FieldContextSpan,
-			Signal:        telemetrytypes.SignalTraces,
+		{
+			TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
+				Name:          serverAddressKeyLegacy,
+				FieldDataType: telemetrytypes.FieldDataTypeString,
+				FieldContext:  telemetrytypes.FieldContextAttribute,
+				Signal:        telemetrytypes.SignalTraces,
+			},
 		},
-	}
-)
+	},
+	"url": {
+		{
+			TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
+				Name:          urlPathKey,
+				FieldDataType: telemetrytypes.FieldDataTypeString,
+				FieldContext:  telemetrytypes.FieldContextAttribute,
+				Signal:        telemetrytypes.SignalTraces,
+			},
+		},
+		{
+			TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
+				Name:          urlPathKeyLegacy,
+				FieldDataType: telemetrytypes.FieldDataTypeString,
+				FieldContext:  telemetrytypes.FieldContextAttribute,
+				Signal:        telemetrytypes.SignalTraces,
+			},
+		},
+	},
+}
 
 func FilterIntermediateColumns(result *qbtypes.QueryRangeResponse) *qbtypes.QueryRangeResponse {
 	if result == nil || result.Data.Results == nil {
@@ -84,6 +114,103 @@ func FilterIntermediateColumns(result *qbtypes.QueryRangeResponse) *qbtypes.Quer
 	return result
 }
 
+func MergeSemconvColumns(result *qbtypes.QueryRangeResponse) *qbtypes.QueryRangeResponse {
+	if result == nil || result.Data.Results == nil {
+		return result
+	}
+
+	for _, res := range result.Data.Results {
+		scalarData, ok := res.(*qbtypes.ScalarData)
+		if !ok {
+			continue
+		}
+
+		serverAddressKeyIdx := -1
+		serverAddressKeyLegacyIdx := -1
+
+		for i, col := range scalarData.Columns {
+			if col.Name == serverAddressKey {
+				serverAddressKeyIdx = i
+			} else if col.Name == serverAddressKeyLegacy {
+				serverAddressKeyLegacyIdx = i
+			}
+		}
+
+		if serverAddressKeyIdx == -1 || serverAddressKeyLegacyIdx == -1 {
+			continue
+		}
+
+		var newRows [][]any
+		for _, row := range scalarData.Data {
+			if len(row) <= serverAddressKeyIdx || len(row) <= serverAddressKeyLegacyIdx {
+				continue
+			}
+
+			var serverName any
+			if isValidValue(row[serverAddressKeyIdx]) {
+				serverName = row[serverAddressKeyIdx]
+			} else if isValidValue(row[serverAddressKeyLegacyIdx]) {
+				serverName = row[serverAddressKeyLegacyIdx]
+			}
+
+			if serverName != nil {
+				newRow := make([]any, len(row)-1)
+				newRow[0] = serverName
+
+				targetIdx := 1
+				for i, val := range row {
+					if i != serverAddressKeyLegacyIdx && i != serverAddressKeyIdx {
+						if targetIdx < len(newRow) {
+							newRow[targetIdx] = val
+							targetIdx++
+						}
+					}
+				}
+				newRows = append(newRows, newRow)
+			}
+		}
+
+		newColumns := make([]*qbtypes.ColumnDescriptor, len(scalarData.Columns)-1)
+		targetIdx := 0
+		for i, col := range scalarData.Columns {
+			if i == serverAddressKeyIdx {
+				newCol := &qbtypes.ColumnDescriptor{
+					TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
+						Name:          serverAddressKeyLegacy,
+						FieldDataType: col.FieldDataType,
+						FieldContext:  col.FieldContext,
+						Signal:        col.Signal,
+					},
+					QueryName:        col.QueryName,
+					AggregationIndex: col.AggregationIndex,
+					Meta:             col.Meta,
+					Type:             col.Type,
+				}
+				newColumns[targetIdx] = newCol
+				targetIdx++
+			} else if i != serverAddressKeyLegacyIdx {
+				newColumns[targetIdx] = col
+				targetIdx++
+			}
+		}
+
+		scalarData.Columns = newColumns
+		scalarData.Data = newRows
+	}
+
+	return result
+}
+
+func isValidValue(val any) bool {
+	if val == nil {
+		return false
+	}
+	if str, ok := val.(string); ok {
+		return str != "" && str != "n/a"
+	}
+	return true
+}
+
 func FilterResponse(results []*qbtypes.QueryRangeResponse) []*qbtypes.QueryRangeResponse {
 	filteredResults := make([]*qbtypes.QueryRangeResponse, 0, len(results))
 
@@ -134,7 +261,7 @@ func FilterResponse(results []*qbtypes.QueryRangeResponse) []*qbtypes.QueryRange
 
 func shouldIncludeSeries(series *qbtypes.TimeSeries) bool {
 	for _, label := range series.Labels {
-		if label.Key.Name == derivedKeyHTTPHost {
+		if label.Key.Name == serverAddressKeyLegacy || label.Key.Name == serverAddressKey {
 			if strVal, ok := label.Value.(string); ok {
 				if net.ParseIP(strVal) != nil {
 					return false
@@ -147,10 +274,12 @@ func shouldIncludeSeries(series *qbtypes.TimeSeries) bool {
 
 func shouldIncludeRow(row *qbtypes.RawRow) bool {
 	if row.Data != nil {
-		if domainVal, ok := row.Data[derivedKeyHTTPHost]; ok {
-			if domainStr, ok := domainVal.(string); ok {
-				if net.ParseIP(domainStr) != nil {
-					return false
+		for _, key := range []string{serverAddressKeyLegacy, serverAddressKey} {
+			if domainVal, ok := row.Data[key]; ok {
+				if domainStr, ok := domainVal.(string); ok {
+					if net.ParseIP(domainStr) != nil {
+						return false
+					}
 				}
 			}
 		}
@@ -158,8 +287,8 @@ func shouldIncludeRow(row *qbtypes.RawRow) bool {
 	return true
 }
 
-func mergeGroupBy(base qbtypes.GroupByKey, additional []qbtypes.GroupByKey) []qbtypes.GroupByKey {
-	return append([]qbtypes.GroupByKey{base}, additional...)
+func mergeGroupBy(base, additional []qbtypes.GroupByKey) []qbtypes.GroupByKey {
+	return append(base, additional...)
 }
 
 func BuildDomainList(req *thirdpartyapitypes.ThirdPartyApiRequest) (*qbtypes.QueryRangeRequest, error) {
@@ -225,10 +354,10 @@ func buildEndpointsQuery(req *thirdpartyapitypes.ThirdPartyApiRequest) qbtypes.Q
 			Signal:       telemetrytypes.SignalTraces,
 			StepInterval: qbtypes.Step{Duration: defaultStepInterval},
 			Aggregations: []qbtypes.TraceAggregation{
-				{Expression: fmt.Sprintf("count_distinct(%s)", derivedKeyHTTPURL)},
+				{Expression: "count_distinct(http.url)"},
 			},
 			Filter:  buildBaseFilter(req.Filter),
-			GroupBy: mergeGroupBy(groupByKeyHTTPHost, req.GroupBy),
+			GroupBy: mergeGroupBy(dualSemconvGroupByKeys["server"], req.GroupBy),
 		},
 	}
 }
@@ -244,7 +373,7 @@ func buildLastSeenQuery(req *thirdpartyapitypes.ThirdPartyApiRequest) qbtypes.Qu
 				{Expression: "max(timestamp)"},
 			},
 			Filter:  buildBaseFilter(req.Filter),
-			GroupBy: mergeGroupBy(groupByKeyHTTPHost, req.GroupBy),
+			GroupBy: mergeGroupBy(dualSemconvGroupByKeys["server"], req.GroupBy),
 		},
 	}
 }
@@ -260,7 +389,7 @@ func buildRpsQuery(req *thirdpartyapitypes.ThirdPartyApiRequest) qbtypes.QueryEn
 				{Expression: "rate()"},
 			},
 			Filter:  buildBaseFilter(req.Filter),
-			GroupBy: mergeGroupBy(groupByKeyHTTPHost, req.GroupBy),
+			GroupBy: mergeGroupBy(dualSemconvGroupByKeys["server"], req.GroupBy),
 		},
 	}
 }
@@ -278,7 +407,7 @@ func buildErrorQuery(req *thirdpartyapitypes.ThirdPartyApiRequest) qbtypes.Query
 				{Expression: "count()"},
 			},
 			Filter:  filter,
-			GroupBy: mergeGroupBy(groupByKeyHTTPHost, req.GroupBy),
+			GroupBy: mergeGroupBy(dualSemconvGroupByKeys["server"], req.GroupBy),
 		},
 	}
 }
@@ -294,7 +423,7 @@ func buildTotalSpanQuery(req *thirdpartyapitypes.ThirdPartyApiRequest) qbtypes.Q
 				{Expression: "count()"},
 			},
 			Filter:  buildBaseFilter(req.Filter),
-			GroupBy: mergeGroupBy(groupByKeyHTTPHost, req.GroupBy),
+			GroupBy: mergeGroupBy(dualSemconvGroupByKeys["server"], req.GroupBy),
 		},
 	}
 }
@@ -310,7 +439,7 @@ func buildP99Query(req *thirdpartyapitypes.ThirdPartyApiRequest) qbtypes.QueryEn
 				{Expression: "p99(duration_nano)"},
 			},
 			Filter:  buildBaseFilter(req.Filter),
-			GroupBy: mergeGroupBy(groupByKeyHTTPHost, req.GroupBy),
+			GroupBy: mergeGroupBy(dualSemconvGroupByKeys["server"], req.GroupBy),
 		},
 	}
 }
@@ -333,10 +462,10 @@ func buildEndpointsInfoQuery(req *thirdpartyapitypes.ThirdPartyApiRequest) qbtyp
 			Signal:       telemetrytypes.SignalTraces,
 			StepInterval: qbtypes.Step{Duration: defaultStepInterval},
 			Aggregations: []qbtypes.TraceAggregation{
-				{Expression: fmt.Sprintf("rate(%s)", derivedKeyHTTPURL)},
+				{Expression: "rate(http.url)"},
 			},
 			Filter:  buildBaseFilter(req.Filter),
-			GroupBy: mergeGroupBy(groupByKeyHTTPURL, req.GroupBy),
+			GroupBy: mergeGroupBy(dualSemconvGroupByKeys["url"], req.GroupBy),
 		},
 	}
 }
@@ -390,7 +519,8 @@ func buildLastSeenInfoQuery(req *thirdpartyapitypes.ThirdPartyApiRequest) qbtype
 }
 
 func buildBaseFilter(additionalFilter *qbtypes.Filter) *qbtypes.Filter {
-	baseExpression := fmt.Sprintf("%s EXISTS AND kind_string = 'Client'", derivedKeyHTTPURL)
+	baseExpression := fmt.Sprintf("(%s EXISTS OR %s EXISTS) AND kind_string = 'Client'",
+		urlPathKeyLegacy, urlPathKey)
 
 	if additionalFilter != nil && additionalFilter.Expression != "" {
 		// even if it contains kind_string we add with an AND so it doesn't matter if the user is overriding it.

pkg/modules/thirdpartyapi/translator_test.go

@@ -1,9 +1,8 @@
 package thirdpartyapi
 
 import (
-	"testing"
-
 	"github.com/SigNoz/signoz/pkg/types/thirdpartyapitypes"
+	"testing"
 
 	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
@@ -29,7 +28,7 @@ func TestFilterResponse(t *testing.T) {
 											{
 												Labels: []*qbtypes.Label{
 													{
-														Key:   telemetrytypes.TelemetryFieldKey{Name: derivedKeyHTTPHost},
+														Key:   telemetrytypes.TelemetryFieldKey{Name: "net.peer.name"},
 														Value: "192.168.1.1",
 													},
 												},
@@ -37,7 +36,7 @@ func TestFilterResponse(t *testing.T) {
 											{
 												Labels: []*qbtypes.Label{
 													{
-														Key:   telemetrytypes.TelemetryFieldKey{Name: derivedKeyHTTPHost},
+														Key:   telemetrytypes.TelemetryFieldKey{Name: "net.peer.name"},
 														Value: "example.com",
 													},
 												},
@@ -61,7 +60,7 @@ func TestFilterResponse(t *testing.T) {
 											{
 												Labels: []*qbtypes.Label{
 													{
-														Key:   telemetrytypes.TelemetryFieldKey{Name: derivedKeyHTTPHost},
+														Key:   telemetrytypes.TelemetryFieldKey{Name: "net.peer.name"},
 														Value: "example.com",
 													},
 												},
@@ -85,12 +84,12 @@ func TestFilterResponse(t *testing.T) {
 								Rows: []*qbtypes.RawRow{
 									{
 										Data: map[string]any{
-											derivedKeyHTTPHost: "192.168.1.1",
+											"net.peer.name": "192.168.1.1",
 										},
 									},
 									{
 										Data: map[string]any{
-											derivedKeyHTTPHost: "example.com",
+											"net.peer.name": "example.com",
 										},
 									},
 								},
@@ -107,7 +106,7 @@ func TestFilterResponse(t *testing.T) {
 								Rows: []*qbtypes.RawRow{
 									{
 										Data: map[string]any{
-											derivedKeyHTTPHost: "example.com",
+											"net.peer.name": "example.com",
 										},
 									},
 								},

pkg/querier/openapi.go

@@ -1,454 +0,0 @@
-package querier
-
-import (
-	"net/http"
-
-	"github.com/SigNoz/signoz/pkg/http/handler"
-	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
-	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
-)
-
-// QueryRangeV5OpenAPIDef is the OpenAPI definition for the /api/v5/query_range endpoint.
-var QueryRangeV5OpenAPIDef = handler.OpenAPIDef{
-	ID:                  "QueryRangeV5",
-	Tags:                []string{"query"},
-	Summary:             "Query range",
-	Description:         "Execute a composite query over a time range. Supports builder queries (traces, logs, metrics), formulas, trace operators, PromQL, and ClickHouse SQL.",
-	Request:             new(qbtypes.QueryRangeRequest),
-	RequestContentType:  "application/json",
-	RequestExamples:     queryRangeV5Examples,
-	Response:            new(qbtypes.QueryRangeResponse),
-	ResponseContentType: "application/json",
-	SuccessStatusCode:   http.StatusOK,
-	ErrorStatusCodes:    []int{http.StatusBadRequest},
-	SecuritySchemes: []handler.OpenAPISecurityScheme{
-		{Name: ctxtypes.AuthTypeAPIKey.StringValue(), Scopes: []string{"VIEWER"}},
-		{Name: ctxtypes.AuthTypeTokenizer.StringValue(), Scopes: []string{"VIEWER"}},
-	},
-}
-
-var queryRangeV5Examples = []handler.OpenAPIExample{
-	{
-		Name:    "traces_time_series",
-		Summary: "Time series: count spans grouped by service",
-		Value: map[string]any{
-			"schemaVersion": "v1",
-			"start":         1640995200000,
-			"end":           1640998800000,
-			"requestType":   "time_series",
-			"compositeQuery": map[string]any{
-				"queries": []any{
-					map[string]any{
-						"type": "builder_query",
-						"spec": map[string]any{
-							"name":   "A",
-							"signal": "traces",
-							"aggregations": []any{
-								map[string]any{"expression": "count()", "alias": "span_count"},
-							},
-							"stepInterval": "60s",
-							"filter":       map[string]any{"expression": "service.name = 'frontend'"},
-							"groupBy":      []any{map[string]any{"name": "service.name", "fieldContext": "resource"}},
-							"order":        []any{map[string]any{"key": map[string]any{"name": "span_count"}, "direction": "desc"}},
-							"limit":        10,
-						},
-					},
-				},
-			},
-		},
-	},
-	{
-		Name:    "logs_time_series",
-		Summary: "Time series: count error logs grouped by service",
-		Value: map[string]any{
-			"schemaVersion": "v1",
-			"start":         1640995200000,
-			"end":           1640998800000,
-			"requestType":   "time_series",
-			"compositeQuery": map[string]any{
-				"queries": []any{
-					map[string]any{
-						"type": "builder_query",
-						"spec": map[string]any{
-							"name":   "A",
-							"signal": "logs",
-							"aggregations": []any{
-								map[string]any{"expression": "count()", "alias": "log_count"},
-							},
-							"stepInterval": "60s",
-							"filter":       map[string]any{"expression": "severity_text = 'ERROR'"},
-							"groupBy":      []any{map[string]any{"name": "service.name", "fieldContext": "resource"}},
-							"order":        []any{map[string]any{"key": map[string]any{"name": "log_count"}, "direction": "desc"}},
-							"limit":        10,
-						},
-					},
-				},
-			},
-		},
-	},
-	{
-		Name:    "metrics_gauge_time_series",
-		Summary: "Time series: latest gauge value averaged across series",
-		Value: map[string]any{
-			"schemaVersion": "v1",
-			"start":         1640995200000,
-			"end":           1640998800000,
-			"requestType":   "time_series",
-			"compositeQuery": map[string]any{
-				"queries": []any{
-					map[string]any{
-						"type": "builder_query",
-						"spec": map[string]any{
-							"name":   "A",
-							"signal": "metrics",
-							"aggregations": []any{
-								map[string]any{"metricName": "system.cpu.utilization", "timeAggregation": "latest", "spaceAggregation": "avg"},
-							},
-							"stepInterval": "60s",
-							"groupBy":      []any{map[string]any{"name": "host.name", "fieldContext": "resource"}},
-						},
-					},
-				},
-			},
-		},
-	},
-	{
-		Name:    "metrics_rate_time_series",
-		Summary: "Time series: rate of cumulative counter",
-		Value: map[string]any{
-			"schemaVersion": "v1",
-			"start":         1640995200000,
-			"end":           1640998800000,
-			"requestType":   "time_series",
-			"compositeQuery": map[string]any{
-				"queries": []any{
-					map[string]any{
-						"type": "builder_query",
-						"spec": map[string]any{
-							"name":   "A",
-							"signal": "metrics",
-							"aggregations": []any{
-								map[string]any{"metricName": "http.server.duration.count", "timeAggregation": "rate", "spaceAggregation": "sum"},
-							},
-							"stepInterval": 120,
-							"groupBy":      []any{map[string]any{"name": "service.name", "fieldContext": "resource"}},
-						},
-					},
-				},
-			},
-		},
-	},
-	{
-		Name:    "metrics_histogram_time_series",
-		Summary: "Time series: p99 latency from histogram",
-		Value: map[string]any{
-			"schemaVersion": "v1",
-			"start":         1640995200000,
-			"end":           1640998800000,
-			"requestType":   "time_series",
-			"compositeQuery": map[string]any{
-				"queries": []any{
-					map[string]any{
-						"type": "builder_query",
-						"spec": map[string]any{
-							"name":   "A",
-							"signal": "metrics",
-							"aggregations": []any{
-								map[string]any{"metricName": "http.server.duration.bucket", "spaceAggregation": "p99"},
-							},
-							"stepInterval": "60s",
-							"groupBy":      []any{map[string]any{"name": "service.name", "fieldContext": "resource"}},
-						},
-					},
-				},
-			},
-		},
-	},
-	{
-		Name:    "logs_raw",
-		Summary: "Raw: fetch raw log records",
-		Value: map[string]any{
-			"schemaVersion": "v1",
-			"start":         1640995200000,
-			"end":           1640998800000,
-			"requestType":   "raw",
-			"compositeQuery": map[string]any{
-				"queries": []any{
-					map[string]any{
-						"type": "builder_query",
-						"spec": map[string]any{
-							"name":   "A",
-							"signal": "logs",
-							"filter": map[string]any{"expression": "severity_text = 'ERROR'"},
-							"selectFields": []any{
-								map[string]any{"name": "body", "fieldContext": "log"},
-								map[string]any{"name": "service.name", "fieldContext": "resource"},
-							},
-							"order": []any{
-								map[string]any{"key": map[string]any{"name": "timestamp", "fieldContext": "log"}, "direction": "desc"},
-								map[string]any{"key": map[string]any{"name": "id"}, "direction": "desc"},
-							},
-							"limit":  50,
-							"offset": 0,
-						},
-					},
-				},
-			},
-		},
-	},
-	{
-		Name:    "traces_raw",
-		Summary: "Raw: fetch raw span records",
-		Value: map[string]any{
-			"schemaVersion": "v1",
-			"start":         1640995200000,
-			"end":           1640998800000,
-			"requestType":   "raw",
-			"compositeQuery": map[string]any{
-				"queries": []any{
-					map[string]any{
-						"type": "builder_query",
-						"spec": map[string]any{
-							"name":   "A",
-							"signal": "traces",
-							"filter": map[string]any{"expression": "service.name = 'frontend' AND has_error = true"},
-							"selectFields": []any{
-								map[string]any{"name": "name", "fieldContext": "span"},
-								map[string]any{"name": "duration_nano", "fieldContext": "span"},
-							},
-							"order": []any{
-								map[string]any{"key": map[string]any{"name": "timestamp", "fieldContext": "span"}, "direction": "desc"},
-							},
-							"limit": 100,
-						},
-					},
-				},
-			},
-		},
-	},
-	{
-		Name:    "traces_scalar",
-		Summary: "Scalar: total span count",
-		Value: map[string]any{
-			"schemaVersion": "v1",
-			"start":         1640995200000,
-			"end":           1640998800000,
-			"requestType":   "scalar",
-			"compositeQuery": map[string]any{
-				"queries": []any{
-					map[string]any{
-						"type": "builder_query",
-						"spec": map[string]any{
-							"name":   "A",
-							"signal": "traces",
-							"aggregations": []any{
-								map[string]any{"expression": "count()", "alias": "span_count"},
-							},
-							"filter": map[string]any{"expression": "service.name = 'frontend'"},
-						},
-					},
-				},
-			},
-		},
-	},
-	{
-		Name:    "logs_scalar",
-		Summary: "Scalar: total error log count",
-		Value: map[string]any{
-			"schemaVersion": "v1",
-			"start":         1640995200000,
-			"end":           1640998800000,
-			"requestType":   "scalar",
-			"compositeQuery": map[string]any{
-				"queries": []any{
-					map[string]any{
-						"type": "builder_query",
-						"spec": map[string]any{
-							"name":   "A",
-							"signal": "logs",
-							"aggregations": []any{
-								map[string]any{"expression": "count()", "alias": "error_count"},
-							},
-							"filter": map[string]any{"expression": "severity_text = 'ERROR'"},
-						},
-					},
-				},
-			},
-		},
-	},
-	{
-		Name:    "metrics_scalar",
-		Summary: "Scalar: single reduced metric value",
-		Value: map[string]any{
-			"schemaVersion": "v1",
-			"start":         1640995200000,
-			"end":           1640998800000,
-			"requestType":   "scalar",
-			"compositeQuery": map[string]any{
-				"queries": []any{
-					map[string]any{
-						"type": "builder_query",
-						"spec": map[string]any{
-							"name":   "A",
-							"signal": "metrics",
-							"aggregations": []any{
-								map[string]any{"metricName": "http.server.duration.count", "timeAggregation": "rate", "spaceAggregation": "sum", "reduceTo": "sum"},
-							},
-							"stepInterval": "60s",
-						},
-					},
-				},
-			},
-		},
-	},
-	{
-		Name:    "formula",
-		Summary: "Formula: error rate from two trace queries",
-		Value: map[string]any{
-			"schemaVersion": "v1",
-			"start":         1640995200000,
-			"end":           1640998800000,
-			"requestType":   "time_series",
-			"compositeQuery": map[string]any{
-				"queries": []any{
-					map[string]any{
-						"type": "builder_query",
-						"spec": map[string]any{
-							"name":         "A",
-							"signal":       "traces",
-							"aggregations": []any{map[string]any{"expression": "countIf(has_error = true)"}},
-							"stepInterval": "60s",
-							"groupBy":      []any{map[string]any{"name": "service.name", "fieldContext": "resource"}},
-						},
-					},
-					map[string]any{
-						"type": "builder_query",
-						"spec": map[string]any{
-							"name":         "B",
-							"signal":       "traces",
-							"aggregations": []any{map[string]any{"expression": "count()"}},
-							"stepInterval": "60s",
-							"groupBy":      []any{map[string]any{"name": "service.name", "fieldContext": "resource"}},
-						},
-					},
-					map[string]any{
-						"type": "builder_formula",
-						"spec": map[string]any{
-							"name":       "error_rate",
-							"expression": "A / B * 100",
-						},
-					},
-				},
-			},
-		},
-	},
-	{
-		Name:    "promql",
-		Summary: "PromQL: request rate with UTF-8 metric name",
-		Value: map[string]any{
-			"schemaVersion": "v1",
-			"start":         1640995200000,
-			"end":           1640998800000,
-			"requestType":   "time_series",
-			"compositeQuery": map[string]any{
-				"queries": []any{
-					map[string]any{
-						"type": "promql",
-						"spec": map[string]any{
-							"name":  "request_rate",
-							"query": "sum(rate({\"http.server.duration.count\"}[5m])) by (\"service.name\")",
-							"step":  60,
-						},
-					},
-				},
-			},
-		},
-	},
-	{
-		Name:    "clickhouse_sql_traces_time_series",
-		Summary: "ClickHouse SQL: traces time series with resource filter",
-		Value: map[string]any{
-			"schemaVersion": "v1",
-			"start":         1640995200000,
-			"end":           1640998800000,
-			"requestType":   "time_series",
-			"compositeQuery": map[string]any{
-				"queries": []any{
-					map[string]any{
-						"type": "clickhouse_sql",
-						"spec": map[string]any{
-							"name": "span_rate",
-							"query": "WITH __resource_filter AS (" +
-								" SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource" +
-								" WHERE seen_at_ts_bucket_start >= $start_timestamp - 1800 AND seen_at_ts_bucket_start <= $end_timestamp" +
-								" ) SELECT toStartOfInterval(timestamp, INTERVAL 60 SECOND) AS ts, count() AS value" +
-								" FROM signoz_traces.distributed_signoz_index_v3" +
-								" WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter)" +
-								" AND timestamp >= $start_datetime AND timestamp <= $end_datetime" +
-								" AND ts_bucket_start >= $start_timestamp - 1800 AND ts_bucket_start <= $end_timestamp" +
-								" GROUP BY ts ORDER BY ts",
-						},
-					},
-				},
-			},
-		},
-	},
-	{
-		Name:    "clickhouse_sql_logs_raw",
-		Summary: "ClickHouse SQL: raw logs with resource filter",
-		Value: map[string]any{
-			"schemaVersion": "v1",
-			"start":         1640995200000,
-			"end":           1640998800000,
-			"requestType":   "raw",
-			"compositeQuery": map[string]any{
-				"queries": []any{
-					map[string]any{
-						"type": "clickhouse_sql",
-						"spec": map[string]any{
-							"name": "recent_errors",
-							"query": "WITH __resource_filter AS (" +
-								" SELECT fingerprint FROM signoz_logs.distributed_logs_v2_resource" +
-								" WHERE seen_at_ts_bucket_start >= $start_timestamp - 1800 AND seen_at_ts_bucket_start <= $end_timestamp" +
-								" ) SELECT timestamp, body" +
-								" FROM signoz_logs.distributed_logs_v2" +
-								" WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter)" +
-								" AND timestamp >= $start_timestamp_nano AND timestamp <= $end_timestamp_nano" +
-								" AND ts_bucket_start >= $start_timestamp - 1800 AND ts_bucket_start <= $end_timestamp" +
-								" AND severity_text = 'ERROR'" +
-								" ORDER BY timestamp DESC LIMIT 100",
-						},
-					},
-				},
-			},
-		},
-	},
-	{
-		Name:    "clickhouse_sql_traces_scalar",
-		Summary: "ClickHouse SQL: scalar aggregate with resource filter",
-		Value: map[string]any{
-			"schemaVersion": "v1",
-			"start":         1640995200000,
-			"end":           1640998800000,
-			"requestType":   "scalar",
-			"compositeQuery": map[string]any{
-				"queries": []any{
-					map[string]any{
-						"type": "clickhouse_sql",
-						"spec": map[string]any{
-							"name": "total_spans",
-							"query": "WITH __resource_filter AS (" +
-								" SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource" +
-								" WHERE seen_at_ts_bucket_start >= $start_timestamp - 1800 AND seen_at_ts_bucket_start <= $end_timestamp" +
-								" ) SELECT count() AS value" +
-								" FROM signoz_traces.distributed_signoz_index_v3" +
-								" WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter)" +
-								" AND timestamp >= $start_datetime AND timestamp <= $end_datetime" +
-								" AND ts_bucket_start >= $start_timestamp - 1800 AND ts_bucket_start <= $end_timestamp",
-						},
-					},
-				},
-			},
-		},
-	},
-}

pkg/query-service/app/http_handler.go

@@ -5001,6 +5001,7 @@ func (aH *APIHandler) getDomainList(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	result = thirdpartyapi.MergeSemconvColumns(result)
 	result = thirdpartyapi.FilterIntermediateColumns(result)
 
 	// Filter IP addresses if ShowIp is false
@@ -5057,6 +5058,7 @@ func (aH *APIHandler) getDomainInfo(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	result = thirdpartyapi.MergeSemconvColumns(result)
 	result = thirdpartyapi.FilterIntermediateColumns(result)
 
 	// Filter IP addresses if ShowIp is false