Merge branch 'main' of github.com:SigNoz/signoz into feat/filter-search

* fix(member): better UX for pending invite users

* fix(member): add integration tests and reuse timezone util

* fix(member): rename deprecated and remove dead files

* fix(member): do not use hypened endpoints

* fix(member): user friendly button text

* fix(member): update the API endpoints and integration tests

* fix(member): simplify handler naming convention

* fix(member): added v2 API for update my password

* fix(member): remove more dead code

* fix(member): fix integration tests

* fix(member): fix integration tests

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

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

deploy/docker-swarm/docker-compose.yaml

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

deploy/docker/docker-compose.ha.yaml

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

deploy/docker/docker-compose.yaml

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

docs/contributing/onboarding.md

@@ -7,12 +7,12 @@ This guide explains how to add new data sources to the SigNoz onboarding flow. T
 The configuration is located at:
 
 ```
-frontend/src/container/OnboardingV2Container/onboarding-configs/onboarding-config-with-links.json
+frontend/src/container/OnboardingV2Container/onboarding-configs/onboarding-config-with-links.ts
 ```
 
-## JSON Structure Overview
+## Structure Overview
 
-The configuration file is a JSON array containing data source objects. Each object represents a selectable option in the onboarding flow.
+The configuration file exports a TypeScript array (`onboardingConfigWithLinks`) containing data source objects. Each object represents a selectable option in the onboarding flow. SVG logos are imported as ES modules at the top of the file.
 
 ## Data Source Object Keys
 
@@ -24,7 +24,7 @@ The configuration file is a JSON array containing data source objects. Each obje
 | `label` | `string` | Display name shown to users (e.g., `"AWS EC2"`) |
 | `tags` | `string[]` | Array of category tags for grouping (e.g., `["AWS"]`, `["database"]`) |
 | `module` | `string` | Destination module after onboarding completion |
-| `imgUrl` | `string` | Path to the logo/icon **(SVG required)** (e.g., `"/Logos/ec2.svg"`) |
+| `imgUrl` | `string` | Imported SVG URL **(SVG required)** (e.g., `import ec2Url from '@/assets/Logos/ec2.svg'`, then use `ec2Url`) |
 
 ### Optional Keys
 
@@ -57,36 +57,34 @@ The `module` key determines where users are redirected after completing onboardi
 
 The `question` object enables multi-step selection flows:
 
-```json
-{
-  "question": {
-    "desc": "What would you like to monitor?",
-    "type": "select",
-    "helpText": "Choose the telemetry type you want to collect.",
-    "helpLink": "/docs/azure-monitoring/overview/",
-    "helpLinkText": "Read the guide →",
-    "options": [
-        {
-            "key": "logging",
-            "label": "Logs",
-            "imgUrl": "/Logos/azure-vm.svg",
-            "link": "/docs/azure-monitoring/app-service/logging/"
-        },
-        {
-            "key": "metrics",
-            "label": "Metrics",
-            "imgUrl": "/Logos/azure-vm.svg",
-            "link": "/docs/azure-monitoring/app-service/metrics/"
-        },
-        {
-            "key": "tracing",
-            "label": "Traces",
-            "imgUrl": "/Logos/azure-vm.svg",
-            "link": "/docs/azure-monitoring/app-service/tracing/"
-        }
-    ]
-  }
-}
+```ts
+question: {
+  desc: 'What would you like to monitor?',
+  type: 'select',
+  helpText: 'Choose the telemetry type you want to collect.',
+  helpLink: '/docs/azure-monitoring/overview/',
+  helpLinkText: 'Read the guide →',
+  options: [
+    {
+      key: 'logging',
+      label: 'Logs',
+      imgUrl: azureVmUrl,
+      link: '/docs/azure-monitoring/app-service/logging/',
+    },
+    {
+      key: 'metrics',
+      label: 'Metrics',
+      imgUrl: azureVmUrl,
+      link: '/docs/azure-monitoring/app-service/metrics/',
+    },
+    {
+      key: 'tracing',
+      label: 'Traces',
+      imgUrl: azureVmUrl,
+      link: '/docs/azure-monitoring/app-service/tracing/',
+    },
+  ],
+},
 ```
 
 ### Question Keys
@@ -106,152 +104,161 @@ Options can be simple (direct link) or nested (with another question):
 
 ### Simple Option (Direct Link)
 
-```json
+```ts
 {
-  "key": "aws-ec2-logs",
-  "label": "Logs",
-  "imgUrl": "/Logos/ec2.svg",
-  "link": "/docs/userguide/collect_logs_from_file/"
-}
+  key: 'aws-ec2-logs',
+  label: 'Logs',
+  imgUrl: ec2Url,
+  link: '/docs/userguide/collect_logs_from_file/',
+},
 ```
 
 ### Option with Internal Redirect
 
-```json
+```ts
 {
-  "key": "aws-ec2-metrics-one-click",
-  "label": "One Click AWS",
-  "imgUrl": "/Logos/ec2.svg",
-  "link": "/integrations?integration=aws-integration&service=ec2",
-  "internalRedirect": true
-}
+  key: 'aws-ec2-metrics-one-click',
+  label: 'One Click AWS',
+  imgUrl: ec2Url,
+  link: '/integrations?integration=aws-integration&service=ec2',
+  internalRedirect: true,
+},
 ```
 
 > **Important**: Set `internalRedirect: true` only for internal app routes (like `/integrations?...`). Docs links should NOT have this flag.
 
 ### Nested Option (Multi-step Flow)
 
-```json
+```ts
 {
-  "key": "aws-ec2-metrics",
-  "label": "Metrics",
-  "imgUrl": "/Logos/ec2.svg",
-  "question": {
-    "desc": "How would you like to set up monitoring?",
-    "helpText": "Choose your setup method.",
-    "options": [...]
-  }
-}
+  key: 'aws-ec2-metrics',
+  label: 'Metrics',
+  imgUrl: ec2Url,
+  question: {
+    desc: 'How would you like to set up monitoring?',
+    helpText: 'Choose your setup method.',
+    options: [...],
+  },
+},
 ```
 
 ## Examples
 
 ### Simple Data Source (Direct Link)
 
-```json
+```ts
+import elbUrl from '@/assets/Logos/elb.svg';
+
+// inside the onboardingConfigWithLinks array:
 {
-  "dataSource": "aws-elb",
-  "label": "AWS ELB",
-  "tags": ["AWS"],
-  "module": "logs",
-  "relatedSearchKeywords": [
-    "aws",
-    "aws elb",
-    "elb logs",
-    "elastic load balancer"
+  dataSource: 'aws-elb',
+  label: 'AWS ELB',
+  tags: ['AWS'],
+  module: 'logs',
+  relatedSearchKeywords: [
+    'aws',
+    'aws elb',
+    'elb logs',
+    'elastic load balancer',
   ],
-  "imgUrl": "/Logos/elb.svg",
-  "link": "/docs/aws-monitoring/elb/"
-}
+  imgUrl: elbUrl,
+  link: '/docs/aws-monitoring/elb/',
+},
 ```
 
 ### Data Source with Single Question Level
 
-```json
+```ts
+import azureVmUrl from '@/assets/Logos/azure-vm.svg';
+
+// inside the onboardingConfigWithLinks array:
 {
-  "dataSource": "app-service",
-  "label": "App Service",
-  "imgUrl": "/Logos/azure-vm.svg",
-  "tags": ["Azure"],
-  "module": "apm",
-  "relatedSearchKeywords": ["azure", "app service"],
-  "question": {
-    "desc": "What telemetry data do you want to visualise?",
-    "type": "select",
-    "options": [
+  dataSource: 'app-service',
+  label: 'App Service',
+  imgUrl: azureVmUrl,
+  tags: ['Azure'],
+  module: 'apm',
+  relatedSearchKeywords: ['azure', 'app service'],
+  question: {
+    desc: 'What telemetry data do you want to visualise?',
+    type: 'select',
+    options: [
       {
-        "key": "logging",
-        "label": "Logs",
-        "imgUrl": "/Logos/azure-vm.svg",
-        "link": "/docs/azure-monitoring/app-service/logging/"
+        key: 'logging',
+        label: 'Logs',
+        imgUrl: azureVmUrl,
+        link: '/docs/azure-monitoring/app-service/logging/',
       },
       {
-        "key": "metrics",
-        "label": "Metrics",
-        "imgUrl": "/Logos/azure-vm.svg",
-        "link": "/docs/azure-monitoring/app-service/metrics/"
+        key: 'metrics',
+        label: 'Metrics',
+        imgUrl: azureVmUrl,
+        link: '/docs/azure-monitoring/app-service/metrics/',
       },
       {
-        "key": "tracing",
-        "label": "Traces",
-        "imgUrl": "/Logos/azure-vm.svg",
-        "link": "/docs/azure-monitoring/app-service/tracing/"
-      }
-    ]
-  }
-}
+        key: 'tracing',
+        label: 'Traces',
+        imgUrl: azureVmUrl,
+        link: '/docs/azure-monitoring/app-service/tracing/',
+      },
+    ],
+  },
+},
 ```
 
 ### Data Source with Nested Questions (2-3 Levels)
 
-```json
+```ts
+import ec2Url from '@/assets/Logos/ec2.svg';
+
+// inside the onboardingConfigWithLinks array:
 {
-  "dataSource": "aws-ec2",
-  "label": "AWS EC2",
-  "tags": ["AWS"],
-  "module": "logs",
-  "relatedSearchKeywords": ["aws", "aws ec2", "ec2 logs", "ec2 metrics"],
-  "imgUrl": "/Logos/ec2.svg",
-  "question": {
-    "desc": "What would you like to monitor for AWS EC2?",
-    "type": "select",
-    "helpText": "Choose the type of telemetry data you want to collect.",
-    "options": [
+  dataSource: 'aws-ec2',
+  label: 'AWS EC2',
+  tags: ['AWS'],
+  module: 'logs',
+  relatedSearchKeywords: ['aws', 'aws ec2', 'ec2 logs', 'ec2 metrics'],
+  imgUrl: ec2Url,
+  question: {
+    desc: 'What would you like to monitor for AWS EC2?',
+    type: 'select',
+    helpText: 'Choose the type of telemetry data you want to collect.',
+    options: [
       {
-        "key": "aws-ec2-logs",
-        "label": "Logs",
-        "imgUrl": "/Logos/ec2.svg",
-        "link": "/docs/userguide/collect_logs_from_file/"
+        key: 'aws-ec2-logs',
+        label: 'Logs',
+        imgUrl: ec2Url,
+        link: '/docs/userguide/collect_logs_from_file/',
       },
       {
-        "key": "aws-ec2-metrics",
-        "label": "Metrics",
-        "imgUrl": "/Logos/ec2.svg",
-        "question": {
-          "desc": "How would you like to set up EC2 Metrics monitoring?",
-          "helpText": "One Click uses AWS CloudWatch integration. Manual setup uses OpenTelemetry.",
-          "helpLink": "/docs/aws-monitoring/one-click-vs-manual/",
-          "helpLinkText": "Read the comparison guide →",
-          "options": [
+        key: 'aws-ec2-metrics',
+        label: 'Metrics',
+        imgUrl: ec2Url,
+        question: {
+          desc: 'How would you like to set up EC2 Metrics monitoring?',
+          helpText: 'One Click uses AWS CloudWatch integration. Manual setup uses OpenTelemetry.',
+          helpLink: '/docs/aws-monitoring/one-click-vs-manual/',
+          helpLinkText: 'Read the comparison guide →',
+          options: [
             {
-              "key": "aws-ec2-metrics-one-click",
-              "label": "One Click AWS",
-              "imgUrl": "/Logos/ec2.svg",
-              "link": "/integrations?integration=aws-integration&service=ec2",
-              "internalRedirect": true
+              key: 'aws-ec2-metrics-one-click',
+              label: 'One Click AWS',
+              imgUrl: ec2Url,
+              link: '/integrations?integration=aws-integration&service=ec2',
+              internalRedirect: true,
             },
             {
-              "key": "aws-ec2-metrics-manual",
-              "label": "Manual Setup",
-              "imgUrl": "/Logos/ec2.svg",
-              "link": "/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/"
-            }
-          ]
-        }
-      }
-    ]
-  }
-}
+              key: 'aws-ec2-metrics-manual',
+              label: 'Manual Setup',
+              imgUrl: ec2Url,
+              link: '/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/',
+            },
+          ],
+        },
+      },
+    ],
+  },
+},
 ```
 
 ## Best Practices
@@ -270,11 +277,16 @@ Options can be simple (direct link) or nested (with another question):
 
 ### 3. Logos
 
-- Place logo files in `public/Logos/`
+- Place logo files in `src/assets/Logos/`
 - Use SVG format
-- Reference as `"/Logos/your-logo.svg"`
+- Import the SVG at the top of the file and reference the imported variable:
+  ```ts
+  import myServiceUrl from '@/assets/Logos/my-service.svg';
+  // then in the config object:
+  imgUrl: myServiceUrl,
+  ```
 - **Fetching Icons**: New icons can be easily fetched from [OpenBrand](https://openbrand.sh/). Use the pattern `https://openbrand.sh/?url=<TARGET_URL>`, where `<TARGET_URL>` is the URL-encoded link to the service's website. For example, to get Render's logo, use [https://openbrand.sh/?url=https%3A%2F%2Frender.com](https://openbrand.sh/?url=https%3A%2F%2Frender.com).
-- **Optimize new SVGs**: Run any newly downloaded SVGs through an optimizer like [SVGOMG (svgo)](https://svgomg.net/) or use `npx svgo public/Logos/your-logo.svg` to minimise their size before committing.
+- **Optimize new SVGs**: Run any newly downloaded SVGs through an optimizer like [SVGOMG (svgo)](https://svgomg.net/) or use `npx svgo src/assets/Logos/your-logo.svg` to minimise their size before committing.
 
 ### 4. Links
 
@@ -290,8 +302,8 @@ Options can be simple (direct link) or nested (with another question):
 
 ## Adding a New Data Source
 
-1. Add your data source object to the JSON array
-2. Ensure the logo exists in `public/Logos/`
+1. Add the logo SVG to `src/assets/Logos/` and add a top-level import in the config file (e.g., `import myServiceUrl from '@/assets/Logos/my-service.svg'`)
+2. Add your data source object to the `onboardingConfigWithLinks` array, referencing the imported variable for `imgUrl`
 3. Test the flow locally with `yarn dev`
 4. Validation:
    - Navigate to the [onboarding page](http://localhost:3301/get-started-with-signoz-cloud) on your local machine

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

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

frontend/.eslintrc.cjs

@@ -213,23 +213,6 @@ module.exports = {
 				message:
 					'Avoid calling .getState() directly. Export a standalone action from the store instead.',
 			},
-			{
-				selector:
-					"CallExpression[callee.object.name='window'][callee.property.name='open']",
-				message:
-					'Do not call window.open() directly. ' +
-					"Use openInNewTab() from 'utils/navigation' for internal SigNoz paths. " +
-					"For intentional external URLs, use openExternalLink() from 'utils/navigation'. " +
-					'For unavoidable direct calls, add // eslint-disable-next-line with a reason.',
-			},
-			{
-				selector:
-					"AssignmentExpression[left.object.name='window'][left.property.name='href']",
-				message:
-					'Do not assign window.location.href for internal navigation. ' +
-					"Use history.push() or history.replace() from 'lib/history'. " +
-					'For external redirects (SSO, logout URLs), add // eslint-disable-next-line with a reason.',
-			},
 		],
 	},
 	overrides: [
@@ -282,14 +265,5 @@ module.exports = {
 				'no-restricted-syntax': 'off',
 			},
 		},
-		{
-			// navigation.ts and useSafeNavigate.ts are the canonical implementations that call
-			// window.open after computing a base-path-aware href. They are the only places
-			// allowed to call window.open directly.
-			files: ['src/utils/navigation.ts', 'src/hooks/useSafeNavigate.ts'],
-			rules: {
-				'no-restricted-syntax': 'off',
-			},
-		},
 	],
 };

frontend/example.env

@@ -6,6 +6,3 @@ VITE_APPCUES_APP_ID="appcess-app-id"
 VITE_PYLON_IDENTITY_SECRET="pylon-identity-secret"
 
 CI="1"
-
-# Uncomment to test sub-path deployment locally (e.g. app served at /signoz/).
-# VITE_BASE_PATH="/signoz/"

frontend/index.html

@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<base href="<%- BASE_PATH %>" />
 		<meta charset="utf-8" />
 		<meta
 			http-equiv="Cache-Control"
@@ -60,7 +59,7 @@
 		<meta data-react-helmet="true" name="docusaurus_locale" content="en" />
 		<meta data-react-helmet="true" name="docusaurus_tag" content="default" />
 		<meta name="robots" content="noindex" />
-		<link data-react-helmet="true" rel="shortcut icon" href="./favicon.ico" />
+		<link data-react-helmet="true" rel="shortcut icon" href="/favicon.ico" />
 	</head>
 	<body data-theme="default">
 		<noscript>You need to enable JavaScript to run this app.</noscript>
@@ -114,7 +113,7 @@
 				})(document, 'script');
 			}
 		</script>
-		<link rel="stylesheet" href="./css/uPlot.min.css" />
+		<link rel="stylesheet" href="/css/uPlot.min.css" />
 		<script type="module" src="./src/index.tsx"></script>
 	</body>
 </html>

frontend/jest.config.ts

@@ -20,7 +20,6 @@ const config: Config.InitialOptions = {
 		'^@signozhq/resizable$': '<rootDir>/__mocks__/resizableMock.tsx',
 		'^hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^src/hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
-		'^hooks/useSafeNavigate\\.impl$': '<rootDir>/src/hooks/useSafeNavigate.ts',
 		'^.*/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^constants/env$': '<rootDir>/__mocks__/env.ts',
 		'^src/constants/env$': '<rootDir>/__mocks__/env.ts',

frontend/package.json

@@ -68,7 +68,7 @@
     "@signozhq/table": "0.3.7",
     "@signozhq/toggle-group": "0.0.1",
     "@signozhq/tooltip": "0.0.2",
-    "@signozhq/ui": "0.0.5",
+    "@signozhq/ui": "0.0.6",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",
@@ -140,10 +140,12 @@
     "react-helmet-async": "1.3.0",
     "react-hook-form": "7.71.2",
     "react-i18next": "^11.16.1",
+    "react-json-tree": "^0.20.0",
     "react-lottie": "1.2.10",
     "react-markdown": "8.0.7",
     "react-query": "3.39.3",
     "react-redux": "^7.2.2",
+    "react-rnd": "^10.5.3",
     "react-router-dom": "^5.2.0",
     "react-router-dom-v5-compat": "6.27.0",
     "react-syntax-highlighter": "15.5.0",

frontend/src/AppRoutes/pageComponents.ts

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

frontend/src/AppRoutes/routes.ts

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

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

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

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

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

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

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

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

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

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

@@ -20,12 +20,15 @@ import { useMutation, useQuery } from 'react-query';
 import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
-	ChangePasswordPathParameters,
 	CreateInvite201,
+	CreateResetPasswordToken201,
+	CreateResetPasswordTokenPathParameters,
 	DeleteUserPathParameters,
 	GetMyUser200,
 	GetMyUserDeprecated200,
 	GetResetPasswordToken200,
+	GetResetPasswordTokenDeprecated200,
+	GetResetPasswordTokenDeprecatedPathParameters,
 	GetResetPasswordTokenPathParameters,
 	GetRolesByUserID200,
 	GetRolesByUserIDPathParameters,
@@ -53,134 +56,36 @@ import type {
 	UpdateUserPathParameters,
 } from '../sigNoz.schemas';
 
-/**
- * This endpoint changes the password by id
- * @summary Change password
- */
-export const changePassword = (
-	{ id }: ChangePasswordPathParameters,
-	typesChangePasswordRequestDTO: BodyType<TypesChangePasswordRequestDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v1/changePassword/${id}`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: typesChangePasswordRequestDTO,
-		signal,
-	});
-};
-
-export const getChangePasswordMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof changePassword>>,
-		TError,
-		{
-			pathParams: ChangePasswordPathParameters;
-			data: BodyType<TypesChangePasswordRequestDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof changePassword>>,
-	TError,
-	{
-		pathParams: ChangePasswordPathParameters;
-		data: BodyType<TypesChangePasswordRequestDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['changePassword'];
-	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 changePassword>>,
-		{
-			pathParams: ChangePasswordPathParameters;
-			data: BodyType<TypesChangePasswordRequestDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return changePassword(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type ChangePasswordMutationResult = NonNullable<
-	Awaited<ReturnType<typeof changePassword>>
->;
-export type ChangePasswordMutationBody = BodyType<TypesChangePasswordRequestDTO>;
-export type ChangePasswordMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Change password
- */
-export const useChangePassword = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof changePassword>>,
-		TError,
-		{
-			pathParams: ChangePasswordPathParameters;
-			data: BodyType<TypesChangePasswordRequestDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof changePassword>>,
-	TError,
-	{
-		pathParams: ChangePasswordPathParameters;
-		data: BodyType<TypesChangePasswordRequestDTO>;
-	},
-	TContext
-> => {
-	const mutationOptions = getChangePasswordMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
 /**
  * This endpoint returns the reset password token by id
+ * @deprecated
  * @summary Get reset password token
  */
-export const getResetPasswordToken = (
-	{ id }: GetResetPasswordTokenPathParameters,
+export const getResetPasswordTokenDeprecated = (
+	{ id }: GetResetPasswordTokenDeprecatedPathParameters,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<GetResetPasswordToken200>({
+	return GeneratedAPIInstance<GetResetPasswordTokenDeprecated200>({
 		url: `/api/v1/getResetPasswordToken/${id}`,
 		method: 'GET',
 		signal,
 	});
 };
 
-export const getGetResetPasswordTokenQueryKey = ({
+export const getGetResetPasswordTokenDeprecatedQueryKey = ({
 	id,
-}: GetResetPasswordTokenPathParameters) => {
+}: GetResetPasswordTokenDeprecatedPathParameters) => {
 	return [`/api/v1/getResetPasswordToken/${id}`] as const;
 };
 
-export const getGetResetPasswordTokenQueryOptions = <
-	TData = Awaited<ReturnType<typeof getResetPasswordToken>>,
+export const getGetResetPasswordTokenDeprecatedQueryOptions = <
+	TData = Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>,
 	TError = ErrorType<RenderErrorResponseDTO>
 >(
-	{ id }: GetResetPasswordTokenPathParameters,
+	{ id }: GetResetPasswordTokenDeprecatedPathParameters,
 	options?: {
 		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getResetPasswordToken>>,
+			Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>,
 			TError,
 			TData
 		>;
@@ -189,11 +94,11 @@ export const getGetResetPasswordTokenQueryOptions = <
 	const { query: queryOptions } = options ?? {};
 
 	const queryKey =
-		queryOptions?.queryKey ?? getGetResetPasswordTokenQueryKey({ id });
+		queryOptions?.queryKey ?? getGetResetPasswordTokenDeprecatedQueryKey({ id });
 
 	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof getResetPasswordToken>>
-	> = ({ signal }) => getResetPasswordToken({ id }, signal);
+		Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>
+	> = ({ signal }) => getResetPasswordTokenDeprecated({ id }, signal);
 
 	return {
 		queryKey,
@@ -201,35 +106,39 @@ export const getGetResetPasswordTokenQueryOptions = <
 		enabled: !!id,
 		...queryOptions,
 	} as UseQueryOptions<
-		Awaited<ReturnType<typeof getResetPasswordToken>>,
+		Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>,
 		TError,
 		TData
 	> & { queryKey: QueryKey };
 };
 
-export type GetResetPasswordTokenQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getResetPasswordToken>>
+export type GetResetPasswordTokenDeprecatedQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>
 >;
-export type GetResetPasswordTokenQueryError = ErrorType<RenderErrorResponseDTO>;
+export type GetResetPasswordTokenDeprecatedQueryError = ErrorType<RenderErrorResponseDTO>;
 
 /**
+ * @deprecated
  * @summary Get reset password token
  */
 
-export function useGetResetPasswordToken<
-	TData = Awaited<ReturnType<typeof getResetPasswordToken>>,
+export function useGetResetPasswordTokenDeprecated<
+	TData = Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>,
 	TError = ErrorType<RenderErrorResponseDTO>
 >(
-	{ id }: GetResetPasswordTokenPathParameters,
+	{ id }: GetResetPasswordTokenDeprecatedPathParameters,
 	options?: {
 		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getResetPasswordToken>>,
+			Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>,
 			TError,
 			TData
 		>;
 	},
 ): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetResetPasswordTokenQueryOptions({ id }, options);
+	const queryOptions = getGetResetPasswordTokenDeprecatedQueryOptions(
+		{ id },
+		options,
+	);
 
 	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
 		queryKey: QueryKey;
@@ -241,15 +150,16 @@ export function useGetResetPasswordToken<
 }
 
 /**
+ * @deprecated
  * @summary Get reset password token
  */
-export const invalidateGetResetPasswordToken = async (
+export const invalidateGetResetPasswordTokenDeprecated = async (
 	queryClient: QueryClient,
-	{ id }: GetResetPasswordTokenPathParameters,
+	{ id }: GetResetPasswordTokenDeprecatedPathParameters,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
-		{ queryKey: getGetResetPasswordTokenQueryKey({ id }) },
+		{ queryKey: getGetResetPasswordTokenDeprecatedQueryKey({ id }) },
 		options,
 	);
 
@@ -1407,6 +1317,189 @@ export const useUpdateUser = <
 
 	return useMutation(mutationOptions);
 };
+/**
+ * This endpoint returns the existing reset password token for a user.
+ * @summary Get reset password token for a user
+ */
+export const getResetPasswordToken = (
+	{ id }: GetResetPasswordTokenPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetResetPasswordToken200>({
+		url: `/api/v2/users/${id}/reset_password_tokens`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetResetPasswordTokenQueryKey = ({
+	id,
+}: GetResetPasswordTokenPathParameters) => {
+	return [`/api/v2/users/${id}/reset_password_tokens`] as const;
+};
+
+export const getGetResetPasswordTokenQueryOptions = <
+	TData = Awaited<ReturnType<typeof getResetPasswordToken>>,
+	TError = ErrorType<RenderErrorResponseDTO>
+>(
+	{ id }: GetResetPasswordTokenPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getResetPasswordToken>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetResetPasswordTokenQueryKey({ id });
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getResetPasswordToken>>
+	> = ({ signal }) => getResetPasswordToken({ id }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!id,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getResetPasswordToken>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetResetPasswordTokenQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getResetPasswordToken>>
+>;
+export type GetResetPasswordTokenQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get reset password token for a user
+ */
+
+export function useGetResetPasswordToken<
+	TData = Awaited<ReturnType<typeof getResetPasswordToken>>,
+	TError = ErrorType<RenderErrorResponseDTO>
+>(
+	{ id }: GetResetPasswordTokenPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getResetPasswordToken>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetResetPasswordTokenQueryOptions({ id }, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	query.queryKey = queryOptions.queryKey;
+
+	return query;
+}
+
+/**
+ * @summary Get reset password token for a user
+ */
+export const invalidateGetResetPasswordToken = async (
+	queryClient: QueryClient,
+	{ id }: GetResetPasswordTokenPathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetResetPasswordTokenQueryKey({ id }) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * This endpoint creates or regenerates a reset password token for a user. If a valid token exists, it is returned. If expired, a new one is created.
+ * @summary Create or regenerate reset password token for a user
+ */
+export const createResetPasswordToken = ({
+	id,
+}: CreateResetPasswordTokenPathParameters) => {
+	return GeneratedAPIInstance<CreateResetPasswordToken201>({
+		url: `/api/v2/users/${id}/reset_password_tokens`,
+		method: 'PUT',
+	});
+};
+
+export const getCreateResetPasswordTokenMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createResetPasswordToken>>,
+		TError,
+		{ pathParams: CreateResetPasswordTokenPathParameters },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof createResetPasswordToken>>,
+	TError,
+	{ pathParams: CreateResetPasswordTokenPathParameters },
+	TContext
+> => {
+	const mutationKey = ['createResetPasswordToken'];
+	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 createResetPasswordToken>>,
+		{ pathParams: CreateResetPasswordTokenPathParameters }
+	> = (props) => {
+		const { pathParams } = props ?? {};
+
+		return createResetPasswordToken(pathParams);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type CreateResetPasswordTokenMutationResult = NonNullable<
+	Awaited<ReturnType<typeof createResetPasswordToken>>
+>;
+
+export type CreateResetPasswordTokenMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Create or regenerate reset password token for a user
+ */
+export const useCreateResetPasswordToken = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createResetPasswordToken>>,
+		TError,
+		{ pathParams: CreateResetPasswordTokenPathParameters },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof createResetPasswordToken>>,
+	TError,
+	{ pathParams: CreateResetPasswordTokenPathParameters },
+	TContext
+> => {
+	const mutationOptions = getCreateResetPasswordTokenMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};
 /**
  * This endpoint returns the user roles by user id
  * @summary Get user roles
@@ -1850,3 +1943,84 @@ export const useUpdateMyUserV2 = <
 
 	return useMutation(mutationOptions);
 };
+/**
+ * This endpoint updates the password of the user I belong to
+ * @summary Updates my password
+ */
+export const updateMyPassword = (
+	typesChangePasswordRequestDTO: BodyType<TypesChangePasswordRequestDTO>,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v2/users/me/factor_password`,
+		method: 'PUT',
+		headers: { 'Content-Type': 'application/json' },
+		data: typesChangePasswordRequestDTO,
+	});
+};
+
+export const getUpdateMyPasswordMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateMyPassword>>,
+		TError,
+		{ data: BodyType<TypesChangePasswordRequestDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof updateMyPassword>>,
+	TError,
+	{ data: BodyType<TypesChangePasswordRequestDTO> },
+	TContext
+> => {
+	const mutationKey = ['updateMyPassword'];
+	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 updateMyPassword>>,
+		{ data: BodyType<TypesChangePasswordRequestDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return updateMyPassword(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type UpdateMyPasswordMutationResult = NonNullable<
+	Awaited<ReturnType<typeof updateMyPassword>>
+>;
+export type UpdateMyPasswordMutationBody = BodyType<TypesChangePasswordRequestDTO>;
+export type UpdateMyPasswordMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Updates my password
+ */
+export const useUpdateMyPassword = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateMyPassword>>,
+		TError,
+		{ data: BodyType<TypesChangePasswordRequestDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof updateMyPassword>>,
+	TError,
+	{ data: BodyType<TypesChangePasswordRequestDTO> },
+	TContext
+> => {
+	const mutationOptions = getUpdateMyPasswordMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};

frontend/src/api/trace/getTraceV3.tsx

@@ -0,0 +1,115 @@
+/* eslint-disable sonarjs/cognitive-complexity */
+import { ApiV3Instance as axios } from 'api';
+import { omit } from 'lodash-es';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { Event, Span } from 'types/api/trace/getTraceV2';
+import {
+	GetTraceV3PayloadProps,
+	GetTraceV3SuccessResponse,
+} from 'types/api/trace/getTraceV3';
+
+// Transform a V3 snake_case span to the V2 camelCase Span shape
+// V3 WaterfallSpan uses snake_case JSON keys (see pkg/types/tracedetailtypes/waterfall.go)
+function transformSpan(raw: any): Span {
+	const resource: Record<string, string> = raw.resource || {};
+	const attributes: Record<string, any> = raw.attributes || {};
+
+	// Build tagMap from attributes (flattened string representation)
+	const tagMap: Record<string, string> = {};
+	Object.entries(attributes).forEach(([k, v]) => {
+		tagMap[k] = String(v);
+	});
+
+	// Transform events (already camelCase from backend)
+	const events: Event[] = (raw.events || []).map((e: any) => ({
+		name: e.name || '',
+		timeUnixNano: e.timeUnixNano || 0,
+		attributeMap: e.attributeMap || {},
+		isError: e.isError || false,
+	}));
+
+	return {
+		timestamp: raw.timestamp || 0,
+		durationNano: raw.duration_nano ?? raw.durationNano ?? 0,
+		spanId: raw.span_id ?? raw.spanId ?? '',
+		rootSpanId: raw.root_span_id ?? raw.rootSpanId ?? '',
+		parentSpanId: raw.parent_span_id ?? raw.parentSpanId ?? '',
+		traceId: raw.trace_id ?? raw.traceId ?? '',
+		hasError: raw.has_error ?? raw.hasError ?? false,
+		kind: raw.kind || 0,
+		serviceName: resource['service.name'] || raw.serviceName || '',
+		name: raw.name || '',
+		references: raw.references || null,
+		tagMap,
+		event: events,
+		rootName: raw.root_name ?? raw.rootName ?? '',
+		statusMessage: raw.status_message ?? raw.statusMessage ?? '',
+		statusCodeString: raw.status_code_string ?? raw.statusCodeString ?? '',
+		spanKind: raw.kind_string ?? raw.spanKind ?? '',
+		hasChildren: raw.has_children ?? raw.hasChildren ?? false,
+		hasSibling: raw.has_sibling ?? raw.hasSibling ?? false,
+		subTreeNodeCount: raw.sub_tree_node_count ?? raw.subTreeNodeCount ?? 0,
+		level: raw.level || 0,
+		// V3 format fields
+		attributes: tagMap,
+		resources: resource,
+		// Snake_case passthrough fields
+		http_method: raw.http_method,
+		http_url: raw.http_url,
+		http_host: raw.http_host,
+		db_name: raw.db_name,
+		db_operation: raw.db_operation,
+		external_http_method: raw.external_http_method,
+		external_http_url: raw.external_http_url,
+		response_status_code: raw.response_status_code,
+		is_remote: raw.is_remote,
+	};
+}
+
+const getTraceV3 = async (
+	props: GetTraceV3PayloadProps,
+): Promise<SuccessResponse<GetTraceV3SuccessResponse> | ErrorResponse> => {
+	let uncollapsedSpans = [...props.uncollapsedSpans];
+	if (!props.isSelectedSpanIDUnCollapsed) {
+		uncollapsedSpans = uncollapsedSpans.filter(
+			(node) => node !== props.selectedSpanId,
+		);
+	}
+	const postData: GetTraceV3PayloadProps = {
+		...props,
+		uncollapsedSpans,
+	};
+	const response = await axios.post<GetTraceV3SuccessResponse>(
+		`/traces/${props.traceId}/waterfall`,
+		omit(postData, 'traceId'),
+	);
+
+	// V3 API wraps response in { status, data }
+	const rawPayload = (response.data as any).data || response.data;
+
+	const spans = (rawPayload.spans || []).map(transformSpan);
+
+	// V3 API returns startTimestampMillis/endTimestampMillis as relative durations (ms from epoch offset),
+	// not absolute unix millis like V2. The span timestamps are absolute unix millis.
+	// Convert by using the first span's timestamp as the base if there's a mismatch.
+	let { startTimestampMillis, endTimestampMillis } = rawPayload;
+	if (
+		spans.length > 0 &&
+		spans[0].timestamp > 0 &&
+		startTimestampMillis < spans[0].timestamp / 10
+	) {
+		// V3 times are relative — derive absolute times from span data
+		const durationMillis = endTimestampMillis - startTimestampMillis;
+		startTimestampMillis = spans[0].timestamp;
+		endTimestampMillis = startTimestampMillis + durationMillis;
+	}
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: 'Success',
+		payload: { ...rawPayload, spans, startTimestampMillis, endTimestampMillis },
+	};
+};
+
+export default getTraceV3;

frontend/src/api/v1/factor_password/changeMyPassword.ts

@@ -1,27 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps, Props } from 'types/api/user/changeMyPassword';
-
-const changeMyPassword = async (
-	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
-	try {
-		const response = await axios.post<PayloadProps>(
-			`/changePassword/${props.userId}`,
-			{
-				...props,
-			},
-		);
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default changeMyPassword;

frontend/src/api/v1/factor_password/getResetPasswordToken.ts

@@ -1,28 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import {
-	GetResetPasswordToken,
-	PayloadProps,
-	Props,
-} from 'types/api/user/getResetPasswordToken';
-
-const getResetPasswordToken = async (
-	props: Props,
-): Promise<SuccessResponseV2<GetResetPasswordToken>> => {
-	try {
-		const response = await axios.get<PayloadProps>(
-			`/getResetPasswordToken/${props.userId}`,
-		);
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default getResetPasswordToken;

frontend/src/components/AuthPageContainer/AuthHeader.tsx

@@ -1,7 +1,6 @@
 import { useCallback } from 'react';
 import { Button } from '@signozhq/button';
 import { LifeBuoy } from 'lucide-react';
-import { openExternalLink } from 'utils/navigation';
 
 import signozBrandLogoUrl from '@/assets/Logos/signoz-brand-logo.svg';
 
@@ -9,7 +8,7 @@ import './AuthHeader.styles.scss';
 
 function AuthHeader(): JSX.Element {
 	const handleGetHelp = useCallback((): void => {
-		openExternalLink('https://signoz.io/support/');
+		window.open('https://signoz.io/support/', '_blank');
 	}, []);
 
 	return (

frontend/src/components/CeleryTask/useNavigateToExplorer.ts

@@ -7,13 +7,11 @@ import ROUTES from 'constants/routes';
 import useUpdatedQuery from 'container/GridCardLayout/useResolveQuery';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useNotifications } from 'hooks/useNotifications';
-import history from 'lib/history';
 import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
 import { AppState } from 'store/reducers';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, MetricAggregateOperator } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { openInNewTab } from 'utils/navigation';
 
 export interface NavigateToExplorerProps {
 	filters: TagFilterItem[];
@@ -135,11 +133,7 @@ export function useNavigateToExplorer(): (
 				QueryParams.compositeQuery
 			}=${JSONCompositeQuery}`;
 
-			if (sameTab) {
-				history.push(newExplorerPath);
-			} else {
-				openInNewTab(newExplorerPath);
-			}
+			window.open(newExplorerPath, sameTab ? '_self' : '_blank');
 		},
 		[
 			prepareQuery,

frontend/src/components/ChangelogModal/ChangelogModal.tsx

@@ -11,7 +11,6 @@ import { ChevronsDown, ScrollText } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { ChangelogSchema } from 'types/api/changelog/getChangelogByVersion';
 import { UserPreference } from 'types/api/preferences/preference';
-import { openExternalLink } from 'utils/navigation';
 
 import ChangelogRenderer from './components/ChangelogRenderer';
 
@@ -87,7 +86,11 @@ function ChangelogModal({ changelog, onClose }: Props): JSX.Element {
 	}, [checkScroll]);
 
 	const onClickUpdateWorkspace = (): void => {
-		openExternalLink('https://signoz.io/upgrade-path');
+		window.open(
+			'https://signoz.io/upgrade-path',
+			'_blank',
+			'noopener,noreferrer',
+		);
 	};
 
 	const onClickScrollForMore = (): void => {

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

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

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

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

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

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

frontend/src/components/DetailsPanel/DetailsPanelDrawer.tsx

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

frontend/src/components/DetailsPanel/index.ts

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

frontend/src/components/DetailsPanel/types.ts

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

frontend/src/components/DetailsPanel/useDetailsPanel.ts

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

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

@@ -10,8 +10,9 @@ import { Skeleton, Tooltip } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
 import {
-	getResetPasswordToken,
+	useCreateResetPasswordToken,
 	useDeleteUser,
+	useGetResetPasswordToken,
 	useGetUser,
 	useUpdateMyUserV2,
 	useUpdateUser,
@@ -55,6 +56,27 @@ function getDeleteTooltip(
 	return undefined;
 }
 
+function getInviteButtonLabel(
+	isLoading: boolean,
+	existingToken: { expiresAt?: Date } | undefined,
+	isExpired: boolean,
+	notFound: boolean,
+): string {
+	if (isLoading) {
+		return 'Checking invite...';
+	}
+	if (existingToken && !isExpired) {
+		return 'Copy Invite Link';
+	}
+	if (isExpired) {
+		return 'Regenerate Invite Link';
+	}
+	if (notFound) {
+		return 'Generate Invite Link';
+	}
+	return 'Copy Invite Link';
+}
+
 function toSaveApiError(err: unknown): APIError {
 	return (
 		convertToApiError(err as AxiosError<RenderErrorResponseDTO>) ??
@@ -83,9 +105,11 @@ function EditMemberDrawer({
 	const [localRole, setLocalRole] = useState('');
 	const [isSaving, setIsSaving] = useState(false);
 	const [saveErrors, setSaveErrors] = useState<SaveError[]>([]);
-	const [isGeneratingLink, setIsGeneratingLink] = useState(false);
 	const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
 	const [resetLink, setResetLink] = useState<string | null>(null);
+	const [resetLinkExpiresAt, setResetLinkExpiresAt] = useState<string | null>(
+		null,
+	);
 	const [showResetLinkDialog, setShowResetLinkDialog] = useState(false);
 	const [hasCopiedResetLink, setHasCopiedResetLink] = useState(false);
 	const [linkType, setLinkType] = useState<'invite' | 'reset' | null>(null);
@@ -121,6 +145,27 @@ function EditMemberDrawer({
 		applyDiff,
 	} = useMemberRoleManager(member?.id ?? '', open && !!member?.id);
 
+	// Token status query for invited users
+	const {
+		data: tokenQueryData,
+		isLoading: isLoadingTokenStatus,
+		isError: tokenNotFound,
+	} = useGetResetPasswordToken(
+		{ id: member?.id ?? '' },
+		{ query: { enabled: open && !!member?.id && isInvited } },
+	);
+
+	const existingToken = tokenQueryData?.data;
+	const isTokenExpired =
+		existingToken != null &&
+		new Date(String(existingToken.expiresAt)) < new Date();
+
+	// Create/regenerate token mutation
+	const {
+		mutateAsync: createTokenMutation,
+		isLoading: isGeneratingLink,
+	} = useCreateResetPasswordToken();
+
 	const fetchedDisplayName =
 		fetchedUser?.data?.displayName ?? member?.name ?? '';
 	const fetchedUserId = fetchedUser?.data?.id;
@@ -338,12 +383,21 @@ function EditMemberDrawer({
 		if (!member) {
 			return;
 		}
-		setIsGeneratingLink(true);
 		try {
-			const response = await getResetPasswordToken({ id: member.id });
+			const response = await createTokenMutation({
+				pathParams: { id: member.id },
+			});
 			if (response?.data?.token) {
 				const link = `${window.location.origin}/password-reset?token=${response.data.token}`;
 				setResetLink(link);
+				setResetLinkExpiresAt(
+					response.data.expiresAt
+						? formatTimezoneAdjustedTimestamp(
+								String(response.data.expiresAt),
+								DATE_TIME_FORMATS.DASH_DATETIME,
+						  )
+						: null,
+				);
 				setHasCopiedResetLink(false);
 				setLinkType(isInvited ? 'invite' : 'reset');
 				setShowResetLinkDialog(true);
@@ -359,10 +413,8 @@ function EditMemberDrawer({
 				err as AxiosError<RenderErrorResponseDTO, unknown> | null,
 			);
 			showErrorModal(errMsg as APIError);
-		} finally {
-			setIsGeneratingLink(false);
 		}
-	}, [member, isInvited, onClose, showErrorModal]);
+	}, [member, isInvited, onClose, showErrorModal, createTokenMutation]);
 
 	const [copyState, copyToClipboard] = useCopyToClipboard();
 	const handleCopyResetLink = useCallback((): void => {
@@ -568,12 +620,19 @@ function EditMemberDrawer({
 								<Button
 									className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--warning"
 									onClick={handleGenerateResetLink}
-									disabled={isGeneratingLink || isRootUser}
+									disabled={isGeneratingLink || isRootUser || isLoadingTokenStatus}
 								>
 									<RefreshCw size={12} />
-									{isGeneratingLink && 'Generating...'}
-									{!isGeneratingLink && isInvited && 'Copy Invite Link'}
-									{!isGeneratingLink && !isInvited && 'Generate Password Reset Link'}
+									{isGeneratingLink
+										? 'Generating...'
+										: isInvited
+										? getInviteButtonLabel(
+												isLoadingTokenStatus,
+												existingToken,
+												isTokenExpired,
+												tokenNotFound,
+										  )
+										: 'Generate Password Reset Link'}
 								</Button>
 							</span>
 						</Tooltip>
@@ -623,6 +682,7 @@ function EditMemberDrawer({
 				open={showResetLinkDialog}
 				linkType={linkType}
 				resetLink={resetLink}
+				expiresAt={resetLinkExpiresAt}
 				hasCopied={hasCopiedResetLink}
 				onClose={(): void => {
 					setShowResetLinkDialog(false);

frontend/src/components/EditMemberDrawer/ResetLinkDialog.tsx

@@ -6,6 +6,7 @@ interface ResetLinkDialogProps {
 	open: boolean;
 	linkType: 'invite' | 'reset' | null;
 	resetLink: string | null;
+	expiresAt: string | null;
 	hasCopied: boolean;
 	onClose: () => void;
 	onCopy: () => void;
@@ -15,6 +16,7 @@ function ResetLinkDialog({
 	open,
 	linkType,
 	resetLink,
+	expiresAt,
 	hasCopied,
 	onClose,
 	onCopy,
@@ -53,6 +55,11 @@ function ResetLinkDialog({
 						{hasCopied ? 'Copied!' : 'Copy'}
 					</Button>
 				</div>
+				{expiresAt && (
+					<p className="reset-link-dialog__description">
+						This link expires on {expiresAt}.
+					</p>
+				)}
 			</div>
 		</DialogWrapper>
 	);

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

@@ -2,8 +2,9 @@ import type { ReactNode } from 'react';
 import { toast } from '@signozhq/sonner';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
-	getResetPasswordToken,
+	useCreateResetPasswordToken,
 	useDeleteUser,
+	useGetResetPasswordToken,
 	useGetUser,
 	useSetRoleByUserID,
 	useUpdateMyUserV2,
@@ -55,7 +56,8 @@ jest.mock('api/generated/services/users', () => ({
 	useUpdateUser: jest.fn(),
 	useUpdateMyUserV2: jest.fn(),
 	useSetRoleByUserID: jest.fn(),
-	getResetPasswordToken: jest.fn(),
+	useGetResetPasswordToken: jest.fn(),
+	useCreateResetPasswordToken: jest.fn(),
 }));
 
 jest.mock('api/ErrorResponseHandlerForGeneratedAPIs', () => ({
@@ -82,7 +84,7 @@ jest.mock('react-use', () => ({
 const ROLES_ENDPOINT = '*/api/v1/roles';
 
 const mockDeleteMutate = jest.fn();
-const mockGetResetPasswordToken = jest.mocked(getResetPasswordToken);
+const mockCreateTokenMutateAsync = jest.fn();
 
 const showErrorModal = jest.fn();
 jest.mock('providers/ErrorModalProvider', () => ({
@@ -184,6 +186,31 @@ describe('EditMemberDrawer', () => {
 			mutate: mockDeleteMutate,
 			isLoading: false,
 		});
+		// Token query: valid token for invited members
+		(useGetResetPasswordToken as jest.Mock).mockReturnValue({
+			data: {
+				data: {
+					token: 'invite-tok-valid',
+					id: 'token-1',
+					expiresAt: new Date(Date.now() + 86400000).toISOString(),
+				},
+			},
+			isLoading: false,
+			isError: false,
+		});
+		// Create token mutation
+		mockCreateTokenMutateAsync.mockResolvedValue({
+			status: 'success',
+			data: {
+				token: 'reset-tok-abc',
+				id: 'user-1',
+				expiresAt: new Date(Date.now() + 86400000).toISOString(),
+			},
+		});
+		(useCreateResetPasswordToken as jest.Mock).mockReturnValue({
+			mutateAsync: mockCreateTokenMutateAsync,
+			isLoading: false,
+		});
 	});
 
 	afterEach(() => {
@@ -357,6 +384,40 @@ describe('EditMemberDrawer', () => {
 		expect(screen.queryByText('Last Modified')).not.toBeInTheDocument();
 	});
 
+	it('shows "Regenerate Invite Link" when token is expired', () => {
+		(useGetResetPasswordToken as jest.Mock).mockReturnValue({
+			data: {
+				data: {
+					token: 'old-tok',
+					id: 'token-1',
+					expiresAt: new Date(Date.now() - 86400000).toISOString(), // expired yesterday
+				},
+			},
+			isLoading: false,
+			isError: false,
+		});
+
+		renderDrawer({ member: invitedMember });
+
+		expect(
+			screen.getByRole('button', { name: /regenerate invite link/i }),
+		).toBeInTheDocument();
+	});
+
+	it('shows "Generate Invite Link" when no token exists', () => {
+		(useGetResetPasswordToken as jest.Mock).mockReturnValue({
+			data: undefined,
+			isLoading: false,
+			isError: true,
+		});
+
+		renderDrawer({ member: invitedMember });
+
+		expect(
+			screen.getByRole('button', { name: /generate invite link/i }),
+		).toBeInTheDocument();
+	});
+
 	it('calls deleteUser after confirming revoke invite for invited members', async () => {
 		const onComplete = jest.fn();
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
@@ -609,7 +670,7 @@ describe('EditMemberDrawer', () => {
 			).not.toBeInTheDocument();
 		});
 
-		it('does not call getResetPasswordToken when Reset Link is clicked while disabled (root)', async () => {
+		it('does not call createResetPasswordToken when Reset Link is clicked while disabled (root)', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
 			renderDrawer();
 
@@ -617,20 +678,16 @@ describe('EditMemberDrawer', () => {
 				screen.getByRole('button', { name: /generate password reset link/i }),
 			);
 
-			expect(mockGetResetPasswordToken).not.toHaveBeenCalled();
+			expect(mockCreateTokenMutateAsync).not.toHaveBeenCalled();
 		});
 	});
 
 	describe('Generate Password Reset Link', () => {
 		beforeEach(() => {
 			mockCopyToClipboard.mockClear();
-			mockGetResetPasswordToken.mockResolvedValue({
-				status: 'success',
-				data: { token: 'reset-tok-abc', id: 'user-1' },
-			});
 		});
 
-		it('calls getResetPasswordToken and opens the reset link dialog with the generated link', async () => {
+		it('calls POST and opens the reset link dialog with the generated link and expiry', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
 
 			renderDrawer();
@@ -642,11 +699,12 @@ describe('EditMemberDrawer', () => {
 			const dialog = await screen.findByRole('dialog', {
 				name: /password reset link/i,
 			});
-			expect(mockGetResetPasswordToken).toHaveBeenCalledWith({
-				id: 'user-1',
+			expect(mockCreateTokenMutateAsync).toHaveBeenCalledWith({
+				pathParams: { id: 'user-1' },
 			});
 			expect(dialog).toBeInTheDocument();
 			expect(dialog).toHaveTextContent('reset-tok-abc');
+			expect(dialog).toHaveTextContent(/this link expires on/i);
 		});
 
 		it('copies the link to clipboard and shows "Copied!" on the button', async () => {

frontend/src/components/HostMetricsDetail/HostMetricsDetails.tsx

@@ -50,7 +50,6 @@ import {
 	TracesAggregatorOperator,
 } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { openInNewTab } from 'utils/navigation';
 import { v4 as uuidv4 } from 'uuid';
 
 import { VIEW_TYPES, VIEWS } from './constants';
@@ -331,7 +330,10 @@ function HostMetricsDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			openInNewTab(`${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`);
+			window.open(
+				`${window.location.origin}${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`,
+				'_blank',
+			);
 		} else if (selectedView === VIEW_TYPES.TRACES) {
 			const compositeQuery = {
 				...initialQueryState,
@@ -350,7 +352,10 @@ function HostMetricsDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			openInNewTab(`${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`);
+			window.open(
+				`${window.location.origin}${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`,
+				'_blank',
+			);
 		}
 	};
 

frontend/src/components/LearnMore/LearnMore.tsx

@@ -1,7 +1,6 @@
 import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
 import { ArrowUpRight } from 'lucide-react';
-import { openExternalLink } from 'utils/navigation';
 
 import './LearnMore.styles.scss';
 
@@ -15,7 +14,7 @@ function LearnMore({ text, url, onClick }: LearnMoreProps): JSX.Element {
 	const handleClick = (): void => {
 		onClick?.();
 		if (url) {
-			openExternalLink(url);
+			window.open(url, '_blank');
 		}
 	};
 	return (

frontend/src/components/LogDetail/index.tsx

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

frontend/src/components/MessagingQueueHealthCheck/AttributeCheckList.tsx

@@ -20,7 +20,6 @@ import {
 	KAFKA_SETUP_DOC_LINK,
 	MessagingQueueHealthCheckService,
 } from 'pages/MessagingQueues/MessagingQueuesUtils';
-import { openExternalLink } from 'utils/navigation';
 import { v4 as uuid } from 'uuid';
 
 import './MessagingQueueHealthCheck.styles.scss';
@@ -77,7 +76,7 @@ function ErrorTitleAndKey({
 		if (isCloudUserVal && !!link) {
 			history.push(link);
 		} else {
-			openExternalLink(KAFKA_SETUP_DOC_LINK);
+			window.open(KAFKA_SETUP_DOC_LINK, '_blank');
 		}
 	};
 	return {

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/LogsQuickFilterEmptyState.tsx

@@ -2,7 +2,6 @@ import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
 import EmptyQuickFilterIcon from 'assets/CustomIcons/EmptyQuickFilterIcon';
 import { ArrowUpRight } from 'lucide-react';
-import { openExternalLink } from 'utils/navigation';
 
 const QUICK_FILTER_DOC_PATHS: Record<string, string> = {
 	severity_text: 'severity-text',
@@ -23,8 +22,9 @@ function LogsQuickFilterEmptyState({
 	const handleLearnMoreClick = (): void => {
 		const section = QUICK_FILTER_DOC_PATHS[attributeKey];
 
-		openExternalLink(
+		window.open(
 			`https://signoz.io/docs/logs-management/features/logs-quick-filters#${section}`,
+			'_blank',
 		);
 	};
 	return (

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

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

frontend/src/components/TimelineV3/TimelineV3.tsx

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

frontend/src/components/TimelineV3/utils.ts

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

frontend/src/constants/localStorage.ts

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

frontend/src/constants/reactQueryKeys.ts

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

frontend/src/constants/routes.ts

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

frontend/src/constants/theme.ts

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

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

@@ -9,7 +9,6 @@ import {
 } from 'container/ApiMonitoring/utils';
 import { UnfoldVertical } from 'lucide-react';
 import { SuccessResponse } from 'types/api';
-import { openInNewTab } from 'utils/navigation';
 
 import emptyStateUrl from '@/assets/Icons/emptyState.svg';
 
@@ -108,7 +107,7 @@ function DependentServices({
 							urlQuery.set(QueryParams.startTime, timeRange.startTime.toString());
 							urlQuery.set(QueryParams.endTime, timeRange.endTime.toString());
 							url.search = urlQuery.toString();
-							openInNewTab(`${url.pathname}${url.search}`);
+							window.open(url.toString(), '_blank');
 						},
 						className: 'clickable-row',
 					})}

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

@@ -7,7 +7,6 @@ import { FeatureKeys } from 'constants/features';
 import { useAppContext } from 'providers/App/App';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 import { isModifierKeyPressed } from 'utils/app';
-import { openExternalLink } from 'utils/navigation';
 
 import { getOptionList } from './config';
 import { AlertTypeCard, SelectTypeContainer } from './styles';
@@ -56,7 +55,7 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 			page: 'New alert data source selection page',
 		});
 
-		openExternalLink(url);
+		window.open(url, '_blank');
 	}
 	const renderOptions = useMemo(
 		() => (

frontend/src/container/CreateAlertV2/AlertCondition/utils.tsx

@@ -14,7 +14,6 @@ import { IUser } from 'providers/App/types';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { USER_ROLES } from 'types/roles';
-import { openInNewTab } from 'utils/navigation';
 
 import { ROUTING_POLICIES_ROUTE } from './constants';
 import { RoutingPolicyBannerProps } from './types';
@@ -388,7 +387,7 @@ export function NotificationChannelsNotFoundContent({
 							style={{ padding: '0 4px' }}
 							type="link"
 							onClick={(): void => {
-								openInNewTab(ROUTES.CHANNELS_NEW);
+								window.open(ROUTES.CHANNELS_NEW, '_blank');
 							}}
 						>
 							here.

frontend/src/container/CustomDomainSettings/CustomDomainSettings.tsx

@@ -21,7 +21,6 @@ import { useGetHosts, usePutHost } from 'api/generated/services/zeus';
 import { AxiosError } from 'axios';
 import { useAppContext } from 'providers/App/App';
 import { useTimezone } from 'providers/Timezone';
-import { openExternalLink } from 'utils/navigation';
 
 import CustomDomainEditModal from './CustomDomainEditModal';
 
@@ -49,7 +48,7 @@ function DomainUpdateToast({
 					className="custom-domain-toast-visit-btn"
 					suffixIcon={<ExternalLink size={12} />}
 					onClick={(): void => {
-						openExternalLink(url);
+						window.open(url, '_blank', 'noopener,noreferrer');
 					}}
 				>
 					Visit new URL

frontend/src/container/DashboardContainer/DashboardSettings/PublicDashboard/index.tsx

@@ -16,7 +16,6 @@ import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
 import { PublicDashboardMetaProps } from 'types/api/dashboard/public/getMeta';
 import APIError from 'types/api/error';
 import { USER_ROLES } from 'types/roles';
-import { openInNewTab } from 'utils/navigation';
 
 import './PublicDashboard.styles.scss';
 
@@ -295,7 +294,7 @@ function PublicDashboardSetting(): JSX.Element {
 								icon={<ExternalLink size={12} />}
 								onClick={(): void => {
 									if (publicDashboardURL) {
-										openInNewTab(publicDashboardURL);
+										window.open(publicDashboardURL, '_blank');
 									}
 								}}
 							/>

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

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

frontend/src/container/FormAlertRules/BasicInfo.tsx

@@ -15,7 +15,6 @@ import { AlertDef, Labels } from 'types/api/alerts/def';
 import { Channels } from 'types/api/channels/getAll';
 import APIError from 'types/api/error';
 import { requireErrorMessage } from 'utils/form/requireErrorMessage';
-import { openInNewTab } from 'utils/navigation';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import ChannelSelect from './ChannelSelect';
@@ -88,7 +87,7 @@ function BasicInfo({
 			dataSource: ALERTS_DATA_SOURCE_MAP[alertDef?.alertType as AlertTypes],
 			ruleId: isNewRule ? 0 : alertDef?.id,
 		});
-		openInNewTab(ROUTES.CHANNELS_NEW);
+		window.open(ROUTES.CHANNELS_NEW, '_blank');
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 	const hasLoggedEvent = useRef(false);

frontend/src/container/FormAlertRules/index.tsx

@@ -46,7 +46,6 @@ import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { isModifierKeyPressed } from 'utils/app';
 import { compositeQueryToQueryEnvelope } from 'utils/compositeQueryToQueryEnvelope';
-import { openExternalLink } from 'utils/navigation';
 
 import BasicInfo from './BasicInfo';
 import ChartPreview from './ChartPreview';
@@ -772,7 +771,7 @@ function FormAlertRules({
 				queryType: currentQuery.queryType,
 				link: url,
 			});
-			openExternalLink(url);
+			window.open(url, '_blank');
 		}
 	}
 

frontend/src/container/GeneralSettings/GeneralSettings.tsx

@@ -38,6 +38,7 @@ import {
 } from 'types/api/settings/getRetention';
 import { USER_ROLES } from 'types/roles';
 
+import LicenseRowDismissibleCallout from './LicenseKeyRow/LicenseRowDismissibleCallout/LicenseRowDismissibleCallout';
 import Retention from './Retention';
 import StatusMessage from './StatusMessage';
 import { ActionItemsContainer, ErrorText, ErrorTextContainer } from './styles';
@@ -683,7 +684,12 @@ function GeneralSettings({
 					{showCustomDomainSettings && activeLicense?.key && (
 						<div className="custom-domain-card-divider" />
 					)}
-					{activeLicense?.key && <LicenseKeyRow />}
+					{activeLicense?.key && (
+						<>
+							<LicenseKeyRow />
+							<LicenseRowDismissibleCallout />
+						</>
+					)}
 				</div>
 			)}
 

frontend/src/container/GeneralSettings/LicenseKeyRow/LicenseRowDismissibleCallout/LicenseRowDismissible.styles.scss

@@ -0,0 +1,31 @@
+.license-key-callout {
+	margin: var(--spacing-4) var(--spacing-6);
+	width: auto;
+
+	.license-key-callout__description {
+		display: flex;
+		align-items: baseline;
+		gap: var(--spacing-2);
+		min-width: 0;
+		flex-wrap: wrap;
+		font-size: 13px;
+	}
+
+	.license-key-callout__link {
+		display: inline-flex;
+		align-items: center;
+		padding: var(--spacing-1) var(--spacing-3);
+		border-radius: 2px;
+		background: var(--callout-primary-background);
+		color: var(--callout-primary-description);
+		font-family: 'SF Mono', 'Fira Code', 'Fira Mono', monospace;
+		font-size: var(--paragraph-base-400-font-size);
+		text-decoration: none;
+
+		&:hover {
+			background: var(--callout-primary-border);
+			color: var(--callout-primary-icon);
+			text-decoration: none;
+		}
+	}
+}

frontend/src/container/GeneralSettings/LicenseKeyRow/LicenseRowDismissibleCallout/LicenseRowDismissibleCallout.tsx

@@ -0,0 +1,83 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { Callout } from '@signozhq/callout';
+import getLocalStorageApi from 'api/browser/localstorage/get';
+import setLocalStorageApi from 'api/browser/localstorage/set';
+import { FeatureKeys } from 'constants/features';
+import { LOCALSTORAGE } from 'constants/localStorage';
+import ROUTES from 'constants/routes';
+import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
+import { useAppContext } from 'providers/App/App';
+import { USER_ROLES } from 'types/roles';
+
+import './LicenseRowDismissible.styles.scss';
+
+function LicenseRowDismissibleCallout(): JSX.Element | null {
+	const [isCalloutDismissed, setIsCalloutDismissed] = useState<boolean>(
+		() =>
+			getLocalStorageApi(LOCALSTORAGE.LICENSE_KEY_CALLOUT_DISMISSED) === 'true',
+	);
+
+	const { user, featureFlags } = useAppContext();
+	const { isCloudUser } = useGetTenantLicense();
+
+	const isAdmin = user.role === USER_ROLES.ADMIN;
+	const isEditor = user.role === USER_ROLES.EDITOR;
+
+	const isGatewayEnabled =
+		featureFlags?.find((feature) => feature.name === FeatureKeys.GATEWAY)
+			?.active || false;
+
+	const hasServiceAccountsAccess = isAdmin;
+
+	const hasIngestionAccess =
+		(isCloudUser && !isGatewayEnabled) ||
+		(isGatewayEnabled && (isAdmin || isEditor));
+
+	const handleDismissCallout = (): void => {
+		setLocalStorageApi(LOCALSTORAGE.LICENSE_KEY_CALLOUT_DISMISSED, 'true');
+		setIsCalloutDismissed(true);
+	};
+
+	return !isCalloutDismissed ? (
+		<Callout
+			type="info"
+			size="small"
+			showIcon
+			dismissable
+			onClose={handleDismissCallout}
+			className="license-key-callout"
+			description={
+				<div className="license-key-callout__description">
+					This is <strong>NOT</strong> your ingestion or Service account key.
+					{(hasServiceAccountsAccess || hasIngestionAccess) && (
+						<>
+							{' '}
+							Find your{' '}
+							{hasServiceAccountsAccess && (
+								<Link
+									to={ROUTES.SERVICE_ACCOUNTS_SETTINGS}
+									className="license-key-callout__link"
+								>
+									Service account here
+								</Link>
+							)}
+							{hasServiceAccountsAccess && hasIngestionAccess && ' and '}
+							{hasIngestionAccess && (
+								<Link
+									to={ROUTES.INGESTION_SETTINGS}
+									className="license-key-callout__link"
+								>
+									Ingestion key here
+								</Link>
+							)}
+							.
+						</>
+					)}
+				</div>
+			}
+		/>
+	) : null;
+}
+
+export default LicenseRowDismissibleCallout;

frontend/src/container/GeneralSettings/LicenseKeyRow/LicenseRowDismissibleCallout/__tests__/LicenseRowDismissibleCallout.test.tsx

@@ -0,0 +1,229 @@
+import { FeatureKeys } from 'constants/features';
+import { LOCALSTORAGE } from 'constants/localStorage';
+import ROUTES from 'constants/routes';
+import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
+import { render, screen, userEvent } from 'tests/test-utils';
+import { USER_ROLES } from 'types/roles';
+
+import LicenseRowDismissibleCallout from '../LicenseRowDismissibleCallout';
+
+const getDescription = (): HTMLElement =>
+	screen.getByText(
+		(_, el) =>
+			el?.classList?.contains('license-key-callout__description') ?? false,
+	);
+
+const queryDescription = (): HTMLElement | null =>
+	screen.queryByText(
+		(_, el) =>
+			el?.classList?.contains('license-key-callout__description') ?? false,
+	);
+
+jest.mock('hooks/useGetTenantLicense', () => ({
+	useGetTenantLicense: jest.fn(),
+}));
+
+const mockLicense = (isCloudUser: boolean): void => {
+	(useGetTenantLicense as jest.Mock).mockReturnValue({
+		isCloudUser,
+		isEnterpriseSelfHostedUser: !isCloudUser,
+		isCommunityUser: false,
+		isCommunityEnterpriseUser: false,
+	});
+};
+
+const renderCallout = (
+	role: string,
+	isCloudUser: boolean,
+	gatewayActive: boolean,
+): void => {
+	mockLicense(isCloudUser);
+	render(
+		<LicenseRowDismissibleCallout />,
+		{},
+		{
+			role,
+			appContextOverrides: {
+				featureFlags: [
+					{
+						name: FeatureKeys.GATEWAY,
+						active: gatewayActive,
+						usage: 0,
+						usage_limit: -1,
+						route: '',
+					},
+				],
+			},
+		},
+	);
+};
+
+describe('LicenseRowDismissibleCallout', () => {
+	beforeEach(() => {
+		localStorage.clear();
+		jest.clearAllMocks();
+	});
+
+	describe('callout content per access level', () => {
+		it.each([
+			{
+				scenario: 'viewer, non-cloud, gateway off — base text only, no links',
+				role: USER_ROLES.VIEWER,
+				isCloudUser: false,
+				gatewayActive: false,
+				serviceAccountLink: false,
+				ingestionLink: false,
+				expectedText: 'This is NOT your ingestion or Service account key.',
+			},
+			{
+				scenario: 'admin, non-cloud, gateway off — service accounts link only',
+				role: USER_ROLES.ADMIN,
+				isCloudUser: false,
+				gatewayActive: false,
+				serviceAccountLink: true,
+				ingestionLink: false,
+				expectedText:
+					'This is NOT your ingestion or Service account key. Find your Service account here.',
+			},
+			{
+				scenario: 'viewer, cloud, gateway off — ingestion link only',
+				role: USER_ROLES.VIEWER,
+				isCloudUser: true,
+				gatewayActive: false,
+				serviceAccountLink: false,
+				ingestionLink: true,
+				expectedText:
+					'This is NOT your ingestion or Service account key. Find your Ingestion key here.',
+			},
+			{
+				scenario: 'admin, cloud, gateway off — both links',
+				role: USER_ROLES.ADMIN,
+				isCloudUser: true,
+				gatewayActive: false,
+				serviceAccountLink: true,
+				ingestionLink: true,
+				expectedText:
+					'This is NOT your ingestion or Service account key. Find your Service account here and Ingestion key here.',
+			},
+			{
+				scenario: 'admin, non-cloud, gateway on — both links',
+				role: USER_ROLES.ADMIN,
+				isCloudUser: false,
+				gatewayActive: true,
+				serviceAccountLink: true,
+				ingestionLink: true,
+				expectedText:
+					'This is NOT your ingestion or Service account key. Find your Service account here and Ingestion key here.',
+			},
+			{
+				scenario: 'editor, non-cloud, gateway on — ingestion link only',
+				role: USER_ROLES.EDITOR,
+				isCloudUser: false,
+				gatewayActive: true,
+				serviceAccountLink: false,
+				ingestionLink: true,
+				expectedText:
+					'This is NOT your ingestion or Service account key. Find your Ingestion key here.',
+			},
+			{
+				scenario: 'editor, cloud, gateway off — ingestion link only',
+				role: USER_ROLES.EDITOR,
+				isCloudUser: true,
+				gatewayActive: false,
+				serviceAccountLink: false,
+				ingestionLink: true,
+				expectedText:
+					'This is NOT your ingestion or Service account key. Find your Ingestion key here.',
+			},
+		])(
+			'$scenario',
+			({
+				role,
+				isCloudUser,
+				gatewayActive,
+				serviceAccountLink,
+				ingestionLink,
+				expectedText,
+			}) => {
+				renderCallout(role, isCloudUser, gatewayActive);
+
+				const description = getDescription();
+				expect(description).toBeInTheDocument();
+				expect(description).toHaveTextContent(expectedText);
+
+				if (serviceAccountLink) {
+					expect(
+						screen.getByRole('link', { name: /Service account here/ }),
+					).toBeInTheDocument();
+				} else {
+					expect(
+						screen.queryByRole('link', { name: /Service account here/ }),
+					).not.toBeInTheDocument();
+				}
+
+				if (ingestionLink) {
+					expect(
+						screen.getByRole('link', { name: /Ingestion key here/ }),
+					).toBeInTheDocument();
+				} else {
+					expect(
+						screen.queryByRole('link', { name: /Ingestion key here/ }),
+					).not.toBeInTheDocument();
+				}
+			},
+		);
+	});
+
+	describe('Link routing', () => {
+		it('should link to service accounts settings', () => {
+			renderCallout(USER_ROLES.ADMIN, false, false);
+
+			const link = screen.getByRole('link', {
+				name: /Service account here/,
+			}) as HTMLAnchorElement;
+
+			expect(link.getAttribute('href')).toBe(ROUTES.SERVICE_ACCOUNTS_SETTINGS);
+		});
+
+		it('should link to ingestion settings', () => {
+			renderCallout(USER_ROLES.VIEWER, true, false);
+
+			const link = screen.getByRole('link', {
+				name: /Ingestion key here/,
+			}) as HTMLAnchorElement;
+
+			expect(link.getAttribute('href')).toBe(ROUTES.INGESTION_SETTINGS);
+		});
+	});
+
+	describe('Dismissal functionality', () => {
+		it('should hide callout when dismiss button is clicked', async () => {
+			const user = userEvent.setup();
+			renderCallout(USER_ROLES.ADMIN, false, false);
+
+			expect(getDescription()).toBeInTheDocument();
+
+			await user.click(screen.getByRole('button'));
+
+			expect(queryDescription()).not.toBeInTheDocument();
+		});
+
+		it('should persist dismissal in localStorage', async () => {
+			const user = userEvent.setup();
+			renderCallout(USER_ROLES.ADMIN, false, false);
+
+			await user.click(screen.getByRole('button'));
+
+			expect(
+				localStorage.getItem(LOCALSTORAGE.LICENSE_KEY_CALLOUT_DISMISSED),
+			).toBe('true');
+		});
+
+		it('should not render when localStorage dismissal is set', () => {
+			localStorage.setItem(LOCALSTORAGE.LICENSE_KEY_CALLOUT_DISMISSED, 'true');
+			renderCallout(USER_ROLES.ADMIN, false, false);
+
+			expect(queryDescription()).not.toBeInTheDocument();
+		});
+	});
+});

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

@@ -13,7 +13,6 @@ import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
 import { GettableAlert } from 'types/api/alerts/get';
 import { USER_ROLES } from 'types/roles';
-import { openExternalLink } from 'utils/navigation';
 
 import beaconUrl from '@/assets/Icons/beacon.svg';
 
@@ -104,7 +103,11 @@ export default function AlertRules({
 									source: 'Alert Rules',
 								});
 
-								openExternalLink('https://signoz.io/docs/alerts/');
+								window.open(
+									'https://signoz.io/docs/alerts/',
+									'_blank',
+									'noreferrer noopener',
+								);
 							}}
 						>
 							Learn more <ArrowUpRight size={12} />

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

@@ -10,7 +10,6 @@ import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
 import { Dashboard } from 'types/api/dashboard/getAll';
 import { USER_ROLES } from 'types/roles';
-import { openExternalLink, openInNewTab } from 'utils/navigation';
 
 import dialsUrl from '@/assets/Icons/dials.svg';
 
@@ -88,7 +87,10 @@ export default function Dashboards({
 								logEvent('Homepage: Learn more clicked', {
 									source: 'Dashboards',
 								});
-								openExternalLink('https://signoz.io/docs/userguide/manage-dashboards/');
+								window.open(
+									'https://signoz.io/docs/userguide/manage-dashboards/',
+									'_blank',
+								);
 							}}
 						>
 							Learn more <ArrowUpRight size={12} />
@@ -112,7 +114,7 @@ export default function Dashboards({
 							dashboardName: dashboard.data.title,
 						});
 						if (event.metaKey || event.ctrlKey) {
-							openInNewTab(getLink());
+							window.open(getLink(), '_blank');
 						} else {
 							safeNavigate(getLink());
 						}

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

@@ -9,7 +9,6 @@ import { Link2 } from 'lucide-react';
 import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
 import { LicensePlatform } from 'types/api/licensesV3/getActive';
-import { openExternalLink } from 'utils/navigation';
 
 import containerPlusUrl from '@/assets/Icons/container-plus.svg';
 import helloWaveUrl from '@/assets/Icons/hello-wave.svg';
@@ -52,7 +51,7 @@ function DataSourceInfo({
 		if (activeLicense && activeLicense.platform === LicensePlatform.CLOUD) {
 			history.push(ROUTES.GET_STARTED_WITH_CLOUD);
 		} else {
-			openExternalLink(DOCS_LINKS.ADD_DATA_SOURCE);
+			window?.open(DOCS_LINKS.ADD_DATA_SOURCE, '_blank', 'noopener noreferrer');
 		}
 	};
 

frontend/src/container/Home/HomeChecklist/HomeChecklist.tsx

@@ -8,7 +8,6 @@ import { ArrowRight, ArrowRightToLine, BookOpenText } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { LicensePlatform } from 'types/api/licensesV3/getActive';
 import { USER_ROLES } from 'types/roles';
-import { openExternalLink } from 'utils/navigation';
 
 import './HomeChecklist.styles.scss';
 
@@ -100,7 +99,11 @@ function HomeChecklist({
 														) {
 															history.push(item.toRoute || '');
 														} else {
-															openExternalLink(item.docsLink || '');
+															window?.open(
+																item.docsLink || '',
+																'_blank',
+																'noopener noreferrer',
+															);
 														}
 													}}
 												>
@@ -116,7 +119,7 @@ function HomeChecklist({
 																step: item.id,
 															});
 
-															openExternalLink(item.docsLink || '');
+															window?.open(item.docsLink, '_blank', 'noopener noreferrer');
 														}}
 													>
 														<BookOpenText size={16} />

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

@@ -19,13 +19,12 @@ import { useAppContext } from 'providers/App/App';
 import { ViewProps } from 'types/api/saveViews/types';
 import { DataSource } from 'types/common/queryBuilder';
 import { USER_ROLES } from 'types/roles';
-import { openExternalLink } from 'utils/navigation';
 
-import circusTentUrl from '@/assets/Icons/circus-tent.svg';
-import eightBallUrl from '@/assets/Icons/eight-ball.svg';
 import floppyDiscUrl from '@/assets/Icons/floppy-disc.svg';
 import logsUrl from '@/assets/Icons/logs.svg';
 
+import { getItemIcon } from '../constants';
+
 export default function SavedViews({
 	onUpdateChecklistDoneItem,
 	loadingUserPreferences,
@@ -197,7 +196,11 @@ export default function SavedViews({
 									entity: selectedEntity,
 								});
 
-								openExternalLink('https://signoz.io/docs/product-features/saved-view/');
+								window.open(
+									'https://signoz.io/docs/product-features/saved-view/',
+									'_blank',
+									'noopener noreferrer',
+								);
 							}}
 						>
 							Learn more <ArrowUpRight size={12} />
@@ -226,7 +229,7 @@ export default function SavedViews({
 					>
 						<div className="saved-view-item-name-container home-data-item-name-container">
 							<img
-								src={view.id % 2 === 0 ? eightBallUrl : circusTentUrl}
+								src={getItemIcon(String(view.id))}
 								alt="alert-rules"
 								className="alert-rules-img"
 							/>

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

@@ -31,7 +31,6 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import { Tags } from 'types/reducer/trace';
 import { USER_ROLES } from 'types/roles';
 import { isModifierKeyPressed } from 'utils/app';
-import { openExternalLink } from 'utils/navigation';
 
 import triangleRulerUrl from '@/assets/Icons/triangle-ruler.svg';
 
@@ -80,7 +79,11 @@ const EmptyState = memo(
 								) {
 									history.push(ROUTES.GET_STARTED_WITH_CLOUD);
 								} else {
-									openExternalLink(DOCS_LINKS.ADD_DATA_SOURCE);
+									window?.open(
+										DOCS_LINKS.ADD_DATA_SOURCE,
+										'_blank',
+										'noopener noreferrer',
+									);
 								}
 							}}
 						>
@@ -94,7 +97,10 @@ const EmptyState = memo(
 								logEvent('Homepage: Learn more clicked', {
 									source: 'Service Metrics',
 								});
-								openExternalLink('https://signoz.io/docs/instrumentation/overview/');
+								window.open(
+									'https://signoz.io/docs/instrumentation/overview/',
+									'_blank',
+								);
 							}}
 						>
 							Learn more <ArrowUpRight size={12} />

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

@@ -17,7 +17,6 @@ import { ServicesList } from 'types/api/metrics/getService';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { USER_ROLES } from 'types/roles';
 import { isModifierKeyPressed } from 'utils/app';
-import { openExternalLink } from 'utils/navigation';
 
 import triangleRulerUrl from '@/assets/Icons/triangle-ruler.svg';
 
@@ -134,7 +133,11 @@ export default function ServiceTraces({
 									) {
 										history.push(ROUTES.GET_STARTED_WITH_CLOUD);
 									} else {
-										openExternalLink(DOCS_LINKS.ADD_DATA_SOURCE);
+										window?.open(
+											DOCS_LINKS.ADD_DATA_SOURCE,
+											'_blank',
+											'noopener noreferrer',
+										);
 									}
 								}}
 							>
@@ -148,7 +151,10 @@ export default function ServiceTraces({
 									logEvent('Homepage: Learn more clicked', {
 										source: 'Service Traces',
 									});
-									openExternalLink('https://signoz.io/docs/instrumentation/overview/');
+									window.open(
+										'https://signoz.io/docs/instrumentation/overview/',
+										'_blank',
+									);
 								}}
 							>
 								Learn more <ArrowUpRight size={12} />

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

@@ -49,7 +49,6 @@ import {
 	TracesAggregatorOperator,
 } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { openInNewTab } from 'utils/navigation';
 import { v4 as uuidv4 } from 'uuid';
 
 import ClusterEvents from '../../EntityDetailsUtils/EntityEvents';
@@ -415,7 +414,10 @@ function ClusterDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			openInNewTab(`${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`);
+			window.open(
+				`${window.location.origin}${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`,
+				'_blank',
+			);
 		} else if (selectedView === VIEW_TYPES.TRACES) {
 			const compositeQuery = {
 				...initialQueryState,
@@ -434,7 +436,10 @@ function ClusterDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			openInNewTab(`${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`);
+			window.open(
+				`${window.location.origin}${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`,
+				'_blank',
+			);
 		}
 	};
 

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

@@ -48,7 +48,6 @@ import {
 	TracesAggregatorOperator,
 } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { openInNewTab } from 'utils/navigation';
 import { v4 as uuidv4 } from 'uuid';
 
 import DaemonSetEvents from '../../EntityDetailsUtils/EntityEvents';
@@ -430,7 +429,10 @@ function DaemonSetDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			openInNewTab(`${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`);
+			window.open(
+				`${window.location.origin}${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`,
+				'_blank',
+			);
 		} else if (selectedView === VIEW_TYPES.TRACES) {
 			const compositeQuery = {
 				...initialQueryState,
@@ -449,7 +451,10 @@ function DaemonSetDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			openInNewTab(`${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`);
+			window.open(
+				`${window.location.origin}${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`,
+				'_blank',
+			);
 		}
 	};
 

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

@@ -50,7 +50,6 @@ import {
 	TracesAggregatorOperator,
 } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { openInNewTab } from 'utils/navigation';
 import { v4 as uuidv4 } from 'uuid';
 
 import DeploymentEvents from '../../EntityDetailsUtils/EntityEvents';
@@ -434,7 +433,10 @@ function DeploymentDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			openInNewTab(`${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`);
+			window.open(
+				`${window.location.origin}${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`,
+				'_blank',
+			);
 		} else if (selectedView === VIEW_TYPES.TRACES) {
 			const compositeQuery = {
 				...initialQueryState,
@@ -453,7 +455,10 @@ function DeploymentDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			openInNewTab(`${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`);
+			window.open(
+				`${window.location.origin}${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`,
+				'_blank',
+			);
 		}
 	};
 

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

@@ -48,7 +48,6 @@ import {
 	TracesAggregatorOperator,
 } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { openInNewTab } from 'utils/navigation';
 import { v4 as uuidv4 } from 'uuid';
 
 import JobEvents from '../../EntityDetailsUtils/EntityEvents';
@@ -428,7 +427,10 @@ function JobDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			openInNewTab(`${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`);
+			window.open(
+				`${window.location.origin}${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`,
+				'_blank',
+			);
 		} else if (selectedView === VIEW_TYPES.TRACES) {
 			const compositeQuery = {
 				...initialQueryState,
@@ -447,7 +449,10 @@ function JobDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			openInNewTab(`${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`);
+			window.open(
+				`${window.location.origin}${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`,
+				'_blank',
+			);
 		}
 	};
 

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

@@ -50,7 +50,6 @@ import {
 	TracesAggregatorOperator,
 } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { openInNewTab } from 'utils/navigation';
 import { v4 as uuidv4 } from 'uuid';
 
 import NamespaceEvents from '../../EntityDetailsUtils/EntityEvents';
@@ -420,7 +419,10 @@ function NamespaceDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			openInNewTab(`${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`);
+			window.open(
+				`${window.location.origin}${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`,
+				'_blank',
+			);
 		} else if (selectedView === VIEW_TYPES.TRACES) {
 			const compositeQuery = {
 				...initialQueryState,
@@ -439,7 +441,10 @@ function NamespaceDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			openInNewTab(`${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`);
+			window.open(
+				`${window.location.origin}${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`,
+				'_blank',
+			);
 		}
 	};
 

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

@@ -50,7 +50,6 @@ import {
 	TracesAggregatorOperator,
 } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { openInNewTab } from 'utils/navigation';
 import { v4 as uuidv4 } from 'uuid';
 
 import NodeLogs from '../../EntityDetailsUtils/EntityLogs';
@@ -417,7 +416,10 @@ function NodeDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			openInNewTab(`${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`);
+			window.open(
+				`${window.location.origin}${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`,
+				'_blank',
+			);
 		} else if (selectedView === VIEW_TYPES.TRACES) {
 			const compositeQuery = {
 				...initialQueryState,
@@ -436,7 +438,10 @@ function NodeDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			openInNewTab(`${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`);
+			window.open(
+				`${window.location.origin}${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`,
+				'_blank',
+			);
 		}
 	};
 

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

@@ -50,7 +50,6 @@ import {
 	TracesAggregatorOperator,
 } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { openInNewTab } from 'utils/navigation';
 import { v4 as uuidv4 } from 'uuid';
 
 import PodEvents from '../../EntityDetailsUtils/EntityEvents';
@@ -436,7 +435,10 @@ function PodDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			openInNewTab(`${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`);
+			window.open(
+				`${window.location.origin}${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`,
+				'_blank',
+			);
 		} else if (selectedView === VIEW_TYPES.TRACES) {
 			const compositeQuery = {
 				...initialQueryState,
@@ -455,7 +457,10 @@ function PodDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			openInNewTab(`${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`);
+			window.open(
+				`${window.location.origin}${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`,
+				'_blank',
+			);
 		}
 	};
 

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

@@ -53,7 +53,6 @@ import {
 	TracesAggregatorOperator,
 } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { openInNewTab } from 'utils/navigation';
 import { v4 as uuidv4 } from 'uuid';
 
 import {
@@ -432,7 +431,10 @@ function StatefulSetDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			openInNewTab(`${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`);
+			window.open(
+				`${window.location.origin}${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`,
+				'_blank',
+			);
 		} else if (selectedView === VIEW_TYPES.TRACES) {
 			const compositeQuery = {
 				...initialQueryState,
@@ -451,7 +453,10 @@ function StatefulSetDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			openInNewTab(`${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`);
+			window.open(
+				`${window.location.origin}${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`,
+				'_blank',
+			);
 		}
 	};
 

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

@@ -1,6 +1,5 @@
 import { ArrowRightOutlined } from '@ant-design/icons';
 import { Typography } from 'antd';
-import { openExternalLink } from 'utils/navigation';
 
 interface AlertInfoCardProps {
 	header: string;
@@ -20,7 +19,7 @@ function AlertInfoCard({
 			className="alert-info-card"
 			onClick={(): void => {
 				onClick();
-				openExternalLink(link);
+				window.open(link, '_blank');
 			}}
 		>
 			<div className="alert-card-text">

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

@@ -1,6 +1,5 @@
 import { ArrowRightOutlined, PlayCircleFilled } from '@ant-design/icons';
 import { Flex, Typography } from 'antd';
-import { openExternalLink } from 'utils/navigation';
 
 interface InfoLinkTextProps {
 	infoText: string;
@@ -21,7 +20,7 @@ function InfoLinkText({
 		<Flex
 			onClick={(): void => {
 				onClick();
-				openExternalLink(link);
+				window.open(link, '_blank');
 			}}
 			className="info-link-container"
 		>

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -83,7 +83,6 @@ import {
 } from 'types/api/dashboard/getAll';
 import APIError from 'types/api/error';
 import { isModifierKeyPressed } from 'utils/app';
-import { openExternalLink, openInNewTab } from 'utils/navigation';
 
 import awwSnapUrl from '@/assets/Icons/awwSnap.svg';
 import dashboardsUrl from '@/assets/Icons/dashboards.svg';
@@ -458,7 +457,7 @@ function DashboardsList(): JSX.Element {
 													onClick={(e): void => {
 														e.stopPropagation();
 														e.preventDefault();
-														openInNewTab(getLink());
+														window.open(getLink(), '_blank');
 													}}
 												>
 													Open in New Tab
@@ -740,8 +739,9 @@ function DashboardsList(): JSX.Element {
 									className="learn-more"
 									data-testid="learn-more"
 									onClick={(): void => {
-										openExternalLink(
+										window.open(
 											'https://signoz.io/docs/userguide/manage-dashboards?utm_source=product&utm_medium=dashboard-list-empty-state',
+											'_blank',
 										);
 									}}
 								>

frontend/src/container/ListOfDashboard/TableComponents/Name.tsx

@@ -1,7 +1,6 @@
 import { LockFilled } from '@ant-design/icons';
 import ROUTES from 'constants/routes';
 import history from 'lib/history';
-import { openInNewTab } from 'utils/navigation';
 
 import { Data } from '../DashboardsList';
 import { TableLinkText } from './styles';
@@ -13,7 +12,7 @@ function Name(name: Data['name'], data: Data): JSX.Element {
 
 	const onClickHandler = (event: React.MouseEvent<HTMLElement>): void => {
 		if (event.metaKey || event.ctrlKey) {
-			openInNewTab(getLink());
+			window.open(getLink(), '_blank');
 		} else {
 			history.push(getLink());
 		}

frontend/src/container/LogDetailedView/ContextView/ContextLogRenderer.tsx

@@ -17,7 +17,6 @@ import useUrlQuery from 'hooks/useUrlQuery';
 import { ILog } from 'types/api/logs/log';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
-import { openInNewTab } from 'utils/navigation';
 
 import { useContextLogData } from './useContextLogData';
 
@@ -117,7 +116,7 @@ function ContextLogRenderer({
 			);
 
 			const link = `${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`;
-			openInNewTab(link);
+			window.open(link, '_blank', 'noopener,noreferrer');
 		},
 		[query, urlQuery],
 	);

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

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

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

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

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

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

frontend/src/container/LogDetailedView/TableView.tsx

@@ -34,7 +34,6 @@ import { SET_DETAILED_LOG_DATA } from 'types/actions/logs';
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { openInNewTab } from 'utils/navigation';
 
 import { ActionItemProps } from './ActionItem';
 import FieldRenderer from './FieldRenderer';
@@ -192,7 +191,7 @@ function TableView({
 
 			if (event.ctrlKey || event.metaKey) {
 				// open the trace in new tab
-				openInNewTab(route);
+				window.open(route, '_blank');
 			} else {
 				history.push(route);
 			}

frontend/src/container/LogsError/LogsError.tsx

@@ -2,7 +2,6 @@ import { Typography } from 'antd';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import history from 'lib/history';
 import { ArrowRight } from 'lucide-react';
-import { openExternalLink } from 'utils/navigation';
 
 import awwSnapUrl from '@/assets/Icons/awwSnap.svg';
 
@@ -15,7 +14,7 @@ export default function LogsError(): JSX.Element {
 		if (isCloudUserVal) {
 			history.push('/support');
 		} else {
-			openExternalLink('https://signoz.io/slack');
+			window.open('https://signoz.io/slack', '_blank');
 		}
 	};
 

frontend/src/container/MetricsApplication/utils.ts

@@ -1,6 +1,5 @@
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
-import { openInNewTab as openInNewTabFn } from 'utils/navigation';
 
 import { TopOperationList } from './TopOperationsTable';
 import { NavigateToTraceProps } from './types';
@@ -38,7 +37,7 @@ export const navigateToTrace = ({
 	}=${JSONCompositeQuery}`;
 
 	if (openInNewTab) {
-		openInNewTabFn(newTraceExplorerPath);
+		window.open(newTraceExplorerPath, '_blank');
 	} else {
 		safeNavigate(newTraceExplorerPath);
 	}

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

@@ -9,7 +9,6 @@ import {
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import { Bell, Grid } from 'lucide-react';
-import { openInNewTab } from 'utils/navigation';
 import { pluralize } from 'utils/pluralize';
 
 import { DashboardsAndAlertsPopoverProps } from './types';
@@ -68,8 +67,9 @@ function DashboardsAndAlertsPopover({
 					<Typography.Link
 						key={alert.alertId}
 						onClick={(): void => {
-							openInNewTab(
+							window.open(
 								`${ROUTES.ALERT_OVERVIEW}?${QueryParams.ruleId}=${alert.alertId}`,
+								'_blank',
 							);
 						}}
 						className="dashboards-popover-content-item"
@@ -90,8 +90,11 @@ function DashboardsAndAlertsPopover({
 					<Typography.Link
 						key={dashboard.dashboardId}
 						onClick={(): void => {
-							openInNewTab(
-								generatePath(ROUTES.DASHBOARD, { dashboardId: dashboard.dashboardId }),
+							window.open(
+								generatePath(ROUTES.DASHBOARD, {
+									dashboardId: dashboard.dashboardId,
+								}),
+								'_blank',
 							);
 						}}
 						className="dashboards-popover-content-item"

frontend/src/container/MySettings/UserInfo/index.tsx

@@ -2,8 +2,10 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Input, Modal, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
-import { useUpdateMyUserV2 } from 'api/generated/services/users';
-import changeMyPassword from 'api/v1/factor_password/changeMyPassword';
+import {
+	updateMyPassword,
+	useUpdateMyUserV2,
+} from 'api/generated/services/users';
 import { useNotifications } from 'hooks/useNotifications';
 import { Check, FileTerminal, MailIcon, UserIcon } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
@@ -53,10 +55,9 @@ function UserInfo(): JSX.Element {
 		try {
 			setIsLoading(true);
 
-			await changeMyPassword({
+			await updateMyPassword({
 				newPassword: updatePassword,
 				oldPassword: currentPassword,
-				userId: user.id,
 			});
 			notifications.success({
 				message: t('success', {

frontend/src/container/NoLogs/NoLogs.tsx

@@ -6,7 +6,6 @@ import history from 'lib/history';
 import { ArrowUpRight } from 'lucide-react';
 import { DataSource } from 'types/common/queryBuilder';
 import DOCLINKS from 'utils/docLinks';
-import { openExternalLink } from 'utils/navigation';
 
 import eyesEmojiUrl from '@/assets/Images/eyesEmoji.svg';
 
@@ -43,11 +42,11 @@ export default function NoLogs({
 			}
 			history.push(link);
 		} else if (dataSource === 'traces') {
-			openExternalLink(DOCLINKS.TRACES_EXPLORER_EMPTY_STATE);
+			window.open(DOCLINKS.TRACES_EXPLORER_EMPTY_STATE, '_blank');
 		} else if (dataSource === DataSource.METRICS) {
-			openExternalLink(DOCLINKS.METRICS_EXPLORER_EMPTY_STATE);
+			window.open(DOCLINKS.METRICS_EXPLORER_EMPTY_STATE, '_blank');
 		} else {
-			openExternalLink(`${DOCLINKS.USER_GUIDE}${dataSource}/`);
+			window.open(`${DOCLINKS.USER_GUIDE}${dataSource}/`, '_blank');
 		}
 	};
 	return (

frontend/src/container/OnboardingQuestionaire/OnboardingFooter/OnboardingFooter.tsx

@@ -1,4 +1,3 @@
-// hippa.svg and soc2.svg do not exist in src/assets — suppressed until assets are added
 import { Dot } from 'lucide-react';
 
 import './OnboardingFooter.styles.scss';
@@ -13,6 +12,7 @@ export function OnboardingFooter(): JSX.Element {
 					className="footer-content"
 					rel="noreferrer"
 				>
+					{/* hippa.svg does not exist in src/assets — suppressed until asset is added */}
 					{/* eslint-disable-next-line rulesdir/no-unsupported-asset-pattern */}
 					<img src="/logos/hippa.svg" alt="HIPPA" className="footer-logo" />
 					<span className="footer-text">HIPPA</span>
@@ -24,6 +24,7 @@ export function OnboardingFooter(): JSX.Element {
 					className="footer-content"
 					rel="noreferrer"
 				>
+					{/* soc2.svg does not exist in src/assets — suppressed until asset is added */}
 					{/* eslint-disable-next-line rulesdir/no-unsupported-asset-pattern */}
 					<img src="/logos/soc2.svg" alt="SOC2" className="footer-logo" />
 					<span className="footer-text">SOC2</span>

frontend/src/container/QueryTable/Drilldown/useBaseAggregateOptions.tsx

@@ -115,7 +115,6 @@ const useBaseAggregateOptions = ({
 					key={id}
 					icon={<LinkOutlined />}
 					onClick={(): void => {
-						// eslint-disable-next-line no-restricted-syntax -- context links can be internal or external URLs provided by users
 						window.open(url, '_blank');
 						onClose?.();
 					}}

frontend/src/container/RoutingPolicies/RoutingPolicyDetails.tsx

@@ -14,7 +14,6 @@ import { ModalTitle } from 'container/PipelinePage/PipelineListsView/styles';
 import { Check, Loader, X } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { USER_ROLES } from 'types/roles';
-import { openInNewTab } from 'utils/navigation';
 
 import { INITIAL_ROUTING_POLICY_DETAILS_FORM_STATE } from './constants';
 import {
@@ -77,7 +76,7 @@ function RoutingPolicyDetails({
 							style={{ padding: '0 4px' }}
 							type="link"
 							onClick={(): void => {
-								openInNewTab(ROUTES.CHANNELS_NEW);
+								window.open(ROUTES.CHANNELS_NEW, '_blank');
 							}}
 						>
 							here.

frontend/src/container/SideNav/SideNav.tsx

@@ -64,7 +64,7 @@ import { USER_ROLES } from 'types/roles';
 import { checkVersionState } from 'utils/app';
 import { isModifierKeyPressed } from 'utils/app';
 import { showErrorNotification } from 'utils/error';
-import { openExternalLink, openInNewTab } from 'utils/navigation';
+import { openInNewTab } from 'utils/navigation';
 
 import signozBrandLogoUrl from '@/assets/Logos/signoz-brand-logo.svg';
 
@@ -818,7 +818,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 		);
 
 		if (item && !('type' in item) && item.isExternal && item.url) {
-			openExternalLink(item.url);
+			window.open(item.url, '_blank');
 		}
 
 		const event = (info as SidebarItem & { domEvent?: MouseEvent }).domEvent;

frontend/src/container/SideNav/config.ts

@@ -46,6 +46,7 @@ export const routeConfig: Record<string, QueryParams[]> = {
 	[ROUTES.TRACES_EXPLORER]: [QueryParams.resourceAttributes],
 	[ROUTES.TRACE]: [QueryParams.resourceAttributes],
 	[ROUTES.TRACE_DETAIL]: [QueryParams.resourceAttributes],
+	[ROUTES.TRACE_DETAIL_OLD]: [QueryParams.resourceAttributes],
 	[ROUTES.UN_AUTHORIZED]: [QueryParams.resourceAttributes],
 	[ROUTES.USAGE_EXPLORER]: [QueryParams.resourceAttributes],
 	[ROUTES.VERSION]: [QueryParams.resourceAttributes],

frontend/src/container/SpanDetailsDrawer/SpanLogs/SpanLogs.tsx

@@ -28,7 +28,6 @@ import {
 } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
-import { openInNewTab } from 'utils/navigation';
 import { v4 as uuid } from 'uuid';
 
 import noDataUrl from '@/assets/Icons/no-data.svg';
@@ -144,7 +143,7 @@ function SpanLogs({
 
 			const url = `${ROUTES.LOGS_EXPLORER}?${createQueryParams(queryParams)}`;
 
-			openInNewTab(url);
+			window.open(url, '_blank');
 		},
 		[
 			isLogSpanRelated,

frontend/src/container/SpanDetailsDrawer/SpanLogs/spanLogs.styles.scss

@@ -23,7 +23,6 @@
 
 	&-empty-content {
 		height: 100%;
-		border: 1px solid var(--bg-slate-500);
 		border-top: none;
 		display: flex;
 		flex-direction: column;

frontend/src/container/SpanDetailsDrawer/SpanRelatedSignals/SpanRelatedSignals.tsx

@@ -17,7 +17,6 @@ import { BarChart2, Compass, X } from 'lucide-react';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Span } from 'types/api/trace/getTraceV2';
 import { DataSource, LogsAggregatorOperator } from 'types/common/queryBuilder';
-import { openInNewTab } from 'utils/navigation';
 
 import { RelatedSignalsViews } from '../constants';
 import SpanLogs from '../SpanLogs/SpanLogs';
@@ -158,7 +157,13 @@ function SpanRelatedSignals({
 		searchParams.set(QueryParams.startTime, startTimeMs.toString());
 		searchParams.set(QueryParams.endTime, endTimeMs.toString());
 
-		openInNewTab(`${ROUTES.LOGS_EXPLORER}?${searchParams.toString()}`);
+		window.open(
+			`${window.location.origin}${
+				ROUTES.LOGS_EXPLORER
+			}?${searchParams.toString()}`,
+			'_blank',
+			'noopener,noreferrer',
+		);
 	}, [selectedSpan.traceId, traceStartTime, traceEndTime]);
 
 	const emptyStateConfig = useMemo(

frontend/src/container/TopNav/DateTimeSelectionV2/constants.ts

@@ -143,6 +143,7 @@ export const routesToSkip = [
 	ROUTES.SETTINGS,
 	ROUTES.LIST_ALL_ALERT,
 	ROUTES.TRACE_DETAIL,
+	ROUTES.TRACE_DETAIL_OLD,
 	ROUTES.ALL_CHANNELS,
 	ROUTES.USAGE_EXPLORER,
 	ROUTES.GET_STARTED,

frontend/src/container/Trace/TraceTable/index.tsx

@@ -31,7 +31,6 @@ import {
 	UPDATE_SPANS_AGGREGATE_PAGE_SIZE,
 } from 'types/actions/trace';
 import { TraceReducer } from 'types/reducer/trace';
-import { openInNewTab } from 'utils/navigation';
 import { v4 } from 'uuid';
 
 dayjs.extend(duration);
@@ -215,7 +214,7 @@ function TraceTable(): JSX.Element {
 					event.preventDefault();
 					event.stopPropagation();
 					if (event.metaKey || event.ctrlKey) {
-						openInNewTab(getLink(record));
+						window.open(getLink(record), '_blank');
 					} else {
 						history.push(getLink(record));
 					}

frontend/src/container/TraceWaterfall/TraceWaterfallStates/Success/Success.tsx

@@ -31,7 +31,6 @@ import {
 } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { Span } from 'types/api/trace/getTraceV2';
-import { openExternalLink } from 'utils/navigation';
 import { toFixed } from 'utils/toFixed';
 
 import funnelAddUrl from '@/assets/Icons/funnel-add.svg';
@@ -548,11 +547,12 @@ function Success(props: ISuccessProps): JSX.Element {
 						icon={<ArrowUpRight size={14} />}
 						className="right-info"
 						type="text"
-						onClick={(): void => {
-							openExternalLink(
+						onClick={(): WindowProxy | null =>
+							window.open(
 								'https://signoz.io/docs/userguide/traces/#missing-spans',
-							);
-						}}
+								'_blank',
+							)
+						}
 					>
 						Learn More
 					</Button>