refactor(web-settings): move more settings to runtime & disabled by default (#11917 )

Co-authored-by: Vikrant Gupta <vikrant@signoz.io>
chore(authz): move components/hooks to lib (#11932 )
2026-07-03 13:20:34 +01:00 · 2026-07-03 11:56:15 +00:00 · 2026-07-03 11:52:56 +00:00 · 2026-07-03 11:37:35 +00:00 · 2026-07-03 10:20:41 +00:00 · 2026-07-03 08:10:37 +00:00
187 changed files with 4269 additions and 1317 deletions
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -109,10 +109,7 @@ go.mod @therealpandey
 /pkg/modules/role/ @therealpandey
 /pkg/types/coretypes/ @therealpandey @vikrantgupta25

-/frontend/src/hooks/useAuthZ/ @H4ad
-/frontend/src/components/GuardAuthZ/ @H4ad
-/frontend/src/components/AuthZTooltip/ @H4ad
-/frontend/src/components/createGuardedRoute/ @H4ad
+/frontend/src/lib/authz/ @H4ad
 /frontend/src/container/RolesSettings/ @H4ad
 /frontend/src/components/RolesSelect/ @H4ad
 /frontend/src/pages/MembersSettings/ @H4ad
--- a/.github/workflows/build-enterprise.yaml
+++ b/.github/workflows/build-enterprise.yaml
@@ -61,13 +61,6 @@ jobs:
          echo 'VITE_SENTRY_AUTH_TOKEN="${{ secrets.SENTRY_AUTH_TOKEN }}"' >> frontend/.env
          echo 'VITE_SENTRY_ORG="${{ secrets.SENTRY_ORG }}"' >> frontend/.env
          echo 'VITE_SENTRY_PROJECT_ID="${{ secrets.SENTRY_PROJECT_ID }}"' >> frontend/.env
-          echo 'VITE_SENTRY_DSN="${{ secrets.SENTRY_DSN }}"' >> frontend/.env
-          echo 'VITE_TUNNEL_URL="${{ secrets.TUNNEL_URL }}"' >> frontend/.env
-          echo 'VITE_TUNNEL_DOMAIN="${{ secrets.TUNNEL_DOMAIN }}"' >> frontend/.env
-          echo 'VITE_POSTHOG_KEY="${{ secrets.POSTHOG_KEY }}"' >> frontend/.env
-          echo 'VITE_PYLON_APP_ID="${{ secrets.PYLON_APP_ID }}"' >> frontend/.env
-          echo 'VITE_APPCUES_APP_ID="${{ secrets.APPCUES_APP_ID }}"' >> frontend/.env
-          echo 'VITE_PYLON_IDENTITY_SECRET="${{ secrets.PYLON_IDENTITY_SECRET }}"' >> frontend/.env
          echo 'VITE_DOCS_BASE_URL="https://signoz.io"' >> frontend/.env
          echo 'VITE_ENVIRONMENT="production"' >> frontend/.env
          echo 'VITE_VERSION="${{ steps.build-info.outputs.version }}"' >> frontend/.env
--- a/.github/workflows/build-staging.yaml
+++ b/.github/workflows/build-staging.yaml
@@ -67,12 +67,6 @@ jobs:
          echo 'VITE_SENTRY_AUTH_TOKEN="${{ secrets.SENTRY_AUTH_TOKEN }}"' >> frontend/.env
          echo 'VITE_SENTRY_ORG="${{ secrets.SENTRY_ORG }}"' >> frontend/.env
          echo 'VITE_SENTRY_PROJECT_ID="${{ secrets.SENTRY_PROJECT_ID }}"' >> frontend/.env
-          echo 'VITE_SENTRY_DSN="${{ secrets.SENTRY_DSN }}"' >> frontend/.env
-          echo 'VITE_TUNNEL_URL="${{ secrets.NP_TUNNEL_URL }}"' >> frontend/.env
-          echo 'VITE_TUNNEL_DOMAIN="${{ secrets.NP_TUNNEL_DOMAIN }}"' >> frontend/.env
-          echo 'VITE_PYLON_APP_ID="${{ secrets.NP_PYLON_APP_ID }}"' >> frontend/.env
-          echo 'VITE_APPCUES_APP_ID="${{ secrets.NP_APPCUES_APP_ID }}"' >> frontend/.env
-          echo 'VITE_PYLON_IDENTITY_SECRET="${{ secrets.NP_PYLON_IDENTITY_SECRET }}"' >> frontend/.env
          echo 'VITE_DOCS_BASE_URL="https://staging.signoz.io"' >> frontend/.env
          echo 'VITE_ENVIRONMENT="staging"' >> frontend/.env
          echo 'VITE_VERSION="${{ steps.build-info.outputs.version }}"' >> frontend/.env
--- a/.github/workflows/gor-signoz.yaml
+++ b/.github/workflows/gor-signoz.yaml
@@ -27,13 +27,6 @@ jobs:
          echo 'VITE_SENTRY_AUTH_TOKEN="${{ secrets.SENTRY_AUTH_TOKEN }}"' >> .env
          echo 'VITE_SENTRY_ORG="${{ secrets.SENTRY_ORG }}"' >> .env
          echo 'VITE_SENTRY_PROJECT_ID="${{ secrets.SENTRY_PROJECT_ID }}"' >> .env
-          echo 'VITE_SENTRY_DSN="${{ secrets.SENTRY_DSN }}"' >> .env
-          echo 'VITE_TUNNEL_URL="${{ secrets.TUNNEL_URL }}"' >> .env
-          echo 'VITE_TUNNEL_DOMAIN="${{ secrets.TUNNEL_DOMAIN }}"' >> .env
-          echo 'VITE_POSTHOG_KEY="${{ secrets.POSTHOG_KEY }}"' >> .env
-          echo 'VITE_PYLON_APP_ID="${{ secrets.PYLON_APP_ID }}"' >> .env
-          echo 'VITE_APPCUES_APP_ID="${{ secrets.APPCUES_APP_ID }}"' >> .env
-          echo 'VITE_PYLON_IDENTITY_SECRET="${{ secrets.PYLON_IDENTITY_SECRET }}"' >> .env
          echo 'VITE_DOCS_BASE_URL="https://signoz.io"' >> .env
          echo 'VITE_ENVIRONMENT="production"' >> .env
          echo 'VITE_VERSION="${{ github.ref_name }}"' >> .env
--- a/cmd/authz.go
+++ b/cmd/authz.go
@@ -12,7 +12,7 @@ import (
 	"github.com/spf13/cobra"
 )

-const permissionsTypePath = "frontend/src/hooks/useAuthZ/permissions.type.ts"
+const permissionsTypePath = "frontend/src/lib/authz/hooks/useAuthZ/permissions.type.ts"

 var permissionsTypeTemplate = template.Must(template.New("permissions").Parse(
 	`// AUTO GENERATED FILE - DO NOT EDIT - GENERATED BY cmd/enterprise/*.go generate authz
--- a/docs/api/openapi.yml
+++ b/docs/api/openapi.yml
@@ -3071,6 +3071,10 @@ components:
          items:
            $ref: '#/components/schemas/DashboardtypesListedDashboardForUserV2'
          type: array
+        reservedKeywords:
+          items:
+            type: string
+          type: array
        tags:
          items:
            $ref: '#/components/schemas/TagtypesGettableTag'
@@ -3082,6 +3086,7 @@ components:
      - dashboards
      - total
      - tags
+      - reservedKeywords
      type: object
    DashboardtypesListableDashboardV2:
      properties:
@@ -3089,6 +3094,10 @@ components:
          items:
            $ref: '#/components/schemas/DashboardtypesListedDashboardV2'
          type: array
+        reservedKeywords:
+          items:
+            type: string
+          type: array
        tags:
          items:
            $ref: '#/components/schemas/TagtypesGettableTag'
@@ -3100,6 +3109,7 @@ components:
      - dashboards
      - total
      - tags
+      - reservedKeywords
      type: object
    DashboardtypesListableDashboardView:
      properties:
@@ -3571,7 +3581,7 @@ components:
      - user
      - system
      - integration
-      type: object
+      type: string
    DashboardtypesSpanGaps:
      properties:
        fillLessThan:
--- a/frontend/.oxlintrc.json
+++ b/frontend/.oxlintrc.json
@@ -328,6 +328,11 @@
          {
            "name": "immer",
            "message": "[State mgmt] Direct immer usage is deprecated. Use Zustand (which integrates immer via the immer middleware) instead."
+          },
+          {
+            "name": "api/generated/services/dashboard",
+            "importNames": ["patchDashboardV2", "usePatchDashboardV2"],
+            "message": "[dashboard-v2] Don't call patchDashboardV2/usePatchDashboardV2 directly — use useOptimisticPatch().patchAsync so spec edits update the react-query cache optimistically and reconcile on settle."
          }
        ]
      }
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -1,105 +1,116 @@
-# Configuring Over Local
-1. Docker
-1. Without Docker
+<p align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="../docs/readme-assets/signoz-hero-dark.png" width="700">
+    <source media="(prefers-color-scheme: light)" srcset="../docs/readme-assets/signoz-hero-light.png" width="700">
+    <img alt="SigNoz - Observability on Your Terms" src="../docs/readme-assets/signoz-hero-light.png" width="700">
+  </picture>
+</p>

-## With Docker
+<p align="center">
+  <a href="https://github.com/SigNoz/signoz/issues"><img alt="GitHub issues" src="https://img.shields.io/github/issues/SigNoz/signoz"></a>
+  <a href="https://signoz.io/slack"><img alt="Slack community" src="https://img.shields.io/badge/slack-community-4A154B?logo=slack&logoColor=white"></a>
+</p>

-**Building image**
+# SigNoz Frontend

-``docker compose up`
-/ This will also run
+React-based web interface for [SigNoz](https://signoz.io), the open-source observability platform.

-or
-`docker build . -t tagname`
+## Tech Stack

-**Tag to remote url- Introduce versioning later on**
+- **Framework:** React 18 + TypeScript
+- **Build:** Vite
+- **State:** React Query, Zustand, Redux Toolkit (legacy)
+- **Styling:** CSS Modules, Ant Design (legacy)
+- **Charts:** uPlot
+- **Testing:** Jest

-```
-docker tag signoz/frontend:latest 7296823551/signoz:latest
+## Local Development Setup
+
+1. Run SigNoz backend locally — see [Self-Host Docs](https://signoz.io/docs/install/self-host/)
+
+2. Configure environment:
+   ```bash
+   cp example.env .env
+   ```
+   
+   Key variables in `.env`:
+   ```bash
+   # Backend API endpoint (required)
+   VITE_FRONTEND_API_ENDPOINT="http://localhost:8080"
+   
+   # Enable bundle analyzer (optional)
+   BUNDLE_ANALYSER="true"
+   ```
+
+3. Install and run:
+   ```bash
+   pnpm install
+   pnpm dev
+   ```
+
+## Development
+
+```bash
+pnpm dev
 ```

-```
-docker compose up
+Opens [http://localhost:3301](http://localhost:3301).
+
+## Build
+
+```bash
+pnpm build
 ```

-## Without Docker
-Follow the steps below
+Output in `build/` folder.

-1. ```git clone https://github.com/SigNoz/signoz.git && cd signoz/frontend```
-1. change baseURL to ```<test environment URL>``` in file ```src/constants/env.ts```
+## Bundle Size Analysis

-1. ```pnpm install```
-1. ```pnpm dev```
+Set in `.env`:
+```bash
+BUNDLE_ANALYSER="true"
+```

-```Note: Please ping us in #contributing channel in our slack community and we will DM you with <test environment URL>```
+Then run build:
+```bash
+pnpm build
+```

-# Getting Started with Create React App
+Opens bundle analyzer visualization automatically.

-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+## Testing

-## Available Scripts
+```bash
+# Unit tests
+pnpm test

-In the project directory, you can run:
+# Type checking
+pnpm tsgo --noEmit
+```

-### `pnpm start`
+## Linting

-Runs the app in the development mode.\
-Open [http://localhost:3301](http://localhost:3301) to view it in the browser.
+```bash
+# Run all linters (oxlint + stylelint)
+pnpm lint
+```

-The page will reload if you make edits.\
-You will also see any lint errors in the console.
+## Project Structure

-### `pnpm test`
+```
+src/
+├── api/          # API clients and react-query hooks
+├── components/   # Shared UI components
+├── container/    # Page-level containers
+├── hooks/        # Custom React hooks
+├── pages/        # Route pages
+├── providers/    # React context providers
+├── store/        # Redux store
+└── types/        # TypeScript definitions
+```

-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+## Contributing

-### `pnpm build`
+See [CONTRIBUTING.md](../CONTRIBUTING.md) in the root repo.

-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `pnpm eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
-
-### Analyzing the Bundle Size
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
-
-### Making a Progressive Web App
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
-
-### Deployment
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `pnpm build` fails to minify
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+Questions? Join our [Slack community](https://signoz.io/slack).
--- a/frontend/example.env
+++ b/frontend/example.env
@@ -1,8 +1,38 @@
 NODE_ENV="development"
 BUNDLE_ANALYSER="true"
-VITE_FRONTEND_API_ENDPOINT="http://localhost:8080"
-VITE_PYLON_APP_ID="pylon-app-id"
-VITE_APPCUES_APP_ID="appcess-app-id"
-VITE_PYLON_IDENTITY_SECRET="pylon-identity-secret"
-
 CI="1"
+
+# API
+VITE_BASE_PATH=""
+VITE_FRONTEND_API_ENDPOINT="http://localhost:8080"
+VITE_WEBSOCKET_API_ENDPOINT=""
+
+# Pylon
+VITE_PYLON_ENABLED="false"
+VITE_PYLON_APP_ID=""
+VITE_PYLON_IDENTITY_SECRET=""
+
+# Appcues
+VITE_APPCUES_ENABLED="false"
+VITE_APPCUES_APP_ID=""
+
+# PostHog
+VITE_POSTHOG_ENABLED="false"
+VITE_POSTHOG_API_HOST=""
+VITE_POSTHOG_KEY=""
+VITE_POSTHOG_UI_HOST=""
+
+# Sentry
+VITE_SENTRY_ENABLED="false"
+VITE_SENTRY_AUTH_TOKEN=""
+VITE_SENTRY_ORG=""
+VITE_SENTRY_PROJECT_ID=""
+VITE_SENTRY_TUNNEL=""
+VITE_SENTRY_DSN=""
+
+# Docs
+VITE_DOCS_BASE_URL="https://signoz.io"
+
+# Build info
+VITE_ENVIRONMENT="development"
+VITE_VERSION=""
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -111,11 +111,10 @@
 		<div id="root"></div>

 		<script>
-			var PYLON_APP_ID = '<%- PYLON_APP_ID %>';
 			var pylonSettings =
 				((window.signozBootData || {}).settings || {}).pylon || {};
-			var pylonEnabled = pylonSettings.enabled !== false;
-			if (PYLON_APP_ID && pylonEnabled) {
+			var pylonEnabled = pylonSettings.enabled === true;
+			if (pylonSettings.appId && pylonEnabled) {
 				(function () {
 					var e = window;
 					var t = document;
@@ -133,7 +132,7 @@
 						e.setAttribute('async', 'true');
 						e.setAttribute(
 							'src',
-							'https://widget.usepylon.com/widget/' + PYLON_APP_ID,
+							'https://widget.usepylon.com/widget/' + pylonSettings.appId,
 						);
 						var n = t.getElementsByTagName('script')[0];
 						n.parentNode.insertBefore(e, n);
@@ -150,15 +149,14 @@
 			window.AppcuesSettings = { enableURLDetection: true };
 		</script>
 		<script>
-			var APPCUES_APP_ID = '<%- APPCUES_APP_ID %>';
 			var appcuesSettings =
 				((window.signozBootData || {}).settings || {}).appcues || {};
-			var appcuesEnabled = appcuesSettings.enabled !== false;
-			if (APPCUES_APP_ID && appcuesEnabled) {
+			var appcuesEnabled = appcuesSettings.enabled === true;
+			if (appcuesSettings.appId && appcuesEnabled) {
 				(function (d, t) {
 					var a = d.createElement(t);
 					a.async = 1;
-					a.src = '//fast.appcues.com/' + APPCUES_APP_ID + '.js';
+					a.src = '//fast.appcues.com/' + appcuesSettings.appId + '.js';
 					var s = d.getElementsByTagName(t)[0];
 					s.parentNode.insertBefore(a, s);
 				})(document, 'script');
--- a/frontend/knip.json
+++ b/frontend/knip.json
@@ -3,7 +3,6 @@
  "project": ["src/**/*.ts", "src/**/*.tsx"],
  "ignore": ["src/api/generated/**/*.ts", "src/typings/*.ts"],
  "ignoreDependencies": [
-    "http-proxy-middleware",
    "@typescript/native-preview"
  ]
 }
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -79,7 +79,6 @@
    "event-source-polyfill": "1.0.31",
    "eventemitter3": "5.0.1",
    "history": "4.10.1",
-    "http-proxy-middleware": "4.1.1",
    "http-status-codes": "2.3.0",
    "i18next": "^21.6.12",
    "i18next-browser-languagedetector": "^6.1.3",
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -164,9 +164,6 @@ importers:
      history:
        specifier: 4.10.1
        version: 4.10.1
-      http-proxy-middleware:
-        specifier: 4.1.1
-        version: 4.1.1
      http-status-codes:
        specifier: 2.3.0
        version: 2.3.0
@@ -5461,10 +5458,6 @@ packages:
    resolution: {integrity: sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==}
    engines: {node: '>= 6'}

-  http-proxy-middleware@4.1.1:
-    resolution: {integrity: sha512-KX5ZofGXLFXqFAkQoOWZ+rTtaLTut7m0gyL+QzJrdejtIZ+F4bPPDoe7reISg2+v0CAz5OfVwEJEhty7X+e57g==}
-    engines: {node: ^22.15.0 || ^24.0.0 || >=26.0.0}
-
  http-status-codes@2.3.0:
    resolution: {integrity: sha512-RJ8XvFvpPM/Dmc5SV+dC4y5PCeOhT3x1Hq0NU3rjGeg5a/CqlhZ7uudknPwZFz4aeAXDcbAyaeP7GAo9lvngtA==}

@@ -5472,9 +5465,6 @@ packages:
    resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
    engines: {node: '>= 6'}

-  httpxy@0.5.3:
-    resolution: {integrity: sha512-SMS9V6Sn7VWaS11lYhoAr0ceoaiolTWf4jYdJn0NJhCdKMu9R2H9Fh0LBDWBHQF6HRLI1PmaePYsjanSpE5PEw==}
-
  human-signals@2.1.0:
    resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
    engines: {node: '>=10.17.0'}
@@ -14515,16 +14505,6 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  http-proxy-middleware@4.1.1:
-    dependencies:
-      debug: 4.3.4(supports-color@5.5.0)
-      httpxy: 0.5.3
-      is-glob: 4.0.3
-      is-plain-obj: 4.1.0
-      micromatch: 4.0.8
-    transitivePeerDependencies:
-      - supports-color
-
  http-status-codes@2.3.0: {}

  https-proxy-agent@5.0.1:
@@ -14534,8 +14514,6 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  httpxy@0.5.3: {}
-
  human-signals@2.1.0: {}

  human-signals@8.0.1: {}
--- a/frontend/src/AppRoutes/index.tsx
+++ b/frontend/src/AppRoutes/index.tsx
@@ -292,10 +292,10 @@ function App(): JSX.Element {
 				isChatSupportEnabled &&
 				!showAddCreditCardModal &&
 				(isCloudUser || isEnterpriseSelfHostedUser) &&
-				(window.signozBootData?.settings?.pylon.enabled ?? true)
+				window.signozBootData?.settings?.pylon?.enabled
 			) {
 				const email = user.email || '';
-				const secret = process.env.PYLON_IDENTITY_SECRET || '';
+				const secret = window.signozBootData?.settings?.pylon?.identitySecret || '';
 				let emailHash = '';

 				if (email && secret) {
@@ -304,7 +304,7 @@ function App(): JSX.Element {

 				window.pylon = {
 					chat_settings: {
-						app_id: process.env.PYLON_APP_ID,
+						app_id: window.signozBootData?.settings?.pylon?.appId,
 						email: user.email,
 						name: user.displayName || user.email,
 						email_hash: emailHash,
@@ -335,22 +335,23 @@ function App(): JSX.Element {
 	useEffect(() => {
 		if (isCloudUser || isEnterpriseSelfHostedUser) {
 			if (
-				(window.signozBootData?.settings?.posthog.enabled ?? true) &&
-				process.env.POSTHOG_KEY
+				window.signozBootData?.settings?.posthog?.enabled &&
+				window.signozBootData?.settings?.posthog?.key
 			) {
-				posthog.init(process.env.POSTHOG_KEY, {
-					api_host: 'https://us.i.posthog.com',
+				posthog.init(window.signozBootData.settings.posthog.key, {
+					api_host: window.signozBootData.settings.posthog.apiHost,
+					ui_host: window.signozBootData.settings.posthog.uiHost,
 					person_profiles: 'identified_only', // or 'always' to create profiles for anonymous users as well
 				});
 			}

 			if (
 				!isSentryInitialized &&
-				(window.signozBootData?.settings?.sentry.enabled ?? true)
+				window.signozBootData?.settings?.sentry?.enabled
 			) {
 				Sentry.init({
-					dsn: process.env.SENTRY_DSN,
-					tunnel: process.env.TUNNEL_URL,
+					dsn: window.signozBootData.settings.sentry.dsn,
+					tunnel: window.signozBootData.settings.sentry.tunnel,
 					environment: process.env.ENVIRONMENT,
 					release: process.env.VERSION,
 					integrations: [
--- a/frontend/src/api/generated/services/sigNoz.schemas.ts
+++ b/frontend/src/api/generated/services/sigNoz.schemas.ts
@@ -5031,6 +5031,10 @@ export interface DashboardtypesListableDashboardForUserV2DTO {
 	 * @type array
 	 */
 	dashboards: DashboardtypesListedDashboardForUserV2DTO[];
+	/**
+	 * @type array
+	 */
+	reservedKeywords: string[];
 	/**
 	 * @type array
 	 */
@@ -5098,6 +5102,10 @@ export interface DashboardtypesListableDashboardV2DTO {
 	 * @type array
 	 */
 	dashboards: DashboardtypesListedDashboardV2DTO[];
+	/**
+	 * @type array
+	 */
+	reservedKeywords: string[];
 	/**
 	 * @type array
 	 */
--- a/frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx
+++ b/frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx
@@ -2,8 +2,8 @@ import { Controller, useForm } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
 import { X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
-import { SACreatePermission } from 'hooks/useAuthZ/permissions/service-account.permissions';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import { SACreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
 import { DialogFooter, DialogWrapper } from '@signozhq/ui/dialog';
 import { Input } from '@signozhq/ui/input';
 import { toast } from '@signozhq/ui/sonner';
--- a/frontend/src/components/CreateServiceAccountModal/tests/CreateServiceAccountModal.test.tsx
+++ b/frontend/src/components/CreateServiceAccountModal/tests/CreateServiceAccountModal.test.tsx
@@ -11,7 +11,7 @@ import {

 import CreateServiceAccountModal from '../CreateServiceAccountModal';

-jest.mock('components/AuthZTooltip/AuthZTooltip', () => ({
+jest.mock('lib/authz/components/AuthZTooltip/AuthZTooltip', () => ({
 	__esModule: true,
 	default: ({
 		children,
--- a/frontend/src/components/Graph/utils.ts
+++ b/frontend/src/components/Graph/utils.ts
@@ -1,14 +1,5 @@
 import { MutableRefObject } from 'react';
-import {
-	ActiveElement,
-	Chart,
-	ChartConfiguration,
-	ChartData,
-	ChartEvent,
-	ChartType,
-	Color,
-	TooltipItem,
-} from 'chart.js';
+import { Chart, ChartConfiguration, ChartData, Color } from 'chart.js';
 import * as chartjsAdapter from 'chartjs-adapter-date-fns';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
@@ -69,189 +60,184 @@ export const getGraphOptions = (
 	minTime?: number,
 	maxTime?: number,
 	// eslint-disable-next-line sonarjs/cognitive-complexity
-): CustomChartOptions =>
-	({
-		animation: {
-			duration: animate ? 200 : 0,
-		},
-		responsive: true,
-		maintainAspectRatio: false,
-		interaction: {
-			mode: 'index',
-			intersect: true,
-		},
-		plugins: {
-			...(staticLine
-				? {
-						annotation: {
-							annotations: [
-								{
-									type: 'line',
-									yMin: staticLine.yMin,
-									yMax: staticLine.yMax,
-									borderColor: staticLine.borderColor,
-									borderWidth: staticLine.borderWidth,
-									label: {
-										content: staticLine.lineText,
-										enabled: true,
-										font: {
-											size: 10,
-										},
-										borderWidth: 0,
-										position: 'start',
-										backgroundColor: 'transparent',
-										color: staticLine.textColor,
+): CustomChartOptions => ({
+	animation: {
+		duration: animate ? 200 : 0,
+	},
+	responsive: true,
+	maintainAspectRatio: false,
+	interaction: {
+		mode: 'index',
+		intersect: true,
+	},
+	plugins: {
+		...(staticLine
+			? {
+					annotation: {
+						annotations: [
+							{
+								type: 'line',
+								yMin: staticLine.yMin,
+								yMax: staticLine.yMax,
+								borderColor: staticLine.borderColor,
+								borderWidth: staticLine.borderWidth,
+								label: {
+									content: staticLine.lineText,
+									enabled: true,
+									font: {
+										size: 10,
 									},
+									borderWidth: 0,
+									position: 'start',
+									backgroundColor: 'transparent',
+									color: staticLine.textColor,
 								},
-							],
-						},
-					}
-				: {}),
-			title: {
-				display: title !== undefined,
-				text: title,
-			},
-			legend: {
-				display: false,
-			},
-			tooltip: {
-				callbacks: {
-					title(context: TooltipItem<'line'>[]): string | string[] {
-						const date = dayjs(context[0].parsed.x);
-						return date
-							.tz(timezone.value)
-							.format(DATE_TIME_FORMATS.MONTH_DATETIME_FULL_SECONDS);
+							},
+						],
 					},
-					label(context: TooltipItem<'line'>): string | string[] {
-						let label = context.dataset.label || '';
-
-						if (label) {
-							label += ': ';
-						}
-						if (context.parsed.y !== null) {
-							label += getToolTipValue(context.parsed.y.toString(), yAxisUnit);
-						}
-
-						return label;
-					},
-					labelTextColor(labelData: TooltipItem<'line'>): Color {
-						if (labelData.datasetIndex === nearestDatasetIndex.current) {
-							return 'rgba(255, 255, 255, 1)';
-						}
-
-						return 'rgba(255, 255, 255, 0.75)';
-					},
-				},
-				position: 'custom',
-				itemSort(item1: TooltipItem<'line'>, item2: TooltipItem<'line'>): number {
-					return item2.parsed.y - item1.parsed.y;
-				},
-			},
-			[dragSelectPluginId]: createDragSelectPluginOptions(
-				!!onDragSelect,
-				onDragSelect,
-				dragSelectColor,
-			),
-			[intersectionCursorPluginId]: createIntersectionCursorPluginOptions(
-				!!onDragSelect,
-				currentTheme === 'dark' ? 'white' : 'black',
-			),
-		},
-		layout: {
-			padding: 0,
-		},
-		scales: {
-			x: {
-				stacked: isStacked,
-				offset: false,
-				grid: {
-					display: true,
-					color: getGridColor(),
-					drawTicks: true,
-				},
-				adapters: {
-					date: chartjsAdapter,
-				},
-				time: {
-					unit: xAxisTimeUnit?.unitName || 'minute',
-					stepSize: xAxisTimeUnit?.stepSize || 1,
-					displayFormats: {
-						millisecond: DATE_TIME_FORMATS.TIME_SECONDS,
-						second: DATE_TIME_FORMATS.TIME_SECONDS,
-						minute: DATE_TIME_FORMATS.TIME,
-						hour: DATE_TIME_FORMATS.SLASH_SHORT,
-						day: DATE_TIME_FORMATS.DATE_SHORT,
-						week: DATE_TIME_FORMATS.DATE_SHORT,
-						month: DATE_TIME_FORMATS.YEAR_MONTH,
-						year: DATE_TIME_FORMATS.YEAR_SHORT,
-					},
-				},
-				type: 'time',
-				ticks: { color: getAxisLabelColor(currentTheme) },
-				...(minTime && {
-					min: dayjs(minTime).tz(timezone.value).format(),
-				}),
-				...(maxTime && {
-					max: dayjs(maxTime).tz(timezone.value).format(),
-				}),
-			},
-			y: {
-				stacked: isStacked,
-				display: true,
-				grid: {
-					display: true,
-					color: getGridColor(),
-				},
-				ticks: {
-					color: getAxisLabelColor(currentTheme),
-					// Include a dollar sign in the ticks
-					callback(value: number | string): string {
-						return getYAxisFormattedValue(value.toString(), yAxisUnit);
-					},
-				},
-			},
-		},
-		elements: {
-			line: {
-				tension: 0,
-				cubicInterpolationMode: 'monotone',
-			},
-			point: {
-				hoverBackgroundColor: (ctx: any): string => {
-					if (ctx?.element?.options?.borderColor) {
-						return ctx.element.options.borderColor;
-					}
-					return 'rgba(0,0,0,0.1)';
-				},
-				hoverRadius: 5,
-			},
-		},
-		onClick: (
-			event: ChartEvent,
-			element: ActiveElement[],
-			chart: Chart,
-		): void => {
-			if (onClickHandler) {
-				onClickHandler(event, element, chart, data);
-			}
-		},
-		onHover: (event: ChartEvent, _: ActiveElement[], chart: Chart): void => {
-			if (event.native) {
-				const interactions = chart.getElementsAtEventForMode(
-					event.native,
-					'nearest',
-					{
-						intersect: false,
-					},
-					true,
-				);
-
-				if (interactions[0]) {
-					nearestDatasetIndex.current = interactions[0].datasetIndex;
 				}
-			}
+			: {}),
+		title: {
+			display: title !== undefined,
+			text: title,
 		},
-	}) as CustomChartOptions;
+		legend: {
+			display: false,
+		},
+		tooltip: {
+			callbacks: {
+				title(context): string | string[] {
+					const date = dayjs(context[0].parsed.x);
+					return date
+						.tz(timezone.value)
+						.format(DATE_TIME_FORMATS.MONTH_DATETIME_FULL_SECONDS);
+				},
+				label(context): string | string[] {
+					let label = context.dataset.label || '';
+
+					if (label) {
+						label += ': ';
+					}
+					if (context.parsed.y !== null) {
+						label += getToolTipValue(context.parsed.y.toString(), yAxisUnit);
+					}
+
+					return label;
+				},
+				labelTextColor(labelData): Color {
+					if (labelData.datasetIndex === nearestDatasetIndex.current) {
+						return 'rgba(255, 255, 255, 1)';
+					}
+
+					return 'rgba(255, 255, 255, 0.75)';
+				},
+			},
+			position: 'custom',
+			itemSort(item1, item2): number {
+				return item2.parsed.y - item1.parsed.y;
+			},
+		},
+		[dragSelectPluginId]: createDragSelectPluginOptions(
+			!!onDragSelect,
+			onDragSelect,
+			dragSelectColor,
+		),
+		[intersectionCursorPluginId]: createIntersectionCursorPluginOptions(
+			!!onDragSelect,
+			currentTheme === 'dark' ? 'white' : 'black',
+		),
+	},
+	layout: {
+		padding: 0,
+	},
+	scales: {
+		x: {
+			stacked: isStacked,
+			offset: false,
+			grid: {
+				display: true,
+				color: getGridColor(),
+				drawTicks: true,
+			},
+			adapters: {
+				date: chartjsAdapter,
+			},
+			time: {
+				unit: xAxisTimeUnit?.unitName || 'minute',
+				stepSize: xAxisTimeUnit?.stepSize || 1,
+				displayFormats: {
+					millisecond: DATE_TIME_FORMATS.TIME_SECONDS,
+					second: DATE_TIME_FORMATS.TIME_SECONDS,
+					minute: DATE_TIME_FORMATS.TIME,
+					hour: DATE_TIME_FORMATS.SLASH_SHORT,
+					day: DATE_TIME_FORMATS.DATE_SHORT,
+					week: DATE_TIME_FORMATS.DATE_SHORT,
+					month: DATE_TIME_FORMATS.YEAR_MONTH,
+					year: DATE_TIME_FORMATS.YEAR_SHORT,
+				},
+			},
+			type: 'time',
+			ticks: { color: getAxisLabelColor(currentTheme) },
+			...(minTime && {
+				min: dayjs(minTime).tz(timezone.value).format(),
+			}),
+			...(maxTime && {
+				max: dayjs(maxTime).tz(timezone.value).format(),
+			}),
+		},
+		y: {
+			stacked: isStacked,
+			display: true,
+			grid: {
+				display: true,
+				color: getGridColor(),
+			},
+			ticks: {
+				color: getAxisLabelColor(currentTheme),
+				// Include a dollar sign in the ticks
+				callback(value): string {
+					return getYAxisFormattedValue(value.toString(), yAxisUnit);
+				},
+			},
+		},
+	},
+	elements: {
+		line: {
+			tension: 0,
+			cubicInterpolationMode: 'monotone',
+		},
+		point: {
+			hoverBackgroundColor: (ctx: any): string => {
+				if (ctx?.element?.options?.borderColor) {
+					return ctx.element.options.borderColor;
+				}
+				return 'rgba(0,0,0,0.1)';
+			},
+			hoverRadius: 5,
+		},
+	},
+	onClick: (event, element, chart): void => {
+		if (onClickHandler) {
+			onClickHandler(event, element, chart, data);
+		}
+	},
+	onHover: (event, _, chart): void => {
+		if (event.native) {
+			const interactions = chart.getElementsAtEventForMode(
+				event.native,
+				'nearest',
+				{
+					intersect: false,
+				},
+				true,
+			);
+
+			if (interactions[0]) {
+				nearestDatasetIndex.current = interactions[0].datasetIndex;
+			}
+		}
+	},
+});

 declare module 'chart.js' {
 	interface TooltipPositionerMap {
--- a/frontend/src/components/ServiceAccountDrawer/AddKeyModal/KeyFormPhase.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/AddKeyModal/KeyFormPhase.tsx
@@ -4,11 +4,11 @@ import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
 import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import { DatePicker } from 'antd';
-import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import {
 	APIKeyCreatePermission,
 	buildSAAttachPermission,
-} from 'hooks/useAuthZ/permissions/service-account.permissions';
+} from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
 import { popupContainer } from 'utils/selectPopupContainer';

 import { disabledDate } from '../utils';
--- a/frontend/src/components/ServiceAccountDrawer/DeleteAccountModal.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/DeleteAccountModal.tsx
@@ -1,8 +1,8 @@
 import { useQueryClient } from 'react-query';
 import { Trash2, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
-import { buildSADeletePermission } from 'hooks/useAuthZ/permissions/service-account.permissions';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import { buildSADeletePermission } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
 import { DialogWrapper } from '@signozhq/ui/dialog';
 import { toast } from '@signozhq/ui/sonner';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
--- a/frontend/src/components/ServiceAccountDrawer/EditKeyModal/EditKeyForm.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/EditKeyModal/EditKeyForm.tsx
@@ -7,12 +7,12 @@ import { Input } from '@signozhq/ui/input';
 import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import { DatePicker } from 'antd';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
-import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import {
 	buildAPIKeyDeletePermission,
 	buildAPIKeyUpdatePermission,
 	buildSADetachPermission,
-} from 'hooks/useAuthZ/permissions/service-account.permissions';
+} from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
 import { popupContainer } from 'utils/selectPopupContainer';

 import { disabledDate, formatLastObservedAt } from '../utils';
--- a/frontend/src/components/ServiceAccountDrawer/EditKeyModal/index.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/EditKeyModal/index.tsx
@@ -16,8 +16,8 @@ import type {
 import { AxiosError } from 'axios';
 import { SA_QUERY_PARAMS } from 'container/ServiceAccountsSettings/constants';
 import dayjs from 'dayjs';
-import { buildAPIKeyUpdatePermission } from 'hooks/useAuthZ/permissions/service-account.permissions';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
+import { buildAPIKeyUpdatePermission } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import { parseAsString, useQueryState } from 'nuqs';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import { useTimezone } from 'providers/Timezone';
--- a/frontend/src/components/ServiceAccountDrawer/KeysTab.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/KeysTab.tsx
@@ -4,13 +4,13 @@ import { Button } from '@signozhq/ui/button';
 import { Skeleton, Table, Tooltip } from 'antd';
 import type { ColumnsType } from 'antd/es/table/interface';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
-import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import {
 	APIKeyCreatePermission,
 	buildAPIKeyDeletePermission,
 	buildSAAttachPermission,
 	buildSADetachPermission,
-} from 'hooks/useAuthZ/permissions/service-account.permissions';
+} from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';
 import { parseAsBoolean, parseAsString, useQueryState } from 'nuqs';
--- a/frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx
@@ -5,11 +5,11 @@ import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
 import { useCopyToClipboard } from 'react-use';
 import type { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
-import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import RolesSelect from 'components/RolesSelect';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { ServiceAccountRow } from 'container/ServiceAccountsSettings/utils';
-import { buildSAUpdatePermission } from 'hooks/useAuthZ/permissions/service-account.permissions';
+import { buildSAUpdatePermission } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
 import { useTimezone } from 'providers/Timezone';
 import APIError from 'types/api/error';

--- a/frontend/src/components/ServiceAccountDrawer/RevokeKeyModal.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/RevokeKeyModal.tsx
@@ -1,11 +1,11 @@
 import { useQueryClient } from 'react-query';
 import { Trash2, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import {
 	buildAPIKeyDeletePermission,
 	buildSADetachPermission,
-} from 'hooks/useAuthZ/permissions/service-account.permissions';
+} from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
 import { DialogWrapper } from '@signozhq/ui/dialog';
 import { toast } from '@signozhq/ui/sonner';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
--- a/frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx
@@ -16,7 +16,7 @@ import {
 import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
-import PermissionDeniedCallout from 'components/PermissionDeniedCallout/PermissionDeniedCallout';
+import PermissionDeniedCallout from 'lib/authz/components/PermissionDeniedCallout/PermissionDeniedCallout';
 import { useRoles } from 'components/RolesSelect';
 import { SA_QUERY_PARAMS } from 'container/ServiceAccountsSettings/constants';
 import {
@@ -35,8 +35,8 @@ import {
 	buildSADeletePermission,
 	buildSAReadPermission,
 	buildSAUpdatePermission,
-} from 'hooks/useAuthZ/permissions/service-account.permissions';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
+} from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import {
 	parseAsBoolean,
 	parseAsInteger,
@@ -47,7 +47,7 @@ import {
 import APIError from 'types/api/error';
 import { toAPIError } from 'utils/errorUtils';

-import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import AddKeyModal from './AddKeyModal';
 import DeleteAccountModal from './DeleteAccountModal';
 import KeysTab from './KeysTab';
--- a/frontend/src/components/ServiceAccountDrawer/tests/EditKeyModal.test.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/tests/EditKeyModal.test.tsx
@@ -6,7 +6,7 @@ import { render, screen, userEvent, waitFor } from 'tests/test-utils';

 import EditKeyModal from '../EditKeyModal';

-jest.mock('components/AuthZTooltip/AuthZTooltip', () => ({
+jest.mock('lib/authz/components/AuthZTooltip/AuthZTooltip', () => ({
 	__esModule: true,
 	default: ({
 		children,
--- a/frontend/src/components/ServiceAccountDrawer/tests/KeysTab.test.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/tests/KeysTab.test.tsx
@@ -6,7 +6,7 @@ import { render, screen, userEvent, waitFor } from 'tests/test-utils';

 import KeysTab from '../KeysTab';

-jest.mock('components/AuthZTooltip/AuthZTooltip', () => ({
+jest.mock('lib/authz/components/AuthZTooltip/AuthZTooltip', () => ({
 	__esModule: true,
 	default: ({
 		children,
--- a/frontend/src/components/ServiceAccountDrawer/tests/ServiceAccountDrawer.authz.test.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/tests/ServiceAccountDrawer.authz.test.tsx
@@ -7,11 +7,11 @@ import {
 	setupAuthzAdmin,
 	setupAuthzDeny,
 	setupAuthzDenyAll,
-} from 'tests/authz-test-utils';
+} from 'lib/authz/utils/authz-test-utils';
 import {
 	APIKeyListPermission,
 	buildSADeletePermission,
-} from 'hooks/useAuthZ/permissions/service-account.permissions';
+} from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';

 import ServiceAccountDrawer from '../ServiceAccountDrawer';

--- a/frontend/src/components/ServiceAccountDrawer/tests/ServiceAccountDrawer.test.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/tests/ServiceAccountDrawer.test.tsx
@@ -3,7 +3,7 @@ import { listRolesSuccessResponse } from 'mocks-server/__mockdata__/roles';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-import { setupAuthzAdmin } from 'tests/authz-test-utils';
+import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';

 import ServiceAccountDrawer from '../ServiceAccountDrawer';

--- a/frontend/src/components/YAxisUnitSelector/YAxisUnitSelector.tsx
+++ b/frontend/src/components/YAxisUnitSelector/YAxisUnitSelector.tsx
@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { SolidAlertTriangle } from '@signozhq/icons';
 import { Select, Tooltip } from 'antd';
 import type { DefaultOptionType } from 'antd/es/select';
-import classNames from 'classnames';
+import cx from 'classnames';

 import { UniversalYAxisUnitMappings } from './constants';
 import { UniversalYAxisUnit, YAxisUnitSelectorProps } from './types';
@@ -72,9 +72,7 @@ function YAxisUnitSelector({
 	}, [categoriesOverride, source]);

 	return (
-		<div
-			className={classNames('y-axis-unit-selector-component', containerClassName)}
-		>
+		<div className={cx('y-axis-unit-selector-component', containerClassName)}>
 			<Select
 				showSearch
 				value={universalUnit}
@@ -84,12 +82,17 @@ function YAxisUnitSelector({
 				loading={loading}
 				suffixIcon={
 					incompatibleUnitMessage ? (
-						<Tooltip title={incompatibleUnitMessage}>
-							<SolidAlertTriangle role="img" aria-label="warning" size="md" />
+						<Tooltip
+							title={incompatibleUnitMessage}
+							overlayClassName="y-axis-unit-warning-tooltip"
+						>
+							<span className="y-axis-unit-warning" role="img" aria-label="warning">
+								<SolidAlertTriangle size="md" />
+							</span>
 						</Tooltip>
 					) : undefined
 				}
-				className={classNames({
+				className={cx({
 					'warning-state': incompatibleUnitMessage,
 				})}
 				data-testid={dataTestId}
--- a/frontend/src/components/YAxisUnitSelector/tests/YAxisUnitSelector.test.tsx
+++ b/frontend/src/components/YAxisUnitSelector/tests/YAxisUnitSelector.test.tsx
@@ -1,4 +1,5 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';

 import { YAxisCategoryNames } from '../constants';
 import { UniversalYAxisUnit, YAxisSource } from '../types';
@@ -6,9 +7,13 @@ import YAxisUnitSelector from '../YAxisUnitSelector';

 describe('YAxisUnitSelector', () => {
 	const mockOnChange = jest.fn();
+	// antd injects its `pointer-events` styles via cssinjs in jsdom, but the SCSS
+	// overrides aren't loaded — skip the pointer-events check so hovers/clicks register.
+	let user: ReturnType<typeof userEvent.setup>;

 	beforeEach(() => {
 		mockOnChange.mockClear();
+		user = userEvent.setup({ pointerEventsCheck: 0 });
 	});

 	it('renders with default placeholder', () => {
@@ -34,7 +39,7 @@ describe('YAxisUnitSelector', () => {
 		expect(screen.queryByText('Custom placeholder')).toBeInTheDocument();
 	});

-	it('calls onChange when a value is selected', () => {
+	it('calls onChange when a value is selected', async () => {
 		render(
 			<YAxisUnitSelector
 				value=""
@@ -44,9 +49,8 @@ describe('YAxisUnitSelector', () => {
 		);
 		const select = screen.getByRole('combobox');

-		fireEvent.mouseDown(select);
-		const option = screen.getByText('Bytes (B)');
-		fireEvent.click(option);
+		await user.click(select);
+		await user.click(screen.getByText('Bytes (B)'));

 		expect(mockOnChange).toHaveBeenCalledWith('By', {
 			children: 'Bytes (B)',
@@ -55,7 +59,7 @@ describe('YAxisUnitSelector', () => {
 		});
 	});

-	it('filters options based on search input', () => {
+	it('filters options based on search input', async () => {
 		render(
 			<YAxisUnitSelector
 				value=""
@@ -65,14 +69,13 @@ describe('YAxisUnitSelector', () => {
 		);
 		const select = screen.getByRole('combobox');

-		fireEvent.mouseDown(select);
-		const input = screen.getByRole('combobox');
-		fireEvent.change(input, { target: { value: 'bytes/sec' } });
+		await user.click(select);
+		await user.type(select, 'bytes/sec');

 		expect(screen.getByText('Bytes/sec')).toBeInTheDocument();
 	});

-	it('shows all categories and their units', () => {
+	it('shows all categories and their units', async () => {
 		render(
 			<YAxisUnitSelector
 				value=""
@@ -80,9 +83,8 @@ describe('YAxisUnitSelector', () => {
 				source={YAxisSource.ALERTS}
 			/>,
 		);
-		const select = screen.getByRole('combobox');

-		fireEvent.mouseDown(select);
+		await user.click(screen.getByRole('combobox'));

 		// Check for category headers
 		expect(screen.getByText('Data')).toBeInTheDocument();
@@ -93,7 +95,7 @@ describe('YAxisUnitSelector', () => {
 		expect(screen.getByText('Seconds (s)')).toBeInTheDocument();
 	});

-	it('shows warning message when incompatible unit is selected', () => {
+	it('shows warning message when incompatible unit is selected', async () => {
 		render(
 			<YAxisUnitSelector
 				source={YAxisSource.ALERTS}
@@ -104,12 +106,12 @@ describe('YAxisUnitSelector', () => {
 		);
 		const warningIcon = screen.getByLabelText('warning');
 		expect(warningIcon).toBeInTheDocument();
-		fireEvent.mouseOver(warningIcon);
-		return screen
-			.findByText(
+		await user.hover(warningIcon);
+		await expect(
+			screen.findByText(
 				'Unit mismatch. The metric was sent with unit Seconds (s), but Bytes (B) is selected.',
-			)
-			.then((el) => expect(el).toBeInTheDocument());
+			),
+		).resolves.toBeInTheDocument();
 	});

 	it('does not show warning message when compatible unit is selected', () => {
@@ -125,7 +127,7 @@ describe('YAxisUnitSelector', () => {
 		expect(warningIcon).not.toBeInTheDocument();
 	});

-	it('uses categories override to render custom units', () => {
+	it('uses categories override to render custom units', async () => {
 		const customCategories = [
 			{
 				name: YAxisCategoryNames.Data,
@@ -147,9 +149,7 @@ describe('YAxisUnitSelector', () => {
 			/>,
 		);

-		const select = screen.getByRole('combobox');
-
-		fireEvent.mouseDown(select);
+		await user.click(screen.getByRole('combobox'));

 		expect(screen.getByText('Custom Bytes (B)')).toBeInTheDocument();
 		expect(screen.queryByText('Bytes (B)')).not.toBeInTheDocument();
--- a/frontend/src/components/YAxisUnitSelector/styles.scss
+++ b/frontend/src/components/YAxisUnitSelector/styles.scss
@@ -4,6 +4,13 @@
 	}
 }

+// Re-enable hover on the warning icon: its `.ant-select-arrow` parent sets
+// `pointer-events: none`, which would otherwise suppress the tooltip.
+.y-axis-unit-warning {
+	display: inline-flex;
+	pointer-events: auto;
+}
+
 .warning-state {
 	.ant-select-selector {
 		border-color: var(--bg-amber-400) !important;
@@ -17,3 +24,7 @@
 		right: 28px;
 	}
 }
+
+.y-axis-unit-warning-tooltip {
+	max-width: 240px;
+}
--- a/frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityMetrics/EntityMetrics.tsx
+++ b/frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityMetrics/EntityMetrics.tsx
@@ -2,8 +2,9 @@ import { useCallback, useMemo, useRef } from 'react';
 import { UseQueryResult } from 'react-query';
 import { Skeleton } from 'antd';
 import cx from 'classnames';
-import Uplot from 'components/Uplot';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import TimeSeries from 'container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries';
+import { LegendPosition } from 'lib/uPlotV2/components/types';
 import { InfraMonitoringEntity } from 'container/InfraMonitoringK8s/constants';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import {
@@ -13,13 +14,13 @@ import {
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
+import { useMultiIntersectionObserver } from 'hooks/useMultiIntersectionObserver';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
-import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
+import { useTimezone } from 'providers/Timezone';
 import { SuccessResponse } from 'types/api';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import { AlignedData, Options } from 'uplot';

-import { useMultiIntersectionObserver } from 'hooks/useMultiIntersectionObserver';
+import { buildEntityMetricsChartConfig } from './configBuilder';

 import { useEntityMetrics } from './hooks';
 import { isKeyNotFoundError } from '../utils';
@@ -70,7 +71,7 @@ function EntityMetrics<T>({
 		{ threshold: 0.1 },
 	);

-	const { queries, chartData, queryPayloads } = useEntityMetrics({
+	const { queries, chartData, tableData, queryPayloads } = useEntityMetrics({
 		queryKey,
 		timeRange,
 		entity,
@@ -80,16 +81,10 @@ function EntityMetrics<T>({
 	});

 	const isDarkMode = useIsDarkMode();
+	const { timezone } = useTimezone();
 	const graphRef = useRef<HTMLDivElement>(null);
 	const dimensions = useResizeObserver(graphRef);
 	const { currentQuery } = useQueryBuilder();
-	const legendScrollPositionRef = useRef<{
-		scrollTop: number;
-		scrollLeft: number;
-	}>({
-		scrollTop: 0,
-		scrollLeft: 0,
-	});

 	const onDragSelect = useCallback(
 		(start: number, end: number): void => {
@@ -101,43 +96,39 @@ function EntityMetrics<T>({
 		[handleTimeChange],
 	);

-	const options = useMemo(
+	const configs = useMemo(
 		() =>
 			queries.map(({ data }, idx) => {
 				const panelType = queryPayloads[idx]?.graphType;
 				if (panelType === PANEL_TYPES.TABLE) {
 					return null;
 				}
-				return getUPlotChartOptions({
-					apiResponse: data?.payload,
+				const widgetTitle = entityWidgetInfo[idx].title
+					.toLowerCase()
+					.replace(/\s+/g, '-');
+				return buildEntityMetricsChartConfig({
+					id: `${category}-${widgetTitle}`,
 					isDarkMode,
-					dimensions,
+					currentQuery,
+					onDragSelect,
+					apiResponse: data?.payload,
+					timezone,
 					yAxisUnit: entityWidgetInfo[idx].yAxisUnit,
-					softMax: null,
-					softMin: null,
 					minTimeScale: timeRange.startTime,
 					maxTimeScale: timeRange.endTime,
-					onDragSelect,
-					query: currentQuery,
-					legendScrollPosition: legendScrollPositionRef.current,
-					setLegendScrollPosition: (position: {
-						scrollTop: number;
-						scrollLeft: number;
-					}): void => {
-						legendScrollPositionRef.current = position;
-					},
 				});
 			}),
 		[
 			queries,
 			queryPayloads,
+			category,
 			isDarkMode,
-			dimensions,
+			currentQuery,
+			onDragSelect,
+			timezone,
 			entityWidgetInfo,
 			timeRange.startTime,
 			timeRange.endTime,
-			onDragSelect,
-			currentQuery,
 		],
 	);

@@ -170,14 +161,22 @@ function EntityMetrics<T>({
 			>
 				{panelType === PANEL_TYPES.TABLE ? (
 					<MetricsTable
-						rows={chartData[idx]?.[0]?.rows ?? []}
-						columns={chartData[idx]?.[0]?.columns ?? []}
+						rows={tableData[idx]?.[0]?.rows ?? []}
+						columns={tableData[idx]?.[0]?.columns ?? []}
 					/>
 				) : (
-					<Uplot
-						options={options[idx] as Options}
-						data={chartData[idx] as AlignedData}
-					/>
+					configs[idx] &&
+					chartData[idx] && (
+						<TimeSeries
+							config={configs[idx]}
+							data={chartData[idx]}
+							legendConfig={{ position: LegendPosition.BOTTOM }}
+							width={dimensions.width}
+							height={dimensions.height}
+							timezone={timezone}
+							yAxisUnit={entityWidgetInfo[idx].yAxisUnit}
+						/>
+					)
 				)}
 			</div>
 		);
--- a/frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityMetrics/tests/EntityMetrics.test.tsx
+++ b/frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityMetrics/tests/EntityMetrics.test.tsx
@@ -3,6 +3,7 @@ import { InfraMonitoringEntity } from 'container/InfraMonitoringK8s/constants';
 import { Time } from 'container/TopNav/DateTimeSelectionV2/types';
 import * as appContextHooks from 'providers/App/App';
 import { LicenseEvent } from 'types/api/licensesV3/getActive';
+import uPlot from 'uplot';

 import EntityMetrics from '../EntityMetrics';
 import { useEntityMetrics } from '../hooks';
@@ -15,12 +16,15 @@ const mockUseEntityMetrics = useEntityMetrics as jest.MockedFunction<
 	typeof useEntityMetrics
 >;

-jest.mock('lib/uPlotLib/getUplotChartOptions', () => ({
-	getUPlotChartOptions: jest.fn().mockReturnValue({}),
+jest.mock('../configBuilder', () => ({
+	buildEntityMetricsChartConfig: jest.fn().mockReturnValue({
+		getId: jest.fn().mockReturnValue('mock-id'),
+	}),
 }));

-jest.mock('lib/uPlotLib/utils/getUplotChartData', () => ({
-	getUPlotChartData: jest.fn().mockReturnValue([]),
+jest.mock('lib/uPlotV2/utils/dataUtils', () => ({
+	prepareChartData: jest.fn().mockReturnValue([]),
+	hasSingleVisiblePoint: jest.fn().mockReturnValue(false),
 }));

 jest.mock('container/TopNav/DateTimeSelectionV2', () => ({
@@ -30,9 +34,20 @@ jest.mock('container/TopNav/DateTimeSelectionV2', () => ({
 	),
 }));

-jest.mock('components/Uplot', () => ({
-	__esModule: true,
-	default: (): JSX.Element => <div data-testid="uplot-chart">Uplot Chart</div>,
+jest.mock(
+	'container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries',
+	() => ({
+		__esModule: true,
+		default: (): JSX.Element => (
+			<div data-testid="uplot-chart">TimeSeries Chart</div>
+		),
+	}),
+);
+
+jest.mock('providers/Timezone', () => ({
+	useTimezone: (): { timezone: { value: string } } => ({
+		timezone: { value: 'UTC' },
+	}),
 }));

 jest.mock('../MetricsTable', () => ({
@@ -294,20 +309,28 @@ const renderEntityMetrics = (overrides = {}): any => {
 	);
 };

-const mockChartData = [
-	[], // time_series chart data (uplot handles empty array)
+const mockChartData: (uPlot.AlignedData | null)[] = [
+	[
+		[1705315200, 1705318800],
+		[42.5, 43.2],
+	], // time_series chart data (AlignedData)
+	null, // table uses tableData
+];
+
+const mockTableData: (import('../utils').MetricsTableData[] | null)[] = [
+	null, // time_series uses chartData
 	[
 		{
 			rows: [
-				{ data: { timestamp: '2024-01-15T10:00:00Z', value: '1024' } },
-				{ data: { timestamp: '2024-01-15T10:01:00Z', value: '1028' } },
+				{ timestamp: '2024-01-15T10:00:00Z', value: '1024' },
+				{ timestamp: '2024-01-15T10:01:00Z', value: '1028' },
 			],
 			columns: [
 				{ key: 'timestamp', label: 'Timestamp', isValueColumn: false },
 				{ key: 'value', label: 'Value', isValueColumn: true },
 			],
 		},
-	], // table chart data
+	], // table data
 ];

 const mockQueryPayloads = [
@@ -321,6 +344,7 @@ describe('EntityMetrics', () => {
 		mockUseEntityMetrics.mockReturnValue({
 			queries: mockQueries as any,
 			chartData: mockChartData,
+			tableData: mockTableData,
 			queryPayloads: mockQueryPayloads as any,
 		});
 		mockUseQuery.mockReturnValue({
@@ -351,7 +375,8 @@ describe('EntityMetrics', () => {
 	it('renders loading state when fetching metrics', () => {
 		mockUseEntityMetrics.mockReturnValue({
 			queries: mockLoadingQueries as any,
-			chartData: [[], []],
+			chartData: [null, null],
+			tableData: [null, null],
 			queryPayloads: mockQueryPayloads as any,
 		});
 		renderEntityMetrics();
@@ -362,7 +387,8 @@ describe('EntityMetrics', () => {
 	it('renders error state when query fails', () => {
 		mockUseEntityMetrics.mockReturnValue({
 			queries: mockErrorQueries as any,
-			chartData: [[], []],
+			chartData: [null, null],
+			tableData: [null, null],
 			queryPayloads: mockQueryPayloads as any,
 		});
 		renderEntityMetrics();
@@ -373,8 +399,9 @@ describe('EntityMetrics', () => {
 	it('renders empty state when no metrics data', () => {
 		mockUseEntityMetrics.mockReturnValue({
 			queries: mockEmptyQueries as any,
-			chartData: [
-				[],
+			chartData: [[[]], null],
+			tableData: [
+				null,
 				[
 					{
 						rows: [],
--- a/frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityMetrics/configBuilder.ts
+++ b/frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityMetrics/configBuilder.ts
@@ -0,0 +1,122 @@
+import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { getLegend } from 'lib/dashboard/getQueryResults';
+import getLabelName from 'lib/getLabelName';
+import {
+	DrawStyle,
+	FillMode,
+	LineInterpolation,
+	LineStyle,
+	SelectionPreferencesSource,
+} from 'lib/uPlotV2/config/types';
+import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+import { hasSingleVisiblePoint } from 'lib/uPlotV2/utils/dataUtils';
+import { get } from 'lodash-es';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import uPlot from 'uplot';
+
+export interface EntityMetricsChartConfigProps {
+	id: string;
+	isDarkMode: boolean;
+	currentQuery: Query;
+	onDragSelect: (startTime: number, endTime: number) => void;
+	apiResponse?: MetricRangePayloadProps;
+	timezone: Timezone;
+	yAxisUnit: string;
+	minTimeScale?: number;
+	maxTimeScale?: number;
+}
+
+export function buildEntityMetricsChartConfig({
+	id,
+	isDarkMode,
+	currentQuery,
+	onDragSelect,
+	apiResponse,
+	timezone,
+	yAxisUnit,
+	minTimeScale,
+	maxTimeScale,
+}: EntityMetricsChartConfigProps): UPlotConfigBuilder {
+	const stepIntervals = get(
+		apiResponse,
+		'data.newResult.meta.stepIntervals',
+		{},
+	) as Record<string, number>;
+	const minStepInterval = Object.keys(stepIntervals).length
+		? Math.min(...Object.values(stepIntervals))
+		: undefined;
+
+	const tzDate = (timestamp: number): Date =>
+		uPlot.tzDate(new Date(timestamp * 1e3), timezone.value);
+
+	const builder = new UPlotConfigBuilder({
+		id,
+		onDragSelect,
+		tzDate,
+		selectionPreferencesSource: SelectionPreferencesSource.IN_MEMORY,
+		stepInterval: minStepInterval,
+	});
+
+	builder.addScale({
+		scaleKey: 'x',
+		time: true,
+		min: minTimeScale,
+		max: maxTimeScale,
+	});
+
+	builder.addScale({
+		scaleKey: 'y',
+		time: false,
+	});
+
+	builder.addAxis({
+		scaleKey: 'x',
+		show: true,
+		side: 2,
+		isDarkMode,
+		panelType: PANEL_TYPES.TIME_SERIES,
+	});
+
+	builder.addAxis({
+		scaleKey: 'y',
+		show: true,
+		side: 3,
+		isDarkMode,
+		yAxisUnit,
+		panelType: PANEL_TYPES.TIME_SERIES,
+	});
+
+	if (!apiResponse?.data?.result) {
+		return builder;
+	}
+
+	apiResponse.data.result.forEach((series) => {
+		const hasSingleValidPoint = hasSingleVisiblePoint(series.values);
+		const baseLabelName = getLabelName(
+			series.metric,
+			series.queryName || '',
+			series.legend || '',
+		);
+
+		const label = getLegend(series, currentQuery, baseLabelName);
+
+		builder.addSeries({
+			scaleKey: 'y',
+			drawStyle: hasSingleValidPoint ? DrawStyle.Points : DrawStyle.Line,
+			label,
+			colorMapping: {},
+			spanGaps: true,
+			lineStyle: LineStyle.Solid,
+			lineInterpolation: LineInterpolation.Spline,
+			showPoints: hasSingleValidPoint,
+			pointSize: 5,
+			fillMode: FillMode.None,
+			isDarkMode,
+			metric: series.metric,
+		});
+	});
+
+	return builder;
+}
--- a/frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityMetrics/hooks.ts
+++ b/frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityMetrics/hooks.ts
@@ -8,13 +8,14 @@ import {
 	GetMetricQueryRange,
 	GetQueryResultsProps,
 } from 'lib/dashboard/getQueryResults';
-import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
+import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
 import { SuccessResponse } from 'types/api';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import uPlot from 'uplot';

-import { FeatureKeys } from '../../../../constants/features';
-import { useAppContext } from '../../../../providers/App/App';
-import { getMetricsTableData } from './utils';
+import { FeatureKeys } from 'constants/features';
+import { useAppContext } from 'providers/App/App';
+import { getMetricsTableData, MetricsTableData } from './utils';

 export interface UseEntityMetricsParams<T> {
 	queryKey: string;
@@ -32,10 +33,8 @@ export interface UseEntityMetricsParams<T> {

 export interface UseEntityMetricsResult {
 	queries: UseQueryResult<SuccessResponse<MetricRangePayloadProps>, unknown>[];
-	chartData: (
-		| ReturnType<typeof getUPlotChartData>
-		| ReturnType<typeof getMetricsTableData>
-	)[];
+	chartData: (uPlot.AlignedData | null)[];
+	tableData: (MetricsTableData[] | null)[];
 	queryPayloads: GetQueryResultsProps[];
 }

@@ -93,9 +92,22 @@ export function useEntityMetrics<T>({
 		() =>
 			queries.map(({ data }, index) => {
 				const panelType = queryPayloads[index]?.graphType;
-				return panelType === PANEL_TYPES.TABLE
-					? getMetricsTableData(data)
-					: getUPlotChartData(data?.payload);
+				if (panelType === PANEL_TYPES.TABLE) {
+					return null;
+				}
+				return data?.payload ? prepareChartData(data.payload) : null;
+			}),
+		[queries, queryPayloads],
+	);
+
+	const tableData = useMemo(
+		() =>
+			queries.map(({ data }, index) => {
+				const panelType = queryPayloads[index]?.graphType;
+				if (panelType !== PANEL_TYPES.TABLE) {
+					return null;
+				}
+				return getMetricsTableData(data);
 			}),
 		[queries, queryPayloads],
 	);
@@ -103,6 +115,7 @@ export function useEntityMetrics<T>({
 	return {
 		queries,
 		chartData,
+		tableData,
 		queryPayloads,
 	};
 }
--- a/frontend/src/container/MeterExplorer/Explorer/EmptyMeterSearch.module.scss
+++ b/frontend/src/container/MeterExplorer/Explorer/EmptyMeterSearch.module.scss
@@ -0,0 +1,8 @@
+.emptyMeterSearch {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+}
--- a/frontend/src/container/MeterExplorer/Explorer/EmptyMeterSearch.tsx
+++ b/frontend/src/container/MeterExplorer/Explorer/EmptyMeterSearch.tsx
@@ -0,0 +1,26 @@
+import { Empty } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+
+import styles from './EmptyMeterSearch.module.scss';
+
+interface EmptyMeterSearchProps {
+	hasQueryResult?: boolean;
+}
+
+export default function EmptyMeterSearch({
+	hasQueryResult,
+}: EmptyMeterSearchProps): JSX.Element {
+	return (
+		<div className={styles.emptyMeterSearch}>
+			<Empty
+				description={
+					<Typography.Title level={5}>
+						{hasQueryResult
+							? 'No data'
+							: 'Select a metric and run a query to see the results'}
+					</Typography.Title>
+				}
+			/>
+		</div>
+	);
+}
--- a/frontend/src/container/MeterExplorer/Explorer/Explorer.styles.scss
+++ b/frontend/src/container/MeterExplorer/Explorer/Explorer.styles.scss
@@ -73,34 +73,6 @@
 				margin-top: 10px;
 				margin-bottom: 20px;
 			}
-
-			.empty-meter-search {
-				display: flex;
-				flex-direction: column;
-				justify-content: center;
-				align-items: center;
-				width: 100%;
-				height: 100%;
-			}
-
-			.time-series-view-panel {
-				border-radius: 4px;
-				border: 1px solid var(--l1-border);
-				background: var(--l2-background);
-				padding: 8px !important;
-				margin: 8px;
-			}
-
-			.time-series-container {
-				display: grid;
-				grid-template-columns: repeat(
-					auto-fit,
-					minmax(min(100%, calc(50% - 8px)), 1fr)
-				);
-				gap: 16px;
-				width: 100%;
-				height: fit-content;
-			}
 		}
 	}

@@ -113,22 +85,6 @@
 	padding-bottom: 80px;
 }

-.meter-time-series-container {
-	display: flex;
-	flex-direction: column;
-	gap: 10px;
-
-	.builder-units-filter {
-		padding: 0 8px;
-		margin-bottom: 0px !important;
-
-		.builder-units-filter-label {
-			margin-bottom: 0px !important;
-			font-size: 12px;
-		}
-	}
-}
-
 .dashboards-and-alerts-popover-container {
 	display: flex;
 	gap: 16px;
--- a/frontend/src/container/MeterExplorer/Explorer/Explorer.tsx
+++ b/frontend/src/container/MeterExplorer/Explorer/Explorer.tsx
@@ -35,7 +35,6 @@ function Explorer(): JSX.Element {
 		handleRunQuery,
 		stagedQuery,
 		updateAllQueriesOperators,
-		handleSetQueryData,
 		currentQuery,
 	} = useQueryBuilder();
 	const { safeNavigate } = useSafeNavigate();
@@ -67,15 +66,6 @@ function Explorer(): JSX.Element {
 		[updateAllQueriesOperators],
 	);

-	useEffect(() => {
-		handleSetQueryData(0, {
-			...initialQueryMeterWithType.builder.queryData[0],
-			source: 'meter',
-		});
-
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
-
 	const exportDefaultQuery = useMemo(
 		() =>
 			updateAllQueriesOperators(
--- a/frontend/src/container/MeterExplorer/Explorer/MeterLoading.module.scss
+++ b/frontend/src/container/MeterExplorer/Explorer/MeterLoading.module.scss
@@ -0,0 +1,18 @@
+.loadingMeter {
+	display: flex;
+	justify-content: center;
+	align-items: flex-start;
+	height: 240px;
+	padding: var(--spacing-12) 0;
+}
+
+.loadingMeterContent {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+}
+
+.loadingGif {
+	height: 72px;
+	margin-left: calc(-1 * var(--spacing-12));
+}
--- a/frontend/src/container/MeterExplorer/Explorer/MeterLoading.tsx
+++ b/frontend/src/container/MeterExplorer/Explorer/MeterLoading.tsx
@@ -0,0 +1,17 @@
+import { Typography } from '@signozhq/ui/typography';
+import { DataSource } from 'types/common/queryBuilder';
+
+import loadingPlaneUrl from '@/assets/Icons/loading-plane.gif';
+
+import styles from './MeterLoading.module.scss';
+
+export default function MeterLoading(): JSX.Element {
+	return (
+		<div className={styles.loadingMeter}>
+			<div className={styles.loadingMeterContent}>
+				<img className={styles.loadingGif} src={loadingPlaneUrl} alt="wait-icon" />
+				<Typography>Retrieving your {DataSource.METRICS}</Typography>
+			</div>
+		</div>
+	);
+}
--- a/frontend/src/container/MeterExplorer/Explorer/TimeSeries.module.scss
+++ b/frontend/src/container/MeterExplorer/Explorer/TimeSeries.module.scss
@@ -0,0 +1,31 @@
+.meterTimeSeriesContainer {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-5);
+	width: 100%;
+
+	:global(.builder-units-filter) {
+		padding: 0 var(--spacing-4);
+		margin-bottom: 0 !important;
+	}
+
+	:global(.builder-units-filter-label) {
+		margin-bottom: 0 !important;
+		font-size: 12px;
+	}
+}
+
+.timeSeriesContainer {
+	gap: var(--spacing-8);
+	width: 100%;
+	height: 50vh;
+	max-height: 50vh;
+	padding-right: 16px;
+	padding-left: 8px;
+}
+
+.timeSeriesViewPanel {
+	border-radius: 4px;
+	border: 1px solid var(--l1-border);
+	background: var(--l2-background);
+}
--- a/frontend/src/container/MeterExplorer/Explorer/TimeSeries.tsx
+++ b/frontend/src/container/MeterExplorer/Explorer/TimeSeries.tsx
@@ -1,27 +1,28 @@
-import { useEffect, useMemo } from 'react';
-import { useQueries } from 'react-query';
+import { useMemo, useRef } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { isAxiosError } from 'axios';
 import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
-import { ENTITY_VERSION_V5 } from 'constants/app';
-import { initialQueryMeterWithType, PANEL_TYPES } from 'constants/queryBuilder';
-import { MAX_QUERY_RETRIES } from 'constants/reactQuery';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import EmptyMetricsSearch from 'container/MetricsExplorer/Explorer/EmptyMetricsSearch';
+import BarChart from 'container/DashboardContainer/visualization/charts/BarChart/BarChart';
 import { BuilderUnitsFilter } from 'container/QueryBuilder/filters/BuilderUnitsFilter';
-import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
-import { convertDataValueToMs } from 'container/TimeSeriesView/utils';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useResizeObserver } from 'hooks/useDimensions';
 import useUrlYAxisUnit from 'hooks/useUrlYAxisUnit';
-import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
-import { useErrorModal } from 'providers/ErrorModalProvider';
+import { LegendPosition } from 'lib/uPlotV2/components/types';
+import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
+import { useTimezone } from 'providers/Timezone';
 import { AppState } from 'store/reducers';
-import { SuccessResponse } from 'types/api';
-import APIError from 'types/api/error';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import uPlot from 'uplot';
+
+import { buildMeterChartConfig } from './configBuilder';
+import EmptyMeterSearch from './EmptyMeterSearch';
+import MeterLoading from './MeterLoading';
+import styles from './TimeSeries.module.scss';
+import { useTimeSeriesQueries } from './useTimeSeriesQueries';
+import { useTimeSeriesTimeManagement } from './useTimeSeriesTimeManagement';
+
+const WIDGET_ID = 'meter-explorer-bar-chart';

 interface TimeSeriesProps {
 	onFetchingStateChange?: (isFetching: boolean) => void;
@@ -32,144 +33,124 @@ function TimeSeries({
 	onFetchingStateChange,
 	isCancelled = false,
 }: TimeSeriesProps): JSX.Element {
+	const graphRef = useRef<HTMLDivElement>(null);
+
 	const { stagedQuery, currentQuery } = useQueryBuilder();
 	const { yAxisUnit, onUnitChange } = useUrlYAxisUnit('');

+	const isDarkMode = useIsDarkMode();
+	const { timezone } = useTimezone();
+	const containerDimensions = useResizeObserver(graphRef);
+
 	const {
 		selectedTime: globalSelectedTime,
 		maxTime,
 		minTime,
 	} = useSelector<AppState, GlobalReducer>((state) => state.globalTime);

-	const isValidToConvertToMs = useMemo(() => {
-		const isValid: boolean[] = [];
+	const { minTimeScale, maxTimeScale, onDragSelect } =
+		useTimeSeriesTimeManagement({
+			globalSelectedTime,
+			maxTime,
+			minTime,
+		});

-		currentQuery.builder.queryData.forEach(
-			({ aggregateAttribute, aggregateOperator }) => {
-				const isExistDurationNanoAttribute =
-					aggregateAttribute?.key === 'durationNano' ||
-					aggregateAttribute?.key === 'duration_nano';
-
-				const isCountOperator =
-					aggregateOperator === 'count' || aggregateOperator === 'count_distinct';
-
-				isValid.push(!isCountOperator && isExistDurationNanoAttribute);
-			},
-		);
-
-		return isValid.every(Boolean);
-	}, [currentQuery]);
-
-	const queryPayloads = useMemo(
-		() => [stagedQuery || initialQueryMeterWithType],
-		[stagedQuery],
-	);
-
-	const { showErrorModal } = useErrorModal();
-
-	const queries = useQueries(
-		queryPayloads.map((payload, index) => ({
-			queryKey: [
-				REACT_QUERY_KEY.GET_QUERY_RANGE,
-				payload,
-				ENTITY_VERSION_V5,
-				globalSelectedTime,
-				maxTime,
-				minTime,
-				index,
-			],
-			queryFn: ({
-				signal,
-			}: {
-				signal?: AbortSignal;
-			}): Promise<SuccessResponse<MetricRangePayloadProps>> =>
-				GetMetricQueryRange(
-					{
-						query: payload,
-						graphType: PANEL_TYPES.BAR,
-						selectedTime: 'GLOBAL_TIME',
-						globalSelectedInterval: globalSelectedTime,
-						params: {
-							dataSource: DataSource.METRICS,
-						},
-					},
-					ENTITY_VERSION_V5,
-					undefined,
-					signal,
-				),
-			enabled: !!payload,
-			retry: (failureCount: number, error: unknown): boolean => {
-				if (isAxiosError(error) && error.code === 'ERR_CANCELED') {
-					return false;
-				}
-
-				let status: number | undefined;
-
-				if (error instanceof APIError) {
-					status = error.getHttpStatusCode();
-				} else if (isAxiosError(error)) {
-					status = error.response?.status;
-				}
-
-				if (status && status >= 400 && status < 500) {
-					return false;
-				}
-
-				return failureCount < MAX_QUERY_RETRIES;
-			},
-			onError: (error: APIError): void => {
-				showErrorModal(error);
-			},
-		})),
-	);
-
-	const isFetching = queries.some((q) => q.isFetching);
-	useEffect(() => {
-		onFetchingStateChange?.(isFetching);
-	}, [isFetching, onFetchingStateChange]);
-
-	const data = useMemo(() => queries.map(({ data }) => data) ?? [], [queries]);
-
-	const responseData = useMemo(
-		() =>
-			data.map((datapoint) =>
-				isValidToConvertToMs ? convertDataValueToMs(datapoint) : datapoint,
-			),
-		[data, isValidToConvertToMs],
-	);
+	const { responseData, isLoading, isError } = useTimeSeriesQueries({
+		stagedQuery,
+		currentQuery,
+		globalSelectedTime,
+		maxTime,
+		minTime,
+		onFetchingStateChange,
+	});

 	const hasMetricSelected = useMemo(
 		() => currentQuery.builder.queryData.some((q) => q.aggregateAttribute?.key),
 		[currentQuery],
 	);

+	const chartsData = useMemo(() => {
+		return responseData.map((response, index) => {
+			const apiResponse = response?.payload;
+
+			const config = buildMeterChartConfig({
+				id: `${WIDGET_ID}-${index}`,
+				isDarkMode,
+				currentQuery,
+				onDragSelect,
+				apiResponse,
+				timezone,
+				yAxisUnit: yAxisUnit || 'short',
+				minTimeScale,
+				maxTimeScale,
+			});
+
+			const chartData = apiResponse ? prepareChartData(apiResponse) : [];
+
+			return {
+				config,
+				chartData,
+				hasData: chartData.length > 0 && chartData[0]?.length > 0,
+			};
+		});
+	}, [
+		responseData,
+		currentQuery,
+		yAxisUnit,
+		isDarkMode,
+		onDragSelect,
+		timezone,
+		minTimeScale,
+		maxTimeScale,
+	]);
+
+	const hasAnyData = chartsData.some((chart) => chart.hasData);
+
 	return (
-		<div className="meter-time-series-container">
+		<div className={styles.meterTimeSeriesContainer}>
 			<BuilderUnitsFilter onChange={onUnitChange} yAxisUnit={yAxisUnit} />
-			<div className="time-series-container">
-				{!hasMetricSelected && <EmptyMetricsSearch />}
+			<div className={styles.timeSeriesContainer} ref={graphRef}>
+				{!hasMetricSelected && <EmptyMeterSearch />}
 				{isCancelled && hasMetricSelected && (
 					<QueryCancelledPlaceholder subText='Click "Run Query" to load metrics.' />
 				)}
+				{isLoading && hasMetricSelected && !isCancelled && <MeterLoading />}
 				{!isCancelled &&
 					hasMetricSelected &&
-					responseData.map((datapoint, index) => (
-						<div
-							className="time-series-view-panel"
-							// eslint-disable-next-line react/no-array-index-key
-							key={index}
-						>
-							<TimeSeriesView
-								isFilterApplied={false}
-								isError={queries[index].isError}
-								isLoading={queries[index].isLoading}
-								data={datapoint}
-								dataSource={DataSource.METRICS}
-								yAxisUnit={yAxisUnit}
-								panelType={PANEL_TYPES.BAR}
-							/>
-						</div>
-					))}
+					!isLoading &&
+					!isError &&
+					!hasAnyData && (
+						<EmptyMeterSearch hasQueryResult={responseData[0] !== undefined} />
+					)}
+				{!isCancelled &&
+					hasMetricSelected &&
+					!isLoading &&
+					!isError &&
+					containerDimensions.width > 0 &&
+					containerDimensions.height > 0 &&
+					chartsData.map(
+						(chart, index) =>
+							chart.hasData && (
+								<div
+									className={styles.timeSeriesViewPanel}
+									// oxlint-disable-next-line react/no-array-index-key -- query responses have no stable ID
+									key={`${WIDGET_ID}-${index}`}
+								>
+									<BarChart
+										config={chart.config}
+										legendConfig={{
+											position: LegendPosition.BOTTOM,
+										}}
+										data={chart.chartData as uPlot.AlignedData}
+										width={containerDimensions.width}
+										height={containerDimensions.height}
+										isStackedBarChart
+										yAxisUnit={yAxisUnit || 'short'}
+										timezone={timezone}
+									/>
+								</div>
+							),
+					)}
 			</div>
 		</div>
 	);
--- a/frontend/src/container/MeterExplorer/Explorer/configBuilder.ts
+++ b/frontend/src/container/MeterExplorer/Explorer/configBuilder.ts
@@ -0,0 +1,117 @@
+import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { getInitialStackedBands } from 'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils';
+import { getLegend } from 'lib/dashboard/getQueryResults';
+import getLabelName from 'lib/getLabelName';
+import {
+	DrawStyle,
+	SelectionPreferencesSource,
+} from 'lib/uPlotV2/config/types';
+import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+import { get } from 'lodash-es';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import uPlot from 'uplot';
+
+export interface MeterChartConfigProps {
+	id: string;
+	isDarkMode: boolean;
+	currentQuery: Query;
+	onDragSelect: (startTime: number, endTime: number) => void;
+	apiResponse?: MetricRangePayloadProps;
+	timezone: Timezone;
+	yAxisUnit: string;
+	minTimeScale?: number;
+	maxTimeScale?: number;
+}
+
+export function buildMeterChartConfig({
+	id,
+	isDarkMode,
+	currentQuery,
+	onDragSelect,
+	apiResponse,
+	timezone,
+	yAxisUnit,
+	minTimeScale,
+	maxTimeScale,
+}: MeterChartConfigProps): UPlotConfigBuilder {
+	const stepIntervals = get(
+		apiResponse,
+		'data.newResult.meta.stepIntervals',
+		{},
+	) as Record<string, number>;
+	const minStepInterval = Object.keys(stepIntervals).length
+		? Math.min(...Object.values(stepIntervals))
+		: undefined;
+
+	const tzDate = (timestamp: number): Date =>
+		uPlot.tzDate(new Date(timestamp * 1e3), timezone.value);
+
+	const builder = new UPlotConfigBuilder({
+		id,
+		onDragSelect,
+		tzDate,
+		selectionPreferencesSource: SelectionPreferencesSource.IN_MEMORY,
+		stepInterval: minStepInterval,
+	});
+
+	builder.addScale({
+		scaleKey: 'x',
+		time: true,
+		min: minTimeScale,
+		max: maxTimeScale,
+	});
+
+	builder.addScale({
+		scaleKey: 'y',
+		time: false,
+	});
+
+	builder.addAxis({
+		scaleKey: 'x',
+		show: true,
+		side: 2,
+		isDarkMode,
+		panelType: PANEL_TYPES.BAR,
+	});
+
+	builder.addAxis({
+		scaleKey: 'y',
+		show: true,
+		side: 3,
+		isDarkMode,
+		yAxisUnit,
+		panelType: PANEL_TYPES.BAR,
+	});
+
+	if (!apiResponse?.data?.result) {
+		return builder;
+	}
+
+	const seriesCount = (apiResponse.data.result.length ?? 0) + 1;
+	builder.setBands(getInitialStackedBands(seriesCount));
+
+	apiResponse.data.result.forEach((series) => {
+		const baseLabelName = getLabelName(
+			series.metric,
+			series.queryName || '',
+			series.legend || '',
+		);
+
+		const label = getLegend(series, currentQuery, baseLabelName);
+		const currentStepInterval = get(stepIntervals, series.queryName, undefined);
+
+		builder.addSeries({
+			scaleKey: 'y',
+			drawStyle: DrawStyle.Bar,
+			label,
+			colorMapping: {},
+			isDarkMode,
+			stepInterval: currentStepInterval,
+			metric: series.metric,
+		});
+	});
+
+	return builder;
+}
--- a/frontend/src/container/MeterExplorer/Explorer/useTimeSeriesQueries.ts
+++ b/frontend/src/container/MeterExplorer/Explorer/useTimeSeriesQueries.ts
@@ -0,0 +1,146 @@
+import { useEffect, useMemo } from 'react';
+import { useQueries } from 'react-query';
+import { isAxiosError } from 'axios';
+import { ENTITY_VERSION_V5 } from 'constants/app';
+import { initialQueryMeterWithType, PANEL_TYPES } from 'constants/queryBuilder';
+import { MAX_QUERY_RETRIES } from 'constants/reactQuery';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import {
+	CustomTimeType,
+	Time,
+} from 'container/TopNav/DateTimeSelectionV2/types';
+import { convertDataValueToMs } from 'container/TimeSeriesView/utils';
+import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import { SuccessResponse } from 'types/api';
+import APIError from 'types/api/error';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+
+interface UseTimeSeriesQueriesProps {
+	stagedQuery: Query | null;
+	currentQuery: Query;
+	globalSelectedTime: Time | CustomTimeType;
+	maxTime: number;
+	minTime: number;
+	onFetchingStateChange?: (isFetching: boolean) => void;
+}
+
+interface UseTimeSeriesQueriesResult {
+	responseData: (SuccessResponse<MetricRangePayloadProps> | undefined)[];
+	isLoading: boolean;
+	isError: boolean;
+}
+
+export function useTimeSeriesQueries({
+	stagedQuery,
+	currentQuery,
+	globalSelectedTime,
+	maxTime,
+	minTime,
+	onFetchingStateChange,
+}: UseTimeSeriesQueriesProps): UseTimeSeriesQueriesResult {
+	const { showErrorModal } = useErrorModal();
+
+	const isValidToConvertToMs = useMemo(() => {
+		const isValid: boolean[] = [];
+
+		currentQuery.builder.queryData.forEach(
+			({ aggregateAttribute, aggregateOperator }) => {
+				const isExistDurationNanoAttribute =
+					aggregateAttribute?.key === 'durationNano' ||
+					aggregateAttribute?.key === 'duration_nano';
+
+				const isCountOperator =
+					aggregateOperator === 'count' || aggregateOperator === 'count_distinct';
+
+				isValid.push(!isCountOperator && isExistDurationNanoAttribute);
+			},
+		);
+
+		return isValid.every(Boolean);
+	}, [currentQuery]);
+
+	const queryPayloads = useMemo(
+		() => [stagedQuery || initialQueryMeterWithType],
+		[stagedQuery],
+	);
+
+	const queries = useQueries(
+		queryPayloads.map((payload, index) => ({
+			queryKey: [
+				REACT_QUERY_KEY.GET_QUERY_RANGE,
+				payload,
+				ENTITY_VERSION_V5,
+				globalSelectedTime,
+				maxTime,
+				minTime,
+				index,
+			],
+			queryFn: ({
+				signal,
+			}: {
+				signal?: AbortSignal;
+			}): Promise<SuccessResponse<MetricRangePayloadProps>> =>
+				GetMetricQueryRange(
+					{
+						query: payload,
+						graphType: PANEL_TYPES.BAR,
+						selectedTime: 'GLOBAL_TIME',
+						globalSelectedInterval: globalSelectedTime,
+						params: {
+							dataSource: DataSource.METRICS,
+						},
+					},
+					ENTITY_VERSION_V5,
+					undefined,
+					signal,
+				),
+			enabled: !!payload,
+			retry: (failureCount: number, error: unknown): boolean => {
+				if (isAxiosError(error) && error.code === 'ERR_CANCELED') {
+					return false;
+				}
+
+				let status: number | undefined;
+
+				if (error instanceof APIError) {
+					status = error.getHttpStatusCode();
+				} else if (isAxiosError(error)) {
+					status = error.response?.status;
+				}
+
+				if (status && status >= 400 && status < 500) {
+					return false;
+				}
+
+				return failureCount < MAX_QUERY_RETRIES;
+			},
+			onError: (error: APIError): void => {
+				showErrorModal(error);
+			},
+		})),
+	);
+
+	const isFetching = queries.some((q) => q.isFetching);
+	useEffect(() => {
+		onFetchingStateChange?.(isFetching);
+	}, [isFetching, onFetchingStateChange]);
+
+	const responseData = useMemo(() => {
+		const data = queries.map(({ data }) => data) ?? [];
+		return data.map((datapoint) =>
+			isValidToConvertToMs ? convertDataValueToMs(datapoint) : datapoint,
+		);
+	}, [queries, isValidToConvertToMs]);
+
+	const isLoading = queries.some((q) => q.isLoading);
+	const isError = queries.some((q) => q.isError);
+
+	return {
+		responseData,
+		isLoading,
+		isError,
+	};
+}
--- a/frontend/src/container/MeterExplorer/Explorer/useTimeSeriesTimeManagement.ts
+++ b/frontend/src/container/MeterExplorer/Explorer/useTimeSeriesTimeManagement.ts
@@ -0,0 +1,102 @@
+import { useCallback, useEffect, useState } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { useDispatch } from 'react-redux';
+import { useLocation } from 'react-router-dom';
+import { QueryParams } from 'constants/query';
+import {
+	CustomTimeType,
+	Time,
+} from 'container/TopNav/DateTimeSelectionV2/types';
+import useUrlQuery from 'hooks/useUrlQuery';
+import GetMinMax from 'lib/getMinMax';
+import getTimeString from 'lib/getTimeString';
+import history from 'lib/history';
+import { UpdateTimeInterval } from 'store/actions';
+import { getTimeRange } from 'utils/getTimeRange';
+
+interface UseTimeSeriesTimeManagementProps {
+	globalSelectedTime: Time | CustomTimeType;
+	maxTime: number;
+	minTime: number;
+}
+
+interface UseTimeSeriesTimeManagementResult {
+	minTimeScale: number | undefined;
+	maxTimeScale: number | undefined;
+	onDragSelect: (start: number, end: number) => void;
+}
+
+export function useTimeSeriesTimeManagement({
+	globalSelectedTime,
+	maxTime,
+	minTime,
+}: UseTimeSeriesTimeManagementProps): UseTimeSeriesTimeManagementResult {
+	const dispatch = useDispatch();
+	const urlQuery = useUrlQuery();
+	const location = useLocation();
+
+	const [minTimeScale, setMinTimeScale] = useState<number>();
+	const [maxTimeScale, setMaxTimeScale] = useState<number>();
+
+	useEffect((): void => {
+		const { startTime, endTime } = getTimeRange();
+		setMinTimeScale(startTime);
+		setMaxTimeScale(endTime);
+	}, [maxTime, minTime, globalSelectedTime]);
+
+	const onDragSelect = useCallback(
+		(start: number, end: number): void => {
+			const startTimestamp = Math.trunc(start);
+			const endTimestamp = Math.trunc(end);
+
+			if (startTimestamp !== endTimestamp) {
+				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
+			}
+
+			const { maxTime, minTime } = GetMinMax('custom', [
+				startTimestamp,
+				endTimestamp,
+			]);
+
+			urlQuery.set(QueryParams.startTime, minTime.toString());
+			urlQuery.set(QueryParams.endTime, maxTime.toString());
+			urlQuery.delete(QueryParams.relativeTime);
+			const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
+			history.push(generatedUrl);
+		},
+		[dispatch, location.pathname, urlQuery],
+	);
+
+	const handleBackNavigation = useCallback((): void => {
+		const searchParams = new URLSearchParams(window.location.search);
+		const startTime = searchParams.get(QueryParams.startTime);
+		const endTime = searchParams.get(QueryParams.endTime);
+		const relativeTime = searchParams.get(
+			QueryParams.relativeTime,
+		) as CustomTimeType;
+
+		if (relativeTime) {
+			dispatch(UpdateTimeInterval(relativeTime));
+		} else if (startTime && endTime && startTime !== endTime) {
+			dispatch(
+				UpdateTimeInterval('custom', [
+					parseInt(getTimeString(startTime), 10),
+					parseInt(getTimeString(endTime), 10),
+				]),
+			);
+		}
+	}, [dispatch]);
+
+	useEffect(() => {
+		window.addEventListener('popstate', handleBackNavigation);
+		return (): void => {
+			window.removeEventListener('popstate', handleBackNavigation);
+		};
+	}, [handleBackNavigation]);
+
+	return {
+		minTimeScale,
+		maxTimeScale,
+		onDragSelect,
+	};
+}
--- a/frontend/src/container/PublicDashboardContainer/AutoRefresh.module.scss
+++ b/frontend/src/container/PublicDashboardContainer/AutoRefresh.module.scss
@@ -0,0 +1,13 @@
+.autoRefresh {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+}
+
+.icon {
+	color: var(--l2-foreground);
+}
+
+.select {
+	min-width: 96px;
+}
--- a/frontend/src/container/PublicDashboardContainer/AutoRefresh.tsx
+++ b/frontend/src/container/PublicDashboardContainer/AutoRefresh.tsx
@@ -0,0 +1,41 @@
+import { RefreshCw } from '@signozhq/icons';
+import { SelectSimple } from '@signozhq/ui/select';
+import { refreshIntervalOptions } from 'container/TopNav/AutoRefreshV2/constants';
+
+import styles from './AutoRefresh.module.scss';
+
+const REFRESH_ITEMS = refreshIntervalOptions.map((option) => ({
+	value: option.key,
+	label: option.key === 'off' ? 'Off' : option.label,
+}));
+
+interface AutoRefreshProps {
+	value: string;
+	disabled?: boolean;
+	onChange: (value: string) => void;
+}
+
+// Interval selector for the public dashboard. Self-contained (no Redux global
+// time); the container advances its own time window on each tick.
+function AutoRefresh({
+	value,
+	disabled = false,
+	onChange,
+}: AutoRefreshProps): JSX.Element {
+	return (
+		<div className={styles.autoRefresh}>
+			<RefreshCw size={14} className={styles.icon} />
+			<SelectSimple
+				className={styles.select}
+				testId="public-dashboard-auto-refresh"
+				items={REFRESH_ITEMS}
+				value={value}
+				disabled={disabled}
+				withPortal={false}
+				onChange={(next): void => onChange(next as string)}
+			/>
+		</div>
+	);
+}
+
+export default AutoRefresh;
--- a/frontend/src/container/PublicDashboardContainer/Panel.tsx
+++ b/frontend/src/container/PublicDashboardContainer/Panel.tsx
@@ -79,13 +79,11 @@ function Panel({
 		},
 		ENTITY_VERSION_V5,
 		{
-			queryKey: [
-				widget?.query,
-				widget?.panelTypes,
-				requestData,
-				startTime,
-				endTime,
-			],
+			// Public data is fetched by index and the payload redacts each widget's
+			// filters, so query bodies are identical across panels. Key on panel
+			// identity + time — the only inputs that determine the response — so
+			// panels don't collapse onto one cache entry.
+			queryKey: [widget?.id, index, startTime, endTime],
 			retry(failureCount, error): boolean {
 				if (
 					String(error).includes('status: error') &&
--- a/frontend/src/container/PublicDashboardContainer/PublicDashboardContainer.tsx
+++ b/frontend/src/container/PublicDashboardContainer/PublicDashboardContainer.tsx
@@ -1,10 +1,12 @@
 import { useMemo, useState } from 'react';
 import RGL, { WidthProvider } from 'react-grid-layout';
+import { useInterval } from 'react-use';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import { PANEL_GROUP_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
 import { themeColors } from 'constants/theme';
 import { Card, CardContainer } from 'container/GridCardLayout/styles';
+import { refreshIntervalOptions } from 'container/TopNav/AutoRefreshV2/constants';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import { DEFAULT_TIME_RANGE } from 'container/TopNav/DateTimeSelectionV2/constants';
 import {
@@ -14,12 +16,14 @@ import {
 import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import GetMinMax from 'lib/getMinMax';
+import { NANO_SECOND_MULTIPLIER } from 'store/globalTime/utils';
 import { SuccessResponseV2 } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { PublicDashboardDataProps } from 'types/api/dashboard/public/get';

 import signozBrandLogoUrl from '@/assets/Logos/signoz-brand-logo.svg';

+import AutoRefresh from './AutoRefresh';
 import Panel from './Panel';

 import './PublicDashboardContainer.styles.scss';
@@ -121,14 +125,34 @@ function PublicDashboardContainer({
 			const { maxTime, minTime } = GetMinMax(interval);

 			setSelectedTimeRange({
-				startTime: Math.floor(minTime / 1000000000),
-				endTime: Math.floor(maxTime / 1000000000),
+				startTime: Math.floor(minTime / NANO_SECOND_MULTIPLIER / 1000),
+				endTime: Math.floor(maxTime / NANO_SECOND_MULTIPLIER / 1000),
 			});
 		}

 		setSelectedTimeRangeLabel(interval as string);
 	};

+	const [refreshIntervalKey, setRefreshIntervalKey] = useState<string>('off');
+
+	// Auto-refresh only makes sense for a rolling relative range, not a fixed
+	// custom window — pause it (and disable the control) when 'custom' is picked.
+	const isAutoRefreshPaused = selectedTimeRangeLabel === 'custom';
+
+	const refreshIntervalMs = useMemo(
+		() =>
+			refreshIntervalOptions.find((option) => option.key === refreshIntervalKey)
+				?.value || 0,
+		[refreshIntervalKey],
+	);
+
+	// Re-run the existing time-change handler with the current relative range so
+	// the rolling window advances — no need to duplicate the GetMinMax logic.
+	useInterval(
+		() => handleTimeChange(selectedTimeRangeLabel as Time),
+		isAutoRefreshPaused || refreshIntervalMs === 0 ? null : refreshIntervalMs,
+	);
+
 	return (
 		<div className="public-dashboard-container">
 			<div className="public-dashboard-header">
@@ -148,6 +172,11 @@ function PublicDashboardContainer({

 				{isTimeRangeEnabled && (
 					<div className="public-dashboard-header-right">
+						<AutoRefresh
+							value={refreshIntervalKey}
+							disabled={isAutoRefreshPaused}
+							onChange={setRefreshIntervalKey}
+						/>
 						<div className="datetime-section">
 							<DateTimeSelectionV2
 								showAutoRefresh={false}
--- a/frontend/src/container/PublicDashboardContainer/tests/AutoRefresh.test.tsx
+++ b/frontend/src/container/PublicDashboardContainer/tests/AutoRefresh.test.tsx
@@ -0,0 +1,23 @@
+import userEvent from '@testing-library/user-event';
+import { render, screen } from 'tests/test-utils';
+
+import AutoRefresh from '../AutoRefresh';
+
+describe('Public dashboard AutoRefresh', () => {
+	it('renders the interval selector', () => {
+		render(<AutoRefresh value="off" onChange={jest.fn()} />);
+		expect(
+			screen.getByTestId('public-dashboard-auto-refresh'),
+		).toBeInTheDocument();
+	});
+
+	it('lets the viewer pick a refresh interval', async () => {
+		const onChange = jest.fn();
+		render(<AutoRefresh value="off" onChange={onChange} />);
+
+		await userEvent.click(screen.getByTestId('public-dashboard-auto-refresh'));
+		await userEvent.click(screen.getByText('30 seconds'));
+
+		expect(onChange).toHaveBeenCalledWith('30s');
+	});
+});
--- a/frontend/src/container/PublicDashboardContainer/tests/Panel.test.tsx
+++ b/frontend/src/container/PublicDashboardContainer/tests/Panel.test.tsx
@@ -0,0 +1,79 @@
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { render } from 'tests/test-utils';
+import { Widgets } from 'types/api/dashboard/getAll';
+
+import Panel from '../Panel';
+
+const useGetQueryRangeMock = jest.fn();
+
+jest.mock('hooks/queryBuilder/useGetQueryRange', () => ({
+	useGetQueryRange: (...args: unknown[]): unknown => {
+		useGetQueryRangeMock(...args);
+		return {
+			data: undefined,
+			isFetching: false,
+			isLoading: false,
+			isSuccess: true,
+			isError: false,
+		};
+	},
+}));
+
+jest.mock('container/GridCardLayout/GridCard/WidgetGraphComponent', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="widget-graph" />,
+}));
+
+const buildWidget = (id: string): Widgets =>
+	({
+		id,
+		panelTypes: PANEL_TYPES.LIST,
+		query: {
+			builder: {
+				queryData: [{ dataSource: 'logs', limit: 100, orderBy: [] }],
+			},
+		},
+		timePreferance: 'GLOBAL_TIME',
+	}) as unknown as Widgets;
+
+describe('Public dashboard Panel', () => {
+	beforeEach(() => {
+		useGetQueryRangeMock.mockClear();
+	});
+
+	it('keys each panel by widget id + index so identical queries do not collide (bug 5503)', () => {
+		render(
+			<>
+				<Panel
+					widget={buildWidget('widget-a')}
+					index={2}
+					dashboardId="dash-1"
+					startTime={100}
+					endTime={200}
+				/>
+				<Panel
+					widget={buildWidget('widget-b')}
+					index={62}
+					dashboardId="dash-1"
+					startTime={100}
+					endTime={200}
+				/>
+			</>,
+		);
+
+		const [callA, callB] = useGetQueryRangeMock.mock.calls;
+		const queryKeyA = callA[2].queryKey;
+		const metaA = callA[4];
+		const queryKeyB = callB[2].queryKey;
+		const metaB = callB[4];
+
+		// Key is panel identity + time only — the redacted query body is not part
+		// of it, so identical query bodies can't collapse two panels onto one key.
+		expect(queryKeyA).toStrictEqual(['widget-a', 2, 100, 200]);
+		expect(queryKeyB).toStrictEqual(['widget-b', 62, 100, 200]);
+		expect(queryKeyA).not.toStrictEqual(queryKeyB);
+
+		expect(metaA.widgetIndex).toBe(2);
+		expect(metaB.widgetIndex).toBe(62);
+	});
+});
--- a/frontend/src/container/RolesSettings/CreateEditRolePage/CreateEditRolePage.tsx
+++ b/frontend/src/container/RolesSettings/CreateEditRolePage/CreateEditRolePage.tsx
@@ -7,7 +7,7 @@ import { Input } from '@signozhq/ui/input';
 import { Typography } from '@signozhq/ui/typography';
 import { Skeleton } from 'antd';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
-import PermissionDeniedFullPage from 'components/PermissionDeniedFullPage/PermissionDeniedFullPage';
+import PermissionDeniedFullPage from 'lib/authz/components/PermissionDeniedFullPage/PermissionDeniedFullPage';
 import ROUTES from 'constants/routes';
 import { useRolesFeatureGate } from 'hooks/useRolesFeatureGate';
 import useUrlQuery from 'hooks/useUrlQuery';
--- a/frontend/src/container/RolesSettings/CreateEditRolePage/tests/CreateEditRolePage.featureGate.test.tsx
+++ b/frontend/src/container/RolesSettings/CreateEditRolePage/tests/CreateEditRolePage.featureGate.test.tsx
@@ -1,13 +1,16 @@
 import { Route, Switch } from 'react-router-dom';
 import ROUTES from 'constants/routes';
 import { FeatureKeys } from 'constants/features';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import { defaultFeatureFlags, render, screen } from 'tests/test-utils';
-import { invalidLicense, mockUseAuthZGrantAll } from 'tests/authz-test-utils';
+import {
+	invalidLicense,
+	mockUseAuthZGrantAll,
+} from 'lib/authz/utils/authz-test-utils';

 import CreateEditRolePage from '../CreateEditRolePage';

-jest.mock('hooks/useAuthZ/useAuthZ');
+jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
 const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;

 beforeEach(() => {
--- a/frontend/src/container/RolesSettings/CreateEditRolePage/tests/CreateRolePage.authz.test.tsx
+++ b/frontend/src/container/RolesSettings/CreateEditRolePage/tests/CreateRolePage.authz.test.tsx
@@ -1,12 +1,12 @@
 import { Route, Switch } from 'react-router-dom';
 import ROUTES from 'constants/routes';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import { render, screen } from 'tests/test-utils';
-import { mockUseAuthZDenyAll } from 'tests/authz-test-utils';
+import { mockUseAuthZDenyAll } from 'lib/authz/utils/authz-test-utils';

 import CreateEditRolePage from '../CreateEditRolePage';

-jest.mock('hooks/useAuthZ/useAuthZ');
+jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
 const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;

 afterEach(() => {
--- a/frontend/src/container/RolesSettings/CreateEditRolePage/tests/CreateRolePage.test.tsx
+++ b/frontend/src/container/RolesSettings/CreateEditRolePage/tests/CreateRolePage.test.tsx
@@ -3,12 +3,12 @@ import ROUTES from 'constants/routes';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
 import { render, screen, userEvent, waitFor, within } from 'tests/test-utils';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
-import { mockUseAuthZGrantAll } from 'tests/authz-test-utils';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';

 import CreateEditRolePage from '../CreateEditRolePage';

-jest.mock('hooks/useAuthZ/useAuthZ');
+jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
 const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;

 const rolesApiBase = '*/api/v1/roles';
--- a/frontend/src/container/RolesSettings/CreateEditRolePage/tests/EditRolePage.authz.test.tsx
+++ b/frontend/src/container/RolesSettings/CreateEditRolePage/tests/EditRolePage.authz.test.tsx
@@ -1,15 +1,15 @@
 import { Route, Switch } from 'react-router-dom';
 import ROUTES from 'constants/routes';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import { render, screen } from 'tests/test-utils';
 import {
 	mockUseAuthZDenyAll,
 	mockUseAuthZGrantByPrefix,
-} from 'tests/authz-test-utils';
+} from 'lib/authz/utils/authz-test-utils';

 import CreateEditRolePage from '../CreateEditRolePage';

-jest.mock('hooks/useAuthZ/useAuthZ');
+jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
 const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;

 const EDIT_ROLE_ID = 'test-role-123';
--- a/frontend/src/container/RolesSettings/CreateEditRolePage/tests/EditRolePage.test.tsx
+++ b/frontend/src/container/RolesSettings/CreateEditRolePage/tests/EditRolePage.test.tsx
@@ -4,12 +4,12 @@ import { customRoleResponse } from 'mocks-server/__mockdata__/roles';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
 import { render, screen, userEvent, waitFor, within } from 'tests/test-utils';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
-import { mockUseAuthZGrantAll } from 'tests/authz-test-utils';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';

 import CreateEditRolePage from '../CreateEditRolePage';

-jest.mock('hooks/useAuthZ/useAuthZ');
+jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
 const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;

 const CUSTOM_ROLE_ID = '019c24aa-3333-0001-aaaa-111111111111';
--- a/frontend/src/container/RolesSettings/CreateEditRolePage/tests/JsonEditor.test.tsx
+++ b/frontend/src/container/RolesSettings/CreateEditRolePage/tests/JsonEditor.test.tsx
@@ -1,13 +1,13 @@
 import { Route, Switch } from 'react-router-dom';
 import ROUTES from 'constants/routes';
 import { render, screen, userEvent, within } from 'tests/test-utils';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
-import { mockUseAuthZGrantAll } from 'tests/authz-test-utils';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';

 import CreateEditRolePage from '../CreateEditRolePage';
 import { TooltipProvider } from '@signozhq/ui/tooltip';

-jest.mock('hooks/useAuthZ/useAuthZ');
+jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
 const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;

 beforeEach(() => {
--- a/frontend/src/container/RolesSettings/CreateEditRolePage/tests/PermissionEditor.test.tsx
+++ b/frontend/src/container/RolesSettings/CreateEditRolePage/tests/PermissionEditor.test.tsx
@@ -1,13 +1,13 @@
 import { Route, Switch } from 'react-router-dom';
 import ROUTES from 'constants/routes';
 import { render, screen, userEvent, waitFor, within } from 'tests/test-utils';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
-import { mockUseAuthZGrantAll } from 'tests/authz-test-utils';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';
 import { TooltipProvider } from '@signozhq/ui/tooltip';

 import CreateEditRolePage from '../CreateEditRolePage';

-jest.mock('hooks/useAuthZ/useAuthZ');
+jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
 const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;

 async function expandAllCards(): Promise<void> {
--- a/frontend/src/container/RolesSettings/CreateEditRolePage/components/ActionToggle.tsx
+++ b/frontend/src/container/RolesSettings/CreateEditRolePage/components/ActionToggle.tsx
@@ -9,7 +9,7 @@ import { getResourcePanel } from '../../permissions.config';
 import ItemInputSelector from './ItemInputSelector';

 import styles from './ActionToggle.module.scss';
-import { AuthZResource, AuthZVerb } from 'hooks/useAuthZ/types';
+import { AuthZResource, AuthZVerb } from 'lib/authz/hooks/useAuthZ/types';
 import { getActionLabel } from 'container/RolesSettings/ViewRolePage/components/permissionDisplay.utils';

 const SCOPE_LABELS: Record<PermissionScope, string> = {
--- a/frontend/src/container/RolesSettings/CreateEditRolePage/components/PermissionEditor.tsx
+++ b/frontend/src/container/RolesSettings/CreateEditRolePage/components/PermissionEditor.tsx
@@ -5,7 +5,7 @@ import { ConfirmDialog } from '@signozhq/ui/dialog';
 import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
 import { Typography } from '@signozhq/ui/typography';
 import { Skeleton } from 'antd';
-import type { AuthZResource, AuthZVerb } from 'hooks/useAuthZ/types';
+import type { AuthZResource, AuthZVerb } from 'lib/authz/hooks/useAuthZ/types';

 import { PermissionScope, ResourcePermissions } from '../../types';
 import type { EditorMode, JsonEditorRef } from './JsonEditor.types';
--- a/frontend/src/container/RolesSettings/CreateEditRolePage/components/ResourceCard.tsx
+++ b/frontend/src/container/RolesSettings/CreateEditRolePage/components/ResourceCard.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useState } from 'react';
 import { ChevronDown, ChevronRight } from '@signozhq/icons';
-import type { AuthZResource, AuthZVerb } from 'hooks/useAuthZ/types';
+import type { AuthZResource, AuthZVerb } from 'lib/authz/hooks/useAuthZ/types';

 import { Typography } from '@signozhq/ui/typography';

--- a/frontend/src/container/RolesSettings/CreateEditRolePage/components/jsonSchema.config.ts
+++ b/frontend/src/container/RolesSettings/CreateEditRolePage/components/jsonSchema.config.ts
@@ -1,5 +1,5 @@
 import type { Monaco } from '@monaco-editor/react';
-import permissionsType from 'hooks/useAuthZ/permissions.type';
+import permissionsType from 'lib/authz/hooks/useAuthZ/permissions.type';
 import transactionGroupSchema from 'schemas/generated/transactionGroups.schema.json';

 export const TRANSACTION_GROUP_SCHEMA = transactionGroupSchema;
--- a/frontend/src/container/RolesSettings/RolesComponents/RolesListingTable.tsx
+++ b/frontend/src/container/RolesSettings/RolesComponents/RolesListingTable.tsx
@@ -5,10 +5,10 @@ import { Pagination, Skeleton } from 'antd';
 import { useListRoles } from 'api/generated/services/role';
 import { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
-import PermissionDeniedFullPage from 'components/PermissionDeniedFullPage/PermissionDeniedFullPage';
+import PermissionDeniedFullPage from 'lib/authz/components/PermissionDeniedFullPage/PermissionDeniedFullPage';
 import ROUTES from 'constants/routes';
-import { RoleListPermission } from 'hooks/useAuthZ/permissions/role.permissions';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
+import { RoleListPermission } from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import { useRolesFeatureGate } from 'hooks/useRolesFeatureGate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import LineClampedText from 'periscope/components/LineClampedText/LineClampedText';
--- a/frontend/src/container/RolesSettings/RolesSettings.tsx
+++ b/frontend/src/container/RolesSettings/RolesSettings.tsx
@@ -3,9 +3,9 @@ import { useHistory } from 'react-router-dom';
 import { Plus } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
-import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import ROUTES from 'constants/routes';
-import { RoleCreatePermission } from 'hooks/useAuthZ/permissions/role.permissions';
+import { RoleCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
 import { useRolesFeatureGate } from 'hooks/useRolesFeatureGate';

 import RolesListingTable from './RolesComponents/RolesListingTable';
--- a/frontend/src/container/RolesSettings/ViewRolePage/ViewRolePage.tsx
+++ b/frontend/src/container/RolesSettings/ViewRolePage/ViewRolePage.tsx
@@ -10,7 +10,7 @@ import { Typography } from '@signozhq/ui/typography';
 import { Skeleton } from 'antd';
 import { useGetRole } from 'api/generated/services/role';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
-import PermissionDeniedFullPage from 'components/PermissionDeniedFullPage/PermissionDeniedFullPage';
+import PermissionDeniedFullPage from 'lib/authz/components/PermissionDeniedFullPage/PermissionDeniedFullPage';
 import { useDeleteRoleModal } from 'container/RolesSettings/DeleteRoleModal/useDeleteRoleModal';
 import { useRoleAuthZ } from 'container/RolesSettings/hooks/useRoleAuthZ';
 import { transformApiToRolePermissions } from 'container/RolesSettings/hooks/useRolePermissions';
--- a/frontend/src/container/RolesSettings/ViewRolePage/tests/ViewRolePage.authz.test.tsx
+++ b/frontend/src/container/RolesSettings/ViewRolePage/tests/ViewRolePage.authz.test.tsx
@@ -1,7 +1,7 @@
 import { TooltipProvider } from '@signozhq/ui/tooltip';
 import userEvent from '@testing-library/user-event';
 import * as roleApi from 'api/generated/services/role';
-import * as useAuthZModule from 'hooks/useAuthZ/useAuthZ';
+import * as useAuthZModule from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import {
 	customRoleResponse,
 	managedRoleResponse,
@@ -10,7 +10,7 @@ import {
 	mockUseAuthZDenyAll,
 	mockUseAuthZGrantAll,
 	mockUseAuthZGrantByPrefix,
-} from 'tests/authz-test-utils';
+} from 'lib/authz/utils/authz-test-utils';
 import { render, screen, waitFor } from 'tests/test-utils';

 import * as useRolePermissionsModule from '../../hooks/useRolePermissions';
--- a/frontend/src/container/RolesSettings/ViewRolePage/tests/ViewRolePage.edgeCases.test.tsx
+++ b/frontend/src/container/RolesSettings/ViewRolePage/tests/ViewRolePage.edgeCases.test.tsx
@@ -1,7 +1,7 @@
 import * as roleApi from 'api/generated/services/role';
-import * as useAuthZModule from 'hooks/useAuthZ/useAuthZ';
+import * as useAuthZModule from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import { customRoleResponse } from 'mocks-server/__mockdata__/roles';
-import { mockUseAuthZGrantAll } from 'tests/authz-test-utils';
+import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';
 import { render, screen } from 'tests/test-utils';

 import * as useRolePermissionsModule from '../../hooks/useRolePermissions';
--- a/frontend/src/container/RolesSettings/ViewRolePage/tests/ViewRolePage.error.test.tsx
+++ b/frontend/src/container/RolesSettings/ViewRolePage/tests/ViewRolePage.error.test.tsx
@@ -1,9 +1,9 @@
 import { Route, Switch } from 'react-router-dom';
 import userEvent from '@testing-library/user-event';
 import * as roleApi from 'api/generated/services/role';
-import * as useAuthZModule from 'hooks/useAuthZ/useAuthZ';
+import * as useAuthZModule from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import { customRoleResponse } from 'mocks-server/__mockdata__/roles';
-import { mockUseAuthZGrantAll } from 'tests/authz-test-utils';
+import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';
 import { render, screen } from 'tests/test-utils';

 import * as useRolePermissionsModule from '../../hooks/useRolePermissions';
--- a/frontend/src/container/RolesSettings/ViewRolePage/tests/ViewRolePage.featureGate.test.tsx
+++ b/frontend/src/container/RolesSettings/ViewRolePage/tests/ViewRolePage.featureGate.test.tsx
@@ -1,8 +1,11 @@
 import * as roleApi from 'api/generated/services/role';
 import { FeatureKeys } from 'constants/features';
-import * as useAuthZModule from 'hooks/useAuthZ/useAuthZ';
+import * as useAuthZModule from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import { defaultFeatureFlags, render, screen } from 'tests/test-utils';
-import { invalidLicense, mockUseAuthZGrantAll } from 'tests/authz-test-utils';
+import {
+	invalidLicense,
+	mockUseAuthZGrantAll,
+} from 'lib/authz/utils/authz-test-utils';

 import ViewRolePage from '../ViewRolePage';

--- a/frontend/src/container/RolesSettings/ViewRolePage/tests/ViewRolePage.loading.test.tsx
+++ b/frontend/src/container/RolesSettings/ViewRolePage/tests/ViewRolePage.loading.test.tsx
@@ -1,6 +1,6 @@
 import * as roleApi from 'api/generated/services/role';
-import * as useAuthZModule from 'hooks/useAuthZ/useAuthZ';
-import { mockUseAuthZGrantAll } from 'tests/authz-test-utils';
+import * as useAuthZModule from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';
 import { render } from 'tests/test-utils';

 import ViewRolePage from '../ViewRolePage';
--- a/frontend/src/container/RolesSettings/ViewRolePage/tests/ViewRolePage.permissionOverview.test.tsx
+++ b/frontend/src/container/RolesSettings/ViewRolePage/tests/ViewRolePage.permissionOverview.test.tsx
@@ -1,7 +1,7 @@
 import * as roleApi from 'api/generated/services/role';
-import * as useAuthZModule from 'hooks/useAuthZ/useAuthZ';
+import * as useAuthZModule from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import { customRoleResponse } from 'mocks-server/__mockdata__/roles';
-import { mockUseAuthZGrantAll } from 'tests/authz-test-utils';
+import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';
 import userEvent from '@testing-library/user-event';
 import { render, screen, within } from 'tests/test-utils';

--- a/frontend/src/container/RolesSettings/ViewRolePage/tests/testUtils.ts
+++ b/frontend/src/container/RolesSettings/ViewRolePage/tests/testUtils.ts
@@ -3,12 +3,12 @@ import {
 	CoretypesTypeDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import * as roleApi from 'api/generated/services/role';
-import * as useAuthZModule from 'hooks/useAuthZ/useAuthZ';
+import * as useAuthZModule from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import {
 	customRoleResponse,
 	managedRoleResponse,
 } from 'mocks-server/__mockdata__/roles';
-import { mockUseAuthZGrantAll } from 'tests/authz-test-utils';
+import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';

 import * as useRolePermissionsModule from '../../hooks/useRolePermissions';

--- a/frontend/src/container/RolesSettings/tests/RolesSettings.authz.test.tsx
+++ b/frontend/src/container/RolesSettings/tests/RolesSettings.authz.test.tsx
@@ -11,12 +11,15 @@ import {
 	userEvent,
 } from 'tests/test-utils';
 import { FeatureKeys } from 'constants/features';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
-import { invalidLicense, mockUseAuthZGrantAll } from 'tests/authz-test-utils';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import {
+	invalidLicense,
+	mockUseAuthZGrantAll,
+} from 'lib/authz/utils/authz-test-utils';

 import RolesSettings from '../RolesSettings';

-jest.mock('hooks/useAuthZ/useAuthZ');
+jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
 const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;

 const rolesApiURL = 'http://localhost/api/v1/roles';
--- a/frontend/src/container/RolesSettings/hooks/tests/useRolePermissions.test.ts
+++ b/frontend/src/container/RolesSettings/hooks/tests/useRolePermissions.test.ts
@@ -4,7 +4,7 @@ import {
 	CoretypesKindDTO,
 	CoretypesTypeDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import type { AuthZResource, AuthZVerb } from 'hooks/useAuthZ/types';
+import type { AuthZResource, AuthZVerb } from 'lib/authz/hooks/useAuthZ/types';

 import {
 	ActionConfig,
--- a/frontend/src/container/RolesSettings/hooks/useRoleAuthZ.ts
+++ b/frontend/src/container/RolesSettings/hooks/useRoleAuthZ.ts
@@ -4,9 +4,12 @@ import {
 	buildRoleReadPermission,
 	buildRoleUpdatePermission,
 	RoleCreatePermission,
-} from 'hooks/useAuthZ/permissions/role.permissions';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
-import { ParsedPermissionObject, parsePermission } from 'hooks/useAuthZ/utils';
+} from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import {
+	ParsedPermissionObject,
+	parsePermission,
+} from 'lib/authz/hooks/useAuthZ/utils';

 interface UseRoleAuthZResult {
 	readRolePermission: ParsedPermissionObject;
--- a/frontend/src/container/RolesSettings/hooks/useRolePermissions.ts
+++ b/frontend/src/container/RolesSettings/hooks/useRolePermissions.ts
@@ -18,7 +18,7 @@ import {
 	useGetRole,
 	useUpdateRole,
 } from 'api/generated/services/role';
-import type { AuthZResource, AuthZVerb } from 'hooks/useAuthZ/types';
+import type { AuthZResource, AuthZVerb } from 'lib/authz/hooks/useAuthZ/types';

 import {
 	getResourcePanel,
--- a/frontend/src/container/RolesSettings/permissions.config.ts
+++ b/frontend/src/container/RolesSettings/permissions.config.ts
@@ -1,12 +1,12 @@
 import { Bot, Key, Shield } from '@signozhq/icons';

-import permissionsType from 'hooks/useAuthZ/permissions.type';
+import permissionsType from 'lib/authz/hooks/useAuthZ/permissions.type';
 import {
 	AuthZResource,
 	AuthZVerb,
 	OBJECT_SCOPED_VERBS,
 	ObjectScopedVerb,
-} from 'hooks/useAuthZ/types';
+} from 'lib/authz/hooks/useAuthZ/types';
 import { CoretypesTypeDTO } from 'api/generated/services/sigNoz.schemas';

 /** Shared shape of the icon components exported by `@signozhq/icons`. */
@@ -84,7 +84,7 @@ export function getResourceVerbs(
 	}

 	// Role resource cannot have assignee verb
-	// TODO(H4ad): Remove this once we get rid of frontend/src/hooks/useAuthZ/legacy.ts
+	// TODO(H4ad): Remove this once we get rid of frontend/lib/authz/hooks/useAuthZ/legacy.ts
 	if (resource === 'role') {
 		return match.allowedVerbs.filter((verb) => verb !== 'assignee');
 	}
--- a/frontend/src/container/RolesSettings/types.ts
+++ b/frontend/src/container/RolesSettings/types.ts
@@ -1,4 +1,4 @@
-import type { AuthZResource, AuthZVerb } from 'hooks/useAuthZ/types';
+import type { AuthZResource, AuthZVerb } from 'lib/authz/hooks/useAuthZ/types';
 import { CoretypesTypeDTO } from 'api/generated/services/sigNoz.schemas';

 export enum PermissionScope {
--- a/frontend/src/container/ServiceAccountsSettings/ServiceAccountsSettings.authz.test.tsx
+++ b/frontend/src/container/ServiceAccountsSettings/ServiceAccountsSettings.authz.test.tsx
@@ -3,7 +3,10 @@ import { server } from 'mocks-server/server';
 import { rest } from 'msw';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import { render, screen, waitFor } from 'tests/test-utils';
-import { AUTHZ_CHECK_URL, authzMockResponse } from 'tests/authz-test-utils';
+import {
+	AUTHZ_CHECK_URL,
+	authzMockResponse,
+} from 'lib/authz/utils/authz-test-utils';
 import ServiceAccountsSettings from './ServiceAccountsSettings';

 const SA_LIST_URL = 'http://localhost/api/v1/service_accounts';
--- a/frontend/src/container/ServiceAccountsSettings/ServiceAccountsSettings.tsx
+++ b/frontend/src/container/ServiceAccountsSettings/ServiceAccountsSettings.tsx
@@ -4,10 +4,10 @@ import { Button } from '@signozhq/ui/button';
 import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
 import { Input } from '@signozhq/ui/input';
 import { useListServiceAccounts } from 'api/generated/services/serviceaccount';
-import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import CreateServiceAccountModal from 'components/CreateServiceAccountModal/CreateServiceAccountModal';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
-import PermissionDeniedFullPage from 'components/PermissionDeniedFullPage/PermissionDeniedFullPage';
+import PermissionDeniedFullPage from 'lib/authz/components/PermissionDeniedFullPage/PermissionDeniedFullPage';
 import Spinner from 'components/Spinner';
 import ServiceAccountDrawer from 'components/ServiceAccountDrawer/ServiceAccountDrawer';
 import ServiceAccountsTable, {
@@ -16,8 +16,8 @@ import ServiceAccountsTable, {
 import {
 	SACreatePermission,
 	SAListPermission,
-} from 'hooks/useAuthZ/permissions/service-account.permissions';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
+} from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import {
 	parseAsBoolean,
 	parseAsInteger,
--- a/frontend/src/container/ServiceAccountsSettings/tests/ServiceAccountsSettings.authz.integration.test.tsx
+++ b/frontend/src/container/ServiceAccountsSettings/tests/ServiceAccountsSettings.authz.integration.test.tsx
@@ -4,7 +4,7 @@ import { listRolesSuccessResponse } from 'mocks-server/__mockdata__/roles';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
-import { setupAuthzAdmin } from 'tests/authz-test-utils';
+import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';

 import ServiceAccountsSettings from '../ServiceAccountsSettings';

--- a/frontend/src/container/TimeSeriesView/TimeSeriesView.tsx
+++ b/frontend/src/container/TimeSeriesView/TimeSeriesView.tsx
@@ -30,6 +30,7 @@ import useUrlQuery from 'hooks/useUrlQuery';
 import GetMinMax from 'lib/getMinMax';
 import getTimeString from 'lib/getTimeString';
 import history from 'lib/history';
+import { stackSeries } from 'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils';
 import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
 import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
 import { isEmpty } from 'lodash-es';
@@ -57,6 +58,7 @@ function TimeSeriesView({
 	dataSource,
 	setWarning,
 	panelType = PANEL_TYPES.TIME_SERIES,
+	stackBarChart = false,
 }: TimeSeriesViewProps): JSX.Element {
 	const graphRef = useRef<HTMLDivElement>(null);

@@ -65,11 +67,23 @@ function TimeSeriesView({
 	const location = useLocation();
 	const { currentQuery } = useQueryBuilder();

-	const chartData = useMemo(
+	const rawChartData = useMemo(
 		() => getUPlotChartData(data?.payload),
 		[data?.payload],
 	);

+	const { chartData, stackedBands } = useMemo(() => {
+		if (!stackBarChart || !rawChartData || rawChartData.length < 2) {
+			return { chartData: rawChartData, stackedBands: null };
+		}
+		const noSeriesHidden = (): boolean => false;
+		const { data: stacked, bands } = stackSeries(
+			rawChartData as uPlot.AlignedData,
+			noSeriesHidden,
+		);
+		return { chartData: stacked, stackedBands: bands };
+	}, [rawChartData, stackBarChart]);
+
 	useEffect(() => {
 		if (data?.payload) {
 			setWarning?.(data?.warning);
@@ -189,7 +203,7 @@ function TimeSeriesView({

 	const { timezone } = useTimezone();

-	const chartOptions = getUPlotChartOptions({
+	const baseChartOptions = getUPlotChartOptions({
 		id: 'time-series-explorer',
 		onDragSelect,
 		yAxisUnit: yAxisUnit || '',
@@ -222,6 +236,14 @@ function TimeSeriesView({
 		},
 	});

+	const chartOptions = useMemo(
+		() =>
+			stackedBands
+				? { ...baseChartOptions, bands: stackedBands }
+				: baseChartOptions,
+		[baseChartOptions, stackedBands],
+	);
+
 	return (
 		<div className="time-series-view">
 			{isError && error && <ErrorInPlace error={error as APIError} />}
@@ -282,6 +304,7 @@ interface TimeSeriesViewProps {
 	dataSource: DataSource;
 	setWarning?: Dispatch<SetStateAction<Warning | undefined>>;
 	panelType?: PANEL_TYPES;
+	stackBarChart?: boolean;
 }

 TimeSeriesView.defaultProps = {
@@ -290,6 +313,7 @@ TimeSeriesView.defaultProps = {
 	error: undefined,
 	setWarning: undefined,
 	panelType: PANEL_TYPES.TIME_SERIES,
+	stackBarChart: false,
 };

 export default TimeSeriesView;
--- a/frontend/src/lib/authz/components/AuthZTooltip/AuthZTooltip.authz.test.tsx
+++ b/frontend/src/lib/authz/components/AuthZTooltip/AuthZTooltip.authz.test.tsx
@@ -1,11 +1,14 @@
 import { ReactElement } from 'react';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-import { buildPermission } from 'hooks/useAuthZ/utils';
-import type { AuthZObject, BrandedPermission } from 'hooks/useAuthZ/types';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
+import { buildPermission } from 'lib/authz/hooks/useAuthZ/utils';
+import type {
+	AuthZObject,
+	BrandedPermission,
+} from 'lib/authz/hooks/useAuthZ/types';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import AuthZTooltip from './AuthZTooltip';

-jest.mock('hooks/useAuthZ/useAuthZ');
+jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
 const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;

 const noPermissions = {
--- a/frontend/src/lib/authz/components/AuthZTooltip/AuthZTooltip.module.scss
+++ b/frontend/src/lib/authz/components/AuthZTooltip/AuthZTooltip.module.scss
--- a/frontend/src/lib/authz/components/AuthZTooltip/AuthZTooltip.tsx
+++ b/frontend/src/lib/authz/components/AuthZTooltip/AuthZTooltip.tsx
@@ -5,9 +5,9 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from '@signozhq/ui/tooltip';
-import type { BrandedPermission } from 'hooks/useAuthZ/types';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
-import { formatPermission } from 'hooks/useAuthZ/utils';
+import type { BrandedPermission } from 'lib/authz/hooks/useAuthZ/types';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import { formatPermission } from 'lib/authz/hooks/useAuthZ/utils';
 import { useAppContext } from 'providers/App/App';
 import styles from './AuthZTooltip.module.scss';

--- a/frontend/src/lib/authz/components/GuardAuthZ/GuardAuthZ.authz.test.tsx
+++ b/frontend/src/lib/authz/components/GuardAuthZ/GuardAuthZ.authz.test.tsx
@@ -1,10 +1,13 @@
 import { ReactElement } from 'react';
-import { BrandedPermission } from 'hooks/useAuthZ/types';
-import { buildPermission } from 'hooks/useAuthZ/utils';
+import { BrandedPermission } from 'lib/authz/hooks/useAuthZ/types';
+import { buildPermission } from 'lib/authz/hooks/useAuthZ/utils';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
 import { render, screen, waitFor } from 'tests/test-utils';
-import { AUTHZ_CHECK_URL, authzMockResponse } from 'tests/authz-test-utils';
+import {
+	AUTHZ_CHECK_URL,
+	authzMockResponse,
+} from 'lib/authz/utils/authz-test-utils';

 import { GuardAuthZ } from './GuardAuthZ';

--- a/frontend/src/lib/authz/components/GuardAuthZ/GuardAuthZ.tsx
+++ b/frontend/src/lib/authz/components/GuardAuthZ/GuardAuthZ.tsx
@@ -3,9 +3,9 @@ import {
 	AuthZObject,
 	AuthZRelation,
 	BrandedPermission,
-} from 'hooks/useAuthZ/types';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
-import { buildPermission } from 'hooks/useAuthZ/utils';
+} from 'lib/authz/hooks/useAuthZ/types';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import { buildPermission } from 'lib/authz/hooks/useAuthZ/utils';

 export type GuardAuthZProps<R extends AuthZRelation> = {
 	children: ReactElement;
--- a/frontend/src/lib/authz/components/PermissionDeniedCallout/PermissionDeniedCallout.module.scss
+++ b/frontend/src/lib/authz/components/PermissionDeniedCallout/PermissionDeniedCallout.module.scss
--- a/frontend/src/lib/authz/components/PermissionDeniedCallout/PermissionDeniedCallout.test.tsx
+++ b/frontend/src/lib/authz/components/PermissionDeniedCallout/PermissionDeniedCallout.test.tsx
--- a/frontend/src/lib/authz/components/PermissionDeniedCallout/PermissionDeniedCallout.tsx
+++ b/frontend/src/lib/authz/components/PermissionDeniedCallout/PermissionDeniedCallout.tsx
--- a/frontend/src/lib/authz/components/PermissionDeniedFullPage/PermissionDeniedFullPage.module.scss
+++ b/frontend/src/lib/authz/components/PermissionDeniedFullPage/PermissionDeniedFullPage.module.scss
--- a/frontend/src/lib/authz/components/PermissionDeniedFullPage/PermissionDeniedFullPage.test.tsx
+++ b/frontend/src/lib/authz/components/PermissionDeniedFullPage/PermissionDeniedFullPage.test.tsx
--- a/frontend/src/lib/authz/components/PermissionDeniedFullPage/PermissionDeniedFullPage.tsx
+++ b/frontend/src/lib/authz/components/PermissionDeniedFullPage/PermissionDeniedFullPage.tsx
--- a/frontend/src/lib/authz/components/createGuardedRoute/createGuardedRoute.authz.test.tsx
+++ b/frontend/src/lib/authz/components/createGuardedRoute/createGuardedRoute.authz.test.tsx
@@ -7,7 +7,10 @@ import type {
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
 import { render, screen, waitFor } from 'tests/test-utils';
-import { AUTHZ_CHECK_URL, authzMockResponse } from 'tests/authz-test-utils';
+import {
+	AUTHZ_CHECK_URL,
+	authzMockResponse,
+} from 'lib/authz/utils/authz-test-utils';

 import { createGuardedRoute } from './createGuardedRoute';

--- a/frontend/src/lib/authz/components/createGuardedRoute/createGuardedRoute.styles.scss
+++ b/frontend/src/lib/authz/components/createGuardedRoute/createGuardedRoute.styles.scss
--- a/frontend/src/lib/authz/components/createGuardedRoute/createGuardedRoute.tsx
+++ b/frontend/src/lib/authz/components/createGuardedRoute/createGuardedRoute.tsx
@@ -4,13 +4,13 @@ import {
 	AuthZObject,
 	AuthZRelation,
 	BrandedPermission,
-} from 'hooks/useAuthZ/types';
-import { formatPermission } from 'hooks/useAuthZ/utils';
+} from 'lib/authz/hooks/useAuthZ/types';
+import { formatPermission } from 'lib/authz/hooks/useAuthZ/utils';
 import { useAppContext } from 'providers/App/App';

-import noDataUrl from '@/assets/Icons/no-data.svg';
+import noDataUrl from 'assets/Icons/no-data.svg';

-import AppLoading from '../AppLoading/AppLoading';
+import AppLoading from '../../../../components/AppLoading/AppLoading';
 import { GuardAuthZ } from '../GuardAuthZ/GuardAuthZ';

 import './createGuardedRoute.styles.scss';
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Vinicius Lourenço	94a5e568fd	refactor(web-settings): move more settings to runtime & disabled by default (#11917 ) Some checks are pending build-staging / js-build (push) Blocked by required conditions Details build-staging / prepare (push) Waiting to run Details build-staging / go-build (push) Blocked by required conditions Details build-staging / staging (push) Blocked by required conditions Details Release Drafter / update_release_draft (push) Waiting to run Details Co-authored-by: Vikrant Gupta <vikrant@signoz.io>	2026-07-03 11:56:15 +00:00
Vinicius Lourenço	25cd3fc705	chore(authz): move components/hooks to lib (#11932 )	2026-07-03 11:52:56 +00:00
Vinicius Lourenço	5c3fdb64ed	feat(entity-metrics): use new uplot API for charts (#11954 )	2026-07-03 11:37:35 +00:00
Vikrant Gupta	bac68a6707	fix(types): guarantee both letter cases in generated factor passwords (#11961 ) password.Generate draws letters from both cases without guaranteeing either, so roughly 1 in 1000 generated passwords contained no lowercase letter and failed IsPasswordValid, panicking MustGenerateFactorPassword. The existing "Z" suffix only covered the uppercase requirement; append "zZ" to guarantee both cases while keeping the generated part mixed-case for entropy.	2026-07-03 10:20:41 +00:00
Naman Verma	766a05e24b	chore: fix issues found in bug bash (#11949 ) * fix: return list of all tags sorted alphabetically * chore: return reserved keys in list api response for easy filtering * fix: add length limit to dashboard display name * test: check error message as well * chore: increase the length limits * chore: add copy suffix on cloning dashboards * fix: increase limit to 64 for dashboard view name * fix: send user friendly err message on length check fail * fix: add path to error message * fix: include path in main error message directly * fix: move regex out so that it only compiles once per init * fix: format integration test properly	2026-07-03 08:10:37 +00:00
Ashwin Bhatkal	1a84503f4b	feat(dashboards): add auto-refresh to public dashboards (#11938 ) * feat(dashboards): add auto-refresh to public dashboards Add a self-contained auto-refresh interval selector to the public dashboard header, shown alongside the time picker when the publisher enabled the time range. On each tick it recomputes the rolling window from the selected relative range and updates local state, so panels refetch with an advanced window. Paused/disabled for fixed 'custom' ranges. Kept independent of Redux global time (which the public viewer doesn't use); reuses the shared refreshIntervalOptions. * refactor(dashboards): dedup public auto-refresh tick, use nano constant, userEvent Route the auto-refresh interval through handleTimeChange instead of duplicating the GetMinMax/setSelectedTimeRange logic, replace the 1e9 magic number with NANO_SECOND_MULTIPLIER, and switch the AutoRefresh test to userEvent.	2026-07-03 06:44:35 +00:00
Ashwin Bhatkal	9454427b47	feat(dashboard-v2): JSON drawer redaction, JSON action cleanup & breadcrumb SPA nav (#11952 ) * feat(dashboard-v2): redact JSON editor to tags/spec, preserve other fields on save The dashboard JSON drawer now exposes only the user-editable `tags` and `spec`; server-owned/derived keys (id, orgId, name, timestamps, locked, schemaVersion, image, …) are redacted from the view, copy, and export. On save, the edited draft is overlaid on the current dashboard so those redacted keys are preserved. * feat(dashboard-v2): drop redundant JSON actions, rename Edit-as-JSON to JSON Remove the Actions-menu Data group (Export JSON / Copy as JSON) — these are redundant with the JSON drawer's own Copy/Download. Rename the 'Edit as JSON' toolbar button to 'JSON' (keeping the Braces icon). * feat(dashboard-v2): client-side nav on the Dashboard breadcrumb Intercept a plain click on the 'Dashboard' breadcrumb for instant SPA navigation to the list page instead of a full-page reload; the href is kept so middle/ modifier-click still opens in a new tab.	2026-07-03 06:33:15 +00:00
Ashwin Bhatkal	124d76068c	fix(dashboard-v2): reconcile optimistic patches from the PATCH response (#11947 ) Panel delete/move flickered A -> B -> A -> B: onSettled invalidateQueries fired an immediate GET that read pre-mutation (stale) data before settling. patchDashboardV2 already returns the updated dashboard, so reconcile the cache from that response (onSuccess) instead of refetching. Sequence is now A -> B -> B; rollback on error is unchanged.	2026-07-03 06:33:06 +00:00
Vinicius Lourenço	704b8bf917	chore(frontend-readme): clean the readme for frontend (#11955 ) Some checks failed build-staging / prepare (push) Has been cancelled Details build-staging / js-build (push) Has been cancelled Details build-staging / go-build (push) Has been cancelled Details build-staging / staging (push) Has been cancelled Details Release Drafter / update_release_draft (push) Has been cancelled Details	2026-07-02 21:18:44 +00:00
Vinicius Lourenço	3e6339019e	fix(meter-explorer): not persisting query after page refresh (#11948 ) Some checks failed build-staging / prepare (push) Has been cancelled Details build-staging / js-build (push) Has been cancelled Details build-staging / go-build (push) Has been cancelled Details build-staging / staging (push) Has been cancelled Details Release Drafter / update_release_draft (push) Has been cancelled Details	2026-07-02 14:57:44 +00:00
Vinicius Lourenço	372d304a6f	feat(meter): migrate to new uplot API & use bar stacked chart (#11902 )	2026-07-02 12:23:30 +00:00
Naman Verma	dbb4eb9574	chore: validate layout size and positioning in backend (#11921 ) Some checks failed build-staging / prepare (push) Has been cancelled Details build-staging / js-build (push) Has been cancelled Details build-staging / go-build (push) Has been cancelled Details build-staging / staging (push) Has been cancelled Details Release Drafter / update_release_draft (push) Has been cancelled Details * chore: validate layout size and positioning in backend * test: add integratino test for layout validation * test: use assert instead of require for non blocking check * test: use assert instead of require for non blocking check * fix: move require to assert for actual test checks	2026-07-02 11:07:58 +00:00
Abhi kumar	c36226050e	feat(dashboards-v2): substitute dashboard variables when creating an alert from a panel (#11929 ) Wire the `/substitute_vars` round-trip into the panel create-alert flow so `$var` / dynamic variable references resolve to the values selected in the variable bar before the alert is seeded — V1 parity with `useCreateAlerts`, which the previous V2 path skipped (it shipped variable refs verbatim). When the dashboard has resolved variables, `useCreateAlertFromPanel` builds a V5 query-range request (panel queries + resolved variables) and POSTs it through the generated `useReplaceVariables` hook; on success the substituted envelopes are translated to the V1 `Query` the alert page reads. With no variables to substitute the round-trip is a no-op, so we keep seeding synchronously and the new tab stays tied to the click. - persesQueryAdapters: extract `envelopesToQuery` from `fromPerses` (the substitute response hands back envelopes, not panel-query wrappers) - buildCreateAlertUrl: export `buildAlertUrl` + `readPanelUnit` so the sync and substituted paths share URL assembly	2026-07-02 08:43:48 +00:00
Ashwin Bhatkal	a72484f12c	feat(dashboard-v2): optimistic updates for dashboard spec mutations (#11936 ) * feat(dashboard-v2): add lenient RFC-6902 JSON-Patch applier Add applyJsonPatch, a pure applier for the add/replace/remove ops our patchOps builders emit. Deep-clones and returns a new document (never mutates input), and is deliberately lenient like the backend apply (remove/replace on a missing path is a no-op, add creates missing object parents). This lets a dashboard edit be reflected in the react-query cache optimistically, with the mutation's settle refetch as the reconcile safety net. * feat(dashboard-v2): add useOptimisticPatch central mutation hook A single react-query mutation over patchDashboardV2 that applies the ops to the cached dashboard on onMutate (via applyJsonPatch, patching the envelope's .data), snapshots for rollback on onError, and invalidates on settle to reconcile. Reads dashboardId from the edit-context store (with an optional override for the panel editor, which receives its id as a prop) and exposes error; rethrows so call sites keep their own error handling. * feat(dashboard-v2): route section/layout edits through optimistic patch Migrate the section and layout mutations (rename, add, delete, reorder, resize/ move persist, first-section migration) off the 'await patchDashboardV2(...); refetch()' pattern onto useOptimisticPatch, so section edits render instantly and reconcile in the background. The explicit refetch is dropped (onSettled invalidates) and each hook keeps its own toast/error handling. * feat(dashboard-v2): route panel add/move/delete through optimistic patch Migrate the grid-item panel mutations (delete, move-between-sections, clone) onto useOptimisticPatch so they render instantly and reconcile on settle. useClonePanel keeps its toast.promise UX over the patch promise. Update the clone test to assert against the ops passed to patchAsync. * feat(dashboard-v2): route panel editor save through optimistic patch Migrate usePanelEditorSave off usePatchDashboardV2 + invalidateQueries onto the central useOptimisticPatch (passing the editor's explicit dashboardId). The isNew branch still reads cached layouts to resolve the target section. * feat(dashboard-v2): route settings/toolbar edits through optimistic patch Migrate the remaining patchDashboardV2 spec edits — variable-definition save, Overview metadata (title/description/image/tags), and toolbar rename — onto useOptimisticPatch. The toolbar keeps its refetch prop for the lock/unlock toggle (a non-patch API), and the edit-context refetch stays for the JSON editor's full-document save; both are outside this PR's patch-op scope. * chore(dashboard-v2): ban direct patchDashboardV2 via oxlint Add a no-restricted-imports rule forbidding patchDashboardV2 / usePatchDashboardV2 from api/generated/services/dashboard, directing callers to useOptimisticPatch(). patchAsync so every spec edit goes through the optimistic cache path. The hook itself (the one sanctioned caller) and its test carry a scoped inline exception.	2026-07-02 07:28:50 +00:00
Ashwin Bhatkal	71eabac1e7	fix(dashboards): stop query cache collisions on public dashboards (#11935 ) The public payload redacts each widget's query (filters/limit/orderBy stripped), so panels differing only by their filter arrive with identical query bodies. The react-query key was built from that query body, so those panels hashed to the same key and were deduped into one request — its data filled every colliding panel while other indices were never fetched. Key each panel on what determines its response — widget id + index + time — instead of the redacted query body. Fixes SigNoz/engineering-pod#5503	2026-07-02 06:07:21 +00:00
Abhi kumar	fea3be7c51	feat(dashboards-v2): panel editor — threshold carry, span-gaps fixes, metric unit defaults, live thresholds and pie multi-column fix (#11918 ) Some checks failed build-staging / prepare (push) Has been cancelled Details build-staging / js-build (push) Has been cancelled Details build-staging / go-build (push) Has been cancelled Details build-staging / staging (push) Has been cancelled Details Release Drafter / update_release_draft (push) Has been cancelled Details * feat(dashboards-v2): carry thresholds across a panel visualization-type switch When switching a panel's visualization kind mid-edit, thresholds now carry over if the target kind supports them, remapped to the target's variant (label/comparison/table) — keeping the shared core (color, value, unit) and seeding any variant-required fields (operator, format, column) with sensible defaults so the carried threshold stays functional. Kinds without a Thresholds section drop them. The carry is a first-visit seed; reversible round-trips still restore from the per-kind session cache. * fix(dashboards-v2): span-gaps Disconnect Values reactivity + fillOnlyBelow flag Fixes three issues in the chart-appearance span-gaps control and makes the fillOnlyBelow flag authoritative end-to-end: - Threshold default now seeds from the live query step interval (which arrives async) instead of being captured once at mount, so it no longer falls back to 1m. - The threshold input no longer re-commits an unchanged value on blur, so clicking "Never" reliably switches mode (the blur/toggle race is gone). - Invalid input is validated live as the user types, surfacing the error immediately rather than only on blur. - Selecting Threshold writes fillOnlyBelow: true (+ duration); Never writes fillOnlyBelow: false and drops the duration. The selected mode is derived from fillOnlyBelow, and the renderer honors it (explicit false spans every gap), with back-compat for panels saved before the flag existed. * feat(dashboards-v2): auto-seed panel unit from the metric with a mismatch warning V1 parity for the formatting unit selector: when the selected metric carries a unit, a new panel auto-initializes its unit from it, and choosing a different unit shows the "Unit mismatch" warning. Reuses the shared useGetYAxisUnit hook and YAxisUnitSelector read-only. The resolution + auto-seed runs at the editor level (not inside the collapsible FormattingSection) so it applies even while that section is closed; the resolved metric unit is threaded down via context purely to drive the warning. Seeding is gated to new panels — editing never overwrites a saved unit. * feat(dashboards-v2): reactive threshold editing with live preview Threshold edits now stream to the spec as the user types, so the panel preview reflects them before Save. The per-row draft is mirrored into the spec via an onLiveChange effect in useThresholdDraft; because edits reach the spec live, ThresholdsSection snapshots the saved value on edit entry and restores it on Discard. Save keeps the value, Discard rolls back, and add-then-discard still removes the row. * fix(dashboard): apply pie multi-column scalar fix to v2 panels Mirror the V1 pie fix in the V2 PieChartPanel. preparePieData already reads the scalar table (via prepareScalarTables) but used columns.find(isValueColumn), so only the first value column was plotted — a ClickHouse `count() AS col1, sum() AS col2` collapsed to a single slice. It now emits one slice per (row × value column); with multiple value columns the column name distinguishes the slices (prefixed by the group when grouped). Single-value and grouped panels are unchanged — a single value column iterates exactly once. Per the V1/V2 split, this duplicates the behaviour into V2 land rather than sharing the V1 helper. * chore: pr review fixes	2026-07-02 00:45:26 +00:00
Srikanth Chekuri	66f03d5912	fix(metrics): use local table for fingerprint ctes (#11931 ) Some checks failed build-staging / prepare (push) Has been cancelled Details build-staging / js-build (push) Has been cancelled Details build-staging / go-build (push) Has been cancelled Details build-staging / staging (push) Has been cancelled Details Release Drafter / update_release_draft (push) Has been cancelled Details * fix(metrics): use local table for fingerprint ctes * chore: remove queries file * chore: update reduced_test.go	2026-07-01 16:14:11 +00:00
Pandey	cf69a05f74	fix(dashboards): expose Source as a string enum in the OpenAPI schema (#11930 ) The reflector saw Source's unexported valuer.String field and emitted type: object. Add a JSONSchema exposer that pins type: string, deriving the enum values from the existing Enum() method so the list of sources lives in exactly one place.	2026-07-01 15:46:24 +00:00