feat: feedback fix

.devenv/docker/clickhouse/compose.yaml

@@ -1,22 +1,4 @@
 services:
-  init-clickhouse:
-    image: clickhouse/clickhouse-server:25.5.6
-    container_name: init-clickhouse
-    command:
-      - bash
-      - -c
-      - |
-        version="v0.0.1"
-        node_os=$$(uname -s | tr '[:upper:]' '[:lower:]')
-        node_arch=$$(uname -m | sed s/aarch64/arm64/ | sed s/x86_64/amd64/)
-        echo "Fetching histogram-binary for $${node_os}/$${node_arch}"
-        cd /tmp
-        wget -O histogram-quantile.tar.gz "https://github.com/SigNoz/signoz/releases/download/histogram-quantile%2F$${version}/histogram-quantile_$${node_os}_$${node_arch}.tar.gz"
-        tar -xvzf histogram-quantile.tar.gz
-        mv histogram-quantile /var/lib/clickhouse/user_scripts/histogramQuantile
-    restart: on-failure
-    volumes:
-      - ${PWD}/fs/tmp/var/lib/clickhouse/user_scripts/:/var/lib/clickhouse/user_scripts/
   clickhouse:
     image: clickhouse/clickhouse-server:25.5.6
     container_name: clickhouse
@@ -25,7 +7,6 @@ services:
       - ${PWD}/fs/etc/clickhouse-server/users.d/users.xml:/etc/clickhouse-server/users.d/users.xml
       - ${PWD}/fs/tmp/var/lib/clickhouse/:/var/lib/clickhouse/
       - ${PWD}/fs/tmp/var/lib/clickhouse/user_scripts/:/var/lib/clickhouse/user_scripts/
-      - ${PWD}/../../../deploy/common/clickhouse/custom-function.xml:/etc/clickhouse-server/custom-function.xml
     ports:
       - '127.0.0.1:8123:8123'
       - '127.0.0.1:9000:9000'
@@ -41,10 +22,7 @@ services:
       timeout: 5s
       retries: 3
     depends_on:
-      init-clickhouse:
-        condition: service_completed_successfully
-      zookeeper:
-        condition: service_healthy
+      - zookeeper
     environment:
       - CLICKHOUSE_SKIP_USER_SETUP=1
   zookeeper:

.devenv/docker/clickhouse/fs/etc/clickhouse-server/config.d/config.xml

@@ -44,6 +44,4 @@
         <shard>01</shard>
         <replica>01</replica>
     </macros>
-    <user_defined_executable_functions_config>*function.xml</user_defined_executable_functions_config>
-    <user_scripts_path>/var/lib/clickhouse/user_scripts/</user_scripts_path>
 </clickhouse>

cmd/enterprise/Dockerfile.integration

@@ -1,4 +1,4 @@
-FROM golang:1.25-bookworm
+FROM golang:1.24-bullseye
 
 ARG OS="linux"
 ARG TARGETARCH

cmd/enterprise/Dockerfile.with-web.integration

@@ -6,7 +6,7 @@ ENV NODE_OPTIONS=--max-old-space-size=8192
 RUN CI=1 yarn install
 RUN CI=1 yarn build
 
-FROM golang:1.25-bookworm
+FROM golang:1.24-bullseye
 
 ARG OS="linux"
 ARG TARGETARCH

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

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

deploy/docker-swarm/docker-compose.yaml

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

deploy/docker/docker-compose.ha.yaml

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

deploy/docker/docker-compose.yaml

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

docs/contributing/development.md

@@ -100,7 +100,7 @@ This command:
 
 3. Create a `.env` file in this directory:
    ```env
-   VITE_FRONTEND_API_ENDPOINT=http://localhost:8080
+   FRONTEND_API_ENDPOINT=http://localhost:8080
    ```
 
 4. Start the development server:

docs/contributing/onboarding.md

@@ -273,7 +273,6 @@ Options can be simple (direct link) or nested (with another question):
 - Place logo files in `public/Logos/`
 - Use SVG format
 - Reference as `"/Logos/your-logo.svg"`
-- **Optimize new SVGs**: Run any newly downloaded SVGs through an optimizer like [SVGOMG (svgo)](https://svgomg.net/) or use `npx svgo public/Logos/your-logo.svg` to minimise their size before committing.
 
 ### 4. Links
 

frontend/example.env

@@ -1,6 +1,6 @@
 NODE_ENV="development"
 BUNDLE_ANALYSER="true"
-VITE_FRONTEND_API_ENDPOINT="http://localhost:8080"
+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"

frontend/jest.config.ts

@@ -39,7 +39,7 @@ const config: Config.InitialOptions = {
 		'^.+\\.(js|jsx)$': 'babel-jest',
 	},
 	transformIgnorePatterns: [
-		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@signozhq/design-tokens|@signozhq/table|@signozhq/calendar|@signozhq/input|@signozhq/popover|@signozhq/button|@signozhq/sonner|@signozhq/*|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs)/)',
+		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@signozhq/design-tokens|@signozhq/table|@signozhq/calendar|@signozhq/input|@signozhq/popover|@signozhq/button|@signozhq/sonner|@signozhq/*|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana)/)',
 	],
 	setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],

frontend/public/Logos/deno.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 24 24"><title>Deno</title><path d="M1.105 18.02A11.9 11.9 0 0 1 0 12.985q0-.698.078-1.376a12 12 0 0 1 .231-1.34A12 12 0 0 1 4.025 4.02a12 12 0 0 1 5.46-2.771 12 12 0 0 1 3.428-.23c1.452.112 2.825.477 4.077 1.05a12 12 0 0 1 2.78 1.774 12.02 12.02 0 0 1 4.053 7.078A12 12 0 0 1 24 12.985q0 .454-.036.914a12 12 0 0 1-.728 3.305 12 12 0 0 1-2.38 3.875c-1.33 1.357-3.02 1.962-4.43 1.936a4.4 4.4 0 0 1-2.724-1.024c-.99-.853-1.391-1.83-1.53-2.919a5 5 0 0 1 .128-1.518c.105-.38.37-1.116.76-1.437-.455-.197-1.04-.624-1.226-.829-.045-.05-.04-.13 0-.183a.155.155 0 0 1 .177-.053c.392.134.869.267 1.372.35.66.111 1.484.25 2.317.292 2.03.1 4.153-.813 4.812-2.627s.403-3.609-1.96-4.685-3.454-2.356-5.363-3.128c-1.247-.505-2.636-.205-4.06.582-3.838 2.121-7.277 8.822-5.69 15.032a.191.191 0 0 1-.315.19 12 12 0 0 1-1.25-1.634 12 12 0 0 1-.769-1.404M11.57 6.087c.649-.051 1.214.501 1.31 1.236.13.979-.228 1.99-1.41 2.013-1.01.02-1.315-.997-1.248-1.614.066-.616.574-1.575 1.35-1.635"/></svg>

frontend/public/Logos/haystack.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 24 24"><title>Haystack</title><path d="M2.008 0C.9 0 0 .9 0 2.008v19.984C0 23.1.9 24 2.008 24h19.984C23.1 24 24 23.1 24 21.992V2.008C24 .9 23.1 0 21.992 0Zm9.963 3.84c3.43 0 6.21 2.763 6.21 6.17v6.488a.27.27 0 0 1-.27.268 2.423 2.423 0 0 1-2.43-2.414V10.01c0-1.927-1.572-3.488-3.51-3.488S8.547 8.085 8.547 10.01v1.608a.263.263 0 0 0 .259.268h1.54a.27.27 0 0 0 .275-.263V9.945c0-.74.604-1.341 1.35-1.341s1.35.6 1.35 1.341V20.03a.275.275 0 0 1-.28.268 2.41 2.41 0 0 1-2.42-2.404v-3.23a.275.275 0 0 0-.276-.269H8.811a.264.264 0 0 0-.264.263v1.08c0 1.333-1.175 2.414-2.517 2.414a.27.27 0 0 1-.27-.268v-7.872c0-3.408 2.78-6.171 6.21-6.171"/></svg>

frontend/public/Logos/huggingface.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95 88" fill="none"><path fill="#ffd21e" d="M47.21 76.5a34.75 34.75 0 1 0 0-69.5 34.75 34.75 0 0 0 0 69.5"/><path fill="#ff9d0b" d="M81.96 41.75a34.75 34.75 0 1 0-69.5 0 34.75 34.75 0 0 0 69.5 0m-73.5 0a38.75 38.75 0 1 1 77.5 0 38.75 38.75 0 0 1-77.5 0"/><path fill="#3a3b45" d="M58.5 32.3c1.28.44 1.78 3.06 3.07 2.38a5 5 0 1 0-6.76-2.07c.61 1.15 2.55-.72 3.7-.32Zm-23.55 0c-1.28.44-1.79 3.06-3.07 2.38a5 5 0 1 1 6.76-2.07c-.61 1.15-2.56-.72-3.7-.32Z"/><path fill="#ff323d" d="M46.96 56.29c9.83 0 13-8.76 13-13.26 0-2.34-1.57-1.6-4.09-.36-2.33 1.15-5.46 2.74-8.9 2.74-7.19 0-13-6.88-13-2.38s3.16 13.26 13 13.26Z"/><path fill="#3a3b45" fill-rule="evenodd" d="M39.43 54a8.7 8.7 0 0 1 5.3-4.49c.4-.12.81.57 1.24 1.28.4.68.82 1.37 1.24 1.37.45 0 .9-.68 1.33-1.35.45-.7.89-1.38 1.32-1.25a8.6 8.6 0 0 1 5 4.17c3.73-2.94 5.1-7.74 5.1-10.7 0-2.34-1.57-1.6-4.09-.36l-.14.07c-2.31 1.15-5.39 2.67-8.77 2.67s-6.45-1.52-8.77-2.67c-2.6-1.29-4.23-2.1-4.23.29 0 3.05 1.46 8.06 5.47 10.97" clip-rule="evenodd"/><path fill="#ff9d0b" d="M70.71 37a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5m-46.5 0a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5m-6.69 11c-1.62 0-3.06.66-4.07 1.87a5.97 5.97 0 0 0-1.33 3.76 7 7 0 0 0-1.94-.3c-1.55 0-2.95.59-3.94 1.66a5.8 5.8 0 0 0-.8 7 5.3 5.3 0 0 0-1.79 2.82c-.24.9-.48 2.8.8 4.74a5.22 5.22 0 0 0-.37 5.02c1.02 2.32 3.57 4.14 8.52 6.1 3.07 1.22 5.89 2 5.91 2.01a44.3 44.3 0 0 0 10.93 1.6c5.86 0 10.05-1.8 12.46-5.34 3.88-5.69 3.33-10.9-1.7-15.92-2.77-2.78-4.62-6.87-5-7.77-.78-2.66-2.84-5.62-6.25-5.62a5.7 5.7 0 0 0-4.6 2.46c-1-1.26-1.98-2.25-2.86-2.82A7.4 7.4 0 0 0 17.52 48m0 4c.51 0 1.14.22 1.82.65 2.14 1.36 6.25 8.43 7.76 11.18.5.92 1.37 1.31 2.14 1.31 1.55 0 2.75-1.53.15-3.48-3.92-2.93-2.55-7.72-.68-8.01.08-.02.17-.02.24-.02 1.7 0 2.45 2.93 2.45 2.93s2.2 5.52 5.98 9.3c3.77 3.77 3.97 6.8 1.22 10.83-1.88 2.75-5.47 3.58-9.16 3.58-3.81 0-7.73-.9-9.92-1.46-.11-.03-13.45-3.8-11.76-7 .28-.54.75-.76 1.34-.76 2.38 0 6.7 3.54 8.57 3.54.41 0 .7-.17.83-.6.79-2.85-12.06-4.05-10.98-8.17.2-.73.71-1.02 1.44-1.02 3.14 0 10.2 5.53 11.68 5.53.11 0 .2-.03.24-.1.74-1.2.33-2.04-4.9-5.2-5.21-3.16-8.88-5.06-6.8-7.33.24-.26.58-.38 1-.38 3.17 0 10.66 6.82 10.66 6.82s2.02 2.1 3.25 2.1c.28 0 .52-.1.68-.38.86-1.46-8.06-8.22-8.56-11.01-.34-1.9.24-2.85 1.31-2.85"/><path fill="#ffd21e" d="M38.6 76.69c2.75-4.04 2.55-7.07-1.22-10.84-3.78-3.77-5.98-9.3-5.98-9.3s-.82-3.2-2.69-2.9-3.24 5.08.68 8.01c3.91 2.93-.78 4.92-2.29 2.17-1.5-2.75-5.62-9.82-7.76-11.18-2.13-1.35-3.63-.6-3.13 2.2.5 2.79 9.43 9.55 8.56 11-.87 1.47-3.93-1.71-3.93-1.71s-9.57-8.71-11.66-6.44c-2.08 2.27 1.59 4.17 6.8 7.33 5.23 3.16 5.64 4 4.9 5.2-.75 1.2-12.28-8.53-13.36-4.4-1.08 4.11 11.77 5.3 10.98 8.15-.8 2.85-9.06-5.38-10.74-2.18-1.7 3.21 11.65 6.98 11.76 7.01 4.3 1.12 15.25 3.49 19.08-2.12"/><path fill="#ff9d0b" d="M77.4 48c1.62 0 3.07.66 4.07 1.87a5.97 5.97 0 0 1 1.33 3.76 7 7 0 0 1 1.95-.3c1.55 0 2.95.59 3.94 1.66a5.8 5.8 0 0 1 .8 7 5.3 5.3 0 0 1 1.78 2.82c.24.9.48 2.8-.8 4.74a5.22 5.22 0 0 1 .37 5.02c-1.02 2.32-3.57 4.14-8.51 6.1-3.08 1.22-5.9 2-5.92 2.01a44.3 44.3 0 0 1-10.93 1.6c-5.86 0-10.05-1.8-12.46-5.34-3.88-5.69-3.33-10.9 1.7-15.92 2.78-2.78 4.63-6.87 5.01-7.77.78-2.66 2.83-5.62 6.24-5.62a5.7 5.7 0 0 1 4.6 2.46c1-1.26 1.98-2.25 2.87-2.82A7.4 7.4 0 0 1 77.4 48m0 4c-.51 0-1.13.22-1.82.65-2.13 1.36-6.25 8.43-7.76 11.18a2.43 2.43 0 0 1-2.14 1.31c-1.54 0-2.75-1.53-.14-3.48 3.91-2.93 2.54-7.72.67-8.01a1.5 1.5 0 0 0-.24-.02c-1.7 0-2.45 2.93-2.45 2.93s-2.2 5.52-5.97 9.3c-3.78 3.77-3.98 6.8-1.22 10.83 1.87 2.75 5.47 3.58 9.15 3.58 3.82 0 7.73-.9 9.93-1.46.1-.03 13.45-3.8 11.76-7-.29-.54-.75-.76-1.34-.76-2.38 0-6.71 3.54-8.57 3.54-.42 0-.71-.17-.83-.6-.8-2.85 12.05-4.05 10.97-8.17-.19-.73-.7-1.02-1.44-1.02-3.14 0-10.2 5.53-11.68 5.53-.1 0-.19-.03-.23-.1-.74-1.2-.34-2.04 4.88-5.2 5.23-3.16 8.9-5.06 6.8-7.33-.23-.26-.57-.38-.98-.38-3.18 0-10.67 6.82-10.67 6.82s-2.02 2.1-3.24 2.1a.74.74 0 0 1-.68-.38c-.87-1.46 8.05-8.22 8.55-11.01.34-1.9-.24-2.85-1.31-2.85"/><path fill="#ffd21e" d="M56.33 76.69c-2.75-4.04-2.56-7.07 1.22-10.84 3.77-3.77 5.97-9.3 5.97-9.3s.82-3.2 2.7-2.9c1.86.3 3.23 5.08-.68 8.01-3.92 2.93.78 4.92 2.28 2.17 1.51-2.75 5.63-9.82 7.76-11.18 2.13-1.35 3.64-.6 3.13 2.2-.5 2.79-9.42 9.55-8.55 11 .86 1.47 3.92-1.71 3.92-1.71s9.58-8.71 11.66-6.44-1.58 4.17-6.8 7.33c-5.23 3.16-5.63 4-4.9 5.2.75 1.2 12.28-8.53 13.36-4.4 1.08 4.11-11.76 5.3-10.97 8.15.8 2.85 9.05-5.38 10.74-2.18 1.69 3.21-11.65 6.98-11.76 7.01-4.31 1.12-15.26 3.49-19.08-2.12"/></svg>

frontend/public/Logos/nvidia-dcgm.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#76b900" viewBox="0 0 24 24"><title>NVIDIA</title><path d="M8.948 8.798v-1.43a7 7 0 0 1 .424-.018c3.922-.124 6.493 3.374 6.493 3.374s-2.774 3.851-5.75 3.851a3.7 3.7 0 0 1-1.158-.185v-4.346c1.528.185 1.837.857 2.747 2.385l2.04-1.714s-1.492-1.952-4-1.952a6 6 0 0 0-.796.035m0-4.735v2.138l.424-.027c5.45-.185 9.01 4.47 9.01 4.47s-4.08 4.964-8.33 4.964a6.5 6.5 0 0 1-1.095-.097v1.325c.3.035.61.062.91.062 3.957 0 6.82-2.023 9.593-4.408.459.371 2.34 1.263 2.73 1.652-2.633 2.208-8.772 3.984-12.253 3.984-.335 0-.653-.018-.971-.053v1.864H24V4.063zm0 10.326v1.131c-3.657-.654-4.673-4.46-4.673-4.46s1.758-1.944 4.673-2.262v1.237H8.94c-1.528-.186-2.73 1.245-2.73 1.245s.68 2.412 2.739 3.11M2.456 10.9s2.164-3.197 6.5-3.533V6.201C4.153 6.59 0 10.653 0 10.653s2.35 6.802 8.948 7.42v-1.237c-4.84-.6-6.492-5.936-6.492-5.936"/></svg>

frontend/public/Logos/ollama.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 24 24"><title>Ollama</title><path d="M16.361 10.26a.9.9 0 0 0-.558.47l-.072.148.001.207c0 .193.004.217.059.353.076.193.152.312.291.448.24.238.51.3.872.205a.86.86 0 0 0 .517-.436.75.75 0 0 0 .08-.498c-.064-.453-.33-.782-.724-.897a1.1 1.1 0 0 0-.466 0m-9.203.005c-.305.096-.533.32-.65.639a1.2 1.2 0 0 0-.06.52c.057.309.31.59.598.667.362.095.632.033.872-.205.14-.136.215-.255.291-.448.055-.136.059-.16.059-.353l.001-.207-.072-.148a.9.9 0 0 0-.565-.472 1 1 0 0 0-.474.007m4.184 2c-.131.071-.223.25-.195.383.031.143.157.288.353.407.105.063.112.072.117.136.004.038-.01.146-.029.243-.02.094-.036.194-.036.222.002.074.07.195.143.253.064.052.076.054.255.059.164.005.198.001.264-.03.169-.082.212-.234.15-.525-.052-.243-.042-.28.087-.355.137-.08.281-.219.324-.314a.365.365 0 0 0-.175-.48.4.4 0 0 0-.181-.033c-.126 0-.207.03-.355.124l-.085.053-.053-.032c-.219-.13-.259-.145-.391-.143a.4.4 0 0 0-.193.032m.39-2.195c-.373.036-.475.05-.654.086a4.5 4.5 0 0 0-.951.328c-.94.46-1.589 1.226-1.787 2.114-.04.176-.045.234-.045.53 0 .294.005.357.043.524.264 1.16 1.332 2.017 2.714 2.173.3.033 1.596.033 1.896 0 1.11-.125 2.064-.727 2.493-1.571.114-.226.169-.372.22-.602.039-.167.044-.23.044-.523 0-.297-.005-.355-.045-.531-.288-1.29-1.539-2.304-3.072-2.497a7 7 0 0 0-.855-.031zm.645.937a3.3 3.3 0 0 1 1.44.514c.223.148.537.458.671.662.166.251.26.508.303.82.02.143.01.251-.043.482-.08.345-.332.705-.672.957a3 3 0 0 1-.689.348c-.382.122-.632.144-1.525.138-.582-.006-.686-.01-.853-.042q-.856-.16-1.35-.68c-.264-.28-.385-.535-.45-.946-.03-.192.025-.509.137-.776.136-.326.488-.73.836-.963.403-.269.934-.46 1.422-.512.187-.02.586-.02.773-.002m-5.503-11a1.65 1.65 0 0 0-.683.298C5.617.74 5.173 1.666 4.985 2.819c-.07.436-.119 1.04-.119 1.503 0 .544.064 1.24.155 1.721.02.107.031.202.023.208l-.187.152a5.3 5.3 0 0 0-.949 1.02 5.5 5.5 0 0 0-.94 2.339 6.6 6.6 0 0 0-.023 1.357c.091.78.325 1.438.727 2.04l.13.195-.037.064c-.269.452-.498 1.105-.605 1.732-.084.496-.095.629-.095 1.294 0 .67.009.803.088 1.266.095.555.288 1.143.503 1.534.071.128.243.393.264.407.007.003-.014.067-.046.141a7.4 7.4 0 0 0-.548 1.873 5 5 0 0 0-.071.991c0 .56.031.832.148 1.279L3.42 24h1.478l-.05-.091c-.297-.552-.325-1.575-.068-2.597.117-.472.25-.819.498-1.296l.148-.29v-.177c0-.165-.003-.184-.057-.293a.9.9 0 0 0-.194-.25 1.7 1.7 0 0 1-.385-.543c-.424-.92-.506-2.286-.208-3.451.124-.486.329-.918.544-1.154a.8.8 0 0 0 .223-.531c0-.195-.07-.355-.224-.522a3.14 3.14 0 0 1-.817-1.729c-.14-.96.114-2.005.69-2.834.563-.814 1.353-1.336 2.237-1.475.199-.033.57-.028.776.01.226.04.367.028.512-.041.179-.085.268-.19.374-.431.093-.215.165-.333.36-.576.234-.29.46-.489.822-.729.413-.27.884-.467 1.352-.561.17-.035.25-.04.569-.04s.398.005.569.04a4.07 4.07 0 0 1 1.914.997c.117.109.398.457.488.602.034.057.095.177.132.267.105.241.195.346.374.43.14.068.286.082.503.045.343-.058.607-.053.943.016 1.144.23 2.14 1.173 2.581 2.437.385 1.108.276 2.267-.296 3.153-.097.15-.193.27-.333.419-.301.322-.301.722-.001 1.053.493.539.801 1.866.708 3.036-.062.772-.26 1.463-.533 1.854a2 2 0 0 1-.224.258.9.9 0 0 0-.194.25c-.054.109-.057.128-.057.293v.178l.148.29c.248.476.38.823.498 1.295.253 1.008.231 2.01-.059 2.581a1 1 0 0 0-.044.098c0 .006.329.009.732.009h.73l.02-.074.036-.134c.019-.076.057-.3.088-.516a9 9 0 0 0 0-1.258c-.11-.875-.295-1.57-.597-2.226-.032-.074-.053-.138-.046-.141a1.4 1.4 0 0 0 .108-.152c.376-.569.607-1.284.724-2.228.031-.26.031-1.378 0-1.628-.083-.645-.182-1.082-.348-1.525a6 6 0 0 0-.329-.7l-.038-.064.131-.194c.402-.604.636-1.262.727-2.04a6.6 6.6 0 0 0-.024-1.358 5.5 5.5 0 0 0-.939-2.339 5.3 5.3 0 0 0-.95-1.02l-.186-.152a.7.7 0 0 1 .023-.208c.208-1.087.201-2.443-.017-3.503-.19-.924-.535-1.658-.98-2.082-.354-.338-.716-.482-1.15-.455-.996.059-1.8 1.205-2.116 3.01a7 7 0 0 0-.097.726c0 .036-.007.066-.015.066a1 1 0 0 1-.149-.078A4.86 4.86 0 0 0 12 3.03c-.832 0-1.687.243-2.456.698a1 1 0 0 1-.148.078c-.008 0-.015-.03-.015-.066a7 7 0 0 0-.097-.725C8.997 1.392 8.337.319 7.46.048a2 2 0 0 0-.585-.041Zm.293 1.402c.248.197.523.759.682 1.388.03.113.06.244.069.292.007.047.026.152.041.233.067.365.098.76.102 1.24l.002.475-.12.175-.118.178h-.278c-.324 0-.646.041-.954.124l-.238.06c-.033.007-.038-.003-.057-.144a8.4 8.4 0 0 1 .016-2.323c.124-.788.413-1.501.696-1.711.067-.05.079-.049.157.013m9.825-.012c.17.126.358.46.498.888.28.854.36 2.028.212 3.145-.019.14-.024.151-.057.144l-.238-.06a3.7 3.7 0 0 0-.954-.124h-.278l-.119-.178-.119-.175.002-.474c.004-.669.066-1.19.214-1.772.157-.623.434-1.185.68-1.382.078-.062.09-.063.159-.012"/></svg>

frontend/public/Logos/openrouter.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 24 24"><title>OpenRouter</title><path d="M16.778 1.844v1.919q-.569-.026-1.138-.032-.708-.008-1.415.037c-1.93.126-4.023.728-6.149 2.237-2.911 2.066-2.731 1.95-4.14 2.75-.396.223-1.342.574-2.185.798-.841.225-1.753.333-1.751.333v4.229s.768.108 1.61.333c.842.224 1.789.575 2.185.799 1.41.798 1.228.683 4.14 2.75 2.126 1.509 4.22 2.11 6.148 2.236.88.058 1.716.041 2.555.005v1.918l7.222-4.168-7.222-4.17v2.176c-.86.038-1.611.065-2.278.021-1.364-.09-2.417-.357-3.979-1.465-2.244-1.593-2.866-2.027-3.68-2.508.889-.518 1.449-.906 3.822-2.59 1.56-1.109 2.614-1.377 3.978-1.466.667-.044 1.418-.017 2.278.02v2.176L24 6.014Z"/></svg>

frontend/public/Logos/prometheus.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3.94 -1.44 438.62 432.87"><path fill="#e75225" d="M215.926 7.068c115.684.024 210.638 93.784 210.493 207.844-.148 115.793-94.713 208.252-212.912 208.169C97.95 423 4.52 329.143 4.601 213.221 4.68 99.867 99.833 7.044 215.926 7.068m-63.947 73.001c2.652 12.978.076 25.082-3.846 36.988-2.716 8.244-6.47 16.183-8.711 24.539-3.694 13.769-7.885 27.619-9.422 41.701-2.21 20.25 5.795 38.086 19.493 55.822L86.527 225.94c.11 1.978-.007 2.727.21 3.361 5.968 17.43 16.471 32.115 28.243 45.957 1.246 1.465 4.082 2.217 6.182 2.221 62.782.115 125.565.109 188.347.028 1.948-.003 4.546-.369 5.741-1.618 13.456-14.063 23.746-30.079 30.179-50.257l-66.658 12.976c4.397-8.567 9.417-16.1 12.302-24.377 9.869-28.315 5.779-55.69-8.387-81.509-11.368-20.72-21.854-41.349-16.183-66.32-12.005 11.786-16.615 26.79-19.541 42.253-2.882 15.23-4.58 30.684-6.811 46.136-.317-.467-.728-.811-.792-1.212-.258-1.621-.499-3.255-.587-4.893-1.355-25.31-6.328-49.696-16.823-72.987-6.178-13.71-12.99-27.727-6.622-44.081-4.31 2.259-8.205 4.505-10.997 7.711-8.333 9.569-11.779 21.062-12.666 33.645-.757 10.75-1.796 21.552-3.801 32.123-2.107 11.109-5.448 21.998-12.956 32.209-3.033-21.81-3.37-43.38-22.928-57.237m161.877 216.523H116.942v34.007h196.914zm-157.871 51.575c-.163 28.317 28.851 49.414 64.709 47.883 29.716-1.269 56.016-24.51 53.755-47.883z"/></svg>

frontend/public/Logos/statsd.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 122.88 103.53"><path d="M5.47 0H117.4c3.01 0 5.47 2.46 5.47 5.47v92.58c0 3.01-2.46 5.47-5.47 5.47H5.47c-3.01 0-5.47-2.46-5.47-5.47V5.47C0 2.46 2.46 0 5.47 0m26.37 38.55 17.79 18.42 2.14 2.13-2.12 2.16-17.97 19.05-5.07-5 15.85-16.15L26.81 43.6zM94.1 79.41H54.69v-6.84H94.1zM38.19 9.83c3.19 0 5.78 2.59 5.78 5.78s-2.59 5.78-5.78 5.78-5.78-2.59-5.78-5.78S35 9.83 38.19 9.83m-19.24 0c3.19 0 5.78 2.59 5.78 5.78s-2.59 5.78-5.78 5.78-5.78-2.59-5.78-5.78 2.58-5.78 5.78-5.78M7.49 5.41H115.4c1.15 0 2.09.94 2.09 2.09v18.32H5.4V7.5c0-1.15.94-2.09 2.09-2.09" style="fill-rule:evenodd;clip-rule:evenodd;fill:#1668dc"/></svg>

frontend/public/locales/en-GB/routes.json

@@ -15,5 +15,6 @@
 	"logs_to_metrics": "Logs To Metrics",
 	"roles": "Roles",
 	"role_details": "Role Details",
-	"members": "Members"
+	"members": "Members",
+	"service_accounts": "Service Accounts"
 }

frontend/public/locales/en-GB/titles.json

@@ -50,5 +50,8 @@
 	"INFRASTRUCTURE_MONITORING_KUBERNETES": "SigNoz | Infra Monitoring",
 	"METER_EXPLORER": "SigNoz | Meter Explorer",
 	"METER_EXPLORER_VIEWS": "SigNoz | Meter Explorer Views",
-	"METER": "SigNoz | Meter"
+	"METER": "SigNoz | Meter",
+	"ROLES_SETTINGS": "SigNoz | Roles",
+	"MEMBERS_SETTINGS": "SigNoz | Members",
+	"SERVICE_ACCOUNTS_SETTINGS": "SigNoz | Service Accounts"
 }

frontend/public/locales/en/routes.json

@@ -15,5 +15,6 @@
 	"logs_to_metrics": "Logs To Metrics",
 	"roles": "Roles",
 	"role_details": "Role Details",
-	"members": "Members"
+	"members": "Members",
+	"service_accounts": "Service Accounts"
 }

frontend/public/locales/en/titles.json

@@ -75,5 +75,6 @@
 	"METER_EXPLORER_VIEWS": "SigNoz | Meter Explorer Views",
 	"METER": "SigNoz | Meter",
 	"ROLES_SETTINGS": "SigNoz | Roles",
-	"MEMBERS_SETTINGS": "SigNoz | Members"
+	"MEMBERS_SETTINGS": "SigNoz | Members",
+	"SERVICE_ACCOUNTS_SETTINGS": "SigNoz | Service Accounts"
 }

frontend/src/AppRoutes/Private.tsx

@@ -1,6 +1,6 @@
 import { ReactChild, useCallback, useEffect, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
-import { matchPath, Redirect, useLocation } from 'react-router-dom';
+import { matchPath, useLocation } from 'react-router-dom';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
 import getAll from 'api/v1/user/get';
@@ -236,7 +236,13 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 	useEffect(() => {
 		// if it is an old route navigate to the new route
 		if (isOldRoute) {
-			// this will be handled by the redirect component below
+			const redirectUrl = oldNewRoutesMapping[pathname];
+
+			const newLocation = {
+				...location,
+				pathname: redirectUrl,
+			};
+			history.replace(newLocation);
 			return;
 		}
 
@@ -290,19 +296,6 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		}
 	}, [isLoggedInState, pathname, user, isOldRoute, currentRoute, location]);
 
-	if (isOldRoute) {
-		const redirectUrl = oldNewRoutesMapping[pathname];
-		return (
-			<Redirect
-				to={{
-					pathname: redirectUrl,
-					search: location.search,
-					hash: location.hash,
-				}}
-			/>
-		);
-	}
-
 	// NOTE: disabling this rule as there is no need to have div
 	return <>{children}</>;
 }

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.styles.scss

@@ -0,0 +1,142 @@
+.create-sa-modal {
+	max-width: 530px;
+	background: var(--popover);
+	border: 1px solid var(--secondary);
+	border-radius: 4px;
+	box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.04);
+
+	[data-slot='dialog-header'] {
+		padding: var(--padding-4);
+		border-bottom: 1px solid var(--secondary);
+		flex-shrink: 0;
+		background: transparent;
+		margin: 0;
+	}
+
+	[data-slot='dialog-title'] {
+		font-family: Inter, sans-serif;
+		font-size: var(--label-base-400-font-size);
+		font-weight: var(--label-base-400-font-weight);
+		line-height: var(--label-base-400-line-height);
+		letter-spacing: -0.065px;
+		color: var(--bg-base-white);
+		margin: 0;
+	}
+
+	[data-slot='dialog-description'] {
+		padding: 0;
+
+		.create-sa-modal__content {
+			padding: var(--padding-4);
+		}
+	}
+}
+
+.create-sa-form {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-2);
+
+	.ant-form-item {
+		margin-bottom: var(--spacing-4);
+	}
+
+	.ant-form-item-label > label {
+		font-size: var(--paragraph-base-400-font-size);
+		font-weight: var(--paragraph-base-400-font-weight);
+		color: var(--foreground);
+		letter-spacing: -0.07px;
+	}
+
+	&__input {
+		height: 32px;
+		color: var(--l1-foreground);
+		background-color: var(--l2-background);
+		border-color: var(--border);
+		font-size: var(--paragraph-base-400-font-size);
+		border-radius: 2px;
+		width: 100%;
+
+		&::placeholder {
+			color: var(--l3-foreground);
+		}
+
+		&:focus {
+			border-color: var(--primary);
+			box-shadow: none;
+		}
+	}
+
+	&__select {
+		width: 100%;
+
+		.ant-select-selector {
+			min-height: 32px;
+			border-radius: 2px;
+			background-color: var(--l2-background) !important;
+			border: 1px solid var(--border) !important;
+			padding: 0 var(--padding-2) !important;
+
+			.ant-select-selection-placeholder {
+				color: var(--l3-foreground);
+				opacity: 0.4;
+				font-size: var(--paragraph-base-400-font-size);
+				letter-spacing: -0.07px;
+				line-height: 32px;
+			}
+
+			.ant-select-selection-item {
+				font-size: var(--paragraph-base-400-font-size);
+				letter-spacing: -0.07px;
+				color: var(--bg-base-white);
+			}
+		}
+
+		.ant-select-arrow {
+			color: var(--foreground);
+		}
+
+		&.ant-select-focused .ant-select-selector,
+		&:not(.ant-select-disabled):hover .ant-select-selector {
+			border-color: var(--primary);
+		}
+	}
+
+	&__helper {
+		font-size: var(--paragraph-small-400-font-size);
+		color: var(--l3-foreground);
+		margin: calc(var(--spacing-2) * -1) 0 var(--spacing-4) 0;
+		line-height: var(--paragraph-small-400-line-height);
+	}
+}
+
+.create-sa-modal__footer {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-end;
+	padding: 0 var(--padding-4);
+	height: 56px;
+	min-height: 56px;
+	border-top: 1px solid var(--secondary);
+	gap: var(--spacing-4);
+	flex-shrink: 0;
+}
+
+.lightMode {
+	.create-sa-modal {
+		[data-slot='dialog-title'] {
+			color: var(--bg-base-black);
+		}
+	}
+
+	.create-sa-form {
+		&__select {
+			.ant-select-selector {
+				.ant-select-selection-item {
+					color: var(--bg-base-black);
+				}
+			}
+		}
+	}
+}

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -0,0 +1,185 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Button } from '@signozhq/button';
+import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
+import { X } from '@signozhq/icons';
+import { toast } from '@signozhq/sonner';
+import { Form, Input } from 'antd';
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import { useCreateServiceAccount } from 'api/generated/services/serviceaccount';
+import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
+import RolesSelect, { useRoles } from 'components/RolesSelect';
+
+import './CreateServiceAccountModal.styles.scss';
+
+interface CreateServiceAccountModalProps {
+	open: boolean;
+	onClose: () => void;
+	onSuccess: () => void;
+}
+
+interface FormValues {
+	name: string;
+	email: string;
+	roles: string[];
+}
+
+function CreateServiceAccountModal({
+	open,
+	onClose,
+	onSuccess,
+}: CreateServiceAccountModalProps): JSX.Element {
+	const [form] = Form.useForm<FormValues>();
+	const [isSubmitting, setIsSubmitting] = useState(false);
+	const [submittable, setSubmittable] = useState(false);
+
+	const values = Form.useWatch([], form);
+
+	useEffect(() => {
+		form
+			.validateFields({ validateOnly: true })
+			.then(() => setSubmittable(true))
+			.catch(() => setSubmittable(false));
+	}, [values, form]);
+
+	const { mutateAsync: createServiceAccount } = useCreateServiceAccount();
+	const {
+		roles,
+		isLoading: rolesLoading,
+		isError: rolesError,
+		error: rolesErrorObj,
+		refetch: refetchRoles,
+	} = useRoles();
+
+	const handleClose = useCallback((): void => {
+		form.resetFields();
+		onClose();
+	}, [form, onClose]);
+
+	const handleSubmit = useCallback(async (): Promise<void> => {
+		try {
+			const values = await form.validateFields();
+			setIsSubmitting(true);
+			await createServiceAccount({
+				data: {
+					name: values.name.trim(),
+					email: values.email.trim(),
+					roles: values.roles,
+				},
+			});
+			toast.success('Service account created successfully', { richColors: true });
+			form.resetFields();
+			onSuccess();
+			onClose();
+		} catch (err: unknown) {
+			if (err && typeof err === 'object' && 'errorFields' in err) {
+				return;
+			}
+			const errMessage =
+				convertToApiError(
+					err as AxiosError<RenderErrorResponseDTO, unknown> | null,
+				)?.getErrorMessage() || 'An error occurred';
+			toast.error(`Failed to create service account: ${errMessage}`, {
+				richColors: true,
+			});
+		} finally {
+			setIsSubmitting(false);
+		}
+	}, [form, createServiceAccount, onSuccess, onClose]);
+
+	return (
+		<DialogWrapper
+			title="New Service Account"
+			open={open}
+			onOpenChange={(isOpen): void => {
+				if (!isOpen) {
+					handleClose();
+				}
+			}}
+			showCloseButton
+			width="narrow"
+			className="create-sa-modal"
+			disableOutsideClick={false}
+		>
+			<div className="create-sa-modal__content">
+				<Form form={form} layout="vertical" className="create-sa-form">
+					<Form.Item
+						name="name"
+						label="Name"
+						rules={[{ required: true, message: 'Name is required' }]}
+						className="create-sa-form__item"
+					>
+						<Input placeholder="Enter a name" className="create-sa-form__input" />
+					</Form.Item>
+
+					<Form.Item
+						name="email"
+						label="Email Address"
+						rules={[
+							{ required: true, message: 'Email Address is required' },
+							{ type: 'email', message: 'Please enter a valid email address' },
+						]}
+						className="create-sa-form__item"
+					>
+						<Input
+							type="email"
+							placeholder="email@example.com"
+							className="create-sa-form__input"
+						/>
+					</Form.Item>
+					<p className="create-sa-form__helper">
+						Used only for notifications about this service account. It is not used for
+						authentication.
+					</p>
+
+					<Form.Item
+						name="roles"
+						label="Roles"
+						rules={[{ required: true, message: 'At least one role is required' }]}
+						className="create-sa-form__item"
+					>
+						<RolesSelect
+							mode="multiple"
+							roles={roles}
+							loading={rolesLoading}
+							isError={rolesError}
+							error={rolesErrorObj}
+							onRefetch={refetchRoles}
+							placeholder="Select roles"
+							className="create-sa-form__select"
+							getPopupContainer={(triggerNode): HTMLElement =>
+								(triggerNode?.closest('.create-sa-modal') as HTMLElement) ||
+								document.body
+							}
+						/>
+					</Form.Item>
+				</Form>
+			</div>
+
+			<DialogFooter className="create-sa-modal__footer">
+				<Button
+					type="button"
+					variant="solid"
+					color="secondary"
+					size="sm"
+					onClick={handleClose}
+				>
+					<X size={12} />
+					Cancel
+				</Button>
+
+				<Button
+					variant="solid"
+					color="primary"
+					size="sm"
+					onClick={handleSubmit}
+					disabled={isSubmitting || !submittable}
+				>
+					{isSubmitting ? 'Creating...' : 'Create Service Account'}
+				</Button>
+			</DialogFooter>
+		</DialogWrapper>
+	);
+}
+
+export default CreateServiceAccountModal;

frontend/src/components/CustomTimePicker/CustomTimePicker.styles.scss

@@ -1,31 +1,6 @@
 .custom-time-picker {
 	display: flex;
-	flex-direction: row;
-	align-items: center;
-	gap: 4px;
-
-	.zoom-out-btn {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		flex-shrink: 0;
-		color: var(--foreground);
-		border: 1px solid var(--border);
-		border-radius: 2px;
-		box-shadow: none;
-		padding: 10px;
-		height: 33px;
-
-		&:hover:not(:disabled) {
-			color: var(--bg-vanilla-100);
-			background: var(--primary);
-		}
-
-		&:disabled {
-			opacity: 0.5;
-			cursor: not-allowed;
-		}
-	}
+	flex-direction: column;
 
 	.timeSelection-input {
 		&:hover {

frontend/src/components/CustomTimePicker/CustomTimePicker.test.tsx

@@ -16,15 +16,6 @@ jest.mock('react-router-dom', () => {
 	};
 });
 
-jest.mock('react-redux', () => ({
-	...jest.requireActual('react-redux'),
-	useDispatch: jest.fn(() => jest.fn()),
-	useSelector: jest.fn(() => ({
-		minTime: 0,
-		maxTime: Date.now(),
-	})),
-}));
-
 jest.mock('providers/Timezone', () => {
 	const actual = jest.requireActual('providers/Timezone');
 

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -7,11 +7,9 @@ import {
 	useState,
 } from 'react';
 import { useLocation } from 'react-router-dom';
-import { Button } from '@signozhq/button';
 import { Input, InputRef, Popover, Tooltip } from 'antd';
 import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { QueryParams } from 'constants/query';
 import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
 import {
 	FixedDurationSuggestionOptions,
@@ -19,11 +17,9 @@ import {
 	RelativeDurationSuggestionOptions,
 } from 'container/TopNav/DateTimeSelectionV2/constants';
 import dayjs from 'dayjs';
-import { useZoomOut } from 'hooks/useZoomOut';
 import { isValidShortHandDateTimeFormat } from 'lib/getMinMax';
-import { isZoomOutDisabled } from 'lib/zoomOutUtils';
 import { defaultTo, isFunction, noop } from 'lodash-es';
-import { ChevronDown, ChevronUp, ZoomOut } from 'lucide-react';
+import { ChevronDown, ChevronUp } from 'lucide-react';
 import { useTimezone } from 'providers/Timezone';
 import { getTimeDifference, validateEpochRange } from 'utils/epochUtils';
 import { popupContainer } from 'utils/selectPopupContainer';
@@ -70,8 +66,6 @@ interface CustomTimePickerProps {
 	showRecentlyUsed?: boolean;
 	minTime: number;
 	maxTime: number;
-	/** When true, zoom-out button is hidden (e.g. in drawer/modal time selection) */
-	isModalTimeSelection?: boolean;
 }
 
 function CustomTimePicker({
@@ -94,7 +88,6 @@ function CustomTimePicker({
 	showRecentlyUsed = true,
 	minTime,
 	maxTime,
-	isModalTimeSelection = false,
 }: CustomTimePickerProps): JSX.Element {
 	const [
 		selectedTimePlaceholderValue,
@@ -123,14 +116,6 @@ function CustomTimePicker({
 
 	const [isOpenedFromFooter, setIsOpenedFromFooter] = useState(false);
 
-	const durationMs = (maxTime - minTime) / 1e6;
-	const zoomOutDisabled = showLiveLogs || isZoomOutDisabled(durationMs);
-
-	const handleZoomOut = useZoomOut({
-		isDisabled: zoomOutDisabled,
-		urlParamsToDelete: [QueryParams.activeLogId],
-	});
-
 	// function to get selected time in Last 1m, Last 2h, Last 3d, Last 4w format
 	// 1m, 2h, 3d, 4w -> Last 1 minute, Last 2 hours, Last 3 days, Last 4 weeks
 	const getSelectedTimeRangeLabelInRelativeFormat = (
@@ -646,23 +631,6 @@ function CustomTimePicker({
 					/>
 				</Popover>
 			</Tooltip>
-			{!showLiveLogs && !isModalTimeSelection && (
-				<Tooltip
-					title={
-						zoomOutDisabled ? 'Zoom out time range is limited to 1 month' : 'Zoom out'
-					}
-				>
-					<span>
-						<Button
-							className="zoom-out-btn"
-							onClick={handleZoomOut}
-							disabled={zoomOutDisabled}
-							data-testid="zoom-out-btn"
-							prefixIcon={<ZoomOut size={14} />}
-						/>
-					</span>
-				</Tooltip>
-			)}
 		</div>
 	);
 }

frontend/src/components/CustomTimePicker/__tests__/customTimePickerZoomOut.test.tsx

@@ -1,169 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { QueryParams } from 'constants/query';
-import { GlobalReducer } from 'types/reducer/globalTime';
-
-import CustomTimePicker from '../CustomTimePicker';
-
-const MS_PER_MIN = 60 * 1000;
-const NOW_MS = 1705312800000;
-
-const mockDispatch = jest.fn();
-const mockSafeNavigate = jest.fn();
-const mockUrlQueryDelete = jest.fn();
-const mockUrlQuerySet = jest.fn();
-
-interface MockAppState {
-	globalTime: Pick<GlobalReducer, 'minTime' | 'maxTime'>;
-}
-
-jest.mock('react-redux', () => ({
-	useDispatch: (): jest.Mock => mockDispatch,
-	useSelector: (selector: (state: MockAppState) => unknown): unknown => {
-		const mockState: MockAppState = {
-			globalTime: {
-				minTime: (NOW_MS - 15 * MS_PER_MIN) * 1e6,
-				maxTime: NOW_MS * 1e6,
-			},
-		};
-		return selector(mockState);
-	},
-}));
-
-jest.mock('hooks/useSafeNavigate', () => ({
-	useSafeNavigate: (): { safeNavigate: jest.Mock } => ({
-		safeNavigate: mockSafeNavigate,
-	}),
-}));
-
-interface MockUrlQuery {
-	delete: typeof mockUrlQueryDelete;
-	set: typeof mockUrlQuerySet;
-	get: () => null;
-	toString: () => string;
-}
-
-jest.mock('hooks/useUrlQuery', () => ({
-	__esModule: true,
-	default: (): MockUrlQuery => ({
-		delete: mockUrlQueryDelete,
-		set: mockUrlQuerySet,
-		get: (): null => null,
-		toString: (): string => 'relativeTime=45m',
-	}),
-}));
-
-jest.mock('providers/Timezone', () => ({
-	useTimezone: (): { timezone: { value: string; offset: string } } => ({
-		timezone: { value: 'UTC', offset: 'UTC' },
-	}),
-}));
-
-jest.mock('react-router-dom', () => ({
-	useLocation: (): { pathname: string } => ({ pathname: '/logs-explorer' }),
-}));
-
-const MS_PER_DAY = 24 * 60 * 60 * 1000;
-const now = Date.now();
-const defaultProps = {
-	onSelect: jest.fn(),
-	onError: jest.fn(),
-	selectedValue: '15m',
-	selectedTime: '15m',
-	onValidCustomDateChange: jest.fn(),
-	open: false,
-	setOpen: jest.fn(),
-	items: [
-		{ value: '15m', label: 'Last 15 minutes' },
-		{ value: '1h', label: 'Last 1 hour' },
-	],
-	minTime: (now - 15 * 60 * 1000) * 1e6,
-	maxTime: now * 1e6,
-};
-
-describe('CustomTimePicker - zoom out button', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		jest.spyOn(Date, 'now').mockReturnValue(NOW_MS);
-	});
-
-	afterEach(() => {
-		jest.restoreAllMocks();
-	});
-
-	it('should render zoom out button when showLiveLogs is false', () => {
-		render(<CustomTimePicker {...defaultProps} showLiveLogs={false} />);
-
-		expect(screen.getByTestId('zoom-out-btn')).toBeInTheDocument();
-	});
-
-	it('should not render zoom out button when showLiveLogs is true', () => {
-		render(<CustomTimePicker {...defaultProps} showLiveLogs={true} />);
-
-		expect(screen.queryByTestId('zoom-out-btn')).not.toBeInTheDocument();
-	});
-
-	it('should not render zoom out button when isModalTimeSelection is true', () => {
-		render(
-			<CustomTimePicker
-				{...defaultProps}
-				showLiveLogs={false}
-				isModalTimeSelection={true}
-			/>,
-		);
-
-		expect(screen.queryByTestId('zoom-out-btn')).not.toBeInTheDocument();
-	});
-
-	it('should call handleZoomOut when zoom out button is clicked', async () => {
-		render(<CustomTimePicker {...defaultProps} showLiveLogs={false} />);
-
-		const zoomOutBtn = screen.getByTestId('zoom-out-btn');
-		await userEvent.click(zoomOutBtn);
-
-		expect(mockDispatch).toHaveBeenCalled();
-		expect(mockUrlQuerySet).toHaveBeenCalledWith(QueryParams.relativeTime, '45m');
-		expect(mockSafeNavigate).toHaveBeenCalledWith(
-			expect.stringMatching(/\/logs-explorer\?relativeTime=45m/),
-		);
-	});
-
-	it('should use real ladder logic: 15m range zooms to 45m preset and updates URL', async () => {
-		render(<CustomTimePicker {...defaultProps} showLiveLogs={false} />);
-
-		const zoomOutBtn = screen.getByTestId('zoom-out-btn');
-		await userEvent.click(zoomOutBtn);
-
-		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.startTime);
-		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.endTime);
-		expect(mockUrlQuerySet).toHaveBeenCalledWith(QueryParams.relativeTime, '45m');
-		expect(mockSafeNavigate).toHaveBeenCalledWith(
-			expect.stringMatching(/\/logs-explorer\?relativeTime=45m/),
-		);
-		expect(mockDispatch).toHaveBeenCalled();
-	});
-
-	it('should delete activeLogId when zoom out is clicked', async () => {
-		render(<CustomTimePicker {...defaultProps} showLiveLogs={false} />);
-
-		const zoomOutBtn = screen.getByTestId('zoom-out-btn');
-		await userEvent.click(zoomOutBtn);
-
-		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.activeLogId);
-	});
-
-	it('should disable zoom button when time range is >= 1 month', () => {
-		const now = Date.now();
-		render(
-			<CustomTimePicker
-				{...defaultProps}
-				minTime={(now - 31 * MS_PER_DAY) * 1e6}
-				maxTime={now * 1e6}
-				showLiveLogs={false}
-			/>,
-		);
-
-		const zoomOutBtn = screen.getByTestId('zoom-out-btn');
-		expect(zoomOutBtn).toBeDisabled();
-	});
-});

frontend/src/components/InviteMembersModal/InviteMembersModal.tsx

@@ -243,56 +243,60 @@ function InviteMembersModal({
 						<div className="table-header-cell role-header">Roles</div>
 						<div className="table-header-cell action-header" />
 					</div>
-					<div className="invite-members-modal__container">
-						{rows.map(
-							(row): JSX.Element => (
-								<div key={row.id} className="team-member-row">
-									<div className="team-member-cell email-cell">
-										<Input
-											type="email"
-											placeholder="john@signoz.io"
-											value={row.email}
-											onChange={(e): void => updateEmail(row.id, e.target.value)}
-											className="team-member-email-input"
-										/>
-										{emailValidity[row.id] === false && row.email.trim() !== '' && (
-											<span className="email-error-message">Invalid email address</span>
-										)}
-									</div>
-									<div className="team-member-cell role-cell">
-										<Select
-											value={row.role || undefined}
-											onChange={(role): void => updateRole(row.id, role as ROLES)}
-											className="team-member-role-select"
-											placeholder="Select roles"
-											suffixIcon={<ChevronDown size={14} />}
-											getPopupContainer={(triggerNode): HTMLElement =>
-												(triggerNode?.closest('.invite-members-modal') as HTMLElement) ||
-												document.body
-											}
-										>
-											<Select.Option value="VIEWER">Viewer</Select.Option>
-											<Select.Option value="EDITOR">Editor</Select.Option>
-											<Select.Option value="ADMIN">Admin</Select.Option>
-										</Select>
-									</div>
-									<div className="team-member-cell action-cell">
-										{rows.length > 1 && (
-											<Button
-												variant="ghost"
-												color="destructive"
-												className="remove-team-member-button"
-												onClick={(): void => removeRow(row.id)}
-												aria-label="Remove row"
+					<form onSubmit={(e): void => e.preventDefault()}>
+						<div className="invite-members-modal__container">
+							{rows.map(
+								(row): JSX.Element => (
+									<div key={row.id} className="team-member-row">
+										<div className="team-member-cell email-cell">
+											<Input
+												type="email"
+												placeholder="john@signoz.io"
+												value={row.email}
+												onChange={(e): void => updateEmail(row.id, e.target.value)}
+												className="team-member-email-input"
+												name={`invite-email-${row.id}`}
+												autoComplete="email"
+											/>
+											{emailValidity[row.id] === false && row.email.trim() !== '' && (
+												<span className="email-error-message">Invalid email address</span>
+											)}
+										</div>
+										<div className="team-member-cell role-cell">
+											<Select
+												value={row.role || undefined}
+												onChange={(role): void => updateRole(row.id, role as ROLES)}
+												className="team-member-role-select"
+												placeholder="Select roles"
+												suffixIcon={<ChevronDown size={14} />}
+												getPopupContainer={(triggerNode): HTMLElement =>
+													(triggerNode?.closest('.invite-members-modal') as HTMLElement) ||
+													document.body
+												}
 											>
-												<Trash2 size={12} />
-											</Button>
-										)}
+												<Select.Option value="VIEWER">Viewer</Select.Option>
+												<Select.Option value="EDITOR">Editor</Select.Option>
+												<Select.Option value="ADMIN">Admin</Select.Option>
+											</Select>
+										</div>
+										<div className="team-member-cell action-cell">
+											{rows.length > 1 && (
+												<Button
+													variant="ghost"
+													color="destructive"
+													className="remove-team-member-button"
+													onClick={(): void => removeRow(row.id)}
+													aria-label="Remove row"
+												>
+													<Trash2 size={12} />
+												</Button>
+											)}
+										</div>
 									</div>
-								</div>
-							),
-						)}
-					</div>
+								),
+							)}
+						</div>
+					</form>
 				</div>
 
 				{(hasInvalidEmails || hasInvalidRoles) && (

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

@@ -361,58 +361,6 @@ describe('CheckboxFilter - User Flows', () => {
 		expect(filtersForServiceName).toHaveLength(0);
 	});
 
-	it('should match filter when query uses resource. prefix (resource.service.name matches service.name)', async () => {
-		// Filter config uses unprefixed key (service.name)
-		// Query has filter with resource. prefix (resource.service.name)
-		// Checkbox should recognize the match and show checked state
-		mockUseQueryBuilder.mockReturnValue({
-			lastUsedQuery: 0,
-			currentQuery: {
-				builder: {
-					queryData: [
-						{
-							filters: {
-								items: [
-									{
-										key: {
-											key: 'resource.service.name',
-											dataType: DataTypes.String,
-											type: 'resource',
-										},
-										op: 'in',
-										value: [OTEL_DEMO],
-									},
-								],
-								op: 'AND',
-							},
-						},
-					],
-				},
-			},
-			redirectWithQueryBuilderData: jest.fn(),
-		} as any);
-
-		const mockFilter = createMockFilter({ defaultOpen: false });
-
-		render(
-			<CheckboxFilter
-				filter={mockFilter}
-				source={QuickFiltersSource.LOGS_EXPLORER}
-			/>,
-		);
-
-		// Filter should auto-open because it has active filters (key match via prefix stripping)
-		await waitFor(() => {
-			expect(screen.getByPlaceholderText('Filter values')).toBeInTheDocument();
-		});
-
-		// otel-demo should be checked (filter uses resource.service.name IN [otel-demo])
-		// Checked items are sorted to the top, so otel-demo is first
-		const checkboxes = screen.getAllByRole('checkbox');
-		expect(checkboxes[0]).toBeChecked();
-		expect(screen.getByText(OTEL_DEMO)).toBeInTheDocument();
-	});
-
 	it('should extend an existing IN filter when checking an additional value', async () => {
 		const redirectWithQueryBuilderData = jest.fn();
 

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

@@ -18,7 +18,7 @@ import { useGetAggregateValues } from 'hooks/queryBuilder/useGetAggregateValues'
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useGetQueryKeyValueSuggestions } from 'hooks/querySuggestions/useGetQueryKeyValueSuggestions';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
-import { cloneDeep, isArray, isFunction } from 'lodash-es';
+import { cloneDeep, isArray, isEqual, isFunction } from 'lodash-es';
 import { ChevronDown, ChevronRight } from 'lucide-react';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
@@ -26,7 +26,6 @@ import { DataSource } from 'types/common/queryBuilder';
 import { v4 as uuid } from 'uuid';
 
 import LogsQuickFilterEmptyState from './LogsQuickFilterEmptyState';
-import { isKeyMatch } from './utils';
 
 import './Checkbox.styles.scss';
 
@@ -85,7 +84,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 			currentQuery.builder.queryData?.[
 				activeQueryIndex
 			]?.filters?.items?.some((item) =>
-				isKeyMatch(item.key?.key, filter.attributeKey.key),
+				isEqual(item.key?.key, filter.attributeKey.key),
 			),
 		[currentQuery.builder.queryData, activeQueryIndex, filter.attributeKey.key],
 	);
@@ -190,7 +189,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 		const filterSync = currentQuery?.builder.queryData?.[
 			activeQueryIndex
 		]?.filters?.items.find((item) =>
-			isKeyMatch(item.key?.key, filter.attributeKey.key),
+			isEqual(item.key?.key, filter.attributeKey.key),
 		);
 
 		if (filterSync) {
@@ -237,7 +236,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 			(currentQuery?.builder?.queryData?.[
 				activeQueryIndex
 			]?.filters?.items?.filter((item) =>
-				isKeyMatch(item.key?.key, filter.attributeKey.key),
+				isEqual(item.key?.key, filter.attributeKey.key),
 			)?.length || 0) > 1,
 
 		[currentQuery?.builder?.queryData, activeQueryIndex, filter.attributeKey],
@@ -281,7 +280,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 						items:
 							idx === activeQueryIndex
 								? item.filters?.items?.filter(
-										(fil) => !isKeyMatch(fil.key?.key, filter.attributeKey.key),
+										(fil) => !isEqual(fil.key?.key, filter.attributeKey.key),
 								  ) || []
 								: [...(item.filters?.items || [])],
 						op: item.filters?.op || 'AND',
@@ -314,7 +313,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 					: 'Only'
 				: 'Only';
 			query.filters.items = query.filters.items.filter(
-				(q) => !isKeyMatch(q.key?.key, filter.attributeKey.key),
+				(q) => !isEqual(q.key?.key, filter.attributeKey.key),
 			);
 
 			if (query.filter?.expression) {
@@ -336,13 +335,13 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 		} else if (query?.filters?.items) {
 			if (
 				query.filters?.items?.some((item) =>
-					isKeyMatch(item.key?.key, filter.attributeKey.key),
+					isEqual(item.key?.key, filter.attributeKey.key),
 				)
 			) {
 				// if there is already a running filter for the current attribute key then
 				// we split the cases by which particular operator is present right now!
 				const currentFilter = query.filters?.items?.find((q) =>
-					isKeyMatch(q.key?.key, filter.attributeKey.key),
+					isEqual(q.key?.key, filter.attributeKey.key),
 				);
 				if (currentFilter) {
 					const runningOperator = currentFilter?.op;
@@ -357,7 +356,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 										value: [...currentFilter.value, value],
 									};
 									query.filters.items = query.filters.items.map((item) => {
-										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+										if (isEqual(item.key?.key, filter.attributeKey.key)) {
 											return newFilter;
 										}
 										return item;
@@ -369,7 +368,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 										value: [currentFilter.value as string, value],
 									};
 									query.filters.items = query.filters.items.map((item) => {
-										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+										if (isEqual(item.key?.key, filter.attributeKey.key)) {
 											return newFilter;
 										}
 										return item;
@@ -386,11 +385,11 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 
 									if (newFilter.value.length === 0) {
 										query.filters.items = query.filters.items.filter(
-											(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
+											(item) => !isEqual(item.key?.key, filter.attributeKey.key),
 										);
 									} else {
 										query.filters.items = query.filters.items.map((item) => {
-											if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+											if (isEqual(item.key?.key, filter.attributeKey.key)) {
 												return newFilter;
 											}
 											return item;
@@ -399,7 +398,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 								} else {
 									// if not an array remove the whole thing altogether!
 									query.filters.items = query.filters.items.filter(
-										(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
+										(item) => !isEqual(item.key?.key, filter.attributeKey.key),
 									);
 								}
 							}
@@ -415,7 +414,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 										value: [...currentFilter.value, value],
 									};
 									query.filters.items = query.filters.items.map((item) => {
-										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+										if (isEqual(item.key?.key, filter.attributeKey.key)) {
 											return newFilter;
 										}
 										return item;
@@ -427,7 +426,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 										value: [currentFilter.value as string, value],
 									};
 									query.filters.items = query.filters.items.map((item) => {
-										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+										if (isEqual(item.key?.key, filter.attributeKey.key)) {
 											return newFilter;
 										}
 										return item;
@@ -442,7 +441,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 									};
 									if (newFilter.value.length === 0) {
 										query.filters.items = query.filters.items.filter(
-											(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
+											(item) => !isEqual(item.key?.key, filter.attributeKey.key),
 										);
 										if (query.filter?.expression) {
 											query.filter.expression = removeKeysFromExpression(
@@ -452,7 +451,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 										}
 									} else {
 										query.filters.items = query.filters.items.map((item) => {
-											if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+											if (isEqual(item.key?.key, filter.attributeKey.key)) {
 												return newFilter;
 											}
 											return item;
@@ -470,7 +469,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 										);
 									}
 									query.filters.items = query.filters.items.filter(
-										(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
+										(item) => !isEqual(item.key?.key, filter.attributeKey.key),
 									);
 								}
 							}
@@ -483,14 +482,14 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 									value: [currentFilter.value as string, value],
 								};
 								query.filters.items = query.filters.items.map((item) => {
-									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+									if (isEqual(item.key?.key, filter.attributeKey.key)) {
 										return newFilter;
 									}
 									return item;
 								});
 							} else if (!checked) {
 								query.filters.items = query.filters.items.filter(
-									(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
+									(item) => !isEqual(item.key?.key, filter.attributeKey.key),
 								);
 							}
 							break;
@@ -502,14 +501,14 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 									value: [currentFilter.value as string, value],
 								};
 								query.filters.items = query.filters.items.map((item) => {
-									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+									if (isEqual(item.key?.key, filter.attributeKey.key)) {
 										return newFilter;
 									}
 									return item;
 								});
 							} else if (checked) {
 								query.filters.items = query.filters.items.filter(
-									(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
+									(item) => !isEqual(item.key?.key, filter.attributeKey.key),
 								);
 							}
 							break;

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/utils.ts

@@ -1,41 +0,0 @@
-/**
- * These prefixes are added to attribute keys based on their context.
- */
-export const FIELD_CONTEXT_PREFIXES = [
-	'metric',
-	'log',
-	'span',
-	'trace',
-	'resource',
-	'scope',
-	'attribute',
-	'event',
-	'body',
-];
-
-/**
- * Removes the field context prefix from a key to get the base key name.
- * Example: 'resource.service.name' -> 'service.name'
- * Example: 'attribute.http.method' -> 'http.method'
- */
-export function getKeyWithoutPrefix(key: string | undefined): string {
-	if (!key) {
-		return '';
-	}
-	const prefixPattern = new RegExp(
-		`^(${FIELD_CONTEXT_PREFIXES.join('|')})\\.`,
-		'i',
-	);
-	return key.replace(prefixPattern, '').trim();
-}
-
-/**
- * Compares two keys by their base name (without prefix).
- * This ensures that 'service.name' matches 'resource.service.name'
- */
-export function isKeyMatch(
-	itemKey: string | undefined,
-	filterKey: string | undefined,
-): boolean {
-	return getKeyWithoutPrefix(itemKey) === getKeyWithoutPrefix(filterKey);
-}

frontend/src/components/RolesSelect/RolesSelect.styles.scss

@@ -0,0 +1,25 @@
+.roles-select-error {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 6px;
+	padding: 4px 8px;
+	color: var(--bg-cherry-500);
+	font-size: 12px;
+
+	&__msg {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+	}
+
+	&__retry-btn {
+		display: flex;
+		align-items: center;
+		background: none;
+		border: none;
+		cursor: pointer;
+		padding: 2px;
+		color: var(--bg-cherry-500);
+	}
+}

frontend/src/components/RolesSelect/RolesSelect.tsx

@@ -0,0 +1,171 @@
+import { CircleAlert, RefreshCw } from '@signozhq/icons';
+import { Checkbox, Select } from 'antd';
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import { useListRoles } from 'api/generated/services/role';
+import type { RoletypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
+import APIError from 'types/api/error';
+
+import './RolesSelect.styles.scss';
+
+export interface RoleOption {
+	label: string;
+	value: string;
+}
+
+export function useRoles(): {
+	roles: RoletypesRoleDTO[];
+	isLoading: boolean;
+	isError: boolean;
+	error: APIError | undefined;
+	refetch: () => void;
+} {
+	const { data, isLoading, isError, error, refetch } = useListRoles();
+	return {
+		roles: data?.data ?? [],
+		isLoading,
+		isError,
+		error: convertToApiError(error),
+		refetch,
+	};
+}
+
+export function getRoleOptions(roles: RoletypesRoleDTO[]): RoleOption[] {
+	return roles.map((role) => ({
+		label: role.name ?? '',
+		value: role.name ?? '',
+	}));
+}
+
+function ErrorContent({
+	error,
+	onRefetch,
+}: {
+	error?: APIError;
+	onRefetch?: () => void;
+}): JSX.Element {
+	const errorMessage = error?.message || 'Failed to load roles';
+
+	return (
+		<div className="roles-select-error">
+			<span className="roles-select-error__msg">
+				<CircleAlert size={12} />
+				{errorMessage}
+			</span>
+			{onRefetch && (
+				<button
+					type="button"
+					onClick={(e): void => {
+						e.stopPropagation();
+						onRefetch();
+					}}
+					className="roles-select-error__retry-btn"
+					title="Retry"
+				>
+					<RefreshCw size={12} />
+				</button>
+			)}
+		</div>
+	);
+}
+
+interface BaseProps {
+	id?: string;
+	placeholder?: string;
+	className?: string;
+	getPopupContainer?: (trigger: HTMLElement) => HTMLElement;
+	roles?: RoletypesRoleDTO[];
+	loading?: boolean;
+	isError?: boolean;
+	error?: APIError;
+	onRefetch?: () => void;
+}
+
+interface SingleProps extends BaseProps {
+	mode?: 'single';
+	value?: string;
+	onChange?: (role: string) => void;
+}
+
+interface MultipleProps extends BaseProps {
+	mode: 'multiple';
+	value?: string[];
+	onChange?: (roles: string[]) => void;
+}
+
+export type RolesSelectProps = SingleProps | MultipleProps;
+
+function RolesSelect(props: RolesSelectProps): JSX.Element {
+	const externalRoles = props.roles;
+
+	const {
+		data,
+		isLoading: internalLoading,
+		isError: internalError,
+		error: internalErrorObj,
+		refetch: internalRefetch,
+	} = useListRoles({
+		query: { enabled: externalRoles === undefined },
+	});
+
+	const roles = externalRoles ?? data?.data ?? [];
+	const options = getRoleOptions(roles);
+
+	const {
+		mode,
+		id,
+		placeholder = 'Select role',
+		className,
+		getPopupContainer,
+		loading = internalLoading,
+		isError = internalError,
+		error = convertToApiError(internalErrorObj),
+		onRefetch = externalRoles === undefined ? internalRefetch : undefined,
+	} = props;
+
+	const notFoundContent = isError ? (
+		<ErrorContent error={error} onRefetch={onRefetch} />
+	) : undefined;
+
+	if (mode === 'multiple') {
+		const { value = [], onChange } = props as MultipleProps;
+		return (
+			<Select
+				id={id}
+				mode="multiple"
+				value={value}
+				onChange={onChange}
+				placeholder={placeholder}
+				className={className}
+				loading={loading}
+				notFoundContent={notFoundContent}
+				options={options}
+				optionRender={(option): JSX.Element => (
+					<Checkbox
+						checked={value.includes(option.value as string)}
+						style={{ pointerEvents: 'none' }}
+					>
+						{option.label}
+					</Checkbox>
+				)}
+				getPopupContainer={getPopupContainer}
+			/>
+		);
+	}
+
+	const { value, onChange } = props as SingleProps;
+	return (
+		<Select
+			id={id}
+			value={value}
+			onChange={onChange}
+			placeholder={placeholder}
+			className={className}
+			loading={loading}
+			notFoundContent={notFoundContent}
+			options={options}
+			getPopupContainer={getPopupContainer}
+		/>
+	);
+}
+
+export default RolesSelect;

frontend/src/components/RolesSelect/index.ts

@@ -0,0 +1,2 @@
+export type { RoleOption, RolesSelectProps } from './RolesSelect';
+export { default, getRoleOptions, useRoles } from './RolesSelect';

frontend/src/components/ServiceAccountDrawer/AddKeyModal.styles.scss

@@ -0,0 +1,179 @@
+.add-key-modal {
+	[data-slot='dialog-description'] {
+		padding: 0;
+	}
+
+	&__form {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-8);
+		padding: var(--padding-4);
+	}
+
+	&__field {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-4);
+	}
+
+	&__label {
+		font-size: var(--font-size-sm);
+		font-weight: var(--font-weight-normal);
+		color: var(--foreground);
+		line-height: var(--line-height-20);
+		letter-spacing: -0.07px;
+	}
+
+	&__input {
+		height: 32px;
+		background: var(--l2-background);
+		border-color: var(--border);
+		color: var(--l1-foreground);
+		box-shadow: none;
+
+		&::placeholder {
+			color: var(--l3-foreground);
+		}
+	}
+
+	&__expiry-toggle {
+		width: 60%;
+		display: flex;
+		border: 1px solid var(--border);
+		border-radius: 2px;
+		overflow: hidden;
+		padding: 0;
+		gap: 0;
+
+		[data-slot='toggle-group'] {
+			width: 100%;
+			display: flex;
+		}
+
+		&-btn {
+			flex: 1;
+			height: 32px;
+			border-radius: 0;
+			font-size: var(--label-small-400-font-size);
+			font-weight: var(--label-small-400-font-weight);
+			line-height: var(--label-small-400-line-height);
+			justify-content: center;
+			background: transparent;
+			border: none;
+			border-right: 1px solid var(--border);
+			color: var(--foreground);
+
+			&:last-child {
+				border-right: none;
+			}
+
+			&[data-state='on'] {
+				background: var(--l2-background);
+				color: var(--l1-foreground);
+			}
+		}
+	}
+
+	&__datepicker {
+		width: 100%;
+		height: 32px;
+
+		.ant-picker {
+			background: var(--l2-background);
+			border-color: var(--border);
+			border-radius: 2px;
+			width: 100%;
+			height: 32px;
+
+			input {
+				color: var(--l1-foreground);
+				font-size: var(--font-size-sm);
+			}
+
+			.ant-picker-suffix {
+				color: var(--foreground);
+			}
+		}
+
+		.add-key-modal-datepicker-popup {
+			border-radius: 4px;
+			border: 1px solid var(--secondary);
+			background: var(--popover);
+			box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
+		}
+	}
+
+	&__key-display {
+		display: flex;
+		align-items: center;
+		height: 32px;
+		background: var(--l2-background);
+		border: 1px solid var(--border);
+		border-radius: 2px;
+		overflow: hidden;
+	}
+
+	&__key-text {
+		flex: 1;
+		min-width: 0;
+		padding: 0 var(--padding-2);
+		font-size: var(--font-size-sm);
+		color: var(--l1-foreground);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		font-family: monospace;
+	}
+
+	&__copy-btn {
+		flex-shrink: 0;
+		height: 32px;
+		border-radius: 0 2px 2px 0;
+		border-top: none;
+		border-right: none;
+		border-bottom: none;
+		border-left: 1px solid var(--border);
+		min-width: 40px;
+	}
+
+	&__expiry-meta {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-2);
+	}
+
+	&__expiry-label {
+		font-size: var(--font-size-xs);
+		font-weight: var(--font-weight-medium);
+		color: var(--foreground);
+		letter-spacing: 0.48px;
+		text-transform: uppercase;
+	}
+
+	&__footer {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		padding: var(--padding-4);
+		border-top: 1px solid var(--secondary);
+	}
+
+	&__footer-right {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-4);
+	}
+
+	&__learn-more {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--spacing-1);
+		color: var(--primary);
+		font-size: var(--font-size-sm);
+		text-decoration: none;
+
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+}

frontend/src/components/ServiceAccountDrawer/AddKeyModal.tsx

@@ -0,0 +1,267 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Badge } from '@signozhq/badge';
+import { Button } from '@signozhq/button';
+import { Callout } from '@signozhq/callout';
+import { DialogWrapper } from '@signozhq/dialog';
+import { Check, Copy } from '@signozhq/icons';
+import { Input } from '@signozhq/input';
+import { toast } from '@signozhq/sonner';
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
+import { DatePicker } from 'antd';
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import { useCreateServiceAccountKey } from 'api/generated/services/serviceaccount';
+import type {
+	RenderErrorResponseDTO,
+	ServiceaccounttypesGettableFactorAPIKeyWithKeyDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
+import type { Dayjs } from 'dayjs';
+import { popupContainer } from 'utils/selectPopupContainer';
+
+import { disabledDate } from './utils';
+
+import './AddKeyModal.styles.scss';
+
+interface AddKeyModalProps {
+	open: boolean;
+	accountId: string;
+	onClose: () => void;
+	onSuccess: () => void;
+}
+
+type Phase = 'form' | 'created';
+type ExpiryMode = 'none' | 'date';
+
+function AddKeyModal({
+	open,
+	accountId,
+	onClose,
+	onSuccess,
+}: AddKeyModalProps): JSX.Element {
+	const [phase, setPhase] = useState<Phase>('form');
+	const [keyName, setKeyName] = useState('');
+	const [expiryMode, setExpiryMode] = useState<ExpiryMode>('none');
+	const [expiryDate, setExpiryDate] = useState<Dayjs | null>(null);
+	const [isSubmitting, setIsSubmitting] = useState(false);
+	const [
+		createdKey,
+		setCreatedKey,
+	] = useState<ServiceaccounttypesGettableFactorAPIKeyWithKeyDTO | null>(null);
+	const [hasCopied, setHasCopied] = useState(false);
+
+	useEffect(() => {
+		if (open) {
+			setPhase('form');
+			setKeyName('');
+			setExpiryMode('none');
+			setExpiryDate(null);
+			setIsSubmitting(false);
+			setCreatedKey(null);
+			setHasCopied(false);
+		}
+	}, [open]);
+
+	const { mutateAsync: createKey } = useCreateServiceAccountKey();
+
+	const handleCreate = useCallback(async (): Promise<void> => {
+		if (!keyName.trim()) {
+			return;
+		}
+		setIsSubmitting(true);
+		try {
+			const expiresAt =
+				expiryMode === 'date' && expiryDate ? expiryDate.unix() : 0;
+			const response = await createKey({
+				pathParams: { id: accountId },
+				data: { name: keyName.trim(), expires_at: expiresAt },
+			});
+			const keyData = response?.data;
+			if (keyData) {
+				setCreatedKey(keyData);
+				setPhase('created');
+			}
+		} catch (error: unknown) {
+			const errMessage =
+				convertToApiError(
+					error as AxiosError<RenderErrorResponseDTO, unknown> | null,
+				)?.getErrorMessage() || 'Failed to create key';
+			toast.error(errMessage, { richColors: true });
+		} finally {
+			setIsSubmitting(false);
+		}
+	}, [keyName, expiryMode, expiryDate, accountId, createKey]);
+
+	const handleCopy = useCallback(async (): Promise<void> => {
+		if (!createdKey?.key) {
+			return;
+		}
+		try {
+			await navigator.clipboard.writeText(createdKey.key);
+			setHasCopied(true);
+			setTimeout(() => setHasCopied(false), 2000);
+			toast.success('Key copied to clipboard', { richColors: true });
+		} catch {
+			toast.error('Failed to copy key', { richColors: true });
+		}
+	}, [createdKey]);
+
+	const handleClose = useCallback((): void => {
+		if (phase === 'created') {
+			onSuccess();
+		}
+		onClose();
+	}, [phase, onSuccess, onClose]);
+
+	const expiryLabel = (): string => {
+		if (expiryMode === 'none' || !expiryDate) {
+			return 'Never';
+		}
+		try {
+			return expiryDate.format('MMM D, YYYY');
+		} catch {
+			return 'Never';
+		}
+	};
+
+	const title = phase === 'form' ? 'Add a New Key' : 'Key Created Successfully';
+
+	return (
+		<DialogWrapper
+			open={open}
+			onOpenChange={(isOpen): void => {
+				if (!isOpen) {
+					handleClose();
+				}
+			}}
+			title={title}
+			width="base"
+			className="add-key-modal"
+			showCloseButton
+			disableOutsideClick={false}
+		>
+			{phase === 'form' && (
+				<>
+					<div className="add-key-modal__form">
+						<div className="add-key-modal__field">
+							<label className="add-key-modal__label" htmlFor="key-name">
+								Name <span style={{ color: 'var(--destructive)' }}>*</span>
+							</label>
+							<Input
+								id="key-name"
+								value={keyName}
+								onChange={(e): void => setKeyName(e.target.value)}
+								placeholder="Enter key name e.g.: Service Owner"
+								className="add-key-modal__input"
+							/>
+						</div>
+
+						<div className="add-key-modal__field">
+							<span className="add-key-modal__label">Expiration</span>
+							<ToggleGroup
+								type="single"
+								value={expiryMode}
+								onValueChange={(val): void => {
+									if (val) {
+										setExpiryMode(val as ExpiryMode);
+										if (val === 'none') {
+											setExpiryDate(null);
+										}
+									}
+								}}
+								className="add-key-modal__expiry-toggle"
+							>
+								<ToggleGroupItem
+									value="none"
+									className="add-key-modal__expiry-toggle-btn"
+								>
+									No Expiration
+								</ToggleGroupItem>
+								<ToggleGroupItem
+									value="date"
+									className="add-key-modal__expiry-toggle-btn"
+								>
+									Set Expiration Date
+								</ToggleGroupItem>
+							</ToggleGroup>
+						</div>
+
+						{expiryMode === 'date' && (
+							<div className="add-key-modal__field">
+								<label className="add-key-modal__label" htmlFor="expiry-date">
+									Expiration Date
+								</label>
+								<div className="add-key-modal__datepicker">
+									<DatePicker
+										id="expiry-date"
+										value={expiryDate}
+										onChange={(date): void => setExpiryDate(date)}
+										popupClassName="add-key-modal-datepicker-popup"
+										getPopupContainer={popupContainer}
+										disabledDate={disabledDate}
+									/>
+								</div>
+							</div>
+						)}
+					</div>
+
+					<div className="add-key-modal__footer">
+						<div className="add-key-modal__footer-right">
+							<Button
+								variant="solid"
+								color="secondary"
+								size="sm"
+								onClick={handleClose}
+							>
+								Cancel
+							</Button>
+							<Button
+								variant="solid"
+								color="primary"
+								size="sm"
+								disabled={!keyName.trim() || isSubmitting}
+								onClick={handleCreate}
+							>
+								{isSubmitting ? 'Creating...' : 'Create Key'}
+							</Button>
+						</div>
+					</div>
+				</>
+			)}
+
+			{phase === 'created' && createdKey && (
+				<>
+					<div className="add-key-modal__form">
+						<div className="add-key-modal__field">
+							<span className="add-key-modal__label">Key</span>
+							<div className="add-key-modal__key-display">
+								<span className="add-key-modal__key-text">{createdKey.key}</span>
+								<Button
+									variant="outlined"
+									color="secondary"
+									size="sm"
+									onClick={handleCopy}
+									className="add-key-modal__copy-btn"
+								>
+									{hasCopied ? <Check size={12} /> : <Copy size={12} />}
+								</Button>
+							</div>
+						</div>
+
+						<div className="add-key-modal__expiry-meta">
+							<span className="add-key-modal__expiry-label">Expiration</span>
+							<Badge color="vanilla">{expiryLabel()}</Badge>
+						</div>
+
+						<Callout
+							type="info"
+							showIcon
+							message="Store the key securely. This is the only time it will be displayed."
+						/>
+					</div>
+				</>
+			)}
+		</DialogWrapper>
+	);
+}
+
+export default AddKeyModal;

frontend/src/components/ServiceAccountDrawer/EditKeyModal.styles.scss

@@ -0,0 +1,188 @@
+.edit-key-modal {
+	[data-slot='dialog-description'] {
+		padding: 0;
+	}
+
+	&__form {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-8);
+		padding: var(--padding-4);
+	}
+
+	&__field {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-4);
+	}
+
+	&__label {
+		font-size: 13px;
+		font-weight: var(--font-weight-normal);
+		color: var(--foreground);
+		line-height: var(--line-height-20);
+		letter-spacing: -0.07px;
+	}
+
+	&__input {
+		height: 32px;
+		background: var(--l2-background);
+		border-color: var(--border);
+		color: var(--l1-foreground);
+		box-shadow: none;
+
+		&::placeholder {
+			color: var(--l3-foreground);
+		}
+	}
+
+	&__key-display {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		height: 32px;
+		padding: 0 var(--padding-2);
+		border-radius: 2px;
+		background: var(--l2-background);
+		border: 1px solid var(--border);
+		cursor: not-allowed;
+		opacity: 0.8;
+	}
+
+	&__key-text {
+		font-size: 13px;
+		font-family: monospace;
+		color: var(--foreground);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		flex: 1;
+		letter-spacing: 2px;
+	}
+
+	&__lock-icon {
+		color: var(--foreground);
+		flex-shrink: 0;
+		margin-left: 6px;
+		opacity: 0.6;
+	}
+
+	&__expiry-toggle {
+		width: 60%;
+		display: flex;
+		border: 1px solid var(--border);
+		border-radius: 2px;
+		overflow: hidden;
+		padding: 0;
+		gap: 0;
+
+		[data-slot='toggle-group'] {
+			width: 100%;
+			display: flex;
+		}
+
+		&-btn {
+			flex: 1;
+			height: 32px;
+			border-radius: 0;
+			font-size: var(--label-small-400-font-size);
+			font-weight: var(--label-small-400-font-weight);
+			line-height: var(--label-small-400-line-height);
+			justify-content: center;
+			background: transparent;
+			border: none;
+			border-right: 1px solid var(--border);
+			color: var(--foreground);
+			white-space: nowrap;
+
+			&:last-child {
+				border-right: none;
+			}
+
+			&[data-state='on'] {
+				background: var(--l2-background);
+				color: var(--l1-foreground);
+			}
+		}
+	}
+
+	&__datepicker {
+		width: 100%;
+		height: 32px;
+
+		.ant-picker {
+			background: var(--l2-background);
+			border-color: var(--border);
+			border-radius: 2px;
+			width: 100%;
+			height: 32px;
+
+			input {
+				color: var(--l1-foreground);
+				font-size: 13px;
+			}
+
+			.ant-picker-suffix {
+				color: var(--foreground);
+			}
+		}
+
+		.edit-key-modal-datepicker-popup {
+			border-radius: 4px;
+			border: 1px solid var(--secondary);
+			background: var(--popover);
+			box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
+		}
+	}
+
+	&__meta {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-2);
+	}
+
+	&__meta-label {
+		font-size: var(--font-size-xs);
+		font-weight: var(--font-weight-medium);
+		color: var(--foreground);
+		letter-spacing: 0.48px;
+		text-transform: uppercase;
+	}
+
+	&__footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: var(--padding-4);
+		border-top: 1px solid var(--secondary);
+	}
+
+	&__footer-right {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-4);
+	}
+
+	&__footer-danger {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--spacing-2);
+		padding: 0;
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		color: var(--destructive);
+		font-size: var(--label-small-400-font-size);
+		font-weight: var(--label-small-400-font-weight);
+		transition: opacity 0.15s ease;
+
+		&:hover {
+			opacity: 0.8;
+		}
+
+		&:disabled {
+			opacity: 0.5;
+			cursor: not-allowed;
+		}
+	}
+}

frontend/src/components/ServiceAccountDrawer/EditKeyModal.tsx

@@ -0,0 +1,301 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Badge } from '@signozhq/badge';
+import { Button } from '@signozhq/button';
+import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
+import { LockKeyhole, Trash2, X } from '@signozhq/icons';
+import { Input } from '@signozhq/input';
+import { toast } from '@signozhq/sonner';
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
+import { DatePicker } from 'antd';
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import {
+	useRevokeServiceAccountKey,
+	useUpdateServiceAccountKey,
+} from 'api/generated/services/serviceaccount';
+import type {
+	RenderErrorResponseDTO,
+	ServiceaccounttypesFactorAPIKeyDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
+import type { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
+import { useTimezone } from 'providers/Timezone';
+import { popupContainer } from 'utils/selectPopupContainer';
+
+import { disabledDate, formatLastUsed } from './utils';
+
+import './EditKeyModal.styles.scss';
+
+interface EditKeyModalProps {
+	open: boolean;
+	accountId: string;
+	keyItem: ServiceaccounttypesFactorAPIKeyDTO | null;
+	onClose: () => void;
+	onSuccess: () => void;
+}
+
+type ExpiryMode = 'none' | 'date';
+
+// eslint-disable-next-line sonarjs/cognitive-complexity
+function EditKeyModal({
+	open,
+	accountId,
+	keyItem,
+	onClose,
+	onSuccess,
+}: EditKeyModalProps): JSX.Element {
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+	const [localName, setLocalName] = useState('');
+	const [expiryMode, setExpiryMode] = useState<ExpiryMode>('none');
+	const [localDate, setLocalDate] = useState<Dayjs | null>(null);
+	const [isRevokeConfirmOpen, setIsRevokeConfirmOpen] = useState(false);
+	const [isSaving, setIsSaving] = useState(false);
+	const [isRevoking, setIsRevoking] = useState(false);
+
+	useEffect(() => {
+		if (keyItem) {
+			setLocalName(keyItem.name ?? '');
+			if (keyItem.expires_at === 0) {
+				setExpiryMode('none');
+				setLocalDate(null);
+			} else {
+				setExpiryMode('date');
+				setLocalDate(dayjs.unix(keyItem.expires_at));
+			}
+		}
+	}, [keyItem]);
+
+	const originalExpiresAt = keyItem?.expires_at ?? 0;
+	const currentExpiresAt =
+		expiryMode === 'none' || !localDate ? 0 : localDate.unix();
+	const isDirty =
+		keyItem !== null &&
+		(localName !== (keyItem.name ?? '') ||
+			currentExpiresAt !== originalExpiresAt);
+
+	const { mutateAsync: updateKey } = useUpdateServiceAccountKey();
+	const { mutateAsync: revokeKey } = useRevokeServiceAccountKey();
+
+	const handleSave = useCallback(async (): Promise<void> => {
+		if (!keyItem || !isDirty) {
+			return;
+		}
+		setIsSaving(true);
+		try {
+			await updateKey({
+				pathParams: { id: accountId, fid: keyItem.id },
+				data: { name: localName, expires_at: currentExpiresAt },
+			});
+			toast.success('Key updated successfully', { richColors: true });
+			onSuccess();
+		} catch (error: unknown) {
+			const errMessage =
+				convertToApiError(
+					error as AxiosError<RenderErrorResponseDTO, unknown> | null,
+				)?.getErrorMessage() || 'Failed to update key';
+			toast.error(errMessage, { richColors: true });
+		} finally {
+			setIsSaving(false);
+		}
+	}, [
+		keyItem,
+		isDirty,
+		localName,
+		currentExpiresAt,
+		accountId,
+		updateKey,
+		onSuccess,
+	]);
+
+	const handleRevoke = useCallback(async (): Promise<void> => {
+		if (!keyItem) {
+			return;
+		}
+		setIsRevoking(true);
+		try {
+			await revokeKey({
+				pathParams: { id: accountId, fid: keyItem.id },
+			});
+			toast.success('Key revoked successfully', { richColors: true });
+			setIsRevokeConfirmOpen(false);
+			onSuccess();
+		} catch (error: unknown) {
+			const errMessage =
+				convertToApiError(
+					error as AxiosError<RenderErrorResponseDTO, unknown> | null,
+				)?.getErrorMessage() || 'Failed to revoke key';
+			toast.error(errMessage, { richColors: true });
+		} finally {
+			setIsRevoking(false);
+		}
+	}, [keyItem, accountId, revokeKey, onSuccess]);
+
+	return (
+		<DialogWrapper
+			open={open}
+			onOpenChange={(isOpen): void => {
+				if (!isOpen) {
+					if (isRevokeConfirmOpen) {
+						setIsRevokeConfirmOpen(false);
+					} else {
+						onClose();
+					}
+				}
+			}}
+			title={
+				isRevokeConfirmOpen
+					? `Revoke ${keyItem?.name ?? 'key'}?`
+					: 'Edit Key Details'
+			}
+			width={isRevokeConfirmOpen ? 'narrow' : 'base'}
+			className={
+				isRevokeConfirmOpen ? 'alert-dialog delete-dialog' : 'edit-key-modal'
+			}
+			showCloseButton={!isRevokeConfirmOpen}
+			disableOutsideClick={false}
+		>
+			{isRevokeConfirmOpen ? (
+				<>
+					<p className="delete-dialog__body">
+						Revoking this key will permanently invalidate it. Any systems using this
+						key will lose access immediately.
+					</p>
+					<DialogFooter className="delete-dialog__footer">
+						<Button
+							variant="solid"
+							color="secondary"
+							size="sm"
+							onClick={(): void => setIsRevokeConfirmOpen(false)}
+						>
+							<X size={12} />
+							Cancel
+						</Button>
+						<Button
+							variant="solid"
+							color="destructive"
+							size="sm"
+							disabled={isRevoking}
+							onClick={handleRevoke}
+						>
+							<Trash2 size={12} />
+							{isRevoking ? 'Revoking...' : 'Revoke Key'}
+						</Button>
+					</DialogFooter>
+				</>
+			) : (
+				<>
+					<div className="edit-key-modal__form">
+						<div className="edit-key-modal__field">
+							<label className="edit-key-modal__label" htmlFor="edit-key-name">
+								Name
+							</label>
+							<Input
+								id="edit-key-name"
+								value={localName}
+								onChange={(e): void => setLocalName(e.target.value)}
+								className="edit-key-modal__input"
+								placeholder="Enter key name"
+							/>
+						</div>
+
+						<div className="edit-key-modal__field">
+							<label className="edit-key-modal__label" htmlFor="edit-key-display">
+								Key
+							</label>
+							<div id="edit-key-display" className="edit-key-modal__key-display">
+								<span className="edit-key-modal__key-text">********************</span>
+								<LockKeyhole size={12} className="edit-key-modal__lock-icon" />
+							</div>
+						</div>
+
+						<div className="edit-key-modal__field">
+							<span className="edit-key-modal__label">Expiration</span>
+							<ToggleGroup
+								type="single"
+								value={expiryMode}
+								onValueChange={(val): void => {
+									if (val) {
+										setExpiryMode(val as ExpiryMode);
+										if (val === 'none') {
+											setLocalDate(null);
+										}
+									}
+								}}
+								className="edit-key-modal__expiry-toggle"
+							>
+								<ToggleGroupItem
+									value="none"
+									className="edit-key-modal__expiry-toggle-btn"
+								>
+									No Expiration
+								</ToggleGroupItem>
+								<ToggleGroupItem
+									value="date"
+									className="edit-key-modal__expiry-toggle-btn"
+								>
+									Set Expiration Date
+								</ToggleGroupItem>
+							</ToggleGroup>
+						</div>
+
+						{expiryMode === 'date' && (
+							<div className="edit-key-modal__field">
+								<label className="edit-key-modal__label" htmlFor="edit-key-datepicker">
+									Expiration Date
+								</label>
+								<div className="edit-key-modal__datepicker">
+									<DatePicker
+										value={localDate}
+										id="edit-key-datepicker"
+										onChange={(date): void => setLocalDate(date)}
+										popupClassName="edit-key-modal-datepicker-popup"
+										getPopupContainer={popupContainer}
+										disabledDate={disabledDate}
+									/>
+								</div>
+							</div>
+						)}
+
+						<div className="edit-key-modal__meta">
+							<span className="edit-key-modal__meta-label">Last Used</span>
+							<Badge color="vanilla">
+								{formatLastUsed(
+									keyItem?.last_used ?? null,
+									formatTimezoneAdjustedTimestamp,
+								)}
+							</Badge>
+						</div>
+					</div>
+
+					<div className="edit-key-modal__footer">
+						<Button
+							type="button"
+							className="edit-key-modal__footer-danger"
+							onClick={(): void => setIsRevokeConfirmOpen(true)}
+						>
+							<Trash2 size={12} />
+							Revoke Key
+						</Button>
+						<div className="edit-key-modal__footer-right">
+							<Button variant="solid" color="secondary" size="sm" onClick={onClose}>
+								<X size={12} />
+								Cancel
+							</Button>
+							<Button
+								variant="solid"
+								color="primary"
+								size="sm"
+								disabled={!isDirty || isSaving}
+								onClick={handleSave}
+							>
+								{isSaving ? 'Saving...' : 'Save Changes'}
+							</Button>
+						</div>
+					</div>
+				</>
+			)}
+		</DialogWrapper>
+	);
+}
+
+export default EditKeyModal;

frontend/src/components/ServiceAccountDrawer/KeysTab.tsx

@@ -0,0 +1,243 @@
+import { useCallback, useMemo, useState } from 'react';
+import { Button } from '@signozhq/button';
+import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
+import { Trash2, X } from '@signozhq/icons';
+import { toast } from '@signozhq/sonner';
+import { Skeleton, Tooltip } from 'antd';
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import { useRevokeServiceAccountKey } from 'api/generated/services/serviceaccount';
+import type {
+	RenderErrorResponseDTO,
+	ServiceaccounttypesFactorAPIKeyDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
+import dayjs from 'dayjs';
+import { useTimezone } from 'providers/Timezone';
+
+import EditKeyModal from './EditKeyModal';
+import { formatLastUsed } from './utils';
+
+interface KeysTabProps {
+	accountId: string;
+	keys: ServiceaccounttypesFactorAPIKeyDTO[];
+	isLoading: boolean;
+	isDisabled?: boolean;
+	currentPage: number;
+	pageSize: number;
+	onRefetch: () => void;
+	onAddKeyClick: () => void;
+}
+
+function formatExpiry(expiresAt: number): JSX.Element {
+	if (expiresAt === 0) {
+		return <span className="keys-tab__expiry--never">Never</span>;
+	}
+	const expiryDate = dayjs.unix(expiresAt);
+	if (expiryDate.isBefore(dayjs())) {
+		return <span className="keys-tab__expiry--expired">Expired</span>;
+	}
+	return <span>{expiryDate.format('MMM D, YYYY')}</span>;
+}
+
+function KeysTab({
+	accountId,
+	keys,
+	isLoading,
+	isDisabled = false,
+	currentPage,
+	pageSize,
+	onRefetch,
+	onAddKeyClick,
+}: KeysTabProps): JSX.Element {
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+	const [
+		editKey,
+		setEditKey,
+	] = useState<ServiceaccounttypesFactorAPIKeyDTO | null>(null);
+	const [
+		revokeTarget,
+		setRevokeTarget,
+	] = useState<ServiceaccounttypesFactorAPIKeyDTO | null>(null);
+	const [isRevoking, setIsRevoking] = useState(false);
+
+	const { mutateAsync: revokeKey } = useRevokeServiceAccountKey();
+
+	const handleRevoke = useCallback(async (): Promise<void> => {
+		if (!revokeTarget) {
+			return;
+		}
+		setIsRevoking(true);
+		try {
+			await revokeKey({
+				pathParams: { id: accountId, fid: revokeTarget.id },
+			});
+			toast.success('Key revoked successfully', { richColors: true });
+			setRevokeTarget(null);
+			onRefetch();
+		} catch (error: unknown) {
+			const errMessage =
+				convertToApiError(
+					error as AxiosError<RenderErrorResponseDTO, unknown> | null,
+				)?.getErrorMessage() || 'Failed to revoke key';
+			toast.error(errMessage, { richColors: true });
+		} finally {
+			setIsRevoking(false);
+		}
+	}, [revokeTarget, revokeKey, accountId, onRefetch]);
+
+	const handleKeySuccess = useCallback((): void => {
+		setEditKey(null);
+		onRefetch();
+	}, [onRefetch]);
+
+	const handleFormatLastUsed = useCallback(
+		(lastUsed: Date | null | undefined): string =>
+			formatLastUsed(lastUsed, formatTimezoneAdjustedTimestamp),
+		[formatTimezoneAdjustedTimestamp],
+	);
+
+	const paginatedKeys = useMemo(() => {
+		const start = (currentPage - 1) * pageSize;
+		return keys.slice(start, start + pageSize);
+	}, [keys, currentPage, pageSize]);
+
+	if (isLoading) {
+		return (
+			<div className="keys-tab__loading">
+				<Skeleton active paragraph={{ rows: 4 }} />
+			</div>
+		);
+	}
+
+	if (keys.length === 0) {
+		return (
+			<div className="keys-tab__empty">
+				<span className="keys-tab__empty-emoji" role="img" aria-label="searching">
+					🧐
+				</span>
+				<p className="keys-tab__empty-text">No keys. Start by creating one.</p>
+				<Button
+					type="button"
+					className="keys-tab__learn-more"
+					onClick={onAddKeyClick}
+					disabled={isDisabled}
+				>
+					+ Add your first key
+				</Button>
+			</div>
+		);
+	}
+
+	return (
+		<>
+			<div className="keys-tab__table-wrap">
+				<div className="keys-tab__table-header">
+					<span className="keys-tab__col-name">Name</span>
+					<span className="keys-tab__col-expiry">Expiry</span>
+					<span className="keys-tab__col-last-used">Last Used</span>
+					<span className="keys-tab__col-action" />
+				</div>
+
+				<div className="keys-tab__scroll">
+					{paginatedKeys.map((keyItem, idx) => (
+						<div
+							key={keyItem.id}
+							className={`keys-tab__table-row${
+								idx % 2 === 0 ? ' keys-tab__table-row--alt' : ''
+							}${isDisabled ? ' keys-tab__table-row--disabled' : ''}`}
+							onClick={(): void => {
+								if (!isDisabled) {
+									setEditKey(keyItem);
+								}
+							}}
+							role="button"
+							tabIndex={0}
+							onKeyDown={(e): void => {
+								if (e.key === 'Enter' && !isDisabled) {
+									setEditKey(keyItem);
+								}
+							}}
+						>
+							<span className="keys-tab__col-name keys-tab__name-text">
+								{keyItem.name ?? '—'}
+							</span>
+							<span className="keys-tab__col-expiry">
+								{formatExpiry(keyItem.expires_at)}
+							</span>
+							<span className="keys-tab__col-last-used">
+								{handleFormatLastUsed(keyItem?.last_used ?? null)}
+							</span>
+							<span className="keys-tab__col-action">
+								<Tooltip title={isDisabled ? 'Service account disabled' : 'Revoke Key'}>
+									<Button
+										variant="ghost"
+										size="xs"
+										color="destructive"
+										disabled={isDisabled}
+										onClick={(e): void => {
+											e.stopPropagation();
+											setRevokeTarget(keyItem);
+										}}
+										className="keys-tab__revoke-btn"
+									>
+										<X size={12} />
+									</Button>
+								</Tooltip>
+							</span>
+						</div>
+					))}
+				</div>
+			</div>
+
+			<DialogWrapper
+				open={revokeTarget !== null}
+				onOpenChange={(isOpen): void => {
+					if (!isOpen) {
+						setRevokeTarget(null);
+					}
+				}}
+				title={`Revoke ${revokeTarget?.name ?? 'key'}?`}
+				width="narrow"
+				className="alert-dialog delete-dialog"
+				showCloseButton={false}
+				disableOutsideClick={false}
+			>
+				<p className="delete-dialog__body">
+					Revoking this key will permanently invalidate it. Any systems using this
+					key will lose access immediately.
+				</p>
+				<DialogFooter className="delete-dialog__footer">
+					<Button
+						variant="solid"
+						color="secondary"
+						size="sm"
+						onClick={(): void => setRevokeTarget(null)}
+					>
+						<X size={12} />
+						Cancel
+					</Button>
+					<Button
+						variant="solid"
+						color="destructive"
+						size="sm"
+						disabled={isRevoking}
+						onClick={handleRevoke}
+					>
+						<Trash2 size={12} />
+						{isRevoking ? 'Revoking...' : 'Revoke Key'}
+					</Button>
+				</DialogFooter>
+			</DialogWrapper>
+
+			<EditKeyModal
+				open={editKey !== null}
+				accountId={accountId}
+				keyItem={editKey}
+				onClose={(): void => setEditKey(null)}
+				onSuccess={handleKeySuccess}
+			/>
+		</>
+	);
+}
+
+export default KeysTab;

frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx

@@ -0,0 +1,154 @@
+import { useCallback } from 'react';
+import { Badge } from '@signozhq/badge';
+import { LockKeyhole } from '@signozhq/icons';
+import { Input } from '@signozhq/input';
+import type { RoletypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
+import RolesSelect from 'components/RolesSelect';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { ServiceAccountRow } from 'container/ServiceAccountsSettings/utils';
+import { useTimezone } from 'providers/Timezone';
+import APIError from 'types/api/error';
+
+interface OverviewTabProps {
+	account: ServiceAccountRow;
+	localName: string;
+	onNameChange: (v: string) => void;
+	localRoles: string[];
+	onRolesChange: (v: string[]) => void;
+	isDisabled: boolean;
+	availableRoles: RoletypesRoleDTO[];
+	rolesLoading?: boolean;
+	rolesError?: boolean;
+	rolesErrorObj?: APIError | undefined;
+	onRefetchRoles?: () => void;
+}
+
+function OverviewTab({
+	account,
+	localName,
+	onNameChange,
+	localRoles,
+	onRolesChange,
+	isDisabled,
+	availableRoles,
+	rolesLoading,
+	rolesError,
+	rolesErrorObj,
+	onRefetchRoles,
+}: OverviewTabProps): JSX.Element {
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+
+	const formatTimestamp = useCallback(
+		(ts: string | null | undefined): string => {
+			if (!ts) {
+				return '—';
+			}
+			const d = new Date(ts);
+			if (Number.isNaN(d.getTime())) {
+				return '—';
+			}
+			return formatTimezoneAdjustedTimestamp(ts, DATE_TIME_FORMATS.DASH_DATETIME);
+		},
+		[formatTimezoneAdjustedTimestamp],
+	);
+
+	return (
+		<>
+			<div className="sa-drawer__field">
+				<label className="sa-drawer__label" htmlFor="sa-name">
+					Name
+				</label>
+				{isDisabled ? (
+					<div className="sa-drawer__input-wrapper sa-drawer__input-wrapper--disabled">
+						<span className="sa-drawer__input-text">{localName || '—'}</span>
+						<LockKeyhole size={14} className="sa-drawer__lock-icon" />
+					</div>
+				) : (
+					<Input
+						id="sa-name"
+						value={localName}
+						onChange={(e): void => onNameChange(e.target.value)}
+						className="sa-drawer__input"
+						placeholder="Enter name"
+					/>
+				)}
+			</div>
+
+			<div className="sa-drawer__field">
+				<label className="sa-drawer__label" htmlFor="sa-email">
+					Email Address
+				</label>
+				<div className="sa-drawer__input-wrapper sa-drawer__input-wrapper--disabled">
+					<span className="sa-drawer__input-text">{account.email || '—'}</span>
+					<LockKeyhole size={14} className="sa-drawer__lock-icon" />
+				</div>
+			</div>
+
+			<div className="sa-drawer__field">
+				<label className="sa-drawer__label" htmlFor="sa-roles">
+					Roles
+				</label>
+				{isDisabled ? (
+					<div className="sa-drawer__input-wrapper sa-drawer__input-wrapper--disabled">
+						<div className="sa-drawer__disabled-roles">
+							{localRoles.length > 0 ? (
+								localRoles.map((r) => (
+									<Badge key={r} color="vanilla">
+										{r}
+									</Badge>
+								))
+							) : (
+								<span className="sa-drawer__input-text">—</span>
+							)}
+						</div>
+						<LockKeyhole size={14} className="sa-drawer__lock-icon" />
+					</div>
+				) : (
+					<RolesSelect
+						id="sa-roles"
+						mode="multiple"
+						roles={availableRoles}
+						loading={rolesLoading}
+						isError={rolesError}
+						error={rolesErrorObj}
+						onRefetch={onRefetchRoles}
+						value={localRoles}
+						onChange={onRolesChange}
+						placeholder="Select roles"
+						className="sa-drawer__role-select"
+						getPopupContainer={(triggerNode): HTMLElement =>
+							(triggerNode?.closest('.sa-drawer') as HTMLElement) || document.body
+						}
+					/>
+				)}
+			</div>
+
+			<div className="sa-drawer__meta">
+				<div className="sa-drawer__meta-item">
+					<span className="sa-drawer__meta-label">Status</span>
+					{account.status?.toUpperCase() === 'ACTIVE' ? (
+						<Badge color="forest" variant="outline">
+							ACTIVE
+						</Badge>
+					) : (
+						<Badge color="vanilla" variant="outline" className="sa-status-badge">
+							DISABLED
+						</Badge>
+					)}
+				</div>
+
+				<div className="sa-drawer__meta-item">
+					<span className="sa-drawer__meta-label">Created At</span>
+					<Badge color="vanilla">{formatTimestamp(account.createdAt)}</Badge>
+				</div>
+
+				<div className="sa-drawer__meta-item">
+					<span className="sa-drawer__meta-label">Updated At</span>
+					<Badge color="vanilla">{formatTimestamp(account.updatedAt)}</Badge>
+				</div>
+			</div>
+		</>
+	);
+}
+
+export default OverviewTab;

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.styles.scss

@@ -0,0 +1,548 @@
+.sa-drawer {
+	[data-slot='drawer-close'] + div {
+		border-left: 1px solid var(--l1-border);
+		padding-left: var(--padding-4);
+		margin-left: var(--margin-2);
+	}
+
+	&__layout {
+		display: flex;
+		flex-direction: column;
+		height: calc(100vh - 48px);
+	}
+
+	&__tabs {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: var(--padding-3) var(--padding-4) var(--padding-2) var(--padding-4);
+		flex-shrink: 0;
+	}
+
+	&__tab-group {
+		[data-slot='toggle-group'] {
+			height: 32px;
+			border-radius: 2px;
+			border: 1px solid var(--l1-border);
+			background: var(--l2-background);
+			gap: 0;
+		}
+
+		[data-slot='toggle-group-item'] {
+			height: 32px;
+			border-radius: 0;
+			border-left: 1px solid var(--l1-border);
+			background: transparent;
+			color: var(--l2-foreground);
+			font-size: 12px;
+			font-weight: 400;
+			font-family: Inter, sans-serif;
+			padding: 0 var(--padding-7);
+			gap: var(--spacing-3);
+			box-shadow: none;
+
+			&:first-child {
+				border-left: none;
+				border-radius: 2px 0 0 2px;
+			}
+
+			&:last-child {
+				border-radius: 0 2px 2px 0;
+			}
+
+			&:hover {
+				background: rgba(171, 189, 255, 0.04);
+				color: var(--l1-foreground);
+			}
+
+			&[data-state='on'] {
+				background: var(--l1-border);
+				color: var(--l1-foreground);
+			}
+		}
+	}
+
+	&__tab {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--spacing-2);
+		font-size: var(--font-size-xs);
+		font-weight: var(--font-weight-normal);
+	}
+
+	&__tab-count {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 20px;
+		padding: 0 6px;
+		border-radius: 50px;
+		background: var(--secondary);
+		font-size: 11px;
+		font-weight: var(--font-weight-normal);
+		line-height: 20px;
+		color: var(--foreground);
+		letter-spacing: -0.06px;
+	}
+
+	&__body {
+		flex: 1;
+		overflow-y: auto;
+		padding: var(--padding-5) var(--padding-4);
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-8);
+	}
+
+	&__footer {
+		height: 56px;
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0 var(--padding-4);
+		border-top: 1px solid var(--secondary);
+		background: var(--card);
+	}
+
+	&__keys-pagination {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		width: 100%;
+		padding: var(--padding-2) 0;
+
+		.ant-pagination-total-text {
+			margin-right: auto;
+		}
+	}
+
+	&__pagination-range {
+		font-size: var(--font-size-xs);
+		color: var(--foreground);
+		font-weight: var(--font-weight-normal);
+	}
+
+	&__pagination-total {
+		font-size: var(--font-size-xs);
+		color: var(--foreground);
+		opacity: 0.5;
+	}
+
+	&__footer-btn {
+		padding-left: 0;
+		padding-right: 0;
+	}
+
+	&__footer-right {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-6);
+	}
+
+	&__field {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-4);
+	}
+
+	&__label {
+		font-size: var(--font-size-sm);
+		font-weight: var(--font-weight-normal);
+		color: var(--foreground);
+		line-height: var(--line-height-20);
+		letter-spacing: -0.07px;
+		cursor: default;
+	}
+
+	&__input {
+		height: 32px;
+		background: var(--l2-background);
+		border-color: var(--border);
+		color: var(--l1-foreground);
+		box-shadow: none;
+
+		&::placeholder {
+			color: var(--l3-foreground);
+		}
+	}
+
+	&__input-wrapper {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		height: 32px;
+		padding: 0 var(--padding-2);
+		border-radius: 2px;
+		background: var(--l2-background);
+		border: 1px solid var(--border);
+
+		&--disabled {
+			cursor: not-allowed;
+			opacity: 0.8;
+		}
+	}
+
+	&__input-text {
+		font-size: var(--font-size-sm);
+		font-weight: var(--font-weight-normal);
+		color: var(--foreground);
+		line-height: var(--line-height-18);
+		letter-spacing: -0.07px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		flex: 1;
+	}
+
+	&__lock-icon {
+		color: var(--foreground);
+		flex-shrink: 0;
+		margin-left: 6px;
+		opacity: 0.6;
+	}
+
+	&__role-select {
+		width: 100%;
+		min-height: 32px;
+
+		.ant-select-selector {
+			background-color: var(--l2-background) !important;
+			border-color: var(--border) !important;
+			border-radius: 2px;
+			padding: 2px var(--padding-2) !important;
+			display: flex;
+			align-items: center;
+			flex-wrap: wrap;
+			min-height: 32px;
+		}
+
+		.ant-select-selection-overflow {
+			display: flex;
+			flex-wrap: wrap;
+			align-items: center;
+			gap: 2px;
+			padding: 2px 0;
+		}
+
+		.ant-select-selection-overflow-item {
+			display: flex;
+			align-items: center;
+		}
+
+		.ant-select-selection-item {
+			display: flex;
+			align-items: center;
+			height: 22px;
+			font-size: var(--font-size-sm);
+			color: var(--l1-foreground);
+			background: var(--l3-background);
+			border: 1px solid var(--border);
+			border-radius: 2px;
+			padding: 0 4px 0 6px;
+			line-height: 20px;
+			letter-spacing: -0.07px;
+			margin: 0;
+		}
+
+		.ant-select-selection-item-remove {
+			display: flex;
+			align-items: center;
+			color: var(--foreground);
+			margin-left: 2px;
+		}
+
+		.ant-select-selection-placeholder {
+			font-size: var(--font-size-sm);
+			color: var(--l3-foreground);
+		}
+
+		.ant-select-arrow {
+			color: var(--foreground);
+		}
+
+		&:not(.ant-select-disabled):hover .ant-select-selector {
+			border-color: var(--foreground);
+		}
+	}
+
+	&__disabled-roles {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--spacing-2);
+	}
+
+	&__meta {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-8);
+		margin-top: var(--margin-1);
+	}
+
+	&__meta-item {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-2);
+
+		[data-slot='badge'] {
+			padding: var(--padding-1) var(--padding-2);
+			align-items: center;
+			font-size: var(--uppercase-small-500-font-size);
+			font-weight: var(--uppercase-small-500-font-weight);
+			line-height: 100%;
+			letter-spacing: 0.44px;
+			text-transform: uppercase;
+		}
+	}
+
+	&__meta-label {
+		font-size: var(--font-size-xs);
+		font-weight: var(--font-weight-medium);
+		color: var(--foreground);
+		line-height: var(--line-height-20);
+		letter-spacing: 0.48px;
+		text-transform: uppercase;
+	}
+}
+
+.keys-tab {
+	&__loading {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: var(--padding-8) var(--padding-4);
+	}
+
+	&__empty {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: var(--padding-8) var(--padding-4);
+		gap: var(--spacing-4);
+		text-align: center;
+		height: 80%;
+	}
+
+	&__empty-emoji {
+		font-size: 32px;
+	}
+
+	&__empty-text {
+		font-size: var(--paragraph-base-400-font-size);
+		font-weight: var(--paragraph-base-400-font-weight);
+		color: var(--foreground);
+		margin: 0;
+	}
+
+	&__learn-more {
+		background: transparent;
+		border: none;
+		color: var(--primary);
+		font-size: var(--font-size-sm);
+		cursor: pointer;
+		text-decoration: none;
+
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+
+	&__table-wrap {
+		border: 1px solid var(--l1-border);
+		border-radius: 4px;
+		overflow: hidden;
+	}
+
+	&__table-header {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-2);
+		height: 38px;
+		padding: 0 var(--padding-4);
+		border-bottom: 1px solid var(--l1-border);
+		background: transparent;
+	}
+
+	&__col-name {
+		flex: 1;
+		min-width: 0;
+		font-size: 11px;
+		font-weight: var(--font-weight-medium);
+		color: var(--l2-foreground);
+		letter-spacing: 0.44px;
+		text-transform: uppercase;
+	}
+
+	&__col-expiry {
+		width: 100px;
+		text-align: right;
+		font-size: 11px;
+		font-weight: var(--font-weight-medium);
+		color: var(--l2-foreground);
+		letter-spacing: 0.44px;
+		text-transform: uppercase;
+		flex-shrink: 0;
+	}
+
+	&__col-last-used {
+		width: 180px;
+		text-align: right;
+		font-size: 11px;
+		font-weight: var(--font-weight-medium);
+		color: var(--l2-foreground);
+		letter-spacing: 0.44px;
+		text-transform: uppercase;
+		flex-shrink: 0;
+	}
+
+	&__col-action {
+		width: 40px;
+		display: flex;
+		justify-content: flex-end;
+		flex-shrink: 0;
+	}
+
+	&__table-row {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-2);
+		height: 38px;
+		padding: 0 var(--padding-4);
+		border-bottom: 1px solid var(--l1-border);
+		cursor: pointer;
+
+		&:last-of-type {
+			border-bottom: none;
+		}
+
+		&:not(.keys-tab__table-row--disabled):hover {
+			background: rgba(171, 189, 255, 0.06);
+		}
+
+		&--alt {
+			background: rgba(171, 189, 255, 0.02);
+
+			&:not(.keys-tab__table-row--disabled):hover {
+				background: rgba(171, 189, 255, 0.06);
+			}
+		}
+
+		&--disabled {
+			cursor: not-allowed;
+			opacity: 0.6;
+
+			&:hover {
+				background: transparent;
+			}
+		}
+
+		.keys-tab__col-expiry,
+		.keys-tab__col-last-used {
+			font-size: var(--font-size-sm);
+			font-weight: var(--font-weight-normal);
+			color: var(--l2-foreground);
+			letter-spacing: -0.07px;
+			text-transform: none;
+		}
+	}
+
+	&__name-text {
+		font-size: var(--font-size-sm);
+		font-weight: var(--font-weight-normal);
+		color: var(--l2-foreground);
+		letter-spacing: -0.07px;
+		text-transform: none;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	&__expiry--never {
+		color: var(--l2-foreground);
+	}
+
+	&__expiry--expired {
+		color: var(--l3-foreground);
+	}
+
+	&__revoke-btn {
+		width: 32px;
+		height: 32px;
+		padding: 0;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	&__scroll {
+		overflow-y: auto;
+		max-height: calc(100% - 20px);
+
+		scrollbar-width: thin;
+		scrollbar-color: var(--l2-border) transparent;
+
+		&::-webkit-scrollbar {
+			width: 4px;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: transparent;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: var(--l1-border);
+			border-radius: 4px;
+		}
+	}
+
+	&__pagination {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		padding: var(--padding-2) var(--padding-4);
+		border-top: 1px solid var(--l1-border);
+	}
+}
+
+@keyframes spin {
+	from {
+		transform: rotate(0deg);
+	}
+
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+// Activate/disable confirm dialogs
+.sa-activate-dialog,
+.sa-disable-dialog {
+	background: var(--l2-background);
+	border: 1px solid var(--l2-border);
+
+	[data-slot='dialog-title'] {
+		color: var(--l1-foreground);
+	}
+
+	&__body {
+		font-size: var(--paragraph-base-400-font-size);
+		font-weight: var(--paragraph-base-400-font-weight);
+		color: var(--l2-foreground);
+		line-height: var(--paragraph-base-400-line-height);
+		letter-spacing: -0.065px;
+		margin: 0;
+
+		strong {
+			font-weight: var(--font-weight-medium);
+			color: var(--l1-foreground);
+		}
+	}
+
+	&__footer {
+		display: flex;
+		justify-content: flex-end;
+		gap: var(--spacing-4);
+		margin-top: var(--margin-6);
+	}
+}

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx

@@ -0,0 +1,447 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Button } from '@signozhq/button';
+import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
+import { DrawerWrapper } from '@signozhq/drawer';
+import {
+	Check,
+	Key,
+	LayoutGrid,
+	Plus,
+	PowerOff,
+	Trash2,
+	X,
+} from '@signozhq/icons';
+import { toast } from '@signozhq/sonner';
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
+import { Pagination } from 'antd';
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import {
+	useListServiceAccountKeys,
+	useUpdateServiceAccount,
+	useUpdateServiceAccountStatus,
+} from 'api/generated/services/serviceaccount';
+import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
+import { useRoles } from 'components/RolesSelect';
+import { ServiceAccountRow } from 'container/ServiceAccountsSettings/utils';
+
+import AddKeyModal from './AddKeyModal';
+import KeysTab from './KeysTab';
+import OverviewTab from './OverviewTab';
+
+import './ServiceAccountDrawer.styles.scss';
+
+export interface ServiceAccountDrawerProps {
+	account: ServiceAccountRow | null;
+	open: boolean;
+	onClose: () => void;
+	onSuccess: () => void;
+}
+
+const PAGE_SIZE = 15;
+
+// eslint-disable-next-line sonarjs/cognitive-complexity
+function ServiceAccountDrawer({
+	account,
+	open,
+	onClose,
+	onSuccess,
+}: ServiceAccountDrawerProps): JSX.Element {
+	const [activeTab, setActiveTab] = useState<'overview' | 'keys'>('overview');
+	const [isActivateConfirmOpen, setIsActivateConfirmOpen] = useState(false);
+	const [isDisableConfirmOpen, setIsDisableConfirmOpen] = useState(false);
+	const [localName, setLocalName] = useState('');
+	const [localRoles, setLocalRoles] = useState<string[]>([]);
+	const [isSaving, setIsSaving] = useState(false);
+	const [isDisabling, setIsDisabling] = useState(false);
+	const [isActivating, setIsActivating] = useState(false);
+	const [isAddKeyOpen, setIsAddKeyOpen] = useState(false);
+	const [keysPage, setKeysPage] = useState(1);
+
+	useEffect(() => {
+		if (account) {
+			setLocalName(account.name ?? '');
+			setLocalRoles(account.roles ?? []);
+			setActiveTab('overview');
+			setKeysPage(1);
+		}
+	}, [account]);
+
+	const isDisabled = account?.status?.toUpperCase() !== 'ACTIVE';
+
+	const isDirty =
+		account !== null &&
+		(localName !== (account.name ?? '') ||
+			JSON.stringify(localRoles) !== JSON.stringify(account.roles ?? []));
+
+	const {
+		roles: availableRoles,
+		isLoading: rolesLoading,
+		isError: rolesError,
+		error: rolesErrorObj,
+		refetch: refetchRoles,
+	} = useRoles();
+
+	const {
+		data: keysData,
+		isLoading: keysLoading,
+		refetch: refetchKeys,
+	} = useListServiceAccountKeys(
+		{ id: account?.id ?? '' },
+		{ query: { enabled: !!account?.id } },
+	);
+	const keys = keysData?.data ?? [];
+
+	useEffect(() => {
+		if (keysLoading) {
+			return;
+		}
+		const maxPage = Math.max(1, Math.ceil(keys.length / PAGE_SIZE));
+		if (keysPage > maxPage) {
+			setKeysPage(maxPage);
+		}
+	}, [keysLoading, keys.length, keysPage]);
+
+	const { mutateAsync: updateAccount } = useUpdateServiceAccount();
+	const { mutateAsync: updateStatus } = useUpdateServiceAccountStatus();
+
+	const handleSave = useCallback(async (): Promise<void> => {
+		if (!account || !isDirty) {
+			return;
+		}
+		setIsSaving(true);
+		try {
+			await updateAccount({
+				pathParams: { id: account.id },
+				data: { name: localName, email: account.email, roles: localRoles },
+			});
+			toast.success('Service account updated successfully', { richColors: true });
+			onSuccess();
+		} catch (error: unknown) {
+			const errMessage =
+				convertToApiError(
+					error as AxiosError<RenderErrorResponseDTO, unknown> | null,
+				)?.getErrorMessage() || 'Failed to update service account';
+			toast.error(errMessage, { richColors: true });
+		} finally {
+			setIsSaving(false);
+		}
+	}, [account, isDirty, localName, localRoles, updateAccount, onSuccess]);
+
+	const handleDisable = useCallback(async (): Promise<void> => {
+		if (!account) {
+			return;
+		}
+		setIsDisabling(true);
+		try {
+			await updateStatus({
+				pathParams: { id: account.id },
+				data: { status: 'DISABLED' },
+			});
+			toast.success('Service account disabled', { richColors: true });
+			setIsDisableConfirmOpen(false);
+			onSuccess();
+		} catch (error: unknown) {
+			const errMessage =
+				convertToApiError(
+					error as AxiosError<RenderErrorResponseDTO, unknown> | null,
+				)?.getErrorMessage() || 'Failed to disable service account';
+			toast.error(errMessage, { richColors: true });
+		} finally {
+			setIsDisabling(false);
+		}
+	}, [account, updateStatus, onSuccess]);
+
+	const handleActivate = useCallback(async (): Promise<void> => {
+		if (!account) {
+			return;
+		}
+		setIsActivating(true);
+		try {
+			await updateStatus({
+				pathParams: { id: account.id },
+				data: { status: 'ACTIVE' },
+			});
+			toast.success('Service account activated', { richColors: true });
+			setIsActivateConfirmOpen(false);
+			onSuccess();
+		} catch (error: unknown) {
+			const errMessage =
+				convertToApiError(
+					error as AxiosError<RenderErrorResponseDTO, unknown> | null,
+				)?.getErrorMessage() || 'Failed to activate service account';
+			toast.error(errMessage, { richColors: true });
+		} finally {
+			setIsActivating(false);
+		}
+	}, [account, updateStatus, onSuccess]);
+
+	const handleClose = useCallback((): void => {
+		setIsActivateConfirmOpen(false);
+		setIsDisableConfirmOpen(false);
+		setIsAddKeyOpen(false);
+		onClose();
+	}, [onClose]);
+
+	const handleKeySuccess = useCallback((): void => {
+		setIsAddKeyOpen(false);
+		refetchKeys();
+	}, [refetchKeys]);
+
+	const drawerContent = (
+		<div className="sa-drawer__layout">
+			<div className="sa-drawer__tabs">
+				<ToggleGroup
+					type="single"
+					value={activeTab}
+					onValueChange={(val): void => {
+						if (val) {
+							setActiveTab(val as 'overview' | 'keys');
+						}
+					}}
+					className="sa-drawer__tab-group"
+				>
+					<ToggleGroupItem value="overview" className="sa-drawer__tab">
+						<LayoutGrid size={14} />
+						Overview
+					</ToggleGroupItem>
+					<ToggleGroupItem value="keys" className="sa-drawer__tab">
+						<Key size={14} />
+						Keys
+						{keys.length > 0 && (
+							<span className="sa-drawer__tab-count">{keys.length}</span>
+						)}
+					</ToggleGroupItem>
+				</ToggleGroup>
+				{activeTab === 'keys' && (
+					<Button
+						variant="outlined"
+						size="sm"
+						color="secondary"
+						disabled={isDisabled}
+						onClick={(): void => setIsAddKeyOpen(true)}
+					>
+						<Plus size={12} />
+						Add Key
+					</Button>
+				)}
+			</div>
+
+			<div
+				className={`sa-drawer__body${
+					activeTab === 'keys' ? ' sa-drawer__body--keys' : ''
+				}`}
+			>
+				{activeTab === 'overview' && account && (
+					<OverviewTab
+						account={account}
+						localName={localName}
+						onNameChange={setLocalName}
+						localRoles={localRoles}
+						onRolesChange={setLocalRoles}
+						isDisabled={isDisabled}
+						availableRoles={availableRoles}
+						rolesLoading={rolesLoading}
+						rolesError={rolesError}
+						rolesErrorObj={rolesErrorObj}
+						onRefetchRoles={refetchRoles}
+					/>
+				)}
+				{activeTab === 'keys' && account && (
+					<KeysTab
+						accountId={account.id}
+						keys={keys}
+						isLoading={keysLoading}
+						isDisabled={isDisabled}
+						currentPage={keysPage}
+						pageSize={PAGE_SIZE}
+						onRefetch={refetchKeys}
+						onAddKeyClick={(): void => setIsAddKeyOpen(true)}
+					/>
+				)}
+			</div>
+
+			<div className="sa-drawer__footer">
+				{activeTab === 'keys' ? (
+					<Pagination
+						current={keysPage}
+						pageSize={PAGE_SIZE}
+						total={keys.length}
+						showTotal={(total: number, range: number[]): JSX.Element => (
+							<>
+								<span className="sa-drawer__pagination-range">
+									{range[0]} &#8212; {range[1]}
+								</span>
+								<span className="sa-drawer__pagination-total"> of {total}</span>
+							</>
+						)}
+						showSizeChanger={false}
+						hideOnSinglePage
+						onChange={(page): void => setKeysPage(page)}
+						className="sa-drawer__keys-pagination"
+					/>
+				) : (
+					<>
+						{isDisabled ? (
+							<Button
+								variant="ghost"
+								color="primary"
+								className="sa-drawer__footer-btn"
+								onClick={(): void => setIsActivateConfirmOpen(true)}
+							>
+								<Check size={12} />
+								Activate Service Account
+							</Button>
+						) : (
+							<Button
+								variant="ghost"
+								color="destructive"
+								className="sa-drawer__footer-btn"
+								onClick={(): void => setIsDisableConfirmOpen(true)}
+							>
+								<PowerOff size={12} />
+								Disable Service Account
+							</Button>
+						)}
+						{!isDisabled && (
+							<div className="sa-drawer__footer-right">
+								<Button
+									variant="solid"
+									color="secondary"
+									size="sm"
+									onClick={handleClose}
+								>
+									<X size={14} />
+									Cancel
+								</Button>
+								<Button
+									variant="solid"
+									color="primary"
+									size="sm"
+									disabled={!isDirty || isSaving}
+									onClick={handleSave}
+								>
+									{isSaving ? 'Saving...' : 'Save Changes'}
+								</Button>
+							</div>
+						)}
+					</>
+				)}
+			</div>
+		</div>
+	);
+
+	return (
+		<>
+			<DrawerWrapper
+				open={open}
+				onOpenChange={(isOpen): void => {
+					if (!isOpen) {
+						handleClose();
+					}
+				}}
+				direction="right"
+				type="panel"
+				showCloseButton
+				showOverlay={false}
+				allowOutsideClick
+				header={{ title: 'Service Account Details' }}
+				content={drawerContent}
+				className="sa-drawer"
+			/>
+
+			{/* Activate confirm dialog */}
+			<DialogWrapper
+				open={isActivateConfirmOpen}
+				onOpenChange={(isOpen): void => {
+					if (!isOpen) {
+						setIsActivateConfirmOpen(false);
+					}
+				}}
+				title={`Activate service account ${account?.name ?? ''}?`}
+				width="narrow"
+				className="alert-dialog sa-activate-dialog"
+				showCloseButton={false}
+				disableOutsideClick={false}
+			>
+				<p className="sa-activate-dialog__body">
+					Reactivating this service account will restore access for all its keys and
+					any systems using them.
+				</p>
+				<DialogFooter className="sa-activate-dialog__footer">
+					<Button
+						variant="solid"
+						color="secondary"
+						size="sm"
+						onClick={(): void => setIsActivateConfirmOpen(false)}
+					>
+						<X size={12} />
+						Cancel
+					</Button>
+					<Button
+						variant="solid"
+						color="primary"
+						size="sm"
+						disabled={isActivating}
+						onClick={handleActivate}
+					>
+						<Check size={12} />
+						{isActivating ? 'Activating...' : 'Activate'}
+					</Button>
+				</DialogFooter>
+			</DialogWrapper>
+
+			{/* Disable confirm dialog */}
+			<DialogWrapper
+				open={isDisableConfirmOpen}
+				onOpenChange={(isOpen): void => {
+					if (!isOpen) {
+						setIsDisableConfirmOpen(false);
+					}
+				}}
+				title={`Disable service account ${account?.name ?? ''}?`}
+				width="narrow"
+				className="alert-dialog sa-disable-dialog"
+				showCloseButton={false}
+				disableOutsideClick={false}
+			>
+				<p className="sa-disable-dialog__body">
+					Disabling this service account will revoke access for all its keys. Any
+					systems using this account will lose access immediately.
+				</p>
+				<DialogFooter className="sa-disable-dialog__footer">
+					<Button
+						variant="solid"
+						color="secondary"
+						size="sm"
+						onClick={(): void => setIsDisableConfirmOpen(false)}
+					>
+						<X size={12} />
+						Cancel
+					</Button>
+					<Button
+						variant="solid"
+						color="destructive"
+						size="sm"
+						disabled={isDisabling}
+						onClick={handleDisable}
+					>
+						<Trash2 size={12} />
+						{isDisabling ? 'Disabling...' : 'Disable'}
+					</Button>
+				</DialogFooter>
+			</DialogWrapper>
+
+			{account && (
+				<AddKeyModal
+					open={isAddKeyOpen}
+					accountId={account.id}
+					onClose={(): void => setIsAddKeyOpen(false)}
+					onSuccess={handleKeySuccess}
+				/>
+			)}
+		</>
+	);
+}
+
+export default ServiceAccountDrawer;

frontend/src/components/ServiceAccountDrawer/utils.ts

@@ -0,0 +1,25 @@
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import type { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
+
+export function formatLastUsed(
+	lastUsed: string | Date | null | undefined,
+	formatTimezoneAdjustedTimestamp: (ts: string, format: string) => string,
+): string {
+	if (!lastUsed) {
+		return '—';
+	}
+	const str = typeof lastUsed === 'string' ? lastUsed : lastUsed.toISOString();
+	// Go zero time means the key has never been used
+	if (str.startsWith('0001-01-01')) {
+		return '—';
+	}
+	const d = new Date(str);
+	if (Number.isNaN(d.getTime())) {
+		return '—';
+	}
+	return formatTimezoneAdjustedTimestamp(str, DATE_TIME_FORMATS.DASH_DATETIME);
+}
+
+export const disabledDate = (current: Dayjs): boolean =>
+	!!current && current < dayjs().endOf('day');

frontend/src/components/ServiceAccountsTable/ServiceAccountsTable.styles.scss

@@ -0,0 +1,218 @@
+.sa-table-wrapper {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0;
+	overflow: hidden;
+	border-radius: 4px;
+}
+
+.sa-table {
+	.ant-table {
+		background: transparent;
+		font-size: 13px;
+	}
+
+	.ant-table-container {
+		border-radius: 0 !important;
+		border: none !important;
+	}
+
+	.ant-table-thead {
+		> tr > th,
+		> tr > td {
+			background: var(--background);
+			font-size: var(--paragraph-small-600-font-size);
+			font-weight: var(--paragraph-small-600-font-weight);
+			line-height: var(--paragraph-small-600-line-height);
+			letter-spacing: 0.44px;
+			text-transform: uppercase;
+			color: var(--foreground);
+			padding: var(--padding-2) var(--padding-4);
+			border-bottom: none !important;
+			border-top: none !important;
+
+			&::before {
+				display: none !important;
+			}
+		}
+	}
+
+	.ant-table-tbody {
+		> tr > td {
+			border-bottom: none !important;
+			padding: var(--padding-2) var(--padding-4);
+			background: transparent;
+			transition: none;
+		}
+
+		> tr.sa-table-row--tinted > td {
+			background: rgba(171, 189, 255, 0.02);
+		}
+
+		> tr:hover > td {
+			background: rgba(171, 189, 255, 0.04) !important;
+		}
+	}
+
+	.ant-table-wrapper,
+	.ant-table-container,
+	.ant-spin-nested-loading,
+	.ant-spin-container {
+		border: none !important;
+		box-shadow: none !important;
+	}
+
+	.sa-name-column {
+		.ant-table-column-sorters {
+			justify-content: flex-start;
+			gap: var(--spacing-2);
+		}
+
+		.ant-table-column-title {
+			flex: none;
+		}
+	}
+
+	.sa-status-cell {
+		[data-slot='badge'] {
+			padding: var(--padding-1) var(--padding-2);
+			align-items: center;
+			font-size: var(--uppercase-small-500-font-size);
+			font-weight: var(--uppercase-small-500-font-weight);
+			line-height: 100%;
+			letter-spacing: 0.44px;
+			text-transform: uppercase;
+		}
+	}
+}
+
+.sa-name-email-cell {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-2);
+	height: 22px;
+	overflow: hidden;
+
+	.sa-name {
+		font-size: var(--paragraph-base-500-font-size);
+		font-weight: var(--paragraph-base-500-font-weight);
+		color: var(--foreground);
+		line-height: var(--paragraph-base-500-line-height);
+		letter-spacing: -0.07px;
+		white-space: nowrap;
+		flex-shrink: 0;
+	}
+
+	.sa-email {
+		font-size: var(--paragraph-base-400-font-size);
+		font-weight: var(--paragraph-base-400-font-weight);
+		color: var(--l3-foreground-hover);
+		line-height: var(--paragraph-base-400-line-height);
+		letter-spacing: -0.07px;
+		flex: 1 0 0;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+}
+
+.sa-roles-cell {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-2);
+}
+
+.sa-dash {
+	font-size: var(--paragraph-base-400-font-size);
+	color: var(--l3-foreground-hover);
+}
+
+.sa-empty-state {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: var(--padding-12) var(--padding-4);
+	gap: var(--spacing-4);
+	color: var(--foreground);
+
+	&__emoji {
+		font-size: var(--font-size-2xl);
+		line-height: 1;
+	}
+
+	&__text {
+		font-size: var(--paragraph-base-400-font-size);
+		font-weight: var(--paragraph-base-400-font-weight);
+		color: var(--foreground);
+		margin: 0;
+		line-height: var(--paragraph-base-400-font-height);
+
+		strong {
+			font-weight: var(--font-weight-medium);
+			color: var(--bg-base-white);
+		}
+	}
+}
+
+.sa-table-pagination {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	padding: var(--padding-2) var(--padding-4);
+
+	.ant-pagination-total-text {
+		margin-right: auto;
+	}
+
+	.sa-pagination-range {
+		font-size: var(--font-size-xs);
+		color: var(--foreground);
+	}
+
+	.sa-pagination-total {
+		font-size: var(--font-size-xs);
+		color: var(--foreground);
+		opacity: 0.5;
+	}
+}
+
+.sa-tooltip {
+	.ant-tooltip-inner {
+		background-color: var(--bg-slate-500);
+		color: var(--foreground);
+		font-size: var(--font-size-xs);
+		line-height: normal;
+		padding: var(--padding-2) var(--padding-3);
+		border-radius: 4px;
+		text-align: left;
+	}
+
+	.ant-tooltip-arrow-content {
+		background-color: var(--bg-slate-500);
+	}
+}
+
+.lightMode {
+	.sa-table {
+		.ant-table-tbody {
+			> tr.sa-table-row--tinted > td {
+				background: rgba(0, 0, 0, 0.015);
+			}
+
+			> tr:hover > td {
+				background: rgba(0, 0, 0, 0.03) !important;
+			}
+		}
+	}
+
+	.sa-empty-state {
+		&__text {
+			strong {
+				color: var(--bg-base-black);
+			}
+		}
+	}
+}

frontend/src/components/ServiceAccountsTable/ServiceAccountsTable.tsx

@@ -0,0 +1,192 @@
+import React from 'react';
+import { Badge } from '@signozhq/badge';
+import { Pagination, Table, Tooltip } from 'antd';
+import type { ColumnsType } from 'antd/es/table/interface';
+import { ServiceAccountRow } from 'container/ServiceAccountsSettings/utils';
+
+import './ServiceAccountsTable.styles.scss';
+
+interface ServiceAccountsTableProps {
+	data: ServiceAccountRow[];
+	loading: boolean;
+	total: number;
+	currentPage: number;
+	pageSize: number;
+	searchQuery: string;
+	onPageChange: (page: number) => void;
+	onRowClick?: (row: ServiceAccountRow) => void;
+}
+
+function NameEmailCell({
+	name,
+	email,
+}: {
+	name: string;
+	email: string;
+}): JSX.Element {
+	return (
+		<div className="sa-name-email-cell">
+			{name && (
+				<span className="sa-name" title={name}>
+					{name}
+				</span>
+			)}
+			<Tooltip title={email} overlayClassName="sa-tooltip">
+				<span className="sa-email">{email}</span>
+			</Tooltip>
+		</div>
+	);
+}
+
+function RolesCell({ roles }: { roles: string[] }): JSX.Element {
+	if (!roles || roles.length === 0) {
+		return <span className="sa-dash">—</span>;
+	}
+	const first = roles[0];
+	const overflow = roles.length - 1;
+	const tooltipContent = roles.slice(1).join(', ');
+
+	return (
+		<div className="sa-roles-cell">
+			<Badge color="vanilla">{first}</Badge>
+			{overflow > 0 && (
+				<Tooltip
+					title={tooltipContent}
+					overlayClassName="sa-tooltip"
+					overlayStyle={{ maxWidth: '600px' }}
+				>
+					<Badge color="vanilla" variant="outline" className="sa-status-badge">
+						+{overflow}
+					</Badge>
+				</Tooltip>
+			)}
+		</div>
+	);
+}
+
+function StatusBadge({ status }: { status: string }): JSX.Element {
+	if (status?.toUpperCase() === 'ACTIVE') {
+		return (
+			<Badge color="forest" variant="outline">
+				ACTIVE
+			</Badge>
+		);
+	}
+	return (
+		<Badge color="vanilla" variant="outline" className="sa-status-badge">
+			DISABLED
+		</Badge>
+	);
+}
+
+function ServiceAccountsEmptyState({
+	searchQuery,
+}: {
+	searchQuery: string;
+}): JSX.Element {
+	return (
+		<div className="sa-empty-state">
+			<span className="sa-empty-state__emoji" role="img" aria-label="monocle face">
+				🧐
+			</span>
+			{searchQuery ? (
+				<p className="sa-empty-state__text">
+					No results for <strong>{searchQuery}</strong>
+				</p>
+			) : (
+				<p className="sa-empty-state__text">
+					No service accounts. Start by creating one to manage keys.
+				</p>
+			)}
+		</div>
+	);
+}
+
+function ServiceAccountsTable({
+	data,
+	loading,
+	total,
+	currentPage,
+	pageSize,
+	searchQuery,
+	onPageChange,
+	onRowClick,
+}: ServiceAccountsTableProps): JSX.Element {
+	const columns: ColumnsType<ServiceAccountRow> = [
+		{
+			title: 'Name / Email',
+			dataIndex: 'name',
+			key: 'name',
+			className: 'sa-name-column',
+			sorter: (a, b): number => a.email.localeCompare(b.email),
+			render: (_, record): JSX.Element => (
+				<NameEmailCell name={record.name} email={record.email} />
+			),
+		},
+		{
+			title: 'Roles',
+			dataIndex: 'roles',
+			key: 'roles',
+			width: 420,
+			render: (roles: string[]): JSX.Element => <RolesCell roles={roles} />,
+		},
+		{
+			title: 'Status',
+			dataIndex: 'status',
+			key: 'status',
+			width: 120,
+			align: 'right' as const,
+			className: 'sa-status-cell',
+			sorter: (a, b): number =>
+				(a.status?.toUpperCase() === 'ACTIVE' ? 0 : 1) -
+				(b.status?.toUpperCase() === 'ACTIVE' ? 0 : 1),
+			render: (status: string): JSX.Element => <StatusBadge status={status} />,
+		},
+	];
+
+	const showPaginationTotal = (_total: number, range: number[]): JSX.Element => (
+		<>
+			<span className="sa-pagination-range">
+				{range[0]} &#8212; {range[1]}
+			</span>
+			<span className="sa-pagination-total"> of {_total}</span>
+		</>
+	);
+
+	return (
+		<div className="sa-table-wrapper">
+			<Table<ServiceAccountRow>
+				columns={columns}
+				dataSource={data}
+				rowKey="id"
+				loading={loading}
+				pagination={false}
+				rowClassName={(_, index): string =>
+					index % 2 === 0 ? 'sa-table-row--tinted' : ''
+				}
+				showSorterTooltip={false}
+				locale={{
+					emptyText: <ServiceAccountsEmptyState searchQuery={searchQuery} />,
+				}}
+				className="sa-table"
+				onRow={(record): { onClick: () => void; style?: React.CSSProperties } => ({
+					onClick: (): void => onRowClick?.(record),
+					style: onRowClick ? { cursor: 'pointer' } : undefined,
+				})}
+			/>
+			{total > pageSize && (
+				<Pagination
+					current={currentPage}
+					pageSize={pageSize}
+					total={total}
+					showTotal={showPaginationTotal}
+					showSizeChanger={false}
+					onChange={onPageChange}
+					className="sa-table-pagination"
+				/>
+			)}
+		</div>
+	);
+}
+
+export default ServiceAccountsTable;

frontend/src/constants/query.ts

@@ -55,5 +55,4 @@ export enum QueryParams {
 	source = 'source',
 	showClassicCreateAlertsPage = 'showClassicCreateAlertsPage',
 	isTestAlert = 'isTestAlert',
-	yAxisUnit = 'yAxisUnit',
 }

frontend/src/constants/routes.ts

@@ -86,6 +86,7 @@ const ROUTES = {
 	METER_EXPLORER_VIEWS: '/meter/explorer/views',
 	HOME_PAGE: '/',
 	PUBLIC_DASHBOARD: '/public/dashboard/:dashboardId',
+	SERVICE_ACCOUNTS_SETTINGS: '/settings/service-accounts',
 } as const;
 
 export default ROUTES;

frontend/src/container/CreateAlertChannels/defaults.ts

@@ -16,8 +16,8 @@ export const PagerInitialConfig: Partial<PagerChannel> = {
 	client: 'SigNoz Alert Manager',
 	client_url: 'https://enter-signoz-host-n-port-here/alerts',
 	details: JSON.stringify({
-		firing: `{{ .Alerts.Firing | toJson }}`,
-		resolved: `{{ .Alerts.Resolved | toJson }}`,
+		firing: `{{ template "pagerduty.default.instances" .Alerts.Firing }}`,
+		resolved: `{{ template "pagerduty.default.instances" .Alerts.Resolved }}`,
 		num_firing: '{{ .Alerts.Firing | len }}',
 		num_resolved: '{{ .Alerts.Resolved | len }}',
 	}),

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

@@ -193,6 +193,7 @@ describe('Dashboard landing page actions header tests', () => {
 			handleDashboardLockToggle: jest.fn(),
 			dashboardResponse: {} as IDashboardContext['dashboardResponse'],
 			selectedDashboard: (getDashboardById.data as unknown) as Dashboard,
+			dashboardId: '4',
 			layouts: [],
 			panelMap: {},
 			setPanelMap: jest.fn(),
@@ -204,6 +205,8 @@ describe('Dashboard landing page actions header tests', () => {
 			updateLocalStorageDashboardVariables: jest.fn(),
 			dashboardQueryRangeCalled: false,
 			setDashboardQueryRangeCalled: jest.fn(),
+			selectedRowWidgetId: null,
+			setSelectedRowWidgetId: jest.fn(),
 			isDashboardFetching: false,
 			columnWidths: {},
 			setColumnWidths: jest.fn(),

frontend/src/container/DashboardContainer/DashboardDescription/index.tsx

@@ -78,6 +78,7 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 		isDashboardLocked,
 		setSelectedDashboard,
 		handleToggleDashboardSlider,
+		setSelectedRowWidgetId,
 		handleDashboardLockToggle,
 	} = useDashboard();
 
@@ -145,6 +146,7 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 	const [addPanelPermission] = useComponentPermission(permissions, userRole);
 
 	const onEmptyWidgetHandler = useCallback(() => {
+		setSelectedRowWidgetId(null);
 		handleToggleDashboardSlider(true);
 		logEvent('Dashboard Detail: Add new panel clicked', {
 			dashboardId: selectedDashboard?.id,

frontend/src/container/DashboardContainer/DashboardVariablesSelection/useDashboardVariableUpdate.ts

@@ -67,18 +67,17 @@ export const useDashboardVariableUpdate = (): UseDashboardVariableUpdateReturn =
 							const oldVariables = prev?.data.variables;
 							// this is added to handle case where we have two different
 							// schemas for variable response
-							const updatedVariables = { ...oldVariables };
-							if (updatedVariables?.[id]) {
-								updatedVariables[id] = {
-									...updatedVariables[id],
+							if (oldVariables?.[id]) {
+								oldVariables[id] = {
+									...oldVariables[id],
 									selectedValue: value,
 									allSelected,
 									haveCustomValuesSelected,
 								};
 							}
-							if (updatedVariables?.[name]) {
-								updatedVariables[name] = {
-									...updatedVariables[name],
+							if (oldVariables?.[name]) {
+								oldVariables[name] = {
+									...oldVariables[name],
 									selectedValue: value,
 									allSelected,
 									haveCustomValuesSelected,
@@ -88,7 +87,9 @@ export const useDashboardVariableUpdate = (): UseDashboardVariableUpdateReturn =
 								...prev,
 								data: {
 									...prev?.data,
-									variables: updatedVariables,
+									variables: {
+										...oldVariables,
+									},
 								},
 							};
 						}

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

@@ -6,6 +6,7 @@ import { useResizeObserver } from 'hooks/useDimensions';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
 import ContextMenu from 'periscope/components/ContextMenu';
 import { useTimezone } from 'providers/Timezone';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';
 import { getTimeRange } from 'utils/getTimeRange';
 
@@ -61,7 +62,7 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 			currentQuery: widget.query,
 			onClick: clickHandlerWithContextMenu,
 			onDragSelect,
-			apiResponse: queryResponse?.data?.payload,
+			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
 			timezone,
 			panelMode,
 			minTimeScale: minTimeScale,

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

@@ -11,6 +11,7 @@ import { get } from 'lodash-es';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { QueryData } from 'types/api/widgets/getQuery';
 import { AlignedData } from 'uplot';
 
 import { PanelMode } from '../types';
@@ -43,7 +44,7 @@ export function prepareBarPanelConfig({
 	currentQuery: Query;
 	onClick: OnClickPluginOpts['onClick'];
 	onDragSelect: (startTime: number, endTime: number) => void;
-	apiResponse?: MetricRangePayloadProps;
+	apiResponse: MetricRangePayloadProps;
 	timezone: Timezone;
 	panelMode: PanelMode;
 	minTimeScale?: number;
@@ -75,17 +76,13 @@ export function prepareBarPanelConfig({
 		stepInterval: minStepInterval,
 	});
 
-	if (!(apiResponse && apiResponse?.data?.result)) {
-		// if no data, return the builder without adding any series
-		return builder;
-	}
-
 	if (widget.stackedBarChart) {
-		const seriesCount = (apiResponse.data.result.length ?? 0) + 1; // +1 for 1-based uPlot series indices
+		const seriesCount = (apiResponse?.data?.result?.length ?? 0) + 1; // +1 for 1-based uPlot series indices
 		builder.setBands(getInitialStackedBands(seriesCount));
 	}
 
-	apiResponse.data.result.forEach((series) => {
+	const seriesList: QueryData[] = apiResponse?.data?.result || [];
+	seriesList.forEach((series) => {
 		const baseLabelName = getLabelName(
 			series.metric,
 			series.queryName || '', // query

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

@@ -6,6 +6,7 @@ import { useResizeObserver } from 'hooks/useDimensions';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
 import { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 import { useTimezone } from 'providers/Timezone';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';
 
 import Histogram from '../../charts/Histogram/Histogram';
@@ -38,7 +39,7 @@ function HistogramPanel(props: PanelWrapperProps): JSX.Element {
 		return prepareHistogramPanelConfig({
 			widget,
 			isDarkMode,
-			apiResponse: queryResponse?.data?.payload,
+			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
 			panelMode,
 		});
 	}, [widget, isDarkMode, queryResponse?.data?.payload, panelMode]);
@@ -48,7 +49,7 @@ function HistogramPanel(props: PanelWrapperProps): JSX.Element {
 			return [];
 		}
 		return prepareHistogramPanelData({
-			apiResponse: queryResponse?.data?.payload,
+			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
 			bucketWidth: widget?.bucketWidth,
 			bucketCount: widget?.bucketCount,
 			mergeAllActiveQueries: widget?.mergeAllActiveQueries,

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

@@ -149,7 +149,7 @@ export function prepareHistogramPanelConfig({
 	isDarkMode,
 }: {
 	widget: Widgets;
-	apiResponse?: MetricRangePayloadProps;
+	apiResponse: MetricRangePayloadProps;
 	panelMode: PanelMode;
 	isDarkMode: boolean;
 }): UPlotConfigBuilder {
@@ -204,7 +204,7 @@ export function prepareHistogramPanelConfig({
 			fillColor: '#4E74F8',
 			isDarkMode,
 		});
-	} else if (apiResponse && apiResponse?.data?.result) {
+	} else {
 		apiResponse.data.result.forEach((series) => {
 			const baseLabelName = getLabelName(
 				series.metric,

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

@@ -9,6 +9,7 @@ import { useResizeObserver } from 'hooks/useDimensions';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
 import { ContextMenu } from 'periscope/components/ContextMenu';
 import { useTimezone } from 'providers/Timezone';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';
 import { getTimeRange } from 'utils/getTimeRange';
 
@@ -67,7 +68,7 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 			currentQuery: widget.query,
 			onClick: clickHandlerWithContextMenu,
 			onDragSelect,
-			apiResponse: queryResponse?.data?.payload,
+			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
 			timezone,
 			panelMode,
 			minTimeScale: minTimeScale,

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

@@ -68,12 +68,11 @@ export const prepareUPlotConfig = ({
 	currentQuery: Query;
 	onClick?: OnClickPluginOpts['onClick'];
 	onDragSelect: (startTime: number, endTime: number) => void;
-	apiResponse?: MetricRangePayloadProps;
+	apiResponse: MetricRangePayloadProps;
 	timezone: Timezone;
 	panelMode: PanelMode;
 	minTimeScale?: number;
 	maxTimeScale?: number;
-	// eslint-disable-next-line sonarjs/cognitive-complexity
 }): UPlotConfigBuilder => {
 	const stepIntervals: ExecStats['stepIntervals'] = get(
 		apiResponse,
@@ -101,12 +100,7 @@ export const prepareUPlotConfig = ({
 		stepInterval: minStepInterval,
 	});
 
-	if (!(apiResponse && apiResponse.data.result)) {
-		// if no data, return the builder without adding any series
-		return builder;
-	}
-
-	apiResponse.data.result.forEach((series) => {
+	apiResponse.data?.result?.forEach((series) => {
 		const hasSingleValidPoint = hasSingleVisiblePointForSeries(series);
 		const baseLabelName = getLabelName(
 			series.metric,

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

@@ -18,7 +18,7 @@ import { PanelMode } from '../types';
 export interface BaseConfigBuilderProps {
 	id: string;
 	thresholds?: ThresholdProps[];
-	apiResponse?: MetricRangePayloadProps;
+	apiResponse: MetricRangePayloadProps;
 	isDarkMode: boolean;
 	onClick?: OnClickPluginOpts['onClick'];
 	onDragSelect?: (startTime: number, endTime: number) => void;

frontend/src/container/GridCardLayout/DashboardEmptyState/DashboardEmptyState.tsx

@@ -19,6 +19,7 @@ export default function DashboardEmptyState(): JSX.Element {
 		selectedDashboard,
 		isDashboardLocked,
 		handleToggleDashboardSlider,
+		setSelectedRowWidgetId,
 	} = useDashboard();
 
 	const variablesSettingsTabHandle = useRef<VariablesSettingsTab>(null);
@@ -41,6 +42,7 @@ export default function DashboardEmptyState(): JSX.Element {
 	const [addPanelPermission] = useComponentPermission(permissions, userRole);
 
 	const onEmptyWidgetHandler = useCallback(() => {
+		setSelectedRowWidgetId(null);
 		handleToggleDashboardSlider(true);
 		logEvent('Dashboard Detail: Add new panel clicked', {
 			dashboardId: selectedDashboard?.id,

frontend/src/container/GridCardLayout/GridCardLayout.tsx

@@ -71,6 +71,7 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 		isDashboardLocked,
 		dashboardQueryRangeCalled,
 		setDashboardQueryRangeCalled,
+		setSelectedRowWidgetId,
 		isDashboardFetching,
 		columnWidths,
 	} = useDashboard();
@@ -194,6 +195,7 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 
 		updateDashboardMutation.mutate(updatedDashboard, {
 			onSuccess: (updatedDashboard) => {
+				setSelectedRowWidgetId(null);
 				if (updatedDashboard.data) {
 					if (updatedDashboard.data.data.layout) {
 						setLayouts(sortLayout(updatedDashboard.data.data.layout));

frontend/src/container/GridCardLayout/WidgetRow.tsx

@@ -5,7 +5,6 @@ import useComponentPermission from 'hooks/useComponentPermission';
 import { EllipsisIcon, PenLine, Plus, X } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { setSelectedRowWidgetId } from 'providers/Dashboard/helpers/selectedRowWidgetIdHelper';
 import { ROLES, USER_ROLES } from 'types/roles';
 import { ComponentTypes } from 'utils/permission';
 
@@ -38,6 +37,7 @@ export function WidgetRowHeader(props: WidgetRowHeaderProps): JSX.Element {
 		handleToggleDashboardSlider,
 		selectedDashboard,
 		isDashboardLocked,
+		setSelectedRowWidgetId,
 	} = useDashboard();
 
 	const permissions: ComponentTypes[] = ['add_panel'];
@@ -81,12 +81,7 @@ export function WidgetRowHeader(props: WidgetRowHeaderProps): JSX.Element {
 							disabled={!editWidget && addPanelPermission && !isDashboardLocked}
 							icon={<Plus size={14} />}
 							onClick={(): void => {
-								// TODO: @AshwinBhatkal Simplify this check in cleanup of https://github.com/SigNoz/engineering-pod/issues/3953
-								if (!selectedDashboard?.id) {
-									return;
-								}
-
-								setSelectedRowWidgetId(selectedDashboard.id, id);
+								setSelectedRowWidgetId(id);
 								handleToggleDashboardSlider(true);
 							}}
 						>

frontend/src/container/LogsExplorerChart/__tests__/frequencyGraphColor.test.ts

@@ -4,8 +4,8 @@ import { getColorsForSeverityLabels, isRedLike } from '../utils';
 
 describe('getColorsForSeverityLabels', () => {
 	it('should return slate for blank labels', () => {
-		expect(getColorsForSeverityLabels('', 0)).toBe(Color.BG_VANILLA_400);
-		expect(getColorsForSeverityLabels('   ', 0)).toBe(Color.BG_VANILLA_400);
+		expect(getColorsForSeverityLabels('', 0)).toBe(Color.BG_SLATE_300);
+		expect(getColorsForSeverityLabels('   ', 0)).toBe(Color.BG_SLATE_300);
 	});
 
 	it('should return correct colors for known severity variants', () => {

frontend/src/container/LogsExplorerChart/utils.ts

@@ -79,7 +79,7 @@ export function getColorsForSeverityLabels(
 	const trimmed = label.trim();
 
 	if (!trimmed) {
-		return Color.BG_VANILLA_400; // Default color for empty labels
+		return Color.BG_SLATE_300;
 	}
 
 	const variantColor = SEVERITY_VARIANT_COLORS[trimmed];
@@ -119,6 +119,6 @@ export function getColorsForSeverityLabels(
 
 	return (
 		SAFE_FALLBACK_COLORS[index % SAFE_FALLBACK_COLORS.length] ||
-		Color.BG_VANILLA_400
+		Color.BG_SLATE_400
 	);
 }

frontend/src/container/LogsExplorerViews/index.tsx

@@ -39,7 +39,6 @@ import { useGetExplorerQueryRange } from 'hooks/queryBuilder/useGetExplorerQuery
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQueryData from 'hooks/useUrlQueryData';
-import useUrlYAxisUnit from 'hooks/useUrlYAxisUnit';
 import { isEmpty, isUndefined } from 'lodash-es';
 import LiveLogs from 'pages/LiveLogs';
 import { UpdateTimeInterval } from 'store/actions';
@@ -60,7 +59,6 @@ import LogsActionsContainer from './LogsActionsContainer';
 
 import './LogsExplorerViews.styles.scss';
 
-// eslint-disable-next-line sonarjs/cognitive-complexity
 function LogsExplorerViewsContainer({
 	setIsLoadingQueries,
 	listQueryKeyRef,
@@ -111,7 +109,7 @@ function LogsExplorerViewsContainer({
 
 	const [orderBy, setOrderBy] = useState<string>('timestamp:desc');
 
-	const { yAxisUnit, onUnitChange } = useUrlYAxisUnit('');
+	const [yAxisUnit, setYAxisUnit] = useState<string>('');
 
 	const listQuery = useMemo(() => getListQuery(stagedQuery) || null, [
 		stagedQuery,
@@ -369,6 +367,10 @@ function LogsExplorerViewsContainer({
 		orderBy,
 	]);
 
+	const onUnitChangeHandler = useCallback((value: string): void => {
+		setYAxisUnit(value);
+	}, []);
+
 	const chartData = useMemo(() => {
 		if (!stagedQuery) {
 			return [];
@@ -486,7 +488,10 @@ function LogsExplorerViewsContainer({
 					{selectedPanelType === PANEL_TYPES.TIME_SERIES && !showLiveLogs && (
 						<div className="time-series-view-container">
 							<div className="time-series-view-container-header">
-								<BuilderUnitsFilter onChange={onUnitChange} yAxisUnit={yAxisUnit} />
+								<BuilderUnitsFilter
+									onChange={onUnitChangeHandler}
+									yAxisUnit={yAxisUnit}
+								/>
 							</div>
 							<TimeSeriesView
 								isLoading={isLoading || isFetching}

frontend/src/container/MembersSettings/MembersSettings.tsx

@@ -119,7 +119,7 @@ function MembersSettings(): JSX.Element {
 			return;
 		}
 		const maxPage = Math.ceil(filteredMembers.length / PAGE_SIZE);
-		if (currentPage > maxPage) {
+		if (currentPage > maxPage || currentPage < 1) {
 			setPage(maxPage);
 		}
 	}, [filteredMembers.length, currentPage, setPage]);
@@ -209,6 +209,7 @@ function MembersSettings(): JSX.Element {
 
 					<div className="members-settings__search">
 						<Input
+							type="search"
 							placeholder="Search by name, email, or role..."
 							value={searchQuery}
 							onChange={(e): void => {
@@ -217,6 +218,7 @@ function MembersSettings(): JSX.Element {
 							}}
 							className="members-search-input"
 							color="secondary"
+							name="members-search"
 						/>
 					</div>
 

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

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { useQueries } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
@@ -11,7 +11,6 @@ import { BuilderUnitsFilter } from 'container/QueryBuilder/filters/BuilderUnitsF
 import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
 import { convertDataValueToMs } from 'container/TimeSeriesView/utils';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import useUrlYAxisUnit from 'hooks/useUrlYAxisUnit';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import { AppState } from 'store/reducers';
@@ -23,13 +22,14 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 
 function TimeSeries(): JSX.Element {
 	const { stagedQuery, currentQuery } = useQueryBuilder();
-	const { yAxisUnit, onUnitChange } = useUrlYAxisUnit('');
 
 	const { selectedTime: globalSelectedTime, maxTime, minTime } = useSelector<
 		AppState,
 		GlobalReducer
 	>((state) => state.globalTime);
 
+	const [yAxisUnit, setYAxisUnit] = useState<string>('');
+
 	const isValidToConvertToMs = useMemo(() => {
 		const isValid: boolean[] = [];
 
@@ -112,6 +112,10 @@ function TimeSeries(): JSX.Element {
 		[data, isValidToConvertToMs],
 	);
 
+	const onUnitChangeHandler = (value: string): void => {
+		setYAxisUnit(value);
+	};
+
 	const hasMetricSelected = useMemo(
 		() => currentQuery.builder.queryData.some((q) => q.aggregateAttribute?.key),
 		[currentQuery],
@@ -119,7 +123,7 @@ function TimeSeries(): JSX.Element {
 
 	return (
 		<div className="meter-time-series-container">
-			<BuilderUnitsFilter onChange={onUnitChange} yAxisUnit={yAxisUnit} />
+			<BuilderUnitsFilter onChange={onUnitChangeHandler} yAxisUnit={yAxisUnit} />
 			<div className="time-series-container">
 				{!hasMetricSelected && <EmptyMetricsSearch />}
 				{hasMetricSelected &&

frontend/src/container/NewWidget/index.tsx

@@ -34,10 +34,6 @@ import { cloneDeep, defaultTo, isEmpty, isUndefined } from 'lodash-es';
 import { Check, X } from 'lucide-react';
 import { DashboardWidgetPageParams } from 'pages/DashboardWidget';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
-import {
-	clearSelectedRowWidgetId,
-	getSelectedRowWidgetId,
-} from 'providers/Dashboard/helpers/selectedRowWidgetIdHelper';
 import {
 	getNextWidgets,
 	getPreviousWidgets,
@@ -90,6 +86,8 @@ function NewWidget({
 		selectedDashboard,
 		setSelectedDashboard,
 		setToScrollWidgetId,
+		selectedRowWidgetId,
+		setSelectedRowWidgetId,
 		columnWidths,
 	} = useDashboard();
 
@@ -452,8 +450,6 @@ function NewWidget({
 		const widgetId = query.get('widgetId') || '';
 		let updatedLayout = selectedDashboard.data.layout || [];
 
-		const selectedRowWidgetId = getSelectedRowWidgetId(dashboardId);
-
 		if (isNewDashboard && isEmpty(selectedRowWidgetId)) {
 			const newLayoutItem = placeWidgetAtBottom(widgetId, updatedLayout);
 			updatedLayout = [...updatedLayout, newLayoutItem];
@@ -558,6 +554,7 @@ function NewWidget({
 
 		updateDashboardMutation.mutateAsync(dashboard, {
 			onSuccess: (updatedDashboard) => {
+				setSelectedRowWidgetId(null);
 				setSelectedDashboard(updatedDashboard.data);
 				setToScrollWidgetId(selectedWidget?.id || '');
 				safeNavigate({
@@ -569,6 +566,7 @@ function NewWidget({
 		selectedDashboard,
 		query,
 		isNewDashboard,
+		selectedRowWidgetId,
 		afterWidgets,
 		selectedWidget,
 		selectedTime.enum,
@@ -579,6 +577,7 @@ function NewWidget({
 		widgets,
 		setSelectedDashboard,
 		setToScrollWidgetId,
+		setSelectedRowWidgetId,
 		safeNavigate,
 		dashboardId,
 	]);
@@ -682,10 +681,6 @@ function NewWidget({
 		 * on mount here with the currentQuery in the begining itself
 		 */
 		setSupersetQuery(currentQuery);
-
-		return (): void => {
-			clearSelectedRowWidgetId(dashboardId);
-		};
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 

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

@@ -619,11 +619,6 @@ function OnboardingAddDataSource(): JSX.Element {
 		);
 	};
 
-	const progressText = `Get Started (${Math.min(
-		currentStep + 1,
-		setupStepItems.length,
-	)}/${setupStepItems.length})`;
-
 	return (
 		<div className="onboarding-v2">
 			<Layout>
@@ -644,7 +639,7 @@ function OnboardingAddDataSource(): JSX.Element {
 									history.push(ROUTES.HOME);
 								}}
 							/>
-							<Typography.Text>{progressText}</Typography.Text>
+							<Typography.Text>Get Started (2/4)</Typography.Text>
 						</div>
 
 						<div className="header-right-section">

frontend/src/container/OnboardingV2Container/onboarding-configs/onboarding-config-with-links.json

@@ -611,34 +611,6 @@
 			]
 		}
 	},
-	{
-		"dataSource": "deno",
-		"label": "Deno",
-		"imgUrl": "/Logos/deno.svg",
-		"tags": [
-			"apm/traces",
-			"logs",
-			"metrics"
-		],
-		"module": "apm",
-		"relatedSearchKeywords": [
-			"deno",
-			"deno monitoring",
-			"deno observability",
-			"javascript",
-			"js",
-			"ts",
-			"typescript",
-			"opentelemetry deno",
-			"observability",
-			"metrics",
-			"logs",
-			"traces",
-			"tracing"
-		],
-		"id": "deno",
-		"link": "/docs/instrumentation/opentelemetry-deno/"
-	},
 	{
 		"dataSource": "javascript",
 		"label": "JavaScript",
@@ -1856,33 +1828,15 @@
 		],
 		"module": "logs",
 		"relatedSearchKeywords": [
-			"apache",
 			"application log file collection",
-			"c#",
-			"c++",
 			"collect",
 			"collect logs from file",
 			"collect logs from log file",
-			"cpp",
-			"csharp",
 			"custom log file monitoring",
-			"deno",
-			"django",
-			"dotnet",
-			"elixir",
-			"express",
 			"file",
 			"file based logging",
 			"filebeat alternative",
-			"flask",
 			"from-log-file",
-			"go",
-			"golang",
-			"java",
-			"javascript",
-			"js",
-			"kotlin",
-			"linux",
 			"log",
 			"log file ingestion",
 			"log file to signoz",
@@ -1890,29 +1844,7 @@
 			"log tailing with otel",
 			"logging",
 			"logs",
-			"macos",
-			"mongodb",
-			"mysql",
-			"nestjs",
-			"nextjs",
-			"nginx",
-			"otel file logs",
-			"php",
-			"postgres",
-			"postgresql",
-			"python",
-			"rails",
-			"react",
-			"redis",
-			"ruby",
-			"rust",
-			"scala",
-			"spring",
-			"swift",
-			"ts",
-			"typescript",
-			"vue",
-			"windows"
+			"otel file logs"
 		],
 		"link": "/docs/userguide/collect_logs_from_file/"
 	},
@@ -5276,7 +5208,7 @@
 	{
 		"dataSource": "prometheus-metrics",
 		"label": "Prometheus Metrics",
-		"imgUrl": "/Logos/prometheus.svg",
+		"imgUrl": "/Logos/other-metrics.svg",
 		"tags": [
 			"metrics",
 			"infrastructure monitoring"
@@ -5877,250 +5809,5 @@
 				}
 			]
 		}
-	},
-	{
-		"dataSource": "rust-metrics",
-		"label": "Rust Metrics",
-		"imgUrl": "/Logos/rust.svg",
-		"tags": [
-			"metrics"
-		],
-		"module": "metrics",
-		"relatedSearchKeywords": [
-			"metrics",
-			"opentelemetry rust",
-			"otel rust",
-			"rust",
-			"rust metrics",
-			"rust monitoring",
-			"rust observability"
-		],
-		"id": "rust-metrics",
-		"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-rust/",
-		"question": {
-			"desc": "What is your Environment?",
-			"type": "select",
-			"entityID": "environment",
-			"options": [
-				{
-					"key": "vm",
-					"label": "VM",
-					"imgUrl": "/Logos/vm.svg",
-					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-rust/"
-				},
-				{
-					"key": "k8s",
-					"label": "Kubernetes",
-					"imgUrl": "/Logos/kubernetes.svg",
-					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-rust/"
-				},
-				{
-					"key": "windows",
-					"label": "Windows",
-					"imgUrl": "/Logos/windows.svg",
-					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-rust/"
-				},
-				{
-					"key": "docker",
-					"label": "Docker",
-					"imgUrl": "/Logos/docker.svg",
-					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-rust/"
-				}
-			]
-		}
-	},
-	{
-		"dataSource": "ruby-metrics",
-		"label": "Ruby Metrics",
-		"imgUrl": "/Logos/ruby-on-rails.svg",
-		"tags": [
-			"metrics"
-		],
-		"module": "metrics",
-		"relatedSearchKeywords": [
-			"metrics",
-			"opentelemetry ruby",
-			"otel ruby",
-			"ruby",
-			"ruby metrics",
-			"ruby monitoring",
-			"ruby observability",
-			"ruby on rails metrics"
-		],
-		"id": "ruby-metrics",
-		"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-ruby/",
-		"question": {
-			"desc": "What is your Environment?",
-			"type": "select",
-			"entityID": "environment",
-			"options": [
-				{
-					"key": "vm",
-					"label": "VM",
-					"imgUrl": "/Logos/vm.svg",
-					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-ruby/"
-				},
-				{
-					"key": "k8s",
-					"label": "Kubernetes",
-					"imgUrl": "/Logos/kubernetes.svg",
-					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-ruby/"
-				},
-				{
-					"key": "windows",
-					"label": "Windows",
-					"imgUrl": "/Logos/windows.svg",
-					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-ruby/"
-				},
-				{
-					"key": "docker",
-					"label": "Docker",
-					"imgUrl": "/Logos/docker.svg",
-					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-ruby/"
-				}
-			]
-		}
-	},
-	{
-		"dataSource": "statsd",
-		"label": "StatsD",
-		"imgUrl": "/Logos/statsd.svg",
-		"tags": [
-			"metrics"
-		],
-		"module": "metrics",
-		"relatedSearchKeywords": [
-			"metrics",
-			"statsd",
-			"statsd metrics",
-			"statsd monitoring",
-			"statsd observability"
-		],
-		"id": "statsd",
-		"link": "/docs/userguide/opentelemetry-statsd/"
-	},
-	{
-		"dataSource": "nvidia-dcgm",
-		"label": "Nvidia DCGM",
-		"imgUrl": "/Logos/nvidia-dcgm.svg",
-		"tags": [
-			"infrastructure monitoring"
-		],
-		"module": "infra-monitoring-hosts",
-		"relatedSearchKeywords": [
-			"dcgm",
-			"gpu monitoring",
-			"infrastructure monitoring",
-			"nvidia",
-			"nvidia dcgm",
-			"nvidia metrics"
-		],
-		"id": "nvidia-dcgm",
-		"link": "/docs/metrics-management/nvidia-dcgm-metrics/"
-	},
-	{
-		"dataSource": "slurm",
-		"label": "Slurm",
-		"imgUrl": "/Logos/slurm.svg",
-		"tags": [
-			"infrastructure monitoring"
-		],
-		"module": "infra-monitoring-hosts",
-		"relatedSearchKeywords": [
-			"infrastructure monitoring",
-			"slurm",
-			"slurm cluster monitoring",
-			"slurm metrics"
-		],
-		"id": "slurm",
-		"link": "/docs/metrics-management/slurm-metrics/"
-	},
-	{
-		"dataSource": "ollama-monitoring",
-		"label": "Ollama",
-		"imgUrl": "/Logos/ollama.svg",
-		"tags": [
-			"LLM Monitoring"
-		],
-		"module": "apm",
-		"relatedSearchKeywords": [
-			"llm",
-			"llm monitoring",
-			"monitoring",
-			"observability",
-			"ollama",
-			"ollama monitoring",
-			"otel ollama",
-			"traces",
-			"tracing"
-		],
-		"id": "ollama-monitoring",
-		"link": "/docs/ollama-monitoring/"
-	},
-	{
-		"dataSource": "haystack-monitoring",
-		"label": "Haystack",
-		"imgUrl": "/Logos/haystack.svg",
-		"tags": [
-			"LLM Monitoring"
-		],
-		"module": "apm",
-		"relatedSearchKeywords": [
-			"haystack",
-			"haystack monitoring",
-			"llm",
-			"llm monitoring",
-			"monitoring",
-			"observability",
-			"otel haystack",
-			"traces",
-			"tracing"
-		],
-		"id": "haystack-monitoring",
-		"link": "/docs/haystack-monitoring/"
-	},
-	{
-		"dataSource": "openrouter-observability",
-		"label": "OpenRouter",
-		"imgUrl": "/Logos/openrouter.svg",
-		"tags": [
-			"LLM Monitoring"
-		],
-		"module": "apm",
-		"relatedSearchKeywords": [
-			"llm",
-			"llm monitoring",
-			"monitoring",
-			"observability",
-			"openrouter",
-			"openrouter monitoring",
-			"otel openrouter",
-			"traces",
-			"tracing"
-		],
-		"id": "openrouter-observability",
-		"link": "/docs/openrouter-observability/"
-	},
-	{
-		"dataSource": "huggingface-observability",
-		"label": "Hugging Face",
-		"imgUrl": "/Logos/huggingface.svg",
-		"tags": [
-			"LLM Monitoring"
-		],
-		"module": "apm",
-		"relatedSearchKeywords": [
-			"hugging face monitoring",
-			"huggingface",
-			"llm",
-			"llm monitoring",
-			"monitoring",
-			"observability",
-			"otel huggingface",
-			"traces",
-			"tracing"
-		],
-		"id": "huggingface-observability",
-		"link": "/docs/huggingface-observability/"
 	}
 ]

frontend/src/container/ServiceAccountsSettings/ServiceAccountsSettings.styles.scss

@@ -0,0 +1,134 @@
+.sa-settings {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-8);
+	padding: var(--padding-4) var(--padding-2) var(--padding-6) var(--padding-4);
+	height: 100%;
+
+	&__header {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-2);
+	}
+
+	&__title {
+		font-size: var(--label-large-500-font-size);
+		font-weight: var(--label-large-500-font-weight);
+		color: var(--text-base-white);
+		letter-spacing: -0.09px;
+		line-height: var(--line-height-normal);
+		margin: 0;
+	}
+
+	&__subtitle {
+		font-size: var(--paragraph-base-400-font-size);
+		font-weight: var(--paragraph-base-400-font-weight);
+		color: var(--foreground);
+		letter-spacing: -0.07px;
+		line-height: var(--paragraph-base-400-line-height);
+		margin: 0;
+	}
+
+	&__learn-more {
+		color: var(--primary);
+		text-decoration: none;
+
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+
+	&__controls {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-4);
+	}
+
+	&__search {
+		flex: 1;
+		min-width: 0;
+	}
+}
+
+.sa-status-badge {
+	color: var(--l3-foreground);
+	border-color: var(--border);
+}
+
+.sa-settings-filter-trigger {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-2);
+	border: 1px solid var(--border);
+	border-radius: 2px;
+	background-color: var(--l2-background);
+
+	> span {
+		color: var(--foreground);
+	}
+
+	&__chevron {
+		flex-shrink: 0;
+		color: var(--foreground);
+	}
+}
+
+.sa-settings-filter-dropdown {
+	.ant-dropdown-menu {
+		padding: var(--padding-3) 14px;
+		border-radius: 4px;
+		border: 1px solid var(--border);
+		background: var(--l2-background);
+		backdrop-filter: blur(20px);
+	}
+
+	.ant-dropdown-menu-item {
+		background: transparent !important;
+		padding: var(--padding-1) 0 !important;
+
+		&:hover {
+			background: transparent !important;
+		}
+	}
+}
+
+.sa-settings-filter-option {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	font-size: var(--paragraph-base-400-font-size);
+	font-weight: var(--paragraph-base-400-font-weight);
+	color: var(--foreground);
+	letter-spacing: 0.14px;
+	min-width: 170px;
+
+	&:hover {
+		color: var(--card-foreground);
+		background: transparent;
+	}
+}
+
+.sa-settings-search-input {
+	height: 32px;
+	color: var(--l1-foreground);
+	background-color: var(--l2-background);
+	border-color: var(--border);
+
+	&::placeholder {
+		color: var(--l3-foreground);
+	}
+}
+
+.lightMode {
+	.sa-settings {
+		&__title {
+			color: var(--text-base-black);
+		}
+	}
+
+	.sa-settings-filter-option {
+		&:hover {
+			color: var(--bg-neutral-light-100);
+		}
+	}
+}

frontend/src/container/ServiceAccountsSettings/ServiceAccountsSettings.tsx

@@ -0,0 +1,277 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import { Button } from '@signozhq/button';
+import { Check, ChevronDown, Plus } from '@signozhq/icons';
+import { Input } from '@signozhq/input';
+import type { MenuProps } from 'antd';
+import { Dropdown } from 'antd';
+import { useListServiceAccounts } from 'api/generated/services/serviceaccount';
+import CreateServiceAccountModal from 'components/CreateServiceAccountModal/CreateServiceAccountModal';
+import ServiceAccountDrawer from 'components/ServiceAccountDrawer/ServiceAccountDrawer';
+import ServiceAccountsTable from 'components/ServiceAccountsTable/ServiceAccountsTable';
+import useUrlQuery from 'hooks/useUrlQuery';
+
+import { FilterMode, ServiceAccountRow, ServiceAccountStatus } from './utils';
+
+import './ServiceAccountsSettings.styles.scss';
+
+const PAGE_SIZE = 20;
+
+function ServiceAccountsSettings(): JSX.Element {
+	const history = useHistory();
+	const urlQuery = useUrlQuery();
+
+	const pageParam = parseInt(urlQuery.get('page') ?? '1', 10);
+	const currentPage = Number.isNaN(pageParam) || pageParam < 1 ? 1 : pageParam;
+
+	const [searchQuery, setSearchQuery] = useState('');
+	const [filterMode, setFilterMode] = useState<FilterMode>(FilterMode.All);
+	const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+	const [
+		selectedAccount,
+		setSelectedAccount,
+	] = useState<ServiceAccountRow | null>(null);
+
+	const {
+		data: serviceAccountsData,
+		isLoading,
+		refetch,
+	} = useListServiceAccounts();
+
+	const allAccounts = useMemo(
+		(): ServiceAccountRow[] =>
+			(serviceAccountsData?.data ?? []).map((sa) => ({
+				id: sa.id,
+				name: sa.name,
+				email: sa.email,
+				roles: sa.roles,
+				status: sa.status,
+				createdAt: sa.createdAt ? String(sa.createdAt) : null,
+				updatedAt: sa.updatedAt ? String(sa.updatedAt) : null,
+			})),
+		[serviceAccountsData],
+	);
+
+	const activeCount = useMemo(
+		() =>
+			allAccounts.filter(
+				(a) => a.status?.toUpperCase() === ServiceAccountStatus.Active,
+			).length,
+		[allAccounts],
+	);
+
+	const disabledCount = useMemo(
+		() =>
+			allAccounts.filter(
+				(a) => a.status?.toUpperCase() !== ServiceAccountStatus.Active,
+			).length,
+		[allAccounts],
+	);
+
+	const filteredAccounts = useMemo((): ServiceAccountRow[] => {
+		let result = allAccounts;
+
+		if (filterMode === FilterMode.Active) {
+			result = result.filter(
+				(a) => a.status?.toUpperCase() === ServiceAccountStatus.Active,
+			);
+		} else if (filterMode === FilterMode.Disabled) {
+			result = result.filter(
+				(a) => a.status?.toUpperCase() !== ServiceAccountStatus.Active,
+			);
+		}
+
+		if (searchQuery.trim()) {
+			const q = searchQuery.toLowerCase();
+			result = result.filter(
+				(a) =>
+					a.name?.toLowerCase().includes(q) ||
+					a.email?.toLowerCase().includes(q) ||
+					a.roles?.some((role: string) => role.toLowerCase().includes(q)),
+			);
+		}
+
+		return result;
+	}, [allAccounts, filterMode, searchQuery]);
+
+	const paginatedAccounts = useMemo((): ServiceAccountRow[] => {
+		const start = (currentPage - 1) * PAGE_SIZE;
+		return filteredAccounts.slice(start, start + PAGE_SIZE);
+	}, [filteredAccounts, currentPage]);
+
+	const setPage = useCallback(
+		(page: number): void => {
+			urlQuery.set('page', String(page));
+			history.replace({ search: urlQuery.toString() });
+		},
+		[history, urlQuery],
+	);
+
+	useEffect(() => {
+		if (filteredAccounts.length === 0) {
+			return;
+		}
+
+		const maxPage = Math.max(1, Math.ceil(filteredAccounts.length / PAGE_SIZE));
+		if (currentPage > maxPage || currentPage < 1) {
+			setPage(maxPage);
+		}
+	}, [filteredAccounts.length, currentPage, setPage]);
+
+	const totalCount = allAccounts.length;
+
+	const filterMenuItems: MenuProps['items'] = [
+		{
+			key: FilterMode.All,
+			label: (
+				<div className="sa-settings-filter-option">
+					<span>All accounts ⎯ {totalCount}</span>
+					{filterMode === FilterMode.All && <Check size={14} />}
+				</div>
+			),
+			onClick: (): void => {
+				setFilterMode(FilterMode.All);
+				setPage(1);
+			},
+		},
+		{
+			key: FilterMode.Active,
+			label: (
+				<div className="sa-settings-filter-option">
+					<span>Active ⎯ {activeCount}</span>
+					{filterMode === FilterMode.Active && <Check size={14} />}
+				</div>
+			),
+			onClick: (): void => {
+				setFilterMode(FilterMode.Active);
+				setPage(1);
+			},
+		},
+		{
+			key: FilterMode.Disabled,
+			label: (
+				<div className="sa-settings-filter-option">
+					<span>Disabled ⎯ {disabledCount}</span>
+					{filterMode === FilterMode.Disabled && <Check size={14} />}
+				</div>
+			),
+			onClick: (): void => {
+				setFilterMode(FilterMode.Disabled);
+				setPage(1);
+			},
+		},
+	];
+
+	const filterLabel =
+		filterMode === FilterMode.Active
+			? `Active ⎯ ${activeCount}`
+			: filterMode === FilterMode.Disabled
+			? `Disabled ⎯ ${disabledCount}`
+			: `All accounts ⎯ ${totalCount}`;
+
+	const handleRowClick = useCallback((row: ServiceAccountRow): void => {
+		setSelectedAccount(row);
+	}, []);
+
+	const handleDrawerClose = useCallback((): void => {
+		setSelectedAccount(null);
+	}, []);
+
+	const handleDrawerSuccess = useCallback((): void => {
+		refetch();
+		setSelectedAccount(null);
+	}, [refetch]);
+
+	const handleCreateSuccess = useCallback((): void => {
+		refetch();
+	}, [refetch]);
+
+	return (
+		<>
+			<div className="sa-settings">
+				<div className="sa-settings__header">
+					<h1 className="sa-settings__title">Service Accounts</h1>
+					<p className="sa-settings__subtitle">
+						Service accounts are used for machine-to-machine authentication via API
+						keys. {/* Todo: to add doc links */}
+						{/* <a
+							href="https://signoz.io/docs/service-accounts"
+							target="_blank"
+							rel="noopener noreferrer"
+							className="sa-settings__learn-more"
+						>
+							Learn more
+						</a> */}
+					</p>
+				</div>
+
+				<div className="sa-settings__controls">
+					<Dropdown
+						menu={{ items: filterMenuItems }}
+						trigger={['click']}
+						overlayClassName="sa-settings-filter-dropdown"
+					>
+						<Button
+							variant="solid"
+							size="sm"
+							color="secondary"
+							className="sa-settings-filter-trigger"
+						>
+							<span>{filterLabel}</span>
+							<ChevronDown size={12} className="sa-settings-filter-trigger__chevron" />
+						</Button>
+					</Dropdown>
+
+					<div className="sa-settings__search">
+						<Input
+							placeholder="Search by name or email..."
+							value={searchQuery}
+							onChange={(e): void => {
+								setSearchQuery(e.target.value);
+								setPage(1);
+							}}
+							className="sa-settings-search-input"
+							color="secondary"
+						/>
+					</div>
+
+					<Button
+						variant="solid"
+						size="sm"
+						color="primary"
+						onClick={(): void => setIsCreateModalOpen(true)}
+					>
+						<Plus size={12} />
+						New Service Account
+					</Button>
+				</div>
+			</div>
+
+			<ServiceAccountsTable
+				data={paginatedAccounts}
+				loading={isLoading}
+				total={filteredAccounts.length}
+				currentPage={currentPage}
+				pageSize={PAGE_SIZE}
+				searchQuery={searchQuery}
+				onPageChange={setPage}
+				onRowClick={handleRowClick}
+			/>
+
+			<CreateServiceAccountModal
+				open={isCreateModalOpen}
+				onClose={(): void => setIsCreateModalOpen(false)}
+				onSuccess={handleCreateSuccess}
+			/>
+
+			<ServiceAccountDrawer
+				account={selectedAccount}
+				open={selectedAccount !== null}
+				onClose={handleDrawerClose}
+				onSuccess={handleDrawerSuccess}
+			/>
+		</>
+	);
+}
+
+export default ServiceAccountsSettings;

frontend/src/container/ServiceAccountsSettings/utils.ts

@@ -0,0 +1,20 @@
+export enum FilterMode {
+	All = 'all',
+	Active = 'active',
+	Disabled = 'disabled',
+}
+
+export enum ServiceAccountStatus {
+	Active = 'ACTIVE',
+	Disabled = 'DISABLED',
+}
+
+export interface ServiceAccountRow {
+	id: string;
+	name: string;
+	email: string;
+	roles: string[];
+	status: ServiceAccountStatus | string;
+	createdAt: string | null;
+	updatedAt: string | null;
+}

frontend/src/container/SideNav/menuItems.tsx

@@ -8,6 +8,7 @@ import {
 	BellDot,
 	Binoculars,
 	Book,
+	Bot,
 	Boxes,
 	BugIcon,
 	Building2,
@@ -358,6 +359,13 @@ export const settingsNavSections: SettingsNavSection[] = [
 				isEnabled: false,
 				itemKey: 'members',
 			},
+			{
+				key: ROUTES.SERVICE_ACCOUNTS_SETTINGS,
+				label: 'Service Accounts',
+				icon: <Bot size={16} />,
+				isEnabled: false,
+				itemKey: 'service-accounts',
+			},
 			{
 				key: ROUTES.API_KEYS,
 				label: 'API Keys',

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

@@ -154,6 +154,7 @@ export const routesToSkip = [
 	ROUTES.ALL_DASHBOARD,
 	ROUTES.ORG_SETTINGS,
 	ROUTES.MEMBERS_SETTINGS,
+	ROUTES.SERVICE_ACCOUNTS_SETTINGS,
 	ROUTES.INGESTION_SETTINGS,
 	ROUTES.API_KEYS,
 	ROUTES.ERROR_DETAIL,

frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx

@@ -30,7 +30,6 @@ import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { addCustomTimeRange } from 'utils/customTimeRangeUtils';
-import { persistTimeDurationForRoute } from 'utils/metricsTimeStorageUtils';
 import { normalizeTimeToMs } from 'utils/timeUtils';
 import { v4 as uuid } from 'uuid';
 
@@ -235,7 +234,20 @@ function DateTimeSelection({
 
 	const updateLocalStorageForRoutes = useCallback(
 		(value: Time | string): void => {
-			persistTimeDurationForRoute(location.pathname, String(value));
+			const preRoutes = getLocalStorageKey(LOCALSTORAGE.METRICS_TIME_IN_DURATION);
+			if (preRoutes !== null) {
+				const preRoutesObject = JSON.parse(preRoutes);
+
+				const preRoute = {
+					...preRoutesObject,
+				};
+				preRoute[location.pathname] = value;
+
+				setLocalStorageKey(
+					LOCALSTORAGE.METRICS_TIME_IN_DURATION,
+					JSON.stringify(preRoute),
+				);
+			}
 		},
 		[location.pathname],
 	);
@@ -726,7 +738,6 @@ function DateTimeSelection({
 						showRecentlyUsed={showRecentlyUsed}
 						minTime={minTimeForDateTimePicker}
 						maxTime={maxTimeForDateTimePicker}
-						isModalTimeSelection={isModalTimeSelection}
 					/>
 
 					{showAutoRefresh && selectedTime !== 'custom' && (

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

@@ -1,160 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import { QueryParams } from 'constants/query';
-import { GlobalReducer } from 'types/reducer/globalTime';
-
-import { useZoomOut } from '../useZoomOut';
-
-const mockDispatch = jest.fn();
-const mockSafeNavigate = jest.fn();
-const mockUrlQueryDelete = jest.fn();
-const mockUrlQuerySet = jest.fn();
-const mockUrlQueryToString = jest.fn(() => '');
-
-interface MockAppState {
-	globalTime: Pick<GlobalReducer, 'minTime' | 'maxTime'>;
-}
-
-jest.mock('react-redux', () => ({
-	useDispatch: (): jest.Mock => mockDispatch,
-	useSelector: <T>(selector: (state: MockAppState) => T): T => {
-		const mockState: MockAppState = {
-			globalTime: {
-				minTime: 15 * 60 * 1000 * 1e6, // 15 min in nanoseconds
-				maxTime: 30 * 60 * 1000 * 1e6, // 30 min in nanoseconds (mock for getNextZoomOutRange)
-			},
-		};
-		return selector(mockState);
-	},
-}));
-
-jest.mock('react-router-dom', () => ({
-	useLocation: (): { pathname: string } => ({ pathname: '/logs-explorer' }),
-}));
-
-jest.mock('hooks/useSafeNavigate', () => ({
-	useSafeNavigate: (): { safeNavigate: typeof mockSafeNavigate } => ({
-		safeNavigate: mockSafeNavigate,
-	}),
-}));
-
-interface MockUrlQuery {
-	delete: typeof mockUrlQueryDelete;
-	set: typeof mockUrlQuerySet;
-	get: () => null;
-	toString: typeof mockUrlQueryToString;
-}
-
-jest.mock('hooks/useUrlQuery', () => ({
-	__esModule: true,
-	default: (): MockUrlQuery => ({
-		delete: mockUrlQueryDelete,
-		set: mockUrlQuerySet,
-		get: (): null => null,
-		toString: mockUrlQueryToString,
-	}),
-}));
-
-const mockGetNextZoomOutRange = jest.fn();
-jest.mock('lib/zoomOutUtils', () => ({
-	getNextZoomOutRange: (
-		...args: unknown[]
-	): ReturnType<typeof mockGetNextZoomOutRange> =>
-		mockGetNextZoomOutRange(...args),
-}));
-
-describe('useZoomOut', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockUrlQueryToString.mockReturnValue('relativeTime=45m');
-	});
-
-	it('should do nothing when isDisabled is true', () => {
-		const { result } = renderHook(() => useZoomOut({ isDisabled: true }));
-
-		act(() => {
-			result.current();
-		});
-
-		expect(mockGetNextZoomOutRange).not.toHaveBeenCalled();
-		expect(mockDispatch).not.toHaveBeenCalled();
-		expect(mockSafeNavigate).not.toHaveBeenCalled();
-	});
-
-	it('should do nothing when getNextZoomOutRange returns null', () => {
-		mockGetNextZoomOutRange.mockReturnValue(null);
-
-		const { result } = renderHook(() => useZoomOut());
-
-		act(() => {
-			result.current();
-		});
-
-		expect(mockGetNextZoomOutRange).toHaveBeenCalled();
-		expect(mockDispatch).not.toHaveBeenCalled();
-		expect(mockSafeNavigate).not.toHaveBeenCalled();
-	});
-
-	it('should dispatch preset and update URL when result has preset', () => {
-		mockGetNextZoomOutRange.mockReturnValue({
-			range: [1000, 2000],
-			preset: '45m',
-		});
-
-		const { result } = renderHook(() => useZoomOut());
-
-		act(() => {
-			result.current();
-		});
-
-		expect(mockDispatch).toHaveBeenCalledWith(expect.any(Function));
-		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.startTime);
-		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.endTime);
-		expect(mockUrlQuerySet).toHaveBeenCalledWith(QueryParams.relativeTime, '45m');
-		expect(mockSafeNavigate).toHaveBeenCalledWith(
-			expect.stringContaining('/logs-explorer'),
-		);
-	});
-
-	it('should dispatch custom range and update URL when result has no preset', () => {
-		mockGetNextZoomOutRange.mockReturnValue({
-			range: [1000000, 2000000],
-			preset: null,
-		});
-
-		const { result } = renderHook(() => useZoomOut());
-
-		act(() => {
-			result.current();
-		});
-
-		expect(mockDispatch).toHaveBeenCalledWith(expect.any(Function));
-		expect(mockUrlQuerySet).toHaveBeenCalledWith(
-			QueryParams.startTime,
-			'1000000',
-		);
-		expect(mockUrlQuerySet).toHaveBeenCalledWith(QueryParams.endTime, '2000000');
-		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.relativeTime);
-		expect(mockSafeNavigate).toHaveBeenCalledWith(
-			expect.stringContaining('/logs-explorer'),
-		);
-	});
-
-	it('should delete urlParamsToDelete when provided', () => {
-		mockGetNextZoomOutRange.mockReturnValue({
-			range: [1000, 2000],
-			preset: '45m',
-		});
-
-		const { result } = renderHook(() =>
-			useZoomOut({
-				urlParamsToDelete: [QueryParams.activeLogId],
-			}),
-		);
-
-		act(() => {
-			result.current();
-		});
-
-		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.activeLogId);
-	});
-});

frontend/src/hooks/useGetQueryLabels.test.ts

@@ -1,129 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import {
-	IBuilderFormula,
-	IClickHouseQuery,
-	IPromQLQuery,
-	Query,
-} from 'types/api/queryBuilder/queryBuilderData';
-import { EQueryType } from 'types/common/dashboard';
-
-import { useGetQueryLabels } from './useGetQueryLabels';
-
-jest.mock('components/QueryBuilderV2/utils', () => ({
-	getQueryLabelWithAggregation: jest.fn(() => []),
-}));
-
-function buildQuery(overrides: Partial<Query> = {}): Query {
-	return {
-		id: 'test-id',
-		queryType: EQueryType.QUERY_BUILDER,
-		builder: {
-			queryData: [],
-			queryFormulas: [],
-			queryTraceOperator: [],
-		},
-		promql: [],
-		clickhouse_sql: [],
-		...overrides,
-	};
-}
-
-describe('useGetQueryLabels', () => {
-	describe('QUERY_BUILDER type', () => {
-		it('returns empty array when queryFormulas is undefined', () => {
-			const query = buildQuery({
-				queryType: EQueryType.QUERY_BUILDER,
-				builder: {
-					queryData: [],
-					queryFormulas: (undefined as unknown) as IBuilderFormula[],
-					queryTraceOperator: [],
-				},
-			});
-
-			const { result } = renderHook(() => useGetQueryLabels(query));
-
-			expect(result.current).toEqual([]);
-		});
-
-		it('returns formula labels when queryFormulas is populated', () => {
-			const query = buildQuery({
-				queryType: EQueryType.QUERY_BUILDER,
-				builder: {
-					queryData: [],
-					queryFormulas: [
-						({ queryName: 'F1' } as unknown) as IBuilderFormula,
-						({ queryName: 'F2' } as unknown) as IBuilderFormula,
-					],
-					queryTraceOperator: [],
-				},
-			});
-
-			const { result } = renderHook(() => useGetQueryLabels(query));
-
-			expect(result.current).toEqual([
-				{ label: 'F1', value: 'F1' },
-				{ label: 'F2', value: 'F2' },
-			]);
-		});
-	});
-
-	describe('CLICKHOUSE type', () => {
-		it('returns empty array when clickhouse_sql is undefined', () => {
-			const query = buildQuery({
-				queryType: EQueryType.CLICKHOUSE,
-				clickhouse_sql: (undefined as unknown) as IClickHouseQuery[],
-			});
-
-			const { result } = renderHook(() => useGetQueryLabels(query));
-
-			expect(result.current).toEqual([]);
-		});
-
-		it('returns labels from clickhouse_sql when populated', () => {
-			const query = buildQuery({
-				queryType: EQueryType.CLICKHOUSE,
-				clickhouse_sql: [
-					({ name: 'query_a' } as unknown) as IClickHouseQuery,
-					({ name: 'query_b' } as unknown) as IClickHouseQuery,
-				],
-			});
-
-			const { result } = renderHook(() => useGetQueryLabels(query));
-
-			expect(result.current).toEqual([
-				{ label: 'query_a', value: 'query_a' },
-				{ label: 'query_b', value: 'query_b' },
-			]);
-		});
-	});
-
-	describe('PROM type (default)', () => {
-		it('returns empty array when promql is undefined', () => {
-			const query = buildQuery({
-				queryType: EQueryType.PROM,
-				promql: (undefined as unknown) as IPromQLQuery[],
-			});
-
-			const { result } = renderHook(() => useGetQueryLabels(query));
-
-			expect(result.current).toEqual([]);
-		});
-
-		it('returns labels from promql when populated', () => {
-			const query = buildQuery({
-				queryType: EQueryType.PROM,
-				promql: [
-					({ name: 'prom_1' } as unknown) as IPromQLQuery,
-					({ name: 'prom_2' } as unknown) as IPromQLQuery,
-				],
-			});
-
-			const { result } = renderHook(() => useGetQueryLabels(query));
-
-			expect(result.current).toEqual([
-				{ label: 'prom_1', value: 'prom_1' },
-				{ label: 'prom_2', value: 'prom_2' },
-			]);
-		});
-	});
-});

frontend/src/hooks/useGetQueryLabels.ts

@@ -11,7 +11,7 @@ export const useGetQueryLabels = (
 			const queryLabels = getQueryLabelWithAggregation(
 				currentQuery?.builder?.queryData || [],
 			);
-			const formulaLabels = (currentQuery?.builder?.queryFormulas ?? []).map(
+			const formulaLabels = currentQuery?.builder?.queryFormulas?.map(
 				(formula) => ({
 					label: formula.queryName,
 					value: formula.queryName,
@@ -20,13 +20,10 @@ export const useGetQueryLabels = (
 			return [...queryLabels, ...formulaLabels];
 		}
 		if (currentQuery?.queryType === EQueryType.CLICKHOUSE) {
-			return (currentQuery?.clickhouse_sql ?? []).map((q) => ({
+			return currentQuery?.clickhouse_sql?.map((q) => ({
 				label: q.name,
 				value: q.name,
 			}));
 		}
-		return (currentQuery?.promql ?? []).map((q) => ({
-			label: q.name,
-			value: q.name,
-		}));
+		return currentQuery?.promql?.map((q) => ({ label: q.name, value: q.name }));
 	}, [currentQuery]);

frontend/src/hooks/useUrlYAxisUnit.ts

@@ -1,33 +0,0 @@
-import { useCallback } from 'react';
-import { QueryParams } from 'constants/query';
-import { parseAsString, useQueryState } from 'nuqs';
-
-interface UseUrlYAxisUnitResult {
-	yAxisUnit: string;
-	onUnitChange: (value: string) => void;
-}
-
-/**
- * Hook to manage y-axis unit synchronized with the URL query param.
- * It:
- * - Initializes from `QueryParams.yAxisUnit` or a provided default
- * - Keeps local state in sync when the URL changes (e.g. back/forward, shared links)
- * - Writes updates back to the URL while preserving existing query params
- */
-function useUrlYAxisUnit(defaultUnit = ''): UseUrlYAxisUnitResult {
-	const [yAxisUnit, setYAxisUnitInUrl] = useQueryState(
-		QueryParams.yAxisUnit,
-		parseAsString.withDefault(defaultUnit),
-	);
-
-	const onUnitChange = useCallback(
-		(value: string): void => {
-			setYAxisUnitInUrl(value || null);
-		},
-		[setYAxisUnitInUrl],
-	);
-
-	return { yAxisUnit, onUnitChange };
-}
-
-export default useUrlYAxisUnit;

frontend/src/hooks/useZoomOut.ts

@@ -1,79 +0,0 @@
-import { useCallback, useRef } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { useDispatch, useSelector } from 'react-redux';
-import { useLocation } from 'react-router-dom';
-import { QueryParams } from 'constants/query';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import useUrlQuery from 'hooks/useUrlQuery';
-import { getNextZoomOutRange } from 'lib/zoomOutUtils';
-import { UpdateTimeInterval } from 'store/actions';
-import { AppState } from 'store/reducers';
-import { GlobalReducer } from 'types/reducer/globalTime';
-import { persistTimeDurationForRoute } from 'utils/metricsTimeStorageUtils';
-
-export interface UseZoomOutOptions {
-	/** When true, the zoom out handler does nothing (e.g. when live logs are enabled) */
-	isDisabled?: boolean;
-	/** URL params to delete when zooming out (e.g. [QueryParams.activeLogId] for logs) */
-	urlParamsToDelete?: string[];
-}
-
-/**
- * Reusable hook for zoom-out functionality in explorers (logs, traces, etc.).
- * Computes the next time range using the zoom-out ladder, updates Redux global time,
- * and navigates with the new URL params.
- */
-const EMPTY_PARAMS: string[] = [];
-
-export function useZoomOut(options: UseZoomOutOptions = {}): () => void {
-	const { isDisabled = false, urlParamsToDelete = EMPTY_PARAMS } = options;
-	const urlParamsToDeleteRef = useRef(urlParamsToDelete);
-	urlParamsToDeleteRef.current = urlParamsToDelete;
-
-	const dispatch = useDispatch();
-	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-	const urlQuery = useUrlQuery();
-	const location = useLocation();
-	const { safeNavigate } = useSafeNavigate();
-
-	return useCallback((): void => {
-		if (isDisabled) {
-			return;
-		}
-		const minMs = Math.floor((minTime ?? 0) / 1e6);
-		const maxMs = Math.floor((maxTime ?? 0) / 1e6);
-		const result = getNextZoomOutRange(minMs, maxMs);
-		if (!result) {
-			return;
-		}
-		const [newStartMs, newEndMs] = result.range;
-		const { preset } = result;
-
-		if (preset) {
-			dispatch(UpdateTimeInterval(preset));
-			urlQuery.delete(QueryParams.startTime);
-			urlQuery.delete(QueryParams.endTime);
-			urlQuery.set(QueryParams.relativeTime, preset);
-			persistTimeDurationForRoute(location.pathname, preset);
-		} else {
-			dispatch(UpdateTimeInterval('custom', [newStartMs, newEndMs]));
-			urlQuery.set(QueryParams.startTime, String(newStartMs));
-			urlQuery.set(QueryParams.endTime, String(newEndMs));
-			urlQuery.delete(QueryParams.relativeTime);
-		}
-		for (const param of urlParamsToDeleteRef.current) {
-			urlQuery.delete(param);
-		}
-		safeNavigate(`${location.pathname}?${urlQuery.toString()}`);
-	}, [
-		dispatch,
-		isDisabled,
-		location.pathname,
-		maxTime,
-		minTime,
-		safeNavigate,
-		urlQuery,
-	]);
-}

frontend/src/index.tsx

@@ -6,7 +6,6 @@ import { Provider } from 'react-redux';
 import AppRoutes from 'AppRoutes';
 import { AxiosError } from 'axios';
 import { ThemeProvider } from 'hooks/useDarkMode';
-import { NuqsAdapter } from 'nuqs/adapters/react';
 import { AppProvider } from 'providers/App/App';
 import TimezoneProvider from 'providers/Timezone';
 import store from 'store';
@@ -46,19 +45,17 @@ if (container) {
 
 	root.render(
 		<HelmetProvider>
-			<NuqsAdapter>
-				<ThemeProvider>
-					<TimezoneProvider>
-						<QueryClientProvider client={queryClient}>
-							<Provider store={store}>
-								<AppProvider>
-									<AppRoutes />
-								</AppProvider>
-							</Provider>
-						</QueryClientProvider>
-					</TimezoneProvider>
-				</ThemeProvider>
-			</NuqsAdapter>
+			<ThemeProvider>
+				<TimezoneProvider>
+					<QueryClientProvider client={queryClient}>
+						<Provider store={store}>
+							<AppProvider>
+								<AppRoutes />
+							</AppProvider>
+						</Provider>
+					</QueryClientProvider>
+				</TimezoneProvider>
+			</ThemeProvider>
 		</HelmetProvider>,
 	);
 }

frontend/src/lib/__tests__/zoomOutUtils.test.ts

@@ -1,147 +0,0 @@
-import {
-	getNextDurationInLadder,
-	getNextZoomOutRange,
-	isZoomOutDisabled,
-	ZoomOutResult,
-} from '../zoomOutUtils';
-
-const MS_PER_MIN = 60 * 1000;
-const MS_PER_HOUR = 60 * MS_PER_MIN;
-const MS_PER_DAY = 24 * MS_PER_HOUR;
-const MS_PER_WEEK = 7 * MS_PER_DAY;
-
-// Fixed "now" for deterministic tests: 2024-01-15 12:00:00 UTC
-const NOW_MS = 1705312800000;
-
-describe('zoomOutUtils', () => {
-	beforeEach(() => {
-		jest.spyOn(Date, 'now').mockReturnValue(NOW_MS);
-	});
-
-	afterEach(() => {
-		jest.restoreAllMocks();
-	});
-
-	describe('getNextDurationInLadder', () => {
-		it('should use 3x zoom out below 15m until reaching 15m', () => {
-			expect(getNextDurationInLadder(1 * MS_PER_MIN)).toBe(3 * MS_PER_MIN);
-			expect(getNextDurationInLadder(2 * MS_PER_MIN)).toBe(6 * MS_PER_MIN);
-			expect(getNextDurationInLadder(3 * MS_PER_MIN)).toBe(9 * MS_PER_MIN);
-			expect(getNextDurationInLadder(4 * MS_PER_MIN)).toBe(12 * MS_PER_MIN);
-			expect(getNextDurationInLadder(5 * MS_PER_MIN)).toBe(15 * MS_PER_MIN); // cap at 15m
-			expect(getNextDurationInLadder(6 * MS_PER_MIN)).toBe(15 * MS_PER_MIN); // 18m capped
-		});
-
-		it('should return next step for each ladder rung from 15m onward', () => {
-			expect(getNextDurationInLadder(10 * MS_PER_MIN)).toBe(15 * MS_PER_MIN);
-			expect(getNextDurationInLadder(15 * MS_PER_MIN)).toBe(45 * MS_PER_MIN);
-			expect(getNextDurationInLadder(45 * MS_PER_MIN)).toBe(2 * MS_PER_HOUR);
-			expect(getNextDurationInLadder(2 * MS_PER_HOUR)).toBe(7 * MS_PER_HOUR);
-			expect(getNextDurationInLadder(7 * MS_PER_HOUR)).toBe(21 * MS_PER_HOUR);
-			expect(getNextDurationInLadder(21 * MS_PER_HOUR)).toBe(1 * MS_PER_DAY);
-			expect(getNextDurationInLadder(1 * MS_PER_DAY)).toBe(2 * MS_PER_DAY);
-			expect(getNextDurationInLadder(2 * MS_PER_DAY)).toBe(3 * MS_PER_DAY);
-			expect(getNextDurationInLadder(3 * MS_PER_DAY)).toBe(1 * MS_PER_WEEK);
-			expect(getNextDurationInLadder(1 * MS_PER_WEEK)).toBe(2 * MS_PER_WEEK);
-			expect(getNextDurationInLadder(2 * MS_PER_WEEK)).toBe(30 * MS_PER_DAY);
-		});
-
-		it('should return MAX when at or past 1 month (no wrap)', () => {
-			expect(getNextDurationInLadder(30 * MS_PER_DAY)).toBe(30 * MS_PER_DAY);
-			expect(getNextDurationInLadder(31 * MS_PER_DAY)).toBe(30 * MS_PER_DAY);
-		});
-
-		it('should return next step for duration between ladder rungs', () => {
-			expect(getNextDurationInLadder(1 * MS_PER_HOUR)).toBe(2 * MS_PER_HOUR);
-			expect(getNextDurationInLadder(5 * MS_PER_HOUR)).toBe(7 * MS_PER_HOUR);
-			expect(getNextDurationInLadder(12 * MS_PER_HOUR)).toBe(21 * MS_PER_HOUR);
-		});
-	});
-
-	describe('getNextZoomOutRange', () => {
-		it('should return null when duration is zero or negative', () => {
-			expect(getNextZoomOutRange(NOW_MS, NOW_MS)).toBeNull();
-			expect(getNextZoomOutRange(NOW_MS, NOW_MS - 1000)).toBeNull();
-		});
-
-		it('should return center-anchored range and preset=null when new end does not exceed now (Phase 1)', () => {
-			// 15m range centered well before now so zoom to 45m keeps end <= now
-			// Center at now-30m: end = center + 22.5m = now - 7.5m <= now
-			const centerMs = NOW_MS - 30 * MS_PER_MIN;
-			const start15m = centerMs - 7.5 * MS_PER_MIN;
-			const end15m = centerMs + 7.5 * MS_PER_MIN;
-			const result = getNextZoomOutRange(start15m, end15m) as ZoomOutResult;
-
-			expect(result).not.toBeNull();
-			expect(result.preset).toBeNull(); // Phase 1: preserve center-anchored range, avoid GetMinMax "last X from now"
-			const [newStart, newEnd] = result.range;
-			expect(newEnd - newStart).toBe(45 * MS_PER_MIN);
-			const newCenter = (newStart + newEnd) / 2;
-			expect(Math.abs(newCenter - centerMs)).toBeLessThan(2000);
-			expect(newEnd).toBeLessThanOrEqual(NOW_MS + 1000);
-		});
-
-		it('should return end-anchored range when new end would exceed now (Phase 2)', () => {
-			// 22hr range ending at now - zoom to 1d (24hr) would push end past now
-			// Next ladder step from 22hr is 1d
-			const start22h = NOW_MS - 22 * MS_PER_HOUR;
-			const end22h = NOW_MS;
-			const result = getNextZoomOutRange(start22h, end22h) as ZoomOutResult;
-
-			expect(result).not.toBeNull();
-			expect(result.preset).toBe('1d');
-			const [newStart, newEnd] = result.range;
-			expect(newEnd).toBe(NOW_MS); // End anchored at now
-			expect(newStart).toBe(NOW_MS - 1 * MS_PER_DAY);
-		});
-
-		it('should return correct preset for each ladder step', () => {
-			const presets: [number, number, string][] = [
-				[15 * MS_PER_MIN, 0, '45m'],
-				[45 * MS_PER_MIN, 0, '2h'],
-				[2 * MS_PER_HOUR, 0, '7h'],
-				[7 * MS_PER_HOUR, 0, '21h'],
-				[21 * MS_PER_HOUR, 0, '1d'],
-				[1 * MS_PER_DAY, 0, '2d'],
-				[2 * MS_PER_DAY, 0, '3d'],
-				[3 * MS_PER_DAY, 0, '1w'],
-				[1 * MS_PER_WEEK, 0, '2w'],
-				[2 * MS_PER_WEEK, 0, '1month'],
-			];
-
-			presets.forEach(([durationMs, offset, expectedPreset]) => {
-				const end = NOW_MS - offset;
-				const start = end - durationMs;
-				const result = getNextZoomOutRange(start, end);
-				expect(result?.preset).toBe(expectedPreset);
-			});
-		});
-
-		it('isZoomOutDisabled returns true when duration >= 1 month', () => {
-			expect(isZoomOutDisabled(30 * MS_PER_DAY)).toBe(true);
-			expect(isZoomOutDisabled(31 * MS_PER_DAY)).toBe(true);
-			expect(isZoomOutDisabled(29 * MS_PER_DAY)).toBe(false);
-			expect(isZoomOutDisabled(15 * MS_PER_MIN)).toBe(false);
-		});
-
-		it('should return null when at 1 month (no zoom out beyond max)', () => {
-			const start1m = NOW_MS - 30 * MS_PER_DAY;
-			const end1m = NOW_MS;
-			const result = getNextZoomOutRange(start1m, end1m);
-
-			expect(result).toBeNull();
-		});
-
-		it('should zoom out 3x from 5m range to 15m then continue with ladder', () => {
-			// 5m range ending at now → 3x = 15m
-			const start5m = NOW_MS - 5 * MS_PER_MIN;
-			const end5m = NOW_MS;
-			const result = getNextZoomOutRange(start5m, end5m) as ZoomOutResult;
-
-			expect(result).not.toBeNull();
-			expect(result.preset).toBe('15m');
-			const [newStart, newEnd] = result.range;
-			expect(newEnd - newStart).toBe(15 * MS_PER_MIN);
-		});
-	});
-});

frontend/src/lib/zoomOutUtils.ts

@@ -1,139 +0,0 @@
-/**
- * Custom Time Picker zoom-out ladder:
- * - Until 1 day: 15m → 45m → 2hr → 7hr → 21hr
- * - Then fixed: 1d → 2d → 3d → 1w → 2w → 1m
- * - At 1 month: zoom out is disabled (max range)
- */
-
-import type {
-	CustomTimeType,
-	Time,
-} from 'container/TopNav/DateTimeSelectionV2/types';
-
-const MS_PER_MIN = 60 * 1000;
-const MS_PER_HOUR = 60 * MS_PER_MIN;
-const MS_PER_DAY = 24 * MS_PER_HOUR;
-const MS_PER_WEEK = 7 * MS_PER_DAY;
-
-const ZOOM_OUT_LADDER_MS: number[] = [
-	15 * MS_PER_MIN, // 15m
-	45 * MS_PER_MIN, // 45m
-	2 * MS_PER_HOUR, // 2hr
-	7 * MS_PER_HOUR, // 7hr
-	21 * MS_PER_HOUR, // 21hr
-	1 * MS_PER_DAY, // 1d
-	2 * MS_PER_DAY, // 2d
-	3 * MS_PER_DAY, // 3d
-	1 * MS_PER_WEEK, // 1w
-	2 * MS_PER_WEEK, // 2w
-	30 * MS_PER_DAY, // 1m
-];
-
-const LADDER_LAST_INDEX = ZOOM_OUT_LADDER_MS.length - 1;
-const MAX_DURATION = ZOOM_OUT_LADDER_MS[LADDER_LAST_INDEX];
-const MIN_LADDER_DURATION_MS = ZOOM_OUT_LADDER_MS[0]; // 15m - below this we use 3x
-
-export const MAX_ZOOM_OUT_DURATION_MS = MAX_DURATION;
-
-/** Returns true when zoom out should be disabled (range at or beyond 1 month) */
-export function isZoomOutDisabled(durationMs: number): boolean {
-	return durationMs >= MAX_ZOOM_OUT_DURATION_MS;
-}
-
-/** Preset labels for ladder steps supported by GetMinMax (shows "Last 15 minutes" etc. instead of "Custom") */
-const PRESET_FOR_DURATION_MS: Record<number, Time | CustomTimeType> = {
-	[15 * MS_PER_MIN]: '15m',
-	[45 * MS_PER_MIN]: '45m',
-	[2 * MS_PER_HOUR]: '2h',
-	[7 * MS_PER_HOUR]: '7h',
-	[21 * MS_PER_HOUR]: '21h',
-	[1 * MS_PER_DAY]: '1d',
-	[2 * MS_PER_DAY]: '2d',
-	[3 * MS_PER_DAY]: '3d',
-	[1 * MS_PER_WEEK]: '1w',
-	[2 * MS_PER_WEEK]: '2w',
-	[30 * MS_PER_DAY]: '1month',
-};
-
-/**
- * Returns the next duration in the zoom-out ladder for the given current duration.
- * Below 15m: zoom out 3x until we reach 15m, then continue with the ladder.
- * If at or past 1 month, returns MAX_DURATION (no zoom out - button is disabled).
- */
-export function getNextDurationInLadder(durationMs: number): number {
-	if (durationMs >= MAX_DURATION) {
-		return MAX_DURATION; // No zoom out beyond 1 month
-	}
-
-	// Below 15m: zoom out 3x until we reach 15m
-	if (durationMs < MIN_LADDER_DURATION_MS) {
-		const next = durationMs * 3;
-		return Math.min(next, MIN_LADDER_DURATION_MS);
-	}
-
-	// At or above 15m: use the fixed ladder
-	for (let i = 0; i < ZOOM_OUT_LADDER_MS.length; i++) {
-		if (ZOOM_OUT_LADDER_MS[i] > durationMs) {
-			return ZOOM_OUT_LADDER_MS[i];
-		}
-	}
-
-	return MAX_DURATION;
-}
-
-export interface ZoomOutResult {
-	range: [number, number];
-	/** Preset key (e.g. '15m') when range matches a preset - use for display instead of "Custom Date Range" */
-	preset: Time | CustomTimeType | null;
-}
-
-/**
- * Computes the next zoomed-out time range.
- * Phase 1 (center-anchored): While new end <= now, expand from center.
- * Phase 2 (end-anchored at now): When new end would exceed now, anchor end at now and move start backward.
- *
- * @returns ZoomOutResult with range and preset (or null if no change)
- */
-export function getNextZoomOutRange(
-	startMs: number,
-	endMs: number,
-): ZoomOutResult | null {
-	const nowMs = Date.now();
-	const durationMs = endMs - startMs;
-
-	if (durationMs <= 0) {
-		return null;
-	}
-
-	const newDurationMs = getNextDurationInLadder(durationMs);
-
-	// No zoom out when already at max (1 month)
-	if (newDurationMs <= durationMs) {
-		return null;
-	}
-	const centerMs = startMs + durationMs / 2;
-	const computedEndMs = centerMs + newDurationMs / 2;
-
-	let newStartMs: number;
-	let newEndMs: number;
-
-	const isPhase1 = computedEndMs <= nowMs;
-	if (isPhase1) {
-		// Phase 1: center-anchored (historical range not ending at now)
-		newStartMs = centerMs - newDurationMs / 2;
-		newEndMs = computedEndMs;
-	} else {
-		// Phase 2: end-anchored at now
-		newStartMs = nowMs - newDurationMs;
-		newEndMs = nowMs;
-	}
-
-	// Phase 2 only: use preset so GetMinMax produces "last X from now".
-	// Phase 1: preset=null so the center-anchored range is preserved (GetMinMax would discard it).
-	const preset = isPhase1 ? null : PRESET_FOR_DURATION_MS[newDurationMs] ?? null;
-
-	return {
-		range: [Math.round(newStartMs), Math.round(newEndMs)],
-		preset,
-	};
-}

frontend/src/mocks-server/__mockdata__/alerts.ts

@@ -32,8 +32,8 @@ export const editSlackDescriptionDefaultValue = `{{ range .Alerts -}} *Alert:* {
 export const pagerDutyDescriptionDefaultVaule = `{{ if gt (len .Alerts.Firing) 0 -}} Alerts Firing: {{ range .Alerts.Firing }} - Message: {{ .Annotations.description }} Labels: {{ range .Labels.SortedPairs }} - {{ .Name }} = {{ .Value }} {{ end }} Annotations: {{ range .Annotations.SortedPairs }} - {{ .Name }} = {{ .Value }} {{ end }} Source: {{ .GeneratorURL }} {{ end }} {{- end }} {{ if gt (len .Alerts.Resolved) 0 -}} Alerts Resolved: {{ range .Alerts.Resolved }} - Message: {{ .Annotations.description }} Labels: {{ range .Labels.SortedPairs }} - {{ .Name }} = {{ .Value }} {{ end }} Annotations: {{ range .Annotations.SortedPairs }} - {{ .Name }} = {{ .Value }} {{ end }} Source: {{ .GeneratorURL }} {{ end }} {{- end }}`;
 
 export const pagerDutyAdditionalDetailsDefaultValue = JSON.stringify({
-	firing: `{{ .Alerts.Firing | toJson }}`,
-	resolved: `{{ .Alerts.Resolved | toJson }}`,
+	firing: `{{ template "pagerduty.default.instances" .Alerts.Firing }}`,
+	resolved: `{{ template "pagerduty.default.instances" .Alerts.Resolved }}`,
 	num_firing: '{{ .Alerts.Firing | len }}',
 	num_resolved: '{{ .Alerts.Resolved | len }}',
 });

frontend/src/pages/ServiceAccountsSettings/index.tsx

@@ -0,0 +1 @@
+export { default } from 'container/ServiceAccountsSettings/ServiceAccountsSettings';

frontend/src/pages/Settings/Settings.tsx

@@ -84,6 +84,7 @@ function SettingsPage(): JSX.Element {
 							item.key === ROUTES.INGESTION_SETTINGS ||
 							item.key === ROUTES.ORG_SETTINGS ||
 							item.key === ROUTES.MEMBERS_SETTINGS ||
+							item.key === ROUTES.SERVICE_ACCOUNTS_SETTINGS ||
 							item.key === ROUTES.SHORTCUTS
 								? true
 								: item.isEnabled,
@@ -115,6 +116,7 @@ function SettingsPage(): JSX.Element {
 							item.key === ROUTES.API_KEYS ||
 							item.key === ROUTES.ORG_SETTINGS ||
 							item.key === ROUTES.MEMBERS_SETTINGS ||
+							item.key === ROUTES.SERVICE_ACCOUNTS_SETTINGS ||
 							item.key === ROUTES.INGESTION_SETTINGS
 								? true
 								: item.isEnabled,
@@ -140,7 +142,8 @@ function SettingsPage(): JSX.Element {
 						isEnabled:
 							item.key === ROUTES.API_KEYS ||
 							item.key === ROUTES.ORG_SETTINGS ||
-							item.key === ROUTES.MEMBERS_SETTINGS
+							item.key === ROUTES.MEMBERS_SETTINGS ||
+							item.key === ROUTES.SERVICE_ACCOUNTS_SETTINGS
 								? true
 								: item.isEnabled,
 					}));

frontend/src/pages/Settings/config.tsx

@@ -17,6 +17,7 @@ import { TFunction } from 'i18next';
 import {
 	Backpack,
 	BellDot,
+	Bot,
 	Building,
 	Cpu,
 	CreditCard,
@@ -30,6 +31,7 @@ import {
 } from 'lucide-react';
 import ChannelsEdit from 'pages/ChannelsEdit';
 import MembersSettings from 'pages/MembersSettings';
+import ServiceAccountsSettings from 'pages/ServiceAccountsSettings';
 import Shortcuts from 'pages/Shortcuts';
 
 export const organizationSettings = (t: TFunction): RouteTabProps['routes'] => [
@@ -203,6 +205,21 @@ export const mySettings = (t: TFunction): RouteTabProps['routes'] => [
 	},
 ];
 
+export const serviceAccountsSettings = (
+	t: TFunction,
+): RouteTabProps['routes'] => [
+	{
+		Component: ServiceAccountsSettings,
+		name: (
+			<div className="periscope-tab">
+				<Bot size={16} /> {t('routes:service_accounts').toString()}
+			</div>
+		),
+		route: ROUTES.SERVICE_ACCOUNTS_SETTINGS,
+		key: ROUTES.SERVICE_ACCOUNTS_SETTINGS,
+	},
+];
+
 export const createAlertChannels = (t: TFunction): RouteTabProps['routes'] => [
 	{
 		Component: (): JSX.Element => (

frontend/src/pages/Settings/utils.ts

@@ -17,6 +17,7 @@ import {
 	organizationSettings,
 	roleDetails,
 	rolesSettings,
+	serviceAccountsSettings,
 } from './config';
 
 export const getRoutes = (
@@ -61,7 +62,11 @@ export const getRoutes = (
 	settings.push(...alertChannels(t));
 
 	if (isAdmin) {
-		settings.push(...apiKeys(t), ...membersSettings(t));
+		settings.push(
+			...apiKeys(t),
+			...membersSettings(t),
+			...serviceAccountsSettings(t),
+		);
 	}
 
 	// todo: Sagar - check the condition for role list and details page, to whom we want to serve

frontend/src/pages/TracesExplorer/TimeSeriesView/index.tsx

@@ -4,6 +4,7 @@ import {
 	SetStateAction,
 	useEffect,
 	useMemo,
+	useState,
 } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
@@ -15,7 +16,6 @@ import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
 import { convertDataValueToMs } from 'container/TimeSeriesView/utils';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import useUrlYAxisUnit from 'hooks/useUrlYAxisUnit';
 import { AppState } from 'store/reducers';
 import { Warning } from 'types/api';
 import APIError from 'types/api/error';
@@ -52,8 +52,13 @@ function TimeSeriesViewContainer({
 		return isValid.every(Boolean);
 	}, [currentQuery]);
 
-	const defaultUnit = isValidToConvertToMs ? 'ms' : 'short';
-	const { yAxisUnit, onUnitChange } = useUrlYAxisUnit(defaultUnit);
+	const [yAxisUnit, setYAxisUnit] = useState<string>(
+		isValidToConvertToMs ? 'ms' : 'short',
+	);
+
+	const onUnitChangeHandler = (value: string): void => {
+		setYAxisUnit(value);
+	};
 
 	const { selectedTime: globalSelectedTime, maxTime, minTime } = useSelector<
 		AppState,
@@ -116,7 +121,7 @@ function TimeSeriesViewContainer({
 	return (
 		<div className="trace-explorer-time-series-view-container">
 			<div className="trace-explorer-time-series-view-container-header">
-				<BuilderUnitsFilter onChange={onUnitChange} yAxisUnit={yAxisUnit} />
+				<BuilderUnitsFilter onChange={onUnitChangeHandler} yAxisUnit={yAxisUnit} />
 			</div>
 			<TimeSeriesView
 				isFilterApplied={isFilterApplied}

frontend/src/providers/Dashboard/Dashboard.tsx

@@ -68,6 +68,7 @@ export const DashboardContext = createContext<IDashboardContext>({
 		APIError
 	>,
 	selectedDashboard: {} as Dashboard,
+	dashboardId: '',
 	layouts: [],
 	panelMap: {},
 	setPanelMap: () => {},
@@ -80,6 +81,8 @@ export const DashboardContext = createContext<IDashboardContext>({
 	updateLocalStorageDashboardVariables: () => {},
 	dashboardQueryRangeCalled: false,
 	setDashboardQueryRangeCalled: () => {},
+	selectedRowWidgetId: '',
+	setSelectedRowWidgetId: () => {},
 	isDashboardFetching: false,
 	columnWidths: {},
 	setColumnWidths: () => {},
@@ -99,6 +102,10 @@ export function DashboardProvider({
 
 	const [isDashboardLocked, setIsDashboardLocked] = useState<boolean>(false);
 
+	const [selectedRowWidgetId, setSelectedRowWidgetId] = useState<string | null>(
+		null,
+	);
+
 	const [
 		dashboardQueryRangeCalled,
 		setDashboardQueryRangeCalled,
@@ -461,6 +468,8 @@ export function DashboardProvider({
 			updateLocalStorageDashboardVariables,
 			dashboardQueryRangeCalled,
 			setDashboardQueryRangeCalled,
+			selectedRowWidgetId,
+			setSelectedRowWidgetId,
 			isDashboardFetching,
 			columnWidths,
 			setColumnWidths,
@@ -479,6 +488,8 @@ export function DashboardProvider({
 			currentDashboard,
 			dashboardQueryRangeCalled,
 			setDashboardQueryRangeCalled,
+			selectedRowWidgetId,
+			setSelectedRowWidgetId,
 			isDashboardFetching,
 			columnWidths,
 			setColumnWidths,

frontend/src/providers/Dashboard/__tests__/Dashboard.test.tsx

@@ -58,9 +58,8 @@ jest.mock('react-redux', () => ({
 jest.mock('uuid', () => ({ v4: jest.fn(() => 'mock-uuid') }));
 
 function TestComponent(): JSX.Element {
-	const { dashboardResponse, selectedDashboard } = useDashboard();
+	const { dashboardResponse, dashboardId, selectedDashboard } = useDashboard();
 	const { dashboardVariables } = useDashboardVariables();
-	const dashboardId = selectedDashboard?.id;
 
 	return (
 		<div>

frontend/src/providers/Dashboard/helpers/selectedRowWidgetIdHelper.ts

@@ -1,28 +0,0 @@
-const PREFIX = 'dashboard_row_widget_';
-
-function getKey(dashboardId: string): string {
-	return `${PREFIX}${dashboardId}`;
-}
-
-export function setSelectedRowWidgetId(
-	dashboardId: string,
-	widgetId: string,
-): void {
-	const key = getKey(dashboardId);
-
-	// remove all other selected widget ids for the dashboard before setting the new one
-	// to ensure only one widget is selected at a time. Helps out in weird navigate and refresh scenarios
-	Object.keys(sessionStorage)
-		.filter((k) => k.startsWith(PREFIX) && k !== key)
-		.forEach((k) => sessionStorage.removeItem(k));
-
-	sessionStorage.setItem(key, widgetId);
-}
-
-export function getSelectedRowWidgetId(dashboardId: string): string | null {
-	return sessionStorage.getItem(getKey(dashboardId));
-}
-
-export function clearSelectedRowWidgetId(dashboardId: string): void {
-	sessionStorage.removeItem(getKey(dashboardId));
-}

frontend/src/providers/Dashboard/types.ts

@@ -15,6 +15,7 @@ export interface IDashboardContext {
 	handleDashboardLockToggle: (value: boolean) => void;
 	dashboardResponse: UseQueryResult<SuccessResponseV2<Dashboard>, unknown>;
 	selectedDashboard: Dashboard | undefined;
+	dashboardId: string;
 	layouts: Layout[];
 	panelMap: Record<string, { widgets: Layout[]; collapsed: boolean }>;
 	setPanelMap: React.Dispatch<React.SetStateAction<Record<string, any>>>;
@@ -39,6 +40,8 @@ export interface IDashboardContext {
 	) => void;
 	dashboardQueryRangeCalled: boolean;
 	setDashboardQueryRangeCalled: (value: boolean) => void;
+	selectedRowWidgetId: string | null;
+	setSelectedRowWidgetId: React.Dispatch<React.SetStateAction<string | null>>;
 	isDashboardFetching: boolean;
 	columnWidths: WidgetColumnWidths;
 	setColumnWidths: React.Dispatch<React.SetStateAction<WidgetColumnWidths>>;

frontend/src/tests/test-utils.tsx

@@ -7,7 +7,6 @@ import { render, RenderOptions, RenderResult } from '@testing-library/react';
 import { FeatureKeys } from 'constants/features';
 import { ORG_PREFERENCES } from 'constants/orgPreferences';
 import { ResourceProvider } from 'hooks/useResourceAttribute';
-import { NuqsAdapter } from 'nuqs/adapters/react';
 import { AppContext } from 'providers/App/App';
 import { IAppContext } from 'providers/App/types';
 import { ErrorModalProvider } from 'providers/ErrorModalProvider';
@@ -281,25 +280,23 @@ export function AllTheProviders({
 
 	return (
 		<MemoryRouter initialEntries={[initialRouteValue]}>
-			<NuqsAdapter>
-				<QueryClientProvider client={queryClient}>
-					<Provider store={mockStored(roleValue)}>
-						<AppContext.Provider
-							value={getAppContextMock(roleValue, appContextOverridesValue)}
-						>
-							<ResourceProvider>
-								<ErrorModalProvider>
-									<TimezoneProvider>
-										<PreferenceContextProvider>
-											{queryBuilderContent}
-										</PreferenceContextProvider>
-									</TimezoneProvider>
-								</ErrorModalProvider>
-							</ResourceProvider>
-						</AppContext.Provider>
-					</Provider>
-				</QueryClientProvider>
-			</NuqsAdapter>
+			<QueryClientProvider client={queryClient}>
+				<Provider store={mockStored(roleValue)}>
+					<AppContext.Provider
+						value={getAppContextMock(roleValue, appContextOverridesValue)}
+					>
+						<ResourceProvider>
+							<ErrorModalProvider>
+								<TimezoneProvider>
+									<PreferenceContextProvider>
+										{queryBuilderContent}
+									</PreferenceContextProvider>
+								</TimezoneProvider>
+							</ErrorModalProvider>
+						</ResourceProvider>
+					</AppContext.Provider>
+				</Provider>
+			</QueryClientProvider>
 		</MemoryRouter>
 	);
 }

frontend/src/utils/metricsTimeStorageUtils.ts

@@ -1,28 +0,0 @@
-import getLocalStorageKey from 'api/browser/localstorage/get';
-import setLocalStorageKey from 'api/browser/localstorage/set';
-import { LOCALSTORAGE } from 'constants/localStorage';
-
-/**
- * Updates the stored time duration for a route in localStorage.
- * Used by both DateTimeSelectionV2 (manual time pick) and useZoomOut (zoom out button).
- *
- * @param pathname - The route path (e.g. /infrastructure-monitoring/hosts)
- * @param value - The time value to store (preset string like '1w' or JSON string for custom range)
- */
-export function persistTimeDurationForRoute(
-	pathname: string,
-	value: string,
-): void {
-	const preRoutes = getLocalStorageKey(LOCALSTORAGE.METRICS_TIME_IN_DURATION);
-	let preRoutesObject: Record<string, string> = {};
-	try {
-		preRoutesObject = preRoutes ? JSON.parse(preRoutes) : {};
-	} catch {
-		preRoutesObject = {};
-	}
-	const preRoute = { ...preRoutesObject, [pathname]: value };
-	setLocalStorageKey(
-		LOCALSTORAGE.METRICS_TIME_IN_DURATION,
-		JSON.stringify(preRoute),
-	);
-}